/* Embedded world: compositions stay wide; tactile controls live below the screen. */
.handheld-scene .game-dock,.handheld-scene .progression,.handheld-scene .scene-stepper,.handheld-scene header,.handheld-scene .scene-index,.handheld-scene #sword-cursor,.handheld-scene .lore-commands,.handheld-scene .battle-controls,.handheld-scene .inventory-footer,.handheld-scene .guild-guestbook{display:none!important}
.handheld-scene body,.handheld-scene body *{cursor:auto!important}.handheld-scene #home blockquote{top:12%;font-size:26px;width:570px}.handheld-scene #home blockquote cite{font-size:17px}.handheld-scene .wares-speech{top:15%}.handheld-scene .letter-message{pointer-events:none}.handheld-scene .card-stage{pointer-events:none}
.handheld-scene .spellbook{bottom:12px}.handheld-scene .room>header{display:flex!important}.handheld-scene .room>header .back{visibility:hidden}
/* A selected document expands to the phone viewport, never a scaled screenshot. */
@media(max-width:700px){
.handheld-scene:has(dialog[open]) .scene{visibility:hidden}.handheld-scene:has(dialog[open]) body{background:#f4f4f4}.handheld-scene dialog[open]{animation:none!important}.handheld-scene dialog.floating-relic{top:50dvh;z-index:100;max-height:calc(100dvh - 18px)}
.handheld-scene dialog.lore-book{width:100vw;height:calc(100dvh - 24px)}
.handheld-scene dialog.ethos-scroll{height:calc(100dvh - 24px);width:100vw}.handheld-scene .ethos-scroll .scroll-reading{inset:15% 13% 14%}.handheld-scene .ethos-copy{font-size:18px}
.handheld-scene #lore{width:100vw;max-height:100dvh;height:100dvh;padding:0}
.handheld-scene .close,.handheld-scene .relic-close{min-width:44px;min-height:44px}.handheld-scene dialog.project-panel,.handheld-scene #inspect{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);padding:50px 20px 25px}.handheld-scene .project-gallery{grid-template-columns:1fr}.handheld-scene dialog.settings-panel{width:94vw;max-height:94dvh}.handheld-scene #raven-message{width:96vw;max-height:95dvh}.handheld-scene .raven-email{font-size:17px}
}
.handheld-scene .relic.pocket-selected{outline:none}.handheld-scene .wares-speech{display:none}.handheld-scene #wares .card-stage{transform:scale(1.14);transform-origin:center}.handheld-scene .spellbook{display:none!important}

/* One local canvas for the archive: no viewport-fixed layers inside the scaled
   iframe. This also avoids iOS independently scrolling/expanding its contents. */
html.handheld-archive{height:100%;min-height:0;overflow:hidden}
.handheld-archive body{position:relative;width:100%;height:100%;min-height:0;margin:0;overflow:hidden}
.handheld-archive .archive-environment{position:absolute;inset:0;z-index:0}
.handheld-archive .archive-environment .backdrop{width:100%;height:100%;object-fit:cover;object-position:center}
.handheld-archive main{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:28px 0 40px;z-index:1}
.handheld-archive .room{width:calc(100% - 90px);min-height:0;background:none}
.handheld-archive .page-outline{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
.handheld-archive:has(dialog[open]) main,.handheld-archive:has(dialog[open]) .page-outline{visibility:hidden}

/* Taller handheld camera: keep important subjects inside the crop. */
.handheld-scene #home blockquote{top:8%;width:76%;font-size:29px}
.handheld-scene #home .goliath-wrap{left:48%;bottom:22%;width:49vw;height:62vh}
.handheld-scene #home .home-actor{left:-9%;bottom:-14%;width:87vw;height:87vw}
.handheld-scene #home .heat-haze{display:none}
.handheld-scene #house.riverside-house .house-stage{left:39%}
.handheld-scene #wares{--inventory-card-height:84vh;--inventory-card-width:45vw}
.handheld-scene #wares .card-stage{left:45%;right:3%;top:8%;transform:none}
.handheld-scene #wares .ware{padding:26px 27px 24px;grid-template-rows:60px minmax(0,1fr) 32px 88px 33px;gap:8px}
.handheld-scene #wares .card-name{font-size:36px}
.handheld-scene #wares .card-type,.handheld-scene #wares .card-bottom{font-size:17px}
.handheld-scene #wares .stat-row strong,.handheld-scene #wares .card-stats .stat-row>span{font-size:18px}
.handheld-scene #wares .card-number{font-size:14px}
.handheld-scene #wares .card-stats{gap:10px}
.handheld-scene #wares .stat-row{grid-template-columns:52px 1fr}
.handheld-scene #wall .tavern-stage{left:50%}
.handheld-scene #wall .guild-jordain-layer{left:16%;width:42%;height:74.63%;top:40%}
.handheld-scene #wall .guild-memory-figure{filter:none}
.handheld-scene #wall .guest-sprite{mask-image:repeating-linear-gradient(to bottom,#000 0px,#000 3px,#000d 3px,#000d 4px)}
.handheld-scene #wall .guild-wall-sign{width:37%;height:21%}

.handheld-archive .room>header{display:none!important}
.handheld-scene #wares .ware{grid-template-rows:60px minmax(0,1fr) 34px 112px 34px}
.handheld-scene #wares .card-type,.handheld-scene #wares .card-bottom{font-size:21px}
.handheld-scene #wares .stat-row strong,.handheld-scene #wares .card-stats .stat-row>span{font-size:24px}
.handheld-scene #wares .stat-row{grid-template-columns:64px 1fr}

/* Keep the foreground fighter in his corner as the screen grows taller. */
.handheld-scene #home .home-actor{left:-12%;bottom:-8%;width:66vw;height:66vw}
/* Pull back the bar camera, extend only its wooden lower panels, and seat the
   companions at the same counter height instead of scaling the guest above him. */
.handheld-scene #wall .tavern-stage{top:0;transform:translateX(-50%);width:max(100vw,159.91497vh);height:max(56.281vw,90vh)}
.handheld-scene #wall .guild-jordain-layer{left:12%;top:32%;width:43%;height:76.4%}
.handheld-scene #wall .guild-counter-extension{position:absolute;left:0;right:0;top:79%;height:calc(100vh - max(44.46199vw,71.1vh));overflow:hidden;z-index:3;pointer-events:none}
.handheld-scene #wall .guild-counter-extension img{position:absolute;left:0;top:-376.19%;width:100%;height:476.19%;object-fit:fill}
#wall .guild-playback-retry{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);z-index:12;padding:14px 22px;font:20px/1.2 monospace;background:#fff;border:1px solid #333;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
#wall .guild-playback-retry[hidden]{display:none}

.handheld-scene #wall .guild-playback-retry{min-width:350px;min-height:125px;font-size:28px}
/* Keep the stool cutouts beyond the lower frame while showing more of the bar. */
.handheld-scene #wall .tavern-stage{top:8vh}
.handheld-scene #wall .tavern-stage::before{content:'';position:absolute;left:0;right:0;top:-8vh;height:8vh;background:url('assets/guild-fullbar/v1/poster.jpg') center top/100% auto no-repeat;z-index:0}
.handheld-scene #wall .guild-jordain-layer{top:31%}
.handheld-scene #wall .guild-counter-extension{height:calc(92vh - max(44.46199vw,71.1vh))}
.handheld-scene #wall .guild-jordain-layer{left:11%;top:28.5%;width:46%;height:81.74%}
.handheld-scene #wall .guild-logo-marquee{display:none}

/* Keep iframe artwork and its frame in one local coordinate system on Safari. */
html.handheld-scene{width:100%;height:100%;min-height:0;overflow:hidden}
.handheld-scene body{position:relative;width:100%;height:100%;min-height:0;overflow:hidden}
.handheld-scene #main{position:absolute;inset:0}
.handheld-scene .page-outline{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
.handheld-scene #home .home-actor{left:-9%;bottom:-11%}
.handheld-scene #home .goliath-wrap{left:53%;bottom:26%}
/* Patrons sit against the counter; stools extend below the camera crop. */
.handheld-scene #wall .guild-jordain-layer{left:7%;top:30%;width:52%;height:92.39%}
.handheld-scene #wall .guild-logo-marquee{display:block;height:24px;margin-top:13px}
.handheld-scene #wall .guild-logo-marquee img{position:static;inset:auto;max-width:100%;width:auto;height:100%;object-fit:contain}

/* Match the desktop patrons' relationship to the counter and bartender. */
.handheld-scene #wall .guild-jordain-layer{left:3%;top:23.7%;width:56%;height:99.5%}

/* The tall mobile card uses its space for readable details, not empty artwork. */
.handheld-scene #wares .ware{padding:26px 27px 24px;grid-template-rows:84px minmax(0,1fr) 48px 210px 52px;gap:12px}
.handheld-scene #wares .card-name{font-size:46px;line-height:1.04}
.handheld-scene #wares .card-sigil{width:36px;height:36px;font-size:28px}
.handheld-scene #wares .card-type{font-size:27px}
.handheld-scene #wares .card-type>span{font-size:24px}
.handheld-scene #wares .card-stats{align-content:start;padding-top:12px;gap:20px}
.handheld-scene #wares .stat-row{grid-template-columns:86px 1fr;gap:14px;align-items:start}
.handheld-scene #wares .stat-row strong,.handheld-scene #wares .card-stats .stat-row>span{font-size:34px;line-height:1.18}
.handheld-scene #wares .card-bottom{font-size:29px;padding-top:10px;letter-spacing:0}
.handheld-scene #wares .card-number{font-size:20px}
/* Stack the short labels above their values at this narrow viewing size. */
.handheld-scene #wares .card-stats{gap:16px}
.handheld-scene #wares .stat-row{grid-template-columns:1fr;gap:4px;text-align:left}
.handheld-scene #wares .card-stats .stat-row>span{font-size:27px;line-height:1.1;color:#666}
.handheld-scene #wares .stat-row strong{font-size:36px;line-height:1.15;text-align:left}

/* Match the visible crown of each cutout to Jordain's, allowing for its padding. */
.handheld-scene #wall .guest-position{left:47%;top:22.68%;width:44%;height:78.18%}
.handheld-scene #wall .guest-position:has([data-variant="1"]){top:22.895%}
.handheld-scene #wall .guest-position:has([data-variant="2"]){top:23.219%}
.handheld-scene #wall .guest-position:has([data-variant="3"]){top:21.988%}
.handheld-scene #wall .guest-position:has([data-variant="4"]){top:23.858%}
.handheld-scene #wall .guest-position:has([data-variant="5"]){top:24.17%}
.handheld-scene #wall .guest-position:has([data-variant="6"]){top:24.108%}

/* The collection can grow beyond its first two shelf rows. */
.handheld-archive main{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
.handheld-archive main::-webkit-scrollbar{display:none}
.handheld-archive .room{margin-bottom:110px}
/* Extra rows must extend downward from the first shelf, not be centered beyond
   the scroll container's unreachable top edge. */
.handheld-archive main{align-content:start}

/* Keep the handoff and returning raven inside the taller phone camera. */
.handheld-scene #contact .raven-room{object-position:84% center}

/* Three enlarged lanterns fill a stationary handheld wall. */
.handheld-archive main{overflow:hidden;padding:28px 0 62px;align-content:start}
.handheld-archive .room{width:calc(100% - 70px);margin-bottom:0;aspect-ratio:auto;overflow:visible}
.handheld-archive #collection{position:static;padding:0;min-height:0}
.handheld-archive .relic{width:44%;height:var(--relic-height);aspect-ratio:auto}
.handheld-archive .wall-shelf{width:42%}
.handheld-archive .relic strong{font-size:32px}
.handheld-archive .relic small{font-size:17px}
.handheld-archive .lantern-label{gap:5px;padding:5px 10px;max-width:110%}

/* Bound the card's shape even while a full-screen document resizes its iframe. */
.handheld-scene #wares{--inventory-card-height:min(84vh,76vw);--inventory-card-width:45vw}
.handheld-scene.handheld-restoring #main,.handheld-scene:has(dialog[open]) #main{visibility:hidden}

/* Character actions live inside the scene; the console keeps its settled height. */
.handheld-scene #house .lore-commands{display:flex!important;bottom:28px;gap:24px;z-index:55}
.handheld-scene #house .lore-command{width:220px;min-width:220px;padding:10px;gap:8px;touch-action:manipulation}
.handheld-scene #house .lore-command .illustrated-relic{width:140px;height:140px}
.handheld-scene #house .lore-command>span{width:190px;min-height:62px;font-size:42px;padding:10px 20px}
.handheld-scene #house .lore-command::before{inset:-10px -16px 30px}
.handheld-scene #house .lore-command:is(:hover,:focus-visible,.pocket-selected){transform:translateY(-14px)}
/* A touch hover must not keep an old relic raised after D-pad selection changes. */
.handheld-scene #house .lore-command:not(.pocket-selected){transform:none}
.handheld-scene #house .lore-command:not(.pocket-selected)::before{opacity:0}
/* Keep the health plaque inside the handheld window while the giant spills past it. */
.handheld-scene .battle-hero .enemy-stat{right:24%;width:200px;font-size:25px}