:root{
  --bg:#1c1511;--wood:#5b4636;--wood-d:#3a2c22;--wood-l:#7a6150;--ink:#120d0a;
  --gold:#f0a800;--gold-d:#b97d00;--text:#f6ecda;--muted:#c2ad94;
  --ok:#6fcf58;--warn:#ffb03b;--crit:#ff5a4f;--red:#a31515;--blue:#2e3b5e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) repeating-linear-gradient(45deg,#201813 0 8px,#1c1511 8px 16px);color:var(--text);
  font:600 15px/1.4 "Trebuchet MS",Verdana,sans-serif}
h1,h2,h3{margin:0;text-shadow:2px 2px 0 var(--ink);letter-spacing:.5px}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
code{background:var(--ink);padding:1px 5px;border-radius:3px}
.muted{color:var(--muted);font-weight:500}.err{color:var(--crit)}

/* pixel-RPG panel: kalın koyu çerçeve + iç parlama + blok gölge */
.panel,.card,.top{background:var(--wood);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--wood-l),0 4px 0 var(--ink)}
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:10px 16px;
  position:sticky;top:0;z-index:5;border-radius:0;border-width:0 0 3px}
.brand{display:flex;gap:10px;align-items:center}
.brand h1{font-size:22px;color:var(--gold)}.brand small{color:var(--muted)}
.emblem{font-size:30px;background:var(--ink);border:2px solid var(--gold);width:46px;height:46px;display:grid;place-items:center}
nav{display:flex;flex-wrap:wrap;gap:6px}
nav a{color:var(--text);padding:7px 12px;background:var(--wood-d);border:2px solid var(--ink)}
nav a:hover{background:var(--wood-l);text-decoration:none}
nav a.on{background:var(--gold);color:var(--ink);box-shadow:0 2px 0 var(--gold-d)}
.datebox{display:flex;gap:6px;align-items:center}

main{max-width:1100px;margin:18px auto;padding:0 14px 60px}
.panel{padding:14px;margin:14px 0}
.panel>h2,.panel>h3{margin-bottom:10px;color:var(--gold);font-size:17px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{padding:12px;text-align:center}
.card b{display:block;font-size:28px;color:var(--gold);text-shadow:2px 2px 0 var(--ink)}
.card.crit b{color:var(--crit)}.card.ok b{color:var(--ok)}

input,select,button,textarea{font:inherit;color:var(--text)}
input,select,textarea{background:var(--ink);border:2px solid var(--wood-l);padding:6px 8px;border-radius:0;min-width:0}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
input[type=number]{width:96px}
textarea{width:100%;min-height:260px;font:13px/1.4 ui-monospace,Consolas,monospace}
.btn{background:var(--gold);color:var(--ink);border:3px solid var(--ink);padding:8px 16px;cursor:pointer;font-weight:800;
  box-shadow:inset 0 -4px 0 var(--gold-d),0 3px 0 var(--ink)}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--gold-d)}
.btn.small{padding:3px 10px;font-size:13px}.btn.ghost{background:var(--wood-d);color:var(--text);box-shadow:none}
.btn.danger{background:var(--red);color:#fff;box-shadow:inset 0 -4px 0 #6d0c0c,0 3px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{background:var(--ink);color:var(--gold);text-align:left;padding:8px;white-space:nowrap}
td{padding:6px 8px;border-bottom:2px solid var(--wood-d);vertical-align:middle}
tbody tr:nth-child(even){background:#00000020}
tr.crit{background:#a3151540!important}tr.warn{background:#ffb03b26!important}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);font-weight:500}

.badge{display:inline-block;padding:1px 8px;border:2px solid var(--ink);font-size:12px;font-weight:800;background:var(--wood-d)}
.b-Adamant{background:#4a6a8a}.b-Mithril{background:#3d8a8a}.b-Orichalcum{background:#a36a2a}.b-Ether{background:#7a4ab5}.b-Dragonos{background:#c4421a}
.t-low{background:#8a3b3b}.t-mid{background:#6b5a3a}.t-high{background:var(--gold);color:var(--ink)}
.lvl-CRITICAL{background:var(--crit);color:var(--ink)}.lvl-WARNING{background:var(--warn);color:var(--ink)}
.crown{color:var(--gold)}.crown.vice{color:#cfd6df}
.chip{display:inline-block;margin:2px;padding:2px 9px;background:var(--wood-d);border:2px solid var(--ink)}

.bar{display:grid;grid-template-columns:22px minmax(80px,130px) 1fr auto;gap:8px;align-items:center;margin:5px 0}
.bar .rk{color:var(--muted);text-align:right}
.track{height:16px;background:var(--ink);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--wood-l)}
.fill{height:100%;background:linear-gradient(var(--gold),var(--gold-d))}
.fill.dv{background:linear-gradient(#e86a3a,#a33a14)}.fill.blue{background:linear-gradient(#6a8ee8,#3a52a3)}
.rank1 .rk{color:var(--gold)}
svg.chart{width:100%;height:150px;background:var(--ink);border:2px solid var(--wood-l)}

.overlay{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:20}
.overlay[hidden]{display:none}
.login{width:min(360px,92vw);display:grid;gap:10px}
#toasts{position:fixed;right:14px;bottom:14px;display:grid;gap:8px;z-index:30}
.toast{background:var(--ink);border:3px solid var(--gold);padding:10px 14px;max-width:360px}
.toast.bad{border-color:var(--crit)}

@media(max-width:640px){.bar{grid-template-columns:18px 90px 1fr auto}input[type=number]{width:78px}}