/* Layout: a study-room tool. Library -> repertoire -> board + coaching panel. Board colours are sage on bone, like a club set. */ /* Look: "Modern bright": clean light surfaces, one deep-teal accent (with a brighter teal for gradients), large rounded cards with soft layered shadows, and Plus Jakarta Sans throughout (IBM Plex Mono for moves). Board colours stay as they were (and are chosen in Progress). */ :root { --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #F1F4F8; --fg: #0F1B2D; --muted: #5B6779; --line: #E3E8EF; --accent: #0F766E; --accent-2: #14B8A6; --accent-fg: #FFFFFF; --accent-soft: #E3F4F1; --good: #15803D; --good-soft: #E3F5E9; --bad: #C2410C; --bad-soft: #FDECE3; --warn: #A16207; --warn-soft: #FDF3D7; --sq-light: #E5E9DD; --sq-dark: #87A392; --coord: #2B3B34; --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 10px 28px rgba(15, 27, 45, .08); --shadow-sm: 0 1px 2px rgba(15, 27, 45, .05), 0 4px 14px rgba(15, 27, 45, .05); --f-display: "Plus Jakarta Sans", "Avenir Next", system-ui, sans-serif; --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --r: 14px; --eval-white: #F2F4F1; --eval-black: #2F3532; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B1220; --surface: #121B2C; --surface-2: #19243A; --fg: #E6EDF7; --muted: #94A3B8; --line: #24324C; --accent: #2DD4BF; --accent-2: #5EEAD4; --accent-fg: #042F2B; --accent-soft: #10302D; --good: #4ADE80; --good-soft: #12321F; --bad: #FB923C; --bad-soft: #3A1E10; --warn: #FACC15; --warn-soft: #3A3010; --sq-light: #C8D0C2; --sq-dark: #5E7C6C; --coord: #1A2520; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0B1220; --surface: #121B2C; --surface-2: #19243A; --fg: #E6EDF7; --muted: #94A3B8; --line: #24324C; --accent: #2DD4BF; --accent-2: #5EEAD4; --accent-fg: #042F2B; --accent-soft: #10302D; --good: #4ADE80; --good-soft: #12321F; --bad: #FB923C; --bad-soft: #3A1E10; --warn: #FACC15; --warn-soft: #3A3010; --sq-light: #C8D0C2; --sq-dark: #5E7C6C; --coord: #1A2520; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25); color-scheme: dark; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; /* the gutter is the padding below, not the browser's default 8px margin */ background: var(--bg); color: var(--fg); font: 15px/1.5 var(--f-body); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 48px; } h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.02em; } h1 { font-size: 2rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; font-weight: 500; } p { margin: 0; } button, input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wrap { max-width: 1180px; margin: 0 auto; } .muted { color: var(--muted); } .mono { font-family: var(--f-mono); } .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .num { font-variant-numeric: tabular-nums; } /* top bar */ .topbar { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px 24px; padding-block: 16px; } .topbar .user-menu { justify-self: end; } /* The two halves of the app: Train and Prepare. */ .main-nav { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); } .nav-tab { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; padding: 8px 26px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; letter-spacing: -0.01em; } .nav-tab:hover:not(.on) { color: var(--fg); background: var(--surface-2); } .nav-tab.on { background: var(--accent); color: var(--accent-fg); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; background: none; border: 0; padding: 0; cursor: pointer; } .brand-mark { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); font-size: 1.15rem; } .store-pill { font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .store-pill.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 500; font-size: .92rem; white-space: nowrap; transition: background .15s, border-color .15s; } .btn:hover:not(:disabled) { border-color: var(--muted); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn.primary:hover:not(:disabled) { filter: brightness(1.08); } a.btn { text-decoration: none; color: inherit; } .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn.ghost:hover:not(:disabled) { color: var(--fg); border-color: var(--line); } .btn.danger { color: var(--bad); } .btn.danger.armed { background: var(--bad); border-color: var(--bad); color: var(--surface); } .btn .kbd { font-family: var(--f-mono); font-size: .72rem; opacity: .75; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; } /* home */ .home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 28px; align-items: start; padding-top: 8px; } .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .rep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .rep-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; } .rep-card:hover { border-color: var(--accent); box-shadow: var(--shadow); } .rep-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .rep-card h3 { font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .side-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; padding: 2px 8px 2px 4px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; } .side-chip i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--fg); display: inline-block; } .side-chip.white i { background: #FFFFFF; } .side-chip.black i { background: #1A1A1A; } .tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 2px 6px; border-radius: 4px; } .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mini-stats div { display: flex; flex-direction: column; } .mini-stats b { font-family: var(--f-display); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .mini-stats span { font-size: .75rem; color: var(--muted); } .mini-stats .due b { color: var(--accent); } .mini-stats .zero b { color: var(--muted); font-weight: 500; } .bar { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .rep-search { width: 100%; margin-bottom: 14px; } /* Anything with the hidden attribute stays hidden, whatever display its class sets. */ [hidden] { display: none !important; } .rep-open { all: unset; cursor: pointer; overflow-wrap: anywhere; } .rep-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .rep-card.has-due { border-color: var(--accent); } .rep-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; min-height: 30px; } .add-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 28px; text-align: center; color: var(--muted); } .side-stack { display: flex; flex-direction: column; gap: 16px; } .panel-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label, .field .label { font-size: .82rem; font-weight: 600; } .input, textarea.input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); } textarea.input { font-family: var(--f-mono); font-size: .8rem; min-height: 92px; resize: vertical; } .seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .seg label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; cursor: pointer; font-weight: 500; font-size: .9rem; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label:has(input:checked) { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 2px var(--accent); } .seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; } .drop { border: 1.5px dashed var(--line); border-radius: 6px; padding: 16px; text-align: center; font-size: .88rem; color: var(--muted); cursor: pointer; background: var(--surface-2); } .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); } .drop strong { color: var(--accent); } .preview { font-size: .85rem; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); } .preview.ok { background: var(--good-soft); } .preview.err { background: var(--bad-soft); color: var(--bad); } details.panel-box > summary { cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; } details.panel-box > summary::-webkit-details-marker { display: none; } details.panel-box > summary::after { content: "+"; font-family: var(--f-mono); color: var(--muted); } details.panel-box[open] > summary::after { content: "–"; } details.panel-box:not([open]) { gap: 0; } .hint-text { font-size: .82rem; color: var(--muted); } .settings-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; font-size: .88rem; } .settings-grid select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); } /* repertoire view */ .crumb { display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; } .crumb:hover { color: var(--fg); } .rep-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 10px 0 20px; } .rep-head-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .rep-head-title h1 { overflow-wrap: anywhere; } .modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; } .mode { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .mode:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow); } .mode:disabled { cursor: not-allowed; opacity: .55; } .mode-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mode-name { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; } .mode-count { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1; } .mode.hot { border-color: var(--accent); background: var(--accent-soft); } .mode.hot .mode-count { color: var(--accent); } .mode p { font-size: .82rem; color: var(--muted); } .rep-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 24px; align-items: start; } .ladder { display: flex; flex-direction: column; gap: 10px; } .ladder-bars { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; align-items: end; height: 96px; } .ladder-bars .col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; position: relative; } .ladder-bars .col span { display: block; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; opacity: var(--o, 1); } .ladder-bars .col.new span { background: var(--line); } .ladder-bars .col em { font-style: normal; font-size: .72rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); margin-bottom: 2px; } .ladder-labels { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; font-family: var(--f-mono); font-size: .68rem; color: var(--muted); text-align: center; border-top: 1px solid var(--line); padding-top: 4px; } .chapters { display: flex; flex-direction: column; gap: 10px; } .chapter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .chapter > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; } .chapter > summary::-webkit-details-marker { display: none; } .chapter-title { font-weight: 600; display: flex; gap: 10px; align-items: baseline; min-width: 0; } .chapter-title .idx { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); } .chapter-title span:last-child { overflow-wrap: anywhere; } .chapter-meta { font-size: .8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; } .chapter-meta .due { color: var(--accent); font-weight: 600; } .chapter .bar { grid-column: 1 / -1; } .chapter-actions { display: flex; gap: 6px; } .chapter-actions .btn { padding: 5px 10px; font-size: .82rem; } .rep-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .engine-review:empty { display: none; } .engine-review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .eng-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .eng-group { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .eng-group .check-list { max-height: none; } .btn.mini.on { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); font-weight: 600; } .btn.warn { color: var(--warn); border-color: var(--warn); } .chapter.branch { background: var(--surface-2); margin-top: 8px; } .branch-name { font-weight: 600; font-family: var(--f-body); font-size: .9rem; color: var(--fg); margin-right: 8px; } .lines { border-top: 1px solid var(--line); padding: 8px 16px 14px; display: flex; flex-direction: column; } .line-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-2); align-items: baseline; } .line-row:last-child { border-bottom: 0; } .line-moves { font-family: var(--f-mono); font-size: .78rem; overflow-wrap: anywhere; color: var(--muted); } .line-moves b { color: var(--fg); font-weight: 600; } .lvl { font-family: var(--f-mono); font-size: .7rem; padding: 1px 6px; border-radius: 4px; text-align: center; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .lvl.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; } .lvl.due { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; } .lvl.miss { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; } /* trainer */ .train { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; padding-top: 4px; } .board-col { display: flex; justify-content: center; min-width: 0; } .board-frame { width: min(100%, calc(100vh - 120px)); max-width: 100%; aspect-ratio: 1; border-radius: 6px; box-shadow: var(--shadow); transition: box-shadow .2s; position: relative; } .promo { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, transparent); border-radius: 6px; } .promo-pick { display: flex; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .promo-pick button { width: 56px; height: 56px; font-size: 2.4rem; line-height: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--fg); cursor: pointer; } .promo-pick button:hover, .promo-pick button:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); } .board-frame.flash-bad { box-shadow: 0 0 0 4px var(--bad); } .board-frame.flash-good { box-shadow: 0 0 0 4px var(--good); } .board-frame.flash-alt { box-shadow: 0 0 0 4px var(--warn); } .board { width: 100%; height: 100%; } .tpanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .tpanel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } /* The board's Flip button sits with the head's other button, on the right; on a narrow screen the two move to their own row together rather than squeezing "Line 1 of 2" onto three lines. */ .head-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; } .head-btns .flip-btn { min-width: 36px; } .tpanel-head .progress-text:not(.a-title) { white-space: normal; min-width: 0; flex: 1 1 auto; } /* long study names wrap (390 px) */ .mode-chip { white-space: nowrap; flex: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); } .progress-text { flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; } .tchapter { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; } .status { border-radius: 6px; padding: 10px 12px; font-size: .92rem; background: var(--surface-2); border-left: 3px solid var(--line); min-height: 44px; } .status.good { background: var(--good-soft); border-color: var(--good); } .status.bad { background: var(--bad-soft); border-color: var(--bad); } .status.alt { background: var(--warn-soft); border-color: var(--warn); } .status.info { border-color: var(--accent); } .status .san { font-family: var(--f-mono); font-weight: 600; } .comment { font-size: .9rem; line-height: 1.55; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); max-height: 180px; overflow-y: auto; } .comment .c-item + .c-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .comment .who { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; display: block; margin-bottom: 2px; } .moves { font-family: var(--f-mono); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 10px 12px; border-radius: 6px; background: var(--surface-2); min-height: 44px; max-height: 160px; overflow-y: auto; align-content: flex-start; } .moves .mn { color: var(--muted); } .moves .mv { padding: 0 3px; border-radius: 3px; } .moves .mv.user { font-weight: 600; } .moves .mv.last { background: var(--accent-soft); } .moves .mv.miss { color: var(--bad); text-decoration: underline; text-decoration-thickness: 2px; } .moves .pending { color: var(--muted); } .warnings { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--bad-soft); } .warnings .eyebrow { color: var(--bad); } .warn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .88rem; } .warn-item .san { font-family: var(--f-mono); font-weight: 600; color: var(--bad); text-decoration: line-through; margin-right: 4px; } .warn-item .refute { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; } .glyph { font-weight: 700; margin-left: 1px; } .glyph.good { color: var(--good); } .glyph.bad { color: var(--bad); } .glyph.alt { color: var(--warn); } .marks { font-family: var(--f-mono); color: var(--muted); } .tcontrols { display: flex; flex-wrap: wrap; gap: 8px; } .summary { display: flex; flex-direction: column; gap: 14px; } .summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; } .summary-stats div { background: var(--surface-2); border-radius: 6px; padding: 10px; } .summary-stats b { display: block; font-family: var(--f-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; } .summary-stats span { font-size: .75rem; color: var(--muted); } .result-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; font-size: .8rem; } .result-list div { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; } .result-list .ok { color: var(--good); font-weight: 700; } .result-list .no { color: var(--bad); font-weight: 700; } .result-list .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } /* analysis */ .board-wrap { display: flex; gap: 8px; width: min(100%, calc(100vh - 98px)); max-width: 100%; } .board-wrap .board-frame { flex: 1; width: auto; min-width: 0; } .evalbar { width: 14px; flex: none; border-radius: 4px; background: var(--eval-black); position: relative; overflow: hidden; box-shadow: var(--shadow); } .evalbar span { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: var(--eval-white); transition: height .35s; } .evalbar.flipped span { bottom: auto; top: 0; } .a-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .engine-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .engine-sum { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; } .a-eval { font-family: var(--f-display); font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1; } #a-engine { font-size: .8rem; } #a-engine-status:empty { display: none; } .pvs { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: .8rem; } .pv { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); } .pv b { font-variant-numeric: tabular-nums; } .pvm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pvm .mn { color: var(--muted); } .pvmove, .moves button.mv { background: none; border: 0; padding: 0 3px; font: inherit; color: inherit; cursor: pointer; border-radius: 3px; } .pvmove:hover, .moves button.mv:hover { background: var(--accent-soft); } .a-rep { font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chip-btn.avoid { border-color: var(--bad); background: var(--bad-soft); text-decoration: line-through; text-decoration-color: var(--bad); } .chip-btn { font-family: var(--f-mono); font-size: .8rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--fg); cursor: pointer; } .nav .btn { padding: 6px 10px; } .load-box summary { cursor: pointer; font-size: .88rem; font-weight: 600; } .load-box[open] { display: flex; flex-direction: column; gap: 8px; } .btn.mini { padding: 2px 8px; font-size: .75rem; } .flag { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 1px 6px; border-radius: 4px; } .flag.blunder { color: var(--bad); background: var(--bad-soft); } .flag.mistake { color: var(--warn); background: var(--warn-soft); } .flag.inaccuracy { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); } .check-list { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; } .check-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .82rem; padding: 10px 0; border-top: 1px solid var(--line); } .check-item .mono { font-size: .78rem; overflow-wrap: anywhere; } .login { max-width: 400px; margin: 8vh auto 0; display: flex; flex-direction: column; gap: 20px; } .user-menu { display: flex; align-items: center; gap: 4px; font-size: .88rem; } .url-row { display: flex; gap: 8px; } .url-row .input { min-width: 0; } .or { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-size: .9rem; box-shadow: var(--shadow); z-index: 50; max-width: calc(100vw - 32px); } .boot { padding: 60px 0; text-align: center; color: var(--muted); } /* Train now: the one button for today's training */ .train-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 14px 18px; margin-bottom: 14px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--accent-fg); cursor: pointer; font: inherit; box-shadow: var(--shadow); } .train-now > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .train-now b { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.2; } .train-now span span { font-size: .88rem; opacity: .9; overflow-wrap: anywhere; } .train-now-go { font-size: 1.6rem; line-height: 1; transition: transform .15s; } .train-now:hover .train-now-go { transform: translateX(3px); } .train-now:focus-visible { outline-offset: 3px; } .train-now.done { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: default; background: var(--surface); color: var(--fg); border: 1px solid var(--line); box-shadow: none; } .train-now.done span { font-size: .88rem; color: var(--muted); } /* how far through the current line */ .line-bar { height: 4px; margin: -16px -16px 0; border-radius: var(--r) var(--r) 0 0; background: var(--surface-2); overflow: hidden; } .line-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .today { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; width: 100%; text-align: left; padding: 12px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; color: inherit; font: inherit; } .today:hover { border-color: var(--accent); } .today-main { display: flex; flex-direction: column; } .today-main span, .today-streak span { font-size: .8rem; color: var(--muted); } .today-streak { display: flex; flex-direction: column; align-items: flex-end; grid-row: 1 / span 2; grid-column: 2; } .today-streak b { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: var(--accent); } .today .bar { grid-column: 1; } .progress { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; } /* Lichess studies: "Updated on Lichess", update previews and the Updates page */ .tag-lichess { color: var(--accent); background: var(--accent-soft); } .lichess-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r); background: var(--accent-soft); font-size: .9rem; } .update-sum ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; } .update-sum .hint-text { margin: 8px 0 2px; } .lost-lines li { font-size: .8rem; overflow-wrap: anywhere; } .updates { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; max-width: 760px; } .update-row { gap: 10px; } .update-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .update-row-head h2 { margin: 0; } .goal-pick { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); } .goal-pick select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--fg); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .tile > span { font-size: .78rem; color: var(--muted); } .tile b { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .tile small { color: var(--muted); font-size: .78rem; } .chart { position: relative; height: 150px; border-bottom: 1px solid var(--line); } .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; } .bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; } .bar-col i { display: block; width: 100%; background: var(--accent-soft); border-radius: 2px 2px 0 0; } .bar-col i.hit { background: var(--accent); } .bar-col.now { outline: 1px dashed var(--line); outline-offset: 1px; } .goal-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted); pointer-events: none; } .goal-line span { position: absolute; left: 0; top: -1.3em; font-size: .72rem; color: var(--muted); background: var(--surface); padding: 0 4px; } .chart-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); } .seg { display: flex; gap: 4px; } .seg .btn.on { color: var(--fg); border-color: var(--line); background: var(--surface-2); } .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .88rem; } table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; } table.data th { font-size: .75rem; font-weight: 600; color: var(--muted); } table.data td:first-child { white-space: normal; } @media (max-width: 920px) { .home, .rep-body, .train { grid-template-columns: minmax(0, 1fr); } .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board-frame { width: min(100%, 560px, calc(100vh - 110px)); width: min(100%, 560px, calc(100dvh - 110px)); } } @media (max-width: 480px) { h1 { font-size: 1.5rem; } /* A one-row top bar keeps the board near the top of the screen. */ .topbar { grid-template-columns: auto 1fr; padding-block: 10px; row-gap: 10px; } /* The main tabs get a full-width row of their own under the logo and menu. */ .main-nav { grid-column: 1 / -1; grid-row: 2; } .nav-tab { flex: 1; padding-block: 10px; } .topbar.on-board .main-nav { display: none; } .brand-name, .user-name, .wide-only { display: none; } .narrow-only { display: inline; } .brand-mark { width: 34px; height: 34px; } .topbar { gap: 8px; } .user-menu { gap: 0; } .user-menu .btn { padding: 6px 7px; } .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .tile b { font-size: 1.25rem; } .line-row { grid-template-columns: 44px minmax(0, 1fr); } .line-row > .btn-row { grid-column: 2; } .cg-wrap coords { font-size: 8px; } .modes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .mode { padding: 12px; } .mode p { display: none; } .chapter > summary { grid-template-columns: minmax(0, 1fr); } /* The board (training and analysis) runs to the screen edges: bigger squares to tap. */ .train .board-col { margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); } .train .board-frame { width: 100%; border-radius: 0; box-shadow: none; } .train .board-frame cg-board { border-radius: 0; } .train .board-frame.flash-bad, .train .board-frame.flash-good, .train .board-frame.flash-alt { box-shadow: none; outline: 4px solid var(--bad); outline-offset: -4px; z-index: 3; } .train .board-frame.flash-good { outline-color: var(--good); } .train .board-frame.flash-alt { outline-color: var(--warn); } } .today-rank { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); } .today-rank span { color: var(--accent); font-size: 1rem; } .rank-head { display: flex; align-items: center; gap: 14px; } .rank-head h2 { margin: 0; } .rank-head p { margin: 0; font-size: .88rem; } .rank-glyph { font-size: 2.6rem; line-height: 1; color: var(--accent); } .badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 10px; } .badge { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r); opacity: .6; } .badge.on { opacity: 1; border-style: solid; border-color: var(--accent); background: var(--accent-soft); } .badge-glyph { font-size: 1.6rem; line-height: 1; color: var(--muted); } .badge.on .badge-glyph { color: var(--accent); } .badge b { font-size: .88rem; } .badge small { font-size: .75rem; color: var(--muted); } .pb-note { margin: 0; font-weight: 600; color: var(--good); } #update-bar { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--accent); color: var(--accent-fg); font-size: .88rem; text-align: center; } #update-bar .btn { background: var(--accent-fg); color: var(--accent); border-color: transparent; } #cheer { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(420px, calc(100vw - 32px)); } .cheer-card { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: var(--surface); border: 2px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow); animation: cheer-in .35s ease-out; } .cheer-card b { display: block; } .cheer-card span:not(.cheer-glyph) { font-size: .85rem; color: var(--muted); } .cheer-glyph { font-size: 2rem; line-height: 1; color: var(--accent); } .confetti { position: fixed; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); left: 50%; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: confetti 1.7s ease-out forwards; } /* Side by side (board left, panel right): the corner under the panel, clear of the board. */ @media (min-width: 921px) { #cheer { left: auto; right: max(24px, env(safe-area-inset-right, 0px)); bottom: 24px; transform: none; width: 380px; } .confetti { left: auto; right: 210px; bottom: 60px; } } @keyframes cheer-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + 520px)) rotate(calc(var(--rot) * 2)); opacity: 0; } } .ring { width: 34px; height: 34px; flex: none; } .ring-wrap { display: inline-flex; } .ring-bg { fill: none; stroke: var(--line); stroke-width: 3.4; } .ring-fg { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; } .ring text { font-size: 9px; font-weight: 600; fill: var(--fg); font-variant-numeric: tabular-nums; } .rank-head .ring { width: 52px; height: 52px; } .rep-card-top { align-items: center; } .tourney-chip { align-self: flex-start; font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .week { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .week span { font-size: .85rem; color: var(--muted); } .big-count { margin: 0; } .big-count b { font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--accent); } .big-count span { color: var(--muted); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* chessground base */ .cg-wrap { box-sizing: content-box; position: relative; display: block; } cg-container { position: absolute; width: 100%; height: 100%; display: block; top: 0; } cg-board { position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; line-height: 0; border-radius: 6px; background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 0 0 / 25% 25%; } .cg-wrap.manipulable cg-board { cursor: pointer; } cg-board square { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; pointer-events: none; } cg-board square.move-dest { pointer-events: auto; background: radial-gradient(rgba(16, 60, 44, .5) 19%, rgba(0,0,0,0) 20%); } cg-board square.oc.move-dest { background: radial-gradient(transparent 0%, transparent 78%, rgba(16, 60, 44, .45) 80%); } cg-board square.move-dest:hover { background: rgba(30, 107, 87, .32); } cg-board square.last-move { will-change: transform; background-color: rgba(222, 196, 70, .45); } cg-board square.selected { background-color: rgba(30, 107, 87, .5); } cg-board square.check { background: radial-gradient(ellipse at center, rgba(255,0,0,1) 0%, rgba(231,0,0,1) 25%, rgba(169,0,0,0) 89%, rgba(158,0,0,0) 100%); } .cg-wrap piece { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; background-size: cover; z-index: 2; will-change: transform; pointer-events: none; } cg-board piece.dragging { cursor: move; z-index: 11 !important; } piece.anim { z-index: 8; } piece.fading { z-index: 1; opacity: .5; } .cg-wrap piece.ghost { opacity: .3; } .cg-wrap cg-auto-pieces, .cg-wrap .cg-shapes, .cg-wrap .cg-custom-svgs { overflow: visible; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .cg-wrap cg-auto-pieces { z-index: 2; } .cg-wrap cg-auto-pieces piece { opacity: .3; } .cg-wrap .cg-shapes { overflow: hidden; opacity: .7; z-index: 2; } .cg-wrap .cg-custom-svgs { z-index: 9; } .cg-wrap coords { position: absolute; display: flex; pointer-events: none; font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--coord); opacity: .7; } .cg-wrap coords.ranks { left: 3px; top: 0; flex-flow: column-reverse; height: 100%; width: 12px; } .cg-wrap coords.ranks.black { flex-flow: column; } .cg-wrap coords.files { bottom: 0; left: 0; flex-flow: row; width: 100%; height: 14px; text-align: right; } .cg-wrap coords.files.black { flex-flow: row-reverse; } .cg-wrap coords coord { flex: 1 1 0; } .cg-wrap coords.ranks coord { padding-top: 2px; } .cg-wrap coords.files coord { padding-right: 3px; } /** Embedded SVGs for all chess pieces */ .cg-wrap piece.pawn.white { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=='); } .cg-wrap piece.bishop.white { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PC9nPjwvc3ZnPg=='); } .cg-wrap piece.knight.white { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg=='); } .cg-wrap piece.rook.white { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy0zdi00aDIxdjRIMTJ6bS0xLTIyVjloNHYyaDVWOWg1djJoNVY5aDR2NSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMzQgMTRsLTMgM0gxNGwtMy0zIi8+PHBhdGggZD0iTTMxIDE3djEyLjVIMTRWMTciIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMxIDI5LjVsMS41IDIuNWgtMjBsMS41LTIuNSIvPjxwYXRoIGQ9Ik0xMSAxNGgyMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4='); } .cg-wrap piece.queen.white { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDEyYTIgMiAwIDEgMS00IDAgMiAyIDAgMSAxIDQgMHptMTYuNS00LjVhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAwek00MSAxMmEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTE2IDguNWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTMzIDlhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAweiIvPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi0xMi03IDExVjExbC01LjUgMTMuNS0zLTE1LTMgMTUtNS41LTE0VjI1TDcgMTRsMiAxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTkgMjZjMCAyIDEuNSAyIDIuNSA0IDEgMS41IDEgMSAuNSAzLjUtMS41IDEtMS41IDIuNS0xLjUgMi41LTEuNSAxLjUuNSAyLjUuNSAyLjUgNi41IDEgMTYuNSAxIDIzIDAgMCAwIDEuNS0xIDAtMi41IDAgMCAuNS0xLjUtMS0yLjUtLjUtMi41LS41LTIgLjUtMy41IDEtMiAyLjUtMiAyLjUtNC04LjUtMS41LTE4LjUtMS41LTI3IDB6IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPjxwYXRoIGQ9Ik0xMS41IDMwYzMuNS0xIDE4LjUtMSAyMiAwTTEyIDMzLjVjNi0xIDE1LTEgMjEgMCIgZmlsbD0ibm9uZSIvPjwvZz48L3N2Zz4='); } .cg-wrap piece.king.white { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTIyLjUgMjVzNC41LTcuNSAzLTEwLjVjMCAwLTEtMi41LTMtMi41cy0zIDIuNS0zIDIuNWMtMS41IDMgMyAxMC41IDMgMTAuNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTBWMzd6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg=='); } .cg-wrap piece.pawn.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=='); } .cg-wrap piece.bishop.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48L2c+PC9zdmc+'); } .cg-wrap piece.knight.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMjQuNTUgMTAuNGwtLjQ1IDEuNDUuNS4xNWMzLjE1IDEgNS42NSAyLjQ5IDcuOSA2Ljc1UzM1Ljc1IDI5LjA2IDM1LjI1IDM5bC0uMDUuNWgyLjI1bC4wNS0uNWMuNS0xMC4wNi0uODgtMTYuODUtMy4yNS0yMS4zNC0yLjM3LTQuNDktNS43OS02LjY0LTkuMTktNy4xNmwtLjUxLS4xeiIgZmlsbD0iI2VjZWNlYyIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPg=='); } .cg-wrap piece.rook.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy41LTdsMS41LTIuNWgxN2wxLjUgMi41aC0yMHptLS41IDR2LTRoMjF2NEgxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTE0IDI5LjV2LTEzaDE3djEzSDE0eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTQgMTYuNUwxMSAxNGgyM2wtMyAyLjVIMTR6TTExIDE0VjloNHYyaDVWOWg1djJoNVY5aDR2NUgxMXoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTEyIDM1LjVoMjFtLTIwLTRoMTltLTE4LTJoMTdtLTE3LTEzaDE3TTExIDE0aDIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4='); } .cg-wrap piece.queen.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIHN0cm9rZT0ibm9uZSI+PGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMjIuNSIgY3k9IjgiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjkiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjEyIiByPSIyLjc1Ii8+PC9nPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi41LTEyLjVMMzEgMjVsLS4zLTE0LjEtNS4yIDEzLjYtMy0xNC41LTMgMTQuNS01LjItMTMuNkwxNCAyNSA2LjUgMTMuNSA5IDI2eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNOSAyNmMwIDIgMS41IDIgMi41IDQgMSAxLjUgMSAxIC41IDMuNS0xLjUgMS0xLjUgMi41LTEuNSAyLjUtMS41IDEuNS41IDIuNS41IDIuNSA2LjUgMSAxNi41IDEgMjMgMCAwIDAgMS41LTEgMC0yLjUgMCAwIC41LTEuNS0xLTIuNS0uNS0yLjUtLjUtMiAuNS0zLjUgMS0yIDIuNS0yIDIuNS00LTguNS0xLjUtMTguNS0xLjUtMjcgMHoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTExIDM4LjVhMzUgMzUgMSAwIDAgMjMgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMTEgMjlhMzUgMzUgMSAwIDEgMjMgMG0tMjEuNSAyLjVoMjBtLTIxIDNhMzUgMzUgMSAwIDAgMjIgMG0tMjMgM2EzNSAzNSAxIDAgMCAyNCAwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiLz48L2c+PC9zdmc+'); } .cg-wrap piece.king.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjYiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41IiBmaWxsPSIjMDAwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjxwYXRoIGQ9Ik0xMS41IDM3YzUuNSAzLjUgMTUuNSAzLjUgMjEgMHYtN3M5LTQuNSA2LTEwLjVjLTQtNi41LTEzLjUtMy41LTE2IDRWMjd2LTMuNWMtMy41LTcuNS0xMy0xMC41LTE2LTQtMyA2IDUgMTAgNSAxMFYzN3oiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMyIDI5LjVzOC41LTQgNi4wMy05LjY1QzM0LjE1IDE0IDI1IDE4IDIyLjUgMjQuNWwuMDEgMi4xLS4wMS0yLjFDMjAgMTggOS45MDYgMTQgNi45OTcgMTkuODVjLTIuNDk3IDUuNjUgNC44NTMgOSA0Ljg1MyA5IiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiIHN0cm9rZT0iI2VjZWNlYyIvPjwvZz48L3N2Zz4='); } /* ── Boards unlocked by rank (; same colours in light and dark mode). html:root outranks the dark-theme :root rules above. ── */ html:root[data-board="ocean"] { --sq-light: #DEE6EC; --sq-dark: #7F9DB5; --coord: #1E3242; } html:root[data-board="wood"] { --sq-light: #F0D9B5; --sq-dark: #B58863; --coord: #3F2A17; } html:root[data-board="violet"] { --sq-light: #E9E2F2; --sq-dark: #9A84BC; --coord: #2F2342; } html:root[data-board="coral"] { --sq-light: #F7E4DC; --sq-dark: #D58A72; --coord: #4E2418; } html:root[data-board="gold"] { --sq-light: #F6EBC6; --sq-dark: #C6A043; --coord: #3E2F08; } .boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); gap: 8px; } .board-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; font: inherit; color: inherit; text-align: left; } .board-pick i { width: 100%; aspect-ratio: 2; border-radius: 4px; margin-bottom: 4px; background: repeating-conic-gradient(var(--sw-dark) 0 25%, var(--sw-light) 0 50%) 0 0 / 25% 50%; } .board-pick b { font-size: .85rem; } .board-pick small { font-size: .72rem; color: var(--muted); } .board-pick.current { border-color: var(--accent); outline: 2px solid var(--accent); } .board-pick:disabled { cursor: default; opacity: .55; } .board-pick:disabled i { filter: grayscale(.8); } [data-swatch="meadow"] { --sw-light: #E5E9DD; --sw-dark: #87A392; } [data-swatch="ocean"] { --sw-light: #DEE6EC; --sw-dark: #7F9DB5; } [data-swatch="wood"] { --sw-light: #F0D9B5; --sw-dark: #B58863; } [data-swatch="violet"] { --sw-light: #E9E2F2; --sw-dark: #9A84BC; } [data-swatch="coral"] { --sw-light: #F7E4DC; --sw-dark: #D58A72; } [data-swatch="gold"] { --sw-light: #F6EBC6; --sw-dark: #C6A043; } /* ── Daily quests (home) ── */ .quests { padding: 12px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .quests-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .quests ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .quests li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .9rem; } .q-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--accent-fg); } .quests li.done .q-check { background: var(--accent); border-color: var(--accent); } .quests li.done .q-text { color: var(--muted); text-decoration: line-through; } .q-val { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; } .chest { font-size: .8rem; color: var(--muted); } .chest.open { color: var(--accent); font-weight: 600; } /* ── Combo (training panel) ── */ .tchapter-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .combo { flex: none; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; } .combo.hot { background: var(--warn-soft); color: var(--warn); } .combo.pop { animation: combo-pop .35s ease-out; } @keyframes combo-pop { 40% { transform: scale(1.25); } } /* ── Speed run ── */ .speed-body { display: flex; flex-direction: column; gap: 14px; } .speed-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .speed-stats div { background: var(--surface-2); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; } .speed-stats b { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .speed-stats b.low { color: var(--bad); } .speed-stats span { font-size: .75rem; color: var(--muted); } .speed-mode .mode-count small, .survival-mode .mode-count small { font-size: .7rem; font-weight: 500; color: var(--muted); } /* ── Piece sets unlocked by rank (; files and licences in public/pieces/) ── */ html[data-pieces="merida"] .cg-wrap piece.pawn.white { background-image: url(/pieces/merida/wP.svg); } html[data-pieces="merida"] .cg-wrap piece.knight.white { background-image: url(/pieces/merida/wN.svg); } html[data-pieces="merida"] .cg-wrap piece.bishop.white { background-image: url(/pieces/merida/wB.svg); } html[data-pieces="merida"] .cg-wrap piece.rook.white { background-image: url(/pieces/merida/wR.svg); } html[data-pieces="merida"] .cg-wrap piece.queen.white { background-image: url(/pieces/merida/wQ.svg); } html[data-pieces="merida"] .cg-wrap piece.king.white { background-image: url(/pieces/merida/wK.svg); } html[data-pieces="merida"] .cg-wrap piece.pawn.black { background-image: url(/pieces/merida/bP.svg); } html[data-pieces="merida"] .cg-wrap piece.knight.black { background-image: url(/pieces/merida/bN.svg); } html[data-pieces="merida"] .cg-wrap piece.bishop.black { background-image: url(/pieces/merida/bB.svg); } html[data-pieces="merida"] .cg-wrap piece.rook.black { background-image: url(/pieces/merida/bR.svg); } html[data-pieces="merida"] .cg-wrap piece.queen.black { background-image: url(/pieces/merida/bQ.svg); } html[data-pieces="merida"] .cg-wrap piece.king.black { background-image: url(/pieces/merida/bK.svg); } html[data-pieces="chessnut"] .cg-wrap piece.pawn.white { background-image: url(/pieces/chessnut/wP.svg); } html[data-pieces="chessnut"] .cg-wrap piece.knight.white { background-image: url(/pieces/chessnut/wN.svg); } html[data-pieces="chessnut"] .cg-wrap piece.bishop.white { background-image: url(/pieces/chessnut/wB.svg); } html[data-pieces="chessnut"] .cg-wrap piece.rook.white { background-image: url(/pieces/chessnut/wR.svg); } html[data-pieces="chessnut"] .cg-wrap piece.queen.white { background-image: url(/pieces/chessnut/wQ.svg); } html[data-pieces="chessnut"] .cg-wrap piece.king.white { background-image: url(/pieces/chessnut/wK.svg); } html[data-pieces="chessnut"] .cg-wrap piece.pawn.black { background-image: url(/pieces/chessnut/bP.svg); } html[data-pieces="chessnut"] .cg-wrap piece.knight.black { background-image: url(/pieces/chessnut/bN.svg); } html[data-pieces="chessnut"] .cg-wrap piece.bishop.black { background-image: url(/pieces/chessnut/bB.svg); } html[data-pieces="chessnut"] .cg-wrap piece.rook.black { background-image: url(/pieces/chessnut/bR.svg); } html[data-pieces="chessnut"] .cg-wrap piece.queen.black { background-image: url(/pieces/chessnut/bQ.svg); } html[data-pieces="chessnut"] .cg-wrap piece.king.black { background-image: url(/pieces/chessnut/bK.svg); } html[data-pieces="fantasy"] .cg-wrap piece.pawn.white { background-image: url(/pieces/fantasy/wP.svg); } html[data-pieces="fantasy"] .cg-wrap piece.knight.white { background-image: url(/pieces/fantasy/wN.svg); } html[data-pieces="fantasy"] .cg-wrap piece.bishop.white { background-image: url(/pieces/fantasy/wB.svg); } html[data-pieces="fantasy"] .cg-wrap piece.rook.white { background-image: url(/pieces/fantasy/wR.svg); } html[data-pieces="fantasy"] .cg-wrap piece.queen.white { background-image: url(/pieces/fantasy/wQ.svg); } html[data-pieces="fantasy"] .cg-wrap piece.king.white { background-image: url(/pieces/fantasy/wK.svg); } html[data-pieces="fantasy"] .cg-wrap piece.pawn.black { background-image: url(/pieces/fantasy/bP.svg); } html[data-pieces="fantasy"] .cg-wrap piece.knight.black { background-image: url(/pieces/fantasy/bN.svg); } html[data-pieces="fantasy"] .cg-wrap piece.bishop.black { background-image: url(/pieces/fantasy/bB.svg); } html[data-pieces="fantasy"] .cg-wrap piece.rook.black { background-image: url(/pieces/fantasy/bR.svg); } html[data-pieces="fantasy"] .cg-wrap piece.queen.black { background-image: url(/pieces/fantasy/bQ.svg); } html[data-pieces="fantasy"] .cg-wrap piece.king.black { background-image: url(/pieces/fantasy/bK.svg); } html[data-pieces="spatial"] .cg-wrap piece.pawn.white { background-image: url(/pieces/spatial/wP.svg); } html[data-pieces="spatial"] .cg-wrap piece.knight.white { background-image: url(/pieces/spatial/wN.svg); } html[data-pieces="spatial"] .cg-wrap piece.bishop.white { background-image: url(/pieces/spatial/wB.svg); } html[data-pieces="spatial"] .cg-wrap piece.rook.white { background-image: url(/pieces/spatial/wR.svg); } html[data-pieces="spatial"] .cg-wrap piece.queen.white { background-image: url(/pieces/spatial/wQ.svg); } html[data-pieces="spatial"] .cg-wrap piece.king.white { background-image: url(/pieces/spatial/wK.svg); } html[data-pieces="spatial"] .cg-wrap piece.pawn.black { background-image: url(/pieces/spatial/bP.svg); } html[data-pieces="spatial"] .cg-wrap piece.knight.black { background-image: url(/pieces/spatial/bN.svg); } html[data-pieces="spatial"] .cg-wrap piece.bishop.black { background-image: url(/pieces/spatial/bB.svg); } html[data-pieces="spatial"] .cg-wrap piece.rook.black { background-image: url(/pieces/spatial/bR.svg); } html[data-pieces="spatial"] .cg-wrap piece.queen.black { background-image: url(/pieces/spatial/bQ.svg); } html[data-pieces="spatial"] .cg-wrap piece.king.black { background-image: url(/pieces/spatial/bK.svg); } html[data-pieces="celtic"] .cg-wrap piece.pawn.white { background-image: url(/pieces/celtic/wP.svg); } html[data-pieces="celtic"] .cg-wrap piece.knight.white { background-image: url(/pieces/celtic/wN.svg); } html[data-pieces="celtic"] .cg-wrap piece.bishop.white { background-image: url(/pieces/celtic/wB.svg); } html[data-pieces="celtic"] .cg-wrap piece.rook.white { background-image: url(/pieces/celtic/wR.svg); } html[data-pieces="celtic"] .cg-wrap piece.queen.white { background-image: url(/pieces/celtic/wQ.svg); } html[data-pieces="celtic"] .cg-wrap piece.king.white { background-image: url(/pieces/celtic/wK.svg); } html[data-pieces="celtic"] .cg-wrap piece.pawn.black { background-image: url(/pieces/celtic/bP.svg); } html[data-pieces="celtic"] .cg-wrap piece.knight.black { background-image: url(/pieces/celtic/bN.svg); } html[data-pieces="celtic"] .cg-wrap piece.bishop.black { background-image: url(/pieces/celtic/bB.svg); } html[data-pieces="celtic"] .cg-wrap piece.rook.black { background-image: url(/pieces/celtic/bR.svg); } html[data-pieces="celtic"] .cg-wrap piece.queen.black { background-image: url(/pieces/celtic/bQ.svg); } html[data-pieces="celtic"] .cg-wrap piece.king.black { background-image: url(/pieces/celtic/bK.svg); } .piece-sample { display: flex; gap: 2px; width: 100%; aspect-ratio: 2; border-radius: 4px; margin-bottom: 4px; padding: 2px; background: var(--sq-light); } .board-pick .piece-sample i { flex: 1; width: auto; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; background: center / contain no-repeat; } .piece-sample[data-set="merida"] .wN { background-image: url(/pieces/merida/wN.svg); } .piece-sample[data-set="merida"] .bQ { background-image: url(/pieces/merida/bQ.svg); } .piece-sample[data-set="chessnut"] .wN { background-image: url(/pieces/chessnut/wN.svg); } .piece-sample[data-set="chessnut"] .bQ { background-image: url(/pieces/chessnut/bQ.svg); } .piece-sample[data-set="fantasy"] .wN { background-image: url(/pieces/fantasy/wN.svg); } .piece-sample[data-set="fantasy"] .bQ { background-image: url(/pieces/fantasy/bQ.svg); } .piece-sample[data-set="spatial"] .wN { background-image: url(/pieces/spatial/wN.svg); } .piece-sample[data-set="spatial"] .bQ { background-image: url(/pieces/spatial/bQ.svg); } .piece-sample[data-set="celtic"] .wN { background-image: url(/pieces/celtic/wN.svg); } .piece-sample[data-set="celtic"] .bQ { background-image: url(/pieces/celtic/bQ.svg); } html[data-pieces="wood3d"] .cg-wrap piece.pawn.white { background-image: url(/pieces/wood3d/wP.webp); } html[data-pieces="wood3d"] .cg-wrap piece.knight.white { background-image: url(/pieces/wood3d/wN.webp); } html[data-pieces="wood3d"] .cg-wrap piece.bishop.white { background-image: url(/pieces/wood3d/wB.webp); } html[data-pieces="wood3d"] .cg-wrap piece.rook.white { background-image: url(/pieces/wood3d/wR.webp); } html[data-pieces="wood3d"] .cg-wrap piece.queen.white { background-image: url(/pieces/wood3d/wQ.webp); } html[data-pieces="wood3d"] .cg-wrap piece.king.white { background-image: url(/pieces/wood3d/wK.webp); } html[data-pieces="wood3d"] .cg-wrap piece.pawn.black { background-image: url(/pieces/wood3d/bP.webp); } html[data-pieces="wood3d"] .cg-wrap piece.knight.black { background-image: url(/pieces/wood3d/bN.webp); } html[data-pieces="wood3d"] .cg-wrap piece.bishop.black { background-image: url(/pieces/wood3d/bB.webp); } html[data-pieces="wood3d"] .cg-wrap piece.rook.black { background-image: url(/pieces/wood3d/bR.webp); } html[data-pieces="wood3d"] .cg-wrap piece.queen.black { background-image: url(/pieces/wood3d/bQ.webp); } html[data-pieces="wood3d"] .cg-wrap piece.king.black { background-image: url(/pieces/wood3d/bK.webp); } html[data-pieces="club3d"] .cg-wrap piece.pawn.white { background-image: url(/pieces/club3d/wP.webp); } html[data-pieces="club3d"] .cg-wrap piece.knight.white { background-image: url(/pieces/club3d/wN.webp); } html[data-pieces="club3d"] .cg-wrap piece.bishop.white { background-image: url(/pieces/club3d/wB.webp); } html[data-pieces="club3d"] .cg-wrap piece.rook.white { background-image: url(/pieces/club3d/wR.webp); } html[data-pieces="club3d"] .cg-wrap piece.queen.white { background-image: url(/pieces/club3d/wQ.webp); } html[data-pieces="club3d"] .cg-wrap piece.king.white { background-image: url(/pieces/club3d/wK.webp); } html[data-pieces="club3d"] .cg-wrap piece.pawn.black { background-image: url(/pieces/club3d/bP.webp); } html[data-pieces="club3d"] .cg-wrap piece.knight.black { background-image: url(/pieces/club3d/bN.webp); } html[data-pieces="club3d"] .cg-wrap piece.bishop.black { background-image: url(/pieces/club3d/bB.webp); } html[data-pieces="club3d"] .cg-wrap piece.rook.black { background-image: url(/pieces/club3d/bR.webp); } html[data-pieces="club3d"] .cg-wrap piece.queen.black { background-image: url(/pieces/club3d/bQ.webp); } html[data-pieces="club3d"] .cg-wrap piece.king.black { background-image: url(/pieces/club3d/bK.webp); } /* 3D sets (a picture of a real piece seen from the front): each piece stands a little taller than its square, base near the square's bottom edge. Boards then stack pieces front to back (addPieceZIndex, z-index 3 to 67), so arrows and the dragged piece are lifted above them. */ html[data-p3d] .cg-wrap { isolation: isolate; } /* keeps those z-indexes inside the board, under dialogs and messages */ /* Size and angle (settings size3d, angle3d; variables set by applyBoard): --p3d-size scales the pieces, --p3d-tilt is the board's height for its width (sin of the angle), --p3d-poke the room the back row needs above the board, and --p3d-frame the two together. A picture is 360×460 px; its piece's base is at 91% of its height. */ html[data-p3d] .cg-wrap piece { --s: var(--p3d-size, 1); --t: var(--p3d-tilt, 1); width: calc(11.5% * var(--s)); height: calc(14.7% * var(--s) / var(--t)); left: calc(6.25% - 5.21% * var(--s)); top: calc(11.6% - 13.36% * var(--s) / var(--t)); background-size: 100% 100%; } html[data-p3d] .board-frame { aspect-ratio: 1 / var(--p3d-frame, 1); width: min(100%, calc((100vh - 120px) / var(--p3d-frame, 1))); } html[data-p3d] .board-frame:not(.flash-bad, .flash-good, .flash-alt) { box-shadow: none; } html[data-p3d] .board-frame cg-board { box-shadow: var(--shadow); } html[data-p3d] .board-col { overflow-x: clip; } /* big pieces on the edge files must not widen the page (a phone board runs to the edges) */ html[data-p3d] .board-frame .board { height: auto; aspect-ratio: 1 / var(--p3d-tilt, 1); margin-top: calc(var(--p3d-poke, 0) * 100%); } html[data-p3d] .board-wrap { width: min(100%, calc((100vh - 98px) / var(--p3d-frame, 1))); } html[data-p3d] .board-wrap .board-frame { width: auto; } html[data-p3d] .board-frame.view3d-preview { width: min(100%, 420px); } @media (max-width: 920px) { html[data-p3d] .board-frame { width: min(100%, calc(560px / var(--p3d-frame, 1)), calc((100dvh - 110px) / var(--p3d-frame, 1))); } } @media (max-width: 480px) { html[data-p3d] .train .board-frame { width: 100%; } } .view3d { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; background: var(--surface); } .view3d summary { cursor: pointer; font-weight: 600; } .view3d-body { display: grid; gap: 10px; padding-top: 10px; } .view3d label { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: .9rem; } .view3d input[type=range] { width: 100%; accent-color: var(--accent); } .view3d output { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); } .view3d-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .view3d-row > .view3d { flex: 1 1 260px; min-width: 0; } html[data-p3d] .cg-wrap .cg-shapes, html[data-p3d] .cg-wrap cg-auto-pieces { z-index: 70; } html[data-p3d] .cg-wrap .cg-custom-svgs { z-index: 71; } html[data-p3d] cg-board piece.dragging { z-index: 100 !important; } .piece-sample[data-set="wood3d"] .wN { background-image: url(/pieces/wood3d/wN.webp); } .piece-sample[data-set="wood3d"] .bQ { background-image: url(/pieces/wood3d/bQ.webp); } .piece-sample[data-set="club3d"] .wN { background-image: url(/pieces/club3d/wN.webp); } .piece-sample[data-set="club3d"] .bQ { background-image: url(/pieces/club3d/bQ.webp); } /* The classic set is the one embedded above (chessground's cburnett pieces). */ .piece-sample[data-set="classic"] .wN { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg=='); } .piece-sample[data-set="classic"] .bQ { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIHN0cm9rZT0ibm9uZSI+PGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMjIuNSIgY3k9IjgiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjkiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjEyIiByPSIyLjc1Ii8+PC9nPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi41LTEyLjVMMzEgMjVsLS4zLTE0LjEtNS4yIDEzLjYtMy0xNC41LTMgMTQuNS01LjItMTMuNkwxNCAyNSA2LjUgMTMuNSA5IDI2eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNOSAyNmMwIDIgMS41IDIgMi41IDQgMSAxLjUgMSAxIC41IDMuNS0xLjUgMS0xLjUgMi41LTEuNSAyLjUtMS41IDEuNS41IDIuNS41IDIuNSA2LjUgMSAxNi41IDEgMjMgMCAwIDAgMS41LTEgMC0yLjUgMCAwIC41LTEuNS0xLTIuNS0uNS0yLjUtLjUtMiAuNS0zLjUgMS0yIDIuNS0yIDIuNS00LTguNS0xLjUtMTguNS0xLjUtMjcgMHoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTExIDM4LjVhMzUgMzUgMSAwIDAgMjMgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMTEgMjlhMzUgMzUgMSAwIDEgMjMgMG0tMjEuNSAyLjVoMjBtLTIxIDNhMzUgMzUgMSAwIDAgMjIgMG0tMjMgM2EzNSAzNSAxIDAgMCAyNCAwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiLz48L2c+PC9zdmc+'); } .piece-pick:disabled .piece-sample { filter: grayscale(.8); } /* ── Survival hearts, the weekly boss, beat last week ── */ .hearts { flex: none; font-size: 1rem; letter-spacing: 2px; color: var(--bad); } .hearts.pop { animation: combo-pop .35s ease-out; } .speed-stats b.hearts { font-size: 1.4rem; } .boss-mode .mode-count { color: var(--bad); } .boss-mode.beaten .mode-count { color: var(--good); } .beat-week { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .beat-week span { font-size: .88rem; color: var(--muted); } .beat-week.won { border-color: var(--good); background: var(--good-soft); } .beat-week.won b { color: var(--good); } /* ── Trophies and opening cards ── */ .trophy-mark { margin-left: 6px; font-size: 1rem; } .shelf-rep { display: flex; flex-direction: column; gap: 6px; } .shelf { display: flex; flex-wrap: wrap; gap: 6px; } .trophy { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; } .trophy.t3 { border-color: var(--warn); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; } .ocard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r); border: 1px dashed var(--line); background: var(--surface-2); min-height: 60px; justify-content: center; } .ocard b { font-size: .9rem; } .cards-locked { display: flex; flex-wrap: wrap; gap: 4px; } .cards-locked i { width: 28px; height: 36px; display: grid; place-items: center; border-radius: 4px; border: 1px dashed var(--line); background: var(--surface-2); color: var(--muted); font-style: normal; font-weight: 700; font-size: .85rem; } .ocard.on { border-style: solid; background: var(--surface); } .ocard span { font-size: .8rem; color: var(--muted); line-height: 1.4; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Prepare: player files, and a player's tree against your repertoires */ .prep { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; } .prep h3 { font-size: 1rem; margin-top: 4px; } .small { font-size: .8rem; } .narrow-only { display: none; } .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; } .prep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; } .prep-card { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; font-size: .85rem; } .prep-card:hover { border-color: var(--accent); } .prep-card-name { font-size: 1rem; } /* Members (the owner's box on the home page) */ .member { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); } .member-who { min-width: 0; overflow-wrap: anywhere; } .member .btn-row { gap: 6px; } .member-link { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; } .member-link .input { font-size: .8rem; } .prep-result, .prep-line, .prep-acct { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .prep-result > div, .prep-line > div:first-child, .prep-acct > div:first-child { min-width: 0; } .prep-line .btn-row, .prep-acct .btn-row, .prep-result .btn { flex: none; } .prep-line.gap b { color: var(--warn); } .prep-acct ul { margin: 4px 0 0; padding-left: 18px; } .prep-acct.suggested { background: var(--surface-2); border-radius: 6px; padding: 10px; border-top: 0; } .prep-filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; } .prep-checks { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .88rem; } .prep-checks select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); } .chk { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; } .prep-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 24px; align-items: start; } .prep-board { display: flex; flex-direction: column; gap: 8px; width: min(100%, 640px, calc(100vh - 200px)); } .prep-board .board-frame { width: 100%; } .prep-nav { display: flex; gap: 6px; } .prep-nav .prep-analyse { margin-left: auto; } /* Phones: the four arrows and ⇅ on one row, the analysis board button under them (they don't fit in one at 390 px). */ @media (max-width: 480px) { .prep-nav { flex-wrap: wrap; } .prep-nav .prep-analyse { flex: 1 0 100%; margin-left: 0; } } .prep-board .board-wrap { width: 100%; } /* Stockfish under the Prepare board, and its column in the tree */ .prep-engine { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .pe-eval { font-family: var(--f-display); font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1; min-width: 4ch; } .pm-ev { margin-left: 6px; white-space: nowrap; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); } .pm-ev:empty { display: none; } .pm-time { margin-left: 6px; white-space: nowrap; font-size: .78rem; color: var(--fg); opacity: .75; font-variant-numeric: tabular-nums; } .mv-time { margin-left: 3px; font-size: .7em; color: var(--muted); font-variant-numeric: tabular-nums; } .pm-ev .flag { margin-left: 2px; } .prep-path { font-size: .85rem; line-height: 1.7; } table.prep-tree td, table.prep-tree th { padding: 6px 6px; } table.prep-tree tbody tr { cursor: pointer; } table.prep-tree tbody tr:hover { background: var(--accent-soft); } .pm-move { white-space: nowrap; } .pm-san, .pm-n { background: none; border: 0; padding: 0 2px; font: inherit; color: inherit; cursor: pointer; } .pm-san { font-family: var(--f-mono); font-weight: 600; } .pm-n { text-decoration: underline dotted; min-width: 2ch; text-align: right; } .pm-bar { display: inline-block; width: 44px; height: 6px; margin: 0 6px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; overflow: hidden; } .pm-bar i { display: block; height: 100%; background: var(--accent); } .pm-mark { margin-left: 4px; font-size: .85rem; } .pm-mark.ok { color: var(--good); } .pm-mark.gap { color: var(--warn); } .pm-mark.mine { color: var(--accent); } .trend.up { color: var(--good); } .trend.down { color: var(--muted); } .prep-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .prep-panels .panel-box { gap: 10px; } .prep-lines { display: flex; flex-direction: column; } .prep-game-list { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; } .prep-game { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem; } .prep-game.excluded { opacity: .55; } .pg-main { display: flex; flex-direction: column; min-width: 0; } .pg-main > span { overflow: hidden; text-overflow: ellipsis; } .pg-res { font-family: var(--f-mono); font-weight: 600; text-align: center; border-radius: 4px; padding: 2px 0; background: var(--surface-2); } .pg-res.won { background: var(--good-soft); color: var(--good); } .pg-res.lost { background: var(--bad-soft); color: var(--bad); } .prep-job { background: var(--accent-soft); } @media (max-width: 920px) { .topbar .brand-name { display: none; } .prep-main, .prep-panels { grid-template-columns: minmax(0, 1fr); } .prep-board { width: min(100%, 560px); margin: 0 auto; } } @media (max-width: 480px) { .narrow-only { display: inline; } /* after the rule above that hides it on wider screens */ table.prep-tree .opt { display: none; } .prep-result, .prep-line, .prep-acct { flex-wrap: wrap; } } .prep a { color: var(--accent); } .pm-open { display: block; font-size: .72rem; color: var(--muted); white-space: normal; line-height: 1.2; max-width: 22ch; } tr.eco-var td:first-child { padding-left: 26px; color: var(--muted); font-size: .82rem; } .prep-orders { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); font-family: var(--f-mono); } .prep-orders > span:first-child { font-family: var(--f-body); } .prep-home { border-color: var(--accent); } .prep-home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; } .prep-home-list { display: flex; flex-direction: column; gap: 8px; } .pc-id { font-size: .85rem; } .login-tag { margin: -12px 0 0; font-size: .95rem; } .src-status summary { cursor: pointer; color: var(--muted); } .src-status ul { margin: 6px 0 0; padding-left: 18px; } .src-status .src-down { color: var(--warn); } /* The opening explorer on the analysis board */ .explorer { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; } .x-tabs { display: flex; gap: 2px; flex-wrap: wrap; } .x-tab { font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; } .x-tab.on { background: var(--accent-soft); color: var(--fg); border-color: var(--accent); } .x-table td, .x-table th { padding: 4px 6px; } .x-table tbody tr { cursor: pointer; } .x-table tbody tr:hover { background: var(--accent-soft); } .x-table .num { text-align: right; } .x-bar-cell { width: 45%; } .x-bar { display: flex; height: 16px; border-radius: 3px; overflow: hidden; font-size: .66rem; line-height: 16px; font-variant-numeric: tabular-nums; background: var(--surface-2); } .x-bar i { font-style: normal; text-align: center; overflow: hidden; } .x-bar .w { background: #F2F4F1; color: #2F3532; } .x-bar .d { background: #9AA39E; color: #17201C; } .x-bar .b { background: #2F3532; color: #F2F4F1; } .x-bar .s { background: var(--accent); color: var(--accent-fg); } /* The game plan */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; } .plan-card { gap: 8px; } .plan-card h2 { font-size: 1.1rem; } .plan-line { margin: 0; font-family: var(--f-mono); font-size: .95rem; line-height: 1.6; } .plan-item { padding: 6px 0; border-top: 1px solid var(--line); } .plan-item:first-of-type { border-top: 0; } .plan-form { display: flex; gap: 4px; margin: 0; } .plan-form .pg-res { width: 26px; } .plan-date { display: flex; align-items: center; gap: 12px; } .plan-count { font-family: var(--f-display); font-size: 1.3rem; color: var(--accent); } .tag-game { align-self: flex-start; color: var(--accent); background: var(--accent-soft); } @media print { .topbar, .no-print, .seg, .toast { display: none !important; } body { background: #fff; color: #000; padding: 0; } .panel-box { box-shadow: none; break-inside: avoid; } .plan-grid { grid-template-columns: 1fr 1fr; } } .plan-date .goal-pick { white-space: nowrap; } /* ── Modern bright: refinements over the components above ── */ body { -webkit-font-smoothing: antialiased; } h2, h3 { font-weight: 700; } /* Cards: one soft elevation everywhere. */ .panel-box, .rep-card, .mode, .chapter, .tpanel, .tile, .today, .week, .quests, .beat-week, .prep-card, .plan-card, .train-now.done, .lichess-bar { box-shadow: var(--shadow-sm); } .rep-card, .prep-card, .mode { transition: transform .15s, box-shadow .15s, border-color .15s; } .rep-card:hover, .prep-card:hover, .mode:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); } .panel-box { padding: 20px; } /* Buttons: rounder, with a gradient for the main action. */ .btn { border-radius: 10px; padding: 9px 16px; font-weight: 600; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); } .btn.primary:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent); } .btn.mini { border-radius: 8px; padding: 3px 10px; } /* The main tabs: a pill. */ .main-nav { border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm); } .nav-tab { border-radius: 999px; padding: 8px 24px; } .nav-tab.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); } .brand-mark { border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); width: 34px; height: 34px; } .brand { font-weight: 800; letter-spacing: -0.02em; } /* Train now: the day's one big button. */ .train-now:not(.done) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 18px; padding: 18px 22px; } .train-now b { font-weight: 800; } /* Fields. */ .input, textarea.input, .settings-grid select, .prep-checks select { border-radius: 10px; background: var(--surface); border-color: var(--line); } .input:focus, textarea.input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Small labels: pills. */ .tag { border-radius: 999px; padding: 2px 8px; } .mode-chip { border-radius: 999px; padding: 3px 10px; } .flag { border-radius: 999px; } /* Progress bars: thicker, rounded, with the gradient. */ .bar { height: 8px; border-radius: 999px; border: 0; } .bar > span { border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } /* Boards: rounder frames with depth. */ .board-frame, .board-frame cg-board { border-radius: 12px; } .board-frame { box-shadow: var(--shadow); } /* Segmented controls and explorer tabs. */ .seg { border-radius: 12px; } .seg .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); } .x-tab.on { border-radius: 999px; } .x-tab { border-radius: 999px; } /* Tables: lighter rules, a gentle header. */ table.data th { text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; } table.data td, table.data th { border-bottom-color: var(--line); } /* Toasts: rounded and lifted. */ .toast { border-radius: 12px; box-shadow: var(--shadow); } .prep-path > .muted { font-family: var(--f-body); } /* Touch screens: small controls get room for a finger (about 40px), without changing the desktop look. */ @media (pointer: coarse) { .btn.mini { min-height: 36px; padding: 6px 12px; font-size: .8rem; } .prep-nav .btn { min-height: 44px; min-width: 48px; } .moves button.mv, .pvmove { padding: 4px 6px; } .pm-san, .pm-n { padding: 8px 6px; } .x-tab { padding: 8px 12px; } .linkish { padding: 6px 0; } } /* Offline: the app runs on this device's copy (public/sw.js). */ .offline-tag { display: none; align-self: center; } html[data-offline] .offline-tag { display: inline-block; } html[data-offline] .needs-net { display: none !important; } .plan-saved { margin: 0; } .plan-copy { display: inline-block; margin: 6px 0 0; } /* Your repertoire against them: one list at a time. */ .seg.mine-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 2px; } .mine-tabs .btn { font-size: .85rem; white-space: normal; line-height: 1.25; padding-left: 6px; padding-right: 6px; }