.tc-bg { position: absolute; inset: 0; transition: background 0.4s; background:
  radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.2), transparent 40%),
  radial-gradient(circle at 85% 80%, rgba(129, 140, 248, 0.22), transparent 45%),
  linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
  linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
  #06090e; }
.tc-bg.wrong { background:
  radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.25), transparent 60%),
  linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
  linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
  #0b0608; }

/* Intro */
.tc-intro { display: flex; flex-direction: column; align-items: center; gap: 2.4cqh; max-width: 64cqw; }
.tc-emblem { position: relative; width: 15cqw; height: 15cqw; }
.tc-emblem svg { width: 100%; height: 100%; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tc-emblem > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tc-emblem b { font-size: 4.6cqw; line-height: 1; background: linear-gradient(135deg, #38bdf8, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tc-emblem span { font: 600 0.95cqw var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.tc-intro .gt-badge { font-size: 1.1cqw; }
.tc-intro h1 { font-size: 4.2cqw; line-height: 1.1; letter-spacing: -0.02em; }
.tc-intro p { font-size: 1.7cqw; color: var(--text-muted); }
.tc-intro p b { color: var(--accent); }
.tc-intro .gt-btn { font-size: 1.8cqw; }

/* Puzzle */
#puzzleScreen { justify-content: flex-start; padding-top: 4cqh; gap: 3cqh; }
.tc-head { display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; }
.tc-timer { font: 800 3cqw var(--font-mono); padding: 0.4cqw 1.8cqw; border-radius: 999px; background: rgba(10, 15, 29, 0.85); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--text-main); box-shadow: 0 0 2cqw rgba(56, 189, 248, 0.2); }
.tc-timer.low { color: var(--danger); border-color: var(--danger); box-shadow: 0 0 2cqw rgba(248, 113, 113, 0.35); }
.tc-timer.over { color: var(--text-muted); }
.tc-head p { font-size: 1.6cqw; color: var(--text-muted); }
.tc-head p b { color: var(--text-main); }
.tc-slots-wrap { display: flex; align-items: center; gap: 1.4cqw; }
.tc-end { font: 600 1.05cqw var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); writing-mode: vertical-rl; transform: rotate(180deg); }
.tc-end.right { transform: none; color: var(--secondary); }
.tc-slots { position: relative; display: grid; grid-template-columns: repeat(4, 15cqw); gap: 1.6cqw; }
.tc-slots::before { content: ""; position: absolute; left: -1cqw; right: -1cqw; top: 50%; height: 0.3cqw; background: linear-gradient(90deg, #38bdf8, #818cf8); box-shadow: 0 0 1.4cqw rgba(56, 189, 248, 0.7); border-radius: 1cqw; }
.tc-slot { position: relative; height: 19cqw; border-radius: 1.3cqw; border: 0.16cqw dashed rgba(56, 189, 248, 0.45); background: rgba(10, 15, 29, 0.8); display: grid; place-items: center; transition: border-color 0.2s, box-shadow 0.2s; }
.tc-slot::after { content: attr(data-n); position: absolute; top: 0.6cqw; left: 0.9cqw; font: 600 1cqw var(--font-mono); color: var(--text-muted); }
.tc-slot.hover, .tc-slot.target { border-color: var(--accent); box-shadow: 0 0 2cqw rgba(34, 211, 238, 0.35); border-style: solid; }
.tc-slot.bad { border-color: var(--danger); border-style: solid; box-shadow: 0 0 2cqw rgba(248, 113, 113, 0.45); }
.tc-slot.good { border-color: var(--emerald); border-style: solid; }
.tc-pool { display: grid; grid-template-columns: repeat(4, 13cqw); gap: 1.6cqw; min-height: 15cqw; }
.tc-pool .tc-place { height: 15cqw; border-radius: 1.2cqw; border: 1px dashed rgba(255, 255, 255, 0.06); }

.tc-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.2cqw;
  padding: 1cqw;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.98), rgba(10, 15, 29, 0.98));
  border: 0.16cqw solid var(--c);
  box-shadow: 0 0 1.8cqw color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--text-main);
  font: inherit;
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tc-card:hover { transform: translateY(-0.3cqw); }
.tc-card.selected { transform: translateY(-0.8cqw) scale(1.04); box-shadow: 0 0 3cqw var(--c); }
.tc-card.dragging { position: fixed; z-index: 100; pointer-events: none; cursor: grabbing; transform: rotate(-3deg) scale(1.05); }
.tc-card .ic { width: 4cqw; height: 4cqw; border-radius: 0.9cqw; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.tc-card .ic svg { width: 2.3cqw; height: 2.3cqw; fill: currentColor; }
.tc-card h3 { font-size: 1.35cqw; line-height: 1.15; }
.tc-card small { font: 500 0.9cqw var(--font-mono); color: var(--text-muted); }
.tc-slot .tc-card { height: 100%; }
.tc-actions { display: flex; flex-direction: column; align-items: center; gap: 1cqh; min-height: 9cqh; }
.tc-feedback { font-size: 1.5cqw; min-height: 1.4em; font-weight: 600; }
.tc-feedback.bad { color: var(--danger); }
.tc-actions .gt-btn { font-size: 1.6cqw; }

/* Bravo */
#bravoScreen { gap: 3cqh; }
.tc-bravo { font-size: 7cqw; line-height: 1; }
.tc-bravo-sub { font-size: 1.8cqw; color: var(--text-muted); }
.tc-bravo-sub b { color: var(--accent); }
.tc-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 15cqw); gap: 2.4cqw; padding-bottom: 6cqh; }
.tc-timeline::after { content: ""; position: absolute; left: -2cqw; right: -2cqw; bottom: 2.4cqh; height: 0.35cqw; border-radius: 1cqw; background: linear-gradient(90deg, #38bdf8, #818cf8); box-shadow: 0 0 1.6cqw rgba(56, 189, 248, 0.8); }
.tc-timeline > div { position: relative; height: 17cqw; animation: rise 0.6s backwards; }
.tc-timeline > div::after { content: ""; position: absolute; left: 50%; bottom: -4.2cqh; width: 1.2cqw; height: 1.2cqw; margin-left: -0.6cqw; border-radius: 50%; background: #f8fafc; box-shadow: 0 0 1.2cqw #38bdf8; z-index: 1; }
.tc-year { position: absolute; left: 0; right: 0; bottom: -9.5cqh; font: 800 2.2cqw var(--font-main); color: var(--text-main); }
@keyframes rise { from { opacity: 0; transform: translateY(3cqh); } }
#bravoScreen .gt-btn { font-size: 1.7cqw; margin-top: 4cqh; }

/* Outcome */
.tc-outcome { width: 58cqw; padding: 3.4cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqh; }
.tc-outcome-icon { width: 9cqw; height: 9cqw; border-radius: 2cqw; display: grid; place-items: center; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--primary); box-shadow: 0 0 3cqw rgba(56, 189, 248, 0.3); }
.tc-outcome-icon svg { width: 5cqw; height: 5cqw; fill: currentColor; }
.tc-outcome h2 { font-size: 3.4cqw; line-height: 1.1; }
.tc-outcome p { font-size: 1.6cqw; color: var(--text-muted); }
.tc-outcome p b { color: var(--gold); }
.tc-outcome .tc-cta { font-size: 1.35cqw; }
.tc-outcome-actions { display: flex; gap: 1.2cqw; }
.tc-outcome-actions .gt-btn { font-size: 1.4cqw; }
.tc-home { position: absolute; right: 2cqw; bottom: 2cqh; padding: 1.2cqw 1.8cqw; border-radius: 1cqw; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 15, 29, 0.8); color: var(--text-muted); font: 500 1.1cqw var(--font-mono); cursor: pointer; }
.tc-home:hover { color: var(--primary); border-color: var(--primary); }