:root{
  --bg:#e7e8ea; --panel:#ffffff; --panel-2:#f4f5f7; --row-alt:#f0f1f3;
  --border:#d5d7db; --text:#26282c; --muted:#767a82;
  --accent:#2f6690; --accent-2:#3f7fb8;
  --danger:#c0392b;
  --bar-header:#26282c; --bar-header-text:#f2f2f2;
  --topbar-bg:#1c1d20; --topbar-bg-2:#26282c; --topbar-text:#eceef0; --topbar-muted:#9a9ea5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:Oxanium,system-ui,Segoe UI,Roboto; font-size:14px;}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:700}

/* Top bar */
.topbar{display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg,var(--topbar-bg-2),var(--topbar-bg)); color:var(--topbar-text); padding:.5rem 1rem; border-bottom:2px solid #000; position:sticky; top:0; z-index:10}
.topbar .brand{display:flex; align-items:baseline; gap:.5rem}
.topbar .brand-logo{font-size:1.3rem; font-weight:700; letter-spacing:.04em; color:#fff; text-transform:uppercase}
.topbar .brand-tag{font-size:.75rem; color:var(--topbar-muted)}
.topbar .brand-logo:hover{text-decoration:none}
.topbar-info{display:flex; align-items:center; gap:1rem; font-size:.8rem; color:var(--topbar-muted)}
.topbar-info .info-item{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2}
.topbar-info .info-label{font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; color:#72767d}
.topbar-info .info-value{color:var(--topbar-text); font-weight:600}
.topbar-info .divider{width:1px; height:26px; background:#3a3c42}

.landing{display:grid; place-items:center; min-height:calc(100vh - 52px); padding:2rem}
.login-card{background:var(--panel); width:100%; max-width:420px; padding:2rem; border-radius:8px; border:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.08)}
.login-card h1{margin:0 0 .25rem}
.tag{color:var(--muted); margin:.25rem 0 1rem}
.form label{display:block; font-size:.9rem; margin:.5rem 0}
.form input{width:100%; padding:.6rem .75rem; border-radius:6px; border:1px solid var(--border); background:#fff; color:var(--text)}
.form .btn{width:100%; margin-top:.75rem}
.alert{background:#fbe4e1; border:1px solid #e3a49c; padding:.6rem .9rem; border-radius:6px; color:#8b2f24}
.success{background:#e3f2e4; border:1px solid #9dcaa1; padding:.6rem .9rem; border-radius:6px; color:#245c28}
.muted{color:var(--muted)}

/* Two-column game layout */
.layout{display:grid; grid-template-columns: 230px 1fr; gap:.75rem; padding:.75rem; max-width:1200px; margin:0 auto}
.sidebar{display:flex; flex-direction:column; gap:.75rem; position:sticky; top:60px; align-self:start}
.content{background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:1rem}

/* Panel with dark header bar, Torn-style */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:6px; overflow:hidden}
.panel-header{background:var(--bar-header); color:var(--bar-header-text); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.45rem .7rem}
.panel-body{padding:.6rem .7rem}

.content h1{background:var(--bar-header); color:var(--bar-header-text); margin:-1rem -1rem 1rem; padding:.5rem .9rem; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:5px 5px 0 0}

.player-card .meta{color:var(--muted); font-size:.75rem; padding:.4rem .7rem 0}
.stat{display:flex; align-items:center; justify-content:space-between; padding:.3rem .7rem; font-size:.85rem; border-bottom:1px solid var(--border)}
.stat:nth-child(odd){background:var(--row-alt)}
.stat:last-of-type{border-bottom:none}
.stat span{color:var(--muted)}
.stat strong{color:var(--text)}
.bars{padding:.5rem .7rem .6rem}
.bar{margin:.4rem 0}
.bar label{display:block; font-size:.7rem; color:var(--muted); margin-bottom:.15rem; text-transform:uppercase; letter-spacing:.02em}
.bar-rail{height:8px; background:#e2e3e6; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.bar-fill.energy{background:linear-gradient(90deg,#e0a800,#f2c744)}

.nav{display:grid}
.nav a{display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; font-size:.85rem; color:var(--text); border-bottom:1px solid var(--border); background:var(--panel)}
.nav a:last-child{border-bottom:none}
.nav a:hover{background:var(--row-alt); text-decoration:none}
.nav a.active{background:#e7f0f7; border-left:3px solid var(--accent); padding-left:calc(.7rem - 3px); font-weight:700}
.nav a.warning{color:var(--danger)}

.btn{display:inline-block; text-decoration:none; background:var(--accent); color:#fff; padding:.5rem .85rem; border-radius:5px; border:1px solid #244f6e; cursor:pointer; text-align:center; font-weight:700; font-size:.85rem}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn.warning{background:var(--danger); border-color:#8f2a1e}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; margin-top:.75rem}
.card{background:var(--panel-2); border:1px solid var(--border); padding:.8rem; border-radius:6px}
.card h3{margin:0 0 .4rem; font-size:.9rem; padding-bottom:.35rem; border-bottom:2px solid var(--accent)}

@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .topbar-info .info-item:nth-child(n+3){display:none}
}

/* micro-utility */
.hidden{display:none}

/* focus styles */
:focus-visible{outline:2px dashed var(--accent); outline-offset:3px}