/* Playfun Premium UI — Author: Codex */
.premium-nav,
.premium-footer,
.premium-status-card,
.premium-section,
.premium-faq {
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}

.premium-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px;
}

.premium-logo {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.premium-logo span { color: var(--pop-pink); }
.premium-nav nav { display: flex; flex-wrap: wrap; gap: 22px; }
.premium-nav nav a,
.premium-footer a { color: var(--text-2); font-size: 13px; font-weight: 600; }
.premium-nav nav a:hover,
.premium-footer a:hover { color: var(--text); }

.premium-hero {
  width: min(1180px, calc(100% - 32px));
  min-height: 610px;
  margin: 12px auto 34px;
  padding: clamp(72px, 12vw, 130px) 24px;
  border: 1px solid var(--border);
  border-radius: 44px;
  background:
    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--pop-pink) 22%, transparent), transparent 28%),
    radial-gradient(circle at 78% 68%, color-mix(in srgb, var(--pop-blue) 20%, transparent), transparent 30%),
    var(--bg-alt);
  overflow: hidden;
  position: relative;
  text-align: center;
}

.premium-orbit {
  width: 180px;
  height: 180px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
}
.premium-orbit::after {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pop-yellow);
  content: '';
  position: absolute;
  right: 8px;
  top: 20px;
}
.premium-orbit-one { left: -52px; top: 80px; }
.premium-orbit-two { right: -38px; bottom: 38px; transform: scale(.72); }
.premium-orbit-two::after { background: var(--pop-green); }

.premium-kicker,
.premium-label {
  color: var(--pop-pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.premium-hero h1 {
  margin: 10px 0 20px;
  font-size: clamp(54px, 11vw, 126px);
  letter-spacing: -.055em;
  line-height: .86;
}
.premium-hero h1 span { color: var(--pop-pink); }
.premium-deck {
  max-width: 740px;
  margin: 0 auto;
  color: var(--text-2);
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.45;
}
.premium-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.premium-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
}
.premium-button.primary { border-color: var(--text); background: var(--text); color: var(--bg); }
.premium-button.compact { min-height: 42px; flex: 0 0 auto; }
.premium-button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.premium-launch-note { margin-top: 14px; color: var(--text-3); font-size: 13px; }

.premium-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
}
.premium-status-card[data-tier="premium"] { border-color: color-mix(in srgb, var(--pop-green) 50%, var(--border)); }
.premium-status-card h2 { margin: 3px 0; font-size: clamp(24px, 4vw, 34px); }
.premium-status-card p:last-child { color: var(--text-2); }

.premium-section { padding-block: clamp(80px, 12vw, 130px) 0; }
.premium-section-heading { max-width: 720px; margin-bottom: 34px; }
.premium-section-heading.centered { margin-inline: auto; text-align: center; }
.premium-section-heading h2,
.premium-faq h2 { margin: 7px 0 10px; font-size: clamp(38px, 7vw, 70px); letter-spacing: -.045em; line-height: .95; }
.premium-section-heading > p:last-child { color: var(--text-2); }
.premium-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.premium-benefits article,
.premium-price-card {
  min-height: 250px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--bg-alt);
}
.premium-benefits article > span { color: var(--text-3); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; }
.premium-benefits h3 { margin: 46px 0 10px; font-size: 24px; line-height: 1.05; }
.premium-benefits p,
.premium-price-card > p:last-child { color: var(--text-2); }

.premium-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.premium-price-card { position: relative; }
.premium-price-card.featured { border: 2px solid var(--text); transform: translateY(-10px); }
.premium-chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  right: 18px;
  top: 18px;
}
.premium-price { display: flex; align-items: baseline; gap: 8px; margin: 44px 0 18px; }
.premium-price strong { font-size: clamp(44px, 7vw, 68px); letter-spacing: -.05em; line-height: 1; }
.premium-price span { color: var(--text-3); font-size: 14px; }
.premium-adult-note {
  max-width: 780px;
  margin: 28px auto 0;
  padding: 20px 22px;
  border-left: 3px solid var(--pop-blue);
  background: color-mix(in srgb, var(--bg-alt) 82%, var(--pop-blue) 18%);
  color: var(--text-2);
}

.premium-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 24px; }
.premium-table { width: 100%; border-collapse: collapse; }
.premium-table th,
.premium-table td { padding: 18px 20px; border-bottom: 1px solid var(--border); text-align: left; }
.premium-table thead th { color: var(--text-3); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.premium-table tbody th { width: 48%; font-weight: 600; }
.premium-table tbody tr:last-child > * { border-bottom: 0; }

.premium-faq { padding-block: clamp(80px, 12vw, 130px); }
.premium-faq > p,
.premium-faq > h2 { max-width: 760px; }
.premium-faq details { max-width: 800px; border-bottom: 1px solid var(--border); }
.premium-faq summary { padding: 22px 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.premium-faq details p { padding: 0 0 22px; color: var(--text-2); }
.premium-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding-block: 30px 50px; border-top: 1px solid var(--border); }

@media (max-width: 780px) {
  .premium-benefits,
  .premium-pricing { grid-template-columns: 1fr; }
  .premium-price-card.featured { transform: none; }
  .premium-status-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .premium-nav { align-items: flex-start; }
  .premium-nav nav { justify-content: flex-end; gap: 12px; }
  .premium-hero { min-height: 570px; border-radius: 30px; }
  .premium-actions { align-items: stretch; flex-direction: column; }
  .premium-button { width: 100%; }
  .premium-status-card { padding: 22px; }
  .premium-table th,
  .premium-table td { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Premium: Playfun player-pass refresh */
.premium-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--pop-pink) 12%, transparent) 0 8%, transparent 24%),
    radial-gradient(circle at 94% 42%, color-mix(in srgb, var(--pop-blue) 12%, transparent) 0 7%, transparent 23%),
    var(--bg);
}
.premium-page .logo-text em,
.premium-page .logo-mark { color: var(--pop-purple); }
.premium-main { padding-top: 106px; }
.premium-page .premium-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  align-items: center;
  gap: clamp(34px, 7vw, 90px);
  min-height: 540px;
  margin-top: 18px;
  padding: clamp(42px, 8vw, 86px);
  border-radius: 38px;
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--pop-pink) 19%, transparent), transparent 29%),
    radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--pop-blue) 18%, transparent), transparent 30%),
    color-mix(in srgb, var(--bg-alt) 90%, transparent);
  box-shadow: var(--shadow);
  text-align: left;
}
.premium-page .premium-hero::after {
  width: 240px;
  height: 240px;
  border: 52px solid color-mix(in srgb, var(--pop-green) 12%, transparent);
  border-radius: 50%;
  content: '';
  position: absolute;
  right: -110px;
  top: -120px;
  pointer-events: none;
}
.premium-hero-copy { position: relative; z-index: 2; }
.premium-page .premium-kicker { margin: 0; color: var(--pop-pink); }
.premium-page .premium-hero h1 {
  margin: 10px 0 20px;
  font-family: 'Astalamet', 'Realtime', sans-serif;
  font-size: clamp(54px, 8vw, 92px);
  letter-spacing: -.05em;
  line-height: .88;
  text-transform: lowercase;
}
.premium-page .premium-hero h1 b { color: var(--pop-yellow); font-weight: 700; }
.premium-page .premium-hero h1 span { display: block; margin-top: .14em; }
.premium-page .premium-deck { max-width: 650px; margin: 0; font-size: clamp(17px, 2.2vw, 21px); }
.premium-page .premium-actions { justify-content: flex-start; }
.premium-page .premium-button {
  border: 2px solid var(--text);
  transition: transform .25s var(--bounce), box-shadow .25s, background .2s, color .2s;
}
.premium-page .premium-button:hover { box-shadow: 0 4px 0 var(--text); transform: translateY(-3px); }
.premium-page .premium-button.primary { background: var(--pop-yellow); color: #151515; }
.premium-quick-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.premium-quick-list li { padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--text-2); font-size: 12px; font-weight: 600; }
.premium-page .premium-launch-note { margin: 14px 0 0; }

.premium-pass {
  width: min(100%, 390px);
  aspect-ratio: 1.52;
  justify-self: center;
  padding: 28px;
  border: 4px solid #151515;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(135deg, #ff78b6, #a78bfa 52%, #72d2ff);
  box-shadow: 12px 14px 0 #151515;
  color: #151515;
  position: relative;
  transform: rotate(4deg);
  z-index: 1;
}
.premium-pass::before,
.premium-pass::after { width: 58px; height: 58px; border: 3px solid #151515; border-radius: 50%; content: ''; position: absolute; opacity: .22; }
.premium-pass::before { right: 26px; top: 62px; }
.premium-pass::after { right: 54px; top: 90px; }
.premium-pass-top { display: flex; align-items: center; justify-content: space-between; font: 700 13px/1 'Realtime', sans-serif; letter-spacing: 1.4px; }
.premium-pass-top i { display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid #151515; border-radius: 14px; background: #ffd95f; font-style: normal; }
.premium-pass strong { display: block; margin-top: 42px; font: 700 clamp(32px, 5vw, 49px)/.9 'Astalamet', 'Realtime', sans-serif; letter-spacing: -.04em; text-transform: lowercase; }
.premium-pass > p { margin-top: 7px; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; }
.premium-pass-dots { display: flex; gap: 7px; position: absolute; bottom: 24px; left: 28px; }
.premium-pass-dots span { width: 9px; height: 9px; border: 2px solid #151515; border-radius: 50%; background: #72e995; }
.premium-pass-dots span:nth-child(2) { background: #ffd95f; }
.premium-pass-dots span:nth-child(3) { background: #fff; }

.premium-page .premium-status-card {
  padding: 28px 32px;
  border: 0;
  border-radius: 26px;
  background: var(--text);
  box-shadow: var(--shadow-lg);
  color: var(--bg);
}
.premium-status-copy { display: flex; align-items: center; gap: 18px; }
.premium-status-mark { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border: 3px solid #151515; border-radius: 17px; background: var(--pop-green); box-shadow: 0 4px 0 #151515; color: #151515; font-size: 19px; font-weight: 700; }
.premium-page .premium-status-card .premium-label { color: var(--pop-green); }
.premium-page .premium-status-card h2 { color: var(--bg); }
.premium-page .premium-status-card p:last-child { color: color-mix(in srgb, var(--bg) 68%, transparent); }
.premium-page .premium-status-card .premium-button { border-color: var(--bg); background: transparent; color: var(--bg); }
.premium-page .premium-status-card[data-tier="premium"] .premium-status-mark { background: var(--pop-yellow); }

.premium-page .premium-section-heading h2,
.premium-page .premium-faq h2 { font-family: 'Astalamet', 'Realtime', sans-serif; letter-spacing: -.04em; text-transform: lowercase; }
.premium-page .premium-benefits { gap: 16px; }
.premium-page .premium-benefits article,
.premium-page .premium-price-card {
  border-radius: 26px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg-alt));
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .3s var(--bounce), box-shadow .3s;
}
.premium-page .premium-benefits article { border-top: 7px solid var(--pop-pink); }
.premium-page .premium-benefits article:nth-child(2),
.premium-page .premium-benefits article:nth-child(5) { border-top-color: var(--pop-blue); }
.premium-page .premium-benefits article:nth-child(3),
.premium-page .premium-benefits article:nth-child(6) { border-top-color: var(--pop-green); }
.premium-page .premium-benefits article:hover,
.premium-page .premium-price-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.premium-page .premium-benefits article > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--bg-alt); color: var(--text); }
.premium-page .premium-benefits h3 { margin-top: 36px; }
.premium-page .premium-price-card { min-height: 280px; }
.premium-page .premium-price-card.featured { border: 3px solid var(--text); background: color-mix(in srgb, var(--pop-yellow) 15%, var(--bg-alt)); }
.premium-page .premium-chip { background: var(--pop-yellow); color: #151515; }
.premium-page .premium-adult-note { border: 0; border-radius: 18px; }
.premium-page .premium-table-wrap { background: color-mix(in srgb, var(--card) 92%, var(--bg-alt)); box-shadow: var(--shadow); }
.premium-page .premium-faq details { max-width: none; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card) 90%, transparent); }
.premium-page .premium-faq details + details { margin-top: 10px; }
.premium-page .premium-faq summary { padding: 20px 22px; }
.premium-page .premium-faq details p { padding: 0 22px 22px; }

@media (max-width: 880px) {
  .premium-page .premium-hero { grid-template-columns: 1fr; }
  .premium-pass { width: min(390px, 92%); justify-self: start; transform: rotate(2deg); }
}
@media (max-width: 780px) {
  .premium-page .premium-status-card { align-items: stretch; }
  .premium-page .premium-status-card .premium-button { width: 100%; }
}
@media (max-width: 520px) {
  .premium-main { padding-top: 88px; }
  .premium-page .premium-hero { width: calc(100% - 28px); min-height: auto; padding: 30px 26px 48px; border-radius: 26px; }
  .premium-pass { padding: 22px; border-radius: 22px; box-shadow: 8px 9px 0 #151515; }
  .premium-pass strong { margin-top: 28px; }
  .premium-pass-dots { bottom: 18px; left: 22px; }
  .premium-status-copy { align-items: flex-start; }
  .premium-status-mark { width: 46px; height: 46px; border-radius: 14px; }
  .premium-page .premium-status-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-page .premium-benefits article,
  .premium-page .premium-price-card,
  .premium-page .premium-button { transition: none; }
}