:root{--bg:#17151c;--panel:#221f2a;--panel-2:#2c2836;--border:#3a3546;--text:#ece8f2;--muted:#9b94a8;--accent:#d4a24c;--accent-text:#1b1406;--error:#ff7a6b;--grid-line:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}h1,h2,h3{margin:0 0 .5rem}h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.85rem}a{color:var(--accent)}input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;min-width:0;padding:.5rem .65rem}input[type=color]{flex:none;width:2.5rem;height:2.4rem;padding:2px}button,.button{font:inherit;cursor:pointer;background:var(--accent);color:var(--accent-text);border:1px solid #0000;border-radius:6px;padding:.5rem .9rem;font-weight:600;display:inline-block}button.secondary,.button.secondary{background:var(--panel-2);border-color:var(--border);color:var(--text)}button:disabled,.button.disabled{opacity:.5;cursor:default}.muted{color:var(--muted)}.small{font-size:.8rem}.error{color:var(--error)}.centred{text-align:center;place-items:center;height:100%;margin:0;padding:1rem;display:grid}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1.25rem}.login{text-align:left;flex-direction:column;gap:.9rem;width:min(360px,100%);display:flex}.login label{flex-direction:column;gap:.35rem;display:flex}.badge{background:var(--accent);color:var(--accent-text);border-radius:999px;padding:.15rem .45rem;font-size:.7rem;font-weight:700}.app-header{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:1rem;padding:.6rem 1rem;display:flex}.app-header .brand{font-weight:800;text-decoration:none}.header-content{flex:1;align-items:center;gap:.75rem;min-width:0;display:flex}.header-content h1{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.1rem;overflow:hidden}.lobby{flex-direction:column;gap:1rem;max-width:640px;margin:2rem auto;padding:0 1rem;display:flex}.game-list{margin:0;padding:0;list-style:none}.game-list li{align-items:center;gap:.5rem;padding:.4rem 0;display:flex}.inline-form{gap:.5rem;display:flex}.inline-form input{flex:1}.game{flex-direction:column;height:100%;display:flex}.game-body{flex:1;min-height:0;display:flex}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;flex:none;gap:1.5rem;width:280px;padding:1rem;display:flex;overflow-y:auto}.character-form{gap:.4rem;display:flex}.character-form input:first-child{flex:1}.party-list{flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none;display:flex}.party-list li{align-items:center;gap:.6rem;display:flex}.swatch{border:1px solid var(--border);border-radius:50%;flex:none;width:14px;height:14px}.token-form{flex-direction:column;gap:.4rem;display:flex}.token-form label{flex-direction:column;gap:.2rem;display:flex}.avatar-row{align-items:center;gap:.6rem;display:flex}.npc-list{margin-top:.8rem}.thumbnail{width:24px;height:24px}.npc-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.npc-list button{padding:.2rem .5rem}.map-area{flex-direction:column;flex:1;min-width:0;display:flex;position:relative}.map-toolbar{z-index:2;gap:.25rem;display:flex;position:absolute;top:.75rem;right:.75rem}.map-toolbar.map-tools{flex-wrap:wrap;left:.75rem;right:auto}.swatches{align-items:center;gap:2px;display:flex}.swatch-button{border:2px solid #0000;border-radius:50%;width:1.4rem;height:1.4rem;padding:0}.swatch-button[aria-pressed=true]{border-color:#fff}.map-error{z-index:2;background:var(--panel);border-radius:6px;margin:0;padding:.4rem .7rem;position:absolute;bottom:.5rem;left:.75rem}.map-viewport{flex:1;place-items:center;display:grid;overflow:auto}.map-surface{touch-action:none;-webkit-user-select:none;user-select:none;background:#2a3a2c;position:relative}.map-surface.drawing{cursor:crosshair}.map-drawings{pointer-events:none;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.map-drawings>*{vector-effect:non-scaling-stroke}.map-drawings .selectable{pointer-events:visiblePainted;cursor:move}.map-drawings .selection>rect{fill:none;stroke:#fff;stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.map-drawings .selection>.handle{fill:#fff;stroke:#000;stroke-dasharray:none;pointer-events:all}.handle-nwse{cursor:nwse-resize}.handle-nesw{cursor:nesw-resize}.map-image,.map-drawings,.map-grid{width:100%;height:100%;position:absolute;inset:0}.map-image{object-fit:fill;pointer-events:none}.map-grid{pointer-events:none;background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px)}.token{color:#fff;text-shadow:0 1px 2px #000c;border:2px solid #0009;border-radius:50%;place-items:center;font-weight:800;transition:transform .15s ease-out;display:grid;position:absolute;top:0;left:0;box-shadow:0 2px 6px #00000080}.token.movable{cursor:grab}.token.mine{border-color:#fff}.token.npc{border-color:#2b0d0d}.token.dragging{cursor:grabbing;z-index:1;transition:none}.token.unplaced{opacity:.6}.token[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.token-conditions{text-shadow:none;pointer-events:none;flex-wrap:wrap;justify-content:center;gap:2px;font-size:.55em;line-height:1;display:flex;position:absolute;top:-14%;left:-10%;right:-10%}.token-conditions span{background:#000000bf;border:1px solid #ffffff59;border-radius:50%;place-items:center;width:1.5em;height:1.5em;display:grid}.health-bar{pointer-events:none;background:#000000b3;border:1px solid #000c;border-radius:999px;height:max(6px,18%);position:absolute;bottom:0;left:-10%;right:-10%;overflow:hidden}.health-fill{height:100%;transition:width .2s ease-out}.health-fill.healthy{background:#3fbf5f}.health-fill.hurt{background:#e0a526}.health-fill.critical{background:#e04a3a}.hp-palette{z-index:3;background:var(--panel);border:1px solid var(--border);-webkit-user-select:text;user-select:text;white-space:nowrap;border-radius:8px;flex-direction:column;gap:.35rem;padding:.6rem;display:flex;position:absolute;top:0;left:0;box-shadow:0 4px 14px #00000080}.hp-palette p{margin:0}.hp-inputs{align-items:center;gap:.35rem;display:flex}.hp-inputs input{width:4.5rem}.condition-toggles{grid-template-columns:1fr 1fr;gap:.25rem;display:grid}.condition-toggles button{text-align:left;padding:.25rem .45rem;font-weight:500}.condition-toggles button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.call-bar{background:var(--panel);border-top:1px solid var(--border);flex:none;align-items:center;gap:.5rem;padding:.5rem 1rem;display:flex;overflow-x:auto}.call-controls{flex-direction:column;gap:.4rem;display:flex}.call-tile{background:var(--panel-2);outline-offset:-3px;border-radius:6px;outline:3px solid #0000;flex:none;width:160px;height:120px;margin:0;transition:outline-color .15s;position:relative;overflow:hidden}.call-tile.speaking{outline-color:var(--accent)}.call-tile video{object-fit:cover;width:100%;height:100%}.call-tile .thumbnail{border:2px solid #0000008c;width:32px;height:32px;position:absolute;top:.4rem;left:.4rem}.call-tile figcaption{white-space:nowrap;text-overflow:ellipsis;background:#0000008c;padding:.2rem .4rem;font-size:.8rem;position:absolute;bottom:0;left:0;right:0;overflow:hidden}@media (width<=700px){.game-body{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--border);width:auto;max-height:40%}}