/* MSZK 40 gálakvíz: játékos és kivetítő nézet. Betűtípus: Inter (SIL OFL), saját kiszolgálóról. */
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/inter-Medium.woff) format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/inter-Bold.woff) format('woff'); }
@font-face { font-family: 'Inter Display'; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/interdisplay-Bold.woff) format('woff'); }
/*
  Vizuális témák. Négy önálló arculat, nem átszínezés: mindegyik más hátteret, formavilágot,
  tipográfiát és díszítést kap. A témát az admin állítja, a body[data-theme] attribútum hordozza.
  A :root csak tartalék alapérték; a body mindig kap attribútumot (az oldal eleve "gala"-val indul).
    gala  = Gálaest, Art Deco (világos krém, arany legyező, serif) - a meghívó arculata
    exec  = Vezetői, tárgyalós (mély navy, adatrács, bal oldali hangsúlysávok)
    retro = Retro időutazás (synthwave horizont, neon izzás, scanline)
    mid   = Éjfél (sötét éjkék, arany és türkiz)
*/
:root {
  --bg: #060A18; --bg2: #0B1230; --ink: #060A18;
  --txt: #EAF0FF; --mut: #9FABD0; --line: rgba(255,255,255,.14); --line2: rgba(255,255,255,.05);
  --glass: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.035);
  --cy: #3DE1D2; --cyd: #1B8E86; --gold: #E8C26A; --gold2: #B8872E;
  --ok: #2FD3A0; --bad: #FF6B7A; --slate: #7F8BB0;
  --a: #6C9BFF; --ab: rgba(108,155,255,.17);
  --b: #35D0BA; --bb: rgba(53,208,186,.17);
  --c: #F1B94B; --cb: rgba(241,185,75,.17);
  --d: #F07A98; --db: rgba(240,122,152,.17);
  /* felületek és tinták (ezeket cserélik a témák, hogy a világos arculat is jó legyen) */
  --surf: rgba(22,30,68,.85); --surf2: rgba(11,17,44,.85);
  --pop: #0E1638; --fab: rgba(14,22,56,.88); --fe-bg: rgba(10,16,42,.88);
  --track: rgba(255,255,255,.12); --inp: rgba(255,255,255,.07); --ph: #8390B8;
  --tile-ink: #fff; --btn-ink: #1B1405; --btn-a: #F4D88B; --btn-b: #D3A445;
  --errt: #FFB3BB; --veil: rgba(3,6,18,.62); --shade: rgba(0,0,0,.45); --conf3: #fff;
  --okb: rgba(47,211,160,.35); --okl: rgba(47,211,160,.12); --dim: .4;
  /* forma és tipográfia */
  --rad: 16px; --rad2: 20px; --radp: 2vmin; --bw: 1.5px; --caps: .3em; --glow: 0 0 0 rgba(0,0,0,0);
  --f: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --fd: 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}

/* ---------- 1. GÁLAEST: Art Deco, a meghívó arculata (világos) ---------- */
body[data-theme="gala"] {
  --bg: #EFE9DA; --bg2: #FAF6ED; --ink: #2A302B;
  --txt: #2A302B; --mut: #7B7466; --line: rgba(42,48,43,.22); --line2: rgba(42,48,43,.055);
  --glass: rgba(255,255,255,.66); --glass2: rgba(255,255,255,.42);
  --cy: #3D4A40; --cyd: #2A332C; --gold: #A8864A; --gold2: #7C6029;
  --ok: #2E6F52; --bad: #A4433E; --slate: #8C8575;
  --a: #3C5E7A; --ab: rgba(60,94,122,.12);
  --b: #4A6B57; --bb: rgba(74,107,87,.12);
  --c: #A8864A; --cb: rgba(168,134,74,.14);
  --d: #8A5A5F; --db: rgba(138,90,95,.12);
  --surf: #FFFDF6; --surf2: #F6F0E1;
  --pop: #FBF8F1; --fab: rgba(255,253,247,.94); --fe-bg: rgba(255,253,247,.92);
  --track: rgba(42,48,43,.12); --inp: rgba(255,255,255,.75); --ph: #A39B89;
  --tile-ink: #2A302B; --btn-ink: #FBF8F1; --btn-a: #3D4A40; --btn-b: #2A332C;
  --errt: #A4433E; --veil: rgba(42,48,43,.42); --shade: rgba(42,48,43,.16); --conf3: #D8C79B;
  --okb: rgba(46,111,82,.26); --okl: rgba(46,111,82,.09); --dim: .62;
  --rad: 14px; --rad2: 18px; --radp: 1.5vmin; --bw: 1px; --caps: .34em;
  --fd: 'Didot', 'Bodoni MT', Georgia, 'Playfair Display', 'Times New Roman', serif;
  color-scheme: light;
}
/* krém alap, finom aranykeret és sugaras legyező a sarkokban */
body[data-theme="gala"]::before {
  background:
    radial-gradient(60% 46% at 100% 0%, rgba(168,134,74,.10), transparent 72%),
    radial-gradient(52% 40% at 0% 100%, rgba(168,134,74,.08), transparent 72%),
    linear-gradient(180deg, var(--bg2), var(--bg) 68%);
}
body[data-theme="gala"]::after {
  content: ''; position: fixed; inset: 7px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A8864A' stroke-width='1' stroke-opacity='.32'%3E%3Cpath d='M2 2 H78 A46 46 0 0 1 2 78 Z'/%3E%3Cpath d='M2 2 H62 A36 36 0 0 1 2 62 Z'/%3E%3Cpath d='M2 2 L2 78 M2 2 L78 2'/%3E%3Cpath d='M2 2 L66 48 M2 2 L48 66 M2 2 L74 26 M2 2 L26 74 M2 2 L58 58'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 10vmin 10vmin no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A8864A' stroke-width='1' stroke-opacity='.32' transform='rotate(180 60 60)'%3E%3Cpath d='M2 2 H78 A46 46 0 0 1 2 78 Z'/%3E%3Cpath d='M2 2 H62 A36 36 0 0 1 2 62 Z'/%3E%3Cpath d='M2 2 L2 78 M2 2 L78 2'/%3E%3Cpath d='M2 2 L66 48 M2 2 L48 66 M2 2 L74 26 M2 2 L26 74 M2 2 L58 58'/%3E%3C/g%3E%3C/svg%3E") 100% 100% / 10vmin 10vmin no-repeat;
}
/* a kivetítőn ugyanaz a vékony aranykeret, mint a nyomtatott meghívón */
body.screen[data-theme="gala"]::after {
  inset: 1.3vmin; border: 1px solid rgba(168,134,74,.4);
  background-position: -40vmin -40vmin, 100% 100%; background-size: 13vmin 13vmin, 13vmin 13vmin;
}
/* a gálaest arculatában a kérdés és a válaszok is klasszikus serif betűvel futnak */
body[data-theme="gala"] .sc-q,
body[data-theme="gala"] .qcard,
body[data-theme="gala"] .sc-tile .t,
body[data-theme="gala"] .sc-ord .r span,
body[data-theme="gala"] .tile .tx,
body[data-theme="gala"] .res h2 { font-family: var(--fd); }

/* ---------- 2. VEZETŐI: tárgyalós, adatvezérelt (sötét navy) ---------- */
body[data-theme="exec"] {
  --bg: #091626; --bg2: #11283F; --ink: #050D17;
  --txt: #E8F1FA; --mut: #8BA5C0; --line: rgba(141,180,220,.2); --line2: rgba(141,180,220,.075);
  --glass: rgba(141,180,220,.09); --glass2: rgba(141,180,220,.05);
  --cy: #5B9BD5; --cyd: #336694; --gold: #E8B45C; --gold2: #A87B2A;
  --ok: #2FBF93; --bad: #F2706E; --slate: #7D93AC;
  --a: #5B9BD5; --ab: rgba(91,155,213,.17);
  --b: #33C2A4; --bb: rgba(51,194,164,.16);
  --c: #E8B45C; --cb: rgba(232,180,92,.17);
  --d: #9B8CF0; --db: rgba(155,140,240,.16);
  --surf: rgba(17,40,63,.97); --surf2: rgba(10,24,40,.97);
  --pop: #0E2338; --fab: rgba(14,35,56,.92); --fe-bg: rgba(10,26,43,.9);
  --track: rgba(141,180,220,.16); --inp: rgba(141,180,220,.1); --ph: #7890A8;
  --tile-ink: #EAF2FB; --btn-ink: #06121F; --btn-a: #6FB6FF; --btn-b: #2E7FD0;
  --errt: #FFB3B2; --veil: rgba(4,12,22,.66); --shade: rgba(0,0,0,.5); --conf3: #E8F1FA;
  --okb: rgba(47,191,147,.32); --okl: rgba(47,191,147,.12); --dim: .45;
  --rad: 8px; --rad2: 10px; --radp: 1vmin; --bw: 1px; --caps: .22em;
}
/* finom milliméterpapír + oszlopdiagram-sziluett alul: "adat" hangulat */
body[data-theme="exec"]::before {
  background:
    radial-gradient(58% 40% at 100% 0%, rgba(79,163,247,.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%235B9BD5' fill-opacity='.1'%3E%3Crect x='6' y='78' width='26' height='42'/%3E%3Crect x='44' y='62' width='26' height='58'/%3E%3Crect x='82' y='86' width='26' height='34'/%3E%3Crect x='120' y='48' width='26' height='72'/%3E%3Crect x='158' y='66' width='26' height='54'/%3E%3Crect x='196' y='32' width='26' height='88'/%3E%3Crect x='234' y='54' width='26' height='66'/%3E%3Crect x='272' y='22' width='26' height='98'/%3E%3Crect x='310' y='44' width='26' height='76'/%3E%3Crect x='348' y='10' width='26' height='110'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F0B24A' stroke-opacity='.32' stroke-width='1.6' vector-effect='non-scaling-stroke'%3E%3Cpath d='M19 72 L57 56 L95 80 L133 42 L171 60 L209 26 L247 48 L285 16 L323 38 L361 4'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 100% 20% no-repeat,
    linear-gradient(var(--line2) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line2) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(180deg, var(--bg2), var(--bg) 62%);
}

/* ---------- 3. HONLAP: az mszk.bme.hu arculata (navy + cián, üveghatás) ---------- */
body[data-theme="honlap"] {
  --bg: #001D3A; --bg2: #0A4F8F; --ink: #000F1F;
  --txt: #FFFFFF; --mut: #A9CEDE; --line: rgba(255,255,255,.18); --line2: rgba(255,255,255,.055);
  --glass: rgba(255,255,255,.1); --glass2: rgba(255,255,255,.05);
  --cy: #19B4D2; --cyd: #0E7D93; --gold: #7ADBEB; --gold2: #19B4D2;
  --ok: #2FD3A0; --bad: #FF7E8E; --slate: #88A6BC;
  --a: #19B4D2; --ab: rgba(25,180,210,.2);
  --b: #4C86E8; --bb: rgba(76,134,232,.2);
  --c: #2FD3A0; --cb: rgba(47,211,160,.2);
  --d: #F0B45A; --db: rgba(240,180,90,.2);
  --surf: rgba(255,255,255,.11); --surf2: rgba(255,255,255,.05);
  --pop: #002A52; --fab: rgba(0,42,82,.92); --fe-bg: rgba(0,42,82,.9);
  --track: rgba(255,255,255,.16); --inp: rgba(255,255,255,.12); --ph: #8FB6CA;
  --tile-ink: #FFFFFF; --btn-ink: #FFFFFF; --btn-a: #19B4D2; --btn-b: #0A5FB0;
  --errt: #FFB3BB; --veil: rgba(0,15,31,.68); --shade: rgba(0,51,102,.5); --conf3: #FFFFFF;
  --okb: rgba(47,211,160,.34); --okl: rgba(47,211,160,.13); --dim: .42;
  --rad: 20px; --rad2: 32px; --radp: 2.2vmin; --bw: 1px; --caps: .12em;
  --f: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fd: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* a honlap hero-ja: mély navy színátmenet, lebegő cián foltok és finom rács */
body[data-theme="honlap"]::before {
  background:
    radial-gradient(44vmax 44vmax at 6% 0%, rgba(25,180,210,.4), transparent 66%),
    radial-gradient(40vmax 40vmax at 96% 24%, rgba(10,95,176,.46), transparent 66%),
    radial-gradient(34vmax 34vmax at 36% 108%, rgba(25,180,210,.3), transparent 68%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(120% 80% at 80% 0%, #0A4F8F 0%, #001D3A 55%, #000F1F 100%);
}

/* ---------- 4. ÉJFÉL: sötét éjkék, arany és türkiz (a korábbi arculat) ---------- */
body[data-theme="mid"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--txt);
  font-family: var(--f); font-weight: 500; font-size: 18px; line-height: 1.45; background: var(--bg);
  font-feature-settings: 'tnum' 1, 'case' 0;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 100% 0%, rgba(61,225,210,.16), transparent 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(232,194,106,.12), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233DE1D2' stop-opacity='.20'/%3E%3Cstop offset='1' stop-color='%233DE1D2' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 170 L40 150 L80 158 L130 120 L180 132 L230 86 L280 98 L330 52 L400 24 L400 200 L0 200 Z' fill='url(%23g)'/%3E%3Cpath d='M0 170 L40 150 L80 158 L130 120 L180 132 L230 86 L280 98 L330 52 L400 24' fill='none' stroke='%233DE1D2' stroke-opacity='.32' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 38% no-repeat,
    linear-gradient(var(--line2) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--line2) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(180deg, var(--bg2), var(--bg) 70%);
  opacity: 1;
}
[hidden] { display: none !important; }
.sr { position: absolute; left: -9999px; }
button { font: inherit; cursor: pointer; color: inherit; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--cy); outline-offset: 3px; }

/* ---------- közös elemek ---------- */
.logo { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.logo .tag { font-weight: 700; letter-spacing: .32em; text-transform: uppercase; font-size: 14px; color: var(--cy); padding-left: .32em; }
.logo .n40 {
  position: relative; font-family: var(--fd); font-weight: 700; font-size: clamp(120px, 40vw, 176px); line-height: .95; letter-spacing: -.045em; margin: 2px 0 0;
  background: linear-gradient(180deg, #F8E6B0 8%, var(--gold) 50%, var(--gold2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(232,194,106,.28));
}
.logo .n40::after { content: ''; position: absolute; left: -14%; right: -14%; top: 34%; bottom: 6%; border: 1.5px solid rgba(61,225,210,.4); border-radius: 50%; transform: rotate(-9deg); pointer-events: none; }
.logo .kv { font-weight: 700; font-size: 17px; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; margin-top: 6px; color: var(--txt); }
.logo.sm { flex-direction: row; gap: 12px; align-items: baseline; }
.logo.sm .tag { font-size: 12px; }
.logo.sm .n40 { font-size: 44px; margin: 0; filter: none; }
.logo.sm .n40::after { display: none; }
.logo.sm .kv { font-size: 12px; letter-spacing: .36em; margin: 0; color: var(--mut); }

.card { position: relative; background: linear-gradient(180deg, var(--surf), var(--surf2)); color: var(--txt); border: var(--bw) solid var(--line); border-radius: var(--rad2); }
.card::before { content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; background: linear-gradient(90deg, var(--cy), var(--gold)); border-radius: 2px; opacity: .85; }
.btn, button.big {
  width: 100%; min-height: 60px; border: 0; border-radius: var(--rad); padding: 12px 18px; font-size: 19px; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: var(--btn-ink); box-shadow: 0 8px 26px var(--shade), inset 0 1px 0 rgba(255,255,255,.25); touch-action: manipulation;
}
.btn:active:not(:disabled), button.big:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 12px var(--shade); }
.btn:disabled, button.big:disabled { opacity: .45; }
input.big {
  width: 100%; min-height: 64px; border-radius: var(--rad); border: var(--bw) solid var(--line); background: var(--inp); color: var(--txt);
  font: 700 22px/1.2 var(--f); text-align: center; padding: 10px 14px; caret-color: var(--cy);
}
input.big::placeholder { color: var(--ph); font-weight: 500; }
input.big:focus { outline: none; border-color: var(--cy); box-shadow: 0 0 0 4px var(--glass); }
input.big:disabled { opacity: .55; }
.msg { min-height: 1.5em; margin: 0; text-align: center; font-size: 17px; color: var(--mut); }
.msg.err { color: var(--errt); font-weight: 700; }
.lead { font-size: 19px; text-align: center; margin: 0; color: var(--txt); }
.dots::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.pill { display: inline-block; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 16px; white-space: nowrap; letter-spacing: .02em; }
.pill:empty { visibility: hidden; }
.toast { position: fixed; left: 50%; bottom: max(78px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--pop); color: var(--txt); border: var(--bw) solid var(--line); padding: 10px 18px; border-radius: var(--rad); font-size: 16px; font-weight: 700; z-index: 60; width: max-content; max-width: 92vw; text-align: center; box-shadow: 0 10px 30px var(--shade); }
.small { font-size: 16px; text-align: center; margin: 0; color: var(--mut); }

/* ---------- játékos (telefon) ---------- */
body.player main {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
}
.scr { display: none; flex: 1; flex-direction: column; gap: 16px; }
.scr.on { display: flex; animation: pop .3s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.center { margin: auto 0; display: flex; flex-direction: column; gap: 22px; }
#f-join { display: flex; flex-direction: column; gap: 14px; }
#f-join label.cap { text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--mut); }
.nametag { align-self: center; text-align: center; padding: 14px 30px 16px; max-width: 100%; border: var(--bw) solid var(--line); border-radius: var(--rad); background: linear-gradient(180deg, var(--glass), var(--glass2)); position: relative; }
.nametag::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: linear-gradient(90deg, var(--cy), var(--gold)); border-radius: 2px; }
.nametag small { display: block; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--cy); }
.nametag strong { display: block; font-family: var(--fd); font-size: 32px; line-height: 1.15; word-break: break-word; margin-top: 2px; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--cy); margin: 0 auto; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,225,210,.55); } 100% { box-shadow: 0 0 0 26px rgba(61,225,210,0); } }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* A kérdés fölött a visszaszámláló pontosan középen álljon, függetlenül attól, milyen hosszú
   a két szélső pirula szövege (a sima space-between emiatt tolta el korábban). */
#s-q .topbar { position: relative; min-height: 72px; }
#s-q .topbar .ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#s-q .topbar .pill { max-width: calc(50% - 42px); overflow: hidden; text-overflow: ellipsis; }
.ring { --p: 100%; width: 72px; height: 72px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--cy) var(--p), var(--track) 0); }
.ring b { width: 62px; height: 62px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-family: var(--fd); font-size: 29px; }
.ring.low { background: conic-gradient(var(--bad) var(--p), var(--track) 0); }
.ring.low b { color: var(--errt); animation: beat .5s ease-in-out infinite alternate; }
@keyframes beat { to { transform: scale(1.1); } }
.qcard { padding: 22px 16px 20px; text-align: center; font-weight: 700; font-size: 24px; line-height: 1.28; word-break: break-word; }
.qcard.md { font-size: 21px; } .qcard.sm { font-size: 18px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; grid-auto-rows: minmax(104px, 1fr); }
.tiles.two { grid-template-columns: 1fr; }
.tiles.list { display: flex; flex-direction: column; gap: 10px; flex: 0 1 auto; }
.tiles.list .tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 62px; padding: 10px 48px 10px 12px; text-align: left; font-size: 18px; }
.tiles.list .tile.md { font-size: 16px; } .tiles.list .tile.sm { font-size: 15px; }
.tiles.list .tile::before { left: 0; right: auto; top: 0; bottom: 0; width: 4px; height: auto; border-radius: 0 3px 3px 0; }
.tiles.list .tile .tx { flex: 1; }
.tiles.list .tile .ck { top: 50%; margin-top: -12px; right: 14px; }
.tile {
  --h: var(--a); --hb: var(--ab);
  position: relative; border: var(--bw) solid var(--line); border-radius: var(--rad); color: var(--tile-ink); overflow: hidden;
  background: linear-gradient(180deg, var(--surf), var(--surf2));
  padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-weight: 700; font-size: 21px; line-height: 1.2; word-break: break-word; touch-action: manipulation; transition: opacity .15s, background .15s, border-color .15s;
}
.tile::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; background: var(--h); border-radius: 0 0 3px 3px; }
.tile.xl { font-size: 27px; font-family: var(--fd); } .tile.md { font-size: 18px; } .tile.sm { font-size: 16px; }
.tile .ic { width: 34px; height: 34px; border-radius: calc(var(--rad) * .6); border: var(--bw) solid var(--h); background: var(--hb); color: var(--h); display: grid; place-items: center; flex: none; font: 700 17px/1 var(--fd); }
.tile.c-r { --h: var(--a); --hb: var(--ab); } .tile.c-b { --h: var(--b); --hb: var(--bb); }
.tile.c-y { --h: var(--c); --hb: var(--cb); } .tile.c-g { --h: var(--d); --hb: var(--db); }
.tile:active:not(:disabled) { background: var(--hb); border-color: var(--h); }
.tile.sel { background: var(--hb); border-color: var(--h); box-shadow: 0 0 0 3px var(--hb), 0 0 28px var(--hb); }
.tile.dim { opacity: .35; }
.tile.hide .tx { visibility: hidden; }
.tile:disabled { cursor: default; }
.sent { text-align: center; font-weight: 700; font-size: 17px; min-height: 28px; margin: 0; color: var(--mut); }

.res { position: relative; border-radius: var(--rad2); padding: 26px 16px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; border: var(--bw) solid var(--line); animation: pop .35s ease-out; }
.res.ok { background: linear-gradient(170deg, var(--okb), var(--okl)); border-color: var(--ok); }
.res.bad { background: linear-gradient(170deg, rgba(255,107,122,.22), rgba(255,107,122,.05)); border-color: rgba(255,107,122,.5); }
.res.none { background: linear-gradient(170deg, rgba(127,139,176,.22), rgba(127,139,176,.05)); }
.res .mark { width: 84px; height: 84px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; border: 2px solid currentColor; }
.res.ok .mark { color: var(--ok); } .res.bad .mark { color: var(--bad); } .res.none .mark { color: var(--slate); }
.res .mark svg { width: 46px; height: 46px; }
.res h2 { margin: 4px 0 0; font-family: var(--fd); font-size: 38px; line-height: 1.1; }
.res .pts { color: var(--gold); border: 1px solid rgba(232,194,106,.55); background: rgba(232,194,106,.1); border-radius: 999px; padding: 5px 22px; font-size: 26px; font-weight: 700; font-family: var(--fd); }
.res .pts:empty { display: none; }
.res p { margin: 0; font-size: 18px; color: var(--mut); }
.res p:empty { display: none; }
.res p b { display: block; font-size: 22px; color: var(--txt); }
.info { background: linear-gradient(180deg, var(--glass), var(--glass2)); border: var(--bw) solid var(--line); border-radius: var(--rad); padding: 16px; text-align: center; font-size: 18px; }
.info b { font-family: var(--fd); font-size: 24px; color: var(--gold); }
.badge { display: inline-block; border: 1px solid rgba(61,225,210,.55); color: var(--cy); background: rgba(61,225,210,.1); border-radius: 999px; padding: 5px 16px; font-weight: 700; font-size: 16px; }
.final-rank { font-family: var(--fd); font-weight: 700; font-size: 104px; line-height: 1; text-align: center; background: linear-gradient(180deg, #F8E6B0 8%, var(--gold) 50%, var(--gold2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(232,194,106,.3)); }
.final-rank small { display: block; font: 700 18px/1.3 var(--f); color: var(--txt); -webkit-text-fill-color: var(--txt); margin-top: 10px; filter: none; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list li { display: flex; gap: 12px; align-items: center; background: linear-gradient(180deg, var(--glass), var(--glass2)); border: var(--bw) solid var(--line); border-radius: var(--rad); padding: 12px 16px; font-weight: 700; font-size: 18px; }
.list li.me { border-color: rgba(232,194,106,.7); background: rgba(232,194,106,.12); }
.list li .n { flex: 1; word-break: break-word; }
.list li .p { font-family: var(--fd); color: var(--gold); }

/* reakciók: csendben a háttérben, egy apró gombbal */
.fab { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--fab); color: var(--gold); display: grid; place-items: center; z-index: 25; touch-action: manipulation; box-shadow: 0 6px 20px var(--shade); }
.fab svg { width: 24px; height: 24px; }
.fab:active { background: rgba(61,225,210,.2); }
body.has-fab .scr.on { padding-bottom: 66px; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0 auto; max-width: 560px; background: var(--pop); border: var(--bw) solid var(--line); border-bottom: 0; border-radius: var(--rad2) var(--rad2) 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px var(--shade); }
.dock-t { text-align: center; font-weight: 700; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--mut); margin: 0 0 12px; }
.dock-b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.em { height: 58px; border: var(--bw) solid var(--line); border-radius: var(--rad); background: var(--glass); color: var(--gold); display: grid; place-items: center; touch-action: manipulation; }
.em svg { width: 28px; height: 28px; }
.em:active { background: rgba(61,225,210,.22); color: var(--cy); border-color: var(--cy); }
.backdrop { position: fixed; inset: 0; background: var(--veil); z-index: 29; }

/* felrepülő reakciók és csillámok */
.fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 45; }
.fx.back { z-index: 0; }
body.player main, body.screen main { position: relative; z-index: 1; }
.fe { position: absolute; bottom: -8vh; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: var(--fe-bg); border: var(--bw) solid var(--line); box-shadow: 0 0 18px rgba(232,194,106,.2); will-change: transform, opacity; animation: rise var(--d, 2.8s) ease-out forwards; }
.fe:nth-child(2n) { color: var(--cy); border-color: rgba(61,225,210,.5); box-shadow: 0 0 18px rgba(61,225,210,.2); }
.fe svg { width: 22px; height: 22px; }
@keyframes rise {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  14% { opacity: .95; transform: translate(calc(var(--dx) * .1), -8vh) scale(1); }
  100% { transform: translate(var(--dx), -62vh) scale(.9); opacity: 0; }
}
.cf { position: absolute; top: -4vh; width: 6px; height: 6px; border-radius: 50%; will-change: transform; animation: fall var(--d, 2.8s) ease-in forwards; opacity: .9; }
.cf.r, .cf.y { background: var(--gold); } .cf.b, .cf.c { background: var(--cy); } .cf.g { background: var(--conf3); }
.cf.d { border-radius: 1px; transform: rotate(45deg); }
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translate(var(--dx), 70vh) rotate(var(--r, 240deg)); opacity: 0; }
}

/* ---------- kivetítő ---------- */
body.screen { overflow: hidden; font-size: 2.6vmin; }
body.screen main { height: 100vh; padding: 3vmin 4vmin; display: flex; flex-direction: column; }
body.screen .scr { gap: 2.4vmin; min-height: 0; }
body.screen .logo.sm .tag { font-size: 1.7vmin; }
body.screen .logo.sm .n40 { font-size: 7.6vmin; }
body.screen .logo.sm .kv { font-size: 1.7vmin; }
.sc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vmin; }
.sc-head .chip { background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: .9vmin 2.6vmin; font-size: 3vmin; font-weight: 700; justify-self: start; white-space: nowrap; }
.sc-head > .chip:last-child { justify-self: end; }
.sc-head .hl { display: flex; align-items: center; gap: 1.4vmin; min-width: 0; }
.sc-head .hl .chip { justify-self: auto; overflow: hidden; text-overflow: ellipsis; }
.sc-head .chip.cat { color: var(--cy); border-color: rgba(61,225,210,.5); background: rgba(61,225,210,.1); font-size: 2.3vmin; letter-spacing: .18em; text-transform: uppercase; }
.sc-qrow { display: flex; align-items: center; gap: 3vmin; }
.sc-qrow .ring { width: 15vmin; height: 15vmin; }
.sc-qrow .ring b { width: 12.8vmin; height: 12.8vmin; font-size: 7vmin; }
.sc-q { flex: 1; padding: 3.2vmin 4vmin; font-size: 5vmin; font-weight: 700; text-align: center; line-height: 1.22; border-radius: var(--radp); }
.sc-q.md { font-size: 4.2vmin; } .sc-q.sm { font-size: 3.5vmin; }
.sc-q.solo { margin: 1vmin 6vmin; flex: none; }
.sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2vmin; flex: 1; min-height: 0; }
.sc-tiles.two { grid-template-columns: 1fr; }
.sc-tile { --h: var(--a); --hb: var(--ab); border-radius: var(--radp); border: var(--bw) solid var(--line); background: linear-gradient(180deg, var(--surf), var(--surf2)); display: flex; align-items: center; gap: 2.6vmin; padding: 2vmin 3vmin 2vmin 3.4vmin; font-size: 4.2vmin; font-weight: 700; line-height: 1.15; position: relative; overflow: hidden; }
.sc-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .9vmin; background: var(--h); }
.sc-tile.md { font-size: 3.6vmin; } .sc-tile.sm { font-size: 3vmin; } .sc-tile.xl { font-size: 6.4vmin; font-family: var(--fd); }
.sc-tile .ic { width: 6.6vmin; height: 6.6vmin; border-radius: calc(var(--radp) * .7); border: var(--bw) solid var(--h); background: var(--hb); color: var(--h); display: grid; place-items: center; flex: none; font: 700 3.6vmin/1 var(--fd); }
.sc-tile.c-r { --h: var(--a); --hb: var(--ab); } .sc-tile.c-b { --h: var(--b); --hb: var(--bb); }
.sc-tile.c-y { --h: var(--c); --hb: var(--cb); } .sc-tile.c-g { --h: var(--d); --hb: var(--db); }
.sc-tile .t { flex: 1; word-break: break-word; }
.sc-tile .k { font-family: var(--fd); font-size: 5.6vmin; min-width: 3ch; text-align: right; color: var(--h); position: relative; z-index: 1; }
.sc-tile .pc { font-size: 2.6vmin; font-weight: 700; color: var(--mut); position: relative; z-index: 1; margin-left: .6vmin; align-self: center; }
.sc-tile .ic, .sc-tile .t { position: relative; z-index: 1; }
.sc-tile.dim { opacity: var(--dim); }
.sc-tile.right { border-color: var(--ok); box-shadow: 0 0 0 .4vmin var(--okb), 0 0 4vmin var(--okl); }
.sc-tile.right .fill { background: linear-gradient(90deg, var(--okl), var(--okb)); }
.sc-tile .fill {
  position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, transparent, var(--hb) 85%);
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1); z-index: 0; transform-origin: left;
}
.sc-tile.cnt { gap: 1.2vmin; }
/* Eredménykép: az eloszlás a főszereplő teljes szélességben, alatta kompakt élmezőny. */
.sc-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sc-main .sc-tiles { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.sc-main .sc-tile { font-size: 4.6vmin; padding: 1.8vmin 3.4vmin 1.8vmin 3.4vmin; gap: 2.2vmin; }
.sc-main .sc-tile.md { font-size: 3.9vmin; } .sc-main .sc-tile.sm { font-size: 3.1vmin; } .sc-main .sc-tile.xl { font-size: 5vmin; }
.sc-main .sc-tile .ic { width: 7.4vmin; height: 7.4vmin; font-size: 4vmin; }
.sc-main .sc-tile .k { font-size: 7.4vmin; min-width: 2.6ch; }
.sc-main .sc-tile .pc { font-size: 3.2vmin; min-width: 5ch; text-align: right; }
.sc-main .sc-guess .big { font-size: 15vmin; }
.sc-main .sc-ord .r { font-size: 4.4vmin; padding: 2.2vmin 3.4vmin; }
.sc-qrow.rev .sc-q { font-size: 3.6vmin; padding: 1.8vmin 3vmin; }
.sc-qrow.rev .sc-q.md { font-size: 3.1vmin; } .sc-qrow.rev .sc-q.sm { font-size: 2.7vmin; }
.sc-strip { display: flex; align-items: center; gap: 2vmin; flex: none; }
.sc-strip .st-h { font-size: 1.9vmin; letter-spacing: var(--caps); text-transform: uppercase; color: var(--cy); font-weight: 700; white-space: nowrap; }
.sc-strip .st-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4vmin; flex: 1; min-width: 0; }
.sc-strip .si {
  border: var(--bw) solid var(--line); border-radius: var(--radp); background: linear-gradient(180deg, var(--glass), var(--glass2));
  padding: .9vmin 1.4vmin 1.1vmin; display: grid; grid-template-columns: auto 1fr auto; gap: .2vmin .8vmin; align-items: baseline; min-width: 0;
}
.sc-strip .si .r { font-family: var(--fd); color: var(--mut); font-size: 2.1vmin; }
.sc-strip .si .n { font-size: 2.2vmin; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-strip .si .s { font-family: var(--fd); font-size: 2.3vmin; white-space: nowrap; }
.sc-strip .si .d { color: var(--ok); font-size: 1.6vmin; margin-left: .5vmin; }
.sc-strip .si .b { grid-column: 1 / 4; height: .6vmin; background: var(--track); border-radius: 999px; overflow: hidden; margin-top: .5vmin; }
.sc-strip .si .b i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy), var(--gold)); }
.sc-strip .si.lead { border-color: var(--gold); }

/* Valódi oszlopdiagram az eredményhez (a Kahoot-féle megoldás mintájára):
   közös alapvonal, alulról felnövő oszlopok, alattuk a válasz betűjele és szövege. */
.sc-chart { display: flex; flex-direction: column; gap: 1.6vmin; flex: 1; min-height: 0; }
.sc-chart .bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2.6vmin;
  flex: 1; min-height: 0; align-items: end; border-bottom: 2px solid var(--line);
}
.sc-chart .labs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2.6vmin; flex: none; }
.sc-chart .col { --h: var(--a); --hb: var(--ab); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .9vmin; height: 100%; min-width: 0; }
.sc-chart .col.c-r { --h: var(--a); --hb: var(--ab); } .sc-chart .col.c-b { --h: var(--b); --hb: var(--bb); }
.sc-chart .col.c-y { --h: var(--c); --hb: var(--cb); } .sc-chart .col.c-g { --h: var(--d); --hb: var(--db); }
.sc-chart .lab.c-r { --h: var(--a); --hb: var(--ab); } .sc-chart .lab.c-b { --h: var(--b); --hb: var(--bb); }
.sc-chart .lab.c-y { --h: var(--c); --hb: var(--cb); } .sc-chart .lab.c-g { --h: var(--d); --hb: var(--db); }
.sc-chart .cv { font-family: var(--fd); font-size: 5.2vmin; line-height: 1; color: var(--h); font-weight: 700; }
.sc-chart .bar {
  width: 100%; max-width: 20vmin; height: 0; min-height: .9vmin; border-radius: var(--radp) var(--radp) 0 0;
  background: var(--h); box-shadow: inset 0 2.5vmin 3vmin -2vmin rgba(255,255,255,.3);
  transition: height 1.15s cubic-bezier(.22, 1, .36, 1);
}
.sc-chart .lab { display: flex; flex-direction: column; align-items: center; gap: .7vmin; text-align: center; min-width: 0; }
.sc-chart .lab .ic {
  width: 6vmin; height: 6vmin; flex: none; display: grid; place-items: center; border-radius: 999px;
  border: var(--bw) solid var(--h); background: var(--hb); color: var(--h); font: 700 3.2vmin/1 var(--fd);
}
.sc-chart .lab .ic svg { width: 3.4vmin; height: 3.4vmin; }
.sc-chart .lab .t { font-size: 2.7vmin; font-weight: 700; line-height: 1.2; max-width: 100%; word-break: break-word; }
.sc-chart .lab .t.md { font-size: 2.3vmin; } .sc-chart .lab .t.sm { font-size: 1.95vmin; }
.sc-chart .lab .pc { font-size: 2.1vmin; color: var(--mut); font-weight: 700; }
.sc-chart .col.dim, .sc-chart .lab.dim { opacity: var(--dim); }
.sc-chart .col.dim .bar { filter: grayscale(.4); }
.sc-chart .col.right .bar { box-shadow: inset 0 2.5vmin 3vmin -2vmin rgba(255,255,255,.3), 0 0 0 .45vmin var(--okb); }
.sc-chart .lab.right .t { color: var(--ok); }
.sc-chart .lab.right .ic { border-color: var(--ok); color: var(--ok); background: var(--okl); }
.sc-chart .lab .ok { color: var(--ok); line-height: 0; }
.sc-chart .lab .ok svg { width: 3.6vmin; height: 3.6vmin; }
.sc-board { padding: 2.6vmin 3vmin; display: flex; flex-direction: column; gap: 1.3vmin; min-height: 0; overflow: hidden; }
.sc-board h3 { margin: 0 0 .6vmin; font-size: 2.4vmin; letter-spacing: .3em; text-transform: uppercase; color: var(--cy); }
.sc-lobby { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4vmin; flex: 1; min-height: 0; align-items: stretch; }
.sc-join { padding: 3vmin; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8vmin; }
.sc-join h1 { font-family: var(--fd); font-size: 5.6vmin; margin: 0; line-height: 1.1; }
.sc-join .url { font-size: 3.6vmin; font-weight: 700; color: var(--gold); border: 1px solid rgba(232,194,106,.5); background: rgba(232,194,106,.08); border-radius: 1.4vmin; padding: 1vmin 2.4vmin; word-break: break-all; }
.sc-join .qr { width: min(34vmin, 100%); height: auto; aspect-ratio: 1; border-radius: 1.6vmin; background: #fff; }
.sc-join .pin { font-size: 4.2vmin; font-weight: 700; }
.sc-join .hint { font-size: 2.6vmin; margin: 0; color: var(--mut); }
.sc-who { display: flex; flex-direction: column; gap: 2vmin; min-height: 0; }
.sc-count { font-size: 4.6vmin; font-weight: 700; line-height: 1; }
.sc-count b { font-family: var(--fd); color: var(--gold); font-size: 9vmin; margin-right: 1.4vmin; }
.sc-names { display: flex; flex-wrap: wrap; gap: 1.2vmin; align-content: flex-start; overflow: hidden; flex: 1; min-height: 0; }
.sc-names span { background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: .8vmin 2.4vmin; font-size: 3vmin; font-weight: 700; animation: pop .35s ease-out; }
.sc-names span:nth-child(4n+1) { border-color: rgba(61,225,210,.55); } .sc-names span:nth-child(4n+3) { border-color: rgba(232,194,106,.55); }
.sc-row { display: grid; grid-template-columns: 4.6vmin 1fr auto; gap: 1.6vmin; align-items: center; font-size: 3.2vmin; font-weight: 700; }
.sc-row .d { color: var(--ok); font-size: 2.5vmin; margin-left: 1vmin; }
.sc-row .bar2 { grid-column: 2 / 4; height: .9vmin; background: var(--track); border-radius: 1vmin; overflow: hidden; margin-top: -.5vmin; }
.sc-row .bar2 i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy), var(--gold)); }
.sc-board.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vmin 5vmin; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 3vmin; flex: 1; min-height: 0; }
.podium .pl { width: 30vmin; display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.podium .nm { font-family: var(--fd); font-size: 3.8vmin; text-align: center; word-break: break-word; line-height: 1.1; }
.podium .bx { width: 100%; border-radius: var(--radp) var(--radp) 0 0; display: flex; align-items: flex-start; justify-content: center; font-family: var(--fd); font-size: 9vmin; padding-top: 1vmin; color: var(--ink); }
.podium .p1 .bx { background: linear-gradient(180deg, #F8E6B0, var(--gold2)); height: 36vmin; } .podium .p2 .bx { background: linear-gradient(180deg, #E4EAF8, #8E9AC0); height: 26vmin; } .podium .p3 .bx { background: linear-gradient(180deg, #E9B58A, #A5683A); height: 19vmin; }
.podium .sc { font-size: 3vmin; color: var(--mut); }
.fs-btn { position: fixed; right: 1vmin; bottom: 1vmin; background: rgba(0,0,0,.4); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; opacity: .25; font-size: 14px; z-index: 50; }
.fs-btn:hover { opacity: 1; }
body.screen .fe { width: 7vmin; height: 7vmin; bottom: -9vmin; } body.screen .fe svg { width: 4vmin; height: 4vmin; }
body.screen .cf { width: .9vmin; height: .9vmin; }

/* ---------- kérdéstípusok: téma, sorozat, csúszka, sorrend, többválaszos ---------- */
.qmeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 22px; margin: -8px 0 -6px; }
.qmeta .cat { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cy); word-break: break-word; }
.qmeta .cat:empty, .qmeta .streak:empty { display: none; }
.qmeta .streak { flex: none; font-size: 13px; font-weight: 700; color: var(--gold); border: 1px solid rgba(232,194,106,.45); background: rgba(232,194,106,.1); border-radius: 999px; padding: 2px 12px; }
.qbody { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.hintline { margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--mut); }
.subbar { margin-top: auto; position: sticky; bottom: 0; z-index: 6; padding: 14px 0 max(4px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(6,10,24,0), var(--bg) 42%); }

.tile .ck { position: absolute; right: 9px; top: 9px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; opacity: .4; }
.tile .ck svg { width: 15px; height: 15px; opacity: 0; }
.tile.on { border-color: var(--h); background: var(--hb); }
.tile.on .ck { opacity: 1; border-color: var(--h); background: var(--hb); color: var(--h); }
.tile.on .ck svg { opacity: 1; }
.tile .ic svg { width: 20px; height: 20px; }

.guess { display: flex; flex-direction: column; gap: 14px; border: var(--bw) solid var(--line); border-radius: var(--rad2); padding: 18px 16px 20px; background: linear-gradient(180deg, var(--surf), var(--surf2)); }
.guess .gv { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--fd); font-size: 46px; line-height: 1; color: var(--gold); }
.guess .gv .gu { font-family: var(--f); font-size: 17px; color: var(--mut); }
.guess .gr { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--mut); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; touch-action: pan-y; }
.slider::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--cy), var(--gold)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -14px; border-radius: 50%; background: var(--surf); border: 3px solid var(--gold); box-shadow: 0 4px 14px var(--shade); }
.slider::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--cy), var(--gold)); }
.slider::-moz-range-thumb { width: 32px; height: 32px; border: 3px solid var(--gold); border-radius: 50%; background: var(--surf); }
.slider:focus-visible { outline: 3px solid var(--cy); outline-offset: 4px; }
.slider:disabled { opacity: .5; }
.gstep { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gstep button { min-height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--txt); font: 700 24px/1 var(--fd); touch-action: manipulation; }
.gstep button:active:not(:disabled) { background: rgba(61,225,210,.18); border-color: var(--cy); }
.gstep button:disabled { opacity: .4; }

.ordl { display: flex; flex-direction: column; gap: 10px; }
.ordi { display: flex; align-items: center; gap: 11px; min-height: 66px; padding: 10px 10px 10px 13px; border: var(--bw) solid var(--line); border-radius: var(--rad); background: linear-gradient(180deg, var(--surf), var(--surf2)); }
.ordi .n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 700 16px/1 var(--fd); color: var(--cy); border: 1.5px solid rgba(61,225,210,.5); background: rgba(61,225,210,.12); }
.ordi .t { flex: 1; font-weight: 700; font-size: 17px; line-height: 1.2; word-break: break-word; }
.ordi.sm .t { font-size: 15px; }
.ordi .mv { display: flex; gap: 6px; flex: none; }
.ordi .mv button { width: 44px; height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--glass); color: var(--txt); display: grid; place-items: center; touch-action: manipulation; }
.ordi .mv button svg { width: 20px; height: 20px; }
.ordi .mv button:disabled { opacity: .3; }
.ordi .mv button:active:not(:disabled) { background: rgba(61,225,210,.2); border-color: var(--cy); }
.ordi.done .mv { display: none; }
.ordi.hide .t { visibility: hidden; }

.res .sol { margin: 0; font-size: 18px; color: var(--mut); }
.res .sol:empty { display: none; }
.res .sol b { display: block; font-size: 22px; color: var(--txt); }
.res .sol ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.res .sol ol li { display: flex; gap: 10px; align-items: baseline; font-size: 17px; font-weight: 700; color: var(--txt); }
.res .sol ol li i { font-style: normal; font-family: var(--fd); color: var(--cy); }
.res .sol small.lm { display: block; font-size: 16px; color: var(--mut); margin-top: 4px; }
.res.part { background: linear-gradient(170deg, rgba(232,194,106,.22), rgba(232,194,106,.05)); border-color: rgba(232,194,106,.5); }
.res.part .mark { color: var(--gold); }
.strline { text-align: center; }
.strline:empty { display: none; }

/* kivetítő: becslés, sorrend, díjak */
.sc-kind { font-size: 2.3vmin; letter-spacing: .3em; text-transform: uppercase; color: var(--cy); font-weight: 700; }
.sc-guess { display: flex; flex-direction: column; gap: 2.4vmin; align-items: center; justify-content: center; flex: 1; min-height: 0; }
.sc-guess .bar { position: relative; width: 86%; height: 2.4vmin; border-radius: 999px; background: linear-gradient(90deg, var(--cy), var(--gold)); opacity: .55; }
.sc-guess .bar i { position: absolute; top: -1.9vmin; width: .9vmin; height: 6.2vmin; border-radius: 999px; background: var(--gold); box-shadow: 0 0 2vmin rgba(232,194,106,.75); }
.sc-guess .bar i.av { background: var(--cy); box-shadow: 0 0 2vmin rgba(61,225,210,.6); height: 4.6vmin; top: -1.1vmin; }
.sc-guess .ends { display: flex; justify-content: space-between; width: 86%; font-size: 2.8vmin; font-weight: 700; color: var(--mut); }
.sc-guess .big { font-family: var(--fd); font-size: 12vmin; line-height: 1; color: var(--gold); }
.sc-guess .sub { font-size: 3.2vmin; color: var(--mut); text-align: center; }
.sc-guess .sub b { color: var(--txt); }
.sc-guess .sub b.cy { color: var(--cy); }
.sc-ord { display: flex; flex-direction: column; gap: 1.6vmin; flex: 1; min-height: 0; justify-content: center; }
.sc-ord .r { display: flex; gap: 2.4vmin; align-items: center; padding: 1.8vmin 3vmin; border: var(--bw) solid var(--line); border-radius: var(--radp); background: linear-gradient(180deg, var(--surf), var(--surf2)); font-size: 3.8vmin; font-weight: 700; }
.sc-ord .r i { font-style: normal; font-family: var(--fd); color: var(--cy); min-width: 4vmin; }
.sc-ord .r.ok { border-color: var(--ok); background: var(--okl); }
.sc-awards { display: flex; gap: 3vmin; justify-content: center; flex-wrap: wrap; }
.sc-awards .aw { border: var(--bw) solid var(--line); background: var(--glass); border-radius: var(--radp); padding: 1.2vmin 3vmin; text-align: center; }
.sc-awards .aw b { display: block; font-size: 2vmin; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.sc-awards .aw .n { font-family: var(--fd); font-size: 3.4vmin; }
.sc-awards .aw .v { font-size: 2.4vmin; color: var(--mut); }

@media (max-width: 360px) {
  .guess .gv { font-size: 40px; }
  .ordi { min-height: 60px; gap: 8px; padding-left: 10px; }
  .ordi .mv button { width: 40px; }
  .qcard { padding: 18px 12px 16px; }
}

@media (prefers-reduced-motion: reduce) { .scr.on, .res, .sc-names span, .ordi { animation: none; } .fe, .cf { animation-duration: .01s !important; } }

/* ---------- az eredmény alatti kiegészítők: statisztika, pörgetés, nyeremények ---------- */
#r-extra { display: flex; flex-direction: column; gap: 12px; }
#r-extra:empty { display: none; }
.mystat, .spin, .wonbox {
  border: var(--bw) solid var(--line); border-radius: var(--rad); padding: 14px 14px 16px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
}
.mystat h3, .spin h3, .wonbox h3 {
  margin: 0 0 10px; font-size: 13px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--cy); font-weight: 700;
}
.ms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms .sb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms .sb b { font-family: var(--fd); font-size: 24px; line-height: 1.1; }
.ms .sb span { font-size: 13px; color: var(--mut); line-height: 1.25; }

.spin { text-align: center; }
.spin .sph { margin: 0 0 12px; font-size: 15px; color: var(--mut); }
.reel {
  position: relative; height: 58px; overflow: hidden; border-radius: var(--rad); margin-bottom: 12px;
  border: var(--bw) solid var(--gold); background: var(--inp);
}
.reel .rs { transition: transform 3.4s cubic-bezier(.12, .72, .18, 1); will-change: transform; }
.reel .rs div {
  height: 58px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: 18px; padding: 0 12px; text-align: center; line-height: 1.15;
}
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none; z-index: 2; }
.reel::before { top: 0; background: linear-gradient(180deg, var(--surf), transparent); }
.reel::after { bottom: 0; background: linear-gradient(0deg, var(--surf), transparent); }
.spin .btn.sm { min-height: 48px; font-size: 17px; }
.spin .spmsg { margin: 10px 0 0; font-size: 16px; color: var(--mut); min-height: 1.2em; }
.spin .spmsg.win { color: var(--gold); font-weight: 700; font-size: 19px; font-family: var(--fd); }
.spin .spmsg.err { color: var(--errt); font-weight: 700; }
.spin.win { border-color: var(--gold); box-shadow: 0 0 0 2px var(--cb); }

.wonbox .wi { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; padding: 3px 0; }
.wonbox .wi svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.wonbox .wn { margin: 8px 0 0; font-size: 14px; color: var(--mut); }
#f-won:empty { display: none; }

@media (max-width: 340px) {
  .ms { grid-template-columns: 1fr; gap: 7px; }
  .ms .sb b { font-size: 21px; }
}

/* ======================================================================
   TÉMÁNKÉNTI FORMAVILÁG
   Nem csak szín: minden témának más a kerete, a hangsúlyozása és a betűje.
   ====================================================================== */

/* ---------- GÁLAEST: Art Deco keretek, serif, arany vonalak ---------- */
body[data-theme="gala"] .card,
body[data-theme="gala"] .tile,
body[data-theme="gala"] .sc-tile,
body[data-theme="gala"] .sc-ord .r,
body[data-theme="gala"] .guess,
body[data-theme="gala"] .ordi,
body[data-theme="gala"] .res,
body[data-theme="gala"] .sc-strip .si { box-shadow: 0 10px 26px -14px rgba(124,96,41,.3); }
/* a kártya tetején futó színes vonal helyett dupla aranyléc, ahogy a meghívón */
body[data-theme="gala"] .card::before,
body[data-theme="gala"] .nametag::before {
  left: 14%; right: 14%; top: 0; height: 2px; border-radius: 999px; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
}
/* a válaszcsempék hangsúlya: vékony aranykeret és szögletes betűjel */
body[data-theme="gala"] .tile::before { left: 16%; right: 16%; height: 2px; border-radius: 999px; }
body[data-theme="gala"] .tile .ic,
body[data-theme="gala"] .sc-tile .ic { border-width: 1px; font-family: var(--fd); }
body[data-theme="gala"] .sc-tile::before { width: .5vmin; }
body[data-theme="gala"] .logo .n40 {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
  -webkit-background-clip: text; background-clip: text; filter: none; letter-spacing: 0;
}
body[data-theme="gala"] .logo .n40::after { border-color: rgba(168,134,74,.55); border-width: 1px; }
body[data-theme="gala"] .logo .tag,
body[data-theme="gala"] .logo .kv { color: var(--cy); }
body[data-theme="gala"] .final-rank {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
  -webkit-background-clip: text; background-clip: text; filter: none;
}
/* a kivetítőn a kérdés keretes tábla, mint egy menükártya */
body[data-theme="gala"] .sc-q {
  box-shadow: inset 0 0 0 1px rgba(168,134,74,.35), 0 1.4vmin 3.4vmin -1.4vmin rgba(124,96,41,.22);
  padding: 3.6vmin 5vmin;
}
body[data-theme="gala"] .sc-head .chip,
body[data-theme="gala"] .pill,
body[data-theme="gala"] .badge,
body[data-theme="gala"] .res .pts { border-radius: 999px; }
body[data-theme="gala"] .sc-head .chip.cat { background: transparent; border-color: var(--gold); color: var(--gold2); }

/* ---------- VEZETŐI: bal oldali hangsúlysávok, szögletes, mérőszám-érzet ---------- */
body[data-theme="exec"] .card::before,
body[data-theme="exec"] .nametag::before {
  left: 0; right: auto; top: 0; bottom: 0; width: 4px; height: auto; border-radius: 0;
  background: linear-gradient(180deg, var(--cy), var(--gold)); opacity: 1;
}
body[data-theme="exec"] .tile::before {
  left: 0; right: auto; top: 0; bottom: 0; width: 5px; height: auto; border-radius: 0;
}
body[data-theme="exec"] .tile { padding-left: 16px; }
body[data-theme="exec"] .sc-tile::before { width: 1.3vmin; }
body[data-theme="exec"] .sc-head .chip,
body[data-theme="exec"] .pill,
body[data-theme="exec"] .badge { border-radius: 3px; }
body[data-theme="exec"] .logo .n40 {
  background: linear-gradient(180deg, #FFE3A8 6%, var(--gold) 52%, var(--gold2) 100%);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(240,178,74,.22));
}
body[data-theme="exec"] .logo .n40::after { border-color: rgba(79,163,247,.45); }
body[data-theme="exec"] .sc-q { box-shadow: inset 4px 0 0 var(--cy); }
body[data-theme="exec"] .sc-board h3,
body[data-theme="exec"] .sc-kind { letter-spacing: .22em; }

/* ---------- HONLAP: üveghatású kártyák, lágy árnyék, erősen lekerekített formák ---------- */
body[data-theme="honlap"] .card,
body[data-theme="honlap"] .tile,
body[data-theme="honlap"] .sc-tile,
body[data-theme="honlap"] .sc-ord .r,
body[data-theme="honlap"] .guess,
body[data-theme="honlap"] .ordi,
body[data-theme="honlap"] .sc-strip .si { box-shadow: 0 24px 60px -24px rgba(0,51,102,.55); backdrop-filter: blur(6px); }
/* a márka jele: navy-ciánba futó színátmenet a hangsúlyokon */
body[data-theme="honlap"] .card::before,
body[data-theme="honlap"] .nametag::before { background: linear-gradient(90deg, #003366, #19B4D2); opacity: 1; height: 3px; }
body[data-theme="honlap"] .sc-q { box-shadow: 0 24px 60px -24px rgba(0,51,102,.6); }
body[data-theme="honlap"] .logo .n40 {
  background: linear-gradient(135deg, #7ADBEB 0%, #19B4D2 55%, #0A5FB0 100%);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(25,180,210,.35));
}
body[data-theme="honlap"] .logo .n40::after { border-color: rgba(122,219,235,.5); }
body[data-theme="honlap"] .final-rank {
  background: linear-gradient(135deg, #7ADBEB 0%, #19B4D2 55%, #0A5FB0 100%);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(25,180,210,.3));
}
/* a honlap tipográfiája: vastag, szorosabb betűközű címsorok */
body[data-theme="honlap"] .sc-q,
body[data-theme="honlap"] .qcard,
body[data-theme="honlap"] .res h2 { font-weight: 800; letter-spacing: -.02em; }

/* ---------- Minden arculatban modern, lekerekített ikonok ---------- */
.tile .ic, .sc-tile .ic, .sc-chart .ic { border-radius: 999px; }