/**
 * thatchess Design System
 * Brutalist / Minimalist / Editorial
 * "ese ajedrez" - ajedrez humano
 * 
 * Philosophy:
 * - Neo-brutalismo con calidez
 * - Seguridad psicológica: el tablero como lugar seguro
 * - Proceso > resultado
 * - Feedback que no castiga
 */

/* ========================================
   TIPOGRAFÍA EDITORIAL
   ======================================== */

/* Outfit: Display alternativo con más personalidad */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Outfit:wght@400;600;700;800;900&family=Space+Grotesk:wght@300;400;700&family=Space+Mono:wght@400;700&display=swap');

/* ========================================
   TOKENS DE COLOR - FASHION EDITORIAL

   thatchess - ese ajedrez

   Inspiración:
   - Vogue, i-D Magazine, AnOther
   - Tom Ford, Valentino, Saint Laurent
   - Editorial de moda B&W con acentos luxe

   Paleta que se siente "cara":
   - Negros profundos
   - Rojo statement (drama, pasión)
   - Oro rosado (luxe, sofisticación)
   - Champagne (elegancia sutil)
   - Esmeralda profundo (riqueza, profundidad)
   ======================================== */

:root {
  /* ═══════════════════════════════════════
     NEGROS - La base editorial
     ═══════════════════════════════════════ */
  --tc-black-absolute: #000000;
  --tc-white-pure: #ffffff;

  --tc-gray-950: #0a0a0a;
  --tc-gray-900: #121212;
  --tc-gray-800: #1a1a1a;
  --tc-gray-700: #262626;
  --tc-gray-600: #404040;
  --tc-gray-500: #737373;
  --tc-gray-400: #a3a3a3;
  --tc-gray-300: #d4d4d4;
  --tc-gray-200: #e5e5e5;
  --tc-gray-100: #f5f5f5;

  /* ═══════════════════════════════════════
     CRIMSON - El rojo statement
     Drama, pasión, momentos decisivos
     ═══════════════════════════════════════ */
  --tc-crimson: #dc2626;
  --tc-crimson-bright: #ef4444;
  --tc-crimson-deep: #b91c1c;
  --tc-crimson-muted: rgba(220, 38, 38, 0.15);
  --tc-crimson-glow: rgba(220, 38, 38, 0.35);

  /* ═══════════════════════════════════════
     ROSE GOLD - Luxe, sofisticación
     El color "caro" por excelencia
     ═══════════════════════════════════════ */
  --tc-rosegold: #b76e79;
  --tc-rosegold-light: #d4a5a5;
  --tc-rosegold-deep: #8b5a5a;
  --tc-rosegold-muted: rgba(183, 110, 121, 0.18);
  --tc-rosegold-glow: rgba(183, 110, 121, 0.35);

  /* ═══════════════════════════════════════
     CHAMPAGNE - Elegancia sutil
     Victorias, éxitos, celebración refinada
     ═══════════════════════════════════════ */
  --tc-champagne: #d4af37;
  --tc-champagne-light: #f0d77a;
  --tc-champagne-deep: #a38728;
  --tc-champagne-muted: rgba(212, 175, 55, 0.15);
  --tc-champagne-glow: rgba(212, 175, 55, 0.3);

  /* ═══════════════════════════════════════
     EMERALD - Profundidad, riqueza
     El rival, información contextual
     ═══════════════════════════════════════ */
  --tc-emerald: #047857;
  --tc-emerald-light: #10b981;
  --tc-emerald-deep: #065f46;
  --tc-emerald-muted: rgba(4, 120, 87, 0.18);
  --tc-emerald-glow: rgba(4, 120, 87, 0.35);

  /* ═══════════════════════════════════════
     SISTEMA SEMÁNTICO - Fashion Editorial
     ═══════════════════════════════════════ */

  /* Tu turno - champagne (tu momento de brillar) */
  --tc-turn: var(--tc-champagne);
  --tc-turn-muted: var(--tc-champagne-muted);

  /* Jaque - crimson (drama, tensión) */
  --tc-check: var(--tc-crimson);
  --tc-check-muted: var(--tc-crimson-muted);

  /* Mate - crimson brillante (clímax) */
  --tc-mate: var(--tc-crimson-bright);
  --tc-mate-muted: var(--tc-crimson-glow);

  /* Captura - rose gold (momento luxe) */
  --tc-capture: var(--tc-rosegold);
  --tc-capture-muted: var(--tc-rosegold-muted);

  /* Victoria - champagne (celebración) */
  --tc-victory: var(--tc-champagne);
  --tc-victory-muted: var(--tc-champagne-muted);

  /* ═══════════════════════════════════════
     TABLERO - Indicadores distinguibles
     ═══════════════════════════════════════ */

  /* Última jugada RIVAL - emerald (su territorio) */
  --tc-lastmove-from: var(--tc-emerald-muted);
  --tc-lastmove-from-border: rgba(4, 120, 87, 0.5);
  --tc-lastmove-to: var(--tc-emerald-glow);
  --tc-lastmove-to-border: rgba(4, 120, 87, 0.7);

  /* TU selección - crimson (tu poder) */
  --tc-selected: var(--tc-crimson-muted);
  --tc-selected-border: rgba(220, 38, 38, 0.6);

  /* Movimientos válidos - champagne sutil */
  --tc-valid-move: var(--tc-champagne-muted);
  --tc-valid-capture: var(--tc-crimson-glow);

  /* ═══════════════════════════════════════
     COMPATIBILIDAD - Legacy aliases
     ═══════════════════════════════════════ */
  --tc-accent: var(--tc-crimson);
  --tc-accent-bright: var(--tc-crimson-bright);
  --tc-accent-dim: var(--tc-crimson-deep);
  --tc-accent-muted: var(--tc-crimson-muted);

  --tc-accent-red: var(--tc-crimson);
  --tc-accent-green: var(--tc-emerald);
  --tc-accent-amber: var(--tc-champagne);
  --tc-accent-blue: var(--tc-rosegold);

  --tc-success: var(--tc-emerald);
  --tc-opportunity: var(--tc-champagne);
  --tc-inspiration: var(--tc-rosegold);
  --tc-reflection: var(--tc-emerald-deep);

  /* Coral → Rosegold */
  --tc-coral: var(--tc-rosegold);
  --tc-coral-light: var(--tc-rosegold-light);
  --tc-coral-dark: var(--tc-rosegold-deep);
  --tc-coral-muted: var(--tc-rosegold-muted);

  /* Cyan → Emerald */
  --tc-cyan: var(--tc-emerald);
  --tc-cyan-light: var(--tc-emerald-light);
  --tc-cyan-dark: var(--tc-emerald-deep);
  --tc-cyan-muted: var(--tc-emerald-muted);

  /* Gold → Champagne */
  --tc-gold: var(--tc-champagne);
  --tc-gold-light: var(--tc-champagne-light);
  --tc-gold-dark: var(--tc-champagne-deep);
  --tc-gold-muted: var(--tc-champagne-muted);

  /* Red legacy */
  --tc-red: var(--tc-crimson);
  --tc-red-bright: var(--tc-crimson-bright);
  --tc-red-deep: var(--tc-crimson-deep);
  --tc-red-muted: var(--tc-crimson-muted);
  --tc-red-glow: var(--tc-crimson-glow);
}

/* ========================================
   LIGHT MODE (Warm Editorial)
   ======================================== */

body.light-mode {
  /* Warm paper + deep ink */
  --tc-black-absolute: #1b1612;
  --tc-white-pure: #fbf8f3;

  /* Warm grayscale scale (light -> dark) */
  --tc-gray-950: #f6f1ea;
  --tc-gray-900: #efe9e1;
  --tc-gray-800: #e5ddd3;
  --tc-gray-700: #d6ccc0;
  --tc-gray-600: #b9ad9f;
  --tc-gray-500: #8a7d70;
  --tc-gray-400: #6c6055;
  --tc-gray-300: #544a42;
  --tc-gray-200: #3d342e;
  --tc-gray-100: #2b231e;

  /* Text tokens */
  --tc-text-primary: #1f1b16;
  --tc-text-secondary: #4f463d;
  --tc-text-tertiary: #7a7066;
  --tc-text-disabled: #a59b90;

  /* Borders */
  --tc-border: #d6ccc0;

  /* Semantic surfaces */
  --tc-bg-base: var(--tc-gray-950);
  --tc-bg-elevated: var(--tc-gray-900);
  --tc-bg-surface: var(--tc-gray-800);
  --tc-bg-overlay: var(--tc-gray-700);

  --tc-border-strong: var(--tc-gray-700);
  --tc-border-medium: var(--tc-gray-800);
  --tc-border-subtle: var(--tc-gray-900);
}

/* ========================================
   TOKENS DE TIPOGRAFÍA
   ======================================== */

:root {
  /* Familias */
  --tc-font-display: 'Inter', sans-serif;
  --tc-font-display-alt: 'Outfit', sans-serif;
  /* Display alternativo con más personalidad */
  --tc-font-body: 'Space Grotesk', sans-serif;
  --tc-font-mono: 'Space Mono', monospace;

  /* Pesos */
  --tc-weight-light: 300;
  --tc-weight-regular: 400;
  --tc-weight-semibold: 600;
  --tc-weight-bold: 700;
  --tc-weight-extrabold: 800;
  --tc-weight-black: 900;

  /* Tamaños - Display (masivos, editoriales) */
  --tc-text-massive: clamp(4rem, 8vw, 7rem);
  /* 64-112px */
  --tc-text-display: clamp(3rem, 6vw, 5rem);
  /* 48-80px */
  --tc-text-headline: clamp(2rem, 4vw, 3rem);
  /* 32-48px */

  /* Tamaños - UI */
  --tc-text-xlarge: 1.75rem;
  /* 28px */
  --tc-text-title: 1.5rem;
  /* 24px */
  --tc-text-large: 1.125rem;
  /* 18px */
  --tc-text-body: 1rem;
  /* 16px */
  --tc-text-small: 0.875rem;
  /* 14px */
  --tc-text-tiny: 0.75rem;
  /* 12px */
  --tc-text-micro: 0.625rem;
  /* 10px */

  /* Line heights */
  --tc-leading-tight: 0.85;
  --tc-leading-snug: 1.1;
  --tc-leading-normal: 1.45;
  --tc-leading-relaxed: 1.6;

  /* Letter spacing */
  --tc-tracking-tighter: -0.05em;
  --tc-tracking-tight: -0.02em;
  --tc-tracking-normal: 0;
  --tc-tracking-wide: 0.02em;
  --tc-tracking-wider: 0.1em;
  --tc-tracking-widest: 0.15em;
}

/* ========================================
   ESPACIADO - ESCALA EDITORIAL
   ======================================== */

:root {
  /* Base: 4px (no múltiplos estrictos de 8) */
  --tc-space-1: 0.25rem;
  /* 4px */
  --tc-space-2: 0.5rem;
  /* 8px */
  --tc-space-3: 0.75rem;
  /* 12px */
  --tc-space-4: 1rem;
  /* 16px */
  --tc-space-5: 1.25rem;
  /* 20px */
  --tc-space-6: 1.5rem;
  /* 24px */
  --tc-space-8: 2rem;
  /* 32px */
  --tc-space-10: 2.5rem;
  /* 40px */
  --tc-space-12: 3rem;
  /* 48px */
  --tc-space-16: 4rem;
  /* 64px */
  --tc-space-20: 5rem;
  /* 80px */
  --tc-space-24: 6rem;
  /* 96px */
  --tc-space-32: 8rem;
  /* 128px */
}

/* ========================================
   UTILIDADES DE TIPOGRAFÍA
   ======================================== */

.tc-display-massive {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-weight-black);
  font-size: var(--tc-text-massive);
  line-height: var(--tc-leading-tight);
  letter-spacing: var(--tc-tracking-tighter);
  text-transform: uppercase;
}

/* Display alternativo con Outfit - más personalidad editorial */
.tc-display-alt {
  font-family: var(--tc-font-display-alt);
  font-weight: var(--tc-weight-extrabold);
  font-size: var(--tc-text-display);
  line-height: var(--tc-leading-tight);
  letter-spacing: var(--tc-tracking-tight);
  text-transform: uppercase;
}

.tc-display {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-weight-black);
  font-size: var(--tc-text-display);
  line-height: var(--tc-leading-tight);
  letter-spacing: var(--tc-tracking-tight);
  text-transform: uppercase;
}

.tc-headline {
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-headline);
  line-height: var(--tc-leading-snug);
  letter-spacing: var(--tc-tracking-tight);
}

.tc-title {
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-title);
  line-height: var(--tc-leading-snug);
}

.tc-body {
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-regular);
  font-size: var(--tc-text-body);
  line-height: var(--tc-leading-normal);
}

.tc-body-bold {
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-body);
  line-height: var(--tc-leading-normal);
}

.tc-small {
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-regular);
  font-size: var(--tc-text-small);
  line-height: var(--tc-leading-normal);
}

.tc-mono {
  font-family: var(--tc-font-mono);
  font-weight: var(--tc-weight-regular);
  font-size: var(--tc-text-small);
  line-height: var(--tc-leading-normal);
  letter-spacing: var(--tc-tracking-wide);
}

.tc-mono-tiny {
  font-family: var(--tc-font-mono);
  font-weight: var(--tc-weight-regular);
  font-size: var(--tc-text-micro);
  line-height: var(--tc-leading-normal);
  letter-spacing: var(--tc-tracking-widest);
  text-transform: uppercase;
}

/* ========================================
   COMPONENTES BASE - BOTONES BRUTALISTAS
   ======================================== */

.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) var(--tc-space-6);
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-small);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
  border: 2px solid var(--tc-black-absolute);
  background: var(--tc-white-pure);
  color: var(--tc-black-absolute);
  cursor: pointer;
  transition: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

.tc-btn:hover {
  background: var(--tc-black-absolute);
  color: var(--tc-white-pure);
}

.tc-btn:active {
  transform: translateY(1px);
}

.tc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Variantes de botones */
.tc-btn-primary {
  background: var(--tc-black-absolute);
  color: var(--tc-white-pure);
  border-color: var(--tc-black-absolute);
}

.tc-btn-primary:hover {
  background: var(--tc-gray-800);
  border-color: var(--tc-gray-800);
}

/* Ghost button - subtle */
.tc-btn-ghost {
  background: transparent;
  color: var(--tc-gray-400);
  border: 1px solid var(--tc-gray-700);
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-btn-ghost:hover {
  color: var(--tc-white-pure);
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-600);
}

.tc-btn-danger {
  background: transparent;
  color: var(--tc-accent-red);
  border-color: var(--tc-accent-red);
}

.tc-btn-danger:hover {
  background: var(--tc-accent-red);
  color: var(--tc-white-pure);
}

/* Tamaños */
.tc-btn-sm {
  padding: var(--tc-space-2) var(--tc-space-4);
  font-size: var(--tc-text-tiny);
}

.tc-btn-lg {
  padding: var(--tc-space-4) var(--tc-space-8);
  font-size: var(--tc-text-body);
}

/* ========================================
   INPUTS EDITORIALES
   ======================================== */

.tc-input {
  width: 100%;
  padding: var(--tc-space-3) var(--tc-space-4);
  font-family: var(--tc-font-mono);
  font-weight: var(--tc-weight-regular);
  font-size: var(--tc-text-small);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
  background: var(--tc-black-absolute);
  color: var(--tc-white-pure);
  border: 1px solid var(--tc-gray-600);
  outline: none;
  transition: border-color 0.15s ease;
}

.tc-input::placeholder {
  color: var(--tc-gray-500);
  opacity: 1;
  font-size: var(--tc-placeholder-size, var(--tc-text-tiny));
}

textarea::placeholder {
  font-size: var(--tc-placeholder-size, var(--tc-text-tiny));
}

.tc-input:focus {
  border-color: var(--tc-white-pure);
}

.tc-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   MODALES BRUTALISTAS
   ======================================== */

.tc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-4);
}

.tc-modal {
  background: var(--tc-black-absolute);
  border: 2px solid var(--tc-white-pure);
  box-shadow: 12px 12px 0 var(--tc-gray-800);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tc-modal-header {
  padding: var(--tc-space-6);
  border-bottom: 1px solid var(--tc-gray-700);
  background: var(--tc-white-pure);
  color: var(--tc-black-absolute);
}

.tc-modal-body {
  padding: var(--tc-space-6);
  overflow-y: auto;
  flex: 1;
}

.tc-modal-footer {
  padding: var(--tc-space-6);
  border-top: 1px solid var(--tc-gray-700);
  background: var(--tc-gray-950);
}

/* ========================================
   CARDS MINIMALISTAS
   ======================================== */

.tc-card {
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-700);
  padding: var(--tc-space-6);
}

.tc-card-title {
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-large);
  margin-bottom: var(--tc-space-4);
  color: var(--tc-white-pure);
}

/* ========================================
   SISTEMA DE GRID EDITORIAL
   ======================================== */

.tc-grid {
  display: grid;
  gap: var(--tc-space-6);
}

.tc-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.tc-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.tc-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {

  .tc-grid-2,
  .tc-grid-3,
  .tc-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   UTILIDADES DE ESPACIADO
   ======================================== */

.tc-stack {
  display: flex;
  flex-direction: column;
}

.tc-stack-1 {
  gap: var(--tc-space-1);
}

.tc-stack-2 {
  gap: var(--tc-space-2);
}

.tc-stack-3 {
  gap: var(--tc-space-3);
}

.tc-stack-4 {
  gap: var(--tc-space-4);
}

.tc-stack-6 {
  gap: var(--tc-space-6);
}

.tc-stack-8 {
  gap: var(--tc-space-8);
}

.tc-inline {
  display: flex;
  align-items: center;
}

.tc-inline-2 {
  gap: var(--tc-space-2);
}

.tc-inline-3 {
  gap: var(--tc-space-3);
}

.tc-inline-4 {
  gap: var(--tc-space-4);
}

/* ========================================
   ESTADOS AMABLES
   ======================================== */

.tc-state-inspired {
  color: var(--tc-inspiration);
}

.tc-state-good {
  color: var(--tc-success);
}

.tc-state-opportunity {
  color: var(--tc-opportunity);
}

.tc-state-reflection {
  color: var(--tc-reflection);
}

/* ========================================
   SCROLLBAR EDITORIAL
   ======================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--tc-black-absolute);
  border-left: 1px solid var(--tc-gray-800);
}

::-webkit-scrollbar-thumb {
  background: var(--tc-gray-700);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tc-white-pure);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tc-gray-700) var(--tc-black-absolute);
}

/* ========================================
   ANIMACIONES SUTILES
   ======================================== */

@keyframes tc-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tc-fade-in {
  animation: tc-fade-in 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   BASE RESET
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-body);
  line-height: var(--tc-leading-normal);
  background: var(--tc-black-absolute);
  color: var(--tc-gray-300);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

/* ========================================
   NAVEGACIÓN Y PANELES - Nueva Arquitectura UX
   ======================================== */

/* Navegación principal del sidebar (Jugar/Aprender/Revisar) */
.tc-nav-btn {
  background: transparent;
  color: var(--tc-gray-400);
  border-width: 1px;
  border-color: var(--tc-gray-700);
  transition: none;
}

.tc-nav-btn:hover {
  background: var(--tc-gray-900);
  color: var(--tc-white-pure);
  border-color: var(--tc-gray-600);
}

.tc-nav-btn.active {
  background: var(--tc-accent-red);
  color: var(--tc-black-absolute);
  border-color: var(--tc-accent-red);
  font-weight: 900;
}

/* Sistema de paneles de contenido */
.panel-content {
  display: none;
}

.panel-content.active {
  display: flex;
}

/* Sub-paneles dentro de cada modo */
.sub-panel {
  display: none;
}

.sub-panel.active {
  display: block;
}

/* Tabs (para Amigos/Ranked/CPU) */
.tab-btn {
  flex: 1;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-bottom: 2px solid transparent;
  opacity: 0.5;
  transition: none;
  background: transparent;
  cursor: pointer;
}

.tab-btn:hover {
  opacity: 0.7;
}

.tab-btn.active {
  border-bottom-color: var(--tc-accent-red);
  opacity: 1;
  color: var(--tc-white-pure);
}

/* Botones de control (debajo del tablero) */
.tc-control-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--tc-gray-600);
  background: transparent;
  color: var(--tc-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: none;
  cursor: pointer;
}

.tc-control-btn:hover {
  color: var(--tc-white-pure);
  border-color: var(--tc-white-pure);
}

/* Alias de color para compatibilidad */
:root {
  --tc-accent: var(--tc-accent-red);
  --tc-danger: var(--tc-accent-red);
  --tc-warning: var(--tc-accent-amber);
  --tc-text-primary: var(--tc-white-pure);
  --tc-text-secondary: var(--tc-gray-500);
  --tc-border: var(--tc-gray-700);
}

/* Label tiny adicional */
.tc-label-tiny {
  font-family: var(--tc-font-mono);
  font-weight: var(--tc-weight-regular);
  font-size: var(--tc-text-micro);
  line-height: var(--tc-leading-normal);
  letter-spacing: var(--tc-tracking-wide);
}

/* ========================================
   GRANO VISUAL - IMPERFECCIÓN CONTROLADA
   Neo-brutalismo con calidez
   ======================================== */

/* Noise texture overlay - aplicar a contenedores principales */
.tc-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

.tc-grain {
  position: relative;
}

.tc-grain>* {
  position: relative;
  z-index: 1;
}

/* Variante más intensa para superficies oscuras */
.tc-grain-strong::before {
  opacity: 0.06;
}

/* ========================================
   TRANSICIONES CON INTENCIÓN
   Motion que guía, no que decora
   ======================================== */

/* Easing orgánico - se siente más humano */
:root {
  --tc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duraciones consistentes */
  --tc-duration-fast: 150ms;
  --tc-duration-normal: 280ms;
  --tc-duration-slow: 450ms;
}

/* Clase para transición suave universal */
.tc-transition {
  transition: all var(--tc-duration-normal) var(--tc-ease-out);
}

.tc-transition-fast {
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-transition-slow {
  transition: all var(--tc-duration-slow) var(--tc-ease-out);
}

/* ========================================
   ESPACIADO EDITORIAL GENEROSO
   Mucho aire bien usado
   ======================================== */

/* Secciones con más respiración */
.tc-section {
  padding: var(--tc-space-8) var(--tc-space-6);
}

.tc-section-lg {
  padding: var(--tc-space-12) var(--tc-space-8);
}

/* Separador visual sutil */
.tc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tc-gray-700), transparent);
  margin: var(--tc-space-6) 0;
  border: none;
}

/* ========================================
   FEEDBACK AMABLE
   Errores como información, no castigo
   ======================================== */

/* Estado de sugerencia - no alarma */
.tc-hint {
  color: var(--tc-gray-400);
  font-size: var(--tc-text-tiny);
  font-style: normal;
}

/* Estado de información útil */
.tc-info {
  color: var(--tc-accent-blue);
  background: rgba(59, 130, 246, 0.08);
  border-left: 2px solid var(--tc-accent-blue);
  padding: var(--tc-space-3) var(--tc-space-4);
}

/* Estado de oportunidad/destacado - Gold */
.tc-opportunity {
  color: var(--tc-gold);
  background: var(--tc-gold-muted);
  border-left: 2px solid var(--tc-gold);
  padding: var(--tc-space-3) var(--tc-space-4);
}

/* Estado de éxito/confirmación - Cyan */
.tc-success {
  color: var(--tc-cyan);
  background: var(--tc-cyan-muted);
  border-left: 2px solid var(--tc-cyan);
  padding: var(--tc-space-3) var(--tc-space-4);
}

/* ========================================
   MICRO-INTERACCIONES
   Pequeños detalles que dan vida
   ======================================== */

/* Hover sutil que "respira" */
.tc-hover-lift {
  transition: transform var(--tc-duration-fast) var(--tc-ease-out),
    box-shadow var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Focus accesible y bonito */
.tc-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tc-black-absolute),
    0 0 0 4px var(--tc-accent-red);
}

/* Animación de pulso suave (para estados de espera) */
@keyframes tc-pulse-soft {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.tc-pulse {
  animation: tc-pulse-soft 2s ease-in-out infinite;
}

/* Animación de entrada desde abajo */
@keyframes tc-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tc-slide-up {
  animation: tc-slide-up var(--tc-duration-normal) var(--tc-ease-out);
}

/* ========================================
   COMPONENTES BENTO
   Layout modular, escaneable
   ======================================== */

.tc-bento {
  display: grid;
  gap: var(--tc-space-4);
}

.tc-bento-item {
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-800);
  padding: var(--tc-space-5);
  transition: border-color var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-bento-item:hover {
  border-color: var(--tc-gray-600);
}

/* Tarjeta destacada */
.tc-bento-featured {
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-700);
  padding: var(--tc-space-6);
}

/* ========================================
   ACCESIBILIDAD
   Respeto por preferencias del usuario
   ======================================== */

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {

  .tc-transition,
  .tc-transition-fast,
  .tc-transition-slow,
  .tc-hover-lift,
  .tc-pulse,
  .tc-slide-up {
    animation: none !important;
    transition: none !important;
  }
}

/**
 * THATCHESS - ETAPA 1 ENHANCEMENTS
 * Editorial Warm Brutalism
 * 
 * Agregar al final de design-system.css o como archivo separado
 * Actualiza: Tablero, Glass, Motion, Loading, Empty states
 */

/* ===================================================
   TABLERO - BOARD STYLES
   DISABLED: Board styles are handled by app.css
   This section was causing conflicts with piece sizing
   and board layout after CSS reordering.
   =================================================== */

/* ===================================================
   GLASS SYSTEM - Coach & Modals
   =================================================== */

.tc-glass-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tc-overlay-fade-in 280ms var(--tc-ease-out);
  padding: var(--tc-space-4);
}

.tc-glass-overlay.hidden {
  display: none;
}

.tc-glass-content {
  width: 100%;
  max-width: 520px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: tc-glass-slide-up 350ms var(--tc-ease-out) 80ms backwards;
  max-height: 80vh;
  overflow-y: auto;
}

.tc-glass-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tc-space-6);
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-glass-header .tc-mono-tiny {
  display: block;
  margin-bottom: 0.5rem;
}

#newGameModal .tc-glass-header {
  padding: 2rem 2rem 1.5rem;
}

#newGameModal .tc-glass-header .tc-mono-tiny {
  display: block;
  margin-bottom: 0.5rem;
}

#newGameModal .tc-glass-title {
  line-height: 1.1;
  margin: 0;
}

.tc-glass-title {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-title);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
}

.tc-glass-close {
  position: absolute;
  top: var(--tc-space-4);
  right: var(--tc-space-4);
  background: transparent;
  border: none;
  color: var(--tc-gray-500);
  font-size: 1.75rem;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
  line-height: 1;
}

.tc-glass-close:hover {
  color: var(--tc-white-pure);
  transform: scale(1.1);
}

.tc-glass-body {
  padding: var(--tc-space-6);
}

.tc-glass-actions {
  display: flex;
  gap: var(--tc-space-3);
  justify-content: flex-end;
  padding: var(--tc-space-6);
  border-top: 1px solid var(--tc-gray-800);
}

@keyframes tc-overlay-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tc-glass-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fallback para navegadores sin backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .tc-glass-overlay {
    background: rgba(0, 0, 0, 0.92);
  }

  .tc-glass-content {
    background: var(--tc-gray-900);
    border-color: var(--tc-gray-700);
  }
}

/* Mobile optimization */
@media (max-width: 640px) {
  .tc-glass-content {
    max-width: 100%;
    max-height: 90vh;
  }

  .tc-glass-header,
  .tc-glass-body,
  .tc-glass-actions {
    padding: var(--tc-space-4);
  }
}

/* ===================================================
   ENHANCED MOTION - Panel Transitions
   =================================================== */

/* Panel entrance with stagger */
.panel-content {
  display: none;
  opacity: 0;
}

.panel-content.active {
  display: flex;
  opacity: 1;
  animation: tc-panel-slide-in var(--tc-duration-normal) var(--tc-ease-out) forwards;
}

@keyframes tc-panel-slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Stagger children */
.panel-content.active>* {
  animation: tc-child-fade-up var(--tc-duration-normal) var(--tc-ease-out) backwards;
}

.panel-content.active>*:nth-child(1) {
  animation-delay: 0ms;
}

.panel-content.active>*:nth-child(2) {
  animation-delay: 50ms;
}

.panel-content.active>*:nth-child(3) {
  animation-delay: 100ms;
}

.panel-content.active>*:nth-child(4) {
  animation-delay: 150ms;
}

.panel-content.active>*:nth-child(5) {
  animation-delay: 200ms;
}

.panel-content.active>*:nth-child(6) {
  animation-delay: 250ms;
}

@keyframes tc-child-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button interactions mejoradas */
.tc-btn,
.tc-btn-primary,
.tc-btn-ghost,
.tc-btn-danger {
  transition: background var(--tc-duration-fast) var(--tc-ease-out),
    color var(--tc-duration-fast) var(--tc-ease-out),
    border-color var(--tc-duration-fast) var(--tc-ease-out),
    transform var(--tc-duration-fast) var(--tc-ease-out),
    box-shadow var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-btn:hover,
.tc-btn-primary:hover,
.tc-btn-ghost:hover,
.tc-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tc-btn:active,
.tc-btn-primary:active,
.tc-btn-ghost:active,
.tc-btn-danger:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition-duration: var(--tc-duration-instant);
}

/* Navigation button active state transition */
.tc-nav-btn {
  transition: background var(--tc-duration-normal) var(--tc-ease-out),
    color var(--tc-duration-normal) var(--tc-ease-out),
    border-color var(--tc-duration-normal) var(--tc-ease-out),
    transform var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-nav-btn.active {
  transform: translateX(2px);
}

/* ===================================================
   BRAND HEADER - Animated Dot
   =================================================== */

.tc-brand-dot {
  display: inline-block;
  color: var(--tc-accent-red);
  animation: tc-pulse-dot 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tc-pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.75;
    transform: scale(1.15);
  }
}

/* Con glow sutil */
.tc-brand-dot-glow {
  animation: tc-pulse-dot-glow 3s ease-in-out infinite;
}

@keyframes tc-pulse-dot-glow {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 8px rgba(255, 62, 62, 0.4);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.15);
    text-shadow: 0 0 16px rgba(255, 62, 62, 0.6);
  }
}

/* ===================================================
   LOADING STATES
   =================================================== */

/* Spinner */
.tc-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--tc-gray-800);
  border-top-color: var(--tc-white-pure);
  border-radius: 50%;
  animation: tc-spin 0.8s linear infinite;
}

@keyframes tc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loading container */
.tc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-12);
  min-height: 300px;
}

.tc-loading-text {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-tiny);
  color: var(--tc-gray-500);
  letter-spacing: var(--tc-tracking-widest);
  text-transform: uppercase;
  animation: tc-pulse-text 1.5s ease-in-out infinite;
}

@keyframes tc-pulse-text {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Loading dots (para "buscando oponente") */
.tc-loading-dots {
  display: flex;
  gap: var(--tc-space-2);
}

.tc-loading-dots span {
  width: 10px;
  height: 10px;
  background: var(--tc-gray-600);
  border-radius: 50%;
  animation: tc-dot-bounce 1.4s ease-in-out infinite;
}

.tc-loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

.tc-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.tc-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes tc-dot-bounce {

  0%,
  80%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  40% {
    transform: scale(1.4);
    opacity: 1;
  }
}

/* Skeleton loader */
.tc-skeleton {
  background: linear-gradient(90deg,
      var(--tc-gray-900) 0%,
      var(--tc-gray-800) 50%,
      var(--tc-gray-900) 100%);
  background-size: 200% 100%;
  animation: tc-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 2px;
}

@keyframes tc-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ===================================================
   EMPTY STATES
   =================================================== */

.tc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--tc-space-16) var(--tc-space-6);
  min-height: 400px;
}

.tc-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--tc-space-6);
  opacity: 0.25;
  filter: grayscale(100%);
  animation: tc-empty-float 3s ease-in-out infinite;
}

@keyframes tc-empty-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.tc-empty-state h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--tc-space-3);
  color: var(--tc-white-pure);
}

.tc-empty-state p {
  color: var(--tc-gray-400);
  margin-bottom: var(--tc-space-6);
  max-width: 400px;
}

.tc-empty-state .tc-btn {
  margin-top: var(--tc-space-4);
}

/* Invite code display */
.tc-invite-code {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  margin-top: var(--tc-space-6);
  padding: var(--tc-space-4);
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-800);
}

.tc-invite-code code {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-large);
  font-weight: var(--tc-weight-bold);
  letter-spacing: var(--tc-tracking-wider);
  color: var(--tc-white-pure);
}

/* ===================================================
   MATCH FOUND CELEBRATION
   =================================================== */

.tc-match-found {
  padding: var(--tc-space-8);
  text-align: center;
  animation: tc-match-found-appear 500ms var(--tc-ease-out);
}

@keyframes tc-match-found-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tc-match-found-icon {
  font-size: 5rem;
  margin-bottom: var(--tc-space-6);
  animation: tc-match-icon-bounce 600ms var(--tc-ease-bounce);
}

@keyframes tc-match-icon-bounce {
  0% {
    transform: scale(0) rotate(-180deg);
  }

  60% {
    transform: scale(1.2) rotate(10deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.tc-match-found h2 {
  font-family: var(--tc-font-display-alt);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--tc-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-tight);
  margin-bottom: var(--tc-space-4);
  background: linear-gradient(135deg, var(--tc-white-pure), var(--tc-gray-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tc-match-found p {
  color: var(--tc-gray-400);
  margin-bottom: var(--tc-space-8);
}

/* ===================================================
   GAME STATUS INDICATOR
   =================================================== */

.tc-game-status {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-4);
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-800);
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-tiny);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
}

.tc-game-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-gray-600);
  animation: tc-status-pulse 2s ease-in-out infinite;
}

.tc-game-status.waiting .tc-game-status-dot {
  background: var(--tc-accent-amber);
}

.tc-game-status.playing .tc-game-status-dot {
  background: var(--tc-accent-green);
}

.tc-game-status.finished .tc-game-status-dot {
  background: var(--tc-gray-600);
  animation: none;
}

@keyframes tc-status-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ===================================================
   RESPONSIVE - Mobile Optimizations
   =================================================== */

@media (max-width: 768px) {

  /* Tablero más pequeño en mobile */
  .board-wrapper {
    max-width: 100%;
    padding: var(--tc-space-2);
  }

  /* Loading states más compactos */
  .tc-loading {
    padding: var(--tc-space-8);
    min-height: 200px;
  }

  /* Empty states más compactos */
  .tc-empty-state {
    padding: var(--tc-space-8) var(--tc-space-4);
    min-height: 300px;
  }

  .tc-empty-icon {
    font-size: 3rem;
  }

  /* Match found más pequeño */
  .tc-match-found-icon {
    font-size: 4rem;
  }
}

/* ===================================================
   ACCESSIBILITY - Reduced Motion
   =================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .tc-brand-dot,
  .tc-brand-dot-glow,
  .tc-empty-icon,
  .tc-game-status-dot {
    animation: none !important;
  }

  .tc-btn:hover,
  .tc-nav-btn.active {
    transform: none !important;
  }
}

/* ===================================================
   PRINT STYLES - Board only
   =================================================== */

@media print {

  /* Hide everything except board */
  nav,
  aside,
  .board-footer,
  .umv-container {
    display: none !important;
  }

  .board-wrapper {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Remove animations */
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================
   EXTENDED UTILITIES - COHERENCE SYSTEM
   =================================================== */

/* === SEMANTIC COLOR ALIASES === */
:root {
  --tc-bg-base: var(--tc-black-absolute);
  --tc-bg-elevated: var(--tc-gray-950);
  --tc-bg-surface: var(--tc-gray-900);
  --tc-bg-overlay: var(--tc-gray-800);

  --tc-text-primary: var(--tc-white-pure);
  --tc-text-secondary: var(--tc-gray-400);
  --tc-text-tertiary: var(--tc-gray-500);
  --tc-text-disabled: var(--tc-gray-600);

  --tc-border-strong: var(--tc-gray-700);
  --tc-border-medium: var(--tc-gray-800);
  --tc-border-subtle: var(--tc-gray-900);
}

/* === AUTH FORMS === */
.auth-form {
  display: none;
  animation: tc-form-fade-out 200ms var(--tc-ease-out) forwards;
}

.auth-form.active {
  display: block;
  animation: tc-form-fade-in 300ms var(--tc-ease-out) forwards;
}

@keyframes tc-form-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tc-form-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* === LINK BUTTON === */
.tc-btn-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--tc-text-secondary);
  transition: color 150ms var(--tc-ease-out);
}

.tc-btn-link:hover {
  color: var(--tc-white-pure);
}

/* === PROFILE BUTTON === */
.tc-btn-profile {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3);
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 200ms var(--tc-ease-out);
  text-align: left;
}

.tc-btn-profile:hover {
  background: var(--tc-gray-950);
  border-color: var(--tc-gray-800);
}

.tc-btn-profile:active {
  background: var(--tc-gray-900);
}

.tc-avatar {
  width: 2rem;
  height: 2rem;
  background: var(--tc-white-pure);
  color: var(--tc-black-absolute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-tiny);
  flex-shrink: 0;
}

.tc-profile-info {
  flex: 1;
  min-width: 0;
}

/* === TAB ACTIVE STATE === */
.tc-btn-ghost.active {
  background: var(--tc-gray-800);
  border-color: var(--tc-gray-700);
}

/* === HONEYPOT === */
.auth-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* === UTILITY CLASSES === */
.tc-bg-base {
  background: var(--tc-bg-base);
}

.tc-bg-elevated {
  background: var(--tc-bg-elevated);
}

.tc-bg-surface {
  background: var(--tc-bg-surface);
}

.tc-bg-overlay {
  background: var(--tc-bg-overlay);
}

.tc-text-primary {
  color: var(--tc-text-primary);
}

.tc-text-secondary {
  color: var(--tc-text-secondary);
}

.tc-text-tertiary {
  color: var(--tc-text-tertiary);
}

.tc-text-disabled {
  color: var(--tc-text-disabled);
}

.tc-border {
  border: 1px solid var(--tc-border-medium);
}

.tc-border-strong {
  border: 1px solid var(--tc-border-strong);
}

.tc-border-subtle {
  border: 1px solid var(--tc-border-subtle);
}

/* === EMPTY STATE ICONS - EDITORIAL STYLE === */
.tc-empty-state-icon {
  font-family: var(--tc-font-display-alt);
  font-size: 8rem;
  font-weight: var(--tc-weight-black);
  line-height: 1;
  color: var(--tc-white-pure);
  opacity: 0.11;
  margin-bottom: 2rem;
  letter-spacing: -0.05em;
  user-select: none;
}

/* === CHECKBOX STYLING === */
.tc-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--tc-accent-amber);
  cursor: pointer;
}

/* === COLOR SELECTOR BUTTONS === */
.tc-btn-color-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: transparent;
  border: 2px solid var(--tc-gray-800);
  cursor: pointer;
  transition: all 200ms var(--tc-ease-out);
}

.tc-btn-color-selector:hover {
  border-color: var(--tc-gray-700);
  background: var(--tc-gray-900);
}

.tc-btn-color-selector.active {
  border-color: var(--tc-white-pure);
  background: var(--tc-gray-900);
}

.tc-btn-color-selector.active span {
  color: var(--tc-white-pure);
}

/* ===================================================
   RESULT MODAL - EDITORIAL STATS
   =================================================== */

.tc-result-modal {
  /* Ensure proper sizing */
}

.tc-result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tc-space-3);
}

.tc-result-stat {
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-800);
  padding: var(--tc-space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-result-stat:hover {
  border-color: var(--tc-gray-700);
}

/* Accent bar on top */
.tc-result-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tc-gray-700);
  transition: background var(--tc-duration-fast) var(--tc-ease-out);
}

/* Brilliant - Lo mejor, destaca con blanco puro */
.tc-result-stat--brilliant::before {
  background: var(--tc-white-pure);
}

/* Solid - Buenas jugadas, gris claro */
.tc-result-stat--solid::before {
  background: var(--tc-gray-400);
}

/* Learning - Espacio para crecer, gris medio */
.tc-result-stat--learning::before {
  background: var(--tc-gray-600);
}

/* Key - Momentos importantes de aprendizaje */
.tc-result-stat--key::before {
  background: var(--tc-gray-500);
}

.tc-result-stat-value {
  font-family: var(--tc-font-display-alt);
  font-size: 2.5rem;
  font-weight: var(--tc-weight-black);
  line-height: 1;
  color: var(--tc-white-pure);
  letter-spacing: -0.02em;
}

/* Brilliant gets white emphasis */
.tc-result-stat--brilliant .tc-result-stat-value {
  color: var(--tc-white-pure);
}

/* Others stay white but could be slightly muted if needed */
.tc-result-stat--solid .tc-result-stat-value,
.tc-result-stat--learning .tc-result-stat-value,
.tc-result-stat--key .tc-result-stat-value {
  color: var(--tc-gray-200);
}

.tc-result-stat-label {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: var(--tc-weight-regular);
  color: var(--tc-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
  margin-top: var(--tc-space-2);
}

/* Animation for stats appearing */
.tc-result-stat {
  animation: tc-stat-appear var(--tc-duration-normal) var(--tc-ease-out) backwards;
}

.tc-result-stat:nth-child(1) {
  animation-delay: 100ms;
}

.tc-result-stat:nth-child(2) {
  animation-delay: 150ms;
}

.tc-result-stat:nth-child(3) {
  animation-delay: 200ms;
}

.tc-result-stat:nth-child(4) {
  animation-delay: 250ms;
}

@keyframes tc-stat-appear {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===================================================
   PROMOTION MODAL - PIECE SELECTION
   =================================================== */

.tc-promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tc-space-2);
}

.tc-promo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-4) var(--tc-space-2);
  background: var(--tc-gray-900);
  border: 2px solid var(--tc-gray-700);
  color: var(--tc-gray-400);
  cursor: pointer;
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-promo-btn i {
  font-size: 1.75rem;
  transition: transform var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-promo-btn span {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
}

.tc-promo-btn:hover {
  background: var(--tc-gray-800);
  border-color: var(--tc-white-pure);
  color: var(--tc-white-pure);
}

.tc-promo-btn:hover i {
  transform: scale(1.15);
}

.tc-promo-btn:active {
  transform: scale(0.95);
}

/* Highlight queen as most common choice */
.tc-promo-btn[data-p="q"] {
  border-color: var(--tc-gray-600);
}

.tc-promo-btn[data-p="q"]:hover {
  border-color: var(--tc-gold);
  box-shadow: 0 0 0 4px var(--tc-gold-muted);
}

/* ===================================================
   IN-GAME PANEL - Main container
   =================================================== */

#panel-ingame {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Critical for flex scroll */
  overflow: hidden;
}

#panel-ingame.hidden {
  display: none;
}

/* ===================================================
   IN-GAME HEADER - Humanized
   =================================================== */

.tc-ingame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tc-space-4);
  border-bottom: 1px solid var(--tc-gray-800);
  background: var(--tc-gray-900);
}

.tc-ingame-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-1);
}

.tc-ingame-mode {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-body);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-white-pure);
}

.tc-ingame-exit {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3);
  background: transparent;
  border: 1px solid var(--tc-gray-700);
  color: var(--tc-gray-400);
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: var(--tc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
  cursor: pointer;
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-ingame-exit:hover {
  background: var(--tc-gray-800);
  border-color: var(--tc-gray-600);
  color: var(--tc-white-pure);
}

.tc-ingame-exit i {
  font-size: 0.625rem;
}

/* ===================================================
   TURN INDICATOR TOP - Option 2
   Micro-line above board, matches theme selector position
   =================================================== */

.tc-turn-indicator-top {
  position: absolute;
  top: -1.75rem;
  left: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tc-turn-indicator-top.visible {
  opacity: 1;
}

.tc-turn-indicator-text {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-weight: var(--tc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tc-gray-500);
  transition: color 0.3s ease;
}

/* States */
.tc-turn-indicator-top.your-turn .tc-turn-indicator-text {
  color: var(--tc-white-pure);
}

.tc-turn-indicator-top.waiting .tc-turn-indicator-text {
  color: var(--tc-gray-500);
}

.tc-turn-indicator-top.check-alert .tc-turn-indicator-text {
  color: var(--tc-champagne);
}

/* Right-aligned variant under board */
.tc-turn-indicator-top.tc-turn-indicator-right {
  top: auto;
  bottom: -1.75rem;
  right: 0;
  left: auto;
  text-align: right;
}

.tc-turn-indicator-top.tc-turn-indicator-right.is-alert .tc-turn-indicator-text {
  color: var(--tc-accent-amber);
}

.tc-turn-indicator-top.tc-turn-indicator-right.is-success .tc-turn-indicator-text {
  color: var(--tc-emerald);
}

.tc-turn-indicator-top.tc-turn-indicator-right.is-white .tc-turn-indicator-text {
  color: var(--tc-white-pure);
}

/* In-board status banner: only checkmate gets a wider single-line pill */
#noticeBanner.is-mate {
  width: max-content;
  min-width: 14rem;
  justify-content: center;
}

#noticeBanner.is-mate #noticeText {
  white-space: nowrap;
}

#noticeDot.is-check {
  background-color: var(--tc-champagne);
}

#noticeDot.is-mate {
  background-color: var(--tc-crimson);
}

/* ===================================================
   FEEDBACK EDGE TAB - Editorial, brutalista
   =================================================== */

.tc-feedback-edge-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(14px, -50%);
  z-index: 9999;
  background: transparent;
  transition: transform 180ms var(--tc-ease-out), opacity 180ms var(--tc-ease-out);
}

.tc-feedback-edge-tab.tc-feedback-edge-tab-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(24px, -50%);
}

.tc-feedback-edge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0.9rem 0.55rem;
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-700);
  cursor: pointer;
}

.tc-feedback-edge-btn:hover {
  background: var(--tc-gray-900);
}

.tc-feedback-edge-text {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-weight: var(--tc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-gray-400);
  transition: color 0.2s ease;
}

.tc-feedback-edge-btn:hover .tc-feedback-edge-text {
  color: var(--tc-white-pure);
}

/* Tuck the tab slightly and reveal on hover/focus */
.tc-feedback-edge-tab:hover,
.tc-feedback-edge-tab:focus-within {
  transform: translate(0, -50%);
}

/* Dim the edge tab when the feedback modal is open */
.tc-glass-overlay:not(.hidden)~#feedbackEdgeTab {
  z-index: 0;
  pointer-events: none;
}


/* ===================================================
   FEEDBACK MODAL - Editorial redesign
   =================================================== */

.tc-feedback-modal {
  max-width: 420px;
}

.tc-feedback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-feedback-header .tc-mono-tiny {
  display: block;
  margin-bottom: 0.5rem;
}

.tc-feedback-title {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-title);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
  line-height: 1.1;
  margin: 0;
}

.tc-feedback-body {
  padding: var(--tc-space-5) var(--tc-space-6);
}

.tc-feedback-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  margin-bottom: var(--tc-space-4);
}

.tc-feedback-extras {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3);
  margin-bottom: var(--tc-space-5);
}

.tc-feedback-email {
  width: 100%;
}

.tc-feedback-checkbox {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  cursor: pointer;
}

.tc-feedback-actions {
  display: flex;
  gap: var(--tc-space-3);
  justify-content: flex-end;
}

.tc-feedback-status {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  margin-top: var(--tc-space-3);
  min-height: 1rem;
}

/* ===================================================
   HISTORY PANEL - MOVE RECORD SYSTEM
   Editorial, integrated, minimal
   =================================================== */

.tc-history-container {
  flex: 1 1 0;
  /* Critical: explicit flex-basis 0 for proper shrinking */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Footer always at bottom */
  background: var(--tc-black-absolute);
  position: relative;
  min-height: 0;
  /* Critical for flex scroll */
  overflow: hidden;
}

.tc-history-slot {
  flex: 1 1 0;
  /* Critical: explicit flex-basis 0 */
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tc-history-panel {
  flex: 1 1 0;
  /* Critical: explicit flex-basis 0 */
  display: flex;
  flex-direction: column;
  padding: var(--tc-space-4);
  gap: var(--tc-space-3);
  min-height: 0;
  overflow: hidden;
}

.tc-history-panel.tc-history-panel-mobile {
  border: 1px solid var(--tc-gray-800);
  border-radius: 0;
  background: var(--tc-black-absolute);
}

.tc-ingame-mobile-meta {
  display: none;
}

/* Header */
.tc-history-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-3);
  margin-bottom: var(--tc-space-2);
}

.tc-history-title {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-body);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-white-pure);
  margin: 0;
}

.tc-history-actions {
  display: flex;
  gap: var(--tc-space-2);
}

/* Navigation Controls */
.tc-history-nav {
  flex-shrink: 0;
  margin-bottom: var(--tc-space-3);
}

.tc-nav-controls {
  display: flex;
  align-items: center;
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-800);
  overflow: hidden;
}

.tc-history-nav-btn {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-right: 1px solid var(--tc-gray-800);
  color: var(--tc-gray-500);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-history-nav-btn:last-of-type {
  border-right: none;
}

.tc-history-nav-btn:hover:not(:disabled) {
  background: var(--tc-gray-800);
  color: var(--tc-white-pure);
}

.tc-history-nav-btn:active:not(:disabled) {
  background: var(--tc-gray-700);
}

.tc-history-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tc-nav-position {
  flex: 1;
  text-align: center;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-tiny);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-gray-400);
  padding: 0 var(--tc-space-3);
  white-space: nowrap;
}

/* Moves List - MUST SCROLL */
.tc-moves-list {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
  padding-right: var(--tc-space-1);
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--tc-gray-700) transparent;
}

.tc-moves-list::-webkit-scrollbar {
  width: 4px;
}

.tc-moves-list::-webkit-scrollbar-track {
  background: transparent;
}

.tc-moves-list::-webkit-scrollbar-thumb {
  background: var(--tc-gray-700);
  border-radius: 2px;
}

.tc-moves-list::-webkit-scrollbar-thumb:hover {
  background: var(--tc-gray-600);
}

/* Move Row */
.tc-move-row {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-2);
  flex-shrink: 0;
}

.tc-move-number {
  width: 1.75rem;
  flex-shrink: 0;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-tiny);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-gray-500);
  text-align: right;
  padding-top: 0.5rem;
  user-select: none;
}

.tc-move-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  flex: 1;
}

/* Move Button - LARGER like before */
.tc-move-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  padding: var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-gray-900);
  border: 1px solid var(--tc-gray-700);
  border-radius: 0.75rem;
  color: var(--tc-gray-100);
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-small);
  font-weight: var(--tc-weight-semibold);
  cursor: pointer;
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
  user-select: none;
}

.tc-move-btn:hover {
  background: var(--tc-gray-800);
  border-color: var(--tc-gray-600);
  color: var(--tc-white-pure);
}

/* Move Button States */
.tc-move-btn--current {
  background: var(--tc-gold-muted);
  border-color: var(--tc-gold);
  color: var(--tc-gold);
}

/* Option 1: Pulse animation on last move when it's your turn */
@keyframes subtle-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
  }
}

.tc-move-btn--current.your-turn-pulse {
  animation: subtle-pulse 2s ease-in-out infinite;
}

.tc-move-btn--future {
  opacity: 0.45;
}

.tc-move-btn--future:hover {
  opacity: 0.8;
}

/* Move Badges - Semantic colors from palette */
.tc-move-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--tc-gray-800);
  border: 1px solid var(--tc-gray-700);
  border-radius: 0.375rem;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-gray-300);
}

/* Capture - Coral (dramatic action) */
.tc-move-badge--capture {
  background: var(--tc-coral-muted);
  border-color: rgba(232, 115, 90, 0.4);
  color: var(--tc-coral);
}

/* Check - Coral (attention needed) */
.tc-move-badge--check {
  background: var(--tc-coral-muted);
  border-color: rgba(232, 115, 90, 0.5);
  color: var(--tc-coral-light);
}

/* Mate - Gold (decisive moment) */
.tc-move-badge--mate {
  background: var(--tc-gold-muted);
  border-color: rgba(212, 168, 83, 0.5);
  color: var(--tc-gold);
}

/* Coach Target Highlight */
.tc-move-btn.coach-target {
  border-color: var(--tc-cyan);
  box-shadow: 0 0 0 3px var(--tc-cyan-muted);
}

/* Game Actions Footer */
.tc-history-footer {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tc-space-2);
  padding: var(--tc-space-4);
  border-top: 1px solid var(--tc-gray-800);
  background: var(--tc-gray-950);
}

/* Centered variant (single button) */
.tc-history-footer--centered {
  grid-template-columns: 1fr;
  justify-items: center;
}

.tc-game-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) var(--tc-space-4);
  background: transparent;
  border: 1px solid var(--tc-gray-700);
  color: var(--tc-gray-400);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-tiny);
  font-weight: var(--tc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
  cursor: pointer;
  transition: all var(--tc-duration-fast) var(--tc-ease-out);
}

.tc-game-action-btn:hover {
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-600);
  color: var(--tc-white-pure);
}

/* Primary action button */
.tc-game-action-btn--primary {
  background: var(--tc-gray-800);
  border-color: var(--tc-gray-600);
  color: var(--tc-gray-200);
}

.tc-game-action-btn--primary:hover {
  background: var(--tc-gray-700);
  border-color: var(--tc-gray-500);
  color: var(--tc-white-pure);
}

.tc-game-action-btn--danger {
  border-color: rgba(255, 62, 62, 0.4);
  color: var(--tc-accent-red);
}

.tc-game-action-btn--danger:hover {
  background: rgba(255, 62, 62, 0.1);
  border-color: var(--tc-accent-red);
}

/* Empty State for Moves */
.tc-moves-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-8);
  text-align: center;
}

.tc-moves-empty-icon {
  font-size: 2.5rem;
  color: var(--tc-gray-800);
  margin-bottom: var(--tc-space-4);
}

.tc-moves-empty-text {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-tiny);
  color: var(--tc-gray-600);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wider);
}

/* Responsive */
@media (max-width: 768px) {
  /* Learn/Review use scroll bodies with flex:1; in mobile auto-height sidebar
     that can collapse them to ~0px. Use block flow so content keeps natural height. */
  #right-sidebar {
    display: block !important;
    height: auto !important;
  }

  #right-sidebar .panel-content.active {
    display: block !important;
  }

  #panel-learn.panel-content.active {
    flex: none !important;
    height: auto !important;
  }

  #panel-learn .tc-panel-body-scroll--lesson-step {
    overflow: visible !important;
  }

  #panel-learn .tc-panel-body-scroll--lesson-step .tc-lesson-step-shell {
    min-height: 0 !important;
  }

  #panel-learn .tc-panel-body-scroll--lesson-step .tc-lesson-content {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #panel-learn .tc-panel-body-scroll--exercise-step {
    overflow: visible !important;
  }

  #panel-learn .tc-panel-body-scroll--exercise-step .tc-exercise-player {
    height: auto !important;
    min-height: 0 !important;
  }

  #panel-learn .tc-panel-body-scroll--exercise-step .tc-exercise-content {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #panel-review .tc-review-tabs-body,
  #panel-review .tc-review-tab-pane {
    height: auto !important;
    min-height: 0 !important;
  }

  #panel-review .tc-review-tab-pane--review.active {
    display: block !important;
  }

  #mainBoardArea {
    --tc-mobile-board-air: 1rem;
    justify-content: flex-start;
    padding-top: var(--tc-mobile-board-air) !important;
    padding-bottom: var(--tc-mobile-board-air) !important;
    overflow-y: hidden !important;
  }

  #mainBoardArea .tc-turn-indicator-top,
  #mainBoardArea .tc-turn-indicator-top.tc-turn-indicator-right {
    display: none !important;
  }

  #mainBoardArea .board-theme-selector {
    bottom: calc(var(--tc-mobile-board-air) * -1);
  }

  #umvControls,
  #boardThemeSelector {
    display: none !important;
  }

  body.tc-mobile-ingame-active #right-sidebar {
    display: none !important;
  }

  body.tc-mobile-ingame-active #mainBoardArea {
    justify-content: flex-start;
    padding-top: var(--tc-mobile-board-air) !important;
    padding-bottom: var(--tc-mobile-board-air) !important;
    overflow-y: auto !important;
  }

  body.tc-mobile-ingame-active #ingameMobileMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 620px;
    margin-top: var(--tc-mobile-board-air);
    padding: var(--tc-space-3) var(--tc-space-2);
    border-top: 1px solid var(--tc-gray-800);
    border-bottom: 1px solid var(--tc-gray-800);
    background: var(--tc-gray-950);
  }

  body.tc-mobile-ingame-active .tc-ingame-mobile-meta-left {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-1);
  }

  body.tc-mobile-ingame-active #ingameMobileMeta .tc-ingame-exit {
    padding: var(--tc-space-2) var(--tc-space-3);
  }

  #historyMobileSlot {
    display: none;
    margin-top: var(--tc-space-2);
  }

  body.tc-mobile-ingame-active #historyMobileSlot {
    display: block;
  }

  #historyMobileSlot .tc-history-panel.tc-history-panel-mobile {
    height: clamp(14rem, 32vh, 19rem);
    padding: var(--tc-space-3);
    gap: var(--tc-space-2);
  }

  #historyMobileSlot .tc-moves-list {
    min-height: 5.5rem;
  }

  .tc-history-panel {
    padding: var(--tc-space-3);
    gap: var(--tc-space-3);
  }

  .tc-nav-btn-icon {
    width: 2.25rem;
    height: 2rem;
  }

  .tc-move-btn {
    padding: var(--tc-space-1) var(--tc-space-2);
    font-size: var(--tc-text-tiny);
  }
}

/* ===================================================
   PLAY RESUME STATE - Volver al historial en partida activa
   =================================================== */

.tc-play-resume-state {
  display: none;
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
}

.tc-panel-empty-icon.tc-play-resume-icon {
  opacity: 0.11;
  margin-bottom: 2rem;
  letter-spacing: 0;
  display: inline-block;
  transform: translateX(0.035em);
}

.tc-play-resume-empty {
  padding: var(--tc-space-8, 2rem);
  padding-top: 3rem;
}

.tc-play-resume-quote {
  max-width: 320px;
  margin-bottom: var(--tc-space-6);
}

.tc-play-resume-btn {
  width: 100%;
}

.sub-panel.tc-subpanel-show-resume .tc-play-resume-state {
  display: flex;
}

.sub-panel.tc-subpanel-show-resume .friends-state,
.sub-panel.tc-subpanel-show-resume .match-state,
.sub-panel.tc-subpanel-show-resume .cpu-state {
  display: none !important;
}

/* ===================================================
   MODE NAVIGATION - Editorial Redesign
   =================================================== */

.tc-mobile-menu-toggle {
  display: none;
}

.tc-mobile-header-actions {
  display: none;
}

.tc-mobile-menu-backdrop {
  display: none;
}

.tc-mobile-menu-toggle-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 16px;
  gap: 4.5px;
}

.tc-mobile-menu-toggle-lines span {
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--tc-white-pure);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#sidebar.tc-mobile-menu-open .tc-mobile-menu-toggle-lines span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

#sidebar.tc-mobile-menu-open .tc-mobile-menu-toggle-lines span:nth-child(2) {
  opacity: 0;
}

#sidebar.tc-mobile-menu-open .tc-mobile-menu-toggle-lines span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.tc-mode-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 768px) {
  .tc-mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tc-duration-normal) var(--tc-ease-out);
  }

  body.tc-mobile-main-menu-open .tc-mobile-menu-backdrop,
  .tc-mobile-menu-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  #sidebar>.flex.flex-col.w-full {
    position: relative;
  }

  #mainModeNav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.94);
    border-top: 1px solid var(--tc-gray-800);
    border-bottom: 1px solid var(--tc-gray-800);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.58);
    max-height: min(68vh, 34rem);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    pointer-events: none;
    transition: opacity var(--tc-duration-fast) var(--tc-ease-out),
      transform var(--tc-duration-fast) var(--tc-ease-out),
      visibility 0s linear var(--tc-duration-fast);
  }

  #sidebar.tc-mobile-menu-open #mainModeNav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  .tc-brand-header {
    /* Match mobile board horizontal air (mainBoardArea p-4 = 1rem) */
    padding: 1rem 1rem !important;
    border-bottom: 1px solid var(--tc-gray-700) !important;
  }

  .tc-brand-header-row {
    align-items: center !important;
    gap: 0.75rem;
  }

  .tc-brand-copy {
    min-width: 0;
    flex: 1;
  }

  .tc-brand-tagline {
    display: none;
  }

  .tc-mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0;
    border: 1px solid var(--tc-gray-700);
    background: transparent;
    cursor: pointer;
  }

  #sidebar.tc-mobile-menu-open .tc-mobile-menu-toggle {
    border-color: var(--tc-gray-500);
    background: var(--tc-gray-900);
  }

  .tc-mobile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
  }

  .tc-mobile-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--tc-gray-700);
    background: transparent;
    cursor: pointer;
  }

  .tc-mobile-header-icon {
    font-size: 1rem;
    width: auto;
    color: var(--tc-gray-500);
  }

  .tc-mobile-header-action:hover {
    background: var(--tc-gray-900);
    border-color: var(--tc-gray-600);
  }

  .tc-mobile-header-action:hover .tc-mobile-header-icon {
    color: var(--tc-gray-300);
  }

  .tc-mobile-header-action--user .tc-mobile-header-icon,
  .tc-mobile-header-action--user:hover .tc-mobile-header-icon {
    color: var(--tc-white-pure);
  }

  .tc-mobile-header-action:hover .tc-heart-mobile {
    color: var(--tc-accent-red);
  }

  .tc-mode-nav {
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
    border-top: 1px solid var(--tc-gray-800);
  }
}

.tc-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tc-gray-800);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}

@media (max-width: 768px) {
  .tc-mode-btn {
    flex-shrink: 0;
    width: 50%;
    border-bottom: 1px solid var(--tc-gray-800);
    border-right: 1px solid var(--tc-gray-800);
  }
}

@media (max-width: 768px) {
  .tc-main-mode-entry {
    display: none;
    width: 100%;
    border-right: none;
  }

  #sidebar.tc-mobile-menu-open .tc-main-mode-entry:not(.hidden) {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-mobile-menu-backdrop,
  #mainModeNav {
    transition: none !important;
  }
}

.tc-mode-btn:hover {
  background: var(--tc-gray-900);
}

.tc-mode-btn.active {
  background: var(--tc-accent-red);
}

.tc-mode-label {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  font-weight: 700;
  color: var(--tc-gray-300);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s ease;
}

.tc-mode-btn:hover .tc-mode-label {
  color: var(--tc-white-pure);
}

.tc-mode-btn.active .tc-mode-label {
  color: var(--tc-black-absolute);
  font-weight: 900;
}

.tc-mode-hint {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.tc-mode-btn:hover .tc-mode-hint {
  color: var(--tc-gray-400);
}

.tc-mode-btn.active .tc-mode-hint {
  color: rgba(0, 0, 0, 0.5);
}

/* --- Mobile-only Nav Extras (Acceder/Apoyar) --- */

.tc-mobile-nav-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tc-mobile-nav-icon {
  font-size: 12px;
  color: var(--tc-gray-600);
  transition: color 0.15s ease;
  width: 14px;
  text-align: center;
}

.tc-mobile-nav-extra:hover .tc-mobile-nav-icon {
  color: var(--tc-gray-400);
}

.tc-mobile-nav-extra {
  display: none;
}

.tc-mobile-uvm-entry {
  display: none;
}

@media (max-width: 768px) {
  .tc-mobile-nav-extra {
    display: none;
  }

  .tc-mobile-uvm-entry {
    display: none;
    width: 100%;
    border-right: none;
  }

  #sidebar.tc-mobile-menu-open .tc-mobile-uvm-entry {
    display: flex;
  }
}

.tc-heart-mobile {
  color: var(--tc-accent-red);
}

/* ===================================================
   NAV FOOTER - User & Support
   =================================================== */

.tc-nav-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--tc-gray-800);
  display: none;
}

@media (min-width: 768px) {
  .tc-nav-footer {
    display: block;
  }
}

.tc-user-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: 1px solid var(--tc-gray-800);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.tc-user-btn:hover {
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-700);
}

.tc-user-avatar {
  width: 36px;
  height: 36px;
  background: var(--tc-gray-800);
  border: 1px solid var(--tc-gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tc-user-btn:hover .tc-user-avatar {
  background: var(--tc-gray-800);
  border-color: var(--tc-gray-600);
}

.tc-user-avatar span {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: 700;
  color: var(--tc-gray-400);
}

.tc-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.tc-user-name {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  font-weight: 700;
  color: var(--tc-gray-300);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-user-status {
  font-family: var(--tc-font-mono);
  font-size: 0.58rem;
  color: var(--tc-gray-500);
  text-transform: lowercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.tc-user-btn:hover .tc-user-name {
  color: var(--tc-white-pure);
}

.tc-user-arrow {
  font-size: 10px;
  color: var(--tc-gray-500);
  transition: transform 0.15s ease;
}

.tc-user-btn:hover .tc-user-arrow {
  transform: translateX(2px);
}

.tc-nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tc-gray-700), transparent);
  margin: 0.875rem 0;
}

.tc-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem;
  background: transparent;
  border: 1px solid var(--tc-gray-800);
  cursor: pointer;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  font-weight: 700;
  color: var(--tc-gray-300);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.15s ease;
}

.tc-support-btn:hover {
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-700);
  color: var(--tc-white-pure);
}

.tc-heart-icon {
  font-size: 11px;
  color: var(--tc-accent-red);
  transition: transform 0.15s ease;
}

.tc-support-btn:hover .tc-heart-icon {
  color: var(--tc-accent-red);
  transform: scale(1.05);
}

/* ===================================================
   AUTH MODAL - Editorial Premium
   =================================================== */

.tc-auth-modal {
  max-width: 400px;
  max-height: none;
  padding: 0;
}

.tc-auth-header {
  position: relative;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-auth-header .tc-glass-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.tc-auth-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tc-auth-brand .tc-mono-tiny {
  color: var(--tc-gray-500);
  display: block;
  margin-bottom: 0.5rem;
}

.tc-auth-title {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-title);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
  margin: 0;
}

.tc-auth-body {
  padding: 1.5rem 2rem 1.5rem;
}

.tc-auth-pitch {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-auth-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tc-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  color: var(--tc-gray-400);
}

.tc-benefit-item i {
  width: 1rem;
  text-align: center;
  font-size: var(--tc-text-tiny);
  color: var(--tc-accent-red);
}

.tc-auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border: 1px solid var(--tc-gray-800);
}

.tc-auth-tab {
  flex: 1;
  padding: 0.875rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-gray-500);
  transition: all 0.15s ease;
}

.tc-auth-tab:first-child {
  border-right: 1px solid var(--tc-gray-800);
}

.tc-auth-tab:hover {
  color: var(--tc-white-pure);
  background: var(--tc-gray-900);
}

.tc-auth-tab.active {
  background: var(--tc-accent-red);
  color: var(--tc-black-absolute);
}

.tc-auth-body .auth-form {
  display: none;
}

.tc-auth-body .auth-form.active {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Inputs in auth/profile/recovery/feedback modals should use body font and preserve typed case */
#authModal .tc-input,
#profileModal .tc-input,
#forgotModal .tc-input,
#resetPwModal .tc-input,
#fbPanel .tc-input {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--tc-font-body);
}

#authModal .tc-input::placeholder,
#profileModal .tc-input::placeholder,
#forgotModal .tc-input::placeholder,
#resetPwModal .tc-input::placeholder,
#fbPanel .tc-input::placeholder {
  font-size: inherit;
}

.tc-auth-forgot {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}

.tc-auth-forgot:hover {
  color: var(--tc-white-pure);
}

.tc-auth-status {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-align: center;
  min-height: 0;
  margin-top: 0.5rem;
}

.tc-auth-status:empty {
  display: none;
  margin-top: 0;
}

.tc-auth-logged {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}

/* Keep auth modal typography aligned with izquierda */
#authModal .tc-small {
  font-size: 0.56rem;
}

#authModal .tc-mono {
  font-size: var(--tc-text-micro);
}

/* ===================================================
   DONATE MODAL - Editorial Premium
   =================================================== */

.tc-donate-modal {
  max-width: 440px;
  max-height: none;
  padding: 0;
}

.tc-donate-header {
  position: relative;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-donate-header .tc-glass-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.tc-donate-header .tc-mono-tiny {
  color: var(--tc-gray-500);
  display: block;
  margin-bottom: 0.5rem;
}

.tc-donate-title {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-title);
  font-weight: 800;
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
  line-height: 1.1;
  margin: 0;
}

.tc-donate-body {
  padding: 1.5rem 2rem 1.5rem;
}

/* Prevent tall-view "phantom" empty space in auth/donate on large screens. */
#authModal .tc-glass-content,
#donateModal .tc-glass-content {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* On short screens, keep modals constrained and scrollable. */
@media (max-height: 900px) {
  #authModal .tc-glass-content {
    max-height: 88vh;
    overflow-y: auto;
  }

  #donateModal .tc-glass-content {
    max-height: 92vh;
    overflow-y: auto;
  }
}

@supports (height: 100dvh) {
  @media (max-height: 900px) {
    #authModal .tc-glass-content {
      max-height: 88dvh;
    }

    #donateModal .tc-glass-content {
      max-height: 92dvh;
    }
  }
}

.tc-donate-intro {
  margin-bottom: 1.5rem;
}

.tc-donate-intro p {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  color: var(--tc-gray-400);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.tc-donate-intro p:last-child {
  margin-bottom: 0;
}

.tc-donate-section-label {
  display: block;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-gray-500);
  margin-bottom: 0.75rem;
}

.tc-donate-options {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-donate-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: 1px solid var(--tc-gray-800);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: all 0.15s ease;
}

.tc-donate-option:last-child {
  margin-bottom: 0;
}

.tc-donate-option:hover {
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-700);
}

.tc-donate-option-name {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  font-weight: 600;
  color: var(--tc-white-pure);
}

.tc-donate-option-hint {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-transform: lowercase;
}

.tc-donate-option i {
  font-size: var(--tc-text-tiny);
  color: var(--tc-gray-500);
}

.tc-donate-share {
  margin-bottom: 1.5rem;
}

.tc-donate-share-hint {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-tiny);
  color: var(--tc-gray-500);
  margin-bottom: 1rem;
}

.tc-share-buttons {
  display: flex;
  gap: 0.5rem;
}

.tc-share-btn {
  flex: 1;
  aspect-ratio: 1;
  max-width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tc-gray-800);
  cursor: pointer;
  color: var(--tc-gray-500);
  font-size: 1rem;
  transition: all 0.15s ease;
}

.tc-share-btn:hover {
  background: var(--tc-white-pure);
  border-color: var(--tc-white-pure);
  color: var(--tc-black-absolute);
}

.tc-share-btn[data-share="whatsapp"]:hover {
  background: #25D366;
  border-color: #25D366;
  color: white;
}

.tc-share-btn[data-share="telegram"]:hover {
  background: #0088cc;
  border-color: #0088cc;
  color: white;
}

.tc-share-btn[data-share="twitter"]:hover {
  background: var(--tc-white-pure);
  border-color: var(--tc-white-pure);
  color: var(--tc-black-absolute);
}

.tc-share-btn[data-share="facebook"]:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: white;
}

.tc-donate-thanks {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-600);
  text-align: center;
  line-height: 1.5;
}

.tc-donate-status {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-align: center;
  min-height: 0;
  margin-top: 0.5rem;
}

.tc-donate-status:empty {
  display: none;
  margin-top: 0;
}

/* Keep donate modal typography aligned with izquierda */
#donateModal .tc-small {
  font-size: 0.56rem;
}

#donateModal .tc-mono {
  font-size: var(--tc-text-micro);
}

/* ===================================================
   MOBILE UVM MODAL - Hamburger entry
   =================================================== */

@media (min-width: 769px) {
  #mobileUvmModal {
    display: none !important;
  }
}

.tc-mobile-uvm-modal {
  max-width: 440px;
  max-height: min(86vh, 640px);
  padding: 0;
  overflow-y: auto;
}

.tc-mobile-uvm-header {
  position: relative;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--tc-gray-800);
}

.tc-mobile-uvm-header .tc-mono-tiny {
  color: var(--tc-gray-500);
  display: block;
  margin-bottom: 0.5rem;
}

.tc-mobile-uvm-title {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-title);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-white-pure);
  text-transform: uppercase;
}

.tc-mobile-uvm-header .tc-glass-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.tc-mobile-uvm-header .tc-glass-close,
.tc-mobile-uvm-header .tc-glass-close:hover {
  color: var(--tc-gray-500);
}

.tc-mobile-uvm-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: grid;
  gap: 1.25rem;
}

.tc-mobile-uvm-section {
  display: grid;
  gap: 0.75rem;
}

.tc-mobile-uvm-section-label {
  margin: 0;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-gray-500);
}

.tc-mobile-uvm-controls-list {
  display: grid;
  gap: 0.5rem;
}

.tc-mobile-uvm-control-btn {
  width: 100%;
  border: 1px solid var(--tc-gray-800);
  background: transparent;
  color: var(--tc-gray-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms var(--tc-ease-out),
    background 150ms var(--tc-ease-out),
    color 150ms var(--tc-ease-out),
    transform 150ms var(--tc-ease-out);
}

.tc-mobile-uvm-control-btn:hover {
  border-color: var(--tc-gray-700);
  background: var(--tc-gray-900);
  color: var(--tc-white-pure);
  transform: translateY(-1px);
}

.tc-mobile-uvm-control-btn i {
  color: var(--tc-gray-500);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.tc-mobile-uvm-control-btn:hover i {
  color: var(--tc-gray-500);
}

.tc-mobile-uvm-control-btn.is-active {
  border-color: var(--tc-gray-600);
  background: var(--tc-gray-900);
  color: var(--tc-white-pure);
}

.tc-mobile-uvm-control-btn.is-active i {
  color: var(--tc-gray-500);
}

.tc-mobile-uvm-control-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.tc-mobile-uvm-control-title {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tc-mobile-uvm-control-hint {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-transform: lowercase;
}

.tc-mobile-uvm-themes-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tc-mobile-uvm-theme-btn {
  width: 100%;
  border: 1px solid var(--tc-gray-800);
  background: var(--tc-gray-950);
  color: var(--tc-gray-300);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  min-height: 2.35rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 150ms var(--tc-ease-out),
    background 150ms var(--tc-ease-out),
    color 150ms var(--tc-ease-out),
    transform 150ms var(--tc-ease-out);
}

.tc-mobile-uvm-theme-btn:hover {
  border-color: var(--tc-gray-700);
  background: var(--tc-gray-900);
  color: var(--tc-white-pure);
  transform: translateY(-1px);
}

.tc-mobile-uvm-theme-btn.is-active {
  border-color: var(--tc-gray-500);
  background: var(--tc-gray-900);
  color: var(--tc-white-pure);
}

.tc-mobile-uvm-theme-preview {
  width: 100%;
  min-height: 100%;
  border-right: 1px solid var(--tc-gray-800);
  transition: opacity 150ms var(--tc-ease-out);
}

.tc-mobile-uvm-theme-btn:hover .tc-mobile-uvm-theme-preview {
  opacity: 0.92;
}

.tc-mobile-uvm-theme-btn.is-active .tc-mobile-uvm-theme-preview {
  border-right-color: var(--tc-gray-600);
}

.tc-mobile-uvm-theme-name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.35rem;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 15, 16, 0.78);
}

/* Shared board-theme swatches for desktop UVM + mobile modal */
.theme-dot,
.tc-mobile-uvm-theme-btn {
  --tc-theme-preview-light: #d6d0c6;
  --tc-theme-preview-dark: #625d57;
}

.theme-dot .dot-preview,
.tc-mobile-uvm-theme-preview {
  background: linear-gradient(135deg, var(--tc-theme-preview-light) 50%, var(--tc-theme-preview-dark) 50%);
}

.theme-dot[data-theme="stone"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="stone"] {
  --tc-theme-preview-light: #d6d0c6;
  --tc-theme-preview-dark: #625d57;
}

.theme-dot[data-theme="oak"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="oak"] {
  --tc-theme-preview-light: #d4c8b8;
  --tc-theme-preview-dark: #6b5a4f;
}

.theme-dot[data-theme="oak2"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="oak2"] {
  --tc-theme-preview-light: #d2c8bd;
  --tc-theme-preview-dark: #655953;
}

.theme-dot[data-theme="mineral"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="mineral"] {
  --tc-theme-preview-light: #d6d1ca;
  --tc-theme-preview-dark: #6d6862;
}

.theme-dot[data-theme="swiss"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="swiss"] {
  --tc-theme-preview-light: #d0ccc5;
  --tc-theme-preview-dark: #625d58;
}

.theme-dot[data-theme="swiss2"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="swiss2"] {
  --tc-theme-preview-light: #d4cfc7;
  --tc-theme-preview-dark: #5d5852;
}

.theme-dot[data-theme="daily"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="daily"] {
  --tc-theme-preview-light: #d8d4ce;
  --tc-theme-preview-dark: #78736c;
}

.theme-dot[data-theme="slate"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="slate"] {
  --tc-theme-preview-light: #c8cdd5;
  --tc-theme-preview-dark: #66707f;
}

.theme-dot[data-theme="slate2"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="slate2"] {
  --tc-theme-preview-light: #c9ced0;
  --tc-theme-preview-dark: #60686f;
}

.theme-dot[data-theme="ember"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="ember"] {
  --tc-theme-preview-light: #d2bcac;
  --tc-theme-preview-dark: #70504c;
}

.theme-dot[data-theme="ember2"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="ember2"] {
  --tc-theme-preview-light: #d4c1b4;
  --tc-theme-preview-dark: #6a5550;
}

.theme-dot[data-theme="blush"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="blush"] {
  --tc-theme-preview-light: #dbc6c5;
  --tc-theme-preview-dark: #826163;
}

.theme-dot[data-theme="blush2"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="blush2"] {
  --tc-theme-preview-light: #d7cbc9;
  --tc-theme-preview-dark: #7a6667;
}

.theme-dot[data-theme="sage"],
.tc-mobile-uvm-theme-btn[data-mobile-board-theme="sage"] {
  --tc-theme-preview-light: #cfd8cb;
  --tc-theme-preview-dark: #627d69;
}

@media (max-width: 640px) {
  .tc-mobile-uvm-modal {
    max-height: 90vh;
  }

  .tc-mobile-uvm-header {
    padding: 1.25rem 1.25rem 1rem;
  }

  .tc-mobile-uvm-body {
    padding: 1rem 1.25rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .tc-mobile-uvm-control-btn,
  .tc-mobile-uvm-theme-btn {
    transition: none !important;
  }
}

/* ===================================================
   WELCOME CARD - First Visit Splash
   =================================================== */

.tc-welcome-card {
  max-width: 440px;
  max-height: 92vh;
  padding: 0;
  text-align: center;
  position: relative;
}

@media (max-width: 640px) {
  .tc-welcome-card {
    max-height: 90vh;
  }
}

.tc-welcome-content {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tc-welcome-kicker {
  color: var(--tc-gray-500);
  display: block;
  margin-bottom: 1.5rem;
  letter-spacing: 0.2em;
}

.tc-welcome-headline {
  font-family: var(--tc-font-body);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
  margin: 0 0 1.5rem 0;
}

.tc-welcome-subheadline {
  font-family: var(--tc-font-body);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
  margin: 0 0 1rem 0;
}

.tc-welcome-body {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  color: var(--tc-gray-400);
  line-height: 1.7;
  margin: 0 0 0.5rem 0;
}

.tc-welcome-body--primary {
  font-size: var(--tc-text-body);
}

.tc-welcome-body--emphasis {
  color: var(--tc-gray-400);
  font-weight: 400;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.tc-welcome-body--step2-intro {
  margin-bottom: 2rem;
  margin-top: 0;
}

.tc-welcome-cta {
  width: 100%;
  padding: 1rem;
  font-size: var(--tc-text-small);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.tc-welcome-login {
  margin-top: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  transition: color 0.15s ease;
}

.tc-welcome-login-arrow {
  font-size: 10px;
  color: inherit;
  transition: transform 0.15s ease;
}

.tc-welcome-login:hover {
  color: var(--tc-white-pure);
}

.tc-welcome-login:hover .tc-welcome-login-arrow {
  transform: translateX(2px);
}

/* Steps */
.tc-welcome-step {
  display: none;
}

.tc-welcome-step.active {
  display: block;
}

/* Secondary CTA */
.tc-welcome-cta-secondary {
  width: 100%;
  padding: 0.75rem;
  font-size: var(--tc-text-small);
}

/* Three spaces cards */
.tc-welcome-spaces {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4);
  width: 100%;
  margin-bottom: 0;
}

.tc-welcome-space-card {
  display: flex;
  align-items: center;
  gap: var(--tc-space-5);
  padding: var(--tc-space-5);
  background: transparent;
  border: 1px solid var(--tc-gray-800);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}

.tc-welcome-space-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--tc-gray-600);
}

.tc-welcome-space-icon {
  font-family: var(--tc-font-headline);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--tc-gray-600);
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.tc-welcome-space-name {
  display: block;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-body);
  font-weight: 800;
  color: var(--tc-white-pure);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.tc-welcome-space-desc {
  display: block;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  color: var(--tc-gray-400);
  line-height: 1.5;
}

/* Name input (Component 3) */
.tc-name-input {
  width: 100%;
  max-width: 280px;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid var(--tc-gray-700);
  color: var(--tc-white-pure);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  text-align: center;
  outline: none;
  transition: border-color 0.15s ease;
}

.tc-name-input::placeholder {
  color: var(--tc-gray-600);
}

.tc-name-input:focus {
  border-color: var(--tc-gray-400);
}

/* ===================================================
   POST-GAME GROWTH SECTION
   =================================================== */

.tc-result-growth {
  margin-top: var(--tc-space-3);
}

.tc-result-reg-nudge {
  text-align: center;
}

.tc-result-nudge-text {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  color: var(--tc-gray-300);
  margin-bottom: var(--tc-space-3);
}

.tc-result-nudge-hint {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-600);
  margin-top: var(--tc-space-2);
}

.tc-result-share-section {
  text-align: center;
}

.tc-result-share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tc-space-2);
}

/* ===================================================
   INVITE SHARE SECTION (sub-friends panel)
   =================================================== */

.tc-invite-share-section {
  margin-top: var(--tc-space-4);
  padding-top: var(--tc-space-4);
  border-top: 1px solid var(--tc-gray-800);
  text-align: center;
}

.tc-invite-share-label {
  display: block;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-gray-600);
  margin-bottom: var(--tc-space-3);
}

.tc-invite-share-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.tc-invite-share-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tc-gray-800);
  cursor: pointer;
  color: var(--tc-gray-500);
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.tc-invite-share-btn:hover {
  background: var(--tc-gray-900);
  border-color: var(--tc-gray-600);
  color: var(--tc-white-pure);
}

/* ===================================================
   CONTEXTUAL DONATION BANNER
   =================================================== */

.tc-donate-banner {
  position: fixed;
  bottom: var(--tc-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: calc(100% - 2rem);
  max-width: 460px;
}

.tc-donate-banner-content {
  background: var(--tc-gray-950);
  border: 1px solid var(--tc-gray-800);
  padding: var(--tc-space-5) var(--tc-space-6);
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.tc-donate-banner-text {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-small);
  color: var(--tc-gray-400);
  line-height: 1.6;
  margin: 0 0 var(--tc-space-4) 0;
}

.tc-donate-banner-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-space-2);
}

.tc-donate-banner-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-micro);
  color: var(--tc-gray-600);
  padding: var(--tc-space-2);
  transition: color 0.15s ease;
}

.tc-donate-banner-dismiss:hover {
  color: var(--tc-gray-400);
}