/* Corblix Games — main stylesheet (extracted 1:1 from the original design) */
  :root {
    --ink: #050605; /* Deep cinematic premium space black */
    --muted: #A0A496; /* Cool slate gray */
    --line: #22261C; /* Deep tech borders */
    --bg: #080907; /* Dark void background */
    --bg-soft: #0F110D; /* Slate surface container */
    --bg-card: #15180F; /* Lighter surface for interactive cards */
    --navy: #0C0E0A; 
    --accent: #D4F23C; /* Vibrant Web-Matched Gaming Orange */
    --accent-green: #1FDB82; /* Brand secondary color, sampled directly from the CB logo mark */
    --accent-orange: #FF7A1A; /* Vibrant Web-Matched Gaming Orange */
    --accent-dark: #B4D21E; /* Deep rich orange for hover interactions */
    --accent-glow: rgba(212,242,60, 0.35);
    --orange-glow: rgba(255,122,26, 0.35);
    --success: #1FDB82; /* Unified with the CB logo's brand green */
  }
  
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:'Outfit',sans-serif; color:#F3F4F6; background:var(--bg); line-height:1.5; }
  body.modal-open { overflow: hidden; } /* Lock background scroll when modal is open */
  .mono { font-family:'JetBrains Mono',monospace; }
  a { text-decoration:none; color:inherit; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }

  /* CUSTOM SCROLLBAR */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--ink);
  }
  ::-webkit-scrollbar-thumb {
    background: #22261C;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }

  /* ACCESSIBILITY SKIP LINK */
  /* TITLE SCREEN / SPLASH */
  #splashScreen{
    position:fixed; inset:0; z-index:99999;
    display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
    transition:opacity 0.28s ease, visibility 0.28s ease;
  }
  #splashScreen.splash-hide{ opacity:0; visibility:hidden; pointer-events:none; }

  #doorLeft, #doorRight{
    position:fixed; top:0; bottom:0; z-index:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(212,242,60,0.035) 0, rgba(212,242,60,0.035) 1px, transparent 1px, transparent 42px),
      repeating-linear-gradient(90deg, rgba(212,242,60,0.035) 0, rgba(212,242,60,0.035) 1px, transparent 1px, transparent 42px),
      radial-gradient(circle at 50% 40%, #0E100C 0%, #050605 75%);
    background-attachment: fixed, fixed, fixed;
    transition: transform 0.7s cubic-bezier(0.76,0,0.24,1);
  }
  #doorLeft{ left:0; width:50%; box-shadow: 2px 0 26px rgba(212,242,60,0.16); }
  #doorRight{ right:0; width:50%; box-shadow: -2px 0 26px rgba(31,219,130,0.14); }
  #doorLeft::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:1.5px;
    background:linear-gradient(180deg, transparent, rgba(212,242,60,0.55) 40%, rgba(31,219,130,0.5) 60%, transparent);
  }
  #splashScreen.splash-exit #doorLeft{ transform:translateX(-100%); }
  #splashScreen.splash-exit #doorRight{ transform:translateX(100%); }

  #splashScreen.splash-exit .splash-logo-wrap{ animation: bcExitBurst 0.5s cubic-bezier(0.4,0,1,1) forwards; }
  @keyframes bcExitBurst{
    0%{ transform:scale(1); opacity:1; }
    35%{ transform:scale(1.16); opacity:1; }
    100%{ transform:scale(1.55); opacity:0; }
  }
  #splashFlash{
    position:fixed; inset:0; background:radial-gradient(circle at 50% 44%, #FFFFFF 0%, #E6F99A 22%, #D4F23C 42%, transparent 72%);
    opacity:0; pointer-events:none; z-index:5;
  }
  #splashScreen.splash-exit #splashFlash{ animation: bcExitFlash 0.45s ease-out forwards; }
  @keyframes bcExitFlash{
    0%{ opacity:0; }
    30%{ opacity:0.95; }
    100%{ opacity:0; }
  }
  .splash-logo-wrap{ position:relative; z-index:1; text-align:center; animation: splashRise 0.9s cubic-bezier(0.16,1,0.3,1) both; }
  .beam-clash-wrap{
    position:absolute; top:50%; left:50%; width:min(94vw, 1000px); height:min(70vw, 640px);
    margin-left:calc(min(94vw, 1000px) / -2); margin-top:calc(min(70vw, 640px) / -2);
    transform:translateY(-78px);
    z-index:-1; pointer-events:none;
  }
  .beam-clash-wrap svg{ width:100%; height:100%; overflow:visible; }
  .bc-beam{ animation: bcFlicker 2.4s ease-in-out infinite; }
  .bc-beam-b{ animation-delay:0.15s; }
  @keyframes bcFlicker{ 0%,100%{ opacity:1; } 47%{ opacity:0.82; } 50%{ opacity:1; } 74%{ opacity:0.9; } }
  .bc-burst-core{ animation: bcCorePulse 1.8s ease-in-out infinite; transform-origin:center; }
  @keyframes bcCorePulse{ 0%,100%{ opacity:0.9; transform:scale(1); } 50%{ opacity:1; transform:scale(1.12); } }
  .bc-ring{
    stroke-dasharray: 160 405; animation: bcOrbitRev 7s linear infinite;
  }
  .bc-ring-outer{
    stroke-dasharray: 170 452; animation: bcOrbitFwd 9s linear infinite;
  }
  @keyframes bcOrbitFwd{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -622; } }
  @keyframes bcOrbitRev{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: 565; } }
  .bc-spark{ animation: bcTwinkle 1.6s ease-in-out infinite; }
  @keyframes bcTwinkle{ 0%,100%{ opacity:0.2; } 50%{ opacity:1; } }
  @keyframes bcDrift{ from{ transform:translate(0,0); } to{ transform:translate(var(--dx), var(--dy)); } }
  .bc-flame1{ animation: bcFlamePulse1 3.2s ease-in-out infinite; transform-origin:500px 320px; }
  .bc-flame2{ animation: bcFlamePulse2 2.4s ease-in-out infinite; transform-origin:500px 320px; }
  @keyframes bcFlamePulse1{ 0%,100%{ opacity:0.55; transform:scale(1) rotate(0deg); } 50%{ opacity:0.8; transform:scale(1.06) rotate(3deg); } }
  @keyframes bcFlamePulse2{ 0%,100%{ opacity:0.7; transform:scale(1.03) rotate(0deg); } 50%{ opacity:0.95; transform:scale(0.96) rotate(-4deg); } }
  .splash-logo-glow{
    position:absolute; top:50%; left:50%; width:340px; height:340px; margin:-170px 0 0 -170px;
    background:radial-gradient(circle, rgba(212,242,60,0.22) 0%, rgba(31,219,130,0.10) 45%, transparent 72%);
    filter:blur(6px); animation: splashGlowPulse 2.6s ease-in-out infinite; z-index:-1;
  }
  @keyframes splashGlowPulse{ 0%,100%{ opacity:0.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
  @keyframes splashRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
  .splash-logo-wrap img{ width:150px; height:auto; display:block; margin:0 auto 18px; filter:drop-shadow(0 0 26px rgba(212,242,60,0.35)); }
  .splash-wordmark{ font-family:'Outfit',sans-serif; font-weight:800; font-size:30px; letter-spacing:1.5px; color:#fff; }
  .splash-wordmark span{ color:var(--accent); }
  .splash-sub{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--muted);
    text-transform:uppercase; margin-top:10px;
  }
  .splash-cta{
    margin-top:38px; font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; letter-spacing:2px;
    color:var(--accent); text-transform:uppercase; animation: splashBlink 1.5s ease-in-out infinite;
    border:1.5px solid rgba(212,242,60,0.4); border-radius:30px; padding:12px 30px; display:inline-block;
  }
  @keyframes splashBlink{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(212,242,60,0.25); } 50%{ opacity:0.55; box-shadow:0 0 0 8px rgba(212,242,60,0); } }
  .splash-hint{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#565D6B; letter-spacing:0.5px; }
  @media(max-width:600px){
    .splash-logo-wrap img{ width:110px; }
    .splash-wordmark{ font-size:22px; }
    .splash-cta{ font-size:13px; padding:10px 22px; }
  }

  .skip-link {
    position: absolute;
    top: -50px;
    left: 20px;
    background: var(--accent);
    color: #fff;
    padding: 10px 20px;
    z-index: 100;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    transition: top 0.2s ease;
  }
  .skip-link:focus {
    top: 0;
    outline: none;
  }

  /* NAV */
  nav {
    position:sticky; top:0; z-index:50; background:rgba(5,6,5, 0.95); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner { max-width:1180px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
  .logo { font-weight:800; font-size:22px; letter-spacing:1.5px; display: flex; align-items: center; gap: 6px; text-shadow: 0 0 12px var(--orange-glow); }
  .nav-links { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; color:var(--muted); }
  .nav-links a { transition: color 0.2s; cursor: pointer; }
  .nav-links a:hover, .nav-links a.active { color:#fff; }

  /* GAME MENU NAV PILLS — scoped strictly to the top nav bar, not footer links reusing these classes */
  .nav-links > a{
    display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-weight:700;
    font-size:12px; letter-spacing:0.5px; text-transform:uppercase; color:var(--muted) !important;
    background:rgba(255,255,255,0.02); border:1.5px solid var(--line); border-radius:20px; padding:7px 15px 7px 12px;
    transition: all 0.2s ease; position:relative;
  }
  .nav-links > a svg{ width:14px; height:14px; flex-shrink:0; opacity:0.85; }
  .nav-links > a:hover{ color:#fff !important; transform:translateY(-1px); }
  .nav-links > a.active{ color:#fff !important; }

  .nav-links > a[data-hue="orange"]:hover, .nav-links > a[data-hue="orange"].active{
    border-color:var(--accent); background:linear-gradient(135deg, rgba(212,242,60,0.20), rgba(212,242,60,0.06));
    box-shadow:0 0 0 4px rgba(212,242,60,0.10);
  }
  .nav-links > a[data-hue="green"]:hover, .nav-links > a[data-hue="green"].active{
    border-color:var(--accent-green); background:linear-gradient(135deg, rgba(31,219,130,0.20), rgba(31,219,130,0.06));
    box-shadow:0 0 0 4px rgba(31,219,130,0.10);
  }

  .nav-link-team{ border-color:var(--accent) !important; background:linear-gradient(135deg, rgba(212,242,60,0.14), rgba(31,219,130,0.10)) !important; color:#fff !important; }
  .nav-link-team:hover{ background:linear-gradient(135deg, rgba(212,242,60,0.28), rgba(31,219,130,0.18)) !important; box-shadow:0 0 0 4px rgba(212,242,60,0.12); }
  .nav-link-team .nav-team-dot{
    width:6px; height:6px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 6px var(--accent-green);
    animation: navTeamPulse 1.6s ease-in-out infinite;
  }
  @keyframes navTeamPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
  .btn {
    background:var(--accent); color:#fff; padding:11px 22px; border-radius:8px; font-weight:600; font-size:14px;
    display:inline-block; transition:all 0.2s ease; box-shadow: 0 4px 15px var(--accent-glow);
    cursor: pointer; border: none;
  }
  .btn:hover { background:var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,242,60, 0.5); }
  .btn-outline { border:1.5px solid var(--line); color:#fff; background:transparent; box-shadow: none; }
  .btn-outline:hover { background:#fff; color:var(--ink); border-color:#fff; }

  /* HERO */
  .hero {
    padding: 100px 0 80px 0;
    position: relative;
    background: radial-gradient(circle at 80% 20%, rgba(212,242,60, 0.12) 0%, transparent 55%), var(--bg);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .hero-tag {
    display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:1.2px;
    text-transform:uppercase; color:#F1FAD2; border:1px solid rgba(212,242,60,0.4); background:rgba(212,242,60,0.08);
    padding:7px 14px; border-radius:30px; margin-bottom:26px; font-weight: 600;
  }
  .hero h1 { font-size:52px; font-weight:800; line-height:1.15; letter-spacing:-0.8px; color: #fff; }
  .hero h1 em { font-style:normal; color:var(--accent); text-shadow: 0 0 15px var(--accent-glow); }
  .hero p { font-size:18px; color:var(--muted); margin-top:22px; line-height:1.65; }
  .hero-ctas { display:flex; gap:14px; margin-top:36px; align-items: center; flex-wrap: wrap; }
  
  /* BANNER FRAME */
  .hero-banner-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
  }
  .hero-banner-container:hover {
    transform: scale(1.02);
    border-color: var(--accent);
  }
  .hero-banner-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  .banner-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(5,6,5,0.5) 0%, transparent 60%);
    pointer-events: none;
  }

  /* SLIDE TO LAUNCH WIDGET */
  .slide-launch { margin-top:36px; max-width:420px; width: 100%; }
  .slide-launch-label { font-family:'JetBrains Mono',monospace; font-size:11px; color:#FFF; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; display: flex; align-items: center; gap: 8px; }
  .slide-launch-label span { color: var(--accent); animation: pulse 1.5s infinite; }
  @keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

  /* SCROLL-REVEAL ANIMATION SYSTEM */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.revealed { opacity: 1; transform: translateY(0); }
  .reveal-zoom { opacity: 0; transform: scale(0.94); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-zoom.revealed { opacity: 1; transform: scale(1); }
  .game-grid .gcard.reveal:nth-child(1),
  .cap-grid .cap-card.reveal:nth-child(1),
  .eng-grid .eng-card.reveal:nth-child(1) { transition-delay: 0.02s; }
  .game-grid .gcard.reveal:nth-child(2),
  .cap-grid .cap-card.reveal:nth-child(2),
  .eng-grid .eng-card.reveal:nth-child(2) { transition-delay: 0.10s; }
  .game-grid .gcard.reveal:nth-child(3),
  .cap-grid .cap-card.reveal:nth-child(3),
  .eng-grid .eng-card.reveal:nth-child(3) { transition-delay: 0.18s; }
  .game-grid .gcard.reveal:nth-child(4),
  .cap-grid .cap-card.reveal:nth-child(4) { transition-delay: 0.26s; }
  .game-grid .gcard.reveal:nth-child(5),
  .cap-grid .cap-card.reveal:nth-child(5) { transition-delay: 0.34s; }
  .game-grid .gcard.reveal:nth-child(6),
  .cap-grid .cap-card.reveal:nth-child(6) { transition-delay: 0.42s; }
  .game-grid .gcard.reveal:nth-child(7),
  .cap-grid .cap-card.reveal:nth-child(7) { transition-delay: 0.50s; }
  .stats-grid .stat.reveal:nth-child(1) { transition-delay: 0.02s; }
  .stats-grid .stat.reveal:nth-child(2) { transition-delay: 0.12s; }
  .stats-grid .stat.reveal:nth-child(3) { transition-delay: 0.22s; }
  .stats-grid .stat.reveal:nth-child(4) { transition-delay: 0.32s; }

  /* HERO ENTRANCE ON LOAD (no scroll trigger needed, plays immediately) */
  @keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
  .hero-tag { animation: heroFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
  .hero h1 { animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
  .hero p { animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.20s both; }
  .hero-ctas { animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
  .slide-launch { animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.38s both; }
  .hero-banner-container { animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.22s both; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-zoom, .hero-tag, .hero h1, .hero p, .hero-ctas, .slide-launch, .hero-banner-container {
      animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
    }
  }
  .slide-track { position:relative; height:60px; background:var(--ink); border:1.5px solid var(--line); border-radius:30px; overflow:hidden; user-select:none; box-shadow: inset 0 2px 8px rgba(0,0,0,0.8); }
  .slide-track-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight: 700; color:var(--muted); letter-spacing:1px; pointer-events:none; transition: opacity 0.2s ease; }
  .slide-track-fill { position:absolute; top:0; left:0; height:100%; width:60px; background:linear-gradient(90deg, rgba(212,242,60,0.25), rgba(212,242,60,0.05)); border-radius:30px 0 0 30px; }
  .slide-thumb {
    position:absolute; top:4px; left:4px; width:50px; height:50px; border-radius:50%; background:var(--accent);
    box-shadow:0 4px 15px var(--accent-glow); display:flex; align-items:center; justify-content:center;
    cursor:grab; touch-action:none; z-index:2; transition: background-color 0.2s;
  }
  .slide-thumb:active { cursor:grabbing; background: var(--accent-dark); }
  .slide-thumb svg { width:20px; height:20px; fill:#fff; transition: transform 0.2s; }
  .slide-thumb:hover svg { transform: translateX(2px); }
  .slide-track.completed { border-color:var(--success); background: rgba(16, 185, 129, 0.05); }
  .slide-track.completed .slide-thumb { background: var(--success); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
  .slide-hint { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:10px; opacity:0.75; display: flex; align-items: center; gap: 4px; }

  /* STAT BAR */
  .stats { background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); padding:30px 0; }
  .stat { text-align:center; color:#fff; border-left:1px solid var(--line); padding:0 10px; }
  .stat:first-child { border-left:none; }
  .stat b { font-size:32px; font-weight:800; display:block; color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
  .stat span { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; font-family:'JetBrains Mono',monospace; }

  /* SECTION HEADERS */
  .section { padding:100px 0; border-bottom: 1px solid var(--line); }
  .section.soft { background:var(--bg-soft); }
  .eyebrow { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; }
  .section h2 { font-size:38px; font-weight:800; letter-spacing:-0.5px; color:#fff; }
  .section .lead { color:var(--muted); font-size:16.5px; max-width:640px; margin-top:14px; }

  /* FILTER TABS */
  .filters { display:flex; gap:10px; flex-wrap:wrap; margin:38px 0 40px; }
  .filter-btn {
    font-size:13px; font-weight:600; padding:9px 18px; border-radius:24px; border:1.5px solid var(--line);
    background:transparent; cursor:pointer; color:var(--muted); transition:all 0.25s ease;
  }
  .filter-btn.active, .filter-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow: 0 4px 12px var(--accent-glow); }

  /* GAME GRID */
  .game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .gcard {
    border-radius:16px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--line);
    box-shadow:0 4px 20px rgba(0,0,0,0.2); transition:all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer; position: relative;
  }
  .gcard:hover { transform:translateY(-8px); border-color: var(--accent); box-shadow:0 12px 30px rgba(212,242,60, 0.15); }
  .gcard .thumb { position:relative; aspect-ratio:1/1; overflow:hidden; background: #1C2018; }
  .gcard .thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.5s ease; }
  .gcard:hover .thumb img { transform: scale(1.08); }
  .gcard .num {
    position:absolute; top:12px; left:12px; background:rgba(5,6,5, 0.8); color:#fff; font-family:'JetBrains Mono',monospace;
    font-size:11px; padding:4px 9px; border-radius:20px; letter-spacing:0.5px; backdrop-filter:blur(4px); border: 1px solid var(--line); z-index:10;
  }
  .gcard .body { padding:20px; }
  .gcard h3 { font-size:18px; font-weight:800; letter-spacing:-0.2px; margin-bottom:8px; color: #fff; line-height: 1.2; }
  .gcard .tags { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); letter-spacing:0.3px; margin-bottom: 8px;}
  .gcard .tags b { color:#C8EF5A; font-weight:600; }
  .gcard .focus { font-size:14px; color:#B3BAC5; line-height:1.5; margin-bottom: 12px;}
  .gcard .view-case {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent);
    display: inline-flex; align-items: center; gap: 4px; font-weight: 700; opacity: 0.8; transition: opacity 0.2s;
  }
  .gcard:hover .view-case { opacity: 1; }
  .gcard .downloads-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--success);
    display: inline-flex; align-items: center; gap: 5px; font-weight: 700; margin-bottom: 10px;
  }
  .gcard .downloads-badge svg { width: 12px; height: 12px; }
  .gcard .play-link {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #fff; background: rgba(255,255,255,0.06);
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center;
    justify-content: center; gap: 7px; font-weight: 600; margin-top: 12px; transition: all 0.2s ease; text-decoration: none;
  }
  .gcard .play-link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .gcard .play-link svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* CASE STUDY MODAL ENGINE */
  .modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5,6,5, 0.85); backdrop-filter: blur(12px);
    z-index: 100; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    padding: 20px;
  }
  .modal-overlay.active { opacity: 1; pointer-events: all; }
  .modal-container {
    background: var(--bg-soft); border: 1px solid var(--line); width: 100%; max-width: 800px;
    border-radius: 20px; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.6);
    transform: translateY(30px); transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    max-height: 90vh; display: flex; flex-direction: column; position: relative;
  }
  .modal-overlay.active .modal-container { transform: translateY(0); }
  .modal-close-btn {
    position: absolute; top: 16px; right: 16px; background: rgba(5,6,5,0.7);
    border: 1px solid var(--line); color: #fff; font-size: 18px; width: 36px; height: 36px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.2s; z-index: 110;
  }
  .modal-close-btn:hover { background: var(--accent); border-color: var(--accent); }
  
  .modal-hero { position: relative; height: 260px; overflow: hidden; background: #1C2018; flex-shrink: 0; }
  .modal-hero img { width: 100%; height: 100%; object-fit: cover; }
  .modal-hero-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px;
    background: linear-gradient(0deg, var(--bg-soft) 10%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .modal-title { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 4px; }
  .modal-meta { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted); }
  .modal-meta b { color: var(--accent); }
  
  .modal-body { padding: 32px; overflow-y: auto; flex-grow: 1; }
  .modal-section { margin-bottom: 24px; }
  .modal-section:last-child { margin-bottom: 0; }
  .modal-sec-title {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }
  .modal-sec-title::after { content: ""; flex-grow: 1; height: 1px; background: var(--line); }
  .modal-text { font-size: 15.5px; color: #D1D5DB; line-height: 1.65; }

  /* OVERVIEW BOX HIGHLIGHT */
  .overview-box {
    background: rgba(212,242,60, 0.05);
    border-left: 3px solid var(--accent);
    padding: 20px;
    border-radius: 4px 12px 12px 4px;
    margin-bottom: 28px;
  }

  /* CIRCULAR ECOSYSTEM WHEEL ARCHITECTURE */
  .ecosystem-wheel-container {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 60px auto 20px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ecosystem-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(212,242,60, 0.25);
    box-shadow: 0 0 25px rgba(212,242,60, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ecosystem-center {
    position: absolute;
    width: 58%;
    height: 58%;
    background: var(--bg-card);
    border: 2px solid var(--line);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 34px 30px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  /* DESIGN DIVERSITY ON PHASE TRANSITIONS WITH WEB-MATCHED USER COLOR RE-GLOWS */
  .ecosystem-center.phase-active-1 { border-color: #10b981; box-shadow: 0 0 45px rgba(16, 185, 129, 0.55), inset 0 0 25px rgba(16, 185, 129, 0.2); }
  .ecosystem-center.phase-active-2 { border-color: #ec4899; box-shadow: 0 0 45px rgba(236, 72, 153, 0.55), inset 0 0 25px rgba(236, 72, 153, 0.2); }
  .ecosystem-center.phase-active-3 { border-color: #A0A496; box-shadow: 0 0 45px rgba(156, 163, 175, 0.55), inset 0 0 25px rgba(156, 163, 175, 0.2); }
  .ecosystem-center.phase-active-4 { border-color: #06b6d4; box-shadow: 0 0 45px rgba(6, 182, 212, 0.45), inset 0 0 25px rgba(6, 182, 212, 0.15); }
  .ecosystem-center.phase-active-5 { border-color: #ef4444; box-shadow: 0 0 45px rgba(239, 68, 68, 0.45), inset 0 0 25px rgba(239, 68, 68, 0.15); }
  .ecosystem-center.phase-active-6 { border-color: #eab308; box-shadow: 0 0 45px rgba(234, 179, 8, 0.55), inset 0 0 25px rgba(234, 179, 8, 0.2); }
  .ecosystem-center.phase-active-7 { border-color: #3b82f6; box-shadow: 0 0 45px rgba(59, 130, 246, 0.55), inset 0 0 25px rgba(59, 130, 246, 0.2); }

  @keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .eco-node {
    position: absolute;
    width: 84px;
    height: 84px;
    background: var(--bg-soft);
    border: 1.5px solid var(--line);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle)));
    z-index: 10;
  }
  .eco-node:hover {
    transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12);
  }
  
  /* MATCH NODE HIGHLIGHTS WITH RE-GLOW COLOR MATRIX SPECIFICATIONS */
  .eco-node[data-phase="1"].active { border-color: #10b981; background: var(--ink); box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }
  .eco-node[data-phase="2"].active { border-color: #ec4899; background: var(--ink); box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }
  .eco-node[data-phase="3"].active { border-color: #A0A496; background: var(--ink); box-shadow: 0 0 20px rgba(156, 163, 175, 0.5); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }
  .eco-node[data-phase="4"].active { border-color: #06b6d4; background: var(--ink); box-shadow: 0 0 20px rgba(6, 182, 212, 0.4); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }
  .eco-node[data-phase="5"].active { border-color: #ef4444; background: var(--ink); box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }
  .eco-node[data-phase="6"].active { border-color: #eab308; background: var(--ink); box-shadow: 0 0 20px rgba(234, 179, 8, 0.5); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }
  .eco-node[data-phase="7"].active { border-color: #3b82f6; background: var(--ink); box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); transform: rotate(var(--angle)) translate(265px) rotate(calc(-1 * var(--angle))) scale(1.12); }

  /* UPDATED ORBIT ICON: SIZE INCREASED BY 5% (24px * 1.05 = 25.2px) AND SHIFTED 10% UPWARD */
  .eco-node-icon { 
    font-size: 25.2px; 
    transition: transform 0.2s; 
    transform: translateY(-10%); 
  }
  .eco-node:hover .eco-node-icon { 
    transform: translateY(-10%) scale(1.1); 
  }
  
  .eco-node-label { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--muted); margin-top: 4px; font-weight: 500; }
  .eco-node.active .eco-node-label { color: #fff; font-weight: 700; }

  /* CAPABILITY STRIP */
  .cap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }

  /* TEAM PAGE — INTERACTIVE ORG CHART */
  .team-page-header{ text-align:center; max-width:640px; margin:0 auto 10px; }
  .poc-card{
    display:flex; align-items:center; gap:24px; background:var(--bg-soft); border:1.5px solid var(--accent);
    border-radius:16px; padding:26px 30px; margin:40px auto 10px; max-width:720px;
  }
  .poc-avatar{
    width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg, var(--accent), #A8E33C);
    display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:800;
    font-size:26px; color:#fff; flex-shrink:0; box-shadow:0 0 0 4px rgba(212,242,60,0.15);
  }
  .poc-tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--accent); font-weight:700; letter-spacing:0.8px; margin-bottom:6px; }
  .poc-card h3{ font-size:19px; font-weight:800; color:#fff; }
  .poc-card .poc-role{ font-size:13px; color:var(--muted); margin-top:2px; }
  .poc-card .poc-note{ font-size:12.5px; color:var(--muted); margin-top:8px; max-width:520px; line-height:1.5; }

  /* ============ CHARACTER SELECT SCREEN (TEAM PAGE) ============ */
  .roster-header{ text-align:center; margin-bottom:36px; }
  .roster-header h2{ font-size:36px; letter-spacing:0.5px; }
  .roster-header .lead{ margin:14px auto 0; }

  /* Captain spotlight card */
  .captain-card{
    position:relative; max-width:520px; margin:0 auto 44px; padding:28px 30px 24px;
    background:radial-gradient(circle at 30% 20%, #1B1F17, var(--ink) 70%);
    border:1.5px solid var(--accent); border-radius:4px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    display:flex; align-items:center; gap:22px;
    box-shadow:0 0 0 0 rgba(212,242,60,0.25); animation: captainPulse 2.8s ease-in-out infinite;
  }
  @keyframes captainPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(212,242,60,0.18); }
    50%{ box-shadow:0 0 0 10px rgba(212,242,60,0.06); }
  }
  .captain-ribbon{
    position:absolute; top:14px; right:-34px; background:var(--accent); color:#fff; font-family:'JetBrains Mono',monospace;
    font-size:9.5px; font-weight:700; letter-spacing:1px; padding:4px 40px; transform:rotate(45deg);
  }
  .captain-avatar{
    width:88px; height:88px; border-radius:50%; flex-shrink:0; position:relative;
    background:linear-gradient(135deg, var(--accent), #A8E33C); display:flex; align-items:center; justify-content:center;
    font-family:'Outfit',sans-serif; font-weight:800; font-size:30px; color:#fff;
    border:3px solid rgba(212,242,60,0.4);
  }
  .captain-info .captain-tag{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:1.5px; font-weight:700; }
  .captain-info h3{ font-size:22px; font-weight:800; color:#fff; margin-top:4px; }
  .captain-info .captain-role{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.5px; text-transform:uppercase; margin-top:3px; }

  /* Class filter tabs */
  .class-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:38px; }
  .class-tab{
    font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
    padding:10px 18px; border-radius:24px; border:1.5px solid var(--line); background:transparent; color:var(--muted);
    cursor:pointer; transition:all 0.2s ease;
  }
  .class-tab:hover{ border-color:var(--accent); color:#fff; }
  .class-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .class-tab.active[data-tabcolor="green"]{ background:var(--accent-green); border-color:var(--accent-green); }

  /* Roster grid */
  .roster-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
  .roster-card{
    position:relative; background:var(--bg-soft); border:1.5px solid var(--line); border-radius:2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    padding:22px 16px 18px; text-align:center; cursor:pointer; overflow:hidden;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .roster-card::before{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.08), transparent);
    transition:left 0.6s ease;
  }
  .roster-card:hover::before{ left:130%; }
  .roster-card::after{
    content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  }
  .roster-card[data-color="orange"]::after{ background:var(--accent); }
  .roster-card[data-color="green"]::after{ background:var(--accent-green); }
  .roster-card[data-color="orange"]:hover{ border-color:var(--accent); transform:translateY(-5px); box-shadow:0 12px 26px rgba(212,242,60,0.18); }
  .roster-card[data-color="green"]:hover{ border-color:var(--accent-green); transform:translateY(-5px); box-shadow:0 12px 26px rgba(31,219,130,0.18); }
  .roster-card .rc-corner{ position:absolute; top:8px; left:8px; width:10px; height:10px; border-top:1.5px solid; border-left:1.5px solid; opacity:0.6; }
  .roster-card[data-color="orange"] .rc-corner{ border-color:var(--accent); }
  .roster-card[data-color="green"] .rc-corner{ border-color:var(--accent-green); }
  .roster-avatar{
    width:54px; height:54px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
    font-family:'Outfit',sans-serif; font-weight:800; font-size:17px; color:#fff;
  }
  .roster-card[data-color="orange"] .roster-avatar{ background:linear-gradient(135deg, var(--accent), #A8E33C); }
  .roster-card[data-color="green"] .roster-avatar{ background:linear-gradient(135deg, var(--accent-green), #12A15C); }
  .roster-card h4{ font-size:13px; font-weight:700; color:#fff; line-height:1.3; }
  .roster-class{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.6px; text-transform:uppercase; margin-top:5px; }
  .roster-card[data-color="orange"] .roster-class{ color:var(--accent); }
  .roster-card[data-color="green"] .roster-class{ color:var(--accent-green); }
  .roster-poc-flag{
    position:absolute; top:8px; right:8px; background:#EAF98A; color:#3A2A00; font-size:7.5px; font-weight:800;
    padding:2px 6px; border-radius:8px; font-family:'JetBrains Mono',monospace; letter-spacing:0.3px;
  }

  .roster-caption{ text-align:center; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); margin-top:32px; }

  /* Character profile modal */
  .profile-avatar-lg{
    width:96px; height:96px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
    font-family:'Outfit',sans-serif; font-weight:800; font-size:34px; color:#fff; border:3px solid rgba(255,255,255,0.1);
  }
  .profile-badge{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:10px; }

  @media(max-width:900px){
    .roster-grid{ grid-template-columns:repeat(2,1fr); }
    .captain-card{ flex-direction:column; text-align:center; }
    .captain-ribbon{ display:none; }
  }
  @media(max-width:600px){
    .roster-grid{ grid-template-columns:1fr; }
  }

  /* Team roster modal grid (legacy, retained for compatibility) */
  .team-modal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
  .team-modal-card{ display:flex; align-items:center; gap:12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .team-modal-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; }
  .team-modal-card h4{ font-size:12.5px; font-weight:700; color:#fff; }
  .team-modal-card .tm-role{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--muted); margin-top:2px; }
  .cap-card { background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:30px 24px; transition: all 0.3s ease; }
  .cap-card:hover { transform: translateY(-5px); border-color: var(--accent); background: var(--bg-card); }
  .cap-card .icon { width:38px; height:38px; margin-bottom:16px; color: var(--accent); }
  .cap-card h4 { font-size:16.5px; font-weight:700; margin-bottom:8px; color:#fff; }
  .cap-card p { font-size:13.5px; color:var(--muted); line-height:1.55; }

  /* ENGAGEMENT */
  .eng-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .eng-card { border:1.5px solid var(--line); background: var(--bg-soft); border-radius:16px; padding:34px 28px; position:relative; transition: all 0.3s ease; cursor:pointer; }
  .eng-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 32px rgba(0,0,0,0.35); }
  .eng-card.reco { border-color:var(--accent); background: var(--ink); }
  .eng-card-hint {
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.5px; color: var(--accent);
    margin-top:16px; display:flex; align-items:center; gap:6px; opacity:0.85; transition: opacity 0.2s ease;
  }
  .eng-card:hover .eng-card-hint { opacity:1; }
  .eng-card-hint svg { width:13px; height:13px; transition: transform 0.2s ease; }
  .eng-card:hover .eng-card-hint svg { transform: translateX(3px); }
  .eng-badge {
    position:absolute; top:-12px; right:24px; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
    padding:5px 12px; border-radius:20px; letter-spacing:0.4px; font-family:'JetBrains Mono',monospace; box-shadow: 0 4px 10px var(--accent-glow);
  }
  .eng-num { font-family:'JetBrains Mono',monospace; color:var(--accent); font-weight:700; font-size:13px; }
  .eng-card h3 { font-size:20px; font-weight:800; margin:10px 0 12px; color: #fff;}
  .eng-card p { font-size:14px; color:var(--muted); line-height:1.6; }

  /* TIMEZONE & OVERLAP TIMELINE GRID */
  .tz-band { background:var(--ink); color:#fff; padding:60px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .tz-flex { display:flex; gap:60px; align-items:center; }
  .tz-left { flex:0 0 320px; }
  .tz-left h3 { font-size:26px; font-weight:800; line-height:1.2; }
  .tz-left p { color:#A3A79A; font-size:14.5px; margin-top:14px; line-height:1.6; }
  .tz-right { flex:1; }
  .tz-row { display:flex; align-items:center; gap:20px; margin-bottom:24px; width: 100%; }
  .tz-row:last-child { margin-bottom: 0; }
  
  .tz-city { width:160px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#C7CCD6; display: flex; align-items: center; gap: 12px;}
  .tz-status-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--success); flex-shrink: 0; }
  .tz-status-dot.offline { background: #4B5563; box-shadow: none; }
  
  .tz-timeline-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tz-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
    background: rgba(5,6,5, 0.4);
    padding: 5px;
    border-radius: 6px;
    border: 1px solid var(--line);
  }
  .tz-hour-node {
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.3s ease;
  }
  .tz-hour-node.work-hour {
    background: rgba(212,242,60, 0.15);
    border: 1px solid rgba(212,242,60, 0.25);
  }
  .tz-hour-node.current {
    background: var(--accent) !important;
    box-shadow: 0 0 8px var(--accent);
    border: 1.5px solid #fff;
    animation: tz-pulse 1.5s infinite alternate;
  }
  .tz-hour-node.current.online {
    background: var(--success) !important;
    box-shadow: 0 0 10px var(--success);
    border-color: #fff;
  }
  @keyframes tz-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
  }
  .tz-timeline-meta {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--muted);
    padding: 0 4px;
  }
  .tz-time { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent); min-width: 110px; text-align: right; }

  /* FAQ */
  .faq-item { border-bottom:1px solid var(--line); padding:22px 0; }
  .faq-question { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
  .faq-item h4 { font-size:16.5px; font-weight:700; color: #fff; margin: 0;}
  .faq-toggle { font-size: 18px; color: var(--accent); transition: transform 0.2s ease; }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1); }
  .faq-answer p { font-size:14px; color:var(--muted); line-height:1.6; max-width:760px; padding-top: 10px; }
  
  /* Active Accordion State */
  .faq-item.active .faq-toggle { transform: rotate(45deg); }
  .faq-item.active .faq-answer { max-height: 200px; transition: max-height 0.3s cubic-bezier(1, 0, 1, 0); }

  /* CORBLIX-STYLE TICKER */
  .gf-ticker { background:var(--ink); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:9px 0; }
  .gf-ticker-track { display:inline-block; animation:gf-scroll 26s linear infinite; }
  .gf-ticker-track span { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.6px; color:var(--muted); margin:0 30px; }
  .gf-ticker-track span b { color:var(--accent); font-weight:700; }
  @keyframes gf-scroll { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

  /* CTA */
  .cta { background: radial-gradient(circle at center, #0F110D 0%, var(--ink) 100%); color:#fff; padding:100px 0; text-align:center; border-bottom: 1px solid var(--line); }
  .cta h2 { font-size:42px; font-weight:800; max-width:600px; margin:0 auto; letter-spacing: -0.5px;}
  .cta p { color:#A3A79A; margin-top:16px; font-size:16.5px; }
  .cta .btn { margin-top:30px; font-size:15px; padding:14px 34px; }

  /* PRIVACY POLICY STYLES */
  .privacy-container {
    max-width: 850px;
    margin: 0 auto;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
  .privacy-sec { margin-bottom: 34px; }
  .privacy-sec:last-child { margin-bottom: 0; }
  .privacy-sec h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
  }
  .privacy-sec h4 { font-size: 16px; font-weight: 600; color: #C8EF5A; margin: 18px 0 8px 0; }
  .privacy-sec p { font-size: 15px; color: #D1D5DB; line-height: 1.65; margin-bottom: 14px; }
  .privacy-sec p:last-child { margin-bottom: 0; }
  .privacy-list { margin-left: 20px; margin-bottom: 14px; color: #D1D5DB; font-size: 15px; }
  .privacy-list li { margin-bottom: 6px; line-height: 1.6; }
  .privacy-footer-tag {
    text-align: center;
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding-top: 30px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--muted);
  }

  /* HIGH-FIDELITY EMAIL POPUP WINDOW CARD */
  .gaming-popup {
    position: fixed; bottom: 30px; right: 30px; width: 390px;
    background: #0C0E0A; border: 2px solid var(--line); border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px var(--orange-glow);
    z-index: 99; overflow: hidden; display: flex; flex-direction: column;
    opacity: 0; transform: translateY(50px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
  }
  .gaming-popup.visible {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
  }
  .popup-header-banner {
    background: radial-gradient(circle at left, #1E2219 0%, #070806 100%);
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; position: relative;
  }
  .popup-brand-identity {
    font-weight: 800; font-size: 13px; letter-spacing: 1.8px;
    display: flex; align-items: center; gap: 8px; text-shadow: 0 0 10px rgba(212,242,60,0.5);
  }
  .popup-brand-badge {
    background: rgba(212,242,60,0.12); border: 1px solid var(--accent-orange);
    color: var(--accent-orange); font-size: 9px; font-family: 'JetBrains Mono', monospace;
    padding: 2px 6px; border-radius: 4px; font-weight: 700;
  }
  .popup-dismiss-trigger {
    background: transparent; border: none; color: var(--muted); font-size: 20px;
    cursor: pointer; transition: color 0.2s; line-height: 1; padding: 4px;
  }
  .popup-dismiss-trigger:hover { color: #fff; }
  .popup-body-content { padding: 24px 24px 20px 24px; }
  .popup-body-content h3 { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.3px; margin-bottom: 6px; }
  .popup-body-content p { font-size: 14.5px; color: #9EAFCE; line-height: 1.5; margin-bottom: 18px; }
  
  .popup-input-field-group { position: relative; margin-bottom: 12px; }
  .popup-input-element {
    width: 100%; background: #070806; border: 1px solid var(--line); border-radius: 8px;
    padding: 13px 16px; color: #fff; font-family: inherit; font-size: 14px;
    transition: all 0.25s ease; outline: none;
  }
  .popup-input-element:focus { border-color: var(--accent-orange); box-shadow: 0 0 10px rgba(212,242,60,0.2); }
  .popup-submit-btn {
    width: 100%; background: linear-gradient(90deg, var(--accent-orange), #C3E82E); color: #fff;
    border: none; padding: 13px; border-radius: 8px; font-weight: 700; font-size: 14px;
    cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(212,242,60,0.3);
    margin-bottom: 12px; letter-spacing: 0.5px;
  }
  .popup-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,242,60,0.45); }
  .popup-legal-disclaimer { font-size: 11px; color: #6E7264; text-align: center; font-weight: 500; }

  /* PREMIUM MULTI-COLUMN GAMING EXCLUSIVE FOOTER ENGINE */
  footer {
    background: #040503; color: #959987; padding: 80px 0 40px 0;
    border-top: 1px solid var(--line); font-size: 14px;
  }
  .footer-grid-directory {
    display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; margin-bottom: 60px;
  }
  .footer-corporate-profile p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 16px 0 20px 0; max-width: 300px; }
  .footer-social-link-row { display: flex; gap: 12px; }
  .footer-social-icon-wrapper {
    width: 38px; height: 38px; background: #0D0F0B; border: 1px solid var(--line);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: #fff; transition: all 0.25s ease; cursor: pointer;
  }
  .footer-social-icon-wrapper:hover {
    border-color: var(--accent-orange); background: var(--accent-orange); color: #fff;
    transform: translateY(-3px); box-shadow: 0 4px 12px var(--orange-glow);
  }
  .footer-directory-column h4 {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
    color: #FFF; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 24px;
    display: flex; align-items: center; gap: 6px;
  }
  .footer-directory-column h4::after { content: ''; width: 6px; height: 6px; background: var(--accent-orange); border-radius: 50%; }
  .footer-navigation-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-navigation-list a { transition: color 0.2s ease, transform 0.2s ease; display: inline-block; cursor: pointer; color: #A0aec0; }
  .footer-navigation-list a:hover { color: #fff; transform: translateX(3px); }
  
  .footer-bottom-strip {
    border-top: 1px solid var(--line); padding-top: 30px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 20px; font-size: 13px; color: #6E7264;
  }
  .footer-legal-crosslinks { display: flex; gap: 24px; }
  .footer-legal-crosslinks a { transition: color 0.2s; cursor: pointer; }
  .footer-legal-crosslinks a:hover { color: #fff; }

  @media(max-width:950px) {
    .footer-grid-directory { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .gaming-popup { width: calc(100% - 40px); bottom: 20px; right: 20px; left: 20px; }
  }

  @media(max-width:900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .game-grid { grid-template-columns:repeat(2,1fr); }
    .cap-grid { grid-template-columns:repeat(2,1fr); }
    .eng-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); row-gap:20px; }
    .hero h1 { font-size:38px; }
    .tz-flex { flex-direction:column; align-items:flex-start; gap:26px; }
    .nav-links { display:none; }
    .privacy-container { padding: 24px; }
  }

  /* KEEPS PREVIOUSLY LOW OVERVIEW CONTENT CARD FIRMLY AT TOP ROW LEVEL IN MOBILE PIPELINES */
  @media(max-width:650px) {
    .ecosystem-wheel-container {
      max-width: 100%;
      aspect-ratio: auto;
      height: auto;
      margin: 40px auto 0;
    }
    .ecosystem-wheel {
      border: none;
      border-radius: 0;
      flex-direction: column;
      gap: 12px;
      height: auto;
    }
    .ecosystem-center {
      position: relative;
      width: 100%;
      height: auto;
      border-radius: 14px;
      padding: 20px;
      order: 1; /* Main dashboard card forced to the top layout slot */
    }
    .eco-node {
      position: relative;
      transform: none !important;
      width: 100%;
      height: auto;
      border-radius: 12px;
      flex-direction: row;
      justify-content: flex-start;
      padding: 14px 20px;
      gap: 16px;
      order: 2; /* Orbit selector buttons gracefully sit underneath overview cards */
    }
    .eco-node:hover, .eco-node.active {
      transform: scale(1.02);
    }
    .eco-node-label { margin-top: 0; font-size: 14px; }
    .footer-grid-directory { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom-strip { flex-direction: column; text-align: center; }
  }

  @media(max-width:600px) {
    .game-grid { grid-template-columns: 1fr; }
    .cap-grid { grid-template-columns: 1fr; }
    .org-chart-wrap { height: auto; padding-bottom: 20px; }
    .org-ring-track { display: none; }
    .org-center { position: relative; top: 0; left: 0; margin: 0 auto 20px; }
    .org-dept {
      position: relative; top: 0; left: 0; margin: 0 auto 12px; width: 100%; max-width: 280px;
      flex-direction: row; justify-content: flex-start; text-align: left; border-radius: 14px; height: auto; padding: 14px 18px;
      transform: none !important; opacity: 1 !important; pointer-events: auto !important;
    }
    .org-dept-count { margin-bottom: 0; margin-right: 0; flex-shrink: 0; }
    .org-dept {
      display: grid !important; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
      column-gap: 12px; row-gap: 1px; align-items: center;
    }
    .org-dept-count { grid-column: 1; grid-row: 1 / 3; }
    .org-dept-name { grid-column: 2; grid-row: 1; margin: 0; }
    .org-dept-sub { grid-column: 2; grid-row: 2; margin: 0; }
    .poc-card { flex-direction:column; text-align:center; }
    .tz-row { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
    .tz-timeline-wrapper { width: 100%; }
    .tz-time { text-align: left; min-width: auto; }
  }

  /* ===== LIME / BLACK THEME LAYER ===== */
  :root{ --on-accent:#0A0B07; --panel-radius:22px; }
  body{ background:var(--bg); }
  nav{ background:rgba(5,6,5,0.82); }
  /* Text on lime must be dark for contrast */
  .btn, .filter-btn.active, .filter-btn:hover, .gcard .play-link:hover, .class-tab.active,
  .popup-submit-btn, .footer-social-icon-wrapper:hover, .modal-close-btn:hover{ color:var(--on-accent) !important; }
  [style*="background:var(--accent)"][style*="color:#fff"]{ color:var(--on-accent) !important; }
  .slide-thumb svg{ fill:var(--on-accent); }
  .slide-thumb svg polyline{ stroke:var(--on-accent); }
  .eng-card [class*="badge"], .roster-card [class*="ribbon"]{ color:var(--on-accent); }

  /* Pill buttons */
  .btn{ border-radius:999px; font-weight:700; padding:11px 24px; box-shadow:0 0 0 0 transparent; }
  .btn:hover{ box-shadow:0 0 24px rgba(212,242,60,0.35); }
  .btn-outline{ border-radius:999px; }
  .popup-submit-btn{ border-radius:999px; background:var(--accent); }

  /* Softer, larger panels */
  .gcard, .cap-card, .eng-card, .privacy-container, .hero-banner-container{ border-radius:var(--panel-radius); }
  .gcard, .cap-card, .eng-card{ background:linear-gradient(180deg, #121410 0%, #0C0E0A 100%); }

  /* Hero light streaks */
  .hero{ overflow:hidden; background:radial-gradient(ellipse at 70% 0%, rgba(212,242,60,0.08) 0%, transparent 60%), var(--bg); }
  .hero > .wrap{ position:relative; z-index:2; }
  .hero-streaks{ position:absolute; inset:-10% -5% auto -5%; height:120%; z-index:1; pointer-events:none; opacity:0.9; }
  .hero-streaks path{ fill:none; stroke-linecap:round; }
  .hero-streaks .s-glow{ filter:blur(10px); opacity:0.55; }
  .hero-streaks g{ animation:streakDrift 14s ease-in-out infinite alternate; transform-origin:center; }
  @keyframes streakDrift{ from{ transform:translate3d(-2%,0,0) scaleY(1); } to{ transform:translate3d(2%,-2%,0) scaleY(1.06); } }
  @media (prefers-reduced-motion: reduce){ .hero-streaks g{ animation:none; } }

  /* Contact panel: the one bold lime block */
  .cta{ background:var(--bg); padding:90px 0; border-bottom:none; }
  .cta .wrap{
    background:var(--accent); color:var(--on-accent); border-radius:28px; padding:64px 56px; text-align:left;
    display:grid; grid-template-columns:1.2fr 1fr; gap:24px 48px; align-items:end;
  }
  .cta h2{ color:var(--on-accent); margin:0; max-width:none; font-size:46px; line-height:1.05; letter-spacing:-1px; }
  .cta p{ color:rgba(10,11,7,0.72); margin:0; font-size:17px; }
  .cta .btn{ grid-column:1 / -1; justify-self:start; margin-top:8px; background:var(--on-accent); color:var(--accent) !important; }
  .cta .btn:hover{ background:#000; box-shadow:none; }
  @media (max-width: 760px){
    .cta .wrap{ grid-template-columns:1fr; padding:40px 26px; border-radius:22px; margin:0 16px; }
    .cta h2{ font-size:32px; }
  }

  /* Footer */
  footer{ background:#000; }
  .footer-social-icon-wrapper{ border-radius:999px; }

  .btn-outline{ color:#fff !important; }
  .btn-outline:hover{ color:var(--on-accent) !important; background:var(--accent); border-color:var(--accent); }
  /* Keyboard focus */
  a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }


  /* ===== PARALLAX OPENING SCENE ===== */
  .pscene{ position:relative; height:260vh; background:#040503; --p:0; }
  .pscene-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:#040503; }
  .pl{ position:absolute; inset:0; will-change:transform; pointer-events:none; }
  .pl svg{ width:100%; height:100%; display:block; }
  .pl-sky{ transform:translateY(calc(var(--p) * -3%)); }
  .pl-sun{ transform:translateY(calc(var(--p) * 14%)) scale(calc(1 + var(--p) * 0.45)); transform-origin:50% 58%; }
  .pl-clouds{ transform:translateY(calc(var(--p) * -14%)) scale(calc(1 + var(--p) * 0.15)); }
  .pl-far{ transform:translateY(calc(var(--p) * 5%)) scale(calc(1 + var(--p) * 0.12)); transform-origin:50% 65%; }
  .pl-ground{ transform:scale(calc(1 + var(--p) * 0.35)); transform-origin:50% 66%; }
  .pl-figure{ transform:translateY(calc(var(--p) * 8%)) scale(calc(1 + var(--p) * 1.1)); transform-origin:50% 72%; }
  .pl-cliff-l{ transform:translateX(calc(var(--p) * -26%)) scale(calc(1 + var(--p) * 0.3)); transform-origin:0% 100%; }
  .pl-cliff-r{ transform:translateX(calc(var(--p) * 26%)) scale(calc(1 + var(--p) * 0.3)); transform-origin:100% 100%; }
  .pl-fog{ opacity:calc(0.55 + var(--p) * 0.45); transform:translateY(calc(var(--p) * -6%)); }
  .pl-drip{ transform:translateY(calc((1 - var(--p)) * 12%)); }
  .pscene-copy{
    position:absolute; left:0; right:0; top:13vh; z-index:5; text-align:center; padding:0 24px;
    transform:translateY(calc(var(--p) * -140px)); opacity:calc(1 - var(--p) * 2.4);
  }
  .pscene-copy h2{
    font-family:'Cinzel', Georgia, serif; font-weight:700; color:#F4F6EE; font-size:clamp(40px, 7vw, 96px);
    line-height:1; letter-spacing:0.02em; text-shadow:0 4px 40px rgba(0,0,0,0.7);
  }
  .pscene-copy p{ color:rgba(244,246,238,0.78); font-size:clamp(15px, 1.6vw, 19px); margin:18px auto 26px; max-width:520px; }
  .pscene-copy .btn{ font-family:'Outfit',sans-serif; }
  .pscene-cue{
    position:absolute; left:50%; bottom:28px; z-index:6; transform:translateX(-50%);
    color:rgba(244,246,238,0.6); font-size:13px; display:flex; flex-direction:column; align-items:center; gap:8px;
    opacity:calc(1 - var(--p) * 5);
  }
  .pscene-cue span{ width:1.5px; height:34px; background:linear-gradient(var(--accent), transparent); animation:cueDrop 1.8s ease-in-out infinite; transform-origin:top; }
  @keyframes cueDrop{ 0%{ transform:scaleY(0); opacity:1; } 70%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }
  .ember{ animation:emberRise linear infinite; }
  @keyframes emberRise{ from{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } to{ transform:translateY(-260px); opacity:0; } }
  /* one load-in moment */
  .pscene-copy h2, .pscene-copy p, .pscene-copy .btn{ animation:sceneIn 1.2s cubic-bezier(0.16,1,0.3,1) both; }
  .pscene-copy p{ animation-delay:0.15s; } .pscene-copy .btn{ animation-delay:0.3s; }
  @keyframes sceneIn{ from{ opacity:0; transform:translateY(24px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
  @media (max-width: 760px){ .pscene{ height:220vh; } .pscene-copy{ top:11vh; } }
  @media (prefers-reduced-motion: reduce){
    .pscene{ height:100vh; } .ember, .pscene-cue span, .pscene-copy h2, .pscene-copy p, .pscene-copy .btn{ animation:none; }
  }


  /* ===== ORANGE BRAND ACCENT (from the logo) ===== */
  :root{ --orange:#FF7A1A; --orange-soft:rgba(255,122,26,0.14); }
  .logo > span > span:first-child{ color:var(--orange) !important; text-shadow:0 0 14px rgba(255,122,26,0.35); }
  .eyebrow{ color:var(--orange); }
  .hero-tag{ border-color:rgba(255,122,26,0.45); background:var(--orange-soft); color:#FFE3CC; }
  .nav-links > a[data-hue="orange"]:hover, .nav-links > a[data-hue="orange"].active{
    border-color:var(--orange); background:linear-gradient(135deg, rgba(255,122,26,0.22), rgba(255,122,26,0.06)); box-shadow:0 0 0 4px rgba(255,122,26,0.10);
  }
  .nav-link-team{ border-color:var(--orange) !important; background:linear-gradient(135deg, rgba(255,122,26,0.16), rgba(212,242,60,0.10)) !important; }
  .roster-card[data-color="orange"]::after{ background:var(--orange); }
  .roster-card[data-color="orange"]:hover{ border-color:var(--orange); box-shadow:0 12px 26px rgba(255,122,26,0.2); }
  .roster-card[data-color="orange"] .rc-corner{ border-color:var(--orange); }
  .roster-card[data-color="orange"] .roster-avatar{ background:linear-gradient(135deg, var(--orange), #FFB15A); }
  .roster-card[data-color="orange"] .roster-class{ color:var(--orange); }
  .gcard:hover{ border-color:rgba(255,122,26,0.55); }
  .tz-hour-node.current{ background:var(--orange) !important; box-shadow:0 0 8px var(--orange); }
  .gf-ticker-track span b{ color:var(--orange); }
  .footer-social-icon-wrapper:hover{ background:var(--orange); border-color:var(--orange); color:#0A0B07 !important; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--orange); }
  .cta .btn{ color:var(--orange) !important; }


  /* Live Lahore sky */
  .pscene-clock{ position:absolute; left:24px; bottom:24px; z-index:6; font-family:'JetBrains Mono',monospace; font-size:12px;
    color:rgba(244,246,238,0.7); background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:6px 12px; backdrop-filter:blur(6px); }
  .pl-sky stop, .pl-clouds stop, .pl-ground stop, .pl-sun stop{ transition:stop-color 2s linear; }
  .twinkle{ animation:twinkle 3.5s ease-in-out infinite; }
  @keyframes twinkle{ 0%,100%{ opacity:var(--o,0.6); } 50%{ opacity:0.15; } }
  .shoot{ animation:shootFly 1.3s cubic-bezier(0.3,0,0.7,1) forwards; }
  @keyframes shootFly{ 0%{ transform:translate(0,0); opacity:0; } 10%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translate(var(--dx),var(--dy)); opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .twinkle{ animation:none; } }


  /* ===== GAMES HUB COVERFLOW ===== */
  .cf-wrap{ position:relative; margin-top:36px; }
  .cf-glow{ position:absolute; left:50%; top:46%; width:900px; height:520px; transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,122,26,0.30) 0%, rgba(212,242,60,0.10) 38%, transparent 68%); filter:blur(10px); }
  .game-grid.coverflow{ display:block; position:relative; height:540px; perspective:1500px; outline:none; }
  .game-grid.coverflow .gcard{
    position:absolute; left:50%; top:20px; width:310px; height:480px; margin-left:-155px; border-radius:24px; overflow:hidden;
    background:#0C0E0A; border:1px solid rgba(255,255,255,0.08); box-shadow:0 30px 60px rgba(0,0,0,0.55);
    transition:transform 0.65s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease, filter 0.5s ease, border-color 0.3s, box-shadow 0.4s;
    will-change:transform;
  }
  .game-grid.coverflow .gcard .thumb{ position:absolute; inset:0; aspect-ratio:auto; }
  .game-grid.coverflow .gcard .thumb img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 0.8s ease; }
  .game-grid.coverflow .gcard::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(5,6,5,0.72) 62%, rgba(5,6,5,0.97) 100%); }
  .game-grid.coverflow .gcard .body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; }
  .game-grid.coverflow .gcard h3{ font-size:22px; margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,0.6); }
  .game-grid.coverflow .gcard .tags{ font-size:10.5px; }
  .game-grid.coverflow .gcard > .downloads-badge{ position:absolute; top:16px; right:16px; z-index:3; margin:0; background:rgba(0,0,0,0.55);
    backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.14); border-radius:999px; padding:6px 11px; }
  .game-grid.coverflow .gcard .focus,
  .game-grid.coverflow .gcard .play-link,
  .game-grid.coverflow .gcard .view-case{ max-height:0; opacity:0; overflow:hidden; margin:0; transition:max-height 0.5s ease, opacity 0.4s ease, margin 0.4s; }
  .game-grid.coverflow .gcard.is-active{ border-color:rgba(255,122,26,0.65); box-shadow:0 40px 90px rgba(0,0,0,0.7), 0 0 50px rgba(255,122,26,0.25); }
  .game-grid.coverflow .gcard.is-active .focus{ max-height:120px; opacity:1; margin-bottom:12px; font-size:13px; }
  .game-grid.coverflow .gcard.is-active .play-link{ max-height:60px; opacity:1; margin-top:4px; }
  .game-grid.coverflow .gcard.is-active .view-case{ max-height:40px; opacity:1; margin-top:12px; }
  .game-grid.coverflow .gcard:not(.is-active){ filter:brightness(0.55) saturate(0.85); cursor:pointer; }
  .game-grid.coverflow .gcard:not(.is-active):hover{ filter:brightness(0.9) saturate(1); border-color:rgba(212,242,60,0.5); }
  .game-grid.coverflow .gcard:not(.is-active) .tags{ display:none; }
  .game-grid.coverflow .gcard:hover{ transform:var(--cf-t); }
  .game-grid.coverflow .gcard.is-active:hover .thumb img{ transform:scale(1.08); }
  .cf-arrow{ position:absolute; top:270px; z-index:60; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.16);
    background:rgba(5,6,5,0.7); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px); transition:all 0.2s; }
  .cf-arrow:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
  .cf-prev{ left:0; } .cf-next{ right:0; }
  .cf-dots{ display:flex; justify-content:center; gap:8px; margin-top:6px; }
  .cf-dots button{ width:8px; height:8px; border-radius:999px; border:none; background:rgba(255,255,255,0.25); cursor:pointer; transition:all 0.3s; padding:0; }
  .cf-dots button.on{ width:26px; background:var(--orange); }
  .cf-hint{ text-align:center; color:var(--muted); font-size:13px; margin-top:14px; }
  @media (max-width: 760px){
    .game-grid.coverflow{ height:470px; }
    .game-grid.coverflow .gcard{ width:250px; height:410px; margin-left:-125px; }
    .cf-arrow{ top:230px; width:40px; height:40px; }
  }
  @media (prefers-reduced-motion: reduce){ .game-grid.coverflow .gcard{ transition:opacity 0.2s, filter 0.2s; } }


  /* ===== PROJECT PLAN: QUEST LINE ===== */
  .qp-section{ position:relative; overflow:clip;
    background:radial-gradient(ellipse at 15% 20%, rgba(255,122,26,0.10), transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(212,242,60,0.08), transparent 55%), var(--bg-soft); }
  .qp-goal{ max-width:760px; margin-top:18px; font-size:18px; line-height:1.6; color:#E7EADD; }
  .qp-goal span{ display:inline-block; margin-right:10px; padding:3px 12px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:13px; vertical-align:2px; }
  .qp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; margin-top:56px; align-items:start; }
  .qp-panel-col{ align-self:stretch; }
  .qp-panel-col .qp-panel{ position:sticky; top:110px; }
  .qp-panel{ position:relative; border-radius:28px; padding:36px 36px 30px; overflow:hidden;
    background:linear-gradient(160deg, rgba(255,122,26,0.16), rgba(12,14,10,0.95) 42%), #0C0E0A;
    border:1px solid rgba(255,255,255,0.09); box-shadow:0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
  .qp-panel::before{ content:''; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:28px 28px; mask-image:linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%); }
  .qp-panel-top{ position:relative; display:flex; justify-content:space-between; align-items:center; }
  .qp-panel-icon{ width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:var(--on-accent);
    background:linear-gradient(135deg, var(--orange), var(--accent)); box-shadow:0 10px 30px rgba(255,122,26,0.35); }
  .qp-panel-count{ font-family:'JetBrains Mono',monospace; color:var(--muted); font-size:13px; }
  .qp-panel-count b{ color:#fff; font-size:16px; }
  .qp-big{ position:relative; font-weight:800; font-size:150px; line-height:0.9; letter-spacing:-6px; margin:22px 0 4px;
    color:transparent; -webkit-text-stroke:1.5px rgba(212,242,60,0.55);
    background:linear-gradient(180deg, rgba(212,242,60,0.18), transparent 80%); -webkit-background-clip:text; background-clip:text; }
  .qp-title{ position:relative; font-size:32px; font-weight:800; letter-spacing:-0.6px; color:#fff; line-height:1.1; }
  .qp-list{ position:relative; list-style:none; counter-reset:q; margin:20px 0 26px; display:grid; gap:12px; }
  .qp-list li{ counter-increment:q; position:relative; padding-left:38px; color:#C9CDBF; font-size:15px; line-height:1.55; }
  .qp-list li::before{ content:counter(q); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
    border:1px solid rgba(255,122,26,0.6); color:var(--orange); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .qp-panel.swap .qp-big, .qp-panel.swap .qp-title, .qp-panel.swap .qp-list, .qp-panel.swap .qp-panel-icon{ animation:qpSwap 0.55s cubic-bezier(0.22,1,0.36,1); }
  @keyframes qpSwap{ from{ opacity:0; transform:translateY(14px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
  .qp-seg{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .qp-seg span{ height:4px; border-radius:4px; background:rgba(255,255,255,0.1); transition:background 0.4s; cursor:pointer; }
  .qp-seg span.done{ background:linear-gradient(90deg, var(--orange), var(--accent)); }
  .qp-next{ position:relative; margin-top:14px; font-size:13px; color:var(--muted); }

  .qp-track{ position:relative; padding-left:4px; }
  .qp-rail{ position:absolute; left:31px; top:30px; bottom:120px; width:2px; background:rgba(255,255,255,0.08); border-radius:2px; }
  .qp-rail-fill{ position:absolute; left:0; top:0; width:100%; height:0; border-radius:2px;
    background:linear-gradient(180deg, var(--orange), var(--accent)); box-shadow:0 0 14px rgba(212,242,60,0.6); }
  .qp-stage{ position:relative; display:flex; gap:26px; min-height:36vh; padding:6px 0 40px; cursor:pointer; outline:none; }
  .qp-node{ position:relative; z-index:1; flex:0 0 56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#0A0B08; border:1px solid rgba(255,255,255,0.14); color:var(--muted); transition:all 0.45s cubic-bezier(0.22,1,0.36,1); }
  .qp-stage-num{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); }
  .qp-stage h3{ font-size:26px; font-weight:800; letter-spacing:-0.4px; color:rgba(255,255,255,0.35); margin-top:6px; transition:color 0.4s; }
  .qp-stage-list{ display:block; list-style:none; margin-top:10px; max-width:420px; }
  .qp-stage-list li{ display:none; }
  .qp-stage-list li:first-child{ display:block; color:rgba(201,205,191,0.45); font-size:14.5px; line-height:1.55; transition:color 0.4s; }
  .qp-stage.is-active .qp-stage-list li:first-child{ color:#B9BDB0; }
  .qp-stage.is-past .qp-node{ border-color:rgba(212,242,60,0.5); color:var(--accent); }
  .qp-stage.is-past h3{ color:rgba(255,255,255,0.6); }
  .qp-stage.is-active .qp-node{ background:linear-gradient(135deg, var(--orange), var(--accent)); color:var(--on-accent); border-color:transparent;
    transform:scale(1.12); box-shadow:0 0 0 8px rgba(255,122,26,0.12), 0 0 34px rgba(255,122,26,0.45); }
  .qp-stage.is-active h3{ color:#fff; }
  .qp-stage.is-active .qp-stage-num{ color:var(--orange); }
  .qp-stage:hover h3{ color:#fff; }
  .qp-stage:focus-visible .qp-node{ outline:2px solid var(--accent); outline-offset:4px; }
  .qp-loop{ display:flex; align-items:center; gap:12px; margin-left:4px; padding:16px 20px; border-radius:16px; color:#C9CDBF; font-size:14px;
    border:1px dashed rgba(212,242,60,0.35); background:rgba(212,242,60,0.04); }
  .qp-loop svg{ color:var(--accent); flex-shrink:0; }

  @media (max-width: 900px){
    .qp{ grid-template-columns:1fr; gap:0; margin-top:36px; }
    .qp-panel-col{ display:none; }
    .qp-stage{ min-height:0; padding-bottom:32px; }
    .qp-stage-list{ display:grid; gap:8px; list-style:none; margin-top:12px; }
    .qp-stage-list li, .qp-stage-list li:first-child{ display:block; color:#B9BDB0; }
    .qp-stage-list li{ color:#B9BDB0; font-size:14.5px; line-height:1.5; padding-left:16px; position:relative; }
    .qp-stage-list li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--orange); }
    .qp-stage h3{ color:#fff; font-size:22px; }
    .qp-rail{ bottom:100px; }
  }
  @media (prefers-reduced-motion: reduce){ .qp-panel.swap *{ animation:none !important; } }


  /* ===== TITLE SCREEN (PREMIUM) ===== */
  #splashScreen.ts{ background:#030402; overflow:hidden; font-family:'Outfit',sans-serif; }
  #tsCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .ts-vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,0.85) 100%); }
  .ts-scan{ position:absolute; inset:0; pointer-events:none; opacity:0.18; mix-blend-mode:overlay;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 3px); }
  .ts-stage{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 20px;
    transform:translate3d(var(--mx,0),var(--my,0),0); transition:transform 0.6s cubic-bezier(0.22,1,0.36,1); margin-top:-12vh; }
  .ts-emblem{ position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;
    opacity:0; transform:scale(0.6); animation:tsPop 1s cubic-bezier(0.22,1.4,0.36,1) 0.95s forwards; }
  .ts-logo{ position:relative; z-index:2; width:132px; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.6)); animation:tsFloat 5s ease-in-out infinite; }
  .ts-emblem-glow{ position:absolute; inset:20px; border-radius:50%; background:radial-gradient(circle, rgba(255,122,26,0.35), rgba(212,242,60,0.12) 45%, transparent 70%); filter:blur(8px); animation:tsBreath 4s ease-in-out infinite; }
  .ts-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid transparent; }
  .ts-r1{ border-top-color:var(--orange); border-right-color:rgba(255,122,26,0.25); transform:rotateX(68deg); animation:tsSpin 6s linear infinite; box-shadow:0 0 18px rgba(255,122,26,0.35); }
  .ts-r2{ inset:14px; border-bottom-color:var(--accent); border-left-color:rgba(212,242,60,0.25); transform:rotateY(64deg); animation:tsSpin2 8s linear infinite; box-shadow:0 0 18px rgba(212,242,60,0.3); }
  @keyframes tsSpin{ to{ transform:rotateX(68deg) rotateZ(360deg); } }
  @keyframes tsSpin2{ to{ transform:rotateY(64deg) rotateZ(-360deg); } }
  @keyframes tsFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
  @keyframes tsBreath{ 0%,100%{ opacity:0.7; transform:scale(0.95); } 50%{ opacity:1; transform:scale(1.08); } }
  @keyframes tsPop{ to{ opacity:1; transform:scale(1); } }
  .ts-word{ display:flex; gap:0.28em; font-weight:800; font-size:clamp(44px, 8vw, 104px); line-height:0.95; letter-spacing:0.02em; }
  .ts-w1{ color:#F6F8EF; text-shadow:0 0 40px rgba(255,255,255,0.15); }
  .ts-w2{ background:linear-gradient(100deg, var(--orange) 0%, #FFB15A 30%, var(--accent) 70%); -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 24px rgba(212,242,60,0.3)); }
  .ts-word span{ font-variant-numeric:tabular-nums; }
  .ts-sub{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:clamp(11px,1.2vw,13px); letter-spacing:0.32em; color:rgba(230,235,220,0.6);
    opacity:0; animation:tsFade 0.8s ease 1.9s forwards; text-transform:uppercase; }
  .ts-load{ margin-top:38px; width:min(320px, 70vw); opacity:0; animation:tsFade 0.5s ease 1.4s forwards; transition:opacity 0.4s, transform 0.4s; }
  .ts-bar{ height:3px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .ts-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--orange), var(--accent)); box-shadow:0 0 12px var(--accent); }
  .ts-load-txt{ display:flex; justify-content:space-between; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:rgba(230,235,220,0.5); }
  .ts-cta{ margin-top:-12px; position:relative; font-family:'Outfit',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.02em;
    padding:16px 40px; border-radius:999px; border:none; cursor:pointer; color:var(--on-accent);
    background:linear-gradient(100deg, var(--orange), #FFB15A 35%, var(--accent)); box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset, 0 10px 40px rgba(255,122,26,0.35);
    opacity:0; transform:translateY(12px) scale(0.96); pointer-events:none; transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1.4,0.36,1), box-shadow 0.3s; }
  .ts-cta::after{ content:''; position:absolute; inset:-6px; border-radius:999px; border:1px solid rgba(212,242,60,0.5); animation:tsPulse 2.2s ease-out infinite; }
  .ts-cta:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.2) inset, 0 14px 50px rgba(212,242,60,0.45); }
  @keyframes tsPulse{ 0%{ opacity:0.9; transform:scale(1); } 100%{ opacity:0; transform:scale(1.25); } }
  .ts-hint{ margin-top:18px; font-size:12.5px; color:rgba(230,235,220,0.4); opacity:0; transition:opacity 0.6s 0.2s; }
  .ts.is-ready .ts-load{ opacity:0 !important; transform:translateY(-8px); animation:none; height:0; margin:0; overflow:hidden; }
  .ts.is-ready .ts-cta{ opacity:1; transform:none; pointer-events:auto; margin-top:40px; }
  .ts.is-ready .ts-hint{ opacity:1; }
  @keyframes tsFade{ to{ opacity:1; } }
  .ts-hud{ position:absolute; bottom:26px; z-index:3; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:rgba(230,235,220,0.45);
    opacity:0; animation:tsFade 0.8s ease 2.2s forwards; }
  .ts-hud-l{ left:28px; } .ts-hud-r{ right:28px; }
  /* CRT power-on */
  .ts-power{ position:absolute; inset:0; z-index:10; pointer-events:none; }
  .ts-power i{ position:absolute; left:0; right:0; height:50%; background:#000; animation:tsHalf 0.7s cubic-bezier(0.7,0,0.2,1) 0.5s forwards; }
  .ts-pt{ top:0; } .ts-pb{ bottom:0; --dir:1; }
  .ts-pb{ animation-name:tsHalfB !important; }
  .ts-power b{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:linear-gradient(90deg, transparent, var(--accent), #fff, var(--orange), transparent);
    box-shadow:0 0 20px var(--accent), 0 0 60px var(--orange); transform:scaleX(0); animation:tsLine 0.5s cubic-bezier(0.22,1,0.36,1) 0.05s forwards, tsLineOut 0.4s ease 0.75s forwards; }
  @keyframes tsLine{ to{ transform:scaleX(1); } }
  @keyframes tsLineOut{ to{ opacity:0; transform:scaleX(1) scaleY(30); } }
  @keyframes tsHalf{ to{ transform:translateY(-101%); } }
  @keyframes tsHalfB{ to{ transform:translateY(101%); } }
  /* Exit: warp forward */
  .ts-flash{ position:absolute; inset:0; z-index:11; pointer-events:none; opacity:0;
    background:radial-gradient(circle at 50% 45%, #fff 0%, #EEFBC0 25%, rgba(255,122,26,0.6) 50%, transparent 75%); }
  #splashScreen.ts.splash-exit .ts-stage{ animation:tsWarp 0.55s cubic-bezier(0.6,0,0.9,0.4) forwards; }
  #splashScreen.ts.splash-exit .ts-flash{ animation:tsFlash 0.55s ease-out forwards; }
  #splashScreen.ts.splash-exit .ts-hud{ opacity:0; transition:opacity 0.2s; }
  @keyframes tsWarp{ to{ transform:scale(2.2); opacity:0; filter:blur(10px); } }
  @keyframes tsFlash{ 0%{ opacity:0; } 45%{ opacity:0.9; } 100%{ opacity:0; } }
  @media (max-width: 600px){ .ts-emblem{ width:170px; height:170px; } .ts-logo{ width:104px; } .ts-hud{ bottom:18px; font-size:10.5px; } .ts-hud-l{ left:16px; } .ts-hud-r{ right:16px; } }
  @media (prefers-reduced-motion: reduce){
    .ts-power{ display:none; } .ts-emblem, .ts-sub, .ts-hud, .ts-load{ animation:none; opacity:1; transform:none; }
    .ts-logo, .ts-emblem-glow, .ts-r1, .ts-r2, .ts-cta::after{ animation:none; }
  }