/* Desert Dash (games/dash.js): two canvas lanes in duo (the far one turned 180deg), one in solo; HUD and cues are DOM over the canvas */
.ar-dash{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:#f2c584;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ar-dash-lane{position:relative;flex:1 1 0;min-height:0;overflow:hidden;container-type:size;cursor:pointer}
.ar-dash-flip{transform:rotate(180deg)}
.ar-dash-duo .ar-dash-flip{border-bottom:4px solid var(--paper)} /* the seam between the two lanes */
.ar-dash-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* each lane's own colour on the edge its player sits at */
.ar-dash-duo .ar-dash-lane::after{content:"";position:absolute;inset:auto 0 0;height:8px;background:var(--pc);pointer-events:none}
.ar-dash-p0{--pc:var(--rose);--pcd:var(--rose-d)}.ar-dash-p1{--pc:var(--sky);--pcd:var(--sky-d)}

/* ===== HUD ===== */
.ar-dash-hud{position:absolute;inset:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4);pointer-events:none}
.ar-dash-solo .ar-dash-hud{padding-left:96px;justify-content:flex-end} /* the hub's back button sits top-left */
.ar-dash-who{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s4) var(--s1) var(--s1);border-radius:var(--r-pill);background:var(--pc);color:var(--on-c);font-family:var(--font-display);font-size:var(--fs-lg);box-shadow:var(--bevel-sm),var(--sh-1);max-width:40%}
.ar-dash-who b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-dash-av{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--paper);box-shadow:0 0 0 3px var(--paper)}
.ar-dash-av .chr{width:100%;height:100%}
.ar-dash-track{position:relative;flex:1 1 220px;height:16px;margin:16px 30px 16px 22px;border-radius:var(--r-pill);background:rgb(var(--shade)/.28);box-shadow:inset 0 2px 3px rgb(var(--shade)/.35),0 1px 0 rgba(255,255,255,.6)} /* block margins hold the 48px marker and the flag when the track wraps onto its own row */
.ar-dash-fill{position:absolute;inset:0;border-radius:inherit;background:var(--pc,var(--sun));transform-origin:0 50%;transform:scaleX(0)}
.ar-dash-solo .ar-dash-fill{--pc:var(--sun)}
.ar-dash-flag{position:absolute;right:-34px;bottom:-8px;height:40px;width:auto;filter:var(--art-drop)}
.ar-dash-flag:not([src]){display:none}
.ar-dash-rail{position:absolute;inset:0;transform:translateX(0)}
.ar-dash-mk{position:absolute;left:0;top:50%;width:48px;height:48px;translate:-50% -50%;box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--pcd,var(--sun-d)),0 6px 10px -4px rgb(var(--shade)/.5)}
.ar-dash-rv .ar-dash-mk{top:calc(50% + 26px);width:30px;height:30px;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--rc)}
.ar-dash-p0 .ar-dash-rv{--rc:var(--sky-d)}.ar-dash-p1 .ar-dash-rv{--rc:var(--rose-d)}
.ar-dash-stats{flex:none;display:flex;align-items:center;gap:var(--s3)}
.ar-dash-hearts{display:flex;gap:2px}
.ar-dash-heart{width:34px;height:34px;filter:var(--art-drop);transition:transform var(--t-ui) var(--ease-out),opacity var(--t-ui) var(--ease-out),filter var(--t-ui)}
.ar-dash-heart.lost{opacity:.35;filter:grayscale(1);transform:scale(.78)}
.ar-dash-coins{display:flex;align-items:center;gap:var(--s1);min-width:84px;padding:2px var(--s4) 2px var(--s1);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);box-shadow:var(--sh-1);font-family:var(--font-display);font-size:var(--fs-xl);line-height:1.2;font-variant-numeric:tabular-nums}
.ar-dash-coins img{width:36px;height:36px}
.ar-dash-coins b{font-weight:400}

/* ===== countdown, first-time tip, end banner ===== */
.ar-dash-cue,.ar-dash-end{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--s4);padding:72px var(--s4) 22cqh;pointer-events:none;text-align:center}
.ar-dash-count{font-family:var(--font-display);font-weight:400;font-size:clamp(3.5rem,24cqh,8rem);line-height:1;color:#fff;text-shadow:0 5px 0 var(--coral-d),0 12px 24px rgb(var(--shade)/.45)}
.ar-dash-count .bi{display:flex;flex-direction:column;align-items:center}
.ar-dash-count .en{font-size:.55em}
.ar-dash-count.pop{animation:ar-dash-pop 320ms var(--ease-out)}
@keyframes ar-dash-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.ar-dash-tip{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);padding:var(--s2) var(--s5) var(--s2) var(--s3);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);box-shadow:var(--sh-2);font-weight:700;font-size:var(--fs-lg);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.ar-dash-tip .bi{display:flex;flex-direction:column;line-height:1.25;text-align:start}
.ar-dash-tip .en{font-size:var(--fs-md);color:var(--ink-2)}
.ar-dash-tip.gone{opacity:0;transform:translateY(8px) scale(.96)}
.ar-dash-ring{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--sun);box-shadow:inset 0 -3px 0 var(--sun-d)}
.ar-dash-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--sun);animation:ar-dash-tap 1.1s var(--ease-out) infinite}
@keyframes ar-dash-tap{from{opacity:1;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}
.ar-dash-end{opacity:0;transform:scale(.94);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-move) var(--ease-out)}
.ar-dash-end.show{opacity:1;transform:none}
.ar-dash-end .bi{display:flex;flex-direction:column;align-items:center;padding:var(--s4) var(--s6);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--sh-2);font-family:var(--font-display);font-size:clamp(var(--fs-xl),13cqh,var(--fs-2xl));line-height:1.15}
.ar-dash-end .en{font-size:.6em;color:var(--ink-2)}
.ar-dash-end.win .bi{background:var(--sun);color:var(--on-c);box-shadow:var(--bevel),var(--sh-2)}
.ar-dash-end.win .en{color:var(--on-c)}

/* a short, wide lane (a phone lane in duo) */
@container (max-height:300px){.ar-dash-av,.ar-dash-coins img{width:34px;height:34px}.ar-dash-mk{width:38px;height:38px}.ar-dash-heart{width:28px;height:28px}.ar-dash-coins{font-size:var(--fs-lg)}.ar-dash-who{font-size:var(--fs-md)}.ar-dash-tip{font-size:var(--fs-md)}}
@media (prefers-reduced-motion:reduce){
  .ar-dash-count.pop{animation:none}
  .ar-dash-ring::after{animation:none;opacity:.5}
  .ar-dash-tip.gone,.ar-dash-end{transform:none}
}