/* WONDER IV — pantalla de nivel rediseñada: solar de la maravilla a un lado, tablero entre columnas y camino de operarios abajo. */

#screen-game { flex-direction: column; align-items: stretch; padding: 46px 16px 0; gap: 10px; height: 100vh; min-height: 560px; overflow: hidden; }
#screen-game .g-hud, #screen-game .g-main, #screen-game .g-bottom { position: relative; z-index: 3; }

/* ── Marcadores: rollos de pergamino ── */
.g-hud { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.scroll { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 150px; padding: 6px 26px; background: linear-gradient(#f2e2b4, #d8bd82); border-top: 3px solid #6a4a1c; border-bottom: 3px solid #6a4a1c; box-shadow: 0 5px 0 rgba(0,0,0,.35); color: #3a2208; }
.scroll::before, .scroll::after { content: ''; position: absolute; top: -5px; bottom: -5px; width: 16px; background: linear-gradient(90deg, #8a5a22, #e0b868 45%, #8a5a22); border-radius: 8px; border: 2px solid #4a2c06; }
.scroll::before { left: -8px; } .scroll::after { right: -8px; }
.sc-lbl { font-family: var(--font-cin); font-size: 10px; letter-spacing: 3px; font-weight: 700; color: #6a4a1c; }
.sc-val { font-family: var(--font-cin); font-size: 30px; font-weight: 900; line-height: 1.05; color: #2a1604; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.sc-name { font-family: var(--font-cin); font-size: 17px; font-weight: 900; letter-spacing: 2px; color: #14286a; line-height: 1.1; }
.scroll-level { min-width: 240px; }
.g-hud-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-small { padding: 7px 14px; font-size: 11px; letter-spacing: 2px; }
#screen-game .btn-back { color: #2a1604; border: 3px solid var(--borde); border-radius: 24px; background: var(--oro); }
#screen-game .btn-back:hover { background: var(--oro); color: #14286a; }

/* ── Composición: la maravilla al fondo, el tablero en el centro y los marcadores a la derecha ── */
.g-main { --W: min(640px, calc(100vh - 300px), 46vw); --bs: calc(var(--W) * .7475); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, 1fr); gap: 0 14px; align-items: end; flex: 1; padding-bottom: 30px; }
.g-boardcol { position: relative; width: var(--W); margin: 0 calc(var(--W) * .26); grid-column: 2; }
.board-wrap { width: 100%; aspect-ratio: 800 / 799; position: relative; background: url(../img/marco.png) 0 0 / 100% 100% no-repeat; border: 0; border-radius: 0; padding: 0; box-shadow: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
.board-wrap #board { position: absolute; left: 12.62%; top: 12.89%; width: 74.75%; border-radius: 4px; }
.pillar { position: absolute; bottom: -4px; height: calc(var(--W) * 1.02); width: auto; z-index: 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); pointer-events: none; }
.pl { left: calc(var(--W) * -.27); } .pr { right: calc(var(--W) * -.27); }
.g-boardcol .board-wrap { position: relative; z-index: 1; }
.g-side { grid-column: 3; justify-self: start; }

/* ── La maravilla de fondo ── */
.fondo { position: fixed; inset: 0; z-index: 0; display: none; background: #cfe6f2 center bottom / cover no-repeat; background-position: left bottom; }
body.in-level .fondo { display: block; }
body.in-level .scene-bg { display: none; }
.site-scene { position: absolute; left: 7%; bottom: 70px; width: 200px; height: 200px; z-index: 1; pointer-events: none; }
.pblock { position: absolute; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)); }
.pblock.drop { animation: pdrop .5s cubic-bezier(.3,.9,.4,1.2); }
@keyframes pdrop { from { transform: translateY(-46px); opacity: .2; } to { transform: translateY(0); opacity: 1; } }
.wonder-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(60,40,10,.35)); }
.st.ghost * { fill: rgba(255,248,220,.22) !important; stroke: #5a4a2a !important; stroke-dasharray: 5 4; stroke-width: 1.3 !important; opacity: .8; }
.st.drop { animation: stage-drop .65s cubic-bezier(.2,.9,.3,1.25); }
@keyframes stage-drop { 0% { transform: translateY(-46px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); } }

/* ── Marcador de movimientos ── */
.g-side { align-self: end; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding-bottom: 6px; }
.meter { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 10px 0 8px; background: var(--oro); border: 3px solid var(--borde); border-radius: 38px; box-shadow: 0 4px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.55); }
.meter-lbl { font-family: var(--font-cin); font-size: 10px; letter-spacing: 2px; font-weight: 700; color: #3a2208; }
.meter-tube { position: relative; width: 22px; height: calc(var(--bs) * .62); background: #1b1006; border: 3px solid var(--borde); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 8px #000; }
.meter-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #7fe0f0, #2a8ac8); transition: height .35s ease-out; }
.meter-val { font-family: var(--font-cin); font-size: 26px; font-weight: 900; color: #2a1604; line-height: 1; }
.meter-val.low { color: #b02818; animation: moves-warn .55s infinite alternate; }
.meter.warn-box .meter-fill { background: linear-gradient(90deg, #ff9a6a, #d03a18); }
.combo-bubble { display: flex; flex-direction: column; align-items: center; width: 74px; padding: 6px 0; border-radius: 30px; background: linear-gradient(#f6e6ff, #c8a0f0); border: 3px solid #4a2c78; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.cb-lbl { font-family: var(--font-cin); font-size: 9px; letter-spacing: 2px; font-weight: 700; color: #4a2c78; }
.cb-val { font-family: var(--font-cin); font-size: 22px; font-weight: 900; color: #3a1a78; }

/* ── Poderes en el lateral ── */
.g-side .pu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 150px; }
.g-side .pu-btn { padding: 4px 2px 3px; }

/* ── Camino de los operarios ── */
.g-bottom { margin: 6px -16px 0; margin-top: auto; height: 76px; }
.g-lane { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0), rgba(60,36,10,.18)); overflow: hidden; }
.lane-line { display: none; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: repeating-linear-gradient(90deg, #8a6a3a 0 18px, transparent 18px 34px); opacity: .55; }
.g-log { position: absolute; right: 12px; bottom: 4px; max-width: min(300px, 46vw); align-items: flex-end; font-size: 11px; color: #3a2208; opacity: .85; pointer-events: none; display: flex; flex-direction: column; gap: 1px; }
.g-log .log-line { background: rgba(255,246,214,.78); padding: 0 6px; border-radius: 6px; }
.g-log .log-line::before { content: ''; }

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.worker, .fall-block { position: absolute; will-change: transform, opacity; }
.worker { filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.fall-block { filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)); }
.fall-block svg { width: 100%; height: 100%; display: block; }
.dust { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(240,222,170,.85); animation: dust-up .65s ease-out forwards; }
@keyframes dust-up { from { transform: translate(0,0) scale(.6); opacity: .9; } to { transform: translate(var(--dx), -22px) scale(1.7); opacity: 0; } }

/* Operarios: hojas de fotogramas (img/obreros), 8 pasos por ciclo */
.spr { background-repeat: no-repeat; animation: spr var(--dur, .8s) steps(8) infinite; }
@keyframes spr { to { background-position-x: var(--end); } }
.worker.paused .spr { animation-play-state: paused; }
.worker { transform-origin: 50% 100%; }
.worker.face-left .spr, .idle.flip .spr { transform: scaleX(-1); }
.g-lane .idle { position: absolute; bottom: 3px; }
.g-lane .idle.pacer { animation: pace 15s linear infinite; }
.g-lane .idle.still .spr { animation-duration: 1.9s; }
@keyframes pace {
  0% { transform: translateX(0) scaleX(1); } 49.9% { transform: translateX(110px) scaleX(1); }
  50% { transform: translateX(110px) scaleX(-1); } 99.9% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); }
}

/* ── Bloques dentro del tablero ── */
.cell.rock { cursor: not-allowed; }
.cell.rock svg { filter: drop-shadow(0 3px 3px rgba(0,0,0,.75)); }
.cell.rock:hover svg { transform: none; }

/* ── Pantalla final y menú con las escenas ── */
.ov-scene { width: min(380px, 72vw); height: 250px; background: linear-gradient(#a8d6f0, #f0e2bc); border: 3px solid var(--borde); border-radius: 12px; overflow: hidden; }
.ov-mats { font-family: var(--font-cin); font-size: 13px; letter-spacing: 2px; color: #14286a; font-weight: 700; min-height: 18px; }
.wc-scene { height: 120px; margin: 4px 0 8px; background: linear-gradient(#a8d6f0, #f0e2bc); border: 2px solid #8a6a3a; border-radius: 8px; overflow: hidden; }
.wc-scene .wonder-svg { height: 100%; }

/* ── Móvil y tableta: se apila ── */
@media (max-width: 899px) {
  #screen-game { padding: 46px 10px 0; }
  .g-main { --W: min(94vw, 560px); grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; }
  .g-bottom { margin-left: -10px; margin-right: -10px; }
  .g-hud { gap: 10px; }
  .scroll { min-width: 0; padding: 6px 22px; }
  .scroll-score { flex: 0 0 auto; }
  .g-boardcol { margin: 0 auto; grid-column: 1; }
  .g-side { grid-column: 1; justify-self: center; flex-wrap: wrap; gap: 8px; }
  .g-side .pu-list { grid-template-columns: repeat(4, 1fr); width: min(94vw, 440px); }
  .g-log, #log { display: none; }
  .pillar { display: none; }
  .site-scene { left: 3%; bottom: 52px; }
  .g-side { flex-direction: row; justify-content: center; align-items: center; width: 100%; padding: 0; }
  .meter { flex-direction: row; width: min(92vw, 520px); height: 44px; padding: 0 14px; border-radius: 30px; gap: 10px; }
  .meter-tube { flex: 1; width: auto; height: 16px; }
  .meter-fill { top: 0; bottom: 0; right: auto; left: 0; height: 100% !important; width: var(--mw, 100%); background: linear-gradient(#7fe0f0, #2a8ac8); transition: width .35s; }
  .meter.warn-box .meter-fill { background: linear-gradient(#ff9a6a, #d03a18); }
  .meter-val { font-size: 22px; }
  .combo-bubble { flex-direction: row; gap: 6px; width: auto; padding: 4px 14px; }
  .scroll-level { min-width: 0; flex: 1; }
  .g-hud-right { margin-left: 0; width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .g-lane .idle, .g-lane .idle .spr, .worker *, .st.drop { animation: none !important; } }