/* Hoops — retro shootaround: menu, modal, and chrome styling.
   Gameplay (canvas) rendering is untouched; this file is the UI shell.
   Type system: Barlow Condensed (display — scoreboard/jersey feel) for
   headings, buttons, and numbers; Barlow for descriptions and body copy. */

body {
    background-color: #f5f7fa;
}

.game-wrapper {
    /* Brand tokens */
    --f-disp: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --f-text: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ink: #eef2ff;
    --ink-dim: #9fb0d8;
    --ink-faint: #7c8cb5;
    --gold: #ffd166;
    --red: #fa5c5c;
    --teal: #5ad1ff;
    --green: #3ddc7a;
    --bg-deep: #0d1126;
    --bg-panel: #141a2e;
    --bg-raise: #1d2440;
    --line: #232c4a;
    --line-lit: #2c3763;

    position: relative;
    max-width: 1100px;
    margin: 1.25rem auto 2.5rem;
    padding: 0 12px;
    /* Game UI text (HUD overlays, buttons, banners) is not document text —
       taps and drags must never start a selection. */
    user-select: none;
    -webkit-user-select: none;
}

.game-header-integrated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
    padding: 10px 14px;
}

.game-logo {
    font-family: var(--f-disp);
    font-weight: 700;
    font-style: italic;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
    margin: 0;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.high-score-display {
    font-family: var(--f-disp);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 209, 102, 0.12);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
}

.mute-btn {
    background: var(--bg-raise);
    color: #fff;
    border: 1px solid var(--line-lit);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.mute-btn:hover {
    background: var(--line-lit);
}

/* The playfield: fills the viewport height minus site nav + game header so it
   plays well in both portrait and landscape. Fullscreen takes the whole screen. */
.canvas-container {
    position: relative;
    width: 100%;
    height: 70vh; /* fallback for browsers without dvh */
    height: max(430px, min(calc(100dvh - 230px), 820px));
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    --chrome-accent: #fa5c5c;
}

.canvas-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@supports (padding: max(0px)) {
    .game-wrapper {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

.canvas-container:fullscreen {
    height: 100%;
    border: none;
    border-radius: 0;
}

.canvas-container:-webkit-full-screen {
    height: 100%;
    border: none;
    border-radius: 0;
}

/* Shared chrome (help/fullscreen cluster + modal) picks up the brand type */
.game-wrapper .rmc-btn { font-family: var(--f-text); }
.game-wrapper .rmc-modal-panel {
    font-family: var(--f-text);
    background: var(--bg-deep);
    border-color: var(--line-lit);
}
.game-wrapper .rmc-modal-panel h3 {
    font-family: var(--f-disp);
    font-size: 1.35rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Start overlay. The overlay itself is the scroll container; .ss-inner is
   centered with margin:auto when it fits and scrolls when it doesn't, so the
   menu never clips on short/landscape phones. */
.start-screen {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 18px;
    overflow-y: auto;
    background: radial-gradient(120% 90% at 50% 0%, rgba(20, 26, 52, 0.94), rgba(8, 10, 22, 0.94));
    color: var(--ink);
    font-family: var(--f-text);
}

.ss-inner {
    margin: auto;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ss-title {
    font-family: var(--f-disp);
    font-style: italic;
    font-weight: 700;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 0 0 5px; /* optical centering against the letter-spacing tail */
    background: linear-gradient(115deg, var(--gold) 30%, var(--red) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold); /* fallback if clip fails */
}

.start-screen .tagline {
    font-family: var(--f-disp);
    color: var(--ink-dim);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.85rem;
    margin: 0.2rem 0 0;
}

.start-screen .ss-controls {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-dim);
}

.start-screen .ss-controls strong {
    color: var(--ink);
}

/* Difficulty: one global segmented picker */
.ss-diffs {
    display: flex;
    gap: 3px;
    width: 100%;
    margin-top: 1rem;
    padding: 3px;
    background: rgba(29, 36, 64, 0.85);
    border: 1px solid var(--line-lit);
    border-radius: 999px;
}

.ss-diff {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 7px 0 6px;
    font-family: var(--f-disp);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ss-diff:hover { color: #fff; }

.ss-diff.active {
    background: var(--gold);
    color: #141a2e;
    font-weight: 700;
}

/* The three game modes: one tall button each */
.mode-cards {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    margin-top: 0.9rem;
}

.mode-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: #161d38;
    border: 1px solid var(--line-lit);
    border-left: 3px solid var(--mc, var(--line-lit));
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    color: var(--ink);
    font-family: var(--f-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.mode-card[data-accent="practice"] { --mc: #fa5c5c; --mcbg: rgba(250, 92, 92, 0.16); }
.mode-card[data-accent="daily"]    { --mc: #ffd166; --mcbg: rgba(255, 209, 102, 0.16); }
.mode-card[data-accent="contest"]  { --mc: #5ad1ff; --mcbg: rgba(90, 209, 255, 0.16); }

.mode-card:hover,
.mode-card:focus-visible {
    border-color: var(--mc);
    background: #1b2346;
    transform: translateY(-1px);
    outline: none;
}

.mc-icon {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--mcbg, rgba(255, 255, 255, 0.06));
    border-radius: 9px;
}

.mc-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mc-name {
    font-family: var(--f-disp);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mc-desc {
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--ink-dim);
    white-space: normal;
}

/* Per-level stat on the right: "Best 12", "✓ 18", or "Play" */
.mc-stat {
    flex: 0 0 auto;
    font-family: var(--f-disp);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

.mode-card:hover .mc-stat { color: var(--mc); }

.mode-card.done { border-color: rgba(61, 220, 122, 0.45); }
.mode-card.done .mc-stat { color: var(--green); font-weight: 700; }

/* Career shooting percentage for the selected level (lifetime, this device) */
.career-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 0.8rem;
    font-size: 0.74rem;
    letter-spacing: 0.3px;
    color: var(--ink-faint);
    min-height: 1rem;
}

.career-strip .cs-label {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: var(--f-disp);
    font-size: 0.72rem;
}

.career-strip strong {
    color: var(--ink-dim);
}

/* Secondary action (leaderboards) — clearly not one of the game modes */
.ss-secondary {
    margin-top: 0.8rem;
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid var(--line-lit);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    font-family: var(--f-disp);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ss-secondary:hover {
    border-color: #4a5a94;
    color: #fff;
}

/* Generic pill buttons (end-of-round actions, dialogs) */
.mode-button {
    background: var(--bg-raise);
    color: #c9d4f2;
    border: 1px solid var(--line-lit);
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    font-family: var(--f-disp);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.mode-button:hover {
    border-color: #4a5a94;
    background: #232c50;
}

.crash-note {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 80;
    background: rgba(10, 13, 28, 0.95);
    border: 1px solid #ff6b6b;
    border-radius: 10px;
    padding: 14px 18px;
    color: #fff;
    font-family: var(--f-text);
    font-weight: 600;
}

/* --- End screen: mirrors the start screen's overlay-column pattern so the
   two "menus" of the game share one visual system. Everything is one centered
   column of equal-width blocks: result card, rank list, actions, identity. --- */
.end-screen {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    /* extra top padding keeps the result card clear of the ?/fullscreen chrome */
    padding: 54px 18px 18px;
    overflow-y: auto;
    background: rgba(8, 10, 22, 0.82);
    color: var(--ink);
    font-family: var(--f-text);
}

.es-inner {
    margin: auto;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* Result card: the hero — score, shot chart, personal best */
.es-result {
    background: rgba(13, 17, 38, 0.92);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 12px 14px 10px;
}

.es-title {
    font-family: var(--f-disp);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.es-score {
    font-family: var(--f-disp);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.05;
}

.es-score .es-of {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink-faint);
    letter-spacing: 1px;
}

.es-grid {
    display: grid;
    gap: 4px;
    justify-content: center;
    margin: 8px auto 0;
    width: max-content;
}

.es-sq {
    width: 17px;
    height: 17px;
    border-radius: 4px;
}

.es-sq.sq-swish { background: #3ddc7a; }
.es-sq.sq-make  { background: #ffd166; }
.es-sq.sq-miss  { background: #5a2430; }
.es-sq.sq-blank { background: rgba(255, 255, 255, 0.08); }

.es-legend {
    margin-top: 7px;
    font-size: 0.68rem;
    letter-spacing: 0.3px;
    color: var(--ink-faint);
}

.es-stats {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--ink-dim);
}

.es-best {
    font-family: var(--f-disp);
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.es-best.new {
    color: var(--green);
}

/* Actions: one primary, then a wrapping row of equal secondaries */
.end-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.es-primary {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-family: var(--f-disp);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.es-primary:hover {
    background: #ff6b6b;
    transform: translateY(-1px);
}

.es-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.es-row .mode-button {
    flex: 1 1 auto;
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
}

/* Daily has no challenge button; Share is promoted to the accent action */
.es-row .mode-button.accent {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.es-row .mode-button.accent:hover {
    background: #ff6b6b;
    border-color: #ff6b6b;
}

/* In-game corner buttons: exit at the bottom, level selector above it.
   Safe-area insets keep them clear of notches and home indicators. */
#level-btn {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

.level-btn {
    position: absolute;
    left: calc(10px + env(safe-area-inset-left, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    background: rgba(20, 20, 24, 0.65);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-family: var(--f-disp);
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
}

.level-btn:hover {
    background: rgba(60, 60, 70, 0.8);
}

.play-button {
    margin-top: 0.9rem;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 2.2rem;
    font-family: var(--f-disp);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.play-button:hover {
    background: #ff6b6b;
    transform: translateY(-1px);
}

/* Rank summary: just where this attempt landed ("#4 of 120 runs"); the full
   board lives in the Leaderboards modal, which tapping this opens. Fixed
   min-height holds the card's space while the submission is in flight, so
   the numbers fade in without reflowing the centered end-screen column. */
.hoops-rank {
    width: 100%;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--f-text);
    color: var(--gold);
    background: rgba(13, 17, 38, 0.92);
    border: 1px solid rgba(255, 209, 102, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.hoops-rank:hover { border-color: var(--gold); }

.hoops-rank.pending { cursor: default; }

.hoops-rank .rk-title {
    font-family: var(--f-disp);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.hoops-rank .rk-line {
    font-family: var(--f-disp);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}

.hoops-rank .rk-pos {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

.hoops-rank .rk-hint {
    font-size: 0.72rem;
    color: var(--ink-faint);
}

.hoops-rank:hover .rk-hint { color: var(--gold); }

.hoops-rank .rk-wait {
    color: var(--ink-faint);
    font-size: 0.82rem;
    animation: rk-pulse 1.6s ease-in-out infinite;
}

.hoops-rank.rk-in { animation: hb-content 0.25s ease-out; }

@keyframes rk-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

/* Head-to-head verdict atop the rank card when answering a challenge */
.hoops-rank .rk-vs {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.35);
    border-radius: 6px;
    padding: 5px 7px;
    margin-bottom: 6px;
    text-align: center;
}

.hoops-rank .rk-vs.win {
    background: rgba(61, 220, 122, 0.12);
    border-color: rgba(61, 220, 122, 0.5);
}

/* Guest identity strip at the foot of the end-screen column: shows who the
   run was saved as, with arcade-style name entry and a claim link. */
.guest-identity {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--f-text);
    font-size: 0.76rem;
    color: var(--ink-dim);
    background: rgba(13, 17, 38, 0.7);
    border: 1px solid var(--line-lit);
    border-radius: 8px;
    padding: 6px 10px;
}

.guest-identity strong {
    color: var(--gold);
}

.gi-btn {
    background: var(--bg-raise);
    color: #c9d4f2;
    border: 1px solid var(--line-lit);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.gi-btn:hover {
    border-color: #4a5a94;
    color: #fff;
}

.gi-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gi-input {
    background: var(--bg-deep);
    border: 1px solid var(--line-lit);
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    padding: 4px 8px;
    width: 9.5rem;
}

.gi-input:focus {
    outline: none;
    border-color: var(--gold);
}

/* Challenge intro modal (reuses the .hoops-board backdrop + .hb-card) */
.ci-card {
    max-width: 350px;
    text-align: center;
}

.ci-body {
    padding: 4px 18px 0;
    color: #c9d4f2;
    font-size: 0.88rem;
    line-height: 1.5;
}

.ci-body strong {
    color: var(--gold);
}

.ci-lead {
    font-size: 1rem;
    color: #fff;
    margin: 0 0 6px;
}

.ci-score {
    margin: 0 0 8px;
}

.ci-how {
    font-size: 0.78rem;
    color: var(--ink-dim);
    margin: 0;
}

.ci-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 18px 18px;
}

.ci-actions .play-button {
    width: 100%;
    margin-top: 0.6rem;
}

.ci-actions .mode-button {
    width: 100%;
}

/* Board Easy/Medium/Hard switcher — fixed modal chrome between the tabs and
   the scrolling body, so it survives tab switches and content reloads. On the
   Trophies tab it fades out but keeps its space (no layout jump). */
.hb-levels {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    padding: 12px 14px 0;
    transition: opacity 0.18s ease;
}

.hb-levels.levels-off {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hb-lvl {
    flex: 1;
    background: var(--bg-panel);
    color: var(--ink-dim);
    border: 1px solid var(--line-lit);
    border-radius: 999px;
    padding: 6px 4px 5px;
    font-family: var(--f-disp);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hb-lvl:hover { border-color: #4a5a94; color: #c9d4f2; }

.hb-lvl.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-panel);
    font-weight: 700;
}

/* ── Leaderboards & Trophies modal ─────────────────────────────────── */
.hoops-board {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 8, 18, 0.82);
    font-family: var(--f-text);
    animation: hb-backdrop 0.18s ease-out;
}

.hb-card {
    width: min(460px, 100%);
    max-height: 88%;
    display: flex;
    flex-direction: column;
    background: var(--bg-deep);
    border: 1px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
    animation: hb-pop 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* The leaderboard card keeps ONE fixed height across every tab and while
   loading — content scrolls inside it. Letting it size to content made the
   card collapse to the "Loading…" stub and re-expand on every tab switch. */
#hoops-board .hb-card { height: min(540px, 88%); }

@keyframes hb-backdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hb-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

.hb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line);
}

.hb-head h3 {
    margin: 0;
    color: #fff;
    font-family: var(--f-disp);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hb-close {
    background: none;
    border: none;
    color: var(--ink-dim);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.hb-close:hover { color: #fff; }

.hb-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line);
}

.hb-tab {
    flex: 1;
    background: transparent;
    color: var(--ink-dim);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 4px;
    font-family: var(--f-disp);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.hb-tab:hover { color: #c9d4f2; }

.hb-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.hb-body {
    flex: 1;
    min-height: 0;
    padding: 12px 14px 16px;
    overflow-y: auto;
    color: #c9d4f2;
    transition: opacity 0.15s ease;
}

/* While the next tab's data loads, the previous content stays put, dimmed —
   swapping it for a placeholder is what caused the jarring resize. */
.hb-body.hb-dim { opacity: 0.35; }

.hb-body.hb-in { animation: hb-content 0.2s ease-out; }

@keyframes hb-content {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hoops-board, .hb-card, .hb-body.hb-in, .hoops-rank.rk-in, .hoops-rank .rk-wait { animation: none; }
    .hb-body, .hb-levels, .hb-tab, .hb-lvl, .hoops-rank { transition: none; }
}

.hb-loading, .hb-empty {
    text-align: center;
    color: var(--ink-faint);
    padding: 24px 8px;
    font-size: 0.85rem;
}

.hb-sub {
    font-family: var(--f-disp);
    color: var(--ink-faint);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.hb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 0.88rem;
}

.hb-row + .hb-row { margin-top: 2px; }
.hb-row:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

.hb-row.me {
    background: rgba(255, 209, 102, 0.14);
    outline: 1px solid rgba(255, 209, 102, 0.4);
}

.hb-rank {
    width: 2.2em;
    font-family: var(--f-disp);
    color: var(--ink-faint);
    font-weight: 700;
    text-align: right;
}

.hb-row.me .hb-rank { color: var(--gold); }
.hb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-date { color: var(--ink-faint); font-size: 0.72rem; white-space: nowrap; }
.hb-score { font-family: var(--f-disp); font-size: 1rem; color: var(--gold); font-weight: 700; }
.hb-grid { letter-spacing: 1px; font-size: 0.8rem; }

/* Trophies grid */
.hb-trophies {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.hb-trophy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
}

.hb-trophy.locked { opacity: 0.45; }

.hb-trophy.earned {
    border-color: rgba(255, 209, 102, 0.5);
    background: rgba(255, 209, 102, 0.08);
}

.hb-trophy .tro { font-size: 1.3rem; line-height: 1; filter: grayscale(1); }
.hb-trophy.earned .tro { filter: none; }
.hb-trophy .t-name { display: block; color: #fff; font-weight: 700; font-size: 0.85rem; }
.hb-trophy .t-desc { display: block; color: var(--ink-dim); font-size: 0.76rem; margin-top: 2px; }

/* ── Achievement toasts ────────────────────────────────────────────── */
.hoops-toast {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: min(340px, 90%);
}

.hoops-toast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    font-family: var(--f-text);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.hoops-toast-item.show { opacity: 1; transform: translateY(0); }
.hoops-toast-item .ht-tro { font-size: 1.5rem; line-height: 1; }
.hoops-toast-item .ht-body { display: flex; flex-direction: column; }
.hoops-toast-item .ht-title { font-family: var(--f-disp); color: var(--gold); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; }
.hoops-toast-item strong { color: #fff; font-size: 0.9rem; }
.hoops-toast-item span.ht-desc { color: var(--ink-dim); font-size: 0.76rem; }

@media (max-width: 480px) {
    .game-wrapper { padding: 0 6px; margin-top: 0.75rem; }
    .game-header-integrated { padding: 10px 10px; gap: 8px; }
    .game-logo { font-size: 1.25rem; letter-spacing: 1px; }
    .header-controls { gap: 6px; }
    .mute-btn { padding: 4px 7px; font-size: 0.9rem; }
    .high-score-display { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
    .ss-title { font-size: 3rem; letter-spacing: 4px; }
    .ss-diff { font-size: 0.85rem; letter-spacing: 1px; }
    .hb-tab { font-size: 0.82rem; letter-spacing: 0.5px; }
}