/* ==========================================================
   Cockroach Job Dash — UI styles
   Goal: feel like a finished cartoon/comic mobile-desktop game
   ========================================================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, #1c1530 0%, #0a0814 60%, #050309 100%);
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: 100%;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ===== Canvas ===== */
#game {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 30%, #2a1f4a 0%, #15102b 40%, #0a0716 100%);
  image-rendering: optimizeQuality;
  touch-action: none;
}

/* ===== HUD ===== */
.hud {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    12px
    calc(14px + env(safe-area-inset-left));
  pointer-events: none;
  z-index: 5;
}
.hud-top { top: 0; }

.hud-card {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20,12,40,0.92), rgba(10,6,22,0.92));
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 5px 10px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 12px rgba(255,170,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 76px;
  justify-content: center;
}
.hud-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #ffb84a;
  font-weight: 800;
}
.hud-value {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #000;
  line-height: 1;
}
.hud-sub {
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
  margin-top: 3px;
}
.hud-sub b { color: #ffd76e; }

/* Score card: two stacked lines — Score / Best */
.sc-line { display: flex; align-items: baseline; gap: 5px; line-height: 1.15; }
.sc-lbl  { font-size: 9px; letter-spacing: 1.5px; color: rgba(255,255,255,0.5); font-weight: 800; flex-shrink: 0; }
.sc-lbl-dim { font-size: 8px; color: rgba(255,255,255,0.35); }
.sc-num  { font-size: 17px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000; line-height: 1; }
.sc-num-best { font-size: 13px; font-weight: 900; color: #ffd76e; line-height: 1; }

.progress-card { min-width: 160px; }
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #76e23a 0%, #4ade80 50%, #22c55e 100%);
  box-shadow: 0 0 8px rgba(74,222,128,0.6);
  transition: width 0.3s ease;
}

.challenge-card { max-width: 240px; }
.chip {
  font-size: 14px;
  background: linear-gradient(180deg, #ff8a2a, #d24a00);
  padding: 4px 10px;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.4);
  display: inline-block;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-buttons {
  display: flex;
  gap: 4px;
  pointer-events: auto;
  align-self: stretch;
  align-items: center;
}
.icon-btn {
  width: 34px; height: 34px;
  min-width: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(160deg, rgba(40,20,80,0.88), rgba(15,6,32,0.92));
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.1s ease, opacity 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:active { transform: scale(0.80); opacity: 0.7; box-shadow: 0 1px 0 rgba(0,0,0,0.55); }
.hud-ic { display: block; }
/* per-icon accent colours */
.ic-sound { color: #4fc3f7; box-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 8px rgba(79,195,247,0.25), inset 0 1px 0 rgba(255,255,255,0.08); border-color: rgba(79,195,247,0.28); }
.ic-pause { color: #ffd76e; box-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 8px rgba(255,215,110,0.25), inset 0 1px 0 rgba(255,255,255,0.08); border-color: rgba(255,215,110,0.28); }
.ic-profile { color: #c084fc; box-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 8px rgba(192,132,252,0.25), inset 0 1px 0 rgba(255,255,255,0.08); border-color: rgba(192,132,252,0.28); }
.ic-exit { color: #f87171; box-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 8px rgba(248,113,113,0.25), inset 0 1px 0 rgba(255,255,255,0.08); border-color: rgba(248,113,113,0.28); }

/* ===== Boss HUD ===== */
.boss-hud {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 80vw);
  background: linear-gradient(180deg, rgba(40,8,8,0.94), rgba(20,4,4,0.94));
  border: 2px solid rgba(255,80,80,0.5);
  border-radius: 16px;
  padding: 10px 14px;
  z-index: 6;
  box-shadow: 0 0 24px rgba(255,40,40,0.4);
}
.boss-title {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 900;
  color: #ff5a5a;
  margin-bottom: 6px;
  text-align: center;
}
.boss-tag {
  background: #ffb84a;
  color: #1c0f00;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  margin-left: 6px;
}
.boss-bar {
  height: 16px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}
.boss-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff3333 0%, #ff7a4a 100%);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.4);
  transition: width 0.2s ease;
}
.boss-hint {
  text-align: center;
  font-size: 11px;
  margin-top: 6px;
  color: #ffd76e;
  letter-spacing: 1px;
}

/* ===== Overlays ===== */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,6,22,0.7), rgba(0,0,0,0.92));
  z-index: 20;
  padding: 16px;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* How-to-play screen must float above ALL other overlays (game-over, victory etc.) */
#howScreen { z-index: 30; }

.hidden { display: none !important; }

.poster {
  background:
    linear-gradient(180deg, rgba(28,18,52,0.96), rgba(10,6,22,0.96)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='2' cy='2' r='1' fill='%23ffffff' opacity='0.05'/></svg>");
  border: 3px solid rgba(255,184,74,0.4);
  border-radius: 22px;
  padding: 16px 24px 24px;
  width: min(560px, 88vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 12px 0 rgba(0,0,0,0.55), 0 0 40px rgba(255,170,40,0.18);
}
.poster.small { max-width: 420px; }

/* ── EXIT button pinned to top-right corner of start poster ── */
.poster { position: relative; }
.poster-exit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,60,60,0.12);
  border: 1.5px solid rgba(255,90,90,0.5);
  color: #ff9a9a;
  border-radius: 10px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}
.poster-exit-btn svg { width: 15px; height: 15px; }
.poster-exit-btn:hover { background: rgba(255,60,60,0.28); }
.poster-exit-btn:active { transform: scale(0.96); }
.poster.victory { border-color: rgba(74,222,128,0.6); box-shadow: 0 12px 0 rgba(0,0,0,0.55), 0 0 40px rgba(74,222,128,0.25); }

.title {
  font-size: clamp(36px, 6vw, 56px);
  margin: 0 0 6px;
  line-height: 0.95;
  letter-spacing: 2px;
  font-weight: 900;
  text-shadow: 0 4px 0 #000, 0 0 18px rgba(255,170,0,0.4);
}
.title-orange { color: #ff8a2a; display:block; }
.title-white  { color: #f5efe0; display:block; }

.tag {
  color: #76e23a;
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 12px;
  font-size: 14px;
  text-shadow: 0 2px 0 #000;
}

.poster-desc {
  color: #d9d3c5;
  font-size: 14px;
  margin: 6px 0 14px;
  line-height: 1.5;
}

.controls-card {
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px auto 16px;
  max-width: 360px;
}
.kbd-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.kbd {
  font-family: 'Courier New', monospace;
  background: linear-gradient(180deg, #f8f4ea, #d9cfb6);
  color: #1c0f00;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5);
  font-size: 13px;
  border: 1px solid rgba(0,0,0,0.3);
}
.controls-text {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ffd76e;
  font-weight: 900;
}

/* Buttons */
.primary-btn, .ghost-btn {
  display: inline-block;
  border: none;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 14px 24px;
  border-radius: 14px;
  cursor: pointer;
  margin: 6px;
  min-height: 44px;
  transition: transform 0.08s ease, filter 0.15s ease;
  font-size: 15px;
  touch-action: manipulation;
}
.primary-btn {
  background: linear-gradient(180deg, #ffb84a 0%, #ff7a14 100%);
  color: #1c0f00;
  box-shadow: 0 5px 0 #8a3a00, 0 0 18px rgba(255,170,40,0.4);
  border: 2px solid #5a2400;
}
.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a3a00; }

.ghost-btn {
  background: rgba(255,255,255,0.06);
  color: #f0e8d6;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 0 rgba(0,0,0,0.5);
}
.ghost-btn:active { transform: translateY(2px); }

/* Share button — blue accent so it visually reads as "social" */
.share-btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 12px 22px;
  border-radius: 14px;
  cursor: pointer;
  margin: 6px;
  min-height: 44px;
  font-size: 14px;
  border: 2px solid #1a6fd1;
  background: linear-gradient(180deg, #5cb3ff 0%, #1a6fd1 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  box-shadow: 0 5px 0 #0d4c8e, 0 0 18px rgba(92,179,255,0.35);
  transition: transform 0.08s ease, filter 0.15s ease;
  touch-action: manipulation;
}
.share-btn:hover  { filter: brightness(1.08); }
.share-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0d4c8e; }
.share-btn.copied {
  background: linear-gradient(180deg, #76e23a 0%, #2f9c1a 100%);
  border-color: #2f9c1a;
  box-shadow: 0 5px 0 #1d6710, 0 0 18px rgba(118,226,58,0.4);
}

/* Endless-mode pill — replaces "X / 15" progress when in endless run */
.endless-pill {
  background: linear-gradient(180deg, #76e23a, #2f9c1a);
  color: #0a1a02;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  border: 2px solid rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  display: inline-block;
}

/* Leaderboard */
.leaderboard-section {
  /* Flattened to match the Home-screen score list (was a bordered "nested popup" card).
     To RESTORE the card look, re-add:
       max-width: 360px; background: rgba(255,255,255,0.04);
       border: 2px solid rgba(255,184,74,0.35); border-radius: 12px; padding: 10px 12px; */
  margin: 8px 0 6px;
  text-align: left;
}
.leaderboard-section.hidden { display: none; }
.leaderboard-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: #ffb84a;
  font-weight: 900;
  text-align: center;
  margin-bottom: 8px;
  text-shadow: 0 2px 0 #000;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: #f0e8d6;
}
.leaderboard-row + .leaderboard-row { border-top: 1px solid rgba(255,255,255,0.08); }
.leaderboard-row.you,
.leaderboard-row.leaderboard-you {
  background: linear-gradient(180deg, rgba(255,184,74,0.18), rgba(255,122,20,0.08));
  border-radius: 6px;
}
.leaderboard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.leaderboard-your-rank {
  text-align: center;
  font-size: 11px;
  color: #ffb84a;
  padding: 4px 0 2px;
  opacity: 0.85;
}
.leaderboard-sep {
  text-align: center;
  color: #556;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 2px 0;
  opacity: 0.7;
}
.leaderboard-rank {
  font-weight: 900;
  color: #ffd76e;
  font-size: 14px;
  text-align: center;
}
.leaderboard-row:nth-child(2) .leaderboard-rank { color: #ffd76e; }   /* gold */
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #d9d9d9; }   /* silver */
.leaderboard-row:nth-child(4) .leaderboard-rank { color: #c98c44; }   /* bronze */
.leaderboard-mode {
  font-size: 10px;
  color: #ffb84a;
  letter-spacing: 1px;
}
.leaderboard-score {
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 0 #000;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.lb-date {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0;
  margin-top: 1px;
}
.lb-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.lb-clickable:active { background: rgba(255,184,74,0.28) !important; }
.leaderboard-empty {
  text-align: center;
  font-size: 12px;
  color: #d9d3c5;
  padding: 6px 4px;
}

/* NEW HIGH SCORE banner */
.new-high-banner {
  display: block;
  background: linear-gradient(180deg, #ffd76e 0%, #ffb84a 50%, #ff7a14 100%);
  color: #1c0f00;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 10px 16px;
  border-radius: 12px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: 16px;
  border: 2px solid #5a2400;
  box-shadow: 0 5px 0 #8a3a00, 0 0 24px rgba(255,184,74,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  animation: hsPulse 1.4s ease-in-out infinite;
  max-width: 320px;
}
.new-high-banner.hidden { display: none; }
@keyframes hsPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); box-shadow: 0 5px 0 #8a3a00, 0 0 40px rgba(255,215,110,0.85); }
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: calc(40px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #2a1f4a, #15102b);
  color: #fff;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
  border: 2px solid rgba(255,184,74,0.5);
  box-shadow: 0 6px 0 rgba(0,0,0,0.5), 0 0 24px rgba(255,184,74,0.25);
  z-index: 50;
  animation: toastIn 0.25s ease;
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Start screen 2-column layout ── */
.start-top-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.start-title-col {
  flex: 0 0 auto;
  text-align: left;
  padding-top: 4px;
}
.start-action-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
/* On narrow / portrait screens revert to single column */
@media (max-width: 480px) {
  .start-top-row { flex-direction: column; align-items: center; }
  .start-title-col { text-align: center; }
}

/* Difficulty picker */
.difficulty-picker {
  margin: 0 0 10px;
  max-width: 100%;
}
.diff-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: #ffb84a;
  font-weight: 900;
  margin-bottom: 20px;
  text-shadow: 0 2px 0 #000;
}
.diff-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.diff-btn {
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 10px 6px;
  color: #f0e8d6;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Level icon removed + text centred per request (was: justify-content:flex-start; text-align:left) */
  justify-content: center;
  gap: 7px;
  text-align: center;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
/* was: align-items: flex-start */
.diff-btn .diff-text { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.diff-btn:hover { background: rgba(255,255,255,0.08); }
.diff-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.diff-btn .diff-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 0 #000;
}
.diff-btn .diff-tag {
  font-size: 9px;
  letter-spacing: 1px;
  color: #c8c0b0;
  line-height: 1.2;
}
.diff-btn.active {
  background: linear-gradient(180deg, rgba(255,184,74,0.25), rgba(255,122,20,0.15));
  border-color: #ffb84a;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 0 14px rgba(255,170,40,0.4);
}
.diff-btn.active .diff-tag { color: #ffd76e; }
.diff-btn[data-diff="easy"].active   { border-color: #76e23a; box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 0 14px rgba(118,226,58,0.4); }
.diff-btn[data-diff="hard"].active   { border-color: #ff5a5a; box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 0 14px rgba(255,90,90,0.4); }

/* Emoji icon inside difficulty button */
.diff-emoji { font-size: 20px; line-height: 1; display: block; flex-shrink: 0; }

/* Secondary buttons row (HOW / SHARE / EXIT) */
.secondary-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 420px;
  margin: 0 auto;
}
.secondary-btns .ghost-btn { flex: 1 1 auto; min-width: 80px; margin: 4px 0; }

/* START + EXIT in one row */
.start-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: 6px auto;
  max-width: 500px;
}
.start-btn-row .primary-btn { flex: 1; min-width: 0; }
.start-btn-row .ghost-btn   { flex: 1; min-width: 0; }

/* HOW TO PLAY + SHARE APP in one row below */
.start-sub-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0 auto 4px;
  max-width: 500px;
}
.start-sub-row .ghost-btn { flex: 1; min-width: 0; }

/* EXIT button — red tint so it stands out */
.exit-btn {
  border-color: rgba(255,90,90,0.55) !important;
  color: #ff9a9a !important;
}
.exit-btn:hover { background: rgba(255,90,90,0.12) !important; }

@media (max-width: 720px) {
  .diff-btn { padding: 8px 4px; }
  .diff-btn .diff-name { font-size: 12px; }
  .diff-btn .diff-tag  { font-size: 8px; }
  .diff-emoji { font-size: 16px; }
}

/* Power-up strip on start screen */
.powerup-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.pu {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  font-size: 10px;
}
.pu b { display: block; font-size: 11px; color: #ffd76e; margin: 2px 0; letter-spacing: 1px; }
.pu small { color: #c8c0b0; line-height: 1.2; display: block; }
.pu-icon {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  margin-bottom: 2px;
  border: 2px solid rgba(0,0,0,0.4);
}
.pu-blue   { background: linear-gradient(180deg,#5cb3ff,#1a6fd1); }
.pu-yellow { background: linear-gradient(180deg,#ffd76e,#c98c00); }
.pu-red    { background: linear-gradient(180deg,#ff7a8a,#c0223a); }
.pu-green  { background: linear-gradient(180deg,#76e23a,#2f9c1a); }

/* Modal styling */
.modal-title {
  font-size: 28px;
  letter-spacing: 3px;
  margin: 0 0 12px;
  text-shadow: 0 3px 0 #000;
}
.modal-title.red   { color: #ff5a5a; }
.modal-title.green { color: #76e23a; }

.how-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
  color: #d9d3c5;
  font-size: 14px;
  line-height: 1.6;
}
.how-list li {
  padding: 6px 0 6px 26px;
  position: relative;
}
.how-list li::before {
  content: "▶";
  position: absolute;
  left: 6px; top: 6px;
  color: #ffb84a;
  font-size: 11px;
}

.reason { color: #f8c8c8; font-style: italic; margin: 4px 0 12px; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}
.stats-row > div {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
}
.stat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #ffb84a;
  margin-bottom: 4px;
  font-weight: 900;
}
.stat-val {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.job-badge {
  display: inline-block;
  background: linear-gradient(180deg, #ff8a2a, #d24a00);
  color: #fff;
  padding: 6px 14px;
  border-radius: 10px;
  margin: 4px 0 12px;
  letter-spacing: 2px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  box-shadow: 0 3px 0 rgba(0,0,0,0.5);
}
.victory-text { color: #d9d3c5; font-size: 14px; margin: 8px 0; line-height: 1.5; }
#victoryCanvas {
  display: block;
  margin: 10px auto;
  border-radius: 12px;
  background: linear-gradient(180deg, #1c1530 0%, #0a0814 100%);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Challenge flash */
.challenge-flash {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,138,42,0.95), rgba(180,60,0,0.95));
  border: 3px solid rgba(0,0,0,0.4);
  border-radius: 16px;
  padding: 14px 22px;
  text-align: center;
  box-shadow: 0 8px 0 rgba(0,0,0,0.5), 0 0 30px rgba(255,170,40,0.5);
  animation: flashIn 1.4s ease forwards;
}
.challenge-flash #flashNum {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 #000;
  line-height: 1;
}
.challenge-flash #flashLabel {
  display: block;
  font-size: 14px;
  letter-spacing: 2px;
  color: #1c0f00;
  font-weight: 900;
  margin-top: 4px;
}
@keyframes flashIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* Responsive tweaks */
@media (max-width: 720px) {
  .hud-top {
    padding:
      calc(8px + env(safe-area-inset-top))
      calc(8px + env(safe-area-inset-right))
      8px
      calc(8px + env(safe-area-inset-left));
    gap: 6px;
    flex-wrap: wrap;
  }
  .hud-card { padding: 6px 10px; min-width: 70px; }
  .hud-value { font-size: 16px; }
  .hud-label { font-size: 9px; }
  .progress-card { min-width: 110px; }
  .challenge-card { max-width: 160px; }
  .icon-btn { width: 32px; height: 32px; min-width: 32px; }
  .poster { padding: 20px 18px; }
  .title { letter-spacing: 1px; }
  .powerup-strip { grid-template-columns: repeat(2, 1fr); }
  .boss-hud { width: 92vw; padding: 8px 10px; }
}

/* Very short landscape (phones held sideways) — squeeze HUD vertically */
@media (max-height: 460px) {
  .hud-top {
    padding:
      calc(6px + env(safe-area-inset-top))
      calc(8px + env(safe-area-inset-right))
      6px
      calc(8px + env(safe-area-inset-left));
    gap: 4px;
  }
  .hud-card {
    padding: 4px 8px;
    min-width: 60px;
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5);
  }
  .hud-value { font-size: 14px; }
  .hud-label { font-size: 8px; letter-spacing: 1.4px; }
  .hud-sub { font-size: 8px; margin-top: 2px; }
  .progress-card { min-width: 96px; }
  .progress-bar { height: 7px; }
  .challenge-card { max-width: 130px; }
  .chip { font-size: 11px; padding: 3px 8px; }
  .icon-btn { width: 30px; height: 30px; min-width: 30px; border-radius: 8px; }

  .boss-hud { width: 86vw; padding: 6px 10px; border-radius: 12px; }
  .boss-title { font-size: 11px; margin-bottom: 4px; }
  .boss-bar { height: 12px; }
  .boss-hint { font-size: 9px; margin-top: 4px; }

  /* ── Landscape phone: compact single-column, scroll if needed ── */
  .poster { padding: 10px 14px 10px; border-radius: 16px; max-height: 98vh; max-height: 98dvh; overflow-y: auto; }
  .title { font-size: clamp(20px, 4vw, 32px); margin-bottom: 2px; }
  .tag { font-size: 10px; letter-spacing: 2px; margin-bottom: 0; }
  /* Hide secondary info on tiny screens */
  .poster-desc { display: none; }
  .controls-card { display: none; }
  .powerup-strip { display: none; }
  /* Compact difficulty */
  /* Title reduced per request (was orange clamp(18,4.5vw,26) / white clamp(14,3.5vw,20)) */
  .gs-ht-orange { font-size: clamp(15px, 4vw, 22px); }
  .gs-ht-white  { font-size: clamp(12px, 3vw, 17px); }
  .gs-fancy-icon { width: 24px; height: 24px; }  /* slightly smaller in landscape */
  .difficulty-picker { margin: 0 0 6px; }
  .diff-title { font-size: 9px; margin-bottom: 10px; }
  .diff-btn { padding: 5px 4px; border-radius: 10px; }
  .diff-btn .diff-name { font-size: 11px; letter-spacing: 1px; }
  .diff-btn .diff-tag  { font-size: 7px; }
  /* Compact buttons — keep inline so START / HOW TO PLAY / SHARE APP flow in one row */
  .primary-btn { padding: 9px 16px; font-size: 13px; min-height: 38px; margin: 4px; }
  .ghost-btn   { padding: 7px 10px; font-size: 11px; min-height: 34px; margin: 4px; }

  .modal-title { font-size: 22px; margin-bottom: 8px; }
  .stat-val { font-size: 18px; }
  .stat-label { font-size: 9px; }

  .challenge-flash { padding: 10px 16px; border-radius: 12px; }
  .challenge-flash #flashNum { font-size: 26px; }
  .challenge-flash #flashLabel { font-size: 11px; }
}

/* Tiny landscape (e.g. older phones < 600px wide) — last-resort squeeze */
@media (max-width: 600px) and (max-height: 380px) {
  .hud-sub { display: none; }
  .progress-card { min-width: 84px; }
  .challenge-card { max-width: 108px; }
  .chip { font-size: 10px; padding: 2px 6px; }
  .powerup-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Game-Over — player name row below title ===== */
.go-player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
}
.go-player-name {
  font-size: 15px;
  font-weight: 900;
  color: #ffd76e;
  letter-spacing: 0.5px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.go-player-name::before { content: '👤 '; }

/* ===== Game-Over — single column, leaderboard scrolls below buttons ===== */
.go-actions { margin-top: 10px; }
.poster.go-poster {
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#gameOverLeaderboard {
  margin-top: 14px;
  width: 100%;
}

/* ── One-row icon buttons (Share / Retry / Home / Exit) ── */
.go-actions-row {
  display: flex;
  gap: 7px;
  margin: 10px 0 6px;
}
.go-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  padding: 10px 4px 8px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #f0e8d6;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s, transform 0.1s;
}
.go-btn:active { transform: translateY(2px); filter: brightness(0.88); }
.go-btn-icon { font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.go-btn-icon .exit-ic { width: 20px; height: 20px; margin: 0; vertical-align: middle; }
.go-btn-lbl  { font-size: 9px; font-weight: 900; letter-spacing: 0.8px; }
.go-btn.go-btn-primary {
  background: linear-gradient(135deg, #b85000, #ff9922);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 0 #7a2e00;
}
.go-btn.go-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a2e00; }

/* Landscape compact — still single column but tighter spacing */
@media (max-height: 540px) {
  .poster.go-poster { padding: 10px 14px; }
  .poster.go-poster .modal-title { margin-bottom: 4px; font-size: 22px; }
  .poster.go-poster .reason { margin: 2px 0 6px; font-size: 12px; }
  .poster.go-poster .stats-row { margin: 4px 0 6px; }
  .go-actions-row { gap: 5px; margin: 6px 0 4px; }
  .go-btn { padding: 8px 4px 6px; border-radius: 10px; }
  .go-btn-icon { font-size: 18px; }
  .go-btn-lbl  { font-size: 8px; }
  #victoryCanvas { margin: 0; width: 100%; max-width: 360px; height: auto; }
}

/* exit/quit icon */
.exit-ic { width: 18px; height: 18px; vertical-align: -4px; }
.ghost-btn .exit-ic { margin-right: 6px; }
.icon-btn .exit-ic { width: 17px; height: 17px; vertical-align: middle; margin: 0; }

/* Victory (Job Achieved) — old single-column design, compacted to fit landscape */
@media (max-height: 540px) {
  .poster.victory { max-height: 96vh; max-height: 96dvh; }
  .poster.victory #victoryCanvas { width: 220px; height: 110px; margin: 6px auto; }
  .poster.victory .victory-text { font-size: 12px; margin: 4px 0 6px; }
  .poster.victory .job-badge { margin: 4px 0 6px; padding: 5px 12px; }
  .poster.victory .modal-title { margin-bottom: 6px; }
  .poster.victory .primary-btn,
  .poster.victory .ghost-btn,
  .poster.victory .share-btn { padding: 9px 16px; min-height: 38px; margin: 4px; font-size: 13px; }
}

/* Victory (Job Achieved) popup — all buttons the same (full) width */
.poster.victory .primary-btn,
.poster.victory .ghost-btn,
.poster.victory .share-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 6px auto;
  box-sizing: border-box;
}

/* 2×2 button grid — 2 rows, 2 equal-size buttons per row */
.btn-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 8px auto 0;
  box-sizing: border-box;
}
.btn-grid-2x2 > button {
  width: 100%;
  margin: 0;
  min-height: 44px;
  font-size: 14px;
  padding: 10px 8px;
  box-sizing: border-box;
}
@media (max-height: 540px) {
  .btn-grid-2x2 { gap: 7px; max-width: 100%; }
  .btn-grid-2x2 > button { min-height: 38px; font-size: 12px; padding: 8px 6px; }
}

/* ═══════════════════════════════════════════════════
   B CERTIFICATE SCREEN — awarded after beating Orange Joker
   ═══════════════════════════════════════════════════ */
.cert-poster {
  background: linear-gradient(160deg, #fdf5d8 0%, #f5e0a0 40%, #fdf5d8 100%);
  border: 4px solid #c8a030 !important;
  box-shadow: 0 12px 0 rgba(0,0,0,0.5), 0 0 50px rgba(255,200,0,0.3) !important;
  color: #2a1500;
  max-width: 440px;
  text-align: center;
  overflow-y: auto;
  max-height: 92vh;
  max-height: 92dvh;
}
.cert-border {
  border: 2px dashed rgba(180,130,0,0.5);
  border-radius: 14px;
  padding: 16px 20px;
}
.cert-top-line {
  font-size: 12px;
  color: #c8a030;
  letter-spacing: 4px;
  margin-bottom: 4px;
}
/* Trophy at top */
.cert-trophy {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 10px rgba(180,120,0,0.6));
  animation: cert-trophy-pulse 2.5s ease-in-out infinite;
}
@keyframes cert-trophy-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 10px rgba(180,120,0,0.6)); }
  50%       { transform: scale(1.08); filter: drop-shadow(0 6px 18px rgba(220,160,0,0.85)); }
}
.cert-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #7a4000;
  margin: 0 0 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.cert-subtitle {
  font-size: 10px;
  letter-spacing: 4px;
  color: #c8a030;
  margin-bottom: 6px;
  font-weight: 900;
}
/* Medal icon — displayed below subtitle */
.cert-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 3px 8px rgba(180,120,0,0.5));
  animation: cert-medal-swing 3s ease-in-out infinite;
}
@keyframes cert-medal-swing {
  0%, 100% { transform: rotate(-6deg); }
  50%       { transform: rotate(6deg); }
}
.cert-roach-logo { margin: 2px auto 0; }
.cert-roach-logo .cjp-icon { width: 54px; height: 54px; margin: 0 auto; }
.cert-awarded-to {
  font-size: 11px;
  color: #9a6010;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 4px 0 2px;
}
.cert-player-name {
  color: #7a2800;
  font-size: 16px;
  display: inline-block;
  letter-spacing: 1px;
}
.cert-body {
  font-size: 14px;
  color: #3a1a00;
  line-height: 1.7;
  margin: 4px 0 12px;
}
.cert-body b { color: #7a3000; }
.cert-stamp {
  font-size: 10px;
  letter-spacing: 3px;
  color: #9a6010;
  font-weight: 900;
  border-top: 1px solid #c8a030;
  border-bottom: 1px solid #c8a030;
  padding: 5px 0;
  margin: 8px 0 10px;
}
.cert-continue-msg { font-size: 12px; color: #5a2a00; margin-bottom: 14px; }
.cert-continue-msg b { color: #cc4400; }
/* 2×2 button grid: row1 = CONTINUE + SHARE, row2 = PLAY AGAIN + EXIT */
.cert-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.cert-continue-btn {
  background: linear-gradient(180deg, #ff8800, #cc4400) !important;
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 13px;
}
.cert-share-btn {
  background: linear-gradient(180deg, #1a7fd4, #0d4fa0) !important;
  color: #fff !important;
  border: none !important;
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 13px;
  box-shadow: 0 4px 0 #083580, 0 6px 14px rgba(30,80,200,0.35) !important;
}
.cert-share-btn:hover { filter: brightness(1.1); }
.cert-share-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #083580 !important; }
.cert-ghost-btn {
  border-color: rgba(180,100,0,0.4) !important;
  color: #7a3000 !important;
  width: 100%;
  font-size: 13px;
}
.cert-ghost-btn:hover { background: rgba(180,100,0,0.1) !important; }

/* Compact on landscape phones */
@media (max-height: 460px) {
  .cert-trophy { font-size: 36px; }
  .cert-icon   { font-size: 28px; }
  .cert-title  { font-size: 20px; }
  .cert-body   { font-size: 12px; margin: 2px 0 8px; }
  .cert-border { padding: 10px 14px; }
  .cert-stamp  { padding: 3px 0; margin: 5px 0 7px; }
}

/* ==========================================================
   Player Registration + Profile + Leaderboard  (player.js)
   ========================================================== */

/* Player name badge on start screen */
.player-name-row { font-size: 11px; color: #888; text-align: center; margin-top: 6px; }
.player-name-badge { color: #ffd76e; font-weight: 900; }

/* ── Registration overlay ── */
.reg-poster { max-width: 380px !important; }
.reg-logo   { text-align: center; margin-bottom: 6px; }
.cjp-icon   { object-fit: contain; display: block; }
.reg-logo .cjp-icon { width: 80px; height: 80px; margin: 0 auto; }
.reg-sub    { font-size: 12px; color: #b8a898; text-align: center; margin-bottom: 18px; }
.reg-field  { margin-bottom: 6px; }
.reg-input  { width: 100%; background: #0a0814; border: 1.5px solid #3a2e4a; color: #f5efe0;
              border-radius: 10px; padding: 12px 14px; font-size: 15px; outline: none;
              font-family: 'Trebuchet MS', Arial, sans-serif; transition: border-color .15s; }
.reg-input:focus { border-color: #ff8a2a; }
.reg-status { font-size: 11px; font-weight: 700; min-height: 16px; margin: 4px 2px 8px; }
.reg-status.ok  { color: #76e23a; }
.reg-status.err { color: #ff5555; }
.reg-status.checking { color: #ffd76e; }
.reg-status.warn { color: #ff9a2a; }
.reg-error  { color: #ff5555; font-size: 12px; font-weight: 700; min-height: 18px; margin-bottom: 10px; text-align: center; }
.reg-btn    { width: 100%; font-size: 15px; }
.reg-note   { font-size: 10px; color: #666; text-align: center; margin-top: 10px; line-height: 1.5; }
.reg-exit-btn { width: 100%; margin-top: 14px; font-size: 13px; opacity: 0.70; }
.reg-exit-btn:hover, .reg-exit-btn:active { opacity: 1; }

/* ── Profile screen ── */
.profile-poster  { max-width: 440px !important; padding: 14px 16px !important; overflow-y: auto; max-height: 92vh; }
.profile-top-bar { display: flex; align-items: center; margin-bottom: 14px; }
/* Clearly-visible close button on the profile screen */
#profileCloseBtn {
  color: #fff; font-size: 18px; font-weight: 900; line-height: 1;
  width: 36px; height: 36px; min-width: 36px;
  background: linear-gradient(160deg, #ff5a5a, #c01f1f);
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 12px rgba(255,70,70,0.55);
}
#profileCloseBtn:active { transform: scale(0.92); }
.profile-content { font-size: 13px; }
.p-loading  { text-align: center; color: #888; padding: 24px; }
.p-header   { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.p-avatar   { line-height: 1; }
.p-avatar .cjp-icon { width: 64px; height: 64px; }
.p-info     { flex: 1; }
.p-name     { font-size: 20px; font-weight: 900; color: #ffd76e; }
.p-rank-icon{ font-size: 18px; margin-top: 4px; }
.rank-num   { font-size: 16px; font-weight: 900; color: #ff8a2a; }
.p-sub      { font-size: 10px; color: #888; }
.p-grid4    { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
@media(max-width:420px){ .p-grid4 { grid-template-columns: repeat(2,1fr); } }
.p-stat     { background: #140d28; border: 1px solid #2a1a4a; border-radius: 10px; padding: 10px 6px; text-align: center; }
.ps-val     { font-size: 15px; font-weight: 900; color: #ff8a2a; }
.ps-lbl     { font-size: 9px; color: #888; margin-top: 3px; letter-spacing: .4px; }
.p-section-title { font-size: 11px; font-weight: 900; color: #ffd76e; letter-spacing: 1px;
                   border-bottom: 1px solid #2a1a4a; padding-bottom: 4px; margin: 14px 0 10px; }
.p-diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 4px; }
.p-diff      { background: #140d28; border-radius: 10px; padding: 10px 8px; text-align: center; border: 1px solid #2a1a4a; }
.p-diff.easy   { border-color: #1a3a1a; }
.p-diff.medium { border-color: #2a2a1a; }
.p-diff.hard   { border-color: #3a1a1a; }
.pd-label { font-size: 9px; font-weight: 900; letter-spacing: 1px; margin-bottom: 6px; }
.p-diff.easy   .pd-label { color: #76e23a; }
.p-diff.medium .pd-label { color: #ffd76e; }
.p-diff.hard   .pd-label { color: #ff5555; }
.pd-row  { margin: 4px 0; }
.pd-row span  { font-size: 14px; font-weight: 900; color: #f5efe0; }
.pd-row small { font-size: 9px; color: #666; display: block; }
.p-sessions { display: flex; flex-direction: column; gap: 6px; }
.p-sess-row { display: flex; align-items: center; gap: 8px; background: #140d28; border-radius: 8px;
              padding: 7px 10px; border: 1px solid #2a1a4a; flex-wrap: wrap; }
.p-diff-badge { font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 5px; letter-spacing: .5px; }
.p-diff-badge.easy   { background: #1a3a1a; color: #76e23a; }
.p-diff-badge.medium { background: #2a2a1a; color: #ffd76e; }
.p-diff-badge.hard   { background: #3a1a1a; color: #ff5555; }
.p-sess-score { font-weight: 900; color: #ffd76e; font-size: 13px; }
.p-sess-dur, .p-sess-date { font-size: 10px; color: #888; margin-left: auto; }
.p-device-info { background: #140d28; border-radius: 8px; padding: 10px; border: 1px solid #2a1a4a; }
.p-rename-row   { display: flex; gap: 8px; }
.p-rename-input { flex: 1; background: #0a0814; border: 1.5px solid #3a2e4a; color: #f5efe0;
                  border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none;
                  font-family: 'Trebuchet MS', Arial, sans-serif; }
.p-rename-input:focus { border-color: #ff8a2a; }
.p-rename-btn   { background: linear-gradient(180deg,#ff8a2a,#cc4400); color: #0a0814; border: none;
                  border-radius: 8px; padding: 9px 16px; font-weight: 900; font-size: 12px;
                  cursor: pointer; white-space: nowrap; }
.p-name-hist    { display: flex; flex-direction: column; gap: 4px; }
.p-hist-row     { display: flex; justify-content: space-between; background: #140d28;
                  border-radius: 6px; padding: 6px 10px; font-size: 11px; color: #b8a898; }
.p-hist-row b   { color: #ffd76e; }

/* ── Ranked leaderboard ── */
.rlb            { font-size: 12px; }
.rlb-title      { font-size: 10px; font-weight: 900; color: #ffd76e; letter-spacing: 1px;
                  margin: 12px 0 6px; border-bottom: 1px solid #2a1a4a; padding-bottom: 3px; }
.rlb-period     { font-weight: 400; color: #888; }
.rlb-list       { display: flex; flex-direction: column; gap: 3px; }
.rlb-row        { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
                  border-radius: 6px; background: #140d28; }
.rlb-you        { background: rgba(255,138,42,0.14) !important; border: 1px solid rgba(255,138,42,0.3); }
.rlb-rank       { width: 28px; text-align: center; font-weight: 900; color: #ffd76e; font-size: 13px; }
.rlb-name       { flex: 1; color: #f5efe0; }
.rlb-score      { font-weight: 900; color: #ff8a2a; }
.rlb-sep        { text-align: center; color: #555; margin: 2px 0; font-size: 11px; }
.rlb-your-rank  { font-size: 10px; color: #888; text-align: right; margin-top: 3px; font-style: italic; }
.rlb-diff-cols  { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 6px; }
.rlb-diff-col   { background: #140d28; border-radius: 8px; padding: 8px 6px; }
.rlb-diff-hdr   { font-size: 9px; font-weight: 900; letter-spacing: 1px; text-align: center;
                  margin-bottom: 5px; padding: 2px 0; border-radius: 4px; }
.rlb-diff-hdr.easy   { background: #1a3a1a; color: #76e23a; }
.rlb-diff-hdr.medium { background: #2a2a1a; color: #ffd76e; }
.rlb-diff-hdr.hard   { background: #3a1a1a; color: #ff5555; }
.rlb-diff-row   { font-size: 10px; color: #b8a898; padding: 2px 0; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.rlb-diff-row b { color: #ff8a2a; }

/* ================================================================
   PREMIUM GAMING START SCREEN (gs-*)
   ================================================================ */

/* ── HEADER ───────────────────────────────────────────────── */
.gs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  background: linear-gradient(135deg,rgba(255,107,0,0.12) 0%,rgba(80,0,160,0.18) 100%);
  border-bottom: 1px solid rgba(255,130,0,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: 8px;
  flex-shrink: 0;
}

/* Avatar button */
.gs-avatar-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 0; min-width: 54px;
}
.gs-avatar-ring {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg,#ff6b00,#a020f0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(255,107,0,0.5), 0 0 24px rgba(160,32,240,0.3);
  padding: 2px;
}
.gs-avatar-svg { width: 26px; height: 26px; color: #fff; }
.gs-avatar-name {
  font-size: 9px; font-weight: 900; color: #ffd76e;
  text-transform: uppercase; letter-spacing: 0.5px;
  max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Title */
.gs-title-block {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; text-align: center; line-height: 1.1;
}
.gs-title-orange {
  font-size: 17px; font-weight: 900; color: #ff6b00;
  letter-spacing: 2px; text-shadow: 0 0 14px rgba(255,107,0,0.6);
  font-family: inherit;
}
.gs-title-white {
  font-size: 14px; font-weight: 900; color: #fff;
  letter-spacing: 3px; text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Header icon buttons */
.gs-hdr-icons { display: flex; gap: 8px; align-items: center; }
.gs-hdr-icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,130,0,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #ffd76e;
  box-shadow: 0 0 8px rgba(255,107,0,0.2);
  transition: all 0.18s;
}
.gs-hdr-icon-btn:active {
  background: rgba(255,107,0,0.22);
  box-shadow: 0 0 16px rgba(255,107,0,0.5);
  transform: scale(0.94);
}

/* ── DIFFICULTY + START ───────────────────────────────────── */
.gs-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.gs-diff-row { display: flex; gap: 6px; flex: 1; }
.gs-diff-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px 6px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px; cursor: pointer; color: rgba(255,255,255,0.55);
  transition: all 0.18s; font-family: inherit;
}
.gs-diff-btn.active {
  background: linear-gradient(135deg,rgba(255,107,0,0.25),rgba(180,50,0,0.3));
  border-color: #ff6b00;
  color: #fff;
  box-shadow: 0 0 12px rgba(255,107,0,0.35);
}
.gs-diff-icon { font-size: 14px; }
.gs-diff-name { font-size: 9px; font-weight: 900; letter-spacing: 0.8px; }

.gs-start-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 18px;
  background: linear-gradient(135deg,#b85000,#ff7b1a);
  border: none; border-radius: 14px; cursor: pointer;
  color: #fff; font-weight: 900; font-size: 13px; letter-spacing: 1px;
  box-shadow: 0 4px 0 #7a2e00, 0 6px 20px rgba(255,107,0,0.4);
  transition: all 0.15s; font-family: inherit; flex-shrink: 0;
  white-space: nowrap;
}
.gs-start-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a2e00; }

/* ── SCORE DASHBOARD ──────────────────────────────────────── */
.gs-dashboard {
  display: flex; flex-direction: column;
  margin-top: 6px;
  /* table fills poster width — poster itself is narrowed to 560px */
}

/* Controls row: tabs + period dropdown — centred, auto width */
.gs-controls-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; flex-shrink: 0;
  justify-content: center;   /* centre the whole row */
}

/* Tab bar — auto width, does NOT stretch */
.gs-tab-bar {
  display: inline-flex; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
}

/* Individual tab — auto width, equal padding each side */
.gs-tab {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 16px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); font-size: 10px; font-weight: 900;
  letter-spacing: 0.8px; font-family: inherit;
  transition: all 0.18s; white-space: nowrap;
  border-bottom: 2px solid transparent;
  position: relative;
}
.gs-tab:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.08);
}
.gs-tab.active {
  background: linear-gradient(180deg,rgba(255,107,0,0.22),rgba(180,50,0,0.28));
  color: #ff9922;
  border-bottom-color: #ff8a2a;
  text-shadow: 0 0 10px rgba(255,140,0,0.55);
}
.gs-tab svg { opacity: 0.7; }
.gs-tab.active svg { opacity: 1; stroke: #ff9922; }

/* Custom in-place period dropdown — no system picker */
.gs-period-wrap  { position: relative; flex-shrink: 0; }
.gs-period-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  background: rgba(255,107,0,0.10);
  border: 1px solid rgba(255,107,0,0.45);
  border-radius: 10px; cursor: pointer;
  color: #ff9922; font-size: 9px; font-weight: 900;
  font-family: inherit; letter-spacing: 0.6px;
  white-space: nowrap; transition: background 0.18s;
}
.gs-period-btn:active { background: rgba(255,107,0,0.22); }
.gs-period-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  flex-direction: column;
  background: #1e0f38;
  border: 1px solid rgba(255,107,0,0.45);
  border-radius: 10px; overflow: hidden;
  z-index: 200; min-width: 100%;
  box-shadow: 0 10px 28px rgba(0,0,0,0.75);
}
.gs-period-menu.open { display: flex; }
.gs-period-opt {
  padding: 9px 14px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.65); font-size: 9px; font-weight: 900;
  font-family: inherit; letter-spacing: 0.6px;
  text-align: left; white-space: nowrap; transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  touch-action: manipulation;   /* prevent 300ms delay on mobile */
  -webkit-tap-highlight-color: transparent;
}
.gs-period-opt:last-child { border-bottom: none; }
.gs-period-opt:active,
.gs-period-opt.active { background: rgba(255,107,0,0.2); color: #ff9922; }

/* City banner */
.gs-city-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; margin-bottom: 8px;
  background: linear-gradient(135deg,rgba(255,107,0,0.15),rgba(80,0,160,0.15));
  border: 1px solid rgba(255,107,0,0.3);
  border-radius: 10px; color: #ffd76e;
  font-size: 11px; font-weight: 900; letter-spacing: 0.8px;
  flex-shrink: 0;
}
.gs-lb-tag {
  color: rgba(255,255,255,0.5); font-weight: 400; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* Leaderboard table — header lives INSIDE gs-lb-body so both share the exact same parent width.
   Same grid-template on header and rows = pixel-perfect column alignment guaranteed. */
.gs-lb-head,
.gs-lb-row {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 2fr;  /* RANK | PLAYER | SCORE | LEVEL */
}
.gs-lb-head {
  padding: 5px 8px;
  background: rgba(28,18,52,0.98);      /* opaque bg so sticky header covers scrolling rows */
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky; top: 0; z-index: 2; /* sticks when body scrolls */
  font-size: 7.5px; font-weight: 900; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.4);
}
/* Header cell alignment — mirrors row cell justify-content exactly */
.gsc-rank  { display: flex; align-items: center; justify-content: center; }
.gsc-name  { display: flex; align-items: center; }
.gsc-score { display: flex; align-items: center; justify-content: flex-end; }
.gsc-level { display: flex; align-items: center; justify-content: flex-end; }

/* Leaderboard body — contains header as first sticky child */
.gs-lb-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;   /* full radius — header inside covers top corners */
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.3) transparent;
}
.gs-lb-body::-webkit-scrollbar { width: 3px; }
.gs-lb-body::-webkit-scrollbar-track { background: transparent; }
.gs-lb-body::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.3); border-radius: 3px; }

/* Leaderboard row */
.gs-lb-row {
  padding: 7px 8px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.gs-lb-row:nth-child(odd)  { background: rgba(255,255,255,0.025); }
.gs-lb-row:nth-child(even) { background: transparent; }
.gs-lb-row:last-child { border-bottom: none; }
.gs-lb-row.gs-you {
  background: rgba(255,107,0,0.1) !important;
  box-shadow: inset 3px 0 0 #ff6b00;  /* inset = no layout shift, column grid stays aligned */
}

/* Row cells — grid tracks handle sizing; cells just control alignment */
.gs-cell-rank {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.gs-trophy-1 { font-size: 16px; filter: drop-shadow(0 0 6px #ffd700); }
.gs-trophy-2 { font-size: 16px; filter: drop-shadow(0 0 6px #c0c0c0); }
.gs-trophy-3 { font-size: 16px; filter: drop-shadow(0 0 6px #cd7f32); }
.gs-rank-num { color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 900; }

.gs-cell-name {
  display: flex; align-items: center;  /* matches .gsc-name exactly → pixel-perfect alignment */
  min-width: 0;
  font-size: 11px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 6px;
}
.gs-cell-name.gs-top1 { color: #ffd700; }
.gs-cell-name.gs-top2 { color: #c0c0c0; }
.gs-cell-name.gs-top3 { color: #cd7f32; }

.gs-cell-score {
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 12px; font-weight: 900; color: #ff9922;
}
.gs-lb-row.gs-you .gs-cell-score { color: #ffd76e; }

/* Level — plain coloured text, no box */
.gs-cell-level {
  display: flex; align-items: center; justify-content: flex-end;
}
.gs-lvl-hard    { color: #e74c3c; font-size: 8.5px; font-weight: 900; letter-spacing: 0.4px; }
.gs-lvl-regular { color: #f1c40f; font-size: 8.5px; font-weight: 900; letter-spacing: 0.4px; }
.gs-lvl-easy    { color: #2ecc71; font-size: 8.5px; font-weight: 900; letter-spacing: 0.4px; }

/* go-header-row: new-high-score banner + location badge on game over screen */
.go-header-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; min-height: 0; margin-bottom: 2px;
}

/* Loading / empty states */
.gs-lb-loading, .gs-lb-empty {
  padding: 24px; text-align: center;
  color: rgba(255,255,255,0.3); font-size: 12px;
}

/* ── BOTTOM ROW ───────────────────────────────────────────── */
.gs-bottom-row {
  display: flex; justify-content: center;
  padding: 8px 12px 10px; flex-shrink: 0;
}
.gs-share-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 24px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 20px; cursor: pointer;
  color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; font-family: inherit;
  transition: all 0.18s;
}
.gs-share-btn:active { background: rgba(255,255,255,0.12); }

/* Hide old poster elements if they leak */
/* start-share-row: SHARE APP · START GAME · SIGN IN/OUT — side by side, no gap, centred */
.start-share-row {
  display: flex;
  gap: 0;
  margin: 0 0 4px;
  justify-content: center;
  align-items: center;
}
/* All three buttons equal width, side by side */
.start-share-row .primary-btn,
.start-share-row .ghost-btn,
.start-share-row #cjpAuthLink {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
  min-height: 34px;
}
/* Sign in/out shares the row — single-line, centred, same as the others */
.start-share-row #cjpAuthLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  width: auto;
  margin: 0;
}
/* Email sub-line no longer rendered inside the button (kept for reference) */
.start-share-row #cjpAuthLink .who { display: none; }

/* ── SINGLE TOP ROW: profile+name | COCKROACH JANTA PLAY | help+exit ── */
.gs-topbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.go-poster .gs-topbar-row { margin-bottom: 1px; }
.gs-top-left {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; flex-shrink: 0;
}
.gs-top-name {
  font-size: 8px; font-weight: 900; color: #ffd76e;
  letter-spacing: 0.4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 52px;
  text-transform: uppercase;
}

/* Home screen — larger profile/help/exit icons + extra name spacing */
#startScreen .poster { padding-top: 6px; }
#startScreen .gs-top-left { gap: 2px; margin-bottom: 2px; }
#startScreen .gs-top-name { font-size: 8px; max-width: 56px; letter-spacing: 0.4px; }
#startScreen .gs-fancy-icon { width: 26px; height: 26px; }
.gs-top-title {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; flex: 1; line-height: 1.1;
}
.gs-top-orange {
  font-size: clamp(13px, 3.5vw, 18px); font-weight: 900; color: #ff8a2a;
  letter-spacing: 2px; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,130,0,0.5);
  display: block;
}
.gs-top-white {
  font-size: clamp(10px, 2.8vw, 14px); font-weight: 900; color: #f5efe0;
  letter-spacing: 3px; text-shadow: 0 2px 0 #000;
  display: block;
}
.gs-top-right {
  display: flex; gap: 10px; flex-shrink: 0; align-items: flex-start;
}
/* Help / Exit — icon with a label below (mirrors the profile + name on the left) */
.gs-top-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.gs-top-lbl {
  font-size: 8px; font-weight: 900; color: #ffd76e;
  letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap;
}
#startScreen .gs-top-right { gap: 10px; }
#startScreen .gs-top-item { gap: 2px; }
#startScreen .gs-top-lbl { font-size: 8px; letter-spacing: 0.4px; }

/* ── HOME SCREEN GAME TITLE — now lives inside the topbar row ─────── */
.gs-home-title {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; line-height: 1.05;
}
/* Title reduced in size + made bolder per request
   (was orange clamp(28px,8vw,42px) / white clamp(20px,6vw,32px)). */
.gs-ht-orange {
  font-size: clamp(20px, 5.5vw, 30px);
  font-weight: 900; color: #ff8a2a;
  letter-spacing: 1.5px;
  -webkit-text-stroke: 0.6px #ff8a2a;
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(255,130,0,0.5);
  display: block;
}
.gs-ht-white {
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 900; color: #f5efe0;
  letter-spacing: 2px;
  -webkit-text-stroke: 0.6px #f5efe0;
  text-shadow: 0 2px 0 #000;
  display: block;
}

/* ── GAME OVER — single line title ───────────────────────────────── */
.gs-go-title-single {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 900; letter-spacing: 2px;
  color: #ff5a5a;
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(255,50,50,0.4);
  white-space: nowrap;
  display: block; line-height: 1.1;
}

/* ── ICONS — gaming-style circular buttons ───────────────────────── */
/* ── Transparent hexagonal icons — cyberpunk / esports style ── */
/* SVG background draws the hex outline; fill is dark glass; neon glow via filter */
.gs-fancy-icon {
  width: 26px; height: 26px;
  background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  position: relative;
  overflow: visible;
  transition: transform 0.12s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.gs-fancy-icon::before { display: none; }
.gs-fancy-icon:active  { transform: scale(0.82); }

/* PNG glossy icons (home/profile/quit/howtoplay + game-over actions) — show the artwork
   itself; drop the old neon-box background + colour glow that the variant classes set. */
.gs-fancy-profile, .gs-fancy-help, .gs-fancy-exit,
.go-act-home, .go-act-retry, .go-act-share { background: none !important; filter: none !important; }
.gs-fancy-icon > img, .go-act-icon > img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.gs-fancy-icon:active > img, .go-act-btn:active .go-act-icon > img {
  filter: drop-shadow(0 0 6px rgba(255,180,60,.6));
}

/* Rounded-square neon box (matches reference). Profile/How-to-play = gold; Exit = orange-red. */
.gs-fancy-profile {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 44"%3E%3Crect x="2.5" y="2.5" width="35" height="39" rx="9" fill="rgba(5,12,35,0.55)" stroke="%23ffb13d" stroke-width="2"/%3E%3C/svg%3E');
  color: #ffc24d;
  filter: drop-shadow(0 0 4px rgba(255,170,50,.85)) drop-shadow(0 0 14px rgba(255,140,0,.45));
}
.gs-fancy-profile:active {
  filter: drop-shadow(0 0 7px rgba(255,190,70,1)) drop-shadow(0 0 20px rgba(255,150,0,.6));
}

/* How to Play — gold book + ? */
.gs-fancy-help {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 44"%3E%3Crect x="2.5" y="2.5" width="35" height="39" rx="9" fill="rgba(5,12,35,0.55)" stroke="%23ffb13d" stroke-width="2"/%3E%3C/svg%3E');
  color: #ffc24d;
  filter: drop-shadow(0 0 4px rgba(255,170,50,.85)) drop-shadow(0 0 14px rgba(255,140,0,.45));
}
.gs-fancy-help:active {
  filter: drop-shadow(0 0 7px rgba(255,190,70,1)) drop-shadow(0 0 20px rgba(255,150,0,.6));
}

/* Quit / Exit — door + arrow, warm orange-red */
.gs-fancy-exit {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 44"%3E%3Crect x="2.5" y="2.5" width="35" height="39" rx="9" fill="rgba(5,12,35,0.55)" stroke="%23ff7a3d" stroke-width="2"/%3E%3C/svg%3E');
  color: #ff8a4d;
  filter: drop-shadow(0 0 4px rgba(255,110,50,.85)) drop-shadow(0 0 14px rgba(255,80,30,.45));
}
.gs-fancy-exit:active {
  filter: drop-shadow(0 0 7px rgba(255,130,70,1)) drop-shadow(0 0 20px rgba(255,90,40,.6));
}

/* ── GAME-OVER IDENTITY ROW (name + city badge) ───────────────────── */
.go-identity-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-bottom: 6px;
}
.go-location-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,107,0,0.15);
  border: 1px solid rgba(255,107,0,0.35);
  border-radius: 12px; padding: 3px 10px;
  color: #ffd76e; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── FANCY GAME-OVER ACTION BUTTONS ──────────────────────────────── */
.go-actions-row {
  display: flex; justify-content: center; gap: 40px;
  margin: 10px 0 12px;
}
.go-act-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0; -webkit-tap-highlight-color: transparent;
}
/* ── Action icons: transparent hexagonal neon — cyberpunk / esports ── */
.go-act-icon {
  width: 26px; height: 26px;
  background: none;
  position: relative; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, filter 0.12s;
}
.go-act-icon::before { display: none; }
.go-act-btn:active .go-act-icon { transform: scale(0.82); }
.go-act-lbl {
  font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase; margin-top: 2px;
}

/* Rounded-square neon action icons (matches reference). Home/Retry/Share = warm gold-orange. */
.go-act-home {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 50"%3E%3Crect x="2.5" y="2.5" width="39" height="45" rx="10" fill="rgba(5,12,35,0.55)" stroke="%23ffb13d" stroke-width="2.2"/%3E%3C/svg%3E');
  color: #ffc24d;
  filter: drop-shadow(0 0 5px rgba(255,170,50,.85)) drop-shadow(0 0 16px rgba(255,140,0,.45));
}
.go-act-btn:active .go-act-home {
  filter: drop-shadow(0 0 8px rgba(255,190,70,1)) drop-shadow(0 0 24px rgba(255,150,0,.6));
}
.go-act-home + .go-act-lbl { color: #ffc24d; }

/* Retry — gold-orange */
.go-act-retry {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 50"%3E%3Crect x="2.5" y="2.5" width="39" height="45" rx="10" fill="rgba(5,12,35,0.55)" stroke="%23ffb13d" stroke-width="2.2"/%3E%3C/svg%3E');
  color: #ffc24d;
  filter: drop-shadow(0 0 5px rgba(255,170,50,.85)) drop-shadow(0 0 16px rgba(255,140,0,.45));
}
.go-act-btn:active .go-act-retry {
  filter: drop-shadow(0 0 8px rgba(255,190,70,1)) drop-shadow(0 0 24px rgba(255,150,0,.6));
}
.go-act-retry + .go-act-lbl { color: #ffc24d; }

/* Share — gold-orange */
.go-act-share {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 50"%3E%3Crect x="2.5" y="2.5" width="39" height="45" rx="10" fill="rgba(5,12,35,0.55)" stroke="%23ffb13d" stroke-width="2.2"/%3E%3C/svg%3E');
  color: #ffc24d;
  filter: drop-shadow(0 0 5px rgba(255,170,50,.85)) drop-shadow(0 0 16px rgba(255,140,0,.45));
}
.go-act-btn:active .go-act-share {
  filter: drop-shadow(0 0 8px rgba(255,190,70,1)) drop-shadow(0 0 24px rgba(255,150,0,.6));
}
.go-act-share + .go-act-lbl { color: #ffc24d; }

/* Exit — red (legacy, kept for compat) */
.go-act-exit { color: #ff3355; }

/* ── GAME-OVER LEADERBOARD SHELL ─────────────────────────────────── */
.go-lb-shell { margin-top: 2px; }
.go-lb-city-banner {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; margin-bottom: 6px;
  background: rgba(255,107,0,0.12);
  border: 1px solid rgba(255,107,0,0.3);
  border-radius: 8px; color: #ffd76e;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}