.penales{--pk-gold: #00c853;--pk-gold-soft: #66ffb8;--pk-ink: #050505;--pk-muted: #b5b5b5;--pk-paper: #ffffff;--pk-card: #161616;--pk-line: #2e2e2e;--pk-yellow: #f2c94c;--pk-red: #ff3b30;min-height:100svh;background:radial-gradient(ellipse 75% 48% at 50% 0,#133928 0,transparent 80%),linear-gradient(#0a0a0a,#050505 57%,#050505);color:var(--pk-paper);padding:18px 14px 32px;font-family:var(--font-inter)}.penales-shell{max-width:720px;margin:auto}.penales-header,.penales-controls,.penales-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.penales-home,.penales-cta{display:inline-flex;align-items:center;min-height:44px;font-weight:750}.penales-home:hover,.penales-cta:hover{text-decoration:underline}.penales-sound{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--pk-line);background:var(--pk-card);color:var(--pk-gold-soft);font-size:.8rem;font-weight:800}.penales-sound[aria-pressed=false]{color:var(--pk-muted)}.penales-intro p,.penales-round>span{font-size:.72rem;font-weight:800;letter-spacing:.12em}.penales-intro{text-align:center;padding:10px 0 18px}.penales-intro p{color:var(--pk-gold-soft);letter-spacing:.19em}.penales-intro h1{font:400 clamp(2.8rem,9vw,5rem)/1 var(--font-display);margin-top:5px;text-shadow:0 3px 18px #000000b3}.penales-intro em{color:var(--pk-yellow);font-style:normal}.penales-card{border:1px solid var(--pk-line);border-radius:20px;overflow:hidden;background:var(--pk-card);box-shadow:0 25px 60px -28px #000c}.penales-score{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px;border-bottom:1px solid #00c85345;background:linear-gradient(115deg,#161616,#0a0a0a);font-variant-numeric:tabular-nums}.penales-round{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.penales-round strong{color:var(--pk-gold);white-space:nowrap;font:400 1.8rem/1 var(--font-display);letter-spacing:.04em;text-shadow:0 0 18px #00c85325}.penales-round small,.penales-marks span{font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--pk-muted)}.penales-marks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.penales-score ol{display:flex;gap:5px;margin:0;padding:0;list-style:none}.penales-score li{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:var(--pk-muted);background:#262626;box-shadow:inset 0 0 0 1px #3d3d3d;font-size:.7rem;font-weight:850}.penales-score li[data-result=true]{background:var(--pk-gold);color:var(--pk-ink);box-shadow:0 0 10px #00c85366}.penales-score li[data-result=false]{background:#262626;color:#fff;box-shadow:inset 0 0 0 1px #3d3d3d}@media(max-width:420px){.penales-score{grid-template-columns:1fr}}.penales-play:focus{outline:none}.penales-play:focus-visible .penales-pitch{box-shadow:inset 0 0 0 2px var(--pk-gold)}.penales-pitch{position:relative;isolation:isolate;overflow:hidden;height:clamp(320px,64vw,430px);background:var(--pk-ink);touch-action:manipulation}.penales-pitch>*{position:absolute}.penales-pitch[data-shooting=true] .penales-net{animation:penales-net-shake .5s .45s ease-out}@keyframes penales-net-shake{30%{transform:scale(1.012,1.02)}60%{transform:scale(.996)}}.penales-badge{top:6%;left:50%;transform:translate(-50%);z-index:3;width:-moz-max-content;width:max-content;max-width:calc(100% - 108px);padding:5px 10px;border:1px solid #00c8537a;border-radius:6px;background:#161616f2;color:var(--pk-gold-soft);text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.04em;line-height:1.25;box-shadow:0 4px 12px #0007}.penales-pitch[data-keeping=true] .penales-badge{color:#fff;border-color:#66ffb89c}.penales-clock{top:6%;right:4%;z-index:3;display:grid;justify-items:center;gap:4px;width:46px;pointer-events:none}.penales-clock span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:400 1.6rem/1 var(--font-display);color:var(--pk-gold-soft);background:#161616f2;border:1px solid #00c8539c;box-shadow:0 4px 12px #0008;animation:penales-tick .35s ease-out}.penales-clock[data-urgent=true] span{color:var(--pk-red);border-color:var(--pk-red)}.penales-clock i{display:block;width:100%;height:4px;border-radius:4px;background:var(--pk-gold);transform-origin:left;animation:penales-drain linear forwards}@keyframes penales-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes penales-tick{0%{transform:scale(1.15)}30%{transform:scale(1)}}.penales-zones{top:20%;right:14%;bottom:30%;left:14%;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);z-index:4}.penales-zones button{display:grid;place-items:center;touch-action:manipulation;min-height:44px;border:1px solid #dbe7d518;color:#fff;cursor:crosshair;transition:background .15s,box-shadow .15s,color .15s}.penales-zones button span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #e1e8d946;border-radius:50%;background:#050505c4;font-size:1rem;font-weight:800;line-height:1;pointer-events:none}.penales-zones button[data-zone="4"] span{width:19px;height:19px;border-color:#ffffff80;background:transparent;font-size:.65rem;text-shadow:0 1px 3px #000}.penales-pitch[data-shooting=true] .penales-zones button span{opacity:0}.penales-zones button:hover:not(:disabled),.penales-zones button[data-aim=true]{background:radial-gradient(circle,#00c85327,#00c8530c 70%);color:var(--pk-gold-soft);box-shadow:inset 0 0 0 2px #00c853a3}.penales-zones button:hover:not(:disabled) span,.penales-zones button[data-aim=true] span{border-color:#00c853a3}.penales-zones button:disabled,.penales-zones button[aria-disabled=true]{cursor:default}.penales-zones button:disabled{opacity:.35}.penales-zones button:focus-visible{outline:2px solid var(--pk-gold);outline-offset:-3px}.penales-keeper,.penales-ball{pointer-events:none;transform:translate(-50%,-50%);z-index:3}.penales-keeper{left:50%;top:52%;width:clamp(96px,22%,138px);transition:left .34s cubic-bezier(.2,.8,.3,1),top .34s cubic-bezier(.2,.8,.3,1),transform .34s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 5px 3px #000000c4)}.penales-keeper:not([data-diving=true]):before{position:absolute;inset:auto 18% -2% 18%;height:9%;background:radial-gradient(ellipse,#000000b3,transparent 72%);content:""}.penales-keeper .penales-keeper-art{animation:penales-ready 1.6s ease-in-out infinite}.penales-keeper[data-diving=true]{left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--tilt))}.penales-keeper[data-diving=true] .penales-keeper-art{animation:none}@keyframes penales-ready{50%{transform:translateY(2px) scaleY(.985)}}.penales-ball{left:50%;top:89%;width:clamp(28px,6.5vw,42px);z-index:5;filter:drop-shadow(0 4px 3px #000c)}.penales-ball[data-flying=true]{animation:penales-kick .56s cubic-bezier(.15,.7,.35,1) forwards}@keyframes penales-kick{to{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.46) rotate(300deg)}}.penales-ball-shadow{left:50%;top:92%;width:clamp(30px,7vw,44px);height:9px;transform:translate(-50%);border-radius:50%;background:radial-gradient(#000d,transparent 70%);transition:opacity .2s}.penales-ball-shadow[data-flying=true]{opacity:0}.penales-flash{left:50%;top:42%;z-index:8;pointer-events:none;transform:translate(-50%,-50%);font:400 clamp(2.6rem,11vw,4.6rem)/1 var(--font-display);letter-spacing:.04em;color:var(--pk-gold);white-space:nowrap;text-shadow:0 0 24px #00c85399,0 4px 0 var(--pk-ink);animation:penales-pop 1.1s ease-out forwards}.penales-flash[data-good=false]{color:#fff;text-shadow:0 0 24px #00000099,0 4px 0 #000000}@keyframes penales-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-62%) scale(1)}}.penales-result{left:50%;top:40%;z-index:8;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;pointer-events:none;padding:14px 26px 10px;border-radius:18px;background:linear-gradient(145deg,#161616f5,#0a0a0af5);box-shadow:0 0 0 1px #00c85366,0 20px 50px -10px #000;animation:penales-rise .45s ease-out}.penales-result span{font-size:.78rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:var(--pk-muted)}.penales-result strong{font:400 clamp(3.4rem,15vw,5.4rem)/.9 var(--font-display);letter-spacing:.04em;color:var(--pk-gold);text-shadow:0 0 30px #00c85348;font-variant-numeric:tabular-nums}.penales-result[data-outcome=loss] strong{color:#fff;text-shadow:0 0 30px #00000099}@keyframes penales-rise{0%{opacity:0;transform:translate(-50%,-40%)}}@media(pointer:coarse){.penales-keys{display:none}}.penales-invite{font-weight:750;color:var(--pk-paper);text-align:center;margin-bottom:2px}.penales-controls{padding:12px 14px;border-top:1px solid var(--pk-line)}.penales-controls p,.penales-notice{font-size:.82rem;color:var(--pk-muted)}.penales-status{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font-weight:850;font-size:.9rem;color:var(--pk-gold);border:1px solid #00c85366;background:var(--pk-card);white-space:nowrap;font-variant-numeric:tabular-nums}.penales-status[data-busy=true]{color:var(--pk-gold-soft);border-color:#00c8537d}.penales-primary,.penales-secondary{border-radius:12px;min-height:48px;padding:8px 16px;font-weight:850;white-space:nowrap}.penales-primary{background:var(--pk-gold);color:var(--pk-ink);box-shadow:0 0 24px #00c85329}.penales-primary:hover{background:var(--pk-gold-soft)}.penales-secondary{border:1px solid #3d3d3d}.penales-link{min-height:44px;color:var(--pk-gold);font-weight:750;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}.penales-feedback strong{scroll-margin-top:16px}.penales-feedback{padding:8px 14px 13px;color:var(--pk-paper);min-height:44px;font-weight:650}.penales-feedback strong{display:block;margin-top:4px;color:var(--pk-gold);font:400 2rem/1 var(--font-display);letter-spacing:.04em}.penales-feedback strong small{display:block;margin-top:4px;color:var(--pk-paper);font:650 .9rem/1.3 var(--font-inter);letter-spacing:0}.penales-feedback strong:focus{outline:none}.penales-actions{flex-direction:column;align-items:stretch;padding:0 14px 14px}.penales-buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.penales-buttons .penales-primary{flex:1 1 auto}.penales-poster{display:block;width:min(100%,340px);height:auto;margin:8px auto 2px;border-radius:14px;border:1px solid var(--pk-line);box-shadow:0 20px 50px -20px #000}.penales-notice{flex-basis:100%;overflow-wrap:anywhere}.penales-notice:empty{display:none}.penales-cta{margin-top:8px;color:var(--pk-gold);font-size:.9rem}.penales :focus-visible{outline:2px solid var(--pk-gold);outline-offset:2px}.penales .penales-play:focus-visible{outline:none}.penales--embedded{min-height:0;padding:14px 12px 22px}@media(max-width:480px){.penales--embedded{padding-top:8px}.penales--embedded .penales-intro{padding:0 0 10px}.penales--embedded .penales-intro p{display:none}.penales--embedded .penales-intro h1{font-size:2.4rem;margin-top:0}.penales-controls{flex-direction:column;align-items:stretch}.penales-status{justify-content:center}}@media(prefers-reduced-motion:reduce){.penales-keeper{transition:none}.penales-keeper .penales-keeper-art,.penales-pitch[data-shooting=true] .penales-net{animation:none}.penales-ball[data-flying=true]{animation:none;left:var(--x);top:var(--y)}.penales-flash{animation:none;opacity:1}.penales-clock span,.penales-clock i,.penales-result{animation:none}}.penales-card-invite{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;padding:14px;border-radius:14px;border:1px solid #00c85340;background:linear-gradient(135deg,#00c85314,transparent 70%)}.penales-card-invite p{flex:1 1 220px;font-size:.9rem;color:var(--pk-paper)}.penales-card-invite strong{color:var(--pk-gold)}.penales-card-invite .penales-secondary{flex:0 0 auto}@media(max-width:480px){.penales-card-invite .penales-secondary{flex:1 1 100%}}
