/* Minigolf POC: a full-screen 3D course (#stage) with a small HUD on top (#app). */

:root {
    --page: #c9b49b;
    --card: rgba(255, 250, 244, 0.86);
    --track: rgba(60, 40, 20, 0.12);
    --card-solid: #fffaf4;
    --card-border: rgba(60, 40, 20, 0.08);
    --ink: #2b2118;
    --ink-soft: #7a6552;
    --accent: #ef5a3c;
    --accent-ink: #ffffff;
    --green: #2f9e63;
    --shadow: 0 6px 20px rgba(20, 60, 45, 0.16), 0 1px 3px rgba(20, 60, 45, 0.12);
    --radius: 18px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --card: rgba(30, 28, 26, 0.84);
        --track: rgba(255, 255, 255, 0.14);
        --card-solid: #24211e;
        --card-border: rgba(255, 255, 255, 0.08);
        --ink: #f6efe8;
        --ink-soft: #bba997;
        --shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--page);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

#stage {
    position: fixed;
    inset: 0;
    touch-action: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
}
html.course-ready #stage { opacity: 1; }
#stage canvas { display: block; touch-action: none; }

/* ---- HUD: never blocks the course except on its own controls ---- */

.hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
}
.hud button, .hud .scrim { pointer-events: auto; }

.top, .bottom { width: 100%; max-width: 480px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.pill {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hole-name { font-weight: 800; font-size: 16px; }
.dot { color: var(--ink-soft); }
.par { font-size: 14px; color: var(--ink-soft); font-weight: 600; }

.panel-row { width: 100%; display: flex; align-items: stretch; gap: 10px; }
.panel {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 12px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.meter { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.power {
    height: 14px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
}
.power-fill {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    transform-origin: left center;
    transform: scaleX(0);
    background: hsl(48 95% 55%);
}
.putts { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.putts .num { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; display: inline-block; }

.hint {
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.hint.show { opacity: 1; transform: none; }
html:not(.game-ready) .hint, html.overview .hint { opacity: 0; transform: translateY(8px); }

.toast {
    position: fixed;
    top: 40%;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--card-solid);
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--shadow);
}

.round-btn {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s var(--ease-out), background-color 0.2s, color 0.2s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.bottom .round-btn { width: auto; aspect-ratio: 1; height: auto; border-radius: var(--radius); }
.round-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:active { transform: scale(0.9); }
.round-btn:disabled { opacity: 0.5; }
html.overview .overview-btn { background: var(--ink); color: var(--card-solid); }

/* ---- Result ---- */

.scrim {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 30, 20, 0.18);
    animation: fade 0.3s var(--ease-out) 0.9s both;
}
.result {
    width: min(320px, 100%);
    padding: 26px 22px 20px;
    text-align: center;
    border: 1px solid var(--card-border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    background: var(--card-solid);
}
.result-title { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
.result-sub { margin-top: 6px; color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.primary {
    margin-top: 20px;
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s var(--ease-out), filter 0.2s;
}
.primary:active { transform: scale(0.97); filter: brightness(0.95); }

/* ---- Boot ---- */

.booting { justify-content: flex-end; pointer-events: none; }
.boot-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 600;
}
.spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--card-border);
    border-top-color: var(--green);
    animation: spin 0.8s linear infinite;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff3cd;
    color: #4a3b00;
    box-shadow: var(--shadow);
    z-index: 10;
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---- Motion ---- */

.rise { animation: rise 0.45s var(--ease-out) both; }
.pop { animation: pop 0.45s var(--ease-spring) 0.9s both; }
.pop-in { animation: pop 0.35s var(--ease-spring) both; }
.bump { animation: bump 0.35s var(--ease-spring); }

@keyframes rise { from { opacity: 0; transform: translateY(-12px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}