:root{
  --bg:#08070a;
  --card:#16121a;
  --line:rgba(255,255,255,.1);
  --text:#f6f3ee;
  --muted:#a39b92;
  --gold:#e0b45a;
  --accent:#ff6a3d;
  --green:#2dff9a;
  --font:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(800px 400px at 80% 0%,rgba(224,180,90,.12),transparent 55%),
    radial-gradient(600px 360px at 10% 90%,rgba(255,106,61,.08),transparent 50%),
    var(--bg);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);
}
.logo{font-weight:700;letter-spacing:.04em}
.logo span{color:var(--gold)}
.meta{
  display:flex;
  gap:1rem;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.8rem;
}
main{width:min(960px,calc(100% - 1.5rem));margin:1.25rem auto 2rem}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.25rem;
}
h1{margin:.2rem 0 .4rem;font-size:clamp(1.8rem,4vw,2.4rem)}
.sub{color:var(--muted);margin:0 0 1rem}
.sub strong{color:var(--gold);font-weight:600}
.hud{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.6rem;
  margin-bottom:.9rem;
}
.hud div{
  background:#0c0a0f;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.7rem;
}
.hud label{
  display:block;
  color:var(--muted);
  font-size:.75rem;
  font-family:var(--mono);
}
.hud strong{font-size:1.2rem}
#game{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  border:1px solid var(--line);
  background:#0b0a0d;
  touch-action:none;
  image-rendering:pixelated;
}
.hint{color:var(--muted);font-size:.9rem}
.controls{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.btn{
  border:0;
  border-radius:999px;
  padding:.8rem 1.15rem;
  background:linear-gradient(135deg,var(--gold),#f0c97a);
  color:#1a1208;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
}
.btn:disabled{
  opacity:.75;
  cursor:default;
  filter:saturate(.85);
}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
}
.unlock{
  margin-top:1rem;
  border:1px solid rgba(224,180,90,.55);
  box-shadow:
    0 0 0 1px rgba(255,106,61,.18),
    0 0 36px rgba(224,180,90,.18),
    0 18px 50px rgba(0,0,0,.35);
  background:
    radial-gradient(520px 160px at 20% 0%,rgba(224,180,90,.16),transparent 60%),
    radial-gradient(420px 140px at 90% 100%,rgba(255,106,61,.1),transparent 55%),
    var(--card);
}
.unlock h2{margin:.2rem 0 .35rem;color:var(--gold)}
.unlock > p{color:var(--muted);margin:0}
#walletForm{display:grid;gap:.6rem;margin-top:.8rem}
#walletForm input{
  border:1px solid var(--line);
  background:#0c0a0f;
  color:var(--text);
  border-radius:12px;
  padding:.85rem 1rem;
  font:inherit;
}
#walletForm input:focus{
  outline:none;
  border-color:rgba(224,180,90,.55);
  box-shadow:0 0 0 3px rgba(224,180,90,.12);
}
.note{color:var(--green);margin:.75rem 0 0}
.note.error{color:#ff6b6b}
@media(max-width:640px){
  .hud{grid-template-columns:repeat(2,1fr)}
  .meta span:first-child{display:none}
}