@font-face {
    font-family: 'DungGeunMo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Faction Colors */
    --color-goguryeo: #ff4444;
    --color-baekje: #ffff00;
    --color-silla: #ffffff;
    /* BUG-NEW-103: Gaya was #44ff44 (lime green) — identical to the game's
       standard UI text color (#0f0) and the plains background tile, making
       Gaya faction labels nearly indistinguishable from other UI text.
       Changed to #ff8800 (amber-orange) to match the map canvas fix (BUG-NEW-097). */
    --color-gaya: #ff8800;
    
    /* Classic DOS UI Colors */
    --dos-border: #aaa;
    --dos-border-dark: #555;
    --dos-bg: #000;
    --dos-text: #0f0;
    --dos-highlight: #ff0;

    /* Readability Overrides */
    --readable-command-text: #eaffd6;
    --readable-command-border: #7fd46a;
    --readable-utility-text: #111400;
    --readable-log-text: #e8e8c8;
    --capture-hint-bg-top: #2c1c04;
    --capture-hint-bg-bottom: #120c02;
    --capture-hint-accent: #ffcc55;
}

/* ── Root reset: prevent body/html scroll and whitespace on PC ── */
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    background-color: #050505;
    background-image: radial-gradient(#111 10%, transparent 10%);
    background-size: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: 'DungGeunMo', 'Inter', 'Noto Serif KR', 'Noto Sans KR', 'Malgun Gothic', 'Press Start 2P', 'Courier New', Courier, monospace;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glass-panel {
    background: rgba(14, 16, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.rtk-window,
#side-panel,
#battle-actions,
#battle-tactical-panel,
#battle-info-strip {
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.game-title,
#scenario-select-title,
#event-popup-title,
#archive-popup-title,
#history-dict-title {
    font-family: 'Noto Serif KR', 'DungGeunMo', serif;
    text-shadow: 0 0 15px rgba(217, 119, 6, 0.45), 0 0 4px rgba(217, 119, 6, 0.80);
}

html.font-fallback body,
html.font-fallback .rtk-window,
html.font-fallback button,
html.font-fallback input,
html.font-fallback select {
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Courier New', Courier, monospace !important;
}

/* Monitor Frame — fills full viewport on PC so nothing is clipped.
   The 4:3 CRT illusion is preserved via the CRT overlay; on small screens
   the aspect-ratio clamp still applies so it doesn't look stretched. */
#monitor-frame {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background-color: #1a1a1a;
    border: 0 solid #333;
    border-radius: 0;
    box-shadow: 0 0 50px rgba(0,0,0,1), inset 0 0 20px rgba(255,255,255,0.1);
    overflow: hidden;
    display: flex;
    pointer-events: none;
}

#global-game-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px clamp(12px, 2vw, 24px);
    border-width: 0 0 1px;
    border-color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.brand-lockup {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 204, 85, 0.72);
    border-radius: 7px;
    background: linear-gradient(135deg, #f4b83e, #9b5c12);
    color: #111400;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(217, 119, 6, 0.30);
}

.brand-copy {
    min-width: 0;
}

.brand-copy h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffcc55;
    font-family: 'Noto Serif KR', 'DungGeunMo', serif;
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1.15;
    letter-spacing: 0;
    text-shadow: 0 0 12px rgba(217, 119, 6, 0.42);
    white-space: nowrap;
}

.brand-copy h1 span {
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f4f0df;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.brand-copy p {
    margin: 2px 0 0;
    color: #a8a08c;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 11px;
    white-space: nowrap;
}

.viewport-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.50);
    pointer-events: auto;
}

.viewport-btn {
    min-width: 58px;
    min-height: 34px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #c7c0ae;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.viewport-btn:hover,
.viewport-btn:focus-visible {
    color: #fff2c2;
    outline: 2px solid rgba(255, 204, 85, 0.45);
    outline-offset: 1px;
}

.viewport-btn.active {
    background: #d99723;
    color: #111400;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.35);
}

body.ux-view-mobile #monitor-frame {
    width: min(100vw, 430px);
    height: min(100vh, 900px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

body.ux-view-mobile #global-game-header {
    padding-inline: 10px;
}

body.ux-view-mobile .brand-copy p {
    display: none;
}

body.ux-view-mobile .brand-copy h1 {
    font-size: 15px;
}

body.ux-view-mobile .brand-copy h1 span {
    font-size: 9px;
}

body.ux-view-mobile .viewport-btn {
    min-width: 44px;
    min-height: 32px;
    font-size: 11px;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--dos-bg);
    display: flex;
    flex-direction: row;
    pointer-events: auto;
    overflow: hidden;
}

#education-mode-badge {
    position: absolute;
    top: 8px;
    right: 312px;
    z-index: 11000;
    padding: 4px 8px;
    border: 1px solid var(--dos-border-dark);
    background: rgba(0, 0, 0, 0.72);
    color: #888;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

#education-mode-badge.active {
    border-color: #ffcc00;
    color: #ffcc00;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.35);
}

/* Enhanced CRT Overlay */
#crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.8);
    opacity: 0.35;
    backdrop-filter: contrast(1.05) brightness(1.05);
    -webkit-backdrop-filter: contrast(1.05) brightness(1.05);
}

#crt-overlay::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 10000;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 0.27861; }
    5% { opacity: 0.34769; }
    10% { opacity: 0.23604; }
    15% { opacity: 0.90626; }
    20% { opacity: 0.18128; }
    25% { opacity: 0.83891; }
    30% { opacity: 0.65583; }
    35% { opacity: 0.57807; }
    40% { opacity: 0.26559; }
    45% { opacity: 0.84693; }
    50% { opacity: 0.96019; }
    55% { opacity: 0.08523; }
    60% { opacity: 0.71313; }
    65% { opacity: 0.09109; }
    70% { opacity: 0.22918; }
    75% { opacity: 0.31603; }
    80% { opacity: 0.28344; }
    85% { opacity: 0.14282; }
    90% { opacity: 0.73335; }
    95% { opacity: 0.77118; }
    100% { opacity: 0.03913; }
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 10001;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    pointer-events: none;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% { bottom: 100%; }
    80% { bottom: 100%; }
    100% { bottom: 0%; }
}

#map-panel {
    flex: 1;
    background: linear-gradient(135deg, #0a1a05 0%, #0d2010 50%, #0a1a05 100%);
    position: relative;
    overflow: hidden;
    z-index: 10;
    min-width: 0;
    min-height: 0;
}

#map-canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.45)) brightness(1.10) contrast(1.08) saturate(1.12);
}

#side-panel {
    flex: 0 0 300px;
    width: 300px;
    min-width: 240px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #000022; /* Very dark blue for depth */
    border-left: 6px double var(--dos-border);
    position: relative;
    z-index: 20;
    box-sizing: border-box;
}

#info-panel {
    flex: 1;
    border-bottom: 6px double var(--dos-border);
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

/* HUD Strip */
#hud-strip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    background: #050510;
    border-bottom: 1px solid #0f3a0f;
    font-size: 0.78em;
    color: #ccc;
    flex-wrap: nowrap;
    min-height: 28px;
}

#hud-faction {
    font-weight: bold;
    color: var(--dos-highlight);
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 6px;
    border-left: 3px solid currentColor;
}

#hud-mandate-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

#hud-mandate-label {
    color: #aaa;
    font-size: 0.78em;
    white-space: nowrap;
}

#hud-mandate-bar-bg {
    width: 70px;
    min-width: 40px;
    height: 8px;
    background: #222;
    border: 1px solid #555;
    position: relative;
    flex-shrink: 1;
    display: inline-block;
}

#hud-mandate-bar {
    height: 100%;
    width: 100%;
    background: #00cc44;
    transition: width 0.4s, background-color 0.4s;
}

#hud-mandate-value {
    font-size: 0.78em;
    color: #aaa;
    white-space: nowrap;
}

#hud-turn-indicator {
    margin-left: auto;
    font-size: 0.78em;
    color: #0f0;
    white-space: nowrap;
    flex-shrink: 0;
}

#hud-turn-indicator.ai-turn {
    color: #ff8800;
    animation: hud-blink 0.9s step-end infinite;
}

@keyframes hud-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* AI processing banner (inside command-panel, above buttons) */
#ai-processing-banner {
    display: none;
    background: #330000;
    color: #ff8800;
    text-align: center;
    font-size: 0.9em;
    padding: 4px 0;
    border: 2px solid #ff4400;
    margin-bottom: 8px;
    flex-shrink: 0;
    animation: hud-blink 0.9s step-end infinite;
}

#ai-processing-banner.visible {
    display: block;
}

#command-panel {
    flex-shrink: 0;
    padding: 10px 20px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent panel from growing */
}

#context-action-card {
    display: none;
}

.context-action-card {
    flex-shrink: 0;
    margin-bottom: 8px;
    padding: 7px 9px;
    border: 1px solid #355a35;
    border-left: 4px solid var(--readable-command-border);
    background: linear-gradient(90deg, rgba(6, 28, 6, 0.95), rgba(1, 10, 1, 0.95));
    color: var(--readable-command-text);
    line-height: 1.35;
    font-size: 0.84em;
}
.context-action-card strong {
    display: block;
    margin-bottom: 2px;
    color: var(--dos-highlight);
    letter-spacing: 0.03em;
}
.context-action-card span {
    display: block;
    color: #dcebcf;
}
.context-action-card b {
    color: #fff06a;
}
#context-action-card.neutral-context,
.context-action-card.neutral-context {
    display: block;
    border-color: #7a5a22;
    border-left-color: var(--capture-hint-accent);
    background: linear-gradient(90deg, rgba(44, 28, 4, 0.96), rgba(12, 8, 2, 0.95));
}
#context-action-card.player-context,
#context-action-card.enemy-context,
.context-action-card.player-context,
.context-action-card.enemy-context {
    display: block;
}
.context-action-card.enemy-context {
    border-color: #5a3535;
    border-left-color: #ff6666;
    background: linear-gradient(90deg, rgba(32, 8, 8, 0.95), rgba(8, 2, 2, 0.95));
}

#command-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Full-width separator row inside the 2-col grid */
.cmd-separator {
    grid-column: 1 / -1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dos-border-dark), transparent);
    margin: 2px 0;
}

/* Utility buttons (기록, 턴 종료) — slightly distinct */
.cmd-btn.cmd-btn-utility {
    background-color: #cccccc;
    color: #111;
    border-color: #aaaaaa;
}

.cmd-btn.cmd-btn-utility:hover {
    background-color: #ffffff;
    border-color: #ffcc00;
}

/* Disabled state for command buttons during AI turn */
#command-menu .cmd-btn:disabled,
#command-menu .cmd-btn.cmd-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.cmd-btn {
    background-color: #eeeeee;
    color: #000000;
    border: 2px solid #ffffff;
    border-radius: 4px;
    padding: 4px 5px;
    min-height: 30px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.15s ease;
    box-shadow: inset -2px -2px 0px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-btn:hover {
    background: #003300;
    color: #00ff00;
    border-color: #00cc00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3), inset 0 0 4px rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.5);
    transform: none;
}

.cmd-btn:active {
    transform: translateY(2px);
    box-shadow: inset 1px 1px 0px rgba(0,0,0,0.3);
}

/* Accessibility: Focus Styles (WCV-005) */
*:focus {
    outline: none;
}

.cmd-btn:focus,
.menu-option:focus,
.scenario-item:focus,
.faction-radio-label:focus-within,
button:focus,
input:focus,
select:focus,
.cmd-btn:focus-visible,
.menu-option:focus-visible,
.scenario-item:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.3), 0 0 10px rgba(255, 204, 0, 0.5);
}

.save-slot-item {
    padding: 12px;
    border: 2px solid #444;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.save-slot-item:hover, .save-slot-item:focus {
    border-color: #ffcc00;
    background: rgba(255, 204, 0, 0.1);
}

.save-slot-item:focus {
    outline: 3px solid #ffcc00;
    outline-offset: -3px;
}

/* Opening Scene (RFC 52) */
#opening-scene {
    background-color: #000;
    color: #0f0;
    font-family: 'DungGeunMo', monospace;
    padding: 40px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

#opening-text {
    font-size: clamp(14px, 2vw, 20px);
    color: #0f0;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    white-space: pre-wrap;
    word-break: keep-all;
}

.opening-header h2 {
    font-size: clamp(24px, 4vw, 42px);
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

#opening-objectives {
    color: #ffcc00;
    font-size: clamp(12px, 1.8vw, 17px);
}

#opening-objectives ul {
    list-style: none;
    padding: 0;
}

#opening-objectives li::before {
    content: "▶ ";
    margin-right: 8px;
}

.typewriter {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: pre-wrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: 
      blink-caret .75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

#event-log-container {
    flex-shrink: 0;
    max-height: 200px;
    overflow: hidden;
    position: relative;
    border: 4px double var(--dos-border-dark);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#event-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #001100;
    padding: 2px 4px;
    border-bottom: 1px solid #1a3a1a;
    flex-shrink: 0;
}

#event-log-title {
    color: var(--dos-highlight);
    font-size: 0.82em;
    font-weight: bold;
}

#clear-log-btn {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    font-family: inherit;
    font-size: 0.7em;
    padding: 1px 4px;
    cursor: pointer;
    line-height: 1.4;
}

#clear-log-btn:hover {
    border-color: #ffcc00;
    color: #ffcc00;
}

#event-log {
    position: relative;
    flex: 1;
    padding: 8px 10px;
    overflow-y: auto;
    font-size: 0.84em;
    background-color: #000800;
    color: #ccc;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

/* Month Transition Overlay */
#transition-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--dos-bg); /* Solid black for DOS feel */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2500; /* Higher than other overlays */
    flex-direction: column;
    color: #fff;
    font-size: 32px;
    text-shadow: 0 0 10px #0f0;
    pointer-events: none; /* Block clicks only when active */
}

#transition-overlay.active {
    display: flex;
    pointer-events: auto;
}

#selection-window {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: clamp(280px, 320px, 90vw) !important;
    min-width: 280px;
    min-height: 150px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 3000; /* Highest window */
}

#selection-window h4 {
    margin: 0 0 10px 0;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 5px;
    font-size: 22px;
    text-align: center;
}

.city-label {
    background: #d2b48c;
    color: #2b1d0e;
    padding: 5px 12px;
    border: 2px solid #5d4037;
    border-radius: 2px;
    font-weight: 900;
    font-size: 20px;
    display: inline-block;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-shadow: none;
    pointer-events: auto;
    cursor: pointer;
}

.selection-item {
    padding: 6px 10px;
    font-size: 0.9em;
    cursor: pointer;
    border-bottom: 1px solid #111;
    transition: background 0.1s;
    color: #aaffaa;
    border-left: 2px solid transparent;
}

.selection-item:hover {
    background: #001a00;
    border-left-color: #00cc00;
    color: #00ff00;
}

#event-log p {
    margin: 2px 0;
    font-size: 0.82em;
    line-height: 1.45;
    animation: logEntry 0.3s ease-out;
}

#event-log p:last-child {
    color: var(--dos-text);
    font-weight: bold;
}

/* Log color-coding by message type */
#event-log p.log-battle    { color: #ff6666; }
#event-log p.log-diplomacy { color: #6699ff; }
#event-log p.log-internal  { color: #66cc66; }
#event-log p.log-event     { color: #ffcc00; }

/* Log turn prefix badge */
.log-turn-prefix {
    color: #555;
    font-size: 0.85em;
    margin-right: 4px;
}

h3 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px dashed var(--dos-border-dark);
    padding-bottom: 8px;
    color: var(--dos-highlight);
    font-size: 18px;
}

#city-details, #general-details {
    padding: 12px;
    background-color: #000800;
    border: 2px solid var(--dos-border-dark);
    line-height: 1.5;
    font-size: 0.92em;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.1);
}

#city-info h3, #general-info h3 {
    font-size: 0.85em;
    color: #ffcc00;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    margin-bottom: 6px;
    margin-top: 0;
}

#city-details {
    margin-bottom: 15px;
}

#general-details {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 300px;
}

#city-info {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

#general-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Faction text colors for use in UI logic */
.faction-goguryeo { color: var(--color-goguryeo); }
.faction-baekje { color: var(--color-baekje); }
.faction-silla { color: var(--color-silla); }
.faction-gaya { color: var(--color-gaya); }

/* RTK II Style Floating Windows */
.rtk-window {
    position: absolute;
    background-color: #0000aa; /* Classic Blue */
    color: #ffffff;
    border: 4px solid #ffcc00; /* Gold Border */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    padding: 12px;
    z-index: 100;
    font-family: 'DungGeunMo', monospace;
    image-rendering: pixelated;
    scrollbar-width: thin;
    scrollbar-color: #0a3a0a #000;
}

.rtk-window::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2px solid #ffffff;
    pointer-events: none;
}

.dialogue-box {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    min-height: 80px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(0, 0, 20, 0.95);
    border: 2px solid #335533;
    box-shadow: 0 0 20px rgba(0, 100, 0, 0.2);
}

.portrait-container {
    width: 64px;
    height: 80px;
    border: 4px double #ffcc00; /* Classic double border */
    background-color: #000;
    flex-shrink: 0;
    box-sizing: content-box; /* Ensure 64x80 fits inside */
    image-rendering: pixelated;
    overflow: hidden;
}

.dialogue-content {
    flex-grow: 1;
    font-size: 18px;
    line-height: 1.5;
    position: relative;
}

.dialogue-cursor {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    animation: blink 0.6s step-end infinite;
    color: #ffcc00;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Smooth sine-style pulse — RTK2 prompts breathe, not strobe. */
@keyframes pulse-soft {
    0%, 100% { opacity: 0.55; text-shadow: 0 0 4px rgba(136, 204, 136, 0.0); }
    50%      { opacity: 1.0;  text-shadow: 0 0 8px rgba(136, 204, 136, 0.5); }
}

/* Blinking prompt text (title screen) */
.blinking-text {
    color: #88cc88;
    font-size: clamp(13px, 1.8vw, 17px);
    animation: pulse-soft 1.6s ease-in-out infinite;
    margin: 0;
}

/* Blocky Retro Scrollbar */
::-webkit-scrollbar {
    width: 14px;
}
::-webkit-scrollbar-track {
    background: #000000;
    border-left: 2px solid #00ff00;
}
::-webkit-scrollbar-thumb {
    background: #00ff00;
    border: 2px solid #000000;
}
::-webkit-scrollbar-thumb:hover {
    background: #00cc00;
}

/* Title & Scenario Menu Options */
.full-screen-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: clamp(24px, 5vw, 64px);
    text-align: center;
}

.full-screen-overlay.active {
    display: flex;
}

#title-screen,
#scenario-select-screen {
    box-shadow: none;
}

.game-title {
    margin: 0;
    font-size: clamp(36px, 8vw, 84px);
    line-height: 1;
    text-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 255, 255, 0.35);
    max-width: 100%;
}

#title-menu {
    width: min(520px, 100%);
}

.menu-option {
    font-size: clamp(18px, 3vw, 28px);
    padding: 15px clamp(16px, 4vw, 40px);
    cursor: pointer;
    border: 4px double #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
    text-align: center;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.menu-option:hover {
    background-color: #ffffff;
    color: #0000aa;
    border-color: #ffcc00;
}

#scenario-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
}

.scenario-item {
    font-size: 20px;
    padding: 12px 24px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid #555;
    cursor: pointer;
    width: min(620px, 100%);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.scenario-item:hover {
    background: rgba(0, 40, 0, 0.4);
    border-color: #00cc00;
    transform: translateX(4px);
    transition: all 0.15s ease;
}

.scenario-item.selected-scenario {
    border-color: #ffcc00;
    background-color: rgba(255, 204, 0, 0.15);
}

.scenario-title {
    font-size: clamp(16px, 2.2vw, 22px);
    color: #fff;
    font-weight: bold;
}

.scenario-meta {
    font-size: clamp(12px, 1.6vw, 16px);
    color: #ddd; /* WCV-002/003: AA contrast against dark scenario cards */
}

.scenario-difficulty {
    font-size: clamp(11px, 1.5vw, 15px);
    padding: 2px 10px;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: 0.03em;
}

.difficulty-easy  { background: #005500; color: #88ff88; border: 1px solid #00aa00; }
.difficulty-normal{ background: #004488; color: #88ccff; border: 1px solid #0066cc; }
.difficulty-hard  { background: #554400; color: #ffdd88; border: 1px solid #aa8800; }
.difficulty-vhard { background: #550000; color: #ff8888; border: 1px solid #aa0000; }

/* Faction Radio Picker */
#faction-select-panel {
    width: min(860px, 100%);
    padding: 14px clamp(12px, 2vw, 24px);
    border: 2px solid #ffcc00;
    background: rgba(0,0,0,0.54);
}

.faction-picker-layout {
    width: 100%;
    display: flex;
    flex-direction: column;  /* map on top, factions below — always column */
    gap: 14px;
    align-items: stretch;
}

.faction-map-panel {
    position: relative;
    width: 100%;
    min-height: 280px;
    max-height: 56vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: #0d0f17;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.58);
}


.faction-map-kicker {
    position: absolute;
    top: 10px;
    left: 14px;
    color: #ffcc55;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.korea-faction-map {
    width: 100%;
    max-width: 480px;
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.80));
}

.faction-map-path {
    fill: rgba(40, 43, 54, 0.84);
    stroke: rgba(160, 150, 130, 0.78);
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.faction-map-path[data-faction="Goguryeo"].active,
.faction-map-path[data-faction="Goguryeo"]:hover,
.faction-map-path[data-faction="Goguryeo"]:focus-visible {
    fill: rgba(127, 29, 29, 0.82);
    stroke: #ef4444;
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.42));
}

.faction-map-path[data-faction="Baekje"].active,
.faction-map-path[data-faction="Baekje"]:hover,
.faction-map-path[data-faction="Baekje"]:focus-visible {
    fill: rgba(30, 58, 138, 0.82);
    stroke: #3b82f6;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.42));
}

.faction-map-path[data-faction="Silla"].active,
.faction-map-path[data-faction="Silla"]:hover,
.faction-map-path[data-faction="Silla"]:focus-visible {
    fill: rgba(113, 63, 18, 0.82);
    stroke: #eab308;
    filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.42));
}

.faction-map-path[data-faction="Gaya"].active,
.faction-map-path[data-faction="Gaya"]:hover,
.faction-map-path[data-faction="Gaya"]:focus-visible {
    fill: rgba(124, 45, 18, 0.82);
    stroke: #f97316;
    filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.42));
}

.faction-map-path:focus-visible {
    outline: none;
}

.faction-map-label {
    font-family: 'Noto Serif KR', 'DungGeunMo', serif;
    letter-spacing: 0;
    pointer-events: none;
}

#faction-map-status {
    margin: 10px 0 0;
    color: #989082;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

.faction-choice-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.faction-radio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border: 2px solid #555;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    font-size: clamp(16px, 2.2vw, 22px);
    min-width: 110px;
    justify-content: center;
}

.faction-radio-label:hover,
.faction-radio-label:has(input:checked),
.faction-radio-label.selected {
    border-color: #ffcc00;
    background: rgba(255,204,0,0.12);
    transform: translateY(-2px);
}

.faction-radio-label input[type="radio"] {
    accent-color: #ffcc00;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.faction-radio-name {
    font-weight: bold;
}

/* RFC 62 §4: faction emblems (assets/emblems/*.svg) shown on the
   faction-select panel — 44px detailed crests, faintly desaturated
   until the option is hovered/selected to draw the eye. */
.faction-emblem {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: brightness(0.78) saturate(0.85);
    transition: filter 0.15s, transform 0.15s;
}
.faction-radio-label:hover .faction-emblem,
.faction-radio-label:has(input:checked) .faction-emblem {
    filter: brightness(1) saturate(1.15);
    transform: scale(1.06);
}

/* Faction grid: 2x2 on mobile for readability, 4x1 on tablets+ */
#faction-radio-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}
@media (min-width: 720px) {
    #faction-radio-group {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
}
#faction-select-panel .faction-radio-label {
    min-width: 0;
    padding: 10px 8px;
}

/* Always stack (map on top, factions below); never go row */
.faction-choice-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Title-screen decorative emblem band (RFC 62 §4 follow-up): all four
   crests under the subtitle so the menu carries the era's visual weight. */
.title-emblems {
    display: flex;
    gap: 18px;
    margin: 12px 0 24px;
    justify-content: center;
}
.title-emblems img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.18));
    transition: transform 0.25s, opacity 0.25s, filter 0.25s;
}
.title-emblems img:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.45));
}

/* RFC 33 §5.2 follow-up: small faction emblem next to "추천" in each
   scenario card so the player can see the recommended faction at a
   glance — uses the same SVG assets as the faction picker. */
.scenario-recommend[data-recommend]::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.scenario-recommend[data-recommend~="goguryeo"]::before {
    background-image: url(../emblems/goguryeo.svg);
}
.scenario-recommend[data-recommend~="baekje"]::before {
    background-image: url(../emblems/baekje.svg);
}
.scenario-recommend[data-recommend~="silla"]::before {
    background-image: url(../emblems/silla.svg);
}
.scenario-recommend[data-recommend~="gaya"]::before {
    background-image: url(../emblems/gaya.svg);
}

/* Parchment Style Labels (applied via Canvas but these are reference colors) */
/* Tan: #d2b48c, Brown: #3e2723 */

#error-popup {
    background-color: #330000;
    color: #ffaaaa;
    border-color: #ff0000;
    width: 400px;
    text-align: center;
    /* #error-popup is a direct child of #monitor-frame which has pointer-events:none.
       Must explicitly re-enable so the reload button is clickable. */
    pointer-events: auto;
}

#transition-overlay {
    pointer-events: none;
}

#transition-overlay.active {
    pointer-events: auto;
}

/* Ensure CRT doesn't block clicks */
#crt-overlay {
    pointer-events: none;
}

/* Battle Screen */
#battle-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Distinct background for battle */
    z-index: 1500; /* Above map but below transition */
    display: none;
    flex-direction: column;
    pointer-events: none; /* Block clicks when not active */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 2px solid rgba(0, 100, 0, 0.3);
}

#battle-screen.active {
    display: flex;
    pointer-events: auto;
}

#battle-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#battle-actions {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: none;
    gap: 6px;
    padding: 8px;
    z-index: 1510;
}

#battle-screen.active #battle-actions {
    display: flex;
}

/* ── Battle Hint Overlay ── */
#battle-hint-overlay {
    position: absolute;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
}

#battle-hint-box {
    background: #000011;
    border: 3px solid #ffcc00;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 18px rgba(255,204,0,0.18);
    padding: 14px 18px;
    width: clamp(280px, 54vw, 480px);
    font-family: 'DungGeunMo', monospace;
    color: #cccccc;
    position: relative;
}

#battle-hint-box::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2px solid #ffffff;
    pointer-events: none;
}

#battle-hint-title {
    color: #ffcc00;
    font-size: clamp(0.85em, 2vw, 1.05em);
    font-weight: bold;
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 12px;
    border-bottom: 1px solid #333;
    padding-bottom: 7px;
}

#battle-hint-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
    font-size: clamp(0.72em, 1.5vw, 0.88em);
    line-height: 1.55;
}

.battle-hint-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.battle-hint-key {
    color: #00ff88;
    min-width: 7em;
    flex-shrink: 0;
    font-weight: bold;
}

.battle-hint-desc {
    color: #bbbbbb;
}

.battle-hint-divider {
    height: 1px;
    background: #333;
    margin: 4px 0;
}

#battle-hint-close {
    display: block;
    width: 100%;
    font-size: clamp(0.75em, 1.5vw, 0.9em);
    margin-top: 4px;
}

/* Hint toggle button (always visible in active battle) */
#battle-hint-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1520;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    opacity: 0.75;
    display: none;
}

#battle-hint-btn:hover {
    opacity: 1;
}

#battle-screen.active #battle-hint-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-feedback {
    min-height: 24px;
    margin-top: 24px;
    color: #ffcc00;
    font-weight: bold;
    text-align: center;
}

.scenario-back {
    margin-top: 24px;
    color: #ffcc00;
}

#event-popup,
#archive-popup {
    position: fixed;
    z-index: 12000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 80%);
    text-align: center;
}

#archive-popup {
    width: min(680px, 86%);
    max-height: 78%;
    overflow-y: auto;
}

#event-popup h3,
#archive-popup h3 {
    color: #ffcc00;
    margin-top: 0;
}

#event-popup-content,
#archive-content {
    margin: 18px 0;
    line-height: 1.6;
    text-align: left;
}

.archive-section-title {
    color: var(--dos-highlight);
    border-bottom: 1px solid var(--dos-border-dark);
    margin: 14px 0 8px;
    padding-bottom: 4px;
}

.archive-entry {
    margin-bottom: 10px;
    color: #ddd;
}

.archive-entry b {
    color: #fff;
}

/* ── Historical Dictionary Panel (역사 사전) ── */
#history-dict-panel {
    position: fixed;
    z-index: 12000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(700px, 90%);
    max-height: 80vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#history-dict-panel.visible {
    display: flex !important;
}

/* Active tab button highlight */
.hist-tab-btn.active {
    background: #003300;
    color: #00ff00;
    border-color: #00cc00;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}

/* Content area within the dictionary */
#history-dict-content {
    text-align: left;
    color: #ddd;
}

.hist-section-title {
    color: var(--dos-highlight);
    border-bottom: 1px solid var(--dos-border-dark);
    margin: 12px 0 6px;
    padding-bottom: 4px;
    font-size: 1em;
}

.hist-entry {
    margin-bottom: 12px;
    padding: 6px 8px;
    border-left: 3px solid #333;
    outline: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}

.hist-entry:focus-visible {
    border-left-color: var(--dos-highlight);
    outline: 2px solid var(--dos-highlight);
    outline-offset: 2px;
    background: rgba(255, 255, 0, 0.1);
}

.hist-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

.hist-entry .hist-name {
    color: #fff;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.hist-entry .hist-desc {
    color: #bbb;
    font-size: 0.9em;
    line-height: 1.5;
}

.hist-education-banner {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid #aa8800;
    background: rgba(64, 48, 0, 0.72);
    color: #ffdd66;
    font-size: 0.9em;
}

.hist-education-banner.muted {
    border-color: #333;
    background: rgba(0, 0, 0, 0.35);
    color: #888;
}

.hist-edu-note {
    display: block;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dotted rgba(255, 204, 0, 0.35);
    color: #ffdd88;
    font-size: 0.86em;
    line-height: 1.45;
}

/* Faction color accents */
.hist-entry[data-faction="Goguryeo"] { border-color: var(--color-goguryeo); }
.hist-entry[data-faction="Baekje"]   { border-color: var(--color-baekje); }
.hist-entry[data-faction="Silla"]    { border-color: var(--color-silla); }
.hist-entry[data-faction="Gaya"]     { border-color: var(--color-gaya); }

/* Mobile: full-screen on small viewports */
@media (max-width: 600px) {
    #history-dict-panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
}

/* Battle skill button (필살기) */
.battle-skill-btn {
    background-color: #442200;
    color: #ffcc00;
    border-color: #ffaa00;
    text-shadow: 0 0 6px #ffaa00;
    box-shadow: inset -2px -2px 0px rgba(0,0,0,0.4), 0 0 8px rgba(255,170,0,0.4);
}

.battle-skill-btn:hover:not(:disabled) {
    background-color: #663300;
    border-color: #ffdd00;
    color: #fff;
}

.battle-skill-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-shadow: none;
    box-shadow: none;
    border-color: #555;
    color: #888;
}

/* ── Title screen subtitle & credit ── */
.title-subtitle {
    margin: 4px 0;
    color: #88ffaa;
    font-size: clamp(0.9em, 2vw, 1.1em);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

.title-credit {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 0.75em;
    color: #555;
    margin: 0;
    letter-spacing: 0.06em;
}


/* ── Scenario card header row (year / recommend / difficulty) ── */
.scenario-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.scenario-year {
    font-size: clamp(13px, 1.8vw, 18px);
    color: #ffcc00;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.scenario-recommend {
    font-size: clamp(11px, 1.5vw, 14px);
    color: #88ccff;
    background: rgba(0, 80, 160, 0.45);
    border: 1px solid #3388cc;
    padding: 1px 8px;
    border-radius: 3px;
}

/* ── Faction picker description ── */
.faction-radio-label {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.faction-desc {
    margin: 4px 0 0;
    font-size: clamp(10px, 1.3vw, 13px);
    color: #ddd; /* WCV-002/003: match scenario-meta AA contrast target */
    line-height: 1.4;
    max-width: 100%;
    text-align: center;
    word-break: keep-all;
}

/* Event popup fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -52%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

#event-popup.active {
    animation: fadeIn 0.2s ease-in;
    box-shadow: 0 0 30px rgba(0, 200, 0, 0.2);
}

/* Battle info strip (below canvas, above battle-actions) */
#battle-info-strip {
    position: absolute;
    bottom: 48px;  /* above battle-actions */
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.75);
    border-top: 1px solid #333;
    padding: 4px 12px;
    font-size: 0.78em;
    color: #aaa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

#battle-terrain-badge {
    background: #001a00;
    border: 1px solid #0f0;
    border-radius: 3px;
    padding: 2px 8px;
    color: #0f0;
    font-size: 0.85em;
}

/* Terrain type color coding */
.terrain-plains   { color: #44aa44; }
.terrain-mountain { color: #aa8833; }
.terrain-river    { color: #4488ff; }
.terrain-fortress { color: #aaaaaa; }
.terrain-forest   { color: #226622; }

/* City hover tooltip */
#city-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 500;
    background: rgba(0, 5, 15, 0.95);
    color: #ddd;
    border: 1px solid #1a6b3c;
    padding: 6px 10px;
    border-radius: 3px;
    font-family: 'DungGeunMo', monospace;
    font-size: 0.82em;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 180px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* ═══ Sprint Visual Polish ═══ */

/* Battle screen terrain-themed border variants */
#battle-screen.terrain-plains   { border-color: rgba(0, 100, 0, 0.6); }
#battle-screen.terrain-mountain { border-color: rgba(100, 80, 30, 0.6); }
#battle-screen.terrain-river    { border-color: rgba(20, 40, 150, 0.6); }
#battle-screen.terrain-forest   { border-color: rgba(0, 80, 20, 0.6); }
#battle-screen.terrain-fortress { border-color: rgba(100, 100, 100, 0.6); }

/* Event log entry entrance animation */
@keyframes logEntry {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ═══ UX Polish: Typography, Layout, Battle & Terrain ═══ */

/* 1. Typography hierarchy */
#hud-faction {
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.05em;
}

#info-panel h3,
#city-info h3,
#general-info h3 {
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffcc00;
}

#event-log p {
    font-size: 0.8em;
    line-height: 1.4;
    padding: 2px 4px;
}

.cmd-btn {
    min-width: 90px;
    font-size: 0.82em;
    padding: 6px 10px;
}

/* 2. Info panel layout — let flexbox govern height, not viewport math */
#info-panel {
    overflow-y: auto;
    max-height: none;
}

#info-panel::-webkit-scrollbar {
    width: 4px;
}

#info-panel::-webkit-scrollbar-track {
    background: #000;
}

#info-panel::-webkit-scrollbar-thumb {
    background: #334400;
    border-radius: 2px;
}

#info-panel::-webkit-scrollbar-thumb:hover {
    background: #556600;
}

#city-details,
#general-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

/* 3. Battle screen polish */
#battle-screen {
    align-items: center;
}

#battle-actions {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px;
}

#battle-screen.active #battle-actions {
    display: flex;
}

.battle-btn,
#battle-actions button {
    min-width: 80px;
    font-size: 0.8em;
    padding: 5px 10px;
}

/* Battle result overlay */
#battle-result-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    pointer-events: none;
}

#battle-result-overlay.visible {
    display: flex;
}

#battle-result-text {
    font-size: 2em;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 0 20px rgba(255, 204, 0, 0.8);
    letter-spacing: 0.1em;
}

/* 4. Terrain badges */
.terrain-badge {
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.terrain-mountain {
    background: #4a4a5a;
    color: #ddd;
}

.terrain-river {
    background: #1a3a5a;
    color: #88ccff;
}

.terrain-forest {
    background: #1a3a1a;
    color: #88ff88;
}

.terrain-fortress {
    background: #3a2a1a;
    color: #ffcc88;
}

.terrain-plains {
    background: #1a3a1a;
    color: #aaffaa;
}

/* 5. Scenario selection screen */
.scenario-item {
    border-left: 3px solid #556600;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.scenario-item:hover {
    border-left-color: #aacc00;
    background: rgba(170, 204, 0, 0.08);
    transform: translateX(3px);
}

.scenario-item h3 {
    font-size: 0.9em;
    color: #ccee88;
    margin: 0 0 4px;
}

.scenario-item p {
    font-size: 0.78em;
    color: #889966;
    margin: 0;
}

/* 6. Command buttons grid */
#command-grid,
.command-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

/* 7. HUD improvements */
#hud {
    border-bottom: 1px solid #334400;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

#hud-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.hud-stat {
    font-size: 0.78em;
    color: #99bb44;
}

/* 8. Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rtk-window.visible,
#battle-screen.visible {
    animation: fadeInUp 0.25s ease-out;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

.pulsing {
    animation: pulse 1.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE / MOBILE LAYOUT
   All media queries are appended here — existing
   rules above are NOT modified.
═══════════════════════════════════════════════════ */

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
  /* Main layout: stack vertically */
  #game-container, .game-layout, body > .main-layout {
    flex-direction: column !important;
  }

  /* Monitor frame: remove fixed aspect-ratio constraint */
  #monitor-frame {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    border-width: 0;
  }

  /* Map panel takes full width, capped height */
  #map-panel {
    flex: none !important;
    width: 100% !important;
    height: 50vh;
    max-height: 50vh;
  }

  /* Map canvas fills its panel */
  #map-canvas {
    width: 100% !important;
    max-height: 50vh;
  }

  /* Side panel becomes a bottom drawer / full width */
  #side-panel, #sidebar, #info-panel, .side-panel {
    flex: none !important;
    width: 100% !important;
    max-height: 50vh;
    overflow-y: auto;
    border-left: none !important;
    border-top: 4px double var(--dos-border);
  }

  /* Info panel: tighter height on mobile */
  #info-panel {
    max-height: 45vh;
    overflow-y: auto;
  }

  /* Command buttons: bigger touch targets */
  .cmd-btn, #command-menu button, #command-grid button, .command-buttons button {
    min-height: 44px;    /* iOS HIG minimum touch target */
    font-size: 0.9em;
    padding: 10px 8px;
  }

  /* Battle screen: canvas fills width */
  #battle-canvas {
    width: 100% !important;
    height: auto !important;
  }

  /* Battle actions: wrap into 3 columns */
  #battle-actions, .battle-actions {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  #battle-screen.active #battle-actions {
    display: flex !important;
  }

  /* Event log: shorter on mobile */
  #event-log {
    max-height: 15vh;
    font-size: 0.75em;
  }

  /* HUD strip: smaller text */
  #hud-strip, #hud {
    font-size: 0.8em;
    padding: 4px 8px;
  }

  /* City/general details: single column on mobile */
  #city-details, #general-details {
    grid-template-columns: 1fr !important;
  }

  /* Info panel headings: compact */
  #info-panel h3, #city-info h3, #general-info h3 {
    font-size: 0.85em;
    margin: 4px 0;
  }

  /* Scenario selection: full width items */
  .scenario-item {
    padding: 12px 10px;
    margin-bottom: 6px;
  }

  /* Battle info strip: smaller */
  #battle-info-strip {
    font-size: 0.72em;
    padding: 3px 6px;
  }
}

/* ── Tablet: 769px – 1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Sidebar: narrower on tablet */
  #side-panel {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 220px;
  }

  .cmd-btn, #command-menu button, #command-grid button {
    font-size: 0.8em;
    padding: 7px 8px;
    min-height: 38px;
  }
}

/* ── Standard PC: 1025px – 1399px ── */
@media (min-width: 1025px) and (max-width: 1399px) {
  #side-panel {
    flex: 0 0 300px;
    width: 300px;
  }

  /* Monitor frame: remove CRT border on PC for cleaner look */
  #monitor-frame {
    border-width: 0;
    border-radius: 0;
  }

  .cmd-btn, #command-menu button {
    font-size: 0.88em;
    padding: 7px 10px;
    min-height: 34px;
  }
}

/* ── Touch devices ── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets everywhere */
  button, .cmd-btn, .scenario-item {
    min-height: 44px;
  }

  /* Remove hover transforms that don't make sense on touch */
  .scenario-item:hover {
    transform: none;
  }

  /* Smaller scroll thumb for narrow fingers */
  ::-webkit-scrollbar {
    width: 6px;
  }
}

/* ── Large PC: 1400px – 1919px ── */
@media (min-width: 1400px) and (max-width: 1919px) {
  #side-panel {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
  }

  #city-info, #general-info {
    font-size: 1.0em;
  }

  .cmd-btn {
    font-size: 0.9em;
    padding: 8px 14px;
  }
}

/* ── Ultrawide / 4K: >= 1920px ── */
@media (min-width: 1920px) {
  #side-panel {
    flex: 0 0 380px;
    width: 380px;
    max-width: 380px;
  }

  body {
    font-size: 16px;
  }

  #city-info, #general-info {
    font-size: 1.05em;
  }

  .cmd-btn {
    font-size: 0.95em;
    padding: 9px 16px;
    min-height: 36px;
  }

  #hud-strip {
    font-size: 0.85em;
    min-height: 32px;
    padding: 4px 10px;
  }

  #event-log-container {
    max-height: 260px;
  }
}

/* ═══════════════════════════════════════════════════
   PLAY SCREEN & SIDEBAR READABILITY IMPROVEMENTS
   All rules below are append-only additions.
═══════════════════════════════════════════════════ */

/* 1. City detail grid — cleaner key/value alignment */
#city-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    font-size: 0.82em;
    line-height: 1.6;
}
#city-details .stat-label { color: #778866; }
#city-details .stat-value { color: #ccddaa; font-variant-numeric: tabular-nums; }
#city-details .city-date {
    grid-column: 1 / -1;
    color: var(--dos-text);
    font-size: 0.86em;
    letter-spacing: 0.04em;
}
#city-details .city-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #314831;
    border-left: 4px solid var(--dos-highlight);
    background: linear-gradient(90deg, rgba(0, 36, 0, 0.72), rgba(0, 10, 0, 0.25));
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.08);
}
#city-details .city-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#city-details .city-name {
    color: var(--dos-highlight);
    font-size: 1.08em;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#city-details .city-substatus {
    color: #a7b894;
    font-size: 0.76em;
    letter-spacing: 0.03em;
}
#city-details .city-owner-badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #ddd;
    font-size: 0.82em;
    line-height: 1.35;
}
#city-details .owner-goguryeo { border-left-color: var(--color-goguryeo); }
#city-details .owner-baekje { border-left-color: var(--color-baekje); }
#city-details .owner-silla { border-left-color: var(--color-silla); }
#city-details .owner-gaya { border-left-color: var(--color-gaya); }
#city-details .owner-neutral {
    border-left-color: var(--capture-hint-accent);
    background: linear-gradient(90deg, rgba(44, 28, 4, 0.82), rgba(12, 8, 2, 0.35));
}
#city-details .owner-neutral .city-substatus {
    color: #ffd980;
}
#city-details .stat-value.stat-gold,
#city-details .stat-value.stat-rice {
    color: #ffe08a;
}
#city-details .stat-value.stat-public {
    color: #b9f5b1;
}
#city-details .stat-value.stat-defense,
#city-details .stat-value.stat-soldiers {
    color: #ffd0a8;
    font-weight: 700;
}
#city-details .fog-note {
    color: #888;
    font-size: 0.9em;
}

/* General detail grid */
#general-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    font-size: 0.82em;
    line-height: 1.6;
}
#general-details .stat-label { color: #778866; }
#general-details .stat-value { color: #ccddaa; }

/* 2. Improved HUD strip */

/* Faction name: prominent */
#hud-faction-name, .faction-name {
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #eeff88;
    border-bottom: 1px solid #334400;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

/* Year/month display */
#hud-date, .hud-date {
    font-size: 0.85em;
    color: #99aa66;
    margin-bottom: 4px;
}

/* Resource row */
#hud-resources, .hud-resources {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8em;
    color: #88aa44;
}
#hud-resources span, .hud-resources span {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* 3. Command buttons — clearer grouping */

/* Button group headers */
.cmd-group-label {
    font-size: 0.72em;
    color: #556633;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 8px 0 3px;
    padding-left: 2px;
}

/* Disabled button state */
.cmd-btn:disabled, .cmd-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.cmd-btn:disabled:hover {
    background: inherit;
    color: inherit;
    transform: none;
}

/* Active/selected button */
.cmd-btn.active {
    background: #223300;
    border-color: #88cc00;
    color: #ccff44;
    box-shadow: 0 0 6px rgba(136,204,0,0.3);
}

/* 4. Info panel section headers */

/* Section dividers between city-info and general-info */
.info-section {
    border-top: 1px solid #223300;
    padding-top: 8px;
    margin-top: 6px;
}
.info-section-title {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #556633;
    margin-bottom: 5px;
}

/* City name heading */
#city-info h3, #city-name-heading {
    color: #eeff88;
    font-size: 0.92em;
    font-weight: 700;
    margin: 0 0 5px;
    border-bottom: 1px solid #334400;
    padding-bottom: 3px;
}

/* General name heading */
#general-info h3, #general-name-heading {
    color: #88ddff;
    font-size: 0.92em;
    font-weight: 700;
    margin: 0 0 5px;
    border-bottom: 1px solid #224455;
    padding-bottom: 3px;
}

/* 5. Event log polish */

/* Log entry types */
#event-log p.log-event  { color: #aadd88; }
#event-log p.log-battle { color: #ffaa66; }
#event-log p.log-system { color: #8899aa; }
#event-log p.log-warn   { color: #ffcc44; }

/* Log separator line */
#event-log p.log-sep {
    color: #334400;
    border: none;
    text-align: center;
    letter-spacing: 0.2em;
    font-size: 0.7em;
}

/* Scrolled-to-bottom indicator */
#event-log::after {
    content: '';
    display: block;
    height: 2px;
}

/* 6. Scenario selection screen (modal/overlay) */

/* Scenario modal */
#scenario-select, .scenario-modal {
    max-width: 560px;
    margin: 0 auto;
}
.scenario-year-badge {
    display: inline-block;
    background: #1a3300;
    border: 1px solid #445500;
    color: #aacc44;
    font-size: 0.72em;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.scenario-faction-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.scenario-faction-tag {
    font-size: 0.68em;
    padding: 1px 6px;
    border-radius: 3px;
    opacity: 0.9;
}
.faction-tag-goguryeo { background: #440000; color: #ff8888; border: 1px solid #660000; }
.faction-tag-baekje   { background: #000044; color: #8888ff; border: 1px solid #000066; }
.faction-tag-silla    { background: #004400; color: #88ff88; border: 1px solid #006600; }
.faction-tag-gaya     { background: #443300; color: #ffcc88; border: 1px solid #665500; }

/* 7. Mobile sidebar toggle (for narrow screens) */
@media (max-width: 768px) {
    /* Collapsible sidebar sections on mobile */
    .info-section-title {
        cursor: pointer;
        user-select: none;
    }
    .info-section-title::after {
        content: ' ▾';
        font-size: 0.8em;
    }
    .info-section.collapsed .info-section-title::after {
        content: ' ▸';
    }
    .info-section.collapsed > *:not(.info-section-title) {
        display: none;
    }

    /* Larger touch targets for all interactive items */
    .cmd-btn, #battle-actions button {
        min-height: 44px;
        font-size: 0.88em;
    }
}

/* ═══════════════════════════════════════════════════
   BATTLE HUD & ACTION BUTTON IMPROVEMENTS
   Append-only additions — no existing rules modified.
═══════════════════════════════════════════════════ */

/* Battle action buttons — improved visibility */
#battle-actions button, .battle-btn {
    background: #0d1f0d;
    border: 1px solid #445522;
    color: #99cc66;
    font-family: 'Courier New', monospace;
    font-size: 0.82em;
    padding: 7px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-width: 75px;
}
#battle-actions button:hover, .battle-btn:hover {
    background: #1a3300;
    border-color: #88cc00;
    color: #ccff44;
    box-shadow: 0 0 6px rgba(136,204,0,0.25);
}
#battle-actions button:active, .battle-btn:active {
    background: #223300;
    transform: translateY(1px);
}
#battle-actions button.danger {
    border-color: #883300;
    color: #ff8844;
}
#battle-actions button.danger:hover {
    background: #331100;
    border-color: #cc4400;
    color: #ffaa66;
}

/* Battle screen layout */
#battle-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

/* Battle canvas border matches terrain */
#battle-canvas {
    border: 2px solid #334400;
    border-radius: 2px;
    display: block;
}

/* Battle result overlay when visible */
#battle-result-overlay.visible {
    display: flex !important;
}
#battle-result-text {
    font-size: 2.5em;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 20px currentColor;
    animation: pulse 0.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   PC RESPONSIVE FIXES
   Additive rules — no existing rules modified.
═══════════════════════════════════════════════════ */

/* Ensure battle screen fills viewport and uses flex column layout */
#battle-screen {
    width: 100vw;
    height: 100vh;
}

/* Battle canvas fills remaining flex space */
#battle-canvas {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Fix HUD strip overflow on small PC screens */
#hud-strip {
    flex-wrap: nowrap;
    min-height: 28px;
    height: auto;
}

/* Ensure info panels scroll on small screens */
#info-panel, #general-panel, #city-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════
   PC UI/UX DEEP FIX — RESPONSIVE LAYOUT OVERHAUL
   Targets: 1280×720, 1920×1080, 2560×1440
   All rules are additive; use specificity to override
   conflicting earlier declarations.
═══════════════════════════════════════════════════ */

/* ── Fix 1: Root viewport containers ── */
/* body already constrains to 100vw/100vh; monitor-frame
   and game-container inherit that correctly.
   Reinforce overflow hidden so nothing bleeds out. */
#monitor-frame {
    display: flex;
    flex-direction: row;   /* children: crt-overlay + game-container */
    overflow: hidden;
}

/* ── Fix 2: Game container — authoritative row layout ── */
/* #game-container is the true flex row: map-panel | side-panel.
   All screens that must cover it (battle, transition, overlays)
   use position:absolute inside it. */
#game-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative; /* anchor for absolute children */
}

/* ── Fix 3: Map panel — flex grow, no shrink ── */
#map-panel {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Map canvas fills the panel exactly */
#map-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Fix 4: Side panel — fixed width, full-height flex column ── */
#side-panel {
    flex: 0 0 300px;
    width: 300px;
    min-width: 220px;
    max-width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 20;
}

/* ── Fix 5: HUD strip — always visible, wraps on narrow panels ── */
#hud-strip {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 28px;
    height: auto;
    padding: 3px 6px;
    gap: 6px;
    overflow: visible;
}

/* ── Fix 6: Info panel — scrollable flex middle section ── */
#info-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

/* City info: doesn't grow, just fits content */
#city-info {
    flex-shrink: 0;
}

/* General info: scrolls if tall */
#general-info {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* General details box: remove hard max-height, let parent scroll */
#general-details {
    max-height: none;
    overflow-y: visible;
}

/* ── Fix 7: Command panel — never grows, sits at bottom ── */
#command-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 12px 12px;
}

/* Event log container: fixed height, scrollable interior */
#event-log-container {
    flex-shrink: 0;
    max-height: 180px;
    min-height: 80px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#event-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Fix 8: Battle screen — full-viewport overlay ── */
/* Battle screen sits as position:absolute inside #game-container
   (already established). Width/height must be 100% of that parent,
   NOT 100vw/100vh which ignores offset.
   Use 100% so it matches the container exactly at any resolution. */
#battle-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;  /* override earlier align-items:center */
    gap: 0;
    padding: 0;
    z-index: 1500;
    overflow: hidden;
}

#battle-screen.active {
    display: flex;
}

/* Battle canvas: fills remaining flex space, respects min-height */
#battle-canvas {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;          /* let flex control height */
    display: block;
    object-fit: contain;   /* keeps pixel art aspect ratio */
    object-position: center;
}

/* Battle actions: float over canvas bottom-right */
#battle-actions {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    z-index: 1510;
    max-width: 60vw;
    justify-content: flex-end;
}

#battle-screen.active #battle-actions {
    display: flex;
}

/* Battle info strip: above actions bar */
#battle-info-strip {
    position: absolute;
    bottom: 56px;
    left: 0;
    right: 0;
}

/* Battle result overlay: fills canvas */
#battle-result-overlay {
    position: absolute;
    inset: 0;
}

/* ── Fix 9: Floating popups always centered in viewport ── */
/* Selection window: already position:fixed in CSS (line 452).
   Reinforce against any inline style override. */
#selection-window {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(280px, 320px, 90vw) !important;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 3000;
}

/* Event popup and archive: already position:fixed in earlier rules.
   Add max-height and overflow for tall content. */
#event-popup {
    max-height: 85vh;
    overflow-y: auto;
}

#archive-popup {
    max-height: 85vh;
    overflow-y: auto;
}

/* History dict panel: reinforce flex column + scroll */
#history-dict-panel {
    max-height: 82vh;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

#history-dict-panel.visible {
    display: flex !important;
}

#history-dict-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: none; /* remove inline max-height; let flex govern */
}

/* ── Fix 10: Title and scenario screens — full overlay, scrollable ── */
#title-screen,
#scenario-select-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  /* don't center-crop on small heights */
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 64px);
    gap: 16px;
    z-index: 2000;
    box-sizing: border-box;
}

/* Override inline display:flex on title-screen; .active class controls visibility */
#title-screen.active,
#scenario-select-screen.active {
    display: flex;
}

/* Scenario list: constrain and scroll on short viewports */
#scenario-list {
    width: 100%;
    max-width: 640px;
    overflow-y: auto;
    max-height: 55vh;
}

/* Faction select panel: full-width, parent container handles scroll */
#faction-select-panel {
    width: min(860px, 100%);
    overflow-y: visible;
}

/* ── Fix 11: Transition overlay ── */
#transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2500;
}

/* ── Fix 12: Large screen side-panel widths ── */
@media (min-width: 1400px) {
    #side-panel {
        flex: 0 0 340px;
        width: 340px;
        max-width: 340px;
    }
    body { font-size: 16px; }
}

@media (min-width: 1920px) {
    #side-panel {
        flex: 0 0 380px;
        width: 380px;
        max-width: 380px;
    }
    body { font-size: 17px; }

    /* Taller event log on large screens */
    #event-log-container {
        max-height: 260px;
    }
}

/* ── Fix 13: Prevent inline style width:100vw on battle-screen from
   escaping absolute parent (already reset above via width:100%) ── */

/* ── Fix 14: Dialogue box — keep within map-panel bounds ── */
.dialogue-box {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 600px);
    max-width: calc(100% - 32px);
}

/* ── Fix 15: City tooltip stays within map bounds ── */
#city-tooltip {
    position: absolute;
    max-width: min(200px, 40vw);
}

/* ── End PC UI/UX Deep Fix ── */

/* ═══════════════════════════════════════════════════
   PC LAYOUT FINAL PASS — consolidated authoritative
   rules that supersede any earlier conflicting values.
   Tested against 1280×720, 1920×1080, 2560×1440.
═══════════════════════════════════════════════════ */

/* 1. Side panel — three-section flex column:
      [hud-strip (fixed)] | [info-panel (flex-grow)] | [command-panel (fixed)]
   The side panel itself must not allow its children to overflow it. */
#side-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Width already set by breakpoint rules above */
}

/* 2. HUD strip — single row, wraps only if absolutely necessary */
#hud-strip {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    min-height: 30px;
}

/* On screens narrower than the full hud-strip content, allow one wrap */
@media (max-width: 1280px) {
    #hud-strip {
        flex-wrap: wrap;
        height: auto;
        min-height: 30px;
    }
}

/* 3. Info panel — fills all remaining vertical space and scrolls */
#info-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 4. Command panel — fixed at bottom, scrolls internally if needed */
#command-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent the command panel from being too tall on short screens */
    max-height: 45vh;
}

/* Event log: adaptive height — shorter on compact screens */
#event-log-container {
    flex: 1 1 auto;
    min-height: 60px;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-height: 900px) {
    #event-log-container {
        max-height: 260px;
    }
}

@media (max-height: 720px) {
    #command-panel {
        max-height: 40vh;
        padding: 6px 10px 10px;
    }
    #event-log-container {
        max-height: 120px;
        min-height: 50px;
    }
    /* Compact buttons on 720p or shorter */
    #command-menu .cmd-btn {
        min-height: 26px;
        padding: 3px 6px;
        font-size: 0.8em;
    }
    #command-menu {
        gap: 4px;
        margin-bottom: 6px;
    }
}

/* 5. Scenario select screen — scrollable on any PC height */
#scenario-select-screen {
    overflow-y: auto;
    overflow-x: hidden;
}

#scenario-list {
    max-height: none;  /* let the parent scroll, not the list itself */
    overflow-y: visible;
}

/* 6. Portrait canvas (dialogue box) — crisp pixel art */
#portrait-canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* 7. Ensure all overlay windows (popups) capture clicks
   regardless of parent pointer-events setting */
.rtk-window,
#event-popup,
#archive-popup,
#history-dict-panel,
#selection-window,
#error-popup {
    pointer-events: auto;
}

/* 8. Fix: city tooltip must not extend outside #map-panel.
   Clamp is already on the element; add overflow guard to map-panel. */
#map-panel {
    overflow: hidden;
}

/* 9. Game container: authoritative final values */
#game-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 10. Monitor frame: authoritative final values
    pointer-events:none on the frame lets the CRT overlay sit above
    without blocking clicks. Children that need clicks set pointer-events:auto. */
#monitor-frame {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    pointer-events: none;
}

/* ── End PC Layout Final Pass ── */

/* ═══════════════════════════════════════════════════
   PC RESPONSIVE OVERHAUL — 반응형 개선
   Targets: layout breaks on 1024px+ screens,
   canvas quality, side panel sizing, popup positioning
═══════════════════════════════════════════════════ */

/* 1. Canvas quality: high-quality rendering on PC with brightness/contrast boost */
@media (min-width: 1025px) {
    #map-canvas {
        image-rendering: auto;
        image-rendering: high-quality;
        filter: drop-shadow(0 0 4px rgba(0, 220, 90, 0.40))
                drop-shadow(0 0 1px rgba(0, 130, 50, 0.5))
                brightness(1.12) contrast(1.10) saturate(1.14);
    }
}

/* 2. PC side panel: taller event log, bigger font hierarchy */
@media (min-width: 1025px) {
    #side-panel {
        flex: 0 0 340px;
        width: 340px;
        min-width: 280px;
    }

    #event-log-container {
        max-height: 240px;
        min-height: 130px;
    }

    #info-panel {
        padding: 12px 14px;
        gap: 10px;
        font-size: 0.92em;
    }

    #city-details, #general-details {
        font-size: 0.88em;
    }

    #city-info h3, #general-info h3 {
        font-size: 1.0em;
        margin: 2px 0 6px;
    }

    #hud-strip {
        min-height: 32px;
        padding: 5px 10px;
        gap: 8px;
        font-size: 0.90em;
    }

    #command-menu {
        overflow-y: auto;
        max-height: 52vh;
    }

    .cmd-btn, #command-menu button {
        font-size: 0.90em;
        min-height: 36px;
        padding: 7px 10px;
    }
}

/* 3. Large PC (1400px+): wider side panel, larger hit areas */
@media (min-width: 1400px) {
    #side-panel {
        flex: 0 0 390px;
        width: 390px;
    }

    #event-log-container {
        max-height: 280px;
        min-height: 150px;
    }

    .cmd-btn, #command-menu button {
        font-size: 0.96em;
        padding: 9px 14px;
        min-height: 38px;
    }

    #hud-strip {
        font-size: 0.95em;
    }

    #info-panel {
        font-size: 0.96em;
    }
}

/* 3b. Ultra-wide PC (1920px+): constrain game to comfortable width */
@media (min-width: 1920px) {
    #game-container {
        max-width: 1800px;
        margin: 0 auto;
    }

    #side-panel {
        flex: 0 0 440px;
        width: 440px;
    }

    .cmd-btn, #command-menu button {
        font-size: 1.0em;
        padding: 10px 14px;
        min-height: 40px;
    }

    #info-panel {
        font-size: 1.0em;
        padding: 14px 16px;
    }
}

/* 4. Scenario select: horizontal split on wide PC screens */
@media (min-width: 1200px) {
    #scenario-select-screen {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        padding: clamp(20px, 3vw, 48px) clamp(24px, 4vw, 80px);
        gap: 24px;
        overflow-y: auto;
    }

    /* When faction picker is active, revert to column so panel centers properly */
    #scenario-select-screen.faction-picker-active {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #scenario-list {
        max-width: 680px;
        flex: 1 1 520px;
    }

    .scenario-item {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
    }

    #faction-select-panel {
        flex: none;
        width: min(860px, 100%);
        max-width: min(860px, 100%);
        align-self: center;
    }
}

/* 5. Selection window: constrained to map-panel viewport */
#selection-window {
    max-width: min(340px, 85%);
    max-height: 70vh;
    overflow-y: auto;
}

/* 6. Command menu: 2-column grid on PC for compact layout */
@media (min-width: 1025px) {
    #command-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    /* Turn-end button spans full width */
    #command-menu button[data-cmd="0"],
    #command-menu .cmd-separator + button {
        grid-column: 1 / -1;
    }
    .cmd-separator {
        grid-column: 1 / -1;
        height: 1px;
        background: rgba(100, 150, 60, 0.3);
        margin: 2px 0;
    }
}

/* 7. Dialogue / HUD tooltips: better positioning on PC */
@media (min-width: 1025px) {
    .dialogue-box {
        width: 70%;
        max-width: 520px;
    }
}

/* 8. Battle screen: prevent layout overflow on wide screens */
@media (min-width: 1025px) {
    #battle-canvas {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }

    #battle-actions {
        right: 20px;
        bottom: 20px;
    }
}

/* 9. HUD mandate bar: visible width on PC */
#hud-mandate-bar-bg {
    min-width: 40px;
    max-width: 100px;
}

/* HUD weather: shrink gracefully on narrow panels */
#hud-weather {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* 10. City tooltip: cap width so it stays on-screen */
#city-tooltip {
    max-width: 220px;
    word-break: keep-all;
}

/* 11. Scrollbar styling for PC readability */
@media (min-width: 1025px) {
    #info-panel::-webkit-scrollbar,
    #general-info::-webkit-scrollbar,
    #event-log::-webkit-scrollbar {
        width: 5px;
    }
    #info-panel::-webkit-scrollbar-track,
    #general-info::-webkit-scrollbar-track,
    #event-log::-webkit-scrollbar-track {
        background: #000;
    }
    #info-panel::-webkit-scrollbar-thumb,
    #general-info::-webkit-scrollbar-thumb,
    #event-log::-webkit-scrollbar-thumb {
        background: #224400;
        border-radius: 2px;
    }
}

/* ── End PC Responsive Overhaul ── */

/* ═══════════════════════════════════════════════════
   PC LAYOUT DEEP FIX — 14차 감사 (§86)
   Targets: side-panel 3-zone layout, command-menu
   overflow, hud-strip nowrap, info-panel growth
═══════════════════════════════════════════════════ */

/* 1. Side-panel: authoritative 3-zone layout
      zone 1: hud-strip  — fixed height, never shrinks
      zone 2: info-panel — fills remaining space, scrolls
      zone 3: command-panel — fixed at bottom, capped height */
#side-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Width is controlled by breakpoint rules above */
}

/* 2. hud-strip: always single row, never wraps on PC */
@media (min-width: 769px) {
    #hud-strip {
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        overflow: hidden;
        white-space: nowrap;
        min-height: 30px;
        height: auto;
    }
}

/* 3. info-panel: takes all remaining vertical space */
#info-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* portrait-area (if present): fixed height, never grows */
#portrait-area, .portrait-area {
    flex: 0 0 auto;
    min-height: 0;
}

/* general-info: scrollable inside info-panel */
#general-info {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
#general-details {
    max-height: none;
    overflow-y: visible;
}

/* 4. command-panel: fixed bottom zone, never grows beyond its content */
#command-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Cap height so it can't push info-panel out on short screens */
    max-height: 50vh;
    min-height: 0;
}

/* 5. command-menu: scrollable if buttons overflow panel height */
#command-menu {
    overflow-y: auto;
    max-height: 48vh; /* never taller than almost half the viewport */
    flex-shrink: 0;
}

/* Short screens (720p and below): tighter caps */
@media (max-height: 720px) {
    #command-panel {
        max-height: 42vh;
    }
    #command-menu {
        max-height: 38vh;
        gap: 3px;
        margin-bottom: 4px;
    }
    #command-menu .cmd-btn {
        min-height: 24px;
        padding: 2px 5px;
        font-size: 0.78em;
    }
}

/* 6. event-log-container: adaptive bottom slot inside command-panel */
#event-log-container {
    flex: 1 1 auto;
    min-height: 50px;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (min-height: 900px) {
    #event-log-container { max-height: 260px; }
}
@media (max-height: 720px) {
    #event-log-container { max-height: 120px; min-height: 40px; }
}

/* 7. event-log itself: scrollable interior */
#event-log {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 8. .cmd-btn: always single line (nowrap) */
.cmd-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── End PC Layout Deep Fix §86 ── */

/* ═══════════════════════════════════════════════════
   PC UI/UX ADDITIONAL FIXES
   Targets: selection-window centering, portrait-area
   sizing, popup z-index, event-log scroll
═══════════════════════════════════════════════════ */

/* 2a. #selection-window: PC 중앙 정렬 및 크기 최적화 */
@media (min-width: 1025px) {
    #selection-window {
        max-width: 400px;
        max-height: 75vh;
        font-size: 0.95em;
    }
}

/* 2b. .portrait-area: PC에서 최소 높이 보장 */
@media (min-width: 1025px) {
    .portrait-area {
        min-height: 120px;
    }
}

/* 2c. 팝업 z-index 및 위치 — event-popup / archive-popup / history-dict-panel
   이미 position:fixed + top:50% + left:50% + translate(-50%,-50%)가 적용되어 있음.
   여기서는 PC 화면에서 최대 너비와 overflow를 추가 보정한다. */
@media (min-width: 1025px) {
    #event-popup {
        width: min(560px, 78vw);
        max-height: 82vh;
        overflow-y: auto;
        z-index: 12000;
    }
    #archive-popup {
        width: min(680px, 82vw);
        max-height: 82vh;
        overflow-y: auto;
        z-index: 12000;
    }
    #history-dict-panel {
        width: min(700px, 86vw);
        max-height: 80vh;
        z-index: 12000;
    }
}

/* 2d. #event-log PC 스크롤 보정
   — flex:1 + min-height:0 + overflow-y:auto 조합이 부모 높이에 따라
     스크롤바가 올바르게 나타나도록 보장한다. */
@media (min-width: 1025px) {
    #event-log {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 가독성을 위해 PC에서 약간 더 큰 폰트 */
        font-size: 0.86em;
    }
}

/* ── End PC UI/UX Additional Fixes ── */

/* ── DOS 테마 스크롤바 스타일링 ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #0a0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0f0; }

/* ═══════════════════════════════════════════════════
   PC LAYOUT FINAL AUTHORITATIVE — 2026 패스
   게임 컨테이너 구조: #game-container (row)
     ├─ #map-panel (flex:1, overflow:hidden)
     │    └─ #map-canvas (absolute fill)
     └─ #side-panel (fixed width)
          ├─ #hud-strip (flex:0 0 auto, sticky top)
          ├─ #info-panel (flex:1, scroll)
          └─ #command-panel (flex:0 0 auto, bottom)
═══════════════════════════════════════════════════ */

/* ── PC 기본 (1025px+): 사이드 패널 3구역 레이아웃 ── */
@media (min-width: 1025px) {
    /* 게임 컨테이너: 항상 row 방향 */
    #game-container {
        flex-direction: row !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* 지도 패널: 남은 공간 채우기 */
    #map-panel {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        position: relative;
        overflow: hidden;
    }

    /* 캔버스: 패널 전체 채우기 */
    #map-canvas {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 사이드 패널: 고정폭, 독립 스크롤 불허 (자식들이 스크롤) */
    #side-panel {
        flex: 0 0 340px !important;
        width: 340px !important;
        min-width: 280px !important;
        max-width: 360px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* HUD 스트립: 항상 상단 고정, 수축 금지 */
    #hud-strip {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        position: sticky;
        top: 0;
        z-index: 10;
        min-height: 32px;
        overflow: hidden;
        flex-wrap: nowrap !important;
    }

    /* 정보 패널: 남은 수직 공간 차지, 독립 스크롤 */
    #info-panel {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* 커맨드 패널: 하단 고정 */
    #command-panel {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        max-height: 48vh;
    }

    /* 커맨드 메뉴: 2열 그리드 */
    #command-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }

    /* 커맨드 버튼: PC에서 더 큰 크기 */
    #command-menu .cmd-btn,
    .cmd-btn {
        min-height: 36px !important;
        font-size: 0.88em !important;
        padding: 6px 10px !important;
    }
}

/* ── Large PC (1400px+) ── */
@media (min-width: 1400px) {
    #side-panel {
        flex: 0 0 380px !important;
        width: 380px !important;
        max-width: 380px !important;
    }
    #command-menu .cmd-btn, .cmd-btn {
        min-height: 38px !important;
        font-size: 0.92em !important;
    }
}

/* ── Ultrawide (1920px+) ── */
@media (min-width: 1920px) {
    #game-container {
        max-width: 1800px;
        margin: 0 auto;
    }
    #side-panel {
        flex: 0 0 420px !important;
        width: 420px !important;
        max-width: 420px !important;
    }
    #command-menu .cmd-btn, .cmd-btn {
        min-height: 40px !important;
        font-size: 0.96em !important;
    }
}

/* ── End PC Layout Final Authoritative 2026 ── */

/* ═══════════════════════════════════════════════════
   PC VISUAL POLISH — 2026 화질 개선 패스
   cmd-btn 가독성, 사이드 패널 배경, 상태창 강화
═══════════════════════════════════════════════════ */

/* Command buttons: 더 선명한 테두리 + 호버 글로우 */
@media (min-width: 769px) {
    .cmd-btn {
        border: 1px solid #1a4a1a;
        background: linear-gradient(180deg, #051205 0%, #020802 100%);
        color: #0f0;
        letter-spacing: 0.02em;
        transition: background 0.12s, box-shadow 0.12s, color 0.12s;
    }
    .cmd-btn:hover {
        background: linear-gradient(180deg, #0a2a0a 0%, #051505 100%) !important;
        box-shadow: 0 0 8px rgba(0, 255, 0, 0.35), inset 0 0 4px rgba(0,200,0,0.15);
        color: #4eff4e;
        border-color: #2a6a2a;
    }
    .cmd-btn:active {
        background: #0f400f !important;
        box-shadow: none;
    }
}

/* 정보 패널 내 섹션 구분 강화 */
@media (min-width: 1025px) {
    #city-details, #general-details {
        border-left: 2px solid #1a4a1a;
        padding-left: 8px;
        margin-bottom: 6px;
    }
    #hud-strip {
        background: linear-gradient(180deg, #030d03 0%, #010601 100%);
        border-bottom: 1px solid #1a3a1a;
        padding: 4px 8px;
    }
    /* 선택 창 모달: 더 선명한 배경 */
    #selection-window {
        background: linear-gradient(160deg, #050e05 0%, #020802 100%);
        border: 1px solid #2a5a2a;
        box-shadow: 0 0 20px rgba(0,180,0,0.25), inset 0 0 10px rgba(0,40,0,0.5);
    }
}

/* ── End PC Visual Polish ── */

/* ═══════════════════════════════════════════════════
   PC ULTIMATE FIX §95 — 최종 권위 레이아웃
   모든 이전 충돌 규칙 해소. 이 섹션이 최우선 적용.
   Tested: 1280×720 / 1440×900 / 1920×1080 / 2560×1440
═══════════════════════════════════════════════════ */

/* ── A. Side-panel 3-zone authoritative layout ── */
#side-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* ── B. HUD strip: single line, clamp text size ── */
#hud-strip {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
    min-height: 28px !important;
    font-size: clamp(0.70em, 1.8vw, 0.88em) !important;
    padding: 4px 8px !important;
    gap: clamp(4px, 0.8vw, 10px) !important;
    white-space: nowrap;
}
/* HUD children that can shrink get text-overflow ellipsis */
#hud-strip > * {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* faction label stays coloured and visible */
#hud-faction {
    flex-shrink: 0 !important;
    max-width: 30%;
}
/* mandate bar container: fixed width */
#hud-mandate-wrap {
    flex-shrink: 0 !important;
}

/* ── C. Info panel: fills remaining height, scrolls ── */
#info-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ── D. Command panel: sits at bottom, never overflows ── */
#command-panel {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 6px 10px 8px !important;
    max-height: 48vh !important;
    min-height: 0 !important;
}

/* ── E. Command menu: 2-column grid on PC ── */
@media (min-width: 1025px) {
    #command-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        overflow-y: auto !important;
        max-height: 42vh !important;
    }
    #command-menu button[data-cmd="0"],
    #command-menu .cmd-separator {
        grid-column: 1 / -1 !important;
    }
}
/* On 720p height, tighter buttons */
@media (min-width: 1025px) and (max-height: 720px) {
    #command-menu {
        max-height: 36vh !important;
        gap: 3px !important;
    }
    #command-menu .cmd-btn {
        min-height: 28px !important;
        padding: 4px 6px !important;
        font-size: 0.80em !important;
    }
}

/* ── F. Event log: adaptive to screen height ── */
#event-log-container {
    flex: 1 1 auto !important;
    min-height: 60px !important;
    max-height: clamp(100px, 22vh, 240px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
#event-log {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
@media (min-height: 900px) {
    #event-log-container { max-height: 280px !important; }
}

/* ── G. Visual quality: map canvas enhancement ── */
@media (min-width: 769px) {
    #map-canvas {
        filter:
            drop-shadow(0 0 6px rgba(0, 200, 70, 0.45))
            drop-shadow(0 0 2px rgba(0, 100, 30, 0.6))
            brightness(1.13) contrast(1.11) saturate(1.16) !important;
    }
}

/* ── H. Info section headings: cleaner ── */
#info-panel h3 {
    margin: 0 0 6px !important;
    font-size: clamp(0.88em, 1.5vw, 1.05em);
    border-bottom: 1px solid #1a4a1a;
    padding-bottom: 3px;
    letter-spacing: 0.04em;
}
#info-panel h4 {
    margin: 4px 0 2px !important;
    font-size: clamp(0.80em, 1.3vw, 0.95em);
    color: #88cc44;
}

/* ── I. Cmd-btn unified style ── */
.cmd-btn {
    font-family: 'DungGeunMo', 'Courier New', monospace !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 2px;
}
@media (min-width: 769px) {
    .cmd-btn {
        min-height: 34px !important;
        padding: 6px 10px !important;
        font-size: clamp(0.80em, 1.4vw, 0.92em) !important;
    }
}
@media (min-width: 1400px) {
    .cmd-btn {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: clamp(0.85em, 1.2vw, 0.96em) !important;
    }
}

/* ── J. Side panel width by breakpoint (consolidated) ── */
@media (min-width: 769px) and (max-width: 1024px) {
    #side-panel { flex: 0 0 280px !important; width: 280px !important; }
}
@media (min-width: 1025px) and (max-width: 1399px) {
    #side-panel { flex: 0 0 330px !important; width: 330px !important; }
}
@media (min-width: 1400px) and (max-width: 1919px) {
    #side-panel { flex: 0 0 380px !important; width: 380px !important; }
}
@media (min-width: 1920px) {
    #side-panel { flex: 0 0 420px !important; width: 420px !important; }
    #game-container { max-width: 1840px !important; margin: 0 auto !important; }
}

/* ── K. Selection window: always centred in viewport ── */
#selection-window {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(260px, 310px, 88vw) !important;
    max-height: 78vh !important;
    overflow-y: auto !important;
    z-index: 5000 !important;
}

/* ── L. Scenario select: responsive for PC ── */
@media (min-width: 1200px) {
    #scenario-list {
        max-height: 65vh !important;
        overflow-y: auto !important;
    }
}

/* ── M. Subtle panel texture enhancement ── */
@media (min-width: 769px) {
    #side-panel {
        background: linear-gradient(180deg,
            #00001a 0%,
            #000018 60%,
            #00001e 100%) !important;
        border-left: 4px double #334433 !important;
    }
    #command-panel {
        background: rgba(0, 5, 0, 0.6);
        border-top: 1px solid #1a3a1a;
    }
    #info-panel {
        background: rgba(0, 4, 0, 0.4);
    }
    #hud-strip {
        background: linear-gradient(180deg, #020d02 0%, #010801 100%) !important;
        border-bottom: 1px solid #1a3a1a !important;
    }
}

/* ── N. Battle screen: full-viewport, proper stacking ── */
#battle-screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1500 !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#battle-screen.active {
    display: flex !important;
}
#battle-canvas {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* ── O. Portrait area in info-panel ── */
#portrait-area, .portrait-area {
    flex: 0 0 auto !important;
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

/* ── End PC Ultimate Fix §95 ── */

/* Save UI & Tutorial & Help - RFC 29, 30, 95 */
#save-popup .save-slot-item {
    border: 2px solid #555;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    transition: all 0.2s;
}

#save-popup .save-slot-item:hover {
    border-color: #ffcc00;
    background: rgba(255,204,0,0.1);
}

#save-popup .slot-number {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffcc00;
    min-width: 30px;
}

#save-popup .slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85em;
}

#save-popup .slot-actions {
    display: flex;
    gap: 6px;
}

#save-popup .slot-faction { font-weight: bold; }
#save-popup .slot-date { color: #aaa; font-size: 0.9em; }
#save-popup .slot-timestamp { color: #666; font-size: 0.75em; }

#tutorial-highlight-frame {
    animation: tut-pulse 1.4s ease-in-out infinite;
}

@keyframes tut-pulse {
    0%, 100% {
        box-shadow: 0 0 12px #ffff00, 0 0 24px rgba(255,255,0,0.4);
        border-color: #ffff00;
    }
    50% {
        box-shadow: 0 0 22px #ffff00, 0 0 44px rgba(255,255,0,0.65);
        border-color: #ffffff;
    }
}

#tutorial-skip-btn:hover,
#tutorial-skip-btn:focus-visible {
    opacity: 1 !important;
    border-color: #888;
    color: #cccccc;
    outline: 2px solid #888;
    outline-offset: 2px;
}

#tutorial-next-btn:focus-visible {
    outline: 2px solid #ffcc00;
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(255,204,0,0.5);
}

#ctx-help-popup table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}

#ctx-help-popup table th {
    background: #001a00;
    color: #ffcc00;
    padding: 4px 10px;
    border: 1px solid #333;
    text-align: center;
}

#ctx-help-popup table td {
    padding: 3px 10px;
    border: 1px solid #222;
    text-align: center;
    color: #cccccc;
}

@media (prefers-reduced-motion: reduce) {
    #tutorial-highlight-frame { animation: none; }
}

#help-icon-btn {
    transition: background 0.15s, box-shadow 0.15s;
    background: #002200;
    color: #0f0;
    border: 2px solid #0f0;
    cursor: pointer;
}

#help-icon-btn:hover,
#help-icon-btn:focus-visible {
    background: #003300;
    box-shadow: 0 0 8px #00ff00;
    outline: 2px solid #00ff00;
    outline-offset: 2px;
}
/* RFC 14: Title Menu Highlighting */
.menu-option.active-option {
    background-color: #333;
    color: #ffcc00;
    border: 1px solid #ffcc00;
    transform: scale(1.05);
}


/* ── Release hotfix: readable stationed-general cards ──
   Earlier grid rules for #general-details treated each generated card as a
   grid cell, which could squeeze the roster into a nearly blank two-column
   layout. The general roster is card/list content, so force a vertical flow. */
#general-details {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}
#general-details .general-card {
    display: block !important;
    border-top: 1px solid #253825;
    margin-top: 7px;
    padding-top: 6px;
    padding-bottom: 4px;
    min-width: 0;
    line-height: 1.45;
}
#general-details .general-card:first-of-type {
    margin-top: 6px;
}
#general-details .general-card img {
    flex: 0 0 auto;
}

/* ── Release hotfix v2: compact high-contrast general roster ── */
#general-details .general-card {
    background: linear-gradient(180deg, rgba(8, 24, 8, 0.96), rgba(3, 12, 3, 0.96));
    border: 1px solid #285428;
    border-left: 3px solid #6fbf4a;
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(80, 180, 80, 0.10);
    color: #dff5cf !important;
    font-size: 0.86rem;
}
#general-details .general-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0;
}
#general-details .general-card-title {
    display: flex !important;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    color: #e7ffd7;
}
#general-details .general-name {
    font-weight: 800;
    font-size: 1.02em;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
}
#general-details .unit-icon,
#general-details .trait-label {
    font-size: 0.84em;
    white-space: nowrap;
}
#general-details .general-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin: 5px 0 4px;
    color: #ffd86a;
    font-size: 0.84em;
}
#general-details .general-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 6px;
    color: #cde6bd;
    font-size: 0.82em;
}
@media (max-width: 1200px) {
    #general-details .general-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── v1.0.1 readability hotfix: authoritative button contrast ── */
button,
.cmd-btn,
#command-menu .cmd-btn,
#command-grid button,
.command-buttons button,
#battle-actions button,
.hist-tab-btn {
    background: linear-gradient(180deg, #143014 0%, #071407 100%) !important;
    color: var(--readable-command-text) !important;
    border: 2px solid var(--readable-command-border) !important;
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(120, 255, 120, 0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 6px rgba(0,0,0,0.75) !important;
}
button:hover:not(:disabled),
.cmd-btn:hover:not(:disabled),
#command-menu .cmd-btn:hover:not(:disabled),
#battle-actions button:hover:not(:disabled) {
    background: linear-gradient(180deg, #245824 0%, #102b10 100%) !important;
    color: #ffffff !important;
    border-color: #ffdd66 !important;
    text-shadow: 0 0 5px rgba(255, 255, 200, 0.75), 0 1px 2px #000 !important;
}
.cmd-btn.cmd-btn-utility,
#command-menu .cmd-btn.cmd-btn-utility {
    background: linear-gradient(180deg, #f3f3d8 0%, #c9c9a8 100%) !important;
    color: var(--readable-utility-text) !important;
    border-color: #fff4a0 !important;
    text-shadow: none !important;
}
.cmd-btn:disabled,
.cmd-btn[disabled],
button:disabled,
button[disabled],
#command-menu .cmd-btn:disabled,
#battle-actions button:disabled {
    opacity: 0.72 !important;
    background: linear-gradient(180deg, #2b2f2b 0%, #171a17 100%) !important;
    color: #c8d0c0 !important;
    border-color: #687068 !important;
    text-shadow: 0 1px 2px #000 !important;
}
#clear-log-btn {
    background: #101810 !important;
    color: var(--readable-log-text) !important;
    border: 1px solid #8a8a66 !important;
    padding: 2px 6px !important;
}
#education-mode-badge {
    background: rgba(20, 24, 12, 0.92) !important;
    color: #f0f0c8 !important;
    border-color: #b8b86a !important;
}
#education-mode-badge.active {
    color: #ffe66d !important;
    border-color: #ffe66d !important;
}
.selection-item {
    background: rgba(10, 24, 10, 0.92) !important;
    color: #eaffd6 !important;
    border-left-color: #7fd46a !important;
}
.selection-item:hover,
.selection-item.selected {
    background: rgba(40, 80, 25, 0.96) !important;
    color: #ffffff !important;
    border-left-color: #ffdd66 !important;
}


/* ═══════════════════════════════════════════════════
   Responsive UX Concept Pass — PC / Tablet / Mobile
   Goal: larger readable PC scale, balanced tablet split, map-first mobile.
═══════════════════════════════════════════════════ */
:root {
    --ux-font-pc: 18px;
    --ux-font-tablet: 16px;
    --ux-font-mobile: 15px;
    --ux-panel-pc: clamp(400px, 24vw, 480px);
    --ux-panel-tablet: clamp(300px, 34vw, 360px);
}

.capture-hint {
    margin-top: 8px;
    padding: 9px 10px 10px;
    border: 1px solid #7a5a22;
    border-left: 4px solid var(--capture-hint-accent);
    border-radius: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--capture-hint-bg-top) 92%, transparent), color-mix(in srgb, var(--capture-hint-bg-bottom) 94%, transparent));
    color: #ffe7a0;
    line-height: 1.55;
    font-size: 0.92em;
}
.capture-hint b {
    display: block;
    color: #fff06a;
    margin-bottom: 5px;
}
.capture-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    counter-reset: capture-step;
}
.capture-steps li {
    counter-increment: capture-step;
    padding: 3px 5px;
    border: 1px solid rgba(255, 204, 85, 0.28);
    background: rgba(0, 0, 0, 0.24);
    color: #ffe9af;
    font-size: 0.9em;
}
.capture-steps li::before {
    content: counter(capture-step) ". ";
    color: var(--capture-hint-accent);
    font-weight: 700;
}
.capture-steps li:last-child {
    grid-column: 1 / -1;
    border-color: rgba(255, 240, 106, 0.55);
    color: #fff7c4;
}
.capture-hint span,
.capture-militia-note { color: #e7d19a; }

@media (min-width: 1200px) {
    body { font-size: var(--ux-font-pc) !important; }
    #game-container {
        max-width: min(100vw, 2048px) !important;
        margin: 0 auto !important;
    }
    #side-panel {
        flex: 0 0 var(--ux-panel-pc) !important;
        width: var(--ux-panel-pc) !important;
        max-width: 480px !important;
    }
    #info-panel {
        padding: 14px 16px !important;
        gap: 10px !important;
        font-size: 1.04em !important;
    }
    #city-details, #general-details {
        font-size: 1.0em !important;
        line-height: 1.5 !important;
    }
    #city-info h3, #general-info h3, #info-panel h3 {
        font-size: 1.08em !important;
    }
    #command-menu .cmd-btn,
    .cmd-btn {
        min-height: 42px !important;
        padding: 9px 13px !important;
        font-size: 1.0em !important;
        line-height: 1.25 !important;
    }
    #event-log {
        font-size: 0.95em !important;
        line-height: 1.45 !important;
    }
    #education-mode-badge {
        right: calc(var(--ux-panel-pc) + 12px) !important;
        font-size: 14px !important;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    body { font-size: var(--ux-font-tablet) !important; }
    #game-container { flex-direction: row !important; }
    #side-panel {
        flex: 0 0 var(--ux-panel-tablet) !important;
        width: var(--ux-panel-tablet) !important;
        max-width: 360px !important;
    }
    #command-menu {
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }
    #command-menu .cmd-btn,
    .cmd-btn {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: 0.94em !important;
    }
    #info-panel { padding: 10px 12px !important; }
    #education-mode-badge {
        right: calc(var(--ux-panel-tablet) + 10px) !important;
    }
}

@media (max-width: 768px) {
    body { font-size: var(--ux-font-mobile) !important; }
    #game-container {
        flex-direction: column !important;
    }
    #map-panel {
        flex: 1 1 56vh !important;
        min-height: 46vh !important;
    }
    #side-panel {
        flex: 0 0 44vh !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-left: 0 !important;
        border-top: 3px double #334433 !important;
    }
    #info-panel {
        padding: 8px 10px !important;
        font-size: 0.94em !important;
        overflow-y: auto !important;
        min-height: 120px !important;
    }
    #command-panel {
        max-height: 24vh !important;
        padding: 6px 10px 8px !important;
        overflow-y: auto !important;
    }
    #event-log-container {
        max-height: 58px !important;
    }
    .context-action-card {
        margin-bottom: 6px !important;
        padding: 6px 8px !important;
        font-size: 0.8em !important;
    }
    #command-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }
    #command-menu .cmd-btn,
    .cmd-btn {
        min-height: 38px !important;
        padding: 7px 8px !important;
        font-size: 0.92em !important;
    }
    #education-mode-badge {
        right: 8px !important;
        top: 28px !important;
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
    .capture-hint {
        font-size: 0.88em;
        line-height: 1.45;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE BATTLE TOUCH ERGONOMICS (v1.0.4)
   Battle tactical panel command buttons + map readability.
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Tactical panel: never overflow the small viewport, scroll if needed */
    #battle-tactical-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* 48px tap targets, bigger label + bigger emoji for visibility */
    #battle-tactical-panel .cmd-btn,
    #battle-tactical-panel .battle-cmd-btn,
    #btn-cmd-formation,
    #battle-skill-btn,
    #battle-repair-btn {
        min-height: 48px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        padding: 8px 4px !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #battle-tactical-panel .battle-cmd-btn div:first-child {
        font-size: 1.55em !important;
    }
    #battle-recruit-selection .recruit-unit-btn {
        min-height: 44px !important;
        font-size: 12px !important;
    }
    /* 명령 그리드 간격을 살짝 늘려 손가락 사이 누름 방지 */
    #battle-tactical-panel > div:first-child {
        gap: 8px !important;
    }
    /* Map canvas stays crisp and fills available width on mobile */
    #battle-canvas,
    #map-canvas {
        max-width: 100% !important;
        touch-action: manipulation;
    }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE GLOBAL STANDARDS (v1.0.5)
   - safe-area-inset 적용 (노치/홀펀치/홈인디케이터)
   - dynamic viewport units (100dvh) 사용
   - iOS Safari 입력 줌 방지 (font-size ≥ 16px)
   - 최소 탭 타겟 44×44 px 강제
   ───────────────────────────────────────────────────────────── */

/* 100dvh: 주소창 노출/숨김에 따라 늘어나/줄어드는 실제 뷰포트 높이 */
@supports (height: 100dvh) {
    @media (max-width: 768px) {
        #monitor-frame {
            height: 100dvh !important;
            min-height: 100dvh !important;
        }
    }
}

/* safe-area-inset: 노치/다이내믹아일랜드/홈인디케이터 침범 방지 */
@media (max-width: 768px) {
    #monitor-frame {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        box-sizing: border-box;
    }
    /* 도움말 버튼 — 홈인디케이터 위로 끌어올림 */
    #help-icon-btn {
        bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
        right: calc(10px + env(safe-area-inset-right, 0)) !important;
        width: 44px !important;
        height: 44px !important;
    }
    /* 글로벌 헤더 — 상단 노치 회피 */
    #global-game-header {
        padding-top: calc(8px + env(safe-area-inset-top, 0));
    }
}

/* iOS Safari: input/select font-size < 16px일 때 포커스 시 자동 줌 발생.
   게임 내 모든 입력 요소를 16px 이상으로 고정. */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    button {
        font-size: max(16px, 1em);
    }
    /* 작은 보조 버튼은 명시적으로 14px 허용 (이미 패딩 충분) */
    .scenario-back,
    .battle-skill-btn,
    .recruit-unit-btn,
    #battle-repair-btn,
    #btn-cmd-formation {
        font-size: 13px !important;
    }
}

/* 글로벌 최소 탭 타겟 44×44 — 터치 기기 전체 */
@media (hover: none) and (pointer: coarse) {
    .cmd-btn,
    .menu-option,
    .scenario-item,
    .faction-radio-label,
    .battle-cmd-btn,
    .viewport-btn {
        min-height: 44px;
        min-width: 44px;
    }
    /* 시나리오 아이템은 카드 형식이므로 내부 패딩 추가 */
    .scenario-item {
        padding-block: 12px;
    }
}