:root {
  --bg: #1B1033;
  --bg2: #2E1757;
  --text: #FFF1D6;
  --accent: #FFC933;
  --accent-dark: #E0A800;
  --board: #7C5CFF;
  --cell: #FFF1D6;
  --x: #FF5D73;
  --o: #27E0C8;
  --shadow: 4px 5px 0 #05020B;
  --modal-bg: #2A1850;
  --modal-text: #FFF1D6;
  --muted: #C3B3E6;
  --field-bg: #FFF1D6;
  --field-text: #2B1B3D;
  --accent-text: #FFC933;
  --accent-btn: #FFC933;
  --on-accent: #2B1B3D;
  --x-cell: #C41F3B;
  --o-cell: #08695D;
  --danger-bg: #D6304A;
  --ring-board: #FFF1D6;
  --line: #FFF1D6;
  --hard: #05020B;
  --ink: #2B1B3D;
  --paper: #FFF1D6;
  --pop-lila: #B79CFF;
  --pop-teal: #5FE0D1;
  --pop-pink: #FF8FA0;
  --deg-1: #7C5CFF;
  --deg-2: #17B5A5;
  --deg-3: #F2576C;
  --deg-4: #F39A2D;
  --deg-5: #2E9BF0;
  --deg-6: #E9439A;
  --deg-7: #3DAE4F;
  --deg-8: #8E4FE0;
  --deg-9: #D9A521;
  --deg-10: #3B6FE0;
  --deg-11: #E5603B;
  --deg-12: #22A6C8;
  --deg-13: #B44FD1;
  --deg-14: #5AA832;
}
body.light {
  --bg: #FFF3D6;
  --bg2: #FFE3C2;
  --text: #2B1B3D;
  --accent: #7C5CFF;
  --accent-dark: #5B3FD6;
  --board: #7C5CFF;
  --cell: #FFFFFF;
  --x: #E8334F;
  --o: #0C8C7B;
  --shadow: 4px 5px 0 #2B1B3D;
  --modal-bg: #FFFFFF;
  --modal-text: #2B1B3D;
  --muted: #5A4872;
  --field-bg: #FFFFFF;
  --field-text: #2B1B3D;
  --accent-text: #5B38DD;
  --accent-btn: #FFC933;
  --on-accent: #2B1B3D;
  --x-cell: #D62A47;
  --o-cell: #0B7F70;
  --danger-bg: #D6304A;
  --ring-board: #FFFFFF;
  --line: #2B1B3D;
  --hard: #2B1B3D;
  --ink: #2B1B3D;
  --paper: #FFFFFF;
  --pop-lila: #B79CFF;
  --pop-teal: #5FE0D1;
  --pop-pink: #FF8FA0;
}
body.dark {
  --bg: #1B1033;
  --bg2: #2E1757;
  --text: #FFF1D6;
  --accent: #FFC933;
  --accent-dark: #E0A800;
  --board: #7C5CFF;
  --cell: #FFF1D6;
  --x: #FF5D73;
  --o: #27E0C8;
  --shadow: 4px 5px 0 #05020B;
  --modal-bg: #2A1850;
  --modal-text: #FFF1D6;
  --muted: #C3B3E6;
  --field-bg: #FFF1D6;
  --field-text: #2B1B3D;
  --accent-text: #FFC933;
  --accent-btn: #FFC933;
  --on-accent: #2B1B3D;
  --x-cell: #C41F3B;
  --o-cell: #08695D;
  --danger-bg: #D6304A;
  --ring-board: #FFF1D6;
  --line: #FFF1D6;
  --hard: #05020B;
  --ink: #2B1B3D;
  --paper: #FFF1D6;
  --pop-lila: #B79CFF;
  --pop-teal: #5FE0D1;
  --pop-pink: #FF8FA0;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFF3D6;
    --bg2: #FFE3C2;
    --text: #2B1B3D;
    --accent: #7C5CFF;
    --accent-dark: #5B3FD6;
    --board: #7C5CFF;
    --cell: #FFFFFF;
    --x: #E8334F;
    --o: #0C8C7B;
    --shadow: 4px 5px 0 #2B1B3D;
    --modal-bg: #FFFFFF;
    --modal-text: #2B1B3D;
    --muted: #5A4872;
    --field-bg: #FFFFFF;
    --field-text: #2B1B3D;
    --accent-text: #5B38DD;
    --accent-btn: #FFC933;
    --on-accent: #2B1B3D;
    --x-cell: #D62A47;
    --o-cell: #0B7F70;
    --danger-bg: #D6304A;
    --ring-board: #FFFFFF;
    --line: #2B1B3D;
    --hard: #2B1B3D;
    --ink: #2B1B3D;
    --paper: #FFFFFF;
    --pop-lila: #B79CFF;
    --pop-teal: #5FE0D1;
    --pop-pink: #FF8FA0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.full-motion) * { animation: none !important; transition: none !important; }
}
body.reduce-motion * { animation: none !important; transition: none !important; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: max(10px, env(safe-area-inset-top), var(--safe-area-inset-top, 0px)) 12px calc(max(14px, env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px)) + var(--ad-h, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  transition: background 0.4s, color 0.4s;
}
h1 { font-size: clamp(0.95rem, 6.1vw, 2rem); text-transform: uppercase; white-space: nowrap; line-height: 1.1; margin: 0; color: var(--accent-text); letter-spacing: -0.02em; font-weight: 800; text-align: center; }
.info { font-size: 0.78rem; color: var(--muted); text-align: center; margin: 2px 0 8px; }
button, select, input { font: inherit; }
button {
  background: var(--accent-btn);
  color: var(--on-accent);
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  transition: transform 0.12s ease, filter 0.12s;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.chip:disabled { border-color: color-mix(in srgb, var(--text) 12%, transparent); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.danger { background: var(--danger-bg); color: #fff; }
button.chip {
  background: transparent;
  color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent);
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
button.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); }
button.chip.wide { width: 100%; }
select, input {
  background: var(--field-bg);
  color: var(--field-text);
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 46px;
  font-size: 0.95rem;
}

/* ---------- Lobby ---------- */
#lobby {
  width: min(92vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.lang-row { display: flex; justify-content: flex-end; gap: 6px; }
.lobby-title { margin: 0; font-size: 1.15rem; text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.field select { width: 100%; }
.hint { color: var(--muted); font-size: 0.78rem; line-height: 1.35; min-height: 2.1em; }
.row { display: flex; gap: 10px; }
.row > button { flex: 1; }
.btn-primary { padding: 12px 16px; font-size: 1rem; }

/* ---------- HUD ---------- */
#hud {
  width: min(94vw, 420px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 6px;
}
.sb-item {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.sb-sym { font-weight: 800; font-size: 1.15rem; }
.sb-x .sb-sym, .sb-x b { color: var(--x); }
.sb-o .sb-sym, .sb-o b { color: var(--o); }
.sb-item b { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
.sb-item small { font-size: 0.65rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sb-item.turn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.sb-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 78px; }
#sb-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.2rem; color: var(--accent-text); }
.sb-center small { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
#game-info { width: min(94vw, 420px); }
#status { text-align: center; font-weight: 700; min-height: 1.4em; font-size: 1rem; }
#conn { font-size: 0.75rem; color: var(--muted); text-align: center; min-height: 1em; }
#notice { text-align: center; font-size: 0.85rem; min-height: 1.4em; color: var(--accent-text); font-weight: 700; }
#thinking { text-align: center; font-size: 0.78rem; color: var(--muted); min-height: 1.2em; font-weight: 600; }

/* ---------- Tablero ---------- */
#main-area { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 900px; }
#board-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#board-title {
  width: var(--board-size);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 4px;
  min-height: 46px;
}
#bt-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; min-width: 0; line-height: 1.25; }
#bt-grade { white-space: nowrap; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--accent-text); }
#bt-where { font-size: 0.92rem; font-weight: 700; color: var(--text); min-width: 0; }
#bt-where:not(:empty)::before { content: '\00a0·\00a0'; color: var(--muted); }
#bt-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
:root { --board-size: clamp(280px, min(92vw, 380px, 100svh - 430px), 380px); }
#viewport {
  width: var(--board-size);
  height: var(--board-size);
  border-radius: 18px;
  background: var(--board);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  transition: box-shadow 0.25s;
}
#viewport.marking { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
#viewport.previewing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 40%, transparent), var(--shadow); }
#viewport.previewing #board-container { opacity: 0.8; }
#board-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
}
.cell {
  background: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--board-size) * 0.17);
  font-weight: 800;
  cursor: default;
  border-radius: 12px;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s;
}
.cell.empty-clickable { cursor: pointer; }
.cell.empty-clickable::after {
  content: attr(data-ghost);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.cell.empty-clickable:hover::after, .cell.empty-clickable:focus-visible::after { opacity: 0.22; }
@media (hover: hover) { .cell.empty-clickable:hover { transform: scale(1.03); } }
.cell.empty-clickable:active { transform: scale(0.96); }
.cell.focused, .cell:focus-visible { outline: 3px solid var(--ring-board); outline-offset: 2px; }
.cell.x { color: var(--x-cell); }
.cell.o { color: var(--o-cell); }
.cell.empty-clickable[data-ghost="X"] { color: var(--x-cell); }
.cell.empty-clickable[data-ghost="O"] { color: var(--o-cell); }
.cell.ai-last { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px rgba(0,0,0,0.18); }
.cell.win-line { background: color-mix(in srgb, var(--accent) 35%, var(--cell)); }
.cell.just-placed { animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
body.colorblind .cell.x::before { content: '✕'; }
body.colorblind .cell.o::before { content: '○'; }
body.colorblind .cell.x, body.colorblind .cell.o { color: transparent; }
body.colorblind .cell.x::before, body.colorblind .cell.o::before { color: var(--bg); position: absolute; }
body.colorblind .cell.x::before { color: #B3341A; }
body.colorblind .cell.o::before { color: #1B5E3B; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0.3; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
#viewport.swap #board-container { animation: swapIn 0.3s ease-out; }
@keyframes swapIn { from { opacity: 0.25; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
#viewport.ascend { animation: ascend 0.6s ease-out; }
@keyframes ascend {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow); }
  60% { transform: scale(1.02); box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent), var(--shadow); }
  100% { transform: scale(1); }
}

.win-line-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.win-line-svg line { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; animation: drawLine 0.55s ease-out forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.particle { position: fixed; pointer-events: none; border-radius: 50%; z-index: 9999; animation: burst 0.6s ease-out forwards; }
@keyframes burst { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

#preview-bar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: var(--modal-bg);
  color: var(--modal-text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 6;
}
#preview-bar .chip { color: var(--modal-text); }

/* ---------- Pila de grados ---------- */
#overview {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: min(94vw, 420px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 8px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.mini-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  color: var(--muted);
  padding: 4px;
  min-height: 0;
  border-radius: 12px;
  border: 2px solid transparent;
}
.mini-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.mini {
  width: 56px;
  aspect-ratio: 1;
  background: var(--board);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mini span {
  background: var(--cell);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}
.mini-wrap.active { border-color: var(--accent); color: var(--accent-text); }
.mini-wrap.viewing { border-color: var(--text); border-style: dashed; color: var(--text); }
.mini-wrap.target .mini { animation: targetPulse 1.4s ease-in-out infinite; }
@keyframes targetPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent, 0 2px 8px rgba(0,0,0,0.2); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 8px rgba(0,0,0,0.2); } }
@media (hover: hover) { .mini-wrap:hover { border-color: color-mix(in srgb, var(--text) 35%, transparent); } }

/* ---------- Controles ---------- */
#game-controls { width: min(94vw, 420px); flex-direction: column; gap: 10px; margin-top: 4px; }
#game-controls .primary { display: flex; gap: 10px; }
#game-controls .primary button { flex: 1; }
#game-controls .secondary { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.note { font-size: 0.68rem; max-width: 560px; text-align: center; color: var(--muted); margin-top: 10px; line-height: 1.45; }
#chat { width: min(94vw, 380px); max-height: 80px; overflow-y: auto; font-size: 0.78rem; background: rgba(0,0,0,0.1); border-radius: 8px; padding: 8px; margin: 6px 0; }

/* ---------- Modales ---------- */
#summary-modal, #tutorial-modal, #stats-modal, #share-modal, #settings-modal, #backup-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px 16px calc(16px + var(--ad-h, 0px));
}
#summary-modal.show, #tutorial-modal.show, #stats-modal.show, #share-modal.show, #settings-modal.show, #backup-modal.show { display: flex; }
#summary-box, #tutorial-box, #stats-box, #share-box, #settings-box, #backup-box {
  background: var(--modal-bg);
  color: var(--modal-text);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 420px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  text-align: center;
}
#summary-box h2, #tutorial-box h2, #stats-box h2, #share-box h2, #settings-box h2, #backup-box h2, #dialog-box h2 { margin: 0 0 12px; color: var(--accent-text); font-size: 1.3rem; }
#summary-box p, #tutorial-box p { margin: 8px 0; line-height: 1.45; }
#summary-box button, #tutorial-box button { margin-top: 16px; }

/* ---------- Escritorio ---------- */
@media (min-width: 760px) {
  :root { --board-size: clamp(300px, min(60vh, 440px), 440px); }
  #main-area { flex-direction: row; align-items: flex-start; justify-content: center; gap: 22px; }
  #overview { flex-direction: column; width: auto; max-height: calc(var(--board-size) + 60px); overflow-x: hidden; overflow-y: auto; }
  #hud, #game-controls { width: min(94vw, 520px); }
}

/* ---------- Fase 5: diálogos propios, aviso, lector de pantalla ---------- */
#dialog-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: none; align-items: center; justify-content: center; z-index: 110; padding: 16px;
}
#dialog-modal.show { display: flex; }
#dialog-box {
  background: var(--modal-bg); color: var(--modal-text); border-radius: 16px; padding: 22px 20px;
  max-width: 380px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.4); text-align: center;
}
#dialog-box p { margin: 8px 0 0; line-height: 1.45; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.dialog-actions button { margin-top: 0 !important; min-height: 44px; }
#summary-box .dialog-actions button, #tutorial-box button { margin-top: 16px; }
#summary-box .dialog-actions { margin-top: 0; }
#toast {
  position: fixed; left: 50%; bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--ad-h, 0px)); transform: translateX(-50%);
  background: var(--modal-bg); color: var(--modal-text); border: 1px solid var(--accent-text);
  padding: 10px 16px; border-radius: 12px; font-size: 0.9rem; z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#toast.show { opacity: 1; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lang-row .chip[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent-text); }

/* ---------- Fase 6: multijugador online ---------- */
.online { display: flex; flex-direction: column; gap: 10px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; }
#online-wait { text-align: center; }
#online-wait p { margin: 4px 0; color: var(--muted); }
#room-code-big { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.2em; color: var(--accent-text); margin: 6px 0 10px; user-select: all; }
#chat { width: min(94vw, 520px); max-height: 96px; text-align: left; color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
#chat-row { display: flex; gap: 8px; width: min(94vw, 520px); }
#chat-row input { flex: 1; min-width: 0; }
#chat-row[hidden], #chat[hidden] { display: none !important; }

/* ---------- Fase 7: sin estilos en línea (CSP) y PWA ---------- */
#app { display: contents; }
#hud, #game-info, #main-area, #game-controls { display: none; }
#offline-badge, #update-bar {
  width: min(94vw, 520px); text-align: center; font-size: 0.85rem; padding: 8px 12px; border-radius: 12px; margin: 0 0 8px;
  background: var(--modal-bg); color: var(--modal-text); border: 1px solid var(--accent-text);
}
#update-bar { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
#update-bar[hidden], #offline-badge[hidden] { display: none; }
#update-bar .chip { color: var(--modal-text); }
#app-version { opacity: 0.7; }

/* ---------- Fase 8: tutorial, estadísticas, compartir, ajustes ---------- */
.lobby-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lobby-links .chip { flex: 1 1 auto; min-height: 44px; }
#coach { width: min(94vw, 520px); background: var(--modal-bg); color: var(--modal-text); border: 1px solid var(--accent-text); border-radius: 16px; padding: 12px 14px; margin: 8px 0; text-align: center; }
#coach .coach-step { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-text); text-transform: uppercase; }
#coach p { margin: 6px 0 10px; line-height: 1.4; font-size: 0.95rem; }
#coach .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#coach .chip { color: var(--modal-text); }
.cell.coach-target { outline: 3px solid var(--accent-text); outline-offset: -3px; animation: coachPulse 1.2s ease-in-out infinite; }
@keyframes coachPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-text) 45%, transparent); } }
.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#stats-box, #share-box, #settings-box { text-align: left; }
#stats-box { max-width: 520px; }
#stats-box h2, #share-box h2, #settings-box h2 { text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 12px; }
.stat-tile { background: color-mix(in srgb, var(--modal-text) 8%, transparent); border-radius: 12px; padding: 8px 10px; }
.stat-tile b { display: block; font-size: 1.3rem; }
.stat-tile span { font-size: 0.78rem; opacity: 0.8; }
#stats-body h3 { margin: 14px 0 6px; font-size: 0.95rem; color: var(--accent-text); }
#stats-body table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
#stats-body th, #stats-body td { padding: 4px 6px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--modal-text) 15%, transparent); }
#stats-body .tablewrap { overflow-x: auto; }
#stats-body .empty { text-align: center; opacity: 0.8; margin: 16px 0; }
#share-box { max-width: 460px; text-align: center; }
#share-canvas { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; border-radius: 12px; display: block; margin: 0 auto; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--modal-text) 12%, transparent); }
.set-row label { flex: 1; }
.set-row input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent-btn); }
.set-row input[type="range"] { flex: 1.2; min-height: 0; padding: 0; accent-color: var(--accent-btn); }
.set-row select { min-height: 40px; max-width: 48%; }

/* ---------- Esquina superior: ajustes y tema ---------- */
#head { display: flex; flex-direction: column; align-items: center; width: 100%; }
#top { position: relative; width: min(94vw, 520px); padding: 0 56px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 6px; }
.icon-btn {
  position: absolute; top: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
}
#settings-btn { left: 0; }
#theme-btn { right: 0; }
.icon-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, transparent); }
#theme-btn span { font-size: 1.5rem; }
#top .info { margin-bottom: 4px; }
#top { min-height: 52px; }
.icon-btn.inline { position: static; width: 44px; height: 44px; flex: none; }
.icon-btn svg { display: block; }
.set-sec { margin: 14px 0 2px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.set-sec:first-of-type { margin-top: 4px; }
#settings-box .lang-row { flex: none; }
#settings-box { max-height: min(88vh, 720px); overflow-y: auto; }
#summary-box .dialog-actions .icon-btn.inline { margin-top: 0 !important; }
#summary-possible { color: var(--muted); font-size: 0.92rem; }

/* Subir de grado: se ve el símbolo en el tablero superior y se "entra" en la casilla marcada */
#board-container { transform-origin: var(--zx, 50%) var(--zy, 50%); }
#viewport.zoom-in #board-container { animation: zoomInto var(--zoom-ms, 300ms) cubic-bezier(0.5, 0, 0.9, 0.5) forwards; }
@keyframes zoomInto { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
#viewport.zoom-out #board-container { animation: zoomFrom var(--zoom-ms, 300ms) cubic-bezier(0.1, 0.5, 0.3, 1) both; }
@keyframes zoomFrom { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Escritorio en partida: tablero grande + panel lateral ---------- */
@media (min-width: 980px) {
  body.ingame { padding-top: 16px; }
  body.ingame #app {
    display: grid;
    grid-template-columns: auto minmax(340px, 400px);
    grid-template-areas: "head head" "main hud" "main info" "main coach" "main chat" "main chatrow" "main controls" "main note";
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: 44px; justify-content: center; align-items: start; width: 100%; max-width: 1200px; margin: 0 auto;
  }
  body.ingame #head { grid-area: head; }
  body.ingame #top { width: 100%; }
  body.ingame #main-area { grid-area: main; width: auto; max-width: none; }
  body.ingame #hud { grid-area: hud; width: 100%; margin-top: var(--bt-off); }
  body.ingame #game-info { grid-area: info; width: 100%; }
  body.ingame #coach { grid-area: coach; width: 100%; }
  body.ingame #chat { grid-area: chat; width: 100%; }
  body.ingame #chat-row { grid-area: chatrow; width: 100%; }
  body.ingame #game-controls { grid-area: controls; width: 100%; margin-top: 10px; }
  body.ingame .note { grid-area: note; align-self: end; max-width: none; }
  body.ingame { --board-size: clamp(320px, min(100svh - 190px, 100vw - 620px, 640px), 640px); }
  body.ingame .cell { font-size: calc(var(--board-size) * 0.16); }
  body.ingame #hud .sb-item b { font-size: 1.9rem; }
  body.ingame #hud .sb-sym { font-size: 1.4rem; }
  body.ingame #sb-time { font-size: 1.5rem; }
  body.ingame #status { font-size: 1.15rem; }
  body.ingame .mini { width: 72px; }
  body.ingame #game-controls .secondary { justify-content: flex-start; }
  body.ingame #overview { max-height: calc(var(--board-size) + 40px); }
}
@media (min-width: 760px) and (max-width: 979px) { body.ingame { --board-size: clamp(300px, min(100svh - 360px, 520px), 520px); } }

/* ---------- App nativa y anuncios ---------- */
#set-privacy-row .chip { flex: 0 0 auto; }
#hint-btn { border-color: var(--accent-text); color: var(--accent-text); }
#settings-box .dialog-actions { position: sticky; bottom: -1px; background: var(--modal-bg); padding: 10px 0 2px; margin-top: 10px; }

/* ---------- Inicio: tres modos ---------- */
#lobby { width: min(92vw, 420px); }
#home, #setup { display: flex; flex-direction: column; gap: 14px; }
#home[hidden], #setup[hidden], .cont-saved[hidden] { display: none; }
.mode-cards { display: flex; flex-direction: column; gap: 12px; }
.mode-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 0;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 16px;
}
.mode-main {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 72px; padding: 14px 16px;
  background: transparent; color: inherit; border: 0; border-radius: 16px;
}
.mode-card.mode-main { border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); background: color-mix(in srgb, var(--text) 7%, transparent); }
.mode-card:hover, .mode-main:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 16%, transparent); }
#card-cont { border-color: var(--accent); }
.mode-ico { font-size: 2rem; line-height: 1; width: 2.4rem; text-align: center; flex: none; color: var(--accent-text); }
.mode-txt { display: flex; flex-direction: column; gap: 3px; }
.mode-txt b { font-size: 1.1rem; letter-spacing: 0.02em; }
.mode-txt small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.cont-saved { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.cont-info { font-weight: 700; color: var(--accent-text); font-size: 0.95rem; }
.setup-head { display: flex; align-items: center; gap: 10px; }
.setup-head .lobby-title { flex: 1; text-align: left; font-size: 1.3rem; }
#setup-desc { margin: 0; min-height: 0; }
.tabs { gap: 6px; }
.tabs .chip[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent-text); }
#backup-text { width: 100%; font: 0.78rem/1.35 ui-monospace, monospace; word-break: break-all; resize: vertical; min-height: 96px; }
body.ingame #top h1 { font-size: clamp(1.1rem, 4.6vw, 1.5rem); }
@media (min-width: 900px) { body:not(.ingame) .mode-cards { gap: 14px; } }
.mode-card.mode-main { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; min-height: 72px; }
#top { padding: 0 50px; }
@media (max-width: 340px) { h1 { white-space: normal; font-size: 1.15rem; } }
.set-row .chip { min-height: 44px; }

/* =====================================================================
   Fase 12 · Estilo "Juguetón": contornos gruesos, sombras duras, colores vivos.
   Claro = Caramelo · Oscuro = Medianoche (las variables están arriba).
   ===================================================================== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/poppins-bold.woff2") format("woff2"); }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
}
body:not(.ingame)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("icons/confetti.svg") center top / 420px 420px repeat;
}
b, strong, h1, h2, h3, button, th { font-weight: 700; }

/* Botones */
button {
  border: 3px solid var(--line); border-radius: 16px; box-shadow: 3px 4px 0 var(--hard);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s;
}
button:hover:not(:disabled) { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--hard); }
button:active:not(:disabled) { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--hard); }
button:disabled { box-shadow: 2px 3px 0 var(--hard); }
button.danger { color: #fff; }
button.chip {
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 999px;
  box-shadow: 2px 3px 0 var(--hard); font-weight: 700;
}
button.chip:hover:not(:disabled) { background: var(--paper); box-shadow: 3px 4px 0 var(--hard); }
button.chip[aria-pressed="true"] { background: var(--accent-btn); color: var(--on-accent); border-color: var(--line); }
button.chip:disabled { border-color: var(--line); }
#preview-bar .chip, #update-bar .chip, #coach .chip { color: var(--ink); }
.btn-primary { border-radius: 999px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
select, input, textarea {
  background: var(--field-bg); color: var(--field-text); border: 2.5px solid var(--line); border-radius: 14px;
  font-weight: 600; box-shadow: 2px 3px 0 var(--hard);
}
.hint, .field label { font-weight: 600; }

/* Cabecera */
#head { margin-bottom: 4px; }
#top { width: min(94vw, 560px); padding: 0; min-height: 52px; }
.icon-btn {
  background: var(--accent-btn); color: var(--on-accent); border: 3px solid var(--line); border-radius: 50%;
  box-shadow: 2px 3px 0 var(--hard); z-index: 2;
}
.icon-btn:hover:not(:disabled) { background: var(--accent-btn); }
.icon-btn.inline { background: var(--paper); }
#theme-ico { font-size: 0; }
#theme-btn .ico-sun { display: none; }
#theme-btn[data-mode="dark"] .ico-moon { display: none; }
#theme-btn[data-mode="dark"] .ico-sun { display: block; }
#theme-btn[data-mode="light"] .ico-sun { display: none; }
h1 { color: var(--text); font-weight: 800; letter-spacing: 0; }
h1 .t1, h1 .t2 { display: inline; }
h1 span span {
  -webkit-text-stroke: 0.075em var(--line); paint-order: stroke fill;
  text-shadow: 0.05em 0.07em 0 var(--hard); letter-spacing: 0.02em;
}
.t1 .k0 { color: #FF5D73; } .t1 .k1 { color: #FF9F43; } .t1 .k2 { color: #FFC933; } .t1 .k3 { color: #27C4B5; }
.t1 .k4 { color: #7C5CFF; } .t1 .k5 { color: #FF5D73; } .t1 .k6 { color: #FF9F43; } .t1 .k7 { color: #27C4B5; }
.t2 .m0 { color: #7C5CFF; } .t2 .m1 { color: #27C4B5; } .t2 .m2 { color: #FF5D73; } .t2 .m3 { color: #FFC933; }
#top .info { color: var(--muted); font-weight: 700; font-size: 0.82rem; margin: 6px 0 4px; }
/* Inicio: título en dos líneas y grande, botones en las esquinas por encima */
body:not(.ingame) #top { min-height: 0; margin-bottom: 4px; padding-top: 46px; }
body:not(.ingame) h1 { font-size: clamp(2rem, 11vw, 3.1rem); line-height: 1.02; white-space: normal; }
body:not(.ingame) h1 .t1, body:not(.ingame) h1 .t2 { display: block; }
body:not(.ingame) h1 .t2 { font-size: 0.93em; }
body:not(.ingame) #settings-btn, body:not(.ingame) #theme-btn { top: 0; }
@media (min-width: 560px) {
  body:not(.ingame) #top { padding-top: 6px; }
  body:not(.ingame) h1 { font-size: 3.1rem; }
}
/* En partida: una sola línea compacta entre los dos botones */
body.ingame #top { padding: 0 56px; }
body.ingame #top h1 { font-size: clamp(1rem, 4.6vw, 1.45rem); white-space: nowrap; }
@media (max-width: 340px) { body:not(.ingame) h1 { font-size: 1.8rem; } body.ingame h1 { white-space: normal; } }

/* Inicio */
#lobby { width: min(92vw, 440px); }
@media (min-width: 900px) { #lobby { width: 480px; } }
.hero { display: block; width: 150px; height: auto; margin: 2px auto -2px; overflow: visible; }
@media (min-width: 900px) { .hero { width: 170px; } }
@media (max-height: 760px) and (max-width: 600px) { .hero { display: none; } }
.hero .h-sh { fill: var(--hard); }
.hero .h-fr { fill: var(--paper); stroke: var(--line); stroke-width: 3.5; }
.hero .h-ln { stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; fill: none; }
.hero .h-x, .hero .h-or, .hero .h-o, .hero .h-p { fill: none; stroke-width: 6; stroke-linecap: round; }
.hero .h-x { stroke: var(--x-cell); } .hero .h-o { stroke: var(--o-cell); } .hero .h-p { stroke: #7C5CFF; } .hero .h-or { stroke: #FF9F43; }
.hero .h-s { stroke-width: 2.2; }
.hero .h-mini { fill: var(--accent-btn); stroke: var(--ink); stroke-width: 2.5; }
.hero .h-ml { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.hero .h-inf { fill: none; stroke: #7C5CFF; stroke-width: 4; stroke-linejoin: round; }
.mode-cards { gap: 18px; }
.mode-card, .mode-card.mode-main {
  background: var(--pop-lila); color: var(--ink); border: 3.5px solid var(--line); border-radius: 22px;
  box-shadow: 6px 7px 0 var(--hard); gap: 0; overflow: visible;
}
#card-ai { background: var(--pop-teal); }
#card-player { background: var(--pop-pink); }
.mode-card:hover, .mode-main:hover:not(:disabled) { background: var(--pop-lila); }
#card-ai:hover:not(:disabled) { background: var(--pop-teal); }
#card-player:hover:not(:disabled) { background: var(--pop-pink); }
#card-cont { border-color: var(--line); }
#card-cont:hover { transform: none; box-shadow: 6px 7px 0 var(--hard); }
button.mode-card:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 8px 9px 0 var(--hard); }
button.mode-card:active:not(:disabled) { transform: translate(5px, 6px); box-shadow: 1px 1px 0 var(--hard); }
.mode-main, .mode-card.mode-main { min-height: 84px; padding: 14px 16px; gap: 14px; }
#card-cont .mode-main { box-shadow: none; border: 0; background: transparent; min-height: 92px; }
#card-cont .mode-main:hover:not(:disabled), #card-cont .mode-main:active:not(:disabled) { transform: none; box-shadow: none; background: transparent; }
.mode-ico {
  width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 0;
}
.mode-ico svg { display: block; width: 38px; height: 38px; }
.ico-b { stroke: var(--x-cell); }
.mode-txt b { font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: 0; }
.mode-txt small { color: var(--ink); opacity: 0.8; font-weight: 600; font-size: 0.78rem; }
.cont-saved { padding: 0 16px 16px; gap: 10px; }
.cont-info { color: var(--ink); font-weight: 800; font-size: 0.9rem; }
.cont-saved .row { gap: 10px; }
.cont-saved .btn-primary { flex: 1.6; min-height: 44px; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cont-saved .chip { flex: 1; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; }
.lobby-links { gap: 10px; margin-top: 4px; }
.lobby-links .chip { flex: 1 1 auto; }
#install-btn { margin-top: 2px; }
#setup, .panel {
  background: var(--modal-bg); color: var(--modal-text); border: 3.5px solid var(--line); border-radius: 22px;
  box-shadow: 6px 7px 0 var(--hard); padding: 18px 16px;
}
#setup .lobby-title { color: var(--accent-text); font-weight: 800; }
#setup .chip, #setup .icon-btn.inline { color: var(--ink); }
#setup .hint { color: var(--modal-text); opacity: 0.85; }
#setup .field label { color: var(--modal-text); opacity: 0.85; }
#online-wait p { color: var(--modal-text); opacity: 0.85; }

/* Marcador, estado y controles */
.sb-item { background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 16px; box-shadow: 2px 3px 0 var(--hard); }
.sb-item small { color: var(--ink); opacity: 0.75; }
.sb-x .sb-sym, .sb-x b { color: var(--x-cell); }
.sb-o .sb-sym, .sb-o b { color: var(--o-cell); }
.sb-item.turn { background: color-mix(in srgb, var(--accent-btn) 55%, var(--paper)); transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--hard); }
#sb-time { color: var(--accent-text); }
.sb-center small { color: var(--muted); font-weight: 700; }
#status { font-weight: 800; }
#notice { font-weight: 700; }
#bt-grade { font-weight: 800; }

/* Tablero */
#viewport {
  border: 4px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
}
#viewport.marking { box-shadow: 0 0 0 4px var(--accent-btn), 0 0 0 7px var(--line), var(--shadow); }
#viewport.previewing { box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 45%, transparent), var(--shadow); }
.cell { border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 rgba(43, 27, 61, 0.35); font-weight: 800; }
.cell.empty-clickable:active { transform: scale(0.95); }
.cell.ai-last { box-shadow: 0 0 0 4px var(--accent-btn), 0 0 0 6px var(--ink); }
.cell.win-line { background: color-mix(in srgb, var(--accent-btn) 70%, var(--cell)); }
.win-line-svg line { stroke: var(--ink); }
.cell.focused, .cell:focus-visible { outline: 4px solid var(--accent-btn); outline-offset: 2px; }
.mini { border: 2px solid var(--line); border-radius: 9px; box-shadow: 2px 3px 0 var(--hard); }
.mini span { border-radius: 3px; }
.mini-wrap { color: var(--text); }
.mini-label { color: var(--text); }
.mini-wrap.active { border-color: var(--accent-btn); color: var(--text); background: color-mix(in srgb, var(--accent-btn) 28%, transparent); }
.mini-wrap.viewing { border-color: var(--text); }
@keyframes targetPulse { 0%, 100% { box-shadow: 2px 3px 0 var(--hard); } 50% { box-shadow: 0 0 0 4px var(--accent-btn), 2px 3px 0 var(--hard); } }

/* Ventanas, avisos y paneles */
#summary-modal, #tutorial-modal, #stats-modal, #share-modal, #settings-modal, #backup-modal, #dialog-modal { background: rgba(20, 8, 40, 0.68); }
#summary-box, #tutorial-box, #stats-box, #share-box, #settings-box, #backup-box, #dialog-box {
  border: 3.5px solid var(--line); border-radius: 24px; box-shadow: 7px 8px 0 var(--hard);
}
#summary-box h2, #tutorial-box h2, #stats-box h2, #share-box h2, #settings-box h2, #backup-box h2, #dialog-box h2 { font-weight: 800; }
#summary-box .chip, #tutorial-box .chip, #dialog-box .chip, #settings-box .chip, #stats-box .chip, #share-box .chip, #backup-box .chip { color: var(--ink); }
.stat-tile { border: 2.5px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--modal-text) 7%, transparent); }
#coach, #offline-badge, #update-bar, #toast {
  border: 3px solid var(--line); border-radius: 18px; box-shadow: 3px 4px 0 var(--hard);
}
#preview-bar { border: 3px solid var(--line); box-shadow: 3px 4px 0 var(--hard); }
#hint-btn { color: var(--ink); border-color: var(--line); }
#hint-btn.chip { background: color-mix(in srgb, var(--accent-btn) 45%, var(--paper)); }
#chat { border: 2.5px solid var(--line); border-radius: 14px; }
.set-sec { color: var(--modal-text); opacity: 0.75; }
.set-row .chip { min-height: 44px; }
#settings-box .dialog-actions { border-top: 2.5px dashed color-mix(in srgb, var(--modal-text) 25%, transparent); }

/* Escritorio: más aire */
@media (min-width: 980px) {
  body.ingame #top h1 { font-size: 1.6rem; }
  body.ingame .cell { font-size: calc(var(--board-size) * 0.16); }
}
@media (hover: none) { button:hover:not(:disabled) { transform: none; box-shadow: 3px 4px 0 var(--hard); } button.chip:hover:not(:disabled) { box-shadow: 2px 3px 0 var(--hard); } .icon-btn:hover:not(:disabled) { box-shadow: 2px 3px 0 var(--hard); } button.mode-card:hover:not(:disabled) { transform: none; box-shadow: 6px 7px 0 var(--hard); } }

.mode-txt small { font-size: 0.74rem; line-height: 1.3; }
.mode-main, .mode-card.mode-main { min-height: 76px; padding: 12px 14px; }
#card-cont .mode-main { min-height: 80px; }
.mode-cards { gap: 16px; }
@media (max-width: 600px) {
  .lobby-links { flex-wrap: nowrap; gap: 8px; }
  .lobby-links .chip { flex: 1 1 0; min-width: 0; padding: 6px 6px; font-size: 0.72rem; }
}
body.ingame h1 span span { -webkit-text-stroke-width: 0.055em; text-shadow: 0.04em 0.06em 0 var(--hard); }
@media (min-width: 980px) {
  body.ingame #top h1 { font-size: 2rem; }
  body.ingame #hud .sb-item { padding: 10px 14px; }
}
.set-row input[type="range"], .set-row input[type="checkbox"] { border: 0; box-shadow: none; background: transparent; min-width: 0; }
.set-row input[type="range"] { flex: 1 1 70px; }
.set-row .chip { flex: none; }
@media (min-width: 700px) {
  #lobby { width: 540px; }
  .hero { width: 190px; }
  .mode-txt b { font-size: 1.4rem; }
  .mode-txt small { font-size: 0.86rem; }
  .mode-main, .mode-card.mode-main { min-height: 88px; }
  .mode-ico { width: 62px; height: 62px; } .mode-ico svg { width: 42px; height: 42px; }
  body:not(.ingame) h1 { font-size: 3.6rem; }
  .lobby-links .chip { font-size: 0.85rem; }
}

/* Ventanas abiertas desde Ajustes (reglas, compartir, estadísticas) por encima de Ajustes */
#tutorial-modal, #share-modal, #stats-modal { z-index: 105; }
#backup-modal { z-index: 106; }

/* Acerca de y Ko-fi */
.about { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 10px; text-align: center; }
.about .logo { width: min(240px, 70%); height: auto; display: block; }
html[data-theme="dark"] .about .logo { filter: invert(1); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .about .logo { filter: invert(1); } }
.about-name { font-weight: 700; font-size: 0.95rem; }
.about-ver { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.kofi { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 6px 0 10px; text-align: center; }
.kofi-text { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.kofi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px;
  background: var(--pop-pink); color: var(--ink); border: 3px solid var(--line); border-radius: 999px; box-shadow: 3px 4px 0 var(--hard);
  font-weight: 800; font-size: 0.95rem; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kofi-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--hard); }
.kofi-btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--hard); }
.kofi-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Marcador: cifras de cualquier tamaño sin desbordar (rejilla + unidades de contenedor) */
#hud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(78px, auto) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.sb-item { --nb-max: 1.5rem; --nb-pad: 3.4rem; flex: none; min-width: 0; container-type: inline-size; overflow: hidden; padding: 8px 6px; gap: 5px; flex-wrap: nowrap; }
.sb-item.long { --nb-pad: 2.6rem; }
.sb-item.xl { --nb-pad: 0.4rem; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sb-item.xl .sb-sym { font-size: 0.9rem; line-height: 1; }
.sb-item b {
  font-size: var(--nb-max);
  font-size: max(0.9rem, min(var(--nb-max), calc((100cqw - var(--nb-pad)) / (var(--d, 1) * 0.62))));
  min-width: 0; white-space: nowrap; letter-spacing: -0.01em; line-height: 1;
}
.sb-item small { white-space: nowrap; }
.sb-item.long small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sb-item { position: relative; }
.sb-center { min-width: 0; padding: 0 2px; }
#sb-time, #sb-stack { white-space: nowrap; }
@media (min-width: 980px) { body.ingame .sb-item { --nb-max: 1.9rem; } body.ingame #hud .sb-item b { font-size: var(--nb-max); font-size: max(0.9rem, min(var(--nb-max), calc((100cqw - var(--nb-pad)) / (var(--d, 1) * 0.62)))); } }

/* ---------- Páginas legales (política de privacidad) ---------- */
body.policy { display: block; padding: max(14px, env(safe-area-inset-top)) 14px 40px; }
.policy-wrap { max-width: 760px; margin: 0 auto; }
.policy-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.policy-nav .chip { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; }
.policy-langs { display: inline-flex; gap: 8px; }
.policy-lang { background: var(--modal-bg); color: var(--modal-text); border: 3.5px solid var(--line); border-radius: 22px; box-shadow: 6px 7px 0 var(--hard); padding: 22px 20px 12px; line-height: 1.55; }
.policy-lang[hidden] { display: none; }
.policy-lang h1 { font-size: clamp(1.25rem, 5vw, 1.7rem); white-space: normal; text-align: left; color: var(--accent-text); text-transform: none; margin: 0 0 4px; line-height: 1.2; }
.policy-date { color: var(--modal-text); opacity: 0.75; font-size: 0.85rem; margin: 0 0 14px; font-weight: 600; }
.policy-sec h2 { font-size: 1.1rem; color: var(--accent-text); margin: 20px 0 6px; }
.policy-sec p, .policy-sec li { font-size: 0.95rem; }
.policy-sec ul { padding-left: 1.2rem; margin: 6px 0 10px; }
.policy-sec li { margin: 3px 0; }
.policy-sec a { color: var(--accent-text); font-weight: 700; overflow-wrap: anywhere; }
mark.todo { background: #FFC933; color: #2B1B3D; padding: 0 6px; border-radius: 6px; font-weight: 800; }

a.chip { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 999px; box-shadow: 2px 3px 0 var(--hard); min-height: 44px; padding: 6px 14px; font-weight: 700; font-size: 0.8rem; flex: none; }
a.chip:hover { box-shadow: 3px 4px 0 var(--hard); transform: translate(-1px, -1px); }
a.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- v0.12.5: inicio limpio, título igual en partida, panel alineado con el tablero ---------- */
:root { --bt-off: 52px; }                                   /* alto del rótulo "GRADO N" + hueco: el panel arranca a la altura del tablero */
body:not(.ingame) #hud { display: none !important; }        /* el marcador y el reloj solo existen en partida */
.hero { display: none; }
/* Infinite Mode: misma animación al pasar el ratón que las otras tarjetas */
#card-cont { transition: transform 0.12s ease, box-shadow 0.12s ease; }
#card-cont:hover { transform: translate(-2px, -2px); box-shadow: 8px 9px 0 var(--hard); }
#card-cont:has(.mode-main:active) { transform: translate(5px, 6px); box-shadow: 1px 1px 0 var(--hard); }
@media (hover: none) { #card-cont:hover { transform: none; box-shadow: 6px 7px 0 var(--hard); } }
@media (prefers-reduced-motion: reduce) { #card-cont, button.mode-card { transition: none; } }
/* Título de dos líneas también en partida (más pequeño) */
body.ingame #top h1 { white-space: normal; line-height: 1.02; font-size: clamp(1.25rem, 6vw, 1.7rem); text-align: center; }
body.ingame h1 .t1, body.ingame h1 .t2 { display: block; }
body.ingame h1 .t2 { font-size: 0.93em; }
@media (min-width: 760px) { body.ingame #top h1 { font-size: 2rem; } body.ingame #overview { margin-top: var(--bt-off); } }
@media (min-width: 980px) { body.ingame #top h1 { font-size: 2.3rem; } }
@media (max-width: 340px) { body.ingame h1 { white-space: normal; } }