/* Base reset */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: full-screen first-person 3D shop. HUD pinned to the top (progress, clock, sound),
   crosshair and action tip in the middle, one centered card for start, pause and end screens.
   The game commits to one bright bathroom-tile look, so it stays single-theme on purpose. */
:root{
  --sky:#0b2f44;
  --navy:#0b2f44;
  --navy-soft:#1c5575;
  --paper:#f2fbfd;
  --duck:#ffcf24;
  --duck-deep:#d9a400;
  --bad:#ff5a5a;
  --font-display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --font-body:'Nunito','Trebuchet MS',system-ui,sans-serif;
  --gutter:16px;
}
[hidden]{display:none!important}
html,body{height:100%}
html{height:100dvh;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
body{
  margin:0;background:var(--sky);color:var(--navy);
  font-family:var(--font-body);font-size:16px;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
#app{position:relative;width:100%;height:100%;overflow:hidden}
#stage,#fx,#flash{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#fx{pointer-events:none;overflow:hidden}
#flash{pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(255,90,90,0) 52%,rgba(255,60,60,.5) 100%)}
#flash.on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* HUD */
.hud{
  position:absolute;top:0;left:0;right:0;padding:12px var(--gutter) 0;
  display:grid;grid-template-columns:1fr auto 1fr;gap:8px 10px;align-items:start;pointer-events:none;
}
.panel{background:var(--paper);border-radius:16px;box-shadow:0 3px 0 rgba(11,47,68,.28);padding:8px 14px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-soft)}
.progress{justify-self:start;display:flex;flex-direction:column;gap:5px;min-width:132px}
.progress .count{font:400 26px/1 var(--font-display);font-variant-numeric:tabular-nums}
.progress .count small{font:800 13px var(--font-body);color:var(--navy-soft);margin-left:2px}
.bar{height:8px;border-radius:99px;background:rgba(11,47,68,.16);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--duck);border-radius:99px;transition:width .3s}
.clock{text-align:center;min-width:92px}
.clock .time{font:400 30px/1 var(--font-display);font-variant-numeric:tabular-nums}
.clock .pen{display:block;font-size:12px;font-weight:800;color:#c0392b;min-height:14px;font-variant-numeric:tabular-nums}
.chip{
  pointer-events:auto;font:800 13px/1 var(--font-body);cursor:pointer;
  background:var(--navy);color:var(--paper);border:0;border-radius:999px;padding:9px 13px;
}
.chip[aria-pressed="false"]{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);text-decoration:line-through}

/* Crosshair and tip */
.cross{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);pointer-events:none;transition:transform .12s}
.cross::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px var(--navy),0 0 0 4px rgba(255,255,255,.55);
}
.cross.on{transform:translate(-50%,-50%) scale(1.7)}
.cross.on::before{background:var(--duck)}
.tip{
  position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);
  max-width:calc(100% - 2*var(--gutter));box-sizing:border-box;text-align:center;white-space:nowrap;
  padding:7px 14px;border-radius:999px;background:rgba(11,47,68,.88);color:var(--paper);
  font-weight:800;font-size:14px;pointer-events:none;
}
.tip b{color:var(--duck);font-weight:800}
.mini{position:absolute;right:var(--gutter);top:60px;width:168px;height:126px;pointer-events:none}
.held{
  position:absolute;left:50%;bottom:84px;transform:translateX(-50%);max-width:calc(100% - 2*var(--gutter));box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;
  background:var(--duck);color:var(--navy);border-radius:999px;padding:6px 16px;font-weight:800;font-size:14px;
  box-shadow:0 3px 0 var(--duck-deep),0 0 0 2px var(--navy);pointer-events:none;white-space:nowrap;
}
.hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  max-width:calc(100% - 2*var(--gutter));box-sizing:border-box;
  padding:9px 16px;background:rgba(11,47,68,.86);color:var(--paper);
  border-radius:999px;font-weight:700;font-size:13px;text-align:center;pointer-events:none;transition:opacity .6s;
}
.hint b{font-weight:800;color:var(--duck)}
.hint.fade{opacity:0}

/* Floating feedback */
.pop{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);white-space:nowrap;
  font:400 32px/1 var(--font-display);color:#fff;
  -webkit-text-stroke:6px var(--navy);paint-order:stroke fill;
  animation:rise 1s ease-out forwards;
}
.pop.good{color:var(--duck)}
.pop.bad{color:#ff8d8d}
@keyframes rise{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}
  15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-170%) scale(1)}
}

/* Cards */
.scrim{
  position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  place-items:center;padding:var(--gutter);background:rgba(11,47,68,.42);
}
.card{
  width:100%;max-width:440px;max-height:100%;overflow:auto;box-sizing:border-box;
  background:var(--paper);border-radius:26px;padding:24px 24px 26px;text-align:center;
  box-shadow:0 8px 0 var(--navy-soft),0 24px 48px rgba(11,47,68,.35);
}
.hero-duck{width:84px;height:74px;color:var(--duck);display:block;margin:0 auto}
.title{font:400 54px/1 var(--font-display);margin:8px 0 12px;letter-spacing:.5px;text-wrap:balance}
.lead{font-size:17px;line-height:1.45;margin:0 0 14px;font-weight:600}
.rules{list-style:none;margin:0 0 20px;padding:0;text-align:left;display:grid;gap:9px;font-weight:600;font-size:15px;line-height:1.35}
.rules li{position:relative;padding-left:24px}
.rules li::before{
  content:"";position:absolute;left:0;top:.35em;width:10px;height:10px;border-radius:50%;
  background:var(--duck);box-shadow:0 0 0 2px var(--navy);
}
.keys{display:inline-flex;gap:3px;vertical-align:baseline}
.keys kbd{
  font:800 12px/1 var(--font-body);background:var(--navy);color:var(--paper);
  border-radius:6px;padding:3px 6px;min-width:12px;text-align:center;
}
.btn{
  font:400 24px/1 var(--font-display);background:var(--duck);color:var(--navy);
  border:0;border-radius:999px;padding:15px 30px;cursor:pointer;
  box-shadow:0 5px 0 var(--duck-deep),0 0 0 3px var(--navy);
  transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--duck-deep),0 0 0 3px var(--navy)}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.chip:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.small{margin:14px 0 0;font-weight:700;font-size:13px;line-height:1.4;color:var(--navy-soft)}
.best{margin:14px 0 0;font-weight:800;font-size:14px;color:var(--navy-soft)}
.error{margin:12px 0 0;font-weight:800;color:#b3261e}
.big{font:400 84px/1 var(--font-display);font-variant-numeric:tabular-nums;margin:2px 0 0}
.unit{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-soft);margin:0 0 12px}
.detail{font-size:17px;font-weight:700;margin:0 0 20px;line-height:1.4}

/* Achievements */
.btn.alt{font-size:18px;padding:11px 22px;background:var(--paper);box-shadow:0 4px 0 rgba(11,47,68,.35),0 0 0 3px var(--navy);margin-top:12px}
.btn.alt:active{box-shadow:0 1px 0 rgba(11,47,68,.35),0 0 0 3px var(--navy)}
.card.wide{max-width:680px;display:flex;flex-direction:column;overflow:hidden}
.ach-list{list-style:none;margin:0 0 18px;padding:2px 4px 6px 2px;overflow:auto;min-height:0;flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.ach{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:9px 10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px rgba(11,47,68,.14)}
.ach.done{background:#fff7d1;box-shadow:inset 0 0 0 2px var(--navy)}
.ach b{display:block;font:400 17px/1.15 var(--font-display);letter-spacing:.2px}
.ach span.d{display:block;font-size:13px;font-weight:700;line-height:1.3;color:var(--navy-soft);margin-top:2px}
.ach .meter{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:11px;font-weight:800;color:var(--navy-soft);font-variant-numeric:tabular-nums}
.ach .meter .bar{flex:1;height:6px}
.medal{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:400 20px/1 var(--font-display);background:rgba(11,47,68,.12);color:rgba(11,47,68,.4);box-shadow:inset 0 0 0 2px rgba(11,47,68,.2)}
.medal::before{content:"\2605"}
.medal.secret::before{content:"?"}
.medal.on{background:var(--duck);color:var(--navy);box-shadow:inset 0 0 0 3px var(--navy),0 2px 0 var(--duck-deep)}
.medal.on::before{content:"\2605"}
.ach-toast{
  position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:6;pointer-events:none;
  width:max-content;max-width:calc(100% - 2*var(--gutter));box-sizing:border-box;
  display:flex;gap:12px;align-items:center;padding:10px 18px 10px 12px;border-radius:20px;
  background:var(--navy);color:var(--paper);box-shadow:0 4px 0 rgba(0,0,0,.25),0 0 0 3px var(--duck);
}
.ach-toast.on{animation:achin 3.6s ease-in-out forwards}
.ach-toast .eyebrow{color:var(--duck);display:block}
.ach-toast b{display:block;font:400 20px/1.15 var(--font-display)}
.ach-toast .d{display:block;font-size:13px;font-weight:700;opacity:.9;max-width:300px}
@keyframes achin{0%{opacity:0;transform:translate(-50%,-30px)}9%{opacity:1;transform:translate(-50%,0)}88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}
/* Coins, shop, modes, announcements */
.right{display:flex;gap:8px;align-items:flex-start;justify-content:flex-end;flex-wrap:wrap}
.coinchip{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border-radius:999px;padding:7px 13px 7px 9px;font:400 17px/1 var(--font-display);box-shadow:0 3px 0 rgba(11,47,68,.28);font-variant-numeric:tabular-nums;pointer-events:none}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,var(--duck) 55%,var(--duck-deep));box-shadow:inset 0 0 0 2px var(--navy)}
.coinchip.inline{box-shadow:inset 0 0 0 2px var(--navy);padding:3px 11px 3px 6px;vertical-align:middle;margin-right:4px}
.shop-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px rgba(11,47,68,.14)}
.shop-item.sep{grid-column:1/-1;display:block;background:none;box-shadow:none;padding:6px 2px 0;font:400 20px/1.1 var(--font-display)}
.shop-item b{display:block;font:400 17px/1.15 var(--font-display)}
.shop-item .d{display:block;font-size:13px;font-weight:700;color:var(--navy-soft);margin-top:2px;line-height:1.3}
.pips{display:flex;gap:4px;margin-top:6px}
.pips i{width:12px;height:12px;border-radius:50%;background:rgba(11,47,68,.14);box-shadow:inset 0 0 0 2px rgba(11,47,68,.25)}
.pips i.on{background:var(--duck);box-shadow:inset 0 0 0 2px var(--navy)}
.buy{font:400 15px/1 var(--font-display);background:var(--duck);color:var(--navy);border:0;border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:0 3px 0 var(--duck-deep),0 0 0 2px var(--navy);white-space:nowrap}
.buy:disabled{opacity:.5;cursor:default;box-shadow:0 0 0 2px rgba(11,47,68,.4);background:#e6eef1}
.buy:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:6px;box-shadow:inset 0 0 0 2px var(--navy)}
.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 16px}
@media (max-width:430px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mode{font:inherit;cursor:pointer;border:0;border-radius:16px;padding:9px 4px;background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px rgba(11,47,68,.25);line-height:1.15}
.mode b{display:block;font:400 17px/1.1 var(--font-display)}
.mode span{display:block;font-size:11px;font-weight:800;color:var(--navy-soft);margin-top:2px}
.mode[aria-pressed="true"]{background:var(--duck);box-shadow:inset 0 0 0 3px var(--navy),0 3px 0 var(--duck-deep)}
.mode:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.announce{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);z-index:5;pointer-events:none;max-width:calc(100% - 2*var(--gutter));width:max-content;box-sizing:border-box;padding:9px 18px;border-radius:18px;background:rgba(11,47,68,.92);color:var(--paper);font-weight:800;font-size:14px;text-align:center;box-shadow:0 0 0 2px var(--duck)}
.roombanner{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:5;pointer-events:none;text-align:center;max-width:calc(100% - 2*var(--gutter));box-sizing:border-box;padding:8px 22px 10px;border-radius:20px;background:rgba(11,47,68,.92);color:var(--paper);box-shadow:0 0 0 2px var(--duck)}
.roombanner small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--duck)}
.roombanner b{display:block;font:400 26px/1.1 var(--font-display)}
.roombanner.on{animation:rbin 3.6s ease-in-out forwards}
@keyframes rbin{0%{opacity:0;transform:translate(-50%,-10px)}8%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.announce small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--duck);margin-bottom:2px}
.announce.on{animation:annin 6.2s ease-in-out forwards}
@keyframes annin{0%{opacity:0;transform:translate(-50%,10px)}6%{opacity:1;transform:translate(-50%,0)}92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* World leaderboard: name entry on the end card, ranking card, sharing */
.score-form{margin:0 0 18px;padding:12px 14px 10px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 2px rgba(11,47,68,.14);text-align:left}
.score-form label{display:block;margin-bottom:7px}
.score-row{display:flex;gap:8px}
.score-row input{
  flex:1;min-width:0;box-sizing:border-box;font:800 17px var(--font-body);color:var(--navy);
  border:0;border-radius:999px;padding:9px 14px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--navy);
  -webkit-user-select:text;user-select:text;
}
.score-row input:focus-visible{outline:3px solid var(--duck);outline-offset:2px}
.score-msg{margin:8px 2px 0;min-height:19px;font-weight:800;font-size:14px;line-height:1.35;color:var(--navy-soft)}
.score-msg b{font:400 18px/1 var(--font-display);color:var(--navy)}
.score-msg.err{color:#b3261e}
.lb-status{margin:0 0 12px;min-height:20px;font-weight:800;font-size:15px;color:var(--navy-soft)}
.lb-list{list-style:none;margin:0 0 16px;padding:2px 4px 6px 2px;overflow:auto;min-height:0;flex:1;display:grid;gap:6px;align-content:start;text-align:left}
.lb-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 14px 7px 8px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px rgba(11,47,68,.12)}
.lb-row.me{background:#fff7d1;box-shadow:inset 0 0 0 2px var(--navy)}
.lb-row .rk{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:400 16px/1 var(--font-display);background:rgba(11,47,68,.1);font-variant-numeric:tabular-nums}
.lb-row.p1 .rk{background:var(--duck);box-shadow:inset 0 0 0 2px var(--navy)}
.lb-row.p2 .rk{background:#dfe7ec;box-shadow:inset 0 0 0 2px var(--navy)}
.lb-row.p3 .rk{background:#f1c59a;box-shadow:inset 0 0 0 2px var(--navy)}
.lb-row .nm{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .nm small{font-size:12px;color:var(--navy-soft);margin-left:6px}
.lb-row .tm{font:400 19px/1 var(--font-display);font-variant-numeric:tabular-nums}
.lb-gap{text-align:center;font-weight:800;color:var(--navy-soft);line-height:1}
.lb-card .modes{margin-bottom:12px}
/* Touch screens: two virtual sticks (move, look), shown only while playing */
body:not(.touch) .touch-only{display:none!important}
body.touch .desk-only,body.touch #hint{display:none!important}
.touch-ui{position:absolute;inset:0;z-index:4;pointer-events:none;-webkit-touch-callout:none;
  --sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px)}
.stick{position:absolute;bottom:calc(14px + var(--sb));width:156px;height:156px;pointer-events:auto;touch-action:none}
.stick.l{left:calc(14px + var(--sl))}
.stick.r{right:calc(14px + var(--sr))}
.stick::before{content:"";position:absolute;inset:18px;border-radius:50%;background:rgba(11,47,68,.3);box-shadow:inset 0 0 0 3px rgba(242,251,253,.6)}
.stick i{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(242,251,253,.88);box-shadow:0 3px 0 rgba(11,47,68,.35),inset 0 0 0 3px var(--navy)}
.stick.on i{background:var(--duck)}
@media (max-height:420px){.side-lb{display:none}}
/* touch HUD: the Sound chip mutes everything, so Music goes; a smaller map */
body.touch #musicBtn{display:none}
body.touch .mini{width:auto!important;height:90px!important}
@media (orientation:portrait){
  body.touch .hud{grid-template-columns:1fr auto}
  body.touch .hud .right{grid-column:1/-1}
  body.touch .mini{top:132px}
  body.touch .held{bottom:calc(186px + env(safe-area-inset-bottom,0px))}
}
/* Keyboard controls card: layout presets, then one row per action with its key */
.presets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.presets .mode{min-width:130px;padding:9px 14px}
.bind-key{min-width:92px}
.bind-key.wait{background:var(--navy);color:var(--paper);box-shadow:0 3px 0 rgba(11,47,68,.35),0 0 0 2px var(--duck)}
/* Home: roomy on desktop, actions first and a single scroll area on mobile. */
#startCard .card{max-width:1040px;padding:24px 32px 32px;overscroll-behavior:contain}
.lang{display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px}
.lang button{font:24px/1 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;cursor:pointer;border:0;border-radius:999px;padding:10px;min-width:44px;min-height:44px;background:transparent;color:var(--navy-soft);box-shadow:inset 0 0 0 2px rgba(11,47,68,.2)}
.lang button[aria-pressed="true"]{background:var(--navy);color:var(--paper);box-shadow:none}
.lang button:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.start-header{max-width:680px;margin:0 auto 28px}
.start-header .title{font-size:clamp(40px,5vw,64px)}
.start-header .lead{margin-bottom:0}
.start-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.start-play,.start-help{min-width:0}
.start-heading{font:400 24px/1.2 var(--font-display);margin:0 0 16px;text-align:left}
#startCard .modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:24px}
#startCard .mode{min-height:64px;padding:12px 8px}
#startCard .mode b{font-size:20px}
#startCard .mode span{font-size:13px}
.start-actions{display:flex;flex-direction:column;gap:14px;padding:3px}
.start-actions .btn{width:100%;min-height:52px;padding:14px 16px;line-height:1.15}
.start-actions .small{margin:0}
.start-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 3px 0}
.start-links .btn.alt{min-height:44px;margin:0;padding:10px 8px;line-height:1.2}
.start-links .lb-open{grid-column:1/-1}
body:not(.touch) .start-links .lb-open{grid-column:auto}
.start-help{border-left:2px solid rgba(11,47,68,.12);padding-left:30px;text-align:left}
.start-help .rules{margin-bottom:18px;gap:14px}
.start-help .small{margin-top:12px}
#startCard .error{line-height:1.4}
@media (max-width:760px){
  #startCard{padding:12px}
  #startCard .card{padding:16px 20px 24px;border-radius:22px}
  .start-header{margin-bottom:24px}
  .start-header .hero-duck{width:68px;height:60px}
  .start-header .lead{font-size:16px}
  .start-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .start-help{border-left:0;border-top:2px solid rgba(11,47,68,.12);padding:24px 0 0}
  .start-heading{font-size:22px;margin-bottom:14px}
}
@media (max-width:360px){
  #startCard{padding:8px}
  #startCard .card{padding:12px 16px 22px}
  .start-actions .btn{font-size:21px}
}
/* In-game top 5: small, translucent, under the progress panel on the left */
.side-lb{position:absolute;left:var(--gutter);top:100px;width:172px;box-sizing:border-box;padding:8px 10px 9px;border-radius:14px;background:rgba(11,47,68,.72);color:var(--paper);pointer-events:none;font-size:12px}
.side-lb .eyebrow{display:block;color:var(--duck);font-size:10px;margin:0 0 5px}
.side-lb ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.side-lb li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:baseline;font-weight:800}
.side-lb li.me{color:var(--duck)}
.side-lb li.gap{display:block;text-align:center;line-height:.6;opacity:.7}
.side-lb li.empty{display:block;font-weight:700;opacity:.85;line-height:1.3}
.side-lb .rk{font-family:var(--font-display);font-weight:400;opacity:.8;font-variant-numeric:tabular-nums}
.side-lb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-lb .tm{font-variant-numeric:tabular-nums}

@media (max-width:620px){.ach-list{grid-template-columns:minmax(0,1fr)}}

@media (max-width:520px){
  .hud{grid-template-columns:1fr auto auto}
  .progress{min-width:0}
  .clock{min-width:78px}
  .side-lb{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pop{animation:fade 1s ease-out forwards}
  @keyframes fade{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
  .cross{transition:none}
  .ach-toast.on{animation:achfade 3.6s ease-in-out forwards}
  .announce.on{animation:annfade 6.2s ease-in-out forwards}
  @keyframes annfade{0%{opacity:0}6%{opacity:1}92%{opacity:1}100%{opacity:0}}
  @keyframes achfade{0%{opacity:0}9%{opacity:1}88%{opacity:1}100%{opacity:0}}
}
/* Active special-duck powers, under the map; the clock turns teal while the hourglass stops it */
.boosts{position:absolute;right:var(--gutter);top:196px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}
.boosts span{padding:5px 11px;border-radius:999px;background:rgba(11,47,68,.86);color:var(--paper);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #9b5de5;white-space:nowrap}
.clock.frozen .time{color:#139c90}
body.touch .boosts{top:160px}
@media (orientation:portrait){body.touch .boosts{top:232px}}
/* Contre-la-montre: its mode button (the fifth) spans the row, the progress bar becomes the overflow meter */
#startCard .mode.rush{grid-column:1/-1}
.lb-card .modes{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:430px){.lb-card .modes{grid-template-columns:repeat(2,minmax(0,1fr))}.lb-card .mode.rush{grid-column:1/-1}}
.progress .mess{display:block;margin-top:4px;font-size:11px;font-weight:800;color:var(--navy-soft);font-variant-numeric:tabular-nums}
.bar i.danger{background:var(--bad)}