/* ---- Theme tokens ---- * Dark is the default; `data-theme="light"` on flips the palette. * Every color below is referenced through a var so a theme swap is one place. */ :root, :root[data-theme="dark"] { --bg: #333; --fg: #aaa; --panel-bg: #232323; --panel-border: #3a3a3a; --panel-divider: #333; --control-bg: #1a1a1a; --control-border: #454545; --control-fg: #b6b6b6; --control-hover-bg: #2c2c2c; --control-hover-fg: #e6e6e6; --text-strong: #eaeaea; --text-secondary: #ccc; --text-muted: #888; --text-faint: #6f6f6f; --accent: #39d0ff; --accent-ink: #06485e; --accent-soft-bg: #15323d; --accent-soft-fg: #cdeefb; --toggle-dot: #555; --seg-active-bg: #e7e7e7; --seg-active-fg: #1a1a1a; --dialog-bg: #262626; --dialog-border: #444; --dialog-fg: #d8d8d8; --dialog-title: #eee; --dialog-message: #b0b0b0; --backdrop: rgba(0, 0, 0, 0.55); --dialog-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); --error: #e57373; --score-result: #fff; --dot-black-bg: #111; --dot-black-border: #000; --dot-white-bg: #fafafa; --dot-white-border: #888; --dot-border: #555; --board-wood: #dcb35c; --board-line: #1a1208; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root[data-theme="light"] { --bg: #eceae5; --fg: #4d4a44; --panel-bg: #fdfcfa; --panel-border: #dcd7cd; --panel-divider: #e4dfd6; --control-bg: #f4f2ed; --control-border: #cdc7bb; --control-fg: #55524b; --control-hover-bg: #e6e2d9; --control-hover-fg: #23211d; --text-strong: #23211d; --text-secondary: #4d4a44; --text-muted: #77726a; --text-faint: #8d877d; --accent: #0b87b8; --accent-ink: #05455e; --accent-soft-bg: #dff3fb; --accent-soft-fg: #0a4d68; --toggle-dot: #b9b3a8; --seg-active-bg: #3a372f; --seg-active-fg: #fbfaf7; --dialog-bg: #fdfcfa; --dialog-border: #d7d2c8; --dialog-fg: #3c3a35; --dialog-title: #23211d; --dialog-message: #6b6760; --backdrop: rgba(40, 36, 28, 0.35); --dialog-shadow: 0 14px 40px rgba(60, 54, 40, 0.22); --error: #c0392b; --score-result: #23211d; --dot-black-bg: #111; --dot-black-border: #000; --dot-white-bg: #fff; --dot-white-border: #a09a8e; --dot-border: #b5afa3; --board-wood: #e8c377; --board-line: #4a3413; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } html, body { margin: 0; background-color: var(--bg); color: var(--fg); min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color-scheme: dark; } :root[data-theme="light"], :root[data-theme="light"] body { color-scheme: light; } .Sandbox { min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; padding: 0.75rem; box-sizing: border-box; } /* ---- Game shell (stable layout) ---- */ .Game { width: 100%; max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; } /* ---- App header ---- */ .AppHeader { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.4rem 0.75rem; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; box-sizing: border-box; flex-wrap: wrap; } .AppHeader__brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-strong); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; flex: 0 0 auto; } .AppHeader__brand .BrandIcon { display: block; flex: 0 0 auto; } .AppHeader__status { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; flex: 1 1 auto; min-width: 0; margin: 0 auto; color: var(--control-fg); font-size: 0.82rem; } .AppHeader__stat { display: inline-flex; align-items: center; white-space: nowrap; } .AppHeader__status .Dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; border: 1px solid var(--dot-border); } .AppHeader__status .Dot.black { background: var(--dot-black-bg); border-color: var(--dot-black-border); } .AppHeader__status .Dot.white { background: var(--dot-white-bg); border-color: var(--dot-white-border); } .AppHeader__status strong { color: var(--text-strong); font-weight: 600; } .AppHeader__actions { display: inline-flex; align-items: center; gap: 0.32rem; flex: 0 0 auto; margin-left: auto; } .SidebarToggle, .ThemeToggle { background: transparent; color: var(--control-fg); border: 1px solid var(--control-border); border-radius: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.12s, color 0.12s; } .SidebarToggle:hover, .ThemeToggle:hover { background: var(--control-hover-bg); color: var(--control-hover-fg); } /* ---- App shell + sidebar ---- */ .AppShell { display: flex; align-items: stretch; gap: 1rem; width: 100%; min-width: 0; } .Sidebar { flex: 0 0 240px; width: 240px; display: flex; flex-direction: column; gap: 0.8rem; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 0.8rem; box-sizing: border-box; transition: flex-basis 0.18s ease, width 0.18s ease, margin 0.18s ease, padding 0.18s ease, opacity 0.18s ease; } .Sidebar--collapsed { flex: 0 0 0; width: 0; margin-left: -1rem; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; } .SidebarSection { display: flex; flex-direction: column; gap: 0.45rem; } .SidebarSection + .SidebarSection { border-top: 1px solid var(--panel-divider); padding-top: 0.75rem; } .SidebarSectionTitle { color: var(--text-faint); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; } .SidebarRow { display: flex; align-items: center; gap: 0.4rem; } .SidebarRow > .Dropdown, .SidebarRow > .Segmented, .SidebarRow > .Toggle { width: 100%; } .SidebarRow > .Segmented { display: flex; } .SidebarRow > .Segmented button { flex: 1; } .SidebarRow > .Dropdown select { flex: 1; width: 100%; } .SidebarRow .KomiInput { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.78rem; width: 100%; } .SidebarRow .KomiInput input { flex: 1; width: 100%; background: var(--control-bg); color: var(--text-secondary); border: 1px solid var(--control-border); border-radius: 6px; padding: 0.3rem 0.45rem; font: inherit; font-size: 0.82rem; } .SidebarCredits { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid #333; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.7rem; color: #6f6f6f; } .SidebarCredits a { color: #888; text-decoration: none; } .SidebarCredits a:hover { color: #dadada; text-decoration: underline; } .MainColumn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1rem; } /* Segmented (mutually-exclusive) control */ .Segmented { display: inline-flex; background: var(--control-bg); border: 1px solid var(--control-border); border-radius: 8px; overflow: hidden; } .Segmented button { background: transparent; color: var(--control-fg); border: none; border-left: 1px solid var(--control-border); padding: 0.34rem 0.56rem; font: inherit; font-size: 0.79rem; line-height: 1.15; cursor: pointer; transition: background 0.12s, color 0.12s; } .Segmented button:first-child { border-left: none; } .Segmented button:hover:not(:disabled):not(.active) { background: var(--control-hover-bg); color: var(--control-hover-fg); } .Segmented button.active { background: var(--seg-active-bg); color: var(--seg-active-fg); font-weight: 600; } .Segmented button:disabled { opacity: 0.3; cursor: default; } /* Labeled dropdown (native select) */ .Dropdown { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--control-bg); border: 1px solid var(--control-border); border-radius: 8px; padding: 0.32rem 0.45rem 0.32rem 0.6rem; cursor: pointer; transition: background 0.12s; } .Dropdown:hover:not(.disabled) { background: var(--control-hover-bg); } .DropdownLabel { color: var(--text-faint); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; } .Dropdown select { appearance: none; -webkit-appearance: none; background: transparent; color: var(--text-secondary); border: none; font: inherit; font-size: 0.8rem; line-height: 1.15; padding: 0 1rem 0 0; cursor: pointer; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 0 center; background-size: 0.62rem; } .Dropdown select:focus { outline: none; } .Dropdown select option { background: var(--panel-bg); color: var(--text-secondary); } .Dropdown.disabled { opacity: 0.35; } .Dropdown.disabled select { cursor: default; } /* Standalone on/off toggle */ .Toggle { display: inline-flex; align-items: center; gap: 0.38rem; background: var(--control-bg); color: var(--control-fg); border: 1px solid var(--control-border); border-radius: 8px; padding: 0.34rem 0.58rem 0.34rem 0.5rem; font: inherit; font-size: 0.79rem; line-height: 1.15; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .Toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--toggle-dot); transition: background 0.12s, box-shadow 0.12s; } .Toggle:hover:not(:disabled):not(.active) { background: var(--control-hover-bg); color: var(--control-hover-fg); } .Toggle.active { background: var(--accent-soft-bg); border-color: var(--accent); color: var(--accent-soft-fg); } .Toggle.active::before { background: var(--accent); box-shadow: 0 0 5px var(--accent); } .Toggle:disabled { opacity: 0.3; cursor: default; } /* Action buttons (Pass / Reset / dialog actions) */ .ToolAction { background: transparent; color: var(--control-fg); border: 1px solid var(--control-border); border-radius: 8px; padding: 0.34rem 0.62rem; font: inherit; font-size: 0.79rem; line-height: 1.15; cursor: pointer; transition: background 0.12s, color 0.12s; } .ToolAction:hover { background: var(--control-hover-bg); color: var(--control-hover-fg); } .ToolAction.Wide { width: 100%; text-align: center; } .Board { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; } /* ---- 2D slices ---- */ .Slices { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; max-width: 100%; } .Slice { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .SliceLabel { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; } .SliceSvg { background: var(--board-wood); border-radius: 6px; display: block; } .SlicePanelArea { width: 600px; max-width: 100%; height: 560px; display: flex; align-items: center; justify-content: center; } .SliceGrid { display: grid; align-content: center; justify-content: center; justify-items: center; align-items: center; } .Slice.current .SliceSvg { box-shadow: 0 0 0 2px var(--accent); } .Slice.current .SliceLabel { color: var(--accent); } /* ---- Lattice view ---- */ .LatticeLayout { display: flex; gap: 1.25rem; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; min-width: 0; } .LatticeMount { width: 640px; max-width: 100%; height: min(600px, 70vh); aspect-ratio: 16 / 15; flex: 1 1 360px; border-radius: 12px; overflow: hidden; touch-action: none; } .SidePanel { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .SidePanelHeader { display: flex; align-items: center; gap: 0.6rem; color: var(--text-secondary); font-size: 0.85rem; } .SidePanelHeader button { background: var(--control-bg); color: var(--control-fg); border: 1px solid var(--control-border); width: 1.9rem; height: 1.9rem; font: inherit; cursor: pointer; border-radius: 5px; line-height: 1; } .SidePanelHeader button:disabled { opacity: 0.4; cursor: default; } /* ---- Status ---- */ .Status { display: flex; gap: 1.5rem; align-items: center; color: var(--text-secondary); font-size: 0.9rem; flex-wrap: wrap; } .Status .Hint { color: var(--text-muted); font-size: 0.8rem; } .Status .Error { color: var(--error); font-style: italic; } .ScorePanel { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: center; background: var(--dialog-bg); border: 1px solid var(--dialog-border); border-radius: 10px; padding: 0.6rem 0.9rem; color: var(--text-secondary); font-size: 0.9rem; } .ScorePanel .ScoreMode { color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; } .ScorePanel .ScoreResult { color: var(--score-result); font-size: 1rem; } /* ---- Confirmation dialog ---- */ .DialogBackdrop { position: fixed; inset: 0; z-index: 100; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; animation: dialog-fade 0.12s ease-out; } .Dialog { background: var(--dialog-bg); border: 1px solid var(--dialog-border); border-radius: 12px; padding: 1.25rem 1.25rem 1rem; width: min(420px, 100%); box-sizing: border-box; box-shadow: var(--dialog-shadow); color: var(--dialog-fg); animation: dialog-pop 0.14s ease-out; } .DialogTitle { margin: 0 0 0.35rem; font-size: 1rem; color: var(--dialog-title); font-weight: 600; } .DialogMessage { margin: 0 0 1rem; color: var(--dialog-message); font-size: 0.85rem; line-height: 1.4; } .DialogActions { display: flex; justify-content: flex-end; gap: 0.5rem; } .DialogConfirm { background: #3a7bd5; color: #fff; border: 1px solid #3a7bd5; border-radius: 8px; padding: 0.4rem 0.95rem; font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.15; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .DialogConfirm:hover { background: #4a8be5; border-color: #4a8be5; } @keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dialog-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Responsive breakpoints ---- */ @media (max-width: 900px) { .Sandbox { padding: 0.5rem; } .AppShell { flex-direction: column; gap: 0.6rem; } .Sidebar { flex: 0 0 auto; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1rem; } .SidebarSection { flex: 1 1 180px; min-width: 160px; } .SidebarSection + .SidebarSection { border-top: none; padding-top: 0; } .Sidebar--collapsed { margin-left: 0; margin-top: -0.6rem; padding-top: 0; padding-bottom: 0; max-height: 0; } .AppHeader__stat--prisoners { display: none; } } @media (max-width: 600px) { .Sandbox { padding: 0.4rem; } .Game { gap: 0.5rem; } .AppHeader { gap: 0.5rem; padding: 0.4rem 0.55rem; } .AppHeader__brand span:not(.Mark) { display: none; } .AppHeader__status { font-size: 0.78rem; gap: 0.45rem 0.7rem; } .AppHeader__stat--move { display: none; } .AppHeader__actions .ToolAction { padding: 0.3rem 0.5rem; font-size: 0.75rem; } .Sidebar { padding: 0.65rem; gap: 0.55rem 0.8rem; } .SidebarSection { flex: 1 1 140px; } .LatticeMount { height: min(70vw, 70vh); aspect-ratio: auto; } .SlicePanelArea { width: 100%; height: auto; min-height: 280px; overflow: auto; } .Slices { gap: 0.6rem; } .ScorePanel { gap: 0.6rem; font-size: 0.82rem; padding: 0.5rem 0.6rem; } }