/* Arcade high scores (scores.js): an old-school scoreboard in a dark cabinet screen, glowing type, blinking
   "NEW HIGH SCORE!", three letter slots with up and down arrows. */
.hs { z-index: 60; }
/* Waffle Rally's turned wide mode: the overlay is rotated, so the screen's width is the card's height (QA Q-2) */
body.wide.turned .hs-card { max-height: calc(100dvw - 16px); padding-top: 12px; }
body.wide.turned .hs-title { font-size: 1.7rem; }
body.wide.turned .hs-sub { margin: 2px 0 6px; font-size: 0.85rem; }
body.wide.turned .hs-list li { font-size: 1.05rem; padding: 1px 4px; }
body.wide.turned .hs-row { padding: 8px 0 10px; }
body.wide.turned .hs-initials .ch { height: 52px; font-size: 2.3rem; }
body.wide.turned .hs-initials .up, body.wide.turned .hs-initials .dn { height: 32px; }
/* the small "See the Top 10" link above a game's start buttons */
.top10-line { flex-basis: 100%; margin: 0 0 2px; text-align: center; } /* its own short line at the top of the button row */
.top10-link { cursor: pointer; border: 0; background: none; padding: 6px 10px; font: 800 0.85rem/1 system-ui, sans-serif; letter-spacing: 0.04em; color: #a3160f; text-decoration: underline; text-underline-offset: 3px; }
.top10-link:focus-visible { outline: 3px solid #f2b33d; outline-offset: 2px; }
.hs-card {
	width: min(420px, 100%);
	max-height: calc(100dvh - 24px);
	overflow: auto;
	padding: 22px 20px 0;
	border-radius: 16px;
	background: radial-gradient(ellipse at 50% 0%, #1d0d0b, #070404 75%);
	box-shadow: 0 0 0 3px #2a1512, 0 0 0 5px rgb(255 90 72 / 0.55), 0 0 40px rgb(255 60 40 / 0.35), 0 18px 40px rgb(0 0 0 / 0.6);
	color: #fff;
	text-align: center;
	font-family: 'Bebas Neue', Impact, sans-serif;
	letter-spacing: 0.08em;
}
.hs-title { margin: 0; font: 400 clamp(2rem, 8vw, 2.6rem) / 1 'Bebas Neue', Impact, sans-serif; color: #f2b33d; text-shadow: 0 0 12px rgb(242 179 61 / 0.8); letter-spacing: 0.12em; }
.hs-sub { margin: 4px 0 12px; font-size: 1rem; color: #ff6b5c; text-shadow: 0 0 8px rgb(255 90 72 / 0.7); letter-spacing: 0.24em; }
.hs-yours { margin: 10px 0 2px; font-size: 1.15rem; color: #cfe9ff; }
.hs-yours b { font-weight: 400; font-size: 1.5rem; color: #fff; text-shadow: 0 0 10px rgb(150 210 255 / 0.9); }
.hs-wait { margin: 18px 0; font-size: 1.15rem; color: #cfe9ff; line-height: 1.3; }
.blink { animation: hs-blink 0.9s steps(1) infinite; }
@keyframes hs-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .blink, .hs-list li.me { animation: none; } }

.hs-list { list-style: none; margin: 0 auto; padding: 0; max-width: 300px; }
.hs-list li { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 10px; align-items: baseline; padding: 3px 4px; font-size: 1.3rem; line-height: 1.15; color: #fff; }
.hs-list li:nth-child(1) { color: #f2b33d; }
.hs-list li:nth-child(2) { color: #e8e8e8; }
.hs-list li:nth-child(3) { color: #ff9b5c; }
.hs-list .o { text-align: left; color: #ff6b5c; font-size: 1rem; }
.hs-list .n { text-align: left; letter-spacing: 0.3em; }
.hs-list .s { font-variant-numeric: tabular-nums; }
.hs-list li.me { background: rgb(242 179 61 / 0.18); border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(242 179 61 / 0.7); animation: hs-blink 1.1s steps(1) infinite; }

.hs-initials { display: flex; justify-content: center; gap: 14px; margin: 8px 0 4px; }
.hs-initials .slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hs-initials button { cursor: pointer; border: 0; color: #fff; font-family: 'Bebas Neue', Impact, sans-serif; }
.hs-initials .up, .hs-initials .dn { width: 54px; height: 40px; border-radius: 10px; background: #2a1512; color: #f2b33d; font-size: 1.1rem; box-shadow: inset 0 0 0 2px rgb(242 179 61 / 0.45); }
.hs-initials .ch { width: 54px; height: 64px; border-radius: 10px; background: #000; font-size: 2.8rem; line-height: 1; box-shadow: inset 0 0 0 2px #3a2a26; text-shadow: 0 0 12px rgb(255 255 255 / 0.6); }
.hs-initials .slot.on .ch { box-shadow: inset 0 0 0 3px #f2b33d, 0 0 16px rgb(242 179 61 / 0.6); color: #f2b33d; }
.hs-hint { margin: 6px 0 0; font-size: 0.85rem; color: rgb(255 255 255 / 0.6); }
.hs-err { min-height: 1.2em; margin: 4px 0 0; font-size: 0.95rem; color: #ff6b5c; }

.hs-row { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: center; padding: 14px 0 18px; background: linear-gradient(transparent, #070404 35%); }
.hs-btn { cursor: pointer; border: 0; border-radius: 999px; padding: 12px 24px; background: #d7261e; color: #fff; font: 800 0.95rem/1 system-ui, sans-serif; letter-spacing: 0.06em; box-shadow: 0 4px 0 #a3160f; }
.hs-btn.alt { background: #2a1512; box-shadow: 0 4px 0 #000; }
.hs-btn:focus-visible, .hs-initials button:focus-visible { outline: 3px solid #f2b33d; outline-offset: 2px; }