@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Inter:wght@400;500;600&display=swap");
/* ==========================================================================
   Avatars2 — jade & gold on dark fantasy art.
   Same palette as the in-game login screen, so the client and the site read
   as one product. Ornament is done with gradients and pseudo-elements, not
   images, so there is nothing extra to download and it scales cleanly.
   ========================================================================== */

:root{
  --bg:#0b0805;
  --panel:#1a1410;
  --panel-2:#241a12;
  --line:#3a2a16;
  --line-hi:#6a4e22;

  --jade:#e8b849;
  --jade-lo:#a9762a;
  --jade-hi:#ffe9a8;
  --jade-glow:rgba(232,184,73,.35);

  --gold:#e8b849;
  --gold-hi:#ffe9a8;
  --gold-lo:#a9762a;

  --ink:#ece2cf;
  --ink-dim:#b3a488;
  --ink-faint:#7d6f55;

  --radius:7px;
  --shadow:0 6px 28px rgba(0,0,0,.55);
  --shadow-lift:0 10px 34px rgba(0,0,0,.65), 0 0 0 1px rgba(232,184,73,.10);

  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* The client's login artwork. Swap to bg-login.jpg for the orange grade. */
  --art:url("../img/bg-login.jpg");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font:15px/1.65 var(--sans);
  background:var(--bg);

  /* Global scale. Everything on the site is sized in px, so rather than touch
     a few hundred values this scales the whole page uniformly -- text, spacing,
     borders, images, the lot. Change the one number to taste:
       1     original          1.15  noticeably larger
       1.10  a little larger   1.25  large
     Percentages stay relative to the scaled viewport, so the layout still
     reflows normally and nothing overflows sideways. */
  zoom:1.15;
}

/* Artwork as a fixed backdrop, dimmed separately so the characters stay
   visible at the edges while the centre column stays readable. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:var(--art) center center / cover no-repeat;
  background-color:var(--bg);
  /* Oversized so the drift never exposes an edge. */
  transform:scale(1.06);
  will-change:transform;
  animation:art-drift 48s ease-in-out infinite alternate;
}
/* Barely-there parallax on the artwork: at 1.06 scale a 1% shift is a handful
   of pixels, enough to stop the page feeling like a screenshot without ever
   pulling the eye away from the text. */
@keyframes art-drift{
  from{transform:scale(1.06) translate3d(-0.9%, -0.6%, 0)}
  to  {transform:scale(1.06) translate3d( 0.9%,  0.6%, 0)}
}

body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,7,4,.30) 0%, rgba(10,7,4,.64) 55%, rgba(10,7,4,.93) 100%),
    radial-gradient(90% 75% at 50% 32%, rgba(10,7,4,.82) 0%, rgba(10,7,4,.36) 62%, rgba(10,7,4,.06) 100%),
    /* Jade wash that wanders across the scrim, so the darkness is never flat. */
    radial-gradient(45% 40% at 20% 30%, rgba(232,184,73,.10) 0%, transparent 70%),
    radial-gradient(40% 35% at 80% 65%, rgba(245,196,81,.07) 0%, transparent 70%);
  background-size:auto, auto, 180% 180%, 180% 180%;
  animation:wash-drift 34s ease-in-out infinite alternate;
}
@keyframes wash-drift{
  from{background-position:0 0, 0 0,   0%   0%, 100% 100%}
  to  {background-position:0 0, 0 0, 100% 100%,   0%   0%}
}

/* Embers. One element, two tiled dot layers at different speeds, so it reads
   as depth rather than a single sheet of particles. Pointer-events off and
   z-index below everything: it can never interfere with the page. */
html::before{
  content:"";position:fixed;inset:-10% 0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,233,168,.55) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 70% 60%, rgba(245,196,81,.40) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 45% 80%, rgba(255,233,168,.35) 50%, transparent 100%);
  background-size:340px 340px, 260px 260px, 420px 420px;
  opacity:.55;
  animation:embers 42s linear infinite;
}
@keyframes embers{
  from{background-position:0 100%, 0 100%, 0 100%}
  to  {background-position:0 -100%, 120px -100%, -90px -100%}
}

/* --------------------------------------------------- the fight, staged ----
   The two characters are baked into one flat JPG, so they cannot be moved
   independently -- that would need cut-out layers. What sells the fight is
   everything AROUND them: their blades catch the light, then a clash goes off
   between them and throws a shockwave. One element, four background layers,
   one 9s loop.

   Coordinates are read off the artwork: the warrior's blade sits near
   (17%, 30%), her greatsword near (76%, 55%), and the ground between them at
   (50%, 68%). */
/* The glints and the clash flash never move -- they are pinned to the blades
   and the ground between them, and only their brightness changes. An earlier
   version scaled this whole layer to grow the shockwave, which dragged the
   glints off the swords; the ring is its own element for exactly that reason. */
.fx-fight{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    /* clash core */      radial-gradient(circle at 50% 68%, rgba(255,244,214,.95) 0%, rgba(255,210,120,.5) 18%, transparent 45%),
    /* his blade */       radial-gradient(ellipse 9% 3% at 17% 30%, rgba(255,246,220,.75) 0%, transparent 70%),
    /* her greatsword */  radial-gradient(ellipse 4% 13% at 76% 55%, rgba(255,246,220,.70) 0%, transparent 70%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:0;
  will-change:opacity;
  animation:fight 9s ease-in-out infinite;
}
/* Blades catch the light, then they meet. Dark for two thirds of the loop, so
   it reads as an occasional exchange rather than a strobe. */
@keyframes fight{
  0%,  58% { opacity:0 }
  63%      { opacity:.30 }   /* the blades light up */
  67%      { opacity:.18 }
  70%      { opacity:1 }     /* impact */
  76%      { opacity:.45 }
  88%,100% { opacity:0 }
}

/* The shockwave: a real circle centred on the clash, so scaling it expands the
   ring and nothing else. */
.fx-fight::after{
  content:"";position:absolute;left:50%;top:68%;
  width:26vmax;height:26vmax;margin:-13vmax 0 0 -13vmax;
  border-radius:50%;
  border:2px solid rgba(255,233,168,.45);
  box-shadow:0 0 40px rgba(255,233,168,.25) inset;
  opacity:0;transform:scale(.15);
  animation:shockwave 9s ease-out infinite;
}
@keyframes shockwave{
  0%,  69% { opacity:0;   transform:scale(.15) }
  71%      { opacity:.85; transform:scale(.35) }
  82%      { opacity:.25; transform:scale(1)   }
  90%,100% { opacity:0;   transform:scale(1.3) }
}

/* The camera flinches on the impact. Same 9s clock, and it rides on the wash
   layer rather than the artwork so it does not fight the drift animation. */
body::after{ animation:wash-drift 34s ease-in-out infinite alternate, camera-jolt 9s ease-out infinite }
@keyframes camera-jolt{
  0%,  68%      { transform:translate3d(0,0,0) }
  70%           { transform:translate3d(-4px, 2px, 0) }
  72%           { transform:translate3d( 3px,-2px, 0) }
  74%           { transform:translate3d(-2px, 1px, 0) }
  76%, 100%     { transform:translate3d(0,0,0) }
}

@media (max-width:860px){
  body::before{background-image:none;animation:none}
  html::before{display:none}          /* no idle GPU work on phones */
  .fx-fight{display:none}
  body::after{animation:none}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after,html::before,.fx-fight{animation:none}
  .fx-fight{opacity:0}
}

a{color:var(--jade);text-decoration:none;transition:color .15s}
a:hover{color:var(--jade-hi)}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .55em}
h1{font-size:30px;color:var(--jade-hi)}
h2{font-size:21px}
h3{font-size:17px}

/* Fluid: fills the screen on a wide monitor instead of leaving the backdrop
   showing down both sides, while the cap stops lines getting unreadably long
   on an ultrawide. */
.wrap{width:min(2100px, 94%);margin-inline:auto}
.muted{color:var(--ink-dim)}
.small{font-size:13px}
.center{text-align:center}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--gold);color:#111;padding:8px;z-index:20}

/* ---------------------------------------------------------------- topbar --
   Thin utility strip: live status and the outbound links, so the main nav
   only has to carry real pages. */
.topbar{
  background:rgba(10,7,4,.72);
  border-bottom:1px solid rgba(32,66,58,.8);
  font-size:12.5px;
  backdrop-filter:blur(3px);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0;flex-wrap:wrap}
.topbar a{color:var(--ink-dim)}
.topbar a:hover{color:var(--jade-hi)}
.tb-links{display:flex;gap:18px;align-items:center}

.live{display:inline-flex;align-items:center;gap:8px;color:var(--ink-dim)}
.live b{color:var(--jade-hi);font-weight:600}
.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--jade);
  box-shadow:0 0 0 0 var(--jade-glow);animation:pulse 2.4s infinite;
}
.pulse.off{background:#e05a5a;box-shadow:none;animation:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--jade-glow)}
  70%{box-shadow:0 0 0 7px rgba(232,184,73,0)}
  100%{box-shadow:0 0 0 0 rgba(232,184,73,0)}
}

/* -------------------------------------------------------------- masthead --*/
.masthead{
  background:linear-gradient(180deg,rgba(10,22,20,.80),rgba(7,15,14,.52));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(2px);
}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;flex-wrap:wrap}
.brand img{display:block;width:clamp(230px,32vw,400px);height:auto;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.6))}
.masthead-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.who{color:var(--ink-dim);font-size:13px}
.who strong{color:var(--jade)}

/* ------------------------------------------------------------------- nav --*/
.nav{
  background:linear-gradient(180deg,rgba(22,43,38,.94),rgba(14,28,25,.92));
  border-top:1px solid rgba(255,233,168,.07);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(6px);
}
.nav-in{display:flex;gap:0;flex-wrap:wrap}
.nav-item{
  position:relative;padding:13px 22px;color:var(--ink);
  font-weight:600;letter-spacing:.5px;font-size:14px;
}
.nav-item::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:left .2s,right .2s;
}
.nav-item:hover{color:var(--jade-hi);background:rgba(232,184,73,.07)}
.nav-item:hover::after{left:14%;right:14%}
.nav-item.is-on{color:var(--gold-hi)}
.nav-item.is-on::after{left:14%;right:14%}
.nav-out{color:var(--ink-faint)}

/* ---------------------------------------------------------------- frames --
   Gold corner brackets, the same motif as the login panel's corners. */
.frame{position:relative}
.frame::before,.frame::after{
  content:"";position:absolute;width:20px;height:20px;pointer-events:none;
  border-color:var(--gold);opacity:.85;
}
.frame::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-top-left-radius:var(--radius)}
.frame::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;border-bottom-right-radius:var(--radius)}

/* ------------------------------------------------------------------ hero --*/
.hero{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:44px 40px;margin:0 0 26px;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(232,184,73,.14) 0%, transparent 58%),
    linear-gradient(135deg,rgba(20,40,34,.90) 0%,rgba(9,19,17,.80) 62%);
  box-shadow:var(--shadow);
  backdrop-filter:blur(3px);
}
.hero::after{  /* soft light sweep across the top edge */
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,233,168,.5),transparent);
}
.hero h1{font-size:clamp(28px,3.6vw,42px);margin-bottom:.3em;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero .lede{font-size:16.5px;color:var(--ink);max-width:60ch;margin:0 0 22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}

.eyebrow{
  display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;
}

/* stat strip */
.stat-row{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.stat{flex:1 1 120px;padding-right:20px;position:relative}
.stat + .stat{padding-left:20px}
.stat + .stat::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent)}
.stat b{display:block;font-size:26px;font-family:var(--serif);color:var(--jade-hi);line-height:1.1}
.stat span{font-size:11px;color:var(--ink-dim);letter-spacing:1.2px;text-transform:uppercase}

/* --------------------------------------------------------------- layout --*/
.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;padding:28px 0 44px;align-items:start}
/* The sidebar keeps its width; the extra room goes to the content column. */
@media (max-width:1100px){ .main{grid-template-columns:minmax(0,1fr) 300px;gap:22px} }
@media (max-width:980px){ .main{grid-template-columns:minmax(0,1fr)} }
/* Grid/flex children must be allowed to shrink below their content's intrinsic
   width, otherwise wide cards/grids force horizontal page scroll on phones. */
.main > *, .col-main, .col-side{ min-width:0; }
html, body{ max-width:100%; overflow-x:hidden; }

/* section heading with a flourish */
.sec-h{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.sec-h h2{margin:0;color:var(--gold-hi);font-size:19px;letter-spacing:.5px;white-space:nowrap}
.sec-h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold-lo),transparent)}
.sec-h .more{font-size:13px;color:var(--jade);white-space:nowrap}

/* ----------------------------------------------------------------- cards --*/
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(16,31,28,.94) 0%,rgba(10,21,19,.92) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;margin:0 0 22px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(3px);
  transition:box-shadow .2s,border-color .2s;
}
.card:hover{border-color:var(--line-hi);box-shadow:var(--shadow-lift)}
.card-h{
  margin:-20px -22px 18px;padding:12px 22px;
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(31,63,54,.95),rgba(18,36,31,.95));
  border-bottom:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex;align-items:center;gap:9px;
}
.card-h::before{content:"";width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}

/* ---------------------------------------------------------------- buttons --*/
.btn{
  position:relative;display:inline-block;padding:11px 24px;border-radius:4px;
  cursor:pointer;font-weight:700;letter-spacing:.6px;font-size:14px;
  border:1px solid var(--line-hi);
  background:linear-gradient(180deg,var(--jade),var(--jade-lo));
  color:#04201a;
  box-shadow:0 2px 12px rgba(169,118,42,.28);
  transition:transform .12s, box-shadow .2s, filter .2s;
}
.btn:hover{filter:brightness(1.12);box-shadow:0 4px 20px rgba(232,184,73,.45);
  transform:translateY(-1px);color:#04201a}
.btn:active{transform:translateY(0)}
.btn-lg{padding:14px 32px;font-size:15.5px}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border-color:var(--gold-lo);color:#2a1c04;
  box-shadow:0 2px 12px rgba(232,184,73,.28);
}
.btn-gold:hover{box-shadow:0 4px 20px rgba(232,184,73,.45);color:#2a1c04}
.btn-ghost{background:rgba(255,255,255,.02);border-color:var(--line);color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:rgba(232,184,73,.10);color:var(--jade-hi);border-color:var(--line-hi)}
.btn-block{display:block;width:100%;text-align:center;margin-top:10px}

/* ----------------------------------------------------------------- forms --*/
.field{margin:0 0 16px}
.field label{display:block;margin-bottom:6px;font-size:12.5px;color:var(--ink-dim);
  letter-spacing:.6px;text-transform:uppercase;font-weight:600}
.field input{
  width:100%;padding:11px 13px;border-radius:4px;
  border:1px solid var(--line);background:rgba(5,14,12,.85);color:var(--ink);font-size:15px;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(232,184,73,.16)}
.hint{font-size:12px;color:var(--ink-faint);margin-top:5px}

.flash{padding:12px 16px;border-radius:4px;border-left:3px solid;margin:0 0 18px;font-size:14px}
.flash-error{background:rgba(90,20,20,.55);border-color:#e05a5a;color:#ffc9c9}
.flash-ok{background:rgba(18,41,31,.7);border-color:var(--jade);color:var(--jade-hi)}
.flash-info{background:rgba(20,34,44,.7);border-color:#4aa3d8;color:#c6e6fb}

/* ---------------------------------------------------------------- tables --*/
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(32,66,58,.7)}
.tbl th{color:var(--gold);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:rgba(232,184,73,.06)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .rank{width:54px;color:var(--ink-faint);font-variant-numeric:tabular-nums;font-weight:700}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}

/* medals for the podium */
.rank-1,.rank-2,.rank-3{position:relative;color:#0d1a17;font-weight:800;text-align:center}
.rank-1 i,.rank-2 i,.rank-3 i{
  display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;font-style:normal;font-size:12px;
}
.rank-1 i{background:linear-gradient(180deg,#ffe9a8,#d29a1e);box-shadow:0 0 10px rgba(232,184,73,.5)}
.rank-2 i{background:linear-gradient(180deg,#eef3f1,#9fb0ab)}
.rank-3 i{background:linear-gradient(180deg,#e6b183,#a56a35)}

.tag{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;
  border:1px solid;font-weight:600;letter-spacing:.3px}
.tag.red{color:#ff9c9c;border-color:#6b2626;background:rgba(42,20,20,.8)}
.tag.yellow{color:#ffdf9c;border-color:#6b5726;background:rgba(42,36,20,.8)}
.tag.blue{color:#9cc9ff;border-color:#26456b;background:rgba(20,31,42,.8)}
.tag.none{color:var(--ink-faint);border-color:var(--line)}

/* class chip */
.cls{display:inline-flex;align-items:center;gap:7px}
.cls i{width:7px;height:7px;border-radius:50%;background:var(--jade);opacity:.85;flex:none}
.cls.warrior i{background:#e05a5a}
.cls.assassin i{background:#e8b849}
.cls.sura i{background:#a86ee0}
.cls.shaman i{background:#4aa3d8}
.cls.wolfman i{background:#c98f52}

/* ------------------------------------------------------------ status box --*/
.status ul{list-style:none;margin:0;padding:0}
.status li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid rgba(32,66,58,.6)}
.status li:last-child{border-bottom:0}
.status .nm{display:flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.up{background:var(--jade);box-shadow:0 0 8px var(--jade)}
.dot.down{background:#e05a5a;box-shadow:0 0 8px rgba(224,90,90,.6)}
.st-lbl{font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:700}
.st-lbl.up{color:var(--jade-hi)}
.st-lbl.down{color:#e08a8a}

/* --------------------------------------------------------------- widgets --*/
.cta-card{
  text-align:center;
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(232,184,73,.13) 0%, transparent 60%),
    linear-gradient(180deg,rgba(16,31,28,.94),rgba(10,21,19,.92));
}
.cta-card p{margin:0 0 14px}
.links-list{list-style:none;margin:0;padding:0}
.links-list li{border-bottom:1px solid rgba(32,66,58,.6)}
.links-list li:last-child{border-bottom:0}
.links-list a{display:flex;justify-content:space-between;align-items:center;padding:10px 0;color:var(--ink)}
.links-list a:hover{color:var(--jade-hi);padding-left:5px;transition:padding .15s,color .15s}
.links-list span{color:var(--ink-faint);font-size:12px}

/* ----------------------------------------------------------------- news --*/
.news-item{display:flex;gap:18px;align-items:flex-start}
.news-date{
  flex:none;width:60px;text-align:center;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:rgba(5,14,12,.7);
}
.news-date .d{display:block;font-family:var(--serif);font-size:23px;color:var(--gold-hi);
  line-height:1;padding:8px 0 4px}
.news-date .m{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(31,63,54,.85);padding:3px 0}
.news-body{min-width:0}
.news-body h3{margin:0 0 6px;color:var(--jade-hi)}
.news-meta{font-size:12px;color:var(--ink-faint);margin:0 0 8px}

/* -------------------------------------------------------------- features --*/
/* 200px keeps four across on a 1366 screen; below that they wrap to two,
   which is better than three-plus-one-orphan. */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.feat{
  padding:22px 20px;border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(180deg,rgba(22,48,42,.55),rgba(10,21,19,.45));
  transition:transform .15s,border-color .15s;
}
.feat:hover{transform:translateY(-2px);border-color:var(--line-hi)}
.feat b{display:block;color:var(--gold-hi);font-family:var(--serif);font-size:18px;margin-bottom:8px}
.feat span{font-size:14.5px;color:var(--ink-dim);line-height:1.6}

/* ---------------------------------------------------------------- pager --*/
.pager{display:flex;gap:7px;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 13px;border:1px solid var(--line);border-radius:4px;font-size:13px}
.pager a:hover{border-color:var(--line-hi);background:rgba(232,184,73,.08)}
.pager .on{background:linear-gradient(180deg,var(--jade),var(--jade-lo));color:#04201a;
  border-color:var(--jade-lo);font-weight:700}

/* ------------------------------------------------------------- downloads --*/
.dl{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 0;border-bottom:1px solid rgba(32,66,58,.6)}
.dl:last-child{border-bottom:0}

/* ---------------------------------------------------------------- footer --*/
.foot{
  border-top:1px solid var(--line);margin-top:28px;
  background:linear-gradient(180deg,rgba(6,13,12,.75),rgba(4,9,8,.95));
  color:var(--ink-dim);font-size:13px;
}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding:30px 0 22px}
@media (max-width:760px){ .foot-in{grid-template-columns:1fr} }
.foot h4{font-family:var(--sans);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot a{color:var(--ink-dim)}
.foot a:hover{color:var(--jade-hi)}
.foot-bar{border-top:1px solid rgba(32,66,58,.6);padding:14px 0;font-size:12.5px;color:var(--ink-faint)}

/* ------------------------------------------------------- online counter --*/
.live .sep{color:var(--ink-faint);margin:0 4px}

.online-now{
  display:flex;align-items:baseline;gap:9px;
  padding:4px 0 14px;margin-bottom:12px;
  border-bottom:1px solid rgba(32,66,58,.6);
}
.online-now b{
  font-family:var(--serif);font-size:32px;line-height:1;color:var(--jade-hi);
  text-shadow:0 0 18px rgba(232,184,73,.45);
}
.online-now span{font-size:12px;color:var(--ink-dim);letter-spacing:.6px;text-transform:uppercase}

.emp-bars{margin:0 0 14px;display:grid;gap:7px}
.emp-bar{display:grid;grid-template-columns:58px 1fr 26px;align-items:center;gap:9px;font-size:12px}
.emp-bar .lbl{color:var(--ink-dim)}
.emp-bar .val{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.emp-bar .track{height:6px;border-radius:3px;background:rgba(5,14,12,.9);
  border:1px solid rgba(32,66,58,.8);overflow:hidden}
.emp-bar .track i{display:block;height:100%;border-radius:3px;transition:width .4s}
.emp-bar .track i.red{background:linear-gradient(90deg,#7a2626,#e05a5a)}
.emp-bar .track i.yellow{background:linear-gradient(90deg,#7a6626,#e8b849)}
.emp-bar .track i.blue{background:linear-gradient(90deg,#26456b,#6ab0f0)}
.emp-bar .track i.none{background:var(--line-hi)}

/* -------------------------------------------------------- dojang podium --*/
.champ{background:
  radial-gradient(120% 120% at 50% 0%, rgba(232,184,73,.15) 0%, transparent 62%),
  linear-gradient(180deg,rgba(16,31,28,.94),rgba(10,21,19,.92));}
.podium{list-style:none;margin:0;padding:0}
.pod{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid rgba(32,66,58,.6)}
.pod:last-child{border-bottom:0}
.pod-medal{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#231803;
}
.pod-medal.gold{background:linear-gradient(180deg,#ffe9a8,#d29a1e);
  box-shadow:0 0 12px rgba(232,184,73,.55)}
.pod-medal.silver{background:linear-gradient(180deg,#eef3f1,#9fb0ab)}
.pod-medal.bronze{background:linear-gradient(180deg,#e6b183,#a56a35)}
.pod-who{flex:1;min-width:0}
.pod-name{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-1 .pod-name{font-size:18px;color:var(--gold-hi)}
.pod-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;margin-top:2px}
.pod-lvl{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:13px}
.champ-foot{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(32,66,58,.6);color:var(--ink-faint)}

/* ------------------------------------------------------- features page ----*/
.hero-feat .hero-lead{
  font-family:var(--serif);font-size:22px;line-height:1.4;
  color:var(--jade-hi);margin:0 0 12px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:520px){ .hero-cta .btn{flex:1 1 100%;text-align:center} }

/* ==========================================================================
   Presentation page (.pf-*)
   Namespaced deliberately: the old rules here were called .feat, which collides
   with the .feat card grid on the home page — the row layout was leaking into
   it and overriding the grid. Everything below is scoped to this page only.

   The screenshots are the argument on this page, so the chrome stays quiet:
   no card borders around rows, generous space, and one gold accent per row.
   ========================================================================== */

.pf{--pf-gutter:clamp(28px,5vw,64px)}

/* ------------------------------------------------------------------ hero --*/
.pf-hero{position:relative;padding:clamp(34px,6vw,66px) var(--pf-gutter) clamp(30px,5vw,52px);
  margin:0 0 40px;border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(232,184,73,.13) 0%, rgba(232,184,73,0) 62%),
    linear-gradient(180deg,rgba(18,36,31,.95) 0%,rgba(8,17,15,.94) 100%);
  box-shadow:var(--shadow);text-align:center;overflow:hidden}
/* Hairline of light along the top edge — reads as polish, costs nothing. */
.pf-hero::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--jade-hi),transparent);opacity:.55}

.pf-kicker{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--jade)}
.pf-title{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,7vw,68px);line-height:1.04;color:var(--gold-hi);
  text-shadow:0 2px 30px rgba(232,184,73,.22)}
.pf-lead{margin:14px auto 0;max-width:60ch;font-size:clamp(16px,2vw,19px);
  color:var(--ink);line-height:1.55}

/* Ornamental rule between the lead and the numbers. */
.pf-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,46px);
  margin:26px auto 0;padding:22px 0 0;max-width:640px;
  border-top:1px solid rgba(47,106,88,.55)}
.pf-stat{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px}
.pf-stat b{display:flex;align-items:center;gap:7px;font-family:var(--serif);
  font-size:clamp(26px,4vw,34px);line-height:1;color:var(--jade-hi);font-weight:400}
.pf-stat span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint)}
.pf-stat-live b{color:var(--gold-hi)}

.pf-body{margin:26px auto 0;max-width:70ch;color:var(--ink-dim);line-height:1.75}
.pf-pledge{margin:16px auto 0;max-width:60ch;padding:13px 20px;
  border-left:2px solid var(--gold);border-radius:0 4px 4px 0;
  background:rgba(232,184,73,.06);color:var(--ink);font-size:14.5px;line-height:1.6;text-align:left}
.pf-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
@media (max-width:520px){ .pf-cta .btn{flex:1 1 100%;text-align:center} }

/* ------------------------------------------------------------------- nav --*/
/* 16 systems is a wall of scroll. These pills stay reachable the whole way
   down and light up for whichever group is on screen. */
.pf-nav{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 6px;padding:12px 0;
  background:linear-gradient(var(--bg) 62%,rgba(7,13,12,.86) 86%,rgba(7,13,12,0));
  backdrop-filter:blur(6px)}
.pf-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;
  border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;
  color:var(--ink-dim);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,43,38,.9),rgba(12,24,21,.9));
  transition:color .15s,border-color .15s,box-shadow .2s}
.pf-nav a span{font-size:11px;color:var(--ink-faint);font-weight:400}
.pf-nav a:hover,.pf-nav a:focus-visible{color:var(--jade-hi);border-color:var(--line-hi)}
.pf-nav a:hover span{color:var(--jade)}
.pf-nav a.is-active{color:#04201a;border-color:var(--jade-lo);
  background:linear-gradient(180deg,var(--jade),var(--jade-lo));
  box-shadow:0 2px 14px rgba(232,184,73,.32)}
.pf-nav a.is-active span{color:rgba(4,32,26,.7)}

/* --------------------------------------------------------------- group ----*/
.pf-group{display:flex;align-items:center;gap:16px;
  margin:52px 0 26px;scroll-margin-top:76px;
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.4vw,24px);
  color:var(--gold-hi)}
.pf-group span{white-space:nowrap}
.pf-group::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(232,184,73,.5),rgba(232,184,73,0))}

/* ----------------------------------------------------------------- rows ---*/
.pf-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:center;margin:0 0 clamp(30px,4vw,52px)}
.pf-row-alt .pf-shot{order:2}
.pf-row-wide{grid-template-columns:1fr;gap:24px}
.pf-row-wide .pf-shot{order:0}

.pf-shot{position:relative;margin:0;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:#05100e;
  box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.55);
  transition:transform .25s ease, border-color .25s, box-shadow .25s}
.pf-row:hover .pf-shot{transform:translateY(-3px);border-color:var(--line-hi);
  box-shadow:0 20px 52px rgba(0,0,0,.6), 0 0 0 1px rgba(232,184,73,.14)}
/* Inner hairline so a screenshot with a dark edge still reads as framed. */
.pf-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,233,168,.07)}
.pf-shot img{display:block;width:100%;height:auto;
  /* UI captures vary wildly in aspect; contain keeps them uncropped */
  max-height:400px;object-fit:contain;object-position:center}
.pf-row-wide .pf-shot img{max-height:320px;object-fit:cover}

.pf-text{position:relative}
.pf-num{display:block;margin:0 0 6px;font-family:var(--serif);font-size:13px;
  letter-spacing:2px;color:var(--gold-lo)}
.pf-text h3{margin:0 0 10px;font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.8vw,27px);line-height:1.2;color:var(--gold-hi)}
.pf-row-lead{margin:0 0 12px;color:var(--jade);font-size:15.5px;font-weight:600;line-height:1.5}
.pf-row-body{margin:0;color:var(--ink-dim);line-height:1.75}

@media (max-width:780px){
  .pf-row,.pf-row-wide{grid-template-columns:1fr;gap:18px}
  .pf-row-alt .pf-shot{order:0}
  .pf-shot img,.pf-row-wide .pf-shot img{max-height:300px}
  .pf-group{margin:38px 0 20px}
}

/* ---------------------------------------------------------------- outro ---*/
.pf-outro{margin:52px 0 0;padding:clamp(30px,5vw,50px) var(--pf-gutter);
  border:1px solid var(--line);border-radius:var(--radius);text-align:center;
  background:
    radial-gradient(110% 130% at 50% 120%, rgba(232,184,73,.12) 0%, rgba(232,184,73,0) 60%),
    linear-gradient(180deg,rgba(8,17,15,.94),rgba(18,36,31,.95))}
.pf-outro h2{margin:0 0 12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.4vw,32px);color:var(--gold-hi)}
.pf-outro p{margin:0 auto;max-width:56ch;color:var(--ink-dim);line-height:1.7}

/* Live dot, shared by the hero stat and anywhere else a heartbeat is shown. */
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--jade);
  box-shadow:0 0 0 3px var(--jade-glow);animation:pulse-live 2.4s ease-in-out infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .dot-live{animation:none}
  .pf-row:hover .pf-shot{transform:none}
}

/* -------------------------------------------------- live counter ticks ----*/
/* The counter tweens its digits in JS; this is the colour cue that goes with
   it. Green when players join, amber when they leave. */
@keyframes tick-up{
  0%  {color:var(--jade-hi);text-shadow:0 0 14px var(--jade-glow)}
  100%{color:inherit;text-shadow:none}
}
@keyframes tick-down{
  0%  {color:var(--gold-hi);text-shadow:0 0 14px rgba(232,184,73,.35)}
  100%{color:inherit;text-shadow:none}
}
[data-live="total"].tick-up,
[data-live="total-top"].tick-up   {animation:tick-up .9s ease-out}
[data-live="total"].tick-down,
[data-live="total-top"].tick-down {animation:tick-down .9s ease-out}

/* Digits change width as they count, which makes the surrounding text jitter. */
[data-live="total"],[data-live="total-top"],
.emp-bar .val{font-variant-numeric:tabular-nums}

/* The bars are set as inline widths by the poller, so transition them here
   rather than animating in JS. */
.emp-bar .track i{transition:width .6s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion: reduce){
  [data-live="total"],[data-live="total-top"]{animation:none}
  .emp-bar .track i{transition:none}
}

/* ------------------------------------------------------ active events -----*/
.ev-card{padding:8px 0}
.ev-list{list-style:none;margin:0;padding:0}
.ev{display:flex;align-items:center;gap:14px;padding:11px 20px;
  border-bottom:1px solid rgba(32,66,58,.55)}
.ev:last-child{border-bottom:0}

/* The icons are 32px game assets: keep them crisp rather than smoothed. */
.ev-icon{flex:none;width:32px;height:32px;image-rendering:-webkit-optimize-contrast;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}

.ev-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ev-name{font-family:var(--serif);font-size:15.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-time{font-size:12px;color:var(--ink-dim);letter-spacing:.4px;
  font-variant-numeric:tabular-nums}
.ev-time.ev-soon{color:var(--gold-hi)}      /* under an hour */
.ev-time.ev-over{color:var(--ink-faint)}
.ev-open{color:var(--jade)}

/* Steady pulse: says "this is live" without demanding attention. */
.ev-dot{flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--jade);box-shadow:0 0 0 0 var(--jade-glow);
  animation:ev-pulse 2.4s ease-out infinite}
@keyframes ev-pulse{
  0%  {box-shadow:0 0 0 0 var(--jade-glow)}
  70% {box-shadow:0 0 0 9px rgba(232,184,73,0)}
  100%{box-shadow:0 0 0 0 rgba(232,184,73,0)}
}

@media (prefers-reduced-motion: reduce){ .ev-dot{animation:none} }
@media (max-width:520px){ .ev-name{white-space:normal} }

/* -------------------------------------------------------- admin panel -----*/
/* Textareas are only used in the admin forms; match .field input exactly so
   the two never drift apart visually. */
.field textarea{
  width:100%;padding:11px 13px;border-radius:4px;
  border:1px solid var(--line);background:rgba(5,14,12,.85);color:var(--ink);
  font:inherit;font-size:14.5px;line-height:1.6;resize:vertical;min-height:150px;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea:focus{outline:none;border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(232,184,73,.16)}

.field .chk{display:flex;align-items:center;gap:9px;text-transform:none;
  letter-spacing:0;font-size:14px;color:var(--ink);cursor:pointer}
.field .chk input{width:auto;margin:0;accent-color:var(--jade)}

.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-danger{border-color:#7d2b2b;color:#ffb4b4}
.btn-danger:hover{background:rgba(190,60,60,.16);border-color:#a33b3b;color:#ffd2d2}

/* Keep each row's buttons on one line without them stretching the cell. */
.row-acts{white-space:nowrap;text-align:right}
.row-acts .btn{margin-left:6px}
form.inline{display:inline}

.nav-admin{color:var(--gold-hi)}

@media (max-width:640px){
  .row-acts{white-space:normal;text-align:left}
  .row-acts .btn{margin:3px 6px 3px 0}
}

/* Two fields side by side (item + count on the send-item form). */
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:0 16px}
@media (max-width:560px){ .grid-2{grid-template-columns:1fr} }

/* --------------------------------------------------- admin: bonuses -------*/
.adv{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;background:rgba(5,14,12,.4)}
.adv summary{cursor:pointer;font-weight:600;color:var(--gold-hi);letter-spacing:.4px}
.adv[open] summary{margin-bottom:12px}

.attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.attr-row{display:flex;align-items:center;gap:8px}
.attr-n{flex:none;width:22px;font-size:11px;color:var(--ink-faint);
  text-align:center;font-variant-numeric:tabular-nums}
.attr-row select{flex:1;min-width:0;padding:8px 10px;border-radius:4px;
  border:1px solid var(--line);background:rgba(5,14,12,.85);color:var(--ink);font-size:13px}
.attr-row input{flex:0 0 96px;padding:8px 10px;border-radius:4px;
  border:1px solid var(--line);background:rgba(5,14,12,.85);color:var(--ink);font-size:13px}
.attr-row select:focus,.attr-row input:focus{outline:none;border-color:var(--jade)}
@media (max-width:700px){ .attr-grid{grid-template-columns:1fr} }

/* ------------------------------------------------------ admin: logs -------*/
.log-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.log-tab{padding:8px 15px;border-radius:4px;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink-dim)}
.log-tab:hover{color:var(--jade-hi);border-color:var(--line-hi)}
.log-tab.is-on{color:#04201a;background:linear-gradient(180deg,var(--jade),var(--jade-lo));
  border-color:var(--line-hi)}

.log-search{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.log-search input{flex:1;min-width:200px;padding:9px 12px;border-radius:4px;
  border:1px solid var(--line);background:rgba(5,14,12,.85);color:var(--ink);font-size:14px}
.log-search input:focus{outline:none;border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(232,184,73,.16)}

/* Log rows are wide; scroll the table, never the page. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll .tbl{min-width:720px;font-size:13px}
.tbl-scroll .tbl td{white-space:nowrap}

.pager{display:flex;align-items:center;gap:12px;justify-content:center;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(32,66,58,.6)}

/* Converted timestamps: hint that the tooltip has the exact value. */
time[data-dt]{border-bottom:1px dotted rgba(138,169,158,.45);cursor:help}

/* ==========================================================================
   Background music
   A quiet dock in the corner. The iframe is parked off-screen rather than
   display:none -- a hidden YouTube player is allowed to stop itself in some
   browsers, and 1x1 with opacity 0 keeps it alive without showing anything.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bgm{position:fixed;right:14px;bottom:14px;z-index:30;
  display:flex;align-items:center;gap:8px;flex-direction:row-reverse}

.bgm-frame{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}

.bgm-btn{width:40px;height:40px;flex:0 0 40px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);color:var(--ink-dim);
  box-shadow:var(--shadow);transition:border-color .18s,color .18s,transform .18s}
.bgm-btn:hover{border-color:var(--line-hi);color:var(--jade);transform:translateY(-1px)}
.bgm-btn:focus-visible{outline:none;border-color:var(--jade);
  box-shadow:0 0 0 3px var(--jade-glow)}

/* Four bars: flat when paused, dancing when playing. Cheap, and it reads as
   "sound" without needing an icon font. */
.bgm-ico{display:flex;align-items:flex-end;gap:2px;height:16px}
.bgm-bar{width:3px;height:4px;border-radius:1px;background:currentColor;
  transition:height .18s}
.bgm.is-playing .bgm-btn{color:var(--jade);border-color:var(--line-hi)}
.bgm.is-playing .bgm-bar{animation:bgm-eq .9s ease-in-out infinite}
.bgm.is-playing .bgm-bar:nth-child(2){animation-delay:.15s}
.bgm.is-playing .bgm-bar:nth-child(3){animation-delay:.30s}
.bgm.is-playing .bgm-bar:nth-child(4){animation-delay:.45s}
@keyframes bgm-eq{0%,100%{height:4px}50%{height:15px}}

/* The title only earns its space while something is actually playing, and it
   must never push the page around -- hence the fixed dock and the clamp. */
.bgm-track{max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:12px;color:var(--ink-dim);opacity:0;
  transition:max-width .35s ease,opacity .35s ease;
  background:rgba(16,31,28,.92);border:1px solid var(--line);
  border-radius:999px;line-height:1;padding:0}
.bgm.is-playing .bgm-track{max-width:min(40vw,260px);opacity:1;padding:9px 12px}

@media (prefers-reduced-motion:reduce){
  .bgm.is-playing .bgm-bar{animation:none;height:10px}
  .bgm-track{transition:none}
}

/* On a phone the dock would sit on top of content; keep the button, drop the
   title so it stays a 40px circle. */
@media (max-width:560px){
  .bgm{right:10px;bottom:10px}
  .bgm.is-playing .bgm-track{display:none}
}

/* ==========================================================================
   Language switcher
   Flags are inline SVG, so they inherit the page and cost no extra request.
   Dimmed until hover so five of them do not compete with the live counter.
   ========================================================================== */
.langs{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  padding-left:10px;border-left:1px solid rgba(32,66,58,.75)}

.lang{display:inline-flex;padding:2px;border-radius:3px;line-height:0;
  border:1px solid transparent;opacity:.55;
  transition:opacity .15s,border-color .15s,transform .15s}
.lang:hover{opacity:1;transform:translateY(-1px)}
.lang.is-on{opacity:1;border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(232,184,73,.16)}
.lang:focus-visible{outline:none;opacity:1;border-color:var(--jade);
  box-shadow:0 0 0 3px var(--jade-glow)}

.flag{display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}

/* The top bar is already tight on a phone; the flags stay but lose the rule
   and some padding rather than wrapping onto their own line. */
@media (max-width:560px){
  .langs{margin-left:6px;padding-left:6px;gap:3px}
}

/* Set while an in-place navigation is fetching. Only a slight dimming: the
   swap is usually fast enough that a spinner would flash and look broken. */
body.is-navigating main#main{opacity:.6;transition:opacity .12s}

/* Playing, but muted because the browser has not granted audible autoplay yet.
   A slow pulse in gold: visible enough to explain the silence, quiet enough
   not to nag. Any click on the page clears it. */
.bgm.is-armed .bgm-btn{color:var(--gold);border-color:var(--gold-lo);
  animation:bgm-wake 2s ease-in-out infinite}
.bgm.is-armed .bgm-bar{height:4px}
@keyframes bgm-wake{
  0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:var(--shadow),0 0 0 4px rgba(232,184,73,.18)}
}
@media (prefers-reduced-motion:reduce){
  .bgm.is-armed .bgm-btn{animation:none}
}

/* ==========================================================================
   Donation shop
   ========================================================================== */
.pkg-grid{display:grid;gap:14px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.pkg{display:flex;flex-direction:column;padding:16px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);transition:border-color .18s,transform .18s}
.pkg:hover{border-color:var(--line-hi);transform:translateY(-2px)}

.pkg-t{margin:0 0 4px;font-family:var(--serif);font-size:17px;color:var(--gold-hi)}
.pkg-c{margin:0 0 2px;color:var(--jade);font-size:14px}
.pkg-p{margin:10px 0 12px;font-size:22px;font-weight:700;color:var(--ink)}
/* Pushes the buttons to the bottom so cards of different heights line up. */
.pkg-btns{margin-top:auto;display:grid;gap:6px}

.btn-small{padding:4px 10px;font-size:12px}

/* Order status. Muted by default; only the two that need attention carry
   colour, so a long history does not look like a wall of alarms. */
.st-pending,.st-paid,.st-credited,.st-rejected,.st-failed{
  font-size:12px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap}
.st-credited{color:var(--jade);border-color:var(--line-hi)}
.st-paid{color:var(--gold);border-color:var(--gold-lo)}
.st-rejected,.st-failed{color:#e07a7a;border-color:#5c2b2b}

/* ================================================================
   AVATARS — 2.0 redesign layer (new-school). Overrides the look;
   layout skeleton (grids/columns) kept so every feature still works.
   ================================================================ */
:root{
  --serif:"Cinzel", Georgia, serif;
  --sans:"Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --radius:14px;
  --card-bg:rgba(20,15,10,.64);
  --card-brd:rgba(232,184,73,.20);
  --card-shadow:0 22px 60px rgba(0,0,0,.55);
  --gold:#e8b849; --gold-hi:#ffe9a8; --gold-lo:#a9762a;
}
body{ font-family:var(--sans); letter-spacing:.005em; }

/* Headings get the display serif */
h1,h2,h3,.card-h,.sec-h,.eyebrow,.online-now b,.num,.news-date .d{
  font-family:var(--serif); font-weight:700; letter-spacing:.015em;
}
h1,.hero h1{ font-size:clamp(36px,5vw,60px); line-height:1.02; color:var(--gold-hi);
  text-shadow:0 2px 24px rgba(232,184,73,.18); }

/* Calmer, more premium backdrop */
.fx-fight{ opacity:0 !important; }
html::before{ opacity:.22; }
body::after{
  background:
    linear-gradient(180deg, rgba(8,6,4,.28) 0%, rgba(8,6,4,.62) 55%, rgba(8,6,4,.95) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(232,184,73,.08) 0%, transparent 55%);
}

/* ---- Glass cards ---- */
.card,.hero.frame,.card.status,.card.cta-card,.card.frame{
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  backdrop-filter:blur(12px) saturate(1.1);
}
.frame::before,.frame::after{ display:none; }   /* drop corner ticks for a clean edge */
.card-h{ font-size:15px; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-hi); }
.sec-h{ font-size:22px; }
.sec-h::after{ background:linear-gradient(90deg, rgba(232,184,73,.5), transparent); }

/* ---- Topbar / masthead / nav ---- */
.topbar{ background:rgba(8,6,4,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.nav{
  background:rgba(12,9,6,.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid rgba(232,184,73,.12); border-bottom:1px solid rgba(232,184,73,.12);
}
.nav-item{ font-family:var(--serif); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:13px; }
.nav-item::after{ height:3px; background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi)); border-radius:3px; }

/* ---- Hero ---- */
.hero{ overflow:hidden; }
.eyebrow{
  display:inline-block; font-family:var(--serif); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#1a120a;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); padding:6px 14px; border-radius:999px;
  box-shadow:0 4px 16px rgba(232,184,73,.3);
}
.lede{ font-size:17px; color:#d7cbb4; max-width:60ch; }

/* ---- Buttons: gold pills ---- */
.btn{
  border-radius:999px; font-family:var(--serif); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; font-size:13px; padding:13px 26px; border:1px solid transparent;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.btn-gold,.btn-lg{
  background:linear-gradient(180deg,var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%);
  color:#241706; box-shadow:0 8px 24px rgba(232,184,73,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover,.btn-lg:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,184,73,.42); filter:brightness(1.05); }
.btn-ghost{ background:rgba(255,255,255,.03); border:1px solid rgba(232,184,73,.35); color:var(--gold-hi); }
.btn-ghost:hover{ background:rgba(232,184,73,.1); transform:translateY(-2px); }

/* ---- Stat tiles ---- */
.stat .num{ font-size:34px; color:var(--gold-hi); }
.stat .lbl{ text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:#a99877; }

/* ---- Status panel ---- */
.online-now b{ color:var(--gold-hi); }
.dot.up,.st-lbl.up{ color:#8fe3a0 !important; }
.status li{ border-color:rgba(232,184,73,.1) !important; }
.emp-bar{ border-radius:999px; overflow:hidden; }

/* ---- Rankings table ---- */
.tbl{ border-collapse:separate; border-spacing:0; }
.tbl th{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.12em; font-size:11px;
  color:#b39a63; border-bottom:1px solid rgba(232,184,73,.2); }
.tbl td{ border-bottom:1px solid rgba(255,255,255,.05); }
.tbl tbody tr:hover td{ background:rgba(232,184,73,.06); }
.rank-1 i{ background:linear-gradient(180deg,#ffe9a8,#e8b849)!important; color:#241706!important; }
.rank-2 i{ background:linear-gradient(180deg,#e9e9ef,#b8bcc8)!important; color:#23242a!important; }
.rank-3 i{ background:linear-gradient(180deg,#f0c08a,#c98a4e)!important; color:#2a1708!important; }

/* ---- Features grid ---- */
.feat{ border-radius:var(--radius); border:1px solid var(--card-brd); background:rgba(26,19,12,.5);
  transition:transform .18s, border-color .18s, box-shadow .18s; }
.feat:hover{ transform:translateY(-4px); border-color:rgba(232,184,73,.45); box-shadow:0 14px 34px rgba(0,0,0,.4); }

/* ---- News ---- */
.news-date{ border-radius:12px; background:linear-gradient(180deg,rgba(232,184,73,.14),rgba(232,184,73,.04));
  border:1px solid rgba(232,184,73,.2); }
.news-date .d{ color:var(--gold-hi); }

/* ---- Footer ---- */
.foot{ background:rgba(6,4,3,.6); border-top:1px solid rgba(232,184,73,.12); }

/* ---- Features profile page (pf-*) ---- */
.pf-hero,.pf-shot,.pf-nav a{ border-radius:var(--radius); border-color:var(--card-brd)!important; }
.pf-nav a:hover{ background:rgba(232,184,73,.12); }

@media (max-width:860px){ h1,.hero h1{ font-size:clamp(30px,8vw,40px); } }

/* ---- Mobile hamburger navigation ------------------------------------- */
.nav-toggle{display:none;align-items:center;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;color:var(--gold-hi,#ffe9a8);
  font-family:var(--serif,"Cinzel",serif);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:14px;padding:13px 22px}
.nav-burger{position:relative;display:inline-block;width:22px;height:2px;border-radius:2px;
  background:currentColor;transition:background .2s ease}
.nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0;width:22px;height:2px;
  border-radius:2px;background:currentColor;transition:transform .2s ease, top .2s ease}
.nav-burger::before{top:-7px}
.nav-burger::after{top:7px}
.nav-in.nav-open .nav-burger{background:transparent}
.nav-in.nav-open .nav-burger::before{top:0;transform:rotate(45deg)}
.nav-in.nav-open .nav-burger::after{top:0;transform:rotate(-45deg)}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-in{flex-direction:column;align-items:stretch}
  .nav-in .nav-item{display:none;width:100%;padding:13px 22px;
    border-top:1px solid var(--line,rgba(255,233,168,.08))}
  .nav-in.nav-open .nav-item{display:block}
  .nav-in .nav-item::after{display:none}
}

/* ---- Lenis smooth scrolling (desktop) -------------------------------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }