/* ---------- Flappy Dragon game ---------- */
/* The 1fr / auto / 1fr split keeps the game mathematically centered on the
   page regardless of monitor width — the leaderboard sits in the left 1fr,
   and the empty third column mirrors it so the middle column never drifts
   off-center the way a plain two-column layout would. */
.dragon-game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.dragon-game-stage {
  position: relative;
  width: clamp(320px, 60vw, 560px);
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(255, 126, 95, 0.15);
  /* The stage is a tap target (flap on click) — without this, mobile
     WebKit/Chrome paint their default blue highlight over it on every tap. */
  -webkit-tap-highlight-color: transparent;
  /* Flap fires on pointerdown for instant response — this stops the browser
     from also trying to pan/scroll from a touch that starts here, which is
     what makes an immediate pointerdown-based flap safe to use on mobile. */
  touch-action: none;
}

.dragon-game-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.dragon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(10, 6, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}
.dragon-overlay[hidden] { display: none; }

.dragon-overlay h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: #fff;
}

.dragon-overlay p {
  color: var(--text-muted);
  margin-bottom: 6px;
}

.dragon-start-hint {
  font-size: 1.1rem;
  color: #ffc857;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: dragonHintBounce 1s ease-in-out infinite;
}

@keyframes dragonHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .dragon-start-hint { animation: none; }
}

.dragon-name-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  /* The stage disables touch gestures (see .dragon-game-stage) so a tap-to-
     flap can fire instantly — restore normal touch handling for the form
     and everything in it so typing, focusing, and tapping buttons still
     works normally on mobile. */
  touch-action: manipulation;
}
.dragon-name-form[hidden] { display: none; }

.dragon-name-form input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--font-body);
  /* 16px+ stops iOS Safari auto-zooming the page when this gets focused. */
  font-size: 16px;
  width: 160px;
  touch-action: manipulation;
}
.dragon-name-form input:focus { outline: none; border-color: rgba(147, 51, 234, 0.6); }

.dragon-name-form button {
  touch-action: manipulation;
}

.dragon-avatar-upload {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  touch-action: manipulation;
}
.dragon-avatar-upload:hover { border-color: rgba(240, 160, 75, 0.6); color: var(--text); }
.dragon-avatar-upload.has-file { border-style: solid; border-color: #f0a04b; color: var(--text); }

.dragon-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.dragon-mute-btn {
  position: absolute;
  top: 44px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 6, 20, 0.55);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.dragon-mute-btn:hover { background: rgba(10, 6, 20, 0.8); }

.dragon-leaderboard {
  background: var(--bg-elevated);
  border: 1px solid rgba(240, 193, 75, 0.5);
  box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.15) inset, 0 0 20px rgba(240, 193, 75, 0.08);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 320px;
  justify-self: end;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.leaderboard-row:last-child { border-bottom: none; }

.leaderboard-rank {
  width: 24px;
  font-weight: 700;
  color: #f0a04b;
  flex-shrink: 0;
}

.leaderboard-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
}

.leaderboard-avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.leaderboard-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.leaderboard-level {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.leaderboard-score {
  font-weight: 700;
  color: var(--text);
}

@media (max-width: 860px) {
  .dragon-game-layout { grid-template-columns: 1fr; justify-items: center; }
  .dragon-game-stage { order: -1; width: 100%; max-width: 480px; }
  .dragon-leaderboard { max-width: 480px; justify-self: center; }
}

.dragon-coin-balance {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f0c14b;
  margin-bottom: 16px;
}

.dragon-auth-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.dragon-auth-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #a78bfa;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dragon-auth-link:hover { color: #c4b5fd; }

.dragon-store-open-btn {
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(240, 193, 75, 0.5);
  background: rgba(240, 193, 75, 0.12);
  color: #f0c14b;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dragon-store-open-btn:hover { background: rgba(240, 193, 75, 0.22); border-color: rgba(240, 193, 75, 0.8); }
.dragon-store-open-btn:active { transform: scale(0.96); }

.dragon-store-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 4, 12, 0.78);
  backdrop-filter: blur(6px);
}
.dragon-store-modal[hidden] { display: none; }

.dragon-store-panel {
  width: 100%;
  max-width: 760px;
  max-height: min(720px, 88vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.dragon-store-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.dragon-store-header h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #fff;
  margin: 0;
}
.dragon-store-balance {
  margin: 0 0 0 auto;
  font-weight: 700;
  color: #f0c14b;
  font-size: 0.95rem;
}
.dragon-store-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.dragon-store-close-btn:hover { color: var(--text); }

.dragon-store-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 4px 0 16px;
}

.dragon-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
  /* Without these, a flex child's default min-height:auto stops it from
     ever shrinking below its content size, so it just grows the whole
     panel past the viewport instead of scrolling internally — the
     scrolling bug this pattern is here to prevent. */
  flex: 1;
  min-height: 0;
}

.dragon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.dragon-card.is-equipped { border-color: #f0c14b; box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.4) inset; }
.dragon-card.is-cosmic {
  border-color: rgba(200, 140, 255, 0.4);
  background: linear-gradient(180deg, rgba(140, 70, 255, 0.14), var(--bg) 65%);
  animation: cosmic-card-pulse 3.5s ease-in-out infinite;
}
.dragon-card.is-cosmic.is-equipped { border-color: #ff2fd6; box-shadow: 0 0 0 1px rgba(255, 47, 214, 0.4) inset; }
@keyframes cosmic-card-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(140, 90, 255, 0.18); }
  50% { box-shadow: 0 0 24px rgba(255, 60, 220, 0.32); }
}

.dragon-card-swatch {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dragon-card-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.dragon-card-rarity {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dragon-card-rarity.is-cosmic {
  background: linear-gradient(90deg, #ff2fd6, #8b5cf6, #00e5ff, #ff2fd6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: cosmic-text-shift 3s linear infinite;
}
@keyframes cosmic-text-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.dragon-card-blurb {
  font-size: 0.78rem;
  color: var(--text-muted);
  min-height: 2.4em;
}

.dragon-card-price {
  font-weight: 700;
  color: #f0c14b;
  font-size: 0.85rem;
}

.dragon-card-btn {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dragon-card-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.dragon-card-btn.is-buy { border-color: rgba(147, 51, 234, 0.5); background: rgba(147, 51, 234, 0.15); }
.dragon-card-btn.is-buy:not(:disabled):hover { background: rgba(147, 51, 234, 0.28); }
.dragon-card-btn.is-equip { border-color: rgba(240, 193, 75, 0.5); }
.dragon-card-btn.is-equip:hover { background: rgba(240, 193, 75, 0.15); }
.dragon-card-btn.is-equipped { border-color: #f0c14b; color: #f0c14b; background: rgba(240, 193, 75, 0.1); cursor: default; }

.coin-store-open-btn { border-color: rgba(240, 193, 75, 0.6); }

.quest-open-btn {
  position: relative;
  border-color: rgba(74, 222, 128, 0.6);
  color: #4ade80;
}
.quest-open-btn:hover { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.9); }
.quest-open-btn .cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  margin-left: 0;
  background: linear-gradient(180deg, #fde047, #f0c14b);
  color: #3a2408;
}

.quest-reset-countdown {
  margin: 0 0 0 auto;
  font-weight: 700;
  color: #4ade80;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coin-store-message {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #f0c14b;
  background: rgba(240, 193, 75, 0.1);
  border: 1px solid rgba(240, 193, 75, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.coin-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
  min-height: 0;
}

.coin-bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.coin-bundle-card.is-best { border-color: rgba(240, 193, 75, 0.5); box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.3) inset; }

.coin-bundle-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #f0c14b;
  color: #3a2408;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.coin-bundle-pile { width: 100%; height: 74px; display: flex; align-items: flex-end; justify-content: center; }
.coin-pile-svg { max-width: 100%; max-height: 100%; }

.coin-bundle-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.coin-bundle-amount { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1rem; }
.coin-bundle-price { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }

.coin-purchase-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid #8a6d2f;
  background: linear-gradient(180deg, #fff3c4 0%, #f0c14b 45%, #d9a52e 100%);
  color: #3a2408;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(240, 193, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.coin-purchase-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.coin-purchase-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(240, 193, 75, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.coin-purchase-btn:hover::after { left: 130%; }
.coin-purchase-btn:active { transform: translateY(0); }

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
  /* Same flex:1 + min-height:0 pattern as .dragon-store-grid/.coin-bundle-grid
     above — without it this scrolls the whole panel instead of itself. */
  flex: 1;
  min-height: 0;
}

.quest-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.quest-row.is-claimed { opacity: 0.6; }

.quest-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.quest-name { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 0.95rem; }
.quest-desc { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.quest-reward { font-weight: 700; color: #f0c14b; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; }

.quest-progress-row { display: flex; align-items: center; gap: 10px; }

.quest-progress-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.quest-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.3s ease;
}
.quest-progress-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 38px;
  text-align: right;
}

.quest-claim-btn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.quest-claim-btn.is-locked {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  cursor: not-allowed;
}
.quest-claim-btn.is-claimable {
  background: linear-gradient(180deg, #fff3c4 0%, #f0c14b 45%, #d9a52e 100%);
  border-color: #8a6d2f;
  color: #3a2408;
  box-shadow: 0 4px 14px rgba(240, 193, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.quest-claim-btn.is-claimable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(240, 193, 75, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.quest-claim-btn.is-claimable:active { transform: translateY(0); }
.quest-claim-btn.is-claimed {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
}

@media (max-width: 560px) {
  .dragon-store-panel { padding: 18px; }
  .dragon-store-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .coin-bundle-grid { grid-template-columns: repeat(2, 1fr); }
}

.dragon-auth-panel { max-width: 400px; }

.dragon-auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dragon-auth-form input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; /* stops iOS Safari auto-zoom on focus */
  width: 100%;
}
.dragon-auth-form input:focus { outline: none; border-color: rgba(147, 51, 234, 0.6); }

.dragon-auth-error {
  font-size: 0.82rem;
  color: #f87171;
  margin: 0;
}

.dragon-auth-switch {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}

/* Rotate-to-landscape support. The stage itself is portrait-shaped, so
   unlike Run Habib this doesn't get MORE playable in landscape — but a
   phone still gets turned sideways sometimes, and the normal page chrome
   (fixed header + a tall hero) would otherwise eat the whole short
   viewport before the game even comes into view. Drop the chrome and the
   leaderboard, and size the stage by height instead of width so its
   portrait shape actually fits a landscape screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header, .page-hero, .site-footer, .page-watermark { display: none; }
  .request-form-section { padding: 0; }
  .request-form-section .container { padding: 0; max-width: 100%; }
  .dragon-game-layout { display: block; }
  .dragon-leaderboard { display: none; }
  .dragon-game-stage {
    aspect-ratio: 480 / 700;
    width: auto;
    height: 100vh;
    max-width: 100vw;
    margin: 0 auto;
  }
  .dragon-game-stage canvas { width: 100%; height: 100%; }
}