/* A real camera viewport and compact controls, rather than a small image in a page. */
.brand-short{display:none}
.brand-logo{display:block;flex:0 1 290px;width:clamp(220px,22vw,290px);line-height:0;min-width:0}
.brand-logo img{display:block;width:100%;height:auto;max-height:90px;object-fit:contain;object-position:left center}
.brand-copy .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.loading-logo{display:block;max-width:256px;margin:0 auto 10px;line-height:0}
.loading-logo img{display:block;width:100%;height:auto;object-fit:contain}
.topbar{position:relative;z-index:20}.top-actions .settings-menu{display:block;position:relative;padding:0;border:0;flex:0 0 auto}
.top-actions .settings-menu summary{width:46px;height:46px;min-height:44px;padding:7px;justify-content:center;border:2px solid #6b3545;background:#ffe8b2;box-shadow:0 3px 0 #6b3545;font-size:0;cursor:pointer}
.top-actions .settings-menu summary .pixel-icon{width:26px;height:26px}
.settings-popover{position:absolute;right:0;top:54px;width:245px;padding:14px;border:2px solid #6b3545;background:#fff0cc;box-shadow:4px 4px 0 #43203b55;z-index:25}
.settings-popover .text-button{display:flex;width:100%;justify-content:flex-start;text-align:left;min-height:44px}.music-status{font:400 12px/1.55 var(--body);color:#6b4145;margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid #d2a66c}
.camera-hint{display:none;position:absolute;top:8px;left:8px;right:8px;pointer-events:none;color:#ffeecb;font:400 11px/1.5 var(--body);text-shadow:1px 1px #38203d;z-index:2}
body[data-camera-used=true] .camera-hint{display:none}
.scene-wrap{background:#2d2037}
/* The art is the full frame. Only the text scrolls; no opaque strips cover it. */
.item-story-modal{overflow:hidden;max-height:calc(100dvh - 32px);padding:0}
.item-story-paper{display:flex;flex-direction:column;height:min(740px,calc(100dvh - 36px));min-height:0;max-height:100%;padding:56px 40px 50px;overflow:hidden;background:#fff0c6}
.story-letter-header{position:static;flex:0 0 auto;margin:0;padding:0;background:transparent;gap:12px}
.story-reading{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12px 0 0;outline-offset:-2px}
.story-reading .story-image{margin:4px auto 18px}.story-reading h2{font-size:17px;line-height:1.7}.story-reading .story-sign{margin-bottom:8px}
.story-actions{position:static;flex:0 0 auto;margin-top:14px;padding:0;background:transparent;gap:6px}
.story-actions .text-button{background:transparent;margin:0;box-shadow:none;border-color:transparent;min-height:36px}
@media(max-width:720px),(max-width:1000px) and (max-height:500px){
 html{height:100%;overflow:hidden}body.owned-type{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
 .app-shell{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:7px;padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 .topbar{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;margin:0;min-height:44px}.brand-lockup{flex:1 1 auto;min-width:0;gap:6px}.brand-logo{flex:1 1 auto;width:auto;max-width:190px}.brand-logo img{max-height:64px}.brand-mark{display:none}.brand-copy h1{font-size:12px;line-height:1.5;white-space:nowrap}.brand-subtitle,.brand-copy>.eyebrow{display:none}
 .top-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}.top-actions .icon-button{width:auto;min-width:44px;min-height:44px;height:44px;padding:0 6px;gap:4px}.top-actions .icon-button>span{font-size:0}.top-actions .icon-button b{font:700 10px var(--body)}.top-actions .icon-button .pixel-icon{width:24px;height:24px}.top-actions .settings-menu summary{width:44px;height:44px;padding:7px}
 .game-layout{display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:7px}
 .room-panel{position:relative;top:auto;display:flex;flex-direction:column;flex:1 1 0;min-height:120px;padding:0;background:transparent}.room-heading{display:none}
 .scene-frame{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;padding:4px;border-radius:0;margin:0}
 .scene-wrap{display:block;flex:1 1 0;width:100%;height:100%;min-height:0;aspect-ratio:auto;margin:0;border-radius:0}
 #scene{display:block;width:100%;height:100%;object-fit:fill;touch-action:none}
 .scene-caption,.page-footer{display:none}.camera-hint{display:block}.scene-view-controls{bottom:8px;right:8px}
 .play-dock{display:block;flex:0 0 auto;position:relative;min-width:0;min-height:0;max-height:43dvh;overflow-y:auto;padding:6px;gap:6px;margin:0;border-radius:0}
 .play-dock .story-note{display:none}.box-card{display:flex;align-items:center;gap:8px;min-width:0;padding:6px;border:0;box-shadow:none;background:transparent}
 .box-card-top{flex:1 1 0;min-width:0;margin:0;gap:6px}.box-card-top .eyebrow,.box-card-top .box-number{display:none}.box-copy{margin:0;font-size:12px;line-height:1.45;font-weight:600}
 #box-button{width:auto;flex:0 1 63%;min-height:44px;font-size:9px;padding:7px 8px;gap:6px}#box-button .pixel-icon{width:23px;height:23px}
 body[data-box-choices=true] .box-card{display:block;padding:0}body[data-box-choices=true] .box-card-top{display:none}body[data-box-choices=true] #box-button{display:none}
 .box-contents{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:90px;gap:7px;overflow-x:auto;overflow-y:hidden;margin:0;padding:0 1px 5px;scrollbar-width:thin}.box-contents[hidden]{display:none}.box-item{min-height:83px;padding:6px 4px;gap:5px;font-size:10px;line-height:1.35}.box-item img{width:42px;height:42px}
 body:not([data-holding=true]) .surface-picker,body:not([data-holding=true]) .item-actions{display:none}
 body[data-holding=true] .play-dock{display:grid;grid-template-columns:94px minmax(0,1fr);gap:6px;padding:6px}
 body[data-holding=true] .box-card{display:none}.held-item{grid-column:1/-1;min-height:34px;padding:3px 6px;gap:8px;border:0;background:transparent;box-shadow:none}.held-item img{width:30px;height:30px}.held-item strong{font-size:12px}.held-item p{display:none}
 .item-actions{display:flex;grid-column:1;gap:6px}.item-actions button{width:44px;min-width:44px;height:44px;min-height:44px;padding:5px;overflow:hidden}.item-actions span,.item-actions kbd{display:none}.item-actions #rotate-button::after{content:'↻';font:400 28px/1 var(--body)}.item-actions .pixel-icon{width:24px;height:24px}
 .surface-picker{display:contents;padding:0;border:0}.surface-heading{display:none}.zone-actions{display:contents;min-height:0}.zone-actions::before,.zone-actions>button[data-surface]{display:none}
 .surface-select{display:block;grid-column:2;min-height:44px;width:100%;font:500 16px var(--body);padding:6px 10px}
 .cell-controls{display:grid;grid-column:1/-1;grid-template-columns:repeat(4,44px) minmax(0,1fr);gap:4px;margin:0}.cell-controls button{min-width:44px;min-height:44px;height:44px;padding:0;font-size:20px}.cell-controls .place-button{grid-column:auto;min-width:0;padding:0 3px;font-size:8px;line-height:1.3}
 .cell-status{grid-column:1/-1;margin:0;min-height:16px;font-size:9px}.cell-status .pixel-icon{width:16px;height:16px}
 .top-actions>.settings-menu{display:block}.settings-popover{top:50px;max-width:calc(100vw - 24px)}
 .item-story-modal{max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
 .item-story-paper{height:min(760px,calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))));padding:48px 24px 42px}
 .story-letter-header{position:static;background:transparent;margin:0;padding:0}.story-reading{padding-top:10px}.story-reading .story-image{width:70px;height:70px;margin:0 auto 16px}.story-reading h2{font-size:14px}.story-text{font-size:16px;line-height:1.65}.story-actions{position:static;background:transparent;margin-top:10px;padding:0;gap:4px}.story-actions .text-button{min-height:34px}.story-actions .primary-button{min-height:46px}
 .toast{top:max(58px,env(safe-area-inset-top));bottom:auto;left:50%;right:auto;max-width:calc(100vw - 24px);font-size:10px;padding:7px 10px;transform:translate(-50%,-6px)}.toast.is-visible{transform:translate(-50%,0)}
}
@media(max-width:360px){.brand-full{display:none}.brand-short{display:inline}.brand-copy h1{font-size:12px}.item-story-paper{padding:42px 20px 36px}.story-reading .story-image{width:58px;height:58px}.story-reading h2{font-size:13px}.settings-popover{width:230px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .game-layout{flex-direction:row}.room-panel{min-height:0}.play-dock{flex:0 0 222px;width:222px;max-height:100%;overflow:auto;align-self:stretch}
 .brand-copy h1{font-size:13px}.box-card{display:block}.box-card-top{margin-bottom:7px}#box-button{width:100%}.box-contents{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow:visible}.box-item{min-height:78px}
 body[data-holding=true] .play-dock{display:grid;align-content:start;grid-template-columns:94px minmax(0,1fr)}.cell-controls{grid-template-columns:repeat(4,minmax(44px,1fr))}.cell-controls .place-button{grid-column:1/-1;font-size:10px}
 .item-story-paper{height:calc(100dvh - 24px);padding:28px 30px 28px}.story-letter-header{position:static;background:transparent}.story-actions{position:static;background:transparent;flex-direction:row;align-items:center;gap:8px}.story-actions .primary-button{flex:1}.story-actions .text-button{flex:0 1 170px}.story-reading .story-image{width:48px;height:48px}.story-reading h2{font-size:14px}
}

/* Stretch both flex children; do not shrink-wrap the bottom dock to its controls. */
@media(max-width:720px),(max-width:1000px) and (max-height:500px){.game-layout{align-items:stretch}.owned-type .top-actions>.settings-menu{display:block}}
.item-story-paper{height:auto;max-height:min(740px,calc(100dvh - max(18px,env(safe-area-inset-top)) - max(18px,env(safe-area-inset-bottom))))}.story-reading{flex:0 1 auto}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.item-actions{grid-column:1/-1}.item-actions button{flex:1;width:auto}.surface-select{grid-column:1/-1}}

/* Keep the loading art and two-line logo visible on short landscape screens. */
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .loading-card{display:grid;grid-template-columns:minmax(0,3fr) minmax(170px,2fr);align-items:center;width:min(680px,calc(100vw - 28px));overflow:auto}
 .loading-caption{min-width:0;padding:14px 12px}.loading-logo{max-width:160px;margin-bottom:8px}
}