/* Rumor Mill (2026-10-01). World: a desk in ballpoint blue, pink "While You Were Out" slips for
   everything written, yellow legal-pad pages for everything drawn, red rubber stamps for the one
   action that matters on each screen. Direction contract at the top of index.html. */

:root {
  --blue: #1c2d6b;
  --blue-2: #243a86;
  --blue-deep: #13204f;
  --on-blue: #fff6e0;
  --on-blue-2: #c3cdf0;
  --slip: #f6bccb;
  --slip-shade: #eea7b9;
  --print: #9c1d45;
  --print-soft: rgba(156, 29, 69, .32);
  --pad: #fbf0a3;
  --rule: rgba(70, 120, 190, .42);
  --margin: rgba(214, 72, 72, .65);
  --paper: #fff6e0;
  --ink: #1c2d6b;
  --stamp: #c8302a;
  --stamp-dark: #9f2420;
  --hi: #ffd21f;
  --ok: #1f7a46;
  --print-face: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --lift: 0 1px 1px rgba(10, 16, 48, .25), 0 10px 24px -8px rgba(8, 14, 44, .55), 0 26px 48px -26px rgba(8, 14, 44, .7);
  --focus: var(--hi);
  --chat-w: 19.5rem;
  --bar-h: 3.6rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #5a6db8 var(--blue-deep); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--print-face);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}
::selection { background: var(--hi); color: var(--blue-deep); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.slip, .pad, .person, .check-btn { --focus: var(--blue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--hi); color: var(--blue-deep); padding: .6rem 1rem; font-weight: 800; text-decoration: none; }
.skip:focus { top: 1rem; }
.hand { font-family: var(--hand); font-weight: 700; }

/* the desk: ballpoint hatching and a pool of lamp light */
.desk {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120, 150, 255, .16), transparent 60%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(62deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 11px);
}

/* ---------------------------------------------------------------- top bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: .55rem max(1rem, env(safe-area-inset-right)) .55rem max(1rem, env(safe-area-inset-left));
  background: rgba(19, 32, 79, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(195, 205, 240, .14);
}
.bar-brand {
  color: var(--slip); text-decoration: none;
  font-weight: 900; font-style: italic; font-stretch: 70%; text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: .01em; line-height: 1;
}
.bar-brand span + span { color: var(--on-blue); }
.bar-mid { display: flex; gap: 1.1rem; align-items: baseline; min-width: 0; color: var(--on-blue-2); font-size: .9rem; white-space: nowrap; overflow: hidden; }
.bar-room b { color: var(--on-blue); font-weight: 900; letter-spacing: .14em; font-stretch: 85%; }
.bar-end { display: flex; align-items: center; gap: .5rem; }
.bar-btn {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid rgba(195, 205, 240, .25); border-radius: .5rem; background: transparent; color: var(--on-blue);
  transition: background-color .2s, border-color .2s;
}
.bar-btn:hover { background: rgba(195, 205, 240, .12); border-color: rgba(195, 205, 240, .5); }
.bar-btn svg { width: 1.3rem; height: 1.3rem; }

/* ---------------------------------------------------------------- push-to-talk voice chat (2026-10-16) */
.voice { display: flex; align-items: center; gap: .4rem; }
.voice-join { width: auto; padding: 0 .75rem 0 .6rem; display: inline-flex; gap: .35rem; font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 80%; letter-spacing: .05em; }
.voice-join:disabled { opacity: .6; cursor: progress; }
.talk-btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 .55rem 0 .75rem;
  border: 0; border-radius: 999px; background: var(--paper); color: var(--ink);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 78%; letter-spacing: .04em; font-size: .95rem;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: background-color .12s, color .12s, scale .12s var(--ease);
}
.talk-btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.talk-key { padding: .05rem .4rem; border: 1.5px solid currentColor; border-radius: .3rem; font: 800 .68rem/1.3 var(--print-face); font-style: normal; letter-spacing: .06em; opacity: .7; }
.talk-btn:hover:not(:disabled) { background: #fff; }
.talk-btn.is-talking { background: var(--stamp); color: var(--paper); scale: 1.06; box-shadow: 0 0 0 .3rem rgba(200, 48, 42, .35); animation: talking 1.1s ease-in-out infinite; }
.talk-btn:disabled { background: rgba(255, 246, 224, .55); cursor: default; }
@keyframes talking { 50% { box-shadow: 0 0 0 .55rem rgba(200, 48, 42, .12); } }
.talkers {
  position: absolute; right: max(1rem, env(safe-area-inset-right)); top: calc(100% + .45rem); z-index: 3; margin: 0;
  max-width: min(22rem, calc(50% - 4.5rem)); padding: .35rem .8rem .35rem .6rem;
  display: flex; align-items: center; gap: .4rem; border-radius: 999px;
  background: var(--paper); color: var(--ink); box-shadow: var(--lift);
  font-family: var(--hand); font-weight: 700; font-size: 1rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.talkers .mic-i { width: 1rem; height: 1rem; flex: none; color: var(--stamp); animation: throb 1s var(--ease) infinite; }
.mic-i { width: .85em; height: .85em; vertical-align: -.1em; margin-right: .15em; }
.tag--voice { color: var(--blue-2); }
.voice-fail .tag--voice { color: #8a8f99; text-decoration: line-through; }
.person .av, .donelist .av { border-radius: 50%; transition: outline-color .15s; outline: 3px solid transparent; outline-offset: 1px; }
.is-talking .av { outline-color: var(--stamp); animation: talkring 1s ease-in-out infinite; }
@keyframes talkring { 50% { outline-offset: 4px; } }
audio.rm-voice-audio { display: none; }
/* the turn clock (2026-10-16: "bigger and more obvious in the center"): a round desk clock
   hanging from the middle of the bar. The ring drains as the turn runs out (--left, 1 to 0) and the
   whole face turns stamp red for the last 10 seconds. */
.clock {
  --left: 1; --ring: var(--blue-2);
  position: absolute; left: 50%; top: .25rem; translate: -50% 0; z-index: 2;
  width: 6.2rem; height: 6.2rem; border-radius: 50%; padding: .38rem;
  display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--left) * 360deg), rgba(28, 45, 107, .14) 0) border-box;
  box-shadow: 0 0 0 .3rem var(--paper), 0 10px 26px -6px rgba(5, 10, 34, .75);
  color: var(--ink);
  transition: background-color .3s, color .3s;
}
.clock-face {
  width: 100%; height: 100%; border-radius: 50%; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.clock-face b { font-weight: 900; font-stretch: 75%; font-variant-numeric: tabular-nums; font-size: 2.15rem; letter-spacing: -.01em; }
.clock-face small { margin-top: .12rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; color: var(--print); }
.clock.is-low { --ring: var(--stamp); animation: throb 1s var(--ease) infinite; }
.clock.is-low .clock-face { background: var(--stamp); color: var(--paper); }
.clock.is-low .clock-face small { color: var(--paper); }
.clock--demo { position: relative; left: auto; top: auto; translate: none; margin: .4rem auto; animation: none; }
body.has-clock .screen { padding-top: calc(clamp(1rem, 4vw, 2.5rem) + 3rem); }
@keyframes throb { 50% { transform: scale(1.06); } }

/* ---------------------------------------------------------------- screens */
main { position: relative; z-index: 1; outline: none; }
.screen {
  min-height: calc(100dvh - 3.6rem);
  padding: clamp(1rem, 4vw, 2.5rem) max(1rem, env(safe-area-inset-left)) calc(2.5rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
body[data-screen="menu"] .screen, body[data-screen="join"] .screen, body[data-screen="notice"] .screen { min-height: 100dvh; }
body[data-screen="reveal"] .screen { justify-content: flex-start; }

/* ---------------------------------------------------------------- the message slip */
.slip {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .06) 3px 4px),
    linear-gradient(180deg, #f8c6d3, var(--slip) 30%, var(--slip-shade));
  color: var(--print);
  padding: 1.6rem clamp(1.1rem, 4vw, 2rem) 1.5rem;
  box-shadow: var(--lift);
  /* the perforated top edge, torn off the pad */
  -webkit-mask: radial-gradient(circle at 6px 0, transparent 3.2px, #000 3.6px) 0 0 / 12px 100% repeat-x;
  mask: radial-gradient(circle at 6px 0, transparent 3.2px, #000 3.6px) 0 0 / 12px 100% repeat-x;
}
.slip-head { border-bottom: 2px solid var(--print); padding-bottom: .5rem; margin-bottom: 1rem; }
.slip-kind {
  margin: 0; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em;
  font-size: .8rem; font-stretch: 80%;
}
.slip-title, .album-h {
  margin: .1rem 0 0; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-stretch: 68%; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: .95; letter-spacing: .005em;
  text-wrap: balance;
}
.lbl {
  font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-stretch: 85%;
  color: var(--print);
}

/* main menu slip */
.slip--hero { max-width: 34rem; rotate: -1.2deg; padding-top: 2rem; }
.logo {
  margin: .2rem 0 0; display: flex; flex-direction: column; line-height: .78;
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 62%;
  font-size: clamp(4.2rem, 17vw, 6rem); letter-spacing: -.01em; color: var(--print);
}
.logo span + span { color: var(--blue); margin-left: .45em; }
.slip-under {
  margin: .35rem 0 0; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .3em; font-stretch: 80%;
  font-size: .82rem; color: var(--print);
}
.slip-line { margin: 0 0 .9rem; display: grid; grid-template-columns: auto 1fr; gap: .35rem .7rem; align-items: baseline; }
.slip-line .hand { color: var(--ink); font-size: 1.12rem; line-height: 1.5; border-bottom: 1px solid var(--print-soft); }
.slip-meta { margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; font-weight: 700; color: var(--print); }
.slip-meta > span:not(.vim-live)::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border: 1.5px solid currentColor; vertical-align: .05em; }

/* the shared menu, printed as the slip's checkboxes */
.menu { --vm-gap: .15rem; --vm-width: 100%; --vm-accent: var(--print); --vm-muted: var(--print); }
.check-btn {
  display: grid !important; grid-template-columns: 1.6rem 1fr; align-items: center; text-align: left !important;
  column-gap: .75rem; padding: .55rem .25rem; min-height: 3rem;
  background: none; border: 0; border-bottom: 1px solid var(--print-soft); border-radius: 0;
  color: var(--print); text-decoration: none;
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 75%; font-size: 1.35rem; letter-spacing: .01em;
  transition: color .15s;
}
.check-btn::before {
  content: ""; grid-row: 1 / span 2; width: 1.35rem; height: 1.35rem; border: 2px solid var(--print); background: rgba(255, 255, 255, .25);
  transition: background-color .15s;
}
.check-btn .vm-label { grid-column: 2; }
.check-btn .vm-sub { grid-column: 2; font-family: var(--hand); font-style: normal; text-transform: none; color: var(--ink); font-size: .95rem !important; opacity: 1 !important; margin-top: 0 !important; }
.check-btn:hover:not([disabled]), .check-btn:focus-visible { color: var(--blue); }
.check-btn:hover:not([disabled])::before, .check-btn:focus-visible::before {
  background:
    linear-gradient(var(--blue), var(--blue)) 0 0 / 0 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.5l5.5 5L22 2' fill='none' stroke='%231c2d6b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 130% no-repeat,
    rgba(255, 255, 255, .45);
}
.check-btn:focus-visible { outline-offset: 0; }
.menu .vm-panel { padding-top: .2rem; }
.menu .vm-h { font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 70%; font-size: 1.7rem; color: var(--print); text-align: left; }
.menu .vm-note { text-align: left; color: var(--ink); font-family: var(--hand); font-size: 1rem; }
.menu .vm-note a, .menu .vm-credlist a { color: var(--blue); }
.menu .vm-maker { color: var(--ink); }
.menu .vm-role, .menu .vm-cred-what { color: var(--print); }
.menu .vm-slider label, .menu .vm-slider output { color: var(--print); font-weight: 800; }
.menu .vm-slider input { accent-color: var(--blue); }
.menu .vm-logo { background: #000; }
.vim-live { color: var(--ok); }

/* ---------------------------------------------------------------- buttons */
/* the rubber stamp: an inked impression with rough edges, not a raised button */
.stamp-btn {
  --r: -2deg;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; min-width: 8.5rem; padding: .35rem 1.6rem;
  border: 0; border-radius: .3rem; background: var(--stamp); color: var(--paper);
  box-shadow: inset 0 0 0 .22rem var(--stamp), inset 0 0 0 .36rem rgba(255, 246, 224, .85);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 72%; font-size: 1.45rem; letter-spacing: .04em;
  rotate: var(--r);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -5 3.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 120px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -5 3.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 120px;
  transition: rotate .35s var(--ease), background-color .2s, scale .15s var(--ease);
}
.stamp-btn:hover:not(:disabled) { rotate: 0deg; background: #d93a33; box-shadow: inset 0 0 0 .22rem #d93a33, inset 0 0 0 .36rem rgba(255, 246, 224, .85); }
.stamp-btn:active:not(:disabled) { scale: .96; }
.stamp-btn:disabled { background: #8d7d86; box-shadow: inset 0 0 0 .22rem #8d7d86, inset 0 0 0 .36rem rgba(255, 246, 224, .5); cursor: not-allowed; rotate: 0deg; }
.stamp-btn--big { min-height: 3.8rem; min-width: 12rem; font-size: 1.9rem; }
.stamp-btn:focus-visible { outline: none; }
.stamp-btn:focus-visible::before { content: ""; position: absolute; inset: -6px; border: 3px solid var(--focus); border-radius: .5rem; }
/* the one authored moment: the stamp comes down when something is sent */
.stamp-btn.is-stamping { animation: stamp .42s var(--ease); }
@keyframes stamp {
  0% { scale: 1.22; rotate: -9deg; opacity: .55; }
  55% { scale: .94; rotate: 0deg; opacity: 1; }
  100% { scale: 1; }
}

.paper-btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .45rem 1rem;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: .4rem;
  font-weight: 800; font-size: .95rem;
  transition: background-color .15s, translate .12s var(--ease);
}
.paper-btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.paper-btn:hover { background: #fff; translate: 0 -1px; }

.link-btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem .25rem;
  background: none; border: 0; color: var(--print);
  font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}
.link-btn svg { width: 1.2rem; height: 1.2rem; }
.link-btn:hover { color: var(--blue); }
body > .screen .link-btn { color: inherit; }

/* ---------------------------------------------------------------- forms */
.slip--form { max-width: 32rem; rotate: .6deg; }
.field { margin: 0 0 1rem; border: 0; padding: 0; min-width: 0; }
.field > .lbl { display: block; margin-bottom: .1rem; }
.hand-input {
  width: 100%; display: block; border: 0; border-bottom: 2px solid var(--print); border-radius: 0;
  background: transparent; color: var(--ink); padding: .25rem .1rem .2rem;
  font-family: var(--hand); font-weight: 700; font-size: 1.5rem; line-height: 1.35;
}
.hand-input::placeholder { color: rgba(28, 45, 107, .8); }
.hand-input:focus { outline: none; border-bottom-color: var(--blue); background: rgba(255, 255, 255, .28); }
.hand-input:focus-visible { outline: none; }
.code-input { text-transform: uppercase; letter-spacing: .35em; font-size: 2.2rem; max-width: 11rem; }
.avatars legend { margin-bottom: .45rem; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.av-pick { position: relative; display: block; cursor: pointer; border-radius: 50%; }
.av-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.av-pick .av { width: 100%; height: auto; color: var(--ink); transition: transform .25s var(--ease), filter .2s; filter: saturate(.75); }
.av-pick:hover .av { transform: rotate(-6deg) scale(1.06); }
.av-pick input:checked + .av { filter: none; transform: scale(1.08); }
.av-pick input:checked + .av circle:first-child { stroke: var(--print); stroke-width: 3; }
.av-pick:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.form-err { min-height: 1.4em; margin: 0 0 .4rem; color: var(--stamp-dark); font-weight: 800; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.form-actions .stamp-btn { margin-left: auto; }

/* ---------------------------------------------------------------- legal pad */
.pad {
  position: relative;
  background:
    linear-gradient(90deg, transparent 8%, var(--margin) 8%, var(--margin) calc(8% + 1.5px), transparent calc(8% + 1.5px), transparent calc(8% + 4px), var(--margin) calc(8% + 4px), var(--margin) calc(8% + 5.5px), transparent calc(8% + 5.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(5% - 1.4px), var(--rule) calc(5% - 1.4px) 5%) 0 11% / 100% 100% no-repeat,
    var(--pad);
  color: var(--ink);
  box-shadow: var(--lift);
}
.pad::before { /* the glued red top edge of the pad */
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px;
  background: linear-gradient(180deg, #b8332d, #8f241f); border-radius: 2px 2px 0 0;
}

/* ---------------------------------------------------------------- lobby */
.lobby {
  width: 100%; max-width: 76rem;
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr) minmax(18rem, 24rem);
  align-items: start;
}
.lobby-code { rotate: -1.5deg; }
.bigcode {
  margin: .2rem 0 .6rem; color: var(--ink); font-family: var(--print-face);
  font-weight: 900; font-stretch: 100%; font-size: clamp(3.6rem, 9vw, 5rem); letter-spacing: .14em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lobby-hint { margin: 0 0 1rem; font-size: .9rem; color: var(--print); font-weight: 600; }
.lobby-hint b { color: var(--ink); overflow-wrap: anywhere; }
.sec-h {
  margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .7rem;
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 70%; font-size: 1.6rem; line-height: 1;
}
.lobby-people .sec-h { color: var(--on-blue); }
.count { font-style: normal; font-weight: 800; font-stretch: 100%; font-size: .85rem; color: var(--on-blue-2); font-variant-numeric: tabular-nums; }
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .7rem; }
.person {
  display: grid; grid-template-columns: 2.9rem 1fr auto; grid-auto-flow: row dense; align-items: center; column-gap: .6rem;
  padding: .45rem .55rem; min-height: 3.6rem;
  background: var(--paper); color: var(--ink); border-radius: 2px;
  box-shadow: 0 1px 1px rgba(10, 16, 48, .3), 0 8px 16px -10px rgba(8, 14, 44, .7);
  rotate: var(--tilt, 0deg);
  animation: settle .5s var(--ease) both;
}
@keyframes settle { from { opacity: 0; translate: 0 -10px; rotate: calc(var(--tilt, 0deg) - 4deg); } }
.person .av { width: 2.9rem; height: 2.9rem; grid-row: span 2; color: var(--ink); }
.pname { font-size: 1.2rem; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .tags { grid-column: 2; display: flex; gap: .3rem; min-height: 0; }
.person .tags:empty { display: none; }
.person .tag { margin: 0; }
.person .kick { grid-column: 3; grid-row: 1 / span 2; }
.tag {
  display: inline-block; margin-right: .3rem; padding: .05rem .4rem; border: 1.5px solid currentColor; border-radius: 3px;
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 80%; font-size: .68rem; letter-spacing: .06em; line-height: 1.3;
  color: var(--print);
}
.tag--host { color: var(--stamp); rotate: -4deg; }
.tag--away { color: #6b6f7c; }
.tag--sent { color: var(--ok); rotate: -5deg; }
.tag--busy { color: var(--blue-2); }
.person.is-away { opacity: .62; }
.person.is-you { outline: 2px solid var(--hi); outline-offset: 2px; }
.person.is-empty { background: transparent; border: 1.5px dashed rgba(195, 205, 240, .35); box-shadow: none; color: var(--on-blue-2); animation: none; rotate: 0deg; }
.av--empty { display: block; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1.5px dashed rgba(195, 205, 240, .45); grid-row: span 2; }
.kick {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #8a8f99;
}
.kick svg { width: 1.1rem; height: 1.1rem; }
.kick:hover { background: rgba(200, 48, 42, .12); color: var(--stamp); }

.lobby-rules { padding: 1.6rem 1.4rem 1.4rem 13%; rotate: 1deg; }
.lobby-rules .sec-h { color: var(--ink); }
.rule { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.rule legend { margin-bottom: .35rem; color: var(--stamp-dark); }
.checks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.check { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; cursor: pointer; font-weight: 800; font-size: 1.02rem; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 1.3rem; height: 1.3rem; border: 2px solid var(--ink); background: rgba(255, 255, 255, .4); flex: none; }
.check input:checked + .box {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.5l5.5 5L22 2' fill='none' stroke='%23c8302a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 135% no-repeat, rgba(255, 255, 255, .55);
}
.check:has(input:focus-visible) .box { outline: 3px solid var(--blue); outline-offset: 2px; }
.rule:disabled .check { cursor: default; }
.rule:disabled .check:not(:has(input:checked)) { opacity: .5; }
.rules-note { margin: .2rem 0 1.2rem; font-family: var(--hand); font-size: 1.05rem; line-height: 1.4; }
.lobby-go { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.wait-note { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 1.1rem; }
.lobby-go .wait-note { color: var(--ink); }

/* ---------------------------------------------------------------- write */
.turn { width: 100%; max-width: 64rem; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: 1fr; justify-items: center; align-items: center; }
.turn:has(.pad--prompt:not([hidden])) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pad--prompt { margin: 0; width: 100%; padding: 0; rotate: -1.2deg; background: var(--pad); }
.pad--prompt img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.pad-cap { position: absolute; left: .8rem; bottom: -2rem; color: var(--on-blue-2); font-weight: 700; font-size: .95rem; }
.pad--entry .pad-cap { position: static; padding: .5rem .9rem .7rem; color: var(--ink); font-size: .9rem; background: var(--pad); }
.slip--write { max-width: 32rem; rotate: .8deg; }
.hand-area { resize: none; font-size: 1.65rem; line-height: 1.45; background-image: linear-gradient(transparent calc(100% - 1px), var(--print-soft) 0); background-size: 100% 2.4rem; border-bottom: 0; }
.write-row { display: flex; justify-content: space-between; align-items: center; margin: .3rem 0 .8rem; }
.chars { font-size: .8rem; font-weight: 700; color: var(--print); font-variant-numeric: tabular-nums; }
.sent-note { margin: 0; flex: 1 1 10rem; font-weight: 700; color: var(--stamp-dark); }

/* ---------------------------------------------------------------- draw */
.turn--draw { max-width: 80rem; justify-items: stretch; gap: 1.1rem; }
.slip--prompt { max-width: 48rem; justify-self: center; padding: 1rem 1.4rem .9rem; rotate: -.8deg; }
.slip--prompt .slip-kind { border-bottom: 2px solid var(--print); padding-bottom: .3rem; margin-bottom: .4rem; }
.prompt-text { margin: 0; color: var(--ink); font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.draw-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; }
.canvas-box {
  justify-self: center; width: 100%;
  max-width: min(900px, calc((100dvh - 14rem) * 1.5));
  aspect-ratio: 3 / 2;
  margin-top: 9px;
}
.canvas-box canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
body:has(.tool[data-tool="fill"].is-on) .canvas-box canvas { cursor: cell; }
.tools {
  display: flex; flex-direction: column; gap: .7rem; width: 12.5rem; padding: .9rem .8rem 1rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 1.85rem, rgba(70, 120, 190, .28) 1.85rem calc(1.85rem + 1px)) 0 1.6rem / 100% 100% no-repeat,
    var(--paper);
  border-top: 4px solid rgba(214, 72, 72, .7);
  box-shadow: var(--lift); rotate: .8deg; color: var(--print);
  --focus: var(--blue);
}
.tool-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.tool {
  flex: 1 1 calc(50% - .35rem); display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  min-height: 3.1rem; padding: .3rem; border: 2px solid transparent; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: transparent; color: var(--print);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 80%; font-size: .72rem; letter-spacing: .04em;
  transition: border-color .15s, color .15s;
}
.tool svg { width: 1.4rem; height: 1.4rem; }
.tool:hover { color: var(--blue); }
.tool.is-on { color: var(--ink); border-color: var(--ink); rotate: -3deg; }
.size {
  flex: 1; display: grid; place-items: center; min-height: 2.75rem; border: 2px solid transparent; border-radius: 50%;
  background: transparent; color: var(--print);
}
.size i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }
.size:hover { color: var(--blue); }
.size.is-on { color: var(--ink); border-color: var(--ink); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.swatch {
  aspect-ratio: 1; width: 100%; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(28, 45, 107, .35); background: var(--c);
  transition: transform .2s var(--ease), border-color .15s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { border-color: var(--paper); box-shadow: 0 0 0 2px var(--ink); transform: scale(1.1); }
.draw-foot { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin-top: .3rem; }
.draw-foot .stamp-btn { min-width: 0; width: 100%; }
.draw-foot .sent-note { flex: none; color: var(--stamp-dark); font-size: .9rem; }

/* ---------------------------------------------------------------- waiting */
.waitbox { max-width: 30rem; rotate: -.8deg; }
.wait-big { margin: 0 0 1rem; color: var(--ink); font-size: 1.7rem; line-height: 1.2; text-wrap: balance; }
.donelist { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.donelist li { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--print-soft); color: var(--ink); }
.donelist .av { width: 2.4rem; height: 2.4rem; }
.donelist .pname { font-size: 1.15rem; }
.donelist li.is-done .tag--sent { animation: stampdown .45s var(--ease) both; }
@keyframes stampdown { from { transform: scale(1.8); opacity: 0; } }
.donelist li.is-away { opacity: .6; }

/* ---------------------------------------------------------------- reveal */
.reveal { width: 100%; max-width: 54rem; display: flex; flex-direction: column; gap: 1.5rem; }
.albums { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem .2rem .6rem; scrollbar-width: thin; overscroll-behavior-x: contain; }
.album-tab {
  flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.9rem; padding: .25rem .8rem .25rem .3rem;
  border: 1.5px solid rgba(195, 205, 240, .3); border-radius: 999px; background: rgba(19, 32, 79, .6); color: var(--on-blue);
  transition: background-color .15s, border-color .15s;
}
.album-tab .av { width: 2.2rem; height: 2.2rem; color: var(--ink); }
.album-tab .hand { font-size: 1.02rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-tab.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.album-tab:disabled { opacity: .35; cursor: default; }
.album-h { color: var(--on-blue); font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1.2rem; }
.entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.entry { position: relative; }
.entry:nth-child(odd) { rotate: -1deg; }
.entry:nth-child(even) { rotate: .9deg; }
.entry.is-new { animation: setdown .7s var(--ease) both; }
@keyframes setdown { from { opacity: 0; translate: 0 -40px; rotate: -6deg; scale: 1.03; } }
.slip--entry { max-width: 36rem; margin-inline: auto; }
.entry-from { margin: .5rem 0 .3rem; display: flex; gap: .6rem; align-items: baseline; color: var(--ink); }
.entry-from .hand { font-size: 1.1rem; }
.entry-text { margin: 0; color: var(--ink); font-size: clamp(1.6rem, 4.4vw, 2.2rem); line-height: 1.25; overflow-wrap: anywhere; }
.lost { color: #4d4656; font-size: .8em; }
.pad--entry { margin: 9px 0 0; }
.pad--entry img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.pad-lost { aspect-ratio: 3 / 2; display: grid; place-items: center; font-size: 1.4rem; color: #4d4656; }
.entry--lost p { margin: 0; text-align: center; color: var(--on-blue-2); font-size: 1.2rem; }
.stampit {
  position: absolute; right: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .25rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: .3rem .55rem; border-radius: 999px;
  border: 1.5px solid var(--print-soft); background: rgba(255, 246, 224, .75); color: var(--print);
  font-weight: 900; font-variant-numeric: tabular-nums;
  transition: transform .2s var(--ease), background-color .15s;
}
.stampit svg { width: 1.3rem; height: 1.3rem; }
.stampit:hover { transform: rotate(-8deg) scale(1.08); }
.stampit.has, .stampit.pressed { background: var(--stamp); border-color: var(--stamp); color: var(--paper); }
.stampit.pressed { animation: stampdown .35s var(--ease); }
.pad--entry .stampit { bottom: auto; top: .7rem; }
.stampit:disabled { cursor: default; }
.stampit:disabled:hover { transform: none; }
.stampit:disabled:not(.has) { opacity: .4; }
.stampit.is-mine { box-shadow: 0 0 0 3px var(--hi); }
.stamp-hint { margin: 0; max-width: 34rem; color: var(--on-blue-2); font-size: .85rem; font-weight: 700; text-align: center; text-wrap: balance; }
.stamp-hint svg { display: inline-block; width: 1.05rem; height: 1.05rem; margin-right: .3rem; vertical-align: -.2em; color: var(--slip); }
.talkers span { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- the Best Of (2026-10-16): the most stamped of the whole game */
.album-tab--best { padding-left: .35rem; border-color: var(--stamp); }
.album-tab--best .best-badge { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--stamp); color: var(--paper); }
.album-tab--best .best-badge svg { width: 1.25rem; height: 1.25rem; }
.album-tab--best.is-on { border-color: var(--stamp); }
.best-h { margin-bottom: .3rem; }
.best-sub { margin: 0 0 1.8rem; font-family: var(--hand); font-weight: 700; font-size: 1.15rem; color: var(--on-blue-2); }
.best-sec + .best-sec { margin-top: 3.4rem; }
.best-sec > .sec-h { color: var(--slip); }
.best-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.6rem; }
.best-item { position: relative; }
.best-item:nth-child(odd) > .slip, .best-item:nth-child(odd) > .pad { rotate: -1deg; }
.best-item:nth-child(even) > .slip, .best-item:nth-child(even) > .pad { rotate: .9deg; }
.best-rank { margin: 0 0 .7rem; display: flex; align-items: center; gap: .8rem; }
.rank {
  --rank-ink: var(--aw, var(--stamp));
  display: inline-grid; place-items: center; min-width: 3.6rem; height: 3.6rem; padding: 0 .4rem; border-radius: 50%;
  background: var(--rank-ink); color: var(--paper); rotate: -8deg;
  box-shadow: inset 0 0 0 .2rem var(--rank-ink), inset 0 0 0 .32rem rgba(255, 246, 224, .85), 0 6px 14px -8px rgba(5, 10, 34, .8);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 72%; font-size: 1.35rem;
}
.best-item:nth-child(n + 2) .rank { background: var(--paper); color: var(--rank-ink); box-shadow: inset 0 0 0 .2rem var(--rank-ink, var(--stamp)), inset 0 0 0 .32rem rgba(255, 246, 224, .9); }
.best-votes { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem .25rem .55rem; border-radius: 999px; background: var(--paper); color: var(--print); font-weight: 800; font-size: .95rem; }
.best-votes svg { width: 1.15rem; height: 1.15rem; color: var(--aw, var(--stamp)); }
.best-votes b { font-size: 1.15rem; color: var(--aw, var(--stamp)); }
.best-where { margin: .9rem 0 0; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-stretch: 85%; color: var(--print); }
.best-ctx { margin: 1.4rem auto 0; max-width: 20rem; rotate: 1.5deg; }
.best-ctx img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.best-ctx .pad-cap { position: static; padding: .4rem .7rem .55rem; background: var(--pad); color: var(--ink); font-size: .82rem; }
.best-prompt { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; color: var(--on-blue); }
.best-prompt .lbl { color: var(--slip); }
.best-prompt .hand { font-size: 1.25rem; line-height: 1.3; }
.best-prompt--origin { margin-top: .35rem; opacity: .8; }
.best-prompt--origin .hand { font-size: 1.05rem; }
.best-empty { margin: 1rem 0; font-size: 1.35rem; line-height: 1.45; color: var(--on-blue); max-width: 36rem; }

/* ---------------------------------------------------------------- how to play (2026-10-16) */
.check--first { display: flex; flex-wrap: wrap; margin: .1rem 0 .9rem; color: var(--ink); }
.check--first .check-sub { flex-basis: 100%; padding-left: 1.75rem; margin-top: -.45rem; font-family: var(--hand); font-weight: 700; font-size: .98rem; color: var(--print); }
.sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.sec-row .sec-h { margin-bottom: .9rem; }
.how-btn { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.slip--how { max-width: 31rem; }
.slip--how.is-turn { animation: setdown .45s var(--ease) both; }
.slip--how .slip-title { margin: .2rem 0 .6rem; }
.how-body { margin: 0 0 1rem; color: var(--ink); font-size: 1.2rem; line-height: 1.45; min-height: 5.2em; }
.how-art { min-height: 9.5rem; display: grid; place-items: center; margin-bottom: .8rem; }
.how-dots { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; gap: .4rem; justify-content: center; }
.how-dots li { width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid var(--print); }
.how-dots li.is-past { background: var(--print-soft); }
.how-dots li.is-on { background: var(--stamp); border-color: var(--stamp); }
.mini-slip {
  position: relative; width: min(17rem, 100%); padding: .7rem .9rem .8rem; rotate: -2deg;
  background: #fde3ea; border: 1.5px solid var(--print-soft); box-shadow: 0 6px 14px -8px rgba(8, 14, 44, .6);
  display: flex; flex-direction: column; gap: .3rem;
}
.mini-slip b { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--print); border-bottom: 1.5px solid var(--print); padding-bottom: .2rem; }
.mini-slip i { font-family: var(--hand); font-style: normal; font-weight: 700; color: var(--ink); font-size: 1.15rem; line-height: 1.25; }
.mini-slip--sm { width: 9.5rem; rotate: 2deg; }
.mini-slip--sm i { font-size: 1rem; }
.mini-slip--stamp { padding-right: 3.6rem; }
.mini-slip--stamp .stampit { right: .5rem; bottom: .5rem; }
.mini-pad { width: min(15rem, 100%); aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--pad); border-top: 6px solid #a72c27; rotate: 1.5deg; box-shadow: 0 6px 14px -8px rgba(8, 14, 44, .6); }
.mini-pad--sm { width: 9rem; rotate: -2deg; }
.how-doodle { width: 80%; height: auto; }
.mini-row { display: flex; align-items: center; gap: .6rem; }
.mini-arrow { width: 2rem; height: 2rem; color: var(--print); }
.mini-arrow svg { width: 100%; height: 100%; }
.mini-best { display: flex; align-items: center; gap: .7rem; }
.reveal-foot {
  position: sticky; bottom: 0; z-index: 5;
  padding: .9rem 0 calc(.9rem + env(safe-area-inset-bottom));
  background: rgba(19, 32, 79, .96);
  box-shadow: 0 0 0 100vmax rgba(19, 32, 79, .96), 0 -1px 0 100vmax rgba(195, 205, 240, .16);
  clip-path: inset(-1px -100vmax 0);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.reveal-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.reveal-foot .wait-note { color: var(--on-blue-2); text-align: center; }
.reveal-foot .link-btn { color: var(--on-blue); }

/* ---------------------------------------------------------------- legal footer (2026-10-13: footer on the main menu only) */
.rm-foot {
  position: relative; z-index: 1; display: none; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
  padding: 0 1rem calc(1.4rem + env(safe-area-inset-bottom)); font-size: .78rem; color: var(--on-blue-2);
}
body[data-screen="menu"] .rm-foot { display: flex; }
body[data-screen="menu"] .screen { min-height: calc(100dvh - 3.4rem); }
.rm-foot a { color: inherit; text-decoration: none; }
.rm-foot a:hover { color: var(--on-blue); text-decoration: underline; text-underline-offset: .2em; }
.rm-foot .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }
.rm-foot > a { font-weight: 800; color: var(--on-blue); }

/* ---------------------------------------------------------------- sheets and toasts */
.slip--notice { max-width: 30rem; rotate: -1deg; }
.notice-body { margin: 0 0 1.2rem; color: var(--ink); font-weight: 600; }
.sheet {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1rem;
  background: rgba(10, 16, 44, .62); overscroll-behavior: contain;
  animation: fadein .2s ease both;
}
@keyframes fadein { from { opacity: 0; } }
.slip--sheet { max-width: 26rem; rotate: -.6deg; animation: setdown .45s var(--ease) both; }
.slip--sheet .slip-title { margin-bottom: 1rem; }
.toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 60;
  translate: -50% 1rem; opacity: 0; pointer-events: none; max-width: min(28rem, calc(100vw - 2rem));
  padding: .7rem 1.1rem; background: var(--paper); color: var(--ink); border-radius: .4rem; box-shadow: var(--lift);
  font-weight: 700; text-align: center;
  transition: opacity .25s, translate .35s var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1080px) {
  .lobby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lobby-people { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 880px) {
  .turn:has(.pad--prompt:not([hidden])) { grid-template-columns: 1fr; }
  .pad--prompt { max-width: 34rem; margin-bottom: 1.4rem; }
  .draw-wrap { grid-template-columns: 1fr; }
  .canvas-box { max-width: 100%; }
  .tools { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; rotate: 0deg; background: var(--paper); }
  .draw-foot { flex-basis: 100%; }
  .tool-group { flex-wrap: nowrap; }
  .tool { flex: 0 0 auto; min-width: 3.3rem; }
  .size { flex: 0 0 2.9rem; }
  .swatches { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .swatch { width: 2.3rem; min-height: 0; }
}
@media (max-width: 900px) {
  /* not enough room in the bar: the clock hangs just below it */
  .clock { top: calc(100% - .6rem); width: 5.2rem; height: 5.2rem; padding: .32rem; }
  .clock-face b { font-size: 1.8rem; }
  body.has-clock .screen { padding-top: calc(clamp(1rem, 4vw, 2.5rem) + 4.4rem); }
  .talkers { top: calc(100% + .35rem); }
}
@media (max-width: 640px) {
  .voice-word, .talk-word, .talk-key { display: none; }
  .voice-join { width: 2.5rem; padding: 0; }
  .talk-btn { width: 2.9rem; height: 2.9rem; padding: 0; justify-content: center; }
  .talk-btn svg { width: 1.35rem; height: 1.35rem; }
  .bar-end { gap: .35rem; }
  .voice { gap: .35rem; }
  .talkers { left: max(1rem, env(safe-area-inset-left)); right: auto; max-width: calc(50% - 3.8rem); font-size: .9rem; }
  .lobby { grid-template-columns: 1fr; }
  .lobby-people { grid-row: auto; }
  .bar { gap: .6rem; }
  .bar-mid { flex-direction: column; gap: 0; font-size: .78rem; line-height: 1.2; }
  .bar-brand { font-size: 1.05rem; }
  .bar-word { display: none; }
  .bar-turn { white-space: pre-line; }
  .bar-room b { letter-spacing: .08em; }
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
  .check-btn { font-size: 1.2rem; }
  .entries { gap: 1.8rem; }
  .award { min-height: 2.4rem; padding: .2rem .5rem .2rem .4rem; font-size: .7rem; }
  .award .aw-i { width: 1.1rem; height: 1.1rem; }
  .tool span { display: none; }
  .tool { min-height: 2.75rem; min-width: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* vm-mute room (2026-10-04): the site-wide mute button from /assets/menu.js sits in the top right corner. */
.bar{padding-right:calc(max(1rem, env(safe-area-inset-right)) + 52px)}

/* touch screens have no Space bar to hint at */
@media (pointer: coarse) { .talk-key { display: none; } }

/* ---------------------------------------------------------------- award stamps (2026-10-19, Micah)
   Five rubber stamps under every slip and drawing in the read back, each with its own ink pad. An
   unused stamp is an outline drawn in its ink; once anyone has stamped it the chip is inked solid, like
   the impression a rubber stamp leaves. Your own stamp gets the highlighter ring. */
.stamps { display: flex; flex-wrap: wrap; gap: .4rem .45rem; margin-top: 1rem; }
.award {
  --r: -1.4deg;
  display: inline-flex; align-items: center; gap: .32rem; min-height: 2.6rem; padding: .25rem .65rem .25rem .5rem;
  border: 1.5px dashed var(--aw); border-radius: .35rem; background: rgba(255, 246, 224, .6); color: var(--aw);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 78%; font-size: .78rem; letter-spacing: .05em; line-height: 1;
  rotate: var(--r);
  transition: rotate .3s var(--ease), background-color .15s, color .15s, scale .15s var(--ease);
}
.award:nth-child(even) { --r: 1.2deg; }
.award .aw-i { width: 1.25rem; height: 1.25rem; flex: none; }
.award .aw-n { font-style: normal; font-stretch: 100%; font-size: .95rem; font-variant-numeric: tabular-nums; }
.award .aw-n:empty { display: none; }
.award:hover:not(:disabled) { rotate: 0deg; background: var(--paper); border-style: solid; }
.award:active:not(:disabled) { scale: .94; }
.award.has {
  background: var(--aw); color: var(--paper); border: 1.5px solid var(--aw);
  box-shadow: inset 0 0 0 .14rem var(--aw), inset 0 0 0 .24rem rgba(255, 246, 224, .7);
}
.award.has:hover:not(:disabled) { background: var(--aw); }
.award.is-mine { outline: 3px solid var(--hi); outline-offset: 2px; }
.award:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.award.is-mine:focus-visible { outline-color: var(--blue); }
.award:disabled { cursor: default; }
.award:disabled:not(.has) { opacity: .42; }
.award.pressed { animation: stampdown .35s var(--ease); }
.pad-foot { padding: 0 .9rem .95rem; background: var(--pad); }
.pad-foot .stamps { margin-top: 0; }
.pad--entry .pad-cap { padding-bottom: .6rem; }
.stamps--demo { margin-top: .55rem; gap: .3rem; }
.stamps--demo .award { min-height: 1.9rem; padding: .15rem .4rem; font-size: .7rem; }
.stamps--demo .award .aw-i { width: 1.05rem; height: 1.05rem; }

/* the Best Of, one section per award: the inked stamp leads, the winners follow */
.best-toc { display: flex; flex-wrap: wrap; gap: .55rem .6rem; margin: -.6rem 0 2.2rem; }
.toc-stamp {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .3rem .8rem .3rem .55rem;
  border-radius: .35rem; background: var(--aw); color: var(--paper); text-decoration: none; rotate: -1.5deg;
  box-shadow: inset 0 0 0 .15rem var(--aw), inset 0 0 0 .26rem rgba(255, 246, 224, .75), 0 6px 14px -8px rgba(5, 10, 34, .8);
  font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 78%; font-size: .85rem; letter-spacing: .05em;
  transition: rotate .3s var(--ease), translate .2s var(--ease);
}
.toc-stamp:nth-child(even) { rotate: 1.3deg; }
.toc-stamp:hover { rotate: 0deg; translate: 0 -2px; }
.toc-stamp .aw-i { width: 1.2rem; height: 1.2rem; }
.best-sec { scroll-margin-top: calc(var(--bar-h) + 1rem); }
.award-h { color: var(--on-blue); align-items: center; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.award-badge {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; flex: none; border-radius: 50%; rotate: -8deg;
  background: var(--aw); color: var(--paper); box-shadow: 0 0 0 2px var(--paper), 0 6px 14px -6px rgba(5, 10, 34, .8);
}
.award-badge .aw-i { width: 1.55rem; height: 1.55rem; }

/* ---------------------------------------------------------------- one doodle each (2026-10-19, Micah) */
.av-pick.is-taken { cursor: not-allowed; }
.av-pick.is-taken input { cursor: not-allowed; }
.av-pick.is-taken .av { filter: grayscale(1); opacity: .38; }
.av-pick.is-taken:hover .av { transform: none; }
.av-gone {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -16deg; pointer-events: none;
  padding: .05rem .3rem; border: 1.5px solid var(--stamp-dark); border-radius: 2px; background: rgba(255, 246, 224, .85);
  color: var(--stamp-dark); font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 78%; font-size: .62rem; letter-spacing: .06em; line-height: 1.2;
}
.av-note { margin: .55rem 0 0; font-family: var(--hand); font-weight: 700; font-size: .98rem; color: var(--ink); }
.person .av-change {
  position: relative; grid-row: span 2; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink); transition: rotate .3s var(--ease);
}
.person .av-change .av { width: 2.9rem; height: 2.9rem; display: block; }
.person .av-change:hover { rotate: -8deg; }
.av-pen {
  position: absolute; right: -.25rem; bottom: -.15rem; width: 1.25rem; height: 1.25rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper);
}
.av-pen svg { width: .72rem; height: .72rem; }
.slip--doodles { max-width: 30rem; }
.slip--doodles .avatar-grid { margin-top: .2rem; }

/* ---------------------------------------------------------------- the colour wheel (2026-10-19, Micah)
   The last swatch is a rainbow ring around the ink you mixed. It opens a small cream card beside the
   tool sheet: hue round the wheel, white at the centre, a slider from dark to bright, a colour code,
   and the last few inks you mixed. */
.tools { position: relative; }
.swatch--mix {
  display: grid; place-items: center;
  background: conic-gradient(from 90deg, #ff3b30, #ffcc00, #34c759, #30b0c7, #2f6bff, #af52de, #ff2d78, #ff3b30);
  border-color: rgba(28, 45, 107, .35);
}
.swatch--mix i { display: block; width: 52%; height: 52%; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--paper); }
.swatch--mix[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.1); }
.wheel-pop {
  position: absolute; z-index: 12; right: calc(100% + 1rem); top: 7.5rem; width: 15.5rem;
  padding: .85rem .9rem 1rem; background: var(--paper); color: var(--ink); rotate: -1.6deg;
  border-top: 4px solid rgba(214, 72, 72, .7); box-shadow: var(--lift);
  animation: setdown .35s var(--ease) both;
  --focus: var(--blue);
}
.wheel-h, .wheel-lbl {
  margin: 0; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-stretch: 80%; color: var(--print);
}
.wheel-h { font-size: .85rem; border-bottom: 2px solid var(--print); padding-bottom: .3rem; margin-bottom: .6rem; }
.wheel-lbl { display: block; font-size: .7rem; margin-bottom: .3rem; }
.wheel { display: block; width: 100%; height: auto; aspect-ratio: 1; margin: 0 0 .75rem; border-radius: 50%; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 2px rgba(28, 45, 107, .3); }
.wheel:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 50%; }
.wheel-val {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.15rem; margin: 0 0 .8rem;
  border-radius: 999px; background: linear-gradient(90deg, #000, var(--full, #3699d9)); box-shadow: inset 0 0 0 1.5px rgba(28, 45, 107, .35); cursor: pointer;
}
.wheel-val::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 2px 6px rgba(8, 14, 44, .45); }
.wheel-val::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 2px 6px rgba(8, 14, 44, .45); }
.wheel-val:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wheel-row { display: flex; align-items: center; gap: .5rem; }
.mix-chip { width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; background: var(--c, #3699d9); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.mix-hex {
  width: 5.6rem; min-width: 0; padding: .2rem .1rem; border: 0; border-bottom: 2px solid var(--print); border-radius: 0; background: transparent;
  color: var(--ink); font-weight: 800; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.mix-hex:focus { outline: none; border-bottom-color: var(--blue); background: rgba(28, 45, 107, .06); }
.wheel-done { margin-left: auto; min-height: 2.5rem; padding: .3rem .85rem; }
.my-inks { margin-top: .85rem; padding-top: .6rem; border-top: 1px solid var(--print-soft); }
.my-inks-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.my-inks-row .swatch { width: 1.9rem; height: 1.9rem; flex: none; }

/* ---------------------------------------------------------------- the Water cooler: chat (2026-10-19, Micah)
   Words go on pink slips (the Paper Means Author rule), so the chat is a tall pad of While You Were Out
   slips: docked on the left of the desk on wide screens, a drawer from the left on narrow ones. */
.chat {
  position: fixed; z-index: 15; left: 0; top: var(--bar-h); bottom: 0; width: var(--chat-w);
  padding: .9rem .4rem calc(.9rem + env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left));
  display: flex; pointer-events: none;
}
.chat-pad {
  pointer-events: auto; flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 1.15rem 1rem .85rem; rotate: -.5deg;
}
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; border-bottom: 2px solid var(--print); padding-bottom: .45rem; }
.chat-title { margin: .1rem 0 0; font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 68%; font-size: 1.75rem; line-height: .95; color: var(--print); }
.chat-close { display: none; width: 2.6rem; height: 2.6rem; place-items: center; margin: -.3rem -.35rem 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--print); }
.chat-close svg { width: 1.2rem; height: 1.2rem; }
.chat-close:hover { background: rgba(156, 29, 69, .1); color: var(--blue); }
.chat-empty { margin: .9rem 0 0; color: var(--ink); font-size: 1.05rem; line-height: 1.35; }
.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: .2rem .25rem .2rem 0;
  scrollbar-width: thin; scrollbar-color: var(--print-soft) transparent; overscroll-behavior: contain;
}
.chat-line { display: grid; grid-template-columns: 2.1rem 1fr; gap: .55rem; align-items: start; padding: .55rem 0 .5rem; border-bottom: 1px solid var(--print-soft); }
.chat-line .av { width: 2.1rem; height: 2.1rem; color: var(--ink); margin-top: .1rem; }
.chat-body { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.chat-who { display: flex; align-items: baseline; gap: .45rem; font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: 80%; font-size: .74rem; letter-spacing: .07em; color: var(--print); }
.chat-who time { font-style: normal; font-weight: 700; font-stretch: 100%; letter-spacing: .02em; text-transform: none; font-size: .7rem; font-variant-numeric: tabular-nums; opacity: .85; }
.chat-text { color: var(--ink); font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.chat-line.is-mine .chat-who { color: var(--blue); }
.chat-line:last-child { animation: settle .4s var(--ease) both; }
.chat-form { display: flex; align-items: flex-end; gap: .35rem; margin-top: .5rem; padding-top: .55rem; border-top: 2px solid var(--print); }
.chat-input {
  flex: 1; min-width: 0; border: 0; border-bottom: 2px solid var(--print-soft); border-radius: 0; background: transparent;
  color: var(--ink); padding: .3rem .1rem .25rem; font-size: 1.12rem; line-height: 1.3;
}
.chat-input::placeholder { color: rgba(28, 45, 107, .75); }
.chat-input:focus { outline: none; border-bottom-color: var(--blue); background: rgba(255, 255, 255, .25); }
.chat-send { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--print); transition: color .15s, background-color .15s, rotate .3s var(--ease); }
.chat-send svg { width: 1.35rem; height: 1.35rem; }
.chat-send:hover { color: var(--blue); background: rgba(255, 255, 255, .3); rotate: -10deg; }
.chat-btn { position: relative; }
.chat-badge {
  position: absolute; right: -.35rem; top: -.35rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--stamp); color: var(--paper); box-shadow: 0 0 0 2px var(--blue-deep);
  font-weight: 900; font-size: .7rem; font-variant-numeric: tabular-nums; animation: stampdown .35s var(--ease);
}
.chat-scrim { display: none; }

/* wide screens: the Water cooler stays open on the left and the game moves over to make room */
@media (min-width: 1180px) {
  .chat-btn { display: none; }
  body.in-room main { margin-left: var(--chat-w); }
  body.in-room .clock:not(.clock--demo) { left: calc(50% + var(--chat-w) / 2); }
  body.in-room .toast { left: calc(50% + var(--chat-w) / 2); }
}
@media (min-width: 1180px) and (max-width: 1520px) {
  body.in-room .lobby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.in-room .lobby-people { grid-column: 1 / -1; grid-row: 2; }
}
/* narrow screens: a drawer from the left, opened with the Chat button in the bar */
@media (max-width: 1179.98px) {
  .chat { width: min(22rem, 90vw); padding-right: 0; translate: -105% 0; visibility: hidden; transition: translate .35s var(--ease), visibility 0s linear .35s; }
  .chat-pad { rotate: 0deg; box-shadow: 0 20px 50px -10px rgba(5, 10, 34, .85); }
  body.chat-open .chat { translate: 0 0; visibility: visible; transition: translate .35s var(--ease); }
  .chat-close { display: grid; }
  .chat-scrim { display: block; position: fixed; inset: var(--bar-h) 0 0; z-index: 14; background: rgba(10, 16, 44, .5); opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.chat-open .chat-scrim { opacity: 1; pointer-events: auto; }
}
@media (max-width: 880px) {
  /* the colour wheel card sits over the bottom of the screen instead of beside the tools */
  .wheel-pop { position: fixed; z-index: 45; left: 50%; right: auto; top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: -50% 0; rotate: 0deg; width: min(17rem, calc(100vw - 2rem)); box-shadow: 0 20px 50px -10px rgba(5, 10, 34, .85); }
  .wheel { width: 72%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .chat-pad { padding: 1rem .85rem .7rem; }
}

/* phones: the Chat button joins the bar, so the name stacks and the buttons get a little narrower */
@media (max-width: 640px) {
  body.in-room .bar-brand { display: flex; flex-direction: column; font-size: 1rem; line-height: .86; }
  body.in-room .bar-brand span + span { margin-left: .35em; }
  body.in-room .bar-end { gap: .3rem; }
  body.in-room .bar-btn, body.in-room .voice-join { width: 2.35rem; height: 2.35rem; }
  body.in-room .talk-btn { width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 880px) {
  /* a rotated tool sheet would trap the fixed colour wheel card inside it */
  .tools { rotate: none; }
}