/* 🏁 Pillow Kart inside the fight room: the race canvas, per-viewport HUD,
   touch pedals, pause and results — all scoped under #kartUI so the fight
   lobby's styles are left alone. */
#kartUI{position:fixed;inset:0;z-index:4;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#fff2d7}
#kartUI.hidden{display:none!important}
#kartUI #race{position:absolute;inset:0;width:100%;height:100%;display:block}
#kartUI button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#kartHud{position:absolute;inset:0;pointer-events:none}
#kartHud .vhud{position:absolute;padding:12px 16px;display:flex;flex-direction:column;gap:6px;text-shadow:0 2px 10px #193039}
#kartHud .vhud[hidden]{display:none}
#kartHud .vstats{display:flex;gap:14px;align-items:baseline;font-weight:900;font-size:22px;font-variant-numeric:tabular-nums}
#kartHud .vstats small{font-size:10px;letter-spacing:2px;font-weight:700;opacity:.8;margin-left:3px}
#kartHud .vname{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#e7c99b}
#kartHud .vitem{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
#kartHud .vitem canvas{width:54px;height:54px;background:#213e4799;border:2px solid #ffffff24;border-radius:12px;transition:border-color .2s,box-shadow .2s}
#kartHud .vitem canvas.spin{border-color:#ffd07a;animation:itemSpinGlow .45s ease-in-out infinite alternate}
#kartHud .vitem canvas.held{border-color:#ffe9b8;box-shadow:0 0 10px 2px #ffd07a99,0 0 22px 6px #ffb45044;animation:itemHeldGlow 1.6s ease-in-out infinite alternate}
/* ✦ The driver's special in the slot (match.mjs updateHud): its icon and name, glowing gold. A box item ITEM can't reach yet
   (Tony's bowls streaming, Drew's ball out, Titus's cocoon: the special owns ITEM) waits dimmed and dashed, not glowing. */
#kartHud .vitem canvas.special{border-color:#ffd07a;animation:specialReadyGlow .7s ease-in-out infinite alternate}
#kartHud .vitem canvas.waiting{opacity:.45;border-style:dashed}
@keyframes itemSpinGlow{from{box-shadow:0 0 6px 1px #ffd07a88}to{box-shadow:0 0 18px 6px #ffd07acc,0 0 30px 10px #ff9a3a55}}
@keyframes itemHeldGlow{from{box-shadow:0 0 8px 2px #ffd07a77,0 0 18px 5px #ffb45033}to{box-shadow:0 0 14px 4px #ffd07acc,0 0 28px 9px #ffb45066}}
/* 🎯 incoming-seeker warning: a badge at the bottom centre of the viewport
   that pulses in transparency (fully shown down to 30 % opaque, i.e. at most
   70 % transparent), faster as the seeker closes (--pulse). The painted
   badges (item manifest "warnBubble": the plush in its cloud, red / blue) are
   the whole picture; without them a coloured ring with the item's picture
   inside stands in. */
#kartHud .vwarn{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;--pulse:.6s;animation:vwarnFade var(--pulse) ease-in-out infinite alternate}
#kartHud .vwarn[hidden]{display:none}
#kartHud .vwarnBubble{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffffffcc,#ffe4e4aa 35%,#ff6b6b66 70%,#ff3b3b22);border:3px solid #ff5a5a;box-shadow:0 0 16px 4px #ff5a5a88}
#kartHud .vwarn[data-type=blue] .vwarnBubble{background:radial-gradient(circle at 35% 30%,#ffffffcc,#e4ecff99 35%,#5d8dff66 70%,#3b6bff22);border-color:#6f9bff;box-shadow:0 0 18px 5px #5d8dffaa}
#kartHud .vwarn.painted .vwarnBubble{width:92px;height:92px;border:0;border-radius:0;box-shadow:none;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 3px 6px #0008)} /* (the painted badge arrives as an inline background-image, which wins over the gradients) */
#kartHud .vwarn.painted .vwarnBubble canvas{display:none} /* the badge already shows the seeker */
#kartHud .vwarnBubble canvas{width:42px;height:42px}
#kartHud .vwarnText{font-size:11px;font-weight:900;letter-spacing:1.5px;color:#fff;text-shadow:0 0 6px #ff3b3b,0 2px 6px #000a}
#kartHud .vwarn[data-type=blue] .vwarnText{text-shadow:0 0 6px #3b6bff,0 2px 6px #000a}
@keyframes vwarnFade{from{opacity:1}to{opacity:.3}}
/* ✦ Matthew's sub boxes A and B (two at most), right after the item slot (his main box) inside .vitem: the
   .vitem .vgifts selectors outrank #kartHud .vitem canvas, so the gift icons keep their own smaller box. */
#kartHud .vitem .vgifts{display:flex;gap:4px}
#kartHud .vitem .vgifts[hidden],#kartHud .vitem .vgifts canvas[hidden]{display:none}
#kartHud .vitem .vgifts canvas{width:32px;height:32px;background:#213e4799;border:1px solid #ffffff30;border-radius:8px}
@keyframes specialReadyGlow{from{filter:drop-shadow(0 0 4px #ffd07a99)}to{filter:drop-shadow(0 0 12px #ffd07a) brightness(1.15)}}
#kartHud .vnote{font-size:13px;font-weight:800;color:#fff1d2;min-height:16px}
#kartHud .vspeed{position:absolute;right:16px;bottom:12px;font-size:34px;font-weight:900;line-height:1}
#kartHud .vspeed small{font-size:9px;letter-spacing:2px;display:block;text-align:right}
#kartHud .vboost{position:absolute;right:16px;bottom:52px;width:120px;height:4px;background:#ffffff33;border-radius:4px;overflow:hidden}
#kartHud .vboost i{display:block;height:100%;width:0;background:#8ce2ff}
#kartMap{position:absolute;right:24px;top:70px;width:180px;height:128px;opacity:.9;pointer-events:none}
/* Three on one screen: the fourth quarter is the map's, drawn twice the size and filling it, as the N64 did */
#kartQuad{display:none}
body.three #kartQuad{display:block;position:absolute;right:0;bottom:0;width:50%;height:50%;background:radial-gradient(ellipse at center,#2a3b4a 0%,#172630 75%);pointer-events:none}
body.three #kartMap{top:auto;right:25%;bottom:25%;transform:translate(50%,50%);width:min(46vw,65vh);height:auto;opacity:1}
#kartMenu{position:absolute;right:24px;top:max(16px,env(safe-area-inset-top));background:#213e47d9;color:#fff2d7;border:1px solid #ffffff25;border-radius:12px;font-size:21px;width:45px;height:45px}
#kartCountdown{position:absolute;inset:0;display:grid;place-items:center;font-size:96px;font-weight:900;text-shadow:0 6px 30px #193039;color:#fff0cf;pointer-events:none}
#kartCountdown.hidden{display:none}
#kartTouch{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(25px,env(safe-area-inset-left));right:max(25px,env(safe-area-inset-right));pointer-events:none;display:flex;justify-content:space-between;align-items:end;z-index:2}
#kartTouch.hidden{display:none}
#kartSteer{width:130px;height:130px;border:2px solid #fff4cf66;border-radius:50%;background:#23414b55;position:relative;touch-action:none;pointer-events:auto}
#kartStick{position:absolute;width:48px;height:48px;border-radius:50%;background:#fff0d9aa;left:39px;top:39px;pointer-events:none}
#kartTouch .pedals{display:flex;gap:13px;align-items:end}
#kartTouch .pedals button{pointer-events:auto;touch-action:none;border:2px solid #fff0d955;background:#294a55aa;color:#fff1d0;width:68px;height:68px;border-radius:50%;font-size:11px;font-weight:900}
#kartTouch .pedals #kartGas{width:92px;height:92px;background:#efa27cdd;color:#203d47}
#kartTouch .pedals button.down{background:#fff1d0;color:#203d47}
/* ✦ NEXT stacked over BRAKE (only while Matthew has a sub box left): the stack is as wide as its pedal, so
   the row keeps its width. ITEM glows gold while the driver's special sits in the slot. */
#kartTouch .pedals .stack{display:flex;flex-direction:column;align-items:center;gap:8px}
#kartTouch .pedals #kartNext{width:54px;height:54px}
#kartTouch .pedals #kartItem.special{box-shadow:0 0 12px 3px #ffd07a;border-color:#ffd07a}
#kartTouch .pedals button.hidden{display:none}
#kartUI .panel p.keys{font-size:11px;color:#e7c99b;margin-top:-4px}
#kartUI .overlay{position:absolute;inset:0;display:grid;place-items:center;background:#162e3780;backdrop-filter:blur(7px);z-index:5}
#kartUI .overlay.hidden{display:none}
#kartUI .panel{width:min(390px,90vw);padding:28px;background:#213e47f5;border:1px solid #ffffff30;border-radius:23px;text-align:center;box-shadow:0 25px 80px #172c4560}
#kartUI .eyebrow{font-size:10px;letter-spacing:2.6px;font-weight:800;color:#e7c99b;margin:0}
#kartUI .panel h2{font-size:30px;margin:14px 0}
#kartUI .panel p{font-size:12px;line-height:1.6;color:#d6d9c8}
#kartUI .primary,#kartUI .secondary{width:100%;border:0;padding:13px 16px;border-radius:10px;font-weight:800;font-size:13px;margin-top:10px}
#kartUI .primary{background:#f3a585;color:#203d47}
#kartUI .secondary{background:#ffffff0c;color:#fff2d7;border:1px solid #ffffff30}
#kartUI .text-button{background:none;border:none;color:#e6d4b5;font-size:12px;padding:15px 10px}
#kartUI .racer-row{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid #ffffff20;font-size:14px}
#kartUI .racer-row span:last-child{color:#cbd9bc;font-variant-numeric:tabular-nums}
/* 🏆 Tournament results: the race just run (compact, with the points each place
   earned) and the running table under it. Ten racers fit on a phone. */
#kartResults.cup .panel{width:min(520px,92vw);max-height:92vh;overflow:auto;padding:22px 24px}
#kartResults.cup .panel h2{font-size:26px;margin:10px 0}
#kartResults.cup #kartResultRows .racer-row{padding:6px 0;font-size:13px}
#kartResults.cup #kartResultRows .racer-row span:first-child{flex:1;text-align:left}
#kartUI .racer-row span.cup-gain{color:#ffd27a;font-weight:800;min-width:2.6em;text-align:right}
#kartCupTable{margin-top:14px;padding:12px 16px 4px;background:#ffffff0d;border:1px solid #ffffff24;border-radius:14px;text-align:left}
#kartCupTable.hidden{display:none}
#kartCupTable .cup-head{margin-bottom:4px;text-align:center}
#kartCupTable .cup-row{padding:8px 0;font-size:15px}
#kartCupTable .cup-head+.cup-row{border-top:0}
#kartCupTable .cup-lead,#kartCupTable .cup-lead span:last-child{color:#ffe2a6;font-weight:800}
#kartCupTable .cup-row span:last-child{font-weight:700}
@media(max-width:700px){#kartHud .vstats{font-size:16px}#kartHud .vspeed{font-size:24px}#kartMap{right:10px;top:70px;width:130px;height:92px}#kartSteer{width:100px;height:100px}#kartStick{left:24px;top:24px}#kartTouch .pedals{gap:7px}#kartTouch .pedals button{width:48px;height:48px;font-size:8px}#kartTouch .pedals #kartGas{width:62px;height:62px}#kartTouch .pedals .stack{gap:5px}#kartTouch .pedals #kartNext{width:40px;height:40px}#kartHud .vitem .vgifts canvas{width:24px;height:24px}}
/* A phone held sideways: the pit-stop panel tightens so every button (the host's End race and
   Leave the room under the ✦ specials keys line, with the two-line "Waiting for … to reconnect"
   help when a friend drops) stays on screen; the overlay does not scroll. */
@media(max-height:440px){#kartUI #kartPause .panel{padding:16px 22px}#kartUI #kartPause .panel h2{font-size:22px;margin:6px 0}#kartUI #kartPause .primary,#kartUI #kartPause .secondary{padding:10px 14px;margin-top:7px}#kartUI #kartPause .text-button{padding:6px 10px}}