/* Colours are Spectre's explorer tokens (web/src/styles/widgets.css) ported whole; the accents take the light-scheme values that explorer's stats page defines (stats.css), so nothing turns pale on white. Light is the default and `data-theme="dark"` on flips it — see theme.ts, which also reads the board knobs at the end of each block back out for the canvas. */ :root { --bg: #f7f8fa; --panel: #ffffff; --panel-2: #eef1f6; --text: #171a1f; --muted: #5b6472; --line: #d5dae2; --accent: #2f6ed4; --accent-ink: #ffffff; --good: #1c8b50; --bad: #c53a60; --warn: #a96c07; color-scheme: light; /* The board: tile outlines, the halo on your own line, how far the tile palette is sat back (1 = Spectre's colours as they are) and how far a claimed tile's tint moves off its owner's colour. */ --board-line-alpha: 0.14; --board-halo-alpha: 0.45; --board-arrow-alpha: 0.22; --tile-dim: 1; --tile-lift: -30; --tile-lift-closed: -55; --strand-darken: 0.28; /* Team colours (settings: "You blue, everyone else red", key T): the one hue for all of yours and the one for every rival. Deepened on the light board by --strand-darken like any player colour, so keep them hsl(). */ --team-me: hsl(214, 92%, 60%); --team-rival: hsl(2, 88%, 60%); /* The edge-class colours are pastel, so an unselected chip needs more of itself on white than it does on the dark panel. */ --chip-off: 0.8; } :root[data-theme='dark'] { --bg: #14161a; --panel: #1e2127; --panel-2: #262a32; --text: #e7e9ee; --muted: #9aa2b1; --line: #363b45; --accent: #6ea8fe; --accent-ink: #081525; --good: #7ddb8f; --bad: #f58aa2; --warn: #ffcc55; color-scheme: dark; --board-line-alpha: 0.1; --board-halo-alpha: 0.55; --board-arrow-alpha: 0.26; --tile-dim: 0.52; --tile-lift: 70; --tile-lift-closed: 30; --strand-darken: 0; --chip-off: 0.55; } * { box-sizing: border-box; } html, body, #root { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overscroll-behavior: none; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } .muted { color: var(--muted); } h1 { margin: 0 0 4px; font-size: 32px; letter-spacing: 0.02em; } h2 { margin: 0 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font: inherit; cursor: pointer; } .btn:hover { border-color: var(--accent); } .btn:disabled { opacity: 0.45; cursor: default; } .btn-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; } .btn-big { padding: 12px 22px; font-size: 17px; } .input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 18px; width: min(100%, 320px); } .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); } .tag-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .tag-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); } /* Theme toggle: a quiet button, wherever the screen has room for one. */ .settings-btn { display: inline-flex; align-items: center; gap: 6px; } .modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 35%, transparent); } .modal { width: min(100%, 320px); display: grid; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .modal-head { display: flex; align-items: center; justify-content: space-between; } .modal-close { padding: 2px 9px; } .setting { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: 14px; } .setting select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); } .setting-check { grid-template-columns: auto 1fr; } /* Lobby */ .lobby { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 18px; } .lobby-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .lobby-head > div { flex: 1 1 320px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; } .lobby-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Rule editor */ .rule-editor { display: grid; gap: 14px; } .rule-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rule-label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--chip); background: transparent; color: var(--chip); font: inherit; font-weight: 700; cursor: pointer; opacity: var(--chip-off); } /* The edge-class colours are pastel in both schemes, so a filled chip always takes dark ink. */ .chip.is-on { background: var(--chip); color: #171a1f; opacity: 1; } .rule-buttons { display: flex; gap: 6px; margin-left: auto; } .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } /* The rule picker's tiles fill their card: big enough to read the numbers. */ .thumbs .thumb { width: 100%; height: auto; aspect-ratio: 1; } .thumb-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; justify-items: center; gap: 2px; } .thumb-card.is-odd { border-color: color-mix(in srgb, var(--bad) 45%, transparent); } .thumb { display: block; } .thumb.is-clickable { cursor: pointer; } .thumb.is-clickable:hover .thumb-outline { stroke: var(--accent); } .thumb-outline { stroke: color-mix(in srgb, var(--text) 26%, transparent); stroke-width: 0.06; } /* Unpaired dots are hollow: they wear the card under them, not a colour. */ .thumb-dot circle.is-hollow { fill: var(--panel-2); } /* The stubs on an odd tile — the line that ends there. */ .thumb-stub { stroke: var(--bad); } /* Which way the tile is turned; the board draws the same dart. */ .thumb-arrow { fill: var(--text); opacity: 0.2; } .thumb-caption { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); } .rule-readout { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Arena */ .arena { position: fixed; inset: 0; overflow: hidden; } /* Outlined arrow cursors only: a thin crosshair/cell vanishes over the saturated tiles. */ .arena-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: default; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .arena-canvas[data-mode='pan'] { cursor: grabbing; } .arena-canvas[data-mode='paint'] { cursor: copy; } .arena-tiles { pointer-events: none; } .hud { position: absolute; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(6px); pointer-events: auto; max-width: min(92vw, 360px); } .hud-me { left: 12px; top: 12px; border-left: 4px solid var(--me); position: relative; } .hud-corner { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; } .hud-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; } .hud-icon:hover { background: var(--panel-2); color: var(--text); } .hud-name { padding-right: 48px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .hud-name .swatch { background: var(--me); } .hud-score-row { display: flex; align-items: baseline; gap: 8px; } .hud-score { font-size: 34px; font-weight: 700; line-height: 1.1; } .hud-heads { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .hud-line { font-size: 13px; color: var(--muted); } .hud-status { color: var(--text); } .hud-rule { margin-top: 4px; } .hud-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .hud-board { right: 12px; top: 12px; min-width: 190px; } .hud-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; } .hud-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .hud-board li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .hud-board li.is-me { font-weight: 700; } .board-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-score { font-variant-numeric: tabular-nums; } .board-rank { width: 1.4em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; } .board-gap { justify-content: center; color: var(--muted); line-height: 0.8; } .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .hud-help { left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(92vw, 520px); display: grid; gap: 8px; } /* Patterns: sticky tabs on the left wall, numbered 1 at the top (the keys); the active one sticks out further. */ .pattern-tabs { position: absolute; left: 0; bottom: 24px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; } .pattern-tab { width: 22px; height: 30px; padding: 0 5px 0 0; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; font: 700 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 2px #000, 0 0 3px #000; border: 1px solid var(--line); border-left: 0; border-radius: 0 5px 5px 0; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 18%, transparent); transition: width 0.15s ease-out; } .pattern-tab:hover { width: 28px; } .pattern-tab.is-active { width: 44px; border-color: var(--text); } .pattern-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .toasts { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: grid; justify-items: center; gap: 3px; pointer-events: none; } .toast { background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; line-height: 1.4; animation: toast-in 0.2s ease-out; } .toast.is-good { border-color: var(--good); } .toast.is-bad { border-color: var(--bad); } @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 72%, transparent); font-size: 20px; text-align: center; } .overlay-fallback { margin-top: 8px; font-size: 14px; color: var(--muted); } .btn-link { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; } .btn-link:hover { opacity: 0.85; } @media (max-width: 640px) { .thumbs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } /* Still top right on a phone, just compact, and the player card makes room. */ .hud-me { max-width: calc(100vw - 172px); padding: 8px 10px; } .hud-board { right: 8px; top: 8px; min-width: 0; width: 148px; padding: 8px 10px; } .hud-board li { font-size: 12px; gap: 5px; } .hud-board li:nth-child(n + 6):not(.is-me):not(.board-gap) { display: none; } .hud-score { font-size: 26px; } .rule-buttons { margin-left: 0; } } /* Mode / solo options */ .mode-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .lobby-room { margin: 0 0 12px; font-size: 14px; } .lobby-intro { margin-bottom: 12px; font-size: 14px; line-height: 1.5; } .lobby-intro p { margin: 0 0 8px; } .lobby-sig { font-style: italic; color: var(--muted); } .lobby-notice { margin: 0 0 10px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: 6px; font-size: 14px; } .btn.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } .solo-row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; } .solo-row label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .solo-row select, .solo-row input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 15px; } .solo-row input[type='number'] { width: 80px; } .solo-row a { color: var(--accent); } /* Interactive thumbs + patch preview */ .thumb.is-drawable { cursor: crosshair; touch-action: none; } .thumb-edge { cursor: pointer; } .thumb-edge:hover line:first-child { stroke-opacity: 1; stroke-width: 0.14; } .thumb-edge text { cursor: pointer; user-select: none; } .thumb-dot { cursor: grab; } .thumb-card.is-draft { border-color: var(--accent); } .tag-btn { cursor: pointer; font: inherit; font-size: 12px; } .tag-btn:hover { border-color: var(--accent); color: var(--text); } .check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); } .rule-hint { margin: 0; font-size: 13px; } .patch-preview { display: grid; gap: 6px; } .patch-svg { width: 100%; height: auto; justify-self: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .patch-tiles path { stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: 0.05; } .patch-stats { font-size: 13px; } .patch-svg { pointer-events: none; } .patch-arrow { fill: var(--text); opacity: 0.2; } .patch-head { display: flex; justify-content: flex-end; font-size: 13px; } .patch-head label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }