/* Arcade lettering within the fort's existing gold and plum palette. */
#ui.menu.score-screen { background: rgba(16, 10, 22, .82); }
.mobile-menu.score-panel { width: min(100%, 620px); padding: 28px; background: #24182d; color: #fff4d8; }
.score-panel h2 { margin: 0 0 10px; font-family: "Fort Heading", Georgia, serif; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; color: #f5dfa7; }
.score-panel p { line-height: 1.5; }
.score-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.score-heading h2 { margin: 0; }
.score-heading > button { flex-shrink: 0; }
.score-panel .score-intro { margin: 0 0 22px; color: #e4d4ef; }
.score-panel button { min-height: 48px; }
.score-panel > button { margin-top: 12px; }
.score-entry { margin: 20px 0 24px; padding: 20px 0; border-top: 1px solid #8d7253; border-bottom: 1px solid #8d7253; }
.score-entry h3 { margin: 0 0 18px; font-family: "Fort Heading", Georgia, serif; font-size: 25px; color: #ffe27a; }
.score-form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.score-form label { display: grid; gap: 8px; font-size: 14px; color: #fff4d8; }
.score-initials { box-sizing: border-box; width: 164px; height: 62px; border: 2px solid #d7b56e; border-radius: 6px; padding: 9px 0 9px 12px; background: #160e20; color: #ffe27a; caret-color: #b8e783; font: 700 32px/1.1 "Courier New", monospace; letter-spacing: .35em; text-align: center; text-transform: uppercase; touch-action: manipulation; }
.score-initials::placeholder { color: #b6a48a; }
.score-initials[readonly] { border-color: #99855f; }
.score-form > button { min-height: 62px; flex: 1; font-weight: 700; }
.score-help { margin: 10px 0 0; font-size: 12px; color: #e4d4ef; }
.score-status { margin: 12px 0; font-size: 14px; color: #e4d4ef; }
.score-status.score-error { color: #ffc9a6; }
.score-board table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.score-board th { padding: 10px 12px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #f5dfa7; border-bottom: 2px solid #a88455; }
.score-board td { padding: 7px 12px; border-bottom: 1px solid #55405d; }
.score-board th:last-child, .score-board .score-round { text-align: right; }
.score-rank { width: 44px; color: #e4d4ef; font-size: 16px; }
.score-name { font: 700 24px/1.2 "Courier New", monospace; letter-spacing: .18em; }
.score-mode { display: block; margin-top: 3px; font-size: 12px; line-height: 1.25; color: #e4d4ef; }
.score-round { font-size: 25px; font-weight: 700; color: #ffe27a; }
.score-board tbody tr:first-child:not(:only-child) { background: #3c2c35; }
.score-board .score-yours { background: #30452e; }
.score-board .score-empty { padding: 28px 12px; line-height: 1.6; color: #e4d4ef; text-align: center; }
.score-board > button { width: 100%; margin: 4px 0 8px; }
.score-panel :is(button,input):focus-visible { outline: 3px solid #fff3a5; outline-offset: 3px; }
.score-panel ::selection { color: #160e20; background: #ffe27a; }
.score-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.title-utilities .title-scores { grid-column: 1 / -1; }
@media(max-width: 420px) {
  .mobile-menu.score-panel { padding: 20px 16px; }
  .score-heading { flex-wrap: wrap; }
  .score-form { gap: 12px; }
  .score-form label { width: 100%; }
  .score-initials { width: 100%; max-width: 200px; }
  .score-form > button { flex-basis: 100%; min-height: 48px; }
  .score-board th, .score-board td { padding-left: 8px; padding-right: 8px; }
}