/* Szkoła w Chmurze – wspólny wygląd wszystkich stron.
   Ładowany jako ostatni arkusz, więc nadpisuje style poszczególnych stron. */

:root {
  --swc-navy: #1c276e;
  --swc-blue: #2f6fd6;
  --swc-blue-hover: #3d7ce3;
  --swc-sky: #5aa9ff;
  --swc-surface: rgba(14,18,70,.62);
  --swc-surface-2: rgba(255, 255, 255, 0.05);
  --swc-line: rgba(255, 255, 255, 0.11);
  --swc-text: #eef3fb;
  --swc-muted: #a9b9d6;
  --swc-ok: #4ccf86;
  --swc-warn: #f2b84b;
  --swc-danger: #ef5b5b;
  --swc-radius: 12px;

  --accent-primary: var(--swc-sky);
  --accent-secondary: var(--swc-blue);
  --glass-bg: var(--swc-surface);
  --glass-border: var(--swc-line);
  --text-white: var(--swc-text);
  --text-sub: #d3ddef;
  --text-dim: var(--swc-muted);
}

/* =====================================================================
   PASEK PRZEWIJANIA APLIKACJI (SCROLLBAR) — Elegancki, zintegrowany z motywem SwC
   Zastępuje domyślny, biały pasek systemowy ze strzałkami
   ===================================================================== */
:root {
  --swc-sb-thumb: rgba(205,213,255, 0.32);
  --swc-sb-thumb-hover: rgba(255,201,74, 0.75);
  --swc-sb-thumb-active: #ffc94a;
  --swc-sb-track: transparent;
  --swc-sb-w: 8px;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--swc-sb-thumb) var(--swc-sb-track);
}
@media (min-width: 901px) {
  html {
    scrollbar-gutter: stable;
  }
}
@media (max-width: 900px) {
  html, body {
    scrollbar-gutter: auto !important;
    overflow-x: hidden !important;
  }
}

body {
  color: var(--swc-text);
  scrollbar-width: thin;
  scrollbar-color: var(--swc-sb-thumb) var(--swc-sb-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--swc-sb-thumb) var(--swc-sb-track);
}

/* WebKit / Chromium (Electron, Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: var(--swc-sb-w);
  height: var(--swc-sb-w);
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Wyłączenie systemowych strzałek góra/dół (GTK / Windows) */
::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--swc-sb-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .15s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--swc-sb-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--swc-sb-thumb-active);
}

[hidden] { display: none !important; }

/* ---------- Nowoczesne powierzchnie i dopracowane przyciski ---------- */
.neo-panel {
  background: var(--swc-surface) !important;
  border: 1px solid var(--swc-line) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28) !important;
  border-radius: 18px;
}
.neo-panel::before { display: none !important; }

.brand {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}

/* ---------- Przyciski i elementy aktywne - spójny design system ---------- */
button, input[type="button"], input[type="submit"] {
  font-family: 'Sen', system-ui, sans-serif;
  color: #fff;
}

/* Główny przycisk akcji (niebieski gradient + podświetlenie) */
.btn {
  background: linear-gradient(135deg, #2f6fd6 0%, #1e52ab 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 14px rgba(47, 111, 214, 0.38) !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  font-family: 'Sen', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
.btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3d7ce3 0%, #2563eb 100%) !important;
  box-shadow: 0 6px 20px rgba(47, 111, 214, 0.55) !important;
  transform: translateY(-1.5px) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}
.btn:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(47, 111, 214, 0.3) !important;
}
.btn:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.btn.btn-danger, .btn.danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.btn.btn-danger:hover:not(:disabled), .btn.danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-1.5px) !important;
  color: #ffffff !important;
}

/* Przycisk konturowy (outline) - jasny, wyrazisty tekst i szklane tło */
.btn-outline {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 9px 16px !important;
  font-family: 'Sen', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
.btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-color: rgba(90, 169, 255, 0.6) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
.btn-outline:active:not(:disabled) {
  transform: translateY(1px) !important;
}
.btn-outline.danger, .btn-outline.is-danger, .btn-outline.red {
  color: #ff8585 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}
.btn-outline.danger:hover:not(:disabled), .btn-outline.is-danger:hover:not(:disabled), .btn-outline.red:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
}
.btn-outline.green, .btn-outline.success {
  color: #6ee7b7 !important;
  background: rgba(74, 222, 128, 0.12) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
}
.btn-outline.green:hover:not(:disabled), .btn-outline.success:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.28) !important;
  border-color: rgba(74, 222, 128, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4) !important;
}

/* Wariant mały */
.sm, .btn-sm, .btn-outline.sm, .btn.sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
}

:focus-visible { outline: 2px solid var(--swc-sky); outline-offset: 2px; }

/* Menu użytkownika */
.user-pill img { border-color: rgba(255, 255, 255, 0.25) !important; }
.user-dropdown { background: #0d2350 !important; }

/* ---------- Stopka ---------- */
.swc-footer {
  margin-top: auto;
  padding: 28px 12px 6px;
  text-align: center;
  font-size: 13px;
  color: var(--swc-muted);
  font-family: 'Sen', system-ui, sans-serif;
}
.swc-footer a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.swc-footer a:hover { border-bottom-color: #fff; }

/* ---------- Globalne toasty ---------- */
#toastContainer { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: #0d2350; border: 1px solid var(--swc-line); border-left: 4px solid var(--swc-ok); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: toastIn 0.2s ease; max-width: 360px; pointer-events: auto; }
.toast.err { border-left-color: var(--swc-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Dotyk ---------- */
button, a, .uno-card, .c-btn, .tool-btn, .color-btn, .word-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (hover: none) {
  .uno-card:hover, .deck-area:hover { transform: none; }
  .hand-container .uno-card:hover { margin-top: 0; z-index: auto; }
  .hand-container .uno-card:active { transform: translateY(-10px); z-index: 10; }
  body.easy-mode .uno-card.dimmed:hover { transform: scale(0.95); }
}

/* ---------- Telefon ---------- */
@media (max-width: 768px) {
  body {
    padding: 10px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    background-attachment: scroll !important;
  }
  .neo-panel { padding: 14px; border-radius: 14px; }
  header { margin-bottom: 12px; }
  .brand { font-size: 19px !important; }
  .btn { padding: 12px 18px; }
  .btn-outline { padding: 9px 12px; font-size: 12px; }
  input, select, textarea { font-size: 16px !important; } /* iOS nie powiększa przy pisaniu */

  #toastContainer { top: 10px !important; left: 10px !important; right: 10px !important; }
  .toast { max-width: none; }

  .main-layout { flex-direction: column; gap: 12px; }
  .rules-sidebar { flex: none !important; width: 100%; order: 2; }

  /* Karty ONU */
  .board { gap: 18px; min-height: 170px; }
  .direction-indicator { width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; }
  .uno-card { width: 58px; height: 86px; font-size: 28px; border-width: 3px; }
  .uno-card.black span { font-size: 16px; }
  .uno-card.back span { font-size: 14px; }
  .cb-shape { font-size: 13px; }
  .hand-container { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: visible; width: 100%; padding: 18px 12px 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .hand-container .uno-card { flex: 0 0 auto; margin: 0 -4px; scroll-snap-align: start; }
  #btnCallUno { top: -46px; padding: 10px 24px; }
  .opponents { padding: 8px; gap: 6px; }
  .opp-card img { width: 36px; height: 36px; }
  .game-logs { position: static; width: 100%; order: 10; }
  #turnTimerDisplay { font-size: 20px; top: 4px; }
  .c-btn { width: 62px; height: 62px; }
  #colorPickerOverlay { width: calc(100% - 20px); max-width: 320px; }
  .win-title { font-size: 34px !important; }
  .win-name { font-size: 22px; }

  /* Menu użytkownika: tylko awatar, żeby nagłówek się mieścił */
  .user-pill { padding: 4px !important; }
  .user-pill > div { min-width: 0; }
  .user-pill-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px !important; }
  .user-pill-tag { display: none; }
}

/* Nagłówki bez gradientowego tekstu */
.win-title, .error-code {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #fff !important;
}

/* ---------- Przejścia między stronami ----------
   Wejście do gry: karta rośnie na cały ekran, a w środku widać już prawdziwą grę.
   Pozostałe przejścia: strona odsuwa się w bok, u góry biegnie linia postępu, nowa wjeżdża z przeciwnej strony. */
.swc-prev { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; z-index: -1; visibility: hidden; pointer-events: none; background: #0b1f45; }
.swc-prev.go { z-index: 99999; visibility: visible; opacity: 0; }
.swc-line { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--swc-sky, #5aa9ff); transform-origin: left; transform: scaleX(0); z-index: 100000; pointer-events: none; box-shadow: 0 0 10px rgba(90,169,255,.7); }
.swc-open.fill { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
.swc-open.card-clone { position: fixed; z-index: 100000; overflow: hidden; pointer-events: none; font-family: 'Sen', system-ui, sans-serif; color: var(--swc-text, #eef3fb); }
/* Treść strony = wszystko poza paskiem, ogłoszeniami i zakładkami kategorii. Tylko ona się porusza przy przejściu. */
@media all {
  html.swc-leave :is(.wrapper, .app) > :not(.swc-bar, .swc-top, .cat-nav, .scene, .dock, .swc-footer, .swc-sidebar-wrap, .swc-layout, .hub-layout),
  html.swc-leave body > :is(.main-layout, .error-card, main) { opacity: 0; transform: translate3d(var(--swc-out, -12px), 0, 0); transition: opacity .15s ease-in, transform .15s ease-in; }
  html.swc-dir-back { --swc-out: 12px; --swc-in: -14px; }
  html.swc-dir-fwd { --swc-out: -12px; --swc-in: 14px; }
  html.swc-enter :is(.wrapper, .app) > :not(.swc-bar, .swc-top, .cat-nav, .scene, .dock, .swc-footer, .swc-account-fixed, .swc-sidebar-wrap, .swc-layout, .hub-layout),
  html.swc-enter body > :is(.main-layout, .error-card, main) { animation: swc-page-in .34s cubic-bezier(.22, 1, .36, 1) backwards; }
  html.swc-dir-up { --swc-in-y: 10px; }
  /* treść startuje już częściowo widoczna – bez pustej klatki na początku */
  @keyframes swc-page-in { from { opacity: .35; transform: translate3d(var(--swc-in, 0px), var(--swc-in-y, 0px), 0); } }
  html.swc-opening :is(.wrapper, .app) > *, html.swc-opening body > .main-layout { opacity: .35; transition: opacity .35s ease; }
  html.swc-opening { overflow: hidden; }
}
/* Chromium: natywne przejście między dokumentami – pasek i zakładki zostają, treść płynnie się wymienia */
html.swc-vt .swc-top, html.swc-vt .swc-bar:not(.swc-top .swc-bar) { view-transition-name: swc-top; }
html.swc-vt .cat-nav { view-transition-name: swc-cat; }
html.swc-vt :is(.wrapper, .main-layout, .app):not(:is(.wrapper, .main-layout, .app) *) { view-transition-name: swc-main; }
html.swc-vt .swc-fb-float { view-transition-name: swc-fb; }
::view-transition-group(*) { animation-duration: .3s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-group(swc-main) { animation-duration: 0s; }
::view-transition-old(swc-main) { animation: swc-vt-out .15s ease-in both; }
::view-transition-new(swc-main) { animation: swc-vt-in .32s cubic-bezier(.22, 1, .36, 1) .05s both; }
@keyframes swc-vt-out { to { opacity: 0; transform: translate3d(var(--swc-out, 0px), 0, 0); } }
@keyframes swc-vt-in { from { opacity: 0; transform: translate3d(var(--swc-in, 0px), var(--swc-in-y, 0px), 0); } }

/* Wyłączone animacje (menu konta → Animacje): wszystko zmienia się od razu */
html.swc-noanim *, html.swc-noanim *::before, html.swc-noanim *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html.swc-noanim .swc-prev, html.swc-noanim .swc-open, html.swc-noanim .swc-cloud { display: none !important; }
/* Podgląd gry w rosnącej karcie i pierwsze wczytanie: bez własnych animacji wejścia (strona jest już widoczna) */
html.swc-preview *, html.swc-preview *::before, html.swc-preview *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
html.swc-from-card .swc-fb-float { animation: none; }

/* Przełącznik „Animacje” w menu konta */
.dd-anim { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.dd-switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background-color .2s ease; }
.dd-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(14px); transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
html:not(.swc-noanim) .dd-switch { background: var(--swc-orange, #ffc94a); }
html.swc-noanim .dd-switch::after { transform: none; }
/* Połysk na głównych przyciskach (komputer) */
@media (hover: hover) and (min-width: 901px) {
  .btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); }
  .btn:hover:not(:disabled)::after { transform: translateX(130%); transition: transform .65s ease; }
}


/* Wejście do stołu w Kartach ONU i Kalamburach: ekran poczekalni i gry „wyrasta" na miejsce */
@media all {
  /* tylko przy przełączaniu ekranów w trakcie – nie przy wczytaniu strony (wtedy wjeżdża cała treść naraz) */
  /* przy wczytaniu czas = 0 (zmiana samego czasu później nie uruchamia animacji ponownie – nic nie mruga po chwili) */
  :is(#lobbyScreen, #gameScreen, #tableSelectScreen) { animation: swc-table-in .32s cubic-bezier(.22, 1, .36, 1) backwards; }
  html.swc-booting :is(#lobbyScreen, #gameScreen, #tableSelectScreen) { animation-duration: 0s; }
  @keyframes swc-table-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
}


/* Informacja o koncie (prawy górny róg) */
.user-pill-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--swc-muted); line-height: 1.2; }
.swc-account-fixed { position: fixed; top: 10px; right: 12px; z-index: 99990; }
.swc-account-fixed .user-pill { background: rgba(9, 27, 61, .92); }
.swc-login { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--swc-blue); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; }

/* =====================================================================
   WSPÓLNY PASEK NA GÓRZE (ten sam na każdej stronie)
   ===================================================================== */
.swc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(90,169,255,.14); border: 1px solid rgba(90,169,255,.35); color: #cfe3ff; font-family: 'Sen', system-ui, sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; }
.swc-bar .danger { color: #ffb4b4; border-color: rgba(239,91,91,.4) !important; }

/* =====================================================================
   STOŁY: menu, poczekalnia z krzesłami i wczytywanie – wspólne dla wszystkich gier
   ===================================================================== */
.rm-menu { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 980px; margin: 0 auto; }
.rm-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: center; padding: 22px 26px; overflow: hidden; }
.rm-hero h1 { font-family: 'Sen', system-ui, sans-serif; font-size: 32px; line-height: 1.1; margin-bottom: 8px; }
.rm-hero p { color: var(--swc-muted); line-height: 1.55; font-size: 15px; max-width: 460px; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rm-chips span { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--swc-surface-2); border: 1px solid var(--swc-line); color: #d3ddef; }
.rm-cover { position: relative; height: 170px; display: grid; place-items: center; }
.rm-cover .fan { position: relative; width: 100%; height: 100%; }
.rm-cover .fan img { position: absolute; width: 96px; left: 50%; top: 10px; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,0,0,.4); transform-origin: 50% 150%; }
.rm-cover .fan img:nth-child(1) { transform: translateX(-50%) rotate(-18deg); } .rm-cover .fan img:nth-child(2) { transform: translateX(-50%) rotate(0); } .rm-cover .fan img:nth-child(3) { transform: translateX(-50%) rotate(18deg); }
.rm-cover .uc { position: absolute; width: 64px; height: 92px; border-radius: 10px; border: 4px solid #fff; display: grid; place-items: center; font: 800 28px 'Sen', system-ui, sans-serif; color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35); left: 50%; top: 22px; transform-origin: 50% 150%; }
.rm-cover .uc.r { background: #e5484d; transform: translateX(-50%) rotate(-22deg); } .rm-cover .uc.y { background: #f5a524; transform: translateX(-50%) rotate(-7deg); }
.rm-cover .uc.g { background: #3fb86b; transform: translateX(-50%) rotate(8deg); } .rm-cover .uc.b { background: #3b82f6; transform: translateX(-50%) rotate(23deg); }
.rm-cover .pen { font-size: 64px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); transform: rotate(-20deg); }
.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rm-grid.has-no-create { display: grid; grid-template-columns: 1fr !important; max-width: 640px; margin: 0 auto; width: 100%; }
.rm-card { padding: 20px; position: relative; }
.rm-card h2 { font-family: 'Sen', system-ui, sans-serif; font-size: 19px; margin-bottom: 4px; }
.rm-card .sub { font-size: 13.5px; color: var(--swc-muted); margin-bottom: 14px; line-height: 1.45; }
.rm-card .btn, .rm-card .btn-outline { width: 100%; justify-content: center; margin: 0; padding: 13px 18px; font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; }
.rm-card .btn-outline + .btn, .rm-card .btn + .btn-outline { margin-top: 8px; }
.rm-card .code-in { width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--swc-line); border-radius: 10px; padding: 13px 14px; color: #fff; font: 800 18px ui-monospace, Menlo, monospace; letter-spacing: .22em; text-align: center; text-transform: uppercase; outline: none; margin-bottom: 8px; }
.rm-card .code-in:focus { border-color: var(--swc-sky); }
.rm-card .code-in::placeholder { letter-spacing: .1em; font-size: 14px; font-weight: 600; color: rgba(169,185,214,.6); }
.rm-list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--swc-line); border-radius: 12px; padding: 11px 14px; margin-top: 8px; }
.rm-list-row b { font-size: 15px; display: block; }
.rm-list-row small { color: var(--swc-muted); font-size: 12.5px; }
.rm-list-row .btn { width: auto; padding: 8px 16px; font-size: 13px; }
.rm-empty { text-align: center; color: var(--swc-muted); font-size: 14px; padding: 18px; border: 1px dashed var(--swc-line); border-radius: 12px; }
.rm-ban { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; border-radius: inherit; background: rgba(9,27,61,.92); gap: 6px; }
.rm-ban b { font-family: 'Sen', system-ui, sans-serif; font-size: 17px; }
.rm-ban small { color: var(--swc-muted); }

/* Poczekalnia: stół z krzesłami */
.rm-lobby { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; width: 100%; max-width: 1180px; margin: 0 auto; align-items: start; }
.rm-seatscard { padding: 20px; }
.rm-seatscard h2 { font-family: 'Sen', system-ui, sans-serif; font-size: 21px; }
.rm-seatscard .intro { color: var(--swc-muted); font-size: 14px; margin-top: 3px; }
.rm-table { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 16px auto 10px; }
.rm-felt { position: absolute; left: 18%; right: 18%; top: 18%; bottom: 18%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3f86e6 0%, #1f5cc0 55%, #173f86 100%); box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 0 0 4px rgba(255,255,255,.16), inset 0 -10px 24px rgba(0,0,0,.25); display: grid; place-items: center; text-align: center; padding: 8px; }
.rm-felt small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.rm-felt b { display: block; font: 800 clamp(18px, 3.4vw, 30px) ui-monospace, Menlo, monospace; letter-spacing: .16em; color: #fff; margin: 2px 0; }
.rm-felt em { font-style: normal; font-size: 12.5px; color: #dbe9ff; font-weight: 600; }
.rm-seat { position: absolute; left: var(--x); top: var(--y); width: 74px; transform: translate(-50%, -50%); text-align: center; animation: rm-seat-in .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rm-seat-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.rm-seat .av { position: relative; width: 46px; height: 46px; margin: 0 auto 4px; border-radius: 50%; }
.rm-seat .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.55); display: block; }
.rm-seat.me .av img { border-color: var(--swc-sky); box-shadow: 0 0 0 3px rgba(90,169,255,.35); }
.rm-seat .crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 16px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.rm-seat .nm { font-size: 12px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-seat .kick { position: absolute; top: -6px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(239,91,91,.9); color: #fff; font-size: 11px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.rm-seat.vacant .av { border: 2px dashed rgba(255,255,255,.28); display: grid; place-items: center; color: rgba(255,255,255,.4); font-size: 20px; }
.rm-seat.vacant .nm { color: rgba(255,255,255,.35); font-weight: 600; }
.rm-table.dense .rm-seat { width: 56px; } .rm-table.dense .rm-seat .av { width: 36px; height: 36px; } .rm-table.dense .rm-seat .nm { font-size: 10.5px; }
.rm-invite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--swc-line); margin-top: 8px; }
.rm-invite .lbl { font-size: 12.5px; color: var(--swc-muted); }
.rm-invite b { font: 800 20px ui-monospace, Menlo, monospace; letter-spacing: .18em; }
.rm-invite .grow { margin-left: auto; display: flex; gap: 8px; }
.rm-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.rm-actions .btn { width: 100%; padding: 14px 20px; font-size: 16px; font-family: 'Sen', system-ui, sans-serif; font-weight: 700; color: #fff; cursor: pointer; justify-content: center; }
.rm-wait { text-align: center; color: var(--swc-muted); font-size: 14px; padding: 6px; }
.rm-rules { padding: 18px; font-size: 13.5px; line-height: 1.55; color: var(--swc-muted); }
.rm-rules h3 { font-family: 'Sen', system-ui, sans-serif; font-size: 17px; color: #fff; margin-bottom: 8px; }
.rm-rules ul { list-style: none; margin: 8px 0; }
.rm-rules li { padding-left: 16px; position: relative; margin-bottom: 6px; }
.rm-rules li::before { content: "•"; position: absolute; left: 0; color: var(--swc-sky); font-weight: 900; }
.rm-rules li b, .rm-rules b { color: #fff; }
.rm-rules .rm-note { background: rgba(255,255,255,.05); border-left: 3px solid var(--swc-sky); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.rm-settings { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--swc-line); }
.rm-settings h3 { font-family: 'Sen', system-ui, sans-serif; font-size: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.rm-settings h3 small { font-size: 11.5px; color: var(--swc-muted); font-weight: 500; }
.rm-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rm-set-grid label { display: block; font-size: 12.5px; color: var(--swc-muted); font-weight: 600; margin-bottom: 4px; }
.rm-set-grid select { width: 100%; background: rgba(0,0,0,.35); border: 1px solid var(--swc-line); color: #fff; border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 14px; outline: none; }
.rm-set-grid select:disabled { opacity: .75; }

/* Ekran wczytywania stołu: krzesła zapalają się kolejno, na koniec stół się „zatrzaskuje" */
.rm-loader { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; background: rgba(5, 12, 34, .88); animation: rm-fade .2s ease backwards; }
.rm-loader.out { animation: rm-fade-out .35s ease forwards; }
@keyframes rm-fade { from { opacity: 0; } } @keyframes rm-fade-out { to { opacity: 0; } }
.rm-loader-box { text-align: center; }
.rm-loader svg { width: min(78vw, 380px); height: auto; overflow: visible; }
.rm-loader .felt { fill: url(#rmFelt); transform-box: fill-box; transform-origin: center; animation: rm-felt-in .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.rm-loader .rim { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-dasharray: 520; stroke-dashoffset: 520; animation: rm-draw .9s ease .1s forwards; }
.rm-loader .chair { fill: rgba(156,201,255,.28); transform-box: fill-box; transform-origin: center; animation: rm-chair-in .4s cubic-bezier(.22, 1, .36, 1) backwards, rm-chair-load 1.4s ease-in-out infinite; animation-delay: calc(.25s + var(--i) * .05s), calc(.7s + var(--i) * (1.4s / var(--n))); }
.rm-loader.ready .chair { fill: #9cc9ff; animation: rm-chair-in .35s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i) * .04s); }
.rm-loader.ready .felt { animation: rm-felt-snap .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes rm-felt-in { from { transform: scale(.2); opacity: 0; } }
@keyframes rm-draw { to { stroke-dashoffset: 0; } }
@keyframes rm-chair-in { from { transform: scale(0); opacity: 0; } }
@keyframes rm-chair-load { 0%, 100% { fill: rgba(156,201,255,.28); transform: scale(1); } 20% { fill: #cfe6ff; transform: scale(1.35); } 40% { fill: rgba(156,201,255,.28); transform: scale(1); } }
@keyframes rm-felt-snap { 40% { transform: scale(1.02); } }
.rm-loader h2 { font-family: 'Sen', system-ui, sans-serif; font-size: 22px; margin-top: 8px; }
.rm-loader p { color: var(--swc-muted); font-size: 14.5px; margin-top: 6px; min-height: 22px; }
.rm-loader p b { font-family: ui-monospace, Menlo, monospace; letter-spacing: .16em; color: #fff; font-size: 18px; }

@media (max-width: 900px) {
  .rm-hero { grid-template-columns: 1fr; padding: 18px; } .rm-cover { order: -1; height: 140px; }
  .rm-grid { grid-template-columns: 1fr; }
  .rm-lobby { grid-template-columns: minmax(0, 1fr); }
  .rm-hero h1 { font-size: 26px; }
}
@media (max-width: 520px) {
  .rm-seat { width: 58px; } .rm-seat .av { width: 38px; height: 38px; } .rm-seat .nm { font-size: 10.5px; }
  .rm-table.dense .rm-seat { width: 44px; } .rm-table.dense .rm-seat .av { width: 28px; height: 28px; } .rm-table.dense .rm-seat .nm { display: none; }
  .rm-felt { left: 22%; right: 22%; top: 24%; bottom: 24%; }
}

.swc-pop { position: fixed; top: 72px; right: 16px; z-index: 99995; width: min(320px, calc(100vw - 24px)); padding: 16px; border-radius: 16px; background: #0d2350; border: 1px solid var(--swc-line); box-shadow: 0 18px 44px rgba(0,0,0,.5); animation: swc-pop-in .22s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes swc-pop-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.swc-pop h3 { font-family: 'Sen', system-ui, sans-serif; font-size: 16px; margin-bottom: 10px; }
.swc-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--swc-line); cursor: pointer; }
.swc-switch:first-of-type { border-top: none; }
.swc-switch b { display: block; font-size: 14px; } .swc-switch small { display: block; color: var(--swc-muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.swc-switch input { appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; transition: background .15s; }
.swc-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.swc-switch input:checked { background: var(--swc-blue); } .swc-switch input:checked::after { transform: translateX(18px); }

/* ===== Pasek: nazwa gry po lewej, przy nazwie strony ===== */
.swc-left { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; flex-wrap: nowrap; }
.swc-left .swc-brand { margin-right: 0; }
.swc-sep { width: 1px; height: 30px; background: var(--swc-line); flex: none; }
@media (max-width: 768px) { .swc-sep { height: 22px; } .swc-left { gap: 8px; } }

/* Kod stołu jest tylko w poczekalni (na dole); nie ma go na pasku. Wyjście ze stołu = przycisk „Cofnij” w poczekalni */
#roomCodeBadge, #codePill, #btnLeaveTable, #btnLeave { display: none !important; }

/* Stół: logo strony i liczba graczy zamiast kodu */
.rm-felt .logo { width: clamp(38px, 7vw, 58px); height: auto; opacity: .95; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.rm-felt em { display: block; margin-top: 6px; }

/* Przycisk „Cofnij” w poczekalni */
.rm-lobby-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rm-back { padding: 8px 14px !important; font-size: 13px !important; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }

/* Okno z zasadami (przycisk „Zasady” na pasku w każdej grze) */
.rm-modal { position: fixed; inset: 0; z-index: 9996; background: rgba(4,10,28,.86); display: grid; place-items: center; padding: 18px; overflow-y: auto; animation: rm-fade .2s ease backwards; }
.rm-modal .box { background: #0d2350; border: 1px solid var(--swc-line); border-radius: 20px; padding: 24px; max-width: 560px; width: 100%; animation: rm-box-in .35s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes rm-box-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.rm-modal .rm-rules { padding: 0; }
.rm-modal .close { margin-top: 16px; text-align: right; }
.rm-modal .close .btn { padding: 10px 22px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; }

/* ONU: panel boczny tylko z legendą kształtów (dla trybu daltonisty) – zasady są pod przyciskiem „Zasady” */
.rules-sidebar { display: none !important; }
body.colorblind-mode .rules-sidebar { display: block !important; }

/* Odznaka Sztabu i Opiekunów */
.badge-staff {
  display: inline-block;
  background: linear-gradient(135deg, #f2b84b, #e08b14);
  color: #1a1000;
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 3px;
  box-shadow: 0 2px 6px rgba(242, 184, 75, 0.35);
}
.pill-staff-shield {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 13px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.user-pill.is-staff-pill {
  border-color: rgba(242, 184, 75, 0.45) !important;
  background: rgba(242, 184, 75, 0.08) !important;
}
.staff-icon {
  font-size: 14px;
}
.rm-seat.is-staff .av img {
  border-color: #f2b84b !important;
  box-shadow: 0 0 0 2px rgba(242, 184, 75, 0.45);
}

/* Modal wyboru osoby do usunięcia przy zmniejszaniu limitu */
.kick-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 12, 32, 0.82);
  backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kick-modal-box {
  background: #0d2350;
  border: 1px solid var(--swc-line);
  border-radius: 18px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.kick-modal-box h3 {
  font-family: 'Sen', system-ui, sans-serif;
  font-size: 19px;
  margin-bottom: 8px;
  color: #fff;
}
.kick-modal-box p {
  font-size: 13.5px;
  color: var(--swc-muted);
  line-height: 1.45;
  margin-bottom: 16px;
}
.kick-modal-players {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.kick-modal-player-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--swc-line);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.15s ease;
  text-align: left;
}
.kick-modal-player-btn:hover {
  background: rgba(239, 91, 91, 0.2);
  border-color: rgba(239, 91, 91, 0.5);
  color: #ffb4b4;
}
.kick-modal-player-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}


/* =====================================================================
   NOWOCZESNY UKŁAD PASEK + ZAKŁADKI + MOBILNOŚĆ
   ===================================================================== */
.swc-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 18px !important;
  padding: 10px 20px !important;
  min-height: 68px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1450px !important;
  margin: 0 auto 16px !important;
  position: relative !important;
  border-radius: 18px !important;
  z-index: 50 !important;
}
.swc-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
.swc-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #fff !important;
  min-width: 0 !important;
  flex: none !important;
}
.swc-brand img {
  width: 32px !important;
  height: 32px !important;
  flex: none !important;
  object-fit: contain !important;
  display: block !important;
}
.swc-brand strong {
  display: block !important;
  font-family: 'Sen', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  color: #fff !important;
}
.swc-brand span {
  display: block !important;
  font-size: 12px !important;
  color: var(--swc-muted) !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
.swc-sep {
  display: block !important;
  width: 1px !important;
  height: 24px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  flex: none !important;
  margin: 0 4px !important;
}
.swc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: rgba(90, 169, 255, 0.14) !important;
  border: 1px solid rgba(90, 169, 255, 0.35) !important;
  color: #cfe3ff !important;
  font-family: 'Sen', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex: none !important;
}
.swc-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
.swc-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.swc-actions [hidden],
.swc-actions .is-hidden,
.swc-actions [style*="display: none"],
.swc-actions [style*="display:none"],
#btnPauseOnu.is-hidden,
#btnPauseOnu[style*="display: none"],
#btnPauseOnu[style*="display:none"] {
  display: none !important;
}

.swc-actions .btn-outline:not([hidden]):not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
.swc-actions .btn:not([hidden]):not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
.swc-actions .swc-btn:not([hidden]):not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]) {
  height: 38px !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}
#authHeader, .swc-auth {
  display: flex !important;
  align-items: center !important;
  flex: none !important;
}
.user-pill {
  height: 44px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 4px 14px 4px 5px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.user-pill:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(90, 169, 255, 0.45) !important;
  transform: translateY(-1px) !important;
}
.user-pill img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid var(--accent-primary) !important;
  object-fit: cover !important;
  display: block !important;
  flex: none !important;
}
.user-pill-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--swc-muted) !important;
  line-height: 1.1 !important;
}
.user-pill-name {
  font-family: 'Sen', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  color: #fff !important;
  line-height: 1.15 !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.user-pill-tag {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--swc-muted) !important;
  line-height: 1.1 !important;
}

/* Zakładki przewijane dotykowo */
.main-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px 2px 8px !important;
  border-bottom: 1px solid var(--swc-line) !important;
}
.main-tabs::-webkit-scrollbar { display: none !important; }

.main-tab {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 18px !important;
  font-family: 'Sen', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--swc-line) !important;
  color: var(--swc-muted) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.main-tab:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.main-tab.active {
  background: linear-gradient(135deg, #2f6fd6, #1e52ab) !important;
  color: #fff !important;
  border-color: rgba(90, 169, 255, 0.5) !important;
  box-shadow: 0 4px 14px rgba(47, 111, 214, 0.4) !important;
}

.sub-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding-bottom: 4px !important;
}
.sub-tabs::-webkit-scrollbar { display: none !important; }

.game-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.game-tabs::-webkit-scrollbar { display: none !important; }

/* Karta zalogowanego gracza / uprawnionego w panelu */
.active-user-card {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  background: rgba(0, 0, 0, 0.24) !important;
  border: 1px solid var(--swc-line) !important;
  border-radius: 14px !important;
}
.active-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.active-user-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  flex: none !important;
}
.active-user-details {
  min-width: 0 !important;
}
.active-user-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.active-user-name {
  font-family: 'Sen', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.active-user-meta {
  font-size: 12.5px !important;
  color: var(--swc-muted) !important;
  margin-top: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.active-user-meta .sep {
  opacity: 0.4;
}
.active-user-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

/* =====================================================================
   DOSTOSOWANIE MOBILNE (TELEFONY I PIONOWE TABLETY)
   ===================================================================== */
@media (max-width: 900px) {
  body {
    padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }
  body:has(.swc-bar),
  body:has(.swc-top) {
    padding-top: max(50px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
  }
  .wrapper {
    gap: 14px !important;
  }

  .swc-bar,
  .swc-top {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Pasek górny na telefonie: zgrabny, nowoczesny, 52px */
  .swc-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
    margin: 0 auto 12px !important;
    border-radius: 16px !important;
    width: 100% !important;
    position: relative !important;
    background: rgba(11, 33, 82, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(205,213,255, 0.22) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  }

  /* Od lewej delikatniejsze i zgrabniejsze */
  .swc-left, .swc-bar > .swc-brand {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .swc-brand {
    gap: 7px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }
  .swc-brand > div {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }
  .swc-brand img {
    width: 24px !important;
    height: 24px !important;
    flex: none !important;
    object-fit: contain !important;
  }
  .swc-brand strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }
  .swc-brand span {
    display: none !important;
  }
  .swc-sep {
    display: none !important;
  }
  .swc-chip {
    display: none !important;
  }

  .swc-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* Na telefonie ukrywamy przycisk powrotu do gier w nagłówku, bo jest dolna nawigacja */
  .swc-actions a[href="/"],
  .swc-actions a[title="Lista gier"] {
    display: none !important;
  }

  .swc-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .swc-actions:empty,
  .swc-actions:has(> a[href="/"]),
  .swc-actions:has(> a[title="Lista gier"]),
  body .swc-bar .swc-actions:has(a[href="/"]),
  body .swc-bar .swc-actions:has(a[title="Lista gier"]) {
    display: none !important;
  }

  .swc-actions .btn-text,
  .swc-actions .btn-outline .btn-text,
  .swc-actions .btn .btn-text {
    display: none !important;
  }

  .swc-actions [hidden],
  .swc-actions .is-hidden,
  .swc-actions [style*="display: none"],
  .swc-actions [style*="display:none"],
  #btnPauseOnu.is-hidden,
  #btnPauseOnu[style*="display: none"],
  #btnPauseOnu[style*="display:none"] {
    display: none !important;
  }

  .swc-actions .btn-outline:not([href="/"]):not([title="Lista gier"]):not([hidden]):not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
  .swc-actions .btn:not([hidden]):not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]),
  .swc-actions .swc-btn:not([hidden]):not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: 0 !important;
  }

  /* Na telefonie ukrywamy przycisk powrotu w nagłówku, bo użytkownik ma dolny dock nawigacji */
  .swc-actions a[href="/"],
  .swc-actions a[title="Lista gier"],
  .swc-actions .btn-outline[href="/"],
  .swc-actions .btn-outline[title="Lista gier"] {
    display: none !important;
  }

  #authHeader, .swc-auth {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .user-pill {
    height: 36px !important;
    box-sizing: border-box !important;
    padding: 2px 8px 2px 3px !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }
  .user-pill img {
    width: 28px !important;
    height: 28px !important;
    flex: none !important;
    object-fit: cover !important;
  }
  .user-pill-label, .user-pill-tag {
    display: none !important;
  }
  .user-pill-name {
    max-width: 70px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Listy elementów na telefonie */
  .active-user-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .active-user-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .active-user-actions .btn-outline,
  .active-user-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
  }

  .item {
    padding: 12px 14px !important;
  }
  .item-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .item-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .item-actions .btn-outline,
  .item-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 12px !important;
  }

  .main-tab {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Formularze i siatki na telefonie */
  .grid-dev-2, .team-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-boxes-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-box-val {
    font-size: 20px !important;
  }
  .card-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .segmented {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .segmented label {
    padding: 8px 6px !important;
    font-size: 12.5px !important;
  }
  .ban-form {
    grid-template-columns: 1fr !important;
  }
  .field {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 480px) {
  .stat-boxes-grid {
    grid-template-columns: 1fr !important;
  }
  .user-pill-name {
    max-width: 65px !important;
  }
  .swc-brand strong {
    font-size: 13px !important;
    letter-spacing: -0.25px !important;
  }
}

@media (max-width: 350px) {
  .user-pill-name {
    display: none !important;
  }
  .user-pill {
    padding: 3px !important;
    border-radius: 50% !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
  }
  .swc-brand strong {
    font-size: 12.5px !important;
    letter-spacing: -0.3px !important;
  }
}



/* =====================================================================
   PODSTAWA WSPÓLNA DLA WSZYSTKICH STRON (czcionka, tło) – żeby nowe strony nie wyglądały inaczej
   ===================================================================== */
/* kolor zastępczy = uśrednione tło (gdyby obrazek nie był jeszcze gotowy, strona nie robi się ciemna) */
html { background: #0b1f45 linear-gradient(180deg, #313f98 0%, #23529b 25%, #1b427e 50%, #153263 75%, #0b2047 100%) fixed; }
/* Tło jako osobna, przyklejona warstwa (GPU) – przewijanie nie przemalowuje wielkiego obrazka na każdej klatce */
html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-image-url, url('/data/image/background.png')) center/cover no-repeat; transform: translateZ(0); will-change: transform; }
/* tło jako obrazek dekodowany od razu (header.js) – nie ma klatki bez tła przy przejściu */
#swcBg { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; pointer-events: none; transform: translateZ(0); user-select: none; }
html:has(#swcBg)::before { display: none; }
html:has(body[data-phase]) #swcBg { display: none; }
body { font-family: 'Sen', system-ui, sans-serif; color: var(--swc-text); }
body.page-user, body.page-kahoot, body.page-events, body.page-hub, body.page-admin, body.page-404 {
  background: transparent;
}
/* Zakładki główne: na komputerze zawijają się do kilku rzędów (żadna się nie ucina), na telefonie przewija się je palcem */
@media (min-width: 901px) { .main-tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 8px !important; } }
@media (max-width: 900px) { .main-tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); scroll-snap-type: x proximity; } .main-tab { scroll-snap-align: start; } }
/* Profil: elementy nie wystają poza kartę na telefonie */
body.page-user .user-hero-card { flex-wrap: wrap; }
/* =====================================================================
   UNIWERSALNY UKŁAD ZAWSZE PRZYKLEJONEJ STOPKI (STICKY FOOTER)
   Stopka zawsze na samym dole ekranu (przy małej treści) lub pod treścią
   ===================================================================== */
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}

body > :is(.wrapper, .main-layout, .app, .hub-layout, .mt-main, .mt-wrap) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

body > :is(.gate, .error-card),
main.gate,
.neo-panel.gate {
  width: min(520px, calc(100% - 32px)) !important;
  max-width: 520px !important;
  margin: auto auto !important;
  align-self: center !important;
  flex: 0 0 auto !important;
}

:is(.wrapper, .main-layout, .app) > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

body.page-kahoot { padding: 14px 14px 24px; box-sizing: border-box; }
body.page-kahoot > .swc-bar, body.page-kahoot .kh-container { max-width: 960px; }

/* =====================================================================
   PASEK BOCZNY SZKOŁY W CHMURZE (Zdj 2 & Zdj 4) + UKŁAD STRONY
   ===================================================================== */
.hub-layout, .swc-layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.hub-layout[hidden],
.hub-layout.is-hidden,
.hub-layout[style*="display:none"],
.hub-layout[style*="display: none"] {
  display: none !important;
}
.swc-sidebar-wrap {
  width: 265px;
  flex: none;
  position: sticky;
  top: 20px;
  z-index: 20;
}
.hub-main-col, .swc-main-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.swc-sidebar {
  width: 100%;
  background: linear-gradient(180deg, rgba(20,26,90,.68) 0%, rgba(14,18,70,.72) 100%) !important;
  border: 1px solid rgba(205,213,255, 0.22) !important;
  border-radius: 24px;
  padding: 22px 14px 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42) !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  backdrop-filter: blur(14px);
}

.swc-sidebar .sb-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(205,213,255, 0.16);
}
.swc-sidebar .sb-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #1c276e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  margin-bottom: 10px;
  overflow: hidden;
  border: 2px solid rgba(90, 169, 255, 0.55);
  flex: none;
}
.swc-sidebar .sb-avatar .sb-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.swc-sidebar .sb-avatar .sb-av-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.swc-sidebar .sb-name {
  font-family: 'Sen', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.25;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swc-sidebar .sb-sub {
  font-family: 'Sen', system-ui, sans-serif;
  font-size: 12.5px;
  color: #cdd5ff;
  margin-top: 3px;
  font-weight: 600;
}

.swc-sidebar .sb-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.swc-sidebar .sb-sep {
  height: 1px;
  background: rgba(205,213,255, 0.18);
  margin: 6px 4px;
}
.swc-sidebar .sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-family: 'Sen', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #d3ddef;
  transition: all 0.18s ease;
  min-height: 44px;
  box-sizing: border-box;
}
.swc-sidebar .sb-item:hover {
  background: rgba(205,213,255, 0.14);
  color: #ffffff;
  transform: translateX(3px);
}
.swc-sidebar .sb-item.active {
  background: #ffffff !important;
  color: #1c276e !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transform: none;
}
.swc-sidebar .sb-item.active .sb-label {
  color: #1c276e !important;
}
.swc-sidebar .sb-item .sb-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.swc-sidebar .sb-item .sb-ico svg {
  display: block;
}
.swc-sidebar .sb-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.swc-sidebar .sb-badge {
  background: #ffc94a;
  color: #14284f;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  flex: none;
  letter-spacing: 0.02em;
}
.swc-sidebar .sb-badge.sb-badge-role {
  background: #1d4ed8;
  color: #ffffff;
}
.swc-sidebar .sb-item-dismiss {
  all: unset;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #9fb2d9;
  cursor: pointer;
  opacity: 0.6;
  margin-left: 4px;
  flex: none;
  transition: opacity .15s, background .15s, color .15s;
}
.swc-sidebar .sb-item:hover .sb-item-dismiss, .swc-sidebar .sb-item-dismiss:focus-visible {
  opacity: 1;
}
.swc-sidebar .sb-item-dismiss:hover {
  background: rgba(239, 91, 91, 0.25);
  color: #ff9b9b;
}

@media (max-width: 900px) {
  .hub-layout, .swc-layout {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .swc-sidebar-wrap {
    width: 100% !important;
    position: static !important;
  }
  .swc-sidebar {
    padding: 14px 16px;
    border-radius: 18px;
  }
  .swc-sidebar .sb-user {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .swc-sidebar .sb-avatar {
    width: 46px;
    height: 46px;
    margin-bottom: 0;
  }
  .swc-sidebar .sb-avatar .sb-av-circle svg {
    width: 24px;
    height: 24px;
  }
  .swc-sidebar .sb-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
  }
  .swc-sidebar .sb-item {
    padding: 7px 10px;
    min-height: 38px;
    font-size: 13px;
    gap: 8px;
  }
  .swc-sidebar .sb-item .sb-ico {
    width: 24px;
    height: 24px;
  }
  .swc-sidebar .sb-item .sb-ico svg {
    width: 17px;
    height: 17px;
  }
}

/* Zachowanie kompatybilności dla elementów cat-nav */
.cat-nav:not(.swc-sidebar) { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-tab:not(.sb-item) { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }

/* Ożywienie stron: wejście elementów po kolei, delikatny ruch okładek (wyłączone przy „ogranicz ruch”).
   Ruch okładek używa osobnych właściwości translate/rotate, więc nie psuje efektów po najechaniu. */
@media all {
  @keyframes swc-in { from { opacity: 0; transform: translateY(14px); } }
  @keyframes swc-sway { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: 2.5deg; } }
  @keyframes swc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
  @keyframes swc-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
  .cat-tab { transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s, background-color .2s; } .cat-tab:hover { transform: translateY(-3px); } .cat-tab:active { transform: scale(.98); }
  .game:not(.locked) .cover .uc { animation: swc-sway 5.5s ease-in-out infinite; }
  .game:not(.locked) .cover .uc.y { animation-delay: .5s; } .game:not(.locked) .cover .uc.g { animation-delay: 1s; } .game:not(.locked) .cover .uc.b { animation-delay: 1.5s; }
  .game:not(.locked) .cover .fan { animation: swc-float 6.5s ease-in-out infinite; }
  .game:not(.locked) .cover .doodle .pen { animation: swc-float 3.6s ease-in-out infinite; }
  .game:not(.locked) .cover.kahoot > div > div { animation: swc-float 4.2s ease-in-out infinite; }
  .game:not(.locked) .cover.kahoot > div > div:nth-child(2) { animation-delay: .5s; } .game:not(.locked) .cover.kahoot > div > div:nth-child(3) { animation-delay: 1s; } .game:not(.locked) .cover.kahoot > div > div:nth-child(4) { animation-delay: 1.5s; }
  .chip.live { animation: swc-dot 2.4s ease-in-out infinite; }
  .game .btn:active, .btn:active { transform: scale(.98); }
  .user-dropdown { transform-origin: top right; }
}

/* Konto w prawym górnym rogu */
.acc { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; background: rgba(255,255,255,.06); border: 1px solid var(--swc-line); border-radius: 999px; cursor: pointer; user-select: none; transition: background-color .2s, border-color .2s; max-width: 260px; }
.acc:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); }
.acc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); flex: none; background: #0d2350; }
.acc-txt { min-width: 0; text-align: left; line-height: 1.2; }
.acc-name { font: 700 14px 'Sen', system-ui, sans-serif; color: #fff; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sub { font-size: 11.5px; font-weight: 600; color: var(--swc-muted); }
.acc-chev { flex: none; color: var(--swc-muted); transition: transform .25s ease; }
.user-profile-menu:has(.is-open) .acc-chev { transform: rotate(180deg); }
@media (max-width: 640px) { .acc { padding: 3px; gap: 0; } .acc-txt, .acc-chev { display: none; } .acc-av { width: 38px; height: 38px; } }

/* Menu konta */
.user-dropdown { padding: 6px !important; min-width: 210px; }
.dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 10px; color: #e6edf9; font: 600 14px 'Sen', system-ui, sans-serif; text-decoration: none; text-align: left; cursor: pointer; transition: background-color .15s; }
.dd-item:hover { background: rgba(255,255,255,.09); }
.dd-sep { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--swc-muted); }
.dd-out { margin-top: 4px; border-top: 1px solid var(--swc-line); border-radius: 0 0 10px 10px; padding-top: 12px; color: #ff8d8d; }
.dd-out svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.swc-cloud { position: fixed; z-index: 100001; pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }

/* =====================================================================
   WYGLĄD SZKOŁY W CHMURZE (jak szkolawchmurze.org): czcionka Sen, granat #1c276e,
   pomarańcz #ffc94a, błękit #cdd5ff, przyciski-pigułki, płasko i spokojnie
   ===================================================================== */
:root {
  --swc-navy: #1c276e; --swc-blue: #1c276e; --swc-blue-hover: #1a529f;
  --swc-sky: #cdd5ff; --swc-orange: #ffc94a;
  --swc-surface: rgba(14,18,70,.62); --swc-line: rgba(255,255,255,.14);
  --swc-radius: 16px;
}
body, button, input, select, textarea { font-family: 'Sen', system-ui, sans-serif; }
h1, h2, h3 { font-family: 'Sen', system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.btn { background: var(--swc-orange) !important; color: #14284f !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; text-shadow: none !important; padding: 11px 24px !important; }
.btn:hover:not(:disabled) { background: #ffe08a !important; color: #14284f !important; box-shadow: 0 6px 18px rgba(255,201,74,.35) !important; transform: translateY(-2px) !important; border: 0 !important; }
.btn:active:not(:disabled) { transform: scale(.97) !important; box-shadow: none !important; }
.btn.btn-danger, .btn.danger { background: #ef5b5b !important; color: #fff !important; }
.btn.btn-discord, .btn-discord { background: #5865f2 !important; color: #fff !important; }
.btn-outline { background: transparent !important; color: #fff !important; border: 2px solid var(--swc-sky) !important; border-radius: 999px !important; box-shadow: none !important; }
.btn-outline:hover:not(:disabled) { background: rgba(205,213,255,.18) !important; border-color: #b3c5ee !important; }
.neo-panel { border-radius: 20px; box-shadow: 0 6px 22px rgba(0,0,0,.2) !important; }
.swc-chip { border-radius: 999px; }
.main-tab.active, .sub-tab.active { background: var(--swc-navy) !important; border-color: var(--swc-sky) !important; }
.main-tab.active { color: #fff !important; }
.game .btn { width: 100%; }
.acc-sub span { font-weight: 700; }

.game:not(.locked) { cursor: pointer; }
.swc-cloud { z-index: 100001; }

/* Feedback w stopce */
.swc-fb, .swc-fb-float { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: 700 14px 'Sen', system-ui, sans-serif; color: #14284f; background: var(--swc-orange, #ffc94a); border-radius: 999px; padding: 10px 18px; transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, background-color .2s; }
.swc-fb:hover, .swc-fb-float:hover { background: #ffe08a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,201,74,.4); }
.swc-fb:active, .swc-fb-float:active { transform: scale(.96); }
.swc-fb-float { position: fixed; right: 20px; bottom: 20px; z-index: 9000; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.swc-footer .swc-fb { display: none; margin-top: 12px; }
@media (max-width: 900px) { .swc-fb-float { display: none; } .swc-footer .swc-fb { display: inline-flex; } .swc-footer { display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; } }
.swc-fbm { position: fixed; inset: 0; z-index: 100002; background: rgba(4, 12, 30, .65); display: grid; place-items: center; padding: 16px; animation: swc-fb-fade .2s ease; }
.swc-fbm-box { width: min(480px, 100%); background: #0d2350; border: 1px solid var(--swc-line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; animation: swc-in .3s cubic-bezier(.22, 1, .36, 1); }
.swc-fbm-box h3 { font-size: 20px; } .swc-fbm-box p { color: var(--swc-muted); font-size: 14px; }
.swc-fbm-box textarea { min-height: 140px; resize: vertical; background: rgba(0,0,0,.25); border: 1px solid var(--swc-line); border-radius: 14px; color: #fff; padding: 12px; font: inherit; }
.swc-fbm-box textarea:focus { outline: none; border-color: var(--swc-sky); }
.swc-fbm-msg { min-height: 18px; font-size: 13.5px; } .swc-fbm-msg.err { color: #ff8d8d; } .swc-fbm-msg.ok { color: #4ccf86; }
.swc-fbm-act { display: flex; justify-content: flex-end; gap: 10px; }
.swc-fbm-meta { font-size: 11.5px; color: var(--swc-muted, #cdd5ff); opacity: 0.88; line-height: 1.45; padding: 5px 9px; background: rgba(0, 0, 0, 0.18); border-radius: 8px; border: 1px solid rgba(205,213,255, 0.15); }
.swc-fbm-meta b { color: #ffc94a; font-weight: 600; }
@keyframes swc-fb-fade { from { opacity: 0; } }
@keyframes swc-in { from { opacity: 0; transform: translateY(12px); } }

/* Telefon: poczekalnie i stoły nigdy nie wychodzą poza ekran */
.rm-lobby > *, .rm-seatscard, .rm-lobby-head > * { min-width: 0; }
.rm-invite .grow { flex-wrap: wrap; }
@media (max-width: 640px) {
  .rm-seatscard { padding: 14px; }
  .rm-lobby-head { gap: 8px; }
  .rm-lobby-head h2 { font-size: 18px; }
  .rm-invite .grow { margin-left: 0; width: 100%; }
  .rm-invite .grow .btn, .rm-invite .grow .btn-outline { flex: 1 1 auto; padding-left: 12px !important; padding-right: 12px !important; }
}

.gh-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13.5px; color: var(--swc-muted); cursor: pointer; }

/* Strona błędu / braku dostępu */
.swc-err-wrap { max-width: 980px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 40px; padding: 0 16px; box-sizing: border-box; }
.swc-err { max-width: 520px; width: 100%; margin: 0 auto; text-align: center; padding: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.swc-err-ico { font-size: 46px; line-height: 1; margin-bottom: 4px; }
.swc-err h1 { font-size: 26px; }
.swc-err p { color: var(--swc-muted); line-height: 1.55; margin-bottom: 10px; }

/* ===== Panele (Sztab / Technik / Eventy): zakładki-pigułki jak na szkolawchmurze.org ===== */
.main-tabs { background: rgba(4, 14, 36, .45) !important; border: 1px solid var(--swc-line) !important; border-radius: 22px !important; padding: 6px !important; gap: 4px !important; }
.main-tab { border: 0 !important; background: transparent !important; border-radius: 999px !important; padding: 9px 16px !important; box-shadow: none !important; }
.main-tab:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.main-tab.active { background: var(--swc-sky) !important; color: #0b1f45 !important; box-shadow: none !important; }
.sub-tab { border-radius: 999px !important; }
.sub-tab.active { background: rgba(205,213,255,.22) !important; border-color: var(--swc-sky) !important; color: #fff !important; }
.segmented input:checked + label { background: var(--swc-sky) !important; color: #0b1f45 !important; }
.segmented input:checked + label small { color: #1d3566; opacity: .85; }
.segmented.danger input:checked + label.is-danger { background: #ef5b5b !important; color: #fff !important; }
.swc-switch input:checked, .switch input:checked { background: var(--swc-orange) !important; }
.game-tab.active { background: rgba(205,213,255,.22) !important; border-color: var(--swc-sky) !important; color: #fff !important; }
.swc-err h1 { margin: 0; } .swc-err p { margin: 0 0 12px; }
@media (max-width: 900px) { .main-tabs { border-radius: 16px !important; } }

/* Wspólne drobiazgi paneli i gier */
.btn-staff-kick { width: 20px; height: 20px; border-radius: 50%; background: #ef5b5b; color: #fff; border: none; cursor: pointer; font-size: 11px; font-weight: 900; display: inline-grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); padding: 0; line-height: 1; }
.act-row .a-del { grid-column: -2 / -1; }
.act-row:has(.url[hidden]) .txt { grid-column: span 2; }
@media (max-width: 900px) { .act-row:has(.url[hidden]) .txt { grid-column: 1 / -1; } }
.badge-staff { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Płynne pokazywanie zakładek w panelach i elementów list */
@keyframes swc-tab-in { from { opacity: 0; transform: translateY(8px); } }
:is([id^="tab_"]:not([hidden]), .sub-pane:not([hidden])) { animation: swc-tab-in .28s cubic-bezier(.22, 1, .36, 1); }
html.swc-booting :is([id^="tab_"]:not([hidden]), .sub-pane:not([hidden])) { animation-duration: 0s; }
.item, .swc-switch { transition: background-color .2s ease, border-color .2s ease; }
.item:hover { border-color: rgba(205,213,255,.35); }
.toast { animation: swc-tab-in .3s cubic-bezier(.22, 1, .36, 1) !important; }
.main-tab, .sub-tab, .game-tab, .cat-tab { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1) !important; }
.main-tab:active, .sub-tab:active, .game-tab:active { transform: scale(.96); }

/* Opcje quizu Kahoot */
.kh-opts { gap: 12px; }
.kh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kh-opts label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--swc-muted); }
.kh-opts select { background: rgba(0,0,0,.28); border: 1px solid var(--swc-line); border-radius: 12px; color: #fff; padding: 10px 12px; font: inherit; }
.kh-opts select option { background: #0d2350; }
.kh-opts .kh-chk { flex-direction: row; align-items: center; gap: 10px; color: #e6edf9; font-weight: 600; cursor: pointer; }
.kh-opts .kh-chk input { width: 18px; height: 18px; accent-color: var(--swc-orange); }
@media (max-width: 520px) { .kh-grid { grid-template-columns: 1fr; } }

/* ===== Górny pasek zawsze w tym samym miejscu i tej samej szerokości na każdej stronie ===== */
html { overflow-x: clip; }
@media (min-width: 901px) {
  .swc-bar, .swc-top {
    box-sizing: border-box !important;
    width: min(1180px, calc(100vw - 32px)) !important; max-width: none !important;
    margin-left: calc(50% - min(590px, 50vw - 16px)) !important; margin-right: 0 !important;
    align-self: flex-start !important; flex: none !important;
  }
}
@media (max-width: 900px) {
  .swc-bar, .swc-top {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
  }
}
.swc-bar { min-height: 68px; }

/* ===== Ogłoszenia ===== */
.swc-top { display: flex; flex-direction: column; gap: 10px; }
.swc-top > .swc-bar { width: 100% !important; margin-left: 0 !important; }
.swc-ann-wrap { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 901px) { body:has(.swc-bar) { padding-top: 20px !important; } }
.swc-ann { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid; font-size: 14px; line-height: 1.5; transition: opacity .25s, transform .25s; }
.swc-ann.out { opacity: 0; transform: translateY(-6px); }
.swc-ann-ico { font-size: 18px; line-height: 1.3; flex: none; }
.swc-ann-txt { flex: 1; min-width: 0; color: #eef3fb; } .swc-ann-txt b { margin-right: 4px; }
.swc-ann-txt a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.swc-ann-x { flex: none; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 8px; }
.swc-ann-x:hover { opacity: 1; background: rgba(255,255,255,.1); }
.swc-ann-info { background: rgba(205,213,255,.16); border-color: rgba(205,213,255,.45); }
.swc-ann-success { background: rgba(76,207,134,.14); border-color: rgba(76,207,134,.45); }
.swc-ann-warning { background: rgba(255,201,74,.15); border-color: rgba(255,201,74,.5); }
.swc-ann-danger { background: rgba(239,91,91,.15); border-color: rgba(239,91,91,.5); }
.swc-ann-test { background: rgba(167,139,250,.15); border-color: rgba(167,139,250,.5); }

/* Blokada strony na niedozwolonym urządzeniu */
.swc-devblock { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 16px; background: rgba(6, 16, 40, .88); }

/* Kosmetyka ze sklepu */
.fr-rainbow { box-shadow: 0 0 0 2px transparent; background: conic-gradient(#ff5555, #ffc94a, #ffd166, #4ccf86, #5aa9ff, #8b5cf6, #ff6fb5, #ff5555) border-box !important; border: 2px solid transparent !important; animation: swc-spin-frame 6s linear infinite; }
@keyframes swc-spin-frame { to { filter: hue-rotate(360deg); } }

/* ===== Strefa Technika: sekcje, urządzenia, ogłoszenia ===== */
.sec-group { margin: 22px 0 6px !important; color: var(--swc-sky) !important; }
.sec-row { border-top: 1px solid var(--swc-line); padding: 4px 0 10px; }
.sec-row .swc-switch { border-top: 0; padding-bottom: 6px; }
.sec-row.off .swc-switch b { color: var(--swc-muted); }
.sec-off { color: #ffb4b4; font-weight: 700; }
.sec-opts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dev-tgs { display: inline-flex; gap: 4px; background: rgba(0,0,0,.22); border: 1px solid var(--swc-line); border-radius: 999px; padding: 3px; }
.dev-tg { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--swc-muted); font: 700 12px 'Sen', sans-serif; padding: 5px 10px; border-radius: 999px; cursor: pointer; opacity: .55; transition: background-color .2s, color .2s, opacity .2s; }
.dev-tg.on { background: rgba(205,213,255,.25); color: #fff; opacity: 1; }
.dev-tg:hover { opacity: 1; }
.sec-vis { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--swc-muted); }
.sec-vis select { padding: 6px 30px 6px 10px !important; font-size: 13px !important; }
.ann-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ann-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--swc-muted); }
.ann-form .ann-chk { flex-direction: row; align-items: center; gap: 10px; color: #e6edf9; font-weight: 600; cursor: pointer; }
.ann-form .ann-chk input { width: 17px; height: 17px; accent-color: var(--swc-orange); }
.ann-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.danger-card { border-color: rgba(239,91,91,.35) !important; }
@media (max-width: 640px) { .ann-grid { grid-template-columns: 1fr; } .dev-tg span { display: none; } }

/* ===== Szlif: spójne reakcje przycisków i fokus z klawiatury ===== */
.btn, .btn-outline { transition: transform .18s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important; }
.btn:focus-visible, .btn-outline:focus-visible, .main-tab:focus-visible, .cat-tab:focus-visible, .dd-item:focus-visible, .onu-mode:focus-visible, a.zone:focus-visible { outline: 3px solid rgba(255,201,74,.75) !important; outline-offset: 2px; }
.neo-panel { transition: border-color .25s ease, box-shadow .25s ease; }
.user-dropdown { transform-origin: top right; animation: swc-dd-in .18s cubic-bezier(.22, 1, .36, 1); }
@keyframes swc-dd-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
::selection { background: rgba(255,201,74,.45); color: #fff; }

.swc-bar { height: 68px; } .swc-bar .swc-left, .swc-bar .swc-right { min-width: 0; }
@media (max-width: 640px) { .swc-bar { height: 56px; } }

/* ===== Strefa Technika: kategorie zarządzania ===== */
.dev-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dev-group { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--swc-line); background: var(--swc-surface); color: #d3ddef; cursor: pointer; font: inherit; min-width: 0; transition: border-color .2s, background-color .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.dev-group:hover { transform: translateY(-2px); border-color: rgba(205,213,255,.45); }
.dev-group.active { border-color: var(--swc-orange); background: rgba(255,201,74,.1); }
.dev-group .dg-ico { font-size: 22px; flex: none; }
.dev-group .dg-txt { min-width: 0; } .dev-group b { display: block; font-size: 15px; color: #fff; }
.dev-group small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.35; color: var(--swc-muted); }
.dev-group.active b { color: var(--swc-orange); }
.main-tabs.single { display: none !important; }
@media (max-width: 1000px) { .dev-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dev-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dev-group { padding: 10px; } .dev-group small { display: none; } }

/* Discord Activity: stół kanału głosowego */
.rm-act { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-color: rgba(205,213,255,.55) !important; background: rgba(88,101,242,.16) !important; margin-bottom: 14px; }
.rm-act b { display: block; color: #fff; font-size: 15px; } .rm-act small { color: #c8d4ee; font-size: 13px; } .rm-act small b { display: inline; color: var(--swc-orange); letter-spacing: .08em; }
@media (max-width: 640px) { .rm-act { flex-direction: column; align-items: stretch; } }
/* W Discord Activity nie ma wylogowania ani zewnętrznych kart */
html.swc-act .swc-login { display: none; }

/* Strefa Technika: boty testowe */
.bot-form { display: grid; grid-template-columns: 1.2fr 1fr .7fr .9fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.bot-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--swc-muted); min-width: 0; }
.bot-tables { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-tables .hint { flex-basis: 100%; }
.bot-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--swc-line); background: rgba(255,255,255,.04); color: #e6edf9; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; transition: border-color .2s, background-color .2s; }
.bot-tab:hover { border-color: var(--swc-orange); background: rgba(255,201,74,.08); } .bot-tab small { color: var(--swc-muted); font-size: 12px; }
.bot-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--swc-line); background: rgba(255,255,255,.03); margin-top: 8px; }
.bot-row .grow { flex: 1; min-width: 0; } .bot-row b { display: block; color: #fff; } .bot-row small { color: var(--swc-muted); font-size: 12.5px; }
.bot-av { font-size: 22px; flex: none; }
@media (max-width: 900px) { .bot-form { grid-template-columns: 1fr 1fr; } .bot-form .btn { grid-column: 1 / -1; } }

/* ===== Kurtyna przejścia: trzy fale (jasna, pomarańczowa, granatowa) z zaokrąglonymi brzegami + chmurki ===== */
/* Nowa strona podczas przejścia kurtyną: treść pod spodem jest w 100% ukryta przed pierwszym malowaniem */
html.swc-curtain-arrive :is(body, .wrapper, .app, main, .main-layout, .swc-bar, .cat-nav, .swc-footer, .hub-layout, .swc-sidebar-wrap) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.swc-curtain { position: fixed; inset: 0; z-index: 100003; pointer-events: auto; overflow: hidden; contain: strict; }
.swc-curtain .cl { position: absolute; left: -12vw; width: 124vw; top: -170px; height: calc(100vh + 340px); border-radius: 50% / 170px; will-change: transform; }
.swc-curtain .l1 { background: #cdd5ff; }
.swc-curtain .l2 { background: #ffc94a; }
.swc-curtain .l3 { background: radial-gradient(ellipse at 50% 45%, #1d55b0 0%, #1c276e 55%, #0b2a5e 100%); display: grid; place-items: center; }
.swc-curtain.leave .cl { transform: translate3d(0, 120vh, 0); }
.swc-curtain.leave.from-top .cl { transform: translate3d(0, -120vh, 0); }
.swc-curtain .cc { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-align: center; font-family: 'Sen', system-ui, sans-serif; }
.swc-curtain .cc img { width: 92px; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); animation: swc-cur-bob 1.6s ease-in-out infinite; }
.swc-curtain .cc b { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -.01em; }
.swc-curtain .dots { display: flex; gap: 8px; } .swc-curtain .dots i { width: 9px; height: 9px; border-radius: 50%; background: #ffc94a; animation: swc-cur-dot 1s ease-in-out infinite; }
.swc-curtain .dots i:nth-child(2) { animation-delay: .15s; } .swc-curtain .dots i:nth-child(3) { animation-delay: .3s; }
.swc-curtain .clouds { position: absolute; inset: 0; pointer-events: none; }
.swc-curtain .clouds img { position: absolute; left: 0; height: auto; will-change: transform; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
@keyframes swc-cur-bob { 50% { transform: translateY(-6px); } }
@keyframes swc-cur-dot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 640px) { .swc-curtain .cl { border-radius: 50% / 90px; top: -90px; height: calc(100vh + 180px); } .swc-curtain .cc img { width: 70px; } }
html.swc-noanim .swc-curtain { display: none !important; }

/* ===== Ekran stołu (wejście i start gry): fala kół + stół z krzesłami ===== */
.rm-loader2 { position: fixed; inset: 0; z-index: 9995; overflow: hidden; display: grid; place-items: center; pointer-events: auto; }
.rm-loader2.out { pointer-events: none; }
.rm-dots { position: absolute; inset: 0; }
.rm-dots i { position: absolute; width: calc(var(--cell) * 1.46); height: calc(var(--cell) * 1.46); margin: calc(var(--cell) * -.23) 0 0 calc(var(--cell) * -.23); border-radius: 50%; transform: scale(0); backface-visibility: hidden; animation: rm-dot-in .34s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--d) * 1ms); }
.rm-dots i.o { background: #ffc94a; }
.rm-dots i.n { background: #1c276e; animation-delay: calc(var(--d) * 1ms + 70ms); }
/* odsłonięcie: tylko granatowe koła maleją (pomarańczowe chowają się wcześniej, więc nie ma pomarańczowego błysku) */
.rm-loader2.covered .rm-dots i.o, .rm-loader2.out .rm-dots i.o { animation: none; transform: scale(0); }
.rm-loader2.out .rm-dots i.n { animation: rm-dot-out .34s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--d) * 1ms + 120ms); }
@keyframes rm-dot-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes rm-dot-out { from { transform: scale(1); } to { transform: scale(0); } }
.rm-l-box { position: relative; text-align: center; color: #fff; font-family: 'Sen', system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; animation: rm-box-show .36s cubic-bezier(.22, 1, .36, 1) var(--box-in, .42s) both; }
.rm-loader2.out .rm-l-box { animation: rm-box-hide .2s ease-in both; }
@keyframes rm-box-show { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } }
@keyframes rm-box-hide { to { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); } }
.rm-l-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #cfe0ff; letter-spacing: .02em; }
.rm-l-brand img { width: 44px; height: auto; }
.rm-l-game { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.rm-l-box svg { width: min(74vw, 330px); height: auto; overflow: visible; margin: 4px 0; }
.rm-l-box h2 { font-size: 20px; margin: 0; } .rm-l-box p { margin: 0; color: #c8d4ee; font-size: 14px; } .rm-l-box p b { color: #ffc94a; letter-spacing: .12em; }
.rm-loader2 .felt { fill: url(#rmFelt2); transform-box: fill-box; transform-origin: center; animation: rm-felt-in .5s cubic-bezier(.22, 1, .36, 1) var(--box-in, .5s) backwards; }
.rm-loader2 .rim { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-dasharray: 520; stroke-dashoffset: 520; animation: rm-draw .8s ease var(--box-in, .6s) forwards; }
.rm-loader2 .chair { fill: rgba(156,201,255,.28); transform-box: fill-box; transform-origin: center; animation: rm-chair-in .4s cubic-bezier(.22, 1, .36, 1) backwards, rm-chair-load 1.4s ease-in-out infinite; animation-delay: calc(var(--box-in, .5s) + .15s + var(--i) * .05s), calc(var(--box-in, .5s) + .6s + var(--i) * (1.4s / var(--n))); }
.rm-loader2.ready .chair { fill: #ffc94a; animation: rm-chair-in .35s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i) * .045s); }
.rm-loader2.ready .felt { animation: rm-felt-snap .5s cubic-bezier(.22, 1, .36, 1); }
html.swc-noanim .rm-loader2 { display: none !important; }

/* zakryty ekran = jednolity kolor (koła widać tylko na początku i na końcu) */
.rm-solid { position: absolute; inset: 0; background: #1c276e; opacity: 0; }
.rm-loader2.covered .rm-solid { opacity: 1; }

/* ===== Strefa Technika: Sekcje i dodatki (grupy rozwijane) ===== */
.sec-grp { border: 1px solid var(--swc-line); border-radius: 18px; background: rgba(255,255,255,.025); margin-top: 12px; overflow: hidden; }
.sec-grp > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 18px; }
.sec-grp > summary::-webkit-details-marker, .sec-sub > summary::-webkit-details-marker { display: none; }
.sec-grp > summary span { font-weight: 800; font-size: 16px; color: #fff; }
.sec-grp > summary small { color: var(--swc-muted); font-size: 12.5px; min-width: 0; }
.sec-grp > summary em { font-style: normal; font-size: 12px; color: #c8d4ee; padding: 3px 10px; border-radius: 999px; background: rgba(205,213,255,.14); white-space: nowrap; }
.sec-grp > summary::after, .sec-sub > summary::after { content: "▾"; color: var(--swc-muted); transition: transform .2s ease; }
.sec-grp > summary::after { grid-column: 4; }
.sec-grp[open] > summary::after, .sec-sub[open] > summary::after { transform: rotate(180deg); }
.sec-grp[open] > summary { border-bottom: 1px solid var(--swc-line); }
.sec-body { padding: 4px 14px 12px; }
.sec-sub { margin: 2px 0 10px 18px; border-left: 2px solid rgba(255,201,74,.45); padding-left: 12px; }
.sec-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-weight: 700; color: #f6d28f; }
.sec-sub > summary small { color: var(--swc-muted); font-weight: 400; font-size: 12.5px; flex: 1; }
.sec-jump { display: block; margin: 8px 0 4px; padding: 10px 14px; border-radius: 12px; background: rgba(205,213,255,.1); border: 1px dashed rgba(205,213,255,.4); color: #c8d4ee; text-decoration: none; font-size: 13.5px; }
.sec-jump:hover { border-color: var(--swc-orange); color: #fff; }
@media (max-width: 640px) { .sec-grp > summary { grid-template-columns: 1fr auto; } .sec-grp > summary small { grid-column: 1 / -1; grid-row: 2; } .sec-grp > summary::after { grid-column: 3; grid-row: 1; } .sec-sub { margin-left: 4px; } }
.sec-opts .sec-vis { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sec-opts .sec-vis select { min-width: 190px; }
@media (max-width: 640px) { .sec-opts .sec-vis { display: flex; width: 100%; } .sec-opts .sec-vis select { flex: 1; min-width: 0; } }

/* Aktywność na Discordzie */
.act-today { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.act-today > div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--swc-line); }
.act-today b { display: block; font-size: 22px; color: #fff; } .act-today small { color: var(--swc-muted); font-size: 12px; }
.act-item { display: flex !important; align-items: center; gap: 12px; }
.act-item img, .act-item .act-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: rgba(255,255,255,.1); }
.act-item .grow { flex: 1; min-width: 0; } .act-item b { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-item small { color: var(--swc-muted); font-size: 11.5px; }
.act-pos { width: 32px; color: var(--swc-muted); font-weight: 800; } .act-n { font-size: 12.5px; color: #c8d4ee; white-space: nowrap; } .act-xp { font-weight: 800; color: var(--swc-orange); white-space: nowrap; }
@media (max-width: 640px) { .act-today { grid-template-columns: repeat(2, minmax(0, 1fr)); } .act-item .act-n { display: none; } }

.wipe-opts { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.wipe-form { display: flex; gap: 10px; flex-wrap: wrap; } .wipe-form .field { flex: 1; min-width: 220px; }

/* „Wkrótce” */
.badge.soon { background: rgba(205,213,255,.18) !important; color: #c8d4ee !important; border: 1px solid rgba(205,213,255,.4) !important; }
.extra-card.is-soon { opacity: .7; cursor: default; pointer-events: none; }
.extra-card.is-soon i { font-style: normal; } .extra-card.is-soon i::before { content: "⏳ Wkrótce"; font-size: 12px; font-weight: 700; color: #c8d4ee; }
.extra-card.is-soon i { font-size: 0; }
.sec-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #c8d4ee; white-space: nowrap; cursor: pointer; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--swc-line); }
.sec-soon input { accent-color: #cdd5ff; }
.sec-soon:has(input:checked) { border-color: rgba(205,213,255,.6); background: rgba(205,213,255,.14); color: #fff; }
.sec-row.soon .swc-switch b::after { content: " ⏳ wkrótce"; font-weight: 600; font-size: 12px; color: #cdd5ff; }

/* ===== Okładki nowych gier (strona główna i menu stołów) ===== */
.art-ships, .art-poker, .art-ttt, .art-c4, .art-memo, .art-hg, .art-sdk { position: relative; display: grid; place-items: center; }
.cover.wisielec { background: linear-gradient(135deg, #1b3d75, #2960b3); }
.cover.sudoku { background: linear-gradient(135deg, #1f4788, #3b74cb); }
.cover.g2048 { background: radial-gradient(circle at 50% 45%, #184183 0%, #0c234b 75%, #071735 100%); }
.art-2048 { position: relative; display: grid; grid-template-columns: repeat(2, 42px); grid-template-rows: repeat(2, 42px); gap: 6px; background: #081d45; padding: 7px; border-radius: 14px; border: 2px solid rgba(255,201,74, 0.65); box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 16px rgba(255,201,74,0.2); animation: swc-float 4.8s ease-in-out infinite; box-sizing: content-box; }
.art-2048 i { width: 42px; height: 42px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-family: 'Sen', sans-serif; border-radius: 8px; user-select: none; }
.art-2048 i.t2 { background: #eee4da; color: #776e65; font-size: 20px; }
.art-2048 i.t4 { background: #ede0c8; color: #776e65; font-size: 20px; }
.art-2048 i.t8 { background: #f2b179; color: #fff; font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.art-2048 i.t2048 { background: linear-gradient(135deg, #ffd700, #ff9500); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: -0.5px; box-shadow: 0 0 16px rgba(255, 215, 0, 0.7); animation: g2048-pulse 1.8s infinite alternate; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
@keyframes g2048-pulse { from { filter: brightness(1); } to { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,215,0,0.8)); } }
.art-hg { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.art-hg svg { width: 72px; height: 72px; }
.art-hg .hg-tag { font-family: 'Sen', sans-serif; font-weight: 800; font-size: 13px; color: #ffd680; letter-spacing: 4px; margin-top: 4px; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.art-sdk { display: grid; grid-template-columns: repeat(3, 24px); grid-template-rows: repeat(3, 24px); gap: 3px; background: rgba(0,0,0,0.25); padding: 5px; border-radius: 8px; border: 1.5px solid #cdd5ff; }
.art-sdk i { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; font-family: 'Sen', sans-serif; color: #fff; background: rgba(205,213,255, 0.2); border-radius: 4px; }
.art-sdk i.c { color: #ffc94a; font-weight: 900; background: rgba(255,201,74, 0.25); }
.art-ships { width: 190px; height: 120px; } .art-ships .boat { font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation: swc-float 4s ease-in-out infinite; }
.art-ships .wave { position: absolute; left: 10px; right: 10px; bottom: 18px; height: 14px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 18px, transparent 18px 30px); opacity: .6; }
.art-ships .sp { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.75); } .art-ships .s1 { left: 22px; top: 26px; } .art-ships .s2 { right: 30px; top: 40px; width: 9px; height: 9px; }
.art-ships .tg { position: absolute; right: 14px; top: 6px; font-size: 30px; animation: swc-dot 2s ease-in-out infinite; }
.art-poker { width: 190px; height: 120px; } .art-poker .pc { position: absolute; top: 12px; width: 62px; height: 88px; border-radius: 9px; background: #fff; color: #1b2a44; font: 900 26px 'Sen', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.art-poker .pc small { font-size: 26px; } .art-poker .pc.r { color: #d02c2c; left: 50px; transform: rotate(-12deg); } .art-poker .pc:not(.r) { left: 88px; transform: rotate(10deg); }
.art-poker .chip { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 5px dashed #fff; bottom: 6px; } .art-poker .c1 { background: #e23b3b; left: 18px; } .art-poker .c2 { background: #1368ce; left: 44px; bottom: 14px; } .art-poker .c3 { background: #ffc94a; right: 20px; }
.art-ttt { grid-template-columns: repeat(3, 34px); gap: 5px; } .art-ttt i { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.14); display: grid; place-items: center; font: 900 20px 'Sen', sans-serif; font-style: normal; color: #fff; }
.art-c4 { grid-template-columns: repeat(4, 26px); gap: 5px; padding: 8px; border-radius: 12px; background: #0d2f6b; box-shadow: 0 8px 18px rgba(0,0,0,.3); } .art-c4 i { width: 26px; height: 26px; border-radius: 50%; background: #081d45; } .art-c4 i.r { background: #e23b3b; } .art-c4 i.y { background: #ffc94a; }
.art-memo { grid-template-columns: repeat(3, 40px); gap: 6px; } .art-memo i { width: 40px; height: 52px; border-radius: 8px; background: #f7f3ea; display: grid; place-items: center; font-size: 22px; font-style: normal; box-shadow: 0 5px 12px rgba(0,0,0,.3); } .art-memo i.b { background: linear-gradient(135deg, #1d55b0, #1c276e); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 5px 12px rgba(0,0,0,.3); }
.game:not(.locked) .cover .art-ttt i:nth-child(5), .game:not(.locked) .cover .art-memo i:nth-child(1) { animation: swc-dot 2.4s ease-in-out infinite; }

/* gry eventowe */
.rm-event-note { padding: 14px 18px; border-color: rgba(192,132,252,.45) !important; background: rgba(192,132,252,.1) !important; margin-bottom: 14px; }
.rm-event-note b { display: block; color: #e9d5ff; } .rm-event-note small { color: #d8c8f0; font-size: 13px; }
.rm-list-row.ev { border-color: rgba(192,132,252,.45) !important; }

.sec-order { display: inline-flex; gap: 4px; } .sec-order button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--swc-line); background: rgba(255,255,255,.05); color: #fff; font: inherit; font-weight: 800; cursor: pointer; transition: border-color .2s, background-color .2s; }
.sec-order button:hover:not(:disabled) { border-color: var(--swc-orange); background: rgba(255,201,74,.12); } .sec-order button:disabled { opacity: .3; cursor: default; }
.sec-soon.locked { opacity: .65; cursor: default; }

/* Centrala Eventów: stoły eventowe */
.ev-form-card { padding: 22px; } .ev-form-card h2 { margin: 0 0 6px; font-size: 19px; } .ev-form-card .hint { color: var(--swc-muted); font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }
.ev-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.ev-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--swc-muted); min-width: 0; } .ev-form label.wide { grid-column: span 2; }
.ev-form label[hidden] { display: none; } .ev-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.ev-table { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 10px; flex-wrap: wrap; }
.ev-t-main { min-width: 0; flex: 1; } .ev-t-main b { display: block; color: #fff; font-size: 15px; } .ev-t-main small { display: block; color: #c8d4ee; font-size: 12.5px; margin-top: 2px; } .ev-t-main small.by { color: var(--swc-muted); }
.ev-t-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .ev-form { grid-template-columns: 1fr 1fr; } .ev-form label.wide { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ev-form { grid-template-columns: 1fr; } .ev-t-acts { width: 100%; } .ev-t-acts > * { flex: 1; text-align: center; } }

.chip.ev { background: rgba(192,132,252,.16) !important; color: #e9d5ff !important; border-color: rgba(192,132,252,.4) !important; }
/* Gry i stoły: zakładki wszystkich gier w jednym lub kilku rzędach, nazwy w jednej linii */
#tab_games .game-tabs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 8px !important; overflow: visible !important; }
#tab_games .game-tab { white-space: nowrap !important; min-width: 0 !important; padding-left: 14px !important; padding-right: 14px !important; }
@media (max-width: 640px) { #tab_games .game-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #tab_games .game-tab { flex: none !important; } }
@media (max-width: 640px) { #verCard .ver-grid { grid-template-columns: 1fr 1fr !important; } #verCard .ver-grid label:nth-child(2) { grid-column: 1 / -1; order: -1; } }

/* Okienka strony (zamiast przeglądarkowych alert/confirm/prompt) i pop-up nowej wersji */
.swc-dlg-layer { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: center; align-items: center; padding: 16px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: rgba(5, 14, 36, 0); pointer-events: none; transition: background-color .18s ease; box-sizing: border-box; }
.swc-dlg-layer.open { background: rgba(5, 14, 36, .62); pointer-events: auto; }
.swc-dlg { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); max-height: calc(100vh - 32px); margin: auto; background: #0f2a5e; border: 1px solid rgba(205,213,255, .35); border-radius: 22px; padding: 24px 22px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); color: #fff; font-family: 'Sen', system-ui, sans-serif; text-align: center; animation: swc-dlg-in .22s cubic-bezier(.22, 1, .36, 1) both; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.swc-dlg.out { animation: swc-dlg-out .16s ease both; }
.swc-dlg-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(205,213,255, .3); background: rgba(0, 0, 0, .35); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; cursor: pointer; z-index: 20; padding: 0; line-height: 1; transition: background-color .15s, transform .15s, border-color .15s; }
.swc-dlg-x:hover, .swc-dlg-x:active { background: rgba(255,201,74, .3); border-color: #ffc94a; transform: scale(1.08); }
@keyframes swc-dlg-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes swc-dlg-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.swc-dlg-ico { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.swc-dlg h3 { margin: 0 0 8px !important; font-size: 19px !important; font-weight: 800 !important; color: #fff !important; text-transform: none !important; letter-spacing: normal !important; text-align: center !important; font-family: 'Sen', system-ui, sans-serif !important; display: block !important; justify-content: center !important; }
.swc-dlg p { text-align: center !important; }
.swc-dlg p { margin: 0 0 6px; color: #d3ddef; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.swc-dlg-in { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(205,213,255, .4); background: #0a1f4a; color: #fff; font: inherit; font-size: 15px; outline: none; }
.swc-dlg-in:focus { border-color: #ffc94a; }
.swc-dlg-btns { display: flex; gap: 10px; margin-top: 18px; }
.swc-dlg-b { flex: 1; padding: 11px 16px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, transform .15s, border-color .15s; }
.swc-dlg-b:active { transform: scale(.96); }
.swc-dlg-b.ok { background: #ffc94a; color: #0b1f45; }
.swc-dlg-b.ok:hover { background: #ffbf5e; }
.swc-dlg-b.ok.danger { background: #e2585a; color: #fff; }
.swc-dlg-b.no { background: transparent; color: #fff; border-color: rgba(205,213,255, .55); }
.swc-dlg-b.no:hover { background: rgba(205,213,255, .14); }
.swc-dlg-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.swc-dlg-ver .swc-dlg-ico { font-size: 40px; }
.swc-dlg-vnum { display: inline-block; margin: 2px 0 10px; padding: 4px 14px; border-radius: 999px; background: rgba(255,201,74, .16); color: #ffc94a; font-weight: 800; font-size: 14px; }
html.swc-noanim .swc-dlg, html.swc-noanim .swc-dlg.out { animation: none; }

/* Pop-up nowej wersji: baner (własny obrazek albo animowana chmurka „w budowie”) */
.swc-dlg.swc-dlg-ver { width: min(440px, 100%); padding: 0; overflow: hidden; text-align: left; }
.vb-banner { position: relative; height: 172px; background: linear-gradient(180deg, #313f98 0%, #1c276e 100%); overflow: hidden; }
.vb-banner.has-img { background: #0a1f4a; }
.vb-banner img { width: 100%; height: 100%; object-fit: cover; display: block; animation: vb-zoom 9s ease-in-out infinite alternate; }
.vb-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(transparent, #0f2a5e); pointer-events: none; }
.vb-art { width: 100%; height: 100%; display: block; }
.vb-chip { position: absolute; left: 16px; top: 14px; z-index: 1; background: #ffc94a; color: #0b1f45; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.25); animation: vb-chip .5s .25s cubic-bezier(.22,1,.36,1) both; }
.vb-body { padding: 16px 24px 4px; }
.swc-dlg-ver .vb-body h3 { text-align: left !important; margin: 0 0 4px !important; font-size: 22px !important; }
.swc-dlg-ver .vb-title { text-align: left !important; color: #d3ddef; margin: 0 0 10px; font-size: 14.5px; }
.vb-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vb-points li { position: relative; padding: 9px 12px 9px 36px; border-radius: 12px; background: rgba(205,213,255,.1); color: #e6edfb; font-size: 13.5px; line-height: 1.45; animation: vb-li .4s cubic-bezier(.22,1,.36,1) both; }
.vb-points li:nth-child(1) { animation-delay: .25s; } .vb-points li:nth-child(2) { animation-delay: .35s; } .vb-points li:nth-child(3) { animation-delay: .45s; }
.vb-points li::before { content: '✓'; position: absolute; left: 11px; top: 10px; width: 17px; height: 17px; border-radius: 6px; background: rgba(255,201,74,.2); color: #ffc94a; font-weight: 800; font-size: 11px; display: grid; place-items: center; }
.swc-dlg-ver .swc-dlg-btns { padding: 0 24px 22px; }
.vb-c { fill: rgba(255,255,255,.22); }
.vb-c1 { animation: vb-drift 14s linear infinite; } .vb-c2 { animation: vb-drift 19s linear infinite reverse; } .vb-c3 { animation: vb-drift 16s -5s linear infinite; }
.vb-gear { transform-box: fill-box; transform-origin: center; }
.vb-g1 { animation: vb-spin 6s linear infinite; } .vb-g2 { animation: vb-spin 4s linear infinite reverse; }
.vb-cloud { animation: vb-bob 3.2s ease-in-out infinite; }
.vb-bar { transform-box: fill-box; transform-origin: left center; animation: vb-load 3.6s cubic-bezier(.5,0,.3,1) infinite; }
.vb-wrench { transform: rotate(40deg); animation: vb-tap 1.1s cubic-bezier(.5,0,.4,1) infinite; }
.vb-spark path { fill: #ffd27a; transform-box: fill-box; transform-origin: center; animation: vb-twinkle 1.1s ease-in-out infinite; }
.vb-s2 { animation-delay: .15s !important; } .vb-s3 { animation-delay: .5s !important; fill: #fff !important; } .vb-s4 { animation-delay: .8s !important; fill: #cdd5ff !important; }
@keyframes vb-spin { to { transform: rotate(360deg); } }
@keyframes vb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes vb-drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
@keyframes vb-load { 0% { transform: scaleX(.05); } 70%, 100% { transform: scaleX(1); } }
@keyframes vb-tap { 0%, 100% { transform: rotate(28deg); } 45% { transform: rotate(46deg); } 55% { transform: rotate(42deg); } }
@keyframes vb-twinkle { 0%, 30%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 75% { transform: scale(.8); opacity: .6; } }
@keyframes vb-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes vb-chip { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes vb-li { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.swc-noanim .vb-banner *, html.swc-noanim .vb-points li, html.swc-noanim .vb-chip { animation: none !important; }
@media (max-width: 480px) { .vb-banner { height: 150px; } .vb-body { padding: 14px 18px 2px; } .swc-dlg-ver .swc-dlg-btns { padding: 0 18px 18px; } }
#verCard .ver-banner-row { display: grid; grid-template-columns: 1fr 200px; gap: 12px; align-items: stretch; }
#verCard .ver-banner-prev { border-radius: 14px; border: 1px dashed rgba(205,213,255,.4); background: rgba(10,31,74,.6); min-height: 140px; display: grid; place-items: center; overflow: hidden; color: var(--swc-muted); font-size: 13px; text-align: center; padding: 0; }
#verCard .ver-banner-prev img { width: 100%; height: 100%; max-height: 200px; object-fit: cover; display: block; }
#verCard .ver-banner-prev span { padding: 12px; }
@media (max-width: 640px) { #verCard .ver-banner-row { grid-template-columns: 1fr; } }
/* Przycinanie banera */
.swc-dlg.swc-dlg-crop { width: min(720px, 100%); }
.crop-frame { position: relative; width: 100%; aspect-ratio: 880 / 360; margin-top: 14px; border-radius: 14px; overflow: hidden; background: #0a1f4a; cursor: grab; touch-action: none; user-select: none; }
.crop-frame:active { cursor: grabbing; }
.crop-frame img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; opacity: 0; transition: opacity .2s; pointer-events: none; }
.crop-frame.ready img { opacity: 1; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,201,74,.9); border-radius: inherit;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.25) calc(33.33% - .5px), rgba(255,255,255,.25) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.25) calc(66.66% - .5px), rgba(255,255,255,.25) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
              linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255,255,255,.25) calc(33.33% - .5px), rgba(255,255,255,.25) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.25) calc(66.66% - .5px), rgba(255,255,255,.25) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 16px; }
.crop-zoom input { flex: 1; accent-color: #ffc94a; }
.crop-note { font-size: 12.5px !important; color: var(--swc-muted) !important; margin-top: 6px !important; }

/* Powitanie po pierwszym logowaniu */
.swc-dlg.swc-intro { width: min(460px, 100%); padding: 0; overflow: hidden; }
.swc-intro .in-art { height: 190px; background: linear-gradient(180deg, #313f98, #1c276e); overflow: hidden; }
.swc-intro .in-slide { height: 100%; animation: in-slide .4s cubic-bezier(.22,1,.36,1) both; }
.swc-intro .in-art svg { width: 100%; height: 100%; display: block; }
.swc-intro .in-txt { padding: 18px 26px 4px; min-height: 128px; }
.swc-intro .in-txt.in-anim { animation: in-txt .35s .05s cubic-bezier(.22,1,.36,1) both; }
.swc-intro .in-txt h3 { font-size: 21px !important; margin-bottom: 8px !important; }
.swc-intro .in-dots { display: flex; gap: 7px; justify-content: center; padding: 6px 0 0; }
.swc-intro .in-dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(205,213,255,.35); cursor: pointer; transition: width .25s, background-color .25s; }
.swc-intro .in-dots i.on { width: 22px; background: #ffc94a; }
.swc-intro .swc-dlg-btns { padding: 0 24px 22px; }
.in-c path { fill: rgba(255,255,255,.22); animation: m-drift2 16s linear infinite alternate; }
.in-bob { animation: in-bob 3s ease-in-out infinite; }
.in-wave { transform-box: fill-box; transform-origin: 50% 100%; animation: in-wave 1.2s ease-in-out infinite; }
.in-st { fill: #ffd27a; transform-box: fill-box; transform-origin: center; animation: in-tw 1.8s ease-in-out infinite; } .in-st.s2 { animation-delay: .7s; fill: #fff; }
.in-card { transform-box: fill-box; transform-origin: 50% 100%; animation: in-deal .6s cubic-bezier(.22,1,.36,1) both; }
.in-card.k1 { --r: -14deg; animation-delay: .15s; } .in-card.k2 { --r: 0deg; animation-delay: .3s; } .in-card.k3 { --r: 14deg; animation-delay: .45s; }
.in-seat circle { animation: in-pop .4s cubic-bezier(.22,1,.36,1) both; } .in-seat circle:nth-child(2) { animation-delay: .1s; } .in-seat circle:nth-child(3) { animation-delay: .2s; }
.in-code { animation: in-drop .5s .6s cubic-bezier(.22,1,.36,1) both; }
.in-star { transform-box: fill-box; transform-origin: center; animation: in-star 2s ease-in-out infinite; }
.in-xpbar { transform-box: fill-box; transform-origin: left center; animation: in-fill 2.4s cubic-bezier(.5,0,.3,1) infinite; }
.in-plus { animation: in-up 2.4s ease-out infinite; }
.in-shop { animation: in-bob 3s -1s ease-in-out infinite; }
.in-row { animation: in-pop .35s cubic-bezier(.22,1,.36,1) both; } .in-row.r2 { animation-delay: .1s; }
.in-knob { animation: in-knob 2.4s ease-in-out infinite; }
.in-fb { animation: in-bob 2.6s ease-in-out infinite; }
@keyframes in-slide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes in-txt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes in-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes in-wave { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
@keyframes in-tw { 0%, 100% { transform: scale(.3); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }
@keyframes in-deal { from { opacity: 0; transform: translateY(60px) rotate(0); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes in-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes in-drop { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes in-star { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
@keyframes in-fill { 0% { transform: scaleX(.1); } 70%, 100% { transform: scaleX(.85); } }
@keyframes in-up { 0%, 20% { opacity: 0; transform: translateY(14px); } 40%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes in-knob { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(-18px); } 100% { transform: translateX(0); } }
@keyframes m-drift2 { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
html.swc-noanim .swc-intro * { animation: none !important; }
@media (max-width: 480px) { .swc-intro .in-art { height: 160px; } .swc-intro .in-txt { padding: 16px 18px 2px; min-height: 140px; } .swc-intro .swc-dlg-btns { padding: 0 18px 18px; } }

/* Układ stref (Strefa Technika) */
.zl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zl-col { border: 1px solid var(--swc-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,.12); }
.zl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zl-head h3 { margin: 0 !important; font-size: 16px !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
.zl-sub { font-size: 12px; font-weight: 800; color: var(--swc-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.zl-list { display: flex; flex-direction: column; gap: 8px; }
.zl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--swc-line); }
.zl-row.on { border-style: solid; border-color: rgba(255,201,74,.45); background: rgba(255,201,74,.06); }
.zl-n { width: 24px; height: 24px; border-radius: 8px; background: rgba(255,201,74,.2); color: #ffc94a; font-weight: 800; font-size: 12px; display: grid; place-items: center; flex: none; }
.zl-t { flex: 1; min-width: 0; } .zl-t b { display: block; color: #fff; font-size: 14px; } .zl-t small { color: var(--swc-muted); font-size: 12px; }
.zl-a { display: flex; gap: 6px; flex: none; }
@media (max-width: 860px) { .zl-grid { grid-template-columns: 1fr; } .zl-row { flex-wrap: wrap; } .zl-a { width: 100%; justify-content: flex-end; } }
/* pusta strefa */
.zone-empty { padding: 44px 28px; text-align: center; }
.zone-empty .ze-ico { font-size: 48px; margin-bottom: 10px; animation: ze-float 3s ease-in-out infinite; display: inline-block; }
.zone-empty h2 { color: #fff; font-size: 22px; margin: 0 0 8px; } .zone-empty p { color: var(--swc-muted); margin: 0 auto 16px; max-width: 460px; line-height: 1.6; }
@keyframes ze-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.swc-noanim .zone-empty .ze-ico { animation: none; }

/* Moduły z innej strefy w ramce */
iframe.swc-embed-frame { width: 100%; border: 0; min-height: 300px; display: block; background: transparent; color-scheme: dark; transition: height .2s ease; }
html.swc-embed { color-scheme: dark; }
html.swc-embed, html.swc-embed body { background: transparent !important; }
html.swc-embed body { padding: 0 !important; min-height: 0 !important; }
html.swc-embed .swc-bar, html.swc-embed .swc-footer, html.swc-embed .swc-fb-float, html.swc-embed .swc-ann-wrap, html.swc-embed #swcBg, html.swc-embed .main-tabs, html.swc-embed .dev-groups { display: none !important; }
html.swc-embed .wrapper { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* Pulpit Technika */
.dash-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-top h2 { margin: 0 0 2px; font-size: 22px; color: #fff; }
.dash-top .hint { margin: 0; }
.dash { display: flex; flex-direction: column; gap: 22px; }
.dash-cat { display: flex; flex-direction: column; gap: 10px; animation: in-txt .35s cubic-bezier(.22,1,.36,1) both; }
.dash-h { margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; color: var(--swc-muted) !important; text-transform: uppercase !important; letter-spacing: .07em !important; display: block !important; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 14px; align-items: start; }
.dash-grid > .card { margin: 0 !important; height: 100%; }
.dash-grid.short { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.dash-go { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; cursor: pointer; color: #fff; font: inherit; border: 1px solid var(--swc-line); transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s; }
.dash-go:hover { transform: translateY(-2px); border-color: rgba(255,201,74,.6); }
.dash-go .i { width: 38px; height: 38px; border-radius: 12px; background: rgba(205,213,255,.15); display: grid; place-items: center; font-size: 18px; flex: none; }
.dash-go b { display: block; font-size: 14px; } .dash-go small { color: var(--swc-muted); font-size: 12px; } .dash-go > i { margin-left: auto; color: var(--swc-sky); font-style: normal; }
.dash-num { font-size: 30px; font-weight: 800; color: #fff; } .dash-num small { font-size: 13px; font-weight: 600; color: var(--swc-muted); }
.dash-ppl { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.dash-ppl span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(205,213,255,.12); font-size: 12.5px; color: #e6edfb; }
.dash-ppl img { width: 22px; height: 22px; border-radius: 50%; }
.dash-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dash-list div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.18); font-size: 13.5px; color: #e6edfb; }
.dash-list b { color: #ffc94a; white-space: nowrap; }
.dash-ed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 8px; }
.dash-ec { display: flex; flex-direction: column; gap: 8px; }
.dash-ei { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; border: 1px dashed var(--swc-line); cursor: pointer; }
.dash-ei.on { border-style: solid; border-color: rgba(255,201,74,.45); background: rgba(255,201,74,.06); }
.dash-ei input { accent-color: #ffc94a; width: 17px; height: 17px; flex: none; }
.dash-ei span { flex: 1; min-width: 0; } .dash-ei b { display: block; color: #fff; font-size: 13.5px; } .dash-ei small { color: var(--swc-muted); font-size: 12px; }
html.swc-noanim .dash-cat { animation: none; }
.dash-ech { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dash-ech span { display: flex; gap: 6px; }
/* pola formularza stołów eventowych w stylu strony */
.ev-form .field { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.25); border: 1px solid var(--swc-line); border-radius: 10px; color: #fff; padding: 10px 12px; font: 500 14px 'Sen', system-ui, sans-serif; color-scheme: dark; }
.ev-form select.field option { background: #0d2350; color: #fff; }
.ev-form .field:focus { outline: none; border-color: var(--swc-sky); }

/* Powiadomienie pop-up od Technika */
.swc-dlg-pop .pop-banner { height: auto; max-height: 260px; aspect-ratio: 880 / 360; }
.swc-dlg-pop .pop-banner img { animation: none; }
.swc-dlg-pop .pop-ico { display: grid; place-items: center; padding: 26px 0 4px; }
.swc-dlg-pop .pop-ico span { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; background: rgba(255,201,74,.16); animation: pop-ring 2.4s ease-in-out infinite; }
.swc-dlg-pop .vb-body { padding-top: 14px; }
.swc-dlg-pop .pop-text { white-space: pre-line; }
.swc-dlg-pop:not(:has(.pop-banner)) .vb-body { text-align: center; } .swc-dlg-pop:not(:has(.pop-banner)) .vb-body h3, .swc-dlg-pop:not(:has(.pop-banner)) .vb-title { text-align: center !important; }
@keyframes pop-ring { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(-14deg); } 72% { transform: rotate(12deg); } 79% { transform: rotate(-8deg); } 86% { transform: rotate(4deg); } }
html.swc-noanim .swc-dlg-pop .pop-ico span { animation: none; }
/* Formularz pop-upów (Strefa Technika) */
.pop-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pop-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--swc-muted); font-weight: 700; }
.pop-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; }
.pop-img { border-radius: 14px; border: 1px dashed rgba(205,213,255,.4); min-height: 120px; max-height: 240px; display: grid; place-items: center; overflow: hidden; color: var(--swc-muted); font-size: 13px; background: rgba(10,31,74,.6); }
.pop-img img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.pop-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .pop-row { grid-template-columns: 1fr; } }

/* ---------- Społeczność: seria, kalendarz, odznaki, wydarzenia, statystyki, raporty ---------- */
.cm-streak { display: flex; align-items: center; gap: 14px; }
.cm-flame { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: rgba(205,213,255,.12); filter: grayscale(1); opacity: .55; flex: none; }
.cm-flame.lit { filter: none; opacity: 1; background: rgba(255,201,74,.16); animation: cm-flick 2.2s ease-in-out infinite; }
.cm-st b { display: block; color: #fff; font-size: 17px; } .cm-st small { color: var(--swc-muted); font-size: 12.5px; }
.cm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cm-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 6px; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid transparent; }
.cm-day span { font-size: 11.5px; font-weight: 800; color: var(--swc-muted); } .cm-day i { font-style: normal; font-size: 16px; height: 20px; line-height: 20px; color: var(--swc-muted); }
.cm-day.on { background: rgba(255,201,74,.14); } .cm-day.on span { color: #ffc94a; }
.cm-day.today { border-color: rgba(255,201,74,.6); } .cm-day.future { opacity: .45; }
.cm-bhead { display: flex; align-items: baseline; justify-content: space-between; } .cm-bhead h2 { margin: 0 0 12px; font-size: 18px; color: #fff; } .cm-bhead small { color: var(--swc-muted); }
.cm-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cm-badge { padding: 14px 10px 12px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid var(--swc-line); text-align: center; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.cm-badge span { font-size: 30px; filter: grayscale(1); opacity: .35; } .cm-badge b { font-size: 13px; color: #b9c6e4; } .cm-badge small { font-size: 11.5px; color: var(--swc-muted); line-height: 1.35; }
.cm-badge.on { border-color: rgba(255,201,74,.45); background: rgba(255,201,74,.07); } .cm-badge.on span { filter: none; opacity: 1; } .cm-badge.on b { color: #fff; }
.swc-dlg-badge .cm-new { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.cm-newb { display: flex; flex-direction: column; align-items: center; gap: 2px; } .cm-newb span { font-size: 54px; animation: cm-pop .6s cubic-bezier(.22,1,.36,1) both; } .cm-newb b { color: #fff; font-size: 17px; } .cm-newb small { color: var(--swc-muted); }
.cm-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.cm-ev { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; padding: 0; transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s; }
.cm-ev:hover { transform: translateY(-2px); border-color: rgba(255,201,74,.55); }
.cm-ev img { width: 100%; height: auto; display: block; background: #0a1f4a; }   /* baner z Discorda w całości, bez przycinania */
.cm-ev-ph { width: 100%; aspect-ratio: 5 / 2; display: block; background: linear-gradient(180deg, #313f98, #1c276e); }
.cm-ev-ph { display: grid; place-items: center; font-size: 34px; }
.cm-ev-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; } .cm-ev-b b { color: #fff; font-size: 15.5px; } .cm-ev-b small { color: #c7d2ea; font-size: 13px; line-height: 1.45; }
.cm-when { font-size: 12px; font-weight: 800; color: #ffc94a; text-transform: uppercase; letter-spacing: .04em; } .cm-ev.live .cm-when { color: #ff7b7b; }
.cm-ev-f { font-size: 12px; color: var(--swc-muted); margin-top: 2px; }
.hub-daily { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.hub-daily > .neo-panel { padding: 18px 18px 16px; }
.hub-word { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.hub-word .tiles { display: flex; gap: 4px; flex: none; } .hub-word .tiles i { width: 24px; height: 24px; border-radius: 7px; background: #2a3b63; display: block; } .hub-word .tiles i.g { background: #3fae6e; } .hub-word .tiles i.y { background: #e0a43a; }
.hub-word b { display: block; color: #fff; font-size: 17px; } .hub-word small { color: var(--swc-muted); font-size: 12.5px; } .hub-word > i { margin-left: auto; color: var(--swc-sky); font-style: normal; }
.cm-stats-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cm-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.2); }
.cm-seg button { border: 0; background: transparent; color: var(--swc-muted); font: 700 13px 'Sen', system-ui, sans-serif; padding: 7px 12px; border-radius: 9px; cursor: pointer; } .cm-seg button.on { background: rgba(205,213,255,.25); color: #fff; }
.cm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cm-kpis div { padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.18); } .cm-kpis b { display: block; color: #fff; font-size: 22px; } .cm-kpis small { color: var(--swc-muted); font-size: 12px; }
.cm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.cm-chart { padding: 14px; border-radius: 14px; border: 1px solid var(--swc-line); background: rgba(0,0,0,.12); } .cm-chart h3 { margin: 0 0 10px !important; font-size: 13px !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; display: block !important; }
.cm-bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; } .cm-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; } .cm-bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; transition: height .4s ease; }
.cm-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--swc-muted); margin-top: 4px; }
.cm-list { display: flex; flex-direction: column; gap: 5px; } .cm-list div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #e6edfb; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.15); } .cm-list b { color: #ffc94a; white-space: nowrap; }
.cm-ch { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--swc-muted); font-weight: 700; min-width: 240px; }
.cm-reps { display: flex; flex-direction: column; gap: 10px; }
.cm-rep { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--swc-line); background: rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cm-rep-h b { display: block; color: #fff; } .cm-rep-h small { color: var(--swc-muted); font-size: 12px; }
.cm-rep-p { display: flex; flex-wrap: wrap; gap: 5px; } .cm-rep-p span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: rgba(205,213,255,.14); color: #e6edfb; } .cm-rep-p span.win { background: rgba(255,201,74,.2); color: #ffd27a; }
@keyframes cm-flick { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(-4deg); } }
@keyframes cm-pop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
html.swc-noanim .cm-flame, html.swc-noanim .cm-newb span { animation: none !important; }
/* grafiki odznak i system wielopoziomowy (tarcze) */
.cm-bcount-tag { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: rgba(255,201,74,.15); color: #ffc94a; border: 1px solid rgba(255,201,74,.3); }
.cm-badge-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.cm-badge-card {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--swc-line);
  cursor: pointer;
  color: inherit;
  transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, background-color .2s;
}
.cm-badge-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,201,74,.55);
  background: rgba(255,201,74,.04);
}
.cm-badge-card.on { border-color: rgba(255,201,74,.35); }
.cm-badge-card:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }

.cm-bimg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
}
.cm-badge-card .cm-bimg {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s;
}
.cm-badge-card:hover .cm-bimg { transform: scale(1.06); }
.cm-badge-card .cm-bimg.locked { filter: grayscale(1) opacity(0.38); }
.cm-bicon { font-size: 40px; }

.cm-lvl-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--swc-muted);
  white-space: nowrap;
}
.cm-lvl-pill.on {
  background: rgba(255,201,74,0.18);
  color: #ffc94a;
  border: 1px solid rgba(255,201,74,0.35);
}

.cm-bcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-bname {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}
.cm-bdesc {
  font-size: 12.5px;
  color: var(--swc-muted);
  line-height: 1.4;
}
.cm-bprog-wrap {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-bprog-txt {
  font-size: 12.5px;
  color: #cdd8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cm-bprog-done { color: #ffc94a; font-weight: 800; }
.cm-bprog-bar {
  width: 100%;
  height: 7px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.cm-bprog-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc94a, #ffd074);
  border-radius: 999px;
  transition: width .4s ease;
}
.cm-bcard-foot { margin-top: 8px; }
.cm-bhint {
  font-size: 12px;
  font-weight: 700;
  color: var(--swc-sky);
  transition: color .15s;
}
.cm-badge-card:hover .cm-bhint {
  color: #ffc94a;
  text-decoration: underline;
}

/* Stary widok pojedynczych odznak */
.cm-badge .cm-bimg { width: 40px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: .35; }
.cm-badge.on .cm-bimg { filter: none; opacity: 1; }
.swc-dlg-badge .cm-new { max-height: min(60vh, 400px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
.cm-newb .cm-bimg { width: 100px; height: 100px; object-fit: contain; animation: cm-pop .6s cubic-bezier(.22,1,.36,1) both; }
@media (max-width: 480px) { .cm-newb .cm-bimg { width: 80px; height: 80px; } }
html.swc-noanim .cm-newb .cm-bimg { animation: none !important; }
button.cm-badge { font: inherit; color: inherit; cursor: pointer; text-align: center; }
button.cm-badge:hover { border-color: rgba(205,213,255,.55); } button.cm-badge:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
.cm-newb em { font-style: normal; font-size: 13px; color: #cdd8f0; margin-top: 6px; }
.cm-newb.locked .cm-bimg, .cm-newb.locked span { filter: grayscale(1); opacity: .45; }

/* Okno ścieżki poziomów (.swc-dlg-track) */
.swc-dlg.swc-dlg-track {
  width: min(740px, calc(100vw - 28px));
  max-width: 740px;
  text-align: left;
  padding: 24px 26px 20px;
}
.swc-dlg.swc-dlg-track h3 {
  text-align: left !important;
  font-size: 21px !important;
  margin-bottom: 12px !important;
}
.cm-track-modal { display: flex; flex-direction: column; gap: 14px; }
.cm-track-header-panel {
  background: rgba(0,0,0,0.24);
  border: 1px solid var(--swc-line);
  border-radius: 16px;
  padding: 14px 18px;
}
.cm-track-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
}
.cm-tkpi small {
  display: block;
  font-size: 11.5px;
  color: var(--swc-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.cm-tkpi b { font-size: 18px; color: #fff; }
.cm-tkpi b.gold { color: #ffc94a; }
.cm-track-section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
  flex-wrap: wrap;
  gap: 6px;
}
.cm-track-section-title span {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cm-track-section-title small { font-size: 12px; color: var(--swc-muted); }

/* Linia postępu łącząca 5 odznak */
.cm-track-scroll-wrap {
  overflow-x: auto;
  padding: 14px 8px 12px;
  margin: 0 -8px;
  -webkit-overflow-scrolling: touch;
}
.cm-track-trackline {
  position: relative;
  min-width: 540px;
  padding: 0 16px;
}
.cm-track-line-bg {
  position: absolute;
  top: 38px;
  left: 48px;
  right: 48px;
  height: 6px;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 1;
}
.cm-track-line-fill {
  position: absolute;
  top: 38px;
  left: 48px;
  max-width: calc(100% - 96px);
  height: 6px;
  background: linear-gradient(90deg, #57f287 0%, #ffc94a 80%, #ffd074 100%);
  border-radius: 999px;
  z-index: 2;
  transition: width .5s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px rgba(255,201,74,0.45);
}
.cm-track-nodes {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cm-track-node {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  cursor: pointer;
  text-align: center;
  border-radius: 14px;
  padding: 6px 4px 8px;
  transition: transform .18s, background-color .18s;
}
.cm-track-node:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.06);
}
.cm-track-node.selected {
  background: rgba(205,213,255,0.16);
  outline: 2px solid var(--swc-sky);
}
.cm-node-shield-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.cm-node-shield {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  transition: transform .2s, filter .2s;
}
.cm-track-node:hover .cm-node-shield { transform: scale(1.08); }
.cm-track-node.locked .cm-node-shield { filter: grayscale(1) opacity(0.35); }
.cm-track-node.active .cm-node-shield { filter: drop-shadow(0 0 10px rgba(255,201,74,0.7)); }
.cm-node-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  border: 2px solid #0f2a5e;
}
.cm-node-indicator.done { background: #57f287; color: #063417; }
.cm-node-indicator.active { background: #ffc94a; color: #2e1c02; animation: pop-ring 2.4s infinite ease-in-out; }
.cm-node-indicator.locked { background: #334155; color: #94a3b8; }
.cm-node-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.cm-node-lvl { font-size: 12.5px; color: #fff; font-weight: 800; }
.cm-node-req { font-size: 11.5px; color: var(--swc-muted); }
.cm-node-badge {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.cm-node-badge.done { background: rgba(87,242,135,0.18); color: #57f287; border: 1px solid rgba(87,242,135,0.35); }
.cm-node-badge.active { background: rgba(255,201,74,0.22); color: #ffc94a; border: 1px solid rgba(255,201,74,0.4); }
.cm-node-badge.locked { background: rgba(255,255,255,0.06); color: #94a3b8; }

@media (max-width: 640px) {
  .swc-dlg.swc-dlg-track { padding: 18px 16px 16px; }
  .cm-track-kpis { font-size: 11px; }
  .cm-tkpi b { font-size: 15px; }
}
/* zapowiedź przerwy technicznej (tryb „closing”) */
.swc-closing { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; gap: 10px; align-items: center; max-width: min(620px, calc(100% - 24px)); padding: 11px 16px; border-radius: 14px; background: #2a1f08; border: 1px solid rgba(255,201,74,.55); color: #ffe1a8; font: 600 13.5px/1.4 'Sen', system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: swc-closing-in .35s cubic-bezier(.22,1,.36,1) both; }
.swc-closing b { color: #fff; }
.swc-closing-txt { flex: 1; min-width: 0; }
.swc-closing-x { all: unset; box-sizing: border-box; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #ffe1a8; cursor: pointer; opacity: 0.75; margin-left: 8px; flex: none; transition: opacity .15s, background .15s; }
.swc-closing-x:hover, .swc-closing-x:focus-visible { opacity: 1; background: rgba(255,201,74, 0.2); }
body.has-swc-mnav .swc-closing { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
@keyframes swc-closing-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
html.swc-noanim .swc-closing { animation: none; }
/* ---------- Szybka nawigacja w pasku (komputer) ---------- */
.swc-quick { display: none; }
body:has(.swc-sidebar) .swc-quick,
body.has-swc-sidebar .swc-quick {
  display: none !important;
}
@media (min-width: 900px) {
  .swc-quick { display: flex; gap: 6px; align-items: center; margin: 0 14px 0 auto; }
  .swc-quick .sq-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #c9d6f2;
    font: 700 13.5px 'Sen', system-ui, sans-serif;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(205,213,255, 0.16);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .swc-quick .sq-link .sq-ico { display: flex; align-items: center; justify-content: center; color: #cdd5ff; }
  .swc-quick .sq-link:hover {
    background: rgba(205,213,255, 0.16);
    border-color: rgba(205,213,255, 0.4);
    color: #fff;
    transform: translateY(-1px);
  }
  .swc-quick .sq-link.on {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1c276e !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }
  .swc-quick .sq-link.on .sq-ico { color: #1c276e !important; }
  .swc-bar:has(.swc-quick) .swc-left { margin-right: 0; }
}
@media (min-width: 900px) and (max-width: 1080px) {
  .swc-quick .sq-link { padding: 7px 10px; font-size: 13px; gap: 5px; }
}

/* ---------- Stopka: fala chmurek, szkoła i płynące chmurki ---------- */
.swc-footer,
.swc-footer.swc-foot-rich {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: auto 0 0 0 !important;
  flex-shrink: 0 !important;
  padding: 0;
  text-align: center;
  background: none;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.sf-wave { display: block; width: 100%; height: 34px; margin-bottom: -1px; }
.sf-wave path { fill: #0b2152; }
.sf-body { position: relative; background: #0b2152; padding: 14px 16px 20px; }
.sf-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px auto 32px;
  padding: 0 16px;
  position: relative;
  z-index: 2;
  max-width: 860px;
}
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(205,213,255,.12);
  border: 1px solid rgba(205,213,255,.28);
  color: #e6edf9;
  font: 700 13.5px 'Sen', system-ui, sans-serif;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .15s, color .15s;
}
.sf-btn svg { width: 17px; height: 17px; flex: none; }
.sf-btn:hover {
  background: rgba(205,213,255,.22);
  border-color: rgba(205,213,255,.55);
  color: #fff;
  transform: translateY(-1px);
}
.sf-btn.active { background: #ffc94a; border-color: #ffc94a; color: #0b1f45; }
.sf-scene { position: relative; height: 112px; max-width: 980px; margin: 0 auto 16px; pointer-events: none; z-index: 1; }
.sf-scene svg.sf-city { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(980px, 100%); height: 100%; }
.sf-cloud { position: absolute; left: 0; overflow: visible; fill: rgba(255,255,255,.16); animation: sf-drift linear infinite; will-change: transform; backface-visibility: hidden; }
.sf-cloud.c1 { top: 8px; width: 78px; animation-duration: 46s; animation-delay: -6s; }
.sf-cloud.c2 { top: 30px; width: 54px; animation-duration: 62s; animation-delay: -30s; fill: rgba(255,255,255,.11); }
.sf-cloud.c3 { top: 2px; width: 64px; animation-duration: 54s; animation-delay: -44s; }
@keyframes sf-drift { from { transform: translate3d(-140px, 0, 0); } to { transform: translate3d(min(1000px, 100vw), 0, 0); } }
.sf-line { display: flex; justify-content: center; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--swc-muted); padding: 4px 16px 12px; }
.sf-line a { color: #c9d6f2; font-weight: 600; text-decoration: none; border: 0; }
.sf-line a:hover { color: #fff; }
.sf-line > :not([hidden]) ~ :not([hidden])::before { content: '·'; margin-right: 14px; opacity: .45; color: var(--swc-muted); }
.sf-line .sf-credit a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.35); }
html.swc-noanim .sf-cloud { animation: none; transform: translateX(18vw); }
html.swc-noanim .sf-cloud.c2 { transform: translateX(62vw); } html.swc-noanim .sf-cloud.c3 { transform: translateX(40vw); }
@media (prefers-reduced-motion: reduce) { .sf-cloud { animation: none; transform: translateX(30vw); } }

/* ---------- Telefon: mniejsza stopka + stały pasek na dole zamiast bocznego menu ---------- */
.swc-mnav { display: none; }
@media (max-width: 900px) {
  .sf-scene { height: 70px; margin: 0 auto 12px; }
  .sf-cloud.c1 { width: 56px; } .sf-cloud.c3 { display: none; }
  .sf-btns { gap: 8px; margin: 10px auto 20px; padding: 0 10px; }
  .sf-line .sf-credit { flex-basis: 100%; } .sf-line .sf-credit::before { content: none !important; }
  .sf-btn { padding: 7px 13px; font-size: 12px; gap: 6px; }
  .sf-btn svg { width: 15px; height: 15px; }
  body.has-swc-mnav { padding-bottom: 0 !important; }
  body.has-swc-mnav .sf-body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }   /* miejsce na pasek na dole */
  body.has-swc-mnav .sf-btns { display: none !important; } /* na telefonie z dolnym paskiem nawigacji nie powielamy przycisków w stopce */
  .swc-footer,
  .swc-footer.swc-foot-rich {
    width: calc(100% + 24px + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)) !important;
    max-width: none !important;
    margin-left: calc(-12px - env(safe-area-inset-left, 0px)) !important;
    margin-right: calc(-12px - env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .sf-wave {
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
  }
  .sf-body {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  .swc-footer.swc-foot-rich .swc-fb { margin: 6px auto 0; }
  body.has-swc-mnav .swc-sidebar-wrap { display: none !important; }
  body.has-swc-mnav .swc-fb-float { display: none !important; }
  .swc-mnav { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 950; justify-content: space-around; gap: 2px; padding: 6px; border-radius: 20px; background: rgba(11,33,82,.96); border: 1px solid rgba(205,213,255,.28); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .swc-mnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 14px; color: #b9c6e4; font: 700 10.5px 'Sen', system-ui, sans-serif; text-decoration: none; min-width: 0; }
  .swc-mnav a svg { width: 22px; height: 22px; }
  .swc-mnav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .swc-mnav a.on { background: rgba(255,201,74,.16); color: #ffc94a; }
}
html.swc-embed .swc-mnav { display: none !important; }

/* boczne menu na podstronach: szersza strona, żeby treść nie była ściśnięta */
.wrapper:has(> .swc-layout) { max-width: 1180px !important; }

/* ---------- Boczne menu: logo, konto i własny układ ---------- */
.swc-sidebar .sb-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(205,213,255,.16); color: #fff; text-decoration: none; border-radius: 12px; transition: opacity .15s; }
.swc-sidebar .sb-brand:hover { opacity: .85; }
.swc-sidebar .sb-brand img { width: 40px; height: 28px; object-fit: contain; flex: none; }
.swc-sidebar .sb-brand span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.swc-sidebar .sb-brand strong { font: 700 15px 'Sen', system-ui, sans-serif; white-space: nowrap; }
.swc-sidebar .sb-brand small { font: 600 12px 'Sen', system-ui, sans-serif; color: #cdd5ff; }
.swc-sidebar .sb-user-box { position: relative; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(205,213,255,.16); }
.swc-sidebar .sb-user { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; border-radius: 16px; cursor: pointer; transition: background-color .15s; }
.swc-sidebar .sb-user:disabled { cursor: default; }
.swc-sidebar .sb-user:not(:disabled):hover, .swc-sidebar .sb-user[aria-expanded="true"] { background: rgba(205,213,255,.1); }
.swc-sidebar .sb-user:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
.swc-sidebar .sb-user .sb-name { display: block; max-width: 220px; }
.swc-sidebar .sb-user .sb-sub { display: inline-flex; align-items: center; gap: 4px; }
.swc-sidebar .sb-chev { transition: transform .2s ease; }
.swc-sidebar .sb-user[aria-expanded="true"] .sb-chev { transform: rotate(180deg); }
.swc-sidebar .sb-acc { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 6px; border-radius: 14px; background: rgba(6,18,44,.6); border: 1px solid rgba(205,213,255,.2); animation: sb-acc-in .2s cubic-bezier(.22,1,.36,1) both; }
.swc-sidebar .sb-acc[hidden] { display: none; }
@keyframes sb-acc-in { from { opacity: 0; transform: translateY(-4px); } }
html.swc-noanim .swc-sidebar .sb-acc { animation: none; }
.swc-sidebar .sb-acc-it { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: #d3ddef; font: 600 13.5px 'Sen', system-ui, sans-serif; cursor: pointer; }
.swc-sidebar .sb-acc-it:hover, .swc-sidebar .sb-acc-it:focus-visible { background: rgba(205,213,255,.14); color: #fff; }
.swc-sidebar .sb-acc-out { color: #ff9b9b; }
.swc-sidebar .sb-ehint { margin: 0 4px 6px; font: 500 12.5px/1.45 'Sen', system-ui, sans-serif; color: #9fb2d9; }
.swc-sidebar .sb-erow { display: flex; align-items: center; gap: 4px; padding: 5px 4px 5px 8px; border-radius: 12px; background: rgba(205,213,255,.07); border: 1px solid rgba(205,213,255,.14); color: #d3ddef; font: 600 13.5px 'Sen', system-ui, sans-serif; }
.swc-sidebar .sb-erow .sb-ico { width: 26px; height: 26px; }
.swc-sidebar .sb-erow .sb-ico svg { width: 18px; height: 18px; }
.swc-sidebar .sb-erow .sb-label { white-space: normal; line-height: 1.2; margin-left: 4px; }
.swc-sidebar .sb-erow.off { opacity: .5; }
.swc-sidebar .sb-erow.off .sb-label { text-decoration: line-through; }
.swc-sidebar .sb-ebtn { all: unset; box-sizing: border-box; width: 26px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #c9d6f2; cursor: pointer; }
.swc-sidebar .sb-ebtn:hover:not(:disabled), .swc-sidebar .sb-ebtn:focus-visible { background: rgba(205,213,255,.2); color: #fff; }
.swc-sidebar .sb-ebtn:disabled { opacity: .25; cursor: default; }
.swc-sidebar .sb-ebtn.sb-down svg { transform: rotate(180deg); }
.swc-sidebar .sb-eacts { display: flex; gap: 6px; margin-top: 6px; }
.swc-sidebar .sb-eacts button { all: unset; box-sizing: border-box; flex: 1; text-align: center; padding: 9px 8px; border-radius: 12px; font: 700 13px 'Sen', system-ui, sans-serif; cursor: pointer; }
.swc-sidebar .sb-eacts .sb-done { background: #ffc94a; color: #0b1f45; }
.swc-sidebar .sb-eacts .sb-reset { background: rgba(205,213,255,.12); color: #d3ddef; border: 1px solid rgba(205,213,255,.25); }
.swc-sidebar .sb-eacts button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sb-peek-trigger,
#sbPeekTrigger {
  display: none !important;
}

/* =====================================================================
   PASEK BOCZNY SZKOŁY W CHMURZE: Wyśrodkowany pionowo, kompaktowy, zwijany
   ===================================================================== */
@media (min-width: 901px) {
  /* Panel po boku: wyśrodkowany w pionie, naturalny rozmiar zawartości, delikatnie mniejszy i zgrabniejszy */
  .swc-sidebar-wrap {
    position: fixed !important;
    left: max(20px, env(safe-area-inset-left, 20px)) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) !important;
    width: 244px !important;
    max-height: var(--swc-sb-dock-maxh, calc(100vh - 36px)) !important;
    height: auto !important;
    z-index: 99 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease, max-height .2s ease;
  }
  html.is-logged-out .swc-sidebar-wrap,
  body.is-logged-out .swc-sidebar-wrap,
  .swc-sidebar-wrap[hidden],
  .swc-sidebar-wrap.is-hidden {
    display: none !important;
  }
  .swc-sidebar-wrap::-webkit-scrollbar { display: none !important; }
  .swc-sidebar-wrap .swc-sidebar { min-height: auto; flex: 0 1 auto; padding: 16px 12px 14px !important; border-radius: 20px !important; }

  /* Stan zwinięty panelu: chowa się natychmiast za lewą krawędź ekranu */
  html.swc-sb-collapsed .swc-sidebar-wrap,
  body.swc-sb-collapsed .swc-sidebar-wrap {
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) translateX(calc(-100% - 24px)) !important;
    pointer-events: none !important;
  }
  /* Odkrycie panelu po najechaniu na uchwyt przy krawędzi */
  html.swc-sb-collapsed.swc-sb-peeking .swc-sidebar-wrap,
  body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar-wrap {
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Przycisk / znaczek na lewej krawędzi do odkrywania menu (komputer) */
  .sb-peek-trigger,
  #sbPeekTrigger {
    display: none !important;
  }
  :is(html.swc-sb-collapsed, body.swc-sb-collapsed) :is(.sb-peek-trigger, #sbPeekTrigger) {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) !important;
    z-index: 100001 !important;
    width: 32px !important;
    height: 68px !important;
    padding: 0 !important;
    border: 1.5px solid #ffc94a !important;
    border-left: none !important;
    border-radius: 0 16px 16px 0 !important;
    background: rgba(14,18,70,.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffc94a !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 2px 4px 18px rgba(0,0,0,.5), 0 0 16px rgba(255,201,74,0.4) !important;
    transition: width .2s ease, background-color .2s ease, box-shadow .2s ease, transform .3s ease !important;
  }
  :is(html.swc-sb-collapsed, body.swc-sb-collapsed) :is(.sb-peek-trigger, #sbPeekTrigger):hover,
  :is(html.swc-sb-collapsed, body.swc-sb-collapsed) :is(.sb-peek-trigger, #sbPeekTrigger):focus-visible {
    width: 44px !important;
    background: #1c276e !important;
    color: #fff !important;
    box-shadow: 2px 6px 24px rgba(0,0,0,.6), 0 0 22px rgba(255,201,74,0.6) !important;
  }

  /* Zawartość strony ZAWSZE idealnie wyśrodkowana na ekranie (symetryczne odstępy boczne, niezależnie od tego, czy panel jest rozwinięty czy zwinięty) */
  html.has-swc-sidebar:not(.is-logged-out) body,
  body.has-swc-sidebar:not(.is-logged-out),
  html.has-swc-gside:not(.is-logged-out) body,
  body.has-swc-gside:not(.is-logged-out) {
    padding-left: 36px !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
  }

  /* Wyraźny, estetyczny odstęp od góry (zgodnie z życzeniem użytkownika) */
  html.has-swc-sidebar:not(.is-logged-out) body,
  body.has-swc-sidebar:not(.is-logged-out),
  html.has-swc-gside:not(.is-logged-out) body,
  body.has-swc-gside:not(.is-logged-out) {
    padding-top: 56px !important;
  }
  html.is-desktop-app.has-swc-sidebar:not(.is-logged-out) body,
  body.is-desktop-app.has-swc-sidebar:not(.is-logged-out),
  html.is-desktop-app.has-swc-gside:not(.is-logged-out) body,
  body.is-desktop-app.has-swc-gside:not(.is-logged-out) {
    padding-top: calc(var(--swc-titlebar-h, 36px) + 54px) !important;
  }
  html.is-desktop-app:not(.has-swc-sidebar):not(.has-swc-gside) body,
  body.is-desktop-app:not(.has-swc-sidebar):not(.has-swc-gside) {
    padding-top: calc(var(--swc-titlebar-h, 36px) + 38px) !important;
  }

  .hub-layout, .swc-layout {
    display: block !important;
    width: 100% !important;
  }
  .hub-main-col, .swc-main-col {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  /* komputer: logo i konto są w bocznym panelu, a górny pasek .swc-bar jest CAŁKOWICIE UKRYTY (nawet gdy panel jest zwinięty - użytkownik ma tylko znaczek po lewej) */
  html.has-swc-sidebar .swc-bar,
  body.has-swc-sidebar .swc-bar,
  html.has-swc-gside:not(.swc-ingame) .swc-bar,
  body.has-swc-gside:not(.swc-ingame) .swc-bar,
  body:has(.swc-sidebar-wrap) .swc-bar,
  body:has(#catNav) .swc-bar,
  .wrapper:has(.swc-sidebar) > .swc-bar,
  .wrapper:has(.hub-layout) > .swc-bar {
    display: none !important;
  }
  /* Stopka na pełną szerokość ekranu przy aktywnym menu bocznym */
  body.has-swc-sidebar:not(.is-logged-out) .swc-footer.swc-foot-rich,
  body.has-swc-gside:not(.is-logged-out) .swc-footer.swc-foot-rich {
    width: calc(100% + 72px) !important;
    max-width: none !important;
    margin-left: -36px !important;
    margin-right: -36px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }

  /* Zabezpieczenie przed nakładaniem się panelu bocznego na treść na ekranach mniejszych niż 1720px przy rozwiniętym menu */
  @media (min-width: 901px) and (max-width: 1720px) {
    body.has-swc-sidebar:not(.swc-sb-collapsed) :is(.wrapper, .hub-main-col, .swc-main-col) {
      max-width: min(100%, calc(100vw - 580px)) !important;
    }
  }

  /* Wyłączenie animacji wjeżdżania bocznego menu podczas pierwszego wczytywania strony */
  html.swc-booting .swc-sidebar-wrap,
  html.swc-booting .swc-gside,
  html.swc-booting body,
  html.swc-booting .sb-peek-trigger {
    transition: none !important;
    animation: none !important;
  }

  /* Kokpit na stronie głównej — natychmiastowa widoczność bez migania */
  html.has-swc-sidebar #loadingBox,
  body.has-swc-sidebar #loadingBox {
    display: none !important;
  }
  html.has-swc-sidebar #hubSection,
  body.has-swc-sidebar #hubSection {
    display: block !important;
  }
  html.is-logged-out #loadingBox,
  body.is-logged-out #loadingBox {
    display: none !important;
  }
  html.is-logged-out #loginBox,
  body.is-logged-out #loginBox {
    display: block !important;
  }
  html.is-logged-out #hubSection,
  body.is-logged-out #hubSection {
    display: none !important;
  }
}

/* Pasek akcji na dole bocznego menu: zwijanie, edycja ołówek, wylogowanie */
.swc-sidebar .sb-bar-acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(205,213,255, 0.16);
}
.swc-sidebar .sb-act-btn {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(205,213,255, 0.1);
  border: 1px solid rgba(205,213,255, 0.2);
  color: #c9d6f2;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.swc-sidebar .sb-act-btn:hover,
.swc-sidebar .sb-act-btn:focus-visible {
  background: rgba(205,213,255, 0.22);
  border-color: rgba(205,213,255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}
.swc-sidebar .sb-act-btn:focus-visible {
  outline: 2px solid #ffc94a;
  outline-offset: 1px;
}
.swc-sidebar .sb-btn-collapse svg {
  transition: transform .25s ease;
}
.swc-sidebar .sb-btn-logout {
  color: #ff9b9b;
  border-color: rgba(255, 120, 120, 0.25);
  background: rgba(255, 100, 100, 0.08);
}
.swc-sidebar .sb-btn-logout:hover,
.swc-sidebar .sb-btn-logout:focus-visible {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 120, 120, 0.5);
  color: #ffc4c4;
}

/* Wylogowany: brak marginesu bocznego, ukrycie panelu bocznego i sekcji gier */
body.is-logged-out,
body.is-logged-out.has-swc-sidebar,
body.is-logged-out.has-swc-gside {
  padding-left: 0 !important;
}
body.is-logged-out .swc-sidebar-wrap,
body.is-logged-out #catNav,
body.is-logged-out .hub-layout,
.hub-layout.is-hidden,
.hub-layout[hidden],
.hub-layout[style*="display:none"],
.hub-layout[style*="display: none"] {
  display: none !important;
}
body.page-hub.is-logged-out .swc-bar {
  display: none !important;
}

/* telefon/wąsko: kolumna z treścią zawsze na całą szerokość, nigdy bocznego menu */
@media (max-width: 900px) {
  body,
  body.has-swc-sidebar,
  body.has-swc-gside {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .swc-sidebar-wrap, #catNav.swc-sidebar, .swc-gside {
    display: none !important;
  }
  .swc-layout {
    align-items: stretch !important;
  }
  .swc-layout > .swc-main-col {
    width: 100%;
    max-width: 100%;
  }
  .swc-sidebar .sb-brand {
    display: none;
  }
}
.swc-sidebar .sb-editlink { all: unset; box-sizing: border-box; align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; color: #cdd5ff; font: 600 12.5px 'Sen', system-ui, sans-serif; cursor: pointer; transition: background-color .15s, color .15s; }
.swc-sidebar .sb-editlink:hover, .swc-sidebar .sb-editlink:focus-visible { background: rgba(205,213,255,.12); color: #fff; }
.main-tabs[hidden] { display: none !important; }
/* Strefa Technika obok bocznego menu: kafelki grup 3 w rzędzie */
@media (min-width: 901px) { .swc-layout .dev-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Gry: boczne menu jako panel z lewej (widoczne w lobby, schowane w trakcie gry) ---------- */
.swc-gside { display: none; }
@media (min-width: 901px) {
  .swc-gside {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    position: fixed !important;
    left: max(20px, env(safe-area-inset-left, 20px)) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) !important;
    width: 244px !important;
    max-height: var(--swc-sb-dock-maxh, calc(100vh - 36px)) !important;
    height: auto !important;
    z-index: 99 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, max-height .2s ease !important;
  }
  .swc-gside::-webkit-scrollbar { display: none !important; }
  .swc-gside .swc-sidebar { flex: none; padding: 16px 12px 14px !important; border-radius: 20px !important; }
  body.swc-sb-collapsed .swc-gside {
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) translateX(calc(-100% - 24px)) !important;
    pointer-events: none !important;
  }
  body.swc-sb-collapsed.swc-sb-peeking .swc-gside {
    transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) translateX(0) !important;
    pointer-events: auto !important;
  }
  .sb-gamebox { display: none !important; }
  .sb-gtitle { font: 700 14px 'Sen', system-ui, sans-serif; color: #fff; padding: 0 4px 4px; }
  .sb-gbtn { all: unset; box-sizing: border-box; display: block; padding: 10px 14px; border-radius: 12px; background: rgba(205,213,255,.12); border: 1px solid rgba(205,213,255,.25); color: #e6edf9; font: 700 13.5px 'Sen', system-ui, sans-serif; cursor: pointer; transition: background-color .15s, border-color .15s; }
  .sb-gbtn:hover, .sb-gbtn:focus-visible { background: rgba(205,213,255,.22); border-color: rgba(205,213,255,.5); }
  .sb-gbtn:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
  .sb-gbtn.sb-gleave { color: #ffb3b3; border-color: rgba(255,120,120,.35); }
  /* w lobby górny pasek znika – jego przyciski są w panelu; w trakcie gry pasek wraca, a panel się chowa */
  html:not(.swc-ingame) body.has-swc-gside .swc-bar { display: none !important; }
  body.has-swc-gside { transition: none; }
  html:not(.swc-ingame) body.has-swc-gside:not(.swc-sb-collapsed) { padding-left: 36px !important; padding-right: 36px !important; }
  html.swc-ingame body.has-swc-gside { padding-left: 0 !important; }
  html.swc-ingame .swc-gside { transform: translateY(calc(-50% - var(--swc-sb-dock-shift, 0px))) translateX(calc(-100% - 24px)) !important; opacity: 0 !important; pointer-events: none !important; }
  html.swc-noanim .swc-gside, html.swc-noanim body.has-swc-gside { transition: none; }
  html:not(.swc-ingame) body.has-swc-gside .swc-bar { width: auto !important; max-width: 100% !important; margin-left: 0 !important; align-self: stretch !important; }
  html:not(.swc-ingame) body.has-swc-gside .swc-bar .swc-brand, html:not(.swc-ingame) body.has-swc-gside .swc-bar .swc-sep { display: none !important; }
}
html.swc-embed .swc-gside { display: none !important; }
/* telefon: nigdy bocznego menu (także po wylogowaniu) – jest pasek u góry i pasek na dole */
@media (max-width: 900px) {
  .swc-sidebar-wrap, #catNav.swc-sidebar, .swc-gside { display: none !important; }
}
/* feedback: rodzaj zgłoszenia */
.swc-fbm-kind { display: flex; gap: 8px; }
.swc-fbm-kind label { flex: 1; cursor: pointer; }
.swc-fbm-kind input { position: absolute; opacity: 0; pointer-events: none; }
.swc-fbm-kind span { display: block; text-align: center; padding: 9px 6px; border-radius: 12px; background: rgba(205,213,255,.1); border: 1px solid rgba(205,213,255,.25); color: #d3ddef; font: 700 13.5px 'Sen', system-ui, sans-serif; transition: background-color .15s, border-color .15s, color .15s; }
.swc-fbm-kind label:hover span { background: rgba(205,213,255,.18); }
.swc-fbm-kind input:checked + span { background: #ffc94a; border-color: #ffc94a; color: #0b1f45; }
.swc-fbm-kind input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

/* =====================================================================
   KARTA POWITALNA DLA APLIKACJI MOBILNEJ / TELEFONU
   ===================================================================== */
.mobile-welcome-card {
  display: none;
}

@media (max-width: 900px) {
  .kokpit-hero.intro {
    display: none !important;
  }

  .mobile-welcome-card {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(135deg, rgba(16, 38, 80, 0.95) 0%, rgba(10, 24, 52, 0.98) 100%);
    border: 1px solid rgba(205,213,255, 0.32);
    border-radius: 24px;
    padding: 20px 18px 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-bottom: 22px;
  }

  .m-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .m-avatar-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex: none;
  }

  .m-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffc94a;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }

  .m-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #10b981;
    border: 2.5px solid #0b234d;
    border-radius: 50%;
  }

  .m-user-info {
    flex: 1;
    min-width: 0;
  }

  .m-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #cdd5ff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
  }

  .m-user-info h2 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-user-info p {
    font-size: 13px;
    color: #b5c7e8;
    margin: 2px 0 0;
  }

  .m-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(205,213,255, 0.15);
  }

  .m-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 6px;
    background: rgba(205,213,255, 0.08);
    border: 1px solid rgba(205,213,255, 0.18);
    border-radius: 14px;
  }

  .m-stat-ico {
    font-size: 16px;
    margin-bottom: 2px;
  }

  .m-stat-item strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    font-family: 'Sen', system-ui, sans-serif;
  }

  .m-stat-item small {
    font-size: 10.5px;
    color: #cdd5ff;
    margin-top: 1px;
  }

  .m-quick-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-quick-actions::-webkit-scrollbar { display: none; }

  .m-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(205,213,255, 0.12);
    border: 1px solid rgba(205,213,255, 0.25);
    color: #eef3fb;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s;
    flex: none;
  }
  .m-chip:active {
    background: rgba(205,213,255, 0.28);
    transform: scale(0.97);
  }
  .m-chip-onu { border-color: rgba(255,201,74, 0.4); }
  .m-chip-kal { border-color: rgba(56, 189, 248, 0.4); }
  .m-chip-maf { border-color: rgba(168, 85, 247, 0.4); }
  .m-chip-word { border-color: rgba(34, 197, 94, 0.4); }
}

/* Nakładka oczekiwania na logowanie Passkey */
.passkey-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 23, 51, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.passkey-modal-card {
  background: rgba(13, 37, 77, 0.95);
  border: 1px solid rgba(205,213,255, 0.35);
  border-radius: 24px;
  padding: 32px 24px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: passkeyCardIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes passkeyCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Baner / powiadomienie o aktualizacji aplikacji */
.app-update-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #0b234d 0%, #153e7e 100%);
  border: 1.5px solid #ffc94a;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100000;
  color: #fff;
  cursor: pointer;
  animation: slideUpPill .3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slideUpPill {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-update-pill strong { font-size: 13.5px; color: #fff; }
.app-update-pill small { font-size: 11.5px; color: #cdd5ff; }
.app-update-btn {
  background: #ffc94a;
  color: #1c276e;
  font-weight: 800;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

@media (max-width: 900px) {
  body,
  body.has-swc-sidebar,
  body.has-swc-gside {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .main-layout, .wrapper, .app {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ---------- Telefon / aplikacja: jednakowy układ na każdej stronie, bez „skoku” po załadowaniu ---------- */
@media (max-width: 900px) {
  /* odstęp od góry od pierwszej klatki (wcześniej 16 px → 50 px dopiero po rozpoznaniu paska) */
  html:not(.swc-embed) body { padding-top: max(50px, calc(env(safe-area-inset-top, 0px) + 10px)) !important; }
  /* wejście elementów tylko przez przezroczystość – bez przesuwania treści w pionie */
  @keyframes swc-in { from { opacity: 0; } }
  /* awatar w pasku ma stałe miejsce, zanim dojdą dane konta */
  #authHeader { min-width: 44px; min-height: 44px; }
}
@media (max-width: 900px) {
  html, html.swc-dir-up, html.swc-dir-back, html.swc-dir-fwd { --swc-in: 0px; --swc-out: 0px; --swc-in-y: 0px; }
}

/* ---------- Dolny pasek: Liquid Glass – tylko iPhone i iPad (html.is-ios), przybliżenie w CSS ---------- */
@media (max-width: 900px) {
  html.is-ios .swc-mnav {
    left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 5px; gap: 0; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(255,255,255,.08));
    -webkit-backdrop-filter: blur(7px) saturate(220%) brightness(1.1) contrast(1.04); backdrop-filter: blur(7px) saturate(220%) brightness(1.1) contrast(1.04);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 2px 3px 7px -3px rgba(255,255,255,.75), inset -2px -3px 7px -4px rgba(255,255,255,.45), inset 0 0 22px rgba(255,255,255,.06), 0 10px 30px rgba(3,10,30,.38), 0 2px 6px rgba(3,10,30,.25);
    isolation: isolate;
  }
  html.is-ios .swc-mnav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.32), transparent 55%); mix-blend-mode: soft-light; }
  html.is-ios .swc-mnav a { position: relative; z-index: 1; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.35); border-radius: 999px; padding: 8px 2px 7px; transition: color .25s ease; }
  html.is-ios .swc-mnav a svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
  html.is-ios .swc-mnav a.on { background: none; color: #fff; }
  html.is-ios .swc-mnav a.on svg { color: #ffc94a; }
  html.is-ios .swc-mnav .mn-ind { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; border-radius: 999px; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 1px rgba(255,255,255,.18), 0 3px 10px rgba(3,10,30,.3);
    transition: transform .42s cubic-bezier(.3,1.4,.5,1), width .3s ease, opacity .2s ease; will-change: transform; }
  html.swc-noanim .swc-mnav .mn-ind { transition: none; }
  html.is-ios .swc-mnav a:active { transform: scale(.94); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.is-ios .swc-mnav { background: rgba(20,45,100,.92); } }
@media (prefers-reduced-transparency: reduce) { html.is-ios .swc-mnav { background: rgba(20,45,100,.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* aplikacja iOS 26+: dolny pasek rysuje natywne szkło (PitayasGlass) – wersja HTML zostaje tylko jako miejsce i cel kliknięć */
html.native-glass .swc-mnav { opacity: 0 !important; pointer-events: none !important; }

/* aplikacja: jeden płaski pasek bez udawanego szkła (prawdziwy oficjalny Liquid Glass Apple z WWDC rysuje natywna wtyczka iOS 26) */
@media (max-width: 900px) {
  html.swc-capapp:not(.is-ios) .swc-mnav, html.swc-glass-off .swc-mnav {
    background: #0f2a5e; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(205,213,255,.3);
    box-shadow: 0 6px 18px rgba(3,10,30,.35); border-radius: 22px; padding: 4px; mix-blend-mode: normal;
  }
  html.swc-capapp:not(.is-ios) .swc-mnav::before, html.swc-glass-off .swc-mnav::before { display: none; }
  html.swc-capapp:not(.is-ios) .swc-mnav a, html.swc-glass-off .swc-mnav a { text-shadow: none; color: #b9c6e4; border-radius: 18px; }
  html.swc-capapp:not(.is-ios) .swc-mnav a svg, html.swc-glass-off .swc-mnav a svg { filter: none; }
  html.swc-capapp:not(.is-ios) .swc-mnav a.on, html.swc-glass-off .swc-mnav a.on { color: #ffc94a; }
  html.swc-capapp:not(.is-ios) .swc-mnav .mn-ind, html.swc-glass-off .swc-mnav .mn-ind { background: rgba(255,201,74,.16); box-shadow: none; border-radius: 18px; }
}

/* =====================================================================
   CHMUROWY ZMIERZCH – bajkowy styl Szkoły w Chmurze (granat/fiolet + złoto)
   Tylko warstwa wizualna; teksty, układ i logika stron bez zmian.
   ===================================================================== */
:root {
  --swc-navy: #1c276e; --swc-blue: #313f98; --swc-blue-hover: #3d4db0;
  --swc-sky: #cdd5ff; --swc-orange: #ffc94a;
  --swc-surface: rgba(14, 18, 70, .58); --swc-line: rgba(255, 255, 255, .18);
  --swc-text: #f5f6ff; --swc-muted: #cdd5ff; --text-sub: #e3e7ff; --text-dim: #cdd5ff;
  --swc-gold: #ffc94a; --swc-gold-hi: #ffe08a; --swc-gold-edge: #c28a12;
  --swc-radius: 16px;
}
html { background: #0f1340 linear-gradient(180deg, #090c2a 0%, #0f1340 35%, #1c276e 70%, #313f98 100%) fixed; }
body { font-family: 'Nunito', 'Sen', system-ui, sans-serif; color: var(--swc-text); }
body, button, input, select, textarea { font-family: 'Nunito', 'Sen', system-ui, sans-serif; }
h1, h2, h3, #greeting, .cat-head h2, .dl-section-head h2, .brand-row strong {
  font-family: 'Lilita One', 'Sen', system-ui, sans-serif; font-weight: 700; color: #fff;
  text-shadow: 0 2px 10px rgba(8, 10, 45, .6); letter-spacing: 0;
}
p, label, .cat-head p { text-shadow: 0 1px 6px rgba(8, 10, 45, .45); }
small, .muted, .sub { color: var(--swc-muted); }

/* niebo: z-index MUSI być ujemny, inaczej przykrywa napisy */
#swcBg { z-index: -2 !important; }
.swc-sky { position: fixed; inset: 0; z-index: -1 !important; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #090c2a 0%, #0f1340 35%, #1c276e 70%, #313f98 100%); }
html:has(body[data-phase]) .swc-sky, html.swc-embed .swc-sky { display: none; }
.swc-sky i { position: absolute; display: block; }
.sk-stars { inset: 0; opacity: .7;
  background:
    radial-gradient(1.5px 1.5px at 12% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 27% 38%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 9%, #fff, transparent 60%), radial-gradient(1px 1px at 61% 27%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 90% 33%, #fff, transparent 60%),
    radial-gradient(1px 1px at 8% 52%, #fff, transparent 60%), radial-gradient(1px 1px at 70% 48%, #fff, transparent 60%); }
.sk-moon { top: 9%; right: 11%; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d6, #ffe08a 70%); box-shadow: 0 0 40px rgba(255, 224, 138, .35); }
.swc-sky img.sk-cl { position: absolute; display: block; height: auto; opacity: .35; user-select: none; animation-name: swcDrift; animation-timing-function: linear; animation-iteration-count: infinite; }
.swc-sky img.sk-cl.c1 { width: 190px; top: 60%; left: -220px; animation-duration: 120s; animation-delay: -45s; }
.swc-sky img.sk-cl.c2 { width: 130px; top: 76%; left: -160px; animation-duration: 160s; animation-delay: -60s; opacity: .28; }
.swc-sky img.sk-cl.c3 { width: 240px; top: 40%; left: -270px; animation-duration: 200s; animation-delay: -110s; opacity: .22; }
.swc-sky img.sk-cl.c4 { width: 100px; top: 24%; left: -130px; animation-duration: 140s; animation-delay: -30s; opacity: .3; }
@keyframes swcDrift { to { transform: translateX(calc(100vw + 400px)); } }
@media (prefers-reduced-motion: reduce) { .swc-sky img.sk-cl { animation: none; left: 20%; } }

/* treść zawsze nad niebem */
.wrapper, .hub-layout, .main, .dl-section, .cat, .kokpit-hero, .cat-head, .dl-tabs { position: relative; z-index: 1; }

/* panele – aksamit */
.neo-panel {
  background: rgba(14, 18, 70, .58) !important; border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 24px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(5, 7, 30, .4) !important;
}

/* przyciski główne – złote pigułki 3D */
.btn, .dl-btn-cta, .main-tab.active, .segmented input:checked + label, .game-tab.active.filter, .filter.active, .chip.active {
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94a 100%) !important; color: #4a2f00 !important;
  border: 0 !important; border-radius: 999px !important; text-shadow: none !important;
  box-shadow: 0 4px 0 #c28a12 !important; font-weight: 800;
}
.btn:hover:not(:disabled), .dl-btn-cta:hover {
  background: linear-gradient(180deg, #ffe9a8 0%, #ffe08a 100%) !important; color: #4a2f00 !important;
  box-shadow: 0 6px 0 #c28a12, 0 10px 22px rgba(255, 201, 74, .3) !important; transform: translateY(-2px) !important;
}
.btn:active:not(:disabled), .dl-btn-cta:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #c28a12 !important; }
.btn.btn-danger, .btn.danger { background: #ef5b5b !important; color: #fff !important; box-shadow: 0 4px 0 #a82c2c !important; }
.btn.btn-discord, .btn-discord { background: #5865f2 !important; color: #fff !important; box-shadow: 0 4px 0 #3c46b5 !important; }
.btn:disabled { box-shadow: none !important; opacity: .55; }

/* przyciski konturowe i zakładki pobierania */
.btn-outline, .dl-tab-btn {
  background: rgba(14, 18, 70, .65) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 999px !important; box-shadow: none !important;
}
.btn-outline:hover:not(:disabled), .dl-tab-btn:hover { background: rgba(49, 63, 152, .75) !important; border-color: #ffc94a !important; }
.dl-tab-btn.active, .dl-tab-btn[aria-selected="true"] {
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94a 100%) !important; color: #4a2f00 !important; box-shadow: 0 4px 0 #c28a12 !important; border-color: transparent !important;
}
.main-tab.active { color: #4a2f00 !important; }
.sub-tab.active, .game-tab.active { background: rgba(255, 201, 74, .2) !important; border-color: #ffc94a !important; color: #fff !important; }

/* odnośniki pobierania – dotykowe kafelki 3D */
.sys-link {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; color: #fff; text-decoration: none;
  background: rgba(14, 18, 70, .65); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 4px 0 rgba(5, 7, 30, .6);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.sys-link:hover { transform: translateY(-2px); border-color: #ffc94a; background: rgba(49, 63, 152, .75); }
.sys-link:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(5, 7, 30, .6); }
.sys-link small { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: rgba(255, 201, 74, .18); color: #ffe08a; font-weight: 800; font-size: 11.5px; text-shadow: none; }

/* pola i akcenty */
:focus-visible { outline-color: #ffc94a; }
.swc-line { background: #ffc94a; box-shadow: 0 0 10px rgba(255, 201, 74, .7); }
.rm-seat.me .av img { border-color: #ffc94a; box-shadow: 0 0 0 3px rgba(255, 201, 74, .35); }
.rm-rules li::before { color: #ffc94a; }
.rm-rules .rm-note { border-left-color: #ffc94a; }

/* ---------- Boczne menu: płynny ruch (zwijanie, odsłanianie, przesuwanie przy stopce) ---------- */
@media (min-width: 901px) {
  /* przesunięcie pod stopkę idzie przez `translate` (bez opóźnienia, śledzi przewijanie), zwijanie przez `transform` (miękka krzywa) */
  .swc-sidebar-wrap, .swc-gside {
    transform: translateX(0) !important;
    translate: 0 calc(-50% - var(--swc-sb-dock-shift, 0px)) !important;
    opacity: 1;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s ease !important;
    will-change: transform, opacity;
  }
  html.swc-sb-collapsed .swc-sidebar-wrap, html body.swc-sb-collapsed .swc-sidebar-wrap,
  html body.swc-sb-collapsed .swc-gside {
    transform: translateX(calc(-100% - 36px)) scale(.97) !important; opacity: 0; pointer-events: none !important;
  }
  html body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar-wrap, html body.swc-sb-collapsed.swc-sb-peeking .swc-gside {
    transform: translateX(0) scale(1) !important; opacity: 1; pointer-events: auto !important;
  }
  html.swc-ingame .swc-gside { transform: translateX(calc(-100% - 36px)) !important; opacity: 0 !important; }
  /* uchwyt przy krawędzi: wąski, rozszerza się po najechaniu */
  :is(html.swc-sb-collapsed, body.swc-sb-collapsed) :is(.sb-peek-trigger, #sbPeekTrigger) {
    translate: 0 calc(-50% - var(--swc-sb-dock-shift, 0px));
    transform: none !important; width: 14px !important; height: 76px !important; border-radius: 0 14px 14px 0 !important;
    background: rgba(14, 18, 70, .7) !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-left: 0 !important; color: #ffc94a !important;
    box-shadow: 0 6px 20px rgba(5, 7, 30, .4) !important; opacity: .75;
    transition: width .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease, background-color .2s ease !important;
  }
  :is(html.swc-sb-collapsed, body.swc-sb-collapsed) :is(.sb-peek-trigger, #sbPeekTrigger):hover,
  :is(html.swc-sb-collapsed, body.swc-sb-collapsed) :is(.sb-peek-trigger, #sbPeekTrigger):focus-visible {
    width: 28px !important; opacity: 1; background: rgba(49, 63, 152, .85) !important; color: #fff !important;
  }
  body.swc-sb-peeking #sbPeekTrigger { opacity: 0; pointer-events: none; }
  /* pozycje wjeżdżają kolejno, kiedy panel się odsłania */
  html body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar .sb-item { animation: sbItemIn .45s cubic-bezier(.16, 1, .3, 1) both; }
  html body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar .sb-item:nth-child(2) { animation-delay: .04s; }
  html body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar .sb-item:nth-child(3) { animation-delay: .08s; }
  html body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar .sb-item:nth-child(4) { animation-delay: .12s; }
  html body.swc-sb-collapsed.swc-sb-peeking .swc-sidebar .sb-item:nth-child(n+5) { animation-delay: .16s; }
}
@keyframes sbItemIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .swc-sidebar-wrap, .swc-gside { transition: opacity .01s !important; } .swc-sidebar .sb-item { animation: none !important; } }

/* wygląd panelu, paska i okien w stylu zmierzchu */
.swc-sidebar, .swc-bar, .swc-mnav, .swc-gside .swc-sidebar {
  background: rgba(14, 18, 70, .62) !important; border: 1px solid rgba(255, 255, 255, .18) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(5, 7, 30, .4) !important;
}
.swc-sidebar { border-radius: 24px !important; }
.swc-sidebar .sb-item { transition: background-color .2s ease, color .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease; }
.swc-sidebar .sb-item:hover { background: rgba(255, 255, 255, .1); transform: translateX(4px); }
.swc-sidebar .sb-item:active { transform: translateX(2px) scale(.98); }
.swc-sidebar .sb-item.active, .swc-sidebar .sb-item.active:hover {
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94a 100%) !important; color: #4a2f00 !important; box-shadow: 0 3px 0 #c28a12 !important; transform: none;
}
.swc-sidebar .sb-item.active .sb-label { color: #4a2f00 !important; }
.swc-sidebar .sb-brand strong, .swc-sidebar .sb-name { font-family: 'Lilita One', 'Sen', system-ui, sans-serif; font-weight: 700; }
.swc-sidebar .sb-eacts .sb-done { background: linear-gradient(180deg, #ffe08a, #ffc94a); color: #4a2f00; box-shadow: 0 3px 0 #c28a12; }
.swc-mnav a.on { color: #ffc94a; }
.swc-mnav .mn-ind { background: rgba(255, 201, 74, .18); }
.swc-dlg, .swc-dlg-box, .swc-popup, .swc-card-pop, .rm-card, .user-dropdown, .swc-modal {
  background: rgba(14, 18, 70, .86) !important; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 24px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.swc-footer { background: rgba(9, 12, 42, .55); }
.swc-chip, .rm-chip { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
::selection { background: #ffc94a; color: #4a2f00; }
.field, input[type="text"], input[type="search"], input[type="number"], textarea, select {
  background: rgba(9, 12, 42, .55); border-color: rgba(255, 255, 255, .22); color: #fff; border-radius: 14px;
}
.field:focus, input:focus, textarea:focus, select:focus { border-color: #ffc94a !important; box-shadow: 0 0 0 3px rgba(255, 201, 74, .22); outline: none; }
a { color: #ffe08a; }
.swc-sidebar, .swc-gside .swc-sidebar { background: rgba(14, 18, 70, .82) !important; }

/* lobby gier: treść nie wchodzi pod rozwinięty panel boczny (jak na hubie) */
@media (min-width: 901px) and (max-width: 1720px) {
  html:not(.swc-ingame) body.has-swc-gside:not(.swc-sb-collapsed) :is(.wrapper, .swc-main-col, .main-layout, .app) {
    max-width: min(100%, calc(100vw - 580px)) !important; margin-left: auto !important; margin-right: auto !important;
  }
}

/* dolny pasek na telefonie (także iPhone): aksamit jak panele, aktywna pozycja = złota pigułka 3D */
@media (max-width: 900px) {
  html .swc-mnav, html.is-ios .swc-mnav {
    background: rgba(14, 18, 70, .82) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 28px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(5, 7, 30, .45) !important; padding: 6px;
  }
  html.is-ios .swc-mnav::before { display: none; }
  html .swc-mnav a, html.is-ios .swc-mnav a { color: #cdd5ff; text-shadow: none; font-family: 'Nunito', 'Sen', system-ui, sans-serif; font-weight: 800; }
  html.is-ios .swc-mnav a svg { filter: none; }
  html .swc-mnav a.on, html.is-ios .swc-mnav a.on { color: #4a2f00; background: none; }
  html .swc-mnav a.on svg, html.is-ios .swc-mnav a.on svg { color: #4a2f00; }
  html .swc-mnav .mn-ind, html.is-ios .swc-mnav .mn-ind {
    background: linear-gradient(180deg, #ffe08a 0%, #ffc94a 100%); border-radius: 22px; box-shadow: 0 3px 0 #c28a12; top: 5px; bottom: 8px;
  }
  /* gdy wskaźnik jeszcze się nie pojawił, aktywna pozycja ma własne złote tło */
  html .swc-mnav:not(:has(.mn-ind)) a.on { background: linear-gradient(180deg, #ffe08a, #ffc94a); box-shadow: 0 3px 0 #c28a12; border-radius: 22px; }
}

/* lot w dół: niebo ma wysokość całej strony i przewija się razem z nią (natywnie – bez skoków) */
body { position: relative; }
.swc-sky { position: absolute !important; inset: 0; min-height: 100vh;
  background: linear-gradient(180deg, #090c2a 0%, #0f1340 18%, #1c276e 50%, #313f98 80%, #4a5bc0 100%) !important; background-size: 100% 100% !important; background-position: 0 0 !important; }
.swc-sky .sk-stars { opacity: .7; background-size: 640px 520px; background-repeat: repeat; translate: none; will-change: auto; }
.swc-sky .sk-moon { top: 90px; translate: none; will-change: auto; }
.swc-sky img.sk-cl { position: absolute; display: block; height: auto; left: -300px; translate: none; user-select: none;
  animation-name: swcDrift; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
@keyframes swcDrift { to { transform: translateX(calc(100vw + 600px)); } }
@media (prefers-reduced-motion: reduce) { .swc-sky img.sk-cl { animation: none; left: 20%; } }

/* stopka: pełna szerokość ekranu, bez szczelin po bokach i pod spodem, kolor ziemi pasuje do zmierzchu */
.sf-wave path { fill: #101555; }
.sf-body { background: #101555; }
@media (min-width: 901px) {
  html body.has-swc-sidebar:not(.is-logged-out) .swc-footer.swc-foot-rich, html body.has-swc-gside:not(.is-logged-out) .swc-footer.swc-foot-rich,
  html body .swc-footer.swc-foot-rich {
    width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; margin-bottom: 0 !important;
  }
  html body.has-swc-sidebar, html body.has-swc-gside, html body { padding-bottom: 0 !important; }
}
/* panel boczny: wchodzi płynnie zamiast „wyskakiwać”, a na niskich oknach jest zwarty, żeby mieścił się w całości */
@keyframes sbFadeIn { from { opacity: 0; } to { opacity: 1; } }
html:not(.swc-booting) .swc-sidebar-wrap:not(.swc-gside) .swc-sidebar.sb-ready, .swc-gside .swc-sidebar.sb-ready { animation: sbFadeIn .35s ease both; }
@media (min-width: 901px) and (max-height: 860px) {
  .swc-sidebar-wrap .swc-sidebar, .swc-gside .swc-sidebar { padding: 12px 10px 10px !important; }
  .swc-sidebar .sb-brand { padding-bottom: 8px; margin-bottom: 8px; }
  .swc-sidebar .sb-user-box { margin-bottom: 6px; padding-bottom: 6px; }
  .swc-sidebar .sb-avatar { transform: scale(.78); margin: -8px 0; }
  .swc-sidebar .sb-item { min-height: 38px; padding: 7px 12px; }
}

/* ---------- Pora dnia na niebie (Technik: Strona → Wygląd) ---------- */
html { --sky-ground: #101555; }
html[data-sky="dusk"] { --sky-ground: #2b1a62; }
html[data-sky="day"] { --sky-ground: #1d4f9e; }
.sf-wave path { fill: var(--sky-ground); }
.sf-body { background: var(--sky-ground); }
.swc-sky { background: none !important; }
.swc-sky .sk-g { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 2s ease; }
.swc-sky .sk-g.night { background: linear-gradient(180deg, #090c2a 0%, #0f1340 18%, #1c276e 50%, #313f98 80%, #4a5bc0 100%); opacity: 1; }
.swc-sky .sk-g.dusk { background: linear-gradient(180deg, #1c1b5e 0%, #4b2f86 22%, #a24a9a 50%, #ef7f88 78%, #ffb36b 100%); }
.swc-sky .sk-g.day { background: linear-gradient(180deg, #2f7fe0 0%, #5aa6ee 35%, #9ccdf6 70%, #d4ecff 100%); }
html[data-sky="dusk"] .swc-sky .sk-g.dusk, html[data-sky="day"] .swc-sky .sk-g.day { opacity: 1; }
.swc-sky .sk-stars { transition: opacity 2s ease; }
html[data-sky="dusk"] .swc-sky .sk-stars { opacity: .3; }
html[data-sky="day"] .swc-sky .sk-stars { opacity: 0; }
.swc-sky .sk-moon { transition: background .8s ease, box-shadow .8s ease; }
html[data-sky="dusk"] .swc-sky .sk-moon { background: radial-gradient(circle at 35% 35%, #fff3d6, #ffc27a 70%); box-shadow: 0 0 50px rgba(255, 170, 90, .5); }
html[data-sky="day"] .swc-sky .sk-moon { width: 78px; height: 78px; background: radial-gradient(circle at 50% 50%, #fffbe0, #ffe36a 65%); box-shadow: 0 0 70px 20px rgba(255, 226, 106, .55); }
html[data-sky="day"] .swc-sky img.sk-cl { opacity: .6 !important; }
html[data-sky="day"] .swc-sky img.sk-cl, html[data-sky="dusk"] .swc-sky img.sk-cl { filter: brightness(1.15); }
#swcWeatherCanvas { z-index: 0; }

/* Wygląd (Strefa Technika → Strona → Wygląd) */
.look-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.look-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px 10px 12px; border-radius: 20px;
  background: rgba(14, 18, 70, .55); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 4px 0 rgba(5, 7, 30, .55); transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s, background .2s; }
.look-opt:hover { transform: translateY(-2px); border-color: rgba(255, 201, 74, .7); }
.look-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(5, 7, 30, .55); }
.look-opt:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
.look-opt b { font-family: 'Lilita One', 'Sen', system-ui, sans-serif; font-weight: 700; color: #fff; font-size: 16px; }
.look-opt small { color: #cdd5ff; font-size: 12.5px; }
.look-opt.on { background: linear-gradient(180deg, rgba(255, 224, 138, .2), rgba(255, 201, 74, .1)); border-color: #ffc94a; box-shadow: 0 4px 0 #c28a12; }
.look-opt .lk-sw { width: 100%; height: 62px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); display: block; margin-bottom: 6px; }
.lk-night { background: linear-gradient(180deg, #090c2a, #1c276e 60%, #4a5bc0); }
.lk-dusk { background: linear-gradient(180deg, #1c1b5e, #a24a9a 55%, #ffb36b); }
.lk-day { background: linear-gradient(180deg, #2f7fe0, #9ccdf6 70%, #d4ecff); }
.lk-auto { background: linear-gradient(90deg, #090c2a 0%, #a24a9a 34%, #5aa6ee 67%, #1c276e 100%); }
.look-opt .lk-ico { font-style: normal; font-size: 34px; line-height: 62px; }

/* efekty pór roku: nad niebem, pod treścią */
#swcWeatherCanvas { z-index: -1 !important; }
/* Strefa Technika: kategorie w równej siatce zamiast zawijania jednej na dole */
.dev-groups { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .dev-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dev-group small { display: none; } .dev-group { padding: 10px; } }
.dev-group { min-width: 0; }
.dev-group.active { border-color: #ffc94a !important; background: linear-gradient(180deg, rgba(255, 224, 138, .18), rgba(255, 201, 74, .08)) !important; box-shadow: 0 4px 0 #c28a12 !important; }
.dev-group.active .dg-txt b { color: #ffe08a; }

/* tekst i ikony dolnego paska zawsze nad złotym wskaźnikiem */
.swc-mnav a { position: relative; z-index: 1; }

/* ---------- Słońce i księżyc wędrują po łuku (pozycja z header.js: --body-x / --body-y) ---------- */
.swc-sky .sk-moon { left: var(--body-x, 80%); top: var(--body-y, 90px); right: auto; margin-left: -32px; transition: left 1.5s ease, top 1.5s ease, background .8s ease, box-shadow .8s ease, width .8s ease, height .8s ease; }
html[data-sky="day"] .swc-sky .sk-moon { margin-left: -39px; }
/* księżyc z kraterami */
html[data-sky="night"] .swc-sky .sk-moon, html:not([data-sky]) .swc-sky .sk-moon {
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 35%), radial-gradient(circle at 62% 38%, rgba(150,150,180,.35) 0 7px, transparent 8px), radial-gradient(circle at 40% 66%, rgba(150,150,180,.3) 0 9px, transparent 10px), radial-gradient(circle at 70% 70%, rgba(150,150,180,.28) 0 5px, transparent 6px), radial-gradient(circle at 35% 35%, #fffbe6, #e9dfb8 75%);
  box-shadow: 0 0 50px rgba(255, 244, 200, .35);
}
@media (prefers-reduced-motion: reduce) { .swc-sky .sk-moon { transition: none; } }

/* ---------- Czytelność na jasnym niebie (dzień) ---------- */
.swc-sky .sk-g.day { background: linear-gradient(180deg, #1f5fbf 0%, #3d85e0 38%, #6aaaf0 72%, #a9d0f7 100%); }
html[data-sky="day"] :is(h1, h2, h3, #greeting, #mGreetingTitle, .cat-head p, .kokpit-hero p, .lead) { text-shadow: 0 2px 12px rgba(6, 18, 70, .65), 0 0 2px rgba(6, 18, 70, .5); }
html[data-sky="day"] .kokpit-hero p, html[data-sky="day"] .kokpit-hero-main p { color: #fff; }
html[data-sky="dusk"] :is(h1, h2, h3, #greeting, .kokpit-hero p) { text-shadow: 0 2px 12px rgba(20, 10, 60, .6); }
/* kafelki ze statystykami w nagłówku Kokpitu: aksamit zamiast prawie przezroczystego tła */
.kokpit-hero .k-stat-pill { background: rgba(14, 18, 70, .55) !important; border: 1px solid rgba(255, 255, 255, .2) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kokpit-hero .btn-outline { background: rgba(14, 18, 70, .6) !important; }

/* ---------- Panel boczny: jednolite ikony, złoty aktywny element ---------- */
.kokpit-stats-bar { background: none !important; border: 0 !important; box-shadow: none !important; }
.k-ico-svg svg { stroke: #ffc94a !important; }
.swc-sidebar .sb-brand small, .swc-sidebar .sb-sub { color: #cdd5ff; }
.swc-sidebar .sb-sep, .swc-sidebar .sb-brand, .swc-sidebar .sb-user-box { border-color: rgba(255, 255, 255, .14); }
.swc-sidebar .sb-badge { background: rgba(255, 201, 74, .2); color: #ffe08a; border: 1px solid rgba(255, 201, 74, .4); }
.swc-sidebar .sb-badge.sb-badge-role { background: rgba(205, 213, 255, .15); color: #fff; border-color: rgba(205, 213, 255, .35); }
.swc-sidebar .sb-item.active .sb-badge { background: rgba(74, 47, 0, .15); color: #4a2f00; border-color: rgba(74, 47, 0, .3); }
.swc-sidebar .sb-eacts button, .swc-sidebar .sb-ebtn { color: #cdd5ff; }

/* ---------- Niebo płynnie zmienia kolory z godziną (zmienne ustawia header.js) ---------- */
@property --s0 { syntax: '<color>'; inherits: true; initial-value: #090c2a; }
@property --s1 { syntax: '<color>'; inherits: true; initial-value: #0f1340; }
@property --s2 { syntax: '<color>'; inherits: true; initial-value: #1c276e; }
@property --s3 { syntax: '<color>'; inherits: true; initial-value: #313f98; }
@property --s4 { syntax: '<color>'; inherits: true; initial-value: #4a5bc0; }
@property --sg { syntax: '<color>'; inherits: true; initial-value: #101555; }
@property --so { syntax: '<number>'; inherits: true; initial-value: 0.7; }
html { transition: --s0 3s linear, --s1 3s linear, --s2 3s linear, --s3 3s linear, --s4 3s linear, --sg 3s linear, --so 3s linear; }
.swc-sky .sk-g.night, .swc-sky .sk-g.dusk, .swc-sky .sk-g.day { display: none; }
.swc-sky .sk-g.live { opacity: 1; background: linear-gradient(180deg, var(--s0) 0%, var(--s1) 25%, var(--s2) 50%, var(--s3) 75%, var(--s4) 100%); }
html { --sky-ground: var(--sg) !important; }
.swc-sky .sk-stars { opacity: var(--so) !important; }

/* większy odstęp między treścią strony a falą stopki */
.swc-footer::before { content: ""; display: block; height: 64px; }
@media (max-width: 900px) { .swc-footer::before { height: 40px; } }

/* panel boczny: bez rozmycia tła (w przewijanym kontenerze rozmycie wychodziło jasnym prostokątem poza zaokrąglone rogi) – tło jest wystarczająco kryjące */
.swc-sidebar, .swc-gside .swc-sidebar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(14, 18, 70, .9) !important; }

/* tryb „zwykły gracz” dla Technika */
.swc-asuser-pill { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 100050; border: 0; cursor: pointer; padding: 8px 18px; border-radius: 999px; font: 700 13px 'Nunito', 'Sen', system-ui, sans-serif; color: #4a2f00;
  background: linear-gradient(180deg, #ffe08a, #ffc94a); box-shadow: 0 3px 0 #c28a12, 0 8px 22px rgba(5, 7, 30, .4); max-width: calc(100vw - 24px); }
.swc-asuser-pill b { text-decoration: underline; }
@media (max-width: 900px) { .swc-asuser-pill { top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); font-size: 12px; padding: 7px 12px; } }

/* sekcje wyłączone przez Technika (data-sec) i wyłączone niebo */
.swc-sec-off { display: none !important; }
html.swc-sky-off .swc-sky, html.swc-sky-off #swcWeatherCanvas { display: none !important; }
html.swc-sky-off { background: #1c276e linear-gradient(180deg, #0f1340, #313f98) fixed; }

/* iPhone/iPad: dolny pasek w stylu Liquid Glass (gdy brak natywnego szkła iOS 26). Ustawienia → „Szklany pasek na dole” wyłącza (html.swc-glass-off). */
@media (max-width: 900px) {
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav {
    background: rgba(28, 39, 110, .38) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px rgba(5, 8, 40, .35) !important;
  }
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav a { color: rgba(255, 255, 255, .9); }
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav .mn-ind,
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav:not(:has(.mn-ind)) a.on {
    background: rgba(255, 255, 255, .2) !important; border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 8px rgba(5, 8, 40, .25) !important;
  }
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav a.on { color: #ffc94a; }
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav a.on span, html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav a.on svg { color: #ffc94a; }
  html.is-ios:not(.swc-glass-off):not(.native-glass) .swc-mnav a:active { transform: scale(.94); }
}
@media (max-width: 900px) and (prefers-reduced-transparency: reduce) {
  html.is-ios:not(.swc-glass-off) .swc-mnav { background: rgba(20, 30, 90, .96) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}