/* AdvantageLife shared UI layer: 3D buttons, chips, odometer, toasts, coins.
   One source for the bolder look approved by Steve on 8 Oct 2026 (mockup v2).
   Every class is prefixed alx- so it can be dropped into any existing page
   without colliding with that page's own styles. Pair with /static/al/ui.js. */
:root{
  --alx-navy:#0a1f52;--alx-navy2:#12388f;--alx-navy-deep:#061538;
  --alx-red:#c8102e;--alx-red2:#ff2743;
  --alx-green:#16a34a;--alx-green2:#22c55e;--alx-gold:#f5b301;
  --alx-ink:#0d1230;--alx-muted:#4a5578;--alx-line:#dfe5f3;
}

/* ---- 3D buttons ---- */
.alx-btn{--c1:var(--alx-red2);--c2:var(--alx-red);--edge:#8a0b20;--glow:rgba(200,16,46,.5);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 28px;border:0;border-radius:18px;cursor:pointer;isolation:isolate;
  font:900 18px/1.15 'Inter',system-ui,sans-serif;color:#fff;text-decoration:none;text-align:center;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:0 7px 0 var(--edge),0 16px 28px -8px var(--glow),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.12);
  transition:transform .1s,box-shadow .1s,filter .2s;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.alx-btn::before{content:"";position:absolute;left:8%;right:8%;top:4px;height:42%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));z-index:-1;pointer-events:none}
.alx-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-130%);animation:alx-shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes alx-shine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.alx-btn:hover{filter:brightness(1.08) saturate(1.1);transform:translateY(-2px);box-shadow:0 9px 0 var(--edge),0 20px 32px -8px var(--glow),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.12)}
.alx-btn:active{transform:translateY(6px);box-shadow:0 1px 0 var(--edge),0 6px 12px -6px var(--glow),inset 0 2px 0 rgba(255,255,255,.3)}
.alx-btn:focus-visible{outline:3px solid #93c5fd;outline-offset:4px}
.alx-btn[disabled]{filter:grayscale(.6) opacity(.6);cursor:not-allowed;transform:none}
.alx-btn.green{--c1:#34d36a;--c2:var(--alx-green);--edge:#0f6b31;--glow:rgba(22,163,74,.5)}
.alx-btn.navy{--c1:#2b5bd0;--c2:var(--alx-navy);--edge:#030c28;--glow:rgba(10,31,82,.55)}
.alx-btn.white{--c1:#fff;--c2:#e6ecfa;--edge:#aebbdc;--glow:rgba(10,31,82,.28);color:var(--alx-navy)}
.alx-btn.white::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%)}
.alx-btn.big{min-height:66px;font-size:20px;padding:0 34px;border-radius:20px}
.alx-btn.wide{display:flex;width:100%}
.alx-btn.pulse{animation:alx-pulse 2.2s ease-in-out infinite}
@keyframes alx-pulse{0%,100%{box-shadow:0 7px 0 var(--edge),0 16px 28px -8px var(--glow),0 0 0 0 rgba(255,39,67,.6),inset 0 2px 0 rgba(255,255,255,.4)}
 60%{box-shadow:0 7px 0 var(--edge),0 16px 28px -8px var(--glow),0 0 0 18px rgba(255,39,67,0),inset 0 2px 0 rgba(255,255,255,.4)}}
.alx-btn .ar{transition:transform .2s}.alx-btn:hover .ar{transform:translateX(5px)}
.alx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:alx-rip .6s ease-out forwards;pointer-events:none}
@keyframes alx-rip{to{transform:scale(4);opacity:0}}
@media(max-width:520px){.alx-btn{width:100%}}

/* ---- chips (package pickers) ---- */
.alx-chips{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.alx-chip{flex:none;min-height:52px;padding:0 18px;border-radius:16px;border:2px solid var(--alx-line);background:#fff;color:var(--alx-navy);
  font:900 16px 'Inter',system-ui,sans-serif;cursor:pointer;box-shadow:0 5px 0 var(--alx-line);transition:transform .1s,box-shadow .1s,background .2s;-webkit-tap-highlight-color:transparent}
.alx-chip small{display:block;font-size:12.5px;font-weight:700;color:var(--alx-muted)}
.alx-chip:active{transform:translateY(4px);box-shadow:0 1px 0 var(--alx-line)}
.alx-chip[aria-pressed="true"]{background:linear-gradient(180deg,#2b5bd0,var(--alx-navy));color:#fff;border-color:var(--alx-navy);box-shadow:0 5px 0 #030c28}
.alx-chip[aria-pressed="true"] small{color:#b9c8f2}

/* ---- tags ---- */
.alx-tag{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.alx-tag.red{background:#ffe4e8;color:var(--alx-red)}.alx-tag.green{background:#dcfce7;color:#0f6b31}.alx-tag.navy{background:#e3e9fb;color:var(--alx-navy)}
.alx-tag.onDark{background:rgba(255,39,67,.95);color:#fff}

/* ---- 3D icon tiles ---- */
.alx-ico{width:var(--s,64px);height:var(--s,64px);border-radius:calc(var(--s,64px)*.26);flex:none;display:block;background:var(--alx-navy);
  box-shadow:0 2px 0 rgba(255,255,255,.18) inset,0 14px 24px -12px rgba(6,21,56,.7)}
.alx-ico.float{animation:alx-float 4.5s ease-in-out infinite}
@keyframes alx-float{50%{transform:translateY(-10px) rotate(-3deg)}}
.alx-ico.bump{animation:alx-bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes alx-bump{40%{transform:scale(1.18) rotate(-6deg)}}

/* ---- rolling odometer ---- */
.alx-odo{display:flex;align-items:flex-end;font-variant-numeric:tabular-nums;line-height:1;height:1em;overflow:hidden}
.alx-odo .col{display:inline-block;height:1em;overflow:hidden}
.alx-odo .col>span{display:block;transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.alx-odo .col i{display:block;height:1em;font-style:normal}

/* ---- meter ---- */
.alx-meter{height:16px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.alx-meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--alx-green),#4ade80);transition:width .9s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.alx-meter i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:alx-shine 2.4s linear infinite}

/* ---- toast + coins ---- */
.alx-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);z-index:9000;background:var(--alx-navy);color:#fff;font:900 17px 'Inter',system-ui,sans-serif;padding:16px 22px;border-radius:18px;
  box-shadow:0 20px 40px -14px rgba(6,21,56,.7);transition:transform .45s cubic-bezier(.2,1.4,.4,1);max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.alx-toast.show{transform:translate(-50%,0)}
.alx-coin{position:fixed;left:0;top:0;z-index:8999;width:30px;height:30px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff6c2,#f5b301 45%,#b07800 100%);box-shadow:0 0 12px rgba(245,179,1,.8);display:grid;place-items:center;font:900 15px 'Inter',sans-serif;color:#7a5300}
.alx-sound{min-height:40px;padding:0 14px;border-radius:12px;border:2px solid var(--alx-line);background:#fff;color:var(--alx-navy);font:800 14px 'Inter',system-ui,sans-serif;cursor:pointer}

/* ---- entrance ---- */
.alx-reveal{animation:alx-rise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes alx-rise{from{transform:translateY(18px)}}

@media (prefers-reduced-motion:reduce){
  .alx-btn,.alx-btn::after,.alx-ico,.alx-reveal,.alx-meter i::after,.alx-odo .col>span{animation:none!important;transition:none!important}
}