@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Noto+Sans:wght@400;600;700&display=swap');

:root { color-scheme: dark; --bg:#0b0c0a; --panel:#171914; --edge:#555247; --gold:#ffb800; --ink:#f2f0e8; --muted:#aaa69a; --danger:#ff5c57; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:14px 'Noto Sans', sans-serif; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.topbar { min-height:72px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--gold); background:#10110e; }
.brand, h1, h2 { font-family:Cinzel, serif; text-transform:uppercase; letter-spacing:.08em; }
.brand { color:var(--gold); font-size:19px; text-decoration:none; }.brand span { color:var(--ink); font-size:11px; }.maps-link { color:var(--gold); }
.dm-grid { display:grid; grid-template-columns:minmax(230px, .85fr) minmax(500px, 2fr) minmax(260px, .95fr); gap:14px; padding:14px; min-height:calc(100vh - 72px); }
.panel { min-width:0; background:var(--panel); border:1px solid var(--edge); border-top:2px solid var(--gold); padding:16px; }
.library { display:flex; flex-direction:column; gap:24px; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--edge); padding-bottom:8px; margin-bottom:9px; }.section-heading h1,.section-heading h2 { margin:0; color:var(--gold); font-size:15px; }.section-heading h1 { font-size:20px; }
.small-button,.primary-button,.danger-button,.cancel-button { border:1px solid var(--gold); background:transparent; color:var(--gold); padding:6px 9px; font-weight:700; }.small-button:hover,.primary-button { background:var(--gold); color:#111; }.danger-button { margin-left:6px; border-color:var(--danger); color:var(--danger); }.danger-button:hover { background:var(--danger); color:white; }.cancel-button { border-color:#777; color:#ddd; }
.library-list { display:grid; gap:5px; }.library-item { display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; padding:6px; border:1px solid transparent; }.library-item:hover { background:#24261f; border-color:#515044; }.token { width:34px; height:34px; border-radius:50%; border:1px solid #817b69; object-fit:cover; background:#2b2c25; }.entity-name { font-weight:700; }.entity-stats { color:var(--muted); font-size:12px; }.icon-button { border:0; background:transparent; color:var(--muted); font-size:18px; }.icon-button:hover { color:var(--danger); }.hint,.empty-state { color:var(--muted); font-size:12px; }.empty-state { text-align:center; margin:22px 0; }
.encounter-panel { overflow:auto; }.initiative-heading { margin-bottom:14px; }.encounter-labels,.encounter-row { display:grid; grid-template-columns:52px 58px 44px minmax(130px,1fr) 58px 54px 58px 30px; gap:8px; align-items:center; }.encounter-labels { color:var(--muted); font-size:11px; padding:0 7px 7px; }.encounter-row { background:#20221c; border:1px solid #3f4137; padding:7px; margin-bottom:5px; }.encounter-row.active { border-color:var(--gold); background:#2a2c20; }.encounter-row.dead { opacity:.45; filter:grayscale(1); }.encounter-row input { min-width:0; width:100%; }.turn { width:18px; height:18px; accent-color:var(--gold); }.stat-input,.initiative-input { background:#0d0e0c; color:var(--ink); border:1px solid #5b594f; padding:5px; text-align:center; }.encounter-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tools-panel { display:flex; flex-direction:column; gap:20px; }.notes-section { flex:1; display:flex; flex-direction:column; min-height:280px; }textarea { resize:vertical; }.notes-section textarea { flex:1; min-height:230px; width:100%; background:#0d0e0c; border:1px solid #5b594f; color:var(--ink); padding:10px; line-height:1.5; }.save-state { color:var(--muted); font-size:11px; }.map-viewer { position:relative; min-height:210px; background:#090a08; border:1px solid #49483f; display:flex; justify-content:center; align-items:center; overflow:hidden; }.map-viewer img { display:none; width:100%; height:100%; max-height:330px; object-fit:contain; cursor:zoom-in; }.map-viewer.has-map img { display:block; }.map-viewer.has-map #no-map { display:none; }.map-nav,.delete-map { display:none; position:absolute; border:0; color:white; background:#000b; font-size:30px; width:34px; height:38px; }.map-viewer.has-map .map-nav,.map-viewer.has-map .delete-map { display:block; }.previous { left:0; }.next { right:0; }.delete-map { top:0; right:0; color:var(--danger); font-size:24px; }
dialog { color:var(--ink); width:min(420px, calc(100% - 28px)); padding:0; background:#181a15; border:1px solid var(--gold); }dialog::backdrop { background:#000b; }.dialog-title { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--edge); }.dialog-title h2 { color:var(--gold); font-size:16px; margin:0; }.close-dialog { border:0; background:transparent; color:var(--ink); font-size:24px; }#entity-form > label,.two-fields { display:block; margin:15px 16px 0; }.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.two-fields label { display:grid; gap:5px; }label { color:#d9d5c8; }label input { display:block; width:100%; margin-top:5px; }.two-fields { margin-top:15px; }.two-fields label { margin:0; }input { background:#0d0e0c; color:var(--ink); border:1px solid #5b594f; padding:8px; }.image-preview { display:block; width:72px; height:72px; object-fit:cover; border-radius:50%; margin:12px 16px 0; border:1px solid var(--gold); }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; padding:18px 16px; }.dialog-spacer { flex:1; }.image-dialog { width:auto; max-width:94vw; background:#090a08; position:relative; }.image-dialog img { display:block; max-width:92vw; max-height:90vh; }.image-dialog .close-dialog { position:absolute; top:4px; right:7px; z-index:1; background:#000b; }
@media (max-width:1050px) { .dm-grid { grid-template-columns:280px 1fr; }.tools-panel { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }.notes-section { min-height:230px; } }
@media (max-width:700px) { .topbar { padding:0 14px; }.dm-grid { display:block; padding:10px; }.panel { margin-bottom:10px; }.library { gap:16px; }.tools-panel { display:block; }.notes-section { margin-bottom:20px; }.encounter-panel { padding:10px; }.encounter-labels { display:none; }.encounter-row { grid-template-columns:44px 30px 38px minmax(100px,1fr) 48px 46px 48px 24px; gap:5px; padding:5px; } }