/* Thème d'interface « street » (La Méga-Rampe, 18 oct. 2026), façon jeu de baston de rue des années 2000 : le HUD et les
   bandeaux du combat, seulement sur une arène dont la vue a `ui: 'street'` (classe ui-street posée par
   src/game/matchView.js). Affiches en papier jauni et déchiré (grain, taches, bout de scotch), portrait en photo
   granuleuse au liseré blanc, grosses lettres noires abîmées (Rubik Dirt, Anton), étiquette du joueur à sa couleur et
   « CPU » en rouge, barres vertes segmentées, bandeaux sur une bande de papier déchiré.
   Le grain et les taches sont du bruit SVG (feTurbulence) en data URI : aucune image en plus. */
:root {
  --st-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .17 0 0 0 0 .1 0 0 0 .7 -.12'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E");
  --st-grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .07' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .07 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23g)'/%3E%3C/svg%3E");
  --st-paper: #d9ceb2; --st-ink: #141210; --st-red: #c8141c; --st-green: #52d42a; --st-dirt: 'Rubik Dirt', 'Anton', sans-serif; --st-cond: 'Anton', 'Barlow Condensed', sans-serif;
  /* a torn paper edge (top and bottom ragged) */
  --st-torn: polygon(0 3%, 4% 0, 9% 4%, 15% 1%, 22% 5%, 29% 0, 37% 3%, 44% 1%, 52% 5%, 60% 0, 67% 4%, 75% 1%, 83% 5%, 90% 0, 96% 3%, 100% 1%,
    100% 96%, 95% 100%, 88% 95%, 81% 99%, 73% 94%, 66% 100%, 58% 96%, 50% 99%, 43% 94%, 35% 100%, 27% 95%, 19% 99%, 12% 94%, 6% 99%, 0 95%);
}

/* ---- the fighter panels: a torn paper poster each ---- */
.px.phud.ui-street .phc { animation: st-card .4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes st-card { from { transform: translateY(50px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.px.phud.ui-street .phc .hb { inset: -2px -2px -3px -4px; clip-path: var(--st-torn); transform: rotate(calc((var(--i) - 1.5) * .6deg));
  background: var(--st-grain), var(--st-grime), radial-gradient(ellipse at 40% 45%, #e6dcc2 0%, var(--st-paper) 45%, #a8987a 100%);
  background-size: 96px 96px, 160px 80px, 100% 100%; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .7)); }
/* the paper's own fold and a strip of tape at the top */
.px.phud.ui-street .phc .hb::before { inset: 0; clip-path: none; background: linear-gradient(100deg, transparent 58%, rgba(60, 40, 20, .18) 60%, transparent 63%); }
.px.phud.ui-street .phc .hb::after { inset: auto; left: 52%; top: -1px; width: 22px; height: 6px; clip-path: none; -webkit-mask-image: none; mask-image: none;
  background: rgba(236, 228, 200, .55); box-shadow: none; transform: rotate(-4deg); }
.px.phud.ui-street .phc .pp { left: 5px; top: -14px; width: 38px; height: 50px; overflow: hidden; clip-path: none; transform: rotate(-2deg);
  background: radial-gradient(circle at 50% 35%, #5a5248, #1a1612 80%); box-shadow: 0 0 0 1.5px #efe9da, 1px 2px 0 1.5px rgba(0, 0, 0, .55); }
.px.phud.ui-street .phc .pp::after { content: ''; position: absolute; inset: 0; background: var(--st-grain); background-size: 48px 48px; mix-blend-mode: multiply; opacity: .8; }
.px.phud.ui-street .phc .pp img { left: -6px; bottom: -2px; width: 50px; height: 50px; filter: contrast(1.2) saturate(.7) sepia(.15); }
.px.phud.ui-street .phc .pct { left: 50px; top: -2px; font-family: var(--st-dirt); font-weight: normal; font-size: 32px; line-height: 36px;
  color: var(--st-ink) !important; -webkit-text-stroke: 0; text-shadow: 1px 1px 0 rgba(255, 248, 228, .45); letter-spacing: 0; }
.px.phud.ui-street .phc .pct b { transform: none; font-weight: normal; letter-spacing: 0; }
.px.phud.ui-street .phc .pct small { font-size: 14px; -webkit-text-stroke: 0; margin-left: 1px; }
.px.phud.ui-street .phc.hot .pct { color: #8a1a10 !important; }
.px.phud.ui-street .phc.danger .pct { color: var(--st-red) !important; }
.px.phud.ui-street .phc .tag { left: 49px; right: 4px; bottom: 3px; height: 10px; padding: 0; gap: 3px; clip-path: none; background: none; box-shadow: none; }
.px.phud.ui-street .phc .pj { font-family: var(--st-cond); font-weight: normal; font-size: 8px; line-height: 10px; color: #fff; text-transform: uppercase; letter-spacing: .3px;
  background: var(--pc); padding: 0 3px; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.px.phud.ui-street .phc .pj i { color: #fff; background: var(--st-red); padding: 0 2px; margin-left: 1px; border-radius: 1px; font-size: 7px; opacity: 1; font-style: normal; }
.px.phud.ui-street .phc .pn { font-family: var(--st-cond); font-weight: normal; font-size: 9px; line-height: 10px; color: var(--st-ink); text-transform: uppercase; text-shadow: none; letter-spacing: .3px; }
.px.phud.ui-street .phc .stocks { right: 6px; top: -7px; gap: 2px; }
.px.phud.ui-street .phc .st, .px.phud.ui-street .jx-layer .st { width: 10px; height: 10px; border-radius: 0; background: #2a241e; box-shadow: 0 0 0 1px #efe9da, 0 1px 0 1px rgba(0, 0, 0, .5); }
.px.phud.ui-street .phc .st img { filter: contrast(1.2) saturate(.7) sepia(.15); }
.px.phud.ui-street .phc .sx { font-family: var(--st-dirt); color: var(--st-ink); text-shadow: none; }
/* the cooldowns: three green stat bars, segmented */
.px.phud.ui-street .phc .cds { right: 5px; top: 8px; gap: 2px; }
.px.phud.ui-street .phc .cds i { width: 18px; height: 4px; border-radius: 0; box-shadow: 0 0 0 1px #1a1612;
  background: linear-gradient(90deg, var(--st-green) calc((1 - var(--f, 0)) * 100%), #3a342c 0);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px); mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px); }
.px.phud.ui-street .phc .cds i.wait { background: linear-gradient(90deg, #d8c42a calc((1 - var(--f, 0)) * 100%), #3a342c 0); }
/* the ultimate gauge: a stat bar too, red and burning when it is full */
.px.phud.ui-street .phc .ug { left: 49px; top: 48px; width: 79px; height: 5px; background: #1a1612; clip-path: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .5); transform: rotate(-.6deg); }
.px.phud.ui-street .phc .ug i { inset: 1px; background: #3a342c; clip-path: none; }
.px.phud.ui-street .phc .ug i::before { background: var(--st-green);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); }
.px.phud.ui-street .phc .ug.full i::before { background: linear-gradient(90deg, var(--st-red), #ff6a1a, #ffc23a, #ff6a1a, var(--st-red)); background-size: 200% 100%; animation: ug-rainbow .6s linear infinite; }
.px.phud.ui-street .phc .ug.full { filter: drop-shadow(0 0 2px #ff6a1a); animation: none; }
.px.phud.ui-street .phc .ug b { font: normal 7px/7px var(--st-cond); top: -8px; left: auto; right: 0; transform: none; letter-spacing: .6px; color: var(--st-red); text-shadow: none; }
.px.phud.ui-street .phc.out { filter: grayscale(1) brightness(.5); }

/* ---- timer and the minigame countdown ---- */
.px.phud.ui-street .phud-timer { top: 3px; font-family: var(--st-dirt); font-weight: normal; font-size: 30px; letter-spacing: 1px; color: #efe6cc;
  -webkit-text-stroke: 0; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.px.phud.ui-street .phud-timer.low { color: var(--st-red); }
.px.phud.ui-street .phud-mg { clip-path: var(--st-torn); background: var(--st-grain), var(--st-paper); background-size: 96px 96px, auto; color: var(--st-ink); box-shadow: none;
  font-family: var(--st-cond); font-weight: normal; text-transform: uppercase; }
.px.phud.ui-street .phud-mg b, .px.phud.ui-street .phud-mg em { font-family: var(--st-dirt); font-weight: normal; color: var(--st-red); text-shadow: none; }

/* ---- banners, countdown, popups (screen space: --k = the size of a pixel of the 640 x 360 grid) ---- */
.popups.ui-street .banner { font-family: var(--st-dirt) !important; font-weight: normal; text-transform: uppercase;
  font-size: calc(var(--k, 2) * 40px) !important; letter-spacing: calc(var(--k, 2) * .5px); line-height: 1.15; padding: calc(var(--k, 2) * 3px) calc(var(--k, 2) * 22px) calc(var(--k, 2) * 1px);
  color: var(--st-ink) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; isolation: isolate;
  filter: drop-shadow(0 calc(var(--k, 2) * 2px) 0 rgba(0, 0, 0, .8));
  animation: st-in .32s cubic-bezier(.2, 1.5, .4, 1) both, st-out .25s ease-in 1.25s forwards !important; }
/* the strip of torn paper behind the words, with a band of the banner's colour along its bottom */
.popups.ui-street .banner::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--st-torn);
  background: var(--st-grain), var(--st-grime), linear-gradient(180deg, #e6dcc2, var(--st-paper) 70%, #a8987a);
  background-size: calc(var(--k, 2) * 96px) calc(var(--k, 2) * 96px), calc(var(--k, 2) * 160px) calc(var(--k, 2) * 80px), 100% 100%; }
.popups.ui-street .banner::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 8%; height: 9%; z-index: -1; background: var(--bc, var(--st-red)); opacity: .9; }
.popups.ui-street .banner.vic { width: auto; white-space: nowrap; font-size: calc(var(--k, 2) * 34px) !important; }
@keyframes st-in { 0% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.8); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-2deg); opacity: 1; } }
@keyframes st-out { to { transform: translate(-50%, 40%) rotate(8deg); opacity: 0; } }
.popups.ui-street .countdown { font-family: var(--st-dirt) !important; font-weight: normal; font-size: calc(var(--k, 2) * 120px) !important; color: #efe6cc !important;
  -webkit-text-stroke: calc(var(--k, 2) * 2px) #000 !important; paint-order: stroke fill;
  text-shadow: calc(var(--k, 2) * 4px) calc(var(--k, 2) * 4px) 0 #000 !important; }
.popups.ui-street .countdown.go { font-size: calc(var(--k, 2) * 80px) !important; color: var(--st-red) !important; text-transform: uppercase;
  text-shadow: calc(var(--k, 2) * 4px) calc(var(--k, 2) * 4px) 0 #000, 0 0 calc(var(--k, 2) * 18px) rgba(200, 20, 28, .6) !important; }
.popups.ui-street .pop { font-family: var(--st-cond) !important; font-weight: normal; text-transform: uppercase;
  font-size: calc(var(--k, 2) * 16px) !important; -webkit-text-stroke: calc(var(--k, 2) * .9px) #000 !important; paint-order: stroke fill;
  text-shadow: 0 calc(var(--k, 2) * 1.5px) 0 #000 !important; }