/* Minigame Master – Design: „Lustige Minispiele“ = satte Pastellflächen, matt (keine Glows/Glanz), moderne Rundungen, kräftige Akzente.
   Ton: tiefes Indigo (--ink) auf Lavendel/Creme, Akzente Violett · Sonnengelb · Koralle · Minze. Tiefe entsteht nur über flache „Kanten“-Schatten.
   Aufbau (4 Dateien): base.css (Tokens, Primitive, Dialoge) · menu.css (Start, Logo) · lobby.css (Liste, Lobby) · game.css (Spiel, HUD, Overlays)
   Regeln: kein horizontales Scrollen (overflow-x hidden, min-width:0 in Grid/Flex), Overlays sind [hidden] = display:none (blockieren nie Klicks),
   Dekoration hat pointer-events:none. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ink: #2B2A55; --ink-2: #5B5A8C; --ink-3: #8E8DB8;
  --bg: #E4DEFF; --bg-2: #F3F0FF; --paper: #FFFFFF; --paper-2: #F8F6FF;
  --line: rgba(43,42,85,.14); --line-2: rgba(43,42,85,.28);
  --lilac: #D8CCFF; --mint: #BDF0DB; --peach: #FFD8C0; --lemon: #FFEFA6; --sky: #C2E5FF; --pink: #FFCBE2;
  --violet: #6C5CE7; --violet-d: #4B3DC0; --coral: #FF6B6B; --coral-d: #D94A4A; --sun: #FFC53D; --sun-d: #DFA01A;
  --teal: #1FB5A5; --teal-d: #0F8F82; --green: #39B87A; --blue: #4F8BFF; --red: #D63C52;
  --r-sm: 12px; --r-md: 18px; --r-lg: 28px;
  --font-display: 'Fredoka', 'Baloo 2', 'Trebuchet MS', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --pad: clamp(12px, 2.4vw, 28px);
  --shadow-card: 0 6px 0 rgba(43,42,85,.10), 0 24px 44px -26px rgba(43,42,85,.45);
}

/* ── Basis ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }                                       /* auch gegen display:flex/grid-Regeln – sonst blockieren „versteckte“ Overlays Klicks */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 600 16px/1.4 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, p { margin: 0; }
input { -webkit-user-select: text; user-select: text; }
.muted { color: var(--ink-2); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 10px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
* { scrollbar-width: thin; scrollbar-color: rgba(43,42,85,.3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(43,42,85,.28); border-radius: 8px; }

/* ── Buttons: flache „Kanten“-Buttons (Farbe + dunklere Unterkante), Druck = Kante verschwindet ───── */
.btn { --bg-c: var(--paper); --edge: rgba(43,42,85,.22); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; max-width: 100%;
  border: 0; border-radius: 16px; background: var(--bg-c); color: var(--fg); box-shadow: 0 5px 0 var(--edge);
  font: 600 17px/1 var(--font-display); letter-spacing: .01em; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .15s, opacity .15s; }
.btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--edge); filter: brightness(1.03); }
.btn:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled { opacity: .45; box-shadow: 0 3px 0 var(--edge); }
.btn-xl { height: 60px; padding: 0 32px; font-size: 21px; border-radius: 20px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 12px; box-shadow: 0 3px 0 var(--edge); }
.btn-sm:not(:disabled):hover { box-shadow: 0 5px 0 var(--edge); }
.btn-primary   { --bg-c: var(--violet); --edge: var(--violet-d); --fg: #fff; }
.btn-cta       { --bg-c: var(--sun);    --edge: var(--sun-d);    --fg: var(--ink); }
.btn-secondary { --bg-c: var(--paper);  --edge: rgba(43,42,85,.25); border: 2.5px solid var(--ink); height: 48px; }
.btn-danger    { --bg-c: var(--red);    --edge: #A32A3D;         --fg: #fff; }
.btn-ghost     { --bg-c: transparent; --edge: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:not(:disabled):hover { background: rgba(43,42,85,.08); color: var(--ink); box-shadow: none; transform: none; }
.btn-ghost:not(:disabled):active { transform: scale(.97); box-shadow: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--ink-2); transition: background .15s, color .15s, transform .12s; }
.icon-btn:hover { background: rgba(43,42,85,.09); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }

/* ── Formular ───────────────────────────────────────────────────────────── */
.input { width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 2.5px solid var(--line-2); background: #fff; color: var(--ink); font: 700 18px var(--font-ui); transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--ink-3); font-weight: 600; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108,92,231,.18); }
.input-lg { height: 58px; font: 600 22px var(--font-display); }
.input-code { width: 128px; flex: none; text-align: center; letter-spacing: .28em; font: 600 22px var(--font-display); text-transform: uppercase; padding: 0 0 0 .28em; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-label { font: 800 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ── Panels, Pills, Segmente ────────────────────────────────────────────── */
.panel, .card { position: relative; min-width: 0; background: var(--paper); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-card); }
.panel-title { display: flex; align-items: center; gap: 9px; font: 600 19px/1.1 var(--font-display); color: var(--ink); margin-bottom: 14px; }
.panel-title .icon { width: 22px; height: 22px; color: var(--violet); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--bg-2); font: 800 13px var(--font-ui); color: var(--ink-2); white-space: nowrap; }
.pill .icon { width: 15px; height: 15px; }
.pill.live { background: var(--lemon); color: #7A5A00; }
.pill.good { background: var(--mint); color: #0B6B4A; }
.pill.pink { background: var(--pink); color: #8B2456; }
.pill.sky  { background: var(--sky);  color: #1B5E92; }
.pill.bad  { background: #FFD9DE; color: #A32A3D; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; max-width: 100%; border-radius: 16px; background: var(--bg-2); }
.seg-btn { min-width: 46px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: 600 16px var(--font-display); transition: background .15s, color .15s, transform .1s; }
.seg-btn:not(:disabled):hover { background: rgba(43,42,85,.08); color: var(--ink); }
.seg-btn:not(:disabled):active { transform: scale(.95); }
.seg-btn.active { background: var(--violet); color: #fff; box-shadow: 0 3px 0 var(--violet-d); }
.seg.readonly .seg-btn { cursor: default; }
.seg.readonly .seg-btn:not(.active) { opacity: .5; }

kbd { display: inline-block; padding: 1px 9px; border-radius: 8px; background: var(--bg-2); border: 2px solid var(--line-2); box-shadow: 0 2px 0 var(--line-2); color: var(--ink); font: 700 .9em var(--font-ui); }

/* ── Verbindungsanzeige, Toasts ─────────────────────────────────────────── */
.conn { position: fixed; z-index: 90; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 99px;
  background: var(--red); color: #fff; font: 700 15px var(--font-ui); box-shadow: 0 4px 0 #A32A3D; max-width: calc(100vw - 24px); }
.conn .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse 1s infinite; }
.conn.ok { background: var(--green); box-shadow: 0 4px 0 #26855a; }
.conn.ok .dot { animation: none; }
@keyframes pulse { 50% { opacity: .3; } }
.toasts { position: fixed; z-index: 95; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast { padding: 12px 22px; border-radius: 16px; background: var(--ink); color: #fff; font: 700 16px var(--font-ui); box-shadow: 0 5px 0 rgba(0,0,0,.25); animation: toastIn .3s var(--ease); max-width: min(92vw, 520px); text-align: center; }
.toast.error { background: var(--red); }
.toast.good { background: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ── Dialoge (native <dialog>: liegen im Top-Layer, sind immer klickbar) ─── */
.dialog { margin: auto; padding: 22px; width: min(92vw, 460px); max-height: min(88dvh, 720px); overflow-x: hidden; overflow-y: auto; border: 0; border-radius: var(--r-lg); color: var(--ink); background: var(--paper); box-shadow: 0 8px 0 rgba(43,42,85,.15), 0 40px 80px -20px rgba(43,42,85,.55); }
.dialog::backdrop { background: rgba(43,42,85,.5); }
.dialog[open] { animation: dlgIn .22s var(--ease); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dialog-wide { width: min(94vw, 780px); }
.dialog h3 { font: 600 24px var(--font-display); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dialog-text { margin-top: 8px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.rules-body { display: flex; flex-direction: column; gap: 14px; font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.rules-body h4 { margin: 0 0 6px; font: 600 18px var(--font-display); color: var(--ink); display: flex; align-items: center; gap: 10px; }
.rules-body .r-ico { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.rules-body .r-ico svg { width: 26px; height: 26px; }
.rules-body ul { margin: 4px 0 0; padding-left: 22px; } .rules-body li { margin: 3px 0; }
.rules-body .r-game { padding: 14px 16px; border-radius: 20px; background: var(--paper-2); }
.rules-body .r-cat { margin: 8px 0 -6px; font: 800 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-d); }
.rules-body .r-facts { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.rules-body .r-facts th { width: 44%; padding: 3px 10px 3px 0; text-align: left; font-weight: 700; color: var(--ink-2); }
.rules-body .r-facts td { padding: 3px 0; font-weight: 700; color: var(--ink); }
.rules-body .r-facts tr + tr { border-top: 1px solid var(--line); }
.opts-body { display: flex; flex-direction: column; gap: 18px; }
.opt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.opt-label { font: 600 17px var(--font-display); }
.opt-desc { font-size: 14px; color: var(--ink-2); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; background: var(--bg); outline-offset: 6px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); border: 4px solid #fff; box-shadow: 0 3px 0 var(--violet-d); cursor: pointer; }
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--violet); border: 4px solid #fff; box-shadow: 0 3px 0 var(--violet-d); cursor: pointer; }

.hide-sm { display: inline; }
@media (max-width: 640px) { .hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }