:root {
  /* the whole piece lives in one exact gray; never let a dark browser theme,
     Chrome's Auto Dark Theme, or the OS recolour it. "only light" opts out. */
  color-scheme: only light;
  --bg: #6f6f6f;        /* page: a quiet gray */
  --surface: #808080;   /* canvas: a true mid-gray (~50%) — black & white read equally */
  --ink: #161616;       /* near-black for text & affordances */
  --faint: rgba(0,0,0,0.18);
  --faint-2: rgba(0,0,0,0.34);
  --pad: max(env(safe-area-inset-bottom), 14px);
  /* the one deliberate break from the monochrome: a muted oxblood, reserved
     strictly for the danger zone — severing the line. a functional warning,
     not decoration, so it earns its colour. */
  --danger: #8a2f2f;
}

/* Windows High Contrast / forced-colors would swap our grays for system colours —
   keep the monochrome atmosphere intact (the exact gray IS the medium here). */
@media (forced-colors: active) {
  html, body, .stage, canvas, #wallScreen, .note {
    forced-color-adjust: none;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  touch-action: manipulation;
}

/* On a wide screen (tablet/desktop) the app lives in a centred phone-sized
   frame: html paints the gray behind it, body becomes the phone. transform
   makes body the containing block for the fixed corner controls, so they hug
   the canvas instead of getting lost in the far viewport corners. Phones
   (< 540px) are untouched — the original full-screen layout. */
@media (min-width: 540px) {
  html {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body {
    width: 460px;
    height: min(100dvh, 932px);
    min-height: 0;
    position: relative;
    transform: translateZ(0);
  }
  .stage {
    width: min(430px, 92dvh);
    height: min(430px, 92dvh);
  }
}

.hidden { display: none !important; }

/* ---------- screen transitions (gentle, film-like) ---------- */
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#login:not(.hidden),
#setup:not(.hidden),
#galleryScreen:not(.hidden),
#wallScreen:not(.hidden),
#profileScreen:not(.hidden),
#detail:not(.hidden) { animation: screenIn 0.5s ease; }

#canvasScreen:not(.hidden) { animation: fadeIn 0.6s ease; } /* keep the canvas steady, just fade */

/* fade overlays out on back-navigation */
#galleryScreen, #wallScreen, #profileScreen, #detail { transition: opacity 0.38s ease; }
#galleryScreen.leaving, #wallScreen.leaving, #profileScreen.leaving, #detail.leaving { opacity: 0; pointer-events: none; }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ---------- intro ---------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 1.1s ease;
}
#intro.fade { opacity: 0; pointer-events: none; }
#intro .lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
#intro span {
  font-size: clamp(19px, 5vw, 25px);
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
/* each line fades in, one after another */
#intro.play span { opacity: 1; transform: none; }
#intro.play .lines span:nth-child(1) { transition-delay: 0.15s; }
#intro.play .lines span:nth-child(2) { transition-delay: 1.05s; }
#intro.play .lines span:nth-child(3) { transition-delay: 1.95s; }

/* ---------- wordless first-open demo ---------- */
#tutorial {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.9s ease;
}
#tutorial.fade { opacity: 0; pointer-events: none; }
#tutorialCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 18px 40px -28px rgba(0,0,0,0.30);
}

/* ---------- generic screens ---------- */
.screen {
  width: 100%;
  max-width: 620px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ---------- setup ---------- */
.swatches {
  display: flex;
  gap: 18px;
}
.swatch {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1px solid rgba(0,0,0,0.25);
  outline-offset: -1px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.swatch[data-color="black"] { background: #000; }
.swatch[data-color="white"] { background: #fff; }
.swatch.selected {
  border-color: var(--ink);
  transform: scale(1.06);
}
.primary {
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid #111;
  background: #111;
  color: #fff;
  letter-spacing: 0.02em;
}
.linkrow {
  width: 100%;
  display: flex;
  gap: 8px;
}
.linkrow input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--faint-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.ghost {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--faint-2);
  background: var(--surface);
}
.hint {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.6;
  min-height: 16px;
}

/* ---------- landing (the public face: the story + the feeling) ---------- */
#landing {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* keep the surface clean; the chevron hints the scroll */
}
#landing::-webkit-scrollbar { width: 0; height: 0; }
#landing:not(.hidden) { animation: fadeIn 0.6s ease; }

.lp-hero {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 13px;
}
#lpStroke {
  position: static;          /* override the global canvas{position:absolute;...} */
  inset: auto;
  background: transparent;
  box-shadow: none;
  width: min(56vw, 38dvh, 220px);
  height: min(56vw, 38dvh, 220px);
  margin-bottom: 4px;
}
.lp-wordmark {
  margin: 0;
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.lp-tagline {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.66;
}
.lp-begin {
  margin-top: 18px;
  padding: 11px 34px;
  border: 1px solid rgba(0,0,0,0.32);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.lp-begin:active { transform: scale(0.97); }
.lp-scroll {
  position: absolute;
  bottom: calc(16px + var(--pad));
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  opacity: 0.45;
  animation: lpBob 2.2s ease-in-out infinite;
}
.lp-scroll svg { width: 28px; height: 28px; display: block; }
@keyframes lpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.lp-beat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 13vh 30px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.lp-beat.in { opacity: 1; transform: none; }
.lp-beat p { margin: 0; font-size: clamp(18px, 5.4vw, 21px); line-height: 1.55; letter-spacing: 0.01em; color: var(--ink); }
.lp-beat p.dim { font-size: clamp(14px, 4.2vw, 16px); line-height: 1.6; opacity: 0.6; }

.lp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 24px calc(16vh + var(--pad));
}

/* ---------- login (quiet, atmospheric) ---------- */
#login { gap: 16px; }
#login .login-line {           /* a thin line — the motif */
  width: 56px;
  height: 1.5px;
  background: var(--ink);
  opacity: 0.45;
  margin-bottom: 10px;
}
.bare {                        /* underline input, centered, no box */
  width: min(78vw, 300px);
  padding: 10px 4px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.03em;
  outline: none;
  transition: border-color 0.3s ease;
}
.bare:focus { border-bottom-color: rgba(0,0,0,0.55); }
.bare::placeholder { color: rgba(0,0,0,0.38); }
.textbtn {                     /* quiet text button */
  background: none;
  border: none;
  color: var(--ink);
  opacity: 0.7;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.textbtn:active { opacity: 1; }

/* ---------- canvas screen ---------- */
#canvasScreen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage {
  position: relative;
  width: min(92vw, 92dvh, 600px);
  height: min(92vw, 92dvh, 600px);
}
canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 18px 40px -28px rgba(0,0,0,0.30);
  touch-action: none;
}
#drawCanvas {
  background: var(--surface);
  z-index: 5;
  transition: opacity 0.45s ease;
}

/* corner affordances — tiny, quiet */
.corner {
  position: fixed;
  z-index: 10;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.corner:active { opacity: 1; }
#galleryBtn { top: 16px; left: 16px; }
#sealBtn { top: 16px; right: 16px; }
.corner svg { width: 22px; height: 22px; }

#sealBtn.proposed svg { stroke: var(--ink); }
#sealBtn.proposed { opacity: 0.95; }
/* partner proposed sealing — your turn to confirm: darker + a gentle pulse to invite it */
#sealBtn.pending svg { stroke: var(--ink); }
#sealBtn.pending { opacity: 1; animation: sealPulse 1.7s ease-in-out infinite; }
@keyframes sealPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.13); }
}

/* the one daily mark button */
#drawBtn {
  position: fixed;
  z-index: 10;
  bottom: calc(20px + var(--pad));
  left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
}
#drawBtn:active { transform: translateX(-50%) scale(0.92); }
#drawBtn.gone { opacity: 0; transform: translateX(-50%) scale(0.4); pointer-events: none; }

/* replay their last mark — sits in the bottom band, left of the centred mark button.
   icon stroke is tinted to the partner's colour by JS, so it reads as "their" hand */
#replayBtn {
  position: fixed;
  z-index: 10;
  bottom: calc(22px + var(--pad));
  left: calc(50% - 86px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5;                 /* quiet, like the corner icons */
  transition: opacity 0.25s ease, transform 0.2s ease;
}
#replayBtn:active { opacity: 1; transform: scale(0.9); }
#replayBtn svg { width: 27px; height: 27px; }

/* a brush stroke that quietly paints itself on the dab, on a slow loop — so the
   button's purpose (leave one stroke) reads without any instructions. The stroke
   colour is set by JS to the opposite of your dab, so it always shows. */
#drawBtn svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#drawBtn .brush {
  stroke: #fff; /* JS overrides with the contrasting ink */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: brushPaint 3.4s ease-in-out infinite;
}
@keyframes brushPaint {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  12%  { opacity: 0.92; }
  45%  { stroke-dashoffset: 0; opacity: 0.92; }
  64%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #drawBtn .brush { animation: none; opacity: 0.9; stroke-dashoffset: 0; }
}

/* after you've left today's mark: a quiet ring that fills over 24h (no numbers, no pressure).
   tap it to glimpse the time left. */
#markWait {
  position: fixed;
  z-index: 10;
  bottom: calc(20px + var(--pad));
  left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  border: none;
  background: none;
  padding: 0;
  opacity: 0.9;
}
#markWait svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
#markWait .track { fill: none; stroke: rgba(0,0,0,0.16); stroke-width: 3; }
#markWait .arc {
  fill: none;
  stroke: var(--ink);     /* set to the member's colour by JS */
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
#markWait .spent { fill: var(--ink); opacity: 0.4; } /* your mark, spent (colour set by JS) */
#markWaitTime {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#markWait.show-time #markWaitTime { opacity: 0.65; }

/* gallery heading */
#galleryTitle, #wallTitle, #profileTitle {
  margin: 0 0 26px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink);
  opacity: 0.55;
}

/* share hint when partner not yet joined — sits up top, clear of the mark button */
/* canvas invite button (creator, before partner joins) — quiet, top centre */
#shareHint {
  position: fixed;
  z-index: 10;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
#shareHint .textbtn {
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 999px;
  padding: 6px 16px;
  opacity: 0.8;
  background: rgba(255,255,255,0.06);
}

/* setup invite block (after "begin a canvas") */
.invite-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.invite-url {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.4;
  max-width: min(80vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
/* a first message to the partner, written on the invite screen */
#welcomeInput {
  width: min(80vw, 320px);
  box-sizing: border-box;
  resize: none;
  padding: 11px 13px;
  margin-bottom: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.01em;
  outline: none;
}
#welcomeInput::placeholder { color: rgba(0,0,0,0.38); }

/* welcome overlay — the partner reads the creator's first words on the way in */
#welcome {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--bg);
}
#welcome:not(.hidden) { animation: screenIn 0.6s ease; }
.welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 420px;
}
.welcome-from { font-size: 12.5px; letter-spacing: 0.1em; color: var(--faint-2); }
.welcome-text {
  font-size: clamp(18px, 5.4vw, 22px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
#welcomeEnter {
  margin-top: 18px;
  padding: 10px 30px;
  border: 1px solid rgba(0,0,0,0.32);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 0.2s ease;
}
#welcomeEnter:active { transform: scale(0.97); }
#welcomeEnter.gone { opacity: 0; transform: scale(0.6); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; }
/* the line-between-us beat after "yes" */
#welcomeLine {
  position: static;          /* override the global canvas{position:absolute} */
  inset: auto;
  background: transparent;
  box-shadow: none;
  width: min(74vw, 300px);
  height: 30px;
  margin: 4px 0 2px;
}

/* setup: the "make it an ask" toggle under the message field */
.ask-toggle {
  background: none;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--ink);
  opacity: 0.6;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.ask-toggle.on { opacity: 1; border-color: var(--ink); }

/* dev-only "next day" helper (shown only with ?dev=1) */
#devNext {
  position: fixed;
  z-index: 11;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #161616;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.25);
  padding: 5px 12px;
  border-radius: 999px;
  opacity: 0.85;
}
#devNext:active { opacity: 1; }

/* seal-name input — a soft monochrome scrim; the just-sealed tablo blurs through behind it */
#sealName {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;        /* anchor near the top so the mobile keyboard
                                         never covers the input or the seal button */
  padding-top: 22vh;
  padding-top: 22dvh;
  gap: 18px;
  background: rgba(120,120,120,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#sealName:not(.hidden) { animation: sealFade 0.6s ease both; } /* gentle fade-in each time */
@keyframes sealFade { from { opacity: 0; } to { opacity: 1; } }
#sealName input {
  width: min(74vw, 360px);
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.28);
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  letter-spacing: 0.01em;
  text-align: center;
  outline: none;
}
#sealName input::placeholder { color: rgba(0,0,0,0.4); }

/* the just-sealed tablo: a brief framed reveal, then it drifts into the gallery */
#sealed {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120,120,120,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.55s ease, backdrop-filter 0.55s ease, -webkit-backdrop-filter 0.55s ease;
}
#sealed:not(.hidden) { animation: sealFade 0.6s ease both; }
#sealed.filing { background: rgba(120,120,120,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
#sealedCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  will-change: transform, opacity;
}
#sealedCanvas {
  position: static;          /* override the global canvas{position:absolute;inset:0} */
  inset: auto;
  width: min(82vw, 66dvh, 400px);
  height: min(82vw, 66dvh, 400px);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 14px 40px -18px rgba(0,0,0,0.55); /* lifts the framed tablo as an object */
}
#sealedName {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.85;
  text-align: center;
}
/* the gallery icon gives a small pulse as the tablo lands in it */
#galleryBtn.landed { animation: galleryLand 0.72s ease; }
@keyframes galleryLand {
  0% { transform: scale(1); opacity: 0.5; }
  38% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 0.5; }
}
/* a clear, tappable confirm — without it the only way to seal was the Enter key,
   which isn't discoverable on mobile (you'd type a name and be stuck) */
#sealNameBtn {
  margin-top: 2px;
  padding: 9px 26px;
  border: 1px solid rgba(0,0,0,0.32);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.1em;
  opacity: 0.9;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#sealNameBtn:active { opacity: 1; transform: scale(0.96); }

/* seal warning — a short, clear heads-up before the irreversible seal */
#sealConfirm {
  position: fixed;
  inset: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(120,120,120,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#sealConfirm:not(.hidden) { animation: sealFade 0.5s ease both; }
.seal-confirm-card {
  width: min(90%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.sc-title { font-size: 18px; letter-spacing: 0.02em; color: var(--ink); }
.sc-text { font-size: 14px; line-height: 1.5; color: var(--ink); opacity: 0.72; }
.sc-actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
#sealConfirmYes {
  padding: 9px 28px;
  border: 1px solid rgba(0,0,0,0.32);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.1em;
  opacity: 0.95;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#sealConfirmYes:active { opacity: 1; transform: scale(0.96); }

/* seal-waiting whisper (you proposed, waiting for partner) */
#sealWait {
  position: fixed;
  z-index: 9;
  bottom: calc(76px + var(--pad));
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--faint-2);
}

/* ---------- gallery ---------- */
#galleryScreen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 30;
  overflow-y: auto;
  padding: 64px 20px 40px;
}
#galleryClose { position: fixed; top: 16px; left: 16px; z-index: 31; opacity: 0.6; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.tile { display: flex; flex-direction: column; gap: 8px; }
.tile canvas {
  position: static;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
}
.tile .name { font-size: 13px; color: var(--ink); opacity: 0.8; letter-spacing: 0.01em; }
.empty { text-align: center; color: var(--faint-2); margin-top: 30vh; }

/* ---------- the wall: a shared notebook of short notes ---------- */
#wordsBtn { top: 16px; left: 54px; }   /* the 3-line icon opens the wall */

#wallScreen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 30;
  overflow-y: auto;
  padding: 56px 22px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#wallClose { position: fixed; top: 16px; left: 16px; z-index: 31; opacity: 0.6; }

/* compose: write a short note (your turn) */
#wallAdd {
  width: min(92%, 440px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 30px;
}
#wallInput {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  outline: none;
}
#wallInput::placeholder { color: rgba(0,0,0,0.4); }
#wallPost {
  align-self: center;
  padding: 9px 26px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.08em;
  opacity: 0.9;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#wallPost:active { opacity: 1; transform: scale(0.97); }
/* a quiet wait line when your note window hasn't reopened */
#wallWait {
  margin-bottom: 30px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--faint-2);
}

/* the pinned notes — newest first, each a small tilted card in the writer's colour */
.wall-feed {
  width: min(94%, 460px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.note {
  --tilt: 0deg;
  align-self: center;
  width: 86%;
  padding: 13px 16px;
  border-radius: 4px;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,0.5);
  transform: rotate(var(--tilt));     /* a small pinned tilt; colour + bg set by JS */
  animation: notePin 0.4s ease both;
}
.note:nth-child(even) { align-self: flex-end; }
.note:nth-child(odd)  { align-self: flex-start; }
@keyframes notePin { from { opacity: 0; transform: translateY(-8px) rotate(var(--tilt)); } }

/* ---------- profile: the two of you + a quiet tally ---------- */
#profileBtn { top: 16px; right: 54px; }

#profileScreen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 30;
  overflow-y: auto;
  padding: 64px 28px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#profileClose { position: fixed; top: 16px; left: 16px; z-index: 31; opacity: 0.6; }

.who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin: 8vh 0 44px;
}
.who-row { display: flex; align-items: center; gap: 11px; }
.who-row .sw {
  width: 13px; height: 13px;
  border-radius: 50%;
  outline: 1px solid rgba(0,0,0,0.28);
  outline-offset: -1px;
  flex: none;
}
.who-row .eml { font-size: 15px; color: var(--ink); letter-spacing: 0.01em; }
.who-row .eml.faint { color: var(--faint-2); }
.since {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--faint-2);
  letter-spacing: 0.05em;
}

.tally { display: flex; gap: 34px; align-items: baseline; }
.tally-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tally-item b { font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: 0.01em; }
.tally-item span {
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--faint-2);
}

/* ---------- danger zone: sever the line ---------- */
/* sits at the very bottom of the profile, set apart by a hairline and the one
   muted-red accent in the whole app — so it reads, unmistakably, as a way out. */
.danger-zone {
  margin-top: auto;
  width: min(90%, 360px);
  padding-top: 26px;
  border-top: 1px solid rgba(138,47,47,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.dz-label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--danger);
  opacity: 0.8;
}
.dz-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.6;
}
.dz-btn {
  margin-top: 4px;
  padding: 9px 26px;
  border: 1px solid rgba(138,47,47,0.55);
  border-radius: 999px;
  background: rgba(138,47,47,0.06);
  color: var(--danger);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.dz-btn:hover { background: rgba(138,47,47,0.14); border-color: var(--danger); }
.dz-btn:active { transform: scale(0.97); background: rgba(138,47,47,0.2); }
/* the calm variant — "never mind" / withdraw: a safe, un-alarming way back out */
.dz-btn.calm {
  border-color: rgba(0,0,0,0.28);
  background: transparent;
  color: var(--ink);
  opacity: 0.7;
}
.dz-btn.calm:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.4); opacity: 0.9; }

/* the confirm overlay mirrors the seal warning, but in the danger accent */
#severConfirm {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(120,120,120,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#severConfirm:not(.hidden) { animation: sealFade 0.5s ease both; }
.sever-card {
  width: min(90%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.sever-card .sc-text b { color: var(--danger); opacity: 0.95; font-weight: 600; }

/* ---------- detail / export ---------- */
#detail {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 56px 20px;
}
#detailClose { position: fixed; top: 16px; left: 16px; z-index: 51; opacity: 0.6; }
#detail canvas {
  position: static;
  width: min(86vw, 86dvh, 560px);
  height: min(86vw, 86dvh, 560px);
}
#detail .name { font-size: 15px; opacity: 0.7; }