/* ── Swipe topic carousel ─────────────────────────────────────────────────
   Shared by every game's setup screen (index.html, crane.html, math-hunt.html)
   together with carousel.js. Give the screen's root the `cs-root` class.
   Colours come from the host page's own tokens when it has them, with the
   main game's palette as the fallback (Math Hunt, for one, has no --accent). */
.cs-root {
  --cs-card:var(--card,#1a1930); --cs-accent:var(--accent,#7c3aed); --cs-lite:var(--lite,#a78bfa);
  --cs-text:var(--text,#f1f5f9); --cs-sub:var(--sub,#94a3b8); --cs-bg:var(--bg,#0f0e1a);
  --cs-yellow:var(--yellow,#f59e0b); --cs-green:var(--green,#22c55e);
  --cs-bleed:16px;   /* how far the carousel and chips reach past the side padding */
}
/* Components below set display:flex/grid, which would beat the [hidden] attribute. */
.cs-root [hidden] { display:none !important; }
/* Each game's setup uses its own card colour from the game-select screens
   (index.html #solo-select-screen): the card background as the accent, and the
   card's light text colour for descriptions, the selected chip and the dots.
   --cs-lip is a darker shade of the card colour: the raised edge under the
   selected topic, and the text colour on anything filled with --cs-lite. */
.cs-root { --cs-lip:#3b1d7a; }
.cs-root.cs-game-classic { --cs-accent:#1e3a6e; --cs-lite:#c8deff; --cs-lip:#0f2244; }
.cs-root.cs-game-match   { --cs-accent:#1a4030; --cs-lite:#c0f0d8; --cs-lip:#0c2419; }
.cs-root.cs-game-crane   { --cs-accent:#2d1e5c; --cs-lite:#ddd0ff; --cs-lip:#180e36; }
.cs-root.cs-game-hunt    { --cs-accent:#0d3535; --cs-lite:#b0f0f0; --cs-lip:#062020; }
/* Header: Back alone on the top row, then the title centred with the wallet under it. */
.cs-topbar { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px; }
.cs-topbar .back { align-self:flex-start; margin:0 0 12px; }
.cs-title { font-weight:900; font-size:1.6rem; text-align:center; }
.cs-wallet { background:var(--cs-card); border-radius:999px; padding:5px 11px; font-weight:800; font-size:.82rem; color:var(--cs-yellow); white-space:nowrap; }
.cs-hint { text-align:center; font-size:.78rem; color:var(--cs-sub); margin-bottom:12px; }
.cs-section-lab { font-size:.72rem; font-weight:800; color:var(--cs-sub); margin-bottom:7px; letter-spacing:.08em; text-transform:uppercase; }

.cs-chips { display:flex; gap:6px; overflow-x:auto; margin:0 calc(-1 * var(--cs-bleed)) 18px; padding:0 var(--cs-bleed) 4px; scrollbar-width:none; }
.cs-chips::-webkit-scrollbar { display:none; }
.cs-chips button { flex:0 0 auto; background:var(--cs-card); border:none; border-radius:999px; padding:6px 11px; font-size:.75rem; font-weight:800; color:var(--cs-sub); white-space:nowrap; cursor:pointer; font-family:inherit; }
.cs-chips button.on { background:var(--cs-lite); color:var(--cs-lip); }

.cs-carousel { position:relative; margin:0 calc(-1 * var(--cs-bleed)); }
.cs-root .cs-track { display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 14% 14px; margin:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cs-root .cs-track::-webkit-scrollbar { display:none; }
.cs-root .cs-slide {
  flex:0 0 72%; scroll-snap-align:center; background:var(--cs-card); border:none; border-radius:24px;
  position:relative; padding:18px 14px; display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--cs-text); transform:scale(.9); opacity:.55; transition:transform .25s, background .25s, opacity .25s, box-shadow .25s;
}
/* The selected topic sits up on a darker edge, like the PLAY button below it. */
.cs-root .cs-slide.selected { transform:scale(1); opacity:1; background:var(--cs-accent); color:#fff; border:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cs-lite) 30%, transparent), 0 5px 0 var(--cs-lip); }
/* "3 / 11" (added by carousel.js) top-left and the topic's stars top-right. */
.cs-slide .cs-count { position:absolute; top:12px; left:12px; font-size:.68rem; font-weight:800; color:var(--cs-sub); background:rgba(255,255,255,.1); border-radius:20px; padding:3px 8px; font-variant-numeric:tabular-nums; }
.cs-slide.selected .cs-count { color:var(--cs-lite); background:rgba(255,255,255,.14); }
.cs-slide .cs-e { font-size:3rem; line-height:1.1; }
.cs-slide.selected .cs-e { animation:csBob 2s ease-in-out infinite; }
@keyframes csBob { 50% { transform:translateY(-5px); } }
.cs-slide .cs-n { font-weight:900; font-size:1.25rem; margin-top:6px; }
.cs-slide .cs-d { font-size:.75rem; color:var(--cs-sub); margin-bottom:12px; font-weight:600; }
.cs-slide.selected .cs-d { color:var(--cs-lite); }
.cs-slide .cs-q { align-self:stretch; background:rgba(0,0,0,.28); border-radius:14px; padding:10px 6px; font-weight:900; font-size:1.3rem; min-height:52px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.cs-slide .cs-q.long { font-size:.85rem; line-height:1.3; }
.cs-q .ans { color:#fde68a; }
.cs-q .caret { display:inline-block; width:2px; height:1em; background:#fde68a; margin-left:1px; animation:csBlink 1s steps(1) infinite; }
@keyframes csBlink { 50% { opacity:0; } }
.cs-slide .cs-tstars { position:absolute; top:13px; right:14px; font-size:.85rem; line-height:1; color:var(--cs-yellow); letter-spacing:1px; }
.cs-tstars .off { color:rgba(255,255,255,.2); }
.cs-arrow { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:none; background:rgba(15,14,26,.85); color:var(--cs-text); font-size:1.2rem; z-index:2; cursor:pointer; }
.cs-arrow.l { left:6px; } .cs-arrow.r { right:6px; }
@media (hover:none) { .cs-arrow { display:none; } }
.cs-dots { display:flex; justify-content:center; gap:5px; margin:14px 0 28px; }
.cs-dots span { width:6px; height:6px; border-radius:3px; background:#3a3858; transition:width .2s, background .2s; }
.cs-dots span.on { width:18px; background:var(--cs-lite); }

/* Difficulty and the folded settings are segmented bars: one dark track, the
   chosen option filled with the game's light colour. */
.cs-root .cs-flames { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--cs-card); border-radius:14px; padding:4px; margin-bottom:14px; }
.cs-root .cs-flames .pill { background:none; border:none; border-radius:10px; min-height:44px; padding:5px 0; font-size:.75rem; font-weight:800; color:var(--cs-sub); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.cs-root .cs-flames .f { font-size:1rem; letter-spacing:-2px; filter:grayscale(1); opacity:.45; }
.cs-root .cs-flames .pill.selected { background:var(--cs-lite); border:none; color:var(--cs-lip); }
.cs-root .cs-flames .pill.selected .f { filter:none; opacity:1; }

.cs-setline { width:100%; min-height:44px; display:flex; align-items:center; gap:8px; background:var(--cs-card); border:none; border-radius:12px; font-family:inherit; font-size:.8rem; color:var(--cs-sub); padding:10px 12px; margin-bottom:14px; cursor:pointer; text-align:left; }
.cs-setline b { color:var(--cs-text); }
.cs-setline .chev { margin-left:auto; transition:transform .2s; }
.cs-setline[aria-expanded="true"] .chev { transform:rotate(180deg); }
.cs-sets { display:grid; gap:12px; margin-bottom:18px; }
.cs-lab { font-size:.68rem; color:var(--cs-sub); font-weight:800; margin-bottom:6px; letter-spacing:.08em; text-transform:uppercase; }
.cs-root .cs-sets .pill-group { margin:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; background:var(--cs-card); border-radius:14px; padding:4px; }
.cs-root .cs-sets .pill { background:none; border:none; border-radius:10px; min-height:40px; padding:6px 4px; font-size:.78rem; font-weight:800; white-space:nowrap; }
.cs-root .cs-sets .pill.selected { background:var(--cs-lite); color:var(--cs-lip); }
.cs-style-note { font-size:.72rem; color:var(--cs-sub); margin-top:5px; }

.cs-play { display:block; width:100%; border:none; border-radius:16px; padding:14px; font-family:inherit; font-size:1.15rem; font-weight:900; letter-spacing:1px; background:var(--cs-green); color:#052e16; box-shadow:0 5px 0 #15803d; cursor:pointer; transition:transform .08s, box-shadow .08s; }
.cs-play:active { transform:translateY(4px); box-shadow:0 1px 0 #15803d; }
/* Second choice under PLAY, e.g. "Join with Code" on a multiplayer setup. */
.cs-alt { display:block; width:100%; min-height:48px; margin-top:12px; border:2px solid color-mix(in srgb, var(--cs-lite) 35%, transparent); border-radius:16px; background:var(--cs-card); color:var(--cs-text); font-family:inherit; font-size:.95rem; font-weight:800; cursor:pointer; }
.cs-alt:active { transform:scale(.98); }

.cs-today { margin-top:22px; }
.cs-today h3 { font-size:.9rem; font-weight:900; margin-bottom:8px; }
.cs-daily { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#7c2d12,#9a3412); border-radius:18px; padding:14px; color:#fff; }
.cs-daily-e { font-size:2.1rem; }
.cs-daily-txt { min-width:0; }
.cs-daily-t { font-weight:900; }
.cs-daily-m { font-size:.75rem; color:#fed7aa; }
.cs-daily-go { margin-left:auto; background:#fff; color:#7c2d12; font-weight:900; border:none; border-radius:12px; padding:8px 14px; font-size:.82rem; cursor:pointer; font-family:inherit; }
.cs-daily.done { opacity:.6; }
.cs-daily.done .cs-daily-go { background:#fed7aa; cursor:default; }
@media (prefers-reduced-motion:reduce) { .cs-slide .cs-e, .cs-q .caret { animation:none; } }
.cs-below { margin-top:22px; }
.cs-root .cs-flames .pill { cursor:pointer; font-family:inherit; }