@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/fredoka-latin.woff2') format('woff2');
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
html {
  font-size: var(--font-root);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-scene);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  overflow-x: hidden;
  /* Room for the phone keyboard while typing a name (set in onboarding.js). */
  padding-bottom: var(--keyboard, 0px);
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 1.25rem 1.875rem, var(--blanco), transparent),
    radial-gradient(1.5px 1.5px at 7.5rem 5rem, var(--blanco-a85), transparent),
    radial-gradient(1px 1px at 12.5rem 9.375rem, var(--blanco), transparent),
    radial-gradient(1.5px 1.5px at 3.75rem 11.875rem, var(--blanco-a70), transparent),
    radial-gradient(1px 1px at 16.25rem 2.5rem, var(--blanco), transparent);
  background-size: 18.75rem 13.75rem;
  opacity: 0.55;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle {
  to {
    opacity: 0.2;
  }
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  touch-action: manipulation;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.app {
  position: relative;
  z-index: 1;
  width: min(100%, 51.25rem);
  margin: auto;
  padding: var(--space-2);
}
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--blanco-a10), var(--blanco-a04));
  box-shadow:
    0 1.875rem 5rem var(--noche-950-a55),
    inset 0 1px 0 var(--blanco-a18);
  padding: var(--space-2-5);
}
.hidden {
  display: none !important;
}

/* CREDITS (setup screens only) */
.credits-version {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.credits {
  position: fixed;
  right: 0;
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 0 var(--space-3);
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--blanco-a55);
  pointer-events: none;
}
body:has(#setupScreen:not(.hidden)) .app {
  padding-bottom: var(--space-8);
}
body:has(#gameScreen:not(.hidden)) .credits {
  display: none;
}
.cookie-settings {
  min-height: 1.5rem;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
}

.credits-heart {
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

/* Height of the ← → step buttons, shared with the online notice. */
html {
  --nav-btn-h: 2.875rem;
}

/* COOKIE CONSENT (setup screens only; both choices equally prominent) */
.consent {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: var(--z-overlay);
  display: grid;
  gap: var(--space-2-5);
  max-width: 32.5rem;
  margin: 0 auto;
  padding: var(--space-3-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--noche-900-a97);
  box-shadow: var(--shadow-lg);
}
.consent-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5);
}
.consent-btn {
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.consent-btn:hover {
  background: var(--blanco-a20);
}
body:has(#gameScreen:not(.hidden)) .consent {
  display: none;
}

/* SETUP */
.setup {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3-5) var(--space-2-5) var(--space-3);
}
.brand-bear {
  text-align: center;
  font-size: var(--fs-display);
  line-height: 1;
  filter: drop-shadow(0 0.5rem 0.875rem var(--negro-a35));
  animation: bearBob 2.4s ease-in-out infinite;
}
@keyframes bearBob {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-0.5rem) rotate(5deg);
  }
}
.brand {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}
.brand span {
  width: 5rem;
  height: 5.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
  text-shadow: 0 3px 0 var(--negro-a18);
  box-shadow:
    0 0.4375rem 0 var(--negro-a30),
    inset 0 2px 0 var(--blanco-a40);
  animation: tileIn 0.6s var(--ease-bounce) both;
}
.brand span:nth-child(1) {
  background: linear-gradient(180deg, var(--cielo-400), var(--p1b));
  rotate: -7deg;
  animation-delay: 0.05s;
}
.brand span:nth-child(2) {
  background: var(--btn-primary-bg);
  color: var(--naranja-900);
  text-shadow: none;
  animation-delay: 0.15s;
}
.brand span:nth-child(3) {
  background: linear-gradient(180deg, var(--rosa-300), var(--p2b));
  rotate: 7deg;
  animation-delay: 0.25s;
}
@keyframes tileIn {
  from {
    transform: scale(0.2) translateY(-1.875rem);
    opacity: 0;
  }
}
.tagline {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mode-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1-5);
  width: 100%;
  max-width: 27.5rem;
  margin: 0 auto;
  padding: 0.3125rem;
  border-radius: var(--r-md);
  background: var(--negro-a25);
  border: 1px solid var(--line);
}
.mode-btn {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-0-5);
  min-height: 4.25rem;
  padding: var(--space-2) var(--space-1);
  line-height: 1.15;
  white-space: nowrap;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  transition:
    background var(--dur-quick),
    color 0.2s;
}
.mode-emoji {
  font-size: var(--fs-2xl);
  line-height: 1;
}
.mode-btn.soon {
  opacity: 0.6;
}
.info-dialog {
  width: min(calc(100% - 2.25rem), 23.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.625rem 1.375rem 1.375rem;
  background: linear-gradient(180deg, var(--noche-800), var(--noche-900));
  color: var(--color-text);
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.info-dialog[open] {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  animation: dialogIn 0.35s var(--ease-pop);
}
.info-dialog::backdrop {
  background: var(--noche-950-a72);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
}
.info-dialog .step-title,
.info-dialog .step-lead {
  margin: 0;
}
.info-emoji {
  font-size: var(--fs-display-sm);
  line-height: 1;
}
.info-dialog .primary {
  min-width: 10rem;
  margin-top: var(--space-1-5);
}
.mode-btn.selected {
  background: linear-gradient(180deg, var(--blanco), var(--noche-100));
  color: var(--color-on-light);
  box-shadow: 0 0.25rem 0.875rem var(--negro-a30);
}
.difficulty-wrap {
  gap: var(--space-2);
  width: 100%;
  max-width: 27.5rem;
  margin: 0 auto;
}
.difficulty-title,
.small-label {
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.difficulty-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.difficulty-btn {
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--glass);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.difficulty-btn.selected {
  background: var(--sol-400-a18);
  border: 2px solid var(--accent);
  box-shadow: var(--glow-accent);
}
.view-choice {
  display: grid;
  gap: var(--space-2-5);
  width: 100%;
  max-width: 27.5rem;
  margin: 0 auto;
}
.view-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--color-text);
  text-align: left;
  transition:
    background var(--dur-quick),
    border-color 0.2s;
}
.view-btn[aria-pressed='true'] {
  background: var(--sol-400-a18);
  border: 2px solid var(--accent);
  box-shadow: var(--glow-accent);
}
.view-icon {
  display: grid;
  flex: 0 0 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--blanco-a12);
  font-size: var(--fs-2xl);
}
.view-text {
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--muted);
}
.view-text strong {
  font-size: var(--fs-lg);
  color: var(--color-text);
}
.help-toggle {
  min-height: 2.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 0 var(--space-4-5);
  transition: background var(--dur-quick);
}
.players-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5);
}
.pconfig {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  background: var(--glass);
}
.pconfig:first-child {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--p1) 24%, transparent),
    color-mix(in srgb, var(--p1) 4%, transparent)
  );
  border-color: color-mix(in srgb, var(--p1) 50%, transparent);
}
.pconfig:nth-child(2) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--p2) 24%, transparent),
    color-mix(in srgb, var(--p2) 4%, transparent)
  );
  border-color: color-mix(in srgb, var(--p2) 50%, transparent);
}
.pconfig:first-child .small-label {
  color: var(--cielo-200-2);
}
.pconfig:nth-child(2) .small-label {
  color: var(--rosa-200);
}
.preview {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0.5rem auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: var(--fs-display-sm);
  background: radial-gradient(circle at 35% 30%, var(--blanco), var(--noche-100));
  transition: transform var(--dur-quick);
}
.pconfig:first-child .preview {
  box-shadow:
    0 0 0 0.25rem var(--p1),
    0 0.5rem 1.375rem var(--p1glow);
}
.pconfig:nth-child(2) .preview {
  box-shadow:
    0 0 0 0.25rem var(--p2),
    0 0.5rem 1.375rem var(--p2glow);
}
.nickname {
  width: 100%;
  min-height: 2.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--negro-a28);
  color: var(--color-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  text-align: center;
  padding: var(--space-2);
}
.nickname:disabled {
  opacity: 0.6;
}
.nickname::placeholder {
  color: var(--blanco-a50);
}
.avatars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.3125rem;
  margin-top: var(--space-2-5);
}
.avatar-btn {
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--blanco-a09);
  font-size: var(--fs-2xl);
  padding: 0;
  transition:
    transform var(--dur-fast),
    background 0.15s;
}
.avatar-btn.selected {
  background: var(--blanco-a92);
  border-color: var(--blanco);
  transform: scale(1.08);
  box-shadow: 0 0.25rem 0.75rem var(--negro-a35);
}
.setup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.select-wrap {
  position: relative;
  display: inline-block;
}
.select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.setup-actions > div {
  display: flex;
  align-items: center;
  gap: var(--space-4-5);
}
.setup-actions .small-label {
  margin: 0;
}
select {
  min-height: 3.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--negro-a30);
  color: var(--color-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  padding: 0 3rem 0 1.125rem;
  appearance: none;
}
select option {
  color: var(--gris-900);
  background: var(--blanco);
}
.primary {
  min-height: 3.375rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--btn-primary-bg);
  color: var(--naranja-900-2);
  padding: 0 2.125rem;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  box-shadow:
    0 0.375rem 0 var(--naranja-700-2),
    0 0.75rem 1.75rem var(--naranja-500-a45);
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}
.primary:active {
  transform: translateY(0.3125rem);
  box-shadow:
    0 1px 0 var(--naranja-700-2),
    0 0.375rem 0.875rem var(--naranja-500-a35);
}
#startGame {
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  50% {
    box-shadow:
      0 0.375rem 0 var(--naranja-700-2),
      0 0.75rem 2.625rem var(--sol-400-a80);
  }
}

/* GAME */
.game {
  display: grid;
  gap: var(--space-2);
  align-items: center;
}
.player-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0.5625rem;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.player-panel.p1 {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--p1) 24%, transparent),
    color-mix(in srgb, var(--p1) 4%, transparent)
  );
}
.player-panel.p2 {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--p2) 24%, transparent),
    color-mix(in srgb, var(--p2) 4%, transparent)
  );
}
.player-panel.p1.active {
  border-color: var(--p1);
  box-shadow: 0 0 1.75rem var(--p1glow);
  animation: glow1 1.6s ease-in-out infinite;
}
.player-panel.p2.active {
  border-color: var(--p2);
  box-shadow: 0 0 1.75rem var(--p2glow);
  animation: glow2 1.6s ease-in-out infinite;
}
@keyframes glow1 {
  50% {
    box-shadow: 0 0 0.5rem var(--p1glow);
  }
}
@keyframes glow2 {
  50% {
    box-shadow: 0 0 0.5rem var(--p2glow);
  }
}
.player-panel.top {
  transform: rotate(180deg);
}
.game.solo .player-panel.top,
.game.solo .turnbar-top,
.game.same-view .player-panel.top,
.game.same-view .turnbar-top {
  transform: none;
}
.identity {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  min-width: 0;
}
.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-4xl);
  flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, var(--blanco), var(--noche-100));
}
.p1 .avatar {
  box-shadow:
    0 0 0 3px var(--p1),
    0 0.25rem 0.75rem var(--negro-a35);
}
.p2 .avatar {
  box-shadow:
    0 0 0 3px var(--p2),
    0 0.25rem 0.75rem var(--negro-a35);
}
.player-panel.active .avatar {
  animation: avatarHop 1s ease-in-out infinite;
}
@keyframes avatarHop {
  50% {
    transform: translateY(-3px) scale(1.07);
  }
}
.player-info {
  min-width: 0;
}
.name {
  font-size: var(--fs-lg);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-top: var(--space-1);
}
.timer {
  font-size: var(--fs-xl);
  line-height: 1;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  padding: 3px 0.5rem;
  border-radius: var(--r-xs);
  background: var(--negro-a28);
}
.score-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.score-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.score {
  display: inline-block;
  font-size: var(--fs-3xl);
  line-height: 1;
  font-weight: var(--fw-bold);
  text-shadow: 0 0 0.875rem currentColor;
}
.score.bump {
  animation: bump 0.5s var(--ease-spring);
}
@keyframes bump {
  40% {
    transform: scale(1.6);
  }
}
.p1 .timer,
.p1 .score {
  color: color-mix(in srgb, var(--p1) 55%, var(--blanco));
}
.p2 .timer,
.p2 .score {
  color: color-mix(in srgb, var(--p2) 55%, var(--blanco));
}
.timer.low {
  color: var(--rojo-400) !important;
  background: var(--rojo-400-a20);
}

.controls-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: center;
}
.letter-choice {
  display: flex;
  gap: var(--space-1-5);
  padding: 0.3125rem;
  border-radius: var(--r-md);
  background: var(--negro-a28);
  border: 1px solid var(--line);
}
.letter {
  position: relative;
  flex: 1;
  min-height: 3.25rem;
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition:
    transform 0.1s,
    box-shadow 0.1s,
    background var(--dur-fast),
    color 0.15s;
}
/* Unselected letter: flat and muted, so it reads as "not the tile you will place" */
.p1 .letter {
  background: color-mix(in srgb, var(--p1) 22%, transparent);
  color: color-mix(in srgb, var(--p1) 45%, var(--blanco));
}
.p2 .letter {
  background: color-mix(in srgb, var(--p2) 22%, transparent);
  color: color-mix(in srgb, var(--p2) 45%, var(--blanco));
}
/* Selected letter: the same tile as on the board, ready to pick up */
/* The relief sits inside the tile, so the selection ring wraps the whole tile with a small gap. */
.letter.selected {
  padding-bottom: var(--space-1);
  background: var(--tile);
  color: var(--tile-ink);
  cursor: grab;
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow:
    inset 0 -0.25rem 0 var(--tile-edge),
    0 0 1rem var(--ring-glow);
}
.letter.selected:focus-visible {
  outline: 3px solid var(--accent);
}
.p1 .letter.selected {
  --ring: var(--p1);
  --ring-glow: var(--p1glow);
}
.p2 .letter.selected {
  --ring: var(--p2);
  --ring-glow: var(--p2glow);
}
.letter.selected:active {
  padding-bottom: 1px;
  box-shadow: inset 0 -1px 0 var(--tile-edge);
}
.letter.dragging {
  opacity: 0.45;
}
.letter:disabled {
  opacity: 0.35;
  cursor: default;
}

.tools {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}
.power,
.sos-power {
  width: 3rem;
  height: 3rem;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blanco-a38), var(--blanco-a08));
  font-size: var(--fs-xl);
  padding: 0;
  box-shadow:
    0 0.25rem 0.625rem var(--negro-a28),
    inset 0 1px 0 var(--blanco-a30);
  transition: transform var(--dur-fast);
}
.power .count,
.sos-power .count {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--naranja-900-2);
  display: grid;
  place-items: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  box-shadow: 0 2px 0.25rem var(--negro-a30);
}
.power:disabled,
.power.used,
.sos-power:disabled,
.sos-power.used {
  opacity: 0.28;
  filter: grayscale(1);
  cursor: default;
  box-shadow: none;
}
/* Spent extras stay pressable on one's turn: holding them opens the secret shop. */
.power:disabled,
.sos-power:disabled {
  pointer-events: none;
}
/* Long press on a secret (hold.js): from the first second a ring fills up until it fires. */
@property --hold-fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.theme-toggle,
.power,
.sos-power {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.power.used.holding,
.sos-power.used.holding {
  opacity: 1;
  filter: none;
}
.holding::before {
  content: '';
  position: absolute;
  inset: -0.3125rem;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--hold-fill), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.25rem), black calc(100% - 0.25rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.25rem), black calc(100% - 0.25rem));
  animation: holdFill var(--hold-ms, 2s) linear forwards;
  pointer-events: none;
}
@keyframes holdFill {
  to {
    --hold-fill: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .holding::before {
    animation: none;
    --hold-fill: 100%;
  }
}
.power.mode {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  background: var(--sol-400-a40);
  animation: modeGlow 1s ease-in-out infinite;
}
@keyframes modeGlow {
  50% {
    box-shadow: 0 0 1.375rem var(--accent);
  }
}

/* BOARD */
.center-area {
  display: grid;
  gap: var(--space-1-5);
  align-items: center;
  justify-items: center;
}
.turnbar {
  min-height: 1.625rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.turnbar-top {
  transform: rotate(180deg);
}
.board-shell {
  width: 100%;
  max-width: max(18.75rem, calc(100dvh - 26.875rem));
  border-radius: var(--r-xl);
  padding: var(--space-2);
  background: var(--board-shell-bg);
  border: 1px solid var(--blanco-a18);
  box-shadow:
    inset 0 2px 0.75rem var(--negro-a55),
    0 1.125rem 2.5rem var(--negro-a40);
}
.board {
  display: grid;
  gap: var(--space-1-5);
  width: 100%;
  container-type: inline-size;
  --n: 5;
}
.cell {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--color-cell-1), var(--color-cell-2));
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: var(--tile-ink);
  font-size: calc(56cqw / var(--n));
  font-weight: var(--fw-bold);
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--blanco-a08);
  transition:
    transform 0.12s,
    background var(--dur-fast);
}
.cell span {
  position: relative;
  z-index: 2;
}
.cell.filled {
  background: var(--tile);
  box-shadow:
    0 0.25rem 0 var(--tile-edge),
    inset 0 2px 0 var(--blanco-a80);
}
.cell.p1 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--p1) 65%, var(--blanco)), var(--p1));
  color: var(--color-text);
  box-shadow:
    0 0.25rem 0 color-mix(in srgb, var(--p1b) 70%, var(--negro)),
    0 0 1rem var(--p1glow),
    0 0 1.25rem 0.25rem var(--color-score-glow);
}
.cell.p2 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--p2) 65%, var(--blanco)), var(--p2));
  color: var(--color-text);
  box-shadow:
    0 0.25rem 0 color-mix(in srgb, var(--p2b) 70%, var(--negro)),
    0 0 1rem var(--p2glow),
    0 0 1.25rem 0.25rem var(--color-score-glow);
}
.cell.both {
  background: linear-gradient(135deg, var(--p1) 0 48%, var(--p2) 52% 100%);
  color: var(--color-text);
  box-shadow:
    0 0.25rem 0 var(--noche-700),
    0 0 1rem var(--noche-300-a50),
    0 0 1.25rem 0.25rem var(--color-score-glow);
}
.cell.p1 span,
.cell.p2 span,
.cell.both span {
  text-shadow: 0 2px 0 var(--negro-a22);
}
.cell.hint {
  outline: 0.25rem solid var(--accent);
  outline-offset: -0.25rem;
  animation: modeGlow 1s ease-in-out infinite;
}
.cell.last {
  outline: 0.25rem solid var(--blanco);
  outline-offset: -0.25rem;
  box-shadow: 0 0 1.375rem var(--blanco-a80);
}
.cell.swap-target {
  outline: 3px dashed var(--color-tile-ring);
  outline-offset: -0.3125rem;
}
.cell.placed span {
  animation: pop 0.45s var(--ease-spring);
}
@keyframes pop {
  from {
    transform: scale(0) rotate(-25deg);
  }
}
.cell.scored-now {
  animation: scoreBurst 0.6s ease-out;
}
@keyframes scoreBurst {
  40% {
    transform: scale(1.14);
  }
}
.message {
  min-height: 1.75rem;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  padding: var(--space-0-5) var(--space-2-5);
}
@media (hover: hover) {
  .cell:not(.filled):hover {
    background: var(--blanco-a18);
    transform: scale(1.04);
  }
  .avatar-btn:hover {
    transform: translateY(-2px) scale(1.1);
    background: var(--blanco-a18);
  }
  .power:not(.used):hover,
  .sos-power:not(.used):hover {
    transform: translateY(-2px) scale(1.07);
  }
  .help-toggle:hover,
  .difficulty-btn:hover,
  .secondary:hover,
  .sidebar button:hover {
    background: var(--glass2);
  }
  .primary:hover {
    transform: translateY(-1px);
  }
}

/* GAME MENU: one button per player panel; the menu turns to face whoever opened it */
.panel-menu {
  justify-self: end;
  align-self: start;
}
.menu-btn {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--blanco-a12);
  color: var(--color-text);
  font-size: var(--fs-lg);
  line-height: 1;
}
.menu-btn::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
}
.game.solo #menu2 {
  display: none;
}
.menu-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  border-radius: inherit;
  background: var(--noche-950-a50);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-quick),
    visibility 0s 0.2s;
}
.menu-scrim.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.sidebar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-drawer);
  width: 13.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--noche-900-a96);
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
  padding: var(--space-3-5);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) rotate(var(--menu-rot, 0deg)) scale(0.9);
  transition:
    transform 0.25s var(--ease-soft),
    opacity var(--dur-quick),
    visibility 0s 0.2s;
  box-shadow: var(--shadow-lg);
}
.sidebar.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  transform: translate(-50%, -50%) rotate(var(--menu-rot, 0deg));
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-0-5);
}
.sidebar .menu-close {
  flex: none;
  width: 2.25rem;
  min-height: 2.25rem;
  height: 2.25rem;
  margin: 0;
  position: relative;
  border-radius: 50%;
  font-size: var(--fs-base);
}
.sidebar .menu-close::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
}
.sidebar h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.sidebar button,
.sidebar-link {
  width: 100%;
  min-height: 2.75rem;
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--blanco-a08);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

/* WINNER */
.winner-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--noche-600-a94), var(--noche-950-a97));
  text-align: center;
  padding: var(--space-5);
  overflow-y: auto;
  animation: fadeIn 0.35s ease;
}
.winner-home {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 1;
  height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--blanco-a12);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.winner-avatar {
  font-size: var(--fs-hero-xl);
  line-height: 1.1;
  filter: drop-shadow(0 0.625rem 1.375rem var(--negro-a45));
  animation: winnerBounce 0.9s var(--ease-bounce) infinite alternate;
}
@keyframes winnerBounce {
  from {
    transform: translateY(0) rotate(-6deg);
  }
  to {
    transform: translateY(-0.875rem) rotate(6deg) scale(1.06);
  }
}
.winner-title {
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  background: linear-gradient(90deg, var(--sol-400), var(--naranja-500), var(--rosa-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.winner-sub {
  font-size: var(--fs-lg);
  color: var(--muted);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-1-5);
}
.challenge-result {
  margin: var(--space-2) 0 0;
  color: var(--accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.winner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5);
  max-width: 26.25rem;
  margin: 1.25rem auto 0;
}
.winner-actions .rematch {
  grid-column: 1 / -1;
}
.winner-actions .secondary {
  padding: 0 var(--space-3);
}
.winner-actions .share-result,
.winner-actions .replay-open {
  margin-top: var(--space-4);
}
.winner-actions.stack-labels .share-result,
.winner-actions.stack-labels .replay-open {
  padding-block: var(--space-2);
}
.btn-emoji {
  display: block;
}
.winner-actions .replay-open.hidden + .share-result,
/* Online there is no «Otro tablero»: «Salir» takes the whole row, like the other buttons. */
.winner-actions #otherBoard.hidden + #changePlayers {
  grid-column: 1 / -1;
}
.btn-sub {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  opacity: 0.75;
}
.session-board {
  max-width: 26.25rem;
  margin: 1rem auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--blanco-a07);
  padding: var(--space-2-5) var(--space-3-5);
}
.session-board h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--muted);
}
.session-board table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.session-board th,
.session-board td {
  padding: var(--space-1);
  text-align: right;
  font-weight: var(--fw-bold);
}
.session-board thead th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}
.session-board .session-player {
  text-align: left;
  overflow: hidden;
  max-width: 12.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-board tr.leader > * {
  color: var(--accent);
}
/* «Esta partida» never grows wider than the end card: long names get the ellipsis instead. */
.end-stats table {
  table-layout: fixed;
}
.end-stats .session-player {
  width: 40%;
  max-width: none;
}
.end-stats th:not(.session-player),
.end-stats td {
  text-align: center;
}
/* The crown gets its own column so every avatar and name lines up under «Jugador». */
.session-board .session-crown {
  width: 1.5em;
  padding-right: 0;
  text-align: center;
}
.session-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}
.secondary {
  min-height: 3.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--blanco-a10);
  color: var(--color-text);
  padding: 0 var(--space-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confetti i {
  position: absolute;
  top: -1.125rem;
  width: 0.625rem;
  height: 1rem;
  border-radius: var(--r-3xs);
  animation: fall 2.7s linear forwards;
}
@keyframes fall {
  to {
    transform: translateY(110vh) rotate(760deg);
  }
}
.low {
  animation: pulse 0.7s infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.spotlight {
  animation: spotlight 1s ease-in-out 3;
}
@keyframes spotlight {
  50% {
    box-shadow:
      0 0 0 0.25rem var(--accent),
      0 0 1.5rem var(--accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight {
    animation: none;
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.96);
  }
}

/* MACHINE */
.machine-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--r-pill);
  background: var(--blanco-a16);
  color: var(--color-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.player-panel.machine .controls-row {
  opacity: 0.5;
}
.player-panel.machine .letter,
.player-panel.machine .power,
.player-panel.machine .sos-power {
  pointer-events: none;
}
.thinking .avatar {
  animation: machineThink 0.45s ease-in-out infinite alternate !important;
}
@keyframes machineThink {
  from {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(10deg);
  }
}

/* TENSION: little time left on turn (GAME.clock.lowSeconds). --tension grows 0 → 1. */
.tension {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, var(--rojo-400) 130%);
  opacity: calc(var(--tension, 0) * 0.7);
  transition: opacity 1s linear;
}
.tension.on {
  animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
  15% {
    opacity: calc(var(--tension, 0) * 0.95);
  }
  30% {
    opacity: calc(var(--tension, 0) * 0.7);
  }
  45% {
    opacity: calc(var(--tension, 0) * 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tension.on {
    animation: none;
  }
}

/* SOS SEA THEME */
html::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
html::before {
  inset: 0;
  background:
    radial-gradient(62.5rem 40.625rem at 12% -10%, var(--cielo-700-2) 0, transparent 60%),
    radial-gradient(56.25rem 37.5rem at 105% 110%, var(--mar-800) 0, transparent 55%),
    linear-gradient(170deg, var(--cielo-900-2), var(--cielo-900-3) 55%, var(--cielo-800-3));
}
body::after {
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 Q150 45 300 70 T600 70 T900 70 T1200 70 V120 H0Z' fill='%23b3ecff' fill-opacity='0.07'/%3E%3C/svg%3E")
      0 100% / 56.25rem 17vh repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q150 20 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%2381d4fa' fill-opacity='0.09'/%3E%3C/svg%3E")
      0 100% / 75rem 24vh repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q30 15 60 30 T120 30 T180 30 T240 30' fill='none' stroke='%23b3ecff' stroke-opacity='0.10' stroke-width='2'/%3E%3C/svg%3E")
      0 0 / 15rem 3.75rem repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q30 15 60 30 T120 30 T180 30 T240 30' fill='none' stroke='%2381d4fa' stroke-opacity='0.08' stroke-width='3'/%3E%3C/svg%3E")
      7.5rem 2.8125rem / 22.5rem 5.625rem repeat;
  animation: waves 36s linear infinite;
}
body.sea-theme::after {
  opacity: 1;
}
html:has(body.sea-theme)::before {
  opacity: 1;
}
body.sea-theme::before {
  opacity: 0.3;
  animation: bubbles 40s linear infinite;
}
@keyframes waves {
  to {
    background-position:
      -56.25rem 100%,
      75rem 100%,
      -30rem 0,
      30rem 2.8125rem;
  }
}
@keyframes bubbles {
  to {
    background-position: 0 -13.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* SOS MODE */
.panel.sos-mode {
  --p1: var(--mar-500);
  --p1b: var(--mar-700);
  --p1glow: var(--mar-500-a55);
  --p2: var(--naranja-400);
  --p2b: var(--naranja-500-2);
  --p2glow: var(--naranja-400-a55);
  --accent: var(--menta-300);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q30 15 60 30 T120 30 T180 30 T240 30' fill='none' stroke='%23b3ecff' stroke-opacity='0.07' stroke-width='2'/%3E%3C/svg%3E")
      0 0 / 15rem 3.75rem repeat,
    linear-gradient(180deg, var(--cielo-700-a32), var(--azul-900-a30));
  animation: panel-waves 36s linear infinite;
}
@keyframes panel-waves {
  to {
    background-position:
      -30rem 0,
      0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel.sos-mode {
    animation: none;
  }
}
.panel.sos-mode .board-shell {
  background: linear-gradient(180deg, var(--cielo-800-4), var(--cielo-900-4));
}
/* SOS INTRO: full screen «S🛟S» for GAME.sos.flashMs, no button, the game stops */
.mode-flash {
  position: fixed;
  inset: 0;
  z-index: var(--z-flash);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle, var(--cielo-700-a96), var(--cielo-950-a98));
  text-align: center;
  padding: var(--space-5);
  animation: fadeIn var(--dur-quick);
}
.mode-flash::before,
.mode-flash::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--fs-sos-hero);
  aspect-ratio: 1;
  border: 0.375rem solid var(--menta-300-a60);
  border-radius: 50%;
  translate: -50% -50%;
  opacity: 0;
  animation: sosWave 1.4s 0.45s ease-out infinite;
}
.mode-flash::after {
  animation-delay: 1.15s;
}
.mode-flash-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  animation: sosShake 0.4s 0.45s;
}
.sos-hero {
  display: flex;
  align-items: center;
  font-size: var(--fs-sos-hero);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--menta-300);
  text-shadow: 0 0 2.5rem var(--menta-300-a60);
}
.sos-hero-letter {
  animation: sosSlamLeft 0.45s var(--ease-bounce) both;
}
.sos-hero-letter:last-child {
  animation-name: sosSlamRight;
}
.sos-hero-ring {
  font-size: var(--fs-sos-ring);
  margin-inline: 0.05em;
  animation:
    sosSpin 0.7s 0.15s var(--ease-pop) both,
    bob 0.7s 0.85s ease-in-out infinite alternate;
}
.mode-flash-title {
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  color: var(--menta-300);
  text-shadow: 0 0 1.5rem var(--menta-300-a60);
  animation: fadeIn var(--dur-base) 0.6s both;
}
.mode-flash-sub {
  max-width: 28ch;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--mar-200);
  animation: fadeIn var(--dur-base) 0.8s both;
}
@keyframes sosSlamLeft {
  from {
    transform: translateX(-60vw) rotate(-25deg) scale(1.6);
  }
}
@keyframes sosSlamRight {
  from {
    transform: translateX(60vw) rotate(25deg) scale(1.6);
  }
}
@keyframes sosSpin {
  from {
    transform: scale(0) rotate(-540deg);
  }
}
@keyframes sosShake {
  20%,
  60% {
    transform: translateX(-0.625rem);
  }
  40%,
  80% {
    transform: translateX(0.625rem);
  }
}
@keyframes sosWave {
  from {
    opacity: 1;
    scale: 0.6;
  }
  to {
    opacity: 0;
    scale: 3;
  }
}
@keyframes bob {
  from {
    transform: translateY(-0.375rem) rotate(-6deg);
  }
  to {
    transform: translateY(0.375rem) rotate(6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mode-flash,
  .mode-flash *,
  .mode-flash::before,
  .mode-flash::after {
    animation: none;
  }
}
/* Online, each player sees their own panel at the bottom (left on wide screens) */
.game.online.guest #side1 {
  order: -1;
}
.game.online.guest #side2 {
  order: 1;
}
.replay-mark {
  animation: replayPulse 0.32s ease;
}
@keyframes replayPulse {
  0% {
    transform: scale(0.78);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* HELP */
.help-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4-5);
  background: var(--noche-950-a72);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
}
/* The modal lives inside .app's stacking context, so hide the fixed chrome above it. */
body:has(#helpModal:not(.hidden))
  :is(.theme-toggle, .sound-toggle, .share-toggle, .online-toggle, .theme-menu, .credits, .consent) {
  display: none;
}
.help-dialog {
  width: min(100%, 42.5rem);
  max-height: 92vh;
  overflow: auto;
  background: linear-gradient(180deg, var(--noche-800), var(--noche-900));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.375rem;
  box-shadow: var(--shadow-xl);
  animation: dialogIn 0.35s var(--ease-pop);
}
.help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3-5);
  margin-bottom: var(--space-3-5);
}
.help-title {
  margin: 0;
  font-size: var(--fs-4xl);
  line-height: 1.05;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.help-sub {
  margin: var(--space-1-5) 0 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.4;
}
.help-close {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--blanco-a08);
  color: var(--color-text);
  font-size: var(--fs-lg);
}
.help-section {
  margin-top: var(--space-4-5);
}
.help-section h3 {
  margin: 0 0 var(--space-2-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: 0.04em;
}
.help-section p {
  margin: 0;
  color: var(--noche-100-2);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.help-steps {
  display: grid;
  gap: var(--space-2);
}
.help-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2-5);
  align-items: center;
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--blanco-a06);
  color: var(--noche-100-2);
  font-size: var(--fs-base);
  line-height: 1.4;
}
.help-step .num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--naranja-900-2);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.help-step b {
  color: var(--color-text);
}
.extras-list {
  display: grid;
  gap: var(--space-2);
}
.extra-line {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: 0.6875rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--blanco-a06);
}
.extra-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanco-a14);
  font-size: var(--fs-xl);
}
.extra-copy {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--noche-200);
}
.extra-copy strong {
  display: block;
  color: var(--color-text);
  font-size: var(--fs-base);
  margin-bottom: var(--space-0-5);
}
.help-foot {
  margin-top: var(--space-4-5);
  padding-top: var(--space-3-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* MOBILE */
@media (max-width: 600px) {
  .app {
    padding: var(--space-1);
  }
  .panel {
    padding: var(--space-1-5);
    border-radius: var(--r-lg);
  }
  .setup {
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-1) var(--space-2);
  }
  .brand {
    gap: 0.5625rem;
  }
  .brand span {
    width: 3.875rem;
    height: 4.25rem;
    font-size: var(--fs-display-sm);
    border-radius: var(--r-md);
  }
  .brand-bear {
    font-size: var(--fs-display-sm);
  }
  .players-setup {
    gap: var(--space-1-5);
  }
  .pconfig {
    padding: var(--space-2);
    border-radius: var(--r-md);
  }
  .preview {
    width: 3.625rem;
    height: 3.625rem;
    font-size: var(--fs-4xl);
  }
  .avatars {
    grid-template-columns: repeat(4, 1fr);
  }
  .pconfig .difficulty-wrap {
    --avatar-cols: 4;
  }
  .nickname {
    font-size: var(--fs-base);
  }
  .game {
    gap: 0.3125rem;
  }
  .player-panel {
    padding: var(--space-1-5);
    border-radius: var(--r-md);
    gap: var(--space-1-5);
  }
  .avatar {
    width: 2.375rem;
    height: 2.375rem;
    font-size: var(--fs-2xl);
  }
  .name {
    font-size: var(--fs-base);
  }
  .timer {
    font-size: var(--fs-lg);
  }
  .score {
    font-size: var(--fs-2xl);
  }
  .controls-row {
    gap: var(--space-1-5);
  }
  .letter-choice {
    padding: var(--space-1);
    gap: var(--space-1-5);
    border-radius: var(--r-sm);
  }
  .letter {
    min-height: 2.75rem;
    font-size: var(--fs-3xl);
    border-radius: var(--r-xs);
  }
  .tools {
    gap: 0.3125rem;
  }
  .power,
  .sos-power {
    width: 2.375rem;
    height: 2.375rem;
    font-size: var(--fs-lg);
  }
  .turnbar {
    font-size: var(--fs-2xs);
    min-height: 1.25rem;
  }
  .board-shell {
    padding: 0.3125rem;
    border-radius: var(--r-md);
    max-width: max(17.5rem, calc(100dvh - 19.5rem));
  }
  .board {
    gap: var(--space-1);
  }
  .cell {
    border-radius: var(--r-xs);
  }
  .message {
    font-size: var(--fs-sm);
    min-height: 1.375rem;
  }
  .help-modal {
    padding: var(--space-2);
  }
  .help-dialog {
    max-height: 96vh;
    border-radius: var(--r-lg);
    padding: var(--space-4);
  }
  .help-title {
    font-size: var(--fs-2xl);
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html {
    font-size: var(--font-root-phone);
  }
}
@media (max-width: 390px) {
  .avatar {
    width: 2rem;
    height: 2rem;
    font-size: var(--fs-xl);
  }
  .name {
    font-size: var(--fs-sm);
  }
  .timer {
    font-size: var(--fs-base);
  }
  .score {
    font-size: var(--fs-xl);
  }
  .letter {
    min-height: 2.5rem;
    font-size: var(--fs-2xl);
  }
  .power,
  .sos-power {
    width: 2.125rem;
    height: 2.125rem;
    font-size: var(--fs-base);
  }
}
@media (max-height: 760px) and (orientation: portrait) {
  .player-panel {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .avatar {
    width: 2rem;
    height: 2rem;
    font-size: var(--fs-xl);
  }
  .letter {
    min-height: 2.5rem;
  }
  .power,
  .sos-power {
    width: 2.125rem;
    height: 2.125rem;
  }
  .turnbar,
  .message {
    min-height: 1.125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }
}
.help-row {
  text-align: center;
}

/* Onboarding wizard */
.setup-steps {
  display: grid;
  align-items: center;
}
.step {
  display: grid;
  grid-area: 1 / 1;
  align-content: center;
  gap: var(--space-4);
}
.step:not(.inactive) {
  animation: stepIn 0.3s ease;
}
.step.inactive {
  visibility: hidden;
  pointer-events: none;
}
.step.hidden {
  display: none;
}
.invisible {
  visibility: hidden;
}
@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.step-title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.step-lead {
  justify-self: center;
  max-width: 27.5rem;
  margin: 0;
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--muted);
}
.intro-actions {
  display: grid;
  gap: var(--space-2-5);
  justify-self: center;
  width: 100%;
  max-width: 20rem;
}
.secondary {
  min-height: 2.875rem;
  padding: 0 var(--space-4-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.help-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.rule-card {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  justify-self: center;
  width: 100%;
  max-width: 27.5rem;
  padding: 1.375rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--glass);
  text-align: center;
}
.rule-emoji {
  font-size: var(--fs-display-sm);
  line-height: 1;
}
.demo-row {
  display: flex;
  gap: var(--space-2);
}
.demo-tile {
  display: grid;
  place-items: center;
  width: 3.625rem;
  height: 3.875rem;
  border-radius: var(--r-sm);
  background: var(--crema-100);
  box-shadow: var(--relief-tile);
  color: var(--color-on-light);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
}
.demo-tile.empty {
  border: 1px dashed var(--line);
  background: var(--blanco-a06);
  box-shadow: none;
}
.demo-tile.pop {
  animation: demoPop 1.8s ease-in-out infinite;
}
.demo-row.win .demo-tile {
  background: linear-gradient(180deg, var(--cielo-400-2), var(--cielo-500));
  box-shadow: var(--relief-blue);
  color: var(--color-text);
  animation: demoGlow 1.8s ease-in-out infinite;
}
@keyframes demoPop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12) rotate(-4deg);
  }
}
@keyframes demoGlow {
  0%,
  100% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 0.75rem var(--cielo-400-a80));
  }
}
.extras-list {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: var(--fs-base);
  line-height: 1.35;
  color: var(--muted);
}
.extras-list li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--negro-a20);
}
.extra-emoji {
  font-size: var(--fs-xl);
  text-align: center;
}
.extras-list b {
  color: var(--color-text);
}
.demo-clock {
  padding: var(--space-2) var(--space-4-5);
  border-radius: var(--r-sm);
  background: var(--negro-a30);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  animation: demoPop 2.4s ease-in-out infinite;
}
.challenge-note {
  margin: 0 auto var(--space-2);
  padding: var(--space-2) var(--space-4);
  max-width: 27.5rem;
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  color: var(--accent);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
}
.challenge-note.hidden,
.challenge-result.hidden {
  display: none;
}
.setup-summary {
  margin: 0;
  text-align: center;
  font-weight: var(--fw-semibold);
}
.setup.solo-setup .pconfig:nth-child(2) .avatars {
  display: none;
}
.setup[data-step='welcome'] .wizard-nav {
  visibility: hidden;
}
.wizard-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.875rem minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: var(--space-3);
  justify-self: center;
  width: 100%;
  max-width: 27.5rem;
}
/* ← → share one width around the round ❓; on the mode step the labelled pair fills its halves. */
.wizard-nav .primary,
.wizard-nav .secondary {
  width: 4.75rem;
  min-height: var(--nav-btn-h);
  padding: 0 var(--space-2-5);
  font-size: var(--fs-2xl);
  line-height: 1.1;
}
.setup[data-step='mode'] .wizard-nav {
  gap: var(--space-2);
}
.setup[data-step='mode'] :is(#stepBack, #stepNext) {
  width: 100%;
  padding: 0 var(--space-1);
  font-size: var(--fs-sm);
}
.help-icon {
  justify-self: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.mode-brand {
  display: grid;
  gap: var(--space-2-5);
}
.mode-brand .brand span {
  width: 3.5rem;
  height: 3.75rem;
  font-size: var(--fs-display-sm);
  border-radius: var(--r-md);
}
.mode-brand .brand-bear {
  font-size: var(--fs-display-sm);
}
.difficulty-wrap {
  display: none;
  --avatar-cols: 6;
  container-type: inline-size;
  max-width: none;
  margin-top: var(--space-2-5);
}
/* Against the machine, player 1's avatars sit in 3 rows, level with the 3 difficulty buttons.
   Emojis, labels and corners grow with the card (cqw), so they keep their proportion. */
.setup.solo-setup .avatars {
  container-type: inline-size;
  grid-template-columns: repeat(4, 1fr);
}
.setup.solo-setup .difficulty-wrap {
  display: block;
  --avatar-cols: 4;
}
.setup.solo-setup .avatar-btn {
  font-size: clamp(var(--fs-sm), 13cqw, var(--fs-display-sm));
}
.setup.solo-setup .difficulty-btn {
  font-size: clamp(var(--fs-sm), 6.5cqw, var(--fs-2xl));
}
.setup.solo-setup .avatar-btn,
.setup.solo-setup .difficulty-btn {
  border-radius: clamp(var(--r-3xs), 4cqw, var(--r-md));
}
.pconfig .difficulty-choice {
  grid-template-columns: 1fr;
  gap: 0.3125rem;
}
.pconfig .difficulty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  height: calc((100cqw - (var(--avatar-cols) - 1) * 0.3125rem) / var(--avatar-cols));
  min-height: 0;
  padding: 0 var(--space-2-5);
}
.robot-icon {
  width: 1.9em;
  height: 1.9em;
  flex: 0 0 auto;
}
.robot-icon,
.robot[data-mood] {
  background: url('../img/robot-easy.svg') center / 78% no-repeat;
}
.robot-icon[data-mood='hard'],
.robot[data-mood='hard'] {
  background-image: url('../img/robot-hard.svg');
}
.robot-icon[data-mood='extreme'],
.robot[data-mood='extreme'] {
  background-image: url('../img/robot-extreme.svg');
}
.robot[data-mood] {
  background-color: var(--blanco);
  color: transparent;
}
.setup .preview.robot[data-mood='hard'],
.avatar.robot[data-mood='hard'] {
  box-shadow:
    0 0 0 0.25rem var(--rojo-500),
    0 0 1.625rem var(--rojo-500-a80);
  animation: robotRage 1.8s ease-in-out infinite;
}
.setup .preview.robot[data-mood='extreme'],
.avatar.robot[data-mood='extreme'] {
  box-shadow:
    0 0 0 0.25rem var(--noche-300-2),
    0 0 1.625rem var(--noche-300-a50);
  animation: robotRage 1.1s ease-in-out infinite;
}
@keyframes robotRage {
  0%,
  78%,
  100% {
    rotate: 0deg;
  }
  84% {
    rotate: -9deg;
  }
  90% {
    rotate: 9deg;
  }
  95% {
    rotate: -4deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .step,
  .demo-tile,
  .demo-row.win .demo-tile,
  .demo-clock {
    animation: none;
  }
}

/* Animated rule demos: the static state is the end of the move, so it is also what
   "reduce motion" shows. `.playing` (only on the visible card) runs and restarts them. */
.demo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
.demo-picker {
  display: flex;
  gap: var(--space-2);
}
.demo-pick {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-xs);
  background: var(--blanco-a10);
  color: var(--muted);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.demo-pick.selected {
  background: var(--crema-100);
  box-shadow: inset 0 -3px 0 var(--naranja-300);
  color: var(--color-on-light);
  outline: 2px solid var(--p1);
  outline-offset: 2px;
}
.demo-ghost {
  position: absolute;
  top: 4.1875rem;
  left: var(--from-x);
  display: grid;
  place-items: center;
  width: 3.625rem;
  height: 3.875rem;
  border-radius: var(--r-sm);
  background: var(--crema-100);
  box-shadow: 0 0.625rem 1.375rem var(--negro-a35);
  color: var(--color-on-light);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  opacity: 0;
  pointer-events: none;
}
.demo-hand {
  position: absolute;
  right: -0.875rem;
  bottom: -1.25rem;
  font-size: var(--fs-3xl);
}
.demo-place {
  --from-x: 5.75rem;
  --dx: -1.625rem;
}
.demo-score {
  --from-x: 2.5rem;
  --dx: 5.75rem;
}
.demo .demo-tile.target {
  background: var(--crema-100);
  box-shadow: var(--relief-tile);
}
.demo-row.win .demo-tile,
.demo-score .demo-row.win .demo-tile.target {
  background: var(--cielo-500);
  box-shadow: var(--relief-blue);
  color: var(--color-text);
  animation: none;
}
.demo-plus {
  position: absolute;
  top: -1.375rem;
  right: -1.625rem;
  padding: 2px 0.5625rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--color-on-light);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  opacity: 0;
}
.demo-dirs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1-5);
}
.demo-dirs span {
  padding: 3px 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.rule-slide.playing .demo-ghost {
  animation: demoDrag 3.6s ease-in-out infinite both;
}
.rule-slide.playing .demo-landed {
  animation: demoLanded 3.6s linear infinite both;
}
.rule-slide.playing .demo-place .target {
  animation: demoTarget 3.6s linear infinite both;
}
.rule-slide.playing .demo-score .demo-row.win .demo-tile {
  animation: demoWin 3.6s linear infinite both;
}
.rule-slide.playing .demo-score .demo-row.win .demo-tile.target {
  animation: demoTargetWin 3.6s linear infinite both;
}
.rule-slide.playing .demo-plus {
  animation: demoPlus 3.6s ease-out infinite both;
}
@keyframes demoDrag {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  8% {
    opacity: 1;
    transform: translate(0, 0) scale(1.08);
  }
  45% {
    opacity: 1;
    transform: translate(var(--dx), -4.1875rem) scale(1.08);
  }
  52% {
    opacity: 1;
    transform: translate(var(--dx), -4.1875rem) scale(1);
  }
  55%,
  100% {
    opacity: 0;
    transform: translate(var(--dx), -4.1875rem) scale(1);
  }
}
@keyframes demoLanded {
  0%,
  54% {
    opacity: 0;
  }
  55%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes demoTarget {
  0%,
  54% {
    background: var(--blanco-a06);
    box-shadow: var(--shadow-hairline);
  }
  55%,
  92% {
    background: var(--crema-100);
    box-shadow: var(--relief-tile);
  }
  100% {
    background: var(--blanco-a06);
    box-shadow: var(--shadow-hairline);
  }
}
@keyframes demoWin {
  0%,
  57%,
  100% {
    background: var(--crema-100);
    box-shadow: var(--relief-tile);
    color: var(--color-on-light);
  }
  60%,
  92% {
    background: var(--cielo-500);
    box-shadow: var(--relief-blue);
    color: var(--color-text);
  }
}
@keyframes demoTargetWin {
  0%,
  54% {
    background: var(--blanco-a06);
    box-shadow: var(--shadow-hairline);
    color: var(--color-on-light);
  }
  55%,
  57% {
    background: var(--crema-100);
    box-shadow: var(--relief-tile);
    color: var(--color-on-light);
  }
  60%,
  92% {
    background: var(--cielo-500);
    box-shadow: var(--relief-blue);
    color: var(--color-text);
  }
  100% {
    background: var(--blanco-a06);
    box-shadow: var(--shadow-hairline);
    color: var(--color-on-light);
  }
}
@keyframes demoPlus {
  0%,
  58% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.6);
  }
  66% {
    opacity: 1;
    transform: translateY(-0.25rem) scale(1.15);
  }
  86% {
    opacity: 1;
    transform: translateY(-0.25rem) scale(1);
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(-0.25rem) scale(1);
  }
}

/* Clock demo: 0:07 → 0:00, red for the last 5 s, then it holds 0:00. */
.demo-clock.countdown {
  display: grid;
  padding: 0;
  background: none;
  animation: none;
}
.countdown span {
  grid-area: 1 / 1;
  padding: var(--space-2) var(--space-4-5);
  border-radius: var(--r-sm);
  background: var(--negro-a30);
  opacity: 0;
}
.countdown span:nth-child(n + 3) {
  background: var(--rojo-500-a25);
  color: var(--rojo-300);
  box-shadow: 0 0 0 2px var(--rojo-400-a55);
}
.countdown span:nth-child(3) {
  opacity: 1;
}
.rule-slide.playing .countdown span {
  opacity: 0;
  animation: clockTick 9s steps(1, end) infinite;
}
.rule-slide.playing .countdown span:nth-child(2) {
  animation-delay: 1s;
}
.rule-slide.playing .countdown span:nth-child(3) {
  animation-delay: 2s;
}
.rule-slide.playing .countdown span:nth-child(4) {
  animation-delay: 3s;
}
.rule-slide.playing .countdown span:nth-child(5) {
  animation-delay: 4s;
}
.rule-slide.playing .countdown span:nth-child(6) {
  animation-delay: 5s;
}
.rule-slide.playing .countdown span:nth-child(7) {
  animation-delay: 6s;
}
.rule-slide.playing .countdown span:nth-child(8) {
  animation-name: clockEnd;
  animation-delay: 7s;
}
@keyframes clockTick {
  0% {
    opacity: 1;
  }
  11.1%,
  100% {
    opacity: 0;
  }
}
@keyframes clockEnd {
  0% {
    opacity: 1;
  }
  22.2%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rule-slide.playing .demo *,
  .rule-slide.playing .countdown span {
    animation: none;
  }
  .rule-slide.playing .countdown span:nth-child(3) {
    opacity: 1;
  }
}

/* Rules carousel */
.carousel {
  grid-template-columns: minmax(0, 1fr);
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  gap: var(--space-3-5);
}
.slides {
  display: flex;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  transition: transform var(--dur-base) ease;
  touch-action: pan-y;
  user-select: none;
}
.rule-slide {
  display: grid;
  flex: 0 0 100%;
  justify-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  box-sizing: border-box;
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-0-5);
}
.dot {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.625rem;
  padding: 0;
  border: 0;
  background: none;
}
.dot::before {
  content: '';
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: var(--r-pill);
  background: var(--blanco-a35);
  transition:
    width 0.25s,
    background 0.25s;
}
.dot[aria-current='true']::before {
  width: 1.625rem;
  background: var(--accent);
}
.avatar-btn:disabled {
  opacity: 0.22;
  filter: grayscale(1);
  cursor: not-allowed;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .slides,
  .step:not(.inactive) {
    transition: none;
    animation: none;
  }
}

/* ACCESSIBILITY UTILITIES */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Invisible hit area so the small extras reach ~44 px touch targets without growing visually. */
.power::after,
.sos-power::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
}

/* WIDE (desktop, iPad landscape): board in the middle, players at the sides */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) and (min-height: 600px) {
  .app:has(#gameScreen:not(.hidden)) {
    width: min(100%, 87.5rem);
  }
  .game {
    grid-template-columns: clamp(14.375rem, 20vw, 20rem) minmax(0, 1fr) clamp(14.375rem, 20vw, 20rem);
    grid-template-areas: 'p1 board p2';
    column-gap: var(--space-5);
    padding-right: var(--space-6);
  }
  #side1 {
    grid-area: p1;
  }
  #side2 {
    grid-area: p2;
  }
  .center-area {
    grid-area: board;
  }
  .game.online.guest #side1 {
    grid-area: p2;
  }
  .game.online.guest #side2 {
    grid-area: p1;
  }
  .board-shell {
    max-width: min(100%, calc(100dvh - 8.125rem));
  }
  .game .turnbar-top {
    transform: none;
  }
  .controls-row {
    grid-template-columns: 1fr;
  }
  .tools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
  }

  /* 1 player: the machine above the human, right of the board */
  .game.solo {
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 21.25rem);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      'board p2'
      'board p1';
    row-gap: var(--space-3-5);
  }
  .game.solo #side2 {
    align-self: end;
  }
  .game.solo #side1 {
    align-self: start;
  }

  /* 2 players facing (tablet on the table): each panel turned toward its end */
  .game:not(.solo, .same-view) {
    grid-template-columns: 11.875rem minmax(0, 1fr) 11.875rem;
  }
  .game:not(.solo, .same-view) .player-panel {
    width: 26.25rem;
    margin-inline: calc((100% - 26.25rem) / 2);
  }
  .game:not(.solo, .same-view) #side1 {
    transform: rotate(90deg);
  }
  .game:not(.solo, .same-view) #side2 {
    transform: rotate(-90deg);
  }
  .game:not(.solo, .same-view) .controls-row {
    grid-template-columns: 1fr auto;
  }
  .game:not(.solo, .same-view) .tools {
    display: flex;
  }
}

/* TABLET PORTRAIT: bigger board, each player panel in a single row */
@media (min-width: 700px) and (orientation: portrait) {
  .app:has(#gameScreen:not(.hidden)) {
    width: min(100%, 62.5rem);
  }
  .player-panel {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .player-panel .controls-row {
    grid-column: auto;
    width: min(27.5rem, 56vw);
  }
  .board-shell {
    max-width: min(100%, calc(100dvh - 18.125rem));
  }
}

/* DRAG AND DROP: the tile that follows the finger, and the hint that it can be dragged */
.drag-tile {
  position: fixed;
  z-index: var(--z-drag);
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--tile);
  color: var(--tile-ink);
  font-weight: var(--fw-bold);
  line-height: 1;
  pointer-events: none;
  translate: -50% -70%;
  rotate: -6deg;
  scale: 1.08;
  box-shadow:
    0 0.25rem 0 var(--tile-edge),
    0 0.875rem 1.625rem var(--negro-a45);
}
.cell.drop-target {
  outline: 0.25rem solid var(--accent);
  outline-offset: -0.25rem;
  background: var(--blanco-a22);
}
.drag-hint {
  display: none;
  position: absolute;
  right: -0.375rem;
  bottom: -0.875rem;
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
  animation: dragHint 1.8s ease-in-out infinite;
}
.drag-hint::before {
  content: '👆';
  position: absolute;
  inset: 0;
  font-size: var(--fs-3xl);
  line-height: 2.25rem;
  text-align: center;
  filter: drop-shadow(0 2px 2px var(--negro-a50));
}
.drag-hint::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 1rem;
  width: 0.6875rem;
  height: 1.125rem;
  background: repeating-linear-gradient(90deg, var(--blanco) 0 2px, transparent 2px 0.2812rem);
  border-radius: var(--r-4xs);
  opacity: 0;
  animation: dragLines 1.8s ease-in-out infinite;
}
.game:not(.drag-known) .player-panel.active:not(.machine) .letter.selected:not(:disabled) .drag-hint {
  display: block;
}
@keyframes dragHint {
  0%,
  20% {
    transform: translate(0, 0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  75% {
    transform: translate(0.5rem, -1.375rem);
    opacity: 1;
  }
  100% {
    transform: translate(0.5rem, -1.375rem);
    opacity: 0;
  }
}
@keyframes dragLines {
  0%,
  40% {
    opacity: 0;
  }
  60%,
  75% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .drag-hint,
  .drag-hint::after {
    animation: none;
  }
  .drag-hint::after {
    opacity: 0.7;
  }
}

/* THEMES (skins): only colours, background and decoration change */
.theme-toggle {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: var(--z-toolbar);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--blanco-a12);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.sound-toggle {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: calc(max(0.75rem, env(safe-area-inset-right)) + 3.375rem);
  z-index: var(--z-toolbar);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--blanco-a12);
  font-size: var(--fs-xl);
  line-height: 1;
}
.share-toggle {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: calc(max(0.75rem, env(safe-area-inset-right)) + 6.75rem);
  z-index: var(--z-toolbar);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--blanco-a12);
  font-size: var(--fs-xl);
  line-height: 1;
}
.theme-menu {
  position: fixed;
  top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.375rem);
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: var(--z-popover);
  display: grid;
  gap: var(--space-1-5);
  width: min(14.75rem, calc(100vw - 1.5rem));
  scrollbar-gutter: stable;
  padding: var(--space-2-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--noche-900-a97);
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - 4.375rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.theme-group {
  display: grid;
  gap: var(--space-1-5);
}
.theme-group[hidden] {
  display: none;
}
.theme-more {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.theme-more::after {
  content: ' ▾';
}
.theme-more[aria-expanded='true']::after {
  content: ' ▴';
}
/* Easter egg celebration: eggs fall over the whole screen with a short message */
.egg-party {
  position: fixed;
  inset: 0;
  z-index: var(--z-party);
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.egg-party:not(:empty) {
  background: var(--noche-950-a62);
  animation: fadeIn 0.3s ease-out;
}
.egg-party span {
  position: absolute;
  top: -3rem;
  font-size: var(--fs-4xl);
  animation: fall 2.6s linear forwards;
}
.egg-party p {
  margin: 0 var(--space-4);
  padding: 0.875rem 1.375rem;
  border-radius: var(--r-md);
  background: var(--noche-900-a92);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  text-align: center;
  animation: pop 0.45s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .egg-party span {
    display: none;
  }
  .egg-party:not(:empty),
  .egg-party p {
    animation: none;
  }
}
.theme-toggle.hint {
  animation: themeHint 0.7s ease-in-out 0.9s 2;
}
@keyframes themeHint {
  50% {
    transform: scale(1.3);
  }
}
body:has(#gameScreen:not(.hidden)) .theme-toggle,
body:has(#gameScreen:not(.hidden)) .sound-toggle,
body:has(#gameScreen:not(.hidden)) .share-toggle,
body:has(#gameScreen:not(.hidden)) .theme-menu {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle.hint {
    animation: none;
  }
}
.theme-option {
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--blanco-a08);
  color: var(--color-text);
  text-align: left;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.theme-option[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.theme-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.theme-decor span {
  position: absolute;
  opacity: 0.28;
  animation: decorFall linear infinite;
}
body.sea-theme .theme-decor {
  opacity: 0;
}
@keyframes decorFall {
  from {
    transform: translateY(-3.75rem) rotate(0deg);
  }
  to {
    transform: translateY(110vh) rotate(200deg);
  }
}
@keyframes decorRise {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1.5rem, -55vh);
  }
  100% {
    transform: translate(0, -115vh);
  }
}
@keyframes snowfall {
  to {
    background-position: 0 13.75rem;
  }
}

body[data-theme='halloween'] .theme-decor span {
  top: auto;
  bottom: -3.75rem;
  opacity: 0.42;
  animation-name: decorRise;
}
body[data-theme='halloween'] .theme-decor::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 0M0 0L92 38M0 0L71 71M0 0L38 92M0 0L0 100M28 0Q23 5 26 11Q20 13 20 20Q13 20 11 26Q5 23 0 28M52 0Q43 9 48 20Q36 24 37 37Q24 36 20 48Q9 43 0 52M78 0Q65 13 72 30Q55 37 55 55Q37 55 30 72Q13 65 0 78' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.2'/%3E%3C/svg%3E")
      0 0 / 7rem 7rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='matrix%28-1 0 0 1 100 0%29'%3E%3Cpath d='M0 0L100 0M0 0L92 38M0 0L71 71M0 0L38 92M0 0L0 100M28 0Q23 5 26 11Q20 13 20 20Q13 20 11 26Q5 23 0 28M52 0Q43 9 48 20Q36 24 37 37Q24 36 20 48Q9 43 0 52M78 0Q65 13 72 30Q55 37 55 55Q37 55 30 72Q13 65 0 78' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E")
      100% 0 / 7rem 7rem no-repeat;
}
body[data-theme='halloween'] .theme-decor::after {
  content: '🕷️';
  position: absolute;
  top: 0;
  left: 38%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 2rem;
  height: 3rem;
  font-size: var(--fs-2xl);
  line-height: 1;
  opacity: 0.85;
  background: linear-gradient(var(--blanco-a40), var(--blanco-a40)) 50% 0 / 1px 100% no-repeat;
  animation: spiderDrop 12s ease-in-out infinite;
}
@keyframes spiderDrop {
  0%,
  55%,
  100% {
    height: 2.5rem;
  }
  70%,
  82% {
    height: 4.5rem;
  }
}
@media (min-width: 48rem) {
  body[data-theme='halloween'] .theme-decor::before {
    height: 10rem;
    background-size: 10rem 10rem;
  }
}

body[data-theme='christmas']::before {
  opacity: 0.8;
  animation: snowfall 14s linear infinite;
}
body[data-theme='christmas'] .theme-decor span {
  top: -3.75rem;
}
body[data-theme='christmas'] .theme-decor::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 12vh;
  opacity: 0.18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q150 20 300 55 T600 50 T900 60 T1200 45 V120 H0Z' fill='%23ffffff'/%3E%3C/svg%3E")
    0 100% / 100% 100% no-repeat;
}
body[data-motion='fall'] .theme-decor span {
  top: -3.75rem;
}
body[data-motion='rise'] .theme-decor span {
  top: auto;
  bottom: -3.75rem;
  animation-name: decorRise;
}
@media (prefers-reduced-motion: reduce) {
  .theme-decor span,
  body[data-theme='halloween'] .theme-decor::after,
  body[data-theme='christmas']::before {
    animation: none;
  }
  body[data-theme] .theme-decor span {
    top: var(--y);
    bottom: auto;
  }
}

/* 4 PLAYERS (tablet and computer only): players 3 and 4 */
.setup:not(.four-setup) .extra-player {
  display: none;
}
.setup.four-setup .players-setup {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.setup.four-setup .avatars {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.setup.four-setup .avatar-btn {
  font-size: var(--fs-xl);
}
.pconfig:nth-child(3) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--p3) 24%, transparent),
    color-mix(in srgb, var(--p3) 4%, transparent)
  );
  border-color: color-mix(in srgb, var(--p3) 50%, transparent);
}
.pconfig:nth-child(4) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--p4) 24%, transparent),
    color-mix(in srgb, var(--p4) 4%, transparent)
  );
  border-color: color-mix(in srgb, var(--p4) 50%, transparent);
}
.pconfig:nth-child(3) .small-label {
  color: var(--menta-200);
}
.pconfig:nth-child(4) .small-label {
  color: var(--lila-100);
}
.pconfig:nth-child(3) .preview {
  box-shadow:
    0 0 0 0.25rem var(--p3),
    0 0.5rem 1.375rem var(--p3glow);
}
.pconfig:nth-child(4) .preview {
  box-shadow:
    0 0 0 0.25rem var(--p4),
    0 0.5rem 1.375rem var(--p4glow);
}
.player-panel.p3 {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--p3) 24%, transparent),
    color-mix(in srgb, var(--p3) 4%, transparent)
  );
}
.player-panel.p4 {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--p4) 24%, transparent),
    color-mix(in srgb, var(--p4) 4%, transparent)
  );
}
.player-panel.p3.active {
  border-color: var(--p3);
  box-shadow: 0 0 1.75rem var(--p3glow);
  animation: glow3 1.6s ease-in-out infinite;
}
.player-panel.p4.active {
  border-color: var(--p4);
  box-shadow: 0 0 1.75rem var(--p4glow);
  animation: glow4 1.6s ease-in-out infinite;
}
@keyframes glow3 {
  50% {
    box-shadow: 0 0 0.5rem var(--p3glow);
  }
}
@keyframes glow4 {
  50% {
    box-shadow: 0 0 0.5rem var(--p4glow);
  }
}
.p3 .avatar {
  box-shadow:
    0 0 0 3px var(--p3),
    0 0.25rem 0.75rem var(--negro-a35);
}
.p4 .avatar {
  box-shadow:
    0 0 0 3px var(--p4),
    0 0.25rem 0.75rem var(--negro-a35);
}
.p3 .timer,
.p3 .score {
  color: color-mix(in srgb, var(--p3) 55%, var(--blanco));
}
.p4 .timer,
.p4 .score {
  color: color-mix(in srgb, var(--p4) 55%, var(--blanco));
}
.p3 .letter {
  background: color-mix(in srgb, var(--p3) 22%, transparent);
  color: color-mix(in srgb, var(--p3) 45%, var(--blanco));
}
.p4 .letter {
  background: color-mix(in srgb, var(--p4) 22%, transparent);
  color: color-mix(in srgb, var(--p4) 45%, var(--blanco));
}
.p3 .letter.selected,
.p4 .letter.selected {
  background: var(--tile);
  color: var(--tile-ink);
}
.p3 .letter.selected {
  --ring: var(--p3);
  --ring-glow: var(--p3glow);
}
.p4 .letter.selected {
  --ring: var(--p4);
  --ring-glow: var(--p4glow);
}
.cell.p3 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--p3) 65%, var(--blanco)), var(--p3));
  color: var(--color-text);
  box-shadow:
    0 0.25rem 0 color-mix(in srgb, var(--p3b) 70%, var(--negro)),
    0 0 1rem var(--p3glow);
}
.cell.p4 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--p4) 65%, var(--blanco)), var(--p4));
  color: var(--color-text);
  box-shadow:
    0 0.25rem 0 color-mix(in srgb, var(--p4b) 70%, var(--negro)),
    0 0 1rem var(--p4glow);
}
.cell.p3 span,
.cell.p4 span {
  text-shadow: 0 2px 0 var(--negro-a22);
}

/* 4-player game: one panel on each side of the board, turns clockwise from the bottom */
.app:has(#gameScreen.four:not(.hidden)) {
  width: min(100%, 87.5rem);
}
.game.four {
  grid-template-columns: minmax(8.75rem, 11.875rem) minmax(0, 1fr) minmax(8.75rem, 11.875rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'top top top'
    'left board right'
    'bottom bottom bottom';
  --side-w: clamp(25rem, calc(100dvh - 18.75rem), 35rem);
  gap: var(--space-2) var(--space-3-5);
  padding-right: 0;
}
.game.four #side1 {
  grid-area: bottom;
  justify-self: center;
  width: min(100%, 45rem);
  margin-inline: 0;
  transform: none;
}
.game.four #side2 {
  grid-area: left;
}
.game.four #side3 {
  grid-area: top;
  justify-self: center;
  width: min(100%, 45rem);
  margin-inline: 0;
  transform: none;
}
.game.four #side4 {
  grid-area: right;
}
.game.four .center-area {
  grid-area: board;
}
.game.four .player-panel {
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: auto;
  margin-inline: 0;
  padding: 0.4375rem;
  transform: none;
}
.game.four .player-panel .controls-row {
  grid-column: auto;
  grid-template-columns: auto auto;
}
.game.four .tools {
  display: flex;
}
.game.four .turnbar-top {
  display: none;
}
.game.four .board-shell {
  max-width: min(100%, calc(100dvh - 18.75rem));
}
/* Same view: the side panels stand upright, stacked in their column */
.game.four.same-view :is(#side2, #side4) {
  grid-template-columns: auto minmax(0, 1fr);
}
.game.four.same-view :is(#side2, #side4) .controls-row {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  justify-items: center;
}
.game.four :is(#side2, #side4) .tools {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--space-1-5);
}
.game.four.same-view :is(#side2, #side4) .letter-choice {
  width: auto;
}
/* Facing (tablet on the table): each panel turned toward its seat */
.game.four:not(.same-view) #side3 {
  transform: rotate(180deg);
}
.game.four:not(.same-view) {
  grid-template-columns: 7.375rem minmax(0, 1fr) 7.375rem;
}
.game.four:not(.same-view) .player-panel .controls-row {
  grid-template-columns: auto auto;
}
.game.four:not(.same-view) :is(#side2, #side4) {
  width: var(--side-w);
  margin-inline: calc((100% - var(--side-w)) / 2);
}
.game.four:not(.same-view) #side2 {
  transform: rotate(90deg);
}
.game.four:not(.same-view) #side4 {
  transform: rotate(-90deg);
}
.game.four .player-panel .controls-row {
  width: auto;
}
.game.four :is(#side2, #side4) .letter-choice {
  width: auto;
}
@media (orientation: portrait) {
  .game.four {
    --side-w: min(35rem, calc(100vw - 18.125rem));
  }
}
.game.four .player-panel.out {
  opacity: 0.45;
  filter: grayscale(0.7);
}
/* 4 players, same view on a computer: board on the left, the four players stacked on the right */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) and (min-height: 600px) {
  .game.four.same-view {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 23.75rem);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    grid-template-areas:
      'board .'
      'board p1'
      'board p2'
      'board p3'
      'board p4'
      'board .';
    gap: var(--space-2-5) var(--space-6);
    padding-right: var(--space-6);
  }
  .game.four.same-view :is(#side1, #side2, #side3, #side4) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-self: stretch;
    width: auto;
    margin-inline: 0;
    transform: none;
  }
  .game.four.same-view #side1 {
    grid-area: p1;
  }
  .game.four.same-view #side2 {
    grid-area: p2;
  }
  .game.four.same-view #side3 {
    grid-area: p3;
  }
  .game.four.same-view #side4 {
    grid-area: p4;
  }
  .game.four.same-view :is(#side1, #side2, #side3, #side4) .controls-row {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    width: auto;
  }
  .game.four.same-view :is(#side1, #side2, #side3, #side4) .tools {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1-5);
  }
  .game.four.same-view :is(#side1, #side2, #side3, #side4) .letter {
    flex: none;
    width: 3.25rem;
    aspect-ratio: 1;
  }
  .game.four.same-view .board-shell {
    max-width: min(100%, calc(100dvh - 8.125rem));
  }
}

/* QUICK FEEDBACK (end of game, only at chosen moments; secondary to the actions) */
.secret-known {
  text-align: left;
}
.secret-known h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}
.secret-known ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.secret-known summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.secret-known p {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.feedback-ask {
  margin: 1.375rem auto 0;
  opacity: 0.85;
}
.feedback-title {
  margin: 0 0 var(--space-1-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--blanco-a75);
}
.feedback-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2-5);
}
.feedback-btn {
  min-width: 3rem;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--blanco-a06);
  font-size: var(--fs-xl);
  cursor: pointer;
}
.feedback-btn:hover {
  background: var(--blanco-a16);
}
.install-ask {
  margin: 1.375rem auto 0;
}
.install-text {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.install-ask .install-yes {
  margin: 0;
}
.install-no {
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}
.install-steps {
  margin: 0;
  padding-left: 1.5em;
  text-align: left;
  line-height: 1.4;
}
.install-steps li + li {
  margin-top: var(--space-1-5);
}
.thanks-dialog::backdrop {
  background: var(--noche-950-a88);
}
.info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  padding: 0 1.375rem;
  box-sizing: border-box;
  text-decoration: none;
}
.thanks-dialog form {
  margin: 0;
}
.thanks-dialog .secondary {
  min-width: 10rem;
  min-height: 2.75rem;
}
.consent-text a,
.info-dialog .step-lead a {
  color: inherit;
  font-weight: var(--fw-bold);
}

/* PRIVACY PAGE */
body.legal-page {
  display: block;
}
.legal {
  position: relative;
  z-index: 1;
  max-width: 45rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
  line-height: 1.6;
}
.legal h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-4xl);
}
.legal h2 {
  margin: var(--space-7) 0 var(--space-1-5);
  font-size: var(--fs-lg);
}
.legal a {
  color: inherit;
  font-weight: var(--fw-bold);
}
.legal-back {
  display: inline-block;
  margin-bottom: var(--space-4);
}
.legal-meta {
  margin: 0;
  opacity: 0.75;
}

/* SHARE (word of mouth) */
.share-message {
  margin: 0;
  padding: var(--space-2-5) var(--space-3-5);
  border-radius: var(--r-sm);
  background: var(--blanco-a07);
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.4;
  white-space: pre-line;
}
.share-actions {
  display: grid;
  gap: var(--space-2-5);
}
.share-actions > * {
  min-height: 3rem;
}
.share-actions .info-link {
  justify-self: stretch;
}
.info-dialog .share-actions .primary {
  min-width: 0;
  margin-top: 0;
}
.share-status {
  min-height: 1.3em;
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.share-dialog form {
  margin: 0;
}
.share-close {
  min-width: 10rem;
  min-height: 2.75rem;
}

/* Online 1 vs 1: the rival's card is the invite, then shows who joined. */
.online-toggle {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: var(--z-toolbar);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--blanco-a12);
  font-size: var(--fs-xl);
  line-height: 1;
}
body:has(#gameScreen:not(.hidden)) .online-toggle {
  display: none;
}
/* On the first steps (the guest's «Sala cerrada»), the notice takes the place of the top buttons. */
body:has(.online-toast:not(.hidden), .secret-toast:not(.hidden))
  :is(.theme-toggle, .sound-toggle, .share-toggle, .online-toggle, .theme-menu) {
  visibility: hidden;
}
.online-seat,
.online-invite {
  display: none;
}
.online-setup .pconfig.remote > :not(.small-label, .online-seat),
.online-setup .second-player.inviting > :not(.small-label, .online-invite) {
  display: none;
}
.online-setup .pconfig.remote .online-seat,
.online-setup .second-player.inviting .online-invite {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}
/* Lobby news («Esperando a tu amigo…») as a toast between the toolbar and the card. */
.online-toast,
.secret-toast {
  position: fixed;
  /* Centred between the top of the screen and the card (--toast-mid, set by app.js) and as tall
     as the ← → buttons. The top buttons are hidden on these steps. */
  top: max(
    calc(env(safe-area-inset-top) + var(--space-2)),
    calc(var(--toast-mid, 6.25rem) - var(--nav-btn-h) / 2)
  );
  left: 50%;
  z-index: var(--z-toolbar);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: min(calc(100% - 2rem), 27.5rem);
  min-height: var(--nav-btn-h);
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--noche-950-a97);
  color: var(--accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 0.5rem 1.5rem var(--noche-950-a97);
  transform: translateX(-50%);
  animation: toastIn 0.25s ease;
}
.online-toast.hidden,
body:has(#gameScreen:not(.hidden)) .online-toast {
  display: none;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, -0.5rem);
  }
}
/* Secrets (secrets.js): «¡Tienes un premio!» uses the same toast as the online news, with a
   button at the end. It is on the first steps and on the end screen, at the top. */
.secret-toast {
  gap: var(--space-3);
  /* With the button inside it stays as tall as ← →, like the online news. */
  padding-block: var(--space-1);
  padding-inline-end: var(--space-1);
  /* Centred on --toast-mid whatever its height. */
  top: max(calc(env(safe-area-inset-top) + var(--space-8)), var(--toast-mid, 6.25rem));
  transform: translate(-50%, -50%);
  animation-name: secretToastIn;
}
.secret-toast span {
  white-space: nowrap;
}
@keyframes secretToastIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 0.5rem));
  }
}
.secret-toast.hidden,
body:has(.online-toast:not(.hidden)) .secret-toast,
body:has(#gameScreen:not(.hidden)):has(#winnerOverlay.hidden) .secret-toast {
  display: none;
}
body:has(#winnerOverlay:not(.hidden)) .secret-toast {
  top: calc(env(safe-area-inset-top) + var(--space-3));
  transform: translateX(-50%);
  animation-name: toastIn;
  z-index: calc(var(--z-overlay) + 1);
}
.secret-toast button {
  flex: none;
  min-height: 2.125rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--btn-primary-bg);
  color: var(--naranja-900-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.start-countdown {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background: var(--noche-950-a97);
  animation: fadeIn 0.2s ease;
}
.start-countdown.hidden {
  display: none;
}
.start-countdown span {
  color: var(--accent);
  font-size: var(--fs-hero-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.primary:disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
  box-shadow: none;
  cursor: not-allowed;
}
.online-seat-name,
.online-invite-lead {
  margin: 0;
  font-weight: var(--fw-bold);
  text-align: center;
}
/* The invite card mirrors player 1's: the head sits where the name field is and each button
   lines up with a row of avatars (same columns and gap as .avatars). */
.online-setup .second-player.inviting .online-invite {
  --avatar-cols: 6;
  --avatar-gap: 0.3125rem;
  --avatar-row: calc((100cqw - (var(--avatar-cols) - 1) * var(--avatar-gap)) / var(--avatar-cols));
  container-type: inline-size;
  gap: 0;
}
.online-invite-head {
  display: grid;
  align-content: center;
  min-height: 2.875rem;
  line-height: 1.15;
}
@media (max-width: 600px) {
  .online-setup .second-player.inviting .online-invite {
    --avatar-cols: 4;
  }
}
.online-code-line {
  margin: 0;
  font-size: var(--fs-sm);
  text-align: center;
  white-space: nowrap;
}
.online-code-line.hidden {
  display: none;
}
.online-code {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  color: var(--accent);
  user-select: all;
}
.online-share {
  display: grid;
  gap: var(--avatar-gap);
  width: 100%;
}
.online-share.hidden {
  display: none;
}
.online-invite > .primary,
.online-share {
  margin-top: var(--space-2-5);
}
.online-invite .primary,
.online-invite .secondary {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--avatar-row);
  min-height: 0;
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* Playing the machine while the rival comes: «Ha llegado …» with the button to go and play them. */
.rival-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-2));
  left: 50%;
  z-index: var(--z-banner);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  width: max-content;
  max-width: min(calc(100% - 2rem), 27.5rem);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--noche-950-a97);
  color: var(--accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 0.5rem 1.5rem var(--noche-950-a97);
  transform: translateX(-50%);
  animation: toastIn 0.25s ease;
}
.rival-banner p {
  margin: 0;
}
.rival-banner.hidden,
.rival-banner .hidden {
  display: none;
}
.online-invite .online-wait-machine {
  height: auto;
  min-height: var(--avatar-row);
  margin-top: var(--avatar-gap);
  padding-block: var(--space-1);
  line-height: 1.2;
  white-space: normal;
}
.online-invite .online-wait-machine.hidden {
  display: none;
}

/* «Ver la partida»: the last game again, move by move. */
.replay-dialog {
  width: min(calc(100% - 1.5rem), 26rem);
  padding-inline: var(--space-4);
}
.replay-dialog[open] {
  grid-template-columns: minmax(0, 1fr);
}
.replay-score {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.replay-board {
  gap: var(--space-1);
}
.replay-board .cell.replay-made {
  outline: 0.1875rem solid var(--accent);
  outline-offset: -0.1875rem;
}
.replay-board .cell.replay-gift {
  outline: 0.25rem dashed var(--color-danger);
  outline-offset: -0.25rem;
}
.replay-caption {
  min-height: 2.5em;
  margin: 0;
  line-height: 1.25;
}
.replay-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.info-dialog .replay-controls button {
  flex: 1;
  min-width: 0;
  max-width: 4rem;
  margin: 0;
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-lg);
}
.info-dialog .replay-controls .primary {
  flex: 1.6;
  max-width: 6rem;
}