:root{
  --bg:#0b0f12;
  --panel:#12171c;
  --muted:#8a8f99;
  --text:#e8e6e3;
  --gold:#d4af37;
  --gold-2:#b9962f;
  --error:#ff5c5c;
  --ok:#4caf50;
  --accent:#d4af37;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
}
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #1a2026; background:#0e1317;
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px}
.logo{vertical-align:middle}
.app-header h1{font-size:18px; margin:0; letter-spacing:.5px}
.actions{display:flex; gap:8px}

.container{max-width:980px; margin:20px auto; padding:0 16px}
.panel{
  background:var(--panel); border:1px solid #1a2026; border-radius:12px; padding:16px; margin-bottom:16px;
}
.grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){ .grid{ grid-template-columns:1fr 1fr; } }

.settings{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end}
.settings .field{display:flex; flex-direction:column}
.settings .field.inline{flex-direction:row; align-items:center; gap:8px}
.settings label{font-weight:600; margin-bottom:6px}
.settings input[type=text], .settings input[type=number], .settings select{
  background:#0f1419; color:var(--text); border:1px solid #20262f; border-radius:8px; padding:10px; outline:none;
}
.settings input:focus, .settings select:focus{ border-color: var(--accent); box-shadow:0 0 0 2px #d4af3733 }
.actions-row{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap}

.btn{appearance:none; border:1px solid #2b3440; background:#161b21; color:var(--text); padding:10px 14px; border-radius:10px; cursor:pointer}
.btn:hover{border-color:#3a4654}
.btn.primary{background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#1a1304; border-color:#7a6114; font-weight:700}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.6; cursor:not-allowed}

.canvas-wrap{position:relative; background:#0e1317; border:1px solid #1a2026; border-radius:12px; overflow:hidden;}
#arena{width:100%; height:auto; display:block;}
.status{position:absolute; top:8px; right:10px; color:#fff; font-weight:600; text-shadow:0 1px 0 #0006}

.notice{padding:12px 14px; border-radius:10px; margin-bottom:12px}
.notice.error{background:#2a1414; border:1px solid #4a2323; color:#ffb3b3}

.table-wrap{overflow:auto; border:1px solid #1a2026; border-radius:10px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #1a2026}
.table th{background:#0f1419; text-align:left}
.table tr:hover td{background:#0f1419}
.muted{color:var(--muted); text-align:center}

.footer{max-width:980px; margin:20px auto; padding:16px; text-align:center; color:var(--muted)}
.footer a{color:var(--gold)}

/* Accessibility focus*/
:focus-visible{outline:3px solid #d4af37aa; outline-offset:2px}