@layer components{.screen.cp-stage{padding:10px 12px max(12px, env(safe-area-inset-bottom));color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(90% 70% at 50% 45%,#2b2620 0%,#17130f 62%,#0c0a08 100%);gap:8px;container-type:size}.cp-seats{flex:none;grid-template-columns:1fr 1fr;gap:8px;display:grid}.cp-seat{background:#ffffff0d;border-radius:14px;grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 8px;padding:6px 8px;transition:box-shadow .2s,background .2s;display:grid;box-shadow:inset 0 0 0 1.5px #ffffff0f}.cp-seat.is-turn{box-shadow:inset 0 0 0 2px var(--rn);background:#cdf24a1a}.cp-seat.is-win{box-shadow:inset 0 0 0 2px var(--rn);background:#cdf24a2e}.cp-avatar{background:linear-gradient(160deg,#3c342c,#201b16);border-radius:11px;grid-row:span 2;place-items:center;width:34px;height:34px;display:grid;box-shadow:inset 0 0 0 1.5px #ffffff1a}.cp-avatar svg{width:28px;height:28px}.cp-seat-text{align-items:baseline;gap:6px;min-width:0;line-height:1.1;display:flex}.cp-seat-text b{white-space:nowrap;font-size:15px;font-weight:750}.cp-seat-text small{color:#ffffff8c;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.cp-rack{gap:2px;min-width:0;display:flex}.cp-mini{--c:#888;background:radial-gradient(circle at 35% 30%, #ffffff8c, transparent 42%), var(--c);border-radius:50%;flex:none;width:14px;height:14px;font-style:normal;transition:opacity .3s,transform .3s;display:block;position:relative;box-shadow:inset 0 -2px 2px #0000004d}.cp-mini.is-stripe{background:radial-gradient(circle at 35% 30%, #ffffff8c, transparent 42%), linear-gradient(180deg, #f6f1e4 0 26%, var(--c) 26% 74%, #f6f1e4 74%)}.cp-mini.is-down{opacity:.18;transform:scale(.8)}.cp-mini.is-empty{background:#ffffff14;box-shadow:inset 0 0 0 1.5px #ffffff1a}.cp-mini.is-eight{box-shadow:0 0 0 2px var(--rn);margin-left:3px;animation:1.4s ease-in-out infinite cp-pulse}@keyframes cp-pulse{50%{box-shadow:0 0 0 4px #cdf24a66}}.cp-dots{gap:3px;display:inline-flex}.cp-dots i{background:#fffc;border-radius:50%;width:4px;height:4px;animation:.9s ease-in-out infinite cp-type}.cp-dots i:nth-child(2){animation-delay:.12s}.cp-dots i:nth-child(3){animation-delay:.24s}@keyframes cp-type{30%{opacity:1;translate:0 -3px}0%,60%,to{opacity:.4}}.cp-note{text-align:center;color:#ffffffe0;background:#ffffff0a;border-radius:12px;flex:none;place-items:center;min-height:40px;padding:0 10px;font-size:14.5px;font-weight:650;line-height:1.2;display:grid}.cp-note.is-foul{color:#ffd2cc;background:#ff5a4624}.cp-note.is-win{color:#0d0d0f;background:var(--rn)}.cp-levels{background:#ffffff12;border-radius:13px;flex:none;gap:3px;height:40px;padding:3px;display:flex;box-shadow:inset 0 0 0 1.5px #ffffff14}.cp-level{color:#ffffffb3;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:4px;font-size:14px;font-weight:650;transition:background .16s,color .16s;display:inline-flex}.cp-level svg{color:#f3c64b;width:13px;height:13px}.cp-level.is-on{color:#0d0d0f;background:var(--rn);box-shadow:inset 0 -2px #465c0066}.cp-level.is-on svg{color:#6b4d00}.cp-level:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.cp-play{flex:1;gap:8px;min-height:0;display:flex}.cp-table{flex:1;min-width:0;position:relative}.cp-canvas{touch-action:none;cursor:crosshair;border-radius:14px;width:100%;height:100%;display:block}.cp-canvas:focus{outline:none}.cp-canvas:focus-visible{box-shadow:inset 0 0 0 2px #cdf24a59}.cp-end{pointer-events:none;place-items:center;animation:.42s cubic-bezier(.34,1.56,.64,1) both cp-end-in;display:grid;position:absolute;inset:0}.cp-end b{letter-spacing:-.03em;color:#fff;background:#0c0a08d1;border-radius:18px;padding:12px 22px;font-size:30px;font-weight:800;box-shadow:0 18px 40px -10px #000000b3}.cp-end.is-win b{color:#0d0d0f;background:var(--rn)}@keyframes cp-end-in{0%{opacity:0;scale:.8}}.cp-side{flex-direction:column;flex:none;align-items:center;gap:6px;width:50px;display:flex}.cp-spin{touch-action:none;background:radial-gradient(circle at 38% 32%,#fff 0%,#f2ecdd 40%,#c9c0ab 100%);border-radius:50%;flex:none;width:46px;height:46px;position:relative;box-shadow:0 4px 10px #0006}.cp-spin:before,.cp-spin:after{content:"";background:#00000026;width:1px;height:30%;position:absolute;left:50%;translate:-50%}.cp-spin:before{top:8%}.cp-spin:after{bottom:8%}.cp-spin i{width:11px;height:11px;translate:-50% calc(-50% + var(--sy,0%) * 1.6);background:#d63b2f;border-radius:50%;transition:translate .14s cubic-bezier(.22,1,.36,1);position:absolute;top:50%;left:50%;box-shadow:0 0 0 2px #fffc}.cp-spin:disabled{opacity:.45}.cp-spin:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.cp-side-label{color:#ffffff8c;font-size:11px;font-weight:700}.cp-power{touch-action:none;cursor:ns-resize;opacity:.45;background:linear-gradient(#ffffff0a,#ffffff17);border-radius:14px;flex:1;width:40px;max-height:340px;margin-top:4px;transition:opacity .2s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px #ffffff1a}.cp-power.is-live{opacity:1}.cp-power-fill{height:calc(var(--p) * 100%);opacity:.9;background:linear-gradient(#cdf24a,#f3c64b 55%,#ff6b4a);position:absolute;inset:0 0 auto}.cp-power-stick{left:50%;top:calc(var(--p) * 92% - 70%);background:linear-gradient(#4a220e 0%,#7a3b1c 30%,#1d1d22 31% 38%,#d0a467 39%,#e9d2a6 97%,#f7f2e6 97%);border-radius:4px;width:8px;height:76%;position:absolute;translate:-50%;box-shadow:0 4px 8px #0006}.cp-power em{text-align:center;color:#fffc;text-shadow:0 1px 3px #0009;font-size:11px;font-style:normal;font-weight:800;position:absolute;bottom:8px;left:0;right:0}.cp-sum{align-items:center;gap:10px;display:flex}.cp-sum .cp-mini{width:22px;height:22px;animation:none}.cp-sum p{font-size:14px}@container (min-width:700px){.cp-seats{width:min(100%,720px);margin:0 auto}.cp-note,.cp-levels{width:min(100%,520px);margin:0 auto}.cp-side{justify-content:center;width:58px}.cp-power{flex:none;height:min(70%,300px)}}@media (prefers-reduced-motion:reduce){.cp-mini.is-eight,.cp-dots i,.cp-end{animation:none}}}