:root{
  --u:1px;
  --bg0:#071a14;
  --bg1:#0d2e24;
  --gold:#f0c94a;
  --ink:#e8f5ef;
  --muted:rgba(232,245,239,.62);
  --f:"Arial Black",Impact,"Helvetica Neue",Arial,sans-serif;
  --b:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#04110c;overflow:hidden;color:var(--ink);font-family:var(--b)}
button{font-family:var(--f);color:var(--ink);cursor:pointer;touch-action:manipulation;border:0;background:none}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#03140d}
#frame{
  position:relative;overflow:hidden;font-size:calc(var(--u)*14);
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%,rgba(240,201,74,.18),transparent 55%),
    radial-gradient(ellipse 80% 60% at 80% 110%,rgba(12,90,60,.45),transparent 50%),
    linear-gradient(165deg,var(--bg1),var(--bg0) 55%,#051510);
}
#frame::before{
  content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background:repeating-linear-gradient(-18deg,transparent 0 11px,rgba(255,255,255,.35) 11px 12px);
}
.ui{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--u)*16) calc(var(--u)*14) calc(var(--u)*18);z-index:2;overflow:auto}
.brand{flex:none;text-align:center;padding-top:calc(var(--u)*4);margin-bottom:calc(var(--u)*8)}
.brand h1{
  margin:0;font-family:var(--f);font-size:calc(var(--u)*30);letter-spacing:.04em;line-height:1.05;
  color:var(--gold);text-shadow:0 calc(var(--u)*3) 0 rgba(0,0,0,.55);
}
.brand p{margin:calc(var(--u)*6) 0 0;font-size:calc(var(--u)*11);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.flag{display:flex;justify-content:center;gap:calc(var(--u)*4);margin-top:calc(var(--u)*8)}
.flag i{display:block;width:calc(var(--u)*24);height:calc(var(--u)*7);border-radius:calc(var(--u)*2)}
.flag i:nth-child(1),.flag i:nth-child(3){background:#008751}
.flag i:nth-child(2){background:#fff}
.status{text-align:center;font-size:calc(var(--u)*10);color:var(--muted);min-height:calc(var(--u)*14);margin-bottom:calc(var(--u)*10)}
.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10);
  flex:1;min-height:0;align-content:start;
}
.tile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:calc(var(--u)*8);padding:calc(var(--u)*14) calc(var(--u)*10) calc(var(--u)*12);
  border:calc(var(--u)*2) solid rgba(255,255,255,.16);
  border-radius:calc(var(--u)*16);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(0,0,0,.28));
  box-shadow:0 calc(var(--u)*4) 0 rgba(0,0,0,.35);
  text-align:center;min-height:calc(var(--u)*168);
  transition:transform .12s,border-color .12s;
}
.tile:active{transform:translateY(calc(var(--u)*2))}
.tile.locked{opacity:.88;border-color:rgba(255,255,255,.1);filter:saturate(.75)}
.tile.soon{
  opacity:.45;filter:grayscale(.85) brightness(.85);
  border-color:rgba(255,255,255,.08);pointer-events:none;cursor:default;
  box-shadow:none;
}
.tile.soon .cta{
  background:linear-gradient(#3a3f3c,#222826);color:rgba(232,245,239,.55);
  border-color:rgba(255,255,255,.12);box-shadow:none;letter-spacing:.08em;
}
.tile.soon:active{transform:none}
.tile .ico{
  width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:calc(var(--u)*18);
  display:grid;place-items:center;
  box-shadow:inset 0 calc(var(--u)*-3) 0 rgba(0,0,0,.25),0 calc(var(--u)*3) calc(var(--u)*8) rgba(0,0,0,.35);
}
.tile .ico svg{width:calc(var(--u)*38);height:calc(var(--u)*38);display:block}
.tile .t{font-family:var(--f);font-size:calc(var(--u)*13);letter-spacing:.02em;line-height:1.15;max-width:100%}
.tile .d{font-size:calc(var(--u)*9);color:var(--muted);letter-spacing:.05em;text-transform:uppercase;line-height:1.3;min-height:calc(var(--u)*24)}
.tile .cta{
  margin-top:auto;width:100%;
  border-radius:calc(var(--u)*9);padding:calc(var(--u)*8) calc(var(--u)*6);
  font-size:calc(var(--u)*11);letter-spacing:.05em;min-height:calc(var(--u)*34);
  background:linear-gradient(#f7d25f,#d9a41a);color:#2a1c00;border:calc(var(--u)*2) solid #fff3b8;
  box-shadow:0 calc(var(--u)*2) 0 #000;
}
.tile.locked .cta{background:linear-gradient(#3a4540,#1c2420);color:var(--ink);border-color:rgba(255,255,255,.22)}
.tile .lock{
  position:absolute;top:calc(var(--u)*8);right:calc(var(--u)*8);
  width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;
  background:rgba(0,0,0,.45);display:grid;place-items:center;
}
.tile .lock svg{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.ico.whot{background:linear-gradient(145deg,#1a8f5a,#0b4a30)}
.ico.ludo{background:linear-gradient(145deg,#c43c3c,#6e1a1a)}
.ico.fighter{background:linear-gradient(145deg,#e08a2a,#7a3a0c)}
.ico.football{background:linear-gradient(145deg,#2a7ad4,#0d3a6e)}
.ico.shooter{background:linear-gradient(145deg,#5a5f6e,#22252e)}
.ico.racing{background:linear-gradient(145deg,#d4a017,#6e4a08)}
.btn{
  background:linear-gradient(#243028,#121a16);border:calc(var(--u)*2) solid rgba(255,255,255,.28);
  border-radius:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*14);
  font-size:calc(var(--u)*12);letter-spacing:.06em;min-height:calc(var(--u)*40);
  box-shadow:0 calc(var(--u)*3) 0 #000;white-space:nowrap;
}
.btn:active{transform:translateY(calc(var(--u)*2));box-shadow:0 calc(var(--u)*1) 0 #000}
.btn.ghost{opacity:.85;width:100%}
.foot{flex:none;margin-top:calc(var(--u)*12);text-align:center;font-size:calc(var(--u)*10);color:var(--muted);line-height:1.45}
.lbl{font-family:var(--f);font-size:calc(var(--u)*14);letter-spacing:.08em;text-align:center}
.err{color:#ff8f7a;font-size:calc(var(--u)*11);text-align:center;margin-top:calc(var(--u)*6)}