:root{--fullscreen-build:98}
/* Viewport frames use inset:0 + height:auto (including installed iOS); no JS height. */
/* Prototype limited to Port, Exploration and TCG. No persistence or art changes.
   Backgrounds extend under iOS safe areas; interactive controls own the insets. */
body[data-view=home] #app{position:fixed;inset:0;width:100%;max-width:none;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;isolation:isolate}
body[data-view=home] #app>.header{position:absolute;inset:0 0 auto;z-index:6;width:100%;min-height:calc(54px + env(safe-area-inset-top,0px));padding:calc(5px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 5px max(8px,env(safe-area-inset-left,0px));background:linear-gradient(#031827d9,#03182722);border:0;box-shadow:none}
body[data-view=home] #app>.home.layout{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%;padding:0;margin:0;overflow:hidden}
body[data-view=home] #app .home-air{position:absolute;inset:0;min-height:0;width:100%;height:100%;margin:0}
body[data-view=home] #app .home-profile{top:calc(61px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px))}
body[data-view=home] #app>.nav{position:absolute;inset:auto 0 0;max-width:none;width:100%;margin:0;border-radius:0;border-inline:0;padding-bottom:max(5px,env(safe-area-inset-bottom,0px));background:linear-gradient(#061723bb,#03111af5)}
body[data-view=home] #app .home-tools{position:absolute;z-index:7;bottom:calc(74px + env(safe-area-inset-bottom,0px));right:max(8px,env(safe-area-inset-right,0px));margin:0;max-width:calc(100% - 16px);background:#041b2cdb}
body[data-view=home] #app .home-tools>summary{min-height:44px;display:flex;align-items:center;padding:8px 12px;font-size:11px;list-style:disclosure-closed}
body[data-view=home] #app .home-tools[open]{width:min(370px,calc(100% - 16px));max-height:65%;overflow:auto;border:1px solid #c4a564}
body[data-view=home] #app .port-destination{bottom:calc(124px + env(safe-area-inset-bottom,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto}
body[data-view=home] #app>.home.layout .home-air>.port-pirate{width:180px;height:240px;left:calc(50% - 90px);bottom:calc(193px + env(safe-area-inset-bottom,0px))}
body[data-view=home] #app .home-caption{position:absolute;left:8px;bottom:calc(81px + env(safe-area-inset-bottom,0px));width:40%;font-size:8px;pointer-events:none}
/* The native dialog remains a dialog for focus containment and Escape handling. */
dialog.voyage-dialog[data-page=map],dialog.voyage-dialog.battle-dialog{position:fixed;inset:0;width:100%;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
dialog.voyage-dialog[data-page=map]>header{position:absolute;inset:0 0 auto;z-index:8;padding:calc(6px + env(safe-area-inset-top,0px)) max(9px,env(safe-area-inset-right,0px)) 6px max(9px,env(safe-area-inset-left,0px));background:linear-gradient(#041a2ff0,#041a2f22);border:0;backdrop-filter:none}
dialog.voyage-dialog[data-page=map]>nav.voyage-actions{position:absolute;inset:auto 0 0;z-index:8;margin:0;padding:6px max(8px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));background:linear-gradient(#071b29bb,#03111af5);border-radius:0}
dialog.voyage-dialog[data-page=map]>main{position:absolute;inset:0;padding:0;overflow:hidden}
dialog.voyage-dialog[data-page=map] .exploration-stage.stage-3d{position:absolute;inset:0;height:100%;width:100%;margin:0;border:0;border-radius:0;box-shadow:none}
dialog.voyage-dialog[data-page=map] .stage-3d .voyage-map{height:100%;min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none}
dialog.voyage-dialog[data-page=map] .exploration-actors{height:100%;border:0;border-radius:0}
dialog.voyage-dialog[data-page=map] .story-cap{position:absolute;z-index:5;top:calc(64px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));width:min(245px,65%);padding:7px 9px!important;background:linear-gradient(110deg,#041a2ce8,#041a2ca8);box-shadow:0 2px 10px #00172566}
dialog.voyage-dialog[data-page=map] .story-cap small{font-size:8px}.voyage-dialog[data-page=map] .story-cap h3{font-size:15px!important;line-height:1.1}.voyage-dialog[data-page=map] .story-cap p{font-size:11px;margin:3px 0!important}.voyage-dialog[data-page=map] .story-cap progress{display:block;margin-top:5px;height:4px}
dialog.voyage-dialog[data-page=map] .map-toolbar{position:absolute;z-index:6;top:calc(66px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));width:29%;display:flex;flex-direction:column;align-items:stretch;padding:4px;background:#041a2cc9;border:1px solid #bba46a80;border-radius:7px}
dialog.voyage-dialog[data-page=map] .map-toolbar h3{font-size:13px!important;text-align:center;margin:0}.voyage-dialog[data-page=map] .map-toolbar button{min-height:44px}
dialog.voyage-dialog[data-page=map] .touch-helm{bottom:calc(80px + env(safe-area-inset-bottom,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px))}
dialog.voyage-dialog[data-page=map] .movement-options{position:absolute;z-index:6;bottom:calc(170px + env(safe-area-inset-bottom,0px));left:max(8px,env(safe-area-inset-left,0px));max-width:calc(100% - 16px);max-height:48%;overflow:auto;margin:0;background:#041a2ce8}
dialog.voyage-dialog[data-page=map] .movement-options>summary{min-height:44px;display:flex;align-items:center;padding:8px 10px}
dialog.voyage-dialog[data-page=map]>main>[role=status]:not(:empty){position:absolute;z-index:7;bottom:calc(222px + env(safe-area-inset-bottom,0px));left:8px;right:8px;max-height:20%;overflow:auto;margin:0}
/* The real game board owns the available space; only hand/field rows pan. */
dialog.voyage-dialog.battle-dialog>header{padding:calc(5px + env(safe-area-inset-top,0px)) max(7px,env(safe-area-inset-right,0px)) 5px max(7px,env(safe-area-inset-left,0px));min-height:54px;background:linear-gradient(#07253be8,#07253b77);border:0;gap:5px;z-index:5}
dialog.voyage-dialog.battle-dialog>header h2{font-size:19px;margin:0;line-height:1.1}.battle-dialog>header small{font-size:9px;letter-spacing:.03em}.battle-dialog>header button{min-height:44px;padding:5px 8px;font-size:10px}
dialog.voyage-dialog.battle-dialog:has(.battle-tabletop)>main{display:flex;flex-direction:column;padding:0 max(4px,env(safe-area-inset-right,0px)) 0 max(4px,env(safe-area-inset-left,0px));overflow:hidden;gap:0}
dialog.voyage-dialog.battle-dialog .battle-tabletop{flex:1;min-height:0;display:grid;grid-template-rows:minmax(150px,1fr) minmax(150px,1fr) minmax(100px,21%);gap:0;width:100%}
dialog.voyage-dialog.battle-dialog .battle-tabletop .opponent-zone{position:relative;display:flex;justify-content:flex-end;min-height:0;padding:0}
dialog.voyage-dialog.battle-dialog .battle-tabletop .opponent-zone .battle-leader-banner{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none}
dialog.voyage-dialog.battle-dialog .battle-tabletop .opponent-zone .battle-field{order:1;min-height:0;margin:0;padding:5px 4px;justify-content:flex-start;z-index:2;flex-shrink:0}
dialog.voyage-dialog.battle-dialog .battle-tabletop .opponent-zone>h3,.battle-dialog .battle-tabletop .opponent-zone>p{position:relative;z-index:2;flex-shrink:0;margin:0!important}
dialog.voyage-dialog.battle-dialog .battle-tabletop .player-zone{display:flex;flex-direction:column;min-height:0;padding:0}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-resource-bar{min-height:38px;padding:2px 8px;margin:0}.battle-dialog .battle-tabletop .don-medallion b{font-size:24px}
dialog.voyage-dialog.battle-dialog .battle-tabletop .player-zone .battle-field{flex:1;min-height:0;justify-content:flex-start;align-items:center;padding:5px 4px}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-field .battle-card{flex-shrink:0;width:clamp(48px,14vw,76px);min-width:clamp(48px,14vw,76px);max-width:none;min-height:44px}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-field .battle-card img{height:clamp(57px,10dvh,90px)}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-field .leader-card img{height:clamp(67px,12dvh,105px)}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-hand{height:100%;min-height:0;margin:0;padding:5px 4px;align-items:center;overflow-x:auto;overflow-y:hidden}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-hand .battle-card{flex-shrink:0;width:clamp(57px,17vw,85px);min-width:clamp(57px,17vw,85px);max-width:none;padding:2px;min-height:44px}
dialog.voyage-dialog.battle-dialog .battle-tabletop .battle-hand .battle-card img{height:clamp(62px,11dvh,100px)}
dialog.voyage-dialog.battle-dialog>main>[role=status]{margin:0;padding:3px 7px;font-size:10px;line-height:1.25;max-height:48px;overflow:auto;flex-shrink:0}
dialog.voyage-dialog.battle-dialog>main>.battle-help{position:absolute;z-index:8;left:8px;right:8px;top:calc(62px + env(safe-area-inset-top,0px));background:#06263bf5;padding:12px;border:1px solid #dbc287;border-radius:8px;font-size:12px}
dialog.voyage-dialog.battle-dialog>main>[data-battle=tips]{align-self:flex-end;min-height:28px;padding:3px 8px;font-size:10px;flex-shrink:0;background:#062237c9;color:#e8dfc3}
dialog.voyage-dialog.battle-dialog>footer{padding:5px max(7px,env(safe-area-inset-right,0px)) max(5px,env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px));gap:6px;background:linear-gradient(#06304aeb,#031421);max-height:35%;overflow-y:auto;z-index:7}
@media(max-height:710px){dialog.voyage-dialog.battle-dialog .battle-tabletop{grid-template-rows:minmax(125px,1fr) minmax(135px,1fr) minmax(97px,22%)}body[data-view=home] #app>.home.layout .home-air>.port-pirate{height:190px;width:145px;left:calc(50% - 72.5px)}}
@media(prefers-reduced-motion:reduce){.battle-tabletop .battle-card{transition:none!important}}
/* Story chapters previously imposed a shorter map with a more specific rule. */
dialog.voyage-dialog[data-page=map][data-story-chapter] .stage-3d .voyage-map{height:100%;min-height:0;max-height:none}
/* Card reading is an overlay, not an extra row that pushes the board away. */
dialog.voyage-dialog.battle-dialog>main:has(.battle-inspection){position:relative}
dialog.voyage-dialog.battle-dialog .battle-inspection{position:absolute;inset:0;z-index:10;margin:0;padding:12px;background:#062138fa;overflow-y:auto;overscroll-behavior:contain}
dialog.voyage-dialog.battle-dialog .battle-inspection img{display:block;max-height:50dvh;width:auto;max-width:90%;margin:10px auto;object-fit:contain}
dialog.voyage-dialog.battle-dialog>footer .battle-actions-menu>div{position:absolute;bottom:100%;left:6px;right:6px;max-height:45dvh;padding:8px;background:#062138fa;border:1px solid #b89c60;border-radius:8px;box-shadow:0 -8px 20px #0008}
/* Port: retain every shortcut behind a floating menu, freeing the lower quay. */
body[data-view=home] #app .home-tools{top:calc(62px + env(safe-area-inset-top,0px));bottom:auto;max-width:110px}
body[data-view=home] #app .home-tools>summary{font-size:0;justify-content:center;min-width:72px}
body[data-view=home] #app .home-tools>summary::after{content:'Menu ⋯';font-size:12px;color:#ffe4a5}
body[data-view=home] #app .home-tools[open]{top:calc(115px + env(safe-area-inset-top,0px));max-width:calc(100% - 16px)}
body[data-view=home] #app .port-destination{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
body[data-view=home] #app>.home.layout .home-air>.port-pirate{bottom:calc(151px + env(safe-area-inset-bottom,0px))}
body[data-view=home] #app .home-caption{bottom:calc(71px + env(safe-area-inset-bottom,0px));left:0;width:100%;margin:0;font-size:7px}
/* Keep the existing non-WebGL map usable over the full background too. */
dialog.voyage-dialog[data-page=map] .exploration-stage:not(.stage-3d){position:absolute;inset:0;height:100%;width:100%;margin:0;border:0;border-radius:0}
dialog.voyage-dialog[data-page=map][data-story-chapter] .exploration-stage:not(.stage-3d) .voyage-map{height:100%;min-height:0;max-height:none;border:0;border-radius:0}
/* Expanded actions must escape the footer instead of being clipped by it. */
dialog.voyage-dialog.battle-dialog>footer:has(.battle-actions-menu){overflow:visible}
/* Installed iOS uses its layout viewport, not a JavaScript/keyboard measurement. */

/* GROUP A — every adventure page occupies the viewport, with real scrolling panels. */
dialog.voyage-dialog{position:fixed;inset:0;width:100%;max-width:none;height:auto;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none}
dialog.voyage-dialog:not(.battle-dialog)>header{padding:calc(6px + env(safe-area-inset-top,0px)) max(9px,env(safe-area-inset-right,0px)) 6px max(9px,env(safe-area-inset-left,0px));min-height:54px;background:linear-gradient(#092b42f0,#061c2be8);border:0}
dialog.voyage-dialog:not(.battle-dialog)>main{padding:8px;overscroll-behavior:contain}
dialog.voyage-dialog:not(.battle-dialog)>nav.voyage-actions{z-index:8;margin:0;border-radius:0;padding:5px max(8px,env(safe-area-inset-right,0px)) max(5px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));background:linear-gradient(#0b2a3ede,#03131ff5)}
dialog.voyage-dialog .voyage-more-panel{z-index:20}
/* Sea atlas is the scene, rather than a framed illustration below a toolbar. */
dialog.voyage-dialog[data-page=sea]>header{position:absolute;inset:0 0 auto;z-index:8;background:linear-gradient(#05233be8,#05233b00)}
dialog.voyage-dialog[data-page=sea]>nav{position:absolute!important;inset:auto 0 0}
dialog.voyage-dialog[data-page=sea]>main{position:absolute;inset:0;padding:0;overflow:hidden}
dialog.voyage-dialog[data-page=sea] .world-map-viewport{position:absolute;inset:0;min-height:0;height:100%;width:100%;border:0;border-radius:0}
dialog.voyage-dialog[data-page=sea] .sea-region-label{position:absolute;top:calc(62px + env(safe-area-inset-top,0px));left:8px;z-index:5;max-width:65%;border:1px solid #bca068;border-radius:6px}
dialog.voyage-dialog[data-page=sea] .world-map-toolbar{position:absolute;top:calc(110px + env(safe-area-inset-top,0px));right:8px;z-index:6;max-width:94%;background:#062942d9;border-radius:6px;padding:4px}
dialog.voyage-dialog[data-page=sea] .sea-travel-panel{position:absolute;z-index:7;bottom:calc(78px + env(safe-area-inset-bottom,0px));left:8px;right:8px;margin:0;max-height:45%;overflow:auto;background:#061d30ef}
dialog.voyage-dialog[data-page=sea]>main>p,dialog.voyage-dialog[data-page=sea]>main>[data-voyage=page]{position:absolute;bottom:calc(125px + env(safe-area-inset-bottom,0px));left:8px;font-size:10px;z-index:5;background:#05233bbc;padding:4px;border-radius:4px}
dialog.voyage-dialog[data-page=sea]>main>[data-voyage=page]{left:auto;right:8px;bottom:calc(78px + env(safe-area-inset-bottom,0px));min-height:44px}
/* Dialogue: illustrated stage fills the space, paper and choices float below. */
dialog.voyage-dialog:is([data-page=dialogue],[data-page=story],[data-page=storyEnd])>main{position:relative;padding:0;background:var(--conversation-art) center/cover;isolation:isolate}
dialog.voyage-dialog:is([data-page=dialogue],[data-page=story],[data-page=storyEnd]) .voyage-conversation{display:flex;flex-direction:column;min-height:100%;padding:0 8px 8px;background:none;border:0}
dialog.voyage-dialog:is([data-page=dialogue],[data-page=story],[data-page=storyEnd]) .conversation-scene{flex:1 0 clamp(210px,39dvh,480px);height:auto;min-height:210px;margin:0 -8px;border:0;border-radius:0;background:none}
dialog.voyage-dialog:is([data-page=dialogue],[data-page=story],[data-page=storyEnd]) .conversation-paper{position:relative;z-index:2;margin:-12px 0 7px!important;padding:12px;box-shadow:0 3px 14px #0007}
dialog.voyage-dialog:is([data-page=dialogue],[data-page=story],[data-page=storyEnd]) .conversation-choices{background:#061b2bc9;border-radius:8px;flex-shrink:0}
/* Crew and dressing room keep the figure dominant, with equipment rails. */
dialog.voyage-dialog[data-page=crew]>main{padding:0 8px 8px;background:linear-gradient(#03162755,#031627bb),url('/assets/group-three/captain-cabin-v1.jpg') center/cover fixed}
dialog.voyage-dialog[data-page=crew] .crew-heading{position:relative;z-index:2;margin:5px 0 0;padding:5px 8px;background:#062238c7;border-radius:6px}
dialog.voyage-dialog[data-page=crew] .crew-hero{margin:0 -8px;border:0;border-radius:0;background:transparent;min-height:0}
dialog.voyage-dialog[data-page=crew] .crew-hero>.pirate-scene{height:clamp(270px,48dvh,540px);border:0;background:transparent}
dialog.voyage-dialog[data-page=crew] .preview-commands{margin:0 0 8px;gap:6px}.voyage-dialog[data-page=crew] .preview-commands button{font-size:11px}
dialog.voyage-dialog[data-page=cosmetics]>main{padding:0 8px 8px;background:linear-gradient(#03162722,#03162788),url('/assets/fidelity-v2/wardrobe-cabin.png') center/cover fixed}
dialog.voyage-dialog[data-page=cosmetics] .cosmetic-categories{position:sticky;top:0;z-index:5;margin:0 -8px;padding:5px 8px;background:#062238ec}
dialog.voyage-dialog[data-page=cosmetics] .cosmetic-dressing{margin:0 -8px;border:0;border-radius:0;background:transparent}
dialog.voyage-dialog[data-page=cosmetics] .cosmetic-dressing .avatar-preview{height:clamp(260px,43dvh,500px);min-height:0;border:0;border-radius:0;background:transparent;position:relative;top:auto}
dialog.voyage-dialog[data-page=cosmetics] .cosmetics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.voyage-dialog[data-page=cosmetics] .cosmetic-token{padding:6px;background:#041b2bdf}.voyage-dialog[data-page=cosmetics] .cosmetic-token h3{font-size:12px}.voyage-dialog[data-page=cosmetics] .outfit-thumbnail{height:120px}.voyage-dialog[data-page=cosmetics] .cosmetic-token button{width:100%;font-size:11px}
/* Extra scroll room keeps the current southern stop above floating controls. */
dialog.voyage-dialog[data-page=sea] .world-map-viewport{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
dialog.voyage-dialog[data-page=sea] .world-map-toolbar{backdrop-filter:blur(6px)}
@media(max-height:710px){dialog.voyage-dialog:is([data-page=dialogue],[data-page=story],[data-page=storyEnd]) .conversation-scene{flex-basis:190px;min-height:190px}}
/* GROUP B — the application shell, collection, shop and opening screens. */
#app{position:fixed;inset:0;width:100%;max-width:none;height:auto;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
#app>.header{flex:0 0 auto;height:auto;min-height:calc(54px + env(safe-area-inset-top,0px));padding:calc(5px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 5px max(8px,env(safe-area-inset-left,0px));border-inline:0;border-radius:0}
#app>.layout{width:100%;max-width:none;flex:1 1 0;min-height:0;margin:0;padding:8px max(8px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;gap:7px}
#app>.nav{position:relative;inset:auto;transform:none;width:100%;max-width:none;flex:0 0 auto;margin:0;border-radius:0;border-inline:0;padding:5px max(7px,env(safe-area-inset-right,0px)) max(5px,env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px))}
#app>.layout .collection-heading{padding:3px 1px;min-height:38px;margin:0;flex-shrink:0}.layout .collection-heading h1{font:600 27px Carto Condensed,sans-serif;line-height:1.1;margin:0}.layout .collection-heading .eyebrow{font-size:8px}
#app>.collection.layout{padding-top:4px}.layout.collection .collection-ref-options{margin:0;flex-shrink:0}.layout.collection .collection-ref-options>summary{min-height:40px;align-items:center}.layout.collection .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;flex-shrink:0}.layout.collection .catalog-grid.large{grid-template-columns:repeat(2,minmax(0,1fr))}.layout.collection .card-tile{min-width:0}.layout.collection .collection-search{min-height:44px}.layout.collection .collection-sort{min-height:36px;margin:0}.layout.collection .collection-sort select{max-width:120px}.layout.collection .collection-tabs{flex-shrink:0}
.layout.boutique .shop-heading{margin:0;padding:2px 0;min-height:40px}.layout.boutique .shop-heading h1{font:600 29px Carto Condensed,sans-serif;margin:0}.layout.boutique .shop-showcase{margin:0;padding:5px 0;gap:6px}.layout.boutique .shop-product{padding:5px;border-radius:6px;background:linear-gradient(#0b3450,#031c2c)}.layout.boutique .shop-product .real-pack-art{height:145px}.layout.boutique .money-cards .money-card{min-height:60px;padding:5px;border-radius:5px}.layout.boutique .money-card strong{font-size:19px}.layout.boutique .shop-reference-links button{min-height:44px;font-size:12px}.layout.boutique .shop-card-shelf{min-height:150px!important}.layout.boutique .shop-card-shelf>div,.layout.boutique .shop-card-shelf .image-wrap{height:100px!important}
/* Sealed pack, revealed official cards and results remain separate real flows. */
#app>.open-layout{width:100%;max-width:none;height:100%;min-height:0;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
.open-layout>.opening-top{flex-shrink:0;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-inline:max(8px,env(safe-area-inset-left,0px));min-height:54px;background:linear-gradient(#032c4be8,#032c4b33);border:0}
.open-layout>.open-stage{flex:1;min-height:0;width:100%;margin:0;border:0;border-radius:0;background:radial-gradient(ellipse,#0872ba55,transparent 75%)}
.open-layout .pack{width:min(64vw,calc((100dvh - 210px)*.64));max-height:60dvh}.open-layout .open-card{width:min(70vw,calc((100dvh - 230px)*.714))}
.open-layout>.opening-info{flex-shrink:0;padding:7px max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));min-height:0;background:linear-gradient(#032b4a44,#031525ee)}
.open-layout .opening-info h2{font-size:22px}.open-layout .gesture-hint{margin:5px 0;font-size:12px}.open-layout .opening-info .btn{min-height:44px}
.layout.summary{background:radial-gradient(ellipse at 50% 30%,#0875bb44,transparent 65%),url('/assets/group-two/reveal-storm-v1.jpg') center/cover}
#app .layout.summary .summary-highlights>.card-tile:first-child{width:58%;padding:4px}.layout.summary .summary-count{margin:0;font-size:11px}.layout.summary .summary-highlights>.card-tile:first-child .image-wrap{height:min(31dvh,285px);width:auto;aspect-ratio:2/2.8;margin:auto}.layout.summary .summary-highlights>.card-tile:first-child .card-label{text-align:center}.layout.summary .summary-highlights>.card-tile:first-child .card-meta,.layout.summary .summary-highlights>.card-tile:first-child .card-price{text-align:center}.layout.summary .summary-sort{min-height:40px}
dialog.battle-dialog[data-result]:not([data-result=""])>main{padding:0;overflow:auto}dialog.battle-dialog .combat-result{min-height:100%;border:0;border-radius:0;padding:20px 12px;background:linear-gradient(#041a2b11,#04101be8),url('/assets/group-two/victory-light-v1.jpg') center/cover}.combat-result .result-detail{margin-top:12px}.combat-result .result-captain{height:clamp(130px,24dvh,220px)}
/* Detail screens remain real dialogs with their own native focus containment. */
body>dialog:not(.voyage-dialog){position:fixed;inset:0;width:100%!important;max-width:none!important;height:auto;max-height:none!important;margin:0!important;border-radius:0!important;box-shadow:none;padding:calc(12px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
body>dialog#modal{border:0}.layout input,.layout select{font-size:16px}.layout .tabs button{min-height:44px}
/* Collection has one title bar; brand/home, language and both tools remain usable. */
body[data-view=collection] #app>.header .logo{width:44px;min-width:44px;padding:0;overflow:hidden}
body[data-view=collection] #app>.header .logo>span:not(.logo-mark){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body[data-view=collection] #app>.collection>.collection-heading{position:absolute;z-index:6;top:calc(6px + env(safe-area-inset-top,0px));left:58px;right:136px;height:44px;pointer-events:none;padding:0;display:flex;align-items:center}
body[data-view=collection] #app>.collection>.collection-heading h1{font-size:22px;max-width:145px}.layout.collection>.collection-heading .eyebrow{display:none}
body[data-view=collection] #app>.collection>.collection-heading>button{pointer-events:auto;position:absolute;right:0;width:44px;min-height:44px}
body[data-view=collection] #app>.collection>.collection-heading h1{padding-right:44px;font-size:20px;white-space:nowrap;max-width:none}
.layout.collection .collection-ref-options[open] .collection-sort{padding:6px;display:flex;gap:5px;flex-wrap:wrap}.layout.collection .collection-ref-options[open] .collection-sort button{min-height:44px}
/* GROUP C — logbook, trophies, rhythm game, event, value and settings. */
body:is([data-view=quests],[data-view=portfolio],[data-view=settings],[data-view=piano]) #app>.header .logo{width:44px;min-width:44px;padding:0;overflow:hidden}
body:is([data-view=quests],[data-view=portfolio],[data-view=settings],[data-view=piano]) #app>.header .logo>span:not(.logo-mark){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#app>.layout:is(.quests,.portfolio,.settings,.piano)>.collection-heading,#app>.layout.settings>.game-heading{position:absolute;top:calc(7px + env(safe-area-inset-top,0px));left:58px;right:58px;height:40px;min-height:0;margin:0;padding:0;z-index:6;pointer-events:none;display:flex;align-items:center;justify-content:space-between}
#app>.layout:is(.quests,.portfolio,.piano)>.collection-heading h1,#app>.layout.settings>.game-heading h1{font:600 24px Carto Condensed,sans-serif;line-height:1;margin:0}#app>.layout:is(.quests,.portfolio,.piano)>.collection-heading .eyebrow,#app>.layout.settings>.game-heading .eyebrow{display:none}
#app>.layout:is(.quests,.portfolio,.piano)>.collection-heading button{pointer-events:auto;min-width:44px;min-height:44px}.layout.quests>.collection-heading>strong{font-size:12px;white-space:nowrap}
#app>.layout.quests{gap:5px;padding-top:5px;background:linear-gradient(#082a3c55,#03111fe8),url('/assets/group-three/captain-cabin-v1.jpg') center/cover fixed}
.layout.quests .quest-tabs{position:sticky;top:0;z-index:4;background:#061e30f2;margin:0;padding:3px;border-radius:6px}.layout.quests .quest-tabs button{font-size:11px;min-height:44px;padding:4px 5px;flex:1}
.layout.quests .quest-shortcuts{gap:5px;margin:0}.layout.quests .quest-shortcuts button{min-height:44px;font-size:11px;padding:4px}.layout.quests .quest-card{margin:0;min-height:98px;flex-shrink:0;background:linear-gradient(110deg,#11314ae8,#041725e8)}.layout.quests .quest-card h2{font-size:18px}.layout.quests .quest-card .quest-objective{margin:3px 0}.layout.quests .quest-card .btn{min-height:44px}
body[data-quest-tab=achievements] .layout.quests .quest-card{min-height:110px;padding-left:62px}.layout.quests .mission-mini-games{margin-top:5px;flex-shrink:0}
/* The rhythm background fills the screen; the actual timed lanes keep their 84% hit line. */
body[data-view=piano] #app>.header{position:absolute;inset:0 0 auto;z-index:5;background:linear-gradient(#031c35ee,#031c3544)}
body[data-view=piano] #app>.nav{position:absolute;inset:auto 0 0;z-index:8}
#app>.layout.piano{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;overflow:hidden;background:linear-gradient(#031a3533,#031a3511),url('/assets/fidelity-v2/piano-islands.png') center/cover}
#app .layout.piano .piano-hud{position:absolute;top:calc(62px + env(safe-area-inset-top,0px));left:8px;right:8px;z-index:4;margin:0;padding:5px;background:#062443d9;border:1px solid #9fcfe1;border-radius:6px}
#app .layout.piano .piano-stage{position:absolute;top:calc(118px + env(safe-area-inset-top,0px));bottom:calc(174px + env(safe-area-inset-bottom,0px));left:0;right:0;width:100%;height:auto;min-height:0;border:0;border-radius:0;margin:0;box-shadow:none}
#app .layout.piano .piano-hint{position:absolute;left:8px;right:8px;bottom:calc(170px + env(safe-area-inset-bottom,0px));z-index:4;margin:0;padding:2px;font-size:10px;pointer-events:none}
#app .layout.piano .piano-music{position:absolute;left:8px;right:8px;bottom:calc(122px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;justify-content:space-between;min-height:44px;margin:0;background:#032039bd;border-radius:6px}
#app .layout.piano .piano-music iframe{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.layout.piano .piano-music button,.layout.piano .piano-music a{min-height:44px;display:flex;align-items:center;padding:5px 9px}
#app .layout.piano>[data-action=nav]{position:absolute;bottom:calc(74px + env(safe-area-inset-bottom,0px));left:8px;right:8px;z-index:5;width:calc(100% - 16px);min-height:44px;margin:0;background:#062b48df}
#app>.layout.piano:has(.piano-result){padding:calc(66px + env(safe-area-inset-top,0px)) 12px 130px;overflow:auto}
/* Existing playable cup, not an invented limited-time boss or reward. */
dialog.voyage-dialog[data-page=events]>main{padding:0 8px 8px;background:linear-gradient(#081a2c33,#03111bee),url('/assets/group-four/port-cup-v1.jpg') center/cover}
dialog.voyage-dialog[data-page=events] .event-banner{border:0;border-radius:0;margin:0 -8px 6px;background:#04152699}.voyage-dialog[data-page=events] .event-key-art{height:clamp(210px,38dvh,390px);min-height:0}
dialog.voyage-dialog[data-page=events] .voyage-panel{background:#062137df}.voyage-dialog[data-page=events] .event-rounds{margin:5px 0}.voyage-dialog[data-page=events] .event-prize{width:100%}
#app>.layout.portfolio{gap:6px;padding-top:4px;background:radial-gradient(ellipse at top,#0b3850,#031422 70%)}.layout.portfolio .portfolio-total{border:0;border-radius:0;background:transparent;margin:0;padding:8px 2px}.layout.portfolio .portfolio-total strong{font-size:44px}.layout.portfolio .portfolio-tabs{margin:0}.layout.portfolio .portfolio-chart{margin:0 -4px;border-radius:5px}.layout.portfolio .portfolio-breakdown section{padding:8px}.layout.portfolio .portfolio-commands{margin-top:4px}.layout.portfolio .portfolio-commands button{min-height:44px}
#app>.layout.settings{padding-top:5px;gap:6px;background:linear-gradient(#0b2d43,#031321)}.layout.settings .settings-backup-actions{margin:0}.layout.settings .settings-backup-actions button{min-height:48px;font-size:12px}.layout.settings .chapter-tabs{margin:0}.layout.settings .settings-content{gap:6px}#app .layout.settings .setting-row{min-height:48px;padding:6px 10px}.layout.settings .settings-content select{min-height:40px}.layout.settings .setting-row input[type=checkbox]{min-width:43px;min-height:25px}