/* =====================================================================
   Ink Drop: sketchbook look. Ink on paper sheets laid on a kraft desk:
   hand-inked borders, a red pen for actions, highlighter for selections.
   ===================================================================== */

/* Fonts are served from this site (latin subset), so visitors never contact a
   third party. Licenses: fonts/OFL-*.txt and fonts/LICENSE-PermanentMarker.txt. */
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/courier-prime-400.woff2) format("woff2");
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/courier-prime-700.woff2) format("woff2");
}
@font-face {
  font-family: Kalam; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/kalam-400.woff2) format("woff2");
}
@font-face {
  font-family: Kalam; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/kalam-700.woff2) format("woff2");
}
@font-face {
  font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/permanent-marker-400.woff2) format("woff2");
}

:root {
  --desk: #cdb994;
  --paper: #fbf8ef;
  --card-paper: #fffdf6;
  --ink: #1e2a4a;
  --muted: #776f63;               /* pencil */
  --line: rgba(30, 42, 74, .22);  /* faint ink */
  --rule: rgba(70, 110, 190, .14);/* notebook ruling */
  --accent: #cf3b2b;              /* red pen */
  --accent-dark: #a82d20;
  --accent-ink: #fffdf6;
  --ok: #2f7d43;
  --hl: rgba(255, 212, 60, .62);  /* highlighter */
  --hl-soft: rgba(255, 212, 60, .32);
  --tape: rgba(246, 232, 178, .78);
  /* Hand-drawn corners: uneven radii read as a pen line, not a machine box. */
  --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --wobble-2: 14px 225px 14px 255px / 255px 14px 225px 14px;
  --sheet-shadow: 0 1px 0 rgba(60, 40, 10, .18), 2px 3px 0 rgba(60, 40, 10, .10);
  --hand: Kalam, "Comic Sans MS", cursive;
  --marker: "Permanent Marker", Kalam, cursive;
  --type: "Courier Prime", ui-monospace, Consolas, monospace;
  /* kept for the stats page */
  --card-shadow: var(--sheet-shadow);
  --radius: 4px;
  /* The site-wide pointer: the same little arrow players draw with, as an image so it's instant
     (the OS renders it, no lag) and works over every element. The tip is the hotspot (2 2).
     In a room, game.js swaps in your own arrow in your colour (setRoomCursor). */
  --ink-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30'%3E%3Cpath d='M2 2 L2.5 22.4 L7.5 17.8 L11.8 26.7 L15.2 25 L11.1 16.4 L17.8 15.9 Z' fill='%23fbf8ef' stroke='%231e2a4a' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 2 2, auto;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { cursor: var(--ink-cursor); }   /* the drawn arrow everywhere; the match canvas overrides it with your live colour one */
input:not([type=range]):not([type=checkbox]), textarea { cursor: text; }   /* keep the I-beam where you type */
body {
  background-color: var(--desk);
  /* Kraft grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 16px/1.35 var(--hand);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.error { color: var(--accent); min-height: 1.4em; margin: 6px 0 0; font-weight: 700; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
code { font-family: var(--type); font-size: .9em; }

/* Section heads: marker with a highlighter swipe behind. */
h3 {
  margin: 20px 0 10px;
  font: 400 21px/1.1 var(--marker);
  letter-spacing: .3px;
}
h3::after { content: ""; display: block; width: 46px; height: 7px; margin-top: 2px; background: var(--hl); border-radius: var(--wobble); transform: skewX(-12deg); }
h3:first-child { margin-top: 0; }
h3 .muted { font: 700 15px var(--type); letter-spacing: 0; }
h4 { margin: 16px 0 8px; font: 700 16px var(--hand); }

/* ---------- Controls */
button, input, select { font: inherit; color: inherit; }
button {
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: var(--wobble);
  padding: 6px 14px 4px;
  cursor: var(--ink-cursor);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  transition: transform .08s, background-color .15s, box-shadow .12s;
}
button:hover:not(:disabled) { background: var(--hl-soft); transform: rotate(-.6deg); }
button:active:not(:disabled) { transform: translate(1px, 1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
/* The red pen: a stamped action with a hard ink offset. */
button.primary {
  background: var(--accent);
  border-color: var(--ink);
  color: var(--accent-ink);
  box-shadow: 3px 3px 0 var(--ink);
  letter-spacing: .4px;
}
button.primary:hover:not(:disabled) { background: var(--accent-dark); }
button.primary:active:not(:disabled) { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
button.big { padding: 10px 18px 8px; font-size: 19px; width: 100%; }
button.link {
  border: none; background: none; padding: 2px 0; box-shadow: none;
  color: var(--muted); font-weight: 400; text-decoration: underline; text-decoration-style: wavy;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
button.link:hover:not(:disabled) { background: none; transform: none; color: var(--accent); }

/* Fields are written on a line, not boxed. */
input, select {
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: 6px 2px 4px;
  width: 100%;
  font-size: 19px;
  outline: none;
}
input::placeholder { color: var(--muted); }
input:focus { border-bottom-color: var(--accent); background: var(--hl-soft); }
select {
  cursor: var(--ink-cursor);
  appearance: none;
  padding-right: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 2c3 1 6 5 6 6 1-2 3-5 6-7' fill='none' stroke='%231e2a4a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 4px center no-repeat;
}
select:focus { border-bottom-color: var(--accent); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ink); }
input[type=range] { border: none; padding: 0; background: none; accent-color: var(--ink); }
input[type=range]:focus { background: none; }
input[type=number] { font-family: var(--type); font-weight: 700; }

/* Labels read as margin notes in pencil. */
.field { display: block; font-weight: 700; font-size: 15px; color: var(--muted); margin: 0 0 14px; }
.field input, .field select { margin-top: 2px; font-weight: 400; color: var(--ink); }
.row { display: flex; gap: 10px; }
.map-versions { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; }
.map-versions button { padding: 2px 10px 0; font-size: 14px; min-height: 0; }
.map-versions button.sel { border: 2.5px solid var(--ink); background: var(--hl); }
.map-versions button.missing { border-style: dashed; opacity: .6; }
.row > * { flex: 1; }

/* A sheet of paper on the desk. */
.card {
  position: relative;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: var(--sheet-shadow);
  padding: 24px;
}
/* A strip of tape holding the sheet down. */
.taped::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 118px; height: 28px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: var(--tape);
  box-shadow: 0 1px 1px rgba(60, 40, 10, .12);
  clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%);
}
/* Each sheet in the room is taped a little differently. */
.lobby-grid > .taped:nth-child(2)::before { transform: translateX(-50%) rotate(2deg); left: 40%; }
/* Notebook ruling, for sheets that hold writing. */
.ruled {
  background-image:
    linear-gradient(90deg, transparent 30px, rgba(207, 59, 43, .28) 30px, rgba(207, 59, 43, .28) 31.5px, transparent 31.5px),
    linear-gradient(transparent 31px, var(--rule) 31px, var(--rule) 32px);
  background-size: 100% 100%, 100% 32px;
}

/* ---------- Home: an open sketchbook on the desk */
#home { min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(50px, 9vh, 96px) 22px 14px; }   /* anchored to the top: tabs stay put when pages differ in height */
.book {
  position: relative;
  width: min(1020px, 100%);
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  background: var(--paper);
  border-radius: 3px;
  /* The pages under this one. */
  box-shadow: 0 1px 0 rgba(60, 40, 10, .2), 3px 4px 0 #f3eddc, 4px 5px 0 rgba(60, 40, 10, .22),
    7px 8px 0 #ece4cf, 8px 9px 0 rgba(60, 40, 10, .25), 12px 18px 26px rgba(60, 40, 10, .28);
}
/* The wire binding down the middle. */
.book::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: calc(1.08 / 2.08 * 100%);
  width: 34px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='6' cy='17' r='3' fill='%23c8bea6'/%3E%3Ccircle cx='28' cy='17' r='3' fill='%23c8bea6'/%3E%3Cpath d='M6 17C6 9 28 9 28 17' fill='none' stroke='%231e2a4a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y center top;
  pointer-events: none;
}
.book-left {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 44px 26px 36px;
  border-radius: 3px 0 0 3px;
  /* Graph paper, like the game's boards. */
  background-image:
    linear-gradient(rgba(70, 110, 190, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 110, 190, .13) 1px, transparent 1px),
    linear-gradient(90deg, transparent 88%, rgba(60, 40, 10, .07));
  background-size: 24px 24px, 24px 24px, 100% 100%;
}
.logo { font: 400 clamp(52px, 8vw, 84px)/.95 var(--marker); margin: 0; letter-spacing: 1px; transform: rotate(-2deg); transform-origin: left center; }
.logo span { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 90%, transparent 90%); padding: 0 6px; }
.tagline { color: var(--muted); margin: 12px 0 0; font-size: 19px; }
#home-doodle { display: block; width: 100%; aspect-ratio: 7 / 5; margin-top: auto; padding-top: 10px; }
/* Your rank, stuck on the page. */
.rank-note {
  position: absolute;
  top: 112px; right: 34px;
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 12px 5px;
  border: none; border-radius: 0;
  background: #ffe88a;
  box-shadow: 1px 2px 3px rgba(60, 40, 10, .25);
  transform: rotate(4deg);
  font-size: 14px; font-weight: 400; line-height: 1.1;
}
.rank-note b { font: 700 22px var(--type); }
.rank-note:hover:not(:disabled) { background: #ffe88a; transform: rotate(1deg); }
/* A page that isn't written yet. */
.soon-note {
  width: fit-content;
  margin: 28px auto 0;
  padding: 16px 24px 12px;
  background: #ffe88a;
  box-shadow: 1px 2px 3px rgba(60, 40, 10, .25);
  transform: rotate(-3deg);
  font: 400 26px/1 var(--marker);
}

.book-right {
  position: relative;
  padding: 26px 34px 26px 52px;
  border-radius: 0 3px 3px 0;
  background-image:
    linear-gradient(transparent 31px, var(--rule) 31px, var(--rule) 32px),
    linear-gradient(90deg, rgba(60, 40, 10, .07), transparent 12%);
  background-size: 100% 32px, 100% 100%;
}
/* Index tabs along the top of the page: one more tab, one more page. */
.book-tabs { position: absolute; left: 52px; bottom: 100%; display: flex; gap: 4px; }
.book-tabs button {
  border: 2px solid var(--ink); border-bottom: none; border-radius: 9px 12px 0 0;
  padding: 7px 16px 3px; font: 400 18px var(--marker); letter-spacing: .4px;
  background: #e6dcc3; color: #655d52; box-shadow: none;
}
.book-tabs button:nth-child(2) { border-radius: 12px 8px 0 0; }
.book-tabs button:hover:not(:disabled) { background: var(--hl); transform: translateY(-2px); }
.book-tabs button[aria-selected="true"], .book-tabs button[aria-selected="true"]:hover:not(:disabled) {
  background: var(--paper); color: var(--ink); transform: none; padding-bottom: 6px; margin-bottom: -3px;
}
.book-page { min-height: 400px; }
.how { margin: 0 0 16px; padding-left: 24px; font-size: 18px; }
.how li { margin-bottom: 10px; }
.how li::marker { font: 700 15px var(--type); color: var(--accent); }
#page-how h3 { margin-top: 16px; }
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; color: var(--muted); font-size: 15px; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='4'%3E%3Cpath d='M0 2c5-2 10 2 20 0s15 2 20 0' fill='none' stroke='%23776f63' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center; height: 4px; }
.play-ways { flex-wrap: wrap; margin-bottom: 18px; }
.play-ways button { flex: 1 1 150px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.play-ways button[aria-expanded="true"], .play-ways button[aria-expanded="true"]:hover:not(:disabled) { background: var(--hl); color: var(--ink); }
#code { text-transform: uppercase; letter-spacing: 10px; font: 700 22px var(--type); text-align: center; }
#join { flex: 0 0 96px; width: auto; }

/* ---------- Lobby */
#lobby { padding: 28px 16px; }
.lobby-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 22px;
  align-items: start;
}
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.code { font: 700 38px/1 var(--type); letter-spacing: 8px; }
#leave { display: block; margin: 12px auto 0; }

/* Player lists: one line each, like a written roster. */
.plist { list-style: none; padding: 0; margin: 0 0 10px; }
.plist li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px;
  border-bottom: 1.5px dashed var(--line);
}
.plist li:last-child { border-bottom: none; }
/* An ink blot in the player's color. */
.plist .dot { width: 15px; height: 15px; border-radius: 52% 48% 55% 45% / 45% 55% 48% 52%; flex: none; box-shadow: 0 0 0 1.5px var(--ink); }
.plist .pname { font-weight: 700; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.plist .pname .small { font-weight: 400; font-size: 14px; }
.plist li.me .nm { background: linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 92%, transparent 92%); }
/* Notes beside a name: host is a rubber stamp, the rest are pencil. */
.plist .tag { font-size: 14px; color: var(--muted); white-space: nowrap; }
.plist .tag.host {
  font: 700 11px var(--type); text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); border: 1.5px solid var(--accent); border-radius: 3px;
  padding: 1px 5px 0; transform: rotate(-5deg); opacity: .85;
}
.plist .tag.ok { color: var(--ok); font-weight: 700; }
.plist .tag.off { text-decoration: line-through; }
.plist .score { font: 700 22px var(--type); min-width: 1.6em; text-align: right; }
.plist.compact li { padding: 6px 2px; }

/* Pens: index cards on the sheet, a red rule under the name. */
.pens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pen {
  position: relative;
  text-align: left;
  border: none;
  background: var(--card-paper);
  box-shadow: 0 0 0 1px rgba(60, 40, 10, .13), 1px 2px 0 rgba(60, 40, 10, .12);
  border-radius: 2px;
  padding: 8px 14px 10px;
  font-weight: 400;
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.25;
}
.pen:hover:not(:disabled) { background: #fffbe9; transform: rotate(-.8deg); }
.pen b {
  font: 400 18px/1.2 var(--marker);
  margin: 0 -14px 5px; padding: 0 14px 4px;
  border-bottom: 1.5px solid rgba(207, 59, 43, .45);
}
.pen .pt { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.25; }
.pen .pt::before { content: "•"; position: absolute; left: 2px; }
.pen.sel { box-shadow: 0 0 0 2.5px var(--ink), 3px 3px 0 var(--ink); transform: rotate(-1deg); }
.pen.sel b { background: linear-gradient(transparent 32%, var(--hl) 32%, var(--hl) 76%, transparent 76%); }
.pen .who { display: flex; gap: 4px; min-height: 12px; margin-top: 4px; }
.pen .who span { width: 12px; height: 12px; border-radius: 52% 48% 55% 45% / 45% 55% 48% 52%; box-shadow: 0 0 0 1.2px var(--ink); }

.legend { display: grid; gap: 8px; }
.legend div { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.2; }
/* Ink swatches as short brush strokes. */
.legend i { width: 30px; height: 7px; border-radius: var(--wobble); flex: none; transform: rotate(-4deg); }

/* ---------- Game */
#game { height: 100%; display: flex; }
#stage { flex: 1; position: relative; min-width: 0; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
/* The side panel is a notepad. */
#hud {
  width: 360px;   /* wide enough for name, pen, status and score side by side */
  flex: none;
  background: var(--paper);
  box-shadow: -1px 0 0 rgba(60, 40, 10, .18), -3px 0 0 rgba(60, 40, 10, .06);
  padding: 18px 18px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phase-box { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#phase-name { font: 400 30px/1 var(--marker); }
#round-name { margin-top: 4px; }
/* Reactions: the sticker buttons (drawn on small canvases) */
.react-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.react-row button { padding: 2px; margin: 0; min-width: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.react-row canvas { width: 100%; max-width: 40px; height: auto; pointer-events: none; }
.react-row button:hover canvas { transform: scale(1.12) rotate(-4deg); }
#round-name .wear { color: var(--accent); font-weight: 700; }
/* Timer: typed digits inside a pen circle. */
#timer {
  font: 700 26px/1 var(--type);
  min-width: 62px; height: 54px;
  display: grid; place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 52% 48% 46% 54% / 55% 45% 55% 45%;
  transform: rotate(-4deg);
}
#timer:empty { visibility: hidden; }
#timer.urgent { color: var(--accent); border-color: var(--accent); }
/* Last 3 seconds of drawing: the timer fills red and throbs once a second */
#timer.final { color: var(--accent-ink); background: var(--accent); border-color: var(--accent-dark); animation: timer-throb 1s ease-out infinite; }
@keyframes timer-throb { 0% { transform: scale(1.3) rotate(-4deg); } 60% { transform: scale(1); } }
.label { font-weight: 700; font-size: 15px; color: var(--muted); margin: 8px 0 6px; }
.label .muted { font: 700 13px var(--type); }

/* Choice groups: pencil outlines; the pick gets inked and highlighted. */
.btn-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.btn-group button {
  padding: 6px 2px 3px; font-size: 14px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1.5px solid var(--line);
  border-radius: var(--wobble-2);
}
.btn-group button:nth-child(even) { border-radius: var(--wobble); }
.btn-group button svg { width: 22px; height: 22px; }
#start.on { background: var(--hl); color: var(--ink); border-color: var(--ink); }
.btn-group button.sel { border: 2.5px solid var(--ink); background: var(--hl); }
.btn-group.inks button i { width: 24px; height: 7px; border-radius: var(--wobble); display: block; margin: 6px 0 4px; transform: rotate(-5deg); }
#polarity { grid-template-columns: 1fr 1fr; margin-top: 6px; }
#polarity button svg { width: 32px; height: 16px; }

/* Meters: a pencil outline filled with ink. */
.meter { height: 14px; border: 2px solid var(--ink); border-radius: var(--wobble); overflow: hidden; background: rgba(255, 255, 255, .5); }
.meter > div {
  height: 100%; width: 0; background: var(--ink); transition: width .08s;
  background-image: repeating-linear-gradient(-55deg, transparent 0 5px, rgba(255, 255, 255, .12) 5px 7px);
}
#boop-fill { background-color: var(--accent); }
#stroke-info { margin: 6px 0 10px; min-height: 1.2em; }
#draw-hint { margin: 8px 0 0; }
.hud-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
#hud-code { font-family: var(--type); letter-spacing: 1px; }
/* The side panel scrolls instead of squeezing its items on top of each other. */
#hud > * { flex-shrink: 0; }

/* Round banner: a sticky note slapped on the board. */
#banner {
  position: absolute;
  left: 50%; top: 34%;
  transform: translate(-50%, -50%) rotate(-2deg) scale(.96);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  background: #fff1a1;
  padding: 12px 28px 14px;
  box-shadow: 0 1px 0 rgba(60, 40, 10, .2), 3px 5px 0 rgba(60, 40, 10, .12);
}
#banner.show { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
#banner-title { font: 400 42px/1.05 var(--marker); }
#banner-sub { font-weight: 700; font-size: 17px; }

/* ---------- Overlay + toast */
.overlay { position: fixed; inset: 0; background: rgba(30, 42, 74, .38); display: grid; place-items: center; padding: 16px; z-index: 10; }
.go-panel > .muted { font-size: 16px; }
.go-winner { font: 400 42px/1.1 var(--marker); margin: 2px 0 10px; overflow-wrap: anywhere; }
.go-replay { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 12px; }
.go-panel .big { width: 100%; }
@media (max-width: 760px) { .go-winner { font-size: 30px; margin-bottom: 6px; } }

#toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) rotate(-1deg);
  background: var(--ink); color: var(--paper); padding: 9px 18px 7px; border-radius: var(--wobble);
  font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20;
  box-shadow: 3px 3px 0 rgba(30, 42, 74, .25);
}
#toast.show { opacity: 1; }

/* Folded sections */
details summary { cursor: var(--ink-cursor); font-weight: 700; color: var(--muted); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; font-family: var(--type); color: var(--accent); }
details[open] summary::before { content: "– "; }

/* ---------- Room page: compact settings row */
/* Each setting: its name on top, its value in an inked box underneath. */
.settings-row { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: flex-start; }
.settings-row .field { margin-bottom: 16px; }
.setting { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.setting > button, .setting > input { margin-top: 0; }
#target, #draw-time, #drop-time {
  width: 72px; text-align: center;
  border: 2px solid var(--ink); border-radius: var(--wobble-2);
  padding: 6px 8px 4px; font: 700 16px/1.25 var(--hand); color: var(--ink);
  -moz-appearance: textfield;
}
#target::-webkit-outer-spin-button, #target::-webkit-inner-spin-button,
#draw-time::-webkit-outer-spin-button, #draw-time::-webkit-inner-spin-button,
#drop-time::-webkit-outer-spin-button, #drop-time::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#target:focus, #draw-time:focus, #drop-time:focus { background: var(--hl-soft); border-color: var(--accent); }
#target:disabled, #draw-time:disabled, #drop-time:disabled { opacity: .55; }
#lobby-hint { margin: 10px 0 0; }
#lobby-hint:empty { display: none; }
.btn-group.seg { grid-template-columns: 1fr 1fr; margin-top: 4px; }
.btn-group.seg button { font-size: 15px; padding: 6px 4px 4px; }

/* ---------- Narrow screens */
@media (max-width: 760px) {
  .lobby-grid { grid-template-columns: 1fr; }
}
/* Narrow screens stack the board above the panel, except a phone held sideways (board beside it). */
@media (max-width: 760px) and (orientation: portrait), (max-width: 760px) and (pointer: fine) {
  #game { flex-direction: column; }
  #stage { flex: 1 1 60%; min-height: 360px; }
  #hud { width: 100%; box-shadow: 0 -1px 0 rgba(60, 40, 10, .18); flex: 0 0 auto; max-height: 45%; }
}

/* ---------- Map editor */
.ed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ed-head a { color: var(--muted); }
.ed-title { margin: 0; font: 400 22px var(--marker); white-space: nowrap; }
.ed-head .small { white-space: nowrap; }
.ed-tools { grid-template-columns: repeat(4, 1fr); }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 8px 0 0; }
.check input { width: auto; }
#tool-hint { margin: 6px 0 0; min-height: 2.6em; }
#test-summary:empty { display: none; }
#test-summary { background: var(--card-paper); box-shadow: 0 0 0 1px rgba(60, 40, 10, .13); padding: 8px 10px; font-family: var(--type); font-size: 12px; }
#test-summary .counts { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 700; margin-bottom: 4px; }
#test-summary .counts span { display: inline-flex; align-items: center; gap: 5px; }
#test-summary .counts i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); }
#test-summary .warn { color: var(--accent); }
#status.err { color: var(--accent); }
#coords { position: absolute; left: 12px; bottom: 8px; font-family: var(--type); font-size: 12px; pointer-events: none; }
.ed-help { font-size: 15px; }
.ed-help ul { padding-left: 18px; margin: 8px 0 0; }
.ed-help li { margin-bottom: 5px; }
.size-inputs { margin-top: 8px; }
.size-inputs label { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.size-inputs input { padding: 4px 2px; font-size: 16px; }
/* Editor: the selected bucket's sizes */
.bucket-edit { background: var(--card-paper); box-shadow: 0 0 0 1px rgba(60, 40, 10, .13), 1px 2px 0 rgba(60, 40, 10, .1); padding: 8px 12px; margin-bottom: 6px; }
.bucket-head { justify-content: space-between; align-items: center; margin: 0 0 4px; }
.zone-owner { margin-top: 4px; }
.zone-owner i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.2px var(--ink); margin-right: 4px; }
.bk-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 16px; }
.bk-name i { width: 13px; height: 13px; border-radius: 52% 48% 55% 45% / 45% 55% 48% 52%; display: inline-block; box-shadow: 0 0 0 1.2px var(--ink); }
.slider { display: grid; grid-template-columns: 60px 1fr 46px; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); margin: 4px 0; }
.slider output { font: 700 12px var(--type); text-align: right; color: var(--ink); }
#bucket-hint { margin: 0 0 6px; }
#bucket-hint:empty { display: none; }
#bucket-hint.warn { color: var(--accent); }
#bucket-even { padding: 4px 8px 2px; font-size: 14px; }
.modes button { padding: 4px 6px 2px; font-size: 13px; }
#modes-hint { margin: 4px 0 6px; }
#modes-hint.warn { color: var(--accent); }

/* ---------- Stats page */
.stats-page { min-height: 100%; }
.screen-center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.gate-card { width: min(390px, 100%); }
.small-logo { font-size: 46px; text-align: center; transform: none; }
/* The ink drop under the title. */
.small-logo::after {
  content: "";
  display: block;
  width: 15px; height: 15px;
  margin: 14px auto 0;
  background: var(--ink);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}
#dash { max-width: 1180px; margin: 0 auto; padding: 28px 16px 48px; display: grid; gap: 18px; }
#content { display: grid; gap: 18px; }
.stats-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.stats-title { margin: 0; font: 400 32px var(--marker); }
.stats-head p { margin: 4px 0 0; max-width: 640px; }
.stats-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stats-actions button { padding: 4px 12px 2px; font-size: 14px; }
.filters { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 20px; }
.filters label { font-size: 15px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.filters select { width: auto; padding: 2px 24px 2px 2px; font-size: 16px; color: var(--ink); }
.card h2 { margin: 0 0 4px; font: 400 22px var(--marker); }
.card > p.small { margin: 0 0 12px; max-width: 820px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.tile { background: var(--card-paper); box-shadow: var(--sheet-shadow); padding: 12px 16px; }
.tile:nth-child(odd) { transform: rotate(-.6deg); }
.tile:nth-child(even) { transform: rotate(.5deg); }
.tile .v { font: 700 28px/1.1 var(--type); }
.tile .k { font-size: 14px; color: var(--muted); margin-top: 4px; }

.tbl-wrap { overflow-x: auto; margin-bottom: 14px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 15px; }
.tbl caption { text-align: left; font-weight: 700; padding: 10px 0 6px; font-size: 16px; }
.tbl caption span { font-weight: 400; color: var(--muted); }
.tbl th { text-align: left; font-weight: 700; color: var(--muted); font-size: 14px; padding: 6px 10px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 6px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--type); font-size: 13px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .dot { display: inline-block; width: 11px; height: 11px; border-radius: 52% 48% 55% 45% / 45% 55% 48% 52%; box-shadow: 0 0 0 1px var(--ink); margin-right: 6px; vertical-align: -1px; }
.tbl .swatch { display: inline-block; width: 20px; height: 6px; border-radius: var(--wobble); margin-right: 7px; vertical-align: 2px; transform: rotate(-4deg); }
.ci { color: var(--muted); font-size: 11px; margin-left: 4px; }
.low { color: var(--muted); }
.rate { min-width: 150px; }
.track { position: relative; height: 7px; background: var(--rule); border-radius: var(--wobble); margin-top: 4px; }
.track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); opacity: .7; border-radius: var(--wobble); }
.track b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent); }
.delta-up { background: rgba(58, 110, 200, .14); }
.delta-down { background: rgba(207, 59, 43, .14); }
.legend-note { font-size: 14px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin: -4px 0 10px; }
.legend-note span { display: inline-flex; align-items: center; gap: 6px; }
.legend-note i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.flow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 26px; }
.flow-grid div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1.5px dashed var(--line); padding: 6px 0; font-size: 16px; }
.flow-grid b { font-family: var(--type); }

/* Room page: sheets laid a little askew on the desk. */
.lobby-grid > .card:nth-child(1) { transform: rotate(-.5deg); }
/* In-game roster: the highlight already marks you, so the name keeps its room. */
.plist.compact .pname > .muted:not(.small) { display: none; }
.plist.compact .tag { font-size: 13px; }

/* Home: the stats question, a pencilled note with two equal answers. */
/* The stats and rating question: a big pop-up over everything until answered. */
.consent-overlay { z-index: 20; }
.consent-card { width: min(560px, 100%); padding: 26px 28px 22px; text-align: left; }
.consent-card h2 { font: 400 32px var(--marker); color: var(--ink); margin: 0 0 12px; }
.consent-card p { font-size: 19px; line-height: 1.35; margin: 0 0 12px; }
.consent-card p.muted { font-size: 15px; }
.consent-actions { display: flex; gap: 14px; margin-top: 18px; }
.consent-actions button { flex: 1; font-size: 22px; padding: 12px 10px 9px; }

/* Privacy page: one readable sheet. */
.doc-page { min-height: 100%; display: grid; place-items: start center; padding: 40px 16px; }
.doc { width: min(680px, 100%); padding: 34px 34px 24px; }
.doc-title { font: 400 40px/1 var(--marker); margin: 0 0 10px; }
.doc ul { padding-left: 20px; margin: 0 0 10px; }
.doc li { margin-bottom: 6px; }
.doc p { margin: 0 0 10px; }
@media (max-width: 760px) { .doc { padding: 28px 20px 20px; } }

/* Ratings: "Your rating" on the home page, and next to each player's pen. */
.my-rating:empty { display: none; }
.rating-now { display: flex; align-items: baseline; gap: 10px; font-size: 21px; }
.rating-now b { font: 700 40px/1 var(--type); }
.rank-ladder { list-style: none; margin: 12px 0 8px; padding: 0; }
.rank-ladder li { display: flex; justify-content: space-between; padding: 3px 8px 1px; color: var(--muted); }
.rank-ladder li.here { background: var(--hl); color: var(--ink); font-weight: 700; }
.remember-line { margin: 16px 0 0; }
.remember-line .small { display: block; }
.plist .rt { font-family: var(--type); font-size: 13px; }
.plist.compact .rt .rk { display: none; }   /* the side panel is narrow: number only */
.plist .rt .up { color: var(--ok); font-weight: 700; }
.plist .rt .down { color: var(--accent); font-weight: 700; }

/* In game: the side panel fits a laptop screen (about 650 px tall) with 4 players, no scrolling. */
#hud { padding: 14px 16px 10px; gap: 8px; }
#hud .label { margin: 4px 0 3px; font-size: 14px; }
#hud .btn-group button { padding: 4px 2px 2px; font-size: 13px; gap: 0; }
#hud .btn-group button svg { width: 18px; height: 18px; }
#hud .btn-group.inks button i { margin: 4px 0 3px; }
#hud #polarity { margin-top: 4px; }
#hud #polarity button svg { height: 14px; }
#stroke-info { margin: 4px 0 6px; min-height: 0; }
#stroke-info:empty { display: none; }
#draw-hint { margin: 4px 0 0; }
/* One line per player: name, pen beside it; the rating stays on the room page and at game over. */
.plist.compact li { padding: 3px 2px; }
.plist.compact .pname > div.small { display: inline; margin-left: 6px; }
.plist.compact .rt { display: none; }
.hud-foot { gap: 10px; }
.hud-foot #quit { margin-left: auto; margin-right: 6px; }
.plist.compact .tag.host { display: none; }   /* hosting doesn't matter mid-game; room for name and pen */

/* Stats: Manage data (folded, at the bottom) */
.manage > summary { font: 400 22px var(--marker); color: var(--ink); }
.manage > summary::before { font: 700 18px var(--type); }
.manage[open] > summary { margin-bottom: 6px; }
.manage #manage-tabs { max-width: 260px; margin: 6px 0 4px; }

/* Stats page: Stats / Ink switch, and the ink settings form */
.page-tabs { max-width: 260px; margin: 12px 0 14px; }
.ink-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; align-items: start; }
.ink-form fieldset { border: 1.5px dashed var(--line, rgba(31,42,68,.25)); border-radius: 8px; padding: 6px 12px 10px; margin: 0; display: grid; gap: 6px; }
.ink-form legend { font: 400 20px var(--marker); color: var(--ink); padding: 0 4px; }
.ink-form label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ink-form input { width: 96px; }
.ink-form > p, .ink-actions { grid-column: 1 / -1; margin: 0; }
.ink-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
button.link.danger { color: var(--accent); }
button.link.danger:hover:not(:disabled) { color: var(--accent-dark); }
#manage-more { margin-top: 4px; }

/* =====================================================================
   Phones. Everything below applies only to narrow screens (portrait phones) or to touch
   screens; the computer layout above is unchanged.
   ===================================================================== */
.touch-note, .pen-jump, #rotate-hint { display: none; }

/* Touch screens have no hover, so tooltips become short notes. */
@media (hover: none) {
  .touch-note { display: block; margin: -8px 0 12px; }
  #ink-note { margin: 4px 0 0; }
  #ink-note:empty { display: none; }
}

/* In game on a phone (portrait, or landscape on a short screen): a compact panel that never
   needs scrolling, so Confirm is always in reach during the 30-second draw. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  #hud { padding: 8px 12px 6px; gap: 6px; }
  .phase-box { gap: 8px; }
  #phase-name { font-size: 22px; }
  #round-name { margin-top: 1px; font-size: 13px; }
  #timer { font-size: 20px; min-width: 48px; height: 40px; }
  /* Players as one wrapping line of name + score chips. */
  #scores { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; }
  #scores li { padding: 0; border: none; gap: 6px; }
  #scores .pname { flex: 0 1 auto; font-size: 15px; }
  #scores .pname > div.small { display: none; }
  #scores .score { font-size: 17px; min-width: 0; }
  #scores .tag { font-size: 12px; }
  /* Phase, round and timer on one line. */
  .phase-box > div:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  #timer { height: 34px; min-width: 44px; font-size: 18px; }
  /* Draw controls as a grid: tools (icons) and inks (color dots) share a row; the selected ink's
     name and effect show underneath; "Ink left" sits beside its meter. No row titles. */
  #draw-panel { display: grid; grid-template-columns: max-content 1fr; column-gap: 8px; row-gap: 5px; align-items: center; }
  #draw-panel > * { grid-column: 1 / -1; }
  #draw-panel > .label:first-child, #ink-section > .label, #draw-hint { display: none; }
  #ink-section { display: contents; }
  #tools { grid-column: 1; display: flex !important; gap: 4px; min-width: max-content; }
  /* Inks: thin buttons at the row's end, so the Eraser's fourth tool never runs under them. */
  #inks { grid-column: 2; display: flex; gap: 4px; justify-content: flex-end; min-width: 0; }
  #hud .btn-group button { flex-direction: row; justify-content: center; gap: 4px; padding: 4px 2px 2px; font-size: 12px; min-height: 36px; }
  #tools button { flex: 0 0 38px; }
  #inks button { flex: 0 1 34px; min-width: 0; }
  #tools button span, #inks button span { display: none; }
  #hud .btn-group button svg { width: 18px; height: 18px; flex: none; }
  #hud .btn-group.inks button i { width: 14px; height: 14px; margin: 0; border-radius: 50%; transform: none; flex: none; }
  #hud #polarity, #ink-note { grid-column: 1 / -1; }
  #hud #polarity { margin: 0; gap: 4px; }
  #hud #polarity button { min-height: 32px; }
  #ink-note { margin: 0 !important; font-size: 13px; }
  #draw-panel > .label:not(:first-child) { grid-column: 1; margin: 0; font-size: 13px; white-space: nowrap; }
  #draw-panel > .meter { grid-column: 2; }
  #stroke-info { margin: 0; font-size: 13px; }
  #hud .row button { min-height: 40px; }
  #drop-panel p { margin: 0 0 4px; }
}

/* Portrait phone: the board takes whatever height the panel leaves. */
@media (max-width: 760px) and (orientation: portrait), (max-width: 760px) and (pointer: fine) {
  #stage { flex: 1 1 auto; min-height: 0; }
  #hud { max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  /* Room page: pens in two columns, a shortcut to them under Start, finger-sized controls. */
  .pens { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pen { padding: 6px 10px 8px; }
  .pen b { font-size: 16px; margin: 0 -10px 4px; padding: 0 10px 3px; }
  .pen .pt { font-size: 13px; }
  .pen-jump { display: block; text-align: center; margin: 2px 0 0; padding: 10px 0; font-weight: 700; }
  #copy-link, #erosion, #target, #leave, #start { min-height: 44px; }
  #leave { padding: 8px 12px; }
}

/* A phone held sideways: the board gets small, so suggest turning it. Doesn't block play. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #hud { width: 250px; }
  #tools, #inks { grid-column: 1 / -1; }   /* the side panel is narrow: tools and inks on separate lines */
  #tools button, #inks button { flex: 1 1 0; }
  .hud-foot { font-size: 13px; white-space: nowrap; }
  #hud-code { display: none; }   /* no room for it beside Sound and Quit; it is shown in the room */
  #rotate-hint {
    display: block; position: absolute; left: 10px; top: 10px; z-index: 2; pointer-events: none;
    max-width: 150px; padding: 6px 10px; background: #fff1a1; font-weight: 700; font-size: 13px;
    transform: rotate(-2deg); box-shadow: 0 1px 0 rgba(60, 40, 10, .2), 2px 3px 0 rgba(60, 40, 10, .12);
  }
}

/* Home footer, on the desk: plain and quiet. */
.home-links { display: flex; gap: 6px; font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #574833; }
.home-links a { color: inherit; text-decoration: none; }
.home-links a:hover { color: var(--ink); text-decoration: underline; }

/* Four tabs on a narrower page. */
@media (max-width: 960px) {
  .book-tabs { left: 24px; }
  .book-tabs button { padding-left: 11px; padding-right: 11px; }
}
/* The book closes up on narrow screens: one page, the doodle on top. */
@media (max-width: 820px) {
  #home { justify-content: flex-start; padding: 16px 12px 12px; }
  .book { grid-template-columns: 1fr; }
  .book::after { display: none; }
  .book-left { padding: 20px 18px 8px; background-size: 24px 24px, 24px 24px, 0 0; }
  .logo { font-size: 44px; }
  .tagline { font-size: 17px; margin-top: 8px; }
  #home-doodle { margin: 4px auto 0; width: min(330px, 100%); }
  .rank-note { top: 12px; right: 12px; padding: 5px 9px 3px; font-size: 12px; }
  .rank-note b { font-size: 18px; }
  .book-left, .book-right { min-width: 0; }
  .book-right { padding: 0 18px 20px; background-size: 100% 32px, 0 0; }
  .book-tabs { position: static; margin: 0 -18px 18px; padding: 0 8px; border-bottom: 2px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
  .book-tabs button { font-size: 16px; padding: 6px 9px 2px; white-space: nowrap; }
  .book-page { min-height: 0; }
  .play-ways button { font-size: 17px; }
}

/* Privacy page: plain upright text for reading; only the title and section headings are styled. */
.doc p, .doc li { font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.doc b, .doc strong { font-weight: inherit; }
.doc-title, .doc h3 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; letter-spacing: 0; }
.doc-title { font-size: 30px; }
.doc h3 { font-size: 18px; }

/* Room page: bots in the player list. */
.plist .tag.botmark {
  font: 700 11px var(--type); text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; padding: 1px 5px 0; opacity: .7;
  transform: rotate(-5deg);   /* stamped like the host's */
}
.plist li.bot-manage { cursor: var(--ink-cursor); }
.plist li.bot-manage:hover .nm { background: var(--hl-soft); }
.bot-remove { width: 30px; height: 30px; padding: 0; font: 700 18px/1 var(--type); flex: none; }
/* Rows without a − keep its place, so every stamp lines up in one column. */
.bot-remove-slot { width: 30px; flex: none; }
.plist li.add-bot { border-bottom: none; gap: 10px; }
#add-bot { width: 30px; height: 30px; padding: 0; font: 700 20px/1 var(--type); border-style: dashed; flex: none; }
@media (max-width: 760px) { .bot-remove, #add-bot { width: 40px; height: 40px; } .bot-remove-slot { width: 40px; } }