/* Floralia — แพ็กเด้ง (pop-up offers, 2026-10-19: js/offers.js). One small card in the HUD's obsidian + gold, over the game
   at a safe moment (or over the pack shop from its "ข้อเสนอพิเศษ" tab): what happened, the pack, its things, the struck
   regular price, the price, one big buy button; the countdown and the two small ways out under it. Crisp numbers, no soft
   glow round text (a 1px dark ring at most). */
#offerpop { position: fixed; inset: 0; z-index: 965; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 8, 0.38); font-family: 'Mali', sans-serif; color: #f2ead6; user-select: none; animation: ofpFade 0.18s ease-out both; }
#offerpop.in-shop { background: rgba(5, 4, 8, 0.6); }
#offerpop[hidden] { display: none !important; }
#offerpop button { font-family: 'Mali', sans-serif; }
@keyframes ofpFade { from { opacity: 0; } to { opacity: 1; } }
#offerpop .ofp-card { position: relative; width: min(420px, calc(100vw - 20px)); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 18px 14px; border-radius: 18px;
  background: linear-gradient(#2c241a, #15110d 70%); box-shadow: inset 0 0 0 2px rgba(242, 198, 106, 0.8), 0 22px 50px rgba(0, 0, 0, 0.65); animation: ofpIn 0.26s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes ofpIn { from { transform: translateY(14px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #offerpop, #offerpop .ofp-card { animation: none; } }

/* ---- the ribbon: "ข้อเสนอพิเศษ" + what happened */
#offerpop .ofp-top { margin: 0 -18px; padding: 12px 52px 10px 18px; display: flex; flex-direction: column; gap: 2px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #7a1f17, #b8352a 55%, #7a1f17); box-shadow: inset 0 -1px 0 rgba(255, 210, 140, 0.5); }
#offerpop .ofp-top i { font: 700 13px/1.2 Mali, sans-serif; font-style: normal; letter-spacing: 1px; color: #ffd9a0; }
#offerpop .ofp-top b { font: 800 19px/1.3 Mali, sans-serif; color: #fff3dc; }
#offerpop .ofp-card.done .ofp-top { background: linear-gradient(90deg, #1f5a2a, #2f8a2a 55%, #1f5a2a); }
#offerpop .ofp-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 220, 160, 0.9); background: rgba(20, 10, 8, 0.6); color: #ffe6b8; font: 700 15px/1 sans-serif; cursor: pointer; }
#offerpop .ofp-x:hover, #offerpop .ofp-x:focus-visible { background: #3a1a12; }

/* ---- the pack: picture, name, one line, the discount */
#offerpop .ofp-hero { display: flex; align-items: center; gap: 12px; }
#offerpop .ofp-art { position: relative; flex: none; width: 92px; height: 80px; background: radial-gradient(circle at 50% 58%, rgba(255, 214, 120, 0.3), rgba(255, 214, 120, 0) 66%); }
#offerpop .ofp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
#offerpop .ofp-hero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#offerpop .ofp-hero b { font: 800 19px/1.25 Mali, sans-serif; color: #fff0cc; }
#offerpop .ofp-hero small { font: 500 13px/1.45 Mali, sans-serif; color: #c4b89c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#offerpop .ofp-off { flex: none; align-self: flex-start; margin-top: 4px; padding: 4px 9px; border-radius: 9px; background: linear-gradient(#ff6a5a, #c3302a); color: #fff; font: 800 18px/1.1 Fredoka, Mali, sans-serif; font-style: normal; transform: rotate(4deg); }

/* ---- the things (each opens its info card) */
#offerpop .ofp-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.25); }
#offerpop .pk-it { position: relative; display: inline-flex; cursor: pointer; border-radius: 8px; }
#offerpop .pk-it .tslot { width: 52px; height: 52px; }
#offerpop .pk-it:hover, #offerpop .pk-it:focus-visible { filter: brightness(1.15); outline: none; transform: translateY(-1px); }
#offerpop .pk-n { position: absolute; z-index: 3; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 5px; background: rgba(8, 7, 10, 0.88); color: #fff; font: 700 12px/1.45 Fredoka, Mali, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }

/* ---- the price: regular (struck) · the offer's */
#offerpop .ofp-deal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
#offerpop .ofp-deal span { font: 600 13.5px Mali, sans-serif; color: #a39a86; }
#offerpop .ofp-deal s { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: #d9cfb8; font: 700 16px Fredoka, Mali, sans-serif; text-decoration-color: rgba(255, 106, 90, 0.85); text-decoration-thickness: 1.5px; }
#offerpop .ofp-deal b { display: flex; align-items: center; gap: 6px; font: 800 28px/1 Fredoka, Mali, sans-serif; color: #a8ecff; font-variant-numeric: tabular-nums; }
#offerpop .ofp-deal img { width: 26px; height: 26px; object-fit: contain; }
#offerpop .ofp-deal s img { width: 18px; height: 18px; }

/* ---- the one action, then the clock and the ways out */
#offerpop .ofp-buy { height: 52px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(#f6d684, #c8902f); color: #2a1a06; box-shadow: inset 0 0 0 1px #ffe9a8, 0 4px 12px rgba(0, 0, 0, 0.4); font: 800 21px/1 Mali, sans-serif; }
#offerpop .ofp-buy:hover:not(:disabled), #offerpop .ofp-buy:focus-visible { filter: brightness(1.1); }
#offerpop .ofp-buy:disabled { cursor: default; background: #2a2620; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); color: #d3a99c; font-size: 17px; }
#offerpop .ofp-card:not(.armed) .ofp-buy { filter: saturate(0.6); }
#offerpop .ofp-foot { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font: 600 13px/1.4 Mali, sans-serif; color: #cfc3a6; }
#offerpop .ofp-cd { margin-right: auto; }
#offerpop .ofp-cd b { color: #ffb48a; font: 700 14px Fredoka, Mali, sans-serif; font-variant-numeric: tabular-nums; }
#offerpop .ofp-later, #offerpop .ofp-mute { padding: 4px 6px; border: 0; background: none; cursor: pointer; font: 700 13.5px Mali, sans-serif; color: #f2c66a; text-decoration: underline; text-underline-offset: 3px; }
#offerpop .ofp-mute { color: #a39a86; font-weight: 600; }
#offerpop .ofp-later:hover, #offerpop .ofp-mute:hover { color: #ffe3a1; }
#offerpop .ofp-note { margin: 0; font: 600 13.5px/1.5 Mali, sans-serif; color: #e6dcc4; text-align: center; }
#offerpop .ofp-card.done { padding-top: 0; }
#offerpop .ofp-card.done .ofp-buy { margin-top: 2px; }

/* ---- a phone */
@media (max-width: 480px) {
  #offerpop { padding: 10px; }
  #offerpop .ofp-card { padding: 0 12px 12px; gap: 8px; }
  #offerpop .ofp-top { margin: 0 -12px; padding: 10px 48px 8px 12px; }
  #offerpop .ofp-top b { font-size: 17px; }
  #offerpop .ofp-art { width: 74px; height: 64px; }
  #offerpop .ofp-hero b { font-size: 17px; }
  #offerpop .pk-it .tslot { width: 44px; height: 44px; }
  #offerpop .ofp-deal b { font-size: 24px; }
}

/* ---- the pack shop's tab: the offer cards (js/packshop.js frame) */
#packshop .of-card .pk-rib.hot { max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
#packshop .of-card { box-shadow: inset 0 0 0 2px rgba(255, 120, 90, 0.75), 0 6px 18px rgba(0, 0, 0, 0.4); }
#packshop .pk-buy .of-was { margin-right: 6px; color: #d6ecf8; font: 700 16px Fredoka, Mali, sans-serif; opacity: 0.85; text-decoration-color: rgba(255, 138, 122, 0.9); text-decoration-thickness: 1.5px; }