/* Powerhouse Play Bonus Buy menu (approved mockup provider-buy-v1). Scoped to
   #player-dialog in its buy and review views so it overrides buy-menu.css.
   Cards use ph-* classes; the game's data-feature-* hooks are unchanged. */
#player-dialog:is([data-view=buy],[data-view=review]){
  --ph-red:#E9132A;--ph-red-hover:#F52A40;--ph-card:rgba(20,22,26,.97);--ph-edge:rgba(255,255,255,.08);
  --ph-box:rgba(40,42,48,.96);--ph-mute:rgba(255,255,255,.72);
  font-family:var(--font-ui);color:#fff;-webkit-font-smoothing:antialiased;
}
#player-dialog:is([data-view=buy],[data-view=review])::backdrop{background:rgba(6,7,10,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#player-dialog:is([data-view=buy],[data-view=review]) button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Header: title, round close key. */
#player-dialog:is([data-view=buy],[data-view=review]) .player-heading{height:auto;min-height:0;padding:30px 90px 0;justify-content:center}
#player-dialog:is([data-view=buy],[data-view=review]) .player-heading h2{font:800 26px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#fff}
#player-dialog:is([data-view=buy],[data-view=review]) .player-close{top:22px;right:24px;width:52px;height:52px;border-radius:50%;
  background:rgba(20,22,26,.9);border:1px solid var(--ph-edge);color:#fff}
#player-dialog:is([data-view=buy],[data-view=review]) .player-close:hover{background:rgba(40,42,48,.96);border-color:var(--ph-edge)}
#player-dialog:is([data-view=buy],[data-view=review]) .player-close svg{width:22px;height:22px;stroke-width:2.6}

/* Bet: the bar's type, with − and + at fixed spots either side. */
#player-dialog[data-view=buy] .player-toolbar{margin:20px auto 0}
#player-dialog[data-view=buy] .player-bet-control{grid-template-columns:48px 1fr 48px;gap:8px;width:252px;height:68px;padding:0 10px;align-items:center;
  background:var(--ph-card);border:1px solid var(--ph-edge);border-radius:10px;box-shadow:none}
#player-dialog[data-view=buy] .player-bet-control>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
#player-dialog[data-view=buy] .player-bet-control span{font:600 9px/1 var(--font-ui);letter-spacing:.055em;color:#fff}
#player-dialog[data-view=buy] .player-bet-control strong{margin-top:6px;font:700 22px/1 var(--font-ui);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#fff}
#player-dialog[data-view=buy] .player-bet-control button{width:48px;height:48px;align-self:center;border-radius:8px;background:var(--ph-box);font:500 26px/1 var(--font-ui);color:#fff}
#player-dialog[data-view=buy] .player-bet-control button:hover:enabled{background:rgba(60,62,70,.96)}
#player-dialog[data-view=buy] .player-bet-control button:disabled{opacity:.3}

/* Cards sit centred in the room between the bet box and the bottom bar. */
#player-dialog[data-view=buy] .player-scroll{display:flex;flex-direction:column;padding:0 32px 130px}
#player-dialog[data-view=buy] #page-features:not([hidden]){display:flex;flex:1;flex-direction:column;justify-content:center}
#player-dialog[data-view=buy] .feature-cards{display:grid;grid-template-columns:repeat(5,232px);gap:16px;max-width:none;margin:28px auto}
#player-dialog[data-view=buy] .ph-card{position:relative;display:grid;grid-template-rows:auto 150px 72px auto 54px;border-radius:12px;overflow:hidden;
  background:var(--ph-card);border:1px solid var(--ph-edge);box-shadow:0 14px 34px rgba(0,0,0,.4);transition:transform .15s ease-out,border-color .15s}
#player-dialog[data-view=buy] .ph-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
#player-dialog[data-view=buy] .ph-card h3{margin:0;padding:20px 16px 0;text-align:center;font:800 16px/1.1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:#fff}
#player-dialog:is([data-view=buy],[data-view=review]) .feature-art-well{position:relative;display:grid;place-items:center;height:auto;margin:12px 16px 0;border:0;border-radius:10px;
  background:radial-gradient(closest-side,rgba(233,19,42,.2),transparent 100%),rgba(255,255,255,.03)}
#player-dialog[data-view=buy] .ph-card .feature-art,#player-dialog[data-view=buy] .ph-card .mystery-mark{transform:scale(.86)}
#player-dialog[data-view=buy] .ph-card p{margin:0;padding:12px 14px 0;text-align:center;font:400 12.5px/1.4 var(--font-ui);color:var(--ph-mute)}
#player-dialog[data-view=buy] .ph-price{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 16px 14px}
#player-dialog[data-view=buy] .ph-price strong{font:700 26px/1 var(--font-ui);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#fff}
#player-dialog[data-view=buy] .ph-price small{margin-top:6px;font:600 10px/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ph-mute)}
#player-dialog[data-view=buy] .ph-card .feature-action{width:100%;height:54px;min-height:0;margin:0;padding:0;border:0;border-radius:0;
  font:800 16px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .15s}
#player-dialog[data-view=buy] .ph-card[data-action-kind=buy] .feature-action{background:var(--ph-red);color:#fff}
#player-dialog[data-view=buy] .ph-card[data-action-kind=buy] .feature-action:hover:enabled{background:var(--ph-red-hover)}
#player-dialog[data-view=buy] .ph-card[data-action-kind=activate] .feature-action{background:#fff;color:#16181C}
#player-dialog[data-view=buy] .ph-card[data-action-kind=activate] .feature-action:hover:enabled{background:#E9EAEC}
#player-dialog[data-view=buy] .ph-card .feature-action:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.42);cursor:default}
/* A running feature: red edge, ACTIVE ribbon, button turns it off. */
#player-dialog[data-view=buy] .ph-card[data-active=true]{border-color:var(--ph-red);box-shadow:0 0 0 1px var(--ph-red),0 14px 34px rgba(0,0,0,.4)}
#player-dialog[data-view=buy] .ph-card[data-active=true] .feature-action{background:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
#player-dialog[data-view=buy] .ph-tag{position:absolute;top:0;left:50%;transform:translateX(-50%);display:none;padding:3px 9px 4px;border-radius:0 0 6px 6px;
  background:var(--ph-red);font:800 9px/1 var(--font-ui);letter-spacing:.1em;color:#fff}
#player-dialog[data-view=buy] .ph-card[data-active=true] .ph-tag{display:block}

/* Mystery: a red card with a white "?". */
#player-dialog:is([data-view=buy],[data-view=review]) .mystery-mark b{background:var(--ph-red);border:2px solid #fff;color:#fff;font:800 64px/1 var(--font-ui)}
#player-dialog:is([data-view=buy],[data-view=review]) .mystery-mark i{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.25)}

/* Confirm: art, title, text, price, then the action and a quiet cancel. */
#player-dialog[data-view=review] .purchase-review{display:flex;flex-direction:column;align-items:center;width:min(380px,100%);padding:28px 26px 24px;
  text-align:center;background:var(--ph-card);border:1px solid var(--ph-edge);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
#player-dialog[data-view=review] #purchase-art{order:1;width:100%;height:150px;margin:0}
#player-dialog[data-view=review] .purchase-review h3{order:2;margin:18px 0 0;font:800 18px/1.2 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:#fff}
#player-dialog[data-view=review] #purchase-description{order:3;margin:8px 0 0;font:400 13px/1.45 var(--font-ui);color:var(--ph-mute)}
#player-dialog[data-view=review] .purchase-cost{order:4;margin:16px 0 0;font:700 26px/1 var(--font-ui);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#fff}
#player-dialog[data-view=review] .purchase-actions{order:5;display:flex;flex-direction:column-reverse;align-items:center;gap:10px;width:100%;margin-top:18px}
#player-dialog[data-view=review] .confirm-feature{width:100%;height:52px;min-height:0;border-radius:10px;background:var(--ph-red);color:#fff;
  font:800 15px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
#player-dialog[data-view=review] .confirm-feature:hover:enabled{background:var(--ph-red-hover)}
#player-dialog[data-view=review] .purchase-review[data-kind=activate] .confirm-feature{background:#fff;color:#16181C}
#player-dialog[data-view=review] .purchase-review[data-kind=activate] .confirm-feature:hover:enabled{background:#E9EAEC}
#player-dialog[data-view=review] .cancel-feature{width:auto;height:40px;min-height:0;padding:0 18px;border-radius:8px;background:transparent;color:var(--ph-mute);
  font:700 13px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
#player-dialog[data-view=review] .cancel-feature:hover{background:rgba(255,255,255,.06);color:#fff}

/* Short desktop windows: tighter rows. */
@media(min-width:761px) and (max-height:760px){
  #player-dialog[data-view=buy] .ph-card{grid-template-rows:auto 120px 66px auto 48px}
  #player-dialog[data-view=buy] .ph-card .feature-art,#player-dialog[data-view=buy] .ph-card .mystery-mark{transform:scale(.7)}
  #player-dialog[data-view=buy] .player-scroll{padding-bottom:100px}
}
@media(min-width:761px) and (max-width:1300px){
  #player-dialog[data-view=buy] .feature-cards{grid-template-columns:repeat(5,minmax(0,210px));gap:12px}
}

/* Phone: one compact row per option. */
@media(max-width:760px){
  #player-dialog:is([data-view=buy],[data-view=review]) .player-heading{padding:22px 64px 0}
  #player-dialog:is([data-view=buy],[data-view=review]) .player-heading h2{font-size:20px}
  #player-dialog:is([data-view=buy],[data-view=review]) .player-close{top:14px;right:12px;width:44px;height:44px}
  #player-dialog[data-view=buy] .player-toolbar{margin-top:16px}
  #player-dialog[data-view=buy] .player-bet-control{width:220px;height:60px}
  #player-dialog[data-view=buy] .player-bet-control button{width:44px;height:44px}
  #player-dialog[data-view=buy] .player-scroll{padding:0 12px 24px}
  #player-dialog[data-view=buy] #page-features:not([hidden]){justify-content:flex-start}
  #player-dialog[data-view=buy] .feature-cards{grid-template-columns:1fr;gap:10px;width:100%;max-width:520px;margin:18px auto 0}
  #player-dialog[data-view=buy] .ph-card{grid-template-rows:none;grid-template-columns:84px 1fr 104px;align-items:center;min-height:100px}
  #player-dialog[data-view=buy] .ph-card:hover{transform:none}
  #player-dialog[data-view=buy] .ph-card .feature-art-well{grid-row:1/3;grid-column:1;width:72px;height:72px;margin:0 0 0 12px;border-radius:9px;overflow:hidden}
  #player-dialog[data-view=buy] .ph-card .feature-art,#player-dialog[data-view=buy] .ph-card .mystery-mark{zoom:.46;transform:none}
  #player-dialog[data-view=buy] .ph-card h3{grid-row:1;grid-column:2;align-self:end;padding:0 10px 3px;text-align:left;font-size:14px}
  #player-dialog[data-view=buy] .ph-card p{display:none}
  #player-dialog[data-view=buy] .ph-price{grid-row:2;grid-column:2;align-self:start;align-items:flex-start;justify-content:flex-start;padding:6px 10px 0}
  #player-dialog[data-view=buy] .ph-price strong{font-size:19px}
  #player-dialog[data-view=buy] .ph-price small{font-size:8px;margin-top:4px}
  #player-dialog[data-view=buy] .ph-card .feature-action{grid-row:1/3;grid-column:3;width:92px;height:48px;border-radius:9px;font-size:13px}
  #player-dialog[data-view=buy] .ph-card[data-active=true] .feature-action{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
  #player-dialog[data-view=buy] .ph-tag{left:42px}
  #player-dialog[data-view=review] .purchase-review{width:calc(100% - 24px)}
}