/* Kathana-inspired visual theme — independent fan utility
   Presentation only; all currency conversion logic remains in index.html. */
:root {
  --bg: #0d0b0b;
  --panel: #1a1512;
  --panel2: #241c17;
  --line: #604c38;
  --text: #f5ebd7;
  --muted: #b9a995;
  --gold: #d9b36e;
  --gold-pale: #f0d49a;
  --green: #dfbe75;
  --crimson: #9e332a;
  --crimson-bright: #cf5140;
  --edge: rgba(217,179,110,.34);
}
* { box-sizing: border-box; }
html {scroll-behavior:smooth}
body {
  position: relative;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(ellipse 80% 31% at 50% -5%, rgba(151,51,33,.38), transparent 70%),
    radial-gradient(ellipse 65% 44% at 100% 41%, rgba(98,52,26,.11), transparent 75%),
    radial-gradient(ellipse 85% 55% at 0% 75%, rgba(108,36,30,.11), transparent 80%),
    #0d0b0b;
  font: 15px/1.65 "Manrope", "Segoe UI", Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,222,169,.01) 0 1px, transparent 1px 5px);
}
body::after {
  content:""; position:fixed; pointer-events:none; inset:0;z-index:-1;
  box-shadow:inset 0 0 180px rgba(0,0,0,.42);
}
a { color:var(--gold-pale); }
a:hover {color:#ffe0a5}
.site-topbar {
  width:100%; min-height:62px; border-bottom:1px solid rgba(217,179,110,.2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px max(20px, calc((100vw - 1180px)/2));
  background:linear-gradient(180deg,rgba(21,16,14,.97),rgba(14,11,11,.97));
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
.site-topbar-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--gold-pale);font-family:"Cinzel",Georgia,serif; font-size:.98rem;font-weight:800;letter-spacing:.12em;white-space:nowrap }
.site-topbar-brand::before {content:"✦"; font-size:1.5rem; color:var(--gold); text-shadow:0 0 16px rgba(217,179,110,.5)}
.site-topbar .fansite {font:600 .65rem "Manrope", sans-serif;letter-spacing:.17em;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
.topnav {display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.topnav a {color:#d2c4ad;text-decoration:none;padding:8px 12px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:3px;transition:.2s ease}
.topnav a:hover {background:rgba(217,179,110,.09);color:var(--gold-pale)}
.topnav a.official {color:var(--gold-pale);border:1px solid rgba(217,179,110,.38);margin-left:6px}
.wrap {width:min(1160px,calc(100% - 36px));margin:0 auto;padding:38px 0 54px;}
.brand {position:relative;display:flex;gap:16px;align-items:center;margin:0 0 26px;padding:6px 0 18px;border-bottom:1px solid rgba(217,179,110,.24)}
.logo {width:62px;height:62px;flex:none;border:1px solid var(--gold);
 border-radius:50%;color:var(--gold-pale);font:800 1.85rem "Cinzel",Georgia,serif;
 background:radial-gradient(circle,rgba(163,62,37,.22),rgba(19,12,10,.98) 67%);
 box-shadow:inset 0 0 0 5px #17100e,inset 0 0 0 6px rgba(217,179,110,.5),0 0 22px rgba(151,66,35,.16)}
.brand h1 {margin:0;color:#ead2a0;font:800 clamp(1.15rem,2.7vw,1.9rem)/1.2 "Cinzel",Georgia,serif;letter-spacing:.065em;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.brand p {color:var(--muted);margin-top:5px;letter-spacing:.03em;font-size:.81rem}
.ornament {display:flex;align-items:center;justify-content:center;gap:18px;color:var(--gold);font-family:"Cinzel",Georgia,serif;font-size:.85rem;letter-spacing:.3em;margin:0 auto 23px;opacity:.8}
.ornament::before,.ornament::after {content:"";display:block;height:1px;max-width:175px;width:23%;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after {transform:rotate(180deg)}
.card {position:relative;border-radius:5px;padding:25px;overflow:hidden;
 background:linear-gradient(155deg,rgba(40,30,23,.96),rgba(24,19,17,.98) 55%,rgba(16,13,13,.99));
 border:1px solid rgba(217,179,110,.32);
 box-shadow:0 18px 45px rgba(0,0,0,.2),inset 0 1px rgba(255,226,170,.055)}
.card::before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(217,179,110,.075);border-radius:1px}
.hero {grid-template-columns:minmax(0,1.3fr) minmax(285px,.7fr);gap:18px}
.hero>.card:first-child {background:
 radial-gradient(circle at 100% 0%,rgba(169,70,43,.35),transparent 48%),
 radial-gradient(circle at 20% 120%,rgba(124,57,38,.24),transparent 50%),
 linear-gradient(135deg,#312018,#1b1412 58%,#120f0f);
 padding:44px 38px; border-color:rgba(230,183,98,.48);}
.hero>.card:first-child::after {
  content:"✦";font-family:Georgia,serif;font-size:300px;line-height:1;position:absolute;
  right:-55px;bottom:-66px;color:rgba(223,172,96,.042);pointer-events:none;transform:rotate(12deg)
}
.eyebrow {font:800 .69rem/1.6 "Manrope",sans-serif;color:var(--gold);
 letter-spacing:.23em;text-transform:uppercase}
.hero h2 {position:relative;z-index:1;font:700 clamp(2.35rem,5vw,4.35rem)/1.14 "Cinzel",Georgia,serif;
 letter-spacing:-.035em; margin:16px 0 20px; text-shadow:0 3px 23px rgba(0,0,0,.4);}
.hero h2 span {color:var(--gold-pale);text-shadow:0 0 35px rgba(232,174,75,.2)}
.lede {max-width:560px;line-height:1.82;color:#d5c9b6}
.controls {margin-top:27px;gap:15px}
label {color:#d6bf9c;font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
select,input {min-height:47px;background:rgba(11,9,9,.76);border:1px solid #685039;border-radius:3px;color:var(--text);padding:12px 14px;}
select option {background:#181311;color:var(--text)}
select:focus,input:focus {border-color:var(--gold-pale);outline:2px solid rgba(217,179,110,.15);outline-offset:1px}
input::placeholder {color:#897b6a}
.status {font-size:.75rem;letter-spacing:.02em;}
.stats {gap:12px;display:grid;grid-template-rows:repeat(3,1fr);padding:15px}
.stat {display:flex;flex-direction:column;justify-content:center;padding:21px 21px 21px 23px;
 border:1px solid rgba(217,179,110,.19);border-left:3px solid rgba(217,179,110,.64);
 border-radius:3px;background:linear-gradient(100deg,#241b17,#171210)}
.stat small {font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:#c1b19e}
.stat b {font:700 clamp(1.4rem,2.5vw,1.85rem)/1.35 "Cinzel",Georgia,serif;color:var(--gold-pale);margin:8px 0 1px;letter-spacing:-.02em}
.section {margin-top:20px;}
.head {margin-bottom:20px;}
.head h3,.card h3 {font:700 clamp(1.4rem,2.3vw,1.85rem)/1.3 "Cinzel",Georgia,serif;color:#f0dfbe;letter-spacing:-.01em}
.head h3 {margin-top:5px}
.note {font-size:.84rem;line-height:1.7}
.section.card {padding:28px}
.tablewrap {border:1px solid rgba(217,179,110,.24);border-radius:3px;overflow-x:auto}
table {background:#151210;min-width:650px}
th,td {padding:15px 17px;border-bottom:1px solid rgba(217,179,110,.14)}
th {background:#292019;color:#dfc9a7;font-size:.69rem;letter-spacing:.13em}
td {font-size:.9rem;color:#e9e0d2;font-variant-numeric:tabular-nums}
tbody tr:last-child td {border-bottom:0}
tbody tr:hover {background:rgba(217,179,110,.07)}
.best {background:linear-gradient(90deg,rgba(193,143,68,.20),rgba(193,143,68,.065))}
.best td:first-child {color:var(--gold-pale);font-weight:900}
.best td:first-child::after {content:"  ★ BEST VALUE";font-size:.60rem;color:#f1c97a;letter-spacing:.1em;white-space:nowrap}
.two {gap:18px}
.two.section {grid-template-columns:1fr 1fr;align-items:stretch}
.two.section>.card {padding:28px}
.two.section>.card h3 {margin:7px 0 12px}
.two.section>.card>.note {margin-bottom:24px}
.result {margin-top:19px;padding:23px 22px;border-radius:3px;background:linear-gradient(120deg,#312117,#1c1512);border:1px solid rgba(217,179,110,.35)}
.big {font:700 clamp(1.9rem,4vw,2.9rem)/1.25 "Cinzel",Georgia,serif;color:var(--gold-pale)}
.quick {gap:8px;margin:17px 0}
button {border:1px solid rgba(217,179,110,.38);border-radius:3px;background:linear-gradient(180deg,#392a21,#241c18);
 color:#f4e4c5;font-weight:800;font-size:.78rem;letter-spacing:.03em;padding:10px 13px;transition:background .18s,border-color .18s,transform .18s}
button:hover {border-color:var(--gold);background:#463225;transform:translateY(-1px)}
button:focus-visible, a:focus-visible {outline:2px solid var(--gold-pale);outline-offset:3px}
.primary {background:linear-gradient(180deg,#c19858,#95703c);color:#17100d;border-color:#d9b36e}
.primary:hover {background:#d7ae6d;color:#150e09}
.worldbar {gap:10px;margin:15px 0}
.worldbar select {flex:1;max-width:none;min-width:145px}
#world button {padding:3px 9px;min-height:26px;font-size:1rem;line-height:1.1}
.support {border-radius:3px;padding:24px 28px;margin-top:22px;border:1px solid rgba(217,179,110,.36);background:
 linear-gradient(100deg,rgba(95,41,28,.44),rgba(36,26,21,.97) 50%,#171211);
 box-shadow:0 12px 30px rgba(0,0,0,.15)}
.support strong {font:700 1.17rem "Cinzel",Georgia,serif;color:#f0dfbe}
.support span {font-size:.8rem;margin-top:9px}
.support-link {border-radius:3px;background:linear-gradient(180deg,#d9b36e,#b48b4c);border-color:#d9b36e;color:#21140e;font-size:.81rem;letter-spacing:.04em;min-height:46px;padding:11px 18px}
.footer {margin-top:27px;padding-top:23px;line-height:1.8;border-color:rgba(217,179,110,.25);color:#ab9c8d}
.footer .disclaimer {color:#d2c1aa}
.footer a {text-decoration:none;border-bottom:1px solid rgba(217,179,110,.35)}
@media(max-width:950px) {
 .site-topbar {padding:10px 20px}
 .site-topbar .fansite {display:none}
 .hero{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
 .stat{min-width:0}
 .stat b{font-size:1.38rem;word-break:break-word}
 .two.section {grid-template-columns:1fr}
}
@media(max-width:680px) {
 .site-topbar {display:block;padding:12px 16px}
 .topnav{justify-content:flex-start;margin-top:10px;gap:2px}
 .topnav a{padding:6px 9px;font-size:.68rem}
 .topnav a.official{margin-left:0}
 .wrap{width:calc(100% - 24px);padding:24px 0 38px}
 .brand{margin-bottom:16px;gap:11px}
 .logo{width:48px;height:48px;font-size:1.3rem}
 .brand h1{font-size:1.1rem}
 .brand p{font-size:.68rem}
 .ornament{margin-bottom:15px}
 .hero>.card:first-child{padding:27px 21px}
 .hero h2{font-size:clamp(2rem,9vw,3rem)}
 .card,.section.card,.two.section>.card{padding:21px 18px}
 .stats{grid-template-columns:1fr;gap:8px;padding:13px}
 .stat{padding:14px 17px}
 .stat b{font-size:1.55rem}
 .section{margin-top:13px}
 .controls,.two{grid-template-columns:1fr}
 .head{align-items:flex-start;flex-direction:column}
 .support{padding:22px 20px}
 .support-link{width:100%}
 .stat small{font-size:.67rem}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* OCT 2026 — BAHAMUT / Reign of Shadows landing treatment.
   Styled in tribute to playkathana.com; independent fan community project. */
:root {
  --bg:#0c0b0a; --panel:#181615; --panel2:#201a16; --line:#5a4633;
  --text:#f5eee4; --muted:#aea399; --gold:#dbb67b; --gold-pale:#f5d69c;
  --green:#e8c180; --crimson:#7b2922; --crimson-bright:#ae4537;
}
body {
  background:
    radial-gradient(ellipse 90% 22% at 50% 5%, rgba(158,69,35,.18), transparent 80%),
    radial-gradient(ellipse 55% 25% at 70% 60%, rgba(111,52,28,.065), transparent),
    linear-gradient(#0e0d0d,#0c0b0a);
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
}
.site-topbar {position:sticky;top:0;z-index:50;min-height:68px;
 background:rgba(12,11,11,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(219,182,123,.25);
 box-shadow:0 4px 26px rgba(0,0,0,.48)}
.site-topbar-brand{font-family:"Cinzel",Georgia,serif;letter-spacing:.18em;font-size:1.12rem}
.site-topbar-brand::before{font-size:1.4rem}
.topnav a{font-size:.73rem}
.topnav a.official{background:linear-gradient(90deg,rgba(168,74,43,.14),rgba(219,182,123,.1));border:1px solid rgba(219,182,123,.46);color:#f3d49b}
.topnav a.official:hover{background:rgba(219,182,123,.2)}
.battle-banner {
 position:relative;isolation:isolate;overflow:hidden;width:100%;
 min-height:360px;height:min(39.5vw,565px);
 background:#100c0b;display:flex;align-items:stretch;
 border-bottom:1px solid rgba(245,214,156,.5);
 box-shadow:inset 0 -40px 60px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.45)
}
.battle-banner__image{position:absolute;inset:0}
.battle-banner__image img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;display:block}
.battle-banner__shade{
 position:absolute;inset:0;pointer-events:none;
 background:
  linear-gradient(0deg,rgba(7,6,6,.93) 0,rgba(7,6,6,.40) 13%,transparent 42%),
  linear-gradient(90deg,rgba(11,7,7,.13),transparent 42%,rgba(18,8,4,.08))
}
.battle-banner__rim{position:absolute;pointer-events:none;inset:14px 16px 32px;
 border:1px solid rgba(238,197,132,.2);z-index:1;
 box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)}
.battle-banner__rim::before,.battle-banner__rim::after {
 content:"◆";font-size:14px;position:absolute;color:rgba(239,205,150,.72);
 background:#1f140f;text-shadow:0 1px 9px rgba(240,193,96,.5);line-height:1
}
.battle-banner__rim::before{top:-7px;left:-7px}
.battle-banner__rim::after{top:-7px;right:-7px}
.battle-banner__bottom{
 position:relative;z-index:2;align-self:flex-end;display:flex;justify-content:space-between;
 align-items:flex-end;gap:20px;width:min(1180px,calc(100% - 64px));margin:0 auto 33px;
}
.battle-banner__identity{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.battle-banner__eyebrow{font-size:.71rem;font-weight:800;letter-spacing:.27em;color:#f0ce91;text-shadow:0 2px 8px black}
.battle-banner__tagline{color:#ddc5a7;font-size:.83rem;text-shadow:0 2px 8px black}
.battle-banner__mobile-name{display:none}
.battle-banner__cta{font:800 .74rem "Manrope",sans-serif;text-decoration:none;letter-spacing:.14em;
 color:#fce4b4;border:1px solid rgba(249,207,142,.72);
 background:linear-gradient(180deg,rgba(109,52,28,.9),rgba(41,22,15,.97));
 padding:15px 23px;white-space:nowrap;transition:background .2s,transform .2s}
.battle-banner__cta:hover{background:#925133;transform:translateY(-2px);color:white}
.battle-banner__cta span{font-size:1.1rem;margin-left:15px;color:#f0c778}
.battle-banner__cta:focus-visible{outline:2px solid white;outline-offset:3px}
.wrap{padding-top:34px}
.brand{gap:14px;padding-bottom:16px;border-bottom-color:rgba(219,182,123,.22)}
.brand .logo{width:55px;height:55px;font-size:1.65rem;box-shadow:inset 0 0 0 5px #17100e,inset 0 0 0 6px rgba(217,179,110,.5),0 0 20px rgba(219,182,123,.16)}
.brand h1{letter-spacing:.13em}
.brand p{font-size:.80rem}
.brand__edition{margin-left:auto;flex:none;align-self:center;
 padding:7px 12px;border:1px solid rgba(219,182,123,.32);color:var(--gold-pale);
 background:rgba(219,182,123,.055);font-size:.61rem;font-weight:800;letter-spacing:.13em}
.ornament{font-size:.73rem;letter-spacing:.19em;opacity:.82}
.hero>.card:first-child{padding:40px 39px;
 background:linear-gradient(128deg,rgba(71,38,27,.56),rgba(28,23,20,.96) 44%,rgba(17,15,14,.99))}
.card{border-radius:7px;background:linear-gradient(160deg,#201b18,#121111 66%);border-color:rgba(216,177,117,.25)}
.card::before{border-radius:4px}
.hero h2{font-size:clamp(2.25rem,4vw,3.75rem);line-height:1.13}
.hero h2 span{color:#f3d39c}
.lede{max-width:620px;color:#d3c7b8}
.stats{background:linear-gradient(160deg,#181311,#100f0e)}
.stat{background:linear-gradient(125deg,rgba(78,49,28,.33),rgba(24,20,19,.95));border-left-color:#c69b5c}
.stat b{color:#f5d69c}
.head h3,.card h3{color:#f2e6d2;font-weight:700}
.head .note{max-width:390px;text-align:right}
.section.card{padding:33px 31px}
.two.section>.card{padding:31px 29px}
.eyebrow{font-size:.67rem;letter-spacing:.20em}
table{background:#110f0e}
th{background:#292018;color:#e4cbab}
tbody tr:nth-child(even):not(.best){background:rgba(253,229,186,.025)}
tbody tr:hover{background:rgba(235,185,105,.09)}
.best{background:linear-gradient(90deg,rgba(186,122,50,.20),rgba(219,182,123,.045))}
select,input{background:#100e0d;border-color:#5c4938}
select:focus,input:focus{border-color:#dbb67b}
.result{background:linear-gradient(120deg,#37251a,#201815)}
.big{font-size:clamp(1.9rem,4vw,2.7rem)}
button{border-color:rgba(219,182,123,.4)}
.support{border-radius:6px;background:linear-gradient(104deg,rgba(114,48,27,.33),rgba(28,24,22,.98) 60%)}
.support-link{background:linear-gradient(180deg,#e5c187,#b48a4b)}
.footer{margin-top:37px;font-size:.76rem}
#calculator,#packs,#rupiah,#world,#support{scroll-margin-top:86px}
@media (max-width:950px) {
 .battle-banner{height:43vw;min-height:315px}
 .battle-banner__bottom{width:calc(100% - 44px);margin-bottom:22px}
 .brand__edition{display:none}
 .head .note{text-align:left}
}
@media(max-width:680px){
 .site-topbar{min-height:55px}
 .site-topbar-brand{font-size:1rem}
 .battle-banner{height:auto;min-height:0;aspect-ratio:1.7;display:block}
 .battle-banner__image img{object-position:50% 50%}
 .battle-banner__shade{background:linear-gradient(0deg,#090808 0%,rgba(11,8,8,.83) 13%,transparent 48%)}
 .battle-banner__rim{inset:10px 10px 14px}
 .battle-banner__bottom{position:absolute;inset:auto 0 0;align-items:flex-end;width:auto;padding:18px 20px 16px;margin:0;gap:10px}
 .battle-banner__eyebrow{font-size:.50rem;letter-spacing:.13em}
 .battle-banner__mobile-name{display:block;color:#f3d299;font:700 1.37rem/1.1 "Cinzel",Georgia,serif;text-shadow:0 3px 8px black}
 .battle-banner__tagline{font-size:.62rem}
 .battle-banner__cta{font-size:.56rem;letter-spacing:.02em;white-space:normal;padding:9px 11px;max-width:138px;text-align:center}
 .battle-banner__cta span{margin-left:4px}
 .wrap{padding-top:26px}
 .brand h1{font-size:1rem}
 .brand p{font-size:.66rem}
 .brand .logo{height:45px;width:45px;font-size:1.25rem}
 .ornament{font-size:.54rem;letter-spacing:.1em}
 .hero>.card:first-child{padding:27px 21px}
 .hero h2{font-size:clamp(2rem,9vw,3.1rem)}
 .section.card,.two.section>.card{padding:22px 18px}
 .head .note{text-align:left}
 .stats{padding:12px}
 .stat{padding:17px}
 .big{font-size:1.95rem}
 #calculator,#packs,#rupiah,#world,#support{scroll-margin-top:105px}
}
@media(max-width:390px){
 .topnav a{font-size:.61rem;padding:6px 7px}
 .battle-banner{aspect-ratio:1.65}
 .battle-banner__bottom{padding:15px 16px}
 .battle-banner__cta{max-width:112px}
}

/* Layout correction: full-bleed illustrated header, fluid content and proper desktop scale */
.site-topbar {
  padding-inline: max(24px, calc((100vw - 1360px) / 2));
}
.wrap {
  width: min(1360px, calc(100% - 48px));
  padding-top: 40px;
}
.battle-banner {
  position: relative;
  width: 100%;
  height: clamp(380px, 36vw, 600px);
  min-height: 0;
  display: block;
  background: #130d0a;
  overflow: hidden;
  isolation: isolate;
}
.battle-banner::before {
  content: "";
  display: block;
  position: absolute;
  inset: -28px;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(8,6,5,.55) 0%, rgba(8,6,5,.12) 50%, rgba(8,6,5,.48) 100%),
    url("assets/bahamut-banner.jpg") center 48% / cover no-repeat;
  filter: blur(16px) brightness(.65);
  transform: scale(1.05);
}
.battle-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8,6,5,.95), transparent 24%),
    linear-gradient(90deg, rgba(10,7,6,.44) 0%, transparent 25%, transparent 73%, rgba(10,7,6,.44) 100%);
}
.battle-banner__image {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  right: auto;
  width: min(1420px, 100%);
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
}
.battle-banner__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.battle-banner__shade { z-index: 1; }
.battle-banner__rim {
  left: max(20px, calc((100vw - 1390px) / 2));
  right: max(20px, calc((100vw - 1390px) / 2));
  top: 18px;
  bottom: 28px;
  z-index: 1;
}
.battle-banner__bottom {
  position: absolute;
  bottom: 27px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(1280px, calc(100% - 88px));
  z-index: 3;
}
.battle-banner__eyebrow, .battle-banner__tagline { text-shadow: 0 2px 12px #000, 0 0 18px #000; }
.hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(315px, .85fr);
}
.card { min-width: 0; }
.section.card, .two.section > .card { min-width:0; }
table {width:100%;min-width:650px;border-collapse:collapse;}
.tablewrap { width:100%; }
th, td { text-align: right; }
th:first-child, td:first-child { text-align:left; }
.brand__edition { white-space:nowrap; }
.ornament { margin-bottom: 28px; }
@media(max-width: 950px) {
  .site-topbar { padding-inline: 20px; }
  .wrap { width: min(100% - 32px, 860px); }
  .hero { grid-template-columns: 1fr; }
  .battle-banner { height: clamp(320px, 48vw, 470px); }
  .battle-banner__bottom { width: calc(100% - 56px); bottom: 22px; }
}
@media(max-width: 680px) {
  .site-topbar { padding: 12px 16px; }
  .wrap { width: calc(100% - 24px); padding-top: 24px; }
  .battle-banner { height:auto; min-height: 0; aspect-ratio: 1.65; }
  .battle-banner__image { width:100%;height:100%; }
  .battle-banner__image img { object-fit:cover; object-position: 66% center; }
  .battle-banner::before { filter: blur(11px) brightness(.6); }
  .battle-banner::after { background:linear-gradient(0deg, rgba(8,6,5,.93), transparent 57%); }
  .battle-banner__rim { inset: 10px 10px 14px; }
  .battle-banner__bottom {
    left: 0; bottom: 0; transform:none;
    width:100%; padding:18px 20px 16px; margin:0;
  }
  .hero { grid-template-columns:1fr; }
  .ornament { margin-bottom: 19px; }
  .tablewrap {overflow-x:auto;-webkit-overflow-scrolling:touch}
}


/* Player market: browser-saved Rupiah bundle asking prices. */
#market {scroll-margin-top:86px}
#market .note strong {color:var(--gold-pale)}
.price-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:18px 0 12px}
.price-grid >div {min-width:0}
.price-grid input {width:100%;font-variant-numeric:tabular-nums}
.market-actions {display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin:0 0 22px}
.market-actions button {min-height:43px}
.market-actions .note {flex:1;min-width:180px}
#market .tablewrap {margin-bottom:14px}
#market table {min-width:580px}
#market th,#market td {padding:12px 15px}
#market th:first-child,#market td:first-child {font-weight:700;color:var(--gold-pale)}
@media(max-width:950px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.price-grid{grid-template-columns:1fr 1fr;gap:10px}.price-grid label{font-size:.67rem}.market-actions button{flex:1}.market-actions .note{flex-basis:100%}#market{scroll-margin-top:106px}}