:root{color-scheme:dark;--bg:#020207;--muted:#827d91;--faint:#403b49;--line:#272332;--silver:#d1cbdc;--lavender:#d9b4ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020207;color:#dedde5;font-family:'Yu Gothic','Hiragino Kaku Gothic ProN','Noto Sans JP','MS Gothic',sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #e4b8ff;outline-offset:4px}button:disabled{opacity:.45;cursor:default}
body{overflow-x:hidden}.app{min-height:100svh;position:relative}.screen{min-height:100svh;display:none;position:relative;overflow:hidden}.screen.active{display:flex;animation:screenAppear .8s ease both}@keyframes screenAppear{from{opacity:0;filter:brightness(.4)}to{opacity:1;filter:brightness(1)}}
.scanlines,.grain{pointer-events:none;position:fixed;inset:0;z-index:80}.scanlines{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.08) 4px 5px);opacity:.55}.grain{background-image:url('assets/noise.svg');opacity:.13;mix-blend-mode:screen}
.hud{position:fixed;z-index:120;right:clamp(9px,2vw,24px);top:max(12px,env(safe-area-inset-top));display:flex;gap:10px}.hud button{border:1px solid #484451;background:#0b0a15d9;color:#d5ccd9;padding:7px 10px;font-size:12px;letter-spacing:.02em;min-height:34px}.hud button:hover{border-color:#bdb5c8;background:#21152e}.hud #infoToggle{min-width:34px;font-weight:700}
.home-screen{background:radial-gradient(ellipse at 50% 32%,#090910 0,#020207 53%,#000 100%);flex-direction:column;align-items:center;justify-content:space-between}
.admin-stage{position:relative;min-height:0;flex:1 1 auto;width:100%;display:flex;justify-content:center;align-items:center;padding:34px 10px 0;overflow:hidden;isolation:isolate}
.admin-art-wrap{position:relative;width:min(730px,calc(100vw - 8px),calc((100svh - 210px)*.99));min-width:0;line-height:0;transition:filter .2s ease;animation:materialize 1.2s ease both}
@keyframes materialize{0%{opacity:0;filter:contrast(2) brightness(0);transform:translateY(5px) scale(1.02)}68%{opacity:1;filter:brightness(.8)}100%{opacity:1;filter:none;transform:none}}
.admin-image{display:block;width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:contrast(1.035)}.admin-stage::after{content:'';pointer-events:none;position:absolute;z-index:2;left:0;right:0;bottom:-2px;height:19%;background:linear-gradient(transparent,#020207 92%)}
.ear-hotspot{position:absolute;z-index:6;left:73.5%;top:29%;width:13%;height:23%;background:transparent;border:0;clip-path:ellipse(46% 50% at 50% 50%);cursor:crosshair;touch-action:manipulation}.ear-hotspot:hover{background:#e5c6ff10}.ear-hotspot:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #cda9ee;border-radius:50%}.ear-hotspot::after{content:' ';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:#c9a5df;opacity:0;box-shadow:0 0 12px #f9e3ff;transition:opacity .2s}.ear-hotspot:hover::after,.ear-hotspot:focus-visible::after{opacity:1}
.admin-art-wrap.distorted{animation:distort .36s steps(3,end) 1}@keyframes distort{0%,100%{filter:none}20%{filter:brightness(1.6) contrast(1.8);transform:translateX(3px)}60%{filter:invert(.1) contrast(1.4);transform:translateX(-3px)}}
.static-line{position:absolute;z-index:3;inset:0;background:linear-gradient(to bottom,transparent 48%,#ddd1 49%,transparent 50%);opacity:0;pointer-events:none}.home-screen.typing .static-line{animation:noiseSweep 2s linear .2s 1}@keyframes noiseSweep{0%{transform:translateY(-30%);opacity:.3}100%{transform:translateY(50%);opacity:0}}
.dialogue-panel{z-index:4;flex:0 0 auto;width:min(710px,calc(100% - 22px));text-align:center;border-top:1px solid #25202b;border-bottom:1px solid #25202b;background:linear-gradient(90deg,transparent,#0c0a13cc 14%,#0c0a13cc 86%,transparent);padding:11px 16px 10px;min-height:102px;display:flex;flex-direction:column;justify-content:center}.speaker-id{font-size:10px;color:#736d7d;letter-spacing:.24em;font-family:monospace}.speaker-id span{color:#a68bbb}.dialogue-text{margin:5px 0 0;font-size:clamp(16px,2.8vw,21px);line-height:1.7;letter-spacing:.04em;font-weight:500;white-space:pre-line;text-shadow:0 0 6px #eee5;min-height:40px}.dialogue-text::after{content:'▏';animation:caretBlink 1s step-end infinite;color:#9781a5}@keyframes caretBlink{50%{opacity:0}}.dialogue-foot{display:flex;justify-content:space-between;gap:12px;margin:4px 2px 0;font-size:10px;color:#665d70;letter-spacing:.08em;font-family:monospace}.voice-status{color:#807484}
.control-strip{z-index:5;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,14px);padding:11px 7px 10px;width:100%;font-size:12px}.control-strip button{border:1px solid #39313d;background:#08070d;color:#b1aabb;min-height:34px;padding:5px clamp(7px,2vw,15px)}.control-strip #next{color:#f2eaf7;border-color:#8a748e;min-width:70px}.control-strip button:hover{color:white;border-color:#d2b8e0;background:#15111b}.control-strip #leave{color:#726d7b}
.micro-footer{z-index:4;font-family:monospace;font-size:10px;color:#4f4b57;letter-spacing:.07em;margin:0 0 7px}.text-link{color:#6f6576;background:none;padding:1px 3px;border:0;text-decoration:underline;font-size:10px}.text-link:hover{color:#ddd}
.tempest-screen{background:#09000e;align-items:center;justify-content:center}.tempest-bg{position:absolute;inset:-2%;background-image:url('assets/tempest-background.webp');background-repeat:no-repeat;background-position:center 42%;background-size:cover;animation:tempestZoom 27s ease-in-out infinite alternate;filter:saturate(.9) contrast(1.1)}@keyframes tempestZoom{from{transform:scale(1.02)}to{transform:scale(1.095)}}.tempest-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 28%,transparent 9%,#0c00112e 48%,#050007c9 98%),linear-gradient(180deg,#13041a33,transparent 25%,#05000855 52%,#06000dbb 100%)}
.particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:var(--p);height:var(--p);background:#eeadff;border-radius:50%;filter:blur(1px);box-shadow:0 0 13px 5px #da4fff70;left:var(--x);top:var(--y);animation:drift var(--d) ease-in-out var(--delay) infinite alternate}@keyframes drift{from{transform:translate(-13px,11px);opacity:.1}50%{opacity:1}to{transform:translate(15px,-27px);opacity:.15}}
.tempest-ui{position:relative;z-index:2;min-height:100svh;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:70px 13px 24px}.tempest-topmark{position:absolute;left:0;right:0;top:max(59px,env(safe-area-inset-top));font:11px monospace;letter-spacing:.32em;color:#debce0a8}.tempest-topmark span{color:#a44cf7}.tempest-count{width:min(100%,900px);padding:27px 9px;background:radial-gradient(ellipse,#05000fbe,transparent 72%);text-shadow:0 2px 3px #000,0 0 9px #000}.tempest-count h1{font-size:clamp(34px,7vw,83px);font-weight:850;color:#08050b;-webkit-text-stroke:1.6px #e8d7f1;text-shadow:0 0 2px #fff,0 3px 5px black,0 0 20px #ac4dff;letter-spacing:.04em;line-height:1.4;margin:0}.tempest-count p{font-family:Arial,'Yu Gothic',sans-serif;font-size:clamp(21px,4.1vw,45px);font-weight:750;margin:1px 0 8px;color:#d9c9e9;line-height:1.3;-webkit-text-stroke:.4px #210b26}.tempest-count p span{font-size:.75em}.count-value{font-family:Impact,'Arial Black',Arial,sans-serif;font-size:clamp(56px,11vw,132px);font-weight:800;white-space:nowrap;letter-spacing:.01em;line-height:1.14;color:#e9dcef;-webkit-text-stroke:1.2px #2b1632;text-shadow:0 6px 5px black,0 0 30px #510080}.fiction-mark{font-size:11px;letter-spacing:.03em;color:#b9a5caa9;margin-top:19px}.tempest-bottom{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:0;right:0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.tempest-bottom button{color:#e6caee;background:#100b18a8;border:1px solid #9e6fb3a3;padding:9px 16px;font-size:12px;backdrop-filter:blur(5px)}
.lost-screen,.usb-screen{background:radial-gradient(ellipse at center,#0f0b14 0,#030207 75%);align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center}.lost-content,.usb-content{width:min(100%,570px);margin:auto}.lost-sigil{font-size:50px;filter:blur(2px);color:#9e92a9}.lost-en,.usb-id{color:#807287;font:12px monospace;letter-spacing:.25em}.lost-content h1,.usb-content h1{font-size:clamp(20px,4vw,29px);font-weight:500;margin:25px 0}.lost-content p:not(.lost-en),.usb-content p{font-size:14px;line-height:2.1;color:#aca1b6}.ghost-action{display:block;margin:28px auto 5px;background:#110d18;color:#e0d7e4;border:1px solid #706579;padding:11px 18px;font-size:13px;min-height:43px}.quiet-link{display:block;border:0;background:none;color:#84758d;text-decoration:underline;padding:10px;margin:12px auto;font-size:12px}.usb-icon{font-size:78px;color:#b4a4c9}.progress{height:4px;margin:21px 0 28px;background:#292032;overflow:hidden;border:1px solid #443449}.progress>div{width:0;height:100%;background:#dec8e5;transition:width 1.8s ease}
.secret-overlay,.info-overlay{position:fixed;inset:0;z-index:150;background:#000ee;display:none;align-items:center;justify-content:center;padding:24px;overflow:auto}.secret-overlay.open,.info-overlay.open{display:flex}.secret-content{text-align:center;max-width:500px;width:100%;color:#ece4f5}.secret-glyph{font-size:54px;color:#dcbef0;animation:secretPulse 2s ease-in-out infinite alternate}@keyframes secretPulse{to{opacity:.25;filter:blur(2px)}}.secret-content p{font-size:17px;letter-spacing:.09em;margin:16px 0 36px}.secret-enter{display:block;margin:0 auto;font-family:monospace;font-size:clamp(42px,12vw,68px);font-weight:700;letter-spacing:.13em;background:none;color:#f4eafd;border:1px solid #5d4467;padding:10px 22px;box-shadow:0 0 25px #be68ef36;transition:box-shadow .2s}.secret-enter span{font-size:.65em}.secret-enter:hover{box-shadow:0 0 34px #be68efb3}.secret-content .quiet-link{margin-top:35px}
.info-overlay{background:#08050ce8;backdrop-filter:blur(8px)}.info-content{position:relative;max-width:640px;width:100%;max-height:90svh;overflow:auto;background:#100c17;color:#d9cfe2;border:1px solid #685573;padding:clamp(20px,5vw,37px);text-align:left;box-shadow:0 10px 45px black}.info-content h2{font-size:23px;margin:0 35px 18px 0}.info-content h3{font-size:15px;color:#d3b6ed;border-bottom:1px solid #4a3c55;padding-bottom:6px;margin:21px 0 7px}.info-content p{font-size:13px;line-height:1.9}.info-x{position:absolute;top:10px;right:12px;background:none;color:#ddd;border:0;font-size:27px}.info-small{font-size:11px!important;color:#827a8b}.info-btn{border:1px solid #786d85;background:#191320;color:#eee;padding:8px 12px;font-size:12px}

.manga-bubbles{position:absolute;inset:0;z-index:4;pointer-events:none}.manga-bubble{position:absolute;max-width:170px;background:#f2eef5;color:#0e0b12;border:2px solid #111;border-radius:22px;padding:11px 14px;font-weight:700;line-height:1.25;box-shadow:0 4px 20px #0008}.manga-bubble::after{content:'';position:absolute;width:18px;height:18px;background:#f2eef5;border-right:2px solid #111;border-bottom:2px solid #111;transform:rotate(45deg)}.bubble-left{left:5%;bottom:26%}.bubble-left::after{left:26px;bottom:-10px}.bubble-right{right:3%;top:10%}.bubble-right::after{right:26px;bottom:-10px}
.guide-screen,.access-screen{align-items:center;justify-content:center;padding:24px;background:#040207}.guide-wrap,.access-wrap{width:min(100%,980px);margin:auto}.guide-card{position:relative;border:1px solid #2a222f;background:linear-gradient(180deg,#0d0911,#07050a);padding:18px;margin-bottom:14px;box-shadow:0 8px 28px #000}.guide-hero{min-height:250px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.guide-face{width:min(42vw,270px);aspect-ratio:1/1.08;border-radius:8px;background:radial-gradient(circle at 45% 28%,#f0edf2 0 12%,#0e0d11 13% 19%,transparent 20%),radial-gradient(circle at 59% 28%,#f0edf2 0 12%,#0e0d11 13% 19%,transparent 20%),radial-gradient(circle at 50% 47%,#d8d2df 0 9%,transparent 10%),radial-gradient(circle at 50% 64%,#d7cde0 0 9%,#140f16 10% 16%,transparent 17%),linear-gradient(180deg,#08070a 0 18%,#eee8f1 18% 22%,#ddd5e6 22% 78%,#120f16 78% 100%);filter:contrast(1.1);box-shadow:inset 0 0 60px #000}.guide-bubble,.guide-mini{background:#faf7fd;color:#08060b;border:2px solid #111;border-radius:22px;padding:16px 18px;box-shadow:0 6px 25px #0006;white-space:pre-line;font-weight:700;line-height:1.4}.guide-bubble{font-size:clamp(18px,3vw,32px);max-width:430px}.guide-bubble.small{font-size:clamp(16px,2.2vw,24px);max-width:260px}.guide-note{display:flex;justify-content:space-between;align-items:center;gap:16px}.guide-mini{font-size:clamp(14px,2vw,21px);max-width:420px}.guide-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.guide-controls button,.access-buttons button{border:1px solid #6d5c79;background:#100b15;color:#efe9f6;padding:10px 16px;font-size:13px}.access-wrap{position:relative;min-height:88svh;display:flex;align-items:center;justify-content:center}.six-wall{position:absolute;inset:0;background:#09050d;overflow:hidden}.six-wall::before{content:'666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666';position:absolute;inset:0;color:#d9d3e150;font:700 clamp(24px,4vw,44px)/1 monospace;letter-spacing:.05em;word-break:break-all;padding:4vw;transform:scale(1.06)}.six-wall::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 27px,#ffffff06 27px 31px,transparent 31px 49px),radial-gradient(circle at 50% 17%,#fff3 0,#fff0 23%),linear-gradient(180deg,#0000,#000a)}.access-mountain{position:absolute;inset:auto 0 8% 0;height:min(55svh,520px);margin:auto;width:min(62vw,530px);clip-path:polygon(50% 2%,100% 100%,0 100%);background:radial-gradient(circle at 50% 0%,#fff7 0,#fff0 26%),linear-gradient(180deg,#09070a 0,#161019 30%,#07050a 100%);box-shadow:0 0 50px #7d5aa33b;opacity:.9}.access-panel{position:relative;z-index:2;width:min(100%,760px);background:linear-gradient(180deg,#07050bcc,#0c0810e6);border:1px solid #4b3d56;padding:20px 18px;box-shadow:0 12px 34px #000}.access-title{font-size:clamp(28px,5vw,54px);font-weight:900;margin:0;color:#f1e8f8;text-shadow:0 0 12px #8c44d9}.access-title span{font-size:.48em;font-weight:700}.access-sub{font-size:clamp(17px,2.3vw,24px);margin:4px 0 10px;color:#d9cce5}.access-note{font-size:14px;line-height:1.9;color:#bfb3c9}.access-input-wrap{display:block;margin-top:15px}.access-input-wrap span{display:block;font:11px monospace;letter-spacing:.25em;color:#8b7c99;margin-bottom:8px}.access-input-wrap input{width:100%;background:#fff;color:#111;border:2px solid #222;padding:14px 16px;font-size:clamp(26px,4vw,52px);font-family:Arial,sans-serif}.access-input-wrap input.bad{animation:shake .26s linear 2}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.access-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.access-error{min-height:24px;margin-top:10px;color:#efbfd6;font-size:13px}.tempest-lore{font-size:12px;line-height:1.8;color:#dbc8e8;background:#0d0712b8;border:1px solid #654f72;border-radius:12px;padding:10px 14px;max-width:760px;margin:16px auto 0;backdrop-filter:blur(4px)}
@media(max-width:580px){.manga-bubble{font-size:14px;max-width:130px;padding:8px 10px}.bubble-left{left:3%;bottom:29%}.bubble-right{right:2%;top:12%}.guide-hero{min-height:210px;flex-direction:column;align-items:center;justify-content:center}.guide-face{width:min(56vw,220px)}.guide-note{flex-direction:column;align-items:stretch}.guide-bubble,.guide-mini{border-radius:18px}.access-wrap{min-height:92svh}.access-mountain{width:min(76vw,360px);height:min(40svh,260px);bottom:18%}.access-panel{padding:14px 12px}.tempest-lore{font-size:11px;margin-top:10px}.admin-stage{padding:32px 0 0}.admin-art-wrap{width:min(100vw,calc((100svh - 190px)*1.0))}.dialogue-panel{min-height:116px}.dialogue-text{font-size:16px;min-height:52px}.speaker-id{font-size:9px}.control-strip{gap:5px;font-size:11px;padding:8px 4px}.control-strip button{min-height:38px;padding:5px 7px}.control-strip #replay span{display:none}.micro-footer{font-size:9px}.tempest-count h1{font-size:clamp(29px,8vw,51px)}.tempest-count p{font-size:clamp(19px,5vw,28px)}.count-value{font-size:clamp(46px,12vw,76px)}.fiction-mark{font-size:10px}.tempest-bg{background-position:center 35%}}
@media(max-height:650px){.admin-stage{padding-top:0}.admin-art-wrap{width:min(520px,calc((100svh - 153px)*1.02))}.dialogue-panel{min-height:74px;padding-top:5px;padding-bottom:4px}.dialogue-text{font-size:14px;min-height:30px}.control-strip{padding:6px 4px}.micro-footer{margin-bottom:4px}.tempest-count{transform:scale(.87)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
