:root{--view-height:100dvh}body{height:var(--view-height);overflow:hidden;background:#09291e}.app{height:100%;max-width:1384px;padding:0 12px 10px;display:flex;flex-direction:column;gap:10px}header{flex-shrink:0;margin:0;padding:8px 0;border-bottom:1px solid #ffffff15}.header-right{display:flex;align-items:center}.bfc-brand{margin-right:auto}#opening{flex:1;min-height:0;display:grid;place-items:center;background:linear-gradient(90deg,#041c1299,#081c1520),url('../assets/stadium-v10.png') center/cover no-repeat;border-radius:16px}.opening-card{text-align:center;width:min(820px,94%);padding:20px}.arena-brand-logo{width:100%;display:block}.arena-logo{position:relative;aspect-ratio:6/1;overflow:hidden;margin:0}.arena-logo img{position:absolute;left:0;top:-57%;width:100%;height:auto}.opening-card p{color:#fff;font-size:clamp(12px,2.8vw,20px);text-shadow:0 2px 5px #000}.opening-actions{display:flex;justify-content:center;gap:12px;margin-top:24px}#map{min-height:0;overflow:auto;padding:20px;flex:1;border-radius:16px}#map .start-row{position:sticky;bottom:-20px;background:#0a241cef;padding:14px 0;margin-bottom:-10px;z-index:8;gap:10px}#map .start-row p{display:none}#map #play{margin-left:auto;min-width:180px}#map .start-row .bfc-button{padding:12px 16px;font-size:13px;max-width:none}#reset{flex:none;color:#10291f;background:linear-gradient(180deg,#ffb0b0,var(--bfc-coral));border-color:#ffb5b5}#game{min-height:0;flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}.match-actions{display:flex;gap:8px;justify-content:center}.match-actions .bfc-button{min-height:36px;padding:8px 12px;font-size:12px}.hud{width:min(820px,100%);background:#123e30;border:1px solid #ffffff22;border-radius:12px;padding:8px 16px}.hud>div:last-child{font-size:24px;color:#baf35e}.dots{margin:0;font-size:20px;line-height:24px}.field{flex:none;max-width:100%;margin:0 auto;background-repeat:no-repeat;box-shadow:0 12px 36px #0004}.help{margin:0;max-width:800px;font-size:12px;line-height:1.4}.curve-selector{position:static;transform:none;flex-direction:row;width:auto;max-width:100%;padding:5px;gap:8px;border:0;background:none;box-shadow:none;backdrop-filter:none;align-items:center;flex-shrink:0}.shot-style-title{display:none}.curve-selector button{width:62px;height:62px;min-width:44px;flex:none;padding:4px;border:1px solid #5e957e;border-radius:50%;background:linear-gradient(#255e49,#103526);box-shadow:0 4px 0 #031b12,inset 0 1px #ffffff40;gap:0;font-size:10px;color:#fff}.curve-selector button strong{width:26px;height:26px;border:0;border-radius:0;background:none;font-size:23px;box-shadow:none}.curve-selector button.selected{background:linear-gradient(#d4ff95,#baf35e);color:#10291f;border:1px solid #e0ffb0;box-shadow:0 4px 0 #5b8e2e}.curve-selector button.selected strong{background:none;border:0;box-shadow:none}.curve-selector button span{text-shadow:none}.curve-selector .power-hud{width:100px!important;margin:0!important;padding:8px!important;flex:none}.curve-selector .power-hud b{font-size:14px!important}#end{margin:auto;width:min(560px,100%);text-align:center;overflow:auto}#end .actions{flex-wrap:wrap}#endBack{margin-top:14px}dialog{background:#103526;color:white;border:1px solid #679b80;border-radius:16px;width:min(560px,calc(100% - 24px));max-height:calc(var(--view-height) - 24px);padding:24px}dialog::backdrop{background:#00180dcc}dialog p{line-height:1.6;color:#deeee5}#closeRules{float:right;padding:8px;min-height:36px}#closeRules .button-label{display:none}.vs-screen{top:76px;padding:12px}.vs-card{height:min(440px,calc(var(--view-height) - 245px))}.vs-title{margin-bottom:12px}.vs-count{margin-top:12px}.immersive .app{max-width:none}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:600px){.app{padding:0 8px 6px;gap:6px}header{padding:6px 0}.brand.bfc-brand{max-width:calc(100vw - 174px);height:48px}.opening-card{padding:8px}.opening-actions{gap:8px;flex-wrap:wrap}.opening-actions .bfc-button{padding:12px;font-size:13px}#map{padding:12px}#map .start-row{bottom:-12px;flex-direction:row;flex-wrap:wrap}#map #play{width:100%;margin:0}#map .start-row .bfc-button{flex:1;white-space:nowrap;font-size:12px}.curve-selector{gap:5px}.curve-selector button{width:56px;height:56px;font-size:9px}.curve-selector .power-hud{width:78px!important}.hud{padding:5px 12px}.hud span{font-size:12px}.help{font-size:11px}.vs-screen{top:62px}.vs-card{height:min(360px,calc(var(--view-height) - 235px))}}
@media(max-height:550px) and (orientation:landscape){.app{gap:3px;padding-bottom:4px}header{padding:3px 0}.brand.bfc-brand{height:34px}.header-right .bfc-button{height:32px;min-height:32px}.match-actions{position:absolute;left:8px;top:3px;z-index:25;flex-direction:column}.match-actions .button-label{display:none}.hud{width:300px;padding:3px 12px}.hud span{font-size:11px}.hud>div:last-child{font-size:20px}.dots{font-size:17px;line-height:20px}.help{display:none}.curve-selector{position:absolute;right:6px;top:4px;flex-direction:column;gap:5px;z-index:26}.curve-selector button{width:48px;height:48px;font-size:8px}.curve-selector button strong{height:22px;font-size:20px}.curve-selector .power-hud{width:65px!important;padding:4px!important}.vs-screen{top:44px}.vs-kicker{display:none}.vs-title{font-size:20px;margin:0 0 5px}.vs-card{height:calc(var(--view-height) - 122px)}.vs-count{margin:6px auto 0;padding-top:5px}.vs-meta{padding:14px 6px 8px}.vs-meta b{font-size:16px;margin-bottom:3px}.opening-card{max-width:620px;padding:5px}.opening-actions{margin-top:12px}.opening-card p{margin:8px}}
/* Keep original sprites proportional to the fitted stadium. */
.field .shooter{width:calc(var(--field-h,590px)*.30)!important;height:calc(var(--field-h,590px)*.46)!important}.field .ball.kick{font-size:clamp(22px,calc(var(--field-h,590px)*.07),40px)}
@media(max-width:600px){.field .shooter{width:calc(var(--field-h,500px)*.27)!important;height:calc(var(--field-h,500px)*.42)!important}}

/* Shared white and lime typographic opening title. */
#opening .opening-title{margin:0;color:#fff;font-family:"Bebas Neue","Barlow Condensed",Impact,sans-serif;font-size:clamp(38px,9.5vw,104px);font-weight:400;line-height:1.05;letter-spacing:.025em;white-space:nowrap;text-shadow:0 4px 18px #001c12aa}#opening .opening-title em{color:#baf35e;font-style:normal}@media(max-height:550px) and (orientation:landscape){#opening .opening-title{font-size:clamp(42px,12vh,70px)}}

/* Stable keeper body scale; compensate transparent sprite margins per pose. */
.field #keeper[src$="kelemen-dive-right.png"]{--pose-w:1.098156;--pose-h:0.760262;--pose-bottom:0.057859;--pose-center:0.000000}
.field #keeper[src$="majdan-idle.png"]{--pose-w:0.514786;--pose-h:1.029573;--pose-bottom:0.045301;--pose-center:0.007207}
.field #keeper[src$="kelemen-idle.png"]{--pose-w:0.390495;--pose-h:1.003820;--pose-bottom:0.032451;--pose-center:0.000541}
.field #keeper[src$="kelemen-dive-left.png"]{--pose-w:1.079264;--pose-h:0.787388;--pose-bottom:0.057697;--pose-center:0.000000}
.field #keeper[src$="ivankov-dive-right.png"]{--pose-w:1.089394;--pose-h:0.793796;--pose-bottom:0.059784;--pose-center:-0.004428}
.field #keeper[src$="ganchev-dive-right.png"]{--pose-w:1.069906;--pose-h:0.808002;--pose-bottom:0.056839;--pose-center:-0.003343}
.field #keeper[src$="ivankov-idle.png"]{--pose-w:0.352341;--pose-h:1.003599;--pose-bottom:0.030528;--pose-center:-0.001272}
.field #keeper[src$="majdan-dive-right.png"]{--pose-w:1.439269;--pose-h:0.839574;--pose-bottom:0.173912;--pose-center:0.004798}
.field #keeper[src$="ganchev-idle.png"]{--pose-w:0.373016;--pose-h:1.005651;--pose-bottom:0.032825;--pose-center:0.000000}
.field #keeper[src$="majdan-dive-left.png"]{--pose-w:1.445981;--pose-h:0.843489;--pose-bottom:0.151828;--pose-center:0.016267}
.field #keeper[src$="vega-dive-right.png"]{--pose-w:1.065002;--pose-h:0.800405;--pose-bottom:0.056227;--pose-center:0.000000}
.field #keeper[src$="vega-idle.png"]{--pose-w:0.434319;--pose-h:1.003979;--pose-bottom:0.033220;--pose-center:0.000000}
.field #keeper[src$="vega-dive-left.png"]{--pose-w:1.075229;--pose-h:0.788353;--pose-bottom:0.056708;--pose-center:0.000000}
.field #keeper[src$="ganchev-dive-left.png"]{--pose-w:1.084279;--pose-h:0.803254;--pose-bottom:0.059163;--pose-center:0.001138}
.field #keeper[src$="ivankov-dive-left.png"]{--pose-w:1.085703;--pose-h:0.809506;--pose-bottom:0.057260;--pose-center:0.001123}
.field #keeper.keeper{width:calc(var(--keeper-unit,100px)*var(--pose-w))!important;height:calc(var(--keeper-unit,100px)*var(--pose-h))!important;max-width:none!important;max-height:none!important;top:auto!important;bottom:calc(-1*var(--keeper-unit,100px)*var(--pose-bottom))!important;object-fit:contain!important;object-position:center!important;transform-origin:center bottom!important}
.field #keeper.idle,.field #keeper.dive{left:50%!important;transform:translateX(calc(-50% - var(--keeper-unit,100px)*var(--pose-center)))!important;transition:none!important}
.field #keeper.dive.go{left:var(--kx)!important;transform:translateX(calc(-50% - var(--keeper-unit,100px)*var(--pose-center))) rotate(var(--lift))!important;transition:left var(--kd) cubic-bezier(.12,.72,.2,1),transform var(--kd) cubic-bezier(.12,.72,.2,1)!important}
/* Foreground player enters the pitch during the mobile run-up. */
@media(max-width:700px) and (orientation:portrait){
 body:not(.immersive) .field .shooter{height:calc(var(--field-h,400px)*.46)!important;width:calc(var(--field-h,400px)*.30)!important;left:29%!important;bottom:0!important;transform:translate(-50%,54%);transform-origin:50% 100%}
 body:not(.immersive) .shooter.approach{animation:portraitApproach 245ms ease-out forwards}
 body:not(.immersive) .shooter.plant{animation:portraitPlant 105ms ease-out forwards}
 body:not(.immersive) .shooter.strike{animation:portraitStrike 190ms ease-out forwards}
 body:not(.immersive) .shooter.follow{animation:portraitFollow 260ms ease-out forwards}
}
@keyframes portraitApproach{from{transform:translate(-50%,54%) scale(1)}to{transform:translate(-8%,2%) scale(.72)}}
@keyframes portraitPlant{from{transform:translate(-8%,2%) scale(.72)}to{transform:translate(8%,-2%) scale(.68) rotate(-2deg)}}
@keyframes portraitStrike{from{transform:translate(8%,-2%) scale(.68) rotate(-2deg)}55%{transform:translate(16%,-3%) scale(.66) rotate(-6deg)}to{transform:translate(20%,-2%) scale(.66) rotate(3deg)}}
@keyframes portraitFollow{from{transform:translate(20%,-2%) scale(.66) rotate(3deg)}35%{transform:translate(22%,0) scale(.66)}to{transform:translate(-50%,54%) scale(1)}}
/* Selection cards retain their proportions at 80% of their previous size. */
#map #players,#map #cards{display:flex;justify-content:flex-start;overflow-x:auto;gap:14px!important;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin}
#map #players .legend-card,#map #cards .keeper-fut{zoom:.8;flex:0 0 auto;width:var(--selection-card-width,185px);min-width:var(--selection-card-width,185px)!important;scroll-snap-align:start}
/* Visual hints only: swipes and card taps pass through. */
.card-scroll-wrap{position:relative;min-width:0}.card-scroll-cues{position:absolute;inset:0;z-index:7;pointer-events:none}.card-scroll-cues[hidden],.card-scroll-cue[hidden]{display:none}.card-scroll-cue{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:46px;border-radius:12px;color:#baf35e;background:#062318b8;box-shadow:0 3px 12px #0004;pointer-events:none}.cue-left{left:2px}.cue-right{right:2px}.card-scroll-cue svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Career scoring and shared leaderboard */
#opening{display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;gap:24px;padding:30px 12px;background-attachment:local}
#opening .opening-card{flex:none;padding:12px;width:min(820px,100%)}
.nickname-label{display:block;color:#e1eee7;font-size:14px;margin:16px 0 6px}
#playerNickname{display:block;width:min(260px,100%);margin:auto;padding:10px 14px;border-radius:10px;border:1px solid #8cbc73;background:#06251dec;color:white;font-size:16px;text-align:center}
#opening .score-consent{font-size:12px;color:#c5ddcc;margin:8px 0}
.leaderboard{width:min(800px,100%);padding:22px;border:1px solid #ffffff25;border-radius:16px;background:#08261ef2;flex:none}
.leaderboard h2{font-family:'Bebas Neue',Impact,sans-serif;font-size:32px;font-weight:400;margin:0 0 8px;letter-spacing:1px}
.leaderboard h2 em{color:#baf35e;font-style:normal}
.scoring-summary{color:#b8cec2;font-size:12px;margin:5px 0;line-height:1.5}
.leaderboard-table{overflow:auto;margin-top:16px}
.leaderboard table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.leaderboard th{font-size:12px;color:#baf35e;padding:10px 6px;border-bottom:1px solid #ffffff30}
.leaderboard td{padding:12px 6px;border-bottom:1px solid #ffffff12}
.leaderboard td:nth-child(2){overflow-wrap:anywhere;max-width:220px}
.leaderboard td:nth-child(3){font-weight:800;color:#baf35e}
.leaderboard tbody tr:first-child{background:#baf35e0c}
#boardStatus,#scoreSaveStatus{font-size:13px;color:#c6dbce}
#refreshScores{font-size:12px;padding:8px 12px;min-height:36px}
.career-score{font-size:24px;font-weight:800;color:#baf35e;margin:16px 0}
#retrySaveScore{margin:0 auto 12px;font-size:12px}
@media(max-width:600px){#opening{padding:16px 8px;gap:16px}.leaderboard{padding:14px 10px}.leaderboard th,.leaderboard td{padding:10px 4px}.leaderboard table{font-size:13px}.leaderboard h2{font-size:28px}#opening .opening-title{font-size:clamp(34px,9vw,58px)}}