:root{font-family:Inter,ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;color:#fff4df;background:#170e28;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 60% 20%,#513254 0,#21142e,#120d20);min-height:100vh}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #ffffff24;background:#ffffff09;border-radius:14px;padding:12px 18px;transition:background .15s,transform .15s}button:hover{background:#ffffff19;transform:translateY(-2px)}button:focus-visible,select:focus-visible{outline:3px solid #a6ffee;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}header{max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:22px 34px;gap:20px}.brand{font-weight:950;font-size:26px;letter-spacing:-1px;color:#ffd899}.brand small{display:block;font-size:9px;letter-spacing:4px;color:#c4a8cb;margin-top:3px}.toolbar{display:flex;gap:8px;align-items:center}.toolbar button,.toolbar select{padding:8px 12px;border:1px solid #ffffff25;border-radius:10px;background:#2c1c37}main{max-width:1440px;margin:auto;padding:4px 34px 30px}.intro{display:flex;justify-content:space-between;align-items:end;margin:12px 0 24px}.eyebrow{font-size:10px;letter-spacing:4px;font-weight:800;color:#e8b17b;margin-bottom:9px}h1{font-size:clamp(35px,5vw,62px);line-height:1;margin:0;letter-spacing:-3px}h1 em{color:#ffb5a0;font-style:normal}.intro p{color:#c0a9ca;font-size:13px;max-width:340px;line-height:1.6;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px}.stage-wrap{position:relative;border:1px solid #886c8055;border-radius:24px;overflow:hidden;box-shadow:0 25px 90px #0004;background:#22152e;aspect-ratio:1000/660}#stage{width:100%;height:100%}#stage canvas{display:block}.stage-top{position:absolute;top:18px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none}.tag{background:#22152dcc;border:1px solid #ffffff20;border-radius:50px;padding:8px 14px;font-size:10px;letter-spacing:2px}.score{font-size:18px;font-weight:800;color:#ffe1a3}.bubble{position:absolute;top:16%;left:50%;transform:translate(-50%);background:#fff4df;color:#38223c;padding:12px 21px;border-radius:18px;max-width:65%;font-size:13px;text-align:center;box-shadow:0 5px #0002;pointer-events:none;transition:opacity .2s}.bubble:empty{opacity:0}.overlay{position:absolute;inset:0;background:#1b1226db;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.overlay[hidden]{display:none}.overlay h2{font-size:42px;margin:0}.overlay p{color:#d4bfd9;margin:0}.primary{background:#ffd49a;color:#39263b;font-weight:900;border:0;padding:15px 25px}.primary:hover{background:#ffe5b6}.rail{background:#ffffff05;border:1px solid #ffffff13;border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:12px}.rail h2{font-size:11px;letter-spacing:2px;margin:0 0 5px;color:#d0b5d5}.dogs{display:flex;flex-direction:column;gap:8px}.dog-card{display:flex;gap:10px;align-items:center;text-align:left;padding:7px 12px;border-radius:16px;min-height:68px}.dog-card.active{background:#ffcd9220;border-color:#efc38d}.portrait{width:49px;height:58px;object-fit:contain}.dog-name{font-size:15px;font-weight:800}.dog-desc{font-size:10px;color:#c2a9cc;margin-top:4px}.label{font-size:10px;color:#b9a1c5;letter-spacing:1px;margin-top:8px}.rail select{width:100%;background:#32213e;border:1px solid #ffffff20;padding:10px;border-radius:10px}.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:14px}.controls button{padding:13px 4px;font-weight:900;font-size:17px;background:#332240;touch-action:none}.controls button:last-child{color:#ffd898}.controls button.pressed{background:#ce8bba;color:#1b1226}.hint{color:#ae96b9;font-size:11px;line-height:1.7;text-align:center;margin-top:12px}.moves{display:flex;flex-wrap:wrap;gap:5px}.moves button{font-size:10px;padding:7px 9px;border-radius:8px}.footer{display:flex;justify-content:space-between;gap:15px;color:#9b85a7;font-size:10px;margin-top:20px;letter-spacing:1px}.status{font-size:11px;color:#ccb4d2;min-height:16px}.switch{font-size:11px;color:#cfb5d3}.switch input{accent-color:#ffd49a}@media(max-width:900px){.layout{grid-template-columns:1fr}.rail{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dogs{grid-column:1/-1;flex-direction:row}.dog-card{flex:1}.rail h2{grid-column:1/-1}.intro p{display:none}.stage-wrap{aspect-ratio:1000/720}header,main{padding-left:16px;padding-right:16px}.footer{line-height:1.6}.bubble{font-size:11px}}@media(max-width:500px){.dog-desc{display:none}.portrait{width:30px}.dog-name{font-size:11px}.dog-card{padding:5px}.toolbar{gap:4px}.toolbar button{padding:8px}h1{letter-spacing:-2px}}.layout>section,.rail{min-width:0}.stage-wrap{width:100%;min-width:0}#stage{position:absolute;inset:0}#stage canvas{max-width:100%;max-height:100%}.brand{flex-shrink:0}.brand small{letter-spacing:2px}.toolbar select{max-width:150px}@media(max-width:500px){header{gap:8px;padding-top:16px}.brand{font-size:22px}.brand small{font-size:7px;letter-spacing:1px}.toolbar select{max-width:110px}.toolbar button{padding:7px}.stage-top{top:8px;left:8px;right:8px}.tag{font-size:7px;padding:5px 7px;letter-spacing:1px}.score{font-size:12px}.bubble{top:19%;padding:5px 8px;font-size:8px}.rail{padding:14px}.intro{margin-top:6px}.eyebrow{letter-spacing:2px;font-size:8px}.dog-card{min-width:0;gap:4px}.dogs{gap:4px}.footer{letter-spacing:0}.overlay h2{font-size:20px}.overlay p{font-size:11px}.overlay{gap:10px}.overlay .primary{padding:8px 12px;font-size:12px}}.language-picker{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff25;border-radius:10px;background:#2c1c37;color:#fff4df}.language-picker svg{width:23px;height:23px;pointer-events:none}.language-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.language-picker:hover{background:#422b50}.language-picker:focus-within{outline:3px solid #a6ffee;outline-offset:3px}.hub{max-width:1100px}.hub h1{max-width:780px;line-height:1.12}.hub h2{font-size:12px;letter-spacing:2px;color:#d0b5d5}.hub-welcome{display:flex;align-items:center;gap:20px;margin:20px 0}.hub-welcome p{max-width:420px;padding:18px 24px;border-radius:24px;background:#fff4df;color:#38223c;line-height:1.6}.owner-portrait{width:100px;height:150px;flex-shrink:0;background:url(/art/owner.webp) left center/200% 100% no-repeat}.hub-dogs{flex-direction:row;margin-bottom:28px}.hub-dogs .dog-card{flex:1}.hub-dogs .portrait{width:65px;height:85px}.activities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.activity{display:flex;flex-direction:column;text-align:left;gap:10px;padding:24px;border-radius:24px}.activity.available{background:linear-gradient(135deg,#62415b,#34223d);border-color:#efc38d}.activity-icon{font-size:36px;color:#ffd49a}.activity-name{font-size:20px;font-weight:850}.activity-description{font-size:13px;line-height:1.5;color:#d3bed9}.activity-status{font-size:11px;color:#ffd49a;margin-top:auto;padding-top:10px}.activity:disabled{opacity:.65;cursor:default}.activity:disabled:hover{transform:none;background:#ffffff09}@media(max-width:650px){.activities{grid-template-columns:1fr 1fr}.activity{padding:16px}.activity-name{font-size:16px}.hub-dogs .portrait{width:36px;height:64px}.hub-welcome{gap:8px}.hub-welcome p{padding:14px;font-size:13px}.owner-portrait{width:70px;height:110px}.hub h1{font-size:36px}}@media(max-width:360px){.activities{grid-template-columns:1fr}.hub-dogs .dog-card{flex-direction:column;text-align:center}}.fetch-instructions{max-width:780px;color:#d3bed9;font-size:13px;line-height:1.7}.fetch-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px}.fetch-layout section{min-width:0}#fetch-field{display:block;width:100%;height:auto;border:1px solid #98bb9755;border-radius:24px;touch-action:none}#fetch-field:focus-visible{outline:3px solid #a6ffee;outline-offset:3px}.fetch-stats{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:#ffd49a;font-weight:800;font-size:13px}#fetch-message{min-height:2em;color:#d3bed9;line-height:1.5}.fetch-toys{display:flex;flex-wrap:wrap;gap:6px}.fetch-toys button{padding:9px;font-size:12px}.fetch-toys button[aria-pressed=true]{border-color:#ffd49a;background:#ffcd9220}.fetch-layout .rail label{font-size:12px;color:#d3bed9}.fetch-layout input[type=range]{display:block;width:100%;margin:12px 0;accent-color:#ffd49a}.fetch-layout .rail button:disabled{cursor:default}@media(max-width:900px){.fetch-layout{grid-template-columns:1fr}.fetch-layout .rail{display:flex}.fetch-toys button{flex:1}}.pattern-layout{display:grid;grid-template-columns:minmax(0,620px) 250px;gap:24px}.pattern-layout section{min-width:0}.pattern-board{position:relative;aspect-ratio:1;background:#261a35;border:1px solid #ffffff22;padding:8px;border-radius:24px}.pattern-board:focus-visible{outline:3px solid #a6ffee;outline-offset:3px}.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;width:100%;height:100%}.pattern-grid button{position:relative;padding:6px;text-align:left;background:#44334f;border-radius:14px;touch-action:manipulation;transition:background .12s}.pattern-grid button span{position:absolute;top:8px;left:9px;font-size:12px;color:#d5c0df}.pattern-grid button b{display:block;text-align:center;color:#39263b;font-size:28px}.pattern-grid button:disabled{opacity:1;cursor:default}.pattern-grid button:hover{transform:none}.pattern-grid button.lit{background:#ffd49a;border:3px solid #fff2dc;box-shadow:0 0 24px #ffca9480}.pattern-grid button.lit span{color:#39263b}.pattern-grid button.occupied{box-shadow:inset 0 0 0 2px #a7f0d8}.pattern-grid button.start-tile{border-bottom:5px solid #a7f0d8}.pattern-dog{position:absolute;transform:translate(-50%,-50%);height:22%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 3px #0005)}.pattern-cover{position:absolute;inset:0;display:grid;place-items:center;background:#190f2adb;border-radius:24px;text-align:center;padding:24px;font-size:28px;font-weight:900}.pattern-cover[hidden]{display:none}#pattern-message{min-height:3em;color:#ffe1a3;line-height:1.6}.pattern-layout .rail{font-size:14px;color:#d3bed9}.pattern-layout .rail button:disabled{cursor:default}@media(max-width:900px){.pattern-layout{grid-template-columns:1fr}.pattern-layout .rail{display:flex}.pattern-board{max-width:620px}.pattern-grid{gap:4px}.pattern-grid button span{font-size:10px;top:5px;left:6px}.pattern-grid button{border-radius:10px}}.beats-board{position:relative;width:100%;aspect-ratio:1;max-width:660px;margin:auto;overflow:hidden;border-radius:32px;background:radial-gradient(circle,#73448a 0,#342047 48%,#171324 75%);border:1px solid #aa80b655;isolation:isolate}.beats-ring{position:absolute;inset:14%;border:3px solid #ffcf91;border-radius:50%;box-shadow:0 0 25px #f09bce55,inset 0 0 25px #f09bce33}.beats-dog{position:absolute;left:50%;top:50%;width:32%;height:40%;object-fit:contain;pointer-events:none}.beats-pad{position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #ffcf91;border-radius:50%;background:#33243f;color:#ffead1;font-size:clamp(20px,4vw,34px);touch-action:none;z-index:2}.beats-pad:hover{transform:translate(-50%,-50%)}.beats-pad{padding:0;display:grid;place-items:center}.beats-pad.pressed{background:#90705a;box-shadow:0 0 25px #ffcf91}.beats-notes{position:absolute;inset:0;pointer-events:none;z-index:3}.beats-note{position:absolute;display:grid;place-items:center;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #112d2a;border-radius:50%;background:#a7f0d8;color:#182e29;font-size:clamp(12px,3vw,24px)}.beats-note.long{background:#ffcf91;border-radius:8px}.beats-note.holding{box-shadow:0 0 20px #ffcf91;border:3px solid white}.beats-cover{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#171324cc;font-size:clamp(24px,4vw,40px);text-align:center;padding:20px;pointer-events:none}.beats-cover[hidden]{display:none}.beats-note.holding i{position:absolute;bottom:-10px;left:0;height:5px;border-radius:3px;background:#fff}.howl-stage{position:relative;aspect-ratio:1.3;background:radial-gradient(ellipse at 50% 80%,#ad637b,#332047 65%,#171324);border:1px solid #aa80b655;border-radius:28px;overflow:hidden;isolation:isolate}.howl-spotlight{position:absolute;inset:0 15% 20%;background:linear-gradient(#ffe4ad30,#ffe4ad08);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}.howl-owner{margin:0 0 12px;padding:12px 18px;text-align:center;color:#ffead1;font-style:italic;line-height:1.5;background:#ffffff08;border-radius:16px}.howl-dog{position:absolute;left:50%;bottom:23%;width:45%;height:52%;object-fit:contain;transform-origin:bottom center}.howl-caption{position:absolute;top:20%;left:0;right:0;text-align:center;font-size:clamp(22px,4vw,36px);font-weight:800;color:#ffcf91}.howl-caption.singing{color:#a7f0d8}.howl-track{position:absolute;bottom:7%;left:4%;right:4%;height:12%;background:#140f23cc;border-radius:12px;overflow:hidden}.howl-line{position:absolute;top:0;bottom:0;left:25%;width:3px;background:#ffcf91;z-index:2;box-shadow:0 0 12px #ffcf91}.howl-note{position:absolute;top:20%;height:60%;border-radius:12px;background:#ffcf91;color:#2b1a36;font-size:clamp(10px,2vw,16px);white-space:nowrap;overflow:hidden;padding:3px 6px;border:2px solid #fff1ce;box-sizing:border-box}.howl-note.singing{background:#a7f0d8}.howl-pad{width:100%;min-height:66px;margin-top:14px;border:2px solid #ffcf91;border-radius:18px;background:#382646;color:#ffead1;font-size:20px;font-weight:800;touch-action:none}.howl-pad.pressed{background:#79604e;box-shadow:0 0 18px #ffcf9155}.howl-pad:disabled{opacity:.5}.howl-cover{position:absolute;inset:0;display:grid;place-items:center;background:#171324cc;z-index:3;text-align:center;font-size:clamp(24px,4vw,40px);padding:20px}.howl-cover[hidden]{display:none}.souvenirs{margin-top:32px}.souvenirs .hint{text-align:left;margin:10px 0 18px}.souvenir-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:0;list-style:none}.souvenir{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;text-align:center;border:1px dashed #776781;border-radius:18px;background:#ffffff04;color:#b2a7b9}.souvenir>span{font-size:36px;filter:grayscale(1);opacity:.35}.souvenir.earned{border:1px solid #e4b476;background:#e4b47612;color:#ffead1}.souvenir.earned>span{filter:none;opacity:1}.souvenir strong{font-size:13px}.souvenir small{font-size:11px}.reward-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:30;display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 32px);padding:14px 18px;border:1px solid #ffcf91;border-radius:18px;background:#34243e;box-shadow:0 8px 40px #0008;color:#ffead1}.reward-toast button{min-width:44px;min-height:44px;font-size:24px;flex-shrink:0}@media(max-width:650px){.souvenir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.toolbar button,.language-picker{min-width:44px;min-height:44px}.moves button,.fetch-toys button{min-height:44px;font-size:12px}.switch{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px}.switch input{width:20px;height:20px;flex-shrink:0}.activity-name,.souvenir strong{overflow-wrap:anywhere}.howl-owner{font-size:13px}}@media(prefers-reduced-motion:reduce){button{transition:none}button:hover{transform:none}.beats-pad:hover{transform:translate(-50%,-50%)}}:root:fullscreen{overflow:auto;background:#170e28}#screen-message{margin:0 16px 12px;color:#ffd49a}@media(max-width:500px){header{flex-wrap:wrap}.toolbar{margin-left:auto}}.toy-style{display:grid;gap:10px;max-width:520px;color:#ffead1}.toy-style select{padding:12px;background:#32213e;border:1px solid #ffffff35;border-radius:12px;min-width:0;width:100%}.toy-style small{line-height:1.5;color:#c2a9cc}.costume-choice{display:flex;align-items:center;gap:20px;max-width:520px;margin-top:24px;padding:16px;border:1px solid #ffffff25;border-radius:18px}.costume-choice img{width:100px;height:135px;object-fit:contain;flex-shrink:0}.costume-choice p{font-size:12px;line-height:1.6;color:#c2a9cc}.costume-choice .switch{font-size:14px}:root:fullscreen header{position:sticky;top:0;z-index:100;background:#21142ef5;box-shadow:0 3px 15px #0004}:root:fullscreen #fullscreen{background:#ffd49a;color:#39263b;font-weight:800;min-height:44px}.stages{display:grid;gap:6px}.stage-btn{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;text-align:left;padding:9px 12px;border-radius:12px;background:#2a1b38;font-size:13px}.stage-btn.active{background:#ffd49a;color:#39263b}.stage-btn:disabled{opacity:.45;cursor:not-allowed}.stage-num{font-weight:900;font-size:16px}.stage-stars{color:#ffcf5a;letter-spacing:1px}.stage-btn.active .stage-stars{color:#b0661c}.stage-hint{text-align:left;margin:6px 0 0}.result-stars{font-size:52px;color:#ffcf5a;letter-spacing:6px;text-shadow:0 0 24px #ffb34799}.result-best{color:#7dff8a!important;font-weight:900;letter-spacing:2px}.result-best:empty{display:none}.overlay-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.overlay-actions [hidden]{display:none}@media(max-width:700px){.result-stars{font-size:30px}}.fetch-stage{position:relative;border-radius:24px;overflow:hidden}.fetch-stage #fetch-field{border-radius:24px}#fullscreen[aria-pressed=true]{position:fixed;top:12px;right:12px;z-index:1000;background:#ffd49a;color:#39263b;font-weight:900;padding:10px 16px;border-radius:999px;box-shadow:0 6px 20px #0008}button{background:linear-gradient(180deg,#ffffff12,#ffffff06);box-shadow:inset 0 1px #ffffff1c,0 2px 8px #0002}button:active{transform:translateY(0) scale(.97)}.primary{background:linear-gradient(180deg,#ffe2b4,#f7c487);box-shadow:inset 0 1px #fff8,0 6px 18px #f7c48740}.primary:hover{background:linear-gradient(180deg,#ffecc9,#ffd09a)}.rail{background:linear-gradient(180deg,#ffffff0c,#ffffff04);box-shadow:inset 0 1px #ffffff14,0 18px 50px #0003;gap:14px}.stage-wrap{border-color:#b48cc055;box-shadow:0 30px 90px #0006,0 0 0 1px #ffffff0a inset,0 0 60px #a756ca22}.dog-card.active{background:linear-gradient(180deg,#ffcd922e,#ffcd9214);box-shadow:0 0 0 1px #efc38d,0 8px 24px #efc38d22}.controls button{background:linear-gradient(180deg,#3a2749,#2c1d38);border-top:3px solid var(--lane,#ffffff30)}.controls button:nth-child(1){--lane:#ff6fb5}.controls button:nth-child(2){--lane:#4fd8ff}.controls button:nth-child(3){--lane:#7dff8a}.controls button:nth-child(4){--lane:#ffd84f}.controls button:nth-child(5){--lane:#ffb347}.controls button.pressed{background:var(--lane,#ce8bba);color:#1b1226}.stage-btn{box-shadow:inset 0 1px #ffffff12}.stage-btn.active{background:linear-gradient(180deg,#ffe2b4,#f7c487);box-shadow:0 6px 18px #f7c48733}button{--edge:#120a1c;background:linear-gradient(180deg,#4a3560,#33234a 55%,#2a1c3d);border:1px solid #ffffff1f;border-bottom-color:#00000040;box-shadow:inset 0 1px #fff3,inset 0 -2px #00000030,0 5px 0 var(--edge),0 8px 16px #0006;transform:translateY(0);transition:transform .08s,box-shadow .08s,background .15s}button:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff40,inset 0 -2px #00000030,0 6px 0 var(--edge),0 10px 18px #0006}button:active,button.pressed{transform:translateY(4px);box-shadow:inset 0 1px #ffffff26,inset 0 2px 6px #00000040,0 1px 0 var(--edge),0 2px 6px #0005}button:disabled{transform:none}.primary{--edge:#a86f2e;background:linear-gradient(180deg,#fff0d2,#ffd49a,#f2b56c);color:#3a2338;border-color:#fff6;box-shadow:inset 0 1px #fff,inset 0 -3px #d99a4f80,0 5px 0 var(--edge),0 9px 18px #f7c48740}.primary:hover{background:linear-gradient(180deg,#fff6e4,#ffdcab,#f6be7a)}.controls button{--edge:color-mix(in srgb,var(--lane,#5a4570) 45%,#0e0718);background:linear-gradient(180deg,color-mix(in srgb,var(--lane,#5a4570) 42%,#3b2850),color-mix(in srgb,var(--lane,#5a4570) 22%,#2b1c3c) 60%,#24182f);border:1px solid color-mix(in srgb,var(--lane,#fff) 45%,transparent);border-top:1px solid color-mix(in srgb,var(--lane,#fff) 70%,#fff);box-shadow:inset 0 2px #ffffff30,inset 0 -3px #00000035,0 7px 0 var(--edge),0 11px 18px #0007;padding:15px 4px 13px}.controls button.pressed,.controls button:active{background:linear-gradient(180deg,color-mix(in srgb,var(--lane,#ce8bba) 85%,#fff) 0%,var(--lane,#ce8bba) 100%);color:#1b1226;transform:translateY(6px);box-shadow:inset 0 2px 8px #00000030,0 1px 0 var(--edge),0 0 22px color-mix(in srgb,var(--lane,#ce8bba) 70%,transparent)}.toolbar button{--edge:#0f0818}.stage-btn.active{--edge:#a86f2e}.dog-card.active{--edge:#8a5a2a}