* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; background:#0b1020; color:#e9eef6; }
nav { display:flex; gap:12px; padding:12px; background:#121833; align-items:center; position:sticky; top:0; }
nav a, nav button { color:#e9eef6; text-decoration:none; background:#1e2a58; border:none; padding:8px 12px; border-radius:10px; cursor:pointer; }
.container { padding:16px; max-width: 1200px; margin: 0 auto; }
.card { background:#121833; border:1px solid #2a376e; border-radius:14px; padding:16px; margin:12px 0; }
input, select { width:100%; padding:10px; border-radius:10px; border:1px solid #2a376e; background:#0b1020; color:#e9eef6; }
textarea { width:100%; min-height: 90px; padding:10px; border-radius:10px; border:1px solid #2a376e; background:#0b1020; color:#e9eef6; }
label { display:block; margin:10px 0 6px; }
.grid { display:grid; gap:14px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.btn { background:#2f4fe4; border:none; color:white; padding:10px 12px; border-radius:10px; cursor:pointer; }
.btn.secondary { background:#1e2a58; }
.tabletop { display:grid; grid-template-columns: 260px 1fr 260px; gap:12px; height: calc(100vh - 70px); }
.sidebar, .rightbar { overflow:auto; }
.canvas-wrap { position:relative; background:#050912; border:1px solid #2a376e; border-radius:12px; overflow:hidden; min-height:60vh; }
#mapCanvas { width:100%; height:100%; display:block; image-rendering: pixelated; }
.token { position:absolute; width:56px; height:56px; border-radius:50%; border:2px solid #fff; overflow:hidden; transform: translate(-50%, -50%); }
.token img { width:100%; height:100%; object-fit:cover; }
.chat { display:flex; flex-direction:column; gap:8px; }
.chat-log { height:360px; overflow:auto; background:#0b1020; border:1px solid #2a376e; border-radius:10px; padding:8px; }
.chat input { width:100%; }
.initiative li { padding:6px 8px; border-radius:8px; margin:4px 0; background:#0b1020; border:1px solid #2a376e;}
.notice { font-size: 12px; opacity: 0.8; }

@media (min-width: 1400px){
  .container { max-width: 1400px; }
  .tabletop { grid-template-columns: 300px 1fr 320px; }
}
@media (max-width: 900px){
  .tabletop { grid-template-columns: 1fr; grid-auto-rows: auto; height:auto; }
  .sidebar, .rightbar { order: -1; }
}

.tabs { display:flex; gap:8px; margin:6px 0 12px; flex-wrap:wrap; }
.tabs a { padding:8px 12px; border-radius:10px; background:#1e2a58; text-decoration:none; color:#e9eef6; }
.tabs a.active { background:#2f4fe4; }
#gmPanel, #playerPanel { display:block !important; }
.card { display:block; }