:root{--bg:#090c0b;--panel:#111614;--panel2:#171e1b;--line:#2a3530;--text:#e8eee9;--muted:#849089;--acid:#b9e62e;--red:#ee443d;--header:58px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}button,.button,input,select{font:inherit}button,.button{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:.72rem .9rem;cursor:pointer;text-decoration:none;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.07em}button:hover,.button:hover{border-color:var(--acid);color:var(--acid)}button:disabled{opacity:.45;cursor:wait}header{height:var(--header);display:flex;align-items:center;padding:0 1.2rem;border-bottom:1px solid var(--line);background:#0d110f;position:relative;z-index:5}.brand{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.18em}.brand span{color:var(--acid)}.room-info{margin-left:auto;color:var(--muted);font-size:.7rem;letter-spacing:.15em}.room-info button{margin-left:.6rem;color:var(--acid);padding:.4rem .65rem}.hidden{display:none!important}.lobby{height:calc(100% - var(--header));display:grid;grid-template-columns:1fr minmax(360px,460px);align-items:center;gap:7vw;padding:6vw;overflow:auto;background:radial-gradient(circle at 18% 40%,#263326 0,transparent 35%),linear-gradient(115deg,#080b09,#101512)}.hero{max-width:750px}.eyebrow{color:var(--acid);font-size:.75rem;letter-spacing:.3em}.hero h1{font-size:clamp(2.8rem,6vw,6.5rem);line-height:.93;text-transform:uppercase;margin:1rem 0;font-weight:900;letter-spacing:-.055em}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--muted)}.hero>p:last-child{color:var(--muted);max-width:500px;font-size:1.08rem}.panel{background:rgba(16,22,19,.95);border:1px solid var(--line);padding:2rem;box-shadow:0 30px 80px #0009}.setup label{display:block;color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.13em;margin-bottom:1rem}.setup input,.setup select{display:block;width:100%;margin-top:.45rem;background:#080b0a;border:1px solid var(--line);color:var(--text);padding:.85rem}.primary{background:var(--acid);border-color:var(--acid);color:#111;width:100%}.primary:hover{color:#111;filter:brightness(1.1)}.divider{display:flex;align-items:center;gap:.7rem;color:#5f6964;font-size:.6rem;letter-spacing:.18em;margin:1.2rem 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.inline{display:flex}.inline input{margin:0;min-width:0}.inline button{white-space:nowrap}.upload{border:1px dashed var(--line);padding:.8rem;text-align:center;cursor:pointer}.upload input{display:none}.ghost{width:100%}.status{font-size:.75rem;color:var(--muted);min-height:1.2em;margin-bottom:0}.status.error{color:var(--red)}.workspace{display:grid;height:calc(100% - var(--header));grid-template-columns:106px 1fr 230px}.workspace aside{background:var(--panel);z-index:3}#toolbar{border-right:1px solid var(--line);display:flex;flex-direction:column;padding:.65rem}.toolgroup{display:grid;gap:.4rem}.tool{height:56px;padding:.25rem;font-size:1.25rem}.tool span{display:block;font-size:.55rem;margin-top:.25rem}.tool.active{border-color:var(--acid);color:var(--acid);background:#202b1a}#toolOptions{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.8rem}#toolOptions label{display:block;color:var(--muted);font-size:.55rem;letter-spacing:.1em;margin-bottom:.8rem}#toolOptions input{width:100%;margin-top:.3rem}#color{height:32px;padding:0;border:0;background:none}#sizeOut{font-size:.6rem}.symbols{display:grid;grid-template-columns:1fr 1fr;gap:3px}.symbol{height:35px;padding:3px;font-size:1rem}.symbol.active{color:var(--acid);border-color:var(--acid)}.actions{margin-top:auto;display:grid;gap:.4rem}.actions button{font-size:.55rem;padding:.55rem .2rem}.danger{color:#ff6a63!important;border-color:#66302c!important}#stage{position:relative;overflow:hidden;background-color:#050706;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:30px 30px}#canvas{width:100%;height:100%;display:block;touch-action:none}.zoom-controls{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);background:#0b0f0ddd;border:1px solid var(--line);display:flex;align-items:center}.zoom-controls button{border:0;border-right:1px solid var(--line);padding:.55rem .75rem}.zoom-controls span{font-size:.65rem;color:var(--muted);min-width:55px;text-align:center}#playersPanel{border-left:1px solid var(--line);padding:1rem;overflow:auto}#playersPanel h2{font-size:.62rem;letter-spacing:.2em;color:var(--muted);margin:1rem 0}.player{display:flex;align-items:center;gap:.55rem;padding:.55rem 0;border-bottom:1px solid #ffffff0b;font-size:.78rem}.player input{accent-color:var(--acid)}.player i{width:7px;height:7px;border-radius:50%;background:var(--acid)}#playersPanel button,#playersPanel .button{display:block;width:100%;margin-bottom:.5rem}#source{font-size:.6rem;line-height:1.5;color:var(--muted);word-break:break-word}.toast{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#111a15e8;border:1px solid var(--acid);padding:.65rem 1rem;color:var(--acid);font-size:.72rem}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);width:min(900px,90vw);max-height:85vh;padding:1.5rem}dialog::backdrop{background:#000b}.close{float:right;font-size:1.3rem;border:0}.candidates{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;overflow:auto}.candidate{border:1px solid var(--line);padding:.5rem;cursor:pointer}.candidate:hover{border-color:var(--acid)}.candidate img{width:100%;height:160px;object-fit:contain;background:#050605}.candidate p{font-size:.65rem;word-break:break-all}.mobile-only{display:none}.error{color:var(--red)}
@media(max-width:800px){.lobby{grid-template-columns:1fr;padding:1rem}.hero{display:none}.workspace{grid-template-columns:74px 1fr}.workspace #playersPanel{position:absolute;right:0;top:var(--header);bottom:0;width:230px;transform:translateX(100%);transition:.2s}.workspace.menu-open #playersPanel{transform:none}.mobile-only{display:block;margin-left:auto}.room-info{margin-left:.7rem}.tool{height:50px}.workspace{height:calc(100% - var(--header))}#toolbar{padding:.3rem}.symbols{grid-template-columns:1fr}.symbol{height:29px}.actions button{font-size:.48rem}.zoom-controls{bottom:8px}}

/* Compact login/editor shell. */
.lobby{display:grid;grid-template-columns:minmax(320px,460px);place-content:center;padding:2rem;background:#090c0b}
.setup{width:100%}
#toolbar{overflow-y:auto}
.tool{height:48px;padding:.2rem;font-size:1.05rem;flex:none}
.tool span{margin-top:.1rem;font-size:.5rem}
.actions{padding-top:.5rem}
dialog textarea{display:block;width:100%;margin:.5rem 0 1rem;resize:vertical;background:#080b0a;border:1px solid var(--line);color:var(--text);padding:.8rem;font:inherit}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}.dialog-actions .primary{width:auto}
.tool svg{display:block;width:19px;height:19px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#undo:disabled{opacity:.32;cursor:default}
#redo:disabled{opacity:.32;cursor:default}
#stage{isolation:isolate}
#canvas{image-rendering:auto}
.warning{padding:.65rem;border-left:2px solid var(--red);background:#ee443d0d;color:#b9c1bc!important;font-size:.65rem!important;line-height:1.45!important}

/* Wider toolbar to fit the element text input. */
.workspace{grid-template-columns:180px 1fr 230px}
.workspace{position:relative;grid-template-columns:180px minmax(0,1fr)}
#playersPanel{position:absolute;z-index:4;right:0;top:0;bottom:0;width:230px;transition:transform .2s,opacity .2s;box-shadow:-12px 0 28px #0008}
.workspace.panel-closed #playersPanel{transform:translateX(100%);opacity:0;pointer-events:none}
#togglePanel{margin-left:.35rem;padding:.35rem .45rem;font-size:1rem;line-height:1}
#toolOptions{padding:.5rem .4rem;display:flex;flex-direction:column;gap:.5rem}
#toolOptions label{display:block;color:var(--muted);font-size:.62rem;font-weight:700;letter-spacing:.1em}
#toolOptions input[type=range]{width:100%}
#elementTextGroup textarea{width:100%;min-height:70px;resize:vertical;background:#080b0a;border:1px solid var(--line);color:var(--text);padding:.5rem;font:inherit;font-size:.8rem}
#elementTextGroup{padding-top:.2rem;border-top:1px solid var(--line)}
@media(max-width:800px){.workspace{grid-template-columns:84px minmax(0,1fr)}.workspace #playersPanel{width:230px}}

/* Map select + inline "add map" trigger button */
.mapRow{display:flex;gap:.5rem}
.mapRow select{flex:1}
.mapRow #openAddMap{flex:none;width:2.6rem;font-size:1.1rem;line-height:1;padding:.72rem 0}
.lobby.direct-join #createSection{display:none}
.lobby.direct-join #roomCode{display:none}
.lobby.direct-join #joinRoom{width:100%}

/* Symbol buttons show the exact source image used for map markers. */
.symbol{display:flex;align-items:center;justify-content:center}
.symbol img{width:26px;height:26px;object-fit:contain;pointer-events:none}