/* The run screens (v38): the review page "Wildmarch: Between Fights" (Tim's picks "3AAC", 2026-10-14), its CSS as it
   was, every selector under #run so the fight page's own CSS and this never touch. Renamed against the fight's CSS:
   .chip -> .pill, .hpbar -> .hbar, .ember -> .rember, .scene -> .rscene, #bg/#fg -> #rbg/#rfg.
   Made by scratchpad rs-css.mjs from run-screens/index.html, then: the review's header and notes drawer dropped,
   and the stage is the largest 16:9 box in the window. */
#run{position:fixed;inset:0;z-index:60;display:flex;overflow:auto;-webkit-user-select:none;user-select:none}
#scene[hidden]{display:none!important}

/* one visual world: the game's dusk woodland and parchment (the same look in either viewer theme) */
#run{color-scheme:light;
  --night:#121A14;--parch:#F3E5C3;--parch2:#E4CFA0;--parch3:#D6BC86;--edge:#6B4A24;--gold:#C9A24D;--gold2:#E8C877;--ink:#2A1C10;--mute:#6B5432;
  --cream:#F6EAD0;--navy:#1F2F55;--red:#8E2A1E;--violet:#5E4A8E;--green:#3E6A34;--green2:#2C4F26;--leaf:#4F7A3A;
  --disp:"Cinzel",Georgia,serif;--body:"EB Garamond",Garamond,Georgia,serif;--mono:"IBM Plex Mono",Menlo,monospace}
#run,#run *{box-sizing:border-box}
#run [hidden],#run[hidden]{display:none!important}
#run{color:var(--cream);font:17px/1.4 var(--body)}
#run button{font:inherit;color:inherit;cursor:pointer}
#run button:focus-visible,#run textarea:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
#run button:disabled{cursor:default}

/* ---------- the stage ---------- */
#run .stage{position:relative;margin:auto;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9;min-height:min(560px,100vh);overflow:hidden;
  background:#1B2A44;container-type:inline-size}
#run .rscene{position:absolute;inset:0;overflow:hidden}
#run .rscene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#run #rbg{z-index:1}#run #rfg{z-index:3;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  #run .rscene.walking #rbg{animation:drift 2.6s ease-in-out}
  #run .lamp{animation:flick 1.7s ease-in-out infinite alternate}
  #run .fly{animation:float 9s ease-in-out infinite}
  #run .flame i{animation:lick .5s ease-in-out infinite alternate}
  #run .seat.walk .arch{animation:bob .42s ease-in-out infinite alternate}
  #run .rember{animation:rise 2.4s linear infinite}
}
@keyframes drift{0%{transform:scale(1.02) translateX(.6%)}100%{transform:scale(1.02) translateX(-.6%)}}
@keyframes flick{0%{opacity:.55;transform:scale(.92)}60%{opacity:.85}100%{opacity:.7;transform:scale(1.08)}}
@keyframes float{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(1.4cqw,-1.8cqw);opacity:.95}}
@keyframes lick{from{transform:scaleY(1) skewX(-3deg)}to{transform:scaleY(1.16) skewX(4deg)}}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-7%) rotate(2deg)}}
@keyframes rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-5cqw) translateX(.8cqw);opacity:0}}
#run .lamps,#run .flies{position:absolute;inset:0;z-index:4;pointer-events:none}
#run .lamp{position:absolute;width:6cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(#FFD27A88,#FFB54A22 45%,#FFB54A00 70%);mix-blend-mode:screen}
#run .fly{position:absolute;width:.35cqw;aspect-ratio:1;border-radius:50%;background:#FFF2A8;box-shadow:0 0 .8cqw .2cqw #FFE27A}

/* the map behind the trees (trail look 3) */
#run .mapwrap{position:absolute;left:5%;right:3%;top:10.5%;aspect-ratio:1600/600;z-index:2;transform:perspective(1400px) rotateX(16deg);transform-origin:50% 100%;opacity:0;transition:opacity .8s;filter:drop-shadow(0 1.4cqw 1.6cqw #000a)}
#run .mapwrap.on{opacity:1}
#run .mapwrap canvas,#run .mapwrap svg{position:absolute;inset:0;width:100%;height:100%}
#run .mapwrap .plaque text{font:700 22px var(--disp)}

/* the run bar */
#run .runbar{position:absolute;left:50%;top:1.6%;translate:-50% 0;width:76%;z-index:6;pointer-events:none;filter:drop-shadow(0 .5cqw .8cqw #000b)}
#run .runbar svg{display:block;width:100%;height:auto}
#run .runbar text{font-family:var(--disp);font-weight:700}

/* the camp row: portraits round the fire */
#run .camp{position:absolute;left:50%;bottom:1.2%;translate:-50% 0;z-index:5;display:flex;align-items:flex-end;gap:1.6cqw}
#run .seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2cqw;width:5.2cqw}
#run .seat .nm{font:700 1.05cqw/1 var(--disp);color:#FBEFD2;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap;letter-spacing:.03em}
#run .arch{position:relative;width:100%;aspect-ratio:5/7;border-radius:50% 50% 12% 12%/36% 36% 8% 8%;background-size:cover;background-position:50% 18%;border:.25cqw solid var(--gold2);box-shadow:0 0 0 .14cqw #3A2A10,0 .6cqw 1.2cqw #000c,inset 0 0 1.2cqw #0008}
#run .seat.me .arch{border-color:#7FB0E0}
#run .seat.out .arch{filter:grayscale(.9) brightness(.55)}
#run .seat .hp{width:86%;height:.5cqw;border-radius:.3cqw;background:#3A1A14;overflow:hidden;box-shadow:0 0 0 .1cqw #000a}
#run .seat .hp i{display:block;height:100%;background:linear-gradient(90deg,#B24A3B,#E2735A);transition:width .6s}
#run .seat .bub{position:absolute;bottom:calc(100% + .2cqw);left:50%;translate:-50% 0;font:600 .95cqw/1.15 var(--body);color:var(--ink);background:linear-gradient(var(--parch),var(--parch2));border:.12cqw solid var(--edge);border-radius:.7cqw;padding:.25cqw .6cqw;white-space:nowrap;max-width:14cqw;overflow:hidden;text-overflow:ellipsis;box-shadow:0 .3cqw .7cqw #000a}
#run .seat .bub::after{content:"";position:absolute;left:50%;top:100%;translate:-50% 0;border:.4cqw solid transparent;border-top-color:var(--edge)}
#run .seat .bub.wait{font-style:italic;color:var(--mute)}
#run .fire{position:relative;width:7cqw;height:6cqw;align-self:flex-end}
#run .fire .glow{position:absolute;left:50%;bottom:-2cqw;translate:-50% 0;width:22cqw;height:10cqw;border-radius:50%;background:radial-gradient(#FFB04A66,#FF8A3022 45%,#0000 70%);pointer-events:none}
#run .fire .stones{position:absolute;left:4%;right:4%;bottom:0;height:22%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#2A1E14 40%,#5A5048 42% 62%,#2A2620 64%)}
#run .fire .logs{position:absolute;left:18%;right:18%;bottom:12%;height:16%;background:linear-gradient(20deg,#0000 38%,#5A3A1E 40% 60%,#0000 62%),linear-gradient(-20deg,#0000 38%,#4A2E16 40% 60%,#0000 62%)}
#run .flame{position:absolute;left:50%;bottom:20%;translate:-50% 0;width:52%;height:78%}
#run .flame i{position:absolute;bottom:0;left:50%;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;transform-origin:50% 100%;mix-blend-mode:screen}
#run .flame i:nth-child(1){width:100%;height:100%;margin-left:-50%;background:radial-gradient(ellipse at 50% 85%,#FF9A3A,#E2551E 55%,#E2551E00 72%)}
#run .flame i:nth-child(2){width:70%;height:78%;margin-left:-35%;background:radial-gradient(ellipse at 50% 85%,#FFD26A,#FF9A3A 50%,#FF9A3A00 72%);animation-delay:-.2s!important}
#run .flame i:nth-child(3){width:38%;height:50%;margin-left:-19%;background:radial-gradient(ellipse at 50% 80%,#FFF6C8,#FFD26A 55%,#FFD26A00 75%);animation-delay:-.35s!important}
#run .rember{position:absolute;bottom:60%;width:.3cqw;aspect-ratio:1;border-radius:50%;background:#FFC060;box-shadow:0 0 .4cqw #FF9A3A}

/* ---------- panels ---------- */
#run .panel{position:absolute;left:4%;right:4%;top:14%;bottom:23%;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
#run .panel>*{pointer-events:auto}
#run .panel.trail{justify-content:flex-end;bottom:22.5%}
#run .panel.shopmode{left:17.5%;right:3.5%;bottom:17.5%;top:13%}
#run .panel.tall{bottom:3%}
#run .panel.title{top:8%;bottom:20%}
#run .frame{position:relative;max-width:100%;max-height:100%;overflow:auto;color:var(--ink);border-radius:1.2cqw;padding:2cqw 2.6cqw;
  background:radial-gradient(ellipse at 50% 40%,#F8ECCD,#EEDCB0 60%,#DEC48C 100%);
  box-shadow:inset 0 0 0 .22cqw #E9D3A0,inset 0 0 0 .38cqw var(--gold),inset 0 0 0 .5cqw #F2E2BA,inset 0 0 2.4cqw #A07A4255,0 0 0 .18cqw #4A3218,0 1.2cqw 2.6cqw #000c}
#run .frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 20% 30%,#9A744418 0 6%,#0000 14%),radial-gradient(circle at 80% 70%,#9A744414 0 8%,#0000 18%),radial-gradient(circle at 60% 15%,#9A74440f 0 5%,#0000 12%)}
#run .frame>*{position:relative}
#run .cn{position:absolute;width:5.6cqw;height:5.6cqw;pointer-events:none;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%237A5A24' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 74 C6 40 20 16 58 8'/%3E%3Cpath d='M6 50 C14 46 18 40 18 32'/%3E%3Cpath d='M22 20 C28 22 34 20 38 14'/%3E%3C/g%3E%3Cg fill='%234F6A30' stroke='%232E4020' stroke-width='1'%3E%3Cpath d='M18 32 q-8 -6 -2 -14 q8 6 2 14z'/%3E%3Cpath d='M38 14 q-2 -10 8 -12 q2 10 -8 12z'/%3E%3Cpath d='M10 60 q-8 -2 -6 -10 q8 2 6 10z'/%3E%3Cpath d='M48 11 q4 -8 12 -6 q-4 8 -12 6z'/%3E%3C/g%3E%3Ccircle cx='58' cy='8' r='3.2' fill='%23C9A24D'/%3E%3Ccircle cx='6' cy='74' r='3.2' fill='%23C9A24D'/%3E%3C/svg%3E") no-repeat center/contain}
#run .cn.tl{left:.2cqw;top:.2cqw}#run .cn.tr{right:.2cqw;top:.2cqw;transform:scaleX(-1)}#run .cn.bl{left:.2cqw;bottom:.2cqw;transform:scaleY(-1)}#run .cn.br{right:.2cqw;bottom:.2cqw;transform:scale(-1,-1)}
#run .medal{position:absolute;left:50%;top:-2.3cqw;translate:-50% 0;width:4.2cqw;aspect-ratio:1;border-radius:50%;z-index:2;background:radial-gradient(circle at 40% 35%,#5A7A3A,#2C4420);border:.25cqw solid var(--gold);box-shadow:0 .3cqw .8cqw #0009;display:grid;place-items:center}
#run .medal svg{width:58%;height:58%}
#run .eb{font:600 .82cqw var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
#run h2.tt{font:700 2.5cqw/1.05 var(--disp);margin:.2cqw 0 0;color:var(--ink);letter-spacing:.02em;text-wrap:balance}
#run h2.tt.sm{font-size:1.9cqw}
#run .rule{height:1.2cqw;margin:.5cqw 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16'%3E%3Cpath d='M0 8 H125 M175 8 H300' stroke='%23A8823E' stroke-width='1.5'/%3E%3Cpath d='M150 1 L157 8 L150 15 L143 8 Z' fill='%23A8823E'/%3E%3Ccircle cx='132' cy='8' r='2' fill='%23A8823E'/%3E%3Ccircle cx='168' cy='8' r='2' fill='%23A8823E'/%3E%3C/svg%3E") no-repeat left center/auto 100%;max-width:22cqw}
#run .lead{font:500 1.35cqw/1.35 var(--body);color:#3A2A18;margin:0}
#run .it{font:italic 500 1.3cqw/1.35 var(--body);color:#4A3622;margin:0}
#run .note{font:italic 500 1.1cqw/1.3 var(--body);color:var(--mute);margin:0}
#run .row{display:flex;gap:.9cqw;align-items:center;flex-wrap:wrap}
#run .row.end{justify-content:flex-end}#run .row.sp{justify-content:space-between}#run .row.c{justify-content:center}
#run .col{display:flex;flex-direction:column;gap:.6cqw;min-width:0}
#run .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6cqw;font:700 1.2cqw/1 var(--disp);letter-spacing:.04em;color:#FFF8E6;padding:.85cqw 1.7cqw;border-radius:.7cqw;
  background:linear-gradient(#5E8C48,#3A6230 55%,#2C4F26);border:.16cqw solid #C9A24D;box-shadow:inset 0 .12cqw 0 #A6C88A88,0 .3cqw .7cqw #0007;text-shadow:0 1px 2px #0008}
#run .btn:hover:not(:disabled){filter:brightness(1.08)}
#run .btn.ghost{color:var(--ink);background:linear-gradient(#FBF1D8,#E9D4A4);text-shadow:none;box-shadow:inset 0 .12cqw 0 #FFF,0 .3cqw .7cqw #0005;border-color:#A8823E}
#run .btn.red{background:linear-gradient(#B4523E,#8E2A1E);}
#run .btn:disabled{opacity:.45;filter:grayscale(.4)}
#run .btn .chev{font-size:1.1em;margin-left:.2em}
#run .big{display:flex;align-items:center;gap:1cqw;text-align:left;padding:.8cqw 1.4cqw;min-width:15cqw}
#run .big .ic{width:2.4cqw;height:2.4cqw;flex:none}
#run .big b{display:block;font:700 1.3cqw/1.1 var(--disp)}
#run .big small{display:block;font:italic 500 1cqw/1.2 var(--body);letter-spacing:0;opacity:.9;margin-top:.2cqw}
#run .err{color:var(--red);font:600 1.1cqw var(--body)}
#run .coin{display:inline-block;width:1.2em;height:1.2em;border-radius:50%;vertical-align:-.22em;background:radial-gradient(circle at 35% 35%,#FFF0B0,#E2BC52 45%,#A87A22);border:.1em solid #6B4A1A;box-shadow:inset 0 0 0 .12em #F2D27A88}

/* cards */
#run .cards{display:flex;gap:1cqw;flex-wrap:wrap;justify-content:center;align-items:flex-end}
#run .card{position:relative;width:var(--w,9cqw);aspect-ratio:600/840;border-radius:.6cqw;background:#3A2C1C;box-shadow:0 .4cqw .9cqw #0008;flex:none;transition:transform .18s,box-shadow .18s,filter .3s;border:0;padding:0}
#run .card img{display:block;width:100%;height:100%;border-radius:.6cqw;object-fit:cover}
#run .card.print{aspect-ratio:600/850}
#run button.card:hover:not(:disabled){transform:translateY(-.5cqw)}
#run .card.on{transform:translateY(-.8cqw);box-shadow:0 0 0 .22cqw var(--gold2),0 0 1.4cqw #E8C877,0 .8cqw 1.4cqw #0009}
#run .card.dim{filter:saturate(.65) brightness(.82)}
#run .card.sold{filter:grayscale(.85) brightness(.6)}
#run .card .price{position:absolute;right:-.5cqw;top:-.6cqw;display:flex;align-items:center;gap:.25cqw;font:700 1.25cqw/1 var(--disp);color:#3A2A0C;background:radial-gradient(circle at 35% 30%,#FFF2B8,#E8C060 50%,#B88A2C);border:.14cqw solid #6B4A1A;border-radius:999px;padding:.3cqw .65cqw .3cqw .35cqw;box-shadow:0 .2cqw .5cqw #0008}
#run .card .price .coin{width:1.05em;height:1.05em}
#run .card .rare{position:absolute;left:-.35cqw;top:-.5cqw;font:700 .9cqw/1 var(--disp);letter-spacing:.06em;background:linear-gradient(#7A64B0,#4E3A80);color:#FFF;padding:.3cqw .7cqw;border-radius:.35cqw;border:.1cqw solid #C9B8F0;box-shadow:0 .2cqw .5cqw #0008}
#run .card .stamp{position:absolute;left:-4%;right:-4%;top:40%;text-align:center;font:700 1.05cqw var(--disp);color:#FFF6E2;background:#1F2F55e8;padding:.35cqw 0;border-radius:.3cqw;transform:rotate(-8deg);box-shadow:0 .3cqw .7cqw #0008}
#run .card .stamp.me{background:#3E6A34ee}
#run .card .tag{position:absolute;left:50%;bottom:-.9cqw;translate:-50% 0;font:600 .8cqw/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--green2);color:#FFF;padding:.25cqw .6cqw;border-radius:.35cqw;white-space:nowrap}

/* title */
#run .logo{font:800 7.4cqw/1 var(--disp);color:#FBF0D4;letter-spacing:.06em;text-shadow:0 .4cqw 1.6cqw #000d,0 0 4cqw #E8C87766;text-align:center}
#run .tagline{font:italic 500 1.8cqw var(--body);color:#FFF1D4;text-shadow:0 2px 8px #000;text-align:center}
#run .menu{display:flex;flex-direction:column;gap:.7cqw;width:22cqw;margin:1.2cqw auto 0}
#run .menu .btn{font-size:1.35cqw;padding:1cqw}
#run .soon{font:600 .75cqw var(--mono);letter-spacing:.08em;background:#5A4C3C;color:#FFF;border-radius:.3cqw;padding:.15cqw .45cqw;margin-left:.5cqw}
/* hero select */
#run .heroes{display:grid;grid-template-columns:repeat(6,8.4cqw);justify-content:center;gap:.7cqw}
#run .hero{position:relative;border-radius:50% 50% .8cqw .8cqw/30% 30% .8cqw .8cqw;overflow:hidden;aspect-ratio:560/791;background-size:cover;background-position:center;border:.25cqw solid #8A6A30;box-shadow:0 .4cqw .9cqw #0007;padding:0;transition:transform .18s}
#run .hero span{position:absolute;left:0;right:0;bottom:0;padding:.35cqw;text-align:center;font:700 1.05cqw var(--disp);color:#FBF3DF;background:linear-gradient(transparent,#1E140Ce6)}
#run .hero.sel{border-color:var(--gold2);box-shadow:0 0 0 .22cqw #E8C87799,0 .7cqw 1.4cqw #000b;transform:translateY(-.4cqw)}
#run .hero span.mt{top:.4cqw;bottom:auto;left:50%;right:auto;translate:-50% 0;font:600 .7cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--navy);padding:.1cqw .45cqw;border-radius:.3cqw}
#run .hdet{display:grid;grid-template-columns:8cqw 1fr;gap:1.2cqw;align-items:start}
#run .hdet .art{aspect-ratio:560/791;border-radius:50% 50% .8cqw .8cqw/30% 30% .8cqw .8cqw;background-size:cover;border:.2cqw solid var(--gold)}
#run .hdet h3{font:700 2cqw/1 var(--disp);margin:0}
#run .hdet .cl{font:italic 500 1.25cqw var(--body);color:var(--mute)}
#run .hdet ul{margin:.4cqw 0 0;padding-left:1.1em}#run .hdet li{margin:.2cqw 0;font-size:1.2cqw}
#run .pill{font:600 1cqw var(--body);padding:.1cqw .7cqw;border-radius:999px;border:.12cqw solid var(--edge);background:#FBF3DF;color:var(--ink)}
#run .seg{display:inline-flex;border:.15cqw solid #6B4A1A;border-radius:.7cqw;overflow:hidden}
#run .seg button{font:600 1.15cqw var(--disp);padding:.4cqw 1cqw;background:var(--parch);border:0;border-left:1px solid #C9A86A;color:var(--ink)}
#run .seg button:first-child{border-left:0}
#run .seg button[aria-pressed="true"]{background:linear-gradient(#F3DC9A,#C9A048)}
#run .mates{display:flex;gap:.6cqw;flex-wrap:wrap}
#run .mate{display:flex;align-items:center;gap:.5cqw;padding:.25cqw .8cqw .25cqw .25cqw;border-radius:999px;background:#FBF3DF;border:.12cqw solid #C9A86A;font:600 1.1cqw var(--body);color:var(--ink)}
#run .mate .pt{width:2.2cqw;height:2.2cqw;border-radius:50%;background-size:180%;background-position:50% 22%;border:.15cqw solid var(--gold)}
#run .mate .st{font:600 .8cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
#run .mate .st.ok{color:var(--leaf)}
/* the trail panel (ref: On the Trail) */
#run .trailbox{display:grid;grid-template-columns:8.2cqw 1fr;gap:1.5cqw;align-items:center;width:min(100%,57cqw);padding:1cqw 1.8cqw 1cqw 1cqw}
#run .window{aspect-ratio:3/4;border-radius:50% 50% .6cqw .6cqw/38% 38% .6cqw .6cqw;background-size:132%;background-position:50% 45%;border:.3cqw solid var(--gold);box-shadow:0 0 0 .15cqw #4A3218,inset 0 0 1.4cqw #000a}
#run .notes3{display:flex;gap:1.6cqw;align-items:center;flex-wrap:wrap}
#run .tn{display:flex;align-items:center;gap:.6cqw;font:italic 500 1.05cqw/1.15 var(--body);color:#3A2A18;max-width:13cqw}
#run .tn .ic{width:2.5cqw;height:2.5cqw;flex:none;border-radius:50%;background:#3A2A18;display:grid;place-items:center}
#run .tn .ic.d{border-radius:0;background:none}
#run .tn svg{width:70%;height:70%}
/* events (ref: Quiet Camp) */
#run .evbox{display:grid;grid-template-columns:16cqw 1fr;gap:2.2cqw;align-items:start;width:min(100%,60cqw);padding:2.4cqw 2.6cqw 2cqw;overflow:visible;margin-top:1.4cqw}
#run .evcard{position:relative;border-radius:.8cqw;background:#1A1410;padding:.45cqw;box-shadow:0 0 0 .2cqw var(--gold),0 .8cqw 1.6cqw #000a}
#run .evcard .pic{aspect-ratio:4/4.1;border-radius:40% 40% .3cqw .3cqw/30% 30% .3cqw .3cqw;background-size:128%;background-position:50% 40%;border:.18cqw solid var(--gold)}
#run .evcard .ban{margin:-1.2cqw -.2cqw 0;position:relative;text-align:center;font:700 1.45cqw/1 var(--disp);color:#FBEBC4;background:linear-gradient(#2A3E6E,#1F2F55);border:.15cqw solid var(--gold);padding:.55cqw .4cqw;letter-spacing:.03em}
#run .evcard .ban::before,#run .evcard .ban::after{content:"✦";position:absolute;top:50%;translate:0 -50%;font-size:.7em;color:var(--gold2)}
#run .evcard .ban::before{left:.6cqw}#run .evcard .ban::after{right:.6cqw}
#run .evcard .rb{background:linear-gradient(#FBF2DC,#EEDDB4);color:var(--ink);font:500 1.1cqw/1.3 var(--body);text-align:center;padding:.8cqw .7cqw;border-radius:0 0 .4cqw .4cqw}
#run .effect{display:grid;grid-template-columns:2.4cqw 1fr;gap:.8cqw;align-items:start;border:.12cqw solid #C9AE76;background:#FBF1DA88;border-radius:.6cqw;padding:.8cqw 1cqw}
#run .effect .ic svg{width:100%}
#run .effect .res{display:flex;flex-direction:column;gap:.15cqw;margin-top:.4cqw;font:500 1.05cqw/1.25 var(--body)}
#run .effect .res div::before{content:"◆";color:var(--gold);margin-right:.5cqw;font-size:.8em}
#run .grid{display:flex;flex-wrap:wrap;gap:.5cqw;justify-content:flex-start;max-height:16cqw;overflow:auto;padding:.6cqw .3cqw}
#run .grid.strip{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;padding:1cqw .3cqw .8cqw}
#run .grid .card{--w:5.6cqw}
/* the shop (ref: Trading Stop) */
#run .shop{width:100%;padding:1.3cqw 1.6cqw;display:flex;flex-direction:column;gap:.8cqw}
#run .shophead{display:grid;grid-template-columns:1.25fr 1.25fr auto;gap:1cqw;align-items:stretch}
#run .sign{background:linear-gradient(#2C4430,#1C2E1E);color:#F3E2B4;border-radius:.6cqw;padding:.9cqw 1.4cqw;box-shadow:inset 0 0 0 .15cqw var(--gold),0 .3cqw .8cqw #0007}
#run .sign .eb{color:#C9B68A}
#run .sign h2{font:700 2.3cqw/1 var(--disp);margin:.25cqw 0;color:#FBEBC4}
#run .sign p{font:italic 500 1.05cqw/1.25 var(--body);margin:0;color:#E6D6AE}
#run .who{display:grid;grid-template-columns:5.6cqw 1fr;gap:1cqw;align-items:center;background:#FBF1DA;border:.12cqw solid #C9AE76;border-radius:.6cqw;padding:.7cqw 1cqw}
#run .who .pt{aspect-ratio:1;border-radius:50%;background-size:170%;background-position:50% 20%;border:.22cqw solid var(--gold);box-shadow:0 .2cqw .6cqw #0006}
#run .who h3{font:700 1.4cqw/1 var(--disp);margin:0}
#run .who .st{font:600 .82cqw var(--mono);letter-spacing:.06em;color:var(--mute);text-transform:uppercase;margin-top:.25cqw}
#run .who .st b{color:var(--leaf)}
#run .who .gear{font:italic 500 1cqw/1.25 var(--body);color:#4A3622;margin-top:.3cqw}
#run .purse{display:flex;align-items:center;gap:.6cqw;font:700 2cqw var(--disp);color:#F8E6B4;background:linear-gradient(#2A1E14,#1A120C);border:.15cqw solid var(--gold);border-radius:.6cqw;padding:0 1.4cqw;box-shadow:0 .3cqw .8cqw #0007;white-space:nowrap}
#run .shelves{display:grid;grid-template-columns:3fr 3fr 1.6fr;gap:1cqw}
#run .shelf{background:linear-gradient(#F8EDD2,#EBD7AA);border:.12cqw solid #B8955A;border-radius:.6cqw;padding:.7cqw .8cqw 1.3cqw;box-shadow:inset 0 0 1cqw #A07A4233}
#run .shelf h4{display:flex;align-items:center;gap:.6cqw;margin:0 0 .9cqw;font:700 1.45cqw/1 var(--disp)}
#run .shelf h4 svg{width:2cqw;height:2cqw}
#run .shelf h4 small{display:block;font:600 .75cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:.2cqw}
#run .shelf .cards{gap:1.1cqw;flex-wrap:nowrap}
#run .svc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;width:9cqw;aspect-ratio:600/840;margin:0 auto;border-radius:.6cqw;border:.15cqw dashed #A8823E;background:#FBF3DF;color:var(--ink);text-align:center;padding:.6cqw}
#run .svc:hover:not(:disabled){background:#FFF8E6}
#run .svc svg{width:3cqw;height:3cqw}
#run .svc b{font:700 1.15cqw/1.1 var(--disp)}
#run .purse.svcp{font-size:1.2cqw;padding:.2cqw .7cqw}
#run .svc i{font:italic 500 .95cqw/1.2 var(--body);color:var(--mute)}
#run .shopfoot{display:flex;align-items:center;gap:1cqw;background:linear-gradient(#F4E6C4,#E6D2A2);border:.12cqw solid #B8955A;border-radius:.6cqw;padding:.5cqw .6cqw .5cqw 1.2cqw}
#run .shopfoot .note{flex:1}
/* market, setup, rares */
#run .keep{width:min(100%,86cqw);display:flex;flex-direction:column;gap:.8cqw}
#run .mates3{display:flex;justify-content:center;gap:2cqw;flex-wrap:wrap}
#run .mcol{display:flex;flex-direction:column;align-items:center;gap:.5cqw}
/* fight stop */
#run .fight{display:grid;grid-template-columns:auto 1fr;gap:1.8cqw;align-items:center;width:min(100%,80cqw)}
#run .ecards{display:flex;gap:.8cqw;align-items:flex-end}
#run .party{display:flex;flex-direction:column;gap:.4cqw}
#run .prow{display:grid;grid-template-columns:2.2cqw 7cqw 1fr 4.6cqw;gap:.6cqw;align-items:center;font:600 1.15cqw var(--body)}
#run .prow .pt{width:2.2cqw;height:2.2cqw;border-radius:50%;background-size:180%;background-position:50% 22%;border:.15cqw solid var(--gold)}
#run .prow .n{font:600 .95cqw var(--mono);text-align:right;color:var(--mute)}
#run .hbar{position:relative;height:.75cqw;border-radius:.4cqw;background:#3A1A14;overflow:hidden}
#run .hbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#B24A3B,#E2735A);transition:width .6s}
#run .ehp{display:grid;grid-template-columns:1fr 9cqw;gap:.6cqw;align-items:center}
#run .ehp .hbar{height:1cqw}
#run .tiny{font:600 .85cqw var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* end */
#run .endttl{font:700 3.4cqw/1 var(--disp);color:var(--ink)}
#run .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7cqw}
#run .stats div{text-align:center;padding:.5cqw;border-radius:.6cqw;background:#FBF3DF;border:.1cqw solid #C9A86A}
#run .stats b{display:block;font:700 1.8cqw var(--disp)}#run .stats span{font:500 1.05cqw var(--body);color:var(--mute)}
#run .hl{display:grid;grid-template-columns:repeat(2,1fr);gap:.5cqw}
#run .hl div{padding:.4cqw .8cqw;font-size:1.1cqw;border-radius:.5cqw;background:#FBF3DF;border-left:.3cqw solid var(--gold)}
#run table.sum{border-collapse:collapse;width:100%;font-size:1.1cqw}
#run table.sum th{font:600 .8cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:left;padding:.3cqw .5cqw;border-bottom:1px solid #C9A86A}
#run table.sum td{color:var(--ink);padding:.3cqw .5cqw;border-bottom:1px solid #E2D2AA;font-variant-numeric:tabular-nums}
#run .tw{overflow-x:auto}

/* ---------- phone width: run bar, the scene, then the panel below ---------- */
@media (max-width:760px){
  #run{display:block;padding:6px 10px 16px}
  #run .stage{width:100%;aspect-ratio:auto;min-height:0;overflow:visible;display:flex;flex-direction:column;gap:8px;background:none;border:0;box-shadow:none;container-type:normal}
  #run .runbar{position:static;translate:none;width:100%;order:1}#run .runbar text{display:none}
  #run .rbcap{display:block!important;text-align:center;font:700 13px var(--disp);color:#F3E2B4;letter-spacing:.04em;margin-top:3px}
  #run .purse.svcp{font-size:14px;padding:3px 9px}
  #run .shelf h4{margin-bottom:16px}
  #run .seat .bub{font-size:10px;max-width:84px}
  #run .panel .frame{width:100%!important}
  #run .camp.six{gap:4px}#run .camp.six .seat{width:40px}#run .camp.six .seat .nm{font-size:8.5px}#run .camp.six .fire{width:40px}
  #run .rscene{position:relative;order:2;height:250px;border-radius:12px;border:1px solid #4A3A24}
  #run .panel{position:static;order:3;display:block;padding:0}
  #run .panel.trail,#run .panel.tall,#run .panel.title,#run .panel.shopmode{bottom:auto}
  #run .mapwrap{left:2%;right:2%;top:4%;transform:none}
  #run .lamp{width:46px}#run .fly{width:3px}
  #run .camp{gap:8px;bottom:6px}
  #run .seat{width:48px}#run .seat .nm{font-size:10px}#run .seat .hp{height:4px}#run .seat .bub{font-size:11px;max-width:110px;padding:2px 6px;border-radius:6px}
  #run .fire{width:52px;height:46px}#run .fire .glow{width:160px;height:70px}
  #run .frame{border-radius:12px;padding:14px 14px 16px;max-height:none;overflow:visible;box-shadow:inset 0 0 0 2px #E9D3A0,inset 0 0 0 4px var(--gold),inset 0 0 0 5px #F2E2BA,0 0 0 2px #4A3218,0 8px 20px #000a}
  #run .cn{width:38px;height:38px}#run .medal{width:40px;top:-14px}
  #run .eb{font-size:10px}#run h2.tt{font-size:22px}#run h2.tt.sm{font-size:19px}#run .lead{font-size:16px}#run .it{font-size:15px}#run .note{font-size:14px}
  #run .rule{height:12px;max-width:200px;margin:6px 0}
  #run .row{gap:8px}
  #run .btn{font-size:14px;padding:10px 14px;border-radius:8px;border-width:2px}#run .big{min-width:0;flex:1 1 140px;padding:9px 12px}#run .big b{font-size:14px}#run .big small{font-size:12px}#run .big .ic{width:24px;height:24px}
  #run .card{--w:96px!important;border-radius:6px}#run .card img{border-radius:6px}
  #run .card .price{font-size:13px;right:-5px;top:-7px;padding:2px 7px 2px 3px;border-width:2px}#run .card .rare{font-size:10px;left:-4px;top:-6px;padding:3px 6px}#run .card .stamp{font-size:11px}#run .card .tag{font-size:9px;bottom:-9px;padding:2px 5px}
  #run .cards{gap:10px}
  #run .logo{font-size:46px}#run .tagline{font-size:17px}#run .menu{width:min(260px,90%);gap:8px;margin-top:12px}#run .menu .btn{font-size:15px;padding:11px}#run .soon{font-size:9px}
  #run .panel.title .frame{background:none;box-shadow:none;padding:6px}
  #run .heroes{grid-template-columns:repeat(3,1fr);gap:8px}#run .hero span{font-size:13px}#run .hero span.mt{font-size:9px}
  #run .hdet{grid-template-columns:84px 1fr;gap:12px}#run .hdet h3{font-size:22px}#run .hdet .cl{font-size:15px}#run .hdet li{font-size:15px}
  #run .pill{font-size:13px;padding:1px 8px;border-width:1.5px}#run .seg button{font-size:14px;padding:5px 12px}
  #run .mate{font-size:14px;gap:6px;padding:3px 9px 3px 3px}#run .mate .pt{width:26px;height:26px;border-width:2px}#run .mate .st{font-size:10px}
  #run .trailbox{grid-template-columns:84px 1fr;gap:12px;width:100%;padding:14px}
  #run .tn{font-size:13px;max-width:none;gap:6px}#run .tn .ic{width:28px;height:28px}#run .notes3{gap:8px 14px}
  #run .evbox{grid-template-columns:1fr;width:100%;padding:22px 14px 16px}
  #run .evcard{width:200px;margin:0 auto;padding:5px}#run .evcard .ban{font-size:17px;margin-top:-14px;padding:6px}#run .evcard .rb{font-size:14px;padding:8px}
  #run .effect{grid-template-columns:26px 1fr;gap:8px;padding:8px 10px}#run .effect .res{font-size:14px}
  #run .grid{max-height:240px;gap:6px}#run .grid .card{--w:70px!important}
  #run .shop{width:100%;padding:14px;gap:10px}
  #run .shophead{grid-template-columns:1fr;gap:8px}#run .sign{padding:10px 14px}#run .sign h2{font-size:22px}#run .sign p{font-size:14px}
  #run .who{grid-template-columns:52px 1fr;gap:10px;padding:8px 10px}#run .who h3{font-size:17px}#run .who .st{font-size:10px}#run .who .gear{font-size:13px}
  #run .purse{font-size:20px;padding:6px 14px;justify-self:start;gap:8px}
  #run .shelves{grid-template-columns:1fr;gap:10px}#run .shelf{padding:8px 8px 16px}#run .shelf h4{font-size:17px;gap:8px}#run .shelf h4 svg{width:22px;height:22px}#run .shelf h4 small{font-size:9px}
  #run .shelf .cards{flex-wrap:wrap}
  #run .svc{width:120px;gap:5px}#run .svc svg{width:30px;height:30px}#run .svc b{font-size:14px}#run .svc i{font-size:12px}
  #run .shopfoot{flex-wrap:wrap;padding:8px 10px}
  #run .keep{width:100%;gap:10px}
  #run .mates3 .card{--w:54px!important}
  #run .fight{grid-template-columns:1fr;gap:12px;width:100%}#run .ecards{justify-content:center;flex-wrap:wrap}
  #run .prow{grid-template-columns:24px 66px 1fr 44px;gap:6px;font-size:14px}#run .prow .pt{width:24px;height:24px}#run .prow .n{font-size:11px}
  #run .hbar{height:8px}#run .ehp{grid-template-columns:1fr 110px}#run .ehp .hbar{height:10px}#run .tiny{font-size:10px}
  #run .endttl{font-size:28px}#run .stats{grid-template-columns:repeat(2,1fr);gap:6px}#run .stats b{font-size:20px}#run .stats span{font-size:13px}
  #run .hl{grid-template-columns:1fr}#run .hl div{font-size:14px;padding:5px 9px}
  #run table.sum{font-size:13px}#run table.sum th{font-size:9px}
  #run .coin{border-width:1.5px}
}

/* v62: the camp before the boss (every hero half their health back): a row a hero, the bar filling from before to after */
#run .camplist{display:flex;flex-direction:column;gap:.55cqw;margin-top:.6cqw}
#run .camprow{display:grid;grid-template-columns:3cqw 7cqw 1fr 3.4cqw 4.6cqw;align-items:center;gap:.7cqw;font:600 1.15cqw/1.2 "EB Garamond",serif}
#run .camprow .cpt{width:3cqw;height:3cqw;border-radius:50%;background-size:cover;background-position:center 20%;box-shadow:0 0 0 .15cqw #C9A048}
#run .camprow .hp.big{position:relative;height:1cqw;border-radius:1cqw;background:#3A2414;overflow:hidden;box-shadow:inset 0 0 0 .1cqw #6B4A2A}
#run .camprow .hp.big i{position:absolute;left:0;top:0;bottom:0;border-radius:1cqw}
#run .camprow .hp.big .now{background:linear-gradient(#9BD36A,#5F8F4D);width:var(--to);animation:campfill 1.4s .35s ease-out both}
#run .camprow .hp.big .was{background:linear-gradient(#E2735A,#A8402E);z-index:1;animation:campwas 1.4s .35s ease-out both}
#run .camprow .gain{color:#3E7A2E;font-weight:700}
#run .camprow .of{color:#6B5536;text-align:right}
@keyframes campfill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes campwas{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){#run .camprow .hp.big i{animation:none}#run .camprow .hp.big .was{display:none}}

/* online (Tim, 2026-10-20): a pressed Continue is a green, disabled check; a ready seat by the fire shows a green check */
#run .btn.passed,#run .btn.passed:disabled{background:linear-gradient(#4E8A4A,#2F6038)!important;color:#F3FFE8!important;border-color:#1F4A26!important;opacity:1!important;cursor:default}
#run .camp .seat{position:relative}
#run .camp .seat .rdy{position:absolute;right:-.3cqw;top:1.6cqw;width:1.9cqw;height:1.9cqw;min-width:22px;min-height:22px;border-radius:50%;display:grid;place-items:center;background:#3E8A44;color:#fff;font:700 1.2cqw/1 system-ui,sans-serif;border:.15cqw solid #F3FFE8;box-shadow:0 .2cqw .6cqw #0008;z-index:2}