/* Shared site header and rankings. No changes to the game artwork. */
body .brand-copy,
.arcade-index:not(.game-is-open) .brand-copy {
  padding: 0;
  border: 0;
  gap: 4px;
  line-height: 1.2;
  letter-spacing: 0;
}
body .brand-copy strong,
.arcade-index:not(.game-is-open) .brand-copy strong {
  font: 600 18px/1.25 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.025em;
  text-shadow: none;
}
body .brand-copy small,
.arcade-index:not(.game-is-open) .brand-copy small {
  display: block;
  color: #8c99a8;
  font: 400 13px/1.3 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}
.header-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.ranking-open {
  padding: 8px 2px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #e9edf3;
  font: 500 15px/1.3 "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}
.ranking-open:hover { color: #ffd52c; border-bottom-color: currentColor; }
.ranking-open:focus-visible,
.ranking-dialog button:focus-visible,
.score-entry button:focus-visible { outline: 2px solid #ffd52c; outline-offset: 4px; }

.ranking-dialog {
  position: fixed;
  inset: 0;
  width: min(640px, calc(100vw - 40px));
  height: min(690px, calc(100dvh - 40px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid #2b3a4d;
  border-top: 4px solid #ffd52c;
  border-radius: 12px;
  background: #0a1523;
  color: #eef1f5;
  box-shadow: 0 28px 90px #000b;
  font: 400 16px/1.5 "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: contain;
}
.ranking-dialog:not([open]) { display: none; }
.ranking-dialog[open] { display: flex; flex-direction: column; }
.ranking-dialog::backdrop { background: #01050bd9; backdrop-filter: blur(3px); }
.ranking-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; flex-shrink: 0; }
.ranking-kicker { display: block; margin-bottom: 2px; color: #ffd52c; font: 900 12px/1 Arial, sans-serif; letter-spacing: .16em; }
.ranking-heading h2 { margin: 0; font: italic 900 42px/.98 Impact, "Arial Black", sans-serif; letter-spacing: .015em; }
.ranking-close { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 5px; background: #ffffff0a; color: #aebac9; font: 400 28px/1 Arial, sans-serif; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ranking-close:hover { color: #fff; background: #ffffff12; }
.ranking-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 28px 14px; padding: 5px; background: #050d18; border-radius: 7px; flex-shrink: 0; }
.ranking-tabs button { min-height: 48px; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; color: #8999ac; font: 800 14px/1.3 Arial, sans-serif; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ranking-tabs button[aria-selected="true"] { background: #ffd52c; color: #07111d; }
.ranking-tabs button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }
.ranking-panel { min-height: 0; overflow-y: auto; flex: 1; padding: 0 28px 24px; scrollbar-color: #425268 transparent; }
.ranking-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.ranking-table th { padding: 11px 0 10px; border-bottom: 1px solid #2a394b; color: #75879c; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-align: left; }
.ranking-table th:first-child { width: 42px; }
.ranking-table th:last-child { width: 115px; text-align: right; }
.ranking-table td { padding: 14px 0; border-bottom: 1px solid #ffffff0a; font-size: 15px; }
.ranking-table td:first-child { color: #64788f; font-size: 12px; font-weight: 800; }
.ranking-table tr:nth-child(-n+3) td:first-child { color: #ffd52c; }
.ranking-table td:nth-child(2) { padding-right: 14px; overflow-wrap: anywhere; }
.ranking-table td:last-child { color: #fff; text-align: right; font-size: 16px; font-weight: 800; }
.ranking-message { margin: 28px 0 12px; color: #a4b1c1; font-size: 15px; text-align: center; }
.ranking-retry { min-height: 44px; padding: 8px 0; border: 0; color: #fff; background: transparent; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.score-entry { margin: 0 0 20px; padding: 15px; border-radius: 8px; background: #050f1d; box-shadow: inset 0 0 0 1px #25364a; text-align: left; font: 400 14px/1.4 "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.score-entry label { display: block; margin-bottom: 10px; color: #ffd52c; font: 900 11px/1.25 Arial, sans-serif; letter-spacing: .105em; text-transform: uppercase; }
.score-entry-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.score-entry input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #41536a;
  border-radius: 4px;
  background: #020a14;
  color: #fff;
  font: 400 16px/1.4 "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}
.score-entry input::placeholder { color: #72849a; opacity: 1; }
.score-entry input:focus { border-color: #ffd52c; outline: 0; box-shadow: 0 0 0 2px #ffd52c30; }
.score-entry input[aria-invalid="true"] { border-color: #ff9696; }
.score-entry button { flex-shrink: 0; min-width: 104px; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 4px; background: #ffd52c; color: #06101c; font: 900 12px/1.3 Arial, sans-serif; letter-spacing: .09em; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.score-entry button:hover:not(:disabled) { background: #ffe263; }
.score-entry button:disabled { opacity: .5; cursor: default; }
.score-entry .score-entry-status { margin: 10px 0 0; color: #d5e2f0; font-size: 13px; line-height: 1.4; }
.score-entry-status:empty { display: none; }
.score-entry-status.is-error { color: #ffb4b4; }
.score-entry.is-saved { padding: 0; background: transparent; box-shadow: none; }
.score-entry.is-saved label,
.score-entry.is-saved .score-entry-fields { display: none; }
.score-entry.is-saved .score-entry-status { margin: 0; padding: 13px 15px; border-left: 3px solid #ffd52c; border-radius: 4px; background: #071626; color: #f1f5f9; font-size: 13px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
#pawnOver { overflow-y: auto; }
#pawnOver .pawn-over-card { margin-block: auto; }
#gameView .result-card .result-grid { margin-bottom: 20px; }
body.ranking-is-open { overflow: hidden; }

@media (max-width: 600px) {
  body .brand-copy strong,
  .arcade-index:not(.game-is-open) .brand-copy strong { font-size: 17px; }
  .header-actions { gap: 10px; }
  .ranking-open { font-size: 14px; }
  .arcade-index.game-is-open .topbar,
  .pawn-page .topbar { gap: 8px; }
  .arcade-index.game-is-open .topbar-actions { gap: 4px; }
  .arcade-index.game-is-open .icon-button { padding-inline: 9px; font-size: 11px; }
  .ranking-dialog { width: calc(100vw - 20px); height: min(720px, calc(100dvh - 20px)); border-radius: 9px; }
  .ranking-heading { padding: max(20px, env(safe-area-inset-top)) 18px 16px; }
  .ranking-heading h2 { font-size: 36px; }
  .ranking-tabs { margin: 0 18px 10px; }
  .ranking-tabs button { min-height: 46px; padding-inline: 7px; font-size: 12px; }
  .ranking-panel { padding: 0 18px max(18px, env(safe-area-inset-bottom)); }
  .ranking-table th:last-child { width: 92px; }
  .score-entry { padding: 13px; }
  .score-entry-fields { gap: 7px; }
  .score-entry button { min-width: 92px; padding-inline: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #gameView .result-card .score-entry { grid-column: 1 / -1; margin-bottom: 2px; }
  .ranking-dialog { width: min(680px, calc(100vw - 20px)); height: calc(100dvh - 16px); }
  .ranking-heading { padding-block: 12px 9px; }
  .ranking-heading h2 { font-size: 30px; }
  .ranking-kicker { font-size: 10px; }
  .ranking-tabs { margin-bottom: 7px; }
  .ranking-tabs button { min-height: 39px; }
  .ranking-table td { padding-block: 10px; }
}