@font-face{font-family:Pirata;src:url('../assets/pirata.ttf')}@font-face{font-family:Fell;src:url('../assets/im-fell-english.ttf')}@font-face{font-family:Hand;src:url('../font-study/fonts/Zeyada.ttf')}
*{box-sizing:border-box}html{background:#d5d2c9;color:#282721}body{margin:0;font-family:Fell,Georgia,serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid #756142;outline-offset:4px}button:disabled{opacity:.25;cursor:default}.handheld{width:min(100%,520px);min-height:100svh;margin:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));background:repeating-linear-gradient(126deg,transparent 0 7px,#39332904 7px 8px),linear-gradient(100deg,#efede6,#faf8f1 47%,#e5e0d5);border:1px solid #89867c;border-radius:17px 17px 42px 17px;box-shadow:inset 0 0 0 4px #f6f3e9,inset 0 0 0 5px #8f8b80,0 15px 40px #27231930;position:relative}.brand{display:flex;gap:9px;align-items:center;padding:0 5px 14px;font:18px Pirata}.brand img{width:36px;height:36px;object-fit:contain}.brand small{display:block;font:8px monospace;letter-spacing:1.6px;margin-top:3px}.power{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#585845;box-shadow:0 0 0 3px #cecabd}.screen-surround{padding:9px 9px 0;background:linear-gradient(135deg,#77756d,#aaa69b);border:2px solid #373730;box-shadow:inset 0 0 0 2px #b2afa5,0 2px 0 #fff8;border-radius:9px 9px 23px 9px}.screen{aspect-ratio:1.55;position:relative;overflow:hidden;background:#f6f4ed;border:2px solid #2c2b26;border-radius:4px;box-shadow:0 0 0 1px #d4d0c6}.screen iframe{border:0;width:1100px;height:710px;transform-origin:0 0;display:block;background:white}.screen-legend{display:flex;justify-content:space-between;padding:9px 2px 10px;font:7px monospace;letter-spacing:1px;color:#faf9ef}.chapter{text-align:center;margin:20px 0 12px}.chapter>small{font:9px monospace;letter-spacing:2px;color:#666165}.chapter h1{font:32px/1.1 Pirata;margin:5px 0}.chapter p{font:21px/1.1 Hand;margin:5px 0 0;color:#666166}.context{display:flex;gap:5px;justify-content:center;min-height:54px;align-items:stretch}.context button{border:0;background:url('../assets/ui/relic-placard.svg') center /100% 100% no-repeat;min-width:75px;max-width:135px;flex:1;padding:7px 8px;font:19px Pirata;opacity:.67;position:relative}.context button[aria-pressed=true]{opacity:1;filter:drop-shadow(0 2px 1px #39302430)}.context button[aria-pressed=true]:after{content:'';position:absolute;bottom:7px;left:calc(50% - 8px);width:16px;border-bottom:1px solid #6d6659}.controls{display:flex;align-items:center;justify-content:space-between;padding:23px 10px 12px;gap:20px}.direction{text-align:center}.direction>small,.ab small{display:block;font:8px monospace;letter-spacing:1.2px;color:#726b5f;margin-top:10px}.dpad{display:grid;grid-template:repeat(3,44px)/repeat(3,44px);filter:drop-shadow(1px 4px 0 #c4bfb1)}.dpad button,.pivot{border:0;background:repeating-linear-gradient(132deg,#34342e 0 3px,#3e3e35 3px 4px);color:#dbd7ca;box-shadow:inset 0 0 0 1px #1e1f19;display:grid;place-items:center;padding:7px}.dpad svg{width:27px;fill:#e2dfd1;filter:drop-shadow(0 1px 0 black)}.dpad button:active,.round:active{transform:translateY(2px);filter:brightness(1.3)}.up{grid-area:1/2;border-radius:6px 6px 0 0}.left{grid-area:2/1;border-radius:6px 0 0 6px}.left svg{rotate:-90deg}.right{grid-area:2/3;border-radius:0 6px 6px 0}.right svg{rotate:90deg}.down{grid-area:3/2;border-radius:0 0 6px 6px}.down svg{rotate:180deg}.pivot{grid-area:2/2;box-shadow:none;font-size:25px}.ab{display:flex;gap:15px;transform:rotate(-17deg);padding-bottom:12px}.ab>div{text-align:center}.ab>div>*{transform:rotate(17deg)}.round{width:57px;height:57px;border:1px solid #5e594e;border-radius:46% 49% 43% 48%;background:radial-gradient(ellipse at 40% 28%,#656055,#302e28 63%,#777166 68%,#39362e 78%);color:#efecdf;box-shadow:0 4px 0 #b5b0a2,inset 0 0 0 2px #23231d;font:28px Pirata;text-shadow:1px 1px #111}.ab small{max-width:65px;letter-spacing:.8px}.system{display:flex;gap:22px;align-items:center;justify-content:center;margin:9px 0 15px}.system button{border:0;background:none;font:8px monospace;letter-spacing:1px;padding:9px 0;min-width:55px;min-height:44px}.system button span{display:block;width:43px;height:12px;border:1px solid #5a574e;background:#a39d8f;box-shadow:inset 0 2px 2px #4a45383b,0 2px #fff8;border-radius:12px;rotate:-12deg;margin:0 auto 10px}.speaker{display:flex;gap:5px;margin-left:16px;rotate:-20deg}.speaker i{height:37px;width:3px;background:#6e695c;border-radius:5px;box-shadow:1px 0 #fff}.hint{text-align:center;font:8px monospace;letter-spacing:.2px;color:#81796b;margin:0 0 5px}dialog{border:1px solid #4f4c43;border-radius:6px;box-shadow:inset 0 0 0 5px #f6f2e8,inset 0 0 0 6px #969183,0 12px 50px #0005;background:#f8f5eb;width:min(90vw,400px);padding:30px 25px;color:#2d2a24;max-height:90dvh;overflow:auto}dialog::backdrop{background:#23251e9c}dialog>small{font:9px monospace;letter-spacing:2px}dialog h2{font:30px Pirata;margin:8px 0 20px}#close-menu{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;background:url('../assets/ui/square-control.svg') center/contain no-repeat;font-size:28px}dialog nav{display:grid;gap:8px}dialog nav button{display:flex;gap:20px;padding:10px 12px;text-align:left;border:1px solid #b3ac9c;background:#fff6;align-items:center}dialog nav button[aria-current=page]{background:#dfd9cb}dialog nav i{font:17px Fell;min-width:18px}dialog nav span{font:23px Pirata}dialog nav small{display:block;font:20px/1 Hand;color:#736c61;margin-top:5px}
body.detail-open #world{position:fixed;inset:0;width:100vw!important;height:100dvh!important;transform:none!important;z-index:100}body.detail-open .console{visibility:hidden}
@media(min-width:701px){body{padding:24px}.handheld{min-height:780px}.screen{aspect-ratio:1.55}}
@media(max-height:720px) and (orientation:portrait){.brand{padding-bottom:8px}.chapter{margin:12px 0 8px}.chapter h1{font-size:27px}.chapter p{font-size:18px}.controls{padding-top:14px;padding-bottom:0}.system{margin:3px 0 4px}.handheld{padding-top:12px}.context{min-height:46px}}
@media(orientation:landscape) and (max-height:520px){body{padding:0}.handheld{width:100%;max-width:none;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:0 20px;padding:12px 20px}.brand{grid-column:1;padding-bottom:8px}.screen-surround{grid-column:1;align-self:start}.console{grid-column:2;grid-row:1/3}.chapter{margin:5px 0}.chapter p,.hint,.speaker{display:none}.context{min-height:42px}.controls{padding:15px 0 0;gap:10px}.dpad{grid-template:repeat(3,40px)/repeat(3,40px)}.round{width:50px;height:50px}.ab{gap:10px}.system{margin:3px 0}.chapter h1{font-size:26px}.context button{font-size:17px;min-width:0}.screen-legend{padding:5px;font-size:6px}}

.context{flex-wrap:wrap}.context button{min-width:62px}.context button:nth-child(n+4){flex:0 1 100px}
@media(max-width:350px){.controls{gap:8px;padding-inline:2px}.ab{gap:11px}.round{width:52px;height:52px}.dpad{grid-template:repeat(3,42px)/repeat(3,42px)}.brand{font-size:16px}.brand small{font-size:7px;letter-spacing:1.1px}}
@media(orientation:landscape) and (max-height:520px){.screen-surround{width:100%;max-width:calc((100dvh - 98px)*1.55 + 22px)}}

/* Let the original illustrated frame be the only frame. */
html,body{background:#fff;color:#282828}
.handheld{padding:max(7px,env(safe-area-inset-top)) 7px max(10px,env(safe-area-inset-bottom));background:#fff;border:0;border-radius:0;box-shadow:none;min-height:100svh}
.brand,.screen-legend,.speaker{display:none}
.screen-surround{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.screen{aspect-ratio:4/3;background:white;border:0;border-radius:0;box-shadow:none}
.screen iframe{height:825px}
.console,dialog{filter:grayscale(1)}
.console{padding-inline:10px}
.chapter{margin:15px 0 9px}.chapter h1{font-size:30px}.chapter p{margin-top:3px}
.context{min-height:48px}.controls{padding:16px 8px 8px}.system{margin:5px 0 8px}
dialog{background:#fafafa;color:#282828}
button:focus-visible{outline-color:#333}
@media(min-width:701px){body{padding:12px}.handheld{min-height:0}.screen{aspect-ratio:4/3}}
@media(max-height:720px) and (orientation:portrait){.chapter{margin:9px 0 6px}.chapter h1{font-size:26px}.controls{padding-top:10px}.system{margin:2px 0 4px}}
@media(orientation:landscape) and (max-height:520px){.handheld{padding:7px;gap:0 12px}.screen-surround{grid-row:1;width:100%;max-width:calc((100dvh - 14px)*4/3);align-self:center}.console{grid-row:1}.chapter{margin:5px 0}.controls{padding:12px 0 0}.system{margin:2px 0}}
@media(orientation:landscape) and (max-height:520px){body{padding:0}}

/* Explicitly contain the landscape iframe without allowing its intrinsic size
   to participate in the phone's document layout. Dialogs still expand fixed. */
.screen iframe{position:absolute;inset:0;max-width:none;max-height:none;min-width:0;min-height:0}

/* A quiet signature above the scene, with no additional bezel. */
.brand{display:flex;align-items:center;gap:7px;height:24px;padding:0 3px;margin:0 0 7px;font:14px/1 Fell,Georgia,serif;color:#282828}
.brand img{display:block;width:20px;height:20px;object-fit:contain}
@media(orientation:landscape) and (max-height:520px){
 .handheld{grid-template-rows:24px minmax(0,1fr);row-gap:7px}
 .brand{grid-column:1/-1;grid-row:1;margin:0;padding:0 3px}
 .screen-surround{grid-row:2;max-width:calc((100dvh - 45px)*4/3)}
 .console{grid-row:2}
}
@media(orientation:landscape) and (max-height:520px){.controls{padding-top:8px}}

/* Spend the recovered casing space on the world, not on extra control padding. */
.brand{justify-content:center;font:10px/1 monospace;letter-spacing:1.2px;text-transform:uppercase}
.brand img{width:18px;height:18px}
@media(orientation:portrait), (min-height:521px){
 .screen{aspect-ratio:auto;height:var(--scene-height,49svh)}
 .chapter{margin:10px 0 6px}.chapter p{font-size:19px}
 .controls{padding:10px 8px 5px}.system{margin:0 0 3px}
}
@media(orientation:portrait) and (max-height:740px){
 .chapter>small{font-size:8px}.chapter h1{font-size:26px}.chapter p{font-size:17px}
 .context{min-height:43px}.context button{font-size:18px}
 .dpad{grid-template:repeat(3,40px)/repeat(3,40px)}
 .direction>small,.ab small{margin-top:6px}.system button{padding:7px 0}
 .system button span{margin-bottom:6px}.hint{display:none}
}
@media(orientation:portrait) and (max-height:740px){
 .chapter>small{display:block;line-height:1}
 .chapter h1{margin:4px 0;line-height:1.05}
 .chapter p{margin:0;line-height:1}
 .direction>small{display:none}
 .controls{padding:8px 8px 0}
}
@media(orientation:portrait) and (max-height:700px){
 body[data-scene=archive] .chapter p{display:none}
}

/* Compact chapter typography releases space for the scene, preserving controls. */
.brand a{display:flex;align-items:center;justify-content:center;gap:7px;color:inherit;text-decoration:none;min-height:30px;padding:3px 7px}
.brand a:focus-visible{outline:1px solid #555;outline-offset:1px}
.chapter{margin:8px 0 6px}
.chapter>small{display:block;font:8px/1.1 monospace;letter-spacing:1.5px}
.chapter h1{font-size:24px;line-height:1.05;margin:4px 0}
.chapter p{font:9px/1.3 monospace;letter-spacing:.6px;margin:0;color:#666;text-transform:uppercase}
@media(orientation:portrait) and (max-height:740px){.chapter h1{font-size:22px}.chapter p{font-size:8px}}

/* Isolate the scaled scene's compositing from Safari's changing browser chrome.
   Release containment while an in-scene dialog occupies the full phone. */
body:not(.detail-open) .screen{contain:layout paint;isolation:isolate;transform:translateZ(0);clip-path:inset(0)}

/* Full-screen portrait reminder, including above an already-open menu or book. */
#rotate-phone{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:20px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;background:#fff;color:#282828;overflow:hidden;filter:none}
#rotate-phone[open]{display:grid;place-items:center}
#rotate-phone::backdrop{background:#fff}
#rotate-phone .rotate-content{text-align:center;max-width:540px}
#rotate-phone svg{display:block;width:84px;height:84px;margin:0 auto 12px}
#rotate-phone h2{font:32px/1.15 Pirata,serif;margin:0 0 12px}
#rotate-phone p{font:10px/1.5 monospace;letter-spacing:1px;text-transform:uppercase;margin:0;color:#666}
@media(max-height:320px){#rotate-phone svg{width:60px;height:60px;margin-bottom:8px}#rotate-phone h2{font-size:27px}}

/* The selected work name is essential when choosing a small projected logo. */
body[data-scene=archive] .chapter p{display:block;font-size:11px;line-height:1.3;letter-spacing:.3px;overflow-wrap:anywhere}

/* Portrait tablets use the same handheld controls with a broader scene. */
@media(min-width:701px) and (orientation:portrait){
 body{padding:0}.handheld{width:min(100%,820px);padding:12px}
 .brand{font-size:12px;height:30px;margin-bottom:10px}
 .brand img{width:22px;height:22px}.console{max-width:650px;margin:auto}
 .chapter h1{font-size:29px}.chapter p{font-size:11px}
 .context button{font-size:24px;max-width:170px;min-height:48px}
 .controls{padding:16px 35px 6px}.dpad{grid-template:repeat(3,50px)/repeat(3,50px)}
 .round{width:68px;height:68px;font-size:34px}.ab{gap:25px}
 .system button{font-size:10px}.hint{font-size:10px}
}

/* Supporting labels remain legible without shrinking the world. */
.chapter>small{font-size:10px}.chapter p{font-size:11px;line-height:1.3}
.ab small,.system button{font-size:10px;line-height:1.2}
.hint,.direction>small{display:none}.brand{font-size:11px}

/* Preserve the control row's space so relocating the relics never resizes the screen. */
body[data-scene="house"] #context{visibility:visible}