@font-face{font-family:DeepSquare;src:url('/assets/fonts/Michroma-DeepSquare.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--bg:#080d16;--text:#f3f2eb;--muted:#97a3b5;--line:#253040;--mint:#a2d6be;--error:#ffa69e;--banner-height:0px;--board-size:min(620px,calc(100vw - 36px),calc(100dvh - 350px - var(--banner-height)))}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-bottom:var(--banner-height)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,#board:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button[hidden],[hidden]{display:none!important}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(18px,4vw,64px);min-height:68px}.wordmark{display:flex;align-items:center;gap:6px;font-size:21px;letter-spacing:-.8px;font-weight:650}.wordmark img{object-fit:contain}.wordmark-dot{color:var(--mint)}.portal-nav{display:flex;align-items:center;gap:26px;font-size:12px;color:var(--muted)}.portal-nav a:hover,.site-footer a:hover,.text-button:hover{color:var(--text)}.portal-nav span{font-size:10px;opacity:.65;margin-left:3px}.portal-nav .maker{color:#b9c6d7}.top-tools{display:flex;align-items:center;gap:15px}.text-button{padding:7px 0;border:0;background:none;color:var(--muted);font-size:12px;min-height:34px}.mobile-portals{display:none;position:relative}.mobile-portals summary{cursor:pointer;color:var(--muted);list-style:none;font-size:12px}.mobile-portals summary:after{content:'⌄';margin-left:7px}.mobile-portals nav{position:absolute;right:0;top:30px;width:215px;background:#111b29;border:1px solid var(--line);border-radius:12px;padding:8px;z-index:30;box-shadow:0 16px 45px #0008}.mobile-portals a{display:flex;justify-content:space-between;padding:12px 10px}.mobile-portals small{font-size:11px;color:var(--muted)}.trainer{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:0 18px}.mode-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:30px}.mode-switch button{border:0;border-radius:24px;background:transparent;color:var(--muted);font-size:12px;padding:8px 19px;min-height:34px}.mode-switch button[aria-pressed=true]{background:#253c38;color:#d1efe0}.puzzle{width:var(--board-size);max-width:100%;min-width:0}.puzzle-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;min-height:46px}.eyebrow{color:var(--muted);font-size:9px;letter-spacing:1.6px;margin:0 0 3px;text-transform:uppercase}h1{font-size:clamp(19px,2.7vh,25px);font-weight:500;line-height:1.2;letter-spacing:-.6px;margin:0}.turn-indicator{display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;color:#c4cbd7}.turn-indicator:before{content:'';width:10px;height:10px;background:#eeeae1;border:1px solid #e4e2dd;border-radius:50%}.turn-indicator.black:before{background:#27303a}.turn-indicator:empty{display:none}.board-loading{position:absolute;inset:0;display:grid;place-items:center;background:#111b29;color:var(--muted);border:1px solid var(--line);border-radius:4px;text-align:center;padding:24px}.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin-top:7px}.feedback-copy{min-width:0}#feedback{font-size:13px;margin:0;color:#d5dce5}#feedback.error{color:var(--error)}#feedback.success{color:var(--mint)}#move-history{font:11px/1.5 ui-monospace,SFMono-Regular,monospace;color:var(--muted);margin:3px 0 0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}.primary{flex-shrink:0;border:1px solid #acd6c1;background:#abd5be;color:#15241d;padding:9px 14px;border-radius:7px;min-height:39px;font-size:12px;font-weight:600}.primary:hover{background:#c6e4d5}.puzzle-tools{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.puzzle-tools>div{display:flex;gap:20px}.session-note{height:15px;margin:0;font-size:10px;color:#8591a3}.site-footer{display:flex;justify-content:space-between;align-items:center;padding:10px clamp(18px,4vw,64px);gap:20px;font-size:10px;color:#8391a5}.site-footer nav{display:flex;gap:17px;align-items:center}.site-footer .text-button,.site-footer [data-analytics-settings]{font:inherit;min-height:24px;border:0;background:none;color:inherit;padding:0}.compact-dialog{position:fixed;color:var(--text);background:#111a28;border:1px solid #354355;border-radius:16px;max-width:min(440px,calc(100vw - 32px));width:440px;max-height:calc(100dvh - 40px);padding:28px;box-shadow:0 30px 120px #0008;line-height:1.6}.compact-dialog::backdrop{background:#02050b99;backdrop-filter:blur(5px)}.compact-dialog h2{font-size:23px;letter-spacing:-.5px;font-weight:500;margin:0 30px 12px 0}.compact-dialog p{color:#bdc8d8;font-size:13px}.compact-dialog a{color:var(--mint);text-decoration:underline;text-underline-offset:4px}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:var(--muted);font-size:25px;width:32px;height:32px}.promotion-options{display:flex;gap:6px;margin:15px 0}.promotion-options button{flex:1;background:#273b38;border:1px solid #668778;border-radius:6px;padding:0}.promotion-options img{width:100%;display:block}.compact-dialog details{font-size:12px;color:var(--muted)}.compact-dialog summary{cursor:pointer}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;top:10px;left:10px;z-index:100;background:white;color:black;padding:10px}.ds-analytics-consent{z-index:50}.ds-analytics-consent .ds-analytics-copy>span,.ds-analytics-consent h2{display:none}.ds-analytics-consent .ds-analytics-copy p{font-size:11px;max-width:78ch}.ds-analytics-consent .ds-analytics-actions button{font-size:10px}
@media(min-height:920px){:root{--board-size:min(680px,calc(100vw - 36px),calc(100dvh - 350px - var(--banner-height)))}.trainer{gap:18px}}
@media(max-width:780px){.portal-nav{display:none}.mobile-portals{display:block}.topbar{min-height:58px;padding:8px 18px}.wordmark{font-size:19px}.site-footer{padding:8px 18px;font-size:9px}.site-footer nav{gap:11px}.trainer{gap:10px}.session-note{font-size:9px}.puzzle-heading{margin-bottom:10px}.eyebrow{font-size:8px;letter-spacing:1.25px}}
@media(max-width:480px){:root{--board-size:min(calc(100vw - 28px),calc(100dvh - 300px - var(--banner-height)))}.trainer{padding:0 14px}.site-footer>span{display:none}.site-footer{justify-content:center}.site-footer nav{gap:15px}.feedback-row{gap:8px}#feedback{font-size:12px}.primary{font-size:11px;padding:8px 10px}.turn-indicator{font-size:10px}.puzzle-heading{min-height:40px}.mode-switch button{padding:6px 18px;min-height:30px}.puzzle-tools .text-button{font-size:11px}}
@media(max-height:620px) and (min-width:620px){:root{--board-size:min(calc(100dvh - 120px - var(--banner-height)),calc(100vw - 310px))}.topbar{min-height:45px;padding-top:4px;padding-bottom:4px}.trainer{display:grid;grid-template-columns:var(--board-size) 210px;grid-template-rows:auto 1fr;column-gap:24px;justify-content:center;align-content:center;position:relative;padding-top:0}.mode-switch{grid-column:2;grid-row:1;justify-self:start;margin-top:18px}.puzzle{display:contents}.board-frame{grid-column:1;grid-row:1/4;align-self:center}.puzzle-heading{grid-column:2;grid-row:2;align-self:start;flex-direction:column;align-items:start;margin:12px 0 0}.feedback-row{position:absolute;width:210px;right:calc((100% - var(--board-size) - 234px)/2);bottom:80px;flex-direction:column;align-items:start;justify-content:end}.puzzle-tools{position:absolute;width:210px;right:calc((100% - var(--board-size) - 234px)/2);bottom:34px}.puzzle-tools>div{gap:12px}.session-note{position:absolute;right:calc((100% - var(--board-size) - 234px)/2);bottom:8px;max-width:210px}.site-footer{padding-top:3px;padding-bottom:3px}.portal-nav{display:none}.mobile-portals{display:block}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.mode-controls{display:flex;align-items:center;justify-content:center;gap:14px}.mode-controls select{max-width:160px;min-height:38px;padding:8px 28px 8px 12px;border:1px solid var(--line);border-radius:8px;background:#0e1723;color:#cad4e1;font:inherit;font-size:12px;line-height:1.3;cursor:pointer}.mode-controls select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.account-link{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px}
.account-link svg{flex:none}
.session-note{max-width:calc(100vw - 36px);position:relative}
.account-hint{display:inline-flex;align-items:center;gap:9px;height:15px;max-width:100%}
.account-hint button{padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;white-space:nowrap;line-height:15px;cursor:pointer}
.account-hint #account-benefit{text-decoration:underline;text-underline-offset:3px}
.account-hint #account-dismiss{font-size:18px;min-width:20px;min-height:24px}
.account-hint button:hover{color:var(--mint)}
.account-dialog-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px}
.account-dialog-actions .primary{color:#15241d;text-decoration:none}
#session-status{display:block;max-width:100%;white-space:nowrap}
@media(max-width:1050px){.portal-nav{gap:15px}.top-tools{gap:11px}}
@media(max-width:480px){.account-link #account-label{display:none}.account-link{min-width:20px;justify-content:center}.topbar{gap:10px}.top-tools{gap:9px}.session-note #session-status{font-size:9px}}
@media(max-height:620px) and (min-width:620px){.session-note{position:absolute}.session-note #session-status{white-space:normal;line-height:1.2;font-size:9px}}
@media(max-width:480px){.mode-controls{gap:8px}.mode-switch button{padding:6px 12px}.mode-controls select{max-width:130px;font-size:11px;padding-left:8px;min-height:35px}}
@media(max-width:359px){.mode-controls{gap:6px;max-width:100%}.mode-switch button{font-size:11px;padding:6px 8px}.mode-controls select{max-width:118px;padding-right:18px}}
@media(max-width:480px){body:has(.ds-analytics-consent[open]){--board-size:min(calc(100vw - 28px),calc(100dvh - 340px - var(--banner-height)))}}
@media(max-height:620px) and (min-width:620px){.mode-controls{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;gap:8px;align-self:start}.mode-controls .mode-switch{margin-top:4px}.mode-controls select{max-width:none}.puzzle-heading{margin-top:14px}.feedback-row{bottom:69px}.puzzle-tools{bottom:25px}.session-note{bottom:1px}}
/* Sister-site cross-promotion (2026-09-25). The post-puzzle line only shows in the solved state and fits inside the 60px feedback row, so the board size is unchanged. DeepSquare items stay hidden until the owner flag in portal-links.js is on. */
[data-promo][hidden],a[data-promo-cta][hidden],[data-promo-strip][hidden],[data-portal-soon][hidden],[data-portal-open-only][hidden]{display:none!important}
.promo-mark{width:14px;height:14px;flex:none;border-radius:50%}
.promo-line{display:none;margin:3px 0 0;font-size:11px;line-height:16px;height:16px;max-width:100%;overflow:hidden}
.feedback-copy:has(#feedback.success) .promo-line:not([hidden]){display:block}
.promo-line a,.family-promo a{display:inline-flex;align-items:center;gap:6px;max-width:100%;color:var(--muted);text-decoration:none;white-space:nowrap}
.promo-line [data-promo-text]{overflow:hidden;text-overflow:ellipsis}
.promo-line a:hover,.promo-line a:focus-visible,.family-promo a:hover,.family-promo a:focus-visible{color:var(--text)}
.promo-line a:hover [data-promo-text],.family-promo a:hover [data-promo-text]{text-decoration:underline;text-underline-offset:3px}
.family-promo{display:flex;align-items:center;gap:14px;margin:0 auto 0 0;font-size:11px;color:#8391a5}
/* The footer mention steps back while the contextual post-puzzle line is shown (no layout shift, out of the tab order). */
body:has(#feedback.success) .family-promo{visibility:hidden}
@media(max-width:780px){.family-promo{display:none}}
@media(max-width:380px){.promo-line .promo-mark{display:none}}
/* 2026-09-25 readability: desktop text is at least 13px (was 9-12px). The board budget
   grows by the added line heights (350px -> 376px) so the page still never scrolls, and
   the feedback row reserves three lines so solving never shifts the board. */
@media(min-width:781px) and (min-height:621px){
  :root{--board-size:min(620px,calc(100vw - 36px),calc(100dvh - 376px - var(--banner-height)))}
  .portal-nav{font-size:14px}
  .portal-nav span{font-size:13px}
  .text-button,.account-link{font-size:14px}
  .mode-switch button,.mode-controls select{font-size:14px}
  .eyebrow{font-size:13px;letter-spacing:1.3px}
  .turn-indicator{font-size:13px}
  #feedback{font-size:15px}
  #move-history{font-size:13px;min-height:19px}
  .primary{font-size:14px}
  .feedback-row{min-height:68px}
  .session-note,.account-hint{height:19px}
  .session-note,.account-hint button{font-size:13px;line-height:19px}
  .site-footer,.family-promo{font-size:13px}
  .promo-line{font-size:13px;line-height:19px;height:19px}
  .ds-analytics-consent .ds-analytics-copy p{font-size:13px}
  .ds-analytics-consent .ds-analytics-actions button{font-size:13px}
}
@media(min-width:781px) and (min-height:920px){
  :root{--board-size:min(680px,calc(100vw - 36px),calc(100dvh - 376px - var(--banner-height)))}
}
/* 2026-09-25 phones: while the privacy prompt is open, the board keeps its size at the top
   and the prompt overlays only the area below it (was: reserved space shrank the board to
   ~130px on short phones). Closing the prompt restores the centred no-scroll layout. */
@media(max-width:480px){
  body:has(> main.trainer):has(.ds-analytics-consent[open]){padding-bottom:0;--board-size:min(calc(100vw - 28px),calc(100dvh - 178px - var(--banner-height)))}
  body:has(> main.trainer):has(.ds-analytics-consent[open]) .trainer{justify-content:flex-start;padding-top:4px;overflow:hidden}
}
/* 2026-09-25 SEO pre-render: today's board as plain HTML until Chessground mounts (same colours and pieces). */
.cg-wrap .mb-static-board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;height:100%}
.cg-wrap .mb-static-board span{background-size:84% 84%;background-position:center;background-repeat:no-repeat}
.cg-wrap .mb-static-board .l{background-color:#dfe3da}
.cg-wrap .mb-static-board .d{background-color:#779085}