/* ============================ THEME TOKENS ============================
   Repaint the campaign here: the :root vars below + the display font in the
   Google Fonts <link>. Everything else derives from these.
   ====================================================================== */
/* CHAMPION SELECT — the game client's select screen, from memory, without
     the marks: abyss navy ground, gold as hairlines and corner brackets
     rather than fills, teal only for the thing that is ON (locked in, ready,
     collected). Cinzel capitals name champions, Barlow Condensed does the
     HUD, Barlow to read. Motions: the roll reel, the gold bar while locking
     in, the LOCKED IN stamp, the ticker — all gated on prefers-reduced-motion.
     The variable NAMES are valorant's (the shared layout below reads them);
     the VALUES are hextech: --red is the gold action colour, --cyan the teal,
     --sand pale gold. Aliases keep the shared surfaces' names: --navy/--green
     skin the activity menu. */
  :root{
    --ink:#0B1B33; --ink2:#050E1C; --steel:#0F2340; --steel2:#16305A; --line:rgba(201,169,97,.28);
    --bone:#F0E6D2; --mute:rgba(240,230,210,.7); --faint:rgba(240,230,210,.45);
    --red:#C9A961; --red2:#8D6F35; --cyan:#0AC8B9; --sand:#F1D8A0; --sand2:#C9A961;
    --gold:#C9A961; --gold2:#F1D8A0; --teal:#0AC8B9; --blue:#3C8BFF;
    --white:#FFFFFF;
    /* aliases the shared activity-menu skins itself from */
    --navy:#0B1B33; --green:#C9A961;
    --display:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif; --hud:"Barlow Condensed","Arial Narrow",system-ui,sans-serif; --sans:"Barlow","Helvetica Neue",Arial,system-ui,sans-serif;
    --chamfer:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    --chamfer-s:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
    color-scheme:dark;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-family:var(--sans);background:var(--ink2);color:var(--bone);display:flex;justify-content:center;-webkit-font-smoothing:antialiased}
  .h5{position:relative;width:min(460px,100vw);background:var(--ink);overflow:visible;min-height:100vh}
  img{max-width:100%}
  button{font:inherit;color:inherit}

  /* ---------- preloader: the agent-select countdown ---------- */
  .preloader{position:fixed;inset:0;background:var(--ink);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:transform .85s cubic-bezier(.76,0,.24,1)}
  .preloader.done{transform:translateY(-100%)}
  .pl-lockup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 14px;max-width:100%}
  .pl-logo{height:clamp(34px,10vw,58px);width:auto;display:block;opacity:0;animation:plUp .6s cubic-bezier(.2,.8,.2,1) .05s forwards}
  .pl-x{font-family:var(--hud);font-weight:600;font-size:clamp(16px,4.5vw,28px);line-height:1;color:var(--bone);opacity:.45;animation:plxin .5s ease .16s both}
  @keyframes plUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes plxin{from{opacity:0;transform:translateY(10px)}to{opacity:.45;transform:none}}
  .pl-mark{font-family:var(--display);font-weight:900;color:var(--bone);font-size:clamp(34px,12vw,72px);letter-spacing:.02em;line-height:1.1;white-space:nowrap;
    clip-path:inset(0 100% 0 0);animation:plReveal 1.2s cubic-bezier(.76,0,.24,1) .15s forwards}
  @keyframes plReveal{to{clip-path:inset(0 0 0 0)}}
  @media (min-width:640px){ .pl-lockup{flex-direction:row;gap:18px} }
  .pl-count{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:var(--hud);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);font-size:15px}
  .pl-count .pl-word{color:var(--red)}
  .pl-bar{position:absolute;bottom:0;left:0;height:5px;width:0;background:var(--red)}

  /* reveal */
  .rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

  /* ---------- top bar ---------- */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
  .logo-img{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
  .tb-right{display:flex;align-items:center;gap:9px}
  .tb-link{font-family:var(--hud);font-weight:700;font-size:13px;letter-spacing:.14em;line-height:1;text-transform:uppercase;
    color:var(--ink);text-decoration:none;background:var(--bone);padding:8px 12px 6px;clip-path:var(--chamfer-s)}
  .tb-link:hover{background:var(--white)}
  .tb-link:active{transform:translateY(1px)}
  .tb-link[hidden]{display:none}

  /* ---------- hero: an example agent on the select screen ---------- */
  .hero{position:relative;height:84vh;height:84svh;min-height:600px;max-height:820px;overflow:hidden;background:var(--steel)}
  .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
  .heroimg.alt{opacity:0;transition:opacity 1.1s ease}
  .heroimg.alt.on{opacity:1}
  .hero .brk{position:absolute;inset:14px;z-index:4;pointer-events:none;border:1px solid rgba(201,169,97,.35)}
  .hero .brk i{position:absolute;width:26px;height:26px;border:2px solid var(--gold)}
  .hero .brk i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0}
  .hero .brk i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0}
  .hero .brk i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0}
  .hero .brk i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0}
  .hero .scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(5,14,28,.5) 0%,transparent 26%,transparent 46%,rgba(5,14,28,.55) 74%,var(--ink) 100%)}
  .hero .content{position:absolute;left:0;right:0;bottom:30px;padding:0 22px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .eyebrow{font-family:var(--hud);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);background:var(--ink);padding:5px 8px 3px;border-left:3px solid var(--red)}
  .hashtag{font-family:var(--display);font-weight:900;background:linear-gradient(180deg,#F8E7B8 0%,#C9A961 60%,#8D6F35 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-size:clamp(46px,calc((min(100vw,460px) - 44px) / 6.2),78px);line-height:.95;letter-spacing:.01em;margin:2px 0 0;color:var(--bone);text-transform:uppercase}
  .tagline{font-family:var(--hud);font-weight:700;font-size:clamp(16px,4.8vw,22px);letter-spacing:.04em;line-height:1.1;text-transform:uppercase;color:var(--bone);background:var(--ink);padding:7px 10px 5px;max-width:100%;margin-bottom:6px}
  .heroup{opacity:0;transform:translateY(26px)}
  body.ready.go .heroup{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
  body.ready.go .heroup.a2{animation-delay:.16s}
  body.ready.go .heroup.a3{animation-delay:.32s}
  body.ready.go .heroup.a4{animation-delay:.48s}
  @keyframes up{to{opacity:1;transform:none}}
  body.skip-intro .heroup{animation:none;opacity:1;transform:none}

  /* ---------- buttons ---------- */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:1px solid var(--gold2);text-decoration:none;
    font-family:var(--hud);font-weight:700;letter-spacing:.2em;font-size:19px;line-height:1;text-transform:uppercase;background:linear-gradient(180deg,#F1D8A0,#C9A961);color:var(--ink2);
    padding:15px 26px 13px;clip-path:var(--chamfer);transition:transform .12s ease,background .15s ease}
  .btn:hover{background:linear-gradient(180deg,#F8E7B8,#D9BC78)}
  .btn:active{transform:translateY(2px)}
  .btn.full{width:100%;font-size:22px;padding:18px 16px 16px}
  .btn.ghost{background:transparent;color:var(--gold2);border-color:var(--line)}
  .btn.ghost:hover{background:#1D3B6A}
  .btn.cyan{background:var(--cyan)}
  .btn.cyan:hover{background:#3FE3D6}
  .btn.kicked{animation:btnpop .42s ease}
  .btn[disabled]{border-color:var(--line);background:var(--steel2);color:var(--mute);cursor:default;transform:none}
  .btn.is-locked{background:var(--steel2);color:var(--mute);transform:none}
  .btn.is-locked:hover{background:var(--steel2);color:var(--bone)}
  @keyframes btnpop{0%{transform:scale(.94)}45%{transform:scale(1.04)}100%{transform:scale(1)}}

  /* ---------- ticker ---------- */
  .ticker{background:var(--ink2);color:var(--bone);font-family:var(--hud);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    font-size:13px;padding:9px 0;overflow:hidden;white-space:nowrap;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
  .ticker span{display:inline-block;padding-left:100%;animation:slide 18s linear infinite}
  .ticker span i{font-style:normal;margin:0 7px;color:var(--red)}
  @keyframes slide{to{transform:translateX(-100%)}}

  /* ---------- sections ---------- */
  section{padding:46px 22px}
  .sec-eyebrow{font-family:var(--hud);font-weight:600;letter-spacing:.18em;font-size:13px;text-transform:uppercase;color:var(--red)}
  h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,7.6vw,38px);letter-spacing:.01em;line-height:1;margin:6px 0 14px;color:var(--bone);text-transform:uppercase;text-wrap:balance}
  h2 i{font-style:normal;color:var(--gold2)}
  .lead{font-size:15px;line-height:1.5;color:var(--mute)}
  .lead b{color:var(--bone);font-weight:600}

  /* social proof */
  .proof{display:flex;align-items:center;gap:14px;background:var(--steel);padding:16px 18px;margin-top:-8px;border-left:3px solid var(--red)}
  .proof .num{font-family:var(--hud);font-weight:700;font-size:44px;color:var(--red);line-height:.9}
  .proof .lbl{font-size:13px;color:var(--mute);font-weight:600}
  .avs{display:flex;margin-left:auto}
  .avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--steel);margin-left:-10px;object-fit:cover;background:var(--steel)}

  /* steps */
  .steps{display:flex;flex-direction:column;gap:10px}
  .step{display:flex;gap:14px;align-items:flex-start;background:var(--steel);padding:16px}
  .step .n{flex:0 0 auto;width:38px;height:38px;background:transparent;border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px;color:var(--gold2);padding-top:2px}
  .step:nth-child(3) .n{border-color:var(--teal);color:var(--teal)}
  .step h3{font-family:var(--hud);font-weight:700;letter-spacing:.06em;font-size:18px;text-transform:uppercase;margin-bottom:2px;color:var(--bone)}
  .step p{font-size:13.5px;color:var(--mute);line-height:1.45}

  /* pattern divider */
  .divider{height:120px;overflow:hidden;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .divider img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .divider b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:700;color:var(--gold2)!important;border:1px solid var(--line);font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);background:var(--ink);padding:6px 16px 4px;white-space:nowrap}

  /* ---------- THE INTERACTION BLOCK: THE MACHINE ---------- */
  #block[hidden],#more[hidden]{display:none}
  #block{background:radial-gradient(90% 40% at 50% 0,rgba(10,200,185,.10),transparent 70%),var(--steel);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
  #block .btn.full.wall{margin-top:22px}
  #blockRoot{min-height:120px}
  .lk{display:flex;flex-direction:column;gap:12px}
  .lk-arrived{font-size:14px;font-weight:600;background:var(--ink);color:var(--bone);padding:10px 14px;border-left:4px solid var(--red)}
  .lk-arrived[hidden]{display:none}
  /* the frame: the example agents → your photo → painting → the card */
  .lk-frame{position:relative;aspect-ratio:3/4;width:100%;max-width:100%;background:var(--ink2);overflow:hidden;border:1px solid var(--line);clip-path:var(--chamfer)}
  .lk-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 40%,rgba(10,200,185,.18),transparent 70%);z-index:0}
  .lk-frame .art{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
  .lk-frame .art[hidden]{display:none}
  .lk-frame .ini{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(135deg,var(--steel) 0 10px,var(--steel2) 10px 12px)}
  .lk-frame .ini[hidden]{display:none}
  .lk-frame .ini b{font-family:var(--display);font-weight:400;font-size:64px;color:var(--bone);opacity:.35}
  .lk-tag{position:absolute;z-index:2;top:12px;left:12px;background:var(--ink);color:var(--bone);padding:4px 9px 3px;font-family:var(--hud);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-left:3px solid var(--role,var(--red))}
  .lk-ex{position:absolute;z-index:2;top:12px;right:12px;background:rgba(5,14,28,.85);color:var(--sand);padding:4px 8px 3px;font-family:var(--hud);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .lk-ex.left{right:auto;left:12px}
  .lk-tag[hidden],.lk-ex[hidden],.lk-plate[hidden],.lk-stamp[hidden],.lk-gen[hidden]{display:none}
  .lk-face{position:absolute;z-index:3;right:14px;bottom:14px;width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 40%;border:3px solid var(--bone);box-shadow:0 4px 14px rgba(0,0,0,.45);background:var(--ink2)}
  .lk-face[hidden]{display:none}
  .lk-frame.has-face .lk-plate{padding-right:100px}
  .lk-plate{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:54px 14px 14px;background:linear-gradient(transparent,rgba(5,14,28,.94) 55%)}
  .lk-plate b{display:block;font-family:var(--display);font-weight:700;color:var(--gold2)!important;font-size:30px;line-height:1;text-transform:uppercase;color:var(--bone);overflow-wrap:anywhere}
  .lk-plate span{display:block;margin-top:5px;font-family:var(--hud);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--mute)}
  .lk-plate span i{font-style:normal;color:var(--red);margin:0 .3em}
  .lk-stamp{position:absolute;z-index:3;right:-6px;top:22px;transform:rotate(8deg);font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border:2px solid var(--teal);box-shadow:0 0 18px rgba(10,200,185,.5);padding:2px 10px 0;background:rgba(5,14,28,.7)}
  .lk-stamp.slam{animation:slam .42s cubic-bezier(.2,1.6,.4,1)}
  @keyframes slam{0%{transform:rotate(8deg) scale(2.2);opacity:0}100%{transform:rotate(8deg) scale(1);opacity:1}}
  /* the wait: the shard sweeps, the bar eases to its ceiling */
  .lk-gen{position:absolute;inset:0;z-index:4;background:rgba(5,14,28,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;overflow:hidden}
  .lk-gen .shard{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(201,169,97,.25) 46%,rgba(241,216,160,.45) 50%,rgba(201,169,97,.25) 54%,transparent 60%);transform:translateX(-120%);animation:sweep 1.6s cubic-bezier(.7,0,.2,1) infinite}
  @keyframes sweep{to{transform:translateX(120%)}}
  .lk-gen .k{position:relative;font-family:var(--hud);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--mute)}
  .lk-gen .w{position:relative;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.08em;color:var(--gold2)!important;text-transform:uppercase;color:var(--bone)}
  .lk-gen .lb{position:relative;width:70%;height:4px;background:var(--steel2);overflow:hidden}
  .lk-gen .lb i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .5s linear}
  .lk-dots{display:flex;gap:6px;justify-content:center}
  .lk-dots[hidden]{display:none}
  .lk-dots button{width:26px;height:4px;background:var(--steel2);border:0;cursor:pointer;padding:0}
  .lk-dots button[aria-pressed="true"]{background:var(--sand)}
  /* the photo drop */
  .lk-drop{position:relative;display:flex;align-items:center;gap:12px;border:2px dashed rgba(240,230,210,.45);padding:14px 16px;cursor:pointer;background:var(--ink)}
  .lk-drop[hidden]{display:none}
  .lk-drop.has{border-style:solid;border-color:var(--sand2)}
  .lk-drop.nudge{border-color:var(--red)}
  .lk-drop img{width:52px;aspect-ratio:3/4;object-fit:cover;display:block;flex:0 0 auto}
  .lk-drop img[hidden]{display:none}
  .lk-drop b{display:block;font-family:var(--hud);font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
  .lk-drop span span{display:block;font-size:12.5px;color:var(--mute)}
  .lk-left[hidden]{display:none}
  .lk-left{font-family:var(--hud);font-weight:600;font-size:16px;letter-spacing:.06em;line-height:1.25;color:var(--bone);text-align:center;min-height:20px}
  .lk-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}
  .lk-row[hidden]{display:none}
  .lk-row .btn{font-size:17px;padding:14px 8px 12px}
  .lk-again[hidden],.lk-go[hidden]{display:none}
  /* the ask once the plays are gone; the unlock once the contract completes */
  .lk-inv,.lk-next{display:flex;flex-direction:column;gap:8px;text-align:center;background:var(--ink);padding:20px 16px 16px}
  .lk-inv{border:2px solid var(--sand)}
  .lk-next{border:2px solid var(--cyan)}
  .lk-inv[hidden],.lk-next[hidden]{display:none}
  .lk-inv b,.lk-next b{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1;text-transform:uppercase}
  .lk-inv b{color:var(--sand)}
  .lk-next b{color:var(--cyan)}
  .lk-inv p{font-size:14px;line-height:1.45;color:var(--bone);opacity:.85}
  .lk-inv .btn.full,.lk-next .btn.full{margin-top:6px}
  .lk-inv-foot{font-family:var(--hud);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
  /* the contract: the save file under the machine */
  .lk-ct{margin-top:8px;border-top:1px solid var(--line);padding-top:14px}
  .lk-ct-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
  .lk-ct-head span:last-child{font-family:var(--hud);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right}
  .lk-ct-head span:last-child b{color:var(--sand);font-weight:700}
  .lk-ct.ready .lk-ct-head span:last-child b{color:var(--cyan)}
  .track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.6fr);gap:6px;align-items:stretch}
  .tier{position:relative;background:var(--ink);border:1px solid var(--steel2);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;clip-path:var(--chamfer-s)}
  .tier .ico{width:30px;height:30px;display:grid;place-items:center;background:var(--ink2);border:1px solid var(--line);font-family:var(--display);font-size:15px;color:var(--mute)}
  .tier .lab{font-family:var(--hud);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10px;color:var(--mute);line-height:1.1;overflow-wrap:anywhere}
  .tier.done{border-color:var(--sand2)}
  .tier.done .ico{background:var(--sand);color:var(--ink);border-color:var(--sand)}
  .tier.done .lab{color:var(--sand)}
  .tier.next{border-color:var(--red)}
  .tier.next .ico{border-color:var(--red);color:var(--red)}
  .tier.final{padding:0;overflow:hidden;background:var(--ink2);min-height:84px}
  .tier.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1) brightness(.45);display:block}
  .tier.final .ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--steel) 0 8px,var(--steel2) 8px 9px)}
  .tier.final .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;background:linear-gradient(rgba(5,14,28,.2),rgba(5,14,28,.85))}
  .tier.final .lock{width:30px;height:30px;display:grid;place-items:center;background:rgba(5,14,28,.85);border:1px solid var(--line);color:var(--bone)}
  .tier.final .lock svg{width:14px;height:14px}
  .tier.final .lab{color:var(--bone)}
  .tier.final.ready{border-color:var(--cyan)}
  .tier.final.ready img{filter:none}
  .tier.final.ready .lock{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
  .tier.final.ready .lab{color:var(--cyan)}
  .progress{display:flex;align-items:center;gap:12px;margin-top:10px}
  .progress .pb{flex:1;height:5px;background:var(--steel2);position:relative;overflow:hidden}
  .progress .pb i{position:absolute;left:0;top:0;bottom:0;background:var(--sand);transition:width .4s}
  .lk-ct.ready .progress .pb i{background:var(--cyan)}
  .progress span{font-family:var(--hud);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--bone)}
  .progress span i{font-style:normal;color:var(--red);margin:0 .3em}
  /* the invite strip */
  .quota{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;border:2px dashed rgba(240,230,210,.45);padding:8px 8px 8px 12px}
  .quota[hidden]{display:none}
  .quota span{font-size:14px;font-weight:500;color:var(--bone)}
  .quota .qb{appearance:none;border:0;cursor:pointer;font-family:var(--hud);font-weight:700;font-size:13px;letter-spacing:.1em;background:var(--bone);color:var(--ink);padding:8px 11px 6px;text-transform:uppercase;white-space:nowrap}
  .quota .qb:active{transform:translateY(1px)}

  /* ---------- the roster row (block.js) ---------- */
  .ms-search{display:block;position:relative;margin:2px 0 12px}
  .ms-search::before{content:"";position:absolute;left:14px;top:50%;width:11px;height:11px;margin-top:-8px;border:2px solid var(--mute);border-radius:50%;pointer-events:none;z-index:1}
  .ms-search::after{content:"";position:absolute;left:25px;top:50%;width:2px;height:7px;margin-top:2px;background:var(--mute);transform:rotate(-45deg);pointer-events:none;z-index:1}
  .ms-search input{width:100%;box-sizing:border-box;height:46px;padding:0 14px 0 42px;background:var(--ink2);border:1px solid var(--line);border-radius:0;color:var(--bone);font-family:var(--hud);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;outline:none;-webkit-appearance:none;appearance:none;clip-path:var(--chamfer)}
  .ms-search input::placeholder{color:var(--mute);opacity:1}
  .ms-search input:focus{border-color:var(--cyan)}
  .ms-card[hidden]{display:none}
  .ms-none{margin:0 0 12px;color:var(--mute);font-size:14px}
  .ms-none[hidden]{display:none}
  .rosterwrap{position:relative}
  .ms-row{display:flex;gap:10px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .ms-row::-webkit-scrollbar{display:none}
  .ms-row.drift{scroll-snap-type:none}
  .ms-card{flex:0 0 132px;display:flex;flex-direction:column;gap:6px;color:var(--bone);min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;scroll-snap-align:start}
  .ms-art{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:repeating-linear-gradient(135deg,var(--steel) 0 8px,var(--steel2) 8px 9px)}
  .ms-art::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--role,var(--red));z-index:4}
  .ms-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;z-index:3}
  .ms-art .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:26px;color:var(--mute)}
  .ms-art .held{position:absolute;right:0;top:0;z-index:5;width:0;height:0;border-style:solid;border-width:0 18px 18px 0;border-color:transparent var(--sand) transparent transparent}
  .ms-card b{font-family:var(--hud);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ms-card .ms-kind{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ms-card.here .ms-art{outline:2px solid var(--cyan);outline-offset:2px}
  .ms-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
  /* locked: full colour (the covers are the hook), a lock badge in the corner */
  .ms-lock{position:absolute;z-index:4;top:6px;right:6px;width:26px;height:26px;display:none;place-items:center;background:rgba(5,14,28,.82);color:var(--sand);border:1px solid rgba(196,181,142,.45)}
  .ms-lock svg{width:14px;height:14px}
  .rosterwrap.locked .ms-lock{display:grid}
  .main-line{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  .main-line .pick{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:24px;text-transform:uppercase;line-height:1;min-width:0}
  .main-line .pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main-line .pick small{font-family:var(--hud);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--mute)}
  .main-line .pick small:last-child{margin-left:auto;white-space:nowrap}

  /* ---------- rules ---------- */
  .rules{list-style:none;display:flex;flex-direction:column;gap:10px}
  .rules li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;font-size:14px;line-height:1.45;color:var(--mute)}
  .rules li i{font-style:normal;font-family:var(--hud);font-weight:700;font-size:17px;color:var(--sand);padding-top:1px}

  /* footer */
  footer{padding:30px 22px 130px;text-align:center;border-top:1px solid var(--line)}
  .fine{font-size:11px;color:var(--faint);line-height:1.6;margin-top:18px;letter-spacing:.02em}

  /* sticky bottom CTA */
  .stickybar{position:fixed;bottom:0;left:50%;transform:translate(-50%,120%);width:min(460px,100vw);
    background:rgba(5,14,28,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--red);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;z-index:320;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .stickybar.show{transform:translate(-50%,0)}
  .stickybar .s-left{font-size:12px;color:var(--mute);font-weight:600;line-height:1.3;min-width:0}
  .stickybar .s-left b{display:block;color:var(--bone);font-family:var(--hud);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
  .stickybar .btn{margin-left:auto;padding:12px 18px 10px;font-size:17px;white-space:nowrap}

  /* ============ TABLET / DESKTOP ============ */
  @media (min-width:768px){
    .h5{width:100%}
    section{padding-top:80px;padding-bottom:80px;
      padding-left:max(6vw,calc((100% - 1080px) / 2));
      padding-right:max(6vw,calc((100% - 1080px) / 2))}
    h2{font-size:clamp(36px,4.2vw,54px)}
    .sec-eyebrow{font-size:14px}
    .lead{font-size:17px;max-width:60ch}
    .hero{height:92vh;height:92svh;min-height:560px;max-height:none}
    .heroimg{object-position:50% 0}
      .hero .content{left:50%;transform:translateX(-50%);width:100%;max-width:1080px;padding:0 6vw;bottom:8vh}
    .hashtag{font-size:min(clamp(72px,9vw,150px),calc((min(100vw,1080px) - 12vw) / 5.6))}
    .tagline{font-size:24px;max-width:46ch}
    .topbar{padding:22px}
    .logo-img{height:54px}
    .proof{max-width:560px;margin-left:auto;margin-right:auto}
    .steps{flex-direction:row;gap:18px}
    .step{flex:1;flex-direction:column;padding:26px}
    .step h3{font-size:20px;margin-top:8px}
    .step p{font-size:14.5px}
    .divider{height:160px}
    .ticker{font-size:15px;padding:12px 0}
    .lk{max-width:560px;margin:0 auto}
    #block .btn.full.wall{max-width:560px;margin-left:auto;margin-right:auto;display:flex}
    .ms-card{flex-basis:168px}
    .main-line{max-width:560px}
    .rules li{font-size:16px}
    .stickybar{width:auto;min-width:460px;max-width:720px;border:2px solid var(--red);bottom:24px;padding:12px 14px 12px 24px}
    footer{padding:60px 6vw 120px}
  }
  @media (min-width:1180px){
    section{padding-top:96px;padding-bottom:96px}
  }

  @media (prefers-reduced-motion:reduce){
    .rv,.heroup{transition:none;animation:none!important;opacity:1;transform:none}
    .ticker span{animation:none;padding-left:0}
    .lk-gen .shard{animation:none;opacity:.25;transform:none}
    .lk-stamp.slam{animation:none}
    .pl-mark{animation:none;clip-path:none}
    .btn.kicked{animation:none}
  }

  .auth-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
  .auth-modal[hidden]{display:none}
  .auth-backdrop{position:absolute;inset:0;background:rgba(5,14,28,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .auth-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--steel);border-top:3px solid var(--red);padding:32px 26px 24px;text-align:center;clip-path:var(--chamfer);animation:authpop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes authpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
  .auth-x{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--mute);font-size:26px;line-height:1;cursor:pointer}
  .auth-logo{height:34px;width:auto;margin:0 auto 18px;display:block}
  .auth-title{font-family:var(--display);font-weight:700;color:var(--gold2)!important;font-size:24px;text-transform:uppercase;margin-bottom:8px;color:var(--bone)}
  .auth-body{font-size:14px;color:var(--mute);line-height:1.5;margin-bottom:22px}
  .ul-card{text-align:left;padding:26px 22px 22px}
  .ul-art{position:relative;width:96px;aspect-ratio:3/4;margin:0 auto 14px;background:repeating-linear-gradient(135deg,var(--steel2) 0 10px,var(--ink2) 10px 12px);border-left:3px solid var(--role,var(--red));overflow:hidden;display:grid;place-items:center}
  .ul-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:brightness(.6)}
  .ul-art .ini{font-family:var(--display);font-size:30px;color:var(--bone);opacity:.4}
  .ul-art svg{position:relative;width:28px;height:28px;color:var(--bone)}
  .ul-card .auth-title{text-align:center;margin-bottom:16px}
  .ul-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
  .ul-steps li{display:flex;align-items:center;gap:12px;background:var(--ink);border:1px solid var(--steel2);padding:10px 12px;font-family:var(--hud);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--bone)}
  .ul-steps li i{flex:0 0 26px;height:26px;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-size:14px;background:var(--ink2);border:1px solid var(--line);color:var(--mute)}
  .ul-steps li small{margin-left:auto;font-size:12px;color:var(--mute);letter-spacing:.1em}
  .ul-steps li.done{border-color:var(--sand2);color:var(--sand)}
  .ul-steps li.done i{background:var(--sand);border-color:var(--sand);color:var(--ink)}
  .ul-steps li.next{border-color:var(--red)}
  .ul-steps li.next i{border-color:var(--red);color:var(--red)}
  .btn.is-ended{background:var(--steel2)!important;color:var(--mute)!important;cursor:default;pointer-events:none}
  .lang{position:relative;display:inline-block;margin-top:18px}
  .lang-btn{display:inline-flex;align-items:center;gap:8px;background:var(--steel);color:var(--bone);border:1px solid var(--line);border-radius:30px;padding:9px 15px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s ease}
  .lang-btn:hover{border-color:rgba(240,230,210,.3)}
  .lang-globe{font-size:14px;opacity:.85}
  .lang-chev{opacity:.55}
  .lang-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--steel2);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;flex-direction:column;min-width:150px;max-height:248px;overflow:auto;box-shadow:0 18px 44px -12px rgba(0,0,0,.65);z-index:50}
  .lang-menu.open{display:flex}
  .lang-opt{background:none;border:none;color:var(--mute);font-family:var(--sans);font-size:13px;font-weight:600;text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .lang-opt:hover{background:rgba(255,255,255,.08);color:var(--white)}
  .lang-opt.sel{color:var(--red)}
  .share-wrap{position:relative}
  .share-btn{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:50%;color:var(--white);cursor:pointer;transition:border-color .15s ease}
  .share-btn:hover{border-color:rgba(255,255,255,.3)}
  .share-btn svg{width:17px;height:17px;transform:translateX(-1px)}
  .share-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--steel2);border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;flex-direction:column;min-width:174px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);z-index:60}
  .share-menu[hidden]{display:none}
  .share-wrap.up .share-menu{top:auto;bottom:calc(100% + 8px)}
  .share-opt{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--mute);font-family:var(--sans);font-size:14px;font-weight:600;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}
  .share-opt:hover{background:rgba(255,255,255,.08);color:var(--white)}
  .share-opt svg{width:17px;height:17px;flex:0 0 auto;color:var(--red)}

  /* ---------- league-only ---------- */
  .lk-frame{border-color:var(--gold)}
  .lk-frame.spin .art{filter:saturate(.6) brightness(.85)}
  .lk-frame.spin::after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 2px var(--teal),inset 0 0 40px rgba(10,200,185,.35);pointer-events:none}
  .lk-tag{border-left-color:var(--teal)}
  .lk-ex{color:var(--gold2)}
  .btn.roll{font-size:24px;letter-spacing:.32em;box-shadow:0 0 0 1px rgba(10,200,185,.0),0 0 26px rgba(201,169,97,.35)}
  .tier.final .ph{background:radial-gradient(circle at 50% 40%,rgba(10,200,185,.2),transparent 70%),var(--ink2)}
  .ul-roll{margin-top:8px}
  .ul-art svg{position:relative;z-index:1}
  /* the collection grid: collected lit, the rest dimmed */
  .clwrap{position:relative}
  .cl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .cl-tile{display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--mute);min-width:0}
  .cl-tile[hidden]{display:none}
  .cl-art{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:var(--ink2)}
    /* full colour for every tile (the covers are the hook — Leila 11/11, as on valorant); collected = teal frame + check */
  .cl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;transition:transform .3s ease}
  .cl-tile b{font-family:var(--hud);font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cl-tile.got .cl-art{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 12px rgba(10,200,185,.35)}
  .cl-tile.got b{color:var(--bone)}
  .cl-ok{position:absolute;right:3px;bottom:3px;z-index:2;width:16px;height:16px;display:none;place-items:center;background:var(--teal);color:var(--ink2);font-size:11px;font-weight:700}
  .cl-tile.got .cl-ok{display:grid}
  .cl-lock{position:absolute;top:3px;right:3px;z-index:2;width:18px;height:18px;display:none;place-items:center;background:rgba(5,14,28,.82);color:var(--gold2)}
  .cl-lock svg{width:10px;height:10px}
  .clwrap.locked .cl-tile:not(.got) .cl-lock{display:grid}
  .cl-tile.here .cl-art{outline:2px solid var(--gold2);outline-offset:1px}
  .cl-tile:hover .cl-art img{transform:scale(1.04)}
  .cl-tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .cl-all{margin-top:14px}
  .cl-all[hidden]{display:none}
  @media (min-width:768px){ .cl-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} .cl-tile b{font-size:12px} .cl-all{max-width:560px;margin-left:auto;margin-right:auto;display:flex} }
  @media (prefers-reduced-motion:reduce){ .cl-art img{transition:none} }
  /* the pick strip labels: tight enough for the longest locale word (ja フレンド, de Freund) */
  .tier .lab{letter-spacing:0;font-size:9.5px;white-space:nowrap;overflow:visible}