/* =============================================================================
   Play Lotteria
   Mobile-first. The card is the product: everything else gets out of its way.
   ============================================================================= */

:root {
  --ink:        #140309;
  --ink-2:      #24070F;
  --burgundy:   #4E0C1E;
  --burgundy-2: #6E1229;
  --gold:       #E8B457;
  --gold-hi:    #F8D68C;
  --cream:      #F7ECD8;
  --bone:       #FBF4E6;
  --rosa:       #E5457F;
  --jade:       #17A08C;
  --chili:      #DC3A2F;

  --dock-h: 96px;
  --r-lg: 20px;
  --ease-out: cubic-bezier(.16,.84,.34,1);
  --ease-spring: cubic-bezier(.2,1.5,.4,1);

  --tilt-x: 0deg; --tilt-y: 0deg; --tilt-shift: 0px;
}

* { box-sizing: border-box; }

/* Every panel in this app sets an explicit `display`, which outranks the UA's
   `[hidden] { display: none }` — without this, hiding a sheet does nothing and all three
   slide up together. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Bitter', Georgia, serif;
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; cursor: pointer; }

:where(button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ============================ ATMOSPHERE ============================ */
/* Four planes at different depths. This is what stops the card reading as a flat
   sticker on a flat background when the phone moves. */

.atmos { position: fixed; inset: -44px; z-index: 0; pointer-events: none; }
.atmos-layer { position: absolute; inset: 0; will-change: transform; }

.atmos-vignette {
  background:
    radial-gradient(120% 80% at 50% 8%, #6E1229 0%, #3A0714 38%, #140309 78%),
    var(--ink);
}

.atmos-rays {
  background: conic-gradient(from 180deg at 50% 12%,
    transparent 0deg, rgba(232,180,87,.10) 12deg, transparent 26deg,
    transparent 40deg, rgba(232,180,87,.07) 52deg, transparent 66deg,
    transparent 294deg, rgba(232,180,87,.07) 308deg, transparent 322deg,
    transparent 334deg, rgba(232,180,87,.10) 348deg, transparent 360deg);
  mask-image: radial-gradient(70% 60% at 50% 10%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 10%, #000 0%, transparent 75%);
}

/* Papel picado — cut-paper banners strung across the top of the room. */
.atmos-picado {
  background-repeat: repeat-x;
  background-position: 0 46px;
  background-size: 132px 84px;
  opacity: .32;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='132' height='84' viewBox='0 0 132 84'>\
<path d='M0 6 Q33 20 66 6 T132 6' stroke='%23E8B457' stroke-opacity='.5' stroke-width='1.6' fill='none'/>\
<g fill='%23E8B457' fill-opacity='.30'>\
<path d='M8 10h36l-4 34-14 12-14-12z'/><path d='M74 10h36l-4 34-14 12-14-12z'/>\
</g>\
<g fill='%23140309' fill-opacity='.9'>\
<circle cx='26' cy='24' r='5'/><circle cx='18' cy='36' r='3'/><circle cx='34' cy='36' r='3'/>\
<circle cx='92' cy='24' r='5'/><circle cx='84' cy='36' r='3'/><circle cx='100' cy='36' r='3'/>\
</g></svg>");
  animation: sway 9s ease-in-out infinite;
}
@keyframes sway { 0%,100% { background-position-x: 0; } 50% { background-position-x: 14px; } }

.atmos-motes {
  background-image:
    radial-gradient(2px 2px at 12% 28%, rgba(248,214,140,.55), transparent 60%),
    radial-gradient(2px 2px at 78% 18%, rgba(248,214,140,.40), transparent 60%),
    radial-gradient(3px 3px at 34% 68%, rgba(229,69,127,.35), transparent 60%),
    radial-gradient(2px 2px at 88% 62%, rgba(248,214,140,.35), transparent 60%),
    radial-gradient(2px 2px at 58% 88%, rgba(23,160,140,.30), transparent 60%),
    radial-gradient(2px 2px at 22% 84%, rgba(248,214,140,.30), transparent 60%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-16px); } }

.atmos-grain {
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============================ SCREENS ============================ */

.screen {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: none;
  flex-direction: column;
}
body.state-ready .screen-ready,
body.state-game .screen-game,
body.state-win  .screen-game { display: flex; }
body.state-win  .screen-win  { display: flex; }

/* ---- ready ---- */
.screen-ready { align-items: center; justify-content: center; padding: 24px; text-align: center; }
.ready-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; }

.brand-mark {
  width: 108px; height: 108px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
  animation: bob 4.5s ease-in-out infinite;
}
.brand-mark svg, .win-skull svg { width: 100%; height: 100%; display: block; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }

.brand-title { margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.brand-kicker {
  font-family: 'Bitter', serif; font-weight: 700;
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase;
  color: rgba(232,180,87,.82);
}
.brand-word {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: min(13.5vw, 62px);
  line-height: .94;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 #8A1226, 0 4px 0 #5A0C1A, 0 12px 26px rgba(0,0,0,.7);
  letter-spacing: -.012em;
}
.brand-sub { margin: 0; font-size: 16px; color: rgba(247,236,216,.72); }

.btn-start {
  position: relative;
  margin-top: 12px;
  border: 0;
  padding: 18px 42px;
  min-height: 60px;
  border-radius: 999px;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 21px;
  color: #2A0509;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #C9922F);
  box-shadow: 0 6px 0 #7A5312, 0 16px 34px rgba(0,0,0,.55);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  overflow: hidden;
}
.btn-start:active { transform: translateY(4px); box-shadow: 0 2px 0 #7A5312, 0 8px 18px rgba(0,0,0,.5); }
.btn-start-sm { padding: 15px 34px; font-size: 18px; min-height: 54px; }
.btn-start-label { position: relative; z-index: 1; }
.btn-start-glow {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep { 0%,62% { transform: translateX(-120%); } 88%,100% { transform: translateX(130%); } }

.ready-links { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.link-ghost {
  background: none; border: 0; padding: 10px 6px;
  color: rgba(247,236,216,.68);
  font-size: 15px; text-decoration: underline; text-underline-offset: 4px;
}
.link-ghost:hover { color: var(--gold-hi); }
.link-sep { color: rgba(247,236,216,.35); }

/* ---- game chrome ---- */
.screen-game {
  padding:
    max(10px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-left))
    max(10px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-right));
  gap: 8px;
}

.topbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.icon-btn {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(232,180,87,.26);
  background: rgba(255,255,255,.05);
  transition: background .15s, transform .12s;
}
.icon-btn:active { transform: scale(.94); background: rgba(232,180,87,.18); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#btnHome svg, #btnGallery svg { fill: var(--gold); stroke: none; }

.topbar-count { flex: 1 1 auto; text-align: center; }
.count-now { font-family: 'Alfa Slab One', serif; font-size: 22px; color: var(--gold-hi); }
.count-of  { font-size: 14px; color: rgba(247,236,216,.5); }
.count-rail {
  height: 4px; margin-top: 5px; border-radius: 99px;
  background: rgba(255,255,255,.10); overflow: hidden;
}
.count-fill {
  height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--rosa), var(--gold));
  transition: transform .5s var(--ease-out);
}

/* ---- stage ---- */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.stage-pulse {
  position: absolute; inset: 4% 6%;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(229,69,127,.32), rgba(229,69,127,0) 72%);
  opacity: .35;
  pointer-events: none;
}
.stage-pulse.beat  { animation: beat .42s var(--ease-out); }
.stage-pulse.flash { animation: flash .7s var(--ease-out); }
@keyframes beat  { 0% { transform: scale(.94); opacity: .55; } 100% { transform: scale(1.04); opacity: .3; } }
@keyframes flash { 0% { opacity: .95; transform: scale(1.06); } 100% { opacity: .35; transform: scale(1); } }

/* The undealt deck, sitting behind the card it feeds. */
.stage-deck { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.deck-back {
  position: absolute;
  height: min(100%, calc((100vw - 20px) * 1.5), 660px); aspect-ratio: 1 / 1.5;
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, #5A0F22 0 8px, #45091A 8px 16px);
  border: 2px solid rgba(232,180,87,.34);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
/* Scaled under the live card and fanned, so the undealt deck peeks out behind it. */
.deck-back-1 { transform: translate(13px, 15px) rotate(5deg) scale(.93); opacity: .6; }
.deck-back-2 { transform: translate(-13px, 22px) rotate(-4.5deg) scale(.9); opacity: .4; }
.deck-back-3 { transform: translate(3px, 30px) rotate(8.5deg) scale(.87); opacity: .24; }

.card-tilt {
  position: relative;
  height: 100%;
  display: grid; place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .5s var(--ease-out);
}
.card-slot { position: relative; height: 100%; display: grid; place-items: center; }

/* ============================ THE CARD ============================ */

/* Sized by BOTH axes. `max-width` alone cannot do this: it clamps the width while
   height:100% holds, which breaks the ratio and pushes the card off-screen. Deriving the
   height from the width the stage can actually spare keeps the card whole on every phone. */
.card {
  position: relative;
  height: min(100%, calc((100vw - 20px) * 1.5), 660px);
  aspect-ratio: 1 / 1.5;
  border-radius: 16px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.62)) drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.card-paper {
  position: absolute; inset: 0;
  border-radius: 16px;
  padding: 7px;
  background:
    linear-gradient(150deg, #FDF8EC 0%, #F3E6CC 46%, #E9D8B8 100%);
  border: 2px solid #C39B4E;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  overflow: hidden;
}
/* aged print texture */
.card-paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter>\
<rect width='120' height='120' filter='url(%23p)'/></svg>");
}

.card-rule {
  position: absolute; inset: 7px;
  border: 2.5px solid #1B0E14;
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.card-well {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--well);
  display: grid; place-items: center;
  overflow: hidden;
}
/* a soft radiance so the flat ground has a centre */
.card-well::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(76% 68% at 50% 40%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 52%, rgba(0,0,0,.20) 100%);
}

.card-art {
  position: relative;
  width: 94%; height: 94%;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.28));
}

.card-flourish {
  position: absolute; bottom: 3.5%;
  width: 15%; height: auto;
  opacity: .22;
  pointer-events: none;
}
.card-flourish-l { left: 2.5%; transform: rotate(-16deg); }
.card-flourish-r { right: 2.5%; transform: rotate(16deg); }
.card-mini .card-flourish { width: 20%; opacity: .18; }

/* A painted plate is the whole well: no letterboxing, no vector ground showing through,
   and no soft-light wash over it — the chromolitho colour is the point. */
.card-plate {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.card-painted .card-well::before {
  background: radial-gradient(88% 78% at 50% 38%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.22) 100%);
}

.card-num {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  min-width: 30px; height: 30px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #1B0E14;
  border: 2px solid var(--gold);
  color: var(--gold-hi);
  font-family: 'Alfa Slab One', serif;
  font-size: 14px; line-height: 1;
}

.card-name {
  flex: 0 0 auto;
  padding: 9px 10px;
  background: linear-gradient(180deg, #FBF3E2, #EFE0C2);
  border-top: 2.5px solid #1B0E14;
  text-align: center;
}
.card-name span {
  display: block;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: clamp(17px, 5.4vw, 30px);
  line-height: 1.06;
  color: #24070F;
  letter-spacing: -.005em;
}

/* the glass highlight that sells the 3D tilt */
.card-sheen {
  position: absolute; inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 26%,
    rgba(255,255,255,0) 48%, rgba(0,0,0,.16) 100%);
  transform: translateX(var(--tilt-shift));
  transition: transform .5s var(--ease-out);
  mix-blend-mode: soft-light;
}

.card-shadow {
  position: absolute; bottom: 2%; left: 12%; right: 12%; height: 26px;
  background: radial-gradient(closest-side, rgba(0,0,0,.66), transparent 76%);
  filter: blur(7px);
  transform: translateZ(-40px);
}

/* ---- card motion: dealt from the deck, flipped, settled ---- */
.card-enter { animation: none; opacity: 0; transform: translateY(26px) rotateY(-88deg) scale(.86); }
.card-slot > .card:not(.card-enter):not(.card-exit) { animation: deal .58s var(--ease-spring) both; }
@keyframes deal {
  0%   { opacity: 0; transform: translateY(26px) rotateY(-88deg) scale(.86); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
.card-exit { position: absolute; inset: 0; margin: auto; animation: toss .44s var(--ease-out) both; pointer-events: none; }
@keyframes toss {
  to { opacity: 0; transform: translate(-16%, -12%) rotate(-13deg) scale(.82); }
}
.card-say { animation: sayPop .5s var(--ease-spring); }
@keyframes sayPop { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }

.card-mini {
  height: auto; width: 100%;
  aspect-ratio: 1 / 1.5;
  max-width: none;
  border-radius: 10px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.card-mini .card-paper { border-radius: 10px; padding: 4px; }
.card-mini .card-rule { inset: 4px; border-width: 2px; border-radius: 6px; }
.card-mini .card-num { min-width: 20px; height: 20px; font-size: 10px; top: 4px; left: 4px; border-width: 1.5px; }
.card-mini .card-name { padding: 4px 3px; border-top-width: 2px; }
.card-mini .card-name span { font-size: 10.5px; }
.card-mini .card-sheen { border-radius: 10px; }

/* ---- status + dock ---- */
.stage-status {
  flex: 0 0 auto;
  margin: 2px 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247,236,216,.46);
  min-height: 18px;
}
body.is-paused .stage-status { color: var(--gold-hi); }

.dock { flex: 0 0 auto; padding-top: 6px; }
.dock-row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }

.ctrl {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 58px; padding: 9px 4px;
  border-radius: 16px;
  border: 1px solid rgba(232,180,87,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  transition: transform .12s var(--ease-out), background .15s, border-color .15s;
}
.ctrl:active { transform: translateY(2px) scale(.97); background: rgba(232,180,87,.16); }
.ctrl svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btnNext svg { fill: var(--gold); stroke: none; }
.ctrl-label { font-size: 11px; letter-spacing: .03em; color: rgba(247,236,216,.74); white-space: nowrap; }

.ctrl-primary {
  flex: 1.25 1 0;
  border-color: rgba(232,180,87,.5);
  background: linear-gradient(180deg, rgba(232,180,87,.26), rgba(232,180,87,.10));
}
.ctrl-primary svg { fill: var(--gold-hi); stroke: none; }
.ctrl-primary .ico-play { display: none; }
.ctrl-primary.is-paused .ico-play { display: block; }
.ctrl-primary.is-paused .ico-pause { display: none; }
.ctrl-primary.is-paused { background: linear-gradient(180deg, rgba(23,160,140,.36), rgba(23,160,140,.14)); border-color: rgba(23,160,140,.6); }
.ctrl-primary.is-paused svg { fill: #7FE6D2; }

/* the one round speed button */
.ctrl-speed {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 34% 28%, #7E1730, #40091A 74%);
  box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s var(--ease-out), box-shadow .12s;
}
.ctrl-speed:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.45), 0 5px 12px rgba(0,0,0,.45); }
.speed-num { font-family: 'Alfa Slab One', serif; font-size: 20px; color: var(--gold-hi); line-height: 1; }
.ctrl-speed.bump { animation: bump .42s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

.btn-loteria {
  width: 100%; margin-top: 8px;
  min-height: 50px;
  border: 0; border-radius: 14px;
  font-family: 'Alfa Slab One', serif; font-size: 18px;
  color: #FFF3DA;
  background: linear-gradient(180deg, #E5457F, #B32659);
  box-shadow: 0 4px 0 #7C1A3E, 0 12px 24px rgba(0,0,0,.42);
  transition: transform .12s var(--ease-out), box-shadow .12s;
}
.btn-loteria:active { transform: translateY(3px); box-shadow: 0 1px 0 #7C1A3E, 0 6px 14px rgba(0,0,0,.4); }

/* ============================ WIN ============================ */
.screen-win {
  position: fixed; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(90% 70% at 50% 30%, rgba(110,18,41,.96), rgba(20,3,9,.98));
  backdrop-filter: blur(3px);
}
body.state-win .screen-win { display: flex; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.win-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.win-skull { width: 96px; height: 96px; animation: bob 3.4s ease-in-out infinite; }
.win-title {
  margin: 0;
  font-family: 'Alfa Slab One', serif;
  font-size: clamp(44px, 15vw, 74px); line-height: .94;
  color: var(--gold-hi);
  text-shadow: 0 3px 0 #8A1226, 0 6px 0 #5A0C1A, 0 16px 30px rgba(0,0,0,.7);
  animation: pop .7s var(--ease-spring) both;
}
@keyframes pop { 0% { transform: scale(.5) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.win-sub { margin: 0; color: rgba(247,236,216,.76); font-size: 16px; }

/* ============================ SHEETS ============================ */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10,2,6,.68);
  opacity: 0; transition: opacity .26s var(--ease-out);
}
body.sheet-open .sheet-scrim { opacity: 1; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: 86dvh;
  display: flex; flex-direction: column;
  border-radius: 22px 22px 0 0;
  border-top: 2px solid rgba(232,180,87,.4);
  background: linear-gradient(180deg, #2C0812, #170410);
  box-shadow: 0 -18px 50px rgba(0,0,0,.7);
  transform: translateY(102%);
  transition: transform .3s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
body.sheet-open .sheet { transform: translateY(0); }

.sheet-grip { width: 44px; height: 4px; border-radius: 99px; background: rgba(232,180,87,.4); margin: 9px auto 2px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; }
.sheet-head h2 { margin: 0; font-family: 'Alfa Slab One', serif; font-size: 19px; color: var(--gold-hi); }
.sheet-close {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(232,180,87,.3); background: rgba(255,255,255,.05);
  color: var(--gold-hi); font-size: 24px; line-height: 1;
}
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 18px; }

.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.empty { color: rgba(247,236,216,.6); text-align: center; padding: 28px 0; grid-column: 1 / -1; }

.install-body { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.qr-card { background: var(--bone); padding: 14px 14px 10px; border-radius: 16px; border: 2px solid var(--gold); }
.qr-holder { width: 176px; height: 176px; }
.qr-holder svg { width: 100%; height: 100%; display: block; }
.qr-url { margin: 8px 0 0; text-align: center; font-size: 12px; color: #4E0C1E; word-break: break-all; }
.btn-install {
  border: 0; border-radius: 999px; padding: 14px 28px; min-height: 50px;
  font-family: 'Alfa Slab One', serif; font-size: 16px; color: #2A0509;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 4px 0 #7A5312;
}
.install-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; font-size: 15px; color: rgba(247,236,216,.84); line-height: 1.45; max-width: 400px; }
.install-steps b { color: var(--gold-hi); }
.ios-share { color: var(--gold-hi); }

/* ============================ ADS ============================ */
/* Reserved, collapsed, and never inside the stage. Turning them on cannot reflow play. */
.ad-slot {
  flex: 0 0 auto;
  display: grid; place-items: center;
  align-self: center;
  width: 100%; max-width: 336px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(232,180,87,.22);
  color: rgba(247,236,216,.3); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.ad-slot::after { content: 'Publicidad'; }
.ad-banner { min-height: 50px; margin: 2px auto; }
.ad-rect { min-height: 250px; max-width: 300px; margin: 6px auto; }

/* ============================ TOAST ============================ */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 108px);
  transform: translateX(-50%); z-index: 60;
  max-width: min(90vw, 380px);
  padding: 12px 16px; border-radius: 12px;
  background: rgba(24,5,12,.96); border: 1px solid rgba(232,180,87,.34);
  font-size: 14px; color: var(--cream);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  animation: rise .3s var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ============================ RESPONSIVE ============================ */

/* Short phones: reclaim height from the chrome so the card never shrinks first. */
@media (max-height: 700px) {
  .ctrl { min-height: 52px; padding: 7px 4px; }
  .ctrl-speed { width: 50px; height: 50px; }
  .speed-num { font-size: 18px; }
  .btn-loteria { min-height: 44px; font-size: 16px; margin-top: 6px; }
  .icon-btn { width: 42px; height: 42px; }
}
@media (max-width: 359px) {
  .ctrl-label { font-size: 10px; }
  .ctrl { gap: 2px; }
}

/* Landscape and desktop: card left, controls right — no scrolling, no letterboxed card. */
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
  .screen-game { display: grid; grid-template-columns: 1fr minmax(280px, 360px); grid-template-rows: auto 1fr auto; gap: 12px 28px; padding: 20px 28px; align-content: stretch; }
  body.state-game .screen-game, body.state-win .screen-game { display: grid; }
  .topbar { grid-column: 2; grid-row: 1; }
  .stage { grid-column: 1; grid-row: 1 / 4; }
  .stage-status { grid-column: 2; grid-row: 2; align-self: end; }
  .dock { grid-column: 2; grid-row: 3; align-self: end; padding-bottom: 10px; }
  .ad-slot.ad-banner#adTop { grid-column: 2; grid-row: 2; align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .card-tilt { transform: none !important; }
}