:root{
  --accent:#f7931a; --accent-d:#c56f0a; --pixel:'Press Start 2P',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#000;overflow:hidden}
body{font-family:var(--pixel);color:#dbe6ff}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;cursor:grab;touch-action:none}
canvas#game:active{cursor:grabbing}

/* ---------- HUD: centered pre-reveal, docked top after ---------- */
#hud{position:fixed;left:0;right:0;z-index:10;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;
  top:50%;transform:translateY(-50%);transition:top .6s steps(12),transform .6s steps(12),opacity .6s ease}
body.awake #hud{top:10px;transform:none;flex-direction:row;justify-content:center;gap:12px}
body.cine #hud{opacity:.15}
#hud>*{pointer-events:auto}

#btnDonate{font-family:var(--pixel);cursor:pointer;color:#000;background:var(--accent);
  border:4px solid #000;box-shadow:6px 6px 0 #000,0 0 34px #f7931a66;
  font-size:22px;padding:26px 54px;transition:font-size .3s steps(6),padding .3s steps(6)}
#btnDonate:hover{background:#ffab2e}
#btnDonate:active{transform:translate(3px,3px);box-shadow:3px 3px 0 #000}
#btnDonateSol{font-family:var(--pixel);cursor:pointer;color:#000;background:#14f195;
  border:4px solid #000;box-shadow:6px 6px 0 #000,0 0 34px #14f19566;
  font-size:22px;padding:26px 54px;transition:font-size .3s steps(6),padding .3s steps(6)}
#btnDonateSol:hover{background:#5ff5b0}
#btnDonateSol:active{transform:translate(3px,3px);box-shadow:3px 3px 0 #000}
body.awake #btnDonate,body.awake #btnDonateSol{font-size:11px;padding:10px 18px;box-shadow:3px 3px 0 #000}

.next-wrap{width:min(420px,80vw);text-align:center}
body.awake .next-wrap{width:min(320px,52vw)}
.next-track{height:12px;background:#060a15;border:2px solid #233257}
body.awake .next-track{height:9px}
#progressFill{height:100%;width:0%;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,var(--accent-d) 8px 16px);transition:width .8s steps(20)}
#nextHint{margin-top:6px;font-size:9px;color:#8b9bb4;text-shadow:2px 2px 0 #000}
body.awake #nextHint{font-size:8px}

/* ---------- donate modal ---------- */
#donateModal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72)}
#donateModal.hidden{display:none}
.modal-box{background:#0e1526;border:3px solid #233257;box-shadow:6px 6px 0 #000;padding:14px;display:flex;flex-direction:column;gap:10px;width:min(340px,88vw)}
/* ---------- pay modal: BTC | SOL tabs, QR, address, status ---------- */
#coinTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#coinTabs button{font-family:var(--pixel);font-size:10px;padding:12px 0;background:#1a2547;color:#dbe6ff;border:2px solid #233257;cursor:pointer}
#coinTabs button.sel{background:var(--accent);color:#000;border-color:#000}
#destTabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#destTabs button{font-family:var(--pixel);font-size:9px;padding:8px 0;background:#1a2547;color:#dbe6ff;border:2px solid #233257;cursor:pointer}
#destTabs button.sel{background:var(--accent);color:#000;border-color:#000}
#payQR{width:220px;height:220px;max-width:64vw;max-height:64vw;margin:2px auto;display:block;border:3px solid #000;background:#fff}
#payAddrRow{display:flex;gap:6px;align-items:stretch}
#payAddr{flex:1;background:#060a15;border:2px solid #233257;color:#7efab0;font-family:monospace;font-size:10px;padding:8px;overflow-wrap:anywhere;min-width:0}
#btnCopy{font-family:var(--pixel);font-size:9px;background:#1a2547;color:#dbe6ff;border:2px solid #233257;padding:8px 10px;cursor:pointer}
#payStatus{color:#8b9bb4;font-size:8px;text-align:center;line-height:1.7;min-height:14px}
.modal-row{display:flex;gap:8px}
#btnRefresh{flex:1;font-family:var(--pixel);font-size:9px;background:#1a2547;color:#dbe6ff;border:2px solid #233257;padding:12px;cursor:pointer}
#btnCancel{font-family:var(--pixel);font-size:10px;background:#1a2547;color:#dbe6ff;border:2px solid #233257;padding:12px;cursor:pointer}

/* ---------- cinematic transition: letterbox + fade ---------- */
#cineTop,#cineBot{position:fixed;left:0;right:0;height:0;background:#000;z-index:15;transition:height .7s ease}
#cineTop{top:0}
#cineBot{bottom:0}
body.cine #cineTop,body.cine #cineBot{height:11vh}
#cineFade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .6s ease;z-index:14}

/* ---------- explore hint: only after first reveal, gone on first scroll ---------- */
#scrollHint{position:fixed;right:12px;bottom:12px;z-index:10;font-size:8px;color:#8b9bb4;background:rgba(0,0,0,.55);border:1px solid #233257;padding:6px 8px;opacity:0;transition:opacity .8s ease;pointer-events:none}
body.awake #scrollHint{opacity:1}
body.awake #scrollHint.gone{opacity:0}