:root { color-scheme: light; --paper:#f6f3ec; --ink:#302d28; --muted:#7d7b70; --line:#dedbd1; --accent:#af4e31; --green:#66715c; --light:#ece3cc; --dark:#9ca78b; font-family:Arial,Helvetica,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button { touch-action:manipulation; }
[hidden] { display:none!important; }
.masthead { max-width:1200px; margin:auto; height:98px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); text-decoration:none; display:flex; align-items:center; font-size:25px; font-weight:700; letter-spacing:-1px; gap:7px; }
.wordmark-light { font-weight:400; color:#77796b; margin-left:-4px; }
.brand-icon { font:italic 33px Georgia,serif; background:var(--accent); color:var(--paper); width:39px; height:39px; border-radius:12px; text-align:center; margin-right:5px; }
.masthead-note, .eyebrow, .card-eyebrow, .player-state, .score-labels, footer span:last-child { font-size:10px; letter-spacing:1.6px; font-weight:600; }
.masthead-note { margin-left:-75px; color:var(--muted); }
.about-link { font-size:12px; color:var(--muted); text-decoration:none; }
.about-link span { margin-left:8px; font-size:16px; }
main { max-width:1100px; margin:0 auto; padding:0 20px; }
.intro { display:flex; justify-content:space-between; align-items:center; margin:46px 0 38px; gap:20px; }
.eyebrow { color:var(--accent); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.small-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; }
h1 { font:normal clamp(30px,3.2vw,43px)/1.18 Georgia,'Times New Roman',serif; letter-spacing:-1.5px; margin:0; }
h1 em { font-weight:normal; color:var(--green); }
.intro-copy { color:var(--muted); font-size:13px; margin:12px 0 0; }
.button { border:1px solid transparent; border-radius:6px; padding:13px 19px; font-size:12px; font-weight:600; white-space:nowrap; transition:background .15s; }
.button.primary { background:var(--accent); color:#fff8ed; box-shadow:0 2px 3px #6a321316; }
.button.primary:hover { background:#973f25; }
.button.primary span { margin-right:7px; font-size:17px; font-weight:400; }
.button.secondary { background:transparent; border-color:var(--line); }
.game-layout { display:grid; grid-template-columns:minmax(0,600px) minmax(270px,330px); justify-content:space-between; gap:54px; align-items:start; }
.play-area { min-width:0; }
.player-line { display:flex; align-items:center; gap:10px; margin:0 3px 14px; }
.avatar { width:35px; height:35px; border-radius:50%; display:grid; place-items:center; }
.jev-avatar { background:#e5e7dc; font:italic 28px Georgia,serif; color:#58624e; padding-bottom:4px; }
.human-avatar { background:#eae3d4; font-size:27px; }
.player-line strong { font-size:13px; display:block; }
.player-line div>span { font-size:11px; color:var(--muted); display:block; margin-top:4px; }
.player-state { margin-left:auto; color:var(--green); font-size:9px; letter-spacing:1px; }
.human-line { margin-top:16px; margin-bottom:18px; }
.board-surround { border-radius:5px; padding:8px; background:#e3e0d5; box-shadow:0 7px 20px #3330200c; }
.board { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1; border:1px solid #5c665636; }
.square { width:100%; aspect-ratio:1; border:0; border-radius:0; background:var(--light); padding:0; display:grid; place-items:center; position:relative; }
.square.dark { background:var(--dark); }
.square.last { background:#d9ce8e; }
.square.dark.last { background:#afb372; }
.square.selected { background:#d8b871; box-shadow:inset 0 0 0 3px #77552c80; }
.square.check { background:#cb8170; }
.square.legal::after { content:''; width:23%; height:23%; border-radius:50%; background:#24332535; position:absolute; pointer-events:none; }
.square.legal.occupied::after { width:88%; height:88%; background:transparent; border:5px solid #24332545; }
.square:hover { box-shadow:inset 0 0 0 3px #504e332b; }
.square:focus-visible { z-index:2; outline-offset:-4px; }
.piece { width:82%; height:82%; max-height:76px; filter:drop-shadow(0 2px 1px #29241635); pointer-events:none; z-index:1; }
.white-piece g { fill:#fff9e9; stroke:#534e43; }
.black-piece g { fill:#343a32; stroke:#20271f; }
.white-piece .piece-eye { fill:#534e43; }
.black-piece .piece-eye { fill:#e6e1c9; stroke:#e6e1c9; }
.coordinate { position:absolute; font-size:10px; line-height:1; color:#657059; font-weight:600; pointer-events:none; }
.dark .coordinate { color:#f4efdf; }
.rank { left:4px; top:4px; }
.file { right:4px; bottom:3px; }
.board-status { border-top:1px solid var(--line); padding:17px 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.board-status>div { display:flex; align-items:center; gap:9px; }
.status-dot { width:7px; height:7px; background:var(--green); border-radius:50%; flex-shrink:0; }
.status-dot.thinking { animation:pulse 1.2s ease-in-out infinite; background:var(--accent); }
.text-button { padding:3px 0; background:transparent; border:0; color:var(--muted); font-size:11px; white-space:nowrap; }
.text-button:hover { color:var(--accent); }
.text-button span { font-size:15px; margin-right:4px; }
.board-hint { margin:17px 0 0; font-size:10px; color:var(--muted); line-height:1.6; }
.board-hint span { color:#99988c; margin-left:5px; }
.sidebar { padding-top:0; }
.decision-card { padding:25px 23px 20px; border:1px solid var(--line); border-radius:9px; background:#fbf9f3; }
.card-eyebrow { color:var(--green); letter-spacing:1px; font-size:9px; display:flex; align-items:center; gap:7px; }
.spark { font-size:20px; font-weight:normal; }
.live-badge { margin-left:auto; font-size:8px; border:1px solid #d8ddce; border-radius:4px; padding:4px 6px; }
h2 { font:normal 24px/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.6px; margin:17px 0 8px; }
.card-copy { font-size:11px; color:var(--muted); margin:0; }
.question { margin:22px 0; background:#eeede4; border-radius:4px; padding:14px 10px; text-align:center; color:#64705a; font:italic 15px/1.4 Georgia,serif; }
.decision-empty { min-height:145px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:10px; padding:10px; }
.decision-empty .empty-symbol { color:#9aa18e; font:32px Georgia,serif; }
.decision-empty strong { font-size:12px; font-weight:400; }
.decision-empty p { font-size:11px; color:var(--muted); line-height:1.65; margin:0; }
.candidate-heading { display:flex; justify-content:space-between; font-size:9px; letter-spacing:1px; color:var(--muted); margin-bottom:15px; }
.candidate { margin:0 0 13px; }
.candidate-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12px; }
.candidate-label strong { font-weight:500; }
.candidate:first-of-type .candidate-label { color:var(--accent); }
.played-label { font-size:8px; letter-spacing:.5px; background:#f0e1d5; border-radius:3px; padding:3px 4px; margin-left:6px; vertical-align:middle; }
.candidate-label span:last-child { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.probability-bar { display:block; width:100%; height:4px; border:0; border-radius:3px; overflow:hidden; background:#e8e7df; }
.probability-bar::-webkit-progress-bar { background:#e8e7df; }
.probability-bar::-webkit-progress-value { background:#9ba58b; border-radius:3px; }
.probability-bar::-moz-progress-bar { background:#9ba58b; }
.candidate.chosen .probability-bar::-webkit-progress-value { background:var(--accent); }
.candidate.chosen .probability-bar::-moz-progress-bar { background:var(--accent); }
.all-moves { margin:0 0 14px; font-size:11px; color:var(--muted); }
.all-moves summary { cursor:pointer; margin:8px 0 16px; }
.decision-metrics { display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); margin-top:16px; color:var(--muted); font-size:9px; gap:10px; }
.probability-note { font-size:10px; line-height:1.7; color:var(--muted); margin:18px 0 0; }
.history-card { margin-top:26px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-heading h2 { margin:0; font-size:20px; }
.score-labels,.history-row { display:grid; grid-template-columns:50px 1fr 1fr; padding:9px 12px; }
.score-labels { font-size:8px; letter-spacing:1px; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.history-scroll { max-height:166px; overflow-y:auto; scrollbar-width:thin; }
.history-empty { font:italic 14px Georgia,serif; color:#99978b; text-align:center; padding:24px 0; margin:0; }
.history-row { font-size:12px; font-variant-numeric:tabular-nums; }
.history-row:nth-child(even) { background:#edeae2; border-radius:3px; }
.history-row>span:first-child { color:#939183; font-size:10px; }
.history-row .latest-move { color:var(--accent); font-weight:600; }
.game-note { display:flex; align-items:flex-start; gap:9px; border-top:1px solid var(--line); padding-top:14px; margin-top:19px; color:var(--muted); }
.game-note>span { color:var(--green); font-size:17px; }
.game-note p { margin:0; font-size:10px; line-height:1.7; }
footer { max-width:1200px; margin:43px auto 0; padding:23px 0 27px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#939183; font:italic 12px Georgia,serif; }
footer span:last-child { font:normal 8px Arial,sans-serif; letter-spacing:1.2px; }
.notice,.error-panel { border:1px solid #dfc4ae; background:#f4e8dc; padding:15px 18px; border-radius:6px; font-size:12px; line-height:1.7; }
.notice { margin-bottom:24px; }
.error-panel { margin-top:15px; }
.error-panel p { margin:0 0 10px; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:30px; max-width:min(440px,calc(100vw - 30px)); box-shadow:0 20px 80px #24241b30; color:var(--ink); }
dialog::backdrop { background:#25292070; backdrop-filter:blur(3px); }
dialog h2 { margin-top:0; font-size:27px; }
dialog p { font-size:13px; line-height:1.6; color:var(--muted); }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px; }
.promotion-options { display:flex; gap:8px; margin:20px 0; }
.promotion-options button { border:1px solid var(--line); background:var(--light); border-radius:5px; width:70px; height:80px; }
.promotion-options .piece { width:90%; height:90%; }
@keyframes pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
@media (max-width:1250px) { .masthead,footer { margin-left:35px; margin-right:35px; } main { padding:0 35px; } .game-layout { gap:36px; } }
@media (max-width:850px) { .masthead-note { display:none; } .game-layout { grid-template-columns:minmax(0,1fr) 280px; gap:24px; } main { padding:0 24px; } .masthead,footer { margin-left:24px; margin-right:24px; } .decision-card { padding:20px 18px; } h1 { font-size:32px; } .board-hint span { display:block; margin-left:0; } .coordinate { font-size:8px; } }
@media (max-width:680px) { .masthead { height:76px; } .wordmark { font-size:22px; } .about-link { font-size:10px; } main { padding:0 18px; } .masthead,footer { margin-left:18px; margin-right:18px; } .intro { margin:29px 0 27px; align-items:flex-start; flex-wrap:wrap; gap:20px; } .intro h1 { font-size:34px; letter-spacing:-1.1px; } .intro .button { padding:10px 14px; } .eyebrow { font-size:8px; } .game-layout { grid-template-columns:1fr; gap:30px; } .board-surround { padding:6px; } .piece { max-height:none; } .sidebar { display:grid; grid-template-columns:1fr; } .decision-empty { min-height:105px; } .history-card { margin-top:26px; } .board-hint { font-size:10px; } .board-hint span { display:inline; } footer { margin-top:30px; } footer span:last-child { display:none; } .coordinate { font-size:10px; } }
@media (max-width:370px) { .intro h1 { font-size:30px; } .about-link { font-size:9px; } .coordinate { font-size:8px; } }