:root {
      --bg: #0f1115;
      --bg-2: #090a0d;
      --panel: #181b21;
      --panel-2: #222630;
      --panel-3: #11141a;
      --accent: #9ba7bb;
      --accent-strong: #d7dce5;
      --gold: #d6b36a;
      --danger: #b45b5b;
      --heal: #68a875;
      --player: #6aa7d6;
      --enemy: #d66a6a;
      --text: #eef1f5;
      --muted: #9aa3af;
      --border: #343a46;
      --shadow: rgba(0, 0, 0, 0.45);
      --radius: 18px;
      --font-heading: Georgia, "Times New Roman", serif;
      --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --drawer-width: 330px;
      --font-scale: 1;
    }

    body.theme-arcane {
      --bg: #101023;
      --bg-2: #070712;
      --panel: #17172d;
      --panel-2: #24234b;
      --panel-3: #101028;
      --accent: #a98cff;
      --accent-strong: #efe9ff;
      --gold: #ffcf6e;
      --danger: #ff6d8a;
      --heal: #74d99f;
      --player: #75c7ff;
      --enemy: #ff7791;
      --text: #f4f0ff;
      --muted: #b9afd7;
      --border: #3d3a68;
    }

    body.theme-parchment {
      --bg: #e9dcc0;
      --bg-2: #d8c59f;
      --panel: #f8eed6;
      --panel-2: #ead8af;
      --panel-3: #f2e4c5;
      --accent: #8e6132;
      --accent-strong: #382818;
      --gold: #a36f21;
      --danger: #9b3f31;
      --heal: #4f7a3f;
      --player: #336f94;
      --enemy: #9b3f31;
      --text: #2a2117;
      --muted: #725f48;
      --border: #c0a87c;
      --shadow: rgba(85, 58, 25, 0.22);
    }

    body.theme-forest {
      --bg: #0d1b14;
      --bg-2: #06110c;
      --panel: #14251c;
      --panel-2: #20382a;
      --panel-3: #0c1911;
      --accent: #9bd36e;
      --accent-strong: #e7ffd8;
      --gold: #d6b36a;
      --danger: #d86b5a;
      --heal: #77d98a;
      --player: #78c9a7;
      --enemy: #d8785a;
      --text: #edf8ee;
      --muted: #a6b9a8;
      --border: #31513c;
      --shadow: rgba(0, 0, 0, 0.42);
    }

    body.theme-inferno {
      --bg: #1d0d09;
      --bg-2: #090302;
      --panel: #24100d;
      --panel-2: #3a1a12;
      --panel-3: #170807;
      --accent: #ff8a3d;
      --accent-strong: #fff0df;
      --gold: #ffc857;
      --danger: #ff4f4f;
      --heal: #7fd47d;
      --player: #ffb86b;
      --enemy: #ff6464;
      --text: #fff3e8;
      --muted: #d1a28a;
      --border: #673324;
      --shadow: rgba(0, 0, 0, 0.5);
    }

    body.theme-frost {
      --bg: #dceaf3;
      --bg-2: #b8d1df;
      --panel: #eff8fd;
      --panel-2: #d2e6f1;
      --panel-3: #e6f2f8;
      --accent: #397fa2;
      --accent-strong: #102b3a;
      --gold: #4d91b3;
      --danger: #a7445b;
      --heal: #3f8a76;
      --player: #247aa5;
      --enemy: #a7445b;
      --text: #10232e;
      --muted: #506b7a;
      --border: #98b9ca;
      --shadow: rgba(39, 79, 98, 0.22);
    }

    body.theme-necro {
      --bg: #101611;
      --bg-2: #050806;
      --panel: #151d16;
      --panel-2: #223025;
      --panel-3: #0b100c;
      --accent: #9ef35f;
      --accent-strong: #eaffdc;
      --gold: #b7e36d;
      --danger: #b85b8c;
      --heal: #65d66f;
      --player: #8ee77c;
      --enemy: #d16aa2;
      --text: #edf8e8;
      --muted: #a8b7a1;
      --border: #34513a;
      --shadow: rgba(0, 0, 0, 0.52);
    }

    body.theme-white {
      --bg: #f7f8fb;
      --bg-2: #eef1f6;
      --panel: #ffffff;
      --panel-2: #f3f5f9;
      --panel-3: #e9edf5;
      --accent: #4f6f9f;
      --accent-strong: #172033;
      --gold: #a56a12;
      --danger: #b43f4c;
      --heal: #2f8754;
      --player: #256fa8;
      --enemy: #b43f4c;
      --text: #1a2233;
      --muted: #647084;
      --border: #d3dae6;
      --shadow: rgba(28, 39, 58, 0.12);
    }

    body.theme-white input,
    body.theme-white select,
    body.theme-white option {
      background: #ffffff;
      color: var(--text);
    }

    body.theme-white .ambient-bg {
      mix-blend-mode: normal;
      opacity: .55;
    }

    body.theme-white .ambient-bg::before {
      opacity: .58;
      background:
        radial-gradient(circle at 15% 10%, rgba(79,111,159,.14), transparent 25%),
        radial-gradient(circle at 85% 8%, rgba(165,106,18,.10), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.65), rgba(238,241,246,.22));
      animation: slow-drift 24s ease-in-out infinite alternate;
    }

    body.theme-white .ambient-bg span {
      border-radius: 50%;
      background: rgba(79,111,159,.18);
      box-shadow: 0 0 14px rgba(79,111,159,.18);
      animation-name: dust-drift;
    }


    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-ui);
      background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 28%),
        radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%),
        linear-gradient(135deg, var(--bg-2), var(--bg));
      color: var(--text);
      transition: background 0.2s ease, color 0.2s ease;
    }

    body.custom-bg {
      background-image:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--bg-2) 33%, transparent),
          color-mix(in srgb, var(--bg) 4%, transparent)
        ),
        var(--custom-bg-image);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
    }

    body.custom-bg .ambient-bg {
      opacity: 0.95;
    }



    /* ===== ŻYWE TŁO ZALEŻNE OD STYLU ===== */
    .ambient-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
      opacity: 0.9;
      mix-blend-mode: screen;
    }

    .layout { position: relative; z-index: 1; }

    .ambient-bg::before,
    .ambient-bg::after {
      content: "";
      position: absolute;
      inset: -12%;
      opacity: 0;
      transition: opacity .35s ease;
      will-change: transform, opacity;
    }

    .ambient-bg span {
      position: absolute;
      display: block;
      left: calc(var(--x) * 1%);
      top: calc(var(--y) * 1%);
      width: var(--s);
      height: var(--s);
      opacity: 0;
      transform: translate3d(0,0,0);
      animation-duration: var(--d);
      animation-delay: var(--delay);
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      will-change: transform, opacity;
    }

    body.theme-classic .ambient-bg::before {
      opacity: .35;
      background:
        radial-gradient(circle at 18% 18%, rgba(214,179,106,.16), transparent 22%),
        radial-gradient(circle at 82% 12%, rgba(155,167,187,.16), transparent 20%),
        radial-gradient(circle at 50% 92%, rgba(0,0,0,.24), transparent 35%);
      animation: slow-drift 22s ease-in-out infinite alternate;
    }

    body.theme-classic .ambient-bg span {
      border-radius: 50%;
      background: rgba(214,179,106,.42);
      box-shadow: 0 0 14px rgba(214,179,106,.42);
      animation-name: ember-rise;
    }

    body.theme-arcane .ambient-bg::before {
      opacity: .45;
      background:
        conic-gradient(from 120deg at 50% 50%, transparent, rgba(169,140,255,.18), transparent 34%, rgba(255,207,110,.12), transparent 62%);
      animation: arcane-rotate 30s linear infinite;
    }

    body.theme-arcane .ambient-bg span {
      border-radius: 999px;
      background: rgba(183,145,255,.7);
      box-shadow: 0 0 18px rgba(183,145,255,.8), 0 0 36px rgba(255,207,110,.22);
      animation-name: magic-float;
    }

    body.theme-parchment .ambient-bg {
      mix-blend-mode: multiply;
      opacity: .72;
    }

    body.theme-parchment .ambient-bg::before {
      opacity: .52;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(116,83,39,.16) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(116,83,39,.12) 0 1px, transparent 2px);
      background-size: 160px 160px, 220px 220px;
      animation: parchment-dust 18s linear infinite;
    }

    body.theme-parchment .ambient-bg span {
      border-radius: 50%;
      background: rgba(110,76,32,.36);
      animation-name: dust-drift;
    }

    body.theme-forest .ambient-bg {
      mix-blend-mode: normal;
      opacity: .92;
    }

    body.theme-forest .ambient-bg::before {
      opacity: .32;
      background:
        linear-gradient(115deg, transparent 0 24%, rgba(155,211,110,.16) 24.5% 25.2%, transparent 25.7% 100%),
        linear-gradient(72deg, transparent 0 64%, rgba(120,201,167,.12) 64.5% 65.2%, transparent 65.7% 100%);
      background-size: 340px 340px, 420px 420px;
      animation: vine-sway 11s ease-in-out infinite alternate;
    }

    body.theme-forest .ambient-bg::after {
      opacity: .24;
      background:
        radial-gradient(ellipse at 15% 8%, rgba(155,211,110,.18), transparent 18%),
        radial-gradient(ellipse at 88% 24%, rgba(119,217,138,.12), transparent 20%);
      animation: slow-drift 18s ease-in-out infinite alternate-reverse;
    }

    body.theme-forest .ambient-bg span {
      width: calc(var(--s) * 1.8);
      height: calc(var(--s) * .9);
      border-radius: 80% 0 80% 0;
      background: rgba(155,211,110,.48);
      box-shadow: 0 0 10px rgba(119,217,138,.25);
      animation-name: leaf-fall;
    }

    body.theme-inferno .ambient-bg::before {
      inset: 45% -10% -20% -10%;
      opacity: .72;
      background:
        radial-gradient(ellipse at 15% 100%, rgba(255,79,79,.55), transparent 38%),
        radial-gradient(ellipse at 45% 100%, rgba(255,138,61,.62), transparent 34%),
        radial-gradient(ellipse at 72% 100%, rgba(255,200,87,.48), transparent 32%);
      filter: blur(14px);
      animation: fire-glow 2.7s ease-in-out infinite alternate;
    }

    body.theme-inferno .ambient-bg::after {
      inset: auto 0 0 0;
      height: 34vh;
      opacity: .7;
      background:
        linear-gradient(180deg, transparent, rgba(255,138,61,.12) 42%, rgba(255,79,79,.26)),
        repeating-radial-gradient(ellipse at 50% 100%, rgba(255,200,87,.25) 0 1px, transparent 2px 18px);
      animation: flame-wave 1.6s ease-in-out infinite alternate;
    }

    body.theme-inferno .ambient-bg span {
      border-radius: 50% 50% 50% 0;
      background: rgba(255,158,61,.78);
      box-shadow: 0 0 18px rgba(255,138,61,.85), 0 0 38px rgba(255,79,79,.35);
      transform: rotate(45deg);
      animation-name: ember-rise;
    }

    body.theme-frost .ambient-bg {
      mix-blend-mode: normal;
      opacity: .78;
    }

    body.theme-frost .ambient-bg::before {
      opacity: .44;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 10%, rgba(255,255,255,.55) 0 1px, transparent 2px),
        radial-gradient(circle at 45% 60%, rgba(57,127,162,.18), transparent 28%);
      background-size: 170px 170px, 250px 250px, auto;
      animation: snow-field 16s linear infinite;
    }

    body.theme-frost .ambient-bg span {
      border-radius: 50%;
      background: rgba(255,255,255,.9);
      box-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 22px rgba(77,145,179,.25);
      animation-name: snow-fall;
    }

    body.theme-necro .ambient-bg::before {
      opacity: .38;
      background:
        radial-gradient(circle at 30% 20%, rgba(158,243,95,.2), transparent 18%),
        radial-gradient(circle at 72% 68%, rgba(184,91,140,.17), transparent 22%),
        linear-gradient(180deg, transparent, rgba(5,8,6,.38));
      animation: slow-drift 20s ease-in-out infinite alternate;
    }

    body.theme-necro .ambient-bg span {
      border-radius: 50%;
      background: rgba(158,243,95,.48);
      box-shadow: 0 0 16px rgba(158,243,95,.72), 0 0 36px rgba(184,91,140,.22);
      animation-name: soul-wisp;
    }

    .ambient-bg span:nth-child(1)  { --x: 6;  --y: 88; --s: 5px;  --d: 9s;  --delay: -1s; }
    .ambient-bg span:nth-child(2)  { --x: 13; --y: 72; --s: 8px;  --d: 13s; --delay: -6s; }
    .ambient-bg span:nth-child(3)  { --x: 21; --y: 96; --s: 4px;  --d: 10s; --delay: -4s; }
    .ambient-bg span:nth-child(4)  { --x: 28; --y: 82; --s: 7px;  --d: 14s; --delay: -8s; }
    .ambient-bg span:nth-child(5)  { --x: 34; --y: 91; --s: 6px;  --d: 11s; --delay: -3s; }
    .ambient-bg span:nth-child(6)  { --x: 42; --y: 76; --s: 9px;  --d: 15s; --delay: -10s; }
    .ambient-bg span:nth-child(7)  { --x: 49; --y: 94; --s: 4px;  --d: 8s;  --delay: -2s; }
    .ambient-bg span:nth-child(8)  { --x: 56; --y: 84; --s: 7px;  --d: 12s; --delay: -5s; }
    .ambient-bg span:nth-child(9)  { --x: 63; --y: 98; --s: 5px;  --d: 9s;  --delay: -7s; }
    .ambient-bg span:nth-child(10) { --x: 71; --y: 79; --s: 10px; --d: 16s; --delay: -11s; }
    .ambient-bg span:nth-child(11) { --x: 79; --y: 90; --s: 6px;  --d: 12s; --delay: -4s; }
    .ambient-bg span:nth-child(12) { --x: 88; --y: 74; --s: 8px;  --d: 13s; --delay: -9s; }
    .ambient-bg span:nth-child(13) { --x: 94; --y: 93; --s: 5px;  --d: 10s; --delay: -6s; }
    .ambient-bg span:nth-child(14) { --x: 9;  --y: 48; --s: 6px;  --d: 18s; --delay: -12s; }
    .ambient-bg span:nth-child(15) { --x: 18; --y: 32; --s: 4px;  --d: 20s; --delay: -7s; }
    .ambient-bg span:nth-child(16) { --x: 31; --y: 18; --s: 7px;  --d: 22s; --delay: -13s; }
    .ambient-bg span:nth-child(17) { --x: 44; --y: 38; --s: 5px;  --d: 19s; --delay: -5s; }
    .ambient-bg span:nth-child(18) { --x: 59; --y: 22; --s: 8px;  --d: 21s; --delay: -10s; }
    .ambient-bg span:nth-child(19) { --x: 73; --y: 44; --s: 4px;  --d: 17s; --delay: -8s; }
    .ambient-bg span:nth-child(20) { --x: 86; --y: 28; --s: 7px;  --d: 23s; --delay: -14s; }
    .ambient-bg span:nth-child(21) { --x: 4;  --y: 12; --s: 5px;  --d: 24s; --delay: -15s; }
    .ambient-bg span:nth-child(22) { --x: 15; --y: 5;  --s: 8px;  --d: 26s; --delay: -9s; }
    .ambient-bg span:nth-child(23) { --x: 27; --y: 9;  --s: 6px;  --d: 25s; --delay: -3s; }
    .ambient-bg span:nth-child(24) { --x: 39; --y: 4;  --s: 4px;  --d: 27s; --delay: -17s; }
    .ambient-bg span:nth-child(25) { --x: 52; --y: 7;  --s: 7px;  --d: 28s; --delay: -12s; }
    .ambient-bg span:nth-child(26) { --x: 67; --y: 3;  --s: 5px;  --d: 24s; --delay: -6s; }
    .ambient-bg span:nth-child(27) { --x: 81; --y: 8;  --s: 9px;  --d: 29s; --delay: -19s; }
    .ambient-bg span:nth-child(28) { --x: 96; --y: 2;  --s: 6px;  --d: 26s; --delay: -11s; }

    @keyframes slow-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.04); } }
    @keyframes arcane-rotate { to { transform: rotate(360deg) scale(1.08); } }
    @keyframes parchment-dust { to { background-position: 160px 260px, -220px 180px; } }
    @keyframes vine-sway { from { transform: translateX(-1.5%) rotate(-.5deg); } to { transform: translateX(1.5%) rotate(.5deg); } }
    @keyframes snow-field { to { background-position: 40px 260px, -70px 340px, 0 0; } }
    @keyframes fire-glow { from { transform: translateY(2%) scaleX(.98); filter: blur(17px); } to { transform: translateY(-2%) scaleX(1.03); filter: blur(10px); } }
    @keyframes flame-wave { from { transform: translateY(2%) skewX(-2deg); } to { transform: translateY(-3%) skewX(2deg); } }
    @keyframes ember-rise { 0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.6) rotate(45deg); } 15% { opacity: .85; } 100% { opacity: 0; transform: translate3d(28px, -110vh, 0) scale(1.35) rotate(405deg); } }
    @keyframes magic-float { 0% { opacity: 0; transform: translate3d(0, 30px, 0) scale(.5); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate3d(-34px, -92vh, 0) scale(1.25); } }
    @keyframes dust-drift { 0% { opacity: 0; transform: translate3d(0, -20px, 0) scale(.7); } 20% { opacity: .55; } 100% { opacity: 0; transform: translate3d(40px, 65vh, 0) scale(1.1); } }
    @keyframes leaf-fall { 0% { opacity: 0; transform: translate3d(-25px, -18vh, 0) rotate(0deg); } 18% { opacity: .72; } 100% { opacity: 0; transform: translate3d(55px, 112vh, 0) rotate(520deg); } }
    @keyframes snow-fall { 0% { opacity: 0; transform: translate3d(-10px, -12vh, 0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate3d(26px, 112vh, 0); } }
    @keyframes soul-wisp { 0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.55); filter: blur(0); } 20% { opacity: .72; } 55% { transform: translate3d(-45px, -42vh, 0) scale(1.15); filter: blur(1px); } 100% { opacity: 0; transform: translate3d(44px, -96vh, 0) scale(.9); filter: blur(3px); } }

    @media (prefers-reduced-motion: reduce) {
      .ambient-bg, .ambient-bg::before, .ambient-bg::after, .ambient-bg span { animation: none !important; }
      .ambient-bg span { display: none; }
    }


    button, input, select { font: inherit; }
    button { cursor: pointer; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    .layout {
      display: grid;
      grid-template-columns: var(--drawer-width) minmax(0, 1fr);
      min-height: 100vh;
    }

    .layout.drawer-collapsed {
      grid-template-columns: 76px minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      background: color-mix(in srgb, var(--panel) 90%, transparent);
      border-right: 1px solid var(--border);
      box-shadow: 16px 0 34px var(--shadow);
      backdrop-filter: blur(12px);
      z-index: 3;
    }

    .sidebar-inner {
      display: flex;
      flex-direction: column;
      gap: 14px;
      height: 100%;
      padding: 18px;
      overflow: auto;
    }

    .layout.drawer-collapsed .sidebar-inner { padding-inline: 12px; }
    .layout.drawer-collapsed .hide-when-collapsed { display: none; }

    .drawer-toggle {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--panel-2);
      color: var(--text);
      box-shadow: 0 10px 24px var(--shadow);
    }

    .side-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .side-title h2 {
      margin: 0;
      font-family: var(--font-heading);
      color: var(--accent-strong);
      font-size: 1.35rem;
    }

    .side-note { color: var(--muted); font-size: 0.88rem; line-height: 1.45; margin: 0; }

    .monster-list {
      display: grid;
      gap: 9px;
      padding-bottom: 18px;
    }

    .monster-btn {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      text-align: left;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
      color: var(--text);
      border-radius: 16px;
      padding: 10px 12px;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }

    .monster-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
    .monster-icon { font-size: 1.25rem; }
    .monster-name { font-weight: 850; }
    .monster-meta { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
    .monster-ac { color: var(--gold); font-size: 0.78rem; font-weight: 900; }


    .player-profile-form {
      display: grid;
      gap: 10px;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background: color-mix(in srgb, var(--panel-3) 82%, transparent);
    }

    .player-profile-form .field { gap: 5px; }
    .player-profile-form input,
    .player-profile-form select { padding: 10px 11px; border-radius: 12px; }
    .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .profile-form-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
    .profile-form-actions .ghost-btn { border-radius: 12px; padding: 10px 11px; }

    .player-profile-card {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
      color: var(--text);
      border-radius: 16px;
      padding: 10px 12px;
    }

    .player-profile-main { min-width: 0; }
    .player-profile-actions { display: flex; gap: 6px; align-items: center; }
    .profile-mini-btn {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border-radius: 11px;
    }

    .layout.drawer-collapsed .player-profile-card {
      display: inline-grid;
      grid-template-columns: 1fr;
      width: 50px;
      height: 50px;
      padding: 0;
      place-items: center;
      border-radius: 16px;
    }
    .layout.drawer-collapsed .player-profile-card > :not(.monster-icon) { display: none; }

    .layout.drawer-collapsed .monster-list { align-items: center; }
    .layout.drawer-collapsed .monster-btn {
      display: inline-grid;
      grid-template-columns: 1fr;
      width: 50px;
      height: 50px;
      padding: 0;
      place-items: center;
      border-radius: 16px;
    }
    .layout.drawer-collapsed .monster-btn > :not(.monster-icon) { display: none; }

    .app {
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: 28px;
    }

    header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 20px;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0;
      font-family: var(--font-heading);
      font-size: clamp(2rem, 4vw, 3.6rem);
      letter-spacing: 0.02em;
      color: var(--accent-strong);
      text-shadow: 0 3px 8px var(--shadow);
    }

    .subtitle { margin-top: 8px; color: var(--muted); line-height: 1.45; }

    .top-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
    }

    .chip, .ghost-btn {
      align-items: center;
      gap: 8px;
      width: auto;
      color: var(--accent-strong);
      text-decoration: none;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 9px 12px;
      background: color-mix(in srgb, var(--panel) 72%, transparent);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 45%, transparent);
    }

    .ghost-btn:hover, .chip:hover { border-color: var(--accent); }

    .round-box {
      background: linear-gradient(180deg, var(--panel), var(--panel-3));
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 16px 22px;
      min-width: 176px;
      text-align: center;
      box-shadow: 0 12px 28px var(--shadow);
    }

    .round-box span { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
    .round-box strong { font-size: 2.15rem; color: var(--gold); }

    .toolbar {
      display: grid;
      grid-template-columns: repeat(6, minmax(60px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .panel {
      background: color-mix(in srgb, var(--panel) 90%, transparent);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 16px;
      box-shadow: 0 12px 28px var(--shadow);
      backdrop-filter: blur(10px);
    }

    .controls {
      display: grid;
      grid-template-columns: 150px 170px minmax(220px, 1.5fr) repeat(3, minmax(110px, 0.7fr)) auto auto;
      gap: 12px;
      margin-bottom: 18px;
    }

    .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
    .field label { color: var(--muted); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; padding-left: 4px; }
    .input-shell { position: relative; }
    .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; }

    input, select, button {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 14px;
      outline: none;
    }

    input, select, option { background: color-mix(in srgb, var(--bg-2) 92%, #000); color: var(--text); }
    .input-shell input, .input-shell select { padding-left: 40px; }
    input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
    input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }

    button {
      background: var(--panel-2);
      color: var(--text);
      font-weight: 850;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
      white-space: nowrap;
    }
    button:hover { transform: translateY(-1px); border-color: var(--accent); background: color-mix(in srgb, var(--panel-2) 82%, var(--accent)); }
    button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

    .button-field { justify-content: end; min-width: 112px; }
    .primary { background: linear-gradient(135deg, var(--accent), var(--gold)); color: color-mix(in srgb, var(--bg-2) 85%, #000); border-color: color-mix(in srgb, var(--gold) 78%, white); }
    .reset { background: linear-gradient(135deg, #6b2d2d, #9a4141); border-color: rgba(255,150,150,.35); color: #ffe0e0; }

    .battle-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .battle-actions-left, .battle-actions-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .amount-box { width: 96px; }
    .battle-actions .ghost-btn { border-radius: 14px; }

    .battlefield { display: flex; flex-direction: column; gap: 12px; }

    .combatant {
      position: relative;
      display: grid;
      grid-template-columns: minmax(270px, 1.25fr) 150px 120px 120px minmax(180px, 0.9fr) 278px;
      align-items: center;
      gap: 14px;
      background: linear-gradient(180deg, var(--panel), var(--panel-3));
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px 18px;
      box-shadow: 0 12px 26px var(--shadow);
      overflow: hidden;
      transition: transform .12s ease, border-color .12s ease, opacity .12s ease;
    }

    .combatant:hover { transform: translateY(-1px); }
    .combatant.active { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent), 0 18px 36px var(--shadow); }
    .combatant.active::before {
      content: "TURA";
      position: absolute;
      top: 12px;
      right: -34px;
      transform: rotate(35deg);
      background: var(--gold);
      color: color-mix(in srgb, var(--bg-2) 90%, black);
      font-weight: 950;
      font-size: .72rem;
      letter-spacing: 1px;
      padding: 5px 42px;
    }
    .combatant.defeated { opacity: .55; filter: grayscale(.55); }
    .combatant.player-card { border-left: 5px solid var(--player); }
    .combatant.enemy-card { border-left: 5px solid var(--enemy); }

    .player-mode .combatant {
      grid-template-columns: minmax(260px, 1fr) auto;
      padding: 18px 20px;
    }
    .player-mode .gm-only { display: none !important; }
    .player-mode .combatant { grid-template-columns: minmax(260px, 1fr) minmax(150px, 230px) auto; }
    .player-mode .bar-wrap { display: flex !important; }
    .player-mode .bar-top { display: none !important; }
    .player-mode .bar { height: 15px; }
    .player-mode .combatant.active::before { content: "TERAZ"; }
    .avatar, .combatant-icon, .type-icon { display: none !important; }

    .name-cell { display: flex; align-items: center; gap: 0; min-width: 0; }

    .identity { min-width: 0; display:flex; flex-direction:column; gap:7px; }
    .identity-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .badge { display:inline-flex; align-items:center; gap:6px; width:fit-content; border:1px solid var(--border); border-radius:999px; padding:4px 9px; font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .badge.player { color: color-mix(in srgb, var(--player) 50%, white); border-color: color-mix(in srgb, var(--player) 45%, transparent); background: color-mix(in srgb, var(--player) 12%, transparent); }
    .badge.enemy { color: color-mix(in srgb, var(--enemy) 50%, white); border-color: color-mix(in srgb, var(--enemy) 45%, transparent); background: color-mix(in srgb, var(--enemy) 12%, transparent); }

    .combatant h2 { margin:0; color: var(--accent-strong); font-family: var(--font-heading); font-size:1.35rem; word-break:break-word; min-width:0; }
    .compact-input { width:100%; min-width:0; padding:10px 12px; border-radius:12px; }
    .type-select { max-width:145px; padding:8px 10px; border-radius:11px; font-size:.88rem; }

    .stat { display:flex; flex-direction:column; gap:5px; min-width:0; }
    .stat-label { color: var(--muted); font-size:.72rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .stat-value { display:inline-flex; align-items:center; gap:7px; font-weight:950; color: var(--accent-strong); }
    .hp-value { font-size:1.55rem; }
    .max-hp { color:var(--muted); font-size:.95rem; font-weight:800; }

    .bar-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }
    .bar-top { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .bar { height:13px; background: color-mix(in srgb, var(--bg-2) 90%, #000); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
    .bar-fill { height:100%; width:100%; background:linear-gradient(90deg, var(--danger), var(--gold), var(--heal)); transition: width .2s ease; }

    .actions { display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; }
    .actions button { padding:10px 8px; border-radius:12px; }
    .damage { border-color: color-mix(in srgb, var(--danger) 70%, transparent); color: color-mix(in srgb, var(--danger) 45%, white); }
    .heal { border-color: color-mix(in srgb, var(--heal) 70%, transparent); color: color-mix(in srgb, var(--heal) 45%, white); }
    .delete { color: color-mix(in srgb, var(--danger) 45%, white); }

    .player-turn-note { justify-self:end; color: var(--muted); font-weight: 850; }
    .player-mode .active .player-turn-note { color: var(--gold); }



    .death-save-panel {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
      border-radius: 16px;
      background: color-mix(in srgb, var(--danger) 10%, var(--panel-3));
    }
    .death-save-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; color:var(--accent-strong); font-weight:950; }
    .death-save-note { color:var(--muted); font-size:.84rem; line-height:1.35; }
    .death-save-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .death-pips { display:inline-flex; gap:6px; align-items:center; }
    .death-pip { width:20px; height:20px; display:inline-grid; place-items:center; border-radius:999px; border:1px solid var(--border); font-size:.78rem; font-weight:950; color:var(--muted); }
    .death-pip.on.success { background: color-mix(in srgb, var(--heal) 52%, transparent); color:var(--accent-strong); border-color: var(--heal); }
    .death-pip.on.failure { background: color-mix(in srgb, var(--danger) 58%, transparent); color:var(--accent-strong); border-color: var(--danger); }
    .death-save-actions { display:grid; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap:8px; }
    .death-save-actions button { padding:9px 8px; border-radius:12px; }
    .death-status { font-weight:950; color:var(--gold); }

    .hint { margin-top: 18px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
    kbd { background: color-mix(in srgb, var(--bg-2) 90%, #000); border:1px solid var(--border); border-bottom-width:3px; border-radius:7px; padding:2px 7px; color:var(--accent-strong); }

    .empty { border:1px dashed var(--border); border-radius:22px; padding:42px 24px; text-align:center; color:var(--muted); background: color-mix(in srgb, var(--panel) 48%, transparent); }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      max-width: min(360px, calc(100vw - 44px));
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--panel);
      color: var(--text);
      padding: 12px 14px;
      box-shadow: 0 16px 36px var(--shadow);
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: .18s ease;
      z-index: 10;
    }
    .toast.show { transform: translateY(0); opacity: 1; }

    @media (max-width: 1200px) {
      .layout, .layout.drawer-collapsed { grid-template-columns: 1fr; }
      .sidebar { position: relative; height: auto; }
      .sidebar-inner { max-height: 390px; }
      .layout.drawer-collapsed .sidebar { height: 74px; }
      .layout.drawer-collapsed .sidebar-inner { overflow: hidden; }
      .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .field.name-field { grid-column: span 2; }
      .combatant { grid-template-columns: minmax(220px, 1fr) 140px 110px; }
      .combatant .stat:nth-of-type(4), .bar-wrap, .actions { grid-column: span 3; }
    }

    @media (max-width: 760px) {
      .app { padding: 16px; }
      header { grid-template-columns: 1fr; align-items: stretch; }
      .controls { grid-template-columns: 1fr; }
      .field.name-field { grid-column: auto; }
      .combatant, .player-mode .combatant { grid-template-columns: 1fr; }
      .combatant .stat:nth-of-type(4), .bar-wrap, .actions { grid-column: auto; }
      .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .death-save-actions { grid-template-columns: 1fr; }
      .battle-actions { align-items: stretch; }
      .battle-actions-left, .battle-actions-right { width:100%; }
      .battle-actions .ghost-btn, .amount-box { flex: 1 1 120px; }
    }

    /* ===== NOWY LAYOUT / POLISHED UI ===== */
    

    .app { padding: 30px clamp(18px, 3vw, 42px); }

    .hero-panel {
      position: relative;
      overflow: hidden;
      align-items: center;
      margin-bottom: 18px;
      padding: clamp(18px, 2.6vw, 28px);
      border: 1px solid var(--line-soft);
      border-radius: 30px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--panel) 90%, transparent), color-mix(in srgb, var(--panel-3) 76%, transparent)),
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 30%),
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 32%);
      box-shadow: 0 22px 60px color-mix(in srgb, var(--shadow) 82%, transparent);
      backdrop-filter: blur(16px);
    }
    .hero-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
      transform: translateX(-80%);
      animation: hero-shine 9s ease-in-out infinite;
    }
    @keyframes hero-shine { 0%, 60% { transform: translateX(-88%); } 100% { transform: translateX(88%); } }
    .eyebrow {
      margin: 0 0 6px;
      color: var(--gold);
      font-weight: 950;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .72rem;
    }
    .hero-panel h1 { line-height: .98; }
    .hero-panel .subtitle { max-width: 760px; font-size: 1rem; }
    .top-actions .chip, .top-actions .ghost-btn { min-height: 42px; }
    .round-box {
      min-width: 150px;
      border-radius: 26px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--gold) 22%, var(--panel)), var(--panel-3));
      border-color: color-mix(in srgb, var(--gold) 42%, var(--border));
    }

    .sidebar {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-3) 88%, transparent));
    }
    .side-title h2 { font-size: 1.5rem; }
    .player-profile-form {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-radius: 22px;
      background: color-mix(in srgb, var(--panel-3) 62%, transparent);
      border: 1px solid var(--line-soft);
    }
    .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .profile-form-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
    .monster-list { gap: 10px; }
    .monster-btn {
      border-radius: 18px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 84%, transparent), color-mix(in srgb, var(--panel-3) 92%, transparent));
    }
    .monster-btn::before {
      content: "+";
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--heal) 32%, transparent);
      color: var(--accent-strong);
      font-weight: 950;
      border: 1px solid color-mix(in srgb, var(--heal) 44%, transparent);
    }
    .layout.drawer-collapsed .monster-btn::before { display:none; }

  
    .toolbar .panel, .controls.panel {
      border-radius: 22px;
      background: var(--glass);
    }
    .controls {
      grid-template-columns: 150px minmax(230px, 1.4fr) repeat(3, minmax(116px, .75fr)) auto auto;
      align-items: end;
    }
    .battle-actions {
      position: sticky;
      top: 12px;
      z-index: 2;
      padding: 10px;
      border-radius: 22px;
      border: 1px solid var(--line-soft);
      background: color-mix(in srgb, var(--panel) 74%, transparent);
      backdrop-filter: blur(14px);
      box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 60%, transparent);
    }

    .battlefield { gap: 14px; }
    .combatant {
      isolation: isolate;
      grid-template-columns: 68px minmax(240px, 1.35fr) 170px 120px 120px minmax(210px, .95fr) 280px;
      padding: 14px;
      border-radius: 26px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-3) 94%, transparent));
      box-shadow: 0 18px 42px color-mix(in srgb, var(--shadow) 72%, transparent);
    }
    .combatant::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 34%);
      opacity: .75;
    }
    .combatant.active { transform: translateY(-2px); }
    .combatant.active::before { display: none; }
    .combatant.player-card { border-left: 0; box-shadow: inset 5px 0 0 var(--player), 0 18px 42px color-mix(in srgb, var(--shadow) 72%, transparent); }
    .combatant.enemy-card { border-left: 0; box-shadow: inset 5px 0 0 var(--enemy), 0 18px 42px color-mix(in srgb, var(--shadow) 72%, transparent); }
    .combatant.defeated { opacity: .78; filter: saturate(.75); }
    .card-section {
      padding: 10px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--panel-3) 42%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    }
    .turn-rank {
      display: grid;
      place-items: center;
      height: 100%;
      min-height: 72px;
      border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      background: color-mix(in srgb, var(--bg-2) 72%, transparent);
      color: var(--muted);
      font-weight: 950;
      letter-spacing: .08em;
    }
    .turn-rank.now {
      color: color-mix(in srgb, var(--bg-2) 85%, black);
      background: linear-gradient(135deg, var(--gold), var(--accent));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
    }
    .identity-section { background: transparent; border-color: transparent; padding-left: 4px; }
    .identity-top { gap: 8px; }
    .badge { padding: 5px 10px; }
    .combatant h2 { margin-top: 2px; font-size: clamp(1.25rem, 1.8vw, 1.7rem); }
    .name-edit { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 850; }
    .mini-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 850;
    }
    .mini-line span {
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      border-radius: 999px;
      padding: 4px 8px;
      background: color-mix(in srgb, var(--panel) 46%, transparent);
    }
    .hp-edit-grid { display: grid; grid-template-columns: minmax(54px, 1fr) auto minmax(54px, 1fr); align-items: center; gap: 7px; }
    .hp-edit-grid span { color: var(--muted); font-weight: 950; }
    .stat-value, .hp-value { font-size: 1.2rem; }
    .bar { height: 16px; box-shadow: inset 0 2px 8px rgba(0,0,0,.25); }
    .bar-fill { background: linear-gradient(90deg, var(--danger), var(--gold) 48%, var(--heal)); }
    .health-caption { color: var(--muted); font-size: .78rem; font-weight: 800; }
    .actions { grid-template-columns: repeat(5, minmax(38px, 1fr)); align-self: stretch; }
    .actions button { min-height: 44px; }
    .player-turn-note {
      grid-column: 1 / -1;
      justify-self: stretch;
      text-align: right;
      padding: 0 4px;
      font-size: .86rem;
    }
    .death-save-panel {
      margin-top: 0;
      border-radius: 20px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--danger) 12%, var(--panel-3)), color-mix(in srgb, var(--panel) 88%, transparent));
    }
    .death-save-row strong { color: var(--accent-strong); }
    .death-pip { width: 24px; height: 24px; }

    .player-mode .hero-panel { grid-template-columns: 1fr auto; }
    .player-mode .combatant {
      grid-template-columns: 64px minmax(230px, 1.2fr) minmax(220px, .9fr);
    }
    .player-mode .identity-section { padding: 10px; }
    .player-mode .bar-wrap { display: flex !important; }
    .player-mode .mini-line { display: none; }
    .player-mode .player-turn-note { grid-column: 1 / -1; }

    @media (max-width: 1280px) {
      .combatant { grid-template-columns: 62px minmax(240px, 1fr) repeat(3, minmax(100px, .45fr)); }
      .bar-wrap, .actions { grid-column: 2 / -1; }
    }
    @media (max-width: 920px) {
      .layout, .layout.drawer-collapsed { grid-template-columns: 1fr; }
      .sidebar { position: relative; height: auto; }
      .sidebar-inner { max-height: none; }
      .field.name-field { grid-column: 1 / -1; }
      .battle-actions { position: relative; top: auto; }
      .combatant, .player-mode .combatant { grid-template-columns: 56px 1fr; }
      .combatant > .card-section, .bar-wrap, .actions, .death-save-panel, .player-turn-note { grid-column: 1 / -1; }
      .turn-rank { min-height: 56px; }
    }
    @media (max-width: 620px) {
      .app { padding: 14px; }
      .hero-panel, header.hero-panel { grid-template-columns: 1fr; }
      .controls, .profile-grid, .profile-form-actions { grid-template-columns: 1fr; }
      .combatant, .player-mode .combatant { grid-template-columns: 1fr; }
      .turn-rank { min-height: 44px; }
      .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .battle-actions-left, .battle-actions-right { width: 100%; }
      .battle-actions .ghost-btn, .battle-actions .primary { flex: 1 1 150px; }
    }

  



    /* ===== USER REQUEST PATCH: temp HP, no number spinners, larger creature names ===== */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;
    }
    .hp-edit-grid {
      grid-template-columns: minmax(46px, 1fr) auto minmax(46px, 1fr) auto minmax(46px, 1fr) !important;
    }
    .temp-hp-value,
    .temp-hp-chip {
      color: color-mix(in srgb, var(--player) 58%, white);
      font-weight: 950;
    }
    .temp-hp-chip {
      border-color: color-mix(in srgb, var(--player) 55%, transparent) !important;
      background: color-mix(in srgb, var(--player) 14%, transparent) !important;
    }
    .combatant h2 {
      font-size: 2rem !important;
      line-height: 1.02 !important;
    }
    .name-edit {
      font-size: 1.96rem !important;
      line-height: 1.05 !important;
      padding-block: 8px !important;
    }
    .monster-name {
      font-size: 2em;
      line-height: 1.05;
    }
    @media (max-width: 620px) {
      .hp-edit-grid { grid-template-columns: 1fr auto 1fr !important; }
      .hp-edit-grid .temp-separator { display: none; }
      .hp-edit-grid .temp-hp-input { grid-column: 1 / -1; }
    }


    /* ===== KOMPAKTOWY LAYOUT 100% — battle table ===== */
    :root { --drawer-width: 360px; }
    .layout {
      width: 100%;
      grid-template-columns: minmax(300px, var(--drawer-width)) minmax(0, 1fr);
    }
    .app {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 18px 20px 24px;
    }
    header.hero-panel {
      grid-template-columns: minmax(360px, 1fr) auto;
      padding: 18px;
      margin-bottom: 12px;
      border-radius: 22px;
    }
    h1 { font-size: clamp(1.8rem, 2.3vw, 3rem); }
    .subtitle { margin-top: 4px; }
    .top-actions { margin-top: 10px; }
    .round-box { min-width: 132px; padding: 12px 16px; border-radius: 18px; }
    .round-box strong { font-size: 1.85rem; }

   
    .toolbar .panel { padding: 12px; }
    .controls {
      grid-template-columns: 130px minmax(260px, 1.4fr) 110px 110px 100px auto auto;
      gap: 10px;
      padding: 12px;
      margin-bottom: 10px;
    }
    .field label { font-size: .68rem; }
    input, select, button { padding: 9px 10px; border-radius: 11px; }
    .input-shell input, .input-shell select { padding-left: 34px; }
    .icon { left: 10px; }

    .battle-actions {
      top: 8px;
      padding: 8px;
      margin-bottom: 8px;
      border-radius: 16px;
    }
    .battle-actions-left, .battle-actions-right { gap: 8px; }
    .battle-actions .ghost-btn, .battle-actions .primary { padding: 8px 11px; border-radius: 11px; }

    .battlefield {
      width: 100%;
      gap: 7px;
    }
    .battle-header {
      display: grid;
      grid-template-columns: 54px minmax(240px, 1.55fr) 170px 96px 92px minmax(180px, .9fr) minmax(260px, .95fr);
      gap: 8px;
      align-items: center;
      padding: 0 10px 4px;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .combatant {
      width: 100%;
      display: grid;
      grid-template-columns: 54px minmax(240px, 1.55fr) 170px 96px 92px minmax(180px, .9fr) minmax(260px, .95fr);
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 15px;
      min-height: 64px;
      box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 58%, transparent);
    }
    .combatant:hover { transform: none; }
    .combatant.active { transform: none; }
    .combatant::after { opacity: .32; }
    .combatant.player-card { box-shadow: inset 4px 0 0 var(--player), 0 8px 20px color-mix(in srgb, var(--shadow) 58%, transparent); }
    .combatant.enemy-card { box-shadow: inset 4px 0 0 var(--enemy), 0 8px 20px color-mix(in srgb, var(--shadow) 58%, transparent); }
    .combatant.active.player-card, .combatant.active.enemy-card {
      border-color: var(--gold);
      box-shadow: inset 4px 0 0 var(--gold), 0 0 0 2px color-mix(in srgb, var(--gold) 18%, transparent), 0 10px 24px color-mix(in srgb, var(--shadow) 62%, transparent);
    }
    .card-section {
      padding: 6px;
      border-radius: 11px;
      min-width: 0;
    }
    .turn-rank {
      min-height: 46px;
      height: 46px;
      border-radius: 12px;
      font-size: .72rem;
    }
    .identity-section { padding: 4px 6px; }
    .identity { gap: 3px; }
    .identity-top { gap: 5px; }
    .badge { padding: 3px 7px; font-size: .66rem; }
    .type-select { max-width: 116px; padding: 5px 7px; font-size: .75rem; }
    .combatant h2 { margin: 0; font-size: 1rem; line-height: 1.05; }
    .name-edit { font-size: .98rem; padding: 6px 8px; }
    .mini-line { gap: 5px; font-size: .68rem; }
    .mini-line span { padding: 2px 6px; }
    .stat { gap: 3px; }
    .stat-label { font-size: .62rem; }
    .compact-input { padding: 6px 7px; border-radius: 9px; min-height: 32px; }
    .hp-edit-grid { grid-template-columns: minmax(52px, 1fr) auto minmax(52px, 1fr); gap: 4px; }
    .stat-value, .hp-value { font-size: 1rem; }
    .bar-wrap { gap: 4px; }
    .bar-top { font-size: .62rem; }
    .bar { height: 9px; }
    .health-caption { font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .actions {
      display: flex;
      flex-wrap: nowrap;
      gap: 5px;
      align-items: center;
      justify-content: flex-end;
      align-self: center;
    }
    .actions button {
      width: auto;
      min-width: 42px;
      min-height: 34px;
      padding: 7px 8px;
      border-radius: 9px;
      font-size: .82rem;
    }
    .player-turn-note {
      display: none;
    }

    .death-save-panel {
      grid-column: 2 / -1;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) auto;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 13px;
      margin-top: 0;
    }
    .death-save-head { margin: 0; }
    .death-save-row { gap: 8px; justify-content: start; }
    .death-save-actions {
      display: flex;
      flex-wrap: nowrap;
      gap: 5px;
      justify-content: flex-end;
    }
    .death-save-actions button { width: auto; padding: 6px 8px; border-radius: 9px; font-size: .74rem; }
    .death-save-note { grid-column: 1 / -1; font-size: .68rem; margin-top: -2px; }
    .death-pip { width: 19px; height: 19px; font-size: .72rem; }

    .player-mode .battle-header {
      grid-template-columns: 54px minmax(260px, 1.4fr) minmax(240px, .8fr);
    }
    .player-mode .combatant {
      grid-template-columns: 54px minmax(260px, 1.4fr) minmax(240px, .8fr);
      min-height: 60px;
    }
    .player-mode .identity-section { padding: 4px 6px; }
    .player-mode .bar-wrap { display: flex !important; }
    .player-mode .death-save-panel { grid-column: 2 / -1; grid-template-columns: 1fr auto; }

    @media (max-width: 1400px) {
      .battle-header, .combatant {
        grid-template-columns: 48px minmax(220px, 1.4fr) 150px 86px 82px minmax(150px, .75fr) minmax(230px, .9fr);
      }
      .actions button { min-width: 38px; padding-inline: 7px; }
    }
    @media (max-width: 1120px) {
      .layout, .layout.drawer-collapsed { grid-template-columns: 1fr; }
      .sidebar { position: relative; height: auto; }
      .sidebar-inner { max-height: 360px; }
      .battle-header { display: none; }
      .combatant, .player-mode .combatant {
        grid-template-columns: 48px minmax(220px, 1fr) minmax(190px, .75fr);
      }
      .hp-editor, .combatant .stat:nth-of-type(3), .combatant .stat:nth-of-type(4), .actions, .death-save-panel { grid-column: 2 / -1; }
      .actions { justify-content: flex-start; }
      .death-save-panel { grid-template-columns: 1fr; }
      .death-save-actions { justify-content: flex-start; flex-wrap: wrap; }
    }
    @media (max-width: 720px) {
      .app { padding: 12px; }
      header.hero-panel, .controls { grid-template-columns: 1fr; }
      .combatant, .player-mode .combatant { grid-template-columns: 1fr; }
      .turn-rank, .hp-editor, .combatant .stat:nth-of-type(3), .combatant .stat:nth-of-type(4), .bar-wrap, .actions, .death-save-panel { grid-column: 1 / -1; }
      .actions { overflow-x: auto; padding-bottom: 2px; }
    }


    /* ===== USER REQUEST PATCH 2: temp HP bar, fixed HP buttons, no hero panel ===== */
    .app-header {
      display: grid;
      grid-template-columns: minmax(360px, 1fr) auto;
      align-items: end;
      gap: 20px;
      margin-bottom: 12px;
      padding: 0 0 8px;
      background: none !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    .app-header .eyebrow { margin-top: 0; }
    .app-header .subtitle { max-width: 760px; font-size: 1rem; }
    .app-header .top-actions { margin-top: 10px; }
    .temp-bar {
      height: 7px !important;
      background: color-mix(in srgb, var(--bg-2) 85%, #000);
      border-color: color-mix(in srgb, #55b7ff 45%, var(--border));
    }
    .temp-bar-fill {
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #247cff, #73d7ff);
      box-shadow: 0 0 10px color-mix(in srgb, #55b7ff 75%, transparent);
      transition: width .2s ease;
    }
    .actions {
      flex-wrap: wrap !important;
      justify-content: flex-end;
    }
    .actions button {
      min-width: 36px !important;
      padding-inline: 7px !important;
    }

    /* W trybie gracza widać tylko niebieski pasek Temp HP — bez dokładnych liczb i etykiet. */
    .player-mode .temp-bar-top,
    .player-mode .temp-hp-chip,
    .player-mode .temp-hp-value {
      display: none !important;
    }
    .player-mode .temp-bar {
      display: block !important;
    }
    @media (max-width: 620px) {
      .app-header { grid-template-columns: 1fr; }
      .actions { justify-content: flex-start; }
    }


    /* ===== USER REQUEST PATCH 5: statusy / conditions ===== */
    .status-panel {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
      margin-top: 3px;
    }
    .status-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
      border-radius: 999px;
      padding: 3px 7px;
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      color: var(--accent-strong);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .03em;
      line-height: 1.1;
    }
    .status-chip.danger-status {
      border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
      background: color-mix(in srgb, var(--danger) 13%, transparent);
    }
    .status-remove {
      display: inline-grid;
      place-items: center;
      width: 17px !important;
      min-width: 17px !important;
      height: 17px;
      min-height: 17px !important;
      padding: 0 !important;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
      background: color-mix(in srgb, var(--danger) 14%, transparent);
      color: color-mix(in srgb, var(--danger) 42%, white);
      font-size: .72rem;
      line-height: 1;
    }
    .status-select {
      width: auto;
      max-width: 190px;
      min-height: 28px;
      padding: 4px 7px;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 850;
    }
    .status-empty {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 850;
    }
    .player-mode .status-panel {
      margin-top: 5px;
    }
    .player-mode .status-chip {
      padding: 4px 8px;
      font-size: .78rem;
    }
    .player-mode .status-remove,
    .player-mode .status-select,
    .player-mode .status-empty {
      display: none !important;
    }


    /* ===== USER REQUEST PATCH 7: animacje HP / heal / damage ===== */
    .combatant.hp-heal-flash {
      animation: hp-heal-pulse .72s ease-out;
    }
    .combatant.hp-damage-flash {
      animation: hp-damage-shake .62s ease-out;
    }
    .combatant.hp-shield-flash {
      animation: hp-shield-pulse .72s ease-out;
    }
    .player-mode .combatant.hp-heal-flash,
    .player-mode .combatant.hp-damage-flash,
    .player-mode .combatant.hp-shield-flash {
      overflow: visible;
    }
    .hp-float {
      position: absolute;
      right: clamp(72px, 19vw, 330px);
      top: 50%;
      z-index: 5;
      transform: translateY(-50%);
      pointer-events: none;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 72%, transparent);
      font-weight: 950;
      font-size: 1rem;
      letter-spacing: .03em;
      animation: hp-float-up .95s ease-out forwards;
      backdrop-filter: blur(10px);
    }
    .hp-float.heal {
      color: color-mix(in srgb, var(--heal) 56%, white);
      border-color: color-mix(in srgb, var(--heal) 68%, transparent);
      text-shadow: 0 0 10px color-mix(in srgb, var(--heal) 50%, transparent);
    }
    .hp-float.damage {
      color: color-mix(in srgb, var(--danger) 56%, white);
      border-color: color-mix(in srgb, var(--danger) 68%, transparent);
      text-shadow: 0 0 10px color-mix(in srgb, var(--danger) 50%, transparent);
    }
    .hp-float.shield {
      color: #8fe6ff;
      border-color: color-mix(in srgb, #55b7ff 72%, transparent);
      text-shadow: 0 0 12px color-mix(in srgb, #55b7ff 70%, transparent);
    }
    @keyframes hp-heal-pulse {
      0% { box-shadow: inset 4px 0 0 var(--heal), 0 0 0 0 color-mix(in srgb, var(--heal) 0%, transparent), 0 8px 20px color-mix(in srgb, var(--shadow) 58%, transparent); }
      32% { box-shadow: inset 4px 0 0 var(--heal), 0 0 0 5px color-mix(in srgb, var(--heal) 34%, transparent), 0 0 34px color-mix(in srgb, var(--heal) 28%, transparent); transform: scale(1.012); }
      100% { box-shadow: inherit; transform: scale(1); }
    }
    @keyframes hp-damage-shake {
      0% { transform: translateX(0); }
      14% { transform: translateX(-5px); box-shadow: inset 4px 0 0 var(--danger), 0 0 0 5px color-mix(in srgb, var(--danger) 28%, transparent), 0 0 30px color-mix(in srgb, var(--danger) 24%, transparent); }
      28% { transform: translateX(5px); }
      42% { transform: translateX(-3px); }
      56% { transform: translateX(3px); }
      100% { transform: translateX(0); box-shadow: inherit; }
    }
    @keyframes hp-shield-pulse {
      0% { box-shadow: inherit; }
      35% { box-shadow: inset 4px 0 0 #55b7ff, 0 0 0 5px color-mix(in srgb, #55b7ff 30%, transparent), 0 0 34px color-mix(in srgb, #55b7ff 34%, transparent); transform: scale(1.01); }
      100% { box-shadow: inherit; transform: scale(1); }
    }
    @keyframes hp-float-up {
      0% { opacity: 0; transform: translateY(-40%) scale(.88); }
      18% { opacity: 1; transform: translateY(-58%) scale(1.08); }
      100% { opacity: 0; transform: translateY(-135%) scale(.96); }
    }
    @media (max-width: 760px) {
      .hp-float { right: 16px; top: 22px; }
    }
    .combatant.hp-animating {
      will-change: transform, box-shadow;
    }
    .combatant .hp-float.old {
      animation: none !important;
      opacity: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .combatant.hp-heal-flash,
      .combatant.hp-damage-flash,
      .combatant.hp-shield-flash,
      .hp-float {
        animation: none !important;
      }
    }


    /* ===== TIMER WALKI ===== */
    .table-mode-toggle {
      display: none;
    }
    .table-mode-toggle.active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, var(--panel)), color-mix(in srgb, var(--gold) 75%, var(--panel)));
      color: color-mix(in srgb, var(--bg-2) 85%, black);
      border-color: color-mix(in srgb, var(--gold) 68%, white);
    }

    .player-mode .table-mode-toggle {
      display: inline-flex;
    }

    .table-screen-mode .layout,
    .table-screen-mode .layout.drawer-collapsed {
      grid-template-columns: 1fr !important;
    }
    .table-screen-mode .sidebar,
    .table-screen-mode .toolbar,
    .table-screen-mode .controls,
    .table-screen-mode .battle-actions,
    .table-screen-mode .hint {
      display: none !important;
    }
    .table-screen-mode header.hero-panel {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 11;
      display: block !important;
      width: auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }
    .table-screen-mode header.hero-panel > div:first-child,
    .table-screen-mode header.hero-panel .round-box {
      display: none !important;
    }
    .table-screen-mode header.hero-panel .top-actions {
      margin: 0;
    }
    .table-screen-mode header.hero-panel .top-actions .chip,
    .table-screen-mode header.hero-panel .top-actions .ghost-btn:not(.table-mode-toggle) {
      display: none !important;
    }
    .table-screen-mode .app {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 12px;
    }
    .table-screen-mode #battlefield {
      margin: 0;
    }
    .table-split-view {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      min-height: calc(100vh - 24px);
      width: 100%;
    }
    .table-half {
      min-height: 0;
      overflow: auto;
      padding: 6px;
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      background: color-mix(in srgb, var(--panel) 54%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .table-half.mirrored {
      transform: rotate(180deg);
    }
    .table-pane {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-height: 100%;
    }
    .table-screen-mode .table-half .battle-header,
    .table-screen-mode .table-half .combatant {
      width: 100%;
    }
    @media (max-width: 760px) {
      .table-mode-toggle {
        top: auto;
        bottom: 22px;
        left: 16px;
        max-width: calc(100vw - 140px);
      }
      .table-split-view {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
        min-height: calc(100vh - 18px);
      }
      .table-half {
        padding: 4px;
      }
    }

    .battle-timer {
 
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 72%, transparent);
      backdrop-filter: blur(14px);
    }
    .timer-display {
      min-width: 112px;
      padding: 7px 9px;
      border-radius: 11px;
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      background: color-mix(in srgb, var(--bg-2) 70%, transparent);
      color: var(--gold);
      font-variant-numeric: tabular-nums;
      font-weight: 950;
      font-size: 1.05rem;
      text-align: center;
      letter-spacing: .04em;
    }
    .timer-controls {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .timer-controls button {
      width: auto;
      min-width: 34px;
      min-height: 34px;
      padding: 6px 8px;
      border-radius: 10px;
      font-size: .82rem;
    }
    .timer-start.running {
      color: color-mix(in srgb, var(--heal) 45%, white);
      border-color: color-mix(in srgb, var(--heal) 70%, transparent);
    }
    @media (max-width: 760px) {
      .battle-timer {
        top: auto;
        right: 10px;
        bottom: 10px;
        grid-template-columns: 1fr;
      }
      .timer-display { min-width: 104px; }
      .toast { bottom: 92px; }
    }




    /* ===== GRID BEZ SCROLLOWANIA + ZAPISYWANE EKRANY WALKI ===== */
    .encounter-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--border));
      border-radius: 14px;
      background: color-mix(in srgb, var(--panel) 76%, transparent);
    }
    .encounter-toolbar select {
      width: clamp(180px, 18vw, 290px);
      min-width: 0;
      padding: 7px 9px;
      border-radius: 10px;
      font-weight: 850;
    }
    .encounter-toolbar button {
      width: auto;
      padding: 7px 9px;
      border-radius: 10px;
    }
    .encounter-delete { min-width: 38px; }

    @media (min-width: 1121px) {
      body:not(.table-screen-mode) {
        height: 100vh;
        overflow: hidden;
      }
      body:not(.table-screen-mode) .layout,
      body:not(.table-screen-mode) .layout.drawer-collapsed {
        height: 100vh;
        min-height: 0;
      }
      body:not(.table-screen-mode) .sidebar {
        height: 100vh;
      }
      body:not(.table-screen-mode) .app {
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
        padding: 10px 12px 10px;
      }
      body:not(.table-screen-mode) .app-header {
        flex: 0 0 auto;
        margin-bottom: 5px;
        padding-bottom: 2px;
      }
      body:not(.table-screen-mode) .app-header .eyebrow { margin-bottom: 2px; }
      body:not(.table-screen-mode) .app-header h1 { font-size: clamp(1.55rem, 1.9vw, 2.35rem); }
      body:not(.table-screen-mode) .app-header .subtitle { margin-top: 2px; font-size: .82rem; line-height: 1.25; }
      body:not(.table-screen-mode) .top-actions { margin-top: 5px; gap: 6px; }
      body:not(.table-screen-mode) .top-actions .chip,
      body:not(.table-screen-mode) .top-actions > .ghost-btn { padding: 7px 9px; }
      body:not(.table-screen-mode) .toolbar {
        flex: 0 0 auto;
        gap: 6px;
        margin-bottom: 5px;
      }
      body:not(.table-screen-mode) .toolbar .panel { padding: 7px 8px; }
      body:not(.table-screen-mode) .round-box { padding: 7px 10px; min-width: 96px; }
      body:not(.table-screen-mode) .round-box span { margin-bottom: 0; font-size: .66rem; }
      body:not(.table-screen-mode) .round-box strong { font-size: 1.45rem; }
      body:not(.table-screen-mode) .battle-timer { padding: 6px 7px; }
      body:not(.table-screen-mode) .timer-display { min-width: 90px; padding: 5px 7px; font-size: .9rem; }
      body:not(.table-screen-mode) .controls {
        flex: 0 0 auto;
        gap: 6px;
        margin-bottom: 5px;
        padding: 7px 8px;
      }
      body:not(.table-screen-mode) .controls input,
      body:not(.table-screen-mode) .controls select,
      body:not(.table-screen-mode) .controls button { padding-top: 7px; padding-bottom: 7px; }
      body:not(.table-screen-mode) .battle-actions {
        position: relative;
        top: auto;
        flex: 0 0 auto;
        padding: 5px 6px;
        margin-bottom: 5px;
      }
      body:not(.table-screen-mode) .battle-actions .ghost-btn,
      body:not(.table-screen-mode) .battle-actions .primary { padding: 6px 8px; }
      body:not(.table-screen-mode) .battle-actions-left,
      body:not(.table-screen-mode) .battle-actions-right { flex-wrap: nowrap; }
      body:not(.table-screen-mode) .battle-actions-left button,
      body:not(.table-screen-mode) .battle-actions-right button { width: auto; }
      body:not(.table-screen-mode) .hint { display: none; }

      body:not(.table-screen-mode) #battlefield {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(var(--battle-cols, 2), minmax(0, 1fr));
        grid-template-rows: repeat(var(--battle-rows, 2), minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 7px;
        overflow: hidden;
      }
      body:not(.table-screen-mode) #battlefield > .battle-header { display: none; }
      body:not(.table-screen-mode) #battlefield > .empty {
        grid-column: 1 / -1;
        align-self: stretch;
        display: grid;
        place-items: center;
        min-height: 0;
      }

      body:not(.table-screen-mode) #battlefield .combatant {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 64px 56px;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        gap: 5px;
        align-items: center;
        padding: 6px;
        border-radius: 14px;
        overflow: hidden;
      }
      body:not(.table-screen-mode) #battlefield .turn-rank {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 10px;
        font-size: .64rem;
      }
      body:not(.table-screen-mode) #battlefield .identity-section {
        grid-column: 2 / -1;
        grid-row: 1;
        min-height: 0;
        padding: 2px 4px;
        overflow: hidden;
      }
      body:not(.table-screen-mode) #battlefield .identity {
        gap: 2px;
        min-height: 0;
        overflow: hidden;
      }
      body:not(.table-screen-mode) #battlefield .identity-top { gap: 4px; flex-wrap: nowrap; }
      body:not(.table-screen-mode) #battlefield .badge { flex: 0 0 auto; padding: 2px 6px; font-size: .6rem; }
      body:not(.table-screen-mode) #battlefield .type-select { width: 104px; max-width: 104px; padding: 3px 5px; font-size: .65rem; }
      body:not(.table-screen-mode) #battlefield .combatant h2 { font-size: 1rem !important; line-height: 1 !important; }
      body:not(.table-screen-mode) #battlefield .name-edit {
        min-height: 27px;
        padding: 3px 5px !important;
        font-size: .98rem !important;
        line-height: 1 !important;
      }
      body:not(.table-screen-mode) #battlefield .mini-line { gap: 3px; font-size: .6rem; flex-wrap: nowrap; overflow: hidden; }
      body:not(.table-screen-mode) #battlefield .mini-line span { flex: 0 0 auto; padding: 1px 5px; }
      body:not(.table-screen-mode) #battlefield .status-panel { gap: 3px; margin-top: 1px; flex-wrap: nowrap; overflow: hidden; }
      body:not(.table-screen-mode) #battlefield .status-chip { flex: 0 0 auto; padding: 2px 5px; font-size: .59rem; }
      body:not(.table-screen-mode) #battlefield .status-select { max-width: 126px; min-height: 22px; padding: 2px 5px; font-size: .59rem; }
      body:not(.table-screen-mode) #battlefield .status-empty { font-size: .59rem; }

      body:not(.table-screen-mode) #battlefield .hp-editor {
        grid-column: 2;
        grid-row: 2;
        padding: 4px;
      }
      body:not(.table-screen-mode) #battlefield .initiative-stat {
        grid-column: 3;
        grid-row: 2;
        padding: 4px;
      }
      body:not(.table-screen-mode) #battlefield .armor-stat {
        grid-column: 4;
        grid-row: 2;
        padding: 4px;
      }
      body:not(.table-screen-mode) #battlefield .stat-label { font-size: .52rem; }
      body:not(.table-screen-mode) #battlefield .compact-input { min-height: 25px; padding: 3px 4px; font-size: .72rem; }
      body:not(.table-screen-mode) #battlefield .hp-edit-grid {
        grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr) auto minmax(30px, 1fr) !important;
        gap: 2px;
      }
      body:not(.table-screen-mode) #battlefield .bar-wrap {
        grid-column: 2 / -1;
        grid-row: 3;
        align-self: stretch;
        justify-content: stretch;
        min-height: 0;
        gap: 3px;
        padding: 4px 5px;
        overflow: hidden;
      }
      body:not(.table-screen-mode) #battlefield .bar-top { font-size: .54rem; }
      body:not(.table-screen-mode) #battlefield .bar {
        height: auto;
        min-height: 10px;
      }
      body:not(.table-screen-mode) #battlefield .temp-bar {
        height: auto !important;
        min-height: 7px;
        flex: 0 0 auto;
      }
      body:not(.table-screen-mode) #battlefield .bar-wrap .bar:last-of-type {
        flex: 1 1 auto;
        min-height: 22px;
      }
      body:not(.table-screen-mode) #battlefield .health-caption {
        font-size: .57rem;
        margin-top: auto;
      }
      body:not(.table-screen-mode) #battlefield .actions { display: none !important; }
      body:not(.table-screen-mode) #battlefield .player-turn-note { display: none !important; }

      body:not(.table-screen-mode) #battlefield .death-save-panel {
        grid-column: 2 / -1;
        grid-row: 4;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        min-width: 0;
        padding: 4px 5px;
        overflow: hidden;
      }
      body:not(.table-screen-mode) #battlefield .death-save-head { flex: 0 1 auto; gap: 4px; font-size: .62rem; white-space: nowrap; }
      body:not(.table-screen-mode) #battlefield .death-save-row { flex: 0 0 auto; gap: 4px; font-size: .58rem; }
      body:not(.table-screen-mode) #battlefield .death-pip { width: 15px; height: 15px; font-size: .55rem; }
      body:not(.table-screen-mode) #battlefield .death-save-actions { display: flex; flex-wrap: nowrap; gap: 3px; margin-left: auto; }
      body:not(.table-screen-mode) #battlefield .death-save-actions button { width: auto; min-width: 0; padding: 3px 5px; font-size: .56rem; }
      body:not(.table-screen-mode) #battlefield .death-save-note { display: none; }

      body.player-mode:not(.table-screen-mode) #battlefield .combatant {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
      }
      body.player-mode:not(.table-screen-mode) #battlefield .turn-rank { grid-row: 1 / span 3; }
      body.player-mode:not(.table-screen-mode) #battlefield .identity-section { grid-column: 2; grid-row: 1; }
      body.player-mode:not(.table-screen-mode) #battlefield .bar-wrap { grid-column: 2; grid-row: 2; }
      body.player-mode:not(.table-screen-mode) #battlefield .death-save-panel { grid-column: 2; grid-row: 3; }

      body:not(.table-screen-mode) #battlefield[data-density="compact"] .mini-line,
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .health-caption { display: none; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .combatant { gap: 3px; padding: 4px; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .identity-section,
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .bar-wrap { padding-block: 2px; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .bar { min-height: 8px; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .temp-bar { min-height: 6px !important; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .bar-wrap .bar:last-of-type { min-height: 16px; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .combatant h2 { font-size: .88rem !important; }
      body:not(.table-screen-mode) #battlefield[data-density="compact"] .name-edit { font-size: .84rem !important; min-height: 23px; }

      body:not(.table-screen-mode) #battlefield[data-density="micro"] .mini-line,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .health-caption,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .stat-label,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .type-select,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .status-empty { display: none !important; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .combatant {
        grid-template-columns: 32px minmax(0, 1fr) 50px 44px;
        gap: 2px;
        padding: 3px;
      }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .turn-rank { font-size: .54rem; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .identity-section,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .bar-wrap,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .hp-editor,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .initiative-stat,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .armor-stat { padding: 2px; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .badge { padding: 1px 4px; font-size: .52rem; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .combatant h2 { font-size: .76rem !important; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .name-edit { min-height: 20px; padding: 2px 3px !important; font-size: .72rem !important; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .compact-input { min-height: 20px; padding: 2px 3px; font-size: .62rem; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .status-chip { padding: 1px 4px; font-size: .5rem; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .status-select { max-width: 92px; min-height: 18px; font-size: .5rem; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .bar { height: auto; min-height: 6px; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .temp-bar { height: auto !important; min-height: 4px !important; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .bar-wrap .bar:last-of-type { min-height: 10px; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .death-save-panel { padding: 2px 3px; gap: 3px; }
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .death-save-head .death-status,
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .death-save-actions button:nth-child(3),
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .death-save-actions button:nth-child(4),
      body:not(.table-screen-mode) #battlefield[data-density="micro"] .death-save-actions button:nth-child(5) { display: none; }
    }

    @media (max-width: 1120px) {
      .encounter-toolbar { width: 100%; flex-wrap: wrap; }
      .encounter-toolbar select { flex: 1 1 220px; width: auto; }
    }



    /* ===== PORTRETY UCZESTNIKÓW 1:1 ===== */
    .combatant-portrait {
      position: absolute;
      top: 7px;
      right: 7px;
      z-index: 4;
      width: 58px;
      aspect-ratio: 1 / 1;
      border-radius: 11px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border));
      background: color-mix(in srgb, var(--panel-3) 88%, transparent);
      box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow) 62%, transparent);
    }
    .combatant-portrait img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .portrait-upload-label {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: relative;
    }
    .portrait-upload-label:hover::after {
      content: "Zmień";
      position: absolute;
      inset: auto 3px 3px 3px;
      padding: 2px 4px;
      border-radius: 6px;
      background: rgba(0,0,0,.72);
      color: #fff;
      font-size: .52rem;
      font-weight: 900;
      text-align: center;
      pointer-events: none;
    }
    .portrait-placeholder {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      color: var(--muted);
      font-size: 1.35rem;
      background:
        radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        color-mix(in srgb, var(--panel-3) 88%, transparent);
    }
    .portrait-file-input {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .portrait-remove {
      position: absolute;
      top: 3px;
      right: 3px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 18px !important;
      min-width: 18px !important;
      height: 18px;
      min-height: 18px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.28) !important;
      background: rgba(0,0,0,.68) !important;
      color: #fff !important;
      font-size: .66rem !important;
      line-height: 1 !important;
    }
    .combatant.has-portrait .identity-section {
      padding-right: 66px;
      min-height: 58px;
    }
    body:not(.table-screen-mode) #battlefield .combatant-portrait {
      width: clamp(42px, 4.1vw, 58px);
      top: 6px;
      right: 6px;
    }
    body:not(.table-screen-mode) #battlefield .combatant.has-portrait .identity-section {
      padding-right: clamp(48px, 4.8vw, 66px);
      min-height: clamp(42px, 4.1vw, 58px);
    }
    body:not(.table-screen-mode) #battlefield[data-density="compact"] .combatant-portrait {
      width: 46px;
      border-radius: 9px;
      top: 4px;
      right: 4px;
    }
    body:not(.table-screen-mode) #battlefield[data-density="compact"] .combatant.has-portrait .identity-section {
      padding-right: 50px;
      min-height: 46px;
    }
    body:not(.table-screen-mode) #battlefield[data-density="micro"] .combatant-portrait {
      width: 36px;
      border-radius: 7px;
      top: 3px;
      right: 3px;
    }
    body:not(.table-screen-mode) #battlefield[data-density="micro"] .combatant.has-portrait .identity-section {
      padding-right: 39px;
      min-height: 36px;
    }
    body:not(.table-screen-mode) #battlefield[data-density="micro"] .portrait-placeholder { font-size: .9rem; }
    body:not(.table-screen-mode) #battlefield[data-density="micro"] .portrait-upload-label:hover::after,
    body:not(.table-screen-mode) #battlefield[data-density="micro"] .portrait-remove { display: none; }
    .player-mode .combatant-portrait {
      width: 70px;
      border-radius: 13px;
    }
    .player-mode .combatant.has-portrait .identity-section {
      padding-right: 78px;
      min-height: 70px;
    }
    @media (max-width: 720px) {
      .combatant-portrait,
      .player-mode .combatant-portrait { width: 52px; }
      .combatant.has-portrait .identity-section,
      .player-mode .combatant.has-portrait .identity-section {
        padding-right: 58px;
        min-height: 52px;
      }
    }



    /* ===== USTAWIENIA / SKALOWANIE CZCIONKI ===== */
    .settings-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: start end;
      padding: 20px;
      background: rgba(0,0,0,.38);
      backdrop-filter: blur(5px);
    }
    .settings-backdrop.open { display: grid; }
    .settings-panel {
      width: min(420px, calc(100vw - 40px));
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 18px;
      background: color-mix(in srgb, var(--panel) 96%, transparent);
      box-shadow: 0 24px 70px var(--shadow);
      color: var(--text);
    }
    .settings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .settings-head h2 { margin:0; font-family:var(--font-heading); color:var(--accent-strong); font-size:1.45rem; }
    .settings-close { width:40px; height:40px; padding:0; border-radius:12px; }
    .settings-group {
      display:grid;
      gap:10px;
      padding:14px 0;
      border-top:1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }
    .settings-group:first-of-type { border-top:0; }
    .settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .settings-label { font-weight:900; color:var(--accent-strong); }
    .settings-note { color:var(--muted); font-size:.82rem; line-height:1.4; }
    .font-scale-row { display:grid; grid-template-columns:auto minmax(150px,1fr) auto; align-items:center; gap:10px; }
    #fontScaleInput { padding:0; accent-color:var(--gold); }
    #fontScaleValue { min-width:58px; text-align:right; color:var(--gold); font-weight:950; }
    .settings-danger { background:linear-gradient(135deg, #6b2d2d, #9a4141); color:#ffe0e0; border-color:rgba(255,150,150,.35); }

    .status-meta {
      display:inline-flex;
      align-items:center;
      gap:4px;
      opacity:.88;
      font-size:.88em;
      font-weight:850;
    }
    .status-chip.periodic-status {
      border-color: color-mix(in srgb, var(--danger) 72%, var(--gold));
      background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 17%, transparent), color-mix(in srgb, var(--gold) 10%, transparent));
    }


/* ===== RUNDA + TIMER W JEDNYM PANELU ===== */
.round-timer-box {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(92px, .62fr) 1px minmax(210px, 1.38fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--gold) 12%, var(--panel)),
      color-mix(in srgb, var(--panel-3) 92%, transparent));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 72%, transparent);
  backdrop-filter: blur(14px);
}

.round-summary {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  text-align: center;
}

.round-summary .round-label {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.round-summary strong {
  color: var(--gold);
  font-size: 1.85rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.round-timer-divider {
  width: 1px;
  height: 52px;
  justify-self: center;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--border) 92%, var(--gold)),
    transparent
  );
}

.timer-inline {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.round-timer-box .timer-display {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .round-timer-box {
    grid-column: 1 / -1;
    grid-template-columns: minmax(78px, .48fr) 1px minmax(180px, 1.52fr);
    gap: 10px;
  }
  .timer-inline {
    grid-template-columns: minmax(110px, 1fr) auto;
  }
}

@media (max-width: 520px) {
  .round-timer-box {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .round-timer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--border) 92%, var(--gold)),
      transparent
    );
  }
  .timer-inline {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Kompaktowy tryb - nowy wspólny panel zajmuje miejsce dawnych dwóch boksów. */
@media (min-width: 761px) {
  body:not(.table-screen-mode) .round-timer-box {
    padding: 6px 8px;
    gap: 9px;
  }
  body:not(.table-screen-mode) .round-summary .round-label {
    margin-bottom: 0;
    font-size: .66rem;
  }
  body:not(.table-screen-mode) .round-summary strong {
    font-size: 1.45rem;
  }
  body:not(.table-screen-mode) .round-timer-divider {
    height: 40px;
  }
}


/* ===== V10: JEDEN INDEX — PRZEŁĄCZNIK TRACKER / PANEL SCEN ===== */
[hidden] { display: none !important; }

.scene-workspace {
  min-width: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0b0705;
}

.scene-workspace iframe {
  display: block;
  width: 100%;
  height: 100vh;
  border: 0;
  background: #0b0705;
}

body.scene-interface-active .ambient-bg,
body.scene-player-route .ambient-bg {
  display: none;
}

.layout.scene-player-view {
  grid-template-columns: minmax(0, 1fr) !important;
}

.layout.scene-player-view .sidebar {
  display: none !important;
}

.layout.scene-player-view .scene-workspace {
  grid-column: 1 / -1;
}

#profilesBtn.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}

/* W widoku gracza trackera nie pokazujemy bocznego panelu MG ani przełącznika modułów. */
body.player-mode:not(.scene-player-route) .sidebar {
  display: none !important;
}

body.player-mode:not(.scene-player-route) .layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Panel scen ma własny pełnoekranowy interfejs; zewnętrzny rail zostaje tylko w trybie MG. */
body.scene-interface-active:not(.scene-player-route) .sidebar {
  z-index: 10;
}

body.scene-interface-active:not(.scene-player-route) .layout.drawer-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

@media (max-width: 1200px) {
  body.scene-interface-active:not(.scene-player-route) .layout,
  body.scene-interface-active:not(.scene-player-route) .layout.drawer-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  body.scene-interface-active:not(.scene-player-route) .sidebar {
    position: sticky;
    height: 100vh;
  }
  body.scene-interface-active:not(.scene-player-route) .layout.drawer-collapsed .sidebar {
    height: 100vh;
  }
}


/* ===== V10: TRZY GŁÓWNE PANELE SESJI ===== */
.session-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

.session-nav-btn {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  color: var(--muted);
  box-shadow: none;
}

.session-nav-btn:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
}

.session-nav-btn.active {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--gold) 76%, var(--border));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--gold) 22%, var(--panel-2)),
    color-mix(in srgb, var(--accent) 16%, var(--panel-3)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent);
}

.session-nav-icon { font-size: 1.08rem; line-height: 1; }
.session-nav-label { font-size: .78rem; font-weight: 900; letter-spacing: .02em; }

.layout.drawer-collapsed .session-nav {
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  border-bottom: 0;
  padding-bottom: 0;
}

.layout.drawer-collapsed .session-nav-btn {
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 16px;
}

.layout.drawer-collapsed .session-nav-label { display: none; }
.layout.drawer-collapsed .session-nav-icon { font-size: 1.2rem; }

body.scene-interface-active:not(.scene-player-route) .session-nav,
body.music-interface-active:not(.scene-player-route) .session-nav {
  position: relative;
  z-index: 12;
}

body.player-mode .session-nav { display: none !important; }

body.music-interface-active .ambient-bg { display: none; }

@media (max-width: 1200px) {
  .layout.drawer-collapsed .session-nav,
  body.scene-interface-active:not(.scene-player-route) .session-nav,
  body.music-interface-active:not(.scene-player-route) .session-nav {
    grid-template-columns: repeat(3, 1fr);
  }
  .layout.drawer-collapsed .session-nav-btn {
    width: 100%;
    height: 46px;
  }
  .layout.drawer-collapsed .session-nav-label { display: inline; }
  body.scene-interface-active:not(.scene-player-route) .sidebar,
  body.music-interface-active:not(.scene-player-route) .sidebar {
    height: auto;
    min-height: 68px;
  }
  body.scene-interface-active:not(.scene-player-route) .sidebar-inner,
  body.music-interface-active:not(.scene-player-route) .sidebar-inner {
    max-height: none;
    overflow: visible;
  }
}


/* ===== V11: NIEZALEŻNY PANEL MUZYCZNY ===== */
.music-workspace {
  min-width: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 28%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
    linear-gradient(145deg, var(--bg-2), var(--bg));
}

.music-shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 100%;
  margin: 0 auto;
  padding: 28px 0 40px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.music-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.music-header h1 {
  margin: 3px 0 7px;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1;
}

.music-subtitle {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.music-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.music-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.music-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  user-select: none;
}

.music-player-card,
.music-library {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--panel) 92%, transparent),
    color-mix(in srgb, var(--panel-3) 94%, transparent));
  box-shadow: 0 18px 50px var(--shadow);
}

.music-player-card {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.music-now-playing {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.music-disc {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 65%, var(--border));
  background:
    radial-gradient(circle at center, var(--bg-2) 0 8%, transparent 9%),
    repeating-radial-gradient(circle at center,
      color-mix(in srgb, var(--panel-3) 90%, black) 0 5px,
      color-mix(in srgb, var(--panel-2) 86%, black) 6px 7px);
  color: var(--gold);
  font-size: 1.45rem;
  box-shadow: inset 0 0 0 9px color-mix(in srgb, var(--accent) 7%, transparent);
}

.music-now-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.music-now-label {
  color: var(--gold);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.music-now-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
}

.music-now-copy > span:last-child {
  color: var(--muted);
  font-size: .86rem;
}

.music-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.music-control {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1rem;
}

.music-control:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent));
}

.music-control-main {
  width: 58px;
  height: 58px;
  border-color: color-mix(in srgb, var(--gold) 75%, var(--border));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--gold) 34%, var(--panel-2)),
    color-mix(in srgb, var(--accent) 18%, var(--panel-3)));
  font-size: 1.15rem;
}

.music-control:disabled,
.music-header-actions button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.music-progress-row,
.music-volume-row {
  display: grid;
  align-items: center;
  gap: 12px;
}

.music-progress-row {
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
}

.music-volume-row {
  grid-template-columns: auto minmax(120px, 260px) auto;
  justify-content: center;
}

.music-progress-row input[type="range"],
.music-volume-row input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
}

.music-library {
  min-height: 320px;
  overflow: hidden;
}

.music-library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2) 58%, transparent);
}

.music-library-head h2 {
  margin: 0 0 3px;
  font-size: 1.05rem;
}

.music-count {
  color: var(--muted);
  font-size: .8rem;
}

.music-sort-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
}

.music-sort-label select {
  min-width: 245px;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 9px 34px 9px 11px;
  background: var(--panel-3);
  color: var(--text);
}

.music-track-list {
  max-height: min(48vh, 570px);
  overflow: auto;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 7px;
}

.music-track {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px 42px minmax(0, 1fr) 76px 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-2) 68%, transparent);
  transition: .15s ease;
}

.music-track:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 8%);
}

.music-track.active {
  border-color: color-mix(in srgb, var(--gold) 72%, var(--border));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 15%, var(--panel-2)),
    color-mix(in srgb, var(--panel-2) 92%, transparent));
  box-shadow: inset 3px 0 0 var(--gold);
}

.music-track-play,
.music-track-remove,
.music-track-name {
  border: 0;
  box-shadow: none;
}

.music-track-play,
.music-track-remove {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--panel-3);
  color: var(--text);
}

.music-track-play:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--panel-3) 70%, var(--accent));
}

.music-track-remove {
  color: var(--danger);
  font-size: 1.25rem;
}

.music-track-remove:hover {
  background: color-mix(in srgb, var(--danger) 18%, var(--panel-3));
}

.music-track-index,
.music-track-duration {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.music-track-index { text-align: center; }
.music-track-duration { text-align: right; }

.music-track-name {
  min-width: 0;
  padding: 7px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  background: transparent;
  color: var(--text);
  font-weight: 800;
}

.music-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* Osobny panel muzyczny zachowuje rail nawigacji, ale nie korzysta z iframe slajdów. */
body.music-interface-active:not(.scene-player-route) .layout,
body.music-interface-active:not(.scene-player-route) .layout.drawer-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

body.music-interface-active:not(.scene-player-route) .sidebar {
  z-index: 10;
  height: 100vh;
}

body.music-interface-active:not(.scene-player-route) .music-workspace {
  grid-column: 2;
}

@media (max-width: 820px) {
  body.music-interface-active:not(.scene-player-route) .layout,
  body.music-interface-active:not(.scene-player-route) .layout.drawer-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  body.music-interface-active:not(.scene-player-route) .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    height: auto;
  }
  body.music-interface-active:not(.scene-player-route) .music-workspace {
    grid-column: 1;
  }
  .music-shell { width: min(100% - 24px, 1180px); padding-top: 18px; }
  .music-header { flex-direction: column; }
  .music-header-actions { justify-content: flex-start; }
  .music-library-head { align-items: stretch; flex-direction: column; }
  .music-sort-label select { min-width: 0; width: 100%; }
  .music-track { grid-template-columns: 38px minmax(0, 1fr) 62px 38px; }
  .music-track-index { display: none; }
}


/* ===== POWRÓT Z WIDOKU GRACZA DO GM ===== */
.return-gm-btn {
  border-color: color-mix(in srgb, var(--gold) 62%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, var(--panel)), color-mix(in srgb, var(--panel-2) 90%, transparent));
  color: var(--accent-strong);
  font-weight: 900;
}
.return-gm-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 20%, transparent);
}


/* ===== NATIVE DIALOG: PANELE SESJI V5 ===== */
.gm-panels-backdrop {
  width: min(1120px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  box-shadow: 0 34px 100px rgba(0,0,0,.58);
}
.gm-panels-backdrop:not([open]) { display: none !important; }
.gm-panels-backdrop[open] { display: block; }
.gm-panels-backdrop::backdrop {
  background: rgba(3, 5, 14, .66);
  backdrop-filter: blur(8px);
}
.gm-panels-dialog {
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--border));
  border-radius: 28px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--panel) 97%, transparent),
      color-mix(in srgb, var(--panel-3) 96%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.gm-panels-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.gm-panels-head h2 {
  margin: 0 0 5px;
  font-family: var(--font-heading);
  color: var(--accent-strong);
  font-size: 1.65rem;
}
.gm-panels-copy {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}
.gm-panels-body { display: grid; gap: 16px; }
.gm-panel-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.gm-panel-card-head { display: grid; gap: 4px; }
.gm-panel-card-head h3 { margin: 0; color: var(--accent-strong); font-size: 1.05rem; }
.gm-panel-card-head p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.gm-panels-encounter {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}
.gm-panels-encounter select { flex: 1 1 300px; width: auto; }
.gm-panels-toolbar {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(160px, .9fr) minmax(300px, 1.5fr) minmax(190px, 1fr) minmax(230px, 1.15fr);
  gap: 10px;
}
.gm-panels-toolbar .round-timer-box { grid-column: auto; }
.gm-panels-controls {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(150px,.8fr) minmax(280px,2.2fr) repeat(3,minmax(110px,.75fr)) auto auto;
  gap: 8px;
  align-items: end;
}
.gm-panels-controls .field, .gm-panels-controls .name-field { min-width: 0; }
.gm-panels-controls input,
.gm-panels-controls select,
.gm-panels-toolbar input,
.gm-panels-toolbar select { width: 100%; }
#gmPanelsOpenBtn.active {
  border-color: color-mix(in srgb, var(--gold) 75%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 18%, transparent);
}
@media (max-width: 1000px) {
  .gm-panels-backdrop { width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
  .gm-panels-dialog { max-height: calc(100vh - 24px); padding: 18px; }
  .gm-panels-toolbar { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .gm-panels-controls { grid-template-columns: repeat(2, minmax(180px,1fr)); }
  .gm-panels-controls .name-field { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .gm-panels-backdrop { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 20px; }
  .gm-panels-dialog { max-height: calc(100vh - 12px); padding: 14px; border-radius: 20px; }
  .gm-panels-head { gap: 10px; }
  .gm-panels-toolbar, .gm-panels-controls { grid-template-columns: 1fr; }
  .gm-panels-controls .name-field { grid-column: auto; }
  .gm-panels-encounter { flex-direction: column; align-items: stretch; }
  .gm-panels-encounter select { flex-basis: auto; }
}