/* MAGA TAPÉ — Option C « Gbaka & Affiche »
   Street print culture: gbaka stickers, destination plates, fluo party posters. */
:root {
  --orange: #F26A1B;
  --green: #0F9D58;
  --yellow: #F5E400;
  --rose: #FF3C8E;
  --paper: #FAF7F0;
  --ink: #111111;
  --f-vinyl: 'Lilita One', 'Arial Black', sans-serif;
  --f-label: 'Archivo Black', 'Arial Black', sans-serif;
  --f-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-text: 'Work Sans', system-ui, sans-serif;
  --shadow: 6px 6px 0 var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rose);
  background-image: radial-gradient(rgba(0,0,0,.11) 1px, transparent 1.4px);
  background-size: 7px 7px;
  color: var(--ink);
  font: 400 17px/1.55 var(--f-text);
  overflow-x: hidden;
}
body.playing { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd {
  display: inline-block; min-width: 1.7em; padding: 0 .4em; text-align: center;
  font: 700 .82em/1.6 var(--f-label); background: var(--paper); border: 2px solid var(--ink);
  border-radius: 4px; box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- reusable print pieces */
.label {
  display: inline-block; font: 1.05rem/1 var(--f-marker); letter-spacing: .04em;
  background: var(--paper); border: 3px solid var(--ink); padding: .5rem .9rem;
  transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--ink); margin: 0 0 1.6rem;
}
.vinyl {
  font: 400 clamp(2rem, 5vw, 3.4rem)/1 var(--f-vinyl); color: var(--orange); margin: 0 0 1rem;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--paper), 7px 7px 0 var(--ink); letter-spacing: .01em;
}
.plate {
  display: inline-block; margin: 0 0 1rem; padding: .35rem .8rem; font: 1rem/1 var(--f-label);
  background: var(--yellow); border: 2px solid var(--ink); transform: rotate(-1deg);
}
.paper {
  background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 1.4rem 1.5rem;
}
.marker { font-family: var(--f-marker); font-size: 1.25rem; color: var(--green); }
.tape {
  position: absolute; width: 120px; height: 34px; z-index: 3; pointer-events: none;
  background: url(../assets/ui/tape.webp) center/100% 100%; opacity: .92; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.25));
}
.btn-sticker {
  position: relative; border: 3px solid var(--ink); background: var(--orange); color: var(--paper);
  font: 1.35rem/1 var(--f-vinyl); letter-spacing: .03em; padding: .85rem 1.4rem; border-radius: 14px;
  box-shadow: 0 0 0 4px var(--paper), 6px 7px 0 4px var(--ink); transform: rotate(-1.5deg);
  -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; transition: transform .12s, box-shadow .12s;
}
.btn-sticker:hover, .btn-sticker:focus-visible { transform: rotate(0) translateY(-2px) scale(1.03); }
.btn-sticker:active { transform: translate(3px, 3px); box-shadow: 0 0 0 4px var(--paper), 2px 3px 0 4px var(--ink); }
.btn-sticker.green { background: var(--green); transform: rotate(1.2deg); }
.btn-sticker.small { font-size: 1.05rem; padding: .6rem 1rem; }

/* ---------- header */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem clamp(16px, 4vw, 48px); background: var(--ink); color: var(--paper);
  border-bottom: 4px solid var(--yellow);
}
.top-logo img { height: 46px; width: auto; }
.top nav { display: flex; gap: 1.4rem; margin-right: auto; }
.top nav a { color: var(--paper); text-decoration: none; font: .95rem var(--f-label); }
.top nav a:hover { color: var(--yellow); }
@media (max-width: 760px) { .top nav { display: none; } .top { justify-content: space-between; } }

/* ---------- hero */
.hero {
  position: relative; min-height: min(92vh, 900px); display: grid;
  grid-template-columns: 1.25fr 1fr; align-items: center; gap: 2rem;
  padding: clamp(24px, 5vw, 70px) clamp(16px, 4vw, 56px); overflow: hidden;
}
.hero-wall {
  position: absolute; inset: 0; background: url(../assets/ui/posterwall.webp) center/cover;
  opacity: .55; mix-blend-mode: multiply;
}
.hero-poster {
  position: relative; z-index: 1; background: var(--paper); padding: 12px; border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink); transform: rotate(-2.2deg);
}
.hero-poster img { width: 100%; height: auto; }
.hero-poster .t1 { top: -16px; left: 8%; transform: rotate(-8deg); }
.hero-poster .t2 { top: -12px; right: 10%; transform: rotate(6deg); }
.hero-poster .t3 { bottom: -14px; left: 45%; transform: rotate(-3deg); }
.hero-copy { position: relative; z-index: 2; }
.band {
  display: inline-block; font: clamp(1.1rem, 2.4vw, 1.6rem)/1 var(--f-label); background: var(--yellow);
  border: 3px solid var(--ink); padding: .55rem .9rem; transform: rotate(-3deg); margin: 0 0 -.4rem 1rem;
  position: relative; z-index: 2; box-shadow: 4px 4px 0 var(--ink);
}
.hero h1 { margin: 0; }
.hero-logo { width: min(560px, 100%); filter: drop-shadow(6px 8px 0 rgba(0,0,0,.35)); transform: rotate(-2deg); }
.slip {
  display: inline-block; background: var(--paper); border: 3px solid var(--ink); padding: .8rem 1rem;
  font: 1.15rem/1.35 var(--f-marker); transform: rotate(1deg); max-width: 34rem; box-shadow: 5px 5px 0 var(--ink);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.8rem 0 1.2rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.chips li { background: var(--ink); color: var(--paper); font: .8rem var(--f-label); padding: .35rem .7rem; transform: rotate(-1deg); }
.badge-100 {
  position: absolute; width: 130px; right: 4%; top: 6%; z-index: 2; transform: rotate(12deg);
  animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble { 50% { transform: rotate(4deg) scale(1.06); } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .badge-100 { width: 80px; top: auto; bottom: 3%; }
}

/* ---------- sections */
main > section:not(.hero) { padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 56px); max-width: 1280px; margin: 0 auto; }
.story-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.poster { position: relative; margin: 0; background: var(--paper); border: 3px solid var(--ink); padding: 10px; box-shadow: var(--shadow); }
.poster figcaption { font: .9rem var(--f-marker); padding-top: .5rem; }
.poster .t1 { top: -14px; left: 40%; transform: rotate(-5deg); }
.tilt-r { transform: rotate(2deg); }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }

.fighter-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; }
.fighter-card {
  position: relative; background: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
  padding: 1.2rem 1.4rem 1.6rem; transform: rotate(-1.4deg);
}
.fighter-card.green { transform: rotate(1.4deg); box-shadow: 10px 10px 0 var(--green); }
.fighter-card.orange { box-shadow: 10px 10px 0 var(--orange); }
.fc-art {
  height: 420px; margin: -1.2rem -1.4rem 1rem; border-bottom: 3px solid var(--ink); overflow: hidden;
  background: radial-gradient(rgba(0,0,0,.18) 1.2px, transparent 1.6px) 0 0/8px 8px, var(--yellow);
  display: grid; place-items: end center;
}
.green .fc-art { background-color: #8af0b8; }
.orange .fc-art { background-color: #ffb27a; }
.fc-art img { height: 104%; width: auto; filter: contrast(1.15) saturate(1.1) drop-shadow(0 0 0 var(--paper)) drop-shadow(6px 0 0 var(--paper)) drop-shadow(-6px 0 0 var(--paper)); }
.fc-badge { position: absolute; width: 74px; top: 300px; right: 14px; transform: rotate(10deg); }
.fc-name {
  margin: 0; font: 2.6rem/1 var(--f-vinyl); color: var(--paper); -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
}
.orange .fc-name { color: var(--orange); }
.green .fc-name { color: var(--green); }
.fc-q { font: 1rem var(--f-marker); margin: .3rem 0 .6rem; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: 1rem 0 0; font: .82rem var(--f-label); }
.stats dd { margin: 0; height: 16px; border: 2px solid var(--ink); background: #fff; }
.stats dd i { display: block; height: 100%; width: calc(var(--v) * 100%); background: currentColor; }
.orange .stats dd i { background: var(--orange); }
.green .stats dd i { background: var(--green); }
.vs-mark {
  font: 5rem/1 var(--f-vinyl); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink); transform: rotate(-8deg);
}
@media (max-width: 900px) { .fighter-grid { grid-template-columns: 1fr; } .vs-mark { text-align: center; } }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; }
.mode-card {
  text-align: left; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: 1.1rem 1.2rem; transition: transform .12s; display: flex; flex-direction: column; gap: .4rem;
}
.mode-card:nth-child(odd) { transform: rotate(-1deg); }
.mode-card:nth-child(even) { transform: rotate(1.2deg); }
.mode-card:hover { transform: translateY(-4px) rotate(0); }
.mode-card b { font: 1.7rem/1 var(--f-vinyl); color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.mode-card.hot { background: var(--yellow); }
.mode-card.hot b { color: var(--green); }
.mode-card span { font-size: .95rem; }

.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.rule { background: var(--ink); color: var(--paper); padding: 1.1rem 1.2rem; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--paper); }
.rule h4 { margin: 0 0 .5rem; font: 1rem var(--f-label); display: inline-block; background: var(--yellow); color: var(--ink); padding: .2rem .5rem; }
.rule.hot { background: var(--green); }
.rule p { margin: 0; font-size: .95rem; }

.ctrl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.ctrl-grid table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.ctrl-grid td { padding: .35rem .2rem; border-bottom: 1px dashed rgba(0,0,0,.25); vertical-align: top; }
.ctrl-grid td:first-child { white-space: nowrap; padding-right: .8rem; }
.movelist-site, .movelist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .4rem 1.2rem; }
.movelist-site li, .movelist li { display: flex; gap: .7rem; align-items: baseline; font-size: .93rem; }
.movelist-site kbd, .movelist kbd { white-space: nowrap; }

.foot { background: var(--ink); color: var(--paper); padding: 2rem clamp(16px, 4vw, 56px); text-align: center; border-top: 4px solid var(--yellow); }
.foot p { margin: .3rem 0; font-size: .9rem; }
.foot b { font-family: var(--f-vinyl); color: var(--orange); font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) { .badge-100 { animation: none; } html { scroll-behavior: auto; } }

.fc-art video { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.fc-badge { top: 340px; }