:root {
    color-scheme: light;
    font-family: Trebuchet MS, Avenir Next Rounded, Avenir Next, ui-rounded, Nunito Sans, system-ui, sans-serif;
    --ui-ink: #142347;
    --ui-ink-strong: #071126;
    --ui-muted: #556b89;
    --ui-dim: #7d8fa8;
    --ui-bg: #dceeff;
    --ui-panel: rgba(252, 254, 255, .96);
    --ui-panel-strong: rgba(255, 255, 255, .99);
    --ui-navy: #102653;
    --ui-navy-2: #1d437f;
    --ui-blue: #2f98f4;
    --ui-blue-2: #0c6fce;
    --ui-blue-soft: #dcefff;
    --ui-red: #ef4f5f;
    --ui-red-dark: #b92f42;
    --ui-green: #3fc36c;
    --ui-gold: #ffd15d;
    --ui-orange: #ff9f43;
    --ui-line: rgba(16, 38, 83, .24);
    --ui-line-hot: rgba(47, 152, 244, .72);
    --ui-shadow: rgba(7, 17, 38, .28);
    --ui-ring: 0 0 0 3px rgba(255, 209, 93, .48);
    --asset-v4-map-frame: url(/assets/map-frame-eoUITTSt.png);
    --asset-v4-player-arrow: url(/assets/player-arrow-ZlBKBwMI.png);
    --asset-v4-objective-marker: url(/assets/objective-marker-zh-8oGEp.png);
    --asset-v4-center: url(/assets/pokemon-center-C9pecpWG.png);
    --asset-v4-mart: url(/assets/poke-mart-DnSQn1B4.png);
    --asset-v4-gate: url(/assets/route-gate-CE2gy-Pw.png);
    --asset-v4-cave: url(/assets/cave-CHZPMLTn.png);
    --asset-v4-water: url(/assets/water-B6k7MhH6.png);
    --asset-v4-trainer: url(/assets/trainer-marker-DXKeTHdT.png);
    --asset-v4-money-chip: url(/assets/money-chip-Cv1iYZmU.png);
    --asset-v4-pokeball-chip: url(/assets/pokeball-chip-tb7boTmW.png);
    --asset-v4-party-row: url(/assets/party-ball-row-KReU7MZw.png);
    --asset-v4-objective-badge: url(/assets/objective-badge-C0S5FLW6.png);
    --asset-v4-dex-device: url(/assets/dex-device-Cl_Ts73L.png);
    --asset-v4-dex-screen: url(/assets/dex-screen-Cec-hak9.png);
    --asset-v4-seen-stamp: url(/assets/seen-stamp-B4kyoxpv.png);
    --asset-v4-caught-stamp: url(/assets/caught-stamp-CCTB76rh.png);
    --asset-v4-unknown-tile: url(/assets/unknown-tile-B8WGwjgt.png);
    --asset-v4-selector: url(/assets/pokeball-selector-BBe9Gfz_.png);
    --asset-v4-party-ball: url(/assets/party-ball-filled-CPh1F3ky.png);
    --asset-v4-battle-hp-panel: url(/assets/hp-panel-B8DEAIpA.png);
    --asset-v4-command-fight: url(/assets/command-fight-DT33Thuk.png);
    --asset-v4-command-bag: url(/assets/command-bag-ByMAgJwe.png);
    --asset-v4-command-pokemon: url(/assets/command-pokemon-CyEZGSW-.png);
    --asset-v4-command-run: url(/assets/command-run-B3zZPMpl.png);
    --asset-v4-capture-ring: url(/assets/capture-ring-BKZwr579.png);
    --asset-v4-thrown-ball: url(/assets/thrown-ball-Blhj1E9P.png);
    --asset-v4-shake-1: url(/assets/shake-1-LOh47PDH.png);
    --asset-v4-shake-2: url(/assets/shake-2-CVFQ_cNn.png);
    --asset-v4-shake-3: url(/assets/shake-3-Q3TnyY34.png);
    --asset-v4-caught-burst: url(/assets/caught-burst-yAuOH7DB.png);
    --asset-v4-broke-free: url(/assets/broke-free-burst-D2szwaco.png);
    background: var(--ui-bg);
    color: var(--ui-ink)
}

* {
    box-sizing: border-box
}

html,
body,
#game-shell,
#game {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden
}

body {
    min-width: 320px;
    min-height: 100vh;
    background: radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .58), transparent 24%), radial-gradient(circle at 84% 6%, rgba(47, 152, 244, .24), transparent 28%), linear-gradient(145deg, #e8f6ff, #b9dcff 48%, #f8fbff)
}

button {
    font: inherit
}

button:focus-visible {
    outline: none;
    box-shadow: var(--ui-ring)
}

#game-shell {
    position: relative;
    background: #b9dcff
}

canvas {
    display: block;
    image-rendering: pixelated
}

#game canvas {
    width: 100%;
    height: 100%;
    filter: saturate(1.12) contrast(1.04)
}

#boot-error-panel {
    position: fixed;
    top: 24px;
    right: 24px;
    bottom: 24px;
    left: 24px;
    z-index: 30;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 14px;
    max-width: 720px;
    margin: auto;
    border: 4px solid var(--ui-navy);
    border-radius: 18px;
    background: var(--ui-panel-strong);
    box-shadow: 0 26px 70px #07112657;
    padding: 22px;
    color: var(--ui-ink)
}

#boot-error-panel strong {
    color: var(--ui-red-dark);
    font-size: 22px;
    font-weight: 1000
}

#boot-error-panel pre {
    width: 100%;
    max-height: 42vh;
    margin: 0;
    overflow: auto;
    border: 2px solid rgba(16, 38, 83, .16);
    border-radius: 12px;
    background: #eef7ff;
    padding: 12px;
    white-space: pre-wrap
}

#boot-error-panel button {
    min-height: 42px;
    border: 3px solid #ffffff;
    border-radius: 12px;
    background: linear-gradient(180deg, #55b8ff, var(--ui-blue));
    box-shadow: 0 0 0 2px var(--ui-navy), inset 0 -4px #07112624;
    color: #fff;
    font-weight: 1000
}

#victory-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 32;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 30%, rgba(255, 209, 93, .28), transparent 46%), #05173ad1;
    animation: victory-fade .32s ease both
}

.victory-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(460px, calc(100vw - 40px));
    border: 4px solid #ffffff;
    border-radius: 22px;
    background: linear-gradient(180deg, #1d70c9, var(--ui-navy));
    box-shadow: 0 0 0 4px var(--ui-navy), 0 28px 72px #02102a80;
    padding: 30px 26px;
    text-align: center;
    color: #fff
}

.victory-crest {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #ffe6a1, var(--ui-gold));
    box-shadow: 0 0 0 4px #fff, 0 0 28px #ffd15dcc;
    color: var(--ui-navy);
    font-size: 38px;
    font-weight: 1000
}

.victory-title {
    color: var(--ui-gold);
    font-size: 27px;
    font-weight: 1000;
    text-shadow: 0 2px 0 rgba(2, 16, 42, .4)
}

.victory-body {
    margin: 0;
    color: #eaf4ff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4
}

.victory-team {
    margin: 0;
    color: #ffd98b;
    font-size: 13px;
    font-weight: 1000
}

.victory-continue {
    min-height: 50px;
    margin-top: 6px;
    padding: 0 28px;
    border: 4px solid #ffffff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ff6976, var(--ui-red));
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -6px #07112633;
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
    cursor: pointer;
    text-shadow: 0 2px 0 rgba(2, 16, 42, .34)
}

@keyframes victory-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#starter-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 31;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    padding: 24px;
    background: radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .14), transparent 44%), #05173adb;
    animation: victory-fade .28s ease both
}

.starter-title {
    color: #fff;
    font-size: 22px;
    font-weight: 1000;
    text-align: center;
    text-shadow: 0 2px 0 rgba(2, 16, 42, .4)
}

.starter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: min(820px, calc(100vw - 36px))
}

.starter-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    cursor: pointer;
    border: 4px solid #ffffff;
    border-radius: 18px;
    background: linear-gradient(180deg, #1d70c9, var(--ui-navy));
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -6px #07112633, 0 16px 34px #02102a66;
    min-height: 226px;
    padding: 14px 10px;
    color: #fff;
    transition: transform .12s ease, border-color .12s ease;
    touch-action: manipulation
}

.starter-card:hover,
.starter-card:focus-visible,
.starter-card[data-selected=true] {
    transform: translateY(-3px);
    border-color: var(--ui-gold);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -6px #07112633, 0 20px 36px #02102a75, 0 0 0 8px #ffd65833
}

.starter-card:active {
    transform: translateY(2px) scale(.98)
}

.starter-card:focus-visible {
    outline: 4px solid var(--ui-gold);
    outline-offset: 5px
}

.starter-sprite {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .9) 0 18px, transparent 19px), linear-gradient(180deg, #ffefe2, #c9e9ff);
    box-shadow: inset 0 -3px #1026531f;
    padding: 4px
}

.starter-name {
    font-size: 15px;
    font-weight: 1000;
    text-shadow: 0 2px 0 rgba(2, 16, 42, .34)
}

.starter-number,
.starter-description,
.starter-type-chip {
    letter-spacing: 0
}

.starter-number {
    border-radius: 999px;
    background: #ffffffeb;
    padding: 3px 8px;
    color: var(--ui-navy);
    font-size: 12px;
    font-weight: 1000
}

.starter-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px
}

.starter-type-chip {
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 999px;
    background: #fff3;
    padding: 2px 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 900
}

.starter-description {
    color: #ffffffe0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center
}

#character-creator-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .18), transparent 36%), #05173ae0;
    color: #fff;
    animation: victory-fade .28s ease both
}

.character-creator-title {
    font-size: 26px;
    font-weight: 1000;
    text-shadow: 0 3px 0 rgba(2, 16, 42, .42)
}

.character-creator-subtitle {
    margin: 0;
    text-align: center;
    font-weight: 850
}

.character-creator-shell {
    display: grid;
    grid-template-columns: minmax(210px, .42fr) minmax(0, 1fr);
    gap: 16px;
    width: min(980px, calc(100vw - 36px));
    max-height: min(72vh, 760px);
    align-items: stretch
}

.character-creator-preview-panel {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    min-height: 420px;
    padding: 18px;
    border: 4px solid #ffffff;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .52), transparent 36%), linear-gradient(180deg, #dff3ff, #f9fcff 52%, #d3e8ff);
    color: var(--ui-navy);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -7px #0711261f, 0 16px 34px #02102a61
}

.character-creator-preview-badge {
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ui-red), #b91f2e);
    padding: 5px 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -3px #0711262e
}

.character-creator-preview-sprite {
    width: 132px;
    height: 132px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 12px 0 rgba(24, 40, 68, .16))
}

.character-creator-preview-name {
    font-size: 22px;
    font-weight: 950
}

.character-creator-preview-meta {
    max-width: 100%;
    color: #315887;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center
}

.character-creator-options {
    display: grid;
    gap: 10px;
    overflow: auto;
    padding: 2px 4px 2px 2px
}

.character-creator-section {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 3px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    background: #082252a3;
    box-shadow: inset 0 -5px #02102a29
}

.character-creator-section-title {
    font-size: 14px;
    font-weight: 950
}

.character-creator-section-subtitle {
    margin-top: -5px;
    color: #ffffffc7;
    font-size: 11px;
    font-weight: 750
}

.character-creator-template-grid,
.character-creator-option-grid,
.character-creator-swatch-grid {
    display: grid;
    gap: 8px
}

.character-creator-template-grid,
.character-creator-option-grid,
.character-creator-swatch-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.character-creator-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: min(880px, calc(100vw - 36px))
}

.character-creator-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 190px;
    padding: 12px 10px;
    border: 4px solid #ffffff;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #e6f4ff);
    color: var(--ui-navy);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -6px #0711261f, 0 16px 34px #02102a61;
    font-weight: 850;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease
}

.character-creator-card:hover,
.character-creator-card:focus-visible,
.character-creator-card[data-selected=true] {
    transform: translateY(-3px);
    border-color: var(--ui-gold)
}

.character-creator-card:active {
    transform: translateY(2px) scale(.98)
}

.character-creator-card:focus-visible {
    outline: 4px solid var(--ui-gold);
    outline-offset: 5px
}

.character-creator-card[data-chosen=true],
.character-creator-option[data-chosen=true] {
    border-color: var(--ui-gold);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -5px #0711261f, 0 0 0 6px #ffd25052
}

.character-creator-sprite {
    width: 74px;
    height: 74px;
    object-fit: contain;
    image-rendering: pixelated
}

.character-creator-name {
    font-size: 16px;
    font-weight: 1000
}

.character-creator-meta,
.character-creator-description {
    font-size: 11px;
    line-height: 1.25;
    text-align: center
}

.character-creator-meta {
    color: #34619a;
    text-transform: capitalize
}

.character-creator-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px 8px;
    min-height: 54px;
    padding: 8px 9px;
    border: 3px solid #ffffff;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #e7f4ff);
    color: var(--ui-navy);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    text-align: left;
    box-shadow: 0 0 0 2px var(--ui-navy), inset 0 -4px #0711261f;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease
}

.character-creator-option strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 950
}

.character-creator-option span:not(.character-creator-swatch) {
    grid-column: 1 / -1;
    color: #385f8d;
    font-size: 10px;
    font-weight: 750
}

.character-creator-option:hover,
.character-creator-option:focus-visible,
.character-creator-option[data-selected=true] {
    transform: translateY(-2px);
    border-color: var(--ui-gold)
}

.character-creator-option:active {
    transform: translateY(1px) scale(.98)
}

.character-creator-option:focus-visible {
    outline: 4px solid var(--ui-gold);
    outline-offset: 4px
}

.character-creator-swatch {
    display: block;
    width: 22px;
    height: 22px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--ui-navy)
}

.character-creator-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.character-creator-cancel,
.character-creator-confirm,
.character-creator-randomize,
.character-creator-reset {
    min-width: 140px;
    min-height: 44px;
    border: 3px solid #ffffff;
    border-radius: 14px;
    color: #fff;
    font-weight: 950;
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -4px #07112633;
    cursor: pointer;
    transition: transform .12s ease
}

.character-creator-cancel {
    background: linear-gradient(180deg, #ff6976, var(--ui-red))
}

.character-creator-confirm {
    background: linear-gradient(180deg, #4fb5ff, #126dcc)
}

.character-creator-randomize {
    background: linear-gradient(180deg, #8d62e9, #5930ac)
}

.character-creator-reset {
    background: linear-gradient(180deg, #39c66f, #188248)
}

.character-creator-cancel:hover,
.character-creator-confirm:hover,
.character-creator-randomize:hover,
.character-creator-reset:hover,
.character-creator-cancel:focus-visible,
.character-creator-confirm:focus-visible,
.character-creator-randomize:focus-visible,
.character-creator-reset:focus-visible,
.character-creator-cancel[data-selected=true],
.character-creator-confirm[data-selected=true],
.character-creator-randomize[data-selected=true],
.character-creator-reset[data-selected=true] {
    transform: translateY(-2px);
    outline: 0
}

.character-creator-cancel:active,
.character-creator-confirm:active,
.character-creator-randomize:active,
.character-creator-reset:active {
    transform: translateY(1px) scale(.98)
}

.character-creator-final-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(420px, calc(100vw - 36px));
    padding: 24px;
    border: 4px solid #ffffff;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .58), transparent 36%), linear-gradient(180deg, #fff, #dff3ff);
    color: var(--ui-navy);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -8px #0711261f, 0 18px 40px #02102a6b
}

.character-creator-final-sprite {
    width: 144px;
    height: 144px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 12px 0 rgba(24, 40, 68, .16))
}

.character-creator-final-card strong {
    font-size: 22px;
    font-weight: 950
}

.character-creator-final-card span {
    color: #315887;
    font-size: 12px;
    font-weight: 850;
    text-align: center
}

.character-creator-final-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

#landing-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 28;
    display: grid;
    overflow: hidden;
    background: #58bfff;
    color: #fff
}

#landing-overlay[hidden] {
    display: none
}

body[data-landing-open=true] #hud,
body[data-landing-open=true] #field-left-stack,
body[data-landing-open=true] #world-minimap,
body[data-landing-open=true] #quest-tracker,
body[data-landing-open=true] #field-menu,
body[data-landing-open=true] #interaction-prompt,
body[data-landing-open=true] #quest-toast,
body[data-landing-open=true] #pokemon-menu,
body[data-landing-open=true] #battle-overlay {
    display: none !important
}

#landing-hero {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 74% center;
    filter: saturate(1.08) contrast(1.03)
}

body[data-landing-rail-mode=visible] #landing-hero {
    object-position: right center
}

body[data-landing-rail-mode=compact] #landing-hero {
    object-position: 70% center
}

body[data-landing-rail-mode=hidden] #landing-hero {
    object-position: 58% center
}

#landing-vignette {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 68% 48%, rgba(255, 255, 255, .08), transparent 28%), linear-gradient(90deg, #05173ac2, #05173a57 42%, #05173a1a 72%), linear-gradient(0deg, rgba(5, 23, 58, .52), transparent 38%)
}

#landing-content {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 18px;
    width: min(560px, calc(100vw - 34px));
    min-height: 100%;
    padding: 42px clamp(18px, 5vw, 74px)
}

#landing-x-link {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    color: var(--ui-navy);
    text-decoration: none
}

#landing-x-link svg {
    width: 15px;
    height: 15px;
    display: block
}

#landing-x-link:hover,
#landing-x-link:focus-visible {
    outline: 3px solid var(--ui-gold);
    outline-offset: 2px;
    transform: translateY(-1px)
}

#landing-logo {
    width: min(520px, 88vw);
    height: auto;
    filter: drop-shadow(0 12px 0 rgba(2, 16, 42, .28)) drop-shadow(0 24px 28px rgba(2, 16, 42, .36));
    animation: landing-logo-bob 4.8s ease-in-out infinite
}

#landing-subtitle {
    width: min(460px, 100%);
    margin: -4px 0 0;
    border: 3px solid #ffffff;
    border-radius: 18px;
    background: linear-gradient(180deg, #10438beb, #071942eb);
    box-shadow: inset 0 -4px #ffffff1f, 0 14px 30px #02102a52;
    padding: 12px 16px;
    color: #fff;
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 900;
    line-height: 1.24;
    text-shadow: 0 2px 0 rgba(2, 16, 42, .35)
}

#landing-actions {
    display: grid;
    gap: 12px;
    width: min(360px, 100%)
}

#landing-actions button {
    position: relative;
    overflow: hidden;
    min-height: 58px;
    cursor: pointer;
    border: 4px solid #ffffff;
    border-radius: 18px;
    background: radial-gradient(circle at 30px 50%, #ffffff 0 9px, #0a1f47 10px 12px, transparent 13px), linear-gradient(180deg, #ff6976, var(--ui-red));
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -7px #07112633, 0 14px 28px #02102a57;
    padding: 10px 20px 12px 64px;
    color: #fff;
    font-size: 20px;
    font-weight: 1000;
    letter-spacing: 0;
    text-align: left;
    text-shadow: 0 2px 0 rgba(2, 16, 42, .34);
    transform: translateY(0) scale(1);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    touch-action: manipulation
}

#landing-actions button:before {
    content: "";
    position: absolute;
    left: 19px;
    top: 50%;
    width: 22px;
    height: 22px;
    border: 3px solid #0a1f47;
    border-radius: 999px;
    background: linear-gradient(#f3474f 0, #f3474f 48%, #0a1f47 49%, #0a1f47 53%, #fff 54%, #fff);
    box-shadow: inset 0 0 0 4px #ffffffe6;
    transform: translateY(-50%) scale(.82);
    transition: transform .12s ease, box-shadow .12s ease
}

#landing-actions button:after {
    content: "";
    position: absolute;
    inset: -30% auto -30% -44%;
    width: 36%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
    transform: skew(-20deg) translate(0);
    transition: transform .26s ease;
    pointer-events: none
}

#landing-actions button:hover:not(:disabled),
#landing-actions button:focus-visible:not(:disabled),
#landing-actions button[data-selected=true]:not(:disabled) {
    filter: saturate(1.08);
    transform: translateY(-4px) scale(1.018);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -7px #07112633, 0 20px 32px #02102a6b, 0 0 0 8px #ffd65833
}

#landing-actions button:hover:not(:disabled):after,
#landing-actions button:focus-visible:not(:disabled):after,
#landing-actions button[data-selected=true]:not(:disabled):after {
    transform: skew(-20deg) translate(440%)
}

#landing-actions button[data-selected=true]:not(:disabled):before {
    transform: translateY(-50%) scale(1.06);
    box-shadow: inset 0 0 0 4px #ffffffe6, 0 0 0 5px #ffd65847
}

#landing-actions button:active:not(:disabled) {
    transform: translateY(3px) scale(.982);
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 -3px #07112640, 0 8px 14px #02102a47
}

#landing-actions button:focus-visible {
    outline: 4px solid var(--ui-gold);
    outline-offset: 5px
}

#landing-guest-mode {
    background: radial-gradient(circle at 30px 50%, #ffffff 0 9px, #0a1f47 10px 12px, transparent 13px), linear-gradient(180deg, #58bbff, var(--ui-blue-2)) !important
}

#landing-play-online {
    background: radial-gradient(circle at 30px 50%, #ffffff 0 9px, #0a1f47 10px 12px, transparent 13px), linear-gradient(180deg, #43d989, #149757) !important
}

#landing-register-tournament {
    background: radial-gradient(circle at 30px 50%, #ffffff 0 9px, #0a1f47 10px 12px, transparent 13px), linear-gradient(180deg, #ffdd7a, #f0a81e) !important;
    color: #3a2400;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .35)
}

#landing-feature-rail {
    position: absolute;
    top: 50%;
    right: clamp(12px, 3vw, 40px);
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    gap: 12px;
    margin: 0
}

#landing-feature-rail button {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 56px;
    cursor: pointer;
    border: 4px solid #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 0 3px var(--ui-navy), inset 0 4px #ffffff73, inset 0 -6px #07112638, 0 10px 22px #02102a57;
    color: #fff;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    touch-action: manipulation
}

#landing-feature-rail button svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 0 rgba(7, 17, 38, .32))
}

#landing-feature-rail button:hover,
#landing-feature-rail button:focus-visible,
#landing-feature-rail button[data-selected=true] {
    outline: none;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 0 3px var(--ui-gold), inset 0 4px #ffffff80, inset 0 -6px #07112638, 0 14px 26px #02102a66
}

#landing-feature-rail button:active {
    transform: translateY(0) scale(.98)
}

#landing-leaderboard {
    background: linear-gradient(180deg, #ffd86b, #f0a92e)
}

#landing-tournament {
    background: linear-gradient(180deg, #5cc0ff, #2f80d4)
}

#landing-battle-tower {
    background: linear-gradient(180deg, #ff7a86, #e23b4a)
}

#landing-daily-ladder {
    background: linear-gradient(180deg, #4fe097, #149757)
}

#landing-feature-rail #landing-options {
    background: linear-gradient(180deg, #b6c0cc, #6b7686)
}

#landing-ca-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(560px, 100%);
    min-width: 0;
    border: 3px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    background: #05173acc;
    box-shadow: 0 10px 24px #02102a47;
    padding: 8px 10px 8px 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 900
}

#landing-ca-value {
    min-width: 0;
    overflow: hidden;
    color: #ffe37a;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap
}

#landing-ca-copy {
    flex: 0 0 auto;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    background: #fff;
    padding: 6px 10px;
    color: var(--ui-navy);
    font-size: 11px;
    font-weight: 900
}

@keyframes landing-logo-bob {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

#hud {
    position: fixed;
    display: none;
    right: 14px;
    left: auto;
    top: 14px;
    z-index: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(360px, calc(100vw - 28px));
    min-height: 0;
    align-items: stretch;
    gap: 9px;
    border: 3px solid var(--ui-navy);
    border-radius: 18px;
    background: linear-gradient(180deg, #fffffffa, #e2f2fff5), var(--ui-panel);
    box-shadow: inset 0 -5px #2f98f424, 0 16px 38px var(--ui-shadow);
    padding: 12px
}

body:has(#dialogue-panel:not([hidden])) #world-minimap,
body:has(#dialogue-panel:not([hidden])) #quest-tracker,
body:has(#dialogue-panel:not([hidden])) #field-menu,
body:has(#pokemon-menu:not([hidden])) #world-minimap,
body:has(#pokemon-menu:not([hidden])) #quest-tracker,
body:has(#pokemon-menu:not([hidden])) #field-menu {
    opacity: .16;
    pointer-events: none;
    transition: opacity .2s ease
}

#hud span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 2px solid rgba(16, 38, 83, .18);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, var(--ui-blue-soft));
    box-shadow: inset 0 -3px #10265314;
    padding: 10px 12px;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.1
}

#route-name {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, #1f78d8, #0f4d98) !important;
    color: #fff !important;
    font-size: 16px !important
}

#area-state,
#party-state,
#bag-state,
#money-state,
#quest-state {
    flex: initial
}

#party-state {
    border-color: #2f98f470 !important;
    background: linear-gradient(180deg, #4fb8ff, var(--ui-blue)) !important;
    color: #fff !important
}

#bag-state {
    border-color: #ff9f438c !important;
    background: linear-gradient(180deg, #ffc85d, var(--ui-orange)) !important;
    color: #442400 !important
}

#money-state {
    background: #fff5cf !important
}

#quest-state {
    grid-column: 1 / -1;
    border-color: #ef4f5f57 !important;
    background: #ffe7ea !important;
    color: var(--ui-red-dark) !important
}

#field-left-stack {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: grid;
    gap: 14px;
    width: min(318px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: hidden
}

#field-left-stack[hidden] {
    display: none
}

#quest-tracker,
#world-minimap,
#interaction-prompt,
#quest-toast {
    border: 3px solid var(--ui-navy);
    border-radius: 14px;
    background: var(--ui-panel);
    box-shadow: inset 0 -3px #2f98f421, 0 14px 32px var(--ui-shadow)
}

#quest-tracker {
    position: relative;
    display: grid;
    gap: 5px;
    width: 100%;
    border-color: #fff;
    background: linear-gradient(180deg, var(--ui-navy-2), var(--ui-navy));
    box-shadow: 0 0 0 3px var(--ui-navy), 0 16px 38px var(--ui-shadow);
    padding: 16px 16px 16px 74px
}

#quest-tracker:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 14px;
    background: var(--asset-v4-objective-badge) center / 118% no-repeat, linear-gradient(180deg, var(--ui-gold), #ffb233);
    color: var(--ui-navy);
    box-shadow: 0 0 0 3px var(--ui-navy)
}

#world-minimap {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    height: min(318px, calc(100vh - 194px));
    min-height: 246px;
    border-color: #fff;
    background: linear-gradient(180deg, #1d70c9, var(--ui-navy));
    box-shadow: 0 0 0 3px var(--ui-navy), 0 16px 38px var(--ui-shadow);
    padding: 14px
}

#world-minimap:before {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    background: var(--asset-v4-compass, url(/assets/compass-BErf05Wm.png)) center / contain no-repeat;
    filter: drop-shadow(0 3px 0 rgba(7, 17, 38, .22));
    opacity: .9
}

.minimap-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px
}

.minimap-header div {
    display: grid;
    gap: 3px;
    min-width: 0
}

#minimap-day-badge {
    position: relative;
    display: grid;
    min-width: 48px;
    min-height: 48px;
    place-items: end center;
    color: #fff;
    font-size: 10px;
    font-weight: 1000;
    white-space: nowrap;
    text-shadow: 0 2px 0 var(--ui-navy)
}

#minimap-day-badge:before {
    content: "";
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ui-gold);
    box-shadow: 0 0 0 3px #ffffff6b, 0 0 16px #ffd15dd9
}

#minimap-day-badge[data-phase=morning]:before {
    background: #ffd9a0;
    box-shadow: 0 0 0 3px #ffffff6b, 0 0 16px #ffc98cd9
}

#minimap-day-badge[data-phase=evening]:before {
    background: #ff9a55;
    box-shadow: 0 0 0 3px #ffffff61, 0 0 16px #ff8a4de6
}

#minimap-day-badge[data-phase=night]:before {
    background: #cdd8f2;
    box-shadow: 0 0 0 3px #ffffff57, 0 0 16px #96b0ebe6
}

#field-menu {
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 3;
    display: grid;
    gap: 12px;
    width: min(284px, calc(100vw - 32px));
    border: 4px solid var(--ui-navy);
    border-radius: 18px;
    background: var(--ui-panel-strong);
    box-shadow: inset 0 -5px #2f98f41f, 0 18px 44px var(--ui-shadow);
    padding: 14px;
    overflow: hidden
}

#field-menu:before {
    content: "";
    position: absolute;
    top: -38px;
    right: -34px;
    z-index: 0;
    width: 112px;
    height: 112px;
    border: 8px solid var(--ui-navy);
    border-radius: 50%;
    background: linear-gradient(#f44f5d 0 48%, var(--ui-navy) 48% 54%, #ffffff 54% 100%);
    box-shadow: inset 0 0 0 9px #fff, 0 12px 26px #0711262e;
    opacity: .18;
    pointer-events: none
}

#field-menu>* {
    position: relative;
    z-index: 1
}

#field-menu[hidden] {
    display: none
}

.field-menu-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid rgba(16, 38, 83, .14);
    padding-bottom: 10px
}

.field-menu-header:before {
    content: "";
    width: 30px;
    height: 30px;
    background: var(--asset-v4-selector) center / contain no-repeat;
    filter: drop-shadow(0 2px 0 rgba(7, 17, 38, .2))
}

.field-menu-header span {
    color: var(--ui-navy);
    font-size: 19px;
    font-weight: 1000
}

.field-menu-header strong {
    display: grid;
    min-width: 52px;
    min-height: 42px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 14px;
    background: linear-gradient(180deg, #4fb8ff, var(--ui-blue));
    box-shadow: 0 0 0 2px var(--ui-navy);
    color: #fff;
    font-size: 22px
}

#field-menu-collapse {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    cursor: pointer;
    border: 3px solid var(--ui-navy);
    border-radius: 13px;
    background: linear-gradient(180deg, #fff, #d9edff);
    box-shadow: inset 0 -3px #10265324, 0 2px #0711261f;
    color: var(--ui-navy);
    font-size: 18px;
    font-weight: 1000;
    line-height: 1
}

#field-menu-collapse:hover,
#field-menu-collapse:focus-visible {
    border-color: var(--ui-gold);
    outline: none;
    transform: translateY(-1px)
}

body[data-field-menu-collapsed=true] #field-menu {
    width: min(246px, calc(100vw - 32px));
    gap: 8px;
    padding: 10px
}

body[data-field-menu-collapsed=true] .field-menu-header {
    border-bottom: 0;
    padding-bottom: 0
}

body[data-field-menu-collapsed=true] .field-menu-grid,
body[data-field-menu-collapsed=true] .field-menu-district-links {
    display: none
}

body[data-field-menu-collapsed=true] .field-menu-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
    padding-top: 0
}

body[data-field-menu-collapsed=true] #field-token-count {
    display: none
}

.field-party-balls {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    border: 2px solid rgba(16, 38, 83, .14);
    border-radius: 999px;
    background: var(--asset-v4-party-row) center / cover no-repeat, linear-gradient(180deg, #fff, #e9f6ff);
    padding: 7px 9px
}

.field-party-balls span {
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(#ef4f5f 0 46%, var(--ui-navy) 46% 54%, #ffffff 54% 100%);
    box-shadow: inset 0 0 0 2px #ffffff47, 0 1px #0711262e;
    opacity: .95
}

.field-party-balls span[data-filled=false] {
    filter: grayscale(1);
    opacity: .32
}

.field-party-balls span[data-active=true] {
    box-shadow: 0 0 0 2px var(--ui-gold), inset 0 0 0 2px #ffffff57
}

.field-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.field-menu-grid button {
    display: grid;
    gap: 8px;
    min-width: 0;
    min-height: 102px;
    place-items: center;
    border: 3px solid var(--ui-navy);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #eaf5ff);
    box-shadow: inset 0 -5px #10265329, 0 4px #0711261f;
    color: #fff;
    cursor: pointer;
    padding: 10px 8px
}

.field-menu-grid button:hover {
    border-color: var(--ui-gold);
    transform: translateY(-1px)
}

.field-menu-grid button strong {
    max-width: 100%;
    text-align: center;
    text-shadow: 0 2px 0 rgba(7, 17, 38, .24);
    white-space: normal;
    line-height: 1.05
}

.field-menu-grid button[data-field-menu=pokedex] {
    background: url(/assets/menu-tile-red-BFmzXBG7.png) center / 112% 112% no-repeat, linear-gradient(180deg, #ff756f, #e64552)
}

.field-menu-grid button[data-field-menu=party] {
    background: url(/assets/menu-tile-blue-BOAmD7qJ.png) center / 112% 112% no-repeat, linear-gradient(180deg, #2f98f4, #0d62ba)
}

.field-menu-grid button[data-field-menu=bag] {
    background: url(/assets/menu-tile-yellow-DUYxsn5-.png) center / 112% 112% no-repeat, linear-gradient(180deg, #ffd76a, var(--ui-orange));
    color: #482800
}

.field-menu-grid button[data-field-menu=bag] strong {
    text-shadow: none
}

.field-menu-grid button[data-field-menu=trainer-card] {
    background: url(/assets/menu-tile-cyan-dQPn8g2F.png) center / 112% 112% no-repeat, linear-gradient(180deg, #39d7dd, #0795aa)
}

.field-menu-grid button[data-field-menu=save] {
    background: url(/assets/menu-tile-purple-B18tCe0F.png) center / 112% 112% no-repeat, linear-gradient(180deg, #9c88ff, #6751c8)
}

.field-menu-grid button[data-field-menu=options] {
    background: url(/assets/menu-tile-gray-CiOBmJxU.png) center / 112% 112% no-repeat, linear-gradient(180deg, #9bb6cf, #536a84)
}

.field-menu-icon {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, .84);
    border-radius: 12px;
    background-color: #ffffff52;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 118%;
    box-shadow: inset 0 -3px #07112629
}

.field-menu-icon:before {
    content: ""
}

.field-menu-icon[data-icon=dex] {
    background-image: url(/assets/pokedex-OxevKQcS.png)
}

.field-menu-icon[data-icon=party] {
    background-image: url(/assets/party-V93sjR_C.png)
}

.field-menu-icon[data-icon=bag] {
    background-image: url(/assets/bag-B2ccW1DI.png)
}

.field-menu-icon[data-icon=card] {
    background-image: url(/assets/trainer-card-CMgwDE58.png)
}

.field-menu-icon[data-icon=save] {
    background-image: url(/assets/save-jlXzandq.png)
}

.field-menu-icon[data-icon=options] {
    background-image: url(/assets/options-DCpqEl59.png)
}

.field-menu-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border-top: 2px solid rgba(16, 38, 83, .14);
    padding-top: 10px
}

.field-menu-footer span {
    min-width: 0;
    overflow: hidden;
    border: 2px solid rgba(16, 38, 83, .2);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ui-navy-2), var(--ui-navy));
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    padding: 7px 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.field-menu-footer span:before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 5px;
    vertical-align: -5px;
    background: var(--asset-v4-money-chip) center / 140% no-repeat
}

#field-pokeball-count:before {
    background-image: var(--asset-v4-pokeball-chip)
}

#field-token-count:before {
    border-radius: 50%;
    background: radial-gradient(circle at 45% 38%, #fff5b8 0 26%, transparent 27%), linear-gradient(180deg, #ffd66b, #d48a11);
    box-shadow: inset 0 0 0 2px #4b2a0259
}

.field-menu-district-links {
    margin: -2px 0 0;
    border: 2px solid rgba(16, 38, 83, .18);
    border-radius: 999px;
    background: linear-gradient(90deg, #fff5f6 0, #fff5f6 48%, #eef8ff 52%, #eef8ff);
    color: var(--ui-navy);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    padding: 7px 10px;
    text-align: center;
    white-space: normal
}

#minimap-title {
    color: #fff;
    font-size: 22px;
    font-weight: 1000;
    line-height: 1
}

#minimap-current {
    min-width: 0;
    overflow: hidden;
    color: #dcefff;
    font-size: 13px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap
}

#minimap-frame {
    border: 3px solid #ffffff;
    border-radius: 16px;
}