/* =====================================================================
   HEX KART HUD — "race stickers"
   =====================================================================
   One visual language for everything on screen while racing:
   - die-cut stickers: solid ink fill, a white cut line, a hard ink drop (no blur, no glass)
   - slanted like livery (skewX on a pseudo-element, so the element's own transforms stay free)
   - the logo's hexagon for the things you watch most: your position and your item
   - brand yellow / pink / cyan as accents, chunky Lilita numbers with an ink outline
*/
#hud{--ink:#1a1030;--cut:#fff;--y:#ffd23f;--pink:#ff3d7f;--cyan:#3ee8ff;--slant:-9deg}
#hud .label{font-family:'Lilita One','Nunito',sans-serif;font-size:13px;font-weight:400;letter-spacing:.6px;opacity:1;color:var(--y)}
#hud .sub{font-weight:900;font-size:12px;letter-spacing:.4px;opacity:.9}
#hud .big{text-shadow:0 3px 0 var(--ink)}

/* ---------- generic sticker panel ---------- */
#hud .panel{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:8px 18px 9px;isolation:isolate}
#hud .panel::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);border:3px solid var(--cut);border-radius:9px;
  transform:skewX(var(--slant));box-shadow:0 5px 0 rgba(26,16,48,.55)}

/* ---------- position: a hexagon badge ---------- */
#pos-box{left:16px;top:12px;min-width:0;width:116px;height:131px;padding:0;filter:drop-shadow(0 5px 0 rgba(26,16,48,.6))}
#pos-box::before{background:var(--cut);border:0;border-radius:0;transform:none;box-shadow:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
#pos-box::after{content:'';position:absolute;inset:5px;z-index:-1;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(170deg,#fff27a 0%,var(--y) 45%,#ff9f1c 100%)}
#pos-box .label{display:none}
#pos-box .pos-val{position:relative;justify-content:center;align-items:flex-start;padding-top:18px;gap:0}
#pos-num{font-size:70px;color:var(--ink);text-shadow:0 4px 0 rgba(255,255,255,.55)}
#pos-suffix{font-size:24px;color:var(--ink);margin-top:10px}
#pos-total{position:absolute;left:0;right:0;top:94px;text-align:center;font-size:17px;color:var(--ink);opacity:.75;margin:0}
#pos-box.p1::after{background:linear-gradient(170deg,#fff6a8 0%,#ffe14d 45%,#ffb31a 100%)}

/* ---------- lap / time ---------- */
#lap-box{top:16px;min-width:116px;padding:6px 22px 8px}
#lap-box .big{font-size:40px}
#time-box{right:22px;top:16px;min-width:190px;padding:7px 20px 9px}
#time-val{font-size:32px;color:#fff}
#time-box .sub{color:#cfc6ff}

/* ---------- minimap: ink card with a white cut line ---------- */
#minimap{right:22px;top:152px;background:rgba(26,16,48,.78);border:3px solid #fff;border-radius:14px;box-shadow:0 5px 0 rgba(26,16,48,.55)}

/* ---------- standings: slanted name chips; yours is the yellow one ---------- */
#status-box{left:18px;bottom:20px;width:250px;padding:0}
#status-box::before{display:none}
#status-box .race-only > .label{display:none}
#standings{margin:0 0 12px;display:flex;flex-direction:column;gap:4px}
#standings .row{height:auto;gap:8px;padding:2px 12px 2px 4px;width:max-content;min-width:150px;font-size:15px;letter-spacing:.3px;color:#fff;
  position:relative;isolation:isolate}
#standings .row::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);border:2px solid rgba(255,255,255,.9);border-radius:6px;transform:skewX(var(--slant))}
#standings .row .n{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;opacity:1;color:var(--ink);font-size:14px;
  background:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
#standings .row .dot{width:10px;height:16px;border-radius:2px;box-shadow:none;transform:skewX(var(--slant))}
#standings .row.me{color:var(--ink);font-size:17px;margin:2px 0 2px 8px}
#standings .row.me::before{background:var(--y);border-color:#fff}
#standings .row.me .n{background:var(--ink);color:var(--y)}

/* ---------- drift charge + nitro: chevrons and a slanted tank ---------- */
#status-box > .label{display:inline-block;padding:1px 8px;margin:0 0 3px;color:var(--ink);background:var(--y);border-radius:4px;transform:skewX(var(--slant));font-size:12px}
#hud .keytag{background:var(--ink);color:#fff;border-radius:4px;font-family:'Nunito',sans-serif;font-weight:900}
#drift-meter{gap:4px;margin:0 0 10px}
#drift-meter .seg{height:14px;border-radius:0;background:var(--ink);border:2px solid #fff;clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%,15% 50%)}
#nitro-meter{height:18px;border-radius:5px;background:var(--ink);border:3px solid #fff;transform:skewX(var(--slant));box-shadow:0 4px 0 rgba(26,16,48,.55)}
#nitro-fill{background:linear-gradient(90deg,var(--cyan),#a45bff 70%,var(--pink));box-shadow:none}
#nitro-meter::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(26,16,48,.9) 22px 25px);pointer-events:none}
#nitro-meter{position:relative}

/* ---------- item: the hexagon slot ---------- */
#item-hud{bottom:18px}
#item-slot{width:108px;height:122px;border:0;border-radius:0;background:none;box-shadow:none;font-size:54px;filter:drop-shadow(0 5px 0 rgba(26,16,48,.6));isolation:isolate}
#item-slot::before,#item-slot::after{content:'';position:absolute;z-index:-1;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
#item-slot::before{inset:0;background:#fff}
#item-slot::after{inset:6px;background:var(--ink)}
#item-slot.has{animation:none;transform:scale(1.04)}
#item-slot.has::after{background:linear-gradient(170deg,#ff6fa8,#a45bff)}
#item-slot.has::before{background:var(--y);animation:hexPulse .9s ease-in-out infinite}
#item-slot.rolling::after{background:linear-gradient(170deg,#3ee8ff,#3a3fd1)}
#item-slot .kbd{right:-8px;bottom:4px;background:var(--y);color:var(--ink);box-shadow:0 3px 0 var(--ink);border:2px solid var(--ink)}
#item-name{margin-top:10px;padding:3px 12px;font-family:'Lilita One',sans-serif;font-weight:400;font-size:14px;letter-spacing:.6px;color:#fff;text-shadow:none;position:relative;isolation:isolate}
#item-name::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);border:2px solid #fff;border-radius:5px;transform:skewX(var(--slant))}
@keyframes hexPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* ---------- speed: a slanted segmented bar + a big number ---------- */
#speedo{width:250px;height:92px;right:22px;bottom:20px}
#speedo .sp-arc,#speedo .sp-needle,#speedo .sp-hub,#speedo #sp-ticks{display:none}
#speedo .sp-bg{inset:auto 0 4px 0;height:26px;border-radius:6px;border:3px solid #fff;background:var(--ink);transform:skewX(-14deg);overflow:hidden;
  box-shadow:0 5px 0 rgba(26,16,48,.55)}
#speedo .sp-bg::before{content:'';position:absolute;left:2px;top:2px;bottom:2px;width:calc((100% - 4px) * var(--p));
  background:linear-gradient(90deg,var(--cyan),var(--y) 60%,var(--pink));transition:width .08s linear}
#speedo .sp-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 17px,var(--ink) 17px 21px)}
#speedo .sp-read{left:auto;right:4px;bottom:36px;text-align:right;display:flex;align-items:baseline;gap:6px}
#speed-val{display:inline;font-size:50px;color:#fff;text-shadow:0 4px 0 var(--ink);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
#speedo .sp-read small{font-family:'Lilita One',sans-serif;font-weight:400;font-size:16px;letter-spacing:.5px;opacity:1;color:var(--y);text-shadow:0 2px 0 var(--ink)}

/* ---------- callouts ---------- */
#toast{padding:6px 18px;border-radius:8px;background:var(--y);color:var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);
  font-family:'Lilita One',sans-serif;font-weight:400;font-size:21px;letter-spacing:.6px}
#message{color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--pink),0 10px 0 var(--ink)}
#countdown{-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 10px 0 var(--pink),0 16px 0 var(--ink)}
#countdown.go{text-shadow:0 10px 0 #1f8f3a,0 16px 0 var(--ink)}
#jump-hint{background:var(--ink);border:3px solid #7cff6b;border-radius:8px;box-shadow:0 4px 0 rgba(26,16,48,.55);letter-spacing:1px}
#mode-hud{gap:1px}
#mode-hud span{font-size:12px}
#mute-hint{opacity:.7;letter-spacing:1px}

/* ---------- Hex Survival bits ---------- */
#sv-alive .big{color:var(--y)}
#sv-feed .fi{background:var(--ink);border:2px solid #fff;border-radius:6px;box-shadow:0 3px 0 rgba(26,16,48,.55);letter-spacing:.3px}
#sv-warn{background:var(--pink);border:3px solid #fff;border-radius:10px;box-shadow:0 6px 0 var(--ink)}
#sv-warn small{letter-spacing:3px;color:#fff}
#sv-warn span{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
#sv-spec{background:var(--ink);border:3px solid #fff;border-radius:10px;box-shadow:0 5px 0 rgba(26,16,48,.55)}

/* ---------- touch screens: same stickers, smaller; the bar speedo is hidden there like the old dial ---------- */
body.touch #pos-box{transform:scale(.62);transform-origin:left top}
body.touch #minimap{border-width:2px;border-radius:10px}
@media (max-width:760px){ #speedo{transform:scale(.8);transform-origin:right bottom} }

/* item pictures: assets/ui/items/<id>.svg set as the background by HUD.setIcon() */
#item-icon{display:block;width:84px;height:84px;background:center/contain no-repeat;position:relative;z-index:1}
body.touch #item-icon{width:62px;height:62px}
/* Coin Rush coin (mode HUD line + results table) */
.coin-ic{display:inline-block;width:1.25em;height:1.25em;margin-right:.3em;vertical-align:-.28em;background:url("../assets/ui/items/coin.svg") center/contain no-repeat}