: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;--tag-w:120px;--menu-h:120px;--menu-icon:72px;--choice:96px;--intro-piece:140px;--sticker:96px;--card-pad:32px}@media (width<=500px),(height<=500px){:root{--gap:12px;--font:20px;--font-big:24px;--font-huge:56px;--bar-h:72px;--avatar:160px;--avatar-card:96px;--menu-h:96px;--menu-icon:56px;--choice:72px;--intro-piece:100px;--sticker:72px;--card-pad:20px}}@media (height<=500px){:root{--bar-w:calc(var(--touch) + 2 * var(--gap));--avatar:120px;--avatar-card:80px;--intro-piece:72px;--sticker: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;overflow-y:auto}.home,.setup,.stage,.play,.certificate,.play-setup{justify-content:safe center}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:var(--menu-h);font-size:var(--font-big);padding:0 48px}.btn.big span{align-items:center;gap:var(--gap);display:flex}.menu-icon{width:var(--menu-icon);height:var(--menu-icon)}.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}.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{font-size:calc(var(--menu-icon) * .78);width:var(--menu-icon);text-align:center}.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{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{width:var(--choice);height:var(--choice);background:var(--card);color:var(--ink);font-size:calc(var(--choice) * .58);border-radius:50%;padding:0}.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{padding-bottom:calc(var(--touch) + 2 * var(--gap));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,.play{overflow:visible}.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 .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{height:auto;width:var(--tag-w);text-align:center;flex-direction:column}.play .board{--size:min(calc(100vw - 2 * var(--tag-w) - 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)}.cert{object-fit:contain;flex:1 1 0;width:100%;min-height:0}.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);display:flex;position:fixed;inset:0;overflow-y:auto}.card{background:var(--card);border-radius:var(--radius);padding:var(--card-pad);align-items:center;gap:var(--gap);max-width:560px;box-shadow:var(--shadow);flex-direction:column;margin:auto;display:flex}.say{font-size:var(--font-big)}.intro-piece{width:var(--intro-piece);height:var(--intro-piece)}.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{font-size:var(--sticker);animation-delay:calc(4 * var(--staggerMs));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 (width<=500px),(height<=500px){.menu .btn.big{padding:0 var(--gap)}.btn.big span{flex-direction:column;gap:0;line-height:1.2}}@media (height<=500px){#app{flex-direction:row}.bar{width:var(--bar-w);grid-template:var(--touch) minmax(0, 1fr) var(--touch) / var(--touch);height:auto;padding:var(--gap)}.bar h1{writing-mode:vertical-rl;place-self:center;max-height:100%}.bar-right{flex-direction:column-reverse;justify-content:flex-start;display:flex}.board{--size:min(calc(100vw - var(--bar-w) - 2 * var(--gap) - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(100dvh - 2 * var(--gap) - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}.play .board{--size:min(calc(100vw - var(--bar-w) - 2 * var(--tag-w) - 4 * var(--gap) - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(100dvh - 2 * var(--gap) - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}.toast{top:calc(env(safe-area-inset-top) + var(--gap))}.home{place-content:center;place-items:center;column-gap:calc(2 * var(--gap));grid-template-columns:auto auto;display:grid}.home .avatar{grid-area:1/1;align-self:end}.home .say{grid-area:2/1;align-self:start}.home .menu{grid-area:1/2/3/3;grid-template-columns:repeat(2,auto);width:auto}.setup{max-width:none}.choices{grid-template-columns:repeat(8,1fr)}.card{grid-auto-flow:dense;grid-template-columns:auto auto;place-items:center;max-width:none;display:grid}.card>*{grid-column:2}.card>.avatar,.card>.intro-piece,.card>.stars,.card>.sticker,.card>.result{grid-column:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}