/* Cold Trail (.ct-), Until Dawn (.ud-) and Down the Rabbit Hole (.rh-): the free-play chrome as cartoon
   chips and sticker panels. Colors come only from tokens. */

/* ---------- Shared layout: stat chips, overlay, sheet ---------- */

.ct-root, .ud-root, .rh-root { display: flex; flex-direction: column; gap: 14px; max-width: 960px; margin: 0 auto; }

.ct-bar, .ud-bar, .rh-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.ct-bar > .btn, .ud-bar > .btn, .rh-bar > .btn { margin-right: auto; background: var(--sb-chip); border-color: var(--sb-outline); box-shadow: 0 3px 0 var(--sb-outline); }

.ct-stat, .ud-stat, .rh-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 14px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-chip);
  color: var(--sb-chip-ink);
  box-shadow: 0 3px 0 var(--sb-outline);
}
.ct-stat-label, .ud-stat-label, .rh-stat-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sb-card-muted);
  white-space: nowrap;
}
.ct-stat-value, .ud-stat-value, .rh-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  color: var(--sb-chip-ink);
}

.ct-overlay, .ud-overlay, .rh-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  cursor: pointer;
}
.ct-overlay[hidden], .ud-overlay[hidden], .rh-overlay[hidden] { display: none; }

.ct-sheet, .ud-sheet, .rh-sheet {
  width: min(100%, 460px);
  max-height: 100%;
  overflow: auto;
  padding: 22px 24px;
  text-align: center;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius);
  box-shadow: inset 0 -5px 0 var(--sb-card-2), var(--sb-pop);
  cursor: default;
}
.ct-sheet h2, .ud-sheet h2, .rh-sheet h2 { margin-bottom: 0.3em; }
.ct-sheet p, .ud-sheet p, .rh-sheet p { margin: 0 0 0.7em; }
.ct-prompt, .ud-prompt, .rh-prompt {
  display: inline-block;
  padding: 4px 16px;
  border: 2px solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-primary);
  color: var(--sb-primary-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  animation: games-b-blink 1.4s ease-in-out infinite;
}
.ct-small, .ud-small, .rh-small { font-size: 0.95rem; color: var(--sb-card-muted); }

@keyframes games-b-blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- Cold Trail ---------- */

.ct-pips { display: inline-flex; gap: 6px; align-self: center; }
.ct-pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--sb-outline);
  background: var(--sb-card);
  transition: background-color 0.3s;
}
.ct-pip-on { background: var(--sb-danger); }

.ct-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  min-height: 380px;
  padding: 16px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--wt) 24%, var(--sb-card-2));
  box-shadow: var(--sb-pop);
  outline: none;
  overflow: hidden;
}

.ct-label {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.ct-desk-wrap { min-width: 0; }
.ct-desk { display: flex; flex-direction: column; gap: 14px; min-height: 280px; border-radius: var(--radius-sm); }
.ct-desk.ct-miss { animation: ct-miss 0.25s ease-out; }

.ct-card {
  position: relative;
  padding: 12px 16px 14px;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 14px;
  color: var(--sb-card-ink);
  background-color: var(--sb-card);
  box-shadow: inset 0 -5px 0 var(--sb-card-2), var(--sb-pop);
  transition: opacity 0.4s, filter 0.4s, outline-color 0.15s;
}
.ct-card:nth-child(odd) { transform: rotate(-0.5deg); }
.ct-card:nth-child(even) { transform: rotate(0.6deg); }
.ct-in { animation: ct-drop 0.35s var(--ease-spring); }

.ct-card-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sb-card-muted);
}

.ct-text {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.8vw, 1.45rem);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ct-done { color: var(--good); }
.ct-cur { background: color-mix(in srgb, var(--sb-glow-color) 55%, transparent); border-bottom: 3px solid var(--sb-outline); border-radius: 3px; }
.ct-locked .ct-cur { background: var(--sb-primary); color: var(--sb-primary-ink); }
.ct-rest { color: var(--sb-card-ink); }

.ct-fuse {
  height: 12px;
  margin-top: 10px;
  border: 2px solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-card-2);
  overflow: hidden;
}
.ct-fuse-bar {
  height: 100%;
  width: 100%;
  background: var(--sb-primary);
  transform-origin: left center;
  will-change: transform;
}
.ct-low .ct-fuse-bar { background: var(--sb-danger); }

.ct-locked { outline: 4px solid var(--sb-glow-color); outline-offset: 2px; }
.ct-wrong { animation: ct-shake 0.22s ease-out; }
.ct-wrong .ct-cur { background: var(--sb-danger); color: var(--sb-outline); }

.ct-card-stamp {
  position: absolute;
  right: 12px;
  top: 50%;
  padding: 2px 12px;
  border: 3px solid var(--good);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--good);
  background: var(--sb-card);
  opacity: 0;
  transform: translateY(-50%) rotate(-9deg);
  pointer-events: none;
}
.ct-filed .ct-card-stamp { opacity: 1; animation: ct-stamp 0.4s var(--ease-spring); }
.ct-filed .ct-fuse { opacity: 0.4; }
.ct-cold { filter: grayscale(1); opacity: 0.6; }
.ct-cold .ct-card-stamp { opacity: 1; color: var(--sb-card-muted); border-color: var(--sb-card-muted); }
.ct-cold .ct-text { text-decoration: line-through; text-decoration-thickness: 2px; }

/* the board of filed evidence */
.ct-board {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius);
  border: var(--sb-outline-w) solid var(--sb-outline);
  background-color: color-mix(in srgb, var(--wt) 38%, var(--sb-card-2));
  background-image: radial-gradient(color-mix(in srgb, var(--sb-outline) 18%, transparent) 2px, transparent 2.5px);
  background-size: 14px 14px;
}
.ct-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ct-slot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 38px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  border: 2px solid var(--sb-outline);
  box-shadow: 0 2px 0 var(--sb-outline);
}
.ct-slot-no { color: var(--sb-card-muted); font-size: 0.85rem; font-weight: 700; }
.ct-slot-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-slot-stamp { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; }
.ct-slot-queued { background: color-mix(in srgb, var(--sb-card) 60%, transparent); color: var(--sb-card-muted); border-style: dashed; box-shadow: none; }
.ct-slot-live { color: var(--sb-card-ink); background: var(--sb-primary); color: var(--sb-primary-ink); }
.ct-slot-filed .ct-slot-stamp { color: var(--good); border: 2px solid var(--good); border-radius: 8px; padding: 0 6px; transform: rotate(-6deg); animation: ct-stamp 0.4s var(--ease-spring); }
.ct-slot-cold { filter: grayscale(1); color: var(--sb-card-muted); }
.ct-slot-cold .ct-slot-text { text-decoration: line-through; }

.ct-overlay { align-items: center; }
.ct-reveal { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; }
.ct-solved h2 { color: var(--good); }
.ct-unsolved h2 { color: var(--sb-danger); }

@keyframes ct-drop { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes ct-shake { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@keyframes ct-stamp { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }
@keyframes ct-miss { 0% { box-shadow: 0 0 0 3px var(--sb-danger); } 100% { box-shadow: 0 0 0 3px transparent; } }

@media (max-width: 760px) {
  .ct-stage { grid-template-columns: minmax(0, 1fr); padding: 12px; min-height: 0; }
  .ct-desk { min-height: 200px; }
  .ct-board-list { grid-template-columns: 1fr 1fr; }
  .ct-slot { font-size: 0.85rem; padding: 5px 10px; gap: 5px; }
  .ct-slot-stamp { display: none; }
}

/* ---------- Canvas games: shared stage ---------- */

.ud-stage, .rh-stage {
  position: relative;
  width: 100%;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: var(--radius-lg);
  background: var(--sb-deep);
  box-shadow: var(--sb-pop);
  overflow: hidden;
  outline: none;
}
.ud-wrap, .rh-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 300px;
  max-height: 72vh;
}
.ud-canvas, .rh-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: manipulation; }

@media (max-width: 700px) {
  .ud-wrap, .rh-wrap { aspect-ratio: 4 / 5; max-height: 68vh; min-height: 320px; }
}

/* ---------- Until Dawn and Down the Rabbit Hole: progress bars as sticker bars ---------- */

.ud-dawn, .rh-size { flex: 1 1 200px; min-width: 150px; max-width: 360px; }
.ud-dawn-track, .rh-size-track {
  flex: 1;
  height: 18px;
  border: 3px solid var(--sb-outline);
  border-radius: 999px;
  background: var(--sb-card);
  box-shadow: 0 3px 0 var(--sb-outline);
  overflow: hidden;
  align-self: center;
}
.ud-dawn-bar, .rh-size-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.5) 0 34%, transparent 34% 100%), var(--sb-primary);
  transform-origin: left center;
  transform: scaleX(0);
}
.rh-size-bar { transition: background-color 0.3s; }
.rh-size-danger .rh-size-bar { background: var(--sb-danger); }
.ud-overlay { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.rh-overlay { background: color-mix(in srgb, var(--bg) 62%, transparent); }

@media (max-width: 480px) {
  .ct-bar, .ud-bar, .rh-bar { gap: 8px; }
  .ct-stat, .ud-stat, .rh-stat { padding: 4px 10px; gap: 5px; }
  .ct-stat-value, .ud-stat-value, .rh-stat-value { font-size: 1.05rem; }
}