:root{--font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--color-primary: #72e0b5;--color-primary-strong: #46bc90;--color-primary-soft: rgba(114, 224, 181, .12);--color-background: #090d16;--color-background-elevated: #0d1422;--color-surface: rgba(17, 24, 39, .92);--color-surface-strong: rgba(11, 17, 29, .98);--color-surface-soft: rgba(255, 255, 255, .03);--color-surface-hover: rgba(255, 255, 255, .06);--color-text-primary: #f4f7fb;--color-text-secondary: #b5c0d4;--color-text-caption: #8793aa;--color-border: rgba(154, 170, 197, .18);--color-border-strong: rgba(154, 170, 197, .34);--color-danger: #ff8e7f;--color-warning: #f4c86f;--color-info: #79b9ff;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-small: 10px;--radius-medium: 14px;--radius-large: 18px;--radius-pill: 999px;--shadow-card: 0 16px 32px rgba(0, 0, 0, .28);--shadow-hover: 0 22px 38px rgba(0, 0, 0, .34);--font-size-caption: .78rem;--font-size-body: .96rem;--font-size-heading: 1.25rem;--font-size-display: clamp(2rem, 3vw, 3rem);--line-height-body: 1.6;--line-height-heading: 1.15;--border-width: 1px;--content-max-width: 1360px;--sidebar-width: 288px;--topbar-height: 84px;--color-board-outer: var(--color-primary);--color-board-shortcut: var(--color-warning);--color-board-backdo: rgba(255, 142, 127, .9);--color-bg-app: var(--color-background);--color-bg-surface: var(--color-surface);--color-bg-surface-strong: var(--color-surface-strong);--color-bg-elevated: var(--color-background-elevated);--color-bg-panel-soft: var(--color-surface-soft);--color-text-muted: var(--color-text-caption);--color-border-subtle: var(--color-border);--color-accent: var(--color-primary);--color-accent-strong: var(--color-primary-strong);--shadow-1: var(--shadow-card);--shadow-2: var(--shadow-hover);--shadow-3: 0 28px 52px rgba(0, 0, 0, .42);--radius-1: var(--radius-small);--radius-2: var(--radius-medium);--radius-3: var(--radius-large);--radius-4: 22px;--radius-round: var(--radius-pill);--font-size-label: var(--font-size-caption);--font-size-title: var(--font-size-heading);--font-size-hero: var(--font-size-display)}:root[data-theme=obsidian]{--color-bg-app: #070b14;--color-bg-surface: rgba(17, 24, 40, .88);--color-bg-surface-strong: rgba(11, 17, 31, .98);--color-bg-elevated: rgba(28, 41, 66, .94);--color-text-primary: #f5f7fb;--color-text-secondary: #c4cede;--color-text-muted: #8f9cb1;--color-border-subtle: rgba(148, 163, 184, .18);--color-border-strong: rgba(148, 163, 184, .28);--color-accent: #63deb4;--color-accent-strong: #2dac85;--color-accent-alt: #ff856b;--color-board-outer: #66ddb6;--color-board-shortcut: #f7c66a;--color-board-backdo: rgba(255, 133, 107, .9)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-body)}button,a,input,select,textarea{font:inherit}button,input,select,textarea{border:none;outline:none}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}h1,h2,h3,h4,p,ul{margin-top:0}ul{padding-left:0}h1{margin-bottom:0;font-size:var(--font-size-display);line-height:var(--line-height-heading);letter-spacing:0}h2,.section-title{margin-bottom:var(--space-2);font-size:var(--font-size-heading);line-height:1.2}h3{margin-bottom:var(--space-2);font-size:1rem}p{color:var(--color-text-secondary);line-height:var(--line-height-body)}.eyebrow{margin-bottom:var(--space-2);color:var(--color-primary);font-size:var(--font-size-caption);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.muted{color:var(--color-text-caption)}.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);background:radial-gradient(circle at top right,rgba(114,224,181,.08),transparent 28%),radial-gradient(circle at bottom left,rgba(121,185,255,.08),transparent 22%),var(--color-background)}.app-sidebar{position:sticky;top:0;min-height:100vh;padding:var(--space-4);display:grid;gap:var(--space-4);align-content:start;background:#080c14fa;border-right:var(--border-width) solid var(--color-border)}.sidebar-brand{display:flex;gap:var(--space-3);align-items:center}.sidebar-brand-mark{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-medium);background:var(--color-primary-soft);border:var(--border-width) solid var(--color-border);color:var(--color-primary);font-weight:800}.sidebar-brand-copy{display:grid;gap:var(--space-1)}.sidebar-brand-copy strong{font-size:1rem}.sidebar-brand-copy small{color:var(--color-text-caption)}.sidebar-nav,.sidebar-group-links,.sidebar-groups{display:grid;gap:var(--space-1)}.sidebar-group{display:grid;gap:var(--space-1);padding-top:var(--space-3);border-top:var(--border-width) solid var(--color-border)}.sidebar-group-title{margin-bottom:0;color:var(--color-text-caption);font-size:var(--font-size-caption);font-weight:700;text-transform:uppercase}.sidebar-link{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-2);align-items:center;padding:10px 12px;border-radius:var(--radius-medium);border:var(--border-width) solid transparent;color:var(--color-text-secondary);transition:background-color .14s ease,border-color .14s ease,color .14s ease}.sidebar-link:hover,.sidebar-link.is-active{background:var(--color-surface-soft);border-color:var(--color-border);color:var(--color-text-primary)}.sidebar-link strong{font-size:.95rem}.sidebar-link-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#ffffff0a;color:var(--color-text-primary);font-size:.72rem;font-weight:800}.sidebar-footer{display:grid;gap:var(--space-3);margin-top:var(--space-3)}.app-main{padding:var(--space-6)}.app-frame{width:min(100%,var(--content-max-width));margin:0 auto;display:grid;gap:var(--space-5)}.app-topbar{min-height:64px;display:flex;justify-content:space-between;gap:var(--space-5);align-items:center}.app-topbar-copy{display:grid;gap:4px;max-width:420px}.app-topbar-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:flex-end}.app-topbar-copy h1{font-size:1.35rem}.app-topbar-copy p:not(.eyebrow){display:none}.topbar-stat-list{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.topbar-stat{display:grid;gap:2px;min-width:64px;padding:8px 10px;border-radius:var(--radius-medium);border:var(--border-width) solid var(--color-border);background:var(--color-surface-soft)}.topbar-stat small{color:var(--color-text-caption);font-size:.7rem}.topbar-stat strong{font-size:.92rem}.page-body{display:grid;gap:var(--space-5)}.page-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5);align-items:start}.page-stack{display:grid;gap:var(--space-5)}.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.section-header{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-4)}.section-header.is-compact{margin-bottom:var(--space-3)}.section-header-copy{display:grid}.section-description{margin-bottom:0;max-width:66ch}@media (max-width: 1120px){.app-shell{grid-template-columns:1fr}.app-sidebar{position:static;min-height:auto}.app-main{padding:var(--space-5)}}@media (max-width: 860px){.app-topbar,.section-header{display:grid}.page-grid{grid-template-columns:1fr}.span-12,.span-8,.span-7,.span-6,.span-5,.span-4{grid-column:auto}}.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 16px;border-radius:var(--radius-medium);border:var(--border-width) solid var(--color-border);background:var(--color-surface-soft);color:var(--color-text-primary);cursor:pointer;transition:background-color .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease}.ui-button:hover{transform:translateY(-1px);border-color:var(--color-border-strong);box-shadow:var(--shadow-hover)}.ui-button:disabled{opacity:.58;cursor:not-allowed;transform:none;box-shadow:none}.ui-button.is-primary{background:var(--color-primary);border-color:var(--color-primary);color:#071018;font-weight:700}.ui-button.is-secondary{background:#ffffff0d}.ui-button.is-ghost{background:transparent}.ui-button.is-sm{min-height:36px;padding:0 12px}.ui-button.is-block{width:100%}.ui-panel,.ui-card{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-large);background:var(--color-surface);box-shadow:var(--shadow-card)}.ui-panel{padding:var(--space-5)}.ui-panel.is-hero{background:linear-gradient(180deg,#72e0b514,#79b9ff0a),var(--color-surface-strong)}.ui-card{padding:var(--space-4)}.ui-card.is-interactive{transition:background-color .14s ease,border-color .14s ease,transform .14s ease}.ui-card.is-interactive:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);transform:translateY(-1px);box-shadow:var(--shadow-hover)}.ui-field,.field{display:grid;gap:var(--space-2)}.ui-field-label{color:var(--color-text-secondary);font-size:.92rem;font-weight:600}.ui-input{width:100%;min-height:46px;padding:0 14px;border-radius:var(--radius-medium);border:var(--border-width) solid var(--color-border);background:#ffffff08;color:var(--color-text-primary)}textarea.ui-input{min-height:120px;padding:14px;resize:vertical}.ui-field-help{color:var(--color-text-caption);font-size:var(--font-size-caption)}.ui-field-help.is-error,.error-text{color:var(--color-danger)}.ui-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000094;display:grid;place-items:center;padding:var(--space-5);z-index:50}.ui-modal{width:min(100%,560px);display:grid;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-large);border:var(--border-width) solid var(--color-border);background:var(--color-surface-strong);box-shadow:var(--shadow-hover)}.ui-modal-header,.ui-modal-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.ui-modal-body{display:grid;gap:var(--space-3)}.ui-icon-button{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-medium);background:transparent;color:var(--color-text-secondary);cursor:pointer}.chip-row,.data-cluster{display:flex;flex-wrap:wrap;gap:var(--space-2)}.data-chip,.turn-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);border:var(--border-width) solid var(--color-border);background:var(--color-surface-soft);color:var(--color-text-secondary);font-size:.85rem}.turn-badge{color:var(--color-text-primary);background:var(--color-primary-soft)}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}.stat-card{display:grid;gap:var(--space-2)}.stat-label{color:var(--color-text-caption);font-size:var(--font-size-caption)}.stat-value{font-size:1.6rem;line-height:1}.stat-hint{color:var(--color-text-secondary);font-size:var(--font-size-caption)}.info-list,.plain-list,.log-list{list-style:none;display:grid;gap:var(--space-2);margin:0}.info-list li{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:var(--border-width) solid rgba(255,255,255,.06)}.info-list li:last-child{border-bottom:none;padding-bottom:0}.plain-list li,.log-list li{color:var(--color-text-secondary)}.log-list li{position:relative;padding-left:var(--space-4)}.log-list li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:999px;background:var(--color-primary)}.surface-list,.action-stack,.option-list,.mode-list,.compact-stack,.setup-stack,.focus-stack{display:grid;gap:var(--space-3)}.surface-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.line-card{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;padding:var(--space-4);border-radius:var(--radius-medium);border:var(--border-width) solid var(--color-border);background:var(--color-surface-soft)}.line-card.simple,.line-card.stack{display:grid;justify-content:stretch}.empty-state{display:grid;gap:var(--space-4);min-height:180px;justify-items:flex-start;align-content:center}.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-medium);background:var(--color-surface-soft)}.segmented button{min-height:40px;border-radius:var(--radius-small);background:transparent;color:var(--color-text-secondary);cursor:pointer}.segmented button.active{background:#ffffff14;color:var(--color-text-primary)}.segmented-wide{grid-template-columns:repeat(2,minmax(0,1fr))}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.result-card,.option-card,.mode-card{display:grid;gap:var(--space-2);width:100%;padding:var(--space-4);border-radius:var(--radius-medium);border:var(--border-width) solid var(--color-border);background:var(--color-surface-soft);color:var(--color-text-primary);text-align:left;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,transform .14s ease}.result-card:hover,.option-card:hover,.mode-card:hover,.result-card.active,.option-card.active{background:var(--color-surface-hover);border-color:var(--color-border-strong);transform:translateY(-1px)}.result-card span,.option-card strong,.mode-card span{font-size:.98rem;font-weight:700}.result-card small,.option-card small,.mode-card small{color:var(--color-text-caption)}.info-strip{display:flex;flex-wrap:wrap;gap:var(--space-2)}@media (max-width: 860px){.stat-grid,.surface-grid,.result-grid{grid-template-columns:1fr}}.hero-stack,.hero-copy,.focus-stack,.play-column,.board-column,.side-column,.detail-stack,.summary-stack{display:grid;gap:var(--space-4)}.hero-title{max-width:12ch}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.home-grid{align-items:start}.home-main-card{min-height:220px}.home-cta-block{display:grid;gap:var(--space-4);align-content:space-between;height:100%}.home-kpi-line{display:flex;flex-wrap:wrap;gap:var(--space-2)}.home-card-value{font-size:1.85rem;font-weight:800;line-height:1}.home-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.home-list-row{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center}.home-empty{min-height:120px}.home-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.home-mode-grid,.profile-summary-grid{display:grid;gap:var(--space-3)}.home-mode-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.profile-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboard-list,.admin-user-list,.my-games-list{display:grid;gap:var(--space-3)}.leaderboard-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-3);align-items:center}.leaderboard-rank{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--radius-medium);background:var(--color-primary-soft);color:var(--color-text-primary);font-weight:800}.auth-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--space-5)}.play-layout{display:grid;grid-template-columns:minmax(0,1.45fr) 420px;gap:var(--space-5)}.play-layout.is-live{align-items:start}.play-setup-screen{min-height:calc(100vh - 180px);display:grid;place-items:center}.play-setup-panel{width:min(100%,760px)}.play-setup-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.play-hero{min-height:180px}.board-panel{display:grid;gap:var(--space-4)}.play-board-column,.play-side-column{display:grid;gap:var(--space-5)}.play-board-stage{gap:var(--space-5)}.play-board-hud{display:flex;justify-content:space-between;gap:var(--space-4);align-items:center}.play-sync-text{margin:0}.board-stage{padding:var(--space-5);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-large);background:var(--color-surface);box-shadow:var(--shadow-card)}.state-columns,.admin-detail-grid,.admin-filter-grid{display:grid;gap:var(--space-4)}.state-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-detail-grid{grid-template-columns:minmax(0,1fr) 360px}.admin-filter-grid{grid-template-columns:minmax(0,1fr) 220px}.status-callout,.play-status-callout{display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-medium);border:var(--border-width) solid rgba(114,224,181,.24);background:#72e0b514}.finish-banner{font-size:1.05rem;font-weight:700;color:var(--color-text-primary)}@media (max-width: 1180px){.home-feature-grid,.home-mode-grid,.play-layout,.admin-detail-grid,.play-setup-summary{grid-template-columns:1fr}}@media (max-width: 860px){.auth-grid,.home-stats-grid,.profile-summary-grid,.state-columns,.admin-filter-grid{grid-template-columns:1fr}.play-board-hud,.home-list-row{display:grid}}.board-shell{display:grid}.board-stage{position:relative;width:100%;aspect-ratio:1 / 1;padding:var(--space-4);border-radius:var(--radius-3);background:radial-gradient(circle at center,rgba(99,222,180,.06),transparent 28%),linear-gradient(180deg,#ffffff08,#ffffff05);border:var(--border-width) solid rgba(148,163,184,.14)}.board-svg{width:100%;height:100%;overflow:visible}.board-path{fill:none;stroke-linecap:round;stroke-width:1.7;opacity:.88}.board-path.outer{stroke:var(--color-board-outer)}.board-path.shortcut{stroke:var(--color-board-shortcut)}.board-path.backdo{stroke:var(--color-board-backdo);stroke-dasharray:2.4 2.4}.board-node{fill:#ffffff14;stroke:#c4cede24;stroke-width:.6;transition:.14s ease}.board-node.branch{fill:#63deb424}.board-node.merge{fill:#f7c66a24}.board-node.option,.board-node.selected-path{fill:#63deb447;stroke:#63deb499;cursor:pointer}.board-node-label{fill:var(--color-text-muted);font-size:2.6px;pointer-events:none}.node-overlay{position:absolute;left:var(--node-x);top:var(--node-y)}.piece-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:var(--radius-round);border:var(--border-width) solid rgba(255,255,255,.08);box-shadow:var(--shadow-1);color:#081019;font-size:.78rem;font-weight:800;white-space:nowrap;transform:translate(-50%,-50%) translate(var(--stack-offset-x),var(--stack-offset-y))}.piece-chip.blue{background:linear-gradient(135deg,#8edbff,var(--color-blue-500))}.piece-chip.red{background:linear-gradient(135deg,#ffb0a1,var(--color-red-500))}.piece-chip.selected,.piece-chip.active:hover{outline:2px solid rgba(255,255,255,.34)}