/* Number Baseball — a scorecard with a warm baseball-stadium accent. */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    --shadow-glow: 0 0 25px rgba(234, 88, 12, .42);
    --accent-blue: #ea580c;
}
.emoji-icon { font-size: 21px; }
.setting-hint, .rules-mini p { color: var(--text-secondary); font-size: .84rem; line-height: 1.6; }
.length-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.length-option { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; color: var(--text-secondary); background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); }
.length-option strong { font-family: var(--font-display); font-size: 1.55rem; color: var(--text-primary); line-height: 1; }
.length-option span { font-size: .72rem; font-weight: 700; }
.length-option.active { color: #fff; border-color: transparent; background: var(--color-primary-gradient); box-shadow: var(--shadow-glow); }
.length-option.active strong { color: #fff; }

.baseball-stage { min-height: 570px; display: flex; flex-direction: column; align-items: center; padding: 26px 24px; background: radial-gradient(ellipse at 50% 0%, rgba(234, 88, 12, .16), transparent 52%), radial-gradient(ellipse at 50% 100%, rgba(220, 38, 38, .1), transparent 55%); }
.attempt-summary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); font-size: .9rem; }
.attempt-summary strong { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-primary); }
.secret-slots { display: flex; gap: 5px; margin-left: 8px; }
.secret-slots i { width: 15px; height: 15px; border: 2px solid var(--accent-amber); border-radius: 50%; box-shadow: 0 0 9px color-mix(in srgb, var(--accent-amber) 50%, transparent); }
.guess-form { width: min(100%, 460px); display: flex; gap: 10px; margin-top: 24px; }
#guess-input { min-width: 0; flex: 1; height: 58px; padding: 0 14px; border-radius: var(--radius-md); border: 2px solid var(--color-border); background: var(--color-surface); color: var(--text-primary); text-align: center; font-family: var(--font-mono); font-size: 1.55rem; font-weight: 700; letter-spacing: .16em; outline: none; transition: var(--transition-fast); }
#guess-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 16%, transparent); }
#guess-input.invalid { border-color: var(--accent-rose); }
.guess-submit { min-width: 118px; }
.guess-feedback { min-height: 1.5em; margin: 8px 0 10px; text-align: center; color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.guess-feedback.error { color: var(--accent-rose); }
.number-pad { width: min(100%, 336px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.number-pad button { height: 42px; color: var(--text-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 700; font-size: 1rem; cursor: pointer; transition: var(--transition-fast); }
.number-pad button:hover, .number-pad button:focus-visible { transform: translateY(-1px); color: #fff; border-color: transparent; background: var(--color-primary-gradient); outline: none; }
.number-pad .pad-clear { color: var(--accent-rose); }.number-pad .pad-enter { color: var(--accent-emerald); }
.history-wrap { width: min(100%, 640px); margin: 4px 0 18px; }
.history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.history-head h2 { font-family: var(--font-display); font-size: 1rem; }.history-head span { color: var(--text-muted); font-size: .76rem; text-align: right; }
.guess-history { display: flex; flex-direction: column; gap: 7px; list-style: none; max-height: 260px; overflow: auto; padding-right: 3px; }
.history-row { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-surface) 78%, transparent); animation: recordIn .28s ease both; }
.history-turn { color: var(--text-muted); font-family: var(--font-mono); font-size: .76rem; }.history-guess { color: var(--text-primary); font-family: var(--font-mono); font-size: 1.1rem; font-weight: 800; letter-spacing: .13em; }
.score-chips { display: flex; gap: 5px; }.score-chip { min-width: 31px; padding: 3px 5px; border-radius: 999px; text-align: center; font: 700 .7rem var(--font-mono); }.score-chip.strike { color: #fff; background: #dc2626; }.score-chip.ball { color: #1e293b; background: #fbbf24; }.score-chip.out { color: #fff; background: #64748b; }
.candidate-count { color: var(--text-muted); font: 700 .7rem var(--font-mono); white-space: nowrap; }
@keyframes recordIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

.content-guide { margin: 0 0 28px; padding: 28px; }
.guide-intro { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-subtle); }.guide-intro > .material-symbols-outlined { padding: 10px; border-radius: 50%; color: #fff; background: var(--color-primary-gradient); box-shadow: var(--shadow-glow); }.guide-intro h2, .guide-grid h3, .faq h3 { font-family: var(--font-display); }.guide-intro h2 { font-size: 1.35rem; }.guide-intro p, .guide-grid p, .faq p { color: var(--text-secondary); line-height: 1.75; font-size: .9rem; }.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 22px 0; }.guide-grid section { padding: 17px; border-radius: var(--radius-md); background: var(--color-surface-hover); border: 1px solid var(--color-border-subtle); }.guide-grid h3 { margin-bottom: 7px; font-size: 1rem; color: var(--accent-blue); }.faq { padding-top: 18px; border-top: 1px solid var(--color-border-subtle); }.faq h3 { margin-bottom: 10px; }.faq details { padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle); }.faq summary { cursor: pointer; color: var(--text-primary); font-weight: 700; }.faq p { margin-top: 7px; }
.revealed-secret { margin: 14px auto 0; padding: 9px 14px; width: fit-content; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: 800 1.8rem var(--font-mono); letter-spacing: .18em; color: var(--accent-amber); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .baseball-stage { min-height: 0; padding: 22px 14px; }.guess-form { gap: 7px; }.guess-submit { min-width: 96px; }.guide-grid { grid-template-columns: 1fr; gap: 10px; }.content-guide { padding: 20px 16px; }.guide-intro { gap: 10px; }.guide-intro h2 { font-size: 1.15rem; }.history-wrap { margin: 0 0 14px; }.guess-history { max-height: 154px; }.history-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; }.history-row .candidate-count { grid-column: 2 / -1; white-space: normal; }.score-chips { gap: 3px; } }