:root{
  --gold:#C9A84C;--gold-l:#F0C96B;--dark:#090910;--surf:#14141C;--surf2:#1C1C27;
  --text:#F0EDE4;--muted:#6A6A7A;--hi:#4CAF82;--lo:#E05A5A;--bdr:rgba(201,168,76,.16);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--dark);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 90% 55% at 15% -5%,rgba(201,168,76,.06) 0%,transparent 55%),
             radial-gradient(ellipse 70% 45% at 85% 105%,rgba(201,168,76,.04) 0%,transparent 55%);}
.wrap{position:relative;z-index:1;width:100%;max-width:1080px;padding:0 18px;
  display:flex;flex-direction:column;align-items:center;}
header{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 12px;border-bottom:1px solid var(--bdr);}
.logo{font-family:'Bebas Neue',sans-serif;font-size:1.75rem;letter-spacing:.07em;color:var(--gold);}
.logo small{display:block;font-family:'DM Sans',sans-serif;font-size:.65rem;
  letter-spacing:.2em;color:var(--muted);font-weight:300;margin-top:1px;}
.hud{display:flex;flex-direction:column;align-items:flex-end;}
.hud-lbl{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.hud-n{font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;color:var(--gold-l);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .18s;}
.hud-n.pop{transform:scale(1.4);color:#fff;}
.hud-b{font-size:.6rem;color:var(--muted);}
/* Tab navigation */
.tab-nav{display:flex;gap:6px;padding:14px 0 0;}
.tnav{padding:9px 22px;border:1px solid var(--bdr);border-radius:9px 9px 0 0;background:var(--surf);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.82rem;cursor:pointer;transition:all .16s;letter-spacing:.04em;border-bottom:none;}
.tnav:hover{color:var(--gold);}
.tnav.on{background:var(--dark);border-color:var(--gold);color:var(--gold-l);font-weight:600;}
/* Game nav buttons */
.g-nav{display:flex;gap:9px;margin-top:14px;margin-bottom:4px;justify-content:center;flex-wrap:wrap;}
.btn-exit{padding:8px 18px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.78rem;cursor:pointer;transition:all .16s;}
.btn-exit:hover{border-color:var(--lo);color:var(--lo);}
.btn-study-go{padding:8px 18px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.78rem;cursor:pointer;transition:all .16s;}
.btn-study-go:hover{border-color:var(--gold);color:var(--gold);}
/* Progress bar in game */
.g-progress{width:100%;max-width:520px;margin-top:10px;display:flex;align-items:center;gap:10px;}
.g-prog-bar{flex:1;height:5px;background:var(--surf2);border-radius:3px;overflow:hidden;}
.g-prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));border-radius:3px;transition:width .4s;}
.g-prog-lbl{font-size:.6rem;color:var(--muted);letter-spacing:.1em;white-space:nowrap;}
/* Victory screen */
#victory{display:none;flex-direction:column;align-items:center;gap:16px;padding:48px 38px;background:var(--surf);border:1px solid rgba(201,168,76,.4);border-radius:22px;text-align:center;max-width:420px;width:100%;margin:44px 0;}
#victory.on{display:flex;animation:fadeUp .4s ease forwards;}
.vic-emoji{font-size:3rem;}
.vic-t{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--gold-l);}
.vic-sub{font-size:.82rem;color:var(--muted);line-height:1.6;}
.vic-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
/* Study play button */
.btn-study-play{padding:11px 28px;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--dark);border:none;border-radius:10px;font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.12em;cursor:pointer;box-shadow:0 3px 16px rgba(201,168,76,.3);transition:transform .13s,box-shadow .13s;}
.btn-study-play:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(201,168,76,.5);}
/* Results tab */
#results{display:none;flex-direction:column;align-items:center;width:100%;padding-bottom:60px;}
.res-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 0 16px;}
.res-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.07em;color:var(--gold-l);}
.res-warn{font-size:.62rem;color:var(--muted);letter-spacing:.06em;font-style:italic;margin-bottom:8px;text-align:center;width:100%;}
.res-msg{font-size:.88rem;color:var(--muted);text-align:center;line-height:1.6;max-width:520px;margin-bottom:20px;}
.res-table{width:100%;border-collapse:collapse;border:1px solid var(--bdr);border-radius:14px;overflow:hidden;}
.res-table th{background:var(--surf2);color:var(--muted);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:12px 16px;text-align:left;font-weight:500;}
.res-table td{padding:13px 16px;border-top:1px solid var(--bdr);font-size:.82rem;vertical-align:middle;}
.res-table tr:hover td{background:rgba(201,168,76,.03);}
.res-cell{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.res-done{background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(240,201,107,.12));border:1px solid rgba(201,168,76,.4);border-radius:9px;padding:8px 14px;display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--gold-l);letter-spacing:.06em;}
.res-done .chk{font-size:1.2rem;}
.res-play-btn{padding:7px 16px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;color:var(--muted);font-size:.72rem;cursor:pointer;transition:all .16s;white-space:nowrap;letter-spacing:.04em;}
.res-play-btn:hover{background:rgba(201,168,76,.1);border-color:var(--gold);color:var(--gold-l);}
.res-region{font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:.06em;color:var(--text);}
.res-prog{margin-top:18px;font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-align:center;}
.all-done-banner{display:none;background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(76,175,130,.1));border:1px solid rgba(201,168,76,.4);border-radius:14px;padding:22px 28px;text-align:center;margin-bottom:20px;width:100%;max-width:620px;}
.all-done-banner.show{display:block;}
.all-done-banner .ad-t{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--gold-l);letter-spacing:.06em;}
.all-done-banner .ad-s{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.5;}
.sel-wrap{position:relative;display:inline-block;}
.sel-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;}
select.sel{appearance:none;-webkit-appearance:none;padding:9px 36px 9px 16px;
  border:1px solid var(--bdr);border-radius:9px;background:var(--surf);color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.85rem;cursor:pointer;outline:none;transition:border-color .16s;}
select.sel:hover,select.sel:focus{border-color:var(--gold);}
select.sel option{background:#1c1c27;color:var(--text);}
/* Menu */
#menu{display:flex;flex-direction:column;align-items:center;gap:28px;padding:48px 0 36px;width:100%;}
.m-title{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:.07em;color:var(--gold-l);text-align:center;line-height:1.05;}
.m-sub{color:var(--muted);font-size:.82rem;letter-spacing:.06em;text-align:center;margin-top:-16px;}
.m-sec{width:100%;max-width:560px;}
.m-sec-lbl{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;text-align:center;}
.m-opts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}
.mopt{padding:10px 22px;border:1px solid var(--bdr);border-radius:9px;background:var(--surf);
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.88rem;cursor:pointer;transition:all .16s;letter-spacing:.04em;}
.mopt:hover{border-color:var(--gold);color:var(--gold);}
.mopt.on{background:rgba(201,168,76,.12);border-color:var(--gold);color:var(--gold-l);font-weight:600;}
.mopt.de.on{background:rgba(76,175,130,.1);border-color:var(--hi);color:var(--hi);}
.mopt.dm.on{background:rgba(240,201,107,.1);border-color:var(--gold);color:var(--gold-l);}
.mopt.dh.on{background:rgba(224,90,90,.1);border-color:var(--lo);color:var(--lo);}
.diff-note{font-size:.68rem;color:var(--muted);text-align:center;margin-top:7px;min-height:16px;letter-spacing:.05em;}
.pool-note{font-size:.62rem;color:var(--muted);text-align:center;margin-top:6px;font-style:italic;}
.menu-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn-play{padding:15px 52px;background:linear-gradient(135deg,var(--gold),var(--gold-l));
  color:var(--dark);border:none;border-radius:12px;font-family:'Bebas Neue',sans-serif;
  font-size:1.55rem;letter-spacing:.14em;cursor:pointer;
  box-shadow:0 4px 22px rgba(201,168,76,.32);transition:transform .14s,box-shadow .14s;}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 8px 34px rgba(201,168,76,.5);}
.btn-study{padding:15px 36px;background:var(--surf);color:var(--muted);border:1px solid var(--bdr);
  border-radius:12px;font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.14em;cursor:pointer;transition:all .16s;}
.btn-study:hover{border-color:var(--gold);color:var(--gold-l);}
/* Study */
#study{display:none;flex-direction:column;align-items:center;width:100%;padding-bottom:60px;}
.study-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 0 18px;}
.study-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.07em;color:var(--gold-l);}
.study-back{padding:8px 20px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.82rem;cursor:pointer;transition:all .16s;}
.study-back:hover{border-color:var(--gold);color:var(--gold);}
.study-filters{display:flex;gap:18px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-end;width:100%;}
.sf-group{display:flex;flex-direction:column;gap:6px;}
.sf-lbl{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.sf-opts{display:flex;gap:6px;flex-wrap:wrap;}
.stab{padding:6px 14px;border:1px solid var(--bdr);border-radius:8px;background:var(--surf);
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.78rem;cursor:pointer;transition:all .16s;white-space:nowrap;}
.stab:hover{border-color:var(--gold);color:var(--gold);}
.stab.on{background:rgba(201,168,76,.12);border-color:var(--gold);color:var(--gold-l);font-weight:600;}
.study-count{font-size:.62rem;color:var(--muted);letter-spacing:.06em;margin-bottom:12px;width:100%;}
.map-wrap{width:100%;background:#0b0b14;border:1px solid var(--bdr);border-radius:14px;
  overflow:hidden;margin-bottom:20px;position:relative;}
#mapSvg{width:100%;height:340px;display:block;background:#0b0b14;cursor:grab;}
#mapSvg:active{cursor:grabbing;}
.map-reset{position:absolute;top:8px;right:10px;z-index:10;padding:4px 10px;background:rgba(14,14,22,.85);border:1px solid var(--bdr);border-radius:6px;color:var(--muted);font-size:.6rem;letter-spacing:.1em;cursor:pointer;transition:color .15s,border-color .15s;}
.map-reset:hover{color:var(--gold);border-color:var(--gold);}
.map-tip{position:absolute;pointer-events:none;z-index:20;
  background:rgba(12,12,20,.97);border:1px solid rgba(201,168,76,.6);
  border-radius:10px;padding:9px 14px;gap:10px;display:flex;align-items:center;
  opacity:0;transition:opacity .1s;white-space:nowrap;top:0;left:0;}
.map-tip.show{opacity:1;}
.tip-flag{width:38px;height:25px;border-radius:3px;overflow:hidden;background:#222;flex-shrink:0;}
.tip-flag img{width:100%;height:100%;object-fit:cover;display:block;}
.tip-name{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.05em;color:var(--text);}
.tip-val{font-size:.72rem;color:var(--gold-l);font-weight:600;margin-top:1px;}
.tip-val2{font-size:.62rem;color:var(--muted);margin-top:2px;}
/* 5-column grid */
.study-grid{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.sc{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;
  padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:border-color .2s,transform .15s;}
.sc:hover{border-color:rgba(201,168,76,.4);transform:translateY(-2px);}
.sc-rank{font-size:.52rem;letter-spacing:.15em;color:var(--muted);align-self:flex-start;padding-left:2px;}
.sc-flag{width:56px;height:37px;border-radius:5px;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.5);background:var(--surf2);}
.sc-flag img{width:100%;height:100%;object-fit:cover;display:block;}
.sc-name{font-family:'Bebas Neue',sans-serif;font-size:.85rem;text-align:center;line-height:1.1;margin-top:2px;}
.sc-vals{display:flex;flex-direction:column;gap:3px;align-items:center;width:100%;}
.sc-vp{display:flex;flex-direction:column;align-items:center;}
.sc-v{font-size:.68rem;color:var(--gold-l);font-weight:600;}
.sc-vl{font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.sc-reg{font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid rgba(201,168,76,.2);border-radius:4px;padding:2px 4px;margin-top:2px;}
@media(max-width:900px){.study-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:680px){.study-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:460px){.study-grid{grid-template-columns:repeat(2,1fr);}}
/* Game */
#game{display:none;flex-direction:column;align-items:center;width:100%;}
.g-inst{font-size:.68rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:18px;text-align:center;}
.g-tags{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap;justify-content:center;}
.gtag{padding:3px 9px;border-radius:20px;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--bdr);color:var(--muted);}
.gtag.te{border-color:var(--hi);color:var(--hi);}
.gtag.tm{border-color:var(--gold);color:var(--gold);}
.gtag.th{border-color:var(--lo);color:var(--lo);}
.gtag.tr{border-color:rgba(201,168,76,.5);color:var(--gold);}
.grid{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:22px;min-height:450px;}
.card{background:var(--surf);border:1px solid var(--bdr);border-radius:18px;
  padding:28px 24px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;overflow:hidden;transition:border-color .35s,box-shadow .35s;}
.card::after{content:'';position:absolute;inset:0;border-radius:18px;opacity:0;transition:opacity .35s;pointer-events:none;}
.card.ok{border-color:var(--hi);box-shadow:0 0 28px rgba(76,175,130,.13);}
.card.ok::after{background:rgba(76,175,130,.06);opacity:1;}
.card.no{border-color:var(--lo);box-shadow:0 0 28px rgba(224,90,90,.13);}
.card.no::after{background:rgba(224,90,90,.06);opacity:1;}
.flag-wrap{width:124px;height:83px;border-radius:9px;overflow:hidden;
  box-shadow:0 5px 18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05);background:var(--surf2);}
.flag-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.c-name{font-family:'Bebas Neue',sans-serif;font-size:1.75rem;letter-spacing:.04em;text-align:center;line-height:1.1;}
.c-lbl{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.c-cap{font-family:'Bebas Neue',sans-serif;font-size:1.95rem;color:var(--gold-l);letter-spacing:.05em;text-align:center;}
.c-cap.q{font-size:2.4rem;color:var(--muted);font-family:'DM Sans',sans-serif;font-weight:300;}
.btnrow{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:3px;}
.bh,.bl{width:100%;padding:11px 12px;border:none;border-radius:9px;
  font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.13em;cursor:pointer;
  transition:transform .13s,box-shadow .13s,opacity .18s;}
.bh{background:linear-gradient(135deg,#2a6e48,#4CAF82);color:#fff;box-shadow:0 3px 14px rgba(76,175,130,.28);}
.bl{background:linear-gradient(135deg,#7a2020,#E05A5A);color:#fff;box-shadow:0 3px 14px rgba(224,90,90,.28);}
.bh:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(76,175,130,.42);}
.bl:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(224,90,90,.42);}
.bh:disabled,.bl:disabled{opacity:.3;cursor:not-allowed;transform:none!important;box-shadow:none;}
.vs-col{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 18px;}
.vs-t{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--muted);}
.vl{width:1px;height:55px;background:linear-gradient(to bottom,transparent,var(--bdr),transparent);}
.feedback{height:40px;display:flex;align-items:center;justify-content:center;margin-top:16px;}
.fb{font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.07em;
  opacity:0;transform:translateY(7px);transition:opacity .22s,transform .22s;}
.fb.on{opacity:1;transform:none;}.fb.c{color:var(--hi);}.fb.w{color:var(--lo);}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:360px;margin-top:12px;min-height:16px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr);transition:background .25s,transform .18s;}
.dot.c{background:var(--hi);border-color:var(--hi);transform:scale(1.25);}
.dot.w{background:var(--lo);border-color:var(--lo);}
.kbhint{display:flex;gap:9px;margin-top:9px;margin-bottom:4px;}
.kk{padding:2px 8px;border:1px solid var(--bdr);border-radius:4px;font-size:.6rem;color:var(--muted);}
.dnote{font-size:.58rem;color:var(--muted);text-align:center;margin-bottom:18px;}
#go{display:none;flex-direction:column;align-items:center;gap:14px;
  padding:44px 38px;background:var(--surf);border:1px solid var(--bdr);
  border-radius:22px;text-align:center;max-width:400px;width:100%;margin:44px 0;}
#go.on{display:flex;animation:fadeUp .35s ease forwards;}
.go-t{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:var(--lo);}
.go-s{font-family:'Bebas Neue',sans-serif;font-size:4.8rem;color:var(--gold-l);line-height:1;}
.go-l{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.go-nb{color:var(--gold);font-size:.84rem;display:none;}
.go-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.btn-menu2,.btn-again{padding:12px 28px;border:none;border-radius:10px;
  font-family:'Bebas Neue',sans-serif;font-size:1.28rem;letter-spacing:.11em;cursor:pointer;transition:transform .13s;}
.btn-again{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--dark);box-shadow:0 4px 18px rgba(201,168,76,.32);}
.btn-menu2{background:var(--surf2);color:var(--muted);border:1px solid var(--bdr);}
.btn-again:hover{transform:translateY(-2px);}
.btn-menu2:hover{color:var(--text);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;gap:11px;}
  .vs-col{flex-direction:row;padding:0;}
  .vl{width:50px;height:1px;background:linear-gradient(to right,transparent,var(--bdr),transparent);}
  .c-name{font-size:1.4rem;}
}