/* Claim page v2: header buttons, live feed, stack meter, progress bar, and 3 airdrop-card options (A mint / B electric / C bubblegum) */
.topl { display: flex; align-items: center; gap: 8px; }
.icobtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; place-items: center; flex: none; }
.icobtn svg { width: 16px; height: 16px; }
.brand { text-decoration: none; color: inherit; }

.live-k { display: flex; align-items: center; gap: 8px; color: #00F0B5; }
.live-k i { width: 8px; height: 8px; border-radius: 50%; background: #00F0B5; box-shadow: 0 0 10px #00F0B5; animation: livePulse 1.3s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .3; transform: scale(.7); } }

/* live feed: real claims drop in at the top */
.feed { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; z-index: 40; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 999px; background: rgba(18,18,22,.92); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 40px -16px rgba(0,0,0,.9); font-size: 13.5px; color: #E5E5EA; transform: translateY(-140%); opacity: 0; transition: transform .5s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
.toast.in { transform: none; opacity: 1; }
.toast .gbot { width: 28px; height: 28px; flex: none; }
.toast b { color: #fff; font-weight: 700; }
.toast em { font-style: normal; color: #00F0B5; font-weight: 600; }
.toast small { margin-left: auto; color: #6E6E73; font-size: 11.5px; white-space: nowrap; padding-left: 6px; }

/* stack meter inside the card */
.g-stack { grid-column: 1 / -1; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.gst-h { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: #D1D1D6; }
.gst-h b { color: #fff; }
.gst-h span { margin-left: auto; font: 600 13px "JB Mono", monospace; color: #fff; }
.gst-bar { height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.gst-bar i { display: block; height: 100%; width: 2%; border-radius: inherit; background: linear-gradient(90deg, #00F0B5, #2F9BFF); transition: width 1s cubic-bezier(.2,1,.3,1); position: relative; overflow: hidden; }
.gst-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shine 1.8s linear infinite; }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.gst-s { margin-top: 7px; font-size: 12.5px; color: #A1A1A6; }

/* ---------- the airdrop card: compact, live parachute Grokky, 3 colour options ---------- */
.gift.gift-a, .gift.gift-b, .gift.gift-c, .gift.gift-x { grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 14px 16px 14px 12px; margin: 0 0 16px; border: 0; border-radius: 22px; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--bg); box-shadow: 0 24px 60px -30px var(--glow); }
.gift.gift-a::before, .gift.gift-b::before, .gift.gift-c::before, .gift.gift-x::before { display: block; content: ""; position: absolute; inset: 0; z-index: -1; padding: 0; -webkit-mask: none; mask: none; border-radius: inherit;
  background: radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.28), transparent 60%); }
.gift.gift-a::after, .gift.gift-b::after, .gift.gift-c::after, .gift.gift-x::after { display: none; }
.gift-a { --bg: linear-gradient(135deg, #7BFFE3 0%, #00F0B5 45%, #00BFD8 100%); --ink: #00140F; --soft: rgba(0,20,15,.68); --glow: rgba(0,240,181,.55); --s1: #FF3D8F; --s2: #2F9BFF; --bar: #00140F; }
.gift-b { --bg: linear-gradient(135deg, #3AA0FF 0%, #6B5CFF 55%, #B04DFF 100%); --ink: #fff; --soft: rgba(255,255,255,.8); --glow: rgba(107,92,255,.6); --s1: #FFD60A; --s2: #00F0B5; --bar: #fff; }
.gift-c { --bg: linear-gradient(135deg, #FF7AB6 0%, #FF3D8F 48%, #C13DFF 100%); --ink: #fff; --soft: rgba(255,255,255,.82); --glow: rgba(255,61,143,.55); --s1: #00F0B5; --s2: #FFD60A; --bar: #fff; }
/* X (default): the card keeps flowing mint -> electric -> bubblegum. Dark ink reads on all three. */
@property --k1 { syntax: "<color>"; inherits: true; initial-value: #7BFFE3; }
@property --k2 { syntax: "<color>"; inherits: true; initial-value: #00F0B5; }
@property --k3 { syntax: "<color>"; inherits: true; initial-value: #00BFD8; }
.gift-x { --bg: linear-gradient(135deg, var(--k1) 0%, var(--k2) 50%, var(--k3) 100%); --ink: #07070F; --soft: rgba(7,7,15,.7); --glow: var(--k2); --s1: #FF3D8F; --s2: #2F9BFF; --bar: #07070F;
  animation: giftFlow 12s ease-in-out infinite; }
@keyframes giftFlow {
  0%, 100% { --k1: #7BFFE3; --k2: #00F0B5; --k3: #00BFD8; }
  33% { --k1: #8CCBFF; --k2: #8F84FF; --k3: #C68CFF; }
  66% { --k1: #FFA3CE; --k2: #FF6FAE; --k3: #D98CFF; }
}
.gift .gart { grid-row: 1; width: clamp(76px, 21vw, 92px); aspect-ratio: 120 / 150; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, #1E1E26, #050507); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); align-self: center; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ch-s1 { fill: var(--s1); } .ch-s2 { fill: var(--s2); }
.ch-sway { transform-box: view-box; transform-origin: 60px 4px; animation: chSway 3.6s ease-in-out infinite; will-change: transform; }
@keyframes chSway { 0%, 100% { transform: translateY(-2px) rotate(-6deg); } 50% { transform: translateY(3px) rotate(6deg); } }
.ch-boop { transform-box: view-box; transform-origin: 60px 100px; }
.ch-boop.on { animation: chBoop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes chBoop { 30% { transform: scale(1.12, .9); } 60% { transform: scale(.95, 1.06) translateY(-4px); } }
.gift .g-main { min-width: 0; }
.gift .gl { color: var(--soft); font-size: 10.5px; }
.gift .gv { color: var(--ink); background: none; -webkit-background-clip: border-box; background-clip: border-box; font-size: clamp(34px, 10vw, 46px); margin: 4px 0 2px; }
.gift .gsym { color: var(--ink); font-size: clamp(15px, 4.4vw, 18px); }
.gift .gs { color: var(--soft); font-size: 12.5px; margin-top: 5px; }
.gift .g-stack { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.gift .gst-h, .gift .gst-h b, .gift .gst-h span { color: var(--ink); font-size: 13px; }
.gift .gst-bar { height: 7px; margin-top: 6px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.gift .gst-bar i { background: var(--bar); }
.gift .gst-s { color: var(--soft); font-size: 12px; margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .ch-sway, .gift-x { animation: none; } }

/* ---------- progress bar ---------- */
.claimbox { margin-top: 26px; }
.prog { position: sticky; top: 0; z-index: 5; padding: 12px 0 10px; background: linear-gradient(#000 70%, rgba(0,0,0,0)); }
.prog-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.prog-h b { font: 700 16px "Inter Tight", sans-serif; }
.prog-h span { font: 600 14px "JB Mono", monospace; color: #00F0B5; }
.prog-bar { position: relative; height: 12px; margin-top: 8px; border-radius: 999px; background: #1A1A1E; overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #00F0B5, #2F9BFF 50%, #9D5CFF); transition: width .8s cubic-bezier(.3,1.3,.5,1); position: relative; overflow: hidden; }
.prog-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: shine 1.6s linear infinite; }
.prog.done .prog-h span { color: #FFD60A; }

/* claimed card */
/* share your spot: personal card + a button that begs to be pressed (glow pulse + shine + a little wiggle, no blinking) */
.sharebox { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.sh-h { font: 700 15px "Inter Tight", sans-serif; color: #fff; }
.sh-prev { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 10px; border-radius: 14px; background: #0B0B0E; border: 1px solid rgba(255,255,255,.12); object-fit: cover; transition: opacity .25s; }
.sh-prev.loading { opacity: .4; }
.sh-msg { margin: 8px 2px 0; font-size: 13px; color: #C7C7CC; min-height: 1.3em; }
.sh-row { display: flex; gap: 8px; margin-top: 10px; }
.sharebtn { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer;
  background: linear-gradient(90deg, #00F0B5, #2F9BFF, #9D5CFF, #FF3D8F, #00F0B5); background-size: 300% 100%; color: #050508; font: 800 17px "Inter Tight", sans-serif; letter-spacing: -.01em;
  animation: shFlow 6s linear infinite, shGlow 1.8s ease-in-out infinite, shWiggle 4s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.sharebtn svg { width: 18px; height: 18px; }
.sharebtn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: shShine 2.6s ease-in-out infinite; }
.sharebtn:active { transform: scale(.97); }
@keyframes shFlow { to { background-position: 300% 0; } }
@keyframes shGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,240,181,.55), 0 10px 30px -12px rgba(157,92,255,.8); } 50% { box-shadow: 0 0 0 9px rgba(0,240,181,0), 0 10px 40px -8px rgba(255,61,143,.9); } }
@keyframes shShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes shWiggle { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -2.5deg; } 92% { rotate: 2.5deg; } 95% { rotate: -1.5deg; } 98% { rotate: 1deg; } }
.sh-shuffle { width: 52px; min-height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: #141418; font-size: 20px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sharebtn, .sharebtn::after { animation: none; } }

.foot a { color: #fff; }

@media (max-width: 420px) {
  .toast { font-size: 12.5px; }
}