/* Cajas (boxes, spec 8.6) y escena de apertura (BoxScene, spec 8.7, a pantalla completa encima del
   menú). Raíz de la pantalla: .screen.ui.s-boxes; raíz de la escena: .box-scene.ui (va dentro de
   #stage, fuera de la pantalla: sus reglas van con .box-scene). En base.css: .podium, .spot,
   .rays-l, .count, .bub y el marco dorado de .inv.sel. */

/* ---- Rejilla: inventario · escenario · ficha ------------------------------------------------ */
.s-boxes .boxes-body { display: flex; align-items: center; justify-content: center; padding: 12px; }
.s-boxes .boxes-grid {
  display: grid; grid-template-columns: minmax(0, 208fr) minmax(280px, 304fr) minmax(0, 284fr); gap: 12px;
  width: 100%; max-width: 1180px; height: 100%; max-height: 480px;
}

/* ---- Columna 1: inventario ------------------------------------------------------------------ */
.s-boxes .inv-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.s-boxes .inv-head { flex: none; height: 14px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.s-boxes .inv {
  flex: 1 1 0; min-height: 48px; max-height: 76px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 4px;
  color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.s-boxes .inv .ichest { flex: none; width: 54px; height: 54px; margin: -4px 0; }
.s-boxes .inv .count { min-width: 36px; }
.s-boxes .inv.empty .ichest { filter: saturate(.35) brightness(.7); }
.s-boxes .inv .inm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s-boxes .inv .inm .ty-h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.s-boxes .inv.empty .inm .ty-h4 { color: var(--tx-2); }
/* Elegida: muesca dorada que apunta al escenario */
.s-boxes .inv.sel::after {
  content: ''; position: absolute; right: -11px; top: 50%; width: 8px; height: 12px; margin-top: -6px; z-index: 6;
  background: var(--gold-2); clip-path: polygon(0 0, 100% 50%, 0 100%); pointer-events: none;
}
/* a más alto crecen las filas (hasta 76), no el cofre: la columna sigue midiendo 208 */

/* ---- Columna 2: escenario (foco, rayos quietos, peana y el cofre flotando) ------------------ */
/* --sk: escala del arte limitada a 1,2 (en iPad el cofre no cabría en la columna). El cofre se
   apoya en la tapa de la peana: su esquina más baja (al 89 % del lienzo, 26,9·k por encima del borde
   de la imagen) queda a 36·k del pie de la peana, entre el centro de la tapa (44,8·k) y su borde
   delantero (25,6·k). Así se ve encima, no detrás. */
.s-boxes .box-stage { --sk: min(var(--art-k), 1.2); position: relative; min-width: 0; }
.s-boxes .box-stage .spot { top: -12px; width: calc(200px * var(--sk)); height: 78%; }
.s-boxes .box-stage .rays-l {
  --ray: rgba(170,210,255,.10); left: 50%; width: 340px; height: 340px; margin-left: -170px;
  bottom: calc(8% + 130px * var(--sk) - 170px);
}
.s-boxes .box-stage .podium { bottom: 8%; width: calc(230px * var(--sk)); height: calc(64px * var(--sk)); }
.s-boxes .bx-chest {
  position: absolute; left: 0; right: 0; bottom: calc(8% + 9px * var(--sk)); height: calc(250px * var(--sk));
  display: flex; justify-content: center; pointer-events: none;
}
.s-boxes .bx-chest.anim-bob { animation-duration: 2.4s; }
.s-boxes .bx-img { height: 100%; width: auto; pointer-events: auto; cursor: pointer; }
.s-boxes .bx-img.swap { animation: bx-swap .32s cubic-bezier(.2,.8,.2,1); }
@keyframes bx-swap { from { opacity: .2; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ---- Columna 3: ficha de la caja ------------------------------------------------------------ */
.s-boxes .box-card { display: flex; flex-direction: column; padding: 14px 16px; min-width: 0; min-height: 0; }
.s-boxes .bc-name { margin-top: 4px; font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.s-boxes .bc-desc { margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-boxes .bc-over2 { margin-top: 10px; display: flex; justify-content: space-between; padding: 0 10px 0 2px; }
.s-boxes .odds { margin-top: 6px; padding: 2px 10px; flex: none; }
.s-boxes .orow { height: 22px; display: flex; align-items: center; gap: 7px; }
.s-boxes .orow + .orow { box-shadow: inset 0 1px 0 var(--hair); }
.s-boxes .orow .oic { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.s-boxes .orow .oic img { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.s-boxes .orow .ocue { display: block; width: 24px; height: 3px; transform: rotate(-35deg); }
.s-boxes .orow .ocue img { display: block; width: 24px; height: 3px; filter: none; }
.s-boxes .orow .ol { flex: 1; min-width: 0; font: 700 11px/1 var(--f-ui); color: var(--tx-2); white-space: nowrap; }
.s-boxes .orow .oq { flex: none; font-size: 15px; color: #fff; text-align: right; white-space: nowrap; }
.s-boxes .orow .op { flex: none; width: 40px; font-size: 15px; color: var(--gold-2); text-align: right; white-space: nowrap; }
/* Botones: ABRIR ① y COMPRAR [moneda] 3.000 caben juntos en 252 px con 18 px de texto; cada uno
   toma lo que necesita y el resto se reparte. Solo uno: a todo el ancho y a 21 px. */
.s-boxes .bc-acts { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.s-boxes .bc-acts .btn { flex: 1 1 auto; min-width: 0; padding: 0 9px; font-size: 18px; gap: 5px; }
.s-boxes .bc-acts .btn img { width: 22px; height: 22px; }
.s-boxes .bc-acts .btn.solo { font-size: 21px; gap: 7px; }
.s-boxes .bc-acts .btn.solo img { width: 24px; height: 24px; }
.s-boxes .bc-acts .vwin { flex: 1.35 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.s-boxes .bc-acts .vw-t { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.s-boxes .bc-acts .vw-t .ty-small { white-space: nowrap; }
.s-boxes .bc-acts .vw-t .ty-num { font-size: 16px; color: #fff; }
.s-boxes .bc-acts .vwin .bar { width: 100%; }
#stage[data-h="l"] .s-boxes .orow, #stage[data-h="xl"] .s-boxes .orow { height: 26px; }
#stage[data-h="l"] .s-boxes .bc-desc, #stage[data-h="xl"] .s-boxes .bc-desc { -webkit-line-clamp: 3; }
#stage[data-h="l"] .s-boxes .bc-over2, #stage[data-h="xl"] .s-boxes .bc-over2 { margin-top: 14px; }
/* iPad: la ficha no se estira hasta el alto de la rejilla (quedaría un hueco): se centra */
#stage[data-h="xl"] .s-boxes .box-card { align-self: center; }
#stage[data-h="xl"] .s-boxes .bc-acts { padding-top: 18px; }
/* iPad: la rejilla (máx. 480) queda centrada y el foco tiene que seguir naciendo bajo la barra */
#stage[data-h="xl"] .s-boxes .boxes-body { overflow: hidden; }
#stage[data-h="xl"] .s-boxes .box-stage .spot { top: -90px; height: calc(78% + 90px); }

/* ======================= Escena de apertura de cofres ======================= */
/* Capas: rayos (giran) · peana · cofre (sobre la peana) · cartas · pista/botones. El cofre mide
   230·k; su esquina más baja (24,6·k sobre el borde de la imagen) queda a 36·k del pie de la peana,
   dentro de la tapa. Los rayos, cálidos y con máscara corta, salen del centro del cofre (121·k). */
.box-scene {
  position: absolute; inset: 0; z-index: 60; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 46%, #173a7c 0%, #0a1f47 50%, #040b1c 100%);
  /* la sombra exterior del color del borde tapa la zona de la muesca en los iPhone */
  box-shadow: inset 0 0 90px rgba(0,4,14,.55), 0 0 0 160px #040b1c; animation: fade .3s;
}
.box-scene .rays {
  position: absolute; left: 50%; width: 820px; height: 820px; margin-left: -410px; bottom: calc(16% + 121px * var(--art-k) - 410px); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,222,150,.11) 0 6deg, rgba(255,222,150,0) 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 10%, rgba(0,0,0,.55) 26%, transparent 52%); mask-image: radial-gradient(circle, #000 0 10%, rgba(0,0,0,.55) 26%, transparent 52%);
  animation: spinrays 24s linear infinite; pointer-events: none;
}
.box-scene.opened .rays { background: repeating-conic-gradient(from 0deg, rgba(255,214,120,.24) 0 6deg, rgba(255,214,120,0) 6deg 15deg); animation-duration: 12s; }
.box-scene .podium { bottom: 16%; transition: opacity .45s, transform .45s; }
.box-scene.dealt .podium { opacity: 0; }
.box-scene .title { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-size: 26px; animation: pop-in .5s both; pointer-events: none; }
.box-scene .hint { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-size: 16px; color: var(--tx-2); animation: breathe 1.4s ease-in-out infinite; pointer-events: none; }
.chest {
  position: absolute; left: 50%; bottom: calc(16% + 11px * var(--art-k)); width: calc(230px * var(--art-k)); height: calc(230px * var(--art-k));
  margin-left: calc(-115px * var(--art-k)); cursor: pointer; z-index: 2; transform-origin: 50% 90%;
}
.chest img { width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.chest .glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,90,.55), rgba(255,210,90,0) 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.chest.drop { animation: chest-drop .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes chest-drop { from { transform: translateY(-420px) scale(.8); } 70% { transform: translateY(8px) scale(1.04, .95); } to { transform: none; } }
.chest.idle img { animation: bob 2s ease-in-out infinite; }
.chest.shaking img { animation: chest-shake .9s ease-in both; transform-origin: 50% 80%; }
.chest.shaking .glow { opacity: 1; }
@keyframes chest-shake {
  0% { transform: none; } 10% { transform: rotate(-3deg) scale(1.02); } 20% { transform: rotate(3deg) scale(1.03); }
  30% { transform: rotate(-5deg) scale(1.05); } 40% { transform: rotate(5deg) scale(1.06); } 50% { transform: rotate(-6deg) scale(1.08); }
  60% { transform: rotate(6deg) scale(1.1); } 70% { transform: rotate(-7deg) scale(1.12); } 80% { transform: rotate(7deg) scale(1.14); }
  90% { transform: rotate(-3deg) scale(1.16); } 100% { transform: scale(1.18); } }
/* Abierta: se queda en la peana; al repartir, cofre y peana se apartan y mandan las cartas */
.chest.opened { animation: chest-open .5s cubic-bezier(.2,1.5,.4,1); transition: transform .5s, opacity .45s; }
@keyframes chest-open { from { transform: scale(1.18); } }
.chest.opened .glow { opacity: 1; animation: glow-o 1.2s ease-in-out infinite alternate; }
.box-scene.dealt .chest { transform: translateY(30px) scale(.8); opacity: 0; pointer-events: none; }
.box-scene .flash { position: absolute; inset: 0; background: #fff; z-index: 5; pointer-events: none; animation: flash .55s ease-out forwards; }
/* Cartas: centradas entre el título y los botones, con los rayos detrás */
.box-scene .cards-row { position: absolute; left: 0; right: 0; top: calc(50% - 94px); display: flex; justify-content: center; gap: 14px; z-index: 4; perspective: 900px; pointer-events: none; }
.fcard { position: relative; width: 124px; height: 158px; transform-style: preserve-3d; }
.fcard.fly { animation: card-fly .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes card-fly { from { transform: translate(var(--fx), var(--fy)) scale(.25) rotate(-25deg); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
.fcard .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1); }
.fcard.flipped .inner { transform: rotateY(180deg); }
.fcard .back, .fcard .face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; }
/* Dorso: marino con marco de oro y una «T» dorada */
.fcard .back { background: radial-gradient(circle at 50% 40%, #1d4a9a, #0a1f47 70%); box-shadow: inset 0 0 0 3px var(--gold-2), inset 0 0 0 7px #0a1f47, inset 0 0 0 8px rgba(255,211,77,.6), 0 8px 16px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.fcard .back span { font: italic 800 44px/1 var(--f-disp); background: linear-gradient(180deg, #fff8d8 0%, #ffe07a 45%, #f2b126 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(70,36,0,.75)); }
.fcard .face { transform: rotateY(180deg); }
.fcard .face .reward { animation: none; width: 100%; height: 100%; }
.fcard .halo { position: absolute; inset: -18px; border-radius: 24px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.fcard.flipped .halo { opacity: 1; animation: halo 1.6s ease-in-out infinite; }
.fcard.r-orange .halo { background: radial-gradient(closest-side, rgba(255,160,50,.75), rgba(255,160,50,0)); }
.fcard.r-purple .halo { background: radial-gradient(closest-side, rgba(190,110,255,.7), rgba(190,110,255,0)); }
.fcard.r-pink .halo { background: radial-gradient(closest-side, rgba(255,90,210,.7), rgba(255,90,210,0)); }
.fcard.r-blue .halo, .fcard.r-green .halo { background: radial-gradient(closest-side, rgba(120,190,255,.45), rgba(120,190,255,0)); }
/* Botones: ABRIR OTRA ② (.g) y CONTINUAR (.b), L de 170; sin más cajas, solo CONTINUAR en .g */
.scene-actions { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 14px; z-index: 6; animation: pop-in .4s both; }
.box-scene .scene-actions .btn { min-width: 170px; }

@media (prefers-reduced-motion: reduce) {
  .box-scene .rays, .box-scene .hint, .s-boxes .bx-img.swap { animation: none !important; }
}