@font-face{font-family:DM;src:url('../play-lab/fonts/dm-sans-400.ttf');font-weight:400;font-display:swap}@font-face{font-family:DM;src:url('../play-lab/fonts/dm-sans-700.ttf');font-weight:700;font-display:swap}
:root{--navy:#0a1628;--teal:#0d9488;--orange:#f97316;--gray:#64748b;--line:#d8e2ec;--white:#fafbfc;color-scheme:light;font-family:DM,'Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif;color:var(--navy);background:var(--white)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button:disabled{opacity:.4;cursor:default}p,h1,h2{margin:0}.app{height:100svh;min-height:540px;display:flex;flex-direction:column;overflow:hidden}header{height:60px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 30px;flex-shrink:0}.brand{display:flex;align-items:center;gap:20px}.brand img{width:140px;height:auto;display:block}.brand span{font-size:11px;letter-spacing:2px;color:#a4b8ce;border-left:1px solid #435065;padding-left:20px}nav{display:flex;align-items:center;gap:24px;font-size:12px}nav button{min-width:25px;padding:12px 0;color:#c0d2e6}.heading{display:flex;align-items:center;justify-content:space-between;padding:22px 36px 10px;width:min(1120px,100%);align-self:center;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#0a7a70}h1{font-size:30px;letter-spacing:-1px;line-height:1.6}h1 span{color:var(--orange)}.score{display:flex;align-items:center;gap:32px}.score>div,.score>button{display:flex;flex-direction:column;text-align:left;gap:5px}.score span{font-size:10px;color:var(--gray);letter-spacing:1px}.score strong{font-size:21px;font-variant-numeric:tabular-nums}.score button{border:1px solid var(--line);padding:9px 14px;border-radius:7px}.board{position:relative;flex:1;min-height:200px;width:100%;background:radial-gradient(ellipse at center,#eaf0f6 0,#fafbfc 72%)}canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}.stage-caption{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:12px;color:var(--gray);width:max-content;max-width:95%;pointer-events:none}#view-label{border:1px solid #cddae7;padding:4px 8px;border-radius:4px;font-size:10px;color:#1e3a5f;background:#fafbfcdd}#loading{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:var(--gray);font-size:14px}#notice{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);padding:9px 16px;background:var(--navy);color:white;border-radius:8px;box-shadow:0 5px 20px #0a16281a;width:max-content;max-width:95%;font-size:13px;line-height:1.7;text-align:center;pointer-events:none}#notice.good{background:#0a7a70}.node-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.node{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;transform:translate(-50%,-50%);pointer-events:auto;border-radius:9px;padding:0;font-size:13px;font-weight:700;transition:color .2s,background .2s;touch-action:manipulation;color:#657a92;background:#fafbfce8;border:1px solid #d3deea;box-shadow:0 3px 8px #0a16280d}.node.reachable{background:#e5f7f3;border:2px solid var(--teal);color:#08655d;box-shadow:0 0 0 4px #0d94881a}.node.current{background:var(--orange);border-color:#e3630c;color:white;box-shadow:0 0 0 4px #f9731620}.node.goal{border-radius:50%;font-size:16px}.node .diamond{position:absolute;right:-5px;top:-10px;color:#c45204;background:var(--white);border:1px solid #f2cfb7;border-radius:50%;width:20px;height:20px;font-size:13px;display:grid;place-items:center}.node.collected .diamond{color:var(--teal);border-color:#b9dbd4;font-size:11px}.node.hinted{outline:3px solid var(--orange);outline-offset:5px}.controls{flex-shrink:0;width:min(920px,100%);padding:14px 30px max(15px,env(safe-area-inset-bottom));align-self:center;border-top:1px solid var(--line)}.lens-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.lens-row button{padding:13px 8px;border:1px solid #ccd9e5;border-radius:8px;font-weight:700;font-size:14px;background:#fff;transition:background .2s}.lens-row button span{font-size:10px;margin-right:10px;font-weight:400;color:var(--gray)}.lens-row button.selected{background:var(--navy);color:white;border-color:var(--navy)}.lens-row button.selected span{color:#9cb7d1}.lens-row button.hinted{outline:3px solid var(--orange);outline-offset:2px}.control-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:13px;gap:12px}.control-bottom p{font-size:11px;color:var(--gray);line-height:1.8}.control-bottom p span{margin-left:6px}.control-bottom>div{display:flex;gap:8px;align-items:center}.control-bottom button{border:1px solid #dce4ed;border-radius:6px;padding:7px 10px;font-size:14px;white-space:nowrap}.control-bottom button span{font-size:11px}.control-bottom #hint{font-size:11px;color:#087569}.control-bottom button:hover,.lens-row button:hover{border-color:var(--teal)}dialog{border:0;border-radius:16px;width:min(90vw,480px);padding:35px;background:white;color:var(--navy);max-height:85svh;box-shadow:0 20px 80px #0a162840}dialog::backdrop{background:#0a1628a8;backdrop-filter:blur(6px)}#close{position:absolute;top:7px;right:12px;font-size:28px;padding:3px 8px;color:var(--gray)}dialog h2{font-size:31px;line-height:1.45;margin:12px 0 18px;letter-spacing:-.5px}.dialog-copy{font-size:14px;line-height:1.9;color:#475569}.dialog-copy li{margin:12px 0}.primary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 18px;background:var(--navy);color:#fff;border-radius:8px;width:100%;font-weight:700;font-size:14px;margin-top:23px}.secondary{display:block;text-align:center;border:1px solid #cbd8e5;border-radius:8px;padding:12px;margin-top:10px;font-size:13px}.result{font-size:42px;font-weight:700;color:var(--teal);line-height:1.4;letter-spacing:-1px}.result small{font-size:14px;color:var(--gray);font-weight:400;letter-spacing:0}.level-list{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px}.level-list button{border:1px solid #d3dfeb;border-radius:8px;padding:16px 8px;font-size:17px}.level-list button.done{color:var(--teal);background:#e6f5f3;border-color:#b7dcd6}.level-list button.selected{border:2px solid var(--orange)}
@media(max-width:650px){header{height:50px;padding:0 16px}.brand img{width:110px}.brand span{display:none}nav{gap:15px;font-size:11px}.heading{padding:14px 18px 4px;gap:12px}h1{font-size:22px;letter-spacing:-.8px}.eyebrow{font-size:8px;letter-spacing:1px}.score{gap:12px}.score strong{font-size:15px}.score span{font-size:9px;letter-spacing:0}.score>div:first-child{display:none}.score button{padding:7px 9px}.controls{padding:10px 16px max(12px,env(safe-area-inset-bottom))}.lens-row{gap:6px}.lens-row button{font-size:12px;padding:12px 4px}.lens-row button span{display:none}.control-bottom{margin-top:10px}.control-bottom p{font-size:10px}.control-bottom p span{display:block;margin:0}.control-bottom>div{gap:5px}.control-bottom button{padding:7px 9px}.control-bottom button span{display:none}#notice{font-size:11px;padding:7px 11px;bottom:8px}.stage-caption{top:8px;font-size:10px;gap:8px}.node{width:40px;height:40px;font-size:12px}.node .diamond{width:18px;height:18px;font-size:11px;right:-5px;top:-9px}dialog{padding:30px 24px}dialog h2{font-size:28px}}
@media(max-height:520px) and (min-width:600px){.app{min-height:360px}header{height:40px}.heading{position:absolute;left:20px;top:62px;padding:0;display:block;width:208px}h1{font-size:21px}.eyebrow{font-size:8px}.score{gap:20px;margin-top:15px}.score strong{font-size:15px}.score button{padding:4px 10px}.controls{position:absolute;left:20px;bottom:18px;width:208px;padding:0;border:0}.lens-row{grid-template-columns:1fr 1fr}.lens-row button{padding:10px 4px;font-size:12px}.lens-row button span{display:none}.control-bottom{margin-top:10px;justify-content:center}.control-bottom p{display:none}.control-bottom button span{display:none}.board{margin-left:245px;width:calc(100% - 245px);min-height:0}.stage-caption{top:9px;font-size:10px}#notice{font-size:10px;padding:6px 9px;bottom:8px}.node{width:34px;height:34px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}