/* 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; }

/* Der Aufstell-Knopf existiert nur online und wird per JS ein-/ausgeblendet. */
.svsk__placeBtn { display: none; }