:root { color-scheme: light; --paper: #f3efe5; --ink: #34423e; --muted: #778278; --line: #d7d8c9; --green: #547d6b; --red: #c76a53; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background-image: radial-gradient(#b4b4a521 0.65px, transparent 0.65px); background-size: 6px 6px; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .15s; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, canvas:focus-visible { outline: 3px solid #a86736; outline-offset: 4px; }
button:active:not(:disabled) { transform: translateY(1px); }
[hidden] { display: none !important; }
.app { width: min(780px, calc(100% - 36px), calc((100svh - 255px) * 1.2857)); min-width: min(100% - 36px, 340px); margin: 0 auto; padding: 23px 0 12px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.eyebrow { margin: 0 0 6px; color: #718075; font: 600 9px/1.4 ui-monospace, monospace; letter-spacing: .13em; }.eyebrow span { padding: 0 5px; color: #b5b6a6; }
h1 { margin: 0; font: 650 clamp(25px, 4.4vw, 36px)/1.1 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .06em; white-space: nowrap; }h1 span { color: var(--green); }h1 i { color: var(--red); font-style: normal; }
.header-actions { display: flex; gap: 7px; }.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #c6caba; border-radius: 50%; background: #f8f6ee; color: #586f60; font: 500 20px/1 Georgia, serif; }.icon-button:hover:not(:disabled) { background: #e4e9db; }
.game-card { overflow: hidden; border: 1px solid #cdd0be; border-radius: 18px; background: #faf8f0; box-shadow: 0 12px 34px #59604b0a; }
.scoreboard { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; padding: 13px 23px 12px; border-bottom: 1px solid #d7d6c4; }
.field-label { display: block; font-size: 10px; color: #73806f; letter-spacing: .06em; }
.score-field output { font: 500 36px/1.05 Georgia, serif; color: #466c57; font-variant-numeric: tabular-nums; }.carry-field output { font: 500 24px/1.3 Georgia, serif; color: #546257; font-variant-numeric: tabular-nums; }.scoreboard small { margin-left: 5px; font-size: 10px; color: #6c776b; }
.time-field { position: relative; display: flex; align-items: center; gap: 9px; }.time-field svg { width: 44px; height: 44px; transform: rotate(-90deg); }.time-field circle { fill: none; stroke-width: 2.5; }.clock-track { stroke: #e0e3d6; }.clock-progress { stroke: #8caa7f; stroke-dasharray: 144.52; stroke-dashoffset: 0; stroke-linecap: round; }.time-field output { font: 500 23px/1.2 Georgia, serif; font-variant-numeric: tabular-nums; }.time-field.urgent output { color: #b35643; }.time-field.urgent .clock-progress { stroke: #c76a53; }
.board-wrap { position: relative; background: #edf0e6; aspect-ratio: 720 / 560; }canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab; }canvas:active { cursor: grabbing; }
.collector-labels { position: absolute; inset: 12px 16px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; pointer-events: none; text-align: center; }
.collector-label { padding: 6px 3px 7px; border: 1px solid #d3dcca; border-radius: 9px; background: #f8faf2e8; }
.collector-label p { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 3px; color: #697c69; font-size: 11px; line-height: 1.4; }
.collector-label i { width: 6px; height: 6px; border-radius: 50%; background: #67917b; }#collector-1 i { background: #6a8fa8; }#collector-2 i { background: #bd8960; }
.collector-label > div { line-height: 1; }.collector-label output { color: #46654e; font: 500 28px/1.1 Georgia, serif; font-variant-numeric: tabular-nums; }.collector-label small { font-size: 11px; color: #7a8873; }.collector-label > span { display: block; margin-top: 3px; color: #79866d; font-size: 10px; line-height: 1.4; }
.collector-label[data-balance="close"] { border-color: #87af7d; background: #e5f0dced; }.collector-label[data-balance="close"] > span { color: #4e7b4d; font-weight: 650; }.collector-label[data-balance="over"] > span { color: #b16b42; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #ece5d28f; backdrop-filter: blur(3px); }
.intro-card, .result-card { width: min(354px, 100%); padding: 24px 30px 17px; border: 1px solid #fefcf0; border-radius: 15px; text-align: center; background: #faf8eeed; box-shadow: 0 15px 50px #6e674e14; }
.intro-kicker { margin: 11px 0; font-size: 11px; letter-spacing: .13em; color: #7c8974; }h2 { margin: 0; font: 600 25px/1.6 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .06em; }
.intro-copy { margin: 13px 0 19px; font-size: 12px; line-height: 1.9; color: #677565; }
.primary { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 12px 19px; border: 1px solid #496c59; border-radius: 8px; color: #fffaf0; background: #547d6b; font-weight: 650; font-size: 14px; }.primary:hover { background: #426953; }.primary span { font: 400 21px/1 Georgia, serif; }
.intro-hint { margin: 11px 0 0; font-size: 10px; color: #88917e; }
.magnet-mark { position: relative; width: 48px; height: 43px; margin: 0 auto 13px; border: 11px solid #c76a53; border-top: 0; border-radius: 0 0 26px 26px; transform: rotate(-14deg); }.magnet-mark i, .magnet-mark b { position: absolute; top: -4px; width: 11px; height: 14px; border: 1px solid #a3aca1; background: #d4dad0; }.magnet-mark i { left: -11px; }.magnet-mark b { right: -11px; }
.status-row { display: flex; align-items: center; gap: 8px; padding: 12px 20px 4px; }.status-light { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #92ab7c; }.status-row p { flex: 1; margin: 0; font-size: 11px; line-height: 1.6; color: #66765f; }
.status-row[data-active="true"] .status-light { background: #cd8760; }
.control-note { margin: 0; padding: 4px 12px 13px; text-align: center; color: #8a927f; font-size: 10px; line-height: 1.6; }.control-note span { padding: 0 5px; color: #b7bcaa; }.page-note { text-align: center; margin: 12px 0 0; color: #99a08e; font: 500 10px/1.4 "Yu Mincho", serif; letter-spacing: .12em; }
.result { display: grid; place-items: center; padding: 15px; border-top: 1px solid #d8dccb; background: #f0f2e6; }.result-card { padding-top: 18px; width: min(430px, 100%); background: none; border: 0; box-shadow: none; }.result-card h2 { font-size: 23px; }.result-score { margin: 4px 0 7px; color: #4e735a; }.result-score output { font: 400 65px/1.1 Georgia, serif; }.result-score span { margin-left: 9px; font-size: 13px; }#result-message { margin: 9px 0 14px; color: #7b826f; font-size: 11px; line-height: 1.7; }
.result-details { display: grid; gap: 7px; padding-top: 11px; border-top: 1px solid #dfe2d3; margin-bottom: 17px; font-size: 10px; color: #7c8874; }.result-details span { display: flex; justify-content: space-between; }.result-details b { font-size: 12px; font-weight: 600; color: #526752; }
dialog { width: min(430px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 28px; overflow-y: auto; border: 1px solid #c5cbb9; border-radius: 16px; background: #faf8ef; color: var(--ink); box-shadow: 0 20px 100px #313d3829; }dialog::backdrop { background: #2a3b365c; backdrop-filter: blur(3px); }
.dialog-kicker { margin: 0 0 8px; font: 600 9px/1.4 monospace; letter-spacing: .16em; color: #859579; }dialog h2 { font-size: 23px; }.help-steps { display: grid; gap: 19px; margin: 24px 0; padding-left: 23px; }.help-steps li { padding-left: 3px; color: #7f9372; font-size: 14px; }.help-steps b { display: block; margin-bottom: 6px; color: #46634d; font-size: 14px; }.help-steps span { display: block; color: #727d6d; font-size: 12px; line-height: 1.9; }.keyboard-note { padding: 12px; margin: 0 0 22px; border-radius: 7px; background: #edf0e3; color: #77836f; font-size: 11px; line-height: 1.8; }#pause-dialog p:not(.dialog-kicker) { font-size: 13px; color: #7c8575; margin-bottom: 25px; }
@media (max-width: 540px) {
  .app { width: calc(100% - 28px); min-width: 0; padding-top: 22px; }.masthead { margin-bottom: 18px; }.eyebrow { font-size: 8px; letter-spacing: .07em; }h1 { font-size: 28px; }.header-actions { gap: 5px; }.icon-button { width: 44px; height: 44px; }
  .scoreboard { padding: 12px 14px; gap: 8px; }.score-field output { font-size: 31px; }.field-label { font-size: 9px; }.carry-field output { font-size: 23px; }.time-field { gap: 0; }.time-field svg { display: none; }.time-field output { font-size: 24px; }
  .intro-card { padding: 16px 20px 13px; }.magnet-mark { display: none; }.intro-kicker { margin: 1px 0 7px; font-size: 10px; }h2 { font-size: 21px; line-height: 1.45; }.intro-copy { font-size: 11px; line-height: 1.8; margin: 10px 0 13px; }.intro-hint { margin-top: 9px; }.overlay { padding: 14px; }
  .result-card { padding: 15px 20px; }.result-card h2 { font-size: 21px; }.result-score output { font-size: 46px; }.result-score { margin: 4px 0; }#result-message { margin: 7px 0 9px; }.result-details { margin-bottom: 12px; padding-top: 8px; gap: 4px; }
  .status-row { padding: 12px 14px 6px; gap: 6px; }.status-row p { font-size: 10px; }.control-note { font-size: 9px; padding: 3px 6px 13px; }.control-note span { padding: 0 2px; }
  .collector-labels { inset: 8px 9px auto; gap: 7px; }.collector-label { padding: 4px 1px 5px; border-radius: 6px; }.collector-label p { font-size: 9px; gap: 4px; margin-bottom: 1px; }.collector-label output { font-size: 21px; }.collector-label small { font-size: 9px; }.collector-label > span { font-size: 9px; margin-top: 1px; }
  .result { padding: 6px; }.result-card { width: 100%; }
  dialog { padding: 23px; }dialog h2 { font-size: 21px; letter-spacing: .025em; }
}
@media (max-width: 350px) { h1 { font-size: 24px; }.eyebrow { font-size: 7px; }.intro-copy { margin: 7px 0 9px; }.intro-hint { display: none; }.intro-card { padding: 12px 15px; }.intro-card h2 { font-size: 19px; }.intro-kicker { margin-bottom: 5px; }.overlay { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }