/* highscores.css - shared arcade-style top-15 high score modal + fireworks
   celebration, used by every game. Markup is injected into <body> at
   runtime by highscores.js (not part of any game's own HTML), so this
   file only needs to be linked, nothing added to each page's markup. */

.hs-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 25% transparent per explicit instruction ("Atari-style") -- 75% opaque black */
  background: rgba(0, 0, 0, .75);
  font-family: 'Courier New', ui-monospace, monospace;
  padding: 16px;
  /* Per explicit instruction ("these games should be no zoom everywhere
     even on the high score entry"): this overlay is injected directly
     into <body> at runtime (see highscores.js), NOT inside .game-shell,
     so it never inherited that element's own touch-action/user-select
     zoom-lock rules (game-shell.css) despite the shared document-wide
     touchmove/gesturestart pinch-block in game-shell.js already covering
     it -- that JS layer only stops PINCH zoom; DOUBLE-TAP zoom is purely
     a browser-native gesture keyed off touch-action, with no JS event to
     intercept (see game-shell.css's own comment on why this project
     avoids a manual touchend-timing guard). Only .hs-key (the individual
     keyboard buttons) had this set before -- real bug, since a double-tap
     anywhere ELSE on the overlay (the panel background, the leaderboard
     list, Continue) was still zoomable. Set here on the whole overlay so
     every descendant is covered at once, the same "ancestor still
     constrains descendant gestures" precedent already established for
     .game-shell (see CLAUDE.md). */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.hs-overlay[hidden] {
  display: none;
}

.hs-panel {
  width: min(360px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #04170a;
  border: 3px solid #39ff14;
  border-radius: 10px;
  padding: 22px 18px;
  box-shadow: 0 0 24px rgba(57, 255, 20, .45), inset 0 0 20px rgba(57, 255, 20, .08);
  color: #39ff14;
  text-align: center;
}

.hs-loading {
  padding: 24px 0;
  opacity: .8;
}

.hs-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  margin: 0 0 14px;
  text-shadow: 0 0 8px rgba(57, 255, 20, .8);
}

.hs-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 18px;
}

.hs-row {
  display: grid;
  grid-template-columns: 28px 1fr 76px;
  gap: 8px;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
}

.hs-row-empty {
  opacity: .35;
}

.hs-row.is-new {
  background: rgba(57, 255, 20, .18);
  animation: hs-row-blink 1s steps(1) infinite;
}

@keyframes hs-row-blink {
  50% { background: rgba(255, 176, 0, .22); color: #ffb000; }
}

.hs-rank {
  text-align: right;
  opacity: .7;
}

.hs-initials {
  text-align: left;
  letter-spacing: 2px;
  font-weight: 700;
}

.hs-score {
  text-align: right;
  color: #ffb000;
}

.hs-continue-btn, .hs-btn-ok, .hs-btn-del {
  font-family: inherit;
  font-weight: 700;
  border: 2px solid #39ff14;
  background: transparent;
  color: #39ff14;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
}

.hs-continue-btn:hover, .hs-btn-ok:not(:disabled):hover, .hs-btn-del:hover {
  background: rgba(57, 255, 20, .15);
}

.hs-btn-ok:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.hs-celebrate {
  padding: 50px 10px;
}

.hs-celebrate-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffb000;
  text-shadow: 0 0 14px rgba(255, 176, 0, .9);
  animation: hs-celebrate-pulse .5s ease-in-out infinite alternate;
}

@keyframes hs-celebrate-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.hs-newscore-banner {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffb000;
  text-shadow: 0 0 10px rgba(255, 176, 0, .8);
  margin-bottom: 4px;
}

.hs-newscore-sub {
  font-size: 12px;
  opacity: .85;
  margin-bottom: 14px;
}

.hs-slots {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.hs-slot {
  width: 30px;
  border-bottom: 3px solid #39ff14;
  color: #fff;
}

.hs-slot.is-active {
  color: #ffb000;
  border-bottom-color: #ffb000;
  animation: hs-slot-blink .8s steps(1) infinite;
}

@keyframes hs-slot-blink {
  50% { opacity: .3; }
}

.hs-keyboard {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.hs-key {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 0;
  border: 1px solid rgba(57, 255, 20, .5);
  border-radius: 5px;
  background: rgba(57, 255, 20, .06);
  color: #39ff14;
  cursor: pointer;
  touch-action: manipulation;
}

.hs-key:active {
  background: rgba(57, 255, 20, .3);
}

.hs-keyboard-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Fireworks -- adapted from quizzytouch-api-main's classroom.html
   (../quizzytouch-api-main, a sibling project's quiz-results
   celebration), per explicit instruction ("pull the fireworks from
   quizzytouch"). Same burst mechanic (particles flung outward from a
   random point, fading as they go); colors and burst count are this
   file's own, not copied verbatim. */
.hs-firework-particle {
  position: fixed;
  pointer-events: none;
  z-index: 600;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: hs-firework-burst 1.9s ease-out forwards;
}

@keyframes hs-firework-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}