:root {
  color-scheme: light;
  --ink: #364c45; --muted: #72806c; --paper: #f5f2e9; --green: #466b56;
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  color: var(--ink); background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .5; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, canvas:focus-visible, summary:focus-visible { outline: 3px solid #c07443; outline-offset: 3px; }
.app { width: min(940px, calc(100% - 40px), calc((100dvh - 280px) * 1.66667)); min-width: min(600px, calc(100% - 40px)); margin: 0 auto 16px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.eyebrow { margin: 0; font: 650 9px/1.4 system-ui, sans-serif; letter-spacing: .15em; color: #7c8776; }
.eyebrow span { padding: 0 6px; color: #a5ac9d; }
h1 { margin: 7px 0 0; font: 600 29px/1.25 'Yu Mincho', 'Hiragino Mincho ProN', serif; letter-spacing: .03em; }
h1 span { color: #bd6842; } h1 i { font-style: normal; margin-left: -.15em; }
.help-button { min-height: 44px; padding: 8px 12px; border: 1px solid #d0d8cb; border-radius: 24px; color: var(--ink); background: transparent; font-size: 11px; white-space: nowrap; }
.help-button>span { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 4px; border: 1px solid #81917f; border-radius: 50%; font: 13px Georgia, serif; }
.stage-card { border: 1px solid #d5ded0; border-radius: 17px; overflow: hidden; background: #f9faf3; box-shadow: 0 9px 28px #334f3910; }
.stage-heading { min-height: 38px; padding: 10px 17px; display: flex; gap: 10px; justify-content: space-between; align-items: center; font-size: 10px; }
.stage-heading b { color: #859582; font: 600 10px ui-monospace, monospace; padding-right: 10px; }
.goal-note { color: #788872; }
.canvas-wrap { position: relative; background: #e9efdf; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 5/3; touch-action: none; cursor: crosshair; }
.stage-status { min-height: 42px; display: flex; gap: 9px; align-items: center; padding: 10px 17px; font-size: 11px; }
.stage-status p { flex: 1; margin: 0; line-height: 1.65; }
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #b98253; }
.status-dot.won { background: #578661; }
#catch-count { white-space: nowrap; color: #6f856e; font: 500 13px ui-monospace, monospace; }
.aim-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: center; padding: 8px 17px 0; border-top: 1px solid #e0e5d8; }
.aim-field { min-width: 0; display: block; color: #687865; font-size: 11px; }
.aim-field>span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aim-field small { font-size: 9px; color: #8c9783; }
input[type=range] { display: block; width: 100%; height: 40px; margin: 0; accent-color: #b97b54; cursor: pointer; }
input[type=range]:disabled { opacity: .45; cursor: default; }
.action-buttons { display: flex; gap: 8px; align-items: center; }
.primary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 10px 16px; border: 1px solid #41634e; border-radius: 8px; background: var(--green); color: #fffcef; font-size: 12px; font-weight: 600; box-shadow: 0 3px 0 #2c4e3f; transition: background .15s, transform .15s; }
.primary:hover:not(:disabled) { background: #3b604b; transform: translateY(-1px); }
.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.primary:disabled { box-shadow: none; }
.primary>span { font-size: 18px; font-weight: 400; }
.quiet-button { min-height: 44px; padding: 9px 12px; border: 1px solid #d5ddce; border-radius: 8px; color: #687865; background: transparent; font-size: 11px; white-space: nowrap; }
.quiet-button:hover:not(:disabled) { background: #edf1e5; }
.change-pair { border-color: transparent; padding-right: 0; }
.gesture-note { margin: 1px 17px 12px; color: #8a9480; font-size: 9px; line-height: 1.7; }
.result { position: absolute; width: min(310px, calc(100% - 32px)); top: 8%; left: 50%; transform: translateX(-50%); padding: 18px 22px 20px; border: 1px solid #cbd9c5; border-radius: 13px; background: #fffdf2f7; box-shadow: 0 9px 30px #27452e17; text-align: center; }
.result-kicker { margin: 0; font: 600 9px system-ui, sans-serif; letter-spacing: .16em; color: #a7865b; }
.result h2 { margin: 7px 0; font: 600 23px/1.4 'Yu Mincho', serif; }
.result>p:not(.result-kicker) { margin: 0 0 14px; font-size: 11px; line-height: 1.8; color: #72806b; }
.result .primary, dialog .primary { width: 100%; }
dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border: 1px solid #d1dbca; border-radius: 18px; background: #fffdf4; color: var(--ink); box-shadow: 0 24px 90px #28413533; }
dialog::backdrop { background: #36493950; backdrop-filter: blur(3px); }
dialog h2 { font: 600 26px/1.5 'Yu Mincho', serif; margin: 11px 0 14px; }
dialog p, dialog li { font-size: 12px; line-height: 1.95; }
dialog strong { font-weight: 600; color: #547a5d; }
dialog ol { margin: 15px 0; padding-left: 1.8em; }
dialog li { padding: 3px 0; }
.help-note { border-top: 1px solid #e3e5d9; padding-top: 12px; color: #7e8777; }
dialog details { margin: 12px 0 17px; font-size: 11px; color: #7c8774; }
dialog summary { cursor: pointer; padding: 10px 0; }
dialog details p { font-size: 11px; }
.dialog-art { height: 58px; display: flex; justify-content: center; align-items: center; margin-bottom: 16px; }
.dialog-art span { display: grid; place-items: center; width: var(--weight-1, 46px); height: var(--weight-1, 46px); border-radius: 50%; background: #eac09c; color: #925e41; border: 2px solid #c99267; font: 600 14px Georgia, serif; }
.dialog-art span:last-child { width: var(--weight-2, 32px); height: var(--weight-2, 32px); background: #c5dcda; color: #547b82; border-color: #92b7b9; transform: translateY(6px); }
.dialog-art i { width: 71px; height: 23px; margin: 0 -3px; border-top: 3px solid #c39a62; border-bottom: 3px solid #c39a62; border-radius: 50%; transform: rotate(5deg); }
@media (max-width: 680px) {
  .app { width: calc(100% - 24px); min-width: 0; margin-bottom: 16px; }
  .masthead { padding: 18px 2px; gap: 10px; }
  h1 { font-size: clamp(20px, 6.2vw, 25px); letter-spacing: .02em; white-space: nowrap; }
  .eyebrow { font-size: 8px; }.eyebrow span { padding: 0 3px; }
  .help-button { padding: 8px 10px; font-size: 10px; }
  .stage-heading { padding: 10px 12px; font-size: 9px; }.stage-heading b { padding-right: 5px; }.goal-note { font-size: 8px; }
  .stage-status { min-height: 50px; padding: 10px 12px; font-size: 10px; gap: 7px; }#catch-count { font-size: 12px; }
  .aim-controls { grid-template-columns: 1fr 1fr; gap: 4px 20px; padding: 12px 14px 0; }
  input[type=range] { height: 44px; }.aim-field small { font-size: 8px; }
  .action-buttons { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; }
  .primary, .quiet-button { min-height: 46px; padding: 9px 10px; font-size: 11px; }.primary { gap: 7px; }
  .change-pair { padding: 9px 1px; font-size: 10px; }
  .gesture-note { margin: 11px 14px 13px; font-size: 9px; }
  .result { position: static; transform: none; width: calc(100% - 24px); margin: 0 12px 12px; padding: 14px 16px; }
  .result h2 { font-size: 20px; }.result>p:not(.result-kicker) { font-size: 10px; margin-bottom: 10px; }
}
@media (max-width: 360px) {
  .help-button>span { display: none; }
  .stage-heading { padding: 9px 10px; }.aim-controls { gap: 4px 14px; padding: 11px 12px 0; }
  .aim-field small { font-size: 7px; }.quiet-button { font-size: 10px; }.change-pair { font-size: 9px; }
  dialog { padding: 22px 20px; }#help-title { font-size: 20px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }