body {
  margin:0;
  background:#2c3e50;
  color:white;
  font-family:sans-serif;
  display:flex;
  height:100vh;
  overflow:hidden;
  max-width:100vw;
}

/* ---- Sidebar ---- */
#sidebar {
  width:300px;
  min-width:300px;
  border-right:2px solid #444;
  display:flex;
  flex-direction:column;
  background:#111;
  overflow:hidden;
}

.sidebar-top {
  padding:10px;
  border-bottom:1px solid #333;
  flex-shrink:0;
}

/* ---- Characters panel ---- */
#chars-panel {
  flex-shrink:0;
  border-bottom:1px solid #333;
}

#chars-panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 10px;
  background:#1a1a1a;
  cursor:pointer;
  font-size:0.8rem;
  font-weight:bold;
  letter-spacing:0.05em;
  user-select:none;
}
#chars-panel-header:hover { background:#222; }

#chars-panel-body {
  padding:6px 8px;
  background:#0e0e0e;
}

#sheet-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  margin-bottom:5px;
}

.sheet-tab-btn {
  background:#1e3a4a;
  color:#aaddee;
  border:1px solid #335566;
  border-radius:3px;
  padding:5px 4px;
  text-align:center;
  cursor:pointer;
  font-size:0.75rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sheet-tab-btn:hover { background:#254d62; }
.sheet-tab-btn.active {
  background:#557788;
  color:white;
  border-color:#88aacc;
  font-weight:bold;
}
.sheet-tab-btn.host-tab {
  background:#2a3a22;
  color:#aadd88;
  border-color:#446633;
}
.sheet-tab-btn.host-tab:hover { background:#3a5030; }
.sheet-tab-btn.host-tab.active { background:#557744; color:white; border-color:#88aa66; }

#add-sheet-btn {
  grid-column:1/-1;
  width:100%;
  background:#1a3a2a;
  color:#88ddaa;
  border:1px dashed #336644;
  border-radius:3px;
  padding:4px;
  cursor:pointer;
  font-size:1rem;
  font-weight:bold;
  box-sizing:border-box;
}
#add-sheet-btn:hover { background:#224433; }

/* ---- Chat ---- */
#chatLog {
  flex-grow:1;
  overflow-y:auto;
  padding:10px;
  font-size:0.9rem;
  color:#ccc;
}

.log-item {
  border-left:3px solid #557788;
  padding-left:8px;
  margin-bottom:8px;
}

.log-user {
  color:#557788;
  font-weight:bold;
  font-size:0.75rem;
  display:block;
}

#chatInput {
  background:#222;
  border:1px solid #444;
  color:white;
  padding:10px;
  flex-shrink:0;
}

#save-all-btn {
  background: #1a2a34;
  border: 1px solid #557788;
  color: #aaddee;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  transition: background 0.12s;
}
#save-all-btn:hover { background: #2a4a5a; }

/* ---- Sheet area ---- */
#sheet-container {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:320px;
  overflow:hidden;
  position:relative;
}

#sheet-container iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  display: none;
}
#sheet-container iframe.active {
  display: block;
}

/* Shrunk mode: each sheet's body handles its own scale transform */

/* ---- Lobby ---- */
#lobby {
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:100;
}

input {
  padding:10px;
  margin:5px;
  width:200px;
}

.hidden { display:none!important; }

/* ---- Roll results ---- */
.roll-result {
  display: block;
  font-weight: bold;
  font-size: 0.95rem;
  margin-top: 2px;
}
.roll-success { color: #44dd44; }
.roll-hard    { color: #44ccbb; }
.roll-heroic  { color: #44dd44; }
.roll-fail    { color: #ee4444; }

/* ============================================================
   Map Panel — flex sibling of sheet-container
   ============================================================ */
#map-panel {
  flex: 0 0 auto;
  width: 50%;
  min-width: 200px;
  display: none;
  flex-direction: row;
  background: #111;
  border-left: 2px solid #335566;
  overflow: hidden;
  height: 100vh;
  position: relative;
}
#map-panel.visible {
  display: flex;
}

/* Drag handle — thin strip on left edge of map panel */
#map-drag-handle {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: #335566;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  z-index: 10;
}
#map-drag-handle:hover,
#map-drag-handle.dragging {
  opacity: 1;
  background: #aaddee;
}

#map-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  min-height: 0;
  min-width: 0;
}

/* Map toggle button — lives inside sidebar at bottom */
#map-toggle-btn {
  width: 100%;
  background: #0e1a14;
  border: none;
  border-top: 1px solid #1e3a28;
  color: #5fa87a;
  font-family: 'Georgia', serif;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 9px 10px;
  cursor: pointer;
  display: none;         /* shown by JS */
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  text-transform: uppercase;
}
#map-toggle-btn:hover  { background: #142010; color: #7dc898; }
#map-toggle-btn.active { background: #1a3020; color: #9de4b8; border-top-color: #3a6a48; }

/* ---- Dice graphics ---- */
.die-img-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  height: 2.7em;
  vertical-align: middle;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}

.die-img-wrap.die-sm {
  width: 2.0em;
  height: 2.0em;
}

.die-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.die-img-num {
  position: relative;
  z-index: 1;
  font-weight: bold;
  font-size: 0.92em;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  line-height: 1;
  pointer-events: none;
}

.die-img-wrap.die-sm .die-img-num {
  font-size: 0.78em;
}

.die-nat20 .die-img-num { color: #ffe060; }
.die-nat1  .die-img-num { color: #ff6060; }
.die-mid   .die-img-num { color: #ffffff; }

.die-img-wrap.die-nat20 .die-img { filter: brightness(1.25) hue-rotate(80deg); }
.die-img-wrap.die-nat1  .die-img { filter: brightness(1.1) hue-rotate(-60deg) saturate(1.5); }
.die-img-wrap.die-mid   .die-img { filter: none; }

/* ── Table roll result box ────────────────────────────────── */
.table-roll-box {
  border: 1px solid #557788;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
  font-size: 0.82rem;
}
.table-roll-box-title {
  background: #1e3a4a;
  color: #aaddee;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-bottom: 1px solid #557788;
}
.table-roll-box-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid #223344;
  color: #ccddee;
}
.table-roll-box-row:last-child {
  border-bottom: none;
}
.table-roll-box-label {
  color: #778899;
  min-width: 80px;
  font-size: 0.76rem;
}
.table-roll-box-value {
  font-weight: bold;
  color: #eef4ff;
}
.table-roll-box-value.sev-mild     { color: #44cc66; }
.table-roll-box-value.sev-severe   { color: #ee8833; }
.table-roll-box-value.sev-terminal { color: #ee3333; }