/* SIROCCO: lobby — jeden styl całego interfejsu: „nocne płyty” jak pasek u góry i panel „Ustaw mecz”.
   Fioletowa noc, ramki 2 px, twarde cienie przesunięte w dół, pikselowa czcionka w nagłówkach, przyciskach
   i liczbach, czytelna czcionka w opisach. Akcent: dynia (pomarańcz). Pieniądze: toksyczna zieleń.
   Wybór w przełącznikach i zakładkach: kremowy klawisz jak na pasku. Rzadkości skórek: błękit, fiolet, złoto. */
:root {
  --night-a: rgba(34, 21, 48, 0.94);
  --night-b: rgba(14, 9, 21, 0.96);
  --night-line: rgba(241, 231, 210, 0.11);
  --night-line-2: rgba(241, 231, 210, 0.2);
  --pumpkin: #ff8f2e;
  --pumpkin-hi: #ffc070;
  --pumpkin-lo: #d9600f;
  --pumpkin-sh: #6e2e06;
  --pumpkin-line: rgba(255, 143, 46, 0.34);
  --toxic: #7dffa8;
  --toxic-lo: #1d5a34;
  --bone: #f1e7d2;
  --bone-2: rgba(241, 231, 210, 0.72);
  --bone-3: rgba(241, 231, 210, 0.48);
  --bone-4: rgba(241, 231, 210, 0.28);
  --violet: #b98cff;
  --violet-hi: #d9c7ff;
  --red: #ff7a5c;
  --red-hi: #ffa48d;
  --t: #ff9a3c;
  --ct: #6fb3ff;
  --ok: #7dffa8;
  --bad: #ff7a5c;
  --card: rgba(255, 255, 255, 0.035);
  --well: rgba(5, 2, 10, 0.45);
  --hard: rgba(4, 2, 8, 0.72);
  --cream: linear-gradient(180deg, #fff6e3 0%, #f1e3c4 58%, #e2cda5 100%);
  --cream-sh: inset 0 -3px 0 rgba(140, 96, 52, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 #1a0f08;
  --pumpkin-bg: linear-gradient(180deg, #ffd384, #ff9d3e 50%, #d9600f);
  --pixel: "Press Start 2P", "Courier New", monospace;
  --ui: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%232b1204' d='M7 2h1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v1h1v1h1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #0c0812 linear-gradient(180deg, #22142e 0%, #2a1730 55%, #120b1a 100%);
  color: var(--bone);
  font: 500 16px/1.4 var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { fill: currentColor; }
:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
h2[tabindex="-1"]:focus { outline: none; }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 1px 5px 0; font: 400 8px/1 var(--pixel); color: var(--bone-2);
  background: rgba(255, 255, 255, 0.05); border: 2px solid var(--night-line-2); border-radius: 3px; box-shadow: 0 3px 0 var(--hard);
}
/* pikselowe grafiki: ostre krawędzie w każdym rozmiarze */
.px, .pxi, .ava-svg, .scr-ic-svg, .art-svg, .fig-svg { display: block; shape-rendering: crispEdges; }
.pxi { flex: none; width: 1em; height: 1em; }
/* paski przewijania: cienkie, w kolorze dyni */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 143, 46, 0.32) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 143, 46, 0.3); border: 3px solid transparent; background-clip: padding-box; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 143, 46, 0.5); }
::-webkit-scrollbar-track { background: transparent; }
@keyframes livePx { 50% { opacity: 0.25; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes bob { 50% { transform: translateY(-6px); } }


/* ---------- scena ---------- */
#stage {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  filter: saturate(1.12) contrast(1.05);
  touch-action: none;
}
.locker-open #stage { cursor: grab; }
.locker-open #stage:active { cursor: grabbing; }
.grade {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(8, 5, 14, 0.6) 100%),
    linear-gradient(180deg, rgba(9, 6, 16, 0.55) 0%, rgba(9, 6, 16, 0) 16%),
    linear-gradient(0deg, rgba(10, 7, 12, 0.86) 0%, rgba(10, 7, 12, 0.45) 18%, rgba(10, 7, 12, 0) 34%),
    radial-gradient(40% 36% at 50% 8%, rgba(255, 214, 150, 0.07), rgba(255, 214, 150, 0) 70%);
}
.no-webgl .grade { background: linear-gradient(0deg, rgba(14, 9, 5, 0.86) 0%, rgba(14, 9, 5, 0) 40%); }

/* ---------- górny pasek: zakładki lobby po lewej, konto i portfel po prawej ----------
   Obie części to „nocne” płyty jak bilet meczu na dole: fioletowa noc, 2 px ramki, twarde cienie i pikselowa czcionka.
   Wybrana zakładka to kremowy klawisz, który przesuwa się między zakładkami (Q i E przełączają jak w grach). */
:root { --bar-top: 18px; --bar-h: 52px; --bar-end: calc(var(--bar-top) + var(--bar-h) + var(--safe-t)); }
.corner { position: fixed; top: calc(var(--bar-top) + var(--safe-t)); z-index: 9; display: flex; align-items: center; gap: 12px; }
.tl { left: 22px; }
.tr { right: 22px; }

.topnav, .tn-right {
  height: var(--bar-h); display: flex; align-items: center; padding: 4px;
  background: linear-gradient(180deg, rgba(34, 21, 48, 0.86), rgba(14, 9, 21, 0.92));
  border: 2px solid rgba(241, 231, 210, 0.11); border-radius: 4px;
  box-shadow: 0 4px 0 rgba(4, 2, 8, 0.6), 0 12px 30px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}
.topnav { gap: 2px; }
.tn-tabs { position: relative; display: flex; align-items: stretch; height: calc(var(--bar-h) - 12px); gap: 2px; }

/* zakładka: pikselowa ikona + nazwa */
.tn-tab {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 14px;
  font: 400 12px/1 var(--pixel); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  color: var(--bone-2); background: none; border: 0; border-radius: 3px;
  transition: color .22s, background .15s, transform .12s;
}
.tn-ic { flex: none; display: block; color: var(--bone-3); shape-rendering: crispEdges; transition: color .22s, transform .15s; }
.tn-l { padding-top: 2px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); transition: text-shadow .22s; }
.tn-tab:hover:not(.on) { color: var(--bone); background: rgba(255, 143, 46, 0.09); }
.tn-tab:hover:not(.on) .tn-ic { color: var(--pumpkin-hi); transform: translateY(-1px); }
/* zębatka ustawień: gładka (jak dawniej w prawym rogu), obraca się po najechaniu */
.tn-ic.tn-gear { shape-rendering: geometricPrecision; transition: color .22s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.tn-tab:hover .tn-ic.tn-gear { transform: rotate(45deg); }
.tn-tab:active { transform: translateY(1px); }
.tn-tab:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.tn-tab.on { color: #2b1204; }
.tn-tab.on .tn-ic { color: var(--pumpkin-lo); }
.tn-tab.on .tn-l { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55); }

/* kremowy klawisz pod wybraną zakładką (pozycję i szerokość ustawia lobby.js) */
.tn-pill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #fff6e3 0%, #f1e3c4 58%, #e2cda5 100%);
  box-shadow: inset 0 -3px 0 rgba(140, 96, 52, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 #1a0f08, 0 0 18px rgba(255, 196, 120, 0.22);
  transition: transform .34s cubic-bezier(.3, 1.3, .5, 1), width .34s cubic-bezier(.3, 1.3, .5, 1);
}
.tn-pill::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0) 66%) no-repeat;
  background-size: 220% 100%; background-position: 130% 0;
}
.tn-pill.shine::after { animation: tnShine .6s ease-out .1s; }
@keyframes tnShine { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -40% 0; } }

/* „nowe” (zakładka jeszcze nieodwiedzona) i licznik zaproszeń do znajomych */
.tn-dot {
  display: none; position: absolute; top: 6px; left: 30px; width: 6px; height: 6px;
  background: var(--toxic); box-shadow: 0 0 8px var(--toxic), 1px 1px 0 #0b2a17; animation: livePx 1.2s steps(2) infinite;
}
.tn-tab.new .tn-dot { display: block; }
.tn-badge {
  position: absolute; top: -8px; right: -4px; z-index: 2; min-width: 18px; height: 18px; padding: 1px 4px 0; display: grid; place-items: center;
  font: 400 8px/1 var(--pixel); color: #2b1204; background: var(--pumpkin); border: 2px solid #140d1c; border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); animation: tnBadge .35s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes tnBadge { from { transform: scale(0.4); } }

/* podpowiedź pod zakładką (po chwili najechania) */
.tn-tab::after, .tn-key::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 14px); z-index: 3; padding: 7px 10px;
  font: 600 13px/1.2 var(--ui); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--bone);
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid rgba(255, 143, 46, 0.34); border-radius: 4px;
  box-shadow: 0 3px 0 rgba(4, 2, 8, 0.7), 0 10px 24px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.tn-tab:hover::after, .tn-key:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .45s; }
@media (hover: none), (pointer: coarse) {
  .tn-tab::after { display: none; }
}

/* prawa płyta: portfel | Witaj, nick! | język */
.tn-right { gap: 0; }
.tn-sep { flex: none; align-self: center; width: 0; height: 26px; margin: 0 4px; border-left: 2px dashed rgba(241, 231, 210, 0.13); }
.tn-right .wallet, .profile-btn, .lang-btn {
  height: calc(var(--bar-h) - 12px); display: inline-flex; align-items: center; padding: 0 10px; color: var(--bone);
  background: none; border: 0; border-radius: 3px; white-space: nowrap; transition: background .15s;
}
.tn-right .wallet:hover, .profile-btn:hover, .lang-btn:hover,
.profile-btn[aria-expanded="true"], .lang-btn[aria-expanded="true"] { background: rgba(255, 143, 46, 0.09); }
.tn-right .wallet:focus-visible, .profile-btn:focus-visible, .lang-btn:focus-visible, .login-btn:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }

.wallet { gap: 10px; padding-left: 6px; }
/* larpcoin: waluta w grze (na razie tylko licznik obok portfela USDT) */
.larp { height: calc(var(--bar-h) - 12px); display: inline-flex; align-items: center; gap: 10px; padding: 0 10px 0 6px; white-space: nowrap; color: var(--bone); background: none; border: 0; border-radius: 3px; transition: background .15s; }
.larp:hover { background: rgba(255, 143, 46, 0.09); }
.larp:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.larp .larp-plus { color: #4a2604; background: #ffc94d; box-shadow: 2px 2px 0 #6e3a06; }
.larp:hover .larp-plus, .larp .larp-plus:hover { background: #ffe08a; }
.larp .larp-plus:hover { box-shadow: 3px 3px 0 #6e3a06; }
.larp-ic { flex: none; display: block; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(255, 170, 40, 0.3)); }
.larp-txt b { font: 400 12px/1 var(--pixel); letter-spacing: 0.02em; color: #ffc94d; text-shadow: 2px 2px 0 #6e3a06; }
.larp.bump .larp-ic { animation: larpBump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes larpBump { 40% { transform: scale(1.3) rotate(-12deg); } }
.larp-ic.sm { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45)); }
/* Larpcoiny w ekranie skrzynek i w skarbcu */
.larp-chip { border-color: rgba(255, 185, 61, 0.45); }
.larp-chip b { display: inline-flex; align-items: center; gap: 6px; color: #ffc94d; text-shadow: 2px 2px 0 #6e3a06; }
.larp-chip i { color: #4a2604; background: #ffc94d; }
.cx-case-tx small .larp-ic, .btn-pr .larp-ic { margin-right: 5px; }
.cx-case-tx small { color: #ffc94d; text-shadow: 2px 2px 0 #6e3a06; }
.lx { display: grid; gap: 12px; padding-top: 14px; }
.lx-bal { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: radial-gradient(90% 140% at 0% 50%, rgba(255, 185, 61, 0.18), transparent 70%), var(--well); border: 2px solid rgba(255, 185, 61, 0.35); border-radius: 4px; }
.lx-bal .larp-ic { width: 40px; height: 40px; }
.lx-bal span { display: grid; gap: 6px; }
.lx-bal small { font: 400 7px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.lx-bal b { font: 400 16px/1.4 var(--pixel); color: #ffc94d; text-shadow: 2px 2px 0 #6e3a06; }
.lx-bal .lx-rate { margin-left: auto; text-align: right; }
.lx-bal .lx-rate b { font-size: 9px; color: var(--bone); text-shadow: none; }
.lx-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lx-pack {
  display: grid; justify-items: center; gap: 7px; padding: 12px 6px 10px; color: var(--bone); background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 var(--hard); transition: transform .1s, border-color .15s, background .15s;
}
.lx-pack b { display: inline-flex; align-items: center; gap: 5px; font: 400 9px/1.5 var(--pixel); color: #ffc94d; white-space: nowrap; }
.lx-pack small { font: 400 7px/1.5 var(--pixel); color: var(--bone-3); white-space: nowrap; }
.lx-pack:hover:not(:disabled) { border-color: rgba(255, 185, 61, 0.6); background: rgba(255, 185, 61, 0.08); }
.lx-pack:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--hard); }
.lx-pack:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 600px) { .lx-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.usdt-ic {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 800 17px/1 var(--ui); color: #fff;
  background: radial-gradient(circle at 35% 30%, #6fd1b4, #26a17b 60%, #1a7a5c);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25), 0 0 12px rgba(38, 161, 123, 0.35), 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.wallet-txt { display: grid; gap: 5px; text-align: left; }
.wallet-txt b { font: 400 12px/1 var(--pixel); letter-spacing: 0.02em; color: var(--toxic); text-shadow: 2px 2px 0 var(--toxic-lo); font-variant-numeric: tabular-nums; }
.wallet-txt small:empty { display: none; }
.wallet-txt small { font: 400 7px/1 var(--pixel); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(125, 255, 168, 0.62); }
.w-plus {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding-top: 1px; font: 400 11px/1 var(--pixel); color: #0d3320;
  background: var(--toxic); box-shadow: 2px 2px 0 var(--toxic-lo); transition: transform .12s, box-shadow .12s, background .12s;
}
.wallet:hover .w-plus { background: #a6ffc4; }
.w-plus:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--toxic-lo); }
.wallet.bump .wallet-txt b { animation: bump .5s ease-out; }
@keyframes bump { 30% { color: #d2ffe4; transform: scale(1.08); } }

/* gość: przycisk logowania w kolorze dyni */
.login-btn {
  height: calc(var(--bar-h) - 14px); padding: 1px 14px 0; font: 400 10px/1 var(--pixel); text-transform: uppercase; color: #2b1204; border: 0; border-radius: 3px;
  background: linear-gradient(180deg, #ffd384, #ff9d3e 50%, var(--pumpkin-lo)); box-shadow: inset 0 2px 0 rgba(255, 242, 214, 0.6), 0 3px 0 var(--pumpkin-sh);
  white-space: nowrap; transition: filter .15s, transform .1s, box-shadow .1s;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pumpkin-sh); }

/* zalogowany: pikselowy ludzik (menu profilu) */
.profile { position: relative; }
.profile-btn { gap: 10px; padding: 0 10px 0 8px; }
.me-nick {
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px;
  font: 400 12px/1.3 var(--pixel); letter-spacing: 0.02em; text-transform: uppercase; color: var(--bone-2); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.me-nick b { font-weight: 400; color: var(--pumpkin-hi); }
.profile-btn:hover .me-nick { color: var(--bone); }
.tn-chev { flex: none; display: block; color: var(--bone-3); shape-rendering: crispEdges; transition: transform .2s, color .15s; }
.profile-btn:hover .tn-chev, .lang-btn:hover .tn-chev { color: var(--pumpkin-hi); }
.profile-btn[aria-expanded="true"] .tn-chev, .lang-btn[aria-expanded="true"] .tn-chev { transform: rotate(180deg); color: var(--pumpkin-hi); }

/* język: bieżąca flaga, lista w okienku */
.lang-pick { position: relative; }
.lang-btn { gap: 8px; padding: 0 9px; }
.lang-flag, .lang-flag svg { display: block; width: 26px; height: 17px; }
.lang-flag svg { border-radius: 2px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 2px 2px 0 2px rgba(0, 0, 0, 0.25); }

/* okienka pod paskiem (menu profilu, języki, menu gracza na tabliczce) */
.pop {
  position: absolute; top: calc(100% + 12px); min-width: 230px; padding: 6px; z-index: 8;
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid rgba(255, 143, 46, 0.34); border-radius: 4px;
  box-shadow: 0 4px 0 rgba(4, 2, 8, 0.72), 0 24px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); animation: pop .16s ease-out;
}
.profile .pop, .lang-pop { right: -6px; left: auto; }
.pop button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; font-weight: 600; font-size: 15px;
  background: none; border: 0; border-radius: 3px; color: var(--bone);
}
.pop button:hover { background: rgba(255, 143, 46, 0.12); color: var(--pumpkin-hi); }
.pop-note { margin: 4px 12px 8px; font-size: 13px; color: var(--bone-3); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.lang-pop { min-width: 200px; }
.langs { display: grid; gap: 2px; }
.langs button svg { flex: none; width: 26px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.langs button[aria-checked="true"] { color: var(--pumpkin-hi); background: rgba(255, 143, 46, 0.12); box-shadow: inset 0 0 0 2px rgba(255, 143, 46, 0.36); }
.langs button[aria-checked="true"]::after { content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffc070' d='M7 2h1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v1h1v1h1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* licznik graczy online: na środku paska (pozycję ustawia lobby.js, gdy brak miejsca, chowa się) */
.online {
  position: fixed; left: 50%; top: calc(var(--bar-top) + var(--safe-t)); z-index: 9; height: var(--bar-h); margin: 0;
  transform: translateX(-50%); pointer-events: auto; display: flex; align-items: center; gap: 8px; font: 400 8px/1 var(--pixel); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--bone-2); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65); white-space: nowrap;
}
.online .dot { flex: none; width: 8px; height: 8px; background: #6c5f7a; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.online.live .dot { background: var(--toxic); box-shadow: 0 0 8px var(--toxic), 2px 2px 0 rgba(0, 0, 0, 0.5); animation: livePx 1.6s steps(2) infinite; }
.online .ol-n { color: var(--toxic); }

/* wejście paska po wczytaniu lobby: płyty zjeżdżają z góry, zakładki pojawiają się po kolei */
.topnav, .tn-right { animation: barIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.tn-right { animation-delay: .06s; }
.online { animation: tnFade .5s ease-out .2s backwards; }
.tn-pill { animation: tnFade .4s ease-out .12s backwards; }
.tn-tab { animation: tabIn .42s cubic-bezier(.2, .8, .2, 1) backwards; }
.tn-tab:nth-child(2) { animation-delay: .08s; }
.tn-tab:nth-child(3) { animation-delay: .12s; }
.tn-tab:nth-child(4) { animation-delay: .16s; }
.tn-tab:nth-child(5) { animation-delay: .2s; }
.tn-tab:nth-child(6) { animation-delay: .24s; }
.tn-tab:nth-child(7) { animation-delay: .28s; }
.tn-tab:nth-child(8) { animation-delay: .32s; }
@keyframes barIn { from { opacity: 0; transform: translateY(-14px); } }
@keyframes tabIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes tnFade { from { opacity: 0; } }

/* węższe ekrany: najpierw ciaśniej, potem same ikony (nazwa tylko przy wybranej) */
@media (max-width: 1900px) {
  .tn-tab { padding: 0 12px; gap: 8px; font-size: 11px; }
  .tn-dot { left: 28px; }
  .me-nick, .wallet-txt b, .larp-txt b { font-size: 11px; }
}
@media (max-width: 1760px) {
  .me-nick { max-width: 132px; }
  .me-nick .hi { display: none; }
}
@media (max-width: 1640px) {
  /* waluty: sama kwota przy monecie */
  .wallet-txt .cur, .larp-txt .cur { display: none; }
}
@media (max-width: 1500px) {
  /* same ikony: podpowiedź mówi też, co to za zakładka */
  .tn-tab:not(.on)::after { content: attr(data-name) " · " attr(data-tip); }
  .tn-tab:not(.on) .tn-l { display: none; }
  .tn-tab:not(.on) { padding: 0 12px; }
  .wallet-txt small { display: none; }
}
@media (max-width: 1100px) {
  .tn-sep-l, .lang-pick { display: none; }
  .me-nick, .profile-btn .tn-chev { display: none; }
  .profile-btn { padding: 0 8px; }
}
@media (max-width: 760px) {
  :root { --bar-top: 12px; --bar-h: 46px; --bar-end: calc(var(--bar-top) + 2 * var(--bar-h) + 8px + var(--safe-t)); }
  .corner { gap: 8px; }
  .tr { left: 12px; right: 12px; justify-content: flex-end; }
  .tl { left: 12px; right: 12px; top: calc(var(--bar-top) + var(--bar-h) + 8px + var(--safe-t)); }
  .topnav { flex: 1; }
  .tn-tabs { flex: 1; }
  .tn-tab { flex: 1; justify-content: center; padding: 0; }
  .tn-tab .tn-l, .tn-tab:not(.on) .tn-l { display: none; }
  .tn-dot { left: calc(50% + 8px); }
  .tn-right .wallet { padding: 0 6px; gap: 8px; }
  .login-btn { padding: 1px 10px 0; font-size: 8px; }
  #settings-btn { width: 40px; height: 40px; }
  #settings-btn .gear { width: 30px; height: 30px; }
}

/* ---------- tabliczki nad postaciami i miejsca do zaproszenia (nocne płytki z pikselowym nickiem) ---------- */
.plates { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; }
.scene-live .plates, .no-webgl .plates { opacity: 1; }
/* bez WebGL: tabliczki i miejsca w rzędzie nad dokiem */
.no-webgl .plates {
  inset: auto 0 calc(222px + var(--safe-b)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; padding: 0 16px;
}
.no-webgl .plate, .no-webgl .slot-add { position: static; transform: none !important; }
html:not(.scene-live):not(.no-webgl) .plates * { pointer-events: none !important; }
.plate {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: auto; will-change: transform; transition: opacity .25s;
}
.plate-btn {
  display: flex; align-items: center; gap: 8px; max-width: 240px; height: 30px; padding: 0 11px 0 9px;
  font: 400 9px/1 var(--pixel); color: var(--bone); white-space: nowrap;
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid var(--night-line); border-radius: 3px;
  box-shadow: 0 3px 0 var(--hard), 0 10px 22px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); transition: border-color .15s, transform .12s;
}
.plate-btn .nick { overflow: hidden; text-overflow: ellipsis; padding-top: 2px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.plate-btn[data-me] .nick { color: var(--pumpkin-hi); }
.plate-sd { flex: none; width: 8px; height: 8px; background: var(--t); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.plate-btn.ct .plate-sd { background: var(--ct); }
.plate-btn:hover { border-color: rgba(255, 143, 46, 0.55); transform: translateY(-1px); }
.plate .crown { display: grid; color: #ffd34d; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6)); }
.plate .crown .pxi { width: 13px; height: 10px; }
.plate .tag { box-shadow: 0 2px 0 var(--hard); }

.slot-add {
  position: absolute; left: 0; top: 0; width: 150px; height: 64px; padding: 0; background: none; border: 0; border-radius: 50%;
  pointer-events: auto; will-change: transform; transition: opacity .25s;
}
.slot-add .lbl {
  position: absolute; left: 50%; bottom: 100%; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 1px 10px 0;
  transform: translate(-50%, 4px); white-space: nowrap; font: 400 8px/1 var(--pixel); text-transform: uppercase; color: var(--pumpkin-hi);
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid var(--pumpkin-line); border-radius: 3px; box-shadow: 0 3px 0 var(--hard);
  opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none;
}
.slot-add .lbl .pxi { width: 9px; height: 9px; }
.slot-add:hover .lbl, .slot-add:focus-visible .lbl { opacity: 1; transform: translate(-50%, 0); }
.slot-add:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: -6px; }
.no-webgl .slot-add { width: auto; height: auto; }
.no-webgl .slot-add .lbl { position: static; opacity: 1; transform: none; }
.member-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 190px; }

/* ---------- dok na dole: przyciski boczne w kolorze nocy, „Szukaj meczu” jak świecąca dynia ---------- */
.dock {
  position: fixed; left: 50%; bottom: calc(26px + var(--safe-b)); z-index: 4; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(620px, calc(100vw - 32px)); transition: opacity .3s;
}
.dock-row { position: relative; display: flex; align-items: stretch; gap: 12px; width: 100%; }
.side-act {
  flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 4px;
  text-decoration: none; color: var(--pumpkin-hi);
  background: linear-gradient(180deg, rgba(34, 21, 48, 0.82), rgba(14, 9, 21, 0.9)); border: 2px solid var(--night-line); border-radius: 4px;
  box-shadow: 0 4px 0 rgba(4, 2, 8, 0.6); backdrop-filter: blur(10px); transition: border-color .15s, background .15s, transform .12s, box-shadow .12s;
}
.side-act .sa-ic { width: 26px; height: 26px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5)); transition: transform .15s; }
.side-act span { font: 400 8px/1.3 var(--pixel); letter-spacing: 0; text-transform: uppercase; }
.side-act:hover { border-color: rgba(255, 143, 46, 0.5); background: linear-gradient(180deg, rgba(48, 29, 64, 0.9), rgba(20, 12, 30, 0.92)); }
.side-act:hover .sa-ic { transform: translateY(-2px); }
.side-act:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(4, 2, 8, 0.6); }

.play {
  position: relative; flex: 1; min-height: 84px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 20px; color: #2b1204; border: 0; border-radius: 4px;
  background: linear-gradient(180deg, #ffd384 0%, #ff9d3e 44%, var(--pumpkin-lo) 100%);
  box-shadow: inset 0 -5px 0 rgba(120, 40, 5, 0.42), inset 0 3px 0 rgba(255, 242, 214, 0.65), 0 6px 0 var(--pumpkin-sh), 0 14px 34px rgba(255, 120, 30, 0.34);
  transition: filter .15s, transform .12s, box-shadow .2s;
}
.play::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -40%; } 85%, 100% { left: 120%; } }
.play:hover { filter: brightness(1.06); box-shadow: inset 0 -5px 0 rgba(120, 40, 5, 0.42), inset 0 3px 0 rgba(255, 242, 214, 0.65), 0 6px 0 var(--pumpkin-sh), 0 16px 46px rgba(255, 140, 40, 0.55); }
.play:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(120, 40, 5, 0.42), 0 2px 0 var(--pumpkin-sh); }
.play-main { position: relative; font: 400 22px/1.3 var(--pixel); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 3px 3px 0 rgba(150, 55, 8, 0.38); }
.play-sub { position: relative; min-height: 1em; max-width: 100%; margin-top: 6px; font: 400 9px/1.4 var(--pixel); letter-spacing: 0; color: rgba(43, 18, 4, 0.76); white-space: normal; text-align: center; }
.play-sub:empty { display: none; }
.play-sub .ps-win { font-weight: 400; color: #fff; text-shadow: 1px 1px 0 rgba(110, 40, 4, 0.75); }
.play-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; display: none; }
.play-bar i { position: absolute; top: 0; bottom: 0; width: 34%; animation: scan 1.6s ease-in-out infinite; }
@keyframes scan { 0% { left: -34%; } 100% { left: 100%; } }
.play.searching { background: linear-gradient(180deg, #2c1c3d, #170f22); color: var(--pumpkin-hi); box-shadow: inset 0 0 0 2px var(--pumpkin), 0 6px 0 #0a0610, 0 16px 44px rgba(0, 0, 0, 0.5); }
.play.searching::before, .play.member::before { display: none; }
.play.searching .play-sub { color: var(--bone-2); }
.play.searching .play-bar { display: block; background: rgba(255, 143, 46, 0.14); }
.play.searching .play-bar i { background: var(--pumpkin); }
.play.member { background: linear-gradient(180deg, #1f3b29, #12231a); color: #d4ffe2; box-shadow: inset 0 0 0 2px var(--toxic), 0 6px 0 #06120b, 0 16px 44px rgba(0, 0, 0, 0.45); }
.play.member .play-sub { color: rgba(212, 255, 226, 0.7); }
.play.member.not-ready { color: #2b1204; background: linear-gradient(180deg, #ffd384 0%, #ff9d3e 44%, var(--pumpkin-lo) 100%); box-shadow: inset 0 3px 0 rgba(255, 242, 214, 0.65), 0 6px 0 var(--pumpkin-sh), 0 14px 34px rgba(255, 120, 30, 0.34); }
.play.member.not-ready .play-sub { color: rgba(43, 18, 4, 0.76); }
.play.waiting { filter: saturate(0.6) brightness(0.9); }
/* „Graj” kliknięte drugi raz: przycisk szukania meczu podskakuje */
.play.nudge { animation: playNudge .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes playNudge { 0% { transform: none; } 25% { transform: translateY(-5px) scale(1.015); } 55% { transform: translateY(1px); } 100% { transform: none; } }
/* plakietka „N w kolejce” na rogu przycisku szukania */
.play-q {
  position: absolute; top: -12px; right: calc(92px + 12px + 12px); z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px;
  font: 400 8px/1 var(--pixel); color: var(--toxic); background: #0f2418; border: 2px solid rgba(125, 255, 168, 0.5); border-radius: 3px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); pointer-events: none; animation: qIn .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes qIn { from { opacity: 0; transform: translateY(6px); } }
.play-q::before { content: ""; width: 6px; height: 6px; background: var(--toxic); box-shadow: 0 0 8px var(--toxic); animation: livePx 1.2s steps(2) infinite; }



/* ============================================================
   Wspólne klocki interfejsu (wszystkie zakładki i okna)
   ============================================================ */

/* ---------- przyciski: pikselowy napis, twardy cień, wciśnięcie w dół ---------- */
.btn {
  --bh: 40px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--bh); padding: 1px 16px 0;
  font: 400 10px/1 var(--pixel); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  border: 0; border-radius: 4px; transition: transform .1s, box-shadow .1s, filter .15s, background .15s, color .15s;
}
.btn .pxi { width: 11px; height: 11px; }
.btn:active:not(:disabled) { transform: translateY(3px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.btn-pri { color: #2b1204; background: var(--pumpkin-bg); box-shadow: inset 0 2px 0 rgba(255, 242, 214, 0.6), 0 4px 0 var(--pumpkin-sh); text-shadow: 1px 1px 0 rgba(255, 236, 200, 0.35); }
.btn-pri:hover:not(:disabled) { filter: brightness(1.08); }
.btn-pri:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(255, 242, 214, 0.6), 0 1px 0 var(--pumpkin-sh); }
.btn-sec { color: var(--bone); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 2px var(--night-line-2), 0 4px 0 var(--hard); }
.btn-sec:hover:not(:disabled) { color: var(--pumpkin-hi); background: rgba(255, 143, 46, 0.1); box-shadow: inset 0 0 0 2px rgba(255, 143, 46, 0.5), 0 4px 0 var(--hard); }
.btn-sec:active:not(:disabled) { box-shadow: inset 0 0 0 2px rgba(255, 143, 46, 0.5), 0 1px 0 var(--hard); }
.btn-ghost { color: var(--bone-3); background: none; }
.btn-ghost:hover:not(:disabled) { color: var(--pumpkin-hi); background: rgba(255, 143, 46, 0.1); }
.btn-danger { color: var(--red-hi); background: rgba(170, 45, 20, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 122, 92, 0.35), 0 4px 0 var(--hard); }
.btn-danger:hover:not(:disabled) { color: #ffd2c6; background: rgba(170, 45, 20, 0.32); box-shadow: inset 0 0 0 2px rgba(255, 122, 92, 0.6), 0 4px 0 var(--hard); }
.btn-danger:active:not(:disabled) { box-shadow: inset 0 0 0 2px rgba(255, 122, 92, 0.6), 0 1px 0 var(--hard); }
.btn-money { color: #0d3320; background: linear-gradient(180deg, #c2ffd8, var(--toxic) 55%, #4bd47f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 var(--toxic-lo); }
.btn-money:hover:not(:disabled) { filter: brightness(1.06); }
.btn-money:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 var(--toxic-lo); }
.btn-sm { --bh: 32px; padding: 1px 12px 0; gap: 7px; font-size: 8px; }
.btn-sm .pxi { width: 9px; height: 9px; }
.btn-lg { --bh: 52px; padding: 2px 26px 0; gap: 12px; font-size: 13px; }
.btn-lg .pxi { width: 13px; height: 13px; }
.btn-block { display: flex; width: 100%; }
.btn-ic { --bh: 32px; width: 32px; padding: 0; }
.btn-ic .pxi { width: 12px; height: 12px; }
.btn-ic.armed { color: #fff; background: rgba(220, 60, 30, 0.6); box-shadow: inset 0 0 0 2px var(--red), 0 4px 0 var(--hard); animation: armed .5s steps(2) infinite; }
@keyframes armed { 50% { filter: brightness(1.3); } }

/* ---------- plakietki ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; font: 700 12px/1 var(--ui); letter-spacing: 0.02em;
  white-space: nowrap; color: var(--bone-2); background: rgba(255, 255, 255, 0.07); border-radius: 2px;
}
.tag .pxi { width: 10px; height: 10px; }
.tag-live { color: var(--toxic); background: rgba(29, 90, 52, 0.45); }
.tag-hot { color: #ffd08a; background: rgba(255, 143, 46, 0.18); }
.tag-bad { color: var(--red-hi); background: rgba(170, 45, 20, 0.3); }
.tag-soon { color: var(--violet-hi); background: rgba(120, 70, 200, 0.28); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.tag-mute { color: var(--bone-3); background: rgba(255, 255, 255, 0.06); }
.tag-t { color: #ffd6aa; background: rgba(255, 154, 60, 0.22); }
.tag-ct { color: #d4e8ff; background: rgba(111, 179, 255, 0.22); }

/* ---------- zakładki wewnątrz ekranów: kremowy klawisz jak na pasku ---------- */
.stabs {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; max-width: 100%;
  background: var(--well); border: 2px solid var(--night-line); border-radius: 4px;
}
.stabs button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 1px 14px 0;
  font: 400 9px/1 var(--pixel); text-transform: uppercase; white-space: nowrap; color: var(--bone-2); background: none; border: 0; border-radius: 3px;
  transition: color .15s, background .15s;
}
.stabs button:hover:not([aria-selected="true"]) { color: var(--bone); background: rgba(255, 143, 46, 0.09); }
.stabs button[aria-selected="true"] { color: #2b1204; background: var(--cream); box-shadow: var(--cream-sh); }
.stabs .cnt {
  min-width: 18px; height: 16px; padding: 1px 4px 0; display: inline-grid; place-items: center; font: 400 7px/1 var(--pixel);
  color: var(--bone-2); background: rgba(255, 255, 255, 0.08); border-radius: 2px;
}
.stabs button[aria-selected="true"] .cnt { color: #f1e3c4; background: #7a4f22; }
.stabs .cnt.hot { color: #2b1204; background: var(--pumpkin); box-shadow: 1px 1px 0 var(--pumpkin-sh); }

/* ---------- pola tekstowe ---------- */
.inp {
  width: 100%; height: 44px; padding: 0 14px; font: 600 16px/1 var(--ui); color: var(--bone);
  background: rgba(6, 3, 12, 0.62); border: 2px solid var(--night-line-2); border-radius: 4px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: var(--bone-4); font-weight: 500; }
.inp:hover { border-color: rgba(255, 143, 46, 0.35); }
.inp:focus { outline: none; border-color: var(--pumpkin); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 143, 46, 0.18); }
.inp-wrap { position: relative; display: block; flex: 1; min-width: 0; }
.inp-wrap .inp { padding-left: 40px; }
.inp-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bone-3); pointer-events: none; transition: color .15s; }
.inp-ic .pxi { width: 12px; height: 13px; }
.inp-wrap:focus-within .inp-ic { color: var(--pumpkin-hi); }
.inp-wrap.bad .inp, .af.bad .inp { border-color: var(--red); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 100, 70, 0.18); }
.inp-wrap.bad { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.af { display: grid; gap: 8px; }
.af > span:first-child { font: 400 8px/1.3 var(--pixel); text-transform: uppercase; color: var(--bone-2); }
.hint { font-size: 13px; line-height: 1.35; color: var(--bone-3); }
.hint.bad { color: var(--red-hi); }
.hint.err-only:empty, .hint:empty { display: none; }
.hintx { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--bone-3); }

/* ---------- przełącznik wł./wył.: kwadratowa gałka ---------- */
.tog {
  position: relative; flex: none; display: inline-flex; align-items: center; width: 74px; height: 30px; padding: 0;
  background: var(--well); border: 2px solid var(--night-line-2); border-radius: 4px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: background .15s, border-color .15s;
}
.tog i {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #8b8197; border-radius: 2px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.4); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), background .15s;
}
.tog-l { position: absolute; right: 10px; padding-top: 1px; font: 400 7px/1 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.tog:hover { border-color: rgba(255, 143, 46, 0.6); }
.tog[aria-checked="true"] {
  background: linear-gradient(180deg, rgba(255, 150, 50, 0.42), rgba(214, 92, 14, 0.3)); border-color: var(--pumpkin);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.18), 0 0 16px rgba(255, 130, 30, 0.22);
}
.tog[aria-checked="true"] i { transform: translateX(44px); background: #f6ead1; box-shadow: inset 0 -3px 0 rgba(140, 96, 52, 0.4), 0 2px 0 rgba(0, 0, 0, 0.4); }
.tog[aria-checked="true"] .tog-l { right: auto; left: 10px; color: var(--pumpkin-hi); }

/* ---------- suwak: wypełnienie w kolorze dyni, kremowy suwak jak klawisz ---------- */
.rng-row { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 460px; }
.rng-row output {
  flex: none; min-width: 58px; padding: 7px 8px 6px; text-align: center; font: 400 9px/1 var(--pixel); color: var(--pumpkin-hi);
  background: var(--well); border: 2px solid var(--night-line); border-radius: 3px;
}
.rng { --p: 50%; flex: 1; min-width: 0; height: 26px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rng:focus { outline: none; }
.rng::-webkit-slider-runnable-track {
  height: 6px; background: linear-gradient(90deg, var(--pumpkin) 0 var(--p), rgba(5, 2, 10, 0.6) var(--p) 100%) no-repeat;
  border: 2px solid var(--night-line-2); border-radius: 2px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25);
}
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 22px; margin-top: -10px; background: var(--cream); border: 0; border-radius: 2px;
  box-shadow: inset 0 -3px 0 rgba(140, 96, 52, 0.4), 0 3px 0 #1a0f08; transition: transform .1s;
}
.rng:hover::-webkit-slider-thumb { transform: translateY(-1px); }
.rng:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.rng::-moz-range-track { height: 6px; background: rgba(5, 2, 10, 0.6); border: 2px solid var(--night-line-2); border-radius: 2px; }
.rng::-moz-range-progress { height: 6px; background: var(--pumpkin); }
.rng::-moz-range-thumb { width: 16px; height: 22px; background: #f1e3c4; border: 0; border-radius: 2px; box-shadow: inset 0 -3px 0 rgba(140, 96, 52, 0.4), 0 3px 0 #1a0f08; }

/* ---------- wybór jednej opcji ---------- */
.segm { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; max-width: 100%; background: var(--well); border: 2px solid var(--night-line); border-radius: 4px; }
.segm button {
  height: 32px; padding: 1px 13px 0; font: 400 9px/1 var(--pixel); text-transform: uppercase; color: var(--bone-2); white-space: nowrap;
  background: none; border: 0; border-radius: 3px; transition: background .15s, color .15s;
}
.segm button:hover:not([aria-checked="true"]) { color: var(--bone); background: rgba(255, 143, 46, 0.09); }
.segm button[aria-checked="true"] { color: #2b1204; background: var(--cream); box-shadow: var(--cream-sh); }

/* ---------- klawisz (przypisanie sterowania) ---------- */
.kcap {
  min-width: 96px; height: 34px; padding: 1px 12px 0; font: 400 9px/1 var(--pixel); color: var(--bone); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); border: 2px solid var(--night-line-2); border-radius: 4px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 3px 0 var(--hard); transition: border-color .15s, color .15s, transform .08s;
}
.kcap:hover { border-color: rgba(255, 143, 46, 0.55); color: var(--pumpkin-hi); }
.kcap:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 1px 0 var(--hard); }
.kcap.listening { color: #2b1204; background: var(--pumpkin-bg); border-color: var(--pumpkin); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(0.82); } }

/* ---------- próbki kolorów i szybkie kwoty ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw {
  position: relative; width: 32px; height: 32px; padding: 0; background: var(--sw); border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 3px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), 0 3px 0 var(--hard); transition: transform .12s;
}
.sw:hover { transform: translateY(-2px); }
.sw[aria-checked="true"] { outline: 2px solid var(--pumpkin); outline-offset: 2px; }
.sw[aria-checked="true"]::after { content: ""; position: absolute; inset: 0; background: var(--ck) center / 14px no-repeat; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)); }
.chip {
  height: 30px; padding: 1px 12px 0; font: 400 9px/1 var(--pixel); color: var(--bone); background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--night-line-2); border-radius: 3px; box-shadow: 0 3px 0 var(--hard); transition: border-color .15s, color .15s, transform .08s;
}
.chip:hover { border-color: rgba(125, 255, 168, 0.5); color: var(--toxic); }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hard); }

/* ---------- karta (sekcja ekranu) i nagłówek sekcji z kwadracikiem w kolorze dyni ---------- */
.blk { position: relative; padding: 14px 16px 16px; background: var(--card); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5); }
.blk-h, .sub-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 10px/1.25 var(--pixel); letter-spacing: 0.03em; text-transform: uppercase; color: var(--bone-2); }
.blk-h::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--pumpkin); box-shadow: 2px 2px 0 var(--pumpkin-sh); }
.blk-h .meta, .sub-h .meta { margin-left: auto; font-size: 8px; color: var(--bone-3); }
.sub-h { margin: 16px 0 9px; font-size: 8px; color: var(--bone-3); }
.sub-h:first-child { margin-top: 0; }
.blk-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- uwaga z ikoną ---------- */
.note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.42; color: var(--bone-2);
  background: rgba(255, 255, 255, 0.025); border: 2px dashed var(--night-line); border-radius: 4px;
}
.note .pxi { width: 13px; height: 13px; margin-top: 2px; color: var(--violet); }
.note b { color: var(--bone); }

/* ---------- pusta lista: pikselowy obrazek, krótki tekst, przycisk ---------- */
.empty-st { display: grid; justify-items: center; gap: 12px; padding: 26px 16px; text-align: center; }
.empty-st .art-svg { filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.4)); animation: bob 3s ease-in-out infinite; }
.empty-st h3 { margin: 6px 0 0; font: 400 13px/1.35 var(--pixel); color: var(--pumpkin-hi); text-shadow: 3px 3px 0 rgba(110, 46, 6, 0.6); }
.empty-st p { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.45; color: var(--bone-2); }
.empty-st.big { padding: 56px 16px; }
.empty-st.loading .art-svg { animation: bob 1s steps(2) infinite; }

/* ---------- awatar: pikselowy ludzik w kolorze strony, kwadracik statusu ---------- */
.ava {
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  background: rgba(0, 0, 0, 0.28); border: 2px solid var(--night-line-2); border-radius: 3px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
}
.ava-t { border-color: rgba(255, 154, 60, 0.55); background: rgba(255, 154, 60, 0.12); }
.ava-ct { border-color: rgba(111, 179, 255, 0.55); background: rgba(111, 179, 255, 0.12); }
.ava .ava-svg { width: 29px; height: 24px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45)); }
.ava-empty { color: var(--bone-4); background: none; border-style: dashed; box-shadow: none; }
.ava-empty .pxi { width: 12px; height: 12px; }
.ava .st { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; background: #6c5f7a; border: 2px solid #150d1f; }
.ava .st-lobby { background: var(--toxic); box-shadow: 0 0 6px var(--toxic); }
.ava .st-queue { background: var(--pumpkin); box-shadow: 0 0 6px var(--pumpkin); }
.ava .st-training { background: var(--ct); }

/* ---------- wiersze list ---------- */
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lrow {
  display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 10px 12px 10px 14px;
  background: rgba(255, 255, 255, 0.03); border: 2px solid transparent; border-radius: 4px; transition: border-color .15s, background .15s;
  animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms);
}
.lrow:hover { border-color: var(--night-line); background: rgba(255, 255, 255, 0.05); }
.lrow .who { flex: 1; min-width: 0; display: grid; gap: 7px; }
.lrow .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.3 var(--pixel); color: var(--bone); }
.lrow .who small { font-size: 15px; color: var(--bone-3); }
.lrow.st-lobby .st-tx { color: var(--toxic); }
.lrow.st-queue .st-tx { color: var(--pumpkin-hi); }
.lrow.st-training .st-tx { color: var(--ct); }
.lrow.st-offline { opacity: 0.6; }
.lrow .acts { display: flex; align-items: center; gap: 6px; }

/* saldo w nagłówku ekranu (wpłata po kliknięciu) i licznik w nagłówku */
.bal-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 6px 0 12px; color: var(--toxic);
  background: rgba(29, 90, 52, 0.26); border: 2px solid rgba(125, 255, 168, 0.3); border-radius: 4px; transition: background .15s;
}
.bal-chip:hover { background: rgba(29, 90, 52, 0.45); }
.bal-chip span { font: 400 7px/1 var(--pixel); color: rgba(125, 255, 168, 0.7); text-transform: uppercase; }
.bal-chip b { font: 400 11px/1 var(--pixel); }
.bal-chip i { display: grid; place-items: center; width: 22px; height: 22px; padding-top: 1px; font: 400 12px/1 var(--pixel); font-style: normal; color: #0d3320; background: var(--toxic); box-shadow: 2px 2px 0 var(--toxic-lo); }
.hd-stat {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 1px 12px 0; font: 400 8px/1 var(--pixel); text-transform: uppercase;
  color: var(--bone-2); background: var(--well); border: 2px solid var(--night-line); border-radius: 4px; white-space: nowrap;
}
.hd-stat i { width: 8px; height: 8px; background: #6c5f7a; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.hd-stat.on i { background: var(--toxic); box-shadow: 0 0 8px var(--toxic); animation: livePx 1.6s steps(2) infinite; }

/* ============================================================
   Rama ekranu zakładki (i okien): jak panel „Ustaw mecz”
   ============================================================ */
.scr-veil {
  position: fixed; inset: 0; z-index: 6;
  background: radial-gradient(120% 90% at 50% 40%, rgba(10, 6, 16, 0.32), rgba(8, 5, 14, 0.72)); backdrop-filter: blur(7px) saturate(1.1);
  animation: fade .25s ease-out;
}
.scr-open .plates, .scr-open .dock, .scr-open .vault-spot, .scr-open .cases-spot { opacity: 0 !important; pointer-events: none !important; }
.scr-open .plates * { pointer-events: none !important; }
.scr {
  position: fixed; z-index: 7; top: calc(var(--bar-end) + 14px); bottom: calc(18px + var(--safe-b)); left: max(22px, 2.2vw); right: max(22px, 2.2vw);
  max-width: 1780px; margin: 0 auto; display: flex; flex-direction: column; color: var(--bone);
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid var(--pumpkin-line); border-radius: 4px;
  box-shadow: 0 6px 0 var(--hard), 0 30px 80px rgba(0, 0, 0, 0.62), 0 0 90px rgba(255, 110, 20, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px); animation: scrIn .3s cubic-bezier(.2, .8, .2, 1);
}
/* pikselowe narożniki ramy (także okna i panel meczu) */
.scr::before, .modal-panel::before, .setup::before {
  content: ""; position: absolute; inset: -2px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--pumpkin), var(--pumpkin)) left top / 14px 2px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) left top / 2px 14px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) right top / 14px 2px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) right top / 2px 14px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--pumpkin), var(--pumpkin)) right bottom / 2px 14px no-repeat;
}
@keyframes scrIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
/* przełączenie zakładki: rama stoi, treść wjeżdża */
.scr.scr-swap { animation: none; }
.scr.scr-swap > .scr-head .scr-ic, .scr.scr-swap > .scr-head .scr-tt, .scr.scr-swap > .scr-head .scr-tools { animation: swapIn .24s cubic-bezier(.2, .8, .2, 1); }
.scr.scr-swap > .scr-body, .scr.scr-swap > .split { animation: swapIn .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } }
/* wiersze i karty wjeżdżają tylko przy otwarciu ekranu albo zmianie podzakładki,
   a nie przy każdym odświeżeniu danych (status znajomego, ranking co 30 s, saldo) */
.scr:not(.enter) :is(.lrow, .slot, .rk-tr, .pod, .lk-card, .cx-case, .sk, .iv-slot):not(.enter *) { animation-name: none; }
.scr:not(.enter) :is(.sk.t5, .cx-wins li.t5):not(.enter *) { animation: rainbowTc 3.2s linear infinite; }

.scr-head { flex: none; display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 14px 18px 14px 20px; border-bottom: 2px dashed var(--night-line); }
.scr-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: #2b1204; background: var(--pumpkin-bg); border-radius: 3px;
  box-shadow: inset 0 2px 0 rgba(255, 242, 214, 0.6), inset 0 -3px 0 rgba(120, 40, 5, 0.35), 0 3px 0 var(--pumpkin-sh);
}
.scr-ic-svg { width: 22px; height: 22px; }
.scr-ic-money { font: 800 24px/1 var(--ui); color: #fff; background: radial-gradient(circle at 35% 30%, #6fd1b4, #26a17b 60%, #1a7a5c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #0e4a36; }
.scr-tt { min-width: 0; display: grid; gap: 8px; }
.scr-tt h2 { margin: 0; font: 400 19px/1.2 var(--pixel); color: var(--pumpkin-hi); text-shadow: 3px 3px 0 rgba(110, 46, 6, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-sub { margin: 0; font-size: 16px; color: var(--bone-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-sub:empty { display: none; }
.scr-tools { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.scr-tools:empty { display: none; }
.scr-x {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; padding: 0; color: var(--bone-2);
  background: rgba(255, 255, 255, 0.04); border: 2px solid var(--night-line-2); border-radius: 4px; box-shadow: 0 3px 0 var(--hard);
  transition: color .15s, border-color .15s, transform .08s;
}
.scr-tools:not(:empty) + .scr-x { margin-left: 0; }
.scr-x .pxi { width: 12px; height: 12px; }
.scr-x:hover { color: var(--pumpkin-hi); border-color: rgba(255, 143, 46, 0.55); }
.scr-x:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hard); }
.scr-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.scr-body > * { flex-shrink: 0; }
.scr-body > .empty-st.big:only-child { margin: auto 0; padding-bottom: 72px; }
/* ekrany z listami (znajomi, ranking, ustawienia, statystyki): rama kończy się tam, gdzie treść,
   a dopiero gdy treści jest więcej niż miejsca, przewija się środek */
/* ekran dopasowany do treści stoi na środku wolnego miejsca pod paskiem (w pionie i w poziomie) */
.scr-fit { height: fit-content; margin: auto; max-height: calc(100vh - var(--bar-end) - 32px - var(--safe-b)); min-height: min(860px, calc(100vh - var(--bar-end) - 32px - var(--safe-b))); }
.scr-fit > .scr-body { flex: 1 1 auto; }
@supports (height: 100dvh) { .scr-fit { max-height: calc(100dvh - var(--bar-end) - 32px - var(--safe-b)); } }
.scr-fit > .scr-body { flex: 0 1 auto; }
.scr-fit > .scr-body > .empty-st.big:only-child { margin: 0; padding: 40px 0 46px; }
.scr-fit.scr-split > .split { flex: 0 1 auto; grid-template-rows: minmax(0, 1fr); }



/* ============================================================
   Postać: lista gotowych strojów po lewej, postać 3D na podeście po prawej
   ============================================================ */
.scr-body:has(> .lk) { overflow: hidden; }
.lk { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr); gap: 16px; }
.lk-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lk-list .note { margin-top: auto; }
.lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.lk-card {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 10px; text-align: left; color: var(--bone);
  background: rgba(255, 255, 255, 0.03); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
  transition: border-color .15s, background .15s, transform .12s;
  animation: rowIn .32s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.lk-card:hover { transform: translateY(-2px); border-color: rgba(255, 143, 46, 0.5); background: rgba(255, 143, 46, 0.06); }
.lk-card[aria-pressed="true"] { border-color: var(--pumpkin); background: radial-gradient(120% 120% at 0% 50%, rgba(255, 143, 46, 0.18), transparent 65%), rgba(255, 255, 255, 0.04); box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), 0 0 22px rgba(255, 130, 30, 0.18); }
.lk-card:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.lk-fig {
  flex: none; display: grid; place-items: end center; width: 46px; height: 66px; padding: 5px 0 3px;
  background: radial-gradient(70% 60% at 50% 70%, rgba(255, 150, 50, 0.16), transparent 70%), var(--well); border: 2px solid var(--night-line); border-radius: 3px;
}
.lk-fig .fig-svg { width: 30px; height: auto; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45)); }
.lk-card[aria-pressed="true"] .lk-fig { border-color: rgba(255, 143, 46, 0.5); }
.lk-nm { min-width: 0; display: grid; justify-items: start; gap: 7px; }
.lk-nm b { max-width: 100%; font: 400 9px/1.35 var(--pixel); overflow-wrap: anywhere; }
.lk-card[aria-pressed="true"] .lk-nm b { color: var(--pumpkin-hi); }
.lk-nm small { font-size: 12.5px; line-height: 1.3; color: var(--bone-3); }
.lk-nm .tag .pxi { width: 9px; height: 8px; }

/* scena z postacią: tylko ciepła poświata pod podestem, bez tła i siatki */
.lk-stage {
  position: relative; min-height: 0; overflow: hidden; border-radius: 4px;
  background:
    radial-gradient(42% 22% at 50% 86%, rgba(255, 140, 40, 0.2), transparent 70%),
    radial-gradient(60% 70% at 50% 45%, rgba(110, 60, 160, 0.16), transparent 70%);
}
.lk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline: none; }
.lk-canvas.grabbing { cursor: grabbing; }
.lk-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 143, 46, 0.6); border-radius: 4px; }
.lk-fallback { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; text-align: center; }
.lk-fallback .fig-svg { width: 120px; height: auto; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.45)); }
.lk-fallback small { font-size: 14px; color: var(--bone-3); }
.lk-top { position: absolute; top: 14px; left: 16px; right: 16px; display: grid; justify-items: start; gap: 9px; pointer-events: none; }
.lk-title { margin: 2px 0 0; font: 400 20px/1.25 var(--pixel); color: var(--bone); text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.lk-desc { margin: 0; font-size: 15px; color: var(--bone-2); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.lk-hint {
  position: absolute; left: 16px; bottom: 18px; display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px 11px 7px;
  font: 400 7px/1 var(--pixel); text-transform: uppercase; color: var(--bone-2); pointer-events: none;
  background: rgba(10, 6, 16, 0.6); border: 2px solid var(--night-line); border-radius: 3px;
}
.lk-hint .pxi { width: 10px; height: 10px; color: var(--pumpkin-hi); }
.lk-act { position: absolute; right: 16px; bottom: 16px; }
.lk-act.lk-pop .lk-done { animation: wonIn .5s cubic-bezier(.3, 1.5, .5, 1); }
.lk-done {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 1px 16px 0; font: 400 10px/1 var(--pixel); text-transform: uppercase; color: var(--toxic);
  background: rgba(29, 90, 52, 0.42); border: 2px solid rgba(125, 255, 168, 0.45); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
}
.lk-done .pxi { width: 12px; height: 10px; }
.scr-tools .stabs .sd { width: 8px; height: 8px; margin-right: 8px; }

/* ============================================================
   Skrzynki: lista skrzyń 3D, scena otwierania, zawartość i taśma losowania, ekwipunek
   ============================================================ */
@property --tc { syntax: '<color>'; inherits: true; initial-value: #a7a2b4; }
.t0 { --tc: #a7a2b4; } .t1 { --tc: #6fb3ff; } .t2 { --tc: #b67bff; } .t3 { --tc: #ff5fa2; } .t4 { --tc: #ffc24a; }
/* 5: kosy „???”: kolor rzadkości płynie przez całą tęczę */
.t5 { --tc: #ff6ad5; animation: rainbowTc 3.2s linear infinite; }
@keyframes rainbowTc {
  0% { --tc: #ff5f6d; } 16% { --tc: #ffb347; } 33% { --tc: #f9f871; } 50% { --tc: #5dff9c; } 66% { --tc: #56c8ff; } 83% { --tc: #c07bff; } 100% { --tc: #ff5f6d; }
}
.sk.t5 { animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards, rainbowTc 3.2s linear infinite; animation-delay: calc(var(--i, 0) * 22ms), calc(var(--i, 0) * -0.4s); }
.sk.t5::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: screen;
  background: conic-gradient(from var(--rb, 0deg) at 50% 120%, #ff5f6d, #ffb347, #f9f871, #5dff9c, #56c8ff, #c07bff, #ff5f6d);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 75%); mask-image: linear-gradient(0deg, #000, transparent 75%);
}
.sk.t5 .sk-tx small { text-shadow: 0 0 10px color-mix(in srgb, var(--tc) 60%, transparent); }
.stabs button.t5 { color: var(--tc); }
.cx-cases { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; }
.cx-cases[hidden], .iv[hidden], .upg[hidden] { display: none; }

/* lista skrzyń: zamknięta skrzynia 3D, nazwa, cena i pasek szans rzadkości */
.cx-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; height: 0; min-height: 100%; overflow-y: auto; padding: 2px 6px 4px 2px; margin: -2px -6px -4px -2px; scrollbar-width: thin; scrollbar-color: var(--night-line-2) transparent; }
.cx-case {
  --cc: #6fb3ff; position: relative; flex: none; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center;
  column-gap: 12px; row-gap: 9px; min-height: 110px; padding: 10px 14px 11px 8px; text-align: left; color: var(--bone); overflow: hidden;
  background: radial-gradient(90% 130% at 0% 45%, color-mix(in srgb, var(--cc) 18%, transparent), transparent 70%), var(--card);
  border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.55);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  animation: rowIn .35s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms);
}
.cx-case:hover { border-color: color-mix(in srgb, var(--cc) 55%, transparent); transform: translateX(3px); }
.cx-case[aria-selected="true"] {
  border-color: var(--cc); transform: none;
  background: radial-gradient(90% 130% at 0% 45%, color-mix(in srgb, var(--cc) 32%, transparent), transparent 72%), var(--card);
  box-shadow: inset 4px 0 0 var(--cc), 0 3px 0 rgba(4, 2, 8, 0.55), 0 0 26px color-mix(in srgb, var(--cc) 26%, transparent);
}
.cx-case-art { grid-row: 1 / 3; display: grid; place-items: center; }
.cx-chest { display: block; width: 96px; height: 81px; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.42)); opacity: 0; transition: opacity .3s; }
.cx-chest.ready { opacity: 1; }
.cx-case[aria-selected="true"] .cx-chest, .cx-case:hover .cx-chest { animation: chestBob 2.4s ease-in-out infinite; }
@keyframes chestBob { 50% { transform: translateY(-4px); } }
.cx-case-tx { display: grid; gap: 8px; min-width: 0; }
.cx-case-tx b { font: 400 11px/1.5 var(--pixel); text-transform: uppercase; color: #fff3d6; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-case-tx small { font: 400 10px/1.5 var(--pixel); color: var(--toxic); text-shadow: 2px 2px 0 var(--toxic-lo); white-space: nowrap; }
.cx-case.poor .cx-case-tx small { color: var(--bone-3); text-shadow: none; }
.cx-case-odds { grid-column: 2; display: flex; gap: 2px; height: 6px; }
.cx-case-odds i { min-width: 4px; background: var(--tc); border-radius: 1px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }

/* scena: żywa skrzynia 3D i opis (szanse, przycisk otwierania albo wygrana) */
.cx-stage { --cc: #6fb3ff; display: grid; gap: 12px; min-width: 0; align-content: start; }
.cx-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); min-height: 340px; overflow: hidden;
  background: #130d1c; border: 2px solid color-mix(in srgb, var(--cc) 40%, var(--night-line)); border-radius: 4px;
  box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), 0 0 34px color-mix(in srgb, var(--cc) 12%, transparent); transition: border-color .3s, box-shadow .3s;
}
.cx-view { position: relative; min-height: 320px; }
.cx-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.cx-cv.grabbing { cursor: grabbing; }
.cx-drag { position: absolute; left: 10px; bottom: 9px; display: flex; align-items: center; gap: 7px; font: 400 6px/1.5 var(--pixel); text-transform: uppercase; color: rgba(241, 231, 210, 0.38); pointer-events: none; }
.cx-drag .pxi { width: 9px; height: 9px; }
.nogl .cx-view { display: none; }
.nogl .cx-hero { grid-template-columns: 1fr; }
.cx-info {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 22px 20px;
  background: linear-gradient(90deg, rgba(19, 13, 28, 0.2), rgba(26, 18, 38, 0.92) 24px); border-left: 2px dashed var(--night-line);
}
.cx-kick { display: flex; align-items: center; gap: 10px; font: 400 8px/1.5 var(--pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc); }
.cx-kick i { font-style: normal; padding: 3px 6px 2px; color: #1b0f26; background: var(--tc); border-radius: 2px; letter-spacing: 0.04em; }
.cx-title { margin: 0; font: 400 19px/1.5 var(--pixel); color: #fff3d6; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); overflow-wrap: anywhere; }
.cx-title span { display: block; margin-bottom: 3px; font-size: 9px; color: var(--bone-3); text-shadow: none; }
.cx-desc { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--bone-2); }
.cx-odds { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cx-odds li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--tc); }
.cx-odds .o-bar { height: 7px; background: rgba(0, 0, 0, 0.42); border-radius: 1px; overflow: hidden; }
.cx-odds .o-bar i { display: block; height: 100%; background: var(--tc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.cx-odds b { text-align: right; font: 400 8px/1.5 var(--pixel); color: var(--bone-2); }
.cx-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.cx-acts .btn { flex: 1 1 auto; }
.cx-acts .tag { align-self: center; }
.btn-case {
  --bh: 46px; min-width: 170px; color: #1b0f26;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 60%, #fff), var(--cc) 55%, color-mix(in srgb, var(--cc) 78%, #000));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 color-mix(in srgb, var(--cc) 36%, #000);
}
.btn-case:hover:not(:disabled) { filter: brightness(1.1); }
.btn-case:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 color-mix(in srgb, var(--cc) 36%, #000); }
.btn-case .btn-pr { margin-left: 4px; padding: 4px 7px 3px; color: #fff; background: rgba(20, 8, 30, 0.34); border-radius: 2px; }
.btn-case.poor { filter: saturate(0.35) brightness(0.9); }
.cx-info.spin .cx-kick { animation: kickBlink 0.9s steps(2) infinite; }
@keyframes kickBlink { 50% { opacity: 0.35; } }
.cx-info.won { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tc) 20%, transparent), transparent 60%), linear-gradient(90deg, rgba(19, 13, 28, 0.2), rgba(26, 18, 38, 0.92) 24px); }
.cx-info.won .cx-kick { color: var(--tc); }
.cx-info.won .cx-title { color: var(--tc); }
.cx-info.fresh > * { animation: wonIn .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.cx-info.fresh > :nth-child(2) { animation-delay: .06s; } .cx-info.fresh > :nth-child(3) { animation-delay: .12s; } .cx-info.fresh > :nth-child(4) { animation-delay: .18s; }
@keyframes wonIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.cx-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font: 400 7px/1.5 var(--pixel); text-transform: uppercase;
  color: var(--bone-3); background: none; border: 0;
}
.cx-back .pxi { width: 9px; height: 9px; transform: scaleX(-1); }
.cx-back:hover { color: var(--pumpkin-hi); }

/* karta skórki: obraz broni w skórce, nazwa, kolor rzadkości */
.sk {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; min-width: 0; height: 150px; padding: 9px 12px 10px; text-align: left; color: var(--bone); overflow: hidden;
  background: radial-gradient(110% 75% at 50% 112%, color-mix(in srgb, var(--tc) 34%, transparent), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.1)), #1c1429;
  border: 2px solid var(--night-line); border-bottom: 4px solid var(--tc); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
  animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms);
}
.sk-art { display: grid; place-items: center; min-height: 0; }
.sk-img { display: block; width: 100%; max-width: 210px; height: 100%; max-height: 100px; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5)); opacity: 0; transition: opacity .3s; }
.sk-img.ready { opacity: 1; }
.sk-tx { display: grid; gap: 4px; min-width: 0; }
.sk-tx b { font: 400 8px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-tx small { font-size: 15px; line-height: 1.25; font-weight: 700; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-pc { position: absolute; top: 6px; right: 7px; padding: 3px 5px 2px; font: 400 7px/1.5 var(--pixel); color: var(--bone-2); background: rgba(10, 6, 16, 0.6); border-radius: 2px; }
.sk-n { position: absolute; top: 6px; right: 7px; padding: 3px 5px 2px; font: 400 7px/1.5 var(--pixel); color: var(--bone); background: rgba(10, 6, 16, 0.6); border-radius: 2px; }
.sk-own { position: absolute; top: 6px; left: 7px; display: grid; place-items: center; width: 18px; height: 18px; color: var(--toxic); background: rgba(29, 90, 52, 0.55); border-radius: 2px; }
.sk-own .pxi { width: 9px; height: 8px; }
.sk-on { position: absolute; top: 6px; left: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 2px; font: 400 6px/1.5 var(--pixel); text-transform: uppercase; color: var(--toxic); background: rgba(29, 90, 52, 0.62); border-radius: 2px; }
.sk-on .pxi { width: 8px; height: 7px; }
/* epickie i legendarne: przesuwający się połysk */
.sk.t3::after, .sk.t4::after, .sk.t5::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--tc) 22%, transparent) 48%, transparent 60%) no-repeat; background-size: 250% 100%;
  animation: skShine 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.37s);
}
@keyframes skShine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
button.sk { cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; }
button.sk.can:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 6px 0 rgba(4, 2, 8, 0.5), 0 0 22px color-mix(in srgb, var(--tc) 24%, transparent); }
button.sk.on { border-color: var(--tc); border-bottom-color: var(--tc); cursor: default; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent); }

/* zawartość skrzynki i taśma losowania */
.cx-low { min-width: 0; }
.cx-low .blk-h { margin-bottom: 9px; }
.cx-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 10px; }
.reel-wrap { position: relative; padding: 12px 0; }
.reel {
  position: relative; height: 172px; overflow: hidden; background: var(--well); border: 2px solid var(--night-line); border-radius: 4px;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 34px color-mix(in srgb, var(--cc) 14%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.reel::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: #ffe08a; box-shadow: 0 0 12px #ffcf5a; }
.reel-wrap::before, .reel-wrap::after {
  content: ""; position: absolute; left: 50%; z-index: 3; width: 18px; height: 10px; margin-left: -9px; background: #ffe08a;
  clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 6px #ffcf5a);
}
.reel-wrap::before { top: 7px; }
.reel-wrap::after { bottom: 7px; transform: rotate(180deg); }
.reel-track { position: absolute; top: 9px; left: 0; display: flex; gap: 8px; will-change: transform; }
.reel-track .sk { flex: none; width: 188px; animation: none; }
.reel.landed .sk.win { border-color: var(--tc); box-shadow: 0 0 0 2px var(--tc), 0 0 30px color-mix(in srgb, var(--tc) 60%, transparent); animation: winPulse 1.4s ease-in-out infinite alternate; }
.reel.landed .sk:not(.win) { opacity: 0.45; filter: saturate(0.6); transition: opacity .4s, filter .4s; }
@keyframes winPulse { to { box-shadow: 0 0 0 2px var(--tc), 0 0 46px color-mix(in srgb, var(--tc) 80%, transparent); } }

/* ekwipunek: zestaw broni i wszystkie skórki */
.iv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.iv > *, .iv-head > * { min-width: 0; }
.iv-filter { max-width: 100%; }
.iv-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.iv-slot.knife { cursor: default; }
.iv-slot.knife.t5 { animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards, rainbowTc 3.2s linear infinite; }
.iv-slot-w i.key { color: var(--bone); background: rgba(255, 255, 255, 0.1); }
.iv-slot {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; height: 176px; padding: 11px 13px 12px; text-align: left; color: var(--bone);
  background: radial-gradient(110% 80% at 50% 115%, color-mix(in srgb, var(--tc) 28%, transparent), transparent 70%), var(--well);
  border: 2px solid var(--night-line); border-bottom: 4px solid var(--tc); border-radius: 4px; transition: border-color .15s, transform .12s;
  animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.iv-slot:hover:not(.hand) { transform: translateY(-2px); border-color: rgba(255, 143, 46, 0.45); border-bottom-color: var(--tc); }
.iv-slot.hand { border-color: var(--pumpkin); border-bottom-color: var(--tc); box-shadow: 0 0 0 2px rgba(255, 143, 46, 0.25); cursor: default; }
.iv-slot-w { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 400 8px/1.5 var(--pixel); text-transform: uppercase; }
.iv-slot-w i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 2px; font-style: normal; font-size: 6px; color: #2b1204; background: var(--pumpkin); border-radius: 2px; }
.iv-slot-w i .pxi { width: 8px; height: 8px; }
.iv-slot-art { display: grid; place-items: center; min-height: 0; }
.iv-slot-s { font-size: 15px; font-weight: 700; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.iv-head .blk-h { margin: 0; flex: 1 1 auto; }
.iv-filter { flex: none; }
.iv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
/* skórka w ekwipunku i pod nią sprzedaż za Larpcoiny (pierwszy klik pyta, drugi sprzedaje) */
.iv-cell { display: grid; gap: 5px; min-width: 0; }
.iv-sell {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 9px; min-width: 0;
  font: 400 7.5px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-2);
  background: rgba(255, 255, 255, 0.035); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 2px 0 rgba(4, 2, 8, 0.5);
  transition: color .15s, border-color .15s, background-color .15s, transform .08s;
}
.iv-sell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-sell b { display: inline-flex; align-items: center; margin-left: auto; padding: 2px 5px 1px; font-weight: 400; color: #ffd36a; background: rgba(10, 6, 16, 0.55); border-radius: 2px; }
.iv-sell b .larp-ic { margin-right: 4px; }
.iv-sell .pxi { flex: none; width: 9px; height: 8px; }
button.iv-sell:hover:not(:disabled) { color: #ffd36a; border-color: rgba(255, 194, 74, 0.5); }
button.iv-sell:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
button.iv-sell.ask, button.iv-sell.ask:hover:not(:disabled) { color: #2b1204; border-color: #ffd36a; }
.iv-sell.ask { color: #2b1204; background: linear-gradient(180deg, #ffd36a, #f2a72e); border-color: #ffd36a; box-shadow: 0 2px 0 #8a5410, 0 0 16px rgba(255, 194, 74, 0.35); animation: sellAsk .9s ease-in-out infinite alternate; }
.iv-sell.ask b { color: #ffe9a8; background: rgba(60, 26, 4, 0.55); }
.iv-sell:disabled { opacity: 0.55; cursor: progress; }
.iv-sell.none { color: var(--bone-3); opacity: 0.5; border-style: dashed; box-shadow: none; }
.iv-sell.wide { width: 100%; margin-top: 8px; height: 34px; font-size: 8px; }
@keyframes sellAsk { to { box-shadow: 0 2px 0 #8a5410, 0 0 26px rgba(255, 194, 74, 0.6); } }
.iv-empty { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; font-size: 14.5px; color: var(--bone-2); background: rgba(255, 255, 255, 0.03); border: 2px dashed var(--night-line); border-radius: 4px; }
.iv-empty .pxi { flex: none; width: 18px; height: 16px; color: var(--pumpkin); }

/* ============================================================
   Znajomi: drużyna (5 miejsc) po lewej, znajomi i zaproszenia po prawej
   ============================================================ */
.soc { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; }
/* treść ekranu dopasowanego do treści wypełnia całą (wyższą) ramę */
.scr-fit > .scr-body > :first-child:not(.empty-st) { flex: 1 0 auto; }
.slots { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.slot {
  display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.45);
  animation: rowIn .32s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 40ms);
}
.slot.me { border-color: rgba(255, 143, 46, 0.5); background: radial-gradient(120% 120% at 0% 50%, rgba(255, 143, 46, 0.14), transparent 60%), rgba(255, 255, 255, 0.035); }
.slot.empty { border-style: dashed; background: none; box-shadow: none; min-height: 52px; padding: 8px 14px; opacity: 0.8; }
.slot.empty .ava { width: 32px; height: 32px; }
.slot.empty .who { gap: 0; }
.slot.empty .who small { display: none; }
.slot.empty:hover { opacity: 1; }
.lrow .acts .btn { white-space: nowrap; }
@media (max-width: 560px) { .lrow .duel-l { display: none; } }
/* szeroki ekran: Ustawienia wypełniają całą ramę (szersze menu, karty rozciągnięte na wysokość, większe wiersze i kontrolki) */
@media (min-width: 900px) {
  #settings.scr-fit > .split { flex: 1 1 auto; }
  .scr-split .split { grid-template-columns: 300px minmax(0, 1fr); }
  .settings-nav { padding: 20px 16px; gap: 8px; }
  .settings-nav button { height: 62px; padding: 1px 16px 0; gap: 16px; font-size: 11px; }
  .sn-ic { width: 38px; height: 38px; }
  .sn-ic .pxi { width: 17px; height: 17px; }
  .settings-body { padding: 26px 32px 30px; gap: 20px; }
  .set-h h3 { font-size: 18px; margin-bottom: 12px; }
  .set-h p { font-size: 17px; }
  .settings-body > .set-card { flex: 1 1 auto; display: flex; flex-direction: column; padding: 8px 26px; }
  .set-card .blk-h { font-size: 12px; margin: 20px 0 8px; }
  .set-card > .srow { flex: 1 1 auto; align-content: center; padding: 20px 0; gap: 10px 26px; grid-template-columns: minmax(200px, 0.8fr) minmax(300px, 1.5fr); }
  .srow .lbl { font-size: 19px; }
  .srow .hintx, .hintx { font-size: 16px; }
  .rng-row { max-width: 640px; gap: 18px; }
  .rng-row output { min-width: 74px; padding: 10px 10px 9px; font-size: 11px; }
  .tog { transform: scale(1.3); transform-origin: left center; margin-right: 22px; }
  .segm button { height: 42px; padding-inline: 18px; font-size: 11px; }
  .binds { flex: 1 1 auto; align-content: space-evenly; gap: 10px 18px; padding: 16px 0 22px; }
  .bind-row { min-height: 60px; font-size: 18px; }
  .lang-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .lang-tile { min-height: 84px; font-size: 18px; }
  .xh-prev { min-height: 200px; }
}
/* szeroki ekran: Ranking wypełnia całą ramę (podium i tabela rozciągnięte na wysokość, większe wiersze i napisy) */
@media (min-width: 900px) {
  #ranking.scr-fit > .scr-body { flex: 1 1 auto; }
  #ranking-body > .rk { flex: 1 1 auto; min-height: 0; align-items: stretch; gap: 22px; }
  #ranking .rk-left { grid-template-rows: minmax(0, 1fr) auto; gap: 18px; min-height: 0; }
  #ranking .podium { min-height: 0; gap: 16px; padding: 28px 22px 0; }
  #ranking .pod { gap: 16px; }
  #ranking .pod-who { gap: 10px; }
  #ranking .pod-who .ava { width: 76px; height: 76px; }
  #ranking .pod-who .ava .ava-svg { width: 48px; height: 40px; }
  #ranking .pod-who b { font-size: 12px; }
  #ranking .pod-who small { font-size: 9px; }
  #ranking .podium {
    gap: 14px; padding: 28px 26px 0; isolation: isolate;
    background:
      radial-gradient(46% 62% at 50% 100%, rgba(255, 211, 77, 0.30), transparent 72%),
      radial-gradient(70% 40% at 50% 100%, rgba(255, 150, 50, 0.16), transparent 75%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), var(--card);
  }
  /* snop światła nad zwycięzcą */
  #ranking .podium::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0; width: 46%; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(255, 224, 140, 0.10) 55%, rgba(255, 224, 140, 0.20)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }
  #ranking .podium { grid-template-rows: minmax(0, 1fr); align-items: end; }
  #ranking .pod { justify-content: flex-end; gap: 18px; }
  #ranking .pod-who .ava { width: 92px; height: 92px; }
  #ranking .pod-who .ava .ava-svg { width: 58px; height: 48px; }
  #ranking .pod.p1 .pod-who .ava { width: 112px; height: 112px; }
  #ranking .pod.p1 .pod-who .ava .ava-svg { width: 70px; height: 58px; }
  #ranking .pod-who b { font-size: 14px; }
  #ranking .pod.p1 .pod-who b { font-size: 17px; color: #ffe08a; text-shadow: 3px 3px 0 rgba(110, 70, 6, 0.6); }
  #ranking .pod-who small { font-size: 10px; }
  #ranking .p1 .pod-block { height: min(34vh, 360px); }
  #ranking .p2 .pod-block { height: min(25vh, 270px); }
  #ranking .p3 .pod-block { height: min(19vh, 205px); }
  #ranking .pod-block { gap: 14px; padding-top: 18px; border-radius: 5px 5px 0 0; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.24), inset 0 -40px 50px rgba(0, 0, 0, 0.28), 0 -4px 26px color-mix(in srgb, var(--mc) 22%, transparent); }
  #ranking .pod-block::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent); pointer-events: none; }
  #ranking .pod-n { font-size: 52px; text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); }
  #ranking .p1 .pod-n { font-size: 68px; }
  #ranking .pod-medal .pxi { width: 32px; height: 26px; }
  #ranking .p1 .pod-medal .pxi { width: 42px; height: 34px; animation: bob 2.6s ease-in-out infinite; }
  #ranking .rk-me { padding: 18px 20px; gap: 16px; }
  #ranking .rk-pos { font-size: 22px; min-width: 64px; }
  #ranking .rk-me-tx b { font-size: 13px; }
  #ranking .rk-me-tx small, #ranking .rk-me.guest .rk-me-tx { font-size: 18px; }
  #ranking .rk-list { display: flex; flex-direction: column; min-height: 0; padding: 22px 24px; }
  #ranking .rk-list .blk-h { font-size: 12px; margin-bottom: 16px; }
  #ranking .rk-list .rk-table { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; gap: 8px; }
  #ranking .rk-list .empty-st { margin: auto; }
  #ranking .rk-tr:not(.rk-th) { min-height: 68px; }
  #ranking .rk-th { font-size: 9px; }
  #ranking .rk-r { font-size: 14px; }
  #ranking .rk-tr .who { gap: 14px; }
  #ranking .rk-tr .who .ava { width: 44px; height: 44px; }
  #ranking .rk-tr .who .ava .ava-svg { width: 28px; height: 23px; }
  #ranking .rk-tr .who b { font-size: 13px; }
  #ranking .rk-tr .num { font-size: 12px; }
  #ranking .rk-tr .num b { font-size: 14px; }
  #ranking .rk-table.money .rk-tr .num b { font-size: 13px; }
}
/* szeroki ekran: Znajomi wypełniają całą ramę (drużyna i lista rozciągnięte na wysokość, większe wiersze i napisy) */
@media (min-width: 900px) {
  #social.scr-fit > .scr-body { flex: 1 1 auto; } /* rama zostaje jak była, środek wypełnia ją w całości */
  #social-body > .soc { flex: 1 1 auto; min-height: 0; }
  .soc { gap: 22px; }
  .soc > .blk { display: flex; flex-direction: column; min-height: 0; padding: 22px 24px; }
  .soc .blk-h { font-size: 12px; margin-bottom: 16px; }
  .soc .party .slots { flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); gap: 12px; }
  .soc .slot { min-height: 68px; padding: 10px 20px; gap: 20px; }
  .soc .slot.empty { min-height: 68px; padding: 10px 20px; opacity: 0.85; }
  .soc .slot.empty .ava { width: 52px; height: 52px; }
  .soc .slot.empty .who small { display: block; font-size: 17px; }
  .soc .slot .who b { font-size: 15px; }
  .soc .slot.empty .who b { font-size: 11px; }
  .soc .slot .ava { transform: scale(1.2); transform-origin: left center; margin-right: 8px; }
  .soc .blk-foot { margin-top: 16px; }
  .soc .note { font-size: 17px; }
  .soc .friends .list-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .soc .friends .empty-st { margin: auto; }
  .soc .add-friend .inp { height: 54px; font-size: 18px; }
  .soc .add-friend .btn { height: 54px; font-size: 13px; padding-inline: 26px; }
  .soc .stabs button { font-size: 12px; padding: 12px 18px; }
  .soc .list { gap: 10px; }
  .soc .lrow { min-height: 84px; padding: 12px 18px 12px 20px; gap: 20px; }
  .soc .lrow .ava { transform: scale(1.2); transform-origin: left center; margin-right: 8px; }
  .soc .lrow .who b { font-size: 15px; }
  .soc .lrow .who small { font-size: 18px; }
  .soc .lrow .acts .btn-sm { height: 44px; font-size: 12px; padding-inline: 18px; }
  .soc .lrow .acts .btn-ic { width: 44px; height: 44px; }
}
.slot .who { flex: 1; min-width: 0; display: grid; gap: 7px; }
.slot .who b { font: 400 12px/1.3 var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.empty .who b { font-size: 9px; color: var(--bone-3); }
.slot .who small { font-size: 15px; color: var(--bone-4); }
.slot .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.slot .tags:empty { display: none; }
.slot .acts { display: flex; gap: 6px; }
.add-friend { display: flex; gap: 10px; margin-bottom: 14px; }
.friends .stabs { margin-bottom: 12px; }

/* ============================================================
   Ranking: podium, twoje miejsce, tabela
   ============================================================ */
.rk { display: grid; grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr); gap: 18px; align-items: start; }
.rk-left { display: grid; gap: 14px; min-width: 0; }
.podium {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; min-height: 300px; padding: 20px 14px 0; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 100%, rgba(255, 196, 80, 0.16), transparent 70%), var(--card);
  border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
}
.pod { --mc: #ffd34d; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; animation: podIn .55s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(.08s + var(--i) * 90ms); }
.pod.p2 { --mc: #d8dcec; }
.pod.p3 { --mc: #e59a5a; }
@keyframes podIn { from { opacity: 0; transform: translateY(30px); } }
.pod-who { display: grid; justify-items: center; gap: 8px; min-width: 0; max-width: 100%; text-align: center; }
.pod-who .ava { width: 54px; height: 54px; border-color: var(--mc); box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), 0 0 24px color-mix(in srgb, var(--mc) 40%, transparent); }
.pod-who .ava .ava-svg { width: 34px; height: 28px; }
.pod-who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 9px/1.3 var(--pixel); }
.pod-who small { font: 400 7px/1 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.pod.p1 .pod-who .ava { animation: bob 2.6s ease-in-out infinite; animation-delay: var(--ph, 0ms); }
.pod-block {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; width: 100%; padding-top: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 42%, #2a1a3c), color-mix(in srgb, var(--mc) 12%, #160d22));
  border: 2px solid color-mix(in srgb, var(--mc) 60%, transparent); border-bottom: 0; border-radius: 3px 3px 0 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18);
}
.p1 .pod-block { height: 132px; }
.p2 .pod-block { height: 98px; }
.p3 .pod-block { height: 74px; }
.pod-n { font: 400 26px/1 var(--pixel); color: var(--mc); text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); }
.pod-medal { color: var(--mc); filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5)); }
.pod-medal .pxi { width: 18px; height: 14px; }
.pod.empty .pod-who b { color: var(--bone-4); }
.pod.empty .pod-who .ava { border-color: var(--night-line-2); box-shadow: none; }
.pod.me .pod-who b { color: var(--pumpkin-hi); }
.rk-me {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
}
.rk-me.ranked { border-color: rgba(255, 143, 46, 0.5); background: radial-gradient(120% 140% at 0% 50%, rgba(255, 143, 46, 0.16), transparent 60%), var(--card); }
.rk-pos { min-width: 54px; text-align: center; font: 400 18px/1 var(--pixel); color: var(--pumpkin-hi); text-shadow: 3px 3px 0 rgba(110, 46, 6, 0.6); }
.rk-me-tx { flex: 1; min-width: 150px; display: grid; gap: 7px; }
.rk-me-tx b { font: 400 10px/1.3 var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-me-tx small { font-size: 13.5px; color: var(--bone-3); }
.rk-me.guest .rk-me-tx { font-size: 15px; color: var(--bone-2); }
.rk-cells { display: flex; gap: 6px; width: 100%; }
.rk-cells span { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 8px; padding: 10px 6px 9px; background: var(--well); border: 2px solid var(--night-line); border-radius: 3px; }
.rk-cells small { font: 400 6px/1.3 var(--pixel); text-transform: uppercase; color: var(--bone-3); text-align: center; }
.rk-cells b { font: 400 13px/1 var(--pixel); color: var(--bone); }
.rk-list { min-width: 0; }
.rk-table { display: grid; gap: 4px; }
.rk-tr {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px 64px 118px 60px; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03); border: 2px solid transparent; border-radius: 4px;
  animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 28ms);
}
.rk-th { min-height: 0; padding: 2px 10px 6px; background: none; font: 400 7px/1.3 var(--pixel); text-transform: uppercase; color: var(--bone-3); animation: none; }
.rk-th span:nth-child(n+3) { text-align: right; }
.rk-tr:not(.rk-th):hover { border-color: var(--night-line); background: rgba(255, 255, 255, 0.05); }
.rk-tr.me { border-color: rgba(255, 143, 46, 0.55); background: rgba(255, 143, 46, 0.1); }
.rk-r { font: 400 11px/1 var(--pixel); text-align: center; color: var(--bone-2); }
.rk-tr.top1 .rk-r { color: #ffd34d; }
.rk-tr.top2 .rk-r { color: #d8dcec; }
.rk-tr.top3 .rk-r { color: #e59a5a; }
.rk-tr .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk-tr .who .ava { width: 32px; height: 32px; }
.rk-tr .who .ava .ava-svg { width: 20px; height: 17px; }
.rk-tr .who b { font: 400 9px/1.3 var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tr .num { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 400 9px/1 var(--pixel); color: var(--bone-2); }
.rk-tr .num b { font-weight: 400; font-size: 11px; color: var(--toxic); text-shadow: 2px 2px 0 var(--toxic-lo); }
.rate { width: 52px; height: 7px; background: rgba(0, 0, 0, 0.38); border-radius: 1px; overflow: hidden; }
.rate i { display: block; height: 100%; background: linear-gradient(90deg, var(--pumpkin-lo), var(--pumpkin-hi)); }
.rk-st .pxi { width: 9px; height: 11px; color: var(--pumpkin); }

/* ranking zarobków: kwota ze znakiem zamiast serii */
.mny { white-space: nowrap; }
.mny.pos { color: var(--toxic); }
.mny.neg { color: var(--red-hi); }
.mny.zero { color: var(--bone-2); }
.rk-tr .num b.mny.neg { color: var(--red-hi); text-shadow: 2px 2px 0 rgba(110, 30, 10, 0.6); }
.rk-tr .num b.mny.zero { color: var(--bone-2); text-shadow: none; }
.rk-table.money .rk-tr { grid-template-columns: 40px minmax(0, 1fr) 128px 64px 64px 118px; }
.rk-table.money .rk-tr .num b { font-size: 10px; }
.pod-who small .mny { font-size: 8px; }
.rk-cells.money span:first-child { flex: 1.6; }
.rk-cells b.mny, .rk-cells .mny { font-size: 11px; }
.rk-coin { display: grid; place-items: center; width: 14px; height: 14px; font: 800 11px/1 var(--ui); font-style: normal; color: #fff; background: #26a17b; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.stabs button .pxi { width: 12px; height: 11px; }

/* lista rozwijana pod strzałką (okres rankingu) */
.dd { position: relative; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 1px 12px 0; font: 400 9px/1 var(--pixel); text-transform: uppercase; white-space: nowrap;
  color: var(--bone); background: var(--well); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 var(--hard); transition: border-color .15s, color .15s;
}
.dd-btn .pxi { width: 12px; height: 12px; color: var(--pumpkin); }
.dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color: rgba(255, 143, 46, 0.55); color: var(--pumpkin-hi); }
.dd-btn:hover .tn-chev { color: var(--pumpkin-hi); }
.dd-btn[aria-expanded="true"] .tn-chev { transform: rotate(180deg); color: var(--pumpkin-hi); }
.dd-pop { right: 0; left: auto; top: calc(100% + 8px); min-width: 228px; display: grid; gap: 2px; z-index: 9; }
.dd-pop button { padding: 9px 12px; }
.dd-o { display: grid; gap: 5px; }
.dd-o b { font: 400 9px/1.5 var(--pixel); text-transform: uppercase; }
.dd-o small { font-size: 13px; font-weight: 500; color: var(--bone-3); }
.dd-pop button[aria-selected="true"] { color: var(--pumpkin-hi); background: rgba(255, 143, 46, 0.12); box-shadow: inset 0 0 0 2px rgba(255, 143, 46, 0.36); }
.dd-pop button[aria-selected="true"]::after { content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffc070' d='M7 2h1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v1h1v1h1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tn-pill.off { opacity: 0; }

/* ============================================================
   Statystyki: podsumowanie okresu, wykres albo kalendarz zarobków, konto
   ============================================================ */
.st { display: grid; gap: 16px; }
.st-sum { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-card {
  display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px 16px 13px; background: var(--card); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
  animation: rowIn .35s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms);
}
.st-card small { font: 400 7px/1.3 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.st-card > b { font: 400 15px/1.5 var(--pixel); color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card > span { font-size: 13.5px; color: var(--bone-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card.hero > b { font-size: 18px; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.st-card.hero.pos { border-color: rgba(125, 255, 168, 0.35); background: radial-gradient(130% 120% at 0% 0%, rgba(125, 255, 168, 0.12), transparent 60%), var(--card); }
.st-card.hero.neg { border-color: rgba(255, 122, 92, 0.35); background: radial-gradient(130% 120% at 0% 0%, rgba(255, 122, 92, 0.12), transparent 60%), var(--card); }
.st-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.st-plot { min-width: 0; }
.st-empty { margin: 12px 0 0; font-size: 14px; color: var(--bone-3); text-align: center; }
.scr:not(.enter) :is(.st-card, .ch-line, .cal-c) { animation-name: none; }

/* wykres: słupki zarobku w przedziale i linia sumy od początku okresu, jedna oś w USDT */
.ch { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 300px auto; column-gap: 10px; row-gap: 8px; }
.ch-y { position: relative; min-width: 46px; }
.ch-y span { position: absolute; right: 0; transform: translateY(-50%); font: 400 7px/1.5 var(--pixel); color: var(--bone-3); white-space: nowrap; }
.ch-plot { position: relative; min-width: 0; }
.ch-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(241, 231, 210, 0.07); pointer-events: none; }
.ch-grid.zero { border-top: 2px solid rgba(241, 231, 210, 0.28); }
.ch-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ch-col { position: relative; height: 100%; padding: 0; background: none; border: 0; border-radius: 2px; cursor: default; }
.ch-col:hover, .ch-col.hot, .ch-col:focus-visible { background: rgba(255, 255, 255, 0.04); }
.ch-line { animation: lineIn .5s ease-out; }
@keyframes lineIn { from { opacity: 0; transform: scaleY(0.6); } }
.ch-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ch-line polyline { fill: none; stroke: #8fb8ff; stroke-width: 3px; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); }
.ch-dots { position: absolute; inset: 0; pointer-events: none; }
.ch-dots i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #8fb8ff; border: 2px solid #1a1222; border-radius: 1px; opacity: 0; transition: opacity .12s; }
.ch-dots i.hot { opacity: 1; }
.ch-x { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ch-x span { display: flex; justify-content: center; font: 400 7px/1.5 var(--pixel); color: var(--bone-3); white-space: nowrap; overflow: visible; }
.ch-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; font-size: 13.5px; color: var(--bone-3); }
.ch-leg span { display: inline-flex; align-items: center; gap: 8px; }
.lg-line { width: 18px; height: 3px; background: #8fb8ff; }
.st-tip {
  position: absolute; top: 6px; z-index: 3; display: grid; gap: 6px; min-width: 190px; padding: 10px 12px; pointer-events: none;
  background: rgba(14, 9, 22, 0.96); border: 2px solid rgba(255, 143, 46, 0.4); border-radius: 4px; box-shadow: 0 4px 0 rgba(4, 2, 8, 0.7);
}
.st-tip > b { font: 400 8px/1.3 var(--pixel); text-transform: uppercase; color: var(--pumpkin-hi); }
.st-tip .tr { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--bone-3); }
.st-tip .tr b { font-weight: 700; color: var(--bone); }
.st-tip .tr b.mny.pos { color: var(--toxic); }
.st-tip .tr b.mny.neg { color: var(--red-hi); }

/* kalendarz: kratka dni (miesiąc od poniedziałku), tydzień w rzędzie albo godziny doby */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-1d { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cal-h { padding: 0 0 2px; font: 400 7px/1.5 var(--pixel); white-space: nowrap; overflow: hidden; text-overflow: clip; text-transform: uppercase; color: var(--bone-3); text-align: center; }
.cal-c {
  position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 66px; padding: 8px 8px 7px; text-align: left; color: var(--bone);
  background: rgba(255, 255, 255, 0.025); border: 2px solid var(--night-line); border-radius: 3px; cursor: default;
  animation: rowIn .3s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 12ms);
}
.cal-1t .cal-c { min-height: 108px; padding: 10px; }
.cal-c.pos { background: rgba(125, 255, 168, calc(var(--a) * 0.42)); border-color: rgba(125, 255, 168, calc(var(--a) * 0.9)); }
.cal-c.neg { background: rgba(255, 122, 92, calc(var(--a) * 0.42)); border-color: rgba(255, 122, 92, calc(var(--a) * 0.9)); }
.cal-c.zero { background: rgba(241, 231, 210, 0.08); }
.cal-c.now { box-shadow: inset 0 0 0 2px var(--pumpkin); }
.cal-c:hover, .cal-c:focus-visible { border-color: var(--pumpkin-hi); }
.cal-d { font: 400 7px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-3); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cal-1t .cal-d { white-space: normal; overflow-wrap: anywhere; }
.cal-1t .cal-c small { white-space: normal; overflow: visible; }
.cal-c b { font: 400 9px/1.5 var(--pixel); white-space: nowrap; overflow: hidden; text-overflow: clip; letter-spacing: -0.04em; }
.cal-1t .cal-c b { font-size: 11px; }
.cal-c small { font-size: 12px; line-height: 1.35; color: var(--bone-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-c.pos small, .cal-c.neg small { color: var(--bone-2); }
.cal-1m .cal-c small, .cal-1d .cal-c small { display: none; }
.cal-blank { min-height: 66px; }
.cal-leg { gap: 5px; }
.cal-leg span { margin: 0 6px; }
.cl { width: 14px; height: 14px; border-radius: 2px; border: 2px solid var(--night-line); }
.cl.pos { background: rgba(125, 255, 168, calc(var(--a) * 0.6)); }
.cl.neg { background: rgba(255, 122, 92, calc(var(--a) * 0.6)); }
.cl.none { background: rgba(255, 255, 255, 0.03); }

/* konto: lista statystyk */
.st-list { display: grid; margin: 0; }
.st-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 35px; padding: 5px 2px; border-bottom: 2px dashed rgba(241, 231, 210, 0.07); }
.st-list > div:last-child { border-bottom: 0; }
.st-list dt { font-size: 14px; color: var(--bone-2); }
.st-list dd { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 9px/1.3 var(--pixel); color: var(--bone); text-align: right; }
.st-list dd small { font: 500 12.5px/1 var(--ui); color: var(--bone-3); }
.st-list dd small::before { content: "· "; }
.st-list dd .pxi { width: 9px; height: 11px; color: var(--pumpkin); }

/* ============================================================
   Ustawienia: lista działów po lewej, treść po prawej
   ============================================================ */
.scr-split .split { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.settings-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; overflow-y: auto; border-right: 2px dashed var(--night-line); }
.settings-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 1px 12px 0; text-align: left;
  font: 400 9px/1.2 var(--pixel); text-transform: uppercase; color: var(--bone-2); background: none; border: 0; border-radius: 3px; transition: background .15s, color .15s;
}
.sn-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--bone-3); background: rgba(255, 255, 255, 0.04); border: 2px solid var(--night-line); border-radius: 3px; transition: color .15s, border-color .15s, background .15s; }
.sn-ic .pxi { width: 13px; height: 13px; }
.settings-nav button:hover:not([aria-selected="true"]) { color: var(--bone); background: rgba(255, 143, 46, 0.08); }
.settings-nav button:hover:not([aria-selected="true"]) .sn-ic { color: var(--pumpkin-hi); border-color: rgba(255, 143, 46, 0.4); }
.settings-nav button[aria-selected="true"] { color: #2b1204; background: var(--cream); box-shadow: var(--cream-sh); }
.settings-nav button[aria-selected="true"] .sn-ic { color: #2b1204; background: rgba(255, 143, 46, 0.3); border-color: rgba(110, 46, 6, 0.3); }
.settings-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.settings-body > * { flex-shrink: 0; }
.settings-body.swap > * { animation: swapIn .24s cubic-bezier(.2, .8, .2, 1); }
.set-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.set-h h3 { margin: 2px 0 9px; font: 400 14px/1.3 var(--pixel); color: var(--pumpkin-hi); text-shadow: 3px 3px 0 rgba(110, 46, 6, 0.6); }
.set-h p { margin: 0; font-size: 14.5px; color: var(--bone-3); }
.set-card { padding: 4px 16px; }
.set-card .blk-h { margin: 14px 0 6px; }
.srow { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 1.5fr); align-items: center; gap: 8px 18px; padding: 14px 0; border-bottom: 2px dashed rgba(241, 231, 210, 0.07); }
.srow:last-child { border-bottom: 0; }
.srow .lbl { font-weight: 600; font-size: 16px; color: var(--bone); }
.srow .ctl { display: flex; min-width: 0; }
.srow .hintx { grid-column: 1 / -1; margin-top: -4px; }
.set-card > .hintx { padding-top: 4px; }
.binds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px 0 16px; }
.bind-h { margin: 14px 0 0; font: 400 8px/1.2 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.bind-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 5px 6px 5px 12px; background: rgba(255, 255, 255, 0.03); border-radius: 3px; }
.bind-row span { font-weight: 600; color: var(--bone-2); }
/* podgląd celownika: jasny piasek i ciemny cień obok siebie */
.xh-prev { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 156px; overflow: hidden; border: 2px solid var(--night-line-2); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5); }
.xh-a, .xh-b { position: relative; }
.xh-a { background: linear-gradient(180deg, #e8c99a 0%, #d8b787 55%, #c29767 56%, #b88a5c 100%); }
.xh-b { background: linear-gradient(180deg, #3b2a4c, #1e1428 60%, #150e1e); }
.xh-a .cross, .xh-b .cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.xh-l { position: absolute; left: 12px; top: 12px; font: 400 7px/1 var(--pixel); text-transform: uppercase; color: rgba(40, 20, 5, 0.65); }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.lang-tile {
  position: relative; display: flex; align-items: center; gap: 14px; height: 66px; padding: 1px 16px 0; text-align: left;
  font: 400 10px/1 var(--pixel); color: var(--bone); background: var(--card); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
  transition: border-color .15s, transform .12s, background .15s;
}
.lang-tile svg { flex: none; width: 36px; height: 24px; border-radius: 2px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 3px 3px 0 2px rgba(0, 0, 0, 0.25); }
.lang-tile:hover { border-color: rgba(255, 143, 46, 0.55); transform: translateY(-2px); }
.lang-tile[aria-checked="true"] { color: var(--pumpkin-hi); border-color: var(--pumpkin); background: radial-gradient(130% 120% at 50% 0%, rgba(255, 143, 46, 0.22), rgba(255, 143, 46, 0.04) 70%); box-shadow: 0 3px 0 var(--pumpkin-sh), 0 0 26px rgba(255, 130, 30, 0.2); }
.lang-tile[aria-checked="true"]::after, .soon-check::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; background: var(--pumpkin) var(--ck) center / 12px no-repeat; border-radius: 0 4px 0 4px;
}
.acc-card { display: flex; align-items: center; gap: 20px; }
.acc-card .ava { width: 66px; height: 66px; }
.acc-card .ava .ava-svg { width: 40px; height: 34px; }
.acc-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 24px; margin: 0; }
.acc-grid dt { font: 400 7px/1.8 var(--pixel); text-transform: uppercase; color: var(--bone-3); white-space: nowrap; }
.acc-grid dd { margin: 0; font-weight: 700; font-size: 16px; color: var(--bone); }
.pw-form { display: grid; gap: 14px; max-width: 440px; padding: 12px 0 18px; }
.pw-form .btn { justify-self: start; }
.acc-out { display: flex; }



/* ============================================================
   Okna: skarbiec USDT i konto (ta sama rama co ekrany zakładek)
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px 16px;
  background: rgba(8, 5, 14, 0.55); backdrop-filter: blur(7px); animation: fade .18s ease-out;
}
.modal-panel {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; color: var(--bone);
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid var(--pumpkin-line); border-radius: 4px;
  box-shadow: 0 6px 0 var(--hard), 0 30px 80px rgba(0, 0, 0, 0.62), 0 0 80px rgba(255, 110, 20, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.04);
  animation: scrIn .3s cubic-bezier(.2, .8, .2, 1);
}
@supports (height: 100dvh) { .modal-panel { max-height: calc(100dvh - 40px); } }

/* skarbiec */
/* skarbiec poziomo: po lewej saldo i wpłaty/wypłaty/Larpcoiny, po prawej historia i portfel */
.wallet-panel { width: min(1080px, 100%); }
.wallet-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.w-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.w-col > * { flex-shrink: 0; }
.w-col > .w-hist { flex: 1 1 auto; display: flex; flex-direction: column; }
.w-hist .ledger { flex: 1; max-height: 340px; }
/* pusta historia: dynia i napis na środku karty (w poziomie i w pionie) */
.w-hist > .empty-st { flex: 1 1 auto; align-content: center; justify-items: center; padding-bottom: 40px; }
@media (max-width: 820px) { .wallet-body { grid-template-columns: minmax(0, 1fr); } .wallet-panel { width: min(500px, 100%); } }
.bal-card {
  position: relative; padding: 16px 16px 15px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(125, 255, 168, 0.18), transparent 60%), rgba(12, 38, 26, 0.55);
  border: 2px solid rgba(125, 255, 168, 0.38); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.05);
}
.bal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bal-k { font: 400 8px/1 var(--pixel); text-transform: uppercase; color: rgba(125, 255, 168, 0.75); }
.bal-v { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.bal-v .usdt-ic { width: 34px; height: 34px; font-size: 20px; }
.bal-v b { font: 400 26px/1 var(--pixel); color: var(--toxic); text-shadow: 4px 4px 0 var(--toxic-lo); font-variant-numeric: tabular-nums; }
.bal-v small { align-self: flex-end; font: 400 10px/1 var(--pixel); color: rgba(125, 255, 168, 0.7); }
.bal-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--bone-2); }
.cash { display: grid; gap: 14px; }
.cash .stabs { display: flex; width: 100%; }
.cash .stabs button { flex: 1; }
.cash-form { display: grid; gap: 12px; }
.amt-in { position: relative; display: block; }
.amt-in .inp { padding-right: 76px; font: 400 15px/1 var(--pixel); letter-spacing: 0.02em; }
.amt-in .inp::placeholder { font: 400 15px/1 var(--pixel); }
.amt-in b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 9px/1 var(--pixel); color: rgba(125, 255, 168, 0.8); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ledger { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 268px; overflow-y: auto; }
.ledger li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border-radius: 3px; }
.lg-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; }
.lg-ic .pxi { width: 10px; height: 10px; }
.ledger .plus .lg-ic { color: var(--toxic); background: rgba(29, 90, 52, 0.42); }
.ledger .minus .lg-ic { color: var(--red-hi); background: rgba(170, 45, 20, 0.3); }
.ledger .what { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ledger .what b { font-weight: 700; color: var(--bone); }
.ledger time { font-size: 12.5px; color: var(--bone-3); }
.ledger .amt { display: grid; gap: 6px; text-align: right; }
.ledger .amt b { font: 400 9px/1 var(--pixel); }
.ledger .plus .amt b { color: var(--toxic); }
.ledger .minus .amt b { color: var(--red-hi); }
.ledger .amt small { font-size: 12px; color: var(--bone-3); }
.chain { border-style: dashed; }
.chain p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--bone-2); }
.chain b { color: var(--bone); }

/* konto: logowanie i rejestracja */
.auth-panel { width: min(470px, 100%); }
.auth-why { margin: 14px 16px 0; padding: 10px 12px; font-size: 15px; line-height: 1.4; color: #ffdcb0; background: rgba(255, 143, 46, 0.12); border: 2px solid rgba(255, 143, 46, 0.32); border-radius: 4px; }
.auth-tabs { display: flex; margin: 14px 16px 0; }
.auth-tabs button { flex: 1; }
.auth-form { display: grid; gap: 14px; padding: 16px 16px 20px; overflow-y: auto; }
.pw { position: relative; display: block; }
.pw .inp { padding-right: 96px; }
.pw-eye { position: absolute; right: 6px; top: 6px; }
.meter { height: 6px; background: rgba(0, 0, 0, 0.38); border-radius: 1px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--bad); transition: width .2s, background .2s; }
.check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--bone-2); cursor: pointer; }
.check input {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: var(--well); border: 2px solid var(--night-line-2); border-radius: 3px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
}
.check input:hover { border-color: rgba(255, 143, 46, 0.55); }
.check input:checked { background: var(--pumpkin) var(--ck) center / 12px no-repeat; border-color: var(--pumpkin); box-shadow: 2px 2px 0 var(--pumpkin-sh); }
.check input:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.auth-err { margin: 0; padding: 10px 12px; font-size: 15px; color: #ffd9c8; background: rgba(162, 72, 42, 0.35); border: 2px solid rgba(208, 113, 79, 0.5); border-radius: 4px; }
.auth-alt { margin: 0; text-align: center; font-size: 15px; color: var(--bone-2); }
.link { padding: 0; font-weight: 700; color: var(--pumpkin-hi); background: none; border: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: #ffe0b0; }

/* ---------- mecz znaleziony ---------- */
.match {
  position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(70% 60% at 50% 45%, rgba(70, 26, 98, 0.72), rgba(6, 3, 10, 0.96)); backdrop-filter: blur(9px) saturate(1.1);
  animation: fade .3s ease-out;
}
.match-open .plates, .match-open .dock, .match-open .vault-spot, .match-open .cases-spot { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s; }
.match-in { width: min(780px, 100%); text-align: center; animation: scrIn .45s cubic-bezier(.2, .8, .2, 1); }
.match-mode { margin: 0; font: 400 9px/1 var(--pixel); letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-2); }
.match h2 { margin: 16px 0; font: 400 clamp(24px, 5vw, 50px)/1.25 var(--pixel); color: var(--pumpkin-hi); text-shadow: 6px 6px 0 rgba(110, 46, 6, 0.7), 0 0 44px rgba(255, 140, 40, 0.45); }
.match-side { margin: 0 0 24px; font-size: 18px; font-weight: 600; color: var(--bone-2); }
.match-side b { color: var(--pumpkin-hi); }
.match-stake { display: block; margin-top: 8px; font-size: 16px; color: var(--bone-2); }
.match-stake b { color: var(--toxic); }
.match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; margin-bottom: 24px; }
.team { padding: 14px 16px; text-align: left; background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid var(--night-line-2); border-top: 6px solid var(--t); border-radius: 4px; box-shadow: 0 5px 0 var(--hard); }
.team.ct { border-top-color: var(--ct); }
.team h3 { margin: 0 0 12px; font: 400 9px/1.3 var(--pixel); text-transform: uppercase; color: var(--t); }
.team.ct h3 { color: var(--ct); }
.team.us { border-top-color: var(--toxic); }
.team.us h3 { color: var(--toxic); }
.team.them { border-top-color: var(--red); }
.team.them h3 { color: var(--red); }
.team ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.team li { font: 400 10px/1.3 var(--pixel); color: var(--bone); }
.team li.me { color: var(--pumpkin-hi); }
.vs { align-self: center; font: 400 26px/1 var(--pixel); color: var(--pumpkin); text-shadow: 4px 4px 0 var(--pumpkin-sh); }
.match-note { margin: 0 0 18px; color: var(--bone-2); }

/* ---------- komunikaty: prawy dolny róg, nocna płytka z ikoną w kolorze dyni ---------- */
.toasts {
  position: fixed; right: 22px; bottom: calc(22px + var(--safe-b)); z-index: 15; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; overflow: hidden; pointer-events: auto;
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid var(--pumpkin-line); border-radius: 4px;
  box-shadow: 0 4px 0 var(--hard), 0 18px 44px rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); animation: toastIn .32s cubic-bezier(.2, .8, .2, 1);
}
.toast.out { animation: toastOut .25s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(22px) scale(0.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }
.toast .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: #2b1204; background: var(--pumpkin-bg); border-radius: 3px; box-shadow: 0 2px 0 var(--pumpkin-sh); }
.toast .ic .pxi { width: 13px; height: 13px; }
.toast .tx { flex: 1; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--bone); }
.toast .tx b { color: var(--pumpkin-hi); }
.toast .acts { display: flex; gap: 6px; }
.toast .timer { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pumpkin); animation: drain linear forwards; }
@keyframes drain { from { width: 100%; } to { width: 0; } }
.toast.invite { border-color: var(--pumpkin); box-shadow: 0 4px 0 var(--hard), 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 130, 30, 0.25); }


/* ---------- celownik w podglądzie (te same zasady co w treningu) ---------- */
.cross { --c: #9dff8a; --len: 7px; --th: 2px; --ol: 1px; --gap: 5px; }
.cross i, .cross b { position: absolute; background: var(--c); box-shadow: 0 0 0 var(--ol) rgba(10, 7, 5, 0.65); }
.cross i:nth-child(1), .cross i:nth-child(2) { width: var(--th); height: var(--len); left: calc(var(--th) / -2); }
.cross i:nth-child(3), .cross i:nth-child(4) { height: var(--th); width: var(--len); top: calc(var(--th) / -2); }
.cross i:nth-child(1) { top: calc(-1 * var(--len) - var(--gap)); }
.cross i:nth-child(2) { top: var(--gap); }
.cross i:nth-child(3) { left: calc(-1 * var(--len) - var(--gap)); }
.cross i:nth-child(4) { left: var(--gap); }
.cross b { display: none; width: var(--th); height: var(--th); left: calc(var(--th) / -2); top: calc(var(--th) / -2); }
.cross .circ {
  position: absolute; display: none; text-decoration: none;
  width: calc(var(--gap) * 2 + var(--len)); height: calc(var(--gap) * 2 + var(--len));
  left: calc((var(--gap) * 2 + var(--len)) / -2); top: calc((var(--gap) * 2 + var(--len)) / -2);
  border: var(--th) solid var(--c); border-radius: 50%; box-sizing: border-box;
  box-shadow: 0 0 0 var(--ol) rgba(10, 7, 5, 0.6), inset 0 0 0 var(--ol) rgba(10, 7, 5, 0.6);
}
.cross.st-cross b { display: block; }
.cross.st-dot i { display: none; }
.cross.st-dot b { display: block; width: calc(var(--th) * 2); height: calc(var(--th) * 2); left: calc(var(--th) * -1); top: calc(var(--th) * -1); border-radius: 50%; }
.cross.st-circle i { display: none; }
.cross.st-circle .circ, .cross.st-circle b { display: block; }

/* skarbiec w scenie: stos gotówki pod wiatą, nad nim unosi się saldo */
.vault-spot {
  position: fixed; left: 0; top: 0; z-index: 3; width: 150px; height: 90px; padding: 0; background: none; border: 0; border-radius: 40%;
  will-change: transform; opacity: 0; transition: opacity .3s; --lift: 70px;
}
.scene-live .vault-spot { opacity: 1; }
.locker-open .vault-spot { opacity: 0 !important; pointer-events: none; }
html:not(.scene-live) .vault-spot { pointer-events: none; }
.no-webgl .vault-spot { display: none; }
.vault-tag {
  position: absolute; left: 50%; bottom: calc(50% + var(--lift)); display: flex; align-items: center; gap: 10px; white-space: nowrap;
  transform: translateX(-50%); animation: vaultBob 3.2s ease-in-out infinite;
}
.vault-amt {
  /* kanciasta, pikselowa czcionka jak w grach z klocków; bez obwódki, tylko płaski cień */
  font: 400 26px/1 "Press Start 2P", "Courier New", monospace; letter-spacing: 0.02em; color: #7dffa8;
  text-shadow: 4px 4px 0 #1d5a34; image-rendering: pixelated; -webkit-font-smoothing: none;
}
.vault-amt b.odo { display: inline-flex; align-items: flex-end; }
.odo-ch, .odo-col { display: inline-block; height: 1.2em; line-height: 1.2em; }
.odo-col { overflow: hidden; vertical-align: bottom; padding-right: 4px; margin-right: -4px; }
.odo-strip { display: flex; flex-direction: column; will-change: transform; }
.odo-strip > span { height: 1.2em; line-height: 1.2em; text-align: center; }
.vault-amt b.odo-done { animation: odoPop 0.5s ease-out; }
@keyframes odoPop { 0% { filter: brightness(1); transform: scale(1); } 35% { filter: brightness(1.6) drop-shadow(0 0 10px #7dffa8); transform: scale(1.08); } 100% { filter: brightness(1); transform: scale(1); } }
.vault-plus {
  width: 36px; height: 36px; display: grid; place-items: center; padding-top: 2px; font: 400 20px/1 "Press Start 2P", monospace; color: #0d3320; border-radius: 0;
  background: #7dffa8; box-shadow: 3px 3px 0 #1d5a34;
  transition: transform .15s, box-shadow .15s;
}
.vault-plus:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1d5a34; background: #a6ffc4; }
.vault-spot:hover .vault-amt { color: #a6ffc4; }
.vault-spot:focus-visible { outline: 2px solid #6fd1b4; outline-offset: -8px; }
@keyframes vaultBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }

/* kwota równo nad stosem: plus obok nie przesuwa napisu */
.vault-tag { gap: 0; }
.vault-plus { position: absolute; left: calc(100% + 10px); top: 50%; margin-top: -18px; }

/* skrzynki ze skinami w scenie i sklep */
.cases-spot { width: 190px; height: 110px; }
.cases-amt { color: #e2b8ff; text-shadow: 4px 4px 0 #4a1f6b; font-size: 22px; }
.cases-spot:hover .cases-amt { color: #f1d9ff; }

/* bilet meczu nad przyciskiem: trzy pola, każde otwiera panel na swojej części */
.ticket {
  position: relative; display: grid; grid-template-columns: 1fr 1.3fr 34px; width: 100%; min-height: 56px; cursor: pointer;
  background: linear-gradient(180deg, rgba(34, 21, 48, 0.84), rgba(14, 9, 21, 0.9)); border: 2px solid var(--night-line); border-radius: 4px;
  box-shadow: 0 4px 0 rgba(4, 2, 8, 0.6), 0 12px 30px rgba(0, 0, 0, 0.32); backdrop-filter: blur(10px); transition: border-color .15s;
}
.ticket:hover, .ticket.open { border-color: rgba(255, 143, 46, 0.55); }
.tk {
  min-width: 0; display: grid; align-content: center; gap: 7px; padding: 8px 14px; text-align: left; color: var(--bone);
  background: none; border: 0; border-right: 2px dashed rgba(241, 231, 210, 0.1); transition: background .15s;
}
.tk:hover { background: rgba(255, 143, 46, 0.09); }
.tk:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: -4px; }
.tk-k { font: 400 8px/1 var(--pixel); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-3); }
.tk-v { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 11px/1.25 var(--pixel); color: var(--pumpkin-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-v i { font-style: normal; color: var(--toxic); }
/* wygrana obok stawki: oddzielona pionową kreską, z małym podpisem zamiast strzałki */
.tk-w { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; font-size: 9px; color: var(--toxic); background: rgba(29, 90, 52, 0.32); border: 2px solid rgba(125, 255, 168, 0.32); border-radius: 3px; }
.tk-w .pxi { flex: none; width: 10px; height: 9px; }
.tk-chev { display: grid; place-items: center; color: var(--bone-3); pointer-events: none; }
.tk-chev svg { width: 18px; height: 18px; transition: transform .2s; shape-rendering: crispEdges; }
.ticket.open .tk-chev svg { transform: rotate(180deg); }
.ticket.open .tk-chev, .ticket:hover .tk-chev { color: var(--pumpkin-hi); }
.ticket.locked .tk-v { color: var(--bone-2); }
.sd { flex: none; width: 10px; height: 10px; background: var(--t); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.sd.ct { background: var(--ct); }
.sd.any { background: linear-gradient(90deg, var(--t) 50%, var(--ct) 50%); }

/* panel nad dokiem (gdy otwarty, dok wychodzi ponad górne paski) */
.dock.setup-open { z-index: 7; }
.setup {
  position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 6; width: min(800px, calc(100vw - 24px)); max-height: calc(100vh - 206px - var(--safe-b));
  display: flex; flex-direction: column; color: var(--bone); transform: translateX(-50%);
  background: linear-gradient(180deg, var(--night-a), var(--night-b)); border: 2px solid rgba(255, 143, 46, 0.34); border-radius: 4px;
  box-shadow: 0 6px 0 rgba(4, 2, 8, 0.72), 0 30px 80px rgba(0, 0, 0, 0.62), 0 0 80px rgba(255, 110, 20, 0.13), inset 0 2px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px); animation: setupIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes setupIn { from { opacity: 0; transform: translate(-50%, 16px) scale(0.985); } }
.setup::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 8px; margin-left: -8px; background: rgba(255, 143, 46, 0.45); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.setup-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 2px dashed var(--night-line); }
.setup-head h2 {
  flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; font: 400 13px/1.3 var(--pixel); color: var(--pumpkin-hi); text-shadow: 3px 3px 0 rgba(110, 46, 6, 0.6);
}
/* zamknięcie panelu: kwadratowy przycisk w kolorze dyni, po najechaniu kolory odwrócone */
.setup-x {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #2b1204; cursor: pointer;
  background: var(--pumpkin-bg); border: 2px solid var(--pumpkin); border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255, 242, 214, 0.55), 0 3px 0 var(--pumpkin-sh); transition: background .12s, color .12s, box-shadow .12s, transform .08s;
}
.setup-x .pxi { width: 12px; height: 12px; }
.setup-x:hover, .setup-x:focus-visible { color: var(--pumpkin-hi); background: #1a1022; box-shadow: 0 3px 0 var(--pumpkin-sh); }
.setup-x:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.setup-x:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pumpkin-sh); }
.setup-bal {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; color: var(--toxic);
  background: rgba(29, 90, 52, 0.26); border: 2px solid rgba(125, 255, 168, 0.3); border-radius: 4px; transition: background .15s;
}
.setup-bal:hover { background: rgba(29, 90, 52, 0.45); }
.setup-bal span { font: 400 7px/1 var(--pixel); color: rgba(125, 255, 168, 0.7); text-transform: uppercase; }
.setup-bal b { font: 400 11px/1 var(--pixel); }
.setup-bal i { display: grid; place-items: center; width: 22px; height: 22px; font: 400 12px/1 var(--pixel); font-style: normal; color: #0d3320; background: var(--toxic); box-shadow: 2px 2px 0 var(--toxic-lo); }
.setup .x-btn { flex: none; }
.setup-body { display: grid; gap: 13px; padding: 12px 16px 14px; overflow-y: auto; overscroll-behavior: contain; }
.su-note { margin: 0; padding: 9px 12px; font-size: 14px; line-height: 1.35; border-radius: 4px; }
.su-note b { color: var(--pumpkin-hi); }
.su-note.su-lock { background: rgba(185, 140, 255, 0.12); border: 2px solid rgba(185, 140, 255, 0.3); }
.su-note.su-warn { color: #ffdcb0; background: rgba(255, 143, 46, 0.12); border: 2px solid rgba(255, 143, 46, 0.32); }
.su-sec { border-radius: 4px; }
.su-sec.su-flash { animation: secFlash .9s ease-out; }
@keyframes secFlash { 0% { box-shadow: 0 0 0 3px rgba(255, 143, 46, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(255, 143, 46, 0); } }
.su-h { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font: 400 9px/1.2 var(--pixel); letter-spacing: 0.03em; text-transform: uppercase; color: var(--bone-2); }
.su-h i { display: grid; place-items: center; width: 20px; height: 20px; font: 400 9px/1 var(--pixel); font-style: normal; color: #2b1204; background: var(--pumpkin); box-shadow: 2px 2px 0 var(--pumpkin-sh); }
.su-modes, .su-stakes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.su-sides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* kafelki wyboru */
.su-opt {
  position: relative; min-width: 0; display: grid; align-content: start; justify-items: start; gap: 6px; padding: 10px 11px 9px; text-align: left;
  color: var(--bone); background: rgba(255, 255, 255, 0.035); border: 2px solid rgba(241, 231, 210, 0.1); border-radius: 4px;
  box-shadow: 0 3px 0 rgba(4, 2, 8, 0.55); transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.su-opt:hover:not(:disabled) { border-color: rgba(255, 143, 46, 0.55); background: rgba(255, 143, 46, 0.07); transform: translateY(-2px); }
.su-opt:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(4, 2, 8, 0.55); }
.su-opt:focus-visible { outline: 2px solid var(--pumpkin-hi); outline-offset: 2px; }
.su-opt[aria-checked="true"] {
  border-color: var(--pumpkin); background: radial-gradient(130% 120% at 50% 0%, rgba(255, 143, 46, 0.25), rgba(255, 143, 46, 0.05) 70%);
  box-shadow: 0 3px 0 var(--pumpkin-sh), 0 0 26px rgba(255, 130, 30, 0.22), inset 0 0 0 1px rgba(255, 210, 150, 0.18);
}
.su-opt[aria-checked="true"]::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; background: var(--pumpkin);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%232b1204' d='M7 2h1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v1h1v1h1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat; border-radius: 0 4px 0 4px;
}
.su-opt:disabled { opacity: 0.42; cursor: not-allowed; }
.su-opt:disabled[aria-checked="true"] { opacity: 0.9; }
.su-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; font: 700 12px/1 var(--ui); letter-spacing: 0.02em; border-radius: 2px; white-space: nowrap; }
.su-tag.su-live { color: var(--toxic); background: rgba(29, 90, 52, 0.38); }
.su-tag.su-live::before { content: ""; width: 6px; height: 6px; background: var(--toxic); box-shadow: 0 0 8px var(--toxic); animation: livePx 1.2s steps(2) infinite; }
@keyframes livePx { 50% { opacity: 0.25; } }
.su-tag.su-fast { color: #ffd08a; background: rgba(255, 143, 46, 0.15); }
.su-tag.su-bad { color: #ffa48d; background: rgba(170, 45, 20, 0.28); }
.su-tag.su-soon { color: #d9c7ff; background: rgba(120, 70, 200, 0.26); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.su-mode.su-soonm { cursor: not-allowed; }
.su-mode.su-soonm .su-mi, .su-mode.su-soonm .su-mt, .su-mode.su-soonm .su-ms { opacity: 0.45; filter: grayscale(0.7); }

.su-mode .su-mi { height: 23px; max-width: 100%; display: flex; align-items: flex-end; }
.su-mode .su-mi svg { display: block; max-width: 100%; height: 22.5px; width: auto; }
.su-mode .su-mt { font: 400 13px/1.25 var(--pixel); color: var(--bone); }
.su-mode[aria-checked="true"] .su-mt { color: var(--pumpkin-hi); }
.su-mode .su-ms { font-size: 14px; line-height: 1.3; color: var(--bone-2); }
.su-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.su-mode.su-botm { border-style: dashed; }
.su-mode.su-botm[aria-checked="true"] { border-style: solid; }

.su-stake { justify-items: center; align-content: start; text-align: center; padding: 12px 8px 10px; }
.su-stake .su-v { display: flex; align-items: baseline; gap: 6px; font: 400 18px/1.1 var(--pixel); color: var(--bone); }
.su-stake .su-v small { font-size: 8px; color: var(--bone-3); }
.su-stake[aria-checked="true"] .su-v { color: var(--pumpkin-hi); text-shadow: 3px 3px 0 rgba(110, 46, 6, 0.55); }
/* pod kwotą: osobna linia z wygraną, oddzielona kreską, żeby nie zlewała się ze stawką */
.su-stake .su-w { display: grid; justify-items: center; gap: 5px; width: 100%; padding-top: 8px; border-top: 2px dashed rgba(241, 231, 210, 0.1); }
.su-stake .su-w small { font: 400 7px/1.2 var(--pixel); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone-3); }
.su-stake .su-w b { font: 400 11px/1 var(--pixel); color: var(--toxic); text-shadow: 2px 2px 0 var(--toxic-lo); }
.su-cust .su-w small { font: 600 13px/1.25 var(--ui); text-transform: none; letter-spacing: 0; color: var(--bone-2); }
.su-stake.su-poor .su-w b { color: var(--bone-3); text-shadow: none; }
.su-stake.su-poor .su-v { color: var(--bone-3); }
.su-cust .su-v { min-height: 20px; align-items: center; font-size: 12px; }

.su-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 9px; padding: 8px 12px; background: rgba(0, 0, 0, 0.22); border: 2px dashed rgba(241, 231, 210, 0.13); border-radius: 4px; }
.su-cl { font: 400 8px/1.2 var(--pixel); text-transform: uppercase; color: var(--bone-2); }
.su-step { display: flex; align-items: stretch; height: 42px; overflow: hidden; background: rgba(10, 6, 16, 0.75); border: 2px solid rgba(255, 143, 46, 0.45); border-radius: 4px; }
.su-step:focus-within { border-color: var(--pumpkin); box-shadow: 0 0 0 3px rgba(255, 143, 46, 0.2); }
.su-sb { width: 40px; font: 400 15px/1 var(--pixel); color: var(--pumpkin-hi); background: rgba(255, 143, 46, 0.12); border: 0; }
.su-sb:hover { background: rgba(255, 143, 46, 0.26); }
.su-sb:active { background: rgba(255, 143, 46, 0.36); }
.su-step input { width: 104px; min-width: 0; padding: 0 6px; text-align: right; font: 400 15px/1 var(--pixel); color: var(--bone); background: none; border: 0; font-variant-numeric: tabular-nums; }
.su-step input:focus { outline: none; }
.su-step .su-unit { display: grid; place-items: center; padding: 0 10px 0 4px; font: 400 8px/1 var(--pixel); color: var(--bone-3); }
.su-chint { font-size: 13px; color: var(--bone-3); }
.su-crow.su-bad .su-step { border-color: #ff7a5c; box-shadow: 0 0 0 3px rgba(255, 100, 70, 0.18); }
.su-crow.su-bad .su-chint { color: #ffa48d; }
.su-others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; font-size: 13px; color: var(--bone-2); }
.su-chip { height: 30px; padding: 0 11px; font: 700 13px/1 var(--ui); color: var(--toxic); background: rgba(29, 90, 52, 0.3); border: 2px solid rgba(125, 255, 168, 0.32); border-radius: 3px; }
.su-chip:hover { background: rgba(29, 90, 52, 0.5); }
.su-chip.su-go { color: #0d3320; background: var(--toxic); border-color: var(--toxic); box-shadow: 2px 2px 0 var(--toxic-lo); }

.su-side { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font: 400 10px/1.3 var(--pixel); }
.su-side .sd { width: 12px; height: 12px; }
.su-side .su-tag { margin-left: auto; font-size: 11px; }
.su-hint, .su-bot { margin: 7px 0 0; font-size: 13px; line-height: 1.35; color: var(--bone-2); }
.su-bot { margin: 0; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border: 2px dashed rgba(241, 231, 210, 0.1); border-radius: 4px; }
.c-t { color: var(--t); } .c-ct { color: var(--ct); }

/* kupon na dole panelu: ile wkładasz, jaka jest pula i ile wygrywasz */
.su-slip {
  position: relative; flex: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 18px; padding: 13px 16px 11px;
  background: linear-gradient(180deg, rgba(255, 143, 46, 0.1), rgba(255, 143, 46, 0.03)); border-top: 2px dashed rgba(255, 143, 46, 0.38);
}
.su-slip::before, .su-slip::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; background: #0c0812; border: 2px solid rgba(255, 143, 46, 0.34); border-radius: 50%; }
.su-slip::before { left: -10px; } .su-slip::after { right: -10px; }
/* legenda pod wyborem: stawka → pula → wygrana, zwykły tekst (nie przyciski) połączony przepływem */
.su-cells { display: flex; align-items: flex-start; gap: 0; min-width: 0; }
.su-cell { flex: none; display: grid; align-content: start; gap: 7px; min-width: 0; }
.su-cell small { font: 400 7px/1.2 var(--pixel); text-transform: uppercase; letter-spacing: 0.05em; color: var(--bone-3); white-space: nowrap; }
.su-cell b { font: 400 14px/1 var(--pixel); color: var(--bone-2); white-space: nowrap; }
.su-cell em { font-style: normal; font-size: 12.5px; line-height: 1.2; color: var(--bone-3); white-space: nowrap; }
.su-cell em:empty { display: none; }
.su-cell.su-win small { color: rgba(125, 255, 168, 0.75); }
.su-cell.su-win b { font-size: 18px; color: var(--toxic); text-shadow: 3px 3px 0 var(--toxic-lo), 0 0 18px rgba(125, 255, 168, 0.25); }
.su-cell.su-win em { font-weight: 700; color: rgba(125, 255, 168, 0.85); }
/* łącznik między etapami: przerywana linia z grotem, po której przesuwa się pikselowy błysk */
.su-flow { position: relative; flex: 1 1 0; min-width: 34px; max-width: 110px; height: 12px; margin: 16px 14px 0; align-self: flex-start; font-style: normal; transform-origin: left center; }
.su-flow::before {
  content: ""; position: absolute; left: 0; right: 9px; top: 5px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 143, 46, 0.5) 0 6px, transparent 6px 10px);
}
.su-flow::after {
  content: ""; position: absolute; right: 0; top: 1px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid rgba(255, 143, 46, 0.75);
}
.su-flow span { position: absolute; top: 4px; left: 0; width: 6px; height: 4px; background: #ffd384; box-shadow: 0 0 8px 2px rgba(255, 170, 60, 0.55); animation: flowRun 1.8s steps(14) infinite; }
.su-f2 span { animation-delay: .9s; }
@keyframes flowRun { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
/* otwarcie panelu: po kolei stawka, przepływ, pula, przepływ, wygrana */
.su-slip.play .su-cell { animation: slipIn .38s cubic-bezier(.2, .8, .2, 1) backwards; }
.su-slip.play .su-cell:nth-child(1) { animation-delay: .12s; }
.su-slip.play .su-f1 { animation: flowDraw .3s steps(6) .42s backwards; }
.su-slip.play .su-cell.su-pot { animation-delay: .7s; }
.su-slip.play .su-f2 { animation: flowDraw .3s steps(6) 1s backwards; }
.su-slip.play .su-cell.su-win { animation: winIn .5s cubic-bezier(.3, 1.5, .5, 1) 1.28s backwards; }
.su-slip.play .su-flow span { animation-delay: 1.8s; }
@keyframes slipIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes flowDraw { from { transform: scaleX(0); opacity: 0.4; } }
@keyframes winIn { from { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; } }
.su-rules-m { display: none; }
.su-done {
  height: 42px; padding: 0 20px; font: 400 10px/1 var(--pixel); color: #2b1204; border: 0; border-radius: 4px;
  background: linear-gradient(180deg, #ffd384, #ff9d3e 50%, var(--pumpkin-lo)); box-shadow: inset 0 2px 0 rgba(255, 242, 214, 0.6), 0 4px 0 var(--pumpkin-sh);
}
.su-done:hover { filter: brightness(1.08); }
.su-done:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pumpkin-sh); }
.su-poornote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 14px; color: #ffb7a3; }
.su-poornote b { color: var(--bone); }
.su-rules { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--bone-3); }

@media (max-height: 820px) and (min-width: 601px) {
  .setup-body { gap: 10px; padding-top: 10px; }
  .su-hint { display: none; }
  .su-opt { padding: 10px 11px 9px; gap: 6px; }
  .su-mode .su-ms { font-size: 13px; }
  .su-slip { padding: 12px 18px 11px; }
}
@media (max-width: 760px) {
  .su-modes, .su-stakes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ticket { grid-template-columns: 1fr 1.25fr 26px; min-height: 50px; }
  .tk { padding: 7px 8px; gap: 6px; }
  .tk-k { font-size: 6px; }
  .tk-v { font-size: 8px; gap: 5px; }
  .tk-w { gap: 4px; height: 18px; padding: 0 5px 0 4px; font-size: 7px; }
  .tk-w .pxi { width: 8px; height: 7px; }
  .sd { width: 8px; height: 8px; }
  .setup { width: calc(100vw - 16px); bottom: calc(100% + 10px); max-height: calc(100vh - 176px - var(--safe-b)); }
  @supports (height: 100dvh) { .setup { max-height: calc(100dvh - 176px - var(--safe-b)); } }
  .setup-head { padding: 10px 10px 10px 14px; gap: 8px; }
  .setup-head h2 { font-size: 10px; }
  .setup-bal span { display: none; }
  .setup-bal b { font-size: 9px; }
  .setup-body { padding: 12px 12px 14px; gap: 14px; }
  .su-sides { grid-template-columns: 1fr; gap: 8px; }
  .su-slip { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 11px 12px 10px; }
  .su-slip .su-rules { display: none; }
  .su-pc { display: none; }
  .su-pot, .su-f1 { display: none; }
  .su-flow { margin: 12px 10px 0; min-width: 24px; }
  .play-q { right: calc(66px + 12px + 6px); font-size: 7px; }
  .su-rules-m { display: block; }
  .su-cell { gap: 6px; }
  .su-cell small { font-size: 6px; }
  .su-cell b { font-size: 11px; }
  .su-cell.su-win b { font-size: 13px; }
  .su-cell em { font-size: 11px; }
  .su-done { height: 36px; padding: 0 12px; font-size: 8px; }
  .su-stake .su-v { font-size: 15px; }
}
.ticket.locked .tk-chev svg { transform: none !important; }
.online.ol-short .ol-l { display: none; }
.online.ol-off { visibility: hidden; }
/* bez napisu „Witaj, nick” – zostaje sam romb z inicjałem (otwiera menu profilu) */
#me-nick { display: none !important; }
.profile-btn { gap: 8px; }
/* profil: szary pikselowy ludzik (bez kółka), głowa co chwilę lekko podskakuje */
.me-ava { flex: none; display: block; width: 24px; height: 20px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5)); }
.me-ava svg { display: block; overflow: visible; }
.me-ava .av-l { fill: #b8b2c2; transition: fill .15s; }
.me-ava .av-d { fill: #858094; transition: fill .15s; }
.av-head { animation: avIdle 3.2s steps(1) infinite; }
@keyframes avIdle { 0%, 84%, 100% { transform: none; } 86%, 92% { transform: translateY(-1px); } }
.profile-btn:hover .me-ava .av-l, .profile-btn[aria-expanded="true"] .me-ava .av-l { fill: var(--pumpkin-hi); }
.profile-btn:hover .me-ava .av-d, .profile-btn[aria-expanded="true"] .me-ava .av-d { fill: var(--pumpkin-lo); }
.profile-btn:hover .av-head { animation: avHop .5s steps(2) infinite; }
@keyframes avHop { 50% { transform: translateY(-1px); } }

/* ============================================================
   Mniejsze ekrany
   ============================================================ */
@media (max-width: 1180px) {
  .soc, .rk { grid-template-columns: minmax(0, 1fr); }
  .lk { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr); }
  .lk-grid { grid-template-columns: 1fr; }
  .rk-tr { grid-template-columns: 40px minmax(0, 1fr) 60px 60px 100px 56px; }
  .rk-table.money .rk-tr { grid-template-columns: 40px minmax(0, 1fr) 112px 56px 56px 100px; }
}
@media (max-width: 980px) {
  .scr-body:has(> .lk) { overflow-y: auto; }
  .cx-cases { grid-template-columns: minmax(0, 1fr); }
  .cx-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: -2px -2px -4px; }
  .cx-list::-webkit-scrollbar { display: none; }
  .cx-case { flex: 1 0 170px; min-height: 0; grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; padding: 8px 10px 9px 6px; }
  .cx-case:hover { transform: translateY(-2px); }
  .cx-case[aria-selected="true"] { box-shadow: inset 0 -4px 0 var(--cc), 0 3px 0 rgba(4, 2, 8, 0.55), 0 0 22px color-mix(in srgb, var(--cc) 24%, transparent); }
  .cx-chest { width: 58px; height: 49px; }
  .cx-case-tx b { font-size: 9px; }
  .cx-case-tx small { font-size: 8px; }
  .iv-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-main { grid-template-columns: minmax(0, 1fr); }
  .st-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk { grid-template-columns: 1fr; grid-template-rows: minmax(380px, 58vh) auto; }
  .lk-stage { order: -1; }
  .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-split .split { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .scr-fit.scr-split > .split { grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; border-right: 0; border-bottom: 2px dashed var(--night-line); scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { flex: none; width: auto; height: 42px; }
  .settings-nav button:not([aria-selected="true"]) .sn-l { display: none; }
  .srow { grid-template-columns: 1fr; gap: 10px; }
  .binds { grid-template-columns: 1fr; }
  .toasts { top: calc(var(--bar-end) + 10px); bottom: auto; }
}
@media (max-width: 760px) {
  .scr { left: 8px; right: 8px; top: calc(var(--bar-end) + 8px); bottom: calc(8px + var(--safe-b)); }
  .scr-fit { bottom: auto; height: auto; margin: 0 auto; max-height: calc(100vh - var(--bar-end) - 16px - var(--safe-b)); }
  @supports (height: 100dvh) { .scr-fit { max-height: calc(100dvh - var(--bar-end) - 16px - var(--safe-b)); } }
  .scr-head { min-height: 62px; gap: 10px; padding: 10px; }
  .scr-ic { width: 38px; height: 38px; }
  .scr-ic-svg { width: 18px; height: 18px; }
  .scr-tt h2 { font-size: 12px; }
  .scr-sub { display: none; }
  .scr-head { flex-wrap: wrap; row-gap: 10px; }
  .scr-tools { order: 3; flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
  .scr-tools:not(:empty) + .scr-x { margin-left: auto; }
  .scr-tools .stabs { display: flex; width: 100%; }
  .scr-tools .stabs button { flex: 1; }
  .scr-body { padding: 12px; gap: 12px; }
  .settings-body { padding: 12px; }
  .cx-hero { grid-template-columns: minmax(0, 1fr); }
  .cx-view { min-height: 214px; }
  .cx-info { padding: 14px; border-left: 0; border-top: 2px dashed var(--night-line); background: rgba(26, 18, 38, 0.92); }
  .cx-title { font-size: 13px; }
  .cx-items, .iv-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .sk { height: 112px; padding: 7px 8px 8px; }
  .sk-tx small { font-size: 12.5px; }
  .reel-track .sk { width: 136px; }
  .reel { height: 132px; }
  .iv-head { flex-direction: column; align-items: stretch; }
  .iv-filter { display: grid; grid-template-columns: repeat(5, auto); }
  .iv-filter button { padding: 1px 4px 0; gap: 4px; font-size: 7px; }
  .iv-filter .cnt { display: none; }
  .iv-load .blk-h .meta { display: none; }
  .iv-slot { height: 124px; }
  .lk { grid-template-rows: minmax(420px, 62vh) auto; }
  .lk-act { left: 16px; right: 16px; display: flex; justify-content: center; }
  .lk-title { font-size: 14px; }
  .lk-desc { font-size: 13.5px; }
  .lk-hint { display: none; }
  .lk-grid { grid-template-columns: 1fr; }
  .rk-tr { grid-template-columns: 32px minmax(0, 1fr) 52px 52px; }
  .rk-tr > :nth-child(5), .rk-tr > :nth-child(6) { display: none; }
  .rk-table.money .rk-tr { grid-template-columns: 32px minmax(0, 1fr) 104px 44px; }
  .dd-btn { height: 38px; }
  .dd-pop { left: 0; right: auto; }
  .dd-btn .dd-v { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .ch { grid-template-rows: 190px auto; }
  .cal { gap: 4px; }
  .cal-1d { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cal-1d .cal-c { min-height: 46px; }
  .st-sum { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .st-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "s v"; align-items: center; gap: 6px 12px; padding: 10px 12px; }
  .st-card small { grid-area: k; }
  .st-card > b { grid-area: v; }
  .st-card > span { grid-area: s; font-size: 12.5px; }
  .st-list dd:has(small) { flex-direction: column; align-items: flex-end; gap: 5px; }
  .st-list dd small::before { content: none; }
  .st-list dd { white-space: nowrap; }
  .cal-c { min-height: 52px; padding: 6px 4px; }
  .cal-1t .cal-c { min-height: 84px; }
  .cal-c b { font-size: 7px; letter-spacing: -0.06em; }
  .cal-1t .cal-c b { font-size: 8px; }
  .cal-1t .cal-c small { display: none; }
  .cal-blank { min-height: 52px; }
  .st-card.hero > b { font-size: 13px; }
  .st-card > b { font-size: 11px; }
  .rk-table.money .rk-tr .num b { font-size: 8px; }
  .podium { min-height: 272px; }
  .p1 .pod-block { height: 112px; } .p2 .pod-block { height: 88px; } .p3 .pod-block { height: 70px; }
  .add-friend .btn { flex: none; padding: 0 14px; }
  .set-h { flex-direction: column; }
  .match-teams { grid-template-columns: 1fr; }
  .vs { display: none; }
}
@media (max-width: 600px) {
  .dock { bottom: calc(14px + var(--safe-b)); gap: 8px; }
  .side-act { width: 66px; }
  .side-act .sa-ic { width: 22px; height: 22px; }
  .side-act span { font-size: 7px; }
  .play { min-height: 72px; }
  .play-main { font-size: 16px; }
  .play-sub { font-size: 7px; }
  .play-q { right: calc(66px + 12px + 6px); font-size: 7px; }
  .usdt-ic { width: 26px; height: 26px; font-size: 15px; }
  .plate-btn { height: 26px; font-size: 8px; }
  .toasts { right: 12px; width: calc(100vw - 24px); }
  .acc-card { align-items: flex-start; gap: 14px; }
  .acc-card .ava { width: 52px; height: 52px; }
  .acc-card .ava .ava-svg { width: 32px; height: 27px; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .acc-grid dd { margin-bottom: 8px; overflow-wrap: anywhere; }
  .scr-tools .stabs button { padding: 1px 9px 0; font-size: 8px; }
}
@media (max-height: 640px) and (min-width: 601px) {
  .dock { bottom: 14px; gap: 8px; }
  .play { min-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}

/* ============================================================
   Skrzynki: ile naraz, kilka taśm, lista wygranych, wartość i wybór na kartach
   ============================================================ */
.cx-count { display: flex; align-items: center; gap: 6px; }
.cx-count > span { margin-right: auto; font: 400 8px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.cx-count button {
  min-width: 46px; height: 34px; font: 400 9px/1 var(--pixel); color: var(--bone-2);
  background: rgba(255, 255, 255, 0.04); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 2px 0 rgba(4, 2, 8, 0.5);
  transition: color .15s, border-color .15s, background-color .15s, transform .08s;
}
.cx-count button:hover:not(:disabled) { color: var(--bone); border-color: color-mix(in srgb, var(--cc) 55%, transparent); }
.cx-count button[aria-checked="true"] { color: #1b0f26; background: var(--cc); border-color: var(--cc); box-shadow: 0 2px 0 rgba(4, 2, 8, 0.5), 0 0 16px color-mix(in srgb, var(--cc) 45%, transparent); }
.cx-count button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.reels { display: grid; gap: 4px; }
.reels.multi .reel-wrap { padding: 6px 0; }
.reels.multi .reel-wrap::before { top: 2px; } .reels.multi .reel-wrap::after { bottom: 2px; }
.reels.multi .reel { height: 124px; }
.reels.multi .reel-track { top: 8px; gap: 6px; }
.reels.multi .reel-track .sk { width: 140px; height: 106px; padding: 6px 8px 7px; }
.reels.multi .sk-img { max-height: 56px; }
.reels.multi .sk-tx small { font-size: 13px; }
.cx-wins { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 290px; overflow-y: auto; }
.cx-wins li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 12px 5px 5px;
  background: radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%), rgba(0, 0, 0, 0.24);
  border-left: 3px solid var(--tc); border-radius: 3px; animation: rowIn .35s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.cx-wins li.t5 { animation: rowIn .35s cubic-bezier(.2, .8, .2, 1) backwards, rainbowTc 3.2s linear infinite; }
.cx-wins-art .sk-img { width: 84px; height: 42px; max-height: none; opacity: 1; }
.cx-wins-tx { min-width: 0; font-size: 15px; font-weight: 700; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-wins-tx b { display: block; margin-bottom: 2px; font: 400 7px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.cx-wins li > i { padding: 3px 6px 2px; font: 400 6.5px/1.5 var(--pixel); font-style: normal; text-transform: uppercase; color: #1b0f26; background: var(--tc); border-radius: 2px; }
.sk-val { position: absolute; top: 7px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 2px; font: 400 8px/1.5 var(--pixel); color: #ffd36a; background: rgba(10, 6, 16, 0.62); border-radius: 2px; }
.sk-val .larp-ic { width: 11px; height: 11px; }
.sk-pick { position: absolute; right: 8px; bottom: 9px; display: grid; place-items: center; width: 24px; height: 24px; color: #12301e; background: var(--toxic); border-radius: 3px; box-shadow: 0 2px 0 var(--toxic-lo); }
.sk-pick .pxi { width: 11px; height: 10px; }
button.sk.pick { border-color: var(--toxic); box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), 0 0 0 2px rgba(125, 255, 168, 0.35), 0 0 24px rgba(125, 255, 168, 0.22); }
button.sk.can:hover:not(:disabled) { transform: translateY(-3px); }
.sk.off { opacity: 0.36; filter: saturate(0.35); cursor: not-allowed; }

/* ============================================================
   Ulepszanie: wkład, koło szansy, cel; pod spodem moje skórki i lista do zdobycia
   ============================================================ */
.upg { --cc: #ff9f2e; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.upg > *, .upg-low > * { min-width: 0; }
.upg-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.upg-box {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px 18px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 143, 46, 0.06), transparent 60%), var(--card);
  border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
}
.upg-box .blk-h { margin: 0; }
.upg-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.upg-slot {
  position: relative; display: grid; place-items: center; height: 104px; padding: 6px; color: var(--bone-3);
  background: radial-gradient(100% 80% at 50% 115%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%), var(--well);
  border: 2px solid var(--night-line); border-bottom: 4px solid var(--tc); border-radius: 4px; transition: transform .12s, border-color .15s;
}
button.upg-slot:hover:not(:disabled) { transform: translateY(-2px); border-color: #ff5f6d; border-bottom-color: #ff5f6d; }
.upg-slot.empty { border-style: dashed; border-bottom-width: 2px; opacity: 0.55; }
.upg-slot.empty .pxi { width: 14px; height: 14px; }
.upg-slot .sk-img { max-width: 150px; max-height: 66px; }
.upg-slot i { position: absolute; left: 7px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font: 400 7px/1.5 var(--pixel); font-style: normal; color: #ffd36a; }
.upg-slot i .larp-ic { width: 10px; height: 10px; }
.upg-sum { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 14px; color: var(--bone-2); background: rgba(0, 0, 0, 0.26); border-radius: 3px; }
.upg-sum b { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1 var(--pixel); color: #ffd36a; text-shadow: 2px 2px 0 #6e3a06; }
.upg-mid { display: grid; justify-items: center; align-content: center; gap: 16px; padding: 6px 0; }
.upg-wheel { --ch: 0; position: relative; width: min(330px, 100%); aspect-ratio: 1; transition: filter .4s; }
.upg-wheel::before {
  content: ""; position: absolute; inset: 19%; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a1d3f, #120c1b 72%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.05), inset 0 -10px 30px rgba(0, 0, 0, 0.45), 0 0 50px rgba(0, 0, 0, 0.55);
}
.upg-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.upg-wheel .w-bg { fill: none; stroke: rgba(255, 95, 109, 0.32); stroke-width: 20; }
.upg-wheel .w-ch { fill: none; stroke: #4dff8a; stroke-width: 20; filter: drop-shadow(0 0 8px rgba(77, 255, 138, 0.65)); transition: stroke-dasharray .5s cubic-bezier(.2, .8, .2, 1); }
.upg-wheel .w-ticks line { stroke: rgba(241, 231, 210, 0.22); stroke-width: 2; }
.upg-wheel.empty .w-bg { stroke: rgba(255, 255, 255, 0.07); }
.upg-needle { position: absolute; inset: 0; pointer-events: none; }
.upg-needle i {
  position: absolute; left: 50%; top: -4px; width: 0; height: 0; margin-left: -12px;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 30px solid #fff3d6;
  filter: drop-shadow(0 0 7px rgba(255, 243, 214, 0.85)) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}
.upg-core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 0 24%; text-align: center; }
.upg-core b { font: 400 30px/1.1 var(--pixel); color: #4dff8a; text-shadow: 0 0 18px rgba(77, 255, 138, 0.55), 3px 3px 0 rgba(0, 0, 0, 0.5); }
.upg-core small { font-size: 13.5px; line-height: 1.3; color: var(--bone-2); }
.upg-wheel.empty .upg-core b { color: var(--bone-3); text-shadow: none; }
.upg-wheel.spin .upg-core b { animation: kickBlink 0.8s steps(2) infinite; }
.upg-wheel.win { filter: drop-shadow(0 0 34px rgba(77, 255, 138, 0.5)); }
.upg-wheel.win .upg-core b { font-size: 22px; animation: wonIn .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.upg-wheel.lose { filter: drop-shadow(0 0 34px rgba(255, 95, 109, 0.45)); }
.upg-wheel.lose .upg-core b { font-size: 22px; color: #ff5f6d; text-shadow: 0 0 18px rgba(255, 95, 109, 0.6), 3px 3px 0 rgba(0, 0, 0, 0.5); animation: wonIn .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.upg-go { min-width: 260px; }
.upg-target {
  position: relative; flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; min-height: 250px; padding: 16px;
  background: radial-gradient(100% 80% at 50% 100%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%), var(--well);
  border: 2px solid color-mix(in srgb, var(--tc) 45%, var(--night-line)); border-bottom: 4px solid var(--tc); border-radius: 4px;
}
.upg-target.none { place-content: center; justify-items: center; grid-template-rows: auto auto; gap: 12px; color: var(--bone-3); font-size: 15px; text-align: center; border-style: dashed; border-bottom-width: 2px; --tc: var(--night-line); }
.upg-target.none .pxi { width: 22px; height: 20px; color: var(--pumpkin); }
.upg-target-art { display: grid; place-items: center; min-height: 0; }
.upg-target-art .sk-img { max-width: 320px; max-height: 150px; }
.upg-target-tx { display: grid; gap: 5px; font-size: 18px; font-weight: 700; color: var(--tc); }
.upg-target-tx i { justify-self: start; padding: 3px 7px 2px; font: 400 7px/1.5 var(--pixel); font-style: normal; text-transform: uppercase; color: #1b0f26; background: var(--tc); border-radius: 2px; }
.upg-target-tx b { font: 400 8px/1.5 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.upg-target-val { display: flex; align-items: center; gap: 7px; font: 400 14px/1 var(--pixel); color: #ffd36a; }
.upg-target-val em { margin-left: auto; padding: 4px 7px 3px; font: 400 10px/1 var(--pixel); font-style: normal; color: #12301e; background: var(--toxic); border-radius: 2px; }
.upg-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; color: var(--bone-3); background: rgba(10, 6, 16, 0.55); border: 2px solid var(--night-line); border-radius: 4px; }
.upg-x:hover { color: #ff5f6d; border-color: #ff5f6d; }
.upg-x .pxi { width: 10px; height: 10px; }
.upg-target.won { animation: upgWon 1.2s ease-out; box-shadow: 0 0 0 3px #4dff8a, 0 0 44px rgba(77, 255, 138, 0.5); }
.upg-target.lost { opacity: 0.45; filter: grayscale(0.85); transition: opacity .4s, filter .4s; }
@keyframes upgWon { 0% { transform: scale(0.94); } 40% { transform: scale(1.04); } 100% { transform: none; } }
.upg-low { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.upg-low .iv-head { margin-bottom: 12px; }
.upg-filt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.upg-filt .stabs button { padding-inline: 9px; font-size: 7px; }
.upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; max-height: 560px; overflow-y: auto; padding: 2px 6px 6px 2px; margin: -2px -6px -6px -2px; scrollbar-width: thin; scrollbar-color: var(--night-line-2) transparent; }
@media (max-width: 1280px) {
  .upg-top { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) minmax(0, 1fr); }
  .upg-low { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .scr-fit { min-height: 0; }
  .cx-list { height: auto; min-height: 0; overflow-y: visible; margin: -2px -2px -4px; padding: 2px 2px 4px; }
  .cx-case { flex: 1 0 170px; }
  .cx-view { min-height: 230px; }
  .cx-hero { min-height: 0; }
  .upg-top { grid-template-columns: minmax(0, 1fr); }
  .upg-mid { order: -1; }
  .upg-wheel { width: min(280px, 80vw); }
  .reel-track .sk { width: 140px; }
  .sk { height: 120px; }
  .sk-img { max-height: 72px; }
  .upg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 440px; }
}
@media (max-width: 600px) {
  /* trzy zakładki skrzynek mieszczą się na wąskim ekranie */
  #cases-tools .stabs button { padding-inline: 4px; gap: 4px; min-width: 0; }
  #cases-tools .stabs button .pxi { display: none; }
  #cases-tools .stabs button .cnt { margin-left: 2px; }
}

@media (max-width: 980px) { .iv-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================
   Oględziny przedmiotu: okno z dużym podglądem 3D
   ============================================================ */
.iv-acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.iv-insp {
  display: grid; place-items: center; width: 34px; height: 30px; color: var(--bone-2);
  background: rgba(255, 255, 255, 0.035); border: 2px solid var(--night-line); border-radius: 4px; box-shadow: 0 2px 0 rgba(4, 2, 8, 0.5);
  transition: color .15s, border-color .15s, transform .08s;
}
.iv-insp:hover { color: var(--pumpkin-hi); border-color: rgba(255, 143, 46, 0.55); }
.iv-insp:active { transform: translateY(2px); box-shadow: none; }
.iv-insp .pxi { width: 12px; height: 12px; }
.cx-wins li[data-insp], .upg-target-art[data-insp] { cursor: zoom-in; }
.cx-wins li[data-insp]:hover { background: radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, var(--tc) 34%, transparent), transparent 70%), rgba(255, 255, 255, 0.05); }
.cx-items button.sk { cursor: zoom-in; }
.insp {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(120% 90% at 50% 40%, rgba(10, 6, 16, 0.5), rgba(8, 5, 14, 0.85)); backdrop-filter: blur(8px);
  animation: fade .2s ease-out;
}
.insp[hidden] { display: none; }
.insp-panel {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1180px, 100%); height: min(780px, 100%);
  color: var(--bone); background: radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--night-a), var(--night-b));
  border: 2px solid color-mix(in srgb, var(--tc) 60%, var(--night-line)); border-radius: 4px;
  box-shadow: 0 6px 0 var(--hard), 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 80px color-mix(in srgb, var(--tc) 22%, transparent);
  animation: scrIn .3s cubic-bezier(.2, .8, .2, 1);
}
.insp-panel.t5 { animation: scrIn .3s cubic-bezier(.2, .8, .2, 1), rainbowTc 3.2s linear infinite; }
.insp-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 2px dashed var(--night-line); }
.insp-tt { display: grid; gap: 8px; min-width: 0; }
.insp-tier { justify-self: start; padding: 3px 8px 2px; font: 400 8px/1.5 var(--pixel); text-transform: uppercase; color: #1b0f26; background: var(--tc); border-radius: 2px; }
.insp-tt h3 { margin: 0; font: 400 20px/1.3 var(--pixel); color: var(--tc); text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.insp-tt h3 small { display: block; margin-bottom: 4px; font-size: 9px; color: var(--bone-3); text-shadow: none; }
.insp-head .scr-x { margin-left: auto; }
.insp-view { position: relative; min-height: 0; }
.insp-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.insp-cv.grabbing { cursor: grabbing; }
.insp-hint { position: absolute; left: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; font: 400 7px/1.5 var(--pixel); text-transform: uppercase; color: rgba(241, 231, 210, 0.4); pointer-events: none; }
.insp-hint .pxi { width: 10px; height: 10px; }
.insp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px 18px; border-top: 2px dashed var(--night-line); }
.insp-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; color: var(--bone-2); background: rgba(0, 0, 0, 0.26); border-radius: 3px; }
.insp-chip b { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1 var(--pixel); color: #ffd36a; }
.insp-anim { margin-left: auto; --bh: 40px; color: #1b0f26; background: var(--tc); box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 40%, #000); }
@media (max-width: 760px) {
  .insp { padding: 8px; }
  .insp-tt h3 { font-size: 14px; }
  .insp-head { padding: 12px; }
  .insp-foot { padding: 10px 12px 12px; }
}

/* ============================================================
   Osiągnięcia: podsumowanie i pionowa lista (jeden wiersz na rodzaj, bieżący poziom, przycisk odbioru)
   ============================================================ */
.ac { display: grid; gap: 14px; }
.ac-sum { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ac-bar { position: relative; display: block; height: 12px; padding: 2px; background: var(--well); border: 2px solid var(--night-line-2); border-radius: 3px; overflow: hidden; }
.ac-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d9600f, var(--pumpkin), var(--pumpkin-hi)); border-radius: 1px; box-shadow: 0 0 8px rgba(255, 150, 50, 0.45); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.ac-bar.big { height: 14px; }
.ac-guest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ac-guest p { flex: 1; margin: 0; color: var(--bone-2); }
.ac-guest > .pxi { width: 14px; height: 14px; color: var(--pumpkin-hi); }
.ac-list { display: flex; flex-direction: column; gap: 8px; }
.ac-row {
  position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 12px 16px 12px 12px; background: var(--card);
  border: 2px solid var(--night-line); border-left-width: 5px; border-radius: 4px; box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5);
  animation: rowIn .32s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 35ms);
}
.ac-row.pop { animation: acPop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes acPop { 0% { transform: scale(0.97); filter: brightness(1.6); } }
.ac-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; color: var(--bone-3); background: var(--well); border: 2px solid var(--night-line-2); border-radius: 4px; }
.ac-ic .pxi { width: 24px; height: 24px; }
.ac-tx { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ac-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ac-hd b { font: 400 11px/1.4 var(--pixel); color: var(--bone); overflow-wrap: anywhere; }
.ac-tier { display: inline-flex; align-items: center; gap: 7px; font: 400 8px/1 var(--pixel); text-transform: uppercase; color: var(--bone-3); }
.ac-pips { display: inline-flex; gap: 3px; }
.ac-pips i { width: 8px; height: 8px; background: var(--well); border: 2px solid var(--night-line-2); border-radius: 1px; }
.ac-pips i.got { background: var(--toxic); border-color: rgba(125, 255, 168, 0.6); }
.ac-pips i.cur { border-color: var(--pumpkin); background: rgba(255, 143, 46, 0.35); }
.ac-tx small { font-size: 14.5px; line-height: 1.3; color: var(--bone-2); }
.ac-pr { display: flex; align-items: center; gap: 12px; max-width: 640px; }
.ac-pr .ac-bar { flex: 1; }
.ac-pr em { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 64px; font: 400 8px/1 var(--pixel); font-style: normal; color: var(--bone-2); }
.ac-pr em.ok { color: var(--toxic); }
.ac-pr em .pxi { width: 9px; height: 8px; }
.ac-act { flex: none; display: flex; justify-content: flex-end; min-width: 150px; }
.ac-rw { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 7px; background: rgba(255, 185, 61, 0.08); border: 2px solid rgba(255, 185, 61, 0.28); border-radius: 3px; }
.ac-rw b { font: 400 9px/1 var(--pixel); color: #ffd27a; white-space: nowrap; }
.ac-claim { gap: 8px; padding: 0 14px; height: 40px; font-size: 9px; }
.ac-claim b { font: 400 9px/1 var(--pixel); }
.ac-claim .larp-ic { width: 16px; height: 16px; }
.ac-fin { display: inline-flex; align-items: center; gap: 7px; font: 400 8px/1 var(--pixel); text-transform: uppercase; color: var(--toxic); }
.ac-fin .pxi { width: 10px; height: 9px; }
.ac-row.claim { border-color: rgba(125, 255, 168, 0.45); background: radial-gradient(90% 160% at 0% 50%, rgba(125, 255, 168, 0.12), transparent 60%), var(--card); box-shadow: 0 3px 0 rgba(4, 2, 8, 0.5), 0 0 22px rgba(125, 255, 168, 0.12); }
.ac-row.claim .ac-ic, .ac-row.finished .ac-ic { color: #2b1204; background: linear-gradient(180deg, #fff1b8, #ffc94d 55%, #d48a16); border-color: rgba(255, 220, 120, 0.7); box-shadow: 0 0 16px rgba(255, 190, 60, 0.3); }
.ac-row.claim .ac-bar i, .ac-row.finished .ac-bar i { background: linear-gradient(90deg, #2f9a5a, var(--toxic)); box-shadow: 0 0 8px rgba(125, 255, 168, 0.4); }
.ac-row.claim .ac-claim:not(:disabled) { animation: claimPulse 1.6s ease-in-out infinite; }
@keyframes claimPulse { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 var(--toxic-lo), 0 0 18px rgba(125, 255, 168, 0.55); } }
.ac-row.finished { opacity: 0.72; border-color: rgba(125, 255, 168, 0.2); }
.ac-row.open { border-left-color: rgba(255, 143, 46, 0.45); }
.toast.toast-ach { border-color: rgba(255, 205, 90, 0.6); }
.toast.toast-ach .ic { background: linear-gradient(180deg, #fff1b8, #ffc94d 55%, #d48a16); }
@media (max-width: 620px) { .ac-row { flex-wrap: wrap; } .ac-act { min-width: 0; width: 100%; justify-content: stretch; } .ac-act > * { flex: 1; justify-content: center; } }