/* Lobby Zone – styl na wzór projektu (granat + niebieski akcent) */
:root {
  --support: #49d18a;
  --bg: #060d17; --panel: #0c1929; --panel2: #102238; --panel3: #0e2033; --line: #1b3550; --line2: #2b4765;
  --text: #edf5ff; --muted: #a9bccf; --muted2: #c3d3e4;
  --blue: #1687ff; --blue2: #1262dd; --action: #1262dd; --action-hover: #0f55c4; --focus: #7cc4ff; --cyan: #49c8ff; --green: #37d69a; --red: #ff5a6a; --gold: #f2b84b;
  --team-a: #49c8ff; --team-b: #f0a020;
  --radius: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0; color: var(--text);
  background: radial-gradient(ellipse at 80% -10%, #12375b 0, transparent 38%), var(--bg);
  font: 16px/1.5 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.4px; }
.wrap { width: 100%; max-width: 1420px; margin: 0 auto; padding: 0 24px; }
/* treść zajmuje co najmniej ekran: stopka startuje poniżej widoku, więc wczytanie strony jej nie przesuwa (CLS) */
main.wrap { flex: 1; padding-bottom: 20px; min-height: 100vh; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ok-text { color: var(--green); }
.neg-text { color: var(--red); }
.hidden { display: none !important; }
.link { color: #60baff; font-size: 13px; font-weight: 800; }
.link:hover { color: #9bd3ff; }

/* --- nagłówek --- */
header { position: sticky; top: 0; z-index: 20; background: #07111fef; border-bottom: 1px solid #18304a; backdrop-filter: blur(16px); transition: transform .25s ease; }
/* przewijanie w dół chowa górny pasek, w górę - pokazuje (js/headerAutoHide.js) */
body.head-hidden > header { transform: translateY(-100%); }
.nav { height: 72px; display: flex; align-items: center; gap: 18px; }
/* napis jak w logo: cienkie jasne "Lobby" i grube niebieskie "Zone" */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -.3px; white-space: nowrap; font-size: 21px; color: #e3e9f1; }
.brand-accent { color: #2f8fff; font-weight: 800; }
.logo { width: 46px; height: 29px; flex: none; filter: drop-shadow(0 3px 10px #087bff55); }
/* menu główne: zakładki z ikonami, aktywna w ramce z niebieskim podkreśleniem; "Więcej" rozwija pozostałe działy */
#main-nav { display: flex; align-items: center; gap: 2px; color: var(--muted2); font-size: 14px; font-weight: 650; flex: 1; min-width: 0; margin-left: 8px; }
#main-nav > a, .nav-more-btn { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; transition: color .15s, background .15s; }
.nav-more-btn { background: none; color: inherit; font: inherit; }
#main-nav > a:hover, .nav-more-btn:hover, .nav-more.open .nav-more-btn { color: #fff; background: #0e2034; }
#main-nav > a.active, .nav-more.active .nav-more-btn { color: #fff; background: linear-gradient(180deg, #11263d, #0c1c2f); border-color: #1d3a58; box-shadow: inset 0 -2px 0 var(--blue); }
#main-nav > a .sb-ico { width: 17px; height: 17px; }
#main-nav > a.active .sb-ico { color: var(--blue); }
.nav-more { position: relative; }
.nav-more-btn .sb-ico { width: 14px; height: 14px; transition: transform .15s; }
.nav-more.open .nav-more-btn .sb-ico { transform: rotate(180deg); }
.nav-more-list { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; z-index: 30; padding: 6px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(160deg, #0f2136, #0a1828); box-shadow: 0 18px 40px #0009; }
.nav-more.open .nav-more-list { display: grid; gap: 2px; }
.nav-more-list a { padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.nav-more-list a:hover { background: #142c47; color: #fff; }
.nav-more-list a.active { color: #fff; background: #123d68; }
.nav-more-list .nav-premium { color: var(--gold); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (max-width: 1360px) { #main-nav > a { padding: 9px 9px; } #main-nav > a:not(.active) .sb-ico { display: none; } }
@media (max-width: 1180px) { .nav { gap: 12px; } #main-nav { font-size: 13px; } #main-nav > a, .nav-more-btn { padding: 8px 8px; } }
.navright { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.account { display: flex; align-items: center; gap: 8px; }
.account-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line2); border-radius: 12px; background: #10233a; font-weight: 700; font-size: 13px; position: relative; }
.account-chip span:not(.badge) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { background: var(--red); color: #fff; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 1px 6px; }
.btn.menu { display: none; }

/* --- przyciski i pola --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line2); background: #10233a; color: #e9f3ff; padding: 10px 15px;
  border-radius: 10px; font-weight: 750; font-size: 13px; transition: .15s;
}
.btn:hover { filter: brightness(1.13); transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn.primary { background: var(--action); border-color: var(--action); box-shadow: 0 6px 18px #0674ff22; color: #fff; }
.btn.primary:hover { background: var(--action-hover); filter: none; }
.btn.danger { background: transparent; border-color: #7a2a35; color: #ff8f9b; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted2); }
.btn.ok { border-color: #267d65; color: #8ff0cf; background: #0f2b26; }
.btn.fav { border-color: #8a6a22; color: var(--gold); }
.btn.steam { background: #171a21; border-color: #66c0f4; color: #66c0f4; }
.btn.small { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn.big { padding: 14px 28px; font-size: 16px; }
.btn.wide { width: 100%; margin-top: 13px; }
.steam-ico { font-size: 15px; }
.icon-btn { background: transparent; border: 1px solid var(--line2); color: var(--muted); border-radius: 7px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.icon-btn:hover { color: #fff; border-color: var(--muted); }
.icon-btn.ok { color: var(--green); border-color: #267d65; }
.icon-btn.subtle { border-color: transparent; opacity: 0; }
.friend-row:hover .icon-btn.subtle { opacity: 1; }
.input { background: #071321; border: 1px solid #25435f; color: #fff; border-radius: 9px; padding: 10px 12px; width: 100%; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #1687ff22; }
select.input { width: auto; cursor: pointer; }
textarea.input { resize: vertical; }
.input.search { max-width: 300px; }
.input.score { width: 54px; padding: 5px 6px; text-align: center; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted2); cursor: pointer; font-size: 13px; }
.field { display: grid; gap: 6px; margin: 13px 0; }
.field label { font-size: 12px; color: #afc3d9; }
.field .input, .field select.input { width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin: 0 0 13px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form .input { max-width: 260px; }

/* --- hero --- */
.hero {
  margin: 25px 0 32px; min-height: 360px; border: 1px solid #21405c; border-radius: 22px; overflow: hidden; position: relative;
  display: flex; align-items: center;
  background: linear-gradient(90deg, #06101d 0%, #06101df2 30%, #071323b0 55%, #07132322 100%),
    linear-gradient(0deg, #06101d 0%, transparent 45%), url('/img/hero.jpg') right center / auto 100% no-repeat, #0a1626;
}
.hero-content { position: relative; z-index: 1; padding: 42px; max-width: 680px; }
.eyebrow { color: #58b9ff; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); display: inline-block; }
.live-dot.off { background: var(--muted); box-shadow: none; }
.hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.02; letter-spacing: -2px; margin: 16px 0; }
.hero h1 span { display: block; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.6px; margin-top: 10px; line-height: 1.2; }
.hero p { max-width: 520px; color: #bdcde0; font-size: 16px; margin: 0; }
.actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.hero-stats { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.stat strong { font-size: 22px; display: block; }
.stat span { color: var(--muted); font-size: 12px; }

/* --- sekcje --- */
.section { margin: 34px 0 40px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.section-head h2 { font-size: 22px; letter-spacing: -.6px; }
.section-head h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.section-head p { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.section-head.compact { margin-bottom: 12px; align-items: center; }
.section-head select.input { width: auto; max-width: 220px; }
.history-head { flex-wrap: wrap; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.panel .section-head:not(:first-child) { margin-top: 20px; }
.page-head { margin: 28px 0 20px; }
.page-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -1px; }
.page-head p { color: var(--muted); margin: 6px 0 0; }
.toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 17px; align-items: center; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .filters { margin-bottom: 0; }
.filter { border: 1px solid #1c3854; background: #0a1726; color: #9eb2c9; padding: 8px 13px; border-radius: 9px; font-size: 12px; font-weight: 750; }
.filter:hover { color: #fff; }
.filter.active { background: #123d68; border-color: #267ec6; color: #fff; }
.tabs { display: flex; gap: 8px; margin: 4px 0 15px; flex-wrap: wrap; }
.tab { background: transparent; color: #8fa7c0; border: 1px solid transparent; padding: 7px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.tab:hover { color: #fff; }
.tab.active { background: #153452; border-color: #285274; color: #fff; }
.page-tabs { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin: 0 0 20px; }

.panel { background: linear-gradient(150deg, #0d1b2c, #091522); border: 1px solid #1a344e; border-radius: var(--radius); padding: 18px; min-width: 0; margin-bottom: 18px; }
.panel h3 { font-size: 17px; margin-bottom: 6px; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.split > .panel, .split > div > .panel:last-child { margin-bottom: 0; }
.split.wide-left { grid-template-columns: 1.4fr 1fr; }
.split > div > .panel + .panel { margin-top: 18px; }
.section.split .panel { margin-bottom: 0; }
.empty { color: var(--muted); font-size: 13px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 11px; }
.alert { border: 1px solid var(--line2); background: var(--panel2); border-radius: 11px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; }
.alert.info { border-color: #2370b3; background: #0e2a46; }
.alert.bad { border-color: #7a2a35; background: #2a1219; color: #ffb6bf; }
.alert.small { font-size: 12px; }
.lead { color: #c9d8ea; font-size: 15px; margin: 0 0 16px; }
.pre { white-space: pre-wrap; margin: 0; }

/* --- gry --- */
.games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; }
.game { min-width: 0; background: linear-gradient(160deg, #11263b, #0a1624); border: 1px solid #1a3550; border-radius: 14px; overflow: hidden; transition: .18s; cursor: pointer; }
.game:hover, .game:focus-visible { transform: translateY(-4px); border-color: #2d82c5; box-shadow: 0 12px 25px #0004; outline: none; }
.game-art { height: 118px; position: relative; background: linear-gradient(135deg, #153e61, #0a1423); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.game-art:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, var(--glow, #1678be66), transparent 55%), linear-gradient(0deg, #07111f 0%, transparent 75%); z-index: 1; }
.game-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .25s; }
.game:hover .game-art img { transform: scale(1.05); }
.game-art.has-img .symbol { visibility: hidden; }
.game-art.has-img:before { background: linear-gradient(0deg, #07111fd9 0%, transparent 55%); z-index: 2; }
.game-art .symbol { font-size: 50px; filter: drop-shadow(0 5px 12px #0008); position: relative; z-index: 2; }
.game-art .genre { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; background: #07111fc9; border: 1px solid #ffffff24; padding: 4px 6px; border-radius: 5px; color: #d7e8fb; }
.game-art .genre.right { left: auto; right: 10px; color: #8ff0cf; border-color: #267d65; }
.game-art .genre.right.browser { top: auto; bottom: 10px; color: #9bd3ff; border-color: #23507a; }
.game-info { padding: 12px; }
.game-title { font-weight: 850; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-meta { color: #91a9c2; font-size: 12px; margin-top: 3px; }
.online { color: var(--green); font-size: 12px; margin-top: 9px; display: flex; align-items: center; gap: 6px; }
.online:before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; flex: none; }

.game-icon {
  --glow: #1687ff; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 21px;
  background: radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 70%), linear-gradient(135deg, #1d5c90, #102a43);
  overflow: hidden; vertical-align: middle;
}
.game-icon { position: relative; }
.game-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-icon.has-img { color: transparent; border: 1px solid #ffffff1f; }
.game-icon.xs { width: 24px; height: 24px; flex-basis: 24px; font-size: 13px; border-radius: 6px; }
.game-icon.sm { width: 38px; height: 38px; flex-basis: 38px; font-size: 19px; }
.game-icon.lg { width: 58px; height: 58px; flex-basis: 58px; font-size: 30px; border-radius: 14px; }
.game-icon.xl { width: 104px; height: 104px; flex-basis: 104px; font-size: 56px; border-radius: 22px; box-shadow: 0 12px 30px #0006; }

.game-hero {
  --glow: #1687ff; margin: 25px 0 18px; border: 1px solid #21405c; border-radius: 22px; padding: 30px; display: flex; gap: 24px; align-items: center;
  background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 55%), linear-gradient(120deg, #0f2236, #08121f);
}
.game-hero.small { padding: 22px; margin-top: 10px; }
.game-hero h1 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -1px; margin: 4px 0; }
.game-hero-main { min-width: 0; flex: 1; }
.meta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--muted2); font-size: 13px; margin-top: 6px; }
.facts { display: grid; gap: 10px; }
.facts div { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: #c9d8ea; }
.facts span { width: 22px; text-align: center; }
.facts b { color: #fff; white-space: nowrap; }

/* --- listy (ligi, gathery) --- */
.list { display: flex; flex-direction: column; gap: 9px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px; background: var(--panel3); border: 1px solid #1a3550; border-radius: 11px; transition: .15s; }
.list-row.clickable, a.list-row { cursor: pointer; }
.list-row.clickable:hover, a.list-row:hover { border-color: #2d6fa5; background: #11263c; }
.list-row.highlight { border-color: #2370b3; background: linear-gradient(100deg, #10335a, #0e2033); }
.list-main { min-width: 0; flex: 1; }
.list-main strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-main span { display: block; color: #8ea6bf; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-end { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.list-end small { color: #93a9c1; font-size: 12px; }
.mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.mine-item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid #2370b3; background: linear-gradient(100deg, #10335a, #0c1929); border-radius: 12px; }
.mine-item strong { display: block; font-size: 13px; }
.mine-item span { color: var(--muted2); font-size: 12px; }
.cs-strip { display: flex; align-items: center; gap: 16px; border-color: #2370b3; background: linear-gradient(100deg, #183457, #0c1929); }
.cs-strip:hover { border-color: #3a8fd6; }

.banner { border-radius: 17px; border: 1px solid #21405b; background: linear-gradient(100deg, #102b45, #0b1928); padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.banner h2 { font-size: 21px; margin-top: 6px; }
.banner p { margin: 6px 0 0; color: #9db3ca; font-size: 13px; }

/* --- awatary, znajomi --- */
.avatar { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.avatar.xs { width: 22px; height: 22px; border-radius: 6px; }
.avatar.sm { width: 32px; height: 32px; border-radius: 8px; }
.avatar.xl { width: 96px; height: 96px; border-radius: 22px; font-size: 40px; }
.avatar-empty { display: inline-flex; align-items: center; justify-content: center; background: #17304a; color: var(--muted2); font-weight: 800; text-transform: uppercase; font-size: 13px; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { margin-right: -8px; border: 2px solid var(--panel3); }
.avatar-wrap { position: relative; flex: none; display: inline-flex; }
.presence { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #4b5d70; border: 2px solid var(--panel); }
.presence.on { background: var(--green); }
.pdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #4b5d70; }
.pdot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.player-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.player-cell:hover span { color: #9bd3ff; }
.player-row { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.captain { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--gold); color: #1a1100; font-size: 10px; font-weight: 900; flex: none; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #16304a; }
.friend-row:last-child { border-bottom: 0; }
.friend-row.offline .friend-info a { color: var(--muted); }
.friend-row.request { background: #1687ff14; margin: 0 -8px; padding: 8px; border-radius: 9px; border-bottom: 0; }
.friend-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.friend-info a { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-info span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-info span a { color: #60baff; font-weight: 600; font-size: 12px; }
.friend-group { margin-bottom: 8px; }
.row-actions { display: inline-flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; }
.search-wrap { margin-bottom: 10px; }
.search-results { border: 1px solid var(--line); border-radius: 11px; padding: 4px 10px; margin: 8px 0; background: #071321; }

/* --- ranking --- */
.rank-list { list-style: none; padding: 0; margin: 0; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #16304a; }
.rank-list li:last-child { border-bottom: 0; }
.rank-list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; }
.rank-pos { width: 20px; color: var(--muted); font-weight: 800; text-align: right; display: inline-block; }
.rank-list li:first-child .rank-pos { color: var(--gold); }
.rank-elo { font-weight: 800; font-variant-numeric: tabular-nums; color: #9bd3ff; }
.rank-badge { background: #2a2210; border: 1px solid #8a6a22; color: var(--gold); padding: 3px 10px; border-radius: 99px; font-weight: 700; font-size: 12px; }

/* --- tabele --- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #16304a; white-space: nowrap; font-size: 13px; }
th { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #11263c; }
tr.me-row td { background: #1687ff14; }
.team-table { table-layout: fixed; min-width: 640px; }
.team-table th:first-child { width: 30%; }
.team-table .dot-col { width: 32px; }
.team-table .elo-col { width: 120px; }
.team-table td:first-child { overflow: hidden; text-overflow: ellipsis; }
.win { color: var(--green); font-weight: 800; }
.loss { color: var(--red); font-weight: 800; }
.draw { color: var(--muted); font-weight: 800; }
.delta-pos { color: var(--green); }
.delta-neg { color: var(--red); }
.status { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: #153452; border: 1px solid #285274; color: #cfe3f7; }
.status.live, .status.running { background: #4a1420; border-color: #c03448; color: #ffd0d6; }
.status.finished, .status.done { color: #8ff0cf; border-color: #267d65; background: #0f2b26; }
.status.signup { color: #9bd3ff; border-color: #2370b3; background: #0e2a46; }
.status.cancelled { color: var(--muted); background: transparent; }

/* --- CS:S matchmaking --- */
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
.queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.queue-card { background: linear-gradient(160deg, #11263b, #0a1624); border: 1px solid #1a3550; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 9px; text-align: center; }
.queue-card.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 10px 30px #0674ff33; }
.queue-top { display: flex; justify-content: space-between; align-items: baseline; }
.queue-top h3 { font-size: 18px; }
.queue-count { font-size: 40px; font-weight: 900; line-height: 1; color: var(--cyan); }
.queue-count span { font-size: 16px; color: var(--muted); font-weight: 700; }
.slots { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.slot { width: 13px; height: 13px; border-radius: 4px; background: #0a1624; border: 1px solid var(--line2); }
.slot.full { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 8px #1687ff88; }
.lobby-card { margin-bottom: 0; }
.lobby-card.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.lobby-create, .lobby-settings { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lobby-create { margin-top: 12px; }
.lobby-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.lobby-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--panel3); border: 1px solid #1a3550; border-radius: 12px; padding: 14px 10px; min-height: 120px; justify-content: center; }
.lobby-slot .avatar { width: 46px; height: 46px; }
.lobby-slot.empty { border-style: dashed; background: transparent; }
.lobby-slot.invited { opacity: .6; border-style: dashed; }
.lobby-slot .captain { position: absolute; top: 8px; left: 8px; }
.lobby-name { font-weight: 800; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.lobby-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.invites { margin-bottom: 14px; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #1687ff14; border: 1px solid #2370b3; border-radius: 11px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px; }
.invite-row .avatar { vertical-align: middle; }
.queue-pulse { color: var(--cyan); font-weight: 800; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.match-panel { margin-top: 18px; }
.match-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.match-head h2 { font-size: 24px; margin: 4px 0 2px; }
.scoreline { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 46px; font-weight: 900; margin: 8px 0 20px; }
.scoreline .a { color: var(--team-a); }
.scoreline .b { color: var(--team-b); }
.scoreline .vs { font-size: 16px; color: var(--muted); letter-spacing: 2px; }
.match-clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: -8px 0 18px; font-size: 14px; color: var(--muted); }
.match-clock .clock b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; margin: 0 2px; }
.match-clock .clock.soon b { color: #ff6b6b; }
.match-clock .clock.sudden b { color: #ffb020; font-size: 15px; }
.team-title { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 6px; font-weight: 800; }
.team-title.a, .team-a { color: var(--team-a); }
.team-title.b, .team-b { color: var(--team-b); }
.connect-box { background: #071321; border: 1px dashed var(--blue); border-radius: 12px; padding: 16px; margin: 14px 0; }
.connect-box code { display: block; background: #10233a; padding: 9px 11px; border-radius: 8px; margin: 8px 0 0; user-select: all; overflow-x: auto; color: #cfe3f7; }
.map-vote { background: #071321; border: 1px solid #2370b3; border-radius: 12px; padding: 16px; margin: 14px 0; }
.map-vote-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.map-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--panel3); border: 1px solid #1a3550; border-radius: 10px; padding: 12px; color: var(--text); }
.map-tile:hover:not(:disabled) { border-color: #2d82c5; }
.map-tile:disabled { cursor: default; }
.map-tile.mine { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.map-tile.banned { opacity: .45; }
.map-tile.banned .map-name { text-decoration: line-through; }
.map-name { font-weight: 800; font-size: 13px; }
.map-img { display: block; margin: -12px -12px 2px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px 9px 0 0; background: #0b1622; }
.map-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* miniatury z plików tras TrackMania są zapisane do góry nogami */
.map-img.flip img { transform: scaleY(-1); }
.map-tile.banned .map-img img { filter: grayscale(1); }
.map-tile.banned .map-img.placeholder { filter: grayscale(1); }
/* brak grafiki mapy - kafelek w kolorze gry z nazwą mapy */
.map-img.placeholder { display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center;
  background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 65%),
    linear-gradient(135deg, #10263b, #0b1622); }
.map-img.placeholder span { font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
/* miniatura w tabeli wyników */
.map-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.map-img.sm { display: inline-flex; flex: none; width: 46px; margin: 0; border-radius: 5px; }
.map-img.sm.placeholder { padding: 2px; }
.map-img.sm.placeholder span { font-size: 7px; letter-spacing: .02em; }
/* mapy meczu na stronie meczu */
.map-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.map-card { width: 170px; max-width: calc(50% - 5px); background: var(--panel3); border: 1px solid #1a3550; border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px; }
.map-bar { height: 6px; background: #0a1624; border-radius: 3px; overflow: hidden; }
.map-bar span { display: block; height: 100%; background: var(--blue); transition: width .3s; }
.map-count { font-size: 12px; color: var(--muted); }
.map-voters { font-size: 12px; line-height: 1.3; }
.veto-log { font-size: 12px; color: var(--muted); margin: 0 0 12px; }

/* --- ligi i turnieje --- */
.admin-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; padding: 10px 14px; border: 1px dashed #7a5a22; border-radius: 11px; background: #2a22100f; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.team-card { background: var(--panel3); border: 1px solid #1a3550; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.team-card.mine { border-color: var(--blue); }
.team-card.winner { border-color: var(--gold); box-shadow: 0 0 0 1px #8a6a22 inset; }
.team-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.team-members, .room-players { display: flex; flex-wrap: wrap; gap: 6px; }
.member { display: inline-flex; align-items: center; gap: 6px; background: #0a1726; border: 1px solid #1c3854; border-radius: 9px; padding: 4px 8px 4px 4px; font-size: 12px; font-weight: 650; }
.member.empty { border-style: dashed; color: var(--muted); padding: 6px 12px; }
.member .icon-btn { width: 20px; height: 20px; }
.room-players .member { padding-right: 10px; }
.rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.round h4, .bracket-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.round .cmatch + .cmatch { margin-top: 8px; }
.cmatch { background: var(--panel3); border: 1px solid #1a3550; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.cmatch.reported { border-color: #8a6a22; }
.cmatch.bye { opacity: .6; }
.cm-side { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.cm-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-side b { font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.cm-side.win { color: var(--green); font-weight: 800; }
.cm-note { color: var(--gold); font-size: 12px; margin-top: 4px; }
.report { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #16304a; flex-wrap: wrap; }
.bracket { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 6px; }
.bracket-col { min-width: 230px; display: flex; flex-direction: column; }
.bracket-matches { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; flex: 1; }

/* --- regulamin --- */
.md { color: #c9d8ea; font-size: 14px; line-height: 1.65; }
.md h2 { font-size: 21px; margin: 0 0 12px; color: #fff; }
.md h3 { font-size: 17px; margin: 22px 0 8px; color: #fff; }
.md h4, .md h5 { font-size: 14px; margin: 18px 0 6px; color: #9bd3ff; text-transform: uppercase; letter-spacing: .5px; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--blue); }
.md strong { color: #fff; }
.md code { background: #10233a; border: 1px solid #1c3854; border-radius: 5px; padding: 1px 5px; font-size: 12px; color: #cfe3f7; }
.md blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--gold); background: #2a22100f; color: #e8d6a8; border-radius: 0 8px 8px 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.rules-editor textarea { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 360px; }
.rules-editor .row-actions { margin-top: 8px; }

/* --- gathery --- */
.my-room { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }

/* --- profil --- */
.profile-hero { margin: 25px 0 18px; border: 1px solid #21405c; border-radius: 22px; padding: 26px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background: radial-gradient(ellipse at 10% 0%, #1687ff33, transparent 55%), linear-gradient(120deg, #0f2236, #08121f); }
.profile-hero h1 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -1px; margin: 4px 0; }
.profile-main { flex: 1; min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: linear-gradient(150deg, #0d1b2c, #091522); border: 1px solid #1a344e; border-radius: 14px; padding: 16px; }
.tile span { color: var(--muted); font-size: 12px; display: block; }
.tile b { font-size: 28px; display: block; margin: 4px 0 2px; }
.tile small { color: var(--muted); font-size: 12px; }
.fav-games { display: flex; flex-wrap: wrap; gap: 14px; }
.fav-game { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted2); width: 76px; text-align: center; }
.fav-game:hover { color: #fff; }
.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mini-stats div { background: var(--panel3); border: 1px solid #1a3550; border-radius: 10px; padding: 10px; text-align: center; }
.mini-stats b { display: block; font-size: 18px; }
.mini-stats span { color: var(--muted); font-size: 12px; }
.fav-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 4px; }
.fav-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #1a3550; border-radius: 9px; cursor: pointer; font-size: 13px; }
.fav-option:has(input:checked) { border-color: var(--blue); background: #1687ff14; }

/* --- okna --- */
.modal-bg { display: none; position: fixed; inset: 0; z-index: 40; background: #02060ccc; backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { width: min(540px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: #0b1929; border: 1px solid #2a4b69; border-radius: 18px; padding: 24px; box-shadow: 0 25px 80px #0009; }
.modal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.modal p { color: #9db2c8; font-size: 14px; }
.close { border: 0; background: #17304a; color: #fff; border-radius: 8px; width: 34px; height: 34px; }
.modal.ready { text-align: center; border-color: var(--blue); max-width: 440px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 20px; }
.ready-timer { height: 6px; background: #0a1624; border-radius: 3px; overflow: hidden; margin: 16px 0; }
#ready-bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 1s linear; }
.ready-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ready-players .slot { width: 22px; height: 22px; }
.ready-players .slot.full { background: var(--green); border-color: var(--green); box-shadow: 0 0 8px var(--green); }

/* powiadomienia: style w sekcji "Powiadomienia i okna potwierdzeń" na końcu pliku */

footer { margin-top: 55px; border-top: 1px solid #193149; padding: 25px 0 35px; color: #7890a9; font-size: 12px; }
.foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot-brand { color: #dcecff; }
footer a:hover { color: #fff; }

/* --- responsywność --- */
@media (max-width: 1200px) { .games { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mm-grid { grid-template-columns: 1fr; } }
@media (max-width: 1050px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .split, .split.wide-left { grid-template-columns: minmax(0, 1fr); }
  .games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .queue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wrap { padding: 0 14px; }
  .nav { height: 62px; }
  .brand { flex: 1; }
  .account-chip span:not(.badge) { display: none; }
  .account .btn.ghost { display: none; }
}
@media (max-width: 760px) {
  .hero { margin-top: 14px; min-height: 420px; background: linear-gradient(0deg, #06101d 15%, #06101dcc 55%, #06101d66 100%), url('/img/hero.jpg') 70% center / cover no-repeat; }
  .hero-content { padding: 24px; }
  .hero p { font-size: 14px; }
  .hero-stats { gap: 18px; }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-art { height: 100px; }
  .section-head h2 { font-size: 20px; }
  .banner { align-items: flex-start; flex-direction: column; }
  .list-row { gap: 9px; padding: 9px; }
  .list-end { gap: 8px; }
  .list-end small:first-child:not(:last-child) { display: none; }
  .queue-grid { grid-template-columns: minmax(0, 1fr); }
  .game-hero { padding: 20px; flex-direction: column; align-items: flex-start; }
  .game-icon.xl { width: 76px; height: 76px; flex-basis: 76px; font-size: 40px; }
  .field-row { grid-template-columns: 1fr; }
  .fav-picker { grid-template-columns: 1fr; }
  .scoreline { font-size: 34px; }
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .input.search { max-width: none; }
  .toolbar > * { width: 100%; }
}

/* ---------- polityka prywatności / cookies ---------- */
a.tab { display: inline-block; }
.legal { max-width: 880px; padding: 26px 30px; }
.legal a.link, .md a.link { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.legal-cta { max-width: 880px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal-cta p { margin: 2px 0 0; }
.privacy-actions { display: grid; gap: 12px; }
.privacy-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel3); }
.privacy-action p { margin: 4px 0 0; max-width: 640px; }
.privacy-action .btn { flex-shrink: 0; }
.privacy-action.danger-zone { border-color: #5a2430; }
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 55; margin: 0 auto; max-width: 900px;
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  background: #0d2036f2; border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 12px 40px #0009; font-size: 13px; color: var(--muted2);
}
.cookie-bar p { margin: 0; flex: 1; }
.cookie-bar .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .legal { padding: 18px; }
  .privacy-action, .cookie-bar { flex-direction: column; align-items: stretch; }
}

/* ---------- logowanie Steam / Google ---------- */
.btn.google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.btn.google:hover { background: #f2f5f8; }
.google-g { width: 17px; height: 17px; vertical-align: -3px; }
.login-options { display: grid; gap: 6px; margin-bottom: 14px; }
.login-options .btn { justify-content: center; width: 100%; }
.login-options p { margin: 0 0 10px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 4px 0 6px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line2); }
.auth-form .check { margin: 4px 0 8px; align-items: flex-start; }
.auth-form .check input { margin-top: 3px; }
.auth-form .btn.wide { margin-top: 4px; }
.auth-links { text-align: center; font-size: 13px; margin: 12px 0 4px; color: var(--muted); }
.auth-links a { color: var(--cyan); }
.auth-links a:hover { text-decoration: underline; }
.auth-page { max-width: 460px; margin: 30px auto; }
.account-form { display: grid; gap: 4px; max-width: 420px; }

/* --- poprawki z audytu: przyciski-linki, baner, prośby, spory --- */
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
#site-banner:empty { display: none; }
#site-banner { margin-top: 14px; }
#site-banner .alert { margin-bottom: 8px; }
.announcement { font-weight: 700; }
.cm-note.bad { color: #ffb6bf; }
.pre { white-space: pre-wrap; }
.wrap-cell { white-space: normal; max-width: 380px; }
.room-players .member .icon-btn { margin-left: 4px; }

/* --- panel administratora --- */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-tile { display: block; background: var(--panel3); border: 1px solid #1a3550; border-radius: 12px; padding: 14px 16px; color: inherit; }
.admin-tile.clickable:hover { border-color: #2d6fa5; background: #11263c; }
.admin-tile strong { display: block; font-size: 26px; letter-spacing: -.5px; }
.admin-tile span { color: var(--muted); font-size: 12px; }
.admin-form { padding: 12px 0; border-top: 1px solid var(--line); }
.admin-form:first-of-type { border-top: 0; }
.admin-form > b { display: inline-block; margin-bottom: 8px; }
.admin-form .inline-form { align-items: center; }
.input.score.wide-num { width: 80px; }
.panel hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.list-row.dispute .list-end { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .admin-tiles { grid-template-columns: repeat(2, 1fr); }
  .admin-form .inline-form .input { max-width: none; }
}

/* ---- ligi: mecze gier bez serwera (ID z gry, gotowość, terminy, zrzuty ekranu, reputacja) ---- */
.comp-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--muted2); font-size: 13px; }
.cc-rules { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 4px; margin: 4px 0 12px; min-width: 0; }
.cc-rules legend { padding: 0 6px; font-weight: 700; font-size: 13px; }
.cmatch.mine { border-color: #2d6fa5; }
.cmatch.void { opacity: .7; }
.cm-format { font-size: 12px; letter-spacing: .5px; }
.cm-note.ok { color: var(--green); }
.cm-note.muted { color: var(--muted); }
.cm-details { margin-top: 8px; border-top: 1px solid #16304a; padding-top: 6px; }
.cm-details > summary { cursor: pointer; color: var(--cyan); font-size: 12px; font-weight: 700; padding: 6px 0; }
.cm-block { margin-top: 10px; }
.cm-block-title { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 6px; }
.cm-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-roster { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cm-id-name { font-size: 12px; color: var(--muted2); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-id code { font-size: 14px; font-weight: 700; color: var(--text); background: #0a1828; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; user-select: all; word-break: break-all; }
.cm-howto p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.cm-deadline { margin-top: 8px; font-size: 12px; }
.cm-ready { margin-top: 10px; }
.cm-ready .btn.wide { width: 100%; min-height: 44px; }
.alert.ok { border-color: #1f7a57; background: #0d2a20; color: #b9f5dc; }
.quick-scores { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.quick-scores .btn { min-width: 52px; min-height: 38px; font-variant-numeric: tabular-nums; }
.quick-scores .btn.active { border-color: var(--blue); background: #12345a; }
.report-head { width: 100%; }
.report-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.proof-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.proof-thumb { margin: 0; width: 96px; }
.proof-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line2); cursor: zoom-in; display: block; }
.proof-thumb figcaption { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 4px; overflow: hidden; }
.proof-upload { cursor: pointer; min-height: 38px; display: inline-flex; align-items: center; }
.proof-preview { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 10px; border-radius: 8px; }
.my-match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.my-match-list h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.rep-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted2); white-space: nowrap; }
.rep-badge.ok { border-color: #1f7a57; color: #8ff0c6; }
.rep-badge.warn { border-color: #8a6a22; color: var(--gold); }
.rep-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
.game-account-row:first-child { border-top: 0; }
.game-account-row .field { margin: 0; }
.game-account-row .hint { grid-column: 1 / -1; margin: 0; }
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.proof-pair .claim { background: var(--panel3); border: 1px solid #1a3550; border-radius: 10px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) {
  .my-match-list { grid-template-columns: 1fr; }
  .rounds { grid-template-columns: 1fr; }
  .bracket-col { min-width: 82vw; }
  .cm-rosters { grid-template-columns: 1fr; }
  .cmatch { font-size: 14px; padding: 10px 12px; }
  .input.score { width: 64px; min-height: 40px; font-size: 16px; }
  .report-row .btn { min-height: 40px; }
  .proof-pair { grid-template-columns: 1fr; }
  .game-account-row { grid-template-columns: 1fr; }
  .list-row.dispute .list-main, .list-row.dispute .list-end { flex: 1 1 100%; justify-content: flex-start; }
}
.list-row.dispute { flex-wrap: wrap; }
.list-row.dispute .list-main span, .proof-pair span { white-space: normal; }
.proof-pair .claim span, .list-row.dispute .list-main span .status { display: inline; }
.list-main span .chip { display: inline-block; margin-top: 0; }
.list-main strong small { font-weight: 400; }
.list-row.dispute .list-end { white-space: normal; gap: 8px; }

/* ---- Gry: jak gramy, platformy, gry mobilne ---- */
.game-art .genre.mobile-badge { top: auto; bottom: 10px; color: #ffe2a0; border-color: #8a6a2a; text-transform: none; letter-spacing: 0; font-size: 12px; }
.how-we-play { margin-top: 18px; }
.how-we-play .platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); font-size: 12px; font-weight: 700; color: var(--muted2); white-space: nowrap; }
.how-we-play .facts b { white-space: normal; }
.how-we-play .facts .how-account { display: block; }
.how-we-play .facts .how-account > div:first-child { display: flex; gap: 10px; align-items: baseline; }
.how-we-play .facts .how-account p,
.how-we-play .facts .how-account .alert { display: block; margin: 6px 0 0 32px; }
.how-we-play .facts code { word-break: break-all; }
@media (max-width: 640px) {
  .how-we-play .facts .how-account p,
  .how-we-play .facts .how-account .alert { margin-left: 0; }
}

/* ---- szybki mecz bez serwera ---- */
.status.playing { background: #3a2a0e; border-color: #b8862b; color: #ffe2a8; }
.status.disputed { background: #4a1420; border-color: #c03448; color: #ffd0d6; }
.quick-intro p { margin: 6px 0 0; }
.quick-account { display: flex; flex-direction: column; gap: 6px; }
.quick-account p { margin: 0; }
.quick-account-row { display: flex; gap: 8px; }
.quick-account-row .input { flex: 1; min-width: 0; }
.quick-ids { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.quick-player { display: flex; align-items: center; gap: 10px; background: var(--panel3); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.quick-player.me { opacity: .75; }
.quick-player-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.quick-id { font-size: 17px; font-weight: 800; letter-spacing: .5px; user-select: all; overflow-wrap: anywhere; color: #cfe3f7; background: transparent; padding: 0; }
.quick-howto { background: #071321; border: 1px dashed var(--line2); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.quick-howto summary { cursor: pointer; font-weight: 700; }
.quick-howto p { margin: 8px 0 0; font-size: 14px; color: var(--muted2); }
.quick-report { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.quick-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.quick-result { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; justify-content: center; padding: 10px 8px;
  background: var(--panel3); border: 1px solid #1a3550; border-radius: 12px; color: var(--text); cursor: pointer; }
.quick-result b { font-size: 22px; }
.quick-result span { font-size: 12px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.quick-result:hover, .quick-result.suggested { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.quick-score { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.quick-score label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); max-width: 130px; }
.quick-score label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-score .input.score { width: 72px; font-size: 18px; padding: 8px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions .btn { min-height: 44px; }
.quick-proofs { margin-top: 14px; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.proof { margin: 0; background: var(--panel3); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.proof img { display: block; width: 100%; height: 110px; object-fit: cover; }
.proof figcaption { font-size: 12px; color: var(--muted); padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.quick-admin { border: 1px dashed #c03448; border-radius: 12px; padding: 12px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.quick-admin .row-actions { flex-wrap: wrap; }
.quick-team { margin-top: 10px; }
.quick-elo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) {
  .quick-results { grid-template-columns: repeat(2, 1fr); }
  .quick-actions .btn { flex: 1 1 100%; justify-content: center; }
  .quick-player .btn { min-height: 40px; }
}

/* ---- pokoje szybkich meczów i poczekalnia ---- */
.quick-searching { text-align: center; border-color: #2370b3; background: linear-gradient(160deg, #10335a, var(--panel)); }
.quick-searching h2 { margin-top: 6px; }
.quick-searching p { margin: 6px auto; max-width: 560px; }
.quick-searching .btn { margin-top: 8px; }
.quick-radar { position: relative; width: 84px; height: 84px; margin: 4px auto 0; display: grid; place-items: center; }
.quick-radar b { font-size: 30px; position: relative; }
.quick-radar span { position: absolute; inset: 0; border: 2px solid var(--cyan); border-radius: 50%; opacity: 0; animation: radar 2.2s ease-out infinite; }
.quick-radar span + span { animation-delay: 1.1s; }
@keyframes radar { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
.quick-room { border-color: #2370b3; }
.quick-room .section-head h2 { margin: 2px 0 4px; }
.quick-room-me { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 6px; }
.quick-ready-on { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--green);
  border-radius: 12px; background: #37d69a14; }
.room-members { display: grid; gap: 8px; margin: 12px 0; }
.room-member { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel3); }
.room-member.ready { border-color: var(--green); }
.room-member .list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.room-member .list-main > span { color: var(--muted); font-size: 12px; }
.room-member .row-actions { flex-shrink: 0; }
.room-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room-id code { font-size: 13px; color: var(--text); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12px; font-weight: 700; color: var(--muted2); }
.chip.ok { border-color: var(--green); color: var(--green); }
.chip.play { border-color: var(--gold); color: var(--gold); }
.room-invite { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 12px; }
.room-invite summary { cursor: pointer; font-weight: 800; }
.room-friends { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.room-search { margin-top: 8px; }
.room-search-results .list-row { margin-top: 6px; }
.room-footer { justify-content: space-between; margin-top: 10px; }
.quick-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.quick-intro summary { cursor: pointer; }
@media (max-width: 640px) {
  .room-member { flex-wrap: wrap; }
  .room-member .row-actions { width: 100%; justify-content: flex-end; }
  .quick-room-me .btn.big { width: 100%; }
  .quick-banner .row-actions { width: 100%; }
}
.form .check { display: flex; margin: 8px 0; }
.room-member .list-main { flex: 1 1 180px; }
.room-member .list-main strong { white-space: normal; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.room-member .list-main span.chip, .room-member .list-main .captain { display: inline-flex; margin-top: 0; }
.room-member .list-main span.room-id { display: flex; white-space: normal; }
.room-member .list-main > span { white-space: normal; }
.quick-room .section-head { flex-wrap: wrap; align-items: flex-start; }

/* ---- turnieje i drużyny ---- */
.org-tasks .list-row { text-decoration: none; color: inherit; }
.admin-bar { flex-wrap: wrap; }
.org-games { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; }
.checkin-note { margin-top: 12px; }
.seed { display: inline-block; min-width: 24px; padding: 0 5px; border-radius: 6px; background: #0e2a46; border: 1px solid #2370b3; color: #9bd3ff; font-size: 12px; text-align: center; }
.cm-schedule .cm-scheduled { margin-bottom: 6px; }
.sched-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.sched-slot { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line2); border-radius: 9px; font-size: 12px; }
.sched-form { margin-top: 6px; }
.sched-form summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.sched-inputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sched-inputs .input { flex: 1 1 180px; min-width: 0; }
.cm-manage .row-actions { flex-wrap: wrap; }
.roster-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.roster-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roster-pick.muted { opacity: .6; cursor: not-allowed; }
.team-tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: #1687ff22; border: 1px solid #2370b3; color: #9bd3ff; font-size: .8em; font-weight: 800; letter-spacing: .5px; vertical-align: middle; }
.team-tag-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--panel2); font-size: 18px; flex: none; }
.team-tag-ico.lg { width: 72px; height: 72px; font-size: 36px; border-radius: 16px; }
.tm-members { display: flex; flex-direction: column; gap: 8px; }
.tm-member { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--panel3); border: 1px solid #1a3550; border-radius: 11px; }
.tm-member .player-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tm-invite { margin-bottom: 10px; }
.tm-results { margin-top: 8px; }
/* klany: składy, role, historia */
.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.squad-card { background: var(--panel2); border: 1px solid #1a3550; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.squad-head { display: flex; align-items: center; gap: 10px; }
.squad-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.squad-head strong { overflow-wrap: anywhere; }
.squad-card .tm-member { padding: 6px 8px; }
.sq-add { display: flex; gap: 6px; flex-wrap: wrap; }
.sq-add .input { flex: 1 1 120px; min-width: 0; }
.squad-icons { display: inline-flex; gap: 4px; }
.sub-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 900; flex: none; }
.role-badge { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; background: #1687ff22; border: 1px solid #2370b3; color: #9bd3ff; }
.role-badge.owner { background: #8a6a2233; border-color: var(--gold); color: var(--gold); }
.team-log { display: flex; flex-direction: column; }
.squad-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 9px; border-radius: 10px; background: var(--panel3); border: 1px solid #1a3550; font-size: 13px; }
.challenge-row.incoming { border-color: var(--gold); }
.squad-rules { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.squad-rules .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; }
.chip.bad { border-color: var(--red); color: var(--red); }
.penalties { width: 100%; }
.penalties summary { cursor: pointer; color: var(--muted2); }
.penalty-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #1a3550; }
.division-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.division-move { width: 22px; text-align: center; flex: none; }
.list-row.mine { border-color: var(--blue); }
.challenge-dir { width: 32px; text-align: center; font-size: 18px; flex: none; }
.challenge-row .list-main span, .challenge-row .list-main strong { white-space: normal; }
.challenge-row .form-dot { display: inline-flex; }
.squad-card [data-sq-challenge] { align-self: flex-start; }
.podium { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; font-size: 12px; }
.podium-item { display: inline-flex; align-items: center; gap: 5px; }
.list-main .podium span, .list-main .podium a { display: inline-flex; align-items: center; gap: 5px; margin-top: 0; white-space: nowrap; }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.trophy { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel3); border: 1px solid #1a3550; min-width: 0; }
.trophy:hover { border-color: var(--gold); }
.trophy-ico { font-size: 26px; flex: none; }
.trophy b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.trophy small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.list-main .clan-squads { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; white-space: normal; }
.clan-squads .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; }
.profile-clan .list-main strong { white-space: normal; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-clan .list-main strong span, .clan-squads span { display: inline-flex; margin-top: 0; overflow: visible; }
.clan-squads .chip { color: var(--text); }
.clan-squads .game-icon.xs { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; border-radius: 4px; }
.clan-squads .captain, .clan-squads .sub-badge { width: 15px; height: 15px; font-size: 9px; }
.team-log-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid #1a3550; font-size: 13px; }
.team-log-row:last-child { border-bottom: 0; }
.list-row .list-main strong .team-tag { display: inline-block; margin: 0 2px 0 0; color: #9bd3ff; font-size: 12px; }
@media (max-width: 640px) {
  .sched-inputs .input, .sched-inputs .btn { flex-basis: 100%; }
  .tm-member .row-actions { width: 100%; justify-content: flex-end; }
  .squad-card .tm-member { flex-wrap: nowrap; }
  .squad-card .tm-member .row-actions { width: auto; flex: none; }
}
/* ---- strona główna "Twoje", aktualności, kalendarz, udostępnianie ---- */
.you { margin-top: 22px; }
.you > .panel, .you > .match-panel { margin-bottom: 18px; }
.you .mine { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.mine-item { min-width: 0; }
.mine-item > div { min-width: 0; }
.mine-item strong, .mine-item span { overflow-wrap: anywhere; }
.mine-item.urgent { border-color: var(--gold); background: linear-gradient(100deg, #3a2c0c, #0c1929); }
.mine-item.here { border-color: #267d65; background: linear-gradient(100deg, #0f3328, #0c1929); }
.quick-start-row { gap: 10px; flex-wrap: wrap; }
.quick-start-game { display: flex; align-items: center; gap: 12px; flex: 1 1 160px; min-width: 0; }
.quick-start-row .list-end { gap: 6px; flex-wrap: wrap; }
.you-empty { display: grid; gap: 12px; justify-items: center; }
/* "Szybki start": przycisk zwijania tylko na telefonie, na większych ekranach panel zawsze rozwinięty */
.qs-toggle { display: none; }
.btn-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.fav-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin: 12px 0 16px; max-height: 55vh; overflow-y: auto; }
.fav-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 650; }
.fav-option:has(input:checked) { border-color: var(--blue); background: #10335a; }
.home-more { display: none; margin-top: 12px; }
.you-solo .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
/* sekcje strony głównej w dwóch kolumnach: panele równej wysokości, żeby się nie rozjeżdżały */
@media (min-width: 901px) { .home-news.split, .home-comps.split, .home-friends.split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.home-news.split > .panel, .home-comps.split > .panel, .home-friends.split > .panel { display: flex; flex-direction: column; }
/* ranking na stronie głównej: gry z ikonami, pod nimi tryby wybranej gry */
.rank-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 2px 0 14px; }
.rank-game { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 6px; background: var(--panel3); border: 1px solid #1a3550; border-radius: 11px; color: #8fa7c0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; min-width: 0; }
.rank-game span { max-width: 100%; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
a.rank-game { text-decoration: none; }
.rank-game:hover { border-color: #285274; color: #fff; }
.rank-game.active { background: #153452; border-color: var(--blue); color: #fff; }
.rank-modes { padding-top: 12px; border-top: 1px solid #16304a; }
#rank-anchor { scroll-margin-top: calc(var(--head) + 12px); }
.rank-group { margin: 4px 0 8px; color: #8fa7c0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* aktualności */
.news-row { align-items: flex-start; }
.news-row .list-main strong { white-space: normal; }
.news-ico { background: #10233a; }
.list-main .news-pin { display: inline; margin: 0; }
.news-excerpt { margin: 6px 0 0; color: var(--muted2); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-panel .news-excerpt { -webkit-line-clamp: 2; }
.news-article { max-width: 860px; }
.news-article h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.8px; margin: 10px 0 16px; overflow-wrap: anywhere; }
.news-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.news-game { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.news-article .actions { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.news-filter { max-width: 100%; }
.news-preview { border: 1px dashed var(--line2); border-radius: 11px; padding: 14px; margin: 0 0 14px; }
.news-form textarea { width: 100%; resize: vertical; font-family: inherit; }

/* kalendarz */
.cal-days { display: grid; gap: 18px; }
.cal-day-head { font-size: 14px; color: var(--muted2); text-transform: none; letter-spacing: 0; margin: 0 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cal-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: var(--cyan); width: 44px; flex: none; }
.cal-note { margin-top: 18px; }
.cal-event .list-main strong .ok-text { display: inline; margin: 0; font-size: inherit; color: var(--green); }

@media (max-width: 860px) {
  .you-grid { grid-template-columns: 1fr; }
}
/* menu z Historią meczów, Aktualnościami i Kalendarzem: ciaśniej na średnich ekranach,
   Kalendarz, Aktualności i Historia meczów chowają się do stopki/strony głównej (pełne menu w ☰ na telefonie) */
@media (min-width: 861px) {
  nav a { white-space: nowrap; }
}
@media (min-width: 861px) and (max-width: 1440px) {
  nav { gap: 13px; font-size: 12px; }
  .nav { gap: 14px; }
}
@media (min-width: 861px) and (max-width: 1240px) {
  nav a[data-nav="calendar"] { display: none; }
}
@media (min-width: 861px) and (max-width: 1140px) {
  nav a[data-nav="news"] { display: none; }
}
@media (min-width: 861px) and (max-width: 1040px) {
  nav a[data-nav="matches"] { display: none; }
}
@media (max-width: 640px) {
  /* zalogowany na telefonie: najpierw "Twoje", aktualności i rozgrywki, lista gier niżej i krótsza */
  .home-stack { display: flex; flex-direction: column; }
  .home-stack > .section { margin: 0 0 26px; }
  .home-stack > .you { order: 1; margin-top: 18px; }
  .home-stack > .home-news { order: 2; }
  .home-stack > .home-comps { order: 3; }
  .home-stack > .home-games { order: 4; }
  .home-stack > .home-friends { order: 5; }
  .home-games .game.home-extra { display: none; }
  .home-more { display: flex; }
  .quick-start-row .list-end { width: 100%; }
  .quick-start-row .list-end .btn { flex: 1; justify-content: center; }
  .quick-panel { padding: 0; overflow: hidden; }
  .qs-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; background: none; border: 0; color: inherit; text-align: left; font: inherit; }
  .qs-bolt { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 20px; background: linear-gradient(135deg, #1694ff, #1457c8); box-shadow: 0 5px 18px #087bff44; }
  .qs-title { flex: 1; min-width: 0; display: grid; }
  .qs-title strong { font-size: 17px; letter-spacing: -.4px; }
  .qs-title span { color: var(--muted); font-size: 12px; }
  .qs-icons { display: flex; flex: none; }
  .qs-icons .game-icon { margin-left: -10px; box-shadow: 0 0 0 2px var(--panel); }
  .qs-icons .game-icon:nth-child(n+4) { display: none; }
  .qs-chev { flex: none; color: var(--muted2); font-size: 16px; transition: transform .25s; }
  .quick-panel.open .qs-chev { transform: rotate(180deg); }
  .qs-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
  .quick-panel.open .qs-body { grid-template-rows: 1fr; }
  .qs-inner { min-height: 0; overflow: hidden; visibility: hidden; padding: 0 14px; transition: visibility 0s .28s, padding .28s; }
  .quick-panel.open .qs-inner { visibility: visible; padding: 0 14px 14px; transition: visibility 0s, padding .28s; }
  .qs-inner > .section-head { margin-bottom: 10px; align-items: center; }
  .qs-inner > .section-head h2 { display: none; }
  .qs-inner > .section-head p { margin: 0; }
  .cal-event .list-main strong, .cal-event .list-main span { white-space: normal; }
}
/* ---- czat i moderacja (chat.js, moderation.js) ---- */
.chat-box { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 12px; border: 1px solid var(--line2); border-radius: 14px; background: #08162a; min-width: 0; }
.chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.chat-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; min-height: 64px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.chat-empty { margin: auto 0; text-align: center; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.chat-msg .avatar { flex-shrink: 0; margin-top: 2px; }
.chat-msg-main { flex: 1; min-width: 0; background: var(--panel3); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 6px 10px; }
.chat-msg.mine .chat-msg-main { background: #11335a; border-color: #23578d; }
.chat-msg.hidden-msg .chat-msg-main { background: transparent; border-style: dashed; }
.chat-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.chat-meta a { font-weight: 800; color: var(--muted2); font-size: 12px; overflow-wrap: anywhere; }
.chat-meta .chip { font-size: 12px; padding: 0 6px; }
.chat-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.chat-act { background: none; border: 0; color: var(--muted); padding: 2px 6px; border-radius: 6px; font-size: 12px; min-width: 28px; min-height: 26px; }
.chat-act:hover { color: var(--text); background: #ffffff12; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 14px; }
.chat-text .link { font-size: inherit; font-weight: 600; }
.chat-link { background: none; border: 0; padding: 0; color: #60baff; font-weight: 700; font-size: 13px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-quick[hidden], .chat-form[hidden], .chat-closed[hidden] { display: none; }
.chat-form { display: flex; gap: 8px; min-width: 0; }
.chat-form .input { flex: 1; min-width: 0; }
.chat-form .btn { flex-shrink: 0; }
.chat-closed { margin: 0; }
.report-btn { padding: 6px 10px; }
/* przyciski Zgłoś / Zablokuj obok „Dodaj do znajomych” - zawijają się na telefonie */
.profile-hero .row-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.report-form { display: flex; flex-direction: column; gap: 10px; }
.report-reasons { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.report-reasons .check { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.report-quote { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--red); background: #ff5a6a12; border-radius: 0 8px 8px 0;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.report-list { display: grid; gap: 10px; }
.report-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); min-width: 0; }
.report-card.open { border-color: #7a2a35; }
.report-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-details { margin: 0; overflow-wrap: anywhere; }
.report-context { flex-wrap: wrap; align-items: center; font-size: 13px; }
.report-close { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.report-close .check { display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) {
  .chat-box { padding: 10px; margin: 12px 0; }
  .chat-list { max-height: 260px; }
  .chat-form .btn { min-height: 44px; }
  .chat-form .input { min-height: 44px; font-size: 16px; } /* 16 px - iOS nie powiększa strony przy pisaniu */
  .chat-quick .btn { flex: 1 1 calc(50% - 6px); min-height: 40px; white-space: normal; text-align: center; padding: 8px; }
}
/* ---- ranking: rangi, forma, wykres ELO, karty gier, sezony, podejrzane pary ---- */
.rank-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--muted2); vertical-align: middle; }
.list-main .rank-chip, .rank-list .rank-chip { display: inline-flex; margin-top: 0; }
.rank-chip.placement { border-style: dashed; color: var(--muted); }
.rank-chip.rank-bronze { border-color: #8a5a32; color: #e0a370; }
.rank-chip.rank-silver { border-color: #6f8296; color: #cfdbe7; }
.rank-chip.rank-gold { border-color: #8a6a22; color: var(--gold); }
.rank-chip.rank-platinum { border-color: #2b8a8a; color: #7fe3dc; }
.rank-chip.rank-diamond { border-color: #3f6fd6; color: #9cc0ff; }
.form-dots { display: inline-flex; gap: 4px; }
.form-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 900; color: #06121f; }
.form-dot.form-W { background: var(--green); }
.form-dot.form-L { background: var(--red); }
.form-dot.form-D { background: var(--muted); }
.draw { color: var(--muted2); font-weight: 800; }
.nowrap { white-space: nowrap; }
.alert.warn { border-color: #8a6a22; background: #2a2210; color: #f6d79a; }
.game-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.game-card { background: var(--panel3); border: 1px solid #1a3550; border-radius: 12px; padding: 12px; min-width: 0; }
.game-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.game-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-card-title strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.game-card-stats b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.game-card-stats span { color: var(--muted); font-size: 12px; display: block; }
.game-card-form { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.elo-chart { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.elo-chart-empty { margin: 10px 0 0; }
.elo-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.elo-area { fill: var(--cyan); opacity: .08; }
.elo-base { stroke: var(--line2); stroke-width: 1; }
.elo-rank-line { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 3 4; }
.elo-axis { fill: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.elo-value { fill: var(--text); font-size: 12px; font-weight: 800; }
.elo-last { fill: var(--cyan); stroke: var(--panel3); stroke-width: 2; }
.elo-hit { fill: transparent; cursor: pointer; }
.elo-hit:hover { fill: #49c8ff33; }
.rank-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-me { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid #2370b3; background: #0e2a46; border-radius: 10px; font-size: 14px; }
.rank-legend { margin: 12px 0 0; }
.history-table td { vertical-align: middle; }
.history-table td:nth-child(2), .history-table td:nth-child(4) { white-space: normal; }
.history-table td:nth-child(5), .history-table td:nth-child(6) { white-space: nowrap; }
.pair-list { display: grid; gap: 10px; }
.pair-row { border: 1px solid #1a3550; background: var(--panel3); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.pair-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pair-players { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pair-wins { font-variant-numeric: tabular-nums; }
.chip.warn { border-color: var(--gold); color: var(--gold); }
.pair-head .pair-chips { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.pair-section { flex-wrap: wrap; }
.pair-section .filters { flex-wrap: nowrap; margin-bottom: 0; }
.pair-section .filter { white-space: nowrap; }
@media (max-width: 640px) {
  .rank-selects { width: 100%; }
  .rank-selects .input { flex: 1; min-width: 0; }
  .game-cards { grid-template-columns: 1fr; }
  .rank-table th:nth-child(6), .rank-table td:nth-child(6), .rank-table th:nth-child(7), .rank-table td:nth-child(7),
  .rank-table th:nth-child(8), .rank-table td:nth-child(8) { display: none; }
  .history-table th:nth-child(1), .history-table td:nth-child(1),
  .history-table th:nth-child(3), .history-table td:nth-child(3) { display: none; }
  .history-table .hist-mobile { display: block; }
}
.hist-mobile { display: none; }

/* ---- powiadomienia: dzwonek, lista, push, obserwowane gry ---- */
.ntf { position: relative; }
.ntf:empty { display: none; }
.ntf-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 12px; background: #10233a; color: var(--text); font-size: 18px; padding: 0; }
.ntf-bell:hover { filter: brightness(1.15); }
.ntf-bell .ntf-count { position: absolute; top: -6px; right: -7px; min-width: 18px; text-align: center; line-height: 14px; border: 2px solid #07111f; }
.ntf-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 380px; max-height: min(70vh, 560px); display: flex; flex-direction: column; background: #0b1828; border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 50px #000a; z-index: 40; overflow: hidden; }
.ntf-panel[hidden] { display: none; }
.ntf-head, .ntf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.ntf-head { border-bottom: 1px solid var(--line); }
.ntf-foot { border-top: 1px solid var(--line); }
.ntf-panel .ntf-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ntf-list { display: flex; flex-direction: column; gap: 4px; }
.ntf-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted2); text-align: left; }
.ntf-item:hover { background: #12263c; border-color: var(--line); }
.ntf-item.unread { background: #10243b; color: var(--text); border-color: #1d3d5e; }
.ntf-icon { flex: 0 0 26px; font-size: 18px; line-height: 24px; text-align: center; }
.ntf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; overflow-wrap: anywhere; }
.ntf-main strong { font-weight: 700; }
.ntf-body { color: var(--muted2); font-size: 12px; }
.ntf-time { color: var(--muted); font-size: 12px; }
.ntf-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--cyan); }
.ntf-empty { padding: 14px; margin: 0; text-align: center; }
.ntf-push { margin: 0; }
.ntf-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted2); }
.ntf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ntf-slider { position: relative; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 99px; background: #233a55; border: 1px solid var(--line2); transition: .15s; }
.ntf-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted2); transition: .15s; }
.ntf-switch input:checked + .ntf-slider { background: #1262dd; border-color: #238dff; }
.ntf-switch input:checked + .ntf-slider::after { transform: translateX(16px); background: #fff; }
.ntf-switch input:focus-visible + .ntf-slider { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ntf-switch input:disabled + .ntf-slider { opacity: .5; }
.ntf-switch.page { margin-top: 6px; }
.ntf-page .ntf-list { gap: 6px; }
.ntf-page .panel h3 { margin-bottom: 6px; }
.ntf-watched { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ntf-watch-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }
@media (max-width: 640px) {
  .ntf-bell { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  /* telefon: lista na pełną szerokość pod nagłówkiem */
  .ntf-panel { position: fixed; top: 62px; left: 0; right: 0; width: auto; max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); border-radius: 0 0 14px 14px; border-left: 0; border-right: 0; }
  .ntf-watch-row .btn { width: 100%; }
}
/* ---- nagłówek na wąskich telefonach (≤ 400 px): logo się skraca, przyciski nie wychodzą poza ekran ---- */
@media (max-width: 400px) {
  .nav { gap: 8px; }
  .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  .navright { gap: 6px; flex: none; }
  .navright .account .btn.primary { padding: 8px 12px; font-size: 13px; }
}
/* ID z gry w meczu zostaje w jednej linii; przyciski Kopiuj / Zgłoś schodzą pod spód na wąskim ekranie */
.quick-player { flex-wrap: wrap; }
.quick-player-main { flex: 1 1 170px; min-width: 0; }
.quick-id { white-space: nowrap; }
/* ---- profil: konta w grach (lista podpiętych ID + dodawanie) ---- */
.ga-list { display: grid; gap: 8px; margin-bottom: 14px; }
.ga-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel3); flex-wrap: wrap; }
.ga-item.editing { border-color: #2370b3; }
.ga-main { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ga-value { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.ga-edit { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ga-edit p { margin: 0; }
.ga-edit-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ga-edit-row .input { flex: 1 1 160px; min-width: 0; }
.ga-add { border-top: 1px solid var(--line); padding-top: 12px; }
.ga-add h4 { margin-bottom: 4px; }
.ga-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ga-add-row .field { margin: 8px 0 0; }
.ga-add p { margin: 6px 0 0; }
@media (max-width: 640px) {
  .ga-add-row { grid-template-columns: 1fr; }
  .ga-item .row-actions { width: 100%; justify-content: flex-end; }
}
/* ---- historia sezonów (profil, rankingi) ---- */
.bad-text { color: var(--red); }
.season-history { display: grid; gap: 12px; }
.season-block { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel3); }
.season-block.current { border-color: #2370b3; }
.season-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.season-table { width: 100%; font-size: 13px; }
.season-table td, .season-table th { padding: 6px 6px; }
.season-mode { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.season-total { display: block; }
.season-row .list-main span { white-space: normal; }
.season-cup { width: 32px; text-align: center; font-size: 20px; }
/* nagłówek profilu: kolumna z nickiem zajmuje resztę miejsca, przyciski schodzą pod spód na telefonie */
.profile-hero .profile-main { flex: 1 1 200px; min-width: 0; }
.profile-hero .meta-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.profile-hero .rank-badge { white-space: normal; }
/* historia sezonów: tabela przewija się w swoim bloku, strona nie rozjeżdża się na boki */
.season-history, .season-block { min-width: 0; }
.season-block .table-wrap { max-width: 100%; }
@media (max-width: 640px) {
  .profile-hero { padding: 18px; gap: 14px; }
  .season-table .season-total { white-space: normal; }
  .season-table td, .season-table th { padding: 6px 4px; }
}
.season-rows { display: grid; gap: 8px; }
.season-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.season-line:first-child { border-top: 0; padding-top: 0; }
.season-line .season-record { grid-column: 1 / -1; font-size: 13px; }
.season-stats { white-space: nowrap; font-size: 13px; }
@media (max-width: 400px) { .season-line { grid-template-columns: 1fr; } }
.transfer-window { margin-top: 12px; padding-top: 10px; border-top: 1px solid #1a3550; }

/* --- Premium: odznaki przy nicku, strona Premium (pages/premium.js) --- */
.sup-badge { color: var(--gold); font-size: 12px; line-height: 1; margin-left: -3px; }
.sup-badge.founder { color: var(--cyan); }
.player-cell.premium span:not(.sup-badge) { color: #ffd98a; }
.player-cell.premium:hover span:not(.sup-badge) { color: #ffe7b3; }
.sup-row { margin: 2px 0 6px; }
.sup-tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; color: var(--gold); background: #2a2210; border: 1px solid #8a6a22; }
.sup-tag.founder { color: var(--cyan); background: #0e2a46; border-color: #2370b3; }
.sup-tag.supporter { color: var(--support); background: #0f2a1c; border-color: #2f8a57; text-decoration: none; }
.sup-badge.supporter { color: var(--support); }
/* strona Wsparcie (pages/support.js) */
.premium-hero.support-hero { border-color: #1f5a3a; background: radial-gradient(ellipse at 90% 0%, #49d18a2e, transparent 55%), linear-gradient(120deg, #0f1f18, #08121f); }
.premium-hero.support-hero .eyebrow { color: var(--support); }
.support-goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.support-raised { font-size: 28px; font-weight: 900; letter-spacing: -.5px; }
.support-pct { font-size: 20px; color: var(--support); }
.support-bar { height: 14px; background: #071321; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.support-bar div { height: 100%; min-width: 4px; border-radius: 99px; background: linear-gradient(90deg, #1f9d5c, var(--support)); box-shadow: 0 0 14px #49d18a55; transition: width .4s; }
.support-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.support-stats div { background: var(--panel3); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; }
.support-stats strong { font-size: 20px; }
.support-stats span { color: var(--muted); font-size: 12px; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.support-form { display: flex; flex-direction: column; gap: 12px; }
.support-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.support-amount { display: flex; flex-direction: column; gap: 4px; max-width: 220px; }
.support-amount span { font-size: 12px; color: var(--muted); }
.support-people { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.premium-chip { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid #8a6a22;
  background: #2a2210; color: #ffd98a; font-size: 12px; font-weight: 800; white-space: nowrap; }
.premium-chip:hover, .premium-chip.active { border-color: var(--gold); color: #ffe7b3; }
@media (max-width: 1200px) { .premium-chip span { display: none; } .premium-chip { padding: 0 10px; } }
.premium-hero { margin: 28px 0 18px; padding: 30px; border: 1px solid #5a4a1e; border-radius: 22px;
  background: radial-gradient(ellipse at 90% 0%, #f2b84b2e, transparent 55%), linear-gradient(120deg, #1a1a12, #08121f); }
.premium-hero h1 { font-size: clamp(26px, 3.8vw, 40px); letter-spacing: -1px; margin: 10px 0; }
.premium-hero p { color: #c9d6e4; max-width: 720px; margin: 0; }
.premium-hero .eyebrow { color: var(--gold); }
.premium-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.premium-status p { margin: 3px 0 0; }
.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 18px 0; }
.perk { display: flex; gap: 12px; align-items: flex-start; background: var(--panel3); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.perk p { margin: 3px 0 0; }
.perk-ico { font-size: 22px; line-height: 1.2; color: var(--gold); }
.premium-founder { color: #9bd8ff; margin: 6px 0 12px; }
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.price-card { position: relative; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; }
.price-card.best { border-color: #8a6a22; box-shadow: 0 0 0 1px #8a6a2266, 0 10px 30px #f2b84b14; }
.price-card h3 { font-size: 16px; }
.price-card .price { font-size: 30px; font-weight: 900; letter-spacing: -1px; margin: 8px 0 2px; }
.price-card p { margin: 0 0 6px; }
.price-card .btn.wide { margin-top: auto; }
.price-card .price-buy { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.price-card .price-buy .btn.wide { margin-top: 0; }
.price-flag { position: absolute; top: -10px; right: 14px; background: var(--gold); color: #1a1406; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; padding: 3px 9px; border-radius: 99px; }
.premium-consent { display: flex; align-items: flex-start; margin: 16px 0 6px; max-width: 760px; }
.premium-consent input { margin-top: 4px; flex: none; }
.premium-methods { margin: 6px 0 20px; }
@media (max-width: 640px) {
  .premium-hero { padding: 20px; margin-top: 16px; }
}

/* --- Klan Premium i serwer klanu (pages/clanPremium.js) --- */
.clan-premium { --accent: var(--gold); }
.clan-premium.accent-cyan { --accent: var(--cyan); }
.clan-premium.accent-green { --accent: var(--green); }
.clan-premium.accent-red { --accent: #ff6b7a; }
.clan-premium.accent-purple { --accent: #b48cff; }
.clan-premium.accent-orange { --accent: #ff9f43; }
.list-row.clan-premium { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--panel3)); }
.list-row.clan-premium .team-tag { border-color: var(--accent); color: var(--accent); }
.game-hero.clan-premium { border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(120deg, #0f2236, #08121f); }
.game-hero.clan-premium .team-tag { border-color: var(--accent); color: var(--accent); }
.clan-star { color: var(--accent, var(--gold)); font-size: 13px; font-style: normal; }
.clan-recruiting { display: block; color: #ffe2a8; font-size: 12px; margin-top: 2px; }
.sup-tag.clan { color: var(--accent, var(--gold)); border-color: color-mix(in srgb, var(--accent, var(--gold)) 60%, transparent); background: transparent; }
.clan-perks { margin: 8px 0 12px; padding-left: 18px; color: var(--muted2); font-size: 13px; }
.clan-perks li { margin: 3px 0; }
.price-cards.compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 12px; }
.price-cards.compact .price { font-size: 24px; }
.clan-settings { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.credit-log { margin-top: 12px; }
.credit-log summary { cursor: pointer; color: var(--muted2); font-size: 13px; font-weight: 700; }
.credit-log .list, .credit-log .bookings { margin-top: 8px; }
.bookings { display: grid; gap: 10px; }
.booking-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--panel3); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.booking-row.active { border-color: #c03448; }
.booking-row.cancelled, .booking-row.missed, .booking-row.done { opacity: .75; }
.booking-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 280px; }
.booking-end { display: flex; align-items: flex-start; gap: 8px; }
/* rezerwacja: adres serwera */
.booking-row .connect-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; padding: 0; border: 0; background: none; }
.booking-row .connect-box code { display: inline-block; margin: 0; flex: 0 1 auto; min-width: 0; background: #071321; border: 1px solid #25435f; border-radius: 8px; padding: 6px 10px; font-size: 12px; overflow-wrap: anywhere; }
.busy-slots { margin: -4px 0 6px; }
.busy-slots p { margin: 0; }

/* --- Partnerzy: sponsor, nagroda, transmisja, gdzie kupić, pasek partnerów, media kit (pages/partners.js) --- */
.feat-badge { display: inline-block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: #1a1406; background: var(--gold); border-radius: 99px; padding: 2px 8px; vertical-align: middle; }
.prize-badge { font-size: 13px; vertical-align: middle; margin-left: 2px; font-style: normal; }
.feat-badge, .sponsor-row em.status { font-style: normal; }
h1 .feat-badge { font-size: 12px; }
.sponsor-panel { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.sponsor-card { display: flex; gap: 14px; align-items: center; flex: 1 1 280px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel3); }
.sponsor-card:hover { border-color: #2d6fa5; }
.sponsor-card b { display: block; font-size: 17px; }
.sponsor-card small { color: var(--muted); }
.sponsor-logo { width: 120px; height: 60px; object-fit: contain; border-radius: 8px; background: #fff; padding: 6px; flex: none; }
.sponsor-logo.ph { display: grid; place-items: center; background: var(--panel2); font-size: 26px; }
.sponsor-logo.sm { width: 72px; height: 36px; padding: 3px; }
.sponsor-logo.sm.ph { font-size: 18px; }
.prize-box { flex: 1 1 220px; padding: 10px 14px; border-radius: 12px; border: 1px solid #8a6a22; background: #2a2210; display: grid; align-content: center; gap: 2px; }
.prize-box b { color: #ffe2a8; font-size: 16px; }
.prize-box .eyebrow, .sponsor-card .eyebrow { font-size: 12px; }
.stream-box { aspect-ratio: 16 / 9; max-height: 520px; width: 100%; border-radius: 12px; background: #000 radial-gradient(ellipse at center, #12375b, #000 70%);
  display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 16px; }
.stream-box p { max-width: 520px; margin: 0; }
.stream-frame { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.store-link { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel3); }
.store-link:hover { border-color: #2d6fa5; }
.store-link small { color: var(--muted); }
.store-link span { margin-left: auto; color: var(--muted); }
.partners-strip { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--panel); }
.partners-strip.flat { border: 0; padding: 0; background: none; }
.partners-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.partners-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.partner { display: grid; place-items: center; height: 56px; min-width: 120px; padding: 6px 12px; border-radius: 10px; background: #fff; color: #111; }
.partner img { max-height: 44px; max-width: 160px; object-fit: contain; }
.partner:hover { box-shadow: 0 0 0 2px var(--blue); }
.partners-hero { border-color: #21405c; background: radial-gradient(ellipse at 90% 0%, #1687ff33, transparent 55%), linear-gradient(120deg, #0f2236, #08121f); }
.partners-hero .eyebrow { color: #58b9ff; }
.mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mk-tile { background: var(--panel3); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.mk-tile strong { display: block; font-size: 28px; letter-spacing: -.5px; }
.mk-tile span { color: var(--muted); font-size: 12px; }
.mk-bars { display: grid; gap: 10px; }
.mk-bar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.mk-track { height: 10px; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.mk-track i { display: block; height: 100%; background: linear-gradient(90deg, #1687ff, #49c8ff); border-radius: 99px; }
.sponsor-row .list-main span { display: block; }
.partners-strip.flat .partners-head { display: none; }
.tm-maps td.best { color: var(--green); font-weight: 800; }

/* --- Time Attack solo (Trackmania): kolejka do serwera, panel sesji, ranking punktowy --- */
.queue-card.solo .queue-count span { font-size: 14px; }
.solo-status b, .solo-pos b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.solo-pos { background: #0e2a46; border: 1px solid #2370b3; border-radius: 9px; padding: 7px 10px; font-size: 13px; }
.map-grid.solo-maps { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.map-grid.solo-maps .map-tile { padding: 8px; gap: 4px; }
.ta-board { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin: 4px 0 16px; }
.ta-board > div { background: var(--panel3); border: 1px solid #1a3550; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ta-board span:first-child { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.ta-board b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ta-board .ta-best b { font-size: 40px; color: var(--cyan); line-height: 1.1; }
.ta-badge { text-align: center; font-weight: 900; font-size: 18px; color: var(--cyan); margin: 0 0 12px; }
.ta-badge.gold { color: var(--gold); }
.ta-driver { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-again { margin-top: 14px; text-align: center; }
.ta-time { font-variant-numeric: tabular-nums; font-weight: 800; }
.ta-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ta-track { background: var(--panel3); border: 1px solid #1a3550; border-radius: 10px; padding: 9px 11px; text-align: left; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.ta-track:hover { border-color: #2d82c5; }
.ta-track.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.ta-track span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .ta-board { grid-template-columns: 1fr; } .ta-board .ta-best b { font-size: 32px; } }
.map-grid.solo-maps .map-img { margin: -8px -8px 2px; }

/* ======================================================================
   Paski boczne (public/js/sidebars.js): po lewej rozgrywki, po prawej panel gracza.
   Szeroki ekran: stałe kolumny zwijane do szyny z ikonami. <= 1100 px: wysuwane szuflady.
   ====================================================================== */
:root { --head: 72px; --sb-left: 284px; --sb-right: 340px; --sb-rail: 62px; --sb-bg: #08131f; }
body { --lw: var(--sb-left); --rw: 0px; }
body.sb-left-min { --lw: var(--sb-rail); }
body.has-right { --rw: var(--sb-right); }
body.has-right.sb-right-min { --rw: var(--sb-rail); }
.shell { margin-left: var(--lw); margin-right: var(--rw); flex: 1; display: flex; flex-direction: column; min-width: 0; transition: margin .2s ease; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sb-toggle { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line2); background: #10233a; color: var(--muted2); padding: 0; }
.sb-toggle:hover, .sb-toggle[aria-expanded="true"] { color: #fff; border-color: #2f6ea8; }
.ntf-bell .sb-ico { width: 19px; height: 19px; }
button.account-chip { color: inherit; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
button.account-chip[aria-expanded="true"] { border-color: #2f6ea8; }

.side { position: fixed; top: var(--head); bottom: 0; z-index: 18; background: var(--sb-bg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: width .2s ease, transform .22s ease, top .25s ease; }
/* schowany górny pasek: panele boczne zajmują całą wysokość */
body.head-hidden .side, body.head-hidden .sb-scrim { top: 0; }
.side.left { left: 0; width: var(--lw); border-right: 1px solid var(--line); }
.side.right { right: 0; width: var(--rw); border-left: 1px solid var(--line); }
.side.right:empty { display: none; }
.sb-scrim { display: none; }
.sb-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 9px 14px; border-bottom: 1px solid var(--line); min-height: 54px; }
.side.right .sb-head { padding: 8px 8px 8px 6px; }
.sb-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; }
.sb-collapse { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--muted); padding: 0; }
.sb-collapse:hover { color: #fff; border-color: var(--line2); }
.sb-scroll { overflow-y: auto; flex: 1; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* szyna (zwinięty pasek) */
.sb-rail { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; overflow-y: auto; scrollbar-width: none; }
.sb-rail button { position: relative; width: 44px; min-height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--muted2); padding: 4px 0; }
.sb-rail button:hover { background: #10233a; color: #fff; }
.sb-rail .sb-count { display: block; margin-top: 3px; font-size: 9px; font-weight: 800; line-height: 14px; padding: 0 5px; border-radius: 99px; background: #123d68; color: #cfe8ff; font-variant-numeric: tabular-nums; }
.sb-rail .sb-count.alert { background: #5b4a1c; color: #ffe2a0; }
.sb-rail .sb-count.go { background: transparent; color: var(--green); }
.sb-rail .sb-badge { position: absolute; top: 0; right: 0; }
.sb-rail .sb-st { right: 5px; bottom: 5px; }
.sb-sep { width: 28px; height: 1px; background: var(--line); margin: 4px 0; flex: none; }
body.sb-left-min .side.left .sb-scroll, body.sb-left-min .side.left .sb-head h2 { display: none; }
body.sb-left-min .side.left .sb-rail, body.sb-right-min .side.right .sb-rail { display: flex; }
body.sb-left-min .side.left .sb-head, body.sb-right-min .side.right .sb-head { justify-content: center; padding-inline: 0; }
body.sb-right-min .side.right .sb-pane, body.sb-right-min .side.right .sb-tabs { display: none; }
body.sb-left-min .side.left .sb-collapse svg, body.sb-right-min .side.right .sb-collapse svg { transform: rotate(180deg); }

/* bloki lewego paska */
.sb-blk { padding: 13px 10px 6px; }
.sb-blk + .sb-blk, .sb-me + .sb-blk { border-top: 1px solid #12263b; }
.sb-blk-h { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 4px 8px; }
.sb-blk-h > span { flex: 1; }
.sb-blk-h .sb-ico { width: 15px; height: 15px; }
.sb-n { font-style: normal; color: #cfe8ff; background: #123d68; border-radius: 99px; padding: 0 7px; font-size: 12px; letter-spacing: 0; }
.sb-more { text-transform: none; letter-spacing: 0; color: #60baff; font-weight: 700; font-size: 12px; }
.sb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 7px; border-radius: 10px; border: 1px solid transparent; color: inherit; }
a.sb-row:hover, div.sb-row:hover { background: #0d1e31; border-color: #18324c; }
.sb-row.mine { background: #0e2a46; border-color: #2370b3; }
.sb-row.invite { background: #10233a; border-color: #285274; }
.sb-row.todo { background: #1d1a0d; border-color: #5b4a1c; }
.sb-row > .sb-ico { color: var(--cyan); margin: 0 3px; }
.sb-main { min-width: 0; display: block; color: inherit; }
.sb-main b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-main small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-main small a { color: #8fc8ff; }
.sb-bar { display: block; height: 3px; border-radius: 3px; background: #14304a; margin-top: 4px; overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 3px; }
.sb-pill { font-size: 12px; font-weight: 750; border-radius: 8px; padding: 5px 9px; border: 1px solid var(--line2); background: #10233a; color: #e9f3ff; white-space: nowrap; }
button.sb-pill:hover { filter: brightness(1.15); }
.sb-pill:disabled { opacity: .45; cursor: not-allowed; }
.sb-pill.go { background: linear-gradient(135deg, #168aff, #1262dd); border-color: #238dff; color: #fff; }
.sb-pill.stop { background: transparent; border-color: #7a2a35; color: #ff8f9b; }
.sb-pill.live { border-color: #7a2a35; color: #ff8f9b; background: #2a1219; }
.sb-pill.on { border-color: #267d65; color: #8ff0cf; background: #0f2b26; }
.sb-score { font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.sb-timer { font-variant-numeric: tabular-nums; color: var(--cyan); font-weight: 700; }
.sb-sub { display: flex; align-items: center; gap: 6px; margin: 10px 4px 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.sb-sub .sb-ico { width: 14px; height: 14px; color: var(--gold); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; }
.sb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted2); border: 1px solid #1c3854; background: #0a1726; border-radius: 99px; padding: 3px 9px 3px 3px; }
.sb-chip:hover { color: #fff; border-color: var(--line2); }
.sb-chip .game-icon.xs { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; border-radius: 50%; }
.sb-lobby { border: 1px solid #1d3a57; border-radius: 12px; padding: 10px; background: #0b1828; margin-bottom: 6px; }
.sb-lobby-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.sb-lobby-top small { color: var(--muted); font-size: 12px; }
.sb-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-slot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: #163555; border: 1px solid #275a87; }
.sb-slot .avatar.xs { width: 28px; height: 28px; }
.sb-slot.empty { background: transparent; border-style: dashed; color: var(--muted); font-size: 13px; }
.sb-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.sb-actions.tight { margin: 0; flex-wrap: nowrap; }
.sb-actions:not(.tight) .sb-pill { flex: 1; text-align: center; }
.sb-empty { color: var(--muted); font-size: 12px; margin: 4px 6px 10px; }
.sb-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 10px 16px; border-top: 1px solid #12263b; }
.sb-links a { font-size: 12px; font-weight: 650; color: var(--muted2); padding: 8px 9px; border-radius: 9px; border: 1px solid #16304a; }
.sb-links a:hover { color: #fff; border-color: var(--line2); }

/* prawy pasek: zakładki */
.sb-tabs { display: flex; gap: 2px; flex: 1; min-width: 0; }
.sb-tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.sb-tab span:not(.sb-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tab:hover { color: #fff; }
.sb-tab[aria-selected="true"] { color: #fff; background: #153452; border-color: #285274; }
.sb-badge { position: absolute; top: -3px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--sb-bg); }
.sb-pane { display: flex; flex-direction: column; }
.sb-av { position: relative; flex: none; display: inline-flex; }
.sb-av.big .avatar { width: 56px; height: 56px; border-radius: 16px; }
.sb-st { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--sb-bg); background: #56677a; }
.sb-st.online { background: var(--green); }
.sb-st.away { background: var(--gold); }
.sb-st.busy { background: var(--red); }
.sb-chan .sb-st { position: static; display: inline-block; width: 8px; height: 8px; border: 0; margin-right: 5px; vertical-align: 1px; }
.sb-me { padding: 14px 12px 10px; display: grid; gap: 10px; }
.sb-me-top { display: flex; gap: 12px; align-items: center; }
.sb-me-name { font-size: 17px !important; letter-spacing: -.3px; }
.sb-select { margin-top: 3px; background: #071321; border: 1px solid #25435f; border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--muted2); max-width: 100%; }
.sb-menu { display: grid; gap: 1px; }
.sb-menu a, .sb-menu button { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--muted2); font-weight: 600; font-size: 13px; background: transparent; border: 0; text-align: left; width: 100%; }
.sb-menu a:hover, .sb-menu button:hover { background: #0d1e31; color: #fff; }
.sb-friend { display: flex; gap: 10px; align-items: center; padding: 6px 6px; border-radius: 10px; }
.sb-friend:hover { background: #0d1e31; }
.sb-friend.off { opacity: .62; }
.sb-friend.request { background: #10233a; border: 1px solid #285274; margin-bottom: 6px; }
.sb-friend .sb-main { flex: 1; }
.sb-friend .sb-actions { opacity: 0; transition: opacity .15s; }
.sb-friend:hover .sb-actions, .sb-friend:focus-within .sb-actions, .sb-friend.request .sb-actions { opacity: 1; }
@media (hover: none) { .sb-friend .sb-actions { opacity: 1; } }
.sb-ib { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line2); background: transparent; color: var(--muted2); padding: 0; font-size: 12px; }
.sb-ib:hover { color: #fff; border-color: var(--muted); }
.sb-ib.ok { color: var(--green); border-color: #267d65; }
.sb-ib .sb-ico { width: 15px; height: 15px; }

/* czat w panelu */
.sb-chans { display: flex; gap: 6px; padding: 10px 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; flex: none; }
.sb-chan { position: relative; flex: none; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 5px 11px; border: 1px solid #1c3854; background: #0a1726; color: #9eb2c9; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-chan.dm { padding-left: 9px; }
.sb-chan[aria-pressed="true"] { background: #123d68; border-color: #267ec6; color: #fff; }
.sb-unread { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.sb-chat { flex: 1; display: flex; min-height: 0; }
.side.right .chat-box { flex: 1; display: flex; flex-direction: column; border: 0; border-radius: 0; margin: 0; background: transparent; padding: 10px 10px 12px; min-height: 0; }
.side.right .chat-box .chat-list { flex: 1; max-height: none; min-height: 200px; }
.side.right .sb-pane[data-tab="chat"] { overflow: hidden; }
.side.right .sb-pane[data-tab="chat"] .chat-list { overflow-y: auto; }

/* powiadomienia i ustawienia w panelu */
.sb-notif .ntf-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sb-notif .ntf-list { max-height: none; }
.sb-notif .ntf-foot { padding: 12px; }
.sb-set { padding: 4px 12px 16px; }
.sb-set h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 14px 0 4px; }
.sb-opt { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #12263b; cursor: pointer; }
.sb-opt .sb-main { flex: 1; }
.sb-opt .sb-main b { white-space: normal; font-weight: 650; }
.sb-opt .sb-main small { white-space: normal; }
.sb-opt.sb-push { display: block; cursor: default; }
.sb-sw { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: #1b3550; position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 0; }
.sb-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9eb2c9; transition: transform .15s, background .15s; }
.sb-sw:checked { background: #1262dd; }
.sb-sw:checked::after { transform: translateX(16px); background: #fff; }
.sb-sw:focus-visible, .sb-select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sb-set .sb-menu { margin-top: 12px; }

@media (max-width: 860px) {
  :root { --head: 62px; }
  .sb-toggle { width: 36px; height: 36px; }
}
/* węższe ekrany: paski jako szuflady nad treścią */
@media (max-width: 1100px) {
  body, body.sb-left-min, body.has-right, body.has-right.sb-right-min { --lw: 0px; --rw: 0px; }
  .side.left { width: min(var(--sb-left), 88vw); transform: translateX(-102%); box-shadow: 0 0 40px #000a; }
  .side.right { width: min(var(--sb-right), 94vw); transform: translateX(102%); box-shadow: 0 0 40px #000a; }
  body.sb-left-open .side.left, body.sb-right-open .side.right { transform: none; }
  .side .sb-scroll:not(.sb-pane) { display: block !important; }
  .side .sb-pane { display: flex !important; }
  .side .sb-rail { display: none !important; }
  .side .sb-head h2, .side .sb-tabs { display: flex !important; }
  .side .sb-collapse svg { transform: none !important; }
  .sb-scrim { display: block; position: fixed; inset: var(--head) 0 0; z-index: 17; background: #0009; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.sb-left-open .sb-scrim, body.sb-right-open .sb-scrim { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { body > header, .side, .shell, .sb-scrim, .qs-body, .qs-inner, .qs-chev { transition: none; } }

.sb-game + .sb-game { margin-top: 6px; }
.sb-game-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: 12px; color: var(--muted2); }
.sb-game-h:hover { color: #fff; background: #0d1e31; }
.sb-game-h b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row.sub { grid-template-columns: minmax(0, 1fr) auto; margin-left: 30px; padding: 5px 7px; }
.sb-row.sub .sb-main b { font-size: 12.5px; font-weight: 650; }
/* przycisk konta (otwiera panel gracza): awatar zostaje widoczny także na telefonie */
@media (max-width: 860px) {
  .account-chip > span.avatar { display: inline-flex !important; }
  .account-chip { padding: 3px; }
}
@media (max-width: 480px) {
  .brand > span:last-child { display: none; }
  .nav { gap: 8px; }
  .navright { gap: 6px; }
  .ntf-bell, .sb-toggle { width: 36px; height: 36px; }
}

/* ===================================================== szachy (public/js/pages/chess.js, chessTrain.js) */
.chess-view { --sq-light: #dfe6ee; --sq-dark: #6f8fae; --sq-last: #f2d16b8c; --sq-sel: #49c8ff80; }
.chess-view .list-row + .list-row { margin-top: 8px; }
.chess-view [hidden] { display: none !important; }
.chess-nav { margin-bottom: 18px; }
.chess-view > .chess-nav:first-child { margin-top: 18px; }
.chess-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sub-h { margin: 18px 0 8px; font-size: 13px; color: var(--muted2); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.copy-code { display: block; margin: 8px 0; padding: 8px 10px; background: #071321; border: 1px solid var(--line); border-radius: 8px; word-break: break-all; font-size: 12px; }
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.actions.center { justify-content: center; }
.input.small { width: auto; padding: 6px 8px; font-size: 12px; }
.progress { height: 6px; background: #071321; border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.progress div { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .2s; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* lobby: tempa gry */
.tc-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.tc-cat { font-weight: 800; font-size: 13px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tc-btn { background: var(--panel3); border: 1px solid #1f4060; color: var(--text); border-radius: 11px; padding: 10px 6px; display: grid; gap: 2px; text-align: center; transition: .15s; }
.tc-btn strong { font-size: 17px; }
.tc-btn span { font-size: 10px; color: var(--muted); }
.tc-btn:hover:not(:disabled) { border-color: var(--blue); background: #11263c; transform: translateY(-1px); }
.tc-btn:disabled { opacity: .45; cursor: not-allowed; }
.tc-btn.searching { border-color: var(--green); background: #0f2b26; animation: pulse 1.4s infinite; }
.seek-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid #267d65; background: #0f2b26; border-radius: 11px; font-size: 13px; }
.seek-bar .btn { margin-left: auto; }
.spinner { width: 14px; height: 14px; border: 2px solid #8ff0cf55; border-top-color: #8ff0cf; border-radius: 50%; animation: cb-spin .8s linear infinite; }
@keyframes cb-spin { to { transform: rotate(360deg); } }
.rating-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.rating-tiles.wide { margin-bottom: 18px; }
.rating-tile { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--panel3); border: 1px solid #1a3550; }
.rating-tile strong { font-size: 22px; font-variant-numeric: tabular-nums; }
a.rating-tile:hover { border-color: #2d6fa5; }
.train-links { display: grid; gap: 8px; }
.train-links a { display: grid; grid-template-columns: 28px 1fr; column-gap: 6px; padding: 10px 12px; border-radius: 11px; background: var(--panel3); border: 1px solid #1a3550; font-size: 18px; align-items: center; }
.train-links a b { font-size: 13px; }
.train-links a span { grid-column: 2; font-size: 12px; color: var(--muted); }
.train-links a:hover { border-color: #2d6fa5; }
.live-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.live-game { display: grid; gap: 4px; }
.live-game:hover .cb-wrap { outline: 2px solid var(--blue); }
.chess-games .gp { display: flex; align-items: center; gap: 6px; }
.pc { font-size: 15px; line-height: 1; }
.pc.w { color: #fff; } .pc.b { color: #8ea5bd; }

/* układ partii / analizy */
.chess-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.chess-main { min-width: 0; max-width: min(100%, calc(100vh - 330px)); width: 100%; justify-self: center; }
.chess-layout.analysis .chess-main { max-width: min(100%, calc(100vh - 320px)); }
.chess-side .panel { margin-bottom: 14px; }
.chess-board-host { width: 100%; }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; }
.pb-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.captured { font-size: 15px; letter-spacing: -2px; color: #b8c9dc; }
.captured.w { color: #fff; text-shadow: 0 0 1px #000; }
.clock { font: 800 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 8px 14px; border-radius: 9px; background: #0b1a2a; border: 1px solid var(--line); color: var(--muted2); min-width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.clock.running { background: #f2f6fb; color: #0a1624; border-color: #fff; }
.clock.low { background: #4a1420; color: #ffd0d6; border-color: #c03448; }
.game-turn { font-weight: 800; padding: 10px 12px; border-radius: 10px; background: var(--panel3); border: 1px solid var(--line); margin: 8px 0; }
.game-turn.you { border-color: #267d65; background: #0f2b26; color: #8ff0cf; }
.game-meta { margin-bottom: 6px; }
.game-result { display: grid; gap: 2px; text-align: center; padding: 14px; border-radius: 12px; background: var(--panel3); border: 1px solid var(--line2); margin: 8px 0; }
.game-result strong { font-size: 26px; }
.game-result.win { border-color: #267d65; background: #0f2b26; }
.game-result.loss { border-color: #7a2a35; background: #2a1219; }
.move-list { max-height: 330px; overflow-y: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.mv-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; }
.mv-grid { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 2px 4px; }
.mv-no { color: var(--muted); padding: 3px 0; }
.mv { padding: 3px 6px; border-radius: 6px; cursor: pointer; font-weight: 650; }
.mv:hover { background: #153452; }
.mv.cur { background: var(--blue2); color: #fff; }
.mv.var { color: var(--cyan); font-style: italic; }
.mv sup { font-size: 10px; margin-left: 1px; }
.j-blunder, .mv.j-blunder sup { color: #ff5a6a; }
.j-mistake, .mv.j-mistake sup { color: #ff9f43; }
.j-inaccuracy, .mv.j-inaccuracy sup { color: #f2d16b; }
.move-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* plansza */
.cb-wrap { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: none; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px #0008; }
.cb-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; }
.cb-sq { position: relative; display: grid; place-items: center; }
.cb-sq.light { background: var(--sq-light, #dfe6ee); }
.cb-sq.dark { background: var(--sq-dark, #6f8fae); }
.cb-sq.last::before, .cb-sq.sel::before, .cb-sq.check::before, .cb-sq[class*="mark-"]::before { content: ""; position: absolute; inset: 0; }
.cb-sq.last::before { background: var(--sq-last, #f2d16b8c); }
.cb-sq.sel::before { background: var(--sq-sel, #49c8ff80); }
.cb-sq.check::before { background: radial-gradient(circle, #ff3b4fdd 0, #ff3b4f88 40%, transparent 72%); }
.cb-sq.mark-good::before { background: #37d69a99; }
.cb-sq.mark-bad::before { background: #ff5a6a99; }
.cb-sq.mark-hint::before { box-shadow: inset 0 0 0 4px #49c8ff; }
.cb-sq.dest::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: #0a162466; pointer-events: none; }
.cb-sq.capture::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 5px solid #0a162455; pointer-events: none; }
.cb-c { position: absolute; font-size: 10px; font-weight: 800; line-height: 1; pointer-events: none; z-index: 1; }
.cb-c.rank { top: 3px; left: 3px; }
.cb-c.file { bottom: 2px; right: 4px; }
.cb-sq.light .cb-c { color: var(--sq-dark, #6f8fae); }
.cb-sq.dark .cb-c { color: var(--sq-light, #dfe6ee); }
.cb-piece { position: relative; z-index: 2; font-size: 10.6cqi; line-height: 1; cursor: grab; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", sans-serif; transform: translateY(-2%); }
.cb-piece.w { color: #fff; -webkit-text-stroke: 1.4px #1a2633; paint-order: stroke fill; text-shadow: 0 2px 2px #0006; }
.cb-piece.b { color: #18222e; -webkit-text-stroke: 1px #e8eef5; paint-order: stroke fill; text-shadow: 0 2px 2px #0005; }
.cb-piece.cb-dragging { opacity: .3; }
.cb-ghost { position: fixed; z-index: 1000; pointer-events: none; display: grid; place-items: center; cursor: grabbing; transform: scale(1.12); }
.cb-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.cb-arrow { stroke-width: 15; stroke-linecap: round; opacity: .8; }
.cb-arrow.best { stroke: #1fb37a; } .cb-head.best path { fill: #1fb37a; }
.cb-arrow.alt { stroke: #1687ff; opacity: .55; } .cb-head.alt path { fill: #1687ff; }
.cb-arrow.preview { opacity: .5; }
/* rysunki gracza (prawy przycisk): zielony, czerwony (Shift), niebieski (Alt), żółty (Ctrl) */
.cb-arrow.user-green { stroke: #15781b; } .cb-head.user-green path { fill: #15781b; }
.cb-arrow.user-red { stroke: #c42b2b; } .cb-head.user-red path { fill: #c42b2b; }
.cb-arrow.user-blue { stroke: #0b5fbd; } .cb-head.user-blue path { fill: #0b5fbd; }
.cb-arrow.user-yellow { stroke: #d8a400; } .cb-head.user-yellow path { fill: #d8a400; }
.cb-ring { fill: none; stroke-width: 8; opacity: .85; }
.cb-ring.user-green { stroke: #15781b; } .cb-ring.user-red { stroke: #c42b2b; }
.cb-ring.user-blue { stroke: #0b5fbd; } .cb-ring.user-yellow { stroke: #d8a400; }
/* dotyk: tryb rysowania i pasek pod planszą (na myszce ukryty - rysuje prawy przycisk) */
.cb-wrap { -webkit-touch-callout: none; }
.cb-wrap.draw-mode { outline: 3px solid #15781b; outline-offset: 2px; }
.cb-wrap.draw-mode .cb-piece { cursor: crosshair; }
.cb-tools { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cb-tool { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel3); color: var(--text); font-weight: 700; }
.cb-draw-toggle[aria-pressed="true"] { background: #0f2b26; border-color: #15781b; color: #8ff0cf; }
.cb-colors { display: inline-flex; gap: 6px; }
.cb-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.cb-color.green { background: #15781b; } .cb-color.red { background: #c42b2b; }
.cb-color.blue { background: #0b5fbd; } .cb-color.yellow { background: #d8a400; }
.cb-color.active { border-color: #fff; box-shadow: 0 0 0 2px #0a1624; }
.board-with-bar .cb-tools { grid-column: 2; }
@media (hover: hover) and (pointer: fine) { .cb-tools { display: none; } }
@media (max-width: 440px) { .cb-tool[data-clear] span { display: none; } .cb-tools { gap: 6px; } }
.cb-promo { position: absolute; inset: 0; z-index: 5; background: #0a1624aa; }
.cb-promo-col { position: absolute; width: 12.5%; display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px #000a; }
.cb-promo-col.up { flex-direction: column-reverse; }
.cb-promo-btn { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-top: 1px solid #dfe6ee; background: #fff; padding: 0; cursor: pointer; }
.cb-promo-col.up .cb-promo-btn { border-top: 0; border-bottom: 1px solid #dfe6ee; }
.cb-promo-btn:first-child { border: 0; background: #e8f6ff; }
.cb-promo-btn:hover, .cb-promo-btn:focus-visible { background: #d6ecff; outline: 0; }
.cb-promo-x { width: 100%; aspect-ratio: 2.4; border: 0; background: #f2f6fb; color: #6f8fae; font: 700 min(3.4cqi, 15px) Inter, system-ui, sans-serif; cursor: pointer; }
.cb-promo-btn .cb-piece { font-size: min(9cqi, 52px); cursor: pointer; }
.cb-wrap.mini { box-shadow: none; border-radius: 4px; pointer-events: none; }
.cb-wrap.mini .cb-piece { cursor: default; text-shadow: none; -webkit-text-stroke-width: .6px; }

/* analiza */
.board-with-bar { display: grid; grid-template-columns: 30px 1fr; gap: 8px; }
.eval-bar { position: relative; border-radius: 6px; overflow: hidden; background: #18222e; border: 1px solid var(--line); }
.eval-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f2f6fb; transition: height .35s; }
.eval-bar.flipped .eval-fill { bottom: auto; top: 0; }
.eval-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #1687ff99; z-index: 1; }
/* liczba poziomo, na końcu strony z przewagą, w kolorze kontrastującym z tą częścią paska */
.eval-num { position: absolute; left: 0; right: 0; z-index: 2; text-align: center; font: 800 13px/1 Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: -.4px; font-variant-numeric: tabular-nums; padding: 5px 0; }
.eval-num.at-bottom { bottom: 0; } .eval-num.at-top { top: 0; }
.eval-num.lead-w { color: #0a1624; } .eval-num.lead-b { color: #f2f6fb; }
.engine-lines { display: grid; gap: 6px; font-size: 12.5px; }
.engine-line { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--panel3); cursor: pointer; }
.engine-line:hover { background: #153452; }
.engine-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted2); }
.ev { font-variant-numeric: tabular-nums; text-align: center; border-radius: 6px; padding: 0 4px; }
.ev.w { background: #f2f6fb; color: #0a1624; } .ev.b { background: #18222e; color: #fff; border: 1px solid #2b4765; }
.eval-graph { width: 100%; height: 120px; display: block; border-radius: 8px; background: #18222e; cursor: pointer; }
.g-white { fill: #f2f6fb; }
.g-mid { stroke: #1687ff88; stroke-width: 1; }
.g-cur { stroke: var(--blue); stroke-width: 2; }
.g-blunder { fill: #ff5a6a; } .g-mistake { fill: #ff9f43; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.acc-card { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--panel3); border: 1px solid var(--line); text-align: center; }
.acc-card strong { font-size: 24px; }
.acc-name { font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-counts { display: flex; gap: 10px; justify-content: center; font-size: 12px; font-weight: 800; }
.acc-jump { display: grid; gap: 2px; }
.rating-chart { width: 100%; height: auto; display: block; }
.rating-chart .axis { fill: var(--muted); font-size: 12px; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted2); margin-top: 6px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* zadania */
.puzzle-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.pz-side { font-weight: 800; padding: 4px 10px; border-radius: 99px; font-size: 12px; }
/* pasek rankingów zadania: trudność zadania i ranking gracza ze zmianą po wyniku */
.pz-ratings { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.pz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid; font-size: 13px; line-height: 1.2; }
.pz-chip b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pz-chip .pz-lbl { color: var(--muted2); font-size: 12px; }
.pz-chip.task { background: #2a1f3d; border-color: #6b4fa3; }
.pz-chip.task b { color: #cdb6ff; }
.pz-chip.me { background: #0e2a46; border-color: #2370b3; }
.pz-chip.me b { color: #9bd3ff; }
.pz-chip.guest { color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.pz-delta { font-weight: 800; font-size: 13px; padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.pz-delta.pos { color: #8ff0cf; background: #0f2b26; } .pz-delta.neg { color: #ffb6bf; background: #2a1219; } .pz-delta.zero { color: var(--muted); }
.pz-delta.fresh { animation: pz-delta-in .9s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pz-delta-in { 0% { transform: translateY(8px) scale(.6); opacity: 0; } 40% { transform: translateY(-3px) scale(1.25); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pz-delta.fresh { animation: none; } }
.pz-short { display: none; }
@media (max-width: 440px) { .pz-long { display: none; } .pz-short { display: inline; } .pz-chip { padding: 6px 8px; gap: 5px; } .pz-ratings { gap: 6px; } }
.pz-side.w { background: #f2f6fb; color: #0a1624; } .pz-side.b { background: #18222e; color: #fff; border: 1px solid #2b4765; }

@media (max-width: 980px) {
  .chess-layout { grid-template-columns: 1fr; }
  .chess-main { max-width: 100%; }
  .tc-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .clock { font-size: 20px; min-width: 88px; padding: 6px 10px; }
  .board-with-bar { grid-template-columns: 24px 1fr; gap: 5px; }
  .eval-num { font-size: 10px; letter-spacing: -.6px; padding: 4px 0; }
}

/* ======================================================================
   Centrum zgłoszeń (public/js/pages/feedback.js)
   ====================================================================== */
.fb-tab-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #123d68; color: #cfe8ff; font-size: 10px; line-height: 16px; text-align: center; }
.fb-tab-n.alert { background: var(--red); color: #fff; }
.fb-toolbar .input.search { flex: 1; min-width: 200px; max-width: 420px; }
.fb-list { padding: 6px; }
.fb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; }
.fb-row + .fb-row { border-top: 1px solid #12263b; }
.fb-row:hover { background: #0d1e31; }
.fb-row.pinned { background: #0e2236; }
.fb-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 52px; min-height: 52px; border-radius: 12px; border: 1px solid var(--line2); background: #0b1828; color: var(--muted2); font-size: 12px; line-height: 1.1; padding: 4px; }
.fb-vote b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.fb-vote:hover:not(:disabled) { border-color: #2f6ea8; color: #fff; }
.fb-vote.on { background: #123d68; border-color: #2a8cf0; color: #9bd3ff; }
.fb-vote:disabled { cursor: default; opacity: .75; }
.fb-vote.big { width: 74px; min-height: 80px; font-size: 13px; }
.fb-vote.big b { font-size: 24px; }
.fb-vote small { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.fb-main { min-width: 0; display: grid; gap: 5px; color: inherit; }
.fb-title { font-weight: 750; font-size: 14.5px; overflow-wrap: anywhere; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.fb-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; border: 1px solid #1c3854; background: #0a1726; color: var(--muted2); font-size: 12px; font-weight: 700; }
.fb-game { display: inline-flex; align-items: center; gap: 5px; color: var(--muted2); font-weight: 650; }
.fb-game .game-icon.xs { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; border-radius: 5px; }
.fb-sev { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line2); color: var(--muted2); }
.fb-sev.critical { color: #ffd0d6; border-color: #c03448; background: #4a1420; }
.fb-sev.high { color: #ffe2a8; border-color: #b8862b; background: #3a2a0e; }
.fb-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.status.planned { color: #d9c6ff; border-color: #6d4fc4; background: #241a45; }
.fb-pager { justify-content: center; align-items: center; margin-top: 12px; }

.fb-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fb-col { display: grid; gap: 8px; margin-bottom: 0; }
.fb-col h3 { margin: 0; }
.fb-col > p { margin: 0 0 6px; }
.fb-card { display: grid; gap: 6px; padding: 11px; border-radius: 12px; border: 1px solid #1a344e; background: #0b1828; color: inherit; }
.fb-card:hover { border-color: #2f6ea8; }
.fb-card .fb-type { justify-self: start; }

.fb-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fb-type-card { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: 16px; border: 1px solid #1a344e; background: linear-gradient(150deg, #0d1b2c, #091522); color: var(--text); }
.fb-type-card:hover { border-color: #2f6ea8; transform: translateY(-1px); }
.fb-type-card.danger { border-color: #5a2430; }
.fb-type-ico { font-size: 26px; }
.fb-type-card b { font-size: 15px; }
.fb-form { max-width: 860px; }
.fb-form .check { display: flex; margin: 6px 0; }
.fb-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.fb-similar { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px dashed #2b5a85; background: #0b1a2c; margin: -4px 0 8px; font-size: 13px; }
.fb-similar a { color: #9bd3ff; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-similar a:hover { color: #fff; }
.fb-files { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.fb-files.view { margin-top: 14px; }

.fb-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-head { display: flex; gap: 16px; align-items: flex-start; }
.fb-head-main { min-width: 0; display: grid; gap: 6px; }
.fb-head h1 { font-size: clamp(20px, 3vw, 28px); letter-spacing: -.6px; overflow-wrap: anywhere; }
.fb-head p { margin: 0; }
.fb-body { overflow-wrap: anywhere; }
.fb-details { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #12263b; font-size: 13px; }
.fb-details dt { color: var(--muted); font-weight: 650; }
.fb-details dd { margin: 0; overflow-wrap: anywhere; }
.fb-pre { white-space: pre-wrap; }
.fb-thread { display: grid; gap: 12px; margin: 10px 0 14px; }
.fb-comment { display: flex; gap: 10px; }
.fb-c-main { min-width: 0; flex: 1; padding: 10px 12px; border-radius: 12px; background: #0b1828; border: 1px solid #17314b; }
.fb-comment.official .fb-c-main { background: #0e2a46; border-color: #2370b3; }
.fb-c-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; font-size: 13px; }
.fb-c-head .icon-btn { margin-left: auto; }
.fb-comment:hover .icon-btn.subtle { opacity: 1; }
.fb-c-main .md { font-size: 13.5px; overflow-wrap: anywhere; }
.fb-team { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9bd3ff; border: 1px solid #2370b3; border-radius: 99px; padding: 1px 7px; }
.fb-event { font-size: 12.5px; color: var(--muted2); padding: 6px 12px; border-left: 2px solid #2b5a85; }
.fb-reply .row-actions { justify-content: flex-end; align-items: center; margin-top: 8px; }
.fb-steps { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 4px; counter-reset: s; }
.fb-steps li { position: relative; padding: 6px 10px 6px 34px; border-radius: 9px; color: var(--muted); font-size: 13px; }
.fb-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 8px; top: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: #14304a; color: #cfe8ff; }
.fb-steps li.on { color: #fff; background: #123d68; font-weight: 700; }
.fb-steps li.on::before { background: var(--blue); }
.fb-side .check { display: flex; margin: 8px 0; }
.fb-admin { border-color: #6b5420; background: linear-gradient(150deg, #1a1608, #0f0d06); }
.fb-admin h3 { color: var(--gold); }
.fb-admin .fb-checks { margin: 4px 0 6px; }
.fb-report-link { color: var(--muted2); font-size: 12px; }
.sb-links .sb-report { grid-column: 1 / -1; color: #ffe2a0; border-color: #5b4a1c; }
@media (max-width: 900px) {
  .fb-roadmap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fb-row { grid-template-columns: auto minmax(0, 1fr); }
  .fb-count { grid-column: 2; }
  .fb-details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fb-details dd { margin-bottom: 8px; }
  .fb-head { flex-direction: column; }
}
.fb-similar[hidden] { display: none; }
/* ---- zgłoszenia v2: Moje zgłoszenia, panel administratora (pages/feedback.js, pages/adminFeedback.js) */
.fb-row.simple { grid-template-columns: minmax(0, 1fr) auto; color: inherit; }
.fb-tiles .admin-tile { text-align: left; font: inherit; cursor: pointer; }
.fb-tiles .admin-tile.warn strong { color: #ffd27a; }
.fb-tiles .admin-tile.active { border-color: #2a8cf0; background: #11263c; }
.fb-matrix th, .fb-matrix td { text-align: center; padding: 6px; font-size: 12px; }
.fb-matrix th:first-child, .fb-matrix td:first-child { text-align: left; white-space: nowrap; }
.fb-matrix .status { font-size: 8.5px; padding: 2px 5px; white-space: nowrap; }
.fb-table td { vertical-align: top; }
.fb-table .fb-meta { margin-top: 4px; }
.fb-admin-filters .filters { flex-wrap: wrap; gap: 8px; }
.fb-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.fb-date .input { width: auto; }
.fb-comment.note .fb-c-main { background: #1a1608; border-color: #6b5420; }
.fb-team.note { color: var(--gold); border-color: #6b5420; }
.fb-notes h3 .muted, .fb-item h3 .muted { font-weight: 500; }
.fb-history, .fb-events { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; font-size: 12.5px; }
.fb-history li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-events li { display: grid; gap: 2px; padding: 6px 10px; border-left: 2px solid #2b5a85; }
.fb-gh h3 { margin-top: 0; }
.fb-details.compact { margin-top: 8px; padding-top: 8px; font-size: 12px; }
.fb-quick { margin-bottom: 10px; flex-wrap: wrap; }
.fb-admin .check { display: flex; margin: 6px 0; }
.fb-gh-form textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
[data-fb-repro][hidden], [data-fb-dupfield][hidden], .fb-form [name=game_name][hidden] { display: none; }
.fb-form [name=game_name] { margin-top: 6px; }
.fb-form .field-row { align-items: start; }
.fb-recent-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.fb-recent-main strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- gry przeglądarkowe (#/browser-games) --- */

/* ======================================================= Wspólny stół gier (public/js/gameTable.js)
   Stół ma stałe proporcje i rezerwuje miejsce od pierwszego renderu - rozmiar nie zależy od zawartości.
   Karty skalują się od --card-w (jednostki cqw = % szerokości stołu), proporcje kart 5/7. Animacje tylko transform/opacity. */
.gt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.gt-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.gt { --gt-ratio: 16 / 9; --gt-actions-h: 112px; --msg-top: 50%; width: min(100%, 1100px); display: grid; gap: 10px; }
.gt-table { position: relative; width: 100%; aspect-ratio: var(--gt-ratio); container-type: inline-size; overflow: hidden; border-radius: 22px; isolation: isolate; }
.gt-stage, .gt-overlay { position: absolute; inset: 0; }
.gt-overlay { z-index: 20; pointer-events: none; }
.gt-msg { position: absolute; left: 50%; top: var(--msg-top); translate: -50% -50%; width: max-content; max-width: 88%; padding: 10px 18px; border-radius: 14px;
  background: #0c1929ee; border: 1px solid var(--line2); box-shadow: 0 12px 34px #000b; text-align: center; font-size: clamp(12px, 1.6cqw, 16px);
  pointer-events: auto; animation: gt-pop .22s ease-out both; }
.gt-msg.ok { border-color: #267d65; color: #c9ffe9; }
.gt-msg.bad { border-color: #7a2a35; color: #ffd0d6; }
.gt-msg.win { border-color: var(--gold); }
.gt-msg.soft { background: #00000055; border-color: transparent; box-shadow: none; color: #d9f5e6cc; pointer-events: none; }
.gt-msg h2 { margin: 0 0 6px; color: var(--gold); font-size: 1.4em; }
.gt-msg p { margin: 0 0 12px; }
.gt-msg b { color: var(--gold); }
.gt-msg-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gt-actions { height: var(--gt-actions-h); overflow: hidden; display: grid; align-content: center; gap: 8px; min-width: 0; }
.gt-num { display: inline-block; min-width: var(--min, 0); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.btn small { font-weight: 600; opacity: .8; }
/* karty */
.gt-card, .gt-slot { width: var(--card-w); aspect-ratio: 5 / 7; border-radius: calc(var(--card-w) * .08); flex: none; }
.gt-card { position: relative; background: #fbfbf8; color: #15202b; box-shadow: 0 1px 3px #0007; overflow: hidden; user-select: none; -webkit-user-select: none; }
.gt-card.red { color: #c8202f; }
.gt-card.back { background: repeating-linear-gradient(45deg, var(--gt-back, #1262dd) 0 6%, var(--gt-back2, #0d4bb0) 6% 12%); border: calc(var(--card-w) * .045) solid #fbfbf8; }
.gt-c { position: absolute; top: 4%; left: 7%; font-weight: 900; font-size: calc(var(--card-w) * .25); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.gt-c i { font-style: normal; margin-left: .05em; }
.gt-pip { position: absolute; inset: 30% 0 0; display: grid; place-items: center; font-size: calc(var(--card-w) * .5); line-height: 1; }
.gt-slot { display: grid; place-items: center; border: max(1px, calc(var(--card-w) * .025)) dashed #ffffff3a; background: #00000014;
  color: #ffffff3a; font-weight: 900; font-size: calc(var(--card-w) * .32); }
.gt-slot.faint { opacity: .4; }
.gt-card.hl { box-shadow: 0 0 0 3px var(--gold), 0 3px 10px #0008; }
.gt-card.dim { filter: brightness(.55); }
.gt-enter { animation: gt-in .22s ease-out both; }
@keyframes gt-in { from { opacity: 0; transform: translateY(-18%) scale(.94); } }
@keyframes gt-pop { from { opacity: 0; transform: scale(.94); } }
/* wachlarz: slot o stałej szerokości (--zone-w) - przy wielu kartach nakładają się mocniej zamiast poszerzać slot */
.gt-fan { position: relative; width: var(--zone-w); height: calc(var(--card-w) * 1.4);
  --step: min(calc(var(--card-w) * .62), calc((var(--zone-w) - var(--card-w)) / max(calc(var(--n) - 1), 1))); }
.gt-fan > * { position: absolute; top: 0; left: calc(var(--i, 0) * var(--step)); }
.gt-fan.center > * { left: calc((var(--zone-w) - var(--card-w) - var(--step) * (var(--n) - 1)) / 2 + var(--i, 0) * var(--step)); }
/* przeciągane karty - poza stołem, który przycina zawartość */
.gt-drag { position: fixed; left: 0; top: 0; z-index: 1000; width: var(--card-w); pointer-events: none; will-change: transform; }
.gt-drag > .gt-card { position: absolute; box-shadow: 0 10px 22px #000a; }
.gt-skeleton .gt-table::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff10 50%, transparent 70%);
  animation: gt-shimmer 1.4s linear infinite; }
@keyframes gt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (max-width: 900px) {
  .gt-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* akcje przyklejone do dołu ekranu, w zarezerwowanej strefie pod stołem */
  .gt-actions { position: sticky; bottom: 0; z-index: 30; margin-inline: -8px; padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom));
    height: calc(var(--gt-actions-h) + env(safe-area-inset-bottom)); background: #060d17f2; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .gt *, .gt *::before, .gt *::after, .gt-drag * { animation: none !important; transition: none !important; }
}

/* ---- stół do 21 (gt-bj, public/js/pages/browserGames.js) */
.gt-bj { --gt-ratio: 16 / 9; --gt-actions-h: 140px; --msg-top: 40%; }
.gt-bj .gt-table { background: radial-gradient(ellipse at 50% 40%, #146b45, #0a3d29 70%); box-shadow: inset 0 0 0 8px #3a2414, inset 0 0 60px #0007; }
.gt-bj .gt-stage { --card-w: 8.4cqw; color: #d9f5e6; }
.bj-label { height: 3cqw; line-height: 3cqw; font-weight: 800; font-size: clamp(11px, 1.6cqw, 15px); white-space: nowrap; overflow: hidden; }
.bj-label b { color: #fff; }
.bj-dealer { position: absolute; top: 3cqw; left: 50%; translate: -50% 0; --zone-w: 44cqw; width: var(--zone-w); }
.bj-dealer .gt-fan, .bj-hand .gt-fan { margin-top: .6cqw; }
.bj-dealer .bj-label, .bj-hand-info { text-align: center; }
.bj-felt-text { position: absolute; top: 21.5cqw; left: 12%; right: 12%; padding: .7cqw 0; text-align: center; color: #f2d16b99; font-weight: 800;
  letter-spacing: .15em; font-size: clamp(8px, 1.05cqw, 12px); border-block: 1px solid #ffffff1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-player { position: absolute; top: 27cqw; left: 3cqw; right: 3cqw; }
.bj-hands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2cqw; --zone-w: 19.6cqw; }
.bj-hand { min-width: 0; padding: .8cqw; border: 2px solid transparent; border-radius: 1.2cqw; }
.bj-hand.active { border-color: var(--gold); background: #ffffff10; }
.bj-hand-info { display: grid; height: 4.6cqw; margin-top: .6cqw; font-size: clamp(9px, 1.25cqw, 14px); line-height: 2.3cqw; }
.bj-hand-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-outcome { font-weight: 800; }
.bj-hand.win .bj-outcome { color: #8ff0cf; }
.bj-hand.lose .bj-outcome { color: #ffb6bf; }
.bj-hand.push .bj-outcome { color: #f6d79a; }
.bj-act-play { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bj-act-play .btn, .bj-bet-btns .btn { height: 40px; padding: 0 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bj-act-bet { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chips bet" "btns btns"; gap: 8px 14px; align-items: center; }
.bj-chips { grid-area: chips; display: flex; gap: 8px; }
.bj-bet { grid-area: bet; color: var(--muted2); font-size: 14px; white-space: nowrap; overflow: hidden; }
.bj-bet b { --min: 10ch; text-align: left; color: var(--gold); }
.bj-bet-btns { grid-area: btns; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bj-chip { width: 44px; height: 44px; border-radius: 50%; border: 4px dashed #fff; color: #fff; font-weight: 900; font-size: 13px; box-shadow: 0 3px 8px #0007; transition: transform .15s; }
.bj-chip:hover:not(:disabled) { transform: translateY(-3px); }
.bj-chip:disabled { opacity: .35; cursor: not-allowed; }
.bj-chip.c5 { background: #c8202f; }
.bj-chip.c25 { background: #1a8f4a; }
.bj-chip.c100 { background: #15202b; }
.bj-chip.c500 { background: #6b2bbf; }
.bj-side .panel { display: flex; flex-direction: column; gap: 12px; }
.bj-balance { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.bj-balance b { font-size: 26px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.bj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.bj-stats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-stats span { color: var(--muted); font-size: 12px; }
.bj-hint-toggle { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.bj-rules ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted2); }
.bj-rules p { margin: 0; }
@media (max-width: 640px) {
  .gt-bj { --gt-ratio: 4 / 5; --gt-actions-h: 180px; --msg-top: 27%; }
  .gt-bj .gt-stage { --card-w: 13cqw; }
  .bj-label { height: 5cqw; line-height: 5cqw; font-size: 3.6cqw; }
  .bj-dealer { --zone-w: 70cqw; }
  .bj-felt-text { top: 31cqw; left: 4%; right: 4%; font-size: 2.3cqw; letter-spacing: .04em; }
  .bj-player { top: 37cqw; }
  .bj-hands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqw; --zone-w: 41cqw; }
  .bj-hand { padding: 1cqw; }
  .bj-hand-info { height: 9cqw; line-height: 4.5cqw; font-size: 3.3cqw; }
  .bj-act-play { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bj-act-play .btn, .bj-bet-btns .btn { height: 36px; font-size: 12px; padding: 0 4px; }
  .bj-act-bet { gap: 6px 10px; }
  .bj-bet-btns { gap: 6px; }
  .bj-chips { gap: 6px; }
  .bj-chip { width: 38px; height: 38px; border-width: 3px; font-size: 12px; }
  .gt-bj .gt-actions { gap: 6px; }
}

/* ======================================================= Pasjans Klondike (gt-kl, public/js/pages/klondike.js) */
.gt-kl { --gt-ratio: 4 / 3; --gt-actions-h: 72px; }
.gt-kl .gt-table { background: radial-gradient(ellipse at 50% 30%, #146b45, #0a3d29 75%); box-shadow: inset 0 0 0 6px #3a2414, inset 0 0 60px #0007;
  user-select: none; -webkit-user-select: none; }
.gt-kl .gt-stage { --gt-h: 75cqw; --pad: 2.6cqw; --card-w: 10.6cqw; --card-h: calc(var(--card-w) * 1.4); --down: calc(var(--card-h) * .09);
  --up: calc(var(--card-h) * .25); --fan: calc(var(--card-w) * .3); --top-h: calc(var(--pad) + var(--card-h) + 2.5cqw); }
.kl-grid { position: absolute; left: var(--pad); right: var(--pad); display: grid; grid-template-columns: repeat(7, var(--card-w)); justify-content: space-between; }
.kl-top { top: var(--pad); height: var(--card-h); }
.kl-cols { top: var(--top-h); bottom: var(--pad); }
.kl-pile { position: relative; width: var(--card-w); height: var(--card-h); }
/* kolumna ma stałą wysokość: odstęp odkrytych kart maleje, gdy kart jest dużo (--nd zakrytych, --nu odkrytych) */
.kl-col { height: 100%; --col-h: calc(var(--gt-h) - var(--top-h) - var(--pad));
  --up-fit: min(var(--up), calc((var(--col-h) - var(--card-h) - var(--down) * var(--nd)) / max(calc(var(--nu) - 1), 1))); }
.kl-pile > .gt-card, .kl-pile > .gt-slot { position: absolute; left: 0; top: 0; }
.gt-kl .gt-card.up { cursor: grab; touch-action: none; }
.kl-stock > * { cursor: pointer; }
.kl-recycle { color: #ffffffaa; border-style: solid; }
.kl-recycle:hover { background: #ffffff10; }
.kl-count { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: calc(var(--card-w) * .16); font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px #000; pointer-events: none; }
.gt-card.kl-lifted { opacity: .25; }
.kl-hint { box-shadow: 0 0 0 3px var(--gold), 0 0 18px var(--gold) !important; }
.kl-shake { animation: kl-shake .3s; }
@keyframes kl-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gt-stage.won .kl-top .gt-card { animation: kl-jump .6s ease-in-out infinite alternate; }
.gt-stage.won .kl-top .kl-pile:nth-child(5) .gt-card { animation-delay: .15s; }
.gt-stage.won .kl-top .kl-pile:nth-child(6) .gt-card { animation-delay: .3s; }
.gt-stage.won .kl-top .kl-pile:nth-child(7) .gt-card { animation-delay: .45s; }
@keyframes kl-jump { to { transform: translateY(-10%) rotate(-4deg); } }
.kl-hud { display: flex; gap: 16px; height: 22px; line-height: 22px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.kl-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kl-btns .btn { height: 34px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kl-draw { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
@media (max-width: 640px) {
  .gt-kl { --gt-ratio: 3 / 4; --gt-actions-h: 80px; }
  .gt-kl .gt-stage { --gt-h: 133.33cqw; --pad: 1.6cqw; --card-w: 12.8cqw; --top-h: calc(var(--pad) + var(--card-h) + 3cqw); }
  .kl-hud { gap: 10px; font-size: 12px; }
  .kl-btns { gap: 6px; }
  .kl-btns .btn { padding: 0 4px; font-size: 12px; }
}

/* ======================================================= Orbitalia: Magnaci Pierścienia (public/js/pages/orbitalia.js) */
.orb-view { --orb-space: #050a14; --orb-cell: #0d1a2b; --orb-cell2: #12233a; --orb-glow: #6e5bff; }
.orb-view [hidden] { display: none !important; }
.orb-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: center; margin: 24px 0 18px; padding: 28px;
  border: 1px solid #263f66; border-radius: 20px; overflow: hidden;
  background: radial-gradient(1px 1px at 12% 30%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 18%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 80%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 88% 66%, #fff8 50%, transparent 51%),
    radial-gradient(ellipse at 85% 50%, #3b2a7a 0, transparent 55%), linear-gradient(135deg, #0b1630, #070d1c); }
.orb-hero h1 { font-size: clamp(28px, 4.2vw, 44px); letter-spacing: -1px; }
.orb-hero h1 span { background: linear-gradient(90deg, #ffd27a, #ff8ac1 55%, #9b8bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orb-hero p { color: var(--muted2); max-width: 720px; margin: 10px 0 0; }
.orb-kicker { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #9b8bff; }
.orb-planet { position: relative; width: 190px; height: 190px; margin: auto; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd9a0, #e0844a 38%, #8a3a6a 70%, #2d1640 100%); box-shadow: 0 0 60px #ff8a5a55, inset -20px -24px 40px #0008; }
.orb-planet::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(-18deg, transparent 0 14px, #ffffff10 14px 20px); }
.orb-ring { position: absolute; left: -38%; top: 38%; width: 176%; height: 26%; border-radius: 50%; border: 6px solid #f6d7b099; border-top-color: transparent; transform: rotate(-16deg); z-index: 1; }
.orb-moon { position: absolute; width: 22px; height: 22px; right: -18px; top: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e6edf7, #7d8ea8); }
.orb-planet.small { width: 22%; height: auto; aspect-ratio: 1; margin: 0 auto 4px; }
.orb-planet.small .orb-ring { border-width: 2px; }
.orb-planet.small .orb-moon { width: 14%; height: 14%; right: -10%; }
.orb-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.orb-start-card { display: flex; flex-direction: column; gap: 8px; }
.orb-start-card p { flex: 1; margin: 0; font-size: 13px; }
.orb-code-form { display: flex; gap: 8px; }
.orb-code-form .input { text-transform: uppercase; letter-spacing: 3px; font-weight: 800; min-width: 0; flex: 1; }
.orb-room-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.orb-room-row + .orb-room-row { margin-top: 8px; }
.orb-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #3a2a7a; color: #d8d0ff; font-size: 12px; font-weight: 800; }
.orb-sub { margin: 16px 0 8px; font-size: 14px; color: var(--muted2); }
.orb-history { margin-top: 12px; }
.orb-history summary { cursor: pointer; color: var(--muted2); font-size: 13px; margin-bottom: 8px; }
.orb-table td, .orb-table th { padding: 6px 8px; }
.orb-table tr.hl td { background: #3a2a7a55; }

.orb-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.orb-chars.compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.orb-char { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 12px; color: inherit; font: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 45%, #1b3550); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, #0d1b2c), #091522); }
button.orb-char:hover { border-color: var(--c); }
.orb-char.selected { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 0 20px color-mix(in srgb, var(--c) 40%, transparent); }
.orb-char.taken { opacity: .4; cursor: not-allowed; }
.orb-char-icon { font-size: 28px; line-height: 1; }
.orb-char-body { display: grid; gap: 2px; }
.orb-char-body small { color: var(--muted); font-size: 12px; }
.orb-char-body em { font-style: normal; font-size: 12px; color: color-mix(in srgb, var(--c) 70%, #fff); }
.orb-bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* --- pokój przed startem */
.orb-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed #4d3fa8; border-radius: 12px; background: #140f33; }
.orb-code span { font-size: 12px; color: var(--muted); }
.orb-code b { font-size: 22px; letter-spacing: 4px; color: #d8d0ff; }
.orb-wait-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.orb-seats { display: grid; gap: 8px; }
.orb-seat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c, #2b4765) 50%, #1b3550); background: #0b1828; }
.orb-seat > div { flex: 1; min-width: 0; }
.orb-seat.empty { border-style: dashed; }
.orb-token-lg { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c, #2b4765) 70%, #fff), var(--c, #2b4765)); box-shadow: 0 0 12px color-mix(in srgb, var(--c, #000) 50%, transparent); }
.orb-addbot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.orb-wait-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.orb-settings-list { margin: 0; padding-left: 18px; color: var(--muted2); font-size: 14px; }

/* --- czat */
.orb-chat-list { max-height: 260px; min-height: 80px; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 10px; background: #071220; border: 1px solid var(--line); margin-bottom: 8px; }
.orb-msg { font-size: 13px; overflow-wrap: anywhere; }
.orb-msg b { color: #9fc6ff; }
.orb-msg.mine b { color: #ffd27a; }
.orb-chat-form { display: flex; gap: 8px; }
.orb-chat-form .input { flex: 1; min-width: 0; }

/* --- gra */
.orb-game { margin-top: 14px; }
.orb-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.orb-topbar strong { font-size: 17px; }
.orb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.orb-board-wrap { container-type: inline-size; max-width: min(100%, calc(100vh - 120px)); width: 100%; margin: 0 auto; }
.orb-board { position: relative; aspect-ratio: 1; border-radius: 16px; padding: 0.6%; border: 1px solid #2a3f66;
  background: radial-gradient(1px 1px at 20% 35%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 63% 25%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 78% 62%, #fff7 50%, transparent 51%),
    radial-gradient(ellipse at 50% 50%, #2a1f5e 0, #0a1226 60%, var(--orb-space) 100%); box-shadow: 0 20px 60px #0008; }
.orb-cells { position: absolute; inset: 0.6%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); gap: 0.35cqw; }
.orb-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2cqw; padding: 0.4cqw; min-width: 0; min-height: 0;
  border-radius: 0.8cqw; border: 1px solid #22395a; background: linear-gradient(160deg, var(--orb-cell2), var(--orb-cell)); color: var(--text);
  font: 700 1.05cqw/1.1 Inter, system-ui, sans-serif; text-align: center; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.orb-cell:hover { border-color: #6e8fc0; transform: scale(1.04); z-index: 3; }
.orb-cell.owned { border-color: var(--oc); box-shadow: inset 0 0 0 0.25cqw color-mix(in srgb, var(--oc) 55%, transparent); }
.orb-cell.corner { background: radial-gradient(circle, #241d55, #0e1838); font-size: 1.2cqw; }
.orb-cell.event { background: linear-gradient(160deg, #1b1847, #10142e); }
.orb-cell.anomaly { background: radial-gradient(circle, #000 20%, #3a1d5c 75%); }
.orb-cell.frozen { filter: saturate(.4) brightness(.8); }
.orb-band { position: absolute; background: var(--sc); }
.orb-cell.bottom .orb-band { left: 0; right: 0; top: 0; height: 18%; }
.orb-cell.top .orb-band { left: 0; right: 0; bottom: 0; height: 18%; }
.orb-cell.left .orb-band { top: 0; bottom: 0; right: 0; width: 18%; }
.orb-cell.right .orb-band { top: 0; bottom: 0; left: 0; width: 18%; }
.orb-cell-icon { font-size: 2.1cqw; line-height: 1; }
.orb-cell.corner .orb-cell-icon { font-size: 3.2cqw; }
.orb-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.orb-price { font-size: 1cqw; color: #ffd27a; letter-spacing: 0.1cqw; }
.orb-ice { position: absolute; top: 2px; right: 3px; font-size: 1.4cqw; }
.orb-tokens { position: absolute; inset: 0.6%; pointer-events: none; }
.orb-token { position: absolute; width: 3.6cqw; height: 3.6cqw; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
  font-size: 2cqw; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 65%, #fff), var(--c)); border: 0.25cqw solid #fff;
  box-shadow: 0 0.4cqw 1cqw #000a; transition: left .12s ease, top .12s ease; z-index: 4; }
.orb-token.active { animation: orb-pulse 1.2s ease-in-out infinite; z-index: 5; }
@keyframes orb-pulse { 50% { box-shadow: 0 0 0 0.8cqw color-mix(in srgb, var(--c) 35%, transparent), 0 0.4cqw 1cqw #000a; } }
.orb-center { position: absolute; left: calc(0.6% + 100% / 9 + 0.6%); top: calc(0.6% + 100% / 9 + 0.6%); width: calc(700% / 9 - 2.4%); height: calc(700% / 9 - 2.4%);
  display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 1.4cqw; font-size: max(12px, 1.6cqw); }
.orb-center-inner { width: 100%; max-width: 560px; text-align: center; display: grid; gap: 1.2cqw; }
.orb-center-inner p { margin: 0; color: var(--muted2); }
.orb-logo { font-weight: 900; letter-spacing: 0.9cqw; font-size: max(14px, 2.6cqw); background: linear-gradient(90deg, #ffd27a, #ff8ac1, #9b8bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orb-timer { position: relative; height: 18px; border-radius: 9px; background: #0b1528; border: 1px solid #2a3f66; overflow: hidden; }
.orb-timer span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6e5bff, #49c8ff); transition: width .25s linear; }
.orb-timer.low span { background: linear-gradient(90deg, #ff5a6a, #ff8a3d); }
.orb-timer em { position: relative; font-style: normal; font-size: 12px; font-weight: 800; }
.orb-dice { display: flex; justify-content: center; gap: 1.4cqw; }
.orb-die { font-size: max(40px, 6cqw); line-height: 1; color: #fff; background: none; border: 0; padding: 0; text-shadow: 0 0 1.2cqw #9b8bff; }
button.orb-die { cursor: pointer; opacity: .55; transition: .15s; }
button.orb-die.sel { opacity: 1; transform: translateY(-4px); text-shadow: 0 0 1.6cqw #ffd27a; color: #ffd27a; }
.orb-card { padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; border: 1px solid #4d3fa8; background: linear-gradient(150deg, #1d1750, #0e1232); }
.orb-card span { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9b8bff; }
.orb-card strong { display: block; font-size: 1.15em; margin: 2px 0; }
.orb-offer { padding: 1.2cqw; border-radius: 1.2cqw; border: 1px solid #267d65; background: #0c2420; display: grid; gap: 6px; }
.orb-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.orb-actions { display: grid; gap: 10px; }
.orb-debt { color: var(--red); font-weight: 800; }
.orb-name-tag { color: color-mix(in srgb, var(--c) 75%, #fff); white-space: nowrap; }
.orb-results h2 { font-size: max(20px, 3cqw); }
.orb-podium { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; text-align: left; }
.orb-podium li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #0b1828; border: 1px solid var(--line); }
.orb-podium li.win { border-color: var(--gold); background: linear-gradient(90deg, #3a2a0e, #0b1828); }
.orb-podium small { grid-column: 2 / -1; }
.orb-medal { font-size: 1.4em; }

.orb-side { display: grid; gap: 10px; min-width: 0; }
.orb-players { display: grid; gap: 8px; }
.orb-player { display: flex; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid #1a344e; background: linear-gradient(150deg, #0d1b2c, #091522); }
.orb-player.turn { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); }
.orb-player.me .orb-player-head strong::after { content: ' (ty)'; color: var(--muted); font-weight: 600; font-size: 12px; }
.orb-player.out { opacity: .45; }
.orb-player .orb-token-lg { width: 36px; height: 36px; font-size: 19px; }
.orb-player-main { flex: 1; min-width: 0; }
.orb-player-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.orb-player-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-top: 2px; }
.orb-owned { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.orb-chip { width: 12px; height: 8px; border-radius: 2px; background: var(--sc); }
.orb-chip.frozen { opacity: .35; }
.orb-status { margin-top: 3px; color: var(--muted2); }
.orb-tabs { margin: 0; }
.orb-tab { min-width: 0; }
.orb-log { max-height: 420px; overflow-y: auto; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: #071220; border: 1px solid var(--line); }
.orb-log p { margin: 0 0 5px; color: var(--muted2); }
.orb-assets { display: grid; gap: 8px; }
.orb-asset { padding: 8px 10px 8px 12px; border-radius: 10px; background: #0b1828; border: 1px solid var(--line); border-left: 4px solid var(--sc); display: grid; gap: 4px; }
.orb-asset-name { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.orb-asset .orb-btns { justify-content: flex-start; }
.orb-sectors { display: grid; gap: 4px; }
.orb-sector { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 8px; border-left: 3px solid var(--sc); background: #0a1624; }
.orb-sector-owners { display: flex; gap: 4px; }
.orb-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--oc); border: 1px solid #5a7395; vertical-align: middle; }
.orb-trade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.orb-trade-side { max-height: 50vh; overflow-y: auto; }
.orb-trade-side h4 { margin-bottom: 6px; }
.orb-rules h3 { margin-top: 18px; }
.orb-rules p, .orb-rules li { color: var(--muted2); }
.orb-cards li { margin-bottom: 4px; }
.orb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.orb-stat { display: grid; gap: 4px; margin: 0; }
.orb-stat span { color: var(--muted); font-size: 12px; }
.orb-stat b { font-size: 20px; }
.orb-view .orb-stats + .panel { margin-top: 18px; }

@container (max-width: 560px) {
  .orb-name { display: none; }
  .orb-cell-icon { font-size: 3.4cqw; }
  .orb-price { font-size: 1.9cqw; }
  .orb-token { width: 4.6cqw; height: 4.6cqw; font-size: 2.6cqw; }
}
@media (max-width: 1100px) {
  .orb-layout { grid-template-columns: minmax(0, 1fr); }
  .orb-board-wrap { max-width: 100%; }
  .orb-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .orb-hero { grid-template-columns: 1fr; padding: 20px; }
  .orb-hero .orb-planet { width: 120px; height: 120px; }
  .orb-start, .orb-wait-grid, .orb-trade { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* na telefonie środek planszy jest za mały na przyciski - akcje pod planszą */
  .orb-center { position: static; width: auto; height: auto; padding: 12px 0 0; font-size: 14px; }
  .orb-board { aspect-ratio: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  .orb-cells, .orb-tokens { position: relative; inset: auto; }
  .orb-cells { aspect-ratio: 1; padding: 0.6%; border-radius: 12px; border: 1px solid #2a3f66;
    background: radial-gradient(ellipse at 50% 50%, #2a1f5e 0, #0a1226 60%, var(--orb-space) 100%); }
  .orb-tokens { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; }
  .orb-board-wrap .orb-center .orb-planet.small, .orb-board-wrap .orb-center .orb-logo { display: none; }
  .orb-die { font-size: 48px; }
  .orb-bots { grid-template-columns: 1fr; }
}
.orb-cell.bottom { padding-top: 22%; } .orb-cell.top { padding-bottom: 22%; }
.orb-cell.left { padding-right: 22%; } .orb-cell.right { padding-left: 22%; }

/* --- Poker Texas Hold'em (#/poker) --- */
.pk-view { --pk-felt: #7a1f22; --pk-felt2: #4a0f14; --pk-rail: #1a1310; --pk-gold: #f2c35b; }
.pk-hero { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: center; margin: 24px 0 18px; padding: 28px;
  border: 1px solid #3a2a2a; border-radius: var(--radius); background: radial-gradient(ellipse at 85% 40%, #5a1a20 0, transparent 55%), linear-gradient(140deg, #140d12, #0a1220); }
.pk-kicker { color: var(--pk-gold); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.pk-hero h1 { font-size: clamp(28px, 4.2vw, 44px); letter-spacing: -1px; margin-top: 4px; }
.pk-hero h1 span { color: var(--pk-gold); }
.pk-hero p { color: var(--muted2); max-width: 720px; margin: 10px 0 0; }
.pk-hero-cards { display: flex; justify-content: center; }
.pk-hero-cards .pk-card { width: 84px; height: 118px; font-size: 30px; }
.pk-hero-cards .tilt-l { transform: rotate(-9deg) translateX(10px); }
.pk-hero-cards .tilt-r { transform: rotate(8deg) translate(-10px, 6px); }
.pk-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pk-start-card { display: flex; flex-direction: column; gap: 8px; }
.pk-start-card p { flex: 1; margin: 0; font-size: 13px; }
.pk-code-form { display: flex; gap: 8px; }
.pk-code-form .input { text-transform: uppercase; letter-spacing: 3px; font-weight: 800; min-width: 0; flex: 1; }
.pk-table-row { justify-content: space-between; margin-bottom: 8px; }
.pk-table-row .row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pk-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #6a1f25; color: #ffd6d9; font-size: 12px; font-weight: 800; }
.pk-neg { color: var(--red); }

/* karty */
.pk-card { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 64px; border-radius: 6px; background: linear-gradient(160deg, #fff, #e9edf2); border: 1px solid #c9d1db;
  box-shadow: 0 3px 8px #0007; font-size: 18px; line-height: 1; font-weight: 800; user-select: none; }
.pk-card b { font-size: 1em; }
.pk-card i { font-style: normal; font-size: 1.15em; margin-top: 2px; }
.pk-card.red { color: #d0202c; } .pk-card.black { color: #121722; }
.pk-card.back { background: repeating-linear-gradient(45deg, #b8323a 0 5px, #9c2530 5px 10px); border: 3px solid #f4e9e9; }
.pk-card.slot { background: #0003; border: 1px dashed #ffffff30; box-shadow: none; }
.pk-card.sm { width: 32px; height: 45px; font-size: 13px; border-radius: 4px; }
.pk-card.sm.back { border-width: 2px; }
.pk-card.lg { width: 56px; height: 78px; font-size: 22px; }
.pk-card.hl { box-shadow: 0 0 0 3px var(--pk-gold), 0 3px 10px #0008; }
.pk-card.dim { filter: brightness(.55); }

/* stół */
.pk-room { margin-top: 18px; }
.pk-head { display: grid; gap: 6px; margin-bottom: 12px; }
.pk-head > div:first-child { min-width: 0; }
.pk-head h1 { font-size: 24px; height: 32px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-head p { margin: 0; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* przyciski w jednym wierszu o stałej wysokości (na wąskim ekranie przewijane w bok) */
.pk-head-actions { display: flex; gap: 6px; align-items: center; height: 36px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.pk-head-actions > * { flex: none; }
.pk-head-actions > span { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.pk-sitout { min-width: 112px; }
.pk-rotate { display: none; }
.pk-code { font-size: 12px; color: var(--muted2); }
.pk-code b { color: #fff; letter-spacing: 2px; margin-left: 4px; }
.pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.gt-poker { --gt-ratio: 16 / 9; --gt-actions-h: 132px; --msg-top: 67%; }
.gt-poker .gt-table { background: radial-gradient(ellipse at 50% 30%, #2a1d2e, #120c16 70%); box-shadow: inset 0 0 0 1px #2c2030; }
.gt-poker .gt-stage { --card-w: 5.4cqw; --hole: 3.4cqw; --hole-me: 4.8cqw; --seat-w: clamp(100px, 17cqw, 150px); --plate-h: 44px; --gt-back: #b8323a; --gt-back2: #9c2530; }
.pk-main { min-width: 0; }
.pk-oval { position: absolute; inset: 11% 7%; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, #a2343a 0, var(--pk-felt) 45%, var(--pk-felt2) 100%);
  border: 14px solid var(--pk-rail); box-shadow: 0 0 0 2px #3b2a20, inset 0 0 40px #0009, 0 18px 40px #000a; }
/* środek stołu: 5 stałych slotów kart wspólnych i pula o stałym rozmiarze */
.pk-center { position: absolute; left: 50%; top: 47%; translate: -50% -50%; display: grid; gap: 1cqw; justify-items: center; width: 52%; }
.pk-board { display: grid; grid-template-columns: repeat(5, var(--card-w)); gap: .6cqw; }
.pk-cell { position: relative; width: var(--card-w); aspect-ratio: 5 / 7; }
.pk-cell > * { position: absolute; left: 0; top: 0; }
.pk-pot { display: grid; justify-items: center; align-content: center; width: min(100%, 300px); height: 54px; overflow: hidden; padding: 2px 12px;
  background: #0009; border: 1px solid #ffffff1c; border-radius: 14px; font-size: 13px; line-height: 16px; text-align: center; white-space: nowrap; }
.pk-pot > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pk-pot b { color: var(--pk-gold); }
.pk-side-pots { display: flex; gap: 10px; justify-content: center; font-size: 12px; color: var(--muted2); }
.pk-street { font-size: 12px; color: var(--muted2); }
.gt-msg.pk-result { font-size: 13px; border-color: var(--pk-gold); }
.gt-msg.pk-result b { color: var(--pk-gold); }
.pk-chip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px;
  background: radial-gradient(circle, #fff 0 28%, var(--pk-gold) 30% 60%, #fff 62% 70%, var(--pk-gold) 72%); }
.pk-bet { position: absolute; transform: translate(-50%, -50%); background: #000a; border-radius: 999px; padding: 2px 9px 2px 5px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pk-dealer { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: #f4f4f4; color: #222; font-weight: 900;
  font-size: 12px; display: grid; place-items: center; box-shadow: 0 2px 6px #0009; border: 2px solid #bbb; }
/* miejsce gracza: stały slot zakotwiczony w środku płytki - karty i nazwa układu leżą nad/pod nią absolutnie */
.pk-seat { position: absolute; width: var(--seat-w); height: 0; translate: -50% 0; z-index: 2; }
.pk-seat.empty .pk-plate { justify-content: center; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; }
.pk-sit { background: #0009; border: 1px dashed #ffffff55; color: #fff; border-radius: 10px; padding: 7px 14px; font-size: 12px; font-weight: 800; }
.pk-sit:hover { border-color: var(--pk-gold); color: var(--pk-gold); }
.pk-sit.bot { padding: 4px 10px; font-size: 12px; }
.pk-hole { position: absolute; left: 50%; translate: -50% 0; bottom: calc(var(--plate-h) / 2 - 10px); display: flex; z-index: 1; }
.pk-hole .gt-card { --card-w: var(--hole); }
.pk-seat.me .pk-hole .gt-card { --card-w: var(--hole-me); }
.pk-hole .gt-card + .gt-card { margin-left: calc(var(--card-w) * -.25); rotate: 6deg; }
.pk-hole .gt-card:first-child { rotate: -4deg; }
.pk-plate { position: absolute; left: 0; right: 0; top: calc(var(--plate-h) / -2); height: var(--plate-h); display: flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 5px; border-radius: 12px; z-index: 2;
  background: linear-gradient(180deg, #1d2534, #0d121b); border: 2px solid #2f3a4d; box-shadow: 0 4px 12px #0009; }
.pk-ava { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; background: #2a3448; font-weight: 800; }
.pk-ava img { width: 100%; height: 100%; object-fit: cover; }
.pk-who { display: grid; min-width: 0; line-height: 1.2; }
.pk-who b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-who span { font-size: 12px; color: var(--pk-gold); font-weight: 800; }
.pk-label { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .4px; background: #2f3a4d; color: #e6ecf5; white-space: nowrap; }
.pk-label.fold { background: #3a3f48; color: #aab2bf; }
.pk-label.raise, .pk-label.bet { background: #8a2a30; color: #fff; }
.pk-label.call, .pk-label.check { background: #24506e; color: #dff1ff; }
.pk-label.allin { background: var(--pk-gold); color: #2a1d00; }
.pk-label.win { background: #1f8a5b; color: #fff; }
.pk-seat.turn .pk-plate { border-color: #44e07a; box-shadow: 0 0 0 2px #44e07a55, 0 0 18px #44e07a55; }
.pk-seat.me .pk-plate { border-color: #4a6a9a; }
.pk-seat.turn.me .pk-plate { border-color: #44e07a; }
.pk-seat.folded .pk-plate, .pk-seat.away .pk-plate { opacity: .55; }
.pk-seat.folded .pk-hole { opacity: .45; }
.pk-seat.winner .pk-plate { border-color: var(--pk-gold); box-shadow: 0 0 18px #f2c35b88; }
.pk-timer { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.pk-timer i { display: block; height: 100%; width: 100%; background: #44e07a; transform-origin: left; transition: transform .25s linear; }
.pk-timer i.low { background: var(--red); }
.pk-kick { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #3a3f48; color: #fff; font-size: 10px; line-height: 18px; padding: 0; opacity: 0; }
.pk-seat:hover .pk-kick { opacity: 1; }
.pk-hand-name { position: absolute; left: 50%; translate: -50% 0; top: calc(var(--plate-h) / 2 + 3px); max-width: calc(var(--seat-w) + 24px); overflow: hidden;
  text-overflow: ellipsis; font-size: 12px; font-weight: 800; background: #000b; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.pk-seat.winner .pk-hand-name { color: var(--pk-gold); }

/* pasek akcji */
/* pasek akcji: stałe wiersze (układ / kontekst / trzy przyciski) */
.gt-poker .gt-actions { grid-template-rows: 18px 40px 52px; align-content: start; }
.pk-my-hand { height: 18px; line-height: 18px; font-size: 13px; color: var(--muted2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-my-hand b { color: var(--pk-gold); }
.pk-ctx { min-height: 0; overflow: hidden; display: grid; align-items: center; }
.pk-bar-info { height: 40px; padding: 0 12px; line-height: 38px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-raise { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pk-presets { display: flex; gap: 6px; flex-wrap: nowrap; }
.pk-slider { display: flex; gap: 10px; align-items: center; min-width: 0; }
.pk-slider input[type=range] { flex: 1; min-width: 0; accent-color: var(--pk-gold); }
.pk-slider .input { width: 120px; flex: none; }
.pk-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pk-btn { height: 52px; padding: 0 10px; border-radius: 10px; border: 1px solid #a3343c; color: #fff; font-size: 17px; font-weight: 800; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, #c83a44, #8e1f28); box-shadow: inset 0 1px 0 #ffffff33, 0 4px 12px #0007; }
.pk-btn:hover:not(:disabled) { filter: brightness(1.1); }
.pk-btn:disabled { opacity: .35; filter: grayscale(.7); cursor: not-allowed; box-shadow: none; }
.pk-btn.fold { background: linear-gradient(180deg, #4a515d, #2b3039); border-color: #5a6270; }
.pk-btn.raise { background: linear-gradient(180deg, #e0a73a, #a8711a); border-color: #e7b552; color: #1d1300; }
.pk-pres { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; justify-content: center; overflow: hidden; }
.pk-pre { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; white-space: nowrap; min-width: 0; border-radius: 10px; border: 1px solid var(--line2); background: #10233a; color: var(--muted2); font-weight: 700; font-size: 13px; }
.pk-pre .box { width: 14px; height: 14px; border-radius: 4px; border: 2px solid #5d7896; }
.pk-pre.on { color: #fff; border-color: var(--pk-gold); }
.pk-pre.on .box { background: var(--pk-gold); border-color: var(--pk-gold); }

/* panel boczny */
.pk-side { padding: 12px; position: sticky; top: 84px; height: 600px; display: flex; flex-direction: column; min-width: 0; }
.pk-side-tabs { margin: 0 0 8px; }
.pk-log { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 3px; align-content: start; font-size: 12px; color: var(--muted2); }
.pk-log-line b { color: #dfe9f5; }
.pk-log-line.head { color: var(--pk-gold); font-weight: 800; margin-top: 6px; }
.pk-chat-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pk-chat-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 10px; background: #071220; border: 1px solid var(--line); margin-bottom: 8px; }
.pk-msg { font-size: 13px; overflow-wrap: anywhere; }
.pk-msg b { color: #9fc6ff; }
.pk-msg.mine b { color: var(--pk-gold); }
.pk-chat-form { display: flex; gap: 8px; }
.pk-chat-form .input { flex: 1; min-width: 0; }

/* zasady, profil */
.pk-rules ol, .pk-rules ul { padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--muted2); }
.pk-rules b { color: #fff; }
.pk-rules h4 { margin-top: 14px; }
.pk-hands { display: grid; gap: 8px; }
.pk-hand-row { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pk-hand-no { color: var(--muted); font-weight: 800; text-align: right; }
.pk-hand-cards { display: flex; gap: 3px; }
.pk-profile-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pk-stats > div { background: var(--panel3); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; display: grid; gap: 2px; }
.pk-stats span { font-size: 12px; color: var(--muted); }
.pk-stats b { font-size: 18px; }

@media (max-width: 1100px) {
  .pk-layout { grid-template-columns: 1fr; }
  .pk-side { position: static; height: 380px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .pk-rotate { display: block; height: 18px; margin: 0 0 8px; font-size: 12px; line-height: 18px; color: var(--muted2); text-align: center; }
}
@media (max-width: 760px) {
  .pk-hero { grid-template-columns: 1fr; padding: 20px; }
  .pk-hero-cards { display: none; }
  .pk-start { grid-template-columns: 1fr; }
  .gt-poker { --gt-ratio: 3 / 4; --gt-actions-h: 172px; --msg-top: 64%; }
  .gt-poker .gt-stage { --card-w: 10.5cqw; --hole: 7cqw; --hole-me: 11cqw; --seat-w: 25cqw; --plate-h: 34px; }
  .gt-poker .gt-actions { grid-template-rows: 18px 76px 46px; gap: 6px; }
  .pk-oval { inset: 9% 9%; border-width: 9px; }
  .pk-center { width: 74%; }
  .pk-board { gap: 1cqw; }
  .pk-pot { height: 46px; font-size: 12px; line-height: 14px; }
  .pk-plate { padding: 3px 5px; gap: 4px; }
  .pk-ava { display: none; }
  .pk-who b, .pk-who span { font-size: 12px; }
  .pk-raise { grid-template-columns: 1fr; gap: 6px; }
  .pk-presets .btn { flex: 1; }
  .pk-bar-info { height: 76px; display: flex; align-items: center; justify-content: center; line-height: 18px; white-space: normal; }
  .pk-pres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pk-pre { height: 60px; white-space: normal; font-size: 12px; padding: 0 8px; }
  .pk-btn { height: 46px; font-size: 13px; padding: 0 6px; }
}
.fb-pick { gap: 8px; }
.fb-pick-item { display: grid; gap: 4px; justify-items: center; padding: 6px; border: 1px solid #1a344e; border-radius: 10px; cursor: pointer; }
.fb-pick-item img { width: 110px; height: 80px; object-fit: cover; border-radius: 6px; }
.fb-pick-item:has(input:checked) { border-color: #2a8cf0; background: #0e2a46; }
.fb-notify-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; }
.fb-notify-bar label { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; }
.fb-notify-bar .input { width: auto; }

/* ======================================================================
   Menu główne na węższych ekranach (≤ 1060 px): pod przyciskiem ☰, "Więcej" rozwinięte w liście
   ====================================================================== */
@media (max-width: 1060px) {
  #main-nav { display: none; }
  body.menu-open #main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: var(--head); left: 0; right: 0; margin: 0;
    background: #07111ffa; border-bottom: 1px solid #18304a; padding: 10px 16px 16px; font-size: 15px; max-height: calc(100vh - var(--head)); max-height: calc(100dvh - var(--head)); overflow-y: auto; }
  body.menu-open #main-nav > a { padding: 11px 10px; }
  body.menu-open #main-nav > a .sb-ico { display: block; }
  .nav-more-btn { display: none; }
  .nav-more-list { display: grid; position: static; gap: 2px; padding: 6px 0 0; margin-top: 6px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; min-width: 0; }
  .nav-more-list a { padding: 11px 10px; font-size: 15px; }
  .btn.menu { display: inline-flex; }
}

/* przycisk konta (otwiera panel gracza) */
.account-chip .chev { width: 14px; height: 14px; color: var(--muted2); transition: transform .15s; }
button.account-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (max-width: 860px) { .account-chip .chev { display: none; } }

/* ======================================================================
   Karta powitalna na stronie głównej (zalogowany, public/js/pages/home.js)
   ====================================================================== */
/* układ zależy od szerokości samej karty (paski boczne zwężają treść): wąska - jedna kolumna, szeroka - przyciski obok, najszersza - z napisem */
.welcome-wrap { container-type: inline-size; margin-bottom: 18px; }
.welcome { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 32px; align-items: center;
  padding: 20px; border: 1px solid #21405c; border-radius: 18px;
  background: linear-gradient(0deg, #08142a 30%, #08142acc 65%, #08142a77 100%), url('/img/hero.jpg') 70% center / cover no-repeat, #0a1626; }
@container (min-width: 760px) {
  .welcome { grid-template-columns: minmax(0, 1fr) minmax(230px, 310px); padding: 26px;
    background: linear-gradient(90deg, #08142a 0%, #08142af5 42%, #0a1a30b5 62%, #0a1a3040 100%), url('/img/hero.jpg') right center / auto 100% no-repeat, #0a1626; }
}
@container (min-width: 1180px) { .welcome { grid-template-columns: minmax(0, 1fr) 310px 170px; } .welcome .wc-tag { display: block; } }
.welcome::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 0%, #1687ff22, transparent 55%); }
.welcome > * { position: relative; z-index: 1; min-width: 0; }
.wc-hello { display: flex; align-items: center; gap: 20px; }
.wc-av { position: relative; flex: none; }
.wc-av .avatar { width: 84px; height: 84px; border-radius: 50%; font-size: 34px; box-shadow: 0 0 0 3px #1c3a58, 0 10px 30px #0008; }
.wc-av .sb-st { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border: 3px solid #0b1726; }
.wc-text { min-width: 0; }
.wc-text h1 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -1px; line-height: 1.1; overflow-wrap: anywhere; }
.wc-sub { color: #60baff; font-weight: 700; margin: 8px 0 2px; }
.wc-text p { margin: 0; color: var(--muted2); font-size: 14px; }
.wc-main { container-type: inline-size; }
.wc-stats { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #23415f; border-radius: 12px; background: #1c3550; }
.wc-stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; background: #081325; }
@container (min-width: 600px) { .wc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wc-stat svg { width: 30px; height: 30px; flex: none; }
.wc-stat > div { min-width: 0; }
.wc-stat strong { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-stat span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-cta { display: grid; gap: 14px; }
.wc-btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 17px 22px; border-radius: 10px; border: 1px solid #2e7ad0; background: #0a1a2fd0; color: #fff; font: inherit; font-size: 18px; font-weight: 800; text-align: left; transition: transform .15s, filter .15s; }
.wc-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.wc-btn svg { width: 24px; height: 24px; flex: none; fill: var(--muted2); }
.wc-btn.primary { background: linear-gradient(135deg, #168aff, #1262dd); border-color: #2c93ff; box-shadow: 0 10px 28px #0674ff40; }
.wc-btn.primary svg { fill: #fff; }
.wc-btn .wc-go { margin-left: auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.wc-tag { display: none; justify-self: center; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-weight: 700; color: #6cc4ff; font-size: 22px; line-height: 1.1; text-align: center; transform: rotate(-8deg); text-shadow: 0 0 18px #1687ff88; pointer-events: none; }
@media (max-width: 520px) {
  .wc-hello { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wc-av .avatar { width: 66px; height: 66px; font-size: 28px; }
  .wc-stat { padding: 10px 12px; gap: 9px; }
  .wc-stat svg { width: 24px; height: 24px; }
  .wc-btn { padding: 14px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wc-btn { transition: none; } }

/* Matching (public/js/pages/games.js: renderMatchmaking): gry z kolejkami - wejście prosto do zakładki gry */
.mm-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.mm-pick { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #1b3550; border-radius: 12px; background: #0a1626; transition: border-color .15s, transform .15s; min-width: 0; }
.mm-pick:hover { border-color: #2c5a86; transform: translateY(-2px); }
.mm-pick-main { flex: 1; min-width: 0; display: grid; }
.mm-pick-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-pick-main small { color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .mm-pick { transition: none; } }

/* ======================================================================
   Prawy pasek (panel gracza) w stylu panelu profilu: gradient, zakładki z podkreśleniem,
   nagłówek z awatarem, rangą i statusem, sekcje Konto / Znajomi / Administracja
   ====================================================================== */
.side.right { background: linear-gradient(170deg, #0e1f33, #08131f 60%); border-left-color: var(--line2); }
.side.right .sb-head { padding-bottom: 0; align-items: stretch; min-height: 56px; }
.side.right .sb-collapse { align-self: center; }
.side.right .sb-tabs { gap: 0; }
.side.right .sb-tab { border: 0; border-radius: 0; padding: 9px 2px 9px; gap: 4px; font-size: 12px; box-shadow: inset 0 -2px 0 transparent; }
.side.right .sb-tab .sb-ico { width: 19px; height: 19px; }
.side.right .sb-tab:hover { background: #0e2034; }
.side.right .sb-tab[aria-selected="true"] { background: none; color: #fff; box-shadow: inset 0 -2px 0 var(--blue); }
.side.right .sb-tab[aria-selected="true"] .sb-ico { color: var(--blue); }
.side.right .sb-badge { top: 4px; right: calc(50% - 20px); border-color: #0d1d30; }
.side.right .sb-pane[data-tab="profile"] { padding: 0 10px 16px; gap: 14px; }

.side.right .sb-me { margin: 0 -10px; padding: 16px; gap: 14px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 20% 0%, #1687ff2e, transparent 65%); }
.sb-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sb-who .sb-main { flex: 1; }
.sb-who .sb-me-name { font-size: 18px !important; letter-spacing: -.4px; }
.side.right .sb-av.big .avatar { width: 58px; height: 58px; border-radius: 50%; font-size: 24px; box-shadow: 0 0 0 3px #1c3a58; }
.side.right .sb-av.big .sb-st { right: 0; bottom: 0; width: 15px; height: 15px; border: 3px solid #0e1f33; }
.sb-status { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-stchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1px solid #1c3854; background: #0a1726; color: #9eb2c9; font-size: 12px; font-weight: 700; }
.sb-stchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.sb-stchip.away::before { background: var(--gold); }
.sb-stchip.busy::before { background: var(--red); }
.sb-stchip.invisible::before { background: #5d7088; }
.sb-stchip:hover { color: #fff; }
.sb-stchip[aria-pressed="true"] { background: #123d68; border-color: #267ec6; color: #fff; }

.sb-sec { display: grid; gap: 1px; }
.sb-sec h3 { display: flex; align-items: center; gap: 6px; margin: 0 8px 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.sb-sec h3 > span { flex: 1; }
.sb-sec h3 .sb-ico { width: 14px; height: 14px; }
.sb-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none; color: var(--muted2); font: inherit; font-size: 14px; font-weight: 650; text-align: left; }
.sb-link:hover { background: #12283f; color: #fff; }
.sb-link .sb-ico { width: 19px; height: 19px; color: #6f8ba8; }
.sb-link > span { flex: 1; min-width: 0; }
.sb-link em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.sb-link.gold, .sb-link.gold .sb-ico { color: var(--gold); }
.sb-link.danger, .sb-link.danger .sb-ico { color: #ff8f9b; }
.sb-due { flex: none; font-size: 12px; font-weight: 800; color: #fff; background: var(--red); border-radius: 99px; padding: 1px 7px; }
.sb-sec .sb-friend { padding: 6px 8px; }
.sb-sec .sb-friend:hover { background: #12283f; }
.sb-admin { border: 1px solid #5a2a36; border-radius: 12px; padding: 10px 4px 4px; background: linear-gradient(150deg, #24101a80, #12101a40); }
.sb-admin h3, .sb-admin .sb-link .sb-ico { color: #ff8f9b; }

/* zwinięta szyna: przyciski w ramkach jak w panelu, awatar w okręgu */
.side.right .sb-rail { gap: 8px; padding-top: 12px; }
.side.right .sb-rail button { border-color: #1c3854; background: #0a1726; }
.side.right .sb-rail button:hover { border-color: #2f6ea8; background: #10233a; }
.side.right .sb-rail button:first-child { border: 0; background: none; }
.side.right .sb-rail button:first-child .avatar { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #1c3a58; }
.side.right .sb-rail button .avatar.xs { border-radius: 50%; }

/* ======================================================================
   Lewy pasek "Rozgrywki" w stylu panelu gracza: zakładki Graj / Gathery / Na żywo / Moje,
   karta "Teraz" (mecz, kolejka z czasem, lobby, szybki start), gry jako zwijane karty
   ====================================================================== */
.side.left { background: linear-gradient(190deg, #0e1f33, #08131f 60%); border-right-color: var(--line2); }
.side.left .sb-head { padding: 0 6px 0 0; align-items: stretch; min-height: 56px; }
.side.left .sb-collapse { align-self: center; }
.side.left .sb-tabs { gap: 0; }
.side .sb-tab .sb-ico { width: 19px; height: 19px; }
.side.left .sb-tab { border: 0; border-radius: 0; padding: 9px 2px; gap: 4px; font-size: 12px; box-shadow: inset 0 -2px 0 transparent; }
.side.left .sb-tab:hover { background: #0e2034; }
.side.left .sb-tab[aria-selected="true"] { background: none; color: #fff; box-shadow: inset 0 -2px 0 var(--blue); }
.side.left .sb-tab[aria-selected="true"] .sb-ico { color: var(--blue); }
.side.left .sb-badge { top: 4px; right: calc(50% - 20px); border-color: #0d1d30; }
.sb-badge.blue { background: #1a5fd0; }
body.sb-left-min .side.left .sb-tabs { display: none; }

/* karta "Teraz" */
.sb-now { padding: 14px 14px 14px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 20% 0%, #1687ff2e, transparent 65%); display: grid; gap: 12px; }
.sb-now.found { background: radial-gradient(ellipse at 20% 0%, #37d69a38, transparent 65%); }
.sb-now.live { background: radial-gradient(ellipse at 20% 0%, #ff5a6a26, transparent 65%); }
.sb-now-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-now-top > .sb-ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #123d68; color: var(--cyan); }
.sb-now-top .sb-main b { font-size: 15px; letter-spacing: -.3px; }
.sb-now-top .sb-main small { font-variant-numeric: tabular-nums; }
.sb-now-top .sb-timer { color: var(--cyan); font-weight: 800; }
small.sb-now-label { font-size: 12px !important; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.sb-now.found small.sb-now-label { color: var(--green); }
.sb-now.live small.sb-now-label { color: #ff8f9b; }
.sb-now-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-now-actions .btn { flex: 1; padding: 9px 12px; }
.sb-now-actions .sb-slots { flex-basis: 100%; }
.btn.ok { background: linear-gradient(135deg, #2bbd85, #1c8f63); border-color: #37d69a; color: #fff; }
.sb-ring { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.sb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sb-ring-bg { fill: none; stroke: #13283f; stroke-width: 4; }
.sb-ring-fg { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.sb-ring.found .sb-ring-fg { stroke: var(--green); }
.sb-ring.live .sb-ring-fg { stroke: var(--red); }
.sb-ring .game-icon { position: relative; }

.sb-lpane { padding: 12px 10px 16px; display: grid; gap: 16px; }
.sb-lpane .sb-sec h3 .sb-n { margin-left: 0; }
.sb-lpane .sb-links { margin: 0 -10px -16px; }

/* gra z trybami: zwijana karta */
.sb-gcards { display: grid; gap: 6px; }
.sb-gcard { border: 1px solid #16304a; border-radius: 12px; background: #0a1626b0; overflow: hidden; }
.sb-gcard-h { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; }
.sb-gcard-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sb-gcard-link b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-gcard-link:hover b { color: #9bd3ff; }
.sb-searching { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; color: var(--green); white-space: nowrap; }
.sb-searching::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.sb-ib.flat { border-color: transparent; }
.sb-ib.flat .sb-ico { transition: transform .15s; }
.sb-gcard.open .sb-ib.flat .sb-ico { transform: rotate(180deg); }
.sb-modes { display: none; padding: 0 6px 6px; gap: 2px; }
.sb-gcard.open .sb-modes { display: grid; }
.sb-mode { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; }
.sb-mode:hover { background: #0e2034; }
.sb-mode.mine { background: #0f2a46; box-shadow: inset 0 0 0 1px #267ec6; }
.sb-mode .sb-main { flex: 1; }
.sb-mode .sb-main b { font-size: 12.5px; font-weight: 700; }

.sb-lpane .sb-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.sb-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.sb-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2b4765; }
.sb-dots i.on { background: linear-gradient(135deg, #4ea8ff, #1a5fd0); }
.sb-invite { display: grid; gap: 8px; padding: 8px; border: 1px solid #8a6a22; border-radius: 12px; background: linear-gradient(100deg, #3a2c0c, #0c1929); }
.sb-invite + .sb-invite { margin-top: 6px; }
.sb-invite .sb-row { padding: 0; border: 0; background: none !important; }
.sb-lpane .sb-row.todo { background: none; border-color: transparent; box-shadow: inset 3px 0 0 var(--gold); border-radius: 4px 10px 10px 4px; }
.sb-lpane .sb-row.todo:hover { background: #12283f; }
.sb-due { flex: none; font-size: 12px; font-weight: 800; color: #fff; border-radius: 99px; padding: 1px 7px; white-space: nowrap; background: #13283f; }
.sb-due.red { background: var(--red); }
.sb-due.gold { background: #8a6a22; color: #fff3d6; }
.sb-tail { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* zwinięta szyna: przyciski w ramkach, "Teraz" z czasem w kolejce */
.side.left .sb-rail { gap: 8px; padding-top: 12px; }
.side.left .sb-rail button { border-color: #1c3854; background: #0a1726; }
.side.left .sb-rail button:hover { border-color: #2f6ea8; background: #10233a; }
.side.left .sb-rail .sb-badge { top: -5px; right: -5px; }
.side.left .sb-rail .sb-now-rail { border-color: #267ec6; background: #0f2a46; }
.side.left .sb-rail .sb-now-rail .sb-count { background: none; color: var(--cyan); padding: 0; }
.side.left .sb-rail .sb-now-rail.found { border-color: var(--green); background: #0f3328; }
.side.left .sb-rail .sb-now-rail.found .sb-count { color: var(--green); }
.side.left .sb-rail .sb-now-rail.live { border-color: #7a2a35; background: #2a1219; }
.side.left .sb-rail .sb-now-rail.live .sb-count { color: #ff8f9b; }
@media (prefers-reduced-motion: reduce) { .sb-ring-fg, .sb-ib.flat .sb-ico { transition: none; } }
.sb-lpane .btn.wide { margin-top: 0; }

/* ------------------------------------------------------------------ Statki (#/battleships) */
.bs-view { --bs-sea: #091a2c; --bs-sea2: #0b2136; --bs-grid: #17324c; --bs-ship: #6d8cab; --bs-ship2: #9cb6cf; }
.bs-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.bs-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bs-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; align-self: flex-start; }
.bs-seg button { background: transparent; border: 0; padding: 8px 14px; color: var(--muted2); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.bs-seg button + button { border-left: 1px solid var(--line2); }
.bs-seg button[aria-pressed="true"] { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--cyan); }
.bs-pips { display: inline-flex; gap: 3px; flex: none; }
.bs-pips i { width: 13px; height: 13px; border-radius: 3px; background: var(--bs-ship, #6d8cab); display: block; }
.bs-pips.sunk i { background: var(--red); opacity: .55; }

/* start */
.bs-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 18px; }
.bs-start .panel { margin: 0; }
.bs-start-card { display: flex; flex-direction: column; gap: 12px; }
.bs-start-card > .btn { align-self: flex-start; }
.bs-resume { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 11px; background: var(--bs-sea2); font-size: 13px; }
.bs-code-form { display: grid; gap: 6px; }
.bs-code-row { display: flex; gap: 8px; }
.bs-code-row .input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .25em; text-transform: uppercase; }
.bs-game-row { margin-top: 8px; justify-content: space-between; flex-wrap: wrap; }
.bs-game-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bs-empty-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--line2); color: var(--muted); }
.bs-badge { background: #37d69a22; color: var(--green); border: 1px solid #37d69a55; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.bs-sub { margin: 18px 0 2px; font-size: 13px; color: var(--muted2); }
.bs-rules ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; color: var(--muted2); font-size: 14px; }
.bs-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-top: 14px; max-width: 520px; }
.bs-legend div { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bs-legend span { flex: 1; color: var(--muted2); }
.bs-legend b { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); font-weight: 500; }

/* plansza */
.bs-board { display: grid; grid-template-columns: 1.6em repeat(10, minmax(0, 1fr)); width: 100%; max-width: 460px; user-select: none; -webkit-user-select: none; }
.bs-lab { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); display: grid; place-items: center; padding-bottom: 2px; }
.bs-cell { position: relative; aspect-ratio: 1; background: var(--bs-sea); border: 0; padding: 0; margin: 0; box-shadow: inset 0 0 0 .5px var(--bs-grid); display: block; min-width: 0; font: inherit; color: inherit; border-radius: 0; }
button.bs-cell { cursor: default; }
.bs-board.live .bs-cell.open, [data-board="place"] .bs-cell { cursor: pointer; }
.bs-board.live .bs-cell.open { cursor: crosshair; }
@media (hover: hover) { .bs-board.live .bs-cell.open:hover { background: #12355a; box-shadow: inset 0 0 0 1.5px var(--cyan); } }
.bs-cell.blocked { background: repeating-linear-gradient(135deg, var(--bs-sea) 0 4px, #0c2338 4px 5px); }
.bs-cell.miss::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--muted); opacity: .8; }
.bs-cell.ship::before { content: ""; position: absolute; inset: 12%; background: linear-gradient(180deg, var(--bs-ship2), var(--bs-ship)); border-radius: 3px; }
.bs-cell.ship.h.mid::before { left: -1px; right: -1px; border-radius: 0; }
.bs-cell.ship.h.start::before { right: -1px; border-radius: 40% 2px 2px 40%; }
.bs-cell.ship.h.end::before { left: -1px; border-radius: 2px 40% 40% 2px; }
.bs-cell.ship.v.mid::before { top: -1px; bottom: -1px; border-radius: 0; }
.bs-cell.ship.v.start::before { bottom: -1px; border-radius: 40% 40% 2px 2px; }
.bs-cell.ship.v.end::before { top: -1px; border-radius: 2px 2px 40% 40%; }
.bs-cell.ship.single::before { border-radius: 40%; }
.bs-cell.ghost::before { background: transparent; border: 1.5px dashed var(--bs-ship2); opacity: .7; }
.bs-cell.hit, .bs-cell.sunk { background: #2a1520; }
.bs-cell.sunk { background: #3a1420; box-shadow: inset 0 0 0 1px #7a2a3a; }
.bs-cell.hit::after, .bs-cell.sunk::after { content: ""; position: absolute; inset: 22%;
  background: linear-gradient(45deg, transparent 42%, var(--red) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--red) 42% 58%, transparent 58%); }
.bs-cell.sunk::after { background: linear-gradient(45deg, transparent 40%, #ff8b96 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #ff8b96 40% 60%, transparent 60%); }
.bs-cell.ship.hit::before { background: linear-gradient(180deg, #8d5864, #6b3f4b); }
.bs-cell.pending::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 2px solid var(--gold); animation: bs-ping 1s ease-out infinite; }
.bs-cell.last { box-shadow: inset 0 0 0 2px var(--gold); }
.bs-cell.pv-ok { background: #123f36; box-shadow: inset 0 0 0 1px var(--green); }
.bs-cell.pv-bad { background: #3d1622; box-shadow: inset 0 0 0 1px var(--red); }
.bs-cell.draft::before { content: ""; position: absolute; inset: 12%; border-radius: 3px; background: linear-gradient(180deg, #7fe0bd, var(--green)); }
.bs-cell.pv-next { background: #0f2c45; box-shadow: inset 0 0 0 1.5px var(--cyan); }
.bs-cell.pv-next::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--cyan); font-weight: 700; }
.bs-cell.fresh::after { animation: bs-splash .35s ease-out; }
@keyframes bs-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes bs-splash { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* rozstawianie */
.bs-place { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 24px; align-items: start; }
.bs-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bs-side { display: grid; gap: 14px; min-width: 0; }
.bs-side h2 { margin: 0 0 4px; font-size: 22px; }
.bs-bhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bs-bhead h3 { margin: 0; }
.bs-readout { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--cyan); font-size: 14px; min-width: 3ch; text-align: right; }
.bs-dock { display: grid; gap: 6px; }
.bs-dock button { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bs-sea2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--muted2); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.bs-dock button[aria-pressed="true"] { border-color: var(--cyan); background: #0f2b46; color: var(--text); }
.bs-dock button.placed { opacity: .45; }
.bs-invite { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.bs-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; letter-spacing: .3em; color: var(--gold); line-height: 1.2; }

/* gra */
.bs-play { display: grid; gap: 16px; }
.bs-play .panel { margin: 0; }
.bs-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bs-turn { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.bs-turn .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.bs-turn.mine .dot { background: var(--green); animation: bs-pulse 1.6s infinite; }
.bs-turn.theirs .dot { background: var(--gold); }
@keyframes bs-pulse { 0% { box-shadow: 0 0 0 0 #37d69a88; } 100% { box-shadow: 0 0 0 12px #37d69a00; } }
.bs-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bs-mine-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.bs-fleetbar { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.bs-fleetbar .bs-pips i { width: 11px; height: 11px; border-radius: 2px; }
.bs-score { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--muted2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.bs-log { list-style: none; margin: 8px 0 0; padding: 0; max-height: 240px; overflow: auto; display: grid; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.bs-log li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: 10px; padding: 4px; border-bottom: 1px solid #10243a; }
.bs-log .n { color: var(--muted); text-align: right; }
.r-miss { color: var(--muted); }
.r-hit { color: var(--gold); }
.r-sunk { color: var(--red); }
.bs-mini-log { display: none; flex-direction: column; gap: 6px; min-width: 0; }
.bs-log.mini { margin: 0; max-height: none; overflow: hidden; font-size: 12px; }
.bs-log.mini li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 0; line-height: 1.3; }
.bs-log.mini li:first-child { font-size: 13px; color: var(--text); }
.bs-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bs-result.win { border-color: #37d69a66; }
.bs-result.lose { border-color: #ff5a6a55; }
.bs-big { font-size: 40px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.bs-result.win .bs-big { color: var(--green); }
.bs-result.lose .bs-big { color: var(--red); }
.bs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 90px)); gap: 8px; text-align: center; }
.bs-stats div { background: var(--bs-sea2); border-radius: 10px; padding: 8px 4px; }
.bs-stats b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; }
.bs-stats span { font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
  .bs-start, .bs-place, .bs-under, .bs-boards { grid-template-columns: minmax(0, 1fr); }
  .bs-board { max-width: 100%; }
  /* telefon: plansza przeciwnika na całą szerokość, pod nią mała mapka własnej floty obok ostatnich ruchów */
  .bs-play { gap: 10px; }
  .bs-boards { gap: 10px; }
  .bs-play .panel { padding: 10px 12px; border-radius: 12px; }
  .bs-status { flex-wrap: nowrap; }
  .bs-turn { font-size: 17px; }
  .bs-col { gap: 8px; }
  .bs-mine-body { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 12px; }
  .bs-mine .bs-board { grid-template-columns: 1.4em repeat(10, minmax(0, 1fr)); }
  .bs-mine .bs-lab { font-size: 8px; }
  .bs-mine .bs-fleetbar { gap: 4px 6px; }
  .bs-mine .bs-fleetbar .bs-pips i, .bs-enemy .bs-fleetbar .bs-pips i { width: 8px; height: 8px; }
  .bs-enemy .bs-fleetbar { gap: 4px 6px; }
  .bs-mini-log { display: flex; }
  .bs-help { display: none; }
  .bs-legend { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .bs-cell::after, .bs-turn .dot { animation: none !important; } }

/* ===================================================== szachy – nauka od podstaw (public/js/pages/chessLearn.js) */
.learn-tabs { margin-bottom: 16px; }
.learn-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--gold); color: #1a1205; font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; }
.learn-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.learn-continue { display: flex; gap: 20px; align-items: center; margin: 0; }
.learn-continue-board { flex: 0 0 160px; max-width: 100%; }
.learn-continue-board .cb-wrap.mini { border-radius: 8px; overflow: hidden; }
.learn-continue-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.learn-continue-body h2 { font-size: 28px; font-weight: 900; line-height: 1.1; }
.learn-continue-body p { color: var(--muted2); margin: 0; max-width: 60ch; }
.learn-continue-body .actions { margin-top: 4px; }
.learn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.learn-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--panel3); border: 1px solid var(--line); min-width: 0; }
.learn-stat > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.learn-stat b { font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.learn-stat b small { font-size: 13px; font-weight: 700; color: var(--muted); }
.learn-stat b.gold, .gold-text { color: var(--gold); }
.learn-stat small.muted { font-size: 12px; margin-top: auto; }
.learn-bar { height: 6px; border-radius: 99px; background: #0a1726; overflow: hidden; margin-top: auto; }
.learn-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.learn-bar i.gold { background: linear-gradient(90deg, #d79a28, var(--gold)); }
.learn-bar i.done { background: var(--green); }
/* Nauka - pięć poziomów: pasek wyboru poziomu i cel poziomu (kolor poziomu w --lv) */
.lv1 { --lv: #37d69a; } .lv2 { --lv: #49c8ff; } .lv3 { --lv: #6f8dff; } .lv4 { --lv: #f2b84b; } .lv5 { --lv: #ff6b7a; }
.learn-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.learn-level { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; font-size: 12px; color: var(--muted); }
.learn-level:hover { border-color: color-mix(in srgb, var(--lv) 60%, var(--line)); }
.learn-level.on { border-color: var(--lv); box-shadow: inset 0 0 0 1px var(--lv); background: color-mix(in srgb, var(--lv) 8%, var(--panel)); }
.learn-level-top { display: flex; align-items: center; gap: 6px; color: var(--lv); font-weight: 700; }
.learn-level-top i { font-style: normal; font-size: 18px; line-height: 1; }
.learn-level b { color: var(--text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learn-level .learn-bar { margin-top: 2px; height: 5px; }
.learn-level .learn-bar i { background: var(--lv); }
.learn-level-goal { border-left: 3px solid var(--lv); padding: 2px 0 2px 14px; margin-bottom: 16px; display: grid; gap: 4px; }
.learn-level-goal .eyebrow { color: var(--lv); }
.learn-level-goal p { margin: 0; color: var(--muted2); max-width: 75ch; }
@media (max-width: 860px) {
  .learn-levels { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .learn-levels::-webkit-scrollbar { display: none; }
  .learn-level { flex: 0 0 40%; scroll-snap-align: start; }
}
.learn-pips { display: flex; gap: 6px; margin-top: auto; }
.learn-pips i { flex: 1; height: 6px; border-radius: 99px; background: #0a1726; }
.learn-pips i.on { background: var(--green); }
.learn-method { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.learn-method div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.learn-method span { font-size: 13px; color: var(--muted); }
.learn-chapter { margin-top: 22px; }
.learn-chapter .section-head h2 { margin-top: 2px; }
.learn-ch-prog { align-self: flex-end; font-weight: 800; font-size: 13px; color: var(--muted2); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.learn-ch-prog.full { color: var(--green); border-color: #1f5a47; }
.learn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.learn-tile { display: flex; flex-direction: column; gap: 4px; min-height: 100px; padding: 12px 13px; border-radius: 13px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.learn-tile:hover { border-color: #3f6a93; transform: translateY(-2px); }
.learn-tile strong { font-size: 15px; line-height: 1.25; }
.learn-tile.done { background: linear-gradient(180deg, #0f2438, var(--panel)); }
.learn-tile.next { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 0 24px #1687ff30; }
.learn-type { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.learn-tile.next .learn-type { color: var(--cyan); }
.learn-tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.learn-chip { font-size: 12px; font-weight: 800; color: var(--gold); border: 1px solid #6b5220; border-radius: 99px; padding: 1px 7px; }
.learn-stars { display: inline-flex; gap: 1px; font-size: 15px; }
.learn-stars i { font-style: normal; color: #24405e; }
.learn-stars i.on { color: var(--gold); text-shadow: 0 0 10px #f2b84b66; }
.learn-stars.big { font-size: 40px; gap: 6px; }
.learn-stars.big i.on { animation: learn-pop .45s backwards; }
.learn-stars.big i:nth-child(2) { animation-delay: .12s; }
.learn-stars.big i:nth-child(3) { animation-delay: .24s; }
@keyframes learn-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } }
.learn-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 8px; }
.learn-sub:first-child { margin-top: 0; }
.learn-rev + .learn-rev { margin-top: 8px; }
.learn-when { min-width: 70px; text-align: right; font-weight: 800; font-size: 13px; color: var(--gold); }
.learn-panel { display: flex; flex-direction: column; gap: 14px; }
.learn-intro { margin: 0; color: var(--muted2); font-size: 14px; }
.learn-task { font-weight: 700; padding: 11px 13px; border-radius: 11px; background: #0a1a2c; border: 1px dashed var(--line2); }
.learn-coach { display: flex; gap: 11px; align-items: flex-start; }
.learn-avatar { flex: 0 0 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2b6fc0, #0f2e55); border: 1px solid #2e5c8c; color: #fff; font: 26px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
.learn-bubble { flex: 1; min-width: 0; padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: var(--panel3); border: 1px solid var(--line2); font-size: 14px; }
.learn-bubble::before { content: "Trener"; display: block; margin-bottom: 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.learn-bubble.good { border-color: #1f6a52; background: #0c2a26; } .learn-bubble.good::before { content: "Trener · dobrze"; color: var(--green); }
.learn-bubble.bad { border-color: #6a2533; background: #2a111a; } .learn-bubble.bad::before { content: "Trener · spróbuj inaczej"; color: var(--red); }
.learn-bubble.warn { border-color: #6b5220; background: #251d0c; } .learn-bubble.warn::before { content: "Trener · uwaga"; color: var(--gold); }
.learn-bubble.hint { border-color: #2a6b54; background: #0d2420; } .learn-bubble.hint::before { content: "Podpowiedź"; color: #2fbf7f; }
.learn-meter { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.learn-meter b { color: var(--text); font-size: 15px; }
.learn-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.learn-result { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.learn-result p { margin: 0; }
.learn-result .actions { justify-content: center; }
.learn-seg { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--panel3); border: 1px solid var(--line); }
.learn-seg button { flex: 1; border: 0; border-radius: 8px; padding: 7px 6px; background: transparent; color: var(--muted2); font-weight: 700; font-size: 13px; }
.learn-seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.learn-toggles { display: flex; flex-direction: column; gap: 8px; }
.learn-toggles .check { font-size: 14px; color: var(--text); }
.learn-log { list-style: none; margin: -6px 0 0; padding: 0 0 0 53px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.learn-log:empty { display: none; }
.learn-log li { padding-left: 8px; border-left: 2px solid var(--line2); }
.learn-log li.good { border-color: #1f6a52; } .learn-log li.warn { border-color: #8a6a26; } .learn-log li.bad { border-color: #6a2533; } .learn-log li.hint { border-color: #2a6b54; }
.learn-warn { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px; border-radius: 12px; border: 1px solid #8a6a26; background: #2b210c; }
.learn-warn .eyebrow { color: var(--gold); }
.learn-warn p { margin: 0; }
.learn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.learn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.learn-legend i { width: 13px; height: 13px; border-radius: 50%; }
.learn-legend i.threat { box-shadow: inset 0 0 0 2.5px #ff3d55; } .learn-legend i.chance { box-shadow: inset 0 0 0 2.5px #19c27e; }
.learn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.learn-shake { animation: learn-shake .35s; }
@keyframes learn-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* oznaczenia pól: gwiazdka do zebrania, figura do zbicia, zagrożenie, okazja */
.cb-sq.mark-star::before { content: "★"; display: grid; place-items: center; z-index: 1; font-size: 7.5cqi; line-height: 1; color: var(--gold); text-shadow: 0 0 1.5cqi #f2b84baa, 0 .2cqi .4cqi #0006; }
.cb-sq.mark-target::before { box-shadow: inset 0 0 0 .6cqi var(--gold); background: #f2b84b33; }
.cb-sq.mark-threat::before { border-radius: 50%; inset: 5%; box-shadow: inset 0 0 0 .7cqi #ff3d55, 0 0 2cqi #ff3d5599; }
.cb-sq.mark-chance::before { border-radius: 50%; inset: 5%; box-shadow: inset 0 0 0 .7cqi #19c27e, 0 0 2cqi #19c27e88; }
/* lobby i profil */
.learn-promo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; border-color: #2370b3; }
.learn-promo:hover { border-color: var(--blue); }
.learn-promo > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.learn-promo-icon { font-size: 30px; }
.learn-chapters { display: grid; gap: 8px; margin-bottom: 8px; }
.learn-chapter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.learn-chapter-row .learn-bar { grid-column: 1 / -1; margin-top: 0; }
.chess-mini-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; margin-bottom: 10px; }
.chess-mini-tile { display: grid; gap: 1px; padding: 9px 10px; border-radius: 10px; background: var(--panel3); border: 1px solid #1a3550; }
.chess-mini-tile:hover { border-color: #2d6fa5; }
.chess-mini-tile span, .chess-mini-tile small { font-size: 12px; color: var(--muted); }
.chess-mini-tile b { font-size: 19px; font-variant-numeric: tabular-nums; }
.chess-learn-row { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; }
.chess-learn-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chess-profile-panel .btn { margin-top: 12px; }
@media (max-width: 960px) {
  .learn-hero { grid-template-columns: 1fr; }
  .learn-method { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .learn-continue { flex-direction: column; align-items: stretch; }
  .learn-continue-board { flex: none; width: 140px; }
  .learn-continue-body h2 { font-size: 24px; }
  .learn-method { grid-template-columns: 1fr; gap: 12px; }
  .learn-tiles { grid-template-columns: 1fr 1fr; }
  .learn-rev { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .learn-stars.big i.on, .learn-shake { animation: none !important; } }

/* ------------------------------------------------------------------ lobby gier przeglądarkowych (js/lobbyKit.js) */
.lk-invite { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; width: 100%; }
.lk-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lk-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; letter-spacing: .3em; color: var(--gold); line-height: 1.2; }
.lk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-code-form { display: grid; gap: 6px; }
.lk-code-row { display: flex; gap: 8px; }
.lk-code-row .input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .25em; text-transform: uppercase; }
.lk-vis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.lk-vis label { position: relative; cursor: pointer; }
.lk-vis input { position: absolute; opacity: 0; pointer-events: none; }
.lk-vis span { display: grid; gap: 2px; height: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); font-weight: 700; font-size: 14px; }
.lk-vis small { font-weight: 400; color: var(--muted); font-size: 12px; }
.lk-vis input:checked + span { border-color: var(--cyan); background: var(--panel3); }
.lk-vis input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lk-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); vertical-align: middle; }
.lk-badge.pub { color: var(--green); border-color: currentColor; }
.lk-badge.priv { color: var(--muted2); }
.lk-quick { display: flex; flex-direction: column; gap: 10px; }
.lk-quick > .btn { align-self: flex-start; }
.lk-friends { display: grid; gap: 4px; max-height: 55vh; overflow-y: auto; }
.lk-filter { margin-bottom: 8px; width: 100%; }
.lk-list { display: grid; gap: 6px; }
@media (max-width: 560px) {
  .lk-vis { grid-template-columns: minmax(0, 1fr); }
  .lk-code { font-size: 24px; }
  .lk-actions .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ oczko 21 online (pages/blackjackOnline.js) */
.gt-bjo { --gt-ratio: 16 / 10; --gt-actions-h: 140px; --msg-top: 24%; }
.gt-bjo .gt-table { background: radial-gradient(ellipse at 50% 30%, #146b45, #0a3d29 72%); box-shadow: inset 0 0 0 8px #3a2414, inset 0 0 60px #0007; }
.gt-bjo .gt-stage { --card-w: 6.4cqw; color: #d9f5e6; }
.gt-bjo .bj-dealer { top: 2cqw; --zone-w: 34cqw; }
.bjo-felt { top: 17cqw; }
.bjo-seats { position: absolute; left: 2cqw; right: 2cqw; bottom: 2cqw; top: 22cqw; display: grid; grid-template-columns: repeat(var(--seats), minmax(0, 1fr));
  gap: 1.4cqw; align-items: end; --card-w: 4.6cqw; }
.bjo-seat { min-width: 0; display: grid; gap: .6cqw; padding: .8cqw; border: 2px solid #ffffff18; border-radius: 1.2cqw; background: #00000022; }
.bjo-seat.empty { place-items: center; min-height: 14cqw; border-style: dashed; }
.bjo-seat.me { border-color: #7fd8ff66; background: #ffffff0d; }
.bjo-seat.turn { border-color: var(--gold); box-shadow: 0 0 0 2px #f2d16b44; }
.bjo-name { display: flex; align-items: center; gap: .6cqw; font-weight: 800; font-size: clamp(10px, 1.3cqw, 14px); white-space: nowrap; overflow: hidden; }
.bjo-name span { overflow: hidden; text-overflow: ellipsis; }
.bjo-hands { display: grid; grid-template-columns: repeat(var(--h), minmax(0, 1fr)); gap: .4cqw; --zone-w: calc((100% - .4cqw * (var(--h) - 1)) / var(--h)); }
.bjo-hand { min-width: 0; border-radius: .8cqw; padding: .3cqw; border: 1px solid transparent; }
.bjo-hand .gt-fan { width: 100%; --zone-w: 100%; }
.bjo-hand.active { border-color: var(--gold); background: #ffffff12; }
.bjo-hand.win .bj-outcome { color: #8ff0cf; }
.bjo-hand.lose .bj-outcome { color: #ffb6bf; }
.bjo-hand.push .bj-outcome { color: #f6d79a; }
.bjo-hand-info, .bjo-stack { font-size: clamp(9px, 1.15cqw, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.bjo-stack { color: var(--gold); font-weight: 700; }
@media (max-width: 640px) {
  .gt-bjo { --gt-ratio: 3 / 4; --gt-actions-h: 180px; --msg-top: 20%; }
  .gt-bjo .gt-stage { --card-w: 10cqw; }
  .gt-bjo .bj-dealer { --zone-w: 60cqw; }
  .gt-bjo .bj-label { height: 5cqw; line-height: 5cqw; font-size: 3.6cqw; }
  .bjo-felt { top: 26cqw; left: 4%; right: 4%; font-size: 2.3cqw; }
  .bjo-seats { top: 33cqw; grid-template-columns: repeat(min(var(--seats), 3), minmax(0, 1fr)); align-content: end; --card-w: 7.6cqw; gap: 2cqw; }
  .bjo-name { font-size: 3cqw; gap: 1cqw; }
  .bjo-hand-info, .bjo-stack { font-size: 2.7cqw; }
  .bjo-seat.empty { min-height: 20cqw; }
}

/* ------------------------------------------------------------------ wyścig w pasjansa (pages/klondikeRace.js) */
.kr-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kr-standings li { display: grid; grid-template-columns: 2ch auto minmax(0, 1fr) minmax(50px, 90px); grid-template-areas: "p a n bar" "p a st st"; align-items: center; gap: 2px 8px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.kr-standings li.me { border-color: var(--cyan); }
.kr-standings li.won .kr-place { color: var(--gold); }
.kr-place { grid-area: p; font-weight: 900; text-align: center; }
.kr-standings .avatar { grid-area: a; }
.kr-name { grid-area: n; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-prog { grid-area: bar; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.kr-prog i { display: block; height: 100%; width: var(--p); background: var(--green); }
.kr-st { grid-area: st; font-size: 12px; color: var(--muted2); }

/* ======================================================================
   Odświeżenie UI/UX 2026: dostępność, nagłówek, menu konta, wyszukiwarka, stopka, cookie, dolny pasek
   ====================================================================== */
.btn { font-size: 14px; min-height: 40px; }
.btn.small { font-size: 12px; min-height: 32px; }
.btn.big { min-height: 52px; }
.link { color: #7cc4ff; font-size: 14px; }
.link:hover { color: #b5dcff; }
/* widoczny fokus przy nawigacji klawiaturą na każdym elemencie interaktywnym */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* --- nagłówek: 6 działów + Więcej, wyszukiwarka, konto --- */
#main-nav { font-size: 15px; font-weight: 600; }
#main-nav > a, .nav-more-btn { min-height: 44px; }
#main-nav > a.active, .nav-more.active .nav-more-btn { background: #10243b; border-color: transparent; box-shadow: inset 0 -2px 0 var(--blue); }
.hdr-search { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 210px; padding: 0 10px 0 13px; border-radius: 12px;
  border: 1px solid #24405d; background: #0a1726; color: var(--muted); font-size: 14px; }
.hdr-search:hover { color: #fff; border-color: #2f5a86; }
.hdr-search .hdr-search-text { flex: 1; text-align: left; white-space: nowrap; }
.hdr-search kbd, .search-field kbd { font: inherit; font-size: 12px; color: var(--muted); border: 1px solid #2b4765; border-radius: 6px; padding: 1px 6px; }
@media (max-width: 1440px) { .hdr-search { min-width: 0; } .hdr-search .hdr-search-text, .hdr-search kbd { display: none; } .hdr-search { width: 44px; justify-content: center; padding: 0; } }
.ntf-bell { width: 44px; height: 44px; }
button.account-chip { min-height: 44px; font-size: 14px; }
.btn.menu { width: 44px; height: 44px; padding: 0; }

/* menu konta */
.account { position: relative; }
.acc-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; width: 290px; max-height: calc(100vh - var(--head) - 20px); overflow-y: auto;
  padding: 8px; border: 1px solid var(--line2); border-radius: 14px; background: #0c1b2d; box-shadow: 0 18px 50px #000a; display: grid; gap: 2px; }
.acc-menu[hidden] { display: none; }
.acc-who { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.acc-who:hover { background: #12263c; }
.acc-who span { display: flex; flex-direction: column; min-width: 0; }
.acc-who b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-who small { color: var(--muted); font-size: 13px; }
.acc-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 0; background: none;
  color: var(--muted2); font: inherit; font-size: 15px; font-weight: 600; text-align: left; width: 100%; }
.acc-item:hover { background: #12263c; color: #fff; }
.acc-item > span { flex: 1; }
.acc-item em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.acc-item.gold, .acc-item.gold .sb-ico { color: var(--gold); }
.acc-item.danger { color: #ff8f9b; }
.acc-due { font-size: 12px; font-weight: 800; color: #fff; background: #a3313e; border-radius: 99px; padding: 1px 8px; }
.acc-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.acc-h { display: flex; align-items: center; gap: 8px; margin: 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* wyszukiwarka globalna */
.search-bg { position: fixed; inset: 0; z-index: 70; background: #02060ccc; backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.search-bg[hidden] { display: none; }
.search-dlg { width: min(640px, 100%); background: #0c1b2d; border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 25px 80px #000a; overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.search-field .sb-ico { width: 20px; height: 20px; color: var(--muted); }
.search-field input { flex: 1; min-height: 56px; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 17px; outline: none; }
.search-list { list-style: none; margin: 0; padding: 8px; max-height: min(60vh, 480px); overflow-y: auto; }
.search-list [role="option"] { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.search-list [role="option"]:hover, .search-list [aria-selected="true"] { background: #12305a; }
.search-ic { width: 32px; display: grid; place-items: center; color: var(--muted); flex: none; }
.search-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-main b { font-size: 15px; }
.search-main small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-kind { font-size: 12px; font-weight: 700; color: var(--muted); }
.search-empty { padding: 18px; text-align: center; color: var(--muted); }

/* --- stopka w kolumnach --- */
footer { margin-top: 72px; padding: 40px 0 32px; background: #07111f; border-top: 1px solid #18304a; color: var(--muted); font-size: 14px; }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.foot p { margin: 0; }
.foot-brand { font-weight: 500; font-size: 17px; color: var(--text); margin-bottom: 8px !important; }
.foot-note { margin-top: 10px !important; font-size: 13px; }
.foot-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px !important; }
.foot nav a { display: block; padding: 5px 0; color: #a9bccf; }
.foot nav a:hover { color: #fff; }

/* --- informacja o cookie: mała, nie zasłania treści --- */
.cookie-bar { left: 16px; right: auto; bottom: 16px; max-width: 440px; margin: 0; padding: 12px 12px 12px 16px; gap: 14px; font-size: 14px; color: #c9d8e8; background: #10233a; }
.cookie-bar .btn { min-height: 40px; }
@media (max-width: 640px) { .cookie-bar { flex-direction: row !important; align-items: center !important; left: 12px; right: 12px; max-width: none; } }

/* --- dolny pasek kart (telefon) --- */
.tabbar { display: none; }
@media (max-width: 860px) {
  :root { --tabbar: 68px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
    padding: 4px 6px env(safe-area-inset-bottom, 0px); background: #07111f; border-top: 1px solid #18304a; }
  .tabbar > a, .tabbar > button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; }
  .tabbar .sb-ico { width: 24px; height: 24px; }
  .tabbar > .active { color: #fff; }
  .tabbar > a.active .sb-ico { color: var(--focus); }
  .tb-play-ico { width: 48px; height: 30px; border-radius: 15px; background: var(--action); color: #fff; display: grid; place-items: center; }
  .tb-play.active .tb-play-ico { box-shadow: 0 0 0 2px var(--focus); }
  body { padding-bottom: var(--tabbar); }
  .toasts { --toast-bottom: calc(var(--tabbar) + 12px); }
  .cookie-bar { bottom: calc(var(--tabbar) + 12px); }
  #sb-left-toggle { display: none; }
  /* panel rozgrywek ("Graj") na telefonie: pełny ekran nad dolnym paskiem */
  .side.left { left: 0; right: 0; width: auto !important; bottom: var(--tabbar); box-shadow: none; }
  .sb-scrim { bottom: var(--tabbar); }
  .side.right { bottom: var(--tabbar); }
  footer { padding-bottom: 24px; }
  .hdr-search { border: 0; background: transparent; }
}

/* zakładki stron: większe cele dotykowe i czytelniejszy tekst */
.tab { font-size: 14px; min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; }
.tabs.page-tabs { border-bottom: 1px solid var(--line); gap: 4px; padding-bottom: 8px; margin-bottom: 20px; }

/* --- ikony gier: kafelek w kolorze gry ze skrótem nazwy (gdy brak grafiki) --- */
.game-icon.mono { background: color-mix(in srgb, var(--glow) 62%, #050b14); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.3px; font-family: inherit; }
.game-icon.mono.long { font-size: 12.5px; }
.game-icon.mono.xs { font-size: 10px; }
.game-icon.mono.sm { font-size: 14px; }
.game-icon.mono.sm.long { font-size: 12px; }
.game-icon.mono.lg { font-size: 20px; }
.game-icon.mono.xl { font-size: 34px; }
.game-icon.mono.has-img { color: transparent; }
.game-art .symbol.mono { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff;
  background: color-mix(in srgb, var(--glow) 62%, #050b14); box-shadow: 0 8px 20px #0006; filter: none; }
/* kafelek gry: pełna nazwa (2 linie), większy tekst, etykiety czytelne */
.game-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.3; min-height: 39px; font-weight: 750; }
.game-meta { font-size: 13px; color: var(--muted); }
.game-art .genre { font-size: 12px; letter-spacing: .4px; padding: 3px 7px; }
.game-info .online { font-size: 13px; }

/* --- strona główna (gość): hero z jedną główną akcją i kolejkami, "Jak to działa" --- */
.hero.hero-v2 { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 44px; min-height: 0;
  background: linear-gradient(90deg, #06101d 0%, #06101d 38%, #06101dc0 62%, #06101d8c 100%), url('/img/hero.jpg') right center / cover no-repeat, #0a1626; }
.hero-v2 .hero-content { flex: 1 1 480px; padding: 0; max-width: 640px; }
.hero-v2 .eyebrow { margin: 0; color: #7cc4ff; font-size: 13px; }
.hero-v2 h1 { font-size: clamp(40px, 5vw, 60px); margin: 12px 0 0; }
.hero-v2 .hero-lead { margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: #c9d8e8; max-width: 560px; }
.hero-v2 .actions { margin-top: 26px; gap: 12px; }
.btn.big { font-size: 16px; padding: 0 22px; border-radius: 12px; }
.btn.ghost-line { background: transparent; border-color: #2b4765; }
.btn.ghost-line:hover { background: #0f2136; }
.hero-trust { display: flex; align-items: center; gap: 8px; margin: 16px 0 0 !important; font-size: 14px !important; color: var(--muted) !important; }
.hero-trust .sb-ico { color: var(--green); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 32px; margin: 28px 0 0; }
.hero-facts div { display: flex; flex-direction: column-reverse; }
.hero-facts dt { font-size: 14px; color: var(--muted); }
.hero-facts dd { margin: 0; font-size: 26px; font-weight: 800; }
.hero-live { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 !important; font-size: 14px !important; color: #c9d8e8 !important; }
.hero-queues { flex: 1 1 360px; max-width: 460px; padding: 20px; border-radius: 16px; border: 1px solid #24405d; background: #0a1626eb; position: relative; z-index: 1; }
.hq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hq-head h2 { font-size: 18px; letter-spacing: -.3px; }
.hq-head span { font-size: 13px; color: var(--muted); }
.hq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hq-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #0a1726; border: 1px solid var(--line); }
.hq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hq-main b { font-size: 15px; }
.hq-main small { font-size: 13px; color: var(--muted); }
.hq-quick { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.hq-quick p { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted2); }
.hq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid #24405d; background: #0a1726; color: var(--muted2); font-size: 14px; font-weight: 600; }
.chip-link:hover { color: #fff; border-color: #2f5a86; }
.how h2 { font-size: 24px; margin-bottom: 18px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.how-steps li { display: flex; gap: 14px; padding: 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.how-n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #12305a; color: #7cc4ff; font-weight: 800; display: grid; place-items: center; }
.how-steps h3 { font-size: 17px; }
.how-steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .hero.hero-v2 { padding: 22px 18px; gap: 22px; background: linear-gradient(180deg, #06101d8c 0%, #06101d 70%), url('/img/hero.jpg') 70% top / cover no-repeat, #0a1626; }
  .hero-v2 h1 { font-size: 38px; }
  .hero-v2 .hero-lead { font-size: 16px; }
  .hero-v2 .actions .btn.primary { flex: 1 1 100%; }
  .hero-v2 .actions .btn { flex: 1; }
  .hero-facts { gap: 20px; }
  .hero-facts dd { font-size: 22px; }
  .hero-queues { padding: 14px; }
}
@media (max-width: 760px) {
  .hq-head span { display: none; }
  .hq-row { padding: 8px 10px; gap: 10px; }
  .hq-row .btn { min-height: 40px; padding: 0 12px; }
  .hq-main b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.hero-v2 .hero-content, .hero-queues { min-width: 0; }
@media (max-width: 760px) { .hero-queues { flex: 1 1 100%; max-width: none; } .hero-v2 .hero-content { flex: 1 1 100%; } }
.hq-list { grid-template-columns: minmax(0, 1fr); }
.hq-row .btn { flex: none; }
@media (max-width: 760px) { .hq-main b { white-space: normal; } }

/* --- rozgrywki: etykiety filtrów, pusty stan --- */
.fld { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted2); }
.fld .input { min-height: 44px; }
.filter { min-height: 40px; font-size: 14px; padding: 8px 14px; }
.toolbar { align-items: flex-end; }
.comp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 28px; }
.comp-empty-ic { width: 72px; height: 72px; border-radius: 20px; background: #12305a; display: grid; place-items: center; color: #7cc4ff; }
.comp-empty-ic .sb-ico { width: 38px; height: 38px; stroke-width: 1.5; }
.comp-empty h2 { margin-top: 18px; font-size: 24px; }
.comp-empty > p { margin: 10px 0 0; max-width: 580px; color: var(--muted); font-size: 16px; }
.comp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
.comp-how { width: 100%; max-width: 920px; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 24px; text-align: left; }
.comp-how h3 { font-size: 17px; margin-bottom: 16px; }
.comp-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.comp-how li { display: flex; gap: 12px; }
.comp-how b { font-size: 16px; }
.comp-how p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.game-art .symbol.mono, .game-icon.mono { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }

/* --- prawy panel: Znajomi | Czat --- */
.side.right .sb-head { gap: 6px; padding: 10px; }
.side.right .sb-tabs { gap: 4px; }
.side.right .sb-tab { flex-direction: row; justify-content: center; gap: 8px; min-height: 40px; font-size: 15px; font-weight: 600; color: var(--muted2); border-radius: 10px; }
.side.right .sb-tab .sb-ico { width: 18px; height: 18px; }
.side.right .sb-tab[aria-selected="true"] { background: #12305a; border-color: transparent; }
.side.right .sb-tab .sb-badge { position: static; border: 0; }
.sb-badge.blue { background: #1b4a7a; }
.side.right .sb-collapse { width: 40px; height: 40px; }
.sb-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #24405d; background: #0a1726; flex: none; }
.sb-search .sb-ico { color: var(--muted); }
.sb-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.sb-search:focus-within { border-color: var(--focus); }
.sb-fresults:not(:empty) { margin: 4px 8px 8px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #0a1726; }
.sb-fgroup { padding: 0 8px; }
.sb-fgroup > h3 { margin: 14px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.sb-fold { width: 100%; min-height: 44px; margin-top: 8px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sb-fold:hover { background: #0d1e31; color: #fff; }
.sb-fold .sb-ico { transition: transform .15s; }
.sb-fold[aria-expanded="true"] .sb-ico { transform: rotate(180deg); }
.side.right .sb-friend { min-height: 56px; padding: 6px 8px; }
.side.right .sb-friend .sb-main b { font-size: 15px; font-weight: 600; }
.side.right .sb-friend .sb-main small { font-size: 13px; }
.sb-friend .sb-main small.playing { color: #f2c46d; }
.side.right .sb-friend .sb-actions { opacity: 1; }
.side.right .sb-ib { width: 40px; height: 40px; border-color: transparent; border-radius: 10px; }
.side.right .sb-ib:hover { background: #12263c; }
.side.right .sb-ib.ok { background: #1f7a5c; color: #fff; }
.sb-st.playing { background: var(--gold); }
.sb-sent { margin: 10px 16px; font-size: 13px; color: var(--muted); }
.sb-tag { font-size: 12px; color: var(--muted); }
.sb-foot { margin-top: auto; position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: var(--sb-bg); font-size: 14px; color: var(--muted); }
.sb-foot .sb-select { margin: 0 0 0 auto; min-height: 40px; font-size: 14px; padding: 0 10px; }
.sb-pane[data-tab="friends"] { display: flex; flex-direction: column; }
.sb-pane[data-tab="friends"] .sb-flist { flex: 1; }
/* czat: lista rozmów i otwarta rozmowa */
.sb-conv { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; }
.sb-conv:hover { background: #0d1e31; }
.sb-conv.unread .sb-main b { font-weight: 800; }
.sb-conv .sb-main b { font-size: 15px; font-weight: 600; }
.sb-conv .sb-main small { font-size: 13px; }
.sb-conv .sb-unread { margin-left: auto; min-width: 22px; line-height: 22px; font-size: 12px; font-weight: 700; }
.sb-hash { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #12263c; color: #7cc4ff; font-weight: 800; font-size: 16px; display: grid; place-items: center; }
.sb-conv-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.sb-conv-head .sb-main { flex: 1; }
.sb-conv-head .sb-main b { font-size: 15px; }
.sb-conv-head .sb-main small { font-size: 13px; }
.side.right .chat-box .chat-head { display: none; }
.side.right .sb-pane[data-tab="chat"] { overflow: hidden; display: flex; flex-direction: column; }
.sb-convs { overflow-y: auto; flex: 1; padding-bottom: 12px; }
/* wiadomości: moje po prawej, czytelniejszy tekst */
.chat-msg.mine { flex-direction: row-reverse; }
.chat-msg.mine .chat-msg-main { background: var(--action); border-color: var(--action); border-radius: 12px 4px 12px 12px; color: #fff; }
.chat-msg.mine .chat-meta, .chat-msg.mine .chat-meta a { color: #dbe9ff; }
.chat-text { font-size: 15px; }
.chat-form .input { min-height: 44px; }
.chat-form .btn { min-height: 44px; }
@media (max-width: 860px) {
  .side.right { left: 0; right: 0; width: auto !important; box-shadow: none; }
}
@media (min-width: 1441px) and (max-width: 1720px) { .hdr-search { min-width: 0; width: 44px; justify-content: center; padding: 0; } .hdr-search .hdr-search-text, .hdr-search kbd { display: none; } }
.sb-empty { font-size: 13px; }

/* --- profil gracza: nagłówek z akcjami zależnymi od kontekstu, pierwsze kroki --- */
.profile-hero { flex-wrap: wrap; gap: 24px; align-items: center; }
.profile-av { position: relative; flex: none; display: inline-flex; }
.profile-dot { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: #56677a; border: 3px solid var(--panel); }
.profile-dot.on { background: var(--green); }
.profile-hero .profile-main { flex: 1 1 320px; min-width: 0; }
.profile-hero h1 { font-size: clamp(28px, 4vw, 36px); }
.profile-hero .meta-row { font-size: 15px; color: var(--muted); }
.fav-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fav-chips .chip-link { gap: 8px; padding-left: 6px; }
.fav-chips .chip-link.add { border-style: dashed; color: #7cc4ff; padding-left: 14px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.profile-actions .btn { min-height: 44px; }
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; width: 44px; padding: 0; font-size: 20px; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 6px; min-width: 200px; padding: 8px; border: 1px solid var(--line2); border-radius: 12px; background: #0c1b2d; box-shadow: 0 14px 40px #0009; }
.more-list .btn { width: 100%; justify-content: flex-start; }
.first-steps { padding: 22px 24px; }
.fs-head { display: flex; justify-content: space-between; align-items: baseline; }
.fs-head h2 { font-size: 20px; }
.fs-bar { height: 8px; border-radius: 4px; background: #132a42; margin: 14px 0 6px; overflow: hidden; }
.fs-bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.fs-list { list-style: none; margin: 0; padding: 0; }
.fs-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.fs-check { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2b4765; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 14px; }
.fs-list li.done .fs-check { background: #1f7a5c; border-color: #1f7a5c; }
.fs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fs-main b { font-size: 15px; }
.fs-main small { color: var(--muted); font-size: 14px; }
.fs-list li.done b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.settings-panel { padding: 8px 24px 16px; }
.settings-panel .sb-set { padding: 0; }
.settings-panel .sb-opt { padding: 14px 0; }
.settings-panel .sb-opt .sb-main b { font-size: 15px; }
.settings-panel .sb-opt .sb-main small { font-size: 14px; }
.settings-panel .sb-select { min-height: 40px; font-size: 14px; }
.settings-panel h4 { font-size: 13px !important; margin-top: 20px !important; }
.settings-logout { margin-top: 24px; }
@media (max-width: 760px) {
  .profile-hero { padding: 20px; }
  .profile-actions { width: 100%; }
  .profile-actions > .btn, .profile-actions > a.btn { flex: 1; }
  .fs-list li { flex-wrap: wrap; }
  .fs-list li .btn { margin-left: 42px; }
}

/* --- panel admina: menu w grupach z licznikami, pulpit "Wymaga uwagi", lista graczy + szczegóły --- */
.adm-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: start; }
.adm-nav { position: sticky; top: calc(var(--head) + 16px); display: grid; gap: 2px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); max-height: calc(100vh - var(--head) - 32px); overflow-y: auto; }
.adm-title { margin: 0 10px; font-weight: 800; font-size: 17px; color: var(--text); }
.adm-role { margin: 2px 10px 4px; font-size: 13px; color: var(--gold); }
.adm-grp { margin: 14px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.adm-link { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--muted2); font-size: 14px; font-weight: 600; }
.adm-link:hover { background: #0f2136; color: #fff; }
.adm-link.active { background: #12305a; color: #fff; }
.adm-link span:first-child { flex: 1; }
.adm-cnt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #c4323f; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.adm-select { display: none; }
.adm-h1 { font-size: 28px; letter-spacing: -.6px; margin-bottom: 18px; }
.adm-head { margin-top: 0; }
.adm-mm { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 12px; background: #0f2b26; border: 1px solid #267d65; }
.adm-mm.paused { background: #2a2210; border-color: #8a6a22; }
.adm-mm b { font-size: 15px; }
.adm-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: #2a2210; border-color: #8a6a22; color: #ffe2a0; }
.adm-todo h2 { font-size: 19px; }
.adm-todo-list { display: grid; }
.adm-todo-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--line); }
.adm-todo-n { flex: none; min-width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 17px; background: #12305a; color: #7cc4ff; }
.adm-todo-row.bad .adm-todo-n { background: #2a1219; color: #ff8f9b; }
.adm-todo-row.warn .adm-todo-n { background: #2a2210; color: #f2b84b; }
.adm-todo-t { flex: 1; font-size: 15px; font-weight: 600; }
.adm-done { margin: 4px 0 6px; color: #8fe9c4; font-size: 15px; }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 18px 0; }
.adm-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: inherit; }
a.adm-kpi[href]:hover { border-color: #2f5a86; }
.adm-kpi span { font-size: 14px; color: var(--muted); }
.adm-kpi b { font-size: 26px; font-weight: 800; }
.adm-kpi small { font-size: 13px; color: var(--muted); }
.adm-md { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.adm-md .adm-detail { order: 2; }
.adm-md .adm-list { order: 1; }
.adm-detail .split { grid-template-columns: minmax(0, 1fr); }
.adm-detail .profile-hero { margin-top: 0; }
.adm-user-name { font-size: 26px; letter-spacing: -.5px; margin: 4px 0; }
.adm-back { margin-bottom: 10px; }
tr.sel td { background: #10243b; }
.adm-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.admin-form .fld.grow { flex: 1 1 220px; }
.admin-form .inline-form { align-items: flex-end; }
.adm-danger { border: 1px solid #5a2430; border-radius: 12px; padding: 14px; margin-top: 12px; }
.adm-danger > b { color: #ff8f9b; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 1280px) { .adm-md { grid-template-columns: minmax(0, 1fr); } .adm-md .adm-detail { order: 1; } }
@media (max-width: 960px) {
  .adm-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .adm-nav { display: none; }
  .adm-select { display: block; }
  .adm-select .input { width: 100%; min-height: 48px; font-size: 16px; font-weight: 600; }
}
.adm-select { margin-bottom: 14px; }
@media (max-width: 760px) { .adm-main .btn { white-space: normal; text-align: center; } }

/* ======================================================================
   Szachy 2026: menu działu w 1 rzędzie, trening, lobby, partia (tryb skupienia na telefonie)
   ====================================================================== */
.chess-nav.page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.chess-nav.page-tabs::-webkit-scrollbar { display: none; }
.chess-nav .tab { flex: none; }
.chess-subnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding-bottom: 2px; }
.chess-subnav::-webkit-scrollbar { display: none; }
.chess-subnav .tab { flex: none; border: 1px solid #24405d; border-radius: 99px; background: #0a1726; }
.chess-subnav .tab.active { background: #e3eefa; color: #0a1726; border-color: #e3eefa; }
.chess-view .page-head h1 { font-size: clamp(26px, 4vw, 36px); }

/* trening */
.train-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.train-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: inherit; }
.train-card:hover { border-color: #2f5a86; }
.train-card.wide { grid-column: 1 / -1; border-color: #2f5a86; background: #0e2033; }
.chess-lobby .train-card.wide { margin-bottom: 14px; }
.train-card > .sb-ico:last-child { color: var(--muted); }
.train-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #12263c; color: #7cc4ff; }
.train-ic .sb-ico { width: 22px; height: 22px; }
.train-ic.puzzles { background: #2a2210; color: #f2b84b; }
.train-ic.mistakes { background: #2a1219; color: #ff8f9b; }
.train-ic.learn { background: #12305a; }
.train-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.train-main b { font-size: 16px; }
.train-main small { font-size: 14px; color: var(--muted); }
.train-bar { display: block; height: 6px; border-radius: 3px; background: #132a42; overflow: hidden; margin-top: 8px; }
.train-bar i { display: block; height: 100%; background: var(--green); }
.train-due { align-self: flex-start; margin-top: 6px; font-size: 12px; font-weight: 800; color: #fff; background: #a3313e; border-radius: 99px; padding: 2px 9px; }

/* lobby */
.chess-active { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 14px 12px 18px; border-radius: 16px; background: #0f2b26; border: 1px solid #267d65; color: inherit; }
.chess-active-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chess-active-main b { font-size: 16px; }
.chess-active-main small { font-size: 14px; color: var(--muted2); }
.learn-promo { display: flex; align-items: center; gap: 14px; }
.tc-row { grid-template-columns: 150px 1fr; padding: 12px 0; margin: 0; border-top: 1px solid var(--line); }
.tc-cat { display: flex; flex-direction: column; font-size: 15px; }
.tc-cat span { font-size: 13px; font-weight: 500; color: var(--muted); }
.tc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tc-btn { min-height: 60px; align-content: center; border-radius: 12px; border-color: #24405d; background: #0a1726; }
.tc-btn strong { font-size: 18px; }
.tc-btn span { font-size: 12px; }
.tc-btn.searching { border: 2px solid #4aa8ff; background: #0f2742; animation: none; }
.tc-btn.searching span { color: #9fd1ff; }
.tc-more { display: none; width: 100%; margin-top: 6px; color: #7cc4ff; }
.chess-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chess-way { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #0a1726; color: inherit; font: inherit; min-height: 72px; }
.chess-way:hover:not(:disabled) { border-color: #2f5a86; }
.chess-way:disabled { opacity: .5; cursor: not-allowed; }
.chess-lobby .sub-h { font-size: 15px; color: var(--text); margin-top: 22px; }
.chess-lobby .section-head h2 { font-size: 20px; }
.rating-rows { display: grid; }
.rating-row { display: grid; grid-template-columns: 1fr auto 90px; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); color: inherit; }
.rating-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.rating-row small { text-align: right; color: var(--muted); font-size: 13px; }
.rating-row:hover b { color: #7cc4ff; }
.seek-float { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: 20px; width: min(460px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 14px; background: #10233a; border: 1px solid #2f5a86; box-shadow: 0 14px 40px #000a; }
.seek-main { flex: 1; display: flex; flex-direction: column; }
.seek-main b { font-size: 15px; }
.seek-main small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seek-float .spinner { width: 22px; height: 22px; border-width: 3px; border-color: #2f5a86; border-top-color: #7cc4ff; }
@media (max-width: 860px) {
  .seek-float { bottom: calc(var(--tabbar) + 12px); }
  .tc-list:not(.show-all) .tc-extra { display: none; }
  .tc-more { display: block; }
  .tc-row { grid-template-columns: 1fr; gap: 8px; }
  .tc-cat { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .tc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chess-ways { grid-template-columns: 1fr; }
  .chess-way { min-height: 60px; padding: 10px 12px; }
}

/* partia: komputer - plansza po lewej, karty graczy z zegarami, ruchy i akcje po prawej */
.cg { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr auto auto; column-gap: 24px; row-gap: 12px;
  grid-template-areas: "board top" "board side" "board alert" "board bottom"; align-items: start; }
.cg-top, .cg-strip, .cg-bar { display: none; }
.cg-board { grid-area: board; width: 100%; max-width: min(100%, calc(100vh - var(--head) - 130px)); justify-self: center; }
#pb-top { grid-area: top; }
#pb-bottom { grid-area: bottom; }
.cg-alert { grid-area: alert; display: grid; gap: 10px; }
.cg-alert:empty { display: none; }
.cg-side { grid-area: side; min-width: 0; }
.cg-side .panel { margin-bottom: 12px; }
.cg .player-bar { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.cg .player-bar.to-move { border-color: #267d65; }
.pb-info { flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
.pb-info .player-cell { font-weight: 700; font-size: 16px; }
.pb-rating { font-size: 14px; color: var(--muted); }
.pb-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-color { font-size: 13px; color: var(--muted); }
.turn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; background: #12263c; color: var(--muted2); }
.turn-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.turn-chip.you { background: #0f2b26; color: #8fe9c4; }
.cg .clock { min-width: 120px; font: 700 28px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: center; padding: 11px 12px; border-radius: 12px; }
.cg .clock.running.own { box-shadow: 0 0 0 3px var(--green); }
.cg .move-list { max-height: none; font-size: 15px; }
.cg .move-nav .btn { min-width: 44px; min-height: 44px; padding: 0; }
.cg .chess-actions .btn { min-height: 44px; }
.cg-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #10233a; border: 1px solid #2f5a86; }
.cg-offer span { flex: 1 1 160px; font-weight: 700; }
.cg-note { margin: 0; }
.mobile-only { display: none; }

/* arkusz: koniec partii, "Więcej" */
.cg-sheet-bg { position: fixed; inset: 0; z-index: 65; background: #02060cb3; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cg-sheet { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 20px 22px; border-radius: 20px; background: #0c1b2d; border: 1px solid var(--line2); box-shadow: 0 25px 80px #000a; }
.cg-grip { display: none; }
.cg-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cg-sheet-head h2 { font-size: 22px; }
.cg-over-t { margin: 4px 0 0; color: var(--muted2); font-size: 16px; }
.cg-over-t.win { color: #8fe9c4; } .cg-over-t.loss { color: #ff8f9b; }
.cg-over-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.cg-over-stats div { padding: 12px; border-radius: 12px; background: #0a1726; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cg-over-stats span { font-size: 13px; color: var(--muted); }
.cg-over-stats b { font-size: 17px; }
.cg-over-acts { display: grid; gap: 10px; margin-top: 18px; }
.cg-over-acts .btn { width: 100%; }
.cg-over-links { display: flex; justify-content: space-around; margin-top: 4px; }
.cg-over-links .link { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }
.cg-menu { display: grid; gap: 2px; margin-top: 8px; }
.cg-menu-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 16px; text-align: left; width: 100%; }
.cg-menu-item:hover { background: #12263c; }
.cg-menu-item .sb-ico { width: 22px; height: 22px; color: var(--muted2); }
.cg-menu-item[aria-pressed="true"] .sb-ico { color: var(--green); }

/* partia: telefon */
@media (max-width: 860px) {
  .cg-nav { display: none; }
  .cg { grid-template-columns: minmax(0, 1fr); row-gap: 0; grid-template-rows: none;
    grid-template-areas: "topbar" "top" "board" "bottom" "strip" "alert" "bar"; margin: 0 -14px; }
  .cg-side { display: none; }
  .cg-top { grid-area: topbar; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); background: #07111f; }
  .cg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .cg-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-title small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-ib { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted2); display: grid; place-items: center; }
  .cg-ib .sb-ico { width: 22px; height: 22px; }
  .cg .player-bar { border: 0; border-radius: 0; background: transparent; padding: 8px 12px; }
  .cg .player-bar.to-move { border: 0; }
  .pb-info .player-cell { font-size: 15px; }
  .cg .clock { min-width: 96px; font-size: 24px; padding: 9px 10px; border-radius: 10px; }
  .cg-board { max-width: 100%; }
  .cg-board .cb-wrap { border-radius: 0; box-shadow: none; }
  .cg .cb-tools { display: none; }
  .cg-strip { grid-area: strip; display: flex; align-items: center; gap: 2px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #07111f; }
  .cg-strip::-webkit-scrollbar { display: none; }
  .cg-strip .mv-no { flex: none; font-size: 13px; padding: 0 2px 0 6px; }
  .cg-strip .mv { flex: none; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted2); font: inherit; font-size: 15px; font-weight: 600; }
  .cg-strip .mv.cur { background: #12305a; color: #fff; }
  .cg-alert { padding: 10px 12px 0; }
  .mobile-only { display: flex; }
  .cg-result-line { align-items: baseline; gap: 10px; font-size: 15px; color: var(--muted2); }
  .cg-result-line b { font-size: 20px; color: var(--text); }
  .cg-bar { grid-area: bar; display: flex; position: sticky; bottom: var(--tabbar, 0px); z-index: 25; margin-top: 12px; padding: 4px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #07111f; border-top: 1px solid #18304a; }
  .cg-act { flex: 1; min-width: 0; min-height: 56px; border: 0; background: transparent; color: var(--muted2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 12px; font-weight: 600; }
  .cg-act .sb-ico { width: 24px; height: 24px; }
  .cg-act.danger { color: #ff8f9b; }
  .cg-act.ok { color: #8fe9c4; }
  .cg-act:disabled { opacity: .4; }
  .cg-half { font-size: 20px; font-weight: 800; line-height: 24px; }
  /* arkusz od dołu ekranu */
  .cg-sheet-bg { align-items: flex-end; padding: 0; }
  .cg-sheet { width: 100%; border-radius: 22px 22px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); border-left: 0; border-right: 0; border-bottom: 0; max-height: 85vh; }
  .cg-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: #2b4765; margin: 0 auto 12px; }
}
.cg .player-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cg .pb-info { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; }
.cg .pb-info .player-cell { max-width: 100%; }
.cg .clock { flex: none; }
.split.chess-lobby { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1180px) { .split.chess-lobby { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 861px) and (max-width: 1100px) { .tc-row { grid-template-columns: 1fr; gap: 8px; } .tc-cat { flex-direction: row; justify-content: space-between; } }

/* zadania taktyczne: polecenie nad planszą, motywy w przewijanym pasku, przyciski w zasięgu kciuka */
.pz-themes { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.pz-themes::-webkit-scrollbar { display: none; }
.pz-themes .tab { flex: none; border: 1px solid #24405d; border-radius: 99px; background: #0a1726; }
.pz-themes .tab.active { background: #e3eefa; color: #0a1726; border-color: #e3eefa; }
.pz-prompt { display: flex; align-items: center; gap: 12px; padding: 10px 2px 12px; }
.pz-prompt-main { display: flex; flex-direction: column; }
.pz-prompt-main b { font-size: 18px; }
.pz-prompt-main small { font-size: 14px; color: var(--muted); }
.pz-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #2b4765; }
.pz-dot.w { background: #f5f7fa; } .pz-dot.b { background: #141b26; }
.pz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pz-actions .btn { flex: 1 1 auto; min-height: 48px; }
.pz-help { margin: 8px 0 0; }
.pz-history { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pz-history:empty { display: none; }
.cb-viewbar.pz-viewbar { justify-content: space-between; align-items: flex-start; gap: 10px; }
.pz-viewbar .pz-history { margin-top: 0; flex: 1; min-width: 0; }
.pz-viewbar .pz-history:empty { display: flex; }
.pz-viewbar .cb-view-toggle { flex: none; margin-left: auto; }
.pz-h { min-width: 30px; height: 24px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; text-decoration: none; }
a.pz-h:hover { filter: brightness(1.18); text-decoration: none; }
.pz-h.ok { background: #4c8a24; }
.pz-h.bad { background: #b9333f; }
.pz-h.now { background: #2370b3; min-width: 34px; }
.pz-h.cur { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #e3eefa; }
@media (max-width: 860px) {
  .pz-layout { margin: 0 -14px; }
  .pz-layout .pz-prompt { padding: 4px 14px 10px; }
  .pz-layout .pz-history, .pz-layout .pz-viewbar { padding: 0 14px; }
  .pz-layout .pz-viewbar .pz-history { padding: 0; }
  .pz-layout .cb-wrap { border-radius: 0; box-shadow: none; }
  .pz-layout .chess-side { padding: 12px 14px 0; }
  .pz-layout .chess-side .panel { padding: 14px; }
}
@media (max-width: 640px) { .chess-view .page-head p { display: none; } .chess-view .page-head { margin: 16px 0 12px; } }
.chess-subnav .sub-back { display: none; }
@media (max-width: 860px) { .chess-nav.has-sub { display: none; } .chess-subnav .sub-back { display: inline-flex; border-color: transparent; background: transparent; color: #7cc4ff; } .chess-subnav { margin-bottom: 10px; } .pz-themes { margin-bottom: 4px; } }
.pz-layout .chess-main { max-width: min(100%, calc(100vh - 380px)); }
@media (max-width: 980px) { .pz-layout .chess-main { max-width: 100%; } }

/* ======================================================================
   Nauka i gra z trenerem: strefa trenera widoczna razem z planszą
   ====================================================================== */
.learn-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.learn-tabs::-webkit-scrollbar { display: none; }
.learn-tabs .tab { flex: none; border: 1px solid #24405d; border-radius: 99px; background: #0a1726; }
.learn-tabs .tab.active { background: #e3eefa; color: #0a1726; border-color: #e3eefa; }
.learn-tabs .sub-back { display: none; }
.learn-stage { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "board top" "board side"; grid-template-rows: auto 1fr; row-gap: 12px; }
.learn-stage > .chess-main { grid-area: board; max-width: min(100%, calc(100vh - var(--head) - 200px)); }
.learn-stage > .learn-top { grid-area: top; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.learn-stage > .learn-top:not(:has(> :not(:empty):not([hidden]))) { display: none; }
.learn-stage > .chess-side { grid-area: side; }
.learn-back { display: none; }
.learn-top .learn-bubble { font-size: 15px; }
.learn-top .learn-task { font-size: 16px; }
.learn-about { border-top: 1px solid var(--line); padding-top: 10px; }
.learn-about > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 700; color: var(--muted2); font-size: 14px; }
.learn-about[open] > summary { margin-bottom: 8px; }
.learn-setup .field { margin: 8px 0 12px; }
.learn-panel .learn-log { padding-left: 0; margin: 0 0 10px; }
.learn-actions .btn { min-height: 48px; }
@media (max-width: 980px) {
  .learn-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "board" "side"; row-gap: 0; }
  .learn-stage > .chess-main { max-width: 100%; }
  .learn-stage > .learn-top { border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
}
@media (max-width: 860px) {
  .learn-stage { margin: 0 -14px; }
  .learn-stage > .learn-top { margin: 0 14px 10px; gap: 8px; }
  .learn-stage .cb-wrap { border-radius: 0; box-shadow: none; }
  .learn-stage > .chess-side { padding: 10px 14px 0; }
  .learn-stage .learn-panel { padding: 12px; gap: 10px; }
  .learn-top .learn-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
  .learn-top .learn-bubble { padding: 8px 11px; font-size: 14px; }
  .learn-top .learn-task { padding: 8px 11px; font-size: 15px; }
  .learn-top .learn-meter { gap: 14px; }
  .learn-back { display: inline-flex; font-size: 14px; }
  /* krótsze menu: zamiast trzech rzędów jeden ("← Trening" w zakładkach nauki) */
  .chess-view:has(.learn-tabs) .chess-subnav, .chess-view:has(.learn-stage) .chess-subnav { display: none; }
  .learn-tabs .sub-back { display: inline-flex; border-color: transparent; background: transparent; color: #7cc4ff; }
  .learn-tabs { margin-bottom: 10px; }
  .chess-view:has(.learn-stage) .page-head { margin: 12px 0 8px; }
  .chess-view:has(.learn-stage) .page-head h1 { font-size: 22px; }
  .chess-view:has(.learn-stage) > .alert { margin: 0 0 10px; font-size: 13px; padding: 8px 12px; }
}
.learn-stage > .chess-main { max-width: min(100%, calc(100vh - var(--head) - 290px)); }
@media (max-width: 980px) { .learn-stage > .chess-main { max-width: 100%; } }

/* szachy korespondencyjne: wybór czasu na ruch, lista partii (Twój ruch najpierw) */
.corr-tcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: #0a1726; border: 1px solid var(--line); }
.corr-tc { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--muted2); font: inherit; font-size: 15px; font-weight: 600; }
.corr-tc.on { background: #12305a; color: #fff; }
.corr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.corr-acts .btn { min-height: 44px; flex: 1 1 auto; }
.corr-list { display: grid; gap: 8px; }
.corr-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: #0a1726; color: inherit; }
.corr-row:hover { border-color: #2f5a86; }
.corr-row.yours { border-color: #267d65; background: #0c2420; }
.corr-row .cb-wrap { width: 72px; flex: none; box-shadow: none; }
.corr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.corr-main b { font-size: 16px; }
.corr-main small { font-size: 13px; color: var(--muted); }
.corr-turn { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--muted2); }
.corr-turn.you { color: #8fe9c4; }
.corr-turn.urgent { color: #ffb4bc; }
.corr-info { margin: 0; }
@media (max-width: 860px) { .corr-tcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .corr-acts .btn { flex: 1 1 100%; } }

/* ======================================================================
   site-v2: powiadomienia i okna potwierdzeń (core.js toast / ask / askText),
   okna jako panel od dołu na telefonie, szkielet ładowania, wejście podstron
   ====================================================================== */

/* --- powiadomienia: stos w prawym dolnym rogu, na telefonie na całą szerokość nad dolnym paskiem --- */
.toasts { position: fixed; right: 20px; bottom: calc(var(--toast-bottom, 20px) + env(safe-area-inset-bottom, 0px)); z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast-item { --tc: var(--green); --dx: 0; position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; overflow: hidden;
  padding: 13px 12px 15px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tc) 38%, var(--line2));
  background: color-mix(in srgb, var(--tc) 9%, #0c1b2df5); color: var(--text); box-shadow: 0 16px 40px #000a, inset 3px 0 0 var(--tc);
  backdrop-filter: blur(12px); pointer-events: auto; touch-action: pan-y; animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.toast-item.t-bad { --tc: var(--red); }
.toast-item.t-warn { --tc: var(--gold); }
.toast-item.t-info { --tc: var(--cyan); }
.toast-item.leaving { animation: toast-out .22s ease-in forwards; }
.toast-item.bump { animation: toast-bump .32s ease; }
.toast-ico { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--tc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.toast-title { font-weight: 800; }
.toast-title + .toast-text { color: var(--muted2); font-size: 13px; }
.toast-act { flex: none; align-self: center; min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent);
  background: color-mix(in srgb, var(--tc) 16%, transparent); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.toast-act:hover { background: color-mix(in srgb, var(--tc) 28%, transparent); }
.toast-x { flex: none; width: 28px; height: 28px; margin: -3px -2px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; }
.toast-x:hover { background: #ffffff12; color: #fff; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tc); opacity: .55; transform-origin: left;
  animation: toast-time linear forwards paused; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(var(--dx, 0)) scale(.94); margin-bottom: -60px; } }
@keyframes toast-bump { 40% { transform: scale(1.03); } }
@keyframes toast-time { to { transform: scaleX(0); } }
@media (max-width: 640px) {
  .toasts { left: 12px; right: 12px; width: auto; align-items: stretch; }
  .toast-item { padding: 12px 10px 14px 12px; }
}

/* --- okno potwierdzenia (<dialog>, zamiast confirm/prompt przeglądarki) --- */
dialog.ask { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line2); border-radius: 18px; background: #0c1b2d; color: var(--text);
  box-shadow: 0 30px 90px #000c; animation: ask-in .2s cubic-bezier(.2, .9, .3, 1.15); }
dialog.ask::backdrop { background: #02060ccc; backdrop-filter: blur(6px); animation: fade-in .2s ease; }
dialog.ask.leaving { animation: ask-out .16s ease-in forwards; }
dialog.ask.danger { border-color: #6a2a36; }
.ask-form { padding: 22px; display: grid; gap: 12px; }
.ask-head { display: flex; align-items: center; gap: 12px; }
.ask-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #1687ff1f; }
.ask-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ask.danger .ask-ico { background: #ff5a6a1f; }
.ask.danger .ask-ico svg { stroke: var(--red); }
.ask-title { font-size: 17px; line-height: 1.35; letter-spacing: -.2px; overflow-wrap: anywhere; white-space: pre-line; }
.ask-text { margin: 0; color: var(--muted2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.ask-input { width: 100%; }
.ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ask-actions .btn { min-width: 110px; }
.ask.danger .btn.danger { background: #c23446; border-color: #c23446; color: #fff; }
.ask.danger .btn.danger:hover { background: #a82a3b; }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes ask-out { to { opacity: 0; transform: scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }

/* --- okna na telefonie: panel wysuwany od dołu, przyciski w zasięgu kciuka --- */
.modal-bg.show .modal { animation: ask-in .2s cubic-bezier(.2, .9, .3, 1.15); }
.modal-bg.show { animation: fade-in .18s ease; }
@media (max-width: 640px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: calc(100dvh - 48px); border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 12px; }
  .modal-bg.show .modal { animation: sheet-up .26s cubic-bezier(.2, .9, .3, 1); }
  .modal.ready { max-width: none; }
  dialog.ask { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; animation: sheet-up .26s cubic-bezier(.2, .9, .3, 1); }
  .ask-form { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ask-actions { flex-direction: column-reverse; }
  .ask-actions .btn { width: 100%; min-height: 48px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

/* --- szkielet ładowania podstrony --- */
.page-skel { display: grid; gap: 14px; padding-top: 28px; }
/* treść dla wyszukiwarek w index.html (src/seo.js) - widać ją tylko przez chwilę przed pierwszym rysowaniem albo bez JS */
.seo-static { max-width: 860px; padding: 28px 0 40px; line-height: 1.6; }
.seo-static h1 { margin: 6px 0 10px; }
.seo-static h2 { margin: 26px 0 8px; font-size: 1.15rem; }
.seo-static a { color: var(--cyan); }
.seo-static .btn { color: #fff; }
.seo-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 8px 0; list-style: none; }
.skel { border-radius: 12px; background: linear-gradient(100deg, var(--panel) 30%, #15304c 50%, var(--panel) 70%) 0 0 / 300% 100%; animation: skel 1.3s ease-in-out infinite; }
.skel-title { height: 38px; width: min(360px, 70%); }
.skel-line { height: 14px; width: 100%; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 10px 0; }
.skel-card { height: 140px; border-radius: var(--radius); }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- płynne wejście nowej podstrony (main.js animateEnter) --- */
#view.view-enter { animation: view-in .24s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .toast-item, .toast-item.leaving, .toast-item.bump, dialog.ask, dialog.ask::backdrop, .modal-bg.show, .modal-bg.show .modal, #view.view-enter, .skel { animation: none !important; }
  .toast-item.leaving { opacity: 0; }
  .toast-bar { display: none; }
}

/* wybór ulubionych gier: gry z katalogu i osobno karciane / planszowe w przeglądarce, jedno przewijanie */
.fav-groups { max-height: 60vh; overflow-y: auto; margin: 12px 0 16px; padding-right: 2px; }
.fav-groups .fav-picker { max-height: none; overflow: visible; margin: 0 0 6px; }
.fav-h { margin: 10px 0 8px !important; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted) !important; }
.fav-h:first-child { margin-top: 0 !important; }

/* gra z komputerem: karty graczy nad planszą, przyciski pod nią; plansza 3D (public/js/chess/board3d.js) */
.pc-stage { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pc-stage.is-3d { margin: 0 auto; }
.chess-main:has(.pc-stage.is-3d) { max-width: min(100%, calc((100vh - 200px) * 1.15)); }
.pc-hud { display: flex; align-items: center; gap: 8px; }
.pc-hud.top { justify-content: space-between; }
.pc-hud.bottom { justify-content: center; flex-wrap: wrap; }
.pc-player { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border-radius: 12px; background: #0b1a2acc; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.pc-player.bot { padding: 6px 6px 6px 12px; text-align: right; }
.pc-player.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px #f2b84b55; }
.pc-player img, .pc-ava { width: 38px; height: 38px; border-radius: 9px; flex: none; object-fit: cover; display: grid; place-items: center; font-size: 22px; background: #13263b; }
.pc-player div { display: flex; flex-direction: column; min-width: 0; }
.pc-player b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-player span:not(.pc-ava) { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pc-turn { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #0b1a2acc; border: 1px solid var(--line); font-weight: 700; font-size: 14px; white-space: nowrap; }
.pc-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff8; }
.pc-dot.w { background: #f3ead6; }
.pc-dot.b { background: #1d1b1f; }
.pc-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line2); background: #0e2033; color: var(--text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.pc-btn span { font-size: 20px; line-height: 1.1; }
.pc-btn:hover:not(:disabled) { border-color: var(--gold); }
.pc-btn:disabled { opacity: .45; cursor: default; }
.pc-btn.hint span { filter: drop-shadow(0 0 6px #f2b84b); }
.pc-help { text-align: center; margin: 6px 0 0; }
@media (max-width: 560px) {
  .pc-turn { padding: 6px 10px; font-size: 12px; }
  .pc-player { padding: 4px 8px 4px 4px; }
  .pc-player img, .pc-ava { width: 30px; height: 30px; font-size: 18px; }
  .pc-player span:not(.pc-ava) { display: none; }
  .pc-btn { min-width: 0; flex: 1; padding: 6px 4px; font-size: 11px; }
}
.c3d-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(#0d2550, #3a6fb0 50%, #c9876a); box-shadow: 0 12px 34px #0009; user-select: none; -webkit-user-select: none; touch-action: none; }
.pc-stage .c3d-wrap { aspect-ratio: 1.15; }
@media (max-width: 560px) { .pc-stage .c3d-wrap { aspect-ratio: 1.05; } }
/* przełącznik widoku 2D / 3D pod każdą szachownicą (public/js/chess/switchBoard.js) */
.cb-viewbar { display: flex; justify-content: flex-end; margin-top: 6px; }
.cb-view-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); background: #0e2033; color: var(--muted2); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.cb-view-toggle:hover { border-color: var(--gold); color: var(--text); }
/* włącznik dźwięków szachów (public/js/chess/sounds.js): w pasku pod planszą, w arkuszu „Więcej” i w panelu na telefonie */
.cb-viewbar { gap: 6px; }
.cb-sound-toggle[aria-pressed="false"] { opacity: .7; }
.pz-viewbar .cb-view-toggle + .cb-view-toggle { margin-left: 0; }
.cs-sound { display: grid; }
.cs-sound-vol { display: flex; align-items: center; gap: 12px; padding: 0 10px 10px 46px; color: var(--muted2); font-size: 14px; }
.cs-sound-vol input { flex: 1; min-width: 0; accent-color: var(--gold); }
.cs-sound-vol input:disabled { opacity: .4; }
.cs-sound > small { padding: 0 10px 10px 46px; }
.c3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.c3d-loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: #fff; text-shadow: 0 1px 4px #000; }
.c3d-promo { position: absolute; inset: 0; display: grid; place-items: center; background: #0007; }
.c3d-promo[hidden] { display: none; }
.c3d-promo-box { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--gold); }
.c3d-promo-box > span { font-weight: 700; margin-right: 4px; }
.c3d-promo-btn { width: 54px; height: 54px; border-radius: 10px; border: 1px solid var(--line2); background: #13263b; font-size: 36px; line-height: 1; cursor: pointer; }
.c3d-promo-btn.w { color: #f3ead6; text-shadow: 0 0 2px #000; }
.c3d-promo-btn.b { color: #111; background: #c9b79a; }
.c3d-promo-btn:hover { border-color: var(--gold); }
.c3d-promo-cancel { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; }

/* ---- panel admina: logi serwera WWW (pages/adminServerLog.js) */
.slog-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.slog-tile { text-align: left; font: inherit; cursor: pointer; }
.slog-tile.active { border-color: #2a8cf0; background: #11263c; }
.slog-tile strong { font-size: 20px; }
.slog-cnt { display: inline-block; margin: 4px 6px 0 0; font-style: normal; font-size: 11px; font-weight: 700; }
.slog-cnt.error, .slog-err { color: #ff8f9d; }
.slog-cnt.warn, .slog-warn { color: #ffd27a; }
.slog-lvl { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line2); font-size: 11px; font-weight: 700; color: var(--muted2); white-space: nowrap; }
.slog-lvl.info { color: #9cc9ff; border-color: #24507c; }
.slog-lvl.warn { color: #ffd27a; border-color: #7a5a1c; background: #2a2210; }
.slog-lvl.error { color: #ffd0d6; border-color: #c03448; background: #4a1420; }
.slog-row.error td { background: rgba(192, 52, 72, .08); }
.slog-table td { vertical-align: top; }
.slog-fn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; text-align: left; word-break: break-all; }
.slog-details summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.slog-details pre { max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--panel3); padding: 8px; border-radius: 8px; margin: 6px 0 0; }
.slog-fns summary { cursor: pointer; }
.slog-fns tr.active td { background: #11263c; }
.nowrap { white-space: nowrap; }
.slog-fn-select { max-width: 280px; }
.slog-fncell { width: 230px; max-width: 230px; }
.slog-fncell .slog-fn { display: block; }
.slog-cat { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; text-align: left; }
.slog-cat:hover { color: var(--text); }
.slog-table td.wrap-cell { min-width: 240px; word-break: break-word; }
.slog-who .slog-ip { display: block; margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.slog-who .slog-ip:hover { color: var(--text); }
.slog-anon { color: #ffd27a; font-size: 12px; }
.slog-ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slog-ips .slog-lvl { margin-left: 4px; }
.slog-ipbtn { margin-left: 6px; padding: 2px 10px; }
.slog-block-form label { display: block; margin-bottom: 12px; }
.slog-block-form .input { display: block; width: 100%; margin-top: 4px; }

/* --- Chinczyk (#/ludo) --- */
.ludo-view { --ludo-wood: #f6ead0; --ludo-wood2: #e9d6ad; --ludo-ink: #3a2a14; --ludo-accent: #ff6b6b; }
.ludo-hero { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 26px; align-items: center; margin: 24px 0 18px; padding: 28px;
  border: 1px solid #3b2a3a; border-radius: var(--radius);
  background: radial-gradient(ellipse at 88% 30%, #5a1f2e 0, transparent 55%), radial-gradient(ellipse at 10% 120%, #1c3f2a 0, transparent 50%), linear-gradient(140deg, #150f1a, #0a1424); }
.ludo-kicker { color: #ffb36b; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.ludo-hero h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -1px; margin-top: 4px;
  background: linear-gradient(90deg, #ff6b6b, #ffd166 35%, #4ade80 65%, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ludo-hero p { color: var(--muted2); max-width: 720px; margin: 10px 0 0; }
.ludo-hero-board { width: 230px; transform: rotate(-6deg); filter: drop-shadow(0 14px 28px #0009); }
.ludo-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ludo-start > .panel { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ludo-start > .panel p { margin: 0; }
.ludo-start-card p { flex: 1; }
.ludo-grid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ludo-grid2 > div > .panel + .panel { margin-top: 18px; }
.ludo-room-row { margin-bottom: 8px; }
.ludo-room-row .row-actions { justify-content: flex-end; }
.ludo-history summary { cursor: pointer; color: var(--muted2); font-size: 13px; margin: 10px 0 8px; }
.ludo-sub { margin: 14px 0 8px; font-size: 14px; color: var(--muted2); }
.ludo-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #4a2230; color: #ffd6dc; font-size: 12px; font-weight: 800; }
.ludo-badge.hot { background: #c0263a; color: #fff; animation: ludo-pulse 1.2s ease-in-out infinite; }
.ludo-dot, .list-main .ludo-dot { display: inline-block; margin-top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 2px #0006; vertical-align: -1px; margin-right: 2px; }
.ludo-table td:nth-child(2) { white-space: nowrap; }

/* plansza */
.ludo-svg { display: block; width: 100%; height: auto; user-select: none; }
.ludo-bg { fill: var(--ludo-wood, #f6ead0); stroke: #b8945a; stroke-width: .6; }
.ludo-cell { stroke: #6d5430; stroke-width: .45; }
.ludo-cell.start { stroke: #2a1d0b; stroke-width: .7; }
.ludo-cell.finish { stroke-width: .7; }
.ludo-cell.home { fill: #fffaf0; stroke-width: .7; }
.ludo-cell.off, .ludo-base.off, .ludo-center.off { opacity: .35; }
.ludo-base { stroke-width: .7; }
.ludo-arrow { fill: #fff; opacity: .9; pointer-events: none; }
.ludo-center { stroke: #2a1d0b; stroke-width: .3; }
.ludo-pawn { transition: transform .12s ease-out; cursor: default; outline: none; }
.ludo-pawn-ring { fill: none; stroke: transparent; stroke-width: .8; }
.ludo-pawn-shadow { fill: #0005; }
.ludo-pawn-body { stroke: #1b1206; stroke-width: .45; }
.ludo-pawn-head { stroke: #1b1206; stroke-width: .35; }
.ludo-pawn-no { font-size: 2.6px; font-weight: 800; text-anchor: middle; fill: #fff; paint-order: stroke; stroke: #0008; stroke-width: .5px; pointer-events: none; }
.ludo-pawn.can { cursor: pointer; }
.ludo-pawn.can .ludo-pawn-ring { stroke: #fff; stroke-dasharray: 2 1.2; animation: ludo-spin 2.4s linear infinite; transform-origin: 0 0; }
.ludo-pawn.can:hover .ludo-pawn-body, .ludo-pawn.can:focus-visible .ludo-pawn-body { stroke: #fff; stroke-width: .8; }
.ludo-target { fill: none; stroke: var(--lc); stroke-width: .9; stroke-dasharray: 1.6 1; opacity: .95; cursor: pointer; }
.ludo-target.capture { stroke: #d81f3a; stroke-width: 1.2; }
@keyframes ludo-spin { to { transform: rotate(360deg); } }
@keyframes ludo-pulse { 50% { opacity: .65; } }
@keyframes ludo-roll { 0% { transform: rotate(0) scale(.7); } 60% { transform: rotate(320deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }

/* pokój przed startem */
.ludo-wait-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ludo-wait-grid > div > .panel + .panel { margin-top: 18px; }
.ludo-seats { display: grid; gap: 8px; }
.ludo-seat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--lc, #2b4765) 55%, #1b3550); background: #0b1828; }
.ludo-seat > div { flex: 1; min-width: 0; }
.ludo-seat.empty { border-style: dashed; color: var(--muted); }
.ludo-seat-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lc, #2b4765) 40%, #fff) 0, var(--lc, #2b4765) 55%); box-shadow: 0 0 0 2px #0008, 0 3px 8px #0006; }
.ludo-seat.empty .ludo-seat-dot { background: none; box-shadow: none; border: 1px dashed var(--line2); }
.ludo-addbot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.ludo-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ludo-color { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 2px solid var(--line); background: #0b1828; color: var(--muted2); font-size: 13px; font-weight: 700; }
.ludo-color span { width: 26px; height: 26px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 2px #0008; }
.ludo-color.selected { border-color: var(--lc); color: #fff; background: color-mix(in srgb, var(--lc) 18%, #0b1828); }
.ludo-color:disabled { opacity: .35; cursor: not-allowed; }
.ludo-bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ludo-settings-list { margin: 0; padding-left: 18px; color: var(--muted2); font-size: 14px; }
.ludo-wait-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.ludo-waiting .form .check { display: flex; margin: 6px 0; }
#ludo-new .check { display: flex; margin: 6px 0; }

/* czat */
.ludo-chat-list { max-height: 260px; min-height: 80px; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 10px; background: #071220; border: 1px solid var(--line); margin-bottom: 8px; }
.ludo-msg { font-size: 13px; overflow-wrap: anywhere; }
.ludo-msg b { color: #9fc6ff; }
.ludo-msg.mine b { color: #ffd27a; }
.ludo-chat-form { display: flex; gap: 8px; }
.ludo-chat-form .input { flex: 1; min-width: 0; }

/* gra */
.ludo-game { margin-top: 14px; }
.ludo-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ludo-topbar strong { font-size: 17px; }
.ludo-topbar .btn.danger { margin-left: auto; }
.ludo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ludo-board-wrap { max-width: min(760px, calc(100vh - 150px)); width: 100%; margin: 0 auto; }
.ludo-board { padding: 10px; border-radius: 18px; background: linear-gradient(145deg, #5b3b1c, #3a2410); box-shadow: 0 18px 40px #0009, inset 0 0 0 2px #7a5328; }
.ludo-side { display: grid; gap: 12px; min-width: 0; }
.ludo-side > .panel { margin: 0; }
.ludo-control-top { display: flex; gap: 14px; align-items: center; }
.ludo-control-text { flex: 1; min-width: 0; }
.ludo-control-text p { margin: 0 0 8px; }
.ludo-die-wrap { flex: none; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--lc) 30%, #0b1828); box-shadow: 0 0 0 2px var(--lc); }
.ludo-die { display: block; width: 64px; height: 64px; }
.ludo-die rect { fill: #fffdf7; stroke: #2a1d0b; stroke-width: 1.2; }
.ludo-die circle { fill: #1b1206; }
.ludo-die.empty { opacity: .35; }
.ludo-die.rolling { animation: ludo-roll .45s ease-out; }
.ludo-control .btn.big { width: 100%; margin-top: 12px; }
.ludo-control .alert { margin: 10px 0 0; }
.ludo-move-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ludo-timer { position: relative; height: 18px; border-radius: 99px; background: #0a1626; border: 1px solid var(--line); overflow: hidden; }
.ludo-timer span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22a55b, #7bd88f); transition: width .25s linear; }
.ludo-timer.low span { background: linear-gradient(90deg, #c0263a, #ff6b6b); }
.ludo-timer em { position: relative; display: block; text-align: center; font-size: 11px; font-style: normal; font-weight: 800; line-height: 16px; }
.ludo-players { display: grid; gap: 6px; }
.ludo-player { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.ludo-player.turn { border-color: var(--lc); box-shadow: 0 0 0 1px var(--lc), 0 0 18px color-mix(in srgb, var(--lc) 35%, transparent); }
.ludo-player.out { opacity: .5; }
.ludo-player .ludo-seat-dot { width: 24px; height: 24px; }
.ludo-player-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ludo-player-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ludo-progress { display: block; height: 5px; border-radius: 99px; background: #0a1626; overflow: hidden; }
.ludo-progress span { display: block; height: 100%; background: var(--lc); }
.ludo-tabs { margin: 0; }
.ludo-log { max-height: 300px; overflow-y: auto; font-size: 13px; }
.ludo-log p { margin: 0 0 4px; color: var(--muted2); }
.ludo-name-tag { color: color-mix(in srgb, var(--lc) 70%, #fff); }
.ludo-results h2 { font-size: 22px; }
.ludo-podium { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.ludo-podium li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: #0b1828; border: 1px solid var(--line); }
.ludo-podium li.win { border-color: var(--gold); background: #2a2210; }
.ludo-podium small { flex-basis: 100%; }
.ludo-medal { font-size: 20px; width: 28px; text-align: center; }
.ludo-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* zasady, ligi, turnieje, profil */
.ludo-rules-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ludo-rules-grid > div > .panel + .panel { margin-top: 18px; }
.ludo-rules h3 { margin: 16px 0 6px; font-size: 16px; }
.ludo-rules h3:first-child { margin-top: 0; }
.ludo-rules p, .ludo-rules li { color: var(--muted2); font-size: 14px; }
.ludo-rules-board { max-width: 380px; }
.ludo-league-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ludo-t-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ludo-t-grid > div > .panel + .panel { margin-top: 18px; }
.ludo-t-grid .list-row { margin-bottom: 6px; }
.ludo-t-grid .list-main { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ludo-t-seat { font-size: 13px; white-space: nowrap; }
.ludo-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ludo-stat { display: grid; gap: 4px; margin: 0; }
.ludo-stat span { color: var(--muted); font-size: 12px; }
.ludo-stat b { font-size: 20px; }

@media (max-width: 1100px) {
  .ludo-layout { grid-template-columns: minmax(0, 1fr); }
  .ludo-board-wrap { max-width: min(640px, 100%); }
}
@media (max-width: 860px) {
  .ludo-hero { grid-template-columns: 1fr; padding: 20px; }
  .ludo-hero-board { width: 150px; justify-self: center; }
  .ludo-grid2, .ludo-wait-grid, .ludo-rules-grid, .ludo-t-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ludo-board { padding: 5px; border-radius: 12px; }
  .ludo-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ludo-bots { grid-template-columns: 1fr; }
  .ludo-die { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .ludo-pawn { transition: none; }
  .ludo-pawn.can .ludo-pawn-ring, .ludo-die.rolling, .ludo-badge.hot { animation: none; }
}

/* --- Makao (#/makao) – lobby, pokój, czat i tabele korzystają z klas ludo-*, tu stół i karty --- */
.mk-hero { grid-template-columns: minmax(0, 1fr) 260px;
  background: radial-gradient(ellipse at 85% 35%, #1f5a35 0, transparent 55%), radial-gradient(ellipse at 10% 120%, #5a3d10 0, transparent 50%), linear-gradient(140deg, #0c1a14, #0a1424); border-color: #24452f; }
.mk-hero h1 { background: linear-gradient(90deg, #ffd166, #f4a261 40%, #e5484d 75%, #fbfbf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-kicker { color: #ffd166; }
.mk-hero-fan { position: relative; height: 150px; --card-w: 78px; }
.mk-hero-fan > .gt-card { position: absolute; left: calc(50% - var(--card-w) / 2 + var(--k) * 34px); top: calc(12px + var(--k) * var(--k) * 3px);
  rotate: calc(var(--k) * 11deg); transform-origin: 50% 120%; box-shadow: 0 6px 16px #000a; }
.mk-waiting .form .check, #mk-new .check { display: flex; margin: 6px 0; }
.mk-bots { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* karty: joker, odkryta karta jako joker, zaznaczenie */
.gt-card.mk-joker { background: linear-gradient(160deg, #fff8e1, #ffe1f0 55%, #e0ecff); color: #6b2bb8; }
.mk-joker-face { position: absolute; inset: 22% 0 0; display: grid; place-items: center; font-size: calc(var(--card-w) * .48); line-height: 1; }
.mk-joker-txt { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-weight: 900; font-size: calc(var(--card-w) * .13); letter-spacing: .08em; }
.gt-card.mk-as-joker { box-shadow: 0 0 0 3px #a855f7, 0 3px 10px #0008; }
.mk-joker-tag { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; padding: 1px 7px; border-radius: 99px; background: #a855f7; color: #fff;
  font-size: 11px; font-weight: 800; white-space: nowrap; }
.mk-suit { color: #e8eef7; } .mk-suit.red { color: #ff6b75; }

/* stół */
.mk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.mk-main { display: grid; gap: 12px; min-width: 0; }
.mk-felt { --card-w: 74px; display: grid; gap: 14px; padding: 16px; border-radius: 22px; min-height: 330px;
  background: radial-gradient(ellipse at 50% 55%, #1b7a4c, #0d4a2d 70%, #093a23); box-shadow: inset 0 0 0 7px #3a2414, inset 0 0 0 9px #5b3b1c, inset 0 0 60px #000a, 0 16px 34px #0008; }
.mk-opponents { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mk-opp { --card-w: 30px; display: grid; gap: 6px; justify-items: center; min-width: 120px; max-width: 220px; padding: 8px 10px; border-radius: 14px;
  background: #00000040; border: 1px solid #ffffff1a; transition: box-shadow .2s, border-color .2s; }
.mk-opp.turn { border-color: var(--lc); box-shadow: 0 0 0 1px var(--lc), 0 0 18px color-mix(in srgb, var(--lc) 45%, transparent); }
.mk-opp.out { opacity: .45; }
.mk-opp-head { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.mk-opp-head strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-opp-head .ludo-seat-dot { width: 14px; height: 14px; }
.mk-opp-cards { position: relative; height: calc(var(--card-w) * 1.4); width: min(180px, calc(var(--card-w) + (var(--n) - 1) * 10px)); }
.mk-opp-cards > .gt-card { position: absolute; top: 0; left: calc(var(--i) * min(10px, (100% - var(--card-w)) / max(var(--n) - 1, 1))); --gt-back: #8a1c2b; --gt-back2: #6d1421; }
.mk-opp-cards.open { --card-w: 34px; }
.mk-opp-info { font-size: 12px; color: #d9f5e6cc; text-align: center; }
.mk-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 34px; padding: 10px 0 4px; }
.mk-deck { position: relative; --gt-back: #8a1c2b; --gt-back2: #6d1421; border-radius: calc(var(--card-w) * .08); }
.mk-deck .gt-card { box-shadow: 2px 2px 0 #fbfbf8, 4px 4px 0 #8a1c2b, 6px 6px 10px #0009; }
.mk-deck.can { cursor: pointer; }
.mk-deck.can .gt-card { box-shadow: 0 0 0 3px var(--gold), 2px 2px 0 #fbfbf8, 6px 6px 10px #0009; }
.mk-deck.can:hover .gt-card, .mk-deck.can:focus-visible .gt-card { translate: 0 -4px; }
.mk-count { position: absolute; right: -10px; bottom: -8px; min-width: 26px; padding: 2px 6px; border-radius: 99px; background: #0b1828; border: 1px solid var(--line2);
  font-size: 12px; font-weight: 800; text-align: center; }
.mk-pile { position: relative; width: calc(var(--card-w) + 40px); height: calc(var(--card-w) * 1.4 + 10px); }
.mk-pile-card { position: absolute; top: 4px; left: calc(20px + var(--k) * 14px); rotate: calc(var(--k) * 8deg); }
.mk-pile-card .gt-card { box-shadow: 0 3px 10px #0009; }
.mk-new { animation: mk-drop .35s ease-out both; }
.mk-chips { display: grid; gap: 6px; justify-items: start; }
.mk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: #0008; border: 1px solid #ffffff2a; font-size: 13px; font-weight: 700; }
.mk-chip.bad { background: #7a1424e0; border-color: #ff6b75; color: #fff; }
.mk-chip.warn { background: #6b4a08e0; border-color: #ffd166; color: #fff; }
.mk-chip.info { background: #0d3a63e0; border-color: #60a5fa; color: #fff; }
.mk-chip.soft { color: #d9f5e699; font-weight: 600; }
.mk-chip small { font-weight: 600; opacity: .8; }
@keyframes mk-drop { from { opacity: 0; transform: translate(-30px, -40px) scale(1.15); } }

/* ręka gracza */
.mk-hand-wrap { padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.mk-hand { --card-w: 76px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; padding-top: 12px; min-height: calc(var(--card-w) * 1.4 + 12px); }
.mk-hcard { position: relative; }
.mk-hand .gt-card { transition: translate .15s ease-out, box-shadow .15s; outline: none; }
.mk-hand .gt-card.can { cursor: pointer; }
.mk-hand .gt-card.can:hover, .mk-hand .gt-card.can:focus-visible { translate: 0 -5px; box-shadow: 0 0 0 2px #fff, 0 6px 14px #0009; }
.mk-hand .gt-card.sel { translate: 0 -12px; box-shadow: 0 0 0 3px var(--gold), 0 8px 16px #000a; }
.mk-hand .gt-card.drawn { box-shadow: 0 0 0 3px #60a5fa, 0 3px 10px #0008; }
.mk-order { position: absolute; top: -18px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #1b1206;
  font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.mk-spect { text-align: center; margin: 18px 0; }

/* panel ruchu */
.mk-control-top { display: flex; gap: 12px; align-items: center; }
.mk-turn-dot { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  background: color-mix(in srgb, var(--lc) 30%, #0b1828); box-shadow: 0 0 0 2px var(--lc); }
.mk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mk-btns .btn { flex: 1 1 auto; }
.mk-makao.on { background: linear-gradient(90deg, #f4a261, #e5484d); border-color: #ffd166; color: #fff; animation: ludo-pulse 1s ease-in-out infinite; }
.mk-picker { display: grid; gap: 8px; margin-top: 12px; }
.mk-picker p { margin: 0; }
.mk-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-pick-row .mk-suit { width: 18px; font-size: 18px; }
.mk-pick { min-width: 42px; font-weight: 800; }
.mk-pick.red { color: #ff6b75; }

/* zasady */
.mk-rules-cards { list-style: none; padding: 0; display: grid; gap: 12px; }
.mk-rules-cards li { display: flex; gap: 12px; align-items: flex-start; }
.mk-ex { --card-w: 38px; display: flex; gap: 4px; flex: none; min-width: 80px; }

@media (max-width: 1100px) {
  .mk-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .mk-hero { grid-template-columns: 1fr; }
  .mk-hero-fan { height: 130px; --card-w: 64px; }
}
@media (max-width: 560px) {
  .mk-felt { --card-w: 58px; padding: 10px; min-height: 0; }
  .mk-opp { min-width: 92px; padding: 6px; --card-w: 24px; }
  .mk-hand { --card-w: 58px; gap: 6px 4px; }
  .mk-center { gap: 16px 22px; }
  .mk-bots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-new, .mk-makao.on { animation: none; }
  .mk-hand .gt-card { transition: none; }
}

/* --- Tysiąc (#/tysiac) – lobby, pokój, czat i tabele z klas ludo-*, stół, ręka i panel ruchu z klas mk-* Makao --- */
.ty-hero { background: radial-gradient(ellipse at 85% 35%, #6b1424 0, transparent 55%), radial-gradient(ellipse at 10% 120%, #5a3d10 0, transparent 50%), linear-gradient(140deg, #1a0c12, #0a1424); border-color: #4a2030; }
.ty-hero h1 { background: linear-gradient(90deg, #fff1c1, #f2c45c 40%, #e5484d 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ty-kicker { color: #f2c45c; }
.ty-waiting .form .check, #ty-new .check { display: flex; margin: 6px 0; }
.ty-bots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ty-total { font-size: 15px; color: #fff3c8; }
.ty-me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; justify-content: center; font-size: 13px; color: var(--muted); }
.ty-marry { background: #a855f7; color: #fff; font-size: 11px; }

/* środek stołu: musik, licytacja, lewa */
.ty-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; padding: 10px 0 4px; }
.ty-musik { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: #d9f5e6cc; --gt-back: #8a1c2b; --gt-back2: #6d1421; }
.ty-musik-cards { display: flex; gap: 4px; }
.ty-musik:not(.open) .ty-musik-cards .gt-card + .gt-card { margin-left: calc(var(--card-w) * -.6); }
.ty-musik.open { --card-w: 46px; }
.ty-bidding { display: grid; gap: 8px; justify-items: center; }
.ty-bid-now { margin: 0; font-size: 18px; }
.ty-bid-now b { font-size: 26px; color: #ffd166; }
.ty-bids { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 340px; }
.ty-trick { display: grid; justify-items: center; gap: 8px; }
.ty-trick-cards { display: flex; gap: 10px; min-height: calc(var(--card-w) * 1.4 + 20px); align-items: flex-start; }
.ty-trick.last .ty-trick-cards { opacity: .55; --card-w: 54px; }
.ty-tcard { display: grid; justify-items: center; gap: 4px; }
.ty-tcard.fresh { animation: mk-drop .3s ease-out both; }
.ty-tcard span { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--lc) 45%, #0b1828); max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-tcard.win .gt-card { box-shadow: 0 0 0 3px var(--gold), 0 3px 10px #0008; }
.ty-game .mk-hand { gap: 8px 0; }
.ty-game .mk-hcard + .mk-hcard { margin-left: -14px; }

/* panel ruchu i wyniki */
.ty-bid { align-items: center; }
.ty-bid select { flex: 0 0 96px; }
.ty-scores { display: grid; gap: 8px; }
.ty-score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.ty-score-row > b { font-size: 18px; }
.ty-bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 99px; background: #ffffff14; overflow: visible; }
.ty-bar span { display: block; height: 100%; border-radius: 99px; background: var(--lc); }
.ty-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #f2c45c; opacity: .8; }
.ty-deal { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; font-size: 13px; }
.ty-hist td, .ty-hist th { padding: 4px 6px; font-size: 12px; white-space: nowrap; }
.ty-hist .ludo-seat-dot { width: 12px; height: 12px; display: inline-block; }

@media (max-width: 560px) {
  .ty-bots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-trick-cards { gap: 6px; }
  .ty-musik.open { --card-w: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .ty-tcard.fresh { animation: none; }
}

/* --- Warcaby (#/warcaby) – lobby, pokój, czat i tabele z klas ludo-* Chinczyka, plansza i bierki wc-* --- */
.wc-hero { background: radial-gradient(ellipse at 85% 35%, #5c1a14 0, transparent 55%), radial-gradient(ellipse at 10% 120%, #4a3416 0, transparent 50%), linear-gradient(140deg, #170f0c, #0a1424); border-color: #43281f; }
.wc-hero h1 { background: linear-gradient(90deg, #fff4dc, #e9c27a 45%, #d9473a 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wc-kicker { color: #e9c27a; }
.wc-hero-board { width: 230px; transform: rotate(-6deg); filter: drop-shadow(0 14px 28px #0009); }
.wc-waiting .form .check, #wc-new .check { display: flex; margin: 6px 0; }
.wc-main { display: grid; gap: 10px; min-width: 0; justify-items: center; }
.wc-board-wrap { width: 100%; max-width: min(720px, calc(100dvh - 230px)); min-width: 280px; }
.wc-board { --n: 10; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); aspect-ratio: 1; padding: 10px; border-radius: 14px;
  background: linear-gradient(145deg, #6b4423, #3d2410); box-shadow: 0 18px 40px #0009, inset 0 0 0 2px #8a5a2c; }
.wc-sq { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.wc-sq.light { background: #ecd9b4; }
.wc-sq.dark { background: #8a5a33; }
.wc-sq.last { background: #a8783e; }
.wc-sq.can { cursor: pointer; box-shadow: inset 0 0 0 3px #f2b84b99; }
.wc-sq.sel { box-shadow: inset 0 0 0 3px #ffd166; background: #9c6b36; }
.wc-sq.step, .wc-sq.end { cursor: pointer; }
.wc-sq.step::after, .wc-sq.end::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: #7bd88fcc; box-shadow: 0 0 0 3px #0b182866; pointer-events: none; }
.wc-sq.end::after { background: #49c8ffd9; }
.wc-sq:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 1; }
.wc-num { position: absolute; left: 3px; top: 1px; font-size: clamp(7px, 1.1vw, 10px); font-style: normal; color: #f3dfbd66; pointer-events: none; }
.wc-piece { width: 78%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; pointer-events: none; position: relative; }
.wc-piece.w { background: radial-gradient(circle at 35% 30%, #fffdf6, #e9dcc1 55%, #b9a582); box-shadow: 0 3px 0 #8d7a58, 0 5px 8px #0008, inset 0 0 0 3px #d6c6a4, inset 0 0 0 5px #f6eedd; }
.wc-piece.b { background: radial-gradient(circle at 35% 30%, #6a6f7a, #2a2d34 55%, #121418); box-shadow: 0 3px 0 #08090b, 0 5px 8px #0008, inset 0 0 0 3px #3b3f48, inset 0 0 0 5px #23262c; }
.wc-piece.king::after { content: '♛'; font-size: clamp(12px, 2.6vw, 26px); line-height: 1; color: #d99a1e; text-shadow: 0 1px 0 #0006; }
.wc-piece.b.king::after { color: #f2c45c; }
.wc-piece.fresh { animation: wc-pop .28s ease-out both; }
.wc-piece.mini { width: 22px; height: 22px; flex: none; box-shadow: 0 2px 0 #0007; }
.wc-ghost { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #ff6b6bcc; pointer-events: none; }
@keyframes wc-pop { from { transform: scale(.7); opacity: .4; } to { transform: none; opacity: 1; } }
.wc-player { width: 100%; max-width: min(720px, calc(100dvh - 230px)); min-width: 280px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px;
  align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.wc-player.turn { border-color: #f2b84b; box-shadow: 0 0 0 1px #f2b84b55; }
.wc-player-name { display: flex; flex-direction: column; min-width: 0; }
.wc-player-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-player-count { font-size: 13px; color: var(--muted2); text-align: right; }
.wc-lost { margin-left: 6px; color: #ff8a8a; font-weight: 700; }
.wc-timer { grid-column: 1 / -1; }
.wc-name-tag.w { color: #fff1d6; }
.wc-name-tag.b { color: #b9c4d6; }
.wc-turn-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #0a1626; border: 1px solid var(--line); flex: none; }
.wc-turn-dot .wc-piece.mini { width: 28px; height: 28px; }
.wc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wc-offer { width: 100%; margin: 0; }
.wc-moves-list { list-style: decimal; margin: 0; padding: 0 0 0 34px; max-height: 340px; overflow: auto; font-variant-numeric: tabular-nums; }
.wc-moves-list li { padding: 2px 0; }
.wc-moves-list li > span { display: inline-block; min-width: 46%; }
.wc-moves-list .cap { color: #ffb36b; font-weight: 700; }
.wc-rules-ex { list-style: none; padding: 0; display: grid; gap: 14px; }
.wc-rules-ex li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; }
.wc-rules-board .wc-board { padding: 5px; border-radius: 8px; }
@media (max-width: 900px) {
  .wc-board-wrap, .wc-player { max-width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .wc-hero-board { display: none; }
  .wc-board { padding: 5px; border-radius: 8px; }
  .wc-num { display: none; }
  .wc-rules-ex li { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-piece.fresh { animation: none; }
}

/* --- Kółko i krzyżyk (#/kolko) – lobby, pokój, czat i tabele z klas ludo-* Chinczyka, plansza i znaki kk-* ---
   Telefon: plansza wpisana w szerokość i wysokość ekranu, paski graczy w jednym wierszu, stuknięcia bez opóźnienia. */
.kk-view { --kk-x: #ff7a59; --kk-o: #2bd4c0; }
.kk-hero-board { width: 190px; transform: rotate(-5deg); filter: drop-shadow(0 14px 28px #0009); }
.kk-turns { margin-bottom: 12px; }
.kk-main { display: grid; gap: 10px; min-width: 0; justify-items: center; }
.kk-board-wrap { width: 100%; max-width: min(680px, calc(100dvh - 240px)); min-width: 260px; }
.kk-board-wrap:has(.s3) { max-width: min(460px, calc(100dvh - 240px)); }
.kk-board { --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); aspect-ratio: 1; gap: 2px; padding: 8px;
  border-radius: 14px; background: #1b3550; box-shadow: 0 18px 40px #0009, inset 0 0 0 2px #2a4c70;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.kk-board.big { gap: 1px; padding: 6px; }
.kk-cell { position: relative; display: grid; place-items: center; background: #0c1a2c; min-width: 0; min-height: 0; }
.kk-board.s3 .kk-cell { border-radius: 10px; }
.kk-board.s5 .kk-cell { border-radius: 6px; }
.kk-board.my-turn .kk-cell.free { cursor: pointer; }
.kk-board.my-turn { box-shadow: 0 18px 40px #0009, inset 0 0 0 2px #2bd4c066, 0 0 0 2px #2bd4c044; }
.kk-cell.last { background: #15304d; }
.kk-cell.win { background: #3a3110; }
.kk-cell.preview { background: #143a3a; box-shadow: inset 0 0 0 2px #ffd166; }
.kk-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 1; }
@media (hover: hover) { .kk-board.my-turn .kk-cell.free:hover { background: #12263d; } }
.kk-mark { width: 74%; height: 74%; fill: none; stroke-linecap: round; overflow: visible; pointer-events: none; }
.kk-board.big .kk-mark { width: 86%; height: 86%; }
.kk-mark.x { stroke: var(--kk-x, #ff7a59); stroke-width: 13; filter: drop-shadow(0 0 6px #ff7a5966); }
.kk-mark.o { stroke: var(--kk-o, #2bd4c0); stroke-width: 12; filter: drop-shadow(0 0 6px #2bd4c066); }
.kk-board.big .kk-mark.x { stroke-width: 16; filter: none; }
.kk-board.big .kk-mark.o { stroke-width: 14; filter: none; }
.kk-mark.ghost { opacity: .45; }
.kk-mark.fresh path, .kk-mark.fresh circle { stroke-dasharray: 200; stroke-dashoffset: 200; animation: kk-draw .32s ease-out forwards; }
@keyframes kk-draw { to { stroke-dashoffset: 0; } }
.kk-winline { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; overflow: visible; }
.kk-board.big .kk-winline { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.kk-winline line { stroke: #ffd166; stroke-width: .12; stroke-linecap: round; filter: drop-shadow(0 0 .15px #000); opacity: .9; }
.kk-board.big .kk-winline line { stroke-width: .3; }
.kk-coords { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); padding: 2px 8px 0; font-size: 10px; color: var(--muted); text-align: center; }
.kk-coords i { font-style: normal; }
.kk-player { width: 100%; max-width: min(680px, calc(100dvh - 240px)); min-width: 260px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px;
  align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.kk-main:has(.s3) .kk-player { max-width: min(460px, calc(100dvh - 240px)); }
.kk-player.turn { border-color: #2bd4c0; box-shadow: 0 0 0 1px #2bd4c055; }
.kk-player.won { border-color: var(--gold); }
.kk-player-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #0a1626; }
.kk-player-mark .kk-mark { width: 80%; height: 80%; filter: none; }
.kk-player-name { display: flex; flex-direction: column; min-width: 0; }
.kk-player-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-player-side { text-align: right; white-space: nowrap; }
.kk-timer { grid-column: 1 / -1; }
.kk-name-tag.x { color: #ffb39e; }
.kk-name-tag.o { color: #8ff0e4; }
.kk-turn-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #0a1626; border: 1px solid var(--line); flex: none; }
.kk-turn-dot .kk-mark { width: 60%; height: 60%; filter: none; }
.kk-quick { width: 100%; max-width: min(680px, calc(100dvh - 240px)); display: flex; gap: 8px; }
.kk-quick[hidden] { display: none; }
.kk-quick .kk-place { flex: 1 1 auto; min-height: 46px; font-size: 16px; }
.kk-topbar > .link { white-space: nowrap; }
.kk-confirm { display: flex; margin: 10px 0 0; font-size: 13px; color: var(--muted2); }
.kk-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rules-ex li { grid-template-columns: 150px minmax(0, 1fr); }
.kk-rules-board .kk-board { padding: 5px; border-radius: 8px; }
@media (max-width: 900px) {
  .kk-board-wrap, .kk-player, .kk-quick, .kk-main:has(.s3) .kk-player { max-width: 100%; min-width: 0; }
}
/* telefon: plansza zaraz pod paskiem, wszystko w zasięgu kciuka */
@media (max-width: 640px) {
  .kk-game { margin-top: 6px; }
  .kk-topbar { gap: 8px; margin-bottom: 6px; flex-wrap: nowrap; font-size: 14px; }
  .kk-topbar .ludo-badge { font-size: 11px; white-space: nowrap; }
  .kk-topbar .kk-pace { display: none; }
  .kk-main { gap: 6px; }
  .kk-board-wrap, .kk-board-wrap:has(.s3) { max-width: min(100%, calc(100dvh - 230px)); }
  .kk-board { padding: 5px; border-radius: 10px; }
  .kk-board.big { padding: 3px; border-radius: 8px; }
  .kk-winline, .kk-board.big .kk-winline { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .kk-board.big ~ .kk-coords { display: none; }
  .kk-player { padding: 6px 10px; gap: 2px 8px; }
  .kk-player-mark { width: 26px; height: 26px; }
  .kk-player-name .small { font-size: 11px; }
  .kk-quick { max-width: 100%; }
  .kk-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .kk-actions > .btn { min-height: 42px; }
  .kk-actions .wc-offer { grid-column: 1 / -1; }
  .kk-hero-board { display: none; }
  .kk-view .gr-hero:not(.gr-hero-compact) p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .kk-rules-ex li { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .kk-mark.fresh path, .kk-mark.fresh circle { animation: none; stroke-dashoffset: 0; }
}

/* --- Okopy (#/okopy): prototyp gry artyleryjskiej, pole bitwy na canvasie + HUD w DOM --- */
.ok-view { --ok-chrome: 150px; --ok-ui: rgba(6, 13, 23, .78); --ok-line: #2b4765; }
.ok-page { margin-top: 14px; }
.ok-stage [hidden] { display: none !important; }
.ok-stage { position: relative; height: clamp(320px, calc(100dvh - var(--ok-chrome)), 980px); border-radius: 14px; overflow: hidden;
  background: #081a33; border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ok-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.ok-stage.ok-full { position: fixed; inset: 0; z-index: 200; height: 100dvh; border-radius: 0; border: 0; }
body.ok-noscroll { overflow: hidden; }
.ok-stage button { -webkit-tap-highlight-color: transparent; }
/* górny pasek: drużyny, wiatr i zegar, narzędzia */
.ok-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 8px; align-items: flex-start; pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px); }
.ok-top > * { pointer-events: auto; }
.ok-teams { display: grid; gap: 4px; min-width: 0; flex: 1 1 0; max-width: 240px; }
.ok-team { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 2px 8px; border-radius: 7px; background: var(--ok-ui);
  font-size: 12px; font-weight: 700; color: var(--c); overflow: hidden; border: 1px solid transparent; }
.ok-team i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c); transition: width .4s; }
.ok-team b { color: #fff; font-variant-numeric: tabular-nums; }
.ok-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-team.on { border-color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.ok-team.out { opacity: .4; text-decoration: line-through; }
.ok-mid { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto; }
.ok-wind { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: var(--ok-ui); font-size: 12px; }
.ok-wind-bar { position: relative; display: flex; width: 120px; height: 8px; background: #0e2033; border-radius: 4px; overflow: hidden; }
.ok-wind-bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #5d7a99; }
.ok-wind-bar i { display: block; height: 100%; }
#ok-wind-l { margin-left: auto; width: 0; background: linear-gradient(90deg, #ff9a3d, #7fd3ff); }
#ok-wind-r { width: 0; background: linear-gradient(90deg, #7fd3ff, #ff9a3d); }
.ok-wind-bar > i:first-child { flex: 0 0 auto; }
.ok-wind-bar { justify-content: center; }
.ok-wind-bar > i { max-width: 50%; }
.ok-wind b { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.ok-timer { min-width: 44px; padding: 2px 10px; border-radius: 8px; background: var(--ok-ui); font: 800 20px/1.2 Inter, system-ui, sans-serif; text-align: center;
  font-variant-numeric: tabular-nums; }
.ok-timer.low { color: var(--red); animation: ok-pulse 1s infinite; }
@keyframes ok-pulse { 50% { opacity: .55; } }
.ok-status { padding: 3px 10px; border-radius: 8px; background: #102238e6; font-size: 12px; color: var(--muted2); white-space: nowrap; }
.ok-tools { display: flex; gap: 4px; flex: 1 1 0; justify-content: flex-end; max-width: 240px; }
.ok-ico { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ok-line); background: var(--ok-ui); color: #fff; font-size: 18px; line-height: 1;
  display: grid; place-items: center; }
.ok-ico:hover { border-color: var(--focus); }
/* dolny pasek: marsz (lewy kciuk), broń i odczyt celownika, strzał (prawy kciuk) */
.ok-bottom { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  pointer-events: none; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ok-bottom > * { pointer-events: auto; }
.ok-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ok-walk, .ok-angle { display: flex; gap: 6px; }
.ok-angle { display: none; }
.ok-hold .ok-angle { display: flex; }
.ok-btn { width: 58px; height: 52px; border-radius: 14px; border: 1px solid var(--ok-line); background: var(--ok-ui); color: #fff; font-size: 20px;
  touch-action: none; }
.ok-btn.small { width: 52px; height: 40px; font-size: 15px; }
.ok-btn:active { background: #1262dd; border-color: #1687ff; }
.ok-fuel { width: 122px; height: 5px; border-radius: 3px; background: #0e2033; overflow: hidden; }
.ok-fuel i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #37d69a, #b7f06a); transition: width .15s; }
.ok-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ok-weapon { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--ok-line); background: var(--ok-ui);
  color: #fff; font-weight: 800; white-space: nowrap; min-height: 44px; }
.ok-weapon small { color: var(--gold); }
.ok-caret { color: var(--muted); font-size: 11px; }
.ok-aimread { padding: 1px 8px; border-radius: 6px; background: var(--ok-ui); font-size: 12px; color: var(--muted2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok-pass { padding: 2px 12px; border-radius: 8px; border: 1px solid var(--ok-line); background: var(--ok-ui); color: var(--muted2); font-size: 12px; }
.ok-fire { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 2px solid #ff8f9b; overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #ff6b6b, #b8283a); color: #fff; font: 900 14px/1 Inter, system-ui, sans-serif; letter-spacing: .5px;
  box-shadow: 0 6px 24px #ff5a6a55; touch-action: none; }
.ok-fire:active { transform: scale(.96); }
.ok-fire:disabled, .ok-weapon:disabled, .ok-pass:disabled { opacity: .45; filter: grayscale(.6); cursor: default; }
.ok-fire-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #f2b84b, #fff1a8); opacity: .8; }
.ok-fire-label { position: relative; text-shadow: 0 1px 2px #0008; }
.ok-bot-turn .ok-walk-btn, .ok-busy .ok-walk-btn { opacity: .45; }
.ok-banner { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); padding: 10px 22px; border-radius: 12px; background: #060d17d9;
  border: 1px solid var(--c); color: var(--c); font: 900 22px/1.2 Inter, system-ui, sans-serif; pointer-events: none; white-space: nowrap; }
.ok-banner.show { animation: ok-banner 1.6s ease-out forwards; }
@keyframes ok-banner { 0% { opacity: 0; transform: translate(-50%, -30%); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }
.ok-skip-anim { position: absolute; right: 10px; bottom: 104px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--ok-line); background: var(--ok-ui); color: #fff; font-size: 13px; }
/* arkusz broni */
.ok-sheet { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: #0006; z-index: 5; }
.ok-sheet-box { width: min(640px, 100%); max-height: 80%; overflow: auto; padding: 12px; border-radius: 16px 16px 0 0; background: #0c1929f2; border: 1px solid var(--line); }
.ok-sheet-head { font-weight: 800; margin-bottom: 8px; }
.ok-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ok-wpn { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; text-align: left; padding: 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.ok-wpn.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ok-wpn:disabled { opacity: .4; }
.ok-wpn-ico { font-size: 22px; grid-row: span 2; }
.ok-wpn-ammo { color: var(--gold); font-weight: 800; font-size: 12px; }
.ok-wpn small { grid-column: 2 / 4; color: var(--muted); font-size: 11px; line-height: 1.3; }
.ok-wpn kbd { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: var(--muted); }
/* koniec gry */
.ok-over { position: absolute; inset: 0; display: grid; place-items: center; background: #060d17b3; z-index: 6; }
.ok-over-box { padding: 22px 26px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); text-align: center; display: grid; gap: 10px; }
.ok-over-title { font: 900 26px/1.2 Inter, system-ui, sans-serif; }
.ok-over-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* panel ustawień prototypu */
.ok-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 94%); overflow: auto; padding: 14px; background: #0c1929f7; border-left: 1px solid var(--line);
  z-index: 8; touch-action: pan-y; user-select: text; }
.ok-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ok-panel h4 { margin: 14px 0 6px; font-size: 13px; color: var(--cyan); text-transform: uppercase; letter-spacing: .5px; }
.ok-panel h4 small { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.ok-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #13283f; }
.ok-row select, .ok-row input[type=text], .ok-row input[type=number] { max-width: 190px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line2);
  background: var(--panel3); color: var(--text); font-size: 13px; }
.ok-row input[type=number], .ok-row input[type=text] { width: 110px; }
.ok-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blue); }
.ok-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.ok-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ok-stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; margin: 0; }
.ok-stats dt { color: var(--muted); }
.ok-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
/* telefon w pionie: prośba o obrót (można pominąć) */
.ok-rotate { display: none; position: absolute; inset: 0; z-index: 9; background: #060d17ee; text-align: center; place-items: center; padding: 20px; }
.ok-rotate-ico { font-size: 44px; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 700px) {
  .ok-stage:not(.ok-portrait-ok) .ok-rotate { display: grid; }
}
.ok-help { margin-top: 10px; font-size: 13px; color: var(--muted2); display: grid; gap: 6px; }
.ok-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.ok-keys kbd { padding: 0 5px; border-radius: 4px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-size: 11px; }
@media (max-width: 860px) {
  .ok-view { --ok-chrome: calc(var(--tabbar, 68px) + 90px); }
  .ok-page { margin-top: 6px; }
  .ok-help { display: none; }
}
/* telefon poziomo: nagłówek i dolny pasek portalu zjadłyby wysokość – pole bitwy zajmuje cały ekran */
.ok-back { display: none; }
@media (max-height: 500px) and (pointer: coarse) {
  .ok-stage { position: fixed; inset: 0; z-index: 200; height: 100dvh; border-radius: 0; border: 0; }
  .ok-back { display: grid; }
  .ok-full-btn { display: none; }
  .ok-stage .ok-top { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
  .ok-stage .ok-bottom { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
}
@media (max-height: 500px) {
  .ok-view { --ok-chrome: 70px; }
  .ok-teams { max-width: 150px; }
  .ok-team { font-size: 11px; padding: 1px 6px; }
  .ok-btn { width: 52px; height: 46px; }
  .ok-fire { width: 74px; height: 74px; }
  .ok-wind-bar { width: 80px; }
  .ok-timer { font-size: 16px; }
  .ok-ico { width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 560px) {
  .ok-wind-bar { width: 70px; }
  .ok-teams { max-width: 130px; }
  .ok-tools { max-width: none; flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 34px); }
  .ok-ico { width: 34px; height: 34px; font-size: 16px; }
}

/* --- Okopy: lobby, pokój przed startem, zasady (wzór: Chinczyk) --- */
.ok-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: center; margin: 24px 0 18px; padding: 28px;
  border: 1px solid #4a3020; border-radius: var(--radius);
  background: radial-gradient(ellipse at 88% 20%, #6b3a16 0, transparent 55%), radial-gradient(ellipse at 10% 120%, #2c4a1a 0, transparent 50%), linear-gradient(140deg, #1a1008, #0a1424); }
.ok-kicker { color: #ffb36b; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.ok-hero h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -1px; margin-top: 4px;
  background: linear-gradient(90deg, #ffe08a, #f0c35a 40%, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ok-hero p { color: var(--muted2); max-width: 720px; margin: 10px 0 0; }
.ok-hero-art img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 14px 28px #0009; transform: rotate(-2deg); }
.ok-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ok-start > .panel { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ok-start > .panel p { margin: 0; }
.ok-start-card p { flex: 1; }
.ok-grid2, .ok-wait-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ok-wait-grid > div > .panel + .panel { margin-top: 18px; }
.ok-room-row { margin-bottom: 8px; }
.ok-room-row .row-actions { justify-content: flex-end; }
.ok-history summary { cursor: pointer; color: var(--muted2); font-size: 13px; margin: 10px 0 8px; }
.ok-sub { margin: 14px 0 8px; font-size: 14px; color: var(--muted2); }
.ok-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #4a3020; color: #ffe2b8; font-size: 12px; font-weight: 800; }
.ok-badge.hot { background: #c8752b; color: #fff; animation: ok-pulse 1.2s ease-in-out infinite; }
.ok-seats { display: grid; gap: 8px; }
.ok-seat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--lc, #2b4765) 55%, #1b3550); background: #0b1828; }
.ok-seat > div { flex: 1; min-width: 0; }
.ok-seat.empty { border-style: dashed; color: var(--muted); }
.ok-seat-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lc, #2b4765) 40%, #fff) 0, var(--lc, #2b4765) 55%); box-shadow: 0 0 0 2px #0008, 0 3px 8px #0006; }
.ok-seat.empty .ok-seat-dot { background: none; box-shadow: none; border: 1px dashed var(--line2); }
.ok-addbot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.ok-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ok-color { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 2px solid var(--line); background: #0b1828; color: var(--muted2); font-size: 13px; font-weight: 700; }
.ok-color span { width: 26px; height: 26px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 2px #0008; }
.ok-color.selected { border-color: var(--lc); color: #fff; background: color-mix(in srgb, var(--lc) 18%, #0b1828); }
.ok-color:disabled { opacity: .35; cursor: not-allowed; }
.ok-bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ok-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 10px; }
.ok-settings-list { margin: 0; padding-left: 18px; color: var(--muted2); font-size: 14px; }
.ok-wait-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.ok-waiting .form .check, #ok-new .check { display: flex; margin: 6px 0; }
.ok-chat-list { max-height: 260px; min-height: 80px; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 10px; background: #071220; border: 1px solid var(--line); margin-bottom: 8px; }
.ok-panel .ok-chat-list { max-height: 200px; }
.ok-msg { font-size: 13px; overflow-wrap: anywhere; }
.ok-msg b { color: #9fc6ff; }
.ok-msg.mine b { color: #ffd27a; }
.ok-chat-form { display: flex; gap: 8px; }
.ok-chat-form .input { flex: 1; min-width: 0; }
.ok-rules ul { color: var(--muted2); padding-left: 20px; }
.ok-rules h3 { margin-top: 16px; }
.ok-rules-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ok-wpn.on-rules { cursor: default; }
/* gra online: tabela wyników, powrót z autopilota */
.ok-over-table { border-collapse: collapse; font-size: 14px; margin: 0 auto; }
.ok-over-table th, .ok-over-table td { padding: 4px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.ok-over-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ok-autoback { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--gold); background: #2a1f08ee; color: #ffe2a8; font-size: 13px; }
@media (max-width: 860px) {
  .ok-hero { grid-template-columns: 1fr; padding: 20px; }
  .ok-hero-art { max-width: 340px; }
  .ok-grid2, .ok-wait-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Szablony stron (public/js/layout/Page.js, public/js/templates/): wspólny rytm nagłówek -> zakładki -> filtry -> treść --- */
.page-head .page-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 14px; }
.page-head:has(> .page-back:only-child) { margin-bottom: 14px; }
/* panel głównego administratora: złoty akcent menu (templates/HeadAdminPanel.js) */
.adm-head-panel .adm-nav { border-color: #5a4a1e; background: linear-gradient(180deg, #1c1708, var(--panel) 140px); }

/* --- szablon: Competition (templates/Competition.js) --- */

/* --- szablon: Team (templates/Team.js) --- */
.page-team .page-head + .team-hero { margin-top: 0; }
.team-hero-desc { color: #c9d8ea; font-size: 15px; margin: 10px 0 0; max-width: 72ch; }
.team-hero-recruit { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: #ffe2a8;
  background: color-mix(in srgb, var(--accent, var(--gold)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--gold)) 35%, transparent); }
.team-invite-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* --- szablon: Match (templates/Match.js) --- */
.match-hero { padding: 24px 28px; }
.match-hero .page-back { display: inline-flex; margin-bottom: 6px; font-size: 14px; }
.match-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.match-hero-score { flex: 0 0 auto; padding: 10px 22px; border: 1px solid #21405c; border-radius: 16px; background: #071321cc; }
.match-hero-score:empty { display: none; }
.match-hero-score .scoreline { margin: 0; }
.page-match .match-live:empty, .page-match .match-maps:empty { display: none; }
.page-match .match-maps .map-strip { margin-bottom: 0; }
.page-match .match-maps .map-strip + * { margin-top: 14px; }
.page-match .connect-box { margin-top: 0; }
.page-match > .alert, .page-match > .cancel-request { margin-bottom: 14px; }
.page-match .split > div > .chat-box { margin-top: 0; }
.page-match .quick-teams .quick-team:first-child .team-title { margin-top: 0; }
@media (max-width: 720px) {
  .match-hero { padding: 18px; }
  .match-hero > .game-icon { display: none; }
  .match-hero-score { align-self: stretch; }
}

/* --- szablon: GameRoom (templates/GameRoom.js) --- */
/* hero gry: ten sam wygląd na każdej zakładce każdej gry, kolor z katalogu (--glow), logo gry albo ilustracja po prawej */
.gr-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; margin: 24px 0 18px; padding: 28px;
  border: 1px solid color-mix(in srgb, var(--glow) 32%, #1a344e); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(ellipse at 88% 30%, color-mix(in srgb, var(--glow) 34%, transparent) 0, transparent 58%),
    radial-gradient(ellipse at 8% 120%, color-mix(in srgb, var(--glow) 16%, transparent) 0, transparent 50%), linear-gradient(140deg, #110f1a, #0a1424); }
.gr-hero-text { min-width: 0; }
.gr-kicker { display: block; color: color-mix(in srgb, var(--glow) 55%, #fff); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gr-hero h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -1px; margin: 4px 0 0; overflow-wrap: anywhere;
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--glow) 45%, #fff) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gr-hero h1 span { color: color-mix(in srgb, var(--glow) 60%, #fff); }
.gr-hero h1 .avatar { -webkit-text-fill-color: initial; vertical-align: middle; }
.gr-hero p { color: var(--muted2); max-width: 720px; margin: 10px 0 0; }
.gr-hero .page-back { display: flex; width: max-content; margin-bottom: 8px; }
.gr-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.gr-hero-art { display: flex; justify-content: center; align-items: center; min-width: 0; }
.gr-hero-logo { display: block; width: 100%; max-width: 300px; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 12px;
  box-shadow: 0 14px 28px #0009, 0 0 0 1px color-mix(in srgb, var(--glow) 35%, transparent); transform: rotate(-2deg); }
.gr-hero-art .game-icon { width: 96px; height: 96px; }
/* wersja kompaktowa: zasady, ranking, ligi, turnieje, profil, pokój przed startem */
.gr-hero-compact { grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; padding: 20px 24px; margin: 20px 0 14px; }
.gr-hero-compact h1 { font-size: clamp(24px, 3.4vw, 34px); }
.gr-hero-compact p { font-size: 14px; }
.gr-hero-compact .gr-hero-logo { max-width: 200px; transform: rotate(-1.5deg); }
.gr-hero-compact.gr-hero-illus .gr-hero-art { max-height: 140px; }
.game-room-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 14px 0 12px; min-height: 32px; }
.game-room-bar .grb-game { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); font-size: 14px; }
.game-room-bar .grb-title { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.game-room-bar .grb-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) {
  .gr-hero { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .gr-hero-art { order: -1; justify-content: flex-start; }
  .gr-hero-logo { max-width: 240px; transform: none; }
  .gr-hero-illus .gr-hero-art { display: none; }
  .gr-hero-compact { grid-template-columns: minmax(0, 1fr) 112px; align-items: start; }
  .gr-hero-compact .gr-hero-art { order: 0; }
  .gr-hero-compact .gr-hero-logo { max-width: 112px; border-radius: 8px; }
}

/* --- szablon: Feedback i Legal (templates/Feedback.js, templates/Legal.js) --- */
/* nagłówek dokumentów tej samej szerokości co treść (.legal) */
.page-legal .legal-head { max-width: 880px; }

/* --- szablon: OrganizerPanel (templates/OrganizerPanel.js) --- */
/* panel organizatora: zielony akcent menu i podpisu roli (odróżnia go od panelu admina) */
.adm-org-panel .adm-nav { border-color: #1f5a4a; background: linear-gradient(180deg, #0b1d19, var(--panel) 140px); }
.adm-org-panel .adm-role { color: #5fd3a8; }
.adm-org-panel .adm-link.active { background: #123d33; }
.org-tasks-more { margin: 10px 0 0; font-size: 14px; }

/* --- osiągnięcia i XP (profil: podsumowanie, zakładka Osiągnięcia; panel admina -> Osiągnięcia) --- */
.ach-level-tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #c9b5ff; background: #1c1640; border: 1px solid #5a46b3; text-decoration: none; }
.ach-level-tag:hover { border-color: #8a74e8; }
.ach-level { display: flex; align-items: center; gap: 14px; }
.ach-level-num { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 22px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 30%, #8a74e8, #3b2a8c); border: 2px solid #a996ff; box-shadow: 0 0 18px #6b55d655; }
.ach-level-main { flex: 1; min-width: 0; }
.ach-level-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.ach-bar { height: 10px; border-radius: 99px; background: #0a1626; border: 1px solid var(--line); overflow: hidden; }
.ach-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #6b55d6, var(--cyan)); border-radius: inherit; }
.ach-bar.sm { height: 6px; margin-top: 6px; }
.ach-summary .ach-grid { margin-top: 14px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ach-grid.recent { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ach-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(150deg, #0d1b2c, #091522); }
.ach-card.got { border-color: #5a46b3; background: linear-gradient(150deg, #19173a, #0c1529); }
.ach-card.locked .ach-ico { filter: grayscale(1); opacity: .55; }
.ach-card.compact { align-items: center; padding: 10px; }
.ach-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 24px; background: #0a1626; border: 1px solid var(--line2); }
.ach-ico.sm { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.ach-card.got .ach-ico { border-color: #8a74e8; box-shadow: 0 0 12px #6b55d644; }
.ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-body strong { font-size: 14px; }
.ach-desc { color: var(--muted2); font-size: 13px; }
.ach-xp { flex: none; font-size: 12px; font-weight: 800; color: #c9b5ff; white-space: nowrap; }
.ach-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; }
.ach-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ach-filters .btn.active { border-color: var(--blue); color: #fff; box-shadow: inset 0 -2px 0 var(--blue); }
.ach-group-title { font-size: 18px; margin: 18px 0 10px; }
@media (max-width: 640px) {
  .ach-grid, .ach-grid.recent { grid-template-columns: 1fr; }
  .ach-level-num { width: 44px; height: 44px; font-size: 18px; }
}

/* ======================================================================
   Tryb planszy na telefonie (public/js/chess/stage.js): partia, lekcja, zadania, gra z trenerem i z komputerem
   na jednym ekranie bez przewijania. Paski mają stałą wysokość, plansza (.cs-board) dostaje miejsce, które zostaje.
   ====================================================================== */
.cs-top, .cs-scrim, .cs-side-head, .pz-prompt-rt, .cs-only { display: none; }
.pz-streak { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: #12263c; color: var(--muted2); font-size: 12px; font-weight: 700; }
.pz-streak b { color: var(--text); font-variant-numeric: tabular-nums; }
.cg-strip-mv, .cg-strip-offer { display: contents; }
.cg-mtable { display: grid; grid-template-columns: 36px 1fr 1fr; margin-top: 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
.cg-mtable > * { padding: 4px 0; border-top: 1px solid var(--line); }
.cg-mtable .mv-no { color: var(--muted); padding-top: 12px; font-size: 14px; }
.cg-mtable .mv { min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; padding: 0 10px; }
.cg-mtable .mv.cur { background: #12305a; color: #fff; }
.cg-sheet-head h2 small { font-size: 13px; font-weight: 500; margin-left: 6px; }

@media (max-width: 860px) {
  body.chess-stage { --tabbar: 0px; padding-bottom: 0; }
  body.chess-stage > header, body.chess-stage #tabbar, body.chess-stage footer, body.chess-stage .side, body.chess-stage .sb-scrim,
  body.chess-stage #site-banner, body.chess-stage .cookie-bar { display: none !important; }
  body.chess-stage .shell { margin: 0; }
  body.chess-stage .toasts { --toast-bottom: 76px; }
  /* cały ekran: górny pasek, komunikat (np. brak silnika), scena z planszą; reszta strony (nagłówek gry, zakładki) schowana */
  body.chess-stage main.wrap { height: 100vh; height: 100dvh; min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
  body.chess-stage #view > :not(.cs-top):not(.cs-scrim):not(.cs-stage):not(.alert):not(.cg) { display: none !important; }
  body.chess-stage #view > .alert { flex: none; margin: 6px 12px; padding: 6px 10px; font-size: 12.5px; border-radius: 10px; }
  body.chess-stage .cs-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0; padding: 0; background: #07111f; }
  body.chess-stage .cs-stage > *, body.chess-stage .cs-stage .chess-main > * { flex: none; }

  .cs-top { display: block; flex: none; background: #07111f; border-bottom: 1px solid var(--line); }
  .cs-top-row { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 4px; }
  .cs-top .cg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .cs-top .cg-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-top .cg-title small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-top .cg-ib { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted2); display: grid; place-items: center; }
  .cs-top .cg-ib .sb-ico { width: 22px; height: 22px; }
  .cs-prog { display: flex; gap: 3px; padding: 0 12px 7px; }
  .cs-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--line2); }
  .cs-prog i.done { background: var(--green); } .cs-prog i.cur { background: #49c8ff; }
  .cs-only { display: inline-flex; }

  /* plansza: kwadrat wpisany w wolne miejsce (szerokość ekranu albo wysokość, która została po paskach) */
  body.chess-stage .cs-board { flex: 1 1 0 !important; min-height: 0; width: 100%; max-width: none; margin: 0; container-type: size; display: flex; align-items: center; justify-content: center; background: #040a13; }
  body.chess-stage .cs-board > .chess-board-host { flex: none; width: min(100cqw, 100cqh); max-width: none; }
  body.chess-stage .cs-board .cb-wrap { border-radius: 0; box-shadow: none; }
  body.chess-stage .cs-board .c3d-wrap { border-radius: 0; aspect-ratio: 1; }
  body.chess-stage .cb-viewbar:not(.pz-viewbar), body.chess-stage .cb-view-toggle { display: none !important; }

  /* dolny pasek akcji: wspólny wygląd przycisków lekcji, trenera, zadań i gry z komputerem */
  body.chess-stage .learn-actions, body.chess-stage .pz-actions, body.chess-stage .pc-hud.bottom {
    order: 9; display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #18304a; background: #07111f; position: static; box-shadow: none; border-radius: 0; }
  body.chess-stage .learn-actions .btn, body.chess-stage .pz-actions .btn, body.chess-stage .pc-hud.bottom .pc-btn {
    flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 6px; border-radius: 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.chess-stage .learn-actions .btn[aria-pressed="true"] { border-color: #ff8f9b; color: #ffb6bf; }
  body.chess-stage .learn-actions[hidden] { display: none; }

  /* panel boczny (.chess-side) jako arkusz od dołu: „Więcej” w górnym pasku */
  body.chess-stage:not(.cs-panel) .cs-stage .chess-side { display: contents; }
  body.chess-stage:not(.cs-panel) .cs-stage .chess-side > .panel { display: contents; }
  body.chess-stage:not(.cs-panel) .cs-stage .chess-side > .panel > *, body.chess-stage .cs-side-head { display: none; }
  body.chess-stage.cs-panel .cs-scrim { display: block; position: fixed; inset: 0; z-index: 64; background: #02060cb3; }
  body.chess-stage.cs-panel .cs-stage .chess-side { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; max-height: 82vh; overflow-y: auto; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0; background: #0c1b2d; border-top: 1px solid var(--line2); box-shadow: 0 -20px 60px #000a; }
  body.chess-stage.cs-panel .cs-stage .chess-side > .panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
  body.chess-stage.cs-panel .cs-stage .chess-side > .panel > :is(.learn-actions, .pz-actions)[class] { display: none; }
  body.chess-stage.cs-panel .cs-side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  body.chess-stage.cs-panel .cs-side-head .cg-grip { display: block; margin: 0 auto 0 0; }
  body.chess-stage.cs-panel .cs-side-head .btn[hidden] { display: none; }

  /* ---- partia online */
  body.chess-stage .cg { margin: 0; }
  body.chess-stage .cg-top { flex: none; min-height: 48px; }
  body.chess-stage .cg .player-bar { flex: none; height: 52px; padding: 0 10px 0 12px; }
  .cg .pb-info { gap: 0; }
  .cg .pb-info .player-cell { font-size: 15px; }
  .cg .pb-rating { font-size: 13px; }
  .cg .pb-sub { min-height: 18px; gap: 6px; }
  .cg .pb-sub .turn-chip, .cg .pb-sub .pb-color { display: none; }
  .cg .captured { font-size: 14px; }
  .cg .clock { min-width: 92px; height: 40px; padding: 0 10px; display: grid; place-items: center; font-size: 24px; border-radius: 10px; background: #0f2236; color: var(--muted2); transition: background .15s, color .15s; }
  .cg .clock.running { background: #e3eefa; color: #0a1726; }
  .cg .clock.running.own { background: var(--green); color: #04241a; box-shadow: none; }
  .cg .clock.low.running { background: #ff5d6e; color: #fff; animation: cs-pulse 1s infinite; }
  .cg-strip { flex: none; height: 44px; padding: 0; gap: 0; overflow: hidden; }
  .cg-strip > .cg-ib { flex: none; width: 40px; height: 40px; }
  .cg-strip > .cg-ib .sb-ico { width: 18px; height: 18px; }
  .cg-strip-mv { display: flex; flex: 1; min-width: 0; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .cg-strip-mv::-webkit-scrollbar { display: none; }
  .cg-strip-offer { display: none; }
  .cg-strip.has-offer > :not(.cg-strip-offer) { display: none; }
  .cg-strip.has-offer .cg-strip-offer { display: flex; flex: 1; align-items: center; gap: 8px; padding: 0 8px 0 12px; height: 100%; background: #10233a; font-size: 14px; font-weight: 700; }
  .cg-strip-offer span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-strip-offer .btn { min-height: 34px; padding: 0 12px; }
  .cg-alert .cg-offer { display: none; }
  .cg-alert { flex: none; padding: 6px 12px 0; gap: 6px; }
  .cg-alert .alert { padding: 6px 10px; font-size: 13px; margin: 0; }
  .cg-result-line { font-size: 14px; }
  .cg-result-line b { font-size: 17px; }
  body.chess-stage .cg-bar { flex: none; position: static; margin-top: 0; padding: 2px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .cg-act { min-height: 54px; position: relative; }
  .cg-act.confirm { flex: 1.7; margin: 6px 2px; border-radius: 12px; background: #ff5d6e; color: #fff; flex-direction: row; gap: 6px; font-size: 13px; }
  .cg-act.confirm .sb-ico { width: 20px; height: 20px; }

  /* ---- lekcja i gra z trenerem: dymek trenera i zadanie nad planszą, licznik pod planszą */
  body.chess-stage .learn-stage > .learn-top { display: contents; }
  body.chess-stage .learn-top > .learn-back { display: none; }
  body.chess-stage .learn-top > #ln-task, body.chess-stage .learn-top > #ln-msg, body.chess-stage .learn-top > #lc-msg, body.chess-stage .learn-top > #lc-warn-box { order: 1; margin: 8px 12px 0; }
  body.chess-stage .learn-top > :is(#ln-msg, #lc-msg):empty { display: none; }
  body.chess-stage .learn-top > #ln-msg + #ln-meter { margin-top: 0; }
  body.chess-stage .learn-top > .cs-board, body.chess-stage .learn-stage > .cs-board { order: 2; margin-top: 8px; }
  body.chess-stage .learn-top > #ln-meter { order: 3; display: flex; align-items: center; height: 40px; padding: 0 14px; gap: 18px; }
  body.chess-stage .learn-top > #ln-result { order: 4; margin: 0 12px 8px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
  body.chess-stage .learn-top > #ln-result p { margin: 4px 0; }
  body.chess-stage .learn-top > #ln-result .actions { display: flex; gap: 8px; margin-top: 8px; }
  body.chess-stage .learn-top > #ln-result .actions .btn { flex: 1 1 0; min-height: 44px; }
  body.chess-stage .learn-top .learn-task { padding: 6px 10px; font-size: 14px; }
  body.chess-stage .learn-top .learn-coach { gap: 8px; }
  body.chess-stage .learn-top .learn-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 16px; }
  body.chess-stage .learn-top .learn-bubble { padding: 6px 10px; font-size: 13.5px; line-height: 1.35; }
  body.chess-stage .learn-top .learn-bubble::before { font-size: 10.5px; margin-bottom: 1px; }
  body.chess-stage .learn-top .learn-warn { padding: 8px 10px; }
  body.chess-stage .learn-top .learn-warn p { margin: 2px 0 6px; font-size: 13.5px; }
  body.chess-stage .learn-top .learn-warn .learn-actions { order: 0; padding: 0; border: 0; background: transparent; }
  body.chess-stage .learn-top .learn-warn .learn-actions .btn { min-height: 38px; }
  body.chess-stage .learn-stage .chess-side .learn-panel > .learn-actions:not([hidden]) { display: flex; }

  /* ---- zadania: polecenie z rankingiem zadania nad planszą; twój ranking, seria i kafelki sesji pod planszą */
  body.chess-stage .pz-layout .chess-main { display: contents; }
  body.chess-stage .pz-layout .pz-prompt { order: 1; height: 52px; padding: 0 12px; gap: 10px; }
  body.chess-stage .pz-prompt-main { flex: 1; min-width: 0; }
  body.chess-stage .pz-prompt-main b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.chess-stage .pz-prompt-main small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.chess-stage .pz-dot { width: 22px; height: 22px; }
  body.chess-stage .pz-prompt-rt { display: inline-flex; flex: none; padding: 4px 9px; border-radius: 99px; background: #2a1f3d; color: #cdb6ff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
  body.chess-stage .pz-layout .cs-board { order: 2; }
  body.chess-stage .pz-layout .chess-side > .panel > #pz-ratings { order: 3; display: flex; align-items: center; flex-wrap: nowrap; height: 40px; margin: 0; padding: 0 12px; gap: 8px; }
  body.chess-stage #pz-ratings .pz-chip { padding: 3px 8px; }
  body.chess-stage #pz-ratings .pz-chip.task { display: none; }
  body.chess-stage .pz-layout :is(.pz-viewbar, #pz-history) { order: 4; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 4px; height: 34px; margin: 0; padding: 0 12px; overflow: hidden; }
  body.chess-stage .pz-layout .pz-viewbar .pz-history { justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; padding: 4px 4px 4px 0; mask-image: linear-gradient(90deg, transparent, #000 24px); }
  body.chess-stage .pz-history .pz-streak { order: -1; margin-right: auto; }
  body.chess-stage .pz-history > * { flex: none; }
  body.chess-stage .pz-layout .chess-side > .panel > #pz-msg { order: 5; display: block; }
  body.chess-stage #pz-msg:empty { display: none; }
  body.chess-stage #pz-msg .alert { margin: 0; padding: 8px 12px; border-radius: 0; font-size: 13.5px; }
  body.chess-stage .pz-layout .chess-side > .panel > .pz-actions { display: flex; }

  /* ---- gra z komputerem: gracze nad planszą, przyciski pod nią, wynik między nimi; ustawienia w arkuszu */
  body.chess-stage .pc-layout .chess-main, body.chess-stage .pc-layout .pc-stage { display: contents; }
  body.chess-stage .pc-hud.top { order: 1; height: 52px; padding: 0 10px; }
  body.chess-stage .pc-layout .cs-board { order: 2; }
  body.chess-stage .pc-layout #pc-help { display: none; }
  body.chess-stage .pc-layout .chess-side > .panel > #pc-status { order: 3; display: block; }
  body.chess-stage #pc-status:empty { display: none; }
  body.chess-stage #pc-status > * { margin: 0; padding: 6px 12px; font-size: 14px; }
}
/* niski ekran (np. iPhone SE w Safari): bez paska ruchów - ruchy są pod „Ruchy”, oferty remisu i rewanżu zostają */
@media (max-width: 860px) and (max-height: 620px) {
  body.chess-stage .cg-strip:not(.has-offer) { display: none; }
  body.chess-stage .pz-layout :is(.pz-viewbar, #pz-history) { height: 30px; }
  body.chess-stage .learn-top > #ln-meter { height: 32px; }
}
@keyframes cs-pulse { 50% { box-shadow: 0 0 0 4px #ff5d6e55; } }
@media (prefers-reduced-motion: reduce) { .cg .clock.low.running { animation: none; } }

/* Nauka - trener i debiuty na poziomach */
.learn-seg.coach-levels { flex-wrap: wrap; }
.learn-seg.coach-levels button { flex: 1 1 28%; min-width: 0; white-space: nowrap; }
.op-lv { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  color: var(--lv); background: color-mix(in srgb, var(--lv) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 45%, transparent); }
.op-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.op-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.op-filter .learn-seg { flex: 0 0 auto; }
.op-filter .learn-seg button { padding: 7px 14px; white-space: nowrap; }
.pz-tip { margin: 10px 0 0; font-size: 13px; color: var(--muted2); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pz-tip a { color: var(--blue); font-weight: 700; }

/* Nauka - nowe typy lekcji (theory, choice, calc, drill, game, set: pages/chessLearnTypes.js) */
.learn-top:has(#lt-extra) > #ln-task:empty, .lt-extra:empty { display: none; }
.lt-extra { display: flex; flex-direction: column; gap: 8px; }
.lt-options { display: grid; gap: 6px; }
.lt-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.lt-opt:hover:not(:disabled), .lt-opt:focus-visible { border-color: #49c8ff; background: #10263d; }
.lt-opt:disabled { cursor: default; }
.lt-opt.wrong { border-color: #6a2533; background: #2a111a; color: #ffb6bf; }
.lt-opt.right { border-color: #1f6a52; background: #0c2a26; color: #c8f5e1; }
.lt-opt.out { opacity: .4; text-decoration: line-through; }
.lt-key { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #0a1a2c; border: 1px solid var(--line2); font-size: 12px; font-weight: 800; color: var(--muted2); }
.lt-opt.right .lt-key { background: var(--green); border-color: var(--green); color: #04241a; }
.lt-opt.wrong .lt-key { background: #ff5d6e; border-color: #ff5d6e; color: #fff; }
.lt-label { flex: 1; min-width: 0; }
.lt-arrow-ico { flex: none; color: #49c8ff; font-weight: 800; }
.lt-line { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 11px; background: #0a1a2c; border: 1px solid var(--line); }
.lt-line b { font-size: 15px; letter-spacing: .02em; word-spacing: .15em; font-variant-numeric: tabular-nums; }
.lt-line-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-line-actions .btn { flex: 1 1 0; min-height: 40px; }
.lt-pips { display: inline-flex; align-items: center; gap: 4px; }
.lt-pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); font-style: normal; }
.lt-pips i.on { background: var(--green); } .lt-pips i.miss { background: #ff5d6e; } .lt-pips i.cur { background: #49c8ff; box-shadow: 0 0 0 2px #49c8ff44; }
.lt-pips i.q { width: auto; height: auto; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 800; line-height: 15px; color: var(--muted2); }
.lt-pips i.q.cur { color: #04182a; }
.lt-q { display: block; margin-top: 2px; color: var(--gold); }
.lt-rt { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #2a1f3d; color: #cdb6ff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lt-rt:empty { display: none; }
.learn-task .pz-dot { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.lt-game-head { display: flex; flex-direction: column; gap: 2px; }
.lt-moves { max-height: 260px; overflow-y: auto; }
.lt-moves .mv.lt-ok { color: var(--green); } .lt-moves .mv.lt-miss { color: #ff8f9b; }
.lt-moves .mv.lt-hidden { color: var(--muted); cursor: default; } .lt-moves .mv.lt-hidden:hover { background: none; }
.learn-actions .btn.lt-reveal { border-color: #6b5220; color: var(--gold); }
@media (max-width: 860px) {
  .lt-options { grid-template-columns: 1fr 1fr; }
  .lt-opt { min-height: 40px; padding: 6px 9px; gap: 7px; font-size: 13px; }
  .lt-key { width: 22px; height: 22px; }
  body.chess-stage .learn-top > #lt-extra { order: 3; margin: 0 12px 8px; gap: 6px; }
  body.chess-stage .learn-top > #lt-extra:empty { display: none; }
  body.chess-stage .learn-top > #ln-meter .lt-pips { display: none; }
  body.chess-stage .lt-line { padding: 5px 10px; }
  body.chess-stage .lt-line .eyebrow { display: none; }
  body.chess-stage .lt-line b { font-size: 13.5px; }
  body.chess-stage .lt-line-actions .btn { min-height: 36px; font-size: 13px; }
  body.chess-stage .learn-top > #ln-meter { gap: 12px; font-size: 12.5px; }
  body.chess-stage .lt-q { margin-top: 0; font-size: 13px; }
  body.chess-stage .learn-actions #lt-prev { flex: 0 0 52px; }
  body.chess-stage .learn-actions:has(#lt-jump) .btn .muted, body.chess-stage .learn-actions .lt-long { display: none; }
  body.chess-stage .learn-top:has(#ln-result:not([hidden])) > #lt-extra .lt-opt:not(.right) { display: none; }
  body.chess-stage .learn-top:has(#ln-result:not([hidden])) > #lt-extra .lt-options { grid-template-columns: 1fr; }
}

/* Nauka - test, egzaminy, trening dnia (pages/chessLearnExam.js): egzamin i „mój poziom” na ścieżce, ekrany testu i egzaminu,
   kropki wyników zadań, licznik czasu, karty treningu dnia, odznaka poziomu w profilu. Kolor poziomu w --lv (.lv1 ... .lv5). */
.lx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 16px; }
.lx-exam { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; max-width: 520px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.lx-exam:hover { border-color: color-mix(in srgb, var(--lv, var(--blue)) 60%, var(--line)); }
.lx-exam-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #0a1726; font-size: 18px; }
.lx-exam-body { display: grid; gap: 3px; min-width: 0; }
.lx-exam-body small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.lx-exam-body .learn-bar { margin-top: 3px; height: 5px; }
.lx-exam-body .learn-bar i { background: var(--lv, var(--blue)); }
.lx-exam.open { border-color: var(--lv, var(--blue)); background: color-mix(in srgb, var(--lv, var(--blue)) 9%, var(--panel)); }
.lx-exam.open .lx-exam-ic { background: var(--lv, var(--blue)); color: #04111f; }
.lx-exam.passed .lx-exam-ic { background: color-mix(in srgb, var(--green) 22%, #0a1726); color: var(--green); }
.lx-exam.passed b { color: var(--green); }
.lx-exam.locked { opacity: .85; }
.lx-mine { color: var(--lv, var(--green)); font-weight: 800; font-size: 14px; }
.lx-testlink { flex-basis: 100%; }
.lx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.lx-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 6px; border-radius: 99px; font-size: 13px; font-weight: 800;
  border: 1px solid var(--lv); color: var(--lv); background: color-mix(in srgb, var(--lv) 10%, var(--panel)); }
.lx-badge i { font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--lv); color: #04111f; font-size: 15px; }
.lx-login p { margin: 0 0 12px; color: var(--muted2); }
.lx-intro { display: grid; gap: 14px; max-width: 760px; }
.lx-rules { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted2); }
.lx-rules b { color: var(--text); }
.lx-result-mini { display: grid; gap: 2px; padding: 10px 14px; border-left: 3px solid var(--lv); background: #0a1726; border-radius: 0 12px 12px 0; }
.lx-result-mini .eyebrow { color: var(--lv); }
.lx-result-mini small { color: var(--muted); }
.lx-final { max-width: 640px; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 28px 20px; border-color: color-mix(in srgb, var(--lv) 50%, var(--line)); }
.lx-final .eyebrow { color: var(--lv); }
.lx-final h2 { font-size: 26px; }
.lx-final p { margin: 0; max-width: 60ch; color: var(--muted2); }
.lx-final .actions { justify-content: center; margin-top: 8px; }
.lx-final-ic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; font-size: 38px; background: color-mix(in srgb, var(--lv) 18%, #0a1726); color: var(--lv); box-shadow: 0 0 0 2px var(--lv); }
.lx-final:not(.passed) .lx-final-ic:not(:empty) { font-size: 34px; }
.lx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lx-head .eyebrow { flex: 1 1 auto; font-size: 11.5px; letter-spacing: 1.2px; }
.lx-dots { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.lx-dots i { width: 14px; height: 6px; border-radius: 99px; background: #1b3550; }
.lx-dots i.cur { background: var(--blue); }
.lx-dots i.ok { background: var(--green); }
.lx-dots i.bad { background: var(--red); }
.lx-timer { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 14px; padding: 2px 10px; border-radius: 99px; background: #0a1726; border: 1px solid var(--line); }
.lx-timer.low { color: var(--red); border-color: var(--red); }
.lx-top { margin-bottom: 8px; }
.lx-prompt { margin-bottom: 8px; }
.lx-panel p { margin: 0 0 10px; }
.lx-today-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; border-left: 3px solid var(--lv); padding-left: 14px; }
.lx-today-head .eyebrow { color: var(--lv); }
.lx-goal { display: grid; gap: 4px; min-width: 170px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.lx-goal > span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.lx-goal b { font-size: 24px; }
.lx-goal b small { font-size: 14px; color: var(--muted); }
.lx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lx-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.lx-card > .btn { grid-column: 1 / -1; justify-self: start; }
.lx-card-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #0a1726; font-size: 19px; }
.lx-card-body { display: grid; gap: 3px; align-content: start; min-width: 0; }
.lx-card-body small { color: var(--muted); font-size: 12.5px; }
.lx-card.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.lx-card.ok .lx-card-ic { background: color-mix(in srgb, var(--green) 22%, #0a1726); color: var(--green); }
.lx-note { margin-top: 14px; }
@media (max-width: 860px) {
  .lx-actions { gap: 10px; }
  .lx-exam { flex-basis: 100%; max-width: none; }
  .lx-actions > .btn { flex: 1 1 auto; }
  .lx-today-head { align-items: stretch; }
  .lx-goal { flex: 1 1 100%; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
  .lx-goal .learn-pips, .lx-goal small { grid-column: 1 / -1; }
  .lx-cards { grid-template-columns: 1fr; }
  .lx-card { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; }
  .lx-card > .btn { grid-column: auto; justify-self: end; min-height: 40px; }
  .lx-final { padding: 22px 14px; }
  .lx-final h2 { font-size: 22px; }
  /* tryb planszy: pasek egzaminu, polecenie i dymek nad planszą (jak w lekcjach) */
  body.chess-stage .learn-top > :is(.lx-top, .lx-prompt, #lx-msg, .learn-task) { order: 1; margin: 6px 12px 0; }
  body.chess-stage .learn-top > #lx-msg:empty { display: none; }
  body.chess-stage .lx-head .eyebrow { font-size: 10.5px; letter-spacing: .8px; }
  body.chess-stage .lx-prompt { padding: 6px 10px; }
}

/* --- reklamy AdSense (public/js/ads.js, projekt: doc/12-reklamy.md) ---
   Podpis "Reklama", link do Premium, ramka w kolorach portalu, stały rozmiar. Pusty blok (Google nie zwrócił reklamy) znika. */
.ad-box { display: grid; gap: 6px; width: 100%; margin: 18px auto; min-width: 0; }
.ad-box.ad-empty { display: none; }
.ad-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; line-height: 1.2; }
.ad-label { color: #7f95ab; font-weight: 750; letter-spacing: 1.6px; text-transform: uppercase; }
.ad-hide { color: var(--gold); font-weight: 650; }
.ad-hide:hover { text-decoration: underline; }
.ad-area { border: 1px solid #16304a; border-radius: 10px; background: #0a1626; overflow: hidden; display: grid; place-items: center; }
.ad-area ins { width: 100%; }
/* poziomy: 728 x 90 na komputerze, 320 x 100 na telefonie */
.ad-home, .ad-after { max-width: 728px; }
.ad-home .ad-area, .ad-after .ad-area { min-height: 90px; }
/* prostokąt 300 x 250 */
.ad-aside, .ad-lobby { max-width: 300px; }
.ad-aside .ad-area, .ad-lobby .ad-area { min-height: 250px; }
/* w treści artykułu */
.ad-article { max-width: 680px; margin: 26px auto; }
.ad-article .ad-area { min-height: 120px; max-height: 360px; }
/* kolumna boczna list: tylko szerokie ekrany (węższe - kolumna spada pod treść, reklama byłaby drugą na stronie) */
.ad-aside { display: none; }
@media (min-width: 1200px) { .ad-aside { display: grid; position: sticky; top: calc(var(--head, 72px) + 16px); } .ad-aside.ad-empty { display: none; } }
@media (max-width: 760px) {
  .ad-home .ad-area, .ad-after .ad-area { min-height: 100px; }
  .ad-box { margin: 14px auto; }
}
.ad-holder { display: none; }

/* Reklama po zakończonej partii (lobbyKit.js afterGameSlot): pod całym ekranem gry, ≥150 px od planszy i przycisków (zasady AdSense dla gier) */
.game-after-ad > .ad-after { margin-top: 150px; }

/* --- komunikat zgody: pliki cookie i reklamy (public/js/consent.js) ---
   Jeden komunikat portalu: Akceptuję / Odrzucam / Ustawienia; okno ustawień z przełącznikami kategorii opcjonalnych. */
.cookie-bar.consent-bar { max-width: 640px; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px; }
.consent-text b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.consent-text p { margin: 0; line-height: 1.5; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* "Akceptuję" i "Odrzucam" tej samej wielkości - odmowa równie łatwa jak zgoda */
.consent-actions [data-consent="accept"], .consent-actions [data-consent="reject"] { min-width: 120px; }
@media (max-width: 640px) {
  .cookie-bar.consent-bar { flex-direction: column !important; align-items: stretch !important; bottom: calc(var(--tabbar, 0px) + 12px); }
  .consent-actions .btn { flex: 1; }
  .consent-actions [data-consent="settings"] { flex-basis: 100%; order: 3; }
}
.consent-settings { display: grid; gap: 12px; }
.consent-cat { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b1828; cursor: pointer; }
.consent-cat.locked { cursor: default; opacity: .8; }
.consent-txt { flex: 1; display: grid; gap: 3px; min-width: 0; }
.consent-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.consent-switch { appearance: none; flex: none; width: 42px; height: 24px; margin-top: 2px; border-radius: 99px; background: var(--line2); position: relative; cursor: pointer; transition: background .15s; }
.consent-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.consent-switch:checked { background: var(--action); }
.consent-switch:checked::after { transform: translateX(18px); }
.consent-switch:disabled { cursor: not-allowed; opacity: .6; }
.consent-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* --- Państwa-miasta (#/panstwa) – lobby, pokój, czat i tabele z klas ludo-* Chinczyka, ekrany gry pm-* ---
   Telefon: ekran pisania na wąskim ekranie zajmuje widoczną część okna (--pm-vv-top / --pm-vv-h z visualViewport),
   więc pasek z literą jest u góry, a STOP tuż nad klawiaturą; pola 17 px (iOS nie powiększa), przyciski ≥ 44 px. */
.pm-view { --pm: #3f9a5a; --pm-ink: #f6e7b0; }
.pm-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 9px; font: 800 26px/1 'Russo One', system-ui, sans-serif;
  color: #3a2a06; background: linear-gradient(180deg, #f8ebb9, #d9b45a); box-shadow: inset 0 -3px 0 #0004, 0 4px 12px #0006; }
.pm-tile.huge { width: 140px; height: 140px; font-size: 92px; border-radius: 22px; }
.pm-sheet { background: #f4f1e6; color: #1d2a3a; border-radius: 6px; padding: 8px 10px 12px; transform: rotate(2deg); max-width: 100%; overflow: hidden;
  box-shadow: 0 16px 34px #000a; background-image: linear-gradient(#d6e2ec 1px, transparent 1px); background-size: 100% 24px; }
.pm-sheet table { border-collapse: collapse; font-size: 12px; }
.pm-sheet th { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #5a6878; padding: 2px 5px; text-align: left; }
.pm-sheet td { font: 600 15px/1.6 'Segoe Print', 'Comic Sans MS', cursive; padding: 0 5px; white-space: nowrap; }
.pm-sheet td.l { color: #c43a4b; border-right: 2px solid #d9465a; font-family: 'Russo One', sans-serif; }
.pm-sheet td.p { color: #2c7a45; }
.pm-weekly { margin-bottom: 12px; }
.pm-cats { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pm-cats legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.pm-cat { display: inline-flex; }
.pm-cat input { position: absolute; opacity: 0; pointer-events: none; }
.pm-cat span { padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 99px; border: 1px solid var(--line2); background: #0b1828; cursor: pointer; font-size: 14px; }
.pm-cat input:checked + span { background: #173c27; border-color: var(--pm, #3f9a5a); color: #fff; }
.pm-cat input:disabled + span { opacity: .45; cursor: not-allowed; }
.pm-cat input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* moje partie */
.pm-mine-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pm-mine { margin: 0; display: grid; gap: 6px; align-content: start; }
.pm-mine.hot { border-color: var(--gold); box-shadow: 0 0 0 1px #f2b84b55; }
.pm-mine p { margin: 0; }
.pm-mine-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pm-cta { min-height: 46px; display: grid; place-items: center; background: var(--gold); border-color: var(--gold); color: #2a1d00; font-weight: 800; }

/* partia */
.pm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pm-side > .panel + .panel { margin-top: 14px; }
.pm-stage { min-width: 0; }
.pm-card { display: grid; gap: 10px; }
.pm-card h2 { margin: 0; }
.pm-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.pm-back { display: none; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: var(--muted2); text-decoration: none; font-size: 20px; }
.pm-top-mid { display: grid; flex: 1; min-width: 0; }
.pm-timer { font: 700 28px/1 'Russo One', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pm-timer.red { color: var(--red); }
.pm-sub { color: var(--muted); font-size: 12px; }
.pm-top-score { display: grid; text-align: right; }
.pm-top-score b { color: var(--gold); }
.pm-write { display: flex; flex-direction: column; gap: 8px; }
.pm-write.alarm { animation: pm-alarm .9s ease-out; }
@keyframes pm-alarm { 0%, 40% { box-shadow: inset 0 0 0 4px var(--red); background: #3a0f16; } 100% { box-shadow: none; } }
.pm-write.stopped .pm-timer { color: var(--red); }
.pm-chips { display: flex; gap: 5px; }
.pm-chips .pm-chip { flex: 1; min-width: 0; min-height: 36px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted);
  font: 700 14px/1 system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-chip.on { background: var(--pm, #3f9a5a); border-color: var(--pm, #3f9a5a); color: #fff; }
.pm-chip.warn { background: #4a3510; border-color: var(--gold); color: #ffe2a0; }
.pm-chip.cur { outline: 2px solid var(--blue); outline-offset: 1px; color: #fff; }
.pm-others { color: var(--muted); font-size: 12px; min-height: 16px; }
.pm-fields { display: grid; gap: 8px; margin: 0; }
.pm-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.pm-field label { color: var(--muted2); font-size: 14px; }
.pm-field.off { display: none; }
.pm-input { font-size: 17px !important; min-height: 46px; padding: 8px 12px; touch-action: manipulation; }
.pm-hint { grid-column: 2; color: var(--gold); font-size: 12px; }
.pm-hint:empty { display: none; }
.pm-bar { display: flex; gap: 8px; }
.pm-stop, .pm-send { flex: 1; min-height: 52px; font: 800 22px/1 'Russo One', system-ui, sans-serif; letter-spacing: 1px; border-radius: 12px; }
.pm-stop { background: var(--red); border-color: var(--red); color: #fff; }
.pm-stop:disabled { opacity: .55; }
.pm-stop small, .pm-send small { font-size: 14px; opacity: .85; }
.pm-send { font-size: 18px; }
.pm-fixed { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 12px; border: 1px dashed var(--line2); color: var(--muted); }
.pm-one-nav { display: flex; gap: 6px; }
.pm-one-nav .btn { min-width: 48px; min-height: 52px; font-size: 22px; }
.pm-write.one .pm-field { grid-template-columns: 1fr; }
.pm-write.one .pm-field label { font-size: 18px; font-weight: 700; color: #fff; }
.pm-write.one .pm-input { font-size: 22px !important; min-height: 58px; }
.pm-stopinfo { margin: 0; color: var(--red); font-weight: 700; min-height: 0; }
.pm-stopinfo:empty { display: none; }
.pm-onetoggle { font-size: 13px; color: var(--muted); }
.pm-reveal { text-align: center; justify-items: center; }
.pm-reveal-tile .pm-tile { width: 96px; height: 96px; font-size: 60px; border-radius: 18px; }
.pm-progress { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.pm-flash { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; background: #02060c99; pointer-events: none; animation: pm-flash 1.5s ease forwards; }
.pm-flash .pm-tile { animation: pm-pop 1.5s ease forwards; }
@keyframes pm-flash { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pm-pop { 0% { transform: scale(.4) rotate(-12deg); } 20% { transform: scale(1.08) rotate(3deg); } 30%, 100% { transform: scale(1) rotate(0); } }

/* sprawdzanie */
.pm-vote-screen { display: grid; gap: 10px; }
.pm-hint-box { margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line2); background: var(--panel3); color: var(--muted2); font-size: 13px; }
.pm-catcard h3 { margin: 0 0 8px; }
.pm-items { display: grid; gap: 6px; }
.pm-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); }
.pm-item > div { display: grid; min-width: 0; }
.pm-item b { font-size: 17px; overflow-wrap: anywhere; }
.pm-item small { color: var(--muted); font-size: 12px; }
.pm-item.rej { border-color: var(--red); opacity: .8; }
.pm-item.rej b { text-decoration: line-through; text-decoration-color: var(--red); }
.pm-item.disputed { border-color: var(--gold); }
.pm-item em { font-style: normal; font-size: 12px; white-space: nowrap; }
.pm-item em.ok { color: var(--green); }
.pm-item em.bad { color: var(--red); }
.pm-item em.wait { color: var(--muted); }
.pm-vote { display: flex; gap: 6px; flex: none; }
.pm-vote .btn { min-width: 46px; min-height: 44px; padding: 0 8px; font-size: 18px; }
.pm-vote .btn.on { background: #4a1820; border-color: var(--red); }
.pm-vote .btn.on-up { background: #173c27; border-color: var(--green); }
.pm-catnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pm-catnav .btn { min-height: 40px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-dots { display: flex; gap: 5px; }
.pm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); }
.pm-dots i.todo { background: var(--gold); }
.pm-dots i.on { background: var(--blue); }
.pm-done { min-height: 52px; }

/* wyniki */
.pm-results { display: grid; gap: 10px; }
.pm-results > p { margin: 0; }
.pm-score { font-variant-numeric: tabular-nums; }
.pm-score th, .pm-score td { padding: 6px 5px; }
.pm-score td.s15 { color: var(--green); font-weight: 800; }
.pm-score td.s10 { color: var(--text); }
.pm-score td.s5 { color: var(--gold); }
.pm-score td.s0 { color: var(--red); }
.pm-mine-ans { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-mine-ans span { display: grid; padding: 6px 9px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); font-size: 14px; }
.pm-mine-ans small { color: var(--muted); font-size: 11px; }
.pm-mine-ans .s15 { border-color: var(--green); }
.pm-mine-ans .s0 { opacity: .7; }
.pm-standings { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.pm-standings li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 8px; background: var(--panel2); }
.pm-standings li.me { box-shadow: inset 0 0 0 1px var(--blue); }
.pm-standings li.left { opacity: .5; text-decoration: line-through; }

/* na jednym urządzeniu */
.pm-local-write { min-height: calc(100dvh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; text-align: center; }
.pm-local-head { width: 100%; max-width: 520px; display: flex; justify-content: space-between; color: var(--muted); }
.pm-ring { --p: 1; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font: 700 40px/1 'Russo One', sans-serif; font-variant-numeric: tabular-nums;
  background: radial-gradient(closest-side, var(--bg) 82%, transparent 83%), conic-gradient(var(--gold) calc(var(--p) * 360deg), var(--panel2) 0); }
.pm-ring.red { color: var(--red); }
.pm-local-cats { color: var(--muted2); max-width: 520px; margin: 0; }
.pm-stop.huge { width: 100%; max-width: 520px; min-height: 76px; font-size: 32px; }
.pm-local-row { display: flex; gap: 10px; }
.pm-local-row .btn { min-height: 46px; }
.pm-lscore { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 8px; align-items: center; }
.pm-lscore .input { font-size: 18px; min-height: 46px; text-align: center; }
.pm-lscore span { display: flex; gap: 4px; }
.pm-lscore .btn { min-height: 44px; min-width: 48px; }
.pm-fix { width: 150px; min-height: 36px; }

@media (max-width: 980px) {
  .pm-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* ekran pisania nad klawiaturą: widoczna część okna, pasek u góry, pola przewijane, STOP na dole */
  body.pm-writing { overflow: hidden; }
  body.pm-writing .pm-write { position: fixed; left: 0; right: 0; top: var(--pm-vv-top, 0px); height: var(--pm-vv-h, 100dvh); z-index: 60; margin: 0;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px)); background: var(--bg); gap: 6px; }
  body.pm-writing .pm-fields { flex: 1; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-bottom: 4px; }
  body.pm-writing .pm-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.pm-writing .pm-onetoggle { display: none; }
  body.pm-writing .pm-back { display: grid; }
  body.pm-writing .pm-top { padding: 6px 8px; border-radius: 12px; }
  .pm-field { grid-template-columns: 1fr; gap: 2px; }
  .pm-field label { font-size: 12px; }
  .pm-lscore { grid-template-columns: minmax(0, 1fr) 80px; }
  .pm-lscore span { grid-column: 1 / -1; }
  .pm-lscore span .btn { flex: 1; }
}
@media (max-width: 760px) and (max-height: 520px) {
  body.pm-writing .pm-chips, body.pm-writing .pm-others { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-flash, .pm-flash .pm-tile, .pm-write.alarm { animation: none; }
  .pm-flash { opacity: 0; }
}
.pm-score td:first-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .pm-score th, .pm-score td { padding: 6px 3px; font-size: 13px; }
  .pm-score td:first-child { max-width: 74px; }
  .pm-score th { text-transform: none; letter-spacing: 0; }
}