/* The Conqueror – dunkel, kontrastreich, grosse Tippflaechen.
   --g ist die Gruppenfarbe (per JS gesetzt), Standard: Akzent-Violett. */

:root {
	--bg: #0a0d14;
	--surface: #141a25;
	--surface-2: #1d2533;
	--surface-3: #283143;
	--line: #2c3647;
	--text: #f3f6fb;
	--muted: #9aa6ba;
	--faint: #647089;
	--g: #8b7cf6;
	--g-ink: #0a0d14;
	--ok: #22c55e;
	--warn: #f59e0b;
	--bad: #ef4444;
	--radius: 16px;
	--radius-s: 10px;
	--tap: 58px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.45 var(--font);
	min-height: 100dvh;
	-webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; font-weight: 850; }
h2 { font-size: 1.35rem; font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 750; }
p { margin: 0 0 .8em; }
a { color: var(--g); }
small, .muted { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.hidden { display: none !important; }

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

.app {
	max-width: 560px;
	margin: 0 auto;
	padding: calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}

.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row > .grow { flex: 1; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
}
.card.accent { border-color: var(--g); box-shadow: 0 0 0 1px var(--g) inset; }
.card.flat { background: var(--surface-2); border: 0; }

/* Kopfzeile mit Gruppenfarbe */
.topbar {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	border-radius: var(--radius);
	background: linear-gradient(135deg, color-mix(in srgb, var(--g) 30%, var(--surface)), var(--surface));
	border: 1px solid color-mix(in srgb, var(--g) 50%, var(--line));
}
.topbar .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--g); flex: none; }
.topbar .who { font-weight: 800; }
.topbar .sub { color: var(--muted); font-size: .9rem; }
.topbar .clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; }

/* Buttons --------------------------------------------------------------- */

button, .btn {
	font: inherit;
	font-weight: 750;
	color: var(--text);
	background: var(--surface-3);
	border: 0;
	border-radius: var(--radius);
	min-height: var(--tap);
	padding: 0 20px;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	cursor: pointer;
	text-decoration: none;
	touch-action: manipulation;
	transition: transform .08s ease, filter .15s ease, background .15s ease;
	user-select: none;
}
button:active, .btn:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
button.primary, .btn.primary { background: var(--g); color: var(--g-ink); }
button.ok { background: var(--ok); color: #03140a; }
button.danger { background: var(--bad); color: #fff; }
button.ghost { background: transparent; border: 1.5px solid var(--line); }
button.block, .btn.block { width: 100%; }
button.huge { min-height: 96px; font-size: 1.35rem; border-radius: 22px; }
button.small { min-height: 40px; padding: 0 14px; font-size: .92rem; border-radius: var(--radius-s); }
button.tiny { min-height: 32px; padding: 0 10px; font-size: .82rem; border-radius: 8px; }

/* Formulare ------------------------------------------------------------- */

label { display: block; font-weight: 700; margin-bottom: 6px; }
input, select, textarea {
	font: inherit;
	color: var(--text);
	background: var(--surface-2);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	min-height: var(--tap);
	padding: 0 16px;
	width: 100%;
}
textarea { padding: 12px 16px; min-height: 120px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--g); }
input.big { font-size: 1.3rem; font-weight: 700; text-align: center; letter-spacing: .02em; }

/* Listen und Chips ------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	background: var(--surface-2);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: .95rem;
	font-weight: 650;
	display: inline-flex; align-items: center; gap: 6px;
}
.chip.on { background: color-mix(in srgb, var(--ok) 25%, var(--surface-2)); color: #bff5d2; }
.chip.off { background: color-mix(in srgb, var(--bad) 20%, var(--surface-2)); color: #ffd0d0; }
.chip.g { background: color-mix(in srgb, var(--g) 28%, var(--surface-2)); }
.chip .x { opacity: .7; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }

.big-number { font-size: 3.2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown { font-size: 3.4rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Rollenwahl ------------------------------------------------------------ */

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role {
	flex-direction: column;
	min-height: 150px;
	border-radius: 22px;
	background: var(--surface-2);
	border: 2px solid transparent;
	font-size: 1.2rem;
}
.role .ico { font-size: 2.6rem; line-height: 1; }
.role .count { font-size: .9rem; color: var(--muted); font-weight: 600; }
.role.active { border-color: var(--g); background: color-mix(in srgb, var(--g) 22%, var(--surface-2)); }

/* Laeufer-Status: dauerhaft sichtbar */
.status {
	border-radius: 20px;
	padding: 18px;
	background: var(--surface-2);
	border: 2px solid var(--line);
}
.status.open { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.status.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.status.alarm { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, var(--surface)); }
.status .headline { font-size: 1.5rem; font-weight: 850; line-height: 1.15; }
.status .progress { font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.hint-box {
	border-radius: var(--radius);
	padding: 14px 16px;
	background: color-mix(in srgb, #38bdf8 14%, var(--surface));
	border: 1.5px solid color-mix(in srgb, #38bdf8 50%, var(--line));
}

/* Segment-Kacheln ------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tile {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1;
	min-height: 0;
	padding: 0;
	border-radius: 14px;
	flex-direction: column;
	gap: 2px;
	font-size: 1.35rem;
	font-weight: 850;
	background: var(--surface-2);
	color: var(--faint);
	position: relative;
}
.tile small { font-size: .62rem; font-weight: 700; color: inherit; opacity: .85; }
.tile.unlocked { background: var(--g); color: var(--g-ink); }
.tile.progress { background: color-mix(in srgb, var(--g) 55%, var(--surface-2)); color: var(--text); box-shadow: 0 0 0 2px var(--g) inset; }
.tile.conquered { background: var(--surface-3); color: var(--ok); }
.tile.conquered::after { content: "✓"; position: absolute; top: 3px; right: 7px; font-size: .8rem; }
.tile.open { box-shadow: 0 0 0 3px var(--warn) inset; color: var(--warn); }
.tile.have { background: color-mix(in srgb, var(--ok) 22%, var(--surface-2)); color: var(--ok); }

/* Fragen ---------------------------------------------------------------- */

.question { padding: 18px; }
.question .qtext { font-size: 1.08rem; }
.question .qtext img, .question .qtext video { max-width: 100%; height: auto; border-radius: 10px; }
.question .qtext audio { width: 100%; }
.question.inactive { opacity: .45; }
.options { display: grid; gap: 8px; margin-top: 12px; }
.option {
	justify-content: flex-start;
	text-align: left;
	min-height: 54px;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--surface-2);
	border: 2px solid transparent;
	font-weight: 650;
	line-height: 1.25;
}
.option .mark {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid var(--faint);
	display: inline-flex; align-items: center; justify-content: center;
}
.option.sel { border-color: var(--g); background: color-mix(in srgb, var(--g) 20%, var(--surface-2)); }
.option.sel .mark { border-color: var(--g); background: var(--g); }
.option.sel .mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--g-ink); }
.by { font-size: .82rem; color: var(--muted); margin-top: 8px; min-height: 1.2em; }
.by.fresh { color: var(--g); }

.segcat { font-size: 1.35rem; font-weight: 900; color: var(--g); margin-top: 2px; }

/* Wordle ---------------------------------------------------------------- */
:root { --w-g: #22a34a; --w-y: #c99a16; --w-x: #3a4253; }
.wcard { padding: 18px 12px; }
.wcard.inactive { opacity: .45; }
.whint { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.whint small { display: block; font-size: .78rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--muted); }
.wgrid { display: grid; gap: 6px; margin: 14px auto 10px; max-width: calc(var(--len, 6) * 56px); }
.wrow { display: grid; grid-template-columns: repeat(var(--len), minmax(0, 1fr)); gap: 6px; }
.wcell {
	aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--line); border-radius: 8px;
	font-size: clamp(1rem, 6vw, 1.6rem); font-weight: 900;
}
.wcell.typed { border-color: var(--muted); }
.wcell.g, .wcell.y, .wcell.x { border-color: transparent; color: #fff; }
.wcell.g { background: var(--w-g); }
.wcell.y { background: var(--w-y); }
.wcell.x { background: var(--w-x); }
.wstate { text-align: center; font-size: .86rem; display: grid; gap: 2px; }
.wkb { display: grid; gap: 6px; margin-top: 12px; }
.wkrow { display: flex; gap: 4px; justify-content: center; }
.wkey {
	flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0;
	border-radius: 8px; background: var(--surface-3); color: var(--text);
	font-size: 1.05rem; font-weight: 800;
}
.wkey.wide { flex: 1.8 1 0; font-size: .85rem; }
.wkey.enter { box-shadow: 0 0 0 2px #3b82f6 inset; color: #93c5fd; }
.wkey.enter:not(:disabled) { background: #1d4ed8; color: #fff; box-shadow: 0 0 0 2px #60a5fa inset; }
.wkey.g { background: var(--w-g); color: #fff; }
.wkey.y { background: var(--w-y); color: #fff; }
.wkey.x { background: var(--bg); color: var(--faint); }

/* Karte ----------------------------------------------------------------- */

.map { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: #cfe6f5; }
.map img { display: block; width: 100%; height: auto; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map polygon { stroke-width: .0025; stroke-linejoin: round; }
.map text { font-weight: 900; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: .004; fill: #fff; text-anchor: middle; dominant-baseline: central; }

/* Overlays -------------------------------------------------------------- */

.overlay {
	position: fixed; inset: 0; z-index: 50;
	background: rgba(4, 6, 10, .92);
	display: flex; flex-direction: column;
	padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.scanner-video { flex: 1; min-height: 0; border-radius: 20px; overflow: hidden; background: #000; position: relative; }
.scanner-video video { width: 100%; height: 100%; object-fit: cover; }

.result-pop {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	padding: 24px; text-align: center; gap: 18px;
	background: rgba(4, 6, 10, .95);
}
.result-pop .icon { font-size: 5.5rem; line-height: 1; }
.result-pop.ok .icon { color: var(--ok); }
.result-pop h2 { font-size: 1.8rem; }

dialog {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	border-radius: 20px;
	padding: 22px;
	width: min(92vw, 440px);
}
dialog::backdrop { background: rgba(0, 0, 0, .7); }

.toasts { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font-weight: 650; max-width: 520px; box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: pop .2s ease; }
.toast.error { background: #4a1618; border-color: var(--bad); }
.toast.ok { background: #0f3a22; border-color: var(--ok); }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }

.offline {
	position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	background: var(--bad); color: #fff; text-align: center; font-weight: 800;
	padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
}

.tabs { display: flex; gap: 6px; background: var(--surface); padding: 5px; border-radius: 14px; overflow-x: auto; }
.tabs button { flex: 1; min-height: 44px; border-radius: 10px; background: transparent; color: var(--muted); white-space: nowrap; padding: 0 12px; font-size: .95rem; }
.tabs button.on { background: var(--surface-3); color: var(--text); }
.tabs .badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: .75rem; padding: 1px 7px; }

.privacy { font-size: .82rem; color: var(--faint); }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* Spielleitung ---------------------------------------------------------- */

.app.wide { max-width: 760px; }
.matrix { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .9rem; text-align: center; }
.matrix th { font-weight: 800; padding: 4px; }
.matrix.wide td { padding: 8px 6px; background: var(--surface-2); border-radius: 8px; }
.matrix .cell { background: var(--surface-2); border-radius: 8px; padding: 6px 2px; cursor: pointer; line-height: 1.15; min-width: 64px; }
.matrix .cell small { color: var(--muted); font-size: .72rem; }
.matrix .cell.unlocked { background: color-mix(in srgb, #38bdf8 18%, var(--surface-2)); }
.matrix .cell.progress { background: color-mix(in srgb, var(--warn) 18%, var(--surface-2)); }
.matrix .cell.conquered { background: color-mix(in srgb, var(--ok) 20%, var(--surface-2)); }
details summary { cursor: pointer; }

.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }