/* The offer popup on arrival (client/offers.js) */
.of-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(6,8,6,.72); animation: ofIn .22s ease-out; }
.of-ov.out { animation: ofOut .2s ease-in forwards; }
@keyframes ofIn { from { opacity: 0; } } @keyframes ofOut { to { opacity: 0; } }
.of-card { position: relative; overflow: hidden; width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; padding: 34px 18px 16px; border-radius: 20px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, #6a3a1a, #241a10 55%, #120e0a); border: 2px solid #c8892f; box-shadow: 0 0 0 4px #2a1a08, 0 18px 50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,150,.25);
  animation: ofPop .35s cubic-bezier(.2,1.4,.4,1); color: #f6e6c2; }
.of-card.starter { border-color: #ffd27a; }
@keyframes ofPop { from { transform: scale(.8); opacity: 0; } }
.of-rays { position: absolute; left: 50%; top: 70px; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(255,200,90,.5) 0 10deg, transparent 10deg 20deg); border-radius: 50%; mask: radial-gradient(circle, #000 20%, transparent 65%);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); animation: ofSpin 18s linear infinite; }
@keyframes ofSpin { to { transform: rotate(360deg); } }
.of-ribbon { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 18px; border-radius: 4px; background: linear-gradient(#e2502e, #a42612); color: #fff; font: 900 12px/1.2 system-ui; letter-spacing: .12em; box-shadow: 0 2px 0 #5a140a; }
.of-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font-size: 16px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.of-hero { position: relative; font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(255,170,60,.6)); animation: ofBob 2.4s ease-in-out infinite; }
@keyframes ofBob { 50% { transform: translateY(-5px); } }
.of-card h2 { position: relative; margin: 0; font: 900 26px/1.1 system-ui; color: #ffd27a; text-shadow: 0 2px 0 #3a1a04, 0 0 16px rgba(255,190,70,.4); }
.of-card p { position: relative; margin: 0; font-size: 14px; color: #e8d6b0; }
.of-tiles { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.of-tile { display: grid; justify-items: center; gap: 2px; min-width: 62px; padding: 8px 6px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,210,122,.35); }
.of-tile .ic { font-size: 26px; } .of-tile b { font: 900 14px/1 system-ui; color: #fff; }
.of-deal { position: relative; width: 100%; display: grid; gap: 8px; justify-items: center; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); }
.of-deal .nm { font-weight: 900; color: #ffd27a; }
.of-timer { position: relative; font-size: 13px; color: #e8d6b0; } .of-timer b { color: #ff9a5a; }
.of-buy { position: relative; min-width: 200px; min-height: 52px; border-radius: 14px; font: 900 22px/1 system-ui; color: #fff; text-shadow: 0 2px 0 #1f5e1d;
  background: linear-gradient(#7ad66a, #2f8a2c); border: 2px solid #1f5e1d; box-shadow: 0 4px 0 #164414, 0 0 18px rgba(120,220,100,.35); animation: ofPulse 1.6s ease-in-out infinite; }
.of-buy.sm { min-width: 140px; min-height: 42px; font-size: 18px; }
@keyframes ofPulse { 50% { transform: scale(1.04); } }
.of-later { position: relative; min-height: 32px; padding: 0 14px; background: none; border: 0; color: #b8a888; font-weight: 700; text-decoration: underline; }