/* Back2GunZ -- original stylesheet (no third-party template assets).
   Palette matches the main Back2GunZ site: near-black ground, red/ember accent. */

:root{
  --bg:#0a0a0c;
  --bg-raised:#131316;
  --panel:#17171b;
  --line:rgba(255,255,255,0.08);
  --red-700:#9f1414;
  --red-600:#c41e1e;
  --red-500:#e0342f;
  --ember:#ff5a1f;
  --text:#e7e5e4;
  --text-dim:#a3a1a0;
  --text-faint:#6b6a68;
  --ok:#5fbf5f;
  --bad:#e0342f;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#0e0e0e;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:14px;
  line-height:1.5;
}
a{color:var(--ember);text-decoration:none;}
a:hover{color:var(--red-500);}
h1,h2,h3{font-family:'Oswald',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.02em;}

#wrapper{max-width:1200px;margin:0 auto;padding:0 16px 60px;}

/* ---------- Header ----------
   A single self-contained, aspect-ratio-locked block holding the full
   header artwork (never cropped, scales as one piece at any screen width).
   2026-09-22: replaced with a new background+wordmark image where both
   were authored together as one piece (not two separate layers needing
   alignment), so it's used as-is -- no CSS overlay/compositing needed. */
#header-art{
  display:block;
  width:100%;
  max-width:1017px;
  aspect-ratio:1833/680;
  margin:0 auto 20px;
  background:url(../images/igunz-bg.png?v=6) no-repeat center/contain;
}

/* ---------- Nav -- real iGunz per-button art (each button's label is baked into
   its own image, so the link text is kept for accessibility/SEO but visually
   hidden). Buttons sit edge-to-edge like the original, with matching end-caps. ---------- */
#navbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  margin-top:0;
  margin-bottom:20px;
  position:relative;
  z-index:2;
}
#navbar a{
  display:block;
  height:60px;
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
  background-repeat:no-repeat;
  flex:none;
}
.navcap{display:block;height:60px;flex:none;background-repeat:no-repeat;}
.navcap-left{width:32px;background-image:url(../images/igunz/navbar/left.png);}
.navcap-right{width:31px;background-image:url(../images/igunz/navbar/right.png);}

#navbar a:nth-of-type(1){width:75px; background-image:url(../images/igunz/navbar/1.png);}
#navbar a:nth-of-type(1):hover{background-image:url(../images/igunz/navbar/1_hover.png);}
#navbar a:nth-of-type(2){width:110px;background-image:url(../images/igunz/navbar/2.png);}
#navbar a:nth-of-type(2):hover{background-image:url(../images/igunz/navbar/2_hover.png);}
#navbar a:nth-of-type(3){width:108px;background-image:url(../images/igunz/navbar/3.png);}
#navbar a:nth-of-type(3):hover{background-image:url(../images/igunz/navbar/3_hover.png);}
#navbar a:nth-of-type(4){width:130px;background-image:url(../images/igunz/navbar/4.png);}
#navbar a:nth-of-type(4):hover{background-image:url(../images/igunz/navbar/4_hover.png);}
#navbar a:nth-of-type(5){width:95px; background-image:url(../images/igunz/navbar/5.png);}
#navbar a:nth-of-type(5):hover{background-image:url(../images/igunz/navbar/5_hover.png);}
#navbar a:nth-of-type(6){width:119px;background-image:url(../images/igunz/navbar/6.png);}
#navbar a:nth-of-type(6):hover{background-image:url(../images/igunz/navbar/6_hover.png);}
#navbar a:nth-of-type(7){width:126px;background-image:url(../images/igunz/navbar/7.png);}
#navbar a:nth-of-type(7):hover{background-image:url(../images/igunz/navbar/7_hover.png);}
#navbar a:nth-of-type(8){width:85px; background-image:url(../images/igunz/navbar/8.png);}
#navbar a:nth-of-type(8):hover{background-image:url(../images/igunz/navbar/8_hover.png);}

@media (max-width:700px){
  .navcap{display:none;}
}

/* ---------- Layout columns ---------- */
#left{
  float:left;
  width:270px;
}
#right{
  margin-left:294px;
}
.clearfix{clear:both;}

/* ---------- Panels -- real iGunz panel-chrome art, stretched to fit our fluid
   layout (the originals were fixed-pixel-width; background-size:100% keeps the
   same look at any container width). ---------- */
.t{
  background:url(../images/igunz/small_t.png) no-repeat;
  background-size:100% 100%;
  padding:11px 14px 8px;
  font-family:'Oswald',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:1px 1px 1px #000;
}
.m{
  background:url(../images/igunz/small_m.png) repeat-y;
  background-size:100% auto;
  padding:12px 14px;
  text-shadow:1px 1px 1px #000;
}
.b{
  height:14px;
  background:url(../images/igunz/small_b.png) no-repeat;
  background-size:100% 100%;
  margin-bottom:18px;
}

.serverstatus{
  background:url(../images/igunz/serverstatus.png) no-repeat;
  background-size:100% 100%;
  aspect-ratio:213/87;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 14px 8px 16px;
  font-size:.82rem;
  margin-bottom:14px;
  color:#fff;
  /* Heavy outline (not just a soft drop-shadow) so the text stays readable
     no matter what part of the character-portrait background sits behind
     it -- a plain 1px shadow disappeared against the brighter face area. */
  text-shadow:-1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,1px 1px 2px #000,0 0 6px rgba(0,0,0,.9);
}

/* #right's panels use the wider "big_*" art instead of the sidebar's "small_*" */
#right .t{background-image:url(../images/igunz/big_t.png);}
#right .m{background-image:url(../images/igunz/big_m.png);}
#right .b{background-image:url(../images/igunz/big_b.png);}
.donatebtn{
  display:block;
  text-align:center;
  background:linear-gradient(135deg,var(--red-600),var(--ember));
  color:#fff;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.8rem;
  padding:10px;
  border-radius:8px;
  margin-bottom:14px;
}
.donatebtn:hover{filter:brightness(1.1);color:#fff;}

/* ---------- Community page -- social link buttons ---------- */
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.social-btn{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--red-600),var(--ember));
  color:#fff;
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;font-size:.8rem;
  padding:10px 16px;border-radius:8px;
}
.social-btn:hover{filter:brightness(1.1);color:#fff;}
.social-btn-disabled{
  background:var(--bg-raised);
  color:var(--text-faint);
  border:1px solid var(--line);
  cursor:default;
}
.social-btn-disabled small{
  font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;
  font-size:.68rem;font-weight:400;color:var(--text-faint);
}
.social-icon{font-size:1rem;line-height:1;}
@media (max-width:700px){
  .social-btn{flex:1 1 calc(50% - 10px);justify-content:center;}
}

/* ---------- Form fields ---------- */
.inputbg,input[type="text"],input[type="password"],input[type="email"]{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  padding:8px 10px;
  font-size:.85rem;
  margin-bottom:6px;
}
.inputbg:focus,input:focus{outline:none;border-color:var(--ember);}
.submitbg,input[type="submit"],button{
  background:var(--red-600);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:8px 16px;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s;
}
.submitbg:hover,input[type="submit"]:hover,button:hover{background:var(--ember);}

/* ---------- Ranking widget tabs ---------- */
.tabs{display:flex;gap:6px;margin-top:8px;}
.tabs .item{
  flex:1;
  text-align:center;
  padding:6px 0;
  background:var(--bg-raised);
  border-radius:6px;
  font-size:.72rem;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-dim);
  cursor:pointer;
}
.tabs .item:hover{color:var(--ember);}
#moving_tab .content{overflow:hidden;}
#moving_tab ul{list-style:none;margin:0;padding:0;}
#moving_tab .inputbg{
  padding:6px 8px;
  margin-bottom:4px !important;
  border-radius:6px;
}

/* ---------- Announcement marquee bar ---------- */
.anounce{
  display:flex;
  align-items:stretch;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  font-size:.8rem;
  color:var(--text-dim);
  margin-bottom:16px;
}
.anounce-label{
  flex:none;
  display:flex;
  align-items:center;
  padding:0 16px;
  background:url(../images/igunz/small_t.png) no-repeat;
  background-size:100% 100%;
  color:#fff;
  font-family:'Oswald',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:-1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,1px 1px 2px #000;
  white-space:nowrap;
}
.anounce marquee{flex:1;padding:8px 12px;}

/* ---------- Item showcase (Donor Coins page) -- real iGunz item-shop art ---------- */
.itemshowcase{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:6px 0 16px;
}
.itemcard{
  display:block;
  width:100px;
  text-align:center;
  font-size:.72rem;
  color:var(--text-dim);
}
.itemcard-price{
  display:inline-block;
  margin-top:3px;
  color:var(--ember);
  font-weight:700;
  font-size:.7rem;
}
.itemcard .itembg{
  width:95px;height:95px;
  margin:0 auto 6px;
  background:url(../images/igunz/itembg.png) no-repeat;
  background-size:100% 100%;
  display:flex;align-items:center;justify-content:center;
}
.itemcard .itembg img{max-width:70%;max-height:70%;}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%;}
table[border]{border:1px solid var(--line) !important;}
table th{
  background:var(--bg-raised);
  color:var(--text-dim);
  text-align:left;
  padding:8px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
table td{padding:7px 8px;border-top:1px solid var(--line);}

/* ---------- Screenshot gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.gallery a{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s;}
.gallery a:hover img{transform:scale(1.06);}
.gallery span{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;font-size:.7rem;font-weight:600;
  padding:16px 8px 6px;
  text-transform:uppercase;letter-spacing:.03em;
}
@media (max-width:700px){
  .gallery{grid-template-columns:repeat(2,1fr);}
}

/* ---------- News items -- real iGunz panel + icon-badge art ---------- */
.newsbg{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  margin-bottom:10px;
  background:url(../images/igunz/panelbg.png) no-repeat;
  background-size:100% 100%;
}
.newsbg:last-child{border-bottom:none;}
.newsbg .icon{
  flex:none;
  /* Wider than tall (not the original square iconbg shape) so the
     Back2Gunz wordmark -- a wide banner logo, not an icon-shaped image --
     actually reads clearly instead of shrinking to a thin sliver inside a
     square badge. */
  width:110px;height:56px;
  background-color:#000;
  /* CSS stacks multiple backgrounds with the FIRST layer on TOP -- the logo
     must come before iconbg.png (which is a solid black square) or the
     logo is fully hidden underneath it, not behind it. */
  background-image:url(../images/igunz/news-icon.png?v=3), url(../images/igunz/iconbg.png);
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  background-size:90% auto, 100% 100%;
  display:flex;align-items:center;justify-content:center;
  color:transparent;font-family:'Oswald',sans-serif;font-weight:700;font-size:1.1rem;
}
.newsbg .title{font-weight:600;color:var(--text);}
.newsbg .date{font-size:.72rem;color:var(--text-faint);margin-bottom:4px;}
.newsbg .news p{margin:4px 0 0;color:var(--text-dim);font-size:.85rem;}
.newsbg .badge{
  display:inline-block;
  font-family:'Oswald',sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:4px;
  margin-right:6px;
  vertical-align:middle;
}
.newsbg .badge-new{background:rgba(95,191,95,.15);color:var(--ok);border:1px solid rgba(95,191,95,.4);}
.newsbg .badge-update{background:rgba(255,90,31,.15);color:var(--ember);border:1px solid rgba(255,90,31,.4);}
.newsbg .badge-event{background:rgba(196,30,30,.15);color:var(--red-600);border:1px solid rgba(196,30,30,.45);}

/* ---------- Footer ---------- */
#footer{
  clear:both;
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:.78rem;
  color:var(--text-faint);
}
#footer a{color:var(--text-dim);}
#footer a:hover{color:var(--ember);}

/* ---------- Lightbox ---------- */
.lightbox-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(5,5,6,0.92);
  display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{
  max-width:100%;max-height:100%;border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);cursor:zoom-out;
}
.lightbox-close{
  position:absolute;top:20px;right:26px;background:none;border:none;
  color:rgba(255,255,255,0.8);font-size:34px;cursor:pointer;line-height:1;
}
.lightbox-close:hover{color:#fff;}

/* Homepage Season 1 promotion: scoped to the existing native panel. */
.ranked-home{container-type:inline-size;}
.ranked-home .m{padding:0 10px;}
.ranked-home-scene{
  position:relative;isolation:isolate;overflow:hidden;min-height:318px;
  padding:22px 8px 16px;
  background:radial-gradient(ellipse at 95% 30%,rgba(188,20,39,.32),transparent 45%),
    radial-gradient(ellipse at 55% 85%,rgba(0,110,171,.25),transparent 65%),#080e14;
}
.ranked-home-link{display:block;color:inherit;text-decoration:none;cursor:pointer;user-select:text;}
.ranked-home-link:hover{color:inherit;box-shadow:inset 0 0 16px rgba(65,163,214,.2);filter:brightness(1.035);}
.ranked-home-link:focus-visible{outline:2px solid #70d5ff;outline-offset:-3px;}
.ranked-home-character{
  position:absolute;right:-90px;top:5px;height:300px;width:auto;max-width:none;
  pointer-events:none;z-index:-1;mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 94%,transparent);
}
.ranked-home-intro{position:relative;max-width:calc(100% - 145px);margin:0 12px 18px;}
.ranked-home-intro h2{
  font-family:Arial,Helvetica,sans-serif;font-weight:900;font-style:italic;
  font-size:clamp(28px,6.7cqw,60px);line-height:1.15;text-transform:uppercase;
  letter-spacing:-.025em;margin:0 0 5px;white-space:nowrap;
}
.ranked-home-intro h2 span:first-child{
  color:#edf8ff;text-shadow:0 2px 0 #657780,0 4px 8px #000;
}
.ranked-home-intro h2 span:last-child{color:#ff232d;text-shadow:0 2px 0 #780811,0 0 14px #8d1720;}
.ranked-home-intro>p{margin:0;color:#fff;font-size:17px;font-weight:700;font-style:italic;line-height:1.45;text-shadow:0 1px 3px #000,0 0 8px rgba(150,205,235,.2);}
.ranked-home-intro>p span{color:#ffb5a7;}
.ranked-home-ladder{
  position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;list-style:none;padding:0;margin:0 95px 0 0;
}
.ranked-home-card{--rank-accent:#c89260;min-width:0;text-align:center;}
.ranked-home-bronze{--rank-accent:#c89260;}
.ranked-home-silver{--rank-accent:#d9e4ed;}
.ranked-home-gold{--rank-accent:#ffc648;}
.ranked-home-platinum{--rank-accent:#c45aff;}
.ranked-home-diamond{--rank-accent:#44c8ff;}
.ranked-home-master{--rank-accent:#ff392f;}
.ranked-home-challenger{--rank-accent:#f2d18a;}
.ranked-home-emblem{position:relative;max-width:124px;margin:0 auto;}
.ranked-home-emblem img{display:block;width:100%;height:auto;object-fit:contain;}
.ranked-home-emblem h3{
  position:absolute;top:65.5%;left:0;right:0;margin:0;line-height:1.5;
  font:700 clamp(8px,1.4cqw,13px)/1.5 Oswald,Impact,sans-serif;
  text-transform:uppercase;color:#fff1da;text-shadow:0 1px 2px #000;
}
.ranked-home-card>p{
  display:flex;align-items:center;justify-content:center;min-height:46px;
  margin:4px 0 0;padding:5px 3px;border:1px solid var(--rank-accent);border-radius:3px;
  background:rgba(0,0,0,.65);box-shadow:0 0 7px color-mix(in srgb,var(--rank-accent) 30%,transparent);
  color:#f4f7fa;font:600 11px/1.3 Oswald,Impact,sans-serif;text-transform:uppercase;
}
@container (max-width:650px){
  .ranked-home-scene{padding-top:18px;}
  .ranked-home-intro{max-width:calc(100% - 175px);margin-left:6px;margin-bottom:20px;}
  .ranked-home-intro h2{white-space:normal;font-size:32px;}
  .ranked-home-character{height:160px;opacity:.8;}
  .ranked-home-character{right:0;}
  .ranked-home-ladder{grid-template-columns:repeat(4,minmax(0,1fr));margin-right:0;gap:12px 8px;}
  .ranked-home-emblem h3{font-size:12px;}
  .ranked-home-card>p{font-size:11px;}
}
@container (max-width:380px){
  .ranked-home-intro{max-width:calc(100% - 150px);}
  .ranked-home-intro h2{font-size:27px;}
  .ranked-home-intro>p{font-size:12px;}
  .ranked-home-character{height:135px;}
  .ranked-home-ladder{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Ranked information page, reusing the existing panel chrome and sidebar. */
.ranked-page{container-type:inline-size;}
.ranked-page h2.t{margin-top:0;margin-bottom:0;font-weight:700;}
.ranked-page .m{font-size:14px;line-height:1.65;}
.ranked-page .m>p:first-child{margin-top:0;}
.ranked-page h3{font-family:Oswald,Impact,sans-serif;color:#e1f1f8;font-size:17px;margin:0 0 8px;}
.ranked-page section{scroll-margin-top:16px;}
.ranked-page-hero{position:relative;isolation:isolate;overflow:hidden;padding:26px 20px;
  background:radial-gradient(ellipse at right,rgba(184,15,36,.2),transparent 60%),linear-gradient(135deg,#081b28,#090d13);}
.ranked-page-hero>img{position:absolute;z-index:-1;right:-35px;top:0;height:100%;width:auto;opacity:.75;
  mask-image:linear-gradient(to right,transparent,#000 35%);}
.ranked-page-eyebrow{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:#8cc4e0;margin:0 0 8px;}
.ranked-page-hero h1{font:900 italic clamp(26px,4.8cqw,44px)/1.15 Arial,sans-serif;text-transform:uppercase;color:#eff9ff;margin:0 0 10px;max-width:75%;}
.ranked-page-season{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:700 26px Oswald,sans-serif;color:#ff3b43;margin:12px 0;}
.ranked-page-status{display:inline-block;font:600 12px Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#c5ebff;border:1px solid #386784;background:#0a1c28;padding:6px 10px;border-radius:3px;}
.ranked-page-intro{max-width:72%;color:#dde8ee;}
.ranked-page-jumps{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.ranked-page-jumps a{border:1px solid #314755;background:#0c151c;padding:6px 12px;border-radius:3px;color:#d5eaf7;text-decoration:none;}
.ranked-page-jumps a:hover{border-color:#7bb3d0;}
.ranked-page a:focus-visible{outline:2px solid #70d5ff;outline-offset:3px;}
.ranked-page-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px;padding-left:28px;margin:4px 0;}
.ranked-page-steps li{padding:5px;}
.ranked-page-steps li::marker{color:#79c6ee;font-family:Oswald,sans-serif;font-weight:700;}
.ranked-page-steps strong,.ranked-page-steps span{display:block;}
.ranked-page-steps span{margin-top:5px;color:#aeb9c3;}
.ranked-page-start{display:flex;gap:25px;align-items:center;}
.ranked-page-rating{font:700 40px Oswald,sans-serif;color:#d8f1ff;white-space:nowrap;}
.ranked-page-rating span{display:block;font-size:16px;letter-spacing:.08em;text-transform:uppercase;}
.ranked-page-note{font-size:12px;color:#a8b5c0;}
.ranked-page-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.ranked-page-tier,.ranked-page-jjang{min-width:0;background:linear-gradient(160deg,#111923,#080b10);border:1px solid #31404e;border-top:2px solid var(--rank-accent);border-radius:4px;padding:12px;}
.ranked-page-tier .ranked-home-emblem{width:124px;max-width:100%;margin-bottom:12px;}
.ranked-page-tier .ranked-home-emblem h3{font:700 13px/1.5 Oswald,sans-serif;}
.ranked-page-tier table{width:100%;border-collapse:collapse;font-size:12px;}
.ranked-page-tier th{text-align:left;font-weight:500;}
.ranked-page-tier td{text-align:right;color:var(--rank-accent);font-variant-numeric:tabular-nums;}
.ranked-page-tier td,.ranked-page-tier th{padding:5px 2px;border-bottom:1px solid #232d38;}
.ranked-page-tier thead th{color:#aabac7;font-size:11px;text-transform:uppercase;}
.ranked-page-table-scroll{max-width:100%;overflow-x:auto;}
.ranked-page-table{width:100%;min-width:390px;border-collapse:collapse;}
.ranked-page-table caption{text-align:left;color:#a8b5c0;font-size:12px;padding:8px 0;}
.ranked-page-table th,.ranked-page-table td{padding:12px;border:1px solid #2c3c49;text-align:left;}
.ranked-page-table thead{background:#0e2331;color:#cfeeff;}
.ranked-page-table td{color:#f2f5f7;font-variant-numeric:tabular-nums;}
.ranked-page-table small{font-weight:400;color:#aac1ce;}
.ranked-page-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.ranked-page-features article{padding:12px;border:1px solid #293c49;background:#0b1219;border-radius:3px;}
.ranked-page-features p{color:#aeb9c3;font-size:13px;margin:0;}
.ranked-page-jjangs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0;}
.ranked-page-jjang{text-align:center;padding:16px 12px;}
.ranked-page-jjang>img{display:block;width:100%;height:140px;object-fit:contain;margin:0 auto 12px;}
.ranked-page-jjang h3{color:var(--rank-accent);text-transform:uppercase;}
.ranked-page code{font-size:12px;color:#d2e4ee;background:#101e28;padding:3px 5px;border-radius:3px;overflow-wrap:anywhere;}
.ranked-page-command{padding:16px;background:#0b1620;border-left:3px solid #71badc;}
.ranked-page-command p{margin:0;}
.ranked-page-placeholder{text-align:center;padding:24px;}
@container (max-width:600px){
  .ranked-page-steps,.ranked-page-features{grid-template-columns:1fr;}
  .ranked-page-tiers{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ranked-page-hero h1,.ranked-page-intro{max-width:100%;}
  .ranked-page-hero>img{opacity:.2;}
  .ranked-page-start{align-items:flex-start;gap:16px;}
}
@container (max-width:380px){
  .ranked-page-jjangs{grid-template-columns:1fr;}
  .ranked-page-start{display:block;}
  .ranked-page-tier{padding:8px;}
  .ranked-page-tier table{font-size:11px;}
}

/* ---------- Responsive ---------- */
@media (max-width:700px){
  #left{float:none;width:100%;}
  #right{margin-left:0;}
}