/* Schiffe versenken – Seekarten-Optik
   Alle Regeln sind auf .svsk gescoped, damit kein Theme-CSS kollidiert. */

.svsk {
	--svsk-paper:   #dbe4e8;  /* Seekartenpapier, kalt */
	--svsk-paper-2: #cfdae0;  /* Landflächen / Panelgrund */
	--svsk-ink:     #14293b;  /* Kartentusche */
	--svsk-ink-mid: #4d6376;
	--svsk-line:    #9fb2bd;  /* Gitterhaarlinien */
	--svsk-signal:  #bc3b2f;  /* Signalrot: Treffer */
	--svsk-flag:    #d9a521;  /* Flaggengelb: versenkt */
	--svsk-hull:    #1e3d55;  /* Rumpffarbe eigener Schiffe */
	--svsk-mono:    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--svsk-sans:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--svsk-n:       10;
	--svsk-gutter:  22px;   /* Breite der Beschriftungsspalte */
	--svsk-cellmax: 46px;   /* Deckel für die Zellgröße auf breiten Layouts */

	/* Das Widget misst sich selbst: alle Umbrüche unten hängen an der
	   Breite dieses Kastens, nicht an der des Browserfensters. Sonst
	   kollabiert das Layout, sobald das Theme eine schmale Spalte liefert. */
	container-type: inline-size;
	container-name: svsk;

	background: var(--svsk-paper);
	color: var(--svsk-ink);
	font-family: var(--svsk-sans);
	border: 1px solid var(--svsk-ink);
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Der Innenabstand sitzt eine Ebene tiefer, damit er von den
   @container-Regeln unten erreichbar ist. */
.svsk__inner { padding: clamp(16px, 3vw, 32px); }

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

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

.svsk__head {
	border-bottom: 1px solid var(--svsk-ink);
	padding-bottom: 14px;
	margin-bottom: 22px;
}

.svsk__eyebrow {
	font-family: var(--svsk-mono);
	font-size: 11px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--svsk-ink-mid);
	margin: 0 0 6px;
}

.svsk__title {
	font-size: clamp(22px, 3.4vw, 34px);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0;
	color: var(--svsk-ink);
}

.svsk__status {
	font-family: var(--svsk-mono);
	font-size: 13px;
	line-height: 1.5;
	margin: 10px 0 0;
	color: var(--svsk-ink-mid);
	min-height: 1.5em;
}

.svsk__status--win  { color: var(--svsk-hull); font-weight: 700; }
.svsk__status--lose { color: var(--svsk-signal); font-weight: 700; }

/* ---------- Layout ---------- */

/* Ausgangslage ist gestapelt. Breitere Varianten schaltet der Container zu –
   so ist der schmale Fall nie ein Sonderfall, der versehentlich ausbleibt. */
.svsk__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 30px);
	align-items: start;
}

.svsk__panel { min-width: 0; }

.svsk__panelTitle {
	font-family: var(--svsk-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--svsk-ink-mid);
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--svsk-line);
	font-weight: 400;
	overflow-wrap: anywhere;   /* nie in die Nachbarspalte hineinragen */
}

/* ---------- Spielfeld ---------- */

.svsk__grid {
	display: grid;
	/* minmax(0, 1fr): ohne die 0 als Minimum wächst jede Spur auf ihren
	   min-content-Wert und das Gitter läuft aus dem Panel heraus. */
	grid-template-columns: var(--svsk-gutter) repeat(var(--svsk-n), minmax(0, 1fr));
	gap: 1px;
	background: var(--svsk-line);
	border: 1px solid var(--svsk-ink);
	padding: 1px;
	width: 100%;
	max-width: calc(var(--svsk-gutter) + var(--svsk-n) * var(--svsk-cellmax));
}

.svsk__label {
	background: var(--svsk-paper-2);
	font-family: var(--svsk-mono);
	font-size: 10px;
	color: var(--svsk-ink-mid);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	user-select: none;
}

.svsk__label--corner { background: var(--svsk-paper-2); }

.svsk__cell {
	position: relative;
	aspect-ratio: 1;
	background: var(--svsk-paper);
	border: 0;
	padding: 0;
	margin: 0;
	display: block;
	width: 100%;
	min-width: 0;
	cursor: pointer;
	appearance: none;
	transition: background-color 120ms ease;
}

.svsk__grid--own .svsk__cell { cursor: default; }

.svsk__cell:focus-visible {
	outline: 2px solid var(--svsk-ink);
	outline-offset: -2px;
	z-index: 2;
}

.svsk__grid:not(.svsk__grid--own) .svsk__cell:not(.is-shot):hover {
	background: #c3d2da;
}

/* Schiff auf eigenem Feld */
.svsk__cell.is-ship { background: var(--svsk-hull); }

/* Fehlschuss: kleiner Peilpunkt */
.svsk__cell.is-miss::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22%;
	height: 22%;
	border-radius: 50%;
	background: var(--svsk-ink-mid);
	opacity: 0.55;
}

/* Treffer: rotes Kreuz */
.svsk__cell.is-hit::before,
.svsk__cell.is-hit::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 66%;
	height: 2px;
	background: var(--svsk-signal);
}
.svsk__cell.is-hit::before { transform: rotate(45deg); }
.svsk__cell.is-hit::after  { transform: rotate(-45deg); }

.svsk__cell.is-ship.is-hit::before,
.svsk__cell.is-ship.is-hit::after { background: #ffb0a6; }

/* Versenkt: durchgehend markiert */
.svsk__cell.is-sunk { background: var(--svsk-signal); }
.svsk__cell.is-sunk.is-hit::before,
.svsk__cell.is-sunk.is-hit::after { background: var(--svsk-flag); }

.svsk__cell[disabled] { cursor: default; opacity: 1; }

/* Letzter Schuss */
.svsk__cell.is-last { box-shadow: inset 0 0 0 2px var(--svsk-flag); }

/* ---------- Flottenliste ---------- */

.svsk__fleet {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--svsk-mono);
	font-size: 11px;
	color: var(--svsk-ink-mid);
}

.svsk__fleetItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	border-bottom: 1px dotted var(--svsk-line);
}

/* Der Schiffsname darf schrumpfen, sonst schiebt er die Pips aus der Zeile. */
.svsk__fleetItem > span:first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.svsk__fleetItem.is-sunk {
	color: var(--svsk-signal);
	text-decoration: line-through;
}

.svsk__pips { display: flex; gap: 2px; flex: 0 0 auto; }

.svsk__pip {
	width: 7px;
	height: 7px;
	background: var(--svsk-hull);
}

.svsk__fleetItem.is-sunk .svsk__pip { background: var(--svsk-signal); }

/* ---------- Funkspruch (Signaturelement) ---------- */

.svsk__log {
	min-width: 0;
	border-top: 1px solid var(--svsk-line);
	padding-top: 14px;
}

.svsk__logList {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--svsk-mono);
	font-size: 11.5px;
	line-height: 1.75;
	max-height: 180px;
	overflow-y: auto;
	color: var(--svsk-ink-mid);
}

.svsk__logItem {
	display: grid;
	grid-template-columns: minmax(0, 44px) minmax(0, 32px) minmax(0, 1fr);
	gap: 6px;
	border-bottom: 1px solid rgba(159, 178, 189, 0.35);
	padding: 1px 0;
}

.svsk__logItem > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.svsk__logWho { color: var(--svsk-ink); }
.svsk__logItem--enemy .svsk__logWho { color: var(--svsk-ink-mid); }
.svsk__logItem--hit  .svsk__logResult { color: var(--svsk-signal); }
.svsk__logItem--sunk .svsk__logResult { color: var(--svsk-signal); font-weight: 700; }

/* ---------- Aktionen ---------- */

.svsk__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--svsk-ink);
}

.svsk__btn {
	font-family: var(--svsk-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 18px;
	background: var(--svsk-ink);
	color: var(--svsk-paper);
	border: 1px solid var(--svsk-ink);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.svsk__btn:hover { background: var(--svsk-hull); }

.svsk__btn--ghost {
	background: transparent;
	color: var(--svsk-ink);
}
.svsk__btn--ghost:hover { background: var(--svsk-ink); color: var(--svsk-paper); }

.svsk__btn:focus-visible {
	outline: 2px solid var(--svsk-signal);
	outline-offset: 2px;
}

.svsk__btn[disabled] { opacity: 0.4; cursor: not-allowed; }

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

/* Ab hier passen zwei Seekarten nebeneinander. */
@container svsk (min-width: 620px) {
	.svsk__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.svsk__log { grid-column: 1 / -1; }
}

/* Ab hier zusätzlich der Funkspruch als eigene Spalte. */
@container svsk (min-width: 900px) {
	.svsk__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 230px); }
	.svsk__log {
		grid-column: auto;
		border-top: 0;
		border-left: 1px solid var(--svsk-line);
		padding-top: 0;
		padding-left: clamp(12px, 1.6vw, 20px);
	}
	.svsk__logList { max-height: 340px; }
}

/* Schmale Spalte (z. B. ein Drittel-Widget in der Sidebar): jedes Pixel
   Innenabstand fehlt dem Spielfeld. */
@container svsk (max-width: 460px) {
	/* auf .svsk__grid, nicht auf .svsk: der Container selbst wird von seiner
	   eigenen @container-Regel nicht getroffen */
	.svsk__grid { --svsk-gutter: 18px; }
	.svsk__inner { padding: 14px; }
	.svsk__label { font-size: 8px; }
	.svsk__title { font-size: clamp(19px, 7cqi, 26px); letter-spacing: 0.08em; }
	.svsk__actions { margin-top: 18px; padding-top: 14px; }
	.svsk__actions .svsk__btn { flex: 1 1 auto; }
}

/* Browser ohne Container-Queries bekommen das alte, viewport-basierte
   Verhalten. Der gestapelte Grundzustand oben trägt sie notfalls allein. */
@supports not (container-type: inline-size) {
	@media (min-width: 620px) {
		.svsk__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
		.svsk__log { grid-column: 1 / -1; }
	}
	@media (min-width: 1100px) {
		.svsk__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 230px); }
		.svsk__log {
			grid-column: auto;
			border-top: 0;
			border-left: 1px solid var(--svsk-line);
			padding-top: 0;
			padding-left: 20px;
		}
		.svsk__logList { max-height: 340px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.svsk *, .svsk *::before, .svsk *::after {
		transition: none !important;
	}
}


/* ===== 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.
   ========================================================================== */

.svsk {
	--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: #1d3f5e;

	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);
}

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

.svsk__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;
}

.svsk__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);
}

.svsk__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;
}

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

.svsk__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;
}

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

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

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

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

.svsk__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 ---------- */

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

.svsk__mp { display: none; }
.svsk--online .svsk__mp { display: block; margin: 0 0 16px; }

/* Der lokale „Neues Spiel"-Knopf passt im Online-Modus nicht: dort wird
   über die Moduleiste verlassen und über „Revanche" neu gestartet. */
.svsk--online [data-role="restart"] { display: none; }

/* Merke aus der Fehlersuche: Sichtbarkeit NIE über `style.display = ''`
   zurückholen – der leere Wert überlässt die Entscheidung dem Stylesheet.
   Umgeschaltet wird über eine Zustandsklasse wie .is-on unten. */

/* ---------- Führung: Zug und Ergebnis --------------------------------------

   Vorher stand beides nur in einer 12,5-px-Zeile im Kopf: wer am Zug ist und
   ob die Partie vorbei war. Auf dem Brett war davon nichts zu sehen, und wer
   auf das Spielfeld schaute, bekam den Wechsel nicht mit. Jetzt sagt es die
   Statuszeile deutlicher, ein Rahmen zeigt das Brett, an dem gehandelt wird,
   und am Ende steht ein Banner mit dem nächsten Schritt.
   -------------------------------------------------------------------------- */

.svsk__status {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-ink);
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--sp-line);
	border-left: 4px solid var(--sp-line);
	border-radius: 8px;
	padding: 10px 14px;
	margin: 14px 0 0;
}

/* Punkt vor dem Text: ruhig, solange man wartet – deutlich, wenn man dran ist. */
.svsk__status::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sp-line);
}

.svsk--myturn .svsk__status {
	border-color: var(--sp-accent);
	border-left-color: var(--sp-accent);
	background: color-mix(in srgb, var(--sp-accent) 12%, #fff);
	color: var(--sp-accent);
}
.svsk--myturn .svsk__status::before {
	background: var(--sp-accent);
	animation: svsk-puls 1.6s ease-in-out infinite;
}

.svsk--waiting .svsk__status { color: var(--sp-muted); }

.svsk__status--win {
	border-color: var(--sp-win);
	border-left-color: var(--sp-win);
	background: color-mix(in srgb, var(--sp-win) 12%, #fff);
	color: var(--sp-win);
}
.svsk__status--win::before { background: var(--sp-win); }

.svsk__status--lose {
	border-color: var(--sp-lose);
	border-left-color: var(--sp-lose);
	background: color-mix(in srgb, var(--sp-lose) 12%, #fff);
	color: var(--sp-lose);
}
.svsk__status--lose::before { background: var(--sp-lose); }

@keyframes svsk-puls {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
	.svsk--myturn .svsk__status::before { animation: none; }
}

/* Marke in der Brettüberschrift. Leer = kein Kasten, deshalb :empty. */
.svsk__turnTag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	font-family: var(--sp-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
	background: var(--sp-accent);
	color: #fff;
}
.svsk__turnTag:empty { display: none; }
.svsk__panel[data-role="panel-player"] .svsk__turnTag {
	background: transparent;
	color: var(--sp-muted);
	border: 1px solid var(--sp-line);
}

/* Das Brett, an dem gerade gehandelt wird. outline statt border oder
   box-shadow: es braucht keinen Platz im Layout, die Bretter rutschen beim
   Zugwechsel also nicht. Der Abstand bleibt unter der halben Spaltenlücke
   (mindestens 16px), damit sich zwei Rahmen nie berühren. */
.svsk__panel { border-radius: 10px; }
.svsk__panel.is-active {
	outline: 2px solid var(--sp-accent);
	outline-offset: 7px;
}
.svsk__panel[data-role="panel-player"].is-active {
	outline-color: var(--sp-line);
}

/* Führungsleiste: Aufforderung und der passende Knopf an einer Stelle, in
   Blickhöhe über den Brettern. Vorher stand der Hinweis im Kopf und der Knopf
   ganz unten unter zwei Rastern – der Start war dadurch nicht zu finden. */
.svsk__guide { display: none; }
.svsk__guide.is-on {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 18px;
	margin: 14px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--sp-accent);
	border-radius: 10px;
	background: #fff;
}
.svsk__guideBody { flex: 1 1 240px; min-width: 0; }
.svsk__guideTitle {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.svsk__guideText {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sp-muted);
}
.svsk__guideActions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.svsk__guideActions .svsk__btn { display: none; }
.svsk__guideActions .svsk__btn.is-on { display: inline-block; }

.svsk__guide--win  { border-color: var(--sp-win); }
.svsk__guide--win  .svsk__guideTitle { color: var(--sp-win); font-size: 22px; }
.svsk__guide--lose { border-color: var(--sp-lose); }
.svsk__guide--lose .svsk__guideTitle { color: var(--sp-lose); font-size: 22px; }

@container svsk (max-width: 420px) {
	.svsk__guideTitle { font-size: 17px; }
	.svsk__guide--win .svsk__guideTitle,
	.svsk__guide--lose .svsk__guideTitle { font-size: 19px; }
	.svsk__guideActions { flex: 1 1 100%; }
	.svsk__guideActions .svsk__btn.is-on { flex: 1 1 auto; }
}