:root{color-scheme:dark;--bg:#10191f;--panel:#18232b;--line:#2a363e;--muted:#89969e;--text:#ecf0ed;--mint:#c3f789;--orange:#ff9b71}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;font-size:14px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button{transition:background .18s,transform .18s}button:not(:disabled):active{transform:translateY(1px)}a{color:inherit;text-decoration:none}.topbar{height:92px;border-bottom:1px solid var(--line);padding:0 4.7%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;letter-spacing:-1px}.brand-ball{font-size:42px;color:var(--mint);margin-right:7px}.slash{color:var(--mint);font-weight:400}.edition{font-size:9px;line-height:1.5;letter-spacing:2px;color:var(--muted);border-left:1px solid var(--line);padding-left:19px;margin-left:10px;max-width:105px}.top-actions{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1.4px;color:#aab4b9}.live-dot{width:6px;height:6px;background:var(--mint);border-radius:50%;display:inline-block;box-shadow:0 0 9px #c3f78933}.icon-button{position:relative;background:transparent;color:var(--text);border:1px solid var(--line);width:36px;height:36px;border-radius:50%;font-size:23px;margin-left:20px}.sound-slash{position:absolute;inset:5px;color:var(--orange)}main{max-width:1536px;padding:44px 4.7% 0;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px;line-height:1.65;color:#a4b0b5}.intro .eyebrow{display:flex;align-items:center;gap:9px}.intro .eyebrow>span:first-child{width:17px;height:2px;background:var(--mint);flex:0 0 auto}h1{font-size:clamp(27px,3.1vw,47px);letter-spacing:-1.9px;margin:14px 0 12px;font-weight:800;line-height:1.08}p{color:var(--muted);line-height:1.65;margin:0}.mint{color:var(--mint)}.orange{color:var(--orange)}.intro-stamp{display:flex;align-items:center;gap:20px;border-left:1px solid var(--line);padding-left:26px}.intro-stamp>span{font-size:37px;font-weight:800;letter-spacing:-2px}.intro-stamp small{font-size:9px;line-height:1.7;letter-spacing:1px;color:var(--muted)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.arena-card{border:1px solid #35424a;border-radius:13px;overflow:hidden;background:#1b2a30}.scoreboard{height:104px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:#1b272f}.team{display:flex;align-items:center;gap:12px;min-width:150px}.team-right{text-align:right;justify-content:flex-end}.avatar{width:36px;height:40px;border:1px solid currentColor;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:12px;transform:rotate(-5deg)}.mint-avatar{color:var(--mint);background:#c3f7890b}.orange-avatar{color:var(--orange);background:#ff9b710b;transform:rotate(5deg)}.team strong{font-size:11px;letter-spacing:1.1px}.team small{display:block;font-size:8px;letter-spacing:1.6px;color:var(--muted);margin-top:6px}.score-center{text-align:center}.score{display:flex;align-items:center;gap:20px;font-size:46px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-2px}.score-divider{font-size:23px;color:#657780;font-weight:400}.score-caption{display:block;font-size:7px;color:var(--muted);letter-spacing:1.8px;margin-top:8px}.pitch-wrap{position:relative;aspect-ratio:1100/570;border-top:1px solid #35424a}canvas{display:block;width:100%;height:100%}.pitch-corner{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:1.3px;color:#c0ccce;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(0deg,#13262a15,#13232b65 50%,#13232b15)}.overlay[hidden]{display:none}.overlay-content{margin-top:-10px}.overlay-kicker{font-size:8px;letter-spacing:2px;color:var(--mint);font-weight:700}.overlay h2{font-size:clamp(27px,3.4vw,48px);letter-spacing:-1.7px;line-height:1.03;margin:13px 0}.overlay p{font-size:11px;color:#b1bfc0}.primary{display:flex;align-items:center;justify-content:space-between;gap:30px;border:0;background:var(--mint);color:#17291c;border-radius:6px;padding:15px 18px;font-weight:750;font-size:11px}.primary:hover{background:#d4ffa6}.primary>span{font-size:19px;line-height:12px}.overlay .primary{min-width:198px;margin:24px auto 14px}.overlay-content>span:last-child{font-size:7px;letter-spacing:1.5px;color:#a8b8b8;display:block}.arena-bottom{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-top:1px solid #35424a;font-size:7px;letter-spacing:1px;color:#a1b4b9;background:#1b272f}.arena-bottom>span:first-child{display:flex;gap:7px;align-items:center}.tiny-ball{display:inline-block;width:8px;height:8px;border:1px solid currentColor;border-radius:50%}.arena-bottom button{display:flex;gap:6px;align-items:center;background:none;border:0;color:#b2bfc4;font-size:10px}.arena-bottom kbd{padding:3px 4px;font-size:7px;min-width:0;box-shadow:none}.sidebar{grid-column:2;grid-row:1 / span 2;display:grid;gap:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:22px}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-num{font:10px monospace;color:#65757f}.panel h2{font-size:17px;letter-spacing:-.5px;margin:13px 0 19px}.tabs{display:flex;padding:4px;background:#111b22;border:1px solid #29363e;border-radius:7px;margin-bottom:17px}.tabs button{flex:1;border:0;border-radius:4px;background:transparent;color:#8d9ca5;padding:10px 6px;font-size:11px}.tabs button.selected{background:#34423c;color:var(--mint);box-shadow:0 2px 6px #0002}.panel p{font-size:11px}.full{width:100%;margin-top:18px}.power-panel h2{font-size:16px;margin-bottom:8px}.power-list{list-style:none;margin:22px 0;padding:0;display:grid;gap:17px}.power-list li{display:flex;align-items:center;gap:11px}.power-icon{display:grid;place-items:center;border-radius:7px;width:32px;height:32px;flex-shrink:0;background:#c3f78916;color:var(--mint);font-size:23px;font-weight:400}.peach{background:#ff9b7116;color:var(--orange)}.lavender{background:#c4acff16;color:#c4acff}.blue{background:#93cfff16;color:#93cfff}.yellow{background:#f4d67c16;color:#f4d67c}.power-list strong{display:block;font-size:11px;font-weight:600;margin-bottom:4px}.power-list small{display:block;font-size:9px;color:var(--muted)}.power-foot{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:center;color:#82939b;font-size:8px;letter-spacing:1px}.power-foot>span:last-child{color:var(--mint);font-size:16px}.controls-card{grid-column:1;display:flex;justify-content:space-between;gap:20px;padding:23px 25px;border:1px solid var(--line);border-radius:10px;min-height:124px;background:#152027}.controls-title{max-width:175px}.controls-title .eyebrow{color:#c3cdd0;font-size:8px}.controls-title>small{display:block;color:var(--muted);font-size:9px;line-height:1.5;margin-top:8px}.player-tag{font-size:11px;font-weight:750;letter-spacing:1px}.player-tag>span{font-size:8px;margin-left:4px}.player-controls>div{display:flex;gap:15px;margin-top:10px}.player-controls>div>span{position:relative;display:flex;gap:4px;padding-bottom:15px}.player-controls small{position:absolute;bottom:0;left:0;width:100%;font-size:8px;color:var(--muted);text-align:center}kbd{font-family:inherit;display:inline-block;min-width:25px;padding:6px 6px 5px;text-align:center;font-size:10px;border:1px solid #40505a;border-radius:4px;background:#233039;color:#d5dfdf;box-shadow:0 2px 0 #0c151b}.wide{font-size:8px;line-height:12px;padding:6px 8px 5px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;margin-top:32px;padding:23px 0 26px;font-size:9px;color:#aebbbe}footer>span:first-child{font-weight:750;letter-spacing:1px}.footer-muted{color:#687a83;margin-left:7px}footer>span:last-child{letter-spacing:1px;font-size:8px}.or{font-size:9px;color:var(--muted);text-align:center;margin:15px 0}#join-form{display:flex;gap:6px}input{min-width:0;width:100%;border:1px solid #42505a;border-radius:5px;background:#111b22;padding:12px;color:var(--text);text-transform:uppercase;font-size:11px;letter-spacing:2px}.join-button{border:1px solid #42505a;border-radius:5px;background:#2d3b44;color:var(--mint);padding:0 14px;font-size:19px}.net-note{font-size:9px!important;margin-top:12px}.room-label{font-size:9px;color:var(--muted);letter-spacing:1px;margin:20px 0 9px}#copy-room{width:100%;display:flex;justify-content:space-between;padding:13px;border:1px dashed #6a8558;border-radius:6px;background:#c3f78908;color:var(--mint);font-family:monospace;font-size:22px;letter-spacing:3px}#room-status{margin-top:12px}.secondary{background:transparent;border:1px solid #45525b;border-radius:6px;padding:11px;color:#bac6cc;font-size:11px}.error{color:var(--orange)!important;margin-top:12px!important}.error:empty{display:none}.toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) translateY(10px);opacity:0;transition:.2s;pointer-events:none;background:#101c26ed;border:1px solid #527059;border-radius:7px;padding:11px 18px;font-size:12px;color:var(--mint);white-space:nowrap}.toast.visible{opacity:1;transform:translateX(-50%)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.touch-controls{display:none;padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 18px);gap:10px;background:#1b272f}#touch-controls button{touch-action:none;user-select:none;background:#2c4047;color:var(--mint);border:1px solid #516464;border-radius:8px;padding:14px;min-height:78px;font-size:15px;flex:1;font-weight:800}#touch-controls button:last-child{background:var(--mint);color:#182822}
@media(min-width:1500px){.game-layout{grid-template-columns:minmax(0,1fr) 330px}.panel{padding:25px}.power-list{gap:20px}}
@media(max-width:1150px){main{padding:30px 3% 0}.topbar{padding:0 3%}.game-layout{grid-template-columns:minmax(0,1fr) 275px;gap:16px}.panel{padding:18px}.controls-card{padding:20px 17px;gap:12px;flex-wrap:wrap}.controls-title{max-width:none;width:100%;display:flex;justify-content:space-between;align-items:center}.controls-title br{display:none}.controls-title>small{margin:0}.player-controls{flex:1}.player-controls>div{gap:14px}.scoreboard{padding:0 20px;height:92px}.team{min-width:0}.team strong{font-size:9px}.avatar{width:30px;height:36px}.intro-stamp{display:none}.power-list{gap:15px}.overlay h2{font-size:36px}.overlay .primary{margin-top:17px}}
@media(max-width:820px){.topbar{height:73px}.edition{display:none}.brand{font-size:21px}.brand-ball{font-size:34px}.top-actions>span:not(.live-dot){display:none}main{padding:28px 4% 0}.intro{margin-bottom:24px}h1{font-size:34px;letter-spacing:-1.5px}.intro p{font-size:12px}.intro .eyebrow{font-size:7px}.game-layout{grid-template-columns:1fr}.sidebar{grid-column:1;grid-row:3;grid-template-columns:1fr 1fr}.controls-card{grid-row:2;flex-wrap:nowrap}.controls-title{display:block;width:auto;max-width:160px}.controls-title>small{margin-top:7px}.scoreboard{height:90px}.overlay h2{font-size:40px}.overlay .primary{margin-top:22px}footer{font-size:8px}footer>span:last-child{display:none}}
@media(max-width:540px){.topbar{padding:0 5%}.icon-button{margin-left:6px}h1{font-size:27px;letter-spacing:-1px}.intro p{font-size:10px}.intro .eyebrow{font-size:6px;letter-spacing:1.3px}.scoreboard{padding:0 13px;height:76px}.team{gap:7px}.team strong{font-size:8px;letter-spacing:.4px}.team small{font-size:6px;letter-spacing:1px}.avatar{width:25px;height:30px;font-size:9px}.score{font-size:32px;gap:12px}.score-caption{font-size:6px;letter-spacing:1px}.pitch-wrap{aspect-ratio:1.55}.pitch-wrap canvas{object-fit:fill}.pitch-corner{top:12px;left:12px;font-size:5px;letter-spacing:.8px}.overlay h2{font-size:30px;margin:9px 0}.overlay-kicker{font-size:6px}.overlay p{font-size:8px}.overlay .primary{margin:16px auto 10px;padding:12px 15px;min-width:175px;font-size:10px}.overlay-content>span:last-child{font-size:5px;letter-spacing:1px}.arena-bottom{padding:0 12px;font-size:6px}.arena-bottom>span:nth-child(2){display:none}.arena-bottom button{font-size:9px}.controls-card{flex-wrap:wrap;padding:17px}.controls-title{display:flex;max-width:none;width:100%;gap:10px}.controls-title .eyebrow{font-size:6px;white-space:nowrap}.controls-title>small{font-size:7px;margin:0}.player-controls>div{gap:9px}.player-tag{font-size:10px}.sidebar{grid-template-columns:1fr}.panel{padding:23px}.power-list{grid-template-columns:1fr 1fr;gap:20px 10px}.power-list li{gap:8px}.power-list strong{font-size:10px}.power-list small{font-size:8px;line-height:1.4}.power-icon{width:29px;height:31px}.toast{max-width:95%;font-size:9px;white-space:normal;text-align:center}footer{line-height:1.6}footer>span:nth-child(2){max-width:170px;text-align:right}}
@media(max-width:380px){.topbar{gap:8px}.brand{font-size:17px;gap:5px}.brand-ball{font-size:25px;margin-right:2px}.slash{padding:0 1px}.top-actions{gap:6px}.icon-button{width:31px;height:31px;font-size:19px;margin-left:4px}}
@media(pointer:coarse){.touch-controls.online,.touch-controls.solo{display:flex}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.tabs button{padding:10px 4px;font-size:10px;white-space:nowrap}.levels{display:flex;gap:6px;margin-top:16px}.levels button{flex:1;border:1px solid #40505a;border-radius:5px;background:#182129;color:#93a4ad;padding:9px 4px;font-size:10px;letter-spacing:.4px}.levels button.selected{border-color:#6a8558;background:#c3f78914;color:var(--mint)}.ai-note{display:block;font-style:normal;font-size:7px;letter-spacing:1.2px;color:var(--orange);margin-top:5px}.player-controls.ai>div{opacity:.32}
/* Telefon: przewijanie nie ma wskakiwać nad boiskiem ani uruchamiać pull-to-refresh. */
html,body{overscroll-behavior:contain}
canvas{touch-action:pan-y}

/*
 * Telefon/tablet w poziomie: tylko boisko na całym ekranie. Boisko schodzi pod pasek Playora
 * (klik w markę = wyjście) i pod tablicę wyniku, a pad dotykowy siada na pasie ziemi — tuż poniżej
 * linii, na której stoją zawodnicy (FLOOR 488 z 570). Wspólne minima padu zostają w mocy.
 */
@media (orientation: landscape) and (pointer: coarse) {
  body.in-match { overflow: hidden; overscroll-behavior: none; }
  body.in-match .topbar, body.in-match .intro, body.in-match .sidebar, body.in-match .controls-card,
  body.in-match .playora-lobby, body.in-match footer, body.in-match .pitch-corner { display: none; }
  body.in-match main { padding: 0; max-width: none; }
  body.in-match .game-layout { display: block; }
  body.in-match .arena-card { position: fixed; inset: 0; z-index: 1; border: 0; border-radius: 0; background: var(--bg); display: flex; flex-direction: column; }
  body.in-match .playora-header { position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 42px; padding: 2px 12px; background: #10191fbf; border-bottom: 0; }
  body.in-match .playora-brand small { display: none; }
  body.in-match .playora-language button { min-width: 40px; min-height: 32px; padding: 4px 8px; font-size: 11px; }
  body.in-match .scoreboard { position: fixed; top: 42px; left: 0; right: 0; z-index: 4; height: auto; padding: 3px 14px; background: linear-gradient(180deg, #10191fe6, #10191f00); }
  body.in-match .scoreboard .avatar, body.in-match .scoreboard .team small, body.in-match .score-caption { display: none; }
  body.in-match .score { font-size: 26px; gap: 12px; letter-spacing: -1px; }
  /* Wysokość jest tu wielkością wyznaczającą: boisko rośnie do wolnego pasa, a rezerwa na pad
     trzyma linię ziemi (FLOOR 488 z 570) ponad przyciskami. object-fit pilnuje proporcji 1100:570. */
  body.in-match .pitch-wrap { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border: 0; display: flex; align-items: center; justify-content: center; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 74px); }
  body.in-match .pitch-wrap > canvas { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  /* Chip z pauzą ucieka znad linii ziemi (gdzie stoją zawodnicy) w lewy górny róg boiska — tam tylko
     niekiedy przelatuje piłka. Opisy posiadania i meczu znikają, pauza zostaje. */
  body.in-match .arena-bottom { position: fixed; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 74px); right: auto; bottom: auto; left: calc(env(safe-area-inset-left, 0px) + 10px); transform: none; height: auto; gap: 10px; padding: 3px 4px 3px 10px; border: 0; border-radius: 999px; background: #10191fa6; font-size: 8px; }
  body.in-match .arena-bottom > span { display: none; }
  body.in-match .arena-bottom button { min-height: 32px; padding: 5px 12px; font-size: 10px; background: #2c4047cc; border-color: #5a7a83; }
  body.in-match .touch-controls.solo, body.in-match .touch-controls.online { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding-inline: 16px; background: transparent; }
  body.in-match #touch-controls button { background: #2c4047a6; }
}

/* Portret w trakcie meczu: boisko i pad widoczne od razu, bez przewijania przez marketing i panele. */
@media (orientation: portrait) and (pointer: coarse) {
  body.in-match .topbar, body.in-match .intro, body.in-match .controls-card, body.in-match footer { display: none; }
  body.in-match main { padding-top: 16px; }
}