:root {
  --ink: #17211d;
  --muted: #718078;
  --cream: #f3f0e7;
  --paper: #fbfaf6;
  --green: #173f34;
  --mint: #b9d8c8;
  --lime: #d7f16c;
  --line: #dcded5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="contrast"] { --cream: #ffffff; --paper: #ffffff; --ink: #000000; --line: #8b8b8b; }
body[data-theme="contrast"] .square.light { background: #f4f4f4; }
body[data-theme="contrast"] .square.dark { background: #4d4d4d; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); min-height: 100vh; }
button { font: inherit; }
.shell { max-width: 1180px; margin: auto; padding: 32px 28px 20px; }
header { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; color: var(--lime); background: var(--green); border-radius: 14px 14px 4px 14px; font-weight: 900; letter-spacing: -2px; }
.eyebrow { margin: 0 0 3px; font-size: 10px; letter-spacing: .16em; font-weight: 900; color: #6f7c74; }
h1 { margin: 0; font: 800 25px/1 Georgia, serif; }
.new-game, .settings-button { padding: 11px 17px; border: 1px solid #cdd2ca; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font-weight: 750; }
.settings-button { margin-left: auto; color: var(--green); }
.new-game:hover, .settings-button:hover { background: var(--paper); }
.ad-slot { min-height: 28px; display: grid; place-items: center; overflow: hidden; color: #9aa39c; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.ad-slot-banner { min-height: 90px; margin: 0 0 18px; border: 1px solid #e1e2db; background: #efeee8; border-radius: 9px; }
.ad-slot-bottom { margin: 22px 0 0; }
.ad-break { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: #10271fbb; backdrop-filter: blur(5px); }
.ad-break-card { width: min(100%, 440px); padding: 25px; border-radius: 16px; background: var(--paper); box-shadow: 0 20px 70px #0d251c55; text-align: center; }
.ad-break-card h2 { margin: 6px 0 18px; font: 700 25px/1.1 Georgia, serif; }
.ad-slot-interstitial { min-height: 250px; margin-bottom: 15px; border: 1px solid var(--line); background: #efeee8; border-radius: 9px; }
.close-ad-break { width: 100%; padding: 11px; border: 0; border-radius: 8px; background: var(--green); color: white; font-weight: 800; cursor: pointer; }
.game-layout { display: grid; grid-template-columns: minmax(400px, 690px) minmax(280px, 340px); gap: 50px; align-items: start; }
.board-column { width: min(100%, 690px); }
.player-row { height: 54px; display: flex; align-items: center; gap: 10px; }
.player-row strong, .player-row span { display: block; }
.player-row strong { font-size: 13px; }
.player-row span { font-size: 11px; color: var(--muted); margin-top: 2px; }
.player-row .clock { margin-left: auto; min-width: 44px; color: var(--green); font: 800 14px/1 ui-monospace, SFMono-Regular, monospace; text-align: right; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; }
.avatar.fish { color: white; background: var(--green); }
.avatar.you { color: var(--green); background: #dde3dc; }
.elo-pill { margin-left: auto; padding: 7px 10px; border-radius: 7px; background: #e4e3db; color: #657069; font-size: 10px; font-weight: 800; letter-spacing: .08em; transition: .3s; }
.elo-pill.pop { color: var(--green); background: var(--lime); transform: scale(1.08); }
.board { position: relative; display: grid; grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr)); aspect-ratio: 1; border-radius: 5px; overflow: hidden; box-shadow: 0 15px 40px #253d3024; touch-action: manipulation; }
.threat-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }
.threat-arrow { fill: none; stroke: #c77b67; stroke-width: 1.8; stroke-dasharray: 2.2 1.6; opacity: .78; marker-end: url(#threat-arrowhead); }
.best-arrow { fill: none; stroke: #e8bd4d; stroke-width: 2.8; opacity: .96; marker-end: url(#best-arrowhead); }
.square { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; padding: 0; cursor: pointer; font-family: "Arial Unicode MS", "Apple Symbols", sans-serif; font-size: clamp(30px, 6vw, 58px); line-height: 1; user-select: none; }
.square.light { background: #e8eadc; }
.square.dark { background: #76917f; }
.square.selected { box-shadow: inset 0 0 0 5px var(--lime); }
.square.last::after { content: ""; position: absolute; inset: 0; background: #d7f16c55; pointer-events: none; }
.square.target::before { content: ""; position: absolute; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #153d3288; z-index: 1; }
.square.target.occupied::before { width: 78%; background: transparent; border: 5px solid #153d3277; }
.square.best-from { box-shadow: inset 0 0 0 5px #e8bd4d; }
.square.best-to::before { content: ""; position: absolute; inset: 8%; border: 5px solid #e8bd4d; border-radius: 50%; z-index: 3; pointer-events: none; }
.piece { position: relative; z-index: 2; filter: drop-shadow(0 2px 1px #0002); }
.coord { position: absolute; z-index: 3; font: 800 9px/1 ui-sans-serif, sans-serif; opacity: .68; }
.coord.file { right: 4px; bottom: 4px; }
.coord.rank { left: 4px; top: 4px; }
.light .coord { color: #55705f; } .dark .coord { color: #e5eadf; }
aside { display: grid; gap: 13px; padding-top: 54px; }
.rule-card { position: relative; overflow: hidden; padding: 27px; border-radius: 14px; background: var(--green); color: white; }
.rule-card::after { content: "♞"; position: absolute; right: -8px; top: -24px; font-size: 110px; opacity: .04; transform: rotate(-10deg); }
.rule-card .eyebrow { color: #a8c3b5; }
.rule-card h2 { margin: 8px 0 13px; font: 700 27px/1.08 Georgia, serif; }
.rule-card > p:not(.eyebrow) { color: #c6d5cd; font-size: 12px; line-height: 1.5; }
.rule-card > p strong { color: var(--lime); }
.meter-label { display: flex; justify-content: space-between; margin-top: 22px; font-size: 9px; color: #a8bcb2; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.meter { height: 6px; margin-top: 7px; border-radius: 5px; overflow: hidden; background: #0e2c24; }
#meter-fill { height: 100%; width: 100%; background: var(--lime); transition: width .5s ease; }
.drop-count { margin-top: 12px; color: var(--lime); font-size: 10px; font-weight: 800; }
.status-card, .moves-card, .analysis-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.status-card { min-height: 74px; padding: 14px; display: flex; align-items: center; gap: 13px; }
.status-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e6ece6; font-size: 22px; }
.status-card.reward .status-icon { background: var(--lime); }
.status-card.gain .status-icon { color: #7b3328; background: #f3c7b9; }
.status-card span { color: #8b958f; letter-spacing: .1em; font-size: 8px; font-weight: 900; }
.status-card p { margin: 3px 0 0; font-size: 11px; line-height: 1.35; font-weight: 700; }
.moves-card { overflow: hidden; }
.game-actions { display: flex; gap: 8px; }
.game-actions button { flex: 1; padding: 9px 7px; border: 1px solid var(--line); border-radius: 8px; color: #5e6b64; background: var(--paper); cursor: pointer; font-size: 10px; font-weight: 800; }
.game-actions button:hover:not(:disabled) { color: var(--green); border-color: #9fbaa9; background: #edf3ed; }
.game-actions button:disabled { cursor: not-allowed; opacity: .45; }
.moves-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.moves-head h3 { margin: 0; font: 700 14px Georgia, serif; }
.moves-head span { padding: 4px 7px; color: #3b6957; background: #e2eee5; border-radius: 5px; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.moves-head span.out { color: #866a52; background: #eee6dd; }
.moves { max-height: 156px; padding: 12px 15px; overflow-y: auto; display: grid; grid-template-columns: 25px 1fr 1fr; row-gap: 8px; font-size: 11px; }
.move-num { color: #9aa19d; } .move { font-weight: 750; } .empty { grid-column: 1 / -1; color: #9aa19d; text-align: center; }
.hidden { display: none !important; }
.analysis-card { overflow: hidden; }
.analysis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px 8px; }
.analysis-head h3 { margin: 2px 0 0; font: 700 16px Georgia, serif; }
.analysis-head button, .final-position { border: 0; border-radius: 7px; background: var(--green); color: white; padding: 9px 11px; font-size: 10px; font-weight: 800; cursor: pointer; }
.analysis-head button:disabled { opacity: .58; cursor: wait; }
#analysis-help { margin: 0; padding: 0 15px 12px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.analysis-controls { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 12px; }
.analysis-controls button { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; background: #eef3ec; color: var(--green); cursor: pointer; font-size: 10px; font-weight: 800; }
.analysis-controls button:hover { background: #e1eadf; }
.analysis-controls button:disabled { opacity: .45; cursor: default; }
.eval-bar-wrap { display: flex; align-items: center; gap: 8px; margin: 0 15px 10px; }
.eval-bar-track { position: relative; height: 12px; flex: 1; overflow: hidden; border-radius: 4px; background: #253d32; box-shadow: inset 0 0 0 1px #1a2d25; }
.eval-bar-track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; background: #f1f0e8; }
.eval-bar-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: #f1f0e8; transition: width .25s ease; }
.eval-bar-label { min-width: 38px; color: var(--muted); font: 800 10px ui-monospace, SFMono-Regular, monospace; text-align: right; }
.analysis-results { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); }
.eval-chart { display: flex; align-items: center; gap: 2px; height: 54px; margin: 0 12px 10px; padding: 0 4px; border-top: 1px solid #e0e4dc; border-bottom: 1px solid #e0e4dc; background: linear-gradient(to bottom, transparent 49%, #cdd6cd 50%, transparent 51%); }
.eval-bar { flex: 1; min-width: 2px; border-radius: 2px; background: #6f9a7e; opacity: .8; }
.eval-bar.negative { background: #ba8171; }
.analysis-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.25fr) 44px; align-items: center; gap: 7px; padding: 9px 12px; border: 0; border-bottom: 1px solid #eceee8; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-size: 10px; }
.analysis-row:hover, .analysis-row.active { background: #eef2e9; }
.analysis-row.active { box-shadow: inset 3px 0 var(--green); }
.analysis-row .ply { color: #8e9892; font-weight: 800; }
.analysis-row .played, .analysis-row .best { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analysis-row .best { color: #49685b; }
.analysis-row .eval { justify-self: end; font-weight: 900; }
.analysis-row.match .played::after { content: " ✓"; color: #4c805e; }
.final-position { margin: 10px 12px 12px; width: calc(100% - 24px); background: #e5e9e3; color: var(--green); }
footer { margin-top: 14px; text-align: center; color: #89928d; font-size: 10px; }
footer a { color: inherit; }
.consent-banner { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: 390px; padding: 14px 15px; border: 1px solid #cfd5cc; border-radius: 11px; color: var(--ink); background: var(--paper); box-shadow: 0 12px 35px #17211d33; font-size: 11px; }
.consent-banner button { margin-left: 9px; border: 0; border-radius: 6px; padding: 7px 9px; color: var(--green); background: #e4ece5; cursor: pointer; font-size: 10px; font-weight: 800; }
.consent-banner button:first-of-type { color: white; background: var(--green); }
.settings-dialog { width: min(92vw, 520px); max-height: min(90vh, 720px); padding: 0; border: 1px solid #cfd5cc; border-radius: 16px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px #17211d55; overflow-y: auto; }
.settings-dialog::backdrop { background: #10241d77; backdrop-filter: blur(3px); }
.promotion-dialog { padding: 20px; border: 1px solid #cfd5cc; border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px #17211d55; }
.promotion-dialog h2 { margin: 0 0 14px; font: 700 18px Georgia, serif; }
.promotion-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.promotion-choices button { border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--green); background: #eef3ec; cursor: pointer; font-size: 12px; font-weight: 800; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 23px 17px; border-bottom: 1px solid var(--line); }
.settings-head h2 { margin: 2px 0 0; font: 700 22px Georgia, serif; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: #e9ece6; cursor: pointer; font-size: 23px; line-height: 1; }
.settings-section { padding: 18px 23px; border-bottom: 1px solid var(--line); background: #f5f5ef; }
.settings-section-title { margin: 0 0 11px; color: #7e8a83; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.preferences-title { padding: 17px 23px 0; margin-bottom: 0; }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.rule-grid label { color: #67736c; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.rule-grid input, .rule-grid select { display: block; width: 100%; height: 38px; margin-top: 5px; padding: 0 10px; border: 1px solid #cfd5ce; border-radius: 7px; color: var(--ink); background: white; font: 700 11px/1 ui-sans-serif, sans-serif; text-transform: none; letter-spacing: normal; }
.rule-grid input:focus, .rule-grid select:focus { outline: 2px solid #9fc5b4; border-color: var(--green); }
.rule-preview { margin: 13px 0 0; padding: 10px 11px; border-radius: 7px; color: var(--green); background: #e4ece5; font-size: 10px; font-weight: 750; line-height: 1.4; }
.setting-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 18px 23px; border-bottom: 1px solid #e7e9e3; }
.setting-row label strong, .setting-row label span { display: block; }
.setting-row label strong { font-size: 13px; }
.setting-row label span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.setting-row input { appearance: none; width: 42px; height: 24px; margin: 0; padding: 3px; border-radius: 20px; background: #cfd5cf; cursor: pointer; transition: background .2s; }
.setting-row input::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 4px #0003; transition: transform .2s; }
.setting-row input:checked { background: var(--green); }
.setting-row input:checked::before { transform: translateX(18px); }
.setting-row input:focus-visible { outline: 3px solid #9fc5b4; outline-offset: 2px; }
.setting-row input.volume-input { appearance: auto; width: 110px; height: auto; padding: 0; border-radius: 0; background: transparent; }
.theme-select { width: 130px; height: 34px; padding: 0 8px; border: 1px solid #cfd5ce; border-radius: 7px; color: var(--ink); background: white; font-size: 10px; font-weight: 750; }
.settings-actions { display: block; padding: 15px 23px 20px; }
.settings-note { margin: 0; color: #718078; font-size: 10px; line-height: 1.4; }
.legal-page { max-width: 760px; }
.legal-card { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); line-height: 1.65; }
.legal-card h2 { margin: 22px 0 5px; font: 700 20px Georgia, serif; }
.legal-card p { color: #5c6961; font-size: 13px; }
.stats-summary { margin: 0; color: #7d8981; font-size: 9px; line-height: 1.35; }
#apply-settings { border: 0; border-radius: 8px; padding: 11px 13px; color: white; background: var(--green); cursor: pointer; font-size: 10px; font-weight: 850; white-space: nowrap; }
#apply-settings:disabled { opacity: .6; cursor: wait; }
.settings-button-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.settings-button-row button { border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 10px; font-weight: 850; }
.secondary-action { color: var(--green); background: #e4ece5; }

@media (max-width: 820px) {
  .shell { padding: 20px 14px; }
  .game-layout { grid-template-columns: 1fr; gap: 18px; }
  aside { padding-top: 0; grid-template-columns: 1fr 1fr; }
  .rule-card { grid-row: span 2; }
}
@media (max-width: 560px) {
  .game-layout { display: block; }
  aside { margin-top: 18px; display: grid; grid-template-columns: 1fr; }
  .rule-card { grid-row: auto; }
  .square { font-size: 10vw; }
  header { margin-bottom: 10px; }
  .settings-button, .new-game { padding: 9px 10px; font-size: 11px; }
  .ad-slot-banner { min-height: 70px; }
  .rule-grid { grid-template-columns: 1fr; }
}