/* Bonus menu, Powerhouse Play / Pirate Treasure style: a charcoal panel over the game with FEATURES in the game's title
   type; a row of cream treasure cards (the picture set in a cream mat, the name,
   volatility in skulls, the price and one button: charcoal to activate a per-spin mode, Powerhouse red to buy a
   round); a balance / bet strip in the bottom bar's style. Confirming shows the same card, enlarged. */
#player-dialog{
  --pp-charcoal:#16181C;--pp-cream:#FCF5E6;--pp-red:#E9132A;--pp-red-edge:#A30C1D;--pp-gold:#F4CD73;--pp-gold-deep:#D69A1D;
  --pp-ink:#1D1A16;--pp-muted:#7B7162;--pp-line:#E6DAC2;--fc-card-w:206px;
  position:fixed;inset:0;width:fit-content;max-width:calc(100vw - 24px);height:fit-content;max-height:calc(100dvh - 24px);margin:auto;padding:0;
  border:0;background:transparent;overflow:visible;color:#fff;font-family:var(--font-ui);-webkit-font-smoothing:antialiased;
}
#player-dialog[open]{display:flex}
#player-dialog::backdrop{background:rgba(4,5,8,.6)}
#player-dialog button{font-family:inherit;cursor:pointer}
#player-dialog button:focus-visible{outline:2px solid #fff;outline-offset:3px}
#player-dialog [hidden]{display:none!important}
#player-dialog .player-shell{position:relative;display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 24px);padding:20px 24px 20px;
  border:1px solid rgba(255,255,255,.08);border-radius:18px;background:var(--pp-charcoal);box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* Header: FEATURES in the game's title type, the round close key used by every menu. */
#player-dialog .player-heading{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0 0 16px;padding:0 60px}
#player-dialog .player-heading h2{margin:0;font:400 30px/1 PirateTitle,var(--font-ui);letter-spacing:.03em;text-transform:uppercase;color:var(--pp-cream)}
#player-dialog .player-close{position:absolute;top:-2px;right:-4px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.1);
  border-radius:50%;background:#23262C;color:#fff;transition:background-color .15s}
#player-dialog .player-close:hover{background:#30343B}
#player-dialog .player-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}

#player-dialog .player-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
#player-dialog .player-notice{margin:6px 0 4px;text-align:center;font:600 13px/1.4 var(--font-ui);color:rgba(255,255,255,.8)}

/* One row of cards; narrower windows wrap it. */
#player-dialog .feature-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* Treasure cards: cream, the picture set in a cream mat. */
#player-dialog .fc{position:relative;flex:0 0 var(--fc-card-w);display:flex;flex-direction:column;padding:6px;border-radius:14px;background:var(--pp-cream);color:var(--pp-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 12px 26px rgba(0,0,0,.4);transition:transform .15s ease-out,box-shadow .15s}
#player-dialog .feature-cards .fc:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 32px rgba(0,0,0,.5)}
#player-dialog .fc-art{position:relative;aspect-ratio:1100/540;overflow:hidden;border-radius:9px;background:#1b2330;box-shadow:0 0 0 1px rgba(60,40,15,.18)}
#player-dialog .fc-art img{display:block;width:100%;height:100%;object-fit:cover}
#player-dialog .fc-body{display:flex;flex:1;flex-direction:column;align-items:center;padding:10px 4px 2px;text-align:center}
#player-dialog .fc h4{margin:0;font:800 16px/1.1 var(--font-ui);letter-spacing:.03em;text-transform:uppercase;color:var(--pp-ink)}
#player-dialog .fc-vol{display:flex;gap:3px;margin-top:8px}
#player-dialog .fc-vol i{display:block;width:17px;height:17px}
#player-dialog .fc-vol svg{display:block;width:100%;height:100%;fill:var(--pp-line);stroke:none}
#player-dialog .fc-vol i.on svg{fill:var(--pp-gold-deep)}
#player-dialog .fc-price{display:block;width:100%;margin:auto 0 10px;padding-top:12px;border-top:1px dashed var(--pp-line);margin-top:12px;
  font:800 21px/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--pp-ink)}
#player-dialog .fc-btn{width:100%;height:44px;padding:0 6px;border:0;border-radius:10px;font:800 16px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pp-cream);background:var(--pp-charcoal);box-shadow:inset 0 -4px 0 #000,inset 0 0 0 1px rgba(244,205,115,.35);transition:filter .12s,transform .06s}
#player-dialog [data-action-kind=buy] .fc-btn,#player-dialog .purchase-review[data-kind=buy] .fc-btn{color:#fff;background:var(--pp-red);box-shadow:inset 0 -4px 0 var(--pp-red-edge)}
#player-dialog .fc-btn:hover:enabled{filter:brightness(1.18)}
#player-dialog .fc-btn:active:enabled{transform:translateY(2px)}
#player-dialog .fc-btn:disabled{cursor:default;background:#D9D0BE;box-shadow:inset 0 -4px 0 #C2B7A1;color:#8C8272}

/* A per-spin mode that is on: gold ring, ACTIVE tag, and its button turns it off. */
#player-dialog .fc-tag{position:absolute;top:8px;left:8px;display:none;padding:5px 9px;border-radius:99px;background:var(--pp-charcoal);font:800 11px/1 var(--font-ui);letter-spacing:.08em;color:var(--pp-gold)}
#player-dialog .fc[data-active=true]{box-shadow:0 0 0 3px var(--pp-gold),0 12px 26px rgba(0,0,0,.4)}
#player-dialog .fc[data-active=true] .fc-tag{display:block}
#player-dialog .fc[data-active=true] .fc-btn{color:var(--pp-ink);background:transparent;box-shadow:inset 0 0 0 2px var(--pp-ink)}
/* A mode the balance cannot cover keeps its price but cannot be chosen. */
#player-dialog .fc[data-unaffordable=true]:not([data-active=true]) .fc-art img{filter:grayscale(.6) brightness(.85)}

/* Balance and bet: the bottom bar's black cells, with the bet's red level line. */
#player-dialog .player-toolbar{display:flex;justify-content:center;margin-top:18px}
#player-dialog .player-bet-control{display:flex;align-items:stretch;gap:6px;height:56px}
#player-dialog .pb-cell{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:0 16px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#101115}
#player-dialog .pb-balance{min-width:170px}
#player-dialog .pb-bet{position:relative;min-width:120px}
#player-dialog .pb-bet::after{content:'';position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:1px;background:var(--pp-red)}
#player-dialog .pb-cell span{font:600 9px/1 var(--font-ui);letter-spacing:.055em;text-transform:uppercase;color:#fff}
#player-dialog .pb-cell strong{font:700 18px/1 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
#player-dialog .player-bet-control button{display:grid;place-items:center;width:46px;padding:0;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#101115;color:#fff}
#player-dialog .player-bet-control button:hover:enabled{background:#1B1D22}
#player-dialog .player-bet-control button:disabled{opacity:.3;cursor:default}
#player-dialog .player-bet-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
#player-dialog #player-bet-down{order:2}#player-dialog .pb-bet{order:3}#player-dialog #player-bet-up{order:4}

/* Confirmation: one card, enlarged. */
#player-dialog[data-view=review] .player-shell{width:min(380px,calc(100vw - 24px))}
#player-dialog .purchase-review{display:flex;justify-content:center;margin-top:8px}
#player-dialog .fc-large{flex:0 0 100%}
#player-dialog .fc-large .fc-body{padding:12px 10px 6px}
#player-dialog .fc-large h4{font-size:22px}
#player-dialog .fc-large .fc-vol i{width:18px;height:18px}
#player-dialog .fc-summary{margin:12px 0 0;font:700 15px/1.35 var(--font-ui);color:var(--pp-ink)}
#player-dialog .fc-note{margin:6px 0 0;font:500 13px/1.45 var(--font-ui);color:var(--pp-muted)}
#player-dialog .fc-large .fc-price{font-size:26px}
#player-dialog .fc-large .fc-btn{height:50px;font-size:18px}
#player-dialog .fc-cancel{margin-top:8px;padding:6px 14px;border:0;background:none;font:700 13px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pp-muted)}
#player-dialog .fc-cancel:hover{color:var(--pp-ink)}

/* Narrower windows: smaller cards (they wrap when five no longer fit). */
@media(max-width:1260px){#player-dialog{--fc-card-w:186px}#player-dialog .fc h4{font-size:14px}#player-dialog .fc-btn{height:40px;font-size:14px}}
@media(max-width:1100px){#player-dialog{--fc-card-w:168px}}
@media(max-height:620px) and (orientation:landscape){
  #player-dialog{--fc-card-w:min(142px,calc((100vw - 110px) / 5))}
  #player-dialog .player-shell{padding:10px 14px 12px}
  #player-dialog .player-heading{min-height:34px;margin-bottom:8px}
  #player-dialog .player-heading h2{font-size:22px}
  #player-dialog .player-close{width:36px;height:36px}
  #player-dialog .feature-cards{flex-wrap:nowrap;gap:8px}
  #player-dialog .fc{padding:4px;border-radius:11px}
  #player-dialog .fc h4{font-size:12px}
  #player-dialog .fc-vol{margin-top:4px}
  #player-dialog .fc-vol i{width:11px;height:11px}
  #player-dialog .fc-price{margin-top:6px;padding-top:6px;margin-bottom:6px;font-size:15px}
  #player-dialog .fc-btn{height:32px;font-size:12px;border-radius:8px}
  #player-dialog .player-toolbar{margin-top:10px}
  #player-dialog .player-bet-control{height:44px}
  #player-dialog .pb-cell{gap:4px}
  #player-dialog .pb-cell strong{font-size:15px}
  #player-dialog .pb-bet::after{bottom:4px}
  #player-dialog .player-bet-control button{width:40px}
}
/* Phones (portrait): each group a column of full-width cards, scrolling, with the strip at the bottom. */
@media(max-width:640px) and (orientation:portrait){
  #player-dialog{--fc-card-w:100%;width:calc(100vw - 16px);max-width:none;max-height:calc(100dvh - 16px)}
  #player-dialog .player-shell{width:100%;max-height:calc(100dvh - 16px);padding:14px 12px 12px}
  #player-dialog .player-heading h2{font-size:28px}
  #player-dialog .player-close{top:0;right:0;width:42px;height:42px}
  #player-dialog .feature-cards{flex-direction:column;flex-wrap:nowrap;gap:12px}
  #player-dialog .fc h4{font-size:20px}
  #player-dialog .fc-vol i{width:18px;height:18px}
  #player-dialog .fc-price{font-size:24px}
  #player-dialog .fc-btn{height:50px;font-size:18px}
  #player-dialog .player-toolbar{margin-top:12px}
  #player-dialog .player-bet-control{width:100%}
  #player-dialog .pb-balance{flex:1;min-width:0}
  #player-dialog .pb-bet{min-width:96px}
  #player-dialog[data-view=review] .player-shell{width:100%}
}
@media(prefers-reduced-motion:reduce){#player-dialog .fc,#player-dialog .fc-btn,#player-dialog .player-close{transition:none}#player-dialog .feature-cards .fc:hover{transform:none}}