* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

body {
    background-color: #000000;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Strict 16:9 Letterbox Viewport (Displays clean Top/Bottom black bars on 4:3 Foldables & Left/Right bars on 21:9 Ultra-wide) */
#game-container {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    max-width: 100vw;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #05070d;
    overflow: hidden;
}

#game-container canvas,
canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

#ui-overlay {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    max-width: 100vw;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    z-index: 20;
}

.hud-top {
    padding: max(6px, env(safe-area-inset-top, 6px)) max(26px, env(safe-area-inset-right, 26px)) 6px max(26px, env(safe-area-inset-left, 26px));
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0) 100%);
}

.logo {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffeb3b;
    text-shadow: 0 0 12px rgba(255, 235, 59, 0.6);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.logo span {
    color: #fff;
}

.logo .tag {
    font-size: 10px;
    background: #e91e63;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.6px;
    margin-left: 2px;
    vertical-align: middle;
    white-space: nowrap;
}

.stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

#kill-count {
    color: #ff5252;
}

#combo-count {
    color: #ffeb3b;
    transition: transform 0.15s ease;
}

#stealth-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    white-space: nowrap;
}

.status-hidden {
    background: rgba(76, 175, 80, 0.25);
    color: #4caf50;
    border: 1px solid #4caf50;
}

.status-spotted {
    background: rgba(244, 67, 54, 0.35);
    color: #ff5252;
    border: 1px solid #ff5252;
    animation: blink 0.5s infinite alternate;
}

@keyframes blink {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Help Modal Box */
.help-box {
    pointer-events: auto;
    align-self: center;
    background: rgba(12, 15, 24, 0.96);
    border: 2px solid #ffeb3b;
    border-radius: 8px;
    padding: 16px 22px;
    max-width: 660px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 235, 59, 0.22);
    margin-bottom: auto;
    margin-top: 26px;
    backdrop-filter: blur(8px);
    z-index: 30;
}

.help-box h3 {
    color: #ffeb3b;
    margin-bottom: 8px;
    font-size: 15px;
    letter-spacing: 0.8px;
}

.help-box ul {
    list-style: none;
    font-size: 12.5px;
    line-height: 1.55;
    color: #cfd8dc;
}

.help-box ul li b {
    color: #fff;
}

.combo-table-panel {
    margin-top: 10px;
    background: rgba(6, 10, 20, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-radius: 6px;
    padding: 8px 10px;
}

.combo-table-title {
    font-size: 11px;
    font-weight: 800;
    color: #00e5ff;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.combo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.combo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    background: rgba(255, 255, 255, 0.03);
    padding: 3px 6px;
    border-radius: 4px;
}

.combo-keys {
    background: rgba(255, 235, 59, 0.16);
    border: 1px solid #ffeb3b;
    color: #ffeb3b;
    font-weight: 800;
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 3px;
    min-width: 112px;
    text-align: center;
    white-space: nowrap;
}

.combo-desc {
    color: #eceff1;
}

.help-box .tip {
    margin-top: 9px;
    font-size: 12px;
    color: #81d4fa;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 7px;
}

#close-help-btn {
    margin-top: 14px;
    width: 100%;
    padding: 10px;
    background: #ffeb3b;
    color: #111;
    font-weight: 800;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
    transition: background 0.2s, transform 0.1s;
}

#close-help-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* Input Mode Badge in HUD (M&KB / Touch Arc / Razer Kishi) */
.input-mode-badge {
    border-color: rgba(105, 240, 174, 0.55) !important;
    color: #69f0ae !important;
    background: rgba(0, 230, 118, 0.12) !important;
}

.input-mode-badge.mode-gamepad {
    border-color: #ffeb3b !important;
    color: #ffeb3b !important;
    background: rgba(255, 235, 59, 0.18) !important;
    box-shadow: 0 0 12px rgba(255, 235, 59, 0.45);
}

.input-mode-badge.mode-touch {
    border-color: #00e5ff !important;
    color: #00e5ff !important;
    background: rgba(0, 229, 255, 0.18) !important;
}

/* Hybrid Smart-Touch: 360° Virtual Joystick (Left) + 5-Button Combat Arc (Right) */
#touch-controls {
    display: none;
    pointer-events: none;
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    left: 0;
    right: 0;
    padding: 0 max(18px, env(safe-area-inset-right, 18px)) 6px max(18px, env(safe-area-inset-left, 18px));
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    z-index: 25;
    user-select: none;
    -webkit-user-select: none;
}

@media (pointer: coarse) or (max-width: 920px) {
    #touch-controls {
        display: flex;
    }
}

#touch-controls.force-visible {
    display: flex !important;
}

#touch-controls.gamepad-hidden,
#touch-controls.mkb-hidden {
    display: none !important;
}

.touch-group {
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

/* Left 360° Smart-Flick Virtual Joystick (UP = Jump/Grapple, DOWN = Stealth/Drop) */
.left-joystick-cluster {
    position: relative;
    width: clamp(128px, 19vw, 156px);
    height: clamp(128px, 19vw, 156px);
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    padding-bottom: 4px;
}

.vjoy-base {
    position: relative;
    width: clamp(120px, 17.5vw, 144px);
    height: clamp(120px, 17.5vw, 144px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 16, 28, 0.72) 0%, rgba(6, 10, 18, 0.88) 100%);
    border: 2px solid rgba(0, 229, 255, 0.42);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), inset 0 0 18px rgba(0, 229, 255, 0.14);
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.vjoy-base.active {
    border-color: rgba(0, 229, 255, 0.85);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 229, 255, 0.35);
}

.vjoy-ring-inner {
    position: absolute;
    width: 56%;
    height: 56%;
    border-radius: 50%;
    border: 1px dashed rgba(0, 229, 255, 0.28);
    pointer-events: none;
}

.vjoy-sector {
    position: absolute;
    font-size: 11px;
    font-weight: 900;
    color: rgba(176, 190, 197, 0.68);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    pointer-events: none;
    transition: color 0.1s ease, transform 0.1s ease, text-shadow 0.1s ease;
}

.vjoy-sector small {
    font-size: 7.5px;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

.vjoy-up {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(64, 196, 255, 0.88);
}

.vjoy-up.lit,
.vjoy-up.grapple-ready {
    color: #ffeb3b;
    text-shadow: 0 0 10px rgba(255, 235, 59, 0.95);
    transform: translateX(-50%) scale(1.12);
}

.vjoy-down {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(105, 240, 174, 0.82);
}

.vjoy-down.lit {
    color: #00e676;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.95);
    transform: translateX(-50%) scale(1.12);
}

.vjoy-left {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.vjoy-left.lit {
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.95);
}

.vjoy-right {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.vjoy-right.lit {
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.95);
}

.vjoy-nub {
    position: relative;
    width: clamp(46px, 7vw, 56px);
    height: clamp(46px, 7vw, 56px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.88) 0%, rgba(0, 110, 160, 0.92) 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 229, 255, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    will-change: transform;
}

.vjoy-nub-core {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.touch-btn {
    width: clamp(54px, 8.8vw, 62px);
    height: clamp(54px, 8.8vw, 62px);
    border-radius: 50%;
    background: rgba(14, 20, 34, 0.76);
    border: 2px solid rgba(255, 255, 255, 0.42);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    transition: transform 0.08s ease, background 0.12s ease, border-color 0.15s ease, opacity 0.18s ease;
}

.touch-btn:active,
.touch-btn.pressed {
    background: rgba(255, 235, 59, 0.78) !important;
    border-color: #fff !important;
    color: #0b0c10 !important;
    transform: scale(0.92);
}

/* Right 5-Button Combat Fan Cluster (Spacious layout with Jump moved to Left Stick UP) */
.right-arc-cluster {
    position: relative;
    width: clamp(205px, 30vw, 236px);
    height: clamp(168px, 26vw, 192px);
    pointer-events: none;
}

.arc-btn {
    position: absolute;
    pointer-events: auto;
    border-radius: 50%;
    padding: 0;
    line-height: 1.05;
}

.arc-btn .btn-icon {
    font-size: 17px;
    line-height: 1;
}

.arc-btn .btn-lbl {
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.4px;
    margin-top: 2px;
    white-space: nowrap;
}

/* Primary Center-Anchor Button: Quick Slash */
.arc-slash-anchor {
    width: clamp(68px, 11vw, 78px);
    height: clamp(68px, 11vw, 78px);
    bottom: 6px;
    right: 6px;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.62) 0%, rgba(136, 14, 79, 0.86) 100%);
    border: 2.5px solid #ff4081;
    box-shadow: 0 0 18px rgba(255, 64, 129, 0.58);
}

.arc-slash-anchor .btn-icon {
    font-size: 23px;
}

.arc-slash-anchor .btn-lbl {
    font-size: 10px;
}

/* Inner Combat Fan Satellites (Heavy & Dash) */
.arc-heavy {
    width: clamp(56px, 9.2vw, 62px);
    height: clamp(56px, 9.2vw, 62px);
    bottom: 8px;
    right: 92px;
    background: rgba(255, 145, 0, 0.38);
    border-color: #ff9100;
}

.arc-dash {
    width: clamp(56px, 9.2vw, 62px);
    height: clamp(56px, 9.2vw, 62px);
    bottom: 90px;
    right: 8px;
    background: rgba(255, 235, 59, 0.34);
    border-color: #ffeb3b;
}

/* Contextual Smart Button: Silent Kill QTE / Safe Winch / Grapple Hook */
.arc-exec {
    width: clamp(52px, 8.5vw, 58px);
    height: clamp(52px, 8.5vw, 58px);
    bottom: 14px;
    right: 162px;
    background: rgba(0, 229, 255, 0.24);
    border-color: rgba(0, 229, 255, 0.58);
    opacity: 0.56;
}

.arc-exec.grapple-ready {
    opacity: 1;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.65) 0%, rgba(0, 145, 234, 0.52) 100%);
    border-color: #00e5ff;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.9);
}

.arc-exec.qte-ready-pulse {
    opacity: 1;
    background: radial-gradient(circle, rgba(255, 23, 68, 0.72) 0%, rgba(255, 235, 59, 0.45) 100%);
    border-color: #ffeb3b;
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.95);
    animation: qteArcPulse 0.55s infinite alternate;
}

.arc-shuriken {
    width: clamp(48px, 8vw, 54px);
    height: clamp(48px, 8vw, 54px);
    bottom: 76px;
    right: 82px;
    background: rgba(105, 240, 174, 0.28);
    border-color: #69f0ae;
}

.arc-heal {
    width: clamp(46px, 7.6vw, 52px);
    height: clamp(46px, 7.6vw, 52px);
    bottom: 132px;
    right: 62px;
    background: rgba(0, 230, 118, 0.28);
    border-color: #00e676;
}

@media (max-height: 480px) {
    #touch-controls {
        bottom: 4px;
    }
    .left-joystick-cluster {
        width: 118px;
        height: 118px;
    }
    .vjoy-base {
        width: 112px;
        height: 112px;
    }
    .right-arc-cluster {
        transform: scale(0.9);
        transform-origin: bottom right;
    }
}

@keyframes qteArcPulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 235, 59, 0.65); }
    100% { transform: scale(1.12); box-shadow: 0 0 22px rgba(255, 23, 68, 0.95); }
}

/* Virtual Razer Kishi / XInput Test Dock for PC Web Demo */
.kishi-test-dock {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 26;
    background: rgba(8, 12, 22, 0.88);
    border: 1.5px solid rgba(255, 235, 59, 0.65);
    border-radius: 12px;
    padding: 6px 12px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), 0 0 16px rgba(255, 235, 59, 0.22);
    user-select: none;
    -webkit-user-select: none;
    min-width: 580px;
    max-width: 96vw;
}

.kishi-dock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    color: #cfd8dc;
    border-bottom: 1px solid rgba(255, 235, 59, 0.25);
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.kishi-dock-header b {
    color: #ffeb3b;
}

.kishi-collapse-btn {
    background: rgba(255, 235, 59, 0.16);
    border: 1px solid rgba(255, 235, 59, 0.55);
    color: #ffeb3b;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.kishi-dock-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.kishi-side {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kishi-shoulder-row,
.kishi-dpad-row,
.kishi-face-row,
.kishi-center-side {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kishi-btn {
    background: rgba(20, 28, 44, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    color: #eceff1;
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.06s ease, box-shadow 0.08s ease, background 0.08s ease;
}

.kishi-btn:active,
.kishi-btn.pressed {
    transform: scale(0.92);
    background: rgba(255, 235, 59, 0.35) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.85);
}

.kishi-btn.shoulder-btn {
    background: rgba(0, 229, 255, 0.16);
    border-color: rgba(0, 229, 255, 0.55);
    color: #84ffff;
}

.kishi-btn.lb-qte-btn.qte-ready-pulse {
    background: radial-gradient(circle, rgba(255, 23, 68, 0.72) 0%, rgba(255, 235, 59, 0.45) 100%);
    border-color: #ffeb3b;
    color: #fff;
    animation: qteArcPulse 0.55s infinite alternate;
}

.kishi-btn.dpad-sim-btn {
    min-width: 44px;
    background: rgba(144, 164, 174, 0.2);
    border-color: rgba(176, 190, 197, 0.55);
}

.kishi-btn.meta-sim-btn {
    font-size: 9.5px;
    padding: 4px 7px;
    background: rgba(255, 255, 255, 0.1);
    color: #b0bec5;
}

.kishi-btn.face-x {
    background: rgba(0, 176, 255, 0.25);
    border-color: #00b0ff;
    color: #80d8ff;
}

.kishi-btn.face-y {
    background: rgba(255, 215, 64, 0.25);
    border-color: #ffd740;
    color: #ffe57f;
}

.kishi-btn.face-b {
    background: rgba(255, 23, 68, 0.25);
    border-color: #ff1744;
    color: #ff8a80;
}

.kishi-btn.face-a {
    background: rgba(0, 230, 118, 0.25);
    border-color: #00e676;
    color: #b9f6ca;
}

/* Act Selector Pills in HUD */
.act-selector {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}

.act-btn {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #b0bec5;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.act-btn:hover {
    background: rgba(255, 235, 59, 0.2);
    color: #ffeb3b;
    border-color: #ffeb3b;
}

.act-btn.active {
    background: #ffeb3b;
    color: #111;
    border-color: #ffeb3b;
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

/* Player Health Hearts */
#health-bar {
    display: flex;
    gap: 4px;
    font-size: 18px;
    letter-spacing: 2px;
}

.heart {
    filter: drop-shadow(0 0 4px rgba(244, 67, 54, 0.8));
    transition: transform 0.2s;
}

.heart.lost {
    opacity: 0.25;
    filter: grayscale(1);
    transform: scale(0.8);
}

/* Portable Nano-Medkit HUD Button */
.medkit-hud-btn {
    background: rgba(0, 230, 118, 0.16);
    color: #69f0ae;
    border: 1px solid rgba(0, 230, 118, 0.65);
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: all 0.18s ease;
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.22);
    white-space: nowrap;
}

.medkit-hud-btn:hover {
    background: rgba(0, 230, 118, 0.32);
    border-color: #00e676;
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.5);
}

.medkit-hud-btn.ready-heal {
    background: rgba(0, 230, 118, 0.3);
    border-color: #00e676;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(0, 230, 118, 0.75);
    animation: medkitPulse 1.1s infinite alternate;
}

.medkit-hud-btn.empty {
    background: rgba(69, 90, 100, 0.2);
    color: #78909c;
    border-color: rgba(120, 144, 156, 0.35);
    box-shadow: none;
    opacity: 0.65;
}

@keyframes medkitPulse {
    0% { transform: scale(1); box-shadow: 0 0 8px rgba(0, 230, 118, 0.45); }
    100% { transform: scale(1.05); box-shadow: 0 0 16px rgba(0, 230, 118, 0.9); }
}

/* Boss Health Bar HUD (Top Center) */
#boss-hud {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    max-width: 85vw;
    background: rgba(10, 12, 18, 0.9);
    border: 1px solid #e91e63;
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.35);
    border-radius: 6px;
    padding: 6px 14px 10px;
    display: none;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    z-index: 10;
}

.boss-title-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffeb3b;
}

.boss-hp-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#boss-hp-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff1744 0%, #ff5252 50%, #ffeb3b 100%);
    box-shadow: 0 0 10px #ff1744;
    transition: width 0.25s ease-out;
}

/* Universal Modal Overlay */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    z-index: 50;
}

/* Story / Mission Briefing Graphic-Novel Comic Box (Zero Horizontal Cutout) */
.story-box {
    background-color: #0b0c10;
    background-image:
        radial-gradient(rgba(255, 235, 59, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, #0b0c10 0%, #141826 100%);
    background-size: 10px 10px, 100% 100%;
    border: 3px solid #ffeb3b;
    box-shadow: 0 0 36px rgba(255, 235, 59, 0.32), 7px 7px 0 #ff1744;
    border-radius: 6px;
    padding: 18px 22px;
    max-width: min(820px, 95vw);
    width: 95vw;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.story-comic-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 235, 59, 0.35);
    width: 100%;
    min-width: 0;
}

.story-header-meta {
    flex: 1;
    min-width: 0;
}

.story-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.comic-issue-stamp {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #0b0c10;
    background: #ffeb3b;
    padding: 2px 8px;
    border: 1.5px solid #000;
    box-shadow: 3px 3px 0 #ff1744;
    transform: skewX(-6deg);
}

.story-avatar {
    font-size: 42px;
    background: radial-gradient(circle at center, #1b2234 0%, #0b0c10 100%);
    border: 2.5px solid #ffeb3b;
    box-shadow: 4px 4px 0 #ff1744;
    border-radius: 6px;
    width: 68px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.story-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.story-tag {
    font-size: 11px;
    background: #ff1744;
    color: #fff;
    padding: 2px 9px;
    border: 1.5px solid #000;
    box-shadow: 3px 3px 0 #ffeb3b;
    font-weight: 900;
    letter-spacing: 1px;
    display: inline-block;
    transform: skewX(-6deg);
}

.story-header-meta h3,
.story-content h3 {
    color: #ffeb3b;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 2px 0 4px 0;
    text-shadow: 2px 2px 0 #000;
}

.story-header-meta p,
.story-content p {
    font-size: 13px;
    line-height: 1.48;
    color: #e0f2f1;
    margin: 0;
}

.story-btn {
    flex: 1.3;
    min-width: 0;
    padding: 11px 14px;
    background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 100%);
    color: #0b0c10;
    font-weight: 900;
    font-size: 13.5px;
    letter-spacing: 1px;
    border: 2px solid #0b0c10;
    outline: 1.5px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 4px 4px 0 #ff1744;
    transition: transform 0.1s, background 0.2s;
}

.story-btn:hover {
    background: #ffffff;
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 #ff1744;
}

/* Victory & Game Over Dialogs */
.dialog-box {
    background: #11131d;
    border-radius: 8px;
    padding: 28px 36px;
    max-width: 520px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
}

.victory-box {
    border: 2px solid #00e5ff;
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.35);
}

.victory-box h2 {
    color: #00e5ff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.gameover-box {
    border: 2px solid #ff1744;
    box-shadow: 0 0 35px rgba(255, 23, 68, 0.4);
}

.gameover-box h2 {
    color: #ff1744;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.dialog-stats {
    display: flex;
    justify-content: space-around;
    margin: 18px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-item .val {
    font-size: 22px;
    font-weight: 900;
    color: #ffeb3b;
}

.stat-item .lbl {
    font-size: 11px;
    color: #90a4ae;
    letter-spacing: 1px;
}

.dialog-msg {
    font-size: 14px;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 20px;
}

.dialog-btn-row {
    display: flex;
    gap: 12px;
}

.primary-btn {
    flex: 1;
    padding: 12px;
    background: #00e5ff;
    color: #0b0c10;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.primary-btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

.danger-btn {
    flex: 1;
    padding: 12px;
    background: #ff1744;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.danger-btn:hover {
    background: #ff5252;
    transform: translateY(-2px);
}

/* Hybrid-Roguelite Seed Badge & Augment Selection Styles */
.seed-badge {
    pointer-events: auto;
    font-size: 11px;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid #00e5ff;
    color: #00e5ff;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    font-family: Consolas, monospace;
    font-weight: 800;
    transition: all 0.2s ease;
}

.seed-badge:hover {
    background: #00e5ff;
    color: #0b0c10;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

.perk-hud-btn {
    border-color: #e040fb !important;
    color: #f381ff !important;
    background: rgba(224, 64, 251, 0.15) !important;
}

.perk-hud-btn:hover {
    background: #e040fb !important;
    color: #0b0c10 !important;
    box-shadow: 0 0 12px rgba(224, 64, 251, 0.6);
}

.hud-vital-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
}

#active-perks-bar {
    display: flex;
    gap: 4px;
    align-items: center;
}

.active-perk-pill {
    pointer-events: auto;
    background: rgba(16, 20, 34, 0.9);
    border: 1px solid #00e5ff;
    color: #fff;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.victory-box {
    max-width: 680px;
}

.perk-modal-box {
    max-width: 680px;
    border: 2px solid #e040fb;
    box-shadow: 0 0 35px rgba(224, 64, 251, 0.35);
}

.perk-modal-box h2 {
    color: #ffeb3b;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin: 6px 0 8px;
}

.victory-perk-section {
    margin: 14px 0 18px;
    padding: 12px;
    background: rgba(8, 10, 18, 0.75);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 6px;
}

.perk-section-header {
    font-size: 12px;
    font-weight: 900;
    color: #ffeb3b;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.perk-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.perk-card {
    background: linear-gradient(145deg, #141829 0%, #0d101b 100%);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    border-radius: 6px;
    padding: 12px 10px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.perk-card:hover {
    border-color: #ffeb3b;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(255, 235, 59, 0.28);
}

.perk-card.selected {
    border-color: #00e5ff;
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.22) 0%, #101729 100%);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.55);
}

.perk-card-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.perk-card-title {
    font-size: 12.5px;
    font-weight: 900;
    color: #ffeb3b;
    margin-bottom: 5px;
    line-height: 1.25;
}

.perk-card-desc {
    font-size: 11.5px;
    color: #cfd8dc;
    line-height: 1.4;
    margin-bottom: 8px;
}

.perk-card-tag {
    font-size: 10px;
    font-weight: 800;
    color: #00e5ff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Meta-Progression: Bounty, Collectibles, Wardrobe & Edition Pass Styles */
.wardrobe-hud-btn {
    border-color: #ffd54f !important;
    color: #ffe082 !important;
    background: rgba(255, 213, 79, 0.14) !important;
}

.wardrobe-hud-btn:hover {
    background: #ffd54f !important;
    color: #0b0c10 !important;
    box-shadow: 0 0 12px rgba(255, 213, 79, 0.65);
}

.bounty-pill, .collectible-pill {
    pointer-events: auto;
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 4px;
    font-weight: 900;
    transition: transform 0.15s, box-shadow 0.15s;
}

.bounty-pill {
    background: rgba(105, 240, 174, 0.14);
    border: 1px solid #69f0ae;
    color: #69f0ae !important;
}

.bounty-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(105, 240, 174, 0.45);
}

.collectible-pill {
    background: rgba(255, 213, 79, 0.15);
    border: 1px solid #ffd54f;
    color: #ffd54f !important;
}

.collectible-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.45);
}

.wardrobe-modal-box {
    max-width: 860px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 24px;
    border: 2px solid #ffd54f;
    box-shadow: 0 0 40px rgba(255, 213, 79, 0.3);
    text-align: left;
}

.wardrobe-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.wardrobe-header-row h2 {
    color: #ffeb3b;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 2px 0 0;
}

.wardrobe-summary-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-stat-pill {
    background: #171c2d;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 900;
}

.edition-pass-banner {
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.16) 0%, rgba(0, 229, 255, 0.16) 100%);
    border: 1.5px solid #00e5ff;
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.edition-pass-info {
    flex: 1;
    min-width: 240px;
}

.edition-pass-title {
    color: #00e5ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}

.edition-pass-desc {
    color: #cfd8dc;
    font-size: 11.5px;
    line-height: 1.35;
}

.edition-pass-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.edition-buy-btn {
    padding: 7px 12px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 11.5px;
    line-height: 1.25;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.edition-buy-btn.standard {
    background: #00e5ff;
    color: #0b0c10;
}

.edition-buy-btn.deluxe {
    background: linear-gradient(135deg, #ffd54f 0%, #ff9100 100%);
    color: #111;
}

.edition-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 229, 255, 0.45);
}

.mastery-badges-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mastery-badge-item {
    flex: 1;
    min-width: 170px;
    background: rgba(14, 18, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 11px;
    color: #78909c;
    display: flex;
    align-items: center;
    gap: 7px;
}

.mastery-badge-item.earned {
    border-color: #ffd54f;
    color: #fff;
    background: rgba(255, 213, 79, 0.12);
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.2);
}

.wardrobe-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding-bottom: 24px;
}

.wardrobe-card {
    background: linear-gradient(145deg, #15192b 0%, #0d101c 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    transition: all 0.16s ease;
}

.wardrobe-card.unlocked {
    border-color: rgba(0, 229, 255, 0.45);
}

.wardrobe-card.equipped {
    border-color: #ffd54f;
    background: linear-gradient(145deg, rgba(255, 213, 79, 0.16) 0%, #111628 100%);
    box-shadow: 0 0 15px rgba(255, 213, 79, 0.35);
}

.wardrobe-card-title {
    font-size: 12px;
    font-weight: 900;
    color: #fff;
}

.wardrobe-card-passive {
    font-size: 11px;
    color: #80d8ff;
    line-height: 1.35;
}

.wardrobe-card-req {
    font-size: 10.5px;
    color: #b0bec5;
}

.wardrobe-action-btn {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #00e5ff;
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
    font-weight: 900;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.wardrobe-action-btn:hover {
    background: #00e5ff;
    color: #0b0c10;
}

.wardrobe-action-btn.equipped-btn {
    background: #ffd54f;
    border-color: #ffd54f;
    color: #111;
    cursor: default;
}

.wardrobe-action-btn.buy-btn {
    border-color: #69f0ae;
    background: rgba(105, 240, 174, 0.16);
    color: #69f0ae;
}

.wardrobe-action-btn.buy-btn:hover {
    background: #69f0ae;
    color: #0b0c10;
}

.wardrobe-action-btn.locked-btn {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #78909c;
}

.victory-badges-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 12px;
}

.victory-badge-pill {
    background: rgba(255, 213, 79, 0.16);
    border: 1px solid #ffd54f;
    color: #ffe082;
    font-size: 11.5px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.25);
}

/* Act 1 Vertical Slice Demo Victory Screen & Conversion Funnel Styles */
.victory-box {
    max-width: 820px;
    max-height: 96vh;
    overflow-y: auto;
    padding: 14px 22px;
}

.victory-box h2 {
    font-size: 20px;
    margin-bottom: 6px;
}

.victory-box .dialog-stats {
    margin: 6px 0;
    padding: 8px 12px;
}

.victory-box .dialog-msg {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.35;
}

.victory-box .victory-perk-section {
    margin: 8px 0 10px;
    padding: 8px 10px;
}

.victory-box .perk-card {
    padding: 8px 10px;
}

.victory-header-tag {
    display: inline-block;
    background: rgba(0, 229, 255, 0.18);
    border: 1px solid #00e5ff;
    color: #00e5ff;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 10px;
    border-radius: 12px;
    margin-bottom: 4px;
}

.victory-unlock-funnel {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.18) 0%, rgba(0, 229, 255, 0.16) 100%);
    border: 1.5px solid #ffeb3b;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: left;
    flex-wrap: wrap;
}

.victory-unlock-funnel .funnel-info {
    flex: 1;
    min-width: 240px;
}

.victory-unlock-funnel .funnel-title {
    font-size: 12px;
    font-weight: 900;
    color: #ffeb3b;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
}

.victory-unlock-funnel .funnel-sub {
    font-size: 11px;
    color: #cfd8dc;
    line-height: 1.35;
}

.victory-unlock-funnel .funnel-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.victory-three-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: stretch;
}

.endless-seed-btn {
    padding: 10px 10px;
    background: rgba(105, 240, 174, 0.16);
    border: 1.5px solid #69f0ae;
    color: #69f0ae;
    font-weight: 900;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.endless-seed-btn small,
.victory-shop-btn small,
#next-act-btn small {
    font-weight: 700;
    font-size: 10px;
    opacity: 0.9;
}

.endless-seed-btn:hover {
    background: #69f0ae;
    color: #0b0c10;
    transform: translateY(-2px);
    box-shadow: 0 0 14px rgba(105, 240, 174, 0.5);
}

.victory-shop-btn {
    padding: 10px 10px !important;
    font-size: 12px !important;
    line-height: 1.3;
}

.audio-hud-btn {
    border-color: #69f0ae !important;
    color: #69f0ae !important;
    background: rgba(105, 240, 174, 0.12) !important;
}

.audio-hud-btn:hover {
    background: #69f0ae !important;
    color: #0b0c10 !important;
    box-shadow: 0 0 12px rgba(105, 240, 174, 0.55);
}

.audio-hud-btn.muted {
    border-color: #ff5252 !important;
    color: #ff8a80 !important;
    background: rgba(255, 82, 82, 0.14) !important;
}

/* 3-Tier Difficulty HUD Pill & Story Briefing Selector */
.difficulty-hud-btn {
    font-weight: 800 !important;
    transition: all 0.18s ease;
}

.difficulty-hud-btn.diff-easy {
    border-color: #69f0ae !important;
    color: #69f0ae !important;
    background: rgba(105, 240, 174, 0.14) !important;
}

.difficulty-hud-btn.diff-normal {
    border-color: #ffeb3b !important;
    color: #ffeb3b !important;
    background: rgba(255, 235, 59, 0.14) !important;
}

.difficulty-hud-btn.diff-hard {
    border-color: #ff5252 !important;
    color: #ff8a80 !important;
    background: rgba(255, 82, 82, 0.18) !important;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.35);
}

.story-difficulty-panel {
    margin: 10px 0 12px 0;
    padding: 10px 12px;
    background: rgba(8, 12, 22, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 6px;
}

.story-difficulty-label {
    font-size: 11px;
    font-weight: 800;
    color: #00e5ff;
    letter-spacing: 0.7px;
    margin-bottom: 7px;
}

.story-difficulty-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.diff-select-btn {
    padding: 7px 6px;
    border-radius: 5px;
    background: rgba(20, 26, 40, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: #cfd8dc;
    font-weight: 800;
    font-size: 11.5px;
    line-height: 1.25;
    cursor: pointer;
    transition: all 0.15s ease;
}

.diff-select-btn small {
    font-size: 9.5px;
    font-weight: 600;
    opacity: 0.88;
}

.diff-select-btn.easy.active,
.diff-select-btn.easy:hover {
    border-color: #69f0ae;
    color: #69f0ae;
    background: rgba(105, 240, 174, 0.18);
    box-shadow: 0 0 12px rgba(105, 240, 174, 0.3);
}

.diff-select-btn.normal.active,
.diff-select-btn.normal:hover {
    border-color: #ffeb3b;
    color: #ffeb3b;
    background: rgba(255, 235, 59, 0.18);
    box-shadow: 0 0 12px rgba(255, 235, 59, 0.3);
}

.diff-select-btn.hard.active,
.diff-select-btn.hard:hover {
    border-color: #ff1744;
    color: #ff8a80;
    background: rgba(255, 23, 68, 0.22);
    box-shadow: 0 0 14px rgba(255, 23, 68, 0.4);
}

.story-difficulty-desc {
    margin-top: 7px;
    font-size: 11px;
    color: #e0f7fa;
    line-height: 1.35;
}

/* ============================================================
   ACT I 3-STAGE CAMPAIGN SELECTOR & QA TELEPORT BAR
   ============================================================ */
.stage-selector-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    background: rgba(10, 14, 24, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 5px;
    margin-right: 4px;
}

.stage-pill-btn {
    padding: 3px 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    border-radius: 4px;
    background: rgba(20, 28, 44, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #90a4ae;
    cursor: pointer;
    transition: all 0.14s ease;
    pointer-events: auto;
}

.stage-pill-btn:hover {
    color: #ffffff;
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.16);
}

.stage-pill-btn.active {
    color: #041019;
    background: linear-gradient(135deg, #00e5ff 0%, #69f0ae 100%);
    border-color: #69f0ae;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

.stage-pill-btn.cleared::after {
    content: "✓";
    margin-left: 2px;
    font-size: 9px;
}

.stage-pill-btn.locked,
.act-btn.locked {
    opacity: 0.56;
    border-style: dashed;
    border-color: rgba(255, 82, 82, 0.45);
    color: #90a4ae;
    background: rgba(14, 18, 28, 0.78);
    cursor: not-allowed;
}

.stage-pill-btn.locked:hover,
.act-btn.locked:hover {
    border-color: rgba(255, 82, 82, 0.85);
    color: #ff8a80;
    background: rgba(255, 23, 68, 0.14);
}

.story-stage-panel {
    margin: 8px 0 10px 0;
    padding: 9px 11px;
    background: rgba(8, 14, 26, 0.88);
    border: 1px solid rgba(255, 215, 64, 0.38);
    border-radius: 6px;
}

.story-stage-label {
    font-size: 11px;
    font-weight: 800;
    color: #ffd740;
    letter-spacing: 0.6px;
    margin-bottom: 7px;
}

.story-stage-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.story-stage-btn {
    padding: 6px 5px;
    border-radius: 5px;
    background: rgba(18, 25, 38, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: #cfd8dc;
    font-weight: 800;
    font-size: 11px;
    line-height: 1.25;
    cursor: pointer;
    transition: all 0.15s ease;
}

.story-stage-btn small {
    font-size: 9px;
    font-weight: 600;
    color: #80deea;
}

.story-stage-btn.active,
.story-stage-btn:hover {
    border-color: #00e5ff;
    color: #ffffff;
    background: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.32);
}

.story-stage-btn.locked {
    opacity: 0.62;
    border-style: dashed;
    border-color: rgba(255, 82, 82, 0.45);
    background: rgba(14, 18, 28, 0.85);
    color: #90a4ae;
    cursor: not-allowed;
}

.story-stage-btn.locked:hover {
    border-color: rgba(255, 82, 82, 0.85);
    background: rgba(255, 23, 68, 0.14);
    color: #ff8a80;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.25);
}

.cs-tab-btn.locked {
    opacity: 0.52;
    border-style: dashed;
    border-color: rgba(255, 82, 82, 0.42);
    color: #90a4ae;
    cursor: not-allowed;
}

.cs-tab-btn.locked:hover {
    border-color: rgba(255, 82, 82, 0.85);
    color: #ff8a80;
    background: rgba(255, 23, 68, 0.16);
}

.progression-lock-toast {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translate(-50%, -14px);
    z-index: 25000;
    background: rgba(11, 14, 24, 0.96);
    border: 1.5px solid #ff5252;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.78), 0 0 18px rgba(255, 23, 68, 0.42);
    color: #fff;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    max-width: 90%;
}

.progression-lock-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.victory-playstyle-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.playstyle-score-pill {
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    background: rgba(12, 18, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #eceff1;
}

.playstyle-score-pill.ghost {
    border-color: rgba(0, 229, 255, 0.5);
    color: #84ffff;
}

.playstyle-score-pill.predator {
    border-color: rgba(255, 215, 64, 0.5);
    color: #ffe57f;
}

.playstyle-score-pill.slasher {
    border-color: rgba(255, 23, 68, 0.5);
    color: #ff8a80;
}

.qa-walkthrough-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(6, 10, 18, 0.92);
    border: 1.5px solid #00e5ff;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
    pointer-events: auto;
    flex-wrap: wrap;
}

.qa-wt-title {
    font-size: 10.5px;
    font-weight: 900;
    color: #00e5ff;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.qa-wt-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin: 0 2px;
}

.qa-wt-btn {
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
    color: #e0f7fa;
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.qa-wt-btn:hover {
    background: #00e5ff;
    color: #041019;
}

.qa-wt-btn.sec {
    color: #ffd740;
    background: rgba(255, 215, 64, 0.14);
    border-color: rgba(255, 215, 64, 0.45);
}

.qa-wt-btn.sec:hover {
    background: #ffd740;
    color: #10141d;
}

/* ============================================================================
   WIDESCREEN 16:9 GRAPHIC-NOVEL CUTSCENE THEATER & COMIC SUBTITLE BOX
   ============================================================================ */
body.cutscene-playing .hud-top,
body.cutscene-playing #main-menu-modal,
body.cutscene-playing #welcome-screen,
body.cutscene-playing #story-modal,
body.cutscene-playing #victory-modal,
body.cutscene-playing #game-over-modal,
body.cutscene-playing #pause-modal,
body.cutscene-playing #wardrobe-modal,
body.cutscene-playing #perk-modal,
body.cutscene-playing #touch-controls,
body.cutscene-playing #qa-walkthrough-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}

.cutscene-theater-overlay {
    position: absolute;
    inset: 0;
    z-index: 220;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
    background: #05070c;
    overflow: hidden;
    user-select: none;
}

.cutscene-theater-overlay.phaser-live {
    background: transparent;
}

.cutscene-top-bar,
.cutscene-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(180deg, rgba(5, 7, 12, 0.90) 0%, rgba(5, 7, 12, 0.38) 100%);
    border-bottom: 1.5px solid rgba(255, 235, 59, 0.65);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
    flex-wrap: nowrap;
    z-index: 4;
}

.cutscene-brand-cluster,
.cutscene-meta-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}

.cutscene-live-pill,
.cutscene-badge-pill {
    background: #ff1744;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid #ff8a80;
    box-shadow: 0 0 12px rgba(255, 23, 68, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cutscene-vfx-badge,
.cutscene-vfx-tag {
    display: none;
}

.cutscene-scene-tabs,
.cutscene-tabs-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

.cutscene-tabs-row::-webkit-scrollbar {
    display: none;
}

.cutscene-theater-overlay.campaign-cutscene-mode .cutscene-tabs-row {
    display: none !important;
}

.cutscene-skip-btn {
    transition: opacity 0.35s ease, transform 0.2s ease;
}

.cutscene-theater-overlay.first-watch-grace .cutscene-skip-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

.cs-tab-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #cfd8dc;
    background: rgba(18, 22, 34, 0.92);
    border: 1.5px solid rgba(255, 235, 59, 0.32);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cs-tab-btn:hover {
    color: #111;
    background: #ffeb3b;
    border-color: #ffffff;
}

.cs-tab-btn.active {
    color: #0b0c10;
    background: linear-gradient(135deg, #ffeb3b 0%, #f59e0b 100%);
    border-color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.55);
}

.cs-tab-btn.play-all {
    color: #00e5ff;
    border-color: rgba(0, 229, 255, 0.55);
    background: rgba(0, 229, 255, 0.14);
}

.cs-tab-btn.play-all.active,
.cs-tab-btn.play-all:hover {
    color: #050811;
    background: #00e5ff;
    border-color: #ffffff;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.6);
}

.cutscene-skip-btn {
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ff8a80;
    background: rgba(255, 23, 68, 0.16);
    border: 1.5px solid #ff1744;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cutscene-skip-btn:hover {
    color: #ffffff;
    background: #ff1744;
    box-shadow: 0 0 14px rgba(255, 23, 68, 0.6);
}

.cutscene-stage-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.cutscene-dom-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    animation: csKenBurnsFallback 5.5s ease-in-out forwards;
    z-index: 1;
    pointer-events: none;
}

/* When Phaser 3 4K WebGL Cutscene Stage is active, make DOM backdrop transparent so Phaser Ken Burns + Weather Particles + Camera Flash/Shake shine directly through! */
.cutscene-theater-overlay.phaser-live .cutscene-dom-backdrop {
    opacity: 0;
}

@keyframes csKenBurnsFallback {
    0% {
        transform: scale(1.0) translate3d(-1.2%, 0.8%, 0);
    }
    100% {
        transform: scale(1.12) translate3d(1.2%, -0.8%, 0);
    }
}

.cutscene-halftone-vignette,
.cutscene-vignette-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 56%, rgba(5, 7, 12, 0.72) 100%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 3px);
}

/* Dramatic Sumi-e / Kill-Bill Red Stamp Overlay ("DEBT CLEARED — 0 Đ" / "OVERDUE") */
.cutscene-stamp-badge {
    position: relative;
    z-index: 5;
    padding: 10px 26px;
    font-size: clamp(22px, 3.6vw, 44px);
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ff1744;
    background: rgba(11, 12, 16, 0.88);
    border: 5px solid #ff1744;
    outline: 2px solid #ffeb3b;
    border-radius: 6px;
    box-shadow: 0 0 36px rgba(255, 23, 68, 0.85), inset 0 0 18px rgba(255, 23, 68, 0.35);
    text-shadow: 0 0 14px rgba(255, 23, 68, 0.9), 2px 2px 0 #000;
    transform: rotate(-8deg) scale(1);
    animation: stampSlamAnim 0.34s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    pointer-events: none;
}

.cutscene-stamp-badge.gold-stamp {
    color: #ffeb3b;
    border-color: #ffeb3b;
    outline-color: #00e5ff;
    box-shadow: 0 0 36px rgba(255, 235, 59, 0.85), inset 0 0 18px rgba(255, 235, 59, 0.35);
    text-shadow: 0 0 14px rgba(255, 235, 59, 0.9), 2px 2px 0 #000;
}

@keyframes stampSlamAnim {
    0% {
        opacity: 0;
        transform: rotate(-18deg) scale(2.85);
    }
    70% {
        opacity: 1;
        transform: rotate(-6deg) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(-8deg) scale(1.0);
    }
}

/* Bottom Graphic-Novel Comic Subtitle Box (Black #0B0C10 + Kill-Bill Gold #FFEB3B Border) */
.cutscene-bottom-dock,
.cutscene-subtitle-dock {
    position: relative;
    margin-top: auto;
    padding: 4px 18px 12px 18px;
    background: transparent;
    z-index: 4;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.cutscene-comic-box {
    width: fit-content;
    max-width: min(920px, 94vw);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
}

.cutscene-portrait-frame {
    width: 68px;
    height: 68px;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cutscene-portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9));
}

.cutscene-dialogue-body,
.cutscene-dialogue-col {
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    background: rgba(11, 12, 16, 0.84);
    border: 2px solid #ffeb3b;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.82), 3px 3px 0 #ff1744;
    border-radius: 8px;
    padding: 8px 14px;
}

@media (min-width: 769px) {
    .cutscene-dialogue-col {
        backdrop-filter: blur(4px);
    }
}

.cutscene-speaker-row,
.cutscene-cta-col {
    display: none !important;
}

.cutscene-meta-row,
.cutscene-speaker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.cutscene-speaker-tag,
.cutscene-speaker-name {
    background: #ffeb3b;
    color: #0b0c10;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cutscene-scene-title {
    color: #00e5ff;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

.cutscene-beat-dots {
    margin-left: auto;
    color: #ffd54f;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.cutscene-subtitle-text {
    color: #ffffff;
    font-size: clamp(13px, 1.3vw, 15.5px);
    font-weight: 600;
    line-height: 1.45;
    min-height: 0;
    margin: 0;
    letter-spacing: 0.2px;
    text-shadow: 1px 1px 2px #000000;
}

.cutscene-subtitle-text.typing::after {
    content: none;
}

.cs-typing-cursor {
    color: #00e5ff;
    margin-left: 1px;
    animation: csCursorBlink 0.55s infinite;
    display: inline-block;
    width: 0;
    overflow: visible;
}

.cs-unrevealed-ghost {
    visibility: hidden;
    pointer-events: none;
}

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

.cutscene-cta-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cutscene-next-btn {
    padding: 9px 14px;
    background: linear-gradient(135deg, #ffeb3b 0%, #f59e0b 100%);
    color: #0b0c10;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.8px;
    border: 2px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.42);
    transition: transform 0.12s ease, background 0.15s ease;
    white-space: nowrap;
}

.cutscene-next-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.story-cta-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 4px;
}

.story-cutscene-btn {
    padding: 11px 14px;
    background: rgba(255, 23, 68, 0.18);
    color: #ff8a80;
    border: 1.5px solid #ff1744;
    border-radius: 4px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.story-cutscene-btn:hover {
    background: #ff1744;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 23, 68, 0.55);
}

@media (max-width: 760px) {
    .story-cta-row {
        flex-direction: column;
    }
}

/* ============================================================================
   EMBEDDED IFRAME WRAPPER & COMPACT SCREENSIZE COMPATIBILITY (16:9 CONSOLE)
   ============================================================================ */
.help-box,
.story-box,
.dialog-box,
.victory-box,
.wardrobe-modal-box,
.perk-modal-box {
    max-height: calc(100vh - 18px);
    overflow-y: auto;
}

body.is-embedded-iframe #res-display,
body.is-embedded-iframe #input-mode-btn,
body.is-embedded-iframe #act-btn-1,
body.is-embedded-iframe #act-btn-2,
body.is-embedded-iframe #act-btn-3,
body.is-embedded-iframe #cutscene-gallery-btn {
    display: none !important;
}

body.is-embedded-iframe .story-box,
body.is-embedded-iframe .dialog-box,
body.is-embedded-iframe .victory-box,
body.is-embedded-iframe .wardrobe-modal-box,
body.is-embedded-iframe .perk-modal-box {
    max-height: calc(100vh - 12px) !important;
    padding: 14px 18px !important;
}

@media (max-width: 1480px) {
    #res-display,
    #input-mode-btn {
        display: none !important;
    }
}

@media (max-width: 1280px) {
    #act-btn-1,
    #act-btn-2,
    #act-btn-3 {
        display: none !important;
    }
}

@media (max-width: 1180px), (max-height: 680px) {
    .hud-top {
        padding: 4px 8px;
        gap: 3px 6px;
    }
    .logo {
        font-size: 14px;
        gap: 4px;
    }
    .logo .tag {
        font-size: 9px;
        padding: 1px 5px;
    }
    .seed-badge {
        font-size: 9.5px;
        padding: 1px 6px;
        margin-left: 3px;
    }
    .act-selector {
        gap: 3px;
        flex-wrap: wrap;
    }
    .stage-selector-group {
        padding: 1px 3px;
        gap: 2px;
        margin-right: 2px;
    }
    .stage-pill-btn,
    .act-btn {
        padding: 2px 6px;
        font-size: 9.5px;
    }
    .hud-vital-cluster {
        gap: 6px;
    }
    #health-bar {
        font-size: 14px;
        gap: 2px;
    }
    .medkit-hud-btn {
        padding: 2px 6px;
        font-size: 9.5px;
    }
    .stats {
        gap: 5px;
        font-size: 10.5px;
    }
    .bounty-pill,
    .collectible-pill {
        padding: 2px 6px;
    }
    #stealth-status {
        font-size: 9.5px;
        padding: 1px 6px;
    }
    #boss-hud {
        top: 44px;
        width: 340px;
        padding: 4px 10px 6px;
    }
    .help-box {
        margin-top: 8px;
        padding: 12px 16px;
        max-width: min(600px, 94vw);
    }
    .help-box h3 {
        font-size: 13.5px;
        margin-bottom: 6px;
    }
    .help-box ul {
        font-size: 11.5px;
        line-height: 1.45;
    }
    .help-box .tip {
        margin-top: 6px;
        padding-top: 5px;
        font-size: 11px;
    }
    #close-help-btn {
        margin-top: 10px;
        padding: 8px;
        font-size: 12.5px;
    }
    .story-box {
        padding: 8px 14px;
        max-width: min(760px, 95vw);
        width: 95vw;
        gap: 4px;
    }
    .story-avatar {
        width: 48px;
        height: 48px;
        font-size: 26px;
    }
    .story-header-meta h3,
    .story-content h3 {
        font-size: 14.5px;
        margin-bottom: 1px;
    }
    .story-header-meta p,
    .story-content p {
        font-size: 11px;
        line-height: 1.3;
    }
    .story-stage-panel,
    .story-difficulty-panel {
        margin: 2px 0;
        padding: 5px 8px;
    }
    .story-difficulty-label {
        font-size: 9.5px;
        margin-bottom: 3px;
    }
    .story-stage-btn,
    .diff-select-btn {
        padding: 4px 4px;
        font-size: 9.5px;
    }
    .story-stage-btn small,
    .diff-select-btn small {
        font-size: 8px;
    }
    .story-difficulty-desc {
        margin-top: 3px;
        font-size: 9.5px;
    }
    .story-cta-row {
        grid-template-columns: auto auto 1fr;
        gap: 6px;
        position: sticky;
        bottom: -6px;
        background: rgba(11, 12, 16, 0.96);
        padding: 4px 0 2px 0;
        z-index: 6;
    }
    .story-btn,
    .story-cutscene-btn,
    .story-menu-btn {
        padding: 7px 10px;
        font-size: 11px;
    }
    .wardrobe-modal-box,
    .victory-box,
    .perk-modal-box {
        padding: 12px 16px;
        width: 95vw;
    }
    .wardrobe-header-row h2,
    .victory-box h2,
    .perk-modal-box h2 {
        font-size: 16px;
    }
    .wardrobe-cards-grid {
        gap: 6px;
    }
    .wardrobe-card {
        padding: 7px 8px;
        gap: 4px;
    }
    .cutscene-topbar {
        padding: 4px 10px;
        gap: 6px;
    }
    .cutscene-badge-pill {
        font-size: 9.5px;
        padding: 2px 7px;
        max-width: 34vw;
    }
    .cs-tab-btn {
        padding: 3px 8px;
        font-size: 9.5px;
    }
    .cutscene-skip-btn {
        padding: 4px 10px;
        font-size: 10px;
        flex-shrink: 0;
    }
    .cutscene-stamp-badge {
        padding: 6px 16px;
        font-size: clamp(16px, 3vw, 24px);
        border-width: 3px;
    }
    .cutscene-subtitle-dock {
        padding: 2px 10px 6px 10px;
        background: transparent !important;
    }
    .cutscene-comic-box {
        width: fit-content;
        max-width: min(760px, 92%);
        padding: 0;
        gap: 9px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .cutscene-portrait-frame {
        width: 54px;
        height: 54px;
    }
    .cutscene-dialogue-col {
        padding: 6px 12px;
        border-width: 1.5px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.82), 2.5px 2.5px 0 #ff1744;
    }
    .cutscene-speaker-row {
        gap: 6px;
        margin-bottom: 2px;
    }
    .cutscene-speaker-name {
        font-size: 9.5px;
        padding: 1px 6px;
    }
    .cutscene-scene-title {
        font-size: 10.5px;
    }
    .cutscene-beat-dots {
        font-size: 9.5px;
    }
    .cutscene-subtitle-text {
        font-size: 11.5px;
        line-height: 1.34;
        min-height: 0;
    }
    .cutscene-next-btn {
        padding: 6px 10px;
        font-size: 10.5px;
    }
}

/* Mobile & Touch Viewports: Avatar floats beside text (outside background); dark box hugs ONLY the text */
@media (max-width: 1024px), (max-height: 560px), (pointer: coarse) {
    .cutscene-topbar {
        padding: 3px 10px;
        background: linear-gradient(180deg, rgba(5, 7, 12, 0.78) 0%, rgba(5, 7, 12, 0.15) 100%);
        border-bottom-width: 1px;
        box-shadow: none;
    }
    .cutscene-subtitle-dock {
        padding: 0 10px 6px 10px !important;
        background: transparent !important;
    }
    .cutscene-comic-box {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        max-width: min(680px, 90%) !important;
        padding: 0 !important;
        gap: 8px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .cutscene-portrait-frame {
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .cutscene-speaker-row,
    .cutscene-cta-col {
        display: none !important;
    }
    .cutscene-dialogue-col {
        flex: 0 1 auto !important;
        width: fit-content !important;
        padding: 5px 10px !important;
        border: 1.5px solid #ffeb3b !important;
        border-radius: 6px !important;
        background: rgba(11, 12, 16, 0.82) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.78), 2px 2px 0 #ff1744 !important;
    }
    .cutscene-subtitle-text {
        font-size: clamp(10.5px, 1.7vw, 12.5px) !important;
        line-height: 1.3 !important;
        min-height: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }
}

/* ============================================================================
   COMMERCIAL RELEASE UI: GRAPHIC-NOVEL COMIC WELCOME, MAIN MENU & PAUSE MODAL
   Official Title VI: NinjaBill – Chém Nợ Đoạt Mệnh
   Official Title EN: NinjaBill – Shadow Blade of Debt
   ============================================================================ */

/* Story CTA Row & Menu Button (Zero Cutout) */
.story-cta-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
}

.story-menu-btn {
    padding: 10px 14px;
    background: #101726;
    color: #00e5ff;
    border: 2px solid #00e5ff;
    box-shadow: 3px 3px 0 #000000;
    border-radius: 4px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: all 0.14s ease;
    white-space: nowrap;
}

.story-menu-btn:hover {
    background: #00e5ff;
    color: #0b0c10;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #ffeb3b;
}

.story-cutscene-btn {
    padding: 10px 14px;
    background: rgba(255, 23, 68, 0.2);
    color: #ff8a80;
    border: 2px solid #ff1744;
    box-shadow: 3px 3px 0 #000000;
    border-radius: 4px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: all 0.14s ease;
    white-space: nowrap;
}

/* Shared Comic-Book / Graphic-Novel Panel Box Treatment */
.dialog-box,
.wardrobe-modal-box,
.perk-modal-box,
.victory-box,
.gameover-box,
.help-box,
.story-box {
    max-height: 94% !important;
    max-width: 95% !important;
    overflow-y: auto !important;
}

.dialog-box,
.wardrobe-modal-box,
.perk-modal-box,
.victory-box,
.gameover-box,
.help-box {
    background-color: #0b0c10 !important;
    background-image:
        radial-gradient(rgba(255, 235, 59, 0.05) 1px, transparent 1px),
        linear-gradient(145deg, #0b0c10 0%, #131826 100%) !important;
    background-size: 10px 10px, 100% 100% !important;
    border: 3px solid #ffeb3b !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9), 7px 7px 0 #ff1744 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.victory-box {
    border-color: #00e5ff !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9), 7px 7px 0 #ffeb3b !important;
}

.gameover-box {
    border-color: #ff1744 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9), 7px 7px 0 #ffeb3b !important;
}

/* 1. Minimalist In-Game HUD during Active Combat */
body.in-active-gameplay:not(.qa-toolbar-visible) .act-selector,
body.in-active-gameplay:not(.qa-toolbar-visible) #seed-display,
body.in-active-gameplay:not(.qa-toolbar-visible) #res-display,
body.in-active-gameplay:not(.qa-toolbar-visible) #input-mode-btn {
    display: none;
}

.hud-pause-btn,
.hud-mainmenu-btn,
.local-dev-unlock-btn {
    pointer-events: auto;
    padding: 5px 11px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.14s ease;
    white-space: nowrap;
}

.local-dev-unlock-btn {
    background: linear-gradient(135deg, #ff1744 0%, #ff9100 100%);
    border: 2px solid #ffeb3b;
    color: #ffffff;
    box-shadow: 3px 3px 0 #000000;
    text-shadow: 1px 1px 0 #000;
}

.local-dev-unlock-btn:hover {
    background: #ffeb3b;
    color: #0b0c10;
    border-color: #ffffff;
    text-shadow: none;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #ff1744;
}

.local-dev-unlock-btn.unlocked {
    background: linear-gradient(135deg, #00e676 0%, #00e5ff 100%);
    color: #0b0c10;
    border-color: #ffffff;
    text-shadow: none;
}

.hud-pause-btn {
    background: #0b0c10;
    border: 2px solid #00e5ff;
    color: #00e5ff;
    box-shadow: 3px 3px 0 #ff1744;
}

.hud-pause-btn:hover {
    background: #00e5ff;
    color: #050811;
    transform: translate(-1px, -1px);
}

.hud-mainmenu-btn {
    background: #0b0c10;
    border: 2px solid #ffeb3b;
    color: #ffeb3b;
    box-shadow: 3px 3px 0 #ff1744;
}

.hud-mainmenu-btn:hover {
    background: #ffeb3b;
    color: #0b0c10;
    transform: translate(-1px, -1px);
}

/* 2. Welcome / Title Screen (#welcome-screen) — Split-Panel Graphic Novel Cover */
.welcome-screen-overlay {
    position: absolute;
    inset: 0;
    z-index: 180;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    background: #05070d;
    overflow: hidden;
    padding: clamp(10px, 2.2%, 22px) clamp(16px, 3.2%, 38px);
}

.welcome-bg-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    opacity: 0.92;
    filter: saturate(1.18) contrast(1.08);
    animation: welcomeSlowPan 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.mm-bg-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.52;
    filter: saturate(1.15) contrast(1.1);
    animation: welcomeSlowPan 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes welcomeSlowPan {
    0% { transform: scale(1.01) translate3d(-0.6%, 0.4%, 0); }
    100% { transform: scale(1.07) translate3d(0.6%, -0.4%, 0); }
}

.welcome-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 8, 14, 0.94) 0%, rgba(6, 8, 14, 0.82) 44%, rgba(6, 8, 14, 0.12) 74%, rgba(6, 8, 14, 0.35) 100%),
        radial-gradient(rgba(255, 235, 59, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 8px 8px;
    pointer-events: none;
}

.mm-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(6, 10, 18, 0.58) 0%, rgba(5, 7, 12, 0.92) 90%),
        radial-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 10px 10px;
    pointer-events: none;
}

.welcome-hero-stage {
    position: relative;
    z-index: 3;
    width: min(1140px, 96vw);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.welcome-content-card.comic-cover-panel {
    position: relative;
    max-width: min(540px, 94vw);
    width: 100%;
    background-color: #0b0c10;
    background-image:
        radial-gradient(rgba(255, 235, 59, 0.075) 1px, transparent 1px),
        linear-gradient(145deg, rgba(11, 12, 16, 0.96) 0%, rgba(18, 22, 34, 0.94) 100%);
    background-size: 9px 9px, 100% 100%;
    border: 3.5px solid #ffeb3b;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.92), 8px 8px 0 #ff1744;
    border-radius: 6px;
    padding: clamp(14px, 2.5vh, 24px) clamp(16px, 2.8vw, 28px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.3vh, 11px);
}

.comic-overdue-stamp {
    position: absolute;
    top: -12px;
    right: -10px;
    background: #ff1744;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 1.4px;
    padding: 4px 10px;
    border: 2px solid #ffffff;
    outline: 2px solid #0b0c10;
    box-shadow: 4px 4px 0 #0b0c10;
    transform: rotate(6deg);
    pointer-events: none;
}

.welcome-studio-pill {
    background: #ffeb3b;
    border: 2px solid #0b0c10;
    box-shadow: 3px 3px 0 #ff1744;
    color: #0b0c10;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    padding: 3px 12px;
    transform: skewX(-6deg);
}

.welcome-logo-img {
    width: clamp(190px, 28vw, 290px);
    max-height: clamp(82px, 18vh, 142px);
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(0, 229, 255, 0.45));
    margin-bottom: -2px;
}

.welcome-comic-title-banner {
    background: #141926;
    border: 2.5px solid #00e5ff;
    box-shadow: 5px 5px 0 #ff1744;
    padding: 6px 18px 7px;
    transform: skewX(-4deg);
    width: 94%;
    box-sizing: border-box;
}

.welcome-title-vi {
    font-size: clamp(20px, 2.8vw, 30px);
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffeb3b;
    text-shadow: 3px 3px 0 #ff1744, -1px -1px 0 #000;
    line-height: 1.12;
    margin: 0;
    text-transform: uppercase;
}

.welcome-title-en {
    font-size: clamp(10.5px, 1.25vw, 13px);
    font-weight: 900;
    letter-spacing: 2px;
    color: #00e5ff;
    text-shadow: 1px 1px 0 #000;
    margin-top: 2px;
    text-transform: uppercase;
}

.welcome-comic-issue-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
}

.comic-issue-chip {
    background: #0b0c10;
    border: 1.5px solid rgba(255, 235, 59, 0.75);
    box-shadow: 2px 2px 0 #ff1744;
    color: #ffe57f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.7px;
    padding: 3px 9px;
}

.welcome-sub-desc {
    font-size: clamp(11px, 1.25vw, 12.5px);
    color: #eceff1;
    max-width: 470px;
    line-height: 1.42;
    margin: 0;
}

.welcome-start-btn {
    margin-top: 4px;
    width: 94%;
    padding: clamp(11px, 2vh, 14px) 18px;
    font-size: clamp(13.5px, 1.6vw, 16px);
    font-weight: 900;
    letter-spacing: 1.4px;
    color: #0b0c10;
    background: linear-gradient(135deg, #ffeb3b 0%, #ffc107 55%, #00e5ff 100%);
    border: 3px solid #0b0c10;
    outline: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transform: skewX(-5deg);
    box-shadow: 6px 6px 0 #ff1744, 0 0 24px rgba(255, 235, 59, 0.55);
    animation: comicStartPulse 1.3s ease-in-out infinite alternate;
    transition: transform 0.14s ease, filter 0.14s ease;
}

.welcome-start-btn span {
    display: inline-block;
    transform: skewX(5deg);
}

.welcome-start-btn:hover {
    transform: skewX(-5deg) translate(-2px, -2px) scale(1.02);
    box-shadow: 8px 8px 0 #ff1744, 0 0 32px rgba(0, 229, 255, 0.85);
    filter: brightness(1.08);
}

@keyframes comicStartPulse {
    0% { box-shadow: 6px 6px 0 #ff1744, 0 0 16px rgba(255, 235, 59, 0.45); }
    100% { box-shadow: 7px 7px 0 #00e5ff, 0 0 28px rgba(255, 235, 59, 0.85); }
}

.welcome-controls-hint {
    font-size: 10.5px;
    font-weight: 700;
    color: #b0bec5;
    margin-top: 2px;
}

.welcome-right-comic-caption {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none;
}

.comic-quote-box {
    background: #0b0c10;
    border: 3px solid #ffeb3b;
    box-shadow: 6px 6px 0 #ff1744;
    padding: 12px 18px;
    max-width: 340px;
    transform: rotate(-1.5deg);
}

.comic-quote-speaker {
    display: inline-block;
    background: #ffeb3b;
    color: #0b0c10;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 8px;
    margin-bottom: 5px;
}

.comic-quote-box p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.4px;
}

.welcome-footer-bar {
    position: absolute;
    bottom: 8px;
    left: 22px;
    right: 22px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    color: rgba(236, 239, 241, 0.82);
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
}

/* 3. Commercial Main Menu (#main-menu-modal) — Graphic-Novel Issue Command Hub */
.main-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 54;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    background: #05070d;
    padding: clamp(6px, 1.4%, 14px);
    overflow: hidden;
}

.mm-container {
    position: relative;
    z-index: 3;
    width: min(960px, 95%);
    max-height: 94%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: #0b0c10;
    background-image:
        radial-gradient(rgba(255, 235, 59, 0.065) 1px, transparent 1px),
        linear-gradient(145deg, rgba(11, 12, 16, 0.96) 0%, rgba(16, 20, 32, 0.95) 100%);
    background-size: 10px 10px, 100% 100%;
    border: 3.5px solid #ffeb3b;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.94), 7px 7px 0 #ff1744;
    border-radius: 6px;
    padding: clamp(10px, 1.8vh, 16px) clamp(14px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 12px);
}

.mm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 2.5px solid #ffeb3b;
}

.mm-brand-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mm-mini-logo {
    width: 68px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55));
}

.mm-brand-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mm-issue-tag {
    display: inline-block;
    align-self: flex-start;
    background: #ff1744;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 1px 7px;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 #ffeb3b;
    transform: skewX(-6deg);
    margin-bottom: 2px;
}

.mm-game-title-vi {
    font-size: clamp(15px, 1.9vw, 20px);
    font-weight: 900;
    color: #ffeb3b;
    letter-spacing: 1.2px;
    line-height: 1.12;
    text-shadow: 2px 2px 0 #ff1744;
}

.mm-game-title-en {
    font-size: 10.5px;
    font-weight: 900;
    color: #00e5ff;
    letter-spacing: 1.8px;
}

.mm-header-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.comic-stat-pill {
    background: #101522 !important;
    border-width: 2px !important;
    border-radius: 4px !important;
    box-shadow: 3px 3px 0 #000000 !important;
    font-weight: 900 !important;
}

.mm-body-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 14px;
    align-items: stretch;
}

.mm-nav-col {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.mm-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.mm-nav-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #121726;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-left: 6px solid #00e5ff;
    box-shadow: 4px 4px 0 #000000;
    border-radius: 4px;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: all 0.14s ease;
    position: relative;
}

.mm-nav-btn:hover {
    border-color: #ffeb3b;
    border-left-color: #ff1744;
    background: #1a2238;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #00e5ff;
}

.mm-nav-btn.primary-campaign {
    background: linear-gradient(135deg, #1d1528 0%, #121828 100%);
    border: 2.5px solid #ffeb3b;
    border-left: 8px solid #ffeb3b;
    box-shadow: 5px 5px 0 #ff1744;
}

.mm-nav-btn.primary-campaign:hover {
    background: linear-gradient(135deg, #2b1d38 0%, #18243c 100%);
    border-color: #ffffff;
    box-shadow: 7px 7px 0 #ffeb3b;
}

.mm-nav-btn.quick-continue {
    background: linear-gradient(135deg, #0f222a 0%, #101726 100%);
    border: 2.5px solid #00e5ff;
    border-left: 8px solid #00e5ff;
    box-shadow: 5px 5px 0 #000000;
}

.mm-nav-btn.quick-continue:hover {
    border-color: #69f0ae;
    box-shadow: 6px 6px 0 #00e5ff;
}

.mm-comic-arrow {
    margin-left: auto;
    background: #ffeb3b;
    color: #0b0c10;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border: 1.5px solid #0b0c10;
    box-shadow: 2px 2px 0 #ff1744;
    transform: skewX(-6deg);
    white-space: nowrap;
}

.mm-nav-btn.quick-continue .mm-comic-arrow {
    background: #00e5ff;
    box-shadow: 2px 2px 0 #000000;
}

.mm-tile-btn {
    padding: 10px 11px;
    border-left-width: 5px;
}

.mm-btn-icon {
    font-size: 22px;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.mm-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mm-btn-text b {
    font-size: 12.5px;
    font-weight: 900;
    color: #ffeb3b;
    letter-spacing: 0.5px;
}

.mm-nav-btn:not(.primary-campaign) .mm-btn-text b {
    color: #ffffff;
}

.mm-btn-text small {
    font-size: 10.5px;
    color: #b0bec5;
    line-height: 1.25;
}

.mm-profile-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
}

.mm-dossier-card,
.mm-settings-card {
    background-color: #101524;
    background-image: radial-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px);
    background-size: 8px 8px;
    border: 2.5px solid #00e5ff;
    box-shadow: 5px 5px 0 #000000;
    border-radius: 4px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mm-dossier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
    color: #ffeb3b;
    letter-spacing: 0.8px;
    border-bottom: 2px solid rgba(255, 235, 59, 0.3);
    padding-bottom: 5px;
}

.mm-wanted-stamp {
    background: #ff1744;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    padding: 1px 6px;
    border: 1px solid #fff;
    transform: rotate(-4deg);
}

.mm-outfit-showcase {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mm-outfit-frame {
    width: 68px;
    height: 68px;
    background: radial-gradient(circle at center, #1f2942 0%, #0b0c10 100%);
    border: 2.5px solid #ffeb3b;
    box-shadow: 4px 4px 0 #ff1744;
    border-radius: 4px;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-outfit-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mm-outfit-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    min-width: 0;
}

.mm-outfit-name {
    font-size: 13px;
    font-weight: 900;
    color: #ffeb3b;
}

.mm-outfit-passive {
    font-size: 10.5px;
    color: #cfd8dc;
    line-height: 1.32;
}

.mm-small-btn {
    align-self: flex-start;
    margin-top: 2px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 900;
    color: #0b0c10;
    background: #00e5ff;
    border: 1.5px solid #0b0c10;
    box-shadow: 2px 2px 0 #ff1744;
    border-radius: 3px;
    cursor: pointer;
}

.mm-small-btn:hover {
    background: #ffeb3b;
    color: #0b0c10;
}

.mm-progress-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-top: 6px;
    border-top: 1.5px dashed rgba(255, 255, 255, 0.18);
}

.mm-prog-item {
    background: #0b0c10;
    border: 1.5px solid rgba(255, 235, 59, 0.4);
    box-shadow: 2px 2px 0 #000000;
    border-radius: 4px;
    padding: 5px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mm-prog-val {
    font-size: 13.5px;
    font-weight: 900;
    color: #69f0ae;
}

.mm-prog-lbl {
    font-size: 8.5px;
    font-weight: 900;
    color: #b0bec5;
}

.mm-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.mm-setting-btn {
    padding: 7px 8px;
    font-size: 10px;
    font-weight: 900;
    color: #eceff1;
    background: #0b0c10;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 3px 3px 0 #000000;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.mm-setting-btn:hover {
    border-color: #ffeb3b;
    color: #ffeb3b;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #ff1744;
}

/* 4. In-Game Pause Menu (#pause-modal) — Graphic-Novel Tactical Pause Box */
.pause-modal-box {
    max-width: 470px;
    width: 92vw;
    border: 3px solid #ffeb3b !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.92), 8px 8px 0 #ff1744 !important;
    padding: 20px 24px;
}

.pause-modal-box h2 {
    color: #ffeb3b;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.2px;
    margin: 6px 0 4px;
    text-shadow: 2px 2px 0 #ff1744;
}

.pause-stage-meta {
    font-size: 11.5px;
    font-weight: 900;
    color: #00e5ff;
    margin-bottom: 14px;
}

.pause-menu-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pause-action-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #eceff1;
    background: #121726;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-left: 5px solid #00e5ff;
    box-shadow: 4px 4px 0 #000000;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.14s ease;
}

.pause-action-btn:hover {
    border-color: #ffeb3b;
    color: #ffffff;
    background: #1c253b;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #00e5ff;
}

.pause-action-btn.resume {
    background: linear-gradient(135deg, #ffeb3b 0%, #00e5ff 100%);
    color: #050811;
    border: 2.5px solid #0b0c10;
    outline: 1.5px solid #ffffff;
    box-shadow: 5px 5px 0 #ff1744;
}

.pause-action-btn.mainmenu {
    border-color: #ffeb3b;
    border-left-color: #ff1744;
    color: #ffeb3b;
    background: rgba(255, 235, 59, 0.12);
}

/* Custom Comic-Book Scrollbars for Scrollable Modals (Wardrobe, Perks, Cutscenes) */
.dialog-box::-webkit-scrollbar,
.story-box::-webkit-scrollbar,
.mm-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dialog-box::-webkit-scrollbar-track,
.story-box::-webkit-scrollbar-track,
.mm-container::-webkit-scrollbar-track {
    background: #080a10;
    border-left: 2px solid rgba(255, 235, 59, 0.25);
}
.dialog-box::-webkit-scrollbar-thumb,
.story-box::-webkit-scrollbar-thumb,
.mm-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffeb3b 0%, #ff1744 100%);
    border: 1.5px solid #0b0c10;
    border-radius: 2px;
}

@media (max-width: 820px), (max-height: 540px) {
    .welcome-hero-stage {
        justify-content: center;
    }
    .welcome-content-card.comic-cover-panel {
        max-width: min(490px, 92vw);
        padding: 10px 18px;
        gap: 5px;
    }
    .welcome-right-comic-caption {
        display: none;
    }
    .mm-body-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mm-nav-btn {
        padding: 8px 11px;
    }
    .welcome-logo-img {
        max-height: 58px;
    }
    .welcome-start-btn {
        padding: 9px 16px;
        margin-top: 2px;
    }
    .welcome-footer-bar {
        display: none;
    }
}

@media (max-width: 560px) {
    .story-cta-row {
        grid-template-columns: 1fr 1fr;
    }
    .story-cta-row .story-btn {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
   5. EXIT CONFIRMATION POP-UP (#exit-confirm-modal) & STREAMLINED MOBILE HUD
   ============================================================================ */
#exit-confirm-modal {
    z-index: 30000 !important;
    pointer-events: auto !important;
}

.exit-confirm-box {
    position: relative;
    z-index: 30001;
    pointer-events: auto !important;
    max-width: 440px;
    width: 90vw;
    border: 3px solid #ff1744 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.94), 8px 8px 0 #ffeb3b !important;
    padding: 22px 24px;
    text-align: center;
}

.exit-confirm-box button {
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
}

.exit-confirm-box h2 {
    color: #ffeb3b;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.2px;
    margin: 8px 0 8px;
    text-shadow: 2px 2px 0 #ff1744;
}

.exit-confirm-box .dialog-msg {
    font-size: 13px;
    line-height: 1.48;
    color: #eceff1;
    margin-bottom: 16px;
}

.exit-confirm-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pause-action-btn.exit-danger {
    background: linear-gradient(135deg, #ff1744 0%, #c62828 100%);
    color: #ffffff;
    border: 2.5px solid #ffeb3b;
    box-shadow: 5px 5px 0 #000000;
    font-size: 13px;
    letter-spacing: 0.8px;
}

.pause-action-btn.exit-danger:hover {
    background: #ff5252;
    color: #ffffff;
    border-color: #ffffff;
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 #ffeb3b;
}

/* Streamlined Single-Row In-Game HUD (Zero Clutter & Zero Camera Cutout Clipping) */
body.in-active-gameplay .hud-top {
    flex-wrap: nowrap;
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top, 6px)) max(28px, env(safe-area-inset-right, 28px)) 6px max(28px, env(safe-area-inset-left, 28px));
}

body.in-active-gameplay .logo .logo-brand-text,
body.in-active-gameplay #hud-mainmenu-btn,
body.in-active-gameplay #hud-dev-unlock-btn {
    display: none !important;
}

body.in-active-gameplay .logo .tag {
    margin-left: 0;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
}

body.in-active-gameplay .hud-vital-cluster {
    gap: 6px;
    flex-shrink: 0;
}

body.in-active-gameplay .stats {
    gap: 6px;
    min-width: 0;
    flex-shrink: 1;
}

body.in-active-gameplay #stealth-status {
    max-width: clamp(110px, 22vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    padding: 2px 7px;
}

/* Mobile & Touch Viewports: Always keep HUD ultra-clean & inside camera cutout safe zone */
@media (max-width: 1024px), (pointer: coarse) {
    body:not(.qa-toolbar-visible) .act-selector,
    body:not(.qa-toolbar-visible) #seed-display,
    body:not(.qa-toolbar-visible) #res-display,
    body:not(.qa-toolbar-visible) #input-mode-btn,
    body:not(.qa-toolbar-visible) #hud-dev-unlock-btn,
    body:not(.qa-toolbar-visible) #hud-mainmenu-btn,
    body:not(.qa-toolbar-visible) .logo .logo-brand-text {
        display: none !important;
    }

    .hud-top {
        flex-wrap: nowrap !important;
        padding: max(6px, env(safe-area-inset-top, 6px)) max(30px, env(safe-area-inset-right, 30px)) 4px max(30px, env(safe-area-inset-left, 30px)) !important;
        gap: 6px !important;
    }

    #health-bar {
        font-size: 15px;
        gap: 2px;
        letter-spacing: 0;
    }

    .medkit-hud-btn {
        padding: 3px 7px;
        font-size: 10.5px;
    }

    .bounty-pill,
    .collectible-pill {
        padding: 2px 7px;
        font-size: 10.5px;
    }

    .stats {
        gap: 5px;
        font-size: 11px;
    }

    #kill-count {
        display: none;
    }

    #stealth-status {
        max-width: clamp(96px, 20vw, 175px);
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10px;
        padding: 2px 7px;
    }

    .hud-pause-btn {
        padding: 4px 9px;
        font-size: 10.5px;
    }

    #boss-hud {
        top: 44px;
        width: min(360px, 74vw);
        padding: 4px 10px 7px;
    }
}

/* ============================================================================
   GONE GOLD QOL: TRI-LINGUAL SVG FLAG TOGGLE (VI / EN / JA), CJK TYPOGRAPHY,
   SEPARATE BGM/SFX VOLUME CONTROLS & BGM TRACK TOAST
   ============================================================================ */
.flag-icon {
    display: inline-block;
    width: 18px;
    height: 12px;
    vertical-align: -1.5px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

.lang-hud-btn,
.lang-mm-btn,
.pause-vol-lang-row .pause-sub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lang-hud-btn {
    border-color: rgba(0, 229, 255, 0.65) !important;
    color: #e0f7fa !important;
    background: rgba(8, 18, 32, 0.88) !important;
    padding: 4px 8px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
}

.lang-hud-btn:hover {
    border-color: #ffeb3b !important;
    color: #ffeb3b !important;
    box-shadow: 0 0 12px rgba(255, 235, 59, 0.45);
}

.lang-toggle-pill {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #ffffff;
    background: rgba(11, 14, 24, 0.92);
    border: 1.5px solid #00e5ff;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 229, 255, 0.3);
    cursor: pointer;
    transition: all 0.16s ease;
}

.lang-toggle-pill:hover {
    border-color: #ffeb3b;
    color: #ffeb3b;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 235, 59, 0.5);
}

.pause-vol-lang-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
}

.pause-vol-lang-row .pause-sub-btn {
    padding: 8px 6px;
    font-size: 11px;
    white-space: nowrap;
}

.bgm-toast {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 9500;
    background: linear-gradient(135deg, rgba(8, 12, 22, 0.94) 0%, rgba(16, 22, 38, 0.92) 100%);
    border-left: 3.5px solid #00e5ff;
    border-top: 1px solid rgba(0, 229, 255, 0.38);
    border-right: 1px solid rgba(0, 229, 255, 0.25);
    border-bottom: 1px solid rgba(0, 229, 255, 0.25);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.78), 0 0 14px rgba(0, 229, 255, 0.28);
    color: #e0f7fa;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    max-width: min(440px, 86vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bgm-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.bgm-toast.boss-track {
    border-left-color: #ff1744;
    border-top-color: rgba(255, 23, 68, 0.55);
    color: #ffeb3b;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 23, 68, 0.45);
}

/* CJK Typography Harmony for Japanese (html[lang="ja"]) */
html[lang="ja"] body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
}

html[lang="ja"] .cutscene-subtitle-text,
html[lang="ja"] .dialog-msg,
html[lang="ja"] .welcome-sub-desc,
html[lang="ja"] .mm-act-desc {
    line-height: 1.62;
    letter-spacing: 0.03em;
}

/* =========================================================================
   SETTINGS VERSION BADGE & CINEMATIC CREDITS ROLL MODAL (v1.0.0 GONE GOLD)
   ========================================================================= */

.mm-settings-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mm-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.9px;
    color: #0b0c10;
    background: linear-gradient(135deg, #ffeb3b 0%, #00e5ff 100%);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
    white-space: nowrap;
}

.mm-setting-btn.credits-mm-btn {
    border-color: rgba(255, 235, 59, 0.55);
    color: #ffe57f;
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.14) 0%, rgba(255, 23, 68, 0.14) 100%);
}

.mm-setting-btn.credits-mm-btn:hover {
    border-color: #ffeb3b;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.45);
}

.credits-overlay {
    z-index: 9850;
    background: radial-gradient(circle at 50% 25%, rgba(18, 24, 42, 0.96) 0%, rgba(5, 7, 12, 0.985) 100%);
    backdrop-filter: blur(8px);
}

.credits-modal-shell {
    width: min(860px, 95vw);
    height: min(530px, 92vh);
    background: linear-gradient(180deg, #0b0e17 0%, #07090f 100%);
    border: 2.5px solid #ffeb3b;
    box-shadow: 0 0 0 3px #0b0c10, 8px 8px 0 #ff1744, 0 24px 60px rgba(0, 0, 0, 0.92);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.credits-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(90deg, #111625 0%, #1a1025 60%, #111625 100%);
    border-bottom: 2px solid rgba(255, 235, 59, 0.45);
    flex-shrink: 0;
}

.credits-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.credits-version-pill {
    background: #ffeb3b;
    color: #0b0c10;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 3px;
    box-shadow: 2px 2px 0 #ff1744;
}

.credits-reason-badge {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #00e5ff;
    text-transform: uppercase;
}

.credits-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.credits-ctrl-btn {
    background: rgba(16, 22, 36, 0.92);
    color: #eceff1;
    border: 1.5px solid rgba(0, 229, 255, 0.55);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s ease;
}

.credits-ctrl-btn:hover,
.credits-ctrl-btn.active {
    background: #00e5ff;
    color: #0b0c10;
    border-color: #ffffff;
}

.credits-ctrl-btn.close {
    border-color: rgba(255, 23, 68, 0.75);
    color: #ff8a80;
}

.credits-ctrl-btn.close:hover {
    background: #ff1744;
    color: #ffffff;
}

.credits-scroll-viewport {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: 26px 24px 48px;
    scroll-behavior: auto;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 23, 68, 0.12) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(0, 229, 255, 0.1) 0%, transparent 55%);
}

.credits-scroll-viewport::-webkit-scrollbar {
    width: 6px;
}

.credits-scroll-viewport::-webkit-scrollbar-track {
    background: rgba(11, 12, 16, 0.8);
}

.credits-scroll-viewport::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffeb3b, #ff1744);
    border-radius: 3px;
}

.credits-roll-track {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 160px;
}

.credits-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 18px 18px;
    width: 100%;
    border-bottom: 1.5px dashed rgba(255, 235, 59, 0.35);
}

.credits-hero-kicker {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #00e5ff;
    text-transform: uppercase;
}

.credits-hero-title {
    font-size: clamp(24px, 3.6vw, 36px);
    font-weight: 900;
    letter-spacing: 2.5px;
    color: #ffeb3b;
    text-shadow: 3px 3px 0 #ff1744, 0 0 22px rgba(255, 235, 59, 0.45);
    margin: 0;
}

.credits-hero-sub {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #eceff1;
}

.credits-stamp-seal {
    margin-top: 6px;
    display: inline-block;
    padding: 4px 14px;
    border: 2.5px solid #ff1744;
    color: #ffeb3b;
    background: rgba(255, 23, 68, 0.16);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 1.6px;
    transform: rotate(-2deg);
    box-shadow: 3px 3px 0 #000000;
}

.credits-player-dossier {
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, rgba(255, 235, 59, 0.08) 100%);
    border: 1.5px solid rgba(0, 229, 255, 0.55);
    border-radius: 6px;
    padding: 12px 16px;
}

.credits-dossier-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.3px;
    color: #00e5ff;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.credits-dossier-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.credits-stat-box {
    background: rgba(11, 14, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    padding: 6px 8px;
}

.credits-stat-val {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #ffeb3b;
}

.credits-stat-lbl {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    color: #b0bec5;
    margin-top: 2px;
}

.credits-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.credits-sec-header {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    color: #ffeb3b;
    background: rgba(255, 23, 68, 0.22);
    border-left: 3px solid #ff1744;
    border-right: 3px solid #ff1744;
    padding: 4px 16px;
    text-transform: uppercase;
}

.credits-role-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.credits-role-card {
    background: rgba(15, 20, 34, 0.88);
    border: 1px solid rgba(255, 235, 59, 0.28);
    border-radius: 5px;
    padding: 10px 12px;
    text-align: left;
}

.credits-role-card.credits-card-founder {
    border-color: rgba(0, 229, 255, 0.55);
    background: linear-gradient(135deg, rgba(10, 26, 40, 0.94), rgba(15, 20, 34, 0.92));
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.14);
}

.credits-role-card.credits-card-wide {
    grid-column: 1 / -1;
    border-color: rgba(255, 235, 59, 0.65);
    background: linear-gradient(135deg, rgba(36, 26, 12, 0.94), rgba(16, 20, 34, 0.94));
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.16);
}

.credits-role-card.credits-card-wide .credits-role-title {
    color: #ffeb3b;
}

.credits-role-card.credits-card-wide .credits-role-name {
    color: #fffde7;
    font-size: 13.5px;
}

.credits-role-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.9px;
    color: #00e5ff;
    text-transform: uppercase;
}

.credits-role-name {
    font-size: 13px;
    font-weight: 900;
    color: #ffffff;
    margin-top: 3px;
}

.credits-role-desc {
    font-size: 10.5px;
    color: #b0bec5;
    margin-top: 3px;
    line-height: 1.38;
}

.credits-ost-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    text-align: left;
}

.credits-ost-item {
    background: rgba(12, 16, 28, 0.9);
    border-left: 3px solid #00e5ff;
    padding: 6px 10px;
    font-size: 10.5px;
    color: #eceff1;
}

.credits-ost-item.boss {
    border-left-color: #ff1744;
}

.credits-ost-item b {
    color: #ffeb3b;
    display: block;
    font-size: 11px;
}

.credits-universe-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.credits-uni-pill {
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(16, 22, 38, 0.92);
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    color: #e0f7fa;
    font-size: 10.5px;
    font-weight: 800;
}

.credits-uni-pill.active-game {
    background: #ffeb3b;
    color: #0b0c10;
    border-color: #ff1744;
    font-weight: 900;
}

.credits-finale-card {
    margin-top: 6px;
    padding: 16px 20px;
    border: 2px solid #ffeb3b;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.18) 0%, rgba(11, 14, 24, 0.95) 100%);
    box-shadow: 5px 5px 0 #ff1744;
    width: 100%;
}

.credits-finale-quote {
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 6px;
}

.credits-finale-ver {
    font-size: 10.5px;
    font-weight: 800;
    color: #ffe57f;
    letter-spacing: 1px;
}

.credits-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: #0d111c;
    border-top: 2px solid rgba(0, 229, 255, 0.35);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.credits-scroll-hint {
    font-size: 10.5px;
    font-weight: 700;
    color: #90a4ae;
}

.credits-bottom-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.credits-action-btn {
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.8px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid #0b0c10;
    transition: transform 0.14s ease, filter 0.14s ease;
}

.credits-action-btn.primary {
    background: linear-gradient(135deg, #00e5ff 0%, #69f0ae 100%);
    color: #0b0c10;
    box-shadow: 3px 3px 0 #000000;
}

.credits-action-btn.waitlist {
    background: linear-gradient(135deg, #ffeb3b 0%, #ff9800 100%);
    color: #0b0c10;
    box-shadow: 3px 3px 0 #ff1744;
}

.credits-action-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

@media (max-width: 680px) {
    .credits-role-grid,
    .credits-ost-list,
    .credits-dossier-stats {
        grid-template-columns: 1fr;
    }
    .credits-scroll-hint {
        display: none;
    }
}

/* ============================================================================
   BOOT / PER-ACT ASSET STREAMING LOADER (#nb-asset-loader)
   - Default: slim non-blocking strip above the Welcome Screen footer while Core + Act I bake
   - .is-blocking: full-stage dim card while a stage waits for its Act art to stream & bake
   ============================================================================ */
.nb-asset-loader {
    position: absolute;
    right: clamp(12px, 2vw, 24px);
    bottom: clamp(10px, 2.2vh, 20px);
    left: auto;
    transform: none;
    z-index: 9600;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.nb-asset-loader-card {
    min-width: min(220px, 46vw);
    padding: 6px 12px 7px;
    background: rgba(5, 8, 16, 0.9);
    border: 1px solid rgba(6, 182, 212, 0.55);
    border-radius: 6px;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.22);
}

.nb-asset-loader-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #cfefff;
    text-align: center;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nb-asset-loader-track {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.nb-asset-loader-fill {
    width: 0%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #06b6d4 0%, #00e5ff 60%, #ffeb3b 100%);
    transition: width 0.18s linear;
}

.nb-asset-loader.is-blocking {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    background: radial-gradient(circle at 50% 50%, rgba(10, 16, 30, 0.88) 0%, rgba(3, 5, 10, 0.96) 100%);
    pointer-events: auto;
}

.nb-asset-loader.is-blocking .nb-asset-loader-card {
    min-width: min(380px, 78vw);
    padding: 14px 20px 15px;
}

.nb-asset-loader.is-blocking .nb-asset-loader-label {
    font-size: 13px;
    margin-bottom: 10px;
}

.nb-asset-loader.is-blocking .nb-asset-loader-track {
    height: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .nb-asset-loader-fill {
        transition: none;
    }
}