:root {
  color-scheme: dark;
  --bg: #10121a; --panel: #24252d; --border: #665b50;
  --gold: #d9b47b; --text: #efe0c8; --muted: #b2a99f;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: radial-gradient(circle at 48% -20%, #323342 0, #13151c 48%, #0d0f16 100%); color: var(--text); font-family: Georgia, Cambria, serif; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #f0c47c; outline-offset: 2px; }
button:disabled { opacity: .42; cursor: not-allowed; }
.page-shell { width: min(1510px, 100%); margin: auto; padding: 14px; }
.masthead { min-height: 86px; display: flex; align-items: center; gap: 15px; padding: 12px 20px; border: 2px solid #71604b; background: linear-gradient(120deg,#23242f,#11141c 62%,#24202a); box-shadow: inset 0 0 0 3px #14161e, 0 8px 22px #06070a70; margin-bottom: 12px; }
.masthead-mark { width: 44px; height: 44px; display: grid; place-items: center; background: #403329; border: 1px solid #94764f; color: #e4bf81; font-size: 22px; }
.masthead-title { flex: 1; min-width: 0; }
.masthead-title h1 { font-size: clamp(22px,2.3vw,34px); letter-spacing: .045em; margin: 3px 0 0; text-transform: uppercase; font-weight: 700; text-shadow: 2px 3px #08090d; }
.eyebrow { margin: 0; font: 11px/1.3 system-ui,sans-serif; letter-spacing: .21em; text-transform: uppercase; color: var(--gold); }
.build-label { flex: none; font: 12px system-ui,sans-serif; color: #d5c6af; border: 1px solid #554e48; padding: 9px 12px; background: #161820; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #bb9c6d; margin-right: 4px; }
.version { font-weight: 700; color: var(--gold); margin-left: 7px; }
.game-shell { display: grid; grid-template-columns: minmax(198px,.9fr) minmax(0,2.55fr) minmax(210px,1fr); gap: 11px; align-items: stretch; }
.panel { position: relative; background: linear-gradient(135deg,#2a2b34 0%,#1a1c25 70%); border: 2px solid var(--border); outline: 1px solid #0b0d12; box-shadow: inset 0 0 0 3px #12151d, 0 3px 8px #07070b6a; padding: 13px; min-width: 0; }
.panel-heading { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #5f5244; padding-bottom: 10px; margin-bottom: 12px; color: var(--gold); }
.panel-heading h2 { font-weight: 600; font-size: 17px; line-height: 1.25; margin: 0; }
.panel-heading.compact { padding-bottom: 8px; margin-bottom: 9px; }
.panel-heading.compact h2 { font-size: 15px; }
.panel-help, .small-note { margin: 0 0 13px; font: 11px/1.5 system-ui,sans-serif; color: #ada39a; }
.inventory-group { margin-bottom: 13px; }
.inventory-group h3 { color: #cfb896; font-size: 12px; font-weight: normal; margin: 0 0 7px; padding-bottom: 5px; border-bottom: 1px solid #554d43; letter-spacing: .09em; text-transform: uppercase; }
.item-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.item-slot { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 1px solid #5d544b; color: #e0c29c; background: linear-gradient(145deg,#171922,#0e1218); font: 25px/1 Georgia,serif; text-shadow: 1px 2px #000; padding: 2px; border-radius: 2px; }
.item-slot:not(.empty):hover, .item-slot.chosen { border-color: #e8b565; background: #363028; }
.item-slot.empty { opacity: .55; }
.inventory-note { min-height: 43px; margin: 11px 0 0; padding: 10px; background: #141720; border-left: 2px solid #a88455; font: 11px/1.4 system-ui,sans-serif; color: #d6c7b1; }
.vista-panel { display: flex; flex-direction: column; gap: 9px; }
.vista-topline { display: flex; justify-content: space-between; align-items: end; gap: 8px; min-height: 44px; }
.vista-topline h2 { margin: 4px 0 0; font-size: 21px; font-weight: normal; }
.location-count { color: var(--gold); font: 12px system-ui,sans-serif; white-space: nowrap; }
.scene-window { position: relative; background: #10141c; border: 4px ridge #766550; min-height: 300px; aspect-ratio: 16 / 9; overflow: hidden; flex: 1; }
.scene-window img { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; opacity: 1; transition: opacity .18s ease, transform .18s ease; image-rendering: auto; }
.scene-window img.is-changing { opacity: .08; transform: scale(1.02); }
.scene-shade { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(0deg,#090b0fea,transparent 42%),linear-gradient(90deg,#070a131e,transparent 20%,transparent 80%,#070a131e); }
.scene-caption { position: absolute; left: 0; bottom: 0; right: 0; padding: 30px 18px 12px; display: flex; align-items: center; gap: 9px; font: 14px/1.45 Georgia,serif; color: #f7e5cd; }
.scene-caption p { margin: 0; } .caption-decor { color: #e2b57a; font-size: 18px; }
.action-row { display: flex; gap: 7px; flex-wrap: wrap; }
.button { border: 1px solid #78634e; padding: 11px 14px; background: linear-gradient(#3c3940,#292931); color: #ebdac0; font: 13px system-ui,sans-serif; border-radius: 3px; box-shadow: inset 0 1px #736557; }
.button:not(:disabled):hover { filter: brightness(1.18); }
.button-gold { background: linear-gradient(#765936,#4d3928); border-color: #b58c56; color: #fff0cb; font-weight: 700; }
.vista-panel>.small-note { margin: 0; }
.party-count { margin-left: auto; font: 12px system-ui,sans-serif; }
.party-card { width: 100%; display: flex; gap: 9px; text-align: left; align-items: center; padding: 7px; background: linear-gradient(100deg,#151720,#20222b); color: var(--text); border: 1px solid #63594d; margin-bottom: 8px; border-radius: 2px; }
.party-card:hover, .party-card.active { border-color: #d3a469; background: linear-gradient(100deg,#302a27,#22232b); }
.portrait { flex: 0 0 64px; height: 76px; position: relative; overflow: hidden; display: grid; place-items: center; border: 2px solid #887257; box-shadow: inset 0 -16px #0004; color: #e8d0ab; }
.portrait::before { content: ""; position: absolute; width: 54px; height: 65px; left: 3px; bottom: -20px; background: #0d111b60; border-radius: 44% 44% 10% 10%; }
.portrait b { position: relative; font-size: 29px; text-shadow: 2px 3px #111; }
.portrait-rukar { background: linear-gradient(145deg,#986046,#2f2831); }
.portrait-seren { background: linear-gradient(145deg,#c1a35f,#343649); }
.portrait-mirael { background: linear-gradient(145deg,#53736d,#242c3b); }
.hero-summary { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-summary strong { font-size: 17px; }
.hero-summary small { font-size: 12px; color: #e0c79e; }
.hero-summary em { font: 10px/1.4 system-ui,sans-serif; color: #b0a9a0; font-style: normal; }
.character-detail { border: 1px solid #63523f; background: #151821; padding: 12px; margin: 11px 0; }
.detail-label { display: block; font: 10px system-ui,sans-serif; text-transform: uppercase; color: #c6a272; letter-spacing: .12em; margin-bottom: 6px; }
.character-detail strong { font-size: 14px; }
.character-detail p { margin: 8px 0 0; font: 12px/1.55 system-ui,sans-serif; color: #c9bdaf; }
.bottom-dock { display: grid; grid-template-columns: minmax(198px,.9fr) minmax(0,2.55fr) minmax(210px,1fr); gap: 11px; margin-top: 11px; }
.tiny-label { margin-left: auto; font: 10px system-ui,sans-serif; color: #a99b87; }
.route-map { display: block; width: 100%; height: 130px; image-rendering: auto; border: 1px solid #463b31; }
.map-current { display: block; margin-top: 4px; font: 11px system-ui,sans-serif; color: #d9c49f; }
.event-log { height: 138px; overflow: auto; padding: 2px 4px; font: 13px/1.6 system-ui,sans-serif; color: #d4c7b7; }
.event-log p { margin: 0 0 6px; padding-left: 14px; position: relative; }
.event-log p::before { content: "›"; position: absolute; left: 1px; color: #d8a66b; }
.controls-panel .control-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; max-width: 190px; margin: auto; }
.control-pad button { border: 1px solid #726352; color: #e7d0a9; background: linear-gradient(#464048,#2b2b33); min-height: 44px; border-radius: 3px; font-size: 18px; }
.control-pad button:hover { background: #5d4b38; }
.control-pad button:nth-child(4) { grid-column: 2; }
.control-pad .gold-pad { color: #ffcc76; border-color: #a6814e; }
.controls-panel p { font: 10px/1.45 system-ui,sans-serif; color: #aba298; margin: 8px 0 0; text-align: center; }
.footer { padding: 10px 2px 4px; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; color: #948d86; font: 11px system-ui,sans-serif; }
@media (max-width: 1000px) {
 .page-shell { padding: 8px; } .game-shell,.bottom-dock { grid-template-columns: minmax(150px,.8fr) minmax(0,2fr); }
 .vista-panel { grid-column: 1/-1; grid-row: 1; } .inventory-panel { grid-column: 1; grid-row: 2; } .party-panel { grid-column: 2; grid-row: 2; }
 .bottom-dock { grid-template-columns: minmax(150px,1fr) minmax(0,2fr); }
 .controls-panel { grid-column: 1/-1; }
 .controls-panel .control-pad { max-width: 210px; }
 .party-card { display: inline-flex; width: calc(33.333% - 6px); min-width: 150px; vertical-align: top; margin-right: 4px; }
}
@media (max-width: 650px) {
 .masthead { padding: 10px; gap: 9px; } .masthead-mark { width: 32px; height: 32px; font-size: 16px; } .masthead-title h1 { font-size: 18px; }
 .build-label { font-size: 10px; padding: 5px; } .build-label .status-dot { display: none; }
 .game-shell,.bottom-dock { display: flex; flex-direction: column; }
 .panel { padding: 10px; } .scene-window { min-height: 210px; }
 .action-row .button { flex: 1; padding: 10px 5px; font-size: 11px; }
 .party-card { width: 100%; margin-right: 0; }
 .portrait { flex-basis: 56px; height: 62px; }
 .hero-summary strong { font-size: 15px; }
 .item-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .item-slot { max-height: 64px; }
 .route-map { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms!important; animation-duration: .01ms!important; } }