/* ============================================================
   LEGENDARY VICTORY — Core design system
   Football-themed casual card game. RED identity on dark navy.
   ============================================================ */

:root{
  /* Brand red ramp */
  --red-900:#7d0d16;
  --red-700:#b51422;
  --red-600:#e01e2b;   /* primary */
  --red-500:#ff3b46;
  --red-400:#ff5a63;
  --red-glow:rgba(224,30,43,.55);

  /* Surfaces (dark navy / charcoal) */
  --bg-0:#070b16;
  --bg-1:#0b1020;
  --bg-2:#121a30;
  --bg-3:#18223c;
  --surface:#141c33;
  --surface-2:#1b2542;
  --surface-3:#243156;
  --card:#1d2745;
  --card-2:#222e52;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* Text */
  --tx-0:#ffffff;
  --tx-1:#e7ecf7;
  --tx-2:#aeb8d4;
  --tx-3:#7c88a9;

  /* Accents */
  --gold:#ffd66b;
  --gold-2:#f5b833;
  --green:#37d67a;
  --green-2:#1faa5a;
  --blue:#3aa0ff;
  --purple:#9b6bff;
  --cyan:#38e6d0;
  --coin:#ffcb3d;
  --gem:#57d3ff;

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:34px; --r-pill:999px;

  /* Shadows */
  --sh-1:0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 8px 22px rgba(0,0,0,.45);
  --sh-3:0 16px 40px rgba(0,0,0,.55);
  --sh-red:0 10px 26px rgba(224,30,43,.45);
  --sh-gold:0 8px 22px rgba(245,184,51,.35);

  /* Spacing */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:70px;

  --font: "Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--font);
  background:#05070f;
  color:var(--tx-1);
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
/* Icon/art sizing defaults — component rules below override these */
svg.ic{width:1.15em;height:1.15em;flex:none;}
svg.art{width:100%;height:100%;}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;}
input,select{font-family:inherit;}
::-webkit-scrollbar{width:0;height:0;}

/* ---------- Device frame ---------- */
#device{
  position:relative;
  width:100%;
  max-width:520px;
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:var(--bg-1);
  box-shadow:0 0 60px rgba(0,0,0,.6);
}
@media(min-width:560px){
  body{background:radial-gradient(1200px 800px at 50% -10%,#141c33,#05070f 70%);}
  #device{height:min(920px,100dvh);margin-top:calc((100dvh - min(920px,100dvh))/2);border-radius:26px;border:1px solid rgba(255,255,255,.06);}
}

/* ---------- Stadium background ---------- */
#stage-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(120% 80% at 50% -20%, #1b264a 0, transparent 60%),
  linear-gradient(180deg,#0d1730 0%, #0b1020 45%, #070b16 100%);}
.bg-pitch{position:absolute;inset:-10% -20% -10% -20%;opacity:.10;
  background-image:
    linear-gradient(90deg,transparent 49.6%,rgba(255,255,255,.6) 50%,transparent 50.4%),
    repeating-linear-gradient(180deg,transparent 0 46px,rgba(255,255,255,.16) 46px 92px);
  transform:perspective(600px) rotateX(56deg);transform-origin:50% 100%;}
.bg-pitch::after{content:"";position:absolute;left:50%;top:8%;width:130px;height:130px;margin-left:-65px;border:2px solid rgba(255,255,255,.35);border-radius:50%;}
.bg-lights{position:absolute;inset:0;background:
  radial-gradient(400px 200px at 15% 8%, rgba(255,255,255,.09), transparent 70%),
  radial-gradient(400px 200px at 85% 8%, rgba(255,255,255,.09), transparent 70%);}
.bg-glow{position:absolute;inset:0;background:
  radial-gradient(600px 380px at 50% 6%, var(--red-glow), transparent 62%);opacity:.30;}
body[data-theme-skin="theme_night"] .bg-glow{background:radial-gradient(600px 380px at 50% 6%, rgba(58,160,255,.5), transparent 62%);}
body[data-theme-skin="theme_champ"] .bg-glow{background:radial-gradient(600px 380px at 50% 6%, rgba(245,184,51,.55), transparent 62%);}

/* ---------- App root / screens ---------- */
#app-root{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;overflow:hidden;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;}
.screen__scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 12px) 16px calc(var(--nav-h) + var(--safe-b) + 16px);}
.screen--nonav .screen__scroll{padding-bottom:calc(var(--safe-b) + 20px);}
.screen-enter{animation:screenIn .34s cubic-bezier(.2,.9,.25,1);}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}

/* ---------- Top app bar ---------- */
.appbar{display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 12px) 14px 8px;position:relative;z-index:3;}
.appbar__title{font-size:19px;font-weight:800;letter-spacing:.3px;flex:1;text-align:center;}
.appbar__title small{display:block;font-size:11px;font-weight:600;color:var(--tx-3);letter-spacing:2px;text-transform:uppercase;}
.iconbtn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);box-shadow:var(--sh-1);flex:none;transition:transform .12s, background .2s;}
.iconbtn:active{transform:scale(.9);}
.iconbtn svg{width:22px;height:22px;}

/* ---------- Currency pills ---------- */
.wallet{display:flex;gap:8px;align-items:center;}
.pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);font-weight:800;font-size:14px;box-shadow:var(--sh-1);white-space:nowrap;}
.pill svg{width:20px;height:20px;flex:none;}
.pill--coin{color:#ffe08a;} .pill--gem{color:#bff0ff;} .pill--star{color:var(--gold);}
.pill--plus{width:34px;padding:0;justify-content:center;color:var(--red-400);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 22px;border-radius:var(--r-lg);
  font-weight:800;font-size:16px;letter-spacing:.3px;color:#fff;position:relative;overflow:hidden;white-space:nowrap;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);box-shadow:var(--sh-2);
  transition:transform .12s ease, filter .2s;width:100%;}
.btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.btn:active{transform:translateY(2px) scale(.985);filter:brightness(1.05);}
.btn svg{width:22px;height:22px;}
.btn--primary{background:linear-gradient(180deg,var(--red-500),var(--red-700));border-color:rgba(255,255,255,.18);box-shadow:var(--sh-red);}
.btn--primary::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none;}
.btn--gold{background:linear-gradient(180deg,#ffd873,#eaa419);color:#3a1e00;border-color:rgba(255,255,255,.35);box-shadow:var(--sh-gold);}
.btn--ghost{background:var(--surface);border-color:var(--line);}
.btn--green{background:linear-gradient(180deg,#46e089,#1a9c54);box-shadow:0 10px 26px rgba(55,214,122,.35);}
.btn--sm{height:42px;font-size:14px;padding:0 16px;border-radius:var(--r-md);}
.btn--wide{width:100%;}
.btn[disabled]{opacity:.45;filter:grayscale(.4);pointer-events:none;}
.btn__glow{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 var(--red-glow);animation:btnPulse 2.2s infinite;pointer-events:none;}
@keyframes btnPulse{0%{box-shadow:0 0 0 0 var(--red-glow);}70%{box-shadow:0 0 0 14px rgba(224,30,43,0);}100%{box-shadow:0 0 0 0 rgba(224,30,43,0);}}

/* ---------- Generic cards / panels ---------- */
.panel{background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:16px;position:relative;overflow:hidden;}
.panel--flush{padding:0;}
.section-h{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px;}
.section-h h2{font-size:16px;font-weight:800;margin:0;letter-spacing:.2px;}
.section-h .link{font-size:13px;font-weight:700;color:var(--red-400);}
.muted{color:var(--tx-2);} .muted-3{color:var(--tx-3);}
.center{text-align:center;}

/* ---------- Progress bars ---------- */
.bar{height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.10);overflow:hidden;position:relative;}
.bar > i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red-500),var(--gold));
  box-shadow:0 0 12px var(--red-glow);transition:width .5s cubic-bezier(.2,.9,.25,1);}
.bar--xp > i{background:linear-gradient(90deg,#3aa0ff,#38e6d0);box-shadow:0 0 12px rgba(58,160,255,.5);}
.bar--slim{height:7px;}

/* ---------- Chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:800;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--tx-1);}
.chip svg{width:15px;height:15px;flex:none;}
.chip--red{background:rgba(224,30,43,.16);border-color:rgba(224,30,43,.4);color:#ff9ba1;}
.chip--gold{background:rgba(245,184,51,.16);border-color:rgba(245,184,51,.4);color:var(--gold);}
.chip--green{background:rgba(55,214,122,.16);border-color:rgba(55,214,122,.4);color:#8bf0b6;}
.chip--lock{background:rgba(255,255,255,.05);color:var(--tx-3);}

/* ---------- Stars ---------- */
.stars{display:inline-flex;gap:3px;}
.stars svg{width:16px;height:16px;}
.star-on{color:var(--gold);filter:drop-shadow(0 2px 4px rgba(245,184,51,.5));}
.star-off{color:rgba(255,255,255,.16);}

/* ---------- Bottom navigation ---------- */
#bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:6;height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);display:flex;align-items:stretch;
  background:linear-gradient(180deg,rgba(15,21,42,.86),rgba(9,13,26,.98));backdrop-filter:blur(14px);
  border-top:1px solid var(--line);}
.navbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--tx-3);
  font-size:10.5px;font-weight:700;letter-spacing:.2px;position:relative;transition:color .2s;}
.navbtn svg{width:24px;height:24px;transition:transform .18s;}
.navbtn.active{color:#fff;}
.navbtn.active svg{transform:translateY(-2px) scale(1.06);}
.navbtn.active::before{content:"";position:absolute;top:6px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,var(--red-glow),transparent 70%);z-index:-1;}
.navbtn--fab{margin-top:-18px;}
.navbtn--fab .fab{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;margin-bottom:2px;
  background:linear-gradient(180deg,var(--red-500),var(--red-700));box-shadow:var(--sh-red);border:2px solid rgba(255,255,255,.2);}
.navbtn--fab .fab svg{width:30px;height:30px;color:#fff;}

/* ---------- Boot splash ---------- */
#boot-splash{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(700px 400px at 50% 30%, #16204a, #070b16 72%);transition:opacity .5s, visibility .5s;}
#boot-splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
.boot-badge{animation:bootPop .7s cubic-bezier(.2,1.3,.4,1) both, floaty 3s ease-in-out 1s infinite;}
.boot-badge svg{filter:drop-shadow(0 12px 30px rgba(224,30,43,.5));}
@keyframes bootPop{from{transform:scale(.3) rotate(-14deg);opacity:0;}to{transform:none;opacity:1;}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.boot-title{font-size:30px;font-weight:900;letter-spacing:2px;color:#fff;line-height:1;text-align:center;}
.boot-title span{display:block;color:var(--red-500);text-shadow:0 4px 20px var(--red-glow);}
.boot-sub{color:var(--tx-2);letter-spacing:3px;font-size:12px;font-weight:700;text-transform:uppercase;}
.boot-bar{width:180px;height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px;}
.boot-bar i{display:block;height:100%;width:20%;border-radius:99px;background:linear-gradient(90deg,var(--red-500),var(--gold));
  animation:bootLoad 1.6s ease-in-out infinite;}
@keyframes bootLoad{0%{width:8%;transform:translateX(-10%);}50%{width:70%;}100%{width:98%;transform:translateX(4%);}}
.boot-tip{color:var(--tx-3);font-size:12px;margin-top:2px;}

/* ---------- Toasts ---------- */
#toast-layer{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 8px);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;}
.toast{max-width:92%;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);box-shadow:var(--sh-3);
  font-weight:700;font-size:14px;animation:toastIn .3s ease, toastOut .3s ease 2.2s forwards;}
.toast .ic{width:22px;height:22px;flex:none;}
.toast--good{border-color:rgba(55,214,122,.5);} .toast--good .ic{color:var(--green);}
.toast--bad{border-color:rgba(224,30,43,.5);} .toast--bad .ic{color:var(--red-500);}
.toast--gold{border-color:rgba(245,184,51,.5);} .toast--gold .ic{color:var(--gold);}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.95);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.97);}}

/* ---------- Modal ---------- */
#modal-layer{position:absolute;inset:0;z-index:45;display:none;align-items:center;justify-content:center;padding:24px;}
#modal-layer.show{display:flex;}
.modal-scrim{position:absolute;inset:0;background:rgba(4,6,14,.72);backdrop-filter:blur(3px);animation:fade .25s;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{position:relative;width:100%;max-width:360px;background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:var(--r-2xl);box-shadow:var(--sh-3);padding:22px;text-align:center;
  animation:modalIn .34s cubic-bezier(.2,1.2,.4,1);}
@keyframes modalIn{from{opacity:0;transform:scale(.85) translateY(20px);}to{opacity:1;transform:none;}}
.modal h3{margin:6px 0 6px;font-size:20px;font-weight:900;}
.modal p{margin:0 0 16px;color:var(--tx-2);font-size:14px;line-height:1.5;}
.modal__icon{width:74px;height:74px;margin:0 auto 6px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--red-500),var(--red-700));box-shadow:var(--sh-red);}
.modal__icon svg{width:40px;height:40px;color:#fff;}
.modal__row{display:flex;gap:10px;margin-top:12px;}
.modal__row .btn{flex:1;}

/* ---------- FX layer (confetti / floats) ---------- */
#fx-layer{position:absolute;inset:0;z-index:44;pointer-events:none;overflow:hidden;}
.confetti{position:absolute;width:10px;height:14px;border-radius:2px;will-change:transform,opacity;animation:confFall linear forwards;}
@keyframes confFall{to{transform:translateY(115vh) rotate(720deg);opacity:.2;}}
.float-up{position:absolute;font-weight:900;font-size:22px;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6);animation:floatUp 1s ease-out forwards;}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.6);}20%{opacity:1;}100%{opacity:0;transform:translateY(-70px) scale(1.15);}}

/* ---------- Helpers ---------- */
.row{display:flex;align-items:center;gap:12px;}
.row--between{justify-content:space-between;}
.wrap{display:flex;flex-wrap:wrap;gap:10px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stack{display:flex;flex-direction:column;gap:12px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.hidden{display:none !important;}
.badge-dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red-600);
  color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg-1);}
.lockwrap{position:relative;}
.lockwrap.locked{filter:grayscale(.6) brightness(.7);}
.lock-badge{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,9,18,.5);border-radius:inherit;}
.lock-badge svg{width:26px;height:26px;color:var(--tx-2);}