*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
[data-skin=indigo]{
  --bg:#14113a;--surf:#211c58;--surf2:#2f2978;--navbg:#211c58;--ink:#f4f1ff;--mute:#aaa4d8;--line:#3a3488;
  --acc:#ffd23f;--acc-ink:#1b1740;--hot:#ff6b6b;
  --head:"Fredoka","Trebuchet MS",sans-serif;--body:"Nunito","Segoe UI",sans-serif;
  --r:18px;--bw:1px;--sh:0 6px 18px rgba(0,0,0,.35);
}
[data-skin=indigo][data-theme=light]{
  --bg:#eef0f5;--surf:#ffffff;--surf2:#e3e6f0;--navbg:#e3e6ef;--ink:#1e2233;--mute:#5c6178;--line:#d7dbe6;
  --acc:#4f46e5;--acc-ink:#ffffff;--hot:#d8433a;
  --sh:0 6px 18px rgba(30,34,51,.10);
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.45;min-height:100vh;transition:background .15s,color .15s}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* top nav */
.nav{background:var(--navbg);border-bottom:var(--bw) solid var(--line)}
.navwrap{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{font-family:var(--head);font-size:24px;font-weight:700;background:none;border:0;color:var(--ink);padding:0;cursor:pointer;text-decoration:none;display:inline-block}
.navgroup{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.navlinks{display:flex;align-items:center;gap:16px}
.navlink{background:none;border:0;color:var(--mute);font-weight:700;font-size:14px;padding:6px 2px;border-bottom:2px solid transparent;text-decoration:none;display:inline-block}
.navlink.on{color:var(--ink);border-color:var(--acc)}
.navtoggle{display:none;background:none;border:var(--bw) solid var(--line);border-radius:10px;padding:6px 10px;font-size:18px;color:var(--ink)}
.navquick{display:flex;align-items:center;gap:12px}
.coffee{background:var(--acc);color:var(--acc-ink);border:0;border-radius:99px;padding:8px 16px;font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;display:inline-block}
.langsel{background:var(--surf);border:var(--bw) solid var(--line);border-radius:99px;padding:6px 10px}

/* theme switch: compact flip toggle instead of a text pill */
.theme-switch{width:46px;height:26px;border-radius:99px;background:var(--surf2);border:var(--bw) solid var(--line);position:relative;padding:0;flex:0 0 auto}
.theme-switch .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--acc-ink);transition:left .15s ease;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.theme-switch.on .knob{left:23px}

@media(max-width:680px){
  .navwrap{gap:10px}
  .navtoggle{display:block;order:1;margin-left:auto}
  .navgroup{order:2;flex-basis:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:10px}
  .navquick{order:1;justify-content:space-between}
  .navlinks{display:none;flex-direction:column;gap:2px;order:2}
  .navlinks.open{display:flex}
  .navlink{border-bottom:0;border-left:2px solid transparent;padding:10px 6px}
  .navlink.on{border-color:var(--acc)}
}

/* layout */
.wrap{max-width:1040px;margin:0 auto;padding:16px 16px 48px}
.top{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.filter-wrap{position:relative}
.filter-panel{position:absolute;right:0;top:calc(100% + 8px);width:300px;max-width:min(90vw,300px);max-height:min(70vh,460px);overflow-y:auto;z-index:20;margin:0}
.score{color:var(--mute);font-size:14px;align-self:center;margin-right:auto}
.score b{color:var(--ink);font-size:18px;font-family:var(--head)}
.pill{background:var(--surf);border:var(--bw) solid var(--line);border-radius:99px;padding:8px 14px}
.stage{display:grid;gap:16px}
@media(min-width:900px){.stage{grid-template-columns:1.2fr 1fr;align-items:start;gap:24px}}
.card{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.stack{display:grid;gap:16px}

/* menus (filters) */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:var(--bw) solid var(--line);background:var(--surf);border-radius:99px;padding:5px 12px;font-size:13px}
.chip.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.chip:disabled{opacity:.35}
h3{margin:0 0 8px;font-size:13px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.5px}

/* round */
.intro{font-family:var(--head);font-size:clamp(28px,6vw,42px);line-height:1.1;margin:4px 0}
.stake{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--mute);font-size:14px}
.stake b{font-family:var(--head);font-size:22px;color:var(--acc)}
.hintno{color:var(--mute);font-size:13px;margin:0 0 4px}
.hint{font-family:var(--head);font-size:clamp(20px,4vw,26px);line-height:1.25;margin:0}
.row{display:flex;gap:8px;margin-top:12px}
input[type=text]{flex:1;min-width:0;font-size:18px;padding:12px 14px;border-radius:var(--r);border:var(--bw) solid var(--line);background:var(--bg);color:var(--ink)}
.btn{border-radius:var(--r);border:var(--bw) solid var(--line);background:var(--surf);padding:12px 18px;font-weight:700;color:var(--ink)}
.btn.main{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.slot{aspect-ratio:1;font-family:var(--head);font-size:22px;font-weight:700;background:var(--surf2);border:var(--bw) solid var(--line);border-radius:var(--r);color:var(--ink)}
.slot:hover:not(:disabled){background:var(--acc);color:var(--acc-ink)}
.slot.used{opacity:.3;text-decoration:line-through}
.hist{list-style:none;margin:0;padding:0}
.hist li{padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.hist li:first-child{border:0}
.hist span{color:var(--mute)}
.hist em{color:var(--hot);font-style:normal;font-size:13px}
.msg{color:var(--mute);font-size:14px;margin:0}
.wrongword{color:var(--hot);font-weight:700}

/* result / hero */
.hero{text-align:center;padding:36px 0}
.hero h1{font-family:var(--head);font-size:clamp(48px,12vw,100px);line-height:1;margin:0 0 8px}
.hero p{color:var(--mute);max-width:420px;margin:0 auto 24px}
.hero .btn{font-size:20px;padding:16px 44px}
.fig img,.fb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) - 4px);display:block}
.fb{display:flex;align-items:center;justify-content:center;font-size:64px;background:var(--surf2)}
.big{font-family:var(--head);font-size:clamp(40px,9vw,64px);line-height:1;margin:8px 0}
.win{color:var(--acc)}.lose{color:var(--hot)}
.tags{color:var(--mute);font-size:14px}

/* promo (ad) slots - named neutrally so ad-blocker class filters don't hide the placeholder */
.promo-slot{border:1px dashed var(--line);border-radius:var(--r);background:var(--surf2);color:var(--mute);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.5px;text-transform:uppercase}
.promo-leader{width:100%;max-width:728px;height:90px;margin:24px auto 0}
.promo-box{width:100%;height:250px;margin-top:8px}

/* static pages */
.page{max-width:760px;margin:0 auto;padding:32px 16px 60px}
.page h1{font-family:var(--head);font-size:34px;margin:0 0 6px}
.page p{color:var(--mute);line-height:1.6}

/* Plain in-text links (privacy policy, contact, dashboard "N to finish", etc.) — anything that
   doesn't already carry its own button/nav class. Buttons, nav links and the footer set their own
   color+no-underline above, and (being class selectors) win over this element selector regardless
   of order, so this only reaches the plain, unstyled <a> tags. */
a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
a:hover,a:focus-visible{text-decoration-thickness:2px}
a:visited{color:var(--acc)}

.foot{max-width:1040px;margin:24px auto 0;padding:16px;border-top:1px solid var(--line);color:var(--mute);font-size:13px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.foot a{color:var(--mute);cursor:pointer;text-decoration:none;padding:4px 10px}
.foot .footlinks{display:flex;flex-wrap:wrap}
.note{font-size:13px;color:var(--mute);margin-top:16px}