:root { --ink:#17201d; --muted:#6b746f; --paper:#f5f1e8; --card:#fffdf8; --line:#d7d0c1; --red:#a7352b; --red2:#7d211b; --gold:#c39236; --green:#315c4b; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 5%,#e6d9bd 0,transparent 28%),var(--paper); font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans TC",sans-serif; }
.dim-overlay { display:none; position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.96); }
.dim-toggle { position:fixed; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); z-index:9999; padding:7px 9px; border-color:#777; border-radius:99px; background:#252927; color:#e5e5e5; font-size:11px; opacity:.72; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.dim-toggle:hover { border-color:#aaa; }.dim-mode .dim-overlay { display:block; }.dim-mode .dim-toggle { background:#080909; color:#777; border-color:#333; opacity:.55; }
header { max-width:1380px; margin:auto; padding:34px 28px 22px; display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
h1 { margin:5px 0 0; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(25px,4vw,45px); font-weight:600; letter-spacing:.02em; }
.eyebrow { color:var(--red); font:700 11px/1.2 ui-monospace,monospace; letter-spacing:.2em; }
.status { padding:8px 12px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:13px; white-space:nowrap; }
.status.ok { color:var(--green); border-color:#9ab9aa; background:#edf6f0; }
.status.warn { color:#875d15; border-color:#d9bb7c; background:#fff6df; }
main { max-width:1380px; margin:24px auto; padding:0 28px; display:grid; grid-template-columns:minmax(280px,.85fr) minmax(370px,1.15fr) minmax(290px,.8fr); gap:18px; align-items:start; }
.card { background:color-mix(in srgb,var(--card) 95%,transparent); border:1px solid var(--line); border-radius:3px; padding:20px; box-shadow:0 10px 30px rgba(48,36,18,.05); }
.section-title { display:flex; gap:12px; margin-bottom:18px; }
.section-title>span { color:var(--red); font:700 12px ui-monospace,monospace; padding-top:5px; }
h2 { font-size:19px; margin:0 0 3px; font-weight:650; }
p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.drop { min-height:210px; border:1px dashed #aaa18f; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; background:#faf7ef; transition:.2s; }
.drop:hover,.drop.drag { border-color:var(--red); background:#fff9ed; }
.drop input { display:none; }.drop strong { font-size:17px; }.drop small { color:var(--muted); margin-top:6px; }
.import-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:18px; }.file-button { border:1px solid #9c9588; background:#fff; color:var(--ink); border-radius:2px; padding:11px 14px; cursor:pointer; font-weight:650; }.file-button.primary { color:#fff; background:var(--red); border-color:var(--red); }.desktop-hint { color:var(--muted); font-size:11px; margin-top:14px; }
.photo-panel { margin-top:15px; }.photo-panel canvas { display:block; max-width:100%; max-height:440px; margin:auto; background:#ddd; cursor:crosshair; }
.live-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }.live-panel { margin-top:12px; }.live-panel video { display:block; width:100%; max-height:440px; object-fit:contain; background:#171a18; }.live-panel .hint { margin-top:8px; }
.hint { color:#8b5d12; background:#fff3d6; padding:9px; margin:8px 0; }.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
button { border:1px solid #9c9588; background:#fff; color:var(--ink); border-radius:2px; padding:10px 14px; cursor:pointer; font-weight:600; }
button:hover { border-color:var(--red); } button:disabled { opacity:.45; cursor:not-allowed; }.primary { background:var(--red); color:white; border-color:var(--red); }.primary:hover { background:var(--red2); }.ghost { border-style:dashed; }.wide { width:100%; margin-top:14px; }
.message { margin-top:12px; padding:10px; font-size:13px; border-left:3px solid var(--gold); background:#fff7df; white-space:pre-line; }.message.error { border-color:var(--red); background:#fff0ed; }
.board-wrap { width:100%; background:#bd8b49; padding:14px; max-width:510px; margin:auto; box-shadow:inset 0 0 0 2px #805928; overflow:hidden; }
.board { width:100%; min-width:0; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:1px; background:#765327; border:1px solid #765327; }
.cell { width:100%; min-width:0; aspect-ratio:1; overflow:hidden; border:0; padding:1px 1px 8px; background:#dfb873; display:grid; place-items:center; font:700 clamp(15px,2.15vw,25px) Georgia,"Noto Serif TC",serif; border-radius:0; position:relative; }
.cell.red { color:#b3231c; }.cell.black { color:#1d211f; }.cell.low { background:#f0d58a; box-shadow:inset 0 0 0 3px #d28e16; }.cell.selected { box-shadow:inset 0 0 0 3px var(--red); }.cell small { position:absolute; right:2px; bottom:1px; font:8px ui-monospace; color:#5e5547; line-height:1; }
.debug-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin:12px 0 4px; color:var(--muted); font-size:12px; }.debug-controls input[type=number] { width:58px; padding:5px; border:1px solid var(--line); }.debug-controls button { padding:6px 9px; font-size:12px; }
.piece-picker { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin:12px 0; }.piece-picker button { padding:6px 9px; min-width:34px; font-family:Georgia,serif; }.piece-picker button.active { border-color:var(--red); background:#f9e2da; }
.fen-row { display:flex; gap:6px; align-items:end; }.fen-row label { flex:1; color:var(--muted); font-size:12px; }.fen-row input { width:100%; margin-top:4px; padding:9px; border:1px solid var(--line); font:11px ui-monospace,monospace; }.turn-row { display:flex; gap:14px; margin-top:13px; font-size:13px; align-items:center; }.turn-row span { color:var(--muted); margin-right:auto; }
.analysis-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.analysis-controls label { color:var(--muted); font-size:12px; }.analysis-controls input,.analysis-controls select { display:block; width:100%; margin-top:4px; padding:9px; border:1px solid var(--line); background:white; }.engine-state { margin:12px 0; color:var(--muted); font-size:13px; }.suggestions { padding-left:28px; }.suggestions li { margin:8px 0; padding:10px; border-bottom:1px solid var(--line); }.suggestions strong { color:var(--red); font-size:18px; }.suggestions span { float:right; color:var(--muted); font:12px ui-monospace; }details { margin-top:15px; color:var(--muted); font-size:12px; }pre { white-space:pre-wrap; max-height:230px; overflow:auto; background:#202522; color:#d8e3dc; padding:10px; }
.tts-toggle { display:block; margin-top:13px; color:var(--muted); font-size:13px; }
.side-suggestions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.side-suggestions section { min-width:0; }.side-suggestions h3 { margin:10px 0 0; font-size:14px; }.side-suggestions .suggestions { padding-left:20px; }.side-suggestions .suggestions li { padding:8px 4px; }.side-suggestions .suggestions strong { display:block; }.side-suggestions .suggestions .coordinate { display:block; color:var(--muted); font:12px ui-monospace,monospace; }.side-suggestions .suggestions .notation { display:block; color:var(--red); font-size:18px; margin-top:3px; }.side-suggestions .suggestions .score { float:none; display:block; margin-top:3px; }
.hidden { display:none!important; } footer { text-align:center; padding:25px; color:var(--muted); font-size:12px; }
@media(max-width:1050px){ main { grid-template-columns:1fr 1fr; }.analysis { grid-column:1/-1; }}
@media(max-width:680px){ header { align-items:start; flex-direction:column; } main { grid-template-columns:1fr; padding:0 12px; }.analysis { grid-column:auto; }.card { padding:15px; }.board-wrap { padding:9px; }.cell { font-size:clamp(16px,5.4vw,20px); }.cell small { font-size:7px; letter-spacing:-.35px; }.side-suggestions { grid-template-columns:1fr; }}