/* MAGA TAPÉ — « TAPÉ COMICS, gbaka imprimé de travers »
   Cheap offset street comic: Nuit / Bleu Yop dominant, flat inks, Ben-Day dots,
   cyan + print-magenta misregistration, motion on twos (steps()). Loaded after game.css. */
:root {
  --nuit: #0B1F4D; --yop: #1E4FA8; --tomate: #E0301E; --magenta: #E6007E; --cyan: #00A0E3;
  --rose: var(--magenta);                         /* the old pink is gone */
  --f-marker: 'Lilita One', 'Arial Black', sans-serif; /* Permanent Marker is out */
  --f-comic: 'Anton', 'Archivo Black', Impact, sans-serif;
  --misreg: -3px 2px 0 var(--cyan), 3px -2px 0 var(--magenta);
  --bendots: radial-gradient(rgba(11,31,77,.55) 1.2px, transparent 1.7px) 0 0/7px 7px;
}
body { background: var(--nuit); background-image: radial-gradient(rgba(30,79,168,.55) 1.3px, transparent 1.8px); background-size: 7px 7px; }
#game { background: var(--nuit); }

/* menus: price tags with misregistered shadows */
.menu button, .pause-card button { font-family: var(--f-comic); letter-spacing: .04em; box-shadow: -3px 2px 0 var(--cyan), 3px -2px 0 var(--magenta), 6px 6px 0 var(--ink); }
.menu button.focus, .menu button:hover, .pause-card button.focus, .pause-card button:hover { background: var(--tomate); }
.back { font-family: var(--f-comic); letter-spacing: .05em; }

/* title: comic-cover background (fal.ai), menu on the calm left side */
.screen[data-screen="title"] { background: linear-gradient(90deg, rgba(11,31,77,.88) 0%, rgba(11,31,77,.55) 38%, rgba(11,31,77,0) 60%), url(../assets/fx/ui/menu_bg.webp) center/cover; flex-direction: row-reverse; justify-content: space-between; padding: 4vh 6vw; }
.screen[data-screen="title"]::after { content: ''; position: absolute; inset: 0; background: var(--bendots); mix-blend-mode: multiply; opacity: .35; pointer-events: none; }
.title-logo img { filter: drop-shadow(-4px 3px 0 var(--cyan)) drop-shadow(4px -3px 0 var(--magenta)) drop-shadow(8px 10px 0 rgba(0,0,0,.5)); animation: breathe2 1.6s steps(2) infinite; }
@keyframes breathe2 { 50% { transform: rotate(-2deg) scale(1.02); } }
.title-foot { font-family: var(--f-comic); letter-spacing: .06em; }
@media (max-width: 760px), (max-height: 520px) { .screen[data-screen="title"] { flex-direction: column; background-position: 70% center; } }

/* loading / select / vs: night print instead of pink */
.screen[data-screen="select"]::before, .screen[data-screen="loading"]::before { background: rgba(11,31,77,.62); }
.load-msg { font-family: var(--f-comic); letter-spacing: .05em; }
.load-fill { background: var(--yellow); }

/* VS: two comic issue covers slapped face to face (fal.ai covers, title typeset here) */
.vs-poster { border-width: 5px; box-shadow: -5px 4px 0 var(--cyan), 5px -4px 0 var(--magenta), 12px 12px 0 var(--ink); }
.vs-left { background: var(--bendots), var(--orange); }
.vs-right { background: var(--bendots), var(--green); }
.vs-poster img { object-fit: cover; filter: none; position: absolute; inset: 0; height: 100%; }
.ce-soir { position: absolute; top: 2.2%; left: 4%; right: 4%; margin: 0; transform: rotate(-2deg); font: clamp(1.4rem, 3.2vw, 2.6rem)/1 var(--f-comic); letter-spacing: .04em; text-align: center; background: var(--yellow); color: var(--ink); box-shadow: var(--misreg); }
.ce-soir::before { content: 'MAGA TAPÉ · N°1 · '; color: var(--tomate); }
.vs-name { position: absolute; bottom: 12%; left: 0; right: 0; text-align: center; font-family: var(--f-comic); letter-spacing: .03em; text-shadow: -4px 3px 0 var(--cyan), 4px -3px 0 var(--magenta), 7px 7px 0 var(--ink); }
.vs-q { position: absolute; bottom: 4%; left: 8%; font: 1.05rem var(--f-comic); letter-spacing: .05em; background: var(--paper); transform: rotate(-2deg); }
.vs-big { font-family: var(--f-comic); color: var(--yellow); text-shadow: -6px 4px 0 var(--cyan), 6px -4px 0 var(--magenta), 12px 12px 0 var(--ink); }
.go .vs-left { animation: slapL .5s steps(4, end) forwards; }
.go .vs-right { animation: slapR .5s .15s steps(4, end) forwards; }
.vs-band { font-family: var(--f-comic); letter-spacing: .06em; box-shadow: var(--misreg); }

/* HUD: gaffer bars with Ben-Day dots, ink frames, jagged timer bubble */
.hp-bar { border-width: 4px; background: var(--nuit); box-shadow: -3px 2px 0 var(--cyan), 3px -2px 0 var(--magenta), 5px 5px 0 var(--ink); }
.hp-fill { background: radial-gradient(rgba(17,17,17,.28) 1.3px, transparent 1.8px) 0 0/7px 7px, var(--team); }
.hp-trail { background: var(--tomate); opacity: .9; }
.hud-name { font-family: var(--f-comic); letter-spacing: .05em; box-shadow: var(--misreg); }
.hud-timer { background: var(--paper); aspect-ratio: 1; width: clamp(66px, 7.5vw, 98px); filter: drop-shadow(-3px 2px 0 var(--cyan)) drop-shadow(3px -2px 0 var(--magenta)) drop-shadow(4px 5px 0 var(--ink));
  clip-path: polygon(50% 0, 61% 14%, 79% 6%, 80% 24%, 98% 26%, 88% 42%, 100% 57%, 84% 64%, 90% 84%, 70% 82%, 60% 100%, 47% 86%, 30% 98%, 27% 80%, 6% 82%, 14% 64%, 0 50%, 14% 37%, 4% 18%, 24% 19%, 30% 2%, 43% 14%); }
.timer-num { font-family: var(--f-comic); font-size: clamp(1.6rem, 3.4vw, 2.7rem); }
.crowd span { font-family: var(--f-comic); letter-spacing: .06em; box-shadow: var(--misreg); }
.crowd-fill { background: radial-gradient(rgba(17,17,17,.25) 1.2px, transparent 1.7px) 0 0/6px 6px, linear-gradient(90deg, var(--orange), var(--yellow), var(--green)); }
.combo b { font-family: var(--f-comic); }

/* announcements: real type, ink stroke, misregistered plates, stamp on twos */
.sticker-announce { font-family: var(--f-comic); letter-spacing: .02em; text-shadow: -5px 4px 0 var(--cyan), 5px -4px 0 var(--magenta), 9px 9px 0 var(--ink); animation: stamp .3s steps(3, end); }
.sticker-announce small { font-family: var(--f-comic); letter-spacing: .06em; box-shadow: var(--misreg); }
.sticker-announce.ko { color: var(--tomate); font-size: clamp(5rem, 18vw, 13rem); }
.sticker-announce.perfect { color: var(--yellow); background: var(--paper); padding: .1em .35em; border: 6px solid var(--ink); box-shadow: -6px 5px 0 var(--cyan), 6px -5px 0 var(--magenta), 12px 12px 0 var(--ink); -webkit-text-stroke: 4px var(--ink); }
.sticker-announce.rageart { color: var(--tomate); }

/* Rage Art: comic split-screen cut-in (fal.ai panel) */
.rage-cut { position: absolute; left: -4%; right: -4%; top: 16%; height: 46%; opacity: 0; transform: translateX(-110%) rotate(-3deg); pointer-events: none;
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); border-top: 8px solid var(--ink); border-bottom: 8px solid var(--ink); background: var(--ink); }
.rage-cut img { width: 100%; height: 100%; object-fit: cover; }
.rage-cut b { position: absolute; right: 6%; bottom: 8%; font: clamp(2.4rem, 7vw, 5.4rem)/1 var(--f-comic); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: -5px 4px 0 var(--cyan), 5px -4px 0 var(--magenta), 8px 8px 0 var(--ink); transform: rotate(-4deg); }
.rage-cut.on { animation: cut 1.1s steps(1, end) forwards; }
@keyframes cut {
  0% { opacity: 1; transform: translateX(-60%) rotate(-3deg); }
  8% { transform: translateX(-12%) rotate(-3deg); }
  16% { transform: translateX(0) rotate(-3deg); }
  84% { opacity: 1; transform: translateX(0) rotate(-3deg); }
  92% { opacity: 1; transform: translateX(40%) rotate(-3deg); }
  100% { opacity: 0; transform: translateX(110%) rotate(-3deg); }
}

/* K.O.: frozen comic splash behind the big type */
.ko-splash { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 3deg at 50% 46%, transparent 0 5deg, rgba(17,17,17,.75) 5deg 6.2deg, transparent 6.2deg 9deg, rgba(224,48,30,.55) 9deg 10deg),
              radial-gradient(rgba(11,31,77,.5) 1.4px, transparent 2px) 0 0/8px 8px;
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 46%, transparent 38%, #000 75%); mask: radial-gradient(ellipse 60% 55% at 50% 46%, transparent 38%, #000 75%); }
.ko-splash.on { animation: kosplash 1.6s steps(1, end) forwards; }
@keyframes kosplash { 0% { opacity: 1; } 8% { opacity: .85; } 16% { opacity: .7; } 70% { opacity: .6; } 85% { opacity: .3; } 100% { opacity: 0; } }
.announce { z-index: 3; }
@keyframes stamp { 0% { transform: rotate(var(--tilt, -3deg)) scale(1.6); } 34% { transform: rotate(var(--tilt, -3deg)) scale(.92); } 67%, 100% { transform: rotate(var(--tilt, -3deg)) scale(1); } }

/* settings: ambiance toggle */
.amb button.on { background: var(--yellow); }

/* loading / select / VS backdrop: night sky print instead of the pink poster wall */
.screen[data-screen="loading"], .screen[data-screen="select"], .screen[data-screen="vs"] {
  background: radial-gradient(rgba(0,160,227,.35) 1.3px, transparent 1.8px) 0 0/8px 8px, linear-gradient(rgba(11,31,77,.35), rgba(11,31,77,.75)), url(../assets/fx/backdrops/night_sky.webp) center 70%/cover;
}
.ce-soir { font-size: clamp(1.1rem, 2.2vw, 1.9rem); white-space: nowrap; }
.vs-q { left: auto; right: 7%; }