@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700&family=Noto+Sans+JP:wght@500;700&family=Noto+Sans+TC:wght@500;700&family=Rajdhani:wght@500;600;700&display=swap");

:root {
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-tactical: "Rajdhani", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-copy: "Rajdhani", "Noto Sans TC", "Noto Sans JP", system-ui, sans-serif;
  --neon-red: #ff163f;
  --neon-cyan: #49e7ff;
  --neon-red-rgb: 255, 22, 63;
  --neon-cyan-rgb: 73, 231, 255;
  --tactical-black: #05070a;
  --tactical-panel: rgba(8, 11, 15, .94);
  --tactical-line: rgba(255, 255, 255, .12);
  --neon-shadow: 0 0 8px rgba(var(--neon-red-rgb), .72), 0 0 24px rgba(var(--neon-red-rgb), .22);
  --system-status: "SYS // CREATOR NETWORK  ·  SIGNAL ONLINE";
  --hero-status: "TARGET LOCKED  /  KAMONA CREATOR DIVISION";
  --hero-rail: "CREATOR // PROGRAMS // 01";
  --online-status: "  ·  ONLINE";
}
html[data-locale="ja"] { --system-status: "システム // クリエイターネットワーク  ·  接続中"; --hero-status: "ターゲットロック  /  KAMONA クリエイター部門"; --hero-rail: "クリエイター // プログラム // 01"; --online-status: "  ·  オンライン"; }
html[data-locale="pt-BR"] { --system-status: "SISTEMA // REDE DE CRIADORES  ·  SINAL ONLINE"; --hero-status: "ALVO FIXADO  /  DIVISÃO DE CRIADORES KAMONA"; --hero-rail: "CRIADOR // PROGRAMAS // 01"; --online-status: "  ·  ONLINE"; }
html[data-locale="ru"] { --system-status: "СИСТЕМА // СЕТЬ КРЕАТОРОВ  ·  СИГНАЛ АКТИВЕН"; --hero-status: "ЦЕЛЬ ЗАФИКСИРОВАНА  /  ОТДЕЛ КРЕАТОРОВ KAMONA"; --hero-rail: "КРЕАТОР // ПРОГРАММЫ // 01"; --online-status: "  ·  В СЕТИ"; }
html[data-locale="de"] { --system-status: "SYSTEM // CREATOR-NETZWERK  ·  SIGNAL ONLINE"; --hero-status: "ZIEL ERFASST  /  KAMONA-CREATOR-TEAM"; --hero-rail: "CREATOR // PROGRAMME // 01"; --online-status: "  ·  ONLINE"; }
html[data-locale="es-419"] { --system-status: "SISTEMA // RED DE CREADORES  ·  SEÑAL ACTIVA"; --hero-status: "OBJETIVO FIJADO  /  DIVISIÓN DE CREADORES KAMONA"; --hero-rail: "CREADOR // PROGRAMAS // 01"; --online-status: "  ·  EN LÍNEA"; }
html[data-locale="fr"] { --system-status: "SYSTÈME // RÉSEAU DE CRÉATEURS  ·  SIGNAL EN LIGNE"; --hero-status: "CIBLE VERROUILLÉE  /  DIVISION CRÉATEURS KAMONA"; --hero-rail: "CRÉATEUR // PROGRAMMES // 01"; --online-status: "  ·  EN LIGNE"; }
html[data-locale="zh-Hant"] { --system-status: "系統 // 創作者網路  ·  訊號在線"; --hero-status: "目標鎖定  /  KAMONA 創作者部門"; --hero-rail: "創作者 // 計畫 // 01"; --online-status: "  ·  在線"; }
html[data-locale="zh-Hans"] { --system-status: "系统 // 创作者网络  ·  信号在线"; --hero-status: "目标锁定  /  KAMONA 创作者部门"; --hero-rail: "创作者 // 计划 // 01"; --online-status: "  ·  在线"; }

html { background: var(--tactical-black); }
body {
  font-family: var(--font-copy) !important;
  background:
    radial-gradient(circle at 9% 20%, rgba(var(--neon-red-rgb), .07), transparent 24rem),
    radial-gradient(circle at 91% 68%, rgba(var(--neon-cyan-rgb), .045), transparent 28rem),
    var(--tactical-black) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.018) 4px),
    linear-gradient(90deg, transparent 0 49.9%, rgba(255,255,255,.015) 50%, transparent 50.1% 100%);
  mix-blend-mode: screen;
}
body::after {
  content: var(--system-status);
  position: fixed;
  z-index: 499;
  right: 12px;
  bottom: 12px;
  color: rgba(var(--neon-red-rgb), .26);
  font: 700 7px/1 var(--font-tactical);
  letter-spacing: .24em;
  pointer-events: none;
  writing-mode: vertical-rl;
}

h1, h2, h3, h4, .brand, .brand-copy, .join, .join-button, .primary, .primary-button,
.secondary-button, .program-members-button, .filter, .tab, .name {
  font-family: var(--font-display) !important;
}
p, .description, .hero-copy, .track-summary, .program-point, .faq-answer {
  font-family: var(--font-copy) !important;
}
.section-kicker, .module, .eyebrow, .tag, .track-role, .activity-type, .event-index,
.event-date, .sub, .count, .region, .badge, .brand small, .brand-copy small {
  font-family: var(--font-tactical) !important;
}
h1, h2, h3 {
  font-stretch: condensed;
  text-wrap: balance;
}
h1 span, h2 span, .heading h1, .season-signal strong.accent {
  text-shadow: 0 0 12px rgba(var(--neon-red-rgb), .36), 0 0 34px rgba(var(--neon-red-rgb), .13);
}

.shell, .page { position: relative; isolation: isolate; }
.shell::after, .page::after {
  content: "";
  position: fixed;
  z-index: 498;
  inset: 78px 10px 10px;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(var(--neon-red), var(--neon-red)) left top / 28px 1px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) left top / 1px 28px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) right top / 28px 1px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) right top / 1px 28px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) left bottom / 28px 1px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) left bottom / 1px 28px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) right bottom / 28px 1px no-repeat,
    linear-gradient(var(--neon-red), var(--neon-red)) right bottom / 1px 28px no-repeat;
}

.topbar {
  z-index: 300 !important;
  border-bottom: 1px solid rgba(var(--neon-red-rgb), .18) !important;
  background: linear-gradient(180deg, rgba(3,5,8,.98), rgba(4,7,10,.88)) !important;
  box-shadow: 0 12px 42px rgba(0,0,0,.38), inset 0 -1px rgba(255,255,255,.025);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 4vw;
  bottom: -1px;
  width: clamp(80px, 14vw, 230px);
  height: 1px;
  background: linear-gradient(90deg, var(--neon-red), transparent);
  box-shadow: 0 0 12px rgba(var(--neon-red-rgb), .65);
}
.brand-mark, .brand::before { filter: drop-shadow(0 0 7px rgba(var(--neon-red-rgb), .76)) !important; }
.brand-copy, .brand { letter-spacing: -.015em !important; }
.topnav a, .nav a { position: relative; font-family: ui-monospace, monospace !important; letter-spacing: .18em !important; }
.topnav a::before, .nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 1px;
  background: var(--neon-red);
  box-shadow: var(--neon-shadow);
  transition: width .22s ease, left .22s ease;
}
.topnav a:hover::before, .topnav a:focus-visible::before, .nav a:hover::before, .nav a:focus-visible::before,
.topnav a.active::before, .nav a.active::before { left: 0; width: 100%; }
.join, .join-button, .primary, .primary-button {
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 22px rgba(var(--neon-red-rgb), .2);
}
.join::after, .join-button::after, .primary::after, .primary-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255,255,255,.16);
  clip-path: inherit;
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(var(--neon-red-rgb),.11) 7% 7.08%, transparent 7.08% 100%),
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,.022) 5px) !important;
}
.hero-content::before {
  content: var(--hero-status);
  display: block;
  margin-bottom: 14px;
  color: rgba(var(--neon-red-rgb), .48);
  font: 700 8px/1 var(--font-tactical);
  letter-spacing: .24em;
}
.hero-stats, .season-console, .program-grid, .track-column, .event-grid, .card, .faq-item {
  box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 0 42px rgba(var(--neon-red-rgb), .025) !important;
}
.hero-stat.reward-stat strong {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255,255,255,.32), 0 0 30px rgba(var(--neon-red-rgb), .32);
}
.program-card, .event-card, .track-column, .card, .faq-item {
  border-radius: 0 !important;
}
.program-card, .event-card, .card, .activity-item, .faq-item {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.program-card:hover, .event-card:hover, .card:hover, .activity-item:hover, .faq-item:hover {
  border-color: rgba(var(--neon-red-rgb), .42) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.52), 0 0 24px rgba(var(--neon-red-rgb), .08) !important;
}
.section-kicker, .module, .eyebrow {
  color: var(--neon-red) !important;
  text-shadow: 0 0 11px rgba(var(--neon-red-rgb), .44);
}
.section-kicker::after, .module::after {
  content: var(--online-status);
  color: rgba(255,255,255,.28);
}

.language-switcher {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--font-tactical);
  text-transform: uppercase;
}
.language-trigger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid transparent;
  color: rgba(255,255,255,.78);
  background: transparent;
  font: 700 10px/1 var(--font-tactical);
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s ease;
}
.language-trigger:hover, .language-trigger:focus-visible, .language-switcher.open .language-trigger {
  color: #fff;
  border-color: rgba(var(--neon-red-rgb), .42);
  background: rgba(var(--neon-red-rgb), .06);
  box-shadow: inset 0 0 20px rgba(var(--neon-red-rgb), .04), 0 0 16px rgba(var(--neon-red-rgb), .09);
  outline: none;
}
.language-trigger svg { width: 16px; height: 16px; color: var(--neon-red); filter: drop-shadow(0 0 6px rgba(var(--neon-red-rgb), .62)); }
.language-chevron {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--neon-red);
  transition: transform .2s ease;
}
.language-switcher:not(.open) .language-chevron { transform: rotate(180deg); }
.language-panel {
  position: absolute;
  z-index: 900;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  width: min(170px, calc(100vw - 28px));
  max-height: min(320px, calc(100vh - 94px));
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  border: 1px solid rgba(var(--neon-red-rgb), .64);
  background: linear-gradient(150deg, rgba(29,11,17,.98), rgba(5,8,12,.985) 30%);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 20px rgba(var(--neon-red-rgb), .1), inset 0 0 36px rgba(var(--neon-red-rgb), .03);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.language-switcher.open .language-panel { visibility: visible; opacity: 1; transform: none; }
.language-panel-head {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(var(--neon-red-rgb), .28);
  color: rgba(255,255,255,.62);
  font: 700 8px/1 var(--font-tactical);
  letter-spacing: .18em;
}
.language-panel-head svg { width: 12px; height: 12px; color: var(--neon-red); filter: drop-shadow(0 0 6px rgba(var(--neon-red-rgb), .5)); }
.language-options { display: grid; }
.language-option {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #b8bec8;
  background: rgba(3,5,8,.42);
  font: 700 11px/1 var(--font-tactical);
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, padding-left .16s ease, text-shadow .16s ease;
}
.language-option:last-child { border-bottom: 0; }
.language-option:hover, .language-option:focus-visible {
  padding-left: 14px;
  color: #fff;
  background: linear-gradient(90deg, rgba(var(--neon-red-rgb), .13), transparent 74%);
  outline: none;
}
.language-option.active {
  color: var(--neon-red);
  background: linear-gradient(90deg, rgba(var(--neon-red-rgb), .16), rgba(var(--neon-red-rgb), .03));
  text-shadow: 0 0 12px rgba(var(--neon-red-rgb), .45);
}
.language-option.active::after {
  content: attr(data-active-label);
  margin-left: auto;
  color: rgba(255,255,255,.34);
  font-size: 8px;
  letter-spacing: .2em;
}

@media (max-width: 1180px) {
  .topbar { gap: 18px !important; }
  .topnav, .nav { gap: 18px !important; }
  .topnav a, .nav a { font-size: 9px !important; }
  .language-trigger { padding-inline: 8px; }
}
@media (max-width: 900px) {
  body::after, .shell::after, .page::after { display: none; }
  .language-switcher { margin-left: auto; }
  .language-trigger { width: 42px; min-width: 42px; padding: 0; justify-content: center; }
  .language-current, .language-chevron { display: none; }
  .join, .join-button { margin-left: 0 !important; }
  .language-panel { position: fixed; left: auto; top: 64px; right: 12px; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 76px); transform: translateY(-8px) scale(.985); }
  .language-switcher.open .language-panel { transform: none; }
  .language-panel-head { height: 56px; padding-inline: 22px; font-size: 14px; }
  .language-option { min-height: 62px; padding-inline: 26px; font-size: 18px; }
}
@media (max-width: 520px) {
  .brand-copy small, .brand small { display: none !important; }
  .brand-copy, .brand { font-size: 16px !important; }
  .brand-mark, .brand::before { width: 29px !important; height: 25px !important; }
  .join, .join-button { padding: 11px 12px !important; font-size: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* OneTrust Cookie Settings button override */
#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.ot-sdk-show-settings:hover {
  color: #3e3e3e;
  border: none;
  height: auto;
  white-space: normal;
  word-wrap: normal;
  padding: 0 5px;
  font-size: 13px;
  line-height: 1.5;
  transition: initial;
  background: none;
}

#ot-sdk-btn.ot-sdk-show-settings:hover {
  color: #ccc;
}

/* OneTrust Cookie Consent — dark theme, copied from the creator hub footer. */
#ot-sdk-btn-floating.ot-floating-button,
.onetrust-pc-dark-filter {
  z-index: 998 !important;
}

#onetrust-pc-sdk .ot-pc-footer-logo,
#onetrust-consent-sdk #onetrust-pc-sdk,
#onetrust-consent-sdk #onetrust-banner-sdk,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-grpcntr.ot-acc-txt {
  background-color: #050606 !important;
}

#onetrust-pc-sdk .ot-pc-footer,
#onetrust-consent-sdk #onetrust-pc-sdk {
  border-top: 1px solid #323435 !important;
}

#onetrust-pc-sdk .ot-pc-logo {
  position: relative !important;
}

#onetrust-pc-sdk .ot-pc-logo img {
  display: none !important;
}

#onetrust-consent-sdk #onetrust-pc-sdk h3,
#onetrust-consent-sdk #onetrust-pc-sdk h4,
#onetrust-consent-sdk #onetrust-policy-text,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc {
  color: #c5cdc7 !important;
}

#onetrust-pc-sdk .ot-always-active,
#onetrust-consent-sdk #onetrust-banner-sdk a[href],
#onetrust-consent-sdk #onetrust-banner-sdk a[href] font,
#onetrust-consent-sdk #onetrust-banner-sdk .ot-link-btn,
#onetrust-consent-sdk #onetrust-pc-sdk .privacy-notice-link,
#onetrust-consent-sdk #onetrust-pc-sdk .category-host-list-handler {
  color: #a34132 !important;
}

#onetrust-banner-sdk button,
#onetrust-pc-sdk button,
#ot-sdk-cookie-policy button {
  margin-bottom: 2px !important;
}

#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr div:last-child {
  margin: 0 4px !important;
}

#onetrust-pc-sdk .ot-plus-minus span,
#onetrust-pc-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob {
  background-color: #a34132 !important;
}

#onetrust-banner-sdk #onetrust-reject-all-handler,
#onetrust-consent-sdk #onetrust-accept-btn-handler,
#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn) {
  background-color: #a34132 !important;
  border-color: #a34132 !important;
}

#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
  border: 1px solid #636864 !important;
}

#onetrust-pc-sdk .ot-accordion-layout .ot-acc-hdr {
  position: relative !important;
  min-height: 25px !important;
  padding: 15px 0 !important;
}

#onetrust-pc-sdk button {
  font-size: 0.9em !important;
}

#onetrust-pc-sdk .ot-pc-header {
  border-bottom: 1px solid #636864 !important;
}

#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr,
#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr div:last-child {
  padding: 2px 0 !important;
}

#onetrust-consent-sdk #onetrust-pc-btn-handler {
  background: none !important;
  color: #a34132 !important;
}

#onetrust-consent-sdk #onetrust-pc-btn-handler.cookie-setting-link {
  color: #fff !important;
  text-align: center;
}

#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr div:first-child {
  margin-left: 2px !important;
}

#onetrust-pc-sdk .ot-vs-config .ot-acc-hdr .ot-cat-header {
  margin: 0 2px !important;
}

#onetrust-pc-sdk .ot-pc-footer-logo {
  opacity: 0;
}

#onetrust-pc-sdk .ot-pc-logo {
  display: none !important;
}

#onetrust-consent-sdk,
#onetrust-consent-sdk *,
#onetrust-pc-sdk,
#onetrust-pc-sdk *,
#onetrust-banner-sdk,
#onetrust-banner-sdk *,
#onetrust-banner-sdk button,
#onetrust-banner-sdk #onetrust-reject-all-handler,
#onetrust-banner-sdk #onetrust-accept-btn-handler,
#onetrust-banner-sdk #onetrust-pc-btn-handler {
  font-family: Rajdhani, sans-serif !important;
}

#onetrust-consent-sdk #onetrust-pc-btn-handler {
  background-color: #a34132 !important;
  border-color: #a34132 !important;
}

/* Brand: official white ABI logo replaces the CSS-drawn mark and red CREATOR CAMP text. */
.brand::before, .brand::after { content: none !important; }
.brand .brand-game, .brand .brand-copy, .brand-mark { display: none !important; }
.brand .brand-logo { display: block; width: auto; height: 38px; }
@media (max-width: 900px) { .brand .brand-logo { height: 30px; } }