.cc-table{--cc-w:min(13cqw, 4.6rem, 12.5dvh);gap:calc(var(--cc-w) * .2);touch-action:manipulation;flex-direction:column;display:flex}.cc-seats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:0;padding:0;list-style-type:none;display:grid}.cc-seat{text-align:center;border-radius:var(--radius);background:#00000029;flex-direction:column;align-items:center;gap:.1rem;padding:.35rem .25rem .4rem;transition:box-shadow .2s,background-color .2s;display:flex;position:relative;box-shadow:inset 0 0 0 1px #ffffff1a}.cc-seat.is-turn{box-shadow:inset 0 0 0 2px rgb(var(--color-mark));background:#00000042}.cc-seat.is-turn .cc-seat-glyph{animation:.9s ease-in-out infinite cc-bob}.cc-seat-glyph{font-size:clamp(1.4rem,7cqw,2.1rem);line-height:1}.cc-seat-name{font-size:.8125rem;font-weight:700}.cc-seat-fan{width:calc(.75rem + var(--n,7) * .32rem);background:repeating-linear-gradient(90deg,#fff 0 1px,#232330 1px .32rem);border-radius:3px;max-width:100%;height:1.1rem;display:block;box-shadow:0 0 0 1px #ffffffe6,0 1px 3px #0006}.cc-seat-cards,.cc-seat-score{color:#ffffffd9;font-variant-numeric:tabular-nums;font-size:.75rem}.cc-seat-shout{background:rgb(var(--color-mark));color:#181820;white-space:nowrap;border-radius:999px;padding:.1rem .35rem;font-size:.6875rem;font-weight:700;animation:.35s ease-out both cc-pop;position:absolute;top:-.55rem;right:-.2rem}.cc-seat-shout[hidden]{display:none}.cc-seat.is-forgetter{box-shadow:inset 0 0 0 2px #f87171}.cc-centre{justify-content:center;align-items:center;gap:calc(var(--cc-w) * .35);display:flex}.cc-pile{cursor:pointer;border-radius:calc(var(--cc-w) * .12);touch-action:manipulation;background-color:#0000;border-width:0;flex:none;padding:0;position:relative}.cc-pile:disabled{cursor:default}.cc-pile:not(:disabled) .ccard--back{box-shadow:inset 0 0 0 calc(var(--cc-w) * .05) #fff, 0 0 0 2px rgb(var(--color-mark) / .85), 0 4px 10px -4px #0006}.cc-pile:focus-visible{outline:3px solid rgb(var(--color-mark));outline-offset:3px}.cc-pile-count{left:50%;bottom:calc(var(--cc-w) * -.14);color:#fff;font-variant-numeric:tabular-nums;background:#000000bf;border-radius:999px;min-width:1.6rem;padding:.05rem .35rem;font-size:.75rem;font-weight:700;position:absolute;transform:translate(-50%)}.cc-discard{width:calc(var(--cc-w) * 1.4);height:calc(var(--cc-w) * 1.6);flex:none;position:relative}.cc-discard>.ccard{top:calc(var(--cc-w) * .1);left:calc(var(--cc-w) * .2);position:absolute}.cc-discard>.ccard[data-named]{box-shadow:inset 0 0 0 calc(var(--cc-w) * .05) #fff, 0 0 0 calc(var(--cc-w) * .07) rgb(var(--named)), 0 4px 10px -4px #0006}.cc-discard>.ccard[data-named=red]{--named:200 28 48}.cc-discard>.ccard[data-named=yellow]{--named:240 184 0}.cc-discard>.ccard[data-named=green]{--named:20 132 64}.cc-discard>.ccard[data-named=blue]{--named:26 92 206}.cc-discard>.ccard.is-played{animation:.32s cubic-bezier(.2,.9,.3,1.2) both cc-throw}.cc-info{flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0;display:flex}.cc-info p{white-space:nowrap;margin:0;font-size:.8125rem;font-weight:600}.cc-color{color:#fff;text-transform:capitalize;border-radius:999px;padding:.2rem .55rem;transition:background-color .25s;box-shadow:inset 0 0 0 2px #ffffffd9}.cc-color[data-color=red]{background:#c81c30}.cc-color[data-color=yellow]{color:#181820;background:#f0b800}.cc-color[data-color=green]{background:#148440}.cc-color[data-color=blue]{background:#1a5cce}.cc-direction{color:#ffffffe6}.cc-direction-arrow{font-size:1.1rem;line-height:1;animation:2.4s linear infinite cc-spin;display:inline-block}.cc-direction[data-dir="-1"] .cc-direction-arrow{animation-direction:reverse}.cc-owed{color:#fff;background:#b91c1c;border-radius:999px;padding:.15rem .5rem}.cc-owed[hidden]{display:none}.cc-you.is-turn{color:rgb(var(--color-mark))}.cc-hand{justify-content:center;align-items:flex-end;gap:calc(var(--cc-w) * .1) calc(var(--cc-w) * .08);min-height:calc(var(--cc-w) * 1.6);padding-top:calc(var(--cc-w) * .2);flex-wrap:wrap;display:flex}.ccard{--cc:200 28 48;width:var(--cc-w);aspect-ratio:5/7;border-radius:calc(var(--cc-w) * .12);background:radial-gradient(120% 90% at 30% 10%, #ffffff38, transparent 60%), rgb(var(--cc));box-shadow:inset 0 0 0 calc(var(--cc-w) * .05) #fff, 0 1px 2px #0000004d, 0 4px 10px -4px #0006;color:#fff;touch-action:manipulation;border-width:0;flex:none;padding:0;font-family:inherit;line-height:1;transition:transform .16s,box-shadow .16s,opacity .16s;display:flex;position:relative}.ccard[data-color=yellow]{--cc:240 184 0}.ccard[data-color=green]{--cc:20 132 64}.ccard[data-color=blue]{--cc:26 92 206}.ccard[data-color=wild],.ccard--back{background:conic-gradient(from 45deg, #c81c30 0 25%, #f0b800 0 50%, #148440 0 75%, #1a5cce 0)}.ccard--back{background:repeating-linear-gradient(45deg,#ffffff0f 0 4px,#0000 4px 9px),#232330}button.ccard{cursor:pointer}button.ccard:disabled{cursor:default}.ccard:focus-visible{outline:3px solid rgb(var(--color-mark));outline-offset:2px}.ccard-oval{color:#181820;font-size:calc(var(--cc-w) * .4);letter-spacing:-.04em;box-shadow:inset 0 0 0 calc(var(--cc-w) * .025) rgb(var(--cc) / .5);pointer-events:none;background:#fff;border-radius:50%;justify-content:center;align-items:center;font-weight:800;display:flex;position:absolute;inset:20% 14%}.ccard[data-kind=number] .ccard-oval{font-size:calc(var(--cc-w) * .48)}.ccard[data-kind=draw2] .ccard-oval,.ccard[data-kind=wild4] .ccard-oval{font-size:calc(var(--cc-w) * .27)}.ccard[data-color=wild] .ccard-oval,.ccard--back .ccard-oval{color:#fff;background:#181820}.ccard-corner{top:calc(var(--cc-w) * .08);left:calc(var(--cc-w) * .09);align-items:center;gap:calc(var(--cc-w) * .02);pointer-events:none;display:flex;position:absolute}.ccard-corner--end{top:auto;left:auto;right:calc(var(--cc-w) * .09);bottom:calc(var(--cc-w) * .08)}.ccard-mark{font-size:calc(var(--cc-w) * .19);filter:drop-shadow(0 0 1px #fff)}.ccard-value{font-size:calc(var(--cc-w) * .2);text-shadow:0 0 2px #000000b3,0 1px 1px #00000080;font-weight:800}.ccard[data-color=yellow] .ccard-value{color:#181820;text-shadow:0 0 2px #fffc}.ccard.is-playable{transform:translateY(calc(var(--cc-w) * -.12));box-shadow:inset 0 0 0 calc(var(--cc-w) * .05) #fff, 0 0 0 3px rgb(var(--color-mark)), 0 8px 14px -6px #00000080}.ccard.is-dim{opacity:.7;filter:saturate(.6)brightness(.85)}.ccard.is-drawn:after{content:"new";left:50%;top:calc(var(--cc-w) * -.32);color:rgb(var(--color-mark));text-transform:uppercase;letter-spacing:.06em;font-size:.6875rem;font-weight:700;position:absolute;transform:translate(-50%)}.ccard.is-selected{transform:translateY(calc(var(--cc-w) * -.22))}.ccard.is-dealt{animation:.28s ease-out backwards pcard-deal}@media (hover:hover){button.ccard.is-playable:hover{transform:translateY(calc(var(--cc-w) * -.2))}}.cc-picker,.cc-result{text-align:center;z-index:2;border-radius:inherit;backdrop-filter:blur(2px);background:#000000bd;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:1rem;animation:.2s ease-out both cc-fade;display:flex;position:absolute;inset:0}.cc-picker[hidden],.cc-result[hidden]{display:none}.cc-picker-title,.cc-result-text{color:#fff;margin:0;font-size:clamp(1rem,4.5cqw,1.35rem);font-weight:700}.cc-picker-grid{grid-template-columns:repeat(2,minmax(0,9rem));gap:.6rem;display:grid}.cc-pick{cursor:pointer;text-transform:capitalize;border-radius:var(--radius);color:#fff;touch-action:manipulation;border-width:0;justify-content:center;align-items:center;gap:.5rem;min-height:3.25rem;padding:.5rem .75rem;font-size:1rem;font-weight:700;display:flex;box-shadow:inset 0 0 0 3px #ffffffe6}.cc-pick span{font-size:1.35rem}.cc-pick[data-color=red]{background:#c81c30}.cc-pick[data-color=yellow]{color:#181820;background:#f0b800}.cc-pick[data-color=green]{background:#148440}.cc-pick[data-color=blue]{background:#1a5cce}.cc-pick:focus-visible,.cc-picker-cancel:focus-visible{outline:3px solid rgb(var(--color-mark));outline-offset:3px}.cc-picker-cancel{cursor:pointer;color:#ffffffe6;background-color:#0000;border-width:0;min-height:2.75rem;font-size:.875rem;text-decoration-line:underline}.cc-result-glyph{margin:0;font-size:clamp(2.75rem,14cqw,5rem);line-height:1;animation:.6s cubic-bezier(.2,1.6,.4,1) both cc-pop}.cc-result[data-tone=win] .cc-result-glyph{animation:.6s cubic-bezier(.2,1.6,.4,1) both cc-pop,1.4s ease-in-out .6s 3 cc-pulse}.cc-result-scores{color:#ffffffe6;font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center;gap:.35rem .9rem;margin:0;padding:0;font-size:.875rem;list-style-type:none;display:flex}.cc-result-scores .is-winner{color:rgb(var(--color-mark));font-weight:700}.cc-actions{justify-content:center;gap:.5rem}.cc-actions .btn{touch-action:manipulation;min-height:2.75rem;padding-inline:.9rem}.cc-shout.is-urgent{animation:.9s ease-in-out infinite cc-urge}@keyframes cc-bob{50%{transform:translateY(-3px)}}@keyframes cc-spin{to{transform:rotate(360deg)}}@keyframes cc-fade{0%{opacity:0}}@keyframes cc-pop{0%{opacity:0;transform:scale(.3)}}@keyframes cc-pulse{50%{transform:scale(1.15)}}@keyframes cc-throw{0%{opacity:0;transform:translateY(-30%)scale(1.25)}}@keyframes cc-urge{50%{box-shadow:0 0 0 4px rgb(var(--color-mark) / .7)}}.game-panel.is-fullscreen .cc-table{--cc-w:min(13cqw, 6rem, 12.5dvh);flex:1 0 auto;justify-content:space-between}@media (orientation:landscape) and (height<=32rem){.game-panel.is-fullscreen.cc-panel{-moz-column-gap:.75rem;grid-template-columns:minmax(0,1fr) minmax(8.5rem,11rem);grid-auto-rows:min-content;align-content:safe center;gap:.5rem .75rem;display:grid}.game-panel.is-fullscreen.cc-panel>*{grid-column:2}.game-panel.is-fullscreen.cc-panel>.cc-table{--cc-w:min(8cqw, 12dvh);grid-area:1/1/span 4}.game-panel.is-fullscreen.cc-panel .stat-row{display:none}.game-panel.is-fullscreen.cc-panel .game-topbar{flex-direction:column;align-items:stretch}.game-panel.is-fullscreen.cc-panel .section-actions{flex-direction:column;margin:0}.cc-panel .game-status{min-height:0}.cc-seat{-moz-column-gap:.4rem;flex-flow:wrap;justify-content:center;column-gap:.4rem;padding:.2rem .3rem}.cc-seat-glyph{font-size:1.25rem}}@media (prefers-reduced-motion:reduce){.ccard,.cc-seat,.cc-color{transition:none}.ccard.is-dealt,.cc-discard>.ccard.is-played,.cc-seat.is-turn .cc-seat-glyph,.cc-direction-arrow,.cc-seat-shout,.cc-picker,.cc-result,.cc-result-glyph,.cc-result[data-tone=win] .cc-result-glyph,.cc-shout.is-urgent{animation:none}}
