:root {
    color-scheme: dark;
    --ink: #101827;
    --panel: #17243a;
    --panel-2: #21314b;
    --line: #334865;
    --cream: #fff9df;
    --red: #e33f48;
    --yellow: #f7ce46;
    --green: #5fce83;
    --muted: #9cb0ca;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
    background: #0c1422;
    color: var(--cream);
    font-family: "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
    overflow-x: hidden;
}

button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.auth-view {
    min-height: 100vh;
    display: grid;
    align-content: start;
    position: relative;
    overflow: hidden;
    padding: 92px 20px 54px;
    background: linear-gradient(180deg, #101a2b 0 46%, #76c7e9 46% 70%, #5aac5c 70% 100%);
}
.auth-scene {
    position: absolute;
    inset: 0;
    opacity: .48;
    background:
        radial-gradient(circle at 18% 57%, #c6edff 0 2px, transparent 3px),
        radial-gradient(circle at 67% 63%, #c6edff 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 0 47%, #d7c791 47% 53%, transparent 53%),
        repeating-linear-gradient(90deg, #347f46 0 36px, #4da25b 36px 72px);
    background-size: 38px 38px, 47px 47px, auto, auto;
    clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%);
}
.landing-nav {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(22px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid #293d5b;
    background: rgba(16, 26, 43, .94);
    backdrop-filter: blur(10px);
}
.landing-brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; letter-spacing: .08em; font-size: 13px; }
.landing-nav nav { display: flex; align-items: center; gap: 20px; }
.landing-nav nav a { color: #b7c9df; text-decoration: none; font-size: 12px; font-weight: 800; }
.landing-nav nav button { border: 1px solid #526b90; border-radius: 4px; padding: 8px 12px; color: white; background: #213550; font-size: 12px; font-weight: 900; }
.auth-panel {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    min-height: 476px;
    margin: 26px auto 0;
    padding: 48px 48px 48px min(52vw, 520px);
    border: 6px solid #fff;
    outline: 5px solid #24334c;
    border-radius: 10px;
    color: #172237;
    background: linear-gradient(90deg, rgba(255, 252, 225, .98) 0 52%, rgba(255, 252, 225, .91) 52% 100%);
    box-shadow: 0 24px 70px rgba(12, 24, 38, .35);
    text-align: left;
}
.auth-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 49%; background: url("/game/maps/pallet-meadow-ground.webp") center / cover; border-right: 4px solid #2d405b; image-rendering: pixelated; }
.auth-panel::after { content: "LIVE KANTO"; position: absolute; left: 18px; top: 18px; padding: 5px 8px; color: #fffdeb; background: #15253e; font: 900 10px ui-monospace, monospace; letter-spacing: .08em; }
.firered-logo {
    display: block;
    width: min(295px, 100%);
    margin: 0 0 8px;
    image-rendering: pixelated;
}
.landing-title-lockup { display: flex; align-items: center; gap: 12px; color: #172b49; font: 1000 31px/.8 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.05em; }
.landing-title-lockup .pokeball { flex: 0 0 auto; width: 36px; height: 36px; }
.landing-title-lockup em { color: #e33f48; font-style: normal; letter-spacing: -.03em; }
.multiplayer-mark {
    color: var(--red);
    font-weight: 1000;
    letter-spacing: .15em;
    font-size: 12px;
}
.auth-panel h1 { margin: 15px 0 6px; font-size: 31px; }
.auth-intro { color: #526078; line-height: 1.5; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 24px 0 16px; }
.auth-tabs button {
    border: 2px solid #31425e;
    background: #dbe6ee;
    color: #31425e;
    padding: 10px;
    font-weight: 900;
}
.auth-tabs button.active { background: #e64b4f; color: white; }
.auth-panel label { display: block; text-align: left; font-size: 12px; font-weight: 900; margin: 11px 0; }
.auth-panel input {
    width: 100%;
    margin-top: 5px;
    border: 3px solid #52637e;
    background: white;
    color: #101827;
    padding: 11px 12px;
    outline: 0;
}
.auth-panel input:focus { border-color: #e44a50; }
.menu-button {
    width: 100%;
    border: 3px solid #202d43;
    border-radius: 4px;
    color: white;
    background: #e3474e;
    box-shadow: inset 0 -4px rgba(104, 17, 22, .25);
    padding: 12px;
    font-weight: 1000;
}
.error-message { min-height: 20px; margin: 6px 0; color: #bd2028; font-size: 13px; }
.auth-panel > small { display: block; margin-top: 15px; color: #718096; }
.landing-features, .landing-preview { position: relative; z-index: 1; width: min(1080px, 100%); margin: 42px auto 0; }
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-features article { border: 1px solid #45617f; border-radius: 8px; padding: 20px; background: linear-gradient(145deg, #192a43, #142136); box-shadow: 0 10px 24px rgba(12,24,38,.22); }
.landing-features h2 { margin: 12px 0 8px; color: #fff9df; font-size: 17px; }
.landing-features p, .landing-preview p { margin: 0; color: #aec0d8; font-size: 13px; line-height: 1.55; }
.feature-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #f4d65d; border-radius: 50%; color: #f4d65d; font-size: 21px; }
.landing-preview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 42px; padding: 46px 0 8px; }
.landing-preview h2 { margin: 8px 0 12px; font-size: clamp(27px, 4vw, 42px); line-height: 1.05; }
.landing-cta { width: auto; min-width: 210px; margin-top: 20px; }
.hero-map-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 6px solid #e5f8ea; outline: 5px solid #243d5e; border-radius: 6px; background: #5eb987; box-shadow: 0 16px 38px rgba(8, 18, 32, .35); }
.hero-map-frame > img:first-child { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hero-map-frame > span { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 7px; color: #fffdec; background: #15233d; font: 900 10px ui-monospace, monospace; }
.hero-map-frame > span b { color: #55dd98; }
.hero-trainer { position: absolute; z-index: 1; bottom: 18%; width: 52px; height: 80px; object-fit: none; object-position: 0 0; image-rendering: pixelated; filter: drop-shadow(4px 5px rgba(23, 39, 49, .35)); }
.hero-trainer-red { left: 42%; }
.hero-trainer-leaf { left: 57%; }

.game-view { min-height: 100vh; }
.topbar {
    height: 64px;
    border-bottom: 1px solid #263852;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px;
    background: #101a2b;
}
.topbar-brand, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-brand strong { letter-spacing: .07em; }
.topbar-brand > span:last-child { color: var(--muted); font-size: 13px; }
.pokeball {
    width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%;
    background: linear-gradient(#e8474d 0 45%, #263246 45% 56%, #fff 56%);
}
.topbar button {
    border: 1px solid #354a68;
    border-radius: 5px;
    background: #17243a;
    color: #dbe7f7;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 800;
}

.topbar-admin {
    border: 1px solid #405675;
    border-radius: 5px;
    color: #f8c846;
    font: 700 12px/1 var(--ui-font);
    padding: 9px 12px;
    text-decoration: none;
}
.topbar-admin:hover { background: #17263c; border-color: #f8c846; }
.connection-state, .save-state {
    border-radius: 99px;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .08em;
    padding: 5px 8px;
}
.connection-state { background: #183c2c; color: #74efa4; }
.connection-state.offline { background: #3b2730; color: #fb8991; }
.save-state { color: #f4cb54; background: #3a3422; }

.game-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    width: min(1260px, calc(100% - 36px));
    margin: 24px auto;
}
.screen-column { min-width: 0; }
.game-screen {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 6px solid #344760;
    outline: 3px solid #0a101b;
    border-radius: 7px;
    background: #000;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.game-screen.poison-field-flash {
    animation: poison-field-flash 360ms steps(2, end);
}
@keyframes poison-field-flash {
    0%, 100% { filter: none; }
    24%, 74% { filter: sepia(1) hue-rotate(210deg) saturate(3) brightness(1.15); }
    49% { filter: brightness(.7) saturate(1.6); }
}
#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    background: #000;
    outline: none;
}
.screen-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    font: 900 11px ui-monospace, monospace;
    text-shadow: 1px 1px #000, -1px -1px #000;
}
.repel-counter {
    position: absolute;
    z-index: 3;
    left: 13px;
    bottom: 13px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 7px;
    border: 2px solid #f7e06e;
    box-shadow: 2px 2px 0 #152133;
    background: rgba(15, 33, 49, .94);
    color: #fffbe4;
    font: 900 11px ui-monospace, monospace;
    text-shadow: 1px 1px #000;
    pointer-events: none;
}
.repel-counter small { color: #f3d95c; font-size: 9px; }
.repel-counter strong { color: #fff; font-size: 14px; }
.repel-counter span { color: #b7d4df; font-size: 9px; }
.safari-counter {
    position: absolute;
    z-index: 3;
    left: 13px;
    bottom: 13px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 7px;
    border: 2px solid #f7e06e;
    box-shadow: 2px 2px 0 #152133;
    background: rgba(15, 33, 49, .94);
    color: #fffbe4;
    font: 900 11px ui-monospace, monospace;
    text-shadow: 1px 1px #000;
    pointer-events: none;
}
.safari-counter small { color: #f3d95c; font-size: 9px; }
.safari-counter strong { color: #fff; font-size: 14px; }
.safari-counter span { color: #b7d4df; font-size: 9px; }
.coin-case-counter {
    position: absolute;
    z-index: 3;
    top: 33px;
    right: 13px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 8px;
    border: 2px solid #f7e06e;
    box-shadow: 2px 2px 0 #152133;
    background: rgba(15, 33, 49, .94);
    color: #fffbe4;
    font: 900 11px ui-monospace, monospace;
    text-shadow: 1px 1px #000;
    pointer-events: none;
}
.coin-case-counter small { color: #f3d95c; font-size: 9px; }
.coin-case-counter strong { color: #fff; font-size: 14px; }
.controls-help {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    color: #9db0c9;
    margin-top: 15px;
    font-size: 11px;
    font-weight: 800;
}
kbd { color: #fff7c5; }

.sidebar { display: grid; gap: 14px; align-content: start; }
.side-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(145deg, #19263b, #131f32);
    padding: 15px;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.card-kicker {
    margin: 0 0 5px;
    color: var(--yellow);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .15em;
}
.card-heading { display: flex; align-items: center; justify-content: space-between; }
.card-heading h2 { margin: 0; font-size: 17px; }
.card-heading > span { color: var(--muted); font-size: 12px; }
.trainer-line { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; }
.trainer-line small, .pokemon-row small, .online-row small { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }
.trainer-avatar {
    width: 32px; height: 48px;
    background: url("/game/sprites/red.png") 0 0 / auto 64px no-repeat;
    image-rendering: pixelated;
}
.badge-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 13px; }
.badge-row i,
.menu-badges i {
    display: block;
    justify-self: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 0;
    background: url("/game/menu/badges.png") calc(var(--badge-index) * -16px) 0 / 128px 16px no-repeat;
    image-rendering: pixelated;
    opacity: .22;
    filter: grayscale(1) brightness(.42);
}
.badge-row i.earned,
.menu-badges i.earned {
    opacity: 1;
    filter: none;
}
.pokemon-list, .online-list { display: grid; gap: 8px; margin-top: 13px; }
.pokemon-row, .online-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 9px;
    border-top: 1px solid #2b3e59;
    padding-top: 8px;
}
.pokemon-icon {
    width: 30px;
    height: 30px;
    border: 0;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 30px auto;
    image-rendering: pixelated;
}
.pokemon-hp { color: #7ee4a3; font-size: 11px; }
.online-sprite { width: 24px; height: 34px; object-fit: none; object-position: 0 0; image-rendering: pixelated; }
.online-row { grid-template-columns: 30px 1fr auto; }
.online-actions { display: flex; gap: 4px; }
.mini-button {
    border: 1px solid #526987;
    border-radius: 3px;
    padding: 4px 6px;
    color: #fff9df;
    background: #243a58;
    font-size: 9px;
    font-weight: 900;
}
.mini-button.accent { border-color: #cb9d2c; color: #fff0a0; }
.mini-button.danger { border-color: #81434c; color: #ffb0b5; }
.party-social-content, .social-inbox { display: grid; gap: 7px; margin-top: 11px; }
.shared-combat-status {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border: 1px solid #334964;
    background: #0d1828;
}
.shared-combat-status span { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.shared-combat-status i { width: 7px; height: 7px; border-radius: 50%; background: #e45b5b; }
.shared-combat-status small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.shared-combat-status.enabled { border-color: #277a51; }
.shared-combat-status.enabled i { background: #42d489; box-shadow: 0 0 7px #42d48988; }
.mini-button:disabled { cursor: not-allowed; opacity: .4; }
.party-member, .inbox-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #2b3e59;
}
.party-member strong, .inbox-row strong { font-size: 12px; }
.party-member small, .inbox-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.inbox-actions { display: flex; gap: 4px; }
.leader-mark { color: var(--yellow); font-size: 9px; }
.empty { color: #8195b0; font-size: 12px; line-height: 1.5; margin: 8px 0; }
.bag-summary { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 13px; border-top: 1px solid #2b3e59; padding-top: 10px; }
.bag-summary b { color: var(--cream); }
.system-card p:last-child { margin: 4px 0 0; color: #a9bbd1; font-size: 11px; line-height: 1.55; }

.starter-panel {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(10, 19, 32, .72);
}
.firered-window {
    width: min(610px, calc(100% - 36px));
    border: 7px double #303c55;
    border-radius: 7px;
    background: #fffde8;
    color: #17223a;
    padding: 24px;
    text-align: center;
}
.firered-window h2 { margin: 0 0 7px; }
.starter-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.starter-options button {
    border: 3px solid #4d5f7c;
    border-radius: 4px;
    padding: 14px 8px;
    color: #17223a;
    background: #eef5ec;
}
.starter-options button:hover { border-color: #e33f48; transform: translateY(-2px); }
.starter-options b, .starter-options strong, .starter-options small { display: block; }
.starter-options b { color: #e33f48; font-size: 10px; }
.starter-options strong { margin: 6px 0; }
.starter-options small { font-size: 9px; }
.dialogue-box {
    position: absolute;
    left: 4%; right: 4%; bottom: 4%;
    min-height: 84px;
    border: 7px double #35435e;
    border-radius: 5px;
    background: #fffdec;
    color: #17223a;
    padding: 14px 48px 14px 18px;
    font: 700 16px/1.45 ui-monospace, monospace;
}
.dialogue-box p { margin: 0; white-space: pre-line; }
.dialogue-box > .dialogue-arrow { position: absolute; right: 18px; bottom: 12px; color: #e33f48; }
.dialogue-choices {
    position: absolute;
    right: 10px;
    bottom: calc(100% + 5px);
    min-width: 116px;
    padding: 7px;
    border: 7px double #35435e;
    border-radius: 5px;
    background: #fffdec;
    box-shadow: 5px 5px 0 rgba(23, 34, 58, .25);
}
.dialogue-choices button {
    display: block;
    width: 100%;
    border: 0;
    padding: 5px 10px;
    background: transparent;
    color: #17223a;
    text-align: left;
    font: inherit;
}
.dialogue-choices button.selected { background: #dfe7da; }
.map-banner {
    position: absolute; top: 20%; left: 0;
    padding: 10px 28px 10px 20px;
    background: linear-gradient(90deg, rgba(20, 34, 55, .95), rgba(20,34,55,.1));
    font: 900 17px ui-monospace, monospace;
}
.toast {
    position: absolute; left: 50%; bottom: 18px; translate: -50% 10px;
    opacity: 0; pointer-events: none;
    background: rgba(15, 25, 42, .92);
    border: 2px solid #637895;
    padding: 9px 14px;
    font-size: 12px;
    transition: .18s;
}
.toast.visible { opacity: 1; translate: -50% 0; }
.touch-controls { display: none; }

.social-modal {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(7, 14, 24, .76);
}
.social-window { position: relative; width: min(470px, calc(100% - 28px)); text-align: left; }
.social-window h2 { margin: 3px 0 14px; }
.social-close {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 30px;
    height: 30px;
    border: 2px solid #4d5f7c;
    border-radius: 3px;
    background: #e9eddf;
    color: #17223a;
    font-weight: 1000;
}
.social-profile { display: grid; gap: 10px; }
.social-profile p { margin: 0; color: #526078; font-size: 12px; }
.trade-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: end; }
.trade-grid label { color: #263751; font-size: 10px; font-weight: 900; }
.trade-grid select {
    width: 100%;
    margin-top: 5px;
    padding: 9px;
    border: 2px solid #52637e;
    color: #17223a;
    background: white;
}
.social-buttons { display: flex; gap: 8px; margin-top: 16px; }
.social-buttons button {
    flex: 1;
    border: 2px solid #31425e;
    padding: 10px;
    color: white;
    background: #e3474e;
    font-weight: 900;
}
.evolution-panel {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    overflow: hidden;
    color: #fffdec;
    background:
        repeating-linear-gradient(0deg, #15233d 0 12px, #263b5c 12px 24px),
        #15233d;
    font: 700 13px/1.3 ui-monospace, monospace;
}
.evolution-stage {
    position: relative;
    display: grid;
    grid-template-columns: 150px 150px;
    align-items: center;
    justify-items: center;
    width: 330px;
    min-height: 180px;
}
.evolution-stage img {
    z-index: 1;
    width: 144px;
    height: 144px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: brightness(0);
    animation: evolution-cycle .36s steps(2, end) infinite;
}
.evolution-stage img:last-child { opacity: .35; }
.evolution-flash {
    position: absolute;
    inset: 16px 40px;
    z-index: 2;
    background: #fff;
    mix-blend-mode: screen;
    opacity: 0;
    animation: evolution-flash .48s steps(2, end) infinite;
}
.evolution-panel p { margin: 0; text-shadow: 2px 2px #17223a; }
.evolution-panel p b { color: #f2d462; }
.evolution-panel.complete .evolution-stage img { filter: none; animation: none; }
.evolution-panel.complete .evolution-stage img:first-child { opacity: 0; }
.evolution-panel.complete .evolution-stage img:last-child { opacity: 1; }
@keyframes evolution-cycle { 50% { transform: scale(.89); opacity: .45; } }
@keyframes evolution-flash { 50% { opacity: .9; } }
.social-buttons button.secondary { color: #31425e; background: #dbe6ee; }

.battle-panel {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: grid;
    grid-template-rows: minmax(0, 4fr) minmax(72px, .52fr);
    container-type: inline-size;
    overflow: hidden;
    background: #b9e4d6;
    color: #152035;
}
.battle-transition {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: #101a28;
}

.battle-transition::before,
.battle-transition::after {
    content: "";
    position: absolute;
    inset: 0;
}

.battle-transition::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 24px,
            #d8424c 24px 30px,
            #f6db67 30px 33px,
            transparent 33px 49px
        );
    transform: translateX(-100%);
}

.battle-transition::after {
    opacity: 0;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 249, 201, .92) 0 4%,
            rgba(255, 239, 116, .34) 10%,
            transparent 34%
        );
}

.battle-transition span {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 5px;
    background: #e13d45;
    border-top: 2px solid #ffe878;
    border-bottom: 2px solid #ffe878;
    box-shadow:
        0 -5px 0 #101a28,
        0 5px 0 #101a28;
}

.battle-transition img {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .28));
}

.battle-entering .battle-transition {
    animation: battle-transition-reveal 1050ms linear both;
}

.battle-entering .battle-transition::before {
    animation: battle-transition-stripes 1050ms ease-in-out both;
}

.battle-entering .battle-transition::after {
    animation: battle-transition-flash 1050ms ease-out both;
}

.battle-entering .battle-transition span {
    animation: battle-transition-line 1050ms ease-in-out both;
}

.battle-entering .battle-transition img {
    animation: battle-transition-ball 1050ms ease-in-out both;
}
.battle-sky {
    position: relative;
    overflow: hidden;
    padding: 28px 34px 15px;
    background: #d6e8da url("/game/battle/terrain/grass-field.png") center / 100% 100% no-repeat;
    image-rendering: pixelated;
}
.battle-kicker {
    display: none;
}
.battle-sprite-field {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.battle-platform {
    display: none;
}
.enemy-platform { top: 154px; right: 5%; }
.player-platform { bottom: 9px; left: 3%; width: 230px; height: 65px; }
.battle-pokemon {
    position: absolute;
    z-index: 3;
    width: clamp(100px, 20cqw, 300px);
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    transform-origin: 50% 88%;
    filter: drop-shadow(0 7px 2px rgba(30, 66, 55, .18));
}
.enemy-pokemon {
    top: 24%;
    right: 24%;
    animation: none;
}
.enemy-pokemon[data-slot="1"] {
    top: 30%;
    right: 39%;
    width: clamp(88px, 17cqw, 260px);
    height: auto;
}
.player-pokemon {
    --player-ground-offset: clamp(20px, 4cqw, 61px);
    bottom: calc(3px - var(--player-ground-offset));
    left: 0;
    width: clamp(108px, 21cqw, 320px);
    height: auto;
    animation: none;
}
.player-pokemon[data-slot="1"] {
    bottom: calc(3px - var(--player-ground-offset));
    left: 13%;
    width: clamp(94px, 18cqw, 275px);
    height: auto;
}
.player-pokemon[data-species="1"] { --player-ground-offset: clamp(27px, 5.25cqw, 80px); }
.player-pokemon[data-species="4"] { --player-ground-offset: clamp(15px, 2.82cqw, 43px); }
.player-pokemon[data-species="7"] { --player-ground-offset: clamp(25px, 4.92cqw, 75px); }
.player-pokemon[data-species="16"] { --player-ground-offset: clamp(12px, 2.25cqw, 34px); }
.player-pokemon[data-species="19"] { --player-ground-offset: clamp(21px, 4.27cqw, 65px); }
.shared-battle .enemy-pokemon { right: 13%; }
.shared-battle .enemy-pokemon[data-slot="1"] { right: 27%; }
.battle-pokemon-inactive { opacity: 0; }
.battle-trainer-intros { position: absolute; inset: 0; z-index: 4; }
.battle-opponent-trainer {
    position: absolute;
    top: 65px;
    right: 10%;
    width: 112px;
    height: 112px;
    object-fit: contain;
    image-rendering: pixelated;
}
.battle-trainer-back {
    position: absolute;
    bottom: 20px;
    left: 11%;
    width: 118px;
    height: 118px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 500%;
    image-rendering: pixelated;
}
.battle-trainer-back[data-slot="1"] { left: 28%; }
.battle-entering .enemy-pokemon {
    animation: battle-enemy-sendout 560ms 650ms ease-out both;
}
.battle-entering.trainer-battle .enemy-pokemon {
    animation-delay: 1180ms;
}
.battle-entering .player-pokemon {
    animation: battle-player-sendout 620ms 980ms cubic-bezier(.2, .9, .3, 1.15) both;
}
.battle-entering .battle-opponent-trainer {
    animation: battle-opponent-intro 1050ms 560ms ease-in-out both;
}
.battle-entering .battle-trainer-back {
    animation: battle-trainer-throw 920ms 620ms steps(1, end) both;
}
.battle-effects { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.battle-impact {
    position: absolute;
    top: 90px;
    right: 16%;
    width: 54px;
    height: 54px;
    background:
        linear-gradient(45deg, transparent 41%, #fff 42% 48%, #e3464c 49% 55%, transparent 56%),
        linear-gradient(-45deg, transparent 41%, #fff 42% 48%, #e3464c 49% 55%, transparent 56%);
    animation: battle-impact-pop 380ms steps(2, end) both;
}
.battle-impact[data-slot="1"] { right: 32%; top: 108px; }
.battle-ember-projectile,
.battle-ember-flare {
    position: absolute;
    width: 32px;
    height: 32px;
    background: url("/game/battle/effects/small-ember.png") 0 0 / 32px 160px no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px #ffdd52);
}
.battle-ember-projectile {
    z-index: 11;
    left: var(--move-start-x, 27%);
    top: calc(67% + var(--ember-offset, 0px));
    animation:
        battle-ember-flight 610ms ease-out var(--ember-delay, 0ms) both,
        battle-ember-frames 500ms steps(4, end) var(--ember-delay, 0ms) both;
}
.battle-ember-projectile[data-slot="0"] {
    --ember-target-x: 76%;
    --ember-target-y: 27%;
}
.battle-ember-projectile[data-slot="1"] {
    --ember-target-x: 59%;
    --ember-target-y: 31%;
}
.battle-ember-projectile[data-player-slot="0"] {
    --ember-target-x: 17%;
    --ember-target-y: 66%;
}
.battle-ember-projectile[data-player-slot="1"] {
    --ember-target-x: 31%;
    --ember-target-y: 62%;
}
.battle-ember-flare {
    z-index: 12;
    left: 76%;
    top: calc(27% + var(--ember-offset, 0px));
    animation:
        battle-ember-flare 400ms ease-out var(--ember-delay, 0ms) both,
        battle-ember-frames 350ms steps(4, end) var(--ember-delay, 0ms) both;
}
.battle-ember-flare[data-slot="1"] {
    left: 59%;
    top: calc(31% + var(--ember-offset, 0px));
}
.battle-ember-flare[data-player-slot="0"] {
    left: 17%;
    top: calc(66% + var(--ember-offset, 0px));
}
.battle-ember-flare[data-player-slot="1"] {
    left: 31%;
    top: calc(62% + var(--ember-offset, 0px));
}
.battle-thrown-ball {
    position: absolute;
    z-index: 10;
    top: 68%;
    left: 20%;
    width: 36px;
    height: 36px;
    object-fit: cover;
    object-position: top;
    image-rendering: pixelated;
    animation: battle-ball-throw 620ms cubic-bezier(.18, .8, .32, 1) both;
}
.battle-thrown-ball[data-slot="1"] { --ball-end-x: 58%; --ball-end-y: 37%; }
.battle-ball-closed {
    object-position: bottom;
    animation: battle-ball-settle 780ms ease-in-out both;
}
.battle-break-spark {
    position: absolute;
    top: 28%;
    right: 17%;
    color: #fff48e;
    font-size: 58px;
    text-shadow: 0 0 9px #fff, 0 0 18px #e74a4f;
    animation: battle-impact-pop 500ms steps(2, end) both;
}
.battle-lunge { animation: battle-player-lunge 410ms ease-in-out both !important; }
.battle-hit { animation: battle-damage-hit 500ms steps(2, end) both !important; }
.battle-faint { animation: battle-faint-drop 650ms ease-in both !important; }
.battle-captured { animation: battle-capture-shrink 850ms ease-in both !important; }
.battle-break-free { animation: battle-break-free 500ms ease-out both !important; }
.battle-healing { animation: battle-healing 520ms steps(2, end) both !important; }
.battle-switch-out { animation: battle-switch-out 420ms ease-in both !important; }
.battle-switch-in { animation: battle-player-sendout 620ms ease-out both !important; }
.battle-heal-spark {
    position: absolute;
    left: 20%;
    bottom: 27%;
    color: #8dffb1;
    font-size: 54px;
    text-shadow: 0 0 8px #fff, 0 0 18px #4ddf79;
    animation: battle-impact-pop 500ms steps(2, end) both;
}
.battle-running .battle-sky,
.battle-running .battle-command { animation: battle-run-away 320ms ease-in both; }
.battle-enemies {
    position: absolute;
    z-index: 8;
    top: 38px;
    left: 5%;
    display: flex;
    gap: 18px;
}
.battle-trainers {
    position: absolute;
    z-index: 8;
    right: 5%;
    bottom: 20px;
    display: flex;
    gap: 14px;
}
.trainer-party-status {
    position: absolute;
    z-index: 10;
    top: 9px;
    right: 11px;
    display: grid;
    gap: 3px;
    min-width: 125px;
    padding: 4px 6px;
    border: 2px solid #39516c;
    background: rgba(8, 21, 35, .84);
    color: #fff8db;
    font: 700 9px ui-monospace, "Courier New", monospace;
}
.trainer-party-status-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.trainer-party-status-row > b { white-space: nowrap; font-size: 8px; }
.trainer-party-balls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; max-width: 78px; }
.trainer-party-ball {
    display: block;
    width: 11px;
    height: 11px;
    background: center / contain no-repeat url("/game/battle/effects/party-ball-active.png");
    image-rendering: pixelated;
    filter: saturate(1.15);
}
.trainer-party-ball.defeated, .trainer-party-ball.captured {
    background-image: url("/game/battle/effects/party-ball-fainted.png");
    filter: none;
}
.battle-hud {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: clamp(178px, 29cqw, 330px);
    min-height: 68px;
    border: 4px double #315c3e;
    border-radius: 10px 4px 10px 4px;
    padding: 7px 10px 6px;
    color: #28333a;
    background: #e4e8ce;
    box-shadow: 8px 9px rgba(48, 84, 59, .45);
    font-family: ui-monospace, "Courier New", monospace;
}
.battle-hud.selected { outline: 3px solid #e4b83b; outline-offset: 2px; }
.battle-hud.captured, .battle-hud.defeated { opacity: .42; }
.battle-hud-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: clamp(12px, 1.8cqw, 22px);
    line-height: 1;
}
.battle-hud-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-hud-heading i { margin-left: 3px; color: #e47882; font-style: normal; }
.battle-hud-heading > b { white-space: nowrap; font-size: clamp(11px, 1.55cqw, 19px); }
.battle-status-label {
    display: inline-block;
    width: max-content;
    margin: 2px 0 0 36px;
    padding: 1px 4px;
    border-radius: 2px;
    background: #ba4458;
    color: #fff8df;
    font-size: clamp(8px, 1cqw, 12px);
    font-weight: 800;
    line-height: 1.1;
}
.battle-hp-row {
    display: grid;
    grid-template-columns: 31px 1fr;
    align-items: center;
    margin: 6px 0 0 42px;
    border-radius: 11px 4px 4px 11px;
    padding: 2px 4px 2px 5px;
    color: #f2c441;
    background: #42534a;
    font-size: 11px;
    font-style: italic;
}
.battle-hud .hp-track {
    height: 9px;
    margin: 0;
    border: 2px solid #e8e4bd;
    border-radius: 5px;
    background: #758175;
}
.battle-hud .hp-track i { border-radius: 3px; background: #58c783; }
.battle-hp-numbers {
    display: block;
    margin: 1px 5px 0 0;
    text-align: right;
    font-size: 12px;
    font-weight: 900;
}
.battle-exp-row {
    position: absolute;
    right: 8px;
    bottom: -13px;
    display: grid;
    grid-template-columns: 33px 1fr;
    align-items: center;
    width: 150px;
    color: #e6c633;
    font-size: 10px;
}
.battle-hud .exp-track {
    height: 6px;
    margin: 0;
    border: 1px solid #31516b;
    background: #7b8e94;
}
.battle-hud .exp-track i { background: #4ba6da; }
.battler {
    display: block;
    box-sizing: border-box;
    min-width: 150px;
    border: 4px double #35435e;
    border-radius: 5px;
    padding: 9px 11px;
    background: rgba(255, 253, 232, .95);
    box-shadow: 4px 5px rgba(38, 55, 78, .22);
}
.battler.selected { outline: 4px solid #f2c541; }
.battler.captured { opacity: .6; }
.battler strong, .battler small { display: block; }
.battler small { color: #536177; font-size: 10px; }
.hp-track { display: block; width: 100%; height: 7px; margin-top: 7px; border: 1px solid #263650; background: #d8d8c8; }
.hp-track i { display: block; height: 100%; background: #54c978; }
.exp-track {
    display: block;
    height: 5px;
    margin-top: 5px;
    border: 1px solid #263650;
    background: #d8d8c8;
}
.exp-track i { display: block; height: 100%; background: #5aa7e8; }
.battle-enemy-button { padding: 0; border: 0; color: #152035; background: transparent; text-align: left; }
.battle-command {
    position: relative;
    z-index: 12;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    border-top: 0;
    background: #1f6974;
}
.battle-command.battle-messaging {
    grid-template-columns: 1fr;
}
.battle-command.battle-messaging .battle-actions {
    display: none;
}
.battle-log {
    position: relative;
    display: flex;
    align-items: center;
    border: 5px double #c7a536;
    padding: 5px 14px;
    color: #fff;
    background: #236b77;
    text-shadow: 2px 2px #375465;
    font: 900 clamp(12px, 1.75cqw, 21px)/1.18 ui-monospace, "Courier New", monospace;
}
.battle-log.awaiting-continue {
    cursor: pointer;
}
.battle-continue-arrow {
    position: absolute;
    right: 18px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 11px solid #fff;
    filter: drop-shadow(2px 2px #375465);
    animation: battle-prompt-arrow .62s steps(2, end) infinite;
}
.blackout-transition::after {
    content: "";
    position: absolute;
    z-index: 100;
    inset: 0;
    pointer-events: none;
    background: #05070a;
    animation: battle-blackout .9s linear both;
}
.battle-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: stretch;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    border: 5px double #4d587d;
    padding: 2px 6px;
    background: #d8dadd;
}
.battle-actions button {
    position: relative;
    min-height: 24px;
    border: 0;
    padding: 2px 6px 2px 17px;
    color: #30343c;
    background: transparent;
    text-align: left;
    font: 1000 clamp(10px, 1.55cqw, 18px)/1 ui-monospace, "Courier New", monospace;
}
.battle-actions button:hover:not(:disabled),
.battle-actions button:focus-visible,
.battle-actions button.keyboard-selected { background: rgba(255,255,255,.48); outline: none; }
.battle-actions button:hover:not(:disabled)::before,
.battle-actions button:focus-visible::before,
.battle-actions button.keyboard-selected::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 11px solid #284840;
    transform: translateY(-50%);
}
.battle-actions button:disabled { opacity: .38; }
.battle-actions button strong,
.battle-actions button small { display: block; }
.battle-actions button small { margin-top: 3px; color: #66717c; font-size: 9px; }
.battle-actions .battle-move { font-size: 12px; }
.battle-actions .battle-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.battle-item-source-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
}
.battle-ball-icon {
    width: 24px;
    height: 24px;
    border: 0;
    background: url("/game/battle/effects/poke-ball.png") 0 0 / 24px 48px no-repeat;
    image-rendering: pixelated;
}
.battle-potion-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 25px;
    border: 2px solid #465579;
    border-radius: 4px 4px 8px 8px;
    color: #fff;
    background: #7a8fd5;
    font-size: 11px;
}
.battle-party-choice {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 5px;
    font-size: 11px !important;
}
.battle-party-choice img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
}
.battle-actions .battle-back { color: #8a3f46; font-size: 12px; }
.battle-waiting {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4b5360;
    text-align: center;
    font: 1000 10px/1.25 ui-monospace, "Courier New", monospace;
}
.battle-waiting span {
    width: 13px;
    height: 13px;
    border: 3px solid #8d96a0;
    border-top-color: #315c3e;
    border-radius: 50%;
    animation: battle-waiting-spin .8s steps(8, end) infinite;
}

.battle-status-cast {
    animation: battle-status-cast .48s steps(3, end);
}
.battle-status-wave {
    position: absolute;
    left: 76%;
    top: 27%;
    width: 18%;
    aspect-ratio: 1;
    border: 5px solid rgba(92, 125, 197, .78);
    border-radius: 50%;
    animation: battle-status-wave .52s ease-out both;
}
.battle-status-wave[data-slot="1"] { left: 59%; top: 31%; }
.battle-status-wave[data-player-slot="0"] { left: 17%; top: 66%; }
.battle-status-wave[data-player-slot="1"] { left: 31%; top: 62%; }
.battle-stat-down {
    animation: battle-stat-down .7s steps(5, end);
}
.battle-stat-up {
    animation: battle-stat-up .7s steps(5, end);
}
.battle-miss {
    animation: battle-miss .55s ease-out;
}

@keyframes battle-waiting-spin {
    to { transform: rotate(360deg); }
}
@keyframes battle-transition-reveal {
    0% { opacity: 0; clip-path: inset(50% 0); }
    10% { opacity: 1; clip-path: inset(0); }
    82% { opacity: 1; clip-path: inset(0); }
    100% { opacity: 0; clip-path: inset(50% 0); }
}

@keyframes battle-transition-stripes {
    0% { transform: translateX(-100%); }
    24%, 72% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

@keyframes battle-transition-line {
    0%, 10% { width: 0; opacity: 0; }
    28%, 72% { width: min(82%, 540px); opacity: 1; }
    100% { width: 0; opacity: 0; }
}

@keyframes battle-transition-ball {
    0%, 16% {
        opacity: 0;
        transform: scale(.35) rotate(-180deg);
    }
    32% {
        opacity: 1;
        transform: scale(1.18) rotate(12deg);
    }
    42%, 70% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    100% {
        opacity: 0;
        transform: scale(.35) rotate(180deg);
    }
}

@keyframes battle-transition-flash {
    0%, 28% { opacity: 0; transform: scale(.5); }
    38% { opacity: .8; transform: scale(1); }
    55%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes battle-prompt-arrow {
    50% { transform: translateY(4px); }
}
@keyframes battle-blackout {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes battle-status-cast {
    50% { filter: brightness(1.65) saturate(1.5); transform: translateY(-4px); }
}
@keyframes battle-status-wave {
    0% { opacity: 1; transform: scale(.15); }
    100% { opacity: 0; transform: scale(1.4); }
}
@keyframes battle-stat-down {
    0%, 100% { filter: none; transform: translateY(0); }
    25%, 65% { filter: hue-rotate(150deg) saturate(1.7); transform: translateY(7px); }
}
@keyframes battle-stat-up {
    0%, 100% { filter: brightness(1); transform: translateY(0); }
    30% { filter: brightness(2.25) saturate(1.6); transform: translateY(-7px); }
    65% { filter: brightness(1.5); transform: translateY(-3px); }
}
@keyframes battle-miss {
    40% { opacity: .38; transform: translateX(16px); }
}
@keyframes battle-idle-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}
@keyframes battle-enemy-sendout {
    0% { opacity: 0; transform: translate(90px, -35px) scale(.05) rotate(15deg); filter: brightness(4); }
    62% { opacity: 1; transform: translate(0, 0) scale(1.16); filter: brightness(2); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); filter: drop-shadow(0 7px 2px rgba(30, 66, 55, .18)); }
}
@keyframes battle-player-sendout {
    0% { opacity: 0; transform: translate(-75px, 50px) scale(.05); filter: brightness(4); }
    70% { opacity: 1; transform: translate(0, 0) scale(1.13); filter: brightness(1.7); }
    100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 7px 2px rgba(30, 66, 55, .18)); }
}
@keyframes battle-opponent-intro {
    0% { opacity: 0; transform: translateX(120px); }
    18%, 67% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100px); }
}
@keyframes battle-trainer-throw {
    0% { opacity: 0; transform: translateX(-110px); background-position: 0 0; }
    18% { opacity: 1; transform: translateX(0); background-position: 0 0; }
    45% { opacity: 1; transform: translateX(0); background-position: 0 25%; }
    62% { opacity: 1; background-position: 0 50%; }
    78% { opacity: 1; background-position: 0 75%; }
    100% { opacity: 0; transform: translateX(-45px); background-position: 0 100%; }
}
@keyframes battle-player-lunge {
    0%, 100% { transform: translate(0, 0); }
    45% { transform: translate(95px, -40px) scale(1.08); }
}
@keyframes battle-damage-hit {
    0%, 100% { opacity: 1; transform: translateX(0); filter: none; }
    20% { opacity: .15; transform: translateX(-9px); filter: brightness(4); }
    40% { opacity: 1; transform: translateX(10px); }
    60% { opacity: .15; transform: translateX(-7px); filter: brightness(4); }
    80% { opacity: 1; transform: translateX(5px); }
}
@keyframes battle-faint-drop {
    0% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; transform: translateY(100px) scaleY(.72); }
    100% { opacity: 0; transform: translateY(150px) scaleY(.2); }
}
@keyframes battle-capture-shrink {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    35% { opacity: 1; transform: scale(1.08); filter: brightness(5) sepia(1) saturate(6); }
    100% { opacity: 0; transform: translate(18px, -18px) scale(.02); filter: brightness(6); }
}
@keyframes battle-break-free {
    0%, 100% { transform: translateX(0); filter: none; }
    20% { transform: translateX(-12px); filter: brightness(2.7); }
    40% { transform: translateX(13px); }
    60% { transform: translateX(-8px); filter: brightness(2.4); }
    80% { transform: translateX(7px); }
}
@keyframes battle-impact-pop {
    0% { opacity: 0; transform: scale(.1) rotate(0); }
    45% { opacity: 1; transform: scale(1.2) rotate(25deg); }
    100% { opacity: 0; transform: scale(.5) rotate(70deg); }
}
@keyframes battle-ember-flight {
    0% {
        left: var(--move-start-x, 27%);
        top: calc(67% + var(--ember-offset, 0px));
        opacity: 0;
        transform: scale(2.25);
    }
    12% { opacity: 1; }
    100% {
        left: var(--ember-target-x);
        top: calc(var(--ember-target-y) + var(--ember-offset, 0px));
        opacity: 1;
        transform: scale(2.8);
    }
}
.battle-scratch-effect,
.battle-vine-effect,
.battle-source-impact,
.battle-water-impact,
.battle-noise-line,
.battle-sand-particle,
.battle-water-projectile {
    position: absolute;
    z-index: 12;
    image-rendering: pixelated;
    pointer-events: none;
}
.battle-scratch-effect,
.battle-vine-effect {
    width: 32px;
    height: 32px;
    left: 76%;
    top: 27%;
    transform: scale(3.2);
}
.battle-scratch-effect[data-slot="1"],
.battle-vine-effect[data-slot="1"],
.battle-source-impact[data-slot="1"],
.battle-water-impact[data-slot="1"] {
    left: 59%;
    top: 31%;
}
.battle-scratch-effect[data-player-slot="0"],
.battle-vine-effect[data-player-slot="0"] { left: 17%; top: 66%; }
.battle-scratch-effect[data-player-slot="1"],
.battle-vine-effect[data-player-slot="1"] { left: 31%; top: 62%; }
.battle-scratch-effect {
    background: url("/game/battle/effects/scratch.png") 0 0 / 32px 160px no-repeat;
    animation:
        battle-source-strike 500ms ease-out both,
        battle-five-frame-sheet 420ms steps(4, end) both;
}
.battle-vine-effect {
    background: url("/game/battle/effects/vine.png") 0 0 / 32px 160px no-repeat;
    animation:
        battle-source-strike 480ms ease-out both,
        battle-five-frame-sheet 400ms steps(4, end) both;
}
.battle-source-impact,
.battle-water-impact {
    width: 32px;
    height: 32px;
    left: 76%;
    top: 27%;
    transform: scale(3);
}
.battle-source-impact {
    background: url("/game/battle/effects/impact.png") center / 32px 32px no-repeat;
    animation: battle-source-impact 340ms steps(3, end) both;
}
.battle-source-impact[data-player-slot="0"] { left: 17%; top: 66%; }
.battle-source-impact[data-player-slot="1"] { left: 31%; top: 62%; }
.battle-manifest-effect {
    position: absolute;
    z-index: 13;
    left: var(--battle-effect-target-x, 76%);
    top: var(--battle-effect-target-y, 27%);
    width: 32px;
    height: 32px;
    object-fit: none;
    object-position: left top;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0;
    animation: battle-manifest-source-effect 620ms steps(4, end) var(--effect-delay, 0ms) both;
}
.battle-manifest-effect[data-slot="1"] { --battle-effect-target-x: 59%; --battle-effect-target-y: 31%; }
.battle-manifest-effect[data-player-slot="0"] { --battle-effect-target-x: 17%; --battle-effect-target-y: 66%; }
.battle-manifest-effect[data-player-slot="1"] { --battle-effect-target-x: 31%; --battle-effect-target-y: 62%; }
.battle-water-projectile {
    left: var(--move-start-x, 27%);
    top: 65%;
    width: 16px;
    height: 16px;
    background: url("/game/battle/effects/water-orb.png") 0 0 / 16px 64px no-repeat;
    animation:
        battle-water-flight 540ms ease-out both,
        battle-four-frame-sheet 420ms steps(3, end) infinite;
}
.battle-water-projectile[data-slot="0"] {
    --move-target-x: 76%;
    --move-target-y: 27%;
}
.battle-water-projectile[data-slot="1"] {
    --move-target-x: 59%;
    --move-target-y: 31%;
}
.battle-water-projectile[data-player-slot="0"] {
    --move-target-x: 17%;
    --move-target-y: 66%;
}
.battle-water-projectile[data-player-slot="1"] {
    --move-target-x: 31%;
    --move-target-y: 62%;
}
.battle-water-impact {
    background: url("/game/battle/effects/water-impact.png") center / 32px 32px no-repeat;
    filter: drop-shadow(0 0 4px #d8ffff);
    animation: battle-water-splash 470ms ease-out both;
}
.battle-sand-particle {
    left: var(--move-start-x, 27%);
    top: calc(62% + var(--sand-offset, 0px));
    width: 8px;
    height: 8px;
    background: url("/game/battle/effects/mud-sand.png") center / 8px 8px no-repeat;
    animation: battle-sand-flight 620ms ease-out var(--sand-delay, 0ms) both;
}
.battle-sand-particle[data-slot="0"] {
    --move-target-x: 76%;
    --move-target-y: 27%;
}
.battle-sand-particle[data-slot="1"] {
    --move-target-x: 59%;
    --move-target-y: 31%;
}
.battle-sand-particle[data-player-slot="0"] {
    --move-target-x: 17%;
    --move-target-y: 66%;
}
.battle-sand-particle[data-player-slot="1"] {
    --move-target-x: 31%;
    --move-target-y: 62%;
}
.battle-noise-line {
    left: 24%;
    top: 57%;
    width: 32px;
    height: 32px;
    background: url("/game/battle/effects/noise-line.png") 0 0 / 32px 128px no-repeat;
    animation:
        battle-noise-expand 620ms ease-out both,
        battle-noise-frames 420ms steps(3, end) both;
}
.battle-noise-line[data-actor-slot="1"] { left: 37%; }
.battle-whirlwind-line,
.battle-roar-line,
.battle-disable-sparkle,
.battle-poison-cloud {
    position: absolute;
    z-index: 13;
    image-rendering: pixelated;
    pointer-events: none;
    left: 76%;
    top: 27%;
}
.battle-whirlwind-line[data-slot="1"],
.battle-roar-line[data-slot="1"],
.battle-disable-sparkle[data-slot="1"],
.battle-poison-cloud[data-slot="1"] { left: 59%; top: 31%; }
.battle-whirlwind-line[data-player-slot="0"],
.battle-roar-line[data-player-slot="0"],
.battle-disable-sparkle[data-player-slot="0"],
.battle-poison-cloud[data-player-slot="0"] { left: 17%; top: 66%; }
.battle-whirlwind-line[data-player-slot="1"],
.battle-roar-line[data-player-slot="1"],
.battle-disable-sparkle[data-player-slot="1"],
.battle-poison-cloud[data-player-slot="1"] { left: 31%; top: 62%; }
.battle-whirlwind-line {
    width: 32px;
    height: 16px;
    margin-top: var(--whirl-offset, 0px);
    background: url("/game/battle/effects/whirlwind-lines.png") 0 0 / 32px 48px no-repeat;
    animation:
        battle-whirlwind-cross 620ms linear var(--whirl-delay, 0ms) both,
        battle-three-vertical-frames 180ms steps(2, end) var(--whirl-delay, 0ms) infinite;
}
.battle-roar-line {
    width: 32px;
    height: 32px;
    background: url("/game/battle/effects/noise-line.png") 0 0 / 32px 128px no-repeat;
    animation:
        battle-roar-expand 620ms ease-out both,
        battle-noise-frames 420ms steps(3, end) both;
}
.battle-disable-sparkle {
    width: 32px;
    height: 32px;
    background: url("/game/battle/effects/sparkle-4.png") 0 0 / 32px 160px no-repeat;
    animation:
        battle-disable-spin 840ms linear both,
        battle-five-frame-sheet 480ms steps(4, end) infinite;
}
.battle-poison-cloud {
    width: 32px;
    height: 16px;
    margin-left: var(--gas-offset, 0px);
    background: url("/game/battle/effects/purple-gas-cloud.png") 0 0 / 32px 32px no-repeat;
    animation:
        battle-poison-drift 700ms ease-in-out var(--gas-delay, 0ms) both,
        battle-two-vertical-frames 260ms steps(1, end) var(--gas-delay, 0ms) infinite;
}
.battle-forced-out { animation: battle-forced-switch-out 430ms ease-in both !important; }
.battle-disabled-flash { animation: battle-disable-flash 520ms steps(4, end) both !important; }
.battle-short-lunge { animation: battle-player-short-lunge 520ms ease-in-out both !important; }
.battle-tail-whip { animation: battle-tail-whip 700ms ease-in-out both !important; }
.battle-enemy-lunge { animation: battle-enemy-lunge 520ms ease-in-out both !important; }
@keyframes battle-ember-flare {
    0% { opacity: 0; transform: scale(.7) rotate(-20deg); }
    28% { opacity: 1; transform: scale(3.4) rotate(8deg); }
    100% { opacity: 0; transform: scale(2.1) rotate(30deg); }
}
@keyframes battle-three-vertical-frames { to { background-position-y: -48px; } }
@keyframes battle-two-vertical-frames { to { background-position-y: -32px; } }
@keyframes battle-whirlwind-cross {
    0% { opacity: 0; transform: translate(-68px, 22px) scale(2.4); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(46px, -18px) scale(3); }
}
@keyframes battle-roar-expand {
    from { opacity: 0; transform: translate(-42px, 18px) scale(.5); }
    25% { opacity: 1; }
    to { opacity: 0; transform: translate(10px, 0) scale(4); }
}
@keyframes battle-disable-spin {
    from { opacity: 0; transform: translate(-28px, 22px) rotate(0) scale(2); filter: grayscale(0); }
    20% { opacity: 1; }
    to { opacity: 0; transform: translate(20px, -34px) rotate(540deg) scale(3); filter: grayscale(1); }
}
@keyframes battle-poison-drift {
    from { opacity: 0; transform: translate(-54px, 24px) scale(1.8); }
    25%, 75% { opacity: .82; }
    to { opacity: 0; transform: translate(12px, -12px) scale(3.2); }
}
@keyframes battle-forced-switch-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(190px); }
}
@keyframes battle-disable-flash {
    0%, 100% { filter: grayscale(0); opacity: 1; }
    50% { filter: grayscale(1); opacity: .35; }
}
@keyframes battle-ember-frames {
    from { background-position-y: 0; }
    to { background-position-y: -128px; }
}
@keyframes battle-five-frame-sheet {
    from { background-position-y: 0; }
    to { background-position-y: -128px; }
}
@keyframes battle-four-frame-sheet {
    from { background-position-y: 0; }
    to { background-position-y: -48px; }
}
@keyframes battle-noise-frames {
    from { background-position-y: 0; }
    to { background-position-y: -96px; }
}
@keyframes battle-source-strike {
    0% { opacity: 0; transform: scale(.3) rotate(-18deg); }
    24% { opacity: 1; transform: scale(3.4) rotate(5deg); }
    100% { opacity: 0; transform: scale(2.8) rotate(14deg); }
}
@keyframes battle-source-impact {
    0% { opacity: 0; transform: scale(.3) rotate(0); }
    35% { opacity: 1; transform: scale(3.6) rotate(18deg); }
    100% { opacity: 0; transform: scale(2.2) rotate(58deg); }
}
@keyframes battle-manifest-source-effect {
    0% {
        left: var(--move-start-x, 27%);
        top: var(--move-start-y, 66%);
        opacity: 0;
        transform: scale(.9);
    }
    22% { opacity: 1; }
    72% {
        left: var(--battle-effect-target-x, 76%);
        top: var(--battle-effect-target-y, 27%);
        opacity: 1;
        transform: scale(2.8);
    }
    100% {
        left: var(--battle-effect-target-x, 76%);
        top: var(--battle-effect-target-y, 27%);
        opacity: 0;
        transform: scale(2.3);
    }
}
@keyframes battle-water-flight {
    0% {
        left: var(--move-start-x, 27%);
        top: var(--move-start-y, 66%);
        opacity: 0;
        transform: scale(2);
    }
    12% { opacity: 1; }
    100% {
        left: var(--move-target-x);
        top: var(--move-target-y);
        opacity: 1;
        transform: scale(3);
    }
}
@keyframes battle-water-splash {
    0% { opacity: 0; transform: scale(.4); filter: brightness(3); }
    35% { opacity: 1; transform: scale(3.8); filter: brightness(1.6); }
    100% { opacity: 0; transform: scale(5) translateY(5px); }
}
@keyframes battle-sand-flight {
    0% {
        left: var(--move-start-x, 27%);
        top: calc(var(--move-start-y, 66%) + var(--sand-offset, 0px));
        opacity: 0;
        transform: scale(1.5) rotate(0);
    }
    18% { opacity: 1; }
    100% {
        left: var(--move-target-x);
        top: calc(var(--move-target-y) + var(--sand-offset, 0px));
        opacity: 0;
        transform: scale(3) rotate(400deg);
    }
}
@keyframes battle-noise-expand {
    0% { opacity: 0; transform: translate(0, 0) scale(.3); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(135px, -75px) scale(3.2); }
}
@keyframes battle-player-short-lunge {
    0%, 100% { transform: translate(0, 0); }
    42% { transform: translate(58px, -24px) scale(1.04); }
}
@keyframes battle-enemy-lunge {
    0%, 100% { transform: translate(0, 0); }
    42% { transform: translate(-82px, 42px) scale(1.05); }
}
@keyframes battle-tail-whip {
    0%, 100% { transform: translateX(0) scaleX(1); }
    22% { transform: translateX(-10px) scaleX(-1); }
    45% { transform: translateX(13px) scaleX(1); }
    68% { transform: translateX(-8px) scaleX(-1); }
    84% { transform: translateX(6px) scaleX(1); }
}
@keyframes battle-ball-throw {
    0% { top: 72%; left: 17%; transform: rotate(0) scale(.75); }
    48% { top: 15%; left: 55%; transform: rotate(520deg) scale(1); }
    100% { top: var(--ball-end-y, 32%); left: var(--ball-end-x, 77%); transform: rotate(820deg) scale(.9); }
}
@keyframes battle-ball-settle {
    0%, 28% { top: var(--ball-end-y, 32%); left: var(--ball-end-x, 77%); transform: rotate(0); }
    42% { transform: rotate(-22deg); }
    56% { transform: rotate(22deg); }
    70% { transform: rotate(-14deg); }
    84% { transform: rotate(14deg); }
    100% { top: 52%; transform: rotate(0); }
}
@keyframes battle-run-away {
    to { opacity: 0; transform: translateX(-80px); }
}
@keyframes battle-healing {
    0%, 100% { filter: none; transform: translateY(0); }
    25% { filter: brightness(2.5) drop-shadow(0 0 7px #72ef92); transform: translateY(-4px); }
    50% { filter: none; transform: translateY(0); }
    75% { filter: brightness(2.5) drop-shadow(0 0 7px #72ef92); transform: translateY(-4px); }
}
@keyframes battle-switch-out {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    70% { opacity: 1; transform: translate(-35px, 12px) scale(.25); filter: brightness(5); }
    100% { opacity: 0; transform: translate(-55px, 18px) scale(.02); filter: brightness(6); }
}

.pause-menu {
    position: absolute;
    inset: 0;
    z-index: 30;
    color: #202942;
    background: rgba(11, 24, 39, .2);
    font-family: ui-monospace, "Courier New", monospace;
}
.start-menu-panel { position: absolute; inset: 0; }
.start-menu-list {
    position: absolute;
    top: 3%;
    right: 2.2%;
    width: min(29%, 208px);
    display: grid;
    padding: 7px;
    border: 7px double #384762;
    border-radius: 5px;
    background: #fffdeb;
    box-shadow: 5px 6px rgba(19, 31, 49, .28);
}
.start-menu-list button {
    position: relative;
    min-height: 36px;
    border: 0;
    padding: 3px 9px 3px 25px;
    color: #26334b;
    background: transparent;
    text-align: left;
    font: 900 clamp(10px, 1.55vw, 15px)/1 ui-monospace, "Courier New", monospace;
    letter-spacing: -.03em;
}
.start-menu-list button::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #e64048;
    transform: translateY(-50%);
    opacity: 0;
}
.start-menu-list button.selected {
    color: #101827;
    background: linear-gradient(90deg, #fff3a9, #fffdeb);
}
.start-menu-list button.selected::before { opacity: 1; }
.start-menu-list button:focus { outline: none; }
.start-menu-help {
    position: absolute;
    left: 2.2%;
    right: 33%;
    bottom: 3%;
    min-height: 82px;
    display: flex;
    align-items: center;
    border: 7px double #384762;
    border-radius: 5px;
    padding: 11px 16px;
    color: #27344b;
    background: #fffdeb;
    box-shadow: 5px 6px rgba(19, 31, 49, .22);
    font: 800 clamp(9px, 1.35vw, 14px)/1.35 ui-monospace, "Courier New", monospace;
    white-space: pre-line;
}
.menu-page {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background:
        linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.08)),
        repeating-linear-gradient(135deg, #e9e7c9 0 8px, #deddbc 8px 16px);
}
.menu-page-header {
    min-height: 62px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 9px;
    border-bottom: 7px double #3b4962;
    padding: 7px 14px;
    color: #243149;
    background: #fffdeb;
}
.menu-page-header button {
    width: 38px;
    height: 38px;
    border: 3px solid #465773;
    border-radius: 4px;
    color: #fff;
    background: #e4444b;
    font-weight: 1000;
}
.menu-page-header p { margin: 0; color: #d83e47; font-size: 8px; font-weight: 1000; letter-spacing: .16em; }
.menu-page-header h2 { margin: 2px 0 0; font-size: clamp(15px, 2.2vw, 22px); }
.menu-page-header > span { color: #66738a; font-size: 9px; font-weight: 900; }
.menu-page-content {
    min-height: 0;
    overflow: auto;
    padding: 16px 18px;
}
.pc-page .menu-page-content { background: linear-gradient(135deg, #6da7b5, #3a7183); }
.pc-root-window { width: min(520px, 92%); margin: 4% auto; padding: 14px; border: 7px double #384762; border-radius: 5px; background: #fffdeb; box-shadow: 6px 7px rgba(18, 32, 47, .28); }
.pc-root-window > p { margin: 0 0 12px; font-weight: 900; }
.pc-root-window > button { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 48px; border: 0; padding: 8px 12px 8px 28px; color: #253149; background: transparent; text-align: left; font-family: inherit; }
.pc-root-window > button small { color: #66738a; }
.pc-root-window > button.selected { background: linear-gradient(90deg, #fff2a1, #fffdeb); }
.pc-storage-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.pc-storage-layout section { min-width: 0; padding: 10px; border: 5px double #384762; border-radius: 5px; background: #fffdeb; }
.pc-storage-layout h3 { display: flex; justify-content: space-between; margin: 0 0 8px; }
.pc-mon-list { display: grid; gap: 5px; }
.pc-mon-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 7px; min-height: 49px; border: 2px solid #8491a2; color: #253149; background: #f3f1d8; text-align: left; }
.pc-mon-row.selected { border-color: #e2444b; background: #fff2a1; }
.pc-mon-row span:nth-child(2) { display: grid; }
.pc-mon-row small { color: #66738a; }
.pc-mon-row b { font-size: 9px; }
.pc-back { display: block; min-width: 150px; margin: 10px auto 0; border: 3px solid #44546e; padding: 7px; color: #253149; background: #fffdeb; font-weight: 900; }
.pc-back.selected { outline: 3px solid #f4d74d; }
.pc-skin-grid { display: grid; grid-template-columns: repeat(6, minmax(62px, 1fr)); gap: 7px; }
.pc-skin-grid button { min-height: 76px; display: grid; place-items: center; border: 3px solid #66758b; color: #253149; background: #fffdeb; font: 800 8px/1.1 ui-monospace, monospace; }
.pc-skin-grid button.selected { border-color: #f5d23d; box-shadow: 0 0 0 2px #253149; }
.pc-skin-grid button.active { background: #d9f0c5; }
.pc-skin-grid button span { width: 16px; height: 32px; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; transform: scale(1.45); transform-origin: center; }
.option-rival > span:last-child { display: flex; gap: 6px; align-items: center; }
.option-rival input { width: 105px; border: 2px solid #60718c; padding: 7px; color: #253149; background: #fff; font: 900 13px ui-monospace, monospace; text-transform: uppercase; }
@media (max-width: 680px) { .pc-storage-layout { grid-template-columns: 1fr; } .pc-skin-grid { grid-template-columns: repeat(4, 1fr); } }
.menu-page.mart-page {
    display: block;
    background: transparent;
}
.mart-page .menu-page-header { display: none; }
.mart-page .menu-page-content {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding: 0;
}
.mart-screen {
    position: absolute;
    inset: 0;
    color: #20283a;
    font: 900 clamp(10px, 1.55vw, 15px)/1.35 ui-monospace, "Courier New", monospace;
    text-shadow: none;
}
.mart-dialogue-window,
.mart-choice-window,
.mart-list-window,
.mart-money-window,
.mart-item-window,
.mart-quantity-window {
    border: 7px double #40506a;
    border-radius: 4px;
    background: #fffdec;
    box-shadow: 4px 5px rgba(25, 36, 54, .28);
}
.mart-dialogue-window {
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 2%;
    min-height: 22%;
    padding: 4% 4% 2%;
    text-align: left;
}
.mart-choice-window {
    position: absolute;
    display: grid;
    padding: 7px;
}
.mart-root-choices {
    right: 2%;
    bottom: 26%;
    width: min(29%, 210px);
}
.mart-confirm-choices {
    right: 3%;
    bottom: 26%;
    width: min(22%, 160px);
}
.mart-choice-window button,
.mart-list-window button {
    position: relative;
    border: 0;
    color: #20283a;
    background: transparent;
    font: inherit;
    text-align: left;
}
.mart-choice-window button {
    padding: 6px 8px 6px 25px;
}
.mart-choice-window button.selected,
.mart-list-window button.selected { background: #fff4a8; }
.mart-choice-window button.selected::before,
.mart-list-window button.selected::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #df3f49;
    transform: translateY(-50%);
}
.mart-money-window {
    position: absolute;
    top: 3%;
    left: 2%;
    width: min(30%, 220px);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 8px 12px;
}
.mart-money-window small { color: #66738a; }
.mart-money-window strong { text-align: right; }
.mart-list-window {
    position: absolute;
    top: 3%;
    right: 2%;
    width: min(48%, 350px);
    max-height: 68%;
    overflow-y: auto;
    padding: 8px;
}
.mart-list-window button {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 5px 8px 5px 27px;
}
.mart-list-window button strong { font: inherit; }
.mart-item-window {
    position: absolute;
    left: 2%;
    right: 52%;
    bottom: 3%;
    min-height: 34%;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px;
}
.mart-item-window img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}
.mart-item-window p { margin: 0; }
.mart-selected-item {
    right: 2%;
    bottom: 28%;
    min-height: 29%;
}
.mart-quantity-window {
    position: absolute;
    right: 3%;
    bottom: 27%;
    width: min(29%, 210px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px 13px;
}
.mart-quantity-window small { grid-column: 1 / -1; color: #66738a; }
.mart-quantity-window strong { font-size: 1.3em; }
.mart-quantity-window b { text-align: right; }
.mart-quantity-window span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.mart-quantity-window button {
    border: 2px solid #40506a;
    padding: 2px 5px;
    color: #20283a;
    background: #fff4a8;
    font: inherit;
}
.mart-quantity-window .mart-quantity-ok {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 3px 14px;
}
.mart-message-window {
    width: auto;
    color: #20283a;
    font: inherit;
    cursor: pointer;
}
.mart-message-window i {
    position: absolute;
    right: 3%;
    bottom: 10%;
    color: #df3f49;
    font-style: normal;
    animation: battle-prompt-cursor .7s steps(2) infinite;
}
.menu-section-title {
    margin: 0 0 12px;
    color: #b92d39;
    font-size: clamp(13px, 1.8vw, 18px);
}
.menu-empty {
    border: 5px double #465773;
    padding: 20px;
    background: #fffdeb;
    text-align: center;
}
.menu-party-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.menu-mon-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    min-height: 112px;
    border: 5px double #43526d;
    border-radius: 5px;
    padding: 8px;
    background: #fffdeb;
    box-shadow: 3px 4px rgba(41, 53, 75, .18);
}
.menu-mon-icon {
    width: 56px;
    height: 56px;
    align-self: center;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 56px auto;
    image-rendering: pixelated;
}
.menu-mon-card h3 { margin: 0; font-size: 14px; }
.menu-mon-card h3 small { color: #69758a; font-size: 9px; }
.menu-hp-label { display: flex; justify-content: space-between; margin-top: 7px; color: #43516a; font-size: 9px; font-weight: 900; }
.menu-hp-track { display: block; height: 8px; margin-top: 3px; border: 2px solid #384762; background: #d5d4c1; }
.menu-hp-track i { display: block; height: 100%; background: #55c777; }
.menu-moves { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.menu-moves span { border-radius: 2px; padding: 3px 5px; color: #fff; background: #60758f; font-size: 8px; font-weight: 900; }
.source-party-menu,
.source-item-action,
.source-confirm-screen,
.source-message-screen {
    position: relative;
    min-height: 100%;
    color: #25324a;
    font-family: ui-monospace, "Courier New", monospace;
    font-weight: 900;
}
.source-party-menu {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    height: 100%;
    min-height: 0;
}
.source-party-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 4px 10px;
}
.source-party-slot {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    border: 3px double #5d6b80;
    border-radius: 8px 18px 18px 8px;
    padding: 2px 7px 2px 3px;
    color: #26334b;
    background: linear-gradient(180deg, #fffef1, #ecebd6);
    box-shadow: 3px 4px rgba(30, 42, 64, .22);
    text-align: left;
    font: inherit;
}
.source-party-slot.lead {
    grid-row: 1 / -1;
    grid-template-columns: 86px minmax(0, 1fr);
}
.source-party-slot.empty {
    opacity: .34;
    background: repeating-linear-gradient(135deg, #cbd2cb 0 8px, #dde2da 8px 16px);
}
.source-party-slot.selected {
    border-color: #dc3c46;
    background: linear-gradient(180deg, #fff3a7, #fffbdc);
    transform: translateX(4px);
}
.source-party-slot.selected::before,
.source-action-window button.selected::before,
.source-item-picker button.selected::before,
.summary-move-list button.selected::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #e03b46;
    transform: translateY(-50%);
}
.source-party-slot.switch-source { box-shadow: inset 0 0 0 3px #78bddd, 3px 4px rgba(30, 42, 64, .22); }
.source-party-slot.fainted { filter: grayscale(.75); }
.source-party-slot:disabled { opacity: 1; }
.source-party-slot .party-slot-icon { width: 38px; height: 38px; background-size: 38px auto; }
.source-party-slot.lead .party-slot-icon { width: 78px; height: 78px; background-size: 78px auto; }
.party-held-mark {
    position: absolute;
    left: 45px;
    top: 7px;
    color: #efb833;
    text-shadow: 1px 1px #47546b;
}
.source-party-slot.lead .party-held-mark { left: 70px; }
.menu-page-content:has(.source-party-menu) {
    overflow: hidden;
    padding: 8px 12px;
}
.party-slot-data { min-width: 0; }
.party-slot-data > strong {
    display: block;
    overflow: hidden;
    font-size: clamp(10px, 1.55vw, 15px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.party-slot-data > strong i,
.summary-mon-pane h3 i { font-style: normal; }
.female { color: #e04a64; }
.male { color: #4386cf; }
.party-slot-data > small {
    display: flex;
    justify-content: space-between;
    min-height: 12px;
    margin-top: 2px;
    color: #56657d;
    font-size: 9px;
}
.party-slot-data > small b { color: #e33e47; }
.party-hp-line {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.party-hp-line em {
    color: #e4a51f;
    font-size: 9px;
    font-style: normal;
}
.party-hp-line .menu-hp-track { margin: 0; }
.party-hp-values {
    display: block;
    margin-top: 2px;
    text-align: right;
    font-size: 9px;
}
.source-menu-message {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 64px;
    border: 7px double #42516b;
    border-radius: 5px;
    padding: 10px 15px;
    background: #fffdeb;
    box-shadow: 4px 5px rgba(26, 38, 57, .22);
}
.source-menu-message p {
    margin: 0;
    font-size: clamp(11px, 1.6vw, 16px);
    line-height: 1.3;
    white-space: pre-line;
}
.source-menu-message button,
.source-item-picker > button {
    border: 4px double #4a5972;
    padding: 8px 13px;
    color: #fff;
    background: #df3e48;
    font: inherit;
    font-size: 10px;
}
.source-action-window {
    position: absolute;
    right: 3%;
    bottom: 82px;
    z-index: 2;
    display: grid;
    min-width: 148px;
    border: 7px double #43516b;
    border-radius: 5px;
    padding: 7px;
    background: #fffdeb;
    box-shadow: 5px 6px rgba(30, 42, 62, .24);
}
.source-action-window button {
    position: relative;
    border: 0;
    padding: 7px 11px 7px 22px;
    color: #27344b;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 13px;
}
.source-action-window button.selected { background: #fff2a4; }
.source-action-window button.selected::before { left: 5px; }
.pokemon-summary {
    display: grid;
    grid-template-columns: minmax(115px, 27%) 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100%;
    border: 6px double #48566e;
    color: #27344b;
    background:
        linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .02)),
        repeating-linear-gradient(135deg, #dcebdc 0 10px, #d3e4d5 10px 20px);
    font-family: ui-monospace, "Courier New", monospace;
    font-weight: 900;
}
.summary-tabs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 5px solid #536078;
    background: #718494;
}
.summary-tabs button {
    border: 0;
    border-right: 3px solid #536078;
    padding: 8px 4px;
    color: #eef7e9;
    background: transparent;
    font: inherit;
    font-size: clamp(8px, 1.3vw, 12px);
}
.summary-tabs button.selected {
    color: #29364c;
    background: #fff5a4;
}
.summary-mon-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    border-right: 5px solid #536078;
    padding: 10px 5px;
    background: rgba(239, 244, 223, .8);
}
.summary-mon-pane img {
    width: min(112px, 90%);
    aspect-ratio: 1;
    object-fit: contain;
    image-rendering: pixelated;
}
.summary-mon-pane h3 { max-width: 100%; margin: 1px 0; overflow: hidden; font-size: clamp(11px, 1.6vw, 16px); text-overflow: ellipsis; }
.summary-mon-pane p { margin: 2px 0 8px; font-size: 11px; }
.summary-mon-pane div { display: flex; gap: 5px; margin-top: auto; }
.summary-mon-pane button,
.pokemon-summary footer button {
    border: 3px double #526078;
    color: #fff;
    background: #657e8d;
    font: inherit;
    font-size: 9px;
}
.pokemon-summary > main { min-width: 0; min-height: 0; overflow: auto; padding: 11px; }
.pokemon-summary footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    border-top: 5px solid #536078;
    padding: 5px 8px;
    background: #fffdeb;
    font-size: 8px;
    text-align: center;
}
.pokemon-summary footer button { padding: 4px 7px; }
.summary-info-page { display: grid; gap: 9px; }
.summary-identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 14px;
}
.summary-identity > span,
.summary-stat-list > span,
.summary-ability > span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 0;
    border-bottom: 2px dotted #718078;
    padding: 5px;
}
.summary-identity small,
.summary-stat-list small,
.summary-ability small {
    color: #6b786e;
    font-size: 8px;
}
.summary-identity strong { display: flex; gap: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.summary-identity i,
.summary-move-list i {
    border: 2px solid rgba(38, 48, 60, .5);
    border-radius: 3px;
    padding: 2px 4px;
    color: #fff;
    font-size: 7px;
    font-style: normal;
    text-shadow: 1px 1px rgba(0, 0, 0, .35);
}
.type-normal { background: #aaa67f; }
.type-grass { background: #6dbd52; }
.type-poison { background: #a05ca3; }
.type-fire { background: #e76f3f; }
.type-water { background: #5b8fd5; }
.type-flying { background: #8e9ed4; }
.type-ground { background: #cda94d; }
.summary-memo {
    border: 5px double #58705f;
    padding: 8px 11px;
    background: #fffdeb;
}
.summary-memo h3 { margin: 0 0 5px; color: #d23b45; font-size: 10px; }
.summary-memo p { margin: 0; font-size: 11px; line-height: 1.6; }
.summary-skills-page {
    display: grid;
    grid-template-columns: minmax(120px, .9fr) 1.1fr;
    gap: 12px;
}
.summary-stat-list { display: grid; align-content: start; }
.summary-stat-list strong,
.summary-ability strong { font-size: 12px; }
.summary-ability {
    display: grid;
    align-content: start;
    gap: 7px;
    border: 5px double #58705f;
    padding: 8px;
    background: #fffdeb;
}
.summary-ability p { min-height: 40px; margin: 0; color: #59667a; font-size: 9px; line-height: 1.45; }
.summary-exp-track { display: block; height: 8px; border: 2px solid #4b5870; background: #c9c9b6; }
.summary-exp-track i { display: block; height: 100%; background: #52a9cf; }
.summary-moves-page {
    display: grid;
    grid-template-columns: minmax(135px, 1.15fr) minmax(110px, .85fr);
    gap: 10px;
}
.summary-move-list { display: grid; align-content: start; gap: 5px; }
.summary-move-list button,
.summary-empty-move {
    position: relative;
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    min-height: 35px;
    border: 4px double #536078;
    padding: 4px 6px;
    color: #29364c;
    background: #fffdeb;
    text-align: left;
    font: inherit;
    font-size: 9px;
}
.summary-move-list button.selected { background: #fff3a6; }
.summary-move-list button.selected::before { left: -12px; }
.summary-move-list button.swap-source { box-shadow: inset 0 0 0 3px #e2434c; }
.summary-move-list button span { font-size: 8px; }
.summary-empty-move { display: block; color: #9ca297; }
.summary-move-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 6px;
    border: 5px double #58705f;
    padding: 8px;
    background: #fffdeb;
}
.summary-move-info > span { display: flex; justify-content: space-between; border-bottom: 2px dotted #7b8379; font-size: 9px; }
.summary-move-info p {
    grid-column: 1 / -1;
    min-height: 76px;
    margin: 3px 0;
    font-size: 9px;
    line-height: 1.45;
    white-space: pre-line;
}
.summary-move-info em { grid-column: 1 / -1; color: #d43d46; font-size: 8px; font-style: normal; }
.source-item-action {
    display: grid;
    grid-template-columns: 1fr minmax(140px, 30%);
    grid-template-rows: 1fr auto;
    gap: 12px;
}
.source-item-action .source-action-window {
    position: static;
    align-self: center;
}
.item-mon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 6px double #536078;
    background: #edf3dc;
}
.item-mon-preview img { width: min(145px, 55%); image-rendering: pixelated; }
.item-mon-preview strong { font-size: 16px; }
.item-mon-preview span { margin-top: 6px; color: #657269; font-size: 10px; }
.source-item-action .source-menu-message { grid-column: 1 / -1; }
.source-item-picker {
    min-height: 100%;
    border: 6px double #536078;
    padding: 12px;
    color: #29364c;
    background: #e7edda;
    font-family: ui-monospace, "Courier New", monospace;
    font-weight: 900;
}
.source-item-picker h3 { margin: 0 0 9px; color: #d53b46; font-size: 14px; }
.source-item-picker > div { display: grid; gap: 6px; margin-bottom: 9px; }
.source-item-picker > div > button {
    position: relative;
    display: grid;
    grid-template-columns: 35px 1fr auto;
    align-items: center;
    gap: 8px;
    border: 4px double #536078;
    padding: 7px 10px;
    color: #29364c;
    background: #fffdeb;
    text-align: left;
    font: inherit;
}
.source-item-picker > div > button.selected { background: #fff3a5; }
.source-item-picker > div > button.selected::before { left: -12px; }
.source-item-picker .item-ball,
.source-item-picker .item-bottle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 3px solid #35435a;
}
.source-item-picker .item-ball {
    border-radius: 50%;
    background: linear-gradient(#e34249 0 43%, #35415a 44% 56%, #fff 57%);
}
.source-item-picker .item-bottle { border-radius: 5px 5px 9px 9px; color: #fff; background: #768bd1; }
.source-confirm-screen,
.source-message-screen { display: grid; place-items: center; }
.source-confirm-screen .source-menu-message,
.source-message-screen .source-menu-message { width: min(560px, 90%); }
.source-confirm-screen .source-action-window { bottom: 20%; }
.source-confirm-screen > small { position: absolute; left: 8%; bottom: 8%; }
.source-menu-message.press-to-continue button {
    align-self: end;
    border: 0;
    padding: 0;
    color: #e13d48;
    background: transparent;
    animation: prompt-bounce .75s steps(2) infinite;
}
.menu-bag-layout {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 14px;
}
.menu-bag-art {
    display: grid;
    place-items: center;
    border: 5px double #465773;
    background: linear-gradient(#f5de72, #e5aa45);
}
.menu-bag-art img { width: min(150px, 75%); image-rendering: pixelated; }
.menu-item-list { display: grid; align-content: start; gap: 8px; }
.menu-item-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 4px double #4a5973;
    padding: 10px;
    background: #fffdeb;
}
.menu-item-row .item-ball {
    width: 28px;
    height: 28px;
    border: 3px solid #33415a;
    border-radius: 50%;
    background: linear-gradient(#e34249 0 43%, #35415a 44% 56%, #fff 57%);
}
.menu-item-row .item-bottle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 3px solid #33415a;
    border-radius: 5px 5px 9px 9px;
    color: #fff;
    background: #768bd1;
}
.menu-item-row strong { font-size: 13px; }
.menu-item-row small { display: block; margin-top: 3px; color: #68758a; font-size: 9px; }
.menu-item-row b { color: #b82d38; }
.kanto-map-layout {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
    gap: 14px;
}
.kanto-map-frame {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 7px double #3c4c68;
    background: #1d273a;
}
.kanto-map-image-wrap { position: relative; width: min(100%, 600px); }
.kanto-map-image-wrap img { display: block; width: 100%; image-rendering: pixelated; }
.map-player-pin {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #ef3544;
    box-shadow: 0 0 0 3px #273650, 0 0 12px #fff37c;
    transform: translate(-50%, -50%);
    animation: map-pin-pulse .8s steps(2, end) infinite;
}
@keyframes map-pin-pulse { 50% { opacity: .45; } }
.map-info-card {
    border: 6px double #465773;
    padding: 14px;
    color: #29364e;
    background: #fffdeb;
}
.map-info-card p { margin: 5px 0 13px; color: #6a768a; font-size: 10px; line-height: 1.4; }
.map-info-card ul { margin: 0; padding-left: 18px; font-size: 10px; line-height: 1.8; }
.fly-menu-layout { align-items: stretch; }
.fly-map-frame { min-height: 390px; }
.fly-map-point {
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 2px solid #fffdeb;
    border-radius: 50%;
    background: #d6454c;
    box-shadow: 0 0 0 2px #273650;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.fly-map-point span {
    position: absolute;
    left: 9px;
    top: -7px;
    display: none;
    width: max-content;
    padding: 2px 4px;
    border: 2px solid #273650;
    color: #fffdeb;
    font-size: 8px;
    font-weight: 1000;
    white-space: nowrap;
    background: #273650;
}
.fly-map-point:hover span, .fly-map-point.selected span { display: block; }
.fly-map-point.selected {
    background: #fff06a;
    box-shadow: 0 0 0 2px #273650, 0 0 9px #fff06a;
    animation: map-pin-pulse .8s steps(2, end) infinite;
}
.fly-current-location-pin {
    z-index: 3;
    pointer-events: none;
}
.fly-destination-card { display: flex; flex-direction: column; }
.fly-destination-card .fly-confirm-button { width: 100%; margin: 4px 0 12px; }
.fly-destination-card .fly-destination-list { display: grid; gap: 4px; overflow-y: auto; max-height: 210px; }
.fly-destination-list button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 3px double #465773;
    padding: 6px 8px;
    color: #29364e;
    text-align: left;
    background: #f8f5d9;
    cursor: pointer;
}
.fly-destination-list button.selected { border-color: #d6454c; background: #fff19a; }
.fly-destination-list button small { color: #6a768a; font-size: 8px; }
.trainer-menu-card {
    min-height: 100%;
    display: grid;
    grid-template-columns: 36% 1fr;
    border: 7px double #3f4e69;
    background: linear-gradient(135deg, #df574f 0 36%, #fffdeb 36%);
}
.trainer-menu-portrait { display: grid; place-items: center; }
.trainer-menu-portrait img {
    width: min(150px, 82%);
    max-height: 82%;
    object-fit: contain;
    image-rendering: pixelated;
}
.trainer-menu-data { padding: 20px; }
.trainer-menu-data h3 { margin: 0 0 4px; font-size: 24px; }
.trainer-menu-data > p { margin: 0 0 18px; color: #6c7789; font-size: 10px; }
.trainer-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.trainer-stat-grid div { border-bottom: 2px solid #c7c5ad; padding: 7px 0; }
.trainer-stat-grid small, .trainer-stat-grid strong { display: block; }
.trainer-stat-grid small { color: #8a5260; font-size: 8px; font-weight: 1000; }
.trainer-stat-grid strong { margin-top: 3px; font-size: 13px; }
.menu-badges { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 18px; }
.pokedex-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pokedex-entry {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 8px;
    border: 4px double #465773;
    padding: 7px;
    background: #fffdeb;
}
.pokedex-entry.unknown { filter: grayscale(1); opacity: .48; }
.pokedex-entry .menu-mon-icon { width: 45px; height: 45px; background-size: 45px auto; }
.pokedex-entry strong, .pokedex-entry small { display: block; }
.pokedex-entry small { color: #6c7788; font-size: 9px; }
.dex-status { color: #c42f3c; font-size: 9px; font-weight: 1000; }
.menu-page-content:has(.source-pokedex),
.menu-page-content:has(.source-bag-menu) {
    overflow: hidden;
    padding: 8px;
}
.menu-page-content:has(.source-bag-menu) {
    position: relative;
    display: block;
    min-height: 0;
}
.source-pokedex {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100%;
    overflow: hidden;
    border: 7px double #343d51;
    color: #263148;
    background:
        linear-gradient(rgba(255, 255, 255, .18), transparent),
        #e7ead5;
    box-shadow: inset 0 0 0 4px #c92e3c;
    font-family: ui-monospace, "Courier New", monospace;
    font-weight: 900;
}
.dex-device-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 47px;
    border-bottom: 6px double #3e475b;
    padding: 5px 14px;
    color: #fff9dc;
    background: linear-gradient(180deg, #e74b52, #be2634);
    text-shadow: 2px 2px #6e1e29;
}
.dex-device-header > span:first-child b,
.dex-device-header > span:first-child small {
    display: block;
}
.dex-device-header > span:first-child b { font-size: 15px; }
.dex-device-header > span:first-child small { font-size: 9px; letter-spacing: .08em; }
.dex-counts { display: flex; gap: 15px; font-size: 9px; }
.dex-counts button {
    border: 3px double #52222b;
    padding: 5px 8px;
    color: #313b4c;
    background: #fffad6;
    font: inherit;
    font-size: 9px;
}
.source-pokedex > footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 27px;
    border-top: 5px double #465169;
    padding: 3px 8px;
    color: #fffce3;
    background: #667a7c;
    font-size: 8px;
    text-align: center;
}
.source-pokedex > footer button {
    border: 2px solid #425065;
    padding: 3px 7px;
    color: #273248;
    background: #fffbdc;
    font: inherit;
    font-size: 8px;
}
.dex-instruction {
    margin: 0;
    border-bottom: 3px solid #a6ad9a;
    padding: 6px 12px;
    font-size: 9px;
}
.dex-top-screen { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.dex-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 4px 7px;
    min-height: 0;
    overflow: auto;
    padding: 7px 15px;
    background: repeating-linear-gradient(135deg, #dce5d3 0 12px, #e7ecd9 12px 24px);
}
.dex-mode-grid button {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 42px;
    border: 4px double #566174;
    padding: 2px 7px;
    color: #273248;
    background: #fffde8;
    text-align: left;
    font: inherit;
    font-size: clamp(7px, 1vw, 10px);
}
.dex-mode-grid button img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}
.dex-mode-grid button.selected {
    border-color: #cf303e;
    background: #fff09a;
    transform: translateX(3px);
}
.dex-mode-grid button.selected::before,
.dex-scroll-list button.selected::before,
.bag-source-list button.selected::before,
.bag-target-overlay button.selected::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #d72e3d;
    transform: translateY(-50%);
}
.dex-mode-grid button.cancel { grid-column: 3; }
.dex-list-layout {
    display: grid;
    grid-template-columns: minmax(235px, 1.35fr) minmax(150px, .65fr);
    min-height: 0;
}
.dex-scroll-list {
    display: grid;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    border-right: 5px double #465169;
    padding: 5px 9px 5px 15px;
    background: #dce3d2;
    scrollbar-color: #c83b46 #f3efd7;
}
.dex-scroll-list button {
    position: relative;
    display: grid;
    grid-template-columns: 31px 15px minmax(76px, 1fr) minmax(78px, auto);
    align-items: center;
    gap: 5px;
    min-height: 29px;
    border: 0;
    border-bottom: 2px solid #b4bcac;
    padding: 3px 5px;
    color: #2e394e;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 9px;
}
.dex-scroll-list button.selected { background: #fff2a2; }
.dex-scroll-list button.unknown { color: #80877e; }
.dex-scroll-list button > b { color: #b82e3b; }
.dex-caught { color: #dd313f; font-size: 13px; }
.dex-list-types { display: flex; justify-content: flex-end; gap: 2px; }
.dex-type {
    display: inline-block;
    min-width: 39px;
    border: 2px solid rgba(38, 47, 63, .45);
    border-radius: 3px;
    padding: 2px 3px;
    color: #fff;
    font-size: 6px;
    font-style: normal;
    text-align: center;
    text-shadow: 1px 1px rgba(0, 0, 0, .45);
}
.type-psychic { background: #db527e; }
.type-electric { background: #e3b833; }
.type-ice { background: #62b9bd; }
.type-fighting { background: #b84b3d; }
.type-rock { background: #ae9848; }
.type-bug { background: #9ea63a; }
.type-ghost { background: #6f5f98; }
.type-dragon { background: #6350bd; }
.type-steel { background: #9ea3b4; }
.dex-list-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 8px;
    background:
        radial-gradient(ellipse at 50% 70%, #a8cf78 0 28%, transparent 29%),
        #e7ecd8;
}
.dex-list-preview > img {
    width: min(116px, 70%);
    aspect-ratio: 1;
    object-fit: contain;
    image-rendering: pixelated;
}
.dex-list-preview > small { color: #b52e3a; font-size: 8px; }
.dex-list-preview > strong { margin: 3px 0; font-size: 13px; }
.dex-list-preview > div { display: flex; gap: 3px; }
.dex-list-preview > p { margin: 9px 0 0; color: #687466; font-size: 7px; text-align: center; }
.dex-question { color: #879284; font-size: 68px; }
.dex-empty { padding: 20px 8px; color: #6e776d; font-size: 9px; text-align: center; }
.dex-data-layout {
    display: grid;
    grid-template-columns: minmax(140px, .75fr) minmax(220px, 1.25fr);
    min-height: 0;
}
.dex-mon-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 5px double #465169;
    padding: 7px;
    background:
        radial-gradient(ellipse at 50% 72%, #a8cf78 0 31%, transparent 32%),
        #e5ead7;
}
.dex-mon-display > img {
    width: min(145px, 82%);
    max-height: 68%;
    object-fit: contain;
    image-rendering: pixelated;
}
.dex-mon-display > strong { margin: 2px 0 4px; font-size: 14px; }
.dex-data-layout > main {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    padding: 11px;
    background: repeating-linear-gradient(0deg, #f3f0d9 0 19px, #e5e2cd 20px);
}
.dex-classification {
    display: grid;
    grid-template-columns: 1fr .7fr .9fr 38px;
    align-items: end;
    gap: 8px;
    border-bottom: 4px double #67736c;
    padding-bottom: 8px;
}
.dex-classification span small,
.dex-classification span strong { display: block; }
.dex-classification span small { color: #ba2f3b; font-size: 7px; }
.dex-classification span strong { margin-top: 3px; font-size: 10px; }
.dex-classification img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}
.dex-description {
    align-self: center;
    margin: 8px 4px;
    font-size: clamp(9px, 1.35vw, 13px);
    line-height: 1.7;
    white-space: pre-line;
}
.dex-area-layout {
    display: grid;
    grid-template-columns: minmax(270px, 1.35fr) minmax(135px, .65fr);
    min-height: 0;
}
.dex-area-map {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    border-right: 5px double #465169;
    padding: 8px;
    background: #dce5d7;
}
.dex-area-map > img:first-child {
    display: block;
    width: min(100%, 450px);
    image-rendering: pixelated;
}
.dex-area-marker {
    position: absolute;
    z-index: 2;
    image-rendering: pixelated;
    transform: translate(-50%, -50%) scale(2.6);
    animation: dex-marker-blink 1s steps(2) infinite;
}
@keyframes dex-marker-blink { 50% { opacity: .35; } }
.dex-area-unknown {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 4px double #4d596d;
    padding: 8px 11px;
    color: #fffce6;
    background: #bf303c;
    font-size: 10px;
    transform: translate(-50%, -50%);
}
.dex-area-mon {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 8px;
    background: #f1eed8;
}
.dex-area-mon > img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}
.dex-area-mon > strong { margin: 3px 0; font-size: 12px; }
.dex-area-mon > p { color: #5c695f; font-size: 7px; line-height: 1.55; text-align: center; }
.source-bag-menu {
    position: absolute;
    inset: 8px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    border: 7px double #3e4a61;
    color: #29354a;
    background: #f1edd7;
    font-family: ui-monospace, "Courier New", monospace;
    font-weight: 900;
}
.bag-pocket-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 6px double #4b576e;
    background: #d4494f;
}
.bag-pocket-tabs button {
    border: 0;
    border-right: 3px solid #8e2a35;
    padding: 8px 4px;
    color: #ffeec2;
    background: transparent;
    font: inherit;
    font-size: 9px;
    text-shadow: 1px 1px #6c2731;
}
.bag-pocket-tabs button.selected {
    color: #303b4d;
    background: #fff19a;
    text-shadow: none;
}
.bag-body {
    display: grid;
    grid-template-columns: minmax(145px, .7fr) minmax(235px, 1.3fr);
    min-height: 0;
    overflow: hidden;
}
.bag-source-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 5px double #4b576e;
    padding: 7px;
    background:
        linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, 0)),
        #e6b448;
}
.bag-pixel-art {
    display: block;
    width: min(140px, 72%);
    aspect-ratio: 1;
    background-image: url("/game/menu/bag.png");
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    image-rendering: pixelated;
}
.bag-pixel-art.pocket-1 { background-position: center 33.333%; }
.bag-pixel-art.pocket-2 { background-position: center 66.666%; }
.bag-source-art > strong {
    margin-top: 3px;
    color: #fffbe0;
    font-size: 12px;
    text-shadow: 2px 2px #795729;
}
.bag-selected-icon {
    position: absolute;
    right: 8%;
    bottom: 13%;
    width: 42px;
    height: 42px;
    object-fit: contain;
    image-rendering: pixelated;
}
.bag-source-art > small {
    position: absolute;
    right: 5%;
    bottom: 6%;
    color: #563b28;
    font-size: 7px;
}
.bag-source-list {
    display: grid;
    align-content: start;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #69778a #c5cfbc;
    scrollbar-width: auto;
    padding: 8px 13px 8px 18px;
    background: repeating-linear-gradient(135deg, #dee7d3 0 12px, #e8edd9 12px 24px);
}
.bag-source-list::-webkit-scrollbar { width: 13px; }
.bag-source-list::-webkit-scrollbar-track { background: #c5cfbc; border-left: 2px solid #647084; }
.bag-source-list::-webkit-scrollbar-thumb { background: #69778a; border: 2px solid #e8edd9; }
.bag-source-list button {
    position: relative;
    display: grid;
    grid-template-columns: 35px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-bottom: 3px solid #b9c0af;
    padding: 4px 7px;
    color: #29354a;
    background: transparent;
    text-align: left;
    font: inherit;
}
.bag-source-list button.selected { background: #fff1a0; }
.bag-source-list button img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}
.bag-source-list button strong { font-size: 12px; }
.bag-source-list button b { color: #bd303c; font-size: 10px; }
.bag-source-list .close-bag { grid-template-columns: 35px 1fr; }
.bag-source-list .close-bag > span { color: #c42f3c; font-size: 22px; text-align: center; }
.bag-description {
    min-height: 51px;
    border-top: 6px double #4b576e;
    padding: 7px 13px;
    color: #39445a;
    background: #fffde9;
    font-size: 9px;
    line-height: 1.35;
    white-space: pre-line;
}
.bag-actions {
    top: var(--bag-action-top, 42%);
    bottom: auto;
    z-index: 4;
}
.bag-target-overlay,
.bag-dialog-overlay {
    position: absolute;
    inset: 42px 0 0;
    z-index: 3;
    background: rgba(36, 43, 56, .76);
}
.bag-target-overlay {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 14px 17%;
}
.bag-target-overlay h3 {
    margin: 0 0 5px;
    border: 5px double #49566c;
    padding: 7px;
    color: #273248;
    background: #fffce6;
    font-size: 10px;
}
.bag-target-overlay > button {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 7px;
    border: 4px double #4b586f;
    padding: 5px 9px;
    color: #29344a;
    background: #fffde8;
    text-align: left;
    font: inherit;
}
.bag-target-overlay > button.selected { background: #fff19e; }
.bag-target-overlay > button img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
}
.bag-target-overlay > button span strong,
.bag-target-overlay > button span small { display: block; }
.bag-target-overlay > button span strong { font-size: 10px; }
.bag-target-overlay > button span small { margin-top: 2px; color: #657169; font-size: 7px; }
.bag-target-overlay > button > b { font-size: 7px; }
.bag-target-overlay .machine-eligibility {
    min-width: 54px;
    text-align: right;
}
.bag-target-overlay .machine-eligibility.able { color: #27864c; }
.bag-target-overlay .machine-eligibility.not-able { color: #b23b48; }
.bag-target-overlay .machine-eligibility.learned { color: #446cc0; }
.bag-dialog-overlay {
    display: grid;
    place-items: center;
}
.bag-dialog-overlay .source-menu-message { width: min(520px, 78%); }
.bag-dialog-overlay .source-action-window { right: 12%; bottom: 15%; }
.adventure-menu-layout {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(205px, .8fr);
    gap: 12px;
}
.party-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    border: 5px double #465773;
    padding: 8px 10px;
    background: #fffdeb;
}
.party-menu-heading small, .party-menu-heading strong { display: block; }
.party-menu-heading small { color: #c1313d; font-size: 8px; font-weight: 1000; }
.party-menu-heading strong { margin-top: 3px; font-size: 14px; }
.party-menu-heading > b { color: #718096; font-size: 10px; }
.adventure-party-roster { display: grid; gap: 8px; }
.adventure-member-card {
    display: grid;
    grid-template-columns: 42px minmax(90px, 1fr) minmax(120px, 1.25fr);
    align-items: center;
    gap: 8px;
    min-height: 82px;
    border: 5px double #465773;
    padding: 7px 9px;
    background: #fffdeb;
}
.menu-party-avatar {
    width: 32px;
    height: 64px;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto 64px;
    image-rendering: pixelated;
}
.adventure-member-card > span:nth-child(2) small,
.adventure-member-card > span:nth-child(2) strong,
.adventure-member-card > span:nth-child(2) em { display: block; }
.adventure-member-card > span:nth-child(2) small { color: #c1313d; font-size: 7px; font-weight: 1000; }
.adventure-member-card > span:nth-child(2) strong { margin-top: 3px; font-size: 13px; }
.adventure-member-card > span:nth-child(2) em { margin-top: 3px; color: #758095; font-size: 8px; font-style: normal; }
.party-lead-mon {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 5px;
}
.party-lead-mon .menu-mon-icon { display: block; width: 44px; height: 44px; background-size: 44px auto; }
.party-lead-mon b { font-size: 9px; }
.adventure-member-card.empty-slot {
    grid-template-columns: 54px 1fr;
    min-height: 66px;
    border-style: dashed;
    color: #778399;
}
.adventure-member-card.empty-slot > span { font-size: 34px; text-align: center; }
.adventure-member-card.empty-slot > strong { font-size: 10px; }
.party-rule-box {
    margin-top: 8px;
    border: 4px double #52627c;
    padding: 9px 11px;
    color: #526078;
    background: rgba(255, 253, 235, .88);
}
.party-rule-box strong { color: #b52d39; font-size: 8px; }
.party-rule-box p { margin: 4px 0 0; font-size: 8px; line-height: 1.45; }
.party-menu-side {
    min-width: 0;
    border: 5px double #465773;
    padding: 10px;
    background: #fffdeb;
}
.party-menu-side h3 { margin: 3px 0 7px; color: #b72e3a; font-size: 10px; }
.party-menu-side h3:not(:first-child) { margin-top: 14px; padding-top: 9px; border-top: 2px solid #d1cfb8; }
.party-menu-list { display: grid; gap: 6px; }
.party-menu-row {
    display: grid;
    gap: 6px;
    border-bottom: 2px solid #d6d4bd;
    padding: 5px 0 8px;
}
.party-menu-row > span:first-child strong,
.party-menu-row > span:first-child small { display: block; }
.party-menu-row > span:first-child strong { font-size: 10px; }
.party-menu-row > span:first-child small { margin-top: 2px; color: #737f92; font-size: 8px; }
.party-menu-row > span:last-child { display: flex; gap: 4px; }
.menu-action-button {
    border: 2px solid #485976;
    border-radius: 2px;
    padding: 5px 7px;
    color: #fff;
    background: #df414a;
    font-size: 8px;
    font-weight: 1000;
}
.menu-action-button.secondary { color: #34435d; background: #e2e7db; }
.menu-action-button.danger { color: #fff; background: #7b5360; }
.menu-action-button:disabled { cursor: not-allowed; opacity: .45; }
.menu-party-empty { margin: 8px 0; color: #79869a; font-size: 9px; line-height: 1.45; }
.menu-pending { color: #ba8a22; font-size: 8px; }
.option-list { display: grid; gap: 9px; }
.option-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    border: 5px double #465773;
    padding: 11px 13px;
    background: #fffdeb;
}
.option-row strong, .option-row small { display: block; }
.option-row small { margin-top: 4px; color: #707c90; font-size: 9px; }
.option-row button {
    min-width: 100px;
    border: 3px solid #465773;
    padding: 8px 10px;
    color: #fff;
    background: #e0434b;
    font-weight: 1000;
}
.option-volume { cursor: default; }
.option-slider {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 38px;
    align-items: center;
    gap: 8px;
}
.option-slider input {
    width: 100%;
    accent-color: #e0434b;
}
.option-slider output {
    color: #263550;
    font-size: 9px;
    font-weight: 1000;
    text-align: right;
}
@media (max-width: 980px) {
    .auth-panel { padding-left: min(50vw, 430px); }
    .landing-preview { gap: 24px; }
    .game-shell { grid-template-columns: 1fr; }
    .sidebar { grid-template-columns: repeat(2, 1fr); }
    .topbar-brand > span:last-child, .save-state { display: none; }
}
@media (max-width: 650px) {
    .auth-view { padding: 78px 12px 34px; }
    .landing-nav { height: 58px; padding: 0 14px; }
    .landing-nav nav { gap: 10px; }
    .landing-nav nav a { display: none; }
    .landing-brand { font-size: 11px; }
    .auth-panel { min-height: 0; margin-top: 18px; padding: 30px 22px; background: rgba(255, 252, 225, .97); }
    .auth-panel::before, .auth-panel::after { display: none; }
    .auth-panel h1 { font-size: 27px; }
    .landing-features { grid-template-columns: 1fr; margin-top: 28px; }
    .landing-features article { padding: 16px; }
    .landing-preview { grid-template-columns: 1fr; padding-top: 34px; }
    .hero-map-frame { order: -1; }
    .topbar { padding: 0 10px; }
    .topbar-brand strong { font-size: 12px; }
    .topbar-actions button:not(#sound-button) { display: none; }
    .game-shell { width: calc(100% - 16px); margin: 12px auto; }
    .sidebar { grid-template-columns: 1fr; }
    .touch-controls { display: grid; position: absolute; inset: auto 10px 10px auto; grid-template-columns: repeat(3, 42px); gap: 4px; }
    .touch-controls button { width: 42px; height: 42px; opacity: .72; border: 2px solid white; border-radius: 50%; background: #17243a; color: white; }
    .touch-controls [data-touch="up"] { grid-column: 2; }
    .touch-controls [data-touch="left"] { grid-column: 1; grid-row: 2; }
    .touch-controls [data-touch="down"] { grid-column: 2; grid-row: 2; }
    .touch-controls [data-touch="right"] { grid-column: 3; grid-row: 2; }
    .touch-controls [data-action] { grid-column: 3; grid-row: 1; background: #b92d35; }
    .controls-help { display: none; }
    .battle-sky { padding: 14px; }
    .battle-enemies { top: 42px; left: 3%; right: auto; gap: 5px; }
    .battle-trainers { right: 3%; left: auto; bottom: 8px; gap: 5px; }
    .battler { min-width: 105px; padding: 6px; }
    .battle-hud { width: 176px; min-height: 66px; padding: 6px 8px; }
    .battle-hud-heading { font-size: 13px; }
    .battle-hp-row { margin: 5px 0 0 35px; grid-template-columns: 30px 1fr; font-size: 10px; }
    .battle-hp-numbers { font-size: 11px; }
    .battle-exp-row { width: 135px; right: 5px; bottom: -12px; }
    .battle-pokemon { width: 94px; height: 94px; }
    .enemy-pokemon { top: 62px; right: 23%; }
    .enemy-pokemon[data-slot="1"] { top: 82px; right: 39%; width: 82px; height: 82px; }
    .player-pokemon { bottom: calc(3px - var(--player-ground-offset)); left: 0; width: 108px; height: 108px; }
    .player-pokemon[data-slot="1"] { left: 13%; width: 92px; height: 92px; }
    .battle-command { grid-template-columns: 1fr 190px; min-height: 72px; }
    .battle-log { padding: 10px; font-size: 11px; }
    .trade-grid { grid-template-columns: 1fr; }
    .trade-grid > b { display: none; }
    .start-menu-list { width: 35%; }
    .start-menu-help { right: 40%; }
    .menu-page-header > span { display: none; }
    .menu-page-content { padding: 8px; }
    .menu-party-grid, .pokedex-list { grid-template-columns: 1fr; }
    .menu-mon-card { min-height: 92px; }
    .source-party-slots { gap: 4px; }
    .source-party-slot { grid-template-columns: 36px minmax(0, 1fr); border-width: 3px; padding: 3px 5px 3px 2px; }
    .source-party-slot.lead { grid-template-columns: 47px minmax(0, 1fr); }
    .source-party-slot .party-slot-icon { width: 34px; height: 34px; background-size: 34px auto; }
    .source-party-slot.lead .party-slot-icon { width: 45px; height: 45px; background-size: 45px auto; }
    .party-held-mark { left: 27px; top: 2px; }
    .source-party-slot.lead .party-held-mark { left: 39px; }
    .party-slot-data > strong { font-size: 9px; }
    .party-slot-data > small, .party-hp-values { font-size: 7px; }
    .source-menu-message { min-height: 48px; border-width: 5px; padding: 6px 9px; }
    .source-action-window { bottom: 62px; min-width: 118px; border-width: 5px; }
    .source-action-window button { padding: 5px 8px 5px 18px; font-size: 10px; }
    .pokemon-summary { grid-template-columns: 92px 1fr; border-width: 4px; }
    .summary-mon-pane { border-right-width: 3px; }
    .summary-mon-pane img { width: 72px; }
    .summary-info-page, .summary-skills-page, .summary-moves-page { grid-template-columns: 1fr; }
    .summary-identity { grid-template-columns: 1fr 1fr; }
    .summary-memo p, .summary-move-info p { font-size: 8px; }
    .pokemon-summary footer span { display: none; }
    .summary-move-info { display: none; }
    .summary-moves-page { display: block; }
    .source-item-action { grid-template-columns: 1fr 120px; }
    .menu-bag-layout, .kanto-map-layout { grid-template-columns: 1fr; }
    .menu-bag-art, .map-info-card { display: none; }
    .trainer-menu-card { grid-template-columns: 30% 1fr; }
    .trainer-menu-data { padding: 10px; }
    .trainer-menu-data h3 { font-size: 17px; }
    .trainer-menu-portrait img { width: 90%; }
    .adventure-menu-layout { grid-template-columns: 1fr; }
    .party-menu-side { display: none; }
    .adventure-member-card { grid-template-columns: 36px 1fr minmax(95px, 1fr); }
    .menu-party-avatar { width: 28px; height: 56px; background-size: auto 56px; }
    .touch-controls [data-action="menu"] { grid-column: 1; grid-row: 1; width: 50px; border-radius: 12px; font-size: 8px; background: #415372; }
}

/* Pokémon Together public landing page. */
.auth-view {
    display: block;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 15%, rgba(48, 92, 145, .24), transparent 30%),
        radial-gradient(circle at 88% 35%, rgba(65, 157, 116, .14), transparent 28%),
        #0b1423;
}
.auth-scene {
    inset: 0;
    opacity: .16;
    clip-path: none;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    width: min(1380px, calc(100% - 48px));
    height: 78px;
    margin: 0 auto;
    padding: 0 18px;
    border-bottom: 1px solid rgba(154, 181, 215, .18);
    background: rgba(11, 20, 35, .82);
    box-shadow: 0 12px 35px rgba(3, 9, 18, .16);
    backdrop-filter: blur(18px);
}
.landing-brand { font-size: 14px; }
.landing-brand .pokeball { width: 30px; height: 30px; }
.landing-nav nav { gap: 28px; }
.landing-nav nav a { color: #aebfd5; font-size: 13px; transition: color .18s ease; }
.landing-nav nav a:hover { color: #fff9df; }
.landing-nav nav button {
    border: 1px solid #526d93;
    border-radius: 7px;
    padding: 10px 17px;
    background: #1c304b;
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.landing-site { position: relative; z-index: 1; width: min(1320px, calc(100% - 48px)); margin: 0 auto; }
.landing-hero {
    min-height: 700px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .82fr);
    align-items: center;
    gap: clamp(54px, 7vw, 110px);
    padding: 68px 0 92px;
}
.hero-copy { max-width: 680px; }
.landing-title-lockup {
    display: inline-flex;
    gap: 10px;
    color: #fff9df;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .06em;
}
.landing-title-lockup .pokeball { width: 30px; height: 30px; }
.landing-title-lockup em { color: #ef4d55; }
.hero-copy .multiplayer-mark { margin: 32px 0 13px; color: #f2ce4d; }
.hero-copy h1 {
    max-width: 680px;
    margin: 0;
    color: #fffce9;
    font-size: clamp(52px, 5.2vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
}
.hero-copy h1 span { color: #72d49a; }
.hero-lead { max-width: 620px; margin: 27px 0 0; color: #adbed3; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 35px; }
.landing-primary, .landing-secondary {
    border: 0;
    border-radius: 10px;
    padding: 16px 24px;
    color: #fff;
    background: linear-gradient(#ef555c, #d83f48);
    box-shadow: 0 8px 24px rgba(226, 63, 73, .25), inset 0 1px rgba(255,255,255,.22);
    font-size: 14px;
    font-weight: 1000;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.landing-primary:hover, .landing-secondary:hover { transform: translateY(-2px); filter: brightness(1.04); }
.landing-primary:focus-visible, .landing-secondary:focus-visible, .landing-nav button:focus-visible { outline: 3px solid rgba(242, 206, 77, .75); outline-offset: 3px; }
.hero-actions > a { color: #d6e2f0; text-decoration: none; font-size: 14px; font-weight: 900; }
.hero-actions > a span { margin-left: 6px; color: #f2ce4d; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 42px; color: #8299b6; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.hero-proof span { display: flex; align-items: center; gap: 7px; }
.hero-proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #56d58d; box-shadow: 0 0 8px rgba(86,213,141,.7); }
.hero-proof b { color: #dbe7f5; }
.auth-card {
    overflow: hidden;
    border: 1px solid #49617e;
    border-radius: 18px;
    color: #172237;
    background: #fffbe7;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 0 0 6px rgba(255,255,255,.035);
}
.auth-map-preview { position: relative; height: 230px; overflow: hidden; border-bottom: 4px solid #2b3d56; background: #74cba1; }
.landing-map-stack { position: absolute; inset: 0; }
.landing-map-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 39%; image-rendering: pixelated; }
.landing-map-ground { z-index: 1; }
.landing-map-overlay { z-index: 3; pointer-events: none; }
.world-live { position: absolute; top: 13px; left: 13px; padding: 6px 8px; color: #fffbe8; background: rgba(14, 27, 44, .9); font: 900 9px ui-monospace, monospace; letter-spacing: .08em; }
.world-live i, .world-showcase-hud i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #56dc91; box-shadow: 0 0 8px #56dc91; }
.world-live, .world-showcase-hud { z-index: 5; }
.landing-trainer { position: absolute; z-index: 2; display: block; width: 32px; height: 64px; background-position: 0 0; background-size: auto 64px; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(3px 4px rgba(28, 54, 48, .28)); }
.auth-trainer-red { left: 40%; bottom: 16%; background-image: url("/game/sprites/red.png"); }
.auth-trainer-leaf { left: 47%; bottom: 16%; background-image: url("/game/sprites/leaf.png"); }
.auth-card-body { padding: 27px 30px 30px; }
.auth-card-heading { display: flex; align-items: center; gap: 12px; }
.auth-card-heading .pokeball { width: 34px; height: 34px; border-color: #31425e; }
.auth-card-heading small, .auth-card-heading strong { display: block; }
.auth-card-heading small { color: #e2444d; font-size: 9px; font-weight: 1000; letter-spacing: .12em; }
.auth-card-heading strong { margin-top: 3px; color: #19263b; font-size: 18px; }
.auth-card .auth-tabs { margin: 22px 0 17px; }
.auth-card label { display: block; margin: 12px 0; color: #263750; font-size: 11px; font-weight: 1000; }
.auth-card input { width: 100%; margin-top: 6px; border: 2px solid #91a0b4; border-radius: 6px; padding: 12px; color: #101827; background: #fff; outline: 0; }
.auth-card input:focus { border-color: #e64b53; box-shadow: 0 0 0 3px rgba(230,75,83,.12); }
.auth-card .menu-button { border-radius: 7px; }
.auth-card-body > small { display: block; margin-top: 13px; color: #7e8da1; text-align: center; font-size: 10px; }
.landing-features {
    width: 100%;
    display: block;
    margin: 0;
    padding: 15px 0 120px;
}
.landing-section-heading { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 28px 70px; align-items: end; margin-bottom: 40px; }
.landing-section-heading .multiplayer-mark { grid-column: 1 / -1; margin: 0; }
.landing-section-heading h2 { max-width: 650px; margin: 0; color: #fffbe7; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.04em; }
.landing-section-heading > p:last-child { max-width: 510px; margin: 0 0 5px; color: #98acc5; font-size: 15px; line-height: 1.7; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.landing-features article { position: relative; min-height: 225px; overflow: hidden; border-color: rgba(108, 138, 176, .34); border-radius: 14px; padding: 29px; background: linear-gradient(145deg, rgba(29,47,73,.96), rgba(17,30,49,.96)); box-shadow: 0 18px 36px rgba(3,10,20,.14); }
.landing-features article::after { content: ""; position: absolute; right: -35px; bottom: -55px; width: 130px; height: 130px; border: 1px solid rgba(114,212,154,.14); border-radius: 50%; box-shadow: 0 0 0 22px rgba(114,212,154,.025), 0 0 0 44px rgba(114,212,154,.02); }
.feature-number { color: #f1cf50; font: 900 11px ui-monospace, monospace; letter-spacing: .12em; }
.landing-features h3 { position: relative; z-index: 1; margin: 38px 0 10px; color: #fff9df; font-size: 20px; }
.landing-features p { color: #91a7c1; font-size: 13px; }
.world-showcase { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); align-items: center; gap: clamp(45px, 7vw, 90px); padding: 0 0 120px; }
.world-showcase-frame { position: relative; overflow: hidden; aspect-ratio: 6 / 5; border: 6px solid #314764; border-radius: 12px; background: #75cda2; box-shadow: 0 25px 55px rgba(0,0,0,.32); }
.world-showcase-frame .landing-map-stack img { object-fit: contain; object-position: center; }
.world-showcase-hud { position: absolute; inset: 16px 16px auto; display: flex; justify-content: space-between; color: #fff; font: 900 10px ui-monospace, monospace; text-shadow: 1px 1px #152136; }
.world-trainer-red { left: 42%; top: 45%; background-image: url("/game/sprites/red.png"); }
.world-trainer-leaf { left: 49%; top: 45%; background-image: url("/game/sprites/leaf.png"); }
.world-showcase-copy h2 { margin: 12px 0 20px; color: #fffbe7; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -.04em; }
.world-showcase-copy > p:not(.multiplayer-mark) { color: #9eb1c8; font-size: 15px; line-height: 1.7; }
.world-points { display: grid; gap: 11px; margin: 24px 0 0; padding: 0; list-style: none; color: #c8d6e6; font-size: 13px; font-weight: 800; }
.world-points li { position: relative; padding-left: 24px; }
.world-points li::before { content: ""; position: absolute; top: 5px; left: 1px; width: 8px; height: 8px; border: 2px solid #72d49a; border-radius: 50%; box-shadow: 0 0 10px rgba(114,212,154,.3); }
.landing-secondary { margin-top: 26px; color: #18253a; background: #f2ce4d; box-shadow: 0 8px 24px rgba(242,206,77,.14); }
.landing-journey { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .7fr) auto; gap: 36px 60px; align-items: center; margin-bottom: 110px; border: 1px solid rgba(111,145,184,.4); border-radius: 18px; padding: 48px 52px; background: linear-gradient(120deg, rgba(31,52,80,.96), rgba(16,30,49,.96)); box-shadow: 0 24px 60px rgba(2,9,18,.25); }
.landing-journey .multiplayer-mark { margin: 0 0 12px; }
.landing-journey h2 { margin: 0; color: #fffbe7; font-size: clamp(28px, 3.2vw, 43px); line-height: 1.08; letter-spacing: -.035em; }
.landing-journey > p { margin: 0; color: #9fb2c9; font-size: 14px; line-height: 1.75; }
.landing-journey .landing-primary { white-space: nowrap; }
.landing-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 95px; border-top: 1px solid #263852; color: #d8e3f1; background: #0a111e; font-size: 12px; }
.landing-footer .pokeball { width: 24px; height: 24px; }
.landing-footer small { margin-left: 10px; color: #6f85a1; }

@media (max-width: 980px) {
    .landing-hero { grid-template-columns: 1fr; gap: 46px; padding-top: 55px; }
    .hero-copy { max-width: 760px; }
    .auth-card { width: min(620px, 100%); }
    .landing-section-heading { grid-template-columns: 1fr; gap: 18px; }
    .landing-feature-grid { grid-template-columns: 1fr; }
    .landing-features article { min-height: 0; }
    .landing-features h3 { margin-top: 20px; }
    .world-showcase { grid-template-columns: 1fr; }
    .landing-journey { grid-template-columns: 1fr; }
    .landing-journey .landing-primary { justify-self: start; }
}
@media (max-width: 650px) {
    .landing-nav, .landing-site { width: min(100% - 28px, 1320px); }
    .landing-nav { height: 64px; }
    .landing-nav nav a { display: none; }
    .landing-hero { min-height: 0; padding: 50px 0 70px; }
    .hero-copy h1 { font-size: 48px; }
    .hero-lead { font-size: 16px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .hero-proof { display: grid; gap: 10px; }
    .auth-map-preview { height: 170px; }
    .auth-card-body { padding: 23px 20px 25px; }
    .landing-features { padding-bottom: 75px; }
    .world-showcase { padding-bottom: 80px; }
    .landing-journey { gap: 22px; margin-bottom: 70px; padding: 32px 25px; }
    .landing-footer { flex-wrap: wrap; padding: 24px; }
    .landing-footer small { width: 100%; margin: 0; text-align: center; }
}