/* ==========================================================================
   GACHAPON — la máquina (compartida con /join), la página /gacha y la
   apertura de cápsulas y sobres (cartas que giran, rayos, destellos).
   ========================================================================== */

/* ---------------- la máquina ---------------- */
.gm { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; isolation: isolate; }
.gm::after { /* sombra en el suelo */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 2.5%; height: 7%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(22,20,24,.28), transparent 70%);
}
.gm-sun {
  position: absolute; inset: 2%; border-radius: 50%; z-index: -2;
  background: repeating-conic-gradient(from 0deg, rgba(224,169,28,.22) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: kcSpin 70s linear infinite;
}
.gm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.gm.has-photo .gm-photo { display: block; }
.gm.has-photo .gm-fallback { display: none; }
.gm-fallback { position: absolute; inset: 0; transition: opacity .3s; }
.gm.is-loading .gm-fallback { opacity: 0; } /* hasta saber si hay ilustración: nada de parpadeo */
.gm-photo.is-swap { animation: gmSwap .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes gmSwap { from { transform: translateY(3%) scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
.gm-machine { position: absolute; left: 6%; bottom: 5%; width: 56%; }
.gm-svg { width: 100%; height: auto; overflow: visible; }
.gm-crank, .gm-balls { transform-box: view-box; }
.gm-balls { transform-origin: 105px 108px; }
.gm-crank { transform-origin: 0 0; }
.gm-op { position: absolute; right: 0; bottom: 5%; width: 40%; height: auto; transform-origin: 50% 100%; z-index: 2; pointer-events: none; }
.gm[data-op="mikan"] .gm-op { width: 30%; right: 6%; bottom: 7%; }
.gm:not(.is-spinning) .gm-op { animation: gmIdle 3.2s ease-in-out infinite; }
@keyframes gmIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(1.5deg); } }

/* cápsula: neutra al caer, el color de la rareza se revela al final */
.gm-capsule {
  --c1: #fffdf7; --c2: #ebe1cb;
  position: absolute; left: 30%; top: 80%; width: 16%; aspect-ratio: 1; z-index: 4; opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(3px 4px 0 rgba(22,20,24,.85));
  transition: filter .3s;
}
.gm-cap-top, .gm-cap-bot { position: absolute; left: 0; right: 0; height: 50%; border: 3px solid var(--ink); }
.gm-cap-top {
  top: 0; border-radius: 999px 999px 0 0; border-bottom-width: 1.5px;
  background: radial-gradient(circle at 32% 34%, #fff 0 11%, transparent 12%), var(--halftone), linear-gradient(160deg, #fffdf7, #e2d5ba);
  background-size: auto, 6px 6px, auto;
  transition: transform .55s cubic-bezier(.2,.9,.3,1.2), opacity .55s, background .25s;
}
.gm-cap-bot {
  bottom: 0; border-radius: 0 0 999px 999px; border-top-width: 1.5px;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.9) 0 8%, transparent 9%), rgba(255,253,247,.94);
  transition: transform .5s ease, opacity .5s;
}
.gm-cap-q { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(14px, 4.4vw, 26px)/1 var(--f-display); color: var(--ink); text-shadow: 1px 1px 0 #fff; transition: opacity .2s; }
.gm-capsule.is-colored .gm-cap-top { background: radial-gradient(circle at 32% 34%, #fff 0 11%, transparent 12%), var(--halftone), linear-gradient(160deg, var(--c1), var(--c2)); background-size: auto, 6px 6px, auto; }
.gm-capsule.is-colored.r-legendary .gm-cap-top { background: radial-gradient(circle at 32% 34%, #fff 0 11%, transparent 12%), conic-gradient(from 20deg, #ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); }
.gm-capsule.is-colored .gm-cap-q { opacity: 0; }
.gm-capsule.glow-1 { filter: drop-shadow(3px 4px 0 rgba(22,20,24,.85)) drop-shadow(0 0 10px rgba(255,255,255,.95)); }
.gm-capsule.glow-2 { filter: drop-shadow(3px 4px 0 rgba(22,20,24,.85)) drop-shadow(0 0 16px #ffd86a) drop-shadow(0 0 4px #fff); }
.gm-capsule.glow-3 { filter: drop-shadow(0 0 22px #c39bff) drop-shadow(0 0 40px #fff) drop-shadow(0 0 6px #ffe27a); }
.gm-capsule.is-open .gm-cap-top { transform: translate(-40%, -170%) rotate(-50deg); opacity: 0; }
.gm-capsule.is-open .gm-cap-bot { transform: translate(30%, 120%) rotate(30deg); opacity: 0; }

/* explosión de luz */
.gm-burst { position: absolute; left: 50%; top: 56%; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; --bc: var(--gold-2); }
.gm-burst i, .gm-burst b { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.gm-burst i { background: repeating-conic-gradient(from 0deg, var(--bc) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.gm-burst b { background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,.6) 45%, transparent 70%); }
.gm-burst.go i { animation: gmRays 1.2s ease-out forwards; }
.gm-burst.go b { animation: gmFlash .7s ease-out forwards; }
.gm-burst.r-legendary i { background: repeating-conic-gradient(from 0deg, #ff8fb3 0 6deg, #ffe27a 6deg 12deg, #8ef2c8 12deg 18deg, transparent 18deg 26deg); }
@keyframes gmRays { 0% { transform: scale(0) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(13) rotate(80deg); opacity: 0; } }
@keyframes gmFlash { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(16); opacity: 0; } }

/* textos de cómic (BAM!, BONK!, !?) */
.gm-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.gm-pop {
  position: absolute; white-space: nowrap; transform: translate(-50%, -50%);
  font: 900 clamp(17px, 4.6vw, 30px)/1 var(--f-display); letter-spacing: .02em; color: var(--white);
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
  animation: gmPop .95s ease-out forwards;
}
.gm-pop.is-bam { color: var(--gold-2); font-size: clamp(24px, 7vw, 46px); }
.gm-pop.is-bonk { color: var(--pink); font-size: clamp(22px, 6vw, 40px); }
.gm-pop.is-alert { color: var(--seal); }
.gm-pop.is-wink { color: var(--pink-2); }
.gm-pop.is-note { color: var(--teal-2); }
@keyframes gmPop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-12deg); opacity: 0; } 22% { transform: translate(-50%, -70%) scale(1.18) rotate(-6deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1) rotate(-6deg); opacity: 0; } }

/* ---------------- página /gacha ---------------- */
.gx { padding: clamp(20px, 4vw, 48px) 0 40px; }
.gx-head { text-align: center; margin-bottom: clamp(14px, 3vw, 28px); }
.gx-head h1 { margin: .15em 0 .1em; }
.gx-head h1 .jp { display: block; font: 400 .42em/1 var(--f-brush); color: var(--seal); letter-spacing: .1em; margin-bottom: .2em; }
.gx-head .lead { margin: 0 auto; }
.gx-grid { display: grid; gap: clamp(18px, 3vw, 32px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .gx-grid { grid-template-columns: minmax(0, 1fr); } }

.gx-stagewrap {
  position: relative; overflow: hidden; padding: clamp(10px, 2vw, 22px);
  background: radial-gradient(circle at 50% 40%, #fff7e3, var(--cream) 60%, var(--orange-2) 130%);
  transition: background .5s;
}
.gx-stagewrap::before { content: ""; position: absolute; inset: 0; background-image: var(--halftone-orange); background-size: 9px 9px; opacity: .35; pointer-events: none; }
.gx-stagewrap.is-dim { background: radial-gradient(circle at 50% 45%, #2a2440, var(--night) 70%); }
.gx-badge {
  position: absolute; top: 12px; left: 12px; z-index: 7;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  background: var(--ink); color: var(--paper); border-radius: 999px; box-shadow: var(--shadow-sm);
  font: 800 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase;
}
.gx-badge b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--seal); color: var(--white); font-size: 17px; letter-spacing: 0; border: 2px solid var(--paper); }
.gx-badge.is-zero b { background: var(--ink-soft); }
.gx-stage-hint { position: absolute; right: 14px; top: 14px; z-index: 7; font: 400 22px/1 var(--f-brush); color: var(--seal); writing-mode: vertical-rl; letter-spacing: .1em; opacity: 0; transition: opacity .3s; pointer-events: none; }
.gx-stagewrap.is-ready .gx-stage-hint { opacity: .85; animation: gxHint 2.8s ease-in-out infinite; }
@keyframes gxHint { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-6deg); } 86% { transform: rotate(5deg); } }
.gx-stagewrap.is-ready:not(.is-busy) #stage { cursor: pointer; }
.gx-stagewrap.is-ready:not(.is-busy) #stage:hover .gm-photo, .gx-stagewrap.is-ready:not(.is-busy) #stage:hover .gm-machine { filter: drop-shadow(0 0 14px rgba(255,216,106,.9)); }

/* el botón grande debajo de la máquina */
.gx-stage-cta { position: relative; z-index: 7; margin-top: clamp(8px, 1.5vw, 14px); }
.gx-spin-n { display: inline-grid; place-items: center; min-width: 2em; padding: 5px 9px; margin-left: 4px; border-radius: 999px; background: var(--white); color: var(--seal); border: 2px solid var(--ink); font: 900 max(11px, .78em)/1 var(--f-display); letter-spacing: 0; }
.btn--teal .gx-spin-n { color: var(--teal); }
.gx-stage-cta .btn--teal.gx-spin { font-size: 17px; letter-spacing: .06em; }
/* interruptor «Quick spin» */
.gx-quick { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font: 800 12px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; user-select: none; }
.gx-quick small { font: 600 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.gx-quick input { position: absolute; opacity: 0; pointer-events: none; }
.gx-quick .sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--paper-2); transition: background .2s; }
.gx-quick .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transition: transform .2s cubic-bezier(.3,1.5,.5,1); }
.gx-quick input:checked + .sw { background: var(--gold-2); }
.gx-quick input:checked + .sw::after { transform: translateX(16px); background: var(--seal); }
.gx-quick input:focus-visible + .sw { outline: 3px solid var(--teal); outline-offset: 2px; }
.gx-quick:has(input:disabled) { opacity: .45; cursor: default; }
.gx-cta-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 10px 16px;
  border: 2.5px dashed rgba(22,20,24,.45); border-radius: 999px; background: rgba(255,253,247,.7);
  font: 700 14px/1.3 var(--f-body); color: var(--ink-2); text-align: center; text-decoration: none;
}
.gx-cta-empty b { color: var(--seal); }
.gx-cta-empty .slot { flex: none; width: 14px; height: 26px; border-radius: 4px; background: var(--gold-2); border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 2.5px var(--gold-2), inset 0 0 0 5px var(--ink); }

.gx-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.gx-label { font: 800 13px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: baseline; }
.gx-label small { font: 600 13px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }

.gx-ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gx-op {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; min-width: 0;
  background: var(--white); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm);
  cursor: pointer; font: 800 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  transition: transform .12s, box-shadow .12s, background .2s;
}
.gx-op:hover { transform: translate(-1px, -2px); box-shadow: 3px 4px 0 var(--ink); }
.gx-op .face { width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink); overflow: hidden; background: var(--op, var(--paper-2)); display: grid; place-items: center; }
.gx-op .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 18%; }
.gx-op[data-op="mikan"] .face img { transform: none; object-fit: contain; }
.gx-op .face.dice { font: 900 30px/1 var(--f-display); background: conic-gradient(from 0deg, var(--pink), var(--gold-2), var(--teal-2), var(--orange-2), var(--pink)); }
.gx-op[aria-pressed="true"] { background: var(--gold-2); transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.gx-op[aria-pressed="true"] .face { box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 6px var(--ink); }
/* móvil estrecho: cuatro fichas en fila no caben con la letra grande («TADASHI», «SURPRISE» se salían) */
@media (max-width: 420px) { .gx-ops { gap: 5px; } .gx-op { font-size: 11px; line-height: 1.1; letter-spacing: 0; padding: 9px 4px 8px; border-width: 2.5px; } .gx-op .face { width: 46px; height: 46px; } }
@media (max-width: 420px) { .gx-op[data-op="surprise"] { letter-spacing: -.025em; } }
@media (max-width: 360px) { .gx-op[data-op="surprise"] { padding-inline: 2px; } }
.gx-odds-note { margin: 10px 0 0; font: 700 14px/1.4 var(--f-body); color: var(--ink-soft); text-align: center; }
.gx-odds-note b { color: var(--ink); font-style: italic; }

.gx-prizes { display: grid; gap: 10px; }
.gx-prize {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px;
}
.gx-prize .ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--ink); background: var(--white); font: 900 22px/1 var(--f-jp); }
.gx-prize .ico.cap { background: var(--white); } /* la cápsula dibujada de ui.js (ICONS.capsule), la misma de la cabecera y la barra */
.gx-prize .ico.cap .i { width: 34px; height: 34px; }
.gx-prize .ico.pack { background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: var(--white); }
.gx-prize .ico.fixed { background: conic-gradient(from 0deg, #ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); }
.gx-prize .txt { flex: 1; min-width: 0; }
.gx-prize b { display: block; font: 800 15px/1.2 var(--f-display); }
.gx-prize small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-prize .btn { flex: none; }

.gx-spin { width: 100%; font-size: 22px; min-height: 68px; letter-spacing: .12em; position: relative; overflow: hidden; }
.gx-spin .jp { font: 900 18px/1 var(--f-jp); opacity: .8; }
.gx-spin:not([disabled])::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 45%, transparent 55%); background-size: 250% 100%; animation: kcSweep 2.6s ease-in-out infinite; pointer-events: none; }
.gx-pity { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 600 14px/1.35 var(--f-body); color: var(--ink-2); }
.gx-pity .bar { flex: 1; height: 12px; }
.gx-pity b { font-weight: 800; }

.gx-odds { border: 2px solid var(--ink); border-radius: 14px; background: var(--white); }
.gx-odds summary { cursor: pointer; padding: 12px 14px; font: 800 14px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.gx-odds summary::-webkit-details-marker { display: none; }
.gx-odds summary::after { content: "+"; font-size: 22px; line-height: 1; }
.gx-odds[open] summary::after { content: "−"; }
.gx-odds-body { padding: 0 14px 16px; font-size: 15px; line-height: 1.45; }
@media (max-width: 560px) { .gx-odds-body { font-size: 14px; } }
.gx-odds table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.gx-odds td { padding: 10px 6px; border-bottom: 1.5px dashed rgba(22,20,24,.2); }
.gx-odds td:last-child { text-align: right; font: 800 16px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.gx-odds ul { margin: 4px 0 0; padding-left: 20px; }
.gx-odds li + li { margin-top: 7px; }
.rchip { display: inline-flex; align-items: center; gap: 10px; font: 800 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.rchip i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); font: 900 13px/1 var(--f-jp); font-style: normal; background: var(--white); }
.rchip.r-common i { background: var(--paper); }
.rchip.r-rare i { background: var(--seal); color: var(--white); }
.rchip.r-epic i { background: linear-gradient(120deg, #b88a12, #ffe08a, #c7951b); }
.rchip.r-legendary i { background: conic-gradient(#ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); }

.gx-links { display: flex; gap: 10px; flex-wrap: wrap; }

/* bandeja «Just pulled»: lo que ha salido en esta visita */
.gx-tray-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px 8px; list-style: none; margin: 0; padding: 0; }
.gx-tray-list li:first-child .gx-mini { animation: popin .4s cubic-bezier(.3,1.4,.5,1) both; }
.gx-mini {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; padding: 0; overflow: hidden; cursor: pointer;
  border: 2.5px solid var(--ink); border-radius: 9px; background: var(--paper-2); box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
}
.gx-mini:hover { transform: translate(-1px, -3px) rotate(-2deg); box-shadow: 3px 5px 0 var(--ink); }
.gx-mini img { position: absolute; inset: 6% 4% 14%; width: 92%; height: 80%; object-fit: contain; }
.gx-mini.r-rare { background: radial-gradient(circle at 50% 40%, #fff3f0, #ffc9c2); box-shadow: inset 0 0 0 3px var(--seal), var(--shadow-sm); }
.gx-mini.r-epic { background: radial-gradient(circle at 50% 40%, #fffbe8, #ffe08a); box-shadow: inset 0 0 0 3px var(--gold), var(--shadow-sm); }
.gx-mini.r-legendary { background: radial-gradient(circle at 50% 40%, #fff6d0, #e7d6ff); box-shadow: inset 0 0 0 3px #7b4fe0, var(--shadow-sm); }
.gx-mini.is-kira::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 45%, rgba(142,242,200,.5) 52%, transparent 65%); background-size: 260% 100%; animation: kcSweep 2.6s ease-in-out infinite; pointer-events: none; }
.gx-mini .rj { position: absolute; right: 3px; bottom: 3px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); font: 900 11px/1 var(--f-jp); }
.gx-mini.r-rare .rj { background: var(--seal); color: var(--white); }
.gx-mini.r-epic .rj { background: var(--gold-2); }
.gx-mini.r-legendary .rj { background: conic-gradient(#ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); }
.gx-mini .nw { position: absolute; left: 3px; top: 3px; padding: 3px 5px 2px; border-radius: 5px; background: var(--seal); color: var(--white); font: 900 11px/1 var(--f-display); letter-spacing: .02em; }
.gx-peek-modal .modal-box { width: auto; max-width: 100%; display: grid; justify-items: center; overflow: visible; }
.gx-peek { display: grid; justify-items: center; gap: 16px; }
.gx-peek .kcard { color: var(--ink); }
.gx-peek-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* pantalla vacía: cómo se ganan premios */
.gx-empty h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: .3em; }
.gx-ways { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.gx-ways li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 10px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.gx-ways .ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--ink); background: var(--white); font: 900 24px/1 var(--f-jp); }
.gx-ways b { display: block; font: 800 15px/1.2 var(--f-display); }
.gx-ways small { color: var(--ink-2); font-size: 14px; line-height: 1.4; display: block; margin-top: 3px; }
.gx-ways a { font-weight: 700; color: var(--seal); }

/* modo desarrollo */
.gx-dev { margin-top: 26px; border: 2px dashed var(--seal); border-radius: 14px; padding: 12px 14px; background: rgba(196,32,28,.05); }
.gx-dev b { font: 800 12px/1 var(--f-display); letter-spacing: .14em; color: var(--seal); text-transform: uppercase; display: block; margin-bottom: 8px; }
.gx-dev select { min-height: 38px; border: 2px solid var(--ink); border-radius: 10px; font: 700 14px var(--f-body); padding: 0 8px; background: var(--white); }

/* ---------------- apertura: capa a pantalla completa ---------------- */
body.gx-open { overflow: hidden; }
body.gx-open .mikan { z-index: 130; }
/* en móvil la barra de pestañas queda tapada por la capa: Mikan baja a la esquina y la capa le deja sitio */
@media (max-width: 820px) { body.gx-open .mikan { bottom: calc(4px + env(safe-area-inset-bottom)); --mk-w: 88px; } }
@media (max-width: 640px) { .gx-reveal { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }
.gx-reveal {
  --rc: var(--teal); --rc2: var(--teal-2);
  position: fixed; inset: 0; z-index: 110; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px; overflow-y: auto;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 42%, #fffdf7 0 18%, var(--paper) 55%, var(--paper-3));
  animation: popin .25s ease both;
}
.gx-reveal::before { content: ""; position: absolute; inset: 0; background-image: var(--paper-noise); opacity: .8; pointer-events: none; }
.gx-reveal > * { flex-shrink: 0; } /* en pantallas bajas la capa se desplaza; sin esto el título encogía y la carta lo pisaba */
.gx-reveal.r-rare { --rc: var(--seal); --rc2: var(--pink); }
.gx-reveal.r-epic { --rc: var(--gold); --rc2: var(--gold-2); }
.gx-reveal.r-legendary { --rc: #7b4fe0; --rc2: #ffe27a; }
.gx-reveal.is-dark { background: radial-gradient(circle at 50% 42%, #2b2150 0, #0c0b14 70%); color: var(--paper); transition: background .4s; }
.gx-reveal.is-dark::before { opacity: .08; }
/* los rayos giran dentro de una caja del tamaño de la pantalla: el cuadrado enorme que gira ya no
   alarga la capa (antes la capa se podía desplazar ~1000 px hacia un fondo vacío y la carta quedaba cortada arriba) */
.gx-rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s; }
.gx-rays::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 190vmax; height: 190vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc2) 55%, transparent) 0 7deg, transparent 7deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 38%); mask: radial-gradient(circle, #000 4%, transparent 38%);
}
.gx-reveal.is-shown .gx-rays { opacity: 1; }
.gx-reveal.is-shown .gx-rays::before { animation: gxRays 30s linear infinite; }
.gx-reveal.r-legendary .gx-rays::before { background: repeating-conic-gradient(from 0deg, rgba(255,143,179,.5) 0 6deg, rgba(255,226,122,.5) 6deg 12deg, rgba(142,242,200,.5) 12deg 18deg, rgba(127,200,255,.5) 18deg 24deg, transparent 24deg 32deg); }
@media (prefers-reduced-motion: reduce) { .gx-reveal.is-shown .gx-rays::before { animation: none; } }
@keyframes gxRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
.gx-flash.go { animation: gxFlash .55s ease-out; }
@keyframes gxFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.gx-bolts { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.gx-bolts svg { position: absolute; width: 34vmin; height: 70vh; opacity: 0; }
.gx-bolts svg.go { animation: gxBolt .5s steps(2) 2; }
@keyframes gxBolt { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.gx-reveal.is-shake { animation: shake .5s ease; }

.gx-title { position: relative; z-index: 2; text-align: center; min-height: 1.2em; }
.gx-title .gx-rar { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); font: 900 15px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; animation: popin .4s ease both; }
.gx-title .gx-rar i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); font: 900 16px/1 var(--f-jp); font-style: normal; background: var(--rc); color: var(--white); }
.gx-reveal.r-legendary .gx-title .gx-rar i { background: conic-gradient(#ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3); color: var(--ink); }
.gx-why { display: block; margin-top: 8px; font: 800 13px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

.gx-slot { position: relative; z-index: 2; perspective: 1100px; }
.gx-flip { position: relative; transform-style: preserve-3d; will-change: transform; }
.gx-flip .kc-frame, .gx-flip .kc-shine, .gx-flip .kc-glare { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gx-flip .kcard { transition: box-shadow .25s; }
.gx-reveal .kcard, .gx-zoom .kcard { color: var(--ink); } /* la capa oscura (legendaria) no tiñe el texto de la carta */
.gx-reveal.r-epic .gx-slot .kcard { box-shadow: 5px 6px 0 var(--ink), 0 0 50px 8px rgba(255,216,106,.75); }
.gx-reveal.r-legendary .gx-slot .kcard { box-shadow: 5px 6px 0 var(--ink), 0 0 70px 14px rgba(195,155,255,.8); }
/* reverso: las seis líneas de metro cruzando el sello 札 (nada de cascada ni koi) */
.kcard-back.gx-back { background: var(--ink); }
.kcard-back.gx-back::before { inset: 5.5%; z-index: 1; background: none; border: calc(var(--w) * .008) solid rgba(243,236,220,.55); }
.gx-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.kcard-back .gx-back-seal {
  position: relative; z-index: 2; width: 40%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: var(--seal); color: var(--paper); font: 400 2.5em/1 var(--f-brush);
  border: calc(var(--w) * .016) solid var(--paper); box-shadow: 0 0 0 calc(var(--w) * .012) var(--ink), calc(var(--w) * .014) calc(var(--w) * .016) 0 var(--ink);
}
.kcard-back small.gx-back-top, .kcard-back small.gx-back-bot { z-index: 2; padding: .5em .85em; border-radius: 999px; background: var(--ink); font: 800 max(11px, .5em)/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
/* reverso pequeño (abanico en móvil): solo cabe el rótulo de arriba; por debajo de 150 px, ninguno (regla de components.css) */
@container kcb (width < 205px) { .kcard-back small.gx-back-bot { display: none; } }
.kcard-back small.gx-back-top { top: 9%; bottom: auto; color: var(--gold-2); }
.kcard-back small.gx-back-bot { bottom: 9%; }

.gx-new {
  position: absolute; z-index: 8; top: 14%; left: -30px; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white); background: var(--seal);
  border: var(--line) solid var(--ink); box-shadow: inset 0 0 0 4px var(--seal), inset 0 0 0 6px var(--paper), 3px 4px 0 var(--ink);
  font: 900 24px/1 var(--f-display); letter-spacing: .02em; transform: rotate(-12deg) translateZ(80px);
  animation: slam .45s cubic-bezier(.3,1.4,.5,1) both;
}
.gx-body { position: relative; z-index: 2; display: grid; place-items: center; }
.gx-kira {
  position: absolute; z-index: 9; left: 50%; bottom: -22px; transform: translateX(-50%) rotate(-3deg); white-space: nowrap;
  padding: 8px 16px; border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow);
  background: conic-gradient(from 0deg, #ff8fb3, #ffe27a, #8ef2c8, #7fc8ff, #c39bff, #ff8fb3);
  font: 900 16px/1 var(--f-display); letter-spacing: .1em; color: var(--ink); text-transform: uppercase;
  animation: popin .5s cubic-bezier(.3,1.4,.5,1) both;
}
.gx-kira-sweep { position: absolute; inset: 0; z-index: 7; border-radius: 14px; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.95) 48%, rgba(255,230,120,.8) 52%, transparent 70%); background-size: 300% 100%; animation: gxSweep 1.1s ease-in-out 2; mix-blend-mode: screen; }
@keyframes gxSweep { from { background-position: 150% 0; } to { background-position: -60% 0; } }

.gx-info { position: relative; z-index: 2; text-align: center; max-width: 420px; }
.gx-info p { margin: 0; font-weight: 600; }
.gx-info .copies, .gx-zoom .copies { margin: 0; font: 800 14px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.gx-dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: 0; }
.gx-dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; opacity: .5; }
.gx-dots i.on { background: var(--gold-2); border-color: var(--ink); opacity: 1; }
.gx-reveal.is-dark .gx-dots i.on { border-color: var(--paper); }
.gx-actions { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; width: min(100%, 460px); }
.gx-act-main, .gx-act-sub { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; }
.gx-act-main .btn { min-height: 52px; }
@media (max-width: 640px) { .gx-act-main .btn { flex: 1 1 0; padding-inline: 10px; font-size: 14px; letter-spacing: .04em; white-space: nowrap; } }
.gx-ico { width: 1.3em; height: 1.3em; margin-right: 6px; flex: none; }
[data-say] .jp { font: 700 15px/1 var(--f-jp); letter-spacing: 0; text-transform: none; }
.gx-react { position: absolute; z-index: 2; pointer-events: none; animation: gxReact .6s cubic-bezier(.3,1.5,.5,1) both; }
.gx-react.is-side { top: 50%; translate: 0 -50%; }
.gx-react.is-corner { top: 10px; left: 8px; width: 70px; }
.gx-react.is-bristle { animation: gxReact .6s cubic-bezier(.3,1.5,.5,1) both, shake .25s linear .6s 4; }
@keyframes gxReact { from { transform: translateY(60%) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* carta en grande dentro de la capa */
.gx-zoom {
  position: absolute; inset: 0; z-index: 8; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  background: rgba(243,236,220,.93); backdrop-filter: blur(4px); animation: popin .25s ease both;
}
.gx-reveal.is-dark .gx-zoom { background: rgba(12,11,20,.9); }
@media (max-width: 640px) { .gx-zoom { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }
.gx-sparks { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.gx-spark { position: absolute; left: 0; top: 0; font: 900 var(--fs, 22px)/1 var(--f-display); color: var(--sc, var(--gold-2)); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; animation: gxSpark var(--d, 1.1s) cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes gxSpark { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot, 120deg)); opacity: 0; } }
.gx-skip { position: absolute; top: 12px; right: 12px; z-index: 5; }
.gx-reveal.is-dark .btn--ghost { color: var(--paper); }

/* sobre (pack) */
.gx-pack {
  position: relative; z-index: 2; width: min(230px, 56vw); aspect-ratio: 5 / 7; cursor: pointer; border: 0; padding: 0; background: none;
  animation: floaty 2.6s ease-in-out infinite;
}
.gx-pack-body {
  position: absolute; inset: 0; border: var(--line-thick) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
  background: var(--white); display: grid; place-items: center; color: var(--ink);
}
.gx-pack-body::before { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 8px 8px; }
.gx-pack-body .gx-lines { opacity: .95; }
.gx-pack-body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 45%, transparent 55%); background-size: 250% 100%; animation: kcSweep 2.4s ease-in-out infinite; }
.gx-pack-seal { position: relative; z-index: 1; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--seal); border: 5px solid var(--white); box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px var(--ink); display: grid; place-items: center; font: 400 clamp(34px, 9vw, 54px)/1 var(--f-brush); color: var(--paper); }
.gx-pack-label { position: absolute; z-index: 1; bottom: 7%; left: 10%; right: 10%; padding: 7px 4px; border-radius: 10px; background: var(--ink); color: var(--paper); text-align: center; font: 800 11px/1.25 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.gx-pack-label b { color: var(--gold-2); font-size: 13px; }
.gx-pack-top { position: absolute; z-index: 2; left: -2px; right: -2px; top: -2px; height: 16%; border: var(--line-thick) solid var(--ink); border-radius: 16px 16px 4px 4px; background: var(--gold-2); background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(22,20,24,.25) 10px 12px); transition: transform .6s cubic-bezier(.2,.9,.3,1.2), opacity .6s; }
.gx-pack.is-torn { animation: none; }
.gx-pack.is-torn .gx-pack-top { transform: translate(40%, -180%) rotate(28deg); opacity: 0; }
.gx-pack.is-torn .gx-pack-body { animation: gxPackOut .7s .25s ease-in forwards; }
@keyframes gxPackOut { to { transform: translateY(120%) rotate(8deg); opacity: 0; } }

.gx-fan { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; min-height: 0; margin: 16px 0 18px; } /* arriba: NEW! no pisa el subtítulo */
.gx-fan .gx-slot { margin: 0 calc(var(--fw) * -0.06); transition: transform .45s cubic-bezier(.3,1.3,.5,1), z-index 0s; cursor: pointer; }
.gx-fan .gx-slot:nth-child(1) { transform: rotate(-11deg) translateY(14px); }
.gx-fan .gx-slot:nth-child(3) { transform: rotate(11deg) translateY(14px); }
.gx-fan .gx-slot.is-flipped { cursor: default; }
.gx-fan .gx-slot.is-focus { z-index: 5; transform: translateY(-10px) scale(1.12); }
.gx-fan .gx-slot:not(.is-flipped):hover { transform: translateY(-10px); }
/* «TAP» dentro del reverso (fuera tapaba el texto de abajo) */
.gx-fan .gx-slot:not(.is-flipped)::after { content: "TAP"; position: absolute; z-index: 3; left: 50%; bottom: 22%; translate: -50% 0; padding: 5px 10px; border-radius: 999px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); font: 800 11px/1 var(--f-display); letter-spacing: .2em; animation: pulse 1.4s ease-in-out infinite; }
.gx-fan .gx-new { width: clamp(42px, calc(var(--fw) * .3), 62px); height: clamp(42px, calc(var(--fw) * .3), 62px); font-size: clamp(11px, calc(var(--fw) * .068), 16px); border-width: 2.5px; top: -12px; left: -10px; }
@media (max-width: 720px) { .gx-fan .gx-slot { margin: 0 calc(var(--fw) * -0.3); } }
/* abanico abierto: en fila, sin taparse, y se tocan para verlas en grande */
.gx-fan.is-spread { gap: 14px; margin: 0; }
.gx-fan.is-spread .gx-slot, .gx-fan.is-spread .gx-slot:nth-child(n) { margin: 0; transform: none; cursor: zoom-in; z-index: auto; }
.gx-fan.is-spread .gx-slot:hover { transform: translateY(-8px); }
.gx-fan.is-spread .gx-kira { font-size: clamp(11px, calc(var(--fw) * .06), 16px); padding: 6px 12px; }
/* NEW! baja al dibujo, como en la carta suelta (arriba tapaba el número de carta) */
.gx-fan.is-spread .gx-new { top: 14%; left: -12px; }
/* móvil: 2 + 1, centradas (en una fila de tres no se leían) */
@media (max-width: 640px) {
  .gx-fan.is-spread { gap: 10px 8px; flex-wrap: wrap; max-width: calc(var(--fw) * 2 + 8px); }
  .gx-fan.is-spread .gx-new { left: -8px; }
  .gx-reveal:has(.gx-fan.is-spread) { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } /* «Album» no queda bajo Mikan */
}
/* móvil: la lista de premios justo debajo de la máquina; la máquina, algo más compacta
   para que el botón grande quede a la vista sin desplazarse */
@media (max-width: 860px) { #prizes-panel, #empty, #tray { order: -1; } }
@media (max-width: 560px) {
  .gx-head .lead { font-size: 15.5px; line-height: 1.45; }
  .gx .gm { max-width: 272px; }
  .gx-spin { min-height: 60px; font-size: 20px; }
}

/* hueco de la máquina y del botón mientras gacha.js no los pinta: sin él, la página saltaba 330 px al cargar (CLS 0,57 en móvil) */
#stage:empty::before { content: ""; display: block; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
@media (max-width: 560px) { #stage:empty::before { max-width: 272px; } }
#stage-cta:empty { min-height: 60px; }