/* The trainer shares the new pages' cream canvas and original press buttons. */
.puzzles-page {
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: var(--font-display);
  --panel: #fff;
  --panel-alt: #faf5ed;
  --panel-border: #eee5d9;
  --panel-border-hover: #d9c5aa;
  --panel-hover: #f7eddf;
  --text: #20212a;
  --text-dim: #716456;
  --text-soft: #736455;
  --text-muted: #8a7969;
  --neutral-tint: #ede6db;
  --good-fg: #fff;
  --tooltip-bg: #fff;
  --arrow-fill: var(--accent);
  background: #fffdf9;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.puzzles-page [hidden] { display: none !important; }
.puzzles-page h1, .puzzles-page h2, .puzzles-page h3, .puzzles-page p { margin: 0; }
.puzzles-page :focus-visible { outline: 3px solid #93411b; outline-offset: 4px; }
.puzzles-page button { font-family: 'Nunito', sans-serif; cursor: pointer; }
.puzzles-page .pressBtn, .puzzles-page .bannerBtn { font-family: 'Nunito', sans-serif; }
.puzzles-page .accountBtn { font-family: 'Baloo 2', 'Nunito', sans-serif; }
.puzzles-page main { padding: 42px 44px 48px; align-items: stretch; max-width: 1288px; margin-inline: auto; background: radial-gradient(ellipse 620px 400px at 86% 10%, #fff0d970, transparent 78%); }
.puzzles-page .pageIntro { width: 100%; padding: 0; gap: 15px; align-items: center; margin-bottom: 29px; }
.puzzles-page .pageEmblem { width: 42px; height: 45px; flex: 0 0 42px; }
.puzzles-page .pageIntro h1 { font-size: clamp(28px, 3vw, 39px); font-weight: 800; letter-spacing: -.05em; line-height: 1.14; }
.puzzles-page .pageSubtitle { font-size: 13px; line-height: 1.7; color: #786f67; margin-top: 10px; }
.puzzles-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; color: #b14719; }
.pageIntro .puzzles-eyebrow { margin-bottom: 10px; }
.puzzles-back { margin-left: auto; white-space: nowrap; }
.puzzles-page .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 20px; background: white; border-radius: 10px; color: var(--text); transform: translateY(-160%); }
.puzzles-page .skip-link:focus { transform: translateY(0); }

.puzzles-page #siteHeader { --header-pad: max(44px, calc((100% - 1200px) / 2)); padding: 19px var(--header-pad); border-bottom: 1px solid #f3ece1; background: #fffdf9; flex-wrap: nowrap; z-index: 10; }
.puzzles-page .siteLogo { font-size: 25px; font-weight: 800; letter-spacing: -.065em; gap: 9px; color: var(--text); }
.puzzles-page .siteLogoMark { height: 47px; }
.puzzles-page .siteHeaderRight { gap: 25px; }
@media (min-width: 1080px) {
  .puzzles-page .siteNav, .puzzles-page #siteHeader.navOpen .siteNav { display: flex; position: static; flex-direction: row; gap: 20px; min-width: 0; border: 0; padding: 0; background: transparent; box-shadow: none; }
  .puzzles-page .siteNav a { padding: 8px 0; border-radius: 0; font-size: 12px; font-weight: 600; }
  .puzzles-page .siteNav a:hover, .puzzles-page .siteNav a.active { background: transparent; color: #d44308; }
  .puzzles-page .siteNav a.active { box-shadow: 0 2px 0 #d44308; }
  .puzzles-page .navToggle { display: none; }
}
.puzzles-page #siteFooter { background: #fffdf9; border-color: #f3ece1; padding: 21px 24px 25px; }
.puzzles-page .footerSignoff { color: #8d8074; font-size: 12px; }
.puzzles-page .footerLinks { margin-top: 13px; gap: 6px 24px; }
.puzzles-page .footerLinks a { color: #7b7168; font-size: 10px; }
.puzzles-page .footerLinks a + a::before { display: none; }
.puzzles-page .demoBanner { border: 2px solid #f0a052; background: #fff1de; border-radius: 13px; padding: 13px 17px; margin: 0 0 24px; gap: 12px; box-shadow: none; }
.puzzles-page .demoTag { border: 0; background: #ed8123; color: #fff; border-radius: 6px; font-size: 11px; padding: 6px 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.puzzles-page .demoBanner .demoCopy { color: #5e3d1c; font-weight: 600; font-size: 14px; line-height: 1.6; flex-basis: 280px; }
.puzzles-page .demoBanner [data-analysis-progress] { font-size: 10px; line-height: 1.5; }
#filterBanner, #recoBanner { display: none; width: 100%; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid #efdbbb; border-radius: 13px; background: #fff6e7; padding: 14px 17px; margin-bottom: 24px; color: #896c4f; font-size: 12px; line-height: 1.7; }
#filterBanner.shown, #recoBanner.shown { display: flex; }
#filterBanner a, #recoBanner a { color: #b14719; font-weight: 700; text-decoration: none; white-space: nowrap; }
#filterBanner a:hover, #recoBanner a:hover { text-decoration: underline; }
#filterText, #recoText { display: inline-block; }

#layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; width: 100%; align-items: start; }
#puzzleCard { grid-column: 1; grid-row: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .78fr); gap: 25px; align-items: start; padding: 26px; border: 1px solid var(--panel-border); border-radius: 23px; background: #fff; box-shadow: 0 8px 35px #9a5d1607; }
.board-panel { min-width: 0; }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.board-heading .puzzles-eyebrow { color: #a38360; font-size: 8px; }
#boardPlayer { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #947c63; line-height: 1.5; white-space: nowrap; }
.player-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 1px solid #c8b8a5; }
.playing-black .player-dot { background: #34302c; border-color: #34302c; }
.board-frame { position: relative; background: #f9efdf; padding: 6px; border: 1px solid #e6cbae; border-radius: 12px; }
#board { position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
#board .board-b72b1 { border: 0; }
#board .white-1e1d7 { background: #f0daba; color: #765032; }
#board .black-3c85d { background: #b88c63; color: #fff1dc; }
#board .notation-322f9 { font: 800 10px 'Nunito', sans-serif; }
#board img { filter: drop-shadow(0 1px 1px #33200e20); }
#puzzleLoading { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 290px; color: #9a7c5f; font-size: 12px; line-height: 1.7; }
.loading-dot { width: 10px; height: 10px; background: #ed8123; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 5px #fff0d9; }
.board-instruction { font-size: 10px; text-align: center; color: #a18b75; line-height: 1.7; margin-top: 11px !important; }
.puzzle-coach { position: relative; display: flex; align-items: center; background: linear-gradient(110deg, #fff9ee, #fff0d8); border: 1px solid #f2e2c8; padding: 19px 22px; border-radius: 14px; margin-top: 23px; min-height: 100px; overflow: hidden; }
.puzzle-coach > div { position: relative; z-index: 1; padding-right: 100px; }
.puzzle-coach p { font: 600 25px/1.15 'Caveat', cursive; color: #906037; }
.puzzle-coach span { display: block; font-size: 8px; color: #ab8964; margin-top: 8px; }
.puzzle-coach img { position: absolute; width: 140px; height: 140px; object-fit: contain; right: -1px; bottom: -30px; transform: rotate(7deg); }
.puzzle-details { min-width: 0; padding: 3px 0; }
#cardTop, #cardBottom { width: 100%; min-width: 0; }
#puzzleProgress { font-size: 10px; font-weight: 800; color: #947b61; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 23px; }
#dailyHead { margin-bottom: 26px; }
#progressDots { display: flex; gap: 5px; align-items: center; }
#progressDots .dot { flex: 1 1 0; min-width: 0; height: 5px; border-radius: 3px; background: #f0e8dd; }
#progressDots .dot.done { background: #7f9e52; }
#progressDots .dot.missed { background: #c46e51; }
#progressDots .dot.hinted { background: #d7a13c; }
#progressDots .dot.current { background: #ed8123; }
#dailyCount { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #a18467; margin-top: 9px; line-height: 1.6; }
.exercise-eyebrow { font-size: 8px; margin-bottom: 10px !important; }
#puzzleHeading { font-size: clamp(27px, 2.7vw, 36px); font-weight: 800; letter-spacing: -.055em; line-height: 1.15; margin-bottom: 20px; }
#rematchFlag { display: none; font-size: 9px; font-weight: 800; border-radius: 7px; padding: 7px 9px; background: #fff1d0; color: #a47a2d; line-height: 1.6; margin-bottom: 13px; }
#rematchFlag.shown { display: block; }
#metaHeader { font-size: 10px; line-height: 1.9; color: #8a7969; margin-bottom: 8px; overflow-wrap: anywhere; }
#metaHeader a { color: #b14719; text-decoration: none; font-weight: 700; }
#metaHeader a:hover { text-decoration: underline; }
#metaDetail { font-size: 10px; color: #a28e79; line-height: 1.9; }
.sevBadge { display: inline-block; font: 800 8px/1.5 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .035em; padding: 2px 6px; border-radius: 5px; }
.sevBadge.blunder { background: #fff0e9; color: #b4583c; }
.sevBadge.mistake { background: #fff1d4; color: #a88232; }
#evalRow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 21px 0; border-top: 1px solid #f1e9de; padding-top: 18px; }
#evalBarContainer { position: relative; flex: 1 1 100%; height: 6px; overflow: hidden; border-radius: 5px; background: #302b25; border: 1px solid #d6c7b4; }
#evalBarContainer.evalLoading { opacity: .5; }
#evalBarFill { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: #f5f0e7; transition: width .3s ease; }
#evalLabel { font-size: 9px; color: #9e8872; font-variant-numeric: tabular-nums; }
.toggleBtn { margin-left: auto; border: 1px solid #eadfce; padding: 6px 9px; border-radius: 7px; font-size: 9px; font-weight: 700; color: #94775b; background: #faf5ed; }
.toggleBtn.toggleOn { background: #eef4e1; border-color: #d3dfb7; color: #6e8c44; }
.toggleBtn:hover { border-color: #cdb28f; }
#controls { display: flex; flex-direction: column; gap: 15px; margin-bottom: 22px; }
.navGroup { display: flex; gap: 10px; }
.navGroup .pressBtn { flex: 1; padding: 10px 13px; font-size: 12px; }
#revealBtn { width: 100%; font-size: 14px; padding: 13px 20px; }
#hintLine { display: none; background: #fff4dc; border: 1px solid #f2dfb9; border-radius: 10px; padding: 11px 13px; margin-bottom: 15px; font-size: 11px; line-height: 1.8; color: #92703c; }
#hintLine.shown { display: block; }
#feedback { font-size: 11px; line-height: 1.9; color: #826f5e; min-height: 30px; }
#feedback .placeholder { color: #ad947b; }
.correct { color: #698d3e; font-weight: 800; }
.wrong { color: #b2573c; font-weight: 800; }
#boardArrows { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; overflow: visible; }
#bestLine { padding: 14px 0 0; margin-top: 15px; border-top: 1px solid #f0e7da; }
#bestLineLabel { display: flex; gap: 8px; flex-wrap: wrap; color: #9b8064; font-size: 10px; font-weight: 700; margin-bottom: 9px; }
#bestLineHint { color: #b19a83; font-size: 9px; font-weight: 500; }
#bestLineMoves { display: flex; gap: 5px; flex-wrap: wrap; }
.lineChip { font: 600 11px 'Nunito', sans-serif; color: #94775b; border: 1px solid #eadcc9; border-radius: 7px; background: #faf5ed; padding: 5px 8px; }
.lineChip:hover { border-color: #cdb28f; }
.lineChip.current { background: #fff0d8; border-color: #f0b878; color: #b5692c; font-weight: 800; }
.lineChip.played { opacity: .6; }
.lineChip.lineReset { color: #a18c76; }
#themeBlock { font-size: 11px; line-height: 1.8; border: 1px solid #f1dfc7; border-radius: 12px; padding: 15px; background: #fff9ee; margin-top: 18px; }
#themeBlock .themeName { font-size: 13px; font-weight: 800; color: #986333; }
#themeBlock .themeFamily { color: #a28a70; font-size: 10px; }
#themeBlock .themeRecord { color: #9e8368; margin-top: 5px; }
#themeBlock .themeRecord.repeat { color: #a47a2d; font-weight: 700; }
#themeBlock .themeDrill { border-left: 3px solid #e8b379; color: #977657; padding: 7px 0 7px 11px; margin-top: 10px; }
#themeBlock .themeActions { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
#themeBlock a { color: #b14719; font-size: 10px; font-weight: 700; text-decoration: none; }
#themeBlock a:hover { text-decoration: underline; }
#themeBlock a.bannerBtn { color: var(--accent-fg); font-size: 10px; padding: 7px 10px; }
#themeBlock a.bannerBtn:hover { text-decoration: none; }
#themeBlock .themeCleared { color: #698d3e; font-weight: 700; margin-top: 5px; }
.infoTip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid #e6d8c6; border-radius: 50%; color: #ad957b; font-size: 9px; font-weight: 700; cursor: help; margin-left: 4px; }
.infoTipBubble { display: none; position: absolute; bottom: 135%; right: 0; width: min(230px, calc(100vw - 56px)); padding: 11px 13px; background: #fff; color: #8a745e; border: 1px solid #eadcc9; border-radius: 9px; box-shadow: 0 8px 24px #77502418; font-size: 11px; font-weight: 500; line-height: 1.7; text-transform: none; letter-spacing: 0; z-index: 10; }
.infoTip:hover .infoTipBubble, .infoTip:focus .infoTipBubble { display: block; }

#sidebar { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; max-height: 800px; border: 1px solid var(--panel-border); border-radius: 20px; background: #fff; overflow: hidden; }
#sidebarHeader { padding: 21px 18px 17px; border-bottom: 1px solid #f0e7da; }
#sidebarHeader .puzzles-eyebrow { font-size: 8px; color: #a38360; margin-bottom: 10px; }
#sidebarCount { font-size: 21px; font-weight: 800; letter-spacing: -.04em; line-height: 1.4; margin-bottom: 15px; }
#severityChips { display: flex; gap: 5px; flex-wrap: wrap; }
.puzzles-page .chip { font: 800 9px 'Nunito', sans-serif; padding: 6px 8px; border: 1px solid #ece1d2; border-radius: 7px; background: #faf5ed; color: #a38a70; }
.puzzles-page .chip.active { background: #fff0d8; border-color: #efbf83; color: #b46a28; }
.puzzles-page .chip:hover { border-color: #cdb28f; }
#sidebarList { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: #dfc7a5 #faf4e9; }
.puzzleRow { padding: 13px 15px; border-bottom: 1px solid #f2ebe2; border-left: 3px solid transparent; cursor: pointer; }
.puzzleRow:hover { background: #fffbf4; }
.puzzleRow.active { border-left-color: #ed8123; background: #fff6e7; }
.rowTitle { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 10px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.rowSub { font-size: 9px; color: #a28c75; line-height: 1.8; margin-top: 4px; }
.puzzles-page.dailyMode #severityChips, .puzzles-page.dailyMode #filterBanner, .puzzles-page.dailyMode #recoBanner { display: none !important; }
.puzzleRow[aria-disabled="true"] { cursor: default; opacity: .65; }
.puzzles-page.dailyMode #puzzleCard { width: 100%; max-width: 960px; margin-inline: 0; grid-template-columns: minmax(0, 420px) minmax(280px, 1fr); gap: 28px; padding: 24px; }

/* Briefings and completion keep the same data and actions as the trainer. */
#briefing { display: none; width: min(590px, 100%); align-self: center; background: #fff; border: 1px solid #efddc4; border-radius: 23px; padding: 32px; }
#briefing.shown { display: block; }
.briefTop { display: flex; gap: 12px; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #b14719; }
.briefTopName { display: inline-flex; align-items: center; }
.briefTopName .pawInline { flex: none; margin-right: 8px; }
.briefStreak { padding: 5px 8px; border-radius: 7px; color: #a47a2d; background: #fff1d0; letter-spacing: 0; white-space: nowrap; }
.briefHead { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 22px 0; }
.briefHead h2 { font-size: 30px; font-weight: 800; letter-spacing: -.05em; line-height: 1.2; }
.briefTime { font-size: 12px; color: #a18b73; white-space: nowrap; }
.briefRows { display: grid; gap: 12px; }
.briefRow { display: flex; gap: 10px; align-items: center; font-size: 12px; line-height: 1.8; }
.briefBar { flex: 0 0 auto; height: 7px; border-radius: 4px; min-width: 8px; max-width: 20%; }
.briefRow.fresh .briefBar { background: #ed8123; }
.briefRow.due .briefBar { background: #d7a13c; }
.briefRow.weak .briefBar { background: #c46e51; }
.briefRow.unseen .briefBar, .briefRow.stale .briefBar { background: #c1ae97; }
.briefCount { font-weight: 800; min-width: 14px; text-align: right; color: #80664b; }
.briefText { color: #9a8066; }
.briefStake { border-top: 1px solid #f0e7da; margin-top: 21px; padding-top: 20px; color: #947456; font-size: 12px; line-height: 1.8; }
#briefing .briefStart { width: 100%; margin-top: 24px; font-size: 15px; }
#briefing .briefSecondary { width: 100%; margin-top: 14px; font-size: 12px; }
.briefSizes { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
.sizeBtn { flex: 1; font-size: 13px; font-weight: 800; color: #a18b74; background: #faf5ed; border: 1px solid #ece1d2; border-radius: 10px; padding: 12px 8px; }
.sizeBtn small { display: block; font-size: 9px; font-weight: 600; margin-top: 3px; }
.sizeBtn.active { color: #b46a28; border-color: #efbf83; background: #fff0d8; }
#endCard { display: none; width: min(590px, 100%); align-self: center; border: 1px solid #efddc4; border-radius: 23px; padding: 32px; background: #fff; text-align: center; }
#endCard.shown { display: block; }
.endTitle { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #a38360; }
.endScore { color: #d44308; font-size: 49px; font-weight: 800; letter-spacing: -.06em; margin: 14px 0 5px; }
.endScoreSub { color: #a18467; font-size: 12px; line-height: 1.8; margin-bottom: 24px; }
.endRows { display: grid; gap: 11px; border-top: 1px solid #f0e7da; padding-top: 21px; text-align: left; font-size: 12px; }
.endRow { display: flex; justify-content: space-between; gap: 15px; line-height: 1.7; }
.endRow .k { color: #a18467; }
.endRow .v { font-weight: 700; text-align: right; }
.endRow .v.bad { color: #b2573c; }
.endRow .v.good { color: #698d3e; }
.endCost { text-align: left; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0e7da; font-size: 11px; color: #9a8066; line-height: 1.9; }
.endStreak { font-size: 17px; font-weight: 800; margin-top: 24px; }
.endStreakSub { font-size: 12px; color: #a18467; line-height: 1.8; margin-top: 5px; }
.endBuried { position: relative; overflow: hidden; padding: 19px; background: #eff6e3; border: 1px solid #dbe7c9; border-radius: 14px; color: #698d3e; margin-top: 20px; }
.buriedWhat { font-size: 20px; font-weight: 800; margin: 7px 0 4px; }
.buriedWhy { font-size: 11px; line-height: 1.8; }
.endWeek { display: flex; justify-content: space-around; gap: 10px; border-top: 1px solid #f0e7da; margin-top: 20px; padding-top: 18px; }
.wkNum { font-size: 22px; font-weight: 800; }
.wkLabel { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a18467; margin-top: 4px; }
#endCard .pawTrail { margin: 24px 0 -4px; }
.endActions { display: flex; flex-direction: column; align-items: stretch; gap: 11px; margin-top: 21px; }
.endActions a { text-decoration: none; }
#endCard .endActions .bannerBtn { padding: 12px 16px; font-size: 14px; text-align: center; }
#endCard .endActions .secondary { color: #a18467; background: #faf5ed; border-color: #dfcfba; }
.puzzles-signoff { font: 600 22px/1.3 'Caveat', cursive; color: #a18a74; text-align: center; margin-top: 30px !important; }
.puzzles-page.needsAccount #sidebar, .puzzles-page.needsAccount .board-panel, .puzzles-page.needsAccount #cardBottom, .puzzles-page.needsAccount #evalRow, .puzzles-page.needsAccount #puzzleHeading, .puzzles-page.needsAccount .exercise-eyebrow { display: none; }
.puzzles-page.needsAccount #layout, .puzzles-page.needsAccount #puzzleCard { grid-template-columns: minmax(0, 1fr); }
.puzzles-page.needsAccount #metaHeader { font-size: 17px; color: var(--text); }
.puzzles-page.emptyPuzzle .board-panel, .puzzles-page.emptyPuzzle #cardBottom, .puzzles-page.emptyPuzzle #evalRow, .puzzles-page.emptyPuzzle #puzzleHeading, .puzzles-page.emptyPuzzle .exercise-eyebrow { display: none; }
.puzzles-page.emptyPuzzle #puzzleCard { grid-template-columns: minmax(0, 1fr); }
.puzzles-page.emptyPuzzle #metaHeader { font-size: 17px; color: var(--text); }
.emptyBody { font-size: 13px; line-height: 1.8; margin: 10px 0 15px; color: #a18467; }
.emptyBody + .btn { display: inline-block; padding: 10px 17px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); text-decoration: none; font-weight: 700; font-size: 13px; }

@media (max-width: 1180px) {
  #layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; }
  #puzzleCard { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 27px; }
  .board-panel { width: 100%; max-width: 620px; margin-inline: auto; }
  .puzzle-coach { display: none; }
  .puzzle-details { padding: 0; }
  #puzzleProgress { margin-bottom: 15px; }
  .puzzles-page.dailyMode .puzzle-coach { display: flex; }
  .puzzles-page.dailyMode #puzzleCard { grid-template-columns: minmax(0, 420px) minmax(265px, 1fr); gap: 27px; padding: 24px; }
  #puzzleHeading { font-size: 30px; }
  .puzzle-coach { padding-inline: 18px; }
  .puzzle-coach p { font-size: 23px; }
}
@media (max-width: 980px) {
  .puzzles-page main { padding: 32px 24px 42px; }
  .puzzles-page #siteHeader { --header-pad: 24px; }
  .puzzles-back { font-size: 11px; padding: 9px 13px; }
  .puzzles-page .pageIntro h1 { font-size: 34px; }
  .puzzle-coach p { font-size: 22px; }
  .puzzle-coach img { width: 115px; height: 115px; bottom: -24px; right: -10px; }
  .puzzle-coach > div { padding-right: 73px; }
}
@media (max-width: 880px) {
  .puzzles-page.dailyMode #puzzleCard { grid-template-columns: minmax(0, 1fr); }
  .puzzles-page.dailyMode .puzzle-coach { display: none; }
  .puzzles-page.dailyMode .board-panel { max-width: 420px; }
  .puzzles-page.dailyMode .puzzle-details { width: 100%; max-width: 570px; margin-inline: auto; }
  #puzzleHeading { font-size: 33px; }
  #controls { flex-direction: row; align-items: center; gap: 18px; }
  .navGroup { flex: 1; }
  #revealBtn { width: auto; min-width: 155px; font-size: 13px; }
  #evalBarContainer { flex-basis: auto; }
  #evalRow { gap: 10px; }
  .toggleBtn { margin-left: 0; }
}
@media (max-width: 720px) {
  #layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #sidebar { grid-column: 1; grid-row: 2; width: 100%; max-height: 340px; }
  #sidebarList { flex: none; max-height: 220px; }
  #sidebarHeader { padding: 20px; }
  #puzzleCard { grid-column: 1; grid-row: 1; }
}
@media (max-width: 680px) {
  .puzzles-page main { padding: 27px 20px 36px; }
  .puzzles-page #siteHeader { --header-pad: 20px; padding-block: 14px; }
  .puzzles-page .siteLogo { font-size: 23px; }
  .puzzles-page .siteLogoMark { height: 41px; }
  .puzzles-page .siteHeaderRight { gap: 10px; }
  .puzzles-page .navToggle { width: 36px; height: 36px; background: transparent; border-color: #e8dfd2; }
  .puzzles-page .pageIntro { flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
  .puzzles-page .pageEmblem { display: none; }
  .puzzles-page .pageIntro h1 { font-size: 32px; max-width: 360px; }
  .puzzles-page .pageSubtitle { font-size: 12px; margin-top: 12px; max-width: 360px; }
  .pageIntro .puzzles-eyebrow { margin-bottom: 14px; }
  .puzzles-back { margin-left: 0; font-size: 11px; }
  .puzzles-page .demoBanner { padding: 13px; gap: 9px; margin-bottom: 21px; }
  .puzzles-page .demoBanner .demoCopy { font-size: 13px; flex-basis: calc(100% - 60px); }
  #puzzleCard, .puzzles-page.dailyMode #puzzleCard { padding: 20px; gap: 26px; border-radius: 19px; }
  .board-heading { gap: 8px; margin-bottom: 12px; }
  .board-heading .puzzles-eyebrow { font-size: 7px; letter-spacing: .09em; }
  #boardPlayer { font-size: 8px; }
  .board-frame { padding: 4px; border-radius: 9px; }
  #board { border-radius: 4px; }
  #board .notation-322f9 { font-size: 8px; }
  .board-instruction { font-size: 9px; margin-top: 9px !important; }
  #dailyHead { margin-bottom: 22px; }
  #dailyCount { font-size: 9px; }
  #puzzleHeading { font-size: 31px; margin-bottom: 18px; }
  #metaHeader, #metaDetail { font-size: 10px; line-height: 1.9; }
  #evalRow { padding-top: 16px; margin-block: 19px; }
  #evalLabel, .toggleBtn { font-size: 9px; }
  #controls { flex-direction: column; align-items: stretch; gap: 15px; }
  .navGroup .pressBtn { padding: 10px 14px; font-size: 12px; }
  #revealBtn { min-width: 0; width: 100%; font-size: 15px; padding: 12px 20px; }
  #hintLine, #feedback { font-size: 12px; }
  #themeBlock { padding: 15px; font-size: 12px; }
  #themeBlock .themeName { font-size: 14px; }
  #themeBlock .themeFamily { font-size: 11px; }
  #filterBanner, #recoBanner { padding: 14px; gap: 12px; font-size: 11px; flex-wrap: wrap; }
  #briefing, #endCard { padding: 25px; border-radius: 19px; }
  .briefHead { flex-wrap: wrap; gap: 9px; margin: 20px 0; }
  .briefHead h2 { font-size: 28px; }
  .briefRow { font-size: 11px; gap: 8px; }
  .briefBar { max-width: 18%; }
  .briefSizes { gap: 7px; }
  .sizeBtn { font-size: 12px; padding: 11px 6px; }
  .sizeBtn small { font-size: 8px; }
  #briefing .briefStart { font-size: 14px; padding: 13px 15px; }
  #briefing .briefSecondary { font-size: 11px; padding: 11px; }
  .endScore { font-size: 42px; }
  .endRows, .endScoreSub { font-size: 11px; }
  #endCard .endActions .bannerBtn { font-size: 12px; }
  .puzzles-signoff { font-size: 19px; margin-top: 27px !important; }
}
@media (max-width: 360px) {
  .puzzles-page main { padding-inline: 16px; }
  .puzzles-page .pageIntro h1 { font-size: 28px; }
  #puzzleCard, .puzzles-page.dailyMode #puzzleCard { padding: 16px; }
  .board-heading .puzzles-eyebrow { max-width: 145px; }
  #puzzleHeading { font-size: 29px; }
  #evalBarContainer { flex-basis: 100%; }
  .toggleBtn { margin-left: auto; }
  #briefing, #endCard { padding: 21px; }
  .endRow { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .puzzles-page *, .puzzles-page *::before, .puzzles-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Under the templated mistake line when /api/explain is a Pro feature. */
.proUpsell {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--accent-link);
}