/* AnomicFlip — Chicken (/chicken). Shares the page shell with coinflip.css; .pk-sel / .mn-box / .mn-win / .mx-note from plinko.css + mines.css. */
.ck-go { height: 58px; border: 0; border-radius: 8px; background: #2a2d33; color: #fff; font: 800 19px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.ck-go:hover:not(:disabled) { background: #33373e; }
.ck-go:disabled { opacity: .4; cursor: not-allowed; }
.ck-go[hidden] { display: none; }

.ck-stage { position: relative; overflow: hidden; min-height: 640px; background: #1b1e22; }
.ck-road { position: absolute; top: 0; bottom: 0; left: 0; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.ck-side { position: absolute; top: 0; bottom: 0; width: 200px; background: #2b3036 repeating-linear-gradient(0deg, transparent 0 88px, rgba(0,0,0,.25) 88px 92px); box-shadow: inset -6px 0 0 #3a4048; }
.ck-side.start { left: 0; }
.ck-side.end { box-shadow: inset 6px 0 0 #3a4048; }
.ck-lane { position: absolute; top: 0; bottom: 0; background: #23272c; border-right: 4px dashed rgba(255,255,255,.12); overflow: hidden; }
.ck-hole { position: absolute; left: 50%; top: 50%; width: 104px; height: 74px; margin: -60px 0 0 -52px; border-radius: 50%; background: radial-gradient(circle, #2f353c 0 45%, #262b31 46% 60%, #2f353c 61%); box-shadow: inset 0 0 0 6px #343a42, 0 4px 0 rgba(0,0,0,.35); }
.ck-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 34px); min-width: 120px; padding: 10px 12px; border-radius: 8px; background: #33383f; color: #e6e8eb; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.ck-lane.next .ck-chip { background: #3a4048; color: #fff; box-shadow: 0 0 0 2px rgba(63,214,143,.6); }
.ck-lane.passed .ck-chip { background: #1f8a5b; color: #fff; }
.ck-lane.dead .ck-chip { background: #b7282f; color: #fff; }
/* barrier that drops in once you've crossed a lane */
.ck-block { position: absolute; left: 12%; right: 12%; top: 26%; height: 16px; border-radius: 4px; background: repeating-linear-gradient(135deg, #f5c84a 0 14px, #1a1d20 14px 28px); box-shadow: 0 4px 0 rgba(0,0,0,.4); opacity: 0; transform: translateY(-20px); transition: opacity .25s, transform .25s; }
.ck-lane.passed .ck-block { opacity: 1; transform: none; }

/* the chicken */
.ck-chicken { position: absolute; top: 50%; width: 120px; margin: -150px 0 0 -60px; z-index: 3; scale: -1 1; /* mirrored so it faces across the road */ pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 10px 8px rgba(0,0,0,.45)); transition: left .32s cubic-bezier(.3,.7,.3,1), filter .3s, transform .3s; }
.ck-chicken.hop { animation: ck-hop .32s ease-out; }
@keyframes ck-hop { 0% { transform: none; } 45% { transform: translateY(-34px) scale(1.04); } 100% { transform: none; } }
.ck-chicken.dead { filter: grayscale(1) brightness(.6) drop-shadow(0 0 0 transparent); transform: rotate(80deg) translate(30px, -10px) scaleY(.7); }

/* cars: drive down their lane from the top */
.ck-car { position: absolute; left: 50%; top: -190px; width: 92px; height: 160px; margin-left: -46px; z-index: 4; border-radius: 22px 22px 16px 16px;
  background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 20% 80%, rgba(0,0,0,.25)), var(--c, #e53945);
  box-shadow: 0 10px 18px rgba(0,0,0,.5); animation: ck-drive 1.3s linear forwards; }
.ck-car::before { content: ''; position: absolute; left: 12px; right: 12px; bottom: 30px; height: 34px; border-radius: 8px 8px 4px 4px; background: rgba(15,20,28,.85); }
.ck-car::after { content: ''; position: absolute; left: 12px; right: 12px; top: 22px; height: 22px; border-radius: 4px; background: rgba(15,20,28,.7); }
.ck-car.hit { animation: ck-hit .55s cubic-bezier(.4,.1,.6,1) forwards; }
@keyframes ck-drive { to { top: 110%; } }
@keyframes ck-hit { 0% { top: -190px; } 70% { top: calc(50% - 150px); } 100% { top: calc(50% - 120px); } }

.ck-nav { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; gap: 6px; }
.ck-nav button { width: 42px; height: 42px; border: 0; border-radius: 8px; background: rgba(36,39,44,.9); color: #c9ccd1; cursor: pointer; display: grid; place-items: center; }
.ck-nav button:hover { background: #33373e; color: #fff; }
@media (prefers-reduced-motion: reduce) { .ck-road, .ck-chicken { transition: none; } .ck-chicken.hop { animation: none; } }
@media (max-width: 1100px) { .ck-stage { min-height: 460px; } }