:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #25323c; background: #e8eced; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible, .keypad-scroll:focus-visible { outline: 3px solid #0586d1; outline-offset: 3px; }
.wrap { max-width: 1480px; margin: auto; padding: 22px 28px 30px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; margin: 0 0 5px; color: #617178; font-weight: 700; }
h1 { font-size: 24px; letter-spacing: -.6px; margin: 0; }
a { color: #34596e; text-underline-offset: 3px; }
.page-header a { font-size: 13px; }
.scoreboard { container-type: inline-size; position: relative; width: min(100%, 890px); margin: 0 auto 24px; padding: 22px 20px 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 10px 22px; background: #236d9c; border: 7px solid #d6dad9; border-radius: 5px; box-shadow: 0 2px 0 #687d88, 0 12px 24px #243e4b25, inset 0 0 0 2px #87b3c1; color: #eef5f3; }
.scoreboard__brand { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 0 10px; background: #236d9c; font-size: 11px; font-weight: bold; letter-spacing: 1px; }
.scoreboard__team-name { background: #111d20; color: #ffb83a; text-align: center; padding: 7px 3px; align-self: start; margin-top: 6px; font-family: 'Courier New', monospace; font-weight: 700; font-size: clamp(12px, 2.7cqw, 24px); letter-spacing: 1px; text-shadow: 0 0 5px #fa9c3260; overflow: hidden; white-space: nowrap; }
.home-name { grid-area: 1 / 1; }.guest-name { grid-area: 1 / 3; }
.scoreboard__clock-box { grid-area: 1 / 2; background: #080f12; border: 3px solid #c4cfca; padding: 6px 8px; margin: -6px -14px 0; align-self: center; text-align: center; }
.scoreboard__score-box { background: #0b1114; padding: 8px 12px; width: fit-content; margin: -13px auto 0; }
.home-score { grid-area: 2 / 1; }.guest-score { grid-area: 2 / 3; }
.scoreboard__period { grid-area: 2 / 2; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: clamp(10px, 2.3cqw, 21px); font-weight: bold; }
.period-digits { padding: 6px; background: #0b1114; }
.led { display: inline-flex; align-items: center; justify-content: center; gap: .14em; height: 1em; font-size: 40px; color: #ffae29; line-height: 1; }
.clock-digits { font-size: clamp(28px, 8.6cqw, 76px); color: #9ee648; }
.score-digits { font-size: clamp(34px, 10cqw, 88px); color: #ff4637; }
.period-digits { font-size: clamp(28px, 6cqw, 52px); height: 1.2em; }
.led-digit { position: relative; display: inline-block; width: .53em; height: 1em; flex: 0 0 .53em; }
.segment { position: absolute; background: currentColor; opacity: .045; }
.segment.lit { opacity: 1; filter: drop-shadow(0 0 2px currentColor); background-image: radial-gradient(circle, #ffffff80 0 18%, transparent 30%); background-size: 3px 3px; }
.segment-a, .segment-d, .segment-g { height: .105em; width: .42em; left: .055em; clip-path: polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%); }
.segment-a { top: 0; }.segment-g { top: .448em; }.segment-d { bottom: 0; }
.segment-b, .segment-c, .segment-e, .segment-f { height: .425em; width: .105em; clip-path: polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%); }
.segment-b { right: 0; top: .055em; }.segment-c { right: 0; bottom: .055em; }.segment-e { left: 0; bottom: .055em; }.segment-f { left: 0; top: .055em; }
.led-colon { display: inline-block; position: relative; width: .12em; height: 1em; }
.led-colon::before, .led-colon::after { content: ''; position: absolute; width: .08em; height: .08em; background: currentColor; border-radius: 50%; left: .02em; box-shadow: 0 0 3px currentColor; }
.led-colon::before { top: 28%; }.led-colon::after { bottom: 28%; }
.penalty-heading { display: grid; grid-template-columns: .7fr 1.7fr; text-align: center; gap: 6px; font-size: clamp(9px, 2.35cqw, 21px); font-weight: bold; margin-top: 5px; }
.home-heading { grid-area: 3 / 1; }.guest-heading { grid-area: 3 / 3; }
.penalty-indicators { grid-area: 3 / 2; align-self: end; display: flex; align-items: center; justify-content: space-between; font-size: clamp(8px, 1.9cqw, 17px); font-weight: bold; }
.penalty-indicators span { color: #253846; }.penalty-indicators span.on { color: #ff493b; text-shadow: 0 0 6px #ff493b; }
.home-penalties { grid-area: 4 / 1; }.guest-penalties { grid-area: 4 / 3; }
.scoreboard__penalty-grid { display: grid; gap: 9px; min-width: 0; }
.scoreboard__penalty-row { display: grid; grid-template-columns: .7fr 1.7fr; gap: 6px; align-items: center; background: #0a1319; padding: 9px 6px; min-width: 0; }
.penalty-digits { font-size: clamp(15px, 3.8cqw, 34px); color: #ffc246; }
.scoreboard__shots { grid-area: 4 / 2; display: flex; flex-direction: column; justify-content: center; gap: 10px; text-align: center; font-size: clamp(8px, 1.25cqw, 11px); font-weight: bold; letter-spacing: 1px; }
.scoreboard__shots > div { display: flex; justify-content: space-around; }
.shot-digits { font-size: clamp(17px, 3.9cqw, 34px); color: #edb657; background: #0b151b; padding: 5px; height: 1.3em; }
.horn-lamp { position: absolute; right: 12px; top: -16px; background: #44342b; color: #e8ae8e; font-size: 9px; padding: 4px 8px; letter-spacing: 1px; border-radius: 2px; opacity: 0; }
.horn-lamp.active { opacity: 1; background: #bc321f; color: white; box-shadow: 0 0 15px #d74222; }
.console { background: #c4c8c9; border: 1px solid #9da6a9; border-bottom: 7px solid #59636a; border-radius: 9px 9px 12px 12px; padding: 17px 17px 10px; box-shadow: 0 8px 18px #1c324020, inset 0 1px #fff; }
.console-header { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 22px; align-items: center; padding: 0 12px 16px; }
.console-brand { font-weight: 900; font-size: 19px; letter-spacing: 1px; color: #203953; }
.console-brand small, .console-code small { display: block; font-size: 10px; letter-spacing: 1.5px; margin-top: 5px; }
.console-code { text-align: right; font-size: 14px; font-weight: bold; color: #374853; }
.lcd { background: #bed099; color: #25371f; border: 5px solid #3f4949; border-radius: 3px; box-shadow: inset 0 2px 4px #4e614b40; padding: 7px 12px; font-family: Consolas, 'Courier New', monospace; font-size: 14px; min-height: 64px; }
#clockStatus { padding-bottom: 4px; letter-spacing: 1px; font-weight: bold; }
#status { min-height: 17px; white-space: pre-line; }
.keypad-scroll { overflow-x: auto; padding: 5px 5px 9px; }
.keypad-hint { display: none; font-size: 11px; color: #394e59; margin: 4px 3px 10px; }
.layout-picker { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 12px; }
.layout-picker select { padding: 8px; border: 1px solid #687a84; border-radius: 4px; background: #f6f8f8; color: #25323c; }
.controller-options { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 14px; }
.controller-options .layout-picker { flex-wrap: wrap; margin: 0; }
.horn-picker { flex: 1 1 300px; max-width: 550px; min-width: 0; font-size: 12px; }
.horn-picker > label { display: block; font-weight: bold; margin-bottom: 5px; }
.horn-picker__controls { display: flex; gap: 8px; }
.horn-picker select { flex: 1; min-width: 0; width: 100%; }
.horn-picker select, .horn-picker button { min-height: 44px; padding: 8px; border: 1px solid #687a84; border-radius: 4px; background: #f6f8f8; color: #25323c; }
.horn-picker button { flex: 0 0 105px; cursor: pointer; background: #f3cc64; font-weight: bold; }
.horn-picker p { margin: 5px 0 0; line-height: 1.4; }
#hornStatus:empty { display: none; }
#hornStatus { color: #742513; font-weight: bold; }
.phone-only { display: none; }
#controllerLoading { padding: 14px; background: #fff1c9; border: 1px solid #c3a964; }
#key-horn { touch-action: none; -webkit-touch-callout: none; }
.grid { position: relative; display: grid; grid-template-columns: repeat(18, minmax(54px, 1fr)); grid-template-rows: 18px repeat(4, 61px); gap: 5px; min-width: 1070px; }
.key { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; min-width: 0; border: 2px solid #263437; border-bottom-width: 4px; border-radius: 6px; background: #eef0e9; color: #11191d; font-size: 11px; line-height: 1.12; font-weight: bold; white-space: pre-line; text-align: center; padding: 3px 1px; cursor: pointer; user-select: none; }
.key:hover { filter: brightness(1.07); }.key:active, .key.held { transform: translateY(1px); border-bottom-width: 2px; filter: brightness(.9); }
.key.home { background: #b6cbaa; }.key.guest { background: #deb4b0; }.key.numeric { font-size: 24px; }.key.arrow { font-size: 25px; background: #d6d9d2; }.key.menu { background: #263237; color: white; }.key.horn { background: #f3cc64; }.key.start { background: #82b88b; }.key.stop { background: #d48478; }.key:disabled { opacity: .5; cursor: default; }
.key[aria-pressed=true]:not(.horn) { box-shadow: inset 0 0 0 2px #507645; }
.blank-key { background: #c8cdce; border: 1px solid #adb5b7; border-radius: 5px; }
.team-frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 61px); gap: 5px; outline: 2px solid #35453f; outline-offset: 3px; border-radius: 4px; }
.label { text-align: center; font-weight: bold; font-size: 12px; }.label.home { color: #304a27; }.label.guest { color: #713a36; }
.console-footer { display: flex; justify-content: space-between; gap: 15px; font-size: 9px; letter-spacing: 1px; padding: 4px 3px 0; font-weight: bold; color: #41504e; }
.overlay { z-index: 3; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(4, 61px); gap: 5px; background: #c4c8c9; }
.overlay .key { font-size: 14px; }.overlay .key:first-child, .overlay .key:nth-child(2), .overlay .key:nth-child(9), .overlay .key:nth-child(10) { background: #9cb9cf; }
.hidden { display: none !important; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 15px 0; font-size: 12px; color: #52636c; }.toolbar label { display: flex; align-items: center; gap: 6px; }
kbd { font: inherit; font-family: Consolas, monospace; border: 1px solid #b7c4c9; border-radius: 3px; padding: 1px 4px; background: #f5f6f6; color: #3f515c; }
details { border-top: 1px solid #c5cfd2; padding: 14px 0; font-size: 13px; line-height: 1.6; }summary { cursor: pointer; font-weight: bold; width: fit-content; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }h2 { font-size: 14px; margin-bottom: 5px; }.guide-grid p { margin: 7px 0; }.reference { color: #62727b; font-size: 12px; }
.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: 700px) {
  .controller-options { gap: 12px; }
  .horn-picker { flex-basis: 100%; max-width: none; }
  .horn-picker select, .layout-picker select { font-size: 16px; }
  .wrap { padding: 16px 12px; }h1 { font-size: 21px; }.page-header a { font-size: 11px; }
  .scoreboard { padding: 19px 8px 10px; gap: 8px 10px; border-width: 4px; margin-top: 25px; }.scoreboard__clock-box { padding: 5px 4px; margin-left: -7px; margin-right: -7px; border-width: 2px; }.scoreboard__score-box { margin-top: -5px; padding: 5px 8px; }.scoreboard__team-name { letter-spacing: 0; font-size: clamp(10px, 3.3cqw, 14px); }.scoreboard__period { gap: 5px; }.scoreboard__penalty-row { padding: 6px 3px; gap: 3px; }.scoreboard__penalty-grid { gap: 6px; }
  .console { padding: 12px 8px 8px; }.console-header { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 2px 12px; }.console-brand { font-size: 15px; }.console-code { font-size: 12px; }.console-code small { font-size: 8px; }.lcd { grid-row: 2; grid-column: 1 / -1; font-size: 12px; }.console-footer { font-size: 8px; letter-spacing: 0; }.guide-grid { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 1180px) { .keypad-hint { display: block; } }

/* Reuse the same keys and game state; the full 4100 arrangement remains selectable. */
.console[data-layout="phone"] { --entry-row: 8; }
.console[data-layout="phone"].names-mode { --entry-row: 12; }
.console[data-layout="phone"] .keypad-scroll { overflow: visible; }
.console[data-layout="phone"] .grid { min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 54px; gap: 7px; }
.console[data-layout="phone"] .blank-key, .console[data-layout="phone"] .keypad-hint { display: none; }
.console[data-layout="phone"] .key { font-size: 11px; -webkit-user-select: none; }
.console[data-layout="phone"] .numeric { font-size: 24px; }
.console[data-layout="phone"] .label { align-self: end; padding-bottom: 5px; grid-row: 3 !important; }
.console[data-layout="phone"] .label.home { grid-column: 1 / span 3 !important; }
.console[data-layout="phone"] .label.guest { grid-column: 4 / span 3 !important; }
.console[data-layout="phone"] .team-frame { grid-row: 4 / span 3 !important; grid-template-rows: repeat(3, 54px); gap: 7px; }
.console[data-layout="phone"] .team-frame[data-team="HOME"] { grid-column: 1 / span 3 !important; }
.console[data-layout="phone"] .team-frame[data-team="GUEST"] { grid-column: 4 / span 3 !important; }
.console[data-layout="phone"] #key-start { grid-area: 1 / 1 / auto / span 2 !important; }
.console[data-layout="phone"] #key-stop { grid-area: 1 / 3 / auto / span 2 !important; }
.console[data-layout="phone"] #key-horn { grid-area: 1 / 5 / auto / span 2 !important; }
.console[data-layout="phone"] #key-clock { grid-area: 2 / 1 / auto / span 2 !important; }
.console[data-layout="phone"] #key-direction { grid-area: 2 / 3 / auto / span 2 !important; }
.console[data-layout="phone"] #key-auto { grid-area: 2 / 5 / auto / span 2 !important; }
.console[data-layout="phone"] .numeric:not(#key-0) { grid-row: calc(var(--entry-row) + var(--phone-row-offset)) !important; grid-column: var(--phone-column) !important; }
.console[data-layout="phone"] #key-clear { grid-area: calc(var(--entry-row) + 3) / 1 !important; }
.console[data-layout="phone"] #key-0 { grid-area: calc(var(--entry-row) + 3) / 2 !important; }
.console[data-layout="phone"] #key-enter { grid-area: calc(var(--entry-row) + 3) / 3 !important; }
.console[data-layout="phone"] #key-up { grid-area: var(--entry-row) / 5 !important; }
.console[data-layout="phone"] #key-left { grid-area: calc(var(--entry-row) + 1) / 4 !important; }
.console[data-layout="phone"] #key-menu { grid-area: calc(var(--entry-row) + 1) / 5 !important; }
.console[data-layout="phone"] #key-right { grid-area: calc(var(--entry-row) + 1) / 6 !important; }
.console[data-layout="phone"] #key-down { grid-area: calc(var(--entry-row) + 2) / 5 !important; }
.console[data-layout="phone"] #key-cancel { display: flex; grid-area: calc(var(--entry-row) + 3) / 4 / auto / span 3 !important; }
.console[data-layout="phone"] #key-enable { grid-area: 7 / 1 / auto / span 3 !important; }
.console[data-layout="phone"] #key-disable { grid-area: 7 / 4 / auto / span 3 !important; }
.console[data-layout="phone"] #key-period { grid-area: 12 / 1 / auto / span 3 !important; }
.console[data-layout="phone"] #key-period-plus { grid-area: 12 / 4 / auto / span 3 !important; }
.console[data-layout="phone"] .overlay { grid-area: 3 / 1 / span 8 / span 6 !important; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(48px, 1fr); }
.console[data-layout="phone"] .overlay .key { font-size: 10px; overflow-wrap: anywhere; }