:root{
    --obsidian:  #0b0e17;   /* base */
    --obsidian-2:#11151f;   /* raised surface */
    --ink:       #070910;   /* deepest */
    --bone:      #e9e3d4;   /* primary text, card-stock warm white */
    --bone-dim:  #a9a596;   /* secondary text */
    --gold:      #c8a24b;   /* heraldic accent */
    --gold-lo:   #8a6f2f;
    --ember:     #c0402f;   /* valour / fire */
    --steel:     #6e8ca0;   /* cool contrast */
    --wraith:    #8f7fbf;   /* death / veer */
    --azure:     #7fc4ff;   /* bright blue accent, rules crawl */
    --line:      rgba(200,162,75,.18);
    --maxw: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--obsidian);
    color:var(--bone);
    font-family:"Space Grotesk", system-ui, sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3{font-family:"Cinzel", serif;font-weight:700;line-height:1.05;margin:0}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* ---------- Header (always visible) ---------- */
  header{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;gap:20px;
    padding:16px 24px;
    transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(9,11,17,.82);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex;align-items:center;gap:12px;font-family:"Cinzel",serif;font-weight:900;
    letter-spacing:.14em;font-size:20px;color:var(--bone)}
  .brand .sigil{width:26px;height:26px;flex:0 0 auto}
  .brand .sigil path{fill:var(--gold)}

  nav.main{display:flex;gap:6px;margin-left:8px}
  nav.main a{
    padding:8px 14px;border-radius:2px;font-size:15px;color:var(--bone-dim);
    font-weight:500;transition:color .2s, background .2s;position:relative;
  }
  nav.main a:hover{color:var(--bone)}
  nav.main a.active{color:var(--gold)}
  nav.main a.active::after{
    content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--gold);
  }

  .header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
  .socials{display:flex;gap:6px}
  .socials a{
    width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
    color:var(--bone-dim);border:1px solid transparent;transition:.2s var(--ease);
  }
  .socials a:hover{color:var(--bone);border-color:var(--line);background:rgba(255,255,255,.03)}
  .socials svg{width:19px;height:19px}

  /* ---------- The persistent Download button ---------- */
  .btn-download{
    display:inline-flex;align-items:center;gap:9px;
    font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;
    color:var(--ink);
    background:linear-gradient(180deg,#e3c168,var(--gold) 55%,var(--gold-lo));
    padding:11px 20px;border-radius:3px;border:1px solid #e7cd82;
    box-shadow:0 6px 22px -8px rgba(200,162,75,.7), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .18s var(--ease), box-shadow .25s;
    white-space:nowrap;cursor:pointer;
  }
  .btn-download:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(200,162,75,.75), inset 0 1px 0 rgba(255,255,255,.4)}
  .btn-download:active{transform:translateY(0)}
  .btn-download svg{width:17px;height:17px}
  .btn-download[aria-disabled="true"]{opacity:.5;filter:saturate(.6);cursor:not-allowed}
  .btn-download[aria-disabled="true"]:hover,
  .btn-download[aria-disabled="true"]:active{transform:none;box-shadow:0 6px 22px -8px rgba(200,162,75,.7), inset 0 1px 0 rgba(255,255,255,.35)}

  /* ---------- View system ---------- */
  main{position:relative}
  .view{display:none}
  .view.active{display:block;animation:viewIn .5s var(--ease)}
  @keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* ---------- HERO / HOME ---------- */
  .hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
  #cardCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2}
  /* Seedance / trailer video slot — sits under the 3D layer as ambient bg. REPLACE src. */
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:-3;filter:saturate(.8) contrast(1.05)}
  .hero-fallback{position:absolute;inset:0;z-index:-3;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(192,64,47,.18), transparent 55%),
      radial-gradient(90% 80% at 50% 120%, rgba(200,162,75,.14), transparent 60%),
      linear-gradient(180deg,var(--ink),var(--obsidian));}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(6,8,14,.7) 100%)}

  .hero-inner{text-align:center;padding:120px 24px 160px;max-width:820px}
  .hero h1{
    font-weight:900;letter-spacing:.1em;
    font-size:clamp(56px,13vw,150px);
    color:var(--bone);
    text-shadow:0 2px 40px rgba(0,0,0,.6);
    margin-bottom:2px;
  }
  .hero .rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0 22px;color:var(--gold)}
  .hero .rule::before,.hero .rule::after{content:"";height:1px;width:min(80px,14vw);background:linear-gradient(90deg,transparent,var(--gold))}
  .hero .rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
  .hero .rule span{font-family:"Space Grotesk";font-size:13px;letter-spacing:.35em;color:var(--gold);text-transform:uppercase}
  .hero p.lead{font-size:clamp(17px,2.4vw,21px);color:var(--bone-dim);max-width:52ch;margin:0 auto 34px}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn-ghost{
    display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:15px;
    padding:11px 20px;border-radius:3px;color:var(--bone);
    border:1px solid rgba(233,227,212,.28);background:rgba(255,255,255,.02);
    transition:.2s var(--ease);cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--bone);background:rgba(255,255,255,.05)}
  .btn-ghost svg{width:16px;height:16px}

  .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--bone-dim);
    font-size:12px;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
  .scroll-hint .dot{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:sweep 2.4s var(--ease) infinite}
  @keyframes sweep{0%{opacity:0;transform:scaleY(.3);transform-origin:top}40%{opacity:1}100%{opacity:0;transform:scaleY(1);transform-origin:top}}

  /* ---------- Home: pillars strip below hero ---------- */
  .band{position:relative;z-index:0;overflow:hidden;padding:96px 0;border-top:1px solid var(--line)}
  .band-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .band-ambient::before{content:"";position:absolute;inset:-12% -6%;filter:blur(10px);
    background:
      radial-gradient(52% 56% at 15% 15%,rgba(192,64,47,.32),transparent 66%),
      radial-gradient(52% 56% at 85% 20%,rgba(110,140,160,.30),transparent 66%),
      radial-gradient(58% 52% at 50% 95%,rgba(200,162,75,.28),transparent 70%);
    animation:bandDrift 20s ease-in-out infinite}
  @keyframes bandDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,2%) scale(1.03)}}
  .band-head{max-width:640px;margin-bottom:52px}
  .band-head h2{font-size:clamp(30px,5vw,46px);letter-spacing:.02em}
  .band-head p{color:var(--bone-dim);margin-top:14px}

  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
  .pillar{position:relative;background:var(--obsidian);padding:34px 30px;border-top:2px solid transparent;
    opacity:0;translate:0 26px;
    transition:opacity .6s var(--ease), translate .6s var(--ease),
      background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}
  .pillar.in-view{opacity:1;translate:0 0}
  .pillar:hover{background:var(--obsidian-2);border-top-color:var(--accent,var(--gold));
    box-shadow:0 0 40px -18px var(--accent,var(--gold)) inset, 0 24px 40px -30px rgba(0,0,0,.7)}
  .pillar--build{--accent:var(--ember)}
  .pillar--field{--accent:var(--steel)}
  .pillar--victory{--accent:var(--gold)}
  .pillar-icon{display:block;width:28px;height:28px;color:var(--accent,var(--gold));margin-bottom:16px}
  .pillar .num{font-family:"Cinzel";color:var(--accent,var(--gold));font-size:15px;letter-spacing:.2em}
  .pillar h3{font-size:22px;margin:14px 0 10px;font-family:"Space Grotesk";font-weight:700;letter-spacing:0}
  .pillar p{color:var(--bone-dim);font-size:15.5px}

  /* Home art slot (REPLACE with provided image) */
  .home-showcase{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .home-showcase .copy h2{font-size:clamp(28px,4.4vw,42px)}
  .home-showcase .copy p{color:var(--bone-dim);margin:18px 0 26px}
  .art-slot{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:6px;overflow:hidden;
    background:
      repeating-linear-gradient(135deg, rgba(200,162,75,.05) 0 12px, transparent 12px 24px),
      radial-gradient(120% 120% at 30% 10%, rgba(192,64,47,.16), transparent 60%),
      var(--obsidian-2);
    display:grid;place-items:center;color:var(--bone-dim);text-align:center}
  .art-slot span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;padding:0 20px}

  /* ---------- HEROES ---------- */
  .page-head{padding:150px 0 40px}
  .page-head .eyebrow{color:var(--gold);font-size:13px;letter-spacing:.35em;text-transform:uppercase;margin-bottom:16px}
  .page-head h1{font-size:clamp(40px,8vw,84px);letter-spacing:.06em}
  .page-head p{color:var(--bone-dim);max-width:60ch;margin-top:18px;font-size:18px}

  #heroes{position:relative;z-index:0;overflow:hidden}
  .hero-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .hero-ambient::before{content:"";position:absolute;inset:-12% -6%;filter:blur(8px);
    background:
      radial-gradient(58% 62% at 18% 12%,rgba(200,162,75,.55),transparent 68%),
      radial-gradient(58% 62% at 82% 20%,rgba(110,140,160,.50),transparent 68%),
      radial-gradient(66% 64% at 50% 96%,rgba(192,64,47,.46),transparent 72%);
    animation:heroDrift 18s ease-in-out infinite}
  @keyframes heroDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2.5%,2%) scale(1.04)}}
  .ember{position:absolute;bottom:-14px;border-radius:50%;
    background:radial-gradient(circle,var(--spark,#e9c876),transparent 72%);
    box-shadow:0 0 8px 1px var(--spark,#e9c876);
    animation:emberRise linear infinite}
  @keyframes emberRise{
    0%{opacity:0;transform:translate(0,0)}
    10%{opacity:.9}
    85%{opacity:.6}
    100%{opacity:0;transform:translate(var(--dx,16px),-640px)}
  }

  .hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-bottom:110px}
  @keyframes heroIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
  .hcard{
    position:relative;aspect-ratio:5/7;border-radius:10px;overflow:hidden;cursor:pointer;
    background:linear-gradient(180deg,var(--obsidian-2),var(--ink));
    border:1px solid var(--line);
    box-shadow:0 0 34px -12px var(--accent,transparent);
    transform-style:preserve-3d;transition:transform .3s var(--ease), box-shadow .3s var(--ease);
    will-change:transform;
    opacity:0;animation:heroIn .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms);
  }
  .hcard:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px var(--accent,var(--gold)), 0 0 55px -12px var(--accent,var(--gold))}
  .hcard .frame{position:absolute;inset:10px;border:1px solid var(--line);border-radius:6px;pointer-events:none}
  .hcard .glare{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 45%);
    opacity:0;transition:opacity .3s;pointer-events:none}
  .hcard:hover .glare{opacity:1}
  .hcard .art{position:absolute;inset:0;z-index:0}
  .hcard .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 16px;z-index:2;
    background:linear-gradient(transparent,rgba(6,8,14,.92));
    opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .hcard:hover .meta{opacity:1;transform:translateY(0)}
  .hcard .meta .cls{color:var(--accent,var(--gold));font-size:11px;letter-spacing:.25em;text-transform:uppercase}
  .hcard .meta h3{font-family:"Space Grotesk";font-weight:700;font-size:19px;letter-spacing:0;margin-top:4px}
  .hcard:hover .cost{opacity:1}

  /* ---------- LORE ---------- */
  #lore{position:relative;z-index:0;overflow:hidden}
  .lore-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .lore-ambient::before{content:"";position:absolute;inset:-12% -6%;filter:blur(12px);
    background:
      radial-gradient(58% 54% at 22% 8%,rgba(192,64,47,.50),transparent 66%),
      radial-gradient(58% 54% at 78% 78%,rgba(143,127,191,.52),transparent 66%),
      radial-gradient(64% 50% at 50% 42%,rgba(200,162,75,.30),transparent 72%);
    animation:loreDrift 22s ease-in-out infinite}
  @keyframes loreDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,2.5%) scale(1.03)}}

  .lore-wrap{padding:150px 0 120px;max-width:960px}
  .lore-wrap .page-head{padding:0 0 30px}
  .lore-intro{color:var(--bone-dim);font-size:19px;line-height:1.75;max-width:60ch}
  .lore-teasers{margin-top:64px;display:flex;flex-direction:column;gap:2px}
  .teaser{position:relative;padding:38px 0 38px 34px;border-top:1px solid var(--line)}
  .teaser:last-child{border-bottom:1px solid var(--line)}
  .teaser::before{content:"";position:absolute;left:0;top:38px;bottom:38px;width:2px;
    background:linear-gradient(var(--gold),transparent)}
  .teaser h3{font-family:"Space Grotesk";font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
  .teaser p{font-family:"Cinzel";font-weight:500;font-size:clamp(20px,3vw,27px);line-height:1.4;color:var(--bone);margin-top:14px}
  .lore-seal{margin-top:60px;padding:30px;border:1px solid var(--line);border-radius:8px;text-align:center;
    background:
      radial-gradient(90% 140% at 15% 0,rgba(192,64,47,.10),transparent 60%),
      radial-gradient(90% 140% at 85% 100%,rgba(143,127,191,.10),transparent 60%);
    opacity:0;translate:0 26px;transition:opacity .6s var(--ease), translate .6s var(--ease)}
  .lore-seal.in-view{opacity:1;translate:0 0}
  .lore-seal p{color:var(--bone-dim)}
  .lore-seal strong{color:var(--bone);font-weight:600}

  /* ---------- UPDATES ---------- */
  .updates-wrap{padding:150px 0 120px;max-width:860px}
  .update{display:grid;grid-template-columns:150px 1fr;gap:30px;padding:36px 0;border-top:1px solid var(--line)}
  .update:last-child{border-bottom:1px solid var(--line)}
  .update .when{color:var(--bone-dim);font-size:14px}
  .update .tag{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.12em;color:var(--gold);
    border:1px solid var(--line);border-radius:2px;padding:3px 9px}
  .update h3{font-family:"Space Grotesk";font-weight:700;font-size:22px;letter-spacing:0}
  .update ul{margin:14px 0 0;padding-left:18px;color:var(--bone-dim)}
  .update li{margin:6px 0}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:60px 0 40px;background:var(--ink)}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
  .foot .brand{font-size:18px}
  .foot-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .foot small{display:block;color:var(--bone-dim);margin-top:26px;font-size:13px}

  /* ---------- Mobile sticky download (extra safety net) ---------- */
  .mobile-dl{display:none}

  @media(max-width:900px){
    nav.main{display:none}
    .socials{display:none}
    .pillars{grid-template-columns:1fr}
    .home-showcase{grid-template-columns:1fr;gap:30px}
    .hero-grid{grid-template-columns:repeat(2,1fr)}
    .update{grid-template-columns:1fr;gap:8px}
    .mobile-dl{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px;
      background:rgba(9,11,17,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
      gap:12px;align-items:center;justify-content:space-between}
    .mobile-dl .btn-download{flex:1;justify-content:center}
    .mobile-nav{display:flex;gap:4px;overflow:auto}
    body{padding-bottom:70px}
    .origin-art{display:none}
  }
  @media(min-width:901px){.mobile-nav{display:none}}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;scroll-behavior:auto}
    .scroll-hint{display:none}
  }
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

  /* ---- gameplay gallery ---- */
  .shots{display:flex;flex-direction:column;gap:18px}
  .shot{display:flex;gap:44px;align-items:center;
    opacity:0;translate:0 30px;transition:opacity .6s var(--ease), translate .6s var(--ease)}
  .shot.in-view{opacity:1;translate:0 0}
  .shot.alt{flex-direction:row-reverse}
  .shot-img{flex:1.55;border:1px solid var(--line);border-radius:8px;overflow:hidden;
    box-shadow:0 40px 70px -40px rgba(0,0,0,.9);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
  .shot-img:hover{transform:translateY(-6px);
    box-shadow:0 50px 80px -40px rgba(0,0,0,.95), 0 0 50px -14px rgba(200,162,75,.4)}
  .shot-img img{width:100%;display:block}
  .shot-cap{flex:1}
  .shot-cap h3{font-family:"Space Grotesk";font-weight:700;font-size:clamp(22px,2.6vw,28px);letter-spacing:0}
  .shot-cap p{color:var(--bone-dim);margin-top:12px;font-size:16.5px}
  /* ---- lore origins ---- */
  @keyframes originBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  .origin{position:relative;overflow:hidden;display:flex;align-items:center;gap:40px;
    padding:40px 0;border-top:1px solid var(--line);
    opacity:0;translate:0 26px;
    transition:opacity .6s var(--ease), translate .6s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease)}
  .origin.in-view{opacity:1;translate:0 0}
  .origin:first-of-type{margin-top:56px}
  .origin--ike{--accent:var(--ember);background:linear-gradient(90deg,rgba(192,64,47,.02) 0%,rgba(192,64,47,.22) 100%)}
  .origin--veer{--accent:var(--wraith);background:linear-gradient(90deg,rgba(143,127,191,.02) 0%,rgba(143,127,191,.24) 100%)}
  .origin:hover{box-shadow:0 0 60px -18px var(--accent,transparent) inset}
  .origin-body{position:relative;z-index:1;flex:1 1 auto;min-width:0}
  .origin-art{position:relative;z-index:0;flex:0 0 auto;align-self:center;
    width:clamp(150px,20vw,240px);aspect-ratio:5/7;object-fit:cover;border-radius:4px;
    opacity:.55;filter:saturate(.8);pointer-events:none;user-select:none;
    animation:originBreathe 10s ease-in-out infinite;
    transition:opacity .4s var(--ease);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%)}
  .origin:hover .origin-art{opacity:.72}
  .o-head{display:flex;flex-direction:column;gap:6px}
  .o-kicker{color:var(--gold);font-size:13px;letter-spacing:.28em;text-transform:uppercase}
  .o-head h3{font-family:"Cinzel";font-weight:700;font-size:clamp(26px,4vw,36px)}
  .origin blockquote{margin:22px 0;padding:6px 0 6px 22px;border-left:2px solid var(--gold);
    font-family:"Cinzel";font-style:italic;font-size:clamp(18px,2.6vw,22px);color:var(--bone);line-height:1.5}
  .origin-body>p{color:var(--bone-dim);font-size:17.5px;line-height:1.8;max-width:64ch}
  /* ---- updates ambient ---- */
  #updates{position:relative;z-index:0;overflow:hidden}
  #updates::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
    background-image:url(../cards/tamsin.png);background-size:cover;background-position:50% 28%;
    opacity:.72;filter:saturate(1.1) brightness(1.05)}
  #updates::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
    background:linear-gradient(to bottom,rgba(7,9,16,.5) 0%,rgba(7,9,16,.08) 26%,rgba(7,9,16,.08) 78%,rgba(7,9,16,.35) 100%)}
  .updates-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .updates-ambient::before{content:"";position:absolute;inset:-12% -6%;filter:blur(16px);
    background:
      radial-gradient(45% 40% at 25% 15%,rgba(200,162,75,.10),transparent 62%),
      radial-gradient(45% 40% at 75% 85%,rgba(110,140,160,.10),transparent 62%);
    animation:updatesDrift 20s ease-in-out infinite}
  @keyframes updatesDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2%) scale(1.03)}}

  /* ---- updates: patch notes ---- */
  .reveal-up{opacity:0;translate:0 26px;transition:opacity .6s var(--ease), translate .6s var(--ease)}
  .reveal-up.in-view{opacity:1;translate:0 0}
  .patch-note{position:relative;overflow:hidden;padding:48px 44px;border:1px solid var(--line);border-radius:10px;
    background:radial-gradient(120% 80% at 50% 0,rgba(200,162,75,.06),transparent 60%)}
  .patch-note::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:rgba(7,9,16,.45)}
  .patch-note>*{position:relative;z-index:1}
  .pn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:18px}
  .pn-meta time{color:var(--bone-dim);font-size:14px;letter-spacing:.06em}
  .patch-note h2{font-family:"Cinzel";font-size:clamp(28px,4.4vw,40px);line-height:1.2;margin:0}
  .pn-lede{color:var(--bone-dim);font-size:18px;max-width:62ch;margin:14px 0 8px}
  .pn-group{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
  .pn-group h3{font-family:"Cinzel";font-size:20px;color:var(--gold);margin:0 0 14px}
  .pn-group ul{margin:0;padding-left:1.2em}
  .pn-group li{color:var(--bone-dim);margin:8px 0}
  .pn-group li::marker{color:var(--gold)}
  .pn-group strong{color:var(--bone);font-weight:600}
  .updates-follow{text-align:center;margin-top:44px}
  .updates-follow p{color:var(--bone-dim);margin:0 0 20px}
  @media(max-width:600px){ .patch-note{padding:32px 20px} }
  .ue-badge{display:inline-flex;align-items:center;gap:8px;color:var(--gold);border:1px solid var(--line);border-radius:2px;
    padding:5px 14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
  .ue-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:uePulse 2s ease-out infinite}
  @keyframes uePulse{
    0%{box-shadow:0 0 0 0 rgba(200,162,75,.55)}
    70%{box-shadow:0 0 0 8px rgba(200,162,75,0)}
    100%{box-shadow:0 0 0 0 rgba(200,162,75,0)}
  }
  @media(max-width:900px){ .shot,.shot.alt{flex-direction:column;gap:20px} }

  /* ---------- RULES ambient ---------- */
  #rules{position:relative;z-index:0;overflow:hidden}
  .rules-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .rules-ambient::before{content:"";position:absolute;inset:-12% -6%;filter:blur(12px);
    background:
      radial-gradient(60% 60% at 6% 8%,rgba(143,127,191,.44),transparent 70%),
      radial-gradient(60% 60% at 94% 10%,rgba(127,196,255,.38),transparent 70%),
      radial-gradient(65% 60% at 10% 92%,rgba(127,196,255,.36),transparent 70%),
      radial-gradient(65% 60% at 92% 94%,rgba(143,127,191,.42),transparent 70%);
    animation:rulesDrift 22s ease-in-out infinite}
  @keyframes rulesDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,2%) scale(1.03)}}

  /* ---------- RULES: Star Wars-style crawl ---------- */
  .rules-wrap{padding:150px 0 120px;max-width:900px}
  .crawl-stage{position:relative;height:min(74vh,820px);border-radius:14px;overflow:hidden;
    border:1px solid rgba(143,127,191,.45);
    box-shadow:0 0 70px -10px rgba(143,127,191,.45), 0 0 110px -20px rgba(127,196,255,.35);
    background:radial-gradient(120% 90% at 50% 100%,rgba(110,140,160,.10),transparent 60%),var(--ink);
    perspective:420px}
  .crawl-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:url(../cards/oversoul.webp);background-size:cover;background-position:50% 22%;
    opacity:.36;filter:saturate(1) brightness(.95)}
  .crawl-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,rgba(76,56,145,.55) 0%,transparent 24%,transparent 68%,rgba(40,70,110,.6) 100%),
      linear-gradient(to right,rgba(76,56,145,.3) 0%,transparent 10%,transparent 90%,rgba(40,70,110,.3) 100%)}
  .crawl-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
    padding:70px 40px 50vh;scrollbar-width:none;-ms-overflow-style:none}
  .crawl-scroll::-webkit-scrollbar{display:none}
  .crawl-text{transform:rotateX(22deg);transform-origin:50% 100%;max-width:620px;margin:0 auto;text-align:center}
  .crawl-lede{font-family:"Cinzel";font-style:italic;color:#fff;font-size:clamp(16px,2vw,19px);
    line-height:1.7;margin-bottom:10px;text-shadow:0 0 18px rgba(127,196,255,.4)}
  .crawl-text hr{border:none;border-top:1px solid rgba(224,90,90,.4);width:50%;margin:40px auto}
  .crawl-text h2{font-family:"Cinzel";font-weight:700;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;
    font-size:clamp(19px,2.6vw,26px);margin:10px 0 16px;text-shadow:0 0 16px rgba(200,162,75,.4)}
  .crawl-text h3{font-family:"Cinzel";font-weight:700;color:var(--azure);font-size:clamp(15px,1.8vw,18px);margin:26px 0 8px}
  .crawl-text p{color:#f1eef9;font-size:15px;line-height:1.75;margin:10px 0}
  .crawl-text ul,.crawl-text ol{list-style:none;padding:0;margin:14px 0}
  .crawl-text li{color:#f1eef9;font-size:15px;line-height:1.75;margin:6px 0}
  .crawl-text strong{color:#fff;font-weight:700}
  .crawl-text em{color:var(--azure)}
  .crawl-chain{color:#fff;font-size:14.5px;letter-spacing:.02em}
  .crawl-chain strong{color:var(--ember)}
  .crawl-close{font-family:"Cinzel";font-style:italic;color:var(--gold);font-size:clamp(16px,2vw,19px);margin-top:10px;
    text-shadow:0 0 16px rgba(200,162,75,.4)}
  .crawl-toggle{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:9px;
    padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:rgba(10,12,20,.6);
    backdrop-filter:blur(6px);color:var(--bone-dim);font-family:"Space Grotesk",sans-serif;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
    transition:border-color .25s var(--ease),color .25s var(--ease)}
  .crawl-toggle:hover{color:var(--bone);border-color:var(--gold)}
  .crawl-toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--bone-dim);transition:background .25s var(--ease)}
  .crawl-toggle.is-playing{color:var(--gold);border-color:var(--gold)}
  .crawl-toggle.is-playing .crawl-toggle-dot{background:var(--gold);animation:uePulse 2s ease-out infinite}
  @media (prefers-reduced-motion: reduce){.crawl-toggle{display:none}}
  @media(max-width:900px){
    .crawl-stage{height:70vh;perspective:none}
    .crawl-text{transform:none}
  }