/* antvsant.gg home page. Phone values are the approved 390 px frame (Figma 27:2) in px; desktop values are the
   approved 1920 px frame (Figma 23:2) scaled by --u. Measured from Figma 13 Nov 2026. */
:root{--paper:#FBFDF4;--beige:#F1EEDB;--ink:#1B1B22;--sec:#6E5B42;--glue:#F2D21F;--redt:#8A1A14;--redf:#D9463C;--focus:#2F6FD0;
--f:clamp(0px,100vw - 390px,1530px);--u:calc(min(100vw,1920px)/1920);
--fs-display:calc(48px + 64 * var(--f) / 1530);--fs-h2:calc(40px + 32 * var(--f) / 1530);--fs-h3:calc(26px + 10 * var(--f) / 1530);
--fs-lead:calc(18px + 10 * var(--f) / 1530);--fs-body:calc(17px + 7 * var(--f) / 1530);--fs-small:calc(15px + 3 * var(--f) / 1530);--fs-label:calc(15px + 5 * var(--f) / 1530);
--shadow:drop-shadow(0 7px 0 rgba(27,27,34,.3));--shadow-up:drop-shadow(0 13px 0 rgba(27,27,34,.3));--shadow-tag:drop-shadow(0 3px 0 rgba(27,27,34,.3));--shadow-btn:drop-shadow(0 4px 0 rgba(27,27,34,.3))}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:600 var(--fs-body)/1.4 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:"Gochi Hand","Comic Sans MS",cursive;font-weight:400;margin:0;line-height:1.12}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:8px;top:-80px;z-index:100;background:var(--paper);border:3px solid var(--ink);padding:10px 16px;font-weight:800;text-decoration:none}
.skip:focus{top:8px}
section[id]{scroll-margin-top:84px}
.wrap{width:min(100% - 40px,680px);margin-inline:auto;position:relative}
.pbr{display:inline}.dbr{display:none}
.nd{display:none}.np{display:block}.nl{display:block}

/* hand-drawn parts */
.ol{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;fill:var(--fill,var(--paper));stroke:var(--ink);stroke-width:var(--sw,2.5px);stroke-linejoin:round;stroke-linecap:round}
.pico{z-index:2;fill:none;--sw:2.5px}.pico.pd{display:none}
.card,.ccard,.tag,.play,.mpanel,.dotc,.menu summary{position:relative;isolation:isolate}
.card,.ccard{filter:var(--shadow);transition:filter .15s,translate .15s;--sw:3px}
.pic{position:relative}
.pim{display:block;filter:var(--shadow)}
.pim img{width:100%;border-radius:4px;clip-path:var(--cpp)}
.tag{display:inline-block;position:absolute;z-index:3;padding:8px 18px;font:800 var(--fs-label)/1.25 Nunito,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap;--fill:var(--paper);--sw:2.5px;filter:var(--shadow-tag)}
.tag.dark{--fill:#2B2B33;color:#fff}
.tag .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--redf);border:1.5px solid var(--paper);margin-right:8px}
.tag.tr{right:9px;top:-19px;rotate:-3deg}
.tag.br{right:9px;bottom:-13px;rotate:3deg}
.tag.inl{position:relative;rotate:3deg}
.tape{position:absolute;z-index:3;pointer-events:none;width:87px;height:32px}.tape .ol{z-index:auto;--sw:1px}
.burst{position:absolute;z-index:3;display:grid;place-items:center;width:var(--bs,68px);aspect-ratio:1}
.burst svg{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:var(--ink);stroke-width:2.5px;stroke-linejoin:round;overflow:visible}
.burst b{position:relative;font:400 calc(var(--bs,68px)*.4)/1 "Gochi Hand",cursive}

/* buttons */
.play{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);--fill:var(--glue);--sw:3px;filter:var(--shadow-btn);transition:translate .12s,filter .12s}
.play .pl{font:400 var(--btn-fs,49px)/1 "Gochi Hand",cursive;-webkit-text-stroke:var(--btn-sw,5px) var(--ink);display:inline-flex;align-items:center;white-space:nowrap}
.tri{display:inline-block;width:.47em;height:.53em;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%);margin-right:.34em}
.play.big{width:310px;height:88px}
.play.small{width:190px;height:54px;--btn-fs:26px;--btn-sw:4px;--shadow-btn:drop-shadow(0 3px 0 rgba(27,27,34,.3))}
.play:hover{--fill:#F7DE45;translate:0 -2px}
.play:active{--fill:#D9B70F;translate:0 4px;filter:drop-shadow(0 1px 0 rgba(27,27,34,.3));transition-duration:.08s}
.card:hover,.ccard:hover{translate:0 -6px;filter:var(--shadow-up)}

/* header and logo stickers */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top{padding:12px 0;height:68px}
.logo{display:inline-flex;align-items:center;min-height:44px;width:150px}
.logo img{display:block;width:100%;height:auto}
.logo.small{width:130px}.logo.flogo{width:180px}
.stkr{position:relative;display:block;isolation:isolate;--fill:none;--sw:2.5px}
.stkr img{width:100%;height:auto;aspect-ratio:560/168;object-fit:cover;clip-path:url(#stkclip)}
.stkr .olt{z-index:1;fill:none}
.top .stkr,.stk .stkr{padding:5px;--fill:#74AEDA}
.top .stkr img,.stk .stkr img{clip-path:none}
.top .stkr .olt,.stk .stkr .olt{display:none}
.foot .stkr .ol{stroke:var(--paper)}
.dnav{display:none}
.menu{position:relative}
.menu summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;--sw:3px;--fill:var(--paper);filter:var(--shadow)}
.menu summary::-webkit-details-marker{display:none}
.ham{width:20px;height:3px;background:var(--ink);box-shadow:0 -7px 0 var(--ink),0 7px 0 var(--ink);border-radius:2px}
.mpanel{position:absolute;right:0;top:54px;width:240px;padding:12px 20px;z-index:60;filter:var(--shadow);--sw:3px}
.mlist{display:flex;flex-direction:column}
.mlist a{min-height:48px;display:flex;align-items:center;font-weight:800;text-decoration:none;font-size:18px}
.stk{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink);padding:8px 0;transform:translateY(-110%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
.stk.show{transform:none;visibility:visible;transition:transform .2s}
.still .stk,.still .stk.show{transition:none}
.stk .dnav{display:none}

/* hero (phone order: poster, PLAY NOW, note, headline, line) */
.hero{padding:12px 0 60px}
.hgrid{display:grid;grid-template-areas:"p" "b" "n" "h" "l";justify-items:center;text-align:center}
.poster{grid-area:p;margin:26px 0 0;width:330px;max-width:100%;position:relative}
.poster picture,.poster img{display:block}
.tape.hp{right:12px;top:-24px;rotate:-5deg}
.hgrid .play{grid-area:b;margin-top:-28px;position:relative;z-index:4}
.hgrid .note{grid-area:n;font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--sec);margin-top:28px}
.hgrid h1{grid-area:h;font-size:var(--fs-display);margin-top:20px}
.hgrid .line{grid-area:l;font-size:var(--fs-lead);font-weight:700;line-height:1.35;color:var(--sec);margin-top:20px}

/* paper bands: beige sections with torn edges inside their top and bottom */
.band{background:var(--beige);position:relative}
.edge{position:absolute;left:0;width:100%;height:9px;z-index:2;display:block;pointer-events:none}
.edge.p{display:block}.edge.d{display:none}
.edge.top{top:0}.edge.bot{bottom:0}
h2{font-size:var(--fs-h2);text-align:center}
.sub{text-align:center;font-size:var(--fs-lead);font-weight:700;color:var(--sec);line-height:1.35;margin-top:12px}

/* how it plays */
#how{padding:56px 0 64px}
.steps{display:grid;gap:36px;margin-top:36px}
.card{padding:24px 20px 26px}
.card h3{font-size:var(--fs-h3);margin:12px 0}
.card p{font-size:var(--fs-body);font-weight:600;line-height:1.4}
.art{position:relative;aspect-ratio:16/9}
.art .pim,.art.pic img{height:100%}.art.pic img{object-fit:cover}
.ants img{position:absolute;width:33.5%;height:auto}
.ants img:nth-child(1){left:0;top:26.4%}.ants img:nth-child(2){left:22.3%;top:36.8%}
.ants img:nth-child(3){left:44.2%;top:26.4%}.ants img:nth-child(4){left:66.5%;top:36.8%}
.burst.num{left:-14px;top:-14px}

/* real gameplay */
.gameplay{padding:56px 0 64px}
.gameplay .sub{font-size:var(--fs-body);font-weight:600;line-height:1.4}
.ggrid{display:grid;gap:56px;margin-top:56px}
.shot{margin:0}
.shot .pim img{aspect-ratio:16/9;object-fit:cover}
.shot figcaption{font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--sec);margin-top:8px}
.shot .tag.tl{left:11px;top:-39px;rotate:3deg}
/* trailer: poster and a round play button until tapped, then the video in the same frame (main.js) */
.vplay{display:block;position:relative;text-decoration:none;color:var(--ink)}
.vbtn{position:absolute;left:50%;top:50%;width:72px;height:72px;translate:-50% -50%;display:flex;align-items:center;justify-content:center;isolation:isolate;--fill:var(--glue);--sw:3px;filter:var(--shadow-btn);transition:translate .12s,filter .12s}
.vbtn .tri{width:23px;height:27px;margin:0 0 0 7px}
.vplay:hover .vbtn{--fill:#F7DE45;translate:-50% calc(-50% - 2px)}
.vplay:active .vbtn{--fill:#D9B70F;translate:-50% calc(-50% + 4px);filter:drop-shadow(0 1px 0 rgba(27,27,34,.3));transition-duration:.08s}
.pim video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;clip-path:var(--cpp);background:var(--ink)}
.tape.gp{right:25px;top:-33px;rotate:5deg}

/* black vs red */
.vs{padding:56px 0 48px}
.vs .face{margin:12px auto 0;width:100%}
.vs .face img{width:100%}
.vs figcaption{display:flex;justify-content:space-between;padding:0 22px;margin-top:12px}
.lb{font:400 var(--fs-h3)/1.12 "Gochi Hand",cursive}
.lb.red{color:var(--redt)}

/* classes */
.classes{padding:56px 0 64px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:24px;margin-top:24px}
.ccard{display:grid;grid-template-columns:110px 1fr;column-gap:12px;align-items:center;padding:16px 18px 18px 12px}
.ccard .cart{width:110px;height:auto}
.ccard h3{font-size:var(--fs-h3)}
.ccard p{font-size:var(--fs-body);font-weight:600;line-height:1.4;margin-top:6px}
.hp{margin-top:6px;font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--sec)}
.hp .bar{display:block;position:relative;height:18px;margin-top:6px;isolation:isolate}
.hp .bar .ol{--fill:#E4E0CF;--sw:2px}
.hp .bar b{position:absolute;left:5px;top:2.5px;bottom:2.5px;width:calc((100% - 9px) * var(--hp) / 100);background:#7FA35A;border-radius:7px}
.burst.new{--bs:62px;right:3px;top:-17px;rotate:10deg}
.burst.new b{font-size:16px}
@media (max-width:389px){.burst.new{--bs:56px;right:max(-12px,calc(3px - (390px - 100vw) / 2))}.burst.new b{font-size:15px}}

/* battlefields */
#battlefields{padding:56px 0 64px}
.hrow{display:flex;flex-direction:column;align-items:center;gap:10px}
.hrow .tag.inl{margin:3px 0 4px}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:28px}
.bcard{margin:0;text-align:center}
.bcard .pim img{aspect-ratio:16/9;object-fit:cover}
.bcard.wide{grid-column:1/-1}
.nm{display:block;margin-top:6px;font:400 var(--fs-h3)/1.12 "Gochi Hand",cursive}
.tape.tp{display:none}

/* campaign: a list on the phone, a trail on wide screens */
.campaign{padding:56px 0}
.trailwrap{position:relative;margin-top:12px;max-width:420px;margin-inline:auto}
.tline{display:none}
.trail{display:grid;gap:22px;padding:6px;--dot:48px;position:relative;z-index:1}
.stop{display:flex;align-items:center;gap:16px;position:relative}
.dotc{width:var(--dot);height:var(--dot);display:grid;place-items:center;flex:none}
.dotc b{font:400 calc(var(--dot)*.54)/1 "Gochi Hand",cursive}
.dotc .ol{--sw:2.5px;filter:var(--shadow)}
.vline{position:absolute;left:28px;top:30px;width:4px;height:calc(100% - 60px);overflow:visible;z-index:0;stroke:var(--ink);stroke-width:3px;stroke-dasharray:12 10;stroke-linecap:round}
.boss .dotc .ol{--fill:var(--glue)}
.last .dotc .ol{--fill:var(--redf)}.last .dotc b{color:var(--paper)}
.bb{--bs:56px;right:0;top:calc(50% - 28px)}
.burst.bb b{font-size:calc(var(--bs)*.307)}
.lbl{font-size:var(--fs-body);font-weight:600;line-height:1.4}
.lbl em{display:block;font-style:normal;font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--redt)}

/* updates */
.upd{padding:56px 0 64px}
.ugrid{display:grid;gap:24px;margin-top:24px}
.ugrid .card{padding:20px 20px 24px}
.ugrid .pim img{aspect-ratio:16/9;object-fit:cover}
.ugrid time{display:block;font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--sec);margin-top:10px}
.ugrid .card h3{margin:10px 0 0}

/* footer (phone order: logo, PLAY NOW, nav, copyright) */
.foot{background:var(--ink);color:var(--paper);position:relative;padding:44px 0 40px}
.foot .edge.top{top:-8px}
.fgrid{display:grid;gap:24px;justify-items:start}
.fnav{display:flex;flex-direction:column;width:100%}
.fnav a{min-height:45px;display:flex;align-items:center;font-size:var(--fs-label);font-weight:800;line-height:1.25;text-decoration:none}
.foot .play.small{width:100%;height:98px;--btn-fs:49px;--btn-sw:5px;--shadow-btn:drop-shadow(0 4px 0 rgba(27,27,34,.3))}
.copy{font-size:var(--fs-small);font-weight:700;line-height:1.35;color:#E4E0CF}

/* motion: only when the head script marked the page 'anim' */
@keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes wig{0%,90%{rotate:0deg}93%{rotate:-2deg}97%{rotate:2deg}100%{rotate:0deg}}
@keyframes pulse{0%,85%,100%{scale:1}92%{scale:1.04}}
html.anim .poster{animation:rise .4s ease-out both}
html.anim .play.big.wig{animation:wig 6s linear 3}
html.anim .bb,html.anim .new{animation:pulse 4s ease-in-out infinite}
html.anim .rv{opacity:0;translate:0 16px}
html.anim .rv.in{opacity:1;translate:0 0;transition:opacity .3s ease-out,translate .3s ease-out;transition-delay:var(--d,0s)}
html.anim .card.rv.in,html.anim .ccard.rv.in{transition:opacity .3s ease-out var(--d,0s),translate .3s ease-out var(--d,0s),filter .15s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (min-width:600px){.nd{display:block}.np{display:none}}

/* ---------- desktop (from 900 px, so landscape tablets get it) ---------- */
@media (min-width:900px){
.wrap{width:calc(1600 * var(--u))}
.pbr{display:none}
.nd{display:block}.np{display:none}
.top{height:calc(131 * var(--u));padding:0;display:flex;align-items:center}
.logo{width:calc(300 * var(--u))}.logo.small{width:150px}.logo.flogo{width:calc(300 * var(--u))}
.top .stkr,.stk .stkr{padding:0;--fill:none;--sw:3px}
.top .stkr img,.stk .stkr img{clip-path:url(#stkclip)}
.top .stkr .olt,.stk .stkr .olt{display:block}
.foot .stkr{--sw:3px}
.dnav{display:flex;gap:calc(44 * var(--u))}
.dnav a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:calc(17px + 3 * var(--f) / 1530);line-height:1.25;text-decoration:none}
.dnav a:hover{text-decoration:underline;text-underline-offset:6px}
.menu{display:none}
.stk .play.small{width:200px;height:56px;--btn-fs:28px}
section[id]{scroll-margin-top:100px}
.edge.d{display:block}.edge.p{display:none}
.pico{--sw:3px}.pico.pp{display:none}.pico.pd{display:block}.pim img,.pim video{clip-path:var(--cpd)}
.vbtn{width:max(84px,calc(150 * var(--u)));height:max(84px,calc(150 * var(--u)))}.vbtn .tri{width:max(27px,calc(48 * var(--u)));height:max(31px,calc(55 * var(--u)));margin-left:max(8px,calc(14 * var(--u)))}
.edge{height:14px}
.foot .edge.top{top:-13px}
.tag{padding:.45em .95em}
.tape{width:calc(144 * var(--u));height:calc(52 * var(--u))}

.hero{padding:calc(64 * var(--u)) 0 calc(112 * var(--u))}
.hgrid{grid-template-columns:calc(680 * var(--u)) calc(856 * var(--u));justify-content:space-between;grid-template-areas:"h p" "l p" "b p" "n p";justify-items:start;text-align:left;grid-template-rows:auto auto auto 1fr}
.hgrid h1{margin-top:0;font-size:calc(112 * var(--u));text-wrap:balance}
.hgrid .line{margin-top:calc(24 * var(--u));max-width:calc(680 * var(--u))}
.hgrid .play{margin-top:calc(44 * var(--u))}
.play.big{width:max(205px,calc(360 * var(--u)));height:max(57px,calc(101 * var(--u)));--btn-fs:max(28px,calc(50.4 * var(--u)));--btn-sw:max(3px,calc(5 * var(--u)));--shadow-btn:drop-shadow(0 max(3px,calc(4.2 * var(--u))) 0 rgba(27,27,34,.3))}
.hgrid .note{margin-top:calc(16 * var(--u))}
.poster{width:100%;margin:0;align-self:center;grid-row:1/-1}
.tape.hp{right:calc(58 * var(--u));top:calc(-28 * var(--u))}

.sub{margin-top:calc(20 * var(--u))}
#how{padding:calc(110 * var(--u)) 0 calc(140 * var(--u))}
.steps{grid-template-columns:repeat(3,1fr);gap:calc(32 * var(--u));margin-top:calc(72 * var(--u))}
.steps .card{min-height:calc(518 * var(--u))}
.card{padding:calc(40 * var(--u)) calc(32 * var(--u)) calc(44 * var(--u))}
.card h3{margin:calc(20 * var(--u)) 0}
.ants img:nth-child(1),.ants img:nth-child(3){top:28.6%}.ants img:nth-child(2),.ants img:nth-child(4){top:37.3%}
.ants img:nth-child(2){left:22.1%}.ants img:nth-child(3){left:44.4%}
.burst.num{--bs:calc(99 * var(--u));left:calc(-26 * var(--u));top:calc(-26 * var(--u))}
.tag.tr{right:calc(15 * var(--u));top:calc(-24 * var(--u))}

.gameplay{padding:calc(120 * var(--u)) 0 calc(140 * var(--u))}
.gameplay .sub{margin-top:calc(12 * var(--u))}
.ggrid{grid-template-columns:1104fr 464fr;column-gap:calc(32 * var(--u));row-gap:calc(64 * var(--u));margin-top:calc(64 * var(--u));align-items:start}
.shot.main{grid-row:1/3}
.shot figcaption{margin-top:calc(14 * var(--u))}
.shot .tag.tl{left:calc(19 * var(--u));top:calc(-45 * var(--u))}
.tape.gp{right:calc(63 * var(--u));top:calc(-44 * var(--u))}
.tape.gp.pm{display:none}

.vs{padding:calc(120 * var(--u)) 0 calc(110 * var(--u))}
.vs .face{width:calc(1280 * var(--u));margin-top:calc(20 * var(--u))}
.vs figcaption{margin-top:calc(20 * var(--u));padding:0 calc(230 * var(--u))}

.classes{padding:calc(120 * var(--u)) 0 calc(140 * var(--u))}
.cgrid{margin-top:calc(72 * var(--u))}

#battlefields{padding:calc(120 * var(--u)) 0 calc(150 * var(--u))}
.hrow{flex-direction:row;justify-content:center;gap:calc(24 * var(--u))}
.hrow .tag.inl{margin:0}
.bgrid{grid-template-columns:repeat(3,1fr);gap:calc(56 * var(--u)) calc(32 * var(--u));margin-top:calc(72 * var(--u))}
.bcard.wide{grid-column:auto}
.nm{margin-top:calc(18 * var(--u))}
.tape.tp{display:block;left:calc(50% - 75 * var(--u));top:calc(-14 * var(--u));rotate:5deg}
.tape.tp.k{top:calc(-24 * var(--u));rotate:-4deg}

.campaign{padding:calc(120 * var(--u)) 0 calc(110 * var(--u))}
.trailwrap{margin-top:calc(20 * var(--u))}

.upd{padding:calc(110 * var(--u)) 0 calc(150 * var(--u))}
.ugrid{grid-template-columns:repeat(3,1fr);gap:calc(32 * var(--u));margin-top:calc(72 * var(--u))}
.ugrid .card{padding:calc(32 * var(--u)) calc(32 * var(--u)) calc(40 * var(--u))}
.ugrid time{margin-top:calc(14 * var(--u))}
.ugrid .card h3{margin-top:calc(14 * var(--u))}
.tag.br{right:calc(15 * var(--u));bottom:calc(-15 * var(--u))}

.foot{padding:calc(72 * var(--u)) 0 calc(64 * var(--u))}
.fgrid{grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav play" "copy copy copy";align-items:center;gap:calc(40 * var(--u)) 0}
.flogo{grid-area:logo}.fnav{grid-area:nav;justify-self:center}.foot-play{grid-area:play;justify-self:end}.copy{grid-area:copy}
.fnav{flex-direction:row;justify-content:center;gap:calc(44 * var(--u));width:auto}
.fnav a{min-height:44px;font-size:calc(17px + 3 * var(--f) / 1530)}
.foot .play.small{width:max(190px,calc(240 * var(--u)));height:max(54px,calc(67 * var(--u)));--btn-fs:max(26px,calc(33.6 * var(--u)));--btn-sw:max(3px,calc(5 * var(--u)));--shadow-btn:drop-shadow(0 max(2px,calc(2.8 * var(--u))) 0 rgba(27,27,34,.3))}
}

@media (min-width:1100px){.stk .dnav{display:flex}}

/* 900-1359: class cards centred, last row included; gameplay shots stacked so the side shots stay readable */
@media (min-width:900px) and (max-width:1359px){
.cgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.ccard{flex:0 0 360px;align-items:stretch}
.ccard .cart{align-self:center}
.ctxt{display:flex;flex-direction:column}
.hp{margin-top:auto;padding-top:6px}
.burst.new{right:-14px}
.ggrid{grid-template-columns:1fr 1fr}
.shot.main{grid-column:1/-1;grid-row:auto}
}

/* five class cards in a row and the campaign trail need the full width */
@media (min-width:1360px){
.cgrid{grid-template-columns:repeat(5,1fr);gap:calc(30 * var(--u))}
.ccard{display:flex;flex-direction:column;align-items:stretch;min-height:calc(620 * var(--u));padding:calc(28 * var(--u)) calc(24 * var(--u)) calc(36 * var(--u))}
.ccard .cart{width:100%}
.ctxt{display:flex;flex-direction:column;flex:1}
.ccard h3{margin-top:calc(14 * var(--u))}
.ctxt p{margin-top:calc(14 * var(--u))}
.hp{margin-top:auto;padding-top:calc(14 * var(--u))}
.hp .bar{height:calc(24 * var(--u));margin-top:calc(8 * var(--u))}
.hp .bar b{left:calc(5 * var(--u));top:calc(3 * var(--u));bottom:calc(3 * var(--u));width:calc((100% - 9.4 * var(--u)) * var(--hp) / 100);border-radius:calc(9 * var(--u))}
.burst.new{--bs:calc(99 * var(--u));right:calc(-33.5 * var(--u));top:calc(-45.5 * var(--u))}
.burst.new b{font-size:calc(26 * var(--u))}

.trailwrap{max-width:none}
.tline{display:block;position:absolute;left:0;top:calc(74 * var(--u));width:100%;height:calc(112 * var(--u));overflow:visible;z-index:0}
.trail{position:relative;z-index:1;grid-template-columns:repeat(9,1fr);gap:0;padding:calc(74 * var(--u)) 0 calc(20 * var(--u));--dot:calc(72 * var(--u));align-items:start}
.stop{flex-direction:column;text-align:center;gap:calc(14 * var(--u))}
.stop.ev{margin-top:calc(40 * var(--u))}
.vline{display:none}
.dotc .ol{--sw:max(2px,calc(3 * var(--u)))}
.tline path{stroke-width:max(2px,calc(3 * var(--u)));stroke-dasharray:calc(14 * var(--u)) calc(12 * var(--u))}
.dotc b{font-size:calc(var(--dot)*.5)}
.bb{--bs:calc(99 * var(--u));left:calc(50% - var(--bs) / 2);right:auto;top:calc(-82 * var(--u))}
.dbr{display:inline}
.lbl{font-size:var(--fs-small);font-weight:700;line-height:1.35;padding-inline:4px}
.lbl em{font-size:inherit}
}