/* ===================================================================
   Pokémon Game — FireRed Visual Theme
   Colors sourced directly from source/pokefirered/graphics/:
     Window body:       #d5d5bd  (menu_info.png pixel 4,4)
     Window border:     #62737b  (std.png palette[2] decoded)
     Inner highlight:   #ffffff  (std.png palette[1])
     Red accent:        #e60808  (std.png palette[4])
     Dark text:         #181818
   =================================================================== */

/* === CSS Variables (FireRed palette) === */
:root {
    color-scheme: light only;
    /* The System OS — cold holographic glass + cyan (was FireRed). The whole
       in-game chrome is the surveillance interface; there is no tan/red look. */
    --fr-body:      #0a1224;   /* window body / glass background */
    --fr-body-lt:   #06101f;   /* deeper inset for content areas */
    --fr-border:    #00ccff;   /* cyan panel edge */
    --fr-hi:        rgba(0,200,255,0.45);   /* inner highlight (cyan) */
    --fr-red:       #00ccff;   /* accent → cyan */
    --fr-red-dark:  #0090c0;   /* darker cyan for hover/active */
    --fr-text:      #bfeeff;   /* primary ink (cyan-white) */
    --fr-text-dim:  #5f86a0;   /* secondary ink */
    --fr-tan:       #1a2230;   /* divider hairline */
    --fr-window:    0 0 12px rgba(0,200,255,0.25);  /* cyan glow */
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #181010; color: var(--fr-text);
    font-family: 'Press Start 2P', monospace; font-size: 10px;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.hidden { display: none !important; }

/* === FireRed Window Mixin (apply to any panel) === */
.fr-win {
    background: var(--fr-body);
    border: 3px solid var(--fr-border);
    box-shadow: var(--fr-window);
    border-radius: 10px;
}
.fr-win-lt {
    background: var(--fr-body-lt);
    border: 3px solid var(--fr-border);
    box-shadow: var(--fr-window);
    border-radius: 10px;
}

/* === GAME WRAPPER === */
#game-wrapper {
    position: fixed; inset: 0; display: flex;
    flex-direction: column; align-items: center;
    justify-content: flex-start; background: #181010;
}

/* === SCREEN CONTAINERS === */
#screen-primary, #screen-secondary {
    position: relative; background: transparent;
    border: 2px solid #333; border-radius: 6px; overflow: hidden;
}
#screen-primary {
    width: 100vw; height: auto; aspect-ratio: 240 / 208;
    flex-shrink: 0; max-height: 60vh;
}
#screen-primary canvas, #screen-secondary canvas {
    display: block; width: 100%; height: 100%; image-rendering: pixelated;
    background: #000;
}

/* === HUD === */
#ui-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

#hud-info {
    position: absolute; top: 10px; right: 6px;
    background: var(--fr-body);
    border: 2px solid var(--fr-border);
    box-shadow: var(--fr-window), 2px 2px 0 rgba(0,0,0,0.4);
    border-radius: 8px; padding: 5px 8px;
    pointer-events: none; text-align: right;
    color: var(--fr-text); font-size: 7px; line-height: 2; white-space: nowrap;
}
#hud-fps { display: none; }

#map-name-banner {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--fr-body); color: var(--fr-text);
    font-size: 8px; padding: 5px 14px; border-radius: 8px;
    border: 2px solid var(--fr-border);
    box-shadow: var(--fr-window), 2px 2px 0 rgba(0,0,0,0.3);
    pointer-events: none; transition: opacity 0.4s; white-space: nowrap;
}

#settings-btn {
    position: absolute; bottom: 6px; left: 8px; font-size: 10px;
    background: var(--fr-red); color: #fff;
    border: 2px solid var(--fr-border); border-radius: 50%;
    padding: 4px 8px; cursor: pointer; pointer-events: all;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
#settings-btn:hover { background: var(--fr-red-dark); }

#hud-toggle-btn, #screenshot-btn {
    position: absolute; font-size: 10px;
    background: rgba(0,0,0,0.55); color: #fff;
    border: 1px solid rgba(255,255,255,0.3); border-radius: 4px;
    padding: 3px 6px; cursor: pointer; pointer-events: all;
}
#hud-toggle-btn { bottom: 6px; left: 44px; }
#screenshot-btn  { bottom: 6px; left: 80px; }

/* === SETTINGS PANEL === */
#settings-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--fr-body);
    border: 3px solid var(--fr-border);
    box-shadow: var(--fr-window), 4px 4px 0 rgba(0,0,0,0.4);
    border-radius: 12px; padding: 0; z-index: 100;
    min-width: 230px; pointer-events: all; overflow: hidden;
}
.settings-header {
    background: var(--fr-red); color: #fff;
    padding: 6px 10px; border-bottom: 3px solid var(--fr-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 9px;
}
.settings-body { padding: 12px; color: var(--fr-text); font-size: 9px; }

#settings-panel h3 { font-size: 9px; color: var(--fr-text); margin-bottom: 10px; }
#settings-panel label { display: block; margin-bottom: 6px; font-size: 8px; }
#settings-panel input[type=range] { width: 100%; margin-top: 4px; }
#settings-panel input[type=password], #settings-panel input[type=text] {
    flex: 1; background: var(--fr-body-lt); color: var(--fr-text);
    border: 2px solid var(--fr-border); border-radius: 4px;
    padding: 3px 6px; font-size: 8px; font-family: inherit;
}
#settings-close {
    background: none; border: none; color: #fff;
    font-size: 14px; cursor: pointer; line-height: 1;
}
#settings-close:hover { opacity: 0.7; }

.settings-row, .setting-row {
    display: flex; gap: 6px; margin-bottom: 8px;
    align-items: center; flex-wrap: wrap;
}
.settings-row button, .setting-row button, .toggle-btn {
    flex: 1; padding: 4px; background: var(--fr-body-lt);
    border: 2px solid var(--fr-border); color: var(--fr-text);
    border-radius: 6px; cursor: pointer; font-family: inherit;
    font-size: 8px; white-space: nowrap;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.settings-row button.active, .settings-row button:hover,
.setting-row button.active, .setting-row button:hover,
.toggle-btn.active, .toggle-btn:hover {
    background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark);
}
.toggle-group { display: flex; gap: 3px; flex-wrap: wrap; flex: 1; }
.action-btn {
    padding: 4px 8px; background: var(--fr-body-lt);
    border: 2px solid var(--fr-border); color: var(--fr-text);
    border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 8px;
}
.action-btn:hover { background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark); }
#reset-layout-btn {
    width: 100%; margin-top: 4px; padding: 5px;
    background: var(--fr-body-lt); border: 2px solid var(--fr-border);
    color: var(--fr-text); border-radius: 6px; cursor: pointer;
    font-family: inherit; font-size: 8px;
}
#reset-layout-btn:hover { background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark); }

/* === GAMEPAD === */
.gp-btn {
    touch-action: none; -webkit-tap-highlight-color: transparent;
    user-select: none; -webkit-user-select: none; cursor: pointer;
    pointer-events: auto; font-family: 'Press Start 2P', monospace; font-weight: bold;
    color: rgba(220,230,255,0.95); border: 2px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
.gp-btn:active { filter: brightness(1.5); transform: scale(0.93); }
#gp-dpad { position: fixed; left: 2%; bottom: 14%; width: 138px; height: 138px; pointer-events: none; z-index: 200; }
#gp-up, #gp-down { position: absolute; left: 50%; transform: translateX(-50%); width: 46px; height: 50px; background: #252538; box-shadow: 0 3px 8px rgba(0,0,0,0.6); font-size: 10px; pointer-events: all; }
#gp-up   { top: 0;    border-radius: 10px 10px 4px 4px; }
#gp-down { bottom: 0; border-radius: 4px 4px 10px 10px; }
#gp-middle { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
#gp-left, #gp-right { width: 50px; height: 46px; background: #252538; box-shadow: 0 3px 8px rgba(0,0,0,0.6); font-size: 10px; pointer-events: all; }
#gp-left  { border-radius: 10px 4px 4px 10px; }
#gp-right { border-radius: 4px 10px 10px 4px; }
#gp-center-dot { width: 30px; height: 30px; border-radius: 50%; background: #1a1a2c; border: 2px solid rgba(255,255,255,0.12); flex-shrink: 0; pointer-events: none; }
#gp-a { position: fixed; right: 4%; bottom: 24%; width: 60px; height: 60px; border-radius: 50%; background: #cc1800; box-shadow: 0 4px 10px rgba(0,0,0,0.65); font-size: 10px; z-index: 200; }
#gp-b { position: fixed; right: 18%; bottom: 14%; width: 52px; height: 52px; border-radius: 50%; background: #1a3a8b; box-shadow: 0 4px 10px rgba(0,0,0,0.65); font-size: 10px; z-index: 200; }
#gp-l, #gp-r { position: fixed; bottom: 40%; width: 76px; height: 34px; background: #2a2a3e; box-shadow: 0 2px 6px rgba(0,0,0,0.5); font-size: 10px; z-index: 200; }
#gp-l { left: 0; border-radius: 0 8px 8px 0; }
#gp-r { right: 0; border-radius: 8px 0 0 8px; }
#gp-start, #gp-select { position: fixed; bottom: 4%; height: 28px; background: #2a2a3e; box-shadow: 0 1px 5px rgba(0,0,0,0.5); font-size: 10px; letter-spacing: 0.5px; border-radius: 14px; z-index: 200; }
#gp-start  { right: 16%; width: 62px; }
#gp-select { right: 32%; width: 56px; }

/* ===================================================================
   START MENU — FireRed vertical list on right side
   =================================================================== */
#start-menu {
    display: none; position: absolute; inset: 0; z-index: 50;
    pointer-events: none; flex-direction: column; overflow: hidden;
    background: transparent;
    color-scheme: light;
    forced-color-adjust: none;
}
#start-menu.open { display: flex; }

/* Top section: void + panel side by side */
.sm-top-row {
    flex: 1; display: flex; flex-direction: row; align-items: flex-start;
    pointer-events: none; background: transparent;
}

/* Left void — transparent, game world shows through */
.sm-void { flex: 1; pointer-events: all; background: transparent; }

/* Right panel — FireRed style: white bg, black border on left+top+bottom, flush right */
.sm-right-panel {
    width: 48%; min-width: 88px; max-width: 116px;
    color-scheme: light;
    forced-color-adjust: none;
    background: transparent !important;
    position: relative;
    border-left:   2px solid #101010;
    border-top:    2px solid #101010;
    border-bottom: 2px solid #101010;
    border-right:  none;
    border-radius: 0;
    display: flex; flex-direction: column;
    pointer-events: all; overflow: hidden;
}

/* Menu item rows */
.sm-list-item {
    color-scheme: light; forced-color-adjust: none;
    position: relative; z-index: 1;
    display: flex; align-items: center;
    padding: 5px 4px 5px 2px; font-size: 7.5px;
    color: #181818; cursor: pointer;
    white-space: nowrap; letter-spacing: 0;
    line-height: 1;
}
.sm-list-item.selected { background: transparent; }
.sm-list-item:hover { background: rgba(0,0,0,0.06); }
.sm-list-cursor {
    display: inline-block; width: 10px; flex-shrink: 0;
    color: #181818; font-size: 7px; margin-right: 1px;
    text-align: center;
}

/* Description bar — blue strip full width at bottom */
.sm-desc-bar {
    color-scheme: light; forced-color-adjust: none;
    width: 100%; background: #2870c0;
    border-top: 2px solid #101010;
    padding: 5px 6px;
    font-size: 7px; color: #ffffff;
    line-height: 1.5; pointer-events: none;
    min-height: 30px;
    white-space: pre-line;
}

/* Sub-menu overlay */
#start-menu-sub.sm-sub-overlay {
    position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden;
}

/* FireRed sub-menu window — full screen canvas pages */
.sm-win {
    position: absolute; pointer-events: all;
    background: var(--fr-body);
    border: 3px solid var(--fr-border);
    box-shadow: var(--fr-window), 3px 3px 0 rgba(0,0,0,0.35);
    border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column;
}
.sm-win-title {
    background: var(--fr-body-lt); border-bottom: 1px solid var(--fr-border);
    color: var(--fr-border); font-size: 9px; padding: 5px 10px;
    letter-spacing: 1.5px; flex-shrink: 0; text-shadow: 0 0 6px var(--fr-border);
}
.sm-sub-content {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: var(--fr-red) var(--fr-body);
    padding: 4px 0; background: var(--fr-body-lt);
}
.sm-back-btn {
    position: absolute; bottom: 6px; right: 6px;
    background: var(--fr-body); border: 2px solid var(--fr-border);
    color: var(--fr-text); font-family: 'Press Start 2P', monospace;
    font-size: 8px; padding: 3px 8px; cursor: pointer; border-radius: 6px;
    pointer-events: all; z-index: 10; box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.sm-back-btn:hover, .sm-back-btn.active {
    background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark);
}
.sm-row {
    display: flex; align-items: center; padding: 4px 10px;
    font-size: 8px; color: var(--fr-text); cursor: pointer;
    pointer-events: all; border-left: 3px solid transparent;
}
.sm-row.selected, .sm-row:hover {
    background: rgba(230,8,8,0.10); border-left-color: var(--fr-red); color: var(--fr-text);
}
.sm-row .sm-cursor { margin-right: 4px; color: var(--fr-red); }
.sm-sep { border-top: 1px solid var(--fr-tan); margin: 2px 8px; }
.sm-opt-btns { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 8px 4px; }
.sm-opt-btn {
    background: var(--fr-body); border: 2px solid var(--fr-border);
    color: var(--fr-text); font-family: 'Press Start 2P', monospace;
    font-size: 8px; padding: 3px 7px; cursor: pointer; border-radius: 6px;
    pointer-events: all;
}
.sm-opt-btn.active { background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark); }
.sm-opt-btn:hover  { background: rgba(230,8,8,0.1); }

/* === DRAG HANDLE === */
.drag-handle {
    display: none; cursor: ns-resize; height: 8px;
    background: var(--fr-tan); border-top: 1px solid var(--fr-border);
    border-bottom: 1px solid var(--fr-border); margin: 2px 0; border-radius: 2px;
}
body.orient-portrait .drag-handle, body:not([class*="orient-"]) .drag-handle { display: block; }

/* === ORIENTATIONS === */
body.orient-portrait #game-wrapper, body:not([class*="orient-"]) #game-wrapper { flex-direction: column; }
body.orient-portrait #screen-primary, body:not([class*="orient-"]) #screen-primary { width: 100vw; height: auto; max-height: 60vh; aspect-ratio: 240 / 208; flex-shrink: 0; }
body.orient-portrait #screen-secondary, body:not([class*="orient-"]) #screen-secondary { width: 100vw; flex: 1; min-height: 60px; }
body.orient-reverse-portrait { transform: rotate(180deg); transform-origin: center center; }
body.orient-reverse-portrait #screen-primary { width: 100vw; height: auto; max-height: 60vh; aspect-ratio: 240 / 208; flex-shrink: 0; }
/* Landscape: rotate the WHOLE game 90° so it fills a portrait screen sideways.
   Body gets a transform, so its position:fixed children (controls) rotate too. */
body.orient-landscape, body.orient-reverse-landscape {
    position: absolute; width: 100vh; height: 100vw;
    overflow: hidden; transform-origin: top left;
}
body.orient-landscape         { top: 100%; left: 0;    transform: rotate(-90deg); }
body.orient-reverse-landscape { top: 0;    left: 100%; transform: rotate(90deg);  }
body.orient-landscape #game-wrapper, body.orient-reverse-landscape #game-wrapper {
    flex-direction: column; width: 100%; height: 100%;
}
body.orient-landscape #screen-primary, body.orient-reverse-landscape #screen-primary {
    width: 100%; height: auto; max-height: 70vw; aspect-ratio: 240 / 208; flex-shrink: 0;
}
body.orient-landscape #screen-secondary, body.orient-reverse-landscape #screen-secondary {
    width: 100%; flex: 1; min-height: 60px;
}
body.orient-landscape #controls-layer, body.orient-reverse-landscape #controls-layer {
    opacity: var(--controls-opacity, 0.85);
}

/* === DIALOGUE BOX — FireRed message window === */
#dialogue-box {
    position: absolute; left: 2%; right: 2%; bottom: 3%; z-index: 60;
    background: var(--fr-body);
    border: 3px solid var(--fr-border);
    box-shadow: var(--fr-window), 2px 2px 0 rgba(0,0,0,0.35);
    border-radius: 10px; padding: 6px 10px 5px; pointer-events: none;
}
#dialogue-inner { position: relative; }
#dialogue-text {
    font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.7;
    color: var(--fr-text); min-height: 26px; white-space: pre-wrap; word-break: break-word;
}
#dialogue-arrow {
    position: absolute; bottom: 0; right: 2px; font-size: 10px;
    color: var(--fr-red); animation: dlg-blink 0.6s step-end infinite;
}
@keyframes dlg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* === BATTLE OVERLAY === */
#battle-overlay {
    position: absolute; inset: 0; z-index: 80; background: #1a2030;
    display: flex; flex-direction: column;
    font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--fr-text);
}
#bt-field {
    flex: 1; position: relative;
    background: linear-gradient(to bottom, #5090d0 0%, #70b8e8 50%, #90d070 100%);
    overflow: hidden; image-rendering: pixelated;
}
#bt-terrain-bg {
    position: absolute; inset: 0; image-rendering: pixelated;
    background-repeat: repeat; background-size: 64px auto;
    opacity: 0.92; pointer-events: none; z-index: 0;
}
#bt-enemy-info, #bt-player-info,
#bt-enemy-sprite-wrap, #bt-player-sprite-wrap { z-index: 1; }

#bt-ball-anim {
    position: absolute; width: 32px; height: 32px; image-rendering: pixelated;
    pointer-events: none; z-index: 20; transform-origin: center center;
}
@keyframes bt-throw-arc {
    0%   { left: 60%; bottom: 20%; transform: rotate(0deg) scale(1); opacity: 1; }
    40%  { left: 40%; bottom: 55%; transform: rotate(-180deg) scale(1.2); opacity: 1; }
    80%  { left: 15%; bottom: 45%; transform: rotate(-360deg) scale(1); opacity: 1; }
    100% { left: 14%; bottom: 44%; transform: rotate(-400deg) scale(0.9); opacity: 1; }
}
@keyframes bt-ball-shake {
    0% { transform: rotate(0deg); } 20% { transform: rotate(-20deg); }
    40% { transform: rotate(20deg); } 60% { transform: rotate(-15deg); }
    80% { transform: rotate(15deg); } 100% { transform: rotate(0deg); }
}
@keyframes bt-ball-break { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.3); opacity: 0.8; } 100% { transform: scale(0); opacity: 0; } }
@keyframes bt-pokemon-caught { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes bt-pokemon-appear { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bt-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Battle info boxes — FireRed healthbox style */
#bt-enemy-info {
    position: absolute; top: 3%; left: 2%;
    background: var(--fr-body);
    border: 2px solid var(--fr-border);
    box-shadow: var(--fr-window), 2px 2px 0 rgba(0,0,0,0.35);
    padding: 4px 8px; min-width: 96px; border-radius: 8px;
}
#bt-player-info {
    position: absolute; bottom: 3%; right: 2%;
    background: var(--fr-body);
    border: 2px solid var(--fr-border);
    box-shadow: var(--fr-window), 2px 2px 0 rgba(0,0,0,0.35);
    padding: 4px 8px; min-width: 108px; border-radius: 8px;
}
#bt-enemy-name, #bt-player-name { font-weight: bold; color: var(--fr-text); font-size: 8px; }
#bt-enemy-name-row, #bt-player-name-row { display: flex; justify-content: space-between; align-items: center; }
.bt-level-row { font-size: 7px; color: var(--fr-text-dim); margin-top: 1px; }
.bt-hp-wrap { background: var(--fr-tan); border: 1px solid var(--fr-border); border-radius: 3px; height: 6px; margin-top: 3px; overflow: hidden; }
.bt-hp-bar { height: 100%; transition: width 0.3s ease; }
.bt-hp-bar.hp-green  { background: #58d038; }
.bt-hp-bar.hp-yellow { background: #f8c800; }
.bt-hp-bar.hp-red    { background: #f83800; }
.bt-hp-text { font-size: 7px; color: var(--fr-text-dim); text-align: right; margin-top: 1px; }
#bt-enemy-status, #bt-player-status { font-size: 7px; font-weight: bold; min-height: 9px; margin-top: 1px; }

#bt-enemy-sprite-wrap { position: absolute; top: 5%; right: 10%; width: 40%; height: 45%; display: flex; align-items: center; justify-content: center; }
#bt-enemy-sprite { max-width: 100%; max-height: 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
#bt-player-sprite-wrap { position: absolute; bottom: 5%; left: 10%; width: 36%; height: 42%; display: flex; align-items: center; justify-content: center; }
#bt-player-sprite { max-width: 100%; max-height: 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }

/* Battle bottom panel — FireRed message box style */
#bt-bottom {
    height: 38%; min-height: 52px;
    background: var(--fr-body);
    border-top: 3px solid var(--fr-border);
    display: flex; flex-direction: column;
}
#bt-text-box {
    flex: 1; padding: 5px 10px; display: flex; align-items: center;
    border-bottom: 1px solid var(--fr-tan);
}
#bt-text { font-size: 8px; color: var(--fr-text); white-space: pre-wrap; line-height: 1.8; }

/* Battle action grid — FireRed 2x2 FIGHT/BAG/POKÉMON/RUN */
#bt-action-box { display: none; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; flex: 1; }
.bt-act {
    background: var(--fr-body-lt); color: var(--fr-text);
    border: 2px solid var(--fr-border); border-radius: 8px;
    font-family: 'Press Start 2P', monospace; font-size: 8px;
    cursor: pointer; padding: 4px;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.bt-act.selected, .bt-act:hover { background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark); }

/* Move list */
#bt-move-box { display: none; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; flex: 1; overflow-y: auto; }
.bt-move-btn {
    background: var(--fr-body-lt); color: var(--fr-text);
    border: 2px solid var(--fr-border); border-radius: 8px;
    font-family: 'Press Start 2P', monospace; font-size: 8px;
    cursor: pointer; padding: 3px 5px; display: flex; flex-direction: column; gap: 1px;
    text-align: left; box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.bt-move-btn.selected, .bt-move-btn:hover { background: rgba(230,8,8,0.12); border-color: var(--fr-red); }
.bt-move-btn.pp-zero { opacity: 0.4; cursor: not-allowed; }
.bt-move-btn.bt-move-empty { opacity: 0.25; cursor: default; }
.bt-move-btn.bt-move-empty.selected { background: transparent; border-color: var(--fr-red); }
.bt-move-name { font-weight: bold; color: var(--fr-text); font-size: 8px; }
.bt-move-pp   { font-size: 7px; color: var(--fr-text-dim); }
.bt-move-pp.pp-empty { color: var(--fr-red); }
.bt-move-type { font-size: 7px; }

/* Type colors — muted for light bg readability */
[data-type="normal"]   { color: #606858; } [data-type="fire"]     { color: #b04010; }
[data-type="water"]    { color: #2050b0; } [data-type="grass"]    { color: #307010; }
[data-type="electric"] { color: #987000; } [data-type="ice"]      { color: #207890; }
[data-type="fighting"] { color: #881010; } [data-type="poison"]   { color: #600060; }
[data-type="ground"]   { color: #806018; } [data-type="flying"]   { color: #4050a8; }
[data-type="psychic"]  { color: #a80038; } [data-type="bug"]      { color: #506000; }
[data-type="rock"]     { color: #706010; } [data-type="ghost"]    { color: #382060; }
[data-type="dragon"]   { color: #4000b8; } [data-type="dark"]     { color: #382810; }
[data-type="steel"]    { color: #486070; } [data-type="fairy"]    { color: #903050; }

/* Battle bag/party */
#bt-bag-box, #bt-party-box { display: none; flex-direction: column; gap: 0; padding: 0; flex: 1; overflow: hidden; }
#bt-bag-tabs { display: flex; gap: 2px; padding: 3px 3px 0; background: var(--fr-body); border-bottom: 2px solid var(--fr-border); flex-shrink: 0; overflow-x: auto; }
.bt-bag-tab { background: var(--fr-tan); color: var(--fr-text); border: 2px solid var(--fr-border); border-bottom: none; border-radius: 6px 6px 0 0; font-family: 'Press Start 2P', monospace; font-size: 7px; cursor: pointer; padding: 3px 5px; white-space: nowrap; flex-shrink: 0; }
.bt-bag-tab.active { background: var(--fr-body-lt); }
#bt-bag-list { display: flex; flex-direction: column; gap: 1px; padding: 3px; flex: 1; overflow-y: auto; background: var(--fr-body-lt); }
#bt-party-box { display: none; }
.bt-bag-btn, .bt-party-btn { background: var(--fr-body); color: var(--fr-text); border: 2px solid var(--fr-border); border-radius: 6px; font-family: 'Press Start 2P', monospace; font-size: 8px; cursor: pointer; padding: 3px 6px; text-align: left; }
.bt-bag-btn.selected, .bt-bag-btn:hover, .bt-party-btn.selected, .bt-party-btn:hover { background: rgba(230,8,8,0.10); border-color: var(--fr-red); }
.bt-party-btn.party-current { opacity: 0.6; cursor: default; }
.bt-party-btn.party-fainted { opacity: 0.4; cursor: not-allowed; }
.party-name { font-weight: bold; color: var(--fr-text); margin-right: 6px; }
.party-lv   { font-size: 7px; color: var(--fr-text-dim); margin-right: 6px; }
.party-hp-wrap { display: inline-block; width: 40px; height: 4px; background: var(--fr-tan); border: 1px solid var(--fr-border); border-radius: 2px; vertical-align: middle; overflow: hidden; margin-right: 4px; }
.party-hp-bar  { display: block; height: 100%; }
.party-hp-txt  { font-size: 7px; color: var(--fr-text-dim); }
.bt-back-btn { background: var(--fr-body); color: var(--fr-text); border: 2px solid var(--fr-border); font-family: 'Press Start 2P', monospace; font-size: 8px; cursor: pointer; padding: 3px 6px; text-align: left; margin-top: 2px; border-radius: 6px; }
.bt-back-btn:hover { background: var(--fr-red); color: #fff; border-color: var(--fr-red-dark); }

/* === THE SYSTEM — LitRPG overlay (cold/clinical contrast to warm FireRed) === */
#system-notify-stack { position: fixed; top: 60px; right: 10px; z-index: 300; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: 200px; }
.sys-notify { background: rgba(0,6,20,0.93); border-radius: 6px; padding: 6px 10px; font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 1.6; color: #80e8ff; pointer-events: none; opacity: 1; transition: opacity 0.4s ease; }
.sys-notify.type-info    { border: 1px solid #00ccff; box-shadow: 0 0 6px rgba(0,200,255,0.35), inset 0 0 0 1px rgba(0,200,255,0.15); }
.sys-notify.type-warning { border: 1px solid #f8d000; box-shadow: 0 0 6px rgba(248,208,0,0.35); color: #f8e880; }
.sys-notify.type-danger  { border: 1px solid #ff3030; box-shadow: 0 0 8px rgba(255,48,48,0.5); color: #ff9090; animation: sys-pulse 0.8s ease-in-out infinite alternate; }
.sys-notify.fading       { opacity: 0; }
@keyframes sys-pulse { from { box-shadow: 0 0 6px rgba(255,48,48,0.4); } to { box-shadow: 0 0 14px rgba(255,48,48,0.8); } }
.sys-notify-label { font-size: 6px; letter-spacing: 1px; margin-bottom: 2px; opacity: 0.7; color: #00ccff; }
.sys-notify.type-warning .sys-notify-label { color: #f8d000; }
.sys-notify.type-danger  .sys-notify-label { color: #ff3030; }