/* =========================================================
   MUNIT LIGHT — spokojny, nowoczesny motyw mobilny
   Paleta 3-kolorowa:
   60%  #F5F6F2  ciepłe tło
   30%  #FFFFFF  powierzchnie
   10%  #477C83  akcent morski
   Uzupełnienie: #B9D0C1 szałwia
   ========================================================= */

:root {
  color-scheme: light;

  --bg: #F5F6F2 !important;
  --bg2: #EEF2EE !important;

  --card: #FFFFFF !important;
  --card-strong: #FFFFFF !important;

  --text: #253239 !important;
  --muted: #627177 !important;

  --line: #E2E8E3 !important;

  --accent: #477C83 !important;
  --accent2: #3F747B !important;

  --green: #4F8A6B !important;
  --danger: #B9535A !important;

  --radius: 20px !important;

  --m-bg: #F5F6F2;
  --m-surface: #FFFFFF;
  --m-surface-soft: #F0F4F1;
  --m-text: #253239;
  --m-muted: #627177;
  --m-line: #E2E8E3;
  --m-accent: #477C83;
  --m-accent-dark: #35676D;
  --m-sage: #B9D0C1;
  --m-sage-soft: #E7EFE9;
  --m-blue-soft: #E7F0F1;
  --m-lavender-soft: #EFECF6;
  --m-sand-soft: #F4EEE3;
  --m-danger-soft: #F8E8E8;

  --m-shadow:
    0 1px 2px rgba(37, 50, 57, .03),
    0 10px 28px rgba(37, 50, 57, .07);
}


/* ---------- BAZA ---------- */

html,
body {
  background: var(--m-bg) !important;
  color: var(--m-text) !important;
}

body,
button,
input,
select,
textarea {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app,
.screen,
#app {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(185, 208, 193, .28),
      transparent 32%
    ),
    radial-gradient(
      circle at 0% 22%,
      rgba(231, 240, 241, .72),
      transparent 35%
    ),
    var(--m-bg) !important;

  color: var(--m-text) !important;
}


/* ---------- HEADER ---------- */

.topbar,
.game-topbar {
  min-height:
    calc(72px + env(safe-area-inset-top))
    !important;

  padding:
    calc(11px + env(safe-area-inset-top))
    14px
    11px
    !important;

  background:
    rgba(245, 246, 242, .88)
    !important;

  border-bottom:
    1px solid rgba(99, 113, 119, .10)
    !important;

  box-shadow:
    0 8px 24px rgba(37, 50, 57, .035)
    !important;

  backdrop-filter:
    blur(18px)
    saturate(125%)
    !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%)
    !important;
}

.logo {
  color: var(--m-text) !important;

  background: none !important;

  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
}

.online {
  color: var(--m-muted) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

.dot {
  width: 7px !important;
  height: 7px !important;

  background:
    #5A9A76
    !important;

  box-shadow:
    0 0 0 4px rgba(79, 138, 107, .11)
    !important;
}

.nick {
  min-height: 42px !important;

  padding: 0 12px !important;

  display: flex !important;
  align-items: center !important;

  border:
    1px solid var(--m-line)
    !important;

  border-radius: 14px !important;

  background:
    rgba(255,255,255,.84)
    !important;

  color:
    var(--m-text)
    !important;

  box-shadow:
    0 4px 16px rgba(37,50,57,.035)
    !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}


/* ---------- PRZYCISKI IKONOWE ---------- */

.icon-btn,
.players-top-btn {
  min-width: 42px !important;
  height: 42px !important;

  padding: 0 10px !important;

  border:
    1px solid var(--m-line)
    !important;

  border-radius: 14px !important;

  background:
    rgba(255,255,255,.90)
    !important;

  color:
    var(--m-text)
    !important;

  box-shadow:
    0 5px 16px rgba(37,50,57,.045)
    !important;

  transition:
    background .14s ease,
    transform .14s ease,
    border-color .14s ease
    !important;
}

.icon-btn:active,
.players-top-btn:active {
  transform:
    translateY(1px)
    !important;

  background:
    var(--m-surface-soft)
    !important;
}


/* ---------- GŁÓWNA ZAWARTOŚĆ ---------- */

.scroll {
  padding:
    18px
    14px
    calc(34px + env(safe-area-inset-bottom))
    !important;
}

.section-title {
  margin:
    4px
    4px
    12px
    !important;

  color:
    #64737A
    !important;

  font-size:
    11px
    !important;

  font-weight:
    800
    !important;

  letter-spacing:
    .10em
    !important;
}


/* =========================================================
   KARTY GIER
   ========================================================= */

.game-card {
  position: relative !important;

  margin-bottom:
    13px
    !important;

  padding:
    17px
    !important;

  overflow:
    hidden
    !important;

  border:
    1px solid rgba(98, 113, 119, .10)
    !important;

  border-radius:
    22px
    !important;

  background:
    rgba(255,255,255,.94)
    !important;

  box-shadow:
    var(--m-shadow)
    !important;

  color:
    var(--m-text)
    !important;

  animation:
    munitLightCardIn .24s ease both
    !important;
}

.game-card::before {
  content: "" !important;

  position: absolute !important;

  width: 150px !important;
  height: 150px !important;

  top: -95px !important;
  right: -65px !important;

  border-radius: 999px !important;

  pointer-events: none !important;

  background:
    rgba(185, 208, 193, .14)
    !important;
}


/* Każda gra ma tylko delikatnie inny akcent */

.game-card:nth-of-type(1) .game-icon {
  background: #E7F0F1 !important;
}

.game-card:nth-of-type(2) .game-icon {
  background: #E7EFE9 !important;
}

.countries-card .game-icon {
  background: #E8F1EE !important;
}

.charades-card .game-icon {
  background: #EFECF6 !important;
}


.game-icon {
  width: 50px !important;
  height: 50px !important;

  margin-bottom:
    12px
    !important;

  display:
    grid
    !important;

  place-items:
    center
    !important;

  border:
    1px solid rgba(71,124,131,.09)
    !important;

  border-radius:
    16px
    !important;

  box-shadow:
    none
    !important;

  color:
    var(--m-text)
    !important;

  font-size:
    26px
    !important;
}

.game-info h2 {
  margin:
    0
    !important;

  color:
    var(--m-text)
    !important;

  font-size:
    20px
    !important;

  line-height:
    1.15
    !important;

  font-weight:
    860
    !important;

  letter-spacing:
    -.025em
    !important;
}

.game-info p {
  margin:
    7px 0 9px
    !important;

  color:
    var(--m-muted)
    !important;

  font-size:
    12px
    !important;

  line-height:
    1.52
    !important;
}

.waiting {
  display:
    inline-flex
    !important;

  min-height:
    25px
    !important;

  align-items:
    center
    !important;

  margin-bottom:
    12px
    !important;

  padding:
    0 9px
    !important;

  border:
    0
    !important;

  border-radius:
    999px
    !important;

  background:
    var(--m-sage-soft)
    !important;

  color:
    #356A52
    !important;

  font-size:
    10px
    !important;

  font-weight:
    750
    !important;
}


/* ---------- PRZYCISKI ---------- */

.btn,
button {
  -webkit-tap-highlight-color:
    transparent;
}

.btn {
  min-height:
    46px
    !important;

  border-radius:
    14px
    !important;

  font-size:
    12px
    !important;

  font-weight:
    800
    !important;

  letter-spacing:
    .015em
    !important;

  transition:
    background .14s ease,
    border-color .14s ease,
    transform .14s ease,
    box-shadow .14s ease
    !important;
}

.btn.primary {
  border:
    1px solid var(--m-accent)
    !important;

  background:
    var(--m-accent)
    !important;

  color:
    #FFFFFF
    !important;

  box-shadow:
    0 7px 18px rgba(71,124,131,.16)
    !important;
}

.btn.primary:active {
  transform:
    translateY(1px)
    !important;

  background:
    var(--m-accent-dark)
    !important;

  border-color:
    var(--m-accent-dark)
    !important;
}

.btn.secondary {
  border:
    1px solid #DCE4DF
    !important;

  background:
    #FFFFFF
    !important;

  color:
    #3F6268
    !important;

  box-shadow:
    none
    !important;
}

.btn.secondary:active {
  transform:
    translateY(1px)
    !important;

  background:
    #F0F4F1
    !important;
}

.btn:disabled {
  opacity:
    .46
    !important;

  filter:
    none
    !important;
}

.game-card .quick-btn,
.game-card .private-btn {
  width:
    calc(50% - 5px)
    !important;

  min-height:
    46px
    !important;

  display:
    inline-flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  vertical-align:
    top
    !important;
}

.game-card .quick-btn {
  margin-right:
    6px
    !important;
}


/* =========================================================
   INPUTY / SELECTY
   ========================================================= */

.input,
.country-answer-input,
.contact-textarea,
.charades-select,
.country-select,
input,
select,
textarea {
  border-color:
    #DDE5E0
    !important;

  background:
    #FFFFFF
    !important;

  color:
    var(--m-text)
    !important;

  box-shadow:
    none
    !important;
}

.input,
.country-answer-input,
.charades-select,
.country-select {
  min-height:
    46px
    !important;

  border-radius:
    13px
    !important;
}

textarea,
.contact-textarea {
  border-radius:
    14px
    !important;
}

input::placeholder,
textarea::placeholder {
  color:
    #93A09D
    !important;
}

.input:focus,
.country-answer-input:focus,
.contact-textarea:focus,
.charades-select:focus,
.country-select:focus,
input:focus,
textarea:focus,
select:focus {
  outline:
    none
    !important;

  border-color:
    rgba(71,124,131,.62)
    !important;

  box-shadow:
    0 0 0 3px rgba(71,124,131,.10)
    !important;
}


/* =========================================================
   GRACZE ONLINE
   ========================================================= */

.players-top-panel {
  top:
    calc(78px + env(safe-area-inset-top))
    !important;

  right:
    12px
    !important;

  width:
    min(91vw, 355px)
    !important;

  max-height:
    68dvh
    !important;

  padding:
    14px
    !important;

  border:
    1px solid #E0E7E2
    !important;

  border-radius:
    20px
    !important;

  background:
    rgba(255,255,255,.98)
    !important;

  box-shadow:
    0 18px 55px rgba(37,50,57,.15)
    !important;

  color:
    var(--m-text)
    !important;

  backdrop-filter:
    blur(18px)
    !important;

  -webkit-backdrop-filter:
    blur(18px)
    !important;
}

.players-top-title {
  color:
    var(--m-text)
    !important;

  font-size:
    15px
    !important;

  font-weight:
    850
    !important;
}

.online-player-row,
.country-invite-row,
.charades-invite-row {
  border-bottom:
    1px solid #EDF1EE
    !important;

  color:
    var(--m-text)
    !important;
}

.online-player-name,
.country-invite-name,
.charades-invite-name {
  color:
    var(--m-text)
    !important;
}

.player-status,
.player-empty {
  color:
    var(--m-muted)
    !important;
}

.invite-mini-btn {
  min-width:
    36px
    !important;

  height:
    34px
    !important;

  padding:
    0 9px
    !important;

  border:
    1px solid #DDE5E0
    !important;

  border-radius:
    10px
    !important;

  background:
    #F7F9F7
    !important;

  color:
    #3D656A
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   CZAT
   ========================================================= */

.chat-card {
  margin-top:
    15px
    !important;

  border:
    1px solid rgba(98,113,119,.10)
    !important;

  border-radius:
    21px
    !important;

  background:
    rgba(255,255,255,.94)
    !important;

  box-shadow:
    var(--m-shadow)
    !important;

  color:
    var(--m-text)
    !important;
}

.chat-head,
.chat-header {
  border-bottom:
    1px solid #EDF1EE
    !important;

  color:
    var(--m-text)
    !important;
}

.chat-message,
.message {
  color:
    var(--m-text)
    !important;
}

.chat-meta,
.message-meta,
.chat-time {
  color:
    var(--m-muted)
    !important;
}


/* =========================================================
   MENU / MODALE / OVERLAYE
   ========================================================= */

.munit-menu,
.menu-panel,
.modal,
.modal-card,
.sheet,
.queue-card,
.waiting-card,
.game-over-card {
  border-color:
    #E0E7E2
    !important;

  background:
    #FFFFFF
    !important;

  color:
    var(--m-text)
    !important;

  box-shadow:
    0 24px 70px rgba(37,50,57,.16)
    !important;
}

.munit-menu {
  border-left:
    1px solid #E0E7E2
    !important;
}

.menu-item {
  border:
    1px solid #E3E9E5
    !important;

  border-radius:
    14px
    !important;

  background:
    #F7F9F7
    !important;

  color:
    var(--m-text)
    !important;
}

.overlay,
.modal-overlay,
#queueOverlay {
  background:
    rgba(37,50,57,.28)
    !important;

  backdrop-filter:
    blur(4px)
    !important;

  -webkit-backdrop-filter:
    blur(4px)
    !important;
}


/* =========================================================
   EKRAN GRY
   ========================================================= */

.game-title {
  color:
    var(--m-text)
    !important;

  font-size:
    17px
    !important;

  font-weight:
    850
    !important;
}

.room-code {
  color:
    var(--m-muted)
    !important;
}

.players-bar {
  min-height:
    50px
    !important;

  padding:
    7px 12px
    !important;

  border-bottom:
    1px solid #E5EBE7
    !important;

  background:
    rgba(255,255,255,.80)
    !important;
}

.player-chip {
  border:
    1px solid #E2E8E3
    !important;

  border-radius:
    12px
    !important;

  background:
    #FFFFFF
    !important;

  color:
    var(--m-text)
    !important;
}

.player-chip.me {
  border-color:
    rgba(71,124,131,.35)
    !important;

  background:
    var(--m-blue-soft)
    !important;

  color:
    #315D63
    !important;

  outline:
    none
    !important;
}

.game-status {
  color:
    #53646B
    !important;
}


/* =========================================================
   PAŃSTWA–MIASTA
   ========================================================= */

.countries-game {
  color:
    var(--m-text)
    !important;
}

.countries-box {
  border:
    1px solid rgba(98,113,119,.10)
    !important;

  border-radius:
    20px
    !important;

  background:
    #FFFFFF
    !important;

  box-shadow:
    var(--m-shadow)
    !important;

  color:
    var(--m-text)
    !important;
}

.countries-title,
.country-player-name,
.country-vote-head,
.country-vote-answer,
.country-rank-name,
.country-rank-score {
  color:
    var(--m-text)
    !important;
}

.countries-sub,
.country-setting label,
.country-ready,
.country-vote-name {
  color:
    var(--m-muted)
    !important;
}

.country-ready.yes {
  color:
    #47795E
    !important;
}

.country-host {
  background:
    var(--m-blue-soft)
    !important;

  color:
    #35676D
    !important;
}

.country-letter {
  border:
    0
    !important;

  background:
    var(--m-accent)
    !important;

  color:
    #FFFFFF
    !important;

  box-shadow:
    0 10px 24px rgba(71,124,131,.15)
    !important;
}

.country-code {
  background:
    #F3F6F3
    !important;

  color:
    #506067
    !important;
}

.country-vote-category {
  border:
    1px solid #E1E8E3
    !important;

  background:
    #FFFFFF
    !important;
}

.country-vote-head {
  background:
    #F3F6F3
    !important;
}

.country-vote-row {
  border-top:
    1px solid #EDF1EE
    !important;
}

.country-vote-btn {
  border:
    1px solid #DDE5E0
    !important;

  background:
    #F8FAF8
    !important;

  color:
    #42545B
    !important;
}

.country-vote-btn.selected {
  border-color:
    #88AEB0
    !important;

  outline:
    2px solid rgba(71,124,131,.14)
    !important;

  background:
    var(--m-blue-soft)
    !important;

  color:
    #315D63
    !important;
}

.country-score-table th {
  color:
    var(--m-muted)
    !important;
}

.country-score-table th,
.country-score-table td {
  border-bottom:
    1px solid #EDF1EE
    !important;
}

.country-rank-row {
  background:
    #F6F8F6
    !important;
}


/* =========================================================
   KALAMBURY
   ========================================================= */

.charades-game {
  color:
    var(--m-text)
    !important;
}

.charades-box {
  border:
    1px solid rgba(98,113,119,.10)
    !important;

  border-radius:
    20px
    !important;

  background:
    #FFFFFF
    !important;

  box-shadow:
    var(--m-shadow)
    !important;

  color:
    var(--m-text)
    !important;
}

.charades-title,
.charades-player-name,
.charades-rank-name,
.charades-rank-score,
.charades-result-word {
  color:
    var(--m-text)
    !important;
}

.charades-sub,
.charades-drawer,
.charades-setting label,
.charades-ready {
  color:
    var(--m-muted)
    !important;
}

.charades-ready.yes {
  color:
    #47795E
    !important;
}

.charades-host {
  background:
    var(--m-blue-soft)
    !important;

  color:
    #35676D
    !important;
}

.charades-link {
  background:
    #F3F6F3
    !important;

  color:
    #506067
    !important;
}

.charades-word {
  border:
    1px solid rgba(71,124,131,.18)
    !important;

  background:
    var(--m-blue-soft)
    !important;

  color:
    #315D63
    !important;
}

.charades-choice {
  border:
    1px solid rgba(71,124,131,.20)
    !important;

  background:
    #F2F7F6
    !important;

  color:
    #315D63
    !important;
}

.charades-canvas-wrap {
  border:
    1px solid #D9E1DC
    !important;

  background:
    #FFFFFF
    !important;

  box-shadow:
    0 12px 30px rgba(37,50,57,.10)
    !important;
}

.charades-tools {
  border:
    1px solid #E0E7E2
    !important;

  background:
    #F6F8F6
    !important;
}

.charades-tool-btn {
  border:
    1px solid #DCE4DF
    !important;

  background:
    #FFFFFF
    !important;

  color:
    #42545B
    !important;
}

.charades-tool-btn.active {
  border-color:
    #88AEB0
    !important;

  outline:
    2px solid rgba(71,124,131,.13)
    !important;

  background:
    var(--m-blue-soft)
    !important;

  color:
    #315D63
    !important;
}

.charades-score-chip {
  border:
    1px solid #E0E7E2
    !important;

  background:
    #FFFFFF
    !important;

  color:
    #4A5B62
    !important;
}

.charades-score-chip.drawer {
  border-color:
    #B4CED0
    !important;

  background:
    var(--m-blue-soft)
    !important;
}

.charades-score-chip.guessed {
  border-color:
    #BFD7C6
    !important;

  background:
    var(--m-sage-soft)
    !important;
}

.charades-feed {
  border:
    1px solid #E0E7E2
    !important;

  background:
    #F8FAF8
    !important;
}

.charades-feed-row {
  color:
    var(--m-text)
    !important;
}

.charades-feed-row strong {
  color:
    #35676D
    !important;
}

.charades-feed-row.correct {
  color:
    #47795E
    !important;
}

.charades-rank {
  background:
    #F6F8F6
    !important;
}


/* =========================================================
   KÓŁKO I KRZYŻYK 2.0
   Nie zmieniamy geometrii planszy — tylko powierzchnie.
   ========================================================= */

.ultimate-board {
  border-color:
    #9DB9B7
    !important;

  background:
    #9DB9B7
    !important;

  box-shadow:
    0 12px 30px rgba(37,50,57,.09)
    !important;
}

.small-board {
  background:
    #FFFFFF
    !important;
}

.ultimate-cell {
  border-color:
    #E1E7E3
    !important;

  background:
    #FFFFFF
    !important;

  color:
    #315D63
    !important;
}

.small-board.active-board {
  outline-color:
    #477C83
    !important;

  box-shadow:
    inset 0 0 0 2px rgba(71,124,131,.08)
    !important;
}

.small-board.locked {
  opacity:
    .48
    !important;
}

.small-winner {
  background:
    rgba(231,240,241,.92)
    !important;

  color:
    #315D63
    !important;
}


/* =========================================================
   PIŁKA NA KARTCE
   Boiska / grafiki nie nadpisujemy.
   ========================================================= */

#soccerCanvas {
  border-radius:
    18px
    !important;

  box-shadow:
    0 12px 30px rgba(37,50,57,.09)
    !important;
}

.soccer-game,
.game-board-wrap {
  color:
    var(--m-text)
    !important;
}


/* ---------- DROBIAZGI ---------- */

hr {
  border-color:
    #E5EBE7
    !important;
}

a {
  color:
    #35676D
    !important;
}

::selection {
  background:
    #CFE0DB;
  color:
    #253239;
}

* {
  scrollbar-color:
    #C4D3CD
    transparent;
}


/* ---------- ANIMACJA ---------- */

@keyframes munitLightCardIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---------- MAŁE TELEFONY ---------- */

@media (max-width: 390px) {

  .topbar,
  .game-topbar {
    padding-left:
      11px
      !important;

    padding-right:
      11px
      !important;
  }

  .logo {
    font-size:
      21px
      !important;
  }

  .nick {
    max-width:
      76px
      !important;

    overflow:
      hidden
      !important;

    text-overflow:
      ellipsis
      !important;

    white-space:
      nowrap
      !important;
  }

  .game-card {
    padding:
      15px
      !important;
  }

  .game-info h2 {
    font-size:
      18px
      !important;
  }

  .game-card .quick-btn,
  .game-card .private-btn {
    font-size:
      10.5px
      !important;
  }
}


/* =========================================================
   FIX: EKRAN STARTOWY / NICK
   ========================================================= */

.munit-start-screen {
  background:
    radial-gradient(
      circle at 50% 4%,
      rgba(185, 208, 193, .30),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #F7F8F4 0%,
      #F2F4F0 100%
    ) !important;

  color: var(--m-text) !important;
}

.munit-start-card {
  border:
    1px solid rgba(98,113,119,.10)
    !important;

  border-radius:
    24px
    !important;

  background:
    rgba(255,255,255,.96)
    !important;

  color:
    var(--m-text)
    !important;

  box-shadow:
    0 18px 50px rgba(37,50,57,.10)
    !important;
}

.munit-start-card h1,
.munit-start-card h2,
.munit-start-card h3,
.munit-start-card .title {
  color:
    #253239
    !important;

  opacity:
    1
    !important;

  text-shadow:
    none
    !important;
}

.munit-start-card p,
.munit-start-card .subtitle,
.munit-start-card .hint,
.munit-start-card small {
  color:
    #68777D
    !important;

  opacity:
    1
    !important;
}

.munit-start-card input {
  min-height:
    56px
    !important;

  border:
    1px solid #DCE4DF
    !important;

  border-radius:
    16px
    !important;

  background:
    #F8FAF8
    !important;

  color:
    #253239
    !important;

  caret-color:
    #477C83
    !important;

  box-shadow:
    none
    !important;
}

.munit-start-card input:focus {
  border-color:
    #7DA3A6
    !important;

  background:
    #FFFFFF
    !important;

  box-shadow:
    0 0 0 4px rgba(71,124,131,.10)
    !important;
}

.munit-start-card button {
  min-height:
    54px
    !important;

  border:
    1px solid #477C83
    !important;

  border-radius:
    16px
    !important;

  background:
    #477C83
    !important;

  color:
    #FFFFFF
    !important;

  box-shadow:
    0 8px 22px rgba(71,124,131,.17)
    !important;

  font-weight:
    850
    !important;
}

.munit-start-card button:active {
  transform:
    translateY(1px)
    !important;

  background:
    #35676D
    !important;
}

.munit-start-screen .logo,
.munit-start-screen .brand,
.munit-start-screen > h1 {
  color:
    #253239
    !important;

  background:
    none
    !important;

  -webkit-text-fill-color:
    #253239
    !important;

  text-shadow:
    none
    !important;
}

.munit-start-screen .tagline,
.munit-start-screen > p {
  color:
    #66757B
    !important;
}

@media (max-width: 390px) {
  .munit-start-card {
    border-radius:
      22px
      !important;
  }
}


/* =========================================================
   MUNIT — NOWOCZESNY WYGLĄD CZATU MECZU
   ========================================================= */

#chatShade.show {
  position: fixed;
  inset: 0;
  z-index: 1198;
  background: rgba(12, 18, 28, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#gameChat {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1199;

  display: none;
  flex-direction: column;

  min-height: 240px;
  max-height: min(62vh, 540px);

  overflow: hidden;

  border: 1px solid rgba(125, 141, 163, 0.20);
  border-radius: 26px;

  background:
    linear-gradient(
      180deg,
      rgba(252, 253, 255, 0.98) 0%,
      rgba(246, 249, 251, 0.98) 100%
    );

  box-shadow:
    0 20px 50px rgba(25, 39, 58, 0.18),
    0 2px 10px rgba(25, 39, 58, 0.08);
}

#gameChat.open {
  display: flex !important;
}

#gameChat .chat-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(130, 145, 166, 0.16);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(247, 250, 252, 0.94) 100%
    );
}

#gameChat .chat-drawer-head strong {
  color: #17304d;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#closeChatBtn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;

  border: 1px solid rgba(125, 141, 163, 0.22);
  border-radius: 14px;

  background: #ffffff;
  color: #1d2a3a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(22, 38, 55, 0.10);
}

#closeChatBtn:hover,
#closeChatBtn:active {
  transform: translateY(1px);
}

#roomMessages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  padding: 14px 14px 8px;
  background:
    linear-gradient(
      180deg,
      rgba(250, 252, 254, 0.98) 0%,
      rgba(244, 247, 250, 0.98) 100%
    );
}

#roomMessages .message {
  max-width: 86%;
  margin: 0 0 10px;
  padding: 10px 12px;

  border: 1px solid rgba(126, 141, 163, 0.14);
  border-radius: 16px 16px 16px 6px;

  background: #ffffff;
  color: #24374d;

  box-shadow:
    0 6px 16px rgba(28, 44, 64, 0.06);
}

#roomMessages .message.system {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  border-radius: 14px;
  background: rgba(155, 192, 186, 0.18);
  color: #436660;
}

#roomMessages .message-author {
  display: block;
  margin-bottom: 4px;

  color: #627487;
  font-size: 12px;
  font-weight: 800;
}

#roomMessages .message-text {
  color: #22384b;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

#roomChatForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 12px 14px 14px;
  border-top: 1px solid rgba(130, 145, 166, 0.14);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(248,250,252,0.96) 100%
    );
}

#roomChatInput.input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;

  border: 1px solid rgba(125, 141, 163, 0.22);
  border-radius: 16px;

  background: #ffffff;
  color: #203246;

  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65);
}

#roomChatInput.input::placeholder {
  color: #94a0ad;
}

#roomChatForm .send-btn {
  width: 54px;
  height: 52px;
  min-width: 54px;
  padding: 0;

  border: 0;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #7b7cff 0%,
      #5d63f2 100%
    );

  color: #ffffff;
  font-size: 22px;
  font-weight: 700;

  box-shadow:
    0 12px 28px rgba(93, 99, 242, 0.24);

  cursor: pointer;
}

#roomChatForm .send-btn:hover,
#roomChatForm .send-btn:active {
  transform: translateY(1px);
}

#openChatBtn.chat-unread::after {
  top: 7px;
  right: 7px;
  width: 10px;
  height: 10px;
  border-width: 2px;
  background: #ff6b6b;
  box-shadow:
    0 0 0 4px rgba(255, 107, 107, 0.12);
}

@media (min-width: 768px) {
  #gameChat {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 620px);
  }
}

@media (max-width: 420px) {
  #gameChat {
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 22px;
  }

  #gameChat .chat-drawer-head {
    padding: 14px 14px 12px;
  }

  #roomMessages {
    padding: 12px 12px 6px;
  }

  #roomChatForm {
    gap: 8px;
    padding: 10px 12px 12px;
  }

  #roomChatInput.input {
    min-height: 48px;
    font-size: 14px;
  }

  #roomChatForm .send-btn {
    width: 50px;
    height: 48px;
    min-width: 50px;
  }
}


/* =========================================================
   MUNIT — KÓŁKO I KRZYŻYK 2.0
   FIX: WIDOCZNE 81 MAŁYCH PÓL
   ========================================================= */

#ultimateGame.ultimate-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;

  gap: 7px !important;
  padding: 7px !important;

  background: #8FAFAD !important;
  border: 1px solid #7F9F9D !important;
  border-radius: 18px !important;

  overflow: hidden !important;
}

/*
 * Każda duża ćwiartka ma własną siatkę 3 × 3.
 * Tło small-board jest celowo ciemniejsze od komórek,
 * dzięki czemu 2-pikselowe przerwy stają się liniami siatki.
 */
#ultimateGame .small-board {
  position: relative !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  gap: 2px !important;

  background: #88A9A6 !important;

  border: 1px solid #789B98 !important;
  border-radius: 8px !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  transform: none !important;
}

/*
 * To jest jedno z 81 prawdziwych pól.
 * Nie używamy height:100%, żeby komórki nie nakładały się
 * na siebie w CSS Grid na mobilnych przeglądarkach.
 */
#ultimateGame .ultimate-cell {
  display: grid !important;
  place-items: center !important;

  width: auto !important;
  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #D8E2DE !important;
  border-radius: 2px !important;

  background: #FAFBF8 !important;
  color: #315D63 !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55) !important;

  font-size: clamp(15px, 5.6vw, 28px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  opacity: 1 !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  transform: none !important;
}

#ultimateGame .ultimate-cell:active {
  background: #E9F1EE !important;
  transform: none !important;
}

/* aktywna mała plansza */
#ultimateGame .small-board.active-board {
  opacity: 1 !important;

  outline: 3px solid #477C83 !important;
  outline-offset: -3px !important;

  box-shadow:
    0 0 0 1px rgba(71,124,131,.14) !important;
}

/*
 * Zablokowane plansze nadal mają być CZYTELNE.
 * Wcześniejsze 0.48 powodowało, że siatka niemal znikała.
 */
#ultimateGame .small-board.locked {
  opacity: .72 !important;
  filter: none !important;
}

#ultimateGame .small-board.locked .ultimate-cell {
  background: #F3F6F2 !important;
  border-color: #D4DEDA !important;
}

/* wygrana mała plansza */
#ultimateGame .small-winner {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(232,241,239,.94) !important;
  color: #315D63 !important;

  font-size: clamp(40px, 14vw, 82px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;

  pointer-events: none !important;
}

/* bardzo małe telefony */
@media (max-width: 380px) {
  #ultimateGame.ultimate-board {
    gap: 5px !important;
    padding: 5px !important;
  }

  #ultimateGame .small-board {
    gap: 1.5px !important;
  }

  #ultimateGame .ultimate-cell {
    font-size: clamp(14px, 5vw, 24px) !important;
  }
}