.pen-stage{flex-direction:column;padding:0;display:flex}.pen-score{z-index:6;left:50%;top:var(--space-4);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--ring);background:#0000008c;gap:6px;padding:6px;display:flex;position:absolute;transform:translate(-50%)}.pen-score span{width:28px;height:28px;color:var(--text-muted);background:#ffffff0d;border-radius:50%;place-items:center;font-size:12px;font-weight:800;transition:background .25s,color .25s,box-shadow .25s;display:grid;box-shadow:inset 0 0 0 1px #ffffff14}.pen-score .is-goal{color:#04140b;background:var(--accent);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent)}.pen-score .is-miss{color:#fff;background:#e5262f;box-shadow:0 0 14px #e5262f99}.pen-score .is-next{color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--accent)}.pen-field{--gl:14%;--gw:72%;--gt:16%;--gh:39%;aspect-ratio:16/10.5;border-radius:inherit;flex:1;width:100%;position:relative;overflow:hidden}.pen-bg{background:url(/assets/minigames/penalty/bg2-wide.webp) 50%/cover no-repeat;position:absolute;inset:0}.pen-bg:after{content:"";background:linear-gradient(#040c1859,#0000 30%);position:absolute;inset:0}.pen-goal{left:var(--gl);width:var(--gw);top:var(--gt);height:var(--gh);position:absolute}.pen-net{transition:transform .2s var(--ease-out);background-color:#0a1e1642;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L6 11M100 0L94 11M6 100V11H94V100' fill='none' stroke='rgba(255,255,255,.72)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),linear-gradient(90deg,#040e0a57,#040e0a24 6%,#0000 6% 94%,#040e0a24 94%,#040e0a57),linear-gradient(#040e0a4d,#040e0a1f 11%,#0000 11%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38.1'%3E%3Cpath d='M11 0L22 6.35V19.05L11 25.4L0 19.05V6.35Z M11 25.4V38.1' fill='none' stroke='rgba(255,255,255,.62)' stroke-width='1.4'/%3E%3C/svg%3E");background-position:0 0,0 0,0 0,top;background-repeat:no-repeat,no-repeat,no-repeat,repeat;background-size:100% 100%,100% 100%,100% 100%,22px 38.1px;position:absolute;inset:0}.pen-net.is-bulge{animation:pen-bulge .5s var(--ease-out) .4s}.pen-frame{filter:drop-shadow(0 0 10px #ffffff40);pointer-events:none;background:url(/assets/minigames/penalty/goal2-frame.webp) bottom/100% 100% no-repeat;position:absolute;inset:-12% -7.55% 0}.pen-zones{z-index:3;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:4px;display:grid;position:absolute;inset:4% 2% 0}.pen-zone{cursor:crosshair;background:0 0;border:0;border-radius:8px;transition:background .15s;position:relative}.pen-zone:disabled{cursor:default}.pen-zone:not(:disabled):hover{background:color-mix(in srgb, var(--accent) 16%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent)}.pen-cross{opacity:0;width:26px;height:26px;transition:opacity .15s, transform .15s var(--ease-out);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8);box-shadow:inset 0 0 0 2px #ffffff8c}.pen-cross:before,.pen-cross:after{content:"";background:#fffc;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pen-cross:before{width:2px;height:10px}.pen-cross:after{width:10px;height:2px}.pen-zone:not(:disabled):hover .pen-cross{opacity:1;transform:translate(-50%,-50%)scale(1)}.pen-stage:has(.pen-zone:not(:disabled)) .pen-cross{opacity:.35}.pen-zone.is-target .pen-cross{opacity:1;box-shadow:inset 0 0 0 2px var(--accent)}.pen-zone.is-covered{background:#ff5d6c1f}.pen-keeper{--kx:.5;--ky:.55;--ks:1;--kr:0deg;z-index:2;left:calc(var(--kx) * 100%);top:calc(var(--ky) * 100%);aspect-ratio:1;height:100%;transform:translate(-50%, -50%) scale(var(--ks)) rotate(var(--kr));pointer-events:none;transition:left .42s cubic-bezier(.25,.9,.3,1),top .42s cubic-bezier(.25,.9,.3,1),transform .42s cubic-bezier(.25,.9,.3,1);position:absolute}.pen-keeper-img{object-fit:contain;filter:drop-shadow(0 10px 12px #0000008c);width:100%;height:100%}.pen-keeper.pose-tl .is-tilt,.pen-keeper.pose-bl .is-tilt,.pen-keeper.pose-col-l .is-tilt{transform:rotate(-38deg)}.pen-keeper.pose-tr .is-tilt,.pen-keeper.pose-br .is-tilt,.pen-keeper.pose-col-r .is-tilt{transform:rotate(38deg)}.pen-keeper-img{transition:transform .42s cubic-bezier(.25,.9,.3,1)}.pen-keeper.pose-ready{animation:1.6s ease-in-out infinite pen-sway}.pen-keeper.is-set{transform:translate(-50%,-50%)scale(.96,.92)}.pen-keeper.pose-tl{--kx:.2;--ky:.28;--ks:.85;--kr:-8deg}.pen-keeper.pose-tr{--kx:.8;--ky:.28;--ks:.85;--kr:8deg}.pen-keeper.pose-bl{--kx:.2;--ky:.72;--ks:.85;--kr:6deg}.pen-keeper.pose-br{--kx:.8;--ky:.72;--ks:.85;--kr:-6deg}.pen-keeper.pose-up{--ky:.47}.pen-keeper.pose-mid{--ks:1.05}.pen-keeper.pose-col-l{--kx:.2;--ky:.5}.pen-keeper.pose-col-r{--kx:.8;--ky:.5}.pen-keeper.pose-col-c{--ky:.5}.pen-keeper.pose-row-top{--ky:.44;--ks:1.05}.pen-keeper.pose-row-bottom{--ky:.58;transform:translate(-50%,-50%)scale(1.35,1.05)}.pen-ball{--zx:.5;--zy:.5;--tx:calc(var(--gl) + var(--gw) * var(--zx));--ty:calc(var(--gt) + var(--gh) * var(--zy));z-index:4;aspect-ratio:1;pointer-events:none;width:9%;max-width:76px;transition:left .44s cubic-bezier(.2,.7,.3,1),top .44s cubic-bezier(.15,.9,.35,1),transform .44s cubic-bezier(.2,.7,.3,1);position:absolute;top:85%;left:50%;transform:translate(-50%,-50%)}.pen-ball-img{object-fit:contain;filter:drop-shadow(0 8px 8px #00000080);width:100%;height:100%}.pen-ball.is-windup{transform:translate(-50%,-50%)scale(1.06,.92)}.pen-ball.is-goal,.pen-ball.is-saved{left:var(--tx);top:var(--ty);transform:translate(-50%,-50%)scale(.42)rotate(540deg)}.pen-ball.is-saved{animation:.6s ease-in .46s forwards pen-rebound}.pen-callout{z-index:8;letter-spacing:-.03em;text-transform:uppercase;animation:pen-callout .9s var(--ease-out) .42s both;pointer-events:none;font-size:clamp(2rem,1.2rem + 3vw,3.6rem);font-weight:900;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%)}.pen-callout.is-goal{color:var(--accent);text-shadow:0 0 30px color-mix(in srgb, var(--accent) 70%, transparent), 0 4px 0 #0a3019}.pen-callout.is-save{color:#ff6b78;text-shadow:0 0 30px #ff3c5099,0 4px #3a0d12}.pen-tip{z-index:5;color:#fff;white-space:nowrap;background:#06140cb8;border-radius:999px;margin:0;padding:5px 14px;font-size:13px;font-weight:700;animation:1.8s ease-in-out infinite pen-tip-pulse;position:absolute;bottom:2%;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #ffffff24,0 4px 14px #00000059}@keyframes pen-tip-pulse{50%{transform:translate(-50%)scale(1.06)}}.pen-diff-hint{margin-top:calc(var(--space-2) * -1)}@keyframes pen-sway{0%,to{transform:translate(-50%,-50%)rotate(0)}25%{transform:translate(-56%,-50%)rotate(-2deg)}75%{transform:translate(-44%,-50%)rotate(2deg)}}@keyframes pen-bulge{40%{transform:scale(1.04,1.06)}}@keyframes pen-rebound{to{left:calc(var(--tx) + 6%);opacity:.9;top:70%;transform:translate(-50%,-50%)scale(.7)rotate(900deg)}}@keyframes pen-callout{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}30%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)scale(1)}}@media (max-width:860px){.pen-field{aspect-ratio:4/3.6;--gl:8%;--gw:84%;--gt:22%;--gh:33%}.pen-zones{gap:3px}.pen-score span{width:26px;height:26px}.pen-ball{width:14%}}