:root { --bg: #f6f3ee; --fg: #1d1b18; --muted: #6b655c; --lt: #ecdcc0; --dk: #b38b63; --accent: #2f7d5b; --warn: #c2412d; --card: #fff; }
@media (prefers-color-scheme: dark) { :root { --bg: #161513; --fg: #eee9e1; --muted: #a39b8f; --lt: #c9b693; --dk: #8a6a4b; --card: #24221f; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, -apple-system, sans-serif; }
main { max-width: 520px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
h1 { margin: 8px 0 4px; font-size: 1.6rem; }
.rating, .fine, small { color: var(--muted); }
.fine { font-size: .8rem; margin-top: 20px; }
.units { display: grid; gap: 8px; margin-top: 12px; }
.unit { display: grid; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: var(--card); color: inherit; font: inherit; }
.unit.current { border-color: var(--accent); }
.unit.passed b { color: var(--accent); }
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar div { display: grid; }
.back { font-size: 1.8rem; line-height: 1; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--card); color: inherit; }
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; width: 100%; border-radius: 6px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lt { background: var(--lt); } .dk { background: var(--dk); }
.pc { font-size: min(9vw, 46px); line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", serif; font-variant-emoji: text; }
.pc.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 1px 0 #000; }
.pc.b { color: #111; }
.sel { box-shadow: inset 0 0 0 4px var(--accent); }
.last { background-image: linear-gradient(rgba(255, 220, 60, .38), rgba(255, 220, 60, .38)); }
.tgt::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 60, 40, .35); }
.cap::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: 4px solid rgba(20, 60, 40, .45); }
.goal::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: rgba(194, 65, 45, .25); }
.hint { animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: inset 0 0 0 5px #f2c230; } }
.cr, .cf { position: absolute; font-size: .62rem; font-style: normal; opacity: .7; }
.cr { top: 2px; left: 3px; } .cf { bottom: 1px; right: 3px; }
.msg { min-height: 2.8em; margin: 12px 2px 6px; }
.about { font-size: 1.15em; line-height: 1.5; margin: 18px 4px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools button, .tools a { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--card); color: inherit; font: inherit; }
.tools .go { background: var(--accent); color: #fff; }
.stars { font-size: 1.6rem; color: #e0a800; margin: 0 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .hint { animation: none; box-shadow: inset 0 0 0 5px #f2c230; } }
h2 { font-size: 1.1rem; margin: 22px 0 8px; }
/* Strategy eyes: steady marks after Check. Green = found, gold = missed, red ring = not it. */
.eyes .goal { box-shadow: inset 0 0 0 5px #2e8b57; } .eyes .goal::before { background: rgba(46, 139, 87, .28); }
.eyes .hint { animation: none; box-shadow: inset 0 0 0 5px #f2c230; }
.eyes .cap::after { border-color: rgba(194, 65, 45, .85); }
.tools .go, .unit.current { font-weight: 600; }
.unit.play { border-color: var(--accent); border-style: dashed; }
.why { margin: 6px 0 0; font-size: .92rem; }
.link { margin-top: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--bg); color: var(--accent); font: inherit; font-weight: 600; }
.graph { display: flex; align-items: flex-end; gap: 2px; height: 72px; margin: 10px 0 14px; padding: 4px; border-radius: 10px; background: var(--card); background-image: linear-gradient(to top, transparent calc(50% - 0.5px), var(--muted) calc(50% - 0.5px), var(--muted) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.gbar { flex: 1 1 0; min-width: 3px; max-width: 18px; padding: 0; border: 0; border-radius: 2px 2px 0 0; background: var(--accent); opacity: 0.75; }
.gbar.down { background: var(--muted); }
.gbar.mistake { background: #d98a1f; opacity: 1; }
.gbar.blunder { background: var(--warn); opacity: 1; }
.gbar.at { opacity: 1; outline: 2px solid var(--fg); outline-offset: 1px; }
.line { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: var(--card); }