/* ============================================================
   ALG* Arcade — Shared Styles
   Used by game.html, defender.html, leaderboard.html
   ============================================================ */

:root {
  --red: #ff2d2d;
  --red-glow: rgba(255, 45, 45, 0.4);
  --dark: #0a0a0a;
  --card: #111;
  --card-border: #1a1a1a;
  --text: #eee;
  --dim: #888;
  --green: #22c55e;
  --gold: #ffcc00;
  --blue: #4488ff;
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  z-index: 100;
}
.nav-logo {
  font-family: 'Space Mono', monospace;
  font-weight: 700; font-size: 1.1rem;
  color: var(--red);
  text-decoration: none;
  letter-spacing: 2px;
}
.nav-back {
  font-size: 0.85rem;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--text); }

/* ── WALLET DROPDOWN ── */
.nav-wallet-wrap { position: relative; }
.nav-wallet-btn {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid #333;
  border-radius: 6px;
  background: transparent;
  color: #bbb;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  touch-action: manipulation;
}
.nav-wallet-btn:hover { border-color: var(--red); color: var(--red); }
.nav-wallet-btn.connecting {
  border-color: var(--gold);
  color: var(--gold);
  opacity: 0.85;
  pointer-events: none;
}
.nav-wallet-btn.connected {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 204, 0, 0.06);
}
.nav-wallet-btn.verified {
  border-color: var(--green);
  color: var(--green);
  background: rgba(34, 197, 94, 0.06);
}
.nav-wallet-btn.loading {
  border-color: var(--gold);
  color: var(--gold);
  opacity: 0.8;
  pointer-events: none;
}

.wallet-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  min-width: 220px;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.wallet-dropdown.show { display: block; }
.wallet-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: #ccc;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  letter-spacing: 1px;
  touch-action: manipulation;
}
.wallet-dd-item:hover { background: rgba(255, 45, 45, 0.06); color: #fff; }
.wallet-dd-item:active { background: rgba(255, 45, 45, 0.12); }
.wallet-dd-divider { height: 1px; background: #222; }
.wallet-dd-item.disconnect { color: #888; font-size: 0.7rem; }
.wallet-dd-item.disconnect:hover { color: #ff4444; }
.wallet-icon {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wallet-icon.pera {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCA1NiA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQ2LjAwMDEgMjhDNDYuMDAwMSAzNy45NDExIDM3Ljk0MTIgNDYgMjguMDAwMSA0NkMxOC4wNTg5IDQ2IDEwLjAwMDEgMzcuOTQxMSAxMC4wMDAxIDI4QzEwLjAwMDEgMTguMDU4OSAxOC4wNTg5IDEwIDI4LjAwMDEgMTBDMzcuOTQxMiAxMCA0Ni4wMDAxIDE4LjA1ODkgNDYuMDAwMSAyOFoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTUuODQgMjhDNTUuODQgNDMuMzc1NiA0My4zNzU2IDU1Ljg0IDI4IDU1Ljg0QzEyLjYyNDQgNTUuODQgMC4xNjAwMzQgNDMuMzc1NiAwLjE2MDAzNCAyOEMwLjE2MDAzNCAxMi42MjQ0IDEyLjYyNDQgMC4xNjAwMzQgMjggMC4xNjAwMzRDNDMuMzc1NiAwLjE2MDAzNCA1NS44NCAxMi42MjQ0IDU1Ljg0IDI4Wk0yOCA0NkMzNy45NDEyIDQ2IDQ2IDM3Ljk0MTIgNDYgMjhDNDYgMTguMDU4OSAzNy45NDEyIDEwIDI4IDEwQzE4LjA1ODkgMTAgMTAgMTguMDU4OSAxMCAyOEMxMCAzNy45NDEyIDE4LjA1ODkgNDYgMjggNDZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjkuMTk2OCAyMC45NjlDMjkuNjI2NyAyMi43NTQxIDI5LjQ4MTQgMjQuMzI0MyAyOC44NzIxIDI0LjQ3NjJDMjguMjYyOSAyNC42MjgxIDI3LjQyMDQgMjMuMzA0MSAyNi45OTA0IDIxLjUxOUMyNi41NjA0IDE5LjczNCAyNi43MDU4IDE4LjE2MzcgMjcuMzE1MSAxOC4wMTE5QzI3LjkyNDMgMTcuODYgMjguNzY2OCAxOS4xODQgMjkuMTk2OCAyMC45NjlaIiBmaWxsPSIjRkZFRTU1Ii8+CjxwYXRoIGQ9Ik0zNi4yOTY3IDIyLjUwMzhDMzUuMzQ0NSAyMS40OTI1IDMzLjQ1MDEgMjEuNzY2NiAzMi4wNjUzIDIzLjExNkMzMC42ODA2IDI0LjQ2NTQgMzAuMzMgMjYuMzc5MSAzMS4yODIzIDI3LjM5MDRDMzIuMjM0NSAyOC40MDE2IDM0LjEyOSAyOC4xMjc1IDM1LjUxMzcgMjYuNzc4MUMzNi44OTg0IDI1LjQyODcgMzcuMjQ5IDIzLjUxNSAzNi4yOTY3IDIyLjUwMzhaIiBmaWxsPSIjRkZFRTU1Ii8+CjxwYXRoIGQ9Ik0yOC43MjMzIDM3Ljk4ODhDMjkuMzMyNSAzNy44MzY5IDI5LjQ1NjUgMzYuMTc3OSAyOS4wMDAxIDM0LjI4MzJDMjguNTQzNyAzMi4zODg2IDI3LjY3OTkgMzAuOTc1OCAyNy4wNzA2IDMxLjEyNzdDMjYuNDYxMyAzMS4yNzk1IDI2LjMzNzQgMzIuOTM4NiAyNi43OTM3IDM0LjgzMzJDMjcuMjUwMSAzNi43Mjc5IDI4LjExNCAzOC4xNDA3IDI4LjcyMzMgMzcuOTg4OFoiIGZpbGw9IiNGRkVFNTUiLz4KPHBhdGggZD0iTTIyLjUxMjQgMjMuNDI5NkMyNC4yNzAyIDIzLjk0OSAyNS41NTQ2IDI0Ljg2MDMgMjUuMzgxMiAyNS40NjQ5QzI1LjIwNzggMjYuMDY5NiAyMy42NDIzIDI2LjEzODcgMjEuODg0NiAyNS42MTkzQzIwLjEyNjggMjUuMDk5OCAxOC44NDI0IDI0LjE4ODYgMTkuMDE1NyAyMy41ODRDMTkuMTg5MSAyMi45NzkzIDIwLjc1NDYgMjIuOTEwMiAyMi41MTI0IDIzLjQyOTZaIiBmaWxsPSIjRkZFRTU1Ii8+CjxwYXRoIGQ9Ik0zMy45MjExIDMwLjI1NzRDMzUuNzg2OCAzMC44MDg3IDM3LjE1ODYgMzEuNzQ1OCAzNi45ODUzIDMyLjM1MDRDMzYuODExOSAzMi45NTUxIDM1LjE1ODkgMzIuOTk4MyAzMy4yOTMzIDMyLjQ0N0MzMS40Mjc2IDMxLjg5NTcgMzAuMDU1NyAzMC45NTg2IDMwLjIyOTEgMzAuMzU0QzMwLjQwMjQgMjkuNzQ5MyAzMi4wNTU0IDI5LjcwNjEgMzMuOTIxMSAzMC4yNTc0WiIgZmlsbD0iI0ZGRUU1NSIvPgo8cGF0aCBkPSJNMjQuNDkwMyAyOC45ODg3QzI0LjA1NDQgMjguNTM1OSAyMi42MjQ2IDI5LjE5NDkgMjEuMjk2OCAzMC40NjA2QzE5Ljk2OSAzMS43MjYyIDE5LjI0NiAzMy4xMTkzIDE5LjY4MTkgMzMuNTcyMUMyMC4xMTc4IDM0LjAyNDkgMjEuNTQ3NiAzMy4zNjU5IDIyLjg3NTQgMzIuMTAwMkMyNC4yMDMyIDMwLjgzNDUgMjQuOTI2MiAyOS40NDE1IDI0LjQ5MDMgMjguOTg4N1oiIGZpbGw9IiNGRkVFNTUiLz4KPC9zdmc+');
}
.wallet-icon.defly {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODA5MCAtODQyOSkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODA5MCA4NDI4KSI+PHJlY3Qgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiByeD0iMTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMSkiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4MjI3LjczMiA4NDA4LjM3NCkiPjxwYXRoIGQ9Ik0xNjguNjMyLDQ3LjU2NiwxNTUuNzQyLDI2bC0xMi44OSwyMS41NjYsMTIuODktNy4zNTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xOTEuNjM0LDI1Ny4wODFsLTEwLjYzOS01LjYwNy0xMC42MzksNS42MDcsMTAuNjM5LTMuNDY0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LjI1MiAtMjA3LjMyMSkiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==');
}

/* ── QUEST BANNER ── */
.quest-banner {
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  padding: 8px 20px;
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: #ccc;
  text-align: center;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.quest-banner a { color: var(--red); text-decoration: underline; font-weight: 700; }
.quest-banner b { color: #fff; font-weight: 700; }
.quest-pre {
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.08), rgba(255, 204, 0, 0.03));
}
.quest-live {
  background: linear-gradient(90deg, rgba(255, 45, 45, 0.12), rgba(255, 45, 45, 0.04));
  border-bottom-color: rgba(255, 45, 45, 0.2);
}
.quest-closed {
  background: rgba(255, 255, 255, 0.02);
  color: var(--dim);
}
.qb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.qb-dot.live {
  background: var(--red);
  animation: qb-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--red-glow);
}
@keyframes qb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.qb-label {
  font-weight: 700;
  color: var(--red);
  letter-spacing: 1.5px;
  flex-shrink: 0;
}
.quest-pre .qb-label { color: var(--gold); }
.quest-closed .qb-label { color: var(--dim); }
.qb-msg { color: #ccc; }
.quest-closed .qb-msg { color: var(--dim); }

/* Mobile: compact the banner */
@media (max-width: 640px) {
  .quest-banner {
    font-size: 0.62rem;
    padding: 6px 12px;
    gap: 6px;
  }
  .qb-label { font-size: 0.6rem; letter-spacing: 1px; }
  .qb-msg { font-size: 0.62rem; }
}

/* ── BODY PADDING when quest banner is present ── */
body.has-quest-banner { padding-top: 40px; }
@media (max-width: 640px) {
  body.has-quest-banner { padding-top: 34px; }
}

/* ── Minimum tap targets for accessibility ── */
button, .btn, a.btn {
  min-height: 44px;
  touch-action: manipulation;
}