/* ===== DESIGN TOKENS ===== */
:root {
  --bg: #0A0A0D;
  --surface: #16171C;
  --surface2: #1B1C21;
  --border: #30333A;
  --border2: #3A3D45;
  --accent: #FFC629;
  --accent-dark: #C9960E;
  --accent-light: #FFDD66;
  --accent-tint: rgba(255,198,41,0.10);
  --accent-glow: rgba(255,198,41,0.35);
  --text: #FFFFFF;
  --text-2: #C7C9D1;
  --muted: #83858F;
  --text-on-accent: #1A1400;
  --success: #7ED957;
  --success-glow: rgba(126,217,87,0.25);
  --warning: #F59E0B;
  --danger: #FF4D4F;
  --danger-glow: rgba(255,77,79,0.25);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ===== RESET ===== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul,ol { list-style: none; }

/* ===== TYPOGRAPHY ===== */
h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; line-height: 1.3; }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700; line-height: 1.4; }
h4 { font-size: 1rem; font-weight: 600; }

p { color: var(--text-2); /* max-width: 72ch; */ margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ===== LAYOUT ===== */
.upg-container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }

section { padding: 4rem 0; }
section.upg-alt { background-color: var(--surface); }

/* ===== HEADER ===== */
.upg-header {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: backdrop-filter .3s, background-color .3s;
}
.upg-header.scrolled {
  backdrop-filter: blur(14px);
  background-color: rgba(10,10,13,.88);
}
.upg-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 1rem;
}
.upg-logo img { height: 30px; width: auto; }

.upg-nav { display: flex; align-items: center; gap: 1.5rem; }
.upg-nav a {
  color: var(--text-2); font-size: .875rem; font-weight: 500;
  transition: color .2s;
}
.upg-nav a:hover, .upg-nav a[aria-current="page"] {
  color: var(--accent); text-decoration: none;
}

.upg-lang {
  display: flex; align-items: center; gap: 0;
  font-size: .775rem; font-weight: 600;
}
.upg-lang a { color: var(--muted); padding: 0 .35rem; transition: color .2s; }
.upg-lang a:hover { color: var(--text); text-decoration: none; }
.upg-lang a.active { color: var(--accent); }
.upg-lang span { color: var(--border2); }

.upg-hdr-cta {
  background: linear-gradient(135deg,#FFD23F,#C9960E);
  color: var(--text-on-accent); font-weight: 700; font-size: .8125rem;
  padding: .5rem 1.125rem; border-radius: var(--radius);
  border: none; cursor: pointer; white-space: nowrap;
  transition: filter .2s, box-shadow .2s; display: inline-block;
}
.upg-hdr-cta:hover {
  filter: brightness(1.1); box-shadow: 0 4px 16px var(--accent-glow);
  color: var(--text-on-accent); text-decoration: none;
}

.upg-hamburger {
  display: none; background: none; border: none;
  cursor: pointer; color: var(--text); padding: .375rem;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.upg-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-2); border-radius: 2px; transition: .25s;
}

.upg-mobile-nav {
  display: none; flex-direction: column; padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border); gap: .75rem;
  background: var(--bg);
}
.upg-mobile-nav.open { display: flex; }
.upg-mobile-nav a { color: var(--text-2); font-size: .9375rem; padding: .375rem 0; }
.upg-mobile-lang {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding-top: .75rem; border-top: 1px solid var(--border);
}
.upg-mobile-lang a {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  padding: .25rem .6rem; border-radius: 4px;
  border: 1px solid var(--border); transition: .2s;
}
.upg-mobile-lang a.active { color: var(--accent); border-color: var(--accent); }

/* ===== BUTTONS ===== */
.upg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem; border-radius: var(--radius);
  font-weight: 700; font-size: .9375rem;
  border: none; cursor: pointer; text-decoration: none;
  transition: filter .2s, box-shadow .2s; white-space: nowrap;
  line-height: 1.2;
}
.upg-btn:hover { text-decoration: none; }

.upg-btn-primary {
  background: linear-gradient(135deg,#FFD23F,#C9960E);
  color: var(--text-on-accent);
}
.upg-btn-primary:hover {
  filter: brightness(1.1); box-shadow: 0 8px 28px var(--accent-glow);
  color: var(--text-on-accent);
}

.upg-btn-outline {
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent);
}
.upg-btn-outline:hover { background: var(--accent-tint); color: var(--accent); }

.upg-btn-sm { padding: .5rem 1.125rem; font-size: .8125rem; }
.upg-btn-full { width: 100%; }

/* ===== HERO ===== */
.upg-hero {
  padding: 5rem 0 4rem; background-color: var(--bg);
}
.upg-hero-inner {
  max-width: 800px; margin: 0 auto; text-align: center;
}
.upg-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent-tint); color: var(--accent);
  font-size: .775rem; font-weight: 600;
  padding: .3rem .85rem; border-radius: 100px;
  border: 1px solid rgba(255,198,41,.2); margin-bottom: 1.25rem;
}
.upg-hero h1 { margin-bottom: .875rem; }
.upg-hero-sub {
  font-size: 1.125rem; color: var(--text-2);
  margin-bottom: 0; max-width: 56ch; margin-left: auto; margin-right: auto;
}
.upg-hero-ctas {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin-top: 1.75rem;
}

/* ===== PROMO WIDGET ===== */
.upg-widget {
  background: var(--surface); border: 1.5px solid var(--accent);
  border-radius: var(--radius-xl); padding: 1.5rem;
  max-width: 520px; margin: 2rem auto;
  box-shadow: 0 0 32px rgba(255,198,41,.08);
}
.upg-widget-header {
  display: flex; align-items: center; gap: .5rem;
  font-size: .775rem; color: var(--success); font-weight: 600;
  margin-bottom: 1.125rem;
}
.upg-widget-header span { color: var(--muted); margin-left: auto; }

.upg-code-row {
  display: flex; gap: .75rem; align-items: stretch; margin-bottom: 1rem;
}
.upg-code-display {
  flex: 1; background: var(--bg);
  border: 1.5px solid rgba(255,198,41,.25); border-radius: var(--radius);
  padding: .75rem 1rem; font-family: 'JetBrains Mono','Courier New',monospace;
  font-size: 1.375rem; font-weight: 700; color: var(--accent);
  letter-spacing: .07em; text-align: center; user-select: all;
}
.upg-btn-copy {
  background: linear-gradient(135deg,#FFD23F,#C9960E);
  color: var(--text-on-accent); font-weight: 700; font-size: .875rem;
  padding: .75rem 1.25rem; border-radius: var(--radius);
  border: none; cursor: pointer; white-space: nowrap;
  transition: filter .2s, box-shadow .2s; min-width: 110px;
}
.upg-btn-copy:hover { filter: brightness(1.1); box-shadow: 0 4px 16px var(--accent-glow); }

.upg-widget-desc { font-size: .875rem; color: var(--text-2); margin-bottom: .25rem; }
.upg-widget-note { font-size: .775rem; color: var(--muted); }

/* ===== SECTION TITLES ===== */
.upg-section-head { margin-bottom: 2rem; }
.upg-section-head h2 { margin-bottom: .625rem; }
.upg-section-head > p { color: var(--text-2); margin-top: .5rem; }

/* ===== TABLE ===== */
.upg-table-wrap {
  overflow-x: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
caption {
  text-align: left; font-size: .775rem; color: var(--muted);
  margin-bottom: .5rem; padding: 0 .25rem;
}
thead th {
  background: var(--surface2); color: var(--text-2);
  font-weight: 600; font-size: .775rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .875rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color .15s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background-color: var(--accent-tint); }
tbody td { padding: .875rem 1rem; color: var(--text-2); vertical-align: middle; }

.upg-td-code {
  font-family: 'JetBrains Mono','Courier New',monospace;
  font-weight: 700; color: var(--accent); font-size: 1rem; letter-spacing: .05em;
}
.upg-status {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(126,217,87,.1); color: var(--success);
  font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 100px;
}
.upg-check { color: var(--success); font-weight: 700; }
.upg-cross { color: var(--danger); }

/* ===== BENEFIT LIST ===== */
.upg-benefit-list {
  display: grid; gap: .875rem; margin-top: 1.25rem; padding: 0;
}
.upg-benefit-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  color: var(--text-2); font-size: .9375rem; line-height: 1.65;
}
.upg-benefit-list li::before {
  content: '';
  display: block; width: 18px; height: 18px; min-width: 18px;
  background: var(--success);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  margin-top: 4px;
}

/* ===== STEPS ===== */
.upg-steps { display: grid; gap: 1.25rem; margin-top: 1.5rem; padding: 0; }
.upg-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.upg-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%; background: var(--accent-tint);
  border: 1.5px solid var(--accent); color: var(--accent);
  font-weight: 700; font-size: .875rem;
}
.upg-step-body h3 { font-size: .9375rem; margin-bottom: .25rem; }
.upg-step-body p { font-size: .875rem; color: var(--muted); margin-bottom: 0; }

/* ===== PROMO SECTIONS (additional bonuses) ===== */
.upg-promo-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 1.125rem; margin: 1.5rem 0;
}
.upg-promo-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.375rem;
}
.upg-promo-card h3 {
  font-size: 1rem; color: var(--accent); margin-bottom: .625rem;
}
.upg-promo-card p { font-size: .875rem; color: var(--text-2); margin-bottom: 0; }

/* ===== FAQ ===== */
.upg-faq-list { display: grid; gap: .625rem; margin-top: 1.5rem; }
details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
details[open] { border-color: var(--border2); }
summary {
  cursor: pointer; padding: 1.125rem 1.25rem;
  font-weight: 600; font-size: .9375rem; color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
  user-select: none; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; font-size: 1.375rem; color: var(--accent);
  transition: transform .2s; line-height: 1; flex-shrink: 0; margin-left: 1rem;
}
details[open] summary::after { transform: rotate(45deg); }
.upg-faq-answer {
  padding: 0 1.25rem 1.25rem; color: var(--text-2);
  font-size: .9rem; line-height: 1.7;
  border-top: 1px solid var(--border);
}

/* ===== CTA SECTION ===== */
.upg-cta-row { padding-top: 2rem; }
.upg-cta-row.centered { text-align: center; }

/* ===== LAST UPDATED ===== */
.upg-updated {
  text-align: center; font-size: .8rem; color: var(--muted);
  padding: 1.5rem 0;
}

/* ===== BREADCRUMBS ===== */
.upg-breadcrumbs {
  display: flex; gap: .5rem; align-items: center;
  font-size: .8rem; color: var(--muted);
  padding: 1rem 0; flex-wrap: wrap;
}
.upg-breadcrumbs a { color: var(--muted); }
.upg-breadcrumbs a:hover { color: var(--text); }
.upg-breadcrumbs span { color: var(--border2); }

/* ===== PAGE INNER HEADER ===== */
.upg-page-header {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.upg-page-header h1 { font-size: clamp(1.5rem,3.5vw,2.125rem); margin-bottom: .5rem; }
.upg-page-header p { font-size: .9375rem; color: var(--text-2); }

/* ===== TROUBLESHOOT BLOCK ===== */
.upg-troubleshoot {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.5rem;
}
.upg-troubleshoot h2 {
  font-size: 1.125rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}

/* ===== POLICY / T&C PROSE ===== */
.upg-prose h2 { margin-top: 2rem; margin-bottom: .75rem; }
.upg-prose h3 { margin-top: 1.5rem; margin-bottom: .5rem; }
.upg-prose p { max-width: none; margin-bottom: 1rem; }
.upg-prose ul { list-style: disc; padding-left: 1.5rem; color: var(--text-2); }
.upg-prose ul li { margin-bottom: .4rem; }

/* ===== FOOTER ===== */
.upg-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}
.upg-footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem; margin-bottom: 2rem;
}
.upg-footer-logo img { height: 26px; margin-bottom: .75rem; }
.upg-footer-desc { font-size: .8125rem; color: var(--muted); margin-bottom: 0; }
.upg-footer-col h4 {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-2); margin-bottom: .875rem;
}
.upg-footer-links { display: grid; gap: .5rem; }
.upg-footer-links a { font-size: .875rem; color: var(--muted); transition: color .2s; }
.upg-footer-links a:hover { color: var(--text); text-decoration: none; }

.upg-footer-bottom {
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.upg-disclaimer { font-size: .775rem; color: var(--muted); line-height: 1.65; }
.upg-gambling-warn {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  display: flex; align-items: flex-start; gap: .75rem;
}
.upg-gambling-warn-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 2px; }
.upg-gambling-warn p { font-size: .8rem; color: var(--warning); margin-bottom: 0; max-width: none; }
.upg-rg-logos { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.upg-rg-badge {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: .3rem .65rem;
  font-size: .725rem; color: var(--muted); font-weight: 600;
}
.upg-age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--surface2); border: 1.5px solid var(--border2);
  border-radius: var(--radius); font-size: .725rem;
  font-weight: 700; color: var(--text-2);
}

/* ===== SCROLL TO TOP ===== */
.upg-scroll-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.upg-scroll-top.visible { opacity: 1; visibility: visible; }
.upg-scroll-top:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--accent-glow); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .upg-footer-grid { grid-template-columns: 1fr 1fr; }
  .upg-footer-grid > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  section { padding: 2.5rem 0; }
  .upg-hero { padding: 3rem 0 2.5rem; }

  .upg-nav, .upg-lang, .upg-hdr-cta { display: none; }
  .upg-hamburger { display: flex; }

  .upg-hero-ctas { flex-direction: column; align-items: center; }
  .upg-btn { width: 100%; max-width: 360px; }

  .upg-code-row { flex-direction: column; }
  .upg-code-display { font-size: 1.125rem; }
  .upg-btn-copy { width: 100%; }

  .upg-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .upg-scroll-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.25rem; }
  .upg-widget { padding: 1.125rem; }
}


/* ===== 2026 EN INTERNAL PAGES ===== */
.upg-nav-wide{gap:.85rem}.upg-nav-wide a{font-size:.78rem}.upg-inner-hero{padding:3.8rem 0 3.2rem;background:radial-gradient(circle at 50% 0,rgba(255,198,41,.09),transparent 45%),var(--bg);border-bottom:1px solid var(--border)}.upg-inner-hero-content{max-width:850px;margin:auto;text-align:center}.upg-inner-hero h1{margin:.6rem 0 .8rem}.upg-inner-hero p{font-size:1.05rem;color:var(--text-2);max-width:760px;margin:auto}.upg-inline-cta{margin:2rem 0 0;background:linear-gradient(100deg,rgba(255,198,41,.12),rgba(255,198,41,.03));border:1px solid rgba(255,198,41,.3);border-radius:var(--radius-lg);padding:1.25rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.upg-inline-cta strong{display:block;color:var(--accent);font-size:1.05rem;margin-bottom:.25rem}.upg-inline-cta p{margin:0;color:var(--text-2);font-size:.88rem}.upg-product-shot{margin:1.5rem 0 0;background:#0d0e11;border:1px solid var(--border);border-radius:var(--radius-xl);padding:.65rem;overflow:hidden}.upg-product-shot img{display:block;width:100%;height:auto;border-radius:calc(var(--radius-xl) - 6px)}.upg-product-shot figcaption{font-size:.75rem;color:var(--muted);padding:.7rem .25rem .15rem}.upg-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.upg-info-card{background:var(--surface2);border:1px solid var(--border);padding:1.35rem;border-radius:var(--radius-lg)}.upg-info-card h3{font-size:1rem;color:var(--accent);margin-bottom:.5rem}.upg-info-card p{font-size:.88rem;margin:0}.upg-link-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}.upg-link-row a{font-weight:700;color:var(--accent);background:var(--accent-tint);border:1px solid rgba(255,198,41,.2);padding:.65rem .85rem;border-radius:var(--radius)}.upg-platform-pulse{display:flex;align-items:center;gap:1.25rem;background:#15161a;border:1px solid #2a2c31;border-radius:14px;padding:.9rem 1rem;margin-bottom:2rem;box-shadow:0 10px 40px rgba(0,0,0,.25)}.upg-pulse-brand{display:flex;align-items:center;gap:.45rem;font-size:1.15rem}.upg-chevron-mark{color:var(--accent);font-weight:900;font-size:1.55rem}.upg-pulse-stat{border-left:1px solid var(--border);padding-left:1rem}.upg-pulse-stat span{display:block;font-size:.7rem;color:var(--muted)}.upg-pulse-stat strong{font-size:.9rem}.upg-pulse-cta{margin-left:auto;background:var(--accent);color:#18160c;font-weight:800;padding:.55rem .8rem;border-radius:8px}.upg-skin-picker{display:grid;grid-template-columns:1fr 1fr;background:#17181c;border:1px solid var(--border);border-radius:16px;overflow:hidden;min-height:520px}.upg-picker-left,.upg-picker-right{padding:1rem}.upg-picker-left{border-right:1px solid var(--border)}.upg-picker-title{font-weight:700;padding:.25rem 0 1rem}.upg-picker-title span{display:inline-flex;background:var(--accent);color:#111;width:36px;height:30px;align-items:center;justify-content:center;border-radius:8px;margin-right:.5rem}.upg-inventory-blur{min-height:430px;border-radius:10px;background:linear-gradient(rgba(19,20,23,.72),rgba(19,20,23,.82)),url('media/skin-picker-source.png') left center/cover;display:grid;place-items:center}.upg-balance-card{background:#1c1d21;border:1px solid #33363d;border-radius:12px;padding:1.3rem;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.4)}.upg-balance-card small,.upg-balance-card strong{display:block}.upg-balance-card strong{margin:.25rem 0 .8rem}.upg-balance-card a{display:inline-block;border:1px solid var(--accent);padding:.5rem .85rem;border-radius:7px;color:var(--text);font-weight:700}.upg-picker-toolbar{display:grid;grid-template-columns:auto 1fr 130px;align-items:center;gap:.55rem;margin-bottom:.7rem}.upg-picker-toolbar input,.upg-picker-toolbar select{background:#1d1e22;border:1px solid #383a40;color:var(--text);border-radius:8px;padding:.65rem .7rem}.upg-skin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.upg-skin-card{position:relative;display:flex;flex-direction:column;background:#111216;border:1px solid #4c4330;border-radius:9px;padding:.35rem;color:var(--text);transition:.2s;overflow:hidden}.upg-skin-card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none}.upg-skin-card img{width:100%;aspect-ratio:1.05/1;object-fit:cover;border-radius:6px}.upg-skin-card strong{font-size:.72rem;margin-top:.3rem}.upg-skin-price{position:absolute;top:.42rem;right:.45rem;background:rgba(0,0,0,.78);color:var(--accent);padding:.16rem .3rem;border-radius:4px;font-size:.58rem;font-weight:800}.upg-picker-note{font-size:.7rem;color:var(--muted);margin:.8rem 0 0}.upg-two-col{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;margin-top:2rem}.upg-method-tabs{display:flex;gap:.45rem;background:#191a1e;border:1px solid var(--border);padding:.35rem;border-radius:12px;max-width:600px;margin:0 auto 1rem}.upg-method-tabs button{flex:1;background:transparent;color:var(--muted);border:0;border-radius:9px;padding:.75rem;font-weight:700;cursor:pointer}.upg-method-tabs button.active{background:#303137;color:var(--text);box-shadow:inset 0 0 0 1px #4d4f56}.upg-method-panels{max-width:650px;margin:auto}.upg-method-panels .upg-product-shot{margin-top:0}.upg-notice{margin:1.3rem 0;background:rgba(46,204,113,.06);border:1px solid rgba(46,204,113,.22);border-radius:var(--radius-lg);padding:1rem 1.2rem}.upg-notice strong{color:var(--success)}.upg-notice p{margin:.3rem 0 0}.upg-notice-warning{background:rgba(255,177,0,.07);border-color:rgba(255,177,0,.25)}.upg-notice-warning strong{color:var(--warning)}.upg-vip-image-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.upg-vip-card-img{display:block;border-radius:14px;overflow:hidden;transition:.2s}.upg-vip-card-img:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(255,198,41,.12)}.upg-vip-card-img img{width:100%;display:block}.upg-table-space{margin-top:2rem}.upg-level-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.5rem}.upg-level-bar span{background:var(--surface2);border:1px solid var(--border);padding:.85rem;text-align:center;border-radius:10px}.upg-level-bar b{display:block;color:var(--accent);font-size:1.2rem;margin-top:.15rem}.upg-footer-grid-4{grid-template-columns:1.6fr 1fr 1.1fr 1fr}
@media(max-width:1120px){.upg-nav-wide{display:none}.upg-lang,.upg-hdr-cta{display:none}.upg-hamburger{display:flex}.upg-footer-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.upg-inline-cta{flex-direction:column;align-items:flex-start}.upg-info-grid,.upg-two-col,.upg-skin-picker{grid-template-columns:1fr}.upg-picker-left{border-right:0;border-bottom:1px solid var(--border)}.upg-vip-image-grid{grid-template-columns:repeat(2,1fr)}.upg-level-bar{grid-template-columns:repeat(2,1fr)}.upg-platform-pulse{flex-wrap:wrap}.upg-pulse-cta{margin-left:0}.upg-footer-grid-4{grid-template-columns:1fr}}
@media(max-width:480px){.upg-picker-toolbar{grid-template-columns:1fr}.upg-skin-grid{grid-template-columns:1fr 1fr}.upg-vip-image-grid{grid-template-columns:1fr}.upg-level-bar{grid-template-columns:1fr}}

/* Review v2 refinements */
.upg-nav-wide a{white-space:nowrap}.upg-platform-pulse.compact{max-width:980px;margin-left:auto;margin-right:auto}.upg-chevron-logo{width:18px;height:26px;display:inline-flex;flex-direction:column;gap:2px;justify-content:center}.upg-chevron-logo i{width:12px;height:8px;border-left:3px solid var(--accent);border-top:3px solid var(--accent);transform:rotate(45deg);display:block;margin-left:2px}.compact-head{max-width:900px;margin:0 auto 1.1rem}.compact-picker{max-width:960px;min-height:0;margin:0 auto;grid-template-columns:.82fr 1.18fr}.compact-picker .upg-picker-left,.compact-picker .upg-picker-right{padding:.8rem}.upg-inventory-mini{height:278px;border-radius:10px;background:linear-gradient(rgba(19,20,23,.78),rgba(19,20,23,.86)),url('media/skin-picker-source.png') left center/cover;display:grid;place-items:center}.compact-picker .upg-picker-toolbar{grid-template-columns:auto minmax(120px,1fr) 108px}.compact-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.upg-skin-card.clean{padding:.35rem;border-color:#34363d;background:#121318}.upg-skin-card.clean img{width:100%;height:70px;aspect-ratio:auto;object-fit:contain;background:#15161a}.upg-skin-card.clean strong{font-size:.65rem;line-height:1.2;margin:.28rem 0 .1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upg-skin-card.clean span{position:static;background:none;padding:0;color:var(--accent);font-size:.56rem;font-weight:700}.platform-shot{max-width:980px;margin-left:auto;margin-right:auto}.small-shot{max-width:430px;margin-left:auto}.upg-info-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.upg-vip-benefits-shot{position:relative}.upg-vip-hotspot{position:absolute;left:37%;right:37%;bottom:2.5%;height:11%;border-radius:14px;z-index:4}.upg-vip-hotspot:focus{outline:3px solid var(--accent);outline-offset:2px}.upg-section-head a,.upg-container p a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(255,198,41,.35);text-underline-offset:3px}.upg-pulse-cta{white-space:nowrap}
@media(max-width:980px){.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.upg-info-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.compact-picker{grid-template-columns:1fr}.upg-inventory-mini{height:210px}.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.upg-info-grid.three{grid-template-columns:1fr}.upg-vip-hotspot{left:30%;right:30%}}
@media(max-width:480px){.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-picker .upg-picker-toolbar{grid-template-columns:1fr}.upg-skin-card.clean img{height:82px}}

/* v3: clickable areas for buttons embedded in official VIP screenshots */
.upg-vip-hero-shot,.upg-vip-benefits-shot{position:relative}
.upg-vip-hero-hotspot{position:absolute;left:47%;right:27%;top:43%;height:13%;border-radius:14px;z-index:5}
.upg-vip-hotspot{position:absolute;left:37%;right:37%;bottom:2.5%;height:11%;border-radius:14px;z-index:5}
.upg-vip-hero-hotspot:focus,.upg-vip-hotspot:focus{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:768px){.upg-vip-hero-hotspot{left:43%;right:22%;top:41%;height:15%}.upg-vip-hotspot{left:30%;right:30%}}

/* ===== v4: richer product motion + modular VIP showcase ===== */
@keyframes upgSweep {
  0% { transform: translateX(-140%); opacity: 0; }
  12% { opacity: .75; }
  48% { opacity: .35; }
  70%,100% { transform: translateX(420%); opacity: 0; }
}
@keyframes upgFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes upgPulseGlow {
  0%,100% { box-shadow: 0 0 0 rgba(255,198,41,0); }
  50% { box-shadow: 0 0 30px rgba(255,198,41,.11); }
}
@keyframes upgOrbit {
  to { transform: rotate(360deg); }
}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,198,41,.035),transparent 28%),
    radial-gradient(circle at 85% 60%,rgba(255,198,41,.025),transparent 24%);
}
.upg-section-head{position:relative;padding-bottom:.85rem}
.upg-section-head::after{
  content:"";position:absolute;left:0;bottom:0;width:150px;height:1px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,198,41,.08),rgba(255,198,41,.72),rgba(255,198,41,.08));
  box-shadow:0 0 14px rgba(255,198,41,.18);
}
.upg-section-head::before{
  content:"";position:absolute;left:0;bottom:-1px;width:35px;height:3px;border-radius:20px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:upgSweep 5.8s linear infinite;
}
.upg-info-card,.upg-promo-card,.upg-inline-cta,.upg-product-shot,.upg-table-wrap{
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.upg-info-card:hover,.upg-promo-card:hover{
  border-color:rgba(255,198,41,.34);transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.22),0 0 24px rgba(255,198,41,.045);
}
.upg-inline-cta{position:relative;overflow:hidden}
.upg-inline-cta::after{
  content:"";position:absolute;top:0;left:0;width:28%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:upgSweep 6.6s linear infinite;
}
.upg-btn,.upg-hdr-cta,.upg-pulse-cta{transition:transform .18s ease,box-shadow .2s ease,filter .2s ease}
.upg-btn:hover,.upg-hdr-cta:hover,.upg-pulse-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,198,41,.16);filter:brightness(1.04)}

.upg-vip-benefits-section{position:relative;overflow:hidden}
.upg-vip-showcase{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);align-items:end;gap:2rem;
  min-height:680px;margin:1.3rem 0 1.25rem;padding:3.25rem 3rem 2rem;
  border:1px solid rgba(255,198,41,.22);border-radius:24px;overflow:hidden;
  background:
    radial-gradient(circle at 78% 35%,rgba(255,181,56,.12),transparent 27%),
    radial-gradient(circle at 18% 15%,rgba(255,198,41,.045),transparent 24%),
    linear-gradient(135deg,#0b0c10 0%,#0a0b0f 60%,#0d0c0b 100%);
  box-shadow:inset 0 0 70px rgba(255,198,41,.025),0 24px 70px rgba(0,0,0,.28);
}
.upg-vip-showcase::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle at 24% 48%,rgba(255,198,41,.8) 0 1px,transparent 1.7px),
    radial-gradient(circle at 47% 18%,rgba(255,255,255,.7) 0 1px,transparent 1.5px),
    radial-gradient(circle at 63% 68%,rgba(255,198,41,.75) 0 1px,transparent 1.7px),
    radial-gradient(circle at 90% 22%,rgba(255,255,255,.8) 0 1px,transparent 1.6px),
    radial-gradient(circle at 82% 81%,rgba(255,198,41,.7) 0 1px,transparent 1.7px);
}
.upg-vip-showcase::after{
  content:"";position:absolute;left:-20%;top:0;width:28%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 18px rgba(255,198,41,.45);
  animation:upgSweep 5.2s linear infinite;
}
.upg-vip-showcase-copy{position:relative;z-index:2;text-align:center;padding-bottom:1rem}
.upg-vip-crown{font-size:2rem;line-height:1;color:#ffcc55;text-shadow:0 0 22px rgba(255,198,41,.2);margin-bottom:.6rem}
.upg-vip-showcase-copy>h3{font-family:'JetBrains Mono',monospace;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:.04em;color:#ffd03d;margin:0;text-shadow:0 0 26px rgba(255,198,41,.13)}
.upg-vip-showcase-copy>span{display:block;margin:.35rem 0 1.65rem;color:#777a82;letter-spacing:.32em;font-size:.78rem}
.upg-vip-benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.upg-vip-benefit-card{position:relative;display:block;border:1px solid #25272d;border-radius:13px;overflow:hidden;background:#0f1014;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.upg-vip-benefit-card::after{content:"";position:absolute;left:-50%;top:0;width:45%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .2s}
.upg-vip-benefit-card:hover{transform:translateY(-4px);border-color:rgba(255,198,41,.45);box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 20px rgba(255,198,41,.06)}
.upg-vip-benefit-card:hover::after{opacity:1;animation:upgSweep 1.5s linear infinite}
.upg-vip-benefit-card img{display:block;width:100%;height:auto}
.upg-vip-status-btn{display:inline-flex;align-items:center;justify-content:center;min-width:190px;margin-top:1.6rem;padding:.8rem 1.4rem;border:1px solid rgba(255,198,41,.75);border-radius:10px;color:#ffd66d;font-weight:800;background:linear-gradient(180deg,rgba(255,198,41,.055),rgba(255,198,41,.012));box-shadow:inset 0 0 15px rgba(255,198,41,.025);transition:all .22s ease}
.upg-vip-status-btn:hover{color:#15120a;background:linear-gradient(135deg,#ffd43b,#f6b800);border-color:#ffd43b;transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,198,41,.28),0 0 24px rgba(255,198,41,.16);text-decoration:none}
.upg-vip-status-btn:active{transform:translateY(-1px)}
.upg-vip-character-wrap{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;min-height:570px}
.upg-vip-character-wrap img{position:relative;z-index:2;width:min(100%,540px);max-height:620px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 35px rgba(0,0,0,.55));animation:upgFloat 6s ease-in-out infinite}
.upg-vip-orbit{position:absolute;width:430px;height:430px;border-radius:50%;border:1px solid rgba(255,198,41,.075);box-shadow:0 0 65px rgba(255,198,41,.035);bottom:70px;left:50%;transform:translateX(-50%)}
.upg-vip-orbit::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border-top:1px solid rgba(255,198,41,.5);border-right:1px solid transparent;animation:upgOrbit 16s linear infinite}

@media(max-width:900px){
  .upg-vip-showcase{grid-template-columns:1fr;min-height:0;padding:2.2rem 1.4rem 0}
  .upg-vip-character-wrap{min-height:420px;order:-1}
  .upg-vip-character-wrap img{max-height:460px;width:min(82%,430px)}
  .upg-vip-orbit{width:320px;height:320px;bottom:50px}
}
@media(max-width:520px){
  .upg-vip-showcase{padding:1.7rem .8rem 0;border-radius:18px}
  .upg-vip-benefit-grid{grid-template-columns:1fr}
  .upg-vip-character-wrap{min-height:330px}
  .upg-vip-character-wrap img{max-height:350px;width:92%}
  .upg-vip-orbit{width:250px;height:250px}
  .upg-vip-showcase-copy>span{letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
  .upg-section-head::before,.upg-inline-cta::after,.upg-vip-showcase::after,.upg-vip-benefit-card::after,.upg-vip-character-wrap img,.upg-vip-orbit::before{animation:none!important}
}
