/* Alle Farben und Masse kommen aus mood, aber mit Rueckfall. Laeuft das
   Plugin in einem anderen Theme, greifen die Zweitwerte und die Seite
   bleibt lesbar. */
.rpg-stk {
	--rs-ink:      var(--md-ink, #ddd8d0);
	--rs-bright:   var(--md-ink-bright, #fff);
	--rs-dim:      var(--md-ink-dim, #b3aca2);
	--rs-faint:    var(--md-ink-faint, #837c72);
	--rs-rule:     var(--md-rule, rgba(255,255,255,.16));
	--rs-hair:     var(--md-rule-hair, rgba(255,255,255,.08));
	--rs-soft:     var(--md-rule-soft, rgba(255,255,255,.24));
	--rs-accent:   var(--md-accent, #b0483f);
	--rs-acc-soft: var(--md-accent-soft, rgba(176,72,63,.22));
	--rs-glass:    var(--md-glass, rgba(0,0,0,.35));
	--rs-scrim:    var(--md-scrim-solid, #17151a);
	--rs-serif:    var(--md-f-serif, Georgia, serif);
	--rs-sans:     var(--md-f-sans, system-ui, sans-serif);
	--rs-t-micro:  var(--md-t-micro, .68rem);
	--rs-t-kicker: var(--md-t-kicker, .72rem);
	--rs-ls-nav:   var(--md-ls-nav, .18em);
	--rs-dur:      var(--md-dur, .22s);
	--rs-ease:     var(--md-ease, ease);

	/* Kantenlaenge einer Kachel — spiegelt rpg_sticker_size aus dem ACP. */
	--rs-size: 72px;
}

/* --- Seitenkopf -------------------------------------------------
   In mood tragen md-pagehead, md-kicker, md-name und md-lede die Optik.
   Die Regeln hier stehen in :where() und haben damit Spezifitaet null:
   in mood gewinnt das Theme, anderswo greifen sie als Rueckfall. */
.rpg-stk__head {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
	padding-bottom: clamp(1.25rem, 3vw, 2rem);
	border-bottom: 1px solid var(--rs-rule);
}
:where(.rpg-stk__kicker) {
	margin: 0;
	font-size: var(--rs-t-kicker);
	letter-spacing: var(--md-ls-kicker, .42em);
	text-transform: uppercase;
	color: var(--rs-dim);
}
:where(.rpg-stk__title) {
	margin: .4rem 0 0;
	font-family: var(--rs-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.05;
	letter-spacing: var(--md-ls-display, .06em);
	text-transform: uppercase;
	color: var(--rs-bright);
}
:where(.rpg-stk__lede) {
	margin: .7rem 0 0;
	max-width: 62ch;
	color: var(--rs-dim);
}
.rpg-stk__count {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-size: var(--rs-t-micro);
	letter-spacing: var(--rs-ls-nav);
	text-transform: uppercase;
	color: var(--rs-faint);
}

/* --- Kategorieblock --- */
.rpg-stk__cat { margin-top: clamp(2rem, 4.5vw, 3.25rem); }
.rpg-stk__cat:first-of-type { margin-top: 0; }
.rpg-stk__cathead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem 1.1rem;
	margin-bottom: 1.2rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--rs-rule);
}
.rpg-stk__catname {
	margin: 0;
	font-family: var(--rs-serif);
	font-weight: 400;
	font-size: clamp(1.1rem, 2.4vw, 1.45rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rs-bright);
}
.rpg-stk__catdesc {
	margin: 0;
	font-size: var(--rs-t-micro);
	letter-spacing: var(--rs-ls-nav);
	text-transform: uppercase;
	color: var(--rs-faint);
}

/* --- Raster ------------------------------------------------------
   auto-fill statt fester Spaltenzahl: das Raster passt sich an, ohne
   dass das Plugin die Breite kennen muss. */
.rpg-stk__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--rs-size), 1fr));
	gap: clamp(.9rem, 2vw, 1.4rem);
}

/* --- Kachel ------------------------------------------------------
   Der Container traegt position:relative, damit die Tafel darueber
   liegen kann, ohne das Raster umzubrechen. */
.rpg-stk__item { position: relative; }

.rpg-stk__btn {
	display: grid;
	justify-items: center;
	gap: .5rem;
	width: 100%;
	padding: .6rem .3rem .7rem;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--md-r, 2px);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color var(--rs-dur) var(--rs-ease),
	            background-color var(--rs-dur) var(--rs-ease);
}
.rpg-stk__btn:hover,
.rpg-stk__btn:focus-visible { border-color: var(--rs-hair); background: var(--rs-glass); }
.rpg-stk__btn:focus-visible { outline: 1px solid var(--rs-soft); outline-offset: 2px; }

.rpg-stk__img {
	display: block;
	width: var(--rs-size);
	height: var(--rs-size);
	max-width: 100%;
	object-fit: contain;
	transition: filter var(--rs-dur) var(--rs-ease),
	            opacity var(--rs-dur) var(--rs-ease);
}
.rpg-stk__name {
	font-size: var(--rs-t-micro);
	line-height: 1.4;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--rs-dim);
}

/* Zustand: im Besitz — Haken oben rechts, Name in voller Helligkeit. */
.rpg-stk__item--owned .rpg-stk__name { color: var(--rs-bright); }
.rpg-stk__item--owned .rpg-stk__btn { border-color: var(--rs-hair); }
.rpg-stk__mark {
	position: absolute;
	top: .2rem; right: .2rem;
	display: grid;
	place-items: center;
	width: 1.1rem; height: 1.1rem;
	border-radius: 50%;
	background: var(--rs-accent);
	font-size: .62rem;
	line-height: 1;
	color: #fff;
}

/* Zustand: Antrag laeuft — gestrichelter Rahmen statt eigener Farbe,
   damit die Kachel nicht mit "besessen" verwechselt wird. */
.rpg-stk__item--pending .rpg-stk__btn { border: 1px dashed var(--rs-soft); }
.rpg-stk__item--pending .rpg-stk__img { opacity: .55; }

/* Zustand: noch nicht erhalten — Bild entsaettigt.
   Kein Ausblenden: es soll sichtbar bleiben, was es zu holen gibt. */
.rpg-stk__item--open .rpg-stk__img,
.rpg-stk__item--locked .rpg-stk__img { filter: grayscale(1); opacity: .4; }
.rpg-stk__item--open .rpg-stk__btn:hover .rpg-stk__img,
.rpg-stk__item--open .rpg-stk__btn:focus-visible .rpg-stk__img { filter: grayscale(.4); opacity: .75; }
.rpg-stk__item--open .rpg-stk__name,
.rpg-stk__item--locked .rpg-stk__name { color: var(--rs-faint); }

/* --- Tafel -------------------------------------------------------
   Kein title-Attribut: das erscheint nicht bei Tastaturfokus und laesst
   sich nicht gestalten. Die Tafel liegt ueber der Kachel und wird per
   Hover, Fokus oder Klick geoeffnet. */
.rpg-stk__panel {
	position: absolute;
	z-index: 20;
	left: 50%; top: calc(100% - .2rem);
	width: max(210px, 100%);
	padding: .8rem .9rem;
	background: var(--rs-scrim);
	border: 1px solid var(--rs-rule);
	box-shadow: 0 12px 30px rgba(0,0,0,.45);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -.35rem);
	transition: opacity var(--rs-dur) var(--rs-ease),
	            transform var(--rs-dur) var(--rs-ease),
	            visibility var(--rs-dur);
	pointer-events: none;
}
.rpg-stk__item:hover .rpg-stk__panel,
.rpg-stk__item:focus-within .rpg-stk__panel,
.rpg-stk__item--open-panel .rpg-stk__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
/* Am rechten Rand kippt die Tafel nach innen, sonst laeuft sie aus dem
   Bild. Die Klasse setzt das JS anhand der Position. */
.rpg-stk__item--flip-r .rpg-stk__panel { left: auto; right: 0; transform: translate(0, -.35rem); }
.rpg-stk__item--flip-r:hover .rpg-stk__panel,
.rpg-stk__item--flip-r:focus-within .rpg-stk__panel,
.rpg-stk__item--flip-r.rpg-stk__item--open-panel .rpg-stk__panel { transform: translate(0, 0); }

.rpg-stk__paneltitle {
	margin: 0 0 .35rem;
	font-family: var(--rs-serif);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: .03em;
	color: var(--rs-bright);
}
.rpg-stk__desc {
	margin: 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--rs-dim);
}
.rpg-stk__meta {
	margin: .55rem 0 0;
	padding-top: .5rem;
	border-top: 1px solid var(--rs-hair);
	font-size: var(--rs-t-micro);
	letter-spacing: var(--rs-ls-nav);
	text-transform: uppercase;
	color: var(--rs-faint);
}
.rpg-stk__act { margin-top: .7rem; }
.rpg-stk__act .md-btn { width: 100%; }

/* --- Streifen "Meine Sticker" ------------------------------------
   Gleiche Kacheln, aber in einer Zeile mit Querlauf statt im Raster. */
.rpg-stk__mine {
	margin-bottom: clamp(2rem, 4.5vw, 3rem);
	padding-bottom: clamp(1.4rem, 3vw, 2rem);
	border-bottom: 1px solid var(--rs-rule);
}
.rpg-stk__mine .rpg-stk__grid {
	grid-auto-flow: column;
	grid-auto-columns: var(--rs-size);
	grid-template-columns: none;
	overflow-x: auto;
	padding-bottom: .4rem;
}
.rpg-stk__empty {
	margin: 0;
	padding: 1.6rem 0;
	font-size: .85rem;
	font-style: italic;
	color: var(--rs-faint);
}

/* --- Antragsformular --------------------------------------------- */
.rpg-stk__form {
	max-width: 46rem;
	margin-top: clamp(1.2rem, 3vw, 1.8rem);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	background: var(--rs-glass);
	border: 1px solid var(--rs-rule);
}
.rpg-stk__formhead {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rs-hair);
}
.rpg-stk__formhead img { width: 64px; height: 64px; object-fit: contain; }
.rpg-stk__formhead h2 {
	margin: 0 0 .25rem;
	font-family: var(--rs-serif);
	font-weight: 400;
	font-size: 1.2rem;
	letter-spacing: .03em;
	color: var(--rs-bright);
}
.rpg-stk__formhead p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--rs-dim); }
.rpg-stk__label {
	display: block;
	margin-bottom: .45rem;
	font-size: var(--rs-t-micro);
	letter-spacing: var(--rs-ls-nav);
	text-transform: uppercase;
	color: var(--rs-faint);
}
.rpg-stk__area {
	width: 100%;
	min-height: 7rem;
	padding: .7rem .8rem;
	background: rgba(0,0,0,.25);
	border: 1px solid var(--rs-rule);
	font-family: var(--rs-sans);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--rs-ink);
	resize: vertical;
}
.rpg-stk__area:focus-visible { outline: 1px solid var(--rs-soft); outline-offset: 1px; }
.rpg-stk__hint {
	margin: .5rem 0 0;
	font-size: var(--rs-t-micro);
	color: var(--rs-faint);
}
.rpg-stk__formfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	margin-top: 1.2rem;
}

/* --- Hinweiszeile (Limit erreicht, Antrag gesendet, abgelehnt) ---- */
.rpg-stk__msg {
	margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
	padding: .8rem 1rem;
	border: 1px solid var(--rs-hair);
	border-left: 2px solid var(--rs-accent);
	font-size: .85rem;
	line-height: 1.65;
	color: var(--rs-dim);
}
.rpg-stk__msg b { color: var(--rs-bright); font-weight: 400; }

/* --- Block im Profil --- */
.rpg-stk--profile { --rs-size: 56px; }
.rpg-stk--profile > .md-head { margin-bottom: 1.2rem; }
.rpg-stk--profile .rpg-stk__cat { margin-top: 1.6rem; }
.rpg-stk--profile .rpg-stk__cat:first-of-type { margin-top: 0; }
.rpg-stk--profile .rpg-stk__cathead {
	justify-content: space-between;
	margin-bottom: .8rem;
	padding-bottom: .5rem;
	border-bottom-color: var(--rs-hair);
}
.rpg-stk--profile .rpg-stk__catname {
	font-family: var(--rs-sans);
	font-size: var(--rs-t-micro);
	letter-spacing: var(--rs-ls-nav);
	color: var(--rs-dim);
}
.rpg-stk--profile .rpg-stk__grid {
	grid-template-columns: repeat(auto-fill, calc(var(--rs-size) + .6rem));
	gap: .5rem;
}
.rpg-stk--profile .rpg-stk__btn { padding: .3rem; }
.rpg-stk--profile .rpg-stk__panel {
	--rs-x: -50%;
	top: auto;
	bottom: calc(100% + .2rem);
	transform: translate(var(--rs-x), .35rem);
}
.rpg-stk--profile .rpg-stk__item:hover .rpg-stk__panel,
.rpg-stk--profile .rpg-stk__item:focus-within .rpg-stk__panel,
.rpg-stk--profile .rpg-stk__item--open-panel .rpg-stk__panel { transform: translate(var(--rs-x), 0); }
.rpg-stk--profile .rpg-stk__item--flip-r .rpg-stk__panel { --rs-x: 0%; left: auto; right: 0; }
.rpg-stk--profile .rpg-stk__item--flip-l .rpg-stk__panel { --rs-x: 0%; left: 0; right: auto; }
.rpg-stk__more {
	display: inline-block;
	margin-top: 1.1rem;
	font-size: var(--rs-t-micro);
	letter-spacing: var(--rs-ls-nav);
	text-transform: uppercase;
	color: var(--rs-dim);
}

/* --- ModCP-Liste --------------------------------------------------
   Kein table-Layout im Plugin: eine Liste aus Zeilen, die unter 640px
   auf Blockdarstellung umbricht. */
.rpg-stk__queue { display: grid; gap: .8rem; }
.rpg-stk__row {
	display: grid;
	grid-template-columns: 56px minmax(12rem, 1fr) minmax(0, 2fr) auto;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1rem;
	background: var(--rs-glass);
	border: 1px solid var(--rs-hair);
}
.rpg-stk__row img { width: 48px; height: 48px; object-fit: contain; }
.rpg-stk__who { margin: 0; font-size: .9rem; color: var(--rs-bright); }
.rpg-stk__who span { display: block; margin-top: .2rem; font-size: var(--rs-t-micro); letter-spacing: var(--rs-ls-nav); text-transform: uppercase; color: var(--rs-faint); }
.rpg-stk__reason { margin: 0; font-size: .85rem; line-height: 1.6; font-style: italic; color: var(--rs-dim); }
.rpg-stk__reason em { font-style: normal; color: var(--rs-faint); }
.rpg-stk__rowacts { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) {
	.rpg-stk__row { grid-template-columns: 48px 1fr; }
	.rpg-stk__reason, .rpg-stk__rowacts { grid-column: 1 / -1; }
}

/* --- Kleinteile ausserhalb des Katalogs --------------------------- */

/* Begruendungsfeld in der Freigabezeile. Waechst mit, bleibt aber schmal
   genug, dass die beiden Schaltflaechen daneben passen. */
.rpg-stk__reasonfield {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .45rem .6rem;
	background: rgba(0,0,0,.25);
	border: 1px solid var(--rs-rule);
	font-family: var(--rs-sans);
	font-size: .85rem;
	color: var(--rs-ink);
}
.rpg-stk__reasonfield:focus-visible { outline: 1px solid var(--rs-soft); outline-offset: 1px; }

/* Seitenzahlen unter der Freigabeliste. */
.rpg-stk__pages { margin-top: 1.2rem; }