/* Superhirn – Dekodierbrett
   Alle Regeln sind auf .shrn gescoped, damit kein Theme-CSS kollidiert. */

.shrn {
	--shrn-board:   #123a3d;  /* Brettoberfläche, dunkles Türkis */
	--shrn-well:    #0e2f31;  /* eingelassene Reihen */
	--shrn-hole:    #0a2426;  /* leere Bohrung */
	--shrn-edge:    #2f6668;  /* Kante / Fase */
	--shrn-brass:   #52b7c1;  /* Akzent / Marken – nowo1-Türkis */
	--shrn-text:    #e9f3f3;
	--shrn-muted:   #93b6b6;
	--shrn-black:   #2fbf6b;  /* Auswertung: richtig platziert (Grün) */
	--shrn-white:   #ffce3a;  /* Auswertung: richtige Farbe, falsche Stelle (Amber) */

	--shrn-c1: #c8453c;  /* Rot */
	--shrn-c2: #2f6fb5;  /* Blau */
	--shrn-c3: #3e9463;  /* Grün */
	--shrn-c4: #e3b23c;  /* Gelb */
	--shrn-c5: #de7a3a;  /* Orange */
	--shrn-c6: #7d5ba6;  /* Violett */
	--shrn-c7: #3aa6a6;  /* Türkis */
	--shrn-c8: #c87fa8;  /* Rosa */

	--shrn-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--shrn-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--shrn-len: 4;
	--shrn-peg:  34px;  /* Spielstein auf dem Brett */
	--shrn-chip: 34px;  /* Farbwähler – bleibt größer, das ist das Touch-Ziel */
	--shrn-gap:  8px;
	--shrn-key:  12px;  /* Auswertungsstift */

	/* Das Brett misst sich selbst. Sonst richtet es sich nach dem
	   Browserfenster und läuft aus einer schmalen Spalte heraus. */
	container-type: inline-size;
	container-name: shrn;

	font-family: var(--shrn-sans);
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}

.shrn *,
.shrn *::before,
.shrn *::after { box-sizing: border-box; }

/* ---------- Kopf ---------- */

.shrn__head { margin-bottom: 14px; }

.shrn__eyebrow {
	font-family: var(--shrn-mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--shrn-brass);
	margin: 0 0 4px;
}

.shrn__title {
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin: 0;
	color: inherit;
}

/* ---------- Brett ---------- */

.shrn__board {
	background: var(--shrn-board);
	color: var(--shrn-text);
	background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18) );
	border: 1px solid var(--shrn-edge);
	border-radius: 14px;
	padding: clamp(14px, 3vw, 24px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- Geheimcode mit Blende ---------- */

.shrn__secret {
	position: relative;
	perspective: 700px;
	background: var(--shrn-well);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	min-height: calc(var(--shrn-peg) + 34px);
}

.shrn__secretLabel {
	display: block;
	font-family: var(--shrn-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--shrn-muted);
	margin-bottom: 8px;
}

.shrn__secretPegs {
	display: flex;
	gap: var(--shrn-gap);
	min-width: 0;
}

.shrn__shield {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: linear-gradient( 160deg, #8fd9df 0%, var(--shrn-brass) 46%, #2c6f75 100% );
	border: 1px solid #2c6f75;
	transform-origin: top center;
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease 260ms;
}

.shrn__shield::after {
	content: "verdeckt";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--shrn-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #0e3b3e;
}

.shrn__shield.is-open {
	transform: rotateX(-104deg);
	opacity: 0;
	pointer-events: none;
}

/* ---------- Rateversuche ---------- */

.shrn__rows { display: flex; flex-direction: column-reverse; gap: 6px; }

.shrn__row {
	display: grid;
	grid-template-columns: var(--shrn-numcol, 26px) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--shrn-rowgap, 12px);
	background: var(--shrn-well);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 7px 10px;
}

.shrn__row.is-active {
	border-color: var(--shrn-brass);
	background: #173f42;
}

.shrn__row.is-done { opacity: 0.92; }

.shrn__rowNum {
	font-family: var(--shrn-mono);
	font-size: 11px;
	color: var(--shrn-muted);
	text-align: right;
}

.shrn__row.is-active .shrn__rowNum { color: var(--shrn-brass); }

.shrn__slots { display: flex; gap: var(--shrn-gap); min-width: 0; }

/* ---------- Steine ---------- */

/* flex-basis statt fester Breite: reicht die 1fr-Spur nicht, schrumpfen die
   Steine gemeinsam, statt die Reihe aus dem Brett zu schieben. aspect-ratio
   hält sie dabei rund. */
.shrn__peg {
	flex: 0 1 var(--shrn-peg);
	width: var(--shrn-peg);
	max-width: var(--shrn-peg);
	min-width: 0;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
	padding: 0;
	margin: 0;
	background: var(--shrn-hole);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	appearance: none;
}

button.shrn__peg { cursor: pointer; }

.shrn__peg.is-filled {
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.42), inset 0 3px 5px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.shrn__pegNum {
	font-family: var(--shrn-mono);
	font-size: max(8px, calc(var(--shrn-peg) * 0.36));
	line-height: 1;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.55);
	opacity: 0;
}

.shrn__peg.is-filled .shrn__pegNum { opacity: 1; }

.shrn__peg:focus-visible,
.shrn__chip:focus-visible {
	outline: 2px solid var(--shrn-brass);
	outline-offset: 3px;
}

.shrn__c1, .shrn__peg.is-c1 { background: var(--shrn-c1); }
.shrn__c2, .shrn__peg.is-c2 { background: var(--shrn-c2); }
.shrn__c3, .shrn__peg.is-c3 { background: var(--shrn-c3); }
.shrn__c4, .shrn__peg.is-c4 { background: var(--shrn-c4); }
.shrn__c5, .shrn__peg.is-c5 { background: var(--shrn-c5); }
.shrn__c6, .shrn__peg.is-c6 { background: var(--shrn-c6); }
.shrn__c7, .shrn__peg.is-c7 { background: var(--shrn-c7); }
.shrn__c8, .shrn__peg.is-c8 { background: var(--shrn-c8); }

/* ---------- Auswertung ---------- */

.shrn__keys {
	display: grid;
	grid-template-rows: repeat(2, var(--shrn-key));
	grid-auto-flow: column;
	grid-auto-columns: var(--shrn-key);
	gap: 3px;
	align-content: center;
	padding: 4px 5px;
	background: rgba(0, 0, 0, 0.28);
	border-radius: 5px;
	min-width: calc(var(--shrn-key) * 2 + 7px);
	min-height: calc(var(--shrn-key) * 2 + 7px);
}

.shrn__key {
	width: var(--shrn-key);
	height: var(--shrn-key);
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--shrn-hole);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
	display: inline-block;
}

/* Richtig platziert – kräftiges Grün mit leichtem Glow, hebt sich klar ab. */
.shrn__key--black {
	background: var(--shrn-black);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.45),
		0 0 0 1px rgba(0, 0, 0, 0.35),
		0 0 5px rgba(47, 191, 107, 0.7);
}

/* Richtige Farbe, falsche Stelle – Amber, klar gegen Grün und Brett abgesetzt. */
.shrn__key--white {
	background: var(--shrn-white);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.55),
		0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* ---------- Status, Palette, Aktionen ---------- */

.shrn__status {
	font-family: var(--shrn-mono);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--shrn-muted);
	margin: 14px 0 0;
	min-height: 1.5em;
}

.shrn__status--win  { color: #8ed4a4; font-weight: 700; }
.shrn__status--lose { color: #e58f86; font-weight: 700; }

.shrn__palette {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.shrn__chip {
	width: var(--shrn-chip);
	height: var(--shrn-chip);
	flex: 0 0 auto;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.42), inset 0 3px 5px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: transform 120ms ease;
	appearance: none;
}

.shrn__chip:hover { transform: translateY(-2px); }
.shrn__chip[disabled] { cursor: not-allowed; transform: none; }

.shrn__chipNum {
	font-family: var(--shrn-mono);
	font-size: 12px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.55);
}

.shrn__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.shrn__btn {
	font-family: var(--shrn-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 10px 16px;
	border-radius: 6px;
	background: var(--shrn-brass);
	color: #241d10;
	border: 1px solid #6f5a31;
	cursor: pointer;
	font-weight: 700;
}

.shrn__btn--ghost {
	background: transparent;
	color: var(--shrn-text);
	border-color: var(--shrn-edge);
	font-weight: 400;
}

.shrn__btn:hover:not([disabled]) { filter: brightness(1.08); }
.shrn__btn[disabled] { opacity: 0.38; cursor: not-allowed; }
.shrn__btn:focus-visible { outline: 2px solid var(--shrn-brass); outline-offset: 2px; }

.shrn__hint {
	font-size: 12px;
	line-height: 1.6;
	color: var(--shrn-muted);
	margin: 12px 0 0;
}

.shrn__hint kbd {
	font-family: var(--shrn-mono);
	font-size: 11px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--shrn-edge);
	border-radius: 3px;
	padding: 1px 5px;
	color: var(--shrn-text);
}

.shrn__legend {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 12px;
	color: var(--shrn-muted);
}

.shrn__legend li { display: flex; align-items: center; gap: 7px; }

/* Screenreader-Text, falls das Theme die Klasse nicht mitbringt */
.shrn .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Responsiv ---------- */

/* Die Variablen sitzen auf .shrn__board, nicht auf .shrn: der Container
   selbst wird von seiner eigenen @container-Regel nicht getroffen. */

/* Schmale Spalte – z. B. ein Drittel-Widget oder ein Handy im Hochformat. */
@container shrn (max-width: 460px) {
	.shrn__board {
		--shrn-peg: 28px;
		--shrn-gap: 6px;
		--shrn-numcol: 20px;
		--shrn-rowgap: 8px;
		--shrn-key: 10px;
		padding: 14px;
	}
	.shrn__row { padding: 6px 8px; }
	.shrn__secret { padding: 10px 10px; }
}

/* Sehr schmal – hier zählt jedes Pixel, der Farbwähler bleibt aber
   fingerfreundlich, weil er umbrechen darf statt zu schrumpfen. */
@container shrn (max-width: 330px) {
	.shrn__board {
		--shrn-peg: 22px;
		--shrn-chip: 32px;
		--shrn-gap: 4px;
		--shrn-numcol: 16px;
		--shrn-rowgap: 6px;
		--shrn-key: 9px;
		padding: 10px;
	}
	.shrn__row { padding: 5px 6px; }
	.shrn__title { font-size: 22px; }
	.shrn__actions .shrn__btn { flex: 1 1 auto; }
}

/* Browser ohne Container-Queries: das alte, viewport-basierte Verhalten. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.shrn__board { --shrn-peg: 28px; --shrn-gap: 6px; --shrn-numcol: 20px; --shrn-rowgap: 8px; }
		.shrn__row { padding: 6px 8px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.shrn *, .shrn *::before, .shrn *::after {
		transition: none !important;
	}
	.shrn__shield.is-open { transform: none; }
}


/* ===== Gemeinsame Gestaltung der Spiele =====================================
   Dieser Block ist in allen Spiele-Plugins identisch:
   schiffe-versenken, sudoku, vier-gewinnt, superhirn, schnick-schnack,
   mahjong, solitaer. Wird hier etwas geaendert, muss es dort mitgeaendert
   werden. Einzige Ausnahme ist --sp-accent: der ist je Spiel eigen und
   entspricht der Kachelfarbe in der Spiele-Icon-Navigation.

   Bewusst am Dateiende: so gewinnt er gegen die Regeln darueber, ohne dass
   der gewachsene Spielfeld-Code angefasst werden muss.
   ========================================================================== */

.shrn {
	--sp-paper:  #eef1f3;
	--sp-ink:    #14293b;
	--sp-muted:  #5b6f7f;
	--sp-line:   #c2ccd3;
	--sp-win:    #1f7a4d;
	--sp-lose:   #b3382c;
	--sp-radius: 12px;
	--sp-sans:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sp-mono:   ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--sp-accent: #2e7d80;   /* nowo1-Türkis (Kopfzeile, Buttons) */

	container-type: inline-size;

	background: var(--sp-paper);
	color: var(--sp-ink);
	font-family: var(--sp-sans);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.shrn__head {
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sp-line);
}

.shrn__eyebrow {
	font-family: var(--sp-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--sp-accent);
	opacity: 1;
	margin: 0 0 4px;
}

.shrn__title {
	font-family: var(--sp-sans);
	font-size: clamp(21px, 6cqi, 30px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.05;
	text-transform: none;
	margin: 0;
	color: var(--sp-ink);
}

.shrn__status {
	font-family: var(--sp-mono);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sp-muted);
	opacity: 1;
	margin: 12px 0 0;
	min-height: 1.5em;
}

.shrn__status--win  { color: var(--sp-win);  font-weight: 700; opacity: 1; }
.shrn__status--lose { color: var(--sp-lose); font-weight: 700; opacity: 1; }

.shrn__btn {
	font-family: var(--sp-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 10px 16px;
	border-radius: 6px;
	background: var(--sp-accent);
	color: #fff;
	border: 1px solid var(--sp-accent);
	cursor: pointer;
}

.shrn__btn--ghost,
.shrn__btn--chip {
	background: transparent;
	color: var(--sp-ink);
	border-color: var(--sp-line);
	font-weight: 400;
}

.shrn__btn--chip.is-on,
.shrn__btn[aria-pressed="true"] {
	background: var(--sp-accent);
	color: #fff;
	border-color: var(--sp-accent);
	font-weight: 700;
}

.shrn__btn:hover:not([disabled]) { filter: brightness(1.08); background-color: var(--sp-accent); color: #fff; }
.shrn__btn[disabled] { opacity: 0.38; cursor: not-allowed; }
.shrn__btn:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

.shrn__hint {
	font-family: var(--sp-sans);
	font-size: 12px;
	line-height: 1.6;
	color: var(--sp-muted);
	margin: 12px 0 0;
}

.shrn__hint kbd {
	font-family: var(--sp-mono);
	font-size: 11px;
	background: rgba(0, 0, 0, 0.06);
	border: 1px solid var(--sp-line);
	border-radius: 3px;
	padding: 1px 5px;
	color: var(--sp-ink);
}

/* ---------- Online-Mehrspieler ---------- */

.shrn__modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.shrn__mp { display: none; }
.shrn--online .shrn__mp { display: block; margin-bottom: 16px; }

/* Der Codemacher kann gesetzte Geheimfarben durch Anklicken wieder entfernen. */
.shrn--online .shrn__secret.is-editable .shrn__peg { cursor: pointer; }

/* Im Online-Modus ersetzt "Revanche" (Panel) den Neustart; Raten/Zurück
   steuern weiterhin den Online-Zug und bleiben sichtbar. */
.shrn--online .shrn__actions [data-role="restart"] { display: none; }