@font-face {
  font-family: 'Papernotes';
  src: url('fonts/Papernotes.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Papernotes';
  src: url('fonts/PapernotesBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Magic Clover';
  src: url('fonts/MagicClover.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {
  --desk: #e8e4d8;
  --paper: #fdfbf2;
  --paper-shadow: #d5d0c0;
  --ruled-line: #aecbe3;
  --cell-line: #dcd6c4;
  --margin-red: #e08c8c;
  --ink: #42413e;
  --ink-faint: #c8c2b0;
  --letter-red: #b3543f;
  --score-green: #4a7c2f;
  --label: #9a917d;
  --active-bg: #fff7d9;
  /* Titles, static labels, buttons, and the round's drawn letter. */
  --heading-font: 'Papernotes', 'Caveat', cursive;
  /* Everything the player types or reads as running text/data: answers,
     nicknames, room codes, subtitles, scores, the timer. */
  --body-font: 'Magic Clover', 'Patrick Hand', cursive;
  /* Red margin line position: shared by every screen's paper background
     (landing/join/mode/waiting AND the game sheet), so the notebook look
     never shifts between them. */
  --margin-x: clamp(60px, 10vw, 88px);
}

html {
  /* The game sheet is wider than phone viewports (horizontal scroll model);
     an overflowing document is exactly when mobile browsers' text autosizing
     kicks in and would desync cell text from the row geometry. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body-font), sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh; /* mobile: don't jump when the URL bar collapses */
}

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#game-screen {
  display: block;
  padding: 0;
}

.hidden {
  display: none !important;
}

/* ---------- Landing screen ---------- */

#landing-screen {
  padding: 0;
}

.paper.landing-paper {
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
  --row-h: 44px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--row-h) - 1.5px),
    var(--ruled-line) calc(var(--row-h) - 1.5px),
    var(--ruled-line) var(--row-h)
  );
}

.landing-title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(52px, 11vw, 96px);
  font-weight: 700;
  color: var(--ink);
  transform: rotate(-1.5deg);
  text-shadow: 2px 2px 0 rgba(90, 80, 60, 0.12);
}

.landing-title .tld {
  color: var(--letter-red);
}

/* Square sticky note, bottom-right corner curling like the reference photo */
.note.landing-note {
  width: min(300px, 78vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px 28px 28px 24px;
  transform: rotate(1.2deg);
  background:
    /* soft light falling from the top-left */
    linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    /* diagonal bend shading toward the curling bottom-right corner */
    linear-gradient(to bottom right,
      transparent 52%,
      rgba(150, 132, 62, 0.18) 76%,
      rgba(150, 132, 62, 0.04) 90%,
      rgba(255, 255, 255, 0.25) 100%),
    #f7efa3;
  /* wide shallow curve: the bottom-right corner bends away from the page */
  border-bottom-right-radius: 95px 26px;
  /* tight, close shadow hugging the bottom-right; darker so the corner reads as lifted */
  box-shadow:
    0 2px 3px rgba(90, 80, 60, 0.14),
    10px 14px 10px -3px rgba(60, 50, 30, 0.55);
}

.landing-note p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}

/* Classic two-tone ink eraser (red pencil end + blue ink end, cream band) */
.eraser-button {
  position: relative;
  width: 264px;
  height: 82px;
  margin-top: 10px;
  padding: 0 0 16px;
  border: none;
  border-radius: 18px / 26px;
  background: linear-gradient(90deg, #d6552b 0 60%, #7594ba 60% 100%);
  color: #fdf4e4;
  font-size: 27px;
  letter-spacing: 1px;
  transform: rotate(-2deg);
  text-shadow: 0 1px 2px rgba(70, 40, 30, 0.4);
  box-shadow:
    inset 0 -16px 0 rgba(50, 30, 25, 0.22),
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset -3px 0 4px rgba(255, 255, 255, 0.15),
    7px 13px 14px rgba(90, 80, 60, 0.4);
}

/* Cream band running along the eraser's side, like the real thing */
.eraser-button::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 13px;
  height: 4px;
  border-radius: 2px;
  background: #f1e4bd;
  box-shadow: 0 1px 1px rgba(50, 30, 25, 0.25);
}

.eraser-button:hover {
  background: linear-gradient(90deg, #d6552b 0 60%, #7594ba 60% 100%);
  transform: rotate(-2deg) translateY(3px);
  box-shadow:
    inset 0 -14px 0 rgba(50, 30, 25, 0.22),
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset -3px 0 4px rgba(255, 255, 255, 0.15),
    3px 6px 8px rgba(90, 80, 60, 0.35);
}

/* ---------- "Erase the screen" transition ---------- */

#landing-screen.erasing .eraser-button {
  z-index: 6;
  animation: erase-sweep 1.3s ease-in-out forwards;
  pointer-events: none;
}

/* Zigzag sweep tracking the real element positions (set as CSS vars on click):
   12-30% wipes the title row, 30-84% works down the note, then settles back. */
@keyframes erase-sweep {
  0%   { transform: rotate(-2deg); }
  12%  { transform: translate(var(--sw-left, -30vw), var(--ty-title, -52vh)) rotate(-12deg) scale(1.05); }
  30%  { transform: translate(var(--sw-right, 30vw), var(--ty-title, -52vh)) rotate(6deg) scale(1.05); }
  44%  { transform: translate(var(--sw-left, -30vw), var(--ty-note1, -34vh)) rotate(-8deg) scale(1.05); }
  58%  { transform: translate(var(--sw-right, 30vw), var(--ty-note2, -24vh)) rotate(6deg) scale(1.05); }
  72%  { transform: translate(var(--sw-left, -30vw), var(--ty-note3, -14vh)) rotate(-8deg) scale(1.05); }
  84%  { transform: translate(var(--sw-right, 30vw), var(--ty-note4, -4vh)) rotate(6deg) scale(1.05); }
  100% { transform: rotate(-2deg); }
}

/* Title is wiped left-to-right, tracking the eraser's first pass (12%-30% of the sweep) */
#landing-screen.erasing .landing-title {
  animation: wipe-title 0.24s linear 0.16s forwards;
}

/* Note is wiped top-to-bottom while the eraser zigzags down the page (30%-84% of the sweep) */
#landing-screen.erasing .note.landing-note {
  animation: wipe-note 0.7s linear 0.39s forwards;
}

/* Negative insets keep text-shadow/box-shadow inside the clip so nothing lingers */
@keyframes wipe-title {
  from { clip-path: inset(-20px -20px -20px -20px); opacity: 1; }
  to   { clip-path: inset(-20px -20px -20px calc(100% + 20px)); opacity: 0; }
}

@keyframes wipe-note {
  from { clip-path: inset(-40px -50px -50px -50px); opacity: 1; }
  to   { clip-path: inset(calc(100% + 50px) -50px -50px -50px); opacity: 0; }
}

/* Fit the landing on short screens without scrolling */
@media (max-height: 620px) {
  .paper.landing-paper {
    gap: 16px;
    --row-h: 36px;
  }

  .landing-title {
    font-size: clamp(36px, 8vw, 56px);
  }

  .note.landing-note {
    width: min(220px, 66vw);
    padding: 14px;
  }

  .landing-note p {
    font-size: 14px;
  }

  .eraser-button {
    width: 200px;
    height: 64px;
    font-size: 22px;
    padding-bottom: 12px;
  }

  .eraser-button::after {
    bottom: 10px;
    height: 3px;
  }
}

/* ---------- Post-it screens (join / mode / waiting, on lined paper) ---------- */

#join-screen,
#mode-screen,
#waiting-screen {
  padding: 0;
  overflow: hidden; /* the note flies in from outside the screen */
}

/* Bigger sticky note than the landing one, same bottom-right curl */
.note.panel-note {
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 26px 34px 34px 30px;
  transform: rotate(-1deg);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    linear-gradient(to bottom right,
      transparent 52%,
      rgba(150, 132, 62, 0.18) 76%,
      rgba(150, 132, 62, 0.04) 90%,
      rgba(255, 255, 255, 0.25) 100%),
    #f7efa3;
  border-bottom-right-radius: 95px 26px;
  box-shadow:
    0 2px 3px rgba(90, 80, 60, 0.14),
    10px 14px 10px -3px rgba(60, 50, 30, 0.55);
  /* replays every time the screen becomes visible: flies in from outside and sticks */
  animation: slap-in 0.2s cubic-bezier(0.25, 1, 0.4, 1) both;
}

/* Slapped onto the page from outside the screen: big while "in the air",
   lands flat — no bounce */
@keyframes slap-in {
  0%   { transform: translate(70vw, -75vh) rotate(14deg) scale(1.8); }
  100% { transform: translate(0, 0) rotate(-1deg) scale(1); }
}

.panel-note-title {
  margin: 0 0 6px;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}

.panel-note label {
  color: #8a7f5f;
}

/* Inputs sit on the post-it: darker ruled underline, warm focus tint */
.panel-note input[type="text"],
.panel-note select {
  border-bottom-color: rgba(90, 80, 45, 0.4);
}

.panel-note input[type="text"]:focus,
.panel-note select:focus {
  border-bottom-color: var(--letter-red);
  background: rgba(255, 255, 255, 0.35);
}

.panel-note .room-error {
  color: var(--letter-red);
}

/* Stubby, well-used yellow pencil with "ok" on the barrel */
.pencil-button {
  position: relative;
  align-self: center;
  width: 150px;
  height: 44px;
  margin: 30px 40px 8px 34px; /* room for eraser (left) + sharpened tip (right) */
  padding: 0;
  border: none;
  border-radius: 0;
  /* hex-barrel shading: highlight ridge down the middle, darker facets top & bottom */
  background: linear-gradient(
    to bottom,
    #d98f1e 0 14%,
    #f2b23a 14% 34%,
    #ffd873 34% 52%,
    #f2ac30 52% 74%,
    #cf8517 74% 100%
  );
  color: #4a3410;
  font-family: var(--heading-font);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 3px;
  transform: rotate(-3deg);
  filter: drop-shadow(4px 6px 5px rgba(80, 60, 30, 0.4));
}

.pencil-button span {
  position: relative;
  top: -1px;
}

/* Eraser + metal ferrule on the left end */
.pencil-button::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 0;
  bottom: 0;
  width: 42px;
  border-top-left-radius: 10px 22px;
  border-bottom-left-radius: 10px 22px;
  background: linear-gradient(
    90deg,
    #e79ab0 0 42%,               /* pink eraser */
    #d98aa2 42% 46%,
    #c4c7cc 47% 58%,             /* ferrule shine */
    #82868c 58% 63%,             /* dark band */
    #c4c7cc 63% 74%,
    #82868c 74% 79%,             /* dark band */
    #c4c7cc 79% 100%
  );
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35),
    inset 0 -7px 6px rgba(60, 30, 40, 0.28);
}

/* Sharpened wooden tip with graphite point on the right end */
.pencil-button::after {
  content: '';
  position: absolute;
  right: -34px;
  top: 0;
  bottom: 0;
  width: 34px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: linear-gradient(
    90deg,
    #e9c99a 0 55%,               /* bare wood cone */
    #caa877 55% 70%,
    #6b6b6b 70% 86%,             /* graphite */
    #2f2f2f 86% 100%             /* dark point */
  );
}

.pencil-button:hover {
  /* re-declare the barrel gradient: the generic button:hover background
     (flat highlight color) must never repaint the wooden body */
  background: linear-gradient(
    to bottom,
    #d98f1e 0 14%,
    #f2b23a 14% 34%,
    #ffd873 34% 52%,
    #f2ac30 52% 74%,
    #cf8517 74% 100%
  );
  filter: drop-shadow(2px 3px 3px rgba(80, 60, 30, 0.35));
  transform: rotate(-3deg) translateY(2px);
}

/* ---------- Card-based screens (mode / waiting) ---------- */

.card {
  background: var(--paper);
  border-radius: 4px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 3px 4px 0 var(--paper-shadow);
}

.card h1 {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
}

.subtitle {
  color: var(--label);
  font-size: 15px;
  margin: 0 0 20px;
}

label {
  display: block;
  font-size: 15px;
  color: var(--label);
  margin-bottom: 4px;
  margin-top: 14px;
}

input[type="text"], select {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 2px solid var(--ruled-line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 20px;
}

input[type="text"]:focus, select:focus {
  outline: none;
  border-bottom-color: var(--letter-red);
  background: var(--active-bg);
}

input::placeholder {
  color: var(--ink-faint);
}

/* Safari/WebKit shows a contacts-autofill (person) icon on fields it guesses
   are name/address inputs; hide it — answers here are game words, not contacts */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

button {
  width: 100%;
  margin-top: 24px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background: var(--active-bg);
}

.back-button {
  width: auto;
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--label);
}

.back-button:hover {
  background: rgba(154, 145, 125, 0.08);
  border-color: var(--ink);
}

/* ---------- Mode / waiting screens ---------- */

.room-error {
  color: var(--letter-red);
}

#room-error-fallbacks button {
  margin-top: 12px;
}

#mode-screen button {
  margin-top: 12px;
}

#mode-screen button + .subtitle {
  margin-top: 5px;
}

#mode-screen .subtitle {
  margin-bottom: 6px;
}

#room-code-display {
  color: var(--letter-red);
  letter-spacing: 2px;
}

#room-code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 8px;
  font-size: 26px;
  margin-top: 8px;
}

#join-code-area .room-error {
  margin: 8px 0 0;
}

#join-code-submit {
  margin-top: 14px;
}

#room-link-display {
  margin-bottom: 12px;
}

#copy-link-button {
  margin-top: 0;
  margin-bottom: 24px;
}

/* Inner players list note, sitting on the big panel note */
#waiting-screen .panel-note .note {
  margin-top: 8px;
  margin-bottom: 8px;
  transform: rotate(-0.8deg);
}

#waiting-hint {
  margin: 12px 0 0;
  text-align: center;
}

/* ---------- Paper sheet (fills the whole screen) ---------- */

.game-layout {
  width: 100%;
}

.paper {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 14px;
}

/* Horizontal-scroll model for narrow screens: the sheet never squeezes below
   660px (letter col 66 + 6 category cells x 90 + score 38 + row padding 16),
   the document itself overflows and the WINDOW scrolls sideways. No inner
   overflow-x container — that would become the scrollport for .sheet-top's
   position:sticky and kill the sticky band. Scoped to the game sheet only;
   the landing/join/mode/waiting papers must never inherit a min-width. */
#game-screen .paper {
  min-width: 660px;
}

.paper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--margin-x);
  width: 1.5px;
  background: var(--margin-red);
}

.paper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--margin-x) + 4px);
  width: 1.5px;
  background: var(--margin-red);
  opacity: 0.5;
}

#game-screen {
  /* Single source of truth for row height: played rows (.round-row) and
     the blank ruled backgrounds (#fillers, #page-tail) must all use this
     exact value, or the tail's lines drift out of sync with real rows. */
  --row-h: clamp(34px, 4.5vh, 44px);
}

/* Sticky band: banner + column labels stay put while the sheet scrolls
   underneath (inert until the page actually overflows). */
.sheet-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  box-shadow: 0 2px 5px rgba(90, 80, 60, 0.12);
}

/* The paper's red margin double-line sits behind the sticky band; redraw
   the same two lines on the band so the line runs unbroken while scrolled. */
.sheet-top::before,
.sheet-top::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--margin-red);
}

.sheet-top::before {
  left: var(--margin-x);
}

.sheet-top::after {
  left: calc(var(--margin-x) + 4px);
  opacity: 0.5;
}

.paper-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 4px calc(var(--margin-x) + 16px);
  font-family: var(--heading-font);
}

.paper-title {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
}

.paper-timer {
  /* A live countdown number, not a heading — reads as data/body text even
     though it sits inside .paper-header (heading font). */
  font-family: var(--body-font);
  font-size: clamp(18px, 3.2vw, 24px);
  color: var(--letter-red);
  font-weight: 700;
}

/* Mobile only: the current letter mirrored next to the timer, because with
   the sheet scrolled right the active row's letter column is off-screen. */
.header-letter {
  display: none;
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--letter-red);
  margin-right: 10px;
}

/* ---------- Rows ---------- */

.row {
  display: grid;
  grid-template-columns: calc(var(--margin-x) + 6px) repeat(6, 1fr) clamp(38px, 7vw, 54px);
  align-items: end;
  padding: 0 16px 0 0;
}

.labels-row {
  font-family: var(--heading-font);
  font-size: clamp(11px, 1.8vw, 14px);
  color: var(--label);
  padding-bottom: 2px;
}

.labels-row > div {
  text-align: center;
}

.labels-row > div:first-child {
  text-align: center;
}

.labels-row .score-label {
  text-align: right;
}

.round-row {
  height: var(--row-h);
  border-bottom: 1.5px solid var(--ruled-line);
  font-family: var(--body-font);
  font-size: clamp(15px, 2.8vw, 22px);
  color: var(--ink);
}

.round-row > * + * {
  border-left: 1px solid var(--cell-line);
}

/* The red margin line already separates Letter from Name — skip the
   gray cell line that would double it. */
.round-row > :nth-child(2) {
  border-left-color: transparent;
}

#fillers,
#page-tail {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--row-h) - 1.5px),
    var(--ruled-line) calc(var(--row-h) - 1.5px),
    var(--ruled-line) var(--row-h)
  );
}

#fillers {
  flex: 1;
}

/* The page's clean side: zero until row 17 is played, then exactly 14
   blank ruled rows kept below the newest round — the page simply grows,
   so the "division" is invisible (same rhythm, no seam). */
#page-tail {
  height: 0;
  flex-shrink: 0;
}

.paper.page-extended #page-tail {
  height: calc(14 * var(--row-h));
}

.letter-cell {
  /* The round's drawn letter always uses the heading font, even though its
     row (.round-row, typed answers) uses the body font. */
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: clamp(18px, 3.4vw, 26px);
  color: var(--letter-red);
  padding-bottom: 1px;
  text-align: center;
}

.cell {
  text-align: center;
  overflow: hidden;
  padding: 0 3px;
}

.cell input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--body-font);
  font-size: inherit;
  color: var(--ink);
  text-align: center;
  padding: 2px 0;
}

.cell input:focus {
  outline: none;
  background: var(--active-bg);
  border-bottom: none;
}

.cell-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 2px;
}

/* Highlighter marks over finished answers: an ::after overlay with
   mix-blend-mode: multiply, so the ink stays readable under the color. */
.cell-text.correct,
.cell-text.invalid {
  position: relative;
  /* The marker stroke runs 5px past the word on both sides. Padding (not a
     negative ::after offset) so the span's own overflow:hidden can't clip it;
     the negative margin cancels the layout shift. */
  padding: 0 5px;
  margin: 0 -5px;
  /* max-width: 100% is border-box here, so it would eat the 5px overhang
     in a tight cell — widen the cap by the added padding. */
  max-width: calc(100% + 10px);
}

.cell-text.correct::after,
.cell-text.invalid::after,
.summary-word.valid::after,
.summary-word.invalid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  bottom: 2%;
  mix-blend-mode: multiply;
  border-radius: 8px 12px 10px 14px / 14px 8px 12px 9px;
  transform: rotate(-0.7deg);
  pointer-events: none;
}

.cell-text.correct::after,
.summary-word.valid::after {
  background: linear-gradient(
    97deg,
    rgba(148, 227, 66, 0.45) 0%,
    rgba(132, 220, 48, 0.72) 10%,
    rgba(145, 226, 60, 0.6) 45%,
    rgba(130, 218, 46, 0.7) 82%,
    rgba(150, 228, 70, 0.4) 100%
  );
}

.cell-text.invalid::after,
.summary-word.invalid::after {
  background: linear-gradient(
    97deg,
    rgba(255, 96, 110, 0.42) 0%,
    rgba(255, 74, 92, 0.68) 10%,
    rgba(255, 90, 104, 0.56) 45%,
    rgba(255, 70, 90, 0.66) 82%,
    rgba(255, 100, 115, 0.38) 100%
  );
}

.cell-text.empty {
  color: var(--ink-faint);
}

.score-cell {
  text-align: right;
  font-weight: 700;
  color: var(--score-green);
  padding-bottom: 1px;
  padding-right: 2px;
}

.score-cell.pending {
  color: var(--ink-faint);
  font-weight: 500;
}

.active-row.answering {
  background: var(--active-bg);
}

/* ---------- Sticky notes (pinned bottom right) ---------- */

.sidebar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 215px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 5;
}

.note {
  background: #fdf6c9;
  padding: 12px 14px;
  box-shadow: 2px 3px 6px rgba(90, 80, 60, 0.25);
  transform: rotate(-1.5deg);
  /* Above the paper's red margin lines: .paper::after comes after all
     children in tree order, so without an explicit level the thin line
     paints on top of the (transformed) post-its. */
  position: relative;
  z-index: 1;
}

/* Single tabbed leaderboard post-it: yellow = Players, green = Nations
   (the colors the old two separate notes had). */
#leaderboard-note {
  position: relative; /* anchors the collapse toggle to this note's corner */
}

#leaderboard-note.nations-view {
  background: #dcefd8;
  transform: rotate(1deg);
}

/* Collapse/expand: top-3 vs top-10. A single glyph that flips upside down
   rather than swapping icons. */
.lb-collapse {
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto;
  margin-top: 0;
  padding: 2px 6px;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: var(--label);
  transition: transform 0.15s ease;
}

.lb-collapse:hover {
  /* the generic button:hover paints a yellow fill; this stays flat */
  background: transparent;
  color: var(--ink);
}

#leaderboard-note.collapsed .lb-collapse {
  transform: rotate(180deg);
}

.lb-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 22px; /* keep tab labels clear of the collapse toggle */
  border-bottom: 1px solid rgba(66, 65, 62, 0.25);
}

.lb-tab {
  width: auto;
  margin-top: 0;
  padding: 2px 4px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  color: var(--label);
}

.lb-tab:hover {
  /* the generic button:hover paints a yellow fill; tabs stay flat */
  background: transparent;
  color: var(--ink);
}

.lb-tab.active {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  margin-bottom: -1px; /* the underline sits on the divider */
}

#leaderboard-note ol {
  list-style: none;
  padding-left: 0;
}

.note .rank {
  min-width: 2ch;
  text-align: right;
  color: var(--label);
  flex-shrink: 0;
}

/* The viewer's own row (their player row / their nation): a faint ink wash
   that reads on both the yellow and green backgrounds. Negative margins let
   the highlight bleed across the note's padding, full width. */
.note li.me-row {
  background: rgba(66, 65, 62, 0.1);
  margin: 0 -14px;
  padding: 2px 14px;
}

.note h3 {
  margin: 0 0 6px;
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.note ol {
  margin: 0;
  padding-left: 20px;
}

.note li {
  padding: 2px 0;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
}

.note .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note .score {
  color: var(--label);
  flex-shrink: 0;
}

/* ---------- Narrow layouts ---------- */

@media (max-width: 640px) {
  /* The sheet is 660px wide here (horizontal scroll). The header band
     sticks to the viewport's left edge so the title and the letter+timer
     stay visible at every scroll position; 100vw is safe inside the mobile
     query only (on desktop it would count the scrollbar gutter and create
     a phantom horizontal scroll). Margin lines are NOT moved anymore: the
     old left:26px override desynced them from .sheet-top's copies (the
     "broken red line" seen on iPhone) and ran them through the letters. */
  .paper-header {
    position: sticky;
    left: 0;
    width: 100vw;
  }

  .header-letter {
    display: inline;
  }

  /* iOS Safari auto-zooms on focus of inputs under 16px; keep the clamp so
     571-640px viewports (2.8vw > 16px) don't lose size. .cell input inherits. */
  .round-row {
    font-size: clamp(16px, 2.8vw, 22px);
  }

  .sidebar {
    right: 8px;
    bottom: 8px;
    width: 150px;
    gap: 8px;
  }

  .note h3 {
    font-size: 17px;
  }

  .lb-tab {
    font-size: 15px;
  }

  .note li {
    font-size: 12px;
  }
}

/* ---------- Round-summary magnifier + popup ---------- */

/* Overrides the generic full-width button styling. */
.magnifier-button {
  width: auto;
  margin: 0 0 0 2px;
  padding: 0 2px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.magnifier-button:hover {
  background: transparent;
  transform: scale(1.3) rotate(-10deg);
}

#summary-popup {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#summary-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(60, 50, 30, 0.25);
}

.note.summary-note {
  position: relative;
  width: min(980px, 94vw);
  max-height: 86vh;
  max-height: 86dvh;
  overflow: auto;
  padding: 20px 30px 26px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    linear-gradient(to bottom right,
      transparent 52%,
      rgba(150, 132, 62, 0.18) 76%,
      rgba(150, 132, 62, 0.04) 90%,
      rgba(255, 255, 255, 0.25) 100%),
    #f7efa3;
  border-bottom-right-radius: 95px 26px;
  box-shadow:
    0 2px 3px rgba(90, 80, 60, 0.14),
    10px 14px 10px -3px rgba(60, 50, 30, 0.55);
  /* replays on every open: display:none -> visible restarts the animation */
  animation: slap-in 0.2s cubic-bezier(0.25, 1, 0.4, 1) both;
}

.summary-note h3 {
  margin: 0 0 12px;
  font-family: var(--heading-font);
  font-size: 30px;
  color: var(--letter-red);
}

#summary-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: auto;
  margin: 0;
  padding: 2px 8px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--ink);
  cursor: pointer;
}

#summary-close:hover {
  background: transparent;
  color: var(--letter-red);
}

#summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px 16px;
}

.summary-col h4 {
  margin: 0 0 5px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--ruled-line);
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.summary-col ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-col li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 1px 0;
  font-family: var(--body-font);
  font-size: 17px;
  color: var(--ink);
}

.summary-word {
  position: relative;
  min-width: 0;
  padding: 0 5px;
  margin-left: -5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-count {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--label);
}

.summary-empty {
  color: var(--ink-faint);
}

#summary-continue {
  display: block;
  width: auto;
  margin: 16px auto 0;
  padding: 6px 28px;
}