Spaces:
Running
Running
| /* ── Responsive layout ───────────────────────────────────────────────── | |
| At 1180px and below the columns wrap: the board column takes a | |
| full-width row and the results and PGN columns wrap beneath it. Sizes | |
| are authored in rem. */ | |
| @media (max-width: 1180px) { | |
| html, body { height: auto; overflow-y: auto; } | |
| :root { --pgn-col-w: 18.75rem; } | |
| .content { | |
| grid-template-columns: minmax(0, 1fr) var(--pgn-col-w); | |
| height: auto; | |
| overflow: visible; | |
| padding: var(--space-4); | |
| } | |
| .left-col { | |
| grid-column: 1 / -1; | |
| height: auto; | |
| } | |
| /* Horizontal auto margins centre a fixed-width flex item on the | |
| cross axis of a column-direction container. */ | |
| .board-group { margin: 0 auto; } | |
| .right-col, .pgn-col { | |
| height: min(60vh, 520px); | |
| } | |
| } | |
| /* ── Phone: swipeable screens ─────────────────────────────────────────── | |
| Below 768px the layout is three horizontally swipeable screens in | |
| column order: board, results, PGN. Each screen fills the space between | |
| the header and the bottom screen navigation; a horizontal swipe moves | |
| to the next one, while a vertical swipe scrolls that screen's own | |
| content. The board is sized to the visible height so the whole board | |
| screen fits; below its 14rem floor the screen scrolls from the top. */ | |
| @media (max-width: 767px) { | |
| :root { | |
| --screen-nav-h: calc(3rem + env(safe-area-inset-bottom, 0px)); | |
| --viewport-h: 100vh; | |
| /* Fixed heights above and around the board: three control rows, | |
| column padding 1rem, gaps 1.875rem, error line 0.875rem plus | |
| 0.5rem slack, tray padding 1.25rem and tray borders 4px. The | |
| remainder holds the board and its two trays: 1.25 x board. | |
| Update when the height above the board changes. */ | |
| --board-fit-h: calc((var(--viewport-h) - var(--header-h) - var(--screen-nav-h) - 5.5rem - 3 * var(--control-h) - 4px) / 1.25); | |
| --board-size: max(14rem, min(var(--board-size-cap), var(--board-fit-h))); | |
| } | |
| @supports (height: 100dvh) { | |
| :root { --viewport-h: 100dvh; } | |
| } | |
| html, body { overflow-x: hidden; } | |
| .content { | |
| grid-template-columns: repeat(3, 100vw); | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| overscroll-behavior-x: contain; | |
| scroll-snap-type: x mandatory; | |
| min-height: 0; | |
| height: calc(100vh - var(--header-h) - var(--screen-nav-h)); | |
| height: calc(100dvh - var(--header-h) - var(--screen-nav-h)); | |
| width: 100vw; | |
| max-width: none; | |
| padding: 0; | |
| gap: 0; | |
| } | |
| .left-col, .right-col, .pgn-col { | |
| grid-column: auto; | |
| max-width: 100vw; | |
| min-height: 0; | |
| height: calc(100vh - var(--header-h) - var(--screen-nav-h)); | |
| height: calc(100dvh - var(--header-h) - var(--screen-nav-h)); | |
| scroll-snap-align: start; | |
| /* Containing block for absolutely positioned descendants (e.g. .sr-only). */ | |
| position: relative; | |
| } | |
| .left-col { | |
| overflow-y: auto; | |
| padding: var(--space-2) var(--space-4); | |
| } | |
| .board-group { margin: 0 auto; } | |
| .right-col, .pgn-col { padding: var(--space-4); overflow: hidden; } | |
| /* Logo and nav span two rows; the subtitle sits below the title. */ | |
| .site-header { | |
| display: grid; | |
| grid-template-columns: auto minmax(0, 1fr) auto; | |
| grid-template-rows: auto auto; | |
| align-content: center; | |
| column-gap: 0.625rem; | |
| row-gap: 0; | |
| } | |
| .site-header__logo, .site-header__nav { grid-row: 1 / span 2; } | |
| .site-header__brand { display: contents; } | |
| .site-header__sep { display: none; } | |
| .site-header__title, .site-header__sub { | |
| grid-column: 2; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| line-height: 1.2; | |
| } | |
| .site-header__title { grid-row: 1; align-self: end; } | |
| .site-header__sub { grid-row: 2; align-self: start; font-size: 0.6875rem; } | |
| .screen-nav { display: grid; } | |
| .toast-container { bottom: calc(var(--screen-nav-h) + var(--space-3)); } | |
| /* The moves list owns vertical panning so a drag on it is not claimed | |
| by .content's horizontal scroll-snap. */ | |
| .moves-body-scroll { | |
| touch-action: pan-y; | |
| -webkit-overflow-scrolling: touch; | |
| overscroll-behavior-y: contain; | |
| } | |
| /* The table spans the full screen width, so it is not widened for the scrollbar. */ | |
| .moves-body-scroll.has-vscroll .moves-table--body { width: 100%; } | |
| .move-line { --pgn-rank-width: var(--pgn-rank-w-compact); } | |
| } | |
| @media (max-width: 480px) { | |
| :root { --board-size-cap: min(360px, 88vw); } | |
| .left-col, .right-col, .pgn-col { | |
| padding-left: max(var(--space-4), env(safe-area-inset-left)); | |
| padding-right: max(var(--space-4), env(safe-area-inset-right)); | |
| } | |
| .site-header { | |
| padding-left: max(var(--space-5), env(safe-area-inset-left)); | |
| padding-right: max(var(--space-5), env(safe-area-inset-right)); | |
| } | |
| /* Title, count and CSV button do not fit one row at this width. */ | |
| .panel-header { flex-wrap: wrap; row-gap: 6px; } | |
| /* .btn--grow deliberately doesn't shrink (readable label + icon at | |
| any width) - six buttons can't all fit one row this narrow, so | |
| the toolbar wraps instead of overflowing. */ | |
| .fen-actions { flex-wrap: wrap; row-gap: 6px; } | |
| } | |
| /* ── Touch input sizing ───────────────────────────────────────────────── | |
| (hover: none) and (pointer: coarse) targets touchscreens regardless of | |
| viewport width. Control heights come from --control-h in tokens.css. | |
| Inputs use a >=16px font size because iOS Safari zooms the page when a | |
| focused input's font size is under 16px. */ | |
| @media (hover: none) and (pointer: coarse) { | |
| .fen-input { font-size: var(--text-lg); } | |
| .pgn-dialog__textarea { font-size: var(--text-lg); } | |
| /* #board handles its own drag gestures; letting the browser also | |
| interpret them as page-scroll/pinch-zoom fights the drag. */ | |
| .spare-piece, .promotion-piece-btn { touch-action: none; } | |
| } | |