/* Painted-control hit targets for the video cabinet. Loaded last, so older sheets (auto-play.css,
   reels.css) cannot move a target off its painted button again. Positions are percentages of the
   normalized cabinet, measured on the current movies (base v3 / bonus v2 desktop, base v1 phone). */
.turbo-toggle{display:none}

@media (min-width:901px),(orientation:landscape){
  .cabinet[data-video-ready="true"] .controls>.bonus-demo{left:2%;right:auto;top:84.6%;width:11.4%;height:12.2%;aspect-ratio:auto;border-radius:999px}
  .cabinet[data-video-ready="true"] .controls>.auto-button{left:82%;right:auto;top:86%;width:10.2%;height:8%;aspect-ratio:auto;min-width:0;min-height:0;border-radius:999px}
}

@media (max-width:900px) and (orientation:portrait){
  /* ⟳ is AUTO, ⚡ is TURBO; ☰ (how-to) and 🔊 (sound) keep their existing targets. */
  .cabinet[data-video-ready="true"] .controls>.auto-button{left:auto;right:10.4%;top:91.25%;width:10.6%;height:auto;aspect-ratio:1;opacity:0}
  .cabinet[data-video-ready="true"] .controls>.turbo-toggle{
    display:block;position:absolute;z-index:16;left:65.9%;top:92.58%;width:9.16%;height:4.48%;padding:0;
    border:0;border-radius:22%;background:transparent;color:transparent;font-size:0;cursor:pointer;pointer-events:auto;
    -webkit-tap-highlight-color:transparent;outline:none;min-width:0;min-height:0
  }
  /* The box matches the painted button so its lit state sits on the art; ::after keeps a 44 px touch area. */
  .cabinet[data-video-ready="true"] .controls>.turbo-toggle::after{content:"";position:absolute;inset:-5px}
  /* TURBO on (2026-09-29, Barak: "a frame stays around the lightning"): no code frame; the painted button itself
     lights up — a warm screen-blend glow sized exactly to the painted ⚡ button (measured at 390x844). */
  .cabinet[data-video-ready="true"] .controls>.turbo-toggle[aria-pressed="true"]{background:radial-gradient(circle at 50% 48%,#ffd75acc 0,#ffb42e66 45%,#ff9a1a22 75%,transparent 100%);mix-blend-mode:screen;box-shadow:0 0 12px 1px #ffc53a99}
  .cabinet[data-video-ready="true"] .controls>.turbo-toggle:focus:not(:focus-visible){outline:none}
  .cabinet[data-video-ready="true"] .controls>.turbo-toggle:focus-visible{outline:2px solid #fff1b3;outline-offset:2px}
  .cabinet[data-video-ready="true"][data-video-scene="feature"] .controls>.turbo-toggle{display:none}
}

/* Sound control inside the modal Cup and Cannon windows (bonus review D10). */
.dialog-sound-toggle{
  position:absolute;z-index:40;right:6px;top:6px;width:36px;height:36px;padding:0;border-radius:50%;
  border:2px solid #ffd36b;background:radial-gradient(circle at 50% 35%,#5a1420,#24060e);color:#fff3a4;
  font-size:16px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #000a
}
.dialog-sound-toggle[aria-pressed="false"]{border-color:#ff6a5a}
.dialog-sound-toggle:focus-visible{outline:2px solid #fff1b3;outline-offset:2px}

/* Auto Play must look active while it runs (the status line is overwritten each spin): the painted AUTO
   control glows and a tag shows how to stop it and how many spins are left. */
.cabinet[data-video-ready="true"] .controls>.auto-button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 3px #ffe58a,0 0 16px 4px #ffd24acc!important;border-radius:999px}
.cabinet[data-video-ready="true"] .controls>.auto-button[aria-pressed="true"]::after{
  content:"STOP · " attr(data-remaining);position:absolute;left:50%;bottom:calc(100% + 4px);translate:-50% 0;white-space:nowrap;
  padding:.2em .6em;border-radius:.7em;font:900 clamp(9px,1.5dvh,14px)/1 CarnivalCoin,Georgia,serif;color:#3a0906;background:#ffe58a;
  box-shadow:0 0 0 1px #7a3a06,0 0 10px #ffd24a;pointer-events:none
}
@media (max-width:900px) and (orientation:portrait){
  /* Phone AUTO running (2026-09-29, Barak: "the ring and tag do not sit well; just a bold mark like the lightning"):
     the target matches the painted ⟳ button (measured beside ⚡ at 390x844) and the button itself lights up; no frame, no tag. */
  .cabinet[data-video-ready="true"] .controls>.auto-button{left:78%;right:auto;top:92.58%;width:9.16%;height:4.48%;aspect-ratio:auto;min-width:0;min-height:0;
    border:0!important;border-radius:22%!important;-webkit-tap-highlight-color:transparent;outline:none}
  .cabinet[data-video-ready="true"] .controls>.auto-button::before{content:"";position:absolute;inset:-5px}
  .cabinet[data-video-ready="true"] .controls>.auto-button[aria-pressed="true"]{opacity:1;border-radius:22%!important;
    background:radial-gradient(circle at 50% 48%,#ffd75acc 0,#ffb42e66 45%,#ff9a1a22 75%,transparent 100%)!important;mix-blend-mode:screen;box-shadow:0 0 12px 1px #ffc53a99!important}
  .cabinet[data-video-ready="true"] .controls>.auto-button[aria-pressed="true"]::after{content:none}
}