html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #0b1020;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

#app {
    position: fixed;
    inset: 0;
}

/* boot splash shown until Blazor mounts */
.boot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: radial-gradient(circle at 50% 35%, #2a3a6b, #0b1020 70%);
}
.boot-title { font-size: 3rem; font-weight: 900; letter-spacing: 2px; }
.boot-sub { opacity: .6; margin-top: .5rem; }

.game-root {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

#game-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}
#game-canvas.grabbing { cursor: grabbing; }

/* HUD overlays: let pointer events fall through to the canvas, except panels */
.overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.overlay.hidden { display: none; }

.title-card {
    text-align: center;
    margin-bottom: 12vh;
    animation: float 3s ease-in-out infinite;
}
.title-card h1 {
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    margin: 0;
    letter-spacing: 2px;
    color: #ffd23f;
    -webkit-text-stroke: 2px #b8002e;
}
.title-card p { font-size: 1.2rem; opacity: .9; margin: .4rem 0 0; }
.title-card .hint { opacity: .7; font-size: 1rem; margin-top: 1.2rem; }

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.panel {
    pointer-events: auto;
    background: rgba(12, 18, 38, .82);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 18px;
    padding: 2rem 2.6rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
}
.panel h2 { margin: 0 0 .3rem; font-size: 1.6rem; opacity: .85; font-weight: 600; }
.panel .dist { font-size: 4rem; font-weight: 900; color: #ffd23f; line-height: 1; }
.panel .dist span { font-size: 1.6rem; color: #fff; }
.panel .best { margin: .8rem 0 1.4rem; opacity: .8; }
.panel .best.new { color: #4ade80; opacity: 1; font-weight: 700; }
.panel button {
    pointer-events: auto;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a1a;
    background: #ffd23f;
    border: none;
    border-radius: 999px;
    padding: .7rem 2.2rem;
    cursor: pointer;
    transition: transform .08s ease, filter .15s ease;
}
.panel button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.panel button:active { transform: translateY(1px); }

/* Blazor framework error toast */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #111;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---- name entry modal ---- */
.overlay.modal {
    pointer-events: auto;
    background: rgba(8, 12, 28, .66);
    backdrop-filter: blur(3px);
}
.title-card .who { margin-top: .9rem; opacity: .8; font-size: .95rem; }
.name-panel h2 { margin-bottom: 1.1rem; }
.name-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2rem;
    text-align: center;
    padding: .7rem 1rem;
    margin-bottom: 1.2rem;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .96);
    color: #14203b;
    outline: none;
}
.name-input:focus { border-color: #ffd23f; }
.panel button:disabled { opacity: .45; cursor: default; transform: none; }

/* ---- results + leaderboard ---- */
.result-panel { min-width: 330px; }
.result-panel .dist { font-size: 3.2rem; font-weight: 900; color: #ffd23f; line-height: 1; margin-bottom: .1rem; }
.result-panel .dist span { font-size: 1.4rem; color: #fff; }
.result-panel .breakdown { opacity: .85; margin: .1rem 0 .5rem; font-size: 1rem; }
.lb-title { font-size: 1.05rem; letter-spacing: 1px; opacity: .85; margin: .5rem 0 .6rem; }
.leaderboard {
    margin: 0 0 1.1rem;
    max-height: 320px;
    overflow-y: auto;
    text-align: left;
}
.leaderboard .lb-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .6rem;
    border-radius: 8px;
    font-size: 1rem;
}
.leaderboard .lb-row:nth-child(odd) { background: rgba(255, 255, 255, .05); }
.leaderboard .lb-row.me {
    background: rgba(255, 210, 63, .22);
    outline: 1px solid rgba(255, 210, 63, .55);
    font-weight: 800;
}
.leaderboard .rank { width: 1.7rem; text-align: right; opacity: .65; }
.leaderboard .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard .m { color: #ffd23f; font-variant-numeric: tabular-nums; }
.missed { opacity: .8; margin-bottom: 1rem; font-size: .95rem; }

/* ---- rotate-to-landscape prompt (phones in portrait only) ---- */
.rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
    .rotate-hint {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 100;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
        background: radial-gradient(circle at 50% 40%, #2a3a6b, #0b1020 70%);
        color: #fff;
    }
    .rotate-inner { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
    .rotate-emoji { font-size: 4rem; margin-bottom: 1rem; animation: rotatecue 2.4s ease-in-out infinite; }
}
@keyframes rotatecue { 0%, 55% { transform: rotate(0); } 80%, 100% { transform: rotate(-90deg); } }