/* =============================================================
   GAME: Color Lines (Lines 98)
   ============================================================= */
.board-colorlines {
  --cell: clamp(28px, min(calc((100vw - 84px) / 9), calc((100vh - 250px) / 9)), 56px);
  --gap: 3px;
  position: relative; padding: 8px; border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, #221c58, #110d33 70%);
  box-shadow: 0 0 0 2px #8f7dff, 0 0 26px rgba(143, 125, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .3);
}
.cl-grid { display: grid; grid-template-columns: repeat(9, var(--cell)); gap: var(--gap); }
.cl-row { display: contents; }
.cl-cell {
  position: relative; width: var(--cell); height: var(--cell); padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #1a1545, #221c56);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .06);
  -webkit-tap-highlight-color: transparent;
}
.cl-cell:hover { background: linear-gradient(180deg, #211a55, #2a2366); }
.cl-cell:focus-visible { outline: 3px solid #fff; outline-offset: 1px; z-index: 2; }
.cl-busy .cl-cell { cursor: default; }

/* glossy 3D balls */
.cl-c1 { --b: #ff3d5e; --d: #8a0a26; }
.cl-c2 { --b: #36e86b; --d: #0b6b2c; }
.cl-c3 { --b: #3d7bff; --d: #0e2a8a; }
.cl-c4 { --b: #ffd23f; --d: #a06a00; }
.cl-c5 { --b: #3de8ff; --d: #0a6c86; }
.cl-c6 { --b: #e04bff; --d: #6a0a8a; }
.cl-c7 { --b: #ff8f3d; --d: #8f3a00; }
.cl-ball {
  position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #fff 0 5%, color-mix(in srgb, var(--b) 55%, #fff) 13%, var(--b) 40%, var(--d) 100%);
  box-shadow: inset -2px -4px 6px rgba(0, 0, 0, .35), inset 2px 2px 3px rgba(255, 255, 255, .15), 0 3px 5px rgba(0, 0, 0, .55), 0 0 10px color-mix(in srgb, var(--b) 40%, transparent);
}
.cl-ball::before { /* shine */
  content: ""; position: absolute; left: 18%; top: 11%; width: 36%; height: 24%; border-radius: 50%; rotate: -28deg;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.cl-ball::after { /* soft rim light */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 68% 80%, color-mix(in srgb, var(--b) 60%, #fff) 0, transparent 30%); opacity: .45;
}
/* the iconic jumping selected ball (with its shadow squashing on the floor) */
.cl-sel { background: linear-gradient(180deg, #2a2270, #352b85); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 55%, transparent), inset 0 2px 5px rgba(0, 0, 0, .4); }
.cl-sel::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 8%; height: 12%; border-radius: 50%;
  background: rgba(0, 0, 0, .55); filter: blur(1.5px); animation: clShadow .52s ease-in-out infinite;
}
.cl-sel .cl-ball { animation: clJump .52s cubic-bezier(.3, 0, .7, 1) infinite; transform-origin: 50% 100%; }
@keyframes clJump {
  0%, 100% { translate: 0 6%; scale: 1.1 .88; }
  12% { translate: 0 0; scale: .96 1.05; }
  50% { translate: 0 -30%; scale: .98 1.02; }
  88% { translate: 0 0; scale: 1 1; }
}
@keyframes clShadow { 0%, 100% { scale: 1.1 1; opacity: .9; } 50% { scale: .6 .7; opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .cl-sel .cl-ball { animation: none; translate: 0 -8%; box-shadow: 0 0 0 3px #fff, 0 0 16px var(--b); }
  .cl-sel::before { animation: none; }
}
.cl-new { animation: clGrow .3s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes clGrow { from { scale: .1; opacity: .2; } }
.cl-pop { animation: clPop .38s ease-in forwards; }
@keyframes clPop { 30% { scale: 1.25; filter: brightness(1.6); } 100% { scale: .1; opacity: 0; filter: brightness(2); } }
/* where the next balls will drop (optional) */
.cl-seed {
  position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; pointer-events: none; opacity: .75;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--b) 45%, var(--d));
  box-shadow: 0 0 6px var(--b);
}
.cl-nope { animation: clNope .32s ease; }
@keyframes clNope { 0%, 100% { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55); } 30% { box-shadow: inset 0 0 0 2px #ff3d5e, 0 0 12px rgba(255, 61, 94, .6); translate: -2px 0; } 65% { translate: 2px 0; } }

/* effects layer */
.cl-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cl-mover { left: 0; top: 0; z-index: 4; }
.cl-trail {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0;
  background: var(--b); box-shadow: 0 0 8px var(--b); animation: clTrail .5s ease-out forwards;
}
@keyframes clTrail { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: .2; } }
.cl-spark {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--b) 60%, #fff); box-shadow: 0 0 8px var(--b); animation: clSpark .6s ease-out forwards;
}
@keyframes clSpark { to { translate: var(--dx) var(--dy); opacity: 0; scale: .3; } }
.cl-plus {
  position: absolute; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font: 800 1.25rem var(--font-head, system-ui); color: #fff; text-shadow: 0 0 10px #8f7dff, 0 2px 0 rgba(0, 0, 0, .6);
  animation: clPlus 1s ease-out forwards;
}
@keyframes clPlus { 0% { opacity: 0; scale: .6; } 20% { opacity: 1; scale: 1.15; } 100% { opacity: 0; translate: -50% -180%; } }
@media (prefers-reduced-motion: reduce) { .cl-plus { animation-duration: .01s; animation-delay: .8s; animation-fill-mode: both; animation-name: clFade; } }
@keyframes clFade { to { opacity: 0; } }
.cl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* status bar: next colours */
.cl-num { color: #c3b8ff; font-variant-numeric: tabular-nums; }
.cl-minis { display: inline-flex; gap: 4px; }
.cl-mini {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, var(--b) 45%, var(--d));
  box-shadow: 0 0 6px color-mix(in srgb, var(--b) 60%, transparent), inset -1px -2px 2px rgba(0, 0, 0, .3);
}
.cl-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 38px; }
.cl-opt input { width: 18px; height: 18px; accent-color: #8f7dff; }
@media (max-width: 420px) { .board-colorlines { --gap: 2px; padding: 6px; } .cl-cell { border-radius: 6px; } }