:root{--bg:#fff8ec;--card:#fff;--ink:#3b2f22;--muted:#9c8f7e;--accent:#5e9e4f;--accent-ink:#fff;--accent-soft:#e4f1dd;--line:#eadfcc;--shadow:0 6px 0 #00000014, 0 10px 24px #00000014;--scrim:#281e1473;--sq-light:#f7e7c6;--sq-dark:#5e9e4f;--sq-selected:#ffd54a;--sq-last:#ffd54a73;--danger:#e53935;--move-dot:#1e281e59;--capture-ring:#e8553a;--guide:#ff8a00;--star:#ffc107;--star-off:#e2d8c6;--ring:var(--accent);--touch:64px;--gap:16px;--radius:24px;--radius-board:12px;--font:22px;--font-big:30px;--font-huge:72px;--bar-h:88px;--avatar:200px;--avatar-card:120px;--tag-h:56px}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--bg);height:100%;color:var(--ink);font:600 var(--font)/1.4 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;margin:0;overflow:hidden}#app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex}main{align-items:center;gap:var(--gap);min-height:0;padding:var(--gap);flex-direction:column;flex:1;display:flex}h1,h2,p{text-align:center;margin:0}h1,h2{font-size:var(--font-big)}.hint{color:var(--muted)}.row{gap:var(--gap);flex-wrap:wrap;justify-content:center;display:flex}.btn{min-width:var(--touch);min-height:var(--touch);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font:inherit;box-shadow:var(--shadow);cursor:pointer;border:0;padding:0 28px}.btn:active{box-shadow:none;transform:translateY(3px)}.btn:disabled{background:var(--line);color:var(--muted);box-shadow:none}.btn.ghost{color:var(--muted);box-shadow:none;background:0 0}.btn.icon{width:var(--touch);background:var(--card);color:var(--ink);font-size:var(--font-big);padding:0}.btn.big{min-height:120px;font-size:var(--font-big);padding:0 48px}.btn.big span{align-items:center;gap:var(--gap);display:flex}.menu-icon{width:72px;height:72px}.bar{height:var(--bar-h);grid-template-columns:var(--touch) 1fr var(--touch);align-items:center;gap:var(--gap);padding:0 var(--gap);flex:none;display:grid}.bar h1{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.avatar{width:var(--avatar);height:var(--avatar);flex:none;position:relative}.holding{transition:transform var(--parentHoldMs) linear;transform:scale(.85)}.avatar-face{border:calc(var(--avatar) / 20) solid var(--ring);background:var(--card);width:100%;height:100%;font-size:calc(var(--avatar) * .36);border-radius:50%;place-items:center;display:grid;overflow:hidden}.avatar-face img{object-fit:cover;width:100%;height:100%;display:block}.avatar-badge{font-size:calc(var(--avatar) * .28);line-height:1;position:absolute;bottom:0;right:0}.card .avatar{--avatar:var(--avatar-card)}.avatar.crowned{margin-top:calc(var(--avatar) * .3)}.crown{font-size:calc(var(--avatar) * .5);animation:crown-drop var(--crownMs) ease-out calc(2 * var(--staggerMs)) both;line-height:1;position:absolute;top:0;left:50%;translate:-50% -62%}@keyframes crown-drop{0%{opacity:0;transform:translateY(-120%)rotate(-20deg)}to{opacity:1;transform:none}}.tag{height:var(--tag-h);font-size:var(--font-big);align-items:center;gap:12px;display:flex}.tag .avatar{--avatar:var(--tag-h)}.tag .face{font-size:calc(var(--tag-h) * .8);line-height:1}.mute{right:calc(var(--gap) + env(safe-area-inset-right));bottom:calc(var(--gap) + env(safe-area-inset-bottom));z-index:11;position:fixed}.home{justify-content:center}.menu{gap:var(--gap);grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;width:100%;display:grid}.menu .btn.big{padding:0 24px}.menu-emoji{text-align:center;width:72px;font-size:56px}.sticker-book{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));width:100%;max-width:720px;display:grid}.slot{aspect-ratio:1;border-radius:var(--radius);background:var(--line);color:var(--muted);place-items:center;font-size:48px;display:grid}.slot.on{background:var(--card);box-shadow:var(--shadow);font-size:64px}.setup{justify-content:center;width:100%;max-width:640px;margin:0 auto}.name-input{width:100%;min-height:var(--touch);border:3px solid var(--line);border-radius:var(--radius);font:inherit;font-size:var(--font-big);text-align:center;-webkit-user-select:text;user-select:text;padding:0 20px}.choices{gap:var(--gap);grid-template-columns:repeat(4,1fr);display:grid}.btn.choice{background:var(--card);width:96px;height:96px;color:var(--ink);border-radius:50%;padding:0;font-size:56px}.crop-wrap{aspect-ratio:1;width:min(70vw,50dvh)}.crop{background:var(--line);touch-action:none;border-radius:50%;width:100%;height:100%;display:block}.learn{justify-content:flex-start;overflow-y:auto}.course{flex-direction:column;gap:12px;width:100%;max-width:720px;display:flex}.course-head{font-size:var(--font-big);align-items:center;gap:12px;display:flex}.course-icon{width:64px;height:64px}.stages{gap:var(--gap);flex-wrap:wrap;display:flex}.btn.stage{background:var(--card);width:96px;height:96px;color:var(--ink);font-size:var(--font-big);padding:0}.btn.stage:disabled{background:var(--line)}.btn.stage span{flex-direction:column;align-items:center;line-height:1.1;display:flex}.btn.stage small{color:var(--star);min-height:20px;font-size:18px}.stage{justify-content:center}.board{--size:min(calc(100vw - 2 * var(--gap) - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(100dvh - var(--bar-h) - 2 * var(--gap) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));width:var(--size);height:var(--size);border-radius:var(--radius-board);box-shadow:var(--shadow);grid-template:repeat(8,1fr)/repeat(8,1fr);display:grid;position:relative;overflow:hidden;container-type:size}.cell{place-items:center;display:grid;position:relative}.cell>*{grid-area:1/1}.cell.light{background:var(--sq-light)}.cell.dark{background:var(--sq-dark)}.cell.selected{background:var(--sq-selected)}.cell.last{box-shadow:inset 0 0 0 100cqw var(--sq-last)}.cell.danger:before{content:"";border:.8cqw solid var(--danger);z-index:2;pointer-events:none;border-radius:18%;position:absolute;inset:4%}.piece{z-index:1;pointer-events:none;width:100%;height:100%;position:relative}.token{pointer-events:none;font-size:8cqw;line-height:1}.dot{background:var(--move-dot);pointer-events:none;border-radius:50%;width:34%;height:34%}.ring{border:1cqw solid var(--capture-ring);z-index:2;pointer-events:none;border-radius:50%;width:92%;height:92%}.demo .dot,.demo .ring{animation:pop var(--popMs) ease-out both}.guide{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0}.guide line{stroke:var(--guide);stroke-width:.18px;stroke-linecap:round;opacity:.85}.guide-head{fill:var(--guide)}.play{justify-content:center}.play .board{--size:min(calc(100vw - 2 * var(--gap) - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(100dvh - var(--bar-h) - 2 * var(--tag-h) - 4 * var(--gap) - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}@media (orientation:landscape){.play{flex-direction:row}.play .tag{text-align:center;flex-direction:column;width:120px;height:auto}.play .board{--size:min(calc(100vw - 2 * 120px - 4 * var(--gap) - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(100dvh - var(--bar-h) - 2 * var(--gap) - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}}.parent{width:100%;max-width:720px;padding-bottom:calc(var(--touch) + 2 * var(--gap));align-items:stretch;margin:0 auto;overflow-y:auto}.parent h2{text-align:left;margin-top:12px}.setting{flex-direction:column;gap:8px;display:flex}.choice-row{flex-wrap:wrap;gap:8px;display:flex}.choice-row .btn{padding:0 20px}.btn.danger{background:var(--danger)}.voice-list{flex-direction:column;gap:12px;display:flex}.voice-row{border-bottom:2px solid var(--line);align-items:center;gap:8px;padding-bottom:12px;display:flex}.voice-row p{text-align:left;flex:1}.overlay.timeup{z-index:12}.btn.opponent.pick{box-shadow:0 0 0 6px var(--accent), var(--shadow)}.certificate{justify-content:center}.cert{object-fit:contain;flex:1 1 0;width:100%;min-height:0}.play-setup{justify-content:center}.btn.off{background:var(--card);color:var(--muted)}.opponents{gap:var(--gap);flex-wrap:wrap;justify-content:center;display:flex}.btn.opponent{background:var(--card);width:180px;height:180px;color:var(--ink);font-size:var(--font-big);padding:0}.btn.opponent span{flex-direction:column;align-items:center;display:flex}.face{font-size:var(--font-huge);line-height:1.2}.toast{top:calc(env(safe-area-inset-top) + var(--bar-h));z-index:9;border-radius:var(--radius);background:var(--danger);color:var(--accent-ink);font-size:var(--font-big);box-shadow:var(--shadow);pointer-events:none;white-space:nowrap;padding:12px 28px;position:fixed;left:50%;translate:-50%}.result{font-size:120px;line-height:1}.overlay{z-index:10;background:var(--scrim);padding:var(--gap);place-items:center;display:grid;position:fixed;inset:0}.card{background:var(--card);border-radius:var(--radius);align-items:center;gap:var(--gap);max-width:560px;box-shadow:var(--shadow);flex-direction:column;padding:32px;display:flex}.say{font-size:var(--font-big)}.intro-piece{width:140px;height:140px}.stars{font-size:var(--font-huge);gap:8px;line-height:1;display:flex}.star{color:var(--star-off)}.star.on{color:var(--star);animation:pop var(--popMs) ease-out both}.sticker{animation-delay:calc(4 * var(--staggerMs));font-size:96px;line-height:1}.pop{animation:pop var(--popMs) ease-out both}@keyframes pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.15)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}