/* Powerhouse Play bottom bar (approved mockup provider-ui-v11, variant A,
   arrows, game text). Scoped with #app[data-provider-ui=ph1] so it overrides
   the older HUD stylesheets; the bar's parts use ph-* classes those sheets
   never target. The control area keeps its old box, so the game layout (which
   measures it) is unchanged; the bar is positioned inside it and may overlap
   the bottom of the scene a little, as in the mockup. */
#app[data-provider-ui=ph1]{
  --ph-red:#E9132A;
  --ph-bar:rgba(8,9,12,.84);
  --ph-edge:rgba(255,255,255,.08);
  --ph-box:rgba(40,42,48,.96);
  --ph-box-edge:rgba(255,255,255,.07);
  --ph-line:rgba(255,255,255,.14);
  --ph-hover:rgba(255,255,255,.1);
  --ph-bar-h:86px;
  --ph-k:46px;
  --ph-spin:110px;
  --ph-buy:86px;
  --ph-scale:1;
}
#app[data-provider-ui=ph1] .control-area{background:none;border:0;box-shadow:none;backdrop-filter:none}
#app[data-provider-ui=ph1] .hud{
  position:absolute;left:50%;bottom:14px;top:auto;right:auto;transform:translateX(-50%) scale(var(--ph-scale));transform-origin:50% 100%;
  display:flex;align-items:center;gap:0;width:auto;height:var(--ph-bar-h);margin:0;padding:0;
  background:var(--ph-bar);border:1px solid var(--ph-edge);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);backdrop-filter:none;
  font-family:var(--font-ui);color:#fff;-webkit-font-smoothing:antialiased;
}
#app[data-provider-ui=ph1] .hud::before,#app[data-provider-ui=ph1] .hud::after{content:none}
#app[data-provider-ui=ph1] .hud [hidden]{display:none!important}
#app[data-provider-ui=ph1] .hud button{appearance:none;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:#fff;font:inherit;cursor:pointer;
  position:relative;flex:none;display:grid;place-items:center;min-width:0;min-height:0;box-shadow:none;
  transition:transform .06s ease-out,background-color .15s,opacity .2s}
#app[data-provider-ui=ph1] .hud button:disabled{cursor:default;opacity:.3}
#app[data-provider-ui=ph1] .hud button:focus-visible{outline:2px solid #fff;outline-offset:3px}
#app[data-provider-ui=ph1] .hud svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#app[data-provider-ui=ph1] .hud svg .fill{fill:currentColor;stroke:none}
#app[data-provider-ui=ph1] .ph-part{display:flex;align-items:center;height:100%}

/* Keys */
#app[data-provider-ui=ph1] .hud .ph-tool{width:var(--ph-k);height:var(--ph-k)}
#app[data-provider-ui=ph1] .hud .ph-tool:hover:enabled{background:var(--ph-hover)}
#app[data-provider-ui=ph1] .hud .ph-tool:active:enabled{transform:scale(.94)}
#app[data-provider-ui=ph1] #quick-turbo{display:grid}
#app[data-provider-ui=ph1] #quick-turbo[aria-pressed=true]{color:var(--ph-red);background:rgba(233,19,42,.16)}

/* Read-outs: the game's own type (Rubik 600 9 px labels, 700 22 px amounts). */
#app[data-provider-ui=ph1] .ph-info{padding-left:12px}
#app[data-provider-ui=ph1] .ph-menu{margin-right:8px}
#app[data-provider-ui=ph1] .ph-cell{position:relative;display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 18px;min-width:0}
#app[data-provider-ui=ph1] .ph-info .ph-cell::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--ph-line)}
#app[data-provider-ui=ph1] .hud .ph-label{display:block;font-size:9px;line-height:1;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:#fff;white-space:nowrap}
#app[data-provider-ui=ph1] .hud .ph-value{display:block;margin-top:6px;font-size:22px;line-height:1;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;overflow:hidden;text-overflow:clip}
#app[data-provider-ui=ph1] .ph-bal{width:214px}
#app[data-provider-ui=ph1] .ph-win{width:198px}

/* Bet: its own square and its own up/down square, fixed size. */
#app[data-provider-ui=ph1] .ph-betseg{padding:0 4px}
#app[data-provider-ui=ph1] .ph-bet{display:flex;align-items:stretch;gap:6px;height:calc(var(--ph-bar-h) - 22px)}
#app[data-provider-ui=ph1] .hud .ph-stack{position:relative;width:152px;height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:0 14px 6px;text-align:left;background:var(--ph-box);border:1px solid var(--ph-box-edge);border-radius:7px}
#app[data-provider-ui=ph1] .hud .ph-stack:hover:enabled{background:rgba(52,54,60,.96)}
#app[data-provider-ui=ph1] .hud .ph-stack:disabled{opacity:1;cursor:default}
#app[data-provider-ui=ph1] .ph-steps{flex:none;width:46px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px;
  background:var(--ph-box);border:1px solid var(--ph-box-edge);border-radius:7px}
#app[data-provider-ui=ph1] .hud .ph-steps button{position:relative;inset:auto;width:100%;height:auto;flex:1;border-radius:5px;grid-column:auto;grid-row:auto}
#app[data-provider-ui=ph1] .hud .ph-steps button:hover:enabled{background:var(--ph-hover)}
#app[data-provider-ui=ph1] .hud .ph-steps svg{width:20px;height:20px;stroke-width:2.6}
#app[data-provider-ui=ph1] .ph-level{position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:1px;background:rgba(255,255,255,.12)}
#app[data-provider-ui=ph1] .ph-level i{display:block;height:100%;width:0;background:var(--ph-red);transition:width .18s ease-out}
/* Free spins take the bet's place. */
#app[data-provider-ui=ph1] .ph-fs{width:204px;height:calc(var(--ph-bar-h) - 22px);display:flex;flex-direction:column;justify-content:center;padding:0 14px;
  background:var(--ph-box);border:1px solid var(--ph-box-edge);border-radius:7px}
#app[data-provider-ui=ph1] .ph-fs small{display:block;margin-top:4px;font-size:9px;font-weight:600;letter-spacing:.055em;color:rgba(255,255,255,.7)}
#app[data-provider-ui=ph1] .ph-betseg:has(#bonus-hud:not([hidden])) .ph-bet{display:none}

/* Spin */
#app[data-provider-ui=ph1] .hud .ph-spin{width:var(--ph-spin);height:var(--ph-spin);margin:0 10px;border-radius:50%;background:#101115;color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.16),0 10px 24px rgba(0,0,0,.45)}
#app[data-provider-ui=ph1] .hud .ph-spin:hover:enabled{background:#1B1D22}
#app[data-provider-ui=ph1] .hud .ph-spin:active:enabled{transform:scale(.96)}
#app[data-provider-ui=ph1] .hud .ph-spin svg{width:62px;height:62px;stroke-width:4.6}
#app[data-provider-ui=ph1] .hud .ph-spin[data-action=skip] svg{display:none}
#app[data-provider-ui=ph1] .hud .ph-spin[data-action=skip]::after{content:'';width:26px;height:26px;border-radius:5px;background:currentColor}
/* Extra Chance or Feature Spin running: Spin turns red. */
#app[data-provider-ui=ph1] .hud[data-feature-active=true] .ph-spin{background:var(--ph-red);box-shadow:0 0 0 3px rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.45)}
#app[data-provider-ui=ph1] .hud[data-feature-active=true] .ph-spin:hover:enabled{background:#F52A40}

/* Autoplay and turbo */
#app[data-provider-ui=ph1] .ph-tools{gap:4px;padding:0 12px 0 2px}
#app[data-provider-ui=ph1] #autospin-count{display:none}
#app[data-provider-ui=ph1] #autospin[aria-pressed=true] svg{display:none}
#app[data-provider-ui=ph1] #autospin[aria-pressed=true] #autospin-count{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}

/* Buy Bonus: a red bolt outside the bar, on its left. */
#app[data-provider-ui=ph1] .hud .ph-buy{position:absolute;right:calc(100% + 22px);top:50%;width:var(--ph-buy);height:var(--ph-buy);margin-top:calc(var(--ph-buy) / -2);
  border-radius:50%;background:var(--ph-red);color:#fff;
  box-shadow:0 0 0 3px #111216,inset 0 -5px 0 rgba(0,0,0,.2),0 10px 22px rgba(0,0,0,.45)}
#app[data-provider-ui=ph1] .hud .ph-buy:hover:enabled{background:#F52A40;transform:scale(1.04)}
#app[data-provider-ui=ph1] .hud .ph-buy:active:enabled{transform:scale(.95)}
#app[data-provider-ui=ph1] .hud .ph-buy svg{width:44px;height:44px}
#app[data-provider-ui=ph1] .hud .ph-buy:disabled{opacity:.35;filter:grayscale(1)}

/* Smaller desktop windows, tablets and short screens: the same bar, scaled. */
@media(min-width:641px) and (max-width:1140px){#app[data-provider-ui=ph1]{--ph-scale:.86}}
@media(min-width:641px) and (max-width:980px){#app[data-provider-ui=ph1]{--ph-scale:.74}}
@media(min-width:641px) and (max-height:700px){#app[data-provider-ui=ph1]{--ph-scale:.8}}
@media(min-width:641px) and (max-height:600px){#app[data-provider-ui=ph1]{--ph-scale:.62}#app[data-provider-ui=ph1] .hud{bottom:4px}}

/* Small landscape windows (a phone on its side, Stake's mini-player popout): the desktop bar, scaled to fit the
   width so the reels stay clear. A scale s fits when the width is at least 1120·s + 16 px (bar plus the buy key). */
@media(max-width:760px) and (orientation:landscape){
  #app[data-provider-ui=ph1]{--ph-scale:.58}
  #app[data-provider-ui=ph1] .hud{bottom:4px}
  .app[data-ui=modern] .control-area{bottom:max(6px,env(safe-area-inset-bottom));height:calc(var(--ph-bar-h) * var(--ph-scale) + 4px)}
}
@media(max-width:665px) and (orientation:landscape){#app[data-provider-ui=ph1]{--ph-scale:.52}}
@media(max-width:597px) and (orientation:landscape){#app[data-provider-ui=ph1]{--ph-scale:.46}}
@media(max-width:530px) and (orientation:landscape){#app[data-provider-ui=ph1]{--ph-scale:.4}}
@media(max-width:463px) and (orientation:landscape){#app[data-provider-ui=ph1]{--ph-scale:.34}}
@media(max-width:396px) and (orientation:landscape){#app[data-provider-ui=ph1]{--ph-scale:.28}}
@media(max-width:329px) and (orientation:landscape){#app[data-provider-ui=ph1]{--ph-scale:.24}}

/* Phone (portrait): a read-out strip, then a thumb row of round keys. */
@media(max-width:640px) and (orientation:portrait){
  #app[data-provider-ui=ph1]{--ph-bar-h:58px;--ph-k:46px;--ph-spin:96px;--ph-buy:62px}
  #app[data-provider-ui=ph1] .hud{bottom:10px;width:calc(100vw - 20px);height:auto;transform:translateX(-50%);
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--ph-bar-h) var(--ph-spin);row-gap:14px;
    background:none;border:0;border-radius:0;box-shadow:none}
  #app[data-provider-ui=ph1] .hud::before{content:'';display:block;grid-row:1;grid-column:1/-1;align-self:stretch;background:var(--ph-bar);border:1px solid var(--ph-edge);border-radius:12px}
  #app[data-provider-ui=ph1] .ph-part{display:contents}
  #app[data-provider-ui=ph1] .ph-bal{grid-row:1;grid-column:1/5;width:auto;padding:0 8px 0 14px}
  #app[data-provider-ui=ph1] .ph-win{grid-row:1;grid-column:5/9;width:auto;padding:0 8px 0 12px}
  #app[data-provider-ui=ph1] .ph-bal::before{content:none}
  #app[data-provider-ui=ph1] .ph-info .ph-cell::before{top:16px;bottom:16px}
  #app[data-provider-ui=ph1] .hud .ph-label{font-size:8px}
  #app[data-provider-ui=ph1] .hud .ph-value{font-size:17px;margin-top:5px}
  #app[data-provider-ui=ph1] .ph-bet,#app[data-provider-ui=ph1] .ph-fs{grid-row:1;grid-column:9/13;justify-self:end;align-self:center;height:46px;margin-right:6px}
  #app[data-provider-ui=ph1] .hud .ph-stack{width:80px;padding:0 8px 5px}
  #app[data-provider-ui=ph1] .ph-steps{width:34px;padding:3px}
  #app[data-provider-ui=ph1] .ph-fs{width:120px;padding:0 10px}
  #app[data-provider-ui=ph1] .ph-level{left:8px;right:8px;bottom:5px}
  #app[data-provider-ui=ph1] .hud .ph-buy{position:relative;right:auto;top:auto;margin:0;grid-row:2;grid-column:1/3;justify-self:start;align-self:center}
  #app[data-provider-ui=ph1] .hud .ph-menu{grid-row:2;grid-column:3/5;justify-self:center;margin:0}
  #app[data-provider-ui=ph1] .hud .ph-spin{grid-row:2;grid-column:5/9;justify-self:center;margin:0}
  #app[data-provider-ui=ph1] .hud .ph-auto{grid-row:2;grid-column:9/11;justify-self:center}
  #app[data-provider-ui=ph1] #quick-turbo{grid-row:2;grid-column:11/13;justify-self:end}
  #app[data-provider-ui=ph1] .hud .ph-tool{border-radius:50%;background:var(--ph-bar);border:1px solid var(--ph-edge)}
  #app[data-provider-ui=ph1] #quick-turbo[aria-pressed=true]{background:rgba(233,19,42,.3)}
}
@media(prefers-reduced-motion:reduce){#app[data-provider-ui=ph1] .hud *{transition:none!important}}