:root{
  --rlx-bg:#070916;
  --rlx-bg-2:#0c1024;
  --rlx-panel:rgba(11,16,34,.84);
  --rlx-panel-strong:rgba(15,22,48,.96);
  --rlx-panel-soft:rgba(17,24,52,.78);
  --rlx-border:rgba(113,122,255,.26);
  --rlx-border-strong:rgba(174,121,255,.46);
  --rlx-text:#f5f2ff;
  --rlx-dim:#b7b4d9;
  --rlx-dim-2:#8d90b7;
  --rlx-purple:#9b5cff;
  --rlx-purple-2:#6f72ff;
  --rlx-pink:#ff4fd8;
  --rlx-blue:#29f0ff;
  --rlx-green:#c6ff3a;
  --rlx-gold:#ffe85f;
  --rlx-shadow:0 24px 80px rgba(0,0,0,.38);
  --rlx-card-shadow:0 18px 42px rgba(4,8,24,.32);
}

html,body{
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(188,87,255,.20), transparent 62%),
    radial-gradient(800px 500px at 75% 12%, rgba(62,110,255,.12), transparent 60%),
    radial-gradient(900px 700px at 86% 84%, rgba(255,95,206,.11), transparent 55%),
    linear-gradient(180deg, #080b17 0%, #090c18 42%, #0a0d1a 100%) !important;
  color:var(--rlx-text) !important;
}
body{
  padding-top:98px !important;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%),
             radial-gradient(circle at top, rgba(255,255,255,.04), transparent 22%);
}

a{color:#91c6ff}
a:hover{color:#c6a0ff}

.rl-global-nav{
  position:fixed; top:0; left:0; right:0; z-index:9998;
  backdrop-filter:blur(18px);
  background:rgba(5,8,18,.72);
  border-bottom:1px solid rgba(151,118,255,.16);
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.rl-global-nav-inner{
  width:min(1380px, calc(100% - 28px));
  margin:0 auto;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.rl-brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--rlx-text);
}
.rl-brand-mark{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(124,92,255,.28), rgba(255,90,190,.18));
  border:1px solid rgba(197,153,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(95,39,205,.18);
  font-size:22px;
}
.rl-brand-copy strong{
  display:block; font:700 1.55rem/1 'Bebas Neue',sans-serif; letter-spacing:.04em;
  background:linear-gradient(90deg,#ffffff 0%,#d7c2ff 35%,#ff8fdf 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rl-brand-copy small{
  display:block; margin-top:3px;
  color:var(--rlx-dim);
  font:500 .85rem/1.1 'Inter',sans-serif;
}
.rl-nav-toggle{
  display:none; border:1px solid rgba(187,134,255,.32);
  background:rgba(16,20,44,.88); color:var(--rlx-text);
  border-radius:14px; width:42px; height:42px; cursor:pointer;
}
.rl-nav-links{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.rl-nav-links a{
  color:#e6e4ff; text-decoration:none;
  font:600 .92rem/1 'Inter',sans-serif;
  padding:12px 14px; border-radius:12px;
  border:1px solid transparent;
  transition:all .16s ease;
}
.rl-nav-links a:hover,
.rl-nav-links a.active{
  background:linear-gradient(180deg, rgba(117,78,255,.18), rgba(255,92,201,.08));
  border-color:rgba(187,134,255,.22);
  color:#fff;
}
.rl-nav-links a.cta{
  background:linear-gradient(90deg, var(--rlx-purple-2), var(--rlx-pink));
  color:white !important;
  border-color:transparent;
  box-shadow:0 10px 30px rgba(140,89,255,.28);
}

/* Shared shell */
.wrap,
.rlp-page-shell{
  position:relative;
}
.rl-arena .wrap{max-width:1280px !important;}
.rl-guide .wrap{width:min(1120px,100%) !important;}
.rl-tools .rlp-page-shell{width:min(1280px, calc(100% - 32px)) !important; margin:0 auto !important;}

.rl-guide .topbar,
.rl-tools .rlp-page-header{
  display:none !important;
}

/* Floating theme controls */
.top-controls{
  position:fixed !important; top:20px !important; right:20px !important; left:auto !important; z-index:9997 !important;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
.control-group{background:rgba(15,18,36,.86) !important; border:1px solid rgba(183,145,255,.24) !important; padding:8px !important; box-shadow:var(--rlx-card-shadow) !important}
.theme-dot,
.icon-btn{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(187,134,255,.25) !important;
  box-shadow:none !important;
}
.icon-btn{color:var(--rlx-text) !important}
.theme-dot.active{outline:2px solid rgba(255,255,255,.20) !important}
.top-right-actions{display:flex; align-items:center; gap:8px;}
.settings-popover{
  pointer-events:auto;
  min-width:180px;
  padding:12px;
  border-radius:18px;
  background:rgba(15,18,36,.96) !important;
  border:1px solid rgba(183,145,255,.24) !important;
  box-shadow:var(--rlx-card-shadow);
}
.settings-popover[hidden]{display:none !important;}
.settings-title{
  font:600 .75rem/1 'IBM Plex Mono',monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rlx-dim);
  margin-bottom:10px;
}
.settings-theme-row{display:flex; gap:8px; align-items:center;}
.rl-arena .eyebrow{display:none !important;}

/* Main app home */
.rl-arena header{
  text-align:left !important;
  margin-bottom:28px !important;
}
.rl-arena #screen-home > header,
.rl-arena .screen.active#screen-home > header,
.rl-arena section#screen-home > header{
  background:
    radial-gradient(520px 240px at 90% 0%, rgba(255,92,201,.08), transparent 70%),
    radial-gradient(440px 220px at 0% 100%, rgba(80,111,255,.11), transparent 70%),
    linear-gradient(180deg, rgba(14,18,40,.90), rgba(9,12,29,.90));
  border:1px solid rgba(187,134,255,.16);
  border-radius:28px;
  padding:40px 38px 36px !important;
  box-shadow:var(--rlx-shadow);
  overflow:hidden;
  position:relative;
}
.rl-arena #screen-home > header::after{
  content:"";
  position:absolute; inset:auto -80px -110px auto;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(186,94,255,.22), transparent 64%);
  pointer-events:none;
}
.eyebrow{
  color:#ff9ae4 !important;
  letter-spacing:.28em !important;
  font-weight:700 !important;
}
.rl-arena h1,
.rl-guide h1,
.rl-tools .rlp-hero h1,
.rlp-hero h1{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:clamp(4rem, 7vw, 6.6rem) !important;
  line-height:.9 !important;
  letter-spacing:.02em !important;
  margin-bottom:16px !important;
  background:linear-gradient(90deg,#ffffff 0%, #d8c2ff 30%, #a772ff 56%, #ff6dcf 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
.rl-guide h1{font-size:clamp(3.4rem,6vw,5.4rem) !important;}
.sub,
.lead,
.rlp-lead{
  color:var(--rlx-dim) !important;
  font-size:1.07rem !important;
  line-height:1.75 !important;
  max-width:820px;
}
.rl-home-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;
}
.rl-home-actions a{
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  padding:14px 18px; border-radius:14px;
  font:700 .95rem/1 'Inter',sans-serif;
  border:1px solid rgba(187,134,255,.22);
  color:#fff;
  background:rgba(255,255,255,.04);
}
.rl-home-actions a.primary{
  background:linear-gradient(90deg, var(--rlx-purple-2), var(--rlx-pink));
  border-color:transparent;
  box-shadow:0 14px 34px rgba(139,92,246,.28);
}
.rl-home-actions a:hover{transform:translateY(-1px)}

.hero-strip{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px !important;
  margin:18px 0 24px !important;
}
.hero-stat,
.summary-card,
.reaction-fact-card,
.seo-card,
.ad-slot,
.card,
.takeaways,
.toc,
.related,
.sources,
.hub-card,
.mini,
.rlp-card,
.rlp-stat,
.rlp-ach,
.rlp-table-wrap,
.rlp-note,
.rlp-panel,
.rlp-block,
.game-shell,
.stage,
.choice-key,
.target-style-btn,
.target-count-btn,
.reaction-color-btn,
.target-preview,
.rlp-guide-link,
.rlp-embed-card,
.cta,
.rlp-install,
.rlp-week,
.rlp-device-list,
.rlp-list-row,
.rlp-home-utility{
  background:linear-gradient(180deg, rgba(13,17,37,.92), rgba(10,13,30,.94)) !important;
  border:1px solid rgba(163,125,255,.18) !important;
  border-radius:22px !important;
  box-shadow:var(--rlx-card-shadow) !important;
}
.hero-stat{
  padding:22px 20px !important;
}
.hero-stat-value,
.summary-score,
.rlp-stat strong{
  color:#fff !important;
  font-family:'Bebas Neue',sans-serif !important;
  font-size:3rem !important;
  letter-spacing:.02em !important;
}
.hero-stat-label,
.summary-label,
.stat-label,
.rlp-stat span{
  color:#9ea3cf !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  font-size:.72rem !important;
}

.mode-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px !important;
}
.mode-card{
  text-decoration:none !important;
  color:var(--rlx-text) !important;
  padding:20px !important;
  min-height:190px;
  position:relative;
  overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mode-card::before,
.seo-card::before,
.card::before,
.rlp-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 35%, transparent 65%, rgba(167,116,255,.05));
  pointer-events:none;
}
.mode-card:hover,
.seo-card:hover,
.hub-card:hover,
.related a:hover,
.rlp-btn:hover,
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(201,168,255,.34) !important;
  box-shadow:0 22px 48px rgba(8,12,30,.45) !important;
}
.mode-card.featured{
  grid-column:span 2;
  min-height:160px;
  background:
    radial-gradient(240px 140px at 88% 16%, rgba(255,212,109,.12), transparent 70%),
    radial-gradient(260px 160px at 0% 100%, rgba(89,179,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(15,20,45,.96), rgba(11,14,32,.96)) !important;
}
.mode-title,
.rlp-card h2,
.card h2,
.hub-card h3,
.related h2,
.sources h2,
.takeaways h2,
.toc h2,
.rlp-hero h2,
.seo-content h2,
.cta strong{
  color:#fff !important;
}
.mode-title{
  font-size:2.15rem !important;
  font-family:'Bebas Neue',sans-serif !important;
  line-height:1 !important;
  letter-spacing:.02em;
}
.mode-desc,
.seo-card p,
.card p,
.card li,
.rlp-card p,
.rlp-card li,
.hub-card p,
.related a,
.sources li,
.note,
.site-footer-links,
.site-info-links a,
footer,
.rlp-note,
.rlp-table td,
.rlp-table th,
.rlp-lead,
.hero .lead,
.lead,
.meta,
.article-meta{
  color:var(--rlx-dim) !important;
}
.mode-top{margin-bottom:18px !important; gap:12px !important; align-items:flex-start !important}
.mode-icon{font-size:1.8rem !important}
.badge,
.rlp-kicker,
.seo-kicker,
.tag,
.meta,
.article-meta{
  background:rgba(255,214,109,.10) !important;
  color:#ffd56d !important;
  border:1px solid rgba(255,214,109,.16) !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  max-width:max-content;
}
.badge.hard{background:rgba(255,95,206,.12) !important; color:#ff93da !important; border-color:rgba(255,95,206,.18) !important}
.badge.warn{background:rgba(89,179,255,.12) !important; color:#91c6ff !important; border-color:rgba(89,179,255,.18) !important}

/* Home content sections */
.seo-content,
.rlp-grid,
.rlp-utility-grid{
  margin-top:28px !important;
}
.seo-grid,
.hub-grid,
.related-grid,
.grid2,
.rlp-grid,
.rlp-stat-grid{
  gap:16px !important;
}
.seo-card,
.card,
.rlp-card,
.takeaways,
.toc,
.related,
.sources,
.hub-card,
.mini{
  padding:24px !important;
  position:relative;
}
.seo-content > h2,
.hub-section > h2,
.related > h2,
.rlp-card h2,
.card h2,
.takeaways h2,
.toc h2,
.sources h2{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:2.15rem !important;
  margin-bottom:14px !important;
  letter-spacing:.02em !important;
}
.seo-nav,
.site-info-links,
.footer-links,
.rlp-nav,
.rlp-inline-links{
  display:flex; gap:10px; flex-wrap:wrap;
}
.seo-nav a,
.site-info-links a,
.footer-links a,
.rlp-nav a,
.rlp-inline-links a,
.rlp-page-shell a.rlp-brand,
.rlp-link-pill{
  text-decoration:none;
  color:#e4defd !important;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(163,125,255,.14);
}
.seo-nav a:hover,
.site-info-links a:hover,
.footer-links a:hover,
.rlp-nav a:hover,
.rlp-link-pill:hover{
  border-color:rgba(199,162,255,.26);
  color:#fff !important;
}
.ad-slot{padding:18px 20px !important}
.ad-note{color:var(--rlx-dim-2) !important}

/* Game stage */
#screen-game > header,
#screen-results > header{
  background:linear-gradient(180deg, rgba(13,17,37,.90), rgba(10,13,30,.92)) !important;
  border:1px solid rgba(163,125,255,.18) !important;
  border-radius:24px !important;
  padding:28px 26px !important;
  box-shadow:var(--rlx-card-shadow);
}
.game-shell,
.stage{
  overflow:hidden;
}
.stage{
  min-height:460px !important;
}
.stage-title{color:#fff !important}
.stage-sub{color:var(--rlx-dim) !important}
.progress,
.progressWrap,
.progress-wrap{background:rgba(255,255,255,.06) !important;border-radius:999px !important}
.progress-fill{background:linear-gradient(90deg,var(--rlx-purple-2), var(--rlx-pink)) !important}
.navback,
.btn,
.rlp-btn,
button.target-style-btn,
button.target-count-btn,
button.reaction-color-btn,
#backToModes,
#backToMenu,
.actions button,
.actions a,
.actions .btn,
button,
.choice-key{
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn,
.rlp-btn,
button.target-style-btn,
button.target-count-btn,
button.reaction-color-btn,
#backToModes,
#backToMenu,
.actions button,
.actions a,
.actions .btn{
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  border:1px solid rgba(163,125,255,.18) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.btn-primary,
.rlp-btn.primary,
button.target-style-btn.active,
button.target-count-btn.active,
button.reaction-color-btn.active,
.choice-key.active,
.choice-key:focus-visible,
.actions .btn-primary{
  background:linear-gradient(90deg, var(--rlx-purple-2), var(--rlx-pink)) !important;
  border-color:transparent !important;
  box-shadow:0 14px 32px rgba(138,92,246,.28) !important;
}
.choice-grid{gap:16px !important}
.choice-key{min-height:96px !important;color:#fff !important}
.summary-grid,.stats,.history{gap:16px !important}
.stat,
.summary-card,
.history-list,
.summary-mini,
.history{padding:20px !important}
.toast{background:rgba(10,14,28,.92) !important;border:1px solid rgba(163,125,255,.22) !important;border-radius:14px !important;color:#fff !important}

/* Utility pages */
.rlp-page-shell{
  background:none !important;
  color:var(--rlx-text) !important;
}
.rlp-hero,
.rl-guide .hero{
  background:
    radial-gradient(480px 220px at 88% 0%, rgba(255,92,201,.08), transparent 72%),
    linear-gradient(180deg, rgba(13,17,37,.90), rgba(9,12,28,.92));
  border:1px solid rgba(163,125,255,.18);
  border-radius:28px;
  padding:34px 32px !important;
  box-shadow:var(--rlx-shadow);
  margin-bottom:24px !important;
}
.rlp-brand,
.brand{color:#fff !important; text-decoration:none}
.rlp-card h2,
.rlp-hero h1{margin-top:0}
.rlp-grid,
.rlp-stat-grid,
.rlp-ach-grid,
.rlp-two-col{
  display:grid;
}
.rlp-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.rlp-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.rlp-card textarea,
.rlp-card input,
.rlp-card select,
textarea,
input,
select{
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  border:1px solid rgba(163,125,255,.18) !important;
  border-radius:14px !important;
}
.rlp-stat,
.rlp-ach{padding:22px !important}
.rlp-ach.unlocked{border-color:rgba(255,214,109,.30) !important; box-shadow:0 14px 40px rgba(255,214,109,.10) !important}

/* Guide content */
.rl-guide .wrap > .hero{margin-top:6px !important}
.rl-guide .crumbs{display:none}
.rl-guide .toc ol{columns:1 !important}
.callout{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(163,125,255,.16) !important;
  border-left:3px solid var(--rlx-pink) !important;
  border-radius:18px !important;
  color:var(--rlx-dim) !important;
}
.cta{
  text-decoration:none !important;
  padding:24px !important;
}
.related a{border-radius:16px !important; padding:16px !important; background:rgba(255,255,255,.03) !important}
.footer,
footer{
  margin-top:28px !important;
  padding:22px 0 10px !important;
  border-top:1px solid rgba(163,125,255,.16) !important;
  color:var(--rlx-dim) !important;
}

/* Small helpers */
.hidden-by-redesign{display:none !important}

@media (max-width: 1180px){
  .mode-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .mode-card.featured{grid-column:span 3;}
  .rlp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width: 900px){
  body{padding-top:88px !important}
  .rl-nav-toggle{display:grid; place-items:center}
  .rl-global-nav-inner{min-height:68px}
  .rl-nav-links{
    position:absolute; left:14px; right:14px; top:74px;
    background:rgba(7,10,22,.96); border:1px solid rgba(163,125,255,.22);
    border-radius:18px; padding:12px; display:none; flex-direction:column; align-items:stretch;
    box-shadow:var(--rlx-shadow);
  }
  .rl-nav-links.open{display:flex}
  .rl-nav-links a{width:100%}
  .top-controls{left:14px !important; top:82px !important; transform:scale(.95); transform-origin:left top}
  .hero-strip,
  .rlp-grid,
  .rlp-stat-grid,
  .hub-grid,
  .related-grid,
  .grid2,
  .seo-grid,
  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .mode-card.featured{grid-column:span 2}
  .rl-arena #screen-home > header,
  .rl-guide .hero,
  .rl-tools .rlp-hero,
  #screen-game > header,
  #screen-results > header{padding:28px 22px !important}
}
@media (max-width: 640px){
  .hero-strip,
  .rlp-grid,
  .rlp-stat-grid,
  .hub-grid,
  .related-grid,
  .grid2,
  .seo-grid,
  .mode-grid{grid-template-columns:1fr !important}
  .mode-card.featured{grid-column:span 1}
  .hero-stat-value,
  .summary-score,
  .rlp-stat strong{font-size:2.4rem !important}
  .rl-arena h1,.rl-guide h1,.rl-tools .rlp-hero h1,.rlp-hero h1{font-size:clamp(3rem, 14vw, 4.2rem) !important}
  .top-controls{position:static !important; margin:0 14px 16px !important; width:max-content}
  body{padding-top:84px !important}
}


/* Neon refresh for interactive test pages */
:root{
  --timer-accent:var(--rlx-blue);
  --timer-accent-dark:#0b8fa0;
  --timer-shadow:rgba(41,240,255,.34);
}
body{
  background:
    radial-gradient(980px 660px at 10% -8%, rgba(155,92,255,.23), transparent 60%),
    radial-gradient(820px 520px at 76% 12%, rgba(41,240,255,.12), transparent 58%),
    radial-gradient(900px 680px at 86% 84%, rgba(255,79,216,.10), transparent 55%),
    linear-gradient(180deg, #070916 0%, #080b18 44%, #0b0e1d 100%) !important;
}
.theme-dot[data-theme-choice="dark"]{background:linear-gradient(135deg,#070916,#8b5cf6 55%,#29f0ff)}
.theme-dot[data-theme-choice="light"]{background:linear-gradient(135deg,#110b24,#29f0ff 48%,#ff4fd8)}
.theme-dot[data-theme-choice="pink"]{background:linear-gradient(135deg,#22102f,#ff4fd8 52%,#9b5cff)}
.btn-primary{background:linear-gradient(135deg,#29f0ff,#8b5cf6 58%,#ff4fd8)!important;color:#090b18!important;box-shadow:0 10px 26px rgba(88,98,255,.26)}
.btn-ghost:hover,.mode-card:hover,.target-style-btn.active,.target-count-btn.active,.reaction-color-btn.active{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 20px rgba(139,92,246,.18)}
.mode-card:hover,.rl-feature-card:hover,.rl-guide-tile:hover{border-color:rgba(41,240,255,.52)!important}
.eyebrow,.seo-kicker,.hero-tag,.badge{color:var(--rlx-blue)!important}
.badge{background:rgba(41,240,255,.1)!important}
.badge.warn{background:rgba(198,255,58,.12)!important;color:var(--rlx-green)!important}
.badge.hard{background:rgba(255,79,216,.12)!important;color:var(--rlx-pink)!important}
.ad-slot{border-color:rgba(113,122,255,.26)!important;background:rgba(18,24,52,.58)!important}
.reaction-color-btn{background:rgba(14,20,40,.8)!important;border-color:rgba(113,122,255,.26)!important}
.reaction-color-btn:hover{border-color:var(--rlx-blue)!important}
.reaction-color-btn[data-reaction-color="aqua"] .reaction-color-swatch{background:#29f0ff; box-shadow:0 0 12px rgba(41,240,255,.48)}
.reaction-color-btn[data-reaction-color="pink"] .reaction-color-swatch{background:#ff4fd8; box-shadow:0 0 12px rgba(255,79,216,.42)}
.reaction-color-btn[data-reaction-color="lime"] .reaction-color-swatch{background:#c6ff3a; box-shadow:0 0 12px rgba(198,255,58,.42)}
.reaction-color-btn[data-reaction-color="violet"] .reaction-color-swatch{background:#9b5cff; box-shadow:0 0 12px rgba(155,92,255,.48)}
.stage{box-shadow:0 18px 46px rgba(4,8,24,.28), inset 0 1px 0 rgba(255,255,255,.03)}
.stage.state-wait{background:linear-gradient(135deg,#ff4fd8,#7c1fff)!important}
.stage.state-fake{background:linear-gradient(135deg,var(--reaction-fake),var(--reaction-fake-dark))!important}
.stage.state-go{background:linear-gradient(135deg,var(--reaction-go),var(--reaction-go-dark))!important;box-shadow:0 0 36px var(--timer-shadow), 0 18px 46px rgba(4,8,24,.32)}
.stage.state-result{background:linear-gradient(180deg, rgba(12,18,38,.98), rgba(17,24,52,.95))!important}
.stage.state-result .stage-title{color:var(--timer-accent)!important;text-shadow:0 0 18px var(--timer-shadow),0 0 36px rgba(255,255,255,.06)}
.stage.state-result .stage-sub{color:#d6daf4!important}
#statLast,#statAvg,#statBest{color:var(--timer-accent)!important;text-shadow:0 0 14px var(--timer-shadow)}
#historyList .chip.best{color:var(--timer-accent)!important;border-color:var(--timer-accent)!important;box-shadow:0 0 12px var(--timer-shadow)}
.choice-key.active{background:linear-gradient(135deg,var(--reaction-go),var(--reaction-go-dark))!important;color:#0b1022!important;box-shadow:0 0 18px var(--timer-shadow)}
.progress-fill{background:linear-gradient(90deg,#29f0ff,#8b5cf6 58%,#ff4fd8)!important}


/* =========================================================
   Reaction Lab homepage — premium test-card redesign
   ========================================================= */
.rl-arena #screen-home .mode-grid{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch;
}

.rl-arena #screen-home .mode-card{
  grid-column:span 2;
  min-height:225px !important;
  padding:22px !important;
  border-radius:20px !important;
  border:1px solid rgba(132,149,201,.22) !important;
  background:
    radial-gradient(140px 120px at 100% 0%, rgba(155,92,255,.09), transparent 74%),
    linear-gradient(180deg, rgba(12,17,37,.98), rgba(8,12,28,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 36px rgba(0,0,0,.22) !important;
  text-align:left !important;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transform:none;
}

.rl-arena #screen-home .mode-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.025), transparent 34%),
    radial-gradient(260px 160px at -12% 112%, rgba(41,240,255,.035), transparent 72%);
  pointer-events:none;
  z-index:-1;
}

.rl-arena #screen-home .mode-card::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:66px;
  height:1px;
  background:linear-gradient(90deg, rgba(140,155,210,.16), rgba(140,155,210,.04));
  pointer-events:none;
}

.rl-arena #screen-home .mode-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(155,92,255,.55) !important;
  background:
    radial-gradient(180px 140px at 100% 0%, rgba(155,92,255,.15), transparent 75%),
    linear-gradient(180deg, rgba(15,20,45,.99), rgba(9,13,31,.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 22px 54px rgba(0,0,0,.34),
    0 0 28px rgba(139,92,246,.10) !important;
}

.rl-arena #screen-home .mode-card.featured{
  grid-column:span 4;
  min-height:225px !important;
  padding:28px 30px !important;
  border-color:rgba(255,79,216,.46) !important;
  background:
    radial-gradient(330px 230px at 92% 18%, rgba(41,240,255,.13), transparent 70%),
    radial-gradient(340px 240px at 0% 100%, rgba(255,79,216,.15), transparent 72%),
    linear-gradient(135deg, rgba(17,19,48,.99), rgba(9,13,31,.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 46px rgba(0,0,0,.27),
    0 0 30px rgba(155,92,255,.08) !important;
}

.rl-arena #screen-home .mode-card.featured::before{
  background:
    radial-gradient(circle at 85% 50%, transparent 0 27%, rgba(155,92,255,.08) 27.5% 28%, transparent 28.5% 40%, rgba(41,240,255,.05) 40.5% 41%, transparent 41.5%),
    linear-gradient(120deg, rgba(255,255,255,.035), transparent 34%);
}

.rl-arena #screen-home .mode-card[href="moving-aim.html"],
.rl-arena #screen-home .mode-card[href="race.html"]{
  grid-column:span 3;
}

.rl-arena #screen-home .mode-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-bottom:20px !important;
}

.rl-arena #screen-home .mode-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:14px;
  font-size:24px !important;
  line-height:1;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(143,157,208,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.rl-arena #screen-home .featured .mode-icon{
  width:54px;
  height:54px;
  flex-basis:54px;
  font-size:28px !important;
  border-color:rgba(255,79,216,.26);
  background:linear-gradient(135deg,rgba(255,79,216,.12),rgba(41,240,255,.08));
}

.rl-arena #screen-home .mode-tag{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 9px;
  border-radius:999px;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:9px !important;
  line-height:1;
  letter-spacing:.14em;
  font-weight:700;
  text-transform:uppercase;
  color:#bbc4ee !important;
  background:rgba(120,132,180,.075);
  border:1px solid rgba(143,157,208,.15);
}

.rl-arena #screen-home .featured .mode-tag{
  color:#fff !important;
  border-color:rgba(255,79,216,.24);
  background:linear-gradient(90deg,rgba(155,92,255,.16),rgba(255,79,216,.12));
}

.rl-arena #screen-home .mode-title{
  margin:0 !important;
  color:#fff !important;
  font-family:'Bebas Neue',sans-serif !important;
  font-size:clamp(1.8rem,2.15vw,2.3rem) !important;
  line-height:.98 !important;
  letter-spacing:.025em !important;
}

.rl-arena #screen-home .featured .mode-title{
  max-width:70%;
  font-size:clamp(2.5rem,4vw,4rem) !important;
}

.rl-arena #screen-home .mode-desc{
  margin-top:10px !important;
  max-width:36rem;
  color:#aeb7da !important;
  font-size:13px !important;
  line-height:1.62 !important;
  flex:1;
}

.rl-arena #screen-home .featured .mode-desc{
  max-width:58%;
  font-size:14px !important;
  line-height:1.7 !important;
}

.rl-arena #screen-home .mode-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:22px !important;
  padding-top:16px !important;
  font-size:11px !important;
  color:#858fb9 !important;
}

.rl-arena #screen-home .mode-footer > span:first-child{
  min-width:0;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:9px !important;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#818bad !important;
}

.rl-arena #screen-home .mode-footer > span:last-child{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:11px;
  border:1px solid rgba(155,92,255,.38);
  background:rgba(139,92,246,.08);
  color:#fff !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:10px !important;
  font-weight:700;
  letter-spacing:.06em;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

.rl-arena #screen-home .mode-card:hover .mode-footer > span:last-child{
  border-color:rgba(41,240,255,.46);
  background:linear-gradient(90deg,rgba(155,92,255,.18),rgba(41,240,255,.10));
  transform:translateX(2px);
}

.rl-arena #screen-home .featured .mode-footer > span:last-child{
  border-color:transparent;
  padding:0 18px;
  background:linear-gradient(90deg,#8b5cf6,#ff4fd8);
  box-shadow:0 9px 24px rgba(139,92,246,.20);
}

@media (max-width:1100px){
  .rl-arena #screen-home .mode-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
  .rl-arena #screen-home .mode-card,
  .rl-arena #screen-home .mode-card[href="moving-aim.html"],
  .rl-arena #screen-home .mode-card[href="race.html"]{
    grid-column:span 3;
  }
  .rl-arena #screen-home .mode-card.featured{
    grid-column:span 6;
  }
  .rl-arena #screen-home .featured .mode-title,
  .rl-arena #screen-home .featured .mode-desc{
    max-width:78%;
  }
}

@media (max-width:650px){
  .rl-arena #screen-home .mode-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .rl-arena #screen-home .mode-card,
  .rl-arena #screen-home .mode-card.featured,
  .rl-arena #screen-home .mode-card[href="moving-aim.html"],
  .rl-arena #screen-home .mode-card[href="race.html"]{
    grid-column:auto !important;
    min-height:210px !important;
    padding:20px !important;
  }
  .rl-arena #screen-home .featured .mode-title,
  .rl-arena #screen-home .featured .mode-desc{
    max-width:100%;
  }
  .rl-arena #screen-home .mode-footer{
    align-items:flex-end !important;
  }
}


/* Dropdown/readability fix */
select,
.rlp-select,
select.rlp-input {
  color: #f8f9ff !important;
  background-color: #0b1022 !important;
  border-color: rgba(145,158,208,.28) !important;
  color-scheme: dark;
}

select option,
select optgroup,
.rlp-select option,
.rlp-select optgroup,
select.rlp-input option,
select.rlp-input optgroup {
  color: #f8f9ff !important;
  background: #0b1022 !important;
}

select:focus,
.rlp-select:focus,
select.rlp-input:focus {
  outline: 2px solid rgba(155,92,255,.45);
  outline-offset: 1px;
  border-color: rgba(155,92,255,.65) !important;
}

@media (forced-colors: active) {
  select,
  select option {
    forced-color-adjust: auto;
  }
}