*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080917;color:#fff;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#26204d,#080917 60%);overflow:hidden}.shell{width:min(100vw,1280px);padding:16px}.game-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 68px);overflow:hidden;border:1px solid #bd5af69c;border-radius:22px;box-shadow:0 22px 80px #000a,0 0 60px #d126aa36;background:#10152e}canvas{display:block;width:100%;height:100%;object-fit:contain}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#0a0a1b75,transparent 34%,transparent 78%,#05081e45),linear-gradient(0deg,#080918b8,transparent 26%,transparent 76%,#09081b73)}.hidden{display:none!important}.screen{position:absolute;inset:0;z-index:5}.title-screen{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:5% 6%;background:linear-gradient(90deg,#09091ce8 0%,#101027bd 52%,#1010261a 100%)}.title-eyebrow,.end-kicker{letter-spacing:.28em;color:#77ebff;font-weight:900;font-size:clamp(9px,1vw,14px);text-shadow:0 0 13px #36ddff}h1{margin:14px 0 0;font-size:clamp(36px,6.2vw,88px);line-height:1.06;letter-spacing:-.08em;font-weight:1000;text-shadow:0 4px 0 #471039,0 0 36px #f6009d66}h1 span{color:#ffde40;text-shadow:0 4px 0 #a13816,0 0 34px #ff2f9e}h2{margin:8px 0 0;font-size:clamp(17px,2.5vw,36px);color:#fff;letter-spacing:.04em;text-shadow:0 2px 12px #000}.story{display:flex;align-items:center;gap:13px;max-width:620px;margin-top:24px;padding:12px 18px;background:#131932c9;border:1px solid #74dffb60;border-radius:14px;box-shadow:0 0 30px #00ccff20}.story .phone{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;background:#00bed6;color:#06131c;font-weight:900}.story p{margin:0;font-size:clamp(10px,1.15vw,16px);line-height:1.7}.story b{color:#ffdc54}.mission{font-size:clamp(10px,1.4vw,18px);font-weight:800;margin:18px 0}.primary{border:0;border-radius:13px;background:linear-gradient(110deg,#ff357d,#fd3aa9 62%,#a53bff);box-shadow:0 6px 0 #8a174e,0 0 28px #fd2c9d8a;color:#fff;padding:15px 30px;font-size:clamp(16px,2vw,25px);font-weight:1000;letter-spacing:.09em;cursor:pointer;touch-action:manipulation}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #8a174e}.primary span{padding-left:28px}.title-guide{margin-top:19px;color:#d5daf2;font-size:clamp(9px,1vw,13px)}.hud{position:absolute;z-index:3;inset:0;pointer-events:none}.hud-top{display:flex;align-items:flex-start;gap:16px;padding:16px 18px}.badge,.tower-box,.evidence-box{background:#071027d9;border:1px solid #84daf966;border-radius:12px;box-shadow:0 6px 20px #0007,0 0 15px #08a8d72d}.badge{font-size:clamp(10px,1.2vw,15px);font-weight:1000;letter-spacing:.13em;padding:11px 14px;white-space:nowrap;color:#fff}.badge span{display:block;color:#56e8fb;font-size:.65em}.tower-box{width:40%;max-width:390px;margin:auto;padding:9px 13px}.tower-label{display:flex;justify-content:space-between;align-items:center;font-size:clamp(9px,1.2vw,14px);font-weight:800}.tower-label strong{font-size:clamp(16px,2vw,24px);color:#ffdf59}.meter{height:10px;border-radius:9px;background:#242847;margin-top:7px;overflow:hidden}.meter>div{width:0;height:100%;background:linear-gradient(90deg,#49e6fc,#ff46a9,#ffdb3c);box-shadow:0 0 12px #ff3cab}.evidence-box{padding:7px 14px;white-space:nowrap}.evidence-box small{font-size:clamp(8px,1vw,12px);font-weight:700;color:#d7f6ff}.evidence-box strong{font-size:clamp(18px,2.6vw,30px);color:#ffe456;padding:0 6px}.toast{position:absolute;left:50%;top:23%;transform:translateX(-50%);white-space:nowrap;border:1px solid #ffe768;background:#24102bdc;padding:9px 18px;border-radius:10px;color:#fff0a5;font-size:clamp(13px,2vw,22px);font-weight:900;box-shadow:0 0 25px #f52a89}.warning{position:absolute;top:23%;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;padding:10px 28px;border:2px solid #ffc042;border-radius:14px;background:#2a081edb;box-shadow:0 0 35px #ff3a5c;animation:pulse .55s infinite alternate}.warning b{color:#ffdc39;font-size:clamp(22px,4vw,45px);letter-spacing:.12em}.warning span{font-weight:900;font-size:clamp(11px,1.5vw,18px)}@keyframes pulse{to{box-shadow:0 0 55px #ff914f;transform:translateX(-50%) scale(1.04)}}.controls{position:absolute;bottom:16px;left:18px;right:18px;display:flex;align-items:flex-end;justify-content:space-between}.control{pointer-events:auto;width:clamp(68px,10vw,120px);height:clamp(68px,10vw,120px);border:2px solid #fff9;border-radius:50%;color:#fff;font-size:clamp(23px,4vw,42px);font-weight:1000;cursor:pointer;touch-action:none;box-shadow:0 0 25px #000a;text-shadow:0 2px 4px #0007}.control span{display:block;font-size:clamp(9px,1.2vw,14px);line-height:1}.jump{background:#00a5d9c9}.catch{background:#ff298ac9}.control:active{transform:scale(.93)}.control-hint{font-size:clamp(8px,1vw,12px);text-align:center;color:#d8eaff;text-shadow:0 1px 5px #000;line-height:1.6}.end-screen{display:grid;place-items:center;background:#070916be;backdrop-filter:blur(5px)}.end-card{width:min(90%,560px);border-radius:22px;border:1px solid #ff6ccd;background:linear-gradient(145deg,#1c113add,#0c1739e8);padding:26px 34px;text-align:center;box-shadow:0 0 60px #ec328563}.end-card h2{font-size:clamp(27px,4vw,48px);color:#ffe55c}.end-card p{font-size:clamp(12px,1.5vw,18px);line-height:1.7}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:15px 0 23px}.stat{background:#ffffff12;border-radius:9px;padding:9px}.stat span{display:block;font-size:clamp(9px,1vw,13px);color:#afc6e8}.stat strong{font-size:clamp(18px,2.6vw,29px);color:#fff}.end-card .primary{font-size:clamp(13px,1.8vw,21px)}.below{display:flex;justify-content:space-between;padding:10px 5px;color:#8289aa;font-size:10px;letter-spacing:.17em}@media(max-width:650px){.shell{padding:0}.game-frame{border-radius:0;border:0;max-height:100dvh;aspect-ratio:auto;height:100dvh}canvas{height:100%;object-fit:cover}.title-screen{padding:7%;background:linear-gradient(90deg,#09091ce8,#101027a9 85%)}h1{font-size:clamp(34px,10vw,58px)}h2{font-size:clamp(16px,4.4vw,27px)}.story{margin-top:24px}.mission{font-size:13px;max-width:80%}.title-guide{max-width:70%;line-height:1.6}.below,.badge,.control-hint{display:none}.hud-top{padding:11px;gap:7px}.tower-box{width:auto;flex:1}.evidence-box{padding:6px 8px}.controls{bottom:max(22px,env(safe-area-inset-bottom));left:18px;right:18px}.control{width:76px;height:76px}}
.control-group{display:flex;gap:12px;align-items:flex-end}.slide{background:#6947bccc}.dash{background:#ed9f22d9}.catch.ready{box-shadow:0 0 0 5px #ffdf6477,0 0 30px #ffe366;animation:readyPulse .7s infinite alternate}.control.cooldown{filter:grayscale(.7);opacity:.5}@keyframes readyPulse{to{transform:scale(1.08)}}@media(max-width:650px){.controls{left:9px;right:9px}.control-group{gap:5px}.control{width:clamp(58px,18vw,76px);height:clamp(58px,18vw,76px);font-size:26px}.control span{font-size:9px}.toast{max-width:90%;white-space:normal;text-align:center}.warning{width:max-content;max-width:90%}}
.capture-screen{display:flex;flex-direction:column;justify-content:space-between;background:#120e2b;isolation:isolate}.capture-screen::before{content:"";position:absolute;inset:0;z-index:-2;background:url("assets/capture-scene.png") center center/cover no-repeat;animation:captureZoom 9s ease-out both}.capture-screen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b0b2ba8,transparent 26%,transparent 52%,#07091ae8 90%)}@keyframes captureZoom{from{transform:scale(1.08)}to{transform:scale(1)}}.capture-heading{padding:25px 34px;text-shadow:0 3px 16px #000}.capture-heading small{display:block;color:#78eaff;font-size:clamp(10px,1.3vw,16px);font-weight:1000;letter-spacing:.28em}.capture-heading strong{display:block;color:#ffdf4d;font-size:clamp(28px,4.6vw,62px);font-weight:1000;text-shadow:0 4px 0 #9b194b,0 0 30px #ff5989}.capture-dialogue{align-self:center;width:min(92%,780px);margin-bottom:25px;padding:15px 22px 17px;border:2px solid #a3e9ffb3;border-radius:18px;background:#090e29df;box-shadow:0 0 32px #ed3f9a89,0 10px 40px #0009;backdrop-filter:blur(8px)}.speaker-row{display:flex;justify-content:space-between;align-items:center;color:#ffdf59;font-weight:1000;font-size:clamp(14px,2vw,23px)}.speaker-row small{color:#a9b9d5;font-size:12px}.capture-dialogue p{min-height:1.4em;margin:9px 0 13px;font-size:clamp(17px,2.8vw,31px);font-weight:1000;line-height:1.4;letter-spacing:.03em}.capture-next{float:right;padding:8px 20px;font-size:clamp(12px,1.5vw,17px);box-shadow:0 4px 0 #8a174e}@media(max-width:650px){.capture-screen::before{background-size:100% auto;background-position:center 28%}.capture-heading{padding:22px 18px}.capture-heading strong{font-size:clamp(27px,8vw,43px)}.capture-dialogue{width:94%;margin-bottom:max(22px,env(safe-area-inset-bottom));padding:14px 16px}.capture-dialogue p{font-size:19px}}
canvas{touch-action:none;-webkit-touch-callout:none}
.sound-toggle,.pause-btn{border:1px solid #a5e8fb8c;border-radius:10px;background:#0a1431df;color:#e8fbff;font-weight:900;box-shadow:0 0 14px #37c6ed50;cursor:pointer;touch-action:manipulation}.sound-toggle{position:absolute;z-index:9;top:16px;right:16px;min-width:68px;padding:9px 10px;font-size:13px}.pause-btn{pointer-events:auto;width:42px;height:42px;margin-right:77px;font-size:20px}.pause-screen{display:grid;place-items:center;background:#07091ab8;backdrop-filter:blur(6px)}.pause-card{width:min(90%,440px);padding:30px;text-align:center;border:1px solid #8deaff;border-radius:20px;background:#101a3eed;box-shadow:0 0 45px #38bbeb50}.pause-card small{color:#64e8ff;letter-spacing:.3em;font-weight:900}.pause-card h2{font-size:35px;color:#ffe36b}.pause-card p{font-weight:700}.pause-card .primary{display:block;margin:20px auto 13px}.secondary{border:1px solid #80cce1;background:#132145;color:#dff8ff;padding:10px 18px;border-radius:10px;font-weight:800;cursor:pointer}@media(max-width:650px){.sound-toggle{top:10px;right:8px;min-width:51px;font-size:10px;padding:7px 5px}.pause-btn{width:34px;height:34px;margin-right:47px;font-size:15px}.hud-top{padding-right:5px}.evidence-box small:first-child{display:none}}
.grab-cue{position:absolute;z-index:4;top:27%;left:50%;transform:translateX(-50%);padding:10px 22px;border:2px solid #ffe16c;border-radius:12px;background:#211032df;color:#fff3ab;font-size:clamp(17px,2.5vw,28px);font-weight:1000;white-space:nowrap;text-shadow:0 2px 8px #000;box-shadow:0 0 30px #ff60b9}.hud.grabbing .controls{opacity:0;pointer-events:none}
/* Ver.1.2 title composition, built from separate layers so the lettering stays crisp. */
.title-screen{display:block;padding:0;overflow:hidden;background:#081631;isolation:isolate}
.title-sky{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#080b22b0,#080b2240 42%,#080b2290),url('assets/tokyo-night.png') center 43%/cover no-repeat;filter:saturate(1.25)}
.title-screen::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 31%,#17102d20 12%,#09091daa 80%),linear-gradient(0deg,#090719f5,transparent 34%)}
.title-runner{position:absolute;bottom:-8%;max-height:86%;width:auto;filter:drop-shadow(0 12px 3px #07101bbd) drop-shadow(0 0 25px #ff4aaf6b);pointer-events:none;z-index:0}
.title-mi{left:-3%;transform:rotate(-5deg)}
.title-akiru{right:2%;max-height:72%;transform:rotate(3deg);filter:drop-shadow(0 12px 3px #07101bbd) drop-shadow(0 0 20px #78dfff70)}
.title-content{position:absolute;z-index:1;top:7%;left:20%;width:60%;display:flex;align-items:center;flex-direction:column;text-align:center}
.title-content .title-eyebrow{padding:6px 17px;border-radius:99px;background:#09162ccc;border:1px solid #67d8ff80;letter-spacing:.16em;font-size:clamp(10px,1.3vw,16px)}
.title-content h1{margin:12px 0 0;white-space:nowrap;font-size:clamp(38px,6.6vw,90px);letter-spacing:-.09em;-webkit-text-stroke:clamp(2px,.42vw,6px) #160a24;paint-order:stroke fill;filter:drop-shadow(0 5px 0 #ef3086) drop-shadow(0 0 20px #fa4aaf)}
.title-content h1 small{font-size:.42em;color:#fff}
.title-content h1 .title-donki{color:#ffe553;background:linear-gradient(#fff477,#ffbd20);background-clip:text;-webkit-text-fill-color:transparent}
.title-content h1 .title-panty{color:#ff65a2;background:linear-gradient(#ffb5d0,#ff3a8b);background-clip:text;-webkit-text-fill-color:transparent}
.title-content h2{margin:0;padding:4px 13px;border-radius:10px;background:#100921b9;font-size:clamp(17px,2.45vw,34px);color:#fff;text-shadow:0 3px 0 #c61559,0 0 12px #ff2c83}
.title-quip{margin-top:17px;padding:7px 14px;border:2px solid #ff92c4;border-radius:100px;background:#fff;color:#ad174e;font-size:clamp(11px,1.45vw,18px);font-weight:1000;transform:rotate(-3deg);box-shadow:0 5px 0 #b22058}
.title-start{margin-top:26px;padding:14px 38px;border:3px solid #fff;font-size:clamp(19px,2.9vw,34px);box-shadow:0 7px 0 #7b1644,0 0 35px #ff278f;animation:titlePulse 1.6s ease-in-out infinite alternate}
@keyframes titlePulse{to{box-shadow:0 7px 0 #7b1644,0 0 52px #ff83bd;transform:scale(1.035)}}
.title-mission{margin:18px 0 0;padding:7px 15px;border-radius:9px;background:#080d25c9;color:#fff;font-size:clamp(11px,1.25vw,16px);font-weight:900;text-shadow:0 1px 7px #000}
.title-features{position:absolute;z-index:2;bottom:13px;left:12%;right:12%;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.title-features span{padding:7px 10px;border:1px solid #52bfe8b0;border-radius:6px;background:linear-gradient(#19345beb,#091328ed);color:#f5fbff;font-size:clamp(9px,1.1vw,14px);font-weight:900;box-shadow:0 3px 10px #0008}
@media(max-width:650px){.title-sky{background-position:58% center}.title-content{top:13%;left:5%;width:90%}.title-content h1{font-size:clamp(36px,10.5vw,66px)}.title-content h2{font-size:clamp(15px,4.1vw,25px)}.title-quip{margin-top:20px}.title-start{margin-top:18px;padding:13px 24px;font-size:22px}.title-mission{max-width:90%;line-height:1.5}.title-runner{max-height:48%;bottom:12%}.title-mi{left:-15%}.title-akiru{right:-9%;max-height:41%}.title-features{left:4%;right:4%;bottom:max(16px,env(safe-area-inset-bottom))}.title-features span{font-size:10px}}
/* Ver.1.3: bold arcade title and usable menu actions. */
.title-content{top:3.5%;left:9%;width:82%}
.title-content h1{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;font-size:clamp(45px,7.6vw,108px);font-weight:1000;-webkit-text-stroke:clamp(4px,.65vw,9px) #0b0717;filter:drop-shadow(0 5px 0 #f42c92) drop-shadow(0 0 18px #ff5ba5)}
.title-content h2{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;font-weight:1000;-webkit-text-stroke:1px #150917;text-shadow:0 3px 0 #c61559,0 0 16px #ff2c83}
.title-quip{margin-top:10px}
.title-start{margin-top:15px;padding:10px 37px;background:linear-gradient(115deg,#ff2c89,#ff0d74 55%,#f928aa);border-radius:22px}
.title-menu-actions{display:flex;flex-direction:column;gap:4px;width:min(42%,310px);margin-top:13px}
.title-menu-actions button{width:100%;padding:5px 12px;border:2px solid #c2e8f9;border-radius:12px;background:#071325e8;color:#fff;font-size:clamp(12px,1.35vw,18px);font-weight:1000;letter-spacing:.08em;text-shadow:0 1px 5px #000;box-shadow:0 3px 10px #000b;cursor:pointer;touch-action:manipulation}
.title-menu-actions button:hover,.title-menu-actions button:focus-visible{background:#223f68;outline:2px solid #ff80c8}
.title-mission{margin-top:10px;background:#080d25bd;font-size:clamp(14px,1.55vw,21px);color:#fff;font-weight:1000;-webkit-text-stroke:.3px #15091c;text-shadow:0 2px 0 #19101d,0 0 15px #ff418f}
.title-mission span{display:block;margin-top:2px;font-size:.7em;color:#ffe48f}
.menu-return{position:absolute;z-index:4;top:72px;left:18px;pointer-events:auto;padding:8px 13px;border:2px solid #a9e8ff;border-radius:10px;background:#091a37e9;color:#fff;font-weight:1000;letter-spacing:.08em;box-shadow:0 0 18px #31ceff80;cursor:pointer;touch-action:manipulation}
.menu-return:active{transform:scale(.95)}
.menu-panel{z-index:8;display:grid;place-items:center;background:#07091bdc;backdrop-filter:blur(8px)}
.menu-card{position:relative;width:min(88%,520px);max-height:85%;overflow:auto;padding:30px 35px;border:2px solid #ff84bd;border-radius:22px;background:linear-gradient(145deg,#2d1546f4,#071b37f4);box-shadow:0 0 50px #ff3a9c71,0 20px 55px #000b;text-align:center}
.menu-card>small{color:#6ee7ff;font-weight:1000;letter-spacing:.22em}
.menu-card h2{margin:9px 0 16px;color:#ffe156;font-size:clamp(29px,4vw,43px);text-shadow:0 3px 0 #9c2054}
.menu-card p{margin:9px 0;color:#fff;font-size:clamp(13px,1.5vw,17px);font-weight:750;line-height:1.65}
.menu-card strong{color:#ffe156}.menu-best{display:block;font-size:clamp(37px,6vw,64px)}
.menu-card .secondary{margin-top:19px;min-width:165px}
.menu-close{position:absolute;top:11px;right:14px;border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}
.pause-card .secondary,.end-card .secondary{display:block;margin:10px auto 0}
@media(max-width:650px){.title-content{top:10%;left:4%;width:92%}.title-content h1{font-size:clamp(38px,10.3vw,67px);-webkit-text-stroke:4px #0b0717}.title-content h2{font-size:clamp(15px,4vw,25px)}.title-menu-actions{width:min(62%,240px);margin-top:12px}.title-menu-actions button{padding:6px 8px;font-size:14px}.title-start{margin-top:15px;font-size:22px}.title-mission{max-width:96%;font-size:16px}.title-quip{font-size:12px}.menu-return{top:53px;left:8px;padding:5px 8px;font-size:10px}.menu-card{width:91%;padding:25px 20px}.menu-card p{font-size:14px}}
/* Ver.1.5: original, editable wordmark inspired by the supplied reference. */
.title-content{top:4%;left:7%;width:86%}
.title-content .title-wordmark{display:block;width:100%;margin:8px 0 0;line-height:1.05;white-space:normal;letter-spacing:-.09em;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;font-weight:1000;-webkit-text-stroke:0;filter:none}
.logo-main{display:flex;align-items:baseline;justify-content:center;white-space:nowrap;transform:rotate(-2deg);font-size:clamp(46px,8.6vw,112px);filter:drop-shadow(0 5px 0 #ff2d88) drop-shadow(0 0 18px #f94da2)}
.logo-main>span{-webkit-text-stroke:clamp(3px,.6vw,8px) #080713;paint-order:stroke fill;text-shadow:0 3px 0 #18101d,0 7px 0 #a72662,0 0 15px #ff7ac1}
.logo-main .logo-donki{color:#ffdc34;background:linear-gradient(#fff991 8%,#ffd238 50%,#ffab24);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-main .logo-no{color:#ff3c44;font-size:.47em;margin:0 .04em 0 .07em;-webkit-text-fill-color:#ff434a}
.logo-main .logo-panty{color:#ff519c;background:linear-gradient(#ffb5d2 8%,#ff65a5 48%,#f82580);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-main .logo-heart{color:#ff9ed1;font-size:.34em;margin-left:.05em;-webkit-text-fill-color:#ff9ed1;transform:rotate(16deg)}
.title-content .logo-subtitle{display:inline-block;margin:-2px auto 0;padding:5px 18px 7px;border:2px solid #f766a7;border-radius:30px;background:#080919e8;color:#fff;font-size:clamp(18px,2.55vw,34px);letter-spacing:-.05em;-webkit-text-stroke:1.5px #100617;paint-order:stroke fill;text-shadow:0 3px 0 #c51b5e,0 0 12px #ff80b0;box-shadow:0 4px 0 #6b1b54,0 0 22px #f72e9477;transform:rotate(1deg)}
.title-content .title-quip{position:static;display:inline-block;margin-top:12px}
.title-content .title-start{margin-top:14px}
.title-content .title-menu-actions{margin-top:10px}
.title-content .title-mission{margin-top:10px}
.title-features{display:none}
@media(max-width:650px){.title-content{top:10%;left:3%;width:94%}.title-content .title-wordmark{margin-top:10px}.logo-main{font-size:clamp(36px,9.7vw,66px)}.logo-main>span{-webkit-text-stroke:3px #080713}.title-content .logo-subtitle{font-size:clamp(15px,3.8vw,25px);padding:4px 10px 6px}.title-content .title-quip{margin-top:17px}.title-content .title-start{margin-top:17px}.title-content .title-menu-actions{margin-top:13px}.title-content .title-mission{margin-top:14px}}
/* User-supplied transparent character art over the neon Tokyo background. */
.title-screen{background:#08152d}
.title-sky{background:url('assets/tokyo-night.png') right center/cover no-repeat;filter:saturate(1.18)}
.title-screen::before{background:linear-gradient(180deg,#07132a78 0%,#07132a1a 38%,#070c20b0 100%)}
.title-runner{max-height:none;width:auto;object-fit:contain;transform:none;filter:drop-shadow(0 10px 15px #060a20a8);bottom:-5%;background:none;border:0;border-radius:0;box-shadow:none}
.title-mi{height:91%;left:-2%}
.title-akiru{height:71%;right:-12%;max-height:none}
.title-content{z-index:2}
.title-content .title-eyebrow{background:#08142fe8;border-color:#62dfff}
.title-content .title-wordmark{position:relative;z-index:2}
.title-content .title-start,.title-content .title-menu-actions,.title-content .title-mission{position:relative;z-index:2}
.title-content .title-mission{background:#0c1230e8}
@media(max-width:650px){.title-sky{background-position:85% center}.title-screen::before{background:linear-gradient(180deg,#07152a55,#07152a12 60%,#080c22ad)}.title-mi{height:42%;left:-10%;bottom:3%}.title-akiru{height:36%;right:-15%;bottom:3%;max-height:none}.title-content{top:8%}}
/* The reference uses a playful, heavy sticker wordmark: yellow left, pink right. */
.title-content .title-wordmark{position:relative;isolation:isolate;width:max-content;max-width:100%;padding:6px 22px 13px;margin-top:10px;line-height:.98;font-family:"Hiragino Kaku Gothic ProN","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}
.title-content .title-wordmark::before{content:"";position:absolute;z-index:-1;inset:0 -4px 0 -4px;background:#100915;border:3px solid #ff70b4;border-radius:31% 12% 25% 15% / 26% 32% 19% 29%;transform:rotate(-1.5deg) skew(-2deg);box-shadow:0 0 0 3px #fff,0 0 0 7px #110919,0 11px 0 #060817ba,0 0 26px #ff438f9c}
.logo-main{position:relative;z-index:1;align-items:center;gap:0;transform:rotate(-2deg);font-size:clamp(48px,8.2vw,108px);font-weight:1000;letter-spacing:-.105em;filter:none}
.logo-main>span{-webkit-text-stroke:clamp(5px,.78vw,11px) #0a0710;paint-order:stroke fill;text-shadow:0 6px 0 #0b0710,0 8px 0 #ff3993}
.logo-main .logo-donki{color:#ffdc34;background:none;-webkit-text-fill-color:#ffdc34;transform:rotate(-4deg) translateY(5px)}
.logo-main .logo-no{font-size:.46em;margin:0 .065em;color:#fa262e;-webkit-text-fill-color:#fa262e;transform:rotate(9deg) translateY(14px)}
.logo-main .logo-panty{color:#ff5b9c;background:none;-webkit-text-fill-color:#ff5b9c;transform:rotate(2deg) translateY(-2px)}
.logo-main .logo-heart{font-size:.33em;color:#ff9cce;-webkit-text-fill-color:#ff9cce;margin-left:.12em;transform:rotate(17deg) translateY(-.35em);text-shadow:0 3px 0 #fff,0 7px 0 #0b0710}
.title-content .logo-subtitle{position:relative;z-index:1;display:block;width:max-content;max-width:100%;margin:-2px auto 0;padding:0 9px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;font-size:clamp(18px,2.7vw,35px);font-weight:1000;letter-spacing:-.05em;-webkit-text-stroke:1px #140b16;text-shadow:0 3px 0 #d92760,0 5px 0 #0a0710;transform:rotate(-1deg)}
@media(max-width:650px){.title-content .title-wordmark{padding:5px 9px 11px}.logo-main{font-size:clamp(35px,9vw,62px)}.logo-main>span{-webkit-text-stroke:4px #0a0710}.title-content .logo-subtitle{font-size:clamp(13px,3.6vw,23px);padding:0 2px 3px}}
/* Reserve a separate line for the subtitle, including the main letters' thick outline. */
.title-content .title-wordmark{line-height:normal;padding-bottom:16px}
.title-content .logo-main{line-height:1.16;padding-bottom:.15em}
.title-content .logo-subtitle{margin:12px auto 0;line-height:1.3;white-space:nowrap}
@media(max-width:650px){.title-content .logo-main{padding-bottom:.14em}.title-content .logo-subtitle{margin-top:9px;line-height:1.3}}
/* iPhone Safari: fill the landscape viewport and keep all controls inside safe areas. */
.orientation-hint{display:none}
button{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse) and (orientation:landscape), (orientation:landscape) and (max-height:500px){
 html,body{width:100%;height:100%;height:100dvh;overflow:hidden}
 body{display:block}
 .shell{width:100vw;height:100vh;height:100dvh;max-width:none;padding:0}
 .game-frame{width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#07132a}
 canvas{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:177.78vh;max-width:177.78dvh;max-height:56.25vw;object-fit:contain}
 .below,.badge,.control-hint{display:none}
 .hud-top{padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 10px) 0 calc(env(safe-area-inset-left) + 10px);gap:7px}
 .tower-box{width:min(42%,300px);margin:0 auto;padding:5px 10px}
 .tower-label{font-size:11px}.tower-label strong{font-size:17px}.meter{height:7px;margin-top:3px}
 .evidence-box{padding:4px 8px}.evidence-box strong{font-size:18px}
 .pause-btn{width:38px;height:38px;margin-right:50px;font-size:16px}
 .sound-toggle{top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 9px);min-width:48px;padding:7px 4px;font-size:10px}
 .menu-return{top:calc(env(safe-area-inset-top) + 53px);left:calc(env(safe-area-inset-left) + 10px);padding:5px 9px;font-size:11px}
 .controls{left:calc(env(safe-area-inset-left) + 14px);right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 11px)}
 .control-group{gap:9px}.control{width:clamp(58px,17vh,76px);height:clamp(58px,17vh,76px);font-size:27px}.control span{font-size:10px}
 .title-content{top:2%;left:9%;width:82%}
 .title-content .title-eyebrow{font-size:10px;padding:2px 9px}
 .title-content .title-wordmark{margin-top:2px;padding:2px 14px 7px}
 .logo-main{font-size:clamp(34px,6vw,60px)}.logo-main>span{-webkit-text-stroke:5px #0a0710}
 .title-content .logo-subtitle{margin-top:5px;font-size:clamp(14px,2.2vw,23px)}
 .title-content .title-quip{margin-top:5px;padding:3px 11px;font-size:11px}
 .title-content .title-start{margin-top:7px;padding:6px 24px;font-size:clamp(17px,2.6vw,23px)}
 .title-content .title-menu-actions{flex-direction:row;width:min(64%,380px);gap:5px;margin-top:7px}
 .title-menu-actions button{padding:4px 3px;font-size:11px}
 .title-content .title-mission{margin-top:6px;padding:3px 9px;font-size:12px}
 .title-mi{height:79%;left:15%;bottom:-9%}.title-akiru{height:66%;right:5%;bottom:-7%}
 .pause-card{padding:17px}.pause-card h2{margin:7px 0;font-size:26px}.pause-card p{margin:7px 0;font-size:12px}.pause-card .primary{margin:8px auto;padding:8px 18px;font-size:15px}.pause-card .secondary{display:inline-block;margin:4px;padding:6px 8px;font-size:11px}
 .menu-card{max-height:90%;padding:15px 25px}.menu-card h2{margin:4px 0;font-size:27px}.menu-card p{margin:4px 0;font-size:12px}.menu-card .secondary{margin-top:8px;padding:7px 12px}
 .end-card{max-height:94%;overflow:auto;padding:13px 19px}.end-card h2{margin:5px 0;font-size:27px}.end-card p{margin:5px 0;font-size:12px}.stats{margin:6px 0;gap:5px}.stat{padding:4px}.stat strong{font-size:18px}.end-card .primary{padding:8px 13px;font-size:14px}
 .capture-heading{padding:10px 17px}.capture-heading strong{font-size:32px}.capture-dialogue{margin-bottom:calc(env(safe-area-inset-bottom) + 9px);padding:8px 13px}.capture-dialogue p{margin:4px 0;font-size:17px}.capture-next{padding:5px 13px;font-size:13px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:370px), (orientation:landscape) and (max-height:370px){
 .title-content .title-eyebrow,.title-content .title-quip{display:none}
 .title-content .title-start{margin-top:5px}.title-content .title-menu-actions{margin-top:5px}.title-content .title-mission{margin-top:4px}
}
@media (pointer:coarse) and (orientation:portrait){
 .orientation-hint{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(150deg,#090d29,#271239 65%,#081a39);text-align:center;color:#fff}
 .orientation-hint div{max-width:330px}.orientation-hint span{display:block;font-size:62px}.orientation-hint strong{display:block;margin-top:16px;font-size:23px}.orientation-hint p{color:#c8e8ff;font-size:15px}
}