*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;-webkit-tap-highlight-color:transparent;color:var(--ink);background:var(--bg)}.duel{--bg:#0a1022;--ink:#f1e8d7;--muted:#b6b9c3;--panel:rgba(12,18,33,.9);--line:rgba(182,194,220,.24);--accent:#ee6d65;--gold:#dbc195;--radius:8px;color-scheme:dark}.peek{--bg:#f3e8d6;--ink:#4e3a30;--muted:#826d60;--panel:rgba(255,250,239,.97);--line:#ddcbb5;--accent:#bf566d;--gold:#b58440;--radius:22px;color-scheme:light}button,input{font:inherit}button{cursor:pointer;color:inherit;min-height:44px;border:1px solid var(--line);background:transparent;padding:9px 16px;border-radius:var(--radius);touch-action:manipulation}button:disabled{cursor:default;opacity:.45}button:hover:not(:disabled){border-color:var(--accent)}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}#app{position:relative;width:100%;height:100dvh;isolation:isolate}#scene,.cozy-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.cozy-backdrop{background:radial-gradient(ellipse at 15% 10%,#fffdf0 0,transparent 55%),linear-gradient(140deg,#efdfc7,#e0c9ac);}.cozy-backdrop:after{content:'';position:absolute;inset:0;opacity:.4;background:repeating-linear-gradient(90deg,transparent 0 65px,#cab394 66px,transparent 67px)}.topbar{position:absolute;top:0;left:0;right:0;height:calc(68px + env(safe-area-inset-top));padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:14px;z-index:3;background:linear-gradient(var(--bg),transparent)}.brand{display:flex;flex-direction:column;line-height:1.2}.brand>span{font-family:serif;font-weight:900;font-size:24px;letter-spacing:3px}.brand small{font-size:8px;letter-spacing:3px;color:var(--muted);margin-top:3px}.peek .brand>span{font-family:inherit;color:#ab5a40;letter-spacing:1px}.build-tag{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:4px;margin-left:auto}.icon-button{width:44px;min-height:44px;padding:0;font-weight:700;font-size:21px;background:var(--panel)}.home{position:absolute;inset:0;display:grid;place-items:center;padding:80px 20px 20px;overflow:auto}.home-card{width:min(450px,100%);padding:26px 27px;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:0 24px 70px #0003}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold);margin:0 0 13px}h1{font-family:serif;font-size:clamp(36px,8vw,59px);margin:4px 0 12px;letter-spacing:4px}.duel h1{font-style:italic;text-shadow:3px 3px #a52f3655}.peek h1{font-family:inherit;font-size:44px;color:#bd674c;letter-spacing:0}.tagline{font-size:16px;letter-spacing:1px;margin:0 0 22px}.home-rule{font-size:14px;line-height:1.9;color:var(--muted);margin-bottom:22px}.mode-select{display:flex;gap:7px;border:0;padding:0;margin:0 0 18px}.mode-select label{flex:1;position:relative;cursor:pointer}.mode-select input{position:absolute;width:1px;height:1px;opacity:0}.mode-select span{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:12px 3px;font-size:14px;font-weight:650;min-height:67px}.mode-select input:checked+span{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}.mode-select input:focus-visible+span{outline:3px solid var(--accent)}.mode-select small{display:block;font-size:10px;font-weight:400;margin-top:6px;color:var(--muted)}.primary{background:var(--accent);color:#fff;border:0;font-weight:700;letter-spacing:1px;min-height:52px;width:100%;font-size:17px}.best-line{font-size:12px;color:var(--muted);margin:17px 0 10px}.best-line strong{font-size:19px;color:var(--ink);margin:0 6px;font-variant-numeric:tabular-nums}.home-actions{display:flex;justify-content:center;gap:7px}.home-actions button{font-size:12px;flex:1;padding:8px}.prototype-note,.save-note{font-size:10px;line-height:1.7;color:var(--muted);margin:15px 0 0}#boot-status{font-size:12px;color:var(--accent);line-height:1.7}#boot-status:empty{display:none}.play-layout{position:absolute;inset:calc(70px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);display:flex;flex-direction:column;padding:0 14px 10px;gap:8px;align-items:stretch}.hud{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 14px;max-width:720px;width:100%;margin:0 auto;flex-shrink:0}.meter-row{display:grid;grid-template-columns:1fr 1fr 1.1fr}.meter{text-align:center;border-right:1px solid var(--line);min-width:0}.meter:last-child{border:0}.meter>span{display:block;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:4px}.meter strong{display:block;font-size:24px;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.2}.meter small{font-size:12px;color:var(--muted)}#life-count{font-size:19px;color:var(--accent);letter-spacing:5px;padding-top:4px}.focus-row{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:12px}.focus-track{height:8px;flex:1;border:1px solid #53859e;transform:skew(-15deg);background:#142c40;overflow:hidden}.focus-track i{display:block;height:100%;width:0;background:#83ddeb;transition:width .2s}.focus-row b{font-size:11px;color:#96c9da}.combo-row{display:flex;justify-content:space-between;padding-top:9px;font-size:11px;color:var(--gold);min-height:22px}.arena-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}.arena{position:relative;width:var(--side,330px);height:var(--side,330px);flex-shrink:0;touch-action:none;user-select:none;-webkit-user-select:none}.duel .arena{border:1px solid #7c919312;border-radius:8px}.peek .arena{border-radius:24px;overflow:hidden;border:4px solid #f5ead7;box-shadow:0 14px 32px #8b5e4236;background:#eddfc6}#guide{position:absolute;width:100%;height:100%;overflow:visible;pointer-events:none}#corridor{fill:none;stroke:#78bdce;stroke-opacity:.12;stroke-width:180;stroke-linejoin:round;stroke-linecap:round}#guide-line{fill:none;stroke:#daeced;stroke-width:5;stroke-linejoin:round;filter:drop-shadow(0 0 6px #91dbf8)}#stroke-line{fill:none;stroke:#fff9cf;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}#start-ring,#end-ring{stroke:#ecf5f1;stroke-width:5;fill:#102639aa;filter:drop-shadow(0 0 5px #dd796b)}#start-label,#end-label{fill:#f5e9d8;font:38px serif;text-anchor:middle}#cursor-dot{fill:#ffd68b;display:none}#cue{position:absolute;top:43%;left:69%;font:italic 700 34px serif;color:#eee2c9;white-space:nowrap;text-shadow:0 1px 5px #000}.duel[data-phase=cue] #cue{color:#ffb099}.play-footer{min-height:58px;width:min(720px,100%);align-self:center;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;flex-shrink:0}.play-footer p{margin:0;flex:1;text-align:center;font-size:13px;line-height:1.5}.mode-label{font-size:11px;white-space:nowrap;color:var(--muted)}.hint{font-size:12px;border:1px solid #9ebcc6;color:#396b84;background:#e9f2ed;padding:8px 11px;white-space:nowrap}.hint b{margin-left:5px}.target-strip{display:flex;gap:5px;margin-top:12px}.target{flex:1;text-align:center;min-width:0;padding:4px 1px 0;position:relative;border-radius:12px;border:2px solid transparent;line-height:1}.target canvas{width:38px;height:38px;display:block;margin:auto}.target small{font-size:10px;line-height:1.5;white-space:nowrap}.target.current{border-color:#d17f8e;background:#fdece5}.target.found:after{content:'✓';position:absolute;right:0;top:0;color:white;background:#829563;border-radius:50%;font-size:10px;width:15px;height:15px;padding-top:2px}.target.pending{opacity:.5}#room{width:100%;height:100%;display:block}#spots{position:absolute;inset:0}.spot{position:absolute;min-height:0;min-width:0;padding:0;border:0;border-radius:11px;background:transparent;touch-action:manipulation}.spot:disabled{opacity:1}.spot:hover:not(:disabled){box-shadow:inset 0 0 0 2px #fff7d680}.spot:focus-visible{outline:3px solid #b46050;outline-offset:-3px;background:#ffdd7c22}.spot.teaching{box-shadow:inset 0 0 0 2px #fff7d6b0}#peek-feedback{pointer-events:none;position:absolute;top:43%;left:0;right:0;text-align:center;color:#774929;font-size:24px;font-weight:750;text-shadow:0 2px 8px #fff}.peek .hud{padding:10px 9px}dialog{width:min(420px,calc(100vw - 30px));max-height:calc(100dvh - 36px);padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);box-shadow:0 25px 90px #0008}dialog::backdrop{background:#080e1bc4;backdrop-filter:blur(4px)}dialog h2{font-family:serif;font-size:27px;letter-spacing:2px;margin:0 0 15px}dialog p{font-size:14px;line-height:1.85;color:var(--muted)}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.dialog-actions button{flex:1;white-space:nowrap}.dialog-actions .primary{flex-basis:100%}.stars{font-size:32px;color:var(--gold);letter-spacing:7px;text-align:center;margin:20px 0}.result-score{font-size:45px;text-align:center;font-variant-numeric:tabular-nums}.result-note{text-align:center;font-size:12px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0;font-size:14px}.settings-row input[type=range]{width:150px;max-width:48%;accent-color:var(--accent)}.settings-row input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent)}.settings-row select{font:inherit;padding:9px;border-radius:8px;color:var(--ink);background:var(--bg);border:1px solid var(--line)}.collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.collection-card{padding:12px;border:1px solid var(--line);border-radius:14px;text-align:center}.collection-card canvas{width:70px;height:70px}.collection-card p{font-size:11px;line-height:1.5}.collection-card small{display:block}.collection-card.locked{opacity:.4}.help-steps{padding-left:24px;font-size:14px;line-height:2.2}.smaller{font-size:11px!important}button:active:not(:disabled){transform:translateY(1px)}@media(min-width:760px) and (min-aspect-ratio:6/5){.play-layout{inset:calc(75px + env(safe-area-inset-top)) 22px max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:220px 1fr;grid-template-rows:1fr auto;gap:18px}.hud{grid-column:1;grid-row:1;height:max-content;margin-top:20px;padding:20px 12px}.meter-row{display:flex;flex-wrap:wrap;row-gap:25px}.meter{width:50%}.meter:nth-child(2){border:0}.meter.score{width:100%}.meter strong{font-size:30px}.arena-wrap{grid-column:2;grid-row:1/3}.play-footer{grid-column:1;grid-row:2;flex-wrap:wrap;text-align:center}.play-footer p{flex-basis:100%}.target-strip{flex-wrap:wrap;gap:8px}.target{flex:0 0 28%}.home{place-items:center end;padding-right:7vw}.peek .home{place-items:center}.duel .home-card{background:rgba(12,18,33,.9)}.duel .topbar{background:linear-gradient(#0a1022,transparent)}}@media(max-height:700px) and (max-width:759px){.topbar{height:52px;padding-top:6px}.brand>span{font-size:21px}.brand small{display:none}.play-layout{top:55px;gap:5px;padding-bottom:6px}.hud{padding:8px 10px}.meter strong{font-size:21px}.focus-row{margin-top:6px}.combo-row{padding-top:5px}.target-strip{margin-top:6px}.target canvas{width:30px;height:30px}.target small{font-size:9px}.play-footer{min-height:50px;padding:5px 8px}.play-footer p{font-size:11px}.home-card{padding:18px}.home{padding:65px 15px 16px}.home-rule{margin-bottom:12px}.tagline{margin-bottom:14px}.save-note{display:none}}@media(max-height:470px){.topbar{height:49px}.brand small{display:none}.play-layout{top:52px;bottom:6px;grid-template-columns:210px 1fr;gap:10px}.hud{margin:0;padding:8px}.meter-row{row-gap:12px}.meter strong{font-size:23px}.home{padding:58px 15px 15px;display:block}.home-card{margin:0 auto}.prototype-note{margin-top:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep the play surface independent from the HUD's intrinsic height. */
@media(min-width:760px) and (min-aspect-ratio:6/5){
.play-layout{grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 104px;padding:0;gap:12px}
.hud{margin:0;padding:12px 8px;height:max-content;max-height:100%;overflow:auto}
.meter-row{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:0}
.meter,.meter.score{width:auto}.meter:nth-child(2){border-right:1px solid var(--line)}.meter strong{font-size:19px}.meter>span{font-size:10px;letter-spacing:0}
#life-count{font-size:14px;letter-spacing:2px}
.target-strip{flex-wrap:nowrap;gap:2px}.target{flex:1;padding:4px 0 0;border-radius:8px}.target canvas{width:28px;height:28px}.target small{font-size:8px}
.play-footer{width:100%;height:104px;min-height:0;max-height:104px;align-self:stretch;display:grid;grid-template-columns:1fr auto;grid-template-rows:44px 32px;gap:6px;padding:8px}
.play-footer p{grid-column:1/3;grid-row:2;font-size:11px;line-height:1.4}.play-footer .mode-label{grid-column:2;grid-row:1;align-self:center}.play-footer .hint{grid-column:1;grid-row:1;font-size:11px}
.duel .play-footer{grid-template-columns:1fr;grid-template-rows:24px 48px}.duel .play-footer .mode-label{grid-column:1;grid-row:1;text-align:center}
.arena-wrap{min-width:0;min-height:0}
}
/* Home: approved UI (docs/ui/approved.png) — illustrated room with floating panels. */
.peek{--home-ink:#3b2d27;--home-muted:#7d6a5f;--home-pink:#f06d91;--home-panel:rgba(255,253,249,.93);--home-edge:rgba(255,255,255,.95);--home-rule:#e8ddd3;--home-round:'Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','BIZ UDPGothic','Yu Gothic',system-ui,sans-serif;--dock-face:56px}
#app[data-screen=home] .topbar,#app[data-screen=home] .cozy-backdrop{display:none}
.peek .home{display:block;padding:0;overflow:hidden;color:var(--home-ink);font-family:var(--home-round);background:#d9b98f}
.home-art{position:absolute;inset:0;background:url(../assets/art/home-room.webp) center 62%/cover no-repeat}
.home-art:after{content:'';position:absolute;inset:0 0 auto;height:34%;background:linear-gradient(rgba(255,244,226,.28),transparent)}
.home-layout{position:relative;height:100%;width:min(100%,520px);margin:0 auto;display:flex;flex-direction:column;gap:clamp(8px,1.6dvh,14px);padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain}
.home-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-left:4%}
.home-logo{margin:0;width:min(62%,300px);line-height:0;filter:drop-shadow(0 3px 5px rgba(120,70,40,.18))}
.home-logo img{width:100%;height:auto;visibility:hidden}
.home-logo img.loaded{visibility:visible}
.home-tagline{margin:-2px 0 0 3%;padding:3px 26px 3px 10px;font-size:clamp(9px,2.6vw,11px);font-weight:700;letter-spacing:.02em;color:var(--home-ink);background:rgba(255,253,249,.82) url(../assets/art/icon-paw.png) right 6px center/15px no-repeat;border-radius:999px;white-space:nowrap}
.home-settings{position:absolute;top:2px;right:0;width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:2px solid var(--home-edge);border-radius:50%;background:var(--home-panel);box-shadow:0 4px 12px rgba(90,55,30,.16);color:var(--home-muted)}
.home-settings svg{width:24px;height:24px;fill:currentColor}
.home-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);align-items:center;padding:clamp(10px,1.8dvh,16px) 6px;border:2px solid var(--home-edge);border-radius:22px;background:var(--home-panel);box-shadow:0 6px 18px rgba(90,55,30,.18)}
.stat{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:0 5px}
.stat+.stat{border-left:2px dashed var(--home-rule)}
.stat-icon{flex:none;width:clamp(30px,9vw,44px);aspect-ratio:1;background:center/contain no-repeat}
.stat-time .stat-icon{background-image:url(../assets/art/icon-clock.png)}
.stat-dex .stat-icon{width:clamp(22px,6.5vw,30px);background-image:url(../assets/art/icon-flag.png)}
.stat-best .stat-icon{background-image:url(../assets/art/icon-star.png)}
.stat-body{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.stat-label{font-size:clamp(9px,2.6vw,11px);font-weight:700;color:var(--home-ink);letter-spacing:0;white-space:nowrap}
.stat-value{font-size:clamp(20px,6.4vw,27px);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.stat-value small{margin-left:3px;font-size:.5em;font-weight:700}
.stat-dex .stat-body{flex:1;max-width:120px}
.stat-dex .stat-value{text-align:center}
.dex-bar{display:block;height:8px;margin-top:6px;border-radius:99px;background:#e8e3df;overflow:hidden}
.dex-bar i{display:block;height:100%;width:var(--dex,0%);border-radius:inherit;background:linear-gradient(90deg,#f5779b,#ee5f86);transition:width .4s}
.stat-best .stat-value{font-size:clamp(18px,5.6vw,24px)}
.home-roster{display:grid;grid-template-columns:auto 1fr;align-items:start}
.roster-tag{position:relative;z-index:1;margin-top:2px;margin-right:-4px;padding:7px 12px 7px 32px;font-size:clamp(11px,3.3vw,14px);font-weight:800;color:#fff;letter-spacing:.06em;white-space:nowrap;border-radius:10px 4px 18px 10px;background:var(--home-pink) url(../assets/art/icon-paw-white.png) 10px center/16px no-repeat;box-shadow:0 3px 8px rgba(200,60,100,.25)}
.roster{display:block;width:100%;min-height:0;padding:8px 4px 6px;border:2px solid var(--home-edge);border-radius:18px;background:var(--home-panel);box-shadow:0 6px 18px rgba(90,55,30,.18);color:inherit;font:inherit}
.roster:hover:not(:disabled){border-color:var(--home-edge)}
.roster:focus-visible{outline:3px solid var(--home-pink);outline-offset:3px}
.roster ul{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none}
.roster-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.roster-face{position:relative;display:grid;place-items:center;width:clamp(40px,11.4vw,52px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0,#fbf3ec 70%);border:2px solid #efe4da}
.roster-face img{width:82%;height:auto}
.roster-item.is-next .roster-face{border:3px solid var(--home-pink);box-shadow:0 0 0 2px #fff}
.roster-item.found .roster-face:after{content:'';position:absolute;right:-5px;bottom:-3px;width:40%;aspect-ratio:1;border-radius:50%;border:2px solid #fff;background:#3eb065 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.roster-item small{font-size:clamp(9px,2.7vw,11px);font-weight:700;color:var(--home-ink);white-space:nowrap}
.peek #boot-status{margin:auto 0 0;align-self:center;padding:6px 14px;border-radius:99px;background:var(--home-panel);color:var(--accent)}
.peek #boot-status:empty{display:none}
.peek .save-note{margin:0;align-self:center;padding:4px 12px;border-radius:99px;background:var(--home-panel)}
.peek .save-note:empty{display:none}
.home-dock{margin-top:auto;display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:start;gap:clamp(6px,2vw,10px);padding:8px;border:2px solid var(--home-edge);border-radius:32px;background:rgba(255,253,249,.8);box-shadow:0 6px 20px rgba(90,55,30,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#boot-status:not(:empty)~.home-dock,.save-note:not(:empty)~.home-dock{margin-top:0}
.home-dock button{font-family:var(--home-round);font-weight:800;white-space:nowrap}
.dock-icon{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;width:56px;min-width:56px;min-height:var(--dock-face);padding:0;border:0;background:none;color:var(--home-ink);font-family:var(--home-round);font-weight:800;box-shadow:none}
.dock-icon:hover:not(:disabled){border-color:transparent;filter:none}
.dock-icon-face{position:relative;flex:none;width:var(--dock-face);height:var(--dock-face);border:2px solid var(--home-edge);border-radius:50%;background:var(--home-panel) center/54% no-repeat;box-shadow:0 4px 12px rgba(90,55,30,.16)}
.dock-help .dock-icon-face{background-image:url(../assets/art/icon-bulb.png)}
.dock-mode .dock-icon-face{background-image:url(../assets/art/icon-clock.png)}
.dock-mode[data-mode=relaxed] .dock-icon-face{background-image:url(../assets/art/icon-mountain.png)}
.dock-caption{max-width:100%;font-size:clamp(10px,2.8vw,11px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--home-ink);overflow:hidden}
.dock-icon:focus-visible{outline:none}
.dock-icon:focus-visible .dock-icon-face{outline:3px solid var(--home-pink);outline-offset:2px}
.dock-icon:not(:disabled):not(.mode-label):active .dock-icon-face{transform:translateY(1px);box-shadow:0 2px 6px rgba(90,55,30,.14)}
.dock-start{align-self:start;display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--dock-face);height:var(--dock-face);padding:0 10px;font-size:clamp(16px,4.8vw,20px);letter-spacing:.06em;color:#fff;text-shadow:0 1px 1px rgba(150,25,65,.35);border:3px solid #fff;border-radius:999px;background:linear-gradient(#f5829f,#e85a80);box-shadow:0 5px 12px rgba(190,45,90,.32),inset 0 -3px 0 rgba(160,30,70,.22);transition:transform .12s,box-shadow .12s}
.dock-start-icon{flex:none;width:32px;height:32px;border-radius:50%;background:#fff url(../assets/art/icon-paw.png) center/24px no-repeat;box-shadow:0 1px 3px rgba(90,55,30,.22)}
.dock-start:hover:not(:disabled){border-color:#fff;filter:none}
.dock-start:disabled{opacity:.55}
.dock-start:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 5px rgba(190,45,90,.22),inset 0 -1px 0 rgba(160,30,70,.22)}
.dock-start:focus-visible{outline:3px solid #b83a60;outline-offset:3px}
#app.reduced-motion .dock-start,#app.reduced-motion .dock-icon-face{transition:none}
@media(max-width:359px){.peek{--dock-face:50px}.home-dock{grid-template-columns:52px minmax(0,1fr) 52px;gap:6px;padding:6px}.dock-icon{width:52px;min-width:52px}.dock-start{font-size:15px;gap:6px}.dock-start-icon{width:30px;height:30px;background-size:22px}}
@media(max-height:700px){.home-logo{width:min(52%,250px)}.home-stats{padding-block:8px}.roster-face{width:clamp(36px,10vw,44px)}}
@media(max-height:470px){
.home-layout{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr auto;column-gap:14px;row-gap:8px}
.home-hero{grid-column:1;grid-row:1}
.home-logo{width:min(70%,220px)}
.home-stats{grid-column:2;grid-row:1;align-self:start}
.home-roster{grid-column:2;grid-row:2}
.peek #boot-status,.peek .save-note{grid-column:1/-1;grid-row:3;align-self:end}
.home-dock{grid-column:1/-1;grid-row:4;width:min(100%,640px);justify-self:center}
.home-settings{right:auto;left:calc(min(70%,220px) + 4%)}
}
@media(min-width:760px) and (min-aspect-ratio:6/5){.peek .home{place-items:initial;padding:0}}
/* Play: illustrated stage (Lv.1 little room / Lv.2 three-floor house) under floating panels. */
#app[data-screen=play] .cozy-backdrop{display:none}
.peek .play-layout{position:absolute;inset:0;display:block;padding:0;gap:0;font-family:var(--home-round);color:var(--home-ink);background:radial-gradient(ellipse at 70% 40%,#fbe3cf 0,#f0c9a8 45%,#dcae86 100%)}
.peek .arena-wrap{display:contents}
.peek .arena{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:transparent}
.peek .hud{position:absolute;top:0;left:0;right:0;z-index:2;width:min(100%,520px);max-width:none;margin:0 auto;padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));border:0;border-radius:0;background:none;display:flex;flex-direction:column;gap:8px;pointer-events:none;height:auto;max-height:none;overflow:visible}
.peek .hud>*{pointer-events:auto}
.play-stats{padding-block:clamp(8px,1.4dvh,12px)}
.play-stats .stat-value{font-size:clamp(19px,6vw,26px)}
.play-stats .stat-dex .stat-value{text-align:left}
.play-stats .dex-bar{margin-top:4px}
.play-stats .dex-bar i{width:var(--progress,0%)}
.play-stats .stat-best .stat-value{font-size:clamp(17px,5.4vw,23px)}
.play-roster{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.peek .target-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:7px 4px 5px;border:2px solid var(--home-edge);border-radius:18px;background:var(--home-panel);box-shadow:0 6px 18px rgba(90,55,30,.18)}
.peek .target{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:0;border:0;border-radius:0;background:none;line-height:1}
.peek .target img,.peek .target canvas{display:block;width:clamp(38px,10.6vw,50px);height:auto;aspect-ratio:1;margin:0;padding:3px;border-radius:50%;border:2px solid #efe4da;background:radial-gradient(circle at 50% 38%,#fff 0,#fbf3ec 70%);object-fit:contain}
.peek .target small{font-size:clamp(9px,2.6vw,11px);font-weight:700;line-height:1.3;color:var(--home-ink);white-space:nowrap}
.peek .target.current img,.peek .target.current canvas{border:3px solid var(--home-pink);box-shadow:0 0 0 2px #fff}
.peek .target.current{background:none;border-color:transparent}
.peek .target.found:after{content:'';position:absolute;right:calc(50% - clamp(19px,5.3vw,25px) - 5px);top:calc(clamp(38px,10.6vw,50px) - 16px);width:18px;height:18px;padding:0;border-radius:50%;border:2px solid #fff;background:#3eb065 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;color:transparent;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.peek .target.pending{opacity:1}
.peek .target.pending img,.peek .target.pending canvas{filter:saturate(.75);opacity:.8}
.play-pause{width:44px;min-height:44px;height:44px;padding:0;display:grid;place-items:center;border:2px solid var(--home-edge);border-radius:50%;background:var(--home-panel);box-shadow:0 4px 12px rgba(90,55,30,.16);color:var(--home-muted)}
.play-pause svg{width:20px;height:20px;fill:currentColor}
.play-pause:focus-visible{outline:3px solid var(--home-pink);outline-offset:2px}
.play-level{justify-self:start;align-self:flex-start;margin:0;padding:4px 12px 4px 30px;font-size:clamp(10px,2.9vw,12px);font-weight:800;color:#fff;border-radius:999px;background:var(--home-pink) url(../assets/art/icon-paw-white.png) 10px center/13px no-repeat;box-shadow:0 3px 8px rgba(200,60,100,.25)}
.peek .play-footer{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));z-index:2;width:min(calc(100% - 20px),520px);height:auto;min-height:0;max-height:none;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:start;gap:8px;padding:6px 8px;border:2px solid var(--home-edge);border-radius:28px;background:rgba(255,253,249,.82);box-shadow:0 6px 20px rgba(90,55,30,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.peek .play-footer .hint,.peek .play-footer .mode-label,.peek .play-footer p{grid-column:auto;grid-row:auto}
.peek .play-footer .hint{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--home-ink)}
.peek .play-footer .hint:disabled{opacity:.55}
.peek .play-footer .hint:focus-visible{outline:none}
.peek .play-footer #hint-count{position:absolute;z-index:1;top:-4px;right:-4px;display:grid;place-items:center;min-width:18px;height:18px;margin:0;padding:0 3px;border-radius:999px;background:#fff;color:var(--home-pink);font-size:11px;font-weight:800;line-height:1;white-space:nowrap;box-shadow:0 1px 3px rgba(90,55,30,.28)}
.peek .play-footer p{display:grid;align-items:center;justify-items:stretch;align-self:start;min-width:0;min-height:var(--dock-face);height:var(--dock-face);margin:0;padding:0 8px;font-size:clamp(10px,2.8vw,12px);font-weight:700;line-height:1.25;text-align:center;border:2px solid #f1e6da;border-radius:999px;background:#fffaf2}
.peek .play-footer #status{white-space:pre-line;text-wrap:wrap;word-break:normal}
.peek .play-footer .mode-label{min-height:0;padding:0;background:none;box-shadow:none;color:var(--home-ink)}
.peek .play-footer .mode-label .dock-icon-face{box-shadow:0 1px 3px rgba(90,55,30,.12)}
.peek .spot{border-radius:18px}
.peek .spot:hover:not(:disabled){box-shadow:none;border-color:transparent}
.peek .spot:focus,.peek .spot:focus-visible{outline:none;background:transparent}
.peek .spot.teaching{box-shadow:none}
.peek .spot.teaching:after{content:'';position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(255,250,244,.88) url(../assets/art/icon-paw.png) center/62% no-repeat;box-shadow:0 2px 6px rgba(90,55,30,.25);animation:peek-teach 1.8s ease-in-out infinite}
@keyframes peek-teach{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.peek #peek-feedback{top:44%;font-family:var(--home-round);font-size:clamp(30px,10vw,44px);font-weight:900;color:var(--home-pink);-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 6px 14px rgba(160,60,90,.3)}
/* Home: level picker */
.stage-picker{margin-top:auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px}
.stage-picker~#boot-status,.stage-picker~.save-note{margin-top:0}
.stage-picker~.home-dock{margin-top:0}
.stage-arrow{width:44px;min-height:44px;height:44px;padding:0;display:grid;place-items:center;border:2px solid var(--home-edge);border-radius:50%;background:var(--home-panel);box-shadow:0 4px 12px rgba(90,55,30,.16);color:var(--home-ink)}
.stage-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.stage-arrow:disabled{visibility:hidden}
.stage-arrow:focus-visible{outline:3px solid var(--home-pink);outline-offset:2px}
.stage-card{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 12px 6px 6px;border:2px solid var(--home-edge);border-radius:20px;background:var(--home-panel);box-shadow:0 6px 18px rgba(90,55,30,.18)}
.stage-thumb{position:relative;flex:none;width:clamp(52px,15vw,64px);aspect-ratio:1;border-radius:14px;background:#e7c49c center 58%/cover no-repeat;border:2px solid #fff;box-shadow:0 2px 6px rgba(90,55,30,.2)}
.stage-card[data-stage=little-room] .stage-thumb{background-image:url(../assets/art/stage-room.webp)}
.stage-card[data-stage=house] .stage-thumb{background-image:url(../assets/art/stage-house.webp)}
.stage-card[data-stage=garden] .stage-thumb{background-image:url(../assets/art/stage-garden.webp)}
.stage-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.stage-level{align-self:flex-start;padding:1px 9px;font-size:11px;font-weight:800;color:#fff;border-radius:999px;background:var(--home-pink)}
.stage-text strong{font-size:clamp(14px,4.2vw,17px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-text small{font-size:clamp(10px,2.8vw,12px);font-weight:700;color:var(--home-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-card.locked .stage-thumb{filter:grayscale(.7) brightness(.8)}
.stage-card.locked .stage-thumb:after{content:'';position:absolute;inset:0;margin:auto;width:40%;height:40%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5' fill='%23fff'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
.stage-card.locked .stage-level{background:#a99a90}
@media(max-height:470px){
.peek .hud{width:min(46%,380px);margin:0;left:0;right:auto}
.peek .play-footer{left:max(10px,env(safe-area-inset-left));right:auto;width:min(46%,380px);margin:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:start;border-radius:28px}
.peek .play-footer p,.peek .play-footer .hint,.peek .play-footer .mode-label{grid-column:auto;grid-row:auto}
.peek .play-footer p{min-height:var(--dock-face);height:var(--dock-face)}
.peek .arena{left:min(48%,400px);width:auto}
.stage-picker{grid-column:1/-1;grid-row:3;align-self:end;width:min(100%,460px);justify-self:center}
}
@media(min-width:760px) and (min-aspect-ratio:6/5){
.peek .play-layout{inset:0;display:block;padding:0}
.peek .hud{width:340px;left:max(20px,env(safe-area-inset-left));right:auto;margin:0;padding-top:calc(16px + env(safe-area-inset-top));height:auto;overflow:visible}
.peek .play-footer{left:max(20px,env(safe-area-inset-left));right:auto;width:340px;height:auto;max-height:none;margin:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:start;border-radius:28px;padding:6px 8px}
.peek .play-footer p,.peek .play-footer .hint,.peek .play-footer .mode-label{grid-column:auto;grid-row:auto}
.peek .play-footer p{min-height:var(--dock-face);height:var(--dock-face);font-size:12px}
.peek .arena{left:380px;width:auto}
.peek .target-strip{flex-wrap:nowrap}
}
/* Home: the stage card and the center dock button both start the game. */
.peek .home-dock{grid-template-columns:56px minmax(0,1fr) 56px}
@media(max-width:359px){.peek .home-dock{grid-template-columns:52px minmax(0,1fr) 52px}}
.stage-card{position:relative;width:100%;min-height:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .15s}
.stage-card:not(:disabled):hover{box-shadow:0 8px 22px rgba(90,55,30,.24)}
.stage-card:not(:disabled):active{transform:scale(.98)}
.stage-card:focus-visible{outline:3px solid var(--home-pink);outline-offset:2px}
.stage-card:disabled{opacity:1;cursor:default}
.stage-text{flex:1}
.stage-card{gap:8px;padding-right:8px}
.stage-thumb{width:clamp(48px,13vw,60px)}
.stage-text strong{font-size:clamp(13px,3.9vw,17px)}
@media(max-width:359px){.stage-thumb{width:42px}}
/* Result dialog: centered, rounded title. */
.peek dialog h2{font-family:var(--home-round);font-weight:800;text-align:center;letter-spacing:.04em}
.peek .result-note~.smaller{text-align:center}
.stage-text strong,.stage-text small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
.stage-arrow:focus,.stage-arrow:focus-visible,.stage-card:focus,.stage-card:focus-visible{outline:none}
/* Every level card reserves two note lines, keeping Lv.1–3 the same size. */
.stage-text small{min-height:2.5em}
.stage-text strong{text-align:center}
.stage-text #stage-note{white-space:pre-line;text-align:center}
/* Level ribbon sits in the gap between the play panels instead of over the room. */
.peek .play-stats{order:0}
.peek .play-level{order:1;position:relative;z-index:1;align-self:center;margin:-16px auto -15px;padding:2px 12px 2px 28px;font-size:clamp(10px,2.8vw,11px);line-height:1.4;white-space:nowrap;border:2px solid #fff;background-position:9px center;background-size:12px}
.peek .play-roster{order:2}
/* Roster: each friend is its own button; found friends open their profile. */
.roster-item{width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.roster-item:disabled{cursor:default;opacity:1}
.roster-item:disabled .roster-face img{filter:saturate(.6);opacity:.75}
.roster-item:not(:disabled):active .roster-face{transform:scale(.94)}
.roster-item .roster-face{transition:transform .12s}
.roster-item:focus{outline:none}
.roster-item:focus-visible .roster-face{outline:3px solid var(--home-pink);outline-offset:2px}
.roster-item.found small{color:var(--home-pink)}
.roster li{display:flex;min-width:0}
/* Friend profile dialog: portrait, facts, then one reward per level. */
.friend-profile{display:grid;gap:12px;font-family:var(--home-round);color:var(--home-ink)}
.friend-hero{display:grid;justify-items:center;gap:6px}
.friend-hero img{width:96px;height:96px;padding:6px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 50% 38%,#fff 0,#fbeee4 72%);box-shadow:0 0 0 3px var(--home-pink),0 6px 16px rgba(200,60,100,.2);object-fit:contain}
.peek .friend-line{margin:0;padding:8px 14px;font-size:13px;font-weight:700;line-height:1.6;text-align:center;color:var(--home-ink);border-radius:14px;background:#fff4f6}
.friend-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;padding:10px 14px;border:2px solid #f1e6da;border-radius:14px;background:#fffaf2;font-size:13px}
.friend-facts dt{font-weight:800;color:var(--home-muted);white-space:nowrap}
.friend-facts dd{margin:0;font-weight:700}
.friend-rewards{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.reward{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:2px 10px;padding:10px 12px;border:2px solid #f6d3dd;border-radius:14px;background:#fff}
.reward-level{grid-row:span 2;align-self:center;padding:2px 9px;font-size:11px;font-weight:800;color:#fff;border-radius:999px;background:var(--home-pink)}
.reward strong{font-size:13px;font-weight:800}
.peek .reward p{margin:0;font-size:12px;line-height:1.6;color:var(--home-ink)}
.reward-art{grid-column:1/-1;justify-self:center;width:min(100%,180px);height:auto;margin-top:6px;border-radius:12px;background:#f7ecdf}
.reward.locked{border-style:dashed;border-color:#e3d8ce;background:#faf6f1}
.reward.locked .reward-level{background:#bfb2a8}
.reward.locked strong,.peek .reward.locked p{color:var(--home-muted)}
/* Line breaks: break Japanese at phrase boundaries and avoid one-character last lines. */
.peek dialog p,.peek dialog li,.peek dialog dd,.stage-text strong,.stage-text small,.peek .play-footer p{text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.peek .help-steps{display:grid;gap:8px;margin:0 0 14px;padding-left:22px;line-height:1.65}
/* Button spacing: roomier gaps between dialog buttons and stage arrows. */
.peek .dialog-actions{gap:12px;margin-top:24px}
.peek .dialog-actions button{min-height:48px}
.stage-picker{gap:10px}
@media(max-width:359px){.stage-picker{gap:6px}.stage-card .stage-thumb{display:none}.stage-card{padding-left:12px}}
/* Rewards: level badge and title share a row so the body text gets the full width. */
.reward{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 8px}
.reward-level{grid-row:auto;align-self:center}
.reward p{grid-column:1/-1}
/* Dialog messages are centred; the how-to explanation stays left-aligned for reading. */
.peek #modal-content>p{text-align:center}
.peek #modal-content>.help-steps~p{text-align:left}
/* Keep quoted game terms on one line (Safari has no phrase-aware breaking). */
.peek .nw{white-space:nowrap}
/* 44px targets: settings rows and sliders get full-height hit areas; the label row toggles its checkbox. */
.peek .settings-row{min-height:44px;margin:8px 0}
.peek .settings-row input[type=range]{height:44px;margin:0}
.peek .settings-row select{min-height:44px;min-width:44px}
html:not(:lang(ja)) .home-tagline{white-space:normal;line-height:1.35}
html:not(:lang(ja)) .dock-start{letter-spacing:0;font-size:clamp(15px,4.2vw,18px)}
html:not(:lang(ja)) .dock-caption{letter-spacing:0}
html:not(:lang(ja)) .roster-item small{letter-spacing:-.03em}
html:not(:lang(ja)) .peek dialog p,html:not(:lang(ja)) .peek dialog li,html:not(:lang(ja)) .peek dialog dd,html:not(:lang(ja)) .stage-text strong,html:not(:lang(ja)) .stage-text small,html:not(:lang(ja)) .peek .play-footer p{word-break:normal;line-break:auto}
/* Narrow phones: put the なかま tag above the roster so each friend button keeps ≥44px width. */
@media(max-width:374px){.peek .home-roster{grid-template-columns:1fr}.peek .roster-tag{justify-self:start;margin:0 0 -12px 12px;padding:4px 10px 4px 26px;font-size:11px;background-size:13px;background-position:8px center;border-radius:10px}.peek .roster{padding-top:14px}}