* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0b0e14; color: #eef2f7;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; touch-action: none; display: block; }
.hidden { display: none !important; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#topbar {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    gap: 8px;
}
#scorebar {
    display: flex; gap: 12px; padding: 5px 14px; border-radius: 999px;
    background: rgba(10, 14, 20, 0.72); border: 1px solid rgba(255,255,255,.18);
    font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}
#sb-score { color: #ffd43b; }
#fuel {
    position: fixed;
    top: calc(48px + env(safe-area-inset-top, 0px));
    left: 50%; transform: translateX(-50%);
    width: 120px; height: 6px; border-radius: 4px; overflow: hidden;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.15);
}
#fuel i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #4dabf7, #74c0fc); transition: width .15s linear; }
#btn-boost {
    position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
    width: 76px; height: 76px; border-radius: 50%; pointer-events: auto; touch-action: none;
    border: 2px solid rgba(255,255,255,.5); background: rgba(25,119,187,.78); color: #fff;
    font: 900 12px system-ui; letter-spacing: .08em; box-shadow: 0 6px 22px rgba(0,0,0,.4);
}
#btn-boost.active { transform: scale(.94); background: #228be6; box-shadow: 0 0 24px rgba(77,171,247,.65); }
@media (pointer:fine) { #btn-boost { display:none; } }
#ranks {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    display: grid; gap: 3px;
    font-size: 11px; font-weight: 700;
}
#ranks .rank { padding: 3px 9px; border-radius: 999px; background: rgba(10,14,20,.6); color: rgba(238,242,247,.8); }
#ranks .rank.me { color: #ffd43b; border: 1px solid rgba(255,212,59,.4); }
@media (max-width: 600px) {
    #topbar { top: calc(7px + env(safe-area-inset-top, 0px)); left: auto; right: max(9px, env(safe-area-inset-right, 0px)); transform: none; }
    #scorebar { gap: 9px; padding: 5px 11px; font-size: 13px; }
    #fuel { top: calc(42px + env(safe-area-inset-top, 0px)); left: auto; right: max(10px, env(safe-area-inset-right, 0px)); transform: none; width: 105px; }
    #ranks { top: calc(7px + env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px)); font-size: 10px; }
    #ranks .rank { padding: 3px 7px; }
}

/* ---- death banner ---- */
#death {
    position: fixed; top: 30%; left: 0; right: 0; z-index: 6; text-align: center; pointer-events: none;
}
#death b { display: block; font-size: 24px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
#death small { display: block; margin-top: 6px; font-size: 13px; opacity: .85; text-shadow: 0 1px 5px rgba(0,0,0,.8); }

/* ---- overlays ---- */
#menu, #board {
    position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 25%, rgba(77,171,247,.12), transparent 42%), rgba(8,10,15,.86);
    overflow-y: auto; touch-action: pan-y;
}
.card { width: min(360px, 90vw); margin: auto; text-align: center; padding: 26px 0; }
.card h1 { font-size: 36px; letter-spacing: 1px; }
.card h2 { font-size: 28px; letter-spacing: 1px; }
.card .tag { opacity: .8; margin: 8px 0 18px; font-size: 14px; }
.hint { margin: 0 0 12px; color: #9aa4b2; font-size: 12.5px; }
.card > button, .actions button {
    display: block; width: 100%; margin: 12px 0 0; padding: 14px; font-size: 17px; font-weight: 700;
    color: #10141c; background: #4dabf7; border: 0; border-radius: 12px; cursor: pointer;
}
.card > button:disabled { opacity: .5; }
.actions button.sec { background: rgba(255,255,255,.14); color: #eef2f7; }

#howto { margin-top: 20px; font-size: 12.5px; line-height: 1.65; opacity: .7; text-align: left; }

/* End board rows */
#board-rows { margin-top: 6px; }
.brow { display: grid; grid-template-columns: 30px 1fr auto 52px; gap: 8px; align-items: center;
    padding: 9px 4px; border-top: 1px solid rgba(255,255,255,.1); text-align: left; font-size: 13.5px; }
.brow em { font-style: normal; color: #9aa4b2; font-size: 11px; }
.brow b:last-child { color: #ffd43b; text-align: right; }
.brow.me { background: rgba(255,212,59,.08); border-radius: 8px; }