:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --panel-bg: rgba(19, 34, 24, 0.78);
  --panel-line: rgba(243, 209, 117, 0.62);
  --gold: #f4ca58;
  --gold-2: #ffeaa1;
  --cream: #fff4cc;
  --green: #18a555;
  --green-2: #08723d;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { background: #102418; }
body {
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  user-select: none;
  touch-action: manipulation;
}
button { font: inherit; }

.app-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(6px, 1vh, 14px);
  padding:
    calc(var(--safe-top) + clamp(8px, 1.2vw, 20px))
    calc(var(--safe-right) + clamp(8px, 1.2vw, 20px))
    calc(var(--safe-bottom) + clamp(8px, 1.2vw, 20px))
    calc(var(--safe-left) + clamp(8px, 1.2vw, 20px));
}

.scene-bg,
.scene-bg__image,
.scene-bg__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-bg { z-index: -2; overflow: hidden; background: #102418; }
.scene-bg__image {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.008);
  transition: opacity 420ms ease;
  image-rendering: auto;
}
.scene-bg__image.is-visible { opacity: 1; }
.scene-bg__shade {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(6, 20, 12, 0.02) 15%, rgba(4, 15, 9, 0.26) 80%),
    linear-gradient(to bottom, rgba(3, 13, 8, 0.28), rgba(3, 12, 8, 0.10) 38%, rgba(3, 12, 8, 0.28));
}

.glass-panel {
  border: 1px solid var(--panel-line);
  background:
    linear-gradient(180deg, rgba(41, 63, 43, 0.88), rgba(17, 36, 24, 0.85));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0,0,0,.22);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.topbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: clamp(14px, 1.5vw, 24px);
  padding: clamp(8px, 1.05vw, 16px) clamp(12px, 1.5vw, 22px);
}
.brand-block { min-width: 0; }
.stage-kicker {
  color: var(--gold);
  font-weight: 900;
  font-size: clamp(10px, .75vw, 14px);
  letter-spacing: .16em;
}
.brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.title {
  margin: 0;
  color: #fff7d7;
  font-size: clamp(18px, 1.8vw, 34px);
  line-height: 1.05;
  text-shadow: 0 3px 10px rgba(0,0,0,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subtitle {
  margin: 3px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(10px, .8vw, 14px);
}
.quality-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(247,214,107,.7);
  border-radius: 999px;
  color: #2a2108;
  background: linear-gradient(#ffe79b, #e6b93d);
  font-size: clamp(9px, .65vw, 12px);
  font-weight: 900;
  letter-spacing: .05em;
}
.icon-button {
  flex: 0 0 auto;
  width: clamp(38px, 3.2vw, 54px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,224,131,.72);
  border-radius: 50%;
  color: #ffebad;
  background: linear-gradient(#18764b, #0d5235);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 20px rgba(0,0,0,.28);
  cursor: pointer;
  font-size: clamp(19px, 1.4vw, 28px);
}

.workspace {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, clamp(290px, 23vw, 410px));
  gap: clamp(8px, 1.25vw, 20px);
}
.board-host {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  touch-action: none;
}

.board {
  --rows: 7;
  --cols: 7;
  --grid-gap: 3px;
  --tile-font: 42px;
  position: relative;
  overflow: hidden;
  flex: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: var(--grid-gap);
  padding: clamp(4px, .75vw, 10px);
  border-radius: clamp(18px, 2vw, 34px);
  background:
    radial-gradient(circle at 50% 35%, rgba(32, 122, 67, .28), rgba(5, 24, 13, .85)),
    rgba(9, 32, 18, .82);
  border: clamp(2px, .25vw, 5px) solid rgba(207, 167, 76, .84);
  box-shadow:
    0 28px 70px rgba(0,0,0,.5),
    inset 0 0 0 3px rgba(25, 95, 48, .65),
    inset 0 0 35px rgba(0,0,0,.45);
  contain: layout paint style;
}
.board__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.board__path-glow,
.board__path-core,
.board__path-preview {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.board__path-glow {
  stroke: rgba(255, 208, 72, 0.38);
  filter: drop-shadow(0 0 9px rgba(255, 220, 96, 0.8));
}
.board__path-core {
  stroke: rgba(255, 245, 190, 0.98);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85));
}
.board__path-preview {
  stroke: rgba(255, 228, 138, 0.72);
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px rgba(255, 208, 72, 0.44));
  opacity: .78;
}
.board__anchor,
.board__pointer {
  fill: rgba(255, 238, 175, 0.98);
  stroke: rgba(171, 109, 19, 0.92);
}
.board__anchor {
  filter: drop-shadow(0 0 8px rgba(255, 208, 72, 0.75));
}
.board__pointer { opacity: .92; }
.board__head-ring {
  fill: rgba(255, 222, 98, .08);
  stroke: rgba(255, 243, 183, .95);
  stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(255, 208, 72, .78));
  pointer-events: none;
}

.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  transform: translateZ(0);
  z-index: 1;
}
.tile__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.28));
  transition: transform .12s ease, filter .12s ease, brightness .12s ease;
}
.tile__glyph {
  position: relative;
  z-index: 2;
  color: #572511;
  font-weight: 1000;
  font-size: var(--tile-font);
  line-height: 1;
  transform: translateY(-1%);
  text-shadow: 0 1px 0 #f7d79e, 0 2px 1px rgba(0,0,0,.12);
  pointer-events: none;
  transition: transform .12s ease, color .12s ease, text-shadow .12s ease;
}
.tile.is-selected .tile__art {
  transform: scale(1.04);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) brightness(1.08) saturate(1.08);
}
.tile.is-selected .tile__glyph {
  color: #4f1f09;
  text-shadow: 0 0 1px #fff9e3, 0 1px 0 #fef5cb, 0 0 12px rgba(255,234,156,.55);
}
.tile.is-head .tile__art {
  transform: scale(1.07);
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.3)) brightness(1.13) saturate(1.16);
}
.tile.is-head .tile__glyph {
  transform: translateY(-1%) scale(1.05);
}

.control-panel {
  min-height: 0;
  overflow: auto;
  border-radius: clamp(16px, 1.6vw, 26px);
  padding: clamp(12px, 1.2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vh, 20px);
  overscroll-behavior: contain;
}
.control-label,
.metric__label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,248,218,.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.grid-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.size-btn,
.primary-btn,
.secondary-btn {
  border: 1px solid rgba(252,222,132,.72);
  color: #fff6d6;
  cursor: pointer;
  font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1), 0 5px 12px rgba(0,0,0,.2);
}
.size-btn {
  min-height: 40px;
  border-radius: 11px;
  background: linear-gradient(#2b5037, #173523);
  font-size: clamp(11px, .75vw, 14px);
}
.size-btn[aria-pressed="true"] {
  color: #3a2805;
  background: linear-gradient(#ffe383, #e9b737);
  box-shadow: 0 0 0 2px rgba(255,230,135,.18), 0 5px 14px rgba(0,0,0,.25);
}
.action-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.primary-btn,
.secondary-btn {
  min-height: 46px;
  border-radius: 14px;
  padding: 10px 14px;
}
.primary-btn { background: linear-gradient(#22ad63, #08753e); }
.secondary-btn { background: linear-gradient(#8c6d2d, #5f431d); }
button:focus-visible { outline: 3px solid #fff3a2; outline-offset: 3px; }

.metrics {
  display: grid;
  gap: 7px;
  padding-top: 4px;
}
.metric {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,240,188,.22);
  background: rgba(5,22,13,.38);
}
.metric strong {
  display: block;
  color: #fff7da;
  font-size: clamp(12px, .8vw, 15px);
  overflow-wrap: anywhere;
}
.metric__label { margin-bottom: 3px; }
.stage-note {
  margin: auto 0 0;
  padding: 12px 13px;
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: rgba(7, 24, 13, .38);
  color: rgba(255,248,222,.82);
  font-size: 12px;
  line-height: 1.42;
}

@media (orientation: portrait), (max-width: 860px) {
  .app-shell { gap: 7px; }
  .topbar { padding-block: 8px; }
  .quality-badge { display: none; }
  .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 78vw; }
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .control-panel {
    max-height: min(220px, 28dvh);
    padding: 9px 10px 10px;
    gap: 8px;
  }
  .control-row--sizes { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
  .control-label { margin: 0; }
  .grid-buttons { gap: 5px; }
  .size-btn { min-height: 34px; border-radius: 9px; }
  .action-row { grid-template-columns: 1fr 1fr; }
  .primary-btn, .secondary-btn { min-height: 38px; padding: 7px 9px; font-size: 12px; border-radius: 10px; }
  .metrics { display: none; }
  .stage-note { display: none; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .app-shell { padding-block: calc(var(--safe-top) + 5px) calc(var(--safe-bottom) + 5px); gap: 5px; }
  .topbar { min-height: 46px; padding: 5px 10px; }
  .stage-kicker, .subtitle, .quality-badge { display: none; }
  .title { font-size: 18px; }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(220px, 28vw); gap: 7px; }
  .control-panel { padding: 8px; gap: 7px; }
  .control-label, .metric__label { font-size: 9px; margin-bottom: 3px; }
  .size-btn { min-height: 30px; font-size: 10px; }
  .primary-btn, .secondary-btn { min-height: 34px; font-size: 11px; }
  .metrics { gap: 4px; }
  .metric { padding: 6px 8px; }
  .stage-note { display: none; }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  .topbar { max-width: 1800px; width: 100%; justify-self: center; }
  .workspace { width: min(96vw, 2500px); justify-self: center; grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); }
  .control-panel { padding: 24px; }
  .size-btn { min-height: 54px; font-size: 17px; }
  .primary-btn, .secondary-btn { min-height: 58px; font-size: 17px; }
  .metric strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ETAPA 2 --------------------------------------------------------------- */
.top-actions { display: flex; align-items: center; gap: 10px; }
.score-pill {
  min-width: 96px;
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,224,131,.64);
  background: linear-gradient(180deg, rgba(23,79,48,.92), rgba(10,49,30,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 7px 18px rgba(0,0,0,.24);
  color: #fff4c6;
  text-align: right;
}
.score-pill span { font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; opacity: .7; }
.score-pill strong { font-size: clamp(14px, 1.1vw, 20px); line-height: 1; }

.board-host { position: relative; }
.word-feedback {
  position: absolute;
  z-index: 20;
  top: clamp(5px, 1.2vh, 16px);
  left: 50%;
  min-width: min(82%, 390px);
  max-width: 90%;
  transform: translate(-50%, -16px) scale(.96);
  opacity: 0;
  pointer-events: none;
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,235,159,.85);
  background: rgba(23, 59, 36, .94);
  color: #fff9df;
  box-shadow: 0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
  text-align: center;
  font-weight: 1000;
  letter-spacing: .03em;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.word-feedback.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.word-feedback.is-correct { background: rgba(10, 116, 62, .95); }
.word-feedback.is-invalid { background: rgba(142, 37, 27, .95); border-color: rgba(255,172,135,.9); }
.word-feedback.is-repeated { background: rgba(119, 82, 22, .95); }

.objective-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(247,221,139,.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,45,25,.62), rgba(5,27,16,.48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.objective-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.objective-title {
  margin: 0;
  color: #fff1bf;
  font-size: clamp(16px, 1.2vw, 22px);
  line-height: 1.08;
}
.progress-orb {
  flex: 0 0 auto;
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(241,199,75,.8);
  color: #ffe890;
  background: radial-gradient(circle, #17603d, #0a3320 72%);
  box-shadow: inset 0 0 14px rgba(255,220,99,.12), 0 5px 14px rgba(0,0,0,.24);
  font-size: 12px;
}
.word-preview {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border-radius: 11px;
  border: 1px solid rgba(255,224,139,.28);
  background: rgba(255,241,190,.08);
  color: rgba(255,247,220,.55);
  font-weight: 1000;
  letter-spacing: .13em;
  font-size: clamp(15px, 1vw, 19px);
}
.word-preview.has-word { color: #ffe47e; background: rgba(255,212,65,.11); }
.target-words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.target-word {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,240,190,.16);
  background: rgba(7,31,18,.48);
  color: #f8e7b4;
  font-size: clamp(11px, .8vw, 14px);
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.target-word__status { color: #dfb941; font-weight: 1000; }
.target-word.is-found {
  color: #d9ffe7;
  background: rgba(20,129,68,.34);
  text-decoration: line-through;
  opacity: .68;
}
.target-word.is-found .target-word__status { color: #7ef3a7; }
.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.progress-track__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e1a92a, #ffe478 55%, #79e597);
  transition: width .28s ease;
}

.board__overlay[data-feedback="correct"] .board__path-glow,
.board__overlay[data-feedback="correct"] .board__path-core { stroke: #87ff9e; }
.board__overlay[data-feedback="invalid"] .board__path-glow,
.board__overlay[data-feedback="invalid"] .board__path-core { stroke: #ff7b68; }
.board__overlay[data-feedback="repeated"] .board__path-glow,
.board__overlay[data-feedback="repeated"] .board__path-core { stroke: #ffc45e; }
.tile.is-correct .tile__art { filter: drop-shadow(0 0 13px rgba(86,255,128,.9)) brightness(1.16) saturate(1.2); transform: scale(1.055); }
.tile.is-correct .tile__glyph { color: #185e28; text-shadow: 0 0 4px #efffe7, 0 0 14px rgba(84,255,128,.8); }
.tile.is-invalid { animation: wordteca-shake .26s ease both; }
.tile.is-invalid .tile__art { filter: drop-shadow(0 0 10px rgba(255,73,53,.8)) saturate(.9); }
.tile.is-repeated .tile__art { filter: drop-shadow(0 0 10px rgba(255,185,64,.8)) brightness(1.08); }
@keyframes wordteca-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

@media (orientation: portrait), (max-width: 860px) {
  .score-pill { min-width: 76px; padding: 5px 9px; }
  .control-panel { max-height: min(290px, 36dvh); }
  .objective-card { padding: 8px; gap: 7px; }
  .objective-title { font-size: 14px; }
  .progress-orb { width: 40px; font-size: 10px; }
  .word-preview { min-height: 31px; padding: 4px 7px; font-size: 13px; }
  .target-words { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .target-word { padding: 5px 6px; font-size: 10px; gap: 4px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .objective-card { padding: 7px; gap: 5px; }
  .objective-title { font-size: 13px; }
  .progress-orb { width: 36px; }
  .word-preview { min-height: 28px; font-size: 12px; }
  .target-words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .target-word { padding: 4px 6px; font-size: 9px; }
  .score-pill { display: none; }
}

/* ===== ETAPA 2 · validación y objetivos ===== */
.objective-card {
  border: 1px solid rgba(255, 231, 154, .34);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(250, 224, 157, .12), rgba(8, 31, 17, .36));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.objective-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.objective-card__kicker { margin-bottom:2px; }
.objective-card__title { color:#fff4c5; font-size:clamp(16px,1.15vw,22px); line-height:1.1; }
.objective-progress { flex:0 0 auto; min-width:48px; padding:6px 9px; border-radius:999px; text-align:center; color:#3a2704; background:linear-gradient(#ffe89c,#dca52b); border:1px solid rgba(255,242,180,.78); font-weight:1000; box-shadow:0 3px 10px rgba(0,0,0,.2); }
.current-word { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:7px 10px; border-radius:11px; border:1px solid rgba(255,236,175,.22); background:rgba(4,20,11,.42); }
.current-word__label { color:rgba(255,248,218,.67); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.current-word__value { color:#fff1a9; font-size:clamp(17px,1.3vw,24px); letter-spacing:.08em; text-shadow:0 0 10px rgba(255,216,98,.25); }
.feedback { min-height:28px; display:flex; align-items:center; padding:7px 9px; margin-top:8px; border-radius:10px; font-size:11px; font-weight:800; line-height:1.25; color:rgba(255,249,224,.75); background:rgba(9,29,17,.34); border:1px solid rgba(255,255,255,.08); }
.feedback[data-state="target"] { color:#f7ffe7; background:rgba(22,126,65,.46); border-color:rgba(124,255,164,.5); }
.feedback[data-state="extra"] { color:#e9f9ff; background:rgba(18,105,146,.45); border-color:rgba(109,217,255,.44); }
.feedback[data-state="invalid"], .feedback[data-state="duplicate"] { color:#fff0e9; background:rgba(154,51,37,.42); border-color:rgba(255,145,121,.45); }
.target-words { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:9px; }
.target-word { min-width:0; display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:10px; color:#f6edcf; background:rgba(38,51,34,.66); border:1px solid rgba(236,205,120,.23); font-size:clamp(11px,.78vw,14px); font-weight:900; letter-spacing:.04em; transition:transform .18s ease,background .18s ease,opacity .18s ease; }
.target-word__check { flex:0 0 auto; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:rgba(255,244,206,.68); font-size:13px; }
.target-word.is-found { color:#ddffe8; background:rgba(17,122,57,.58); border-color:rgba(112,255,157,.45); transform:scale(.985); }
.target-word.is-found .target-word__check { color:#173b21; background:#9df0b3; }
.tile.is-found .tile__art { filter:drop-shadow(0 5px 5px rgba(0,0,0,.28)) brightness(1.08) saturate(1.05); }
.tile.is-found::after { content:''; position:absolute; inset:8%; z-index:3; pointer-events:none; border-radius:20%; border:2px solid rgba(113,240,152,.56); box-shadow:inset 0 0 14px rgba(68,221,117,.2),0 0 8px rgba(68,221,117,.18); }
.board.is-result-target .board__path-glow { stroke:rgba(54,255,126,.46); filter:drop-shadow(0 0 10px rgba(70,255,136,.85)); }
.board.is-result-target .board__path-core { stroke:rgba(218,255,225,1); }
.board.is-result-extra .board__path-glow { stroke:rgba(65,204,255,.48); filter:drop-shadow(0 0 10px rgba(69,205,255,.82)); }
.board.is-result-extra .board__path-core { stroke:rgba(224,249,255,1); }
.board.is-result-invalid .board__path-glow, .board.is-result-duplicate .board__path-glow { stroke:rgba(255,73,58,.5); filter:drop-shadow(0 0 10px rgba(255,73,58,.85)); }
.board.is-result-invalid .board__path-core, .board.is-result-duplicate .board__path-core { stroke:rgba(255,228,222,1); }
.tile.is-selection-target .tile__art { animation:word-correct-pop .46s ease both; }
.tile.is-selection-extra .tile__art { animation:word-extra-pop .46s ease both; }
.tile.is-selection-invalid .tile__art { animation:word-error-shake .34s ease both; }
@keyframes word-correct-pop { 0%{transform:scale(1.04)} 45%{transform:scale(1.11);filter:brightness(1.2) saturate(1.18) drop-shadow(0 0 12px rgba(71,255,132,.52))} 100%{transform:scale(1.04)} }
@keyframes word-extra-pop { 0%{transform:scale(1.04)} 45%{transform:scale(1.09);filter:brightness(1.15) saturate(1.12) drop-shadow(0 0 11px rgba(75,210,255,.55))} 100%{transform:scale(1.04)} }
@keyframes word-error-shake { 0%,100%{transform:translateX(0) scale(1.02)} 25%{transform:translateX(-4%) scale(1.02)} 50%{transform:translateX(4%) scale(1.02)} 75%{transform:translateX(-2%) scale(1.02)} }
.level-complete { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:max(18px,var(--safe-top)) max(18px,var(--safe-right)) max(18px,var(--safe-bottom)) max(18px,var(--safe-left)); background:rgba(4,16,9,.66); backdrop-filter:blur(6px); opacity:0; transition:opacity .22s ease; }
.level-complete[hidden] { display:none; }
.level-complete.is-visible { opacity:1; }
.level-complete__card { width:min(92vw,480px); padding:clamp(22px,4vw,38px); border-radius:24px; text-align:center; transform:translateY(12px) scale(.97); transition:transform .25s ease; }
.level-complete.is-visible .level-complete__card { transform:translateY(0) scale(1); }
.level-complete__stars { color:#ffd65c; font-size:clamp(28px,5vw,52px); letter-spacing:.08em; text-shadow:0 4px 14px rgba(0,0,0,.36),0 0 20px rgba(255,205,64,.28); }
.level-complete__card h2 { margin:10px 0 8px; color:#fff0a8; font-size:clamp(24px,4vw,38px); }
.level-complete__card p { margin:0 0 18px; color:rgba(255,249,226,.82); line-height:1.5; }
.level-complete__card .primary-btn { width:100%; }
@media (orientation:portrait),(max-width:860px) {
  .objective-card{padding:8px}.objective-card__head{margin-bottom:6px}.objective-card__title{font-size:14px}.objective-progress{min-width:42px;padding:4px 7px;font-size:11px}.current-word{min-height:32px;padding:4px 7px}.current-word__value{font-size:16px}.feedback{min-height:24px;margin-top:5px;padding:5px 7px;font-size:10px}.target-words{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:5px}.target-word{justify-content:center;gap:3px;padding:5px 4px;font-size:9px}.target-word__check{width:14px;height:14px;font-size:10px}.control-panel{max-height:min(300px,36dvh)}
}
@media (orientation:landscape) and (max-height:620px) {
  .objective-card{padding:7px}.objective-card__head{margin-bottom:4px}.objective-card__title{font-size:13px}.objective-progress{min-width:40px;padding:3px 6px;font-size:10px}.current-word{min-height:28px;padding:3px 6px}.current-word__value{font-size:14px}.feedback{min-height:22px;margin-top:4px;padding:4px 6px;font-size:9px}.target-words{gap:3px;margin-top:4px}.target-word{padding:4px 5px;font-size:9px}
}

/* ETAPA 3 — MOBILE TOUCH + EXPLOSIÓN + GRAVEDAD ----------------------- */
html, body, .board-host, .board {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.board-host,
.board { touch-action: none; }

.touch-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(126,243,167,.55);
  background: rgba(10,92,53,.72);
  color: #d9ffe7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

.board.is-input-locked { cursor: wait; }
.board.is-input-locked .tile { pointer-events: none; }
.board.is-cascading { box-shadow: 0 28px 70px rgba(0,0,0,.5), inset 0 0 0 3px rgba(25,95,48,.65), inset 0 0 42px rgba(255,210,79,.12); }
.board.is-shuffling { box-shadow: 0 28px 70px rgba(0,0,0,.5), inset 0 0 0 3px rgba(25,95,48,.65), inset 0 0 48px rgba(110,196,255,.20); }

.tile.is-charged {
  z-index: 7;
  animation: wordCharge 90ms ease-out both;
}
.tile.is-charged .tile__art {
  filter: drop-shadow(0 0 10px rgba(255,231,121,.95)) brightness(1.24) saturate(1.18);
}
.tile.is-charged .tile__glyph {
  color: #4b1a06;
  text-shadow: 0 0 10px rgba(255,255,220,.95), 0 2px 0 #fff0a4;
}

.tile.is-exploding {
  z-index: 8;
  pointer-events: none;
  animation: tileExplode 360ms cubic-bezier(.15,.78,.22,1) both;
}
.tile.is-exploding .tile__art { animation: artExplode 360ms ease-out both; }
.tile.is-exploding .tile__glyph { animation: glyphExplode 330ms ease-out both; }

.tile.is-dropping {
  animation: tileDrop 390ms cubic-bezier(.19,.85,.22,1.05) var(--drop-delay, 0ms) both;
  z-index: 3;
}
.tile.is-new-tile { z-index: 4; }
.tile.is-new-tile .tile__art { filter: drop-shadow(0 8px 8px rgba(0,0,0,.32)) brightness(1.05); }
.tile.is-shuffled { animation: tileShuffle 520ms cubic-bezier(.17,.8,.2,1) both; z-index: 4; }
.tile.is-shuffled .tile__art { filter: drop-shadow(0 0 9px rgba(125,206,255,.7)) brightness(1.08); }
.tile.is-shuffled .tile__glyph { text-shadow: 0 0 10px rgba(196,236,255,.8), 0 2px 0 #f7d79e; }

.fx-burst {
  position: absolute;
  z-index: 12;
  width: 0;
  height: 0;
  pointer-events: none;
  animation: burstFlash 500ms ease-out var(--burst-delay, 0ms) both;
}
.fx-burst::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(28px, 5vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,220,.98) 0 12%, rgba(255,219,82,.9) 25%, rgba(255,164,24,.34) 54%, transparent 72%);
  filter: blur(.2px) drop-shadow(0 0 10px rgba(255,211,63,.75));
  animation: flashPop 420ms ease-out both;
}
.fx-particle {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, #f4d36d, #8b5a20);
  box-shadow: 0 0 5px rgba(255,217,88,.48);
  animation: particleFly 520ms cubic-bezier(.13,.7,.24,1) var(--burst-delay, 0ms) both;
}
.fx-particle.is-leaf {
  width: 9px;
  height: 6px;
  border-radius: 90% 0 90% 0;
  background: linear-gradient(135deg, #83df4e, #17843f);
  box-shadow: 0 0 4px rgba(80,211,79,.36);
}

.word-feedback.is-cascade {
  background: rgba(40,105,52,.96);
  border-color: rgba(255,223,112,.95);
  color: #fff0a4;
  text-shadow: 0 1px 7px rgba(0,0,0,.35);
}
.word-feedback.is-shuffle {
  background: rgba(22,72,118,.96);
  border-color: rgba(156,214,255,.94);
  color: #e6f6ff;
  text-shadow: 0 1px 7px rgba(0,0,0,.35);
}

@keyframes wordCharge {
  0% { transform: scale(1); }
  100% { transform: scale(1.09); }
}
@keyframes tileExplode {
  0% { transform: scale(1.08); opacity: 1; }
  34% { transform: scale(1.22) rotate(-1.5deg); opacity: 1; }
  100% { transform: scale(.18) rotate(7deg); opacity: 0; }
}
@keyframes artExplode {
  0% { filter: drop-shadow(0 0 13px rgba(255,228,92,.9)) brightness(1.3); }
  100% { filter: drop-shadow(0 0 2px transparent) brightness(1.05); }
}
@keyframes glyphExplode {
  0% { transform: scale(1.04); opacity: 1; }
  42% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(.4) rotate(14deg); opacity: 0; }
}
@keyframes tileDrop {
  0% { transform: translate3d(0, calc(var(--drop-rows) * -102%), 0) scale(.98); opacity: .15; }
  62% { transform: translate3d(0, 3%, 0) scale(1.01); opacity: 1; }
  82% { transform: translate3d(0, -1.5%, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes glyphMorph {
  0% { transform: translateY(-1%) scale(.68); opacity: .2; filter: blur(2px); }
  55% { transform: translateY(-1%) scale(1.14); opacity: 1; filter: blur(0); }
  100% { transform: translateY(-1%) scale(1); opacity: 1; }
}

@keyframes tileShuffle {
  0% { transform: scale(.92) rotate(-2deg); opacity: .35; }
  40% { transform: scale(1.06) rotate(1.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes burstFlash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes flashPop {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  24% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
@keyframes particleFly {
  0% { transform: translate(0,0) rotate(0deg) scale(.65); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.9); opacity: 0; }
}

@media (hover: none) and (pointer: coarse) {
  .board { --touch-ring: 1; }
  .tile.is-selected .tile__art { transform: scale(1.055); }
  .tile.is-head .tile__art { transform: scale(1.075); }
  .board__path-glow { stroke: rgba(255, 196, 52, .52); }
  .board__path-core { stroke: rgba(255, 250, 216, 1); }
  .word-preview { min-height: 42px; font-size: clamp(17px, 4.5vw, 22px); }
  .touch-badge { display: inline-flex; }
}

@media (max-width: 860px), (orientation: portrait) {
  .touch-badge { display: inline-flex; font-size: 9px; min-height: 24px; padding: 4px 7px; }
  .top-actions { gap: 6px; }
  .score-pill { min-width: 74px; padding: 6px 8px; }
}

@media (max-width: 520px) {
  .touch-badge { display: none; }
  .topbar { gap: 6px; }
  .board-host { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-exploding,
  .tile.is-dropping,
  .tile.is-charged,
  .fx-burst,
  .fx-particle,
  .fx-burst::before { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}


/* V0.3.2 TOUCH PRO ---------------------------------------------------- */
@media (pointer: coarse) {
  .board__path-glow { stroke: rgba(255, 203, 55, .58); }
  .board__path-core { stroke: rgba(255, 252, 222, 1); }
  .board__path-preview { stroke: rgba(255, 230, 135, .82); }
  .board__head-ring { stroke-width: 4; filter: drop-shadow(0 0 10px rgba(255, 208, 72, .9)); }
  .tile.is-selected .tile__art { transform: scale(1.055); }
  .tile.is-head .tile__art { transform: scale(1.085); }
}

@media (max-width: 560px) {
  .board__pointer { opacity: .76; }
  .touch-badge { font-size: 9px; padding-inline: 8px; }
}

/* V0.4.0 — COMBOS + CRAZY METER ------------------------------------- */
.combo-pill {
  min-width: 86px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 4px;
  align-items: center;
  gap: 2px 7px;
  padding: 6px 9px 5px;
  border-radius: 14px;
  border: 1px solid rgba(255,216,101,.44);
  background: linear-gradient(180deg, rgba(69,49,18,.86), rgba(31,24,10,.9));
  color: #ffe9a0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.22);
  opacity: .56;
  transform: scale(.97);
  transition: opacity .14s ease, transform .14s ease, border-color .14s ease;
}
.combo-pill[data-active="true"] {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255,230,132,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 18px rgba(255,190,50,.18), 0 6px 16px rgba(0,0,0,.22);
}
.combo-pill > span {
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .11em;
  opacity: .78;
}
.combo-pill > strong {
  justify-self: end;
  font-size: clamp(15px,1.1vw,21px);
  line-height: 1;
}
.combo-pill__timer {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
}
.combo-pill__timer b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#ffb52e,#ffe878,#fff5bd);
  box-shadow: 0 0 7px rgba(255,205,70,.55);
}
.combo-pill.is-pulsing { animation: comboPulse .34s cubic-bezier(.18,.86,.24,1.2); }

.crazy-hud {
  display: grid;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 11px;
  border: 1px solid rgba(255,215,95,.24);
  background: rgba(31,24,8,.42);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.crazy-hud__head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 7px;
}
.crazy-hud__head span {
  color: #ffd457;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
}
.crazy-hud__head strong {
  color: #fff0a7;
  font-size: 11px;
}
.crazy-hud__head em {
  justify-self: end;
  color: #fff8cb;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .06em;
}
.crazy-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
}
.crazy-track__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#d78a20,#ffd747 48%,#fff5a4 75%,#8dfff2);
  box-shadow: 0 0 9px rgba(255,212,57,.45);
  transition: width .12s linear;
}
.crazy-hud[data-active="true"] {
  border-color: rgba(255,241,142,.86);
  background: linear-gradient(180deg, rgba(124,71,10,.62), rgba(48,22,5,.62));
  box-shadow: inset 0 0 18px rgba(255,213,69,.14), 0 0 16px rgba(255,185,37,.16);
}
.crazy-hud[data-active="true"] .crazy-track__fill {
  background: linear-gradient(90deg,#fff18d,#ffb329,#ff6b3f,#ffe779);
  box-shadow: 0 0 12px rgba(255,193,54,.75);
}
.crazy-hud.is-ready { animation: crazyReady .7s ease both; }

.word-feedback.is-crazy {
  background: linear-gradient(180deg,rgba(148,75,7,.97),rgba(84,34,4,.98));
  color: #fff4b2;
  border-color: rgba(255,236,137,.98);
  box-shadow: 0 0 30px rgba(255,173,24,.32), 0 8px 24px rgba(0,0,0,.32);
}

.app-shell.is-crazy .board {
  border-color: rgba(255,229,113,.98);
  box-shadow:
    0 28px 70px rgba(0,0,0,.5),
    0 0 28px rgba(255,181,36,.26),
    inset 0 0 0 3px rgba(218,143,27,.65),
    inset 0 0 42px rgba(255,194,42,.18);
}
.app-shell.is-crazy .tile__art {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 5px rgba(255,210,74,.25)) brightness(1.04);
}
.app-shell.is-crazy .board__path-glow {
  stroke: rgba(255,135,44,.58);
  filter: drop-shadow(0 0 12px rgba(255,180,36,.95));
}
.app-shell.is-crazy .fx-burst::before {
  width: clamp(38px,6.4vw,82px);
  filter: drop-shadow(0 0 16px rgba(255,176,33,.95));
}
.app-shell.is-crazy .fx-particle {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 8px rgba(255,211,77,.82);
}

@keyframes comboPulse {
  0% { transform: scale(.95); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes crazyReady {
  0%,100% { transform: scale(1); }
  35% { transform: scale(1.035); box-shadow: 0 0 24px rgba(255,206,61,.45); }
}

@media (max-width: 860px), (orientation: portrait) {
  .combo-pill { min-width: 68px; padding: 5px 7px 4px; gap: 1px 4px; }
  .combo-pill > span { font-size: 7px; }
  .combo-pill > strong { font-size: 15px; }
  .crazy-hud { padding: 5px 7px; gap: 4px; }
  .crazy-track { height: 6px; }
  .crazy-hud__head span { font-size: 9px; }
  .crazy-hud__head strong { font-size: 10px; }
  .crazy-hud__head em { font-size: 8px; }
}

@media (max-width: 520px) {
  .combo-pill { min-width: 62px; border-radius: 11px; }
  .score-pill { min-width: 66px; }
  .icon-button { width: 36px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .combo-pill { min-width: 64px; padding: 4px 6px; }
  .combo-pill > span { font-size: 7px; }
  .combo-pill > strong { font-size: 14px; }
  .crazy-hud { padding: 4px 6px; }
  .crazy-track { height: 5px; }
}

/* ETAPA 5 — FICHAS ESPECIALES + POWER-UPS ---------------------------- */
.powerup-card {
  padding: 10px;
  border: 1px solid rgba(255,224,132,.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(31,66,43,.55), rgba(7,28,17,.48));
}
.powerup-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.powerup-card__head .control-label { margin: 0; }
.powerup-hint {
  color: rgba(255,248,218,.72);
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}
.powerup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
}
.powerup-btn {
  position: relative;
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(255,224,136,.55);
  border-radius: 12px;
  color: #fff5d0;
  background: linear-gradient(#2a573b,#153824);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}
.powerup-btn__icon { font-size: 18px; }
.powerup-btn b {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #ffe892;
  font-size: 10px;
}
.powerup-btn.is-armed {
  border-color: rgba(144,229,255,.95);
  background: linear-gradient(#2380a0,#15536c);
  box-shadow: 0 0 0 2px rgba(119,222,255,.18), 0 0 22px rgba(72,194,255,.28);
}
.powerup-btn:disabled { opacity: .42; cursor: default; filter: grayscale(.3); }
.special-legend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 7px;
}
.special-legend span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  color: #fff4c9;
  font-size: 12px;
  font-weight: 1000;
}

.tile[data-special]::before,
.tile[data-special]::after {
  pointer-events: none;
}
.tile[data-special="bomb"]::after,
.tile[data-special="multiplier"]::after,
.tile[data-special="wildcard"]::after,
.tile[data-special="frozen"]::after,
.tile[data-special="chained"]::after,
.tile[data-special="stone"]::after {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30%;
  aspect-ratio: 1;
  right: 7%;
  top: 6%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.64);
  color: white;
  font-size: clamp(8px, 1.5vw, 16px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  box-shadow: 0 2px 5px rgba(0,0,0,.28);
}
.tile[data-special="bomb"]::after { content: '💣'; background: rgba(146,44,28,.88); }
.tile[data-special="multiplier"]::after { content: '×2'; background: rgba(129,82,10,.92); color: #fff0a5; }
.tile[data-special="wildcard"]::after { content: '★'; background: rgba(92,47,143,.92); }
.tile[data-special="frozen"]::after { content: '❄'; background: rgba(46,139,183,.92); }
.tile[data-special="chained"]::after { content: '⛓'; background: rgba(76,70,62,.94); }
.tile[data-special="stone"]::after { content: '◆'; background: rgba(77,66,54,.95); color: #d8c8aa; }

.tile[data-special="bomb"] .tile__art {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 8px rgba(255,97,56,.38));
}
.tile[data-special="multiplier"] .tile__art {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 9px rgba(255,211,71,.42));
}
.tile[data-special="wildcard"] .tile__art {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 9px rgba(205,133,255,.48));
}
.tile[data-special="wildcard"] .tile__glyph { color: #6a2684; }
.tile[data-special="frozen"]::before {
  content: '';
  position: absolute;
  inset: 8%;
  z-index: 3;
  border-radius: 18%;
  border: 2px solid rgba(190,241,255,.7);
  background: linear-gradient(135deg, rgba(210,248,255,.28), rgba(74,171,225,.18));
  box-shadow: inset 0 0 12px rgba(206,248,255,.35), 0 0 9px rgba(104,205,255,.26);
}
.tile[data-special="frozen"][data-durability="1"]::before {
  background: linear-gradient(135deg, transparent 38%, rgba(255,255,255,.74) 40% 43%, transparent 45%), rgba(88,185,229,.16);
}
.tile[data-special="chained"]::before {
  content: '';
  position: absolute;
  inset: 11% 7%;
  z-index: 3;
  background:
    linear-gradient(45deg, transparent 43%, rgba(83,74,62,.9) 45% 53%, transparent 55%),
    linear-gradient(-45deg, transparent 43%, rgba(83,74,62,.9) 45% 53%, transparent 55%);
  filter: drop-shadow(0 1px 1px rgba(255,226,167,.25));
}
.tile[data-special="stone"]::before {
  content: '';
  position: absolute;
  inset: 3%;
  z-index: 3;
  border-radius: 18%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.11), transparent 30%), rgba(62,57,50,.55);
  box-shadow: inset 0 0 0 2px rgba(35,31,28,.45), inset 0 0 16px rgba(0,0,0,.4);
}
.tile[data-special="stone"][data-durability="1"]::before {
  background:
    linear-gradient(120deg, transparent 46%, rgba(21,18,15,.72) 48% 52%, transparent 54%),
    linear-gradient(35deg, transparent 50%, rgba(21,18,15,.62) 52% 55%, transparent 57%),
    rgba(62,57,50,.48);
}
.tile.is-locked-special { cursor: not-allowed; }
.tile.is-locked-special .tile__glyph { opacity: .68; }
.tile.is-blocked-tap { animation: blockedTap 260ms ease-out both; }
.board.is-powerup-targeting .tile {
  cursor: crosshair;
  filter: saturate(.92);
}
.board.is-powerup-targeting .tile:hover,
.board.is-powerup-targeting .tile.is-head {
  filter: brightness(1.12);
}
.word-feedback.is-power {
  background: rgba(43,89,126,.96);
  border-color: rgba(155,222,255,.92);
  color: #e8f8ff;
}
@keyframes blockedTap {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-5%); }
  65% { transform: translateX(5%); }
}

@media (max-width: 860px), (orientation: portrait) {
  .powerup-card { padding: 7px; border-radius: 12px; }
  .powerup-card__head { margin-bottom: 5px; }
  .powerup-hint { font-size: 8px; }
  .powerup-grid { gap: 4px; }
  .powerup-btn { min-height: 42px; padding: 5px 6px; border-radius: 9px; font-size: 8px; }
  .powerup-btn__icon { font-size: 15px; }
  .powerup-btn b { min-width: 17px; padding: 1px 4px; font-size: 8px; }
  .special-legend { margin-top: 5px; gap: 3px; }
  .special-legend span { min-height: 20px; font-size: 10px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .powerup-card { padding: 5px; }
  .powerup-card__head { display: none; }
  .powerup-btn { min-height: 34px; padding: 3px 5px; font-size: 8px; }
  .powerup-btn__icon { font-size: 13px; }
  .special-legend { display: none; }
}

/* ETAPA 5.0 — uso directo de assets aprobados ------------------------- */
.powerup-btn__icon--img {
  width: clamp(28px, 3.2vw, 42px);
  height: clamp(28px, 3.2vw, 42px);
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.28));
  pointer-events: none;
}
.special-legend span { overflow: hidden; padding: 1px; }
.special-legend span img {
  width: 100%;
  height: 100%;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  pointer-events: none;
}

/* Los assets ya contienen el símbolo: se eliminan insignias emoji duplicadas. */
.tile[data-special="bomb"]::after,
.tile[data-special="multiplier"]::after,
.tile[data-special="wildcard"]::after,
.tile[data-special="frozen"]::after,
.tile[data-special="chained"]::after,
.tile[data-special="stone"]::after { content: none !important; display: none !important; }

/* Los assets de hielo/cadena/piedra ya llevan su propio arte. */
.tile[data-special="frozen"]::before,
.tile[data-special="chained"]::before,
.tile[data-special="stone"]::before { content: none !important; display: none !important; }

.tile[data-special] .tile__art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.tile[data-special="frozen"] .tile__glyph,
.tile[data-special="chained"] .tile__glyph,
.tile[data-special="stone"] .tile__glyph {
  color: #4c2616;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.62);
}
.tile[data-special="frozen"] .tile__glyph { color: #194d67; }
.tile__glyph--chip {
  position: absolute;
  left: 8%;
  top: 8%;
  z-index: 6;
  min-width: 28%;
  height: 28%;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(35,25,14,.82);
  color: #fff7d7 !important;
  font-size: calc(var(--tile-font) * .42) !important;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.7) !important;
  transform: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.28);
}
.tile__glyph--hidden { opacity: 0 !important; }
.tile[data-special="bomb"] .tile__art { filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 8px rgba(255,97,56,.42)); }
.tile[data-special="multiplier"] .tile__art { filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 9px rgba(255,211,71,.5)); }
.tile[data-special="wildcard"] .tile__art { filter: drop-shadow(0 5px 5px rgba(0,0,0,.28)) drop-shadow(0 0 9px rgba(205,133,255,.42)); }
.tile[data-special="frozen"][data-durability="1"] .tile__art,
.tile[data-special="stone"][data-durability="1"] .tile__art { filter: brightness(.91) contrast(1.08) drop-shadow(0 4px 5px rgba(0,0,0,.3)); }

@media (max-width: 860px), (orientation: portrait) {
  .powerup-btn__icon--img { width: 30px; height: 30px; }
  .special-legend span img { max-width: 27px; max-height: 27px; }
}

/* ETAPA 6 — NIVELES, OBJETIVOS, MOVIMIENTOS Y TIEMPO ------------------ */
.board-host { position: relative; }

.level-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255,224,131,.64);
  border-radius: 12px;
  background: rgba(25,60,37,.78);
  color: #fff2bd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  white-space: nowrap;
}
.level-pill span { font-size: 8px; font-weight: 900; letter-spacing: .12em; opacity: .72; }
.level-pill strong { font-size: 17px; line-height: 1; color: #ffe174; }

.level-card {
  padding: 10px;
  border: 1px solid rgba(255,224,136,.34);
  border-radius: 15px;
  background: rgba(7,27,16,.36);
}
.level-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.level-name {
  display: block;
  color: #fff4c9;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.1;
}
.level-number {
  width: 34px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255,224,123,.7);
  background: linear-gradient(#7c5a1a,#49300d);
  color: #ffeaa4;
  font-weight: 1000;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.2);
}
.level-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 4px;
}
.level-btn {
  min-width: 0;
  min-height: 42px;
  padding: 4px 2px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid rgba(255,235,172,.3);
  border-radius: 9px;
  color: #e7f4df;
  background: linear-gradient(#294836,#173124);
  cursor: pointer;
  font-weight: 900;
}
.level-btn span { font-size: 13px; line-height: 1; }
.level-btn small { font-size: 7px; opacity: .65; }
.level-btn[aria-pressed="true"] {
  color: #382505;
  border-color: rgba(255,235,153,.9);
  background: linear-gradient(#ffe58b,#dca92d);
  box-shadow: 0 0 0 2px rgba(255,226,119,.13), 0 4px 12px rgba(0,0,0,.25);
}
.level-description {
  margin: 7px 0 0;
  color: rgba(255,246,215,.72);
  font-size: 10px;
  line-height: 1.35;
}
.limit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}
.limit-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.17);
}
.limit-box span { color: rgba(255,248,218,.68); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.limit-box strong { color: #fff1b1; font-size: 14px; }
.limit-box.is-low {
  border-color: rgba(255,126,96,.72);
  background: rgba(112,34,24,.34);
  animation: limitPulse .9s ease-in-out infinite alternate;
}

.objective-list {
  display: grid;
  gap: 4px;
  margin-bottom: 7px;
}
.objective-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(0,0,0,.16);
  color: rgba(255,248,224,.82);
  font-size: 9px;
}
.objective-row i { font-style: normal; color: #d5bf7c; font-size: 13px; }
.objective-row strong { color: #fff1b2; font-size: 10px; }
.objective-row.is-complete {
  border-color: rgba(92,217,124,.32);
  background: rgba(20,108,52,.22);
}
.objective-row.is-complete i,
.objective-row.is-complete strong { color: #a8f3b5; }

.level-end[hidden] { display: none !important; }
.level-end {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3,14,8,.56);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: endFadeIn .25s ease-out both;
}
.level-end__panel {
  width: min(92%, 430px);
  padding: clamp(18px, 3vw, 30px);
  border-radius: 24px;
  text-align: center;
}
.level-end__panel h2 {
  margin: 5px 0 4px;
  color: #fff3bf;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,.38);
}
.level-end[data-status="lost"] .level-end__panel h2 { color: #ffd0bd; }
.level-end__stars {
  margin: 10px 0;
  color: #ffd750;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: .08em;
  text-shadow: 0 2px 10px rgba(255,193,30,.28);
}
.level-end__panel p {
  margin: 0 0 15px;
  color: rgba(255,248,224,.8);
  font-size: 13px;
}
.level-end__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.level-end__actions button:disabled { opacity: .42; cursor: default; }

@keyframes limitPulse {
  from { box-shadow: inset 0 0 0 rgba(255,83,51,0); }
  to { box-shadow: inset 0 0 15px rgba(255,83,51,.15); }
}
@keyframes endFadeIn {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 860px), (orientation: portrait) {
  .level-pill { min-height: 28px; padding: 4px 7px; border-radius: 9px; }
  .level-pill span { font-size: 6px; }
  .level-pill strong { font-size: 14px; }
  .control-panel { max-height: min(330px, 38dvh); }
  .level-card { padding: 7px; border-radius: 12px; }
  .level-card__head { margin-bottom: 5px; }
  .level-name { font-size: 12px; }
  .level-number { width: 27px; font-size: 11px; }
  .level-buttons { gap: 3px; }
  .level-btn { min-height: 32px; padding: 3px 1px; border-radius: 7px; }
  .level-btn span { font-size: 11px; }
  .level-btn small { font-size: 6px; }
  .level-description { display: none; }
  .limit-grid { margin-top: 5px; gap: 4px; }
  .limit-box { padding: 5px 6px; border-radius: 8px; }
  .limit-box span { font-size: 7px; }
  .limit-box strong { font-size: 11px; }
  .objective-list { gap: 3px; margin-bottom: 5px; }
  .objective-row { grid-template-columns: 14px 1fr auto; gap: 4px; padding: 3px 5px; font-size: 8px; border-radius: 7px; }
  .objective-row i { font-size: 10px; }
  .objective-row strong { font-size: 8px; }
  .level-end { padding: 12px; }
  .level-end__panel { width: min(94%, 360px); padding: 18px 14px; border-radius: 19px; }
  .level-end__actions button { min-height: 42px; font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .level-pill { display: none; }
  .level-card { padding: 5px; }
  .level-card__head { margin-bottom: 3px; }
  .level-card__head .control-label, .level-description { display: none; }
  .level-name { font-size: 11px; }
  .level-number { width: 24px; font-size: 10px; }
  .level-btn { min-height: 27px; }
  .level-btn small { display: none; }
  .limit-grid { margin-top: 3px; }
  .limit-box { padding: 3px 5px; }
  .objective-list { gap: 2px; margin-bottom: 3px; }
  .objective-row { padding: 2px 4px; font-size: 7px; }
  .level-end__panel { max-width: 360px; padding: 14px; }
  .level-end__stars { margin: 6px 0; }
}

/* ETAPA 7 — PROGRESO, MAPA Y DESBLOQUEOS ----------------------------- */
.map-button,
.stars-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  white-space: nowrap;
}
.map-button {
  padding: 6px 10px;
  border: 1px solid rgba(173,227,172,.56);
  background: linear-gradient(#236447,#133d2c);
  color: #e9ffe9;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.18);
}
.map-button span { font-size: 15px; }
.map-button b { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.stars-pill {
  padding: 5px 9px;
  border: 1px solid rgba(255,218,83,.66);
  background: rgba(77,55,10,.78);
  color: #ffe88b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.stars-pill span { color: #ffd847; font-size: 16px; text-shadow: 0 0 8px rgba(255,208,50,.34); }
.stars-pill strong { font-size: 12px; }

.level-btn.is-locked {
  opacity: .48;
  filter: grayscale(.72);
  cursor: default;
}
.level-btn.is-completed:not([aria-pressed="true"]) {
  border-color: rgba(255,212,78,.52);
  background: linear-gradient(#3b5433,#25331f);
}
.level-btn.is-completed small { color: #ffd857; opacity: 1; letter-spacing: -.04em; }

.world-map[hidden] { display: none !important; }
.world-map {
  position: absolute;
  inset: 0;
  z-index: 35;
  padding: clamp(8px, 1.4vw, 18px);
  display: grid;
  place-items: stretch;
  background:
    radial-gradient(circle at 50% 48%, rgba(32,103,54,.18), rgba(3,17,9,.74) 82%),
    rgba(3,15,8,.48);
  backdrop-filter: blur(6px) saturate(1.04);
  -webkit-backdrop-filter: blur(6px) saturate(1.04);
  animation: mapEnter .24s ease-out both;
}
.world-map__shell {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: clamp(6px, 1vh, 12px);
  padding: clamp(10px, 1.6vw, 20px);
  border: 2px solid rgba(224,190,96,.7);
  border-radius: clamp(18px, 2.2vw, 30px);
  background:
    linear-gradient(180deg, rgba(33,71,42,.91), rgba(11,38,22,.93)),
    rgba(15,47,26,.9);
  box-shadow: 0 26px 65px rgba(0,0,0,.48), inset 0 0 0 3px rgba(31,112,58,.34), inset 0 0 38px rgba(0,0,0,.28);
}
.world-map__header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 12px;
}
.world-map__header h2 {
  margin: 2px 0 3px;
  color: #fff1b7;
  font-size: clamp(20px, 2.6vw, 38px);
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,.34);
}
.world-map__header p {
  margin: 0;
  max-width: 650px;
  color: rgba(249,251,224,.72);
  font-size: clamp(9px, .9vw, 13px);
}
.map-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px,1fr));
  gap: 6px;
}
.map-progress > div {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,231,153,.25);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
  text-align: center;
}
.map-progress span { display:block; color: rgba(255,246,210,.62); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.map-progress strong { display:block; margin-top:2px; color:#ffe174; font-size:14px; }

.map-path {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(255,235,167,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 82%, rgba(69,155,69,.22), transparent 20%),
    radial-gradient(circle at 78% 22%, rgba(236,189,70,.08), transparent 24%),
    linear-gradient(180deg, rgba(36,88,47,.18), rgba(4,25,13,.28));
}
.map-path::before,
.map-path::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: .34;
}
.map-path::before { inset: auto -8% -24% -8%; height: 48%; background: radial-gradient(ellipse, rgba(47,126,56,.58), transparent 68%); }
.map-path::after { width: 42%; aspect-ratio: 1; right: -10%; top: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,207,86,.14), transparent 68%); }
.map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.map-route__line {
  fill: none;
  stroke: rgba(226,197,112,.46);
  stroke-width: 1.3;
  stroke-dasharray: 2.6 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.map-node {
  position: absolute;
  z-index: 3;
  width: clamp(64px, 8vw, 96px);
  min-height: clamp(60px, 7vw, 88px);
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 6px;
  border: 2px solid rgba(255,221,112,.7);
  border-radius: 50% 50% 46% 46%;
  color: #fff5c9;
  background:
    radial-gradient(circle at 50% 28%, rgba(69,152,80,.9), rgba(19,72,38,.98) 65%),
    #1d6437;
  box-shadow: 0 9px 18px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,255,255,.13), 0 0 0 3px rgba(45,104,48,.18);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.map-node:not(:disabled):active { transform: translate(-50%,-50%) scale(.94); }
.map-node__number {
  display: grid;
  place-items: center;
  width: clamp(27px, 3vw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(#ffdf73,#bd8120);
  color: #4a2b05;
  font-size: clamp(13px, 1.4vw, 19px);
  font-weight: 1000;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 7px rgba(0,0,0,.24);
}
.map-node strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(7px, .7vw, 10px);
}
.map-node small { color: #ffd95b; font-size: clamp(7px, .65vw, 10px); letter-spacing: -.04em; }
.map-node.is-current {
  box-shadow: 0 10px 22px rgba(0,0,0,.36), inset 0 2px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(255,219,92,.22), 0 0 22px rgba(255,201,57,.25);
  animation: mapCurrentPulse 1.25s ease-in-out infinite alternate;
}
.map-node.is-completed { background: radial-gradient(circle at 50% 28%, rgba(88,145,58,.92), rgba(49,81,26,.98) 67%); }
.map-node.is-locked {
  opacity: .58;
  filter: grayscale(.82) brightness(.68);
  border-color: rgba(205,205,188,.34);
  cursor: default;
}
.map-node.is-locked .map-node__number { background: linear-gradient(#6b766d,#39423c); color: #eef1e9; }
.map-node.is-locked small { color: rgba(255,255,255,.52); }

.world-map__footer {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 8px;
}
.world-map__footer button { min-height: 42px; }
.map-reset-btn { min-width: 150px; }
.level-end__actions--three { grid-template-columns: repeat(3, minmax(0,1fr)); }

@keyframes mapEnter {
  from { opacity:0; transform: scale(.985); }
  to { opacity:1; transform: scale(1); }
}
@keyframes mapCurrentPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.13); }
}

@media (max-width: 860px), (orientation: portrait) {
  .map-button { min-height: 28px; padding: 4px 7px; border-radius: 9px; }
  .map-button b { display: none; }
  .map-button span { font-size: 14px; }
  .stars-pill { min-height: 28px; padding: 4px 7px; border-radius: 9px; }
  .stars-pill span { font-size: 13px; }
  .stars-pill strong { font-size: 9px; }
  .world-map { padding: 5px; }
  .world-map__shell { padding: 8px; border-radius: 18px; gap: 6px; }
  .world-map__header { grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
  .world-map__header h2 { font-size: 19px; }
  .world-map__header p { font-size: 8px; max-width: 45vw; }
  .map-progress { grid-template-columns: 1fr; gap: 3px; }
  .map-progress > div { padding: 3px 6px; border-radius: 7px; }
  .map-progress span { font-size: 5px; }
  .map-progress strong { font-size: 10px; }
  .map-path { min-height: 210px; border-radius: 13px; }
  .map-node { width: clamp(54px, 17vw, 72px); min-height: clamp(52px, 16vw, 68px); padding: 4px; }
  .map-node__number { width: 25px; font-size: 12px; }
  .map-node strong { font-size: 7px; }
  .map-node small { font-size: 7px; }
  .world-map__footer { grid-template-columns: 1fr auto; gap: 5px; }
  .world-map__footer button { min-height: 36px; font-size: 10px; padding: 6px 9px; }
  .map-reset-btn { min-width: 0; }
  .level-end__actions--three { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .stars-pill { min-height: 26px; padding: 3px 6px; }
  .stars-pill span { font-size: 12px; }
  .stars-pill strong { font-size: 9px; }
  .map-button { min-height: 26px; padding: 3px 6px; }
  .world-map { padding: 4px; }
  .world-map__shell { padding: 6px; gap: 4px; border-radius: 14px; }
  .world-map__header h2 { font-size: 16px; }
  .world-map__header p { display:none; }
  .map-progress > div { padding: 2px 5px; }
  .map-path { min-height: 170px; }
  .map-node { width: 56px; min-height: 50px; padding: 3px; }
  .map-node__number { width: 22px; font-size: 10px; }
  .map-node strong { font-size: 6px; }
  .map-node small { font-size: 6px; }
  .world-map__footer button { min-height: 31px; font-size: 9px; padding: 4px 8px; }
  .level-end__actions--three { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 520px) {
  .level-pill { display: none; }
  .combo-pill[data-active="false"] { display: none; }
  .combo-pill { min-width: 64px; padding: 4px 6px; }
  .score-pill { min-width: 58px; padding: 5px 6px; }
  .score-pill span { font-size: 7px; }
  .score-pill strong { font-size: 13px; }
  .top-actions { gap: 4px; }
}

/* ETAPA 8 — MUNDOS, COFRES Y ECONOMÍA -------------------------------- */
.wallet-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 12px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.wallet-pill span { font-size: 14px; }
.wallet-pill strong { font-size: 11px; }
.wallet-pill--coins { color:#ffe691; background:rgba(91,63,14,.78); border-color:rgba(245,200,74,.55); }
.wallet-pill--gems { color:#dffaff; background:rgba(10,74,93,.76); border-color:rgba(94,215,240,.52); }

.world-map__shell {
  grid-template-rows: auto auto auto minmax(185px,1fr) auto auto auto auto;
  overflow: auto;
  overscroll-behavior: contain;
}
.world-strip {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr);
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 5px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.world-card {
  --world-card-bg: none;
  position: relative;
  isolation: isolate;
  min-height: 72px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 2px 6px;
  padding: 7px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,224,135,.38);
  color: #fff5cf;
  background: rgba(8,28,17,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 12px rgba(0,0,0,.18);
  cursor: pointer;
  text-align: left;
  scroll-snap-align: start;
}
.world-card::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background-image: var(--world-card-bg);
  background-size: cover;
  background-position:center;
  filter:saturate(.95) brightness(.58);
}
.world-card::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(3,18,11,.82), rgba(3,18,11,.30));
}
.world-card__num {
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:30px;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(#ffe183,#bd8126);
  color:#422a07;
  font-weight:1000;
  font-size:13px;
}
.world-card strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.world-card small { color:#ffe390; font-size:8px; font-weight:800; }
.world-card.is-selected { border-color:#ffe27a; box-shadow:0 0 0 2px rgba(255,221,99,.18), 0 0 18px rgba(255,200,54,.2); transform:translateY(-1px); }
.world-card.is-locked:not(.is-coming) { opacity:.68; filter:saturate(.62); }
.world-card.is-coming { opacity:.52; filter:grayscale(.6); cursor:default; }
.world-card.is-complete::after { background:linear-gradient(90deg, rgba(24,77,38,.76), rgba(14,40,24,.30)); }

.world-status {
  min-height: 20px;
  display:flex;
  align-items:center;
  padding:3px 8px;
  border-radius:8px;
  border:1px solid rgba(255,235,178,.16);
  background:rgba(0,0,0,.16);
  color:rgba(255,245,211,.78);
  font-size:9px;
  font-weight:800;
}

.map-path {
  background-image:
    linear-gradient(180deg, rgba(4,18,11,.20), rgba(4,18,11,.46)),
    var(--world-bg);
  background-size: cover;
  background-position:center;
}
.map-path::before { opacity:.22; }
.map-locked-message {
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:20px;
  text-align:center;
  background:rgba(4,17,11,.5);
  backdrop-filter:blur(2px);
  color:#fff0bc;
}
.map-locked-message span { font-size:40px; }
.map-locked-message strong { max-width:420px; font-size:14px; }

.chest-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.chest-card {
  min-height:48px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:1px 8px;
  padding:6px 9px;
  border-radius:12px;
  border:1px solid rgba(255,218,99,.32);
  color:#fff0b9;
  background:linear-gradient(#4e4325,#2e2818);
  cursor:pointer;
  text-align:left;
}
.chest-card > span { grid-row:1 / span 2; font-size:26px; }
.chest-card strong { font-size:10px; }
.chest-card small { font-size:8px; color:rgba(255,241,193,.68); }
.chest-card:disabled { cursor:default; opacity:.58; filter:grayscale(.45); }
.chest-card.is-ready { border-color:#ffe06e; box-shadow:0 0 16px rgba(255,202,49,.22); animation:chestReady 1s ease-in-out infinite alternate; }
.chest-card.is-claimed { background:linear-gradient(#304537,#1b2c22); }
@keyframes chestReady { from{filter:brightness(1)} to{filter:brightness(1.14)} }

.economy-shop {
  display:grid;
  gap:6px;
  padding:7px;
  border:1px solid rgba(132,222,191,.20);
  border-radius:12px;
  background:rgba(3,24,17,.32);
}
.economy-shop__head { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#e7fff3; }
.economy-shop__head strong { font-size:10px; letter-spacing:.04em; }
.economy-shop__head span { color:#ffe58b; font-size:9px; font-weight:900; white-space:nowrap; }
.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.shop-item {
  position:relative;
  min-height:52px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:1px 6px;
  padding:6px 28px 6px 7px;
  border:1px solid rgba(255,231,160,.25);
  border-radius:10px;
  color:#fff4d3;
  background:linear-gradient(#294c38,#163326);
  cursor:pointer;
  text-align:left;
}
.shop-item > span { grid-row:1 / span 2; font-size:22px; }
.shop-item strong { font-size:9px; }
.shop-item small { color:#ffd871; font-size:8px; }
.shop-item > b { position:absolute; right:7px; top:50%; transform:translateY(-50%); min-width:18px; text-align:center; padding:2px 4px; border-radius:999px; background:rgba(0,0,0,.28); color:#bdf7d0; font-size:9px; }
.shop-item:active { transform:scale(.98); }

.level-reward {
  margin:8px auto 3px;
  max-width:420px;
  padding:8px 10px;
  border:1px solid rgba(255,222,94,.45);
  border-radius:10px;
  background:rgba(103,73,13,.26);
  color:#ffe887;
  font-size:11px;
  font-weight:900;
}
.level-reward[hidden] { display:none !important; }

@media (max-width: 860px), (orientation: portrait) {
  .wallet-pill { min-height:28px; padding:4px 6px; border-radius:9px; }
  .wallet-pill span { font-size:11px; }
  .wallet-pill strong { font-size:8px; }
  .world-map__shell { grid-template-rows:auto auto auto minmax(180px,1fr) auto auto auto auto; }
  .world-strip { grid-auto-columns:minmax(110px,36vw); gap:5px; }
  .world-card { min-height:60px; padding:5px 6px; border-radius:10px; }
  .world-card__num { width:24px; font-size:10px; }
  .world-card strong { font-size:8px; }
  .world-card small { font-size:7px; }
  .world-status { font-size:7px; min-height:16px; }
  .chest-card { min-height:42px; padding:5px 6px; }
  .chest-card > span { font-size:20px; }
  .chest-card strong { font-size:8px; }
  .chest-card small { font-size:7px; }
  .economy-shop { padding:5px; gap:4px; }
  .economy-shop__head strong { font-size:8px; }
  .economy-shop__head span { font-size:7px; }
  .shop-grid { gap:4px; }
  .shop-item { min-height:44px; padding:4px 22px 4px 5px; gap:1px 4px; }
  .shop-item > span { font-size:17px; }
  .shop-item strong { font-size:7px; }
  .shop-item small { font-size:6px; }
  .shop-item > b { right:4px; font-size:7px; }
}

@media (max-width: 520px) {
  .wallet-pill--gems { display:none; }
  .world-map__header p { display:none; }
  .world-map__shell { grid-template-rows:auto auto auto minmax(176px,1fr) auto auto auto auto; }
  .map-path { min-height:176px; }
  .chest-row { gap:4px; }
  .shop-item > span { display:none; }
  .shop-item { grid-template-columns:1fr; padding-left:5px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .wallet-pill { min-height:26px; padding:3px 5px; }
  .wallet-pill span { font-size:10px; }
  .wallet-pill strong { font-size:8px; }
  .world-map__shell { grid-template-rows:auto auto auto minmax(150px,1fr) auto auto auto auto; }
  .world-strip { grid-auto-columns:minmax(105px,18vw); }
  .world-card { min-height:48px; padding:4px 5px; }
  .world-card__num { width:21px; font-size:9px; }
  .world-card strong { font-size:7px; }
  .world-card small { font-size:6px; }
  .world-status { min-height:14px; font-size:6px; padding:2px 5px; }
  .map-path { min-height:150px; }
  .chest-card { min-height:35px; padding:3px 5px; }
  .chest-card > span { font-size:16px; }
  .economy-shop { padding:4px; gap:3px; }
  .shop-item { min-height:36px; padding-block:3px; }
}

/* ETAPA 8.1 — tutorial NPC + pista automática ------------------------ */
.board__hint-glow,
.board__hint-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.board__hint-glow {
  stroke: rgba(70, 255, 136, 0.34);
  filter: drop-shadow(0 0 12px rgba(72, 255, 149, 0.92));
}
.board__hint-core {
  stroke: rgba(202, 255, 220, 0.98);
  filter: drop-shadow(0 0 5px rgba(119, 255, 174, 0.98));
}
.board__hint-start,
.board__hint-end {
  fill: rgba(183, 255, 206, 0.94);
  stroke: rgba(23, 106, 48, 0.96);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(90, 255, 160, 0.85));
}
.tile.is-hinted .tile__art {
  filter: drop-shadow(0 0 10px rgba(75,255,147,.56)) brightness(1.08) saturate(1.08);
}
.tile.is-hinted .tile__glyph {
  color: #245f24;
  text-shadow: 0 0 1px #f7fff8, 0 0 12px rgba(121,255,165,.62), 0 1px 0 #efffe8;
}
.word-feedback.is-hint {
  background: rgba(20, 112, 54, .96);
  border-color: rgba(148, 255, 184, .95);
  color: #effff3;
}

.npc-tutorial[hidden] { display: none !important; }
.npc-tutorial {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 24px);
}
.npc-tutorial__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 16, 10, .58);
  backdrop-filter: blur(6px);
}
.npc-tutorial__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 540px);
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 24px;
  border: 1px solid rgba(254, 227, 149, .58);
  background: linear-gradient(180deg, rgba(18,48,31,.94), rgba(8,25,16,.96));
  box-shadow: 0 22px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.npc-tutorial__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.npc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.npc-card__avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: radial-gradient(circle at 35% 30%, rgba(250,239,149,.98), rgba(233,188,63,.95) 52%, rgba(28,86,44,.95) 100%);
  color: #15341e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 18px rgba(0,0,0,.22);
}
.npc-card__meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.npc-card__meta strong {
  color: #fff3c2;
  font-size: clamp(17px, 2vw, 20px);
}
.npc-card__meta span,
.npc-tutorial__page {
  color: rgba(255,243,202,.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.npc-tutorial__title {
  margin: 0;
  color: #fff0ad;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.05;
}
.npc-tutorial__body {
  margin: 0;
  color: #fff9e4;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.5;
}
.npc-tutorial__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 860px), (orientation: portrait) {
  .npc-tutorial { padding: 12px; }
  .npc-tutorial__panel { width: min(94vw, 520px); gap: 12px; border-radius: 20px; }
  .npc-card__avatar { width: 52px; height: 52px; border-radius: 16px; font-size: 24px; }
  .npc-tutorial__actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ETAPA 9 — perfil, vidas, premio diario, idioma y audio ------------- */
.lives-pill {
  min-height: 34px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 5px;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,143,151,.48);
  background: rgba(87,24,33,.76);
  color: #ffe9eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.lives-pill > span { grid-row: 1 / 3; font-size: 14px; }
.lives-pill strong { font-size: 11px; line-height: 1; }
.lives-pill small { font-size: 7px; line-height: 1; opacity: .76; white-space: nowrap; }
.lives-pill.is-empty { border-color: rgba(255,88,88,.84); animation: livesPulse 1.2s ease-in-out infinite; }

.icon-button--compact { width: clamp(34px, 2.7vw, 44px); font-size: clamp(16px, 1.1vw, 21px); }
.language-select,
.settings-card select {
  min-height: 34px;
  border: 1px solid rgba(255,225,140,.52);
  border-radius: 10px;
  background: rgba(17,54,35,.9);
  color: #fff2bf;
  font-weight: 900;
  outline: none;
  padding: 4px 7px;
}
.language-select { width: 55px; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.meta-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(238,218,147,.24);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(15,52,34,.82), rgba(6,28,17,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.meta-card__head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fff0b2; }
.meta-card__head strong { font-size: 11px; letter-spacing: .04em; }
.meta-card__button { min-height: 34px; padding: 6px 9px; border-radius: 9px; font-size: 10px; }
.profile-card__main { display:flex; align-items:center; gap:9px; }
.profile-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a0, #dca738 52%, #245f3a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.2);
  font-size: 20px;
}
.profile-card__main > div:last-child { min-width:0; display:grid; gap:2px; }
.profile-card__main strong { color:#fff6d4; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-card__main small { color:rgba(231,255,239,.72); font-size:8px; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.profile-stats span { min-width:0; padding:5px 3px; border-radius:8px; background:rgba(0,0,0,.18); color:#dff7e7; font-size:8px; text-align:center; white-space:nowrap; }
.profile-stats b { color:#ffe27d; }

.daily-card__streak { display:flex; justify-content:space-between; align-items:center; color:#e4f9eb; font-size:9px; }
.daily-card__streak strong { color:#ffe27d; font-size:17px; }
.daily-reward-preview {
  min-height: 39px;
  display:grid;
  place-items:center;
  padding:6px;
  border-radius:10px;
  background:rgba(92,65,13,.35);
  border:1px solid rgba(249,209,76,.28);
  color:#ffedac;
  font-size:9px;
  font-weight:900;
  text-align:center;
}
.daily-card .primary-btn:disabled { opacity:.5; cursor:default; filter:saturate(.45); }

.settings-card label { display:grid; gap:4px; color:#dff7e7; font-size:9px; font-weight:800; }
.settings-card select { width:100%; min-height:31px; font-size:10px; }
.lives-card { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:7px; border-radius:10px; background:rgba(92,24,33,.32); color:#ffe9eb; }
.lives-card span { font-size:9px; font-weight:800; }
.lives-card strong { font-size:12px; }
.lives-card small { grid-column:1 / -1; font-size:8px; opacity:.75; }

@keyframes livesPulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 rgba(255,80,80,0); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(255,80,80,.42); }
}

@media (max-width: 860px), (orientation: portrait) {
  .meta-grid { grid-template-columns: 1fr; gap:5px; }
  .meta-card { grid-template-columns: minmax(0,1fr); gap:5px; padding:7px; border-radius:11px; }
  .profile-card__main { gap:7px; }
  .profile-avatar { width:34px; height:34px; font-size:16px; }
  .profile-stats { gap:3px; }
  .meta-card__button { min-height:30px; font-size:9px; }
  .language-select { min-height:30px; width:48px; padding:3px 5px; font-size:9px; }
  .lives-pill { min-height:30px; padding:3px 6px; border-radius:9px; }
  .lives-pill small { display:none; }
  .lives-pill > span { grid-row:auto; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .meta-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap:4px; }
  .meta-card { padding:5px; gap:4px; border-radius:9px; }
  .meta-card__head strong { font-size:8px; }
  .profile-avatar { width:28px; height:28px; font-size:13px; }
  .profile-card__main strong { font-size:9px; }
  .profile-card__main small, .profile-stats span, .daily-card__streak, .daily-reward-preview, .settings-card label, .lives-card span, .lives-card small { font-size:7px; }
  .meta-card__button { min-height:25px; padding:3px 5px; font-size:7px; }
  .daily-reward-preview { min-height:27px; padding:3px; }
  .settings-card select { min-height:24px; font-size:8px; }
  .lives-card { padding:4px; }
  .lives-pill { min-height:26px; padding:3px 5px; }
  .language-select { min-height:26px; width:43px; font-size:8px; }
}

/* ETAPA 10 / V1.0 — modos, misiones, logros, accesibilidad ----------- */
.stage10-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.mode-grid button {
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  text-align: left;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid rgba(255,230,155,.24);
  background: rgba(8,36,22,.56);
  color: #fff4ca;
  cursor: pointer;
}
.mode-grid button > span { grid-row: 1 / 3; font-size: 22px; }
.mode-grid button strong { font-size: 12px; }
.mode-grid button small { color: rgba(255,247,218,.65); font-size: 9px; line-height: 1.25; }
.mode-grid button.is-active {
  border-color: rgba(121,255,171,.9);
  background: linear-gradient(180deg, rgba(24,111,60,.9), rgba(10,61,34,.88));
  box-shadow: 0 0 0 2px rgba(83,255,151,.12), 0 0 18px rgba(57,255,128,.16);
}
.mission-list, .achievement-list { display:grid; gap:7px; }
.mission-row, .achievement-row {
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius:11px;
  border:1px solid rgba(255,232,168,.16);
  background:rgba(6,30,18,.48);
}
.mission-row__icon, .achievement-row > span { font-size:18px; }
.mission-row > div, .achievement-row > div { min-width:0; display:grid; gap:3px; }
.mission-row strong, .achievement-row strong { color:#fff2bd; font-size:11px; }
.mission-row small, .achievement-row small { color:rgba(255,246,214,.65); font-size:9px; }
.mission-row i, .achievement-row i {
  display:block; height:4px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.09);
}
.mission-row i b, .achievement-row i b { display:block; height:100%; background:linear-gradient(90deg,#6ef59b,#ffe66b); }
.mission-row button, .achievement-row button {
  min-width:70px; min-height:30px; padding:4px 7px; border-radius:9px; border:1px solid rgba(255,227,138,.45);
  background:rgba(29,79,48,.8); color:#fff4c7; font-size:9px; font-weight:900; cursor:pointer;
}
.mission-row button:disabled, .achievement-row button:disabled { opacity:.48; cursor:default; }
.mission-row.is-complete, .achievement-row.is-unlocked { border-color:rgba(102,255,156,.44); background:rgba(18,74,43,.48); }
.advanced-settings-card { display:grid; gap:9px; }
.setting-row { display:grid; grid-template-columns:1fr minmax(100px,1.3fr) auto; gap:8px; align-items:center; color:#fff0c4; font-size:10px; }
.setting-row input[type="range"] { width:100%; accent-color:#71ef9d; }
.setting-toggle { display:flex; align-items:center; gap:8px; min-height:30px; color:#fff0c4; font-size:10px; }
.setting-toggle input { width:18px; height:18px; accent-color:#62e78f; }
.debug-panel {
  position:absolute;
  z-index:45;
  right:14px;
  bottom:14px;
  width:min(92vw,520px);
  max-height:min(70vh,620px);
  overflow:auto;
  padding:12px;
  border-radius:16px;
  background:rgba(4,18,11,.96);
}
.debug-panel__head { display:flex; justify-content:space-between; align-items:center; color:#fff0bd; margin-bottom:8px; }
.debug-panel__head button { width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.debug-panel pre { margin:0; white-space:pre-wrap; word-break:break-word; color:#d9ffe5; font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }

.pref-reduced-motion *, .pref-reduced-motion *::before, .pref-reduced-motion *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
.pref-high-contrast .glass-panel,
.pref-high-contrast .meta-card,
.pref-high-contrast .objective-card,
.pref-high-contrast .level-card { background:rgba(0,20,10,.96) !important; border-color:rgba(255,231,126,.88) !important; }
.pref-high-contrast .tile__glyph { color:#351100 !important; text-shadow:0 1px 0 #fff6c9,0 0 2px #fff !important; }
.pref-large-text body { font-size:112%; }
.pref-large-text .target-word,
.pref-large-text .level-description,
.pref-large-text .mission-row strong,
.pref-large-text .achievement-row strong { font-size:calc(1em + 1px); }

@media (max-width: 900px), (orientation: portrait) {
  .stage10-grid { grid-template-columns:1fr; }
  .mode-grid { grid-template-columns:1fr 1fr; }
  .setting-row { grid-template-columns:1fr 1fr auto; }
}
@media (max-width: 520px) {
  .mode-grid { grid-template-columns:1fr; }
  .mission-row, .achievement-row { grid-template-columns:auto 1fr; }
  .mission-row button, .achievement-row button { grid-column:2; justify-self:start; }
}


/* V1.0.1 — blindaje modal tutorial */
.npc-tutorial:not(.is-open) { pointer-events: none; }
.npc-tutorial.is-open { pointer-events: auto; }

/* ETAPA 12 — eventos, temporada, ranking y maestría ------------------ */
.stage12-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.stage12-grid .meta-card { min-height:180px; }
.event-card__today,
.season-summary,
.mastery-summary,
.leaderboard-filter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.event-card__today { justify-content:flex-start; }
.event-card__today > span { font-size:30px; }
.event-card__today > div { display:grid; gap:3px; }
.event-card__today small,
.season-summary span,
.mastery-summary span,
.leaderboard-filter span { color:rgba(255,247,215,.72); font-size:11px; }
.event-progress,
.season-xp i {
  display:block;
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.event-progress b,
.season-xp i b {
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#4eff8b,#ddff6a);
  box-shadow:0 0 10px rgba(77,255,137,.58);
  transition:width .25s ease;
}
.event-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.event-card__footer > span { color:#bfffcf; font-size:11px; font-weight:800; }
.season-xp { display:grid; gap:5px; }
.season-xp > span { font-size:11px; color:#ffeaa6; }
.season-tiers { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-top:6px; }
.season-tier {
  min-height:42px;
  border:1px solid rgba(255,226,139,.22);
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(8,39,24,.52);
  color:#fff2bd;
  font-size:10px;
  cursor:default;
}
.season-tier.is-unlocked { border-color:rgba(98,255,151,.58); box-shadow:inset 0 0 12px rgba(72,255,135,.09); }
.season-tier.is-claimable { cursor:pointer; animation:seasonPulse 1.5s ease-in-out infinite; }
.season-tier.is-claimed { opacity:.55; }
@keyframes seasonPulse { 50% { box-shadow:0 0 12px rgba(89,255,147,.42); transform:translateY(-1px); } }
.leaderboard-list { display:grid; gap:5px; }
.leaderboard-row { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:7px; padding:6px 8px; border-radius:9px; background:rgba(5,29,17,.52); border:1px solid rgba(255,255,255,.08); }
.leaderboard-row strong { color:#fff0b4; font-size:11px; }
.leaderboard-row small { color:rgba(255,255,255,.65); font-size:9px; }
.leaderboard-row b { color:#8dffb3; font-size:11px; }
.leaderboard-empty { color:rgba(255,255,255,.58); font-size:11px; padding:8px 0; }
.mastery-milestones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.mastery-step { min-height:58px; display:grid; place-items:center; gap:2px; padding:5px; border-radius:10px; border:1px solid rgba(255,223,126,.2); background:rgba(7,34,21,.5); color:#fff0b0; text-align:center; font-size:10px; }
.mastery-step.is-ready { border-color:rgba(83,255,143,.7); cursor:pointer; }
.mastery-step.is-claimed { opacity:.55; }
@media (max-width:900px), (orientation:portrait) {
  .stage12-grid { grid-template-columns:1fr; }
  .season-tiers { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ETAPA 13 — CLOUD / HOSTINGER MYSQL -------------------------------- */
.cloud-top-button {
  position: relative;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(151,219,255,.45);
  background: rgba(23,65,88,.72);
  color: #effaff;
  font-weight: 900;
  cursor: pointer;
}
.cloud-top-button i {
  width: 8px; height: 8px; border-radius: 50%; background: #a5aeb4;
  box-shadow: 0 0 8px rgba(165,174,180,.5);
}
.cloud-top-button[data-status="connected"] i { background: #5eff9f; box-shadow: 0 0 9px rgba(94,255,159,.8); }
.cloud-top-button[data-status="syncing"] i { background: #ffe36c; box-shadow: 0 0 9px rgba(255,227,108,.8); }
.cloud-top-button[data-status="conflict"], .cloud-top-button[data-status="error"] { border-color: rgba(255,125,100,.65); }
.cloud-top-button[data-status="conflict"] i, .cloud-top-button[data-status="error"] i { background:#ff765f; }

.stage13-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.stage13-grid .meta-card p { margin: 0; color: rgba(255,247,220,.72); font-size: 11px; line-height: 1.4; }
.cloud-status-row, .cloud-capability, .cloud-sync-info {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:10px; background:rgba(7,31,18,.42); border:1px solid rgba(255,238,183,.14);
}
.cloud-status-row span, .cloud-capability span, .cloud-sync-info span { color:rgba(255,247,220,.66); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.cloud-status-row strong, .cloud-capability strong, .cloud-sync-info strong { color:#fff1aa; font-size:11px; }
.cloud-user-line { display:grid; gap:2px; }
.cloud-user-line b { color:#fff6d6; font-size:14px; }
.cloud-user-line small, .cloud-last-sync { color:rgba(255,247,220,.62); font-size:10px; }
.cloud-card__actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.rewarded-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.rewarded-grid button { min-height:54px; border-radius:11px; border:1px solid rgba(255,226,145,.26); background:rgba(7,35,22,.58); color:#fff5cf; display:grid; place-items:center; gap:2px; cursor:pointer; }
.rewarded-grid button:disabled { opacity:.45; cursor:not-allowed; }
.rewarded-grid button span { font-size:18px; }
.rewarded-grid button b { font-size:9px; }
.ads-card > small { color:rgba(255,244,213,.62); font-size:10px; }

.cloud-modal[hidden] { display:none !important; }
.cloud-modal {
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px;
}
.cloud-modal__scrim { position:absolute; inset:0; background:rgba(2,12,8,.7); backdrop-filter:blur(7px); }
.cloud-modal__panel {
  position:relative; z-index:1; width:min(94vw,620px); max-height:min(90vh,760px); overflow:auto;
  border-radius:24px; padding:20px; display:grid; gap:16px;
  background:linear-gradient(180deg,rgba(16,49,34,.98),rgba(7,25,17,.98));
  border:1px solid rgba(159,222,255,.48); box-shadow:0 28px 80px rgba(0,0,0,.52);
}
.cloud-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cloud-modal__head h2 { margin:2px 0 0; color:#fff0b0; font-size:26px; }
.cloud-modal__close { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:white; font-size:22px; cursor:pointer; }
#cloudGuestPane, #cloudUserPane { display:grid; gap:12px; }
#cloudUserPane[hidden], #cloudGuestPane[hidden] { display:none !important; }
.cloud-field { display:grid; gap:5px; }
.cloud-field span { color:rgba(255,247,220,.76); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.cloud-field input { min-height:44px; border-radius:11px; border:1px solid rgba(255,238,187,.24); background:rgba(3,21,13,.74); color:#fff; padding:8px 11px; outline:none; }
.cloud-field input:focus { border-color:rgba(115,211,255,.72); box-shadow:0 0 0 3px rgba(115,211,255,.08); }
.cloud-auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cloud-account-summary { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:rgba(15,62,43,.52); }
.cloud-account-summary > span { font-size:28px; }
.cloud-account-summary div { display:grid; gap:2px; }
.cloud-account-summary strong { color:#fff2bb; font-size:17px; }
.cloud-account-summary small { color:rgba(255,248,222,.7); }
.cloud-sync-info { display:grid; grid-template-columns:1fr 1fr; }
.cloud-sync-info > div { display:flex; justify-content:space-between; gap:8px; }
.cloud-sync-message { margin:0; min-height:20px; color:#dff6ff; font-size:12px; line-height:1.45; }
.cloud-sync-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.cloud-modal__feedback { min-height:24px; padding:7px 9px; border-radius:9px; color:#e9fff2; font-size:12px; }
.cloud-modal__feedback.is-error { background:rgba(139,39,33,.45); color:#ffd9d4; }
.cloud-modal__feedback.is-ok { background:rgba(16,112,62,.38); }

@media (max-width:1050px) {
  .stage13-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .stage13-grid { grid-template-columns:1fr; }
  .cloud-auth-actions, .cloud-sync-actions { grid-template-columns:1fr; }
  .cloud-top-button b { display:none; }
}

/* ETAPA 14 — PUBLICACIÓN / PWA / PRIVACIDAD / ADS -------------------- */
.release-top-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(246,219,132,.5);
  background: rgba(13,64,39,.72);
  color: #fff4cf;
  font-weight: 900;
  cursor: pointer;
}
.release-top-button i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c19f55;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.release-top-button i[data-online="true"] { background: #74ef9a; box-shadow: 0 0 8px rgba(116,239,154,.8); }
.release-top-button i[data-online="false"] { background: #ef8b74; box-shadow: 0 0 8px rgba(239,139,116,.7); }

.stage14-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.release-card p { margin: 4px 0 10px; color: rgba(255,246,219,.72); font-size: 12px; line-height: 1.45; }
.release-status-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:6px; }
.release-status-grid span { display:grid; gap:2px; padding:8px; border-radius:10px; background:rgba(255,255,255,.045); border:1px solid rgba(255,231,157,.12); }
.release-status-grid small { color:rgba(255,243,205,.55); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.release-status-grid b { color:#fff2bd; font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.release-card__actions { display:grid; grid-template-columns: 1fr 1fr; gap:7px; margin-top:10px; }

.release-modal[hidden], .release-modal:not(.is-open) { display:none !important; }
.release-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(12px,2vw,24px);
}
.release-modal__scrim { position:absolute; inset:0; background:rgba(2,10,6,.72); backdrop-filter:blur(7px); }
.release-modal__panel {
  position:relative;
  z-index:1;
  width:min(94vw,620px);
  max-height:min(88vh,760px);
  overflow:auto;
  display:grid;
  gap:14px;
  padding:clamp(16px,2vw,24px);
  border-radius:24px;
  border:1px solid rgba(246,217,132,.52);
  background:linear-gradient(180deg,rgba(15,46,29,.98),rgba(6,22,13,.985));
  box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
}
.release-modal__panel--wide { width:min(96vw,820px); }
.release-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.release-modal__head h2 { margin:2px 0 0; color:#fff0b0; font-size:clamp(20px,2.2vw,28px); }
.release-modal__panel > p { margin:0; color:#f5e9c6; line-height:1.5; }
.release-modal__actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

.privacy-options { display:grid; gap:8px; }
.privacy-row { display:flex; align-items:flex-start; gap:10px; padding:11px; border-radius:12px; border:1px solid rgba(255,232,161,.16); background:rgba(255,255,255,.04); }
.privacy-row input { margin-top:3px; width:18px; height:18px; accent-color:#79e99b; }
.privacy-row span { display:grid; gap:2px; }
.privacy-row strong { color:#fff3c8; }
.privacy-row small { color:rgba(255,244,213,.6); line-height:1.35; }
.privacy-row.is-required { opacity:.78; }

.release-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.release-checks article { min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:11px; border-radius:13px; border:1px solid rgba(255,231,151,.14); background:rgba(255,255,255,.04); }
.release-checks article > span { font-size:22px; }
.release-checks article > div { min-width:0; display:grid; gap:2px; }
.release-checks article strong { color:#fff0bb; }
.release-checks article small { color:rgba(255,244,215,.62); overflow:hidden; text-overflow:ellipsis; }
.release-checks article button { min-height:34px; padding:6px 10px; }
.release-update { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(129,215,255,.35); background:rgba(29,89,117,.35); color:#e7f8ff; }
.release-update strong { flex:1; }
.account-data-box { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px; border-radius:12px; border:1px solid rgba(255,231,151,.14); background:rgba(255,255,255,.035); }
.account-data-box > div:first-child { display:grid; gap:2px; }
.account-data-box strong { color:#fff0bb; }
.account-data-box small { color:rgba(255,244,215,.55); }
.account-data-box > div:last-child { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.danger-btn { border-color:rgba(255,139,121,.45) !important; color:#ffd7d0 !important; background:rgba(110,31,28,.55) !important; }

.ad-banner-slot {
  position:relative;
  z-index:22;
  width:min(100%,970px);
  min-height:54px;
  margin:0 auto 8px;
  padding:4px 8px 6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(2,13,8,.78);
  overflow:hidden;
}
.ad-banner-slot > small { display:block; margin-bottom:2px; color:rgba(255,255,255,.48); text-align:center; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.ad-banner-slot .adsbygoogle { min-height:50px; }

@media (max-width: 900px), (orientation: portrait) {
  .release-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .release-checks { grid-template-columns:1fr; }
  .release-checks article { grid-template-columns:auto 1fr; }
  .release-checks article button { grid-column:1 / -1; }
  .account-data-box { align-items:flex-start; flex-direction:column; }
  .account-data-box > div:last-child { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .release-modal__actions { display:grid; grid-template-columns:1fr; }
  .release-top-button b { display:none; }
}