/* ============================================================
   Battle Mages · landing page
   Identity ported from the game's main menu: the layered
   hell/lava parallax scene + the teal/gold "Grand Sigil" logo.
   ============================================================ */
:root{
  --bg:        #0c0906;   /* molten near-black (matches the game's --bg) */
  --bg-2:      #16100a;
  --panel:     #1a120b;   /* warm near-black panel */
  --panel-2:   #241811;   /* raised */
  --line:      #453222;   /* warm brown border */
  --ink:       #f6edda;   /* parchment (game text color) */
  --ink-dim:   #d6c0a2;   /* warm tan */
  --ink-mute:  #a3855f;   /* muted bronze */
  --lava:      #ff5a1f;
  --lava-2:    #ffb347;
  --teal:      #6fd8c8;   /* sigil ring teal */
  --teal-2:    #9df0e2;   /* rune teal (bright) */
  --gold:      #ffd97a;   /* sigil wordmark gold */
  --gold-2:    #c98c34;   /* deep gold */
  --fire:  #ff6a3d;
  --ice:   #4aa3ff;
  --elec:  #ffd94a;
  --earth: #7de08a;
  --arc:   #c46bff;
  --radius: 16px;
  --maxw: 1180px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0}
img,svg{max-width:100%}
::selection{background:var(--teal);color:#0c0906}

/* slim, theme-matched scrollbars (like the game) */
*{scrollbar-width:thin;scrollbar-color:rgba(122,84,46,.6) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(122,84,46,.6);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(160,112,62,.85)}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}

/* backdrop atmosphere: warm cavern base with a faint teal arcane haze */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(255,150,50,.14), transparent 62%),
    radial-gradient(900px 560px at 84% 4%, rgba(111,216,200,.07), transparent 60%),
    radial-gradient(820px 520px at 8% 22%, rgba(120,44,20,.18), transparent 62%),
    linear-gradient(180deg, #1b0f08 0%, var(--bg) 42%, #080503 100%);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;
  border-radius:999px;border:0;cursor:pointer;
  padding:.85em 1.5em;font-size:1rem;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px) scale(.99)}
/* Play = the sigil's gold */
.btn-play{
  background:linear-gradient(180deg, #ffe9ae 0%, var(--gold) 38%, var(--gold-2) 100%);
  color:#2a1704;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 8px 24px rgba(255,200,90,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-play:hover{filter:brightness(1.06);box-shadow:0 12px 34px rgba(255,200,90,.5), inset 0 1px 0 rgba(255,255,255,.6)}
.btn-huge{
  font-size:1.45rem;padding:1.05em 2.2em;letter-spacing:.02em;
  font-weight:800;
  animation:playpulse 2.6s ease-in-out infinite;
}
@keyframes playpulse{
  0%,100%{box-shadow:0 10px 26px rgba(255,200,90,.35), inset 0 1px 0 rgba(255,255,255,.55)}
  50%{box-shadow:0 14px 40px rgba(255,214,110,.6), 0 0 0 6px rgba(255,214,110,.10), inset 0 1px 0 rgba(255,255,255,.6)}
}
.btn-download{
  background:linear-gradient(180deg,#231a10,#191108);
  color:var(--ink);
  border:1px solid #5c4426;
  box-shadow:inset 0 1px 0 rgba(255,220,150,.14), 0 6px 16px rgba(0,0,0,.35);
  padding:.7em 1.4em;
}
.btn-download:hover{border-color:var(--teal);background:linear-gradient(180deg,#2b2013,#20150a);filter:brightness(1.05)}
.btn-android{position:relative;background:linear-gradient(180deg,#12291f,#0c1f15);border-color:#2f6d47}
.btn-android:hover{border-color:#3ddc84;background:linear-gradient(180deg,#163526,#0f281a)}
.beta-tag{
  position:absolute;top:-9px;right:-8px;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0c1a10;background:#3ddc84;
  padding:.14em .5em;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.dl-ico{font-size:1.5rem;line-height:1}
.dl-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.dl-text strong{font-size:1rem}
.dl-text small{color:var(--ink-mute);font-weight:500;font-size:.78rem}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.2rem;
  padding:.6rem clamp(1rem,4vw,2.2rem);
  background:rgba(16,10,5,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(69,50,34,.6);
}
.nav.scrolled{background:rgba(12,8,4,.93)}
.brand{display:flex;align-items:center;gap:.55rem}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.brand-name{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:.03em;
  background:linear-gradient(180deg,#fff6d6 0%,var(--gold) 55%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-links{display:flex;gap:.3rem;margin-left:auto}
.nav-links a{
  padding:.5rem .8rem;border-radius:9px;color:var(--ink-dim);font-weight:600;font-size:.92rem;
  transition:color .15s, background .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--teal-2);background:rgba(111,216,200,.10)}
.nav-right{display:flex;align-items:center;gap:.7rem;margin-left:.3rem}
.lang-switch{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px;overflow:hidden}
.lang-switch button{
  border:0;background:transparent;color:var(--ink-mute);
  font-family:var(--font-body);font-weight:700;font-size:.8rem;
  padding:.35em .7em;border-radius:999px;cursor:pointer;transition:all .15s;
}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.active{background:var(--teal);color:#0c0906}
.btn-nav{padding:.55em 1.1em;font-size:.9rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:.4rem}
.nav-toggle span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(2.4rem,6vw,5rem) clamp(1rem,4vw,2.2rem) clamp(3.4rem,7vw,5.5rem)}

/* the game's main-menu scene: 7 parallax layers + lava glow + legibility veil */
.menuScene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#e7ac6a}
.msLayer{
  position:absolute;inset:-7%;                    /* oversize so parallax never bares an edge */
  background:center bottom / cover no-repeat;
  image-rendering:pixelated;                      /* crisp pixel-art upscaling */
  transform:translate3d(calc(var(--mx,0) * var(--d) * 1px), calc(var(--my,0) * var(--d) * .5px), 0);
  transition:transform .2s ease-out;
  will-change:transform;
}
.msLayer.l7{background-image:url("assets/menu/bg7.png");--d:3}
.msLayer.l6{background-image:url("assets/menu/bg6.png");--d:6}
.msLayer.l5{background-image:url("assets/menu/bg5.png");--d:9}
.msLayer.l4{background-image:url("assets/menu/bg4.png");--d:13}
.msLayer.l3{background-image:url("assets/menu/bg3.png");--d:18}
.msLayer.l2{background-image:url("assets/menu/bg2.png");--d:24}
.msLayer.l1{background-image:url("assets/menu/bg1.png");--d:34}
.msGlow{
  position:absolute;left:50%;bottom:-10%;transform:translateX(-50%);
  width:130%;height:62%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,120,40,.55), rgba(255,70,20,0) 62%);
  animation:msFlicker 5s ease-in-out infinite;
}
@keyframes msFlicker{0%,100%{opacity:.5}50%{opacity:.92}}
.msVeil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(125% 92% at 50% 6%, rgba(10,7,16,0) 42%, rgba(10,7,16,.55) 100%),
    linear-gradient(180deg, rgba(10,7,16,.34) 0%, rgba(10,7,16,.14) 34%, rgba(12,9,6,.92) 100%);
}

.hero-inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;
  color:var(--teal-2);background:rgba(111,216,200,.10);border:1px solid rgba(111,216,200,.32);
  padding:.4em .9em;border-radius:999px;margin-bottom:1.1rem;
  backdrop-filter:blur(2px);
}
/* the Grand Sigil replaces the old text title */
.logoH{margin:0 0 .2rem;line-height:0}
.bmgLogo{display:block;width:100%;max-width:520px;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
.subtitle{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.45rem);color:var(--gold);letter-spacing:.14em;margin:0 0 1.2rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.lede{font-size:clamp(1rem,1.6vw,1.18rem);color:#eadfc6;max-width:42ch;margin:0 0 1.7rem;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.lede strong{color:#fff;font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.cta-center{justify-content:center}
.cta-note{margin:1rem 0 0;color:var(--ink-dim);font-size:.9rem;max-width:46ch;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:1.6rem;padding:0;margin:2.2rem 0 0}
.hero-stats li{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--font-display);font-size:1.7rem;color:var(--gold);line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hero-stats span{font-size:.8rem;color:#cdbb9b;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 1px 5px rgba(0,0,0,.6)}

/* hero arena art */
.hero-art{display:flex;justify-content:center;align-items:center}
.arena{position:relative;width:min(420px,80vw);aspect-ratio:1/1}
.lava-glow{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 55%, #ff8a2b 0%, var(--lava) 30%, #a11d0c 55%, transparent 72%);
  filter:blur(6px);
  animation:lavabreath 4s ease-in-out infinite;
}
@keyframes lavabreath{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
.island{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:74%;aspect-ratio:1/.82;
  background:
    radial-gradient(circle at 40% 35%, #6a4a2e, #4a3120 70%),
    #4a3120;
  border-radius:52% 48% 50% 50%/54% 54% 46% 46%;
  box-shadow:0 22px 40px rgba(0,0,0,.5), inset 0 -10px 24px rgba(0,0,0,.5), 0 0 0 3px #7a5a3a, 0 0 40px 6px rgba(255,90,31,.5);
}
.island::after{ /* sand patches */
  content:"";position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle at 60% 40%, rgba(214,183,130,.5), transparent 55%),
             radial-gradient(circle at 30% 70%, rgba(214,183,130,.4), transparent 45%);
}
.mage{position:absolute;width:19%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));animation:float 3.4s ease-in-out infinite}
.m1{left:16%;top:30%;animation-delay:0s}
.m2{right:14%;top:24%;animation-delay:.5s}
.m3{left:40%;top:12%;animation-delay:1s}
.m4{left:22%;bottom:14%;animation-delay:1.5s}
.m5{right:20%;bottom:16%;animation-delay:.8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bolt{position:absolute;font-size:1.5rem;filter:drop-shadow(0 0 8px currentColor);animation:zoom 2.6s ease-in-out infinite}
.b1{left:30%;top:34%;animation-delay:.2s}
.b2{right:28%;top:40%;animation-delay:1.1s}
.b3{left:50%;bottom:30%;animation-delay:1.7s}
@keyframes zoom{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1.15);opacity:1}}

/* floating embers (rising off the hero's lava scene) */
.embers{position:absolute;inset:0;pointer-events:none;z-index:1}
.ember{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#ffd08a,var(--lava));opacity:0;
  animation:rise linear infinite;filter:blur(.4px)}
.ember.arcane{background:radial-gradient(circle,#d7fff6,var(--teal))}
@keyframes rise{
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(-90vh) translateX(var(--dx,20px)) scale(.3);opacity:0}
}
.scroll-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:var(--ink-dim);font-size:1.3rem;animation:bob 1.8s ease-in-out infinite;z-index:2}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- generic section ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.2rem)}
.section-alt{max-width:none;background:linear-gradient(180deg, rgba(40,26,13,.32), rgba(26,16,9,.12));border-top:1px solid rgba(69,50,34,.4);border-bottom:1px solid rgba(69,50,34,.4)}
.section-alt > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.section-head{text-align:center;max-width:64ch;margin:0 auto 3rem}
.section-head h2{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;margin-bottom:.7rem;
  background:linear-gradient(180deg,#fff6d6 0%,var(--gold) 60%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.section-head h2::after{content:"";display:block;width:66px;height:4px;margin:.9rem auto 0;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.section-sub{color:var(--ink-dim);font-size:1.05rem}
.section-sub strong{color:var(--ink)}
.section-sub em{color:var(--teal-2);font-style:italic}

/* ---------- flow ---------- */
.flow{display:flex;align-items:stretch;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-bottom:3.2rem}
.flow-step{
  flex:1 1 200px;max-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;position:relative;
}
.flow-num{position:absolute;top:-14px;left:1.3rem;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-family:var(--font-display);
  background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#2a1704;box-shadow:0 4px 12px rgba(255,200,90,.35)}
.flow-step h3{font-size:1.12rem;margin:.5rem 0 .5rem}
.flow-step p{margin:0;color:var(--ink-dim);font-size:.92rem}
.flow-arrow{align-self:center;color:var(--teal);font-size:1.5rem;font-weight:800}

/* ---------- feature grid ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.feature-card{
  background:linear-gradient(180deg,var(--panel),rgba(36,24,17,.5));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.feature-card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:var(--shadow)}
.fc-ico{font-size:2rem;margin-bottom:.6rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.feature-card h3{font-size:1.2rem;margin-bottom:.5rem}
.feature-card p{margin:0;color:var(--ink-dim);font-size:.94rem}
.feature-card strong{color:var(--ink)}

/* ---------- elements ---------- */
.element-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.el-card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;overflow:hidden;
  border-top:3px solid var(--el);
  transition:transform .2s, box-shadow .2s;
}
.el-card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 160px at 80% -10%, color-mix(in srgb, var(--el) 22%, transparent), transparent 70%);pointer-events:none}
.el-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px color-mix(in srgb, var(--el) 22%, transparent)}
.el-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.el-emoji{font-size:1.7rem;filter:drop-shadow(0 0 10px color-mix(in srgb, var(--el) 60%, transparent))}
.el-head h3{font-size:1.35rem;color:#fff}
.el-tag{color:var(--el);font-style:italic;font-weight:500;margin:.1rem 0 1rem;font-size:.95rem}
.el-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.el-list li{position:relative;padding-left:1.3rem;color:var(--ink-dim);font-size:.92rem}
.el-list li::before{content:"◆";position:absolute;left:0;color:var(--el);font-size:.7rem;top:.28em}
.el-list b{color:var(--ink)}
.el-card-cta{border-top-color:var(--teal);display:flex;flex-direction:column;justify-content:center;text-align:left}
.el-card-cta .el-tag{color:var(--ink-dim);font-style:normal}
.el-card-cta b{color:var(--teal-2)}
.mini-link{color:var(--teal-2);font-weight:700;font-size:.95rem}
.mini-link:hover{text-decoration:underline}

/* ---------- spell table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.spell-table{width:100%;border-collapse:collapse;min-width:720px}
.spell-table th,.spell-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid rgba(69,50,34,.5)}
.spell-table thead th{background:rgba(40,26,13,.6);font-family:var(--font-display);font-size:.82rem;position:sticky;top:0}
.th-el{display:inline-flex;align-items:center;gap:.3em;color:var(--el)}
.spell-table tbody tr:hover{background:rgba(111,216,200,.05)}
.spell-table td{font-size:.9rem;color:var(--ink-dim)}
.spell-table .key{font-weight:700;color:var(--gold);font-family:var(--font-body);white-space:nowrap}
.spell-table .slot{color:var(--ink);font-weight:600}
.spell-table .slot .sk{display:inline-block;min-width:1.5em;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.72rem;color:var(--ink-mute);background:rgba(111,216,200,.10);border-radius:4px;padding:.1em .35em;margin-right:.4em}
.spell-table .slot small{color:var(--ink-mute);font-weight:400;font-size:.78rem}
.spell-table td:nth-child(n+3){color:var(--ink);font-weight:600}
.span-cell{color:var(--ink-dim)!important;font-weight:400!important;background:rgba(111,216,200,.04)}
.span-cell b{color:var(--ink)}
.level-note{display:flex;gap:1.2rem;align-items:center;margin-top:1.6rem;background:linear-gradient(180deg,var(--panel),rgba(36,24,17,.4));border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);padding:1.3rem 1.5rem}
.ln-badge{flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:1rem;color:#0c0906;background:linear-gradient(180deg,var(--teal-2),var(--teal));padding:.5em .8em;border-radius:10px;box-shadow:0 6px 16px rgba(111,216,200,.3)}
.level-note p{margin:0;color:var(--ink-dim);font-size:.94rem}
.level-note strong{color:var(--ink)}

/* ---------- rule cards / subheads (tree, paths) ---------- */
.combo-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-bottom:2.6rem}
.cr-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.cr-card h3{font-size:1.1rem;margin-bottom:.5rem}
.cr-card p{margin:0;color:var(--ink-dim);font-size:.92rem}
.cr-card code{background:rgba(111,216,200,.16);color:#d9fff6;padding:.1em .4em;border-radius:5px;font-size:.85em}
.cr-card em{color:var(--teal-2);font-style:italic}
.cr-card b{color:var(--ink)}
.combo-subhead{text-align:center;font-size:1.35rem;margin:0 0 1.4rem;color:#fff}
.combo-examples{margin-top:2.8rem}
.combo-examples ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.combo-examples li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:12px;padding:1rem 1.2rem;color:var(--ink-dim);font-size:.92rem}
.combo-examples li b{color:var(--ink)}

/* ---------- sig / ring cards ---------- */
.sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem}
.sig-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-top:3px solid var(--el);border-radius:14px;padding:1.15rem;transition:transform .18s,box-shadow .18s}
.sig-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px color-mix(in srgb, var(--el) 22%, transparent)}
.sig-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.sig-emoji{font-size:1.4rem;filter:drop-shadow(0 0 10px color-mix(in srgb, var(--el) 60%, transparent))}
.sig-card b{font-family:var(--font-display);color:#fff;font-size:1.05rem}
.sig-card p{margin:0;color:var(--ink-dim);font-size:.88rem}
.sig-card p b{font-family:var(--font-body);font-size:inherit;color:var(--ink)}

/* ---------- armory ---------- */
.armory-note{text-align:center;color:var(--ink-dim);max-width:60ch;margin:-.6rem auto 1.6rem;font-size:.96rem}
.armory-note b{color:var(--ink)}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:3rem}
.staff-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem;transition:transform .18s,border-color .18s}
.staff-card:hover{transform:translateY(-3px);border-color:var(--gold)}
.staff-card h4{font-family:var(--font-display);font-size:1.1rem;color:#fff;margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
.staff-card h4::before{content:"🪄";font-size:1rem}
.staff-card p{margin:0 0 .8rem;color:var(--ink-dim);font-size:.88rem}
.staff-stats{display:flex;gap:.5rem;flex-wrap:wrap}
.staff-stats span{font-size:.75rem;font-weight:700;padding:.25em .6em;border-radius:6px}
.staff-stats .up{background:rgba(125,224,138,.16);color:#8fe89b}
.staff-stats .down{background:rgba(255,106,61,.16);color:#ff9a78}
.armor-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.armor-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.armor-list li{display:flex;gap:.7rem;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;color:var(--ink-dim);font-size:.92rem}
.armor-list li > span:first-child{font-size:1.2rem;flex-shrink:0}
.armor-list b{color:var(--ink)}
.robe-row{display:flex;gap:.8rem;justify-content:center;margin:1rem 0 1.4rem;flex-wrap:wrap}
.robe{width:64px;height:72px;background:radial-gradient(circle at 50% 90%, rgba(0,0,0,.4), transparent 60%);display:grid;place-items:end center}
.robe svg{width:56px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));transition:transform .2s}
.robe:hover svg{transform:translateY(-5px) scale(1.05)}

/* ---------- power-ups ---------- */
.powerup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.pu{display:flex;flex-direction:column;gap:.2rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem;transition:transform .18s,border-color .18s}
.pu:hover{transform:translateY(-3px);border-color:var(--teal)}
.pu-ico{font-size:1.8rem;margin-bottom:.2rem}
.pu b{color:#fff;font-size:1.02rem}
.pu small{color:var(--ink-mute);font-size:.82rem;line-height:1.4}
.bounty-line{text-align:center;margin:2rem auto 0;max-width:74ch;color:var(--ink-dim);background:rgba(255,217,122,.06);border:1px solid rgba(255,217,122,.22);border-radius:12px;padding:1rem 1.3rem}
.bounty-line b{color:var(--gold)}

/* ---------- modes ---------- */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.mode-card{background:linear-gradient(180deg,var(--panel),rgba(36,24,17,.5));border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:transform .2s,border-color .2s,box-shadow .2s}
.mode-card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:var(--shadow)}
.mode-card h3{font-size:1.25rem;margin-bottom:.5rem}
.mode-card p{margin:0;color:var(--ink-dim);font-size:.93rem}
.mode-card em{color:var(--teal-2);font-style:italic}
.toggle-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:center;margin-top:2rem}
.toggle-label{font-weight:700;color:var(--ink)}
.pill{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:.5em 1.1em;font-size:.85rem;color:var(--ink-dim)}

/* ---------- rankings ---------- */
.rank-panel{max-width:820px;margin:0 auto}
.rank-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.rank-table{width:100%;border-collapse:collapse;min-width:520px}
.rank-table th,.rank-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.rank-table thead th{background:rgba(40,26,13,.6);font-family:var(--font-display);font-size:.78rem;letter-spacing:.03em;color:var(--ink-dim);position:sticky;top:0}
.rank-table .rk-col-rank{width:2.5em;text-align:center}
.rank-table .rk-col-num{text-align:right;white-space:nowrap}
.rank-table tbody tr:hover{background:rgba(111,216,200,.06)}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table td{color:var(--ink-dim);font-size:.92rem}
.rank-name{color:var(--ink);font-weight:600}
.rank-rank{font-family:var(--font-display);font-weight:800;color:var(--ink-mute);text-align:center;display:block}
.rank-table td.rk-col-num{color:var(--ink);font-variant-numeric:tabular-nums}
.rank-row-1 .rank-rank,.rank-row-2 .rank-rank,.rank-row-3 .rank-rank{color:var(--gold)}
.rank-row-1{background:linear-gradient(90deg, rgba(255,217,122,.10), transparent 60%)}
.rank-row-1 .rank-name::before{content:"🥇 ";}
.rank-row-2 .rank-name::before{content:"🥈 ";}
.rank-row-3 .rank-name::before{content:"🥉 ";}
.rank-state-row td{border-bottom:0;padding:2.4rem 1rem}
.rank-state{display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--ink-mute);text-align:center;font-size:.92rem}
.rank-state.is-error{color:var(--ink-dim)}
.rank-spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:rankspin .8s linear infinite}
@keyframes rankspin{to{transform:rotate(360deg)}}
.rank-updated{text-align:center;color:var(--ink-mute);font-size:.8rem;margin:.9rem 0 0}
.rank-retry{margin-top:.3rem;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-family:var(--font-body);font-weight:700;font-size:.82rem;padding:.4em 1em;border-radius:999px;cursor:pointer}
.rank-retry:hover{border-color:var(--teal)}
/* pager: top 10 per page, up to the top 50 */
.rank-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;margin:1.1rem 0 0}
.rank-page-btn{min-width:2.3em;height:2.3em;padding:0 .55em;display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);font-family:var(--font-display);font-weight:700;font-size:.85rem;line-height:1;border-radius:9px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.rank-page-btn:hover:not(:disabled){border-color:var(--teal);color:var(--ink)}
.rank-page-btn.is-active{background:linear-gradient(180deg,var(--teal-2),var(--teal));border-color:var(--teal);color:#0c0906;cursor:default}
.rank-page-btn:disabled{opacity:.4;cursor:default}
.rank-page-arrow{font-family:var(--font-body);font-weight:700}
.rank-page-status{text-align:center;color:var(--ink-mute);font-size:.8rem;margin:.6rem 0 0}

/* "view full board" button under the inline Top 10 */
.rank-more{display:flex;justify-content:center;margin:1.2rem 0 0}
.rank-more-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.02em;padding:.7em 1.6em;border-radius:999px;cursor:pointer;transition:border-color .15s,filter .15s,transform .15s}
.rank-more-btn:hover{border-color:var(--teal);filter:brightness(1.06)}
.rank-more-btn:active{transform:translateY(1px)}

/* full-board modal */
body.modal-open{overflow:hidden}
.rank-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.rank-modal[hidden]{display:none}
.rank-modal-backdrop{position:absolute;inset:0;background:rgba(8,5,2,.72);backdrop-filter:blur(4px)}
.rank-modal-dialog{position:relative;width:100%;max-width:660px;max-height:86vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden;animation:rankModalIn .2s ease}
@keyframes rankModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.rank-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);flex:0 0 auto}
.rank-modal-head h3{font-size:1.15rem;color:var(--ink)}
.rank-modal-close{width:2.1em;height:2.1em;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:9px;color:var(--ink-dim);font-size:1rem;cursor:pointer;transition:border-color .15s,color .15s}
.rank-modal-close:hover{border-color:var(--teal);color:var(--ink)}
.rank-modal-body{padding:1.1rem 1.3rem 1.3rem;overflow-y:auto}
@media (prefers-reduced-motion:reduce){.rank-modal-dialog{animation:none}}
@media (max-width:560px){
  .rank-modal{padding:0}
  .rank-modal-dialog{max-width:none;max-height:100vh;height:100vh;border:0;border-radius:0}
}

/* ---------- download section ---------- */
.download-section{max-width:none;text-align:center;position:relative}
.download-inner{position:relative;max-width:760px;margin:0 auto;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:24px;padding:clamp(2rem,5vw,3.5rem);overflow:hidden}
.download-glow{position:absolute;inset:0;background:radial-gradient(500px 200px at 50% 0%, rgba(111,216,200,.16), transparent 70%);pointer-events:none}
.download-inner h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.6rem;position:relative;
  background:linear-gradient(180deg,#fff6d6 0%,var(--gold) 60%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.download-inner > p{color:var(--ink-dim);max-width:52ch;margin:0 auto 2rem;position:relative}
.download-fine{font-size:.82rem;color:var(--ink-mute);margin:1.6rem auto 0;max-width:56ch}
.download-warn{color:var(--ink-dim);background:rgba(61,220,132,.07);border:1px solid rgba(61,220,132,.25);border-radius:10px;padding:.7em 1em;max-width:60ch}
.download-warn strong{color:#7ff0b0}
.download-fine em{color:var(--ink-dim);font-style:normal;background:rgba(255,255,255,.06);padding:.05em .4em;border-radius:5px}

/* ---------- footer ---------- */
.footer{text-align:center;padding:2.6rem 1.5rem 3rem;border-top:1px solid rgba(69,50,34,.5);color:var(--ink-mute)}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:800;font-size:1.1rem;margin-bottom:.4rem}
.footer-brand span{
  background:linear-gradient(180deg,#fff6d6 0%,var(--gold) 55%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer-mark{width:26px;height:26px}
.footer-tag{margin:.2rem 0 1rem;color:var(--ink-dim)}
.footer-credits{font-size:.8rem;max-width:60ch;margin:0 auto;line-height:1.7}
.footer-credits a{color:var(--teal-2)}
.footer-credits a:hover{text-decoration:underline}
.footer-legal{margin:1.3rem 0 0;font-size:.85rem}
.footer-legal a{color:var(--ink-mute);border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .15s}
.footer-legal a:hover{color:var(--teal-2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none;position:fixed;top:60px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(12,8,4,.98);backdrop-filter:blur(12px);padding:.6rem;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-links a{padding:.9rem 1rem;border-radius:10px}
  .nav-toggle{display:flex;margin-left:.2rem}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .btn-nav{display:none}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:2}
  .hero-art{order:1}
  .bmgLogo{margin:0 auto;max-width:420px}
  .lede,.cta-note{margin-left:auto;margin-right:auto}
  .hero-stats{justify-content:center}
  .armor-split{grid-template-columns:1fr;gap:2.4rem}
  .flow-arrow{transform:rotate(90deg)}
}
@media (max-width:560px){
  .cta-row{flex-direction:column;align-items:stretch}
  .btn-huge{width:100%}
  .btn-download{justify-content:center}
  .hero-stats{gap:1.1rem}
  .hero-stats li{flex:1 1 40%}
  .bmgLogo{max-width:320px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto}
  .msLayer{transition:none}
  .msGlow{animation:none;opacity:.68}
}