/* 4 gewinnt – Steckbrett
   Alle Regeln sind auf .vgw gescoped, damit kein Theme-CSS kollidiert. */

.vgw {
	--vgw-paper:  #eef1f3;  /* Grund hinter dem Brett */
	--vgw-frame:  #1d3f5e;  /* Brettrahmen */
	--vgw-frame2: #16334c;  /* Rahmen, untere Kante */
	--vgw-hole:   #12293c;  /* leere Bohrung */
	--vgw-ink:    #14293b;
	--vgw-muted:  #5b6f7f;
	--vgw-line:   #c2ccd3;

	--vgw-you:    #c8453c;  /* Spielerstein */
	--vgw-you-hi: #e2695f;
	--vgw-cpu:    #e3b23c;  /* Computerstein */
	--vgw-cpu-hi: #f2cd6b;

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

	--vgw-cols: 7;
	--vgw-rows: 6;
	--vgw-gap:  clamp(3px, 1.6cqi, 9px);

	/* Das Brett misst sich selbst, nicht das Browserfenster – sonst passt es
	   in einer schmalen Spalte nicht. */
	container-type: inline-size;
	container-name: vgw;

	background: var(--vgw-paper);
	color: var(--vgw-ink);
	font-family: var(--vgw-sans);
	border: 1px solid var(--vgw-line);
	border-radius: 12px;
	max-width: 560px;
	margin: 0 auto;
	box-sizing: border-box;
}

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

/* Der Innenabstand sitzt eine Ebene tiefer, damit ihn die @container-Regeln
   unten erreichen: ein Element trifft seine eigene Container-Regel nicht. */
.vgw__inner { padding: clamp(14px, 4cqi, 26px); }

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

.vgw__head { margin-bottom: 12px; }

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

.vgw__title {
	font-size: clamp(21px, 6cqi, 32px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0;
	color: var(--vgw-ink);
}

/* ---------- Punktestand ---------- */

.vgw__scores {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 12px;
	font-family: var(--vgw-mono);
	font-size: 12px;
	color: var(--vgw-muted);
}

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

.vgw__scoreLabel { white-space: nowrap; }

.vgw__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.vgw__dot--you { background: var(--vgw-you); }
.vgw__dot--cpu { background: var(--vgw-cpu); }

.vgw__scoreVal {
	font-weight: 700;
	color: var(--vgw-ink);
	font-variant-numeric: tabular-nums;
}

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

.vgw__board {
	display: grid;
	/* minmax(0, 1fr): ohne die 0 wachsen die Spuren auf ihren min-content-Wert
	   und das Brett läuft aus einer schmalen Spalte heraus. */
	grid-template-columns: repeat(var(--vgw-cols), minmax(0, 1fr));
	gap: var(--vgw-gap);
	padding: var(--vgw-gap);
	background: linear-gradient(180deg, var(--vgw-frame), var(--vgw-frame2));
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Jede Spalte ist ein Knopf: die ganze Spalte ist Klickfläche und für
   Screenreader genau ein Bedienelement statt Zeilen mal Spalten. */
.vgw__col {
	display: block;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	appearance: none;
	font: inherit;
	color: inherit;
}

.vgw__colInner {
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--vgw-gap);
	overflow: hidden;          /* lässt den Stein sichtbar hereinfallen */
	border-radius: 6px;
}

.vgw__col[disabled] { cursor: default; }

.vgw__col:focus-visible {
	outline: 2px solid var(--vgw-cpu);
	outline-offset: 2px;
	z-index: 2;
}

.vgw__cell {
	position: relative;
	aspect-ratio: 1;
	min-width: 0;
	border-radius: 50%;
	background: var(--vgw-hole);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
}

.vgw__col:hover:not([disabled]) .vgw__cell {
	background: #24486a;
}

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

.vgw__disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	transform: scale(0);       /* leeres Loch */
}

.vgw__disc.is-set {
	transform: none;
	animation: vgw-drop 380ms cubic-bezier(0.36, 0.06, 0.32, 1);
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.34), inset 0 3px 5px rgba(255, 255, 255, 0.38), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.vgw__disc.is-you { background: radial-gradient(circle at 34% 30%, var(--vgw-you-hi), var(--vgw-you) 68%); }
.vgw__disc.is-cpu { background: radial-gradient(circle at 34% 30%, var(--vgw-cpu-hi), var(--vgw-cpu) 68%); }

/* --vgw-from setzt das Skript je nach Fallhöhe der Zeile. */
@keyframes vgw-drop {
	from { transform: translateY(var(--vgw-from, -500%)); }
	to   { transform: translateY(0); }
}

/* Siegreihe */
.vgw__disc.is-win {
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.34), 0 0 0 3px #fff, 0 0 0 5px var(--vgw-ink);
	z-index: 1;
}

/* ---------- Status ---------- */

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

.vgw__status--win  { color: #1f7a4d; font-weight: 700; }
.vgw__status--lose { color: var(--vgw-you); font-weight: 700; }

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

.vgw__actions,
.vgw__levels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.vgw__levelsLabel {
	font-family: var(--vgw-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vgw-muted);
	margin-right: 2px;
}

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

.vgw__btn--ghost {
	background: transparent;
	color: var(--vgw-ink);
	border-color: var(--vgw-line);
	font-weight: 400;
}

.vgw__btn--chip {
	background: transparent;
	color: var(--vgw-muted);
	border-color: var(--vgw-line);
	font-weight: 400;
	padding: 7px 12px;
	letter-spacing: 0.1em;
}

.vgw__btn--chip.is-on {
	background: var(--vgw-frame);
	color: #f2f6f8;
	border-color: var(--vgw-frame2);
	font-weight: 700;
}

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

/* ---------- Hinweis ---------- */

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

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

/* ---------- Responsiv ----------
   Gemessen wird die Breite von .vgw, nicht die des Fensters. Die Variablen
   sitzen auf .vgw__inner, weil .vgw seine eigene Regel nicht trifft. */

@container vgw (max-width: 420px) {
	.vgw__inner { padding: 13px; }
	.vgw__scores { font-size: 11px; gap: 6px 14px; }
	.vgw__btn { padding: 9px 12px; }
	.vgw__actions .vgw__btn { flex: 1 1 auto; }
	.vgw__hint { font-size: 11.5px; }
}

@container vgw (max-width: 300px) {
	.vgw__inner { padding: 10px; }
	.vgw__btn { padding: 8px 10px; font-size: 10px; letter-spacing: 0.08em; }
	.vgw__levelsLabel { width: 100%; margin-bottom: 2px; }
	.vgw__levels .vgw__btn { flex: 1 1 auto; }
	.vgw__status { font-size: 11.5px; }
}

/* Browser ohne Container-Queries: gestaffelt nach Fensterbreite. Das Brett
   selbst ist ohnehin fluid, hier geht es nur um Polster und Knöpfe. */
@supports not (container-type: inline-size) {
	.vgw { --vgw-gap: 6px; }
	.vgw__inner { padding: 20px; }
	.vgw__title { font-size: 26px; }

	@media (max-width: 420px) {
		.vgw__inner { padding: 13px; }
		.vgw__actions .vgw__btn { flex: 1 1 auto; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.vgw__disc.is-set { animation: 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.
   ========================================================================== */

.vgw {
	--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: #c8453c;

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Mehrspieler-Umschaltung ---------- */
.vgw__modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.vgw__mp { display: none; }
.vgw--online .vgw__mp { display: block; }
.vgw--online .vgw__scores,
.vgw--online .vgw__actions,
.vgw--online .vgw__levels,
.vgw--online .vgw__hint { display: none; }