/* Coinfall — hub-style skin: a stone hall at night. Parchment text, one gold.
   Fluid layout: the frame the hub gives us decides our size, never the reverse. */
:root{
  --bg:#0d0906; --panel:#1a110a; --line:#3a2a18;
  --ink:#e8d9b0; --dim:#a08a6a; --gold:#d9a441; --gold-hi:#f2c14e; --danger:#c0392b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; align-items:flex-start; justify-content:center;
}
#wrap{position:relative; width:min(96vw,480px); margin-top:8px}
#hud{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:14px;
}
#hud #grok{margin-left:auto; color:var(--gold-hi)}
#conn{color:#8fd06a; font-size:12px}
#lives{color:var(--danger); letter-spacing:2px}
canvas{
  display:block; width:100%; height:auto; margin-top:8px;
  background:radial-gradient(600px 300px at 50% -60px,#241708 0%,var(--bg) 60%);
  border:1px solid var(--line); border-radius:10px; touch-action:none;
}
#overlay{
  position:absolute; inset:52px 0 0 0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  background:rgba(13,9,6,.82); border-radius:10px;
}
#overlay h1{font-family:Georgia,"Times New Roman",serif; color:var(--gold-hi); margin:0 0 8px}
#overlay p{max-width:340px; line-height:1.45}
.dim{color:var(--dim); font-size:13px}
button{
  background:var(--gold); color:#1a110a; border:0; border-radius:8px;
  padding:10px 26px; font-size:16px; font-weight:700; cursor:pointer;
}
button:hover{background:var(--gold-hi)}