@font-face{font-family:DM;src:url('fonts/dm-sans.ttf');font-display:swap}
:root{--ink:#284e59;--muted:#68858a;--accent:#ff8266;--accent-dark:#d85d49;--mint:#38b8b5;--mint-dark:#258f98;--sky:#ddf6f2;--cream:#fffdf2}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:DM,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:#c8e6e4;background-image:linear-gradient(135deg,#b5e5df,#f2e7ce)}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #277787;outline-offset:3px}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
#party-app{position:relative;isolation:isolate;height:100dvh;max-width:480px;margin:auto;display:grid;grid-template-rows:54px 64px 44px minmax(0,1fr) 84px 50px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background:var(--sky)}
.scene-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#fffdf2 0, #fffdf2 17%,var(--sky) 46%,var(--sky) 86%,#fffdf2 87%)}
.party-header{display:flex;align-items:center;justify-content:space-between;padding:6px 18px;gap:12px}.icon{display:grid;place-items:center;width:40px;height:40px;border-radius:15px;background:#fffef8;border:2px solid #fff;box-shadow:0 3px 0 #bedcda;flex-shrink:0;color:#4b7a82;text-decoration:none}.icon svg{width:20px;height:20px}.header-tools{display:flex;gap:8px}.title{flex:1;white-space:nowrap}.title small{display:none}.title h1{font-size:22px;letter-spacing:-1px;margin:0;font-weight:900;color:#339caa;text-shadow:0 2px #fff}.title h1 span{color:#f27a60}.icon[aria-pressed=false] svg{opacity:.4}
.scoreboard{margin:0 22px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:42px 22px;align-items:center;gap:0 8px}.score-main{display:flex;align-items:center;gap:8px;grid-column:1;grid-row:1}.score-main small{font-size:10px;line-height:1.2;width:22px;color:#617b7b}.score-main strong{font-size:34px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-1px}.best{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:6px}.best small{font-size:0}.best svg{width:19px;height:19px;fill:#ffe4a4;stroke:#c99b3c}.best strong{font-size:17px;font-weight:800;color:#8a764e;font-variant-numeric:tabular-nums}
#scene{grid-column:3;grid-row:1;justify-self:end;background:#fff;display:flex;align-items:center;gap:4px;border:1px solid #d8e9e4;border-radius:13px;padding:7px 8px;min-height:36px;white-space:nowrap}.scene-emblem{color:#45a5a1}.scene-emblem svg{width:14px;height:14px}#scene small{font-size:10px;font-weight:700}.scene-chevron{font-size:12px;color:#6d8c8e}
.chapter{grid-column:1/-1;position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;margin-top:2px}.chapter>span,.chapter p{font-size:10px;margin:0;color:#5b7b7f}.progress{position:absolute;bottom:0;left:0;right:0;height:5px;border-radius:4px;overflow:hidden;background:#d8ebe4}.progress i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffc46e,#ff8d68);transition:width .3s ease}
.queue{display:flex;align-items:center;justify-content:space-between;margin:3px 22px 0;gap:8px}.current{display:flex;align-items:center;gap:6px}.current canvas{width:48px;height:34px}.current>div{display:flex;flex-direction:column;gap:2px}.current span{font-size:8px;color:#69898a;letter-spacing:1px}.current strong{font-size:11px;font-weight:700}.queue-stitches{display:none}.next{display:flex;align-items:center;gap:6px;border-radius:14px;background:#ffffffb8;padding:0 6px 0 10px}.next>span{font-size:10px;color:#648487}.next canvas{width:82px;height:39px}
.board{min-height:0;position:relative;overflow:hidden}.board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
#instruction{position:absolute;bottom:0;left:10px;right:10px;text-align:center;font-size:10px;line-height:20px;color:#547e83;margin:0;pointer-events:none}#notice{position:absolute;top:68px;left:34px;right:34px;text-align:center;font-size:11px;line-height:1.6;color:#46666c;pointer-events:none;margin:0;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .2s;background:#fffef6ed;border:1px solid #fff;border-radius:16px;padding:7px 12px;box-shadow:0 5px 15px #235b6510;z-index:2}#notice.visible{opacity:1;transform:translateY(0)}#loading{position:absolute;inset:0;background:var(--sky);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;font-size:13px}.loading-flower{font-size:37px;color:#ff956d}
.controls{display:grid;grid-template-columns:70px minmax(110px,1fr) 70px;gap:16px;align-items:center;padding:9px 22px 7px;position:relative;background:#fffdf2;border-radius:28px 28px 0 0;box-shadow:0 -3px 0 #ffffff88}.controls>button{background:transparent;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:0;min-height:60px}.tool-face{width:54px;height:40px;display:grid;place-items:center;position:relative;border:2px solid #fff;border-radius:15px;background:linear-gradient(#def5f1,#bee5e1);box-shadow:0 3px 0 #89c5c6}.controls small,#reserve-label{font-size:10px;line-height:1;color:#5f8081;white-space:nowrap}#reserve canvas{width:45px;height:36px}#reserve.used .tool-face{background:#e5ece7;box-shadow:0 2px 0 #c4d4ce}#reserve:disabled canvas{opacity:.6}#drop{min-height:54px;height:54px;align-self:center;margin-bottom:9px;background:linear-gradient(#ff9d76,#ff7e65);color:#fff;border:2px solid #ffb499;border-radius:20px;box-shadow:inset 0 2px #ffd2b888,0 5px 0 #d86350,0 8px 12px #e9987b25;flex-direction:row;gap:9px;font-size:18px;font-weight:800;letter-spacing:1px;text-shadow:0 1px #d5654d}#drop svg{width:22px;height:22px;stroke-width:2.5}#drop:active:not(:disabled){box-shadow:0 2px 0 #d86350;transform:translateY(3px)}#drop:disabled{filter:saturate(.6);opacity:.75}
#paw .tool-face{background:linear-gradient(#ffe4a2,#ffd277);box-shadow:0 3px 0 #dfae58;color:#b87935}#paw svg{width:27px;height:27px;fill:currentColor;stroke:none;margin-right:3px}#charge{position:absolute;right:-7px;top:-6px;padding:3px 5px;background:#fffdf1;border:1px solid #f0cb87;border-radius:9px;font-size:9px;font-weight:800;color:#996e39;font-variant-numeric:tabular-nums}#paw:disabled svg{opacity:.6}#paw[aria-pressed=true] .tool-face{outline:3px solid #e39c3f;outline-offset:3px}#paw:not(:disabled) .tool-face{box-shadow:0 3px 0 #dfae58,0 0 0 4px #ffe9ab}
.ad-space{display:grid;place-items:center;background:#f2f2e8;border-top:1px solid #e8ebe0;color:#99aaa4;font-size:8px;letter-spacing:3px}.ad-space span{opacity:.8}
dialog{max-width:340px;width:calc(100% - 40px);max-height:92dvh;overflow:auto;border:3px solid #fff;border-radius:32px;padding:0;color:var(--ink);background:#fffdf2;box-shadow:0 8px 0 #5c929549,0 24px 90px #193e4944}dialog::backdrop{background:#29576366;backdrop-filter:blur(7px)}.dialog-inner{padding:17px 26px 20px;display:flex;flex-direction:column;gap:11px;text-align:center}#menu-art{width:100%;height:85px;object-fit:contain;margin-bottom:-10px}.eyebrow{font-size:10px;letter-spacing:2px;color:#5c999b;margin:0}.dialog-inner h2{font-size:24px;line-height:1.3;margin:4px 0;color:#2e6975}.dialog-inner>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#688185;margin:0 0 7px}.dialog-inner button{border-radius:16px;min-height:44px;background:#e4f3ec;font-size:14px;border:1px solid #d0e8df;box-shadow:0 2px 0 #b6d9d1}.dialog-inner button.primary{background:linear-gradient(#ff9c77,#ff7f67);border-color:#ffac8c;color:#fff;box-shadow:0 4px 0 #d56351;font-weight:800}.dialog-inner a{font-size:11px;color:#648387;text-decoration:none;padding:9px}.result-stats{display:flex;justify-content:space-around;padding:9px;background:#fff0ce;border-radius:17px;margin-bottom:5px}.result-stats small{display:block;font-size:10px;color:#9b834e}.result-stats strong{font-size:30px;color:#c38936}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html[data-scene=sunset]{--sky:#fff0cf;--mint:#eabf5c;--mint-dark:#c48d3c}html[data-scene=night]{--sky:#e1eaff;--mint:#8faee1;--mint-dark:#6489bf}
@media(max-width:370px){.party-header{padding-inline:14px;gap:9px}.title h1{font-size:20px}.header-tools{gap:6px}.scoreboard{margin-inline:18px}.score-main strong{font-size:29px}.score-main{gap:5px}.best{gap:3px}.best strong{font-size:14px}.best svg{width:15px}#scene{padding:6px}#scene small{font-size:9px}.scene-emblem{display:none}.queue{margin-inline:18px}.controls{padding-inline:15px;gap:11px;grid-template-columns:60px minmax(110px,1fr) 60px}#drop{font-size:16px}.controls small,#reserve-label{font-size:9px}}
@media(max-height:700px){#party-app{grid-template-rows:48px 54px 37px minmax(0,1fr) 69px 50px}.party-header{padding-block:4px}.icon{height:36px;width:36px;border-radius:13px}.scoreboard{grid-template-rows:34px 20px}.score-main strong{font-size:28px}.current canvas{width:42px;height:30px}.current strong{font-size:10px}.current span{display:none}.next canvas{height:32px;width:65px}.next>span{font-size:9px}.controls{padding-block:5px}.controls>button{min-height:54px;gap:4px}.tool-face{height:34px;width:47px}.controls #drop{height:45px;min-height:45px;font-size:15px;margin-bottom:7px}#reserve canvas{width:39px;height:30px}.dialog-inner{gap:8px;padding-top:8px}#menu-art{height:60px}.dialog-inner h2{font-size:21px}}
@media(min-width:700px) and (min-height:750px){#party-app{margin:16px auto;height:calc(100dvh - 32px);border-radius:34px;overflow:hidden;box-shadow:0 0 0 7px #ffffff66,0 20px 75px #2b68722c}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}html[data-reduced-motion=true] *,html[data-reduced-motion=true] *:before{transition:none!important;animation:none!important}
/* Scenery-led presentation: one continuous diorama behind every HUD surface. */
#party-app{background:#fff9e7}
.scene-wash{width:100%;height:100%;background:none}
.party-header{padding-top:8px}.icon{background:#fffdf0cc;border:1px solid #fffef5e6;box-shadow:0 2px 0 #b8bb974d,0 4px 10px #6d775612;color:#66846e;border-radius:14px}
.title h1{color:#497764;text-shadow:0 1px #ffffffb8}.title h1 span{color:#cf865b}
.score-main strong{color:#4c6650}.score-main small{color:#7c8769}.best strong{color:#9a8049}.best svg{stroke:#b99b5b;fill:#f9dfa6}
#scene{background:#fffdf1a8;border-color:#e8e7cf;color:#63775e;box-shadow:0 2px 5px #5f704208}.scene-emblem{color:#829967}.scene-chevron{color:#85936d}
.chapter>span,.chapter p{color:#7e8b69}.progress{background:#b9c59340;height:4px}.progress i{background:linear-gradient(90deg,#bace8a,#7eaa79)}
.current span{color:#8b8f72}.current strong{color:#69775a}.next{background:#fffdf0a3;border:1px solid #ffffff80;box-shadow:0 2px 6px #6c714408}.next>span{color:#7d876b}
#instruction{color:#637052;font-size:10px;text-shadow:0 1px 4px #fff9e2,0 0 8px #fff9e2}
#notice{background:#fffcf1ed;border-color:#fffdf2;color:#6f795b;box-shadow:0 4px 15px #62674612}
.controls{background:transparent;box-shadow:none;border-radius:0;padding-top:7px}
.tool-face{border:1px solid #fffcef;border-radius:15px;background:linear-gradient(#fffdf1ed,#e9e7cbed);box-shadow:0 3px 0 #a5aa7a66,0 5px 8px #66714913}
.controls small,#reserve-label{color:#747858;text-shadow:0 1px 3px #fff6de}
#drop{background:linear-gradient(#eda77d,#dd885f);border:1px solid #f5c69e;border-radius:19px;box-shadow:inset 0 2px #ffddb38c,0 4px 0 #b6744e,0 7px 12px #98734d28;text-shadow:0 1px #af774f;font-size:17px}
#drop:active:not(:disabled){box-shadow:0 1px 0 #b6744e}
#paw .tool-face{background:linear-gradient(#fff1c9ee,#efd398ee);box-shadow:0 3px 0 #bd9c5d7d,0 4px 9px #8b754322;color:#b58b4f}
#charge{background:#fff8e6;border-color:#dcc697;color:#957945}
.ad-space{background:#fff8e15c;border-top:1px solid #fff9e45e;color:#a89f7c;backdrop-filter:blur(4px)}
html[data-scene=night]{--ink:#57617f}
html[data-scene=night] #party-app{background:#e5e8f5}
html[data-scene=night] .icon{color:#7784a2;background:#f8f5ffe0;box-shadow:0 2px 0 #8f91b235,0 4px 8px #6870910c;border-color:#fffaff}
html[data-scene=night] .title h1,html[data-scene=night] .score-main strong{color:#697795}
html[data-scene=night] .title h1 span{color:#bf9298}
html[data-scene=night] .score-main small,html[data-scene=night] .chapter>span,html[data-scene=night] .chapter p,html[data-scene=night] .current strong,html[data-scene=night] .current span{color:#77829a}
html[data-scene=night] #scene{background:#f8f5ffb0;border-color:#c8cce0;color:#74829e}
html[data-scene=night] .scene-emblem{color:#8391b2}
html[data-scene=night] .progress{background:#a8b0cb4d}html[data-scene=night] .progress i{background:linear-gradient(90deg,#c1bad9,#8d9dc5)}
html[data-scene=night] .next{background:#f5f2ffc9;border-color:#ffffffa0}html[data-scene=night] .next>span{color:#858ba0}
html[data-scene=night] #instruction{color:#fff4dc;text-shadow:0 1px 5px #605977,0 0 4px #605977}
html[data-scene=night] .controls small,html[data-scene=night] #reserve-label{color:#756277;text-shadow:0 1px 3px #ffead7}
html[data-scene=night] .ad-space{background:#eedbe261;color:#988092;border-top-color:#fff4dd45}
html[data-scene=sunset] .progress i{background:linear-gradient(90deg,#ecc27e,#cf9e57)}
@media(max-width:370px){.title h1{font-size:20px}#drop{font-size:16px}}