* { box-sizing: border-box; }
html, body { min-height:100%; }
body { margin:0; background:radial-gradient(circle at top,#203642,#0b1218 70%); color:#eef7f5; font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overscroll-behavior:none; }
button,input { font:inherit; }
button { cursor:pointer; }
#app { max-width:1200px; margin:auto; padding:16px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
h1 { margin:0 0 4px; font-size:clamp(22px,5vw,32px); }
header p { margin:0; opacity:.72; }
.me-pill { background:#0c1920e8; border:1px solid #ffffff1a; border-radius:999px; padding:8px 12px; white-space:nowrap; }
.office-shell { margin:14px auto 8px; }
#game { position:relative; width:min(94vw,920px); height:min(78vh,760px); min-height:420px; margin:auto; overflow:hidden; border:4px solid #52717a; border-radius:12px; box-shadow:0 20px 70px #0009; background:#253d46; touch-action:none; image-rendering:pixelated; }
#world { position:absolute; left:0; top:0; width:1024px; height:1024px; transform-origin:0 0; will-change:transform; }
#mapImage { position:absolute; left:0; top:0; width:1024px; height:1024px; display:block; image-rendering:pixelated; user-select:none; pointer-events:none; }
#players,#proximityLayer { position:absolute; inset:0; width:1024px; height:1024px; pointer-events:none; }
 .player { position:absolute; width:58px; height:76px; transform:translate(-50%,-50%); text-align:center; z-index:4; pointer-events:none; }
.player-avatar { position:absolute; left:50%; top:28px; width:46px; height:46px; transform:translateX(-50%); border-radius:50%; border:2px solid #ffffffd9; background:#1b2b34; box-shadow:0 5px 10px #0008; overflow:hidden; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.player-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.player.me .player-avatar { border-color:#55e0a5; box-shadow:0 0 0 2px #55e0a522, 0 5px 12px #0009; }
.player.near .player-avatar { border-color:#55e0a5; box-shadow:0 0 0 4px #55e0a522, 0 0 16px #55e0a566; }
.player.walking .player-avatar { transform:translateX(-50%) translateY(-2px); }
.player-shadow { position:absolute; left:50%; bottom:0; width:34px; height:7px; transform:translateX(-50%); border-radius:50%; background:#0007; filter:blur(1px); }
.player small { position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; background:#081117ee; border:1px solid #ffffff24; border-radius:7px; padding:3px 7px; white-space:nowrap; color:#fff; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.player small::after { content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; transform:translateX(-50%) rotate(45deg); background:#081117ee; border-right:1px solid #ffffff24; border-bottom:1px solid #ffffff24; }
.player.me { z-index:6; }
.generic-avatar { position:relative; display:block; border-radius:50%; background:linear-gradient(145deg,#91a2ab,#4e5d66); overflow:hidden; }
.generic-avatar::before { content:""; position:absolute; width:38%; height:38%; left:31%; top:18%; border-radius:50%; background:#d6dee1; box-shadow:inset -2px -2px 3px #0003; }
.generic-avatar::after { content:""; position:absolute; width:68%; height:48%; left:16%; bottom:-2%; border-radius:45% 45% 18% 18%; background:#c3cdd1; box-shadow:inset -3px -3px 5px #0003; }
.avatar-picker { display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; margin:12px auto 10px; color:#bff7df; font-weight:800; cursor:pointer; }
.avatar-preview { width:88px; height:88px; border:2px solid #55e0a5; box-shadow:0 0 0 4px #55e0a522; }
.avatar-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-avatar { width:26px; height:26px; flex:none; border:1px solid #ffffff55; }
.me-pill { display:flex; align-items:center; gap:7px; }
.proximity-ring { position:absolute; border:0px dashed #55e0a5aa; border-radius:50%; transform:translate(-50%,-50%); width:70px; height:70px; opacity:.42; box-shadow:0 0 18px #55e0a544 inset; }
#clickMarker { position:absolute; width:16px; height:16px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); display:none; box-shadow:0 0 0 4px #20d6a544; z-index:8; pointer-events:none; }
.map-hint { position:absolute; left:12px; bottom:12px; background:#071118cc; border:1px solid #ffffff1b; padding:6px 9px; border-radius:8px; opacity:.8; pointer-events:none; }
.toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0; }
.control { color:#eef7f5; background:#15262e; border:1px solid #ffffff1c; border-radius:9px; padding:9px 12px; }
.control:hover { background:#203741; }
.control.ready { border-color:#4ce5a4; box-shadow:0 0 0 1px #4ce5a422 inset; }
.control.off { opacity:.55; text-decoration:line-through; }
#status { text-align:center; min-height:24px; font-weight:700; margin:6px; }
#videos { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
.video-card { position:relative; width:220px; background:#080d12; border:1px solid #ffffff18; border-radius:10px; padding:6px; overflow:hidden; }
.video-card video { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#000; border-radius:6px; }
.video-card span { display:block; padding:5px 2px 1px; font-size:12px; font-weight:700; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:#050b0edd; backdrop-filter:blur(5px); }
.name-card { width:min(390px,100%); background:#12232a; border:1px solid #ffffff1c; border-radius:16px; padding:28px; text-align:center; box-shadow:0 25px 80px #0009; }
.logo { font-size:48px; }
.name-card h1 { margin-top:4px; }
.name-card p { opacity:.7; }
.name-card input { width:100%; border:1px solid #ffffff22; border-radius:9px; padding:12px; background:#081218; color:white; outline:none; margin:8px 0 10px; }
.name-card input:focus { border-color:#55e0a5; }
.name-card button { width:100%; border:0; border-radius:9px; padding:12px; background:#48d69b; color:#062018; font-weight:800; }
.name-card small { display:block; margin-top:12px; opacity:.5; }
@media (max-width:700px) { #app{padding:9px;} header{align-items:flex-start;flex-direction:column;} .me-pill{align-self:flex-start;} #game{width:100%;height:calc(100vh - 230px);min-height:420px;border-width:2px;} }

/* --- Visual obstacle editor --- */
#editorLayer { position:absolute; inset:0; width:1024px; height:1024px; pointer-events:none; z-index:20; }
#editorLayer[aria-hidden="false"] { pointer-events:auto; }
.editor-obstacle { position:absolute; border:2px dashed #ff3030; background:rgba(255,35,35,.08); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; cursor:move; touch-action:none; }
.editor-obstacle:hover, .editor-obstacle.selected { background:rgba(255,35,35,.14); border-color:#ff1717; box-shadow:0 0 0 1px #ff777766 inset, 0 0 12px #ff222233; }
.editor-label { position:absolute; left:2px; top:2px; max-width:calc(100% - 4px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; background:#a40000dd; border-radius:3px; padding:1px 4px; font:700 9px/1.2 system-ui,sans-serif; pointer-events:none; }
.resize-handle { position:absolute; width:10px; height:10px; background:#fff; border:2px solid #e11; border-radius:2px; z-index:2; }
.resize-handle.nw { left:-6px; top:-6px; cursor:nwse-resize; }
.resize-handle.n { left:50%; top:-6px; transform:translateX(-50%); cursor:ns-resize; }
.resize-handle.ne { right:-6px; top:-6px; cursor:nesw-resize; }
.resize-handle.w { left:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.resize-handle.e { right:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.resize-handle.sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.resize-handle.s { left:50%; bottom:-6px; transform:translateX(-50%); cursor:ns-resize; }
.resize-handle.se { right:-6px; bottom:-6px; cursor:nwse-resize; }
#editorToolbar { position:absolute; left:12px; top:12px; z-index:30; display:flex; align-items:center; flex-wrap:wrap; gap:6px; max-width:calc(100% - 180px); padding:8px 10px; border:1px solid #ff4a4a88; border-radius:9px; background:#300b0be8; box-shadow:0 8px 25px #0009; }
#editorToolbar[hidden] { display:none; }
#editorToolbar strong { color:#ff8b8b; margin-right:3px; }
#editorToolbar button { color:#fff; background:#5a1616; border:1px solid #ff5a5a55; border-radius:6px; padding:5px 8px; font-size:12px; }
#editorToolbar button:hover { background:#7a2020; }
#editorToolbar button:disabled { opacity:.5; }
#editorStatus { color:#ffd3d3; font-size:11px; opacity:.9; }
body.editing #game { cursor:crosshair; }
@media (max-width:700px) { #editorToolbar { max-width:calc(100% - 120px); font-size:11px; } #editorToolbar strong { width:100%; } .resize-handle { width:14px; height:14px; } }

@keyframes avatarBounce {
  from { transform:translateX(-50%) translateY(0); }
  to { transform:translateX(-50%) translateY(-3px); }
}
.player.walking .player-avatar { animation:avatarBounce 180ms ease-in-out infinite alternate; }

.mic-indicator { display:inline-block; min-width:0; margin-left:4px; opacity:0; transform:scale(.8); transition:opacity .12s ease, transform .12s ease; }
.mic-indicator.talking { opacity:1; transform:scale(1); filter:drop-shadow(0 0 4px #55e0a5); }
.player.near .mic-indicator { opacity:.65; }
.player.near .mic-indicator.talking { opacity:1; }