@import url('./bet-menu.css');
@import url('./auto-menu.css');
@import url('./settings.css');
@import url('./bonus-cards.css');
@import url('./confirm.css');

@font-face { font-family: Pricedown; src: url('./fonts/pricedown.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Anton; src: url('./fonts/anton.ttf') format('truetype'); font-display: swap; }
body.purge-ui { --game-font-family: 'Pricedown', sans-serif; --bonus-recommend-tag-scale: 1.4; --bonus-recommend-tag-offset-x: 2px; --bonus-recommend-tag-offset-y: 5px; }
body.purge-ui .fade-wrap { inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
body.purge-ui .purge-hud { position: absolute; inset: 0; font-family: var(--game-font-family); pointer-events: none; --hover-color: #fd905d; }
body.purge-ui .purge-hud *, body.purge-ui #purge-modals * { box-sizing: border-box; }
body.purge-ui .purge-shade { position: absolute; inset: 0; background: radial-gradient(circle at bottom right, rgb(0 0 0 / 90%) 0, rgb(0 0 0 / 75%) 12.8%, rgb(0 0 0 / 47%) 24.8%, rgb(0 0 0 / 18%) 33.6%, transparent 40%); pointer-events: none; }
body.purge-ui .purge-button { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; color: white; cursor: pointer; pointer-events: auto; border-radius: 50%; touch-action: manipulation; }
body.purge-ui .purge-button:disabled { cursor: default; }
body.purge-ui .purge-button:disabled .purge-icon, body.purge-ui .purge-button:disabled .purge-rim { opacity: .3; }
body.purge-ui .purge-button:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }
body.purge-ui .purge-button-fill, body.purge-ui .purge-rim { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: var(--frame-height); width: var(--frame-height); pointer-events: none; }
body.purge-ui .purge-button-fill { background: rgb(21 23 26 / 40%); clip-path: polygon(46.48% .5%, 53.52% .5%, 99.5% 46.48%, 99.5% 53.52%, 53.52% 99.5%, 46.48% 99.5%, .5% 53.52%, .5% 46.48%); }
body.purge-ui .purge-rim { background: #424242; mask: url('./gui/btn_small.webp') center / 100% 100% no-repeat; transition: background 180ms, filter 180ms; }
body.purge-ui .purge-button.big .purge-rim {
  width: calc(var(--frame-height) * 670 / 621);
  background: white;
  mask-image: url('./gui/btn_big.webp'), var(--rim-fade);
  mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect;
  /* Keep the main PNG contour; exclude its detached outside strokes.
     A small allowance preserves antialiasing as the HUD scales. */
  clip-path: polygon(3.2% 46%, 3.35% 45.7%, 6.2% 42.45%, 21.2% 25.4%, 25.55% 20.7%, 45.95% -.2%, 46.2% -.35%, 53.55% -.35%, 53.85% -.2%, 73.45% 19.6%, 79.75% 26.45%, 96.3% 45.55%, 96.45% 45.9%, 96.45% 53.75%, 96.3% 54.05%, 93.75% 57%, 79.3% 73.4%, 73.75% 79.4%, 53.85% 100.15%, 53.55% 100.35%, 46.4% 100.35%, 46.1% 100.15%, 25.1% 78.55%, 22.1% 75.3%, 3.35% 54.05%, 3.2% 53.75%);
}
body.purge-ui .purge-button.big .purge-button-fill { width: calc(var(--frame-height) * 670 / 621); clip-path: polygon(46.42% .48%, 53.58% .48%, 95.82% 46.14%, 95.82% 53.86%, 53.58% 99.52%, 46.42% 99.52%, 4.18% 53.86%, 4.18% 46.14%); }
body.purge-ui .purge-button.shop .purge-rim { transform: translate(-50%, -50%) scaleX(-1); }
body.purge-ui .purge-button:not(:disabled):hover .purge-rim { background: var(--hover-color); filter: drop-shadow(0 0 5px var(--hover-color)); }
body.purge-ui .purge-icon { position: absolute; left: 50%; top: 50%; width: var(--icon-size); height: var(--icon-size); transform: translate(-50%, -50%); object-fit: fill; pointer-events: none; transition: scale 180ms; }
body.purge-ui .shop .purge-icon { width: calc(var(--icon-size) * 519 / 438); }
body.purge-ui .purge-button:not(:disabled):hover .purge-icon { scale: 1.06; }
body.purge-ui .purge-button.turbo.active .purge-icon { filter: brightness(0) saturate(100%) invert(85%) sepia(51%) saturate(1244%) hue-rotate(62deg) brightness(101%) contrast(101%); }
body.purge-ui .purge-button.mode-active .purge-rim { background: #45ff5f; }
body.purge-ui .purge-button.mode-active .purge-button-fill { background: linear-gradient(90deg, transparent, rgb(30 175 61 / 56%)); }
body.purge-ui .mode-label { position: absolute; left: 50%; top: calc(50% + var(--frame-height) * .35); transform: translateX(-50%); width: calc(var(--frame-height) * .98); padding: .2em .4em; font-family: var(--game-font-family); font-size: calc(18px * var(--hud-scale)); line-height: 1; border: 1px solid #45ff5f; border-radius: 999px; background: rgb(17 21 27 / 67%); }
body.purge-ui .auto-counter, body.purge-ui .bonus-counter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: var(--game-font-family); font-size: calc(56px * var(--hud-scale)); }
body.purge-ui .purge-stat { position: absolute; transform: translateX(-50%); color: white; font-family: var(--game-font-family); text-align: center; line-height: 1.1; border: 0; padding: 0; background: transparent; pointer-events: none; }
body.purge-ui .purge-stat span { display: block; color: #ff8a00; font-size: calc(30px * var(--hud-scale)); font-weight: 700; }
body.purge-ui .purge-stat strong { display: block; font-size: calc(36px * var(--hud-scale)); font-weight: 900; white-space: nowrap; line-height: 1; }
body.purge-ui .purge-stat.bet { pointer-events: auto; cursor: pointer; }
body.purge-ui .purge-stat.bet:disabled { cursor: default; }
body.purge-ui .purge-stat.bet:focus-visible { outline: 1px solid white; }
body.purge-ui #purge-modals { font-family: var(--game-font-family); }
body.purge-ui .purge-layer, body.purge-ui .purge-modal { position: fixed; inset: 0; z-index: 160; pointer-events: auto; font-family: var(--game-font-family); }
body.purge-ui .purge-layer .bet-menu-container { position: absolute; }
body.purge-ui .purge-modal { display: flex; justify-content: center; align-items: center; background: rgb(0 0 0 / 82%); padding: 24px; }
body.purge-ui .purge-close { position: absolute; top: 18px; right: 20px; width: 36px; height: 36px; padding: 7px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 50%; background: rgb(0 0 0 / 50%); cursor: pointer; z-index: 5; }
body.purge-ui .purge-close img { width: 100%; height: 100%; object-fit: contain; }
body.purge-ui .purge-close:hover { background: #424242; }
body.purge-ui #purgeInfoLayer .info-panel { position: absolute; }
body.purge-ui #purgeInfoLayer .title { font-family: var(--game-font-family); }
body.purge-ui #purgeBonusLayer .purge-shop-content { width: min(1250px, 96vw); max-height: calc(100dvh - 80px); overflow: auto; font-size: clamp(12px, 1.45vw, 22px); padding: 15px 8px; }
body.purge-ui #purgeBonusLayer .bonus-card-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; align-items: stretch; gap: 1em; }
body.purge-ui #purgeBonusLayer .bonus-card-wrap { flex: 0 0 calc((100% - 3em) / 4); min-width: 0; aspect-ratio: 1 / 1.6; --bonus-card-title-font-scale: 1.15; }
body.purge-ui #purgeBonusLayer .volatility-dot img { width: 100%; height: 100%; object-fit: contain; }
body.purge-ui .purge-shop-bet { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 20px auto 0; padding: 12px 20px; width: fit-content; max-width: 100%; border-radius: 16px; background: rgb(9 13 14 / 92%); font-size: 18px; color: white; }
body.purge-ui .purge-shop-bet button { width: 28px; height: 28px; background: transparent; border: 0; cursor: pointer; padding: 0; }
body.purge-ui .purge-shop-bet img { width: 100%; height: 100%; }
body.purge-ui #purgeConfirmLayer .confirm-shell { width: min(420px, 80vw); height: min(670px, 86dvh); transform: none; }
body.purge-ui #purgeConfirmLayer .confirm-card-top-back { height: 34%; flex-shrink: 0; }
body.purge-ui #purgeConfirmLayer .header-image { width: 100%; height: 100%; object-fit: cover; }
body.purge-ui #purgeConfirmLayer .confirm-card-wrap { flex: 1; min-height: 0; }
/* Clear the legacy CC3 confirmation styles before showing donor SVG plates. */
body.purge-ui #purgeConfirmLayer .confirm-card-wrap { margin-top: 0; border-radius: 0; }
body.purge-ui #purgeConfirmLayer .header-image { border-radius: 0; }
body.purge-ui #purgeConfirmLayer .volatility-dot { clip-path: none; background: transparent; }
body.purge-ui #purgeConfirmLayer .volatility-dot.off { background: transparent; }
body.purge-ui #purgeConfirmLayer .volatility-dot img { width: 100%; height: 100%; object-fit: contain; }
body.purge-ui #purgeConfirmLayer .mode-badge { min-height: 60px; }
body.purge-ui .purge-rules-panel { width: min(1100px, 96vw); height: 90dvh; overflow: auto; background: rgb(10 10 10 / 95%); padding: 22px; border: 1px solid #424242; border-radius: 12px; }
body.purge-ui #purgeRulesLayer .info-content { font-family: system-ui, sans-serif; min-width: 0; width: 100%; }
body.purge-ui #purgeRulesLayer .info-section { min-width: 0; width: 100%; overflow-wrap: anywhere; }
body.purge-ui #purgeRulesLayer .info-section h1, body.purge-ui #purgeRulesLayer .info-section h2 { font-family: var(--game-font-family); }
body.purge-ui #purgeRulesLayer .FeatureImage, body.purge-ui #purgeRulesLayer img { max-width: 100%; height: auto; }
body.purge-ui #purgeRulesLayer .LineImageContainer { max-width: 100%; flex-wrap: wrap; }
body.purge-ui #message-bar { top: 5em; font-family: var(--game-font-family); }
@media (max-aspect-ratio: 4/5) {
  body.purge-ui .purge-shade { background: linear-gradient(0deg, rgb(0 0 0 / 60%), transparent 30%); }
  body.purge-ui #purgeBonusLayer .bonus-card-panel { display: grid; grid-template-columns: minmax(0, 232px); justify-content: center; gap: 16px; padding-bottom: 70px; }
  body.purge-ui #purgeBonusLayer .purge-shop-content { max-height: calc(100dvh - 80px); font-size: 14px; scrollbar-width: thin; }
  body.purge-ui #purgeBonusLayer .bonus-card-wrap { aspect-ratio: 1 / 1.3; }
  body.purge-ui .purge-shop-bet { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: 13px; gap: 8px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { body.purge-ui .purge-button * { transition: none !important; } }

/* LoRA wordmarks stay intact inside responsive feature cards. */
body.purge-ui .mode-badge:has(.lora-mode-wordmark) { background: #0b0716; border: 1px solid #eb2c94; padding: .15em .3em; }
body.purge-ui .lora-mode-wordmark { display: block; width: 100%; height: 100%; max-height: 74px; object-fit: contain; }

body.purge-ui #purgeBonusLayer .mode-badge:has(.lora-mode-wordmark), body.purge-ui #purgeConfirmLayer .mode-badge:has(.lora-mode-wordmark) { padding: 2px 6px; }
/* Keep generated lettering readable on phones and portrait tablets. */
@media (max-aspect-ratio: 4/5) and (max-width: 599px) {
  body.purge-ui #purgeBonusLayer .bonus-card-panel { grid-template-columns: minmax(0, min(310px, 84vw)); }
}
@media (max-aspect-ratio: 4/5) and (min-width: 600px) {
  body.purge-ui #purgeBonusLayer .bonus-card-panel { grid-template-columns: repeat(2, minmax(0, 320px)); }
}
@media (max-aspect-ratio: 4/5) and (min-width: 820px) {
  body.purge-ui #purgeBonusLayer .bonus-card-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}