:root{--c-bg:#08080b;--c-ink:#15151a;--c-white:#f2f0e8;--c-gray:#8a8890;--c-violet:#33315c;--c-gold:#d8b85a;--c-red:#e23a2e;--c-darkred:#7a1f23;--font-body:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;--font-title:"DotGothic16", var(--font-body)}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--c-white);font-family:var(--font-body);background:#050507;margin:0;overflow:hidden}button,select,input{font:inherit}#game-root,#ui-root{position:fixed;inset:0}#ui-root{pointer-events:none;justify-content:center;align-items:center;display:flex}.phone-shell{pointer-events:none;width:min(100vw,46.2085dvh);height:min(100dvh,216.41vw);position:relative;overflow:hidden}.phone-shell>*{pointer-events:auto}.scene-bg{background-color:var(--c-bg);pointer-events:none;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.scanlines,.vignette,.flash{pointer-events:none;position:absolute;inset:0}.scanlines{z-index:50;opacity:.5;mix-blend-mode:multiply;background:repeating-linear-gradient(#0000 0 2px,#00000029 3px,#0000 4px)}.vignette{z-index:49;background:radial-gradient(#0000 52%,#0000008c 100%)}.flash{z-index:60}.flash.white{background:var(--c-white);animation:.5s ease-out forwards flash-fade}.flash.red{background:var(--c-red);animation:.5s ease-out forwards flash-fade}@keyframes flash-fade{0%{opacity:.7}to{opacity:0}}.phone-shell.shake{animation:.45s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}.panel{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#08080bdb;border:1px solid #f2f0e8c7;box-shadow:0 0 0 1px #7a1f2373,0 8px 30px #00000080}.center-panel,.result{padding:22px 18px;position:absolute;left:18px;right:18px}.center-panel{top:auto;bottom:40px}.result{top:70px;bottom:26px;overflow:auto}.eyebrow{color:var(--c-gold);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;font-size:12px}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:24px;line-height:1.3;font-family:var(--font-title);margin:0 0 14px}h2{margin:0 0 10px;font-size:17px}h3{color:var(--c-gold);margin:14px 0 4px;font-size:14px}p{margin:0 0 14px;font-size:15px;line-height:1.7}.brand-title{letter-spacing:.06em;color:var(--c-white);text-align:center;font-size:30px}.logo-title{text-align:center;text-shadow:0 0 12px #e23a2e80;font-size:30px;line-height:1.2}.logo-title small{color:var(--c-gold);letter-spacing:.16em;margin-top:6px;font-size:15px;display:block}.audio-icons{justify-content:center;gap:16px;margin:4px 0 14px;font-size:26px;display:flex}.primary,.secondary,.danger{border:1px solid var(--c-white);width:100%;min-height:50px;color:var(--c-white);background:var(--c-ink);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;padding:12px 14px;font-size:16px;transition:filter .12s,transform 50ms;display:inline-flex}.primary:active,.secondary:active,.danger:active{transform:translateY(1px)}.primary:hover,.secondary:hover,.danger:hover{filter:brightness(1.18)}.primary{background:var(--c-darkred)}.secondary{background:var(--c-violet);margin-top:8px}.danger{border-color:var(--c-red);background:#330d10;margin-top:14px}.link-button{gap:6px;text-decoration:none}.ext{opacity:.8;font-size:13px}.menu-button{z-index:30;top:calc(env(safe-area-inset-top,0px) + 12px);border:1px solid var(--c-white);background:#08080beb;border-radius:4px;flex-direction:column;justify-content:center;gap:4px;width:46px;height:46px;padding:0 11px;display:flex;position:absolute;right:14px}.menu-button span{background:var(--c-white);height:2px;display:block}.menu-panel{z-index:40;border:1px solid var(--c-white);background:#08080b;padding:18px 16px 22px;animation:.18s ease-out menu-in;position:absolute;inset:12px;overflow:auto}@keyframes menu-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.close-menu{border:1px solid var(--c-white);background:var(--c-ink);width:44px;height:44px;color:var(--c-white);border-radius:4px;font-size:24px;position:absolute;top:12px;right:12px}.menu-panel h2{letter-spacing:.1em;margin-bottom:14px}.menu-row{margin-bottom:12px}.menu-panel label.switch,.menu-panel label.volume{align-items:center;gap:10px;font-size:14px;display:flex}.menu-panel label.volume{flex-direction:column;align-items:stretch;gap:6px}.menu-panel input[type=range]{width:100%;accent-color:var(--c-gold)}.menu-panel input[type=checkbox]{width:20px;height:20px;accent-color:var(--c-gold)}.menu-panel details{border:1px solid #8a889066;border-radius:4px;margin:8px 0}.menu-panel summary{cursor:pointer;color:var(--c-gold);padding:10px 12px;font-size:14px}.scroll-area{max-height:180px;padding:4px 12px 12px;overflow:auto}.scroll-area h4{color:var(--c-white);margin:10px 0 4px;font-size:13px}.small{color:var(--c-gray);font-size:12px;line-height:1.6}.adv{flex-direction:column;padding:0 14px 18px;display:flex;position:absolute;inset:0}.adv-stage{flex:auto;justify-content:center;align-items:flex-end;gap:4%;min-height:0;padding-bottom:2%;display:flex;position:relative;overflow:hidden}.sprite{pointer-events:none;-webkit-user-select:none;user-select:none;object-fit:contain;filter:drop-shadow(0 6px 14px #0009);height:auto;position:relative}.sprite.donan{width:44%;max-height:100%;margin-bottom:6%;animation:3.4s ease-in-out infinite donan-float}.sprite.boku{width:34%;max-height:92%}.adv-stage.is-bedroom{position:static;overflow:visible}.adv-stage.is-bedroom .sprite.boku{width:28%;max-height:none;margin:0;position:absolute;bottom:36%;left:18%}.sprite.is-dim{opacity:.5;filter:brightness(.6)drop-shadow(0 6px 14px #0009)}.sprite.is-active{opacity:1}.sprite.is-enter,.sprite.donan.is-enter{animation:.5s ease-out sprite-enter}@keyframes sprite-enter{0%{opacity:0}}@keyframes donan-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.dialogue-box{cursor:pointer;background:#08080be6;border:1px solid #f2f0e8d9;flex:none;min-height:132px;margin-top:6px;padding:16px 16px 18px;position:relative;box-shadow:0 0 0 1px #7a1f2366,0 8px 24px #0009}.dialogue-box .speaker{border:1px solid var(--c-white);background:var(--c-ink);padding:2px 12px;font-size:13px;font-weight:700;position:absolute;top:-13px;left:12px}.dialogue-box .speaker.donan{color:#ffb0a3;border-color:var(--c-red)}.dialogue-box .speaker.boku{color:var(--c-gold);border-color:var(--c-gold)}.dialogue-box .speaker.system{color:var(--c-white);letter-spacing:.14em}.dialogue-text{min-height:3.4em;margin:4px 0 0;font-size:17px;line-height:1.75}.dialogue-box.narration .dialogue-text{color:#d8d4c8;font-style:italic}.dialogue-box.system{border-style:dashed}.dialogue-box.system .dialogue-text{letter-spacing:.08em;color:#cfd6e2}.adv-indicator{color:var(--c-gold);font-size:14px;animation:1s steps(2,start) infinite blink;position:absolute;bottom:8px;right:14px}@keyframes blink{50%{opacity:.1}}.start-btn{margin-top:12px}.puzzle{top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);flex-direction:column;gap:8px;display:flex;position:absolute;overflow:hidden}.puzzle-header{grid-template-columns:40px 1fr auto;align-items:center;gap:8px;min-height:44px;padding-right:56px;display:grid}.puzzle-donan{object-fit:contain;filter:drop-shadow(0 2px 6px #e23a2e66);width:38px;height:48px}.puzzle-title h1{margin-bottom:0;font-size:19px;line-height:1.2}.stats{min-width:60px;color:var(--c-gold);text-align:right;background:#15151ae6;border:1px solid #f2f0e894;padding:6px 7px;font-size:11px;line-height:1.4}.question{flex:auto;min-height:0;padding:14px;overflow:auto}.question p{font-size:16px;line-height:1.7}.puzzle-image-frame{background:#040408b8;border:1px solid #f2f0e873;margin:12px 0 4px;padding:6px}.puzzle-image{object-fit:contain;width:100%;height:auto;max-height:min(34vh,300px);display:block}.answer{flex:none;padding:12px}.segmented{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;display:grid}.segmented:has(.slot:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.slot{flex-direction:column;gap:4px;display:flex}.slot-label{color:var(--c-gray);text-align:center;font-size:11px}.field-label{color:var(--c-gold);margin-bottom:6px;font-size:13px;display:block}select{border:1px solid var(--c-white);width:100%;min-height:52px;color:var(--c-white);background:var(--c-ink);border-radius:4px;padding:8px 10px;font-size:18px}.segmented select{text-align:center;text-align-last:center;font-size:22px;font-weight:700}.pair-select,.packet-select{gap:10px;margin-bottom:10px;display:grid}.answer label{margin-bottom:4px;font-size:14px;display:block}.diagram{color:var(--c-white);white-space:pre-wrap;background:#101015;border:1px solid #8a889099;margin:8px 0;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Noto Sans JP,monospace;font-size:13px;line-height:1.5;overflow:auto}.table-rows{letter-spacing:.32em;text-align:center;font-size:17px;line-height:1.7}.whiteboard{border:1px solid #8a889080;border-radius:4px;margin-top:10px}.whiteboard>summary{cursor:pointer;color:var(--c-gold);padding:8px 10px;font-size:12px}.whiteboard-area{width:100%;color:var(--c-white);font-family:var(--font-body);resize:vertical;background:#101015;border:1px solid #8a889099;border-radius:4px;margin:0 0 8px;padding:8px 10px;font-size:14px;line-height:1.6;display:block}.memo-wrap{margin-top:8px}.memo-label{color:var(--c-gray);margin:0 0 4px;font-size:11px}.memo-grid{grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 18px);gap:1px;display:grid}.memo-grid .memo-cell{cursor:pointer;background:#f2f0e80d;border:1px solid #8a88908c;min-width:0;min-height:0;padding:0}.memo-grid .memo-cell.is-on{background:var(--c-gold);border-color:var(--c-white)}.toggle-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;display:grid}.bit-weights{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:4px;display:grid}.bit-weights span{text-align:center;color:var(--c-gray);font-size:11px}.bit-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:10px;display:grid}.toggle-grid label,.bit-grid label{background:var(--c-ink);cursor:pointer;border:1px solid #f2f0e8b3;border-radius:4px;justify-content:center;align-items:center;min-height:52px;margin:0;font-size:18px;display:flex;position:relative}.toggle-grid input,.bit-grid input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute}:is(.toggle-grid label:has(input:checked),.bit-grid label:has(input:checked)){border-color:var(--c-gold);color:var(--c-bg);background:var(--c-gold);font-weight:700}.feedback{min-height:22px;color:var(--c-gold);font-size:13px;line-height:1.5}.hints{flex:none;max-height:168px;padding:10px;overflow:auto}.hints p{margin-bottom:6px;font-size:12px}dl{grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;display:grid}dt{color:var(--c-gray)}dd{margin:0}dd[data-testid=total-time],dd[data-testid=total-attempts]{color:var(--c-gold);font-weight:700}table{border-collapse:collapse;width:100%;margin-bottom:14px;font-size:12px}th,td{text-align:left;border-bottom:1px solid #8a889073;padding:6px 4px}@media (height<=720px){.puzzle{top:calc(env(safe-area-inset-top,0px) + 8px);gap:6px}.puzzle-header{min-height:40px}.question p{font-size:14px;line-height:1.5}.dialogue-text{min-height:3em;font-size:15px}.hints{max-height:120px}select,.toggle-grid label,.bit-grid label{min-height:46px}}