:root{
      --bg:#0b0b0f; --card:#15151b; --border:#2a2a33; --text:#e8e8ea; --muted:#a5a5b0;
      --danger:#ff3355; --ok:#1ec26f; --info:#4aa3ff;
      --red:#3d0f14; --yellow:#3d3a0f; --green:#0f3d2e;
  --police-green:  #b4f0c2;
  --police-yellow: #fff6b3;
  --police-red:    #f8b0b0;
}
    body.theme-day{ --bg:#f2f5ff; --card:#ffffff; --border:#d9def0; --text:#0b1020; --muted:#5b6280; }
    body{font-family:system-ui,Arial,sans-serif;max-width:1220px;margin:0 auto;padding:16px;background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease}
    .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:12px 0;box-shadow:0 6px 20px rgba(0,0,0,.15)}
    .btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
    .btn[disabled]{opacity:.5;cursor:not-allowed}
    .btn:hover{filter:brightness(1.1)}
    input,select,textarea{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:6px}
    table{width:100%;border-collapse:collapse}
    td,th{border-bottom:1px solid var(--border);padding:6px;text-align:left}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
    .dead{position:relative;border-color:#6b1e27;background:rgba(255,50,80,.06)}
    .tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
    .green{background:var(--green);color:#d9fff2}.yellow{background:var(--yellow);color:#fff6bf}.red{background:var(--red);color:#ffd6da}
    .muted{color:var(--muted)}
    .row{display:flex;gap:12px;flex-wrap:wrap}
    .col{flex:1 1 320px}
    .tabs{display:flex;gap:8px;margin-bottom:8px}
    .tab{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:transparent;cursor:pointer}
    .tab.active{outline:2px solid #5b62ff}
    .tiles{display:flex;flex-direction:column;gap:8px}
    .tile{border:1px solid var(--border);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px;background:transparent}
    .tile.dragging{opacity:.6;border-style:dashed}
    .section-title{display:flex;align-items:center;justify-content:space-between}
    .inline{display:inline-flex;align-items:center;gap:8px}
    .chat{border:1px solid var(--border);border-radius:10px;padding:8px;max-height:220px;overflow:auto;background:rgba(0,0,0,0.05);overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;max-width:100%}
    .chat *{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;max-width:100%}
    .typing-indicator{min-height:22px;margin:4px 2px 2px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;opacity:.95}
    .typing-indicator.hidden{display:none}
    .typing-dots{display:inline-flex;align-items:flex-end;gap:3px;height:12px}
    .typing-dots i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;animation:typingBounce 1s infinite ease-in-out}
    .typing-dots i:nth-child(2){animation-delay:.15s}
    .typing-dots i:nth-child(3){animation-delay:.3s}
    @keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

    /* Overlays */
    .banner{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:1000}
    .banner .box{background:var(--card); border:2px solid var(--border); padding:24px 28px; border-radius:16px; max-width:800px; text-align:center}
    .hidden{display:none}
    .banner.hidden{display:none !important;}
    .list{list-style:none;padding:0;margin:0}
    .list li{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--border);border-radius:10px;margin:6px 0}
    .current{outline:2px solid #5b62ff}
    /* GM toasty i badge */
    #gmPopup.danger{background:var(--danger);color:#fff}

    #gmPopup{position:fixed;left:50%;top:20%;transform:translate(-50%,-50%);background:#2a0f12;border:1px solid #6b1e27;color:#ffd5db;padding:12px 16px;border-radius:12px;z-index:1500;box-shadow:0 8px 30px rgba(0,0,0,.35)}
    #gmInfo{color:var(--info);margin-left:8px}
    .wakeGreen{color:var(--ok);font-size:22px;font-weight:800}
    .awakeBadge{color:var(--ok);font-weight:700}
    .sleepBadge{color:var(--danger);font-size:22px;font-weight:800}
    .godfather-badge{ margin-left:6px; font-size:12px; font-weight:600; }

    .pendingRow{box-shadow:inset 0 0 0 2px rgba(255,200,0,.5)}

    /* Status śmierci/egzekucji ma własny pas u góry kafelka.
       Dzięki temu badge nigdy nie nachodzi na nick ani ujawnioną rolę. */
    .card.killedLastNight,
    .card.execBadge{
      position:relative;
      padding-top:38px;
    }
    .killedLastNight::after,
    .execBadge::after{
      position:absolute;
      top:8px;
      right:10px;
      max-width:calc(100% - 20px);
      box-sizing:border-box;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size:11px;
      line-height:16px;
      padding:2px 7px;
      border-radius:999px;
      z-index:3;
      pointer-events:none;
    }
    .killedLastNight::after{
      content:"✝ ostatnia noc";
      color:#ffb3c0;
      background:#4a1b22;
      border:1px solid #6b1e27;
    }
    /* Egzekucja ma pierwszeństwo, jeżeli kafelek ma obie techniczne klasy. */
    .execBadge::after{
      content:"☠ egzekucja";
      color:#ffd0d6;
      background:#6b1e27;
      border:1px solid #8a2430;
    }
    .playerCardDead{color:#ff9aa8}
    .phaseBar{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
    .phaseBtn{padding:6px 10px;border-radius:12px;border:1px solid var(--border); cursor:pointer}
    .phaseBtn.discussion{background:#0f2a3d22}
    .phaseBtn.nominations{background:#3d2a0f22}
    .phaseBtn.defense{background:#3d0f2a22}
    .phaseBtn.voting{background:#0f3d2a22}
    .phaseBtn.execution{background:#3d0f0f22}
    .panelInfo{font-size:13px;color:var(--muted)}
    
  
      .btn.btn-xs{padding:0 6px; font-size:12px; line-height:18px; border-radius:8px; margin-left:6px}
      .inline-tag{margin:2px 4px 2px 0}
    
    /* Narrative Mode */
    .narrativeLog{border:1px solid var(--border);border-radius:10px;padding:10px;max-height:380px;overflow:auto;background:rgba(0,0,0,.05);font-size:16px;line-height:1.4}
    .narrativeInput{border:1px solid var(--border);border-radius:10px;padding:10px;min-height:80px;background:transparent}
    .toolbar{display:flex;gap:8px;margin-bottom:8px;align-items:center}
    .toolbar .btn{padding:4px 8px}
    
    
    /* --- Improved select/readability (night & day) --- */
    :root{
      --select-bg:#1f1f28; 
      --select-text:#f0f0f2; 
      --select-border:#3a3a44; 
      --select-hover:#2a2a33;
    }
    body.theme-day{
      --select-bg:#ffffff; 
      --select-text:#0b1020; 
      --select-border:#d9def0; 
      --select-hover:#eef2ff;
    }
    select{
      background-color:var(--select-bg) !important;
      color:var(--select-text) !important;
      border-color:var(--select-border) !important;
      box-shadow:0 1px 0 rgba(0,0,0,.05) inset;
    }
    select:focus{outline:2px solid #5b62ff; box-shadow:0 0 0 3px rgba(91,98,255,.25)}
    option{
      background-color:var(--select-bg);
      color:var(--select-text);
    }
    option:hover, option:checked{ background-color:var(--select-hover); }
    option[disabled]{ color: #8d8da0 !important; }
    select:disabled{ opacity:.75; cursor:not-allowed; }
    /* --- Roles Pool aligned columns --- */
    #roles .rolePoolRow{
      display:grid;
      grid-template-columns: 110px 100px 1fr;
      align-items:center;
      gap:1px;
      margin:1px 0;
    }
    @media (max-width: 720px){
      #roles .rolePoolRow{ grid-template-columns: 1fr; align-items:start; }
      #roles .rolePoolRow .col-count{ margin-top:1px; }
      #roles .rolePoolRow .col-limit{ margin-top:1px; }
    }
    #roles .rolePoolRow .col-count input[type="number"]{ width:60px; }
.gambler-overlay{position:fixed !important;inset:0;z-index:2147483647 !important;background:rgba(5,7,12,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px}.gambler-wheel{position:relative;width:min(78vw,680px);height:min(78vw,680px);max-height:72vh}.gambler-slot{position:absolute;left:50%;top:50%;width:120px;min-height:54px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:#171b25;padding:6px;transform:translate(-50%,-50%)}.gambler-slot.blurred .gambler-name{filter:blur(9px);user-select:none;color:transparent;text-shadow:0 0 12px rgba(255,255,255,.8)}.gambler-bottle{position:absolute;left:50%;top:50%;width:56px;height:190px;transform-origin:50% 86%;transform:translate(-50%,-86%) rotate(0deg);display:flex;align-items:center;justify-content:center;transition:transform 4s cubic-bezier(.12,.68,.08,1);will-change:transform;pointer-events:none}.gambler-bottle-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))}.gambler-slot.selected{outline:4px solid #fff;box-shadow:0 0 28px rgba(255,255,255,.8)}


/* Policja: wyróżnienie sprawdzonych graczy (tylko u Policji, w dzień) */
/* Wymuszenie nadpisania tła karty */
.card.player-police-checked { border: 1px solid rgba(0,0,0,0.05); }
.card.player-police-checked:not(.dead).green  { background: var(--green) !important;  color: #0a1b12 !important; }
.card.player-police-checked:not(.dead).yellow { background: var(--yellow) !important; color: #3a2f00 !important; }
.card.player-police-checked:not(.dead).red    { background: var(--red) !important;    color: #2b0004 !important; }
/* Zachowaj czytelność wewnętrznych, drobnych tekstów */
.card.player-police-checked .muted { opacity: 0.9; }


/* Police debug badge */
.card.player-police-checked::after{
  content: "✓";
  position: absolute;
  top: 8px; right: 8px;
  font-weight: 700; font-size: 14px;
}
.card{ position: relative; }


:where(.theme-day) #players .card.player-police-checked:not(.dead).green  { background: var(--green) !important;  color: #0a1b12 !important; }
:where(.theme-day) #players .card.player-police-checked:not(.dead).yellow { background: var(--yellow) !important; color: #3a2f00 !important; }
:where(.theme-day) #players .card.player-police-checked:not(.dead).red    { background: var(--red) !important;    color: #2b0004 !important; }


/* Police full-tile overlay mask */
.card { position: relative; }
.card .police-mask {
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.card .police-content { position: relative; z-index: 1; }


/* Dead should always override police highlight */
.card.dead .police-mask { display: none !important; }


  .player-status-badges{
    margin-top:5px;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    align-items:center;
    min-width:0;
  }
  .player-status-badges .tag{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .priest-muted-badge{ display:inline-block; }
  .plague-badge{ display:inline-block; }


  /* Entry (join) screen logo */
  #entryLogoWrap{display:flex;justify-content:center;align-items:center;margin:40px auto;}
  #entryLogoWrap img{width:min(60vw,520px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.25));border-radius:12px;opacity:.98;}


  #panelRolesChart .legend-group{ margin-bottom:10px; }
  #panelRolesChart .legend-title{ font-weight:700; margin-bottom:6px; display:block; }
  #panelRolesChart .legend-item{ display:flex; align-items:center; gap:8px; margin:2px 0; font-size:14px; }
  #panelRolesChart .swatch{ width:12px; height:12px; border-radius:3px; border:1px solid var(--border); display:inline-block; }
  #panelRolesChart .btn.btn-xs.active{ outline:2px solid #5b62ff; }
  #rolesChartRow{ position:relative; }
  #rolesChartCanvas{ cursor:pointer; }
  #rolesChartTooltip{ z-index: 1000; }


  /* Death Chat (player): larger viewport with safe image sizing */
  #deathChatPanel #deathChatLog.chat {
    max-height: 420px;
    min-height: 280px;
    overflow: auto;
  }
  #deathChatPanel .chat img {
    max-width: 100%;
    max-height: 320px;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
  }


  /* GM: make "Zaznacz do ujawnienia (Zgon)" clearly dangerous */
  #markDeathBtn{
    background:#6b1e27 !important;
    border-color:#8a2430 !important;
    color:#ffd0d6 !important;
    font-weight:700;
  }
  #markDeathBtn:hover{
    background:#8a2430 !important;
    color:#ffe2e7 !important;
    filter:none;
  }


  .neon-target{ font-weight:800; letter-spacing:.3px; }
  .neon-green{ color:#39ff14; text-shadow:0 0 2px #39ff14, 0 0 6px #39ff14, 0 0 12px #39ff14, 0 0 20px rgba(57,255,20,.35); }
  .neon-yellow{ color:#ffd800; text-shadow:0 0 2px #ffd800, 0 0 6px #ffd800, 0 0 12px #ffd800, 0 0 20px rgba(255,216,0,.35); }


/* Role Notebook: colorized selects using CSS variables (override !important global select styles) */
select.rnGuess{
  --rn-bg: var(--select-bg);
  --rn-fg: var(--select-text);
  --rn-border: var(--select-border);
  background-color: var(--rn-bg) !important;
  color: var(--rn-fg) !important;
  border-color: var(--rn-border) !important;
}
.rnColorFilters{ display:flex; gap:4px; flex-wrap:nowrap; align-items:center; }
.rnColorFilter{
  width:28px; height:28px; min-width:28px; padding:0 !important;
  border-radius:999px !important; border:2px solid transparent !important;
  opacity:.38; cursor:pointer; font-size:15px; line-height:1;
  background:transparent !important;
}
.rnColorFilter:hover{ opacity:.75; }
.rnColorFilter.is-active{ opacity:1; border-color:currentColor !important; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.rnColorFilter[data-color="green"]{ color:#39d353 !important; }
.rnColorFilter[data-color="yellow"]{ color:#ffd43b !important; }
.rnColorFilter[data-color="red"]{ color:#ff5a67 !important; }


#roleNotebookPanel{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}


  .howto-alert{
    border:2px solid var(--danger);
    background:rgba(255,51,85,.08);
    color:var(--text);
    padding:12px 14px;
    border-radius:12px;
    margin:10px 0 14px 0;
  }
  .howto-alert h4{ margin:0 0 6px 0; }
  .howto-note{ margin:8px 0; }
  table.howto-table{ width:100%; border-collapse:collapse; }
  table.howto-table th, table.howto-table td{
    border-bottom:1px solid var(--border);
    padding:6px;
    text-align:left;
    vertical-align:top;
  }


  /* GM 'Poradnik GMa' button: night-friendly by default, day overrides */
  button#openHowToGM.btn-gm-guide{
    /* Night (default) */
    background: #1b2232 !important;
    color: #e8e8ea !important;
    border: 1px solid #3a3f56 !important;
    font-weight: 700;
    letter-spacing: .1px;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  body.theme-day button#openHowToGM.btn-gm-guide{
    background: #ffffff !important;
    color: #0b1020 !important;
    border-color: #d9def0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
  }
  /* Night hover */
  body:not(.theme-day) button#openHowToGM.btn-gm-guide:hover{
    background: #21283a !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
    transform: translateY(-1px);
  }
  /* Day hover */
  body.theme-day button#openHowToGM.btn-gm-guide:hover{
    background: #fafbff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.12) !important;
    transform: translateY(-1px);
  }


  :root{
    --city-day-image: url('/graphics/tlo-miasto-dzien.png');
    --city-night-image: url('/graphics/tlo-miasto-noc.png');
  }

  html{min-height:100%;background:#0b0f18;}
  body{
    position:relative;
    background:transparent !important;
    transition:color .25s ease;
  }

  .phase-city-bg{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    background:var(--bg);
  }

  .phase-city-scene{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1400ms ease-in-out;
    will-change:opacity;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }

  .phase-city-day{background-image:var(--city-day-image);}
  .phase-city-night{background-image:var(--city-night-image);}

  body.theme-day .phase-city-day{opacity:1;}
  body:not(.theme-day) .phase-city-night{opacity:1;}

  /* Delikatna mgiełka, żeby karty były czytelne na jasnym/kolorowym tle. */
  .phase-city-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(242,245,255,.50),rgba(242,245,255,.72));
    transition:background 1400ms ease-in-out;
  }
  body:not(.theme-day) .phase-city-bg::after{
    background:linear-gradient(to bottom,rgba(4,10,28,.32),rgba(4,10,28,.58));
  }

  /* Wyłączone stare rysowane miasto/CSS/SVG i dodatkowe nakładki. */
  .phase-city-scene::before,
  .phase-city-scene::after,
  .phase-city-lights,
  .phase-city-road{
    display:none !important;
  }

  body > :not(.phase-city-bg){position:relative;z-index:1;}
  @media (prefers-reduced-motion:reduce){.phase-city-scene,.phase-city-bg::after{transition:none;}}


  /* KPN gracza ma być pływającym modalem, a nie elementem układu strony.
     Globalna reguła body > :not(.phase-city-bg) ustawia position:relative,
     dlatego tutaj jawnie przywracamy pozycjonowanie fixed. */
  #rpsModal:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 5002 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  #rpsModal .box{
    width: min(480px, calc(100vw - 32px));
    box-sizing: border-box;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
  }


  /* Ready-check modals: no gray backdrop strip */
  #readyCheckModal,
  #readyWaitingModal,
  #readyCheckGMModal{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Keep player ready-check panels as floating overlays. */
  #readyCheckModal:not(.hidden),
  #readyWaitingModal:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  /* GM ready panel: floating overlay, visible near the top of the GM view instead of appearing at the bottom of the page. */
  #readyCheckGMModal:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 5001 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 110px 16px 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  #readyCheckModal .box,
  #readyWaitingModal .box,
  #readyCheckGMModal .box{
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }

  #readyCheckGMModal .box{
    pointer-events: auto !important;
    width: min(680px, calc(100vw - 32px));
  }


  /* Kick lobby modal: true floating modal, no gray backdrop strip, not part of page flow. */
  #kickLobbyModal{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #kickLobbyModal:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 6000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  #kickLobbyModal .box{
    pointer-events: auto !important;
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    text-align: left !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }

  #kickLobbyModal #kickLobbyList{
    max-height: min(50vh, 420px) !important;
  }


  /* Poradnik GMa: prawdziwy modal bez bocznych pasów/nakładek */
  #howToGM{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #howToGM:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 6000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  #howToGM .box{
    pointer-events: auto !important;
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    text-align: left !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }


  #howTo,
  #compendium,
  #chocoEffects{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #howTo:not(.hidden),
  #compendium:not(.hidden),
  #chocoEffects:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 6500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  #howTo .box,
  #compendium .box,
  #chocoEffects .box{
    pointer-events: auto !important;
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    text-align: left !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }

  #howToBox,
  #compendiumBox,
  #chocoEffectsBox{
    max-width: 980px !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
  }


  #howTo:not(.hidden),
  #compendium:not(.hidden),
  #chocoEffects:not(.hidden),
  #howToGM:not(.hidden){
    pointer-events: auto !important;
  }

  #howTo .box,
  #compendium .box,
  #chocoEffects .box,
  #howToGM .box{
    pointer-events: auto !important;
  }


  #santaFullscreenBanner{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #071020 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #santaFullscreenBanner.hidden{
    display: none !important;
  }

  #santaFullscreenBanner .santa-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
  }

  #santaFullscreenBanner .santa-message{
    position: relative;
    z-index: 1;
    margin: 0 18px;
    padding: 18px 24px;
    border-radius: 18px;
    background: rgba(7, 12, 28, .68);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff7df;
    text-align: center;
    font-size: clamp(22px, 4vw, 48px);
    font-weight: 900;
    line-height: 1.18;
    text-shadow: 0 4px 18px rgba(0,0,0,.75);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    max-width: min(1100px, calc(100vw - 32px));
  }


  #gifPicker{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #gifPicker:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 7600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  #gifPicker .box{
    pointer-events: auto !important;
    width: min(920px, calc(100vw - 32px));
    max-width: min(920px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: hidden !important;
    text-align: left !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }

  #gifPicker #gifResults{
    max-height: min(60vh, 560px) !important;
    overflow: auto !important;
  }


  #popGame{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #popGame:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 7700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  #popGame.hidden{
    display: none !important;
  }

  #popGame > .box,
  #popGame .box{
    pointer-events: auto !important;
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
  }

  #popGame #popCat{
    display: inline-block !important;
    max-width: 100% !important;
  }


  #bigBanner{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #bigBanner:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 7900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  #bigBanner.hidden{
    display: none !important;
  }

  #bigBanner > .box,
  #bigBanner .box,
  #bannerBox{
    pointer-events: auto !important;
    width: min(860px, calc(100vw - 32px)) !important;
    max-width: min(860px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
  }


  #patchNotesModal{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #patchNotesModal:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 8000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  #patchNotesModal.hidden{
    display: none !important;
  }

  #patchNotesModal > .box,
  #patchNotesModal .box,
  #patchNotesBox{
    pointer-events: auto !important;
    width: min(1040px, calc(100vw - 32px)) !important;
    max-width: min(1040px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    text-align: left !important;
    box-sizing: border-box !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
  }

  #patchNotesWrap{
    max-height: calc(100vh - 170px) !important;
    overflow: auto !important;
  }


  /* Entry screen: align player login controls in one clean row. */
  #playerForm .player-join-row{
    align-items:center !important;
    gap:12px !important;
  }
  #playerForm .player-nick-field,
  #playerForm .player-submit-wrap,
  #playerForm #discordRow,
  #playerForm #discordRow > div,
  #playerForm #discordProfile{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  #playerForm #discordRow{
    margin-top:0 !important;
    flex:0 1 auto;
  }
  #playerForm #discordProfile[style*="display:none"]{
    display:none !important;
  }
  #playerForm #discordAvatar{
    flex:0 0 28px;
    vertical-align:middle;
  }
  #playerForm #discordName,
  #playerForm #useDiscordNick{
    margin-left:0 !important;
  }
  #playerForm #playerNick{
    min-width:180px;
  }
  @media (max-width: 760px){
    #playerForm .player-join-row{
      align-items:stretch !important;
    }
    #playerForm .player-nick-field,
    #playerForm #discordRow,
    #playerForm #discordProfile,
    #playerForm .player-submit-wrap{
      width:100%;
      justify-content:flex-start;
    }
    #playerForm #playerNick{
      flex:1 1 auto;
      min-width:0;
    }
  }


  #playerProfileModal{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #playerProfileModal:not(.hidden){ position: fixed !important; inset: 0 !important; z-index: 8200 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box !important; pointer-events: auto !important; }
  #playerProfileModal .box{ pointer-events: auto !important; width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px) !important; overflow: auto !important; text-align: left !important; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
  .profileHeader{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
  .profileHeader img{width:64px;height:64px;border-radius:50%;border:1px solid var(--border);}
  .profileStatsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0;}
  .profileStat{border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(0,0,0,.04);}
  .profileStat .value{font-size:24px;font-weight:800;line-height:1.1;}
  .profileTwoCols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .profileTableWrap{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:300px;}
  .profileEmpty{padding:12px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);}
  @media (max-width: 760px){ .profileTwoCols{grid-template-columns:1fr;} }


  #chocoOffer{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #chocoOffer:not(.hidden){
    position: fixed !important;
    inset: 0 !important;
    z-index: 8600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }
  #chocoOffer.hidden{
    display: none !important;
  }
  #chocoOffer > .box,
  #chocoOffer .box{
    pointer-events: auto !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
  }
  #chocoOfferText{
    text-align: center !important;
  }
  #chocoOfferText h3{
    margin: 0 0 14px 0 !important;
  }
  #chocoOffer .choco-offer-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  #chocoOffer .choco-offer-actions .btn{
    min-width: 72px;
  }


  .mafia-vote-target{ cursor:pointer; user-select:none; }
  .mafia-vote-target:hover{ outline:2px solid var(--danger); filter:brightness(1.12); }
  .mafia-vote-target.selected{ background:#6b1e27 !important; color:#ffe2e7 !important; border-color:#ff3355 !important; }
  .mafia-vote-panel{ margin-top:10px; border:1px solid var(--border); border-radius:12px; padding:10px; background:rgba(0,0,0,.05); }
  .mafia-vote-panel ul{ margin:6px 0 0 18px; padding:0; }


  /* Mobile usability and safe-area support. Desktop layout is intentionally unchanged. */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{
    min-height:100dvh;
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  .banner{ padding:16px; box-sizing:border-box; }
  .banner .box{
    max-width:min(800px, calc(100vw - 32px));
    max-height:calc(100dvh - 32px);
    overflow:auto;
    overscroll-behavior:contain;
    box-sizing:border-box;
  }
  @media (max-width: 720px){
    body{
      width:100%; max-width:none; box-sizing:border-box; margin:0;
      padding-top:max(8px, env(safe-area-inset-top));
      padding-left:max(8px, env(safe-area-inset-left));
      padding-right:max(8px, env(safe-area-inset-right));
      padding-bottom:max(12px, env(safe-area-inset-bottom));
      overflow-x:hidden;
    }
    .card{ padding:12px; margin:8px 0; border-radius:12px; }
    .col{ flex-basis:100%; min-width:0; }
    .grid{ grid-template-columns:repeat(auto-fit,minmax(min(155px,100%),1fr)); gap:8px; }
    .tabs{ overflow-x:auto; overflow-y:hidden; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
    .tab{ flex:0 0 auto; white-space:nowrap; }
    .row{ gap:8px; }
    .btn, button, input, select, textarea{ max-width:100%; box-sizing:border-box; }
    .btn, button{ min-height:42px; touch-action:manipulation; }
    input, select, textarea{ font-size:16px; min-height:42px; }
    textarea{ min-height:88px; }
    table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .chat, .narrativeLog{ max-height:min(46dvh,420px); }
    .banner{ padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
    .banner .box{ width:100%; max-width:100%; max-height:calc(100dvh - 20px); padding:18px 14px; }
    #gmPopup{ top:max(68px, calc(env(safe-area-inset-top) + 52px)); width:calc(100vw - 24px); box-sizing:border-box; }
    #entryLogoWrap{ margin:18px auto; }
    #entryLogoWrap img{ width:min(82vw,420px); }
    #rpsModal:not(.hidden), #readyCheckModal:not(.hidden), #readyWaitingModal:not(.hidden), #supercivilKpnModal{
      padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    }
    #readyCheckGMModal:not(.hidden){ padding:max(72px, calc(env(safe-area-inset-top) + 64px)) 10px 10px !important; }
    .gambler-overlay{ padding:max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)); overflow:auto; }
    .gambler-wheel{ width:min(92vw,560px); height:min(92vw,560px); }
    .gambler-slot{ width:min(104px,25vw); min-height:48px; font-size:12px; }
    .gambler-bottle{ width:min(48px,11vw); height:min(155px,34vw); }
  }
  @media (max-width: 430px){
    .grid{ grid-template-columns:1fr; }
    .section-title{ align-items:flex-start; gap:8px; flex-wrap:wrap; }
    .inline{ flex-wrap:wrap; }
    .banner .box h1,.banner .box h2{ margin-top:4px; }
  }


/* Typowanie / mowy obronne:
   długie nicki nie mogą wypychać przycisków ani badge'y poza kafelek. */
#nominationActions,
#defenseQueue{
  /* Kompaktowe kafelki na desktopie. auto-fill zachowuje puste tory,
     więc pojedynczy gracz nie rozciąga się na całą szerokość panelu. */
  grid-template-columns:repeat(auto-fill,minmax(220px,280px));
  justify-content:start;
}

#nominationActions .tile,
#defenseQueue .tile{
  min-width:0;
  width:100%;
  box-sizing:border-box;
  gap:8px;
}

/* Typowanie: nick zajmuje wolne miejsce, przycisk zawsze zostaje wewnątrz. */
#nominationActions .tile{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

#nominationActions .tile > strong{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#nominationActions .tile > .btn{
  flex:none;
  white-space:nowrap;
  max-width:100%;
}

/* Mowy obronne: to samo dla badge'a "mówi teraz". */
#defenseQueue .tile{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

#defenseQueue .tile > strong{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#defenseQueue .tile > .tag{
  justify-self:end;
  white-space:nowrap;
  max-width:100%;
}

/* Nagłówki paneli także nie powinny ściskać się na wąskich ekranach. */
#nominationsPanel .section-title,
#defensePanel .section-title{
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px 12px;
}

#nominationsPanel .section-title h3,
#defensePanel .section-title h3{
  margin-right:auto;
}

/* Bardzo wąski ekran: akcja/badge dostaje własny wiersz zamiast nachodzić na nick. */
@media (max-width:420px){
  #nominationActions,
  #defenseQueue{
    grid-template-columns:minmax(0,1fr);
  }

  #nominationActions .tile,
  #defenseQueue .tile{
    grid-template-columns:minmax(0,1fr);
  }

  #nominationActions .tile > .btn,
  #defenseQueue .tile > .tag{
    justify-self:start;
  }
}


  #compendiumBox .compendium-search-row{
    position:sticky;
    top:0;
    z-index:4;
    padding:8px 0 10px;
    background:var(--card);
  }
  #compendiumSearch{
    width:100%;
    box-sizing:border-box;
    min-height:40px;
    font-size:15px;
  }
  #compendiumSearch::-webkit-search-cancel-button{ cursor:pointer; }

.confectioner-bloody{color:#fff!important;background:linear-gradient(150deg,#340709,#a20b18 55%,#470008)!important;border-color:#f04444!important;text-shadow:0 1px 5px #100!important;box-shadow:0 0 8px #8d0c1b88!important}

/* Legal links remain on the entry/player views, never overlay the GM lobby or game. */
body.gm-client-view .mafia-legal-footer { display:none !important; }