@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@500;700;900&display=swap');

:root {
  --ink: #100e2d;
  --paper: #fff1d7;
  --rage-red: #c90d19;
  --ember: #ff4b1f;
  --lime: #d9ff3f;
  --cyan: #42d9ff;
  --pink: #ff5277;
  --yellow: #ffd83d;
  --panel: #201d48;
  --stroke: 3px solid var(--ink);
}

* { box-sizing: border-box; }

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 87, 26, .64), transparent 28rem),
    radial-gradient(circle at 88% 33%, rgba(217, 12, 25, .72), transparent 27rem),
    repeating-linear-gradient(115deg, rgba(255, 105, 34, .1) 0 12px, transparent 12px 52px),
    linear-gradient(180deg, #200205 0%, #5b0509 48%, #170103 100%);
  font-family: "DM Sans", sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  filter: blur(1px);
}
body::before {
  inset: auto 0 0;
  height: 48vh;
  opacity: .72;
  background:
    radial-gradient(ellipse at 8% 100%, #ff6a19 0 7%, #e31318 8% 15%, transparent 16%),
    radial-gradient(ellipse at 25% 110%, #ff9c20 0 8%, #eb1718 9% 19%, transparent 20%),
    radial-gradient(ellipse at 52% 105%, #ff6a19 0 9%, #d70b13 10% 22%, transparent 23%),
    radial-gradient(ellipse at 78% 112%, #ff9d22 0 7%, #e31318 8% 18%, transparent 19%),
    radial-gradient(ellipse at 96% 102%, #ff6a19 0 8%, #c90d19 9% 17%, transparent 18%);
}
body::after {
  inset: 0;
  opacity: .28;
  background: repeating-linear-gradient(105deg, transparent 0 105px, rgba(255, 119, 39, .32) 107px 110px, transparent 112px 190px);
}

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }

.app-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; min-height: 100vh; }
.topbar { height: 74px; display: flex; align-items: center; border-bottom: 2px solid rgba(255,241,215,.3); }
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; font: 24px/1 "Archivo Black", sans-serif; letter-spacing: -1px; text-shadow: 3px 3px 0 #6f0008; }
.brand-rage-icon { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.55)); }

.hero-copy { padding: 36px 0 25px; text-align: center; }
h1 { margin: 0; font: clamp(35px, 6vw, 70px)/.95 "Archivo Black", sans-serif; letter-spacing: -3px; }
h1 em { color: #ff5525; font-style: normal; text-shadow: 3px 3px 0 #5c0007; -webkit-text-stroke: 2px var(--ink); }

.game-card { position: relative; overflow: hidden; background: var(--ink); border: 4px solid var(--ink); border-radius: 24px; box-shadow: 9px 10px 0 rgba(16,14,45,.18); }
.roster-bar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 15px; color: white; background: var(--ink); }
.roster-bar > span { font-size: 10px; font-weight: 900; letter-spacing: 1.6px; }
.roster-buttons { display: flex; gap: 8px; }
.roster-button { padding: 8px 14px; color: white; background: #353064; border: 2px solid transparent; border-radius: 999px; font: 11px "Archivo Black", sans-serif; cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.roster-button:hover { transform: translateY(-2px); }
.roster-button.is-active { color: var(--ink); background: var(--lime); border-color: white; }
.stadium { position: relative; isolation: isolate; height: min(60vw, 570px); min-height: 430px; overflow: hidden; background: linear-gradient(#394b92 0 42%, #22346d 42% 56%, #53af67 56%); }
.stadium::before { content: ""; position: absolute; inset: 0; z-index: -5; opacity: .7; background: radial-gradient(circle at 50% 7%, #a7e8ff, transparent 25%), linear-gradient(#182455 0 45%, transparent 45%); }
.crowd { position: absolute; left: -5%; width: 110%; background-color: #201d48; background-image: radial-gradient(circle, #ffe05a 0 2px, transparent 3px), radial-gradient(circle, #ff6080 0 2px, transparent 3px), radial-gradient(circle, #70e7ff 0 2px, transparent 3px); background-size: 20px 18px, 24px 22px, 28px 20px; }
.crowd-back { top: 31%; height: 17%; transform: skewY(-1deg); opacity: .8; }
.crowd-front { top: 43%; height: 17%; background-color: #12102e; background-size: 16px 16px, 21px 18px, 24px 20px; border-top: 6px solid #ffc83d; }
.pitch { position: absolute; inset: 59% -15% -20%; background: repeating-linear-gradient(90deg, #4aa35d 0 90px, #5bb66b 90px 180px); transform: perspective(500px) rotateX(56deg); transform-origin: top; }
.pitch::after { content: ""; position: absolute; left: 50%; top: 0; width: 230px; height: 230px; border: 5px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%, -50%); }
.stadium.is-basketball { background: linear-gradient(#492c66 0 42%, #281947 42% 56%, #cf8d50 56%); }
.stadium.is-basketball .crowd-front { border-top-color: var(--pink); }
.stadium.is-basketball .pitch { background: repeating-linear-gradient(90deg, #c98243 0 70px, #d99551 70px 140px); }
.stadium.is-basketball .pitch::after { width: 210px; height: 210px; border-color: rgba(255,255,255,.82); }
.stadium.is-basketball .pitch::before { content: ""; position: absolute; left: 50%; top: -35px; width: 6px; height: 340px; background: rgba(255,255,255,.75); transform: translateX(-50%); }
.floodlight { position: absolute; top: 9%; width: 130px; height: 22px; z-index: -1; background: repeating-linear-gradient(90deg, white 0 13px, #b9e8ff 13px 20px); border: 3px solid var(--ink); box-shadow: 0 0 35px white; }
.floodlight::after { content: ""; position: absolute; top: 18px; left: 58px; width: 8px; height: 150px; background: var(--ink); }
.floodlight-left { left: 4%; transform: rotate(-7deg); }
.floodlight-right { right: 4%; transform: rotate(7deg); }

.character-wrap { position: absolute; z-index: 4; left: 50%; bottom: 1%; width: min(34%, 330px); height: 88%; transform: translateX(-50%); transform-origin: 50% 84%; }
.character-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(8px 9px 0 rgba(16,14,45,.45)); user-select: none; pointer-events: none; }
.character-wrap.is-switching { animation: character-enter .35s cubic-bezier(.2,.9,.2,1); }
.speech-bubble { position: absolute; z-index: 7; top: 12%; left: calc(50% + min(8vw, 85px)); display: flex; align-items: center; width: max-content; max-width: 330px; min-height: 94px; padding: 19px 27px 21px 21px; color: #d20d1b; background: white; border: var(--stroke); border-radius: 16px 16px 16px 3px; box-shadow: 5px 5px 0 var(--ink); font: 14px/1.34 "Archivo Black", sans-serif; white-space: normal; word-break: normal; overflow-wrap: break-word; text-wrap: pretty; transform: rotate(2deg); transition: opacity .2s, transform .2s; }
.speech-bubble[hidden] { display: none; }
.speech-bubble span { display: block; width: 100%; }

.tickles, .shock-lines, .ref-shout { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.tickles, .shock-lines { opacity: 0; }
.tickles span { position: absolute; top: 43%; font-size: clamp(72px, 7.5vw, 104px); filter: drop-shadow(3px 3px 0 white); transform-origin: 75% 75%; }
.tickles span:first-child { left: 1%; transform: rotate(58deg); }
.tickles span:last-child { right: 1%; transform: rotate(-58deg) scaleX(-1); }
.shock-lines i { position: absolute; left: 50%; top: 22%; width: 7px; height: 55px; background: var(--yellow); border: 2px solid var(--ink); transform-origin: 50% 135px; }
.shock-lines i:nth-child(1) { transform: rotate(-70deg); }.shock-lines i:nth-child(2) { transform: rotate(-35deg); }.shock-lines i:nth-child(3) { transform: rotate(35deg); }.shock-lines i:nth-child(4) { transform: rotate(70deg); }
.ref-shout { display: grid; place-items: center; opacity: 0; color: white; font: clamp(70px, 12vw, 150px)/1 "Archivo Black"; -webkit-text-stroke: 5px var(--ink); text-shadow: 9px 9px 0 var(--pink); }
.character-wrap.is-ronnie .ref-shout { font-size: clamp(44px, 6.7vw, 82px); white-space: nowrap; -webkit-text-stroke-width: 4px; text-shadow: 6px 6px 0 var(--pink); }

.character-wrap.is-tickle { animation: tickle .12s linear 12; }
.character-wrap.is-tickle .tickles { opacity: 1; }
.character-wrap.is-tickle .tickles span:first-child { animation: tickle-left .16s linear 9; }
.character-wrap.is-tickle .tickles span:last-child { animation: tickle-right .16s linear 9; }
.character-wrap.is-ref { animation: scared 1.55s ease-out; }
.character-wrap.is-ref .shock-lines { opacity: 1; animation: shock-pop 1.4s ease-out both; }
.character-wrap.is-ref .ref-shout { animation: shout-pop 1.35s ease-out both; }

@keyframes tickle { 0%,100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(2deg) translateY(-4px); } }
@keyframes tickle-left { 0%,100% { transform: rotate(58deg) translate(0); } 50% { transform: rotate(38deg) translate(22px, -12px); } }
@keyframes tickle-right { 0%,100% { transform: rotate(-58deg) scaleX(-1) translate(0); } 50% { transform: rotate(-38deg) scaleX(-1) translate(22px, -12px); } }
@keyframes scared { 0%,100% { transform: translateX(-50%); } 13% { transform: translateX(-50%) scale(.9,1.08) translateY(-25px); } 25% { transform: translateX(-50%) rotate(-3deg); } 38% { transform: translateX(-50%) rotate(3deg); } 52% { transform: translateX(-50%) rotate(-2deg); } }
@keyframes shock-pop { 0% { transform: scale(.2); opacity: 0; } 20%,70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes shout-pop { 0% { transform: scale(.25) rotate(-8deg); opacity: 0; } 25% { transform: scale(1.12) rotate(3deg); opacity: 1; } 70% { transform: scale(.98); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes character-enter { 0% { transform: translateX(-50%) scale(.65) translateY(60px); opacity: 0; } 70% { transform: translateX(-50%) scale(1.04); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

.control-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding-top: 4px; background: var(--ink); }
.action { min-height: 94px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 15px 18px; border: 0; color: var(--ink); text-align: left; cursor: pointer; transition: filter .15s, transform .15s; }
.action:hover { filter: brightness(1.08); transform: translateY(-3px); }
.action:active { transform: translateY(2px); }
.action-icon { display: grid; place-items: center; width: 48px; height: 48px; background: white; border: var(--stroke); border-radius: 50%; font-size: 27px; box-shadow: 4px 4px 0 var(--ink); }
.action small { display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; opacity: .7; }
.action strong { display: block; margin-top: 2px; font: clamp(13px, 1.7vw, 20px) "Archivo Black"; }
.tickle-action { background: var(--yellow); }.ref-action { background: var(--pink); }.revenge-action { color: white; background: #c6111d; }
.revenge-icon { color: white; background: #2b0509; border-color: white; font: 29px/1 system-ui, sans-serif; }
kbd { align-self: start; padding: 3px 6px; color: white; background: var(--ink); border-radius: 5px; font: 10px "DM Sans"; box-shadow: none; }

.revenge-layer { position: absolute; inset: 0; z-index: 20; display: none; overflow: hidden; background: linear-gradient(#27164f 0 48%, #46a85b 48%); }
.stadium.is-revenge .revenge-layer { display: block; }
.stadium.is-revenge.is-basketball .revenge-layer { background: linear-gradient(#35194c 0 48%, #cf8d50 48%); }
.soccer-goal { position: absolute; left: 50%; top: 7%; width: 55%; height: 58%; border: 9px solid white; border-bottom-width: 13px; transform: translateX(-50%); box-shadow: 0 7px 0 rgba(16,14,45,.35), inset 0 0 0 2px rgba(16,14,45,.2); background-image: linear-gradient(rgba(255,255,255,.55) 3px, transparent 3px), linear-gradient(90deg, rgba(255,255,255,.55) 3px, transparent 3px); background-size: 38px 38px; }
.soccer-goal i { position: absolute; inset: auto -13% -15% -13%; height: 19%; border: 7px solid white; border-top-width: 4px; transform: perspective(120px) rotateX(48deg); transform-origin: top; }
.basketball-hoop { position: absolute; display: none; left: 50%; top: 3%; width: 310px; height: 170px; border: 9px solid #f8fbff; border-radius: 8px; background: linear-gradient(145deg, rgba(205,232,255,.38), rgba(255,255,255,.08)); transform: translateX(-50%); box-shadow: 8px 8px 0 rgba(16,14,45,.35), inset 0 0 0 3px rgba(87,133,180,.36); }
.basketball-hoop i { position: absolute; left: 50%; bottom: 12px; width: 92px; height: 62px; border: 6px solid #f8fbff; transform: translateX(-50%); }
.basketball-hoop::before { content: ""; position: absolute; z-index: 2; left: 50%; bottom: -28px; width: 126px; height: 20px; border: 9px solid #ff5a22; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 5px 0 rgba(16,14,45,.28); }
.basketball-hoop::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -106px; width: 96px; height: 82px; border: 5px solid white; border-top: 0; background: repeating-linear-gradient(62deg, transparent 0 10px, rgba(255,255,255,.88) 11px 14px, transparent 15px 22px), repeating-linear-gradient(-62deg, transparent 0 10px, rgba(255,255,255,.72) 11px 14px, transparent 15px 22px); transform: translateX(-50%) perspective(100px) rotateX(-14deg); clip-path: polygon(0 0,100% 0,79% 100%,21% 100%); }
.stadium.is-basketball .soccer-goal { display: none; }
.stadium.is-basketball .basketball-hoop { display: block; }
.revenge-layer > img { position: absolute; z-index: 3; left: 54%; bottom: 4%; width: min(29%, 285px); height: 75%; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 74%; filter: drop-shadow(7px 8px 0 rgba(16,14,45,.42)); }
.stadium.is-basketball .revenge-layer > img { bottom: 1%; width: min(27%, 265px); height: 66%; }
.impact-burst { position: absolute; z-index: 7; left: 53%; top: 55%; opacity: 0; color: white; font: clamp(48px,7vw,88px)/1 "Archivo Black"; -webkit-text-stroke: 4px var(--ink); text-shadow: 6px 6px 0 #ff1f25; transform: translate(-50%,-50%) rotate(-8deg); }
.ball-cannon { position: absolute; z-index: 5; left: 6%; bottom: 13%; width: 145px; height: 100px; transform: rotate(-8deg); }
.cannon-barrel { position: absolute; left: 28px; top: 3px; width: 115px; height: 55px; background: linear-gradient(#4c5268,#17182a); border: 5px solid var(--ink); border-radius: 12px 42px 42px 12px; box-shadow: inset 0 9px 0 rgba(255,255,255,.12); }
.cannon-wheel { position: absolute; left: 5px; bottom: 0; width: 66px; height: 66px; background: #30344a; border: 7px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 8px #70778e; }
.revenge-ball { position: absolute; z-index: 8; left: 112px; top: 8px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: url("assets/soccer-ball.svg") center/contain no-repeat; filter: drop-shadow(3px 4px 0 rgba(16,14,45,.35)); }
.stadium.is-basketball .revenge-ball { background-image: url("assets/basketball.svg"); }
.revenge-layer.is-firing .revenge-ball { animation: cannon-shot .52s cubic-bezier(.2,.7,.35,1) forwards; }
.revenge-layer.is-hit > img { animation: revenge-hit-flash .72s ease-out; }
.revenge-layer.is-hit .impact-burst { animation: impact-pop .68s ease-out; }
.revenge-hud { position: absolute; z-index: 10; right: 18px; bottom: 18px; width: min(360px,45%); }
.power-meter { position: relative; display: block; width: 100%; height: 30px; overflow: hidden; padding: 0; background: linear-gradient(90deg,#e62938,#ffcf3e 32%,#ffcf3e 68%,#e62938); border: 3px solid white; border-radius: 7px; cursor: crosshair; }
.green-window { position: absolute; inset: 0 auto 0 43%; width: 14%; background: #36ee6d; box-shadow: inset 0 0 0 2px #087a30; }
.meter-marker { position: absolute; z-index: 2; top: -3px; left: 0; width: 8px; height: 30px; background: white; border: 2px solid var(--ink); box-shadow: 0 0 7px white; transform: translateX(-50%); }
@keyframes cannon-shot { to { transform: translate(var(--shot-x),var(--shot-y)) scale(.72) rotate(500deg); } }
@keyframes revenge-hit-flash { 0%,100% { filter: drop-shadow(7px 8px 0 rgba(16,14,45,.42)); transform: translateX(-50%); } 20%,55% { filter: sepia(1) saturate(10) hue-rotate(315deg) brightness(1.25) drop-shadow(0 0 16px #ff222e); transform: translateX(-50%) translateY(-8px) rotate(2deg); } 38%,72% { transform: translateX(-50%) translateY(3px) rotate(-2deg); } }
@keyframes impact-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-15deg); } 25%,65% { opacity: 1; transform: translate(-50%,-50%) scale(1.05) rotate(5deg); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4) rotate(-4deg); } }

footer { min-height: 92px; display: flex; align-items: center; color: rgba(255,241,215,.78); font-size: 12px; font-weight: 700; }

@media (max-width: 760px) {
  .app-shell { width: min(100% - 18px, 600px); }
  .topbar { height: 60px; }
  .hero-copy { padding: 25px 0 20px; }
  h1 { letter-spacing: -2px; }
  .game-card { border-radius: 17px; }
  .roster-bar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .roster-buttons { width: 100%; }
  .roster-button { flex: 1; }
  .stadium { height: 66vh; min-height: 430px; max-height: 590px; }
  .character-wrap { width: min(60%, 300px); height: 80%; }
  .speech-bubble { top: 9%; left: auto; right: 12px; max-width: min(250px, 67%); min-height: 88px; padding: 16px 20px 18px 17px; font-size: 12px; line-height: 1.38; }
  .control-deck { grid-template-columns: 1fr; }
  .action { min-height: 76px; }
  .action strong { font-size: 17px; }
  .action-icon { width: 44px; height: 44px; }
  footer { min-height: 68px; padding: 18px 0; }
  .revenge-layer > img { left: 57%; bottom: 21%; width: min(50%, 245px); height: 61%; }
  .soccer-goal { top: 5%; width: 82%; height: 48%; }
  .basketball-hoop { top: 5%; width: 220px; height: 120px; }
  .ball-cannon { left: -9px; bottom: 30%; transform: scale(.72) rotate(-8deg); transform-origin: left bottom; }
  .revenge-hud { right: 8px; bottom: 8px; width: calc(100% - 16px); }
  kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}