/* Start screen, leaderboards and tournament screens. */

/* ---- The overlay --------------------------------------------------------- */

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  padding: 24px 16px 40px;
  display: flex;
  justify-content: center;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(154, 123, 255, .16), transparent 70%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    var(--screen);
}

.start-inner {
  max-width: 1160px;
  width: 100%;
  /* Centres the block vertically when the viewport has room to spare. */
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Masthead ------------------------------------------------------------ */

.start-head { text-align: center; }

.start-logo {
  font-family: var(--px);
  font-size: clamp(24px, 6vw, 52px);
  color: #fff;
  line-height: 1.3;
  text-shadow: 3px 3px 0 #000;
}

.start-sub {
  font-size: 20px;
  color: var(--dim);
  margin: 10px 0 0;
}

/* ---- Cards and fields ---------------------------------------------------- */

.start-cols {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) minmax(360px, 2.6fr);
  gap: 14px;
  align-items: start;
}

.start-card {
  background: var(--screen-2);
  border: 2px solid var(--screen-line);
  box-shadow: 0 3px 0 #000;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sec {
  font-family: var(--px);
  font-size: 10px;
  color: var(--cyan);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--screen-line);
  letter-spacing: 1px;
}

.sec .dim { font-family: var(--vt); font-size: 14px; letter-spacing: 0; margin-left: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field > span {
  font-family: var(--px);
  font-size: 7px;
  color: var(--dim);
  line-height: 1.6;
}

.field input,
.field textarea {
  font-family: var(--px);
  font-size: 12px;
  color: var(--ink);
  background: var(--screen);
  border: 2px solid var(--cyan);
  box-shadow: inset 0 0 12px rgba(61, 242, 255, .1);
  padding: 12px 10px;
  width: 100%;
  letter-spacing: 1px;
}

.field textarea {
  font-family: var(--vt);
  font-size: 17px;
  letter-spacing: 0;
  resize: vertical;
  word-break: break-all;
}

.field input:focus,
.field textarea:focus { outline: 2px dashed var(--amber); outline-offset: 2px; }

.recent { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font-family: var(--px);
  font-size: 7px;
  color: var(--dim);
  background: var(--screen);
  border: 1px solid var(--screen-line);
  padding: 6px 8px;
  cursor: pointer;
}

.chip:hover { color: var(--ink); border-color: var(--cyan); }

/* ---- Threat level cards -------------------------------------------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.tier-card {
  --tier: var(--cyan);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 12px;
  cursor: pointer;
  color: var(--ink);
  background: var(--screen);
  border: 2px solid var(--screen-line);
  box-shadow: 0 3px 0 #000;
  min-width: 0;
}

.tier-card:hover { border-color: var(--tier); }

.tier-card.on {
  border-color: var(--tier);
  background: color-mix(in srgb, var(--tier) 12%, var(--screen));
  box-shadow: 0 3px 0 #000, inset 0 0 22px color-mix(in srgb, var(--tier) 22%, transparent);
}

.tier-rank { font-family: var(--px); font-size: 9px; color: var(--tier); letter-spacing: 2px; }

.tier-name {
  font-family: var(--px);
  font-size: 11px;
  color: var(--tier);
  text-shadow: 2px 2px 0 #000;
  line-height: 1.4;
}

.tier-tagline { font-size: 17px; color: var(--dim); line-height: 1.05; }

.tier-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 16px;
  color: #aab0d6;
}

.tier-stats li::before { content: '· '; color: var(--tier); }

.tier-pill {
  font-family: var(--px);
  font-size: 7px;
  color: var(--tier, var(--cyan));
  border: 1px solid currentColor;
  padding: 3px 5px;
  white-space: nowrap;
}

/* ---- Actions ------------------------------------------------------------- */

.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.btn.big { font-size: 15px; padding: 16px 26px; }

.start-foot {
  text-align: center;
  font-size: 17px;
  color: var(--dim);
  margin: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--screen-line);
  padding-bottom: 10px;
}

.panel-head h2 {
  font-family: var(--px);
  font-size: 15px;
  color: var(--mag);
  margin: 0;
  text-shadow: 2px 2px 0 #000;
}

.lede { font-size: 19px; color: var(--dim); margin: 0; line-height: 1.1; }

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.error { font-size: 18px; color: var(--red); margin: 0; }
.notice { font-size: 18px; color: var(--lime); margin: 0; }

/* ---- The author's links -------------------------------------------------- */

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.social {
  --tier: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-family: var(--px);
  font-size: 7px;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--dim);
  background: var(--screen-2);
  border: 1px solid var(--screen-line);
}

.social img { width: 14px; height: 14px; image-rendering: pixelated; }

.social:hover,
.social:focus-visible {
  color: var(--tier);
  border-color: var(--tier);
  outline: none;
}

/* ---- Invite: op code and QR ---------------------------------------------- */

.invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: var(--screen-2);
  border: 2px solid var(--screen-line);
}

.invite-code { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.invite-label { font-family: var(--px); font-size: 8px; color: var(--dim); }

.op-code {
  font-family: var(--px);
  font-size: clamp(24px, 5vw, 42px);
  line-height: 1.2;
  color: var(--lime);
  letter-spacing: 6px;
  text-shadow: 3px 3px 0 #000;
  word-break: break-all;
}

.invite-note { font-size: 16px; color: var(--dim); line-height: 1.05; }

.invite-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 40vw;
}

.invite-qr .invite-note { text-align: center; }

.qr {
  display: block;
  image-rendering: pixelated;
  border: 3px solid var(--ink);
  max-width: 100%;
  height: auto;
}

/* ---- Leaderboard --------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.tab {
  --tier: var(--ink);
  font-family: var(--px);
  font-size: 8px;
  color: var(--dim);
  background: var(--screen);
  border: 2px solid var(--screen-line);
  padding: 9px 10px;
  cursor: pointer;
}

.tab:hover { color: var(--ink); }
.tab.on { color: var(--tier); border-color: var(--tier); }

.board-scroll { overflow-x: auto; }

.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  white-space: nowrap;
}

.board th {
  font-family: var(--px);
  font-size: 7px;
  color: var(--dim);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--screen-line);
  font-weight: normal;
}

.board td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--screen-line);
  color: var(--ink);
}

.board .rank, .board .score { font-family: var(--px); font-size: 10px; }
.board .who { font-family: var(--px); font-size: 9px; color: var(--cyan); }
.board .when, .board .hack, .board .depth { color: var(--dim); }

.board tr.rank-1 .rank, .board tr.rank-1 .score { color: var(--amber); }
.board tr.rank-2 .rank, .board tr.rank-2 .score { color: var(--ink); }
.board tr.rank-3 .rank, .board tr.rank-3 .score { color: var(--violet); }
.board tr.mine { background: rgba(61, 242, 255, .08); }

/* A run still in progress: its score is provisional and its row is alive. */
.board tr.live .score { color: var(--lime); }
.board tr.live .when { color: var(--lime); }

.live-tag {
  font-family: var(--px);
  font-size: 6px;
  color: #07060f;
  background: var(--lime);
  padding: 2px 4px;
  margin-left: 6px;
  vertical-align: middle;
  animation: livepulse 1.4s steps(2) infinite;
}

@keyframes livepulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .live-tag { animation: none; }
}

/* ---- Tournaments --------------------------------------------------------- */

.op-card {
  background: var(--screen-2);
  border: 2px solid var(--screen-line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-card + .op-card { margin-top: 10px; }

.op-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.op-name { font-family: var(--px); font-size: 11px; color: var(--lime); }

.op-meta { font-size: 17px; color: var(--dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: #aab0d6;
}

.rules li::before { content: '> '; color: var(--cyan); }

.bans { display: flex; flex-direction: column; gap: 12px; }

.ban-group { display: flex; flex-direction: column; gap: 6px; }

.ban-head {
  font-family: var(--px);
  font-size: 8px;
  color: var(--violet);
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.ban-head span { font-family: var(--vt); font-size: 16px; color: var(--dim); }

.ban-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ban-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--px);
  font-size: 6px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--screen);
  border: 1px solid var(--screen-line);
  padding: 5px 7px;
  cursor: pointer;
}

.ban-chip img { width: 16px; height: 16px; image-rendering: pixelated; }

.ban-chip:hover { border-color: var(--red); }

.ban-chip.banned {
  color: var(--red);
  border-color: var(--red);
  background: rgba(255, 77, 109, .1);
  text-decoration: line-through;
}

.ban-chip.banned img { filter: grayscale(1) brightness(.6); }

/* ---- Final score slab, shown on the run-over modal ------------------------ */

.score-slab {
  --tier: var(--cyan);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 14px 0;
  padding: 14px;
  border: 2px solid var(--tier);
  background: color-mix(in srgb, var(--tier) 10%, var(--screen));
}

.score-label { font-family: var(--px); font-size: 8px; color: var(--dim); }
.score-value { font-family: var(--px); font-size: clamp(22px, 5vw, 38px); color: #fff; text-shadow: 3px 3px 0 #000; }
.score-tier { font-family: var(--px); font-size: 9px; color: var(--tier); }

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 760px) {
  .start-screen { padding: 16px 12px 32px; }
  .invite { grid-template-columns: minmax(0, 1fr); }
  .invite-qr { max-width: 100%; }
  .start-cols { grid-template-columns: minmax(0, 1fr); }
  .start-actions .btn { flex: 1 1 140px; }
  .board { font-size: 16px; }
}