@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: swap;
}

: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: "Moontime", "Caveat", "Segoe Script", "Brush Script MT", cursive;
  font-weight: 700;
  line-height: 1.26;
  text-shadow: 0 1px 0 rgba(255, 245, 209, .45);
}

.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: "Moontime", "MedievalSharp", "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(25vw, 34vh);
  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%; top: 18%; transform: translate(-50%, -50%); }
.prize-label--1 { left: 68%; top: 26%; transform: translate(-50%, -50%); }
.prize-label--2 { left: 77%; top: 47%; transform: translate(-50%, -50%); }
.prize-label--3 { left: 68%; top: 67%; transform: translate(-50%, -50%); }
.prize-label--4 { left: 50%; top: 78%; transform: translate(-50%, -50%); }
.prize-label--5 { left: 32%; top: 67%; transform: translate(-50%, -50%); }
.prize-label--6 { left: 23%; top: 47%; transform: translate(-50%, -50%); }
.prize-label--7 { left: 32%; top: 26%; transform: translate(-50%, -50%); }

.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, 58vh); }
  .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, 32vh); 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);
}

@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); }
}