/* ---------- the tournament (src/ui/tournament.js), art direction "BD d'horreur" (css/comic.css) ----------
   The menu, the setup, the bracket (plates, ink connectors, the roulette, the shames), the VS screen, the champion. */

.px .tm-sub { position: absolute; left: 0; right: 0; top: 56px; text-align: center; font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 10px; color: var(--cap); text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink); }
.px .tt-title { position: absolute; left: 12px; top: 2px; font-size: 32px; line-height: 36px; letter-spacing: 1.5px; color: var(--bone); white-space: nowrap;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; 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; }
.px .tt-title b { font-weight: normal; color: var(--cap); }

/* --- setup --- */
.px .ts-where { position: absolute; right: 12px; top: 10px; padding: 1px 7px; background: var(--cap); color: var(--ink); 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: 12px; }
.px .ts-where b { font-family: var(--px-font); font-style: normal; font-size: 13px; color: var(--blood); letter-spacing: 2px; }
.px .ts-grid { position: absolute; left: 12px; top: 52px; width: 372px; height: 220px; }
.px .ts-cell { position: absolute; width: 180px; height: 23px; cursor: pointer; animation: cell-in .35s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * 25ms); }
@keyframes cell-in { from { transform: translateX(-40px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.px .ts-cell::before { content: ''; position: absolute; inset: 0; background: var(--ink); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.px .ts-cell::after { content: ''; position: absolute; inset: 2px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); background: linear-gradient(105deg, var(--pc) 0 17%, #1d1030 17.5%); }
.px .ts-cell .n { position: absolute; left: 7px; top: 1px; z-index: 1; width: 20px; text-align: center; font-weight: normal; font-size: 17px; line-height: 21px; color: var(--ink); }
.px .ts-cell .nm { position: absolute; left: 34px; right: 10px; top: 1px; z-index: 1; font-size: 15px; line-height: 21px; color: var(--bone); white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 var(--ink); }
.px .ts-cell .nm em { display: inline-block; font-style: normal; }
.px .ts-cell small { position: absolute; right: 9px; top: 7px; z-index: 1; font-family: var(--px-small); font-weight: 800; font-size: 6.5px; color: #a99cba; }
.px .ts-cell.far { filter: saturate(.75); }
.px .ts-cell.add { --pc: var(--slime); } .px .ts-cell.add.on .n { color: var(--ink); } /* (selected, its stripe needs a color: without one the whole background was dropped, the text invisible) */
.px .ts-cell.add::after { background: repeating-linear-gradient(-45deg, rgba(157, 255, 58, .14) 0 5px, transparent 5px 10px), #170d22; }
.px .ts-cell.add .n, .px .ts-cell.add .nm { color: var(--slime); }
.px .ts-cell.on { z-index: 3; transform: translateY(-2px) scale(1.05) rotate(-1deg); filter: drop-shadow(0 0 5px var(--cap)) drop-shadow(2px 2px 0 var(--ink)); }
.px .ts-cell.on::after { background: linear-gradient(105deg, var(--pc) 0 17%, var(--cap) 17.5%); }
.px .ts-cell.on .nm { color: var(--ink); text-shadow: none; }
.px .ts-input { position: absolute; z-index: 10; width: 138px; height: 18px; padding: 0 4px; border: 0; outline: 0; background: var(--bone); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink);
  font-family: var(--px-font); font-size: 14px; letter-spacing: .6px; }
.px .ts-rules { position: absolute; left: 398px; top: 52px; width: 230px; }
.px .ts-rule { position: relative; height: 26px; margin-bottom: 5px; background: #1d1030; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); cursor: pointer; transition: transform .14s cubic-bezier(.2, 1.8, .4, 1); }
.px .ts-rule small { position: absolute; left: 0; top: 0; bottom: 0; width: 94px; padding-left: 6px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-weight: 800; font-size: 8px; line-height: 26px; letter-spacing: .8px; }
.px .ts-rule b { position: absolute; left: 100px; right: 6px; top: 0; font-weight: normal; font-size: 15px; line-height: 26px; color: var(--bone); text-align: center; white-space: nowrap; overflow: hidden; text-shadow: 2px 2px 0 var(--ink); }
.px .ts-rule.on { transform: translateX(-4px) rotate(-1deg); box-shadow: 0 0 0 2px var(--slime), 4px 4px 0 2px var(--ink), 0 0 10px rgba(157, 255, 58, .4); }
.px .ts-rule.on b { color: var(--slime); }
.px .ts-rule.ro { opacity: .8; }
.px .ts-go { position: relative; margin-top: 12px; height: 34px; background: repeating-linear-gradient(-50deg, var(--blood) 0 12px, #a80c1a 12px 24px); box-shadow: 0 0 0 2.5px var(--ink), 4px 4px 0 2.5px var(--ink);
  text-align: center; font-size: 20px; line-height: 34px; letter-spacing: 1.5px; color: var(--bone); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; cursor: pointer; transform: rotate(-1.5deg); }
.px .ts-go.on { animation: pulse-s .7s ease-in-out infinite; box-shadow: 0 0 0 2.5px var(--cap), 4px 4px 0 2.5px var(--ink), 0 0 14px rgba(255, 216, 74, .6); }
.px .ts-go.off { filter: grayscale(1) brightness(.6); animation: none; }
.px .ts-help { position: absolute; left: 0; right: 0; top: 340px; text-align: center; font-family: var(--px-small); font-weight: 700; font-size: 8.5px; color: #e6d8f2; text-transform: uppercase; text-shadow: 1px 1px 0 var(--ink); }
.px .ts-help b { font-family: var(--px-font); font-weight: normal; font-size: 11px; }

/* --- bracket --- */
.px .tb-count { position: absolute; right: 12px; top: 12px; padding: 1px 7px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-weight: 800; font-size: 8.5px; line-height: 12px; letter-spacing: 1px; transform: rotate(1.5deg); }
.px .tb-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.px .tb-lines path { fill: none; stroke-linejoin: round; }
.px .tb-lines path.ink { stroke: var(--ink); stroke-width: 3.6; }
.px .tb-lines path.bone { stroke: rgba(255, 243, 214, .35); stroke-width: 1.2; }
.px .tb-lines path.bone.won { stroke: var(--pc); stroke-width: 1.8; filter: drop-shadow(0 0 2px var(--pc)); }
.px .tb-tree { position: absolute; inset: 0; }
.px .tb-round { position: absolute; top: 40px; text-align: center; font-family: var(--px-small); font-weight: 800; font-size: 7.5px; line-height: 10px; color: var(--cap); letter-spacing: 1px; text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink); white-space: nowrap; }
.px .tb-round.fin { font-family: var(--px-font); font-weight: normal; font-size: 16px; line-height: 18px; color: var(--cap); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--blood); }
.px .tb-round.third { font-size: 8px; color: #e8a050; }
.px .tp { position: absolute; box-sizing: border-box; transition: filter .2s; }
.px .tp::before { content: ''; position: absolute; inset: 0; background: var(--ink); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.px .tp::after { content: ''; position: absolute; inset: 1.5px; clip-path: polygon(3.5px 0, 100% 0, calc(100% - 3.5px) 100%, 0 100%); background: linear-gradient(105deg, var(--pc) 0 9px, #22143a 9.5px); }
.px .tp img { position: absolute; left: 7px; bottom: 1.5px; z-index: 1; width: calc(var(--fs) * 1.6); height: calc(var(--fs) * 1.6); filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }
.px .tp .q { position: absolute; left: 11px; top: 0; z-index: 1; font-style: normal; font-family: var(--px-font); font-size: var(--fs); color: var(--ink); line-height: calc(var(--fs) * 1.4); }
.px .tp .nm { position: absolute; left: calc(var(--fs) * 1.6 + 9px); right: 5px; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; font-size: var(--fs); color: var(--bone); white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 var(--ink); }
.px .tp .nm em { display: inline-block; font-style: normal; }
.px .tp.empty::after, .px .tp.bye::after { background: repeating-linear-gradient(-45deg, rgba(255, 243, 214, .05) 0 4px, transparent 4px 8px), #160c22; }
.px .tp.empty .nm { left: 0; right: 0; justify-content: center; color: #6a5a80; }
.px .tp.bye .nm { left: 0; right: 0; justify-content: center; color: #c8ff3a; font-size: calc(var(--fs) * .8); }
.px .tp.win { filter: drop-shadow(0 0 3px var(--pc)); }
.px .tp.win::after { background: linear-gradient(105deg, var(--pc) 0 9px, #3a2350 9.5px); }
.px .tp.lose { filter: grayscale(.9) brightness(.55); }
.px .tp.lose .nm em { text-decoration: line-through; text-decoration-color: var(--blood); text-decoration-thickness: 2px; }
.px .tp .rip, .px .tp .med { position: absolute; right: 3px; top: 50%; z-index: 2; transform: translateY(-50%) rotate(-8deg); padding: 0 3px; font-weight: normal; font-size: calc(var(--fs) * .8); line-height: 1.15; color: var(--bone); background: var(--blood); box-shadow: 0 0 0 1px var(--ink); }
.px .tp.ff .rip { font-size: calc(var(--fs) * .55); }
.px .tp .med { background: #c87a30; filter: none; }
.px .tp.next { animation: plate-next .8s ease-in-out infinite alternate; z-index: 2; }
@keyframes plate-next { from { transform: none; filter: drop-shadow(0 0 2px var(--cap)); } to { transform: scale(1.06); filter: drop-shadow(0 0 7px var(--cap)) drop-shadow(0 0 2px #fff); } }
.px .tp.slam { animation: plate-slam .3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes plate-slam { 0% { transform: scale(1.9) rotate(-6deg); filter: brightness(3); } 100% { transform: none; filter: none; } }
.px .tp.fly { z-index: 30; filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(3px 3px 0 var(--ink)); }
.px .tp.shake { animation: plate-shake .08s steps(2) infinite; }
@keyframes plate-shake { 0% { transform: translate(1px, -1px) rotate(1deg); } 100% { transform: translate(-1px, 1px) rotate(-1deg); } }
.px .tp.flush { animation: plate-flush 1.1s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes plate-flush { 0% { transform: none; } 70% { transform: rotate(900deg) scale(.05); opacity: .2; } 71% { opacity: 0; } 100% { transform: none; opacity: 1; } }
.px .tb-spot { position: absolute; inset: -20px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--sx, 320px) var(--sy, 180px), transparent 0, transparent 60px, rgba(10, 5, 18, .55) 120px, rgba(10, 5, 18, .7) 100%); }
.px .tb-spot.on { opacity: 1; }
.px .tb-champ { position: absolute; z-index: 3; height: 34px; text-align: center; background: #22143a; box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); transform: rotate(-1deg); }
.px .tb-champ 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; letter-spacing: 2px; }
.px .tb-champ b { display: block; font-weight: normal; font-size: 16px; line-height: 22px; color: #6a5a80; white-space: nowrap; overflow: hidden; }
.px .tb-champ.on { background: var(--cap); box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink), 0 0 18px var(--cap); animation: champ-glow 1.4s ease-in-out infinite alternate; }
.px .tb-champ.on b { color: var(--ink); }
@keyframes champ-glow { to { transform: rotate(1deg) scale(1.05); } }
.px .tb-next { position: absolute; left: 150px; right: 150px; top: 294px; height: 50px; text-align: center; background: #1d1030; box-shadow: 0 0 0 2.5px var(--ink), 5px 5px 0 2.5px var(--ink); transform: rotate(-.8deg); }
.px .tb-next:empty { display: none; }
.px .tb-next.in { animation: next-in .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes next-in { from { transform: translateY(80px) rotate(6deg); } to { transform: rotate(-.8deg); } }
.px .tb-next small { display: block; height: 12px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-weight: 800; font-size: 8px; line-height: 12px; letter-spacing: 1.5px; }
.px .tb-next > b { display: block; font-weight: normal; font-size: 18px; line-height: 22px; color: var(--bone); white-space: nowrap; overflow: hidden; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.px .tb-next > b i { font-style: normal; } .px .tb-next > b u { text-decoration: none; color: var(--cap); font-size: 14px; margin: 0 4px; }
.px .tb-next span { display: block; font-family: var(--px-small); font-weight: 800; font-size: 8px; line-height: 12px; color: #e6d8f2; text-transform: uppercase; }
.px .tb-next span b { font-family: var(--px-font); font-weight: normal; font-size: 10px; }
.px .tb-cap { position: absolute; left: 60px; right: 60px; top: 250px; z-index: 35; pointer-events: none; text-align: center; opacity: 0; }
.px .tb-cap span { display: inline-block; padding: 3px 10px; background: var(--cap); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); font-size: 16px; line-height: 18px; letter-spacing: .8px; transform: rotate(-2deg); }
.px .tb-cap em { font-style: normal; color: var(--blood); }
.px .tb-cap.in { animation: cap-life 3.2s ease-out both; }
@keyframes cap-life { 0% { opacity: 0; transform: scale(2.4) rotate(8deg); } 8% { opacity: 1; transform: scale(.94); } 14% { transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.px .tb-roulette { position: absolute; left: 190px; right: 190px; top: 150px; z-index: 32; height: 56px; text-align: center; background: var(--ink); box-shadow: 0 0 0 2px var(--cap), 6px 6px 0 2px var(--ink), 0 0 30px rgba(255, 216, 74, .4);
  transform: rotate(-2deg); animation: rou-in .4s cubic-bezier(.2, 1.7, .4, 1) both; }
.px .tb-roulette small { display: block; padding-top: 3px; font-family: var(--px-small); font-weight: 800; font-size: 8px; color: var(--cap); letter-spacing: 3px; }
.px .tb-roulette b { display: block; font-weight: normal; font-size: 26px; line-height: 32px; color: var(--pc, var(--bone)); white-space: nowrap; overflow: hidden; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.px .tb-roulette.hit b { animation: plate-slam .25s cubic-bezier(.2, 1.8, .4, 1); }
.px .tb-roulette.out { animation: rou-out .35s ease-in both; }
@keyframes rou-in { from { transform: scale(0) rotate(-30deg); } to { transform: rotate(-2deg); } }
@keyframes rou-out { to { transform: scale(0) rotate(20deg); opacity: 0; } }
/* the shames */
.px .th-tomb { position: absolute; z-index: 33; width: 44px; height: 40px; text-align: center; background: linear-gradient(#8c7c9c, #4a3e5a); border-radius: 22px 22px 3px 3px; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink);
  animation: tomb-drop .4s cubic-bezier(.5, 0, .7, 1.6) both; }
.px .th-tomb b { display: block; padding-top: 7px; font-weight: normal; font-size: 12px; color: var(--ink); }
.px .th-tomb small { display: block; font-family: var(--px-small); font-weight: 800; font-size: 6px; color: var(--bone); white-space: nowrap; overflow: hidden; }
.px .th-tomb.out { animation: rou-out .45s ease-in both; }
@keyframes tomb-drop { from { transform: translateY(-120px); } to { transform: none; } }
.px .th-chunk { position: absolute; z-index: 33; background: linear-gradient(105deg, var(--pc) 0 20%, #22143a 21%); box-shadow: 0 0 0 1.2px var(--ink); }
.px .th-swirl { position: absolute; z-index: 33; width: 52px; height: 52px; border-radius: 50%; background: repeating-conic-gradient(#5ad1ff 0 20deg, #1d6fa0 20deg 40deg); box-shadow: 0 0 0 2px var(--ink);
  animation: swirl 1.1s linear both; }
@keyframes swirl { 0% { transform: scale(0) rotate(0); } 20% { transform: scale(1) rotate(200deg); } 80% { transform: scale(1) rotate(900deg); opacity: 1; } 100% { transform: scale(0) rotate(1100deg); opacity: 0; } }
.px .th-stamp { position: absolute; z-index: 33; width: 92px; text-align: center; font-size: 20px; line-height: 24px; letter-spacing: 1.5px; color: var(--blood); border: 3px solid var(--blood); background: rgba(255, 243, 214, .92);
  box-shadow: 0 0 0 1.5px var(--ink), 3px 3px 0 1.5px var(--ink); transform: rotate(-12deg); animation: stamp2 .3s cubic-bezier(.3, 1.9, .5, 1) both; }
.px .th-stamp.out { animation: rou-out .35s ease-in both; }
.px .th-boot { position: absolute; z-index: 33; font-size: 40px; line-height: 44px; filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)); }

/* --- the character select of a duel --- */
.px .cs-tour .cs-title { color: var(--cap); }
.px .cs-duel { position: absolute; left: 230px; top: 8px; padding: 1px 8px; white-space: nowrap; background: var(--ink); box-shadow: 0 0 0 1.5px var(--cap), 3px 3px 0 1.5px var(--ink); transform: rotate(1.5deg); font-size: 15px; line-height: 20px; }
.px .cs-duel b { font-weight: normal; color: var(--bone); } .px .cs-duel i { font-style: normal; color: var(--blood); margin: 0 6px; }

/* --- VS --- */
.px .vs-half { position: absolute; top: -20px; bottom: -20px; width: 380px; overflow: hidden; }
.px .vs-half.l { left: -40px; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); background: radial-gradient(circle at 40% 45%, color-mix(in srgb, var(--pc) 85%, #fff) 0, var(--pc) 35%, color-mix(in srgb, var(--pc) 35%, var(--ink)) 100%); animation: vs-l .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.px .vs-half.r { right: -40px; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); background: radial-gradient(circle at 60% 45%, color-mix(in srgb, var(--pc) 85%, #fff) 0, var(--pc) 35%, color-mix(in srgb, var(--pc) 35%, var(--ink)) 100%); animation: vs-r .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.px .vs-half::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(18, 10, 26, .35) 1px, transparent 1.5px) 0 0 / 5px 5px; }
@keyframes vs-l { from { transform: translateX(-400px); } to { transform: none; } }
@keyframes vs-r { from { transform: translateX(400px); } to { transform: none; } }
.px .vs-half img { position: absolute; bottom: 30px; width: 230px; height: 230px; filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(8px 6px 0 rgba(10, 5, 18, .5));
  animation: vs-img .6s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
.px .vs-half.l img { left: 60px; } .px .vs-half.r img { right: 60px; transform: scaleX(-1); }
@keyframes vs-img { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
.px .vs-half b { position: absolute; bottom: 52px; font-weight: normal; font-size: 40px; line-height: 44px; letter-spacing: 1.5px; color: var(--bone); white-space: nowrap; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); animation: win-in .4s cubic-bezier(.2, 1.9, .4, 1) .75s both; }
.px .vs-half b em { display: inline-block; font-style: normal; }
.px .vs-half.l b { left: 60px; transform: rotate(-4deg); } .px .vs-half.r b { right: 60px; text-align: right; transform: rotate(4deg); }
.px .vs-half small { position: absolute; bottom: 34px; padding: 0 6px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-weight: 800; font-size: 9px; line-height: 14px; letter-spacing: 1px; animation: cap-in .3s 1s both; }
.px .vs-half.l small { left: 64px; } .px .vs-half.r small { right: 64px; }
.px .vs-bolt { position: absolute; left: 280px; top: -20px; width: 80px; height: 400px; background: var(--bone); clip-path: polygon(52% 0, 60% 0, 46% 42%, 62% 42%, 40% 100%, 50% 56%, 34% 56%); filter: drop-shadow(0 0 8px #fff);
  animation: bolt .5s ease-out .38s both; }
@keyframes bolt { 0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: .3; } 60% { opacity: 1; } 100% { opacity: .85; } }
.px .vs-vs { position: absolute; left: 0; right: 0; top: 130px; text-align: center; font-size: 90px; line-height: 90px; color: var(--cap); -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--blood), 9px 9px 0 var(--ink);
  animation: vs-slam .5s cubic-bezier(.2, 1.9, .4, 1) .42s both; }
@keyframes vs-slam { 0% { transform: scale(4) rotate(-20deg); opacity: 0; } 100% { transform: rotate(-6deg); opacity: 1; } }
.px .vs-round { position: absolute; left: 0; right: 0; top: 14px; text-align: center; animation: cap-in .35s cubic-bezier(.2, 1.8, .4, 1) .6s both; }
.px .vs-round, .px .vs-stage { font-size: 22px; line-height: 26px; letter-spacing: 2px; color: var(--ink); }
.px .vs-round { width: 280px; margin: 0 auto; background: var(--cap); box-shadow: 0 0 0 2.5px var(--ink), 5px 5px 0 2.5px var(--ink); }
.px .vs-stage { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0 auto; width: 300px; font-size: 13px; line-height: 18px; text-align: center; background: var(--ink); color: var(--bone); animation: cap-in .3s 1.2s both; }

/* --- the champion --- */
.px .tc-title { position: absolute; left: 330px; right: 10px; top: 8px; text-align: center; white-space: nowrap; }
.px .tc-title b { display: inline-block; font-weight: normal; font-size: 46px; line-height: 50px; 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 + 300ms); }
.px .tc-name { position: absolute; left: 330px; right: 10px; top: 60px; text-align: center; font-size: 38px; line-height: 40px; letter-spacing: 1.5px; color: var(--pc); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg);
  animation: win-in .4s cubic-bezier(.2, 1.9, .4, 1) .95s both; white-space: nowrap; }
.px .tc-name em { display: inline-block; font-style: normal; transform-origin: 50% 50% !important; }
.px .tc-sub { position: absolute; left: 340px; right: 14px; top: 104px; text-align: center; animation: cap-in .3s 1.2s both; }
.px .tc-sub { font-family: var(--px-small); font-weight: 800; font-style: italic; font-size: 8.5px; line-height: 13px; color: var(--bone); background: var(--ink); }
.px .tc-podium { position: absolute; left: 352px; right: 14px; top: 140px; height: 130px; }
.px .tc-step { position: absolute; bottom: 0; width: 64px; text-align: center; background: linear-gradient(var(--pc), color-mix(in srgb, var(--pc) 40%, var(--ink))); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink);
  animation: step-up .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(1.4s + var(--i) * -120ms + 360ms); }
@keyframes step-up { from { transform: translateY(140px); } to { transform: none; } }
.px .tc-step.p1 { left: 70px; height: 70px; } .px .tc-step.p2 { left: 0; height: 52px; } .px .tc-step.p3 { left: 140px; height: 40px; } .px .tc-step.p4 { left: 210px; height: 28px; filter: brightness(.7); }
.px .tc-step img { position: absolute; left: 6px; bottom: 100%; width: 52px; height: 52px; 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 .tc-step b { display: block; font-weight: normal; font-size: 22px; line-height: 26px; color: var(--bone); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.px .tc-step span { display: block; padding: 0 2px; font-size: 9.5px; line-height: 11px; color: var(--bone); white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 var(--ink); }
.px .tc-step span em { display: inline-block; font-style: normal; }
.px .tc-step.p1::after { content: '★'; position: absolute; left: 0; right: 0; top: -82px; font-size: 22px; color: var(--cap); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; animation: pulse-s .8s ease-in-out infinite; }
.px .tc-conf { position: absolute; z-index: 2; pointer-events: none; box-shadow: 0 0 0 .6px rgba(18, 10, 26, .6); }
/* a dark comic page behind the bracket and the setup (the fresco stays a hint behind) */
.px.tb-px::before, .px.ts-px::before, .px.th-px::before { content: ''; position: absolute; inset: -60px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 243, 214, .05) 1px, transparent 1.5px) 0 0 / 6px 6px, radial-gradient(ellipse at 50% 45%, rgba(29, 16, 48, .78), rgba(10, 5, 18, .92)); }

/* --- the online room (src/ui/tournament.js tourSetup, codeCard, reactBar, netRejoin) --- */
.px .ts-code { position: absolute; left: 398px; top: 6px; width: 230px; height: 70px; background: var(--ink); box-shadow: 0 0 0 2px var(--cap), 5px 5px 0 2px var(--ink); transform: rotate(1.2deg);
  animation: cell-in .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.px .ts-code small { position: absolute; left: 6px; top: 3px; font-family: var(--px-small); font-weight: 800; font-size: 7.5px; letter-spacing: 1.5px; color: var(--cap); }
.px .ts-code .cd { position: absolute; left: 0; right: 0; top: 9px; text-align: center; font-weight: normal; font-size: 27px; line-height: 30px; letter-spacing: 5px; color: var(--bone); cursor: pointer;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--blood); }
.px .ts-code .cd i { display: inline-block; font-style: normal; animation: code-in .35s cubic-bezier(.2, 1.8, .4, 1) both; animation-delay: calc(var(--i) * 45ms + 200ms); }
@keyframes code-in { from { transform: translateY(-16px) scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.px .ts-code .lk { position: absolute; left: 6px; right: 6px; top: 40px; text-align: center; font-family: var(--px-small); font-weight: 700; font-size: 7px; line-height: 9px; color: #a99cba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px .ts-code u { position: absolute; top: 52px; height: 13px; text-decoration: none; font-family: var(--px-small); font-weight: 800; font-size: 7.5px; line-height: 13px; letter-spacing: .6px; text-align: center; }
.px .ts-code .cp { left: 5px; width: 140px; background: var(--slime); color: var(--ink); cursor: pointer; box-shadow: 0 0 0 1.2px var(--ink); }
.px .ts-code .cp:hover { filter: brightness(1.15); }
.px .ts-code .cp em { font-style: normal; display: inline-block; margin-left: 3px; padding: 0 2px; background: var(--ink); color: var(--slime); line-height: 9px; }
.px .ts-code .cp.ok { background: var(--cap); animation: plate-slam .3s cubic-bezier(.2, 1.8, .4, 1); }
.px .ts-code .lock { right: 5px; width: 74px; background: #2a1a40; color: #9dff3a; }
.px .ts-code .lock::before { content: '\25CF'; margin-right: 3px; font-size: 7px; animation: blink-on 1.4s ease-in-out infinite; }
.px .ts-code .lock.on { color: #ff8a8a; } .px .ts-code .lock.on::before { content: '\25A0'; animation: none; }
.px .ts-code .lock.btn { cursor: pointer; } .px .ts-code .lock.btn:hover { filter: brightness(1.3); }
@keyframes blink-on { 50% { opacity: .25; } }
.px.ts-online .ts-rules { top: 86px; }
.px.ts-online .ts-rule { height: 24px; margin-bottom: 5px; } .px.ts-online .ts-rule small, .px.ts-online .ts-rule b { line-height: 24px; }
.px.ts-online .ts-go { margin-top: 9px; }
.px .ts-cell small.me { color: var(--cap); } .px .ts-cell.on small { color: var(--ink); } .px .ts-cell small.hs { color: #ff9a3c; }
.px .ts-cell small.dc { color: #ff5a5a; animation: blink-on .9s steps(2) infinite; }
.px .ts-cell .lpng { right: 12px; top: -5px; z-index: 2; } /* le ping de sa machine vers l'hôte, sur le bord haut (src/ui/tournament.js) */
.px .ts-cell.away { filter: grayscale(.85) brightness(.7); }
.px .ts-cell.away .nm em { text-decoration: line-through; text-decoration-color: rgba(255, 90, 90, .7); }
.px .ts-count { position: absolute; left: 12px; top: 280px; width: 372px; font-family: var(--px-small); font-weight: 800; font-size: 8.5px; line-height: 12px; letter-spacing: .8px; color: #c8bcd8; text-shadow: 1px 1px 0 var(--ink); }
.px .ts-count b { font-family: var(--px-font); font-weight: normal; font-size: 13px; color: var(--cap); }
.px .ts-count i.dc { font-style: normal; color: #ff7a7a; }

/* the reactions: a row of buttons, what everybody sends rises on the right */
.px .rx-bar { position: absolute; z-index: 20; display: flex; gap: 3px; align-items: center; }
.px .rx-bar b[data-i] { position: relative; width: 21px; height: 19px; background: #22143a; box-shadow: 0 0 0 1.5px var(--ink), 2px 2px 0 1.5px var(--ink); cursor: pointer; text-align: center; transition: transform .12s cubic-bezier(.2, 1.8, .4, 1); }
.px .rx-bar b[data-i] em { font-style: normal; font-family: var(--px-font); font-weight: normal; font-size: 11px; line-height: 19px; color: var(--cap); }
.px .rx-bar b[data-i] small { position: absolute; right: 1px; bottom: 0; font-family: var(--px-small); font-weight: 800; font-size: 5.5px; line-height: 6px; color: #8c7c9c; }
.px .rx-bar b[data-i]:hover, .px .rx-bar b[data-i].on { transform: translateY(-3px) scale(1.15); box-shadow: 0 0 0 1.5px var(--cap), 2px 2px 0 1.5px var(--ink); }
.px .rx-bar b[data-i].hit { animation: rx-hit .3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes rx-hit { 0% { transform: scale(1.6) rotate(-10deg); background: var(--cap); } 100% { transform: none; } }
.px .rx-bar.open { filter: drop-shadow(0 0 4px var(--cap)); }
.px .rx-bar .rx-y { position: absolute; left: 0; top: -12px; font-family: var(--px-small); font-weight: 800; font-size: 7.5px; color: #c8bcd8; text-shadow: 1px 1px 0 var(--ink); white-space: nowrap; }
.px .rx-bar .rx-y b { font-family: var(--px-font); font-weight: normal; font-size: 10px; }
.px .rx-layer { position: absolute; right: 0; top: 0; bottom: 0; width: 140px; z-index: 40; pointer-events: none; overflow: hidden; }
.px .rx-fly { position: absolute; right: 22px; bottom: 50px; display: flex; flex-direction: column; align-items: center; animation: rx-rise 2.6s cubic-bezier(.2, .7, .3, 1) both; }
.px .rx-fly em { font-style: normal; font-family: var(--px-font); font-size: 26px; line-height: 30px; color: var(--cap); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; filter: drop-shadow(2px 2px 0 var(--ink)); }
.px .rx-fly small { margin-top: -2px; padding: 0 4px; max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--pc, #c8c0e8); color: var(--ink); box-shadow: 0 0 0 1.2px var(--ink);
  font-family: var(--px-small); font-weight: 800; font-size: 7.5px; line-height: 10px; }
@keyframes rx-rise { 0% { transform: translate(0, 30px) scale(.2) rotate(0); opacity: 0; } 12% { transform: translate(0, 0) scale(1.25) rotate(var(--rz)); opacity: 1; }
  20% { transform: translate(0, -10px) scale(1) rotate(var(--rz)); } 80% { opacity: 1; } 100% { transform: translate(var(--dx), -190px) scale(.9) rotate(calc(var(--rz) * -1)); opacity: 0; } }

/* the bracket online: the room's code, the players who dropped, the duel waiting for them */
.px .tb-room { position: absolute; right: 12px; top: 27px; padding: 0 6px; background: var(--cap); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 3px 3px 0 1.5px var(--ink); transform: rotate(1.5deg); cursor: pointer;
  font-family: var(--px-small); font-weight: 800; font-size: 7.5px; line-height: 12px; letter-spacing: 1px; }
.px .tb-room b { font-family: var(--px-font); font-weight: normal; font-size: 11px; letter-spacing: 2px; color: var(--blood); }
.px .tp.away { animation: plate-away 1.1s ease-in-out infinite; }
@keyframes plate-away { 0%, 100% { filter: grayscale(.9) brightness(.6); } 50% { filter: grayscale(.4) brightness(.9); } }
.px .tp .dc { position: absolute; right: 3px; top: 50%; z-index: 2; transform: translateY(-50%) rotate(-6deg); padding: 0 3px; background: #ff5a5a; color: var(--ink); box-shadow: 0 0 0 1px var(--ink);
  font-weight: normal; font-size: calc(var(--fs) * .55); line-height: calc(var(--fs) * .85); }
.px .tb-next.wait { box-shadow: 0 0 0 2.5px #ff9a3c, 5px 5px 0 2.5px var(--ink); }
.px .tb-next small.wt { background: #8a1a10; color: var(--bone); }
.px .tb-next small.wt .tm { font-style: normal; color: var(--cap); }

/* coming back to a room after a drop */
.px .pwait.rj-box { flex-wrap: wrap; top: 120px; min-height: 80px; }
.px .pwait.rj-box > .txt { width: 100%; font-size: 24px; color: #ff9a3c; }
.px .pwait.rj-box .rj-s { width: 100%; font-family: var(--px-small); font-weight: 800; font-size: 10px; color: var(--bone); }
.px .pwait.rj-box .rj-s b { font-family: var(--px-font); font-weight: normal; font-size: 13px; letter-spacing: 2px; color: var(--cap); }

/* --- TOURNOI: the two tabs, create a room / join one (src/ui/tournament.js tourMenu, passScreen) --- */
.px .th-sub { left: 16px; right: auto; top: 40px; text-align: left; font-size: 9px; }
.px .th-tabs { position: absolute; left: 110px; top: 60px; width: 420px; height: 32px; display: flex; gap: 8px; }
.px .th-tabs b { position: relative; flex: 1; height: 30px; cursor: pointer; text-align: center; font-weight: normal; font-size: 17px; line-height: 31px; letter-spacing: 1px; color: #a99cba;
  background: #1d1030; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); transform: rotate(-1deg); transition: transform .14s cubic-bezier(.2, 1.8, .4, 1); }
.px .th-tabs b:nth-child(2) { transform: rotate(1deg); }
.px .th-tabs b em { font-style: normal; }
.px .th-tabs b:hover { color: var(--bone); }
.px .th-tabs b.on { background: var(--cap); color: var(--ink); transform: translateY(-2px) rotate(-1deg) scale(1.03); box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--blood); }
.px .th-tabs b.foc { filter: drop-shadow(0 0 6px var(--cap)); animation: pulse-s .7s ease-in-out infinite; }
.px .th-body { position: absolute; left: 110px; top: 108px; width: 420px; }
.px .th-row { position: relative; height: 26px; margin-bottom: 4px; background: #1d1030; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); cursor: pointer; transition: transform .14s cubic-bezier(.2, 1.8, .4, 1); }
.px .th-row small { position: absolute; left: 0; top: 0; bottom: 0; width: 130px; padding-left: 7px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-weight: 800; font-size: 8.5px; line-height: 26px; letter-spacing: .8px; }
.px .th-row b { position: absolute; left: 138px; right: 8px; top: 0; font-weight: normal; font-size: 14px; line-height: 26px; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 2px 2px 0 var(--ink); }
.px .th-row b i { font-style: normal; color: #6a5a80; } .px .th-row b u { text-decoration: none; color: var(--cap); margin: 0 4px; }
.px .th-row.on { transform: translateX(-4px) rotate(-.6deg); box-shadow: 0 0 0 2px var(--slime), 4px 4px 0 2px var(--ink), 0 0 10px rgba(157, 255, 58, .35); }
.px .th-row.on b { color: var(--slime); }
.px .th-row.alt { height: 22px; background: repeating-linear-gradient(-45deg, rgba(255, 243, 214, .04) 0 5px, transparent 5px 10px), #170d22; }
.px .th-row.alt small { line-height: 22px; background: #2a1a40; color: #c8bcd8; }
.px .th-row.alt b { line-height: 22px; font-family: var(--px-small); font-weight: 700; font-size: 9.5px; color: #c8bcd8; text-shadow: none; }
.px .th-row.alt.on small { background: var(--slime); color: var(--ink); }
.px .th-go { position: relative; margin: 8px 0 12px; height: 34px; cursor: pointer; text-align: center; font-size: 20px; line-height: 34px; letter-spacing: 1.5px; color: var(--bone);
  background: repeating-linear-gradient(-50deg, var(--blood) 0 12px, #a80c1a 12px 24px); box-shadow: 0 0 0 2.5px var(--ink), 4px 4px 0 2.5px var(--ink); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; transform: rotate(-1deg); }
.px .th-go.on { animation: pulse-s .7s ease-in-out infinite; box-shadow: 0 0 0 2.5px var(--cap), 4px 4px 0 2.5px var(--ink), 0 0 14px rgba(255, 216, 74, .6); }
.px .th-note { margin-top: 6px; font-family: var(--px-small); font-weight: 700; font-size: 8.5px; line-height: 12px; color: #c8bcd8; text-shadow: 1px 1px 0 var(--ink); }
.px .th-note.err, .px .th-note b { color: #ff7a7a; font-weight: 800; }
.px .th-head { display: flex; height: 12px; margin: 2px 0 2px; padding-left: 20px; font-family: var(--px-small); font-weight: 800; font-size: 7px; line-height: 12px; letter-spacing: 1px; color: var(--cap); }
.px .th-head .nm, .px .th-room .nm { width: 186px; } .px .th-head .hs, .px .th-room .hs { width: 96px; } .px .th-head .np, .px .th-room .np { width: 46px; } .px .th-head .st, .px .th-room .st { width: 70px; }
.px .th-room { position: relative; display: flex; align-items: center; height: 22px; margin-bottom: 3px; background: #22143a; box-shadow: 0 0 0 1.5px var(--ink), 3px 3px 0 1.5px var(--ink); cursor: pointer; transition: transform .14s cubic-bezier(.2, 1.8, .4, 1); }
.px .th-room .lk { width: 18px; text-align: center; font-style: normal; font-size: 9px; }
.px .th-room .nm { overflow: hidden; white-space: nowrap; font-size: 13px; line-height: 22px; color: var(--bone); text-shadow: 1px 1px 0 var(--ink); }
.px .th-room .nm em { display: inline-block; font-style: normal; }
.px .th-room .hs { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--px-small); font-weight: 700; font-size: 9px; color: #c8bcd8; }
.px .th-room .np { font-family: var(--px-small); font-weight: 700; font-size: 9px; color: #a99cba; } .px .th-room .np b { font-family: var(--px-font); font-weight: normal; font-size: 12px; color: var(--cap); }
.px .th-room .st { text-align: center; font-family: var(--px-small); font-weight: 800; font-size: 7px; line-height: 13px; letter-spacing: .5px; color: var(--ink); background: var(--slime); }
.px .th-room .st.bracket { background: #ff9a3c; } .px .th-room .st.done { background: #8c7c9c; }
.px .th-room.priv .nm { color: #e8c08a; }
.px .th-room.on { transform: translateX(-4px) scale(1.02); box-shadow: 0 0 0 1.5px var(--slime), 3px 3px 0 1.5px var(--ink), 0 0 10px rgba(157, 255, 58, .35); }
.px .th-room.on .nm { color: var(--slime); }
.px .ts-input.th-in { left: 248px; width: 276px; }
/* the password of a private room: a box over the screen */
.px .th-pass { position: absolute; z-index: 50; left: 190px; top: 118px; width: 260px; padding: 0 0 10px; text-align: center; background: var(--ink); box-shadow: 0 0 0 2px var(--cap), 6px 6px 0 2px var(--ink); transform: rotate(-1deg);
  animation: rou-in .3s cubic-bezier(.2, 1.7, .4, 1) both; }
.px .th-pass small { display: block; height: 14px; background: var(--cap); color: var(--ink); font-family: var(--px-small); font-weight: 800; font-size: 8.5px; line-height: 14px; letter-spacing: 2px; }
.px .th-pass > b { display: block; margin: 6px 8px 2px; font-weight: normal; font-size: 20px; line-height: 22px; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px .th-pass span { display: block; font-family: var(--px-small); font-weight: 700; font-size: 9px; color: #c8bcd8; }
.px .th-pass .th-pin { position: static; display: block; margin: 5px auto 0; width: 200px; }
.px .th-pass .th-perr { display: block; min-height: 12px; margin-top: 4px; font-style: normal; font-family: var(--px-small); font-weight: 800; font-size: 8.5px; color: #ff7a7a; }
.px .th-pass.no { animation: pass-no .35s ease-in-out; }
@keyframes pass-no { 20% { transform: translateX(-8px) rotate(-1deg); } 40% { transform: translateX(7px) rotate(-1deg); } 60% { transform: translateX(-5px) rotate(-1deg); } 80% { transform: translateX(3px) rotate(-1deg); } }
.px .th-pass.solo { top: 110px; }
.px .ts-code small em, .px .tb-room em { font-style: normal; color: var(--bone); }
.px .ts-code small { right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px .ts-code .lk b { color: var(--cap); font-weight: 800; letter-spacing: .5px; }
.px .tb-room { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* invite a friend into the tournament's room (src/ui/roomInvite.js, 9 Nov 2026): a line under the draw; the rules a bit tighter to make room */
.px.ts-online .ts-rules:has(.ts-inv) .ts-rule { height: 22px; margin-bottom: 4px; }
.px.ts-online .ts-rules:has(.ts-inv) .ts-rule small, .px.ts-online .ts-rules:has(.ts-inv) .ts-rule b { line-height: 22px; }
.px.ts-online .ts-rules:has(.ts-inv) .ts-go { height: 30px; line-height: 30px; margin-top: 8px; font-size: 18px; }
.px .ts-inv { position: relative; margin-top: 8px; height: 20px; background: var(--cap); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); cursor: pointer;
  text-align: center; font-family: var(--px-small); font-weight: 800; font-size: 10px; line-height: 20px; letter-spacing: .6px; transform: rotate(1deg); transition: transform .14s cubic-bezier(.2, 1.8, .4, 1); }
.px .ts-inv.on { transform: translateX(-4px) rotate(-1deg) scale(1.04); box-shadow: 0 0 0 2px var(--slime), 4px 4px 0 2px var(--ink), 0 0 10px rgba(157, 255, 58, .5); }
.px .ts-inv kbd, .px .cs-finv kbd { margin-left: 4px; padding: 0 3px; background: var(--ink); color: var(--cap); font-family: var(--px-small); font-size: 8px; font-weight: 800; border-radius: 2px; }
.px .ts-px .rk-pop.cs-fpop, .px.ts-px .rk-pop.cs-fpop { top: 60px; }