/* Kingdom Boss — dark fantasy RPG. Precompiled CSS, zero build step.
   Obsidian black, dark medieval blue panels, royal gold headings,
   blood red danger, purple magic glows, silver steel text. */
:root{
  --bg:#0a0908; --bg2:#0d0b09;
  --panel:#101a2e; --panel2:#0f1729; --panel3:#16233d;
  --line:#2a3550; --line-gold:#8a6d2b;
  --gold:#d4af37; --gold2:#f0d878; --gold-dim:#a8892e;
  --red:#b91c1c; --red2:#dc2626;
  --purple:#a855f7; --purple-dim:#7c3aed;
  --silver:#c0c0c0; --text:#e8e6df; --muted:#9aa3b2; --faint:#6b7280;
  --green:#34d399; --blue:#60a5fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Georgia,"Times New Roman",serif; font-size:16px; line-height:1.55;
  background-image:
    radial-gradient(900px 480px at 15% -5%, rgba(168,85,247,.12), transparent 60%),
    radial-gradient(800px 420px at 90% 0%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(185,28,28,.08), transparent 60%);
}
body, input, select, textarea, button{font-family:Georgia,"Times New Roman",serif}
h1,h2,h3,.display{font-family:Cinzel,Georgia,"Times New Roman",serif; letter-spacing:.02em}
h1{font-size:2.6rem; line-height:1.08; margin:.2em 0 .3em; color:var(--gold2); text-shadow:0 2px 18px rgba(212,175,55,.25)}
h2{font-size:1.7rem; color:var(--gold); margin:0 0 .4em; border-bottom:1px solid var(--line-gold); padding-bottom:.35em}
h3{font-size:1.15rem; color:var(--gold2); margin:0 0 .4em}
p{margin:.4em 0}
a{color:var(--gold2)}
a:hover{color:#fff}
.muted{color:var(--muted)} .small{font-size:.85rem} .tiny{font-size:.75rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82em; word-break:break-all}
.gold{color:var(--gold2)} .red{color:#f87171} .green{color:var(--green)} .purple{color:#d8b4fe}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px 64px}
header.site{position:sticky; top:0; z-index:30; background:rgba(10,9,8,.94); backdrop-filter:blur(10px); border-bottom:2px solid var(--line-gold)}
.header-in{max-width:1080px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{font-family:Cinzel,Georgia,serif; font-size:1.35rem; font-weight:700; color:var(--gold2); text-decoration:none; white-space:nowrap}
.brand span{color:var(--red2)}
nav.main{display:flex; gap:2px; flex-wrap:wrap; overflow-x:auto}
nav.main a{color:var(--silver); text-decoration:none; padding:7px 10px; border-radius:8px; font-size:.92rem; white-space:nowrap}
nav.main a:hover{color:#fff; background:rgba(255,255,255,.07)}
.wallet-box{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#walletLabel{font-size:.82rem; color:var(--muted)}
section{margin-top:44px; scroll-margin-top:84px}
.eyebrow{font-size:.7rem; letter-spacing:.22em; color:var(--gold); font-weight:700; text-transform:uppercase}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:16px; padding:20px}
.panel-gold{border-color:var(--line-gold)}
.panel-magic{border-color:#4c2a7a; box-shadow:0 0 24px rgba(168,85,247,.12) inset}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){ .g2,.g3,.g4{grid-template-columns:1fr} h1{font-size:2rem} }
.stat{background:rgba(255,255,255,.04); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:12px; padding:12px}
.stat .lbl{font-size:.68rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}
.stat .val{font-size:1.35rem; font-weight:700; color:#fff; margin-top:2px}
.card{background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:14px; padding:14px}
.card:hover{border-color:var(--line-gold)}
.card img.art{width:100%; border-radius:10px; display:block; background:#000}
button,.btn{cursor:pointer; border:0; border-radius:999px; padding:10px 20px; font-size:.95rem; font-weight:700;
  background:linear-gradient(180deg,var(--gold2),#b8912a); color:#1c1503; box-shadow:0 8px 24px -8px rgba(212,175,55,.5)}
button:hover,.btn:hover{filter:brightness(1.08)}
button:disabled{opacity:.45; cursor:not-allowed; filter:none}
button.secondary{background:#1f2937; color:var(--silver); border:1px solid var(--line); box-shadow:none}
button.danger{background:linear-gradient(180deg,#ef4444,#7f1d1d); color:#fff; box-shadow:none}
button.magic{background:linear-gradient(180deg,#c084fc,#6d28d9); color:#fff; box-shadow:0 8px 24px -8px rgba(168,85,247,.55)}
button.small{padding:6px 12px; font-size:.85rem}
input,select,textarea{width:100%; background:rgba(0,0,0,.45); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:9px 11px; font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.18)}
label{font-size:.82rem; color:var(--muted); display:block; margin-bottom:4px}
.banner{border-radius:12px; padding:12px 14px; font-size:.92rem; margin-top:16px}
.banner.warn{background:rgba(212,175,55,.12); border:1px solid var(--line-gold); color:#fde68a}
.banner.info{background:rgba(96,165,250,.1); border:1px solid #1d4ed8; color:#bfdbfe}
.banner.err{background:rgba(220,38,38,.12); border:1px solid var(--red); color:#fecaca}
.banner.ok{background:rgba(52,211,153,.1); border:1px solid #047857; color:#a7f3d0}
.badge{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; padding:3px 9px; border:1px solid var(--line)}
.badge.live{background:rgba(52,211,153,.15); color:var(--green); border-color:#047857}
.badge.planned{background:rgba(168,85,247,.15); color:#d8b4fe; border-color:#6d28d9}
.badge.r0{color:#d1d5db} .badge.r1{color:#34d399} .badge.r2{color:#60a5fa}
.badge.r3{color:#c084fc} .badge.r4{color:#f0d878} .badge.r5{color:#f472b6}
.hpbar{height:16px; background:#1f2937; border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.hpbar>div{height:100%; transition:width .45s ease}
.hp-hero>div{background:linear-gradient(90deg,#34d399,#059669)}
.hp-monster>div{background:linear-gradient(90deg,#ef4444,#7f1d1d)}
.arena{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; text-align:center}
@media (max-width:600px){ .arena{grid-template-columns:1fr} }
.fighter{font-size:3rem; line-height:1}
.fighter small{display:block; font-size:.85rem; color:var(--muted)}
.crit{animation:critflash .5s ease}
@keyframes critflash{0%{filter:brightness(2.4)}100%{filter:brightness(1)}}
.combat-log{background:#000; border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:96px; font-size:.92rem; white-space:pre-wrap}
.pager{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; margin-top:14px}
.pager button{padding:6px 11px; font-size:.85rem}
.pager button.active{background:var(--gold2); color:#1c1503}
.pager .ellipsis{color:var(--faint); padding:0 2px}
table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{color:var(--gold); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase}
details{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
summary{cursor:pointer; font-weight:700}
details p{color:var(--muted)}
.region-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
@media (max-width:760px){ .region-grid{grid-template-columns:repeat(2,1fr)} }
.region{border:1px solid var(--line); border-radius:12px; padding:10px; background:rgba(0,0,0,.3)}
.region.current{border-color:var(--gold); box-shadow:0 0 16px rgba(212,175,55,.25)}
.region .rname{color:var(--gold2); font-weight:700; font-size:.92rem}
.region .rfloors{color:var(--muted); font-size:.8rem}
.res-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:600px){ .res-grid{grid-template-columns:repeat(2,1fr)} }
.res{background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center}
.res .n{font-size:1.25rem; font-weight:700}
footer{margin-top:56px; border-top:1px solid var(--line); padding-top:24px; text-align:center; color:var(--muted); font-size:.85rem}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row-end{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.mt{margin-top:12px} .mt2{margin-top:20px}
.hidden{display:none !important}
hr.sep{border:0; border-top:1px solid var(--line); margin:18px 0}