/* BAGARRE KART (src/kart/hud.js) : l'interface de la course sur la grille 640 x 360, en BD (encre épaisse, cartouches
   jaunes, Bangers), une part par joueur en écran partagé */
.px.kt { pointer-events: none; }
.px .kt-view { position: absolute; overflow: hidden; transition: opacity .3s; }
.px .kt-view.hide { opacity: 0; }
.px .kt-view + .kt-view { box-shadow: inset 0 0 0 1.5px var(--ink); }
.px .kt-item { position: absolute; left: 10px; top: 8px; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--bone);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%), radial-gradient(circle, rgba(58, 34, 92, .92), rgba(14, 8, 22, .92));
  box-shadow: 2px 2px 0 var(--ink), 0 0 0 4.5px var(--ink), inset 0 0 0 2px rgba(255, 210, 59, .35), inset 0 -6px 10px rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; }
.px .kt-item.full { animation: kt-pop .25s ease-out; border-color: var(--cap); }
.px .kt-emo { font-size: 28px; line-height: 1; }
.px .kt-n { position: absolute; right: -6px; bottom: -6px; font: 13px/13px var(--px-font); color: var(--cap); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-style: normal; }
.px .kt-sp { position: absolute; left: 10px; top: 60px; width: 96px; height: 22px; }
.px .kt-sp img { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); object-fit: cover; z-index: 1; }
.px .kt-bar { position: absolute; left: 14px; top: 6px; width: 78px; height: 10px; background: rgba(18, 10, 26, .85); border: 1.5px solid var(--ink); border-radius: 0 5px 5px 0; overflow: hidden; }
.px .kt-bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .2s; }
.px .kt-sp span { position: absolute; left: 24px; top: 17px; white-space: nowrap; font: 800 7px/9px var(--px-small); color: var(--bone); text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink); text-transform: uppercase; }
.px .kt-sp em { position: absolute; left: 96px; top: 1px; font: 15px/15px var(--px-font); font-style: normal; color: #5a9cff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; opacity: 0; }
.px .kt-sp.ready .kt-bar i { background: linear-gradient(90deg, var(--c), #fff, var(--c)); background-size: 200% 100%; animation: kt-shine .6s linear infinite; }
.px .kt-sp.ready em { opacity: 1; animation: kt-blink .5s steps(2) infinite; }
.px .kt-lap { position: absolute; right: 12px; top: 8px; font: 26px/26px var(--px-font); color: var(--bone); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; transform: rotate(2deg); }
.px .kt-lap small { font-size: 12px; margin-right: 3px; color: var(--cap); }
.px .kt-lap i { font-size: 16px; font-style: normal; }
.px .kt-time { position: absolute; right: 12px; top: 36px; font: 800 11px/12px var(--px-small); color: var(--bone); text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink); font-variant-numeric: tabular-nums; }
.px .kt-coins { position: absolute; left: 12px; bottom: 10px; font: 20px/20px var(--px-font); color: var(--cap); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.px .kt-coins.max b { color: #fff; }
.px .kt-place { --c: #fff; position: absolute; right: 14px; bottom: 4px; font: 62px/62px var(--px-font); color: var(--c); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; transform: rotate(-4deg); text-shadow: 4px 4px 0 var(--blood); }
.px .kt-place i { font-size: 24px; font-style: normal; vertical-align: top; }
.px .kt-place.pop { animation: kt-place .35s cubic-bezier(.2, 1.8, .4, 1); }
.px .kt-msg { position: absolute; left: 0; right: 0; top: 36%; text-align: center; font: 30px/32px var(--px-font); color: var(--cap); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: 1px; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; }
.px .kt-msg.on { opacity: 1; transform: none; animation: kt-pop .35s cubic-bezier(.2, 1.8, .4, 1); }
.px .kt-msg small { display: block; font-size: 13px; color: var(--bone); -webkit-text-stroke: 3px var(--ink); }
.px .kt-msg.red { color: #ff4a5a; } .px .kt-msg.blue { color: #6ab8ff; } .px .kt-msg.green { color: #7dff6a; }
.px .kt-wrong { position: absolute; left: 0; right: 0; top: 55%; text-align: center; font: 22px/24px var(--px-font); color: #ff4a5a; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; opacity: 0; }
.px .kt-wrong.on { opacity: 1; animation: kt-blink .6s steps(2) infinite; }
.px .kt-tag { display: none; position: absolute; left: 112px; top: 12px; padding: 0 5px; background: var(--c); border: 1.5px solid var(--ink); font: 11px/13px var(--px-font); color: var(--ink); }
.px .kt-view.small .kt-tag { display: block; }
.px .kt-keys { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 7px; background: rgba(18, 10, 26, .82); border: 1px solid #000; color: var(--bone); font: 800 8px/11px var(--px-small); white-space: nowrap; opacity: 0; transition: opacity .5s; }
.px .kt-keys.on { opacity: 1; }
.px .kt-keys b { color: var(--cap); }
.px .kt-ink { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none;
  background: radial-gradient(circle at 30% 40%, #ff2a7a 0 12%, transparent 13%), radial-gradient(circle at 62% 30%, #2ab4d0 0 10%, transparent 11%), radial-gradient(circle at 48% 66%, #ffd23a 0 15%, transparent 16%),
    radial-gradient(circle at 75% 70%, #7a3ac8 0 9%, transparent 10%), radial-gradient(circle at 18% 75%, #3aff8a 0 8%, transparent 9%), radial-gradient(ellipse at 40% 20%, #ff6a1a 0 7%, transparent 8%); }
.px .kt-ink.on { opacity: .92; transition: opacity .1s; }
.px .kt-bsod { position: absolute; inset: 0; background: #1a5ad0; color: #fff; padding: 12% 10%; opacity: 0; transition: opacity .2s; font: 400 11px/15px 'Segoe UI', var(--px-small), sans-serif; }
.px .kt-bsod b { display: block; font: 300 44px/48px 'Segoe UI', sans-serif; margin-bottom: 8px; }
.px .kt-bsod small { display: block; margin-top: 10px; opacity: .7; font-size: 8px; }
.px .kt-bsod.on { opacity: .96; }
.px .kt-center { position: absolute; left: 0; right: 0; top: 112px; text-align: center; font: 96px/96px var(--px-font); color: var(--bone); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--blood); opacity: 0; }
.px .kt-center.on { animation: kt-count 1.1s ease-out both; }
.px .kt-center.go { color: #7dff6a; font-size: 64px; text-shadow: 5px 5px 0 #2a7f1f; }
.px .kt-title { position: absolute; left: 50%; top: 240px; transform: translateX(-50%) rotate(-2deg); padding: 6px 18px 8px; background: var(--cap); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-align: center; color: var(--ink); opacity: 0; transition: opacity .4s; }
.px .kt-title.on { opacity: 1; }
.px .kt-title small { display: block; font: 12px/12px var(--px-font); letter-spacing: 2px; color: var(--blood); }
.px .kt-title b { display: block; font: 28px/30px var(--px-font); letter-spacing: 1px; }
.px .kt-title i { display: block; font: 800 9px/11px var(--px-small); font-style: normal; }
.px .kt-title em { position: absolute; right: -8px; bottom: -12px; padding: 0 5px; background: var(--ink); color: var(--bone); font: 800 8px/12px var(--px-small); font-style: normal; }
.px .kt-map { position: absolute; right: 10px; top: 80px; width: 104px; height: 104px; opacity: 0; transition: opacity .4s; }
.px .kt-map.small { right: auto; left: 274px; top: 128px; width: 92px; height: 92px; }
.px .kt-map.on { opacity: .9; }
.px .kt-res { position: absolute; left: 140px; top: 18px; width: 360px; padding: 6px 10px 8px; background: rgba(18, 10, 26, .92); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--cap), 5px 5px 0 var(--ink); transform: rotate(-1deg); pointer-events: auto; animation: kt-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.px .kt-res-t small { display: block; font: 800 8px/10px var(--px-small); color: var(--cap); letter-spacing: 1px; }
.px .kt-res-t b { display: block; font: 26px/28px var(--px-font); color: var(--bone); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.px .kt-res ol { list-style: none; margin: 4px 0 0; padding: 0; }
.px .kt-res li { position: relative; display: flex; align-items: center; height: 30px; margin-bottom: 2px; padding: 0 6px; background: linear-gradient(90deg, var(--c) 0 5px, rgba(255, 243, 214, .08) 5px); color: var(--bone); animation: kt-slide .35s ease-out both; }
.px .kt-res li.me { background: linear-gradient(90deg, var(--c) 0 5px, rgba(255, 216, 74, .25) 5px); box-shadow: inset 0 0 0 1.5px var(--cap); }
.px .kt-res li > b { width: 26px; font: 20px/20px var(--px-font); color: var(--cap); text-align: center; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.px .kt-res li img { width: 26px; height: 26px; margin: 0 6px; border: 1.5px solid var(--ink); background: var(--c); object-fit: cover; }
.px .kt-res li span { flex: 1; font: 15px/15px var(--px-font); letter-spacing: .5px; white-space: nowrap; overflow: hidden; }
.px .kt-res li span small { display: block; font: 800 7px/9px var(--px-small); opacity: .7; letter-spacing: 0; }
.px .kt-res li i { width: 66px; font: 800 9px/10px var(--px-small); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.px .kt-res li em { width: 36px; font: 15px/15px var(--px-font); font-style: normal; color: #7dff6a; text-align: right; }
.px .kt-res-k { margin-top: 6px; text-align: center; color: var(--bone); font: 800 9px/12px var(--px-small); }
.px .kt-loading { position: absolute; left: 0; right: 0; top: 160px; text-align: center; font: 28px/30px var(--px-font); color: var(--cap); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; animation: kt-blink 1s steps(2) infinite; }
@keyframes kt-pop { from { transform: scale(1.5) rotate(-4deg); } to { transform: none; } }
@keyframes kt-place { from { transform: scale(1.7) rotate(-12deg); } to { transform: rotate(-4deg); } }
@keyframes kt-count { 0% { opacity: 0; transform: scale(2.4); } 18% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.8); } }
@keyframes kt-blink { 50% { opacity: .2; } }
@keyframes kt-shine { from { background-position: 0 0; } to { background-position: 200% 0; } }
@keyframes kt-slide { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
/* the speed lines of a boost (radiating from the middle of the view) */
.px .kt-speed { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .25s;
  background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.32) 0deg .45deg, transparent .5deg 7deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, transparent 0 34%, #000 72%); mask-image: radial-gradient(ellipse at 50% 52%, transparent 0 34%, #000 72%);
  animation: kt-speed .12s steps(2) infinite; }
@keyframes kt-speed { 50% { transform: rotate(1.5deg) scale(1.02); } }
/* the time trial: the lap times under the lap counter, no place */
.px.kt.tt .kt-place { display: none; }
.px .kt-tt { position: absolute; right: 12px; top: 52px; min-width: 96px; font: 800 9px/12px var(--px-small); color: var(--bone); text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink); font-variant-numeric: tabular-nums; }
.px .kt-tt div { display: flex; justify-content: space-between; gap: 8px; }
.px .kt-tt .best b { color: var(--cap); } .px .kt-tt .ghost { opacity: .75; } .px .kt-tt .good b { color: #7dff6a; } .px .kt-tt .bad b { color: #ff5a5a; }
.px .kt-grind { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) rotate(-2deg); padding: 1px 8px; background: #2ab4d0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font: 13px/15px var(--px-font); letter-spacing: 1px; opacity: 0; transition: opacity .12s; }
.px .kt-grind.on { opacity: 1; animation: kt-blink .5s steps(2) infinite; }

/* les menus de BAGARRE KART (src/ui/kartSelect.js kartCards) : de grandes cartes côte à côte, façon Mario Kart */
.px.km .km-head { position: absolute; left: 0; right: 0; top: 34px; text-align: center; }
.px.km .km-head small { display: block; margin-bottom: 4px; font: 800 9px/11px var(--px-small); color: var(--cap); letter-spacing: 1px; text-shadow: 1px 1px 0 var(--ink); }
.px.km .km-head b { display: block; font: 34px/36px var(--px-font); color: var(--bone); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; transform: rotate(-1.5deg); text-shadow: 4px 4px 0 var(--blood); }
.px.km .km-cards { position: absolute; left: 0; right: 0; top: 104px; display: flex; justify-content: center; gap: 14px; }
.px.km .km-card { --c: #ffd23a; position: relative; width: 132px; height: 150px; background: var(--night); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px; box-sizing: border-box; cursor: pointer; overflow: hidden;
  transform: rotate(calc((var(--k) - 1) * 1.5deg)); transition: transform .15s, filter .15s; filter: saturate(.55) brightness(.75); animation: km-in .35s calc(var(--k) * .06s) both cubic-bezier(.2, 1.6, .4, 1); }
.px.km .km-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, var(--c), transparent 70%), var(--tone); opacity: .55; }
.px.km .km-card.on { filter: none; transform: translateY(-8px) scale(1.06) rotate(0deg); box-shadow: 4px 4px 0 var(--ink), 0 0 0 3px var(--c), 0 0 22px var(--c); z-index: 1; }
.px.km .km-card.off { opacity: .45; }
.px.km .km-card.go { animation: km-go .3s ease-out; }
.px.km .km-card.shake { animation: km-shake .3s; }
.px.km .km-ic { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-size: 50px; line-height: 56px; font-style: normal; filter: drop-shadow(3px 3px 0 var(--ink)); }
.px.km .km-card b { position: relative; font: 21px/22px var(--px-font); color: var(--bone); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-align: center; letter-spacing: .5px; }
.px.km .km-card small { position: relative; margin-top: 3px; padding: 1px 6px; background: var(--c); border: 1.5px solid var(--ink); color: var(--ink); font: 800 8px/10px var(--px-small); text-transform: uppercase; }
.px.km .km-hint { position: absolute; left: 110px; right: 110px; top: 282px; text-align: center; color: var(--bone); font: 800 10px/13px var(--px-small); text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink); }
.px.km .km-keys { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: var(--bone); opacity: .8; font: 800 8px/10px var(--px-small); text-shadow: 1px 1px 0 var(--ink); }
@keyframes km-in { from { opacity: 0; transform: translateY(30px) rotate(6deg) scale(.8); } }
@keyframes km-go { 50% { transform: translateY(-14px) scale(1.12); } }
@keyframes km-shake { 25% { margin-left: -6px; } 75% { margin-left: 6px; } }

/* la sélection des pilotes (kartSelect) : la grille en haut, un plateau par joueur en bas (le garage 3D, src/kart/garage.js) */
.px.ks .ks-head { position: absolute; left: 14px; top: 8px; display: flex; align-items: center; gap: 10px; }
.px.ks .ks-head b { font: 24px/26px var(--px-font); color: var(--bone); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--blood); transform: rotate(-1deg); }
.px.ks .ks-head span { display: flex; gap: 4px; }
.px.ks .ks-head i { font-style: normal; padding: 1px 6px; background: var(--cap); border: 1.5px solid var(--ink); box-shadow: 1px 1px 0 var(--ink); color: var(--ink); font: 800 8px/11px var(--px-small); text-transform: uppercase; }
.px.ks .ks-room { position: absolute; right: 12px; top: 6px; padding: 2px 8px 3px; background: var(--night); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); text-align: center; cursor: pointer; }
.px.ks .ks-room small { display: block; font: 800 7px/8px var(--px-small); color: var(--cap); }
.px.ks .ks-room b { display: block; font: 20px/20px var(--px-font); color: var(--bone); letter-spacing: 2px; }
.px.ks .ks-room em { display: block; font: 700 6px/7px var(--px-small); color: var(--bone); opacity: .75; font-style: normal; }
.px.ks .ks-room.copied em { color: #4ade6a; opacity: 1; }
.px.ks .ks-room.copied em::after { content: ' · lien copié !'; }
.px.ks .ks-grid { position: absolute; left: 50%; top: 38px; height: 100px; transform: translateX(-50%); }
.px.ks .cs-tile { cursor: pointer; }
.px.ks .cs-tile.ks-on .ti { box-shadow: 0 0 0 2.5px var(--pc), 0 0 10px var(--pc); }
.px.ks .ks-cur { position: absolute; left: 0; top: -6px; font-style: normal; z-index: 3; pointer-events: none; }
.px.ks .ks-cur b { position: absolute; left: calc(var(--n) * 14px - 3px); top: 0; padding: 0 3px; background: var(--pc); border: 1.5px solid var(--ink); color: var(--ink); font: 9px/10px var(--px-font); white-space: nowrap; animation: ks-bob .6s ease-in-out infinite alternate; }
.px.ks .ks-cur.ok b { animation: none; outline: 1.5px solid #fff; }
.px.ks .ks-card { --pc: #ff4a4a; position: absolute; bottom: 22px; width: 144px; height: 92px; box-sizing: border-box; padding: 4px 7px; background: rgba(18, 10, 26, .86); border: 2.5px solid var(--ink); border-top: 4px solid var(--pc); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); }
.px.ks.solo .ks-card { width: 220px; }
.px.ks .ks-card.empty { background: rgba(18, 10, 26, .45); border-top-color: rgba(255, 255, 255, .2); box-shadow: none; }
.px.ks .ks-card.ready { box-shadow: 3px 3px 0 var(--ink), 0 0 14px var(--pc); }
.px.ks .ks-who { font: 800 7px/9px var(--px-small); color: var(--pc); text-transform: uppercase; letter-spacing: .5px; }
.px.ks .ks-name { font: 17px/18px var(--px-font); color: var(--bone); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; }
.px.ks .ks-name.long { font-size: 12px; line-height: 18px; }
.px.ks .ks-stats div { display: flex; align-items: center; height: 8px; }
.px.ks .ks-stats span { width: 58px; font: 800 6px/8px var(--px-small); color: var(--bone); opacity: .85; }
.px.ks .ks-stats i { display: flex; gap: 1.5px; }
.px.ks .ks-stats u, .px.ks .ks-stats s { display: block; width: 9px; height: 5px; border: 1px solid var(--ink); text-decoration: none; }
.px.ks.solo .ks-stats u, .px.ks.solo .ks-stats s { width: 18px; }
.px.ks .ks-stats u { background: var(--pc); }
.px.ks .ks-stats s { background: rgba(255, 255, 255, .12); }
.px.ks .ks-sp { margin-top: 2px; font: 800 7px/9px var(--px-small); color: var(--bone); white-space: nowrap; overflow: hidden; }
.px.ks .ks-sp b { color: var(--cap); }
.px.ks .ks-ok { position: absolute; right: 6px; top: 6px; padding: 0 6px; background: var(--pc); border: 2px solid var(--ink); color: var(--ink); font: 18px/20px var(--px-font); transform: rotate(8deg); animation: ks-stamp .3s cubic-bezier(.2, 1.8, .4, 1); }
.px.ks .ks-join { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--bone); animation: kt-blink 1.2s steps(2) infinite; }
.px.ks .ks-join span { font: 13px/14px var(--px-font); letter-spacing: .5px; }
.px.ks .ks-join small { font: 800 7px/8px var(--px-small); opacity: .7; }
.px.ks .ks-ready { position: absolute; left: 0; right: 0; top: 150px; text-align: center; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; pointer-events: none; }
.px.ks .ks-ready.on { opacity: 1; transform: none; animation: kt-pop .35s cubic-bezier(.2, 1.8, .4, 1); }
.px.ks .ks-ready > b { display: block; font: 34px/34px var(--px-font); color: var(--cap); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--blood); }
.px.ks .ks-ready small { display: inline-block; margin-top: 2px; padding: 1px 8px; background: var(--bone); border: 2px solid var(--ink); color: var(--ink); font: 800 9px/12px var(--px-small); }
.px.ks .ks-help { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; color: var(--bone); opacity: .85; font: 800 7px/9px var(--px-small); text-shadow: 1px 1px 0 var(--ink); }
@keyframes ks-bob { to { transform: translateY(-2px); } }
@keyframes ks-stamp { from { transform: scale(2.4) rotate(-10deg); opacity: 0; } }