/* Permanent WG Mojo rich yellow theme. Layout and copy stay unchanged. */
html {
  color-scheme: dark;
  --wg-page: #0a0b0d;
  --wg-page-deep: #060709;
  --wg-surface: #14161a;
  --wg-surface-raised: #1b1e23;
  --wg-surface-high: #252931;
  --wg-edge: #353a44;
  --wg-edge-strong: #626975;
  --wg-yellow: #ffd43b;
  --wg-yellow-bright: #ffe56b;
  --wg-yellow-wash: rgb(255 212 59 / 0.12);
  --wg-gold: #d99b16;
  --wg-gold-deep: #8f5c0c;
  --wg-gold-wash: rgb(217 155 22 / 0.14);
  --wg-paper: #f7f7f4;
  --wg-copy: #d7d9de;
  --wg-muted: #a9afb9;
  --wg-ink: #101114;
  --wg-info: #65c7e8;
  --wg-info-wash: rgb(101 199 232 / 0.13);
  --wg-success: #62d394;
  --wg-success-soft: #bdf6d2;
  --wg-success-wash: rgb(98 211 148 / 0.13);
  --wg-warning: #ffb454;
  --wg-warning-soft: #ffd39a;
  --wg-warning-wash: rgb(255 180 84 / 0.14);
  --wg-danger: #ff7d75;
  --wg-danger-soft: #ffb7b2;
  --wg-danger-wash: rgb(255 125 117 / 0.14);
  --wg-shadow-directional: 2px 3px 0 rgb(0 0 0 / 0.48);
  background: var(--wg-page);
  accent-color: var(--wg-yellow);
}

html body {
  background-color: var(--wg-page) !important;
  background-image: none !important;
  color: var(--wg-paper) !important;
}

html ::selection {
  background: var(--wg-yellow);
  color: var(--wg-ink);
}

html :focus-visible {
  outline: 2px solid var(--wg-yellow-bright) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

html select,
html input,
html textarea {
  color-scheme: dark;
}

html select option {
  background-color: var(--wg-surface) !important;
  color: var(--wg-paper) !important;
}

/* One upper-left brand light gives the hero depth without restoring the stock purple grid. */
html .hero {
  background-color: var(--wg-page-deep) !important;
  background-image:
    radial-gradient(ellipse 72% 115% at 0% 0%, rgb(255 212 59 / 0.2) 0%, rgb(217 155 22 / 0.1) 34%, transparent 62%),
    linear-gradient(125deg, #211b0d 0%, #111214 40%, var(--wg-page-deep) 100%) !important;
}

/* Two faint local signal rays share the hero light source; this is not a repeating page grid. */
html .hero-bg {
  background-image:
    linear-gradient(118deg, transparent 0 16%, rgb(255 212 59 / 0.07) 16.2% 16.45%, transparent 16.7% 100%),
    linear-gradient(118deg, transparent 0 27%, rgb(217 155 22 / 0.05) 27.15% 27.3%, transparent 27.55% 100%) !important;
  background-size: 100% 100% !important;
  -webkit-mask-image: radial-gradient(ellipse 58% 88% at 0% 0%, #000 0%, transparent 72%) !important;
  mask-image: radial-gradient(ellipse 58% 88% at 0% 0%, #000 0%, transparent 72%) !important;
  opacity: 0.72 !important;
}

html .skip-link {
  border-color: var(--wg-yellow) !important;
  background: var(--wg-paper) !important;
  color: var(--wg-ink) !important;
  box-shadow: none !important;
}

html .shadow-glow {
  box-shadow: var(--wg-shadow-directional) !important;
}

/* Re-map the site's Tailwind and custom dark surfaces into neutral graphite. */
html :is(.bg-ink, [class*="bg-ink/"]) {
  background-color: var(--wg-page) !important;
}

html :is(.bg-panel, [class*="bg-white/"], [class*="bg-slate-800"], [class*="bg-gray-800"]) {
  background-color: var(--wg-surface-raised) !important;
}

html :is([class*="bg-slate-950"], [class*="bg-gray-950"], [class*="bg-black/"]) {
  background-color: var(--wg-page-deep) !important;
}

html :is(.faq-item, details, [class*="border-white/"]) {
  border-color: var(--wg-edge) !important;
}

html :is([class*="text-white"], [class*="text-slate-50"], [class*="text-slate-100"], [class*="text-gray-50"], [class*="text-gray-100"]) {
  color: var(--wg-paper) !important;
}

html :is([class*="text-slate-200"], [class*="text-slate-300"], [class*="text-gray-200"], [class*="text-gray-300"], [class*="text-zinc-200"], [class*="text-neutral-200"]) {
  color: var(--wg-copy) !important;
}

html :is([class*="text-slate-400"], [class*="text-slate-500"], [class*="text-gray-400"], [class*="text-gray-500"], [class*="text-zinc-400"], [class*="text-neutral-400"], .faq-answer) {
  color: var(--wg-muted) !important;
}

/* Brand colour becomes clear yellow; informational and functional colours stay distinct. */
html :is([class*="text-pink-"], [class*="text-fuchsia-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-indigo-"]) {
  color: var(--wg-yellow-bright) !important;
}

html :is([class*="text-cyan-"], [class*="text-sky-"], [class*="text-blue-"], [class*="text-teal-"]) {
  color: var(--wg-info) !important;
}

html :is([class*="text-green-"], [class*="text-emerald-"]) {
  color: var(--wg-success) !important;
}

html :is([class*="text-yellow-"], [class*="text-amber-"], [class*="text-orange-"]) {
  color: var(--wg-warning) !important;
}

html :is([class*="text-red-"], [class*="text-rose-"]) {
  color: var(--wg-danger) !important;
}

html :is([class*="border-pink-"], [class*="border-fuchsia-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-indigo-"], [class*="border-cyan-"], [class*="border-sky-"], [class*="border-blue-"], [class*="border-teal-"]) {
  border-color: var(--wg-edge-strong) !important;
}

html :is([class*="border-green-"], [class*="border-emerald-"]) {
  border-color: var(--wg-success) !important;
}

html :is([class*="border-yellow-"], [class*="border-amber-"], [class*="border-orange-"]) {
  border-color: var(--wg-warning) !important;
}

html :is([class*="border-red-"], [class*="border-rose-"]) {
  border-color: var(--wg-danger) !important;
}

html :is([class*="bg-pink-"], [class*="bg-fuchsia-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-indigo-"]) {
  background-color: var(--wg-yellow-wash) !important;
}

html :is([class*="bg-cyan-"], [class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-teal-"]) {
  background-color: var(--wg-info-wash) !important;
}

html :is([class*="bg-green-"], [class*="bg-emerald-"]) {
  background-color: var(--wg-success-wash) !important;
}

html :is([class*="bg-yellow-"], [class*="bg-amber-"], [class*="bg-orange-"]) {
  background-color: var(--wg-warning-wash) !important;
}

html :is([class*="bg-red-"], [class*="bg-rose-"]) {
  background-color: var(--wg-danger-wash) !important;
}

/* Former gradients become quiet graphite surfaces; primary CTAs are restored below. */
html :is(
  [class*="from-pink-"],
  [class*="from-fuchsia-"],
  [class*="from-violet-"],
  [class*="from-purple-"],
  [class*="from-indigo-"],
  [class*="from-cyan-"],
  [class*="from-sky-"],
  [class*="from-blue-"],
  [class*="from-teal-"],
  [class*="from-green-"],
  [class*="from-emerald-"],
  [class*="via-pink-"],
  [class*="via-fuchsia-"],
  [class*="via-violet-"],
  [class*="via-purple-"],
  [class*="via-indigo-"],
  [class*="via-cyan-"],
  [class*="via-sky-"],
  [class*="via-blue-"],
  [class*="via-teal-"],
  [class*="via-green-"],
  [class*="via-emerald-"],
  [class*="to-pink-"],
  [class*="to-fuchsia-"],
  [class*="to-violet-"],
  [class*="to-purple-"],
  [class*="to-indigo-"],
  [class*="to-cyan-"],
  [class*="to-sky-"],
  [class*="to-blue-"],
  [class*="to-teal-"],
  [class*="to-green-"],
  [class*="to-emerald-"]
) {
  background-color: var(--wg-surface-high) !important;
  background-image: none !important;
}

html :is([class*="ring-pink-"], [class*="ring-fuchsia-"], [class*="ring-violet-"], [class*="ring-purple-"], [class*="ring-indigo-"], [class*="ring-cyan-"], [class*="ring-blue-"]) {
  --tw-ring-color: rgb(255 229 107 / 0.82) !important;
}

html :is(a, button, input, select, textarea) {
  -webkit-tap-highlight-color: rgb(255 212 59 / 0.18);
}

/* Yellow and gold are reserved for primary decisions and selected hierarchy. */
html .btn-primary,
html [data-checkout-type].btn-primary {
  border-color: var(--wg-yellow) !important;
  background: linear-gradient(135deg, var(--wg-yellow) 0%, var(--wg-gold) 100%) !important;
  color: var(--wg-ink) !important;
  box-shadow: var(--wg-shadow-directional) !important;
}

html .btn-primary:hover,
html [data-checkout-type].btn-primary:hover {
  border-color: var(--wg-yellow-bright) !important;
  background: linear-gradient(135deg, var(--wg-yellow-bright) 0%, var(--wg-yellow) 54%, var(--wg-gold) 100%) !important;
  color: var(--wg-ink) !important;
  box-shadow: var(--wg-shadow-directional) !important;
}

html .btn-secondary {
  border-color: var(--wg-edge-strong) !important;
  background: var(--wg-surface-raised) !important;
  color: var(--wg-copy) !important;
  box-shadow: none !important;
}

html .btn-secondary:hover {
  border-color: var(--wg-yellow) !important;
  background: var(--wg-surface-high) !important;
  color: var(--wg-paper) !important;
}

html :is(.step-pill, .product-price) {
  border-color: var(--wg-yellow) !important;
  background: linear-gradient(135deg, var(--wg-yellow) 0%, var(--wg-gold) 100%) !important;
  color: var(--wg-ink) !important;
  box-shadow: var(--wg-shadow-directional) !important;
}

html :is([class*="radial-gradient"], .queue-page) {
  background-color: var(--wg-page) !important;
  background-image: none !important;
}

html .queue-input {
  border-color: var(--wg-edge-strong) !important;
  background: var(--wg-surface) !important;
  color: var(--wg-paper) !important;
}

/* Bespoke customer-facing sections use their own selectors instead of Tailwind. */
html {
  --gta-ink: var(--wg-page);
  --gta-ink-raised: var(--wg-surface);
  --gta-ink-soft: var(--wg-surface-raised);
  --gta-paper: var(--wg-paper);
  --gta-copy: var(--wg-copy);
  --gta-muted: var(--wg-muted);
  --gta-pink: var(--wg-yellow);
  --gta-pink-soft: var(--wg-yellow-bright);
  --gta-pink-dark: #e8bd14;
  --gta-violet: var(--wg-yellow);
  --gta-cyan: var(--wg-info);
  --gta-cyan-soft: #b9ecfa;
  --gta-green: var(--wg-success);
  --gta-amber: var(--wg-warning);
  --gta-danger: var(--wg-danger);
}

html :is(.wizard-shell, .ci-card, .ci-panel, .price-card, .option-tile, .setup-row, .review-row, .download-readout, [data-download-summary], .guide-card, .disclosure-box, .queue-card) {
  border-color: var(--wg-edge) !important;
  background: var(--wg-surface-raised) !important;
  box-shadow: none !important;
}

html :is(.offer-card, .offer-card-bundle, .comparison-card, .comparison-card-accent, .counter-strip) {
  border-color: var(--wg-edge) !important;
  background: var(--wg-surface-raised) !important;
  box-shadow: none !important;
}

html :is(.step-kicker, .setup-row__eyebrow, .scene-label) {
  color: var(--wg-yellow-bright) !important;
}

html :is(.wizard-copy, .option-tile, .ci-source-button, .ci-artifact-chip) {
  color: var(--wg-copy) !important;
}

html :is(.filter-btn-active, .step-tab[aria-current="step"], .option-tile[aria-pressed="true"]) {
  border-color: var(--wg-yellow) !important;
  background: linear-gradient(135deg, var(--wg-yellow-wash) 0%, var(--wg-gold-wash) 100%) !important;
  color: var(--wg-paper) !important;
  box-shadow: var(--wg-shadow-directional) !important;
}

html :is(.roblox-visual, .shot-frame, .gta-visual) {
  border-color: var(--wg-edge) !important;
  background: var(--wg-surface) !important;
  box-shadow: none !important;
}

html .roblox-visual::before {
  background: linear-gradient(180deg, transparent, rgb(255 212 59 / 0.08)) !important;
}

html .status-dot {
  box-shadow: none !important;
}

html :is(.ci-lead-card, .ci-secondary-card) {
  border-color: var(--wg-edge) !important;
  background: var(--wg-surface) !important;
  box-shadow: none !important;
}

html :is(.ci-source-button:hover, .ci-source-button[aria-pressed="true"]) {
  border-color: var(--wg-yellow) !important;
  background: linear-gradient(135deg, var(--wg-yellow-wash) 0%, var(--wg-gold-wash) 100%) !important;
  color: var(--wg-paper) !important;
}

/* The theme is intentionally static: hover states change tone, never elevation. */
html .lift-card:hover,
html .shot-frame:hover img,
html .gallery-thumb:hover,
html .gallery-thumb:hover img {
  transform: none !important;
}

html .gallery-nav:hover {
  transform: translateY(-50%) !important;
}

html .ci-pill[data-tone="good"] {
  border-color: var(--wg-success) !important;
  background: var(--wg-success-wash) !important;
  color: var(--wg-success-soft) !important;
}

html .ci-pill[data-tone="warn"] {
  border-color: var(--wg-warning) !important;
  background: var(--wg-warning-wash) !important;
  color: var(--wg-warning-soft) !important;
}

html .ci-pill[data-tone="hot"] {
  border-color: var(--wg-danger) !important;
  background: var(--wg-danger-wash) !important;
  color: var(--wg-danger-soft) !important;
}

@media (max-width: 767.98px) {
  html header[data-global-nav="true"],
  html header[data-global-nav="true"] #mobile-global-nav,
  html .mobile-cta {
    background-color: rgb(10 11 13 / 0.98) !important;
  }
}

/* Gift picker: hover, keyboard focus and selected borders in TT yellow (overrides the pinned core releases). */
html body .tt-gift-picker-option:is(:hover, :focus-visible, [aria-selected="true"]) {
  border-color: #ffd43b;
}

/* Gift picker manual entry in TT yellow on every pinned core version. */
html body .tt-gift-picker-manual input:not([type="checkbox"]):focus {
  border-color: #ffd43b;
  box-shadow: 0 0 0 2px rgba(255, 212, 59, .16) !important; /* preserves the picker glow over the site-wide focus reset */
}
html body .tt-gift-picker-manual button.tt-gift-picker-manual-toggle,
html body .tt-gift-picker-manual-toggle {
  color: #ffd43b;
}
html .tt-gift-picker-manual button.tt-gift-picker-manual-toggle:focus-visible,
html .tt-gift-picker-manual-toggle:focus-visible,
html body .tt-gift-picker-manual input:focus-visible {
  outline-color: #ffd43b !important; /* beats the site-wide :focus-visible ring */
}
html body .tt-gift-picker-manual .tt-gift-picker-manual-body button {
  background: #ffd43b;
  border-color: #ffd43b;
}