/* inkling — warm parchment / woody aesthetic, mobile-first */

:root {
  --paper:        #f3e7cd;  /* warm cream parchment */
  --paper-2:      #ecdcb8;  /* card surface, slightly darker */
  --ink:          #4a3424;  /* warm dark brown ink (not stark black) */
  --ink-soft:     #7a5e44;
  --rule:         #d4bd96;  /* dividers — warm tan */
  --accent:       #a8612a;  /* burnt orange */
  --accent-deep:  #8c4a1c;  /* hover/pressed */
  --accent-soft:  #e8c89f;  /* pale wheat */
  --waiting:      #9b7e5e;
  --moss:         #7b8f5c;  /* leafy green for fresh accents */
  --shadow-soft:  0 4px 14px rgba(74, 52, 36, 0.12);
  --shadow-card:  0 2px 6px rgba(74, 52, 36, 0.10);
  --shadow-lift:  0 6px 20px rgba(74, 52, 36, 0.18);

  --serif: "Lacquer", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Hachi Maru Pop", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans-info: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 0%,  rgba(255, 226, 175, 0.5), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(168, 124,  76, 0.16), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, .site-title {
  font-family: var(--serif);
  letter-spacing: -0.005em;
}

h1 { font-size: 2.4rem; margin: 0 0 1rem; font-weight: 400; letter-spacing: 0.01em; }
h2 {
  font-size: 1rem;
  margin: 1.75rem 0 0.6rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--sans);
  font-weight: 700;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: rgba(243, 231, 205, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-title {
  font-size: 1.85rem;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.site-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.nav-user { color: var(--ink-soft); font-size: 0.9rem; }

.logout-form { display: inline; margin: 0; }
.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--accent-deep); font: inherit; cursor: pointer; text-decoration: none;
}
.link-btn:hover { color: var(--accent); text-decoration: underline; }

.site-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.push-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  font-size: 0.95rem;
}
.push-banner .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

.messages { list-style: none; padding: 0; margin: 1rem 0; }
.msg {
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  margin-bottom: 0.5rem;
  border-radius: 0 8px 8px 0;
}
.msg-error { border-left-color: #b65a3d; background: #f1d4be; }
.msg-success { border-left-color: var(--moss); background: #d8e1c2; }

.thread-list { list-style: none; padding: 0; margin: 0; }
.thread { border-bottom: 1px solid var(--rule); }
.thread:last-child { border-bottom: 0; }
.thread a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.95rem 0.5rem;
  color: var(--ink);
  gap: 0.75rem;
  flex-wrap: wrap;
  border-radius: 6px;
  transition: background 0.15s;
}
.thread a:hover { background: rgba(168, 124, 76, 0.10); text-decoration: none; }
.thread-active a strong { color: var(--accent-deep); }
.thread-meta { color: var(--ink-soft); font-size: 0.85rem; }
.thread-waiting .thread-meta { color: var(--waiting); }

.empty-state { padding: 2rem 0; text-align: center; color: var(--ink-soft); }

.settings-block {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.settings-block h2 { margin-top: 0; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.settings-status { color: var(--ink-soft); font-size: 0.92rem; }
.actions { margin-top: 1.5rem; color: var(--ink-soft); font-size: 0.9rem; }

.btn {
  display: inline-block;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--ink-soft);
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 600;
  font-family: var(--sans);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { background: var(--paper); box-shadow: var(--shadow-soft); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-card); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: white; }

/* big kid-obvious send button */
.send-bar {
  margin: 3rem 0 0;
  padding: 0.5rem 0 0;
}
.btn-send {
  display: block;
  width: 100%;
  padding: 1.15rem 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fffaf0;
  border: 1px solid var(--accent-deep);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-lift);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
  font-family: var(--sans);
}
.btn-send:hover { filter: brightness(1.05); }
.btn-send:active { transform: translateY(2px); box-shadow: var(--shadow-card); filter: brightness(0.95); }
.btn-send:disabled { background: var(--ink-soft); cursor: wait; box-shadow: none; }

.hero { padding: 2rem 0 1rem; text-align: center; }
.hero h1 { font-size: 4rem; line-height: 1.1; letter-spacing: 0.01em; }
.tagline { font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 1.5rem; font-style: italic; font-family: var(--serif); }
.cta { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }

/* form basics */
form.stack { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
form.stack label { font-weight: 600; color: var(--ink); }
form.stack input[type="text"],
form.stack input[type="email"],
form.stack input[type="password"],
form.stack textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fdf8ec;
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(74, 52, 36, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
form.stack input:focus,
form.stack textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 97, 42, 0.15), inset 0 1px 2px rgba(74, 52, 36, 0.06);
}
form.stack textarea { resize: vertical; min-height: 4em; }
.field-help { color: var(--ink-soft); font-size: 0.85rem; font-family: var(--sans-info); }
.remember { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

/* utility / meta text uses system sans for alignment & legibility — Hachi Maru
   stays on prose, buttons, banners, and labels where its character helps. */
.thread-meta, .nav-user, .turn-time, .turn-head, .errorlist,
.tile-meta, .tile-badge, .turn-num,
form.stack input[type="text"],
form.stack input[type="email"],
form.stack input[type="password"],
form.stack textarea,
.code-input,
.invite-code-display {
  font-family: var(--sans-info);
}
.errorlist { color: #b65a3d; padding-left: 1.25rem; margin: 0.25rem 0; }

.invite-code-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.25rem;
  letter-spacing: 0.2em;
  padding: 1rem 1.5rem;
  border: 1px solid var(--rule);
  background: #fdf8ec;
  border-radius: 10px;
  display: inline-block;
  user-select: all;
  box-shadow: var(--shadow-card);
}

.code-list { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 1rem; }
.code-list li { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.code-input {
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  text-align: center;
}

/* compose / canvas */
.compose-form { max-width: 100%; }
.compose-form fieldset {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.1rem 1rem 1.4rem;
  margin: 0;
  background: #fdf8ec;
  box-shadow: var(--shadow-card);
}
.compose-form legend {
  padding: 0 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.guess-fieldset { background: rgba(168, 124, 76, 0.06); }
.draw-fieldset { background: #fffdf6; }

.prior-piece { margin: 1rem 0 1.5rem; }
.piece-img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

.canvas-wrap {
  width: 100%;
  margin: 0.5rem 0;
  padding: 6px;            /* dead-space inside the wrap so finger can rest off-canvas */
  border: 1px solid var(--ink-soft);
  border-radius: 12px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
#inkling-canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
  border-radius: 8px;
}

/* dedicated undo bar beneath the trackpad — page-level, not inside drawer */
.undo-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0.5rem 0 0;
}
.undo-bar .tool-btn { font-size: 0.85rem; }

/* fullscreen drawing mode */
.fullscreen-done {
  display: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 12;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
/* fullscreen layout: canvas fills the upper portion, toolbar occupies the
   bottom dead zone (so it's always reachable while drawing). Dark backdrop
   fills any gaps so the transition is obvious. */
body.drawing-fullscreen {
  overflow: hidden;
  background: #1a1a1a;
  --fs-toolbar-h: 130px;
  --fs-trackpad-h: 110px;
  --fs-quickbar-h: 56px;
  --fs-direct-bar-h: 44px;
}
/* hide the rest of the page chrome (header, banners, form labels, send button,
   guess fieldset, compose title input) so only canvas + toolbar + trackpad
   + the fullscreen quick bar are seen. */
body.drawing-fullscreen .site-header,
body.drawing-fullscreen .push-banner,
body.drawing-fullscreen .messages,
body.drawing-fullscreen .site-main > h1,
body.drawing-fullscreen .site-main > p,
body.drawing-fullscreen .compose-form > .stack > *:not(fieldset),
body.drawing-fullscreen .guess-fieldset,
body.drawing-fullscreen .draw-fieldset > *:not(.canvas-wrap):not(.canvas-tools):not(.trackpad):not(.fs-quick-bar):not(.fs-direct-bar),
body.drawing-fullscreen .draw-fieldset > legend,
body.drawing-fullscreen .send-bar,
body.drawing-fullscreen .site-main > a {
  display: none !important;
}
body.drawing-fullscreen .compose-form,
body.drawing-fullscreen .draw-fieldset {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
body.drawing-fullscreen .canvas-wrap.fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: calc(var(--fs-trackpad-h) + var(--fs-quickbar-h) + var(--fs-direct-bar-h));
  z-index: 9000;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  background: var(--ink-soft);  /* deep camp brown — earth tone, clearly not canvas */
  display: flex;
  align-items: flex-end;  /* canvas hugs the bottom so it sits flush with the trackpad */
  justify-content: center;
}
body.drawing-fullscreen .canvas-wrap.fullscreen #inkling-canvas {
  max-width: 100vw;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 0;
}
body.drawing-fullscreen .canvas-wrap.fullscreen .fullscreen-done {
  display: block;
}

/* toolbar pinned to the bottom in fullscreen mode. Height is auto-derived
   from content (capped) so swatches never overflow on wide viewports. */
body.drawing-fullscreen .canvas-tools {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9500;
  background: rgba(26, 26, 26, 0.94);
  padding: 0.5rem 0.6rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.4);
  max-height: 35vh;
  overflow-y: auto;
}
body.drawing-fullscreen .color-grid {
  gap: 0.2rem;
  /* center the swatch grid so capped swatches don't stretch */
  justify-content: center;
}
body.drawing-fullscreen .swatch {
  border-width: 1px;
  box-shadow: none;
  max-width: 30px;     /* cap so swatches don't expand huge on wide viewports */
  max-height: 30px;
  margin: 0 auto;      /* center within grid cell */
}
body.drawing-fullscreen .swatch.active {
  outline-width: 2px;
  outline-offset: 1px;
}
body.drawing-fullscreen .tool-row {
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
}
body.drawing-fullscreen .tool-btn,
body.drawing-fullscreen .size-btn {
  font-size: 0.78rem;
  padding: 0 0.55rem;
  height: 1.85rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
body.drawing-fullscreen .size-btn {
  width: 1.85rem;
  padding: 0;
}
body.drawing-fullscreen .tool-btn-fullscreen {
  display: none; /* already fullscreen, "done" pill handles exit */
}
/* (canvas-wrap bottom is now driven by --fs-trackpad-h above; the toolbar
   is in the slide-in drawer rather than pinned bottom, so no toolbar
   reservation is needed in fullscreen.) */

.canvas-tools {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.85rem 0 1rem;
}
.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.tool-group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* basic / advanced mode pill — lives at the top of the drawer.
   In .mode-basic, anything tagged .adv-only is hidden so kids see a
   simpler control panel. */
.mode-toggle {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: rgba(74, 52, 36, 0.08);
  border-radius: 999px;
  align-self: stretch;
}
.mode-toggle .mode-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.12s, color 0.12s;
}
.mode-toggle .mode-btn:hover { color: var(--ink); }
.mode-toggle .mode-btn.active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: var(--shadow-card);
}
.canvas-tools.mode-basic .adv-only { display: none !important; }

/* icon / text swap on a tool-btn that has both. Default = text shown,
   icon hidden. Basic mode flips it. */
.btn-icon {
  display: none;
  width: 1.65rem;
  height: 1.65rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.canvas-tools.mode-basic .tool-btn .btn-text { display: none; }
.canvas-tools.mode-basic .tool-btn .btn-icon { display: inline-block; }

/* basic mode: bigger uniform-height controls so they're easy for a kid
   to tap. Icon buttons + brush sizes are square; text buttons (clear,
   help, fullscreen) keep natural width but match the height. */
.canvas-tools.mode-basic .tool-row { gap: 1rem; }
.canvas-tools.mode-basic .tool-group { gap: 0.55rem; }
.canvas-tools.mode-basic .tool-btn,
.canvas-tools.mode-basic .size-btn {
  height: 2.9rem;
  font-size: 0.95rem;
}
.canvas-tools.mode-basic .tool-btn:has(.btn-icon),
.canvas-tools.mode-basic .size-btn {
  width: 2.9rem;
  min-width: 2.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
}
@media (max-width: 600px) {
  .color-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

.swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  font-size: 0;
  box-shadow: var(--shadow-card);
  transition: transform 0.08s;
}
.swatch:hover { transform: scale(1.06); }
.swatch.active { outline: 3px solid var(--accent); outline-offset: 2px; transform: scale(1.08); z-index: 1; }
.tool-btn-erase {
  background: #fdf8ec; color: var(--ink);
}
.tool-btn-erase.active {
  background: var(--accent);
  color: white;
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
.tool-btn-fullscreen {
  background: var(--paper-2);
}

.size-btn {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--ink-soft);
  background: #fdf8ec;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: var(--shadow-card);
}
.size-btn.active { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 2px; }
.size-btn .dot { display: inline-block; background: var(--ink); border-radius: 50%; }
.dot-2  { width: 4px;  height: 4px; }
.dot-6  { width: 9px;  height: 9px; }
.dot-14 { width: 16px; height: 16px; }
.dot-30 { width: 26px; height: 26px; }

.tool-btn {
  height: 2.1rem;
  padding: 0 0.95rem;
  border: 1px solid var(--ink-soft);
  background: #fdf8ec;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.tool-btn:hover { background: var(--ink); color: var(--paper); }
.tool-btn-mode.active,
.tool-btn-opacity.active {
  background: var(--accent);
  color: white;
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
.tool-btn-opacity { font-size: 0.78rem; padding: 0 0.7rem; }

/* indirect-input pen cursor (touch only). Sits inside .canvas-wrap absolutely. */
.pen-cursor {
  position: absolute;
  pointer-events: none;
  border: 2px solid var(--accent-deep);
  background: rgba(168, 97, 42, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(255, 250, 240, 0.7);
  z-index: 5;
}

/* trackpad — left zone drags pen cursor, right zone is the INK target */
.trackpad {
  position: relative;
  height: 154px;
  margin: 0.5rem 0 0;
  border: 1px solid var(--ink-soft);
  border-radius: 12px;
  background: var(--paper);
  display: flex;
  gap: 6px;
  padding: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: var(--shadow-card);
}
.trackpad.hidden { display: none; }
.trackpad.left-handed { flex-direction: row-reverse; }
.trackpad-cursor {
  flex: 1;
  border: 1px dashed var(--ink-soft);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8px 8px, rgba(74, 52, 36, 0.18) 1.5px, transparent 1.6px) 0 0 / 16px 16px,
    var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.trackpad-hint {
  pointer-events: none;
  color: var(--ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--sans-info);
  background: rgba(243, 231, 205, 0.7);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.trackpad-ink {
  width: 85px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--sans-info);
  padding: 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 -2px 0 rgba(140, 74, 28, 0.35);
}
.trackpad-ink.active {
  background: var(--accent);
  color: #fffaf0;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.22);
}
body.drawing-fullscreen .trackpad {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--fs-quickbar-h) + var(--fs-direct-bar-h));
  height: var(--fs-trackpad-h);
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--ink-soft);
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 9100;
  background: var(--paper);  /* distinct from the warm-tan bar above */
}
body.drawing-fullscreen .trackpad-ink {
  width: 96px;
  font-size: 1rem;
}

/* fullscreen quick-access bar — recents + main tools + undo, sits between
   the canvas and the trackpad so common actions don't need the drawer. */
.fs-quick-bar { display: none; }
body.drawing-fullscreen .fs-quick-bar {
  display: flex;
  position: fixed;
  left: 0; right: 0;
  bottom: var(--fs-direct-bar-h);
  height: var(--fs-quickbar-h);
  z-index: 9100;
  background: var(--paper-2);
  border-top: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  align-items: center;
  justify-content: space-between;
  padding: 0 0.65rem;
  padding-left: max(0.65rem, env(safe-area-inset-left));
  padding-right: max(0.65rem, env(safe-area-inset-right));
  gap: 0.65rem;
}
body.drawing-fullscreen .fs-recent {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}
body.drawing-fullscreen .fs-recent:empty::before {
  content: "↑ pick a color";
  color: var(--ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.swatch-recent {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  font-size: 0;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}
.swatch-recent.active {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
body.drawing-fullscreen .fs-quick-tools {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
body.drawing-fullscreen .fs-quick-tools .tool-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.drawing-fullscreen .fs-quick-tools .btn-icon {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
}

/* if user has hidden the trackpad, canvas extends down to just above quick-bar */
body.drawing-fullscreen:has(.trackpad.hidden) .canvas-wrap.fullscreen {
  bottom: calc(var(--fs-quickbar-h) + var(--fs-direct-bar-h));
}

/* fullscreen direct-draw toggle bar — pinned below the quick-bar so the
   touch-to-draw mode is one tap away without opening the drawer. */
.fs-direct-bar { display: none; }
body.drawing-fullscreen .fs-direct-bar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--fs-direct-bar-h);
  z-index: 9100;
  background: var(--paper-2);
  border-top: 1px solid var(--ink-soft);
  align-items: center;
  justify-content: center;
  padding: 0 0.65rem;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
body.drawing-fullscreen .fs-direct-bar .tool-btn {
  height: 32px;
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

/* inkling wordmark in the camp-brown dead space above the canvas in
   fullscreen. Positioned absolutely inside canvas-wrap so it sits in
   the empty area without affecting the canvas's flex placement. */
.fs-wordmark { display: none; }
body.drawing-fullscreen .fs-wordmark {
  display: block;
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  color: rgba(255, 250, 240, 0.62);
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* in-page help modal — used on /compose/ + /demo/draw/. Avoids navigating
   away from the canvas (lossy in PWA / standalone home-screen mode). */
.help-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 26, 26, 0.45);
  z-index: 9800;
}
.help-modal {
  position: fixed;
  top: max(2vh, env(safe-area-inset-top));
  bottom: max(2vh, env(safe-area-inset-bottom));
  left: 4vw; right: 4vw;
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  z-index: 9810;
  overflow-y: auto;
  padding: 1.6rem 1.4rem 2.5rem;
}
.help-modal-close {
  position: absolute;
  top: 0.4rem; right: 0.7rem;
  background: none; border: none;
  font-size: 2rem; cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
  padding: 0.2rem 0.5rem;
}
.help-modal-close:hover { color: var(--ink); }

/* tools drawer — slides in from right, replaces the bottom-toolbar layout
   on /demo/draw/. Compose still uses the bottom toolbar via canvas.js. */
.tools-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9750;
  background: var(--accent);
  color: #fffaf0;
  border: 1px solid var(--accent-deep);
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 0.85rem 0.45rem;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--sans-info);
  box-shadow: -2px 2px 10px rgba(74, 52, 36, 0.22);
  transition: right 0.25s ease;
}
.tools-toggle.open { right: min(320px, 85vw); }

/* fullscreen: relocate the tools tab to the top dead-space (top-left), and
   reorient it from vertical-edge tab to a horizontal pill so it reads
   left-to-right. Stays put when the drawer opens. */
body.drawing-fullscreen .tools-toggle {
  top: 0.85rem;
  left: 0.85rem;
  right: auto;
  transform: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  border-radius: 999px;
  border-right: 1px solid var(--accent-deep);
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  box-shadow: var(--shadow-soft);
  transition: none;
}
body.drawing-fullscreen .tools-toggle.open {
  right: auto;
  left: 0.85rem;
}

.tools-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9740;
}
.tools-backdrop.open { opacity: 1; pointer-events: auto; }

.tools-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--paper-2);
  border-left: 1px solid var(--ink-soft);
  box-shadow: -4px 0 20px rgba(74, 52, 36, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 9745;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.tools-drawer.open { transform: translateX(0); }

/* tighten color grid inside the narrow drawer */
.tools-drawer .color-grid {
  grid-template-columns: repeat(6, 1fr);
}

/* drawer overrides for canvas-tools — kill margins so it fills the drawer */
.tools-drawer .canvas-tools {
  margin: 0;
}

/* When canvas-tools lives in the drawer, OVERRIDE the existing
   fullscreen-bottom-toolbar positioning so the drawer behaves the same
   in fullscreen as outside it. */
body.drawing-fullscreen .tools-drawer .canvas-tools {
  position: static;
  background: transparent;
  padding: 0;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
body.drawing-fullscreen .tools-drawer .swatch {
  max-width: none;
  max-height: none;
}
body.drawing-fullscreen .tools-drawer .tool-btn,
body.drawing-fullscreen .tools-drawer .size-btn {
  font-size: inherit;
  padding: 0 0.95rem;
  height: 2.1rem;
  background: #fdf8ec;
  color: var(--ink);
}
body.drawing-fullscreen .tools-drawer .size-btn {
  width: 2.5rem;
  padding: 0;
}
body.drawing-fullscreen .tools-drawer .tool-btn-fullscreen {
  display: inline-block;
}

/* wide screens: dock the tools as a persistent rail just right of the
   centred 720px canvas column, instead of a slide-in tab pinned to the far
   viewport edge. The toggle tab and the modal backdrop are dropped, so the
   rail stays open and you can switch tools without reopening it each time.
   Fullscreen keeps its own slide-in drawer, so this is scoped to
   non-fullscreen. */
@media (min-width: 1366px) {
  body:not(.drawing-fullscreen) .tools-toggle,
  body:not(.drawing-fullscreen) .tools-backdrop { display: none; }
  body:not(.drawing-fullscreen) .tools-drawer {
    transform: none;
    left: calc(50% + 376px);   /* 360px (half the column) + 16px gap */
    right: auto;
    top: 1.5rem;
    bottom: auto;
    width: 280px;
    max-height: calc(100vh - 3rem);
    border: 1px solid var(--ink-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
  }
}

/* thread view */
.status-banner {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--ink-soft);
  background: rgba(168, 124, 76, 0.08);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow-card);
}
.status-banner p { margin: 0.3rem 0; }
.banner-active { border-left-color: var(--accent); background: var(--accent-soft); }
.banner-waiting { border-left-color: var(--waiting); background: rgba(155, 126, 94, 0.10); }

/* gallery */
.gallery {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.gallery-tile { margin: 0; }
.gallery-tile a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  background: #fffdf6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s, box-shadow 0.15s;
}
.gallery-tile a:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); text-decoration: none; }
.tile-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper);
}
.tile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-pending a { border-style: dashed; border-color: var(--accent); }

.tile-active a {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}
.tile-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.tile-meta {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: rgba(243, 231, 205, 0.5);
  border-top: 1px solid var(--rule);
}
.tile-num { font-weight: 700; color: var(--ink); }

/* turn detail */
.piece-detail { margin: 1rem 0 1.5rem; max-width: 100%; }
.turn-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}
.turn-nav .btn { min-width: 5rem; text-align: center; }

.turn-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.turn-num { font-weight: 700; color: var(--ink); }
.turn-time { font-variant-numeric: tabular-nums; }

.turn-title { margin: 1rem 0 0.5rem; font-size: 1.1rem; }
.turn-title strong { font-family: var(--serif); font-size: 1.25rem; }
.turn-title .label { color: var(--ink-soft); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; margin-right: 0.5rem; font-family: var(--sans); }
.muted { color: var(--ink-soft); }

.turn-guess {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}
.turn-guess .label { color: var(--ink-soft); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; margin: 0 0 0.25rem; }
.guess-text { margin: 0.25rem 0 0.5rem; white-space: pre-wrap; font-size: 1.05rem; }
.guess-img {
  max-width: 220px;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: block;
  margin: 0.5rem 0;
  box-shadow: var(--shadow-card);
}