:root{
    --ink:#150f0a;
    --panel:#241a10;
    --panel-2:#2b2013;
    --parchment:#f1decb;
    --parchment-dim:#c7b096;
    --amber:#e3a53d;
    --amber-bright:#ffcf74;
    --ember:#d4531f;
    --moss:#7fa456;
    --steel:#93a8b6;
    --line:#4a3620;
    --line-soft:rgba(227,165,61,.28);
    --font-display: "Arial Black","Segoe UI",system-ui,sans-serif;
    --font-body: Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
    --font-mono: ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--parchment);
    font-family:var(--font-body);
    line-height:1.6;
    position:relative;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px),
      radial-gradient(ellipse at 50% -10%, rgba(227,165,61,.10), transparent 55%),
      radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.55), transparent 60%);
  }

  img{max-width:100%; display:block;}
  .pixel{image-rendering:pixelated; image-rendering:crisp-edges;}

  h1,h2,h3,.eyebrow{font-family:var(--font-display); text-transform:uppercase; text-wrap:balance;}
  h1,h2,h3{
    color:var(--parchment);
    text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 rgba(0,0,0,.35);
    letter-spacing:.01em;
    margin:0;
  }
  h1{font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.02;}
  h2{font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.08;}
  h3{font-size:1.05rem; letter-spacing:.03em;}
  p{margin:0; color:var(--parchment-dim); max-width:64ch;}
  strong{color:var(--parchment); font-weight:700;}

  .eyebrow{
    display:inline-flex; align-items:center; gap:.6em;
    font-size:.72rem; letter-spacing:.22em; color:var(--amber);
    margin:0 0 1.1rem;
  }
  .eyebrow::before{content:"◆"; font-size:.7em; color:var(--ember);}

  .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

  a{color:var(--amber-bright);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--amber-bright); outline-offset:3px;}

  .wrap{max-width:1120px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);}
  section{position:relative; z-index:1; padding:clamp(4.5rem,9vw,8rem) 0;}
  section + section{border-top:1px solid var(--line-soft);}

  /* pixel-chrome panel */
  .pane{
    background:var(--panel);
    border:2px solid var(--line);
    box-shadow:6px 6px 0 rgba(0,0,0,.55);
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
    padding:1.75rem;
  }
  .pane-2{background:var(--panel-2);}

  /* nav rail */
  .rail{
    position:fixed; left:22px; top:50%; transform:translateY(-50%);
    z-index:5; display:flex; flex-direction:column; gap:10px;
  }
  .rail a{
    position:relative; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:var(--panel); border:1px solid var(--line); color:var(--parchment-dim);
    font-family:var(--font-mono); font-size:.68rem; text-decoration:none;
    clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  }
  .rail a.active{color:var(--ink); background:var(--amber); border-color:var(--amber-bright);}
  .rail a.active::after{
    content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed var(--amber-bright);
    animation:spin 6s linear infinite;
  }
  @media (max-width:1023px){ .rail{display:none;} }

  /* selection ring motif */
  .sel-ring{
    position:absolute; border-radius:50%; border:2px dashed var(--amber-bright);
    animation:spin 7s linear infinite; pointer-events:none;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* cover */
  .cover{min-height:100svh; display:flex; align-items:center; padding-top:6rem; padding-bottom:4rem; overflow:hidden;}
  .cover-inner{position:relative; text-align:center; margin:0 auto; max-width:760px;}
  #s-cover .crystal{display:block; width:min(240px,34vw); margin:0 auto .25rem; filter:drop-shadow(0 0 44px rgba(227,165,61,.4));}
  #s-cover .crystal-mobile{display:none;}
  @media (max-width:640px){#s-cover .crystal-desktop{display:none;} #s-cover .crystal-mobile{display:block;}}
  #s-cover .wordmark{width:min(520px,82vw); max-width:520px; margin:1.15rem auto 0; image-rendering:pixelated; image-rendering:crisp-edges;}
  .cover .tagline{margin:1.75rem auto 0; font-size:clamp(1.05rem,2.4vw,1.35rem); color:var(--parchment); max-width:44ch;}
  .cover .meta{
    margin:2.25rem auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
    font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--parchment-dim);
  }
  .cover .meta span{border:1px solid var(--line); padding:.35em .7em; background:var(--panel);}
  #s-cover .scrollcue{
    position:absolute; left:50%; bottom:1.4rem; transform:translate(-50%, 3px);
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em; color:var(--parchment-dim);
    display:flex; flex-direction:column; align-items:center; gap:.35rem;
  }
  .scrollcue .arrow{animation:bob 1.6s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

  /* hook pillars */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem;}
  @media (max-width:820px){.pillars{grid-template-columns:1fr;}}
  .pillar h3{color:var(--amber-bright); margin-bottom:.6rem;}
  .pillar .num{font-family:var(--font-mono); color:var(--ember); font-size:.75rem; display:block; margin-bottom:.5rem;}

  /* snapshot strip */
  .snapshot{
    display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); background:var(--panel);
    font-family:var(--font-mono); font-size:.8rem; overflow:hidden;
  }
  .snapshot div{padding:.9rem 1.2rem; border-right:1px solid var(--line); flex:1 1 auto; white-space:nowrap;}
  .snapshot div:last-child{border-right:none;}
  .snapshot b{color:var(--amber-bright); display:block; font-size:.62rem; letter-spacing:.12em; margin-bottom:.3rem;}
  @media (max-width:820px){.snapshot{flex-direction:column;} .snapshot div{border-right:none; border-bottom:1px solid var(--line);}}

  /* two column layout */
  .split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
  @media (max-width:900px){.split{grid-template-columns:1fr;}}
  .split.rev{grid-template-columns:.95fr 1.05fr;}
  @media (max-width:900px){.split.rev{grid-template-columns:1fr;}}

  .hotkeys{display:flex; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap;}
  .hotkeys span{
    font-family:var(--font-mono); font-size:.8rem; color:var(--ink); background:var(--amber);
    padding:.5em .55em; min-width:2.6em; text-align:center; border:1px solid var(--amber-bright);
  }
  .hotkeys .label{color:var(--parchment-dim); font-family:var(--font-body); align-self:center; font-size:.85rem;}

  .stage{
    position:relative; display:flex; align-items:flex-end; justify-content:center; gap:2.5rem;
    min-height:280px;
  }
  .stage .who{position:relative; text-align:center;}
  .stage .who .sel-ring{width:60px; height:60px; left:50%; bottom:-10px; transform:translateX(-50%);}
  .stage .who span{display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--parchment-dim); margin-top:.6rem;}

  .sprite{background-repeat:no-repeat;}
  .spr-mage-idle{width:288px;height:288px;background-size:1728px 288px;animation:mageIdle 1.2s steps(6) infinite;}
  .spr-warrior-idle{width:288px;height:288px;background-size:1728px 288px;animation:warIdle 1.2s steps(6) infinite; animation-delay:-.35s;}
  @keyframes mageIdle{from{background-position:0 0;}to{background-position:-1728px 0;}}
  @keyframes warIdle{from{background-position:0 0;}to{background-position:-1728px 0;}}

  .spr-roll{width:192px;height:192px;background-size:1344px 192px;animation:rollA .7s steps(7) infinite;}
  @keyframes rollA{from{background-position:0 0;}to{background-position:-1344px 0;}}
  .spr-dash{width:192px;height:192px;background-size:768px 192px;animation:dashA .5s steps(4) infinite;}
  @keyframes dashA{from{background-position:0 0;}to{background-position:-768px 0;}}
  .spr-blink{width:192px;height:224px;background-size:1152px 224px;animation:blinkA .6s steps(6) infinite;}
  @keyframes blinkA{from{background-position:0 0;}to{background-position:-1152px 0;}}
  .spr-st-off{width:192px;height:192px;background-size:1152px 192px;animation:stOff 1.1s steps(6) infinite;}
  @keyframes stOff{from{background-position:0 0;}to{background-position:-1152px 0;}}
  .spr-st-def{width:192px;height:192px;background-size:1152px 192px;animation:stDef 1.1s steps(6) infinite;}
  @keyframes stDef{from{background-position:0 0;}to{background-position:-1152px 0;}}
  .spr-st-foc{width:192px;height:192px;background-size:3072px 192px;animation:stFoc 1.8s steps(16) infinite;}
  @keyframes stFoc{from{background-position:0 0;}to{background-position:-3072px 0;}}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .sprite, .sel-ring, .scrollcue .arrow{animation-play-state:paused !important; animation:none !important;}
  }

  /* clash diagram */
  .clash-diagram{position:relative; height:180px; display:flex; align-items:center; justify-content:center; gap:0;}
  .orb{border-radius:50%; box-shadow:0 0 22px currentColor;}
  .orb.a{width:58px;height:58px; background:var(--amber); color:var(--amber); animation:orbA 2.6s ease-in-out infinite;}
  .orb.b{width:42px;height:42px; background:var(--ember); color:var(--ember); animation:orbB 2.6s ease-in-out infinite;}
  @keyframes orbA{0%,100%{transform:translateX(-64px);}45%,55%{transform:translateX(6px);}}
  @keyframes orbB{0%,100%{transform:translateX(64px);}45%,55%{transform:translateX(-6px);}}
  .burst{position:absolute; font-family:var(--font-mono); font-size:1.6rem; color:var(--amber-bright); opacity:0; animation:burstA 2.6s ease-in-out infinite;}
  @keyframes burstA{0%,40%,60%,100%{opacity:0; transform:scale(.4);}50%{opacity:1; transform:scale(1.3);}}
  @media (prefers-reduced-motion:reduce){.orb,.burst{animation:none !important;}}
  .clash-legend{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2rem;}
  @media (max-width:700px){.clash-legend{grid-template-columns:1fr;}}
  .clash-legend .pane{padding:1.1rem 1.3rem;}
  .clash-legend b{color:var(--amber-bright); display:block; font-size:.72rem; letter-spacing:.1em; margin-bottom:.4rem;}

  /* stat rows */
  .statrow{display:grid; grid-template-columns:auto 9rem 1fr auto; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line-soft);}
  .statrow:last-child{border-bottom:none;}
  .statrow img.icon{width:34px;height:34px;}
  .statrow .name{font-family:var(--font-display); font-size:.85rem; letter-spacing:.03em;}
  .statrow .name small{display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--parchment-dim); font-size:.8rem; font-style:italic;}
  .statrow .bars{position:relative; height:22px; display:flex; align-items:center;}
  .statrow .bars img{position:absolute; height:20px; width:auto;}
  .statrow .btns{display:flex; gap:.4rem;}
  .statrow .btns img{width:22px;height:22px;}
  @media (max-width:700px){.statrow{grid-template-columns:auto 1fr; row-gap:.4rem;} .statrow .bars,.statrow .btns{grid-column:2;}}

  .quotebox{margin-top:1.75rem; border-left:3px solid var(--amber); padding-left:1.1rem;}
  .quotebox p{font-style:italic; color:var(--parchment);}
  .quotebox .who{margin-top:.5rem; font-family:var(--font-mono); font-size:.7rem; color:var(--parchment-dim); letter-spacing:.05em;}

  /* skill bar mock */
  .skillbar-mock{display:flex; flex-direction:column; gap:.9rem;}
  .skillbar-row{display:flex; align-items:center; gap:.75rem;}
  .skillbar-row img.class{width:30px;height:30px;}
  .slots{display:grid; grid-template-columns:repeat(12,1fr); gap:5px; flex:1;}
  .slot{
    aspect-ratio:1; border:1px solid var(--line); background:var(--panel-2);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
    font-size:.62rem; color:var(--parchment-dim);
  }
  @media (max-width:640px){.slots{grid-template-columns:repeat(6,1fr); row-gap:5px;}}
  .chip{display:inline-block; margin-top:1.5rem; font-family:var(--font-mono); font-size:.78rem; color:var(--ink); background:var(--amber); padding:.5em 1em;}

  /* trio grid (dash / stances) */
  .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.25rem;}
  @media (max-width:820px){.trio{grid-template-columns:1fr;}}
  .trio .card{text-align:center;}
  .trio .stagebox{display:flex; align-items:center; justify-content:center; min-height:210px;}
  .trio h3{margin-top:1rem; color:var(--amber-bright);}
  .trio p{margin-top:.5rem; font-size:.92rem;}
  .delta{font-family:var(--font-mono); font-size:.8rem;}
  .delta.neg{color:var(--ember);} .delta.pos{color:var(--moss);}

  /* elements */
  .elem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.25rem;}
  @media (max-width:820px){.elem-grid{grid-template-columns:1fr 1fr;}}
  .elem-grid .pane{text-align:center;}
  .elem-grid img.big{width:76px; height:76px; margin:0 auto .9rem;}
  .elem-grid h3{color:var(--amber-bright);}
  .elem-grid p{font-size:.86rem; margin-top:.5rem;}
  .elem-strip{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.25rem; align-items:center;}
  .elem-strip img{width:40px;height:40px;}
  .elem-strip .cap{font-family:var(--font-mono); font-size:.75rem; color:var(--parchment-dim); margin-left:.5rem;}

  /* ui hud */
  .hud-list{list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem;}
  .hud-list li{padding-left:1.4rem; position:relative;}
  .hud-list li::before{content:"▸"; position:absolute; left:0; color:var(--amber);}
  .hud-list b{color:var(--parchment); display:block;}
  .weapon-row{display:flex; gap:1.5rem; margin-top:1.75rem; flex-wrap:wrap;}
  .weapon-row .pane{display:flex; align-items:center; gap:.9rem; padding:.9rem 1.2rem;}
  .weapon-row img{width:40px;height:40px;}
  .weapon-row span{font-family:var(--font-mono); font-size:.78rem;}

  /* scope cards */
  .scope-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.25rem;}
  @media (max-width:900px){.scope-grid{grid-template-columns:1fr;}}
  .scope-grid .tag{font-family:var(--font-mono); font-size:.68rem; color:var(--ink); background:var(--amber); display:inline-block; padding:.3em .7em; margin-bottom:.8rem;}
  .scope-grid h3{color:var(--parchment);}
  .scope-grid p{margin-top:.6rem; font-size:.9rem;}
  .prog-note{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-soft);}

  /* gtm */
  .gtm-progress{display:flex; align-items:center; gap:1rem; margin-top:1.5rem; font-family:var(--font-mono); font-size:.85rem;}
  .gtm-bar{flex:1; height:10px; background:var(--panel-2); border:1px solid var(--line); position:relative;}
  .gtm-bar i{position:absolute; inset:0; width:25%; background:var(--amber); display:block;}
  .mascot-row{display:flex; gap:1rem; align-items:flex-end; margin-top:2.25rem; flex-wrap:wrap;}
  .mascot-row img{width:96px;height:96px;}
  #s-gtm .mascot-row img:nth-of-type(4){transform:translateY(-18px);}
  .mascot-row .cap{width:100%; font-family:var(--font-mono); font-size:.72rem; color:var(--parchment-dim); margin-top:.6rem;}

  /* ask / placeholder styling */
  .placeholder{
    border:2px dashed var(--amber); background:transparent;
    box-shadow:none; padding:1.75rem;
  }
  .placeholder .flag{
    display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.72rem;
    color:var(--ink); background:var(--amber-bright); padding:.35em .7em; margin-bottom:1.25rem; letter-spacing:.06em;
  }
  .ask-field{display:flex; gap:.75rem; padding:.7rem 0; border-bottom:1px dashed var(--line); align-items:baseline; flex-wrap:wrap;}
  .ask-field .k{font-family:var(--font-mono); font-size:.78rem; color:var(--parchment-dim); min-width:11rem;}
  .ask-field .v{flex:1; border-bottom:1px dashed var(--steel); color:var(--parchment-dim); font-style:italic; min-width:10rem;}
  .placeholder .note{margin-top:1.4rem; font-size:.82rem; font-style:italic;}

  /* closing */
  .closing{text-align:center;}
  .closing .wordmark{width:min(900px,92vw); margin:0 auto 1.4rem;}
  .status-chip{display:inline-block; font-family:var(--font-mono); font-size:.75rem; color:var(--ink); background:var(--moss); padding:.4em .9em; margin-top:1rem;}
  footer{padding:3rem 0 4rem; text-align:center;}
  footer p{margin:0 auto; font-size:.75rem; color:var(--parchment-dim); font-family:var(--font-mono);}

  .center{text-align:center; margin:0 auto;}

  /* ---- v2 additions ---- */
  /* 01 dual: character stance gifs */
  .duo-gif{width:min(240px,36vw); height:auto;}

  /* 02 clash: fireball collision */
  #s-clash .clash-stage{position:relative; height:320px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
  #s-clash .skillshot-collision-demo{
    width:min(960px,100%); height:auto;
    image-rendering:pixelated; image-rendering:crisp-edges;
    filter:drop-shadow(0 0 18px rgba(227,165,61,.35));
  }

  /* 03 stats: interactive allocator + output panel */
  .statlab{display:grid; grid-template-columns:1.12fr 48px .88fr; align-items:stretch;}
  .statlink{display:flex; flex-direction:column; justify-content:center; gap:9px;}
  .statlink i{display:block; height:0; border-top:2px dashed var(--amber); opacity:.75;}
  @media (max-width:900px){
    .statlab{grid-template-columns:1fr;}
    .statlink{height:44px; flex-direction:row; justify-content:center; gap:12px; align-items:stretch;}
    .statlink i{height:auto; width:0; border-top:none; border-left:2px dashed var(--amber);}
  }
  .alloc-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.5rem; flex-wrap:wrap;}
  .alloc-head h3{color:var(--amber-bright);}
  .budget{font-size:.7rem; color:var(--parchment-dim); letter-spacing:.08em;}
  .budget b{color:var(--amber-bright); font-size:1rem;}
  .alloc-row{display:grid; grid-template-columns:38px minmax(7rem,1fr) auto auto; align-items:center; gap:.9rem; padding:.8rem 0; border-bottom:1px solid var(--line-soft);}
  .alloc-row img.icon{width:34px; height:34px;}
  .alloc-row .name{font-family:var(--font-display); font-size:.85rem; letter-spacing:.03em;}
  .alloc-row .name small{display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--parchment-dim); font-size:.78rem; font-style:italic;}
  .ubar{position:relative; width:192px; height:32px;}
  .ubar-frame{position:absolute; inset:0; width:192px; height:32px;}
  .ubar-clip{position:absolute; left:14px; top:10px; height:14px; width:0; overflow:hidden; transition:width .18s steps(6);}
  .ubar-clip img{width:166px; height:14px; max-width:none; display:block;}
  .ctrl{display:flex; align-items:center; gap:.55rem;}
  .ctrl .val{min-width:1.7em; text-align:center; font-weight:800; font-size:1.05rem; color:var(--amber-bright);}
  .ubtn{width:40px; height:40px; border:0; padding:0; cursor:pointer; background:transparent center/contain no-repeat; image-rendering:pixelated;}
  .ubtn.plus{background-image:url("../images/image-002.png");}
  .ubtn.plus:active{background-image:url("../images/image-003.png");}
  .ubtn.minus{background-image:url("../images/image-004.png");}
  .ubtn.minus:active{background-image:url("../images/image-005.png");}
  .ubtn:disabled{opacity:.35; cursor:default; filter:grayscale(.7);}
  .alloc-note{margin-top:1.1rem; font-size:.7rem; font-family:var(--font-mono); color:var(--parchment-dim);}
  @media (max-width:700px){
    .alloc-row{grid-template-columns:38px 1fr;}
    .alloc-row .ubar, .alloc-row .ctrl{grid-column:1 / -1;}
  }
  .outpanel .outhead{font-family:var(--font-display); text-transform:uppercase; color:var(--amber); letter-spacing:.14em; font-size:.8rem; margin-bottom:.9rem;}
  .outrow{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--line-soft);}
  .outrow:last-child{border-bottom:none;}
  .outrow .k{font-family:var(--font-display); text-transform:uppercase; font-size:.7rem; letter-spacing:.06em; color:var(--parchment);}
  .outrow .o{font-family:var(--font-mono); font-weight:800; color:var(--amber-bright); font-variant-numeric:tabular-nums;}
  .outrow .o.bump{animation:bumpA .35s ease;}
  @keyframes bumpA{0%{transform:scale(1.28); color:#fff;} 100%{transform:scale(1);}}

  /* 05 mobility: gifs */
  .mob-gif{height:200px; width:auto;}

  /* ---- v3 additions: element panels ---- */
  .elem-status{font-size:.82rem; margin:.5rem auto 0; color:var(--parchment);}
  .elem-status strong{color:var(--amber-bright);}
  .elem-status.elem-none{font-style:italic; color:var(--parchment-dim);}
  .elem-count{display:inline-block; margin-top:.85rem; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.04em; white-space:nowrap; color:var(--amber); border:1px solid var(--line); background:var(--panel-2); padding:.3em .55em;}
  .elem-foot{margin-top:1.75rem; font-size:.72rem; color:var(--parchment-dim);}
  /* ---- v4 additions: weapon emblems + discord ---- */
  .wpn-emblems{display:flex; flex-direction:column; gap:1.5rem;}
  .wpn-card{text-align:center; padding:2rem 1.5rem;}
  .wpn-card img{width:128px; height:128px; margin:0 auto .9rem;}
  .wpn-card h3{color:var(--amber-bright);}
  .wpn-card .cap{display:block; margin-top:.5rem; font-family:var(--font-mono); font-size:.72rem; color:var(--parchment-dim);}
  @media (max-width:900px){.wpn-emblems{flex-direction:row;} .wpn-emblems .wpn-card{flex:1;}}
  @media (max-width:640px){.wpn-emblems{flex-direction:column;}}
  .discord-cta{display:inline-flex; flex-direction:column; align-items:center; gap:.85rem; margin-top:2.5rem; text-decoration:none;}
  .discord-cta .discord-icon{width:64px; height:auto; color:#5865F2; filter:drop-shadow(0 0 16px rgba(88,101,242,.45));}
  .discord-cta span{font-family:var(--font-mono); font-size:.88rem; color:var(--amber-bright); border-bottom:1px dashed var(--line-soft); padding-bottom:2px;}
  .discord-cta:hover span{color:#fff; border-color:var(--amber-bright);}

#s-closing {
  min-height: 0;
  height: auto;
  padding: 42px 0 48px;
  border-top: 1px solid rgba(214, 154, 58, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 154, 58, 0.07), transparent 42%),
    rgba(13, 10, 7, 0.42);
}

#s-closing .closing-redesign {
  width: min(520px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#s-closing .closing-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#s-closing .closing-logo-crop {
  width: min(330px, 100%);
  aspect-ratio: 301 / 175;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#s-closing .closing-logo-crop .wordmark {
  width: calc(100% * 640 / 301);
  max-width: none;
  height: auto;
  margin: 0;
  position: absolute;
  left: calc(-100% * 168 / 301);
  top: calc(-100% * 73 / 175);
}

#s-closing .closing-tagline {
  max-width: 430px;
  margin: 14px auto 0;
  color: rgba(233, 213, 181, 0.9);
  font-size: 13px;
  line-height: 1.45;
}

#s-closing .closing-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#s-closing .closing-status {
  min-height: 30px;
  min-width: 170px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
}

#s-closing .discord-cta {
  margin: 0;
  min-width: 220px;
  min-height: 46px;
  padding: 8px 14px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(246, 181, 65, 0.35);
  background: rgba(20, 16, 12, 0.62);
  text-decoration: none;
}

#s-closing .discord-cta .discord-icon {
  width: 34px;
  height: 28px;
  max-width: 34px;
  max-height: 28px;
  flex: 0 0 34px;
  color: #5865f2;
  display: block;
}

#s-closing .discord-cta span {
  color: #f6b541;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#s-closing .discord-cta:hover {
  border-color: rgba(246, 181, 65, 0.7);
  background: rgba(246, 181, 65, 0.08);
}

#s-closing .closing-meta {
  margin: 28px 0 0;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(224, 198, 158, 0.62);
}

@media (max-width: 640px) {
  #s-closing {
    padding: 34px 18px 42px;
  }

  #s-closing .closing-logo-crop {
    width: min(280px, 100%);
  }

  #s-closing .closing-tagline {
    font-size: 12px;
  }
}