/* Rooftop Rally — boisko na dachu: beton, neon i zachodzące słońce. Poniżej układ, potem pad i telefon. */
:root{color-scheme:dark;--bg:#111a1f;--panel:#18222a;--line:#2b3a43;--muted:#8b98a1;--text:#e9eeeb;--sky:#7fe7d0;--sun:#ff8f6b}
*{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(--sky);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:38px;color:var(--sky);margin-right:6px}
.slash{color:var(--sky);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:112px}
.top-actions{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1.4px;color:#a7b3ba}
.live-dot{width:6px;height:6px;background:var(--sky);border-radius:50%;display:inline-block;box-shadow:0 0 9px #7fe7d033}
.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(--sun)}
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:#a2b0b8}
.intro .eyebrow{display:flex;align-items:center;gap:9px}
.intro .eyebrow>span:first-child{width:17px;height:2px;background:var(--sky);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}
.sky{color:var(--sky)}
.sun{color:var(--sun)}
.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 #35474f;border-radius:13px;overflow:hidden;background:#1a2830}
.scoreboard{height:104px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:#18242c}
.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)}
.sky-avatar{color:var(--sky);background:#7fe7d00b}
.sun-avatar{color:var(--sun);background:#ff8f6b0b;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:#5f7580;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 #35474f}
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:#bfcacd;pointer-events:none}
.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(0deg,#101d2414,#101d2468 50%,#101d2414)}
.overlay[hidden]{display:none}
.overlay-content{margin-top:-10px}
.overlay-kicker{font-size:8px;letter-spacing:2px;color:var(--sky);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:#aebdc1}
.primary{display:flex;align-items:center;justify-content:space-between;gap:30px;border:0;background:var(--sky);color:#122a24;border-radius:6px;padding:15px 18px;font-weight:750;font-size:11px}
.primary:hover{background:#96f0dd}
.primary>span{font-size:19px;line-height:12px}
.primary.full{width:100%;margin-top:18px}
.overlay .primary{min-width:198px;margin:24px auto 14px}
.overlay-content>span:last-child{font-size:7px;letter-spacing:1.5px;color:#a4b6ba;display:block}
.arena-bottom{height:46px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px;border-top:1px solid #35474f;font-size:7px;letter-spacing:1px;color:#9db1b8;background:#18242c}
.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;align-items:center;gap:6px;border:1px solid #4a5f68;background:#22323a;color:#d6e4e6;border-radius:5px;padding:6px 11px;font-size:9px;letter-spacing:.6px}
.arena-bottom kbd{background:#101c22;border-radius:3px;padding:2px 4px;font-size:8px;color:#8fa4ab}
.toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,14px);opacity:0;pointer-events:none;background:#0e1a20d9;border:1px solid #3a4f58;color:#dbe9ec;border-radius:6px;padding:8px 14px;font-size:9px;letter-spacing:.6px;transition:opacity .2s,transform .2s;max-width:92%}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.sidebar{display:flex;flex-direction:column;gap:20px}
.panel{border:1px solid #2f414a;border-radius:12px;background:#18242c;padding:23px}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.panel-num{font-size:9px;letter-spacing:1.5px;color:#5f7580}
.panel h2{font-size:19px;letter-spacing:-.6px;margin:12px 0 10px}
.panel p{font-size:11px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0 14px}
.tabs button{padding:10px 4px;font-size:10px;white-space:nowrap;border:1px solid #3a4d57;border-radius:6px;background:#1b2932;color:#93a4ad}
.tabs button[aria-selected="true"]{border-color:#6a9b8b;background:#7fe7d014;color:var(--sky)}
.levels{display:flex;gap:6px;margin-top:16px}
.levels button{flex:1;border:1px solid #3a4d57;border-radius:5px;background:#1b2932;color:#93a4ad;padding:9px 4px;font-size:10px;letter-spacing:.4px}
.levels button.selected{border-color:#6a9b8b;background:#7fe7d014;color:var(--sky)}
.rule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.rule-list li{display:flex;gap:10px;align-items:flex-start}
.rule-icon{flex:none;width:29px;height:29px;border-radius:8px;border:1px solid #3a4d57;background:#1b2932;display:grid;place-items:center;font-size:13px;color:var(--sky)}
.rule-icon.sun{color:var(--sun)}
.rule-list strong{font-size:10px;letter-spacing:.8px}
.rule-list small{display:block;font-size:9px;line-height:1.5;color:var(--muted);margin-top:5px}
.controls-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(190px,290px) 1fr 1fr;gap:24px;align-items:center;border:1px solid #2f414a;border-radius:12px;background:#18242c;padding:22px 24px}
.controls-title small{display:block;font-size:9px;color:var(--muted);margin-top:12px;letter-spacing:.4px}
.player-controls{display:flex;align-items:center;gap:16px}
.player-controls>div{display:flex;gap:9px}
.player-controls>div>span{display:flex;align-items:center;gap:5px}
.player-tag{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:1.2px;color:var(--muted)}
.player-tag.sky{color:var(--sky)}
.player-tag.sun{color:var(--sun)}
kbd{border:1px solid #43555e;border-bottom-width:3px;border-radius:5px;background:#1e2c34;padding:6px 9px;font:700 11px ui-monospace,Menlo,Consolas,monospace;color:#d5e2e5}
kbd.wide{padding:6px 13px;font-size:9px;letter-spacing:.5px}
.player-controls small{font-size:8px;letter-spacing:1.2px;color:var(--muted)}
.ai-note{display:block;font-style:normal;font-size:7px;letter-spacing:1.2px;color:var(--sun);margin-top:5px}
.player-controls.ai>div{opacity:.32}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 34px;font-size:8px;letter-spacing:1.4px;color:#7f8f97}
.footer-muted{color:#4f6069}

/* Pad dotykowy: pokazany dopiero w meczu i tylko na palcach. Minima 72 px trzyma wspólny arkusz Playory. */
.touch-controls{display:none;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 18px);background:#18242c;border-top:1px solid #2f414a}
.touch-controls>div{display:flex;gap:10px}
#touch-controls button{flex:1;min-width:78px;min-height:78px;touch-action:none;user-select:none;background:#2a3d45;color:var(--sky);border:1px solid #4d6469;border-radius:8px;padding:14px;font-size:15px;font-weight:800}
.touch-controls .hit-button{min-width:82px;min-height:78px;background:var(--sun);color:#28160f;border-color:#c47a5c}
@media(pointer:coarse){.touch-controls.solo,.touch-controls.local{display:flex}}

@media(max-width:1180px){.game-layout{grid-template-columns:minmax(0,1fr)}.sidebar{flex-direction:row}}
@media(max-width:860px){.intro{display:block}.intro-stamp{margin-top:22px;border:0;padding-left:0}.sidebar{flex-direction:column}.controls-card{grid-template-columns:1fr;gap:18px}}
@media(max-width:620px){main{padding-top:24px}.topbar{height:74px}.brand{font-size:19px}.brand-ball{font-size:29px}.edition{display:none}.scoreboard{height:84px;padding:0 14px}.score{font-size:34px}.team{min-width:96px}.arena-bottom{font-size:6px;gap:8px;padding:0 10px}footer{flex-direction:column;line-height:1.7}footer>span:nth-child(2){max-width:180px;text-align:right}}
@media(pointer:coarse){.touch-controls.solo,.touch-controls.local{display:flex}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Telefon: przewijanie nie wchodzi nad boisko i nie uruchamia pull-to-refresh. */
html,body{overscroll-behavior:contain}
canvas{touch-action:pan-y}

/* Telefon w poziomie: tylko boisko na całym ekranie. Boisko schodzi pod belkę Playory i tablicę wyniku,
   a pad siada na pasie ziemi — tuż poniżej linii, na której stoją zawodnicy (FLOOR 500 z 570). */
@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 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: #111a1fbf; 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, #111a1fe6, #111a1f00); }
  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; }
  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; }
  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: #111a1fa6; 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: #2a3d45cc; border-color: #5a7a83; }
  body.in-match .touch-controls.solo, body.in-match .touch-controls.local { 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: #2a3d45a6; }
}

/* 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; }
}

/* Wąski ekran: nagłówek, stopka i klawiszologia schodzą z drogi, żeby strona nie rozjeżdżała się w poziomie. */
@media(max-width:900px){.game-layout{grid-template-columns:minmax(0,1fr)}.controls-card{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 18px}}
@media(max-width:820px){.topbar{padding:0 4%}main{padding:30px 4% 0}.top-actions>span:not(.live-dot){display:none}.intro-stamp{display:none}.controls-title small{font-size:8px}.controls-title .eyebrow{font-size:8px;line-height:1.5}}
@media(max-width:560px){.topbar{height:66px}.brand{font-size:17px;gap:6px}.brand-ball{font-size:25px;margin-right:2px}.top-actions{gap:4px}.icon-button{width:31px;height:31px;font-size:19px;margin-left:4px}.player-controls{flex-wrap:wrap;gap:10px}.player-controls>div{flex-wrap:wrap;gap:7px}.player-tag{font-size:9px}.kbd,.player-controls kbd{font-size:9px;padding:5px 6px}.scoreboard{padding:0 10px}.team{gap:7px;min-width:0}.team strong{font-size:8px}.score{font-size:29px;gap:10px}.arena-bottom{font-size:5.5px;letter-spacing:.9px}.arena-bottom>span:nth-child(2){display:none}footer>span:nth-child(3){display:none}}