/*
 * PlayZen — Custom CSS
 * ----------------------------------------------------------------------------
 * Tailwind via CDN handles 99% of styling. This file only contains a small
 * number of global tweaks that are awkward to express as utility classes:
 *   - smooth scrolling & scroll offset for anchor links
 *   - line-clamp polyfill for older browsers
 *   - pretty scrollbar in dark mode
 *   - ad placeholder base style
 *   - section entrance animation
 */

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body { font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Line-clamp for older browsers where Tailwind's line-clamp plugin isn't loaded */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtle dark scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1020; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/*
 * Ad placeholders — visually distinct, but never misleading. Do not restyle
 * these to look like native content. Replace the inner block with your
 * AdSense <script>/<ins> snippet before launch. See comments in page HTML.
 */
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 12px;
}
.ad-placeholder--leaderboard { min-height: 90px; }
.ad-placeholder--rectangle { min-height: 250px; }
.ad-placeholder--sidebar { min-height: 600px; }
.ad-placeholder--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 60px;
  z-index: 40;
  background: rgba(11, 16, 32, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
}
@media (min-width: 768px) { .ad-placeholder--sticky { display: none; } }

/* Game embed focal area: ensure iframe always fills its wrapper */
.game-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0b1020;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(79, 70, 229, 0.35);
  ring: 1px solid rgba(255, 255, 255, 0.06);
}
.game-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Focus ring for keyboard accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reveal-on-load fade for top-level sections */
@keyframes pz-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pz-fade-up { animation: pz-fade-up 0.5s ease-out both; }