/* Layout: one pixel-art canvas (960 base, scaled to width) + motion overlay; single dark arcade look */
:root{ --bg:#000000; --ink:#FFF1E8; --dim:#C2C3C7; --yel:#FFEC27; --navy:#1D2B53; color-scheme:dark; }
html,body{ background:var(--bg); color:var(--ink); }
body{ margin:0; font-family:"Noto Sans JP","Hiragino Sans",sans-serif; }
#stage{ position:relative; max-width:1920px; margin:0 auto; line-height:0; }
#stage canvas{ display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; }
#o{ position:absolute; inset:0; }
#tl{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; line-height:1; color:transparent; font-family:"Noto Sans JP","Hiragino Sans",sans-serif; font-weight:700; }
#tl span{ position:absolute; white-space:pre; transform-origin:0 0; pointer-events:auto; cursor:text; color:transparent; -webkit-user-select:text; user-select:text; }
#tl span::selection{ background:rgba(255,236,39,.45); color:transparent; }
#tl span.p{ font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-weight:500; line-height:1; transform:none; }
#tl span.p::selection{ background:#FFEC27; color:#000; }
#tl span.p.b{ font-weight:700; }
.logo{ position:absolute; width:auto; max-width:none; pointer-events:none; }
.photo{ position:absolute; object-fit:cover; pointer-events:none; image-rendering:auto; background:#000; }
.photo.sns{ object-fit:contain; background:transparent; image-rendering:auto; }
#hud{ position:fixed; left:0; right:0; top:0; z-index:5; padding-top:env(safe-area-inset-top,0px); background:var(--bg); transform:translateY(-110%); transition:transform .25s steps(4); }
#hud.on{ transform:none; }
#hud canvas{ display:block; width:100%; max-width:1920px; margin:0 auto; image-rendering:pixelated; cursor:pointer; }
#entry{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg); overscroll-behavior:contain; touch-action:none; transition:background-color .6s steps(4); }
.sent{ position:absolute; left:0; width:1px; height:1px; pointer-events:none; }
#entry .wrap{ position:relative; flex:none; width:320px; height:180px; } /* exact size is set by script to fit the screen */
#entry canvas{ width:100%; height:100%; image-rendering:pixelated; display:block; }
body.left #entry{ background:transparent; }
/* while the sound question is open, the page behind cannot scroll */
html.locked, html.locked body{ overflow:hidden; height:100%; overscroll-behavior:none; }
/* nothing is shown until the first real screen is drawn (no flash of other pages) */
body:not(.ready) #stage, body:not(.ready) #hud, body:not(.ready) #pagetop{ visibility:hidden; }
#entry button{ position:absolute; top:51.1%; width:25%; height:15.6%; background:transparent; border:0; color:transparent; cursor:pointer; }
#entry button:focus-visible{ outline:3px solid var(--yel); outline-offset:3px; }
#entry .on{ left:20%; } #entry .off{ left:55%; }
#toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:6; background:var(--bg); color:var(--ink); border:3px solid var(--ink); outline:3px solid var(--bg); box-shadow:0 0 0 6px var(--ink); padding:12px 18px; font-size:14px; font-weight:700; line-height:1.5; max-width:calc(100vw - 64px); }
[hidden]{ display:none!important; }
#pagetop{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:8; width:clamp(56px,5vw,84px); aspect-ratio:72/120; padding:0; border:0; background:none; cursor:pointer; line-height:0; }
#pagetop{ transition:opacity .2s steps(3), visibility 0s; }
body.attop #pagetop{ opacity:0; visibility:hidden; transition:opacity .2s steps(3), visibility 0s .2s; }
@media (prefers-reduced-motion: reduce){ #pagetop, body.attop #pagetop{ transition:none; } }
#pagetop canvas{ width:100%; height:100%; display:block; image-rendering:pixelated; }
#pagetop:focus-visible{ outline:3px solid var(--yel); outline-offset:3px; }
#vid{ position:absolute; background:#000; object-fit:contain; image-rendering:pixelated; }
#play{ position:absolute; padding:0; border:0; background:none; cursor:pointer; line-height:0; }
#play canvas{ width:100%; height:100%; display:block; image-rendering:pixelated; }
#play:focus-visible{ outline:3px solid var(--yel); outline-offset:3px; }

.sp-only{ }
body.sp #entry button{ width:60%; height:11.4%; left:20%; }
body.sp #entry .on{ top:40%; } body.sp #entry .off{ top:57.1%; }
body.sp #todbox{ font-size:11px; padding-block:4px; padding-inline:6px; }
body.menuopen{ overflow:hidden; }
#spmenu{ position:fixed; inset:0; z-index:12; background:var(--bg); overflow:auto; overscroll-behavior:contain; }
#spmenu .in{ position:relative; width:100%; max-width:780px; margin:0 auto; line-height:0; }
#spmenu canvas{ display:block; width:100%; height:auto; image-rendering:pixelated; }
#spmenu button{ position:absolute; left:4%; width:92%; background:transparent; border:0; color:transparent; cursor:pointer; padding:0; }
#spmenu button:focus-visible{ outline:3px solid var(--yel); outline-offset:-3px; }
#spmenu .close{ top:1.5%; left:auto; right:3%; width:14%; height:6%; }
#o{ touch-action:pan-y; }

/* ---- production additions ---- */
#entry[hidden]{ display:none!important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* text mode: when keyboard focus enters the real HTML, show it as a readable panel */
.sr:focus-within, .sr:focus{ position:fixed; inset:16px; width:auto; height:auto; clip:auto; clip-path:none; overflow:auto; white-space:normal; z-index:30; background:var(--bg); color:var(--ink); border:3px solid var(--ink); outline:3px solid var(--bg); box-shadow:0 0 0 6px var(--ink); padding:24px; font-size:16px; line-height:1.8; }
.sr a{ color:var(--yel); }
.sr a:focus-visible{ outline:3px solid var(--yel); outline-offset:2px; }
.sr nav ul{ display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; padding:0; margin:0 0 16px; }
.sr img{ max-width:100%; height:auto; }
.skip{ position:absolute; left:16px; top:-80px; z-index:31; background:var(--yel); color:#000; padding:8px 12px; font-weight:700; }
.skip:focus{ top:16px; }
.nojs{ background:var(--navy); color:var(--ink); padding:16px; text-align:center; } .nojs a{ color:var(--yel); }
/* real form controls laid over the pixel form */
#forms{ position:absolute; left:0; top:0; width:0; height:0; z-index:4; }
.fx{ position:absolute; box-sizing:border-box; margin:0; border:0; border-radius:0; background:transparent; color:var(--ink); font-family:"Noto Sans JP","Hiragino Sans",sans-serif; font-weight:500; caret-color:var(--yel); -webkit-appearance:none; appearance:none; }
.fx::placeholder{ color:#5F574F; opacity:1; }
.fx:focus{ outline:3px solid var(--yel); outline-offset:0; }
.fx.bad{ outline:3px solid #FF004D; }
textarea.fx{ resize:none; }
.fx-hit{ position:absolute; opacity:0; margin:0; cursor:pointer; }
.fx-hit:focus-visible + .fx-ring, .fx-ring.on{ display:block; }
.fx-ring{ display:none; position:absolute; pointer-events:none; outline:3px solid var(--yel); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (prefers-reduced-motion: reduce){ #hud{ transition:none; } }
/* until the app has drawn the first screen */
body:not(.ready){ min-height:100vh; }