/* Free Bots Race: the candy look (25 Sep, Dan: "light pastel styles, not black and neon").
   Everything here is scoped to html.candy, which index.html sets unless the address says
   ?theme=old; the tokens (colours, radii, fonts) are in theme.css, shared with the games and the
   world. Layout is index.html's: only colour, type, shape and shadow change here. */
html.candy{
  --bg:var(--fb-bg); --panel:rgba(255,255,255,.94); --panel2:#ffffff; --line:var(--fb-line); --text:var(--fb-ink); --dim:var(--fb-ink-soft); --faint:var(--fb-ink-faint);
  --pink:var(--fb-pink-deep); --cyan:var(--fb-sky-deep); --green:var(--fb-mint-deep); --gold:var(--fb-lemon-deep); --red:var(--fb-coral-deep); --violet:var(--fb-lavender-deep);
  --r:var(--fb-r-lg); --mono:var(--fb-font-ui);
}
html.candy body{background:var(--fb-bg);color:var(--fb-ink);font:600 14px/1.45 var(--fb-font-ui)}
html.candy a{color:var(--fb-sky-deep);font-weight:700}
html.candy .panel{background:rgba(255,255,255,.93);border:2px solid #fff;border-radius:var(--fb-r-lg);box-shadow:var(--fb-shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* buttons: glossy pills with a lip */
html.candy .btn{position:relative;background:#fff;color:var(--fb-ink);border:2px solid var(--fb-line);border-radius:var(--fb-r-pill);font:700 15px/1 var(--fb-font-display);letter-spacing:.01em;padding:12px 18px;box-shadow:0 4px 0 var(--fb-line-strong);transition:transform .08s,box-shadow .08s}
html.candy .btn:hover{border-color:var(--fb-lavender)}
html.candy .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--fb-line-strong)}
html.candy .btn.go,html.candy .btn.cy{border:0;color:var(--fb-ink);text-shadow:0 1px 0 rgba(255,255,255,.6)}
html.candy .btn.go{background:linear-gradient(180deg,var(--fb-pink-soft) 0%,var(--fb-pink) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy .btn.cy{background:linear-gradient(180deg,var(--fb-sky-soft) 0%,var(--fb-sky) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy .btn.go:active{box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy .btn.cy:active{box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy .btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--fb-ink-soft)}
html.candy #rrematch.hot{box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm),0 0 0 4px var(--fb-lemon),0 10px 24px rgba(217,169,21,.35)}

/* tags */
html.candy .tag{font:800 10.5px/1.5 var(--fb-font-ui);letter-spacing:.04em;border:0;background:var(--fb-surface-3);color:var(--fb-ink-soft);padding:2px 9px}
html.candy .tag.you{background:linear-gradient(180deg,var(--fb-lemon-soft) 0%,var(--fb-lemon) 62%);color:var(--fb-ink)}
html.candy .tag.person{background:var(--fb-lemon-soft);color:var(--fb-lemon-deep)}
html.candy .tag.agent{background:var(--fb-mint-soft);color:var(--fb-mint-deep)}
html.candy .tag.routine{background:var(--fb-lavender-soft);color:var(--fb-lavender-deep)}
html.candy .tag.invited{background:var(--fb-sky-soft);color:var(--fb-sky-deep)}
html.candy .tag.live{background:var(--fb-coral);color:var(--fb-on-accent)}
html.candy .tag.trk{background:var(--fb-sky-soft);color:var(--fb-sky-deep)}
html.candy .tag.dif.chill{background:var(--fb-mint-soft);color:var(--fb-mint-deep)}
html.candy .tag.dif.normal{background:var(--fb-lemon-soft);color:var(--fb-lemon-deep)}
html.candy .tag.dif.pro{background:var(--fb-coral-soft);color:var(--fb-coral-deep)}
html.candy .face{background:var(--fb-surface-3);border:2px solid #fff;box-shadow:0 1px 3px rgba(24,40,70,.18)}

/* home */
html.candy #home{background:linear-gradient(180deg,rgba(255,244,250,0) 0%,rgba(255,244,250,.35) 22%,rgba(255,244,250,.82) 48%,rgba(255,244,250,.96) 100%)}
html.candy .brand h1{font:700 clamp(46px,9vw,84px)/.9 var(--fb-font-display);font-style:normal;letter-spacing:-.01em;text-transform:none;background:linear-gradient(95deg,var(--fb-pink) 0%,var(--fb-lavender) 45%,var(--fb-sky) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 8px 14px rgba(24,40,70,.22))}
html.candy .brand p{color:var(--fb-ink);font-weight:600;background:rgba(255,255,255,.78);border-radius:var(--fb-r-sm);padding:8px 14px;box-shadow:var(--fb-shadow-sm)}
html.candy .brand p b{color:var(--fb-pink-deep);font-weight:800}
html.candy .cta input,html.candy .cta select,html.candy #lobby .link input,html.candy #rlike input{background:var(--fb-surface-2);border:2px solid var(--fb-line);border-radius:var(--fb-r-sm);color:var(--fb-ink);font:700 14px var(--fb-font-ui)}
html.candy .cta input::placeholder{color:var(--fb-ink-faint)}
html.candy .cta .as{color:var(--fb-ink-soft);font-weight:600}
html.candy .box h2{font:700 15px/1.2 var(--fb-font-display);letter-spacing:.02em;text-transform:none;color:var(--fb-ink)}
html.candy .tabs{border:0;background:var(--fb-surface-3)}
html.candy .tabs button{font:800 12px var(--fb-font-ui);color:var(--fb-ink-soft)}
html.candy .tabs button.on{background:#fff;color:var(--fb-ink);box-shadow:0 2px 0 var(--fb-line-strong)}
html.candy .item{border:2px solid var(--fb-line);border-radius:var(--fb-r-sm);background:#fff}
html.candy .item:hover{border-color:var(--fb-lavender)}
html.candy .item .t{font-weight:800}
html.candy .item .s,html.candy .empty,html.candy .foot{color:var(--fb-ink-soft)}
html.candy .lb td{border-bottom:2px dotted var(--fb-line)}
html.candy .lb td.n{color:var(--fb-ink-faint);font-weight:800}
html.candy .lb td.r{color:var(--fb-ink-soft)}
html.candy .lb tr:nth-child(1) td.n{color:var(--fb-lemon-deep)}
html.candy .links a{background:#fff;border-radius:var(--fb-r-pill);padding:6px 12px;box-shadow:var(--fb-shadow-sm);text-decoration:none;color:var(--fb-ink)}
html.candy .foot{background:rgba(255,255,255,.7);border-radius:var(--fb-r-sm);padding:8px 12px}
html.candy .clipcard{color:var(--fb-ink-soft)}
html.candy .clipcard video{border:3px solid #fff;border-radius:var(--fb-r-sm);box-shadow:var(--fb-shadow-sm);background:var(--fb-lavender)}

/* pickers */
html.candy .pick > span{color:var(--fb-ink-soft);font:800 12px var(--fb-font-ui);letter-spacing:.04em}
html.candy .chips{border:0;background:var(--fb-surface-3);border-radius:var(--fb-r-pill);padding:4px}
html.candy .chips button{border-radius:var(--fb-r-pill);color:var(--fb-ink-soft);font:700 14px var(--fb-font-display)}
html.candy .chips button.on{background:linear-gradient(180deg,var(--fb-pink-soft) 0%,var(--fb-pink) 62%);color:var(--fb-ink);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy body.mars .chips button.on{background:linear-gradient(180deg,var(--fb-peach-soft) 0%,var(--fb-peach) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy #hdiff button[data-d="chill"].on,html.candy #ldiff button[data-d="chill"].on{background:linear-gradient(180deg,var(--fb-mint-soft) 0%,var(--fb-mint) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy #hdiff button[data-d="normal"].on,html.candy #ldiff button[data-d="normal"].on{background:linear-gradient(180deg,var(--fb-lemon-soft) 0%,var(--fb-lemon) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy #hdiff button[data-d="pro"].on,html.candy #ldiff button[data-d="pro"].on{background:linear-gradient(180deg,var(--fb-coral-soft) 0%,var(--fb-coral) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy .hnote{color:var(--fb-ink-soft);font-weight:600}

/* lobby */
html.candy #lobby .count{font:700 46px/1 var(--fb-font-display);font-style:normal;color:var(--fb-on-accent);background:linear-gradient(180deg,var(--fb-pink-soft) 0%,var(--fb-pink) 62%);border-radius:50%;width:74px;height:74px;min-width:74px;display:flex;align-items:center;justify-content:center;box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm);text-shadow:0 2px 0 rgba(255,255,255,.6)}
html.candy #lobby h3{font:700 20px var(--fb-font-display)}
html.candy #lobby .sub{color:var(--fb-ink-soft)}
html.candy .slot{border:2px solid var(--fb-line);border-radius:var(--fb-r-sm);background:#fff}
html.candy .slot.me{border-color:var(--fb-lemon-deep);background:var(--fb-lemon-soft);box-shadow:none}
html.candy .slot.open{border-style:dashed;color:var(--fb-ink-faint);background:rgba(255,255,255,.5)}
html.candy .slot .sw{border-radius:var(--fb-r-pill);width:8px}

/* the race HUD: white candy cards over the bright scene */
html.candy #hud .tl{background:rgba(255,255,255,.92);border-radius:var(--fb-r-lg);padding:6px 16px 6px 12px;box-shadow:var(--fb-shadow);align-items:center}
html.candy #pos{margin-right:12px;font:700 50px/1 var(--fb-font-display);font-style:normal;color:var(--fb-pink-deep);text-shadow:none}
html.candy #pos small{font-size:20px;color:var(--fb-ink-faint)}
html.candy #lap{font:700 13px var(--fb-font-ui);color:var(--fb-ink-soft);text-shadow:none}
html.candy #lap b{font:700 22px var(--fb-font-display);color:var(--fb-ink)}
html.candy #clock{font:800 15px var(--fb-font-ui);color:var(--fb-sky-deep);text-shadow:none;font-variant-numeric:tabular-nums}
html.candy #stand{padding:8px}
html.candy #stand .st{font:700 12.5px var(--fb-font-ui);border-radius:var(--fb-r-pill);padding:3px 8px}
html.candy #stand .st .p{color:var(--fb-ink-faint);font-weight:800}
html.candy #stand .st:nth-child(1) .p{color:var(--fb-lemon-deep)}
html.candy #stand .st.me{background:var(--fb-lemon)}
html.candy #stand .st.fol{outline:2px solid var(--fb-sky);background:var(--fb-sky-soft)}
html.candy #stand .st .g{color:var(--fb-ink-faint);font-variant-numeric:tabular-nums}
html.candy #stand .st .lv{background:var(--fb-coral)}
html.candy #stand .st .fin{color:var(--fb-mint-deep);font-weight:800}
html.candy #speed{background:rgba(255,255,255,.92);border-radius:var(--fb-r-lg);padding:6px 14px 8px;box-shadow:var(--fb-shadow);text-shadow:none}
html.candy #speed b{font:700 44px/1 var(--fb-font-display);font-style:normal;color:var(--fb-ink);font-variant-numeric:tabular-nums}
html.candy #speed span{color:var(--fb-ink-faint);font-weight:800}
html.candy #pips i{border:0;background:var(--fb-line);border-radius:var(--fb-r-pill);height:9px}
html.candy #pips i.on{background:linear-gradient(90deg,var(--fb-lemon),var(--fb-pink));box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy #speed.boost b{color:var(--fb-pink-deep);text-shadow:0 0 0 transparent}
html.candy #mini{background:rgba(255,255,255,.75);border-radius:var(--fb-r-lg);box-shadow:var(--fb-shadow-sm)}
html.candy #cams{border-radius:var(--fb-r-pill);padding:5px}
html.candy #cams button{font:700 13px var(--fb-font-display);color:var(--fb-ink-soft);border-radius:var(--fb-r-pill)}
html.candy #cams button.on{background:linear-gradient(180deg,var(--fb-sky-soft) 0%,var(--fb-sky) 62%);color:var(--fb-ink);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}
html.candy #big{font:700 clamp(90px,19vw,170px)/1 var(--fb-font-display);font-style:normal;color:#fff;text-shadow:0 6px 0 var(--fb-pink-deep),0 12px 30px rgba(232,85,158,.45);-webkit-text-stroke:0}
html.candy #toasts div{background:#fff;color:var(--fb-ink);border:0;font-weight:700;box-shadow:var(--fb-shadow-sm)}
html.candy #watching{font-weight:700}
html.candy .bub{background:#fff;color:var(--fb-ink);border-radius:var(--fb-r-sm);box-shadow:var(--fb-shadow-sm);font-weight:600}
html.candy .bub b{color:var(--fb-pink-deep)}
html.candy .bub::after{border-top-color:#fff}
html.candy #touch button{border:2px solid #fff;background:rgba(255,255,255,.72);color:var(--fb-ink);box-shadow:var(--fb-shadow-sm)}
html.candy #touch button.on{background:linear-gradient(180deg,var(--fb-pink-soft) 0%,var(--fb-pink) 62%);border-color:#fff}
html.candy #tz{background:var(--fb-lemon)!important;font-family:var(--fb-font-display)!important}
html.candy #mute,html.candy #skybtn{background:#fff;border:2px solid #fff;box-shadow:var(--fb-shadow-sm)}
html.candy #fps{background:rgba(255,255,255,.85);color:var(--fb-ink)}

/* results */
html.candy #results h2{font:700 34px/1 var(--fb-font-display);font-style:normal;text-transform:none;color:var(--fb-pink-deep)}
html.candy #results .sub{color:var(--fb-ink-soft);font-weight:600}
html.candy .res{border-collapse:separate;border-spacing:0 5px}
html.candy .res td{border:0;background:var(--fb-surface-3);padding:7px 6px}
html.candy .res td:first-child{border-radius:var(--fb-r-sm) 0 0 var(--fb-r-sm)}
html.candy .res td:last-child{border-radius:0 var(--fb-r-sm) var(--fb-r-sm) 0}
html.candy .res tr.me td{background:var(--fb-lemon-soft)}
html.candy .res td.p{font:700 18px var(--fb-font-display);font-style:normal;text-align:center;color:var(--fb-ink-faint)}
html.candy .res td.p.g1,html.candy .res td.p.g2,html.candy .res td.p.g3{color:var(--fb-ink)}
html.candy .res td.p.g1{background:var(--fb-lemon)} html.candy .res td.p.g2{background:var(--fb-lavender-soft)} html.candy .res td.p.g3{background:var(--fb-peach)}
html.candy .res td.r{font-variant-numeric:tabular-nums;font-weight:700}
html.candy .res .prize{color:var(--fb-mint-deep);font-weight:800}
html.candy .res .rec{color:var(--fb-pink-deep);font-weight:800}
html.candy #rlike{border:2px dashed var(--fb-line);border-radius:var(--fb-r-sm);background:var(--fb-surface-2)}
html.candy #rlike .q{font:700 16px var(--fb-font-display)}
html.candy #rlike .thumb{border:2px solid var(--fb-line);background:#fff;box-shadow:0 3px 0 var(--fb-line-strong)}
html.candy #rlike .thumb.on{border-color:var(--fb-lemon-deep);background:var(--fb-lemon)}
html.candy #rlike .note{color:var(--fb-ink-soft)}

/* Mars: peach and coral where Earth has bubblegum */
html.candy body.mars #pos,html.candy body.mars #results h2{color:var(--fb-coral-deep)}
html.candy body.mars .btn.go{background:linear-gradient(180deg,var(--fb-peach-soft) 0%,var(--fb-peach) 62%);box-shadow:var(--fb-gloss),var(--fb-rim),var(--fb-shadow-sm)}

/* phones: the HUD's cards are solid now, so they must not sit on each other */
@media (max-width:700px){
  html.candy #hud .tl{padding:4px 12px 4px 10px;border-radius:var(--fb-r)}
  html.candy #pos{font-size:36px;margin-right:8px}
  html.candy #pos small{font-size:15px}
  html.candy #lap b{font-size:17px}
  html.candy #clock{font-size:13px}
  html.candy #speed{padding:4px 12px 6px}
  html.candy #speed b{font-size:34px}
  html.candy #hud:not(.hide) ~ #skybtn{display:none}
}
html.candy body.touch #mini{top:calc(122px + var(--safe-t))}
html.candy body.touch #speed{bottom:calc(158px + var(--safe-b))}
html.candy #results .acts .btn{white-space:nowrap;padding:10px 14px;font-size:14px;min-width:0}
html.candy #stand:empty{display:none}
html.candy #lobby{top:calc(60px + var(--safe-t));max-height:calc(100vh - 74px)}
@media (max-width:700px){html.candy #lobby{top:calc(112px + var(--safe-t));max-height:calc(100vh - 124px)}}
html.candy body.embed #lobby{top:auto}