/* Full-screen layout and control clean-up (review 2026-09-26: "the screen must be 100% of the phone",
   "the top buttons are not our games' buttons", "BUY BONUS on phone should sit up top", "×2 above the Chompers").
   Loaded just before control-hit-targets.css (which must stay last); rules use an html body prefix to win. */

/* 1. A blurred continuation of the current scene still fills any letterbox: the bands above/below the 9:16
      cabinet on tall phones and the side bars on wide desktops. --scene-backdrop is set by background-video.mjs. */
body{isolation:isolate}
body::before{content:"";position:fixed;inset:-48px;z-index:-1;pointer-events:none;
  background:#07030c var(--scene-backdrop,none) center top/cover no-repeat;filter:blur(12px) brightness(.8) saturate(1.05)}

/* 2. The CSS round buttons at the top are retired: the painted controls already do these jobs, in the art's own
      button style. Desktop: the painted gear opens Settings. Phone: the painted ≡ opens Settings (which links
      HOW TO PLAY · PAYTABLE) and the painted speaker mutes. */
html body .cabinet[data-video-ready="true"]>footer .top-round-button{display:none!important}
/* Keep the painted speaker as the only surface. Its transparent hit target
   must have opacity 1 so the red mute strike can actually be seen. */
html body .cabinet[data-video-ready="true"]>footer #sound-toggle{opacity:1;background-color:transparent}
@media (max-width:900px) and (orientation:portrait){
  html body .cabinet[data-video-ready="true"] .controls>.bonus-demo{
    padding:0;border:0;box-shadow:none;
    background:url('../../assets/ui/buy-bonus-button-v1.webp') center/contain no-repeat!important;
    color:transparent!important;font-size:0!important;-webkit-tap-highlight-color:transparent;
  }
  html body .cabinet[data-video-ready="true"] .controls>.how-to-button{display:none!important}
  html body .cabinet[data-video-ready="true"]>footer #settings-button{
    display:block!important;position:absolute;left:10.4%;top:91.25%;width:10.6%;height:auto;aspect-ratio:1;
    padding:0;border:0;border-radius:12px;opacity:0;pointer-events:auto;font-size:0;color:transparent;background:transparent;cursor:pointer
  }
}

/* 2b. Phone SPIN is never cut (2026-09-29, Barak: "the SPIN button is a little cut on the phone"). The movie ends
       through the lower third of the painted SPIN ring, so a 56-row strip (of 1080) continues the panel below it with
       the ring completed from the art's own upper half (assets/video-backgrounds/phone-bottom-ext-v1.webp). The
       cabinet is lifted by that strip, and on screens without spare height it scales down just enough to fit both. */
.phone-bottom-ext{display:none}
@media (max-width:900px) and (orientation:portrait){
  :root{--cab-w:min(100vw,calc(100dvh * 1080 / 1976));--cab-h:calc(var(--cab-w) * 16 / 9);--ext-h:calc(var(--cab-w) * 56 / 1080)}
  html body .cabinet[data-video-ready="true"]{width:var(--cab-w);height:var(--cab-h);top:calc((100dvh - var(--cab-h) - var(--ext-h)) / 2);translate:-50% 0}
  html body:has(.cabinet[data-video-ready="true"][data-video-scene="base"]) .phone-bottom-ext{display:block;position:fixed;z-index:1;left:50%;translate:-50% 0;
    width:var(--cab-w);height:calc(var(--ext-h) + 2px);top:calc((100dvh - var(--cab-h) - var(--ext-h)) / 2 + var(--cab-h) - 2px);pointer-events:none;
    background:url('../../assets/video-backgrounds/phone-bottom-ext-v1.webp') 0 0/100% 100% no-repeat}
}

/* 2c. Free Spins on every portrait phone (2026-09-29, Barak: "the ×3 should be in a better place, and its number
       centred in the frame"). Over the logo the sign hid CARNIVAL CHOMP and its LINE WINS ribbon collided with the
       lettering. Now: the Free Spins bar top-left carries the ×N as a large chip (a separate sign there was half hidden by the
       curtain valance), and the greyed BUY BONUS is hidden while free spins run. Desktop keeps the painted sign. */
@media (max-width:900px) and (orientation:portrait){
  html body .free-spins-hud{left:3vw;top:max(6px,env(safe-area-inset-top));transform:none;max-width:56vw;font-size:clamp(9px,2.8vw,12px)!important;padding:.35em .8em}
  html body .free-spins-hud{display:flex;align-items:center;gap:.6em}
  /* The phone shows the multiplier in the Free Spins bar only: a big ×N chip, digits centred in its frame. */
  html body .reel-stage>.fs-medallion{display:none!important}
  html body .free-spins-hud .fs-multiplier{--digit:clamp(20px,6.2vw,28px);align-items:center;justify-content:center;padding:.22em .5em;flex:none}
  html body:has(.free-spins-hud:not([hidden])) .cabinet .controls>.bonus-demo{visibility:hidden}
}

/* 3. Tall phones (taller than 9:16): the cabinet sits on the bottom edge so SPIN is under the thumb, and the
      free band at the top carries BUY BONUS, the Free Spins bar and the Free Spins multiplier sign. The cabinet
      drops its centring translate so these fixed items are placed against the screen, not clipped by it. */
@media (max-width:900px) and (orientation:portrait) and (max-aspect-ratio:9/17){
  :root{--top-band:calc(100dvh - 100vw * 16 / 9 - var(--ext-h))}
  /* The painted continuation of the scene above the cabinet (no blurred band): bottom-aligned so its lower
     edge meets the movie's top edge; the cabinet is painted after it and covers the seam row. */
  /* The extension images carry 24 rows (of 1080) below the seam, so the seam lands exactly on the cabinet top. */
  :root{--ext-overlap:calc(100vw * 24 / 1080)}
  html body::before{inset:0 0 auto 0;height:calc(var(--top-band) + var(--ext-overlap));z-index:0;filter:none;
    background:#07030c var(--scene-extension,var(--scene-backdrop,none)) center bottom/100% auto no-repeat}
  /* A painted theatre valance (Artlist, keyed) sits across the seam: the gold bulb rail just above the cabinet
     edge, the red swags hanging over the movie's top rows, so the painted extension and the movie read as one
     stage instead of meeting at a line. */
  html body::after{content:"";position:fixed;left:0;right:0;top:calc(var(--top-band) - 100vw * 89 / 1400 * .38);height:calc(100vw * 89 / 1400);
    z-index:3;pointer-events:none;background:url('../../assets/ui/top-valance-v1.webp') center/100% 100% no-repeat;filter:drop-shadow(0 3px 4px #000a)}
  html body .cabinet[data-video-ready="true"]{left:0;top:auto;bottom:var(--ext-h);translate:none}
  html body:has(.cabinet[data-video-ready="true"][data-video-scene="base"]) .phone-bottom-ext{top:auto;bottom:0}
  /* BUY BONUS: the Artlist-painted marquee button, centred above the Chompers, gently alive. */
  html body .cabinet[data-video-ready="true"] .controls>.bonus-demo{
    position:fixed;top:max(6px,calc(env(safe-area-inset-top) + 2px));right:auto;
    --buy-w:min(52vw,calc((var(--top-band) - 12px) * 1.915));width:var(--buy-w);left:calc(50vw - var(--buy-w) / 2);
    height:auto;aspect-ratio:720/376;min-width:0;min-height:0;padding:0;
    border:0!important;border-radius:0!important;box-shadow:none!important;
    background:url('../../assets/ui/buy-bonus-button-v1.webp') center/100% 100% no-repeat!important;
    color:transparent!important;font-size:0!important;overflow:visible;
    filter:drop-shadow(0 4px 8px #000a);animation:buy-bonus-breathe 2.4s ease-in-out infinite
  }
  html body .cabinet[data-video-ready="true"] .controls>.bonus-demo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,#fff6c8cc 48%,#ffffff 50%,#fff6c8cc 52%,transparent 65%) -150% 0/60% 100% no-repeat;
    -webkit-mask:url('../../assets/ui/buy-bonus-button-v1.webp') center/100% 100% no-repeat;mask:url('../../assets/ui/buy-bonus-button-v1.webp') center/100% 100% no-repeat;
    mix-blend-mode:screen;animation:buy-bonus-shine 3.2s ease-in-out infinite
  }
  html body .cabinet[data-video-ready="true"] .controls>.bonus-demo:disabled{animation:none;filter:drop-shadow(0 4px 8px #000a);background-color:transparent!important}
  html body .cabinet[data-video-ready="true"] .controls>.bonus-demo:disabled::after{animation:none;opacity:0}
  html body:has(.free-spins-hud:not([hidden])) .cabinet .controls>.bonus-demo{visibility:hidden}
  html body .free-spins-hud{left:3vw;top:max(6px,env(safe-area-inset-top));transform:none;max-width:56vw;font-size:clamp(9px,2.8vw,12px)!important;padding:.35em .8em}
}
@keyframes buy-bonus-breathe{0%,100%{scale:1;filter:drop-shadow(0 4px 8px #000a) brightness(1)}50%{scale:1.045;filter:drop-shadow(0 4px 10px #000a) drop-shadow(0 0 14px #ffcf4a99) brightness(1.12)}}
@keyframes buy-bonus-shine{0%,55%{background-position:-150% 0}85%,100%{background-position:250% 0}}
@media (prefers-reduced-motion:reduce){html body .cabinet .controls>.bonus-demo,html body .cabinet .controls>.bonus-demo::after{animation:none!important}}

/* 4. Touch clean-up (Barak's phone video 2026-09-26): a long press on SPIN selected its hidden label text,
      showing blue selection handles and Android's Copy / Select all / Google search bar. Nothing in the game
      is selectable text, and a tap never leaves a focus frame on touch screens (keyboard focus is unchanged). */
html body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html body :is(input,textarea){-webkit-user-select:text;user-select:text}
@media (hover:none){
  html body .cabinet :is(button,label,output):focus,
  html body .cabinet :is(button,label,output):focus-visible{outline:none!important;box-shadow:none}
}
/* 5. The status line never spills out of its painted frame: one line, shrunk to fit by fit-text.mjs. */
html body .cabinet .lower-screen>.status{white-space:nowrap;overflow:hidden;text-overflow:clip}
/* Phone: the painted plaque's clear field ends where its scroll ornaments begin, ~11% in from each side of the
   status box (measured at 360-412 px wide). Text stays inside that field; bindFitText shrinks it to fit. */
@media(max-width:900px) and (orientation:portrait){html body .cabinet[data-video-ready="true"] .lower-screen>.status{box-sizing:border-box;padding-inline:11.5%}}
/* AUTO pressed during a spin: lit at once, opens when the round ends. */
html body .cabinet[data-video-ready="true"] .controls>.auto-button[data-pending="true"]{opacity:1;box-shadow:0 0 0 3px #ffe58a,0 0 14px 3px #ffd24a99!important;animation:auto-pending .8s ease-in-out infinite alternate}
@keyframes auto-pending{to{box-shadow:0 0 0 3px #fff4c2,0 0 22px 6px #ffd24acc}}
/* Near-16:9 portrait screens fill the width. Only the decorative top curtain
   is cropped (under 3% of source); the completed SPIN ring stays at the bottom. */
@media(max-width:900px) and (orientation:portrait) and (min-aspect-ratio:9/17) and (max-aspect-ratio:4/7){
 html body{--cab-w:100vw;--cab-h:calc(var(--cab-w) * 16 / 9);--ext-h:calc(var(--cab-w) * 56 / 1080)}
 html body .cabinet[data-video-ready="true"]{width:var(--cab-w);height:var(--cab-h);top:auto;bottom:var(--ext-h);translate:-50% 0}
 html body .cabinet[data-video-ready="true"][data-video-scene="feature"]{bottom:0}
 html body:has(.cabinet[data-video-ready="true"][data-video-scene="base"]) .phone-bottom-ext{top:auto;bottom:0}
}
/* Hold & Spin already includes its painted floor. It needs no base-game
   bottom extension; anchor that complete scene to the phone's bottom edge. */
@media(max-width:900px) and (orientation:portrait){
 html body:has(.cabinet[data-video-scene="feature"]){--ext-h:0px;--top-band:calc(100dvh - var(--cab-h))}
 html body .cabinet[data-video-ready="true"][data-video-scene="feature"]{top:auto;bottom:0}
}