@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=MedievalSharp&display=swap');

@font-face {
  font-family: "Moontime";
  src:
    url("assets/fonts/Moontime.woff2") format("woff2"),
    url("assets/fonts/Moontime.ttf") format("truetype"),
    url("assets/fonts/Moontime.otf") format("opentype");
  font-display: block;
}

:root {
  --wood-dark: #5a2c12;
  --wood-mid: #9a5424;
  --gold: #ffd24a;
  --green: #39ad37;
  --green-dark: #167b2b;
  --cream: #fff4cf;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #071713;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
}

button { font-family: inherit; }

.app,
.screen {
  width: 100%;
  height: 100%;
}

.screen {
  display: none;
  place-items: center;
  padding: 0;
}

.screen--active { display: grid; }

/* Escenario principal: siempre ocupa todo el ancho y todo el alto visible. */
.game-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 207, 0.16);
}

.game-bg,
.book-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* ancho completo sin recortar */
  user-select: none;
  pointer-events: none;
}

.sun-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 16%, rgba(255, 243, 178, 0.24), transparent 24%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent 38%, rgba(54, 22, 8, 0.08));
  mix-blend-mode: screen;
}

.title-board,
.name-board,
.start-button,
.character { position: absolute; }

.title-board {
  z-index: 7;
  top: 3.4%;
  left: 50%;
  width: 30.5%;
  min-height: 13.6%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding: 1.1% 2.4%;
  color: var(--gold);
  text-align: center;
  border-radius: 18% / 33%;
  border: clamp(3px, 0.45vw, 8px) solid #693413;
  background:
    linear-gradient(90deg, rgba(61, 28, 9, 0.35), transparent 14%, transparent 86%, rgba(61, 28, 9, 0.4)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #bd793d 0%, #8a461e 52%, #5b2b11 100%);
  box-shadow:
    0 1.2vh 0 #3c1b0c,
    0 2.1vh 2.4vh rgba(0, 0, 0, 0.38),
    inset 0 0.35vh 0 rgba(255, 231, 168, 0.25),
    inset 0 -0.45vh 0 rgba(43, 19, 5, 0.35);
}

.title-board::before,
.title-board::after {
  content: "";
  position: absolute;
  top: 26%;
  width: 10.5%;
  height: 48%;
  background: inherit;
  border: inherit;
  box-shadow: inherit;
  z-index: -1;
}
.title-board::before { left: -4.5%; border-right: 0; border-radius: 50% 0 0 50%; }
.title-board::after { right: -4.5%; border-left: 0; border-radius: 0 50% 50% 0; }

.title-board h1 {
  margin: 0;
  line-height: 0.95;
  letter-spacing: 0.055em;
  text-shadow: 0 0.35vh 0 #85420f, 0 0.65vh 0 rgba(46, 20, 4, 0.55), 0 0 1.7vh rgba(255, 208, 60, 0.28);
}
.title-board h1 span,
.title-board h1 strong { display: block; font-weight: 1000; }
.title-board h1 span { font-size: clamp(15px, 2.05vw, 38px); }
.title-board h1 strong { font-size: clamp(21px, 2.85vw, 56px); }

.chain {
  position: absolute;
  top: -38%;
  width: 3.2%;
  height: 46%;
  border-radius: 999px;
  background: repeating-linear-gradient(180deg, #3c332b 0 8%, #12100d 8% 16%);
  box-shadow: inset 0.22vw 0 rgba(255, 255, 255, 0.18);
}
.chain--left { left: 17%; }
.chain--right { right: 17%; }

.gem,
.mini-gem {
  position: absolute;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #98ff89, #0ca839 52%, #045f1f);
  border: 2px solid rgba(5, 84, 19, 0.75);
  box-shadow: 0 0.25vh 0 rgba(0,0,0,.35), inset .2vh .2vh 0 rgba(255,255,255,.55);
}
.gem { width: 4.5%; aspect-ratio: 1; top: 42%; }
.gem--left { left: 4.2%; }
.gem--right { right: 4.2%; }

.name-board {
  z-index: 8;
  top: 10.8%;
  width: 20.2%;
  height: 7.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.2%;
  color: #fff2d1;
  font-size: clamp(12px, 1.12vw, 22px);
  font-weight: 1000;
  letter-spacing: 0.025em;
  text-shadow: 0 0.28vh 0 #3f1d0a, 0 0 1vh rgba(0, 0, 0, 0.28);
  border-radius: 14% / 38%;
  border: clamp(2px, 0.25vw, 5px) solid #5f2d10;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #a35f2b 0%, #713513 100%);
  box-shadow: 0 .65vh 0 #3b1a09, 0 1.2vh 1.5vh rgba(0,0,0,.32), inset 0 .3vh 0 rgba(255,241,188,.18), inset 0 -.35vh 0 rgba(52,22,4,.3);
}
.name-board::before,
.name-board::after {
  content: "";
  position: absolute;
  top: 22%;
  width: 13%;
  height: 56%;
  background: inherit;
  border: inherit;
  z-index: -1;
}
.name-board::before { left: -6%; border-right: 0; border-radius: 60% 0 0 60%; }
.name-board::after { right: -6%; border-left: 0; border-radius: 0 60% 60% 0; }
.name-board--oscar { left: 6.2%; }
.name-board--miguel { right: 8.4%; }
.mini-gem { width: 5.5%; aspect-ratio: 1; top: 40%; }
.mini-gem--left { left: 3%; }
.mini-gem--right { right: 3%; }

.character {
  z-index: 5;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1.4vh .8vh rgba(46,24,8,.24)) drop-shadow(0 0 .08vh rgba(255,255,255,.25));
  transform-origin: bottom center;
  animation: idleFloat 4.5s ease-in-out infinite;
}
.character--oscar { left: 5.8%; bottom: 0.8%; width: 14.6%; z-index: 5; animation-delay: -1.2s; }
.character--artesano { left: 33.8%; bottom: -0.8%; width: 17.6%; z-index: 6; animation-delay: -0.25s; }
.character--artesana { left: 50.8%; bottom: -0.7%; width: 14.1%; z-index: 6; animation-delay: -1.85s; }
.character--miguel { right: 8.5%; bottom: 0.9%; width: 14.8%; z-index: 5; animation-delay: -2.4s; }

.start-button {
  z-index: 12;
  left: 50%;
  bottom: 8.7%;
  width: 23.2%;
  height: 9.4%;
  transform: translateX(-50%);
  cursor: pointer;
  border: clamp(3px, .45vw, 8px) solid #2d942c;
  border-radius: 999px;
  color: white;
  background:
    radial-gradient(circle at 35% 15%, rgba(255,255,255,.72), transparent 0 18%, transparent 30%),
    linear-gradient(180deg, #fff179 0%, #ffd24b 30%, #f4aa18 70%, #d9810d 100%);
  box-shadow: 0 .95vh 0 #166d26, 0 1.55vh 2.2vh rgba(25,78,23,.42), inset 0 .55vh 0 rgba(255,255,255,.65), inset 0 -.55vh 0 rgba(134,77,0,.25);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.start-button:hover { transform: translateX(-50%) translateY(-.45vh) scale(1.035); filter: saturate(1.08) brightness(1.03); }
.start-button:active { transform: translateX(-50%) translateY(.45vh) scale(.985); }
.button-shine {
  position: absolute;
  left: 9%;
  top: 11%;
  width: 82%;
  height: 35%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.08));
  pointer-events: none;
}
.button-text {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-size: clamp(17px, 2vw, 40px);
  font-weight: 1000;
  letter-spacing: .055em;
  line-height: 1;
  text-shadow: 0 .35vh 0 rgba(170,96,0,.75), 0 .65vh 0 rgba(80,45,0,.22), 0 0 1.1vh rgba(255,255,255,.5);
}
.leaf {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 12%;
  height: 46%;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #69cc3d, #228d24 70%);
  box-shadow: inset 0 .18vh 0 rgba(255,255,255,.38), 0 .35vh 0 rgba(0,0,0,.22);
}
.leaf--left { left: -8.5%; transform: translateY(-50%) rotate(-32deg); }
.leaf--right { right: -8.5%; transform: translateY(-50%) rotate(122deg); }

@keyframes idleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.55vh) rotate(0.2deg); }
}

/* PANTALLA 2: libro completo como imagen de fondo, texto editable encima. */
.book-stage { background: #101f1b; }
.book-bg { filter: saturate(.97) brightness(.98); }

.book-text-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.book-copy {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #17110c;
  font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
  font-weight: 700;
  line-height: 1.26;
  text-shadow: 0 1px 0 rgba(255, 245, 209, .45);
  font-size-adjust: .53;
  text-rendering: geometricPrecision;
}


.book-copy--left {
  left: 20.8%;
  top: 13.3%;
  width: 27.4%;
  height: 73.5%;
  padding: 0 2.2%;
}

.book-copy--right {
  left: 53.1%;
  top: 21.5%;
  width: 27.4%;
  height: 62%;
  padding: 0 2.1%;
  justify-content: center;
}

.book-copy h2,
.book-copy h3 {
  margin: 0;
  color: #9f2020;
  font-family: "MedievalSharp", "Caveat", "Georgia", serif;
  font-weight: 700;
  line-height: .92;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255, 239, 203, .72);
}

.book-copy h2 {
  margin-bottom: 4.6%;
  font-size: clamp(28px, 2.8vw, 58px);
}

.book-copy h3 {
  margin-top: 4.8%;
  margin-bottom: 3.3%;
  font-size: clamp(24px, 2.45vw, 48px);
}

.book-copy p {
  width: 100%;
  margin: 0 0 4.4%;
  color: #19120d;
  font-size: clamp(15px, 1.42vw, 29px);
  letter-spacing: .012em;
}

.book-copy--right p {
  margin-bottom: 8.5%;
  font-size: clamp(16px, 1.5vw, 30px);
}

.book-next-hotspot {
  position: absolute;
  z-index: 10;
  right: 12.4%;
  bottom: 8.2%;
  width: 6.7%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 200, 46, 0.01);
}
.book-next-hotspot:hover {
  background: rgba(255, 213, 77, .16);
  box-shadow: 0 0 30px rgba(255, 213, 77, .55);
}
.book-next-hotspot:active { transform: translateY(2px) scale(.98); }

/* PANTALLA 3 temporal conectada */
.third-stage .game-bg { filter: brightness(.68) saturate(.92); }
.third-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(255, 210, 74, .18), transparent 36%),
    rgba(5, 17, 13, .34);
}
.next-card {
  position: relative;
  z-index: 5;
  width: min(88vw, 720px);
  padding: clamp(26px, 5vw, 54px);
  border-radius: 28px;
  text-align: center;
  color: #fff5d4;
  background: linear-gradient(180deg, rgba(109, 58, 22, .94), rgba(55, 27, 11, .96));
  border: 4px solid rgba(255, 204, 90, .65);
  box-shadow: 0 30px 70px rgba(0,0,0,.36);
}
.next-card h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 5vw, 52px);
  color: var(--gold);
  text-shadow: 0 4px 0 rgba(0,0,0,.28);
}
.next-card p {
  margin: 0 auto 24px;
  max-width: 560px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5;
}
.eyebrow {
  margin-bottom: 10px !important;
  color: #aaf17f;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.next-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.secondary-button {
  border: 0;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  color: #3b2108;
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff27a, #f5a817);
  box-shadow: 0 8px 0 #96620b, 0 14px 22px rgba(0,0,0,.25);
}
.secondary-button--green {
  color: #fff;
  background: linear-gradient(180deg, #62d85b, #208d30);
  box-shadow: 0 8px 0 #116226, 0 14px 22px rgba(0,0,0,.25);
}
.secondary-button:active { transform: translateY(4px); box-shadow: 0 4px 0 #96620b, 0 8px 16px rgba(0,0,0,.25); }
.secondary-button--green:active { box-shadow: 0 4px 0 #116226, 0 8px 16px rgba(0,0,0,.25); }

@media (max-width: 900px) {
  .title-board { width: 42%; top: 4%; min-height: 12.5%; }
  .name-board { width: 25%; top: 12%; }
  .name-board--oscar { left: 4.2%; }
  .name-board--miguel { right: 4.2%; }
  .character--oscar { width: 17.4%; left: 3.2%; bottom: 1%; }
  .character--miguel { width: 17.2%; right: 3.4%; bottom: 1%; }
  .character--artesano { width: 21%; left: 29.8%; bottom: -0.8%; }
  .character--artesana { width: 16.6%; left: 50.5%; bottom: -0.8%; }
  .start-button { width: 32%; height: 9%; bottom: 8%; }
}

@media (max-height: 560px) {
  .game-stage { min-height: 100dvh; }
  .title-board { top: 2.2%; transform: translateX(-50%) scale(.9); transform-origin: top center; }
  .name-board { top: 8.8%; transform: scale(.92); }
  .name-board--oscar { transform-origin: top left; }
  .name-board--miguel { transform-origin: top right; }
  .character--oscar { width: 13.4%; }
  .character--miguel { width: 13.7%; }
  .character--artesano { width: 16.2%; }
  .character--artesana { width: 13%; }
  .start-button { bottom: 7.2%; height: 8.8%; }
  .book-copy p { font-size: clamp(13px, 1.2vw, 20px); }
  .book-copy--right p { font-size: clamp(13px, 1.27vw, 21px); }
  .book-copy h2 { font-size: clamp(22px, 2.15vw, 34px); }
  .book-copy h3 { font-size: clamp(20px, 2vw, 32px); }
}

/* PANTALLA 3: selección de personaje */
.selection-stage .game-bg {
  filter: saturate(.98) brightness(.9);
}

.selection-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 20, 13, .20), transparent 22%, transparent 72%, rgba(5, 20, 13, .18)),
    linear-gradient(to bottom, rgba(255,255,255,.04), transparent 32%, rgba(46, 20, 8, .14));
}

.selection-board {
  position: absolute;
  z-index: 8;
  height: 12.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3%;
  color: #fff2d1;
  text-align: center;
  font-size: clamp(18px, 2vw, 39px);
  font-weight: 1000;
  letter-spacing: .018em;
  line-height: 1.04;
  text-shadow: 0 .34vh 0 #3f1d0a, 0 0 1.1vh rgba(0, 0, 0, 0.34);
  border-radius: 14% / 34%;
  border: clamp(3px, .35vw, 7px) solid #5f2d10;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #a96633 0%, #743815 58%, #56260d 100%);
  box-shadow:
    0 .85vh 0 #3b1a09,
    0 1.5vh 1.7vh rgba(0,0,0,.32),
    inset 0 .32vh 0 rgba(255,241,188,.18),
    inset 0 -.38vh 0 rgba(52,22,4,.3);
}
.selection-board::before,
.selection-board::after {
  content: "";
  position: absolute;
  top: 22%;
  width: 13%;
  height: 56%;
  background: inherit;
  border: inherit;
  z-index: -1;
}
.selection-board::before { left: -6%; border-right: 0; border-radius: 60% 0 0 60%; }
.selection-board::after { right: -6%; border-left: 0; border-radius: 0 60% 60% 0; }
.selection-board--choose { left: 5%; top: 6.5%; width: 23.5%; }
.selection-board--name { right: 8%; top: 6.6%; width: 29%; }

.character-choices {
  position: absolute;
  z-index: 7;
  left: 3.4%;
  bottom: 0;
  width: 42%;
  height: 78%;
}

.player-choice {
  position: absolute;
  bottom: -1.2%;
  width: 44%;
  height: 96%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  transform-origin: bottom center;
  transition: transform .22s ease, opacity .28s ease, filter .22s ease;
}
.player-choice--male { left: 0; }
.player-choice--female { left: 34%; width: 36%; }

.choice-sprite {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
  transition: opacity .24s ease, filter .24s ease;
}
.choice-sprite--silhouette {
  opacity: .93;
  filter: drop-shadow(0 1.5vh .65vh rgba(0,0,0,.36));
}
.choice-sprite--color {
  opacity: 0;
  filter: drop-shadow(0 1.4vh .75vh rgba(46,24,8,.26));
}
.choice-glow {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  width: 62%;
  height: 10%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 216, 74, .48), rgba(255, 216, 74, .10) 55%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.choice-label {
  position: absolute;
  left: 50%;
  bottom: 2.2%;
  min-width: 48%;
  transform: translateX(-50%);
  padding: .55em .9em;
  border-radius: 999px;
  color: #3b2108;
  font-size: clamp(12px, 1vw, 18px);
  font-weight: 1000;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #fff076, #f0a915);
  box-shadow: 0 .45vh 0 #8b5a09, 0 .8vh 1.2vh rgba(0,0,0,.25);
  opacity: .92;
  pointer-events: none;
}
.player-choice:hover { transform: translateY(-.9vh) scale(1.03); }
.player-choice:hover .choice-sprite--color { opacity: .23; }
.player-choice.is-selected { transform: translateY(-.7vh) scale(1.04); }
.player-choice.is-selected .choice-sprite--silhouette { opacity: 0; }
.player-choice.is-selected .choice-sprite--color { opacity: 1; }
.player-choice.is-selected .choice-glow { opacity: 1; }
.player-choice.is-selected .choice-label {
  color: white;
  background: linear-gradient(180deg, #68df5f, #248f31);
  box-shadow: 0 .45vh 0 #126327, 0 .8vh 1.2vh rgba(0,0,0,.25);
}
.player-choice.is-hidden {
  opacity: 0;
  transform: translateY(4vh) scale(.92);
  pointer-events: none;
}

.player-form {
  position: absolute;
  z-index: 9;
  top: 24.5%;
  right: 7.2%;
  width: 31.5%;
  display: grid;
  justify-items: center;
  gap: clamp(9px, 1.4vh, 18px);
}

.name-input-wrap {
  width: 77%;
  height: clamp(50px, 7.6vh, 88px);
  display: flex;
  align-items: center;
  padding: 0 clamp(12px, 2vw, 28px);
  border-radius: 999px;
  border: clamp(3px, .36vw, 7px) solid rgba(134, 83, 28, .75);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,226,212,.96)),
    linear-gradient(180deg, #fff, #d5c8af);
  box-shadow:
    0 .72vh 0 rgba(91, 48, 13, .48),
    0 1.3vh 1.7vh rgba(0,0,0,.2),
    inset 0 .28vh .75vh rgba(255,255,255,.9),
    inset 0 -.34vh .45vh rgba(154,111,57,.22);
}

.player-name-input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #6b625b;
  text-align: center;
  font-size: clamp(20px, 2.05vw, 38px);
  font-weight: 800;
  letter-spacing: .035em;
}
.player-name-input::placeholder { color: rgba(97, 88, 78, .82); }
.player-name-input:focus::placeholder { color: rgba(97, 88, 78, .36); }
.name-input-wrap:focus-within {
  border-color: rgba(255, 201, 49, .9);
  box-shadow:
    0 .72vh 0 rgba(91, 48, 13, .48),
    0 0 0 .35vh rgba(255, 212, 67, .3),
    0 1.3vh 1.7vh rgba(0,0,0,.2),
    inset 0 .28vh .75vh rgba(255,255,255,.9);
}

.selection-message {
  min-height: 1.25em;
  margin: 0;
  color: #fff1c8;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
}
.selection-message.is-error {
  color: #fff58a;
  animation: messagePulse .45s ease;
}
@keyframes messagePulse {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  44% { transform: translateX(6px); }
  66% { transform: translateX(-4px); }
}

.selection-start-button {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(78%, 340px);
  height: clamp(58px, 8.4vh, 92px);
  transform: none;
}
.selection-start-button:hover { transform: translateY(-.45vh) scale(1.035); }
.selection-start-button:active { transform: translateY(.45vh) scale(.985); }

.change-character-button {
  border: 0;
  cursor: pointer;
  padding: .72em 1.2em;
  border-radius: 999px;
  color: #fff3cf;
  font-weight: 1000;
  letter-spacing: .02em;
  background: rgba(67, 32, 11, .75);
  box-shadow: inset 0 0 0 2px rgba(255, 211, 92, .42), 0 .65vh 1.3vh rgba(0,0,0,.22);
}
.change-character-button:hover { filter: brightness(1.08); }

.next-card--player {
  padding-top: clamp(22px, 4vw, 42px);
}
.selected-player-preview {
  height: min(42vh, 320px);
  margin: -6px auto 8px;
  display: grid;
  place-items: end center;
}
.selected-player-preview img {
  max-height: 100%;
  max-width: min(38vw, 260px);
  object-fit: contain;
  filter: drop-shadow(0 1.3vh .8vh rgba(0,0,0,.32));
}

@media (max-width: 900px) {
  .selection-board--choose { left: 4%; width: 30%; }
  .selection-board--name { right: 5%; width: 38%; }
  .character-choices { left: 2%; width: 52%; height: 75%; }
  .player-form { right: 4%; width: 40%; }
  .name-input-wrap { width: 86%; }
  .selection-start-button { width: 86%; }
}

@media (max-height: 560px) {
  .selection-board { height: 11.5%; font-size: clamp(14px, 1.55vw, 26px); }
  .selection-board--choose { top: 5%; }
  .selection-board--name { top: 5%; }
  .character-choices { height: 76%; }
  .player-choice { height: 94%; }
  .player-form { top: 22%; gap: 8px; }
  .name-input-wrap { height: clamp(42px, 7vh, 64px); }
  .selection-start-button { height: clamp(48px, 7.5vh, 68px); }
  .selection-message { font-size: clamp(12px, .92vw, 16px); }
}

/* PANTALLA 4: RULETA DE PREMIOS */
.roulette-stage {
  background: #120906;
  overflow: hidden;
}

.workshop-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  filter: saturate(1.02) brightness(.82) contrast(1.06);
}

.roulette-ambience {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 199, 66, .18), transparent 36%),
    radial-gradient(circle at 18% 52%, rgba(255, 135, 41, .15), transparent 30%),
    linear-gradient(90deg, rgba(24, 8, 3, .18), transparent 30%, transparent 70%, rgba(24, 8, 3, .20)),
    linear-gradient(to bottom, rgba(0, 0, 0, .10), transparent 32%, rgba(0, 0, 0, .28));
}

.roulette-title-board {
  position: absolute;
  z-index: 10;
  top: 3.2%;
  left: 50%;
  min-width: 42%;
  height: 11%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 18px);
  padding: 0 4.2%;
  color: #ffe36b;
  border-radius: 14% / 38%;
  border: clamp(3px, .4vw, 7px) solid #6b3514;
  background:
    linear-gradient(90deg, rgba(54, 21, 5, .45), transparent 18%, transparent 82%, rgba(54, 21, 5, .45)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.052) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #b66d34 0%, #7a3915 58%, #4a1d08 100%);
  box-shadow:
    0 .85vh 0 #321306,
    0 1.8vh 2.4vh rgba(0,0,0,.42),
    inset 0 .35vh 0 rgba(255, 236, 166, .24),
    inset 0 -.45vh 0 rgba(40, 14, 4, .36);
}

.roulette-title-board::before,
.roulette-title-board::after {
  content: "";
  position: absolute;
  top: 26%;
  width: 8%;
  height: 48%;
  background: inherit;
  border: inherit;
  box-shadow: inherit;
  z-index: -1;
}
.roulette-title-board::before { left: -3.5%; border-right: 0; border-radius: 60% 0 0 60%; }
.roulette-title-board::after { right: -3.5%; border-left: 0; border-radius: 0 60% 60% 0; }
.roulette-title-board h2 {
  margin: 0;
  font-size: clamp(22px, 3.1vw, 58px);
  font-weight: 1000;
  letter-spacing: .075em;
  line-height: 1;
  text-shadow: 0 .34vh 0 #693208, 0 .65vh 0 rgba(26, 9, 2, .52), 0 0 1.4vh rgba(255, 230, 93, .28);
}
.star-mark {
  font-size: clamp(15px, 1.7vw, 32px);
  color: #ffd84f;
  text-shadow: 0 .25vh 0 #693208;
}

.roulette-presenter {
  position: absolute;
  z-index: 6;
  left: 3.2%;
  bottom: 0;
  width: min(45vw, 74vh);
  max-height: 76%;
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(0 1.4vh .9vh rgba(0,0,0,.42));
  transform-origin: bottom center;
  animation: presenterIdle 3.8s ease-in-out infinite;
}

@keyframes presenterIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-.6vh) rotate(.35deg); }
}

.reward-panel {
  position: absolute;
  z-index: 11;
  right: 3.8%;
  top: 4.2%;
  min-width: 16%;
  padding: .72em 1.1em;
  border-radius: 18px;
  color: #fff4cf;
  text-align: center;
  background: linear-gradient(180deg, rgba(92, 43, 12, .92), rgba(44, 18, 5, .94));
  border: 3px solid rgba(255, 205, 76, .62);
  box-shadow: 0 1vh 2.2vh rgba(0,0,0,.34), inset 0 .25vh 0 rgba(255,255,255,.16);
}
.reward-panel__label {
  display: block;
  font-size: clamp(10px, .86vw, 15px);
  font-weight: 900;
  color: #aaf17f;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.reward-panel strong {
  display: block;
  margin-top: .2em;
  color: #ffd957;
  font-size: clamp(16px, 1.45vw, 28px);
  text-shadow: 0 2px 0 rgba(0,0,0,.42);
}

.roulette-area {
  position: absolute;
  z-index: 7;
  left: 49.8%;
  top: 14.8%;
  width: min(42vw, 61vh);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 2.4vh 1.7vh rgba(0,0,0,.44));
}

.prize-wheel {
  --rotation: 0deg;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(var(--rotation));
  transition: transform 4.6s cubic-bezier(.12, .76, .14, 1);
  background:
    radial-gradient(circle at center, transparent 0 13%, rgba(50, 20, 4, .18) 13.4% 14%, transparent 14.5%),
    conic-gradient(from -22.5deg,
      #e7b936 0deg 45deg,
      #7047b7 45deg 90deg,
      #629f2c 90deg 135deg,
      #1886c5 135deg 180deg,
      #e98215 180deg 225deg,
      #b41f1f 225deg 270deg,
      #17a7aa 270deg 315deg,
      #c51e56 315deg 360deg);
  border: clamp(8px, 1vw, 16px) solid #9b5b19;
  box-shadow:
    inset 0 0 0 clamp(4px, .45vw, 8px) #f0c75b,
    inset 0 0 0 clamp(8px, .85vw, 16px) rgba(75, 31, 7, .62),
    inset 0 0 2.2vh rgba(255, 255, 255, .16),
    0 0 0 clamp(3px, .36vw, 6px) #43200b,
    0 0 4vh rgba(255, 207, 74, .25);
}

.prize-wheel::before {
  content: "";
  position: absolute;
  inset: 4.7%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -22.5deg, rgba(64, 26, 6, .68) 0 1.4deg, transparent 1.4deg 45deg);
  pointer-events: none;
}

.prize-wheel::after {
  content: "";
  position: absolute;
  inset: -1.2%;
  border-radius: 50%;
  background: repeating-conic-gradient(#ffd25f 0 2.1deg, transparent 2.1deg 44deg, #ffd25f 44deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 87%, black 88% 94%, transparent 95%);
  mask: radial-gradient(circle, transparent 0 87%, black 88% 94%, transparent 95%);
  pointer-events: none;
}

.wheel-pointer {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: -3.6%;
  width: 9.8%;
  aspect-ratio: .78;
  transform: translateX(-50%);
  border-radius: 50% 50% 62% 62%;
  background: radial-gradient(circle at 50% 28%, #ffec7f 0 14%, #db2626 15% 55%, #8b0808 56% 100%);
  border: clamp(2px, .35vw, 5px) solid #ffd55c;
  box-shadow: 0 .75vh 1.2vh rgba(0,0,0,.36), inset 0 .25vh 0 rgba(255,255,255,.38);
}
.wheel-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28%;
  width: 38%;
  height: 44%;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: #b40e0e;
}

.wheel-center {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 19%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #ffe774;
  font-size: clamp(24px, 3.2vw, 54px);
  background: radial-gradient(circle at 38% 28%, #ffc75a, #a95e17 58%, #5b2708 100%);
  border: clamp(3px, .5vw, 7px) solid #ffd15c;
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.34), inset 0 .35vh 0 rgba(255,255,255,.26);
}
.wheel-center span { transform: translateY(-2%); text-shadow: 0 2px 0 rgba(0,0,0,.36); }

.prize-label {
  position: absolute;
  z-index: 3;
  width: 24%;
  min-height: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff8dc;
  text-align: center;
  line-height: .9;
  font-weight: 1000;
  text-shadow:
    0 2px 0 #2f1c0d,
    1px 0 0 #2f1c0d,
    -1px 0 0 #2f1c0d,
    0 -1px 0 #2f1c0d;
  pointer-events: none;
}
.prize-label strong { font-size: clamp(16px, 2.05vw, 36px); letter-spacing: -.02em; }
.prize-label small { font-size: clamp(11px, 1.05vw, 20px); font-weight: 1000; }
.prize-label--0 { left: 50% !important; top: 20.6% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--1 { left: 68.3% !important; top: 31.8% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--2 { left: 76.8% !important; top: 50% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--3 { left: 68.6% !important; top: 68.4% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--4 { left: 50% !important; top: 79.1% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--5 { left: 31.4% !important; top: 68.4% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--6 { left: 23.2% !important; top: 50% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--7 { left: 31.7% !important; top: 31.8% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }

.spin-button {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 11.2%;
  width: min(24vw, 310px);
  height: clamp(58px, 9.2vh, 96px);
  transform: translateX(-50%);
  cursor: pointer;
  border: clamp(4px, .55vw, 9px) solid #6b330e;
  border-radius: 24px 24px 18px 18px;
  color: #ffe36b;
  background:
    linear-gradient(180deg, rgba(255, 240, 120, .18), transparent 23%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #b1662a 0%, #713211 60%, #421707 100%);
  box-shadow: 0 .9vh 0 #2a1005, 0 1.5vh 2.2vh rgba(0,0,0,.42), inset 0 .35vh 0 rgba(255,255,255,.18);
  transition: transform .16s ease, filter .16s ease;
}
.spin-button span {
  display: block;
  font-size: clamp(24px, 3.25vw, 58px);
  font-weight: 1000;
  letter-spacing: .06em;
  line-height: 1;
  text-shadow: 0 .36vh 0 #3d1805, 0 0 1.2vh rgba(255, 224, 96, .25);
}
.spin-button:hover { transform: translateX(-50%) translateY(-.45vh) scale(1.025); filter: brightness(1.06); }
.spin-button:active { transform: translateX(-50%) translateY(.45vh) scale(.985); }
.spin-button:disabled { cursor: default; filter: grayscale(.25) brightness(.84); }
.spin-button:disabled:hover { transform: translateX(-50%); }

.roulette-result {
  position: absolute;
  z-index: 12;
  right: 3.6%;
  bottom: 4.2%;
  width: min(29vw, 430px);
  min-height: 11.2%;
  display: grid;
  place-items: center;
  gap: .7vh;
  padding: .95em 1.1em;
  border-radius: 20px;
  color: #fff5d3;
  text-align: center;
  background: linear-gradient(180deg, rgba(90, 43, 13, .86), rgba(30, 12, 4, .9));
  border: 3px solid rgba(255, 205, 77, .54);
  box-shadow: 0 1.2vh 2.2vh rgba(0,0,0,.38), inset 0 .25vh 0 rgba(255,255,255,.12);
}
.roulette-result p {
  margin: 0;
  font-size: clamp(14px, 1.25vw, 21px);
  font-weight: 900;
  line-height: 1.28;
  text-shadow: 0 2px 0 rgba(0,0,0,.34);
}
.continue-button {
  border: 0;
  cursor: pointer;
  padding: .72em 1.3em;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(12px, 1vw, 18px);
  font-weight: 1000;
  letter-spacing: .05em;
  background: linear-gradient(180deg, #65dc5b, #238f31);
  box-shadow: 0 .5vh 0 #126425, 0 .95vh 1.25vh rgba(0,0,0,.28);
}
.continue-button:active { transform: translateY(3px); box-shadow: 0 .25vh 0 #126425, 0 .5vh .9vh rgba(0,0,0,.24); }

.roulette-stage.is-winning .roulette-result {
  animation: resultPop .55s ease both;
}
@keyframes resultPop {
  0% { transform: scale(.92); filter: brightness(1); }
  52% { transform: scale(1.04); filter: brightness(1.14); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 980px) {
  .roulette-title-board { min-width: 52%; }
  .reward-panel { right: 2.2%; top: 15%; }
  .roulette-presenter { width: 26vw; max-height: 68%; }
  .roulette-area { left: 53%; width: min(45vw, 78vh); }
  .roulette-result { width: 34vw; right: 2%; }
}

@media (max-height: 560px) {
  .roulette-title-board { height: 10%; top: 2.3%; transform: translateX(-50%) scale(.92); transform-origin: top center; }
  .roulette-area { top: 13.2%; width: min(38vw, 59vh); }
  .roulette-presenter { width: min(22vw, 70vh); max-height: 71%; }
  .spin-button { bottom: 8.3%; height: clamp(46px, 8vh, 64px); width: min(20vw, 250px); }
  .roulette-result { bottom: 3%; width: 30vw; padding: .65em .85em; }
  .reward-panel { top: 3.8%; transform: scale(.88); transform-origin: top right; }
}

/* PANTALLA 5: TALLER PRINCIPAL */
.workshop-stage,
.challenge-stage {
  background: #140906;
  overflow: hidden;
}

.workshop-warm-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 35%, rgba(255, 203, 92, .10), transparent 28%),
    radial-gradient(circle at 15% 22%, rgba(255, 218, 122, .12), transparent 30%),
    linear-gradient(180deg, rgba(24, 9, 4, .10), rgba(14, 6, 3, .30));
}

.settings-button {
  position: absolute;
  z-index: 15;
  left: 1.7%;
  top: 3.5%;
  width: clamp(40px, 4.8vw, 64px);
  aspect-ratio: 1;
  border: clamp(2px, .32vw, 5px) solid rgba(255, 220, 125, .66);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #ffe9a5;
  font-size: clamp(20px, 2.1vw, 34px);
  background: radial-gradient(circle at 35% 28%, #9f6a31, #4e230c 68%, #1d0a03);
  box-shadow: 0 .75vh 1.4vh rgba(0,0,0,.34), inset 0 .25vh 0 rgba(255,255,255,.2);
  transition: transform .18s ease, filter .18s ease;
}
.settings-button:hover { transform: rotate(24deg) scale(1.06); filter: brightness(1.12); }
.settings-button:active { transform: rotate(24deg) scale(.95); }

.hud-coins {
  position: absolute;
  z-index: 12;
  right: 3.3%;
  top: 4.2%;
  min-width: clamp(120px, 14vw, 190px);
  height: clamp(44px, 7vh, 72px);
  display: flex;
  align-items: center;
  gap: .8em;
  padding: 0 1.1em 0 .45em;
  border-radius: 16px;
  color: #fff4c8;
  background: linear-gradient(180deg, rgba(110, 57, 24, .95), rgba(50, 21, 7, .96));
  border: clamp(2px, .32vw, 5px) solid rgba(255, 216, 98, .52);
  box-shadow: 0 .75vh 1.6vh rgba(0,0,0,.34), inset 0 .25vh 0 rgba(255,255,255,.14);
}
.hud-coin-icon {
  width: clamp(44px, 5.2vh, 64px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8b4a0e;
  font-size: clamp(22px, 2.4vw, 40px);
  font-weight: 1000;
  background: radial-gradient(circle at 35% 25%, #fff1a4, #f4b720 62%, #9c5b0a);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), 0 .35vh .8vh rgba(0,0,0,.25);
}
.hud-coins strong {
  font-size: clamp(21px, 2vw, 38px);
  letter-spacing: .04em;
  text-shadow: 0 3px 0 rgba(0,0,0,.42);
}

.mini-shop {
  position: absolute;
  z-index: 10;
  right: 4.2%;
  top: 14.2%;
  width: clamp(60px, 7.4vw, 110px);
  height: clamp(74px, 12.5vh, 138px);
  display: grid;
  place-items: start center;
  padding-top: 32%;
  border-radius: 10px;
  color: #fff9cf;
  text-align: center;
  font-size: clamp(9px, .75vw, 14px);
  font-weight: 1000;
  background: linear-gradient(180deg, #d6a54c, #7f4716 62%, #4b2109);
  border: 2px solid rgba(255, 224, 106, .45);
  box-shadow: 0 .9vh 1.5vh rgba(0,0,0,.32), inset 0 .25vh 0 rgba(255,255,255,.13);
}
.mini-shop__roof {
  position: absolute;
  left: -7%;
  top: -13%;
  width: 114%;
  height: 36%;
  border-radius: 12px 12px 4px 4px;
  background: repeating-linear-gradient(90deg, #fff3db 0 20%, #fff3db 20% 38%, #d72339 38% 57%, #d72339 57% 75%);
  box-shadow: 0 .45vh .8vh rgba(0,0,0,.28);
}
.mini-shop__label { position: relative; z-index: 1; }

.data-book {
  position: absolute;
  z-index: 11;
  right: 4.8%;
  top: 31%;
  width: clamp(56px, 7vw, 100px);
  height: clamp(76px, 12.5vh, 142px);
  cursor: pointer;
  border: clamp(2px, .32vw, 5px) solid #b56529;
  border-radius: 9px 15px 15px 9px;
  color: #ffe5a2;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15), transparent 18%),
    linear-gradient(180deg, #bb4e28, #7e2517 70%, #48120d);
  box-shadow: 0 .8vh 1.3vh rgba(0,0,0,.34), inset -8px 0 0 rgba(0,0,0,.15);
}
.data-book span {
  writing-mode: horizontal-tb;
  transform: rotate(-6deg);
  font-size: clamp(10px, .9vw, 16px);
  font-weight: 1000;
  letter-spacing: .05em;
}
.data-book:hover { filter: brightness(1.1); transform: translateY(-2px); }

.masters-zone {
  position: absolute;
  z-index: 8;
  left: 5.2%;
  bottom: 1.8%;
  width: 35.5%;
  height: 70%;
  pointer-events: none;
}
.master-card {
  position: absolute;
  bottom: 0;
  height: 100%;
  pointer-events: none;
}
.master-card--oscar { left: 0; width: 48%; }
.master-card--miguel { left: 45%; width: 48%; }
.master-sprite {
  position: absolute;
  bottom: -1%;
  max-height: 76%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.3vh .7vh rgba(0,0,0,.45));
  pointer-events: none;
}
.master-sprite--oscar { left: 1%; max-width: 75%; }
.master-sprite--miguel { left: 0; max-width: 80%; }
.master-name {
  position: absolute;
  z-index: 12;
  top: 2%;
  width: 82%;
  height: clamp(42px, 7vh, 64px);
  border: clamp(2px, .32vw, 5px) solid #6d3311;
  border-radius: 16px;
  cursor: pointer;
  color: #fff3d4;
  font-size: clamp(13px, 1vw, 20px);
  font-weight: 1000;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #9b5627, #62300f 58%, #3c1908);
  box-shadow: 0 .65vh .9vh rgba(0,0,0,.34), inset 0 .18vh 0 rgba(255,255,255,.15);
  pointer-events: auto;
  transition: transform .16s ease, filter .16s ease;
}
.master-name--oscar { left: 0; }
.master-name--miguel { left: 0; }
.master-name:hover,
.master-name.is-active { transform: translateY(-4px) scale(1.04); filter: brightness(1.12); }
.master-name .mini-gem { top: 50%; }

.dialogue-box {
  position: absolute;
  z-index: 14;
  left: 4.2%;
  top: 13.8%;
  width: clamp(185px, 18vw, 320px);
  min-height: clamp(96px, 17vh, 170px);
  padding: clamp(12px, 1.5vw, 22px);
  border-radius: 12px;
  color: #2f1a0a;
  background: linear-gradient(180deg, #fff1c8, #dfbc82);
  border: 3px solid #8a5524;
  box-shadow: 0 1.2vh 1.7vh rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.28);
  transform-origin: left bottom;
  animation: bubbleIn .35s ease both;
}
.dialogue-box::after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: -18px;
  width: 26px;
  height: 26px;
  transform: rotate(45deg);
  background: #dfbc82;
  border-right: 3px solid #8a5524;
  border-bottom: 3px solid #8a5524;
}
.dialogue-box h3 {
  margin: 0 0 .35em;
  color: #8b1518;
  font-family: "MedievalSharp", Georgia, serif;
  font-size: clamp(16px, 1.45vw, 26px);
  text-align: center;
}
.dialogue-box p {
  margin: 0;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(11px, .95vw, 17px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.selected-hero-zone {
  position: absolute;
  z-index: 8;
  left: 48.5%;
  bottom: 4.5%;
  width: 24%;
  height: 70%;
  display: grid;
  place-items: end center;
}
.player-name-tag {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 50%;
  width: 78%;
  height: clamp(42px, 7vh, 64px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: clamp(2px, .32vw, 5px) solid #6d3311;
  border-radius: 16px;
  color: #fff2cf;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #9b5627, #62300f 58%, #3c1908);
  box-shadow: 0 .65vh .9vh rgba(0,0,0,.34), inset 0 .18vh 0 rgba(255,255,255,.15);
}
.player-name-tag strong {
  font-size: clamp(13px, 1.05vw, 20px);
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.38);
}
.player-name-tag .mini-gem { top: 50%; }
.workshop-player {
  max-height: 84%;
  max-width: 95%;
  object-fit: contain;
  filter: drop-shadow(0 1.4vh .8vh rgba(0,0,0,.46));
  animation: playerIdle 2.8s ease-in-out infinite;
}
@keyframes playerIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.reward-summary {
  position: absolute;
  z-index: 12;
  right: 16%;
  top: 8%;
  min-width: clamp(170px, 18vw, 300px);
  padding: .7em 1em;
  border-radius: 18px;
  text-align: center;
  color: #fff4d1;
  background: linear-gradient(180deg, rgba(85, 41, 15, .88), rgba(34, 14, 5, .9));
  border: 3px solid rgba(255, 207, 84, .5);
  box-shadow: 0 .8vh 1.4vh rgba(0,0,0,.32), inset 0 .22vh 0 rgba(255,255,255,.12);
}
.reward-summary span {
  display: block;
  color: #aaf17f;
  font-size: clamp(10px, .85vw, 15px);
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reward-summary strong {
  display: block;
  margin-top: .25em;
  color: #ffd85b;
  font-size: clamp(17px, 1.45vw, 27px);
  text-shadow: 0 2px 0 rgba(0,0,0,.38);
}

.workshop-start-button {
  z-index: 12;
  left: auto;
  right: 3.2%;
  bottom: 5.6%;
  width: min(22vw, 280px);
  height: clamp(54px, 8.2vh, 86px);
  transform: none;
}
.workshop-start-button:hover { transform: translateY(-.45vh) scale(1.035); }
.workshop-start-button:active { transform: translateY(.45vh) scale(.985); }

.config-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  background: rgba(9, 4, 2, .58);
  backdrop-filter: blur(4px);
}
.config-modal.is-open { display: grid; }
.config-panel {
  position: relative;
  width: min(78vw, 680px);
  padding: clamp(24px, 4vw, 42px);
  border-radius: 26px;
  color: #fff5d0;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(109, 58, 24, .98), rgba(44, 18, 6, .98));
  border: 5px solid rgba(255, 206, 88, .58);
  box-shadow: 0 2.4vh 5vh rgba(0,0,0,.46), inset 0 .3vh 0 rgba(255,255,255,.14);
}
.config-close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 42px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  background: rgba(109, 20, 12, .75);
}
.config-panel h2 {
  margin: 0 0 .35em;
  color: #ffdc63;
  font-size: clamp(26px, 3.5vw, 52px);
  letter-spacing: .08em;
  text-shadow: 0 4px 0 rgba(0,0,0,.34);
}
.config-panel p {
  margin: 0 auto 1.4em;
  max-width: 520px;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.4;
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 14px;
  margin: 0 auto 18px;
  max-width: 500px;
}
.social-grid a {
  padding: .95em 1em;
  border-radius: 18px;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 19px);
  font-weight: 1000;
  text-decoration: none;
  background: linear-gradient(180deg, #57c84e, #1f8430);
  box-shadow: 0 .65vh 0 #11581f, 0 1vh 1.4vh rgba(0,0,0,.26);
}
.social-grid a:nth-child(1) { background: linear-gradient(180deg, #4a78e0, #1d409b); box-shadow: 0 .65vh 0 #142a68, 0 1vh 1.4vh rgba(0,0,0,.26); }
.social-grid a:nth-child(2) { background: linear-gradient(180deg, #e35aa9, #9c266c); box-shadow: 0 .65vh 0 #661843, 0 1vh 1.4vh rgba(0,0,0,.26); }
.social-grid a:nth-child(3) { background: linear-gradient(180deg, #2a2a2a, #050505); box-shadow: 0 .65vh 0 #000, 0 1vh 1.4vh rgba(0,0,0,.26); }
.config-note {
  padding: .85em 1em;
  border-radius: 16px;
  color: #ffeeb6;
  font-size: clamp(11px, .95vw, 15px);
  background: rgba(0,0,0,.24);
}

/* Configuración de audio */
.config-audio-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 1.4em;
  padding: .85em 1.2em;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(45,22,8,.72), rgba(22,10,4,.74));
  border: 3px solid rgba(255,215,108,.32);
}

.config-audio-toggle .audio-toggle-btn {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(255,223,118,.52);
  border-radius: 50%;
  cursor: pointer;
  font-size: clamp(24px, 2.4vw, 34px);
  background: radial-gradient(circle at 35% 28%, #ffe994, #f5b42c 58%, #bc6c10);
  box-shadow: 0 .45vh .7vh rgba(0,0,0,.28), inset 0 .22vh 0 rgba(255,255,255,.28);
  transition: transform .15s ease, filter .15s ease;
}

.config-audio-toggle .audio-toggle-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.config-audio-toggle .audio-toggle-btn.is-muted {
  background: radial-gradient(circle at 35% 28%, #a89080, #6a5048 58%, #3a2a22);
  border-color: rgba(180,160,150,.42);
}

.config-audio-toggle span {
  color: #ffeeb8;
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 1000px) {
  .masters-zone { left: 4%; width: 39%; }
  .selected-hero-zone { left: 47%; width: 27%; }
  .reward-summary { right: 16%; min-width: 170px; }
  .workshop-start-button { width: 25vw; }
}

@media (max-height: 560px) {
  .settings-button { top: 2.5%; transform: scale(.9); transform-origin: top left; }
  .hud-coins { top: 3%; transform: scale(.88); transform-origin: top right; }
  .mini-shop { transform: scale(.82); transform-origin: top right; top: 13%; }
  .data-book { transform: scale(.82); transform-origin: top right; top: 31%; }
  .dialogue-box { top: 11.5%; width: 20vw; min-height: 18vh; padding: .8em; }
  .masters-zone { height: 72%; }
  .master-name { height: 11%; font-size: clamp(11px, .9vw, 16px); }
  .selected-hero-zone { height: 73%; bottom: 2%; }
  .player-name-tag { height: 11%; }
  .workshop-player { max-height: 86%; }
  .reward-summary { top: 4%; transform: scale(.86); transform-origin: top right; }
  .workshop-start-button { bottom: 4.5%; height: clamp(46px, 8vh, 62px); }
}

/* ===== AJUSTES V11: taller más estructurado, iconos PNG y textos ocultables ===== */
.shop-button {
  position: absolute;
  z-index: 13;
  right: 3.2%;
  top: 12.2%;
  width: clamp(78px, 8.7vw, 132px);
  aspect-ratio: 320 / 360;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  filter: drop-shadow(0 .9vh 1.2vh rgba(0,0,0,.48));
  transition: transform .18s ease, filter .18s ease;
}
.shop-button img,
.data-book img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.shop-button:hover,
.data-book:hover {
  transform: translateY(-4px) scale(1.04);
  filter: brightness(1.12) drop-shadow(0 1.1vh 1.2vh rgba(0,0,0,.46));
}
.shop-button:active,
.data-book:active { transform: translateY(1px) scale(.98); }

.data-book {
  position: absolute;
  z-index: 13;
  right: 3.75%;
  top: 30.8%;
  width: clamp(68px, 7.15vw, 108px);
  height: auto;
  aspect-ratio: 260 / 330;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 .9vh 1.1vh rgba(0,0,0,.45));
  transition: transform .18s ease, filter .18s ease;
}

.masters-zone {
  left: 4.1%;
  bottom: 1.2%;
  width: 41%;
  height: 76%;
}
.master-card--oscar { left: 0; width: 49%; }
.master-card--miguel { left: 42.5%; width: 52%; }
.master-sprite {
  bottom: -1.4%;
  max-height: 86%;
  filter: drop-shadow(0 1.6vh .8vh rgba(0,0,0,.55));
}
.master-sprite--oscar { left: -2%; max-width: 88%; }
.master-sprite--miguel { left: -4%; max-width: 93%; }
.master-name {
  top: 0;
  width: 86%;
  height: clamp(42px, 6.2vh, 62px);
}

.selected-hero-zone {
  left: 48.2%;
  bottom: 1.1%;
  width: 29%;
  height: 78%;
}
.workshop-player {
  max-height: 90%;
  max-width: 108%;
}
.player-name-tag {
  top: 0;
  width: 80%;
}

.reward-summary {
  right: 15.6%;
  top: 7.2%;
  z-index: 13;
}
.workshop-start-button {
  right: 3.1%;
  bottom: 4.6%;
  width: min(23vw, 315px);
}

.dialogue-box {
  left: 4.5%;
  top: 10.3%;
  width: clamp(190px, 18.5vw, 330px);
  min-height: clamp(100px, 16vh, 160px);
  z-index: 20;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dialogue-box.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  animation: none;
}
.dialogue-close {
  position: absolute;
  right: -12px;
  top: -12px;
  width: 30px;
  aspect-ratio: 1;
  border: 2px solid #8a5524;
  border-radius: 50%;
  cursor: pointer;
  color: #fff4c4;
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
  background: linear-gradient(180deg, #b6482d, #66190f);
  box-shadow: 0 .5vh .9vh rgba(0,0,0,.32);
}
.dialogue-close:hover { filter: brightness(1.15); transform: scale(1.06); }
.dialogue-hint {
  display: block;
  margin-top: .55em;
  opacity: .68;
  font-size: clamp(9px, .72vw, 12px);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-weight: 900;
  text-align: center;
}
.master-name.is-active {
  box-shadow: 0 .85vh 1.1vh rgba(0,0,0,.38), inset 0 .18vh 0 rgba(255,255,255,.15), 0 0 0 3px rgba(255,223,96,.22);
}

@media (max-width: 1000px) {
  .masters-zone { left: 3.6%; width: 43%; }
  .selected-hero-zone { left: 47.8%; width: 30%; }
  .shop-button { right: 2.8%; width: clamp(72px, 9vw, 118px); }
  .data-book { right: 3.3%; width: clamp(64px, 7.8vw, 96px); }
  .workshop-start-button { width: 25vw; }
}

@media (max-height: 560px) {
  .shop-button { transform: scale(.86); transform-origin: top right; top: 11.5%; }
  .data-book { transform: scale(.86); transform-origin: top right; top: 29%; }
  .shop-button:hover, .data-book:hover { transform: scale(.89) translateY(-3px); }
  .dialogue-box { top: 9%; width: 20vw; min-height: 16vh; padding: .75em; }
  .masters-zone { height: 76%; }
  .master-sprite { max-height: 88%; }
  .selected-hero-zone { height: 78%; bottom: .8%; }
  .workshop-player { max-height: 91%; }
}

/* ===== AJUSTES V12: taller principal y configuración más completa ===== */
.workshop-stage .settings-button {
  left: 1.35%;
  top: 3.1%;
  z-index: 18;
}

/* Personaje del usuario más grande y ligeramente a la izquierda */
.selected-hero-zone {
  left: 45.9%;
  bottom: .3%;
  width: 32.5%;
  height: 83%;
}
.player-name-tag {
  top: 1.2%;
  width: 74%;
}
.workshop-player {
  max-height: 98%;
  max-width: 118%;
  transform-origin: bottom center;
}

/* Maestros mejor proporcionados */
.masters-zone {
  left: 4.4%;
  bottom: .8%;
  width: 39.5%;
  height: 78.5%;
}
.master-card--oscar { left: 0; width: 48%; }
.master-card--miguel { left: 43%; width: 52%; }
.master-sprite { max-height: 91%; bottom: -1.9%; }
.master-sprite--oscar { left: -3%; max-width: 94%; }
.master-sprite--miguel { left: -5%; max-width: 98%; }
.master-name {
  top: 1.2%;
  width: 88%;
}

/* Tienda y datos, cargados como PNG y con mejor separación */
.shop-button {
  top: 11.6%;
  right: 4.25%;
  width: clamp(82px, 8.4vw, 128px);
}
.data-book {
  top: 32.4%;
  right: 4.65%;
  width: clamp(66px, 6.8vw, 102px);
}
.hud-coins {
  right: 3.4%;
  top: 3.4%;
  z-index: 16;
}
.reward-summary {
  right: 17.1%;
  top: 7.2%;
  min-width: clamp(165px, 18vw, 300px);
}
.workshop-start-button {
  right: 3.35%;
  bottom: 4.5%;
  width: min(23vw, 320px);
}

/* Caja de información: cada personaje abre su texto encima de sí mismo */
.dialogue-box {
  width: clamp(190px, 17vw, 315px);
  min-height: clamp(105px, 16.5vh, 170px);
  top: 11%;
}
.dialogue-box--oscar {
  left: 4.4%;
  top: 12.2%;
}
.dialogue-box--miguel {
  left: 18.8%;
  top: 12.2%;
}
.dialogue-box--datos {
  left: auto;
  right: 13.3%;
  top: 20.5%;
}
.dialogue-box--tienda {
  left: auto;
  right: 12.4%;
  top: 12.2%;
}
.dialogue-box--miguel::after,
.dialogue-box--tienda::after,
.dialogue-box--datos::after {
  left: auto;
  right: 18%;
}

/* Configuración estilo panel de juego */
.config-modal {
  align-items: center;
  justify-items: center;
  background: rgba(7, 3, 1, .46);
  backdrop-filter: blur(2px);
}
.config-panel--game {
  width: min(78vw, 920px);
  min-height: min(72vh, 610px);
  padding: clamp(18px, 2.1vw, 30px);
  padding-top: clamp(48px, 5.2vw, 70px);
  border-radius: 22px;
  text-align: left;
  color: #f8e3b2;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 218, 116, .13), transparent 31%),
    linear-gradient(180deg, rgba(99, 50, 20, .98), rgba(45, 19, 7, .99));
  border: clamp(4px, .45vw, 7px) solid #3a1607;
  outline: clamp(2px, .28vw, 4px) solid rgba(186, 114, 42, .9);
  box-shadow: 0 2vh 4.6vh rgba(0,0,0,.56), inset 0 .25vh 0 rgba(255,255,255,.12);
}
.config-back {
  position: absolute;
  left: -4.7%;
  top: -3.9%;
  width: clamp(48px, 6vw, 76px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff7d6;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 1000;
  background: radial-gradient(circle at 35% 24%, #ffe994, #f8a82c 57%, #b5600a 100%);
  box-shadow: 0 .9vh 1.6vh rgba(0,0,0,.42), inset 0 .25vh 0 rgba(255,255,255,.28);
}
.config-back:hover { filter: brightness(1.08); transform: translateX(-3px) scale(1.04); }
.config-header {
  position: absolute;
  top: -3.2%;
  left: 50%;
  width: min(54%, 520px);
  min-height: clamp(48px, 7.5vh, 74px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  border-radius: 16px;
  color: #ffe59c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 35%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #83501f, #3d1707 65%, #1b0702);
  border: clamp(3px, .35vw, 5px) solid #2b0e03;
  box-shadow: 0 .8vh 1.2vh rgba(0,0,0,.38), inset 0 .22vh 0 rgba(255,255,255,.14);
}
.config-header h2 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1;
  letter-spacing: .075em;
  color: #ffe08a;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 12px rgba(255, 198, 65, .25);
}
.config-header__ornament {
  width: clamp(42px, 4vw, 70px);
  height: 2px;
  background: linear-gradient(90deg, transparent, #c1803a, transparent);
  position: relative;
}
.config-header__ornament::before,
.config-header__ornament::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c1803a;
}
.config-header__ornament::before { left: 8px; }
.config-header__ornament::after { right: 8px; }
.config-layout {
  display: grid;
  grid-template-columns: minmax(170px, 26%) 1fr;
  gap: clamp(16px, 2vw, 28px);
}
.config-menu {
  display: grid;
  gap: clamp(9px, 1.15vh, 13px);
  padding: clamp(12px, 1.5vw, 18px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(43,17,5,.75), rgba(26,9,2,.8));
  border: 3px solid rgba(20, 6, 1, .75);
  box-shadow: inset 0 .25vh 0 rgba(255,255,255,.08);
}
.config-tab {
  min-height: clamp(42px, 6.4vh, 58px);
  border: 2px solid rgba(42, 14, 4, .92);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .8em;
  padding: 0 1em;
  color: #f9dfaa;
  text-transform: uppercase;
  font-size: clamp(11px, .95vw, 15px);
  font-weight: 1000;
  cursor: default;
  background: linear-gradient(180deg, #6e3918, #331205);
  box-shadow: inset 0 .18vh 0 rgba(255,255,255,.12), 0 .35vh .8vh rgba(0,0,0,.22);
}
.config-tab span {
  width: 1.4em;
  text-align: center;
  font-size: 1.25em;
  color: #ffd467;
}
.config-tab.is-active {
  color: #fff8d6;
  background: linear-gradient(180deg, #c38432, #7e3f13 70%, #421708);
  border-color: #e0b056;
}
.config-content {
  display: grid;
  gap: clamp(10px, 1.4vh, 16px);
  padding: clamp(14px, 1.8vw, 22px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(65,28,10,.96), rgba(25,9,3,.95));
  border: 3px solid rgba(21, 6, 1, .8);
  box-shadow: inset 0 .25vh 0 rgba(255,255,255,.1), 0 .5vh 1.1vh rgba(0,0,0,.28);
}
.setting-group {
  padding: clamp(10px, 1.3vh, 16px) clamp(12px, 1.5vw, 18px);
  border-radius: 13px;
  border: 1px solid rgba(202, 142, 59, .28);
  background: rgba(24, 9, 3, .34);
  position: relative;
}
.setting-group h3 {
  position: absolute;
  top: -.9em;
  left: 50%;
  margin: 0;
  padding: 0 .85em;
  transform: translateX(-50%);
  color: #e6ad55;
  background: #351304;
  font-size: clamp(12px, 1vw, 16px);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.setting-row {
  display: grid;
  grid-template-columns: minmax(90px, 22%) 1fr 42px;
  align-items: center;
  gap: 1em;
  min-height: 38px;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
  color: #f7d9a1;
}
.setting-row em {
  font-style: normal;
  color: #ebc279;
  font-weight: 1000;
}
.fake-slider {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 2px 2px rgba(0,0,0,.38);
}
.fake-slider i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f4ca4c, #e79c31);
}
.fake-slider b {
  position: absolute;
  top: 50%;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff3b8, #d69b24);
  box-shadow: 0 .25vh .45vh rgba(0,0,0,.35);
}
.setting-group--split {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}
.fake-select {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  width: min(100%, 260px);
  padding: .5em .75em;
  border-radius: 8px;
  border: 1px solid rgba(229,174,83,.35);
  background: rgba(0,0,0,.22);
}
.fake-select select {
  width: 100%;
  color: #ffe9b2;
  font-weight: 900;
  background: transparent;
  border: 0;
  outline: 0;
}
.social-list {
  display: grid;
  gap: 10px;
}
.social-link {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: .9em;
  min-height: 48px;
  padding: .38em .55em;
  border-radius: 12px;
  color: #fff1c8;
  text-decoration: none;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(221, 169, 80, .25);
}
.social-link span {
  width: 38px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
}
.social-link--facebook span { background: linear-gradient(180deg, #497fe9, #17449e); }
.social-link--tiktok span { background: linear-gradient(180deg, #252525, #020202); }
.social-link strong {
  font-size: clamp(13px, 1vw, 17px);
}
.social-link em {
  padding: .55em .85em;
  border-radius: 8px;
  color: #fff;
  text-transform: uppercase;
  font-style: normal;
  font-size: clamp(10px, .85vw, 13px);
  font-weight: 1000;
  background: linear-gradient(180deg, #61bf44, #257b1f);
  box-shadow: inset 0 .15vh 0 rgba(255,255,255,.18);
}
.setting-group--footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  font-weight: 1000;
}
.fake-toggle {
  width: 56px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 3px;
  background: linear-gradient(180deg, #51b43f, #266d1e);
  box-shadow: inset 0 .18vh 0 rgba(255,255,255,.15);
}
.fake-toggle i {
  display: block;
  margin-left: auto;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eaf0df;
  box-shadow: 0 .2vh .45vh rgba(0,0,0,.35);
}
.config-callout {
  position: absolute;
  right: -17%;
  bottom: 21%;
  width: clamp(118px, 12vw, 170px);
  margin: 0;
  color: #fff;
  font-size: clamp(10px, .95vw, 14px);
  line-height: 1.15;
  font-weight: 1000;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}
.config-callout::before {
  content: '↢';
  position: absolute;
  left: -54%;
  top: -28%;
  color: #e24d3a;
  font-size: clamp(48px, 6vw, 86px);
  transform: rotate(14deg);
  text-shadow: none;
}
.save-config-button {
  position: absolute;
  left: 50%;
  bottom: -8.2%;
  transform: translateX(-50%);
  min-width: clamp(220px, 28vw, 360px);
  min-height: clamp(44px, 6.8vh, 66px);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #f3ffe8;
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 1000;
  letter-spacing: .05em;
  background: linear-gradient(180deg, #55b83a, #207719);
  box-shadow: 0 .65vh 0 #104b0f, 0 1.1vh 1.4vh rgba(0,0,0,.34), inset 0 .22vh 0 rgba(255,255,255,.16);
}
.save-config-button:hover { filter: brightness(1.1); transform: translateX(-50%) translateY(-2px); }

@media (max-width: 1000px) {
  .selected-hero-zone { left: 45.5%; width: 34%; }
  .workshop-player { max-height: 96%; }
  .dialogue-box--miguel { left: 20%; }
  .config-panel--game { width: min(88vw, 900px); }
  .config-callout { display: none; }
}

@media (max-height: 560px) {
  .selected-hero-zone { height: 82%; bottom: .2%; }
  .workshop-player { max-height: 97%; }
  .masters-zone { height: 78%; }
  .master-sprite { max-height: 90%; }
  .dialogue-box { top: 8.6%; min-height: 15vh; }
  .dialogue-box--oscar { left: 4.4%; top: 9.2%; }
  .dialogue-box--miguel { left: 19%; top: 9.2%; }
  .config-panel--game { min-height: 72vh; padding-top: 48px; }
  .config-layout { gap: 14px; }
  .config-tab { min-height: 36px; }
  .setting-row { min-height: 31px; }
  .save-config-button { bottom: -6.4%; min-height: 42px; }
}

/* ===== AJUSTES V13: botones PNG, personaje centrado y configuración limpia ===== */
.workshop-stage .shop-button,
.workshop-stage .data-book {
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  z-index: 18;
}
.workshop-stage .shop-button {
  right: 3.7%;
  top: 10.6%;
  width: clamp(72px, 7.4vw, 112px);
  aspect-ratio: 320 / 360;
}
.workshop-stage .data-book {
  right: 4.05%;
  top: 27.1%;
  width: clamp(60px, 6.3vw, 94px);
  aspect-ratio: 260 / 330;
}
.workshop-stage .shop-button img,
.workshop-stage .data-book img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.workshop-stage .shop-button:hover,
.workshop-stage .data-book:hover {
  transform: translateY(-4px) scale(1.045);
  filter: brightness(1.12) drop-shadow(0 1vh 1.1vh rgba(0,0,0,.45));
}

/* Personaje del usuario: más grande que la base, pero sin recortarse */
.selected-hero-zone {
  left: 41.8%;
  bottom: .6%;
  width: 30%;
  height: 79%;
  overflow: visible;
}
.player-name-tag {
  top: .6%;
  width: 72%;
}
.workshop-player {
  max-height: 88%;
  max-width: 112%;
  object-fit: contain;
}

/* Maestros y globos mejor ubicados */
.masters-zone {
  left: 4.2%;
  bottom: .6%;
  width: 38.5%;
  height: 79%;
}
.master-sprite { max-height: 92%; }
.master-name { top: 1%; }
.dialogue-box--oscar {
  left: 4.3%;
  top: 11.4%;
}
.dialogue-box--miguel {
  left: 19.4%;
  top: 11.4%;
}
.dialogue-box--datos {
  left: auto;
  right: 13.4%;
  top: 20%;
}
.dialogue-box--tienda {
  left: auto;
  right: 12.3%;
  top: 11.5%;
}

/* Configuración: solo General, Sonido y Notificaciones + FB/TikTok */
.config-panel--game {
  width: min(74vw, 900px);
  min-height: min(68vh, 570px);
  padding-top: clamp(50px, 5vw, 68px);
}
.config-layout--simple {
  grid-template-columns: minmax(150px, 24%) 1fr;
}
.config-menu--simple {
  align-content: start;
}
.config-menu--simple .config-tab {
  min-height: clamp(48px, 7.1vh, 64px);
}
.config-content .setting-group:last-child {
  margin-top: 0;
}
.config-close { display: none; }
.config-callout {
  right: -17.5%;
  bottom: 22%;
}
.save-config-button {
  bottom: -7.5%;
}

@media (max-width: 1000px) {
  .selected-hero-zone { left: 40.5%; width: 32%; height: 78%; }
  .workshop-player { max-height: 86%; }
  .dialogue-box--miguel { left: 20.4%; }
  .workshop-stage .shop-button { right: 3%; width: clamp(64px, 8vw, 98px); }
  .workshop-stage .data-book { right: 3.5%; width: clamp(54px, 7vw, 84px); }
  .config-panel--game { width: min(88vw, 900px); }
}

@media (max-height: 560px) {
  .selected-hero-zone { height: 78%; bottom: .2%; }
  .workshop-player { max-height: 86%; }
  .workshop-stage .shop-button { top: 10%; transform-origin: top right; }
  .workshop-stage .data-book { top: 27%; transform-origin: top right; }
  .config-panel--game { min-height: 70vh; }
}

/* ===== V14: tienda de herramientas y maderas ===== */
.workshop-stage .shop-button,
.workshop-stage .data-book {
  position: absolute;
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  z-index: 18;
}
.workshop-stage .shop-button {
  right: 3.7%;
  top: 10.6%;
  width: clamp(74px, 7.6vw, 116px);
  aspect-ratio: 320 / 360;
}
.workshop-stage .data-book {
  right: 4.05%;
  top: 27.1%;
  width: clamp(62px, 6.4vw, 98px);
  aspect-ratio: 260 / 330;
}
.workshop-stage .shop-button img,
.workshop-stage .data-book img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.workshop-stage .shop-button:hover,
.workshop-stage .data-book:hover {
  transform: translateY(-4px) scale(1.045);
  filter: brightness(1.12) drop-shadow(0 1vh 1.1vh rgba(0,0,0,.45));
}

.store-stage {
  background: #170905;
}
.store-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 188, 74, .18), transparent 35%),
    linear-gradient(90deg, rgba(8,3,1,.18), transparent 18%, transparent 82%, rgba(8,3,1,.26)),
    linear-gradient(180deg, rgba(14,5,1,.05), rgba(11,4,1,.30));
}
.store-back-button {
  position: absolute;
  z-index: 22;
  left: 1.8%;
  top: 4%;
  width: clamp(46px, 5.1vw, 70px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  font-size: clamp(25px, 3vw, 44px);
  font-weight: 1000;
  background: radial-gradient(circle at 35% 28%, #ffe58d, #f6b12a 58%, #bc6b10);
  box-shadow: 0 .8vh 0 #78410d, 0 1.2vh 1.5vh rgba(0,0,0,.34), inset 0 .25vh 0 rgba(255,255,255,.35);
  transition: transform .18s ease, filter .18s ease;
}
.store-back-button:hover { transform: translateX(-3px) scale(1.06); filter: brightness(1.08); }
.store-top-title {
  position: absolute;
  z-index: 10;
  top: 4.6%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff6dc;
  text-transform: uppercase;
  font-weight: 1000;
  letter-spacing: .12em;
  font-size: clamp(13px, 1.4vw, 23px);
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 1.2vh rgba(255,215,104,.35);
  pointer-events: none;
}
.store-coins {
  top: 7%;
  right: 38.5%;
  min-width: clamp(105px, 12vw, 165px);
  height: clamp(44px, 6.8vh, 68px);
  z-index: 20;
}
.store-panel {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 15.5%;
  width: min(45vw, 575px);
  min-width: 450px;
  height: 70%;
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  gap: clamp(8px, 1.2vh, 15px);
  padding: clamp(54px, 7vh, 74px) clamp(24px, 2.5vw, 36px) clamp(22px, 3vh, 30px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(115,58,24,.96), rgba(51,22,8,.97)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 3px, transparent 3px 10px);
  border: clamp(4px, .45vw, 7px) solid #4b210a;
  box-shadow:
    0 1.5vh 2.6vh rgba(0,0,0,.42),
    inset 0 .35vh 0 rgba(255,231,171,.18),
    inset 0 0 0 4px rgba(188,112,47,.24);
}
.store-sign {
  position: absolute;
  top: -4.2%;
  left: 50%;
  width: 82%;
  min-height: clamp(56px, 8.2vh, 86px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: clamp(3px, .38vw, 6px) solid #5c2b0e;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #9d5b2c, #602b0f 68%, #361306);
  box-shadow: 0 .65vh 0 #2a1005, 0 1.2vh 1.8vh rgba(0,0,0,.34), inset 0 .22vh 0 rgba(255,255,255,.16);
}
.store-sign h2 {
  margin: 0;
  color: #ffe390;
  font-size: clamp(24px, 2.8vw, 46px);
  letter-spacing: .06em;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 1vh rgba(255,221,109,.38);
}
.store-category {
  position: relative;
  padding: clamp(23px, 3vh, 32px) clamp(12px, 1.3vw, 18px) clamp(10px, 1.4vh, 16px);
  border-radius: 12px;
  border: 3px solid rgba(52,22,7,.82);
  background: rgba(31,12,4,.48);
  box-shadow: inset 0 .22vh 0 rgba(255,255,255,.1);
}
.store-category h3 {
  position: absolute;
  top: -.72em;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  padding: 0 1.1em;
  color: #e6c391;
  font-size: clamp(16px, 1.55vw, 26px);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: #54270f;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.store-grid {
  display: grid;
  gap: clamp(10px, 1vw, 16px);
  height: 100%;
}
.store-grid--tools,
.store-grid--woods { grid-template-columns: repeat(4, 1fr); }
.store-item {
  position: relative;
  min-width: 0;
  border: 3px solid #2b1206;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: clamp(5px, .8vw, 10px);
  background:
    linear-gradient(180deg, rgba(255,225,165,.12), transparent 35%),
    linear-gradient(180deg, #6b3519, #2c1005);
  box-shadow: inset 0 .22vh 0 rgba(255,255,255,.12), 0 .55vh .9vh rgba(0,0,0,.24);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.store-item img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 .45vh .35vh rgba(0,0,0,.32));
}
.store-item:hover,
.store-item.is-active {
  transform: translateY(-5px) scale(1.06);
  border-color: #ffd35f;
  filter: brightness(1.12);
  z-index: 5;
}
.store-item::after {
  content: attr(data-price);
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  padding: .15em .65em;
  border-radius: 999px;
  color: #fff6c9;
  background: rgba(62,23,5,.95);
  border: 2px solid rgba(255,209,88,.45);
  font-size: clamp(9px, .85vw, 13px);
  font-weight: 1000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease, bottom .15s ease;
}
.store-item[data-price]:hover::after,
.store-item[data-price].is-active::after { opacity: 1; bottom: -20px; }
.store-varnish {
  position: absolute;
  right: -22.5%;
  top: 31.5%;
  width: clamp(70px, 7.6vw, 104px);
  aspect-ratio: 1;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  color: #fff2c5;
  font-weight: 1000;
  text-align: center;
  filter: drop-shadow(0 .8vh 1vh rgba(0,0,0,.42));
  transition: transform .16s ease, filter .16s ease;
}
.store-varnish img { width: 100%; display: block; }
.store-varnish span {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  font-size: clamp(9px, .75vw, 13px);
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.store-varnish:hover,
.store-varnish.is-active { transform: translateY(-4px) scale(1.08); filter: brightness(1.12) drop-shadow(0 1vh 1.1vh rgba(0,0,0,.46)); }
.store-price {
  justify-self: center;
  min-width: min(100%, 300px);
  padding: .55em 1.1em;
  border-radius: 10px;
  color: #fff2d4;
  text-align: center;
  font-weight: 1000;
  font-size: clamp(15px, 1.45vw, 24px);
  background: linear-gradient(180deg, #9b6a3e, #57301a);
  border: 2px solid rgba(255,222,139,.35);
  text-shadow: 0 2px 0 rgba(0,0,0,.36);
}
.store-master {
  position: absolute;
  z-index: 11;
  bottom: 2%;
  height: 68%;
  width: 22%;
  pointer-events: none;
}
.store-master img {
  position: absolute;
  bottom: 0;
  max-height: 83%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.2vh .7vh rgba(0,0,0,.45));
}
.store-master--oscar { left: 3.2%; }
.store-master--oscar img { left: 2%; }
.store-master--miguel { right: 3.2%; }
.store-master--miguel img { right: 4%; }
.store-name-tag {
  position: absolute;
  bottom: 1.6%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  padding: .38em 1.1em;
  border-radius: 9px;
  color: #fff2d4;
  font-size: clamp(11px, .95vw, 15px);
  font-weight: 1000;
  text-align: center;
  background: linear-gradient(180deg, #8d4a22, #552408);
  border: 3px solid #4b210a;
  box-shadow: 0 .45vh .8vh rgba(0,0,0,.28), inset 0 .18vh 0 rgba(255,255,255,.14);
}
.store-bubble {
  position: absolute;
  top: -10%;
  width: clamp(180px, 17vw, 255px);
  min-height: 120px;
  padding: .85em .9em;
  border-radius: 13px;
  color: #3e1908;
  text-align: center;
  background: linear-gradient(180deg, #fff0bd, #d9ad68);
  border: 4px solid #6d3716;
  box-shadow: 0 .8vh 1.2vh rgba(0,0,0,.32), inset 0 .22vh 0 rgba(255,255,255,.52);
  opacity: .98;
}
.store-bubble::after {
  content: '';
  position: absolute;
  bottom: -17px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 18px solid #6d3716;
}
.store-bubble--oscar { left: 2%; }
.store-bubble--oscar::after { left: 52%; }
.store-bubble--miguel { right: 0; }
.store-bubble--miguel::after { right: 50%; }
.store-bubble strong {
  display: block;
  margin-bottom: .25em;
  color: #8b251f;
  font-size: clamp(14px, 1.2vw, 18px);
  text-transform: uppercase;
}
.store-bubble p {
  margin: 0;
  line-height: 1.22;
  font-size: clamp(12px, 1.02vw, 16px);
  font-weight: 800;
}

@media (max-width: 1050px) {
  .store-panel { min-width: 400px; width: 48vw; }
  .store-varnish { right: -18%; }
  .store-master { width: 24%; }
  .store-bubble { width: clamp(160px, 19vw, 230px); }
}
@media (max-height: 620px) {
  .store-panel { top: 14%; height: 72%; padding-top: 50px; gap: 9px; }
  .store-category { padding-top: 22px; }
  .store-master { height: 66%; }
  .store-bubble { min-height: 100px; top: -13%; }
  .store-price { font-size: clamp(13px, 1.2vw, 19px); }
}

/* ===== V15: tienda ordenada, centrada y sin info visible por defecto ===== */
.store-top-title {
  top: 4.2%;
  left: 50%;
  width: 70%;
  text-align: center;
  font-size: clamp(15px, 1.65vw, 26px);
  letter-spacing: .08em;
}
.store-coins {
  left: 50%;
  right: auto;
  top: 7.2%;
  transform: translateX(-50%);
  min-width: clamp(110px, 13vw, 170px);
}
.store-panel {
  width: min(42vw, 560px);
  min-width: 500px;
  height: 68%;
  top: 17%;
  gap: 14px;
  padding: clamp(58px, 7.2vh, 78px) clamp(24px, 2.4vw, 34px) clamp(24px, 3vh, 32px);
}
.store-sign {
  top: -5.4%;
  width: 86%;
  min-height: clamp(58px, 8.4vh, 88px);
}
.store-sign h2 {
  font-size: clamp(24px, 2.9vw, 44px);
  line-height: 1;
}
.store-category {
  padding: clamp(26px, 3.2vh, 34px) clamp(14px, 1.4vw, 20px) clamp(14px, 1.7vh, 18px);
}
.store-grid {
  align-items: stretch;
}
.store-item {
  min-height: clamp(74px, 10.6vh, 100px);
  border-radius: 9px;
}
.store-item img {
  width: 82%;
  height: 82%;
}
.store-varnish {
  right: -18.5%;
  top: 34.2%;
  width: clamp(74px, 7.8vw, 108px);
}
.store-price {
  min-width: min(100%, 360px);
  min-height: 58px;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.store-price.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}
.store-master {
  width: 19%;
  height: 55%;
  bottom: 6%;
}
.store-master img {
  max-height: 84%;
}
.store-master--oscar { left: 2.8%; }
.store-master--miguel { right: 2.8%; }
.store-name-tag {
  bottom: 0;
  min-width: 78%;
  font-size: clamp(14px, 1vw, 18px);
}
.store-bubble {
  top: -3%;
  min-height: 128px;
  width: clamp(190px, 21vw, 270px);
  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.store-bubble.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.store-bubble--oscar { left: 0; }
.store-bubble--oscar::after { left: 52px; }
.store-bubble--miguel { right: 0; }
.store-bubble--miguel::after { right: 52px; }
.store-bubble strong {
  display: block;
  text-transform: uppercase;
  font-size: clamp(15px, 1.15vw, 19px);
  margin-bottom: .35em;
}
.store-bubble p {
  margin: 0;
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.38;
}
@media (max-width: 1100px) {
  .store-panel { width: min(48vw, 560px); min-width: 460px; }
  .store-master { width: 21%; }
  .store-bubble { width: clamp(180px, 22vw, 240px); }
  .store-varnish { right: -15%; }
}
@media (max-height: 650px) {
  .store-top-title { top: 3.8%; }
  .store-panel { top: 15.5%; height: 71%; }
  .store-master { height: 58%; }
  .store-bubble { min-height: 114px; }
}

/* ===== V16: recuperar configuración detallada y ajustar tienda ===== */
.config-panel--game {
  width: min(78vw, 920px);
  min-height: min(72vh, 590px);
  padding-top: clamp(52px, 5.5vw, 70px);
}
.config-header {
  margin-bottom: 18px;
}
.config-layout {
  grid-template-columns: minmax(170px, 26%) 1fr;
  gap: 18px;
}
.config-menu {
  align-content: start;
}
.config-tab {
  min-height: clamp(46px, 6.8vh, 62px);
}
.config-callout {
  right: -16%;
  bottom: 22%;
  max-width: 180px;
}
.save-config-button {
  bottom: -7%;
}

.store-top-title {
  top: 3.8%;
  width: 72%;
}
.store-coins {
  top: 6.6%;
}
.store-panel {
  top: 19.1%;
  height: 65.5%;
}
.store-sign {
  top: -5.2%;
}
.store-master {
  width: 21.5%;
  height: 60%;
  bottom: 4%;
}
.store-master img {
  max-height: 91%;
}
.store-master--oscar { left: 1.8%; }
.store-master--miguel { right: 1.8%; }
.store-bubble {
  top: -6%;
}
.store-bubble--oscar { left: 3%; }
.store-bubble--miguel { right: 3%; }

@media (max-width: 1100px) {
  .config-panel--game { width: min(90vw, 920px); }
  .config-callout { right: -12%; max-width: 150px; }
  .store-panel { width: min(50vw, 560px); min-width: 450px; }
  .store-master { width: 23%; }
}

@media (max-height: 650px) {
  .store-panel { top: 17.8%; height: 68%; }
  .store-master { height: 62%; bottom: 2%; }
}

/* ===== V17: selección de tallado / niveles ===== */
.levels-stage {
  background: #180a05;
}
.levels-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,2,0,.14), rgba(0,0,0,.18) 32%, rgba(5,1,0,.10) 62%, rgba(0,0,0,.22)),
    radial-gradient(circle at 50% 20%, rgba(255, 204, 113, .12), transparent 35%);
  z-index: 1;
}
.levels-back-button {
  position: absolute;
  left: 1.8%;
  top: 4.4%;
  z-index: 12;
  width: clamp(48px, 5vw, 70px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 1000;
  cursor: pointer;
  background: radial-gradient(circle at 35% 28%, #ffe58d, #f6b12a 58%, #bc6b10);
  box-shadow: 0 .8vh 0 #78410d, 0 1.2vh 1.5vh rgba(0,0,0,.34), inset 0 .25vh 0 rgba(255,255,255,.35);
}
.levels-title {
  position: absolute;
  top: 4.8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin: 0;
  color: #fff7e1;
  font-size: clamp(22px, 2.35vw, 38px);
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0,0,0,.45);
}
.levels-grid {
  position: absolute;
  left: 10.5%;
  right: 10.5%;
  top: 14%;
  bottom: 25%;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 34px);
  align-items: end;
}
.level-card {
  position: relative;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.level-request-card {
  width: clamp(82px, 9vw, 110px);
  height: clamp(82px, 9vw, 110px);
  margin-top: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9efdc, #e8d0a0);
  border: 4px solid #8e5726;
  box-shadow: 0 .65vh 0 #613515, 0 1vh 1.2vh rgba(0,0,0,.28);
  display: grid;
  place-items: center;
}
.level-request-card img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  image-rendering: auto;
}
.level-card__tag {
  margin-top: 10px;
  color: #fff;
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 900;
  text-transform: lowercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
}
.level-character {
  width: min(100%, 180px);
  max-height: 67%;
  object-fit: contain;
  margin-top: 10px;
  filter: drop-shadow(0 1.2vh 1vh rgba(0,0,0,.38));
}
.level-card--locked .level-character {
  filter: brightness(.4) saturate(.75) drop-shadow(0 1.2vh 1vh rgba(0,0,0,.46));
}
.level-lock {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  width: clamp(44px, 5vw, 66px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(24px, 2.7vw, 34px);
  background: linear-gradient(180deg, #fff7dd, #d8b668);
  box-shadow: 0 .55vh 0 #7e5a1d, 0 .8vh 1vh rgba(0,0,0,.32);
}
.level-card.is-selected .level-request-card,
.level-card:hover .level-request-card {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 .65vh 0 #613515, 0 1.5vh 1.6vh rgba(0,0,0,.34), 0 0 0 3px rgba(255, 216, 93, .4);
}
.level-card.is-selected .level-card__tag {
  color: #ffd76d;
}
.levels-note-badge {
  position: absolute;
  left: 4.3%;
  top: 21.5%;
  z-index: 9;
  width: clamp(90px, 11vw, 128px);
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(14, 8, 8, .94);
  color: #fff;
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 .6vh 1vh rgba(0,0,0,.28);
}
.parchment-request {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4.5%;
  height: 23%;
  z-index: 8;
  border-radius: 18px 18px 8px 8px;
  background:
    radial-gradient(circle at 2% 58%, #e8d0a1 0 18px, transparent 19px),
    radial-gradient(circle at 98% 58%, #e8d0a1 0 18px, transparent 19px),
    linear-gradient(180deg, #f1e0bd, #e8d0a1 75%, #d1b07a);
  border: 3px solid rgba(115, 76, 31, .58);
  box-shadow: 0 1.2vh 1.8vh rgba(0,0,0,.26), inset 0 .25vh 0 rgba(255,255,255,.28);
}
.parchment-request::before,
.parchment-request::after {
  content: '';
  position: absolute;
  top: -7px;
  width: 22px;
  height: calc(100% + 14px);
  border-radius: 11px;
  background: linear-gradient(180deg, #f8ebcf, #e1c38e 72%, #c49a5d);
  border: 2px solid rgba(115, 76, 31, .55);
}
.parchment-request::before { left: -6px; }
.parchment-request::after { right: -6px; }
.parchment-request__inner {
  position: absolute;
  inset: 14px 28px 16px;
  overflow: auto;
}
#levelRequestText {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: #3a1e0d;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.35;
}
@media (max-width: 1100px) {
  .levels-grid { left: 9%; right: 9%; gap: 18px; }
  .levels-note-badge { left: 2.5%; width: 100px; }
  .level-character { width: min(100%, 160px); }
}
@media (max-height: 650px) {
  .levels-grid { top: 12.5%; bottom: 23%; }
  .parchment-request { height: 24%; }
  #levelRequestText { font-size: clamp(16px, 1.25vw, 22px); }
}

/* ===== V18: mejorar vista de niveles ===== */
.levels-grid {
  left: 12%;
  right: 12%;
  top: 13.5%;
  bottom: 26%;
  gap: clamp(28px, 2.8vw, 44px);
}
.level-request-card {
  width: clamp(92px, 10vw, 122px);
  height: clamp(92px, 10vw, 122px);
  padding: 10px;
}
.level-request-card img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}
.level-character {
  width: min(100%, 215px);
  max-height: 72%;
  margin-top: 14px;
}
.level-card--locked .level-character {
  opacity: .62;
}
.level-lock {
  bottom: 25%;
  z-index: 4;
}
.parchment-request {
  left: 5.2%;
  right: 5.2%;
  height: 24.5%;
}
#levelRequestText {
  font-size: clamp(17px, 1.32vw, 22px);
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .levels-grid { left: 9%; right: 9%; }
  .level-character { width: min(100%, 185px); }
}

/* ===== V19: correcciones de configuración y niveles ===== */
/* Restaurar panel de configuración visual más estable */
.config-panel--game {
  width: min(74vw, 900px);
  min-height: min(68vh, 570px);
  padding: clamp(18px, 2.1vw, 30px);
  padding-top: clamp(50px, 5vw, 68px);
}
.config-header {
  top: -3.4%;
  width: min(56%, 520px);
}
.config-layout {
  grid-template-columns: minmax(168px, 26%) 1fr;
  gap: clamp(14px, 1.8vw, 24px);
}
.config-menu {
  align-content: start;
}
.config-tab {
  min-height: clamp(44px, 6.2vh, 56px);
}
.config-callout {
  right: -15.5%;
  bottom: 22%;
}
.save-config-button {
  bottom: -7.2%;
}

/* Flechas con mejor feedback visual */
.levels-back-button,
.store-back-button,
.config-back {
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.levels-back-button:hover,
.store-back-button:hover,
.config-back:hover {
  filter: brightness(1.08);
  transform: translateX(-3px) scale(1.04);
}

/* Pantalla de niveles más centrada */
.levels-title {
  top: 5.2%;
  width: 70%;
  text-align: center;
}
.levels-grid {
  left: 11.5%;
  right: 11.5%;
  top: 15.5%;
  bottom: 31%;
  align-items: stretch;
  gap: clamp(26px, 2.6vw, 40px);
}
.level-card {
  position: relative;
  min-height: 100%;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}
.level-request-card {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 9.4vw, 116px);
  height: clamp(90px, 9.4vw, 116px);
}
.level-request-card img {
  width: 64%;
  height: 64%;
}
.level-card__tag {
  position: absolute;
  top: clamp(102px, 10.6vw, 128px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
  text-align: center;
}
.level-character {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 190px);
  max-height: 64%;
  object-fit: contain;
  margin-top: 0;
}
.level-card[data-level="1"] .level-character { width: min(100%, 200px); }
.level-card[data-level="2"] .level-character { width: min(100%, 188px); }
.level-card[data-level="3"] .level-character { width: min(100%, 184px); }
.level-card--locked .level-character {
  opacity: .55;
}
.level-lock {
  bottom: 24%;
  z-index: 5;
}
.level-card.is-selected .level-request-card,
.level-card:hover .level-request-card {
  transform: translateX(-50%) translateY(-4px) scale(1.04);
}
.level-card.is-selected .level-character,
.level-card:hover .level-character {
  filter: drop-shadow(0 1.4vh 1.2vh rgba(0,0,0,.38));
}
.parchment-request {
  left: 6.2%;
  right: 6.2%;
  bottom: 4.2%;
  height: 22.8%;
}
#levelRequestText {
  font-size: clamp(16px, 1.18vw, 21px);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .config-panel--game { width: min(88vw, 900px); }
  .config-callout { display:none; }
  .levels-grid { left: 8.5%; right: 8.5%; gap: 20px; }
  .level-character { width: min(100%, 165px); }
}

@media (max-height: 650px) {
  .levels-grid { top: 14.5%; bottom: 29%; }
  .level-character { max-height: 60%; }
  .parchment-request { height: 23.5%; }
}

/* ===== V20: vista de niveles conectada a INICIEMOS ===== */
.levels-scene {
  position: relative;
  overflow: hidden;
  background: #1c0a04;
}
.levels-scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.levels-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.12) 38%, rgba(0,0,0,.18));
}
.levels-back-button {
  position: absolute;
  z-index: 5;
  left: 1.7%;
  top: 3.2%;
  width: clamp(52px, 5.2vw, 74px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 1000;
  background: radial-gradient(circle at 35% 28%, #ffe58d, #f6b12a 58%, #bc6b10);
  box-shadow: 0 .8vh 0 #78410d, 0 1.2vh 1.5vh rgba(0,0,0,.34), inset 0 .25vh 0 rgba(255,255,255,.35);
  transition: transform .18s ease, filter .18s ease;
}
.levels-back-button:hover { transform: translateX(-3px) scale(1.05); filter: brightness(1.08); }
.levels-scene__title {
  position: absolute;
  z-index: 4;
  top: 4.3%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 72%;
  text-align: center;
  color: #fff8ea;
  font-size: clamp(22px, 2.35vw, 38px);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 .4vh .9vh rgba(0,0,0,.35);
}
.levels-board {
  position: absolute;
  z-index: 4;
  left: 10%;
  right: 10%;
  top: 13.2%;
  height: 48%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 52px);
  align-items: end;
}
.level-card {
  position: relative;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.level-card:focus-visible {
  outline: 3px solid rgba(255, 218, 116, .9);
  outline-offset: 6px;
  border-radius: 16px;
}
.level-sculpture-card {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 9vw, 116px);
  height: clamp(90px, 9vw, 116px);
  border-radius: 14px;
  background: linear-gradient(180deg, #fdf7ea, #f1dfbd 80%, #e0c391);
  border: 4px solid #855227;
  box-shadow: 0 .55vh 0 #5a3213, 0 1vh 1.25vh rgba(0,0,0,.32);
  display: grid;
  place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.level-sculpture-card img {
  width: 64%;
  height: 64%;
  object-fit: contain;
  filter: drop-shadow(0 .25vh .35vh rgba(0,0,0,.18));
}
.level-card__tag {
  position: absolute;
  top: clamp(101px, 10vw, 124px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: clamp(18px, 1.7vw, 28px);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(0,0,0,.7);
}
.level-character {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  max-height: 68%;
  width: auto;
  max-width: 86%;
  object-fit: contain;
  filter: drop-shadow(0 1vh 1vh rgba(0,0,0,.38));
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.level-card[data-level="1"] .level-character { max-height: 76%; max-width: 78%; }
.level-card[data-level="2"] .level-character { max-height: 75%; max-width: 72%; }
.level-card[data-level="3"] .level-character { max-height: 78%; max-width: 76%; }
.level-card__shade {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 74%;
  height: 66%;
  border-radius: 18px;
  background: rgba(0,0,0,.52);
  box-shadow: inset 0 .3vh 1vh rgba(0,0,0,.45);
}
.level-lock {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translateX(-50%);
  width: clamp(50px, 5.4vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff6da, #ddbb6e);
  color: #7a5317;
  font-size: clamp(28px, 2.8vw, 40px);
  box-shadow: 0 .5vh 0 #876020, 0 .8vh 1.1vh rgba(0,0,0,.28);
}
.level-card--locked .level-character { opacity: .7; }
.level-card.is-selected .level-sculpture-card,
.level-card:hover .level-sculpture-card {
  transform: translateX(-50%) translateY(-4px) scale(1.03);
  box-shadow: 0 .55vh 0 #5a3213, 0 1.4vh 1.6vh rgba(0,0,0,.32), 0 0 0 3px rgba(255,223,124,.35);
}
.level-card.is-selected .level-card__tag { color: #ffe17f; }
.level-card.is-selected .level-character,
.level-card:hover .level-character { transform: translateX(-50%) translateY(-4px); }
.levels-text-zone {
  position: absolute;
  z-index: 4;
  left: 7%;
  right: 7%;
  bottom: 5.2%;
  height: 16.5%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.8% 3.6%;
  overflow: hidden;
}
#levelRequestText {
  margin: 0;
  width: 100%;
  color: #2f1a0f;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(17px, 1.23vw, 22px);
  line-height: 1.46;
  text-align: left;
}

@media (max-width: 1100px) {
  .levels-board { left: 7%; right: 7%; gap: 20px; }
  .levels-scene__title { width: 80%; }
  .level-card__tag { font-size: clamp(16px, 1.45vw, 24px); }
  #levelRequestText { font-size: clamp(15px, 1.08vw, 19px); }
}

@media (max-height: 680px) {
  .levels-board { top: 12.4%; height: 50%; }
  .levels-text-zone { bottom: 4.5%; height: 17.5%; }
  #levelRequestText { font-size: clamp(15px, 1.05vw, 18px); }
}

/* ===== V21: personajes más grandes y botón iniciar nivel ===== */
.levels-board {
  left: 8.8%;
  right: 8.8%;
  top: 12.2%;
  height: 52%;
  gap: clamp(18px, 2.1vw, 34px);
}
.level-card[data-level="1"] .level-character {
  max-height: 87%;
  max-width: 92%;
}
.level-card[data-level="2"] .level-character {
  max-height: 86%;
  max-width: 84%;
}
.level-card[data-level="3"] .level-character {
  max-height: 88%;
  max-width: 88%;
}
.level-character {
  bottom: -1%;
  filter: drop-shadow(0 1.2vh 1vh rgba(0,0,0,.42));
}
.level-card__tag {
  top: clamp(98px, 9.8vw, 121px);
}
.level-card__shade {
  width: 78%;
  height: 70%;
  bottom: 1%;
  background: rgba(0,0,0,.48);
}
.level-lock {
  bottom: 19%;
}
.levels-text-zone {
  bottom: 4.4%;
  height: 18.5%;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
#levelRequestText {
  min-height: 54%;
}
.level-start-button {
  align-self: center;
  min-width: clamp(200px, 21vw, 300px);
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff7d8;
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffd760, #f0a81b 60%, #cc7b08);
  box-shadow: 0 .55vh 0 #95520a, 0 1vh 1.2vh rgba(0,0,0,.22), inset 0 .22vh 0 rgba(255,255,255,.4);
  transition: transform .18s ease, filter .18s ease;
}
.level-start-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}
.level-start-button.is-hidden {
  display: none;
}
.level-start-button:disabled,
.level-start-button.is-disabled {
  background: linear-gradient(180deg, #bca781, #8d7354 60%, #6f573c);
  color: #f8eed6;
  cursor: not-allowed;
  box-shadow: 0 .45vh 0 #584633, 0 .8vh 1vh rgba(0,0,0,.18), inset 0 .2vh 0 rgba(255,255,255,.25);
}
@media (max-width: 1100px) {
  .levels-board { left: 6.2%; right: 6.2%; }
  .levels-text-zone { height: 19.5%; }
}

/* ===== V23: rediseño limpio de pantalla de niveles ===== */
.levels-scene {
  background: #1b0b05;
}
.levels-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,9,3,.12), rgba(17,7,3,.18) 54%, rgba(10,4,1,.22));
}
.levels-scene__bg {
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}
.levels-back-button {
  left: 2.2%;
  top: 3.5%;
  width: clamp(54px, 5.5vw, 78px);
  z-index: 8;
}
.levels-scene__title {
  top: 4.2%;
  width: 78%;
  z-index: 8;
  font-size: clamp(24px, 2.55vw, 40px);
}
.levels-board {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13.8%;
  height: 56%;
  gap: clamp(22px, 2.8vw, 42px);
  z-index: 7;
}
.level-card {
  position: relative;
  overflow: visible;
}
.level-sculpture-card {
  top: 0;
  width: clamp(102px, 10vw, 126px);
  height: clamp(102px, 10vw, 126px);
  border-radius: 14px;
  background: linear-gradient(180deg, #f6eddc, #ead5b0 75%, #d6b47f);
  border: 4px solid #8a5628;
  box-shadow: 0 .62vh 0 #603617, 0 1.1vh 1.3vh rgba(0,0,0,.25);
}
.level-sculpture-card img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  image-rendering: auto;
}
.level-card__tag {
  top: clamp(112px, 10.8vw, 136px);
  z-index: 8;
  font-size: clamp(18px, 1.6vw, 26px);
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.7);
}
.level-character {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 1.1vh 1.1vh rgba(0,0,0,.42));
  z-index: 4;
}
.level-card[data-level="1"] .level-character {
  max-height: 84%;
  max-width: 88%;
}
.level-card[data-level="2"] .level-character {
  max-height: 82%;
  max-width: 80%;
}
.level-card[data-level="3"] .level-character {
  max-height: 83%;
  max-width: 84%;
}
.level-card__shade {
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 78%;
  height: 68%;
  border-radius: 18px;
  background: rgba(0,0,0,.42);
  z-index: 5;
}
.level-lock {
  bottom: 22%;
  z-index: 6;
}
.level-card--locked .level-character {
  opacity: .83;
}
.level-card.is-selected .level-sculpture-card,
.level-card:hover .level-sculpture-card {
  transform: translateX(-50%) translateY(-4px) scale(1.03);
  box-shadow: 0 .62vh 0 #603617, 0 1.6vh 1.8vh rgba(0,0,0,.28), 0 0 0 3px rgba(255,224,124,.34);
}
.level-card.is-selected .level-character,
.level-card:hover .level-character {
  transform: translateX(-50%) translateY(-4px);
}
.level-card.is-selected .level-card__tag {
  color: #ffe48a;
}
.levels-text-zone {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4.2%;
  min-height: 20%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 2.2% 4.2% 2.4%;
  background: linear-gradient(180deg, rgba(241,226,195,.98), rgba(230,206,163,.97) 78%, rgba(207,171,119,.96));
  border-radius: 18px 18px 12px 12px;
  border: 3px solid rgba(123, 79, 35, .58);
  box-shadow: 0 1.2vh 1.6vh rgba(0,0,0,.25), inset 0 .22vh 0 rgba(255,255,255,.22);
}
.levels-text-zone::before,
.levels-text-zone::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbf0d3, #dec08c 74%, #c89859);
  border: 2px solid rgba(123, 79, 35, .48);
}
.levels-text-zone::before { left: -12px; }
.levels-text-zone::after { right: -12px; }
#levelRequestText {
  width: 100%;
  margin: 0;
  color: #2b180d;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(18px, 1.18vw, 21px);
  line-height: 1.5;
  text-align: left;
  min-height: 72px;
}
.level-start-button {
  min-width: clamp(220px, 22vw, 320px);
  padding: 12px 28px;
}
.level-start-button.is-hidden {
  display: none;
}
@media (max-width: 1100px) {
  .levels-board {
    left: 5%;
    right: 5%;
    gap: 18px;
  }
  .levels-scene__title { width: 84%; }
  .level-card[data-level="1"] .level-character { max-width: 82%; }
  .level-card[data-level="2"] .level-character { max-width: 74%; }
  .level-card[data-level="3"] .level-character { max-width: 76%; }
  #levelRequestText { font-size: clamp(16px, 1.08vw, 18px); }
}
@media (max-height: 680px) {
  .levels-board { top: 12.5%; height: 57%; }
  .levels-text-zone { min-height: 21%; }
  #levelRequestText { min-height: 64px; }
}

/* ===== V24: corrección real de pantalla de niveles ===== */
#pantalla-desafio .game-stage.levels-scene {
  position: relative;
  overflow: hidden;
  background: #1a0904;
}
#pantalla-desafio .levels-scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
#pantalla-desafio .levels-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.10) 55%, rgba(0,0,0,.14));
}
#pantalla-desafio .levels-back-button {
  position: absolute;
  z-index: 20;
  left: 2.2%;
  top: 3.4%;
  width: clamp(52px, 5vw, 74px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 1000;
  color: #fff;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffe998, #f5b92d 58%, #c07110);
  box-shadow: 0 .55vh 0 #8e4a0d, 0 1vh 1.3vh rgba(0,0,0,.28), inset 0 .22vh 0 rgba(255,255,255,.32);
  transition: transform .18s ease, filter .18s ease;
}
#pantalla-desafio .levels-back-button:hover { transform: scale(1.04); filter: brightness(1.06); }
#pantalla-desafio .levels-scene__title {
  position: absolute;
  z-index: 20;
  top: 3.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  margin: 0;
  text-align: center;
  color: #fff5e8;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 .3vh .8vh rgba(0,0,0,.25);
}
#pantalla-desafio .levels-board {
  position: absolute;
  z-index: 18;
  left: 7%;
  right: 7%;
  top: 13.2%;
  bottom: 27.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(22px, 2.5vw, 40px);
  align-items: end;
}
#pantalla-desafio .level-card {
  position: relative;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: visible;
}
#pantalla-desafio .level-card:focus-visible {
  outline: 3px solid rgba(255,224,126,.95);
  outline-offset: 6px;
  border-radius: 18px;
}
#pantalla-desafio .level-sculpture-card {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: clamp(98px, 10vw, 122px);
  height: clamp(98px, 10vw, 122px);
  border-radius: 14px;
  background: linear-gradient(180deg, #faf0de, #ecd7ae 80%, #ddb57c);
  border: 4px solid #8a5627;
  display: grid;
  place-items: center;
  box-shadow: 0 .58vh 0 #5e3315, 0 .95vh 1.2vh rgba(0,0,0,.22);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
#pantalla-desafio .level-sculpture-card img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}
#pantalla-desafio .level-card__tag {
  position: absolute;
  z-index: 19;
  top: clamp(110px, 10.4vw, 134px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(0,0,0,.72);
}
#pantalla-desafio .level-character {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 95%;
  filter: drop-shadow(0 1vh 1.2vh rgba(0,0,0,.38));
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
#pantalla-desafio .level-card[data-level="1"] .level-character {
  max-height: 88%;
  max-width: 86%;
}
#pantalla-desafio .level-card[data-level="2"] .level-character {
  max-height: 86%;
  max-width: 78%;
}
#pantalla-desafio .level-card[data-level="3"] .level-character {
  max-height: 87%;
  max-width: 81%;
}
#pantalla-desafio .level-card__shade {
  position: absolute;
  z-index: 19;
  left: 50%;
  bottom: 1.5%;
  transform: translateX(-50%);
  width: 78%;
  height: 68%;
  border-radius: 18px;
  background: rgba(0,0,0,.48);
}
#pantalla-desafio .level-lock {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  width: clamp(54px, 5.4vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff3ce, #e0c274);
  color: #825918;
  font-size: clamp(30px, 2.9vw, 42px);
  box-shadow: 0 .45vh 0 #876122, 0 .8vh 1vh rgba(0,0,0,.22);
}
#pantalla-desafio .level-card--locked .level-character { opacity: .84; }
#pantalla-desafio .level-card.is-selected .level-sculpture-card,
#pantalla-desafio .level-card:hover .level-sculpture-card {
  transform: translateX(-50%) translateY(-4px) scale(1.03);
  box-shadow: 0 .58vh 0 #5e3315, 0 1.25vh 1.5vh rgba(0,0,0,.24), 0 0 0 3px rgba(255,224,126,.35);
}
#pantalla-desafio .level-card.is-selected .level-character,
#pantalla-desafio .level-card:hover .level-character {
  transform: translateX(-50%) translateY(-4px);
}
#pantalla-desafio .level-card.is-selected .level-card__tag { color: #ffe38d; }
#pantalla-desafio .levels-text-zone {
  position: absolute;
  z-index: 20;
  left: 6.5%;
  right: 6.5%;
  bottom: 4.2%;
  min-height: 26.6%;
  padding: 1.9% 3.8% 2.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(247,236,208,.98), rgba(234,211,168,.98) 76%, rgba(214,181,124,.98));
  border: 3px solid rgba(125,82,39,.58);
  border-radius: 18px 18px 14px 14px;
  box-shadow: 0 1vh 1.35vh rgba(0,0,0,.22), inset 0 .22vh 0 rgba(255,255,255,.20);
}
#pantalla-desafio .levels-text-zone::before,
#pantalla-desafio .levels-text-zone::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 24px;
  border-radius: 15px;
  background: linear-gradient(180deg, #fcf0d0, #e3c58b 75%, #cd9d61);
  border: 2px solid rgba(125,82,39,.44);
}
#pantalla-desafio .levels-text-zone::before { left: -10px; }
#pantalla-desafio .levels-text-zone::after { right: -10px; }
#pantalla-desafio #levelRequestText {
  width: 100%;
  margin: 0;
  min-height: 66px;
  color: #2b180d;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(17px, 1.16vw, 21px);
  line-height: 1.5;
  text-align: left;
}
#pantalla-desafio .level-start-button {
  min-width: clamp(220px, 22vw, 320px);
  padding: 12px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff8e2;
  font-size: clamp(16px, 1.22vw, 21px);
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffd861, #f2ab1d 60%, #d17e09);
  box-shadow: 0 .5vh 0 #97560c, 0 .95vh 1.1vh rgba(0,0,0,.18), inset 0 .2vh 0 rgba(255,255,255,.35);
  transition: transform .18s ease, filter .18s ease;
}
#pantalla-desafio .level-start-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.04);
}
#pantalla-desafio .level-start-button.is-hidden { display: none; }
#pantalla-desafio .level-start-button:disabled,
#pantalla-desafio .level-start-button.is-disabled {
  background: linear-gradient(180deg, #baa47f, #957a59 60%, #745a3f);
  box-shadow: 0 .45vh 0 #5c4734, 0 .8vh 1vh rgba(0,0,0,.16), inset 0 .18vh 0 rgba(255,255,255,.22);
  color: #f7edd5;
  cursor: not-allowed;
}
@media (max-width: 1100px) {
  #pantalla-desafio .levels-board { left: 5.3%; right: 5.3%; gap: 18px; }
  #pantalla-desafio .levels-scene__title { width: 84%; }
  #pantalla-desafio .level-card[data-level="1"] .level-character { max-width: 82%; }
  #pantalla-desafio .level-card[data-level="2"] .level-character { max-width: 74%; }
  #pantalla-desafio .level-card[data-level="3"] .level-character { max-width: 76%; }
  #pantalla-desafio #levelRequestText { font-size: clamp(15px, 1.03vw, 18px); }
}


/* ===== V25: NIVEL 1 JUGABLE / DIBUJO + TALLADO 3D ===== */
.level-game-stage {
  position: relative;
  overflow: hidden;
  background: #1b0b05;
}

.level-game-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.level-game-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 217, 125, .08), transparent 42%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22));
  pointer-events: none;
  z-index: 1;
}

.level-game-back {
  z-index: 30 !important;
}

.level-hud {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  width: min(54vw, 620px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(0,0,0,.55);
}

.level-hud span {
  white-space: nowrap;
}

.level-master {
  position: absolute;
  z-index: 18;
  left: 4.3%;
  bottom: 14%;
  width: clamp(140px, 16vw, 230px);
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.level-master img {
  max-width: 100%;
  max-height: 45vh;
  object-fit: contain;
  filter: drop-shadow(0 1vh 1.1vh rgba(0,0,0,.38));
}

.level-speech {
  margin-top: -4px;
  width: 92%;
  padding: 12px 12px;
  border-radius: 12px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(11px, .95vw, 16px);
  font-weight: 1000;
  line-height: 1.16;
  background: #101010;
  border: 4px solid #f7efd6;
  box-shadow: 0 .5vh .8vh rgba(0,0,0,.32);
}

.drawing-workbench {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 9.5%;
  transform: translateX(-50%);
  width: min(44vw, 560px);
  height: 78%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 10px;
}

.drawing-workbench h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.55);
}

.sketch-paper {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 45% 40%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(180deg, #f3dfb5, #e5c690 78%, #cf9e5d);
  border: 5px solid rgba(86, 51, 19, .55);
  box-shadow: 0 1.4vh 2.2vh rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.28);
  overflow: hidden;
  touch-action: none;
  cursor: none;
}

.sketch-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(94,54,20,.08) 16px 17px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(94,54,20,.05) 21px 22px);
  pointer-events: none;
}

.cross-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgba(255, 218, 130, .17);
  stroke: rgba(44, 31, 20, .42);
  stroke-width: 8;
  stroke-linejoin: round;
  pointer-events: none;
  z-index: 1;
}

#drawCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.pencil-cursor {
  position: absolute;
  z-index: 4;
  width: 82px;
  height: 16px;
  border-radius: 999px;
  transform: translate(-14px, -4px) rotate(-28deg);
  background: linear-gradient(90deg, #2d1d12 0 12%, #f0c271 12% 85%, #1d1d1d 85% 100%);
  box-shadow: 0 .35vh .5vh rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0;
}

.pencil-cursor::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 2px;
  border-left: 12px solid #d9b884;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.pencil-cursor.is-active {
  opacity: 1;
}

.level-message {
  margin: 0;
  width: 100%;
  max-width: 520px;
  color: #fff3d7;
  text-align: center;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,.52);
}

.level-target-card {
  position: absolute;
  z-index: 17;
  right: 5.2%;
  top: 26%;
  width: clamp(100px, 10vw, 150px);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.level-target-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff6e7, #eed5a6);
  border: 4px solid #8c5527;
  box-shadow: 0 .7vh 1.1vh rgba(0,0,0,.28);
}

.level-target-card strong {
  padding: .28em .7em;
  border-radius: 8px;
  color: #fff;
  background: #0d0d0d;
  border: 3px solid #f7efd6;
  font-size: clamp(13px, 1.15vw, 20px);
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

/* Tallado 3D */
.carving-workbench {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 11%;
  transform: translateX(-50%);
  width: min(49vw, 680px);
  height: 77%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 10px;
  justify-items: center;
}

.three-carving {
  position: relative;
  width: 100%;
  height: min(58vh, 520px);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,213,122,.14), transparent 45%),
    linear-gradient(180deg, rgba(82, 45, 18, .14), rgba(10,4,1,.18));
  box-shadow: 0 1.3vh 2vh rgba(0,0,0,.25);
  cursor: none;
  touch-action: none;
}

.three-carving canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.carve-cursor {
  position: absolute;
  z-index: 26;
  width: 92px;
  height: 20px;
  transform: translate(-16px, -8px) rotate(-24deg);
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #211713 0 17%, #7b4f29 17% 78%, #d6d0c4 78% 100%);
  box-shadow: 0 .35vh .65vh rgba(0,0,0,.32);
}

.carve-cursor::after {
  content: '';
  position: absolute;
  right: -18px;
  top: 3px;
  border-left: 20px solid #cfc8ba;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.carve-cursor.is-active {
  opacity: 1;
}

.wood-chip {
  position: absolute;
  z-index: 30;
  width: 12px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d0a269, #7e4d24);
  pointer-events: none;
  animation: chipFall .65s ease-out forwards;
}

@keyframes chipFall {
  from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  to { opacity: 0; transform: translate(24px, 38px) rotate(85deg); }
}

.level-finish-button {
  min-width: clamp(220px, 22vw, 320px);
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff8e2;
  font-size: clamp(16px, 1.22vw, 21px);
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #56c044, #26851f 72%, #175d14);
  box-shadow: 0 .5vh 0 #0e4110, 0 .95vh 1.1vh rgba(0,0,0,.2), inset 0 .2vh 0 rgba(255,255,255,.24);
}

.level-finish-button.is-hidden {
  display: none;
}

@media (max-width: 1100px) {
  .level-master { left: 2.5%; width: clamp(120px, 15vw, 185px); }
  .drawing-workbench { width: min(48vw, 500px); }
  .carving-workbench { width: min(54vw, 650px); }
  .level-target-card { right: 3.2%; }
  .level-hud { width: min(62vw, 620px); }
}

@media (max-height: 650px) {
  .drawing-workbench { top: 8%; height: 80%; }
  .sketch-paper { width: min(100%, 420px); }
  .level-master img { max-height: 38vh; }
  .three-carving { height: 52vh; }
}


/* ===== V26: dibujo guiado sin rayones + lápiz corregido + madera deformable ===== */
.cross-guide {
  fill: none !important;
}

.cross-outline {
  fill: rgba(255, 218, 130, .11);
  stroke: rgba(58, 44, 30, .42);
  stroke-width: 7;
  stroke-linejoin: round;
}

.trace-path {
  fill: none;
  stroke: rgba(54, 38, 24, .92);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.16));
}

.pencil-cursor {
  width: 92px;
  height: 18px;
  transform: translate(-86px, -7px) rotate(-24deg);
  background: linear-gradient(90deg, #1d1d1d 0 10%, #d9b884 10% 22%, #f0c271 22% 86%, #262626 86% 100%);
}

.pencil-cursor::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 2px;
  border-right: 16px solid #2a211b;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.pencil-cursor::after {
  display: none;
}

.sketch-paper {
  cursor: none;
}

.carve-stage .three-carving {
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 215, 120, .16), transparent 42%),
    linear-gradient(180deg, rgba(91, 53, 24, .08), rgba(10,4,1,.16));
}

.carve-stage .level-message {
  max-width: 720px;
}


/* ===== V27: sin contador de movimientos + boceto por movimiento + tallado con forma ===== */
.level-hud--single {
  width: auto;
  justify-content: center;
  min-width: clamp(180px, 18vw, 280px);
}

#drawMoves,
#carveMoves {
  display: none;
}

.trace-path {
  display: none;
}

#drawCanvas {
  mix-blend-mode: multiply;
}

.cross-outline {
  fill: rgba(255, 218, 130, .08);
  stroke: rgba(55, 42, 30, .45);
  stroke-width: 7;
  stroke-linejoin: round;
}

.pencil-cursor {
  width: 92px;
  height: 18px;
  transform: translate(-86px, -7px) rotate(-24deg);
  background: linear-gradient(90deg, #1d1d1d 0 10%, #d9b884 10% 22%, #f0c271 22% 86%, #262626 86% 100%);
}

.pencil-cursor::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 2px;
  border-right: 16px solid #2a211b;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.pencil-cursor::after {
  display: none;
}

.carve-stage .level-message {
  max-width: 760px;
}

.three-carving {
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 215, 120, .12), transparent 42%),
    linear-gradient(180deg, rgba(91, 53, 24, .06), rgba(10,4,1,.14));
}


/* ===== V28: contorno real de dibujo + tallado por niveles ===== */
.trace-path {
  display: none !important;
}

.cross-outline {
  fill: none !important;
  stroke: rgba(68, 54, 39, .46) !important;
  stroke-width: 7 !important;
  stroke-linejoin: round;
}

#drawCanvas {
  mix-blend-mode: multiply;
}

.pencil-cursor {
  transform: translate(-86px, -7px) rotate(-24deg);
}

.carve-stage .three-carving {
  height: min(60vh, 540px);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 222, 138, .12), transparent 43%),
    linear-gradient(180deg, rgba(91, 53, 24, .04), rgba(10,4,1,.12));
}

.carve-stage .level-message {
  max-width: 800px;
}

.carve-cursor {
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.26));
}

.wood-chip {
  animation: chipFall .85s ease-out forwards;
}


/* ===== V29: barra de avance + torno giratorio + tallado gradual ===== */
.level-progress {
  position: absolute;
  z-index: 26;
  left: 50%;
  top: 7.4%;
  transform: translateX(-50%);
  width: min(44vw, 560px);
  min-height: 42px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(48, 24, 10, .78);
  border: 3px solid rgba(255, 215, 111, .46);
  box-shadow: 0 .8vh 1.2vh rgba(0,0,0,.25), inset 0 .18vh 0 rgba(255,255,255,.12);
}

.level-progress span,
.level-progress strong {
  color: #fff3d7;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.progress-track {
  position: relative;
  height: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(18, 8, 3, .75);
  box-shadow: inset 0 .2vh .35vh rgba(0,0,0,.45);
}

.progress-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #ffd85e, #f0a915 55%, #61c944);
  box-shadow: 0 0 12px rgba(255, 218, 93, .45);
  transition: width .18s ease-out;
}

.level-progress--carve .progress-track i {
  background: linear-gradient(90deg, #d1934e, #f1c06a 45%, #61c944);
}

.level-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.level-retry-button {
  min-width: clamp(210px, 21vw, 310px);
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff8e2;
  font-size: clamp(15px, 1.12vw, 20px);
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffca61, #dc7b16 70%, #9c4310);
  box-shadow: 0 .5vh 0 #74300a, 0 .9vh 1.1vh rgba(0,0,0,.22), inset 0 .2vh 0 rgba(255,255,255,.28);
  transition: transform .18s ease, filter .18s ease;
}

.level-retry-button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
}

.level-retry-button.is-hidden {
  display: none;
}

/* Dibujo más limpio y con aspecto de lápiz real */
.drawing-workbench {
  top: 12.5%;
}

.sketch-paper {
  border-width: 6px;
  background:
    radial-gradient(circle at 46% 38%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(180deg, #f2dfb7, #e4c48e 78%, #c99555);
}

.cross-outline {
  fill: none !important;
  stroke: rgba(62, 48, 34, .58) !important;
  stroke-width: 7 !important;
  stroke-linejoin: round;
}

#drawCanvas {
  opacity: .96;
}

.level-message {
  background: rgba(18, 8, 4, .42);
  border-radius: 999px;
  padding: 8px 16px;
}

/* Tallado: más presencia del torno y sensación de profundidad */
.carving-workbench {
  top: 12.5%;
  width: min(54vw, 760px);
}

.three-carving {
  height: min(62vh, 560px);
  border: 4px solid rgba(116, 70, 28, .42);
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 216, 125, .16), transparent 45%),
    linear-gradient(180deg, rgba(91, 53, 24, .08), rgba(10,4,1,.18));
}

.carve-cursor {
  width: 108px;
  height: 22px;
  transform: translate(-18px, -10px) rotate(-24deg);
  background: linear-gradient(90deg, #17110e 0 15%, #8a5427 15% 72%, #d8d3c8 72% 100%);
}

.carve-cursor::after {
  border-left-width: 24px;
  right: -22px;
}

.wood-chip {
  width: 14px;
  height: 6px;
  background: linear-gradient(90deg, #e0b06b, #8b5428);
}

@media (max-width: 1100px) {
  .level-progress {
    width: min(58vw, 520px);
    top: 7.6%;
  }
  .drawing-workbench {
    top: 13.5%;
  }
  .carving-workbench {
    width: min(58vw, 690px);
  }
}


/* ===== V30: precisión de boceto + tallado local con forma progresiva ===== */
.level-progress {
  top: 7.1%;
}

.level-progress strong {
  min-width: 48px;
  text-align: right;
}

.progress-track i {
  transition: width .12s linear;
}

.drawing-workbench {
  top: 12.8%;
}

.sketch-paper {
  box-shadow:
    0 1.3vh 2.2vh rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.24);
}

#drawCanvas {
  opacity: .98;
}

.cross-outline {
  stroke: rgba(54, 43, 31, .62) !important;
  stroke-width: 7 !important;
}

.carving-workbench {
  top: 12.4%;
  width: min(55vw, 780px);
}

.three-carving {
  height: min(63vh, 570px);
  border: 4px solid rgba(116, 70, 28, .46);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 218, 126, .13), transparent 44%),
    linear-gradient(180deg, rgba(91, 53, 24, .06), rgba(10,4,1,.15));
}

.carve-cursor {
  width: 112px;
  height: 22px;
  transform: translate(-18px, -10px) rotate(-24deg);
  background: linear-gradient(90deg, #17110e 0 15%, #8a5427 15% 72%, #d8d3c8 72% 100%);
}

.carve-cursor::after {
  right: -23px;
  border-left-width: 25px;
}

.wood-chip {
  width: 16px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #efc37e, #9c5f2a);
  animation: chipFallV30 .9s ease-out forwards;
}

@keyframes chipFallV30 {
  from { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate(34px, 48px) rotate(140deg) scale(.7); }
}


/* ===== V31: tallado preciso por piezas, sin desorden ===== */
.carving-workbench {
  top: 12.2%;
  width: min(56vw, 790px);
}

.three-carving {
  height: min(64vh, 585px);
  border: 4px solid rgba(116, 70, 28, .50);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 132, .15), transparent 46%),
    linear-gradient(180deg, rgba(91, 53, 24, .06), rgba(10,4,1,.16));
}

.carve-cursor {
  width: 112px;
  height: 22px;
  transform: translate(-18px, -10px) rotate(-24deg);
  background: linear-gradient(90deg, #17110e 0 15%, #8a5427 15% 72%, #d8d3c8 72% 100%);
}

.carve-cursor::after {
  right: -23px;
  border-left-width: 25px;
}

.wood-chip {
  width: 16px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #efc37e, #9c5f2a);
  animation: chipFallV31 .95s ease-out forwards;
}

@keyframes chipFallV31 {
  from { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate(36px, 52px) rotate(150deg) scale(.72); }
}


/* ===== V32: tallado rehecho como pieza limpia con material sobrante ===== */
.carving-workbench {
  top: 12.1%;
  width: min(56vw, 800px);
}

.three-carving {
  height: min(64vh, 590px);
  border: 4px solid rgba(129, 77, 31, .56);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 222, 133, .16), transparent 46%),
    linear-gradient(180deg, rgba(91, 53, 24, .05), rgba(10,4,1,.16));
}

.carve-cursor {
  width: 118px;
  height: 23px;
  transform: translate(-18px, -10px) rotate(-24deg);
  background: linear-gradient(90deg, #17110e 0 15%, #8d5728 15% 72%, #e2dbcf 72% 100%);
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.30));
}

.carve-cursor::after {
  right: -24px;
  border-left-width: 26px;
}

.wood-chip {
  width: 17px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f4c985, #9b5a25);
  animation: chipFallV32 .9s ease-out forwards;
}

@keyframes chipFallV32 {
  from { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate(40px, 56px) rotate(165deg) scale(.68); }
}

.level-progress--carve .progress-track i {
  background: linear-gradient(90deg, #c9853e, #f2c064 52%, #5fd044);
}


/* ===== V33: motor real de torno con cilindro deformable ===== */
.carving-workbench {
  top: 12.1%;
  width: min(60vw, 840px);
}

.three-carving {
  height: min(66vh, 610px);
  border: 4px solid rgba(116, 70, 28, .54);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 221, 136, .18), transparent 46%),
    linear-gradient(180deg, rgba(91, 53, 24, .07), rgba(10,4,1,.18));
}

.carve-cursor {
  width: 122px;
  height: 24px;
  transform: translate(-18px, -10px) rotate(-24deg);
  background: linear-gradient(90deg, #17110e 0 15%, #8a5427 15% 72%, #e4dfd2 72% 100%);
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.28));
}

.carve-cursor::after {
  right: -26px;
  border-left-width: 28px;
}

.wood-chip {
  width: 18px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0c57e, #9b5b29);
  animation: chipFallV33 .8s ease-out forwards;
}

@keyframes chipFallV33 {
  from { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate(40px, 58px) rotate(160deg) scale(.65); }
}

.carve-stage .level-message {
  max-width: 860px;
}


/* ===== V34: lijado, barnizado y desbloqueo de niveles ===== */
.finish-workbench {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 11.8%;
  transform: translateX(-50%);
  width: min(56vw, 760px);
  height: 78%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  justify-items: center;
}

.finish-workbench h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(23px, 2vw, 34px);
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.55);
}

.wood-cross-surface {
  position: relative;
  width: min(100%, 660px);
  height: min(58vh, 500px);
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,221,137,.16), transparent 46%),
    linear-gradient(180deg, rgba(68, 35, 14, .22), rgba(18,8,3,.18));
  border: 4px solid rgba(116, 70, 28, .48);
  box-shadow: 0 1.4vh 2vh rgba(0,0,0,.26);
  overflow: hidden;
}

.wood-cross-shape {
  position: relative;
  width: min(74%, 430px);
  aspect-ratio: 1.08;
  filter: drop-shadow(0 1.1vh 1.1vh rgba(0,0,0,.34));
}

.wood-cross-shape canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: none;
  touch-action: none;
}

.wood-cross-shape::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255,255,255,.18), transparent 28%, rgba(255,255,255,.10) 62%, transparent),
    linear-gradient(180deg, #c9853e, #ab672d 65%, #7f431d);
  clip-path: polygon(
    40% 5%, 60% 5%, 60% 34%, 92% 34%, 96% 42%, 92% 50%,
    60% 50%, 60% 95%, 40% 95%, 40% 50%, 8% 50%, 4% 42%,
    8% 34%, 40% 34%
  );
  opacity: .25;
  pointer-events: none;
}

.wood-cross-shape--varnish::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(
    40% 5%, 60% 5%, 60% 34%, 92% 34%, 96% 42%, 92% 50%,
    60% 50%, 60% 95%, 40% 95%, 40% 50%, 8% 50%, 4% 42%,
    8% 34%, 40% 34%
  );
  background: linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.28) 47%, transparent 56% 100%);
  opacity: .42;
  pointer-events: none;
  mix-blend-mode: screen;
}

.sand-tool {
  position: absolute;
  z-index: 5;
  width: 92px;
  height: 58px;
  border-radius: 8px;
  transform: translate(-46px, -29px) rotate(12deg);
  background:
    repeating-linear-gradient(45deg, rgba(60,36,22,.35) 0 5px, rgba(150,90,54,.40) 5px 9px),
    linear-gradient(180deg, #7b392d, #4b231f);
  border: 3px solid rgba(255,236,185,.35);
  box-shadow: 0 .5vh .9vh rgba(0,0,0,.34);
  opacity: 0;
  pointer-events: none;
}

.sand-tool.is-active {
  opacity: 1;
}

.varnish-tool {
  position: absolute;
  z-index: 5;
  width: 120px;
  height: 28px;
  transform: translate(-22px, -14px) rotate(-20deg);
  border-radius: 999px;
  background: linear-gradient(90deg, #362014 0 20%, #7c4c27 20% 72%, #d8d1c4 72% 100%);
  box-shadow: 0 .45vh .8vh rgba(0,0,0,.34);
  opacity: 0;
  pointer-events: none;
}

.varnish-tool::after {
  content: '';
  position: absolute;
  right: -18px;
  top: 4px;
  border-left: 22px solid #d8d1c4;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.varnish-tool.is-active {
  opacity: 1;
}

.paint-can {
  position: absolute;
  right: 10%;
  bottom: 8%;
  width: clamp(70px, 7vw, 105px);
  aspect-ratio: .78;
  border-radius: 12px 12px 18px 18px;
  background: linear-gradient(90deg, #523018, #b36e2d 45%, #643617);
  border: 4px solid rgba(255,230,160,.34);
  box-shadow: 0 .9vh 1vh rgba(0,0,0,.28);
}

.paint-can::before {
  content: 'BARNIZ';
  position: absolute;
  inset: 20% 12% auto;
  padding: 7px 2px;
  border-radius: 8px;
  text-align: center;
  color: #ffe9b2;
  font-size: clamp(9px, .8vw, 13px);
  font-weight: 1000;
  background: rgba(255,255,255,.12);
}

.level-progress--sand .progress-track i {
  background: linear-gradient(90deg, #d9b276, #f4dfb0 55%, #79d15b);
}

.level-progress--varnish .progress-track i {
  background: linear-gradient(90deg, #9c5222, #d8913e 55%, #ffe18c);
}

/* Resultado */
.level-result-stage {
  position: relative;
  overflow: hidden;
  background: #1b0b05;
}

.result-title {
  position: absolute;
  z-index: 18;
  top: 5.5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 82%;
  text-align: center;
  color: #fff;
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.6);
}

.result-subtitle {
  position: absolute;
  z-index: 18;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #ffe395;
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}

.result-comment {
  position: absolute;
  z-index: 18;
  top: 23%;
  width: clamp(140px, 13vw, 210px);
  min-height: 92px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f6e8bf, #d9b46f);
  border: 4px solid #7a4a22;
  color: #3a210f;
  text-align: center;
  box-shadow: 0 .8vh 1vh rgba(0,0,0,.24);
}

.result-comment strong {
  display: block;
  color: #8b231e;
  margin-bottom: 6px;
  font-weight: 1000;
}

.result-comment span {
  font-size: clamp(12px, .95vw, 16px);
  font-weight: 800;
  line-height: 1.25;
}

.result-comment--left { left: 9%; }
.result-comment--right { right: 9%; }

.result-centerpiece {
  position: absolute;
  z-index: 19;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.result-centerpiece img {
  width: clamp(180px, 24vw, 340px);
  max-height: 38vh;
  object-fit: contain;
  filter: drop-shadow(0 1.3vh 1.3vh rgba(0,0,0,.35));
}

.result-reward {
  min-width: clamp(180px, 20vw, 280px);
  padding: 14px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #8d5628, #5d3216);
  border: 4px solid #c99a50;
  color: #fff1c5;
  text-align: center;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 1000;
  box-shadow: 0 .8vh 1vh rgba(0,0,0,.28);
}

.result-next-button {
  width: clamp(58px, 6vw, 84px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 1000;
  background: radial-gradient(circle at 35% 28%, #ffe79a, #f4b52d 58%, #bd6c12);
  box-shadow: 0 .55vh 0 #8e4a0d, 0 1vh 1.3vh rgba(0,0,0,.28), inset 0 .22vh 0 rgba(255,255,255,.32);
}

.result-master {
  position: absolute;
  z-index: 17;
  bottom: 5%;
  max-height: 38vh;
  object-fit: contain;
  filter: drop-shadow(0 1vh 1vh rgba(0,0,0,.38));
}

.result-master--oscar { left: 7%; }
.result-master--miguel { right: 7%; }

@media (max-width: 1100px) {
  .finish-workbench {
    width: min(62vw, 720px);
  }
  .result-comment--left { left: 5%; }
  .result-comment--right { right: 5%; }
  .result-master { max-height: 34vh; }
}


/* ===== V35: correcciones reales de interacción ===== */

/* El lápiz ahora marca con la punta, no con el borrador */
.pencil-cursor {
  width: 94px !important;
  height: 18px !important;
  transform: translate(14px, -8px) rotate(-24deg) !important;
  background: linear-gradient(90deg, #2a211b 0 10%, #d9b884 10% 22%, #f0c271 22% 86%, #1d1d1d 86% 100%) !important;
  transform-origin: left center;
}

.pencil-cursor::before {
  content: '' !important;
  position: absolute !important;
  left: -15px !important;
  top: 2px !important;
  border-right: 17px solid #2a211b !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
}

.pencil-cursor::after {
  display: none !important;
}

/* Asegura que las superficies de lijado/barnizado reciban movimiento */
.wood-cross-surface,
.wood-cross-shape,
.wood-cross-shape canvas {
  pointer-events: auto !important;
}

.wood-cross-shape {
  z-index: 3;
}

.wood-cross-shape::before {
  z-index: 0;
  opacity: .18 !important;
}

.wood-cross-shape canvas {
  z-index: 3;
  position: absolute;
}

.sand-tool,
.varnish-tool {
  z-index: 9 !important;
  pointer-events: none !important;
}

/* Mejor legibilidad del avance */
.level-progress {
  z-index: 40 !important;
}

.level-message {
  z-index: 25;
}

/* Tallado más limpio visualmente */
.three-carving {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 222, 140, .20), transparent 48%),
    linear-gradient(180deg, rgba(75, 39, 16, .08), rgba(10,4,1,.18)) !important;
}

.carve-cursor {
  opacity: 0;
}

.carve-cursor.is-active {
  opacity: 1;
}

/* Resultado y acabado */
.finish-workbench {
  z-index: 18;
}

.wood-cross-surface {
  touch-action: none;
}


/* ===== V52: taller principal completo + niveles mejor centrados ===== */
.workshop-stage .selected-hero-zone{
  left:40.6%;
  width:25.8%;
  height:84.5%;
  bottom:.2%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  overflow:visible;
}
.workshop-stage .player-name-tag{
  top:-8.8%;
  width:76%;
  z-index:5;
}
.workshop-stage .workshop-player{
  display:block;
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center bottom;
}
#pantalla-desafio .levels-board{
  top:12.8%;
  bottom:28.2%;
  align-items:end;
}
#pantalla-desafio .level-card{
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
#pantalla-desafio .level-sculpture-card{
  top:.4%;
}
#pantalla-desafio .level-card__tag{
  top:clamp(118px,11vw,142px);
  width:max-content;
  min-width:132px;
  padding:7px 18px 8px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(37,16,6,.72), rgba(12,4,2,.62));
  border:2px solid rgba(255,224,126,.24);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  line-height:1;
  text-transform:capitalize;
}
#pantalla-desafio .level-character{
  object-position:center bottom;
}
#pantalla-desafio .level-card[data-level="1"] .level-character{
  max-height:92%;
  max-width:88%;
}
#pantalla-desafio .level-card[data-level="2"] .level-character{
  max-height:92%;
  max-width:80%;
}
#pantalla-desafio .level-card[data-level="3"] .level-character{
  max-height:92%;
  max-width:83%;
}
#pantalla-desafio .levels-text-zone{
  padding:2.5% 4.4% 2.35%;
  gap:14px;
}
#pantalla-desafio #levelRequestText{
  min-height:60px;
  padding-top:6px;
  text-align:center;
  line-height:1.6;
}
#pantalla-desafio #levelRequestText .level-request__intro{
  display:block;
  margin-bottom:7px;
  color:#75481b;
  font-style:normal;
  font-weight:1000;
  font-size:clamp(14px,1vw,18px);
  letter-spacing:.05em;
  text-transform:uppercase;
}
#pantalla-desafio #levelRequestText .level-request__body{
  display:block;
  color:#2b180d;
}
@media (max-width: 1100px) {
  .workshop-stage .selected-hero-zone{left:39.8%; width:28%; height:83%;}
  #pantalla-desafio .level-card[data-level="1"] .level-character{max-width:85%;}
  #pantalla-desafio .level-card[data-level="2"] .level-character{max-width:77%;}
  #pantalla-desafio .level-card[data-level="3"] .level-character{max-width:79%;}
}
@media (max-height: 560px) {
  .workshop-stage .selected-hero-zone{height:82%;}
}


/* ===== CLEAN FINAL V15: layout estable, sin hotfixes duplicados ===== */
* { box-sizing: border-box; }
.screen, .game-stage { overflow: hidden; }
.game-stage { isolation: isolate; }

/* Ocultar texto alternativo que aparece cuando faltan assets, para que no se superponga al diseño */
img { color: transparent; }

/* Libro v27: sin animación de máquina de escribir */
.book-copy h2,
.book-copy h3,
.book-copy p {
  font-synthesis: none;
  transform: none !important;
}
.book-type-line,
.book-type-line.is-typed,
.book-type-line.is-typing {
  visibility: visible !important;
  min-height: 0 !important;
}
.book-type-line::after,
.book-type-line.is-typing::after,
.book-type-line.is-typed::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Botón de configuración: solo PNG limpio, sin duplicados/pseudo-elementos */
.settings-button {
  left: 2.25% !important;
  top: 3.25% !important;
  width: clamp(54px, 5vw, 68px) !important;
  height: clamp(54px, 5vw, 68px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("settings_icon_clean.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: visible !important;
}
.settings-button::before,
.settings-button::after,
.settings-button__img {
  content: none !important;
  display: none !important;
}

/* Flechas: botón cuadrado amarillo, centrado y consistente */
.store-back-button,
.levels-back-button,
.level-game-back {
  width: clamp(54px, 5vw, 66px) !important;
  height: clamp(54px, 5vw, 66px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 3px solid rgba(255, 245, 210, .94) !important;
  background: linear-gradient(180deg, #ffe98e 0%, #f5c63a 48%, #d39315 100%) !important;
  box-shadow: 0 5px 0 #8a540b, 0 9px 14px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.45) !important;
  color: #fffdf2 !important;
  font-size: clamp(34px, 3.2vw, 43px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}
.store-back-button::before,
.store-back-button::after,
.levels-back-button::before,
.levels-back-button::after,
.level-game-back::before,
.level-game-back::after {
  content: none !important;
  display: none !important;
}

/* Ruleta limpia v25: texto centrado, legible y rueda un poco más grande */
.prize-wheel {
  --rotation: 0deg;
  --counter-rotation: 0deg;
  transform: rotate(var(--rotation)) !important;
  transform-origin: 50% 50% !important;
  background:
    radial-gradient(circle at center, transparent 0 13%, rgba(50, 20, 4, .18) 13.4% 14%, transparent 14.5%),
    conic-gradient(from -22.5deg,
      #e7b936 0deg 45deg,
      #7047b7 45deg 90deg,
      #629f2c 90deg 135deg,
      #1886c5 135deg 180deg,
      #e98215 180deg 225deg,
      #b41f1f 225deg 270deg,
      #17a7aa 270deg 315deg,
      #c51e56 315deg 360deg) !important;
}
.prize-wheel::before {
  content: "";
  position: absolute;
  inset: 4.7%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -22.5deg, rgba(64, 26, 6, .68) 0 1.4deg, transparent 1.4deg 45deg) !important;
  pointer-events: none;
}
.prize-wheel::after {
  content: "";
  position: absolute;
  inset: -1.2%;
  border-radius: 50%;
  background: repeating-conic-gradient(#ffd25f 0 2.1deg, transparent 2.1deg 44deg, #ffd25f 44deg 45deg) !important;
  -webkit-mask: radial-gradient(circle, transparent 0 87%, black 88% 94%, transparent 95%);
  mask: radial-gradient(circle, transparent 0 87%, black 88% 94%, transparent 95%);
  pointer-events: none;
}
.prize-label,
.prize-label strong,
.prize-label small { writing-mode: horizontal-tb !important; }
.prize-label {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  line-height: .88 !important;
  font-weight: 1000 !important;
  color: #fff7df !important;
  letter-spacing: -.02em !important;
  transform-origin: center center !important;
  text-align: center !important;
  text-wrap: balance;
  transition: transform 4.6s cubic-bezier(.12, .76, .14, 1) !important;
  text-shadow:
    0 2px 0 rgba(46, 23, 8, .98),
    1px 0 0 rgba(46, 23, 8, .98),
    -1px 0 0 rgba(46, 23, 8, .98),
    0 -1px 0 rgba(46, 23, 8, .98) !important;
}
.prize-label > span {
  display: block !important;
  width: 100%;
}
.prize-label strong,
.prize-label small { display: none !important; }
.prize-label--0,
.prize-label--2,
.prize-label--4,
.prize-label--6 {
  width: 18.6% !important;
  max-width: 18.6% !important;
  font-size: clamp(15px, 1.45vw, 28px) !important;
}
.prize-label--0 > span:first-child,
.prize-label--2 > span:first-child,
.prize-label--4 > span:first-child,
.prize-label--6 > span:first-child {
  font-size: 1.34em !important;
  line-height: .82 !important;
}
.prize-label--0 > span:last-child,
.prize-label--2 > span:last-child,
.prize-label--4 > span:last-child,
.prize-label--6 > span:last-child {
  font-size: .72em !important;
}
.prize-label--1,
.prize-label--3,
.prize-label--5,
.prize-label--7 {
  width: 22.6% !important;
  max-width: 22.6% !important;
  font-size: clamp(13px, 1.14vw, 22px) !important;
}
.prize-label--3 {
  font-size: clamp(11px, .96vw, 19px) !important;
  line-height: .92 !important;
}
.prize-label--0 { left: 50% !important; top: 20.8% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--1 { left: 68.1% !important; top: 31.6% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--2 { left: 76.9% !important; top: 50% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--3 { left: 68.4% !important; top: 68.5% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--4 { left: 50% !important; top: 79.2% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--5 { left: 31.6% !important; top: 68.5% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--6 { left: 23.1% !important; top: 50% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }
.prize-label--7 { left: 31.9% !important; top: 31.6% !important; transform: translate(-50%,-50%) rotate(var(--counter-rotation, 0deg)) !important; }

.spin-button.is-long span {
  font-size: clamp(16px, 1.92vw, 32px) !important;
  letter-spacing: .03em !important;
}
.spin-button.is-medium span {
  font-size: clamp(20px, 2.45vw, 40px) !important;
  letter-spacing: .045em !important;
}

/* Tienda: títulos y monedas sin montarse */
.store-top-title {
  top: 4.1% !important;
  left: 50% !important;
  width: 62% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  font-size: clamp(17px, 1.45vw, 25px) !important;
  line-height: 1.15 !important;
  letter-spacing: .055em !important;
}
.store-coins {
  left: auto !important;
  right: 4.2% !important;
  top: 5.8% !important;
  transform: none !important;
  min-width: clamp(120px, 12vw, 170px) !important;
  z-index: 30 !important;
}
.store-panel {
  top: 18% !important;
  height: 68% !important;
  width: min(46vw, 600px) !important;
  min-width: 470px !important;
  padding-top: clamp(68px, 8vh, 88px) !important;
}
.store-sign {
  top: -5.8% !important;
  width: 88% !important;
  min-height: clamp(66px, 8.5vh, 94px) !important;
}
.store-sign h2 {
  font-size: clamp(28px, 2.8vw, 46px) !important;
  line-height: .94 !important;
  text-align: center !important;
}
.store-category h3 {
  font-size: clamp(18px, 1.45vw, 26px) !important;
}
.store-name-tag {
  font-size: clamp(14px, 1vw, 18px) !important;
}
.store-bubble {
  z-index: 25 !important;
  top: -22% !important;
  width: clamp(210px, 20vw, 290px) !important;
  min-height: 128px !important;
}
.store-bubble strong { font-size: clamp(16px, 1.15vw, 20px) !important; }
.store-bubble p { font-size: clamp(13px, .96vw, 16px) !important; line-height: 1.3 !important; }

/* Selección de niveles: texto dentro del cuadro sin quedar pequeño */
#pantalla-desafio .levels-text-zone {
  min-height: 22% !important;
  height: 22% !important;
  padding: clamp(14px, 2vh, 20px) clamp(22px, 2.4vw, 34px) !important;
  gap: clamp(8px, 1.2vh, 14px) !important;
}
#pantalla-desafio #levelRequestText {
  max-height: none !important;
  overflow: visible !important;
  font-size: clamp(16px, 1.12vw, 21px) !important;
  line-height: 1.32 !important;
}
#pantalla-desafio .level-request__intro {
  display: block !important;
  font-size: 1.12em !important;
  margin-bottom: .2em !important;
}
#pantalla-desafio .level-start-button {
  min-height: clamp(40px, 5vh, 52px) !important;
  padding: .62em 1.55em !important;
  font-size: clamp(15px, 1.05vw, 19px) !important;
}

/* Etapas del juego: HUD/títulos compactos para no taparse */
.level-game-stage .level-hud {
  top: 3.4% !important;
  right: 4% !important;
  height: clamp(42px, 6vh, 60px) !important;
  font-size: clamp(14px, 1.1vw, 18px) !important;
  z-index: 30 !important;
}
.level-game-stage .level-progress {
  top: 10.6% !important;
  right: 4% !important;
  width: min(24vw, 330px) !important;
  min-width: 230px !important;
  z-index: 28 !important;
}
.level-progress span,
.level-progress strong {
  font-size: clamp(12px, .92vw, 16px) !important;
}
.level-master {
  z-index: 22 !important;
}
.level-speech {
  max-width: min(31vw, 410px) !important;
  padding: .85em 1em !important;
  font-size: clamp(13px, .98vw, 17px) !important;
  line-height: 1.25 !important;
}
.drawing-workbench h2,
.finish-workbench h2 {
  margin: 0 0 .35em !important;
  font-size: clamp(22px, 2.2vw, 38px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.level-message {
  font-size: clamp(13px, 1vw, 17px) !important;
  line-height: 1.25 !important;
}

/* Vista de ganar/perder: inspirada en las referencias, sin títulos montados */
#pantalla-nivel-resultado .level-result-stage {
  overflow: hidden !important;
  background: #190804 !important;
}
#pantalla-nivel-resultado .level-result-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,196,49,.66) 0 7%, rgba(255,177,28,.32) 8% 19%, transparent 35%),
    linear-gradient(180deg, rgba(20,6,1,.05), rgba(20,6,1,.34));
  pointer-events: none;
}
#pantalla-nivel-resultado .level-result-stage.is-fail::before {
  background:
    radial-gradient(circle at 50% 43%, rgba(255,22,15,.72) 0 8%, rgba(190,0,0,.38) 9% 23%, transparent 38%),
    linear-gradient(180deg, rgba(20,6,1,.12), rgba(20,6,1,.45));
}
#pantalla-nivel-resultado .level-game-shade,
#pantalla-nivel-resultado .result-comment,
#pantalla-nivel-resultado .result-master {
  display: none !important;
}
#pantalla-nivel-resultado .result-title {
  z-index: 20 !important;
  position: absolute !important;
  left: 50% !important;
  top: 4% !important;
  width: 96% !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(34px, 4.7vw, 74px) !important;
  line-height: .88 !important;
  color: #fff0a2 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 5px 0 #7b2405, 0 8px 0 rgba(0,0,0,.48), 0 0 18px rgba(255,219,89,.55) !important;
}
#pantalla-nivel-resultado .level-result-stage.is-fail .result-title {
  color: #ff3d2f !important;
  text-shadow: 0 5px 0 #5b0602, 0 8px 0 rgba(0,0,0,.62), 0 0 18px rgba(255,42,28,.42) !important;
}
#pantalla-nivel-resultado .result-subtitle {
  z-index: 21 !important;
  position: absolute !important;
  left: 50% !important;
  top: 20% !important;
  transform: translateX(-50%) !important;
  min-width: min(78vw, 760px) !important;
  max-width: 90% !important;
  margin: 0 !important;
  padding: .28em 1.4em .34em !important;
  color: #ffe76c !important;
  text-align: center !important;
  font-size: clamp(22px, 2.6vw, 44px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -.025em !important;
  background: linear-gradient(90deg, transparent 0 5%, #7d0b06 5% 11%, #bc1510 18% 82%, #7d0b06 89% 95%, transparent 95% 100%);
  border-top: 4px solid rgba(255,211,103,.65);
  border-bottom: 4px solid rgba(72,4,2,.70);
  text-shadow: 0 3px 0 rgba(0,0,0,.55) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}
#pantalla-nivel-resultado .result-centerpiece {
  z-index: 22 !important;
  position: absolute !important;
  left: 50% !important;
  top: 35% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(11px, 1.6vh, 20px) !important;
}
#pantalla-nivel-resultado .result-centerpiece img {
  width: clamp(165px, 18vw, 300px) !important;
  max-height: 32vh !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1.2vh 1.2vh rgba(0,0,0,.48)) saturate(1.08) !important;
}
#pantalla-nivel-resultado .result-reward {
  min-width: clamp(210px, 23vw, 350px) !important;
  padding: .35em 1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .32em !important;
  border-radius: 11px !important;
  color: #fff6df !important;
  background: linear-gradient(180deg, rgba(99,65,36,.96), rgba(55,34,20,.98)) !important;
  border: 4px solid #91612f !important;
  box-shadow: 0 8px 0 rgba(38,18,7,.9), 0 14px 20px rgba(0,0,0,.36), inset 0 2px 0 rgba(255,255,255,.18) !important;
  font-size: clamp(26px, 2.8vw, 44px) !important;
  line-height: 1 !important;
}
#pantalla-nivel-resultado .result-reward::before,
#pantalla-nivel-resultado .result-reward::after {
  content: "◆";
  color: #22d36d;
  font-size: .52em;
  text-shadow: 0 2px 0 #06421e;
}
#pantalla-nivel-resultado .result-reward.result-reward--level {
  font-size: clamp(26px, 2.8vw, 44px) !important;
  color: #fff7e5 !important;
}
#pantalla-nivel-resultado .result-next-button {
  width: auto !important;
  min-width: clamp(250px, 26vw, 410px) !important;
  height: clamp(54px, 7.4vh, 78px) !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
  padding: 0 1.3em !important;
  border: 4px solid rgba(255,242,196,.92) !important;
  background: linear-gradient(180deg,#ffc84a 0%, #e88913 58%, #b85b07 100%) !important;
  color: #fff9e7 !important;
  font-size: clamp(21px, 2.15vw, 36px) !important;
  font-weight: 1000 !important;
  text-shadow: 0 3px 0 rgba(105,49,5,.58) !important;
  box-shadow: 0 7px 0 #7a3708, 0 13px 18px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,255,255,.42) !important;
}
#pantalla-nivel-resultado .result-next-button::before,
#pantalla-nivel-resultado .result-next-button::after {
  display: none !important;
  content: none !important;
}

@media (max-height: 720px) {
  .store-panel { top: 17% !important; height: 70% !important; }
  #pantalla-nivel-resultado .result-title { top: 3.2% !important; font-size: clamp(30px, 4.2vw, 62px) !important; }
  #pantalla-nivel-resultado .result-subtitle { top: 19.5% !important; font-size: clamp(20px, 2.2vw, 34px) !important; }
  #pantalla-nivel-resultado .result-centerpiece { top: 34% !important; gap: 10px !important; }
  #pantalla-nivel-resultado .result-centerpiece img { max-height: 28vh !important; }
  #pantalla-nivel-resultado .result-next-button { height: 56px !important; font-size: clamp(20px, 2vw, 30px) !important; }
}
@media (max-width: 980px) {
  .store-panel { min-width: 430px !important; width: 50vw !important; }
  .store-top-title { width: 70% !important; }
  .store-coins { right: 3% !important; }
  .level-speech { max-width: 34vw !important; font-size: clamp(12px, 1.1vw, 16px) !important; }
}


/* ===== V18: selección de niveles y globo guía corregidos ===== */
/* La referencia del tallado siempre queda por encima del personaje */
#pantalla-desafio .level-sculpture-card{
  z-index: 45 !important;
  top: 0 !important;
  width: clamp(112px, 10.8vw, 136px) !important;
  height: clamp(112px, 10.8vw, 136px) !important;
}
#pantalla-desafio .level-sculpture-card img{
  width: 74% !important;
  height: 74% !important;
}
#pantalla-desafio .level-card__tag{
  z-index: 46 !important;
  top: clamp(130px, 12vw, 154px) !important;
}
#pantalla-desafio .level-character{
  z-index: 18 !important;
  bottom: 0 !important;
  transform: translateX(-50%) translateY(6px) !important;
}
#pantalla-desafio .level-card[data-level="1"] .level-character{
  max-height: 78% !important;
  max-width: 76% !important;
}
#pantalla-desafio .level-card[data-level="2"] .level-character{
  max-height: 77% !important;
  max-width: 70% !important;
}
#pantalla-desafio .level-card[data-level="3"] .level-character{
  max-height: 78% !important;
  max-width: 74% !important;
}
#pantalla-desafio .level-card__shade{
  z-index: 22 !important;
}
#pantalla-desafio .level-lock{
  z-index: 47 !important;
}
#pantalla-desafio .level-card.is-selected .level-character,
#pantalla-desafio .level-card:hover .level-character{
  transform: translateX(-50%) translateY(0) !important;
}

/* Globo de guía: más legible, sin quedar gigante ni cortarse */
.level-speech{
  width: clamp(230px, 18.5vw, 285px) !important;
  max-width: clamp(230px, 18.5vw, 285px) !important;
  min-height: 122px !important;
  padding: 12px 14px !important;
  font-size: clamp(11px, .78vw, 13px) !important;
  line-height: 1.15 !important;
  text-align: left !important;
  overflow: visible !important;
}
.level-speech p,
#v48Mentor{
  font-size: clamp(11px, .78vw, 13px) !important;
  line-height: 1.15 !important;
}
@media (max-height: 760px) and (min-width:901px){
  #pantalla-desafio .level-sculpture-card{
    width: 118px !important;
    height: 118px !important;
  }
  #pantalla-desafio .level-card__tag{
    top: 132px !important;
  }
  #pantalla-desafio .level-card[data-level="1"] .level-character{ max-height: 76% !important; }
  #pantalla-desafio .level-card[data-level="2"] .level-character{ max-height: 75% !important; }
  #pantalla-desafio .level-card[data-level="3"] .level-character{ max-height: 76% !important; }
  .level-speech{
    width: 245px !important;
    max-width: 245px !important;
    min-height: 116px !important;
    padding: 11px 13px !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
  }
}


/* ===== V19 FINAL: globo guía legible + niveles sin personajes detrás de referencia ===== */
/* Globo del guía: texto más grande, caja un poco más amplia y sin corte */
.level-master .level-speech,
.level-speech {
  width: clamp(285px, 23vw, 340px) !important;
  max-width: clamp(285px, 23vw, 340px) !important;
  min-height: clamp(128px, 18vh, 166px) !important;
  padding: clamp(13px, 1.6vh, 17px) clamp(15px, 1.6vw, 20px) !important;
  font-size: clamp(13px, 1.02vw, 16px) !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
  text-align: left !important;
  overflow: visible !important;
}
.level-master .level-speech p,
.level-speech p,
#v48Mentor {
  font-size: clamp(13px, 1.02vw, 16px) !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
}

/* En pantallas bajas mantener legible sin salirse */
@media (max-height: 760px) and (min-width: 901px) {
  .level-master .level-speech,
  .level-speech {
    width: 300px !important;
    max-width: 300px !important;
    min-height: 126px !important;
    padding: 12px 15px !important;
    font-size: 13px !important;
    line-height: 1.11 !important;
  }
  .level-master .level-speech p,
  .level-speech p,
  #v48Mentor {
    font-size: 13px !important;
    line-height: 1.11 !important;
  }
}

/* Pantalla de niveles: referencia arriba, etiqueta al centro y personaje debajo sin taparse */
#pantalla-desafio .levels-board {
  top: 13.5% !important;
  bottom: 28.5% !important;
  align-items: stretch !important;
}

#pantalla-desafio .level-card {
  position: relative !important;
  overflow: visible !important;
}

#pantalla-desafio .level-sculpture-card {
  z-index: 60 !important;
  top: 0 !important;
  width: clamp(112px, 10.2vw, 134px) !important;
  height: clamp(112px, 10.2vw, 134px) !important;
}

#pantalla-desafio .level-sculpture-card img {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain !important;
}

#pantalla-desafio .level-card__tag {
  z-index: 58 !important;
  top: clamp(124px, 11.2vw, 150px) !important;
  min-width: 132px !important;
  padding: 7px 18px 8px !important;
  border-radius: 999px !important;
}

/* La altura se calcula para que el personaje empiece debajo del cartel y no detrás de la imagen */
#pantalla-desafio .level-character {
  z-index: 25 !important;
  bottom: 0 !important;
  height: calc(100% - 175px) !important;
  max-height: none !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
}

#pantalla-desafio .level-card:hover .level-character,
#pantalla-desafio .level-card.is-selected .level-character {
  transform: translateX(-50%) translateY(-3px) !important;
}

#pantalla-desafio .level-card[data-level="1"] .level-character {
  max-width: 70% !important;
}

#pantalla-desafio .level-card[data-level="2"] .level-character {
  max-width: 62% !important;
}

#pantalla-desafio .level-card[data-level="3"] .level-character {
  max-width: 66% !important;
}

#pantalla-desafio .level-card__shade {
  z-index: 35 !important;
  height: calc(100% - 170px) !important;
  bottom: 0 !important;
}

#pantalla-desafio .level-lock {
  z-index: 65 !important;
  bottom: 19% !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  #pantalla-desafio .levels-board {
    top: 13% !important;
    bottom: 29% !important;
  }
  #pantalla-desafio .level-sculpture-card {
    width: 116px !important;
    height: 116px !important;
  }
  #pantalla-desafio .level-card__tag {
    top: 124px !important;
  }
  #pantalla-desafio .level-character {
    height: calc(100% - 150px) !important;
  }
  #pantalla-desafio .level-card__shade {
    height: calc(100% - 145px) !important;
  }
}

/* ===== V20: niveles con esculturas nuevas y personajes grandes ===== */
#pantalla-desafio .levels-scene__title{
  text-shadow:0 4px 0 rgba(80,34,4,.45),0 8px 16px rgba(0,0,0,.48) !important;
}
#pantalla-desafio .levels-board{
  top:12.2% !important;
  bottom:18.5% !important;
  z-index:42 !important;
  overflow:visible !important;
  align-items:stretch !important;
}
#pantalla-desafio .level-card{
  overflow:visible !important;
  isolation:isolate !important;
}
#pantalla-desafio .level-sculpture-card{
  z-index:85 !important;
  width:clamp(126px,10.8vw,154px) !important;
  height:clamp(126px,10.8vw,154px) !important;
  top:-2px !important;
  background:linear-gradient(180deg,#fff3d8,#f2d6a4) !important;
}
#pantalla-desafio .level-sculpture-card img{
  width:88% !important;
  height:88% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 7px 7px rgba(73,35,10,.25)) saturate(1.08) !important;
}
#pantalla-desafio .level-card__tag{
  z-index:90 !important;
  top:clamp(136px,12vw,170px) !important;
}
#pantalla-desafio .level-character{
  z-index:30 !important;
  bottom:-8.5vh !important;
  height:calc(100% - 88px) !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  filter:drop-shadow(0 14px 10px rgba(0,0,0,.52)) !important;
}
#pantalla-desafio .level-card[data-level="1"] .level-character{max-width:104% !important;}
#pantalla-desafio .level-card[data-level="2"] .level-character{max-width:96% !important;}
#pantalla-desafio .level-card[data-level="3"] .level-character{max-width:101% !important;}
#pantalla-desafio .levels-text-zone{
  z-index:96 !important;
  bottom:3.2% !important;
}
#pantalla-desafio .level-card__shade{
  z-index:42 !important;
  bottom:-9vh !important;
  height:calc(100% - 90px) !important;
}
#pantalla-desafio .level-lock{
  z-index:98 !important;
  bottom:25% !important;
}
@media (max-height:760px) and (min-width:901px){
  #pantalla-desafio .levels-board{top:12.6% !important;bottom:18.8% !important;}
  #pantalla-desafio .level-sculpture-card{width:124px !important;height:124px !important;}
  #pantalla-desafio .level-card__tag{top:132px !important;}
  #pantalla-desafio .level-character{height:calc(100% - 76px) !important;bottom:-10vh !important;}
}


/* ===== V21: resultado con mejora de herramientas + cinemática final 100vh/100vw ===== */
html,
body,
.app,
.screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.game-stage {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#pantalla-nivel-resultado .result-title {
  top: 3.2% !important;
  font-size: clamp(29px, 4.45vw, 70px) !important;
  line-height: .88 !important;
}

#pantalla-nivel-resultado .result-subtitle {
  top: 17.4% !important;
  font-size: clamp(18px, 2.25vw, 38px) !important;
  padding: .24em 1.15em .3em !important;
}

#pantalla-nivel-resultado .result-centerpiece {
  top: 30.4% !important;
  gap: clamp(7px, 1.1vh, 12px) !important;
}

#pantalla-nivel-resultado .result-centerpiece img {
  width: clamp(135px, 15.5vw, 250px) !important;
  max-height: 24vh !important;
}

#pantalla-nivel-resultado .result-reward {
  min-width: clamp(185px, 20vw, 310px) !important;
  padding: .28em .8em !important;
  font-size: clamp(22px, 2.35vw, 37px) !important;
}

#pantalla-nivel-resultado .result-next-button,
#pantalla-nivel-resultado .result-upgrade-button {
  width: auto !important;
  min-width: clamp(245px, 25vw, 400px) !important;
  height: clamp(45px, 6.1vh, 64px) !important;
  border-radius: 16px !important;
  padding: 0 1.15em !important;
  color: #fff9e7 !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 3px 0 rgba(105,49,5,.58) !important;
  cursor: pointer !important;
}

#pantalla-nivel-resultado .result-next-button {
  font-size: clamp(18px, 1.85vw, 31px) !important;
}

#pantalla-nivel-resultado .result-upgrade-button {
  border: 4px solid rgba(255,242,196,.9) !important;
  background: linear-gradient(180deg,#36c973 0%, #149045 62%, #0b5d2b 100%) !important;
  box-shadow: 0 7px 0 #063d1e, 0 13px 18px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.35) !important;
  font-size: clamp(15px, 1.48vw, 24px) !important;
}

#pantalla-nivel-resultado .result-upgrade-button:hover {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px);
}

@media (max-height: 720px) {
  #pantalla-nivel-resultado .result-title { top: 2.8% !important; font-size: clamp(26px, 4vw, 58px) !important; }
  #pantalla-nivel-resultado .result-subtitle { top: 16.8% !important; font-size: clamp(17px, 2vw, 30px) !important; }
  #pantalla-nivel-resultado .result-centerpiece { top: 30% !important; gap: 7px !important; }
  #pantalla-nivel-resultado .result-centerpiece img { max-height: 21.5vh !important; }
  #pantalla-nivel-resultado .result-next-button,
  #pantalla-nivel-resultado .result-upgrade-button { height: 44px !important; font-size: clamp(15px, 1.65vw, 25px) !important; }
  #pantalla-nivel-resultado .result-upgrade-button { font-size: clamp(13px, 1.25vw, 20px) !important; }
}

.final-cinematic-stage {
  background: #1b0803 !important;
  color: #fff5d5;
}

.final-cinematic-stage .level-game-bg {
  filter: brightness(.58) saturate(1.08) blur(.2px);
  transform: scale(1.02);
}

.final-cinematic-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 47%, rgba(255,198,55,.34), transparent 35%),
    linear-gradient(180deg, rgba(21,6,1,.18), rgba(21,6,1,.72));
  pointer-events: none;
}

.final-rays {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 46%;
  width: min(84vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from -10deg, rgba(255,214,65,.34) 0 8deg, transparent 8deg 16deg);
  opacity: .85;
  filter: blur(.2px);
  animation: finalRaysSpin 14s linear infinite;
}

@keyframes finalRaysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.final-title {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 4.5%;
  width: 96vw;
  transform: translateX(-50%) rotate(-1.6deg);
  margin: 0;
  text-align: center;
  font-size: clamp(32px, 5.6vw, 86px);
  line-height: .9;
  color: #ffe56c;
  text-shadow: 0 5px 0 #7b3207, 0 9px 0 rgba(0,0,0,.42), 0 0 24px rgba(255,226,92,.56);
  letter-spacing: -.045em;
  animation: finalTitlePop .85s cubic-bezier(.17,.88,.3,1.22) both;
}

@keyframes finalTitlePop {
  from { transform: translateX(-50%) rotate(-1.6deg) scale(.68); opacity: 0; }
  to { transform: translateX(-50%) rotate(-1.6deg) scale(1); opacity: 1; }
}

.final-subtitle {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 18.5%;
  width: min(86vw, 860px);
  transform: translateX(-50%);
  margin: 0;
  padding: .55em 1.1em;
  border-radius: 999px;
  background: rgba(41,15,4,.78);
  border: 3px solid rgba(255,225,123,.68);
  box-shadow: 0 12px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff3c9;
  text-align: center;
  font-size: clamp(14px, 1.55vw, 24px);
  line-height: 1.15;
  font-weight: 900;
}

.final-pieces {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 34%;
  width: min(86vw, 820px);
  height: 29vh;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.2vw, 34px);
}

.final-pieces img {
  width: clamp(94px, 16vw, 210px);
  max-width: 28%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.48)) saturate(1.12);
  animation: finalPieceFloat 2.7s ease-in-out infinite;
}

.final-pieces img:nth-child(2) { animation-delay: .18s; }
.final-pieces img:nth-child(3) { animation-delay: .36s; }

@keyframes finalPieceFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.035); }
}

.final-badge {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 17.5%;
  transform: translateX(-50%);
  min-width: min(78vw, 610px);
  padding: .42em 1.2em .5em;
  border-radius: 18px;
  background: linear-gradient(180deg,#6b3d1c,#2d170b);
  border: 4px solid #e7b45c;
  box-shadow: 0 8px 0 rgba(73,37,10,.95), 0 15px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.18);
  color: #fff9df;
  text-align: center;
  font-size: clamp(20px, 2.6vw, 42px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.02em;
  text-shadow: 0 3px 0 rgba(0,0,0,.45);
}

.final-home-button {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  min-width: clamp(240px, 25vw, 390px);
  height: clamp(48px, 6.5vh, 68px);
  border-radius: 18px;
  border: 4px solid rgba(255,242,196,.92);
  background: linear-gradient(180deg,#ffc84a 0%, #e88913 58%, #b85b07 100%);
  color: #fff9e7;
  font-size: clamp(17px, 1.75vw, 28px);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(105,49,5,.58);
  box-shadow: 0 7px 0 #7a3708, 0 13px 18px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,255,255,.42);
  cursor: pointer;
}

.final-sparkles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.final-sparkles span {
  position: absolute;
  width: clamp(9px, 1.1vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe56c;
  box-shadow: 0 0 16px rgba(255,230,93,.9);
  animation: finalSpark 1.6s ease-in-out infinite;
}

.final-sparkles span:nth-child(1) { left: 15%; top: 35%; animation-delay: .05s; }
.final-sparkles span:nth-child(2) { left: 27%; top: 23%; animation-delay: .25s; }
.final-sparkles span:nth-child(3) { right: 21%; top: 31%; animation-delay: .48s; }
.final-sparkles span:nth-child(4) { left: 20%; bottom: 28%; animation-delay: .7s; }
.final-sparkles span:nth-child(5) { right: 28%; bottom: 25%; animation-delay: .9s; }
.final-sparkles span:nth-child(6) { right: 12%; top: 48%; animation-delay: 1.12s; }

@keyframes finalSpark {
  0%, 100% { transform: scale(.65); opacity: .25; }
  50% { transform: scale(1.25); opacity: 1; }
}

@media (max-height: 700px) {
  .final-title { top: 3.6%; font-size: clamp(28px, 5vw, 64px); }
  .final-subtitle { top: 17%; font-size: clamp(12px, 1.35vw, 19px); padding: .42em .9em; }
  .final-pieces { top: 32%; height: 27vh; }
  .final-badge { bottom: 16%; font-size: clamp(18px, 2.25vw, 32px); padding: .34em .95em .42em; }
  .final-home-button { bottom: 4.4%; height: 46px; font-size: clamp(15px, 1.55vw, 23px); }
}

@media (max-width: 760px) {
  .final-title { top: 5%; font-size: clamp(30px, 10vw, 58px); }
  .final-subtitle { top: 20%; width: 90vw; font-size: clamp(12px, 3.6vw, 18px); border-radius: 18px; }
  .final-pieces { top: 37%; width: 94vw; height: 26vh; gap: 4px; }
  .final-pieces img { width: 31%; max-width: 31%; }
  .final-badge { bottom: 17%; min-width: 86vw; font-size: clamp(18px, 5vw, 28px); }
  .final-home-button { bottom: 5%; min-width: 72vw; }
}


/* Nivel 2: texto del cuadro inferior un poco más compacto para que no se monte */
#pantalla-desafio #levelRequestText[data-level="2"] .level-request__body {
  font-size: clamp(14px, 1.02vw, 18px) !important;
  line-height: 1.18 !important;
}


/* Libro final v26: sin máquina de escribir y sin cambio de tamaño al cargar la fuente */
.book-copy,
.book-copy h2,
.book-copy h3,
.book-copy p {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
  animation: none !important;
}
html.book-fonts-ready .book-copy,
html.book-fonts-ready .book-copy h2,
html.book-fonts-ready .book-copy h3,
html.book-fonts-ready .book-copy p,
.book-stage.book-typed .book-copy,
.book-stage.book-typed .book-copy h2,
.book-stage.book-typed .book-copy h3,
.book-stage.book-typed .book-copy p {
  opacity: 1 !important;
  visibility: visible !important;
}
.book-type-line,
.book-type-line.is-typed,
.book-type-line.is-typing {
  transition: none !important;
  animation: none !important;
}


/* Libro final v28: títulos corregidos, legibles y sin deformarse */
.book-copy {
  font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive !important;
  font-size-adjust: none !important;
}
.book-copy h2,
.book-copy h3 {
  font-family: "MedievalSharp", Georgia, "Times New Roman", serif !important;
  font-size-adjust: none !important;
  color: #8f1f18 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.02 !important;
  text-align: center !important;
  transform: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
}
.book-copy h2 {
  font-size: clamp(22px, 2.05vw, 36px) !important;
  margin-bottom: 3.5% !important;
}
.book-copy h3 {
  font-size: clamp(20px, 1.82vw, 32px) !important;
  margin-top: 4.5% !important;
  margin-bottom: 2.5% !important;
}
.book-copy p {
  font-size-adjust: none !important;
}
@media (max-height: 700px) {
  .book-copy h2 { font-size: clamp(20px, 1.8vw, 31px) !important; }
  .book-copy h3 { font-size: clamp(18px, 1.65vw, 28px) !important; }
}