/* Shared HUD and pause presentation across every chapter. */
body #pausemenu.journey-menu,body #menu.journey-menu{inset:5vh 7vw;padding:0 24px 24px;background:linear-gradient(135deg,#191c20f5,#101615f7);border:1px solid #8c774f;box-shadow:0 16px 60px #0008;overflow:auto;z-index:35;color:#eadfc7;font:14px/1.5 Georgia,serif}
.journey-header{position:sticky;top:0;z-index:5;background:#161b1cf7;display:grid;grid-template-columns:1fr auto;align-items:center;padding:16px 0 12px;border-bottom:1px solid #665b42;gap:4px 12px}.journey-header h2{margin:0!important;font:24px Georgia!important;color:#e7cfa3}.journey-actions{display:flex;gap:8px}.journey-header #save-feedback{grid-column:1/-1;min-height:18px;font:12px Arial;color:#cce0b3}.journey-menu button{font:13px Georgia;padding:9px 14px;border:1px solid #85724d;border-radius:3px;background:#252b28;color:#eee1c3}.journey-menu button:hover{background:#3c4237}.journey-menu .journey-tabs{position:sticky!important;top:92px!important;z-index:4;background:#161b1cf7!important;display:flex;gap:7px;padding:10px 0!important;margin:0 0 18px!important;flex-wrap:wrap}.journey-tabs [aria-pressed=true]{background:#57472d!important;border-color:#d9bd80!important}.journey-menu h3{font:21px Georgia!important;color:#e7cfa3}.journey-menu [hidden]{display:none!important}#settings-panel header,#settings-panel aside,#settings-panel footer{position:static!important;max-width:none!important;width:auto!important;background:none!important;display:block!important;padding:10px 0!important}#settings-panel #pauseaudio{margin-top:14px}
body #partyhud{left:16px;bottom:16px;display:flex;gap:5px;max-width:45vw;width:auto;pointer-events:none}body .party-status-card,body #party button{padding:6px 9px;min-width:0;white-space:nowrap;font:12px/1.2 Georgia;color:#e8dec9;background:#151b18b3;border:1px solid #82714c99;border-radius:3px}body #party{bottom:16px;left:16px;gap:5px;max-width:45vw;flex-wrap:wrap}body #hud{width:164px;left:16px;bottom:52px;padding:9px 11px;background:#141b18a6;border:0;border-radius:3px}body #hud label{margin-bottom:6px;font-size:10px}body #hud progress{height:4px;margin-top:3px}body #goal{font-size:13px;max-width:300px;padding:9px 12px;top:16px;left:16px;background:#131b189e;border:0;line-height:1.4}body #status{top:16px;left:16px;max-width:280px;background:#131b189e;padding:9px 12px;border:0}body #status strong{font:12px Georgia;color:#ccb888}body #status #goal{position:static;padding:0;margin:4px 0 0;background:none}body #status small{display:none}body #clock,body #dayclock{top:16px;right:16px;padding:8px 11px;background:#131b189e;border:0;font:12px Georgia}body #dayclock{width:155px}body #clockprogress,body #clocklabel{display:none}body #clockevent{font-size:10px;margin-top:3px}body #campnotice,body #prompt{bottom:16px;padding:7px 11px;font:12px Georgia;background:#141b18bc;max-width:36vw}body #coast-controls{top:auto;bottom:54px;right:16px;opacity:.72}body #notice{top:74px;padding:8px 12px;font-size:13px;max-width:42vw}body[data-paused=true] #party,body[data-paused=true] #status,body[data-paused=true] #clock,body[data-paused=true] #dayclock,body[data-paused=true] #coast-controls,body[data-paused=true] #coast-waypoint,body[data-paused=true] #notice{visibility:hidden}body #pausemenu #journal,body #menu #menu-content{max-width:1050px;margin:auto}body #battle{width:min(290px,30vw);padding:9px;max-height:34vh}body #turn{padding:6px 10px;font-size:12px}
@media(max-width:700px){body #pausemenu.journey-menu,body #menu.journey-menu{inset:2vh 3vw;padding:0 12px 12px}.journey-menu .journey-tabs{top:92px!important;gap:4px}.journey-menu button{padding:8px 10px}body #party,body #partyhud{max-width:65vw}body #hud{width:140px}body #goal,body #status{max-width:210px}body #campnotice,body #prompt{bottom:60px;max-width:70vw}.journey-header h2{font-size:21px!important}}

.journey-menu>header:empty{display:none!important}body[data-paused=true] #npcfocus,body[data-paused=true] #campnotice{display:none!important}

.compact-vitals{position:fixed;left:16px;bottom:52px;width:164px;padding:9px 11px;background:#141b18a6;border-radius:3px;color:#d7cfbc;font:10px Arial;pointer-events:none}.compact-vitals label{display:block;margin-bottom:6px}.compact-vitals span{float:right}.compact-vitals progress{display:block;width:100%;height:4px;margin-top:3px;accent-color:#c0a269}.compact-vitals label:first-child progress{accent-color:#b96052}body[data-paused=true] .compact-vitals{visibility:hidden}@media(max-width:700px){.compact-vitals{width:140px}}

body[data-paused=true] #battle,body[data-paused=true] #turn,body[data-paused=true] #protectors{visibility:hidden}body #protectors{display:none}

body[data-paused=true] #prompt{visibility:hidden}

body #pause-tabs button,body #tabs button{font:13px Georgia;padding:9px 14px}body .journey-menu{scrollbar-width:thin;scrollbar-color:#85724d #171d1b}.journey-menu::-webkit-scrollbar{width:8px}.journey-menu::-webkit-scrollbar-thumb{background:#85724d;border-radius:4px}.journey-menu::-webkit-scrollbar-track{background:#171d1b}

body #party button:disabled{opacity:.85}body #party button[aria-pressed=true]{border-color:#d8bd7b;background:#303c2d}

#journey-ending{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8vh 15vw;background:radial-gradient(ellipse,#172222f5,#020705fc);color:#eedfc3}#journey-ending small{letter-spacing:3px;color:#bfa778}#journey-ending h1{font:clamp(30px,5vw,64px) Georgia;letter-spacing:.06em;color:#e3c48e}#journey-ending p{font:clamp(16px,2vw,21px)/1.8 Georgia;max-width:850px}#journey-ending button{padding:12px 24px;margin:8px;border:1px solid #bca16a;background:#222c27;color:#f2e3c5;font:16px Georgia}

/* Shared AAA HUD & Menu Refinements */
body #goal, body #status {
 background: linear-gradient(135deg, rgba(16, 21, 18, 0.88), rgba(10, 13, 12, 0.78));
 border: 1px solid rgba(216, 181, 116, 0.35);
 border-left: 3px solid #d8b574;
 border-radius: 5px;
 box-shadow: 0 8px 26px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 backdrop-filter: blur(8px);
}
body #clock, body #dayclock {
 background: linear-gradient(135deg, rgba(16, 21, 18, 0.88), rgba(10, 13, 12, 0.78));
 border: 1px solid rgba(216, 181, 116, 0.35);
 border-right: 3px solid #d8b574;
 border-radius: 5px;
 box-shadow: 0 8px 26px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 backdrop-filter: blur(8px);
}
body #hud, .compact-vitals {
 background: linear-gradient(145deg, rgba(15, 20, 17, 0.88), rgba(9, 12, 11, 0.82));
 border: 1px solid rgba(216, 181, 116, 0.32);
 border-left: 3px solid #d8b574;
 border-radius: 5px;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 backdrop-filter: blur(8px);
}
body #hud #partyhud {
 position: absolute !important;
 left: 0 !important;
 bottom: calc(100% + 10px) !important;
 top: auto !important;
 margin: 0 !important;
 width: max-content !important;
 max-width: min(360px, 75vw) !important;
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
 pointer-events: none;
}
body .party-status-card, body #party button {
 background: linear-gradient(180deg, rgba(24, 30, 26, 0.88), rgba(14, 18, 16, 0.92));
 border: 1px solid rgba(216, 181, 116, 0.42);
 border-radius: 4px;
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.48);
 backdrop-filter: blur(6px);
}
body #pausemenu.journey-menu, body #menu.journey-menu {
 background: linear-gradient(145deg, rgba(16, 20, 22, 0.96), rgba(9, 12, 13, 0.98));
 border: 1px solid rgba(216, 181, 116, 0.55);
 border-radius: 10px;
 box-shadow: 0 28px 90px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 240, 200, 0.12);
 backdrop-filter: blur(16px);
 font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
 padding: 0 32px 68px;
}

/* AAA Console Command Menu Header & L1/R1 Tab Bar */
.aaa-pause-header {
 background: linear-gradient(180deg, rgba(18, 22, 24, 0.98), rgba(14, 18, 19, 0.95)) !important;
 padding: 20px 0 14px !important;
 border-bottom: 1px solid rgba(216, 181, 116, 0.28) !important;
}
.aaa-pause-brand {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.aaa-pause-kicker {
 font: 600 10px/1.2 'Plus Jakarta Sans', sans-serif;
 letter-spacing: 0.22em;
 color: #c8a86b;
 text-transform: uppercase;
}
.aaa-pause-header h2 {
 font: 600 26px/1.15 'Cinzel', Georgia, serif !important;
 letter-spacing: 0.06em;
 color: #f6e3b8 !important;
 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
.aaa-save-feedback {
 font: 500 12px/1.4 'Plus Jakarta Sans', sans-serif !important;
 color: #9be5aa !important;
}
.aaa-pause-tabs {
 background: linear-gradient(180deg, rgba(15, 19, 20, 0.98), rgba(12, 15, 16, 0.94)) !important;
 border-bottom: 1px solid rgba(216, 181, 116, 0.22);
 padding: 12px 0 !important;
 align-items: center;
 gap: 10px !important;
}
.aaa-pause-tabs::before,
.aaa-pause-tabs::after {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 34px;
 height: 26px;
 padding: 0 8px;
 border-radius: 4px;
 background: rgba(255, 244, 214, 0.08);
 border: 1px solid rgba(216, 181, 116, 0.42);
 color: #ecd39a;
 font: 700 11px/1 'Plus Jakarta Sans', sans-serif;
 letter-spacing: 0.08em;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.aaa-pause-tabs::before {
 content: attr(data-l1);
 margin-right: 4px;
}
.aaa-pause-tabs::after {
 content: attr(data-r1);
 margin-left: 4px;
}
.aaa-pause-tabs button {
 font: 600 12px/1.2 'Cinzel', Georgia, serif !important;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 10px 18px !important;
 border-radius: 5px !important;
 background: rgba(30, 36, 34, 0.78) !important;
 border: 1px solid rgba(216, 181, 116, 0.28) !important;
 color: #d8ccb2 !important;
 transition: all 0.16s ease;
}
.aaa-pause-tabs button:hover {
 background: rgba(54, 48, 36, 0.88) !important;
 border-color: rgba(238, 206, 138, 0.65) !important;
 color: #fff3d6 !important;
}
.aaa-pause-tabs button[aria-pressed="true"] {
 background: linear-gradient(135deg, rgba(102, 78, 42, 0.95), rgba(62, 47, 26, 0.95)) !important;
 border-color: #f3d285 !important;
 color: #fff6df !important;
 box-shadow: 0 4px 16px rgba(216, 181, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Controller Focus Ring & Interactive Elements inside Pause / Crafting / Dialogue */
body .journey-menu button:focus,
body .journey-menu button:focus-visible,
body .journey-menu button.controller-focus,
body .journey-menu select:focus,
body .journey-menu select:focus-visible,
body .journey-menu select.controller-focus,
body #dialogue button:focus,
body #dialogue button:focus-visible,
body #dialogue button.controller-focus,
body #forest-dialogue button:focus,
body #forest-dialogue button:focus-visible,
body #forest-dialogue button.controller-focus,
body #battle button:focus,
body #battle button:focus-visible,
body #battle button.controller-focus {
 outline: 2px solid #f7d788 !important;
 outline-offset: 2px;
 background: linear-gradient(90deg, rgba(108, 82, 40, 0.96), rgba(58, 46, 28, 0.95)) !important;
 border-color: #ffe299 !important;
 color: #fff8e6 !important;
 box-shadow: 0 0 18px rgba(245, 208, 118, 0.45) !important;
 transform: translateX(3px);
}

/* AAA Bottom Controller Legend Bar */
.aaa-pause-footer-bar {
 position: sticky;
 bottom: -68px;
 left: 0;
 right: 0;
 margin: 28px -32px -68px;
 padding: 12px 32px;
 background: linear-gradient(180deg, rgba(12, 15, 16, 0.94), rgba(8, 10, 11, 0.98));
 border-top: 1px solid rgba(216, 181, 116, 0.32);
 display: flex;
 flex-wrap: wrap;
 gap: 18px 26px;
 align-items: center;
 justify-content: center;
 font: 500 12px/1.3 'Plus Jakarta Sans', sans-serif;
 color: #d5c7ab;
 z-index: 6;
}
.aaa-pause-footer-bar kbd {
 display: inline-block;
 padding: 3px 7px;
 margin-right: 4px;
 border-radius: 4px;
 background: rgba(255, 245, 220, 0.1);
 border: 1px solid rgba(216, 181, 116, 0.45);
 color: #f6dfa4;
 font: 700 11px/1 'Plus Jakarta Sans', sans-serif;
}

/* Chapters II-IV Forest & Coast Dialogue Modal AAA Upgrade */
body #forest-dialogue {
 bottom: 6vh;
 left: max(14vw, calc(50vw - 420px));
 right: max(14vw, calc(50vw - 420px));
 max-height: 72vh;
 overflow-y: auto;
 padding: 24px 28px;
 background: linear-gradient(160deg, rgba(16, 21, 19, 0.95), rgba(9, 13, 12, 0.97));
 border: 1px solid rgba(216, 181, 116, 0.55);
 border-top: 3px solid #e2c17e;
 border-radius: 10px;
 box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 244, 214, 0.1);
 backdrop-filter: blur(14px);
 color: #f5ebd6;
 font: 500 18px/1.6 'Cormorant Garamond', Georgia, serif;
}
body #forest-dialogue p {
 margin: 0 0 16px;
 font-size: 20px;
 line-height: 1.55;
 color: #f7eedb;
}
body #forest-dialogue button {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 margin: 8px 0;
 padding: 11px 16px;
 border-radius: 6px;
 background: linear-gradient(90deg, rgba(34, 41, 36, 0.9), rgba(24, 29, 26, 0.85));
 border: 1px solid rgba(216, 181, 116, 0.35);
 color: #f3e6c8;
 font: 500 14px/1.35 'Plus Jakarta Sans', sans-serif;
 text-align: left;
 transition: all 0.15s ease;
}
body #forest-dialogue button::before {
 content: attr(data-choice-number);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 22px;
 border-radius: 4px;
 background: rgba(216, 181, 116, 0.18);
 border: 1px solid rgba(216, 181, 116, 0.48);
 color: #f5d68e;
 font: 700 11px/1 'Plus Jakarta Sans', sans-serif;
}
body #forest-dialogue [hidden],
body #dialogue [hidden] {
 display: none !important;
}
.dialogue-consequence,
body #dialogue #rollresult:not(:empty) {
 display: block;
 margin: 0 0 14px;
 padding: 9px 14px;
 border-radius: 6px;
 background: linear-gradient(90deg, rgba(114, 86, 34, 0.42), rgba(44, 35, 18, 0.35));
 border: 1px solid rgba(242, 206, 122, 0.55);
 border-left: 3px solid #f7d788;
 color: #ffe7a8;
 font: 600 13px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
 letter-spacing: 0.03em;
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
 animation: aaaGoalPulse 0.6s ease-out;
}
.dialogue-speaker-kicker {
 display: block;
 margin: 0 0 6px;
 font: 700 11px/1.2 'Cinzel', Georgia, serif;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: #e2c17e;
}

/* Chapters II-IV Pause Menu Cards & Recipes AAA Polish */
body #menu .inventory-grid,
body #pausemenu .item-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
 gap: 12px;
 margin: 16px 0;
}
body #menu .card,
body #pausemenu .item-card {
 padding: 14px 12px;
 border-radius: 7px;
 border: 1px solid rgba(216, 181, 116, 0.32);
 background: linear-gradient(160deg, rgba(32, 38, 34, 0.88), rgba(20, 25, 22, 0.92));
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
}
body #menu .recipe {
 background: linear-gradient(90deg, rgba(28, 34, 31, 0.85), rgba(20, 24, 22, 0.85));
 border: 1px solid rgba(216, 181, 116, 0.25);
 border-radius: 7px;
 margin-bottom: 8px;
 padding: 14px 16px;
}
body #battle {
 background: linear-gradient(155deg, rgba(16, 21, 19, 0.92), rgba(10, 13, 12, 0.95));
 border: 1px solid rgba(216, 181, 116, 0.48);
 border-top: 3px solid #e0be78;
 border-radius: 8px;
 box-shadow: 0 18px 50px rgba(0, 0, 0, 0.72);
 backdrop-filter: blur(12px);
}
body #battle button[data-hotkey]::before {
 content: "[" attr(data-hotkey) "] ";
 color: #f2cf82;
 font-weight: 700;
}

/* Shared Screen-Space Post-Processing Overlay (All Chapters) */
#aaa-overlay {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 3;
 overflow: hidden;
}
.aaa-vignette {
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse at center, transparent 58%, rgba(4, 6, 5, 0.52) 100%);
}
.aaa-damage-pulse {
 position: absolute;
 inset: 0;
 opacity: 0;
 background: radial-gradient(ellipse at center, transparent 42%, rgba(185, 28, 22, 0.55) 100%);
 transition: opacity 0.35s ease-out;
}
.aaa-damage-pulse.active {
 animation: aaaDamageFlash 0.42s ease-out;
}
.aaa-lowhealth-pulse {
 position: absolute;
 inset: 0;
 opacity: 0;
 background: radial-gradient(ellipse at center, transparent 48%, rgba(165, 20, 16, 0.62) 100%);
 transition: opacity 0.2s ease;
}
@keyframes aaaDamageFlash {
 0% { opacity: 0.85; }
 100% { opacity: 0; }
}
@keyframes aaaGoalPulse {
 0% { border-left-color: #fff2c2; box-shadow: 0 0 24px rgba(245, 208, 118, 0.55); }
 100% { border-left-color: #d8b574; }
}
.aaa-goal-flash {
 animation: aaaGoalPulse 0.9s ease-out;
}

/* ==========================================================================
   UNIFIED AAA HURT / HEAL NUMBERS & COMBAT HUD ACROSS ALL CHAPTERS (I-IV)
   ========================================================================== */
body .damage-number,
body .damage {
 position: fixed;
 z-index: 32;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font: 700 30px/1 'Cinzel', 'Palatino Linotype', Georgia, serif;
 letter-spacing: 0.04em;
 color: #ff6b5e;
 text-shadow:
  0 2px 4px rgba(0, 0, 0, 0.98),
  0 4px 14px rgba(0, 0, 0, 0.92),
  0 0 18px rgba(255, 68, 52, 0.55);
 pointer-events: none;
 user-select: none;
 will-change: transform, opacity, left, top;
}
body .damage-number span,
body .damage span {
 display: block;
}
body .damage-number.heavy-hit,
body .damage.heavy-hit {
 font-size: 35px;
 color: #ffb549;
 text-shadow:
  0 2px 5px rgba(0, 0, 0, 0.98),
  0 4px 16px rgba(0, 0, 0, 0.95),
  0 0 24px rgba(255, 168, 48, 0.72);
}
body .damage-number.critical-hit,
body .damage.critical-hit {
 font-size: 38px;
 color: #ffe270;
 text-shadow:
  0 2px 6px rgba(0, 0, 0, 0.99),
  0 0 14px rgba(255, 92, 42, 0.85),
  0 0 28px rgba(255, 210, 80, 0.85);
}
body .damage-number.magic-hit,
body .damage.magic-hit {
 font-size: 34px;
 color: #fff099;
 text-shadow:
  0 2px 5px rgba(0, 0, 0, 0.98),
  0 0 18px rgba(120, 215, 255, 0.75),
  0 0 28px rgba(255, 232, 125, 0.85);
}
body .damage-number.heal-hit,
body .damage.heal-hit {
 font-size: 32px;
 color: #92f5a6;
 text-shadow:
  0 2px 5px rgba(0, 0, 0, 0.98),
  0 0 20px rgba(72, 228, 118, 0.72);
}
body .damage-number small,
body .damage small {
 display: inline-block;
 margin-top: 3px;
 padding: 2px 6px;
 border-radius: 3px;
 background: rgba(10, 13, 12, 0.88);
 border: 1px solid rgba(255, 226, 150, 0.55);
 font: 700 9px/1.1 'Plus Jakarta Sans', system-ui, sans-serif;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: #fff4d8;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
body .damage-number.heal-hit small,
body .damage.heal-hit small {
 border-color: rgba(130, 240, 155, 0.6);
 color: #d8ffe0;
}

/* Unified Vitals HUD & Sculpted Progress Bars (All Chapters) */
body #hud,
body .compact-vitals {
 width: 178px;
 padding: 11px 13px;
 background: linear-gradient(145deg, rgba(15, 20, 18, 0.90), rgba(9, 12, 11, 0.86));
 border: 1px solid rgba(216, 181, 116, 0.38);
 border-left: 3px solid #d8b574;
 border-radius: 6px;
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(10px);
}
body #hud label,
body .compact-vitals label {
 display: block;
 margin-bottom: 7px;
 font: 600 10px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.09em;
 color: #e2d7c1;
}
body #hud label:last-of-type,
body .compact-vitals label:last-of-type {
 margin-bottom: 1px;
}
body #hud label span,
body .compact-vitals label span {
 float: right;
 font-variant-numeric: tabular-nums;
 font-weight: 700;
 color: #ffe4a8;
}
body #hud progress,
body .compact-vitals progress {
 -webkit-appearance: none;
 appearance: none;
 display: block;
 width: 100%;
 height: 6px;
 margin-top: 4px;
 border-radius: 99px;
 overflow: hidden;
 background: rgba(10, 12, 11, 0.82);
 border: 1px solid rgba(255, 238, 198, 0.16);
 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85);
}
body #hud progress::-webkit-progress-bar,
body .compact-vitals progress::-webkit-progress-bar {
 background: rgba(10, 12, 11, 0.82);
}
body #hud #hudhealth::-webkit-progress-value,
body .compact-vitals label:nth-of-type(1) progress::-webkit-progress-value {
 background: linear-gradient(90deg, #98251d, #e85646);
 box-shadow: 0 0 8px rgba(232, 86, 70, 0.6);
}
body #hud #hudenergy::-webkit-progress-value,
body .compact-vitals label:nth-of-type(2) progress::-webkit-progress-value {
 background: linear-gradient(90deg, #8f7b29, #efd055);
 box-shadow: 0 0 8px rgba(239, 208, 85, 0.45);
}
body #hud #hudhunger::-webkit-progress-value,
body .compact-vitals label:nth-of-type(3) progress::-webkit-progress-value {
 background: linear-gradient(90deg, #6e8c3a, #9bd15c);
 box-shadow: 0 0 8px rgba(155, 209, 92, 0.42);
}

/* Unified Party Roster & Active Character Cards */
body .party-status-card,
body #party button {
 padding: 7px 11px;
 font: 600 12px/1.25 'Plus Jakarta Sans', system-ui, sans-serif;
 letter-spacing: 0.02em;
 color: #f0e5ce;
 background: linear-gradient(180deg, rgba(25, 31, 28, 0.90), rgba(14, 18, 16, 0.94));
 border: 1px solid rgba(216, 181, 116, 0.42);
 border-radius: 5px;
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 240, 200, 0.1);
 backdrop-filter: blur(8px);
 transition: all 0.16s ease;
}
body #party button:hover:not(:disabled) {
 border-color: #ffe29e;
 background: linear-gradient(180deg, rgba(56, 48, 34, 0.94), rgba(28, 24, 18, 0.96));
 transform: translateY(-1px);
}
body #party button[aria-pressed="true"] {
 border-color: #f7d88b;
 border-bottom: 2px solid #ffe6a3;
 background: linear-gradient(180deg, rgba(78, 62, 34, 0.95), rgba(34, 42, 31, 0.95));
 color: #fff8e6;
 box-shadow: 0 0 18px rgba(242, 204, 118, 0.35), inset 0 1px 0 rgba(255, 248, 220, 0.25);
}

/* Unified Tactical Turn Banner & Combat Command Deck (Chapters I-IV) */
body #turn,
body #combat-turn-banner {
 position: fixed;
 top: 16px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 26;
 padding: 9px 20px;
 font: 700 13px/1.25 'Cinzel', Georgia, serif;
 letter-spacing: 0.11em;
 text-transform: uppercase;
 color: #ffebb3;
 background: linear-gradient(180deg, rgba(20, 27, 23, 0.95), rgba(10, 14, 12, 0.98));
 border: 1px solid rgba(232, 198, 118, 0.72);
 border-top: 2px solid #ffe299;
 border-radius: 6px;
 box-shadow: 0 12px 36px rgba(0, 0, 0, 0.78), 0 0 22px rgba(216, 181, 116, 0.22);
 backdrop-filter: blur(10px);
 pointer-events: none;
 white-space: nowrap;
}
body #battle p {
 margin: 0 0 8px;
 font: 600 13px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
 color: #fce8b8;
}
body #battle small {
 display: block;
 margin: 4px 0 8px;
 font: 500 11px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
 color: #d8cbb0;
 letter-spacing: 0.02em;
}
body #battle button {
 width: 100%;
 text-align: left;
 margin: 4px 0;
 padding: 8px 11px;
 border-radius: 5px;
 font: 500 12px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Unified 3D-Projected Waypoints & Warning Badges */
#coast-waypoint,
#forest-exit-marker,
#shed-waypoint,
#report-direction {
 position: fixed;
 z-index: 20;
 transform: translate(-50%, -50%);
 padding: 6px 13px;
 font: 700 11px/1.2 'Cinzel', Georgia, serif;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #ffe7ad;
 background: linear-gradient(180deg, rgba(18, 23, 20, 0.92), rgba(10, 13, 12, 0.95));
 border: 1px solid rgba(232, 196, 116, 0.68);
 border-radius: 99px;
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.72), 0 0 14px rgba(216, 181, 116, 0.22);
 backdrop-filter: blur(6px);
 pointer-events: none;
 white-space: nowrap;
}
#coast-waypoint::before,
#forest-exit-marker::before,
#shed-waypoint::before,
#report-direction::before {
 content: "◆ ";
 color: #f6ce76;
}
#cage-warning {
 position: fixed !important;
 left: 50% !important;
 top: 64px !important;
 transform: translateX(-50%) !important;
 z-index: 27;
 padding: 8px 16px !important;
 font: 700 12px/1.25 'Cinzel', Georgia, serif !important;
 letter-spacing: 0.08em;
 color: #ffe4dc !important;
 background: linear-gradient(180deg, rgba(112, 24, 18, 0.94), rgba(58, 12, 10, 0.96)) !important;
 border: 1px solid #ff8570 !important;
 border-radius: 6px;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 82, 62, 0.45);
 pointer-events: none;
}

/* Unified Context Prompts, Toast Notices, Loading & Death Screens */
body #prompt:not(:empty),
body #campnotice:not(:empty) {
 padding: 9px 16px;
 font: 600 13px/1.35 'Plus Jakarta Sans', system-ui, sans-serif;
 letter-spacing: 0.02em;
 color: #fff6df;
 background: linear-gradient(180deg, rgba(18, 24, 21, 0.92), rgba(10, 14, 12, 0.96));
 border: 1px solid rgba(224, 188, 118, 0.55);
 border-bottom: 2px solid #e2be76;
 border-radius: 6px;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.68), 0 0 16px rgba(216, 181, 116, 0.15);
 backdrop-filter: blur(8px);
}
body #prompt:empty,
body #campnotice:empty {
 display: none !important;
}
body #notice {
 top: 68px;
 padding: 10px 18px;
 font: 600 13px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
 letter-spacing: 0.02em;
 color: #fff5dc;
 background: linear-gradient(180deg, rgba(20, 26, 23, 0.94), rgba(11, 15, 13, 0.97));
 border: 1px solid rgba(228, 194, 122, 0.58);
 border-left: 3px solid #f0cc7e;
 border-radius: 6px;
 box-shadow: 0 12px 34px rgba(0, 0, 0, 0.72);
 backdrop-filter: blur(10px);
 z-index: 25;
}
body #loading h1,
body #death h2,
body #deathscreen h1 {
 font-family: 'Cinzel', Georgia, serif;
 letter-spacing: 0.08em;
 color: #f3d9a2;
 text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}
body #loading button#continue {
 margin-top: 22px;
 padding: 13px 36px;
 font: 600 13px/1.2 'Cinzel', Georgia, serif;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: #fff6df;
 background: linear-gradient(180deg, rgba(96, 74, 40, 0.92), rgba(32, 25, 16, 0.96));
 border: 1px solid #e6c27a;
 border-radius: 5px;
 box-shadow: 0 0 28px rgba(216, 181, 116, 0.28), inset 0 1px 0 rgba(255, 244, 214, 0.35);
}
body #death,
body #deathscreen {
 background: radial-gradient(ellipse at center, rgba(32, 12, 12, 0.94), rgba(6, 5, 5, 0.98));
 backdrop-filter: blur(10px);
}

/* AAA 3D-Projected Combatant Overhead Health & Tactical Status Plates */
#aaa-combat-plates {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 19;
 overflow: hidden;
}
body[data-paused="true"] #aaa-combat-plates {
 visibility: hidden;
}
.aaa-combat-plate {
 position: absolute;
 left: 0;
 top: 0;
 transform: translate(-50%, -100%);
 min-width: 132px;
 max-width: 188px;
 padding: 6px 9px 7px;
 background: linear-gradient(180deg, rgba(16, 20, 19, 0.90), rgba(9, 12, 11, 0.94));
 border: 1px solid rgba(216, 181, 116, 0.42);
 border-radius: 6px;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 244, 214, 0.08);
 backdrop-filter: blur(6px);
 pointer-events: auto;
 cursor: pointer;
 user-select: none;
 transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.aaa-combat-plate:hover {
 border-color: rgba(247, 216, 139, 0.85);
}
.aaa-combat-plate.is-targeted {
 border-color: #ff6e59;
 border-top: 2px solid #ffd885;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 96, 72, 0.42);
 z-index: 22;
}
.aaa-combat-plate.is-ally {
 min-width: 112px;
 padding: 4px 8px 5px;
 border-color: rgba(142, 224, 162, 0.55);
 background: linear-gradient(180deg, rgba(16, 26, 20, 0.86), rgba(10, 16, 13, 0.92));
 pointer-events: none;
}
.aaa-combat-plate.is-ally.is-active-unit {
 border-color: #f6d379;
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 16px rgba(246, 211, 121, 0.38);
}
.aaa-plate-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 margin-bottom: 4px;
 font: 700 11px/1.15 'Cinzel', Georgia, serif;
 letter-spacing: 0.05em;
 color: #f6e7c5;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.aaa-combat-plate.is-targeted .aaa-plate-name::before {
 content: "◆ ";
 color: #ff7660;
}
.aaa-combat-plate.is-ally.is-active-unit .aaa-plate-name::before {
 content: "★ ";
 color: #f7d883;
}
.aaa-plate-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.aaa-plate-dist {
 font: 700 10px/1 'Plus Jakarta Sans', sans-serif;
 color: #d6c39b;
 opacity: 0.9;
 flex-shrink: 0;
}
.aaa-plate-hp-track {
 position: relative;
 width: 100%;
 height: 6px;
 border-radius: 99px;
 background: rgba(8, 10, 10, 0.9);
 border: 1px solid rgba(255, 235, 190, 0.18);
 overflow: hidden;
}
.aaa-plate-hp-trail {
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 background: linear-gradient(90deg, #ffe29a, #ffae52);
 transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.aaa-plate-hp-fill {
 position: relative;
 height: 100%;
 background: linear-gradient(90deg, #a6241b, #f05442);
 box-shadow: 0 0 8px rgba(240, 84, 66, 0.65);
 transition: width 0.14s ease-out;
}
.aaa-combat-plate.is-ally .aaa-plate-hp-fill {
 background: linear-gradient(90deg, #2d8a4e, #6be38d);
 box-shadow: 0 0 8px rgba(107, 227, 141, 0.5);
}
.aaa-plate-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 4px;
 margin-top: 4px;
 font: 600 9.5px/1.1 'Plus Jakarta Sans', sans-serif;
 color: #dfd2b7;
}
.aaa-plate-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 3px;
 margin-top: 4px;
}
.aaa-plate- badges:empty {
 display: none;
}
.aaa-plate-badge {
 padding: 1.5px 5px;
 border-radius: 3px;
 font: 700 8.5px/1.15 'Plus Jakarta Sans', sans-serif;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 background: rgba(255, 240, 200, 0.12);
 border: 1px solid rgba(216, 181, 116, 0.45);
 color: #ffe5a3;
}
.aaa-plate-badge.badge-Advantage {
 background: rgba(46, 128, 68, 0.38);
 border-color: #7be896;
 color: #c8ffd4;
}
.aaa-plate-badge.badge-Warning {
 background: rgba(160, 62, 24, 0.42);
 border-color: #ff9c59;
 color: #ffe0c2;
}
.aaa-plate-badge.badge-Status {
 background: rgba(124, 48, 160, 0.42);
 border-color: #d794ff;
 color: #f3dcff;
}
.aaa-plate-badge.badge-Boss {
 background: rgba(150, 26, 26, 0.55);
 border-color: #ff7a6b;
 color: #ffe3de;
}

/* Battle Command Deck Hotkey & Target Cycle Hint */
.aaa-battle-hint {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 margin-top: 6px;
 padding-top: 6px;
 border-top: 1px solid rgba(216, 181, 116, 0.22);
 font: 600 10px/1.2 'Plus Jakarta Sans', sans-serif;
 color: #c8b896;
 letter-spacing: 0.03em;
}
.aaa-battle-hint kbd {
 display: inline-block;
 padding: 1px 5px;
 border-radius: 3px;
 background: rgba(255, 244, 214, 0.1);
 border: 1px solid rgba(216, 181, 116, 0.42);
 color: #f6dfa4;
 font: 700 9.5px/1.1 'Plus Jakarta Sans', sans-serif;
}

/* AAA 3D World-Space Interactive Object Callout Pill */
.aaa-object-badge {
 position: fixed;
 z-index: 33;
 transform: translate(-50%, -100%);
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 12px;
 border-radius: 999px;
 background: linear-gradient(180deg, rgba(16, 19, 28, 0.92), rgba(9, 11, 17, 0.96));
 border: 1px solid rgba(216, 181, 116, 0.52);
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 14px rgba(242, 204, 118, 0.18);
 color: #f7ead0;
 font: 600 11.5px/1.2 'Plus Jakarta Sans', sans-serif;
 pointer-events: auto;
 cursor: pointer;
 user-select: none;
 white-space: nowrap;
 transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.aaa-object-badge[hidden] {
 display: none !important;
}
.aaa-object-badge.is-ready {
 border-color: #f5d37e;
 box-shadow: 0 10px 26px rgba(0, 0, 0, 0.78), 0 0 18px rgba(245, 211, 126, 0.44);
 background: linear-gradient(180deg, rgba(28, 24, 16, 0.95), rgba(14, 12, 9, 0.98));
}
.aaa-object-badge kbd {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 20px;
 height: 20px;
 padding: 0 6px;
 border-radius: 999px;
 background: linear-gradient(180deg, #f5d788, #c99b42);
 color: #191308;
 font: 800 10.5px/1 'Plus Jakarta Sans', sans-serif;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.aaa-object-badge:not(.is-ready) kbd {
 background: rgba(255, 240, 200, 0.14);
 border: 1px solid rgba(216, 181, 116, 0.45);
 color: #e8d5a7;
}
.aaa-object-badge .aaa-obj-dist {
 color: #c7b48d;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.04em;
}
.aaa-object-badge.is-ready .aaa-obj-dist {
 color: #8ef2a6;
}

/* AAA Quick-Use Field Supplies Bar */
.aaa-quick-items {
 position: fixed;
 left: 190px;
 bottom: 56px;
 z-index: 32;
 display: flex;
 gap: 8px;
 pointer-events: auto;
}
@media (max-width: 700px) {
 .aaa-quick-items {
  left: 164px;
  bottom: 54px;
 }
}
.aaa-quick-items[hidden] {
 display: none !important;
}
.aaa-quick-pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 11px;
 border-radius: 999px;
 background: linear-gradient(180deg, rgba(16, 20, 29, 0.88), rgba(10, 12, 18, 0.94));
 border: 1px solid rgba(216, 181, 116, 0.38);
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
 color: #f2e4c6;
 font: 600 11px/1.15 'Plus Jakarta Sans', sans-serif;
 cursor: pointer;
 transition: transform 0.14s ease, border-color 0.14s ease;
}
.aaa-quick-pill:hover {
 transform: translateY(-1px);
 border-color: #f5d37e;
}
.aaa-quick-pill kbd {
 padding: 1.5px 5px;
 border-radius: 4px;
 background: rgba(245, 211, 126, 0.16);
 border: 1px solid rgba(245, 211, 126, 0.48);
 color: #ffe39e;
 font: 700 9.5px/1 'Plus Jakarta Sans', sans-serif;
}
.aaa-quick-pill b {
 color: #8ef2a6;
 font-weight: 800;
}

/* ==========================================================================
   AAA START SCREEN, CHAPTER RIBBON & OPENING INTRO SEQUENCE
   ========================================================================== */
#startscreen {
 position: fixed;
 inset: 0;
 z-index: 20;
 overflow: hidden;
 background:
  radial-gradient(ellipse at 50% 34%, rgba(28, 36, 26, 0.14) 0%, rgba(7, 10, 14, 0.72) 68%, rgba(4, 6, 9, 0.94) 100%),
  linear-gradient(180deg, rgba(4, 6, 8, 0.78) 0%, transparent 28%, transparent 65%, rgba(4, 6, 8, 0.92) 100%) !important;
 backdrop-filter: blur(1.5px);
}
.aaa-title-embers {
 position: absolute;
 inset: 0;
 pointer-events: none;
 overflow: hidden;
}
.aaa-title-embers span {
 position: absolute;
 bottom: -20px;
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: radial-gradient(circle, #ffe8a3 0%, #e09c3e 65%, transparent 100%);
 box-shadow: 0 0 12px 2px rgba(245, 196, 105, 0.65);
 opacity: 0;
 animation: aaa-ember-rise 9s linear infinite;
}
.aaa-title-embers span:nth-child(1)  { left: 8%;  animation-duration: 8.5s; animation-delay: 0.2s; }
.aaa-title-embers span:nth-child(2)  { left: 16%; animation-duration: 11s;  animation-delay: 1.8s; width: 3px; height: 3px; }
.aaa-title-embers span:nth-child(3)  { left: 25%; animation-duration: 9.2s; animation-delay: 3.1s; }
.aaa-title-embers span:nth-child(4)  { left: 34%; animation-duration: 10.4s;animation-delay: 0.9s; width: 5px; height: 5px; }
.aaa-title-embers span:nth-child(5)  { left: 43%; animation-duration: 8.8s; animation-delay: 2.4s; }
.aaa-title-embers span:nth-child(6)  { left: 52%; animation-duration: 11.6s;animation-delay: 4.0s; width: 3px; height: 3px; }
.aaa-title-embers span:nth-child(7)  { left: 61%; animation-duration: 9.6s; animation-delay: 1.2s; }
.aaa-title-embers span:nth-child(8)  { left: 70%; animation-duration: 10.1s;animation-delay: 2.9s; width: 5px; height: 5px; }
.aaa-title-embers span:nth-child(9)  { left: 78%; animation-duration: 8.9s; animation-delay: 0.6s; }
.aaa-title-embers span:nth-child(10) { left: 85%; animation-duration: 11.2s;animation-delay: 3.5s; }
.aaa-title-embers span:nth-child(11) { left: 91%; animation-duration: 9.4s; animation-delay: 1.5s; width: 3px; height: 3px; }
.aaa-title-embers span:nth-child(12) { left: 48%; animation-duration: 10.7s;animation-delay: 5.1s; }
@keyframes aaa-ember-rise {
 0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
 20%  { opacity: 0.85; }
 75%  { opacity: 0.65; }
 100% { transform: translateY(-92vh) translateX(36px) scale(1.25); opacity: 0; }
}

.startcopy #title-camera-caption {
 display: inline-block;
 padding: 4px 14px;
 border-radius: 999px;
 background: rgba(18, 22, 20, 0.72);
 border: 1px solid rgba(216, 181, 116, 0.38);
 color: #f3dba4;
 font: 700 10px/1.2 'Plus Jakarta Sans', sans-serif;
 letter-spacing: 0.24em;
 margin-bottom: 6px;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.aaa-start-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 12px;
 margin-top: 18px;
}
.aaa-start-actions button,
.startcopy > button {
 margin: 4px !important;
 padding: 15px 46px !important;
 min-width: 240px;
 clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
 font: 700 13px/1.2 'Cinzel', Georgia, serif !important;
 letter-spacing: 0.2em !important;
 color: #fff4d6 !important;
 border: 1px solid #e2be78 !important;
 background: linear-gradient(180deg, rgba(108, 82, 42, 0.92), rgba(26, 21, 16, 0.96)) !important;
 box-shadow: 0 0 32px rgba(216, 181, 116, 0.26), inset 0 1px 0 rgba(255, 245, 215, 0.35) !important;
}
.aaa-start-actions button:hover:enabled,
.startcopy > button:hover:enabled {
 background: linear-gradient(180deg, rgba(138, 105, 55, 0.96), rgba(40, 31, 22, 0.98)) !important;
 box-shadow: 0 0 42px rgba(242, 205, 132, 0.48), inset 0 1px 0 rgba(255, 248, 225, 0.55) !important;
 transform: translateY(-2px) scale(1.02) !important;
}

.aaa-chapter-ribbon {
 display: grid;
 grid-template-columns: repeat(4, minmax(145px, 195px));
 gap: 10px;
 justify-content: center;
 margin: 22px auto 0;
 max-width: 840px;
}
.aaa-chapter-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 10px 12px;
 border-radius: 6px;
 text-decoration: none;
 background: linear-gradient(180deg, rgba(18, 22, 22, 0.82), rgba(10, 13, 14, 0.92));
 border: 1px solid rgba(216, 181, 116, 0.32);
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
 transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.aaa-chapter-card:hover,
.aaa-chapter-card.active {
 border-color: #f0ce84;
 background: linear-gradient(180deg, rgba(44, 36, 24, 0.88), rgba(18, 16, 13, 0.95));
 box-shadow: 0 10px 26px rgba(0, 0, 0, 0.72), 0 0 16px rgba(216, 181, 116, 0.24);
 transform: translateY(-2px);
}
.aaa-chapter-card small {
 font: 700 9px/1.1 'Plus Jakarta Sans', sans-serif !important;
 letter-spacing: 0.2em !important;
 color: #d8b574 !important;
}
.aaa-chapter-card strong {
 font: 600 14px/1.25 'Cinzel', Georgia, serif;
 color: #fff2d4;
 margin: 4px 0 2px;
}
.aaa-chapter-card span {
 font: 500 10.5px/1.2 'Plus Jakarta Sans', sans-serif;
 color: #bfb399;
}
@media (max-width: 760px) {
 .aaa-chapter-ribbon {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  margin-top: 14px;
 }
}

/* Opening Cinematic Intro Overlay */
#introoverlay {
 border-top: 64px solid #050706 !important;
 border-bottom: 64px solid #050706 !important;
 background: linear-gradient(0deg, rgba(5, 8, 7, 0.88) 0%, rgba(5, 8, 7, 0.38) 38%, transparent 65%) !important;
}
.aaa-intro-card {
 max-width: 680px;
 padding: 18px 24px;
 border-left: 3px solid #e2be78;
 background: linear-gradient(90deg, rgba(12, 16, 15, 0.86), rgba(12, 16, 15, 0.25));
 backdrop-filter: blur(6px);
 border-radius: 0 8px 8px 0;
}
#intro-kicker {
 display: block;
 font: 700 10.5px/1.2 'Plus Jakarta Sans', sans-serif;
 letter-spacing: 0.24em;
 color: #e2be78;
 margin-bottom: 6px;
}
#intro-title {
 font: 600 clamp(32px, 4.5vw, 50px)/1.12 'Cinzel', Georgia, serif !important;
 color: #fff3d6;
 margin: 0 0 8px !important;
 text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}
#intro-subtitle {
 font: 500 20px/1.45 'Cormorant Garamond', Georgia, serif;
 color: #e8dec8;
 margin: 0 0 14px !important;
}
#skipintro {
 font: 600 11.5px/1.2 'Plus Jakarta Sans', sans-serif !important;
 letter-spacing: 0.08em;
 padding: 10px 18px !important;
 border-radius: 999px !important;
 background: rgba(16, 20, 19, 0.88) !important;
 border: 1px solid rgba(216, 181, 116, 0.5) !important;
}

/* Chapters II-IV Loading / Chapter Card Screen */
body #loading {
 background:
  radial-gradient(ellipse at 50% 40%, rgba(34, 44, 34, 0.45), rgba(6, 9, 8, 0.98) 72%),
  linear-gradient(180deg, #070a09, #0c120f) !important;
}
body #loading h1,
body #loading h2 {
 font: 600 clamp(38px, 5.5vw, 72px)/1.12 'Cinzel', Georgia, serif !important;
 letter-spacing: 0.08em;
 color: #f6e2b3 !important;
 text-shadow: 0 6px 28px rgba(0, 0, 0, 0.9);
 margin: 10px 0 12px !important;
}
body #loading p {
 font: 500 20px/1.5 'Cormorant Garamond', Georgia, serif !important;
 color: #dfd4bc !important;
}
body #loading #continue {
 margin-top: 22px;
 padding: 14px 40px;
 clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
 font: 700 13px/1.2 'Cinzel', Georgia, serif;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: #fff4d6;
 border: 1px solid #e2be78;
 background: linear-gradient(180deg, rgba(108, 82, 42, 0.92), rgba(26, 21, 16, 0.96));
 box-shadow: 0 0 28px rgba(216, 181, 116, 0.3);
}






