/* ---------- art direction "BD d'horreur" (15 Oct 2026) ----------
   The menus and the HUD as a horror comic book (EC Comics, Creepshow, Goosebumps covers), to go with the dripping
   logo: thick ink outlines, hard offset shadows, halftone dots, slanted panels, yellow narration captions, sound words
   that slam in (src/ui/juice.js). Loaded after crypt.css: same 640x360 grid (.px), these rules win. Colors: ink, bone,
   blood, slime, caption yellow; each fighter brings his own (--cc), each player his (--pc). */
:root {
  --px-font: 'Bangers', 'Lilita One', 'Arial Black', sans-serif;
  --px-small: 'Barlow Condensed', 'Nunito', 'Segoe UI', sans-serif;
  --ink: #120a1a; --bone: #fff3d6; --blood: #e8202e; --cap: #ffd84a; --night: #1d1030;
  --tone: radial-gradient(circle, rgba(18, 10, 26, .5) .9px, transparent 1.25px) 0 0 / 3px 3px;
}
.px, .px * { letter-spacing: .4px; }
.px .txt { text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink); }
.px small, .px .hint { letter-spacing: .2px; }
/* the pictos of the buttons (src/ui/glyphs.js): never the ink outline nor the shadows of the text around them */
.pg text, .pg-key { -webkit-text-stroke: 0 !important; text-shadow: none !important; }

/* ink lettering: an outline drawn under the fill, then a hard shadow */
.px .ink-l, .px .cs-title, .px .ptitle, .px .ci-n, .px .cs-card .cn, .px .cs-ready span, .px .ss-blurb2 b {
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* --- the flash, sound words, ink (src/ui/juice.js) --- */
.px .jx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: visible; }
.px .jx-burst { position: absolute; pointer-events: none; }
.px .jx-burst svg { position: absolute; inset: 0; overflow: visible; }
.px .jx-burst b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--px-font); font-weight: normal; letter-spacing: 1px; white-space: nowrap; transform: rotate(-6deg); }
.px .jx-drop { position: absolute; border-radius: 50%; pointer-events: none; }
.px .jx-line { position: absolute; height: 1.6px; transform-origin: 0 50%; border-radius: 2px; pointer-events: none; }
.px .jx-flash { position: absolute; inset: -300px; pointer-events: none; }
@keyframes pulse-s { 50% { transform: scale(1.07); } }

/* --- the press start of the title: a pulse, never a blink --- */
.px .press { animation: pulse-s 1.1s ease-in-out infinite; font-size: 26px; letter-spacing: 2px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }

/* ================= character select ================= */
.px .cs-vignette { position: absolute; inset: -40px; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 5, 18, .78) 0, rgba(10, 5, 18, .35) 60px, transparent 120px),
    radial-gradient(ellipse at 50% 62%, transparent 45%, rgba(10, 5, 18, .55) 100%); }
.px .cs-title { left: 12px; top: 2px; font-size: 34px; line-height: 38px; letter-spacing: 1.5px; color: var(--bone); text-shadow: 3px 3px 0 var(--blood), 5px 5px 0 var(--ink);
  transform: rotate(-2deg); transform-origin: left; animation: title-slam .45s cubic-bezier(.2, 1.7, .4, 1) both; white-space: nowrap; }
.px .cs-title b { font-weight: normal; color: var(--cap); }
@keyframes title-slam { 0% { transform: translateX(-60px) rotate(-8deg) scale(1.6); opacity: 0; } 100% { transform: rotate(-2deg); opacity: 1; } }
.px .cs-room { border: 0; background: var(--cap); border-radius: 0; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); transform: rotate(2deg); height: 32px; top: 6px; }
.px .cs-room small, .px .cs-room i { color: var(--ink); text-shadow: none; }
.px .cs-room b { color: var(--blood); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.px .cs-room b { font-size: 21px; letter-spacing: 1px; top: -3px; } /* (6 letters since 18 Oct 2026) */
.px .cs-room[title] { cursor: pointer; pointer-events: auto; }
.px .cs-room.locked { background: #b9b2a4; }
.px .cs-room.locked b { color: #5a5a5a; text-decoration: line-through; text-decoration-thickness: 3px; }

.px .cs-grid2 { left: 12px; top: 46px; width: 350px; height: 147px; }
.px .cs-tile { width: 33px; height: 46px; border: 0; outline: 0; border-radius: 0; background: none; box-shadow: none !important; transform: none !important; filter: none !important;
  animation: tile-in .4s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 16ms + 120ms); }
@keyframes tile-in { from { transform: translateY(-30px) rotate(-12deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.px .cs-tile .ti { position: absolute; inset: 0; transition: transform .12s ease-out, filter .12s; }
.px .cs-tile .tb { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.px .cs-tile .tb::before, .px .cs-tile .tb::after { content: ''; position: absolute; inset: 2px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.px .cs-tile .tb::before { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cc) 70%, #fff) 0, var(--cc) 38%, color-mix(in srgb, var(--cc) 30%, var(--ink)) 100%); }
.px .cs-tile .tb::after { background: var(--tone); -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 90%); mask-image: linear-gradient(180deg, transparent 20%, #000 90%); }
.px .cs-tile img { position: absolute; left: -6px; top: -3px; width: 45px; height: 45px; transition: transform .14s cubic-bezier(.2, 1.8, .4, 1);
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }
.px .cs-tile .q { position: absolute; inset: 0 0 8px; font-size: 36px; line-height: 40px; color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; }
.px .cs-tile .nm { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; padding: 0 3px; background: var(--ink); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  font-size: 8px; line-height: 10.5px; color: var(--bone); white-space: nowrap; overflow: hidden; text-align: center;
  display: flex; justify-content: center; } /* (flex: a name wider than the tile stays centred, so scaled from its middle it fits) */
/* past 55 tiles (the mercato of streamers, 22 Oct 2026): 12 columns on 6 rows, smaller tiles (screens.js HUGE) */
.px .cs-tile.cs6 { width: 27.5px; height: 37.5px; }
.px .cs-tile.cs6 img { left: -5px; top: -3px; width: 37px; height: 37px; }
.px .cs-tile.cs6 .q { font-size: 30px; line-height: 32px; }
.px .cs-tile.cs6 .nm { height: 9px; font-size: 7px; line-height: 9.5px; padding: 0 2px; }
.px .cs-tile .nm em { display: inline-block; font-style: normal; transform-origin: 50% 50% !important; }
.px .cs-tile .sh { position: absolute; inset: 2px; pointer-events: none; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); overflow: hidden; }
.px .cs-tile .sh::after { content: ''; position: absolute; top: -10px; bottom: -10px; width: 10px; left: -20px; background: rgba(255, 255, 255, .55); transform: skewX(-20deg); }
.px .cs-tile:hover .ti { filter: brightness(1.12); }
/* under a cursor: it jumps out, the frame takes the player's color, the head pops, a shine runs over it */
.px .cs-tile.hot { z-index: 4; }
.px .cs-tile.hot .ti { transform: translateY(-4px) scale(1.16) rotate(-3deg); filter: drop-shadow(0 0 5px var(--pc)) drop-shadow(2px 3px 0 var(--ink)); transition: transform .2s cubic-bezier(.2, 2, .4, 1); }
.px .cs-tile.hot .tb { background: var(--pc); }
.px .cs-tile.hot img { transform: scale(1.14) translateY(-3px); }
.px .cs-tile.hot .sh::after { animation: shine .5s ease-out .05s both; }
@keyframes shine { from { left: -20px; } to { left: 60px; } }
.px .cs-tok { width: auto; height: auto; z-index: 6; animation: tok .45s ease-in-out infinite alternate; }
.px .cs-tok b { position: static; display: block; padding: 0 3px; font-size: 9px; line-height: 10px; color: #fff; background: var(--pc); border: 1.5px solid var(--ink); border-radius: 6px 6px 6px 1px; box-shadow: 1.5px 1.5px 0 var(--ink); text-shadow: 1px 1px 0 var(--ink); }

/* the poster of the fighter under the cursor */
.px .cs-info2 { left: 368px; top: 44px; right: auto; width: 262px; height: 150px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; animation: none !important; overflow: visible; }
.px .cs-info2 .ib { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.px .cs-info2 .ib::before, .px .cs-info2 .ib::after { content: ''; position: absolute; inset: 2.5px; clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }
.px .cs-info2 .ib::before { background: radial-gradient(circle at 76% 48%, color-mix(in srgb, var(--cc) 60%, transparent) 0, transparent 58%), linear-gradient(165deg, #2f1a46 0, #170c24 70%); }
.px .cs-info2 .ib::after { background: radial-gradient(circle, color-mix(in srgb, var(--cc) 55%, transparent) 1px, transparent 1.5px) 0 0 / 5px 5px;
  -webkit-mask-image: radial-gradient(circle at 76% 50%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 76% 50%, #000 0, transparent 62%); }
.px .ci-p { position: absolute; right: 2px; bottom: 2.5px; width: 146px; height: 146px; clip-path: inset(-20px 0 0 0);
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(5px 2px 0 rgba(10, 5, 18, .6)); }
.px .ci-n { position: absolute; left: 14px; top: 8px; z-index: 2; font-size: 38px; line-height: 40px; letter-spacing: 1.5px; color: var(--cc); text-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap; transform: rotate(-4deg); transform-origin: 0 50%; -webkit-text-stroke: 5px var(--ink); }
.px .ci-n em { display: inline-block; font-style: normal; }
.px .ci-n.ci-wait { color: var(--bone); animation: pulse-s 1.2s ease-in-out infinite; }
.px .ci-t { position: absolute; left: 16px; top: 52px; z-index: 2; max-width: 150px; margin: 0; padding: 2px 5px; background: var(--cap); color: var(--ink); text-shadow: none;
  font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 9px; line-height: 10px; text-transform: uppercase; box-shadow: 0 0 0 1.5px var(--ink), 2.5px 2.5px 0 1.5px var(--ink); transform: rotate(-1.5deg); }
.px .ci-sp { position: absolute; left: 13px; top: 76px; z-index: 2; width: 156px; display: grid; gap: 3px; }
/* a fighter with another look (render/rig/altModels.js): the button that changes it, over the bottom of the bust (a click too) */
.px .ci-alt { position: absolute; right: 4px; bottom: 6px; z-index: 3; padding: 1px 5px; background: var(--cap); color: var(--ink); cursor: pointer; pointer-events: auto;
  font-family: var(--px-small); font-weight: 800; font-size: 9px; line-height: 10px; text-transform: uppercase; box-shadow: 0 0 0 1.5px var(--ink), 2px 2px 0 1.5px var(--ink); transform: rotate(-2deg); }
.px .ci-alt b { display: inline-block; padding: 0 2px; margin-right: 1px; background: var(--ink); color: var(--cap); }
.px .ci-s { display: flex; align-items: center; gap: 3px; height: 14.5px; padding-right: 6px; background: rgba(12, 6, 20, .86); border-left: 3px solid var(--cc); text-shadow: none;
  font-family: var(--px-font); font-size: 12px; line-height: 14.5px; color: var(--bone); white-space: nowrap; overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.px .ci-s b.kx { flex: none; width: 11px; height: 11px; margin-left: 2px; border-radius: 50%; background: #3b8bff; color: #fff; box-shadow: 0 0 0 1.2px var(--ink); font-size: 9px; line-height: 11.5px; text-align: center; }
.px .ci-s i { flex: none; width: 9px; font-style: normal; text-align: center; font-family: var(--px-small); font-weight: 900; font-size: 11px; color: var(--cap); }
.px .cs-info2.flip .ci-n { animation: name-slam .34s cubic-bezier(.2, 1.8, .4, 1) both; }
.px .cs-info2.flip .ci-p { animation: bust-in .38s cubic-bezier(.2, 1.4, .4, 1) both; }
.px .cs-info2.flip .ci-t { animation: cap-in .3s cubic-bezier(.2, 1.8, .4, 1) .07s both; }
.px .cs-info2.flip .ci-s { animation: sp-in .26s cubic-bezier(.2, 1.6, .4, 1) both; }
.px .cs-info2.flip .ci-s:nth-child(2) { animation-delay: .05s; } .px .cs-info2.flip .ci-s:nth-child(3) { animation-delay: .1s; } .px .cs-info2.flip .ci-s:nth-child(4) { animation-delay: .15s; }
@keyframes name-slam { 0% { transform: translateX(50px) rotate(-10deg) scale(1.7); opacity: 0; } 100% { transform: rotate(-4deg); opacity: 1; } }
@keyframes bust-in { 0% { transform: translateX(50px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cap-in { 0% { transform: rotate(-12deg) scale(.3); opacity: 0; } 100% { transform: rotate(-1.5deg); opacity: 1; } }
@keyframes sp-in { 0% { transform: translateX(-30px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* the four players' cards */
.px .cs-cards { left: 8px; top: 300px; height: 56px; }
.px .cs-card { width: 150px; height: 54px; border: 0; background: none; box-shadow: none !important; opacity: 1; padding: 0; overflow: visible; }
.px .cs-card .cb { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.px .cs-card .cb::before, .px .cs-card .cb::after { content: ''; position: absolute; inset: 2px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .cs-card .cb::before { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pc) 16%, transparent) 0 5px, transparent 5px 10px), #170d22; }
.px .cs-card.used .cb::before { background: linear-gradient(105deg, var(--pc) 0 36%, color-mix(in srgb, var(--pc) 35%, var(--ink)) 36.5% 39%, #1b0f28 39.5%); }
.px .cs-card.used .cb::after { background: radial-gradient(circle, rgba(255, 255, 255, .28) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px; -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 45%); mask-image: linear-gradient(90deg, #000 0, transparent 45%); }
.px .cs-card.ready { filter: drop-shadow(0 0 4px var(--pc)); }
.px .cs-card .cp { left: 2px; top: -14px; width: 62px; height: 66px; border: 0; outline: 0; border-radius: 0; background: none; overflow: visible; clip-path: inset(-30px -10px 2px -10px); }
.px .cs-card .cp img { position: absolute; left: 0; bottom: 0; width: 64px; height: 64px; filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)); }
.px .cs-card .cp .q { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 34px; line-height: 40px; color: var(--ink); text-shadow: none; }
.px .cs-card .cj { left: -6px; top: -11px; z-index: 3; padding: 0 4px; font-size: 13px; line-height: 14px; color: #fff; background: var(--pc); box-shadow: 0 0 0 1.5px var(--ink), 2px 2px 0 1.5px var(--ink); transform: rotate(-8deg); text-shadow: 1px 1px 0 var(--ink); }
.px .cs-card:not(.used) .cj { left: 14px; top: 8px; font-size: 30px; line-height: 32px; padding: 0; background: none; box-shadow: none; color: var(--pc); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); transform: rotate(-5deg); }
.px .cs-card .cn { left: 66px; top: 9px; right: auto; width: 82px; font-size: 19px; line-height: 20px; letter-spacing: .8px; color: var(--bone); text-shadow: 2px 2px 0 var(--ink); overflow: visible; }
.px .cs-card .cn em { display: inline-block; font-style: normal; }
.px .cs-card .cw { left: 67px; top: 32px; right: 10px; font-family: var(--px-small); font-weight: 700; font-size: 8px; line-height: 9px; text-transform: uppercase; color: #cdbde0; text-shadow: 1px 1px 0 var(--ink); }
.px .cs-card:not(.used) .cw { left: 54px; top: 18px; right: 6px; font-family: var(--px-font); font-weight: normal; font-size: 12px; line-height: 14px; color: var(--bone); animation: pulse-s 1.1s ease-in-out infinite; transform-origin: 30% 50%; }
.px .cs-card .cw .pg { margin: 0 2px 0 0; } /* (A, R3 : les pictos de la manette choisie, src/ui/glyphs.js) */
.px .cs-card .stamp { left: 6px; right: auto; top: 26px; z-index: 4; padding: 0 5px; font-size: 20px; line-height: 20px; letter-spacing: 1px; color: var(--blood); background: var(--bone); border: 2.5px solid var(--blood);
  box-shadow: 0 0 0 1.5px var(--ink), 3px 3px 0 1.5px var(--ink); text-shadow: none; transform: rotate(-9deg); animation: stamp2 .32s cubic-bezier(.3, 1.9, .5, 1) both; }
@keyframes stamp2 { from { transform: rotate(-35deg) scale(3.4); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
.px .cs-card.slam .cp { animation: slam .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slam { 0% { transform: scale(1.9) rotate(-8deg); filter: brightness(3); } 100% { transform: none; filter: none; } }

.px .cs-help2 { top: 279px; font-family: var(--px-small); font-weight: 700; font-size: 9px; color: #e6d8f2; text-transform: uppercase; }
.px .cs-help2 b { font-weight: normal; font-size: 12px; }

/* everyone ready: a striped warning band slams across the screen */
.px .cs-ready { left: -40px; right: -40px; top: 184px; height: 46px; background: none; border: 0; transform: translateX(-115%) skewY(-4deg) rotate(-1deg); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); z-index: 10; }
.px .cs-ready.on { transform: skewY(-4deg) rotate(-1deg); }
.px .cs-ready .rb { position: absolute; inset: 0; background: repeating-linear-gradient(-50deg, var(--blood) 0 16px, #a80c1a 16px 32px); box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), 0 -6px 0 var(--cap), 0 6px 0 var(--cap), 0 -8px 0 var(--ink), 0 8px 0 var(--ink); }
.px .cs-ready span { position: relative; font-size: 36px; line-height: 38px; letter-spacing: 3px; color: var(--bone); text-shadow: 4px 4px 0 var(--ink); -webkit-text-stroke: 5px var(--ink); }
.px .cs-ready.on span { animation: ready-pump .5s ease-in-out infinite alternate; }
@keyframes ready-pump { from { transform: scale(1); } to { transform: scale(1.05) rotate(-1deg); } }
.px .cs-ready small { position: relative; display: inline-block; margin-top: -2px; padding: 0 6px; background: var(--cap); color: var(--ink); text-shadow: none; box-shadow: 0 0 0 1.5px var(--ink);
  font-family: var(--px-font); font-size: 10px; line-height: 12px; animation: pulse-s 1s ease-in-out infinite; }

/* ---- the layout of 22 Oct 2026 (.cs-v3: the local select, the ranked one; screens.js V3, showcase.js onCards) ----
   On top, on a dark page: the whole roster (faces only, 13 columns) on the left, the poster of the fighter under the
   cursor on the right (its specials and smashes, the one the 3D fighter is showing lit). At the bottom, each player's
   column: his fighter in 3D, big, in a beam of his color, standing right behind his card. */
.px.cs-v3 .cs-vignette { inset: -40px;
  background: linear-gradient(180deg, rgba(10, 5, 18, .9) 0, rgba(10, 5, 18, .82) 232px, rgba(10, 5, 18, .3) 250px, transparent 268px, transparent 330px, rgba(10, 5, 18, .7) 400px),
    radial-gradient(ellipse at 50% 80%, transparent 50%, rgba(10, 5, 18, .5) 100%); }
/* a thin ink line with the caption yellow under the top part: the page and the stage below */
.px.cs-v3 .cs-vignette::after { content: ''; position: absolute; left: 0; right: 0; top: 241px; height: 2px; background: linear-gradient(90deg, transparent, var(--cap) 20%, var(--cap) 80%, transparent); opacity: .35; }
.px.cs-v3 .cs-title { top: 2px; font-size: 23px; line-height: 27px; text-shadow: 2px 2px 0 var(--blood), 4px 4px 0 var(--ink); }
.px.cs-v3 .cs-room { top: 1px; height: 26px; }
.px.cs-v3 .cs-grid2 { left: 8px; top: 32px; width: 442px; height: 158px; }
.px .cs-tile.t3 { width: 32px; height: 30px; animation-delay: calc(var(--i) * 7ms + 100ms); }
.px .cs-tile.t3 .tb { clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.px .cs-tile.t3 .tb::before, .px .cs-tile.t3 .tb::after, .px .cs-tile.t3 .sh { inset: 1.5px; clip-path: polygon(3.5px 0, 100% 0, calc(100% - 3.5px) 100%, 0 100%); }
.px .cs-tile.t3 img { left: -2px; top: -3px; width: 36px; height: 36px; clip-path: inset(0 0 3px 0); }
.px .cs-tile.t3 .nm { display: none; }
.px .cs-tile.t3 .q { inset: 0; font-size: 26px; line-height: 31px; }
.px .cs-tile.t3.hot .ti { transform: translateY(-3px) scale(1.32) rotate(-3deg); }
.px .cs-tile.t3 .cs-tok b { font-size: 8px; line-height: 9px; padding: 0 2px; }
/* the poster: narrower, the rows bigger and spaced; the row of the move shown in 3D lights up and slides out */
.px.cs-v3 .cs-info2 { left: 456px; top: 30px; width: 178px; height: 162px; }
.px.cs-v3 .ci-p { width: 112px; height: 112px; opacity: .9; }
.px.cs-v3 .ci-n { left: 11px; top: 3px; font-size: 27px; line-height: 32px; -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.px.cs-v3 .ci-t { left: 12px; top: 37px; max-width: 132px; font-size: 8.5px; line-height: 9.5px; }
.px.cs-v3 .ci-sp { left: 9px; top: 64px; width: 160px; gap: 2.5px; }
.px.cs-v3 .ci-s { position: relative; height: 15px; font-size: 11.5px; line-height: 15px; transition: transform .16s cubic-bezier(.2, 1.8, .4, 1), background .12s; }
.px.cs-v3 .ci-s span { overflow: hidden; text-overflow: ellipsis; }
.px .ci-s b.ka { flex: none; width: 11px; height: 11px; margin-left: 2px; border-radius: 50%; background: #3bdc5a; color: var(--ink); box-shadow: 0 0 0 1.2px var(--ink); font-size: 9px; line-height: 11.5px; text-align: center; }
.px .ci-sm { display: none !important; }
.px.cs-v3 .ci-sm { display: flex !important; border-left-color: #3bdc5a; font-size: 10.5px; }
.px.cs-v3 .ci-s.on { transform: translateX(7px) scale(1.06); background: var(--cap); color: var(--ink); border-left-color: var(--ink); animation: ci-on .3s ease-out; }
.px.cs-v3 .ci-s.on i { color: var(--blood); }
.px.cs-v3 .ci-s.on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--blood); animation: ci-bar 1.4s linear both; }
@keyframes ci-on { 0% { filter: brightness(2.2); } 100% { filter: none; } }
@keyframes ci-bar { from { width: 0; } to { width: 100%; } }
.px.cs-v3 .ci-alt { bottom: 4px; }
/* who made the model (src/ui/participer.js): a volunteer's name, or « provisoire » (small, bottom left of the card) */
.px .ci-by { position: absolute; left: 6px; bottom: 6px; z-index: 3; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 4px;
  font-family: var(--px-small); font-size: 8px; line-height: 10px; color: var(--cap); background: rgba(10, 6, 20, .72); text-shadow: none; }
.px .ci-by.who { background: var(--cap); color: var(--ink); }
.px.cs-v3 .ci-by { bottom: 4px; }
.px.cs-v3 .cs-help2 { top: 196px; font-size: 8.5px; }
.px.cs-v3 .cs-help2 b { font-size: 11px; }
.px.cs-v3 .cs-ready { top: 128px; }
/* the cards: lower and flatter, no portrait (the fighter stands above in 3D), the name big, the move he shows */
.px.cs-v3 .cs-cards { top: 316px; height: 42px; }
.px.cs-v3 .cs-card { height: 40px; }
.px.cs-v3 .cs-card:not(.rk-queue) .cp { display: none; }
.px.cs-v3 .cs-card.used .cb { background: var(--pc); }
.px.cs-v3 .cs-card.used .cb::before { background: linear-gradient(100deg, color-mix(in srgb, var(--cc) 55%, #1b0f28) 0, #1b0f28 62%); }
.px.cs-v3 .cs-card.used .cb::after { -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 60%); mask-image: linear-gradient(90deg, #000 0, transparent 60%); }
.px.cs-v3 .cs-card .cn { left: 13px; top: 3px; width: 128px; font-size: 21px; line-height: 23px; }
.px.cs-v3 .cs-card.hov .cn { color: color-mix(in srgb, var(--bone) 80%, var(--cc)); }
.px.cs-v3 .cs-card .cw { left: 14px; top: 26px; right: 8px; white-space: nowrap; overflow: hidden; }
.px.cs-v3 .cs-card:not(.used) .cj { top: 3px; font-size: 28px; line-height: 30px; }
.px.cs-v3 .cs-card:not(.used) .cw { top: 4px !important; left: 52px; white-space: normal !important; line-height: 14px !important; font-size: 11px; }
.px.cs-v3 .cs-card:not(.used) .cw .pg { font-size: 9.5px; } /* (le picto du bouton, src/ui/glyphs.js : sans lui « R3 : CPU » passait sous la carte) */
.px.cs-v3 .cs-card .stamp { left: auto; right: 4px; top: 12px; font-size: 17px; line-height: 17px; }
.px.cs-v3 .cs-card.ready .cn { width: 92px; }
.px.cs-v3 .cs-card .cm { position: absolute; left: 12px; top: 25px; max-width: 132px; height: 12px; display: none; align-items: center; gap: 2px; padding: 0 5px 0 1px; background: var(--ink);
  color: var(--cap); font-family: var(--px-font); font-size: 10px; line-height: 12px; white-space: nowrap; overflow: hidden; box-shadow: 0 0 0 1px var(--cc); transform: rotate(-1.5deg); }
.px.cs-v3 .cs-card.demo .cm { display: flex; }
.px.cs-v3 .cs-card.demo .cw { visibility: hidden; }
.px.cs-v3 .cs-card .cm b { flex: none; width: 10px; height: 10px; border-radius: 50%; color: var(--ink); font-size: 8px; line-height: 10.5px; text-align: center; box-shadow: 0 0 0 1px var(--ink); }
.px.cs-v3 .cs-card .cm b.kx { background: #3b8bff; color: #fff; } .px.cs-v3 .cs-card .cm b.ka { background: #3bdc5a; }
.px.cs-v3 .cs-card .cm i { font-style: normal; color: var(--bone); margin: 0 1px; }
.px.cs-v3 .cs-card .cm.pop { animation: cm-pop .28s cubic-bezier(.2, 1.9, .4, 1); }
@keyframes cm-pop { 0% { transform: rotate(-8deg) scale(1.5); filter: brightness(2); } 100% { transform: rotate(-1.5deg); filter: none; } }
.px.cs-v3 .cs-card.slam .cn { animation: slam .3s cubic-bezier(.2, 1.6, .4, 1); }
.px.cs-v3 .cs-card .lpng { top: -8px; }
/* the ranked select (src/ui/ranked.js): the queue's card keeps its emblem, popping out of its top */
.px.cs-v3 .rk-queue .cp { top: -26px; }
.px.cs-v3 .rk-queue .cn { left: 66px; width: 78px; font-size: 18px; }
.px.cs-v3 .rk-queue .cw { left: 67px; top: 24px; white-space: normal; line-height: 8px; }

/* ================= stage select: comic panels pinned askew ================= */
.px .ss-grid2 { left: 18px; top: 48px; width: 604px; height: 150px; }
.px .ss-tile { width: 97px; height: 74px; border: 0; outline: 0; border-radius: 0; background: none; box-shadow: none !important; transform: none !important; filter: none !important;
  animation: panel-in .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 40ms + 100ms); }
@keyframes panel-in { from { transform: translateY(-40px) rotate(-14deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.px .ss-tile .ti { position: absolute; inset: 0; padding: 2px; background: var(--ink); transform: rotate(var(--r)); box-shadow: 3px 3px 0 rgba(10, 5, 18, .75); transition: transform .18s cubic-bezier(.2, 1.8, .4, 1); }
.px .ss-tile img { display: block; width: 93px; height: 50px; object-fit: cover; outline: 1px solid rgba(255, 243, 214, .45); outline-offset: -1px; transition: filter .15s; }
.px .ss-grid2 .ss-tile:not(.on) img { filter: saturate(.7) brightness(.72); }
.px .ss-tile .nm { display: flex; justify-content: center; height: 12px; margin-top: 1px; font-size: 10px; line-height: 13px; color: var(--bone); text-align: center; white-space: nowrap; overflow: hidden; letter-spacing: .8px; }
.px .ss-tile .q { display: block; height: 50px; font-size: 40px; line-height: 52px; text-align: center; color: var(--ink); text-shadow: none; background: repeating-linear-gradient(-45deg, #9dff3a 0 8px, #6ec324 8px 16px); }
.px .ss-tile .nm em { display: inline-block; font-style: normal; transform-origin: 50% 50% !important; }
.px .ss-tile.on { z-index: 3; }
.px .ss-grid2.ss7 .ss-tile { width: 84px; height: 68px; }
.px .ss-grid2.ss7 .ss-tile img { width: 80px; height: 44px; }
.px .ss-grid2.ss7 .ss-tile .q { height: 44px; line-height: 46px; }
.px .ss-tile.on .ti { transform: rotate(0deg) scale(1.14) translateY(-3px); background: var(--cap); box-shadow: 0 0 0 2px var(--ink), 5px 5px 0 2px var(--ink), 0 0 16px rgba(255, 216, 74, .55); }
.px .ss-tile.on .nm { color: var(--ink); }
.px .ss-tile.pop .ti { animation: wobble .3s ease-out; }
@keyframes wobble { 0% { transform: rotate(-6deg) scale(1.22); } 50% { transform: rotate(3deg) scale(1.1); } 100% { transform: rotate(0) scale(1.14) translateY(-3px); } }
.px .ss-tile.pick { animation: none; }
.px .ss-tile.pick .ti { animation: slam .32s cubic-bezier(.2, 1.6, .4, 1); }

/* the narration caption: where the fight happens */
.px .ss-blurb2 { left: 22px; right: 22px; top: 208px; height: auto; min-height: 38px; padding: 3px 9px 4px; border: 0; border-radius: 0; background: var(--cap);
  box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); transform: rotate(-.6deg); }
.px .ss-blurb2.flip { animation: cap-flip .26s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes cap-flip { 0% { transform: rotate(-4deg) scale(.92); } 100% { transform: rotate(-.6deg); } }
.px .ss-blurb2 small { font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 9px; color: var(--ink); text-shadow: none; letter-spacing: .5px; }
.px .ss-blurb2 b { display: inline-block; margin-left: 5px; font-size: 22px; line-height: 22px; letter-spacing: 1.2px; color: var(--blood); text-shadow: 2px 2px 0 var(--ink); -webkit-text-stroke: 3.5px var(--ink); }
.px .ss-blurb2 span { display: block; font-family: var(--px-small); font-weight: 700; font-size: 10px; line-height: 11px; color: var(--ink); text-shadow: none; }

/* the rules: little ink cards, their label on a black strip */
.px .ss-rules2 { left: 18px; right: 18px; top: 262px; gap: 8px; }
.px .ss-rule { height: 34px; border: 0; border-radius: 0; background: #1d1030; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); filter: none !important; transition: transform .14s cubic-bezier(.2, 1.8, .4, 1); }
.px .ss-rule small { display: block; height: 11px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-weight: 800; font-size: 8px; line-height: 11px; text-shadow: none; letter-spacing: 1px; }
.px .ss-rule span { margin-top: 3px; font-size: 16px; line-height: 17px; }
.px .ss-rule span b { font-weight: normal; color: var(--bone); text-shadow: 2px 2px 0 var(--ink); }
.px .ss-rule.on { transform: translateY(-3px) rotate(-1.5deg); background: #2c1745; box-shadow: 0 0 0 2px var(--slime), 4px 4px 0 2px var(--ink), 0 0 10px rgba(157, 255, 58, .45); }
.px .ss-rule.on small { color: var(--slime); }
.px .ss-rule.on span b { color: var(--slime); }
.px .ss-rule.on img { opacity: 1; animation: tok .35s ease-in-out infinite alternate; }
.px .ss-help { top: 304px; }

/* ================= in-match HUD: a slanted comic panel per fighter ================= */
.px .phc { top: 306px; width: 132px; height: 48px; border: 0; background: none; box-shadow: none; overflow: visible; animation: hud-in .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes hud-in { from { transform: translateY(90px) rotate(-8deg); } to { transform: none; } }
.px .phc .hb { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.px .phc .hb::before, .px .phc .hb::after { content: ''; position: absolute; inset: 2px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .phc .hb::before { background: linear-gradient(105deg, color-mix(in srgb, var(--cc) 75%, var(--ink)) 0 30%, var(--pc) 30.5% 33%, #1b0f28 33.5%), #1b0f28; }
.px .phc .hb::after { background: radial-gradient(circle, rgba(255, 255, 255, .22) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 40%); mask-image: linear-gradient(90deg, #000, transparent 40%); }
.px .phc .pp { left: -4px; top: -18px; width: 50px; height: 64px; border: 0; background: none; overflow: visible; clip-path: inset(-30px -10px 2px -10px); }
.px .phc .pp img { position: absolute; left: 0; bottom: 0; width: 52px; height: 52px; margin: 0; filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)); }
.px .phc .pct { left: 46px; top: -1px; font-size: 34px; line-height: 36px; text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; transform-origin: 30% 80%; white-space: nowrap; }
.px .phc .pct b { display: inline-block; font-weight: normal; transform: skewX(-8deg); letter-spacing: 1px; }
.px .phc .pct small { font-size: 16px; -webkit-text-stroke: 3px var(--ink); }
.px .phc .pct.bump { animation: pct-bump .24s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes pct-bump { 0% { filter: brightness(4); } 100% { filter: none; } }
.px .phc .tag { position: absolute; left: 44px; right: 7px; bottom: 3px; height: 11px; padding: 0 5px 0 6px; display: flex; gap: 4px; align-items: center; background: var(--pc); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); white-space: nowrap; overflow: hidden; }
.px .phc .pj { position: static; font-size: 9px; line-height: 11px; color: var(--ink); text-shadow: none; font-weight: normal; }
.px .phc .pj i { font-style: normal; font-size: 7px; color: var(--ink); opacity: .7; }
.px .phc .pn { position: static; max-width: none; font-family: var(--px-font); font-size: 9px; line-height: 11px; color: var(--bone); text-shadow: 1px 1px 0 var(--ink); overflow: hidden; }
.px .phc .stocks { right: 12px; top: -7px; z-index: 2; gap: 1px; max-width: none; flex-wrap: nowrap; align-items: center; }
.px .phc .st, .px .jx-layer .st { display: block; width: 11px; height: 11px; border-radius: 50%; overflow: hidden; background: var(--pc); box-shadow: 0 0 0 1.2px var(--ink); }
.px .phc .st img, .px .jx-layer .st img { width: 15px; height: 15px; margin: -1px 0 0 -2px; }
.px .jx-layer .st.fall { position: absolute; z-index: 5; }
.px .phc .sx { font-size: 10px; line-height: 11px; color: var(--bone); text-shadow: 1px 1px 0 var(--ink); font-weight: normal; }
@keyframes cd-pop { 0% { transform: scale(2); filter: brightness(3); } 100% { transform: none; filter: none; } }
/* past 100 % the number trembles, past 150 % the panel glows red (slowly: a pulse, not a strobe) */
.px .phc.hot .pct b { animation: tremble .12s steps(2) infinite; }
@keyframes tremble { 0% { transform: skewX(-8deg) translate(.4px, -.3px); } 100% { transform: skewX(-8deg) translate(-.4px, .3px); } }
.px .phc.danger { animation: danger-c 1s ease-in-out infinite; }
.px .phc.danger .pct b { animation: tremble .08s steps(2) infinite; }
@keyframes danger-c { 50% { filter: drop-shadow(0 0 6px #ff2a2a); } }
.px .phc.lost { animation: ko-card .45s ease-out; }
@keyframes ko-card { 0% { transform: translate(5px, -4px) rotate(4deg); filter: brightness(3); } 30% { transform: translate(-4px, 3px) rotate(-3deg); } 60% { transform: translate(2px, 1px); } 100% { transform: none; filter: none; } }
.px .phc.lost .pp { animation: slam .35s ease-in-out; }
.px .phc.out { filter: grayscale(1) brightness(.55); }
/* a duo (BIGO & FOLI): the second one's % in a small chip over the card (src/ui/hud.js); grey with its countdown while it is away */
.px .phc .duo2 { position: absolute; left: 40px; top: -17px; height: 13px; display: flex; align-items: center; gap: 3px; padding: 0 5px 0 2px; background: var(--ink); color: var(--bone); font-size: 11px; line-height: 13px; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); white-space: nowrap; }
.px .phc .duo2 .st { width: 10px; height: 10px; }
.px .phc .duo2 small { font-size: 8px; }
.px .phc .duo2.away { color: #8a8098; }
.px .phc .duo2.away .st { filter: grayscale(1) brightness(.6); }
.px .phc .duo2.ctl { background: var(--pc); color: #fff; outline: 2px solid #fff; z-index: 2; } /* the player steers FOLI (B down) */
.px .phc.duo-ctl .pp { filter: brightness(.6) saturate(.7); } /* (and BIGO's own portrait dims a little) */
.px .phud-timer { top: 2px; font-size: 32px; letter-spacing: 2px; color: var(--bone); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--blood); }
.px .phud-timer.low { color: var(--blood); text-shadow: 3px 3px 0 var(--ink); animation: pulse-s .5s ease-in-out infinite; }
/* le prochain mini-jeu : seulement ses 5 dernières secondes, un gros encadré de BD centré sous le haut (la surprise) */
.px .phud-mg { left: 0; right: 0; top: 38px; margin: 0 auto; width: max-content; padding: 2px 10px 4px; background: var(--cap); color: var(--ink); border: 0;
  box-shadow: 0 0 0 1.5px var(--ink), 3px 3px 0 1.5px var(--ink); transform: rotate(-1.5deg);
  font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 8px; line-height: 11px; text-shadow: none; }
.px .phud-mg b { font-family: var(--px-font); font-style: normal; font-size: 30px; line-height: 30px; color: var(--blood); text-shadow: none; }
.px .phud-mg em { display: block; font-family: var(--px-font); font-style: normal; font-size: 20px; line-height: 22px; color: var(--blood); text-transform: uppercase; }
.px .phud-mg.tick { animation: cd-pop .45s ease-out; }
/* le ping en ligne (src/ui/hud.js setPings) : une petite pastille au-dessus de chaque carte (le ping du joueur vers l'hôte)
   et le sien en haut à droite ; trois barres et le chiffre, vert (< 80 ms), orange (80 à 150), rouge (> 150) */
.px .phud-ping, .px .phc .png, .px .lpng { position: absolute; display: flex; align-items: center; gap: 3px; background: var(--ink); color: var(--pg, #9a8fae);
  font-family: var(--px-font); font-weight: normal; white-space: nowrap; pointer-events: none; text-shadow: none; }
.px .phc .png, .px .lpng { right: 10px; top: -20px; height: 10px; padding: 0 4px 0 3px; font-size: 9px; line-height: 10px; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.px .phud-ping { right: 8px; top: 6px; height: 18px; padding: 0 8px 0 7px; font-size: 15px; line-height: 18px; letter-spacing: .5px;
  box-shadow: 0 0 0 1.5px var(--pg, #9a8fae); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.px .phud-ping em { font-style: normal; font-size: 10px; color: var(--bone); opacity: .75; }
.px .phud-ping u { text-decoration: none; font-size: 10px; color: var(--bone); opacity: .75; }
.px .phud-ping small, .px .phc .png small, .px .lpng small { font-size: .7em; margin-left: 1px; opacity: .85; }
.px .phud-ping b, .px .phc .png b, .px .lpng b { font-weight: normal; }
.px .phud-ping .bars, .px .phc .png .bars, .px .lpng .bars { position: relative; display: flex; align-items: flex-end; gap: 1px; height: 7px; }
.px .phud-ping .bars { height: 11px; gap: 1.5px; }
.px .phud-ping .bars i, .px .phc .png .bars i, .px .lpng .bars i { position: static; display: block; width: 2px; background: currentColor; opacity: .25; }
.px .phud-ping .bars i { width: 3px; }
.px .phud-ping .bars i:nth-child(1), .px .png .bars i:nth-child(1) { height: 40%; } .px .phud-ping .bars i:nth-child(2), .px .png .bars i:nth-child(2) { height: 70%; } .px .phud-ping .bars i:nth-child(3), .px .png .bars i:nth-child(3) { height: 100%; }
.px .pq-good { --pg: #7dff3a; } .px .pq-mid { --pg: #ffb020; } .px .pq-bad { --pg: #ff4030; }
.px .pq-good .bars i, .px .pq-mid .bars i:nth-child(-n+2), .px .pq-bad .bars i:nth-child(1) { opacity: 1; }
.px .phud-ping.pq-bad { animation: pulse-s 1s ease-in-out infinite; }
/* le même ping dans les salons, avant le combat (src/ui/hud.js paintPingChip) : sur le bord haut de la carte du joueur */
.px .cs-card .lpng { right: 14px; top: -5px; z-index: 5; } /* (sous la ligne d'aide : top 279 à 291) */

/* the victory line over the slow motion of the last KO (fx.js 'game'): huge, tilted, inked, on a red slash */
.popups .banner.vic { width: calc(var(--k, 2) * 520px); white-space: normal; text-align: center; line-height: .95; font-size: calc(var(--k, 2) * 46px) !important; color: #fff3d6 !important;
  -webkit-text-stroke: calc(var(--k, 2) * 5px) #120a1a !important; paint-order: stroke fill; letter-spacing: calc(var(--k, 2) * 1.5px);
  text-shadow: calc(var(--k, 2) * 4px) calc(var(--k, 2) * 4px) 0 #e8202e, calc(var(--k, 2) * 6px) calc(var(--k, 2) * 6px) 0 #120a1a !important;
  animation: vic-in 2.3s cubic-bezier(.2, 1.8, .4, 1) both !important; }
.popups .banner.vic::before { content: ''; position: absolute; left: -12%; right: -12%; top: 18%; bottom: 18%; z-index: -1; background: repeating-linear-gradient(-50deg, #e8202e 0 calc(var(--k, 2) * 14px), #a80c1a 0 calc(var(--k, 2) * 28px));
  transform: skewY(-4deg); box-shadow: 0 calc(var(--k, 2) * -3px) 0 #120a1a, 0 calc(var(--k, 2) * 3px) 0 #120a1a; }
@keyframes vic-in { 0% { transform: translate(-50%, -50%) rotate(-14deg) scale(3.2); opacity: 0; } 8% { transform: translate(-50%, -50%) rotate(-3deg) scale(.92); opacity: 1; }
  14% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.04); } 85% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.6); opacity: 0; } }

/* ================= lists on a panel (options, pause, results' menu) ================= */
.px .plist { border: 0; border-radius: 0; background: #1b0f28; box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); padding: 3px 6px; }
.px .prow { font-size: 15px; letter-spacing: .8px; color: #e6d8f2; text-shadow: 1px 1px 0 var(--ink); }
.px .prow .pl { font-weight: normal; }
.px .prow.on { background: var(--cap); color: var(--ink); text-shadow: none; box-shadow: none; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.px .prow.on .pv { color: var(--blood); }
.px .prow .pv b { font-weight: normal; }
/* Options → Touches (src/ui/controls.js) */
.px.ctl .prow .pl { display: flex; justify-content: space-between; width: 100%; }
.px.ctl .ckey { font-style: normal; color: #ffd23b; }
.px.ctl .prow.on .ckey { color: var(--blood); }
.px.ctl .ckey .ck.rm { cursor: pointer; }
.px.ctl .ckey .ck.rm:hover { text-decoration: line-through; opacity: .6; }
.px.ctl .ckey .cadd { display: inline-block; min-width: 11px; padding: 0 2px; border: 1px solid currentColor; border-radius: 3px; line-height: 11px; text-align: center; cursor: pointer; opacity: .75; }
.px.ctl .ckey .cadd:hover { opacity: 1; background: rgba(255, 210, 59, .2); }
.px.ctl .ctl-note { position: absolute; left: 120px; top: 322px; width: 400px; text-align: center; font-size: 13px; line-height: 15px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.px.ctl .ctl-wait { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(10, 5, 18, .86); color: #fff; text-align: center; }
.px.ctl .ctl-wait small { font-size: 12px; letter-spacing: 1px; color: #e6d8f2; }
.px.ctl .ctl-wait b { font-family: var(--title); font-weight: normal; font-size: 40px; color: var(--cap); text-shadow: 2px 2px 0 var(--ink); }
.px.ctl .ctl-wait p { margin: 0; font-size: 18px; }
.px.ctl .ctl-wait em { font-style: normal; font-size: 12px; color: #b9a8c8; }
.px.ctl .ctl-wait i { display: block; width: 200px; height: 3px; margin-top: 8px; background: var(--cap); transform-origin: left; animation: ctl-time linear both; }
@keyframes ctl-time { to { transform: scaleX(0); } }

/* ================= results: the cover of a horror comic ================= */
.px .rs-cover { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 7px var(--bone), inset 0 0 0 9px var(--ink);
  background: linear-gradient(90deg, transparent 50%, rgba(10, 5, 18, .62) 56%), radial-gradient(ellipse at 25% 55%, transparent 40%, rgba(10, 5, 18, .5) 100%); animation: cover-in .3s ease-out both; }
@keyframes cover-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.px .rs-mast { position: absolute; left: 14px; top: 10px; animation: mast-in .45s cubic-bezier(.2, 1.7, .4, 1) .15s both; }
.px .rs-mast img { filter: drop-shadow(2px 2px 0 var(--ink)); }
.px .rs-mast span { display: inline-block; margin: -3px 0 0 8px; padding: 1px 6px; background: var(--cap); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 2px 2px 0 1.5px var(--ink); transform: rotate(-2deg);
  font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 8px; line-height: 10px; }
@keyframes mast-in { from { transform: translateY(-80px) rotate(-6deg); } to { transform: none; } }
.px .rs-head { position: absolute; left: 16px; bottom: 8px; max-width: 300px; padding: 3px 8px 4px; background: var(--cap); box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); transform: rotate(-1.5deg);
  animation: head-in .4s cubic-bezier(.2, 1.8, .4, 1) 1.5s both; }
.px .rs-head small { display: block; font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 8px; line-height: 9px; color: var(--blood); }
.px .rs-head b { display: block; font-weight: normal; font-size: 18px; line-height: 18px; letter-spacing: 1px; color: var(--ink); }
.px .rs-head b.long { font-size: 15px; line-height: 15.5px; } /* (the long headlines: three lines at most, the box grows upward) */
@keyframes head-in { 0% { transform: rotate(-12deg) scale(.2); opacity: 0; } 100% { transform: rotate(-1.5deg); opacity: 1; } }
.px .rs-title { left: 352px; right: 12px; top: 12px; }
.px .rs-title b { font-weight: normal; font-size: 44px; line-height: 46px; color: var(--cap); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--blood), 6px 6px 0 var(--ink);
  animation: letter2 .38s cubic-bezier(.2, 1.9, .4, 1) both; animation-delay: calc(var(--i) * 55ms + 350ms); }
@keyframes letter2 { 0% { transform: translateY(-90px) rotate(-30deg) scale(2); opacity: 0; } 100% { transform: none; opacity: 1; } }
.px .rs-win { left: 352px; right: 12px; top: 56px; animation: win-in .4s cubic-bezier(.2, 1.9, .4, 1) .95s both; }
.px .rs-win span { display: block; font-size: 34px; line-height: 36px; letter-spacing: 1.5px; color: var(--cc) !important; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg); }
.px .rs-win span em { display: inline-block; font-style: normal; transform-origin: 50% 50% !important; }
.px .rs-win small { display: inline-block; margin-top: 1px; padding: 0 6px; background: var(--ink); color: var(--bone); font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 8.5px; line-height: 12px; letter-spacing: .6px; }
@keyframes win-in { 0% { transform: scale(3) rotate(10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.px .rs-rows { left: 358px; right: 12px; top: 118px; }
.px .rs-row { height: 29px; margin-bottom: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: row-in2 .4s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 120ms + 1.2s); }
@keyframes row-in2 { from { transform: translateX(300px) rotate(8deg); } to { transform: none; } }
.px .rs-row .rb { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .rs-row .rb::before { content: ''; position: absolute; inset: 2px; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); background: linear-gradient(105deg, var(--pc) 0 15%, color-mix(in srgb, var(--pc) 35%, var(--ink)) 15.5% 17%, #1b0f28 17.5%); }
.px .rs-row.p1 .rb::before { background: linear-gradient(105deg, var(--cap) 0 15%, #b8860b 15.5% 17%, #3a2350 17.5%); }
.px .rs-row.p1 { transform-origin: 0 50%; filter: drop-shadow(0 0 5px rgba(255, 216, 74, .5)); }
.px .rs-row .pl { left: 6px; top: 2px; font-weight: normal; font-size: 22px; line-height: 26px; color: var(--bone) !important; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.px .rs-row .pl sup { font-size: 10px; vertical-align: 9px; }
.px .rs-row.p1 .pl { color: var(--cap) !important; }
.px .rs-row .rp { left: 38px; top: -11px; width: 40px; height: 43px; border: 0; border-radius: 0; background: none; overflow: visible; clip-path: inset(-20px -6px 2px -6px); }
.px .rs-row .rp img { position: absolute; left: 0; bottom: 0; width: 42px; height: 42px; margin: 0; filter: drop-shadow(1.2px 0 0 var(--ink)) drop-shadow(-1.2px 0 0 var(--ink)) drop-shadow(0 -1.2px 0 var(--ink)); }
.px .rs-row .rn { left: 82px; top: 2px; font-size: 13px; line-height: 14px; letter-spacing: .6px; }
.px .rs-row .rn em { display: inline-block; font-style: normal; }
.px .rs-row .rn small { margin-left: 4px; font-family: var(--px-small); font-weight: 700; font-size: 7.5px; color: #cdbde0; }
.px .rs-row .rst { top: 15px; font-family: var(--px-small); font-weight: 700; font-size: 7px; line-height: 12px; color: #cdbde0; text-transform: uppercase; }
.px .rs-row .rst b { font-weight: normal; font-family: var(--px-font); font-size: 11px; color: var(--cap); }
.px .rs-row .rst:nth-of-type(2) { left: 82px; } .px .rs-row .rst:nth-of-type(3) { left: 140px; } .px .rs-row .rst:nth-of-type(4) { left: 188px; }
.px .rs-blood { left: 358px; right: 12px; top: 252px; font-family: var(--px-font); font-size: 12px; letter-spacing: 1px; color: var(--bone); text-shadow: 1px 1px 0 var(--ink); animation: head-in .4s cubic-bezier(.2, 1.8, .4, 1) 1.75s both; }
.px .rs-blood b { font-weight: normal; font-size: 15px; color: var(--blood); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.px .rs-menu { animation: menu-in .4s cubic-bezier(.2, 1.6, .4, 1) 2s both; }
@keyframes menu-in { from { transform: translateY(120px); } to { transform: none; } }

/* main menu: the painted stone slabs keep their art, the lettering is inked */
.px .pbtn .lab { font-size: 18px; letter-spacing: 1.2px; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.px .pbtn.on .lab { color: var(--cap); }
.px .pbtn .hint { font-weight: 700; font-size: 7.5px; }
.px .ptitle { color: var(--bone); letter-spacing: 2px; text-shadow: 3px 3px 0 var(--blood), 5px 5px 0 var(--ink); -webkit-text-stroke: 4px var(--ink); }
/* the rules being set: the arenas step back, the picked one keeps its yellow frame */
.px .ss-grid2.away .ss-tile.on .ti { transform: rotate(0deg) scale(1.06); filter: brightness(.8); }
.px .ss-rule { cursor: pointer; }
.px .ss-rule.bump span b { display: inline-block; animation: cd-pop .25s cubic-bezier(.2, 2, .4, 1); }

/* the zoom of a duel's big blow (fx.js 'zoom'): manga speed lines rushing out of the impact, a dark rim on the KO one */
.popups .zoomlines { position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-conic-gradient(from 0deg at var(--cx) var(--cy), rgba(255, 243, 214, 0) 0deg 3deg, rgba(255, 243, 214, .55) 3deg 3.7deg, rgba(255, 243, 214, 0) 3.7deg 7deg, rgba(255, 243, 214, .3) 7deg 7.4deg, rgba(255, 243, 214, 0) 7.4deg 11deg);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent 22%, #000 62%); mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent 22%, #000 62%);
  animation: zl-in var(--life, .9s) ease-out both; }
.popups .zoomlines.big { background: repeating-conic-gradient(from 0deg at var(--cx) var(--cy), rgba(18, 10, 26, 0) 0deg 2.5deg, rgba(18, 10, 26, .75) 2.5deg 3.4deg, rgba(18, 10, 26, 0) 3.4deg 6deg, rgba(255, 243, 214, .5) 6deg 6.5deg, rgba(18, 10, 26, 0) 6.5deg 9deg),
  radial-gradient(circle at var(--cx) var(--cy), transparent 30%, rgba(18, 10, 26, .55) 85%); }
@keyframes zl-in { 0% { opacity: 0; transform: scale(1.4); } 10% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1.03) rotate(.4deg); } 100% { opacity: 0; transform: scale(1.1); } }

/* the stone buttons of the other menus: once in, their entrance never plays again (src/ui/screens.js PixelMenu) */
.px .pbtn.in { animation: none; }
.px .pbtn.in.pop { animation: pop .22s ease-in-out; }
.px .pbtn.in.press { animation: press-btn .18s ease-in-out; }

/* ================= the main menu: a comic page (src/ui/comicMenu.js) ================= */
.px .cm { position: absolute; inset: 0; }
.px .cm-col { position: absolute; height: 12px; text-align: center; font-family: var(--px-small); font-weight: 800; font-size: 8.5px; line-height: 12px; letter-spacing: 3px; color: var(--cap); background: var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 5, 18, .6); transform: rotate(-1deg); animation: cap-in .35s cubic-bezier(.2, 1.8, .4, 1) both; animation-delay: calc(var(--k) * 90ms + 150ms); }
/* the frame: only the entrance (dropped in, one after the other) */
.px .cb { position: absolute; cursor: pointer; animation: cb-in .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * 45ms + 200ms); }
@keyframes cb-in { from { transform: translateY(-36px) rotate(-10deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* the inside: the choice */
.px .cb .ci { position: absolute; inset: 0; transition: transform .16s cubic-bezier(.2, 1.9, .4, 1), filter .16s; filter: drop-shadow(3px 3px 0 rgba(10, 5, 18, .8)); }
.px .cb .cf { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.px .cb .cf::after { content: ''; position: absolute; inset: 2px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transition: background .12s;
  background: radial-gradient(circle, rgba(255, 243, 214, .07) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px, linear-gradient(180deg, #2f1a46, #1b0f28); }
.px .cb .ic { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; font-size: 15px; font-weight: normal;
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); transition: transform .16s cubic-bezier(.2, 2, .4, 1); }
.px .cb .lab { position: absolute; left: 34px; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 15px; letter-spacing: 1px; color: var(--bone); white-space: nowrap;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.px .cb .sh { position: absolute; inset: 2px; overflow: hidden; pointer-events: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.px .cb .sh::after { content: ''; position: absolute; top: -10px; bottom: -10px; left: -30px; width: 14px; background: rgba(255, 255, 255, .6); transform: skewX(-20deg); }
.px .cb:not(.on) .ci { filter: drop-shadow(3px 3px 0 rgba(10, 5, 18, .8)) brightness(.86); }
/* chosen: it jumps out, caption yellow, the icon bounces, a shine runs over it */
.px .cb.on { z-index: 3; }
.px .cb.on .ci { transform: translateX(6px) scale(1.12) rotate(-2deg); filter: drop-shadow(0 0 7px rgba(255, 216, 74, .7)) drop-shadow(4px 4px 0 var(--ink)); }
.px .cb.on .cf::after { background: radial-gradient(circle, rgba(18, 10, 26, .12) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px, linear-gradient(180deg, #ffe680, var(--cap)); }
.px .cb.on .lab { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.px .cb.on .ic { transform: scale(1.3) rotate(-10deg); }
.px .cb.on .ci.pop .ic { animation: ic-bounce .45s cubic-bezier(.2, 2, .4, 1); }
.px .cb.on .ci.pop .sh::after { animation: cm-shine .45s ease-out both; }
@keyframes ic-bounce { 0% { transform: scale(.6) rotate(20deg); } 60% { transform: scale(1.5) rotate(-14deg); } 100% { transform: scale(1.3) rotate(-10deg); } }
@keyframes cm-shine { from { left: -30px; } to { left: 180px; } }
.px .cb.hit .ci { animation: cb-hit .24s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes cb-hit { 0% { transform: translateX(6px) scale(1.3) rotate(-4deg); filter: brightness(2.5); } 100% { transform: translateX(6px) scale(1.12) rotate(-2deg); } }
.px .cm-hand { position: absolute; z-index: 4; pointer-events: none; transition: left .16s cubic-bezier(.2, 1.6, .4, 1), top .16s cubic-bezier(.2, 1.6, .4, 1); animation: hand .5s ease-in-out infinite alternate;
  filter: drop-shadow(2px 2px 0 rgba(10, 5, 18, .7)); }
/* the explanation of the chosen entry */
.px .cm-cap { position: absolute; z-index: 2; padding: 4px 10px 5px; box-sizing: border-box; background: var(--cap); box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); transform: rotate(-.8deg); text-align: center;
  animation: cap-in .35s cubic-bezier(.2, 1.8, .4, 1) .55s both; }
.px .cm-cap b { display: block; font-weight: normal; font-size: 16px; line-height: 17px; letter-spacing: 1px; color: var(--blood); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.px .cm-cap span { display: block; font-family: var(--px-small); font-weight: 800; font-size: 10px; line-height: 12px; color: var(--ink); }
.px .cm-cap.in b, .px .cm-cap.in span { animation: cap-txt .22s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes cap-txt { from { transform: translateY(6px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.px .cm-hand.flip { transform: scaleX(-1); animation-name: hand-r; }
@keyframes hand-r { from { translate: 0 0; } to { translate: 4px 0; } }
/* the two big cards of the main menu (4 nov. 2026, la sortie : CLASSÉES et HISTOIRE en avant ; src/ui/comicMenu.js hero) */
.px .cm-hero .cf { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); background: var(--ink); }
.px .cm-hero .cf::after { inset: 3px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .cm-hero .hbg, .px .cm-hero .hrays, .px .cm-hero .hglow { position: absolute; inset: 3px; pointer-events: none; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .cm-hero .sh { inset: 3px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .cm-hero .sh::after { width: 22px; animation: hero-shine 3.2s ease-in-out infinite; }
.px .cm-hero.cm-st .sh::after { animation-delay: 1.6s; }
@keyframes hero-shine { 0%, 62% { left: -40px; } 100% { left: 220px; } }
.px .cm-hero .lab { left: 62px; right: 6px; top: 9px; bottom: auto; display: block; font-size: 25px; line-height: 26px; letter-spacing: 1.5px; color: var(--cap);
  -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.px .cm-hero .sub { position: absolute; left: 63px; top: 36px; font-family: var(--px-small); font-weight: 800; font-size: 8.5px; letter-spacing: 1.5px; color: var(--bone); text-shadow: 1px 1px 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); white-space: nowrap; }
.px .cm-hero .htag { position: absolute; right: -4px; top: -7px; z-index: 2; padding: 1px 5px; font-style: normal; font-family: var(--px-small); font-weight: 800; font-size: 7.5px; letter-spacing: 1px; color: var(--bone);
  background: var(--blood); box-shadow: 0 0 0 1.5px var(--ink), 2px 2px 0 1.5px var(--ink); transform: rotate(6deg); animation: tag-bob 1.3s ease-in-out infinite alternate; }
@keyframes tag-bob { from { transform: rotate(6deg) scale(1); } to { transform: rotate(3deg) scale(1.1); } }
.px .cm-hero .ic { left: 12px; font-size: 30px; }
.px .cm-hero .hem { position: absolute; left: 4px; top: 50%; width: 58px; height: 58px; margin-top: -29px; filter: drop-shadow(2px 2px 0 var(--ink)) drop-shadow(0 0 6px rgba(255, 190, 60, .6)); animation: hem-bob 1.8s ease-in-out infinite alternate;
  transition: transform .16s cubic-bezier(.2, 2, .4, 1); }
@keyframes hem-bob { from { translate: 0 -2px; rotate: -4deg; } to { translate: 0 2px; rotate: 4deg; } }
/* CLASSÉES : du rouge sang et de l'or, des rayons qui tournent derrière l'emblème */
.px .cm-rk .cf::after { background: radial-gradient(circle, rgba(255, 216, 74, .1) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px, linear-gradient(160deg, #8e1020 0%, #4a0816 55%, #1b0610 100%); }
.px .cm-rk .hrays { overflow: hidden; }
.px .cm-rk .hrays::before { content: ''; position: absolute; left: -57px; top: 50%; width: 180px; height: 180px; margin-top: -90px; background: repeating-conic-gradient(rgba(255, 216, 74, .3) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 46%); mask-image: radial-gradient(circle, #000 0, transparent 46%); animation: spin-rays 10s linear infinite; }
@keyframes spin-rays { to { transform: rotate(360deg); } }
/* HISTOIRE : la pochette du village qui défile doucement, assombrie côté texte */
.px .cm-st .cf::after { background: #1b0f28; }
.px .cm-st .hbg { background-size: 125% auto; background-position: 50% 40%; animation: hero-pan 14s ease-in-out infinite alternate; }
.px .cm-st .hbg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 10, 26, .55) 0%, rgba(18, 10, 26, .2) 50%, transparent 100%); }
/* HISTOIRE en chantier (10 nov. 2026, STORY_CLOSED de src/ui/story.js) : la pochette éteinte, une bande jaune et noire, le sous-titre en jaune */
.px .cm-wip .hbg { filter: grayscale(.85) brightness(.55); }
.px .cm-wip .hrays { overflow: hidden; }
.px .cm-wip .hrays::before { content: ''; position: absolute; left: -20px; right: -20px; bottom: 0; height: 6px; background: repeating-linear-gradient(45deg, #ffd84a 0 7px, #120a1a 7px 14px); box-shadow: 0 0 0 1.5px var(--ink); animation: wip-tape 1.2s linear infinite; }
@keyframes wip-tape { from { background-position: 0 0; } to { background-position: 19.8px 0; } }
.px .cm-wip .sub { color: #ffd84a; }
.px .cm-wip .htag { background: #ffd84a; color: var(--ink); }
@keyframes hero-pan { from { background-position: 20% 30%; } to { background-position: 80% 60%; } }
/* DISCORD (8 nov. 2026, le créateur : le Discord du jeu bien en avant) : la petite carte en haut à droite, en bleu Discord, sa tête qui sautille */
.px .cm-dc .cf::after { background: radial-gradient(circle, rgba(255, 255, 255, .12) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px, linear-gradient(160deg, #6f7cff 0%, #4752c4 55%, #232a78 100%); }
.px .cb.cm-dc.on .cf::after { background: radial-gradient(circle, rgba(255, 255, 255, .16) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px, linear-gradient(160deg, #8a95ff 0%, #5865f2 55%, #2c3496 100%); }
.px .cm-dc .hrays { overflow: hidden; }
.px .cm-dc .hrays::before { content: ''; position: absolute; left: -46px; top: 50%; width: 130px; height: 130px; margin-top: -65px; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 46%); mask-image: radial-gradient(circle, #000 0, transparent 46%); animation: spin-rays 10s linear infinite; }
.px .cm-dc .lab { left: 46px; top: 6px; font-size: 21px; line-height: 22px; }
.px .cm-dc .sub { left: 47px; top: 29px; font-size: 7.5px; }
.px .cm-dc .htag { background: #5865f2; }
.px .cm-dc .hdc { position: absolute; left: 9px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 4px #b9c0ff, 2px 3px 0 4px var(--ink); animation: hem-bob 1.8s ease-in-out infinite alternate; transition: transform .16s cubic-bezier(.2, 2, .4, 1); }
.px .cm-dc .hdc i { position: absolute; top: 11px; width: 6px; height: 7px; border-radius: 50%; background: #5865f2; }
.px .cm-dc .hdc i:first-child { left: 8px; } .px .cm-dc .hdc i:last-child { right: 8px; }
.px .cb.cm-dc.on .hdc { transform: scale(1.15) rotate(-8deg); }
.px .cb.cm-dc.on .ci.pop .hdc { animation: hem-pop .45s cubic-bezier(.2, 2, .4, 1), hem-bob 1.8s ease-in-out .45s infinite alternate; }
.px .cm-hero .hface { position: absolute; left: 9px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #ffe680, #f09a2a);
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 4px var(--cap), 2px 3px 0 4px var(--ink); animation: hem-bob 1.8s ease-in-out infinite alternate; transition: transform .16s cubic-bezier(.2, 2, .4, 1); }
.px .cm-hero .hface img { width: 100%; height: 100%; object-fit: cover; }
.px .cb.cm-hero.on .hface { transform: scale(1.12) rotate(5deg); }
.px .cb.cm-hero.on .ci.pop .hface { animation: hem-pop .45s cubic-bezier(.2, 2, .4, 1), hem-bob 1.8s ease-in-out .45s infinite alternate; }
@keyframes st-spin { to { rotate: 360deg; } }
/* idle: they glow already, a little (the stars of the menu) */
.px .cb.cm-hero:not(.on) .ci { filter: drop-shadow(0 0 4px rgba(255, 216, 74, .25)) drop-shadow(3px 3px 0 rgba(10, 5, 18, .8)) brightness(.9); }
.px .cm-hero .hglow { box-shadow: inset 0 0 0 1.5px rgba(255, 216, 74, .35); animation: hero-breathe 2.4s ease-in-out infinite alternate; }
@keyframes hero-breathe { from { opacity: .3; } to { opacity: 1; } }
/* chosen: a big jump, a yellow frame, everything lights up */
.px .cb.cm-hero.on .ci { transform: translateY(-2px) scale(1.08) rotate(-1.5deg); filter: drop-shadow(0 0 10px rgba(255, 216, 74, .9)) drop-shadow(5px 5px 0 var(--ink)); }
.px .cb.cm-hero.on .cf { background: var(--cap); }
.px .cb.cm-rk.on .cf::after { background: radial-gradient(circle, rgba(255, 216, 74, .14) .9px, transparent 1.3px) 0 0 / 3.5px 3.5px, linear-gradient(160deg, #c3162a 0%, #6a0a1c 55%, #24070f 100%); }
.px .cb.cm-hero.on .lab { color: var(--bone); -webkit-text-stroke: 4px var(--ink); text-shadow: 3px 3px 0 var(--ink), 0 0 10px rgba(255, 216, 74, .8); }
.px .cb.cm-hero.on .hem { transform: scale(1.15) rotate(-6deg); }
.px .cb.cm-hero.on .hglow { box-shadow: inset 0 0 12px rgba(255, 216, 74, .55); }
.px .cb.cm-hero.on .ci.pop .ic { animation: ic-bounce .45s cubic-bezier(.2, 2, .4, 1); }
.px .cb.cm-hero.on .ci.pop .hem { animation: hem-pop .45s cubic-bezier(.2, 2, .4, 1), hem-bob 1.8s ease-in-out .45s infinite alternate; }
@keyframes hem-pop { 0% { scale: .5; } 60% { scale: 1.3; } 100% { scale: 1; } }
.px .cb.cm-hero.hit .ci { animation: hero-hit .24s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes hero-hit { 0% { transform: scale(1.22) rotate(-3deg); filter: brightness(2.2); } 100% { transform: translateY(-2px) scale(1.08) rotate(-1.5deg); } }
/* the others: smaller panels, a bit dimmer */
.px .cm-small .ic { left: 8px; font-size: 10px; }
.px .cm-small .lab { left: 26px; font-size: 11px; letter-spacing: .8px; -webkit-text-stroke: 2.5px var(--ink); text-shadow: 1.5px 1.5px 0 var(--ink); }
.px .cb.cm-small:not(.on) .ci { filter: drop-shadow(2px 2px 0 rgba(10, 5, 18, .8)) brightness(.8); }
.px .cb.cm-small.on .ci { transform: translateX(4px) scale(1.08) rotate(-1.5deg); }
.px .cm-also { height: 10px; font-size: 7.5px; line-height: 10px; letter-spacing: 4px; }

/* --- the gate: the very first screen, before the title (Screens.gate) --- */
.gate { position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .05) 0 4deg, transparent 4deg 11deg), radial-gradient(ellipse at 50% 50%, #22307e 0%, #121a4e 50%, #070a20 100%); } /* (the same as #boot, style.css) */
.gate .g-glow { position: absolute; left: 50%; top: 52%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 60, .32) 0%, rgba(255, 70, 120, .14) 40%, transparent 70%); animation: g-breathe 3.2s ease-in-out infinite; }
.gate .g-ember { position: absolute; bottom: -10px; border-radius: 50%; background: #ffcf6a; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .7);
  animation-name: g-rise; animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0; }
.gate.go { animation: g-out .56s ease-in forwards; }
@keyframes g-breathe { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes g-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate(30px, -105vh); opacity: 0; } }
@keyframes g-out { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.px.gate-px { pointer-events: none; }
.gate-px .g-row { position: absolute; left: 0; right: 0; top: 140px; display: flex; align-items: center; justify-content: center; gap: 12px; animation: g-in .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.gate-px .g-lead { font-size: 26px; color: var(--bone); letter-spacing: 2px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
/* (le bouton : le picto de la manette choisie, src/ui/glyphs.js ; la lueur autour) */
.gate-px .g-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: normal;
  box-shadow: 2px 3px 0 var(--ink), 0 0 18px 4px rgba(120, 255, 120, .35); animation: g-btn 1.2s ease-in-out infinite; }
.gate-px .g-btn .pg { margin: 0; vertical-align: 0; }
.gate-px .g-line { position: absolute; left: 0; right: 0; top: 190px; text-align: center; font-size: 19px; color: var(--cap); letter-spacing: 1px; white-space: nowrap; }
.gate-px .g-c { display: inline-block; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink);
  animation: g-letter .5s cubic-bezier(.2, 1.6, .4, 1) both, g-wave 2.4s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * 28ms), calc(1.2s + var(--i) * 70ms); }
.gate-px .g-sp { display: inline-block; width: 7px; }
.gate-px .g-sub { position: absolute; left: 0; right: 0; top: 222px; text-align: center; font-family: var(--px-small); font-size: 10px; color: rgba(255, 243, 214, .55); letter-spacing: 1px; animation: g-in .6s 1s both; }
.gate-px .g-ring { position: absolute; left: 50%; top: 159px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid #fff; opacity: 0; pointer-events: none; }
.gate-px .g-flash { position: absolute; inset: -400px; background: #fff; opacity: 0; pointer-events: none; }
@keyframes g-in { from { opacity: 0; transform: scale(.6); } }
@keyframes g-letter { from { opacity: 0; transform: translateY(14px) scale(.3); } }
@keyframes g-wave { 50% { transform: translateY(-3px); } }
@keyframes g-btn { 50% { transform: scale(1.1); box-shadow: 2px 3px 0 var(--ink), 0 0 26px 8px rgba(120, 255, 120, .5); } }
/* the press: the button sinks then pops, two shock rings, the words burst away, a flash */
.gate-px.go .g-btn { animation: g-press .5s ease-out forwards; }
.gate-px.go .g-lead, .gate-px.go .g-sub { animation: g-vanish .3s ease-in forwards; }
.gate-px.go .g-c { animation: g-burst .5s cubic-bezier(.3, 0, .8, .6) forwards; animation-delay: calc(var(--i) * 6ms); }
.gate-px.go .g-ring { animation: g-ring .55s ease-out forwards; }
.gate-px.go .g-ring2 { animation-delay: .1s; border-color: var(--cap); }
.gate-px.go .g-flash { animation: g-flash .56s ease-in forwards; }
@keyframes g-press { 0% { transform: scale(1); } 18% { transform: scale(.8); } 45% { transform: scale(1.7); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes g-vanish { to { opacity: 0; transform: scale(1.3); } }
@keyframes g-burst { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rz)) scale(.4); opacity: 0; } }
@keyframes g-ring { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(12); border-width: 1px; } }
@keyframes g-flash { 0%, 55% { opacity: 0; } 85% { opacity: .9; } 100% { opacity: 1; } }

/* --- the VS screen before every fight, its loading (src/ui/versus.js; redone 22 Oct 2026, "plus premium, juicy"):
   transforms and opacity only, so it keeps moving even while the page is busy preparing the match behind it --- */
.px.vs2-px { z-index: 60; overflow: visible; --vk: #0c0714; }
.vs2-px .vs2-bg { position: absolute; inset: -300px; background: var(--vk); }
/* a slanted column per fighter, lit by his colour */
.vs2-px .vs2-panel { position: absolute; top: -30px; bottom: -30px; overflow: hidden; transform: skewX(-10deg); will-change: transform;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 14%, var(--vk)) 0%, color-mix(in srgb, var(--pc) 42%, var(--vk)) 60%, color-mix(in srgb, var(--pc) 22%, var(--vk)) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55); animation: vs2-in-l .6s cubic-bezier(.16, 1, .3, 1) calc(.04s + var(--i) * 90ms) both; }
.vs2-px .vs2-panel.r { animation-name: vs2-in-r; }
.vs2-px .vs2-glow { position: absolute; inset: 0; background: radial-gradient(circle at var(--cx) 60%, color-mix(in srgb, var(--pc) 70%, #fff) 0, var(--pc) 18%, color-mix(in srgb, var(--pc) 40%, transparent) 38%, transparent 66%);
  opacity: .9; transform-origin: var(--cx) 60%; animation: vs2-breathe 2.4s ease-in-out .6s infinite; }
/* speed streaks rushing towards the middle (one period of the gradient per loop: seamless) */
.vs2-px .vs2-streaks { position: absolute; top: 0; bottom: 0; left: -128px; right: -128px; opacity: .9;
  background: repeating-linear-gradient(90deg, rgba(255, 243, 214, .09) 0 1px, transparent 1px 17px, rgba(255, 243, 214, .05) 17px 21px, transparent 21px 41px, rgba(255, 243, 214, .12) 41px 42px, transparent 42px 64px);
  animation: vs2-run .45s linear infinite; will-change: transform; }
.vs2-px .vs2-panel.r .vs2-streaks { animation-direction: reverse; }
/* the character's name in giant letters scrolling behind (two identical halves: seamless) */
.vs2-px .vs2-giant { position: absolute; left: 0; white-space: nowrap; font-family: 'Bangers', sans-serif; font-weight: normal; font-size: var(--gs); line-height: 1; letter-spacing: 2px; }
.vs2-px .vs2-giant span { display: inline-block; padding-right: .3em; }
.vs2-px .vs2-giant.a { top: 26px; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 243, 214, .2); animation: vs2-marq 16s linear infinite; }
.vs2-px .vs2-giant.b { top: calc(34px + var(--gs) * .95); color: rgba(255, 243, 214, .06); animation: vs2-marq 22s linear infinite reverse; }
.vs2-px .vs2-panel.r .vs2-giant.a { animation-direction: reverse; }
.vs2-px .vs2-panel.r .vs2-giant.b { animation-direction: normal; }
/* the portrait: counter-skewed, lands as a white silhouette then lights up, rim light, faded at the bottom, slow push-in */
.vs2-px .vs2-pw { position: absolute; left: var(--cx); bottom: 18px; width: var(--ps); height: var(--ps); margin-left: calc(var(--ps) / -2); transform: skewX(10deg); }
.vs2-px .vs2-pin, .vs2-px .vs2-pk { position: absolute; inset: 0; }
.vs2-px .vs2-pin { animation: vs2-pin-l .55s cubic-bezier(.16, 1, .3, 1) calc(.1s + var(--i) * 90ms) both; will-change: transform; }
.vs2-px .vs2-panel.r .vs2-pin { animation-name: vs2-pin-r; }
.vs2-px .vs2-pk { transform-origin: 50% 85%; animation: vs2-push 5s cubic-bezier(.2, .6, .3, 1) .6s both; }
.vs2-px .vs2-pk img { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 58%, transparent 90%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 58%, transparent 90%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; }
.vs2-px .vs2-pt { filter: drop-shadow(1.5px 0 0 color-mix(in srgb, var(--pc) 45%, #fff)) drop-shadow(-1.5px 0 0 color-mix(in srgb, var(--pc) 45%, #fff)) drop-shadow(0 -1.5px 0 color-mix(in srgb, var(--pc) 45%, #fff))
  drop-shadow(0 0 14px var(--pc)) drop-shadow(12px 8px 0 rgba(6, 3, 10, .45)); }
.vs2-px .vs2-pf { filter: brightness(0) invert(1) drop-shadow(0 0 10px #fff); animation: vs2-unflash .4s ease-out calc(.4s + var(--i) * 90ms) both; }
.vs2-px .vs2-panel.r .vs2-pk img { transform: scaleX(-1); }
.vs2-px .vs2-shade { position: absolute; left: -40px; right: -40px; bottom: 0; height: 42%; background: linear-gradient(0deg, rgba(8, 4, 14, .96) 16%, rgba(8, 4, 14, .6) 48%, transparent); }
/* a shine that sweeps the column once */
.vs2-px .vs2-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 120px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .22) 55%, transparent);
  transform: translateX(-160px); animation: vs2-sweep .9s cubic-bezier(.4, 0, .2, 1) calc(.75s + var(--i) * 120ms) both; }
/* glowing seams between the columns */
.vs2-px .vs2-seam { position: absolute; top: -30px; bottom: -30px; width: 0; transform: skewX(-10deg); }
.vs2-px .vs2-seam::before { content: ''; position: absolute; top: 0; bottom: 0; left: -2.5px; width: 5px; background: var(--vk); }
.vs2-px .vs2-seam::after { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff6d8; box-shadow: 0 0 6px #ffd84a, 0 0 16px #ff9a3c;
  transform: scaleY(0); animation: vs2-seam .35s cubic-bezier(.2, 1, .3, 1) .42s both, vs2-flick 1.8s steps(1) 1s infinite; }
.vs2-px .vs2-vig { position: absolute; inset: -300px; pointer-events: none; background: radial-gradient(ellipse 620px 360px at 50% 50%, transparent 55%, rgba(4, 2, 8, .55) 100%); }
/* embers rising */
.vs2-px .vs2-embers { position: absolute; inset: 0; overflow: visible; pointer-events: none; animation: vs2-fade .8s .3s both; }
.vs2-px .vs2-embers i { position: absolute; top: 380px; border-radius: 50%; opacity: 0; animation: vs2-ember linear infinite; will-change: transform; }
/* the sparkle when a fighter lights up: a pop of light, a lens flare across his eyes, stars twinkling on him (then now and then) */
.vs2-px .vs2-spark { position: absolute; width: 0; height: 0; pointer-events: none; }
.vs2-px .vs2-pop { position: absolute; left: calc(var(--ps) * -.5); top: calc(var(--ps) * -.62); width: var(--ps); height: var(--ps); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, color-mix(in srgb, var(--pc) 55%, #fff) 20%, color-mix(in srgb, var(--pc) 45%, transparent) 42%, transparent 68%);
  opacity: 0; transform: scale(.4); animation: vs2-popa .55s cubic-bezier(.2, .8, .3, 1) var(--land) both; }
.vs2-px .vs2-flare { position: absolute; left: calc(var(--ps) * -.95); width: calc(var(--ps) * 1.9); top: calc(var(--ps) * -.2); height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 50%, #fff) 28%, #fff 50%, color-mix(in srgb, var(--pc) 50%, #fff) 72%, transparent); box-shadow: 0 0 8px #fff, 0 0 18px var(--pc);
  opacity: 0; transform: scaleX(0); animation: vs2-flarea .6s cubic-bezier(.2, .8, .3, 1) calc(var(--land) + .03s) both; }
.vs2-px .vs2-spark i:not([class]) { position: absolute; margin: 0; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(50% 5% at 50% 50%, #fff 0, rgba(255, 255, 255, .7) 40%, transparent 100%), radial-gradient(5% 50% at 50% 50%, #fff 0, rgba(255, 255, 255, .7) 40%, transparent 100%),
    radial-gradient(circle, #fff 0, color-mix(in srgb, var(--pc) 60%, #fff) 7%, color-mix(in srgb, var(--pc) 35%, transparent) 18%, transparent 34%);
  animation-name: vs2-tw, vs2-tw2; animation-timing-function: ease-out, ease-in-out; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; }
.px.vs2-px.out .vs2-spark { animation: vs2-gone .25s ease-in forwards; }
@keyframes vs2-popa { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: .95; } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes vs2-flarea { 0% { opacity: 0; transform: scaleX(0); } 22% { opacity: 1; transform: scaleX(1) scaleY(1.5); } 100% { opacity: 0; transform: scaleX(1.25) scaleY(.3); } }
@keyframes vs2-tw { 0% { transform: translate(-50%, -50%) scale(0) rotate(0); } 35% { transform: translate(-50%, -50%) scale(1.15) rotate(45deg); } 100% { transform: translate(-50%, -50%) scale(0) rotate(120deg); } }
@keyframes vs2-tw2 { 0%, 80%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0); } 90% { transform: translate(-50%, -50%) scale(.85) rotate(45deg); } }
/* the player's plate: J1 / CPU chip, the character, the player's name, a bar of his colour */
.vs2-px .vs2-plate { position: absolute; bottom: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.vs2-px .vs2-plate.r { align-items: flex-end; }
.vs2-px .vs2-plate.c { align-items: center; }
.vs2-px .vs2-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; animation: vs2-meta-l .35s cubic-bezier(.2, 1, .3, 1) calc(.78s + var(--i) * 100ms) both; }
.vs2-px .vs2-plate.r .vs2-meta { flex-direction: row-reverse; animation-name: vs2-meta-r; }
.vs2-px .vs2-plate.c .vs2-meta { animation-name: vs2-up; }
.vs2-px .vs2-chip { padding: 0 5px; background: var(--pc); color: var(--vk); font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 10px; line-height: 13px; letter-spacing: 1px;
  transform: skewX(-10deg); box-shadow: 2px 2px 0 var(--vk); }
.vs2-px .vs2-chip.cpu { background: #3a3046; color: #d9cfe6; }
.vs2-px .vs2-char { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 12px; line-height: 14px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff3d6; text-shadow: 1px 1px 0 var(--vk), 0 0 8px rgba(0, 0, 0, .8); white-space: nowrap; }
.vs2-px .vs2-by { margin-left: 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .5px; color: #fff3d6; opacity: .8; white-space: nowrap; text-shadow: 1px 1px 0 var(--vk); }
.vs2-px .vs2-name { display: block; max-width: 100%; margin-top: 1px; font-family: 'Bangers', sans-serif; font-weight: normal; font-size: var(--ns); line-height: 1.02; letter-spacing: 1.5px; white-space: nowrap;
  color: #fff3d6; -webkit-text-stroke: 5px var(--vk); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--vk), 5px 5px 0 color-mix(in srgb, var(--pc) 60%, #000);
  animation: vs2-name-l .45s cubic-bezier(.16, 1, .3, 1) calc(.84s + var(--i) * 100ms) both; }
.vs2-px .vs2-plate.r .vs2-name { animation-name: vs2-name-r; }
.vs2-px .vs2-plate.c .vs2-name { animation-name: vs2-up; }
.vs2-px .vs2-name em { display: inline-block; font-style: normal; transform-origin: 0 50%; }
.vs2-px .vs2-plate.r .vs2-name em { transform-origin: 100% 50%; }
.vs2-px .vs2-plate.c .vs2-name em { transform-origin: 50% 50%; }
.vs2-px .vs2-line { display: block; width: 100%; max-width: 220px; height: 3px; margin-top: 3px; background: linear-gradient(90deg, var(--pc) 0, color-mix(in srgb, var(--pc) 50%, #fff) 30%, transparent);
  box-shadow: 0 0 8px var(--pc); transform-origin: 0 50%; animation: vs2-wipe .5s cubic-bezier(.16, 1, .3, 1) calc(.95s + var(--i) * 100ms) both; }
.vs2-px .vs2-plate.r .vs2-line { background: linear-gradient(270deg, var(--pc) 0, color-mix(in srgb, var(--pc) 50%, #fff) 30%, transparent); transform-origin: 100% 50%; }
.vs2-px .vs2-plate.c .vs2-line { background: linear-gradient(90deg, transparent, var(--pc), transparent); transform-origin: 50% 50%; }
/* the VS: gold chrome over a dark extruded back, two shockwave rings, glints */
.vs2-px .vs2-vs { position: absolute; left: 320px; top: 172px; width: 0; height: 0; animation: vs2-slam .55s linear .35s both; will-change: transform; }
.px.vs2-px.n3 .vs2-vs, .px.vs2-px.n4 .vs2-vs { top: 104px; scale: .72; }
.vs2-px .vs2-vsin { position: absolute; left: 0; top: 0; transform: rotate(-7deg); animation: vs2-float 1.6s ease-in-out 1s infinite; }
.vs2-px .vs2-vsin b { position: absolute; left: -100px; top: -62px; width: 200px; height: 124px; display: flex; align-items: center; justify-content: center;
  font-family: 'Bangers', sans-serif; font-weight: normal; font-size: 112px; line-height: 1; letter-spacing: -3px; padding-right: 3px; }
.vs2-px .vs2-vsb { color: var(--vk); -webkit-text-stroke: 12px var(--vk);
  text-shadow: 1px 1px 0 #7a2408, 2px 2px 0 #7a2408, 3px 3px 0 #6a1d06, 4px 4px 0 #5a1806, 5px 5px 0 #4a1405, 7px 7px 0 var(--vk), 8px 8px 0 var(--vk), 0 0 34px rgba(255, 150, 40, .55); }
.vs2-px .vs2-vsf { color: transparent; background: linear-gradient(180deg, #fffbea 0%, #ffeb8a 26%, #ffc928 48%, #ff8f0a 50%, #ffb43a 70%, #ff7a00 88%, #e85a00 100%);
  -webkit-background-clip: text; background-clip: text; }
.vs2-px .vs2-ring { position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%; border: 5px solid #ffd84a; box-shadow: 0 0 18px #ff9a3c, inset 0 0 12px #ff9a3c;
  opacity: 0; animation: vs2-ring .6s cubic-bezier(.1, .8, .3, 1) .5s both; }
.vs2-px .vs2-ring.b { border: 2px solid #fff6d8; box-shadow: 0 0 10px #fff; animation-delay: .6s; animation-duration: .7s; }
.vs2-px .vs2-glint { position: absolute; left: -82px; top: -48px; width: 22px; height: 22px; background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 4px #fff);
  transform: scale(0); animation: vs2-glint 2.2s ease-in-out 1.1s infinite; }
.vs2-px .vs2-glint.b { left: 52px; top: 18px; width: 16px; height: 16px; animation-delay: 2.1s; }
/* cinema bars: the arena (and the round) on top, the loading underneath */
.vs2-px .vs2-bar { position: absolute; left: -300px; right: -300px; height: 324px; background: #05030a; box-shadow: 0 0 18px rgba(0, 0, 0, .7); z-index: 2; }
.vs2-px .vs2-bar.t { top: -300px; border-bottom: 1px solid rgba(255, 216, 74, .35); animation: vs2-bar-t .4s cubic-bezier(.16, 1, .3, 1) both; }
.vs2-px .vs2-bar.b { bottom: -300px; border-top: 1px solid rgba(255, 216, 74, .35); animation: vs2-bar-b .4s cubic-bezier(.16, 1, .3, 1) both; }
.vs2-px .vs2-bar.t > div { position: absolute; left: 300px; right: 300px; bottom: 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.vs2-px .vs2-stage { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; animation: vs2-up .4s cubic-bezier(.16, 1, .3, 1) 1.05s both; }
.vs2-px .vs2-stage small { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 9px; letter-spacing: 3px; color: #ffd84a; }
.vs2-px .vs2-stage b { font-family: 'Bangers', sans-serif; font-weight: normal; font-size: 16px; letter-spacing: 1.5px; color: #fff3d6; }
.vs2-px .vs2-round { padding: 0 7px; background: #ffd84a; color: var(--vk); font-family: 'Bangers', sans-serif; font-size: 13px; line-height: 15px; letter-spacing: 1.5px; transform: skewX(-10deg);
  white-space: nowrap; animation: vs2-up .4s cubic-bezier(.16, 1, .3, 1) .95s both; }
.vs2-px .vs2-load { position: absolute; left: 50%; top: 7px; width: 160px; margin-left: -80px; text-align: center; animation: vs2-fade .3s 1.2s both; }
.vs2-px .vs2-load i { display: block; height: 2px; background: rgba(255, 243, 214, .14); overflow: hidden; position: relative; }
.vs2-px .vs2-load i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #ff9a3c, #ffd84a); box-shadow: 0 0 6px #ffd84a; transform-origin: 0 50%; animation: vs2-grow 3s linear both; }
.vs2-px .vs2-load span { display: block; margin-top: 3px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 243, 214, .55); }
.px.vs2-px.shake { animation: vs2-shake .4s ease-out; }
/* the exit: the columns fly apart, the bars open, the VS bursts, everything fades on a flash */
.px.vs2-px.out .vs2-panel { animation: vs2-out-l .5s cubic-bezier(.6, 0, .9, .4) forwards; }
.px.vs2-px.out .vs2-panel.r { animation-name: vs2-out-r; }
.px.vs2-px.out .vs2-plate { animation: vs2-plate-out .35s ease-in forwards; }
.px.vs2-px.out .vs2-vs { animation: vs2-boom .45s ease-in forwards; }
.px.vs2-px.out .vs2-bar.t { animation: vs2-bar-t-out .45s cubic-bezier(.6, 0, .9, .4) forwards; }
.px.vs2-px.out .vs2-bar.b { animation: vs2-bar-b-out .45s cubic-bezier(.6, 0, .9, .4) forwards; }
.px.vs2-px.out .vs2-bg, .px.vs2-px.out .vs2-seam, .px.vs2-px.out .vs2-vig, .px.vs2-px.out .vs2-embers { animation: vs2-gone .4s ease-in forwards; }
@keyframes vs2-in-l { from { transform: translateX(-720px) skewX(-10deg); } }
@keyframes vs2-in-r { from { transform: translateX(720px) skewX(-10deg); } }
@keyframes vs2-pin-l { from { transform: translateX(-140px) scale(1.12); opacity: 0; } 40% { opacity: 1; } }
@keyframes vs2-pin-r { from { transform: translateX(140px) scale(1.12); opacity: 0; } 40% { opacity: 1; } }
@keyframes vs2-unflash { from { opacity: 1; } to { opacity: 0; } }
@keyframes vs2-push { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes vs2-breathe { 50% { transform: scale(1.08); opacity: 1; } }
@keyframes vs2-run { from { transform: translateX(-64px); } to { transform: translateX(0); } }
@keyframes vs2-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vs2-sweep { from { transform: translateX(-160px); } to { transform: translateX(560px); } }
@keyframes vs2-seam { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vs2-flick { 0%, 100% { opacity: 1; } 43% { opacity: .55; } 46% { opacity: 1; } 71% { opacity: .75; } 73% { opacity: 1; } }
@keyframes vs2-ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 75% { opacity: .8; } 100% { transform: translate(var(--dx), -330px); opacity: 0; } }
@keyframes vs2-meta-l { from { transform: translateX(-30px); opacity: 0; } }
@keyframes vs2-meta-r { from { transform: translateX(30px); opacity: 0; } }
@keyframes vs2-name-l { from { transform: translateX(-60px) skewX(-14deg); opacity: 0; } }
@keyframes vs2-name-r { from { transform: translateX(60px) skewX(14deg); opacity: 0; } }
@keyframes vs2-up { from { transform: translateY(10px); opacity: 0; } }
@keyframes vs2-wipe { from { transform: scaleX(0); } }
@keyframes vs2-slam { 0% { opacity: 0; transform: scale(5) rotate(14deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 30% { opacity: 1; transform: scale(.82) rotate(-2deg); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  60% { transform: scale(1.08) rotate(1deg); animation-timing-function: ease-in-out; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes vs2-float { 0%, 100% { transform: rotate(-7deg) translateY(0) scale(1); } 50% { transform: rotate(-6deg) translateY(-3px) scale(1.035); } }
@keyframes vs2-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes vs2-glint { 0%, 70%, 100% { transform: scale(0) rotate(0); } 80% { transform: scale(1.1) rotate(45deg); } 90% { transform: scale(.2) rotate(90deg); } }
@keyframes vs2-bar-t { from { transform: translateY(-26px); } }
@keyframes vs2-bar-b { from { transform: translateY(26px); } }
@keyframes vs2-fade { from { opacity: 0; } }
@keyframes vs2-grow { from { transform: scaleX(0); } }
@keyframes vs2-shake { 0%, 100% { translate: 0 0; } 15% { translate: -7px 4px; } 30% { translate: 6px -4px; } 45% { translate: -4px 2px; } 60% { translate: 3px -2px; } 80% { translate: -1px 1px; } }
@keyframes vs2-out-l { to { transform: translateX(-800px) skewX(-10deg); } }
@keyframes vs2-out-r { to { transform: translateX(800px) skewX(-10deg); } }
@keyframes vs2-plate-out { to { transform: translateY(20px); opacity: 0; } }
@keyframes vs2-boom { to { transform: scale(3.5); opacity: 0; } }
@keyframes vs2-bar-t-out { to { transform: translateY(-30px); } }
@keyframes vs2-bar-b-out { to { transform: translateY(30px); } }
@keyframes vs2-gone { to { opacity: 0; } }

/* ---------- l'écran titre en 3D (src/ui/titleBrawl.js) : le voile des menus ---------- */
.tb-veil { position: fixed; inset: 0; background: #05030a; opacity: 0; pointer-events: none; transition: opacity .35s; }

/* ---------- la musique qui démarre : « ♪ Artiste — Titre » (src/ui/nowPlaying.js) ---------- */
.np { position: fixed; left: calc(var(--ox, 0px) + 10px * var(--k, 2)); top: calc(var(--oy, 0px) + 10px * var(--k, 2)); z-index: 55;
  display: flex; align-items: center; gap: calc(5px * var(--k, 2)); max-width: calc(250px * var(--k, 2));
  padding: calc(3px * var(--k, 2)) calc(9px * var(--k, 2)) calc(3px * var(--k, 2)) calc(6px * var(--k, 2));
  background: var(--cap); color: var(--ink); pointer-events: none;
  box-shadow: 0 0 0 calc(1.5px * var(--k, 2)) var(--ink), calc(3px * var(--k, 2)) calc(3px * var(--k, 2)) 0 calc(1.5px * var(--k, 2)) var(--ink);
  opacity: 0; transform: translateX(calc(-100% - 30px * var(--k, 2))) rotate(-2deg);
  transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .3s; }
.np.on { opacity: 1; transform: translateX(0) rotate(-2deg); }
body:has(.trn-box) .np { top: calc(var(--oy, 0px) + 128px * var(--k, 2)); } /* (the training room: under its panel) */
body:has(.acct) .np { top: calc(var(--oy, 0px) + 48px * var(--k, 2)); } /* (the main menu: under the account badge) */
.np i { font-style: normal; font-family: var(--px-font); font-size: calc(15px * var(--k, 2)); line-height: 1; color: var(--blood); }
.np span { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.np b, .np em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np b { font-family: var(--px-font); font-weight: normal; font-size: calc(10px * var(--k, 2)); letter-spacing: .6px; text-transform: uppercase; }
.np em { font-family: var(--px-small); font-style: normal; font-weight: 700; font-size: calc(8.5px * var(--k, 2)); }
/* the question about the IP when the relay is missing (src/ui/askDirect.js): above everything, ANNULER by default */
.askd { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 30, .72); }
.askd-box { width: min(92vw, 520px); padding: 18px 22px; background: var(--cap, #ffd84a); color: var(--ink, #111); transform: rotate(-1deg);
  box-shadow: 0 0 0 3px var(--ink, #111), 7px 7px 0 3px var(--ink, #111); font-family: 'Barlow Condensed', sans-serif; font-size: 19px; line-height: 1.3; }
.askd-box b { display: block; font-family: 'Bangers', sans-serif; font-weight: normal; font-size: 30px; letter-spacing: 1px; margin-bottom: 6px; }
.askd-box p { margin: 6px 0; }
.askd-btns { display: flex; gap: 12px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.askd-btns button { font-family: 'Bangers', sans-serif; font-size: 22px; letter-spacing: 1px; padding: 6px 16px; cursor: pointer;
  background: #fff; color: var(--ink, #111); border: 3px solid var(--ink, #111); box-shadow: 3px 3px 0 var(--ink, #111); }
.askd-btns button.on { background: var(--ink, #111); color: var(--cap, #ffd84a); transform: translate(-1px, -1px); }
/* une nouvelle version en ligne (src/net/update.js) : la carte au milieu dans les menus, la bande en haut pendant une partie */
.upd-band { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 6px; background: #ffd23a; color: #120a1a; border-bottom: 3px solid #120a1a;
  font: 600 15px 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.upd-band b { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .05em; color: #e8202e; }
.upd-band button, .upd-card button { font-family: 'Bangers', sans-serif; font-size: 18px; letter-spacing: .06em; cursor: pointer;
  background: #e8202e; color: #fff3d6; border: 3px solid #120a1a; border-radius: 6px; padding: 4px 14px; box-shadow: 3px 3px 0 #120a1a; }
.upd-card { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(10, 6, 20, .72); padding: 16px; }
.upd-in { max-width: 520px; background: #fff3d6; color: #120a1a; border: 4px solid #120a1a; box-shadow: 8px 8px 0 #120a1a;
  padding: 18px 22px 20px; transform: rotate(-1.2deg); text-align: center; font: 600 19px 'Barlow Condensed', sans-serif; animation: updIn .45s cubic-bezier(.2, 1.6, .4, 1); }
.upd-pow { display: inline-block; font-family: 'Bangers', sans-serif; font-size: 44px; letter-spacing: .05em; color: #fff3d6; background: #e8202e;
  border: 3px solid #120a1a; padding: 0 16px; transform: rotate(2deg); margin-bottom: 10px; text-shadow: 3px 3px 0 #120a1a; }
.upd-in p { margin: 6px 0; } .upd-sub { font-size: 16px; opacity: .8; }
.upd-save { font-style: normal; font-weight: 700; color: #b0101e; }
.upd-in .upd-save { display: inline-block; margin-top: 8px; padding: 2px 10px; font-size: 17px; background: #ffd23a; border: 2px solid #120a1a; transform: rotate(.8deg); }
.upd-in button { margin-top: 12px; font-size: 24px; padding: 6px 22px; }
@keyframes updIn { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .upd-in { animation: none; } }

/* fights in teams (7 Nov 2026): the mode under the title, each card's team */
.px .cs-teams { position: absolute; left: 232px; top: 4px; z-index: 6; padding: 1px 8px 2px; background: #1d1030; transform: rotate(-1.5deg); pointer-events: auto;
  box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); white-space: nowrap; }
.px .cs-teams.can { cursor: pointer; }
.px .cs-teams b { display: block; font-family: var(--title); font-weight: normal; font-size: 13px; line-height: 14px; letter-spacing: 1px; color: var(--bone); }
.px .cs-teams small { display: block; font-family: var(--px-small); font-weight: 800; font-size: 7.5px; line-height: 9px; color: #cdbfe0; }
.px .cs-teams.on { background: linear-gradient(90deg, #ff3b3b 0 50%, #3b8bff 50% 100%); }
.px .cs-teams.on b, .px .cs-teams.on small { color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.px .cs-teams.warn small { color: var(--cap); }
.px .cs-card .cs-teamb { position: absolute; right: 4px; top: -10px; z-index: 3; padding: 0 5px; background: var(--tc); color: #fff; cursor: pointer; pointer-events: auto;
  font-family: var(--title); font-weight: normal; font-size: 10px; line-height: 13px; letter-spacing: .5px; text-shadow: 1px 1px 0 var(--ink); box-shadow: 0 0 0 1.5px var(--ink); transform: rotate(2deg); }

/* --- the browser tip on the loading and entry screens (src/ui/browserTip.js) --- */
.btip { position: fixed; left: 16px; bottom: 14px; z-index: 70; pointer-events: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .5px; color: rgba(255, 243, 214, .62); text-shadow: 0 1px 2px #000; white-space: nowrap; transition: opacity .35s; animation: btip-in .6s .4s both; }
.btip.warn { bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 20px 10px; border: 3px solid #12101a; border-radius: 6px; background: #ffd84a; color: #12101a; text-shadow: none; box-shadow: 4px 4px 0 #12101a; font-size: 16px; white-space: normal; text-align: left; max-width: min(330px, calc(100vw - 32px)); }
.btip.warn b { font-family: Bangers, sans-serif; font-weight: normal; font-size: 22px; letter-spacing: 1.5px; color: #c4121f; }
.btip.warn i { font-style: normal; font-weight: 700; }
.btip.out { opacity: 0; }
@keyframes btip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }