/* =====================================================
   POCKETS & FRIENDS — Main Stylesheet v1.1
   Cleaned & Optimized for Mobile
   ===================================================== */

/* ── CSS VARIABLES ── */
:root {
  --ticker-h: 34px;
  --nav-h: 74px;
  --max-w: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.4,0,.2,1);

  /* Colors */
  --hat-purple:   #5B3A9B;
  --hat-orange:   #F4841E;
  --hat-blue:     #4BAEE8;
  --pocket-gold:  #F5C842;
  --bow-pink:     #E8419A;
  --letter-green: #5BBF3A;

  --primary:      #F4841E;
  --primary-dk:   #D96A08;
  --accent:       #F5C842;
  --accent2:      #4BAEE8;
  --purple:       #5B3A9B;
  --pink:         #E8419A;
  --green:        #5BBF3A;

  --bg-deep:      #0E0B1E;
  --bg-mid:       #16112E;
  --bg-card:      rgba(255,255,255,0.04);
  --bg-card-hover:rgba(255,255,255,0.07);

  --text-hi:      #FFFFFF;
  --text-md:      rgba(255,255,255,0.72);
  --text-lo:      rgba(255,255,255,0.38);

  /* Font stacks — referenced throughout as var(--fh) / var(--fb) */
  --fh: 'Baloo 2', cursive;
  --fb: 'Nunito', sans-serif;

  /* Alias kept for legacy references */
  --pocket-purple: #5B3A9B;
}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg-deep);
  color: var(--text-hi);
  overflow-x: hidden;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; }

.pf-container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── NAVBAR ── */
#pf-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  background: rgba(14,11,30,0.85);
  backdrop-filter: blur(12px);
  transition: all .35s var(--ease);
}

#pf-nav.scrolled {
  background: rgba(14,11,30,0.96);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

/* Logo */
.pf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pf-logo__img {
  width: 56px; height: 56px;
  border-radius: 16px;
  overflow: hidden;
}
.pf-logo__img img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 2px 12px rgba(244,132,30,0.55));
}
.pf-logo:hover .pf-logo__img { transform: rotate(-8deg) scale(1.08); }

.pf-logo__text .l1 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--hat-blue), var(--hat-orange), var(--letter-green), var(--bow-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-logo__text .l2 {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Desktop Nav */
.pf-navlinks {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

/* Required so .pf-dropdown (position:absolute) anchors correctly */
.pf-navlinks > li {
  position: relative;
}

.pf-navlinks > li > a,
.pf-navlinks > li > button {
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--text-md);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all .2s;
}
.pf-navlinks > li > a:hover,
.pf-navlinks > li > button:hover {
  color: white;
  background: rgba(255,255,255,0.08);
}

/* Dropdown */
.pf-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;
  background: rgba(14,11,30,0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 10px;
  min-width: 220px;
  transition: all .25s ease;
}
.pf-navlinks > li:hover .pf-dropdown,
.pf-navlinks > li:focus-within .pf-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Right side */
.pf-nav-right { display: flex; align-items: center; gap: 10px; }

/* Mobile Burger */
.pf-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
}
.pf-burger span {
  width: 26px; height: 3px;
  background: white;
  border-radius: 3px;
  transition: .3s;
}
.pf-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.pf-burger.open span:nth-child(2) { opacity: 0; }
.pf-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* Mobile Navigation
   ───────────────────────────────────────────────────────
   FIX: Collapsed state now uses height:0 + zero vertical padding
   + pointer-events:none so the element truly takes 0 visible
   space and cannot overlap post cards / intercept taps below
   the navbar on mobile. backdrop-filter is only applied when
   .open is set to avoid iOS Safari paint leaks.
   ─────────────────────────────────────────────────────── */
#pf-mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(14,11,30,0.98);
  padding: 0 1.5rem;          /* no vertical padding when collapsed */
  height: 0;                  /* hard 0 — not max-height */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;       /* cannot intercept clicks when hidden */
  transition: height 0.35s ease,
              padding 0.35s ease,
              opacity 0.25s ease,
              visibility 0s linear 0.35s;
  z-index: 9998;
}
#pf-mobile-nav.open {
  height: auto;
  max-height: calc(100vh - var(--nav-h));
  padding: 1.5rem;            /* full padding only when open */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  transition: height 0.35s ease,
              padding 0.35s ease,
              opacity 0.25s ease,
              visibility 0s linear 0s;
}
#pf-mobile-nav a {
  display: block;
  padding: 14px 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-md);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#pf-mobile-nav a:last-child { border-bottom: none; }
#pf-mobile-nav a:hover { color: white; background: rgba(255,255,255,0.05); }

/* Lock body scroll while the mobile menu is open so the page
   underneath doesn't scroll behind the overlay. */
body.pf-menu-open { overflow: hidden; }

/* ── HERO SECTION ── */
#pf-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── HERO INNER GRID — base (overridden by inline styles on front page) ── */
.pf-hero__inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  padding: calc(var(--nav-h) + var(--ticker-h) + 2rem) 0;
  position: relative;
  z-index: 5;
}

/* ── STORY GRID ── */
.pf-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
}

/* ── RESPONSIVE DESIGN — consolidated below (see ═══ RESPONSIVE ═══ section) ── */

/* ═══════════════════════════════════════════
   COLOR UTILITIES
═══════════════════════════════════════════ */
.c-blue   { color: var(--hat-blue); }
.c-white  { color: var(--text-hi); }
.c-gold   { color: var(--pocket-gold); }
.c-orange { color: var(--hat-orange); }
.c-green  { color: var(--letter-green); }
.c-pink   { color: var(--bow-pink); }
.c-purple { color: var(--hat-purple); }

.pf-ul-accent { position: relative; display: inline-block; }
.pf-ul-accent::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hat-orange), var(--pocket-gold));
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════ */
.pf-section { padding: 5rem 0; }
.pf-section--dark { background: rgba(0,0,0,0.2); }
.pf-section--mid  { background: transparent; }

.pf-section__title {
  font-family: var(--fh);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.6rem;
}

.pf-section__sub {
  text-align: center;
  color: var(--text-md);
  font-size: 1rem;
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════
   HERO — VIDEO / OVERLAY / BLOBS / CANVAS
═══════════════════════════════════════════ */
.pf-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pf-hero__video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.pf-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(14,11,30,0.75) 0%,
    rgba(14,11,30,0.50) 40%,
    rgba(14,11,30,0.88) 85%,
    rgba(14,11,30,1.00) 100%
  );
}

.pf-hero__blobs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.pf-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  will-change: transform;
}
.pf-blob--1 { width: 500px; height: 500px; background: var(--hat-purple); top: -100px; left: -100px; }
.pf-blob--2 { width: 400px; height: 400px; background: var(--hat-orange); top: 30%;  right: -80px; }
.pf-blob--3 { width: 350px; height: 350px; background: var(--hat-blue);   bottom: 0; left: 30%; }

#pf-stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   HERO — TICKER
═══════════════════════════════════════════ */
.pf-hero__ticker {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  height: var(--ticker-h);
  z-index: 9998;
  background: linear-gradient(90deg, var(--hat-purple), var(--hat-orange));
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pf-ticker-inner {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: ticker-scroll 35s linear infinite;
  will-change: transform;
}
.pf-ticker-inner span {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════
   HERO — CONTENT ELEMENTS
═══════════════════════════════════════════ */
.pf-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(91,58,155,0.25);
  border: 1px solid rgba(91,58,155,0.45);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.2rem;
}

.pf-pulse {
  width: 8px; height: 8px;
  background: var(--letter-green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(91,191,58,0.55); }
  50%       { box-shadow: 0 0 0 7px rgba(91,191,58,0);    }
}

.pf-hero__title {
  font-family: var(--fh);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.pf-hero__sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--text-md);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 1.6rem;
}

/* Pills */
.pf-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.6rem;
}
.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid;
}
.pf-pill--audio  { background: rgba(75,174,232,0.12);  border-color: rgba(75,174,232,0.3);  color: var(--hat-blue); }
.pf-pill--song   { background: rgba(232,65,154,0.12);  border-color: rgba(232,65,154,0.3);  color: var(--bow-pink); }
.pf-pill--lesson { background: rgba(91,58,155,0.12);   border-color: rgba(91,58,155,0.3);   color: #b39fe8; }
.pf-pill--game   { background: rgba(91,191,58,0.12);   border-color: rgba(91,191,58,0.3);   color: var(--letter-green); }
.pf-pill--count  { background: rgba(244,132,30,0.12);  border-color: rgba(244,132,30,0.3);  color: var(--hat-orange); }

/* Hero Buttons */
.pf-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2rem;
}

.pf-btn-primary,
.pf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 28px;
  border-radius: 100px;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.pf-btn-primary {
  background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink));
  color: #fff;
  box-shadow: 0 4px 20px rgba(244,132,30,0.35);
}
.pf-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(244,132,30,0.52);
}
.pf-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: var(--text-hi);
  border: 1px solid rgba(255,255,255,0.16);
}
.pf-btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-3px);
}

/* Stats row */
.pf-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.pf-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-stat__num {
  font-family: var(--fh);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}
.pf-stat__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Scroll indicator */
.pf-scroll-ind {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pf-scroll-mouse {
  width: 22px; height: 36px;
  border: 2px solid rgba(255,255,255,0.28);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.pf-scroll-dot {
  width: 4px; height: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
  animation: scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}
.pf-scroll-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Confetti dots */
.pf-hero__confetti {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.pf-cdot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: cdot-rise linear infinite;
}
@keyframes cdot-rise {
  0%   { transform: translateY(0) rotate(0deg);    opacity: 0.85; }
  100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════════════════════════════════
   NAVBAR COMPONENTS
═══════════════════════════════════════════ */
.pf-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink));
  color: #fff;
  font-family: var(--fh);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pf-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244,132,30,0.42);
}

.pf-lang {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pf-lang__btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-md);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 9px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pf-lang__btn.active,
.pf-lang__btn:hover {
  background: var(--hat-purple);
  border-color: var(--hat-purple);
  color: #fff;
}

.pf-nav-dt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.pf-nav-dt .t {
  font-family: var(--fh);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-hi);
}
.pf-nav-dt .d {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dropdown link rows */
.pf-dd-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.pf-dropdown a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-md);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pf-dropdown a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

/* Mobile nav extras */
.pf-mobile-cta {
  display: block !important;
  background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink));
  color: #fff !important;
  font-family: var(--fh);
  font-weight: 800;
  text-align: center !important;
  padding: 13px 12px !important;
  border-radius: 12px;
  margin-top: 0.5rem;
}
.pf-mobile-lang {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.pf-mobile-lang button {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-md);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pf-mobile-lang button.active,
.pf-mobile-lang button:hover {
  background: var(--hat-purple);
  border-color: var(--hat-purple);
  color: #fff;
}

/* ═══════════════════════════════════════════
   SEARCH OVERLAY
═══════════════════════════════════════════ */
#pf-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(14,11,30,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#pf-search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.pf-search-inner {
  width: 100%;
  max-width: 620px;
  padding: 0 1.5rem;
}
.pf-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 1rem;
}
#pf-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--fb);
  font-size: 1rem;
  font-weight: 600;
}
#pf-search-input::placeholder { color: rgba(255,255,255,0.3); }

.pf-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
  border-radius: 12px;
}
.pf-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-hi);
  transition: background 0.15s;
}
.pf-search-item:hover { background: rgba(255,255,255,0.06); }
.pf-search-item__thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.pf-search-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-search-item__title { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pf-search-item__cat   { font-size: 0.74rem; color: var(--text-lo); }

/* ═══════════════════════════════════════════
   STORY CARDS
═══════════════════════════════════════════ */
.pf-story-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
  position: relative; /* explicit so it stays in normal stacking context */
  z-index: 1;
}
/* Only apply hover effects on devices that actually hover.
   On touch devices the :hover state otherwise sticks after a tap,
   creating a stacking context that can sit above the mobile nav. */
@media (hover: hover) and (pointer: fine) {
  .pf-story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 44px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.15);
  }
  .pf-story-card:hover .pf-story-card__thumb img { transform: scale(1.06); }
}

.pf-story-card__thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg-mid);
  flex-shrink: 0;
}
.pf-story-card__thumb a {
  display: block;
  width: 100%; height: 100%;
}
.pf-story-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.pf-story-card__type {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(14,11,30,0.78);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
}

.pf-story-card__fav {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(14,11,30,0.7);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.pf-story-card__fav:hover,
.pf-story-card__fav.active {
  background: rgba(232,65,154,0.4);
  transform: scale(1.12);
}

.pf-story-card__body {
  padding: 1.1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.pf-story-card__title {
  font-family: var(--fh);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.pf-story-card__title a {
  color: var(--text-hi);
  text-decoration: none;
  transition: color 0.2s;
}
.pf-story-card__title a:hover { color: var(--hat-orange); }

.pf-story-card__excerpt {
  font-size: 0.84rem;
  color: var(--text-md);
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
}

.pf-story-card__audio { margin-top: 0.2rem; }
.pf-story-card__audio audio {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
}

.pf-story-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.pf-story-card__views {
  font-size: 0.74rem;
  color: var(--text-lo);
  font-weight: 700;
}
.pf-story-card__read {
  font-family: var(--fh);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--hat-orange);
  text-decoration: none;
  transition: color 0.2s;
}
.pf-story-card__read:hover { color: var(--pocket-gold); }

/* ═══════════════════════════════════════════
   POINTS TOAST
═══════════════════════════════════════════ */
.pf-points-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg, var(--hat-orange), var(--pocket-gold));
  color: #fff;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 100px;
  z-index: 99999;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  box-shadow: 0 8px 30px rgba(244,132,30,0.4);
}
.pf-points-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════
   AD ZONES
═══════════════════════════════════════════ */
.pf-ad-zone {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  color: var(--text-lo);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}
.pf-ad-zone--leaderboard {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════
   SOCIAL LINKS (footer)
═══════════════════════════════════════════ */
.pf-footer__social {
  display: flex;
  gap: .8rem;
}
.pf-social-link {
  font-size: 1.3rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .2s, transform .2s;
  line-height: 1;
}
.pf-social-link:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#pf-footer {
  background: var(--bg-deep);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 3rem 0 1.5rem;
}

.pf-footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.pf-footer__brand {}

.pf-footer__brand-name {
  font-family: var(--fh);
  font-size: 1.4rem; font-weight: 800;
  background: linear-gradient(90deg, var(--hat-blue), var(--hat-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
}

.pf-footer__brand-desc {
  font-size: .85rem; color: var(--text-md); line-height: 1.65;
  margin-bottom: 1.2rem;
}

.pf-footer__col-title {
  font-family: var(--fh); font-size: .9rem; font-weight: 800;
  color: var(--accent); letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .9rem;
}

.pf-footer__links { list-style: none; }
.pf-footer__links li { margin-bottom: .5rem; }
.pf-footer__links a { font-size: .86rem; color: var(--text-md); transition: color .2s; }
.pf-footer__links a:hover { color: #fff; }

.pf-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.2rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
}

.pf-footer__copy { font-size: .78rem; color: var(--text-lo); }
.pf-footer__bottom-links { display: flex; gap: 1.2rem; }
.pf-footer__bottom-links a { font-size: .78rem; color: var(--text-lo); transition: color .2s; }
.pf-footer__bottom-links a:hover { color: var(--text-md); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* ─── TABLET (≤1024px) — right panel goes below left ─── */
@media (max-width: 1024px) {
  .pf-hero__inner {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-h) + var(--ticker-h) + 28px) 1.8rem 3rem;
    gap: 1.8rem;
    min-height: auto;
  }

  .pf-hero__right-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9rem;
  }

  /* Make clock card span full width on medium screens */
  .pf-rpanel-card--story { grid-column: 1 / 2; }
  .pf-rpanel-card--points { grid-column: 2 / 3; }
  .pf-rpanel-card--clock  { grid-column: 3 / 4; }

  .pf-rpanel-time { font-size: 1.8rem; }
  .pf-rpanel-points-num { font-size: 1.8rem; }
}

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
  .pf-navlinks,
  .pf-nav-dt,
  .pf-nav-cta,
  .pf-lang { display: none !important; }
  .pf-burger { display: flex; }
  /* Show mobile nav (collapsed by default via height:0/opacity; .open state reveals it) */
  #pf-mobile-nav { display: flex; flex-direction: column; }
  #pf-nav { padding: 0 1.2rem; }

  /* Tighter section spacing on mobile so cards aren't unreachable below the fold */
  .pf-section { padding: 3rem 0; }
  .pf-section__title { margin-bottom: 0.4rem; }
  .pf-section__sub { margin-bottom: 1.8rem; }

  .pf-hero__inner {
    padding: calc(var(--nav-h) + var(--ticker-h) + 20px) 1.2rem 2rem;
    gap: 1.2rem;
  }

  /* Right panel stacks: story full width, then points+clock side by side */
  .pf-hero__right-panel {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .pf-rpanel-card--story  { grid-column: 1 / -1; } /* full width */
  .pf-rpanel-card--points { grid-column: 1 / 2; }
  .pf-rpanel-card--clock  { grid-column: 2 / 3; }

  .pf-rpanel-time { font-size: 1.6rem; }
  .pf-rpanel-points-num { font-size: 1.6rem; }
  .pf-rpanel-story-title { font-size: .84rem; }

  .pf-hero__pills,
  .pf-hero__btns,
  .pf-hero__stats { flex-wrap: wrap; }

  .pf-hero__overlay {
    background:
      linear-gradient(to bottom,
        rgba(14,11,30,0.88) 0%,
        rgba(14,11,30,0.65) 40%,
        rgba(14,11,30,0.92) 85%,
        rgba(14,11,30,1)    100%);
  }

  .pf-footer__top { grid-template-columns: 1fr 1fr; }
  .pf-story-grid  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
  .pf-scroll-ind  { display: none; }
}

/* ─── SMALL MOBILE (≤480px) ─── */
@media (max-width: 480px) {
  .pf-hero__right-panel {
    grid-template-columns: 1fr;
  }
  .pf-rpanel-card--story,
  .pf-rpanel-card--points,
  .pf-rpanel-card--clock { grid-column: 1 / -1; }

  .pf-hero__title     { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .pf-footer__top     { grid-template-columns: 1fr; }
  .pf-footer__bottom  { flex-direction: column; text-align: center; }
  .pf-container       { padding: 0 1rem; }
  .pf-story-grid      { grid-template-columns: 1fr; }
}

/* ─── LARGE DESKTOP (≥1280px) ─── */
@media (min-width: 1280px) {
  .pf-nav-dt { display: flex !important; }
  .pf-hero__inner { grid-template-columns: 1fr 380px; }
}

/* ═══════════════════════════════════════════
   REWARD POPUP
═══════════════════════════════════════════ */
.pf-reward-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pf-reward-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14,11,30,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pf-reward-popup__card {
  position: relative;
  z-index: 2;
  background: var(--bg-mid);
  border: 1px solid rgba(245,200,66,0.35);
  border-radius: 28px;
  padding: 2.8rem 2.2rem 2rem;
  text-align: center;
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(245,200,66,0.14), 0 28px 72px rgba(0,0,0,0.65);
  transform: scale(0.72) translateY(40px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
}

.pf-reward-popup.open .pf-reward-popup__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.pf-reward-popup__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.pf-confetti-piece {
  position: absolute;
  animation: confetti-burst 1s ease-out forwards;
}

@keyframes confetti-burst {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(var(--tx,0px)) translateY(var(--ty,-200px)) rotate(var(--rot,180deg)); opacity: 0; }
}

.pf-reward-popup__icon {
  font-size: 3.8rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  display: block;
  animation: icon-bounce 0.6s ease both 0.28s;
}

@keyframes icon-bounce {
  0%   { transform: scale(0) rotate(-20deg); }
  70%  { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.pf-reward-popup__heading {
  font-family: var(--fh);
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.1rem;
  animation: fade-up 0.4s ease both 0.38s;
}

.pf-reward-popup__pts-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-bottom: 0.45rem;
  animation: fade-up 0.4s ease both 0.44s;
}

.pf-reward-popup__plus {
  font-family: var(--fh);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--hat-orange);
  line-height: 1;
}

.pf-reward-popup__count {
  font-family: var(--fh);
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 40px rgba(245,200,66,0.45);
}

.pf-reward-popup__label {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  color: var(--hat-orange);
  align-self: center;
  max-width: 90px;
  text-align: left;
  line-height: 1.2;
}

.pf-reward-popup__total {
  font-size: 0.9rem;
  color: var(--text-md);
  margin-bottom: 1.4rem;
  animation: fade-up 0.4s ease both 0.5s;
}

.pf-reward-popup__total strong {
  color: var(--accent);
  font-weight: 800;
}

.pf-reward-popup__badge {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(245,200,66,0.1);
  border: 1px solid rgba(245,200,66,0.28);
  border-radius: 100px;
  padding: 8px 18px;
  margin-bottom: 1.2rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  animation: badge-pop 0.55s ease both 0.6s;
}

@keyframes badge-pop {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  70%  { transform: scale(1.1)  rotate(3deg); }
  100% { transform: scale(1)    rotate(0);    opacity: 1; }
}

.pf-reward-popup__badge-icon { font-size: 1.5rem; }

.pf-reward-popup__guest {
  margin-bottom: 1rem;
  animation: fade-up 0.4s ease both 0.54s;
}

.pf-reward-popup__signup-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink));
  color: #fff;
  font-family: var(--fh);
  font-size: 0.9rem;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pf-reward-popup__signup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(244,132,30,0.42);
}

.pf-reward-popup__close {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: var(--text-md);
  font-family: var(--fh);
  font-size: 0.9rem;
  font-weight: 800;
  padding: 11px 26px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  animation: fade-up 0.4s ease both 0.64s;
}

.pf-reward-popup__close:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

/* ═══════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════ */
.pf-dashboard {
  padding: calc(var(--nav-h) + 2.5rem) 0 5rem;
  min-height: 100vh;
}

.pf-dash-hero {
  background: linear-gradient(135deg, rgba(91,58,155,0.2), rgba(75,174,232,0.1));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.pf-dash-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  flex-shrink: 0;
  object-fit: cover;
}

.pf-dash-hero__info { flex: 1; min-width: 0; }

.pf-dash-hero__name {
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.3rem;
}

.pf-dash-hero__badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-md);
  flex-wrap: wrap;
}

.pf-dash-badge-chip {
  background: rgba(245,200,66,0.12);
  border: 1px solid rgba(245,200,66,0.26);
  border-radius: 100px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
}

.pf-dash-points-big {
  font-family: var(--fh);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
}

/* Stat cards */
.pf-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.pf-dash-stat-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 1.3rem;
  text-align: center;
}

.pf-dash-stat-card__num {
  font-family: var(--fh);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.pf-dash-stat-card__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Progress bar */
.pf-dash-progress-wrap { margin-bottom: 1.8rem; }

.pf-dash-progress-bar-bg {
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.pf-dash-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hat-orange), var(--accent));
  border-radius: 5px;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* Section title */
.pf-dash-section-title {
  font-family: var(--fh);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badge grid */
.pf-dash-badges {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.8rem;
}

.pf-dash-badge-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 1.1rem 0.6rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.pf-dash-badge-card.earned {
  border-color: rgba(245,200,66,0.32);
  background: rgba(245,200,66,0.05);
}

.pf-dash-badge-card:not(.earned) { opacity: 0.4; filter: grayscale(0.5); }

.pf-dash-badge-card__icon { font-size: 1.9rem; margin-bottom: 0.35rem; }

.pf-dash-badge-card__name {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-md);
  margin-bottom: 0.15rem;
  line-height: 1.2;
}

.pf-dash-badge-card.earned .pf-dash-badge-card__name { color: var(--accent); }

.pf-dash-badge-card__pts {
  font-size: 0.64rem;
  color: var(--text-lo);
  font-weight: 700;
}

/* Two-column layout */
.pf-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
}

/* History */
.pf-dash-history,
.pf-dash-leaderboard {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  overflow: hidden;
}

.pf-dash-history__row,
.pf-dash-lb-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.82rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.14s;
  text-decoration: none;
  color: inherit;
}

.pf-dash-history__row:last-child,
.pf-dash-lb-row:last-child { border-bottom: none; }

.pf-dash-history__row:hover,
.pf-dash-lb-row:hover { background: rgba(255,255,255,0.03); }

.pf-dash-history__title,
.pf-dash-lb-name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-dash-history__pts,
.pf-dash-lb-pts {
  font-family: var(--fh);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.pf-dash-history__date {
  font-size: 0.68rem;
  color: var(--text-lo);
  white-space: nowrap;
}

.pf-dash-history__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-lo);
  font-size: 0.88rem;
}

/* Leaderboard */
.pf-dash-lb-rank {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-lo);
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}

.pf-dash-lb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1);
}

@media (max-width: 860px) {
  .pf-dash-grid   { grid-template-columns: 1fr; }
  .pf-dash-badges { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .pf-dash-stats  { grid-template-columns: 1fr 1fr; }
  .pf-dash-badges { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
  .pf-dash-stats  { grid-template-columns: 1fr; }
  .pf-dash-badges { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   LOGIN / REGISTER PAGE
═══════════════════════════════════════════ */
.pf-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) 1rem 3rem;
}

.pf-auth-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  padding: 2.4rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

.pf-auth-logo {
  text-align: center;
  margin-bottom: 1.8rem;
}

.pf-auth-logo__text {
  font-family: var(--fh);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--accent);
}

.pf-auth-tabs {
  display: flex;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.8rem;
  gap: 4px;
}

.pf-auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px;
  font-family: var(--fh);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-lo);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.pf-auth-tab.active {
  background: var(--hat-orange);
  color: #fff;
}

.pf-auth-form { display: none; }
.pf-auth-form.active { display: block; }

.pf-auth-field { margin-bottom: 1rem; }

.pf-auth-field label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}

.pf-auth-field input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.95rem;
  color: #fff;
  font-family: var(--fb);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.pf-auth-field input:focus {
  border-color: var(--hat-blue);
  background: rgba(75,174,232,0.06);
}

.pf-auth-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--hat-orange), var(--pocket-purple));
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.pf-auth-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(244,132,30,0.38);
}

.pf-auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pf-auth-error {
  background: rgba(232,65,154,0.1);
  border: 1px solid rgba(232,65,154,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--bow-pink);
  margin-bottom: 1rem;
}

.pf-auth-divider {
  text-align: center;
  color: var(--text-lo);
  font-size: 0.76rem;
  margin: 1rem 0;
}

.pf-auth-guest-link {
  display: block;
  text-align: center;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--text-lo);
}

.pf-auth-guest-link a { color: var(--hat-blue); }

/* Navbar user link (Sign In / Dashboard) */
.pf-nav-user-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-md);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
}

.pf-nav-user-link span {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-nav-user-link:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
}

/* Hide the display name text on small screens, keep icon only */
@media (max-width: 900px) {
  .pf-nav-user-link span { display: none; }
}

/* Mobile nav link/button base — override handled cleanly via .open state above */
@media (max-width: 768px) {
  #pf-mobile-nav a,
  #pf-mobile-nav button:not(.pf-mobile-lang button) {
    text-align: left;
    box-sizing: border-box;
  }
}