:root {
  --ink: #060309;
  --accent: #ff3d81;
  --accent2: #b23bff;
  --accent-rgb: 255, 61, 129;      /* the succubus default; the GND theme overrides it (teal) */
  --accent2-rgb: 178, 59, 255;
  --text: #f2e7f2;
  --panel: rgba(18, 10, 22, .72);
  --panel-border: rgba(var(--accent-rgb), .16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(15px, 0.55vw + 8.5px, 22px); }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100vh;
  font-size: 1rem;
}
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .35) rgba(255, 255, 255, .04); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .55); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }
input::placeholder { color: rgba(242, 231, 242, .28); font-style: italic; }

.glow-top {
  position: fixed; top: -20vh; left: 50%; transform: translateX(-50%);
  width: 70vw; height: 55vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent2-rgb), .12), rgba(var(--accent2-rgb), 0));
}
.glow-bottom {
  position: fixed; bottom: -25vh; left: 50%; transform: translateX(-50%);
  width: 85vw; height: 58vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), 0));
}

.label {
  font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .35em; font-size: .68rem; color: rgba(242, 231, 242, .45);
  padding-left: .35em;
}
.dim { color: rgba(242, 231, 242, .5); }
.wordmark {
  letter-spacing: .18em; padding-left: .18em; color: #fff; font-weight: 400;
  text-shadow: 0 0 24px rgba(var(--accent-rgb), .6), 0 0 70px rgba(var(--accent2-rgb), .45);
}

.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative;
}
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: 3.2rem; }
.auth-head .eyebrow {
  color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
  letter-spacing: .5em; padding-left: .5em;
}
.auth-head h1 { font-size: clamp(3rem, 5.5vw, 4.8rem); line-height: 1; }
.auth-form { display: flex; flex-direction: column; gap: 1.2rem; width: min(28rem, 90vw); }
.fieldgroup { display: flex; flex-direction: column; gap: .5rem; }
.field {
  width: 100%; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px; padding: .9rem 1rem; color: var(--text);
  font-family: Georgia, serif; font-size: 1rem; outline: none;
}
.field:focus { border-color: rgba(var(--accent-rgb), .5); }
textarea.field { resize: vertical; min-height: 4.5rem; }
.btn-enter {
  width: 100%; text-align: center; padding: 1rem 0; border: 1px solid rgba(var(--accent-rgb), .55);
  border-radius: 6px; color: #fff; font-family: system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .4em; text-indent: .4em; font-size: .8rem;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent2-rgb), .10));
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .22); cursor: pointer;
}
.btn-enter:hover { border-color: var(--accent); }
.auth-alt { text-align: center; font-size: .9rem; color: rgba(242, 231, 242, .42); }
.auth-error {
  text-align: center; font-style: italic; font-size: .95rem; color: #ffb3cd;
  border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 6px; padding: .7rem 1rem;
}
.checkrow { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: rgba(242, 231, 242, .7); }
.checkrow input { margin-top: .25rem; accent-color: var(--accent); }
.auth-foot { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; }

.dash {
  position: relative; height: 100vh; display: flex; flex-direction: column;
  width: 100%; overflow: hidden;
}
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 2.5vw .9rem;
}
@media (min-width: 769px) {
  .dash-header { position: relative; }
  .dash-id { position: absolute; left: 50%; transform: translateX(-50%); }
}
.dash-header .wordmark { font-size: 1.4rem; }
.dash-id { display: flex; align-items: center; gap: 1rem; }
.dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #d9b6ff; box-shadow: 0 0 10px rgba(var(--accent2-rgb), .8);
}
.dash-cols { flex: 1; display: flex; justify-content: center; gap: clamp(1.4rem, 2vw, 2.6rem); padding: .5rem 4.5vw 1.8rem; min-height: 0; }
.col-side { width: clamp(19rem, 22vw, 27rem); display: flex; flex-direction: column; gap: 1.2rem; flex-shrink: 0; }
.col-center { flex: 0 0 auto; width: clamp(24rem, 31vw, 42rem); display: flex; flex-direction: column; align-items: center; gap: 1.2rem; min-height: 0; }

.card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .7rem;
  font-size: 1rem;
}
.cardtitle {
  font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .35em; font-size: .68rem; color: var(--accent); padding-left: .35em;
}
.chip {
  display: inline-block; font-family: system-ui, sans-serif; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .2em; padding: .3rem .7rem .3rem .85rem;
  border: 1px solid rgba(var(--accent2-rgb), .45); border-radius: 999px; color: #d9b6ff;
  width: fit-content;
}
.chip.pink { border-color: rgba(var(--accent-rgb), .5); color: #ffb3cd; }
.expand-btn {
  font-family: system-ui, sans-serif; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .25em; color: rgba(242, 231, 242, .35); cursor: pointer;
  background: none; border: none; text-align: left; padding: .3rem 0 0;
}
.expand-btn:hover { color: var(--accent); }
.lock-word {
  font-size: 2.4rem; color: #fff; letter-spacing: .12em;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .55);
}
.feed { display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; }
.timers { display: flex; flex-direction: column; gap: .35rem; margin-top: .2rem; }
.timer-row { display: flex; justify-content: space-between; gap: .6rem; font-size: .85rem; align-items: baseline; }
.timer-label { color: rgba(242,231,242,.8); }
.timer-val { font-variant-numeric: tabular-nums; color: #d9b6ff; }
.timer-val.lapsed { color: #ff6f9c; font-style: italic; }

.portrait {
  position: relative; width: 100%; flex: 1 1 0; min-height: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .25); box-shadow: 0 0 45px rgba(var(--accent2-rgb), .25);
}
.portrait video, .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
/* the girl-next-door still is composed with her face a fifth of the way down: anchor there on every layout, so a
   box shorter than 2:3 gives up the rug and her shoes, never her head (the loop keeps its own anchors) */
.portrait img#her-still { object-position: center 20%; }
.portrait video#her-still { object-fit: cover; object-position: center top !important; height: 120%; }   /* her GND webcam loop (10/5, hands-free 66%): fills the box, no bars; the extra 20% height spills past the bottom so the bottom sixth of the frame is out of view (his: "cropping it in a little so that the bottom 1/6th ... is not visible"; "Bars? DID I ASK YOU TO ADD BARS") */
.portrait .veil {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(6, 3, 9, 0) 62%, rgba(6, 3, 9, .85) 100%);
}
.portrait .presence { z-index: 3; }
.portrait .presence {
  position: absolute; bottom: .8rem; left: 0; right: 0; text-align: center;
  font-family: system-ui, sans-serif; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .35em; text-indent: .35em; color: rgba(242, 231, 242, .8);
}

.chat {
  width: 100%; display: flex; flex-direction: column; gap: .7rem; flex: 1 1 0; min-height: 10rem;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 1.2rem 1.35rem;
}
.chat-log { display: flex; flex-direction: column; gap: .7rem; overflow-y: auto; flex: 1 1 0; min-height: 0; padding-right: .3rem; }
.bubble { white-space: pre-wrap; max-width: 88%; border-radius: 10px; padding: .8rem 1.1rem; font-size: 1rem; line-height: 1.55; }
.bubble.her { align-self: flex-start; background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .22); }
.bubble.user { align-self: flex-end; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); }
.bubble.system { align-self: center; background: none; border: 1px dashed rgba(255, 255, 255, .15); color: rgba(242, 231, 242, .55); font-size: .85rem; }
.bubble audio { display: block; margin-top: .5rem; width: 100%; height: 2rem; }
.bubble-img { display: block; margin-top: .4rem; max-width: 100%; max-height: 16rem; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb),.25); }
.bubble.her.tg { background: rgba(var(--accent2-rgb), .10); border-color: rgba(var(--accent2-rgb), .30); }
.bubble.user.tg { background: rgba(var(--accent2-rgb), .06); border-color: rgba(var(--accent2-rgb), .18); }
/* chat composer: the text field owns a full-width row; a thin toolbar sits under it (icons left, send right),
   so the buttons never squeeze the input (his 10/1: 'keep it clean') */
.chat-input { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.chat-input .field { width: 100%; font-style: italic; }
.chat-tools { display: flex; align-items: center; gap: .25rem; }
.chat-tools .btn-send { margin-left: auto; }
.btn-send {
  padding: .7rem 1.1rem; border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 6px;
  font-family: system-ui, sans-serif; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .3em; text-indent: .3em; color: #fff;
  background: rgba(var(--accent-rgb), .12); cursor: pointer;
}
.chat-foot {
  text-align: center; font-family: system-ui, sans-serif; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 231, 242, .3);
}

@font-face {
  font-family: 'DaemTitle';
  src: url('/static/fonts/caveat_bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'DaemScrawl';
  src: url('/static/fonts/shadows_into_light.woff2') format('woff2');
  font-display: swap;
}

.board-card { flex: 0 0 auto; }
.board-mini {
  position: relative; width: 100%; max-height: 17rem; min-height: 5rem;
  overflow-y: auto; overflow-x: hidden; padding: .4rem .2rem 1rem;
}
.board-empty {
  padding: 1.6rem 0; text-align: center; font-family: system-ui, sans-serif;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .3em;
  color: rgba(242, 231, 242, .25);
}

.slip {
  position: relative; color: #3c1024; cursor: pointer;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, .45));
}
.slip .paper {
  position: relative; padding: .85rem 1rem .9rem; overflow: hidden;
  border-radius: 2px 5px 3px 6px / 5px 2px 6px 3px;
}
.slip .paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('/static/paper_grain.png'); background-size: 130px;
  opacity: .35; mix-blend-mode: multiply;
}
.slip.postit .paper {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 14%),
    linear-gradient(160deg, #ffc9de 0%, #ffb1d0 55%, #ff9cc3 100%);
}
.slip.notebook .paper {
  background:
    linear-gradient(90deg, transparent 0 1.1rem, rgba(214, 60, 60, .5) 1.1rem calc(1.1rem + 1.5px), transparent calc(1.1rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 1.34rem, rgba(var(--accent2-rgb), .22) 1.34rem calc(1.34rem + 1px)),
    linear-gradient(160deg, #ffe3ee 0%, #ffd3e5 100%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 100%, 88% 97%, 79% 100%, 70% 97.5%, 61% 100%, 52% 97%, 43% 100%, 34% 97.5%, 25% 100%, 16% 97%, 8% 100%, 0 97%);
}
.slip .pin {
  position: absolute; top: -.45rem; left: 50%; transform: translateX(-50%);
  width: .85rem; height: .85rem; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 32% 30%, #ff7eb0, #d3186b 65%, #8e0f47);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .5), inset -1px -2px 3px rgba(0, 0, 0, .35);
}
.slip .tape {
  position: absolute; top: -.6rem; left: 50%; width: 3.4rem; height: 1.15rem; z-index: 3;
  transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(180deg, rgba(255, 235, 245, .5), rgba(255, 214, 233, .38));
  border-left: 1px dashed rgba(255, 255, 255, .5); border-right: 1px dashed rgba(255, 255, 255, .5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.slip-title {
  font-family: 'DaemTitle', 'Segoe Script', cursive; font-weight: 700;
  font-size: 1.45rem; line-height: 1.05; color: #47102b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4.6rem;
}
.slip-title .squig { display: block; margin-top: -2px; }
.slip-body {
  font-family: 'DaemScrawl', 'Segoe Script', cursive; font-size: 1.05rem;
  line-height: 1.45; color: #58203a; margin-top: .35rem;
}
.slip-due {
  position: relative; display: inline-block; margin-top: .45rem; padding: .15rem .55rem;
  font-family: 'DaemScrawl', 'Segoe Script', cursive; font-size: .95rem; color: #7c1140;
}
.slip-due svg { position: absolute; inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px); pointer-events: none; }
.slip-note {
  margin-top: .5rem; padding: .35rem .5rem; border-left: 3px solid rgba(179, 38, 107, .55);
  font-family: 'DaemScrawl', 'Segoe Script', cursive; font-size: .95rem;
  color: #7c1140; background: rgba(255, 255, 255, .22); border-radius: 2px;
}
.board-mini .slip .slip-note { display: none; }
.slip-meta {
  margin-top: .5rem; font-family: system-ui, sans-serif; font-size: .58rem;
  text-transform: uppercase; letter-spacing: .22em; color: rgba(71, 16, 43, .55);
}
.stamp {
  position: absolute; top: .55rem; right: .5rem; z-index: 2; pointer-events: none;
  font-family: system-ui, sans-serif; font-weight: 800; font-size: .52rem;
  text-transform: uppercase; letter-spacing: .18em; text-align: center; line-height: 1.25;
  padding: .22rem .4rem; border: 2px solid; border-radius: 3px;
  transform: rotate(7deg); opacity: .85; mix-blend-mode: multiply; max-width: 5.4rem;
}
.stamp.awaiting { color: #8d2a56; border-color: #8d2a56; }
.stamp.submitted { color: #5b3a9e; border-color: #5b3a9e; }
.stamp.verified { color: #4b1f9e; border-color: #4b1f9e; font-size: .62rem; }
.stamp.failed { color: #b3123a; border-color: #b3123a; font-size: .62rem; }
.stamp.done { color: #365a3e; border-color: #365a3e; }
.slip.stamped { opacity: .62; filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, .35)) saturate(.7); }

.board-mini .slip { position: absolute; left: 3%; width: 93%; }
.board-mini .slip .slip-body, .board-mini .slip .slip-meta { display: none; }
.board-mini .slip .slip-due { display: none; }
.board-mini .slip .paper { padding: .55rem .85rem .6rem; }

.boardfull-wrap {
  width: min(74rem, 95vw); height: 86vh; display: flex; flex-direction: column; gap: .6rem;
}
.boardfull {
  position: relative; flex: 1; border-radius: 10px; overflow: hidden;
  background: rgba(18, 10, 22, .94); border: 1px solid rgba(var(--accent-rgb), .3);
  box-shadow: 0 0 60px rgba(var(--accent2-rgb), .3);
}
.boardfull .slip { position: absolute; width: 15.5rem; touch-action: none; }
.boardfull .slip.dragging { z-index: 40 !important; filter: drop-shadow(4px 9px 12px rgba(0, 0, 0, .6)); }

.slip-full-wrap { position: relative; width: min(27rem, 88vw); }
.slip-full-wrap .slip { cursor: default; }
.slip-full-wrap .paper { padding: 1.5rem 1.6rem 1.4rem; }
.slip-full-wrap .slip-title { font-size: 2.1rem; white-space: normal; padding-right: 0; }
.slip-full-wrap .slip-body { font-size: 1.3rem; margin-top: .6rem; }
.slip-full-wrap .stamp { font-size: .8rem; top: auto; bottom: 1rem; right: 1rem; transform: rotate(-9deg); max-width: none; }
.proof-box {
  margin-top: .9rem; padding: .8rem; border: 2px dashed rgba(71, 16, 43, .45); border-radius: 6px;
  display: flex; flex-direction: column; gap: .5rem;
}
.proof-box input[type=file] { font-family: system-ui, sans-serif; font-size: .8rem; color: #58203a; }
.proof-box .btn-send { align-self: flex-start; background: rgba(71, 16, 43, .85); border-color: rgba(71, 16, 43, .9); }
.slip-close {
  position: absolute; top: -.9rem; right: -.9rem; z-index: 5;
  width: 2rem; height: 2rem; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(6, 3, 9, .9); color: #f2e7f2; font-size: 1rem;
}

.card.emergency {
  margin-top: auto; align-self: center; width: fit-content; aspect-ratio: 1 / 1;
  justify-content: center; align-items: center; gap: .45rem; padding: .7rem 1rem;
}
.card.emergency .cardtitle { color: rgba(255, 255, 255, .7); text-align: center; font-size: .55rem; }
.btn-release {
  width: 3.4rem; height: 3.4rem; border-radius: 6px; background: var(--accent);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-release svg { width: 1.7rem; height: 1.7rem; }
.btn-release:active { filter: brightness(.85); }

.overlay {
  position: fixed; inset: 0; background: rgba(6, 3, 9, .78);
  backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 20;
}
.overlay.open { display: flex; }
.modal {
  position: relative;
  width: min(60rem, 92vw); max-height: 88vh; overflow-y: auto;
  background: rgba(18, 10, 22, .94); border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 10px; box-shadow: 0 0 60px rgba(var(--accent2-rgb), .3);
  padding: 2rem 2.4rem 2.2rem; display: flex; flex-direction: column; gap: 1.5rem;
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-right: 2.4rem; }
.modal-close { font-family: system-ui, sans-serif; font-size: 1.2rem; color: rgba(242, 231, 242, .45); cursor: pointer; background: none; border: none; padding: .1rem .5rem; }
.modal-close:hover { color: #fff; }

/* window close: a distinct round button pinned to the modal's top-right corner, well clear of any
   in-list delete control -- so "close the window" can never be confused with "delete this item". */
.modal-head .modal-close, .modal > .modal-close {
  position: absolute; top: .8rem; right: .8rem; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 999px;
  font-size: 1.05rem; line-height: 1;
  color: rgba(242, 231, 242, .72);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
}
.modal-head .modal-close:hover, .modal > .modal-close:hover {
  color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3);
}

/* in-list delete (e.g. gear rows): small, muted, turns red -- reads as "remove this row", not "close". */
.row .modal-close {
  align-self: center; padding: .15rem .45rem; font-size: .95rem; border-radius: 6px;
  color: rgba(242, 231, 242, .3);
}
.row .modal-close:hover { color: #ff6b8a; background: rgba(var(--accent-rgb), .12); }
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.stat { display: flex; flex-direction: column; gap: .4rem; }
.statlabel {
  font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .25em; font-size: .62rem; color: rgba(242, 231, 242, .4);
}
.statval { font-size: 1.4rem; color: #fff; }
.bar-track { height: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar-fill {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(var(--accent2-rgb), .7), rgba(var(--accent-rgb), .8) 45%, rgba(var(--accent-rgb), 0) 92%);
}
.rows { display: flex; flex-direction: column; gap: .3rem; }
.row {
  display: flex; justify-content: space-between; font-size: .9rem;
  padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); gap: 1rem;
}
.row:last-child { border-bottom: none; }

.mobile-nav { display: none; }
.portrait-disp {
  display: block; position: absolute; left: 0; right: 0; bottom: 1.7rem; z-index: 3;
  text-align: center; font-family: 'DaemScrawl', cursive; font-size: 1.3rem;
  color: #ffd9ec; text-shadow: 0 1px 8px rgba(0,0,0,.9); pointer-events: none;
}

.profile-wrap { max-width: 46rem; margin: 0 auto; padding-bottom: 4rem; }
.profile-body { padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.profile-form { display: flex; flex-direction: column; gap: 1rem; }
.profile-ok {
  text-align: center; font-style: italic; color: #d9b6ff;
  border: 1px solid rgba(var(--accent2-rgb), .3); border-radius: 6px; padding: .6rem;
}
.profile-sep {
  margin-top: 1.4rem; font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .3em; font-size: .62rem; color: var(--accent);
  border-top: 1px solid rgba(var(--accent-rgb), .16); padding-top: 1rem;
}
.profile-sep.danger { color: #ff6f9c; }
.profile-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ghost-btn {
  background: none; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px;
  color: var(--text); padding: .5rem 1rem; cursor: pointer; font-family: system-ui, sans-serif;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .2em;
}
.ghost-btn.danger { border-color: rgba(var(--accent-rgb), .6); color: #ff6f9c; }
.ghost-btn:hover { border-color: var(--accent); }

/* Tablet: keep columns but let the page breathe (scroll instead of 100vh lock) */
@media (max-width: 1100px) and (min-width: 769px) {
  .dash { height: auto; min-height: 100vh; overflow: visible; }
  .dash-cols { flex-wrap: wrap; }
  .col-side { width: calc(50% - 1.3rem); }
  .col-center { width: 100%; order: -1; }
  .portrait { height: 46vh; }
}

/* Phone: her + chat ARE the screen; cards live behind a bottom menu, full-screen */
@media (max-width: 768px) {
  html { font-size: 17px; }
  .dash { height: 100dvh; overflow: hidden; }
  .dash-header { padding: .8rem 1rem .6rem; }
  .dash-header .wordmark { font-size: 1.15rem; }
  .dash-id .label:first-child { display: none; }
  .dash-cols {
    flex-direction: column; gap: .6rem; padding: .3rem .7rem 0; flex: 1; min-height: 0;
  }
  .col-right { display: none; }                    /* cards reachable via the bottom nav */
  .col-center { order: 1; width: 100%; flex: 0 0 auto; }
  .portrait { flex: 0 0 auto; width: 100%; height: 38dvh; }
  .col-left {                                       /* holds the chat on mobile */
    order: 2; display: flex; flex-direction: column; width: 100%;
    flex: 1 1 auto; min-height: 0; gap: .6rem;
  }
  .col-left .board-card { display: none; }          /* board is a nav card on mobile */
  .portrait-disp {
    display: block; position: absolute; left: 0; right: 0; bottom: 1.55rem; z-index: 3;
    text-align: center; font-family: 'DaemScrawl', cursive; font-size: 1.15rem;
    color: #ffd9ec; text-shadow: 0 1px 8px rgba(0,0,0,.9); pointer-events: none;
  }
  .chat {
    flex: 1 1 auto; height: auto; min-height: 0; padding: .8rem .9rem; gap: .5rem;
  }
  .chat-log { max-height: none; flex: 1 1 auto; }
  .bubble { max-width: 90%; font-size: 1rem; }

  .mobile-nav {
    display: flex; flex: 0 0 auto; justify-content: space-around; align-items: stretch;
    padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    background: rgba(12, 6, 14, .96); border-top: 1px solid rgba(var(--accent-rgb), .2);
  }
  .mnav {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    background: none; border: none; cursor: pointer; padding: .35rem 0;
    font-family: system-ui, sans-serif; font-size: .55rem; text-transform: uppercase;
    letter-spacing: .15em; color: rgba(242, 231, 242, .6);
  }
  .mnav-ic { font-size: 1.2rem; line-height: 1; }
  .mnav-release { color: #ff6f9c; }

  /* full-screen cards on phone */
  .overlay { align-items: stretch; justify-content: stretch; }
  .modal, .boardfull-wrap, .slip-full-wrap {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0;
    overflow-y: auto; padding: 1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  }
  .slip-modal-center { align-items: center; justify-content: center; }
  .slip-full-wrap { height: auto; max-height: 92dvh; width: 92vw; }
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boardfull { min-height: 70dvh; }
  .board-mini { max-height: none; }
}

/* --- her gallery --- */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.gallery-tile { position:relative; aspect-ratio:1; border-radius:.5rem; cursor:pointer;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent2-rgb),.14));
  border:1px solid rgba(var(--accent-rgb),.28); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:.3rem; overflow:hidden;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.gallery-tile .cap { font-size:.66rem; color:rgba(242,231,242,.8); line-height:1.2; pointer-events:none; }
.gallery-tile .lock { position:absolute; top:.25rem; right:.35rem; font-size:.7rem; opacity:.6; }
.gallery-hint { font-size:.7rem; margin-top:.45rem; }
#gallery-viewer { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.96);
  display:none; align-items:center; justify-content:center; -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; touch-action:none; }
#gallery-viewer canvas { max-width:94vw; max-height:88vh; pointer-events:none; }
#gallery-viewer .vlabel { position:absolute; bottom:4vh; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.55); font-size:.8rem; pointer-events:none; }

/* --- initiative fill-bar (magical) --- */
.init-wrap { margin: .1rem 0 .2rem; }
.init-label { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(200,170,255,.6); margin-bottom: .25rem; }
.init-bar { height: 9px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(var(--accent2-rgb),.28); }
.init-fill { height: 100%; border-radius: 6px; min-width: 0;
  background: linear-gradient(90deg, #2a6df0 0%, #6f45f5 50%, #d24bff 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(var(--accent2-rgb),.65), 0 0 4px rgba(60,120,255,.6),
              inset 0 0 6px rgba(255,255,255,.28);
  transition: width .9s cubic-bezier(.4,0,.2,1);
  animation: initShimmer 6s ease-in-out infinite; }
@keyframes initShimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* gallery under the live image: full width, compact (scrolls if she gives him many) */
.gallery-card { width: 100%; }
.col-center .gallery-grid { display: flex; gap: .4rem; overflow-x: auto; overflow-y: hidden;
  max-height: none; padding-bottom: .25rem; }
.col-center .gallery-tile { flex: 0 0 auto; width: 4.4rem; height: 4.4rem; aspect-ratio: auto; }

/* initiative bar overlaid on the image, beneath her mood */
.portrait-init { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .6rem; width: min(68%, 17rem); z-index: 3; pointer-events: none; }
.portrait-init .init-bar { height: 8px; }

/* status card under the live image: content left, emergency release right, ~111px tall */
.col-center > .card { width: 100%; flex: 0 0 auto; height: 6.9rem; overflow: hidden;
  flex-direction: row; align-items: center; gap: .9rem; padding: .7rem 1.1rem .7rem 1.35rem; }
.col-center > .card .status-main { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; gap: .12rem; justify-content: center; }
.col-center > .card .lock-word { font-size: 1.3rem; line-height: 1.12; }
.col-center > .card #lock-elapsed { font-size: .78rem; }
.col-center > .card #lock-term { font-size: .78rem; }
.col-center > .card #timers-list { display: none; }
.col-center > .card .expand-btn { padding-top: .1rem; }
.col-center > .card .status-release { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: .25rem; }
.col-center > .card .status-release .btn-release { width: 3rem; height: 3rem; }
.release-cap { font-size: .5rem; text-transform: uppercase; letter-spacing: .18em;
  color: rgba(255,255,255,.55); }

/* mobile header: keep profile / equipment / leave on-screen */
@media (max-width: 768px) {
  .dash-id { gap: .55rem; flex-wrap: nowrap; }
  .dash-id .label, .dash-id .dot { display: none; }
  .dash-id .expand-btn, .dash-id button { font-size: .6rem; letter-spacing: .12em;
    padding: .2rem 0; white-space: nowrap; }
  .dash-header { gap: .5rem; }
}

/* initiative hourglass, corner of her image */
.portrait-hourglass { position: absolute; bottom: 1.1rem; right: 1.3rem; z-index: 3;
  width: 2.5rem; text-align: center; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(var(--accent2-rgb),.6)) drop-shadow(0 0 3px rgba(58,134,255,.5)); }
.portrait-hourglass svg { width: 100%; height: auto; display: block; }
#init-sand { transition: y .9s ease, height .9s ease; }
.hourglass-label { font-size: .5rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(220,200,255,.75); margin-top: .1rem; text-shadow: 0 1px 4px rgba(0,0,0,.9);
  width: max-content; position: relative; left: 50%; transform: translateX(-50%); }

/* compact mini board (full board in the modal keeps full size) */
.board-mini { max-height: 12rem; }
.board-mini .slip .paper { padding: .5rem .8rem .55rem; }
.board-mini .slip-title { font-size: 1.12rem; padding-right: 3.6rem; }
.board-mini .slip-body { display: none; }
.board-mini .slip-due { margin-top: .15rem; font-size: .85rem; }
.board-mini .slip-meta { display: none; }
.board-mini .stamp { font-size: .44rem; padding: .16rem .3rem; }

/* ---- games shelf ---- */
.games-shelf { display: flex; flex-direction: column; gap: .5rem; }
.game-tile {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .55rem .7rem; border: 1px solid rgba(var(--accent2-rgb),.35); border-radius: 6px;
  background: linear-gradient(160deg, rgba(var(--accent2-rgb),.10), rgba(58,134,255,.06));
}
.game-tile:hover { border-color: rgba(216,155,255,.7); }
.game-ic { font-size: 1.25rem; filter: drop-shadow(0 0 6px rgba(var(--accent2-rgb),.7)); }
.game-name { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #e6dcff; }
.game-sub { font-size: .68rem; color: rgba(220,200,255,.6); }
.game-live { color: #ffb1d0; }

/* ---- fullscreen puzzle overlay ---- */
.game-overlay { z-index: 60; }
.game-overlay.open { display: flex; }
.game-stage {
  width: min(94vw, 94vh, 620px); display: flex; flex-direction: column; gap: .8rem; margin: auto;
}
.game-top { display: flex; align-items: center; gap: 1rem; color: #e6dcff; }
.game-stakes { flex: 1; font-size: .85rem; color: rgba(230,220,255,.85); font-style: italic; }
.game-hud { font-size: .85rem; letter-spacing: .06em; white-space: nowrap; }
#game-clock.low { color: #ff6f9e; text-shadow: 0 0 12px rgba(var(--accent-rgb),.8); }
.game-board {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid rgba(var(--accent2-rgb),.4);
  touch-action: manipulation;
}
.game-board .tile {
  position: absolute; border: 0; padding: 0; cursor: pointer;
  background-repeat: no-repeat; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(10,6,16,.9);
  transition: left .12s ease, top .12s ease; -webkit-user-drag: none;
}
.game-board.solved .tile { box-shadow: none; transition: left .25s ease, top .25s ease; }
.game-msg { min-height: 1.4rem; text-align: center; font-size: .9rem; color: #ffb1d0; }
@media (max-width: 768px) { .game-stage { width: min(96vw, 78vh); } }

/* ---- roulette ---- */
.roulette-wheel {
  position: absolute; inset: 9%; border-radius: 50%;
  border: 3px solid rgba(230,210,255,.5); box-shadow: 0 0 40px rgba(var(--accent2-rgb),.35);
  transition: transform 4.2s cubic-bezier(.12,.68,.16,1);
}
.roulette-label {
  position: absolute; inset: 0; text-align: center; pointer-events: none;
}
.roulette-label span {
  display: inline-block; margin-top: 5%; max-width: 5.5rem;
  font-size: .62rem; line-height: 1.15; color: #14060f; font-weight: 700;
  text-shadow: 0 0 4px rgba(255,255,255,.35);
}
.roulette-pin {
  position: absolute; top: 2.5%; left: 50%; transform: translateX(-50%); z-index: 3;
  color: #ffe3ee; font-size: 1.3rem; text-shadow: 0 0 10px rgba(var(--accent-rgb),.9);
}
.roulette-spin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  padding: .7rem 1.5rem; border-radius: 50%; border: 1px solid rgba(255,220,240,.6);
  background: radial-gradient(circle at 35% 30%, #ff7eb0, #b02363);
  color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; cursor: pointer;
}
.roulette-spin:disabled { opacity: .55; cursor: default; }

/* ---- the needle ---- */
.needle-zone {
  position: absolute; top: 0; bottom: 0; background: rgba(90,255,160,.16);
  border-left: 2px solid rgba(120,255,180,.7); border-right: 2px solid rgba(120,255,180,.7);
  transition: background .2s;
}
.needle-zone.out { background: rgba(255,60,110,.16); border-color: rgba(255,90,140,.8); }
.needle-bar {
  position: absolute; top: 6%; bottom: 6%; width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg, #79a6ff, #cf62ff);
  box-shadow: 0 0 12px rgba(var(--accent2-rgb),.9);
}
/* ---- operation ---- */
.op-dim { position: absolute; inset: 0; background: rgba(8,4,14,.45); pointer-events: none; }
.op-site {
  position: absolute; transform: translate(-50%,-50%); border-radius: 50%;
  border: 2px solid rgba(255,220,240,.35); cursor: crosshair; touch-action: none;
}
.op-site.live {
  border-color: #ffd166; box-shadow: 0 0 16px rgba(255,209,102,.8), inset 0 0 10px rgba(255,209,102,.35);
}
.op-site.holding { border-color: #9dffb0; box-shadow: 0 0 18px rgba(120,255,170,.9); }
.op-site.done { border-color: rgba(140,255,170,.5); opacity: .35; pointer-events: none; }
.op-buzz { animation: opbuzz .25s linear; }
@keyframes opbuzz {
  0%,100% { filter: none; } 25% { filter: invert(.12) hue-rotate(-40deg); transform: translateX(3px); }
  75% { filter: invert(.12) hue-rotate(-40deg); transform: translateX(-3px); }
}
/* ---- jigsaw ---- */
.jig-ghost {
  position: absolute; box-shadow: inset 0 0 0 1px rgba(210,190,255,.14);
  background: rgba(255,255,255,.02);
}
.jig-piece {
  position: absolute; border-radius: 2px; cursor: grab; touch-action: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(10,6,16,.9);
  transition: transform .15s ease;
}
.jig-piece.set { cursor: default; box-shadow: inset 0 0 0 1px rgba(10,6,16,.6); }

/* ---- simon ---- */
.simon-zone {
  position: absolute; transform: translate(-50%,-50%); border-radius: 50%;
  border: 1.5px dashed rgba(255,220,240,.30); touch-action: none; pointer-events: none;
}
.simon-zone.live { border-color: #ffd166; box-shadow: 0 0 18px rgba(255,209,102,.75); }
.simon-dot {
  position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 30%, #ffe3ee, #ff3d81);
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.95), 0 0 34px rgba(var(--accent2-rgb),.6);
  pointer-events: none;
}
.simon-flip {
  position: absolute; top: .6rem; right: .6rem; z-index: 5;
  padding: .35rem .8rem; border-radius: 4px; border: 1px solid rgba(255,220,240,.5);
  background: rgba(20,8,20,.65); color: #ffd9ea; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
/* ---- decrypt ---- */
.decrypt-pad {
  position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: .4rem; align-items: center;
  padding: .6rem .8rem; border-radius: 8px; background: rgba(12,6,16,.82);
  border: 1px solid rgba(var(--accent2-rgb),.45);
}
.decrypt-pad.wrong { animation: opbuzz .3s linear; border-color: #ff5c93; }
.decrypt-lbl { font-size: .7rem; letter-spacing: .1em; color: rgba(230,215,255,.85);
  text-transform: uppercase; }
.decrypt-keys { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.decrypt-keys button {
  width: 2.1rem; height: 2.1rem; border-radius: 5px; border: 1px solid rgba(210,180,255,.4);
  background: rgba(var(--accent2-rgb),.15); color: #f2e7f2; font-size: .95rem; cursor: pointer;
}
.decrypt-keys button:hover { background: rgba(var(--accent2-rgb),.35); }

/* mobile repairs 2026-08-31: face not legs; chat gets its space; header links visible */
@media (max-width: 768px) {
  .portrait video { object-position: center 15%; }
  .col-center .status-card { display: none; }       /* lock+release live in the bottom nav */
  .dash-header { flex-wrap: wrap; row-gap: .25rem; }
  .dash-id { width: 100%; justify-content: flex-end; gap: 1.2rem; }
  .dash-id .expand-btn, .dash-id button { font-size: .64rem; padding: .1rem 0; }
}

/* ---- portrait lock chip (mobile only) + side drawer (his original mobile design) ---- */
.portrait-lock { display: none; }
.drawer-tab, .side-drawer, .drawer-backdrop { display: none; }

@media (max-width: 768px) {
  .mobile-nav { display: none; }                    /* the drawer replaces it */
  .portrait { height: 42dvh; }                      /* she gets a little more of the screen */

  .portrait-lock {
    position: absolute; top: .55rem; left: .65rem; z-index: 3;
    display: flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .28rem .6rem; border-radius: 999px;
    background: rgba(10, 5, 14, .62); border: 1px solid rgba(var(--accent-rgb), .35);
    backdrop-filter: blur(3px);
  }
  .portrait-lock .pl-ic { font-size: .8rem; }
  .portrait-lock .pl-word { font-family: system-ui, sans-serif; font-size: .58rem;
    text-transform: uppercase; letter-spacing: .22em; color: #ffd9ec; }
  .portrait-lock .pl-sub { font-size: .62rem; color: rgba(242, 231, 242, .7); }

  .drawer-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(4, 2, 6, .55);
    opacity: 0; pointer-events: none; transition: opacity .22s ease; display: block; }
  .drawer-backdrop.show { opacity: 1; pointer-events: auto; }

  .drawer-tab {
    position: fixed; right: 0; top: 44%; z-index: 50; display: flex;
    width: 1.25rem; height: 4.2rem; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--accent-rgb), .35); border-right: none;
    border-radius: 10px 0 0 10px; background: rgba(12, 6, 14, .85);
    color: rgba(255, 217, 236, .8); font-size: .7rem; cursor: pointer;
    transition: right .24s ease;
  }
  .drawer-tab.st1 { right: 4.4rem; }
  .drawer-tab.st2 { right: 11.5rem; transform: scaleX(-1); }

  .side-drawer {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 49;
    display: flex; flex-direction: column; gap: .35rem;
    width: 11.5rem; padding: 1rem .6rem calc(1rem + env(safe-area-inset-bottom));
    background: rgba(12, 6, 14, .97); border-left: 1px solid rgba(var(--accent-rgb), .25);
    box-shadow: -12px 0 34px rgba(0, 0, 0, .55);
    transform: translateX(100%); transition: transform .24s ease;
    overflow-y: auto;
  }
  .side-drawer.st1 { transform: translateX(calc(100% - 4.4rem)); }
  .side-drawer.st2 { transform: translateX(0); }

  .dnav, .dnav-form { display: flex; }
  .dnav-form { margin: 0; }
  .dnav-form .dnav { width: 100%; }
  .dnav {
    align-items: center; gap: .7rem; width: 100%;
    background: none; border: none; cursor: pointer; padding: .6rem .5rem;
    border-radius: 8px; color: rgba(242, 231, 242, .78); text-decoration: none;
    font-family: system-ui, sans-serif; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .16em;
  }
  .dnav:active { background: rgba(var(--accent2-rgb), .18); }
  .dnav-ic { font-size: 1.25rem; line-height: 1; width: 2rem; text-align: center; flex: 0 0 2rem; }
  .dnav-lb { opacity: 0; transition: opacity .18s ease; white-space: nowrap; }
  .side-drawer.st2 .dnav-lb { opacity: 1; }
  .dnav-spacer { flex: 1; }
  .dnav-release { color: #ff6f9c; }
}

/* ==========================================================================
   CHAT TIMESTAMPS (appended after the whole sheet; later rules win)
   One design on every screen: the time lives in a gutter beside the bubble
   (right of hers, left of his) that the bubble is not allowed to occupy, so it
   can never be clipped or cause sideways scrolling. Zero vertical cost.
   --ts-w is sized for the 5-character 24-hour "HH:MM" that hhmm() in app.js
   emits -- change one, change the other. Body text is Georgia (old-style
   figures); system-ui + tabular figures is what keeps a column of times even.
   ========================================================================== */
:root {
  --ts-w: 2.5rem;                                  /* slot for "HH:MM" (~2.05rem of ink) */
  --ts-gap: .45rem;                                /* bubble edge -> slot                */
  --ts-gutter: calc(var(--ts-w) + var(--ts-gap));  /* 2.95rem the bubble hands back      */
}
/* insurance only: overflow-y:auto computes overflow-x to auto; the reserve is the guarantee */
.chat-log { overflow-x: hidden; }
.bubble { position: relative; overflow-wrap: break-word; overflow-wrap: anywhere; }   /* break-word = fallback where anywhere is unsupported */
.bubble.her, .bubble.user { max-width: min(88%, calc(100% - var(--ts-gutter))); }
@media (max-width: 768px) { .bubble.her, .bubble.user { max-width: min(90%, calc(100% - var(--ts-gutter))); } }

/* the time: a fixed slot parked exactly on the bubble's last line box */
.bubble .ts {
  position: absolute; bottom: .8rem; height: 1.55rem; line-height: 1.55rem; width: var(--ts-w);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .68rem; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap;
  color: var(--ts-ink); pointer-events: none; -webkit-user-select: none; user-select: none;
  transition: color .16s ease;
}
.bubble.her  .ts { left:  calc(100% + var(--ts-gap)); text-align: left;  --ts-ink: rgba(255, 208, 228, .62); }
.bubble.user .ts { right: calc(100% + var(--ts-gap)); text-align: right; --ts-ink: rgba(242, 231, 242, .60); }
.bubble.her.tg .ts, .bubble.user.tg .ts { --ts-ink: rgba(224, 196, 255, .66); }
.bubble.system .ts { display: none; }

/* grouped runs: the intermediate times fold to a 3px dot at the number's anchor;
   hover (pointer devices) or a tap (touch) prints the number in place */
.bubble .ts.grouped { color: transparent; }
.bubble .ts.grouped::after {
  content: ""; position: absolute; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: var(--ts-ink); opacity: .55; transition: opacity .16s ease;
}
.bubble.her  .ts.grouped::after { left: .1rem; }
.bubble.user .ts.grouped::after { right: .1rem; }
.bubble.reveal .ts.grouped { color: var(--ts-ink); }
.bubble.reveal .ts.grouped::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .bubble:hover .ts.grouped { color: var(--ts-ink); }
  .bubble:hover .ts.grouped::after { opacity: 0; }
}

/* day / 20-minute-gap dividers */
.stamp-divider {
  align-self: center; flex: 0 0 auto; max-width: 100%; display: flex; align-items: center; gap: .5rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(242, 231, 242, .50); margin: .2rem 0 .05rem;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.stamp-divider::before, .stamp-divider::after { content: ""; height: 1px; flex: 0 1 2.2rem; width: 2.2rem; min-width: .4rem; }
.stamp-divider::before { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), .30)); }
.stamp-divider::after  { background: linear-gradient(90deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), 0)); }
@media (max-width: 768px) { .stamp-divider { margin: .1rem 0 0; } }
@media (prefers-reduced-motion: reduce) { .bubble .ts, .bubble .ts.grouped::after { transition: none; } }

/* hypno player + mic (ts6) */
.hyp-overlay{position:fixed;inset:0;background:rgba(8,4,12,.86);display:flex;align-items:center;justify-content:center;z-index:9000;padding:1rem}
.hyp-panel{background:#160d1c;border:1px solid #3a2440;border-radius:14px;max-width:30rem;width:100%;padding:1.3rem 1.2rem;box-shadow:0 12px 60px rgba(0,0,0,.6)}
.hyp-theme{font-size:1.15rem;font-weight:600;margin-bottom:.3rem}
.hyp-note{font-size:.82rem;margin-bottom:.9rem}
.hyp-audio{width:100%;margin:.2rem 0 1rem}
.hyp-int{display:flex;align-items:center;gap:.6rem;font-size:.85rem;margin-bottom:1rem}
.hyp-slider{flex:1}
.hyp-btns{display:flex;gap:.6rem;justify-content:space-between}
.hyp-safe{flex:1;background:#5a1520;color:#ffd7dd;border:1px solid #822;border-radius:8px;padding:.55rem;font-weight:600;cursor:pointer}
.hyp-close{background:transparent;color:#a98;border:1px solid #533;border-radius:8px;padding:.55rem .9rem;cursor:pointer}
.mic-btn{background:transparent;border:none;font-size:1.25rem;cursor:pointer;line-height:1;width:2.1rem;height:2.1rem;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:0}
.mic-btn:hover{background:rgba(var(--accent-rgb),.12)}
.mic-btn.rec{color:#e44;animation:micpulse 1s infinite}
@keyframes micpulse{50%{opacity:.4}}

/* ---- the girl-next-door theme: teal + dark-brown wood, her flannel room (his, 2026-10-01) ---- */
body[data-form="gnd"], body[data-form="claimed"] {
  --accent: #45b3a6;          /* teal, her flannel */
  --accent2: #9c6b3f;         /* warm wood */
  --accent-rgb: 69, 179, 166;
  --accent2-rgb: 156, 107, 63;
  --ink: #0c100f;             /* near-black, a touch of teal/warm */
  --text: #ece6dc;            /* warm off-white */
  --panel: rgba(22, 28, 26, .74);
  --panel-border: rgba(69, 179, 166, .18);
}
/* the portrait frame is pink-glassed for the succubus; warm it for the disguise */
body[data-form="gnd"] .portrait, body[data-form="claimed"] .portrait {
  border-color: rgba(69, 179, 166, .28); box-shadow: 0 0 45px rgba(156, 107, 63, .22);
}

/* the girl-next-door hides the succubus's trappings: her initiative hourglass is her predator's budget, not hers
   to show while she is the sweet one; her slip paper and pin warm from succubus-pink to kraft + teal */
body[data-form="gnd"] .portrait-hourglass, body[data-form="claimed"] .portrait-hourglass { display: none; }
body[data-form="gnd"] .slip.postit .paper, body[data-form="claimed"] .slip.postit .paper {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 14%),
    linear-gradient(160deg, #e9dcc4 0%, #ddcba8 55%, #d2bd94 100%);
}
body[data-form="gnd"] .slip.notebook .paper, body[data-form="claimed"] .slip.notebook .paper {
  background:
    linear-gradient(90deg, transparent 0 1.1rem, rgba(120, 90, 55, .4) 1.1rem calc(1.1rem + 1.5px), transparent calc(1.1rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 1.34rem, rgba(var(--accent-rgb), .18) 1.34rem calc(1.34rem + 1px)),
    linear-gradient(160deg, #f1e9d8 0%, #e7dcc6 100%);
}
body[data-form="gnd"] .slip .pin, body[data-form="claimed"] .slip .pin {
  background: radial-gradient(circle at 32% 30%, #7fd2c8, #2f9e92 65%, #1c6a60);
}
/* the slip ink is maroon-pink for the succubus; warm it to brown for the girl next door (title, body, due, meta) */
body[data-form="gnd"] .slip, body[data-form="claimed"] .slip { color: #3a2a18; }
body[data-form="gnd"] .slip-title, body[data-form="claimed"] .slip-title { color: #43260f; }
body[data-form="gnd"] .slip-body, body[data-form="claimed"] .slip-body { color: #4f3620; }
body[data-form="gnd"] .slip-due, body[data-form="claimed"] .slip-due { color: #5a3b1a; }
body[data-form="gnd"] .slip-meta, body[data-form="claimed"] .slip-meta { color: rgba(67, 38, 15, .6); }

/* inline chat photo: the camera button, the pre-send preview thumb */
.chat-photo-preview { display: flex; align-items: center; gap: .6rem; padding: .4rem .2rem; }
.chat-photo-thumb { height: 3.4rem; width: auto; border-radius: 6px; border: 1px solid var(--panel-border); }
.chat-photo-send { font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 6px; cursor: pointer;
  background: rgba(var(--accent-rgb), .18); color: var(--text); border: 1px solid rgba(var(--accent-rgb), .4); }
.chat-photo-x { font: inherit; background: none; border: none; color: var(--text); opacity: .6; cursor: pointer; font-size: 1rem; }

/* ---- calendar ---- */
/* his own time + her marks on it (ts15). Colours come from the theme tokens only, so the teal/wood room (gnd,
   claimed) and the pink one (revealed) both hold. His rows are plain; hers are accent-tinted and in her hand. */
.cal-card { flex: 0 0 auto; gap: .5rem; padding-top: 1rem; padding-bottom: .9rem; }
.cal-mini { gap: .3rem; font-size: .85rem; }
.cal-mini > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-mini .hers .cal-title { font-family: 'DaemScrawl', cursive; font-size: 1.12em; color: var(--accent); }
/* the right column gained a card: on the 100vh desktop frame let it scroll instead of clipping its last card */
@media (min-width: 1101px) { .col-right { overflow-y: auto; overflow-x: hidden; min-height: 0; } }

.cal-agenda { display: flex; flex-direction: column; gap: .9rem; }
.cal-day { display: flex; flex-direction: column; gap: .2rem; }
.cal-day .stamp-divider { align-self: stretch; margin: 0; }
.cal-day .stamp-divider::before { display: none; }
.cal-day .stamp-divider::after { flex: 1 1 auto; width: auto; }
.cal-day.today .stamp-divider { color: var(--accent); }

.cal-row {
  justify-content: flex-start; align-items: baseline; gap: .7rem;
  padding: .5rem .3rem .5rem .65rem; border-left: 3px solid transparent;
}
.cal-time {
  flex: 0 0 5.8rem; white-space: nowrap; color: var(--text); opacity: .72;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.cal-what { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; }
.cal-note { font-size: .85em; }
.cal-rule {
  display: block; margin-top: .15rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .74rem; letter-spacing: .04em;
}
.cal-row .modal-close, .cal-tail, .cal-lock { flex: 0 0 auto; }
.cal-tail { width: 1.9rem; }                       /* keeps the columns even on a row with nothing to take off */
.cal-lock {
  align-self: center; width: 1.9rem; text-align: center; font-size: .78rem; line-height: 1;
  opacity: .5; cursor: default; -webkit-user-select: none; user-select: none;
}

/* flexibility: non-negotiable is the strongest mark, firm is plain, flexible is dashed and dim */
.chip.cal-badge {
  font-size: .54rem; letter-spacing: .14em; padding: .14rem .45rem .14rem .55rem; margin-left: .3rem;
  white-space: nowrap; vertical-align: middle; position: relative; top: -.08em;
  color: var(--text); border: 1px solid rgba(255, 255, 255, .28); background: none;
}
.chip.cal-badge.nonneg {
  color: #fff; font-weight: 600; border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .3);
}
.chip.cal-badge.flex { color: rgba(242, 231, 242, .5); border: 1px dashed rgba(255, 255, 255, .24); }

/* hers: the tint of her chat bubble, her handwriting, a lock where his rows have the remove button */
.cal-row.hers, .cal-her {
  background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .22);
  border-left: 3px solid rgba(var(--accent-rgb), .55); border-radius: 6px;
}
.cal-row.hers .cal-title, .cal-her .cal-title {
  font-family: 'DaemScrawl', cursive; font-size: 1.18em; line-height: 1.2; color: var(--text);
}
.cal-hers { display: flex; flex-direction: column; gap: .5rem; }
.cal-her { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .5rem .65rem .8rem; }
.cal-her-head { display: flex; align-items: baseline; gap: .5rem; }
.cal-her-head .cal-title { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; font-size: 1.25rem; }
.cal-her-head .chip.cal-badge { flex: 0 0 auto; margin-left: 0; }
.cal-her-meta {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .74rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.cal-her-note { font-size: .88rem; font-style: italic; overflow-wrap: break-word; overflow-wrap: anywhere; }
.cal-checks { gap: .3rem; font-size: .82rem; }
.cal-checks > div { overflow-wrap: break-word; overflow-wrap: anywhere; }
.cal-out {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .16em;
}
.cal-out.met { color: var(--accent); }
.cal-out.missed { color: #ff6f9c; }
.cal-sub-label { margin-top: .35rem; }
.cal-her .cal-her { background: rgba(var(--accent-rgb), .07); padding: .45rem .4rem .5rem .65rem; }
.cal-her .cal-her .cal-her-head .cal-title { font-size: 1.08rem; }

/* the add form: two columns on a wide screen, one on a phone; it sits outside everything the renderers rewrite */
.cal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-items: end; }
.cal-form > * { min-width: 0; }
.cal-form .cal-wide { grid-column: 1 / -1; }
.cal-form .field { padding: .6rem .8rem; min-height: 2.6rem; min-width: 0; max-width: 100%; }
.cal-form select.field, .cal-form input[type="date"], .cal-form input[type="time"] { color-scheme: dark; }
.cal-form select.field option { background: var(--ink); color: var(--text); }
.cal-lab {
  display: flex; flex-direction: column; gap: .3rem;
  font-family: system-ui, sans-serif; font-size: .62rem; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(242, 231, 242, .45);
}
.cal-lab .field { text-transform: none; letter-spacing: normal; }
.cal-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cal-toggle, .cal-dow { display: grid; gap: .3rem; }
.cal-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal-dow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-toggle label, .cal-dow label { position: relative; display: block; cursor: pointer; }
.cal-toggle input, .cal-dow input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.cal-toggle span, .cal-dow span {
  display: flex; align-items: center; justify-content: center; min-height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; background: rgba(255, 255, 255, .03);
  font-size: .62rem; letter-spacing: .14em; color: rgba(242, 231, 242, .6);
  -webkit-user-select: none; user-select: none;
}
.cal-toggle input:checked + span, .cal-dow input:checked + span {
  color: #fff; border-color: rgba(var(--accent-rgb), .8); background: rgba(var(--accent-rgb), .22);
}
.cal-toggle input:focus-visible + span, .cal-dow input:focus-visible + span {
  outline: 1px solid rgba(var(--accent-rgb), .7); outline-offset: 1px;
}
.cal-submit { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.cal-submit #cal-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; }
.cal-submit .btn-send { flex: 0 0 auto; min-height: 2.6rem; }

@media (max-width: 768px) {
  .cal-form { grid-template-columns: minmax(0, 1fr); }
  .cal-row { gap: .5rem; padding-left: .5rem; }
  .cal-time { flex-basis: 5.3rem; font-size: .74rem; }
  .cal-row .modal-close { min-width: 2.1rem; min-height: 2.1rem; }
  .cal-tail, .cal-lock { width: 2.1rem; }
  .cal-dow span { letter-spacing: .06em; }
}

/* ---- wishlist ---- */
/* the things she wishes he had, inside the equipment window above his toys. The rows are hers -- her chat-bubble
   tint, her handwriting -- and carry one control of his: "got it". Colours come from the theme tokens only. */
.wish-count { margin-left: .55em; color: var(--accent); }
.wish-count:empty, #wish-msg:empty { display: none; }

.row.wish-row {
  align-items: center; flex-wrap: wrap; gap: .5rem .9rem; padding: .55rem .6rem .6rem .8rem;
  background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .22);
  border-left: 3px solid rgba(var(--accent-rgb), .55); border-radius: 6px;
}
.wish-what { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.wish-name {
  font-family: 'DaemScrawl', cursive; font-size: 1.25rem; line-height: 1.2; color: var(--text);
  overflow-wrap: break-word; overflow-wrap: anywhere;
}
.wish-why { font-size: .88rem; overflow-wrap: break-word; overflow-wrap: anywhere; }
.wish-acts { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.wish-link, .wish-got {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .2em; white-space: nowrap;
}
.wish-link {
  color: var(--accent); padding: .3rem 0; text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), .45); text-underline-offset: .35em;
}
.wish-link:hover { color: var(--text); }
.wish-got {
  text-indent: .2em; padding: .5rem .75rem; border-radius: 6px; cursor: pointer; color: var(--text);
  background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .6);
}
.wish-got:hover { background: rgba(var(--accent-rgb), .3); }
.wish-got:disabled { opacity: .5; cursor: default; }

@media (max-width: 768px) {
  .dash-id .wish-count { margin-left: .4em; letter-spacing: .04em; }
  /* the drawer is narrow: the count sits under the word "equipment" */
  .dnav-lb .wish-count:not(:empty) {
    display: block; margin: .2rem 0 0; font-size: .56rem; letter-spacing: .1em; text-align: left;
  }
  .wish-link { display: inline-flex; align-items: center; min-height: 2.1rem; padding: 0; }
  .wish-got { min-height: 2.1rem; }
}

/* ---- her board, 10/5 redesign (his "redesign approved"): her rules on a chalkboard; tasks as rows that open in
   place, one at a time; done / passed / failed leave the board for the done list. Nothing floats or overlaps. ---- */
.b2 { display: flex; flex-direction: column; gap: 1.05rem; }
.chalk {
  position: relative; border-radius: 6px; padding: 1rem 1.1rem 1.1rem;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, .04), transparent 55%),
    #1f2a26;
  border: 6px solid #5a3b26; box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .5);
}
.chalk-head {
  font-family: 'DaemTitle', 'Segoe Script', cursive; font-size: 1.35rem; color: #f3efe6; opacity: .92;
  letter-spacing: .02em; margin-bottom: .4rem;
}
.chalk ol { margin: 0; padding-left: 1.4rem; color: #ece8de; }
.chalk li {
  font-family: 'DaemScrawl', 'Segoe Script', cursive; font-size: 1.12rem; line-height: 1.35;
  margin: .35rem 0; text-shadow: 0 0 1px rgba(255, 255, 255, .35);
}
.chalk li b { font-family: 'DaemTitle', cursive; font-weight: 700; color: #fff; }
.chalk li .since {
  font-family: system-ui, sans-serif; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(236, 232, 222, .45); margin-left: .35rem;
}
.b2-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: system-ui, sans-serif; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(242, 231, 242, .55);
}
.b2-label .n { color: rgba(var(--accent-rgb), .9); }
.b2-tasks { display: flex; flex-direction: column; gap: .55rem; }
.b2-task {
  position: relative; border-radius: 4px; cursor: pointer; color: #3c1024;
  background: linear-gradient(160deg, #ffe3ee 0%, #ffd0e3 100%);
  box-shadow: 1px 3px 6px rgba(0, 0, 0, .45);
}
.b2-row { padding: .6rem .75rem; }
.b2-title {
  display: block; font-family: 'DaemTitle', 'Segoe Script', cursive; font-weight: 700; font-size: 1.2rem;
  line-height: 1.1; color: #47102b;
}
.b2-ask {
  display: block; font-family: 'DaemScrawl', cursive; font-weight: 400; font-size: .95rem; color: #6a2a48;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b2-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.b2-tags:empty { display: none; }
.b2-badge {
  font-family: system-ui, sans-serif; font-weight: 800; font-size: .5rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .22rem .4rem; border: 1.5px solid; border-radius: 3px; white-space: nowrap;
}
.b2-badge.proof { color: #8d2a56; border-color: #8d2a56; }
.b2-badge.sent { color: #5b3a9e; border-color: #5b3a9e; }
.b2-badge.due { color: #7c1140; border-color: rgba(124, 17, 64, .5); }
.b2-badge.late { color: #fff; background: #b3123a; border-color: #b3123a; }
.b2-more { display: none; padding: 0 .85rem .85rem; cursor: default; }
.b2-task.open .b2-more { display: block; }
.b2-task.open .b2-ask { display: none; }
.b2-body { font-family: 'DaemScrawl', 'Segoe Script', cursive; font-size: 1.12rem; line-height: 1.45; color: #58203a; }
.b2-act { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; align-items: center; }
.b2-act input[type=file] { font-family: system-ui, sans-serif; font-size: .78rem; color: #58203a; max-width: 100%; }
.b2-act button {
  font-family: system-ui, sans-serif; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 4px; padding: .5rem .85rem; cursor: pointer; border: 1.5px solid rgba(71, 16, 43, .8);
}
.b2-act .b2-primary { background: rgba(71, 16, 43, .88); color: #ffe3ee; }
.b2-act .b2-ghost { background: transparent; color: #47102b; }
.b2-msg { margin-top: .45rem; font-family: system-ui, sans-serif; font-size: .7rem; color: #7c1140; }
.b2-msg:empty { display: none; }
.b2-meta {
  margin-top: .5rem; font-family: system-ui, sans-serif; font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(71, 16, 43, .55);
}
.b2-empty {
  padding: .9rem; text-align: center; font-family: system-ui, sans-serif; font-size: .62rem; letter-spacing: .25em;
  text-transform: uppercase; color: rgba(242, 231, 242, .3);
}
.b2-done { border-top: 1px solid rgba(var(--accent-rgb), .18); padding-top: .7rem; }
.b2-done-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none;
  cursor: pointer; padding: .2rem 0; font-family: system-ui, sans-serif; font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(242, 231, 242, .5);
}
.b2-done-list { display: none; margin-top: .45rem; }
.b2-done.open .b2-done-list { display: block; }
.b2-done-item {
  display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0;
  border-bottom: 1px dashed rgba(242, 231, 242, .08); font-family: 'DaemScrawl', cursive; font-size: 1rem;
  color: rgba(242, 231, 242, .75);
}
.b2-done-item .st {
  font-family: system-ui, sans-serif; font-weight: 800; font-size: .52rem; letter-spacing: .15em;
  text-transform: uppercase; align-self: center; white-space: nowrap;
}
.b2-done-item .st.verified { color: #b9a2ff; }
.b2-done-item .st.failed { color: #ff6f8c; }
.b2-done-item .st.done { color: #8fd19e; }
.b2-done-item .st.dropped { color: rgba(242, 231, 242, .45); }
.b2-done-item { flex-wrap: wrap; }
.b2-again { width: 100%; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 .15rem; }
.b2-again input[type=file] { font-family: system-ui, sans-serif; font-size: .72rem; color: rgba(242, 231, 242, .75); max-width: 100%; }
.b2-again button { font-family: system-ui, sans-serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 4px; padding: .4rem .7rem; cursor: pointer; background: transparent; color: #f2e7f2;
  border: 1.5px solid rgba(var(--accent-rgb), .6); }
.b2-again .b2-msg { width: 100%; color: #ffb3c9; }

/* the board's homes: the card scrolls; the expanded board scrolls as one page */
.board-mini { position: relative; max-height: none; overflow: visible; padding: .5rem .2rem .8rem; }   /* grows to fit -- the column scrolls, never the card */
.board-mini .chalk { padding: .6rem .75rem .7rem; border-width: 4px; }
.board-mini .chalk-head { font-size: 1.1rem; }
.board-mini .chalk li { font-size: .98rem; }
#board-full { overflow-y: auto; padding: 1.1rem 1rem 1.3rem; }
@media (max-width: 768px) {
  #board-full { flex: 1 1 auto; min-height: 0; }
  .chalk { padding: .75rem .85rem .8rem; border-width: 5px; }
  .chalk-head { font-size: 1.15rem; margin-bottom: .2rem; }
  .chalk li { font-size: 1rem; line-height: 1.3; margin: .25rem 0; }
}

/* ---- right column, 10/5: her rules always in view at the top; tasks right under them; the gallery card is one line;
   the event feed card is three one-line entries ---- */
.rules-card { flex: 0 0 auto; }
.rules-card .chalk li { font-size: 1.02rem; line-height: 1.32; }
.chalk-empty { font-family: 'DaemScrawl', cursive; font-size: 1rem; color: rgba(236, 232, 222, .45); padding: .15rem 0 .05rem; }
.gallery-count { font-size: .9rem; line-height: 1.4; }
.gallery-count b { color: var(--accent); font-weight: 700; }
#feed-mini { gap: .3rem; }
#feed-mini > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }

/* ---- her workbench (10/4) ---- */
/* the things she designs in 3D: tiles on the card (her renders), rows in the list window, and a viewer for the four
   views + her note. Colours come from the theme tokens only. */
.design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.design-tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: .5rem; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(var(--accent2-rgb), .10));
  border: 1px solid rgba(var(--accent-rgb), .28); display: flex; align-items: center; justify-content: center;
}
.design-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.design-tile .design-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem .35rem; font-size: .66rem; line-height: 1.2;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: var(--text); pointer-events: none;
}
.design-tile.design-pending .design-name { position: static; background: none; }
.design-tile.design-pending { flex-direction: column; gap: .2rem; padding: .3rem; text-align: center; }
.design-state { font-size: .66rem; font-style: italic; color: rgba(242, 231, 242, .7); }
.design-list { display: flex; flex-direction: column; gap: .45rem; max-height: 70vh; overflow-y: auto; }
.row.design-row {
  align-items: center; gap: .7rem; padding: .5rem .6rem; cursor: pointer;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 6px;
}
.design-thumb { width: 5.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.design-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.design-row .design-name { font-family: 'DaemScrawl', cursive; font-size: 1.2rem; line-height: 1.2;
  overflow-wrap: anywhere; }
.design-note { font-size: .85rem; overflow-wrap: anywhere; }
.design-view-modal { max-width: min(96vw, 1100px); }
.design-view-note { font-style: italic; margin: .2rem 0 .7rem; overflow-wrap: anywhere; }
.design-views { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.design-fig { margin: 0; }
.design-fig img { width: 100%; height: auto; display: block; border-radius: 6px; }
.design-fig figcaption { font-size: .7rem; text-align: center; margin-top: .15rem; }
@media (max-width: 640px) { .design-views { grid-template-columns: 1fr; } }

/* ---- games on the phone (10/5): the card inside its window ---- */
#games-modal-body .games-card { background: none; border: none; box-shadow: none; padding: 0; }
#games-modal-body .games-card > .cardtitle { display: none; }