/* chimp-test · styles */
.ct { width: min(100%, 640px); margin: 14px auto 0; display: grid; gap: 14px; }
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.ct-level { font: 800 1.15rem/1.2 var(--font); }
.ct-bananas { display: flex; gap: 6px; }
.ct-banana svg, .ct-mini svg { display: block; width: 34px; height: 34px; overflow: visible; }
.ct-banana-fill { fill: var(--lemon); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.ct-banana-stem { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-banana { transition: transform .3s var(--bounce), opacity .3s; }
.ct-banana.is-gone { opacity: .28; transform: rotate(-30deg) scale(.8); }
.ct-banana.is-gone .ct-banana-fill, .ct-mini.is-gone .ct-banana-fill { fill: var(--faint); }

.ct-screen {
  position: relative; padding: clamp(10px, 2.4vw, 18px); border-radius: 22px; background: #1d1b19;
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--drop);
}
[data-theme="dark"] .ct-screen { border-color: #5a5248; background: #141210; }
.ct-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); gap: clamp(5px, 1.2vw, 9px); aspect-ratio: 8 / 5; }
.ct.tall .ct-board { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 5 / 8; margin: 0 auto;
  width: min(calc(100vw - 72px), max(220px, calc((100dvh - 420px) * .625))); } /* tall: width capped by viewport height */
.ct.tall .ct-screen { justify-self: center; }
.ct-tile {
  display: grid; place-items: center; padding: 0; border-radius: 22%; cursor: pointer;
  background: #fff4dc; border: 2px solid #fff4dc; color: var(--ink);
  font: 800 clamp(1.1rem, 4.4vw, 2rem)/1 var(--font); font-variant-numeric: tabular-nums;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  animation: ct-in .22s var(--bounce) both;
}
@keyframes ct-in { from { scale: .4; opacity: 0; } }
.ct-tile:focus-visible { outline: 3px solid var(--lemon); outline-offset: 2px; }
.ct-board.is-hidden .ct-tile span { visibility: hidden; }
.ct-tile.is-gone { visibility: hidden; animation: none; }
.ct-board.is-wrong .ct-tile.is-gone { visibility: visible; opacity: .35; }
.ct-tile.is-wrong { background: var(--tomato); border-color: var(--tomato); animation: ct-shake .35s; }
@keyframes ct-shake { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.ct-board.is-wrong .ct-tile:not(.is-wrong):not(.is-gone) { background: var(--lemon); border-color: var(--lemon); }
.ct-board.is-clear { animation: ct-clear .45s ease-out; }
@keyframes ct-clear { 40% { box-shadow: 0 0 0 6px var(--mint); border-radius: 12px; } }

.ct-card {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: min(86%, 340px);
  display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 18px;
  border-radius: 20px; background: var(--surface); color: var(--text); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--drop);
  animation: ct-card .3s var(--bounce);
}
@keyframes ct-card { from { scale: .85; opacity: 0; } }
.ct-card-big { font: 800 clamp(1.6rem, 6vw, 2.3rem)/1.05 var(--font); letter-spacing: -.02em; text-wrap: balance; }
.ct-card-small { font-weight: 700; color: var(--muted); max-width: 30ch; text-wrap: balance; }
.ct-card-small:empty { display: none; }
.ct-card-btn { margin-top: 6px; min-width: 60%; }

.ct-lanes { display: grid; gap: 10px; }
.ct-lane { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; border: var(--bw) solid var(--line); background: var(--surface); box-shadow: var(--shadow-s); }
.ct-lane.is-win { background: var(--lemon); color: var(--ink); }
.ct-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-who .player-token { width: 24px; height: 24px; }
.ct-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-marks { display: flex; gap: 2px; }
.ct-mini svg { width: 24px; height: 24px; }
.ct-mini.is-gone { opacity: .35; }
.ct-best { font: 800 1.45rem/1 var(--font); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; white-space: nowrap; }
.ct-best small { font: 800 .75rem var(--font); color: var(--faint); }
.ct-lane.is-win .ct-best small { color: var(--ink); }
.ct-best.is-live { animation: breathe 1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .ct-tile, .ct-card, .ct-board.is-clear, .ct-tile.is-wrong, .ct-best.is-live { animation: none; }
}
[data-theme="dark"] .ct-banana.is-gone, [data-theme="dark"] .ct-mini.is-gone { opacity: .55; }

/* idle (no tiles): ::before/::after layer; classes also used by beat.js */
.ct-screen { overflow: hidden; isolation: isolate; }
.ct-screen::before, .ct-screen::after { content: ""; position: absolute; left: 50%; pointer-events: none; opacity: 0; transition: opacity .25s, translate .45s var(--bounce); }
.ct-screen::before { bottom: -18%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #2c2925; translate: -50% 10%; z-index: 0; }
.ct-screen::after { bottom: 0; width: min(33%, 300px); aspect-ratio: 360 / 300; background: url(monkey.svg) center bottom / contain no-repeat; translate: -50% 18%; z-index: 1; }
.ct-screen:has(.ct-board:empty)::before { opacity: 1; translate: -50% 0; }
.ct-screen:has(.ct-board:empty)::after { opacity: 1; translate: -50% 0; animation: ct-wave 4.5s ease-in-out 1s infinite; }
@keyframes ct-wave { 0%, 82%, 100% { rotate: 0deg; } 87% { rotate: -3deg; } 92% { rotate: 3deg; } 96% { rotate: -1.5deg; } }
.ct-screen::after { transform-origin: 50% 100%; }
.ct-card { z-index: 2; transition: top .3s var(--bounce); }
.ct-screen:has(.ct-board:empty) .ct-card { top: 29%; }
.ct.tall .ct-screen::after { width: 66%; }
.ct.tall .ct-screen::before { width: 80%; }
.ct.tall .ct-screen:has(.ct-board:empty) .ct-card { top: 32%; }
[data-theme="dark"] .ct-screen::before { background: #26231f; }
@media (prefers-reduced-motion: reduce) { .ct-screen:has(.ct-board:empty)::after { animation: none; } .ct-screen::before, .ct-screen::after, .ct-card { transition: none; } }