:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #2c2738;
  background: #f6f4fa;
  --ink: #2c2738;
  --muted: #736b80;
  --paper: #fff;
  --line: #e6e0ed;
  --accent: #6552b3;
  --accent-hover: #534198;
  --lavender: #efebf9;
  --mint: #e8f4ee;
  --teal: #28694f;
  --rose: #f9eaf0;
  --peach: #fff0e4;
  --radius: 10px;
  --shadow: 0 8px 28px rgba(58, 39, 88, .055);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  display: flow-root;
  min-width: 260px;
  min-height: 100vh;
  background: radial-gradient(ellipse at 14% 0%, #eee8f8 0, transparent 48%), radial-gradient(ellipse at 100% 100%, #edf5f0 0, transparent 45%), #f6f4fa;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .45; }
[hidden] { display: none !important; }
h1 { margin: 0; min-height: 1.24em; font-size: clamp(30px, 8.2vw, 48px); font-weight: 400; text-align: center; line-height: 1.24; letter-spacing: -.025em; overflow-wrap: anywhere; }
.game { width: min(640px, calc(100% - 32px)); margin: clamp(48px, 8vh, 80px) auto 48px; }
.timer { display: table; text-align: center; margin: 18px auto 30px; padding: 6px 13px; border-radius: 7px; background: var(--lavender); color: var(--accent); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; }
.picker-toggle { width: 100%; min-height: 50px; border: 1px solid #dcd4e8; border-radius: var(--radius); background: var(--paper); padding: 0 18px; display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 14px; box-shadow: 0 3px 12px rgba(58,39,88,.035); }
.picker-toggle:hover { border-color: #b5a6d5; }
.picker-toggle[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: var(--line); box-shadow: none; }
.chevron { width: 8px; height: 8px; color: var(--accent); border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); margin-right: 3px; }
[aria-expanded="true"] .chevron { transform: translateY(3px) rotate(225deg); }
.picker { border: 1px solid #dcd4e8; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); overflow: hidden; box-shadow: var(--shadow); }
#search { width: calc(100% - 36px); height: 49px; margin: 0 18px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--paper); font-size: 13px; appearance: none; }
#search:focus-visible { outline: none; border-radius: 0; box-shadow: inset 0 -2px 0 var(--accent); }
#search::placeholder { color: var(--muted); opacity: 1; }
.font-list { max-height: min(320px, 34vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c2b6d8 #fff; }
.font-option { display: block; width: 100%; background: var(--paper); color: var(--ink); border: 0; border-bottom: 1px solid #f0ecf4; text-align: left; padding: 14px 18px 16px; min-height: 82px; }
.font-option:last-child { border-bottom: 0; }
.font-option:hover, .font-option:focus-visible { background: #f4f1fc; color: var(--ink); outline: none; box-shadow: inset 3px 0 0 #ad9bd4; }
.font-label { display: block; font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 11px; color: var(--muted); line-height: 15px; margin-bottom: 6px; }
.font-sample { display: block; font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.catalog-status { color: var(--muted); font-size: 12px; margin: 0; padding: 18px; }
.catalog-status:empty { display: none; }
.categories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 15px 18px; max-height: 180px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ae9a43 #eee9cb; border-bottom: 1px solid var(--line); }
.category { min-width: 0; min-height: 34px; padding: 5px 4px; border: 1px solid transparent; border-radius: 6px; background: var(--lavender); color: #514364; font-size: 13px; line-height: 22px; text-align: center; }
.category:nth-child(4n+2) { background: var(--mint); color: #315e4d; }
.category:nth-child(4n+3) { background: var(--peach); color: #825135; }
.category:nth-child(4n+4) { background: var(--rose); color: #81455f; }
.category:hover { border-color: #ac9ccb; }
.category[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 5px rgba(101,82,179,.15); }
.category:focus-visible { outline-offset: 2px; }
.results, .expired { width: min(400px, 100%); margin: 0 auto; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.selected-family { color: var(--muted); margin: 0 0 22px; font-size: 13px; overflow-wrap: anywhere; }
.match { color: var(--accent); margin: 0 0 10px; font-size: 48px; line-height: 1.15; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.match-caption { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.6; }
.alternatives { margin-top: 30px; text-align: left; }
.alternatives h2 { color: var(--muted); margin: 0 0 12px; font-size: 11px; font-weight: 400; }
.alternative { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); }
.alternative-name { font-size: 23px; line-height: 1.35; overflow-wrap: anywhere; }
.alternative-count { flex-shrink: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.next, .retry, .solid-button, .outline-button { min-height: 47px; padding: 12px 18px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; }
.next, .retry { display: block; width: 100%; margin-top: 28px; }
.next:hover, .retry:hover, .solid-button:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 4px 12px rgba(101,82,179,.16); }
.outline-button { border-color: #bcd9cb; background: var(--mint); color: var(--teal); }
.outline-button:hover:not(:disabled) { background: #d9ece2; border-color: #9bc3af; }
.results .retry + .next { margin-top: 10px; color: var(--accent); border-color: #dcd4e8; background: var(--paper); }
.results .retry + .next:hover { background: var(--lavender); }
.status, .expired p { text-align: center; font-size: 14px; line-height: 1.6; }
.expired p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.main-menu { width: min(420px, calc(100% - 40px)); margin: clamp(90px, 21vh, 200px) auto 40px; padding: 44px 32px 36px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 42px rgba(58,39,88,.065); text-align: center; }
.main-menu h1 { font-size: 42px; font-weight: 500; letter-spacing: -.055em; text-transform: none; }
.main-menu h1 span { color: var(--accent); }
.menu-actions { display: grid; gap: 12px; margin-top: 38px; }
.small-button { min-height: 34px; padding: 7px 13px; border: 1px solid #dcd4e8; border-radius: 7px; background: var(--paper); color: var(--accent); font-size: 12px; }
.small-button:hover:not(:disabled) { background: var(--lavender); border-color: #bbadd7; }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 8px 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.screen-header { width: calc(100% - 40px); min-height: 60px; margin: 16px 20px 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; box-shadow: 0 2px 10px rgba(58,39,88,.025); }
.screen-header > span { font-weight: 500; }
.quiet-status { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 18px 0; }
.quiet-status:empty, .room-error:empty { display: none; }
.lobby-browser { max-width: 900px; margin: 0 auto; }
.browser-content { width: min(650px, calc(100% - 40px)); margin: 40px auto; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.browser-content label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.browser-content input { width: 100%; height: 47px; border: 1px solid #dcd4e8; border-radius: 8px; padding: 12px 14px; background: #fdfcfe; font-size: 14px; }
.browser-content input::placeholder { color: var(--muted); opacity: 1; }
.browser-content input:focus-visible { outline-offset: 2px; }
.join-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; margin: 16px 0 40px; }
.join-code { display: flex; gap: 8px; min-width: 0; }
.join-code input { min-width: 0; text-transform: uppercase; }
.join-code input::placeholder { text-transform: none; }
.list-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.list-heading h2 { margin: 0; font-size: 14px; font-weight: 500; }
.lobby-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; margin-top: 10px; border: 1px solid #eee8f4; border-radius: 8px; background: #faf8fd; }
.lobby-code-label { font-size: 16px; color: var(--accent); letter-spacing: .08em; }
.lobby-details { display: block; color: var(--muted); font-size: 11px; white-space: pre; margin-top: 7px; }
.lobby-room { max-width: 1180px; margin: 0 auto; }
.room-error { padding: 12px 16px; margin: 14px 20px 0; border: 1px solid #edd3df; border-radius: 8px; background: var(--rose); color: #8b3c5b; font-size: 12px; line-height: 1.6; }
.waiting-room, .voting-room, .round-results { width: min(700px, calc(100% - 40px)); margin: 40px auto 48px; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.waiting-room { max-width: 440px; text-align: center; }
.waiting-room h1 { color: var(--accent); font-size: 38px; letter-spacing: .08em; }
.waiting-player { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
#start-round { width: 100%; margin-top: 26px; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: calc(100vh - 90px); }
#lobby-slot { padding: 0 24px; min-width: 0; }
#lobby-slot .game { width: 100%; margin-top: 40px; }
#lobby-slot h1 { margin-left: 0; margin-right: 0; }
.live-choices { align-self: start; margin: 30px 20px 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.live-player { padding: 15px 0; border-bottom: 1px solid #f0ecf4; }
.live-player:last-child { padding-bottom: 0; border-bottom: 0; }
.live-player:first-child { padding: 14px; border: 0; border-radius: 7px; background: var(--mint); margin-bottom: 8px; }
.live-player:first-child .player-label { color: var(--teal); }
.player-label { display: block; color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 11px; line-height: 1.4; }
.player-font { margin: 8px 0 0; font-size: 30px; line-height: 1.25; overflow-wrap: anywhere; }
.choice-status { color: var(--muted); margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.phase-caption { color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; margin: 16px 0; }
.voting-room > .timer { margin: 16px auto 28px; }
.voting-room > .quiet-status, .round-results > .quiet-status { text-align: center; }
.vote-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fdfcfe; }
.vote-choice { min-width: 0; }
.vote-choice .player-font { font-size: clamp(28px, 4.5vw, 42px); }
.vote-entry .small-button { flex-shrink: 0; min-width: 62px; color: var(--teal); border-color: #bcd9cb; background: var(--mint); }
.vote-entry .small-button:hover:not(:disabled) { background: #d9ece2; border-color: #9bc3af; }
.result-counts { display: grid; gap: 8px; flex-shrink: 0; text-align: right; font-size: 13px; color: var(--teal); }
.small-count { color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 11px; }
.winning-entry { border-color: #afd2bf; background: #f0f8f4; }
#winner-label { color: var(--teal); font-weight: 500; }
#next-round { display: block; width: 100%; margin-top: 26px; }
.spectator-note { margin: 58px auto; text-align: center; }
@media (max-width: 780px) {
  .room-grid { grid-template-columns: minmax(0, 1fr) 220px; }
  #lobby-slot { padding: 0 18px; }
  #lobby-slot .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; }
  .live-choices { padding: 16px; margin-right: 18px; }
  .live-choices .player-font { font-size: 25px; }
}
@media (max-width: 600px) {
  .screen-header { width: calc(100% - 32px); margin: 14px 16px 0; padding: 10px 14px; }
  .room-grid { display: flex; flex-direction: column; }
  #lobby-slot { padding: 0 16px; }
  #lobby-slot .game { margin-top: 30px; margin-bottom: 24px; }
  .live-choices { align-self: auto; margin: 0 16px 24px; padding: 16px; }
  #live-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .live-player, .live-player:last-child { min-width: 0; padding: 12px; border-bottom: 0; }
  .live-player:first-child { margin-bottom: 0; padding: 12px; }
  .live-choices .player-font { font-size: 24px; }
  .join-actions { grid-template-columns: 1fr; gap: 12px; }
  .browser-content { width: calc(100% - 32px); padding: 22px; margin-top: 28px; }
  .waiting-room, .voting-room, .round-results { width: calc(100% - 32px); margin-top: 28px; padding: 22px; }
  .vote-entry { padding: 16px; gap: 14px; }
  .main-menu { padding: 40px 24px 30px; }
  .main-menu h1 { font-size: 36px; }
}
@media (max-width: 540px) { .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 13px; } }
@media (max-width: 420px) { .game { margin-top: 36px; } .timer { margin-bottom: 26px; } .main-menu { margin-top: 17vh; } }
@media (prefers-reduced-motion: no-preference) {
  button, input { transition: background-color .14s, border-color .14s, box-shadow .14s, color .14s; }
}


/* Find A Font: printed cardboard identity */
:root {
  color: #213c2c;
  background: #f3edc8;
  --paper-wash: linear-gradient(rgba(128,128,128,.32), rgba(128,128,128,.32));
  --ink: #213c2c;
  --muted: #5b5c39;
  --paper: #fff29c;
  --line: #cbbb6c;
  --accent: #153eaa;
  --accent-hover: #0f2d86;
  --lavender: #e6e8b2;
  --mint: #dce798;
  --teal: #075b35;
  --rose: #f5d891;
  --peach: #ffe58d;
  --radius: 3px;
  --shadow: 3px 4px 0 rgba(121,92,22,.12), 0 8px 20px rgba(87,65,19,.055);
}
body {
  background-color: #fff29c;
  background-image: var(--paper-wash), url('assets/cardboard.png');
  background-repeat: repeat;
  background-size: 640px 640px;
  background-blend-mode: saturation, normal;
}
button, input,
.main-menu, .screen-header, .browser-content, .waiting-room, .voting-room, .round-results,
.picker, .categories, .results, .expired, .live-choices, .live-player,
.lobby-row, .vote-entry, .timer, .room-error {
  background-image: var(--paper-wash), url('assets/cardboard.png') !important;
  background-repeat: repeat;
  background-size: 520px 520px;
  background-blend-mode: saturation, multiply;
}
/* The wash affects paper surfaces only; printed text and the logo stay crisp. */
.solid-button, .next, .retry, .category[aria-pressed="true"] {
  --paper-wash: linear-gradient(transparent, transparent);
}
.main-menu, .screen-header, .browser-content, .waiting-room, .voting-room, .round-results,
.picker, .results, .expired, .live-choices {
  background-color: #fff7bd;
  border-color: #c9b85f;
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.main-menu { width: min(450px, calc(100% - 40px)); margin-top: clamp(56px, 13vh, 130px); padding: 34px 32px 32px; }
.main-menu h1 { font-size: 0; line-height: 0; min-height: 0; margin: 0; }
.brand-logo { display: block; width: min(320px, 100%); height: auto; margin: 0 auto; }
.menu-actions { margin-top: 30px; }
.menu-tools { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; }
.menu-tool-cutout { display: inline-flex; filter: drop-shadow(3px 4px 0 rgba(70,48,20,.22)); transform: rotate(-5deg); }
.menu-tool-cutout + .menu-tool-cutout { transform: rotate(5deg); }
.menu-tool-cutout:focus-within { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
.menu-icon-button {
  --paper-wash: linear-gradient(transparent, transparent);
  display: grid; place-items: center; width: 58px; height: 56px; padding: 9px; border: 0;
  border-radius: 0; color: #fff8d7; box-shadow: none;
  clip-path: polygon(4% 4%, 31% 0, 65% 3%, 96% 1%, 100% 38%, 97% 72%, 99% 96%, 62% 100%, 29% 97%, 1% 99%, 3% 61%, 0 30%);
}
.menu-icon-button:hover { filter: brightness(1.09); }
.menu-icon-button:active { transform: translateY(2px); }
.menu-icon-button:focus-visible { outline: none; }
.menu-icon-button svg { width: 34px; height: 34px; overflow: visible; }
.audio-toggle { background-color: #087044; }
.audio-toggle[aria-pressed="true"] { background-color: #bd302b; }
.speaker-cross, .audio-toggle[aria-pressed="true"] .speaker-waves { display: none; }
.audio-toggle[aria-pressed="true"] .speaker-cross { display: inline; }
.info-button { background-color: #1743ad; }
.info-button > span { font: italic 700 44px/38px Georgia, serif; transform: rotate(-4deg); }
.info-dialog {
  width: min(390px, calc(100% - 40px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 28px; border: 1px solid #b7aa78; border-radius: 3px; color: var(--ink);
  background-color: #fff7bd; background-image: var(--paper-wash), url('assets/cardboard.png');
  background-size: 520px 520px; background-blend-mode: saturation, multiply;
  box-shadow: 6px 8px 0 rgba(70,48,20,.2), 0 16px 60px rgba(32,40,22,.2);
}
.info-dialog::backdrop { background: rgba(31,45,30,.42); }
.info-dialog h2 { margin: 0 0 22px; color: var(--accent); font: 700 28px/1.2 Georgia, serif; transform: rotate(-1deg); }
.info-dialog p { margin: 0 0 18px; font-size: 14px; line-height: 1.65; }
.info-dialog strong { color: var(--teal); }
#info-close { width: 100%; margin-top: 6px; }
.solid-button, .next, .retry { background-color: #075b35; border-color: #064b2c; color: #fff8c8; border-radius: 3px; box-shadow: 2px 3px 0 rgba(53,76,26,.16); }
.solid-button:hover:not(:disabled), .next:hover, .retry:hover { background-color: #064b2c; border-color: #064b2c; box-shadow: 1px 2px 0 rgba(53,76,26,.18); }
.outline-button { background-color: #e5e8a5; border-color: #8a9d58; color: #103b28; border-radius: 3px; }
.outline-button:hover:not(:disabled) { background-color: #cbdc8e; border-color: #6d8540; }
.small-button { background-color: #fff3aa; border-color: #b7aa59; color: #183c91; border-radius: 3px; }
.small-button:hover:not(:disabled) { background-color: #f4e183; border-color: #8f853f; }
.text-button { background-color: #fff5ae; color: #123e9e; border-radius: 2px; padding-left: 5px; padding-right: 5px; }
.picker-toggle { background-color: #fff8c5; border-color: #b9a94f; border-radius: 3px; color: #203b2a; box-shadow: 2px 3px 0 rgba(121,92,22,.1); }
.picker-toggle:hover { border-color: #496f38; }
.picker-toggle[aria-expanded="true"] { border-radius: 3px 3px 0 0; border-bottom-color: #cbbb6c; }
.picker { border-color: #b9a94f; border-radius: 0 0 3px 3px; }
#search { background-color: #fff7bd; border-color: #cbbb6c; }
#search:focus-visible { box-shadow: inset 0 -2px 0 #153eaa; }
.categories { background-color: #fff4ac; border-color: #cbbb6c; }
.category { border-radius: 2px; background-color: #e8e5a5; color: #344c27; }
.category:nth-child(4n+2) { background-color: #d5e5a0; color: #214528; }
.category:nth-child(4n+3) { background-color: #ffdf8a; color: #6d3a1e; }
.category:nth-child(4n+4) { background-color: #f4d09a; color: #78342b; }
.category:hover { border-color: #8c873d; }
.category[aria-pressed="true"] { background-color: #173fa7; border-color: #12368f; color: #fff8ce; box-shadow: 1px 2px 0 rgba(36,59,90,.15); }
.font-list { scrollbar-color: #ae9a43 #fff2a2; }
.font-option { background-color: #fff7bd; border-color: #e0d18c; }
.font-option:hover, .font-option:focus-visible { background-color: #e4e8a0; color: #213c2c; box-shadow: inset 3px 0 0 #2c6e3f; }
.timer { border: 1px solid #c9bc66; border-radius: 3px; background-color: #eee8a2; color: #163d92; }
.browser-content input { background-color: #fff8c6; border-color: #c9b75f; border-radius: 3px; }
.list-heading, .waiting-player, .alternative { border-color: #cbbb6c; }
.lobby-row { background-color: #fff1a0; border-color: #d7c577; border-radius: 3px; }
.lobby-code-label, .waiting-room h1, .match { color: #173eac; }
.live-player { background-color: #fff7bd; border-color: #d9c981; }
.live-player:first-child { background-color: #d9e69d; border-radius: 3px; }
.live-player:first-child .player-label { color: #174d2c; }
.vote-entry { background-color: #fff5b3; border-color: #cebe74; border-radius: 3px; }
.vote-entry .small-button { background-color: #d9e59b; color: #174928; border-color: #91a35b; }
.vote-entry .small-button:hover:not(:disabled) { background-color: #bed682; border-color: #6c8a3f; }
.winning-entry { background-color: #dbe89c; border-color: #618843; }
.result-counts, #winner-label { color: #075b35; }
.room-error { background-color: #f8d998; color: #842d20; border-color: #ca9656; border-radius: 3px; }
.results .retry + .next { background-color: #fff6b6; color: #123e9e; border-color: #c8b961; }
.results .retry + .next:hover { background-color: #e9e79e; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  #emotion, #vote-emotion, #results-emotion, .font-sample, .player-font, .alternative-name {
    background-color: transparent;
    background-image: linear-gradient(rgba(26,55,35,.94), rgba(26,55,35,.94)), url('assets/cardboard.png');
    background-repeat: repeat;
    background-size: auto, 420px 420px;
    background-blend-mode: normal;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (max-width:600px) {
  .main-menu { padding: 30px 24px 26px; margin-top: 12vh; }
  .brand-logo { width: min(290px, 100%); }
}

/* Extra breathing room below the page header. */
.game { margin-top: calc(clamp(48px, 8vh, 80px) + 24px); }
#lobby-slot .game { margin-top: 64px; }
.live-choices { margin-top: 54px; }
.waiting-room, .voting-room, .round-results { margin-top: 64px; }
.spectator-note { margin-top: 82px; }
@media (max-width: 600px) {
  #lobby-slot .game { margin-top: 54px; }
  .live-choices { margin-top: 0; }
  .waiting-room, .voting-room, .round-results { margin-top: 52px; }
}
@media (max-width: 420px) { .game { margin-top: 60px; } }

/* End-of-match paper podium. */
.room-round { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.game-over { width: min(700px, calc(100% - 40px)); margin: 64px auto 48px; padding: 36px 30px 24px; text-align: center; }
.game-over h1 { margin: 0 0 44px; color: var(--ink); font-family: monospace; font-weight: 900; font-size: clamp(21px, 4.2vw, 34px); line-height: 1.6; letter-spacing: -.055em; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.podium-place { min-width: 0; display: flex; flex-direction: column; }
.podium-rank { color: var(--accent); font-size: clamp(17px, 3.5vw, 25px); font-weight: 700; }
.podium-name { display: flex; justify-content: center; align-items: center; min-height: 52px; margin: 8px 0; font-size: clamp(14px, 2.7vw, 20px); font-weight: 700; overflow-wrap: anywhere; }
.podium-step { display: flex; justify-content: center; align-items: flex-start; padding: 22px 8px; min-height: 140px; border: 1px solid #9d8e42; border-radius: 3px 3px 0 0; background-color: #e6c37e; background-image: var(--paper-wash), url('assets/cardboard.png'); background-repeat: repeat; background-size: 520px 520px; background-blend-mode: saturation, multiply; box-shadow: 3px 4px 0 rgba(121,92,22,.12); }
.podium-place-1 .podium-step { min-height: 240px; background-color: #e2df83; border-color: #9c9b3f; }
.podium-place-2 .podium-step { min-height: 190px; background-color: #d9e2aa; border-color: #93a36a; }
.podium-points { font-size: 13px; color: #31452b; }
.podium-empty { opacity: .45; }
.personal-rank { margin: 30px 0 24px; font-size: 17px; font-weight: 700; color: var(--teal); }
.game-over-actions { display: flex; justify-content: center; gap: 12px; }
.game-over-actions button { flex: 1; max-width: 220px; }
#continue-note { margin: 16px auto 0; max-width: 340px; }
@media (max-width: 600px) {
  .game-over { width: calc(100% - 32px); margin-top: 52px; padding: 16px 0 24px; }
  .game-over h1 { margin-bottom: 32px; }
  .podium { gap: 8px; }
  .podium-step { min-height: 110px; padding: 18px 4px; }
  .podium-place-1 .podium-step { min-height: 190px; }
  .podium-place-2 .podium-step { min-height: 150px; }
  .podium-points { font-size: 11px; }
  .personal-rank { font-size: 15px; }
}

/* Centre the menu as a whole, with room to scroll on short screens. */
#app:has(> #main-menu:not([hidden])) {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 0;
}
#app #main-menu { margin: 0 auto; }
.menu-actions > button { min-height: 56px; line-height: 1.25; }
#lobbies-button { font-size: clamp(16px, 4.7vw, 20px); font-weight: 700; }
#practice-button { font-size: 12px; font-weight: 400; }