:root{ --bg:#10140f; --panel:#171d16; --ink:#e7ecdd; --dim:#bcc6ad; --gold:#e7c86b; --green:#7cae4a; --red:#c9503a; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; background:var(--bg); color:var(--ink);
    font-family:"Courier New",monospace; letter-spacing:.03em; overflow:hidden; }
  #shell{ position:relative; width:960px; max-width:100vw; margin:0 auto; }
  canvas{ display:block; width:100%; height:auto; image-rendering:pixelated;
    background:#3f6b34; border-bottom:2px solid #0b0e0a; }
  #hud{ position:absolute; top:0; left:0; right:0; height:46px; display:flex; align-items:center;
    gap:13px; padding:0 12px; background:#0c100b; border-bottom:2px solid #202a1c;
    font-size:12px; text-transform:uppercase; }
  #hud b{ color:var(--gold); }
  #hud .sep{ flex:1; }
  #hud .warn{ color:var(--red); }
  .screen{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center;
    justify-content:center; gap:14px; background:rgba(8,10,7,.9); text-align:center; padding:24px; }
  .screen.on{ display:flex; }
  h1{ font-size:30px; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; }
  h2{ font-size:22px; text-transform:uppercase; letter-spacing:.1em; }
  p{ color:var(--dim); max-width:540px; line-height:1.5; font-size:14px; }
  .row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  button{ font-family:inherit; font-size:14px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink); background:#243019; border:2px solid #3c5127; padding:11px 18px; cursor:pointer; border-radius:2px; }
  button:hover{ background:#2f3f20; border-color:var(--green); }
  button.primary{ background:#3c5127; border-color:var(--green); color:#fff; }
  button:disabled{ opacity:.4; cursor:not-allowed; }
  .stars{ font-size:34px; color:var(--gold); letter-spacing:.1em; }
  .coins{ color:var(--gold); font-size:18px; }
  .shopGroup{ display:flex; flex-direction:column; gap:8px; }
  .shopGroup h4{ font-size:13px; color:var(--green); text-transform:uppercase; letter-spacing:.08em; }
  .card{ background:var(--panel); border:2px solid #2a361f; padding:12px 14px; border-radius:3px; min-width:190px; }
  .card h3{ font-size:13px; color:var(--gold); margin-bottom:5px; text-transform:uppercase; }
  .card small{ color:var(--dim); display:block; margin-bottom:9px; font-size:11px; }
  .hint{ font-size:12px; color:var(--dim); }
  #version{ position:absolute; left:10px; bottom:8px; z-index:30; pointer-events:none;
    font-size:11px; letter-spacing:.06em; color:var(--dim); opacity:.55; }
  .waitlist{ display:inline-block; margin-top:4px; font-size:13px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--gold); text-decoration:none; background:#243019;
    border:2px solid #3c5127; padding:10px 16px; border-radius:2px; }
  .waitlist:hover{ background:#2f3f20; border-color:var(--green); }
  #result{ background:rgba(8,10,7,.62); }
  #result h2,#result p,#result .stars,#result .coins{ text-shadow:0 2px 6px #000,0 0 3px #000; }
