:root{
  --bg:#0f0c0a;
  --panel:#1a1410;
  --panel-2:#241a14;
  --line:#6b4b2c;
  --gold:#d6a55a;
  --gold-soft:#8c6738;
  --text:#f1e7d8;
  --muted:#c7b9a6;
  --danger:#c84a42;
  --ok:#5dbb63;
  --shadow:0 24px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Georgia, "Times New Roman", serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 20%, rgba(214,165,90,.08), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(214,165,90,.06), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.55)),
    url('../assets/bg-hall.png') center/cover fixed no-repeat,
    #0d0a08;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent 18%, transparent 82%, rgba(0,0,0,.55));
}
a{color:#f0c981;text-decoration:none}
a:hover{color:#ffdca2}
img{max-width:100%;display:block}
.shell{max-width:1320px;margin:0 auto;padding:18px 20px 32px;position:relative;z-index:1}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-bottom:22px;padding:14px 18px;border:1px solid rgba(214,165,90,.22);
  background:linear-gradient(180deg, rgba(24,18,13,.94), rgba(14,10,7,.92));
  box-shadow:var(--shadow);border-radius:20px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:46px;height:46px;border-radius:12px;border:1px solid rgba(214,165,90,.35);
  display:grid;place-items:center;background:linear-gradient(180deg,#2a1d12,#100c08);font-size:24px;
  box-shadow:inset 0 0 18px rgba(214,165,90,.12);
}
.brand h1{margin:0;font-size:28px;letter-spacing:.6px}
.brand small{display:block;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav a,.nav button,.btn{
  appearance:none;border:none;cursor:pointer;border-radius:14px;
  padding:12px 16px;font:inherit;font-weight:700;letter-spacing:.3px;
  color:#f7ead2;background:linear-gradient(180deg,#3a2817,#1a120c);
  border:1px solid rgba(214,165,90,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.28);
}
.nav a:hover,.nav button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.gold{background:linear-gradient(180deg,#9b6a33,#6d4824)}
.btn.outline{background:transparent}
.btn.danger{background:linear-gradient(180deg,#7e2e2a,#4c1916);border-color:rgba(255,135,123,.25)}
.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}
.sidebar,.panel,.card,.auth-box,.hero-layout,.slot-panel,.monster-card,.admin-table-wrap,.notice{
  background:linear-gradient(180deg, rgba(29,21,15,.94), rgba(16,11,8,.96));
  border:1px solid rgba(214,165,90,.22);
  box-shadow:var(--shadow);
}
.sidebar,.panel,.card,.auth-box,.hero-layout,.slot-panel,.monster-card,.admin-table-wrap,.notice{border-radius:22px}
.sidebar{padding:18px;position:sticky;top:18px;height:max-content}
.sidebar h3,.section-title{margin:0 0 14px;color:#ffcf86;font-size:18px;letter-spacing:.4px}
.menu{display:grid;gap:10px}
.menu a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(214,165,90,.12);background:linear-gradient(180deg,#241911,#17100b);color:var(--text)
}
.menu a:hover,.menu a.active{border-color:rgba(214,165,90,.35);background:linear-gradient(180deg,#3a291a,#1d140d)}
.menu-emoji{width:24px;text-align:center;font-size:18px}
.content{display:grid;gap:20px}
.hero-layout{padding:22px}
.hero-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.portrait-frame{
  border-radius:24px;padding:16px;border:1px solid rgba(214,165,90,.28);
  background:linear-gradient(180deg,#2b1d12,#120d09);
}
.portrait-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:1px solid rgba(214,165,90,.22)}
.hero-name{font-size:34px;margin:0 0 6px;color:#ffdb9f}
.hero-sub{color:var(--muted);margin-bottom:14px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat-card{
  padding:14px 15px;border-radius:18px;background:linear-gradient(180deg,#22170f,#171009);
  border:1px solid rgba(214,165,90,.15)
}
.stat-card b{display:block;font-size:13px;color:#d9bb8a;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.stat-card span{font-size:26px;font-weight:700}
.bars{display:grid;gap:12px;margin-top:16px}
.bar-wrap{display:grid;gap:6px}
.bar-label{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.bar{height:14px;border-radius:999px;background:#0a0705;border:1px solid rgba(214,165,90,.15);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6f9f43,#85d05b)}
.bar.mana > i{background:linear-gradient(90deg,#2a7cb0,#4cb8f0)}
.bar.xp > i{background:linear-gradient(90deg,#aa7d2d,#ffd15d)}
.panel,.card,.notice,.slot-panel,.admin-table-wrap{padding:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.city-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.location-card,.monster-card,.item-card,.avatar-card{
  border-radius:20px;overflow:hidden;border:1px solid rgba(214,165,90,.18);
  background:linear-gradient(180deg,#241911,#130d09);box-shadow:var(--shadow)
}
.location-card img,.monster-card img,.avatar-card img{height:200px;width:100%;object-fit:cover}
.location-body,.monster-body,.item-body,.avatar-body{padding:16px}
.location-card h3,.monster-card h3,.item-card h3,.avatar-card h3{margin:0 0 8px;color:#ffdb9f}
.muted{color:var(--muted)}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:22px;position:relative;z-index:1}
.auth-box{width:min(1180px,100%);padding:26px}
.auth-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:24px}
.auth-panel{padding:20px;border-radius:22px;border:1px solid rgba(214,165,90,.16);background:linear-gradient(180deg,#21170f,#130d09)}
.form-grid{display:grid;gap:14px}
.form-grid label{display:grid;gap:8px;font-weight:700;color:#e7d4b1}
input,select{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(214,165,90,.2);
  background:#100b08;color:#fff;font:inherit
}
input:focus,select:focus{outline:none;border-color:rgba(255,218,150,.6);box-shadow:0 0 0 3px rgba(214,165,90,.12)}
.avatars-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.avatar-card{cursor:pointer;position:relative}
.avatar-card.active{outline:2px solid #ffd58e;transform:translateY(-2px)}
.avatar-card.active::after{content:"✓";position:absolute;top:10px;right:10px;background:#24180f;border:1px solid rgba(214,165,90,.35);width:30px;height:30px;border-radius:999px;display:grid;place-items:center;color:#ffd58e;font-weight:700}
.message{margin-top:14px;padding:14px 16px;border-radius:14px;background:#0f0a07;border:1px solid rgba(214,165,90,.15);color:#f3dfbf;min-height:54px}
.inventory-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px}
.equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{
  min-height:112px;padding:12px;border-radius:18px;border:1px dashed rgba(214,165,90,.28);
  background:linear-gradient(180deg,#22170f,#120d09);display:grid;align-content:start;gap:8px
}
.slot strong{color:#ffdb9f;font-size:14px}
.slot .equipped-name{font-weight:700}
.items-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.item-card{display:grid;grid-template-rows:160px auto}
.item-thumb{height:160px;background:radial-gradient(circle at 50% 30%, rgba(255,220,120,.18), transparent 42%),linear-gradient(180deg,#241910,#140d08);display:grid;place-items:center;font-size:72px}
.item-tags{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.tag{padding:4px 8px;border-radius:999px;background:#2b1f15;border:1px solid rgba(214,165,90,.18);font-size:12px;color:#e8d7b8}
.arena-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.battle-stage{
  min-height:340px;border-radius:26px;padding:20px;border:1px solid rgba(214,165,90,.18);
  background:linear-gradient(180deg, rgba(34,23,16,.82), rgba(17,11,8,.9)), url('../assets/bg-arena.png') center/cover no-repeat;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:18px
}
.fighter{text-align:center}
.fighter img{width:180px;height:220px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.4))}
.battle-log{margin-top:18px;max-height:240px;overflow:auto;padding-right:8px;display:grid;gap:10px}
.log-entry{padding:12px 14px;border-radius:14px;background:#100b08;border:1px solid rgba(214,165,90,.12)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid rgba(214,165,90,.12);text-align:left;vertical-align:top}
.notice{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-note{margin-top:8px;color:var(--muted);font-size:13px}
@media (max-width:1100px){
  .layout,.hero-grid,.auth-grid,.inventory-layout,.arena-grid{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media (max-width:860px){
  .stats-grid,.grid-3,.items-grid,.avatars-grid,.city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .stats-grid,.grid-2,.grid-3,.items-grid,.avatars-grid,.city-grid,.equipment-grid{grid-template-columns:1fr}
  .topbar{padding:12px}
  .shell{padding:12px}
  .battle-stage{grid-template-columns:1fr;justify-items:center}
}



/* ===== V13 zone battle ===== */
.arena-grid-v13{grid-template-columns:340px minmax(0,1fr)}
.arena-scroll-list{display:grid;gap:14px;max-height:1040px;overflow:auto;padding-right:6px}
.monster-card-zone img{height:170px}
.arena-monster-desc{margin:8px 0 12px}
.monster-mini-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.monster-mini-stats span{font-size:12px;padding:6px 8px;border-radius:999px;background:#2a1d14;border:1px solid rgba(214,165,90,.14);color:#e5d2b1}
.arena-battle-panel{display:grid;gap:18px}
.battle-stage-v13{min-height:360px;grid-template-columns:1fr 120px 1fr;align-items:center}
.fighter-card{padding:10px 8px;text-align:center}
.battle-portrait{width:200px;height:240px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.battle-portrait.enemy{transform:scaleX(-1)}
.battle-center-zone{display:grid;place-items:center;gap:14px}
.battle-versus{width:82px;height:82px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#8a5e2f,#4c3018);border:1px solid rgba(214,165,90,.4);font-size:30px;color:#ffe5b7;box-shadow:var(--shadow)}
.battle-hint{text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.zones-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zone-board{padding:18px;border-radius:20px;background:linear-gradient(180deg,#22170f,#140d08);border:1px solid rgba(214,165,90,.15)}
.zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.zone-btn{
  appearance:none;border:1px solid rgba(214,165,90,.18);background:linear-gradient(180deg,#20150d,#120b07);
  color:#f4e3c3;border-radius:22px;padding:12px;display:grid;gap:8px;justify-items:center;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .15s ease, border-color .15s ease, filter .15s ease
}
.zone-btn img{width:100%;max-width:112px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid rgba(214,165,90,.12)}
.zone-btn span{font-size:20px;font-weight:700;color:#ffdb9f}
.zone-btn small{color:var(--muted);font-size:13px;letter-spacing:.3px}
.zone-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.zone-btn.active{border-color:#ffd58e;box-shadow:0 0 0 2px rgba(255,213,142,.16), var(--shadow)}
.battle-actions{display:flex;gap:12px;flex-wrap:wrap}
.battle-log-v13{max-height:280px}
@media (max-width:980px){
  .arena-grid-v13,.zones-layout,.battle-stage-v13{grid-template-columns:1fr}
  .battle-center-zone{order:-1}
}