/* ============================================================
   FORMQ — main.css
   Design system completo
   ============================================================ */

/* ── FONTS ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --ink:     #06060a;
  --ink2:    #0f0f16;
  --ink3:    #1c1c26;
  --mid:     #38384a;
  --paper3:  #6a6678;
  --paper2:  #b8b4aa;
  --paper:   #dedad0;

  --font-display: 'Michroma', sans-serif;
  --font-head:    'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --radius: 0px;
  --border: 1px solid rgba(222,218,208,.08);
  --border-hi: 1px solid rgba(222,218,208,.18);

  --transition: .15s ease;
  --shadow: 0 0 0 1px rgba(222,218,208,.06);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display:block; max-width:100% }
button { cursor:pointer; font-family:inherit; border:none; background:none }
input  { font-family:inherit; border:none; outline:none }
a      { color:inherit; text-decoration:none }

/* ── GRAIN ───────────────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9998; opacity:.5;
}

/* ── GRID BG ─────────────────────────────────────────────── */
.grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(222,218,208,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222,218,208,.025) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}

/* ── CURSOR ──────────────────────────────────────────────── */
* { cursor: none !important }
#fq-cursor {
  position:fixed; width:8px; height:8px;
  background:var(--paper);
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none; z-index:9999;
  transition:width .18s, height .18s, opacity .18s;
  mix-blend-mode:difference;
}
.cursor-large { width:36px !important; height:36px !important }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  letter-spacing:.02em;
  line-height:.9;
}
.t-head {
  font-family: var(--font-head);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.05;
}
.t-label {
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper3);
}
.t-mono { font-family:var(--font-mono) }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center; justify-content:center;
  gap:.5rem;
  padding:12px 24px;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  border: var(--border-hi);
  background:transparent;
  color:var(--paper);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
  position:relative; overflow:hidden;
  white-space:nowrap;
}
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:var(--paper); opacity:0;
  transition:opacity var(--transition);
}
.btn:hover::after  { opacity:.05 }
.btn:active::after { opacity:.1 }
.btn:disabled { opacity:.3; pointer-events:none }

.btn-primary {
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.btn-primary::after { background:var(--ink) }
.btn-primary:hover::after { opacity:.06 }

.btn-ghost {
  border-color: rgba(222,218,208,.12);
  color:var(--paper3);
}

.btn-sm { padding:8px 16px; font-size:.65rem }
.btn-lg { padding:16px 36px; font-size:.78rem }
.btn-full { width:100% }

/* ── INPUTS ──────────────────────────────────────────────── */
.input {
  width:100%;
  padding:13px 16px;
  background:var(--ink2);
  border: var(--border-hi);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.06em;
  transition:border-color var(--transition);
}
.input:focus     { border-color:var(--paper) }
.input::placeholder { color:var(--mid) }
.input-uppercase { text-transform:uppercase; letter-spacing:.22em }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background:var(--ink2);
  border: var(--border);
  padding:1.5rem;
}
.card-dark {
  background:var(--ink3);
  border: var(--border);
}

/* ── SCREENS ─────────────────────────────────────────────── */
.screen {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:2rem 1.5rem;
  position:relative; z-index:1;
}
.screen.active {
  display:flex;
  animation:screenIn .3s ease both;
}
@keyframes screenIn {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ── GAME LAYOUT ─────────────────────────────────────────── */
.game-wrap {
  width:100%; max-width:480px;
  display:flex; flex-direction:column;
  align-items:center; gap:0;
}

/* Header con stats */
.game-header {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 0 1.5rem;
  border-bottom: var(--border);
  margin-bottom:2rem;
}
.stat { display:flex; flex-direction:column; align-items:center; gap:3px }
.stat-val {
  font-family:var(--font-display);
  font-size:1.6rem;
  line-height:1;
  color:var(--paper);
}
.stat-label { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper3) }

/* Dots de secuencia */
.seq-dots {
  display:flex; gap:5px;
  align-items:center; justify-content:center;
  min-height:8px; min-width:60px;
}
.seq-dot {
  width:5px; height:5px;
  background:var(--mid);
  transition:all .15s ease;
}
.seq-dot.done   { background:var(--paper3) }
.seq-dot.active { background:var(--paper); transform:scale(1.5) }

/* Status text */
.status-line {
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper3);
  min-height:1em;
  text-align:center;
  margin-bottom:1.5rem;
}
.status-line.bright { color:var(--paper) }

/* ── SYMBOL GRID ─────────────────────────────────────────── */
.symbol-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:10px;
  width:100%;
  max-width:340px;
  margin-bottom:1.5rem;
}
.sym-btn {
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink2);
  border: var(--border);
  transition:background var(--transition), border-color var(--transition);
  position:relative; overflow:hidden;
}
.sym-btn svg {
  width:30px; height:30px;
  fill:var(--mid);
  transition:fill var(--transition);
  pointer-events:none;
}
.sym-btn:hover:not(.watching) svg { fill:var(--paper2) }
.sym-btn:hover:not(.watching)     { border-color:rgba(222,218,208,.22) }

/* Estados del símbolo */
.sym-btn.flash {
  background:var(--paper);
  border-color:var(--paper);
}
.sym-btn.flash svg { fill:var(--ink) }

.sym-btn.correct {
  border-color:var(--paper);
  background:rgba(222,218,208,.1);
}
.sym-btn.correct svg { fill:var(--paper) }

.sym-btn.wrong { animation:wrongPulse .35s ease }
@keyframes wrongPulse {
  0%,100% { transform:translateX(0) }
  20%     { transform:translateX(-5px) }
  40%     { transform:translateX(5px) }
  60%     { transform:translateX(-3px) }
  80%     { transform:translateX(3px) }
}

.sym-btn.watching { pointer-events:none }

/* Progress bar debajo del grid */
.progress-bar-wrap {
  width:100%; max-width:340px;
  height:2px;
  background:var(--ink3);
  margin-bottom:.75rem;
  overflow:hidden;
}
.progress-bar-fill {
  height:100%;
  background:var(--paper);
  width:0%;
  transition:width .2s ease;
}

.progress-text {
  font-size:.65rem;
  letter-spacing:.16em;
  color:var(--mid);
  text-align:center;
}

/* ── HOME SCREEN ─────────────────────────────────────────── */
.home-logo {
  display:flex; align-items:center; gap:0;
  margin-bottom:.75rem;
}
.home-logo-text {
  font-family:var(--font-display);
  font-size:clamp(3rem,14vw,6rem);
  letter-spacing:.04em;
  line-height:1;
}
.home-logo-q svg {
  height:clamp(2.64rem,12.3vw,5.28rem);
  display:block;
  position:relative; top:.04em;
}
.home-tagline {
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper3);
  margin-bottom:3rem;
  text-align:center;
}
.home-tagline em { color:var(--paper); font-style:normal }

/* Difficulty pills */
.diff-row {
  display:flex; gap:6px;
  margin-bottom:2rem;
}
.diff-btn {
  padding:7px 18px;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  border: var(--border);
  color:var(--paper3);
  background:transparent;
  transition:all var(--transition);
}
.diff-btn.active {
  border-color:var(--paper);
  color:var(--paper);
  background:rgba(222,218,208,.06);
}
.diff-btn:hover { border-color:rgba(222,218,208,.25); color:var(--paper2) }

/* Button group */
.btn-row {
  display:flex; gap:8px;
  width:100%; max-width:300px;
}

/* ── RESULT SCREEN ───────────────────────────────────────── */
.result-score {
  font-family:var(--font-display);
  font-size:clamp(5rem,20vw,9rem);
  line-height:1;
  color:var(--paper);
  margin:.5rem 0;
}
.result-label { /* .t-label already handles this */ }
.result-desc {
  font-size:.82rem;
  color:var(--paper3);
  text-align:center;
  max-width:320px;
  line-height:1.85;
  margin-bottom:1.5rem;
}
.result-desc strong { color:var(--paper); font-weight:400 }

.science-card {
  width:100%; max-width:360px;
  border: var(--border);
  padding:1.25rem;
  background:var(--ink2);
  margin-bottom:2rem;
}
.science-card p {
  font-size:.78rem;
  color:var(--paper3);
  line-height:1.8;
}
.science-card p strong { color:var(--paper); font-weight:400 }

/* ── MULTIPLAYER SCREENS ─────────────────────────────────── */
.mp-title {
  font-family:var(--font-head);
  font-size:clamp(1.8rem,6vw,2.8rem);
  font-weight:800;
  letter-spacing:-.04em;
  margin-bottom:.5rem;
}
.mp-sub {
  font-size:.78rem;
  color:var(--paper3);
  text-align:center;
  max-width:300px;
  line-height:1.7;
  margin-bottom:2rem;
}

.room-code {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,10vw,4.5rem);
  letter-spacing:.25em;
  color:var(--paper);
  margin:.5rem 0 .25rem;
}
.room-url {
  font-size:.65rem;
  letter-spacing:.08em;
  color:var(--mid);
  word-break:break-all;
  text-align:center;
  max-width:320px;
  padding:.75rem;
  border: var(--border);
  background:var(--ink2);
  margin-bottom:1.5rem;
}

/* Players list */
.players-list {
  width:100%; max-width:320px;
  margin-bottom:1.5rem;
}
.player-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 0;
  border-bottom: var(--border);
  font-size:.82rem;
}
.player-pip {
  width:5px; height:5px;
  background:var(--mid);
  flex-shrink:0;
}
.player-pip.ready { background:var(--paper) }
.player-name { color:var(--paper2) }

/* ── MP RESULTS ──────────────────────────────────────────── */
.results-list {
  width:100%; max-width:360px;
  margin-bottom:1.5rem;
}
.result-row {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom: var(--border);
}
.result-row:first-child { border-top: var(--border) }
.result-row.winner .result-row-name::after {
  content:' ◆';
  font-size:.6rem;
  color:var(--paper);
  margin-left:6px;
}
.result-row-name { font-size:.85rem; color:var(--paper2) }
.result-row-score {
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--paper);
}

/* ── LEADERBOARD ─────────────────────────────────────────── */
.lb-table {
  width:100%; max-width:360px;
  margin-bottom:1.5rem;
}
.lb-row {
  display:grid;
  grid-template-columns:2rem 1fr auto;
  gap:.75rem;
  align-items:center;
  padding:9px 0;
  border-bottom: var(--border);
  font-size:.78rem;
}
.lb-row:first-child { border-top: var(--border) }
.lb-rank  { color:var(--mid); font-family:var(--font-display); font-size:.85rem }
.lb-name  { color:var(--paper2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lb-score { font-family:var(--font-display); color:var(--paper) }
.lb-row.me .lb-name  { color:var(--paper) }
.lb-row.me .lb-score { color:var(--paper) }

/* ── TOASTS ──────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.5rem;
  align-items:center; z-index:9997;
  pointer-events:none;
}
.toast {
  padding:10px 20px;
  background:var(--paper);
  color:var(--ink);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  animation:toastIn .25s ease both, toastOut .25s ease 2.5s both;
  white-space:nowrap;
}
.toast.error {
  background:var(--ink2);
  color:var(--paper);
  border: var(--border-hi);
}
@keyframes toastIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }

/* ── DIVIDER ─────────────────────────────────────────────── */
.divider {
  width:100%; max-width:360px;
  height:1px; background:rgba(222,218,208,.07);
  margin:1.25rem 0;
}

/* ── LOADING ─────────────────────────────────────────────── */
.loading-dots::after {
  content:'';
  animation:dots 1.2s steps(4,end) infinite;
}
@keyframes dots {
  0%  { content:'' }
  25% { content:'.' }
  50% { content:'..' }
  75% { content:'...' }
}

/* ── BACK BUTTON ─────────────────────────────────────────── */
.back-btn {
  position:absolute; top:1.5rem; left:1.5rem;
  font-size:.65rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mid);
  padding:.5rem;
  transition:color var(--transition);
  z-index:10;
}
.back-btn:hover { color:var(--paper2) }

/* ── FOOTER MARK ─────────────────────────────────────────── */
.game-footer-mark {
  margin-top:2rem;
  font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink3);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 420px) {
  .symbol-grid { gap:7px; max-width:300px }
  .sym-btn svg { width:24px; height:24px }
  .btn-row     { flex-direction:column }
  .btn-row .btn { width:100% }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}