:root{--bg:#07140f;--bg2:#0d2b1f;--card:rgba(8,22,18,.82);--card2:rgba(255,255,255,.08);--line:rgba(255,255,255,.16);--text:#ecfff6;--muted:#a9c8bc;--accent:#f7d842;--danger:#ff375f;--ok:#35e889;--teal:#1fc6b3;--red:#ff2448}*{box-sizing:border-box}body.public-body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top,#164832 0,#07140f 50%,#030705 100%)}a{color:inherit}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-weight:900;color:var(--accent);letter-spacing:.4px}.topbar nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.topbar nav a{font-size:13px;text-decoration:none;color:#dff;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08)}.hello{font-size:12px;color:var(--muted)}.public-shell{width:min(1040px,100%);margin:0 auto;padding:18px}.hero-card,.auth-card,.list-card,.penalty-page{border:1px solid var(--line);background:linear-gradient(145deg,rgba(12,35,27,.9),rgba(0,0,0,.66));box-shadow:0 20px 70px rgba(0,0,0,.38);border-radius:28px;padding:24px}.hero-card{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;overflow:hidden}.hero-copy h1{font-size:clamp(30px,5vw,54px);line-height:.98;margin:8px 0 16px}.hero-copy p{color:var(--muted);font-size:17px;line-height:1.6}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:900;color:var(--accent);letter-spacing:2px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.primary-btn,.ghost-btn,.kick-button{border:0;border-radius:16px;padding:13px 18px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.primary-btn{background:linear-gradient(135deg,#fff269,#ff9d00);color:#251400;box-shadow:0 12px 26px rgba(255,185,0,.26)}.primary-btn.small,.ghost-btn.small{padding:9px 12px;border-radius:12px;font-size:13px}.ghost-btn{background:rgba(255,255,255,.08);color:#eafff7;border:1px solid var(--line)}.mini-stadium{position:relative;min-height:300px;border-radius:22px;background:linear-gradient(#62a5e7 0 20%,#2d8550 20% 100%);overflow:hidden}.mini-goal{position:absolute;left:12%;top:24%;width:76%;height:42%;border:8px solid #fff;border-bottom:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 16px)}.mini-keeper{position:absolute;left:48%;top:36%;width:34px;height:88px;border-radius:16px 16px 8px 8px;background:#13b7d8;box-shadow:-18px 30px #111,18px 30px #111}.mini-ball{position:absolute;left:24%;bottom:15%;font-size:42px}.auth-card{max-width:480px;margin:30px auto}.auth-card.wide{max-width:720px}.form-stack{display:grid;gap:14px}.form-stack label{display:grid;gap:6px;color:#d8fff1}.form-stack input,.redeem-form input,.list-card input,.list-card select{width:100%;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.08);color:#fff;padding:13px 14px;outline:0}.redeem-form{display:flex;gap:10px}.alert{padding:12px;border-radius:14px;margin:12px 0}.alert.error{background:rgba(255,55,95,.14);border:1px solid rgba(255,55,95,.35)}.alert.success{background:rgba(53,232,137,.14);border:1px solid rgba(53,232,137,.35)}.muted{color:var(--muted)}.voucher-ticket{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--line)}.table-responsive{overflow:auto}table{width:100%;border-collapse:collapse;background:rgba(0,0,0,.16);border-radius:18px;overflow:hidden}th,td{padding:12px;border-bottom:1px solid var(--line);font-size:14px;text-align:left}th{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.8px}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}.badge.success{background:rgba(53,232,137,.18);color:#77ffb5}.badge.danger{background:rgba(255,55,95,.18);color:#ff9aae}.penalty-page{max-width:760px;margin:0 auto}.game-status-bar{display:flex;justify-content:space-between;gap:12px;align-items:center}.game-status-bar h1{margin:5px 0 0;font-size:clamp(23px,4vw,38px);line-height:1}.voucher-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.voucher-summary .vitem{padding:12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--line)}.voucher-summary span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.8px}.voucher-summary b{font-size:16px}.skeleton{display:block;padding:16px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:18px}.bonus-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}.bonus-chip{padding:8px 10px;border-radius:999px;background:rgba(247,216,66,.12);border:1px solid rgba(247,216,66,.35);color:#fff4a8;font-size:12px;font-weight:800}.game-message{text-align:center;margin:10px 0;color:#ddfff3;font-weight:800}.shootout-stage{position:relative;width:100%;aspect-ratio:16/10;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:linear-gradient(#75b3e8 0 18%,#49a461 18% 58%,#1e6d37 58% 100%);box-shadow:inset 0 -60px 90px rgba(0,0,0,.28),0 22px 65px rgba(0,0,0,.33);touch-action:manipulation}.stadium-sky{position:absolute;inset:0 0 70% 0;background:linear-gradient(#6bb6ff,#b6e3ff)}.crowd{position:absolute;left:0;right:0;top:12%;height:16%;display:grid;grid-template-columns:repeat(24,1fr);gap:2px;padding:8px;background:linear-gradient(90deg,#f48,#fc5,#5cf,#6f8,#fc5);filter:saturate(1.1)}.crowd span{width:100%;height:13px;border-radius:50% 50% 3px 3px;background:rgba(255,255,255,.65);box-shadow:0 12px rgba(0,0,0,.18)}.adboard{position:absolute;left:0;right:0;top:28%;height:9%;display:flex;justify-content:space-around;align-items:center;background:#f3a425;color:#191008;font-weight:900;text-shadow:0 1px rgba(255,255,255,.3);border-top:3px solid rgba(0,0,0,.4);border-bottom:3px solid rgba(0,0,0,.4);font-size:clamp(10px,2vw,18px)}.goal-frame{position:absolute;left:11%;top:21%;width:78%;height:47%;border:6px solid #f7faf7;border-bottom:0;border-radius:4px 4px 0 0;box-shadow:0 0 0 2px rgba(0,0,0,.22),0 12px 18px rgba(0,0,0,.14);background:rgba(255,255,255,.06)}.net-pattern{position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(255,255,255,.56) 1px,transparent 1px),linear-gradient(-45deg,rgba(255,255,255,.56) 1px,transparent 1px);background-size:22px 22px;opacity:.9}.target-layer{position:absolute;inset:0;z-index:6}.target{position:absolute;width:13.5%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffd830 0 24%,#ff293f 25% 52%,rgba(255,255,255,.9) 53% 60%,rgba(255,40,60,.88) 61% 100%);box-shadow:0 8px 18px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.85);cursor:pointer;transition:.18s ease;opacity:.9}.target:before{content:attr(data-label);position:absolute;left:50%;top:105%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:900;color:#fff;text-shadow:0 2px 4px #000;opacity:0}.target:hover,.target.selected{transform:translate(-50%,-50%) scale(1.14);filter:drop-shadow(0 0 12px #fff36c);opacity:1}.target.selected:before{opacity:1}.target.disabled{pointer-events:none;opacity:.5}.keeper{position:absolute;z-index:5;left:50%;top:53%;width:52px;height:112px;transform:translate(-50%,-50%);transition:transform .75s cubic-bezier(.2,.75,.05,1.05)}.keeper-head{position:absolute;left:16px;top:0;width:20px;height:20px;border-radius:50%;background:#5b321c}.keeper-body{position:absolute;left:9px;top:19px;width:34px;height:42px;border-radius:8px;background:#20c9c7;border:2px solid #092f34}.keeper-arm,.keeper-leg{position:absolute;background:#101318;border-radius:999px;transform-origin:top center}.keeper-arm{top:26px;width:10px;height:54px}.keeper-arm.left{left:2px;transform:rotate(28deg)}.keeper-arm.right{right:2px;transform:rotate(-28deg)}.keeper-leg{top:60px;width:11px;height:54px}.keeper-leg.left{left:15px;transform:rotate(8deg)}.keeper-leg.right{right:15px;transform:rotate(-8deg)}.keeper.save{filter:drop-shadow(0 0 16px #38f)}.keeper.dive-left .keeper-arm.left{transform:rotate(82deg)}.keeper.dive-left .keeper-arm.right{transform:rotate(44deg)}.keeper.dive-right .keeper-arm.right{transform:rotate(-82deg)}.keeper.dive-right .keeper-arm.left{transform:rotate(-44deg)}.pitch-lines{position:absolute;inset:53% 0 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 35px,rgba(0,0,0,.03) 35px 70px)}.pitch-lines span{position:absolute;left:8%;right:8%;top:20%;border-top:3px solid rgba(255,255,255,.6)}.pitch-lines i{position:absolute;left:50%;top:36%;width:25%;height:36%;border:3px solid rgba(255,255,255,.52);border-radius:50%;transform:translateX(-50%)}.shooter{position:absolute;z-index:8;left:28%;bottom:3%;width:78px;height:132px;transform:rotate(-7deg)}.shooter-head{position:absolute;left:30px;top:0;width:25px;height:25px;border-radius:50%;background:#c08b5c}.shooter-shirt{position:absolute;left:18px;top:25px;width:46px;height:56px;border-radius:14px 14px 8px 8px;background:linear-gradient(90deg,#f1f1f1 0 45%,#1bb56c 45% 55%,#e53b3b 55% 100%);box-shadow:inset 0 -8px rgba(0,0,0,.14)}.shooter-arm,.shooter-leg{position:absolute;background:#f3f3f3;border-radius:999px;transform-origin:top center}.shooter-arm{top:36px;width:10px;height:58px}.shooter-arm.left{left:12px;transform:rotate(45deg)}.shooter-arm.right{right:8px;transform:rotate(-30deg)}.shooter-leg{top:75px;width:14px;height:58px;background:#fff}.shooter-leg.left{left:24px;transform:rotate(12deg)}.shooter-leg.right{right:20px;transform:rotate(-34deg)}.shooter.kick{animation:kicker .8s ease both}.ball{position:absolute;z-index:12;left:38%;top:84%;width:42px;height:42px;font-size:36px;line-height:42px;text-align:center;transform:translate(-50%,-50%);transition:transform .95s cubic-bezier(.15,.7,.05,1),left .95s cubic-bezier(.15,.7,.05,1),top .95s cubic-bezier(.15,.7,.05,1),opacity .3s;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4))}.ball.goal{transform:translate(-50%,-50%) scale(.62);filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}.ball.saved{animation:ballBounce .6s ease .85s both}.aim-arrow{position:absolute;z-index:10;left:39%;top:78%;width:96px;height:10px;transform-origin:left center;transform:rotate(-35deg);opacity:.96}.aim-arrow span{display:block;width:100%;height:100%;background:#ffe43b;border-radius:999px;box-shadow:0 0 0 2px rgba(0,0,0,.28)}.aim-arrow:after{content:"";position:absolute;right:-12px;top:-9px;border-left:18px solid #ffe43b;border-top:14px solid transparent;border-bottom:14px solid transparent;filter:drop-shadow(0 0 1px #000)}.aim-arrow.locked{filter:drop-shadow(0 0 9px #ffe43b)}.result-flash{position:absolute;z-index:30;left:50%;top:45%;transform:translate(-50%,-50%) scale(.7);font-size:clamp(42px,10vw,86px);font-weight:1000;letter-spacing:2px;text-shadow:0 6px 0 rgba(0,0,0,.35);opacity:0;pointer-events:none}.result-flash.show{animation:flashText 1s ease both}.result-flash.goal{color:#ffe63a}.result-flash.saved{color:#ff4266}.kick-button{width:100%;margin-top:15px;font-size:20px;color:#230;background:linear-gradient(180deg,#fff364,#ffac00);box-shadow:0 14px 0 #b76b00,0 22px 28px rgba(0,0,0,.32);transform:translateY(0);transition:.15s}.kick-button:active:not(:disabled){transform:translateY(6px);box-shadow:0 8px 0 #b76b00,0 14px 20px rgba(0,0,0,.25)}.kick-button:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}.game-help{text-align:center;color:var(--muted);font-size:12px;margin-top:14px}.result-modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px}.modal-card{position:relative;width:min(460px,100%);border-radius:26px;padding:24px;background:linear-gradient(145deg,#153c2c,#06120e);border:1px solid var(--line);box-shadow:0 25px 90px rgba(0,0,0,.6);text-align:center}.modal-card h2{font-size:42px;line-height:1;margin:0 0 8px;color:var(--accent);text-shadow:0 4px #000}.modal-close{position:absolute;right:14px;top:12px;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;width:34px;height:34px;font-size:22px}.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.modal-grid div{padding:12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--line)}.modal-grid span{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.8px}.modal-grid b{font-size:18px}.confetti{position:absolute;z-index:31;width:8px;height:14px;background:#ff0;top:-20px;animation:confetti 1.25s ease-in forwards}@keyframes kicker{0%{transform:rotate(-7deg) translateX(0)}45%{transform:rotate(-14deg) translateX(18px)}100%{transform:rotate(-2deg) translateX(30px)}}@keyframes ballBounce{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(.85)}70%{transform:translate(-50%,-70%) scale(.9)}100%{transform:translate(-50%,-50%) scale(.8)}}@keyframes flashText{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.88)}}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(420px) rotate(520deg);opacity:0}}@media(max-width:720px){.public-shell{padding:10px}.topbar{align-items:flex-start;flex-direction:column}.hero-card{grid-template-columns:1fr}.voucher-summary{grid-template-columns:repeat(2,1fr)}.shootout-stage{aspect-ratio:10/9}.goal-frame{left:6%;width:88%;top:22%;height:45%}.target{width:17.5%}.shooter{left:21%;bottom:2%;transform:scale(.86) rotate(-7deg);transform-origin:bottom center}.ball{left:36%;top:85%;font-size:32px}.aim-arrow{left:36%;top:79%;width:72px}.adboard{top:29%;font-size:10px}.crowd{grid-template-columns:repeat(18,1fr)}.game-status-bar{align-items:flex-start;flex-direction:column}.redeem-form{flex-direction:column}.modal-grid{grid-template-columns:1fr}.auth-card,.list-card,.penalty-page{border-radius:20px;padding:16px}}


/* v4 shootout polish: standalone Penalty Reward UI, not copied from any other project */
.shootout-stage-v4{isolation:isolate;background:linear-gradient(#80c7ff 0 16%,#2f7343 16% 42%,#1b7436 42% 100%)}
.shootout-stage-v4:before{content:"";position:absolute;inset:42% -10% 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 54px,rgba(0,0,0,.08) 54px 108px),radial-gradient(ellipse at center bottom,rgba(70,255,120,.28),transparent 58%);z-index:0;pointer-events:none}
.shootout-stage-v4:after{content:"";position:absolute;left:50%;bottom:-24%;width:74%;height:58%;transform:translateX(-50%);border:3px solid rgba(255,255,255,.55);border-radius:50% 50% 0 0;z-index:1;pointer-events:none}
.match-hud{position:absolute;left:50%;top:3.2%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(7,20,15,.76);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 22px rgba(0,0,0,.24);font-size:11px;font-weight:900;letter-spacing:.9px;color:#eafff7;text-align:center;white-space:nowrap}.match-hud b{color:#161000;background:linear-gradient(135deg,#fff36c,#ffac1c);padding:5px 9px;border-radius:999px}.shootout-stage-v4 .goal-frame{z-index:3;border-width:8px;box-shadow:0 18px 28px rgba(0,0,0,.24),0 0 0 3px rgba(0,0,0,.24),inset 0 -20px 35px rgba(0,0,0,.12)}.shootout-stage-v4 .goal-frame:after{content:"";position:absolute;left:50%;bottom:-15px;width:112%;height:28px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.22);filter:blur(5px);z-index:-1}.shootout-stage-v4 .target{z-index:9;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 24px rgba(255,36,72,.38),0 12px 18px rgba(0,0,0,.28)}.shootout-stage-v4 .target.selected{box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(255,216,48,.45),0 0 38px rgba(255,216,48,.85);animation:targetPulse .75s ease-in-out infinite alternate}.shootout-stage-v4 .keeper{filter:drop-shadow(0 18px 12px rgba(0,0,0,.36));transition:left .74s cubic-bezier(.22,.9,.18,1),top .74s cubic-bezier(.22,.9,.18,1),transform .74s cubic-bezier(.22,.9,.18,1)}.shootout-stage-v4 .ball{filter:drop-shadow(0 16px 7px rgba(0,0,0,.45));transition:left .92s cubic-bezier(.11,.75,.17,1),top .92s cubic-bezier(.11,.75,.17,1),transform .92s cubic-bezier(.11,.75,.17,1)}.shootout-stage-v4 .ball.goal{transform:translate(-50%,-50%) scale(.72) rotate(680deg);filter:drop-shadow(0 0 18px rgba(255,255,255,.75))}.shootout-stage-v4 .ball.saved{transform:translate(-50%,-50%) scale(1.05) rotate(420deg);animation:ballRebound .45s ease-in-out .86s 2 alternate}.kick-button{margin-top:16px;width:100%;font-size:18px;letter-spacing:1px;background:linear-gradient(135deg,#fff06a,#ff9e1a 55%,#ff5b00);color:#210e00;box-shadow:0 14px 32px rgba(255,164,0,.28),inset 0 1px 0 rgba(255,255,255,.7)}.kick-button:disabled{filter:grayscale(1);opacity:.48;cursor:not-allowed}.result-flash.show{letter-spacing:3px;text-shadow:0 5px 0 rgba(0,0,0,.25),0 0 35px rgba(255,255,255,.4)}.modal-card{border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}@keyframes targetPulse{from{transform:translate(-50%,-50%) scale(1.06)}to{transform:translate(-50%,-50%) scale(1.18)}}@keyframes ballRebound{from{margin-left:0;margin-top:0}to{margin-left:-14px;margin-top:10px}}@media(max-width:640px){.match-hud{top:2%;font-size:9px;gap:5px;padding:6px 7px}.match-hud b{padding:4px 6px}.shootout-stage-v4 .goal-frame{left:6%;width:88%;height:50%;top:23%;border-width:6px}.shootout-stage-v4 .target{width:15.5%}.kick-button{font-size:16px}}

/* v5 hotfix: modal must be hidden until JS opens it, and close button must work reliably. */
#result-modal.result-modal{display:none!important;}
#result-modal.result-modal.show{display:grid!important;}
#result-modal.result-modal[hidden]{display:none!important;}
body.modal-open{overflow:hidden;}
#result-modal .modal-card{max-height:calc(100vh - 36px);overflow:auto;}
#result-modal .modal-close{z-index:5;cursor:pointer;display:grid;place-items:center;line-height:1;font-weight:900;}
.modal-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.modal-actions .primary-btn,.modal-actions .ghost-btn{min-width:138px;text-align:center;}

/* v5 quick redeem: user can paste voucher directly on penalty page, no extra page needed. */
.quick-redeem-card{margin:14px 0 14px;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));display:grid;grid-template-columns:1fr minmax(280px,1.1fr);gap:14px;align-items:center;box-shadow:0 14px 32px rgba(0,0,0,.18)}
.quick-redeem-copy b{display:block;font-size:16px;color:#fff;margin-bottom:4px}.quick-redeem-copy span{display:block;color:var(--muted);font-size:13px;line-height:1.35}.quick-redeem-copy strong{color:var(--accent)}
.quick-redeem-controls{display:flex;gap:10px;align-items:center}.quick-redeem-controls input{width:100%;min-width:0;text-transform:uppercase;letter-spacing:.8px}.quick-redeem-controls button{white-space:nowrap}.quick-redeem-status{grid-column:1/-1;min-height:18px;font-size:13px;color:var(--muted)}.quick-redeem-status.success{color:#47f39b}.quick-redeem-status.error{color:#ff6b7f}.quick-redeem-status.loading{color:#ffe462}
@media(max-width:720px){.quick-redeem-card{grid-template-columns:1fr}.quick-redeem-controls{flex-direction:column;align-items:stretch}.quick-redeem-controls button{width:100%}}