*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10181c;color:#fff;font-family:Arial,Helvetica,sans-serif}button,select,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:2px solid #edcf87;outline-offset:4px}.hidden{display:none!important}#game,#view,#shade{position:absolute;inset:0;width:100%;height:100%}#view{display:block;touch-action:none}#shade{pointer-events:none;background:linear-gradient(90deg,rgba(5,13,17,.78),rgba(5,13,17,.18) 62%,transparent),linear-gradient(0deg,rgba(6,13,18,.5),transparent 40%);transition:opacity .6s}body.playing #shade{opacity:.2}#brand{position:absolute;left:4%;top:5%;display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:2px}.brand-mark{border:1px solid #e4dfc8;color:#e4dfc8;font-size:18px;font-style:italic;font-weight:900;letter-spacing:-2px;width:38px;height:35px;display:grid;place-items:center;padding-right:3px}#brand b{font-weight:800}#venue{position:absolute;left:4%;bottom:5%;font-size:10px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}.venue-sub{font-size:9px;color:#b9c0c4;margin-left:10px}.live-dot{width:5px;height:5px;border-radius:50%;background:#e2c582}#top-actions{position:absolute;right:4%;top:5%;display:flex;gap:8px;align-items:center}#top-actions button{height:35px;min-width:35px;background:#142127aa;border:1px solid #ffffff38;border-radius:2px;font-size:9px;letter-spacing:1px;padding:0 10px}#top-actions svg{width:19px;height:19px;vertical-align:middle}#intro{position:absolute;left:7%;top:49%;transform:translateY(-45%);max-width:680px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.4px;color:#d7dbd7;display:flex;align-items:center;gap:12px}.tiny-rule{width:26px;height:2px;background:#e6c582}h1{font-size:clamp(46px,7.8vw,112px);font-weight:900;letter-spacing:-5px;margin:16px 0 25px;line-height:.95}.title-period{color:#e6c582}.matchup{display:flex;align-items:center;gap:25px}.club{display:flex;align-items:center;gap:11px}.club img{width:40px;height:48px;object-fit:contain}.club strong{display:block;font-size:12px;letter-spacing:.6px}.club small{display:block;font-size:8px;letter-spacing:2px;color:#aeb8b9;margin-top:6px}.versus{font-size:15px;font-family:Georgia,serif;color:#aeb8b9}.match-details{margin:25px 0;font-size:9px;color:#c6cbca;letter-spacing:1.3px}.match-details span{margin:0 10px;color:#e2c582}.primary{display:flex;align-items:center;justify-content:space-between;gap:60px;width:255px;background:#e7ce94;border:0;border-radius:1px;padding:19px 22px;font-size:11px;font-weight:800;letter-spacing:1.6px;color:#172026;box-shadow:0 6px 20px #0002}.primary:hover{background:#f8e2af}.primary span{font-size:21px;font-weight:400;line-height:12px}.intro-hint{font-size:8px;letter-spacing:1.3px;color:#c4c8c6;margin-top:17px}.intro-hint i{margin:0 8px}.touch-copy{display:none}#loading{position:absolute;bottom:5%;right:4%;font-size:8px;letter-spacing:1.4px;color:#d1d7d3;display:flex;align-items:center;gap:10px}.loading-line{width:24px;height:1px;background:#e7ce94;animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}#scoreboard{position:absolute;left:4%;top:5%;box-shadow:0 3px 15px #0003}.competition{font-size:8px;font-weight:700;letter-spacing:1.3px;color:#dfe7e4;background:#111b22e8;padding:6px 10px;display:flex;justify-content:space-between}.competition span{font-size:7px;opacity:.6;margin-left:35px}.scoreline{display:flex;align-items:center;height:39px;background:#f0f0e9;color:#17202a}.team-code{font-size:12px;letter-spacing:1px;font-weight:800;display:grid;place-items:center;width:53px;height:100%}.barca{background:#172c52;color:#fff;border-bottom:3px solid #aa2448}.madrid{background:#f4f4ee;border-bottom:3px solid #c8ab71}.scoreline b{width:27px;text-align:center;font-size:19px}.score-separator{font-size:14px;color:#81908c}#clock{font-size:12px;font-variant-numeric:tabular-nums;background:#15222b;color:#e6e6db;height:100%;display:grid;place-items:center;padding:0 13px}#broadcast{position:absolute;right:4%;top:calc(5% + 49px);font-size:8px;letter-spacing:2px;color:#edf0ed99}#broadcast span{font-style:italic;font-size:16px;letter-spacing:-1px;margin-right:6px;font-weight:900}#broadcast b{border:1px solid #ffffff4a;padding:2px 3px;font-size:7px;margin-left:5px}body.playing #brand,body.playing #venue{display:none}#event{position:absolute;left:50%;top:25%;transform:translateX(-50%);min-width:225px;text-align:center;pointer-events:none;filter:drop-shadow(0 4px 12px #0007)}#event small{background:#e7ce94;color:#192426;font-size:9px;font-weight:700;letter-spacing:2px;padding:7px 20px;display:block}#event strong{display:block;background:#111d27e8;padding:15px 28px;font-size:25px;font-weight:900;letter-spacing:2px}#playerHud{position:absolute;left:4%;bottom:8%;display:flex;align-items:center;gap:11px;background:linear-gradient(90deg,#0f202aed,#0f202a75);padding:9px 25px 9px 10px;min-width:220px;border-left:3px solid #b41f48}.player-number{font-size:24px;font-weight:800;color:#ece8da}#playerHud small{display:block;font-size:7px;letter-spacing:1px;color:#c8ced0;margin-bottom:3px}#playerHud b{display:block;font-size:11px;letter-spacing:1px}.stamina{height:2px;background:#ffffff25;margin-top:6px;width:120px}.stamina i{display:block;width:100%;height:100%;background:#d7ce82}#radar{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);width:155px;height:100px;opacity:.8}#help{position:absolute;left:4%;bottom:3%;right:4%;display:flex;justify-content:center;gap:20px;color:#d3dbd6;font-size:8px;letter-spacing:.7px}#help span{display:flex;gap:6px;align-items:center}kbd{font-family:Arial,sans-serif;font-size:8px;color:#e7d8b5;border:1px solid #e7d8b55a;border-radius:2px;padding:2px 4px}#touchControls{display:none;position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:20px;right:20px;height:132px;pointer-events:none}#joystick{pointer-events:auto;position:absolute;left:0;bottom:0;width:124px;height:124px;border:1px solid #ffffff48;background:#14252c22;border-radius:50%;touch-action:none;display:grid;place-items:center}.joystick-ring{position:absolute;width:77px;height:77px;border:1px solid #ffffff24;border-radius:50%}#stick{position:absolute;width:45px;height:45px;background:#e9eeee40;border:1px solid #ffffff70;border-radius:50%;box-shadow:0 2px 12px #0002;pointer-events:none}.touch-actions{position:absolute;right:0;bottom:0;width:164px;height:132px;pointer-events:none}.touch-actions button{position:absolute;pointer-events:auto;border-radius:50%;width:61px;height:61px;touch-action:none;background:#19283375;border:1px solid #eeeeec88;font-size:9px;letter-spacing:.5px;font-weight:700;user-select:none;-webkit-user-select:none}#passTouch{left:8px;bottom:0}#shootTouch{right:0;bottom:33px;background:#dcc386b8;color:#142029;border-color:#f2dda5}.touch-actions button.minor{font-size:7px;width:46px;height:46px;background:#13212b77;border-color:#ffffff4a}#chipTouch{right:62px;top:-49px}#closeTouch{left:7px;top:-49px}#switchTouch{left:16px;top:3px}#sprintTouch{right:7px;top:-17px}#shotCharge{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:#12222dc9;width:140px;height:4px;display:none}#shotCharge span{position:absolute;bottom:9px;width:100%;text-align:center;font-size:8px;letter-spacing:1px}#shotCharge i{height:100%;width:0;background:#e7ce94;display:block}#menu{position:absolute;inset:0;z-index:20;display:grid;place-items:center end;background:linear-gradient(90deg,transparent 35%,#07111955);overflow:auto;padding:18px}.menu-panel{width:min(400px,100%);padding:24px;background:#16212af5;border:1px solid #ffffff25}.menu-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.7px;color:#b9c5c9}.menu-top button{font-size:25px;background:none;border:0;padding:0 4px}h2{font-size:25px;letter-spacing:-.7px;margin:16px 0 25px;font-weight:600}.menu-panel label{font-size:9px;letter-spacing:1.2px;display:block;margin:20px 0 9px;color:#d8dccf}.menu-panel select{width:100%;padding:12px 10px;color:#f0ede3;background:#24323a;border:1px solid #526169;border-radius:1px;font-size:12px}.menu-panel p{font-size:10px;color:#9faeae;line-height:1.5}#volume{width:100%;accent-color:#e7ce94}.control-guide{font-size:10px;line-height:1.8;color:#acb8b9;margin:15px 0 22px}.menu-panel .primary{width:100%;padding:16px 18px}.text-button{border:0;background:none;font-size:9px;letter-spacing:1px;display:block;margin:16px auto 0;color:#adbabd}#fatal{position:absolute;inset:20%;padding:30px;background:#14212b;font-size:18px;line-height:1.6;z-index:30}
#tacticsTouch{display:none;position:absolute;right:4%;top:calc(5% + 82px);padding:9px 12px;min-height:34px;background:#142127bd;border:1px solid #e7ce9455;color:#ead49f;font-size:9px;letter-spacing:1px;z-index:4}body.playing #tacticsTouch{display:block}body.celebrating #tacticsTouch{display:none}@media(max-width:600px) and (orientation:portrait){#tacticsTouch{top:calc(11% + 60px);right:5%;font-size:8px}}
#goalCelebration{position:absolute;left:5%;bottom:13%;z-index:12;width:min(330px,90%);padding:20px 24px;background:linear-gradient(110deg,#122338f2,#122338ad);border-left:4px solid #d8bc71;box-shadow:0 8px 35px #0004}#goalCelebration small{font-size:9px;letter-spacing:2px;color:#e9cf93}#goalCelebration h2{font-size:62px;line-height:1;margin:8px 0;letter-spacing:-2px;font-weight:900}#goalScorer{font-size:15px;letter-spacing:1px}#goalScore{font-size:25px;margin:10px 0 16px;font-variant-numeric:tabular-nums}#continueGoal{width:100%;padding:13px;background:#e7ce94;color:#13202b;border:0;font-size:10px;font-weight:800;letter-spacing:1px;display:flex;justify-content:space-between}body.celebrating #touchControls,body.celebrating #playerHud,body.celebrating #radar{visibility:hidden}@media(max-width:600px){#goalCelebration{bottom:8%;padding:16px 20px}#goalCelebration h2{font-size:48px}}
@media(pointer:coarse){.desktop-copy{display:none}.touch-copy{display:inline}body.playing #touchControls{display:block}#help{display:none!important}#playerHud{bottom:170px}#radar{bottom:23px;width:110px;height:71px}#top-actions button{height:39px;min-width:39px}#sound{font-size:8px!important}}
@media(max-width:600px) and (orientation:portrait){#brand{left:6%;top:4%;font-size:10px;letter-spacing:1.5px;gap:8px}.brand-mark{width:30px;height:29px;font-size:15px}#top-actions{right:5%;top:4%;gap:5px}#top-actions button{padding:0 7px}#sound{font-size:7px!important}#intro{left:7%;right:7%;top:auto;bottom:17%;transform:none}h1{font-size:clamp(39px,12vw,76px);letter-spacing:-2.7px;margin:19px 0 25px}.eyebrow{font-size:7px;letter-spacing:1.2px;gap:7px}.tiny-rule{width:16px}.matchup{gap:14px}.club{gap:7px}.club img{width:31px;height:39px}.club strong{font-size:9px;letter-spacing:.1px}.club small{font-size:7px;letter-spacing:1px}.versus{font-size:13px}.match-details{font-size:8px;letter-spacing:.5px;margin:23px 0}.match-details span{margin:0 5px}.primary{width:100%;padding:18px 20px}.intro-hint{text-align:center;font-size:7px;letter-spacing:.9px}#venue{left:7%;bottom:6%;font-size:8px;letter-spacing:1px}.venue-sub{font-size:7px;letter-spacing:.4px;margin-left:0}#loading{bottom:11%;left:7%;right:auto;font-size:7px}#shade{background:linear-gradient(0deg,#071118e8 0%,#071118ac 36%,#07111815 78%,#07111858)}#scoreboard{left:5%;top:11%}.competition{font-size:7px}.scoreline{height:35px}.team-code{width:45px;font-size:10px}.scoreline b{font-size:17px;width:24px}#clock{font-size:10px;padding:0 10px}#broadcast{right:5%;top:calc(11% + 10px);font-size:6px;letter-spacing:1px}#broadcast span{font-size:12px}#broadcast b{display:none}#playerHud{left:5%;bottom:180px;min-width:170px;padding:8px 15px 8px 8px}#playerHud b{font-size:9px}#playerHud small{font-size:6px}.player-number{font-size:21px}#touchControls{left:17px;right:17px;bottom:28px}#joystick{width:110px;height:110px}.touch-actions{transform:scale(.94);transform-origin:right bottom}#radar{bottom:220px;right:5%;left:auto;transform:none;width:94px;height:61px}#event{top:24%;min-width:190px}#event strong{font-size:20px}#event small{font-size:8px}#shotCharge{bottom:31%}}
@media(max-height:500px){#brand,#top-actions{top:5%}#intro{top:51%;transform:translateY(-44%)}h1{font-size:54px;margin:10px 0 15px}.eyebrow{font-size:7px}.club img{width:29px;height:34px}.club strong{font-size:10px}.match-details{margin:14px 0;font-size:8px}.primary{padding:14px 18px;width:230px}.intro-hint{margin-top:9px;font-size:7px}#venue{bottom:5%}#playerHud{bottom:26px;left:calc(4% + 133px);min-width:170px}#playerHud b{font-size:9px}#radar{width:100px;height:65px;bottom:15px}#touchControls{height:105px;bottom:17px}#joystick{width:100px;height:100px}.touch-actions{transform:scale(.83);transform-origin:right bottom}#event{top:20%}#menu{place-items:start center}.menu-panel{margin:auto}.control-guide{display:none}.menu-panel label{margin-top:12px}.menu-panel h2{margin:5px 0 12px}.menu-panel .primary{margin-top:15px}#help{gap:10px;font-size:7px}}
@media(max-width:600px) and (orientation:portrait){#menu{place-items:end center;padding:12px;background:linear-gradient(0deg,#07111966,transparent 70%)}.menu-panel{max-height:64vh;overflow:auto;padding:16px}.menu-panel .primary{position:sticky;bottom:0;box-shadow:0 -8px 14px #16212af0}.menu-panel h2{margin:8px 0 14px}.menu-panel label{margin-top:12px}}
#menu.compact-pause{inset:auto 4% 18px auto;padding:0;background:none;overflow:visible;width:min(230px,90%)}#menu.compact-pause .menu-panel{width:100%;padding:10px 12px;border:1px solid #e7ce9466;max-height:none;overflow:visible}#menu.compact-pause .menu-panel>*{display:none}#menu.compact-pause #menuTitle{display:block;margin:0 0 7px;font-size:12px;letter-spacing:1px}#menu.compact-pause #resume{display:flex;margin:0;padding:11px;font-size:10px;position:static;box-shadow:none}body.settings-open #menu{inset:0 0 0 auto;width:min(340px,40%);height:100%;padding:0;background:#16212a;display:block}body.settings-open .menu-panel{width:100%;height:100%;max-height:100%;padding:16px;overflow:auto;border:0}body.settings-open .menu-panel h2{font-size:19px;margin:10px 0}body.settings-open .menu-panel label{margin:12px 0 6px}body.settings-open .menu-panel .primary{position:sticky;bottom:0;box-shadow:0 -6px 12px #16212a}body.settings-open #touchControls,body.settings-open #radar,body.settings-open #playerHud,body.settings-open #tacticsTouch{visibility:hidden}@media(orientation:portrait){body.settings-open #menu{inset:58% 0 0;width:100%;height:42%}body.settings-open .menu-panel{padding:12px 18px}body.settings-open #scoreboard{top:12%;left:5%}body.settings-open .control-guide{display:none}}
@media(max-width:330px){.club img{width:25px}.club strong{font-size:8px}.matchup{gap:8px}.eyebrow{font-size:6px}.touch-actions{transform:scale(.8)}#joystick{width:95px;height:95px}#broadcast{display:none!important}.venue-sub{display:none}#brand{font-size:8px;gap:5px}#sound{max-width:52px;letter-spacing:0!important}#radar{bottom:231px;width:76px;height:49px}#playerHud{bottom:180px}#event{min-width:160px;max-width:80%}}
#throughTouch{right:3px;top:-72px}body:not(.playing) #restartHint{display:none}
/* Readable match text and a small, stable set of primary touch actions. */
:root{--ui-scale:1}.large-text{--ui-scale:1.2}
.menu-panel label,.menu-top{font-size:calc(12px * var(--ui-scale));letter-spacing:.5px}
.menu-panel select{font-size:calc(15px * var(--ui-scale));min-height:44px}
.menu-panel p,.control-guide{font-size:calc(14px * var(--ui-scale));color:#d6dfe1;line-height:1.55}
.menu-panel .primary,.text-button{font-size:calc(13px * var(--ui-scale));min-height:44px}
.menu-top button{min-width:44px;min-height:44px}
#top-actions button{min-height:44px;min-width:44px;font-size:11px!important;letter-spacing:.5px}
#tacticsTouch{font-size:12px;letter-spacing:.4px;min-height:44px;background:#142127ed}
.competition{font-size:11px;letter-spacing:.6px}.competition span{font-size:10px}
#playerHud{background:#10232eed}#playerHud b{font-size:calc(13px * var(--ui-scale));letter-spacing:.3px}#playerHud small{font-size:10px;letter-spacing:.2px}
#clock{font-size:14px}.team-code{font-size:14px}
#event{max-width:min(440px,88%);min-width:0}#event small{font-size:12px;letter-spacing:.5px;padding:10px 14px}#event strong{font-size:clamp(18px,3vw,27px);letter-spacing:.5px;padding:14px 20px}
#restartHint{font-size:13px!important;letter-spacing:.3px!important;white-space:normal!important;text-align:center;width:max-content;max-width:88%;top:23%!important}
#shotCharge span{font-size:12px;letter-spacing:.4px;background:#12222de8;padding:4px}
#help,kbd{font-size:11px}#help{gap:13px}
#intro .intro-hint,#controllerStatus{font-size:12px!important;letter-spacing:.3px}#intro .club strong{font-size:13px}.club small{font-size:10px}.match-details{font-size:12px}.eyebrow{font-size:10px}
#moreTouch,.mobile-guide{display:none}
@media(pointer:coarse){
.mobile-guide{display:block}#moreTouch{display:block}
#touchControls{left:14px;right:14px;bottom:max(16px,env(safe-area-inset-bottom));height:126px}
#joystick{width:104px;height:104px;background:#102b3590;border-color:#d5e4e780}
#stick{background:#e9eeee90}
.touch-actions{width:156px;height:126px;transform:none!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:48px 66px;gap:8px;align-items:stretch}
.touch-actions button,.touch-actions button.minor{position:static!important;width:auto;height:auto;min-width:0;min-height:44px;font-size:12px;letter-spacing:0;border-radius:14px;background:#132733ed;border-color:#d6e2e8aa}
#switchTouch{grid-column:1;grid-row:1}#moreTouch{grid-column:2;grid-row:1}
#passTouch{grid-column:1;grid-row:2}#shootTouch{grid-column:2;grid-row:2;background:#e7ce94;color:#12212b;border-color:#e7ce94}
#throughTouch,#chipTouch,#closeTouch,#sprintTouch{display:none}
#touchControls.expanded .touch-actions{height:238px;grid-template-rows:48px 48px 48px 66px}
#touchControls.expanded #throughTouch{display:block;grid-column:1;grid-row:1}
#touchControls.expanded #chipTouch{display:block;grid-column:2;grid-row:1}
#touchControls.expanded #closeTouch{display:block;grid-column:1;grid-row:2}
#touchControls.expanded #sprintTouch{display:block;grid-column:2;grid-row:2}
#touchControls.expanded #switchTouch,#touchControls.expanded #moreTouch{grid-row:3}
#touchControls.expanded #passTouch,#touchControls.expanded #shootTouch{grid-row:4}
#playerHud{left:14px;bottom:156px;min-width:0;padding:8px 12px;width:200px}
#radar{width:90px;height:58px;left:14px;bottom:218px;right:auto;transform:none}
#shotCharge{bottom:31%}
}
@media(max-width:600px) and (orientation:portrait){
#scoreboard{top:88px;left:14px}.competition span{margin-left:14px}.scoreline{height:36px}.team-code{width:44px}#clock{padding:0 9px}
#broadcast{display:none!important}#tacticsTouch{top:153px;right:14px;font-size:11px}
#intro{bottom:16%;left:6%;right:6%}#intro .club strong{font-size:11px}.matchup{gap:10px}.club{gap:5px}.club img{width:27px}.club small{font-size:9px}.match-details{font-size:11px}.eyebrow{font-size:9px;letter-spacing:.5px}#controllerStatus{line-height:1.4}#venue{font-size:10px}
#event{top:32%}#restartHint{top:26%!important}
#playerHud small{font-size:9px}#playerHud b{font-size:calc(12px * var(--ui-scale))}
body.settings-open #scoreboard{top:80px}
}
@media(pointer:coarse) and (max-height:500px){
#playerHud{left:132px;bottom:16px;width:180px}#radar{left:calc(50% - 45px);bottom:16px}
#tacticsTouch{top:80px}#event{top:25%}#touchControls{bottom:12px}#joystick{width:100px;height:100px}
#intro{top:51%;bottom:auto;transform:translateY(-44%)}#intro h1{font-size:44px;margin:8px 0 12px}#intro .match-details{margin:10px 0}#controllerStatus{margin-top:6px!important}
}
@media(max-width:330px){#playerHud{width:175px}.stamina{width:105px}#brand{font-size:8px}#top-actions{right:12px;gap:4px}#sound{max-width:none;font-size:10px!important}.venue-sub{display:none}}
@media(pointer:coarse){body.touch-expanded #playerHud{width:112px;padding:7px}body.touch-expanded #playerHud .player-number{display:none}body.touch-expanded #playerHud .stamina{width:92px}body.touch-expanded #playerHud small{font-size:9px}body.touch-expanded #playerHud b{font-size:11px}}
@media(prefers-reduced-motion:reduce){#shade{transition:none}.loading-line{animation:none}}
#controllerStatus{font-size:8px;letter-spacing:.8px;color:#aab9bd;margin:12px 0 0}#controllerStatus.connected{color:#e7ce94}@media(max-width:600px){#controllerStatus{font-size:7px;letter-spacing:.3px;text-align:center}}@media(max-height:500px){#controllerStatus{margin-top:6px;font-size:7px}}