* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: #111;

    font-family: "Inter", Arial, sans-serif;
}

#game {
    position: relative;

    width: 100%;
    height: 100%;
}

/* =========================
   PLAYER NAME GATE
========================= */

:root {
    color-scheme: dark;
    --name-gate-background: #111214;
    --name-gate-text: #f5f5f7;
    --name-field-border: rgba(255, 255, 255, 0.16);
    --name-field-focus: #70a8ff;
    --name-hint: rgba(245, 245, 247, 0.56);
}

#nameGate {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(14, 191, 240, .16), transparent 30%),
        radial-gradient(circle at 88% 74%, rgba(0, 199, 241, .12), transparent 24%),
        #071217;
    color: var(--name-gate-text);
    transition: opacity 260ms ease, visibility 260ms ease;
}

#nameGate.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================
   GAME OVER
========================= */

#gameOver {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 260ms ease, visibility 260ms ease;
}

#gameOver.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.game-over-card {
    /* Fine-tune the complete score-and-level composition here. */
    --result-level-x: 0px;
    --result-level-y: 0px;
    --result-level-size: min(660px, calc(200vw - 48px));
    display: grid;
    justify-items: center;
    gap: 14px;
    color: #ffffff;
    text-align: center;
    transform: translateY(clamp(34px, 5.5vh, 62px));
}

.final-score-summary {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4.5px;
    width: var(--result-level-size);
    aspect-ratio: 806 / 258;
    transform: translate(var(--result-level-x), var(--result-level-y));
    isolation: isolate;
}

.result-level-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.result-level-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 01 is the base; each next image is drawn on top of the preceding layer. */
.result-level-art img:nth-child(1) { z-index: 1; }
.result-level-art img:nth-child(2) { z-index: 2; }
.result-level-art img:nth-child(3) { z-index: 3; }
.result-level-art img:nth-child(4) { z-index: 4; }

#finalScoreLabel, #finalRank { margin: 0 0 12px; font-size: 13px; font-weight: 300; letter-spacing: .08em; }
#finalRank { margin: 8px 0 18px; font-size: 26px; }
#finalRank strong { font-weight: 800; }

#leaderboardPanel { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); transition: opacity .2s ease, visibility .2s ease; }
#leaderboardPanel.is-visible { visibility: visible; opacity: 1; }
.leaderboard-card { position: relative; width: min(760px, 96vw); max-height: 82vh; overflow: auto; padding: 28px; border-radius: 28px; background: #1b252a; color: #f1f4f5; }
.leaderboard-card h2 { margin: 0 0 14px; text-align: center; font-size: 28px; letter-spacing: .08em; }
.leaderboard-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(430px, 100%); margin: 0 auto 18px; padding: 5px; border: 1px solid rgba(91, 214, 245, .22); border-radius: 999px; background: rgba(5, 19, 25, .78); }
.leaderboard-tab { min-height: 38px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: rgba(229, 239, 244, .62); font: 800 11px/1 Inter, Arial, sans-serif; letter-spacing: .055em; cursor: pointer; transition: background .16s ease, color .16s ease, transform .16s ease; }
.leaderboard-tab:hover { color: #fff; }
.leaderboard-tab:active { transform: scale(.98); }
.leaderboard-tab.is-active { background: linear-gradient(180deg, #18c7ee, #079fd3); color: #fff; box-shadow: 0 5px 18px rgba(0, 181, 232, .24); }
#closeLeadersButton { position: absolute; top: 12px; right: 15px; background: transparent; color: #fff; font-size: 28px; }
.leaderboard-head, .leaderboard-row { display: grid; grid-template-columns: .65fr 2fr 1.25fr 1.25fr; gap: 10px; align-items: center; }
.leaderboard-head { padding: 0 14px 9px; color: #b6c0c4; font-size: 11px; font-weight: 300; letter-spacing: .08em; }
.leaderboard-row { min-height: 54px; margin: 6px 0; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.leaderboard-top-1 { background: #a866eb; }.leaderboard-top-2 { background: #33d6bf; }.leaderboard-top-3 { background: #f2b74a; }
.leaderboard-empty { margin: 28px 0 10px; color: #b6c0c4; text-align: center; font-size: 13px; letter-spacing: .06em; }

#gameOverTitle {
    margin: 0;
    font-size: clamp(26px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: 0.06em;
}

#finalScore {
    margin: 0;
    font-size: clamp(38px, 8vw, 72px);
    font-weight: 900;
    line-height: 1;
}

#leadersButton,
#playAgainButton,
#menuButton {
    display: grid;
    place-items: center;
    width: min(276.25px, calc((100vw - 48px) * .5525));
    aspect-ratio: 552 / 125;
    padding: 0 4%;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #ffffff;
    font-size: clamp(10.948px, 3.079125vw, 16.422px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .22);
    transition: transform 160ms ease, filter 160ms ease;
}

#leadersButton {
    background-image: url("assets/ui/new_UI/button/button_leader.svg");
}

#playAgainButton {
    background-image: url("assets/ui/new_UI/button/button_again.svg");
}

#menuButton {
    background-image: url("assets/ui/new_UI/button/button_back.svg");
}

#leadersButton:hover,
#playAgainButton:hover,
#menuButton:hover {
    filter: brightness(1.07);
}

#leadersButton:active,
#playAgainButton:active,
#menuButton:active {
    transform: scale(0.97);
}

.name-gate-card {
    display: grid;
    justify-items: center;
    align-self: center;
    gap: 12px;
}

/* Shared glass-card shell for both the entry choice and the auth form.
   Two blurred pill "blobs" peek out from behind the card corners — drawn
   with plain CSS (border-radius + filter: blur), no image assets. */
.entry-choice,
.auth-card {
    position: relative;
    box-sizing: border-box;
    width: min(440px, calc(100vw - 32px));
    padding: 34px 28px 28px;
    border: 1.5px solid rgba(70, 205, 235, .32);
    border-radius: 32px;
    background:
        radial-gradient(circle at 82% 10%, rgba(20, 190, 235, .10), transparent 42%),
        linear-gradient(160deg, rgba(9, 32, 40, .96), rgba(3, 14, 19, .98));
    box-shadow: inset 0 0 26px rgba(60, 210, 245, .06), 0 24px 60px rgba(0, 0, 0, .45);
}

.entry-choice { display: grid; justify-items: center; gap: 16px; }
.auth-card { display: grid; justify-items: center; gap: 12px; }

.entry-profile {
    display: grid;
    justify-items: center;
    gap: 9px;
    margin: -2px 0 4px;
}
.entry-profile[hidden] { display: none; }
.entry-profile-avatar {
    position: relative;
    width: 108px;
    height: 108px;
    padding: 0;
    border: 3px solid rgba(255,255,255,.85);
    border-radius: 50%;
    overflow: visible;
    background: #263943;
    cursor: pointer;
}
.entry-profile-avatar > img:first-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* =========================
   PLAYER XP / LEVEL
   XP begins at the bottom of the avatar and runs clockwise. The base track is
   always visible. Credited XP stays metallic silver; XP gained in the just-
   finished game stays gold until PLAY AGAIN or MENU.
========================= */
.entry-profile-avatar,
#profileButton,
.profile-avatar {
    --xp-progress: 0;
    --xp-gain-start: 0;
}

.xp-ring-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.xp-ring {
    position: absolute;
    inset: -10px;
    z-index: 3;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

.has-xp-progress .xp-ring {
    opacity: 1;
}

.xp-ring circle {
    fill: none;
    stroke-width: 8;
    vector-effect: non-scaling-stroke;
}

.xp-ring-track {
    stroke: #021d29;
}

.xp-ring-progress,
.xp-ring-gain,
.xp-ring-rollover-progress,
.xp-ring-rollover-gain {
    /* Butt caps are intentional here: with a short segment a round cap looks
       like a detached dot. The XP arc itself now has an unambiguous origin. */
    stroke-linecap: butt;
    opacity: 0;
    transition: opacity 140ms ease;
}

.has-xp-progress .xp-ring-progress {
    opacity: 1;
    stroke: url(#xpSilverGradient);
    stroke-dasharray: calc(var(--xp-progress) * 100) 100;
    /* SVG circles start at 3 o'clock. -25 moves 0% exactly to 6 o'clock. */
    stroke-dashoffset: -25;
    filter:
        drop-shadow(0 0 2px rgba(238, 244, 248, .42))
        drop-shadow(0 0 3px rgba(136, 151, 163, .22));
}

#profileButton.has-xp-progress.has-xp-gain .xp-ring-gain {
    opacity: 1;
    stroke: url(#xpGoldGradient);
    stroke-dasharray: calc((var(--xp-progress) - var(--xp-gain-start)) * 100) 100;
    stroke-dashoffset: calc(-25 - (var(--xp-gain-start) * 100));
    filter:
        drop-shadow(0 0 3px rgba(255, 224, 130, .58))
        drop-shadow(0 0 5px rgba(218, 163, 36, .28));
}

/* Level-up rollover layer. The old level remains intact until the earned XP
   has finished drawing, then recedes clockwise into the bottom 0% point. */
#profileButton .xp-ring-rollover-progress,
#profileButton .xp-ring-rollover-gain {
    opacity: 0;
    pointer-events: none;
}

#profileButton.xp-levelup-rollover .xp-ring-rollover-progress {
    opacity: 1;
    stroke: url(#xpSilverGradient);
    filter:
        drop-shadow(0 0 2px rgba(238, 244, 248, .42))
        drop-shadow(0 0 3px rgba(136, 151, 163, .22));
}

#profileButton.xp-levelup-rollover .xp-ring-rollover-gain {
    opacity: 1;
    stroke: url(#xpGoldGradient);
    filter:
        drop-shadow(0 0 3px rgba(255, 224, 130, .58))
        drop-shadow(0 0 5px rgba(218, 163, 36, .28));
}

#profileButton.xp-levelup-filling .xp-ring-progress,
#profileButton.xp-levelup-filling .xp-ring-gain {
    opacity: 0 !important;
}

/* HUD XP ring uses explicit SVG arcs instead of dash patterns. This keeps 0%
   physically fixed at the avatar's bottom-centre and lets gold wrap through
   100% without ghost caps, flashes or duplicated segments. */
#profileButton .xp-ring--hud path {
    fill: none;
    stroke-width: 8;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
}

#profileButton .xp-ring--hud .xp-ring-progress {
    opacity: 1;
    stroke: url(#xpSilverGradient);
    filter:
        drop-shadow(0 0 2px rgba(238, 244, 248, .42))
        drop-shadow(0 0 3px rgba(136, 151, 163, .22));
}

#profileButton .xp-ring--hud .xp-ring-gain-old,
#profileButton .xp-ring--hud .xp-ring-gain-wrap {
    opacity: 1;
    stroke: url(#xpGoldGradient);
    filter:
        drop-shadow(0 0 3px rgba(255, 224, 130, .58))
        drop-shadow(0 0 5px rgba(218, 163, 36, .28));
}

/* Wide level plaque: the star occupies the left side, the number is centred
   inside the right half. Keep the number in this same container so local
   positioning never depends on the avatar image's square bounds. */
.profile-level-badge {
    position: absolute;
    right: -14px;
    bottom: -8px;
    z-index: 6;
    display: block;
    width: 57px;
    aspect-ratio: 169.74 / 67.2;
    pointer-events: none;
}

.profile-level-badge.is-hidden {
    display: none;
}

.profile-level-badge > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.profile-level-number {
    position: absolute;
    top: 50%;
    left: 43%;
    right: 5%;
    z-index: 1;
    color: #eef2f4;
    font: 800 15px/1 Inter, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.88);
    transform: translateY(-50%);
}

/* HUD plaque stays attached to the bottom edge of the circular avatar. */
#profileButton .profile-level-badge--hud {
    left: 50%;
    right: auto;
    bottom: -1%;
    width: clamp(56px, 9cqw, 60px);
    transform: translate(-50%, 50%);
}

#profileButton .profile-level-number {
    font-size: clamp(13px, 2.35cqw, 15.5px);
}
.entry-profile-name {
    max-width: 320px;
    overflow: hidden;
    color: #fff;
    font: 800 17px/1.15 Inter,Arial,sans-serif;
    letter-spacing: .035em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.entry-choice::before,
.entry-choice::after,
.auth-card::before,
.auth-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    background: linear-gradient(135deg, #1ad2f6, #0d9fdb 60%, #0a76a8);
    filter: blur(1px);
    box-shadow: 0 0 42px rgba(20, 205, 245, .38);
}

.entry-choice::before,
.auth-card::before { top: -34px; left: 6%; width: 46%; height: 78px; }

.entry-choice::after,
.auth-card::after { right: -30px; bottom: 10%; width: 60px; height: 150px; }

.auth-card[hidden], .entry-choice[hidden], .otp-step[hidden], .mode-selection[hidden] { display: none; }

.mode-selection {
    width: min(1180px, calc(100vw - 36px));
}

.mode-selection-shell {
    position: relative;
    width: 100%;
    padding: 36px 28px 30px;
    border: 1.5px solid rgba(70, 205, 235, .32);
    border-radius: 34px;
    background:
        radial-gradient(circle at 82% 10%, rgba(20, 190, 235, .10), transparent 42%),
        linear-gradient(160deg, rgba(9, 32, 40, .96), rgba(3, 14, 19, .98));
    box-shadow: inset 0 0 26px rgba(60, 210, 245, .06), 0 24px 60px rgba(0, 0, 0, .45);
}

.mode-selection-shell::before,
.mode-selection-shell::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    background: linear-gradient(135deg, #1ad2f6, #0d9fdb 60%, #0a76a8);
    filter: blur(1px);
    box-shadow: 0 0 42px rgba(20, 205, 245, .38);
}

.mode-selection-shell::before {
    top: -34px;
    left: 4%;
    width: 30%;
    height: 78px;
}

.mode-selection-shell::after {
    right: -30px;
    bottom: 10%;
    width: 60px;
    height: 150px;
}

.mode-selection-back {
    top: 18px;
    left: 18px;
}

.mode-selection-title {
    margin: 0;
    padding-inline: 54px;
    color: #f4f8ff;
    text-align: center;
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 900;
    letter-spacing: .06em;
}

.mode-selection-copy {
    margin: 12px auto 22px;
    max-width: 680px;
    color: rgba(230, 240, 246, .72);
    text-align: center;
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 300;
    line-height: 1.45;
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mode-card {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    align-items: start;
    min-width: 0;
    aspect-ratio: 3 / 4.12;
    padding: 16px;
    border: 1.5px solid rgba(70, 205, 235, .35);
    border-radius: 38px;
    background:
        radial-gradient(circle at 50% 100%, rgba(0, 185, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(8, 26, 35, .98), rgba(3, 14, 18, .99));
    box-shadow: inset 0 0 20px rgba(39, 198, 240, .08), 0 12px 34px rgba(0, 0, 0, .28);
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
    overflow: hidden;
}

.mode-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(70, 220, 255, .62);
    box-shadow: inset 0 0 20px rgba(39, 198, 240, .08), 0 18px 42px rgba(0, 0, 0, .34);
}

.mode-card:active:not(:disabled) {
    transform: translateY(0) scale(.986);
}

.mode-card:disabled {
    cursor: default;
}

.mode-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 764 / 607;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .04);
}

.mode-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
    pointer-events: none;
}

.mode-card-media-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mode-card-content {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px 10px 6px;
}

.mode-card-title {
    margin: 0;
    color: #f8fbff;
    font-size: clamp(19px, 2vw, 28px);
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.06;
}

.mode-card-description {
    margin: 0;
    color: rgba(214, 227, 236, .84);
    font-size: clamp(12px, 1.15vw, 15px);
    font-weight: 300;
    line-height: 1.42;
}

.mode-card-locked .mode-card-media-image {
    filter: blur(12px) brightness(.34) saturate(.65);
    transform: scale(1.1);
}

.mode-card-locked .mode-card-content {
    place-content: center;
    align-content: center;
    justify-items: center;
    padding-top: 18px;
}

.mode-card-locked .mode-card-description {
    color: rgba(214, 227, 236, .52);
}

.mode-card-lock-badge {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border: 1.5px solid rgba(173, 218, 244, .18);
    border-radius: 50%;
    background: rgba(25, 43, 56, .38);
    box-shadow: inset 0 0 28px rgba(255, 255, 255, .06);
    color: rgba(249, 252, 255, .94);
    transform: translate(-50%, -50%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mode-card-lock-badge svg {
    width: 48px;
    height: 48px;
}

@media (max-width: 960px) {
    .mode-selection {
        width: min(960px, calc(100vw - 24px));
    }

    .mode-grid {
        gap: 16px;
    }

    .mode-card {
        border-radius: 32px;
        padding: 14px;
    }

    .mode-card-media {
        border-radius: 24px;
    }
}

@media (max-width: 760px) {
    .mode-selection-shell {
        padding: 24px 16px 18px;
        border-radius: 28px;
    }

    .mode-selection-shell::before {
        top: -22px;
        height: 56px;
    }

    .mode-selection-shell::after {
        right: -16px;
        width: 44px;
        height: 110px;
    }

    .mode-selection-title {
        padding-inline: 42px;
        font-size: 24px;
    }

    .mode-selection-copy {
        margin: 10px auto 16px;
        font-size: 12px;
    }

    .mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mode-card {
        border-radius: 28px;
        padding: 12px;
    }

    .mode-card-media {
        border-radius: 22px;
    }

    .mode-card-content {
        gap: 10px;
        padding: 12px 4px 2px;
    }

    .mode-card-title {
        font-size: 18px;
    }

    .mode-card-description {
        font-size: 11px;
        line-height: 1.35;
    }

    .mode-card-lock-badge {
        width: 78px;
        height: 78px;
    }

    .mode-card-lock-badge svg {
        width: 34px;
        height: 34px;
    }
}

.entry-button {
    display: grid;
    place-items: center;
    width: min(330px, 100%);
    min-height: 70px;
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}

.entry-button:hover { filter: brightness(1.08); }
.entry-button:active { transform: scale(.97); }
.entry-choice {
    --entry-btn-width: 320px;
    --entry-btn-height: 64px;
    --entry-btn-font: 17px;
    --entry-btn-sub-font: 10px;
}

.entry-button-primary { background: linear-gradient(135deg, #18dcac, #049a78); box-shadow: 0 10px 26px rgba(6, 170, 130, .28); }
.entry-button-leaders {
    width: min(calc(var(--entry-btn-width) * .95), 100%);
    min-height: 54px;
    border: 1.5px solid rgba(70, 205, 235, .42);
    background: rgba(8, 41, 53, .82);
    box-shadow: inset 0 0 18px rgba(37, 217, 255, .05);
}
.entry-button-leaders strong { font-size: calc(var(--entry-btn-font) * .82); }
.entry-button-guest { border: 1.5px solid rgba(70, 205, 235, .35); background: rgba(6, 26, 33, .7); }

.entry-choice:not(.is-authenticated) .entry-button-primary {
    width: min(calc(var(--entry-btn-width) * 1.05), 100%);
    min-height: calc(var(--entry-btn-height) * 1.05);
}

.entry-choice:not(.is-authenticated) .entry-button-guest {
    width: min(calc(var(--entry-btn-width) * .95), 100%);
    min-height: calc(var(--entry-btn-height) * .95);
}

.entry-choice:not(.is-authenticated) .entry-button-primary strong { font-size: calc(var(--entry-btn-font) * 1.05); }
.entry-choice:not(.is-authenticated) .entry-button-primary small { font-size: calc(var(--entry-btn-sub-font) * 1.05); }
.entry-choice:not(.is-authenticated) .entry-button-guest strong { font-size: calc(var(--entry-btn-font) * .95); }
.entry-choice:not(.is-authenticated) .entry-button-guest small { font-size: calc(var(--entry-btn-sub-font) * .95); }

.entry-button strong {
    display: block;
    font-family: "Inter", Arial, sans-serif;
    font-size: var(--entry-btn-font);
    font-style: normal;
    font-stretch: normal;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .1em;
    white-space: nowrap;
    transform: none;
}
.entry-button small {
    display: block;
    margin-top: 3px;
    font-family: "Inter", Arial, sans-serif;
    font-size: var(--entry-btn-sub-font);
    font-style: normal;
    font-stretch: normal;
    font-weight: 300;
    line-height: 1.2;
    opacity: .68;
    text-transform: uppercase;
    transform: none;
}

/* Signed-in state contains a single text line, so keep it geometrically
   centered in the button instead of relying on the two-line entry layout. */
.entry-choice.is-authenticated .entry-button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(var(--entry-btn-width), 100%);
    min-height: var(--entry-btn-height);
    padding-block: 0;
    text-align: center;
}

.entry-choice.is-authenticated .entry-button-primary strong {
    margin: 0;
    line-height: 1.2;
}
.entry-logout { border: 0; background: transparent; color: #8ea0aa; font-size: 10px; letter-spacing: .08em; text-decoration: underline; cursor: pointer; }
.entry-button[hidden] { display: none; }
.entry-logout[hidden] { display: none; }
.entry-delete { margin-top: -10px; color: #a87980; }

.auth-title {
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 0;
    padding-inline: 52px;
    color: #f4f8ff;
    font-size: clamp(19px, 3vw, 25px);
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    line-height: 1.15;
}
.auth-copy { margin: 8px 0 6px; color: #9fb6c4; font-size: 13px; text-align: center; }

.auth-back {
    position: absolute;
    top: 20px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1.5px solid #1bc7ef;
    border-radius: 50%;
    background: rgba(2, 20, 29, .86);
    color: #fff;
    box-shadow: 0 0 14px rgba(16, 209, 248, .3);
    cursor: pointer;
}

.auth-back svg { display: block; width: 20px; height: 20px; }

.nickname-card .nickname-back {
    top: 20px;
    left: 20px;
    right: auto;
}

.auth-field {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    border: 1.5px solid rgba(30, 190, 230, .5);
    border-radius: 999px;
    background: rgba(4, 22, 29, .65);
    box-shadow: inset 0 0 16px rgba(40, 200, 240, .06), 0 8px 20px rgba(0, 0, 0, .12);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.auth-field:focus-within {
    border-color: #2bd7ff;
    box-shadow: 0 0 0 4px rgba(32, 204, 248, .16), inset 0 0 18px rgba(42, 202, 247, .1), 0 8px 20px rgba(0, 0, 0, .14);
}

.auth-field.is-bouncing { animation: authFieldInitialExpand 1s ease-in-out both; }

.auth-field input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 24px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f5f9ff;
    font: 600 16px/1 Inter, Arial, sans-serif;
    text-align: center;
    letter-spacing: .03em;
}

.auth-field input::placeholder { color: rgba(200, 220, 232, .42); font-weight: 400; }

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f5f9ff;
    -webkit-box-shadow: 0 0 0 1000px rgba(4, 22, 29, .92) inset;
    box-shadow: 0 0 0 1000px rgba(4, 22, 29, .92) inset;
    caret-color: #f5f9ff;
    transition: background-color 99999s ease-in-out 0s;
}

.auth-action {
    width: min(360px, 100%);
    min-height: 54px;
    padding: 0 26px;
    border: 1.5px solid #38f1c2;
    border-radius: 999px;
    background: linear-gradient(135deg, #16dca8, #04a880);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px rgba(2, 214, 165, .22);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}

.auth-action:hover { filter: brightness(1.06); }
.auth-action:active { transform: scale(.97); }

.otp-step { display: grid; justify-items: center; width: 100%; gap: 12px; }
.otp-development-hint { margin: 0; color: #57e6bb; font-size: 12px; text-align: center; }
.auth-error { min-height: 16px; margin: 0; color: #ff8292; font-size: 12px; text-align: center; }

.legal-consent-block {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 4px;
}

.leaderboard-consent {
    display: flex;
    align-items: flex-start;
    width: min(360px, calc(100vw - 48px));
    gap: 10px;
    color: #a9c0cd;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.leaderboard-consent input {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    border: 1.5px solid rgba(70, 205, 235, .5);
    border-radius: 6px;
    background-color: rgba(4, 22, 29, .65);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.leaderboard-consent input:checked {
    border-color: #1bc7ef;
    background-color: #1bc7ef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23052229' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
}

.leaderboard-consent input:focus-visible {
    outline: 2px solid rgba(43, 215, 255, .55);
    outline-offset: 2px;
}

.leaderboard-consent a { color: #7ab8ff; }

.name-gate-legal {
    display: flex;
    gap: 8px;
    margin: 0;
    color: #7f97a3;
    font-size: 10px;
    letter-spacing: .08em;
}

.name-gate-legal a {
    color: #7ab8ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#nameLabel {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

#nameField {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: var(--name-field-width, min(320px, 100%));
    max-width: 100%;
    height: 58px;
    border: 1.5px solid rgba(30, 190, 230, .5);
    border-radius: 999px;
    background: rgba(4, 22, 29, .65);
    overflow: visible;
    box-shadow: inset 0 0 16px rgba(40, 200, 240, .06), 0 8px 20px rgba(0, 0, 0, .12);
    transition: width 300ms ease-out, border-color 180ms ease, box-shadow 180ms ease;
}

#nameField.is-bouncing {
    animation: nameFieldInitialExpand 1s ease-in-out both;
}

#nameField.is-empty::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    width: 2px;
    height: 24px;
    border-radius: 1px;
    background: var(--name-gate-text);
    transform: translateX(-50%);
    animation: nameCursorBlink 900ms steps(1, end) infinite;
    pointer-events: none;
    z-index: 2;
}

#nameField.is-empty:not(:focus-within)::after {
    display: none;
}

#nameField:focus-within {
    border-color: #2bd7ff;
    box-shadow: 0 0 0 4px rgba(32, 204, 248, .16), inset 0 0 18px rgba(42, 202, 247, .1), 0 8px 20px rgba(0, 0, 0, .14);
}

#nameInput {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f5f9ff;
    font: 600 16px/1 "Inter", Arial, sans-serif;
    text-align: center;
}

#nameInput:-webkit-autofill,
#nameInput:-webkit-autofill:hover,
#nameInput:-webkit-autofill:focus {
    -webkit-text-fill-color: #f5f9ff;
    -webkit-box-shadow: 0 0 0 1000px rgba(4, 22, 29, .92) inset;
    box-shadow: 0 0 0 1000px rgba(4, 22, 29, .92) inset;
    caret-color: #f5f9ff;
    transition: background-color 99999s ease-in-out 0s;
}

#nameInput::placeholder {
    color: rgba(200, 220, 232, .42);
    font-weight: 400;
    opacity: 1;
}

#nameField:focus-within #nameInput::placeholder {
    color: transparent;
}

#nameField.is-empty #nameInput {
    caret-color: transparent;
}

#nameInput[aria-invalid="true"] {
    color: #ff8292;
}

#nameStartButton {
    width: min(360px, 100%);
    min-height: 54px;
    padding: 0 26px;
    border: 1.5px solid #38f1c2;
    border-radius: 999px;
    background: linear-gradient(135deg, #16dca8, #04a880);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px rgba(2, 214, 165, .22);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}

#nameStartButton:hover {
    filter: brightness(1.06);
}

#nameStartButton:active {
    transform: scale(0.96);
}

#nameStartButton:focus-visible {
    outline: 3px solid color-mix(in srgb, #28A577 42%, transparent);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #nameGate { padding: 14px; overflow-y: auto; }
    .entry-choice,
    .auth-card { width: min(100%, 420px); padding: 30px 20px 24px; border-radius: 28px; }
    .entry-choice::before,
    .auth-card::before { top: -22px; height: 56px; }
    .entry-choice::after,
    .auth-card::after { right: -16px; width: 44px; height: 110px; }
    .auth-back { top: 16px; left: 16px; width: 38px; height: 38px; }
    .auth-back svg { width: 18px; height: 18px; }
    .auth-field, #nameField { height: 52px; }
    .auth-action, #nameStartButton { min-height: 50px; }
    .leaderboard-consent input { width: 18px; height: 18px; }
    .name-gate-legal { font-size: 11px; }
}

.guest-conversion-offer {
    display: grid;
    justify-items: center;
    width: min(360px, calc(100vw - 48px));
    gap: 7px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    background: rgba(38,57,67,.86);
}
.guest-conversion-offer[hidden] { display: none; }
.guest-conversion-offer strong { color: #66e0ba; font-size: 16px; }
.guest-conversion-offer span { color: #c1ccd1; font-size: 11px; line-height: 1.4; }
#guestRegisterButton { min-height: 38px; margin-top: 5px; padding: 0 18px; border: 0; border-radius: 999px; background: #28a577; color: white; font-size: 10px; font-weight: 800; letter-spacing: .07em; cursor: pointer; }

@keyframes nameFieldInitialExpand {
    0% { width: 220px; }
    8% { width: 306px; }
    19% { width: 272px; }
    31% { width: 300px; }
    44% { width: 276px; }
    58% { width: 295px; }
    72% { width: 280px; }
    86% { width: 290px; }
    100% { width: 286px; }
}

@keyframes authFieldInitialExpand {
    0% { transform: scaleX(.76); }
    8% { transform: scaleX(1.04); }
    19% { transform: scaleX(.93); }
    31% { transform: scaleX(1.03); }
    44% { transform: scaleX(.95); }
    58% { transform: scaleX(1.02); }
    72% { transform: scaleX(.97); }
    86% { transform: scaleX(1.01); }
    100% { transform: scaleX(1); }
}

@keyframes nameCursorBlink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

/* =========================
   STREET VIEW
========================= */

#streetview {
    position: absolute;

    inset: 0;

    background: #111;
}

#mly {
    width: 100%;
    height: 100%;
}

/* Only used by the local UI overview: the real interface stays visible without
   starting Mapillary or requesting a panorama. */
body.ui-state-preview #mly {
    background:
        linear-gradient(180deg, rgba(5, 18, 25, 0.08), rgba(5, 18, 25, 0.52)),
        radial-gradient(circle at 68% 32%, #63859a 0 8%, transparent 9%),
        linear-gradient(145deg, #7694a4 0 38%, #415f55 39% 60%, #263c36 61% 100%);
}

#loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    z-index: 1200;
    background: #111214;
    pointer-events: none;
}

@property --loading-progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.loading-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(132px, 20vw, 190px);
    aspect-ratio: 1;
}

.loading-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: loadingRingDrift 32s linear infinite;
}

.loading-progress-circle {
    fill: none;
    stroke: #0091bf;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: var(--loading-progress) 100;
    transition: --loading-progress 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes loadingRingDrift {
    to { transform: rotate(360deg); }
}

#loadingPercent {
    position: relative;
    color: #ffffff;
    font-size: clamp(31px, 5vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

#loadingMessage {
    max-width: min(420px, 85vw);
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(11px, 1.45vw, 14px);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
}

/* =========================
   MAP
========================= */

#map {
    position: absolute;

    right: 20px;
    bottom: 90px;

    width: 360px;
    height: 260px;

    border: 3px solid white;
    border-radius: 8px;

    overflow: hidden;

    z-index: 10;

    background: #ddd;

    box-shadow:
        0 5px 30px rgba(0, 0, 0, 0.5);

    transition:
        width 0.2s ease,
        height 0.2s ease,
        right 0.2s ease,
        bottom 0.2s ease;
}

#map.expanded {
    width: 50vw;
    height: 55vh;

    right: 20px;
    bottom: 90px;
}

#mapToggle {
    position: absolute;

    top: 8px;
    left: 8px;

    z-index: 1000;

    padding: 7px 10px;

    border: none;
    border-radius: 4px;

    background: rgba(0, 0, 0, 0.75);
    color: white;

    font-size: 11px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35);
}

#mapToggle:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* =========================
   CUSTOM MARKERS
========================= */

.custom-marker {
    background: none;
    border: none;
}

.guess-marker,
.answer-marker {
    width: 20px;
    height: 20px;

    border-radius: 50%;

    border: 3px solid white;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.65);
}

.guess-marker {
    background: #168cff;
}

.answer-marker {
    background: #ff3030;
}

.guess-marker.is-result-marker,
.answer-marker.is-result-marker {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    box-shadow:
        0 3px 11px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(0, 0, 0, 0.12);
    animation: resultMarkerPop 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes resultMarkerPop {
    0% { scale: 0.55; opacity: 0; }
    70% { scale: 1.12; opacity: 1; }
    100% { scale: 1; opacity: 1; }
}

/* =========================
   HUD
========================= */

#topbar {
    /* All HUD elements are anchored to the active status-bar image. */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(660px, 100vw);
    aspect-ratio: 1740 / 428;
    container-type: inline-size;
    --status-content-top: 21.2%;
    /* Moves time (including its fill line), round and score together. */
    --status-content-offset-y: 0cqw;
    --status-value-gap: .5cqw;
    /* Moves the white timer track and blue fill together. */
    --timer-line-offset-y: -0.5cqw;
    /* One control for the status labels, icons, values and timer spacing. */
    --hud-scale: 0.85;
    /* Final-state text calibration: coordinates are percentages of this entire
       status-bar container. Keep text centred so every locale expands evenly. */
    --round-complete-x: 53.2%;
    --round-complete-y: 30.5%;
    --round-complete-font-size: 4.6cqw;
    /* Golden rule: hide the first native 450px (450 / 1740) of the balance plaque. */
    --balance-plaque-clip-left: 25.8621%;
    /* Position of status_bar_02.png inside the fixed status-bar mask. */
    --balance-plaque-offset-x: -14%;
    --balance-plaque-offset-y: 0%;
    color: #f1f4f5;
    pointer-events: none;
}

/* The status bar is shown only after a panorama has loaded successfully. */
#game.pano-ready #topbar {
    display: block;
}

/* The avatar/XP/level is intentionally separated from the status bar.
   This lets the real final-screen blur cover the whole bar while the player
   portrait and progression stay perfectly sharp above it. */
#profileHudOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: min(660px, 100vw);
    aspect-ratio: 1740 / 428;
    container-type: inline-size;
    pointer-events: none;
}

#game.pano-ready #profileHudOverlay {
    display: block;
}

#game.game-complete #profileHudOverlay {
    z-index: 4300;
}

#balanceHud {
    position: absolute;
    top: 73%;
    left: 28%;
    z-index: 1;
    color: #f4f7f8;
    font-size: 3.5cqw;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
}

/* Individual local-preview calibration points for the elastic balance plaque. */
body.balance-preview-9 #topbar { --balance-plaque-offset-x: -14%; }
body.balance-preview-99 #topbar { --balance-plaque-offset-x: -11.8%; }
body.balance-preview-999 #topbar { --balance-plaque-offset-x: -9%; }
body.balance-preview-9999 #topbar { --balance-plaque-offset-x: -6.3%; }
body.balance-preview-99999 #topbar { --balance-plaque-offset-x: -4%; }
body.balance-preview-999999 #topbar { --balance-plaque-offset-x: -2%; }
body.balance-preview-1m #topbar { --balance-plaque-offset-x: -4.5%; }
#profileButton { position: absolute; top: 0.3%; left: 0.3%; z-index: 1; width: 20.5%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: visible; background: transparent; cursor: pointer; pointer-events: auto; }
#profileButton > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#profilePanel, #nicknamePanel, #avatarPanel, #deletePanel, #panoramaReportPanel { position: fixed; inset: 0; z-index: 5100; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; background: rgba(2,10,14,.7); backdrop-filter: blur(10px); transition: opacity .2s ease, visibility .2s ease; }
#profilePanel.is-visible, #nicknamePanel.is-visible, #avatarPanel.is-visible, #deletePanel.is-visible, #panoramaReportPanel.is-visible { visibility: visible; opacity: 1; }

#profileRoundTimer {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 4700;
    padding: 7px 12px 6px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(8,20,27,.56);
    color: rgba(244,247,248,.76);
    font: 700 13px/1 Inter,Arial,sans-serif;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px);
    backdrop-filter: blur(5px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
#profileRoundTimer.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
#profileRoundTimer.is-under-one-minute {
    color: #ffcc00;
}
#profileRoundTimer.is-final-fifteen {
    color: #ff6b72;
}
.profile-card { position: relative; width: min(360px, calc(100vw - 40px)); padding: 34px 24px 25px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: #17262e; color: #f4f7f8; }
.profile-stack { display: grid; justify-items: center; gap: 14px; }
.profile-close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.profile-avatar { position: relative; width: 116px; height: 116px; padding: 0; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; overflow: visible; background: #263943; cursor: pointer; }
.profile-avatar > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-edit-icon, .profile-name-field img { width: 25px; height: 25px; object-fit: contain; }
.profile-edit-icon { position: absolute; left: -5px; right: auto; bottom: -5px; }
.profile-avatar.is-readonly,
.profile-name-field.is-readonly {
    cursor: default;
    opacity: 1;
}
.profile-avatar.is-readonly .profile-edit-icon,
.profile-name-field.is-readonly img {
    display: none;
}
.profile-name-field {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(280px, 100%);
    min-height: 46px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 700 16px/1 Inter,Arial,sans-serif;
    letter-spacing: .05em;
    cursor: pointer;
}
.profile-name-field img {
    position: absolute;
    right: -5px;
    bottom: -5px;
}
.profile-guest-hint { margin: -4px 0 0; color: #aebfc7; font-size: 12px; text-align: center; }
.profile-action { width: min(290px, 100%); min-height: 46px; border: 0; border-radius: 999px; color: #fff; font: 800 14px/1 Inter,Arial,sans-serif; letter-spacing: .07em; cursor: pointer; }
.profile-action--logout { background: #263943; }.profile-action--delete { background: #a55e68; }.profile-action--save { background: #28a577; }
.profile-action:disabled { opacity: .42; cursor: default; filter: none !important; }
.profile-action--report {
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 173, 67, .56);
    background: rgba(78, 48, 18, .82);
    box-shadow: inset 0 0 16px rgba(255, 171, 58, .05);
    text-align: center;
    text-transform: uppercase;
}
.profile-action--report:hover:not(:disabled) { filter: brightness(1.08); }
.profile-action--difficulty,
.profile-action--report {
    display: grid;
    place-items: center;
    padding-block: 0;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}
.profile-action--menu {
    display: grid;
    place-items: center;
    padding-block: 0;
    background: #263943;
    text-align: center;
}
.profile-action--menu[hidden] { display: none; }
.nickname-card { display: grid; justify-items: center; gap: 15px; text-align: center; }.nickname-card h2 { margin: 0; font-size: 18px; letter-spacing: .07em; }.nickname-card input { width: 100%; height: 52px; padding: 0 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: transparent; color: #fff; font: 600 17px/1 Inter,Arial,sans-serif; text-align: center; }.nickname-card p { margin: 0; color: #b7c6cd; font-size: 11px; line-height: 1.45; }
.nickname-card a { color: #7bd9ff; }.avatar-card { width: min(760px, calc(100vw - 30px)); }.avatar-card h2, .delete-card h2 { margin: 0 0 20px; text-align: center; font-size: 18px; letter-spacing: .07em; }.avatar-choices { display: grid; grid-template-columns: repeat(5, minmax(105px, 1fr)); gap: 10px; overflow-x: auto; }.avatar-choice { display: grid; justify-items: center; gap: 7px; min-width: 105px; padding: 10px 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #21353f; color: #f5f7f8; cursor: pointer; }.avatar-choice img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }.avatar-choice strong { font-size: 15px; }.avatar-choice em { min-height: 42px; padding: 0 4px; color: #bac9cf; font-size: 10px; line-height: 1.25; }.avatar-choice.is-selected { border-color: #6cdcb9; box-shadow: 0 0 0 2px rgba(108,220,185,.18); }.delete-card { display: grid; justify-items: center; gap: 18px; text-align: center; }.delete-card p { margin: 0; color: #c0cbd0; font-size: 12px; line-height: 1.45; }
@media (max-width: 620px) { .avatar-card { padding-inline: 16px; }.avatar-choices { grid-template-columns: repeat(5, 105px); justify-content: start; } }


/* ============================================================
   PANORAMA REPORT
   ============================================================ */
.panorama-report-card {
    display: grid;
    justify-items: stretch;
    gap: 14px;
    width: min(620px, calc(100vw - 36px));
    padding: 54px 30px 28px;
    text-align: center;
}
.panorama-report-back {
    top: 16px;
    left: 18px;
}
.panorama-report-card h2 {
    margin: 0;
    padding: 0 44px;
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .05em;
}
.panorama-report-copy {
    max-width: 520px;
    margin: 0 auto 4px;
    color: #afc1c9;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.48;
}
.panorama-report-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}
.panorama-report-reasons button {
    min-height: 54px;
    padding: 10px 14px;
    border: 1.5px solid rgba(116, 153, 168, .28);
    border-radius: 16px;
    background: rgba(11, 32, 41, .78);
    color: #e9f2f5;
    font: 700 11px/1.25 Inter,Arial,sans-serif;
    letter-spacing: .035em;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.panorama-report-reasons button:hover {
    border-color: rgba(62, 202, 238, .62);
    background: rgba(12, 49, 62, .92);
}
.panorama-report-reasons button:active { transform: scale(.985); }
.panorama-report-reasons button.is-selected {
    border-color: #31d2f5;
    background: rgba(13, 83, 101, .9);
    box-shadow: 0 0 0 3px rgba(49, 210, 245, .10), inset 0 0 18px rgba(49, 210, 245, .08);
}
.profile-action--report-submit {
    justify-self: center;
    margin-top: 4px;
    border: 1.5px solid #2bd7ff;
    background: linear-gradient(135deg, #18bfe6, #087fa2);
}
.panorama-report-status {
    min-height: 18px;
    margin: -2px 0 0;
    color: #9fc2cf;
    font-size: 11px;
    line-height: 1.35;
}
.panorama-report-status.is-error { color: #ff8d96; }
.panorama-report-status.is-success { color: #70e6bd; }

@media (max-width: 620px) {
    .panorama-report-card {
        width: min(520px, calc(100vw - 24px));
        padding: 54px 18px 22px;
        gap: 12px;
    }
    .panorama-report-card h2 { padding: 0 34px; font-size: 19px; }
    .panorama-report-copy { font-size: 11.5px; }
    .panorama-report-reasons { grid-template-columns: 1fr; gap: 8px; }
    .panorama-report-reasons button { min-height: 48px; font-size: 10.5px; }
}

#hintControls {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 1085;
    display: none;
    width: 132px;
}

#game.pano-ready #hintControls {
    display: block;
}

#hintMenuToggle {
    display: block;
    width: 73px;
    height: 73px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 180ms ease;
}

#hintMenuToggle:hover {
    transform: scale(1.06);
}

#hintMenuToggle:active {
    transform: scale(.94);
}

#hintMenuToggle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#hintMenu {
    position: absolute;
    top: 79px;
    right: 0;
    display: grid;
    width: 132px;
    gap: 8px;
    pointer-events: none;
}

#hintMenu > * {
    opacity: 0;
    transform: translateY(-12px) scale(.92);
    transition:
        opacity 130ms ease,
        transform 260ms cubic-bezier(.18, 1.45, .38, 1);
}

#hintControls.is-expanded #hintMenu {
    pointer-events: auto;
}

#hintControls.is-expanded #hintMenu > * {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#hintControls.is-expanded #hintMenu > :nth-child(1) { transition-delay: 0ms; }
#hintControls.is-expanded #hintMenu > :nth-child(2) { transition-delay: 35ms; }
#hintControls.is-expanded #hintMenu > :nth-child(3) { transition-delay: 70ms; }
#hintControls.is-expanded #hintMenu > :nth-child(4) { transition-delay: 95ms; }

.hint-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition:
        transform 150ms ease,
        opacity 150ms ease,
        filter 150ms ease;
}

.hint-button img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.hint-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgb(255, 55, 64);
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image: var(--hint-mask-image);
    mask-image: var(--hint-mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hint-button.is-invalid-click::after {
    animation: hintInvalidOverlay 1.5s ease-in-out both;
}

@keyframes hintInvalidOverlay {
    0% { opacity: 0; }
    33.333% { opacity: .5; }
    100% { opacity: 0; }
}

.hint-button:hover:not(:disabled):not(.is-used) {
    transform: translateX(-2px) scale(1.02);
    filter: brightness(1.08);
}

.hint-button:disabled {
    cursor: not-allowed;
    opacity: .53;
}

.hint-button.is-locked {
    opacity: .53;
    cursor: not-allowed;
}

.hint-button.is-used {
    opacity: 1;
}

.hint-button.is-used img {
    opacity: .5;
    filter: grayscale(1) brightness(.68);
}

#hintControls.is-expanded #hintMenu > .hint-button.is-used {
    margin-block: -2px;
    transform: translateY(0) scale(.9);
    transform-origin: right center;
}

#hintMessage {
    margin: 0;
    padding: 0 3px;
    color: #d9f2ff;
    font-size: 10px;
    line-height: 1.25;
    text-shadow: 0 1px 3px #000;
}

#hintMessage.is-missclick {
    position: absolute;
    top: 46px;
    right: calc(100% + 10px);
    box-sizing: border-box;
    width: 230px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(160, 218, 238, .18);
    border-radius: 10px;
    background: rgba(8, 24, 33, .90);
    color: rgba(231, 245, 251, .92);
    box-shadow: 0 7px 20px rgba(0, 0, 0, .18);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-shadow: none;
    pointer-events: none;
    visibility: visible !important;
    transform-origin: right center;
    animation: hintMissClickIn 280ms both;
}

#hintMessage.is-missclick.is-leaving {
    animation: hintMissClickOut 200ms ease both;
}

@keyframes hintMissClickIn {
    0% {
        opacity: 0;
        transform: translateY(0) scale(.90);
    }
    35% {
        opacity: .55;
        transform: translateY(0) scale(1.05);
        animation-timing-function: ease;
    }
    70% {
        opacity: 1;
        transform: translateY(0) scale(.98);
        animation-timing-function: ease;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hintMissClickOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
}

#hintTooltip {
    position: absolute;
    top: 0;
    right: calc(100% + 8px);
    width: 162px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(158,222,244,.24);
    border-radius: 10px;
    background: rgba(10,27,37,.96);
    color: #d9f2ff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.28;
    text-align: center;
    pointer-events: none;
    visibility: hidden;
}

#hintTooltip.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (orientation: portrait) and (max-width: 600px) {
    #hintControls {
        top: 85px;
        right: max(10px, env(safe-area-inset-right));
        width: 118px;
    }

    #hintMenu {
        top: 68px;
        width: 118px;
        gap: 6px;
    }

    #hintMenuToggle {
        width: 62px;
        height: 62px;
    }

    #hintTooltip {
        width: 148px;
        font-size: 9px;
    }

    #hintMessage.is-missclick {
        top: 42px;
        right: calc(100% + 8px);
        width: min(205px, calc(100vw - 155px));
        font-size: 9px;
    }
}

/* Each round transition uses an uninterrupted dark loading screen. */
#game.round-loading #bottom {
    display: none;
}

#statusBarBackground,
#statusBarEndBackground {
    /* Two matched plaques cross-fade when the game reaches the final screen. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 250ms ease;
}

#statusBarBackground { opacity: 1; }
#statusBarEndBackground { display: none; opacity: 0; }

/* Keep the regular status bar on the final screen. Since #topbar stays below
   #gameOver, the original plaque, labels, timer, round, score and coins all
   receive the real final-screen blur and darkening. */
#game.game-complete #statusBarBackground { opacity: 1; }
#game.game-complete #statusBarEndBackground { opacity: 0; }

#statusBarBalanceMask {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    /* The first 450px are always masked; the right-hand part stays visible. */
    clip-path: inset(0 0 0 var(--balance-plaque-clip-left));
}

#statusBarBalanceBackground {
    position: absolute;
    top: var(--balance-plaque-offset-y);
    left: var(--balance-plaque-offset-x);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#statusContent {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translateY(var(--status-content-offset-y));
    opacity: 1;
    transition: opacity 220ms ease;
}

#statusRoundComplete {
    display: none;
    position: absolute;
    top: var(--round-complete-y);
    left: var(--round-complete-x);
    z-index: 3;
    max-width: 48%;
    color: #f1f4f5;
    font-size: var(--round-complete-font-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .035em;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 220ms ease;
    pointer-events: none;
}

#game.game-complete #statusContent { opacity: 1; }
#game.game-complete #statusRoundComplete { opacity: 0; }

.status-item {
    /* Shared anchor for the three status columns inside the main plaque. */
    position: absolute;
    top: var(--status-content-top);
}

.status-time {
    left: 23.7%;
    width: 17%;
}

.status-round {
    left: 43.7%;
    width: 17%;
}

.status-score {
    left: 61.8%;
    width: 23%;
}

.status-label {
    /* Uppercase header text and icon only: TIME, ROUND, SCORE. */
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f1f4f5;
    font-size: calc(2.7cqw * var(--hud-scale));
    font-weight: 300;
    line-height: 1;
}

.status-icon {
    /* Inline SVG icons before the header text: clock, pin, trophy. */
    width: calc(1.05em * var(--hud-scale));
    height: calc(1.05em * var(--hud-scale));
    flex: 0 0 auto;
    fill: none;
    stroke: #d8d8d8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.status-value {
    /* Main numeric row below each header. */
    margin-top: calc(var(--status-value-gap) * var(--hud-scale));
    font-size: calc(5.76cqw * var(--hud-scale));
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0.01em;
}

#timerMinutes,
.status-round #round,
.status-score #score {
    /* Blue bold values: timer minutes, current round, current score. */
    color: #0091bf;
    font-weight: 800;
}

#timerValue.is-paused { opacity: .55; }

.timer-separator,
#timerSeconds,
.status-total {
    /* Light-gray secondary values: timer seconds and round/score totals. */
    color: #d8d8d8;
    font-weight: 500;
}

/* At 00:59, minutes become gray and the remaining seconds turn yellow. */
#timerValue.is-under-one-minute #timerMinutes {
    color: #d8d8d8;
    font-weight: 500;
}

#timerValue.is-under-one-minute .timer-separator,
#timerValue.is-under-one-minute #timerSeconds {
    color: #fdd734;
}

#timerValue.is-under-one-minute #timerSeconds,
#timerValue.is-final-fifteen #timerSeconds {
    font-weight: 800;
}

/* The final 15 seconds use red seconds while minutes stay gray. */
#timerValue.is-final-fifteen .timer-separator,
#timerValue.is-final-fifteen #timerSeconds {
    color: #d80000;
}

.status-round .status-total,
.status-score .status-total {
    /* Smaller maximum values: /5 and /25000. */
    font-size: 0.7em;
}

.status-score .status-value {
    white-space: nowrap;
}

.timer-line {
    /* Temporarily hidden: retain its markup and update logic for a later return. */
    display: none;
    /* Full-width timer track below the time value. */
    position: relative;
    width: 100%;
    aspect-ratio: 117 / 10;
    height: auto;
    margin-top: calc(1cqw * var(--hud-scale));
    transform: translateY(var(--timer-line-offset-y));
}

.timer-line > img,
#timerBlueFill,
#timerBlueFill img {
    /* Layered white base and blue elapsed-time fill. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#timerBlueFill {
    /* JavaScript reveals this full-size SVG from left to right without scaling it. */
    --timer-fill: 0%;
    width: 100%;
    clip-path: inset(0 calc(100% - var(--timer-fill)) 0 0);
    transition: clip-path 250ms linear;
}

#timerBlueFill img {
    /* Blue SVG remains exactly aligned with the white SVG underneath. */
    width: 100%;
}

/* Portrait phone fit: keep all overlay content inside the narrow viewport. */
@media (orientation: portrait) and (max-width: 600px) {
    #topbar,
    #profileHudOverlay { width: 100vw; }
    #bottom { bottom: max(48px, env(safe-area-inset-bottom)); }
    #roundFeedback { width: min(94vw, 560px); }
    #nameField { height: 54px; }
    #nameStartButton { min-height: 48px; font-size: 12px; }

    /* Final screen: desktop artwork is 660px wide, so explicitly rescale the
       whole composition for portrait instead of letting it overflow sideways. */
    #gameOver {
        padding:
            max(14px, env(safe-area-inset-top))
            14px
            max(14px, env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .game-over-card {
        --result-level-x: 0px;
        --result-level-y: 0px;
        --result-level-size: min(100%, 360px);
        width: min(100%, 360px);
        gap: 10px;
        transform: translateY(clamp(20px, 3.5vh, 36px));
    }

    .final-score-summary {
        width: var(--result-level-size);
        max-width: 100%;
    }

    #finalScore {
        font-size: clamp(34px, 12vw, 52px);
    }

    #finalScoreLabel {
        margin-bottom: 6px;
        font-size: clamp(8px, 2.5vw, 10px);
    }

    #finalRank {
        width: 100%;
        margin: 4px 0 12px;
        padding: 0 6px;
        font-size: clamp(15px, 4.5vw, 19px);
        line-height: 1.2;
        letter-spacing: .055em;
        white-space: normal;
        overflow-wrap: normal;
    }

    #leadersButton,
    #playAgainButton,
    #menuButton {
        width: min(276.25px, 78vw);
        font-size: clamp(11px, 3.2vw, 14px);
    }

    .guest-conversion-offer {
        width: min(330px, calc(100vw - 40px));
    }

    .leaderboard-card { width: 100%; padding: 22px 14px; border-radius: 22px; }

    .leaderboard-card h2 {
        padding-inline: 30px;
        font-size: clamp(18px, 5.4vw, 22px);
        letter-spacing: .055em;
    }

    .leaderboard-tabs { margin-bottom: 14px; gap: 5px; padding: 4px; }
    .leaderboard-tab { min-height: 34px; padding-inline: 8px; font-size: 9px; letter-spacing: .035em; }

    #closeLeadersButton {
        top: 7px;
        right: 5px;
    }

    .leaderboard-head, .leaderboard-row { grid-template-columns: .48fr 1.2fr 1.05fr 1.05fr; gap: 6px; }
    .leaderboard-head { padding-inline: 8px; font-size: 9px; }
    .leaderboard-row { min-height: 46px; padding-inline: 8px; font-size: 11px; }
}

/* =========================
   BOTTOM
========================= */

#bottom {
    position: absolute;

    left: 50%;
    /* Keep Google's native logo/copyright attribution at the bottom edge
       unobscured by our game controls. Do not hide or restyle Google attribution. */
    bottom: max(48px, env(safe-area-inset-bottom));

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 15px;

    z-index: 20;
}

#mapControl {
    display: grid;
    justify-items: center;
}

/* Result phrase replaces the central map button after a guess is resolved. */
#roundFeedback {
    display: none;
    position: relative;
    width: min(840px, 90vw);
    aspect-ratio: 1000 / 310;
    user-select: none;
    -webkit-user-drag: none;
}

.round-feedback-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#roundFeedbackLower path,
#roundFeedbackDrops ellipse {
    fill: var(--feedback-color, #FF4C6E);
}

#roundFeedbackLower { transform: translateY(140%); }
#roundFeedbackUpper {
    transform: translateY(140%) scaleX(var(--feedback-upper-scale-x, 1));
    transform-origin: 45.25% 50%;
}
#roundFeedbackDrops { transform: scale(0.1); transform-origin: 50% 50%; opacity: 0; }

#roundFeedbackDistance,
#roundFeedbackText {
    position: absolute;
    z-index: 1;
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    white-space: nowrap;
}

#roundFeedbackText span {
    display: inline-block;
    opacity: 0;
    transform: translateY(120vh);
}

#roundFeedbackDistance {
    top: 13%;
    left: 2%;
    transform: rotate(-15deg);
    display: inline-grid;
    place-items: center;
    min-width: 4.2em;
    padding: 0.18em 0.54em 0.26em;
    font-size: clamp(11px, 1.575vw, 21px);
    font-weight: 800;
}

.round-feedback-distance-shape {
    position: absolute;
    z-index: 0;
    inset: -0.4em -0.62em;
    width: calc(100% + 1.24em);
    height: calc(100% + 0.8em);
    overflow: visible;
}

.round-feedback-distance-shape path {
    fill: rgba(16, 35, 46, 0.96);
    stroke: var(--feedback-color, #0091bf);
    stroke-width: 7;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

#roundFeedbackDistanceValue {
    position: relative;
    z-index: 1;
}

#roundFeedback.is-perfect-city #roundFeedbackDistance {
    display: none;
}

#roundFeedback.is-perfect-city #roundFeedbackText {
    top: 48%;
}

#roundFeedbackText {
    top: 43%;
    left: 50%;
    width: 82%;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-2deg);
    font-size: var(--feedback-text-size, clamp(30px, 5.7vw, 74px));
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.055em;
}

/* The base plaque rules above intentionally win on desktop. */
@media (orientation: portrait) and (max-width: 600px) {
    #roundFeedbackText {
        top: 46%;
        width: 86%;
        font-size: var(--feedback-text-size, clamp(22px, 8.5vw, 42px));
        line-height: 0.92;
        letter-spacing: -0.045em;
        white-space: nowrap;
    }
}


#game.round-result #mapControl {
    display: none;
}

#game.round-result #roundFeedback {
    display: block;
}

#game.round-result #roundFeedbackLower { animation: plaqueLowerIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#game.round-result #roundFeedbackUpper { animation: plaqueUpperIn 540ms 150ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#game.round-result #roundFeedbackDrops { animation: plaqueDropsIn 420ms 570ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#game.round-result #roundFeedbackText span { animation: letterRise 430ms calc(620ms + var(--letter-index) * 38ms) cubic-bezier(0.16, 1, 0.3, 1) both, letterWiggle 1.6s calc(1100ms + var(--letter-index) * 38ms) ease-in-out infinite; }
#game.round-result #roundFeedbackDistance { animation: badgePop 340ms 1.18s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* WebKit can leave dotted glyph trails when every letter owns a transformed
   layer. On phones animate the phrase as one layer instead. */
@media (orientation: portrait) and (max-width: 600px) {
    #game.round-result #roundFeedbackText {
        animation: feedbackTextInMobile 430ms 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    #game.round-result #roundFeedbackText span {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

@keyframes plaqueLowerIn { to { transform: translateY(-6%) scaleY(0.86); } }
@keyframes plaqueUpperIn { to { transform: translateY(3%) scaleX(var(--feedback-upper-scale-x, 1)); } }
@keyframes plaqueDropsIn { 0% { opacity: 0; transform: scale(0.08); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes letterRise { to { opacity: 1; transform: translateY(0); } }
@keyframes letterWiggle { 0%,100% { transform: translate(0) rotate(0); } 35% { transform: translate(1px,-1px) rotate(1deg); } 70% { transform: translate(-1px,1px) rotate(-1deg); } }
@keyframes feedbackTextInMobile {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 28px)) rotate(-2deg); }
    to { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); }
}
@keyframes badgePop { 0% { opacity: 0; transform: rotate(-15deg) scale(0); } 70% { opacity: 1; transform: rotate(-15deg) scale(1.1); } 100% { opacity: 1; transform: rotate(-15deg) scale(1); } }

@keyframes roundFeedbackAppear {
    from { opacity: 0; transform: translateY(12px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#mapActionLabel {
    display: none;
    width: 138px;
    min-height: 14px;
    margin-top: 6px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-align: center;
}

#game.pano-ready #mapActionLabel {
    /* Kept in the DOM and localization for a possible later return. */
    display: none;
}

#mapActionLabel.is-label-out {
    animation: mapLabelOut 120ms ease-in both;
}

#mapActionLabel.is-label-in {
    animation: mapLabelIn 160ms ease-out both;
}

@keyframes mapLabelOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

@keyframes mapLabelIn {
    from { opacity: 0; transform: translateY(5px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

button {
    border: none;

    padding: 13px 22px;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;

    border-radius: 5px;
}

#guessButton {
    background: white;
    color: black;
}

#nextButton {
    display: none;

    background: white;
    color: black;
}

#result {
    color: white;

    font-weight: bold;

    text-shadow:
        0 2px 5px black;
}

/* =========================
   MAPLIBRE
========================= */

.maplibregl-ctrl-attrib {
    font-size: 9px;
}

.maplibregl-ctrl-zoom {
    display: none;
}

.entry-choice .name-gate-legal { margin-top: 12px; }
.auth-card .name-gate-legal { margin-top: 6px; }

/* Visible OSM/OpenMapTiles attribution without MapLibre's compact info button. */
#mapAttribution {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.82);
    color: #1a2a33;
    font: 9px/1.2 Arial, sans-serif;
    pointer-events: auto;
}

#mapAttribution a {
    color: inherit;
}

/* Distance label centred on the result line between the guess and answer. */
.result-distance-label {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(13, 28, 37, 0.94);
    color: #f1f4f5;
    font-family: "Inter", Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

/* ============================================================
   MAP EXPANDED — REAL 50/50 LAYOUT
   ============================================================ */

#game {
    overflow: hidden;
}


/* NORMAL */

#streetview {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
}


/* ============================================================
   EXPANDED
   ============================================================ */

#game.map-expanded {
    display: flex;
    flex-direction: row;
}


/* Panorama moves to the LEFT half */

#game.map-expanded #streetview {
    position: absolute;

    left: 0;
    top: 0;

    width: 50vw;
    height: 100vh;
}


/* Map becomes the RIGHT half */

#game.map-expanded #map {
    position: absolute;

    left: 50vw;
    right: auto;
    top: 0;
    bottom: auto;

    width: 50vw;
    height: 100vh;

    border-radius: 0;
}


/* ============================================================
   MAP BUTTON
   ============================================================ */

#mapToggle {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 1000;

    padding: 9px 14px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;

    background: rgba(10,11,13,.85);

    color: #fff;

    font-family: "Inter", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;

    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   MAP ZOOM BUTTONS OFF
   ============================================================ */

.maplibregl-ctrl-zoom {
    display: none;
}


/* Guest profile controls are intentionally disabled, not dimmed. */
.profile-avatar:disabled,
.profile-name-field:disabled {
    color: #fff;
    opacity: 1;
    -webkit-text-fill-color: #fff;
}

/* =========================
   MODE / DIFFICULTY FLOW
========================= */

/* The cyan peeking shapes used to be negative-z pseudo-elements on the mode
   shell. During the mode -> difficulty transition Chromium can briefly paint
   them above the card before rebuilding the stacking context. Remove these
   decorations from this screen entirely so there is nothing transient to flash. */
.mode-selection-shell::before,
.mode-selection-shell::after {
    content: none !important;
    display: none !important;
}

.difficulty-selection[hidden] { display: none; }

.mode-selection {
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    scrollbar-width: none;
}
.mode-selection::-webkit-scrollbar { display: none; }

.mode-selection.is-opening .mode-selection-shell {
    animation: modeScreenIn 220ms cubic-bezier(.16,1,.3,1) both;
}
.mode-selection.is-leaving .mode-selection-shell {
    animation: modeScreenOut 150ms ease both;
}

@keyframes modeScreenIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modeScreenOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-8px) scale(.99); }
}

.profile-action--difficulty {
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(35, 203, 239, .58);
    background: rgba(9, 45, 58, .84);
    box-shadow: inset 0 0 16px rgba(30, 205, 240, .06);
    text-align: center;
    text-transform: uppercase;
}
.profile-action--difficulty:hover { filter: brightness(1.08); }

.difficulty-selection {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: grid;
    place-items: center;
    padding: 24px;
    /* Fully opaque base prevents decorative elements from the previous
       screen flashing through while the difficulty view is mounted. */
    background:
        radial-gradient(circle at 50% 20%, rgba(14, 191, 240, .15), transparent 34%),
        #031016;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #f5f8fb;
}

.difficulty-shell {
    --difficulty-color: #54d96d;
    --difficulty-position: 0%;
    position: relative;
    width: min(960px, calc(100vw - 32px));
    padding: 70px 72px 42px;
    border: 1.5px solid rgba(70, 205, 235, .34);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--difficulty-color) 12%, transparent), transparent 42%),
        linear-gradient(160deg, rgba(9, 32, 40, .98), rgba(3, 14, 19, .99));
    box-shadow:
        inset 0 0 28px rgba(60, 210, 245, .055),
        0 28px 72px rgba(0, 0, 0, .46);
    text-align: center;
    transition: --difficulty-color 180ms ease;
}

.difficulty-back { top: 26px; left: 28px; }

.difficulty-title {
    max-width: 760px;
    margin: 8px auto 54px;
    padding-inline: 48px;
    color: #f7fbff;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 850;
    line-height: 1.13;
    letter-spacing: .015em;
}

.difficulty-slider {
    position: relative;
    width: min(720px, 86%);
    height: 72px;
    margin: 0 auto;
    cursor: grab;
    touch-action: none;
    outline: none;
    user-select: none;
}
.difficulty-slider.is-dragging { cursor: grabbing; }
.difficulty-slider:focus-visible::after {
    content: "";
    position: absolute;
    inset: 8px -18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    pointer-events: none;
}

.difficulty-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5px;
    border-radius: 999px;
    background: rgba(175, 205, 218, .18);
    transform: translateY(-50%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}

.difficulty-track-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--difficulty-position);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #54d96d, #a9dd55, #f1d54b, #ff913d, #ff4138);
    opacity: .72;
}

.difficulty-stop {
    position: absolute;
    left: var(--stop);
    top: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(8, 26, 34, .98);
    border-radius: 50%;
    background: rgba(128, 161, 176, .55);
    box-shadow: 0 0 0 1px rgba(191, 222, 235, .2);
    transform: translate(-50%, -50%);
}

.difficulty-thumb {
    position: absolute;
    left: var(--difficulty-position);
    top: 50%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 4px solid rgba(230, 250, 255, .92);
    border-radius: 50%;
    background: var(--difficulty-color);
    box-shadow:
        0 0 0 7px color-mix(in srgb, var(--difficulty-color) 15%, transparent),
        0 0 30px color-mix(in srgb, var(--difficulty-color) 34%, transparent),
        0 10px 24px rgba(0,0,0,.32);
    color: #071217;
    font: 900 21px/1 Inter,Arial,sans-serif;
    transform: translate(-50%, -50%);
    transition: left 160ms cubic-bezier(.16,1,.3,1), background-color 120ms linear, box-shadow 120ms linear;
    pointer-events: none;
}
.difficulty-slider.is-dragging .difficulty-thumb { transition: background-color 90ms linear, box-shadow 90ms linear; }

/* All difficulty phrases occupy the same centred caption area below the
   slider. JS cross-fades them while the thumb moves between levels, so the
   caption never shifts horizontally between first-run and profile contexts. */
.difficulty-phrases {
    position: relative;
    width: min(720px, 86%);
    height: 86px;
    margin: 24px auto 0;
}

.difficulty-phrase {
    --phrase-opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    width: min(660px, 100%);
    margin: 0;
    color: #f4f8fb;
    font-size: clamp(14px, 1.65vw, 18px);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    opacity: var(--phrase-opacity);
    transform: translateX(-50%);
    transition: opacity 150ms ease;
    pointer-events: none;
}

.difficulty-confirm {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    border-color: color-mix(in srgb, var(--difficulty-color) 72%, #ffffff);
    background: color-mix(in srgb, var(--difficulty-color) 78%, #0b4650);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--difficulty-color) 20%, transparent);
    transition: transform 160ms ease, filter 160ms ease, background-color 140ms linear, border-color 140ms linear;
}

.difficulty-first-run-hint {
    min-height: 18px;
    margin: 18px auto 0;
    max-width: 660px;
    color: rgba(192, 210, 221, .62);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
}
.difficulty-first-run-hint[hidden] { visibility: hidden; display: block; }

@media (max-width: 760px) {
    .difficulty-selection { padding: 16px; }
    .difficulty-shell {
        padding: 58px 22px 28px;
        border-radius: 28px;
    }
    .difficulty-back { top: 18px; left: 20px; }
    .difficulty-title {
        margin: 4px auto 42px;
        padding-inline: 34px;
        font-size: 22px;
    }
    .difficulty-slider,
    .difficulty-phrases { width: 88%; }
    .difficulty-slider { height: 64px; }
    .difficulty-thumb { width: 50px; height: 50px; font-size: 18px; }
    .difficulty-stop { width: 15px; height: 15px; }
    .difficulty-phrases { height: 96px; margin-top: 20px; }
    .difficulty-phrase { width: min(100%, 360px); font-size: 13px; line-height: 1.32; }
    .difficulty-confirm { margin-top: 6px; }
    .difficulty-first-run-hint { margin-top: 16px; max-width: 300px; font-size: 12.5px; }
}

/* ============================================================
   MODE 2 — FIND CITY
   ============================================================ */

#game.mode-find-city #streetview {
    display: none !important;
}

#game.mode-find-city #map {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

#game.mode-find-city #mapControl,
#game.mode-find-city #mapOpenButton,
#game.mode-find-city #mapActionLabel {
    display: none !important;
}

#game.mode-find-city.pano-ready #mapConfirmButton {
    display: block !important;
}

#game.mode-find-city #bottom {
    z-index: 1000 !important;
    pointer-events: none;
}

#game.mode-find-city #roundFeedback {
    pointer-events: none;
}

#game.mode-find-city #mapConfirmButton {
    pointer-events: auto;
}

#cityPrompt {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(2, 9, 13, 0.08);
}

#cityPrompt.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.city-prompt-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(620px, calc(100vw - 36px));
    padding: 26px 34px 30px;
    border: 1.5px solid rgba(70, 205, 235, .38);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 0%, rgba(25, 206, 244, .13), transparent 54%),
        linear-gradient(160deg, rgba(9, 32, 40, .97), rgba(3, 14, 19, .985));
    box-shadow:
        inset 0 0 28px rgba(60, 210, 245, .07),
        0 24px 70px rgba(0, 0, 0, .46);
    color: #fff;
    text-align: center;
    transform: scale(.82);
    opacity: 0;
}

#cityPrompt.is-visible:not(.is-leaving) .city-prompt-card {
    animation: cityPromptIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#cityPrompt.is-leaving .city-prompt-card {
    animation: cityPromptOut 250ms cubic-bezier(.55, 0, 1, .45) both;
}

/* After the three-second reveal the very same prompt becomes a compact
   persistent reminder at the bottom of the map for the active round. */
#cityPrompt.is-reminder {
    inset: auto auto max(18px, env(safe-area-inset-bottom)) 50%;
    display: block;
    width: auto;
    padding: 0;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    background: transparent;
    transform: translateX(-50%);
}

#cityPrompt.is-reminder .city-prompt-card {
    width: max-content;
    min-width: 190px;
    max-width: min(440px, calc(100vw - 120px));
    padding: 9px 18px 11px;
    gap: 3px;
    border-radius: 18px;
    opacity: 1;
    transform: none;
    box-shadow:
        inset 0 0 20px rgba(60, 210, 245, .06),
        0 12px 34px rgba(0, 0, 0, .38);
    animation: cityReminderIn 320ms cubic-bezier(.16, 1, .3, 1) both;
}

#cityPrompt.is-reminder #cityPromptLabel {
    font-size: 9px;
    letter-spacing: .11em;
}

#cityPrompt.is-reminder #cityPromptName {
    font-size: clamp(18px, 2.35vw, 27px);
    line-height: 1;
    letter-spacing: -.02em;
}

#cityPromptLabel {
    color: rgba(220, 237, 244, .68);
    font-size: clamp(11px, 1.35vw, 15px);
    font-weight: 700;
    letter-spacing: .12em;
}

#cityPromptName {
    max-width: 100%;
    color: #f8fbff;
    font-size: clamp(34px, 6vw, 72px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

@keyframes cityPromptIn {
    0% { opacity: 0; transform: scale(.72); }
    72% { opacity: 1; transform: scale(1.035); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes cityPromptOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(.58); }
}

@keyframes cityReminderIn {
    0% { opacity: 0; transform: translateY(56px) scale(.72); }
    72% { opacity: 1; transform: translateY(-3px) scale(1.025); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile mode cards: every card keeps the same responsive fixed height,
   sized for the longest description, so content never drives or clips cards. */
@media (max-width: 760px) {
    #cityPrompt.is-reminder {
        bottom: max(14px, env(safe-area-inset-bottom));
    }
    #cityPrompt.is-reminder .city-prompt-card {
        min-width: 160px;
        max-width: min(320px, calc(100vw - 92px));
        padding: 8px 14px 10px;
        border-radius: 16px;
    }
    #cityPrompt.is-reminder #cityPromptName {
        font-size: clamp(16px, 5vw, 21px);
    }

    .mode-card {
        aspect-ratio: auto;
        height: clamp(330px, 88vw, 410px);
        min-height: clamp(330px, 88vw, 410px);
        grid-template-rows: auto 1fr;
        align-content: start;
        overflow: hidden;
    }

    .mode-card-content {
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 12px 6px 8px;
        align-content: start;
    }

    .mode-card-description {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .mode-card-locked .mode-card-content {
        place-content: start center;
        align-content: start;
        padding-top: 12px;
    }
}

@media (max-width: 520px) {
    .mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .mode-card {
        padding: 10px;
        border-radius: 24px;
    }

    .mode-card-media {
        border-radius: 18px;
    }

    .mode-card-content {
        gap: 8px;
        padding: 10px 3px 7px;
    }

    .mode-card-title {
        font-size: 16px;
        line-height: 1.08;
    }

    .mode-card-description {
        font-size: 10px;
        line-height: 1.34;
    }

    .city-prompt-card {
        width: min(92vw, 520px);
        padding: 22px 20px 25px;
        border-radius: 26px;
    }
}


/* Difficulty changes made during an active game are queued for the next game. */
.difficulty-deferred-notice {
    position: fixed;
    inset: 0;
    z-index: 5300;
    display: grid;
    place-items: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    background: rgba(2, 10, 14, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity .18s ease, visibility .18s ease;
}

.difficulty-deferred-notice.is-visible {
    visibility: visible;
    opacity: 1;
}

.difficulty-deferred-card {
    width: min(430px, calc(100vw - 32px));
    padding: 30px 28px 26px;
    border: 1.5px solid rgba(70, 205, 235, .34);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(9, 32, 40, .98), rgba(3, 14, 19, .99));
    box-shadow: inset 0 0 26px rgba(60, 210, 245, .055), 0 24px 60px rgba(0, 0, 0, .46);
    color: #f5f8fb;
    text-align: center;
}

.difficulty-deferred-card h2 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.15;
}

.difficulty-deferred-card p {
    margin: 0 auto 22px;
    max-width: 330px;
    color: rgba(226, 238, 244, .76);
    font-size: 14px;
    line-height: 1.45;
}

.difficulty-deferred-card .auth-action {
    margin: 0 auto;
}


/* Round action acknowledgement: the confirm control visibly changes state on the
   same click that resolves the round. */
#mapConfirmButton.is-next-round {
    animation: nextRoundButtonReady 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nextRoundButtonReady {
    0% { transform: scale(0.82) rotate(-8deg); }
    65% { transform: scale(1.08) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}