/* ============================================================================
   WisGo — race cards and race map (v117). See racecard.js and racemap.js.
   Written for both looks: the colours are the theme's own variables, so the
   light theme (html.lt) needs no copy in light.css.
   ========================================================================== */

/* ---------------------------------------------------------------- layout */
.rc-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-width:0}
.rc-top .kicker{margin:0;flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-top .tk-dots{flex:1;margin:0}
.rc-h{font-size:clamp(1.55rem,6.8vw,2.05rem);margin-top:14px;line-height:1.08;letter-spacing:-.01em}
.rc-h.long{font-family:var(--sans);font-size:1.18rem;line-height:1.4;font-weight:700;letter-spacing:0}

/* ------------------------------------------------------------ the picture */
.rc-hero{
  --ac:var(--accent,#FFC53D);
  position:relative;flex:none;height:176px;border-radius:26px;overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface-2);
  background:radial-gradient(120% 95% at 50% 105%,color-mix(in srgb,var(--ac) 40%,transparent),transparent 72%),
             linear-gradient(170deg,color-mix(in srgb,var(--ac) 14%,var(--surface)),var(--surface));
}
.rc-hero > *{grid-area:1/1}
.rc-hero.sm{height:128px}
.rc-glow{width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--ac) 32%,transparent);filter:blur(20px)}
.rc-ring{width:104px;height:104px;border-radius:34px;border:2px solid var(--ac);opacity:0;animation:rcRing 2.6s ease-out infinite}
.rc-ring.r2{animation-delay:1.3s}
@keyframes rcRing{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.rc-main{
  position:relative;z-index:2;width:98px;height:98px;border-radius:32px;display:grid;place-items:center;
  background:var(--ac);color:#1d1600;box-shadow:0 12px 30px color-mix(in srgb,var(--ac) 45%,transparent);
}
.rc-main .wi{width:54px;height:54px;stroke-width:1.9}
.rc-hero.sm .rc-main{width:74px;height:74px;border-radius:24px}
.rc-hero.sm .rc-main .wi{width:40px;height:40px}
.rc-hero.sm .rc-ring{width:80px;height:80px;border-radius:26px}
.rc-say{
  position:absolute;z-index:3;top:18px;right:calc(50% + 30px);max-width:44%;
  background:var(--bg-2);color:var(--white);border:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15;
  padding:8px 12px;border-radius:16px 16px 5px 16px;box-shadow:0 8px 20px rgba(0,0,0,.16);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform-origin:100% 100%;animation:rcSay 3.2s ease-in-out infinite;
}
.rc-say[lang=km]{font-family:'Khmer',var(--sans);letter-spacing:0;font-size:1.05rem}
@keyframes rcSay{0%,8%{transform:scale(.4);opacity:0}16%,84%{transform:scale(1);opacity:1}92%,100%{transform:scale(.9);opacity:0}}
.rc-pts{
  position:absolute;z-index:3;top:12px;right:12px;display:flex;align-items:center;gap:4px;
  background:var(--gold);color:#221900;border-radius:999px;padding:6px 12px 6px 9px;
  font-family:var(--display);font-size:1.02rem;box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.rc-pts .wi{width:16px;height:16px;fill:currentColor}
.rc-orb{position:absolute;z-index:1;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--white);border:1px solid var(--line);animation:rcBob 3s ease-in-out infinite}
.rc-orb .wi{width:22px;height:22px}
.rc-orb.o1{left:calc(50% - 112px);top:46px}
.rc-orb.o2{left:calc(50% + 72px);bottom:26px;animation-delay:-1.5s}

/* how each picture moves */
@keyframes rcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fx-bob .rc-main{animation:rcBob 2.6s ease-in-out infinite}
@keyframes rcShake{0%,46%,100%{transform:rotate(0)}50%{transform:rotate(-13deg)}56%{transform:rotate(11deg)}62%{transform:rotate(-8deg)}68%{transform:rotate(5deg)}74%{transform:rotate(0)}}
.fx-shake .rc-main .wi{animation:rcShake 2.2s ease-in-out infinite}
@keyframes rcWave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(18deg)}20%{transform:rotate(-10deg)}30%{transform:rotate(16deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.fx-wave .rc-main .wi{transform-origin:70% 85%;animation:rcWave 2.4s ease-in-out infinite}
.rc-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;animation:rcFlash 2.8s ease-out infinite;pointer-events:none}
@keyframes rcFlash{0%,62%{opacity:0}66%{opacity:.85}100%{opacity:0}}
@keyframes rcSnap{0%,60%,100%{transform:scale(1)}64%{transform:scale(.9)}70%{transform:scale(1.05)}}
.fx-flash .rc-main{animation:rcSnap 2.8s ease-out infinite}
@keyframes rcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.fx-pulse .rc-main{animation:rcPulse 1.3s ease-in-out infinite}
@keyframes rcDance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) rotate(-8deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-12px) rotate(8deg)}}
.fx-dance .rc-main{animation:rcDance 1.1s ease-in-out infinite}
.rc-notes span{position:absolute;z-index:1;color:var(--ac);opacity:0;animation:rcNote 2.4s ease-out infinite}
.rc-notes .wi{width:26px;height:26px;stroke-width:2.4}
.rc-notes span:nth-child(1){left:calc(50% - 92px);bottom:30px}
.rc-notes span:nth-child(2){left:calc(50% + 66px);bottom:40px;animation-delay:.8s}
.rc-notes span:nth-child(3){left:calc(50% - 40px);bottom:24px;animation-delay:1.6s}
@keyframes rcNote{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-110px) scale(1.1) rotate(18deg);opacity:0}}
.rc-rise span{position:absolute;z-index:3;left:calc(50% + 58px);top:56px;color:var(--white);opacity:0;animation:rcRise 1.8s ease-out infinite}
.rc-rise span:nth-child(2){left:calc(50% - 84px);animation-delay:.9s}
.rc-rise .wi{width:30px;height:30px;stroke-width:2.6}
@keyframes rcRise{0%{transform:translateY(40px);opacity:0}30%{opacity:1}100%{transform:translateY(-36px);opacity:0}}
.fx-rise .rc-main .wi{animation:rcBob 1.8s ease-in-out infinite}
.rc-bits i{position:absolute;z-index:3;top:-14px;left:50%;width:12px;height:12px;border-radius:3px;background:var(--white);opacity:.8;animation:rcDrop 2.1s ease-in infinite}
.rc-bits i:nth-child(1){margin-left:-24px;transform:rotate(20deg)}
.rc-bits i:nth-child(2){margin-left:4px;width:9px;height:16px;animation-delay:.7s;background:var(--ac)}
.rc-bits i:nth-child(3){margin-left:-6px;animation-delay:1.4s;border-radius:50%}
@keyframes rcDrop{0%{top:-14px;opacity:0}15%{opacity:1}70%{top:80px;opacity:1}78%,100%{top:86px;opacity:0}}
@keyframes rcGulp{0%,62%,100%{transform:scale(1)}70%{transform:scale(1.07,.93)}}
.fx-drop .rc-main{animation:rcGulp .7s ease-in-out infinite}
.rc-talk span{position:absolute;z-index:3;top:28px;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--white);border:1px solid var(--line);opacity:0;animation:rcPopIn 2.4s ease-in-out infinite}
.rc-talk .wi{width:24px;height:24px}
.rc-talk .l{left:calc(50% - 96px)}
.rc-talk .r{left:calc(50% + 54px);animation-delay:1.2s}
@keyframes rcPopIn{0%,6%{transform:scale(.3);opacity:0}14%,44%{transform:scale(1);opacity:1}52%,100%{transform:scale(.8);opacity:0}}
.rc-frame{position:relative;z-index:3;width:150px;height:130px;animation:rcFocus 2.6s ease-in-out infinite}
.rc-frame i{position:absolute;width:26px;height:26px;border:4px solid var(--white);border-radius:4px}
.rc-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.rc-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.rc-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.rc-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
@keyframes rcFocus{0%,100%{transform:scale(1.18);opacity:.5}45%,70%{transform:scale(1);opacity:1}}
.rc-spark span{position:absolute;z-index:3;color:var(--ac);opacity:0;animation:rcPopIn 1.8s ease-in-out infinite}
.rc-spark .wi{width:28px;height:28px}
.rc-spark span:nth-child(1){left:calc(50% - 82px);top:34px}
.rc-spark span:nth-child(2){left:calc(50% + 58px);bottom:30px;animation-delay:.9s}
@keyframes rcPop{0%,100%{transform:scale(1)}20%{transform:scale(1.14)}35%{transform:scale(.96)}50%{transform:scale(1)}}
.fx-pop .rc-main{animation:rcPop 1.8s ease-in-out infinite}
/* sort: four people find their place, shortest to tallest */
.fx-sort .rc-ring{display:none}
.rc-bars{position:relative;z-index:2;width:156px;height:104px}
.rc-bars i{position:absolute;bottom:0;width:30px;border-radius:15px 15px 6px 6px;background:var(--ac);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.rc-bars i::before{content:"";position:absolute;left:50%;top:-24px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:inherit}
.rc-bars .b1{height:58px;left:0}.rc-bars .b2{height:36px;left:42px}.rc-bars .b3{height:76px;left:84px;opacity:.85}.rc-bars .b4{height:48px;left:126px;opacity:.92}
.rc-bars .b1{animation:rcS1 4s ease-in-out infinite}
.rc-bars .b2{animation:rcS2 4s ease-in-out infinite}
.rc-bars .b3{animation:rcS3 4s ease-in-out infinite}
.rc-bars .b4{animation:rcS4 4s ease-in-out infinite}
@keyframes rcS1{0%,25%{left:0}50%,90%{left:84px}100%{left:0}}
@keyframes rcS2{0%,25%{left:42px}50%,90%{left:0}100%{left:42px}}
@keyframes rcS3{0%,25%{left:84px}50%,90%{left:126px}100%{left:84px}}
@keyframes rcS4{0%,25%{left:126px}50%,90%{left:42px}100%{left:126px}}

/* ------------------------------------------- the strip that plays itself */
.rc-steps{list-style:none;display:flex;align-items:stretch;margin:14px 0 0;padding:0}
.rc-st{
  flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;padding:12px 4px 11px;border-radius:18px;background:var(--surface);border:2px solid var(--line);
  animation-duration:3.6s;animation-iteration-count:infinite;animation-name:rcStep3;animation-delay:calc(var(--i) * 1.2s);
}
.rc-steps.n2 .rc-st{animation-name:rcStep2;animation-duration:2.6s;animation-delay:calc(var(--i) * 1.3s)}
.rc-steps.n4 .rc-st{animation-name:rcStep4;animation-duration:4.8s}
/* v119: the arrow is a column of its own between two steps, level with the
   icons, and nudges forward as the turn passes to the next step */
.rc-arr{
  flex:none;width:18px;display:flex;justify-content:center;padding-top:31px;color:var(--dim);opacity:.5;
  animation-duration:3.6s;animation-iteration-count:infinite;animation-name:rcArr3;animation-delay:calc(var(--i) * 1.2s);
}
.rc-steps.n2 .rc-arr{animation-name:rcArr2;animation-duration:2.6s;animation-delay:calc(var(--i) * 1.3s)}
.rc-steps.n4 .rc-arr{width:14px;animation-name:rcArr4;animation-duration:4.8s}
.rc-arr::before{
  content:"";display:block;width:8px;height:8px;margin-left:-3px;
  border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);
}
@keyframes rcArr3{0%,20%{opacity:.5;transform:none}27%,34%{opacity:1;color:var(--accent);transform:translateX(3px)}42%,100%{opacity:.5;transform:none}}
@keyframes rcArr2{0%,36%{opacity:.5;transform:none}42%,50%{opacity:1;color:var(--accent);transform:translateX(3px)}58%,100%{opacity:.5;transform:none}}
@keyframes rcArr4{0%,14%{opacity:.5;transform:none}19%,25%{opacity:1;color:var(--accent);transform:translateX(3px)}31%,100%{opacity:.5;transform:none}}
.rc-si{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--white);
  animation:inherit;animation-name:rcStepI3}
.rc-steps.n2 .rc-si{animation-name:rcStepI2}
.rc-steps.n4 .rc-si{animation-name:rcStepI4}
.rc-si .wi{width:27px;height:27px}
.rc-si b{font-family:var(--display);font-size:1.2rem}
/* v119: whole words, hyphenated if a word is too long for its box ("some-thing", not "somethin g") */
.rc-sl{font-size:.8rem;font-weight:700;line-height:1.2;color:var(--white);max-width:100%;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.rc-steps.n4 .rc-sl{font-size:.74rem}
.rc-steps .rc-sl.sm{font-size:.66rem;letter-spacing:-.01em}
.rc-steps.n4 .rc-si{width:42px;height:42px;border-radius:14px}
.rc-steps.n4 .rc-si .wi{width:24px;height:24px}
.rc-steps.n4 .rc-arr{padding-top:28px}
@keyframes rcStep3{0%,30%{border-color:var(--accent);transform:translateY(-3px)}36%,100%{border-color:var(--line);transform:none}}
@keyframes rcStep2{0%,46%{border-color:var(--accent);transform:translateY(-3px)}52%,100%{border-color:var(--line);transform:none}}
@keyframes rcStep4{0%,22%{border-color:var(--accent);transform:translateY(-3px)}27%,100%{border-color:var(--line);transform:none}}
@keyframes rcStepI3{0%,30%{background:var(--accent);color:#1d1600}36%,100%{background:var(--surface-2);color:var(--white)}}
@keyframes rcStepI2{0%,46%{background:var(--accent);color:#1d1600}52%,100%{background:var(--surface-2);color:var(--white)}}
@keyframes rcStepI4{0%,22%{background:var(--accent);color:#1d1600}27%,100%{background:var(--surface-2);color:var(--white)}}

/* ---------------------------------------------- words to say, as bubbles */
.rc-ask{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.rc-ask p{
  align-self:flex-start;max-width:90%;padding:10px 15px;border-radius:19px 19px 19px 6px;
  background:var(--surface);border:1.5px solid var(--line);font-weight:700;font-size:1.02rem;line-height:1.3;
  animation:rcBubble .45s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i) * .35s + .15s);
}
.rc-ask p:first-child{background:var(--surface-2);font-weight:600;color:var(--dim)}
.rc-ask p[lang=km]{font-family:'Khmer',var(--sans);letter-spacing:0}
@keyframes rcBubble{from{transform:translateY(8px) scale(.9);opacity:0}to{transform:none;opacity:1}}

/* ----------------------------------------------------------- who leads */
.rc-lead{display:flex;align-items:center;gap:10px;margin-top:12px;padding:7px 14px 7px 7px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--line);min-width:0}
.rc-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;background:hsl(var(--h,42) 62% 42%)}
.rc-lt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.rc-ln{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-lt small{color:var(--dim);font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-role{flex:none;display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--dim)}
.rc-role .wi{width:17px;height:17px}

/* ----------------------------------------------------- rules, as chips */
.rc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rc-chip{border-radius:16px;background:var(--surface-2);border:1px solid var(--line);font-size:.86rem;font-weight:700;max-width:100%}
.rc-chip summary,.rc-cs{display:flex;align-items:center;gap:7px;padding:8px 12px;list-style:none;cursor:pointer;color:var(--white)}
.rc-cs{cursor:default}
.rc-chip summary::-webkit-details-marker{display:none}
.rc-chip .wi{width:17px;height:17px;flex:none}
.rc-chip .rc-cv{width:14px;height:14px;opacity:.55;transition:transform .2s}
.rc-chip[open]{flex-basis:100%}
.rc-chip[open] .rc-cv{transform:rotate(180deg)}
.rc-chip p{padding:0 14px 11px 36px;font-weight:500;color:var(--dim);line-height:1.45}

/* ------------------------------------------------ the full text, folded */
.rc-more{margin-top:14px;border-top:1px solid var(--line)}
.rc-more summary{display:flex;align-items:center;gap:8px;padding:12px 0 4px;color:var(--dim);font-weight:700;font-size:.9rem;list-style:none;cursor:pointer}
.rc-more summary::-webkit-details-marker{display:none}
.rc-more summary .wi{width:17px;height:17px}
.rc-more .rc-cv{margin-left:auto;transition:transform .2s}
.rc-more[open] .rc-cv{transform:rotate(180deg)}
.rc-more p{color:var(--dim);line-height:1.5;font-size:.93rem;white-space:pre-line;margin-top:9px}

/* -------------------------------------------------- task-done list rows */
.tk-done .rc-di{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2)}
.tk-done .rc-di .wi{width:17px;height:17px}

/* --------------------------------------------- arrival: location step */
.rc-here{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:12px 14px;border-radius:18px;
  background:color-mix(in srgb,var(--ok) 14%,var(--surface));border:1.5px solid color-mix(in srgb,var(--ok) 45%,transparent);font-weight:700}
.rc-here .wi{width:22px;height:22px;color:var(--ok);flex:none}
.rc-here small{display:block;font-weight:600;color:var(--dim);font-size:.82rem}
.rc-gps{display:flex;align-items:center;gap:14px;margin-top:4px;padding:14px;border-radius:20px;background:var(--surface);border:1.5px solid var(--line)}
.rc-gps .rc-hero{width:92px;height:92px;border-radius:22px}
.rc-gps .rc-hero .rc-main{width:56px;height:56px;border-radius:18px}
.rc-gps .rc-hero .rc-main .wi{width:30px;height:30px}
.rc-gps .rc-hero .rc-ring{width:56px;height:56px;border-radius:18px}
.rc-gps .rc-glow{width:80px;height:80px}
.rc-gps-t{flex:1;min-width:0}
.rc-gps-t b{display:block;font-family:var(--display);font-size:1.12rem}
.rc-gps-t .geo-pill{margin-top:8px}
.rc-locked{opacity:.45;filter:saturate(.4);pointer-events:none}
.rc-step-l{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:16px 0 8px}

/* ================================================================ MAP */
.rmp-wrap{position:relative;isolation:isolate;flex:none;height:min(46vh,380px);margin:0 -18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2);overflow:hidden}
.rmp-map{position:absolute;inset:0;background:var(--surface-2)}
.rmp-map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}
.rmp-tip{position:absolute;z-index:500;left:12px;right:12px;top:10px;display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:14px;background:var(--bg-2);color:var(--white);border:1px solid var(--line);
  font-size:.82rem;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.rmp-tip .wi{width:17px;height:17px;flex:none;color:var(--accent)}
.rmp-center{position:absolute;z-index:500;right:12px;bottom:12px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--white);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.rmp-center .wi{width:22px;height:22px}
.rmp-wait{position:absolute;z-index:400;inset:0;display:grid;place-items:center;text-align:center;color:var(--dim);font-weight:700;font-size:.9rem;padding:20px}
.rmp-wait .wi{width:30px;height:30px;display:block;margin:0 auto 8px;animation:rcPulse 1.3s ease-in-out infinite}

/* the team, walking */
.rmp-me{position:relative;width:46px;height:46px}
.rmp-me::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:rgba(0,194,168,.28);animation:rmPing 2s ease-out infinite}
.rmp-me b{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:#00A88F;color:#fff;border:3px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.3);font-family:var(--display);font-size:.95rem;font-weight:800}
.rmp-me b .wi{width:24px;height:24px;stroke-width:2.4}
.rmp-me i{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;white-space:nowrap;font-style:normal;
  font-size:.7rem;font-weight:800;padding:2px 7px;border-radius:999px;background:#fff;color:#14261C;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rmp-me.walk b .wi{animation:rmStep .5s ease-in-out infinite alternate}
@keyframes rmStep{from{transform:translateY(-1px) rotate(-6deg)}to{transform:translateY(1px) rotate(6deg)}}
@keyframes rmPing{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
/* the checkpoint you are walking to */
.rmp-pin{position:relative;width:54px;height:66px}
.rmp-pin b{position:absolute;left:0;top:0;width:54px;height:54px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  background:var(--pc,#FFC53D);border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.3);animation:rmHop 1.6s ease-in-out infinite}
.rmp-pin span{position:absolute;left:0;top:0;width:54px;height:54px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.8rem;color:#1d1600;animation:rmHop2 1.6s ease-in-out infinite}
@keyframes rmHop{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(5px,-5px)}}
@keyframes rmHop2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rmp-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#14261C;border:2px solid rgba(20,38,28,.35);
  font-family:var(--display);font-weight:800;font-size:.68rem;opacity:.85}
.rmp-dot.done{background:#1E8E4E;color:#fff;border-color:#fff}
.rmp-dot.done .wi{width:16px;height:16px;stroke-width:3}

/* under the map */
.rmp-info{display:flex;align-items:flex-end;gap:12px;margin-top:14px}
.rmp-dist{font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;letter-spacing:-.02em}
.rmp-dist small{font-size:1rem;color:var(--dim);font-weight:700;margin-left:6px;letter-spacing:0}
.rmp-bar{position:relative;flex:none;height:12px;border-radius:999px;background:var(--line);margin:16px 14px 0 14px;overflow:visible}
.rmp-bar > span{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.rmp-bar > b{position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#00A88F;color:#fff;border:2.5px solid var(--bg-2);display:grid;place-items:center;transition:left .8s cubic-bezier(.2,.8,.2,1)}
.rmp-bar > b .wi{width:16px;height:16px;stroke-width:2.6}
.rmp-bar > i{position:absolute;right:-13px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--accent);border:2px solid var(--bg-2)}
.rmp-bar > b{z-index:1}
.rmp-hot{margin-top:14px;font-weight:800;font-size:.95rem;color:var(--dim);min-height:1.3em}
.rmp-hot.warm{color:var(--gold-ink,var(--gold))}
.rmp-hot.hot{color:var(--ok)}

/* the pop-up when you walk into the checkpoint */
.rmp-pop{position:fixed;z-index:60;inset:0;display:flex;align-items:flex-end;background:rgba(5,15,10,.45);animation:rmFade .25s both}
@keyframes rmFade{from{opacity:0}to{opacity:1}}
.rmp-pop .sheet{width:100%;padding:26px 20px calc(20px + var(--safe-b));border-radius:30px 30px 0 0;background:var(--bg-2);text-align:center;
  animation:rmUp .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rmUp{from{transform:translateY(100%)}to{transform:none}}
.rmp-pop .badge-big{width:96px;height:96px;margin:0 auto 14px;border-radius:32px;display:grid;place-items:center;background:var(--accent);color:#1d1600;
  font-family:var(--display);font-weight:800;font-size:1.3rem;animation:rcPop 1.2s ease-in-out infinite;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.rmp-pop h2{font-size:1.9rem}
.rmp-pop p{color:var(--dim);margin:8px 0 18px;font-weight:600}

@media (prefers-reduced-motion: reduce){
  .rc-hero *, .rc-steps .rc-st, .rc-steps .rc-arr, .rc-steps .rc-si, .rc-ask p, .rmp-me::before, .rmp-pin b, .rmp-pin span, .rmp-me b .wi, .rmp-pop .badge-big{animation:none !important}
  .rc-say{opacity:1}
  /* no motion: the line-up picture shows the team already in height order */
  .rc-bars .b1{left:84px}.rc-bars .b2{left:0}.rc-bars .b3{left:126px}.rc-bars .b4{left:42px}
}

/* ==========================================================================
   v119 (Holy, 22 Oct): the race top bar, the location card, jobs on tap
   ========================================================================== */
/* score and clock as one button; what waits for a judge sits on its corner */
.race-score{position:relative;flex:none;display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;
  border-radius:999px;border:1.5px solid rgba(255,197,61,.5);background:rgba(255,197,61,.12);color:var(--white);font:inherit;cursor:pointer}
.race-score:active{transform:scale(.96)}
.race-score .rs-pt,.race-score .rs-cl{display:flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.race-score .rs-pt .wi{width:15px;height:15px;color:var(--gold-ink,var(--gold))}
.race-score .rs-pt b{font-family:var(--display);font-size:1.08rem;line-height:1;color:var(--gold-ink,var(--gold))}
.race-score .rs-pt small{font-family:var(--mono);font-weight:700;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink,var(--gold))}
.race-score .rs-cl{padding-left:9px;border-left:1px solid var(--line);color:var(--dim)}
.race-score .rs-cl .wi{width:14px;height:14px}
.race-score .rs-cl b{font-family:var(--mono);font-weight:700;font-size:.78rem}
.race-score .rs-pend{position:absolute;top:-7px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;font-size:.7rem;font-weight:800;line-height:1;
  background:var(--white);color:var(--bg);border:2px solid var(--bg)}
.race-score .rs-pend.unsent{background:var(--danger);color:#fff}
.race-score .rs-pend:empty{display:none}
/* on its own the bar also carries "On our own" and the house button: no icons,
   and the chip gives way first, so the house button stays on a 360px phone */
.race-score.solo{gap:7px;padding:0 10px}
.race-score.solo .wi{display:none}
.topbar .solo-chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the bonus board: the gold target */
.topbar .icon-btn.bonus-btn{color:var(--gold-ink,var(--gold));border-color:rgba(255,197,61,.5);background:rgba(255,197,61,.12)}
.topbar .icon-btn.bonus-btn .wi{width:20px;height:20px}
/* in a race the bar is full: the logo keeps its mark and drops the word */
.topbar:has(.race-score) .logo .wordmark{display:none}
/* v120: with the 💵 travel money button the race bar holds five buttons:
   a little tighter, so it still fits 360px with a 3-digit score at 1:23:45 */
.topbar:has(.money-btn){gap:5px}
.topbar:has(.money-btn) .spacer{display:none}
.topbar:has(.money-btn) .race-score{margin-left:auto;gap:7px;padding:0 10px}
.topbar:has(.money-btn) .race-score .rs-cl{padding-left:7px}
.topbar:has(.money-btn) .race-score .rs-cl .wi{display:none}
.topbar:has(.money-btn) .icon-btn{width:36px}
.topbar:has(.money-btn) .tb-back{margin-right:0}

/* the way out of a live race, at the bottom of the help screen */
.race-out{margin-top:26px;color:var(--dim)}

/* where we are: a red card until it works, then a quiet green one */
.loc-card .loc-head{display:flex;align-items:center;gap:9px;font-size:1.05rem}
.loc-card .loc-head .wi{width:20px;height:20px;flex:none}
.loc-card.need{border:2px solid var(--danger);background:rgba(255,94,91,.08)}
.loc-card.need .loc-head{color:var(--danger)}
.loc-card.need > p{margin-top:8px;line-height:1.45}
.loc-card.on .loc-head{color:var(--ok)}
.loc-card.on .loc-tick{margin-left:auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:var(--bg)}
.loc-card.on .loc-tick .wi{width:15px;height:15px;stroke-width:3}
.loc-card.on > p{margin-top:6px}
.loc-ask{margin-top:10px;font-weight:700;color:var(--gold-ink,var(--gold))}
.loc-steps{margin:10px 0 0 20px;display:flex;flex-direction:column;gap:8px;line-height:1.45;font-size:.93rem}
.loc-card .btn{width:100%}

/* jobs: icon and name; tap one for what it means */
.role-job{display:block;margin-top:6px}
.role-job summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:4px 0;min-height:36px}
.role-job summary::-webkit-details-marker{display:none}
.role-job summary .rc-cv{margin-left:auto;width:16px;height:16px;color:var(--dim);transition:transform .2s}
.role-job[open] summary .rc-cv{transform:rotate(180deg)}
.role-job p{color:var(--dim);font-size:.92rem;line-height:1.45;margin:2px 0 6px 34px}

/* the WisGo home: a live race comes first and says so */
.resume.resume-race{border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(255,197,61,.18),0 16px 40px rgba(0,0,0,.35)}
.resume.resume-race .k{color:var(--gold-ink,var(--gold))}

/* v119 (Holy, 22 Oct): the wheel. Turning, its square box sticks out past
   the screen's sides, so the page could be dragged sideways and jiggled while
   it spun. The stage never scrolls sideways, the wheel's box is clipped (its
   corners are see-through anyway) and the turning happens on its own layer. */
.stage{overflow-x:hidden}
.wheel-stage{overflow:hidden;padding:12px 0 30px;margin:0 -18px -22px;flex:none}
.wheel{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wheel-box{cursor:pointer;-webkit-user-select:none;user-select:none}
.wheel-box.spinning{cursor:default}
.wheel-hub{cursor:pointer;font:inherit;font-family:var(--display);font-size:.72rem;letter-spacing:.06em;color:var(--gold-ink,var(--gold));padding:0}
.wheel-hub:active{transform:translate(-50%,-50%) scale(.94)}
.wheel-box.spinning .wheel-hub{pointer-events:none}

/* a screen whose content is centred must still scroll to its top when it is
   taller than the phone (the finished screen was stuck half way on Android) */
.stage.center{justify-content:flex-start}
.stage.center::before,.stage.center::after{content:"";flex:none;margin:auto 0}

/* the race reminder: water, then one tip in turn */
.nudge .nb .nalso{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font-size:.86rem;opacity:.85}
.nudge .nb .nalso b{display:inline;font-family:inherit;font-size:inherit;letter-spacing:0;color:inherit;font-weight:800}

/* the finish card: the km, the steps, the route, and the map of the walk */
.fin-walk .card-label{display:flex;align-items:center;gap:6px}
.fin-walk .card-label .wi{width:15px;height:15px}
.fw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.fw-stats div{display:flex;flex-direction:column;min-width:0}
.fw-stats b{font-family:var(--display);font-size:1.7rem;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fw-stats.sm b{font-size:1.3rem}
.fw-pic img{display:block;width:100%;border-radius:14px;margin-top:12px}
.fw-pic p{margin-top:6px}
.fw-stats div:first-child b{color:var(--gold-ink,var(--gold))}
.fw-stats small{font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.fw-map{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:16px;background:#E8EEE9;border:1px solid var(--line)}
.fw-map .fw-plan{fill:none;stroke:#14261C;stroke-opacity:.55;stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;stroke-linejoin:round}
.fw-map .fw-under{fill:none;stroke:#08170F;stroke-opacity:.55;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.fw-map .fw-walk{fill:none;stroke:#FFB020;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.fw-map .fw-cp circle{fill:#0E2419;stroke:#fff;stroke-width:3}
.fw-map .fw-cp.done circle{fill:#00A88F}
.fw-map .fw-cp text{fill:#fff;font:800 14px var(--display);text-anchor:middle}
.fw-map .fw-fin circle{fill:#FFC53D;stroke:#fff;stroke-width:3}
.fw-map .fw-fin path{fill:none;stroke:#08170F;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fw-map .fw-osm{font:600 11px var(--sans);fill:#14261C;fill-opacity:.7;text-anchor:end;paint-order:stroke;stroke:#fff;stroke-width:3px}
.fin-walk .fw-share{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.fin-walk .fw-share .wi{width:17px;height:17px}

/* the wheel rule, until the team has shown the judges */
.wheel-do{border:1.5px solid rgba(255,197,61,.55);background:rgba(255,197,61,.08);margin-top:14px;text-align:left}
.wheel-do .card-label{display:flex;align-items:center;gap:6px;color:var(--gold-ink,var(--gold))}
.wheel-do .card-label .wi{width:15px;height:15px}
.wheel-do .wd-t{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2;margin-top:6px}
.wheel-do .wd-b{display:flex;gap:8px;margin-top:12px}
.wheel-do .wd-b .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.wheel-do .wd-b .wi{width:17px;height:17px}

/* v122: the travel wheel (Walk / Tuk-tuk / Try again) and its leg card */
.tr-res .rv{display:flex;align-items:center;gap:10px}
.tr-res .rv .wi{width:1.1em;height:1.1em}
.tr-res p{margin-top:6px}
#wheelActions .tk-btns .btn,.actions .tk-btns .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.leg-card{margin-top:14px;text-align:left;border:1.5px solid rgba(142,208,129,.55);background:rgba(142,208,129,.08)}
.leg-card.tuk{border-color:rgba(255,197,61,.55);background:rgba(255,197,61,.08)}
.leg-card.done{border-color:var(--line);background:transparent}
.leg-card > b,.leg-h b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2;margin-top:4px}
.leg-h{display:flex;align-items:center;gap:12px}
.leg-h > div{flex:1;min-width:0}
.leg-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#8ED081;color:#10281C}
.leg-card.tuk .leg-ic{background:#FFC53D}
.leg-card.done .leg-ic{background:var(--surface-2);color:var(--ok)}
.leg-ic .wi{width:24px;height:24px}
.leg-max{flex:none;align-self:flex-start;font-size:.8rem;font-weight:700;color:var(--dim)}
.leg-pace{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:12px 0 4px;padding:10px 14px;border-radius:16px;background:rgba(0,0,0,.18)}
.leg-pace b{font-family:var(--display);font-size:2rem;line-height:1;color:var(--ok)}
.leg-pace b.fast{color:var(--danger)}
.leg-pace b small{font-size:.9rem;color:var(--dim)}
.leg-pace span{font-size:.88rem;font-weight:700;color:var(--dim)}
.leg-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.leg-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:18px;border:2px solid var(--line);background:rgba(255,255,255,.04);text-align:left}
.leg-opt .wi{width:26px;height:26px}
.leg-opt b{font-size:1rem;font-weight:800}
.leg-opt small{font-size:.8rem;color:var(--dim)}
.leg-opt:active{transform:scale(.97)}
.leg-card .ms-chips{margin-top:12px}
.leg-card .leg-amt{width:100%;margin-bottom:8px}
.leg-left{display:flex;justify-content:space-between;gap:10px;padding-top:10px;margin-top:4px;border-top:1px solid var(--line);font-size:.92rem}
.leg-left span{color:var(--dim)}
.leg-snap{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.leg-card .linkish{margin-top:8px;font-size:.88rem}
.pace-pop{z-index:70}
.pace-pop .pace-ic{width:76px;height:76px;margin:0 auto 12px;border-radius:26px;display:grid;place-items:center;background:#FFC53D;color:#10281C}
.pace-pop .pace-ic .wi{width:38px;height:38px}
.pace-pop h2{font-size:1.6rem}