/* One game frame: screens replace the scene, above the existing party deck. */
.view-frame>.game-panel,.title-screen>.game-panel{
 position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
 margin:0;padding:0;border:0;border-radius:0;transform:none;box-shadow:none;
 display:flex;flex-direction:column;overflow:hidden;z-index:20;
 background:#101714;color:#e6ddc9;outline:none;container-type:size;
}
.game-panel[hidden],.inspect-panel[hidden]{display:none!important}
.view-frame.has-screen>:not(.game-panel):not(.inspect-panel){visibility:hidden;pointer-events:none}
.title-screen.has-screen>:not(.game-panel):not(.inspect-panel){visibility:hidden;pointer-events:none}
.game-panel>.modal-head{
 position:relative;inset:auto;flex:0 0 auto;min-height:42px;padding:7px 22px;
 display:flex;align-items:center;justify-content:space-between;
 background:#141b18;color:#e6ddc9;border:0;
}
.game-panel>.modal-head h2{font:600 clamp(22px,2vw,30px) var(--heading);letter-spacing:.08em;margin:0}
.game-panel>.modal-head .close-button{font:22px var(--sans);padding:3px 12px;min-height:32px;color:#b9aa91;background:transparent;border:0;box-shadow:none}
.game-panel>.modal-body{position:relative;flex:1;min-height:0;padding:16px 22px;overflow:auto;background:#111815;color:#e6ddc9;overscroll-behavior:contain}
.game-panel>.modal-body p{max-width:80ch}
.game-panel>.modal-body>p:first-child{margin-top:0}
.game-panel .modal-notice:empty{display:none}
.game-panel .modal-notice:not(:empty){position:sticky;bottom:0;padding:8px 14px;margin:8px 0 0;z-index:6;background:#26302bf2;color:#e6ddc9;border:0;font:17px/1.35 var(--sans)}
.game-panel :is(input,select,textarea){color-scheme:dark}
.game-panel :is(.muted,.eyebrow){color:#b9aa91}
.game-panel a{color:#d4bd84}
.game-panel button:focus-visible{outline:2px solid #75b9d4;outline-offset:2px}
.inspect-panel{position:absolute;inset:auto 0 0;width:100%;max-width:none;max-height:68%;margin:0;padding:0;border:0;box-shadow:0 -12px 30px #0007;background:#c4b18e;color:#29231e;z-index:30;overflow:auto;transform:none}
.inspect-panel .modal-head{padding:8px 22px}.inspect-panel .modal-body{padding:12px 22px}.inspect-panel .examine-copy{white-space:pre-line}

/* The supplied frontispiece, with real, restrained text controls on the right. */
.title-screen{width:min(100%,177.7778svh);height:auto;aspect-ratio:16/9;top:50svh;transform:translateY(-50%);margin:auto;overflow:hidden;background:#070b10}
.title-screen:after{display:none}
.title-screen .menu-artwork{position:absolute;inset:0;background:url('./assets/media/menu-poster-v54.webp') center/cover no-repeat}
.title-screen .menu-artwork:after{display:none}
.title-screen .title-options{position:absolute;inset:43% 5% 27% 75%;display:flex;flex-direction:column;gap:0;max-height:none}
.title-screen .title-options:before{content:'';position:absolute;left:8px;top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,#b6ab8c80,transparent)}
.title-screen .title-option{position:relative;flex:1;min-height:0;width:100%;text-align:left;clip-path:none;border:0;box-shadow:none;padding:3px 8px 3px 38px;background:transparent;border-radius:0;filter:none}
.title-screen .title-option span{font:500 clamp(18px,1.8vw,29px) var(--heading);font-variant:small-caps;letter-spacing:.09em;text-transform:none;color:#aeb0ad;opacity:1}
.title-screen .title-option:before{content:'◇';position:absolute;left:0;top:50%;transform:translateY(-50%);font:26px var(--heading);color:#777e7b}
.title-screen .title-option:after{content:'';position:absolute;inset:9% 0 9% 20px;border-block:1px solid transparent;pointer-events:none}
.title-screen .title-option:is(:hover,:focus-visible),.title-options:not(:has(button:hover,button:focus-visible)) .title-option:first-child{background:linear-gradient(90deg,transparent,#a68a5330,transparent);outline:0;box-shadow:none}
.title-screen .title-option:is(:hover,:focus-visible) span,.title-options:not(:has(button:hover,button:focus-visible)) .title-option:first-child span{color:#f0e5cb;text-shadow:0 0 10px #d2b37765}
.title-screen .title-option:is(:hover,:focus-visible):before,.title-options:not(:has(button:hover,button:focus-visible)) .title-option:first-child:before{color:#e8d2a0;text-shadow:0 0 8px #f3d58d}
.title-screen .title-option:is(:hover,:focus-visible):after,.title-options:not(:has(button:hover,button:focus-visible)) .title-option:first-child:after{border-image:linear-gradient(90deg,#c6a86b,transparent) 1}
.title-screen .title-extras{position:absolute;left:77%;right:5%;top:78%;display:grid;gap:6px}
.title-screen .title-extras button{font:500 clamp(14px,1.1vw,19px) var(--heading);text-align:left;padding:3px 0;color:#a6a8a3;background:none;box-shadow:none;border:0;letter-spacing:.045em}
.title-screen .title-extras button:is(:hover,:focus-visible){color:#e6ddc9;outline:0;text-decoration:underline;text-underline-offset:5px}
.title-screen .title-extras .continue-game{color:#d7c69c}
.title-screen .menu-version{left:3%;bottom:2%;font:14px var(--sans);color:#9ca19c}

/* Invisible 5 x 4 slots. Only the objects themselves mark occupied space. */
.pack-board,.inventory-top .pack-board,.loot-layout .pack-board{background-image:none!important;background-color:#111713;border:0!important;box-shadow:none!important;box-sizing:border-box}
.pack-item,.pack-item.chosen,.pack-item:hover,.pack-item:focus-visible{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
.pack-item.chosen .catalog-art,.pack-item:is(:hover,:focus-visible) .catalog-art{filter:drop-shadow(0 0 4px #cbb27b85) brightness(1.12)}
.pack-item .catalog-art{object-fit:contain}
.pack-item .item-durability{display:none}
.pack-board.drop-ready,.pack-item.drop-ready,[data-equip].drop-ready{outline:none!important;box-shadow:none!important;background-color:#293c303d!important}
.view-frame .inventory-modal>.modal-head{display:none}
.view-frame .inventory-modal>.modal-body{padding:12px 20px;overflow:hidden}
.view-frame .inventory-modal .pack-screen{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,28%);grid-template-rows:auto minmax(0,1fr) auto;gap:8px 24px}
.view-frame .pack-title{grid-column:1/-1;gap:18px;align-items:center;margin:0;padding:0 0 4px;border:0}
.view-frame .pack-title h2{font-size:26px;flex-shrink:0}.view-frame .pack-title>span{font-size:22px;min-width:0}.view-frame .pack-title small{font-size:17px}
.view-frame .bak-inventory{grid-column:1;grid-row:2;min-height:0;grid-template-columns:minmax(110px,22%) minmax(0,1fr);gap:12px;align-items:stretch}
.view-frame .bak-equipment{min-height:0;gap:8px;grid-template-rows:1fr 1fr 1.45fr}
.view-frame .bak-equipment .gear-slot{border:0;background:none;box-shadow:none;min-height:0;display:flex;flex-direction:column}
.view-frame .bak-equipment .gear-slot>span{font:16px var(--sans);padding:0;text-align:center}
.view-frame .bak-equipment .gear-slot>button{flex:1;min-height:0;border:0!important;background:none!important;box-shadow:none!important;outline:0!important}
.view-frame .bak-equipment .gear-slot button.chosen .catalog-art{filter:drop-shadow(0 0 4px #b78a4d88)}
.view-frame .bak-equipment .gear-slot .catalog-art{inset:3%;width:94%;height:94%;border:0}
.view-frame .bak-pack{position:relative;height:100%;min-height:0;container-type:size}
.view-frame .bak-pack .pack-board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:min(100cqh,80cqw);width:min(125cqh,100cqw);aspect-ratio:5/4;min-height:0;max-height:none}
.view-frame .bak-bottom{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:10px;margin:0;padding:0}
.view-frame .bak-bottom .inventory-orbs{display:none}
.view-frame .bak-detail{flex:1;max-height:none;min-height:0;overflow:auto;padding:0 6px 0 0}
.view-frame .bak-detail h3{font-size:25px}.view-frame .bak-detail p{font:18px/1.4 var(--sans)}
.view-frame .bak-exit{align-self:flex-end;padding:7px 22px;font-size:18px!important}
.view-frame .pack-utilities{grid-column:1/-1;grid-row:3;border:0;padding:0;gap:12px;min-height:38px}
.view-frame .pack-utilities .key-pocket{min-width:0;flex:1;padding:5px 0;background:none;border:0}
.view-frame .key-pocket[open]>div{position:absolute;bottom:60px;left:18px;right:18px;max-height:55%;overflow:auto;background:#1a241fec;padding:15px;z-index:8}
.view-frame .key-pocket[open]>p{display:none}
.view-frame .active-drinks{flex:0 0 auto;font-size:14px;margin:0;max-height:64px;overflow:auto}
.view-frame .inventory-turn-notice{grid-column:1/-1;margin:0;font-size:16px}
.view-frame .pack-screen:has(.inventory-turn-notice){grid-template-rows:auto auto minmax(0,1fr) auto}
.view-frame .pack-screen:has(.inventory-turn-notice) .pack-title{grid-row:2}
.view-frame .pack-screen:has(.inventory-turn-notice) :is(.bak-inventory,.bak-bottom){grid-row:3}
.view-frame .pack-screen:has(.inventory-turn-notice) .pack-utilities{grid-row:4}
.inventory-modal.game-panel .modal-notice:not(:empty){position:absolute;bottom:6px;left:15%;right:15%}
.control-deck [data-recipient].drop-ready{outline:0!important;filter:drop-shadow(0 0 8px #75b9d4)}

/* The same viewport contains the clock and the party's recovery state. */
.view-frame .camp-modal>.modal-body{padding:0;overflow:hidden;container-type:size}
.view-frame .camp-layout{height:100%;min-height:0;border:0;grid-template-columns:minmax(240px,38%) minmax(0,1fr)}
.view-frame .camp-clock-column{min-height:0;border:0;padding:8px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.view-frame .camp-clock{width:min(100%,calc(100cqh - 105px));flex:0 0 auto;max-width:410px}
.view-frame .camp-clock-column p{margin:6px 0 0;font-size:16px}
.view-frame .camp-sheet{min-height:0;overflow:auto;padding:12px 24px}
.view-frame .camp-sheet th,.view-frame .camp-sheet td{padding:8px 5px;font-size:18px}
.view-frame .camp-sheet p{margin:9px 0;font-size:18px}
.view-frame .camp-separator{margin:6px;font-size:24px}
.view-frame .camp-actions{margin-top:10px;gap:8px}
.view-frame .camp-actions button{padding:8px 12px;min-height:38px;font-size:16px}
.view-frame .camp-bottom{display:none}

/* Maps share the world frame, with travel controls always beside the map. */
.map-modal.game-panel>.modal-body{padding:8px 16px;overflow:hidden}
.atlas-screen{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,25%);gap:18px}
.atlas-map-pane{min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}
.atlas-map-pane .atlas-tabs{margin:0;flex:0 0 auto}
.atlas-map-pane .local-map-frame{flex:1;min-height:0;overflow:hidden;border:0}
.atlas-map-pane .local-map-frame canvas{width:100%;height:100%;display:block}
.atlas-map-pane .atlas-map{flex:1;min-height:0;overflow:auto;border:0}
.atlas-map-pane .map-legend{font-size:14px;flex-shrink:0;margin:0;gap:8px}
.atlas-sidebar{min-height:0;overflow:auto;font:16px/1.4 var(--sans)}
.atlas-sidebar .map-travel-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;padding:0;border:0}
.atlas-sidebar .map-direction-pad{align-self:center}
.atlas-sidebar .map-travel-options{min-width:0}
.atlas-sidebar .map-travel-options button{width:100%;margin:0 0 8px;font-size:16px}
.atlas-sidebar :is(p,.atlas-status){font:16px/1.4 var(--sans)}
.atlas-sidebar .atlas-status{margin-top:12px}
.atlas-sidebar :is(select,.route-selector){max-width:100%;width:100%;font-size:16px}

/* Other screens scroll internally and never cover the party controls. */
.spells-modal.game-panel .spell-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.spells-modal.game-panel .spell{padding:12px;font-size:18px}
.spells-modal.game-panel .spell-desc{font-size:16px;line-height:1.4}
.spells-modal.game-panel .power-row{margin:12px 0}
.saves-modal.game-panel #named-save-form{grid-template-columns:1fr 1fr auto;align-items:end;margin:12px 0}
.saves-modal.game-panel #named-save-list{max-height:none}
.saves-modal.game-panel .save-row{padding:10px 0}
.npc-modal.game-panel>.modal-head{position:absolute;right:4px;top:4px;left:auto;z-index:4;background:none}
.npc-modal.game-panel>.modal-body{padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.npc-modal.game-panel .conversation-scene{height:auto;min-height:0;border:0}
.npc-modal.game-panel .conversation-sheet{padding:12px 28px;max-height:52cqh;overflow:auto}
.npc-modal.game-panel .conversation-speech{font-size:20px;min-height:0;margin-bottom:10px}
.npc-modal.game-panel .conversation-footer{margin-top:10px}
.npc-modal.game-panel .conversation-topic{min-height:38px;padding:6px}
.npc-modal.game-panel .conversation-person{height:97%}
.loot-modal.game-panel .loot-layout{max-width:none;gap:24px}
.loot-modal.game-panel .container-art{display:none}
.loot-modal.game-panel .loot-destination .party-orbs{display:none}
.loot-modal.game-panel .pack-board{width:min(100%,480px);margin:auto;aspect-ratio:5/4}
.riddle-modal.game-panel .riddle-lid{display:none}
.riddle-modal.game-panel .riddle-lock{border:0;padding:16px}
.game-panel .service-interior{max-height:45cqh;object-fit:cover}

@media(max-width:850px){
 .game-panel>.modal-body{padding:10px 12px}.game-panel>.modal-head{padding:5px 12px}
 .view-frame .inventory-modal>.modal-body{padding:8px 12px}
 .view-frame .inventory-modal .pack-screen{grid-template-columns:minmax(0,1fr) 210px;gap:6px 12px}
 .view-frame .bak-inventory{grid-template-columns:90px minmax(0,1fr);gap:8px}
 .view-frame .pack-title>span{order:0;width:auto;font-size:18px}
 .view-frame .pack-title h2{font-size:22px}.view-frame .pack-title small{font-size:15px}
 .view-frame .bak-detail h3{font-size:21px}.view-frame .bak-detail p{font-size:16px}
 .view-frame .bak-equipment .gear-slot>span{font-size:14px}
 .view-frame .pack-utilities>button{padding:6px 8px;font-size:15px}
 .view-frame .shared-coins{font-size:16px}.view-frame .shared-coins strong{font-size:20px}
 .view-frame .camp-layout{grid-template-columns:36% 64%}.view-frame .camp-clock-column{padding:8px}
 .view-frame .camp-sheet{padding:8px 12px}.view-frame .camp-sheet td,.view-frame .camp-sheet th{font-size:15px}
 .atlas-screen{grid-template-columns:minmax(0,1fr) 215px;gap:10px}
 .spells-modal.game-panel .spell-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .title-screen{height:100svh;width:100%;aspect-ratio:auto;top:0;transform:none}
 .title-screen .menu-artwork{background-size:auto 65%;background-position:47% top;background-color:#080d12}
 .title-screen .title-options{inset:43% 10% 19% 35%}
 .title-screen .title-option span{font-size:24px}
 .title-screen .title-extras{top:auto;bottom:5%;left:42%;right:5%;gap:4px}
 .title-screen .menu-version{font-size:12px;bottom:1.5%}
 .view-frame .inventory-modal .pack-screen{display:flex;flex-direction:column;overflow:auto}
 .view-frame .pack-title{flex-wrap:wrap}.view-frame .pack-title>span{order:3;width:100%}
 .view-frame .bak-inventory{flex:0 0 220px;grid-template-columns:75px minmax(0,1fr)}
 .view-frame .bak-bottom{display:block;flex:none}.view-frame .bak-detail{overflow:visible}
 .view-frame .pack-utilities{flex:none;order:4;flex-wrap:wrap}
 .view-frame .bak-exit{float:right;font-size:16px!important}
 .view-frame .camp-modal>.modal-body{overflow:auto}
 .view-frame .camp-layout{height:auto;grid-template-columns:1fr}
 .view-frame .camp-clock{width:230px}.view-frame .camp-clock-column{border:0}
 .view-frame .camp-sheet{overflow:visible}.view-frame .camp-clock-help{display:none}
 .map-modal.game-panel>.modal-body{overflow:auto}
 .atlas-screen{height:auto;min-height:100%;display:block}
 .atlas-map-pane .local-map-frame{flex:none;height:240px}.atlas-sidebar{overflow:visible;margin-top:12px}
 .atlas-map-pane .atlas-map{max-height:320px}
 .saves-modal.game-panel #named-save-form{grid-template-columns:1fr}
 .npc-modal.game-panel .conversation-sheet{padding:10px 14px;max-height:58cqh}
 .npc-modal.game-panel .conversation-speech{font-size:18px}
 .npc-modal.game-panel .conversation-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .spells-modal.game-panel .spell-list{grid-template-columns:1fr}
}

.shop-modal.game-panel .shop-party{display:none}
.shop-modal.game-panel .wares-grid{max-height:none}

.spells-modal.game-panel>.modal-body{overflow:hidden}
.spell-screen{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,30%);gap:26px}
.spell-catalog,.spell-choice{min-height:0;overflow:auto}
.spell-choice h3{font:600 27px var(--heading);margin-top:18px}
.spell-choice p{font-size:18px;line-height:1.45}
.spell-choice .power-row{display:block}.spell-choice .power-row input{display:block;width:100%;margin-top:18px}
.spell-choice .choices button{width:100%;font-size:18px}
.spells-modal.game-panel .spell-list{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.spells-modal.game-panel .spell{min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.spells-modal.game-panel .spell-name{font-size:23px}.spells-modal.game-panel .spell-cost{font-size:15px}
@media(max-width:700px){.spell-screen{gap:12px;grid-template-columns:minmax(0,1fr) 220px}.spells-modal.game-panel .spell-list{grid-template-columns:1fr}}
@media(max-width:560px){.spells-modal.game-panel>.modal-body{overflow:auto}.spell-screen{height:auto;display:flex;flex-direction:column-reverse}.spell-catalog,.spell-choice{overflow:visible}.spells-modal.game-panel .spell-list{grid-template-columns:repeat(2,minmax(0,1fr))}}