* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #eef0f3;
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Kept in the DOM for search engines/screen readers, not shown visually -
   the topbar has no room for a full tagline next to the room controls. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Top bar ---------- */
.topbar {
  flex-shrink: 0;
  background: #2b2f38;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
}

.topbar h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.room-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #cfd3da;
}

.room-info__label {
  opacity: 0.7;
}

.room-info__code {
  font-family: 'Consolas', monospace;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
  color: #fff;
}

.room-info button,
.tool-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.room-info button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.room-info__main-link {
  font-size: 12px;
  color: #cfd3da;
  text-decoration: underline;
  white-space: nowrap;
}

.user-count {
  margin-left: auto;
  font-size: 13px;
  color: #9fe6a0;
  white-space: nowrap;
}

/* ---------- Toolbar ---------- */
.toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #dcdfe4;
  flex-wrap: wrap;
}

.toolbar__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#swatches {
  gap: 6px;
}

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d6d9de;
  cursor: pointer;
  padding: 0;
}

.swatch--active {
  box-shadow: 0 0 0 2px #2b2f38;
}

#customColor {
  width: 34px;
  height: 28px;
  border: 1px solid #d6d9de;
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  background: #fff;
}

.toolbar__size {
  font-size: 12px;
  color: #555;
}

.toolbar__size input[type='range'] {
  width: 110px;
}

.brush-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #c7cad0;
  flex-shrink: 0;
}

.tool-btn {
  border-color: #d6d9de;
  background: #f3f4f6;
  color: #333;
}

.tool-btn:hover {
  background: #e8e9ec;
}

.tool-btn.active {
  background: #2b2f38;
  color: #fff;
  border-color: #2b2f38;
}

.tool-btn--danger:hover {
  background: #fbe4e4;
  color: #b0281a;
  border-color: #f2c4c0;
}

.toolbar__zoom {
  margin-left: auto;
}

.zoom-input-wrap {
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 2px;
}

.zoom-input {
  width: 44px;
  font-size: 12px;
  font-family: inherit;
  padding: 4px 2px;
  text-align: center;
  border: 1px solid #d6d9de;
  border-radius: 3px;
  color: #333;
  /* hide the native up/down spinner - it's tiny and awkward at this size */
  -moz-appearance: textfield;
}

.zoom-input::-webkit-outer-spin-button,
.zoom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Canvas ---------- */
/* Plain block + text-align (not flex) on purpose: a flex container that
   centers an oversized child clips its overflow symmetrically and makes
   part of it unreachable by scrolling. Block layout has no such trap, so
   zooming in past the viewport stays fully scrollable. */
.canvas-wrap {
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  text-align: center;
}

.canvas-stack {
  position: relative;
  display: inline-block;
  line-height: 0;
}

#board {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  touch-action: none;
  cursor: crosshair;
  display: block;
}

#preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Modal overlays (password gate / friends room) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 27, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

/* `.modal-overlay` sets its own `display` above, which (per the CSS
   cascade) would otherwise override the UA default `[hidden]{display:none}`
   rule. Re-assert it here with higher specificity so `hidden` always wins -
   see the fake-PPT project for the bug this pattern avoids. */
.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  background: #fff;
  border-radius: 10px;
  padding: 22px 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-panel h2 {
  margin: 0;
  font-size: 17px;
  color: #222;
}

.modal-panel__desc {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.modal-panel__label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.modal-panel input {
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid #d6d9de;
  border-radius: 5px;
  font-family: inherit;
}

.modal-panel__error {
  color: #c0331f;
  font-size: 12px;
}

.modal-panel__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.modal-panel__primary {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 5px;
  border: 1px solid #2b2f38;
  background: #2b2f38;
  color: #fff;
  cursor: pointer;
}

.modal-panel__primary:hover {
  background: #3a3f4a;
}

.modal-panel__cancel,
.modal-panel__cancel-btn {
  font-size: 12px;
  color: #888;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.modal-panel__cancel:hover,
.modal-panel__cancel-btn:hover {
  text-decoration: underline;
}

/* ---------- Speech-bubble text editor overlay ---------- */
.bubble-editor {
  position: fixed;
  z-index: 100;
  width: 180px;
  min-height: 44px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  border: 2px solid #2b2f38;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  resize: none;
}