/*
 * fuwa.ink: a big, always-there Bonus Buy for halo static.
 *
 * The demo bundle only had a small pink "buy · from 500" pill in the HUD, which players did not read as the Bonus Buy
 * (Heaven Spins / Higher Heaven). scripts/sync-halo-static.mjs copies this file into the vendored bundle, links it after
 * the game's own stylesheet, and patches the DemoApp chunk so that:
 *  - the HUD pill says "bonus buy" and is bigger, brighter and gently glowing on every layout (phone and desktop);
 *  - on roomy screens a big Bonus Buy card (.bonus-buy-big) sits on the stage, right of the reels, above the HUD.
 * Both open the same Bonus Buy picker (Heaven Spins / Higher Heaven) as the B key.
 */

/* ---- the HUD pill: bigger, labelled, glowing ---- */
.hud .pill.buy {
  width: 150px;
  height: calc(var(--ctl) * 1.18);
  padding: 0 10px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #ffb3ec 0%, #ff6fd2 45%, #c43fae 100%);
  font-size: calc(var(--ctl) * .44);
  letter-spacing: .01em;
  box-shadow: 0 0 0 2px #c43fae, 0 0 18px #ff7ad9b3, 0 4px 10px #0009;
  animation: fuwa-buy-glow 2.4s ease-in-out infinite;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}
.hud .pill.buy span { white-space: nowrap; font-weight: 700; }
.hud .pill.buy small { font-size: calc(var(--ctl) * .28); }
.hud .pill.buy:disabled { animation: none; filter: saturate(.55) brightness(.85); }
.hud .pill.buy.is-hidden { visibility: hidden; animation: none; }
@keyframes fuwa-buy-glow {
  0%, 100% { box-shadow: 0 0 0 2px #c43fae, 0 0 12px #ff7ad980, 0 4px 10px #0009; }
  50% { box-shadow: 0 0 0 2px #c43fae, 0 0 26px #ff7ad9, 0 4px 10px #0009; }
}
@media (prefers-reduced-motion: reduce) { .hud .pill.buy, .bonus-buy-big { animation: none !important; } }

@media (max-width: 1180px) and (orientation: landscape) { .hud .pill.buy { width: 128px; } }
@media (max-height: 520px) and (orientation: landscape) { .hud .pill.buy { width: 112px; height: calc(var(--ctl) * 1.12); } }
@media (max-height: 520px) and (max-width: 780px) and (orientation: landscape) { .hud .pill.buy { width: 96px; } }
@media (orientation: portrait) { .hud .pill.buy { width: 124px; height: calc(var(--ctl) * 1.22); } }
@media (orientation: portrait) and (min-width: 600px) { .hud .pill.buy { width: 160px; } }
@media (orientation: portrait) and (max-width: 374px) { .hud .pill.buy { width: 104px; } }

/* ---- the big Bonus Buy card on the stage (landscape screens, right of the reels, where it never covers them) ---- */
.bonus-buy-big { display: none; }
@media (orientation: landscape) and (min-width: 760px) and (min-aspect-ratio: 13/10) {
  .bonus-buy-big {
    position: absolute;
    z-index: 5; /* over the stage and rail, under the modals (20) */
    right: max(28px, 3.5vw, env(safe-area-inset-right));
    bottom: calc(var(--hud-h) + 28px);
    width: clamp(120px, 14vw, 200px);
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 12px 10px 14px;
    box-sizing: border-box;
    border-radius: 18px;
    border: 3px solid #fff;
    background: linear-gradient(180deg, #ffb3ec 0%, #ff6fd2 50%, #b8369f 100%);
    color: #fff;
    font: inherit;
    text-align: center;
    text-shadow: 0 1px 0 rgba(80, 20, 70, .75);
    box-shadow: 0 0 0 3px #c43fae, 0 0 26px #ff7ad9b3, 0 10px 22px #000a;
    transform: rotate(1.5deg);
    cursor: pointer;
    animation: fuwa-buy-bob 3s ease-in-out infinite;
    transition: filter .12s ease;
  }
  .bonus-buy-big img { width: 72%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 6px #0008); pointer-events: none; }
  .bonus-buy-big b { font-size: clamp(26px, 2.4vw, 34px); line-height: .95; white-space: nowrap; }
  .bonus-buy-big small { display: block; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.1; color: #fff4fb; }
  .bonus-buy-big .bb-from { margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #9b2c86; text-shadow: none; font-size: clamp(15px, 1.2vw, 18px); }
  .bonus-buy-big:hover:not(:disabled) { filter: brightness(1.08); }
  .bonus-buy-big:active:not(:disabled) { transform: rotate(1.5deg) scale(.97); }
  .bonus-buy-big:disabled { animation: none; filter: saturate(.5) brightness(.8); cursor: default; }
}
@keyframes fuwa-buy-bob {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(-5px); }
}
/* short landscape (phones on their side, the embed under the site bar): a smaller card, then no art */
@media (orientation: landscape) and (min-width: 760px) and (min-aspect-ratio: 13/10) and (max-height: 559px) {
  .bonus-buy-big { width: 128px; padding: 8px 8px 10px; bottom: calc(var(--hud-h) + 14px); border-radius: 14px; }
  .bonus-buy-big img { width: 54%; }
  .bonus-buy-big b { font-size: 23px; }
  .bonus-buy-big small { font-size: 13px; }
  .bonus-buy-big .bb-from { font-size: 14px; }
}
@media (orientation: landscape) and (min-width: 760px) and (max-height: 340px) {
  .bonus-buy-big img { display: none; }
}