:root{--chalk:#f3efe4;--wood:#8a5a33;--navy:#22315c;--red:#c93a2e;--yellow:#f5c542;--ink:#2a1c10}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0}

body{min-height:100vh;color:var(--chalk);font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic UI','Yu Gothic',Meiryo,sans-serif;overflow-x:hidden;background:#173229;background-image:radial-gradient(1100px 560px at 75% -10%,#20463a,transparent),radial-gradient(900px 520px at 5% 110%,#122a21,transparent),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px)}

button{font-family:inherit;touch-action:manipulation;cursor:pointer}

.doodle{position:fixed;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#f3efe4;opacity:.06;pointer-events:none;user-select:none;z-index:0;white-space:nowrap}

#dust span{position:fixed;width:4px;height:4px;background:#f3efe4;border-radius:50%;opacity:.22;filter:blur(1px);pointer-events:none;animation:drift linear infinite;z-index:0}

@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(34px,-46px)}100%{transform:translate(-24px,22px)}}

#wrap{position:relative;z-index:1;max-width:1024px;margin:14px auto 30px;padding:0 10px}

.frameTop{display:flex;justify-content:space-between;align-items:center;padding:0 8px 10px}

.plate{background:linear-gradient(#fbf7ea,#e6ddc2);border:2px solid var(--wood);color:var(--navy);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;padding:6px 18px;border-radius:4px;font-size:16px;letter-spacing:.35em;box-shadow:0 3px 8px #0007;position:relative}

.plate::before,.plate::after{content:'';position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:#8a8a7a;transform:translateY(-50%)}

.plate::before{left:5px}.plate::after{right:5px}

.spkWrap{display:flex;align-items:center;gap:12px}

.speaker{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#161616 70%);box-shadow:inset 0 0 0 3px rgba(0,0,0,.6),0 2px 6px #0009;position:relative}

.speaker::before{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(#000 1px,transparent 1.6px);background-size:6px 6px}

.speaker .ring{position:absolute;inset:-7px;border:2px solid rgba(245,197,66,.6);border-radius:50%;opacity:0}

.speaker.on .ring{animation:ringP 1.5s infinite}

@keyframes ringP{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.55);opacity:0}}

#btnMute{background:#123028;color:#ffe9b0;border:2px solid rgba(245,197,66,.4);border-radius:8px;padding:7px 12px;font-size:14px}

#frame{background:linear-gradient(135deg,#a06a3c,#7c4e28 40%,#8f5c31 70%,#6f4526);background-image:repeating-linear-gradient(95deg,rgba(0,0,0,.08) 0 3px,transparent 3px 10px),linear-gradient(135deg,#a06a3c,#7c4e28 40%,#8f5c31 70%,#6f4526);padding:14px;border-radius:12px;box-shadow:0 22px 60px #000a,inset 0 2px 2px rgba(255,255,255,.3)}

#stage{position:relative;aspect-ratio:16/9;background:#0d1c16;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 46px rgba(0,0,0,.75)}

#stage.shake{animation:shakeA .45s}

@keyframes shakeA{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(5px,3px)}}

#cv{position:absolute;inset:0;width:100%;height:100%}

#hints{margin-top:10px;text-align:center;color:#bcd0bd;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12.5px;letter-spacing:.08em;min-height:18px}

.credit{margin-top:6px;text-align:center;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#7fa08c;font-size:12px;opacity:.7}

#hud{position:absolute;left:0;right:0;top:0;z-index:15;display:flex;align-items:center;gap:9px;padding:8px 12px;background:linear-gradient(rgba(9,22,17,.92),rgba(9,22,17,0));pointer-events:none;transition:opacity .3s;flex-wrap:wrap}

[data-state="title"] #hud,[data-state="howto"] #hud,[data-state="dayIntro"] #hud,[data-state="map"] #hud{opacity:0}

.chip{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;padding:4px 10px;border-radius:6px;border:2px solid var(--ink);font-size:13px}

#dayChip{background:var(--yellow);color:var(--ink)}

#phaseTag{background:#f6f2e0;color:var(--navy)}

#scoreChip{background:#2a1c10;color:#ffb347;border-color:#ffb347}

#paperChip{background:#cfe8f5;color:#1c4a60}

#gimHud{display:flex;gap:4px}

#gimHud span{font-size:15px;filter:drop-shadow(0 1px 2px #000a)}

.dots{display:flex;gap:4px}

.dots span{font-size:10.5px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.1);color:#cfe0c8;border:1px solid rgba(255,255,255,.2)}

.dots span.done{background:#3f7a4a;color:#fff}

.dots span.act{background:var(--yellow);color:var(--ink);animation:pulseB 1s infinite}

.meter{display:flex;align-items:center;gap:6px}

.meter label{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12px;color:var(--chalk);white-space:nowrap;transition:color .3s}

.bar{width:104px;height:14px;border:2px solid rgba(243,239,228,.8);border-radius:5px;background:rgba(0,0,0,.6);overflow:hidden}

.bar i{display:block;height:100%;width:0%;transition:width .12s,background .4s}

#m-urge{background:linear-gradient(90deg,#a5713a,#5f3b1c)}

#m-susp{background:linear-gradient(90deg,#f5c542,#d3442e)}

.meter.hot .bar{animation:pulseB .5s infinite}

#mUrgeRow.done #m-urge{background:linear-gradient(90deg,#7fb069,#a3c585)}

#mUrgeRow.done label{color:#a3c585}

#mUrgeRow.relief .bar{animation:reliefA .9s ease}

@keyframes reliefA{0%{box-shadow:0 0 0 0 rgba(127,176,105,.95)}100%{box-shadow:0 0 0 16px rgba(127,176,105,0)}}

@keyframes pulseB{50%{filter:brightness(1.4)}}

#timerBox{margin-left:auto;text-align:right}

#timerEl{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:22px;color:#ffe9b0;text-shadow:0 0 8px rgba(245,197,66,.5);line-height:1}

#timerEl.low{color:#ff6a5a;animation:blinkT .5s infinite}

@keyframes blinkT{50%{opacity:.3}}

#timerLbl{font-size:9.5px;color:#cfe0c8;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;letter-spacing:.25em}

#vig{position:absolute;inset:0;z-index:14;pointer-events:none;box-shadow:inset 0 0 130px 46px rgba(220,40,30,.6);opacity:0;transition:opacity .15s}

#flash{position:absolute;inset:0;background:#ff2415;opacity:0;pointer-events:none;z-index:30}

#flash.go{animation:flashA .55s}

@keyframes flashA{0%{opacity:.7}100%{opacity:0}}

.phase{position:absolute;inset:0;display:none;z-index:10}

.phase.on{display:block}

.overlay{position:absolute;inset:0;z-index:20;display:none}

.overlay.on{display:block}

#phClass{background:#1a352a}

.classScene{position:absolute;inset:0;background:linear-gradient(160deg,#2c4a3c,#16291f)}

.classScene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity .3s}

.classScene img.show{opacity:1}

#bLabel{position:absolute;left:16px;top:14px;z-index:4;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#eef3e4;background:rgba(16,34,26,.5);border:2px solid rgba(238,243,228,.32);border-radius:9px;padding:8px 14px;text-shadow:0 0 5px rgba(255,255,255,.25)}

#bLabel h3{margin:0 0 2px;font-size:14px;letter-spacing:.1em;opacity:.92}

#bLabel p{margin:0;font-size:21px}

#bLabel small{display:block;margin-top:4px;font-size:11px;opacity:.72}

#turnWarn{position:absolute;left:50%;top:12%;transform:translateX(-50%);font-size:60px;opacity:0;transition:opacity .12s;filter:drop-shadow(0 5px 9px rgba(0,0,0,.65));z-index:5;pointer-events:none}

#turnWarn.on{opacity:1;animation:warnP .5s ease-in-out infinite}

@keyframes warnP{50%{transform:translateX(-50%) scale(1.18) rotate(-5deg)}}

#tTag{position:absolute;left:16px;top:96px;z-index:4;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;padding:8px 14px;border-radius:10px;border:2px solid var(--ink);font-size:15px;transition:.2s;box-shadow:0 4px 10px rgba(0,0,0,.4)}

#tTag.safe{background:#e2efdb;color:#2f5233}

#tTag.warn{background:#fdf0c8;color:#8a6a1a}

#tTag.danger{background:#f8d7d0;color:#a02015}

#classMsg{position:absolute;right:6%;top:14px;z-index:6;background:#fffbe8;border:3px solid var(--ink);border-radius:12px;padding:8px 15px;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;font-size:18px;color:var(--ink);opacity:0;transform:scale(.7);transition:.15s;pointer-events:none;box-shadow:0 6px 14px rgba(0,0,0,.4)}

#classMsg.show{opacity:1;transform:scale(1)}

/* --- 自キャラ(分かりやすく) --- */

#pc{position:absolute;bottom:38px;left:50%;width:72px;height:120px;z-index:4;transform:translateX(-50%);transition:left .18s ease;pointer-events:none}

#pc .pcShadow{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:56px;height:12px;background:rgba(0,0,0,.3);border-radius:50%}

#pc .pcHead{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:52px;height:52px;background:radial-gradient(circle at 40% 35%,#2e2e2e,#101010);border-radius:50%;border:3px solid #0d0d0d}

#pc .pcBody{position:absolute;left:50%;top:50px;transform:translateX(-50%);width:56px;height:50px;background:#22315c;border:3px solid #10182e;border-radius:12px 12px 6px 6px;transition:top .2s}

#pc .pcBody::before{content:'';position:absolute;left:50%;top:2px;transform:translateX(-50%);width:18px;height:8px;background:#f6f2e0;border-radius:2px}

#pc .pcLegs{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:38px;height:22px;transition:opacity .15s}

#pc .pcLegs::before,#pc .pcLegs::after{content:'';position:absolute;top:0;width:14px;height:22px;background:#1a2540;border:2px solid #0e1730;border-radius:4px}

#pc .pcLegs::before{left:0}#pc .pcLegs::after{right:0}

#pc .pcEmo{position:absolute;left:50%;top:-28px;transform:translateX(-50%);font-size:27px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transition:transform .15s}

#pc.sit .pcBody{top:66px}

#pc.sit .pcLegs{opacity:0}

#pc.sneak{animation:tipToe .5s ease-in-out infinite}

#pc.sneak .pcBody{top:46px;transform:translateX(-50%) rotate(6deg)}

@keyframes tipToe{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}

#pc.freeze{animation:shiver .28s infinite}

#pc.freeze .pcEmo{transform:translateX(-50%) scale(1.3)}

@keyframes shiver{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-2.5deg)}70%{transform:translateX(-50%) rotate(2.5deg)}}

.deskview{position:absolute;left:0;right:0;bottom:0;height:138px;z-index:5;pointer-events:none}

.desk{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:440px;height:118px;background:linear-gradient(#b07a44,#7e4f2c);border:3px solid #5f3d20;border-radius:12px;box-shadow:0 -6px 18px rgba(0,0,0,.35)}

.book{position:absolute;left:50%;top:14px;transform:translateX(-50%) rotate(-2deg);width:134px;height:46px;background:#f6f2e6;border:2px solid #999;border-radius:3px}

#bookTxt{position:absolute;left:9px;top:9px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;color:#b3342c}

.sweat{position:absolute;font-size:20px;opacity:0;transition:opacity .3s;z-index:6;pointer-events:none}

.sweat.s1{left:calc(50% - 76px);bottom:96px}.sweat.s2{left:calc(50% + 60px);bottom:112px}

#phClass.urgeHi .sweat{opacity:1;animation:dripA 1.1s infinite}

@keyframes dripA{0%{transform:translateY(0)}100%{transform:translateY(26px);opacity:0}}

#phClass.leaving::after{content:'';position:absolute;inset:0;background:#fff6d8;opacity:0;animation:leaveA .7s ease forwards;z-index:8;pointer-events:none}

@keyframes leaveA{0%{opacity:0}40%{opacity:.95}100%{opacity:0}}

#btnSneak{position:absolute;right:22px;bottom:22px;z-index:6;width:min(330px,52%);height:66px;border:3px solid var(--ink);border-radius:14px;background:var(--navy);color:var(--chalk);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:17px;overflow:hidden;box-shadow:0 5px 0 #10182e,0 8px 18px rgba(0,0,0,.4);user-select:none;touch-action:none}

#btnSneak .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#7fb069,#a3c585);z-index:0}

#btnSneak span{position:relative;z-index:1}

#btnSneak:active{transform:translateY(3px);box-shadow:0 2px 0 #10182e}

#btnPaperC{position:absolute;right:22px;bottom:98px;z-index:6;width:66px;height:66px;border:3px solid var(--ink);border-radius:50%;background:#2f6f8f;color:#fff;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;box-shadow:0 4px 0 #1c4a60;line-height:1.2}

#btnPaperC:active{transform:translateY(3px)}

#phToilet{background:#e7eff0}

.toiScene{position:absolute;inset:0}

.toiScene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity .3s}

.toiScene img.show{opacity:1}

#phToilet.straining .toiScene{animation:toiTrem .16s infinite}

@keyframes toiTrem{0%,100%{transform:translate(0,0)}50%{transform:translate(1.6px,-1.6px)}}

#otoFx{position:absolute;left:23%;top:20%;width:100px;height:100px;display:grid;place-items:center;opacity:0;transition:.2s;z-index:4;pointer-events:none}

#otoFx.on{opacity:1}

#otoFx b{font-size:48px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}

#otoFx .rip{position:absolute;inset:0;border:3px solid #69b7d9;border-radius:20px;opacity:0}

#otoFx.on .rip{animation:ripA 1s infinite}

#otoFx.on .rip.r2{animation-delay:.5s}

@keyframes ripA{0%{transform:scale(.7);opacity:.85}100%{transform:scale(1.4);opacity:0}}

#feet{position:absolute;right:5%;bottom:188px;z-index:4;display:flex;gap:3px;transform:translateX(120px);opacity:0;transition:.35s;filter:drop-shadow(0 5px 5px rgba(0,0,0,.4))}

#feet.in{transform:translateX(0);opacity:1}

#feet span{font-size:38px;transform:scaleX(-1)}

#tlMsg{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:7;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;background:rgba(18,48,40,.92);color:#ffe9b0;border:2px solid rgba(245,197,66,.5);padding:7px 18px;border-radius:99px;font-size:14.5px;transition:.2s;white-space:nowrap;box-shadow:0 5px 14px rgba(0,0,0,.45)}

#tlMsg.alert{background:#5a1512;color:#ffd7cf;border-color:#d3442e;animation:pulseB .5s infinite}

.tlBottom{position:absolute;left:0;right:0;bottom:0;height:176px;z-index:6;display:flex;gap:16px;padding:13px 18px;align-items:center;background:linear-gradient(rgba(13,32,26,.93),rgba(9,24,19,.97));border-top:3px solid var(--ink)}

.tlMeters{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}

.tbar{display:flex;align-items:center;gap:9px}

.tbar label{width:74px;color:var(--chalk);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px}

.tbar .tr{flex:1;height:16px;border:2px solid rgba(243,239,228,.65);background:rgba(0,0,0,.5);border-radius:5px;overflow:hidden}

.tbar .tr i{display:block;height:100%;width:0%}

#bStrain{background:linear-gradient(90deg,#a5713a,#6b4423)}

#bNoise{background:linear-gradient(90deg,#7fb069,#f5c542 55%,#d3442e)}

#bHeard{background:#d3442e}

#bHeardRow.hot .tr{animation:pulseB .45s infinite}

.lampRow{display:flex;align-items:center;gap:10px;color:var(--chalk);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px}

#lampPres{width:34px;height:34px;border-radius:50%;border:2px solid rgba(243,239,228,.6);display:grid;place-items:center;font-size:17px;background:#1a2a26;transition:.2s}

#lampPres.on{background:#5a1512;box-shadow:0 0 13px #f33a;animation:pulseB .5s infinite}

.otoWrap{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:3px;color:#a8cfd9;font-size:10.5px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace}

#otoCd{width:50px;height:50px;border-radius:50%;background:#16262b;display:grid;place-items:center;border:2px solid rgba(105,183,217,.5)}

#otoCd b{width:37px;height:37px;border-radius:50%;background:#12211f;display:grid;place-items:center;font-size:19px;z-index:1}

.tlBtns{display:flex;gap:13px;align-items:center}

.tbtn{border:3px solid var(--ink);border-radius:50%;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;user-select:none;touch-action:none;color:#fff;line-height:1.25}

.tbtn:active{transform:translateY(3px)}

#btnStrain{width:102px;height:102px;background:#d3442e;font-size:16px;box-shadow:0 6px 0 #8a2018}

#btnOto{width:78px;height:78px;background:#2f6f8f;font-size:14px;box-shadow:0 5px 0 #1c4a60}

#btnOto.dead{background:#555;box-shadow:0 5px 0 #333;opacity:.6;cursor:not-allowed}

#btnFlush{width:88px;height:88px;background:#3f7a4a;font-size:15px;box-shadow:0 5px 0 #27512f;display:none;animation:pulseB .55s infinite}

#rumble{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:9;display:none;flex-direction:column;align-items:center;gap:6px;background:rgba(60,20,10,.92);border:3px solid #ff8c42;border-radius:14px;padding:10px 22px;cursor:pointer;user-select:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}

#rumble.on{display:flex;animation:pulseB .4s infinite}

#rumble .rTxt{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:22px;color:#ffd7a8}

#rumble .rBar{width:220px;height:12px;border:2px solid #ffd7a8;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden}

#rumble .rBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5722,#ffb74d)}

#rumble .rHint{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12px;color:#ffe9b0}

#ovTitle{background:linear-gradient(rgba(8,18,14,.6),rgba(8,18,14,.85))}

.titleGrid{position:absolute;inset:0;display:grid;grid-template-columns:1.3fr .8fr;gap:22px;padding:30px 36px;align-items:center;overflow:auto}

.bbPanel{background:linear-gradient(160deg,#2c4a3c,#193328);border:12px solid var(--wood);border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.65),inset 0 0 44px rgba(0,0,0,.55);padding:22px 28px;position:relative;transform:rotate(-.6deg)}

.bbTop{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#dfe8d2;font-size:14px;letter-spacing:.12em;opacity:.85;display:flex;justify-content:space-between;gap:8px}

.bigT1{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:var(--chalk);font-size:clamp(17px,2.6vw,26px);margin-top:12px;transform:rotate(-1deg)}

.bigT2{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:#f6f2e0;font-size:clamp(40px,6.4vw,72px);line-height:1.05;letter-spacing:.04em;text-shadow:0 0 6px rgba(255,255,255,.3),3px 3px 0 rgba(0,0,0,.45)}

.bigT2 .poop{display:inline-block;font-size:.78em;animation:bob2 2.4s ease-in-out infinite}

@keyframes bob2{50%{transform:translateY(-7px) rotate(8deg)}}

.subT{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:#cfe0c8;font-size:clamp(10px,1.4vw,14px);letter-spacing:.32em;margin-top:8px}

.gimPrev{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

.gimPrev span{font-size:13px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:#cdeefb;border:2px solid rgba(105,183,217,.5);border-radius:99px;padding:4px 10px;background:rgba(20,60,80,.4)}

.btnRow{display:flex;gap:14px;margin-top:20px;align-items:center;flex-wrap:wrap}

.btnStamp{min-width:148px;height:82px;background:var(--red);color:#fff;border-radius:10px;border:3px solid #7e1f16;box-shadow:0 6px 0 #7e1f16,inset 0 0 0 3px rgba(255,255,255,.85);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:23px;letter-spacing:.14em;transition:.12s;padding:0 16px;position:relative}

.btnStamp:hover{transform:rotate(-2deg) scale(1.05)}

.btnStamp:active{transform:translateY(4px);box-shadow:0 2px 0 #7e1f16,inset 0 0 0 3px rgba(255,255,255,.85)}

.btnStamp.small{min-width:0;height:60px;font-size:18px}

.btnStamp.navy{background:var(--navy);border-color:#10182e;box-shadow:0 6px 0 #10182e,inset 0 0 0 3px rgba(255,255,255,.85)}

#btnStart::after{content:'';position:absolute;inset:-5px;border-radius:14px;box-shadow:0 0 26px 7px rgba(245,197,66,.45);opacity:0;animation:invite 2.4s ease-in-out infinite;pointer-events:none}

@keyframes invite{0%,100%{opacity:0}50%{opacity:1}}

.startHint{margin-top:10px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:11.5px;color:#ffe9b0;letter-spacing:.3em;animation:blinkT 1.6s infinite}

.btnPaper{background:#f6f2e0;color:var(--navy);border:2px solid #b9ae92;padding:13px 18px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:15px;border-radius:4px;box-shadow:0 4px 0 #b9ae92;transition:.12s}

.btnPaper:hover{transform:translateY(-2px)}

.btnPaper:active{transform:translateY(2px);box-shadow:0 1px 0 #b9ae92}

.btnPaper.small{padding:10px 14px;font-size:13px}

.soundHint{margin-top:13px;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#c8d6c0;font-size:13px;opacity:.85}

#bootWarn{display:none;margin-top:14px;background:#5a4a12;color:#ffe9b0;border:2px solid #f5c542;border-radius:8px;padding:10px 14px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;line-height:1.8}

.ruleList{background:rgba(18,48,40,.75);border:2px solid rgba(243,239,228,.25);border-radius:10px;padding:14px 18px;color:#e8efe0;font-size:13px;line-height:2.1}

#ovHowto{background:rgba(8,18,14,.72)}

.manual{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,93%);max-height:94%;overflow:auto;background:#f8f4e4;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.8);padding-bottom:16px}

.mHead{position:sticky;top:0;background:#b3342c;color:#fff;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;padding:12px 20px;letter-spacing:.18em;font-size:16px;z-index:2}

.mSec{display:flex;gap:13px;padding:13px 20px;border-bottom:1px dashed #c9be9f;font-size:13.5px;line-height:1.85;color:#3a372a}

.mSec .ico{font-size:26px;line-height:1.2}

.mSec h5{margin:0 0 3px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:var(--navy);font-size:15px}

kbd{background:var(--navy);color:#fff;border-radius:4px;padding:1px 7px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:11px;margin:0 1px}

.mFoot{display:flex;gap:12px;justify-content:center;padding-top:15px}

#ovMap{background:#0d1c16}

.mapWrap{position:absolute;inset:0;display:grid;place-items:center;padding:16px;overflow:auto}

.mapPanel{background:#f8f4e4;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.75);max-width:900px;width:100%;max-height:92%;overflow:auto;padding:18px 20px;transform:rotate(-.3deg)}

.mapHead{display:flex;align-items:center;gap:14px;border-bottom:3px solid var(--navy);padding-bottom:10px;margin-bottom:14px}

.mapHead h2{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:var(--navy);margin:0;font-size:26px}

#mapCount{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:#b3342c;font-size:14px;margin-left:auto}

.mapBody{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.chapCol{background:#eef0e4;border:2px solid #c9c4a8;border-radius:8px;padding:10px 10px 12px}

.chapName{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:var(--navy);font-size:16px}

.chapName em{font-style:normal;color:#b3342c;font-size:12px;margin-left:4px}

.chapTitle{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#6a6a55;font-size:11.5px;margin-top:2px;line-height:1.5}

.chapGrid{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px;align-items:center;margin-top:10px}

.dayLabel{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12px;color:#6a6a55;text-align:right;padding-right:4px}

.node{width:100%;min-height:42px;border-radius:6px;border:2px solid;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;line-height:1.2;transition:transform .15s,box-shadow .15s;padding:3px 2px}

.node small{display:block;font-size:9px;opacity:.75}

.node.cleared{background:#dff0d5;border-color:#3f7a4a;color:#2f5233}

.node.current{background:#fdf0c8;border-color:#c9a227;color:#8a6a1a;animation:pulseB 1s infinite}

.node.locked{background:#e7e7e0;border-color:#c6c6bc;color:#a8a89e;cursor:not-allowed}

.node.cleared:hover,.node.current:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.18)}

.mapFoot{margin-top:14px;text-align:center;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#6a6a55;font-size:12px}

#ovDay{background:#0d1c16}

.dayBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}

.dayBg.ok{opacity:1}

.dayShade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,18,14,.5),rgba(8,18,14,.9))}

.dayWrap{position:absolute;inset:0;display:grid;place-items:center;padding:16px}

.dayPanel{background:linear-gradient(160deg,#2c4a3c,#193328);border:12px solid var(--wood);border-radius:8px;box-shadow:0 16px 44px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.5);padding:24px 40px;text-align:center;max-width:580px;transform:rotate(-.5deg);position:relative}

.introChapter{display:inline-block;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:14px;letter-spacing:.2em;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);border-radius:99px;padding:4px 16px;margin-bottom:10px}

.dayBig{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:clamp(38px,6.2vw,60px);color:#f6f2e0;line-height:1.1;text-shadow:0 0 8px rgba(255,255,255,.3),3px 3px 0 rgba(0,0,0,.5)}

.dayBig.pop{animation:dayPop .5s cubic-bezier(.25,1.6,.4,1)}

@keyframes dayPop{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.94)}100%{transform:scale(1)}}

.introMeta{display:flex;gap:8px;justify-content:center;margin-top:10px}

.introMeta span{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;padding:4px 12px;border-radius:99px;border:2px solid rgba(243,239,228,.4)}

#introDay{color:#cfe0c8}#introCode{color:#ffe9b0;border-color:rgba(245,197,66,.5)}

.dayFlavor{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#e8efe0;font-size:15px;margin-top:12px;line-height:1.85}

.dayChips{display:flex;gap:8px;justify-content:center;margin:14px 0 6px;flex-wrap:wrap}

.dayChips span{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12px;color:#ffe9b0;border:2px solid rgba(245,197,66,.5);padding:5px 11px;border-radius:99px;background:rgba(0,0,0,.25)}

.dayChips span.gim{border-color:#69b7d9;color:#cdeefb;background:rgba(20,60,80,.4)}

.dayChips span.boss{border-color:#d3442e;color:#ffb3a8}

.gimNote{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#a8cfd9;font-size:12px;line-height:1.7;min-height:18px;margin-bottom:10px}

#ovCaught{background:radial-gradient(ellipse at center,rgba(70,8,8,.6),rgba(18,0,0,.94))}

.unkoImg{position:absolute;right:-10px;bottom:-6px;width:min(360px,42%);opacity:.9;transform:rotate(-6deg);filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));pointer-events:none;animation:unkoFloat 3s ease-in-out infinite}

@keyframes unkoFloat{50%{transform:rotate(-6deg) translateY(-12px)}}

.cWrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:16px}

.bareta{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:clamp(52px,9vw,92px);color:#fff;letter-spacing:.24em;text-shadow:0 0 22px #ff2015,4px 4px 0 #5a0a05;animation:baretaIn .5s cubic-bezier(.2,1.6,.4,1)}

@keyframes baretaIn{from{transform:scale(2.4);opacity:0}}

.stampU{width:216px;height:148px;border:5px solid #e0492f;border-radius:14px;box-shadow:inset 0 0 0 3px #e0492f,0 8px 30px rgba(0,0,0,.7);display:grid;place-items:center;transform:rotate(-8deg);background:rgba(224,73,47,.12);position:relative}

.stampU b{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:42px;color:#e8503a;letter-spacing:.06em}

.stampU small{position:absolute;bottom:7px;right:11px;font-size:10px;color:#e8503a;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace}

.slam{animation:slamA .55s cubic-bezier(.3,1.7,.4,1)}

@keyframes slamA{0%{transform:rotate(-8deg) scale(3);opacity:0}60%{transform:rotate(-8deg) scale(.93);opacity:1}80%{transform:rotate(-8deg) scale(1.05)}100%{transform:rotate(-8deg) scale(1)}}

#causeTxt{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#ffd9c9;font-size:17.5px;max-width:540px}

.nextDay{color:#e8c9b8;font-size:13px}

.cStats{color:#c9a39a;font-size:12px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace}

.cBtns{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}

#ovDayClear,#ovClear{background:#0d1c16}

.clearBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}

.clearBg.ok{opacity:1}

.clearShade{position:absolute;inset:0;background:linear-gradient(rgba(45,32,8,.4),rgba(20,15,5,.72))}

#confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}

#confetti span{position:absolute;top:-24px;border-radius:2px;animation:fallA linear forwards}

@keyframes fallA{to{transform:translateY(640px) rotate(720deg);opacity:.7}}

.clWrap{position:absolute;inset:0;display:grid;place-items:center;padding:14px}

.clPanel{background:#f8f4e4;border-radius:10px;padding:24px 32px;box-shadow:0 16px 50px rgba(0,0,0,.7);transform:rotate(-.5deg);text-align:center;max-width:560px;width:100%}

.clPanel h2{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:clamp(30px,4.6vw,48px);color:var(--navy);margin:6px 0 2px}

.clSub{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#6a6a55;font-size:15.5px}

.rankRow{display:flex;align-items:center;gap:18px;justify-content:center;margin:15px 0 4px}

.rankStamp{width:84px;height:84px;border-radius:50%;border:4px solid #3f7a4a;color:#3f7a4a;display:grid;place-items:center;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:42px;transform:rotate(-10deg);box-shadow:inset 0 0 0 2px #3f7a4a;flex:none}

.rankTitle{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:#33301f;font-size:13px;text-align:left}

.rankTitle b{display:block;font-size:20px;color:#3f7a4a;margin-top:2px}

.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:14px 0;font-size:13px;color:#55503d;text-align:left}

.statGrid b{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:var(--navy)}

.clSub2{font-family:'Yomogi','Yuji Syuku','Klee One',cursive;color:#6a6a55;font-size:14px;margin-bottom:14px}

#touch{display:none}

body.touch #touch.hall{display:block}

#dpad{position:absolute;left:12px;bottom:12px;z-index:18;width:152px;height:152px}

#dpad button{position:absolute;width:48px;height:48px;border-radius:12px;border:2px solid rgba(243,239,228,.5);background:rgba(18,48,40,.75);color:var(--chalk);font-size:17px;touch-action:none}

#dpad .u{left:52px;top:0}#dpad .l{left:0;top:52px}#dpad .d{left:52px;top:104px}#dpad .r{left:104px;top:52px}

.tbtns{position:absolute;right:12px;bottom:14px;z-index:18;display:flex;gap:12px}

.tbtns button{width:58px;height:58px;border-radius:50%;border:2px solid rgba(243,239,228,.5);background:rgba(18,48,40,.75);color:#fff;font-size:20px;touch-action:none}

#tRun.on{background:#d3442e}

#btnPause{display:none;pointer-events:auto;place-items:center;width:34px;height:30px;padding:0;border:2px solid rgba(245,197,66,.65);border-radius:6px;background:rgba(18,48,40,.9);color:#ffe9b0;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;line-height:1}

#btnPause:hover{background:#2c5a47;transform:translateY(-1px)}

body.touch #btnPause{display:grid}

#ovPause{z-index:40;background:rgba(8,18,14,.78);backdrop-filter:blur(2px)}

.pausePanel,.settingsPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.5deg);width:min(520px,92%);background:#f8f4e4;color:#2a1c10;border:8px solid var(--wood);border-radius:8px;box-shadow:0 18px 52px rgba(0,0,0,.78),inset 0 0 0 2px rgba(255,255,255,.55);padding:25px 30px}

.pausePanel{text-align:center;background:linear-gradient(160deg,#2c4a3c,#193328);color:var(--chalk);border-color:var(--wood);box-shadow:0 18px 52px rgba(0,0,0,.78),inset 0 0 38px rgba(0,0,0,.35)}

.pauseKicker,.settingsKicker{font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;color:#f5c542;font-size:12px;letter-spacing:.2em}

.pausePanel h2,.settingsHead h2{margin:7px 0 8px;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:clamp(28px,5vw,44px);letter-spacing:.08em}

.pausePanel p{margin:0 auto;color:#dce8d7;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;font-size:15px;line-height:1.8;max-width:390px}

.pauseBtns{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap;margin-top:22px}

.pauseHint{margin-top:15px;color:#a8cfd9;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:11px;letter-spacing:.08em}

#ovSettings{z-index:45;background:rgba(8,18,14,.8);backdrop-filter:blur(2px)}

.settingsPanel{max-height:92%;overflow:auto}

.settingsHead{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:3px solid var(--navy);padding-bottom:12px;margin-bottom:4px}

.settingsHead h2{color:var(--navy);font-size:30px;margin:3px 0 0}

.settingsSection{padding:15px 2px;border-bottom:1px dashed #c9be9f}

.settingsSection h3,.motionOptions legend{margin:0 0 7px;color:var(--navy);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:16px;font-weight:700}

.settingsSection p{margin:7px 0 0;color:#6a6a55;font-family:'Yomogi','Yuji Syuku','Klee One',cursive;font-size:12.5px;line-height:1.65}

.settingToggle,.btnReset{border:2px solid var(--navy);border-radius:5px;padding:10px 15px;background:#e6eef0;color:var(--navy);font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:14px;box-shadow:0 3px 0 #9aabb6}

.settingToggle[aria-pressed="true"]{background:#d8dff0;border-color:#3f4f83}

.settingToggle:hover,.btnReset:hover{transform:translateY(-1px)}

.motionOptions{margin:0;border-left:0;border-right:0;border-top:0}

.motionOptions label{display:inline-flex;align-items:center;gap:6px;margin:2px 13px 2px 0;color:#3a372a;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:13px;cursor:pointer}

.motionOptions input{accent-color:#b3342c}

.resetSection{border-bottom:0}

.btnReset{background:#f8d7d0;border-color:#a02015;color:#7e1f16;box-shadow:0 3px 0 #b27b71}

.resetConfirm{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:11px 13px;background:#fff0e9;border:2px solid #d3442e;border-radius:6px;color:#7e1f16;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12px;line-height:1.6}

.resetConfirm strong{font-size:14px}

.resetConfirm div{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}

.resetConfirm[hidden]{display:none}

.resetStatus{min-height:18px;margin-top:8px;color:#3f7a4a;font-family:'DotGothic16','BIZ UDPGothic','MS Gothic',monospace;font-size:12px}

@media (max-width:760px){

 .titleGrid{grid-template-columns:1fr;padding:16px;gap:12px}

 .ruleList{display:none}

 .bar{width:70px}

 .dots{display:none}

 .tlBottom{flex-direction:column;height:200px;gap:8px}

 .tlBtns{order:-1}

 #btnStrain{width:78px;height:78px}

 #btnSneak{width:56%;font-size:14px;height:58px}

 .dayPanel{padding:20px 22px}

 .unkoImg{width:48%;opacity:.55}

 .mapBody{grid-template-columns:1fr}

 .pausePanel,.settingsPanel{padding:20px 18px;border-width:6px}

 .pausePanel h2{font-size:32px}

 .settingsPanel{max-height:94%}

 .settingsHead h2{font-size:26px}

 .motionOptions label{display:flex;margin:7px 0}

}


/* ChatGPT improvement pass: keyboard visibility, reduced motion, and robust fallbacks. */
button:focus-visible{outline:4px solid #fff2a8;outline-offset:3px}
button:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.62}
.classScene,.toiScene{background:linear-gradient(145deg,#284438,#14261e)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.noscriptWarn{margin:16px auto;max-width:760px;padding:14px 18px;background:#5a1512;color:#ffd7cf;border:2px solid #d3442e;border-radius:8px;font-family:'BIZ UDPGothic','MS Gothic',monospace;line-height:1.7}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
 #dust,.doodle{display:none!important}
}

body.reduceMotion *,body.reduceMotion *::before,body.reduceMotion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
body.reduceMotion #dust,body.reduceMotion .doodle{display:none!important}

/* Desktop title screen should fit inside the 16:9 game board without initial scrolling. */
@media (min-width:761px){
 .titleGrid{padding:18px 24px;gap:16px}
 .bbPanel{padding:16px 22px;border-width:9px}
 .bigT1{margin-top:8px}
 .bigT2{font-size:clamp(36px,5.2vw,60px)}
 .subT{margin-top:5px}
 .gimPrev{gap:6px;margin-top:10px}
 .gimPrev span{font-size:11px;padding:3px 8px}
 .btnRow{margin-top:14px}
 .btnStamp{height:68px;font-size:21px}
 .startHint{margin-top:6px}
 .soundHint{margin-top:8px;font-size:12px}
 .ruleList{padding:12px 16px;font-size:12px;line-height:1.9}
}

@media (pointer:coarse) and (orientation:portrait) and (max-width:760px){
 #hints::before{content:'📱 横向きにすると、廊下と操作ボタンが見やすくなります。';display:block;margin-bottom:4px;color:#ffe9b0}
}