:root { color-scheme: light; --ink: #182e25; --muted: #758076; --paper: #f5f6ef; --line: #dfe4d8; --lime: #c8f36a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; }
:focus-visible { outline: 3px solid #5a9633; outline-offset: 4px; }
.page { max-width: 1184px; margin: 0 auto; padding: 0 40px; }
.site-header { height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 28px; font-weight: 750; letter-spacing: -1.3px; }
.brand-mark { width: 38px; height: 38px; }
.brand-dot { color: #72a845; }
.header-note { font-size: 12px; color: #6f7b70; display: flex; align-items: center; gap: 9px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #76a855; }
.game-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; padding: 52px 0 44px; align-items: start; }
.intro { padding-top: 13px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #7b8678; font-size: 11px; letter-spacing: 2px; }
.tiny-line { width: 24px; height: 2px; background: #91a77a; }
h1 { font-size: clamp(38px, 4.3vw, 57px); font-weight: 800; line-height: 1.32; letter-spacing: -2px; margin: 25px 0 17px; }
.title-accent { position: relative; display: inline-block; z-index: 0; }
.title-accent::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -5px; height: 15px; bottom: 6px; background: var(--lime); transform: rotate(-3deg); border-radius: 2px; }
.intro-text { color: #76806f; font-size: 14px; line-height: 1.9; margin: 0; }
.game-name { display: flex; align-items: center; gap: 13px; margin-top: 27px; font-size: 13px; font-weight: 600; }
.game-name-en { font-size: 10px; font-weight: 500; letter-spacing: 3px; color: #7f8a76; border-left: 1px solid #cdd4c2; padding-left: 13px; }
.scorecards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 31px; }
.scorecard { display: flex; flex-direction: column; gap: 9px; padding: 20px 21px 17px; border: 1px solid var(--line); border-radius: 17px; background: #fafbf6; }
.scorecard-current { background: #e9efdf; border-color: #e0e8d2; }
.score-label { display: flex; align-items: center; gap: 5px; color: #61715b; font-size: 12px; }
.scorecard strong { font-size: 38px; line-height: 1.2; font-weight: 650; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.score-caption { color: #87917e; font-size: 10px; }
.how-to { border-top: 1px solid var(--line); padding-top: 20px; }
.how-to h2 { font-size: 12px; font-weight: 600; margin: 0 0 18px; }
.how-row { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 15px; }
.how-number { color: #8a9b7b; font-size: 10px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.how-row p { margin: 0; color: #7e8977; font-size: 11px; line-height: 1.9; }
.how-row strong { font-size: 12px; font-weight: 500; color: #42553e; }
.keyboard-hint { display: flex; align-items: center; gap: 9px; color: #87917e; font-size: 10px; margin-top: 17px; }
kbd { border: 1px solid #d2d9c8; border-bottom-width: 2px; border-radius: 4px; background: #fbfcf7; padding: 3px 13px; font: inherit; color: #61715b; }
.game-panel { background: #fff; padding: 18px; border: 1px solid #e1e6d9; border-radius: 24px; box-shadow: 0 15px 50px -30px #526a3e4d; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 14px; min-height: 30px; }
.state-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #708266; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: #90ad72; }
.state-label[data-status="running"] .state-dot { background: #6ca646; box-shadow: 0 0 0 3px #6ca64615; }
.state-label[data-status="over"] .state-dot { background: #e48d6d; }
.speed-control { display: flex; align-items: center; gap: 7px; color: #84917b; font-size: 11px; }
select { background: #f3f6ed; color: #52684b; border: 1px solid #e4eadc; border-radius: 7px; padding: 5px 8px; cursor: pointer; font-size: 11px; }
.board-wrap { position: relative; aspect-ratio: 1; background: #182e25; border-radius: 15px; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
canvas:focus-visible { outline-offset: -5px; outline-color: var(--lime); border-radius: 15px; }
.board-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #12281f7d; padding: 20px; }
.board-overlay[hidden] { display: none; }
.overlay-card { width: min(100%, 310px); text-align: center; color: #f2f7e9; padding: 24px 18px; background: #1b342bf2; border: 1px solid #b4d68c25; border-radius: 21px; box-shadow: 0 15px 40px #0002; }
.overlay-symbol { display: grid; place-items: center; width: 43px; height: 43px; background: #c8f36a16; color: var(--lime); border: 1px solid #c8f36a30; border-radius: 13px; font-size: 24px; margin: 0 auto 17px; }
.overlay-eyebrow { font-size: 8px; letter-spacing: 2.2px; color: #9ab18c; margin: 0 0 12px; }
.overlay-card h2 { margin: 0 0 10px; font-size: 22px; font-weight: 650; letter-spacing: -.6px; }
.overlay-card > p:not(.overlay-eyebrow) { font-size: 11px; color: #a7b9a2; line-height: 1.8; margin: 0 0 23px; }
.button { border: 0; display: inline-flex; justify-content: center; align-items: center; gap: 9px; border-radius: 9px; font-size: 12px; font-weight: 600; transition: background .15s, transform .15s; min-height: 37px; }
.button:not(:disabled):active, .direction:active { transform: translateY(1px); }
.button-lime { background: var(--lime); color: #24361e; min-height: 44px; padding: 0 27px; width: 100%; }
.button-lime:hover { background: #dafb95; }
.button-lime > span { margin-left: auto; font-size: 17px; font-weight: 400; }
.overlay-hint { display: block; color: #8caa85; font-size: 9px; margin-top: 13px; }
.panel-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 1px 3px; }
.board-caption { font-size: 10px; color: #7c8973; display: inline-flex; align-items: center; gap: 7px; }
.food-dot { width: 6px; height: 6px; border-radius: 50%; background: #ed9978; }
.action-buttons { display: flex; gap: 6px; }
.button-soft { background: #f0f4e9; color: #54694a; padding: 0 12px; font-size: 11px; min-height: 34px; }
.button-soft:not(:disabled):hover { background: #e4ecd7; }
.button-soft > span:first-child { font-size: 16px; font-weight: 400; }
.touch-controls { display: flex; align-items: center; justify-content: space-between; margin: 15px 1px 0; border-top: 1px solid #edf0e7; padding-top: 15px; }
.touch-controls p { color: #66785c; font-size: 11px; font-weight: 500; margin: 0; }
.touch-controls p span { display: block; color: #96a08d; font-size: 9px; font-weight: 400; margin-top: 6px; }
.dpad { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 31px); gap: 4px; }
.direction { background: #f1f5eb; color: #547044; border: 1px solid #e1e8d8; border-radius: 7px; font-size: 18px; line-height: 1; padding: 0; }
.direction:hover { background: #e3edda; }
.direction-up { grid-area: 1 / 2; }
.direction-left { grid-area: 2 / 1; }
.direction-down { grid-area: 2 / 2; }
.direction-right { grid-area: 2 / 3; }
.dpad-center { grid-area: 1 / 1; place-self: center; color: #a3b590; font-size: 13px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 23px 0 30px; border-top: 1px solid var(--line); color: #93a087; font-size: 10px; }
.site-footer a { text-decoration: none; color: #74866a; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a span { margin-left: 5px; }
.no-script { color: #ac4a32; font-size: 13px; }
@media (min-width: 1200px) { .game-layout { gap: 88px; } }
@media (max-width: 850px) { .page { padding: 0 26px; } .game-layout { gap: 30px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } h1 { font-size: 38px; } .scorecard { padding: 16px 12px; } .scorecard strong { font-size: 31px; } .game-panel { padding: 14px; } .board-caption { font-size: 9px; } .button-soft { padding: 0 9px; } }
@media (max-width: 680px) {
  .page { max-width: 500px; padding: 0 18px; }
  .site-header { height: 76px; }
  .brand { font-size: 24px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; }
  .header-note { font-size: 9px; gap: 5px; }
  .game-layout { display: flex; flex-direction: column; gap: 20px; padding: 27px 0; }
  .intro { width: 100%; padding: 0; }
  .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  h1 { font-size: 36px; line-height: 1.25; margin: 17px 0 0; letter-spacing: -1.3px; }
  h1 br { display: none; }
  .title-accent::after { bottom: 3px; height: 11px; }
  .intro-text { font-size: 12px; margin: 12px 0 0; }
  .intro-text br { display: none; }
  .game-name, .how-to { display: none; }
  .scorecards { gap: 10px; margin: 21px 0 0; }
  .scorecard { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; border-radius: 12px; padding: 13px 14px; }
  .score-label { font-size: 10px; }
  .scorecard strong { font-size: 28px; grid-column: 2; grid-row: 1 / 3; }
  .score-caption { font-size: 8px; }
  .game-panel { width: 100%; padding: 12px; border-radius: 19px; }
  .panel-toolbar { margin-bottom: 10px; }
  .board-wrap { border-radius: 11px; }
  .overlay-card { width: min(100%, 270px); padding: 19px 17px; border-radius: 17px; }
  .overlay-symbol { margin-bottom: 12px; width: 36px; height: 36px; font-size: 22px; }
  .overlay-eyebrow { font-size: 7px; margin-bottom: 9px; }
  .overlay-card h2 { font-size: 20px; }
  .overlay-card > p:not(.overlay-eyebrow) { margin-bottom: 17px; font-size: 10px; }
  .overlay-hint { font-size: 8px; margin-top: 10px; }
  .panel-actions { padding-top: 12px; }
  .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 5px; }
  .direction { font-size: 23px; }
  .touch-controls { margin-top: 12px; padding-top: 12px; }
  .touch-controls p { font-size: 12px; }
  .touch-controls p span { font-size: 9px; }
  .site-footer { font-size: 9px; padding: 20px 0; }
}
@media (max-width: 360px) { .page { padding: 0 12px; } h1 { font-size: 31px; } .header-note { font-size: 8px; } .board-overlay { padding: 14px; } .overlay-card { padding: 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }