/* Shared styles for the new pages (/contests/, /account/). Tokens first; the dark set follows the site's existing localStorage.darkMode switch. */
:root {
  --bg: #FAFAF8; --card: #FFFFFF; --soft: #F3F1EC; --line: #E6E2DA; --line2: #D9D4CC;
  --fg: #16100A; --fg2: #5E574F; --fg3: #3A342E;
  --acc: #FE7725; --acc-hover: #FF8B45; --acc-ink: #A8430A; --chip: #FFF1E8; --current: #FFF4EC;
  --ok: #1F6B43; --ok-soft: #E4F1E9; --bad: #8A3708; --bad-soft: #FDECDF;
  --me: #2456A6; --me-soft: #EAF0FB;
  --bar: #16100A; --bar-fg: #FFFFFF; --bar-fg2: #D9D4CC; --bar-2: #2C241C;
  --shadow: 0 -6px 20px rgba(22, 16, 10, 0.06);
  --ff: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-display: Jost, 'DM Sans', system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;   /* dark scrollbars and form controls */
  --bg: #0E0E10; --card: #17171A; --soft: #1F1F23; --line: #2A2A2F; --line2: #3A3A40;
  --fg: #F4F2EE; --fg2: #B5AFA6; --fg3: #D9D4CC;
  --acc-ink: #FF9A5C; --chip: #2A1A10; --current: #24170E;
  --ok: #7CD3A0; --ok-soft: #173326; --bad: #FFB27A; --bad-soft: #3A2413;
  --me: #9DBDFF; --me-soft: #17233A;
  --bar: #000000; --bar-2: #1F1F23;
  --shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--ff); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--acc-ink); }
a:hover { text-decoration: underline; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.hidden { display: none !important; }
.muted { color: var(--fg2); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Header */
.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
.site-header .wrap { height: 56px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-family: var(--ff-display); font-weight: 600; font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand img { width: auto; height: 40px; display: block; }   /* the SVG mark (assets/lmi-mark.svg, 2026-11-10) */
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 15px; }
.brand, .site-header nav a { white-space: nowrap; }
.site-header nav a { color: var(--fg2); text-decoration: none; padding: 10px; border-radius: 999px; }
.site-header nav a:hover { color: var(--fg); background: var(--soft); }
.site-header nav a[aria-current="page"] { color: var(--fg); background: var(--soft); }
/* FAQ only for newcomers (2026-11-09): bell.js sets html.lmi-regular for members with 3+ contests or 10+ Expo solves.
   On phones newcomers get FAQ in place of Community. */
.lmi-regular .site-header nav .nav-faq { display: none; }
@media (max-width: 560px) { html:not(.lmi-regular) .site-header nav .nav-cm { display: none; } }
@media (max-width: 560px) { .site-header nav .wide { display: none; } }
/* Phones (2026-11-07): the header's Discussion link takes too much room. On the contest page only its badges stay (the
   red open-claims count, the new-posts dot), still opening the discussion; with neither, it takes no space. The score
   page has a Discussion tab, so its header link goes. */
@media (max-width: 560px) {
  .nav-disc-text, .site-header nav .nav-disc-link { display: none; }
  #nav-disc { min-width: 24px; padding: 10px 4px; }
  #nav-disc:not(:has(.nav-claims:not(.hidden))):not(:has(.nav-dot:not(.hidden))) { display: none; }
  #nav-disc .nav-claims { margin-left: 0; }
}
@media (max-width: 400px) { .site-header nav { font-size: 14px; } .site-header nav a { padding: 10px 6px; } }

/* Solve bar (replaces the header while solving) */
.solve-bar { position: sticky; top: 0; z-index: 20; background: var(--bar); color: var(--bar-fg); }
.solve-bar .wrap { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 4px; }
.solve-bar .list-btn { height: 44px; padding: 0 12px; border: none; background: transparent; color: var(--bar-fg); display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; cursor: pointer; border-radius: 999px; }
.solve-bar .list-btn:hover { background: var(--bar-2); }
.solve-bar .title { display: none; color: var(--bar-fg2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solve-bar .title strong { color: var(--bar-fg); font-weight: 600; }
.timer { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.timer svg { color: var(--acc); }
.timer.low { color: var(--acc); }
.solve-bar .score { font-size: 15px; font-weight: 600; color: var(--bar-fg2); white-space: nowrap; }
.time-track { height: 4px; background: var(--bar-2); }
.time-track div { height: 4px; background: var(--acc); width: 100%; transition: width 1s linear; }
@media (min-width: 1000px) {
  .solve-bar .wrap { padding-left: 16px; }
  .solve-bar .list-btn { display: none; }
  .solve-bar .title { display: block; flex: 1; }
}

/* Overview */
.overview { padding-top: 20px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.overview.has-sticky { padding-bottom: 170px; }
@media (min-width: 1000px) { .overview, .overview.has-sticky { padding-bottom: 40px; max-width: 760px; } }
.contest-title { font-family: var(--ff-display); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; }
/* WPF logo on GP contests (assets/wpf-gp-logo.png, dark text on transparent: a white backing in dark mode) */
.gp-logo { display: block; height: 36px; width: auto; align-self: flex-start; margin-bottom: 4px; }
:root[data-theme="dark"] .gp-logo { background: #fff; padding: 4px 8px; border-radius: 8px; box-sizing: content-box; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fact span { font-size: 12px; color: var(--fg2); }
.fact strong { font-size: 17px; font-weight: 600; }
.fact small { font-size: 13px; color: var(--fg2); }
/* Status "Running" (2026-11-07): the whole card tinted green, the word green with a softly pulsing dot */
.fact.live { background: var(--ok-soft); border-color: var(--ok); }
.fact.live span, .fact.live small { color: var(--ok); }
.fact.live strong { color: var(--ok); display: inline-flex; align-items: center; gap: 8px; }
.fact.live strong::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: live-dot 2s ease-out infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .fact.live strong::before { animation: none; } }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--fg2); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.card-pad { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card h2 { font-size: 15px; font-weight: 600; }
.notes { font-size: 14px; color: var(--fg3); overflow-wrap: anywhere; }
.notes.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.link-btn { align-self: flex-start; border: none; background: none; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--acc-ink); cursor: pointer; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--fg); text-decoration: none; }
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-row:hover { text-decoration: none; background: var(--soft); }
.file-row .grow { flex: 1; display: flex; flex-direction: column; }
.file-row .grow strong { font-size: 15px; font-weight: 600; }
.file-row .grow span { font-size: 13px; color: var(--fg2); }
.file-row svg { color: var(--fg2); flex-shrink: 0; }
.inline-links { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.pw { display: flex; align-items: center; gap: 10px; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.pw .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pw .grow span { font-size: 13px; color: var(--fg2); }
.pw code { font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.small-note { font-size: 13px; color: var(--fg2); }

/* Action bar: a card; the short start and countdown bars stick to the bottom on phones */
.action-bar { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.action-bar .inner { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 999px) {
  .action-bar.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); }
  .action-bar.sticky .inner { max-width: 760px; margin: 0 auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
}
.state-msg { font-size: 15px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 32px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--fg); }

/* Buttons */
.btn { height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; border-color: var(--fg2); }
.btn-primary { background: var(--acc); border-color: var(--acc); color: #16100A; font-weight: 700; font-size: 17px; }
.btn-primary:hover { background: var(--acc-hover); border-color: var(--acc-hover); }
.btn-dark { background: var(--fg); border-color: var(--fg); color: var(--bg); font-weight: 700; }
.btn-dark:hover { border-color: var(--fg); opacity: 0.9; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-block { width: 100%; }
.icon-btn { width: 52px; height: 52px; padding: 0; flex-shrink: 0; }

/* Login */
.login-form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--fg2); }
.field input, .field textarea { height: 46px; width: 100%; border: 1.5px solid var(--line2); border-radius: 10px; padding: 0 12px; font-size: 16px; font-weight: 500; color: var(--fg); background: var(--card); }
.field textarea { height: auto; min-height: 120px; padding: 10px 12px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
.field input.invalid { border-color: var(--bad); }
.form-error { font-size: 14px; color: var(--bad); background: var(--bad-soft); border-radius: 10px; padding: 8px 12px; }

/* Solving */
.solve { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* Laptop and wider: the puzzle list on the left; the grid with the answer boxes directly below it (the user's request,
   2026-11-07: answers anywhere but under the grid are very inconvenient) */
@media (min-width: 1000px) {
  .solve { grid-template-columns: 280px minmax(0, 1fr); gap: 16px 24px; padding: 24px 16px; max-width: 1440px; margin: 0 auto; align-items: start; }
  .solve .plist { grid-column: 1; grid-row: 1 / span 2; }
  .solve .pmain { grid-column: 2; grid-row: 1; }
  .solve .panswer { grid-column: 2; grid-row: 2; }
}
.plist { display: none; padding: 16px; }
.solve.show-list .plist { display: block; }
.solve.show-list .pmain, .solve.show-list .panswer { display: none; }
@media (min-width: 1000px) {
  .plist { display: block; padding: 0; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
  .solve.show-list .pmain, .solve.show-list .panswer { display: block; }
}
.plist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.plist-head h1 { font-family: var(--ff-display); font-weight: 600; font-size: 26px; }
@media (min-width: 1000px) { .plist-head { display: none; } }
.plist ul { list-style: none; margin: 0; padding: 0; }
.plist .group { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); padding: 14px 14px 6px; }
.plist .card { padding: 4px 0; overflow: hidden; }
.prow { width: 100%; min-height: 48px; padding: 6px 14px; display: flex; align-items: center; gap: 12px; border: none; background: transparent; text-align: left; cursor: pointer; color: var(--fg); }
.prow:hover { background: var(--soft); }
.prow.current { background: var(--current); font-weight: 700; }
.dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--fg3); }
.dot.ok { background: var(--ok); color: var(--card); }
.dot.bad { background: var(--bad-soft); color: var(--bad); }
.prow .name { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .status { font-size: 13px; font-weight: 600; white-space: nowrap; }
.prow .status.ok { color: var(--ok); }
.prow .status.bad { color: var(--bad); }
.prow .pts { min-width: 44px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plist .submit-all { margin-top: 12px; }

.pmain { padding: 14px 16px 0; min-width: 0; }
@media (min-width: 1000px) { .pmain { padding: 0; } }
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.phead h1 { font-family: var(--ff-display); font-weight: 600; font-size: 26px; line-height: 1.1; }
@media (min-width: 1000px) { .phead h1 { font-size: 32px; } }
.phead .meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 15px; }
.phead .meta a { font-weight: 600; padding: 10px 0; }
.grid-box { position: relative; width: 100%; border: 1px solid var(--line2); border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.grid-box iframe { display: block; border: 0; transform-origin: 0 0; background: #FFFFFF; }
.grid-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5E574F; font-size: 14px; }
.paper-note { border: 1px dashed var(--line2); border-radius: 12px; padding: 24px 16px; text-align: center; color: var(--fg2); font-size: 15px; background: var(--card); }

.panswer { padding: 0; }
.answer-card { margin-top: 16px; background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; }
@media (min-width: 1000px) { .answer-card { margin-top: 0; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; position: static; padding: 16px; } }
.answer-card h2 { font-size: 16px; font-weight: 600; display: none; }
@media (min-width: 1000px) { .answer-card h2 { display: block; } }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.keys input { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.keys input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--fg2); }
.feedback { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; }
.feedback.bad { background: var(--bad-soft); color: var(--bad); }
.feedback.ok { background: var(--ok-soft); color: var(--ok); }
.feedback.info { background: var(--soft); color: var(--fg2); }
.answer-actions { display: flex; gap: 8px; }
.answer-actions .btn-primary { flex: 1; }
.prevnext { display: none; justify-content: space-between; font-size: 14px; font-weight: 600; }
@media (min-width: 1000px) { .prevnext { display: flex; } .answer-actions .icon-btn { display: none; } }

/* Finished summary */
.result { background: var(--bar); color: var(--bar-fg); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.result .big { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.result .big div { display: flex; flex-direction: column; gap: 2px; }
.result .big div:last-child { align-items: flex-end; }
.result .big span { font-size: 13px; color: var(--bar-fg2); }
.result .big strong { font-family: var(--ff-display); font-size: 44px; font-weight: 600; line-height: 1; }
.result .big strong small { font-size: 18px; color: var(--bar-fg2); font-weight: 500; }
.result .big .pts { color: var(--acc); }
.result .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--bar-2); padding-top: 14px; }
.result .row3 div { display: flex; flex-direction: column; gap: 2px; }
.result .row3 span { font-size: 12px; color: var(--bar-fg2); }
.result .row3 strong { font-size: 17px; font-weight: 600; }
.badge-done { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 4px 10px; border-radius: 999px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.site-footer { padding: 24px 0 40px; font-size: 13px; color: var(--fg2); }
.site-footer .wrap { display: flex; flex-direction: column; gap: 8px; }
.solving .site-footer { display: none; }
@media (min-width: 1000px) { .solving .site-footer { display: block; } }

/* Score page */
.score-page { padding-top: 20px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1000px) { .score-page { max-width: 900px; } }
.tabs { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; height: 40px; padding: 0 10px; border: none; border-radius: 999px; background: transparent; color: var(--fg2); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgba(22, 16, 10, 0.12); }
.me-card { background: var(--bar); color: var(--bar-fg); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 16px; }
.me-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-card .grow span { font-size: 13px; color: var(--bar-fg2); }
.me-card .grow strong { font-size: 17px; }
.me-card .num { font-family: var(--ff-display); font-size: 34px; font-weight: 600; line-height: 1; }
.me-card .num.pts { color: var(--acc); }
.me-card .lbl { font-size: 12px; color: var(--bar-fg2); display: block; margin-top: 2px; }
.me-card button { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bar-2); background: var(--bar-2); color: var(--bar-fg); font-weight: 600; font-size: 14px; cursor: pointer; }
.search { height: 46px; width: 100%; border: 1.5px solid var(--line2); border-radius: 999px; padding: 0 18px; font-size: 16px; background: var(--card); color: var(--fg); }
.search:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
.rlist { list-style: none; margin: 0; padding: 0; }
.rrow { border-top: 1px solid var(--line); }
.rrow:first-child { border-top: none; }
.rrow > button { width: 100%; min-height: 56px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; border: none; background: transparent; text-align: left; cursor: pointer; color: var(--fg); }
.rrow > button:hover { background: var(--soft); }
.rrow.self > button { background: var(--current); }
.rrow .rank { width: 36px; flex-shrink: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg2); }
.rrow .rank.top { color: var(--acc-ink); }
.rrow .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rrow .who strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .who span { font-size: 13px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .num { text-align: right; display: flex; flex-direction: column; flex-shrink: 0; }
.rrow .num strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.rrow .num span { font-size: 12px; color: var(--fg2); }
.rrow .details { display: none; padding: 0 14px 12px 62px; font-size: 14px; color: var(--fg2); }
.rrow.open .details { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rrow .details b { color: var(--fg); font-weight: 600; }
.tag-unoff { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg2); background: var(--soft); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.prow2 { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.prow2:first-child { border-top: none; }
.prow2 .top { display: flex; align-items: baseline; gap: 10px; }
.prow2 .top strong { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.prow2 .top span { font-size: 14px; color: var(--fg2); white-space: nowrap; }
.bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.bar div { height: 8px; background: var(--ok); border-radius: 999px; }
.prow2 .sub { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--fg2); flex-wrap: wrap; }
.sol { font-family: ui-monospace, Consolas, monospace; color: var(--fg); overflow-wrap: anywhere; }
.subrow { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.subrow:first-child { border-top: none; }
.subrow .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.subrow .grow strong { font-size: 15px; font-weight: 600; }
.subrow .grow span { font-size: 13px; color: var(--fg2); overflow-wrap: anywhere; }
.subrow .res { font-size: 14px; font-weight: 600; white-space: nowrap; }
.subrow .res.ok { color: var(--ok); }
.subrow .res.bad { color: var(--bad); }
.btn-sm { height: 40px; padding: 0 14px; font-size: 14px; }
.msg { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.msg:first-child { border-top: none; }
.avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: var(--soft); color: var(--fg2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msg .head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--fg2); }
.msg .head strong { font-size: 15px; color: var(--fg); }
.msg .text { font-size: 15px; color: var(--fg3); overflow-wrap: anywhere; }
.msg .text blockquote { margin: 4px 0; padding: 6px 10px; background: var(--soft); border-radius: 8px; }
.msg .text img { max-width: 100%; height: auto; }
.composer { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.composer textarea { min-height: 90px; }
.composer .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty { padding: 24px 16px; text-align: center; color: var(--fg2); font-size: 15px; }
@media (max-width: 400px) { .tabs button { font-size: 14px; padding: 0 8px; } }

/* Paper solving: every puzzle's answer boxes on one page, for paper solvers */
.mode-switch { padding-top: 12px; }
@media (min-width: 1000px) { .mode-switch { max-width: 900px; } #app.mode-grid .mode-switch { max-width: 1440px; } .mode-switch .tabs { max-width: 420px; } }
.sheet { padding-top: 12px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1000px) { .sheet { max-width: 900px; } }
.sheet .group { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); padding: 8px 2px 0; }
/* Paper sheet: one group at a time behind tabs (2026-11-11) */
.sheet-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.sheet-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1.5px solid var(--line2); border-radius: 999px; background: var(--card); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sheet-tabs button[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.sheet-tabs small { font-size: 12px; font-weight: 600; color: var(--fg2); font-variant-numeric: tabular-nums; }
.sheet-tabs button[aria-selected="true"] small { color: var(--bg); opacity: 0.75; }
.sheet-tabs small.all { color: var(--ok); }
.sheet-tabs button[aria-selected="true"] small.all { color: var(--bg); opacity: 1; }
.srow { padding: 12px 14px; border-top: 1px solid var(--line); }
.srow:first-child { border-top: none; }
.srow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.srow-head .name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-head .status { font-size: 13px; font-weight: 600; white-space: nowrap; }
.srow-head .status.ok { color: var(--ok); }
.srow-head .status.bad { color: var(--bad); }
.srow-head .pts { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srow-body { display: flex; gap: 8px; align-items: flex-end; }
.srow-body .keys { flex: 1; min-width: 0; }
.srow-body .btn { height: 46px; flex-shrink: 0; }
.srow .fb { font-size: 13px; margin-top: 6px; }
.srow .fb.ok { color: var(--ok); }
.srow .fb.bad { color: var(--bad); }
.srow .fb.info { color: var(--fg2); }
/* From 760px: each puzzle on one line, like the old page (2026-11-11): number, name and points in a fixed-width column
   (so the boxes and the Submit buttons line up from row to row), then the boxes, with their label inside on the left
   ("A |"), 36px tall, sharing the rest of the line; Submit at the end. 1 to 3 boxes always stay on one line. */
@media (min-width: 760px) {
  .srow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 2px; padding: 6px 14px; }
  .srow-head { flex: 0 0 240px; min-width: 0; margin-bottom: 0; }
  .srow-body { flex: 1; min-width: 0; align-items: center; }
  .srow-body .keys { gap: 8px; align-items: start; }   /* a box with a message below doesn't stretch the others */
  .srow-body .keys[data-n="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  .srow-body .keys[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .srow-body .keys[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .srow-body .field { flex-direction: row; align-items: stretch; gap: 0; position: relative; }
  .srow-body .key-hint { display: flex; align-items: center; flex-shrink: 0; padding: 0 10px; background: var(--soft); border: 1.5px solid var(--line2); border-right: 0; border-radius: 10px 0 0 10px; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap; }
  .srow-body .key-hint:empty { display: none; }
  .srow-body .field input { height: 36px; min-width: 0; flex: 1; }
  .srow-body .key-hint:not(:empty) + input, .srow-body .key-hint:not(:empty) + textarea { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .srow-body .field textarea { flex: 1; min-width: 0; }
  /* Short messages (progress like "3 / 7") inside the box on the right; a format problem shows below the box, making
     that row taller, once the player has left the box or pressed Submit (k-told); while typing, only the red border */
  .srow-body .field { flex-wrap: wrap; }
  .srow-body .k-bad .key-msg { display: none; }
  .srow-body .k-bad.k-told .key-msg { display: block; position: static; transform: none; flex-basis: 100%; max-width: none; padding: 3px 0 0; border-radius: 0; background: none; white-space: normal; }
  .srow-body .key-msg { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); max-width: 60%; padding: 2px 8px 2px 6px; border-radius: 0 8px 8px 0; background: var(--card); font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .srow-body .btn { height: 36px; }
  .srow .fb { flex-basis: 100%; margin: 0 0 2px 46px; }
}
@media (min-width: 1200px) { .srow-head { flex-basis: 300px; } }
.sheet-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow); }
.sheet-bar .inner { max-width: 900px; margin: 0 auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center; }
.sheet-bar .inner span { flex: 1; font-size: 14px; color: var(--fg2); }
.sheet-bar .btn { height: 48px; }
.has-sheet-bar .toast { bottom: 96px; }
/* Under the grid the boxes sit side by side, at a normal size */
@media (min-width: 1000px) { .answer-card .keys { grid-template-columns: repeat(auto-fit, minmax(180px, 280px)) !important; } }
.srow-head .status:not(.ok):not(.bad), .prow .status:not(.ok):not(.bad) { color: var(--fg2); }

/* Booklets & notes card, shown in both solving modes */
.info-card { padding: 4px 0; }
.info-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.info-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.info-links .pw-inline { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 500; color: var(--fg2); }
.info-links .pw-inline code { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--fg); }
.info-links .pw-inline button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; }
.info-card details { border-top: 1px solid var(--line); }
.online-help ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.info-card summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.info-card summary::-webkit-details-marker { display: none; }
.info-card summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--fg2); border-bottom: 2px solid var(--fg2); transform: rotate(45deg); transition: transform 0.2s; }
.info-card details[open] summary::after { transform: rotate(-135deg); }
.info-card .notes { padding: 0 14px 12px; }
.badge-new { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #16100A; background: var(--acc); border-radius: 999px; padding: 2px 8px; }
#info-grid { margin-bottom: 12px; }

/* How will you solve? (start card) */
.solve-choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.solve-choice legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.solve-choice label { flex: 1; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--fg2); cursor: pointer; }
.solve-choice label:has(input:checked) { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgba(22, 16, 10, 0.12); }
.solve-choice label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 1px; }
.solve-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.overview.has-sticky { padding-bottom: 290px; }

/* Answer box states: typing (dark ring), not finished (counter), right format (green check), wrong format (red + reason).
   Red is kept clearly apart from the orange accent. */
:root { --err: #B42318; }
:root[data-theme="dark"] { --err: #FF7A70; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--fg); outline-offset: 1px; border-color: transparent; }
.field input.invalid { border-color: var(--line2); }
.field.k-ok input { border-color: var(--ok); padding-right: 38px; background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .field.k-ok input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237CD3A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.field.k-bad input, .field.k-bad textarea { border: 2px solid var(--err); }
.field.k-bad input:focus { outline-color: var(--err); }
.key-msg { font-size: 12px; font-weight: 500; color: var(--fg2); font-variant-numeric: tabular-nums; }
.key-msg:empty { display: none; }
.k-bad .key-msg { color: var(--err); font-weight: 600; }
.k-ok .key-msg { color: var(--ok); }

/* Discussion (discussion.js) */
.disc { display: flex; flex-direction: column; gap: 12px; }
.disc-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.disc-filter button { flex-shrink: 0; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.disc-filter button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.disc-compose { position: relative; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.disc-compose textarea { min-height: 84px; resize: vertical; }
.disc-compose .row { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; }
.disc-compose .row .check { font-size: 14px; }
.disc-compose .replying { font-size: 13px; color: var(--fg2); display: flex; gap: 8px; align-items: center; }
.disc-suggest { position: absolute; left: 16px; right: 16px; z-index: 30; margin: 0; padding: 4px 0; list-style: none; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); max-height: 260px; overflow: auto; }
.disc-suggest li { padding: 8px 12px; display: flex; gap: 10px; align-items: baseline; cursor: pointer; font-size: 14px; }
.disc-suggest li[aria-selected="true"], .disc-suggest li:hover { background: var(--soft); }
.disc-suggest li span { color: var(--fg2); font-size: 12px; }
.dpost { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.dpost:first-child { border-top: none; }
.dpost.reply { padding-left: 0; border-top: none; padding-top: 6px; }
.dpost .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dpost .head { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; font-size: 13px; color: var(--fg2); }
.dpost .head strong { font-size: 15px; color: var(--fg); }
.dpost .head a { color: var(--fg); text-decoration: none; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; }
.badge.author { background: var(--chip); color: var(--acc-ink); }
.badge.mod { background: var(--ok-soft); color: var(--ok); }
.badge.anon { background: var(--soft); color: var(--fg2); }
.dpost .text { font-size: 15px; color: var(--fg3); overflow-wrap: anywhere; line-height: 1.5; }
.dpost .text.muted-text { font-style: italic; color: var(--fg2); }
.mention { display: inline; border: none; padding: 0 4px; border-radius: 6px; background: var(--chip); color: var(--acc-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.dpost .actions { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.react { height: 30px; min-width: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.react.on { border-color: var(--acc); background: var(--chip); }
.react b { font-size: 12px; font-weight: 600; color: var(--fg2); }
/* Who reacted: the count is its own tap target; the names line under the actions */
.react b { padding: 4px 2px; margin: -4px -2px; border-radius: 6px; }
.react b:hover { background: var(--soft); }
.react-who { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--fg2); }
.react-who .chip-x { width: 22px; height: 22px; margin-left: 4px; vertical-align: middle; }
.dlink { height: 30px; padding: 0 8px; border: none; background: none; color: var(--fg2); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 999px; }
.dlink:hover { color: var(--fg); background: var(--soft); }
.dpost .replies { display: flex; flex-direction: column; margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--line); }
.mod-note { font-size: 12px; font-weight: 600; color: var(--err); }
.legacy summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.legacy summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.forum-link { margin-left: auto; font-size: 13px; font-weight: 600; }
.forum-ro { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--fg2); font-size: 12px; font-weight: 600; }
.legacy .msg:first-child { border-top: 1px solid var(--line); }

/* Quick feedback */
.fb-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.fb-card h2 { font-size: 16px; }
.stars { display: flex; gap: 4px; }
.stars button { width: 44px; height: 44px; border: none; background: none; padding: 0; cursor: pointer; color: var(--line2); }
.stars button.on { color: var(--acc); }
.stars svg { width: 32px; height: 32px; }
.fb-puzzles { display: flex; flex-direction: column; }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fb-row .name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: flex; background: var(--soft); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { height: 30px; padding: 0 10px; border: none; border-radius: 999px; background: transparent; color: var(--fg2); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgba(22, 16, 10, 0.12); }
.heart { width: 36px; height: 36px; border: none; background: none; padding: 0; cursor: pointer; color: var(--line2); display: flex; align-items: center; justify-content: center; }
.heart.on { color: #D6336C; }
.fb-saved { font-size: 13px; color: var(--ok); min-height: 18px; }
.diffbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--soft); }
.diffbar .e { background: #6BB38A; } .diffbar .o { background: #C9B45C; } .diffbar .h { background: #D9733F; }
.fb-sum { display: flex; gap: 12px; font-size: 13px; color: var(--fg2); flex-wrap: wrap; }
.fb-more summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.fb-more summary::-webkit-details-marker { display: none; }
.fb-more summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--fg2); border-bottom: 2px solid var(--fg2); transform: rotate(45deg); transition: transform 0.2s; }
.fb-more[open] summary::after { transform: rotate(-135deg); }
.react[disabled] { cursor: default; opacity: 1; }

/* Announcements, visibility labels */
.ann-list { padding: 4px 0; border-color: var(--acc); }
.ann-title { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acc-ink); }
.dpost.ann .text { color: var(--fg); font-weight: 500; }
.vis-note { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--fg2); background: var(--soft); border-radius: 999px; padding: 1px 8px; }
.vis-note.pub { color: var(--ok); background: var(--ok-soft); }

/* Discussion panel on the contest page: full screen on phones, a side panel on desktop */
.dpanel { position: fixed; inset: 0; z-index: 60; }
.dpanel-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.dpanel-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: var(--bg); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2); }
@media (min-width: 760px) { .dpanel-sheet { width: 480px; } }
.dpanel-sheet header { flex-shrink: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.dpanel-sheet header h2 { font-size: 17px; font-weight: 700; }
.dpanel-close { width: 44px; height: 44px; border: none; background: none; color: var(--fg); border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dpanel-close:hover { background: var(--soft); }
.dpanel-body { flex: 1; overflow: auto; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
body.dpanel-open { overflow: hidden; }

/* Discussion button in the solving bar, and the discussion card */
.disc-btn { position: relative; width: 44px; height: 44px; border: none; background: transparent; color: var(--bar-fg); border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.disc-btn:hover { background: var(--bar-2); }
.disc-btn .dot { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 999px; background: var(--acc); border: 2px solid var(--bar); }
/* The discussion on the contest page itself (overview and finished screens) */
.disc-inline { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 12px; }
.disc-inline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disc-inline-head h2 { font-family: var(--ff-display); font-size: 22px; font-weight: 600; }
.disc-inline > .small-note { margin-top: -4px; }
/* Replies to the reader and mentions of them */
.dpost.for-me { background: var(--me-soft); }
.dpost.reply.for-me { padding-left: 10px; }
.badge.for-me-tag { background: var(--me-soft); color: var(--me); border: 1px solid var(--me); }
.badge-new.to-me { background: var(--me); color: var(--card); }
.nav-dot.to-me, .disc-btn .dot.to-me { background: var(--me); }
.more-replies { align-self: flex-start; margin: 6px 0 4px; font-weight: 600; }
.ann-inline { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.ann-inline .ann-item { font-size: 14px; color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.ann-inline .ann-item small { display: block; font-weight: 400; color: var(--fg2); font-size: 12px; }
.ann-inline .ann-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acc-ink); }
.info-disc { border-top: 1px solid var(--line); width: 100%; padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-left: 0; border-right: 0; border-bottom: 0; background: none; color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.info-disc:hover { background: var(--soft); }
.info-card .ann-inline { border-top: none; border-bottom: 1px solid var(--line); }

/* Header: logo only on narrow phones so the links fit; dot for new discussion posts */
@media (max-width: 440px) { .brand-text { display: none; } .site-header .wrap { gap: 8px; } }
.site-header nav a { position: relative; }
.nav-dot { position: absolute; top: 6px; right: 2px; width: 8px; height: 8px; border-radius: 999px; background: var(--acc); }

/* Puzzle filter chips wrap instead of scrolling sideways */
.disc-filter { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.disc-filter button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-count { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--soft); color: var(--fg2); font-size: 12px; text-align: center; }
.disc-filter button[aria-pressed="true"] .chip-count { background: rgba(255, 255, 255, 0.2); color: inherit; }
.disc-filter .chip-more { border-style: dashed; color: var(--acc-ink); }

/* Discussion panel: full screen option on desktop (phones are always full screen) */
.dpanel-tools { display: flex; align-items: center; gap: 2px; }
.dpanel-expand { display: none; }
@media (min-width: 760px) {
  .dpanel-expand { display: flex; }
  .dpanel.full .dpanel-sheet { width: 100%; }
  .dpanel.full .dpanel-body > .disc, .dpanel.full .dpanel-body > .card { max-width: 860px; margin: 0 auto; }
  .dpanel.full .dpanel-body { padding-top: 20px; }
}

/* Favourite puzzles (quick feedback) */
.fb-more > .small-note { display: block; margin: 2px 0 8px; }
.fav-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fav { height: 36px; max-width: 100%; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav svg { width: 18px; height: 18px; color: var(--line2); flex-shrink: 0; }
.fav.on { border-color: #D6336C; background: #FCE8EF; color: #8C1D44; }
.fav.on svg { color: #D6336C; }
:root[data-theme="dark"] .fav.on { background: #3A1724; color: #F7A8C1; }
.fav-count { color: #B02A5B; font-weight: 600; }
:root[data-theme="dark"] .fav-count { color: #F7A8C1; }
.fb-sum { flex-direction: column; gap: 2px; }

/* Claims: private threads in the discussion, highlighted while open */
.claim-list { padding: 4px 0; border-color: #C2410C; }
.claim-title { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg2); }
.dpost.claim-open { background: var(--current); }
.claim-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.claim-answer { font-size: 14px; color: var(--fg2); overflow-wrap: anywhere; }
.claim-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: var(--soft); color: var(--fg2); white-space: nowrap; }
.claim-tag.open { background: #FDE7D6; color: #9A3412; }
.claim-tag.ok { background: var(--ok-soft); color: var(--ok); }
.claim-tag.bad { background: var(--soft); color: var(--err); }
:root[data-theme="dark"] .claim-tag.open { background: #3A2413; color: #FFB27A; }
.btn.claim-accept { border-color: var(--ok); color: var(--ok); }
.info-disc .claim-tag { margin-left: auto; }
.nav-claims { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #C2410C; color: #FFFFFF; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* Puzzles tab: your answers under each puzzle; Feedback tab: favourites ranking */
.my-answer { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 10px; margin-top: 2px; border-radius: 10px; background: var(--soft); font-size: 14px; }
.my-answer .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.my-answer .res { font-weight: 600; white-space: nowrap; }
.my-answer .res.ok { color: var(--ok); }
.my-answer .res.bad { color: var(--bad); }
.fav-rank { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.fav-rank li span:first-child { margin-right: 8px; }
.wrong-char { color: var(--err); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Score page: players who finished since your last look at the results, and players still solving */
.rrow.is-new { background: var(--current); }
.rrow .who .badge-new { margin-left: 6px; vertical-align: 2px; }
.tag-solving { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }
.new-since { margin-top: 10px; }
/* Score page: players who solved every puzzle show their time */
.rrow .num .all-solved { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Discussion: spoilers, quotes, posters' results, New marks, author's notes */
.spoiler { background: var(--fg3); color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.spoiler a, .spoiler .mention { color: transparent; background: none; pointer-events: none; }
.spoiler.shown { background: var(--soft); color: inherit; cursor: auto; user-select: text; }
.spoiler.shown a, .spoiler.shown .mention { color: var(--acc-ink); pointer-events: auto; }
.dpost .text blockquote { margin: 2px 0 6px; padding: 4px 10px; border-left: 3px solid var(--line2); color: var(--fg2); font-size: 14px; }
.compose-tools { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: -4px; }
.compose-tools .dlink { border: 1px solid var(--line2); }
.post-result { font-size: 12px; color: var(--fg2); background: var(--soft); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.quote-btn { position: fixed; z-index: 60; display: none; height: 36px; padding: 0 14px; border: none; border-radius: 999px; background: var(--bar); color: var(--bar-fg); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.quote-btn.on { display: block; }
.seen-line { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg2); border-top: 1px solid var(--line); }
.seen-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.seen-line + .dpost { border-top: none; }
.note-list { padding: 4px 0; border-color: var(--ok); }
.note-title { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ok); }
.dpost.note .text { color: var(--fg); }

/* Notification bell (bell.js): replies to you, mentions and claim decisions across contests */
/* Account menu in the header (bell.js, 2026-11-07): the member's name opens Your profile, Settings, Dark mode, Log out */
.umenu { position: relative; display: inline-flex; }
.umenu-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px 0 12px; border: none; border-radius: 999px; background: none; color: var(--fg2); font: inherit; font-size: 15px; cursor: pointer; }
.umenu-btn:hover, .umenu-btn[aria-expanded="true"] { background: var(--soft); color: var(--fg); }
.umenu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .umenu-name { max-width: 72px; } .umenu-btn { padding: 0 6px 0 8px; } }
.umenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 200px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; }
.site-header .umenu-pop a, .umenu-pop button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: none; border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.site-header .umenu-pop a:hover, .umenu-pop button:hover { background: var(--soft); }
.umenu-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--line2); position: relative; flex-shrink: 0; transition: background 0.15s; }
.umenu-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); transition: left 0.15s; }
.umenu-dark[aria-checked="true"] .umenu-switch { background: var(--acc); }
.umenu-dark[aria-checked="true"] .umenu-switch::after { left: 16px; }
/* Confirmation and question dialogs (assets/dialog.js, 2026-11-07) */
.lmi-dlg { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--fg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28); }
.lmi-dlg::backdrop { background: rgba(0, 0, 0, 0.45); }
.lmi-dlg-box { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.lmi-dlg h2 { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lmi-dlg p { font-size: 14px; color: var(--fg2); overflow-wrap: anywhere; }
.lmi-dlg .field textarea { min-height: 84px; }
.lmi-dlg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lmi-dlg-danger { background: var(--bad); border-color: var(--bad); color: var(--card); font-weight: 700; }
.lmi-dlg-danger:hover { border-color: var(--bad); opacity: 0.9; }
.bell { position: relative; width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; color: var(--fg2); border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bell:hover, .bell[aria-expanded="true"] { background: var(--soft); color: var(--fg); }
.bell-n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--me); color: var(--card); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--card); box-sizing: content-box; }
.bell-box { position: absolute; z-index: 70; width: 380px; max-width: calc(100vw - 16px); max-height: min(70vh, 560px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16); }
@media (max-width: 520px) { .bell-box { left: 8px; right: 8px !important; width: auto; } }
.bell-head { padding: 14px 16px 8px; font-family: var(--ff-display); font-size: 17px; }
.bell-empty { padding: 8px 16px 18px; font-size: 14px; color: var(--fg2); }
.bell-list { list-style: none; margin: 0; padding: 0 0 6px; }
.bell-list li { border-top: 1px solid var(--line); }
.bell-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; color: var(--fg); text-decoration: none; }
.bell-list a:hover { background: var(--soft); text-decoration: none; }
.bell-list li.unread a { background: var(--me-soft); box-shadow: inset 3px 0 0 var(--me); }
.bell-line { font-size: 14px; }
.bell-text { font-size: 14px; color: var(--fg3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bell-meta { font-size: 12px; color: var(--fg2); }
/* A post opened from a link (#dpost-N) flashes briefly */
@keyframes dpost-flash { from { background: var(--chip); } to { background: transparent; } }
.dpost.flash { animation: dpost-flash 2.4s ease-out; }
.site-header nav { min-width: 0; }

/* Account pages (/account/): register, log in, forgot and reset password */
.acct { max-width: 560px; margin: 0 auto; padding: 24px 0 48px; display: flex; flex-direction: column; gap: 14px; }
.acct h1 { font-family: var(--ff-display); font-size: 30px; font-weight: 600; line-height: 1.15; }
.acct > .muted a, .acct-card .link-btn { font-weight: 600; }
.acct form { display: flex; flex-direction: column; gap: 14px; }
.acct-card { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.acct-card h2 { font-family: var(--ff-display); font-size: 19px; font-weight: 600; }
.acct-card h2 .opt { font-family: var(--ff); font-size: 12px; font-weight: 600; color: var(--fg2); background: var(--soft); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 3px; }
.acct-card > .small-note { margin-top: -8px; }
.acct .field select { height: 46px; width: 100%; border: 1.5px solid var(--line2); border-radius: 10px; padding: 0 10px; font-size: 16px; font-weight: 500; color: var(--fg); background: var(--card); }
.acct .field select:focus { outline: 2px solid var(--fg); outline-offset: 1px; border-color: transparent; }
.acct .field .invalid, .acct .field input.invalid { border-color: var(--bad); border-width: 2px; }
.acct .hint { font-weight: 400; color: var(--fg2); font-size: 13px; }
.field-msg { font-weight: 600; color: var(--bad); font-size: 13px; }
.field-msg:empty { display: none; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 70px; }
.pw-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 12px; border: none; border-radius: 999px; background: var(--soft); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; }
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; font-weight: 500; color: var(--fg2); }
.pw-rules li::before { content: '○ '; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: '✓ '; }
.acct-group { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acct-group legend { font-size: 13px; font-weight: 600; color: var(--fg2); padding: 0; margin-bottom: 6px; }
.choice { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.choice.col { flex-direction: column; }
.genre-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle { height: 38px; padding: 0 14px; border: 1.5px solid var(--line2); border-radius: 999px; background: var(--card); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-toggle[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.chip-toggle[aria-pressed="true"]::before { content: '✓ '; }
.acct-banner { border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.acct-banner.bad { background: var(--bad-soft); color: var(--bad); }
.acct-banner.ok { background: var(--ok-soft); color: var(--ok); }
.acct-done { align-items: stretch; text-align: left; }
.acct-done .link-btn { align-self: center; }
.acct .link-btn { align-self: flex-start; background: none; border: none; padding: 4px 0; color: var(--acc-ink); font-size: 14px; cursor: pointer; text-decoration: none; }
.acct .link-btn:hover { text-decoration: underline; }
.acct .empty { padding: 16px 0; color: var(--fg2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The 4x4 Sudoku */
.sdk-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sdk { display: grid; grid-template-columns: repeat(4, 60px); grid-template-rows: repeat(4, 60px); border: 3px solid var(--fg); background: var(--card); }
.sdk-cell { width: 60px; height: 60px; border: 0; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 30px; font-weight: 600; color: var(--fg); background: var(--card); padding: 0; }
.sdk-cell:nth-child(4n) { border-right: 0; }
.sdk-cell:nth-child(n+13) { border-bottom: 0; }
.sdk-cell.br { border-right: 3px solid var(--fg); }
.sdk-cell.bb { border-bottom: 3px solid var(--fg); }
/* Empty cell: four small digits, 1 2 / 3 4, each one a button */
.sdk-in:not(.filled) { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; align-items: stretch; justify-items: stretch; }
.sdk-in button { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.sdk-in .sdk-cand { min-width: 0; min-height: 0; line-height: 1; font-family: var(--ff); font-size: 13px; font-weight: 500; color: var(--fg2); display: flex; align-items: center; justify-content: center; }
.sdk-in .sdk-cand:hover { background: var(--soft); color: var(--acc-ink); font-weight: 700; }
.sdk-in .sdk-val { line-height: 1; width: 100%; height: 100%; color: var(--acc-ink); font-size: 30px; font-weight: 600; }
.sdk-in .sdk-val:hover { background: var(--soft); }
.sdk-in button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sdk-cell.clash, .sdk-in.clash .sdk-val { background: var(--bad-soft); color: var(--bad); }
.sdk-box.solved .sdk { border-color: var(--ok); }
.sdk-box.solved .sdk-in .sdk-val { color: var(--ok); }
.sdk-status { min-height: 20px; font-size: 14px; font-weight: 600; color: var(--fg2); }
.sdk-box.solved .sdk-status { color: var(--ok); }
/* Account pages: photo or avatar, settings */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.avatar-pick { display: flex; align-items: center; gap: 16px; }
.avatar-face { width: 84px; height: 84px; flex-shrink: 0; border-radius: 999px; overflow: hidden; background: var(--soft); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 28px; font-weight: 600; color: var(--fg2); border: 1px solid var(--line); }
.avatar-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-face.saved { box-shadow: 0 0 0 3px var(--ok); transition: box-shadow .3s; }
.avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.avatar-actions .btn { cursor: pointer; }
.avatar-actions input:focus-visible + .btn, .avatar-actions .btn:focus-within { outline: 2px solid var(--acc); }
.acct-group .legend { font-size: 13px; font-weight: 600; color: var(--fg2); }
.acct-sub { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.acct .field input[disabled] { background: var(--soft); color: var(--fg2); }
.acct .field .opt { font-size: 11px; font-weight: 600; color: var(--fg2); background: var(--soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }

/* Player profile (/players/USERNAME) */
.pl { padding: 20px 16px 48px; }
.pl-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pl-side { flex: 1 1 300px; max-width: 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pl-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px) { .pl-side { max-width: none; } }
.pl-head { display: flex; gap: 14px; align-items: center; }
.pl-face { width: 80px; height: 80px; flex-shrink: 0; border-radius: 999px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 28px; font-weight: 600; color: var(--fg2); }
.pl-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pl-name { font-family: var(--ff-display); font-size: 28px; font-weight: 600; line-height: 1.15; }
.pl-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--acc-ink); background: var(--chip); border-radius: 999px; padding: 3px 10px; }
.pl-badge.ok { color: var(--ok); background: var(--ok-soft); }
.pl-side > .btn { align-self: flex-start; }
.pl-ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pl-rating { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pl-k { font-size: 12px; font-weight: 600; color: var(--fg2); }
.pl-big { font-family: var(--ff-display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.pl-sub { font-size: 13px; color: var(--fg2); }
.pl-sub b { color: var(--fg); }
.pl-spark { width: 100%; height: 48px; margin-top: 6px; display: block; }
.pl-spark-years { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg2); }
.pl-about h2, .pl-h h2 { font-family: var(--ff-display); font-size: 20px; font-weight: 600; }
.pl-about dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px 12px; font-size: 14px; }
.pl-about dt { color: var(--fg2); }
.pl-about dd { margin: 0; }
.pl-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; padding: 14px 4px; }
.pl-totals div { display: flex; flex-direction: column; }
.pl-totals strong { font-family: var(--ff-display); font-size: 24px; font-weight: 600; }
.pl-totals span { font-size: 12px; color: var(--fg2); }
.pl-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pl-h h2 small { font-family: var(--ff); font-size: 14px; font-weight: 500; color: var(--fg2); }
.pl-search { margin-left: auto; }
.pl-search input { height: 38px; width: 200px; max-width: 100%; border: 1.5px solid var(--line2); border-radius: 10px; padding: 0 10px; font-size: 15px; background: var(--card); color: var(--fg); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; }
.pl-chip span { color: var(--fg2); font-weight: 500; }
.pl-chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pl-chip[aria-pressed="true"] span { color: var(--bg); opacity: .8; }
.pl-chip.more { border-style: dashed; background: transparent; color: var(--acc-ink); }
.pl-list { overflow: hidden; }
.pl-list .empty { padding: 16px; color: var(--fg2); }
.pl-year { padding: 7px 14px; background: var(--soft); font-size: 13px; font-weight: 700; color: var(--fg3); border-top: 1px solid var(--line); }
.pl-list > .pl-year:first-child { border-top: none; }
.pl-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.pl-row:hover { background: var(--soft); text-decoration: none; }
.pl-row.pod { background: var(--current); }
.pl-rank { width: 56px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.pl-rank b { font-family: var(--ff-display); font-size: 20px; font-weight: 600; }
.pl-row.pod .pl-rank b { color: var(--acc-ink); }
.pl-rank small, .pl-what small { font-size: 12px; color: var(--fg2); }
.pl-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.pl-what strong { font-size: 15px; font-weight: 600; }
.pl-role { width: 92px; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg2); }
.pl-role.author { color: var(--acc-ink); }
.pl-more, .pl-fold { width: 100%; height: 46px; border: 0; border-top: 1px solid var(--line); background: var(--card); color: var(--acc-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-fold { background: var(--soft); color: var(--fg3); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.pl-fold span:last-child { font-weight: 500; color: var(--fg2); }
/* Contests | Puzzle Expo tabs (2026-11-09; the bar is .tabs) and the Expo tab */
.pl-tabs { max-width: none; }
.pl-tabs button span { font-weight: 500; color: var(--fg2); }
.pl-hlink { margin-left: auto; font-size: 14px; font-weight: 600; }
.pl-hlink.next { margin-left: 14px; }
/* A section's heading, chips and list, and the Expo side cards, spaced like the rest of the page */
#results, #contribs, #expo { display: flex; flex-direction: column; gap: 10px; }
#results:empty, #contribs:empty { display: none; }
#expo-side { display: flex; flex-direction: column; gap: 14px; }
#expo-side:empty { display: none; }
.pl-main .pl-h + .small-note { margin-top: -6px; }
.pl-efacts ul, .pl-egenres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pl-efacts li.ok { color: var(--ok); font-weight: 700; }
.pl-egenres { display: flex; flex-direction: column; gap: 8px; }
.pl-egenres li { display: flex; justify-content: space-between; gap: 10px; }
.pl-egenres li a { color: var(--fg); overflow-wrap: anywhere; }
.pl-egenres li span { color: var(--fg2); font-variant-numeric: tabular-nums; }

/* Contest list (/contests/) */
.cl { padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.cl-title { font-family: var(--ff-display); font-size: 32px; font-weight: 600; line-height: 1.1; }
.cl-series { margin-top: -10px; font-size: 14px; color: var(--fg2); }
.cl-series a { color: var(--acc-ink); font-weight: 600; }
.fact small a { color: inherit; text-decoration: underline; }
.cl-top { display: flex; flex-direction: column; gap: 10px; }
.cl-label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg2); }
.cl-label.run { color: var(--ok); }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cl-card { padding: 16px; display: flex; flex-direction: column; gap: 6px; color: var(--fg); text-decoration: none; }
a.cl-card:hover { text-decoration: none; border-color: var(--fg2); }
.cl-card.run { border: 1.5px solid var(--ok); }
.cl-card strong { font-family: var(--ff-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.cl-card .muted { font-size: 14px; }
.cl-card .btn { margin-top: 6px; height: 46px; }
.cl-open { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 2px 10px; }
.cl-all { display: flex; flex-direction: column; gap: 10px; }
.cl-search input { width: 280px; }
@media (max-width: 600px) { .cl-search { margin-left: 0; width: 100%; } .cl-search input { width: 100%; } }
.cl-select select { height: 36px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font-size: 13px; font-weight: 600; padding: 0 10px; }
.cl-list { overflow: hidden; }
.cl-list .empty { padding: 16px; color: var(--fg2); }
.cl-list > .pl-year:first-child { border-top: none; }
/* One row: the contest name's link covers the whole row; player names sit above it as their own links */
.cl-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; border-top: 1px solid var(--line); }
.cl-row:hover { background: var(--soft); }
.cl-name { font-size: 15px; font-weight: 600; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
a.cl-name::after { content: ''; position: absolute; inset: 0; }
a.cl-name:hover { text-decoration: none; }
a.cl-name:focus-visible { outline: none; }
a.cl-name:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; }
.cl-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-meta { font-size: 12px; color: var(--fg2); }
.cl-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 1px 8px; margin-top: 2px; }
.cl-players { font-size: 12px; color: var(--fg2); }
.cl-players small { font-size: 12px; }
.cl-podium { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cl-pod { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cl-pod b { color: var(--acc-ink); }
.cl-ind { font-size: 12px; color: var(--fg2); }
.cl-p { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.cl-p:hover { text-decoration: underline; color: var(--acc-ink); }
.cl-you { position: absolute; top: 12px; right: 14px; }
.cl-mine { font-size: 12px; font-weight: 700; color: var(--me); background: var(--me-soft); border-radius: 999px; padding: 1px 8px; }
.cl-row:has(.cl-mine) .cl-what { padding-right: 70px; }
@media (min-width: 900px) {
  .cl-row { grid-template-columns: minmax(0, 5fr) 90px minmax(0, 6fr) 70px; gap: 16px; align-items: start; }
  .cl-players { text-align: right; font-size: 14px; color: var(--fg); padding-top: 1px; }
  .cl-players small { color: var(--fg2); }
  .cl-you { position: static; text-align: right; }
  .cl-row:has(.cl-mine) .cl-what { padding-right: 0; }
}

/* Score page: Admin tab */
.admin-tab { display: flex; flex-direction: column; gap: 12px; }
.admin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 14px 16px; }
.admin-facts span { display: block; font-size: 12px; color: var(--fg2); }
.admin-facts strong { font-family: var(--ff-display); font-size: 22px; font-weight: 600; }
.admin-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.admin-steps li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); counter-increment: step; }
.admin-steps li:first-child { border-top: none; }
.admin-steps li::before { content: counter(step); width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.admin-steps li.done::before { content: '✓'; background: var(--ok-soft); color: var(--ok); }
.admin-steps .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-steps .warn { color: var(--bad); }
.admin-done { font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 2px 10px; }

/* Score page: Newcomers contests (ids starting with N) list newcomers first */
.rl-head { margin: 14px 0 8px; font-family: var(--ff-display); font-size: 19px; font-weight: 600; }
.rl-head small { font-family: var(--ff); font-size: 14px; font-weight: 500; color: var(--fg2); }

/* Rating card: share your favourites in the discussion */
.fb-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }

/* FAQ page (/faq/) */
.faq { padding-top: 24px; padding-bottom: 24px; max-width: 760px; }
.faq h1 { font-family: var(--ff-display); font-size: 28px; font-weight: 600; }
.faq > .muted { margin: 6px 0 16px; }
.faq-search input { width: 100%; height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font: inherit; font-size: 16px; }
.faq-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.faq-topics a { padding: 7px 12px; border-radius: 999px; background: var(--soft); color: var(--fg); font-size: 14px; font-weight: 500; text-decoration: none; }
.faq-topics a:hover { background: var(--line); }
.faq-group { margin-top: 24px; scroll-margin-top: 12px; }
.faq-group h2 { font-family: var(--ff-display); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; scroll-margin-top: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--fg2); border-bottom: 2px solid var(--fg2); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > p, .faq details > ul { margin: 0 16px 12px; line-height: 1.55; }
.faq details > ul { padding-left: 20px; }
.faq details > ul li + li { margin-top: 4px; }
.faq code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
/* Phone headers (2026-11-05, with the FAQ link): tighter links so the contest and score page headers fit when logged in */
@media (max-width: 700px) { .site-header nav { gap: 0; font-size: 14px; } .site-header nav a { padding: 10px 7px; } }
@media (max-width: 600px) { .brand-text { display: none; } .brand img { height: 34px; } .site-header .wrap { gap: 8px; } }
@media (max-width: 370px) { .site-header nav { font-size: 13px; } .site-header nav a { padding: 10px 3px; } .site-header .wrap { gap: 2px; } .site-header .bell { width: 34px; } }
/* Register: the five solving questions fold into "Tell us more" (2026-11-05) */
.acct-more { border-top: 1px solid var(--line); padding-top: 4px; display: flex; flex-direction: column; gap: 16px; }
.acct-more[open] { padding-bottom: 4px; }
.acct-more summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 28px 10px 0; position: relative; font-weight: 600; }
.acct-more summary::-webkit-details-marker { display: none; }
.acct-more summary span { font-weight: 400; font-size: 14px; color: var(--fg2); }
.acct-more summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--fg2); border-bottom: 2px solid var(--fg2); transform: rotate(45deg); transition: transform 0.2s; }
.acct-more[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.acct-more > .acct-group { margin-top: 18px; }
.acct-more > .acct-group:first-of-type { margin-top: 6px; }
/* Phone solve bar: "Puzzles" under the list icon, so it's clear the button opens the puzzle list (2026-11-05) */
.solve-bar .list-btn { padding: 0 10px 0 8px; }
.solve-bar .list-ico { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.solve-bar .list-lbl { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: var(--bar-fg2); }
.solve-bar #bar-pos { white-space: nowrap; } .solve-bar .list-btn { flex-shrink: 0; } @media (max-width: 360px) { .solve-bar .wrap { gap: 8px; } }
@media (max-width: 360px) { .solve-bar .wrap { gap: 6px; padding-right: 8px; } .solve-bar .list-btn { padding: 0 6px 0 4px; gap: 6px; } .solve-bar .score { font-size: 13px; } }
/* Registration Sudoku: the link and the message under the grid line up with it */
#sudoku-msg { display: block; text-align: center; }
#new-sudoku { display: block; margin: 8px auto 0; }

/* Discussion: emojis above the message tools (the forum's 7 puzzle ratings, then more) */
.compose-emo { display: flex; flex-wrap: wrap; gap: 2px; margin-top: -4px; }
.compose-emo .emo { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.compose-emo .emo:hover, .compose-emo .emo[aria-expanded="true"] { background: var(--soft); }
.compose-emo .emo-more { filter: grayscale(1); opacity: 0.7; }
.compose-emo .emo-more[aria-expanded="true"] { filter: none; opacity: 1; }
.emo-panel { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.emo-panel.hidden { display: none; }

/* Discussion: sort the messages (Newest, Oldest, Most liked) */
.disc-sort { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 16px 4px; font-size: 13px; color: var(--fg2); flex-wrap: wrap; }
.disc-sort > span { margin-right: 4px; }
.disc-sort button { border: 1px solid transparent; background: none; color: var(--fg2); font: inherit; font-weight: 500; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.disc-sort button:hover { color: var(--fg); }
.disc-sort button[aria-pressed="true"] { background: var(--soft); border-color: var(--line2); color: var(--fg); font-weight: 600; }

/* Score page: tools for the contest's authors, organizers and moderators */
.staff-card { padding: 12px 16px; margin-bottom: 12px; border-color: var(--acc); }
.staff-card h2 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.staff-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.staff-top a { font-size: 14px; }
.staff-log { margin-top: 8px; font-size: 13px; }
.staff-log summary { cursor: pointer; color: var(--fg2); }
.staff-log ul { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 2px; }
.tag-dq { color: var(--bad); background: var(--bad-soft); }
/* Score page rows on wide screens: the numbers in columns, the Profile link beside the row, and the details
   only for what's left (the organiser tools). Phones keep the two-line row with the numbers in its details. */
.rrow .cols, .rrow > .rprof, .rlist .rhead { display: none; }
/* The row and, for organisers, the small actions menu beside it */
.rrow { display: flex; flex-wrap: wrap; align-items: center; position: relative; }
.rrow > button { flex: 1; min-width: 0; width: auto; }

.rmenu { position: relative; flex-shrink: 0; width: 40px; display: flex; justify-content: center; }
.rmenu-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--fg2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rmenu-btn svg { fill: currentColor; }
.rmenu-btn:hover, .rmenu.open .rmenu-btn { background: var(--soft); color: var(--fg); }
.rmenu-pop { display: none; position: absolute; right: 4px; top: calc(100% + 4px); z-index: 30; min-width: 200px; max-width: 280px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.rmenu.up .rmenu-pop { top: auto; bottom: calc(100% + 4px); }
.rmenu.open .rmenu-pop { display: flex; flex-direction: column; }
.rmenu-pop button, .rmenu-pop a { display: block; width: 100%; padding: 9px 12px; border: none; border-radius: 8px; background: transparent; color: var(--fg); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.rmenu-pop button:hover, .rmenu-pop a:hover { background: var(--soft); }
.rmenu-pop .danger { color: var(--bad); }
.rmenu-note { padding: 8px 12px 6px; font-size: 13px; color: var(--fg2); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
@media (min-width: 900px) {
  .rrow .cols, .rhead .cols { display: flex; flex-shrink: 0; }
  .rrow .cols > span, .rhead .cols > span { width: 96px; padding-left: 8px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--fg2); }
  .rrow .cols > span.all-solved { color: var(--ok); font-weight: 600; }
  .rrow .num { width: 84px; }
  .rrow .num span { display: none; }
  .rrow > .rprof { display: block; width: 64px; flex-shrink: 0; padding-right: 14px; text-align: right; font-size: 14px; }
  .rmenu { width: 44px; margin-left: -8px; }
  .rmenu-pop a { display: none; }
  .rlist .rhead { display: flex; align-items: center; gap: 12px; padding: 10px 0 8px 14px; font-size: 12px; font-weight: 600; color: var(--fg2); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
  .rhead .rank { width: 36px; flex-shrink: 0; }
  .rhead .who { flex: 1; min-width: 0; }
  .rhead .cols > span { font-size: 11px; color: var(--fg2); line-height: 1.25; }
  .rhead .rmenu { width: 44px; margin-left: -8px; }
  .rhead .num { width: 84px; text-align: right; flex-shrink: 0; }
  .rhead .rprof { width: 64px; flex-shrink: 0; }
  .rhead + .rrow { border-top: none; }
}
@media (min-width: 1000px) { .score-page { max-width: 1040px; } }
@media (min-width: 900px) and (max-width: 1099px) { .rrow .cols > span, .rhead .cols > span { width: 78px; } .rrow .num, .rhead .num { width: 70px; } }
/* A player's submissions (score page): a side panel on wide screens that leaves the ranking usable beside it,
   full screen on phones with a back arrow */
.rrow.current > button, .rrow.current.self > button { background: var(--soft); box-shadow: inset 3px 0 0 var(--acc); }
.pp .dpanel-sheet header { gap: 4px; padding-left: 4px; }
.pp .dpanel-sheet header h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .pp-x { display: none; }
@media (min-width: 760px) { .pp .pp-back { display: none; } .pp .pp-x { display: flex; } .pp .dpanel-sheet header { padding-left: 16px; } }
@media (min-width: 900px) {
  .pp { left: auto; width: 480px; }
  .pp .dpanel-backdrop { display: none; }
  .pp .dpanel-sheet { border-left: 1px solid var(--line); }
}
@media (max-width: 899px) { body.pp-open { overflow: hidden; } }
.pp-head { padding: 4px 4px 12px; }
.pp-who { font-size: 14px; color: var(--fg2); }
.pp-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; }
.pp-stats > span { display: flex; flex-direction: column; }
.pp-stats small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg2); }
.pp-stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pp-stats b.all-solved { color: var(--ok); }
.pp-review { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--soft); font-size: 14px; }
.pp-note { margin: 0 4px 8px; font-size: 13px; color: var(--fg2); }
.pp-note summary { cursor: pointer; }
.pp-note p { margin-top: 4px; }
.pp-subs { list-style: none; margin: 0; padding: 0; }
.pp-sub { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid var(--line); }
.pp-sub:first-child { border-top: none; }
.pp-sub.todo { background: var(--current); }
.pp-time { width: 74px; flex-shrink: 0; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.pp-time b { font-size: 14px; font-weight: 600; }
.pp-time small { font-size: 11px; color: var(--fg2); line-height: 1.3; }
.pp-ans { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pp-ans strong { font-weight: 600; }
.pp-cmp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.pp-cmp > span:nth-child(odd) { font-size: 12px; color: var(--fg2); }
.pp-cmp .sol { font-size: 14px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.pp-res { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; max-width: 45%; text-align: right; }
.pp-res .res { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pp-res .res.ok { color: var(--ok); }
.pp-res .res.bad { color: var(--bad); }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pp-actions .btn { height: 44px; font-size: 15px; }
.staff-review { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
/* Score page: the contest's organizers and test solvers under the ranking (for everyone; the organisers also get a ×) */
.ts-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 14px; }
.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ts-label { color: var(--fg2); margin-right: 4px; }
.staff-chip { background: var(--soft); color: var(--fg); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 2px; }
.staff-chip:has(.chip-x) { padding-right: 2px; }
.staff-chip a { color: inherit; text-decoration: none; }
.staff-chip a:hover { text-decoration: underline; }
.chip-x { width: 24px; height: 24px; border: none; border-radius: 999px; background: transparent; color: var(--fg2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chip-x:hover { background: var(--line); color: var(--fg); }

/* Wide screens (2026-11-07): the contest and score pages stay one column (the user's choice), but as wide as the header
   (1200px) instead of 760px / 1040px,
   with blocks laid out across rather than stacked. Phones and narrower windows are unchanged. */
@media (min-width: 1240px) {
  .overview, .overview.has-sticky { max-width: 1200px; }
  /* Result: rank and points on the left, solved / wrong tries / last submission beside them */
  .result { flex-direction: row; align-items: flex-end; gap: 28px; }
  .result .big { flex: 1; }
  .result .row3 { flex: 1.3; border-top: none; border-left: 1px solid var(--bar-2); padding: 0 0 0 28px; }
  /* Finished: Full results, Discussion and Keep solving side by side */
  .st-finished .inner { flex-direction: row; flex-wrap: wrap; }
  .st-finished .inner .btn-block { flex: 1; width: auto; }
  .st-finished .inner .small-note { flex-basis: 100%; }
  /* Log in: the two boxes and the button on one line */
  .st-login .login-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px; align-items: end; gap: 12px; }
  .st-login .login-form > .form-error, .st-login .login-form > .small-note, .st-login .login-form > #country-field { grid-column: 1 / -1; }
  /* Start and other single buttons: not stretched across the whole width */
  .st-open .inner, .st-unofficial .inner, .st-closed .inner { align-items: center; text-align: center; }
  .st-open .inner .btn-block, .st-unofficial .inner .btn-block, .st-closed .inner .btn-block { max-width: 480px; }
  /* The paper / online switch and the Start step (button, or Not yet / Start the timer) share one 480px width */
  .st-open .solve-choice, .st-unofficial .solve-choice, .st-open .inner > div, .st-unofficial .inner > div { width: 100%; max-width: 480px; }
  .st-open .solve-choice label, .st-unofficial .solve-choice label { white-space: nowrap; }
  /* Booklets side by side */
  .files { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .files .file-row + .file-row { border-top: none; border-left: 1px solid var(--line); }
  /* Rate this contest: stars on the left, favourite puzzles on the right */
  .fb-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .fb-card > .fb-more { grid-column: 2; grid-row: 1 / span 2; }
  /* Long text keeps a readable line length inside the wider cards */
  .overview .notes, .overview .msg .text, .overview .text { max-width: 80ch; }
  /* Score page: as wide as the header too (1040px below 1240px); the ranking's columns get the room */
  .score-page { max-width: 1200px; }
  /* Solving in paper mode (2026-11-11): the sheet, its mode switch and the Submit all bar as wide as the rest (were 900px) */
  .sheet, .mode-switch, .sheet-bar .inner { max-width: 1200px; }
  .score-page .text, .score-page .notes { max-width: 80ch; }
}

/* The section pages' footer (2026-11-09): one line of links, then the copyright line. /main/ keeps its own bigger one. */
.lmi-footer { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: 14px; color: var(--fg2); }
.lmi-flinks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lmi-flinks a { color: var(--fg2); text-decoration: none; }
.lmi-flinks a:hover { color: var(--fg); text-decoration: underline; }
.lmi-legal { margin-top: 10px; font-size: 13px; }
/* Phones: Contests, Puzzles, Community, the bell and the name in one row (2026-11-09); long names end in "…" */
@media (max-width: 480px) {
  .site-header nav { gap: 0; }
  .site-header nav a { padding: 10px 7px; }
  .umenu-name { max-width: 64px; }
  .umenu-btn { padding: 0 4px 0 7px; }
}
@media (max-width: 400px) {
  .site-header .wrap { gap: 4px; }
  .site-header nav { font-size: 14px; }
  .site-header nav a { padding: 10px 5px; }
  .umenu-name { max-width: 48px; }
}
@media (max-width: 370px) { .umenu-name { max-width: 34px; } }

/* Wide screens, all new pages (2026-11-11, players' and the user's feedback: too much empty space at the sides): from 1400px
   the pages use the full width minus 100px each side (1400px is where that equals the old 1200px). Reading text and forms keep
   their own narrower limits (.faq, .acct, discussion and notes at 80ch). */
@media (min-width: 1400px) {
  .wrap, .overview, .overview.has-sticky, .score-page, .sheet, .mode-switch, #app.mode-grid .mode-switch, .sheet-bar .inner {
    max-width: calc(100% - 200px); padding-left: 0; padding-right: 0;
  }
  .solve { max-width: calc(100% - 200px); padding-left: 0; padding-right: 0; }
  /* Reading text and forms keep their own widths (they share .wrap, so restated here) */
  .faq { max-width: 760px; padding-left: 0; padding-right: 0; }
  .acct { max-width: 560px; padding-left: 0; padding-right: 0; }
}