:root {
      --line: rgba(159, 200, 236, 0.14);
      --text: #eef6ff;
      --muted: #93abc2;
      --accent: #5db9ff;
      --accent-2: #8ce0cf;
      --warn: #f3bf69;
      --success: #5fda97;
      --danger: #ff9e8c;
      --radius: 24px;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
      --panel: linear-gradient(160deg, rgba(9, 24, 38, 0.92), rgba(7, 18, 29, 0.96));
      --soft: rgba(255, 255, 255, 0.04);
      --xiangqi-wood: #9f6332;
      --xiangqi-river: #6f4526;
      --caro-board: #d3c1aa;
      --caro-line: rgba(82, 58, 38, 0.26);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: "Segoe UI", system-ui, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(93, 185, 255, 0.18), transparent 18%),
        radial-gradient(circle at top right, rgba(140, 224, 207, 0.10), transparent 20%),
        linear-gradient(180deg, #040b13 0%, #07111a 34%, #09131d 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(circle at center, black 45%, transparent 82%);
    }

    .page {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px;
    }

    .nav,
    .topbar,
    .map-card,
    .room-row,
    .section-box,
    .other-card,
    .main-board-card,
    .side-card,
    .chat-box {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .nav,
    .topbar,
    .map-card,
    .room-row,
    .other-card,
    .main-board-card,
    .side-card {
      background: var(--panel);
    }

    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 14px 18px;
      margin-bottom: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.16), transparent 36%),
        linear-gradient(135deg, #1c5d93, #0f2c48);
    }

    .brand-name {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .brand-name span {
      color: var(--accent);
    }

    .brand-copy,
    .muted,
    .meta,
    .sub,
    .chat-text,
    .input-note,
    .other-copy,
    .map-copy,
    .board-note {
      color: var(--muted);
      line-height: 1.6;
    }

    .brand-copy {
      font-size: 12px;
    }

    .nav-actions,
    .nav-links,
    .chip-row,
    .top-right,
    .title-tags,
    .board-tags,
    .other-meta,
    .map-meta,
    .map-actions,
    .board-stats,
    .left-links,
    .main-head-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .nav-links span,
    .account,
    .chip,
    .tag,
    .rank,
    .board-link,
    .jump-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      text-decoration: none;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }

    .nav-links span {
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
    }

    .nav-links .active {
      color: var(--text);
      background: rgba(93, 185, 255, 0.08);
      border: 1px solid rgba(93, 185, 255, 0.22);
    }

    .account {
      padding: 10px 16px;
      border: 1px solid rgba(140, 224, 207, 0.18);
      background: linear-gradient(135deg, rgba(93, 185, 255, 0.16), rgba(140, 224, 207, 0.14));
      color: var(--text);
      font-size: 14px;
    }

    .account.player::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-right: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(95, 218, 151, 0.14);
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    .chip,
    .tag,
    .jump-link {
      padding: 8px 12px;
      border: 1px solid rgba(159, 200, 236, 0.12);
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
    }

    .chip.active,
    .tag.active,
    .jump-link:hover {
      border-color: rgba(93, 185, 255, 0.22);
      background: rgba(93, 185, 255, 0.12);
      color: var(--text);
    }

    /* Segmented Control Filter */
    .segmented-control {
      display: inline-flex;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 12px;
      padding: 4px;
      border: 1px solid var(--line);
    }

    .seg-btn {
      background: transparent;
      border: none;
      color: var(--muted);
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .seg-btn:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.05);
    }

    .seg-btn.active {
      background: rgba(93, 185, 255, 0.14);
      color: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(93, 185, 255, 0.25);
    }

    .rank {
      width: 40px;
      height: 40px;
      background: rgba(243, 191, 105, 0.14);
      border: 1px solid rgba(243, 191, 105, 0.24);
      color: #ffe3b0;
      font-size: 16px;
    }

    .board-link {
      padding: 10px 14px;
      border: 1px solid rgba(140, 224, 207, 0.18);
      background: linear-gradient(135deg, rgba(93, 185, 255, 0.14), rgba(140, 224, 207, 0.12));
      color: var(--text);
    }

    .board-link.secondary {
      border-color: rgba(159, 200, 236, 0.12);
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
    }

    .live-map {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    /* Visual Banner (Twitch Category Match Style) */
    .visual-banner {
      position: relative;
      padding: 24px 20px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 180px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .visual-banner:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      border-color: rgba(255, 255, 255, 0.18);
    }

    .visual-banner.chess {
      background: linear-gradient(135deg, #102d45 0%, #071524 100%);
    }

    .visual-banner.xiangqi {
      background: linear-gradient(135deg, #451b10 0%, #240a07 100%);
    }

    .visual-banner.up {
      background: linear-gradient(135deg, #143a35 0%, #081d1a 100%);
    }

    .visual-banner.caro {
      background: linear-gradient(135deg, #3a2e14 0%, #1d1508 100%);
    }

    .visual-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.05;
      background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
        linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
      background-size: 32px 32px;
      background-position: 0 0, 16px 16px;
      pointer-events: none;
    }

    .visual-banner.xiangqi::before {
      background-image:
        linear-gradient(var(--caro-line), var(--caro-line)),
        linear-gradient(90deg, var(--caro-line), var(--caro-line));
      background-size: 16px 16px;
      opacity: 0.15;
    }

    .vb-content {
      position: relative;
      z-index: 2;
    }

    .vb-title {
      font-size: 28px;
      font-weight: 900;
      line-height: 1.1;
      margin: 0 0 10px;
      letter-spacing: -0.02em;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
      color: #fff;
    }

    .vb-meta-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .vb-meta {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 12px;
      font-weight: 700;
      backdrop-filter: blur(4px);
      color: #d1e2f3;
    }

    .vb-meta.hot {
      background: rgba(243, 191, 105, 0.16);
      border-color: rgba(243, 191, 105, 0.3);
      color: #ffe8c2;
    }

    .vb-hover-cta {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.9);
      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .visual-banner:hover .vb-hover-cta {
      opacity: 1;
      transform: scale(1);
      background: var(--accent);
      border-color: var(--accent);
      color: #000;
      font-size: 18px;
    }

    .map-head,
    .other-head,
    .chat-head,
    .board-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 10px;
    }

    .map-card h2,
    .other-card h4 {
      margin: 10px 0 6px;
      font-size: 22px;
      line-height: 1.04;
      letter-spacing: -0.02em;
    }

    .map-spot {
      margin: 12px 0;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(159, 200, 236, 0.10);
      background: rgba(255, 255, 255, 0.04);
    }

    .map-spot strong {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
      line-height: 1.2;
    }

    .rooms {
      display: grid;
      gap: 16px;
    }

    .room-row {
      padding: 16px;
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr) 304px;
      gap: 16px;
      align-items: stretch;
    }

    .section-box {
      padding: 14px;
      background: var(--soft);
    }

    .left-col h2 {
      margin: 10px 0 6px;
      font-size: 30px;
      line-height: 1.02;
      letter-spacing: -0.03em;
    }

    .left-col p {
      margin: 0 0 14px;
      font-size: 14px;
    }

    .signal-list {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .signal {
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(159, 200, 236, 0.10);
      background: rgba(255, 255, 255, 0.04);
    }

    .signal strong {
      display: block;
      margin-bottom: 4px;
      font-size: 18px;
    }

    .left-links {
      display: grid;
      gap: 8px;
    }

    .jump-link {
      justify-content: space-between;
      width: 100%;
      border-radius: 16px;
      padding: 11px 12px;
    }

    .mid-col h3,
    .right-col h3,
    .other-head h2 {
      margin: 0 0 10px;
      font-size: 18px;
      line-height: 1.1;
    }

    .room-stage {
      display: grid;
      grid-template-columns: minmax(0, 1.28fr) 280px;
      gap: 12px;
    }

    .main-board-card,
    .side-card {
      padding: 14px;
    }

    .main-board-card {
      border-color: rgba(93, 185, 255, 0.24);
      background:
        linear-gradient(135deg, rgba(93, 185, 255, 0.12), rgba(140, 224, 207, 0.08)),
        var(--panel);
    }

    .main-title {
      display: block;
      margin: 8px 0 4px;
      font-size: 24px;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }

    .main-body {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) 230px;
      gap: 14px;
      margin-top: 14px;
    }

    .board-surface {
      position: relative;
      display: grid;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(159, 200, 236, 0.10);
      background: rgba(255, 255, 255, 0.03);
    }

    .board-surface.size-main {
      min-height: 320px;
    }

    .board-surface.size-side {
      min-height: 98px;
    }

    .board-surface.size-other {
      min-height: 140px;
    }

    .board-surface.chess,
    .board-surface.up {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .board-surface.xiangqi {
      grid-template-columns: repeat(9, minmax(0, 1fr));
      background:
        url('images/xiangqi-board.svg') center/cover no-repeat;
    }

    .board-surface.up {
      background:
        url('images/upchess-board.svg') center/cover no-repeat;
    }

    .board-surface.caro {
      grid-template-columns: repeat(10, minmax(0, 1fr));
      background: var(--caro-board);
    }

    .cell {
      position: relative;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      font-size: 14px;
      font-weight: 800;
      overflow: hidden;
    }

    .chess .cell.light {
      background: #f4ede2;
      color: #2c3d4f;
    }

    .up .cell.light {
      background: transparent;
      color: #f8e8c0;
    }

    .chess .cell.dark {
      background: #4d6072;
      color: #f4ede2;
    }

    .up .cell.dark {
      background: transparent;
      color: #e8a040;
    }

    .cell.mark::after {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 0 999px rgba(243, 191, 105, 0.24);
    }

    .up .piece-hidden {
      width: 64%;
      height: 64%;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(15, 38, 62, 0.92), rgba(9, 24, 38, 0.96));
      border: 1px solid rgba(159, 200, 236, 0.18);
      color: #dff2ff;
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .up .piece-open {
      width: 68%;
      height: 68%;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(237, 224, 209, 0.94);
      color: #213040;
      font-size: 16px;
      box-shadow: inset 0 0 0 1px rgba(36, 46, 58, 0.14);
    }

    .xiangqi .cell {
      aspect-ratio: 1 / 0.92;
      background:
        linear-gradient(var(--caro-line), var(--caro-line)) right center / 1px 100% no-repeat,
        linear-gradient(var(--caro-line), var(--caro-line)) center bottom / 100% 1px no-repeat;
    }

    .xiangqi .cell:nth-child(9n) {
      background:
        linear-gradient(var(--caro-line), var(--caro-line)) center bottom / 100% 1px no-repeat;
    }

    .xiangqi .piece-disc {
      width: 68%;
      height: 68%;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #f6e6c8;
      color: #992f21;
      box-shadow: inset 0 0 0 2px rgba(122, 59, 35, 0.25);
      font-size: 15px;
      font-weight: 900;
    }

    .xiangqi .piece-disc.dark {
      color: #1d2d4b;
      background: #efe0c0;
    }

    .caro .cell {
      background:
        linear-gradient(var(--caro-line), var(--caro-line)) right center / 1px 100% no-repeat,
        linear-gradient(var(--caro-line), var(--caro-line)) center bottom / 100% 1px no-repeat,
        var(--caro-board);
    }

    .caro .cell:nth-child(10n) {
      background:
        linear-gradient(var(--caro-line), var(--caro-line)) center bottom / 100% 1px no-repeat,
        var(--caro-board);
    }

    .caro-token {
      font-size: 18px;
      line-height: 1;
      font-weight: 900;
    }

    .caro-token.x {
      color: #9f352a;
    }

    .caro-token.o {
      color: #255d85;
    }

    .main-aside {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .aside-box {
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(159, 200, 236, 0.10);
      background: rgba(255, 255, 255, 0.05);
    }

    .aside-box strong {
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
    }

    .board-stats {
      gap: 8px;
    }

    .board-stats .chip {
      padding: 7px 10px;
    }

    .side-stack {
      display: grid;
      gap: 10px;
    }

    .side-card {
      border-radius: 20px;
    }

    .board-head h4 {
      margin: 0 0 4px;
      font-size: 15px;
      line-height: 1.15;
    }

    .side-body {
      display: grid;
      grid-template-columns: 98px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin-top: 10px;
    }

    .side-copy strong {
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
      line-height: 1.2;
    }

    .chat-box {
      padding: 14px;
      background: rgba(255, 255, 255, 0.04);
    }

    .map-head,
    .other-head,
    .chat-head,
    .board-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 10px;
    }

    .other-card h4 {
      margin: 10px 0 6px;
      font-size: 22px;
      line-height: 1.04;
      letter-spacing: -0.02em;
    }

    .chat-head {
      margin-bottom: 12px;
    }

    .chat-stream {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .chat-item {
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
    }

    .chat-item strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }

    .chat-text {
      font-size: 13px;
    }

    .input-shell {
      padding: 12px 14px;
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(159, 200, 236, 0.10);
    }

    .input-shell.active {
      background: rgba(93, 185, 255, 0.08);
      border-color: rgba(93, 185, 255, 0.24);
    }

    .input-shell.locked {
      background: rgba(243, 191, 105, 0.08);
      border-color: rgba(243, 191, 105, 0.20);
    }

    .input-note {
      font-size: 13px;
    }

    .other {
      margin-top: 18px;
    }

    .other-head {
      margin-bottom: 14px;
    }

    .other-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .other-card {
      padding: 14px 16px;
    }

    .other-body {
      display: grid;
      grid-template-columns: 140px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      margin-top: 12px;
    }

    /* --- UX Lớp mới: Radar & Pulse --- */
    .live-radar-wrap {
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      align-items: center;
      padding: 10px 16px;
      background: linear-gradient(90deg, rgba(93, 185, 255, 0.08), transparent 40%);
      border: 1px solid rgba(93, 185, 255, 0.18);
      border-radius: var(--radius);
      margin-bottom: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .radar-label {
      font-size: 13px;
      font-weight: 800;
      color: var(--accent);
      margin-right: 20px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .radar-pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--warn);
      box-shadow: 0 0 8px var(--warn);
      animation: pulseWarning 1.5s infinite;
    }

    @keyframes pulseWarning {
      0% {
        opacity: 1;
        box-shadow: 0 0 8px var(--warn);
      }

      50% {
        opacity: 0.4;
        box-shadow: 0 0 2px var(--warn);
      }

      100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--warn);
      }
    }

    .radar-track {
      display: inline-flex;
      gap: 32px;
      animation: scrollRadar 40s linear infinite;
    }

    .radar-track:hover {
      animation-play-state: paused;
    }

    @keyframes scrollRadar {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .radar-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
    }

    .radar-item:hover {
      color: var(--accent);
    }

    .radar-highlight {
      color: var(--warn);
      font-weight: 700;
    }

    /* Tension Bar / Eval Bar */
    .eval-bar {
      width: 100%;
      height: 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.08);
      /* Black advantage part */
      overflow: hidden;
      margin: 8px 0;
      display: flex;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    .eval-white {
      background: linear-gradient(90deg, #d4e4f7, #ffffff);
      height: 100%;
      box-shadow: 2px 0 4px rgba(255, 255, 255, 0.2);
    }

    .side-card.scramble {
      border-color: rgba(255, 99, 71, 0.5);
      background: linear-gradient(135deg, rgba(255, 99, 71, 0.08), rgba(0, 0, 0, 0.2));
      animation: pulseScramble 2s infinite;
    }

    @keyframes pulseScramble {
      0% {
        box-shadow: 0 0 10px rgba(255, 99, 71, 0.1);
      }

      50% {
        box-shadow: 0 0 20px rgba(255, 99, 71, 0.25);
      }

      100% {
        box-shadow: 0 0 10px rgba(255, 99, 71, 0.1);
      }
    }

    /* Tool overlay chat */
    .guess-module {
      padding: 12px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(93, 185, 255, 0.12), transparent);
      border: 1px solid rgba(93, 185, 255, 0.2);
      margin-bottom: 12px;
    }

    .room-tools {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      align-items: center;
    }

    /* Adjust main vs side proportions for strong asymmetry */
    .room-stage {
      grid-template-columns: minmax(0, 1.8fr) 260px;
      /* 2/3 vs 1/3 */
    }

    .main-body {
      grid-template-columns: 1fr;
      /* Switch to vertical stacking for inner main body to reduce height */
      gap: 12px;
    }

    .main-aside {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
    }

    .main-aside .aside-box {
      flex: 1 1 120px;
    }

    .board-surface.size-side {
      min-height: 70px;
    }

    /* Shrink side boards further */
    .side-body {
      grid-template-columns: 70px minmax(0, 1fr);
      /* Tighter side boards */
    }

    @media (max-width: 1360px) {
      .live-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .room-row {
        grid-template-columns: 1fr;
      }

      .room-stage,
      .main-body {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1024px) {
      .room-stage {
        grid-template-columns: 1fr !important;
      }

      .room-tools {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      .live-radar-wrap {
        border-radius: 0;
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
      }

      .other-grid {
        grid-template-columns: 1fr;
      }

      .side-body,
      .other-body {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 840px) {
      body.theater-mode .room-row {
        grid-template-columns: 1fr !important;
      }

      .nav,
      .topbar,
      .chat-head,
      .other-head {
        flex-direction: column;
        align-items: stretch;
      }

      .nav-actions,
      .nav-links,
      .live-map {
        width: 100%;
      }

      .nav-links {
        justify-content: center;
      }

      .live-map {
        grid-template-columns: 1fr;
      }
    }

    /* Chế độ Rạp hát (Theater Mode) CSS */
    body.theater-mode .nav,
    body.theater-mode .topbar,
    body.theater-mode .live-radar-wrap,
    body.theater-mode .live-map,
    body.theater-mode .other,
    body.theater-mode .left-col,
    body.theater-mode .side-stack {
      display: none !important;
    }

    body.theater-mode .room-row {
      grid-template-columns: 1fr 340px !important;
    }

    body.theater-mode .room-stage {
      grid-template-columns: 1fr !important;
    }

    body.theater-mode .room-tools h2 {
      font-size: 26px !important;
    }

    @media (max-width: 1024px) {
      .main-layout {
        flex-direction: column !important;
      }

      .chat-col {
        position: relative !important;
        width: 100% !important;
        height: 400px !important;
        top: 0 !important;
      }
    }