/* Color Lines — game.css
   Widget styles (.ge-*) + game styles (.ge-game .cl-*)
   CSS variables prefixed --cl- */

/* ── Leaderboard widget ───────────────────────────────────────────────────── */
.ge{background:#1a1d27;color:#e8eaf0;border-radius:14px;overflow:hidden;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;margin-bottom:12px}
.ge-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.ge-title{font-size:1rem;font-weight:700;color:#e94560;letter-spacing:.04em}
.ge-sub{font-size:.75rem;color:rgba(232,234,240,.5)}
.ge-boards{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px}
.ge-lb{flex:1;min-width:130px;background:rgba(255,255,255,.05);border-radius:10px;padding:10px}
.ge-lb h4{font-size:.78rem;color:#e94560;margin-bottom:8px;white-space:nowrap}
.ge-lb table{width:100%;border-collapse:collapse}
.ge-lb td{padding:3px 2px;font-size:.75rem;line-height:1.4}
.ge-pos{width:22px;color:rgba(232,234,240,.5);font-size:.7rem}
.ge-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}
.ge-val{text-align:right;font-weight:700;color:#e94560;white-space:nowrap}
.ge-empty{text-align:center;color:rgba(232,234,240,.4);padding:6px 0;font-size:.72rem}
.ge-lb-more{display:none}
.ge-lb.ge-expanded .ge-lb-more{display:table-row-group}
.ge-more-btn{display:block;width:100%;margin-top:6px;padding:5px 0;background:rgba(255,255,255,.07);border:none;border-radius:6px;color:rgba(232,234,240,.6);font-size:.7rem;cursor:pointer;text-align:center}
.ge-more-btn:hover{background:rgba(255,255,255,.12);color:#e8eaf0}
@media(max-width:380px){.ge-boards{flex-direction:column}}

/* ── Game container ───────────────────────────────────────────────────────── */
.ge-game {
  --cl-bg:      #0f1117;
  --cl-surface: #1a1d27;
  --cl-accent:  #e94560;
  --cl-text:    #e8eaf0;
  --cl-muted:   rgba(232, 234, 240, .45);
  --cl-cell:    min(calc((100cqi - 44px) / 9), 52px);
  --cl-gap:     clamp(3px, 0.9cqi, 5px);
  --cl-r:       10px;

  container-type:          inline-size;
  background:              var(--cl-bg);
  color:                   var(--cl-text);
  font-family:             -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing:  antialiased;
  display:                 flex;
  flex-direction:          column;
  align-items:             center;
  padding:                 12px 16px 28px;
  gap:                     10px;
  position:                relative;
  box-sizing:              border-box;
  border-radius:           14px;
}

.ge-game *, .ge-game *::before, .ge-game *::after { box-sizing: border-box; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.ge-game .cl-header {
  width:           100%;
  max-width:       calc(9 * var(--cl-cell) + 10 * var(--cl-gap));
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}
.ge-game .cl-player {
  font-size:     .78rem;
  color:         var(--cl-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  min-width:     0;
}
.ge-game .cl-player strong { color: var(--cl-text); }

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.ge-game .cl-stats {
  display:   flex;
  gap:       8px;
  width:     100%;
  max-width: calc(9 * var(--cl-cell) + 10 * var(--cl-gap));
}
.ge-game .cl-stat {
  flex:           1;
  background:     var(--cl-surface);
  border-radius:  var(--cl-r);
  padding:        7px 6px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1px;
}
.ge-game .cl-label {
  font-size:      .6rem;
  color:          var(--cl-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ge-game .cl-value {
  font-size:            1.1rem;
  font-weight:          700;
  color:                var(--cl-accent);
  font-variant-numeric: tabular-nums;
}

/* ── Next balls preview ───────────────────────────────────────────────────── */
.ge-game .cl-next-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
  max-width:   calc(9 * var(--cl-cell) + 10 * var(--cl-gap));
}
.ge-game .cl-next-label {
  font-size:   .7rem;
  color:       var(--cl-muted);
  white-space: nowrap;
}
.ge-game .cl-next-row {
  display:     flex;
  gap:         6px;
  align-items: center;
}
.ge-game .cl-finish-btn {
  margin-left:  auto;
  padding:      4px 10px;
  border:       1px solid rgba(232,234,240,.2);
  border-radius: 6px;
  background:   transparent;
  color:        var(--cl-muted);
  font-size:    .68rem;
  font-family:  inherit;
  cursor:       pointer;
  white-space:  nowrap;
  transition:   border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ge-game .cl-finish-btn:hover {
  border-color: var(--cl-accent);
  color:        var(--cl-text);
}
.ge-game .cl-next-ball {
  width:         clamp(18px, calc(var(--cl-cell) * 0.55), 28px);
  height:        clamp(18px, calc(var(--cl-cell) * 0.55), 28px);
  border-radius: 50%;
  background:    radial-gradient(circle at 50% 45%, rgba(255,255,255,.12) 0%, transparent 55%, rgba(0,0,0,.22) 100%), var(--cl-color);
  box-shadow:    0 1px 5px rgba(0,0,0,.45);
  flex-shrink:   0;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.ge-game #cl-grid {
  display:               grid;
  grid-template-columns: repeat(9, var(--cl-cell));
  gap:                   var(--cl-gap);
  background:            var(--cl-surface);
  padding:               var(--cl-gap);
  border-radius:         14px;
  touch-action:          manipulation;
  user-select:           none;
  -webkit-user-select:   none;
  position:              relative; /* anchor for path-animation ball */
}

/* ── Cells ────────────────────────────────────────────────────────────────── */
.ge-game .cl-cell {
  width:           var(--cl-cell);
  height:          var(--cl-cell);
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  background:      rgba(255,255,255,.03);
  transition:      background 80ms;
  position:        relative;
  -webkit-tap-highlight-color: transparent;
}
.ge-game .cl-cell:hover                { background: rgba(255,255,255,.07); }

/* ── Hint dots (pre-determined next ball positions) ───────────────────────── */
.ge-game .cl-hint-dot {
  width:          34%;
  height:         34%;
  border-radius:  50%;
  background:     radial-gradient(circle at 50% 45%, rgba(255,255,255,.12) 0%, transparent 55%, rgba(0,0,0,.2) 100%), var(--cl-color);
  opacity:        0.55;
  flex-shrink:    0;
  pointer-events: none;
}

/* ── Balls ────────────────────────────────────────────────────────────────── */
.ge-game .cl-ball {
  width:         78%;
  height:        78%;
  border-radius: 50%;
  background:    radial-gradient(circle at 50% 45%, rgba(255,255,255,.12) 0%, transparent 55%, rgba(0,0,0,.22) 100%), var(--cl-color);
  box-shadow:    0 2px 6px rgba(0,0,0,.45), inset 0 -2px 4px rgba(0,0,0,.15);
  transition:    transform 80ms ease, box-shadow 80ms ease;
  flex-shrink:   0;
}
.ge-game .cl-cell:hover .cl-ball:not(.cl-sel) {
  transform: scale(1.07);
}

/* Selected ball — bouncing animation */
.ge-game .cl-ball.cl-sel {
  animation: cl-bounce .55s ease-in-out infinite;
  box-shadow: 0 0 0 3px #fff, 0 4px 18px rgba(0,0,0,.5);
}

/* Newly placed ball — pop-in animation */
.ge-game .cl-ball.cl-pop {
  animation: cl-pop .38s cubic-bezier(.17,.89,.32,1.28) forwards;
}

@keyframes cl-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

@keyframes cl-pop {
  0%   { transform: scale(0);    opacity: 0; }
  65%  { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Vanish — matched balls dissolve (GPU: transform + opacity only) */
.ge-game .cl-ball.cl-vanish {
  animation: cl-vanish .35s ease-in forwards;
}

@keyframes cl-vanish {
  0%   { transform: scale(1);    opacity: 1; }
  35%  { transform: scale(1.18); opacity: .85; }
  100% { transform: scale(0);    opacity: 0; }
}

/* ── Hint ─────────────────────────────────────────────────────────────────── */

/* ── Result overlay ───────────────────────────────────────────────────────── */
.ge-game #cl-result {
  display:    none;
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.82);
  align-items:      center;
  justify-content:  center;
  z-index:    50;
  padding:    20px;
  backdrop-filter:          blur(5px);
  -webkit-backdrop-filter:  blur(5px);
  border-radius: 14px;
}
.ge-game .cl-card {
  background:    var(--cl-surface);
  border-radius: 20px;
  padding:       28px 22px 22px;
  width:         100%;
  max-width:     340px;
  text-align:    center;
}
.ge-game .cl-card h2 {
  font-size:     1.35rem;
  color:         var(--cl-accent);
  margin-bottom: 18px;
}
.ge-game .cl-rs {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
  margin-bottom:         14px;
}
.ge-game .cl-rs-item {
  background:    rgba(255,255,255,.05);
  border-radius: 10px;
  padding:       10px 6px;
}
.ge-game .cl-rs-label {
  font-size:      .6rem;
  color:          var(--cl-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  4px;
}
.ge-game .cl-rs-value {
  font-size:            1.1rem;
  font-weight:          700;
  color:                var(--cl-accent);
  font-variant-numeric: tabular-nums;
}

/* ── Rank rows ────────────────────────────────────────────────────────────── */
.ge-game #cl-ranks {
  display:       none;
  background:    rgba(255,255,255,.05);
  border-radius: 10px;
  padding:       10px 12px;
  margin-bottom: 14px;
  text-align:    left;
}
.ge-game .cl-ranks-head {
  font-size:      .68rem;
  color:          var(--cl-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  8px;
}
.ge-game .cl-rank-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       .85rem;
  padding:         5px 0;
  border-bottom:   1px solid rgba(255,255,255,.06);
}
.ge-game .cl-rank-row:last-child { border-bottom: none; }
.ge-game .cl-rank-name  { color: var(--cl-text); }
.ge-game .cl-rank-pos   { font-weight: 700; color: var(--cl-accent); min-width: 36px; text-align: right; }
.ge-game .cl-rank-top   { color: gold; font-size: 1.15rem; }
.ge-game .cl-ranks-note { font-size: .8rem; color: var(--cl-muted); text-align: center; padding: 4px 0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ge-game .cl-btns { display: flex; gap: 8px; justify-content: center; }
.ge-game .cl-btn {
  padding:       11px 20px;
  border:        none;
  border-radius: 10px;
  font-size:     .92rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.ge-game .cl-btn:active     { transform: scale(.95); }
.ge-game .cl-btn-primary    { background: var(--cl-accent); color: #fff; }
.ge-game .cl-btn:hover      { opacity: .87; }