:root{
  --bg: #0d0b09;
  --card: #1a1410;
  --accent: #ff6b35;
  --text: #f4e4c1;
  --muted: #8a7d6a;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  background: var(--bg);
  color: var(--text);
  font-family:'Courier New', monospace;
  overflow:hidden;
}

/* ---------- тулбар ---------- */
#toolbar{
  position:fixed; top:0; left:0; right:0;
  z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  background: rgba(13,11,9,0.9);
  border-bottom:1px solid #2a2117;
}
#toolbar button{
  font-family:inherit; font-size:13px;
  padding:8px 12px; border-radius:6px; border:1px solid #3a2f22;
  background:#14100c; color:var(--text); cursor:pointer;
}
#toolbar button.active{ background:var(--accent); color:#1a1410; font-weight:bold; }
#save-btn{ opacity:0.4; }
#save-btn:disabled{ cursor:default; }
#save-btn.dirty{
  opacity:1;
  background: var(--accent);
  color:#1a1410;
  font-weight:bold;
}
.toolbar-title{ letter-spacing:4px; font-size:13px; color:var(--muted); }
.zoom-controls{ display:flex; gap:6px; }
.add-controls{ display:flex; align-items:center; gap:10px; }
.ratio-inputs{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.ratio-inputs input{
  width:42px;
  text-align:center;
  padding:6px 4px;
}

/* ---------- холст ---------- */
#viewport{
  position:absolute; top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  touch-action:none;
  cursor:grab;
}
#canvas{
  position:relative;
  transform-origin: 0 0;
  background-image:
    linear-gradient(rgba(244,228,193,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,228,193,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  background-color:#111;
}

/* ---------- комната ---------- */
.room{
  position:absolute;
  background: transparent;
}
.room-video-wrap{
  position:absolute; inset:0;
  overflow:hidden;
  background: transparent;
}
.room-video-wrap video,
.room-video-wrap img{
  display:block;
  pointer-events:none;
}
.room-video-wrap video.cover,
.room-video-wrap img.cover{
  width:100%; height:100%;
  object-fit:cover;
}
.room-video-wrap video.cropped,
.room-video-wrap img.cropped{
  position:absolute;
  max-width:none;
  max-height:none;
  /* width/height/left/top считает room-render.js под конкретный кроп */
}
.room-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:4px 8px;
  font-size:11px;
  background:linear-gradient(transparent, rgba(0,0,0,0.75));
  pointer-events:none;
}

/* элементы редактирования — только на странице /r/<token> */
.room-delete{
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(20,16,12,0.85); color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  font-size:14px; line-height:1; cursor:pointer;
  z-index:5;
}
.room-edit{
  position:absolute; top:4px; right:30px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(20,16,12,0.85); color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  font-size:11px; line-height:1; cursor:pointer;
  z-index:5;
}
.resize-handle{
  position:absolute; right:0; bottom:0;
  width:18px; height:18px;
  background: var(--accent);
  cursor: nwse-resize;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.room-preview{
  position:absolute;
  border:2px dashed var(--accent);
  background: rgba(255,107,53,0.1);
  pointer-events:none;
}

.hex-handle{
  position:absolute;
  width:16px; height:16px;
  margin-left:-8px; margin-top:-8px;
  border-radius:50%;
  background: var(--accent);
  border:2px solid #1a1410;
  cursor: grab;
  z-index:6;
  touch-action:none;
  pointer-events:auto;
}
.shape-clip-preview{
  position:absolute; inset:0;
  background: rgba(255,107,53,0.22);
  pointer-events:none;
}
.room-shape-toolbar{
  position:absolute;
  bottom:-42px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
  pointer-events:auto;
}
.room-shape-toolbar button{
  font-family:inherit; font-size:13px;
  padding:6px 14px; border-radius:6px; border:none;
  cursor:pointer; white-space:nowrap;
}
.room-shape-toolbar .shape-confirm{ background:var(--accent); color:#1a1410; font-weight:bold; }
.room-shape-toolbar .shape-cancel{ background:#2a2117; color:var(--text); }

.room-shape-toggle{
  position:absolute; top:4px; right:56px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(20,16,12,0.85); color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  font-size:12px; line-height:1; cursor:pointer;
  z-index:5;
}

/* ---------- модалка загрузки ---------- */
.modal{
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6);
}
.modal.hidden{ display:none; }
.modal-box{
  background:var(--card);
  border:1px solid #2a2117;
  border-radius:10px;
  padding:20px;
  width:90%; max-width:360px;
}
.modal-box h3{ margin-top:0; }
.modal-box form{ display:flex; flex-direction:column; gap:10px; }
.modal-box input{
  font-family:inherit; font-size:14px;
  padding:10px; border-radius:6px; border:1px solid #3a2f22;
  background:#14100c; color:var(--text);
}
.modal-buttons{ display:flex; justify-content:flex-end; gap:8px; }
.modal-buttons button{
  font-family:inherit; padding:8px 14px; border-radius:6px; border:none; cursor:pointer;
}
.modal-buttons button[type="submit"]{ background:var(--accent); color:#1a1410; font-weight:bold; }
.modal-buttons button[type="button"]{ background:#2a2117; color:var(--text); }

/* ---------- модалка редактирования (кроп видео) ---------- */
.edit-box{ max-width: 420px; }
.hint{ font-size:12px; color:var(--muted); margin:4px 0 10px; }

#edit-video-wrap{
  position:relative;
  margin:0 auto;
  background:#000;
  overflow:hidden;
  touch-action:none;
  /* width/height проставляет JS под реальные пропорции видео */
}
#edit-media-slot video,
#edit-media-slot img{
  display:block;
  width:100%; height:100%;
  pointer-events:none;
}
#edit-crop-box{
  position:absolute;
  border:2px solid var(--accent);
  background: rgba(255,107,53,0.15);
  box-sizing:border-box;
}
.crop-handle{
  position:absolute; right:-8px; bottom:-8px;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent);
  border:2px solid #1a1410;
  cursor:nwse-resize;
}