/* ====================================================================
   FANTASY THEME — animated logo, hero FX, events, leaderboard, modal
   Loaded after style.css; extends/overrides the base game-portal theme.
   ==================================================================== */
:root{ --ember:#5bb8e8; --ember2:#8ad6f4; --arcane:#46d8e0; }
h1,h2{ font-family:"Fredoka","Baloo 2","Segoe UI",system-ui,sans-serif; letter-spacing:.2px }
.sec-head.ornate h2{ display:inline-flex;align-items:center;gap:10px;letter-spacing:.3px }
.sec-head.ornate h2 .ic-svg{ width:26px;height:26px;color:var(--sky2);filter:drop-shadow(0 2px 6px rgba(91,184,232,.5)) }
/* bright, airy sky glow behind everything (replaces the purple/ember murk) */
body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1200px 560px at 50% -220px,rgba(91,184,232,.20),transparent 64%),
            radial-gradient(820px 520px at 2% 6%,rgba(70,216,224,.10),transparent 60%),
            radial-gradient(900px 560px at 100% 108%,rgba(46,124,192,.16),transparent 62%) }

/* ---------- ASDA + wings wordmark (cream letters, navy outline, sky-blue wings) ---------- */
.arlogo{ display:inline-flex;align-items:center;gap:.34em;position:relative;line-height:1;
  font-family:"Fredoka","Baloo 2",sans-serif }
.arlogo .arwing{ width:1.55em;height:1.24em;flex:none;filter:drop-shadow(0 2px 3px rgba(4,18,40,.5));
  animation:wing-bob 3.4s ease-in-out infinite }
.arlogo .arwing.wr{ transform:scaleX(-1);animation-delay:-1.7s }
.arlogo .word{ display:flex;flex-direction:column;align-items:center;justify-content:center }
.arlogo .asda{ font-size:1em;font-weight:700;letter-spacing:.02em;color:var(--cream);
  -webkit-text-stroke:.085em #123a66;paint-order:stroke;
  text-shadow:0 .045em 0 rgba(8,30,60,.55),0 0 .55em rgba(138,214,244,.45) }
.arlogo .reborn{ font-weight:600;letter-spacing:.46em;text-indent:.46em;margin-top:.05em;
  color:var(--sky2);-webkit-text-stroke:.045em #123a66;paint-order:stroke }
@keyframes wing-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
.arlogo .arwing.wr{ animation-name:wing-bob-r }
@keyframes wing-bob-r{ 0%,100%{ transform:scaleX(-1) translateY(0) } 50%{ transform:scaleX(-1) translateY(-2px) } }
.arlogo-nav { font-size:25px } .arlogo-nav .reborn{ font-size:.30em }
.arlogo-foot{ font-size:26px } .arlogo-foot .reborn{ font-size:.30em }
.arlogo-hero{ font-size:clamp(46px,9vw,82px) } .arlogo-hero .reborn{ font-size:.28em }
.arlogo-hero .arwing{ filter:drop-shadow(0 4px 9px rgba(4,18,40,.55)) }
@media (prefers-reduced-motion:reduce){ .arlogo *{ animation:none !important } }

/* nav tweaks */
.brand{ gap:0 }
.nav-links a.dl-link{ color:var(--gold2) }
.nav-links a.dl-link .ic-svg{ width:15px;height:15px;margin-right:2px;vertical-align:-.18em }
.discord-btn{ display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line2);color:#aab4ff;font-size:19px;transition:.16s }
.discord-btn:hover{ color:#fff;background:#5865F2;border-color:#5865F2 }

/* ---------- hero (home showcase) ---------- */
.hero-fx{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none }
.hero-fx .orb{ position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;animation:orb-float 16s ease-in-out infinite }
.hero-fx .o1{ width:380px;height:380px;top:-90px;left:-70px;
  background:radial-gradient(circle,rgba(91,184,232,.55),transparent 70%) }
.hero-fx .o2{ width:440px;height:440px;bottom:-140px;right:-90px;animation-delay:-8s;
  background:radial-gradient(circle,rgba(70,216,224,.42),transparent 70%) }
@keyframes orb-float{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(24px,-26px) } }
.hero-home .hero-copy .eyebrow{ margin-bottom:22px }
.hero-tag{ font-family:"Cinzel",serif;font-size:clamp(15px,2vw,19px);color:#c4cee2;
  max-width:520px;margin:20px 0 28px;line-height:1.5;letter-spacing:.2px }
.hero-cta .btn .ic-svg{ width:1.15em;height:1.15em }

/* discord cta (footer) */
.discord-cta{ display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;padding:11px 18px;border-radius:11px;
  width:max-content;max-width:100%;background:#5865F2;color:#fff;font-weight:700;font-size:14px;line-height:1;
  box-shadow:0 8px 20px rgba(88,101,242,.35);transition:.16s }
.discord-cta:hover{ filter:brightness(1.08);transform:translateY(-1px) }
.discord-cta,.discord-cta span,.discord-cta svg,.discord-cta .ic-svg{ color:#fff;fill:currentColor }
.discord-cta span{ display:inline-block;line-height:1 }
.discord-cta .ic-svg{ width:1.3em;height:1.3em;flex:none }

/* App-like cursor: the global *{cursor:default} leaves a link's CHILD elements (logo spans,
   the Discord icon, button text) without a pointer. Make descendants of clickables inherit it. */
a *, button *, .btn *, .tab *, summary *, [role=button] *{ cursor:pointer }

/* ---------- responsive top nav (handles many links, e.g. admin) ---------- */
/* let the bar use more width on big screens + grow in height rather than overflow */
.nav .wrap.nav-in{ max-width:1320px;height:auto;min-height:66px;flex-wrap:wrap;row-gap:6px }
.nav-links{ flex-wrap:wrap;gap:4px;margin-left:6px }
.nav-links a{ padding:8px 11px }
/* collapse the full link row into the hamburger menu well before it can overflow */
@media (max-width:1024px){
  .nav-links{ display:none }
  .nav-toggle{ display:block }
  .nav.open .nav-links{ display:flex;flex-wrap:nowrap;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;z-index:50;
    background:rgba(9,12,20,.98);border-bottom:1px solid var(--line);padding:10px 18px;
    max-height:calc(100vh - 66px);overflow:auto }
  .nav.open .nav-links a{ padding:12px 10px;border-radius:9px }
}
@media (max-width:520px){
  .nav .wrap.nav-in{ min-height:58px }
}

/* top-up package cards: bottom-align the Buy button across all cards regardless of bonus line */
.pkg form{ margin-top:auto;padding-top:14px }
.foot-brand .arlogo{ margin-bottom:12px }

/* ---------- coming-soon modal ---------- */
.modal{ position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px }
.modal[hidden]{ display:none }
.modal-back{ position:absolute;inset:0;background:rgba(4,6,12,.72);backdrop-filter:blur(5px) }
.modal-card{ position:relative;z-index:1;width:100%;max-width:430px;text-align:center;padding:32px 28px;
  border-radius:18px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel),var(--bg2));
  box-shadow:var(--shadow);animation:modal-pop .22s ease }
@keyframes modal-pop{ from{ transform:translateY(12px) scale(.97);opacity:0 } }
.modal-x{ position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;
  border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer }
.modal-x:hover{ color:#fff;border-color:var(--blue) }
.modal-card h3{ margin:0 0 8px;font-size:21px }
.modal-card p{ color:var(--muted);font-size:14.5px;margin:0 0 18px;line-height:1.5 }
.modal-card .btn{ margin-bottom:10px } .modal-card .btn:last-child{ margin-bottom:0 }
.modal-card .btn .ic-svg{ width:1.2em;height:1.2em }
.cs-emblem{ width:66px;height:66px;margin:0 auto 16px;display:grid;place-items:center;border-radius:17px;
  color:var(--gold2);font-size:28px;border:1px solid rgba(244,196,90,.32);
  background:radial-gradient(circle at 50% 35%,rgba(244,196,90,.22),transparent 70%) }
.cs-emblem .ic-svg{ width:30px;height:30px }
.cs-emblem.big{ width:92px;height:92px } .cs-emblem.big .ic-svg{ width:42px;height:42px }

/* download / coming-soon page */
.coming-card{ padding:46px 30px } .coming-card .eyebrow{ margin-bottom:18px }
.coming-card h1{ font-size:clamp(28px,5.5vw,46px);line-height:1.1;margin:6px 0 16px }
.coming-card h1 .grad{ background:linear-gradient(92deg,var(--sky2),var(--sky) 55%,#3e9bdc);-webkit-background-clip:text;background-clip:text;color:transparent }
.coming-card .sub{ color:var(--muted);font-size:16px;max-width:520px;margin:0 auto 24px }

/* ---------- events ---------- */
.evt-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px }
.evt-card{ border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg2));transition:.18s }
.evt-card:hover{ transform:translateY(-4px);border-color:var(--line2);box-shadow:0 18px 42px rgba(0,0,0,.45) }
.evt-banner{ position:relative;height:118px;display:grid;place-items:center;color:rgba(255,255,255,.9) }
.evt-banner .ic-svg{ width:46px;height:46px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.45)) }
.evt-banner .pill{ position:absolute;top:12px;left:12px }
.evt-b1{ background:linear-gradient(135deg,#1c4f86,#5bb8e8) }
.evt-b2{ background:linear-gradient(135deg,#10567e,#46d8e0) }
.evt-b3{ background:linear-gradient(135deg,#26528f,#86d6f4) }
.evt-body{ padding:16px 18px 18px }
.evt-body h3{ font-family:"Cinzel",serif;margin:0 0 6px;font-size:18px }
.evt-body p{ color:var(--muted);font-size:14px;margin:0 0 12px;line-height:1.45 }
.evt-date{ color:var(--muted2);font-size:13px;display:inline-flex;align-items:center;gap:6px }
.evt-date .ic-svg{ width:14px;height:14px }

/* ---------- hall of fame leaderboard ---------- */
.lb{ display:flex;flex-direction:column;gap:8px }
.lb-row{ display:flex;align-items:center;gap:14px;padding:11px 16px;border:1px solid var(--line);
  border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--bg2));transition:.15s }
.lb-row:hover{ border-color:var(--line2);transform:translateX(2px) }
.lb-row.top{ border-color:rgba(244,196,90,.32) }
.lb-row.rank-1{ background:linear-gradient(180deg,rgba(244,196,90,.12),var(--bg2)) }
.lb-rank{ width:30px;text-align:center;font-family:"Cinzel",serif;font-weight:900;font-size:18px;color:var(--muted2);flex:none }
.lb-row.rank-1 .lb-rank{ color:#ffd45e } .lb-row.rank-2 .lb-rank{ color:#d2d9ea } .lb-row.rank-3 .lb-rank{ color:#e0a06a }
.ttl-ic{ width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:10px;color:var(--gold2);
  border:1px solid rgba(244,196,90,.28);background:radial-gradient(circle at 50% 35%,rgba(244,196,90,.18),transparent 70%) }
.ttl-ic .ic-svg{ width:22px;height:22px }
.ttl-ic.has-img{ border:0;background:none } .ttl-ic.has-img img{ width:40px;height:40px;border-radius:9px;display:block }
/* Title-rating rank badge in the leaderboard: non-square crowns/numbers — normalise by HEIGHT, keep aspect ratio */
.lb-badge{ width:auto;min-width:32px;display:flex;justify-content:center }
.lb-badge .ttl-ic{ width:auto;height:auto;border:0;background:none;border-radius:0 }
.lb-badge .ttl-ic.has-img img{ width:auto;height:34px;border-radius:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) }
.lb-who{ display:flex;flex-direction:column;flex:1;min-width:0 }
.lb-name{ font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lb-title{ font-size:12.5px;color:var(--gold);font-weight:600 }
.lb-pts{ font-weight:800;font-size:15px;white-space:nowrap;flex:none }
.lb-pts span{ color:var(--muted2);font-size:12px;font-weight:600 }

@media (max-width:680px){
  .discord-cta{ width:100% }
  .lb-title{ font-size:12px }
}

/* ====================================================================
   ASDA polish — glossy sky-blue buttons, real hero art, cute cards
   ==================================================================== */
/* primary CTA -> glossy sky-blue brand button (was gold) */
.btn.gold,.btn.primary{ color:#08243f;font-weight:700;border:1px solid #2f7cc0;
  background:linear-gradient(180deg,#9bdcf6,#5bb8e8 52%,#3e9bdc);
  box-shadow:0 5px 0 #235f96,0 12px 22px rgba(20,80,140,.4),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.35) }
.btn.gold:hover,.btn.primary:hover{ filter:brightness(1.05);transform:translateY(-1px) }
.btn.gold:active,.btn.primary:active{ transform:translateY(2px);
  box-shadow:0 2px 0 #235f96,0 6px 12px rgba(20,80,140,.4),inset 0 1px 0 rgba(255,255,255,.55) }
.btn.gold .ic-svg,.btn.primary .ic-svg{ color:#08243f }
.btn.ghost{ border-color:var(--line2);color:var(--cream) }
.btn.ghost:hover{ background:rgba(138,214,244,.10);border-color:var(--sky);color:#fff }

/* accents -> sky */
.eyebrow,.eyebrow .ic-svg{ color:var(--sky2) }
.pill.upd{ background:rgba(91,184,232,.16);color:var(--sky2);border:1px solid rgba(91,184,232,.35) }
.pgtab.active,.tab.active{ background:var(--sky);border-color:var(--sky);color:#08243f }

/* glossy, rounded "cute" cards */
.card,.evt-card,.lb-row,.pkg,.shop-card{
  border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,58,102,.55),rgba(10,32,58,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(4,16,34,.42) }
.card:hover,.evt-card:hover,.shop-card:hover{ border-color:var(--sky) }

/* frosted nav */
.nav{ background:linear-gradient(180deg,rgba(8,26,48,.94),rgba(8,26,48,.80));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px) }

/* ---------- HERO: real in-game screenshot ---------- */
.hero.hero-home{ position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(8,26,48,.60) 0%,rgba(8,26,48,.80) 58%,var(--bg) 100%),
            url(game/hero.jpg) center 16%/cover no-repeat;
  border-bottom:1px solid var(--line) }
.hero.hero-home .hero-tag{ color:#d6e8f7 }
.hero.hero-home .login-card{ background:linear-gradient(180deg,rgba(16,48,86,.86),rgba(9,28,52,.92));
  backdrop-filter:blur(6px);border-color:var(--line2) }