:root {
  --bg-dark: #03173f;
  --panel: rgba(7, 32, 82, 0.88);
  --panel-border: rgba(255,255,255,0.22);
  --gold: #ffd85a;
  --gold-strong: #ffbf00;
  --white: #ffffff;
  --red: #ec3a33;
  --shadow: 0 14px 34px rgba(0,0,0,0.34);
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--white);
  background:
    radial-gradient(circle at 50% -12%, rgba(85,144,255,.38), transparent 44%),
    linear-gradient(180deg, #082469 0%, #071a4c 45%, #091739 100%);
}
button { font: inherit; }
.game-shell { min-height: 100%; max-width: 560px; margin: 0 auto; padding: calc(var(--safe-top) + 12px) 16px 18px; position: relative; overflow: hidden; }
.top-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.circle-btn { width:60px; height:60px; border-radius:18px; border:2px solid rgba(255,255,255,.35); background:linear-gradient(180deg, rgba(12,64,148,.95), rgba(6,28,78,.98)); color:#fff; font-size:34px; box-shadow:var(--shadow); }
.title-wrap { position:relative; text-align:center; padding:0 8px 8px; }
.title-ribbon { position:absolute; left:50%; top:22px; width:92%; height:18px; transform:translateX(-50%); background:linear-gradient(90deg, transparent 0, transparent 8%, #f43f33 8%, #ffffff 18%, #f43f33 28%, transparent 28%, transparent 72%, #f43f33 72%, #ffffff 82%, #f43f33 92%, transparent 92%); opacity:.95; filter:drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.game-title { margin:0; line-height:.85; letter-spacing:.5px; text-transform:uppercase; position:relative; z-index:1; }
.game-title .line1,.game-title .line2,.game-title .line3 { display:block; }
.game-title .line1 { font-size:60px; font-weight:900; color:#ffbf00; text-shadow:0 4px 0 #915800, 0 10px 20px rgba(0,0,0,.35); }
.game-title .line2 { margin-top:8px; font-size:28px; font-weight:900; color:#fff; text-shadow:0 4px 0 #0b317e, 0 8px 15px rgba(0,0,0,.3); }
.game-title .line3 { margin-top:4px; font-size:52px; font-weight:900; color:#ecf3ff; text-shadow:0 4px 0 #2b4b8b, 0 10px 20px rgba(0,0,0,.35); }
.title-ball { font-size:.8em; }
.hud-row { margin-top:8px; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
.hud-card { background:var(--panel); border:2px solid var(--panel-border); border-radius:22px; padding:14px 14px 16px; box-shadow:var(--shadow); min-height:102px; }
.hud-label { display:block; font-size:14px; font-weight:900; letter-spacing:.8px; opacity:.95; }
.score-value { margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; }
.score-value strong { font-size:34px; font-weight:900; }
.star { font-size:30px; }
.remaining-shots { margin-top:12px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.shot-indicator { width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #fff, #ddd 62%, #b9c0c9 100%); box-shadow:inset 0 0 0 2px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.28); position:relative; }
.shot-indicator::before { content:""; position:absolute; inset:6px; border-radius:50%; background:rgba(0,0,0,.72); clip-path:polygon(50% 0%, 95% 35%, 78% 92%, 22% 92%, 5% 35%); }
.shot-indicator.off { opacity:0.18; }
.vs-badge { width:96px; height:112px; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.vs-top { background:linear-gradient(180deg, #ff5b4f, #d01715); border:2px solid rgba(255,255,255,.45); border-radius:14px; padding:3px 12px; font-size:24px; font-weight:900; margin-bottom:-8px; z-index:2; }
.lion-mini { width:88px; height:88px; border-radius:50%; border:4px solid rgba(255,255,255,.35); background:url('assets/leoncito-keeper-v7.png') center 18% / cover no-repeat, linear-gradient(180deg, #3e8fff, #123672); }
.status-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px; }
.status-pill { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:10px 12px; text-align:center; font-weight:700; box-shadow:var(--shadow); font-size:14px; }
.status-pill strong { color:#ffe26d; display:block; margin-top:3px; font-size:16px; }
.panel-title { font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.8px; opacity:.92; margin-bottom:8px; }
.tournament-panel,.prizes-panel, .ranking-panel { margin-top:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:12px 14px; box-shadow:var(--shadow); }
.tournament-track { display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; }
.t-node { position:relative; min-height:72px; border-radius:18px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px 4px; }
.t-node .short { font-size:12px; opacity:.88; font-weight:800; }
.t-node .icon { font-size:20px; margin-bottom:4px; }
.t-node.active { outline:2px solid #ffe26d; background:linear-gradient(180deg, rgba(255,214,92,.22), rgba(255,255,255,.04)); }
.t-node.success { background:linear-gradient(180deg, rgba(99,229,96,.34), rgba(255,255,255,.04)); }
.t-node.fail { background:linear-gradient(180deg, rgba(255,78,66,.32), rgba(255,255,255,.04)); }
.stadium-stage { position:relative; margin-top:12px; height:820px; border-radius:36px; overflow:hidden; background: linear-gradient(180deg, rgba(6,14,38,.18), rgba(6,14,38,.06) 22%, rgba(7,18,30,.06) 40%, rgba(8,18,24,.08) 100%), url('assets/stadium-bg-v16.png') center center / cover no-repeat; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 22px 48px rgba(0,0,0,.36); transition: transform 220ms ease, filter 220ms ease; transform-origin:center 58%; }
.stadium-stage.shot-zoom { transform: scale(1.018); filter: saturate(1.04) contrast(1.02); }
.stadium-stage::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 8%, rgba(255,255,255,.18), transparent 16%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%); pointer-events:none; }
.stadium-stage::after { content:""; position:absolute; left:-4%; right:-4%; bottom:-30px; height:50%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%), radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 10%); clip-path: ellipse(76% 100% at 50% 100%); opacity:.28; pointer-events:none; }
.crowd { position:absolute; top:104px; width:40%; height:166px; opacity:.95; filter:blur(1.5px); background: radial-gradient(circle at 12% 72%, rgba(255,255,255,.35) 0 3px, transparent 4px), radial-gradient(circle at 24% 36%, rgba(255,0,0,.5) 0 4px, transparent 5px), radial-gradient(circle at 42% 68%, rgba(255,255,255,.4) 0 2px, transparent 3px), radial-gradient(circle at 59% 41%, rgba(255,0,0,.55) 0 5px, transparent 6px), radial-gradient(circle at 74% 74%, rgba(255,255,255,.35) 0 3px, transparent 4px), linear-gradient(180deg, rgba(20,28,57,.0), rgba(16,21,48,.75)); }
.crowd-left, .crowd-right { display:none; }
.light { position:absolute; top:24px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(255,255,255,.35) 21% 55%, transparent 56%); filter:blur(1px) drop-shadow(0 0 24px rgba(255,255,255,.78)); opacity:.95; }
.light::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 50% 20%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 80% 20%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 20% 50%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 80% 50%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 20% 80%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 50% 80%, rgba(255,255,255,.98) 0 6px, transparent 7px), radial-gradient(circle at 80% 80%, rgba(255,255,255,.98) 0 6px, transparent 7px); }
.light-left { left:-14px; } .light-right { right:-14px; }

.goal-stands {
  position:absolute;
  left:50%;
  top:104px;
  width:102%;
  height:180px;
  opacity:.56;
  transform:translateX(-50%);
  z-index:0;
  border-radius:0 0 30px 30px;
  background:
    linear-gradient(180deg, rgba(15,34,95,.25), rgba(6,16,50,.62)),
    radial-gradient(circle at 8% 56%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 14% 38%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 60%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 42%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 62%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 44%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 58%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 40%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 60%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 42%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 59%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 41%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 44%, rgba(255,77,66,.88) 0 2px, transparent 3px),
    linear-gradient(180deg, #284684 0 18%, #213b6d 18% 34%, #192f59 34% 50%, #122646 50% 66%, #0b1e39 66% 100%);
  box-shadow: inset 0 -12px 24px rgba(0,0,0,.22);
  overflow:hidden;
}
.goal-stands::before {
  content:'';
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(180deg, transparent 0 18px, rgba(255,255,255,.06) 18px 19px), linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%);
  opacity:.72;
}
.goal-stands::after {
  content:'';
  position:absolute;
  left:0; right:0; top:0; height:28px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)), repeating-linear-gradient(90deg, #c92720 0 24px, #ffffff 24px 46px);
  opacity:.92;
}
.goal-banners {
  position:absolute;
  left:50%;
  top:252px;
  transform:translateX(-50%);
  width:88%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  z-index:1;
}
.goal-banners span {
  text-align:center;
  font-size:13px;
  backdrop-filter: blur(1px);
  font-weight:900;
  color:#fff;
  letter-spacing:.7px;
  background:linear-gradient(180deg, rgba(198,35,28,.96), rgba(128,18,13,.96));
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  padding:5px 8px;
  box-shadow:0 6px 12px rgba(0,0,0,.22);
}
.goal { z-index:2; }
.swipe-overlay, .aim-target, .ball-wrap, .gesture-hint, .message-pill, .goal-burst, .save-burst, .confetti-layer { z-index:5; }

.goal { position:absolute; left:50%; top:236px; width:64%; height:194px; transform:translateX(-50%); border:8px solid #f8fbff; border-bottom-width:5px; border-radius:5px; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03)); box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 -8px 14px rgba(0,0,0,.13); }
.goal::before, .goal::after { content:""; position:absolute; top:6px; bottom:-1px; width:17px; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.03)); border:3px solid rgba(244,248,255,.92); border-left:0; box-shadow: inset -6px 0 12px rgba(0,0,0,.12); }
.goal::before { right:-13px; transform:skewY(-6deg); }
.goal::after { left:-13px; transform:skewY(6deg); border-right:0; border-left:3px solid rgba(244,248,255,.92); box-shadow: inset 6px 0 12px rgba(0,0,0,.12); }
.net { position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.78) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.72) 1px, transparent 1px); background-size:11px 11px; opacity:.84; filter: drop-shadow(0 2px 1px rgba(255,255,255,.10)); overflow:visible; }
.net::before { content:""; position:absolute; left:8px; right:8px; top:-12px; height:42px; border:1px solid rgba(255,255,255,.42); border-bottom:0; background: linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.24) 1px, transparent 1px); background-size:11px 11px; transform-origin:top center; transform: perspective(210px) rotateX(68deg); opacity:.54; }
.net::after { content:""; position:absolute; left:12px; right:12px; bottom:-12px; height:36px; border:1px solid rgba(255,255,255,.28); border-top:0; background: linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size:11px 11px; transform-origin:bottom center; transform: perspective(200px) rotateX(-72deg); opacity:.40; }
.keeper { position:absolute; left:50%; bottom:-2px; width:144px; height:214px; transform:translateX(-50%); transform-origin:center bottom; filter:drop-shadow(0 6px 14px rgba(0,0,0,.34)); transition: transform 640ms cubic-bezier(.18,.77,.21,1), left 640ms cubic-bezier(.18,.77,.21,1), bottom 640ms cubic-bezier(.18,.77,.21,1); }
.keeper img { width:100%; height:100%; object-fit:contain; }
.keeper.idle { animation:keeperIdle 1.8s ease-in-out infinite; }
.keeper.prep { animation:keeperReady .28s ease-in-out 1; }
.keeper.shake { animation:keeperShake .36s ease-in-out 1; }
.keeper.dive-left { left:34%; transform:translateX(-50%) rotate(-15deg) scale(1.02); }
.keeper.dive-right { left:66%; transform:translateX(-50%) rotate(15deg) scale(1.02); }
.keeper.dive-center { left:50%; transform:translateX(-50%) scale(1.04); bottom:5px; }
.keeper.dive-top-left { left:35%; bottom:26px; transform:translateX(-50%) rotate(-10deg) scale(.80); }
.keeper.dive-top-right { left:65%; bottom:26px; transform:translateX(-50%) rotate(10deg) scale(.80); }
@keyframes keeperIdle { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-10px) scale(1.02);} }
@keyframes keeperReady { 0%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) translateY(6px) scale(0.97,1.02);} 100%{transform:translateX(-50%) scale(1);} }
@keyframes keeperShake { 0%,100%{transform:translateX(-50%);} 25%{transform:translateX(calc(-50% - 8px));} 75%{transform:translateX(calc(-50% + 8px));} }
.ball-wrap { position:absolute; left:50%; bottom:136px; width:108px; height:108px; margin-left:-54px; z-index:6; touch-action:none; }
.ball-shadow { position:absolute; left:12%; right:12%; bottom:4px; height:22px; border-radius:50%; background:radial-gradient(circle, rgba(0,0,0,.42), rgba(0,0,0,0)); filter:blur(6px); transform-origin:center; }
.ball { width:100%; height:100%; user-select:none; -webkit-user-drag:none; cursor:grab; filter:drop-shadow(0 18px 26px rgba(0,0,0,.36)); }
.ball.dragging { cursor:grabbing; }
.gesture-hint { position:absolute; right:18px; bottom:196px; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:8px 11px; border-radius:20px; backdrop-filter:blur(3px); font-weight:700; }
.hint-ball { width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(255,231,107,.35); }
.hint-arrow { font-weight:900; color:#ffe26b; }
.swipe-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
.aim-target { position:absolute; width:60px; height:60px; border-radius:50%; border:5px solid rgba(255,234,119,.95); box-shadow:0 0 0 8px rgba(255,234,119,.2), 0 0 26px rgba(255,234,119,.85); pointer-events:none; z-index:4; }
.message-pill { position:absolute; left:50%; bottom:78px; width:calc(100% - 32px); transform:translateX(-50%); text-align:center; background:rgba(5,12,31,.58); border:2px solid rgba(255,255,255,.16); border-radius:999px; padding:14px 16px; font-weight:800; font-size:18px; backdrop-filter:blur(5px); box-shadow:var(--shadow); z-index:7; }
.goal-burst,.save-burst { position:absolute; left:50%; top:146px; transform:translateX(-50%) scale(.92); padding:12px 24px; border-radius:999px; font-size:40px; font-weight:900; text-shadow:0 4px 12px rgba(0,0,0,.45); box-shadow:0 18px 36px rgba(0,0,0,.25); z-index:9; animation:burstIn .45s ease forwards; }
.goal-burst { background:linear-gradient(180deg, #ffde6b, #ffb600); color:#603400; }
.save-burst { background:linear-gradient(180deg, #83d6ff, #1d7bf8); color:#fff; }
@keyframes burstIn { from{opacity:0; transform:translateX(-50%) scale(.6);} to{opacity:1; transform:translateX(-50%) scale(1);} }
.confetti-layer { position:absolute; inset:0; pointer-events:none; z-index:8; overflow:hidden; }
.confetti { position:absolute; width:10px; height:18px; opacity:.95; animation:confettiFall 900ms linear forwards; }
@keyframes confettiFall { 0%{ transform:translateY(-10px) rotate(0); opacity:1;} 100%{ transform:translateY(180px) rotate(540deg); opacity:0;} }
.bottom-bar { display:grid; grid-template-columns:120px 1fr 120px; gap:12px; margin-top:16px; align-items:end; }
.feature-card { border:2px solid rgba(255,255,255,.26); background:linear-gradient(180deg, rgba(8,60,138,.94), rgba(3,29,84,.98)); color:#ffe56f; border-radius:24px; min-height:120px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.feature-icon { font-size:42px; }
.feature-label { font-size:16px; font-weight:900; }
.feature-card strong { font-size:28px; color:#fff; }
.instruction-panel { min-height:126px; border-radius:40px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:rgba(0,0,0,.26); border:2px solid rgba(255,255,255,.18); box-shadow:var(--shadow); padding:10px 18px; }
.instruction-small { font-size:24px; font-weight:900; }
.instruction-big { font-size:34px; font-weight:900; color:var(--gold-strong); text-shadow:0 3px 0 #926300; }
.instruction-sub { font-size:14px; opacity:.88; margin-top:4px; }
.prize-list { display:flex; flex-wrap:wrap; gap:8px; }
.prize-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:8px 12px; font-size:14px; font-weight:800; }
.prize-empty { opacity:.72; font-size:14px; }

.ranking-list { display:flex; flex-direction:column; gap:8px; }
.ranking-item { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:10px 12px; }
.ranking-pos { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,214,92,.2); color:#ffe26d; font-weight:900; }
.ranking-meta { display:flex; flex-direction:column; gap:2px; }
.ranking-meta strong { font-size:14px; }
.ranking-meta span { font-size:12px; opacity:.8; }
.ranking-score { font-size:18px; font-weight:900; color:#fff; }
.ranking-empty { opacity:.72; font-size:14px; }

.footer-stats { margin-top:12px; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.mini-stat { border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:12px 14px; text-align:center; }
.mini-stat span { display:block; font-size:14px; opacity:.85; } .mini-stat strong { display:block; margin-top:4px; font-size:28px; }
.intro-modal,.result-modal { position:fixed; inset:0; background:rgba(4,10,25,.76); display:flex; align-items:center; justify-content:center; padding:18px; z-index:30; overflow-y:auto; -webkit-overflow-scrolling: touch; }
.intro-modal { background: linear-gradient(180deg, rgba(6,15,45,.30), rgba(4,10,25,.84)), url('assets/mockup-referencia.png') center center / cover no-repeat; }
.intro-card,.result-card { width:min(92vw, 480px); background:linear-gradient(180deg, rgba(10,63,150,.95), rgba(5,33,94,.95)); border:2px solid rgba(255,255,255,.25); border-radius:26px; padding:24px 22px; text-align:center; box-shadow:0 18px 40px rgba(0,0,0,.45); max-height:calc(100vh - 36px); overflow-y:auto; }
.intro-card { position:relative; overflow:hidden; backdrop-filter: blur(2px); }
.intro-hero { height:154px; margin:-24px -22px 16px; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(3,11,35,.3)), url('assets/mockup-referencia.png') center 18% / cover no-repeat; border-bottom:1px solid rgba(255,255,255,.16); }
.intro-badge { display:inline-block; background:linear-gradient(180deg,#ffd65c,#ffb900); color:#603400; font-weight:900; border-radius:999px; padding:8px 16px; margin-bottom:12px; box-shadow:0 6px 18px rgba(0,0,0,.22); }
.intro-card h2,.result-card h2 { margin:0 0 10px; font-size:34px; }
.intro-card p,.result-card p { margin:0; font-size:19px; line-height:1.45; }
.difficulty-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.difficulty-option { border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; border-radius:18px; padding:14px 10px; text-align:center; }
.difficulty-option strong { display:block; font-size:18px; }
.difficulty-option span { display:block; margin-top:4px; font-size:12px; opacity:.84; }
.difficulty-option.selected { border-color:#ffe26d; background:rgba(255,214,92,.18); box-shadow:0 0 0 2px rgba(255,214,92,.22); }
.intro-features { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; text-align:left; font-size:14px; }
.start-btn { margin-top:20px; border:0; border-radius:18px; padding:16px; font-size:20px; font-weight:900; width:100%; background:linear-gradient(180deg, #ffd65c, #ffb900); color:#603400; }
.reward-box { margin-top:16px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); padding:14px; }
.reward-box.compact { margin-top:10px; }
.reward-label { display:block; font-size:14px; letter-spacing:.5px; opacity:.9; } .reward-box strong { display:block; font-size:24px; color:#ffe26d; margin-top:4px; }
.result-actions { margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.result-actions button { border:0; border-radius:18px; padding:14px 16px; font-size:18px; font-weight:900; }
.result-actions .primary { background:linear-gradient(180deg, #ffd65c, #ffb900); color:#603400; } .result-actions .secondary { background:rgba(255,255,255,.16); color:#fff; }
.hidden { display:none !important; }
@media (max-width:560px) {
  .game-shell{padding-left:12px;padding-right:12px;} .circle-btn{width:52px;height:52px;font-size:28px;} .game-title .line1{font-size:50px;} .game-title .line2{font-size:24px;} .game-title .line3{font-size:42px;} .hud-card{min-height:92px;padding:12px;} .score-value strong{font-size:28px;} .vs-badge{width:84px;} .status-row{grid-template-columns:1fr; gap:8px;} .stadium-stage{height:720px;} .goal{top:218px;width:66%;height:158px;} .goal::before,.goal::after{width:13px;} .keeper{width:112px;height:166px;bottom:-1px;} .ball-wrap{width:88px;height:88px;margin-left:-44px;bottom:132px;} .message-pill{bottom:66px;font-size:15px;} .goal-burst,.save-burst{font-size:31px;} .instruction-small{font-size:19px;} .instruction-big{font-size:28px;} .bottom-bar{grid-template-columns:108px 1fr 108px;} .difficulty-selector{grid-template-columns:1fr;} .intro-features{grid-template-columns:1fr;} }
@media (max-width:440px) {
  .game-title .line1{font-size:44px;} .game-title .line2{font-size:22px;} .game-title .line3{font-size:36px;} .hud-row{grid-template-columns:1fr auto 1fr;gap:8px;} .hud-label{font-size:12px;} .score-value strong{font-size:24px;} .score-value{gap:6px;} .stadium-stage{height:660px;} .goal{top:202px;width:68%;height:142px;} .keeper{width:96px;height:144px;bottom:0;} .ball-wrap{width:78px;height:78px;margin-left:-39px;bottom:130px;} .gesture-hint{right:14px;bottom:184px;font-size:10px;padding:7px 9px;} .bottom-bar{grid-template-columns:94px 1fr 94px;gap:8px;} .feature-card{min-height:104px;} .feature-icon{font-size:34px;} .feature-card strong{font-size:22px;} .instruction-panel{min-height:114px;} .tournament-track{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px;} .t-node{min-height:64px;} }

.intro-card h2 { margin-top:0; font-size:32px; }
.intro-card p { font-size:17px; line-height:1.4; margin-bottom:0; }
.intro-card::-webkit-scrollbar { width: 8px; }
.intro-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }

@media (max-width: 560px) { .intro-modal { align-items: flex-start; padding: 10px 10px max(14px, env(safe-area-inset-bottom)); } .intro-card { width: 100%; max-height: none; min-height: auto; } .intro-hero { height: 128px; margin:-24px -22px 14px; } .intro-card h2 { font-size: 28px; } .intro-card p { font-size: 15px; } .start-btn { position: sticky; bottom: 0; } }
@media (max-width: 440px) { .intro-modal { padding: 8px 8px max(12px, env(safe-area-inset-bottom)); } .intro-card { padding: 20px 16px; border-radius: 22px; } .intro-hero { height: 108px; margin:-20px -16px 12px; } .difficulty-selector { gap:8px; } .difficulty-option { padding: 12px 10px; } }

@media (max-width:560px){ .goal-stands{top:104px;height:152px;width:106%;} .goal-banners{top:222px;width:80%;gap:5px;} .goal-banners span{font-size:9px;padding:4px 6px;} }
@media (max-width:440px){ .goal-stands{top:100px;height:136px;width:106%;} .goal-banners{top:206px;width:78%;} .goal-banners span{font-size:8px;padding:4px 5px;} }

.stadium-stage .message-pill{backdrop-filter: blur(6px);}
.stadium-stage::before{box-shadow: inset 0 -140px 120px rgba(0,0,0,.08);}
@keyframes bannerFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-2px);} }

@keyframes crowdPulse { 0%,100% { transform: translateY(0) scale(1); opacity:.92; } 50% { transform: translateY(-3px) scale(1.02); opacity:1; } }

.stand-flag { display:none; position:absolute; top:166px; width:68px; height:48px; z-index:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.stand-flag::before { content:""; position:absolute; left:7px; top:-18px; width:4px; height:68px; border-radius:4px; background:linear-gradient(180deg,#f2f4f7,#9da8b3); }
.stand-flag::after { content:""; position:absolute; left:11px; top:1px; width:54px; height:32px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)), linear-gradient(105deg, rgba(0,0,0,.10), transparent 28%), repeating-linear-gradient(90deg,#cc2a24 0 15px,#ffffff 15px 29px); clip-path:polygon(0 0, 100% 8%, 98% 92%, 0 88%); border-radius:2px; transform-origin:left center; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 5px rgba(0,0,0,.12); }
.stand-flag-left { left:34px; }
.stand-flag-right { right:34px; transform:scaleX(-1); }
@keyframes flagWave { 0%,100% { transform:perspective(180px) rotateY(0deg) rotateZ(0deg); } 25% { transform:perspective(180px) rotateY(-18deg) rotateZ(-1deg); } 50% { transform:perspective(180px) rotateY(8deg) rotateZ(1deg); } 75% { transform:perspective(180px) rotateY(-12deg) rotateZ(-1deg); } }

.goal.goal-net-hit .net { animation: netRipple 480ms ease-out 1; }
.goal.goal-net-hit .net::before { animation: netTopRipple 480ms ease-out 1; }
.goal.goal-net-hit .net::after { animation: netBottomRipple 480ms ease-out 1; }
.goal.goal-net-hit.hit-high .net { animation-name: netRippleHigh; }
@keyframes netRipple { 0% { transform:translateY(0) scale(1); } 35% { transform:translateY(7px) scale(1.01,.96); } 100% { transform:translateY(0) scale(1); } }
@keyframes netRippleHigh { 0% { transform:translateY(0) scale(1); } 35% { transform:translateY(4px) scale(1.01,.98); } 100% { transform:translateY(0) scale(1); } }
@keyframes netTopRipple { 0% { transform: perspective(230px) rotateX(66deg); } 35% { transform: perspective(230px) rotateX(58deg) translateY(6px); } 100% { transform: perspective(230px) rotateX(66deg); } }
@keyframes netBottomRipple { 0% { transform: perspective(220px) rotateX(-71deg); } 35% { transform: perspective(220px) rotateX(-64deg) translateY(-4px); } 100% { transform: perspective(220px) rotateX(-71deg); } }

@media (max-width:560px){ .stand-flag{top:156px;width:50px;height:38px;} .stand-flag-left{left:22px;} .stand-flag-right{right:22px;} .stand-flag::before{height:54px;} .stand-flag::after{width:40px;height:24px;} }
@media (max-width:440px){ .stand-flag{top:148px;width:38px;height:30px;} .stand-flag-left{left:16px;} .stand-flag-right{right:16px;} .stand-flag::before{height:42px;} .stand-flag::after{width:30px;height:20px;} }

.save-burst.miss-burst { background:linear-gradient(180deg, #ffc66f, #ff8c3a); color:#5d2c00; }

@media (max-width:560px){ .stadium-stage{ background-position:center center; } }
@media (max-width:440px){ .stadium-stage{ background-position:center center; } }

/* V17 realism pass: closer mobile framing, deeper tribune and more natural goal scale */
body{
  background:
    radial-gradient(circle at 50% -16%, rgba(120,170,255,.34), transparent 42%),
    radial-gradient(circle at 16% 18%, rgba(255,216,90,.10), transparent 18%),
    linear-gradient(180deg,#061a47 0%,#071534 56%,#050b19 100%);
}
.game-shell{max-width:620px}
.stadium-stage{
  height:clamp(610px,72vh,790px);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.30), transparent 12%),
    linear-gradient(180deg, rgba(2,7,20,.14), rgba(2,7,20,.02) 38%, rgba(2,7,20,.34) 100%),
    url('assets/stadium-bg-v16.png') center 43% / cover no-repeat;
  transform-style:preserve-3d;
}
.stadium-stage::before{
  background:
    radial-gradient(ellipse at 18% 4%, rgba(255,255,255,.38), transparent 18%),
    radial-gradient(ellipse at 82% 4%, rgba(255,255,255,.38), transparent 18%),
    radial-gradient(ellipse at 50% 56%, rgba(72,255,140,.14), transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 20%,rgba(0,0,0,.20) 100%);
  box-shadow:inset 0 -120px 120px rgba(0,0,0,.24), inset 0 40px 90px rgba(255,255,255,.05);
}
.stadium-stage::after{
  bottom:-34px;
  height:46%;
  opacity:.38;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255,255,255,.20), transparent 18%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(30,125,60,.10), rgba(0,0,0,.26));
}
.goal-stands{
  top:80px;
  height:205px;
  opacity:.72;
  background:
    linear-gradient(180deg, rgba(5,16,47,.18), rgba(5,16,47,.70)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 20px),
    repeating-linear-gradient(90deg, rgba(198,35,28,.56) 0 14px, rgba(255,255,255,.54) 14px 25px, rgba(16,39,91,.62) 25px 41px);
  filter:saturate(1.08);
}
.goal-banners{top:250px;width:82%}
.light{
  top:10px;
  width:150px;
  height:150px;
  opacity:.78;
  mix-blend-mode:screen;
}
.light-left{left:-42px}.light-right{right:-42px}
.light-left::after,.light-right::after{
  content:"";
  position:absolute;
  top:92px;
  width:260px;
  height:380px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  filter:blur(10px);
}
.light-left::after{left:22px;transform:rotate(-18deg)}
.light-right::after{right:22px;transform:rotate(18deg)}
.goal{
  top:222px;
  width:min(72%,390px);
  height:clamp(160px,24vh,210px);
  border-width:7px;
  border-bottom-width:5px;
  border-radius:7px 7px 4px 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.05));
  box-shadow:0 16px 34px rgba(0,0,0,.36), inset 0 -10px 18px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.18);
}
.net{
  background:
    linear-gradient(90deg, rgba(255,255,255,.82) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.74) 1px, transparent 1px);
  background-size:13px 13px;
  opacity:.88;
}
.keeper{
  width:clamp(136px,34vw,206px);
  height:clamp(194px,42vw,300px);
  bottom:-18px;
  transition:
    transform 720ms cubic-bezier(.12,.84,.18,1),
    left 720ms cubic-bezier(.12,.84,.18,1),
    bottom 720ms cubic-bezier(.12,.84,.18,1),
    filter 180ms ease;
}
.keeper.prep{filter:drop-shadow(0 10px 18px rgba(0,0,0,.36)) brightness(1.08)}
.keeper.dive-left{left:28%;bottom:4px;transform:translateX(-50%) rotate(-23deg) scale(1.08)}
.keeper.dive-right{left:72%;bottom:4px;transform:translateX(-50%) rotate(23deg) scale(1.08)}
.keeper.dive-center{left:50%;bottom:12px;transform:translateX(-50%) scale(1.10,.96)}
.keeper.dive-top-left{left:29%;bottom:44px;transform:translateX(-50%) rotate(-18deg) scale(.92)}
.keeper.dive-top-right{left:71%;bottom:44px;transform:translateX(-50%) rotate(18deg) scale(.92)}
@keyframes keeperIdle{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-6px) scale(1.015)}}
.ball-wrap{
  width:clamp(78px,19vw,106px);
  height:clamp(78px,19vw,106px);
  bottom:clamp(92px,14vh,128px);
}
.message-pill{
  bottom:clamp(22px,5vh,56px);
  border-radius:18px;
  font-size:clamp(14px,3vw,17px);
}
.gesture-hint{
  bottom:clamp(150px,23vh,205px);
  right:14px;
}
.aim-target{
  width:54px;
  height:54px;
  border-width:4px;
}
.goal-burst,.save-burst{top:122px}

@media(max-width:560px){
  .game-shell{padding:calc(var(--safe-top) + 8px) 10px 12px}
  .title-wrap,.tournament-panel,.prizes-panel,.ranking-panel,.footer-stats{display:none}
  .hud-row{grid-template-columns:1fr auto 1fr;gap:6px;margin-top:2px}
  .hud-card{min-height:72px;border-radius:16px;padding:9px}
  .vs-badge{width:64px;height:78px}
  .vs-top{font-size:18px}
  .lion-mini{width:60px;height:60px}
  .status-row{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .status-pill{font-size:11px;padding:7px 6px}
  .status-pill strong{font-size:12px}
  .stadium-stage{height:calc(100svh - 224px);min-height:480px;margin-top:8px;border-radius:22px;background-position:center 46%}
  .goal{top:25%;width:78%;height:28%}
  .goal-stands{top:8%;height:23%}
  .goal-banners{top:calc(25% - 20px);width:86%}
  .keeper{width:48%;height:128%;bottom:-12%}
  .ball-wrap{width:74px;height:74px;margin-left:-37px;bottom:16%}
  .gesture-hint{bottom:28%;font-size:11px}
  .bottom-bar{display:none}
  .message-pill{bottom:12px;width:calc(100% - 20px);padding:10px 12px}
  .goal-burst,.save-burst{top:16%;font-size:28px}
}
@media(max-width:390px){
  .circle-btn{width:44px;height:44px;border-radius:14px}
  .hud-label{font-size:10px}
  .score-value strong{font-size:20px}
  .shot-indicator{width:18px;height:18px}
  .stadium-stage{height:calc(100svh - 206px);min-height:430px}
  .ball-wrap{width:66px;height:66px;margin-left:-33px}
}