/* The standard reveals' controls (Chris, 30 Oct 2026: the box "open ready to go with the user choices box in the middle", and
   the 1x / 2x / 4x / Skip to results bar given "a makeover to match the operators colours"). Its own file, loaded after every
   look (partials/look-styles) - Ruby's candy and each template alike - so the controls are the same on every operator's site
   and wear that operator's reveal colours: the --std-* properties the host sets on the section from the checked theme (card,
   card-deep, on-card, backdrop, on-backdrop; ThemeRules keeps each ink at 4.5:1). Every colour falls back to the neutral
   theme's, and every color-mix() follows a plain value for a browser without it. No colour here is gold - gold is a win's
   alone, and only a game draws one. Every button is at least 44 x 44, and every rule that sets a display says :not([hidden])
   (an author's display beats the hidden attribute).
   Markup: partials/std-reveal. The host (reveals-std/src/host/host.js) sets data-std-ready on the section while the game
   waits, laid out, under the choices; data-std-playing while it plays; data-std-main on the choice the box leads with;
   data-std-paused on the bar; and puts the three speeds in one [data-std-speeds] group. */

.st-std{--stc-font:var(--st-font-body,var(--rcc-body,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif));--stc-r:var(--st-r,14px)}

/* ---- the box: the choices and the game in one grid cell, so the choices sit over the game and the cell is as tall as the
   taller of the two (a short game never lets the choices spill out) ---- */
.st-std .st-std__play:not([hidden]){display:grid;width:100%;max-width:640px;margin:8px auto 0}
.st-std .st-std__play>*{grid-area:1/1;min-width:0}
.st-std .st-std__stage:not([hidden]){position:relative;isolation:isolate}
.st-std[data-std-playing] .st-std__stage:not([hidden]){border-radius:var(--stc-r) var(--stc-r) 0 0}
/* the game under the choices, a little dimmed towards the middle so the choices read - and the shade takes every tap, so a
   tap on the picture never reaches its game (a game started by hand waits for one) */
.st-std[data-std-ready] .st-std__stage::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 75% 65% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,.12));
  background:radial-gradient(ellipse 75% 65% at 50% 50%,color-mix(in srgb,var(--std-backdrop,#11151c) 55%,transparent),color-mix(in srgb,var(--std-backdrop,#11151c) 14%,transparent))}

/* ---- the choices: a panel in the operator's backdrop - over the game once it is ready, under the words before ---- */
.st-std .st-std__choose:not([hidden]){position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  justify-self:center;align-self:start;box-sizing:border-box;width:min(100%,340px);margin:4px 0 0;padding:14px;
  border:1px solid rgba(255,255,255,.16);border:1px solid color-mix(in srgb,var(--std-on-backdrop,#fff) 18%,transparent);border-radius:18px;
  background:var(--std-backdrop,#11151c);color:var(--std-on-backdrop,#fff);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.st-std[data-std-ready] .st-std__choose:not([hidden]){align-self:center;width:min(calc(100% - 28px),340px);margin:14px 0;
  background:rgba(17,21,28,.84);background:color-mix(in srgb,var(--std-backdrop,#11151c) 84%,transparent)}
.st-std .st-std__choose .st-std__bigline:not([hidden]),.st-std .st-std__choose [data-std-bigline]:not([hidden]){display:block;margin:0 2px 2px;
  font:600 13.5px/1.4 var(--stc-font);color:var(--std-on-backdrop,#fff)}

.st-std .st-std__choose [data-std-act]:not([hidden]){position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-sizing:border-box;width:100%;min-width:44px;min-height:46px;margin:0;padding:0 18px;border-radius:999px;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font:800 15px/1.15 var(--stc-font);letter-spacing:.01em;
  border:1.5px solid rgba(255,255,255,.38);border:1.5px solid color-mix(in srgb,var(--std-on-backdrop,#fff) 38%,transparent);
  background:transparent;color:var(--std-on-backdrop,#fff);box-shadow:none;text-shadow:none;transition:transform .12s ease,background-color .15s ease}
.st-std .st-std__choose [data-std-act]:not([data-std-main]):hover{background:rgba(255,255,255,.1);background:color-mix(in srgb,var(--std-on-backdrop,#fff) 10%,transparent)}
/* the choice the box leads with: the operator's own colour, with a play mark when it starts the game */
.st-std .st-std__choose [data-std-main]:not([hidden]){min-height:54px;font-size:17px;border-color:transparent;
  background:var(--std-card,#2b3445);color:var(--std-on-card,#fff);
  box-shadow:0 3px 0 var(--std-card-deep,#1f2733),0 10px 24px rgba(0,0,0,.3)}
.st-std .st-std__choose [data-std-main]:is([data-std-act=hand],[data-std-act=auto],[data-std-act=resume],[data-std-act=anyway])::before{content:"";
  flex:0 0 auto;width:12px;height:14px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.st-std .st-std__choose [data-std-act]:active{transform:translateY(1px) scale(.99)}

/* ---- the bar: one strip joined to the foot of the game, in a shade of the operator's backdrop ---- */
.st-std .st-std__bar:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  width:100%;max-width:640px;margin:0 auto;padding:8px;border-radius:0 0 var(--stc-r) var(--stc-r);
  background:#1d222c;background:color-mix(in srgb,var(--std-backdrop,#11151c) 87%,var(--std-on-backdrop,#fff));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--std-on-backdrop,#fff) 10%,transparent)}
/* joined to the game: the card's own gap (.st-reveal-card, 8px in site.css and every look) taken back */
.st-std[data-std-playing] .st-std__bar:not([hidden]){margin-top:-8px}
.st-std .st-std__bar [data-std-act]:not([hidden]){position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:11px;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font:700 14px/1 var(--stc-font);
  background:transparent;color:var(--std-on-backdrop,#fff);box-shadow:none;text-shadow:none;transition:background-color .15s ease,transform .12s ease}
.st-std .st-std__bar [data-std-act]:hover{background:rgba(255,255,255,.1);background:color-mix(in srgb,var(--std-on-backdrop,#fff) 10%,transparent)}
.st-std .st-std__bar [data-std-act]:active{transform:translateY(1px)}
/* what is switched on - Auto, the speed - in the operator's own colour */
.st-std .st-std__bar [data-std-act][aria-pressed=true]:not([data-std-act=sound]){background:var(--std-card,#2b3445);color:var(--std-on-card,#fff);
  box-shadow:0 2px 0 var(--std-card-deep,#1f2733)}

.st-std .st-std__bar [data-std-act=pause]{order:1}
.st-std .st-std__bar [data-std-act=toggle-auto]{order:2}
.st-std .st-std__bar [data-std-speeds]{order:3}
.st-std .st-std__bar [data-std-act=sound]{order:4}
.st-std .st-std__bar [data-std-act=burst]{order:5}
.st-std .st-std__bar [data-std-act=skip]{order:6}
.st-std .st-std__bar [data-std-act=rescue]{order:7}

/* the speeds: one switch */
.st-std .st-std__bar [data-std-speeds]:not([hidden]){display:inline-flex;gap:2px;padding:3px;border-radius:14px;
  background:rgba(255,255,255,.08);background:color-mix(in srgb,var(--std-on-backdrop,#fff) 9%,transparent)}
.st-std .st-std__bar [data-std-speeds] [data-std-act]:not([hidden]){padding:0 9px;font-variant-numeric:tabular-nums}
.st-std .st-std__bar [data-std-speeds]:not(:has([data-std-act]:not([hidden]))){display:none}   /* no speeds offered: no empty track */

/* Pause and Sound are marks only (the button's words stay its name); Pause turns into Resume's triangle when paused */
.st-std .st-std__bar :is([data-std-act=pause],[data-std-act=sound]):not([hidden]){gap:0;padding:0;width:44px;font-size:0}
.st-std .st-std__bar [data-std-act=pause]::before{content:"";width:12px;height:14px;border-radius:1px;
  background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.st-std .st-std__bar[data-std-paused] [data-std-act=pause]::before{width:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.st-std .st-std__bar[data-std-paused] [data-std-act=pause]{background:var(--std-card,#2b3445);color:var(--std-on-card,#fff);box-shadow:0 2px 0 var(--std-card-deep,#1f2733)}
.st-std .st-std__bar [data-std-act=sound]::before{content:"";width:11px;height:14px;background:currentColor;clip-path:polygon(0 30%,40% 30%,100% 0,100% 100%,40% 70%,0 70%)}
.st-std .st-std__bar [data-std-act=sound]::after{content:"";box-sizing:border-box;width:8px;height:12px;margin-left:2px;border:2px solid transparent;
  border-right-color:currentColor;border-radius:50%}
.st-std .st-std__bar [data-std-act=sound][aria-pressed=false]{color:rgba(255,255,255,.6);color:color-mix(in srgb,var(--std-on-backdrop,#fff) 62%,transparent)}
.st-std .st-std__bar [data-std-act=sound][aria-pressed=false]::after{width:18px;height:2px;margin-left:-15px;border:0;border-radius:1px;
  background:currentColor;transform:rotate(-45deg)}

/* Auto: a light that is lit while it is on */
.st-std .st-std__bar [data-std-act=toggle-auto]::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.4}
.st-std .st-std__bar [data-std-act=toggle-auto][aria-pressed=true]::before{opacity:1;box-shadow:0 0 0 3px rgba(255,255,255,.22);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--std-on-card,#fff) 24%,transparent)}

/* Skip to results (and Pinball Drop's own button): plain and clear, never louder than the game */
.st-std .st-std__bar :is([data-std-act=skip],[data-std-act=burst]):not([hidden]){padding:0 16px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--std-on-backdrop,#fff) 34%,transparent)}
.st-std .st-std__bar [data-std-act=skip]::after{content:"";flex:0 0 auto;width:13px;height:11px;background:currentColor;
  clip-path:polygon(0 0,50% 50%,50% 0,100% 50%,50% 100%,50% 50%,0 100%)}
/* Auto has stalled: "Show my results" leads */
.st-std .st-std__bar [data-std-act=rescue]:not([hidden]){flex:1 1 100%;padding:0 16px;background:var(--std-card,#2b3445);color:var(--std-on-card,#fff);
  box-shadow:0 2px 0 var(--std-card-deep,#1f2733)}

/* a phone: Skip takes the rest of the row it lands on; wider, everything sits on one row with Skip at its end */
@media (max-width:599px){
  .st-std .st-std__bar [data-std-act=skip]:not([hidden]){flex:1 0 auto}
}
@media (min-width:600px){
  .st-std .st-std__bar:not([hidden]){justify-content:flex-start}
  .st-std .st-std__bar [data-std-act=skip]:not([hidden]){margin-left:auto}
}

.st-std :is(.st-std__choose,.st-std__bar) [data-std-act]:focus-visible{outline:2px solid var(--std-on-backdrop,#fff);outline-offset:2px}

/* motion: the choices come up, and the lead choice breathes while it waits - never under reduced motion */
@media (prefers-reduced-motion:no-preference){
  .st-std[data-std-ready] .st-std__choose:not([hidden]){animation:stc-in .3s ease-out both}
  .st-std[data-std-ready] .st-std__choose [data-std-main]::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
    border:2px solid var(--std-card,#2b3445);opacity:0;animation:stc-ring 2.4s ease-out .8s infinite}
}
@keyframes stc-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes stc-ring{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.08,1.3)}}