:root {
  --navy: #07182f;
  --navy-soft: #142b4b;
  --gold: #b48a45;
  --orange: #e6a04d;
  --red: #d9222a;
  --ink: #101722;
  --muted: #66707c;
  --paper: #fff;
  --canvas: #f7f5f0;
  --line: #dcd9d2;
  --success: #17704a;
  --shadow: 0 18px 54px rgb(7 24 47 / 9%);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100vh; margin: 0; background: linear-gradient(#fff 0 360px, var(--canvas) 640px); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell { width: min(100%, 820px); min-height: 100vh; margin: auto; padding: 0 clamp(18px, 5vw, 48px); }
.site-header { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgb(7 24 47 / 10%); }
.brand { display: inline-flex; max-width: 54%; align-items: center; color: inherit; text-decoration: none; }
.brand-image { display: block; width: min(174px, 100%); height: auto; aspect-ratio: 278 / 140; object-fit: contain; }
.brand-logo { align-items: baseline; gap: 6px; color: var(--navy); font: 800 20px/1 Arial, sans-serif; letter-spacing: -.04em; }
.brand-logo:not([hidden]) { display: inline-flex; }
.brand-logo strong { color: var(--gold); font-size: 1.28em; }
.header-tag { color: var(--muted); font: 700 9px/1.2 Arial, sans-serif; letter-spacing: .17em; text-align: right; }

main { min-height: calc(100vh - 190px); padding: clamp(42px, 8vw, 70px) 0 64px; outline: none; }
.hero { max-width: 620px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 10px; color: var(--gold); font: 800 10px/1.4 Arial, sans-serif; letter-spacing: .19em; }
h1 { margin: 0; color: var(--navy); font-size: clamp(30px, 8vw, 52px); font-weight: 780; letter-spacing: -.055em; line-height: 1.12; }
h2 { margin: 0; color: var(--navy); font-size: 21px; letter-spacing: -.03em; }
.lead { max-width: 580px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.landing-panel { display: grid; grid-template-columns: 86px 1fr; gap: 24px; align-items: center; padding: clamp(24px, 6vw, 40px); }
.member-lookup-panel + .landing-panel { margin-top: 24px; }
.landing-panel p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.number-badge { display: grid; width: 80px; height: 80px; place-items: center; border: 2px solid var(--navy); border-radius: 50%; color: var(--gold); font: 800 38px/1 Arial, sans-serif; }
.form-panel { padding: clamp(22px, 6vw, 36px); }
.privacy-strip { margin-top: 24px; padding: 17px 20px; border-left: 3px solid var(--gold); background: rgb(255 255 255 / 65%); }
.privacy-strip strong { color: var(--navy); font-size: 12px; }
.privacy-strip p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

label { display: block; margin-bottom: 10px; color: var(--navy); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.input-wrap { position: relative; }
input { width: 100%; min-height: 62px; padding: 0 17px; border: 1px solid #b8bcc1; border-radius: 4px; outline: none; background: var(--paper); color: var(--navy); font-size: 19px; }
#member-id { padding-right: 82px; font: 500 clamp(19px, 6vw, 26px)/1 ui-monospace, Consolas, monospace; letter-spacing: .07em; }
input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgb(7 24 47 / 9%); }
input[aria-invalid="true"] { border-color: var(--red); }
.digit-count { position: absolute; top: 50%; right: 16px; color: var(--muted); font: 700 10px/1 Arial, sans-serif; transform: translateY(-50%); }
.field-help { margin: 8px 0 21px; color: var(--muted); font-size: 11px; }
.member-guidance { display: grid; gap: 5px; margin: 10px 0 22px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.member-guidance p { margin: 0; }

.primary-button { display: flex; min-height: 58px; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border: 1px solid var(--navy); border-radius: 4px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 750; letter-spacing: .03em; text-decoration: none; cursor: pointer; }
.primary-button span { color: var(--gold); font-size: 20px; }
.primary-button.compact { width: auto; min-height: 50px; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.primary-button:focus-visible, .secondary-button:focus-visible, .score-button:focus-visible, a:focus-visible { outline: 3px solid rgb(180 138 69 / 55%); outline-offset: 3px; }
.secondary-button { min-height: 46px; padding: 0 18px; border: 1px solid #abb1b8; border-radius: 4px; background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; cursor: pointer; }
.secondary-button:disabled { opacity: .4; cursor: default; }
.notice { margin-top: 18px; padding: 14px 16px; border: 1px solid #e4b8b8; border-radius: 4px; background: #fff5f5; color: #9d1820; font-size: 12px; line-height: 1.7; white-space: pre-line; }
.notice[hidden] { display: none; }
.notice.neutral { margin-bottom: 24px; border-color: #d9d4ca; background: #fffdf8; color: var(--muted); }
.record-policy-note { margin: -10px 0 24px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.record-policy-note.confirm-note { margin: -10px 0 16px; text-align: center; }
.member-number { display: flex; align-items: baseline; gap: 10px; margin: -18px 0 22px; color: var(--muted); }
.member-number span { font-size: 10px; font-weight: 700; }
.member-number strong { color: var(--navy); font: 800 15px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.member-number.compact { margin: -8px 0 16px; }
.practice-intro { margin-bottom: 14px; }
.practice-intro h1 { margin: 0; color: var(--navy); font: 800 clamp(25px, 6vw, 34px)/1.2 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: -.03em; }
.practice-lead { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.practice-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 7px; }
.practice-meta > p { margin: 0; color: var(--muted); font-size: 10px; }
.practice-meta .member-number { flex: 0 0 auto; margin: 0; }
.saved-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 18px 20px; border: 1px solid #acd2c0; border-radius: 6px; background: #f2fbf6; color: var(--success); }
.saved-banner > div { display: grid; gap: 4px; }
.saved-banner span { font-size: 12px; font-weight: 750; }
.saved-banner > div small { color: #3e6d59; font-size: 9px; line-height: 1.5; }
.saved-banner strong { color: var(--navy); font: 800 28px/1 Arial, sans-serif; }
.saved-banner strong small { font-size: 9px; }
.saved-banner em { margin-left: auto; color: var(--red); font-size: 11px; font-style: normal; font-weight: 800; }
.route-note { margin: 14px 2px 0; color: var(--muted); font: 10px/1.6 ui-monospace, Consolas, monospace; }
.text-link { color: var(--navy); font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.loading { min-height: 280px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }

.entry-banner { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; padding: 20px; border: 1px solid #d6cfbf; border-radius: 8px; background: #fffaf0; }
.entry-banner div { display: grid; gap: 5px; }
.entry-banner small { color: var(--gold); font-size: 10px; font-weight: 700; }
.entry-banner strong { color: var(--navy); font-size: 14px; }
.dashboard-actions { display: grid; min-width: 190px; gap: 8px; }
.compact-link { display: grid; place-items: center; text-decoration: none; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stats-grid article { min-width: 0; padding: 20px 15px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.stats-grid span { display: block; color: var(--muted); font-size: 10px; }
.stats-grid strong { display: block; margin-top: 8px; color: var(--navy); font: 750 clamp(22px, 5vw, 30px)/1 Arial, sans-serif; }
.stats-grid small { font-size: 10px; }
.history-section { margin-top: 42px; }
.section-heading { margin-bottom: 16px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.history-item { border-top: 1px solid var(--line); background: rgb(255 255 255 / 50%); }
.history-item:last-child { border-bottom: 1px solid var(--line); }
.history-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; color: var(--navy); cursor: pointer; list-style: none; }
.history-item summary::-webkit-details-marker { display: none; }
.history-item summary span { display: grid; gap: 4px; }
.history-item time { font-size: 12px; font-weight: 700; }
.history-item small { color: var(--muted); font-size: 9px; font-weight: 500; }
.history-item summary > strong { font: 760 24px/1 Arial, sans-serif; }
.history-detail { padding: 0 4px 18px; }
.history-detail p { margin: 0 0 12px; color: var(--muted); font-size: 10px; }
.empty-state { padding: 34px; border: 1px dashed #c8c5bd; text-align: center; }
.empty-state strong { color: var(--navy); font-size: 14px; }
.empty-state p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }

.rule-card { margin: 0; overflow: hidden; border: 1px solid #d6cfbf; border-radius: 8px; background: #111; box-shadow: 0 12px 32px rgb(7 24 47 / 12%); }
.rule-photo { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 949; object-fit: contain; }
.method-details { margin-top: 16px; overflow: hidden; border: 1px solid #d6cfbf; border-radius: 8px; background: #fff; }
.method-details summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; color: var(--navy); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.method-details summary::-webkit-details-marker { display: none; }
.method-details summary span { color: var(--gold); font-size: 20px; transition: transform .16s ease; }
.method-details[open] summary { border-bottom: 1px solid var(--line); }
.method-details[open] summary span { transform: rotate(180deg); }
.method-content { display: grid; gap: 16px; padding: 16px; }
.method-rules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.method-rules li { display: grid; grid-template-columns: 12px 1fr; gap: 9px; align-items: start; color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1.65; }
.method-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.method-dot.hit { background: #2452a4; }
.method-dot.double { background: #e5a32f; }
.method-dot.homerun { background: var(--red); }
.method-note { margin: 0; padding: 11px 12px; border-left: 3px solid #90969d; background: #f5f5f3; color: #4f5964; font-size: 11px; line-height: 1.7; }
.score-panel { padding: clamp(18px, 5vw, 28px); border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.current-ball { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; color: var(--navy); }
.current-ball > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.current-ball strong { font: 900 38px/1 Arial, sans-serif; }
.current-ball small { margin-left: 4px; font-size: 13px; }
.progress-row { display: flex; align-items: baseline; justify-content: space-between; color: var(--navy); }
.progress-row strong { font: 800 28px/1 Arial, sans-serif; }
.progress-row small, .progress-row span { color: var(--muted); font-size: 11px; }
.progress-row strong small { margin-left: 4px; }
.progress-row span b { color: var(--navy); font-size: 22px; }
.ball-progress { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 16px 0; }
.ball-progress span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid #d2d3d3; border-radius: 50%; color: #8b9095; font: 700 9px/1 Arial, sans-serif; }
.ball-progress .filled { border-color: transparent; color: #fff; }
.ball-progress .current { border: 2px solid var(--gold); color: var(--navy); }
.score-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.score-button { min-height: 88px; padding: 8px; border: 0; border-radius: 8px; color: #fff; font: 850 clamp(17px, 4.6vw, 23px)/1.15 Arial, sans-serif; cursor: pointer; box-shadow: 0 5px 12px rgb(7 24 47 / 14%); }
.score-button.out, .breakdown-grid .out { background: #60666e; }
.score-button.pt10, .breakdown-grid .pt10 { background: var(--navy-soft); }
.score-button.pt30, .breakdown-grid .pt30 { background: var(--orange); color: #342411; }
.score-button.pt100, .breakdown-grid .pt100 { background: var(--red); }
.current-result { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.current-result > .secondary-button { width: 100%; }
.score-0 { background: #72777d !important; }
.score-10 { background: var(--navy-soft) !important; }
.score-30 { background: var(--orange) !important; color: #30220e !important; }
.score-100 { background: var(--red) !important; }

.result-score-card { display: grid; justify-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.result-score-card > span { color: var(--muted); font-size: 11px; }
.result-score-card > strong { margin: 9px 0; color: var(--navy); font: 800 clamp(52px, 14vw, 80px)/1 Arial, sans-serif; }
.result-score-card strong small { font-size: 14px; }
.result-score-card > small { color: var(--muted); }
.result-score-card em { color: var(--red); font: 800 11px/1 Arial, sans-serif; letter-spacing: .1em; }
.result-score-card.is-best { border-color: var(--gold); }
.breakdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.breakdown-grid div { padding: 13px 8px; border-radius: 5px; color: #fff; text-align: center; }
.breakdown-grid span { display: block; font: 800 11px/1 Arial, sans-serif; }
.breakdown-grid strong { display: block; margin-top: 7px; font: 800 20px/1 Arial, sans-serif; }
.breakdown-grid small { font-size: 8px; }
.score-mini-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.score-mini-grid span { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border-radius: 3px; color: #fff; font: 700 8px/1 Arial, sans-serif; }
.score-mini-grid span small { display: none; }
.score-mini-grid.large { margin-bottom: 18px; }
.score-mini-grid.large span { position: relative; font-size: 10px; }
.score-mini-grid.large span small { position: absolute; top: 2px; left: 3px; display: block; color: rgb(255 255 255 / 72%); font-size: 6px; }
.confirmation-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }

.complete-card { display: grid; max-width: 520px; justify-items: center; margin: 30px auto 0; padding: 46px 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.complete-mark { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 24px; border-radius: 50%; background: var(--success); color: #fff; font-size: 25px; }
.complete-score { margin: 24px 0; color: var(--navy); font: 800 70px/1 Arial, sans-serif; }
.complete-score small { font-size: 13px; }
.best-message { margin: -12px 0 24px; color: var(--red); font-size: 13px; font-weight: 800; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.6; }
footer p { margin: 0; }
footer span { color: var(--gold); }

@media (max-width: 620px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .entry-banner { align-items: stretch; flex-direction: column; }
  .primary-button.compact { width: 100%; }
}

@media (max-width: 420px) {
  .page-shell { padding: 0 16px; }
  .site-header { min-height: 82px; }
  .header-tag { max-width: 98px; font-size: 8px; }
  main { padding-top: 38px; }
  .landing-panel { grid-template-columns: 58px 1fr; gap: 15px; padding: 21px 17px; }
  .landing-panel h2 { font-size: 19px; }
  .number-badge { width: 56px; height: 56px; font-size: 26px; }
  .score-panel { padding: 17px 14px; }
  .score-buttons { gap: 10px; }
  .score-button { min-height: 82px; font-size: 18px; }
  .method-content { padding: 12px; }
  .method-rules li { font-size: 11px; }
  .saved-banner { align-items: flex-start; flex-wrap: wrap; }
  .saved-banner em { margin-left: 0; }
  .confirmation-actions { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}