: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);}
#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:500px;}
.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;}
.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);}
.menu-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.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{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;letter-spacing:.04em;}
.study-back:hover{border-color:var(--gold);color:var(--gold);}
.study-tabs{display:flex;gap:8px;margin-bottom:24px;}
.stab{padding:7px 18px;border:1px solid var(--bdr);border-radius:8px;background:var(--surf);
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.8rem;cursor:pointer;
  transition:all .16s;letter-spacing:.04em;}
.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-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:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color .2s,transform .15s;}
.sc:hover{border-color:rgba(201,168,76,.4);transform:translateY(-2px);}
.sc-rank{font-size:.55rem;letter-spacing:.15em;color:var(--muted);align-self:flex-start;padding-left:2px;}
.sc-flag{width:64px;height:43px;border-radius:5px;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.5);background:var(--surf2);flex-shrink:0;}
.sc-flag img{width:100%;height:100%;object-fit:cover;display:block;}
.sc-name{font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:.03em;
  text-align:center;line-height:1.1;color:var(--text);}
.sc-val{font-size:.72rem;color:var(--gold-l);font-weight:600;letter-spacing:.03em;}
@media(max-width:700px){.study-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:460px){.study-grid{grid-template-columns:repeat(2,1fr);}}
#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;}
.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);}
.grid{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  margin-top:22px;min-height:450px;gap:0;}
.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);flex-shrink:0;}
.flag-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.c-country{font-size:.6rem;color:var(--muted);letter-spacing:.09em;}
.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;letter-spacing:.1em;color:var(--muted);}
.dnote{font-size:.58rem;color:var(--muted);letter-spacing:.07em;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);letter-spacing:.06em;}
.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;letter-spacing:.09em;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,box-shadow .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);box-shadow:0 8px 28px rgba(201,168,76,.5);}
.btn-menu2:hover{color:var(--text);border-color:var(--muted);}
@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;}
}