:root{
  --ink:#e8e4d8;
  --dim:#9a94a8;
  --accent:#f2a441;
  --card:#1c1730;
  --line:rgba(232,228,216,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#141020;font-family:"Courier New",ui-monospace,monospace;}
/* keep the OS cursor visible on desktop: hiding it meant the pointer got
   lost the moment it left the window. crosshair suits the aiming. */
#game{display:block;width:100vw;height:100vh;cursor:crosshair;touch-action:none;}
button{font-family:inherit}

/* ---------- in-run HUD ---------- */
.hud{position:fixed;left:16px;top:14px;color:var(--ink);pointer-events:none;user-select:none;
     text-shadow:0 2px 6px rgba(0,0,0,.6);line-height:1.5}
.hud .h{font-size:30px;font-weight:bold;letter-spacing:1px}
.hud .b{font-size:13px;color:var(--dim)}
#runBtns{position:fixed;right:16px;top:14px;display:flex;gap:8px}
#runBtns button{background:rgba(20,16,32,.55);color:var(--ink);
     border:1px solid rgba(232,228,216,.35);padding:8px 14px;font-size:13px;
     letter-spacing:1px;cursor:pointer;border-radius:4px}
#runBtns button:hover{border-color:var(--accent);color:var(--accent)}
#hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:var(--dim);
     font-size:13px;letter-spacing:.5px;pointer-events:none;user-select:none;
     text-shadow:0 2px 6px rgba(0,0,0,.6);transition:opacity 1.2s;text-align:center}

/* ---------- overlay screens ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
     background:rgba(10,8,18,.78);z-index:10;overflow-y:auto;cursor:default}
.screen.hidden{display:none}
.card{width:min(480px,92vw);color:var(--ink);text-align:center;padding:30px 26px;
     background:var(--card);border:1px solid var(--line);border-radius:10px;
     box-shadow:0 12px 40px rgba(0,0,0,.5);margin:24px 0}
.card h1{font-size:26px;letter-spacing:2px;margin-bottom:6px;color:var(--accent)}
.card .tagline{font-size:13px;color:var(--dim);margin-bottom:22px}
.card h2{font-size:20px;letter-spacing:2px;margin-bottom:14px;color:var(--accent)}

/* menu: level select */
.level-card{display:block;width:100%;text-align:left;background:rgba(232,228,216,.05);
     border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:12px;
     color:var(--ink);cursor:pointer;transition:border-color .15s, background .15s}
.level-card:hover{border-color:var(--accent);background:rgba(242,164,65,.08)}
.level-card .lv-name{font-size:16px;font-weight:bold;letter-spacing:1px}
.level-card .lv-blurb{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.5}
.level-card .lv-best{font-size:12px;color:var(--accent);margin-top:6px}

.menu-row{display:flex;gap:10px;justify-content:center;margin-top:18px}
.btn{background:none;border:1px solid rgba(232,228,216,.35);color:var(--ink);
     padding:9px 18px;font-size:13px;letter-spacing:1px;cursor:pointer;border-radius:4px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}

.controls-line{font-size:12px;color:var(--dim);margin-top:20px;line-height:1.6}
.credit{font-size:11px;color:var(--dim);opacity:.65;margin-top:22px;line-height:1.5}

/* leaderboard */
#board-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
#board-tabs button{background:none;border:1px solid var(--line);color:var(--dim);
     padding:7px 14px;font-size:12px;letter-spacing:1px;cursor:pointer;border-radius:4px}
#board-tabs button.active{border-color:var(--accent);color:var(--accent)}
.board-row{display:flex;gap:10px;padding:7px 10px;font-size:14px;text-align:left;
     border-bottom:1px solid rgba(232,228,216,.08)}
.board-row.me{color:var(--accent)}
.br-rank{width:26px;color:var(--dim);flex:none}
.board-row.me .br-rank{color:var(--accent)}
.br-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-time{flex:none}
.board-empty{color:var(--dim);font-size:13px;padding:18px 0}

/* win overlay */
#win-time{font-size:40px;letter-spacing:2px;margin:6px 0 2px}
#win-newbest{color:var(--accent);font-size:14px;min-height:20px;margin-bottom:10px}
.submit-row{display:flex;gap:8px;justify-content:center;margin:12px 0}
.submit-row input{background:rgba(232,228,216,.07);border:1px solid var(--line);
     color:var(--ink);padding:9px 12px;font-family:inherit;font-size:14px;border-radius:4px;
     width:170px}
.submit-row input:focus{outline:none;border-color:var(--accent)}
#submit-result{font-size:13px;color:var(--accent);min-height:18px;margin-bottom:6px}
.hidden{display:none !important}