/* Theme values live here; components never select their own palette. */
@import url("/css/dialog.css?v=fdc88eb495f2");
:root, html[data-theme="dark"] {
 color-scheme:dark; --text:#e9e8e2; --text2:#a6b3bc; --bg:#182a35; --bg2:#101e28; --highlight:#29414e; --link:#edb388; --link2:#ffd0aa; --art:var(--link); --border:#354954; --hover:#edb38814; --shadow:#00000040; --grey:var(--text2); --attention:#f29c91; --icons:invert(1);
 --on-accent:#15232b; --board-light:#c3c8bb; --board-dark:#617e80; --radius:.45rem; --panel-shadow:0 12px 32px var(--shadow); --heading-weight:400; --ornament-opacity:.14;
 --sans-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --serif-font:Georgia,"Times New Roman",serif; --monospace-font:ui-monospace,Consolas,"Courier New",monospace;
 --z-base:0; --z-board:1; --z-header:20; --z-dropdown:30; --z-dialog:50; --header-height:72px;
}
html[data-theme="light"] {
 color-scheme:light; --text:#243b32; --text2:#626b60; --bg:#fffdf6; --bg2:#f2efe4; --highlight:#dce3d5; --link:#285c48; --link2:#193f31; --border:#d5d7c8; --hover:#285c480c; --shadow:#253b3210; --grey:var(--text2); --attention:#a74232; --icons:invert(0); --on-accent:#fffdf6; --board-light:#eee6ce; --board-dark:#7a937c; --radius:.2rem; --panel-shadow:0 8px 24px var(--shadow); --heading-weight:500; --ornament-opacity:.08;
}
html:lang(zh) { --sans-font:system-ui,"PingFang SC","Microsoft YaHei",sans-serif; --serif-font:"Songti SC",SimSun,serif; }
html:lang(es) { --sans-font:system-ui,"Segoe UI",Arial,sans-serif; }
body { background:var(--bg2); color:var(--text); font:400 1rem/1.65 var(--sans-font); isolation:isolate; }
h1,h2,h3,h4 { color:var(--text); font-family:var(--serif-font); font-weight:var(--heading-weight); line-height:1.15; }
h1 { font-size:clamp(2.4rem,5vw,4.8rem); letter-spacing:-.045em; } h2 { font-size:clamp(1.6rem,3vw,2.5rem); letter-spacing:-.025em; } h3 { font-size:1.45rem; }
p { font-size:inherit; } a { color:var(--link); } button,input,select,textarea { font:inherit; } :focus-visible { outline:2px solid var(--link); outline-offset:4px; }
header { position:sticky; top:0; z-index:var(--z-header); min-height:var(--header-height); background:var(--bg2); border-bottom:1px solid var(--border); padding-inline:clamp(.5rem,3vw,3rem); }
header .t a { font:600 1.7rem var(--serif-font); letter-spacing:-.06em; color:var(--text); } header .t span { color:var(--link); } header .dropdown { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--panel-shadow); z-index:var(--z-dropdown); } header #n a { color:var(--text2); font-size:.85rem; letter-spacing:.02em; } header #n a:hover,header #n a[aria-current] { color:var(--link); background:var(--hover); }
.settings-link { display:block; padding:1rem; border-bottom:1px solid var(--border); } .skip-link { position:fixed; top:-5rem; left:1rem; padding:.6rem 1rem; background:var(--bg); z-index:100; } .skip-link:focus { top:.5rem; }
footer { background:var(--bg2); border-top:1px solid var(--border); box-shadow:none; } .footer-group h4 { color:var(--link); } .footer-group a { color:var(--text2); }
/* Shared primitives and compatibility aliases for existing pages. */
.ui-button, .action, .button, .auth .submit { display:inline-flex; justify-content:center; align-items:center; gap:.6rem; min-height:2.9rem; padding:.7rem 1.25rem; border:1px solid var(--link); border-radius:var(--radius); background:var(--link); color:var(--on-accent); font:600 .85rem/1.35 var(--sans-font); text-decoration:none; text-transform:none; letter-spacing:.015em; cursor:pointer; box-shadow:none; transition:background .18s,transform .18s,border-color .18s; }
.ui-button:hover,.action:hover,.button:hover { background:var(--link2); color:var(--on-accent); transform:translateY(-1px); }
.ui-secondary,.action.alternative { border-color:var(--border); background:transparent; color:var(--text); } .ui-secondary:hover,.action.alternative:hover { background:var(--hover); color:var(--link); border-color:var(--link); } .ui-quiet { background:transparent; border-color:transparent; color:var(--text2); } .ui-danger { background:var(--attention); border-color:var(--attention); color:var(--bg2); }
button:disabled,[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none; }
.ui-panel,.easy-card,.auth,.game-page .game-player,.game-page moves-panel,.menu-box-pop,.user-show,.site-dialog { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--panel-shadow); }
.ui-panel { padding:clamp(1.25rem,3vw,2rem); min-width:0; } .ui-panel>*+* { margin-top:1rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,.auth .form-control { background:var(--bg2); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:.7rem .85rem; min-height:2.9rem; max-width:100%; }
label,.form-label { color:var(--text); font-weight:600; font-size:.85rem; } input[type="checkbox"],input[type="radio"] { accent-color:var(--link); } .ui-field { display:grid; gap:.5rem; } .ui-field+.ui-field { margin-top:1.25rem; }
.ui-muted,.ui-intro { color:var(--text2); } .eyebrow { font:600 .68rem/1.5 var(--sans-font); color:var(--link); letter-spacing:.19em; text-transform:uppercase; } .ui-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.ui-table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:.9rem; } th { color:var(--text2); font-size:.7rem; letter-spacing:.07em; text-align:left; text-transform:uppercase; } th,td { padding:1rem; border-bottom:1px solid var(--border); } tbody tr:hover { background:var(--hover); }
.ui-tabs { display:flex; flex-wrap:wrap; gap:1.25rem; border-bottom:1px solid var(--border); margin-bottom:2rem; } .ui-tabs a { padding:.7rem 0; color:var(--text2); border-bottom:2px solid transparent; } .ui-tabs a[aria-current] { color:var(--link); border-color:var(--link); }
.ui-filters { display:flex; flex-wrap:wrap; gap:1rem; align-items:end; } .ui-empty { padding:3rem 1rem; text-align:center; color:var(--text2); } .ui-empty strong { display:block; color:var(--text); margin-bottom:.5rem; font-family:var(--serif-font); font-size:1.65rem; font-weight:400; }
/* Layouts own arrangement only. */
.ui-page { width:min(100% - 3rem,78rem); margin:0 auto; padding:clamp(2rem,5vw,4rem) 0 5rem; } .ui-page-heading { margin-bottom:2.5rem; max-width:48rem; } .ui-page-heading h1 { margin:.5rem 0 1rem; } .ui-intro { max-width:48ch; font-size:1.05rem; }
.ui-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; } .ui-grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; } .ui-workbench { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(16rem,1fr); gap:1.5rem; align-items:start; } .ui-sidebar-layout { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:2rem; } .ui-sidebar { display:grid; align-content:start; gap:.35rem; } .ui-sidebar a { padding:.65rem 1rem; border-radius:var(--radius); color:var(--text2); } .ui-sidebar a[aria-current] { background:var(--hover); color:var(--link); } .ui-report { max-width:50rem; margin:auto; } .ui-report p { margin-block:1rem; line-height:1.9; } .ui-report .lede::first-letter { float:left; font:3.7rem/.9 var(--serif-font); padding:.2rem .5rem 0 0; color:var(--link); }
.ui-section { margin-top:4rem; } .ui-section-heading { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin-bottom:1.5rem; } .ui-index { font:.7rem var(--monospace-font); color:var(--link); display:block; margin-bottom:2rem; }
.ui-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:center; padding:2rem 0 3rem; } .ui-hero h1 { font-size:clamp(3.5rem,6.6vw,6.4rem); max-width:9ch; line-height:1.02; margin:1rem 0 1.5rem; } .ui-hero h1 em { color:var(--link); font-weight:inherit; } .ui-hero .ui-actions { margin-top:2rem; } .ui-hero-art { position:relative; padding:2.75rem; isolation:isolate; } .ui-hero-art::before { content:""; position:absolute; inset:0; border:1px solid var(--link); border-radius:50%; opacity:var(--ornament-opacity); transform:rotate(-15deg) scale(1.08); z-index:-1; } .ui-hero-art .ui-board { transform:perspective(1100px) rotateX(12deg) rotateZ(-7deg); box-shadow:1rem 1.5rem 0 var(--highlight),2rem 3rem 4rem var(--shadow); animation:board-arrive .8s ease-out both; } .ui-caption { color:var(--text2); font:.7rem var(--monospace-font); margin-top:2rem; text-align:center; letter-spacing:.05em; }
.ui-board { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1; width:100%; border:6px solid var(--bg); outline:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .ui-square { background:var(--board-light); aspect-ratio:1; display:grid; place-items:center; } .ui-square.is-dark { background:var(--board-dark); } .ui-square img { width:85%; height:85%; object-fit:contain; } cg-board { background-image:conic-gradient(var(--board-dark) 25%,var(--board-light) 0 50%,var(--board-dark) 0 75%,var(--board-light) 0); background-size:25% 25%; } .rclock .time { font-family:var(--monospace-font); font-variant-numeric:tabular-nums; } .rclock.running .time { color:var(--link); background:var(--hover); } .game-page .round__app__board { border-radius:var(--radius); } .game-page moves-panel move-entry.a1t { background:var(--hover); color:var(--link); }
.showcase { min-height:32rem; background:var(--bg2); } .showcase::after,.bg-star { display:none; } .legal-showcase,.ranked-showcase { background:var(--bg2); } .legal-lead { color:var(--text2); } .legal-grid { border-color:var(--border); } .auth { border-radius:var(--radius); } .auth .box__top { font-family:var(--serif-font); } .auth .submit { color:var(--on-accent); }
.ui-theme-choice { display:grid; grid-template-columns:3rem 1fr; text-align:left; align-items:center; gap:1rem; width:100%; padding:1.25rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; } .ui-theme-choice[aria-pressed="true"] { border-color:var(--link); box-shadow:inset 0 0 0 1px var(--link); } .ui-theme-choice small { display:block; color:var(--text2); } .ui-swatch { width:3rem; height:3rem; border-radius:50%; background:linear-gradient(135deg,#f2efe4 50%,#285c48 50%); } .ui-swatch-dark { background:linear-gradient(135deg,#101e28 50%,#edb388 50%); }
@keyframes board-arrive { from { opacity:0; transform:perspective(1100px) rotateX(12deg) rotateZ(-7deg) translateY(1rem); } to { opacity:1; transform:perspective(1100px) rotateX(12deg) rotateZ(-7deg); } }
@media(max-width:900px) { .ui-hero { gap:1.5rem; } .ui-grid { grid-template-columns:1fr; } .ui-workbench { grid-template-columns:1fr; } .ui-sidebar-layout { grid-template-columns:1fr; } .ui-sidebar { display:flex; flex-wrap:wrap; } }
@media(max-width:600px) { .ui-page { width:calc(100% - 2rem); padding-top:2rem; } .ui-hero,.ui-grid-two { grid-template-columns:1fr; } .ui-hero-art { padding:1.5rem; max-width:24rem; margin:auto; } .ui-hero h1 { max-width:12ch; } header { padding-inline:.25rem; } header .t a { font-size:1.4rem; } .site-buttons #clinput { display:none; } .ui-section { margin-top:2.5rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Fixed fractional tracks prevent intrinsic SVG dimensions from sizing the board. */
.ui-board { grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); }
.ui-square { min-width:0; min-height:0; position:relative; }
.ui-square img { position:absolute; inset:7.5%; width:85%; height:85%; }
.ui-hero-art { min-width:0; }
.ui-caption { position:relative; margin-top:3rem; }
@media(max-width:600px) { .ui-hero-art { width:100%; } .ui-hero { overflow:clip; padding-bottom:2rem; } .ui-hero-art .ui-board { box-shadow:.5rem .75rem 0 var(--highlight),1rem 1.5rem 2rem var(--shadow); } }
.ui-hero { overflow:clip; }
.easy-bot-portrait { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:3rem; }
.easy-bot-symbol { color:var(--link); font:clamp(5rem,12vw,10rem)/1 Georgia,serif; text-shadow:.07em .08em 0 var(--highlight); }
#easy-form .ui-section { margin-top:1.5rem; }
#easy-form #difficulty-help { margin-top:.75rem; font-size:.85rem; }