/* ============================================================
   arcade.css — the look every page shares.

   The top bar, the "who are you?" screen, buttons, the leaderboard
   and the little exploding pixels. Each game's own scenery lives in
   its own folder next to its own HTML.

   If you are changing ONE game, edit that game's .css file instead —
   this file changes all of them at once.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: "Courier New", monospace;
  overflow-x: hidden;
  position: relative;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------- top bar */
.arcade-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(6, 12, 26, .82);
  border-bottom: 3px solid #2a2a2a;
  color: #fff;
  font-size: .8rem;
  text-shadow: 2px 2px 0 #000;
}

.arcade-top .back {
  color: #ffe680;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #2a2a2a;
  border-top-color: #6d6d6d;
  border-left-color: #6d6d6d;
  background: #4a4a4a;
  padding: 6px 10px;
  white-space: nowrap;
}
.arcade-top .back:hover { background: #5c5c5c; }

.arcade-top .here {
  font-weight: bold;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcade-top .who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.arcade-top .who b { color: #ffe680; }
.arcade-top .who .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12ch;
}
.arcade-top .who a {
  color: #cfe8ff;
  font-size: .72rem;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

/* ---------------------------------------------------------- name screen */
.namescreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 12, 26, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.namescreen.hidden { display: none; }

.namebox {
  background: #6b6b6b;
  border: 5px solid #2a2a2a;
  border-top-color: #9a9a9a;
  border-left-color: #9a9a9a;
  padding: 34px 28px;
  text-align: center;
  max-width: 420px;
  width: 100%;
}
.namebox h2 {
  color: #fff;
  text-shadow: 3px 3px 0 #2a2a2a;
  margin-bottom: 8px;
  font-size: 1.5rem;
}
.namebox p {
  color: #ddd;
  font-size: .85rem;
  margin-bottom: 20px;
}
.namebox input {
  font-family: inherit;
  font-size: 1.1rem;
  width: 100%;
  padding: 12px;
  background: #2b2b2b;
  color: #fff;
  border: 3px solid #1a1a1a;
  border-top-color: #444;
  border-left-color: #444;
  margin-bottom: 16px;
  text-align: center;
}
.namebox input:focus { outline: 3px solid #ffe680; }
.namebox .err {
  color: #ff9b9b;
  font-size: .8rem;
  min-height: 1.1em;
  margin-bottom: 10px;
}

/* The two tabs: "I have an account" / "Make one". They are the whole
   sign-up flow — there is no second screen and no email step. */
.namebox .tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.namebox .tab {
  flex: 1;
  font-size: .72rem;
  padding: 10px 6px;
  letter-spacing: .04em;
  background: #4a4a4a;
  border-top-color: #6d6d6d;
  border-left-color: #6d6d6d;
  color: #cfcfcf;
}
.namebox .tab:hover { background: #5c5c5c; }
.namebox .tab.on {
  background: #2b2b2b;
  color: #ffe680;
  /* Pressed in, so which one you are on is obvious without colour
     alone doing the work. */
  border-top-color: #1a1a1a;
  border-left-color: #1a1a1a;
  border-bottom-color: #6d6d6d;
  border-right-color: #6d6d6d;
}

/* Only shown while making an account. */
.namebox #arcade-againrow.hidden { display: none; }

.namebox .warn {
  color: #ffcf8f;
  font-size: .72rem;
  line-height: 1.4;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------- page frame */
main {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 90px 20px 40px;
}

h1 {
  font-size: clamp(2.2rem, 9vw, 5rem);
  letter-spacing: .1em;
  color: #fff;
  text-shadow:
     4px  4px 0 #3a3a3a,
     8px  8px 0 rgba(0,0,0,.25);
  margin-bottom: 18px;
}

.tagline {
  display: inline-block;
  background: rgba(0,0,0,.55);
  color: #ffe680;
  padding: 10px 18px;
  border: 3px solid #2a2a2a;
  font-size: clamp(.85rem, 2.6vw, 1.15rem);
  text-shadow: 2px 2px 0 #000;
}

/* ---------------------------------------------------------- buttons */
.controls {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: #7a7a7a;
  border: 3px solid #2a2a2a;
  border-top-color: #a5a5a5;
  border-left-color: #a5a5a5;
  padding: 14px 22px;
  cursor: pointer;
  text-shadow: 2px 2px 0 #333;
}
button:hover  { background: #8f8f8f; }
button:active { border-top-color: #2a2a2a; border-left-color: #2a2a2a;
                border-bottom-color: #a5a5a5; border-right-color: #a5a5a5; }
button.primary { background: #4a8f3c; border-top-color: #6fbf5c; border-left-color: #6fbf5c; }
button.primary:hover { background: #57a446; }

/* ---------------------------------------------------------- score lines */
.score {
  margin-top: 12px;
  color: #ffe680;
  text-shadow: 2px 2px 0 #000;
  font-size: 1.15rem;
  font-weight: bold;
}

.savestate {
  margin-top: 6px;
  font-size: .78rem;
  color: #d7ffd7;
  text-shadow: 1px 1px 0 #000;
  min-height: 1.1em;
}

.hint {
  margin-top: 16px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  font-size: .9rem;
  opacity: .85;
}

/* ---------------------------------------------------------- leaderboard */
.leaderboard {
  margin: 44px auto 140px;
  max-width: 460px;
  background: rgba(0,0,0,.6);
  border: 4px solid #2a2a2a;
  padding: 20px;
}
.leaderboard h3 {
  color: #ffe680;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 14px;
  letter-spacing: .05em;
}
.leaderboard .online {
  color: #9fe3ff;
  font-size: .78rem;
  margin: -6px 0 14px;
  text-shadow: 1px 1px 0 #000;
}
/* filter + sort chips */
.boardfilters { margin-bottom: 12px; }
.filterrow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.filterrow .flabel {
  color: #aaa;
  font-size: .68rem;
  letter-spacing: .08em;
  width: 42px;
  flex: none;
  text-transform: uppercase;
}
.chip {
  font-family: inherit;
  font-size: .72rem;
  font-weight: bold;
  padding: 6px 9px;
  color: #ddd;
  background: #4a4a4a;
  border: 2px solid #222;
  border-top-color: #6d6d6d;
  border-left-color: #6d6d6d;
  cursor: pointer;
  text-shadow: 1px 1px 0 #222;
}
.chip:hover { background: #5c5c5c; }
.chip.on {
  background: #ffe680;
  color: #33290a;
  border-top-color: #fff4c2;
  border-left-color: #fff4c2;
  text-shadow: none;
}

/* Header and rows share one grid so the columns always line up, however
   long the names get. */
.boardhead,
.leaderboard li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.2ch 5.2ch 4.5ch;
  gap: 10px;
  align-items: center;
}

.boardhead {
  padding: 0 10px 6px;
  border-bottom: 2px solid rgba(255,255,255,.25);
  margin-bottom: 4px;
}
.boardhead span {
  color: #9a9a9a;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: right;
}
.boardhead span:first-child { text-align: left; }

.leaderboard ol { list-style: none; }
.leaderboard li {
  color: #fff;
  padding: 8px 10px;
  border-bottom: 2px solid rgba(255,255,255,.12);
  text-shadow: 1px 1px 0 #000;
}
.leaderboard li.empty { display: block; }
.leaderboard li:last-child { border-bottom: none; }
.leaderboard li.me { background: rgba(255,230,128,.18); color: #ffe680; }
.leaderboard .rank { opacity: .7; margin-right: 10px; }
.leaderboard .empty { color: #bbb; font-size: .85rem; padding: 8px 0; }

/* Name column: never let a long name push the numbers off the row. */
.leaderboard .who {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.leaderboard .who .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard .total { text-align: right; font-weight: bold; }

/* current speed */
.leaderboard .rate {
  font-size: .78rem;
  text-align: right;
  color: #8ef58e;
}
.leaderboard .rate.idle { color: #888; }

/* personal best speed */
.leaderboard .best {
  font-size: .78rem;
  text-align: right;
  color: #ffd27a;
}
.leaderboard .best.none { color: #777; }

/* whoever is playing fastest right now */
.leaderboard li.fastest { background: rgba(255,120,40,.22); }
.leaderboard .flame {
  font-size: .6rem;
  font-weight: bold;
  letter-spacing: .06em;
  background: #ff7a28;
  color: #2a1000;
  padding: 3px 6px;
  border: 2px solid #a34608;
  text-shadow: none;
  animation: flicker .7s infinite alternate;
}
@keyframes flicker { from { opacity: .75 } to { opacity: 1 } }

/* ---------------------------------------------------------- particles */
.particle {
  position: fixed;
  width: 8px; height: 8px;
  z-index: 20;
  pointer-events: none;
}

/* ---------------------------------------------------------- pop-up message */
.secret {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.secret.show { display: flex; animation: fadeout 2.4s forwards; }
.secret span {
  background: #1c8a1c;
  color: #fff;
  border: 5px solid #0d4f0d;
  border-top-color: #46c246;
  border-left-color: #46c246;
  padding: 18px 26px;
  font-size: clamp(1rem, 4.5vw, 1.6rem);
  font-weight: bold;
  letter-spacing: .06em;
  text-shadow: 3px 3px 0 #063806;
  animation: pop .3s ease-out;
  text-align: center;
}
@keyframes pop {
  from { transform: scale(.4) rotate(-6deg); }
  to   { transform: scale(1)   rotate(0); }
}
@keyframes fadeout {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ---------------------------------------------------------- mobile */
@media (max-width: 480px) {
  main { padding: 76px 12px 30px; }

  .arcade-top { font-size: .72rem; gap: 8px; padding: 6px 10px; }
  .arcade-top .back { padding: 5px 8px; }
  .arcade-top .who .nm { max-width: 8ch; }

  .leaderboard {
    padding: 14px 12px;
    margin: 32px auto 130px;
  }

  /* tighter columns so a long name still gets room */
  .boardhead,
  .leaderboard li {
    grid-template-columns: minmax(0, 1fr) 4.6ch 4.6ch 4ch;
    gap: 7px;
  }

  /* Rows and the header must keep the SAME horizontal padding, or the
     columns line up on desktop and sit 4px out on a phone. */
  .leaderboard li { padding: 7px 6px; }
  .boardhead { padding: 0 6px 6px; }
  .leaderboard .rate,
  .leaderboard .best { font-size: .7rem; }
  .leaderboard .total { font-size: .85rem; }
  .leaderboard .rank { margin-right: 4px; font-size: .75rem; }
  .leaderboard .who { gap: 5px; font-size: .88rem; }

  /* the badge shrinks to a flame so it can't squeeze the numbers */
  .leaderboard .flame {
    font-size: 0;
    padding: 2px 4px;
    border-width: 2px;
  }
  .leaderboard .flame::after {
    content: "\1F525";          /* 🔥 */
    font-size: .72rem;
  }

  /* filters stack their own label above the buttons */
  .filterrow { gap: 5px; }
  .filterrow .flabel { width: 100%; margin-bottom: 1px; }
  .chip { font-size: .68rem; padding: 7px 8px; flex: 1 1 auto; }

  .controls { gap: 10px; }
  .controls button { padding: 12px 16px; font-size: .9rem; }
}