/* ===================================================================
   Doodle II — shared sketchbook (single-player enhanced canvas).
   A fixed overlay panel (shown by removing [hidden] + body.doodle2-mode),
   modelled on the parchment aesthetic. The .doodle2-stage is a fixed-size
   pan/zoom viewport; #doodle2Canvas is transformed inside it by the engine.
   =================================================================== */

.doodle2-card {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px clamp(12px, 3vw, 28px) 20px;
  box-sizing: border-box;
  overflow-y: auto;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 250, 236, 0.9), transparent 60%),
    var(--parchment, #efe4cc);
  color: var(--ink-dark, #2c2016);
  font-family: 'Crimson Pro', Georgia, serif;
}
.doodle2-card[hidden] { display: none; }

/* Match the extras / collab-board convention: while Doodle II is open, hide every
   other top-level body child so nothing scrolls or peeks behind the overlay.
   (.cbp-pop is the shared floating colour picker; scripts must stay in the DOM.) */
body.doodle2-mode > *:not(#doodle2Card):not(.cbp-pop):not(script) {
  display: none !important;
}

.doodle2-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.doodle2-topbar-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.doodle2-topbar-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.doodle2-status { font-size: 0.85rem; color: rgba(63, 46, 32, 0.72); min-height: 1em; }
.doodle2-status.is-error { color: #9c2b1f; }
.doodle2-topbar-actions { display: flex; gap: 8px; }

.doodle2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.doodle2-studio { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* The pan/zoom viewport: a square, bounded by height, that clips the transformed canvas. */
.doodle2-stage {
  position: relative;
  width: 100%;
  max-width: min(100%, 72vh);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(92, 64, 48, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(45deg, rgba(120, 90, 60, 0.05) 25%, transparent 25%, transparent 75%, rgba(120, 90, 60, 0.05) 75%) 0 0 / 22px 22px,
    #d99b6c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 30px rgba(40, 28, 18, 0.18);
  touch-action: none;
}
.doodle2-canvas-shell { position: absolute; inset: 0; overflow: hidden; }
#doodle2Canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: #d99b6c;
  box-shadow: 0 2px 14px rgba(40, 28, 18, 0.22);
  cursor: crosshair;
}
.doodle2-card[data-doodle2-tool="erase"] #doodle2Canvas { cursor: cell; }
.doodle2-canvas-hint {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(63, 46, 32, 0.6);
}

/* Controls sidebar */
.doodle2-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(92, 64, 48, 0.28);
  border-top: 3px solid rgba(92, 64, 48, 0.5);
  border-radius: 10px;
  background: rgba(255, 252, 244, 0.7);
  box-shadow: 0 6px 20px rgba(40, 28, 18, 0.1);
}
.doodle2-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(63, 46, 32, 0.85);
}
.doodle2-field input[type="text"],
.doodle2-field select {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  padding: 6px 4px;
  color: var(--ink-dark, #2c2016);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(92, 64, 48, 0.4);
}
.doodle2-field input[type="text"]:focus,
.doodle2-field select:focus { outline: none; border-bottom-color: rgba(201, 162, 39, 0.9); }
.doodle2-field-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(63, 46, 32, 0.85);
}

.doodle2-ownership { font-size: 0.82rem; font-weight: 600; color: rgba(63, 46, 32, 0.8); }
.doodle2-current { font-size: 0.82rem; color: rgba(63, 46, 32, 0.7); }

/* Tools */
.doodle2-toolset { display: flex; gap: 6px; }
.doodle2-tool-btn {
  flex: 1 1 auto;
  padding: 8px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dark, #2c2016);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(92, 64, 48, 0.32);
  border-radius: 6px;
  cursor: pointer;
}
.doodle2-tool-btn.is-active {
  background: rgba(92, 64, 48, 0.86);
  color: #f7efdd;
  border-color: rgba(92, 64, 48, 0.9);
}

/* Color + recents */
.doodle2-field-row { display: flex; gap: 12px; align-items: flex-start; }
.doodle2-color-field { flex: 0 0 auto; }
.doodle2-color-field input[type="color"] {
  width: 48px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(92, 64, 48, 0.34);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.doodle2-recent-block { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.doodle2-recent-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.doodle2-recent-empty { font-size: 0.75rem; color: rgba(63, 46, 32, 0.55); }
.doodle2-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(92, 64, 48, 0.34);
  background: var(--doodle2-swatch, #2c2016);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.doodle2-swatch.is-active { outline: 2px solid rgba(201, 162, 39, 0.9); outline-offset: 1px; }

/* Ranges */
.doodle2-range-stack { display: flex; flex-direction: column; gap: 10px; }
.doodle2-size-row { display: flex; flex-direction: column; gap: 3px; }
.doodle2-size-field input[type="range"] { width: 100%; }
.doodle2-size-readout { font-size: 0.78rem; color: rgba(63, 46, 32, 0.72); }
.doodle2-velocity-row.is-disabled { opacity: 0.45; }

.doodle2-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(63, 46, 32, 0.85);
  cursor: pointer;
}

/* Action button rows */
.doodle2-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.doodle2-actions .btn { flex: 1 1 auto; }
.doodle2-actions .btn.is-confirming { background: #9c2b1f; color: #f7efdd; border-color: #9c2b1f; }

/* Gallery */
.doodle2-gallery-shell {
  border-top: 1px solid rgba(92, 64, 48, 0.3);
  padding-top: 12px;
}
.doodle2-card.is-gallery-open .doodle2-gallery-shell { display: block; }
.doodle2-gallery-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.doodle2-gallery-head h3 { font-family: 'Cinzel', serif; margin: 0; font-size: 1rem; letter-spacing: 0.05em; }
.doodle2-gallery-status { font-size: 0.82rem; color: rgba(63, 46, 32, 0.7); }
.doodle2-gallery-status.is-error { color: #9c2b1f; }
.doodle2-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.doodle2-empty {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
  color: rgba(63, 46, 32, 0.6);
  border: 1px dashed rgba(92, 64, 48, 0.3);
  border-radius: 8px;
}
.doodle2-gallery-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(92, 64, 48, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 244, 0.72);
}
.doodle2-gallery-item.is-selected { border-color: rgba(201, 162, 39, 0.9); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.6); }
.doodle2-gallery-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #fbf6ea;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(92, 64, 48, 0.2);
}
.doodle2-gallery-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.doodle2-preview-placeholder { font-size: 0.78rem; color: rgba(63, 46, 32, 0.5); }
.doodle2-gallery-copy { display: flex; flex-direction: column; gap: 3px; }
.doodle2-gallery-copy strong { font-size: 0.95rem; }
.doodle2-gallery-meta { font-size: 0.76rem; color: rgba(63, 46, 32, 0.66); }
.doodle2-gallery-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Portrait badge on the gallery entry that is the current character portrait. */
.doodle2-gallery-item.is-portrait { border-color: rgba(201, 162, 39, 0.9); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.55); }
.doodle2-portrait-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2c2016;
  background: rgba(201, 162, 39, 0.92);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(40, 28, 18, 0.3);
}

/* The rendered portrait image inside the sheet frame (injected by doodle2.js).
   Not scoped to #pools — the portrait cell sits as a sibling of #pools. */
.character-portrait-frame {
  position: relative;
}
.character-portrait-frame .character-portrait-image {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  display: block;
  object-fit: cover;
  border-radius: 13px;
  box-shadow: inset 0 0 10px rgba(54, 30, 12, 0.22);
}
.character-portrait-frame .character-portrait-image[hidden] { display: none; }

/* Character biography — a full-width sheet of ruled writing lines (no boxed input, no title).
   Collapsed to two lines, expands on click, grows smoothly while typing. Height is driven by JS;
   the transition animates collapse/expand and per-line growth. */
.character-bio {
  width: 100%;
  max-width: none;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.character-bio-input {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  /* line-height MUST match the ruled-line period below so each line of text sits on a rule. */
  line-height: 2rem;
  color: var(--ink-dark, #2c2016);
  background-color: transparent;
  /* Ruled writing lines: a faint ledger rule at the foot of every text line, drawn on the
     parchment itself. Period == line-height; the padding-box origin keeps rules + text aligned. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    var(--rule-color) calc(2rem - 1px),
    var(--rule-color) 2rem
  );
  background-attachment: local;
  border: none;
  border-radius: 0;
  padding: 6px 2px 0;
  transition: height 0.2s ease;
}
.character-bio:not(.is-expanded) .character-bio-input { cursor: pointer; }
.character-bio-input:focus { outline: none; }
.character-bio-input::placeholder {
  color: rgba(63, 46, 32, 0.5);
  font-style: italic;
}
.character-bio-footer { display: none; justify-content: center; }
.character-bio.is-expanded .character-bio-footer { display: flex; }
.character-bio-collapse { font-size: 0.8rem; }

/* Expanded: use the full viewport height for a roomier canvas. */
.doodle2-card.is-expanded .doodle2-stage { max-width: min(100%, 86vh); }

/* Mobile: stack controls beneath the canvas. */
@media (max-width: 860px) {
  .doodle2-layout { grid-template-columns: 1fr; }
  .doodle2-stage { max-width: min(100%, 62vh); }
}