/* ───────────────────────────────────────────────────────────────
   COLOR BY NUMBER 🔢  (owned by colorbynumber.js)
   ─────────────────────────────────────────────────────────────── */
.cbn-app, .cbn-modal {
  --cbn-ctl: rgba(255, 255, 255, 0.06);
  --cbn-ctl-hover: rgba(255, 255, 255, 0.12);
  --cbn-solid: #1b1f35;
  --cbn-surface: rgba(255, 255, 255, 0.03);
  --cbn-stage: #0b0f1d;
  --cbn-stage-dot: rgba(255, 255, 255, 0.05);
  --cbn-tap: 48px;
}
[data-theme="light"] .cbn-app, [data-theme="light"] .cbn-modal {
  --cbn-ctl: #ffffff;
  --cbn-ctl-hover: rgba(99, 102, 241, 0.08);
  --cbn-solid: #ffffff;
  --cbn-surface: rgba(15, 23, 42, 0.025);
  --cbn-stage: #e6e8f2;
  --cbn-stage-dot: rgba(15, 23, 42, 0.06);
}
.cbn-app { min-width: 0; position: relative; color: var(--text-main); }
.cbn-app *, .cbn-modal *, .cbn-app *::before, .cbn-app *::after { box-sizing: border-box; }
.cbn-app button, .cbn-modal button { font-family: var(--font-display); color: inherit; -webkit-tap-highlight-color: transparent; }
.cbn-app :focus-visible, .cbn-modal :focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.cbn-app [hidden], .cbn-modal [hidden] { display: none !important; }
.cbn-muted { color: var(--text-muted); font-size: 0.9rem; }

/* ── Buttons & chips ─────────────────────────────────────────── */
.cbn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--cbn-tap); min-width: var(--cbn-tap); padding: 8px 14px;
  border-radius: 14px; border: 1px solid var(--border-color);
  background: var(--cbn-ctl); font-size: 0.98rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cbn-btn:hover:not(:disabled) { background: var(--cbn-ctl-hover); border-color: var(--primary); }
.cbn-btn:active:not(:disabled) { transform: scale(0.95); }
.cbn-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cbn-btn.active { background: var(--grad-main); color: #fff; border-color: transparent; box-shadow: 0 6px 16px var(--primary-glow); }
.cbn-btn.cbn-icon { padding: 6px; font-size: 1.1rem; }
.cbn-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--secondary); color: #fff; font-size: 0.78rem; line-height: 1;
}
.cbn-magic.cbn-empty-magic .cbn-badge { background: var(--text-faint); }
.cbn-big-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 22px; border-radius: 16px; border: none; cursor: pointer;
  background: var(--grad-main); color: #fff !important; font-size: 1.08rem; font-weight: 700;
  box-shadow: 0 8px 20px var(--primary-glow); transition: transform 0.15s, box-shadow 0.2s;
}
.cbn-big-btn:hover:not(:disabled) { transform: translateY(-2px); }
.cbn-big-btn:active:not(:disabled) { transform: scale(0.97); }
.cbn-big-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.cbn-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--border-color); background: var(--cbn-ctl);
  font-size: 0.92rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.cbn-chip:hover { border-color: var(--primary); }
.cbn-chip:active { transform: scale(0.96); }
.cbn-chip.active { background: var(--primary); color: #fff; border-color: transparent; }

/* ── Library ─────────────────────────────────────────────────── */
.cbn-lib { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cbn-continue {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 18px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(236, 72, 153, 0.18));
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.cbn-cont-thumb { width: 96px; height: 96px; }
.cbn-cont-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cbn-kicker { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--secondary); }
.cbn-cont-name { font-family: var(--font-display); font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cbn-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cbn-quick-btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  text-align: left; padding: 14px 16px; min-height: 76px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card);
  transition: transform 0.18s, border-color 0.2s, background 0.2s;
}
.cbn-quick-btn:hover { transform: translateY(-2px); border-color: var(--primary); background: var(--bg-card-hover); }
.cbn-quick-btn:active { transform: scale(0.97); }
.cbn-q-emo { grid-row: 1 / 3; font-size: 2rem; line-height: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; }
.cbn-q-daily .cbn-q-emo { background: rgba(250, 204, 21, 0.2); }
.cbn-q-surprise .cbn-q-emo { background: rgba(236, 72, 153, 0.18); }
.cbn-q-photo .cbn-q-emo { background: rgba(56, 189, 248, 0.18); }
.cbn-q-pixel .cbn-q-emo { background: rgba(16, 185, 129, 0.18); }
.cbn-quick-btn b { font-size: 1.05rem; }
.cbn-quick-btn small { font-family: var(--font-body); color: var(--text-muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cbn-filters { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cbn-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cbn-countrow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.cbn-count { font-family: var(--font-display); font-weight: 600; color: var(--text-muted); }
.cbn-offline { font-size: 0.85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(16, 185, 129, 0.16); color: var(--success); }

.cbn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.cbn-card { position: relative; min-width: 0; }
.cbn-card-main {
  width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 10px 10px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card);
  transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cbn-card-main:hover { transform: translateY(-3px); border-color: var(--primary); background: var(--bg-card-hover); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.cbn-card-main:active { transform: scale(0.97); }
.cbn-thumb {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden; background: #ffffff;
  background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px); background-size: 10px 10px;
}
.cbn-thumb canvas { width: 88%; height: 88%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.cbn-done-badge {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--success); color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.45);
}
.cbn-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-card-meta { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); }
.cbn-tier { font-weight: 700; font-family: var(--font-display); }
.cbn-tier-easy { color: #22c55e; }
.cbn-tier-medium { color: #38bdf8; }
.cbn-tier-big { color: #f59e0b; }
.cbn-card-bar, .cbn-progress { display: block; height: 7px; border-radius: 99px; background: var(--border-color); overflow: hidden; }
.cbn-card-bar i, .cbn-progress i { display: block; height: 100%; width: 0; background: var(--grad-main); border-radius: inherit; transition: width 0.3s; }
.cbn-is-done .cbn-card-bar i { background: var(--success); }
.cbn-card-del {
  position: absolute; top: 14px; left: 14px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px;
  border: 1px solid var(--border-color); background: var(--cbn-solid); cursor: pointer; font-size: 0.95rem;
}
.cbn-card-del.cbn-sure { background: var(--danger); color: #fff; font-size: 0.8rem; font-weight: 700; }
.cbn-new .cbn-card-main { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.35); }
.cbn-empty { grid-column: 1 / -1; text-align: center; padding: 34px 16px; border-radius: 22px; border: 2px dashed var(--border-color); font-family: var(--font-display); font-size: 1.15rem; color: var(--text-muted); }
.cbn-empty small { font-family: var(--font-body); font-size: 0.9rem; }

/* ── Coloring screen ─────────────────────────────────────────── */
.cbn-play {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 26px; padding: 12px;
}
.cbn-bar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cbn-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cbn-ptitle { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-progress { height: 10px; }
.cbn-pct { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; min-width: 3.2em; text-align: right; }
.cbn-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbn-sep { flex: 1; }
.cbn-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cbn-stage {
  position: relative; width: 100%; min-width: 0;
  height: clamp(300px, calc(100dvh - 370px), 760px);
  border-radius: 20px; overflow: hidden;
  background-color: var(--cbn-stage);
  background-image: radial-gradient(var(--cbn-stage-dot) 1.2px, transparent 1.2px); background-size: 18px 18px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cbn-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; outline: none; touch-action: none; }
.cbn-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--secondary); }
.cbn-stage.cbn-hand canvas { cursor: grab; }
.cbn-stage.cbn-grabbing canvas { cursor: grabbing; }
.cbn-stage.cbn-shake { animation: cbnShake 0.36s ease; }
@keyframes cbnShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.cbn-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cbn-tip {
  margin: 0; min-height: 1.5em; font-size: 0.95rem; font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cbn-palette {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.55) transparent; overscroll-behavior: contain; min-width: 0;
}
.cbn-palette::-webkit-scrollbar { height: 6px; width: 6px; }
.cbn-palette::-webkit-scrollbar-track { background: transparent; }
.cbn-palette::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.55); border-radius: 99px; }
.cbn-swatch {
  flex: 0 0 auto; width: 60px; height: 60px; padding: 0; border: none; background: transparent; cursor: pointer;
  border-radius: 50%; transition: transform 0.15s;
}
.cbn-swatch:active { transform: scale(0.92); }
.cbn-sw-ring {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(var(--success) var(--p, 0deg), var(--border-color) var(--p, 0deg));
  padding: 4px; transition: box-shadow 0.2s;
}
.cbn-sw-dot {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--c); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.cbn-sw-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1;
  color: #1f2433; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.cbn-dark .cbn-sw-num { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.cbn-swatch.active { transform: translateY(-3px) scale(1.06); }
.cbn-swatch.active .cbn-sw-ring { box-shadow: 0 0 0 3px var(--secondary), 0 8px 18px rgba(236, 72, 153, 0.35); }
.cbn-swatch.cbn-sw-done { opacity: 0.7; }
.cbn-swatch.cbn-sw-done.active { opacity: 1; }
.cbn-nudge { animation: cbnNudge 0.5s ease; }
@keyframes cbnNudge { 0%, 100% { transform: none; } 30% { transform: translateY(-7px) scale(1.1); } 60% { transform: translateY(0) scale(0.97); } }

#cbn-section.cbn-playing .view-header { margin-bottom: 14px; }
#cbn-section.cbn-playing .view-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0; }
#cbn-section.cbn-playing .view-subtitle { display: none; }

/* Big screen: the coloring area covers the whole window */
#cbn-section.cbn-full-host { animation: none !important; transform: none !important; }
.cbn-play.cbn-full {
  position: fixed; inset: 0; z-index: 1100; border-radius: 0; border: none;
  background: var(--bg-app); padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.cbn-play.cbn-full .cbn-body { flex: 1; min-height: 0; }
.cbn-play.cbn-full .cbn-stage { flex: 1; height: auto; min-height: 0; }
body:has(#cbn-section.active .cbn-play.cbn-full) .mobile-top-bar { display: none; }

/* Landscape phones & tablets in the car: palette goes to the side, bar + tools share a row */
@media (orientation: landscape) and (max-height: 620px) {
  .cbn-play { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; gap: 8px; }
  .cbn-bar { flex: 1 1 260px; }
  .cbn-tools { flex: 0 1 auto; flex-wrap: nowrap; gap: 4px; }
  .cbn-tools .cbn-btn { min-height: 42px; min-width: 42px; padding: 4px 8px; }
  .cbn-lbl, .cbn-sep { display: none; }
  .cbn-body { flex: 1 1 100%; flex-direction: row; }
  .cbn-stage { flex: 1; height: calc(100dvh - 178px); min-height: 190px; }
  .cbn-play.cbn-full { align-content: flex-start; }
  .cbn-play.cbn-full .cbn-body { flex: 1 1 100%; }
  .cbn-play.cbn-full .cbn-stage { flex: 1; height: calc(100dvh - 82px); }
  .cbn-side { width: 140px; flex: 0 0 140px; min-height: 0; }
  .cbn-palette { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; align-content: flex-start; max-height: calc(100dvh - 200px); }
  .cbn-play.cbn-full .cbn-palette { max-height: calc(100dvh - 140px); }
  .cbn-swatch { width: 52px; height: 52px; }
  .cbn-tip { font-size: 0.8rem; -webkit-line-clamp: 3; }
  #cbn-section.cbn-playing .view-header { display: none; }
}

/* ── Modals ──────────────────────────────────────────────────── */
.cbn-modal {
  position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(5, 8, 18, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--text-main); font-family: var(--font-body);
}
.cbn-modal-card {
  width: min(560px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto;
  background: var(--cbn-solid); border: 1px solid var(--border-color); border-radius: 26px; padding: 18px;
  box-shadow: var(--shadow-lg); animation: cbnPop 0.25s ease-out;
}
@keyframes cbnPop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.cbn-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cbn-modal-head h3 { font-family: var(--font-display); font-size: 1.45rem; margin: 0; }
.cbn-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cbn-done { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cbn-done-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0; }
.cbn-replay-wrap {
  display: grid; place-items: center; padding: 12px; border-radius: 18px;
  background: linear-gradient(135deg, #fdf2ff, #e7f3ff);
}
.cbn-replay { max-width: 100%; width: auto; max-height: min(42dvh, 360px); image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; box-shadow: 0 8px 20px rgba(40, 20, 90, 0.2); }
.cbn-replay-btn { align-self: center; }
.cbn-save-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cbn-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); min-width: 0; }
.cbn-field input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; font-size: 1rem; font-family: var(--font-body);
  border: 1px solid var(--border-color); background: var(--cbn-ctl); color: var(--text-main);
}
.cbn-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.cbn-field input.cbn-need { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
.cbn-done-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbn-done-grid .cbn-big-btn { grid-column: 1 / -1; }
.cbn-act {
  min-height: 50px; padding: 8px 10px; border-radius: 14px; cursor: pointer; font-size: 0.98rem; font-weight: 600;
  border: 1px solid var(--border-color); background: var(--cbn-ctl); transition: border-color 0.2s, transform 0.15s;
}
.cbn-act:hover:not(:disabled) { border-color: var(--primary); }
.cbn-act:active:not(:disabled) { transform: scale(0.96); }
.cbn-act:disabled { opacity: 0.6; cursor: default; }

.cbn-photo { display: flex; flex-direction: column; gap: 12px; }
.cbn-file-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 18px;
  border-radius: 16px; border: 2px dashed var(--primary); background: rgba(139, 92, 246, 0.1);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.cbn-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cbn-photo-prev {
  display: grid; place-items: center; min-height: 170px; padding: 12px; border-radius: 18px; text-align: center;
  background: var(--cbn-surface); border: 1px solid var(--border-color);
}
.cbn-photo-prev canvas { width: min(240px, 70vw); height: auto; max-height: 240px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; }
.cbn-opt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbn-opt-label { font-family: var(--font-display); font-weight: 700; color: var(--text-muted); min-width: 56px; }
.cbn-opt .cbn-chip { min-width: 46px; justify-content: center; padding: 6px 10px; }
.cbn-photo-note { margin: 0; }

/* Confetti — a single short burst, never looping */
.cbn-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1700; overflow: hidden; }
.cbn-confetti i {
  position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px;
  animation-name: cbnFall; animation-timing-function: cubic-bezier(0.3, 0.6, 0.6, 1); animation-fill-mode: forwards;
}
@keyframes cbnFall { to { transform: translateY(105vh) rotate(var(--r, 360deg)); opacity: 0.2; } }

@media (prefers-reduced-motion: reduce) {
  .cbn-stage.cbn-shake, .cbn-nudge, .cbn-modal-card { animation: none; }
  .cbn-card-main, .cbn-quick-btn, .cbn-btn, .cbn-swatch { transition: none; }
}

/* ── Phones ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cbn-app { --cbn-tap: 42px; }
  #cbn-section.cbn-playing .view-header { display: none; }
  .cbn-lib { gap: 12px; }
  .cbn-continue { grid-template-columns: 72px minmax(0, 1fr); padding: 12px; gap: 12px; border-radius: 20px; }
  .cbn-continue .cbn-big-btn { grid-column: 1 / -1; }
  .cbn-cont-thumb { width: 72px; height: 72px; }
  .cbn-cont-name { font-size: 1.1rem; }
  .cbn-quick { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cbn-quick-btn { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 10px; min-height: 0; row-gap: 2px; border-radius: 16px; }
  .cbn-q-emo { grid-row: auto; width: 38px; height: 38px; font-size: 1.5rem; border-radius: 11px; margin-bottom: 2px; }
  .cbn-quick-btn b { font-size: 0.95rem; }
  .cbn-quick-btn small { font-size: 0.75rem; }
  .cbn-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .cbn-chips::-webkit-scrollbar { display: none; }
  .cbn-chip { min-height: 38px; padding: 6px 12px; font-size: 0.85rem; }
  .cbn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cbn-card-main { padding: 8px 8px 10px; border-radius: 16px; }
  .cbn-card-name { font-size: 0.9rem; }
  .cbn-card-meta { font-size: 0.7rem; }
  .cbn-card-del { top: 12px; left: 12px; min-width: 36px; height: 36px; }

  .cbn-play { padding: 8px; border-radius: 20px; gap: 8px; }
  .cbn-bar { gap: 8px; }
  .cbn-lbl { display: none; }
  .cbn-btn { padding: 6px 8px; font-size: 1.05rem; }
  .cbn-ptitle { font-size: 1rem; }
  .cbn-pct { font-size: 0.95rem; min-width: 2.8em; }
  .cbn-tools { flex-wrap: nowrap; gap: 4px; justify-content: space-between; }
  .cbn-tools .cbn-btn { flex: 1 1 0; min-width: 0; }
  .cbn-sep { display: none; }
  .cbn-badge { min-width: 18px; height: 18px; font-size: 0.7rem; padding: 0 4px; }
  .cbn-stage { height: calc(100dvh - 318px); min-height: 250px; border-radius: 16px; }
  .cbn-swatch { width: 54px; height: 54px; }
  .cbn-tip { font-size: 0.85rem; }
  .cbn-save-fields { grid-template-columns: 1fr; }
  .cbn-modal-card { padding: 14px; border-radius: 22px; }
  .cbn-modal-head h3 { font-size: 1.25rem; }
}

/* ── Masterpieces, mini-map ───────────────────────────────────── */
.cbn-tier-master { color: #e879f9; }
.cbn-q-team .cbn-q-emo { background: rgba(250, 204, 21, 0.18); }
.cbn-q-room .cbn-q-emo { background: rgba(99, 102, 241, 0.2); }
.cbn-q-master .cbn-q-emo { background: rgba(232, 121, 249, 0.2); }
.cbn-mini {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; display: block;
  border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.9); background: #ffffff;
  box-shadow: 0 6px 18px rgba(8, 10, 30, 0.35); cursor: pointer; touch-action: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.cbn-stage .cbn-mini { inset: auto 10px 10px auto; width: auto; height: auto; cursor: pointer; }

/* ── Whose turn banner ───────────────────────────────────────── */
.cbn-turn {
  position: absolute; left: 50%; top: 16px; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px; border-radius: 999px;
  background: var(--pc, var(--primary)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  box-shadow: 0 10px 26px rgba(8, 10, 30, 0.35); pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px);
}
.cbn-turn span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cbn-turn-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); font-size: 1.6rem; flex: 0 0 auto; }
.cbn-turn-in { animation: cbnTurnIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cbnTurnIn { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ── Players bar (team + rooms) ──────────────────────────────── */
.cbn-team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cbn-pls { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; min-width: 0; flex: 1 1 auto; scrollbar-width: none; }
.cbn-pls::-webkit-scrollbar { display: none; }
.cbn-pl {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 12px 4px 4px;
  border-radius: 999px; border: 2px solid var(--border-color); background: var(--cbn-ctl); cursor: pointer; overflow: hidden;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.cbn-pl[aria-disabled="true"] { cursor: default; }
.cbn-pl:not([aria-disabled="true"]):active { transform: scale(0.96); }
.cbn-pl.active { border-color: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 35%, transparent), 0 6px 14px rgba(0, 0, 0, 0.18); }
.cbn-pl:not(.active) { opacity: 0.78; }
.cbn-pl-off { opacity: 0.5 !important; }
.cbn-pl-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: var(--pc); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.cbn-pl-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.cbn-pl-name { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-pl-name small { font-weight: 600; color: var(--text-muted); }
.cbn-pl-n { font-size: 0.85rem; color: var(--pc); font-family: var(--font-display); }
.cbn-pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--border-color); }
.cbn-pl-bar i { display: block; height: 100%; background: var(--pc); transition: width 0.3s; }
.cbn-pl-dot { position: absolute; top: 5px; left: 33px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--cbn-solid); }
.cbn-pl-off .cbn-pl-dot { background: var(--text-faint, #94a3b8); }
.cbn-pl-win { border-color: #f59e0b !important; }
.cbn-next { min-height: 48px; padding: 8px 18px; font-size: 1rem; flex: 0 0 auto; max-width: 100%; }
.cbn-next, .cbn-pl-name { -webkit-tap-highlight-color: transparent; }
.cbn-room-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
.cbn-code-chip b { letter-spacing: 0.12em; font-size: 1.05rem; }
.cbn-net { font-size: 0.85rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--cbn-surface); border: 1px solid var(--border-color); }
.cbn-net-ok { color: var(--success); }
.cbn-net-retry { color: #d97706; }
.cbn-net-off, .cbn-net-closed { color: var(--danger); }
.cbn-leave { margin-left: auto; }
.cbn-leave.cbn-sure { background: var(--danger); color: #fff; border-color: transparent; }
.cbn-play.cbn-mp .cbn-stage { height: clamp(280px, calc(100dvh - 440px), 740px); }

/* ── Library: team / room "keep going" cards ─────────────────── */
.cbn-cont-mp { background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(16, 185, 129, 0.16)); border-color: rgba(250, 204, 21, 0.4); }
.cbn-cont-room { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(56, 189, 248, 0.18)); border-color: rgba(99, 102, 241, 0.4); }
.cbn-cont-players { display: flex; flex-wrap: wrap; gap: 6px; }
.cbn-mini-pl { font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--pc); color: #fff; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-cont-acts { display: flex; gap: 8px; align-items: center; }
.cbn-cont-emo { font-size: 2.6rem; }

/* ── Setup modals ────────────────────────────────────────────── */
.cbn-setup { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cbn-setup-intro { margin: 0; }
.cbn-prows { display: flex; flex-direction: column; gap: 8px; }
.cbn-prow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center;
  padding: 10px; border-radius: 18px; border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 10%, transparent);
}
.cbn-av-btn {
  grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.9rem;
  background: var(--pc); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55); transition: transform 0.15s;
}
.cbn-av-btn:active { transform: scale(0.9) rotate(-8deg); }
.cbn-pname input { min-height: 42px; }
.cbn-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.cbn-col-dot { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; background: var(--dc); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.cbn-col-dot.active { border-color: var(--text-main); transform: scale(1.1); }
.cbn-mode-note { margin: 0; min-height: 2.6em; }
.cbn-warn { margin: 0; color: #d97706; }
.cbn-setup-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cbn-pick-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cbn-pick-wrap .cbn-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.cbn-pick-wrap .cbn-chips::-webkit-scrollbar { display: none; }
.cbn-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
  max-height: 248px; overflow-y: auto; padding: 2px; overscroll-behavior: contain;
}
.cbn-pick {
  display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; cursor: pointer; min-width: 0;
  border: 2px solid var(--border-color); background: var(--bg-card); text-align: left;
}
.cbn-pick.active { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.3); }
.cbn-pick .cbn-thumb { border-radius: 10px; }
.cbn-pick-name { font-size: 0.75rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbn-seg .cbn-chip { justify-content: center; min-height: 48px; font-size: 1rem; }
.cbn-code-in { text-transform: uppercase; letter-spacing: 0.45em; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem !important; text-align: center; }
.cbn-room-msg { margin: 0; font-weight: 600; padding: 8px 12px; border-radius: 12px; background: var(--cbn-surface); border: 1px solid var(--border-color); }
.cbn-room-msg.cbn-err { color: var(--danger); border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.cbn-grownup { margin: 0; font-size: 0.8rem; }
.cbn-offline-box { text-align: center; align-items: center; }
.cbn-offline-box p { margin: 0; }
.cbn-big-emo { font-size: 3rem; line-height: 1; }
.cbn-code-show { text-align: center; align-items: center; }
.cbn-code-show p { margin: 0; }
.cbn-code-big { display: flex; gap: 8px; justify-content: center; }
.cbn-code-big span {
  width: 58px; height: 70px; display: grid; place-items: center; border-radius: 16px;
  background: var(--grad-main); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 2.3rem;
  box-shadow: 0 8px 18px var(--primary-glow);
}

/* ── Team results ────────────────────────────────────────────── */
.cbn-res-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cbn-donut {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.cbn-donut span {
  width: 72px; height: 72px; border-radius: 50%; background: var(--cbn-solid); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05; font-family: var(--font-display);
}
.cbn-donut b { font-size: 1.3rem; }
.cbn-donut small { font-size: 0.7rem; color: var(--text-muted); }
.cbn-res-toggle { justify-content: center; }
.cbn-res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cbn-res-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--cbn-surface);
}
.cbn-res-mvp { border: 2px solid #f59e0b; background: rgba(245, 158, 11, 0.1); }
.cbn-res-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--pc); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.cbn-res-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cbn-res-name { font-family: var(--font-display); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-mvp { display: inline-block; margin-left: 4px; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: #f59e0b; color: #fff; vertical-align: middle; animation: cbnNudge 0.6s ease 0.4s; }
.cbn-res-bar { display: block; height: 12px; border-radius: 99px; background: var(--border-color); overflow: hidden; }
.cbn-res-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pc); }
.cbn-res-num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-align: right; display: flex; flex-direction: column; line-height: 1.05; }
.cbn-res-num small { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.cbn-win-hero {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 85%, #fff), var(--pc)); color: #fff;
  font-family: var(--font-display); font-size: 1.4rem; text-align: center;
}
.cbn-win-av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; background: rgba(255, 255, 255, 0.92); flex: 0 0 auto; }
.cbn-win-trophy { font-size: 2.4rem; animation: cbnNudge 0.7s ease 0.3s 2; }

@media (prefers-reduced-motion: reduce) {
  .cbn-turn-in, .cbn-mvp, .cbn-win-trophy { animation: none; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .cbn-team { gap: 6px; }
  .cbn-pls { flex-direction: column; overflow: visible; }
  .cbn-pl { min-height: 40px; padding-right: 8px; }
  .cbn-pl-av { width: 30px; height: 30px; font-size: 1.05rem; }
  .cbn-pl-name { max-width: 5.5em; font-size: 0.8rem; }
  .cbn-next { min-height: 40px; padding: 6px 10px; font-size: 0.85rem; white-space: normal; }
  .cbn-room-row { flex-direction: column; align-items: stretch; }
  .cbn-play.cbn-mp .cbn-stage { height: calc(100dvh - 178px); }
  .cbn-play.cbn-mp.cbn-full .cbn-stage { height: calc(100dvh - 82px); }
  .cbn-mp .cbn-side { overflow-y: auto; max-height: calc(100dvh - 120px); }
  /* the palette matters most in the car: badges shrink to animal + count */
  .cbn-pls { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .cbn-pl { padding: 2px 6px 2px 2px; gap: 4px; min-height: 36px; }
  .cbn-pl-name { display: none; }
  .cbn-pl-av { width: 30px; height: 30px; }
  .cbn-next-name { display: none; }
  .cbn-next { flex: 1 1 100%; }
  .cbn-mp .cbn-tip { -webkit-line-clamp: 2; font-size: 0.75rem; }
}
@media (max-width: 600px) {
  .cbn-quick { grid-template-columns: 1fr 1fr; }
  .cbn-cont-acts { grid-column: 1 / -1; }
  .cbn-cont-acts .cbn-big-btn { flex: 1; }
  .cbn-pl { min-height: 44px; padding-right: 10px; gap: 6px; }
  .cbn-pl-av { width: 34px; height: 34px; font-size: 1.2rem; }
  .cbn-pl-name { max-width: 6.5em; font-size: 0.85rem; }
  .cbn-pl-dot { left: 29px; }
  .cbn-next { flex: 1 1 100%; min-height: 46px; }
  .cbn-play.cbn-mp .cbn-stage { height: calc(100dvh - 386px); min-height: 220px; }
  .cbn-play.cbn-mp.cbn-turns .cbn-stage { height: calc(100dvh - 440px); }
  .cbn-play.cbn-mp.cbn-full .cbn-stage { height: auto; }
  .cbn-mp .cbn-tip { -webkit-line-clamp: 1; min-height: 0; }
  .cbn-next { min-height: 44px; padding: 6px 14px; }
  .cbn-mini { right: 8px; bottom: 8px; }
  .cbn-turn { font-size: 1.05rem; top: 10px; }
  .cbn-turn-av { width: 36px; height: 36px; font-size: 1.3rem; }
  .cbn-res-top { grid-template-columns: 1fr; justify-items: center; }
  .cbn-donut { width: 100px; height: 100px; }
  .cbn-donut span { width: 60px; height: 60px; }
  .cbn-code-big span { width: 50px; height: 60px; font-size: 2rem; }
  .cbn-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 220px; }
  .cbn-col-dot { width: 28px; height: 28px; }
  .cbn-av-btn { width: 50px; height: 50px; font-size: 1.6rem; }
  .cbn-win-hero { font-size: 1.15rem; flex-wrap: wrap; }
}

/* ── v3: ⭐⭐⭐ Epic tier, lazy thumbnails, next picture, tallies, leave ── */
.cbn-tier-epic { color: #f97316; }
.cbn-thumb .cbn-thumb-emo {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; opacity: 0.55;
  pointer-events: none; transition: opacity 0.25s;
}
.cbn-thumb.cbn-thumb-ready .cbn-thumb-emo { opacity: 0; }
.cbn-thumb:not(.cbn-thumb-ready) canvas { opacity: 0; }
.cbn-thumb canvas { transition: opacity 0.25s; }
.cbn-pick .cbn-thumb .cbn-thumb-emo { font-size: 1.5rem; }
.cbn-tally {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; white-space: nowrap;
  background: rgba(245, 158, 11, 0.16); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4);
}
[data-theme="light"] .cbn-app .cbn-tally, [data-theme="light"] .cbn-modal .cbn-tally { color: #b45309; }
.cbn-host-next { background: var(--grad-main); color: #fff !important; border-color: transparent; }
.cbn-done-grid .cbn-next-btn, .cbn-done-grid .cbn-alt-btn { grid-column: 1 / -1; }
.cbn-alt-btn { background: var(--cbn-ctl); color: var(--text-main) !important; border: 2px solid var(--primary); box-shadow: none; }
.cbn-wait {
  margin: 0; text-align: center; font-weight: 600; padding: 10px 12px; border-radius: 14px;
  background: var(--cbn-surface); border: 1px dashed var(--border-color); color: var(--text-muted);
}
.cbn-tally-line { margin: 0; font-weight: 600; }
.cbn-running { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.35); }
.cbn-run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cbn-run-list li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 2px solid var(--pc); background: var(--cbn-ctl); font-family: var(--font-display);
}
.cbn-run-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); font-size: 1.05rem; }
.cbn-run-name { font-weight: 700; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-run-list small { color: var(--text-muted); font-size: 0.72rem; }
.cbn-run-wins { font-size: 0.85rem; }
.cbn-sugg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cbn-sugg-card { position: relative; }
.cbn-sugg-tier { font-size: 0.72rem; font-weight: 700; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbn-next-modal .cbn-pick-grid { max-height: 210px; }
.cbn-leave-box { text-align: center; }
.cbn-leave-box p { margin: 0 0 4px; }
.cbn-act-danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.45); }
.cbn-act-danger:hover:not(:disabled) { border-color: var(--danger); background: rgba(239, 68, 68, 0.08); }
@media (max-width: 600px) {
  .cbn-sugg { gap: 6px; }
  .cbn-sugg-tier { font-size: 0.65rem; }
  .cbn-tally { min-height: 32px; padding: 3px 10px; font-size: 0.82rem; }
  .cbn-room-row { gap: 6px; }
  .cbn-room-row .cbn-chip { min-height: 36px; padding: 4px 10px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .cbn-tally { min-height: 30px; font-size: 0.78rem; }
}