.c4-root{--p0:var(--game);--p1:var(--sun)}.c4{--hole:#e7eaff;touch-action:manipulation;width:min(100%,476px);container-type:inline-size}.c4 *{box-sizing:border-box}.c4-aim{height:14.2857cqi;position:relative}.c4-board{aspect-ratio:7/6;background:var(--hole);box-shadow:clamp(4px, 1.2cqi, 6px) clamp(4px, 1.2cqi, 6px) 0 var(--ink);border-radius:3.42857cqi;position:relative}.c4-discs{position:absolute;inset:0}.c4-frame{pointer-events:none;z-index:2;width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.c4-plate{fill:var(--peri)}.c4-ring{fill:none;stroke:var(--ink);stroke-width:5px}.c4-edge{fill:none;stroke:var(--ink);stroke-width:6px}.c4-hits{z-index:3;grid-template-columns:repeat(7,1fr);display:grid;position:absolute;inset:-14.2857cqi 0 0}.c4-col{appearance:none;cursor:pointer;background:0 0;border:0;border-radius:12px;margin:0;padding:0;position:relative}.c4-col:after{content:"";background:color-mix(in srgb, var(--ink) 8%, transparent);opacity:0;transition:opacity .14s var(--ease-out);border-radius:10px;position:absolute;inset:14.2857cqi 2px 2px}.c4-col.is-aim:after{opacity:1}.c4-col:disabled{cursor:default}.c4-col:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}.c4-disc{--pc:var(--p0);aspect-ratio:1;width:14.2857%;transform:translate(calc(var(--c) * 100%), calc(var(--r,0) * 100%));animation:c4-fall calc(.28s + var(--r) * 42ms) backwards;position:absolute;top:0;left:0}.c4-disc[data-p="1"]{--pc:var(--p1)}.c4-disc i,.c4-disc.is-ghost:before,.c4-disc.is-land:before{content:"";border-radius:50%;position:absolute;inset:8%}.c4-disc i{background:var(--pc);border:var(--edge);transform-origin:50% 90%;animation:c4-squash calc(.28s + var(--r) * 42ms) backwards;transition:opacity .3s var(--ease-out)}.c4-disc i:after{content:"";border:clamp(2px, .5cqi, 3px) solid color-mix(in srgb, var(--pc) 72%, var(--ink));border-radius:50%;position:absolute;inset:22%}.c4-disc.is-last i:before{content:"";background:var(--ink);width:22%;height:22%;animation:c4-dot .26s .3s var(--ease-spring) backwards;border-radius:50%;margin:-11% 0 0 -11%;position:absolute;top:50%;left:50%}@keyframes c4-dot{0%{transform:scale(0)}}.c4-disc.is-ghost{transform:translateX(calc(var(--c) * 100%));animation:c4-ghost .2s var(--ease-spring) both;transition:transform .13s var(--ease-spring)}.c4-disc.is-ghost:before{background:var(--pc);border:var(--edge);box-shadow:clamp(2px, .5cqi, 3px) clamp(2px, .6cqi, 4px) 0 var(--ink)}.c4-disc.is-land{animation:none}.c4-disc.is-land:before{border:clamp(2px, .55cqi, 3px) dashed var(--ink);background:color-mix(in srgb, var(--pc) 55%, var(--hole));inset:20%}@keyframes c4-ghost{0%{opacity:0;transform:translate(calc(var(--c) * 100%), -12%) scale(.8)}}@keyframes c4-fall{0%{translate:0 calc((var(--r) + 1) * -100%);animation-timing-function:cubic-bezier(.5,0,1,.6)}60%{animation-timing-function:cubic-bezier(0,.5,.5,1);translate:0}76%{animation-timing-function:cubic-bezier(.5,0,1,.5);translate:0 -10%}88%{animation-timing-function:cubic-bezier(0,.5,.5,1);translate:0}94%{animation-timing-function:ease-in;translate:0 -2.5%}to{translate:0}}@keyframes c4-squash{0%,56%{transform:none}62%{transform:scale(1.12,.86)}72%{transform:scale(.95,1.05)}88%{transform:scale(1.05,.95)}to{transform:none}}.c4.has-win .c4-disc:not(.is-win) i{opacity:.35}.c4-disc.is-win i{animation:c4-win .62s .35s var(--ease-spring) infinite alternate}.c4-disc.is-win i:after{background:var(--white);border:clamp(2px, .55cqi, 3px) solid var(--ink);inset:26%}.c4-disc.is-win i:before{display:none}@keyframes c4-win{0%{transform:none}to{transform:translateY(-7%)scale(1.03,.97)}}.c4.is-over:not(.has-win) .c4-disc i{opacity:.6}@media (hover:none){.c4-col.is-aim:after{opacity:0}}