/* GameTab-specific styles extracted from style.css */

.react-gametab-shell {
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: var(--secondary-bg);
}

.react-gametab-root {
  --gt-panel-font-scale: 1;
  --gt-panel-base-font-size: calc(13px * var(--gt-panel-font-scale, 1));
  height: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 10px;
  padding: 8px;
  background: var(--secondary-bg);
  overflow: auto;
}

.react-gametab-root.is-impersonated .react-gametab-board-pane {
  position: relative;
}

.react-gametab-root.is-impersonated .react-gametab-board-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #d63031;
  pointer-events: none;
  z-index: 3;
}

.react-gametab-root.layout-portrait,
.react-gametab-root.layout-small-size {
  min-width: 380px;
}

.react-gametab-root.layout-landscape {
  min-width: 670px;
}

.react-gametab-root.layout-portrait {
  flex-direction: column;
  gap: 8px;
}

.react-gametab-root.layout-small-size {
  flex-direction: column;
  position: relative;
  overflow: auto;
  gap: 8px;
}

.react-gametab-root.layout-landscape {
  flex-direction: row;
}

.react-gametab-root.layout-landscape {
  overflow: hidden;
}

.react-gametab-root.is-mobile,
.react-gametab-root.is-floating-titlebar {
  padding: 0;
  gap: 0;
}
.react-gametab-root.is-landscape-ls {
  align-items: stretch;
}

.react-gametab-root.is-landscape-ls .react-gametab-board-pane {
  min-width: 0;
  overflow: hidden;
}

.react-gametab-root.is-landscape-ls:not(.is-landscape-ls-play) .react-gametab-board-pane {
  margin-left: var(--ls-left-reserve-px, 44px);
}

.react-gametab-root.is-landscape-ls .react-gametab-board-pane {
  flex: 0 0 auto;
}

.react-gametab-landscape-ls-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.react-gametab-root.is-landscape-ls.is-landscape-ls-play .react-gametab-side-pane {
  display: none;
}

.react-gametab-root.is-landscape-ls:not(.is-landscape-ls-play).layout-landscape .react-gametab-side-pane {
  flex: 1 0 var(--ls-side-min-width-px, 25%);
  width: auto;
  max-width: none;
  min-width: var(--ls-side-min-width-px, 25%);
}

.react-gametab-root.is-mobile {
  overflow: hidden;
}

.react-gametab-root.is-mobile.layout-landscape .react-gametab-side-pane {
  min-height: 0;
  overflow: hidden;
}

.react-gametab-root.is-mobile.layout-landscape .react-gametab-side-inner {
  overflow: hidden;
}

.react-gametab-root.is-floating-titlebar .gametab-canvas-host,
.react-gametab-root.is-floating-titlebar .react-gametab-info-box,
.react-gametab-root.is-floating-titlebar .react-gametab-side-pane.is-expanded .react-gametab-side-inner {
  border-radius: 0;
}
.react-gametab-landscape-ls-rail {
  position: absolute;
  /* Changed: the regular toolbar's column is left of the board, the panel
     switcher (mode rail) right of it, next to the panels it switches */
  left: calc(50% - (var(--ls-board-width-px, 0px) / 2) - 42px);
  top: calc(env(safe-area-inset-top, 0px) + 46px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  z-index: 28;
  pointer-events: none;
}
.react-gametab-landscape-ls-mode-rail {
  position: absolute;
  /* Changed: right of the board (see .react-gametab-landscape-ls-rail) */
  left: calc(50% + (var(--ls-board-width-px, 0px) / 2) + 8px);
  /* Changed: + the title bar's wrap (GameTab lsTitlebarWrapPx): its close,
     above this column, moves below the avatar when both do not fit */
  top: calc(env(safe-area-inset-top, 0px) + 46px + var(--ls-titlebar-wrap-px, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  display: flex;
  flex-direction: column;
  /* Changed again: at the bottom, aligned with the regular toolbar's column
     left of the board (.react-gametab-landscape-ls-rail: its buttons in
     -rail-bottom, padding-bottom 4px). The rail is shown only in Play mode,
     where it has no Play button any more (GameTab landscapeLsModeRail), so
     the panel buttons are all it holds. Was: panel buttons at the top and
     Play at the bottom, as in the panel tabs. */
  justify-content: flex-end;
  padding-bottom: 4px;
  gap: 6px;
  z-index: 28;
  pointer-events: none;
}
.react-gametab-landscape-ls-rail-top,
.react-gametab-landscape-ls-rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.react-gametab-landscape-ls-rail-bottom {
  margin-top: auto;
}
.react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-tip-target,
.react-gametab-landscape-ls-rail .react-gametab-toolbar-tip-target {
  pointer-events: auto;
}
.react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn,
.react-gametab-landscape-ls-rail .react-gametab-toolbar-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(23, 34, 46, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #16202b;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn:hover:not(:disabled),
.react-gametab-landscape-ls-rail .react-gametab-toolbar-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(23, 34, 46, 0.28);
}
.react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn:disabled,
.react-gametab-landscape-ls-rail .react-gametab-toolbar-btn:disabled {
  opacity: 0.42;
  color: rgba(22, 32, 43, 0.62);
}
.react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn.is-active,
.react-gametab-landscape-ls-rail .react-gametab-toolbar-btn.is-active,
.react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn.is-active {
  background: var(--primary-color);
  border-color: var(--selection-border-blue, #4a7bd9);
  color: #fff;
}

.react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn.is-active:hover:not(:disabled),
.react-gametab-landscape-ls-rail .react-gametab-toolbar-btn.is-active:hover:not(:disabled),
.react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn.is-active:hover:not(:disabled) {
  background: var(--primary-color);
  border-color: var(--selection-border-blue, #4a7bd9);
}
.react-gametab-landscape-ls-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-right: none;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, rgba(28, 34, 42, 0.92), rgba(18, 22, 28, 0.92));
  color: #fff;
  box-shadow: -10px 0 24px rgba(0, 0, 0, 0.24);
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.react-gametab-landscape-ls-overlay-toolbar {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 4px);
  top: calc(env(safe-area-inset-top, 0px) + 46px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 31;
  pointer-events: auto;
}
.react-gametab-landscape-ls-quick-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.react-gametab-landscape-ls-mode-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(23, 34, 46, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #16202b;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(23, 34, 46, 0.28);
}
.react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn:disabled {
  opacity: 0.42;
  color: rgba(22, 32, 43, 0.62);
}
.react-gametab-landscape-ls-quick-top .react-gametab-toolbar-btn {
  position: relative;
}

.react-gametab-landscape-ls-quick-top .react-gametab-toolbar-btn.react-gametab-toolbar-btn-close {
  border-color: rgba(255, 255, 255, 0.22);
  background: #c83a3a;
  color: #fff;
}

.react-gametab-landscape-ls-quick-top .react-gametab-toolbar-btn.react-gametab-toolbar-btn-close:hover:not(:disabled) {
  background: #df4a4a;
  border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .react-gametab-landscape-ls-quick-top .react-gametab-toolbar-btn.react-gametab-toolbar-btn-close {
  border-color: rgba(255, 255, 255, 0.22);
  background: #c83a3a;
  color: #fff;
}

[data-theme="dark"] .react-gametab-landscape-ls-quick-top .react-gametab-toolbar-btn.react-gametab-toolbar-btn-close:hover:not(:disabled) {
  background: #df4a4a;
  border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn,
[data-theme="dark"] .react-gametab-landscape-ls-rail .react-gametab-toolbar-btn,
[data-theme="dark"] .react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(24, 30, 38, 0.92);
  color: #e6edf5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn:hover:not(:disabled),
[data-theme="dark"] .react-gametab-landscape-ls-rail .react-gametab-toolbar-btn:hover:not(:disabled),
[data-theme="dark"] .react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn:hover:not(:disabled) {
  background: rgba(33, 41, 52, 0.98);
  border-color: rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] .react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn.is-active:hover:not(:disabled),
[data-theme="dark"] .react-gametab-landscape-ls-rail .react-gametab-toolbar-btn.is-active:hover:not(:disabled),
[data-theme="dark"] .react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn.is-active:hover:not(:disabled) {
  background: var(--primary-color);
  border-color: var(--selection-border-blue, #4a7bd9);
  color: #fff;
}

[data-theme="dark"] .react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn:disabled,
[data-theme="dark"] .react-gametab-landscape-ls-rail .react-gametab-toolbar-btn:disabled,
[data-theme="dark"] .react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn:disabled {
  color: rgba(230, 237, 245, 0.62);
}
[data-theme="dark"] .react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn.is-active,
[data-theme="dark"] .react-gametab-landscape-ls-rail .react-gametab-toolbar-btn.is-active,
[data-theme="dark"] .react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn.is-active {
  background: var(--primary-color);
  border-color: var(--selection-border-blue, #4a7bd9);
  color: #fff;
}

.react-gametab-landscape-ls-toggle:hover {
  background: linear-gradient(180deg, rgba(42, 49, 60, 0.95), rgba(24, 30, 38, 0.95));
}
.react-gametab-landscape-ls-backdrop {
  position: fixed;
  inset: 0 0 0 calc(env(safe-area-inset-left, 0px) + var(--ls-left-reserve-px, 40px));
  border: none;
  padding: 0;
  background: rgba(10, 14, 18, 0.28);
  z-index: 29;
  cursor: default;
}

.react-gametab-landscape-ls-switch-dock {
  position: relative;
  flex: 0 0 var(--ls-switch-panel-width-px, 0px);
  width: var(--ls-switch-panel-width-px, 0px);
  height: calc(100% - var(--ls-pill-offset-px, 0px));
  margin-top: var(--ls-pill-offset-px, 0px);
  z-index: 26;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.react-gametab-landscape-ls-switch-panel {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  background: var(--secondary-bg);
  border-left: 1px solid var(--border-color);
  box-shadow: none;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.react-gametab-landscape-ls-switch-toolbar {
  flex: 0 0 auto;
  width: 100%;
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  background: var(--secondary-bg);
  padding: 6px 4px 0;
}
.react-gametab-landscape-ls-switch-panel > .react-gametab-info-box,
.react-gametab-landscape-ls-switch-panel > .react-gametab-switch-empty-placeholder {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.react-gametab-root.is-landscape-ls .react-gametab-info-box {
  padding: 5px;
}

.react-gametab-board-pane {
  flex: 2 1 0;
  min-width: 380px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.react-gametab-side-pane {
  flex: 1 1 0;
  min-width: 240px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.react-gametab-side-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.react-gametab-side-pane.is-expanded .react-gametab-side-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: max(360px, 60vw);
  max-width: calc(100vw - 16px);
  background: var(--bg-white);
  border-left: 1px solid var(--border-color);
  border-radius: 10px 0 0 10px;
  box-shadow: -8px 0 24px var(--shadow-color);
  padding: 8px;
  z-index: 5;
}

.react-gametab-side-toggle {
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  width: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%),
    rgba(20, 25, 32, 0.35);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  box-shadow:
    -10px 0 24px rgba(0, 0, 0, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease, opacity 200ms ease;
  z-index: 6;
}

.react-gametab-side-toggle:hover {
  color: #fff;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%),
    rgba(30, 38, 48, 0.55);
}

.react-gametab-side-toggle:focus-visible {
  outline: 2px solid var(--primary-color, #2a9d8f);
  outline-offset: 2px;
}

.react-gametab-side-spacer {
  flex: 1 1 auto;
  min-height: 0;
}

.react-gametab-side-scroll {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.react-gametab-notice-panel {
  flex: 0 0 auto;
}

.react-gametab-portrait-bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.react-gametab-portrait-bottom-area {
  flex: 0 1 auto;
  min-height: 150px;
  max-height: 40%;
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-moves-panel {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-moves-panel,
.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-split-area > .react-gametab-info-box.react-gametab-moves-panel,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-split-area > .react-gametab-info-box.react-gametab-moves-panel {
  flex: 0 0 auto;
  width: fit-content;
  min-width: 180px;
  max-width: none;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-moves-panel .gamelog-review-panel,
.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-split-area > .react-gametab-info-box.react-gametab-moves-panel .gamelog-review-panel,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-split-area > .react-gametab-info-box.react-gametab-moves-panel .gamelog-review-panel {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-moves-panel .gamelog-review-scroll,
.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-split-area > .react-gametab-info-box.react-gametab-moves-panel .gamelog-review-scroll,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-split-area > .react-gametab-info-box.react-gametab-moves-panel .gamelog-review-scroll {
  flex: 1 1 auto;
  width: max-content;
  min-width: max-content;
  max-width: none;
  min-height: 0;
  container-type: normal;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-moves-panel.is-portrait-expanded {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-chats-panel,
.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-analysis-panel,
.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-info-box.react-gametab-scoreboard-panel,
.react-gametab-root.layout-portrait .react-gametab-portrait-bottom-area > .react-gametab-panel-frame {
  flex: 1 1 0;
  min-width: 0;
}
.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  gap: 8px;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split:not(.is-portrait-ls) {
  flex-direction: row;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split:not(.is-portrait-ls) > .react-gametab-portrait-switch-main {
  flex: 0 0 calc(60% - 4px);
  min-width: 0;
  min-height: 0;
  display: flex;
}
.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split > .react-gametab-portrait-switch-main > .react-gametab-info-box,
.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split > .react-gametab-portrait-switch-main > .react-gametab-switch-empty-placeholder,
.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split > .react-gametab-portrait-switch-main > .react-gametab-panel-frame {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split:not(.is-portrait-ls) > .react-gametab-portrait-switch-pinned {
  flex: 0 0 calc(40% - 4px);
  min-width: 0;
  min-height: 0;
  display: flex;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-switch-column.is-pinned-chat-split:not(.is-portrait-ls) > .react-gametab-portrait-switch-pinned > .react-gametab-pinned-chat-panel {
  flex: 1 1 auto !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.react-gametab-portrait-ls-pinned-chat-row {
  flex: 0 0 auto;
  width: 100%;
}

.react-gametab-root.layout-portrait .react-gametab-portrait-ls-pinned-chat-row > .react-gametab-pinned-chat-panel {
  width: 100%;
  max-width: none;
  height: var(--gt-portrait-below-pinned-chat-height-px, 100px);
  min-height: var(--gt-portrait-below-pinned-chat-height-px, 100px);
  max-height: var(--gt-portrait-below-pinned-chat-height-px, 100px);
}

.react-gametab-root.layout-portrait .react-gametab-board-pane {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.react-gametab-temp-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.react-gametab-square-mid,
.react-gametab-square-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.react-gametab-root.layout-small-size .react-gametab-square-switch {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.react-gametab-root.is-mobile.layout-small-size.is-chat-keyboard-mode .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-small-size.is-chat-keyboard-mode .react-gametab-square-footer,
.react-gametab-root.is-mobile.layout-small-size.is-setup-keyboard-mode .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-small-size.is-setup-keyboard-mode .react-gametab-square-footer {
  display: none;
}

.react-gametab-root.is-mobile.layout-small-size.is-chat-keyboard-mode .react-gametab-square-mid,
.react-gametab-root.is-mobile.layout-small-size.is-setup-keyboard-mode .react-gametab-square-mid {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.react-gametab-root.is-mobile.layout-small-size.is-chat-keyboard-mode .react-gametab-small-overlay,
.react-gametab-root.is-mobile.layout-small-size.is-setup-keyboard-mode .react-gametab-small-overlay {
  top: 8px;
  bottom: 8px;
  height: auto;
}

.react-gametab-root.is-mobile.layout-small-size.is-chat-keyboard-mode .react-gametab-square-switch > .react-gametab-info-box,
.react-gametab-root.is-mobile.layout-small-size.is-setup-keyboard-mode .react-gametab-square-switch > .react-gametab-info-box,
.react-gametab-root.is-mobile.layout-small-size.is-chat-keyboard-mode .react-gametab-square-switch > .react-gametab-panel-frame,
.react-gametab-root.is-mobile.layout-small-size.is-setup-keyboard-mode .react-gametab-square-switch > .react-gametab-panel-frame {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 8px;
}

.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-landscape-lm-floating-stack,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-landscape-lm-floating-stack {
  display: none;
}

/*
 * On smartphone landscape keyboard modes, hide the board pane and all LS
 * landscape chrome (rails, overlay toolbar, mode rail, stage wrapper) so the
 * user sees only the chat/setup panel above the keyboard — matching the
 * portrait keyboard-mode behavior.
 *
 * These rules rely on class-based specificity to beat the base
 * `.react-gametab-board-pane` and `.react-gametab-landscape-ls-stage`
 * rules. GameTab intentionally omits `display` from the inline
 * `landscapeBoardStyle` / `landscapeLsStageStyle` objects so class rules
 * remain authoritative — do not re-add inline `display` there.
 */
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-landscape-ls-stage,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-landscape-ls-stage {
  display: none;
}

.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-landscape-ls-rail,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-landscape-ls-rail,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-landscape-ls-mode-rail,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-landscape-ls-mode-rail,
/* Changed: also the panel switcher's tabs (they replaced the overlay toolbar) */
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-panel-tabs,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-panel-tabs,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-landscape-ls-overlay-toolbar,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-landscape-ls-overlay-toolbar {
  display: none;
}

/*
 * The side-pane in landscape keyboard mode must contain only the chat/setup
 * scroll area. Hide the mode-switcher toolbar row, any pinned-chat companion
 * row, notice panel and toolbar stack that would otherwise share vertical
 * space with the chat panel and either overlay its content or shrink it
 * below the visible area above the keyboard.
 */
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-side-pane > .react-gametab-side-inner > .react-gametab-toolbar-wrap,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-side-pane > .react-gametab-side-inner > .react-gametab-toolbar-wrap,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-side-pane .react-gametab-notice-panel,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-side-pane .react-gametab-notice-panel,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-side-pane .react-gametab-below-toolbar-pinned-chat,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-side-pane .react-gametab-below-toolbar-pinned-chat,
.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-side-pane .react-gametab-side-toggle,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-side-pane .react-gametab-side-toggle {
  display: none;
}

.react-gametab-root.is-mobile.layout-landscape.is-chat-keyboard-mode .react-gametab-side-pane,
.react-gametab-root.is-mobile.layout-landscape.is-setup-keyboard-mode .react-gametab-side-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.react-gametab-root.is-mobile.layout-landscape.is-pinned-chat-keyboard-mode .react-gametab-below-toolbar-pinned-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.react-gametab-root.is-mobile.layout-landscape.is-pinned-chat-keyboard-mode .react-gametab-below-toolbar-pinned-chat > .react-gametab-pinned-chat-panel {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.react-gametab-root.is-landscape-ls .react-gametab-board-pane {
  justify-content: flex-start;
}
.react-gametab-root.is-landscape-ls .react-gametab-board-pane::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--primary-start);
  pointer-events: none;
  z-index: 2;
}

.react-gametab-root.layout-small-size .react-gametab-square-switch > .react-gametab-info-box,
.react-gametab-root.layout-small-size .react-gametab-square-switch > .react-gametab-panel-frame {
  flex: 1 1 0;
  min-height: 0;
}

.react-gametab-root.layout-small-size .react-gametab-info-box {
  padding: 5px;
}

.react-gametab-root.layout-small-size .react-gametab-board-pane {
  flex: 0 0 auto;
  aspect-ratio: var(--gt-board-aspect-ratio, 1.415);
  width: 100%;
  min-height: 330px;
}

.react-gametab-root.layout-landscape .react-gametab-board-pane {
  flex: 0 1 auto;
  width: auto;
  height: 100%;
  min-width: 0;
  max-width: calc(100% - max(25%, 240px) - 10px);
}

.react-gametab-root.layout-landscape .react-gametab-side-pane {
  min-height: 370px;
  min-width: max(25%, 240px);
}

.react-gametab-root.is-landscape-ls.layout-landscape .react-gametab-side-pane {
  min-height: 0;
}

.react-gametab-root.is-landscape-ls.layout-landscape .react-gametab-board-pane {
  max-width: 100%;
}

.react-gametab-root.is-landscape-nonls-play.layout-landscape .react-gametab-board-pane {
  max-width: 100%;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-switch-only-pane {
  flex: 1 1 0;
  min-width: 0;
  min-height: 370px;
}

.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-switch-only-pane {
  flex: 1 1 0;
  min-width: 0;
  min-height: 370px;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-side-pane-xlxxl-combined .react-gametab-side-inner,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-side-pane-xlxxl-combined .react-gametab-side-inner {
  gap: 8px;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-split-area,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-split-area {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow: hidden;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-switch-column,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-switch-column {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-switch-column.is-pinned-chat-split,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-switch-column.is-pinned-chat-split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-switch-column.is-pinned-chat-split > .react-gametab-xlxxl-switch-top,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-switch-column.is-pinned-chat-split > .react-gametab-xlxxl-switch-top {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-switch-column.is-pinned-chat-split > .react-gametab-xlxxl-switch-bottom,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-switch-column.is-pinned-chat-split > .react-gametab-xlxxl-switch-bottom {
  flex: 0 0 var(--gt-landscape-pinned-chat-height-px, 100px);
  min-height: 0;
  display: flex;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-xlxxl-switch-column.is-pinned-chat-split > .react-gametab-xlxxl-switch-bottom > .react-gametab-pinned-chat-panel,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-xlxxl-switch-column.is-pinned-chat-split > .react-gametab-xlxxl-switch-bottom > .react-gametab-pinned-chat-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-board-pane,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-board-pane {
  max-width: none;
  flex-shrink: 0;
}

/* Mobile should adapt to viewport without hard min-size floors that force page scroll. */
.react-gametab-root.is-mobile.layout-landscape .react-gametab-side-pane,
.react-gametab-root.is-mobile.layout-landscape.landscape-xl .react-gametab-switch-only-pane,
.react-gametab-root.is-mobile.layout-landscape.landscape-xxl .react-gametab-switch-only-pane,
.react-gametab-root.is-mobile.layout-landscape .react-gametab-toolbar {
  min-height: 0;
}

.react-gametab-root.is-mobile.layout-portrait,
.react-gametab-root.is-mobile.layout-small-size,
.react-gametab-root.is-mobile.layout-portrait .react-gametab-toolbar,
.react-gametab-root.is-mobile.layout-small-size .react-gametab-toolbar,
.react-gametab-root.is-mobile.layout-portrait .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-small-size .react-gametab-board-pane,
.react-gametab-root.is-mobile.layout-portrait .react-gametab-side-pane,
.react-gametab-root.is-mobile.layout-small-size .react-gametab-side-pane {
  min-width: 0;
}

.react-gametab-switch-empty-placeholder {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 12px;
  user-select: none;
}

[data-theme="dark"] .react-gametab-switch-empty-placeholder {
  color: #f2f4f7;
}

.react-gametab-root.layout-landscape.landscape-xl .react-gametab-board-pane,
.react-gametab-root.layout-landscape.landscape-xxl .react-gametab-board-pane {
  min-width: 0;
  max-width: none;
}

.react-gametab-root.is-landscape-ls.layout-landscape.landscape-xl .react-gametab-board-pane,
.react-gametab-root.is-landscape-ls.layout-landscape.landscape-xxl .react-gametab-board-pane {
  max-width: 100%;
}

.react-gametab-square-footer {
  position: relative;
  z-index: 2;
  background: var(--secondary-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  gap: 0;
}

.react-gametab-small-overlay {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 48px;
  height: 70%;
  z-index: 7;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-white);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px;
}

/* Added: while the popup is shown (GameTab smallPanelPopupShown), the toolbar
   moves into the bottom strip the popup and its dismiss area leave open
   (their bottom: 48px), above both, so its panel buttons switch or close the
   popup. The footer and the popup are both placed against the root (the
   content wrapper between them is display: contents). The board keeps its
   size: its height is set in px, not taken from the space left. */
.react-gametab-root.is-small-popup .react-gametab-square-footer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 48px;
  justify-content: center;
  padding-bottom: 0;
  z-index: 8;
}

.react-gametab-small-overlay-dismiss {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 6;
}

.react-gametab-small-overlay > .react-gametab-info-box {
  flex: 1 1 0;
  min-height: 0;
}

.gametab-canvas-host {
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-white);
  position: relative;
}

.react-gametab-button-bar .btn {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Board controls (Roll / Double / Undo / Confirm / Take / Drop ...) take their
   colour from the board theme: --board-control-bg / --board-control-fg are
   derived from the theme colours in canvas.js applyColorPreferences(). This
   replaces the fixed app accent (btn-primary) and grey for these buttons. The
   selector is specific enough to win over .btn-primary and its :disabled
   state. Disabled buttons are shown faded rather than switched to grey; the
   fade uses color-mix() because the button's inline opacity is fixed. */
.react-gametab-button-bar .btn.board-control,
.react-gametab-game-overlay .btn.board-control,
.btn.btn-primary.board-control,
.primary-button.board-control {
  /* second and third selectors: primary buttons of the game tab's dialogs,
     which render outside the button bar -- Delegate Cube and Manual Dice
     Entry use .btn.btn-primary, the cube/confirmation ConfirmDialog uses
     .primary-button (style.css, app --primary-color) */
  background: var(--board-control-bg, #555555);
  color: var(--board-control-fg, #ffffff);
}

/* Hover: replaces the site-wide .btn-primary hover shadow (app teal via
   --shadow-hover) with a slight brightening and a soft shadow in the button's
   own theme colour, for primary and secondary board buttons alike. */
.react-gametab-button-bar .btn.board-control:hover:not(:disabled),
.react-gametab-game-overlay .btn.board-control:hover:not(:disabled),
.btn.btn-primary.board-control:hover:not(:disabled),
.primary-button.board-control:hover:not(:disabled) {
  background: var(--board-control-bg, #555555);
  filter: brightness(1.12);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--board-control-bg, #555555) 55%, transparent);
}

.react-gametab-button-bar .btn.board-control:disabled,
.react-gametab-game-overlay .btn.board-control:disabled,
.btn.btn-primary.board-control:disabled,
.primary-button.board-control:disabled {
  background: color-mix(in srgb, var(--board-control-bg, #555555) 45%, transparent);
  color: color-mix(in srgb, var(--board-control-fg, #ffffff) 60%, transparent);
  cursor: not-allowed;
}

/* One accent button per layout: the default choice -- the btn-primary
   button that Space / Enter triggers -- takes the board theme colour
   (--board-control-bg, see canvas.js applyColorPreferences); every other
   button stays the plain grey. This replaces the app teal for the default
   choice while keeping the rule that only one button stands out.
   - Board button bar and the before/after-game overlay card: non-primary
     buttons go back to the browser's default button grey (revert), which
     the board-control rules had replaced with the theme colour.
   - Dialogs in the game tab (cube dialog, confirmations, Resign, Stake,
     Confirm anyway, decision dialogs, ...): their primary button takes the
     theme colour; Cancel and other secondary buttons keep their grey. */
.react-gametab-root .react-gametab-button-bar .btn.board-control:not(.btn-primary),
.react-gametab-root .react-gametab-game-overlay .btn.board-control:not(.btn-primary) {
  background: revert;
  color: revert;
}

.react-gametab-root .react-gametab-button-bar .btn.board-control:not(.btn-primary):hover:not(:disabled),
.react-gametab-root .react-gametab-game-overlay .btn.board-control:not(.btn-primary):hover:not(:disabled) {
  background: revert;
  filter: brightness(1.08);
  box-shadow: none;
}

.react-gametab-root .modal-content .btn.btn-primary,
.react-gametab-root .modal-content .primary-button {
  background: var(--board-control-bg, var(--primary-color));
  color: var(--board-control-fg, #ffffff);
}

.react-gametab-root .modal-content .btn.btn-primary:hover:not(:disabled),
.react-gametab-root .modal-content .primary-button:hover:not(:disabled) {
  background: var(--board-control-bg, var(--primary-color));
  filter: brightness(1.12);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--board-control-bg, #555555) 55%, transparent);
}

.react-gametab-root .modal-content .btn.btn-primary:disabled,
.react-gametab-root .modal-content .primary-button:disabled {
  background: color-mix(in srgb, var(--board-control-bg, #555555) 45%, transparent);
  color: color-mix(in srgb, var(--board-control-fg, #ffffff) 60%, transparent);
}

.react-gametab-info-box {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-white);
  padding: 8px;
  font-size: var(--gt-panel-base-font-size, 13px);
}

.react-gametab-info-box.react-gametab-notice-panel {
  flex: 0 0 auto;
}

.react-gametab-info-box.react-gametab-moves-panel,
.react-gametab-info-box.react-gametab-chats-panel,
.react-gametab-info-box.react-gametab-analysis-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.react-gametab-analysis-panel > :last-child {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.react-gametab-analysis-panel > .react-gametab-info-box.react-gametab-analysis-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.react-gametab-scoreboard-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.react-gametab-scoreboard-panel.react-gametab-setup-position-panel {
  overflow-y: auto;
}

.react-gametab-info-graphic {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 10px 6px 6px;
}

.react-gametab-info-graphic.is-landscape {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.1fr) minmax(0, 1fr);
  grid-template-areas: 'top center bottom';
}

.react-gametab-info-graphic.is-landscape.is-landscape-wrap-center {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    'top bottom'
    'center center';
  align-content: center;
}

.react-gametab-info-graphic.is-portrait {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'top'
    'center'
    'bottom';
}

.react-gametab-info-side {
  min-width: 0;
}

.react-gametab-info-side.is-top {
  grid-area: top;
}

.react-gametab-info-side.is-bottom {
  grid-area: bottom;
}

.react-gametab-info-player {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.react-gametab-info-pr-value-stack {
  align-items: flex-end;
}

.react-gametab-info-player.is-top,
.react-gametab-info-player.is-bottom {
  max-width: 100%;
}

.react-gametab-info-avatar-btn {
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.react-gametab-info-avatar {
  width: clamp(44px, 6.2vw, 60px);
  height: clamp(44px, 6.2vw, 60px);
  font-size: 18px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.react-gametab-info-pr-stack {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  font-size: 12px;
  min-height: clamp(44px, 6.2vw, 60px);
}

.react-gametab-info-pr-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.react-gametab-info-pr-row span {
  color: var(--text-secondary);
}

.react-gametab-info-pr-row strong {
  color: var(--text-primary);
  font-weight: 700;
}

.react-gametab-info-pr-icon-stack {
  /* Sized to comfortably fit the longer "gPR" label at bold weight on
     mobile viewports. Previously derived from `vw` with a 6px font floor,
     which clipped on narrow screens. */
  --gt-info-pr-icon-font-size: clamp(9px, 1.1vw, 10px);
  --gt-info-pr-icon-size: clamp(24px, 3.2vw, 28px);
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: clamp(44px, 6.2vw, 60px);
  width: var(--gt-info-pr-icon-size);
  margin: 0 4px;
}

.react-gametab-info-pr-icon {
  display: inline-block;
  width: var(--gt-info-pr-icon-size);
  height: var(--gt-info-pr-icon-size);
  line-height: var(--gt-info-pr-icon-size);
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--gt-info-pr-icon-font-size);
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
  /* Prevent Chrome for Android from inflating this small label (Text
     Autosizer) which caused the text to render several sizes larger than
     the CSS-declared value and overflow the circle to the right. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.react-gametab-info-pr-icon.is-overall {
  background: var(--text-secondary);
  color: #ffffff;
  opacity: 0.95;
}

.react-gametab-info-pr-icon.is-game {
  /* Use inset box-shadow instead of `border` so the outlined circle keeps
     the same interior width as the filled one — otherwise the 1.5px border
     shrinks the usable text area and clips "gPR" on mobile. */
  background: transparent;
  color: var(--text-secondary);
  opacity: 0.95;
  box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}

.react-gametab-info-pr-value-stack .react-gametab-info-pr-row,
.react-gametab-info-pr-value-stack .react-gametab-info-pr-row strong {
  text-align: right;
}

.react-gametab-info-graphic.is-landscape .react-gametab-info-player.is-bottom .react-gametab-info-pr-value-stack {
  align-items: flex-start;
}

.react-gametab-info-graphic.is-landscape .react-gametab-info-player.is-bottom .react-gametab-info-pr-value-stack .react-gametab-info-pr-row,
.react-gametab-info-graphic.is-landscape .react-gametab-info-player.is-bottom .react-gametab-info-pr-value-stack .react-gametab-info-pr-row strong {
  text-align: left;
}

.react-gametab-info-graphic.is-portrait .react-gametab-info-pr-value-stack {
  align-items: flex-start;
}

.react-gametab-info-graphic.is-portrait .react-gametab-info-pr-value-stack .react-gametab-info-pr-row,
.react-gametab-info-graphic.is-portrait .react-gametab-info-pr-value-stack .react-gametab-info-pr-row strong {
  text-align: left;
}

.react-gametab-info-center {
  grid-area: center;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  text-align: center;
}

.react-gametab-info-center-title {
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.react-gametab-info-center-text {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.react-gametab-info-center .gamelog-row {
  width: 100%;
  max-width: 100%;
}

.react-gametab-info-center .gamelog-row-number.is-placeholder {
  display: none;
}

.react-gametab-info-center-entry {
  width: 100%;
}

.react-gametab-info-center-summary {
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  text-align: left;
}

.react-gametab-info-center-summary.move-clickable {
  cursor: pointer;
}

.react-gametab-info-center-summary.move-clickable:hover {
  background: var(--app-hover-fill);
  outline: 1px solid var(--border-color);
}

.react-gametab-info-observing {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}

.react-gametab-info-graphic.is-landscape .react-gametab-info-side.is-top {
  justify-self: start;
}

.react-gametab-info-graphic.is-landscape .react-gametab-info-side.is-bottom {
  justify-self: end;
}

.react-gametab-info-graphic.is-landscape.is-landscape-wrap-center .react-gametab-info-side.is-bottom {
  justify-self: start;
}

.react-gametab-info-graphic.is-landscape.is-landscape-wrap-center .react-gametab-info-center {
  width: 100%;
}

.react-gametab-info-graphic.is-landscape .react-gametab-info-player.is-bottom {
  flex-direction: row-reverse;
}

.react-gametab-info-graphic.is-portrait .react-gametab-info-side {
  justify-self: stretch;
}

.react-gametab-info-graphic.is-portrait .react-gametab-info-player {
  flex-direction: row;
  align-items: center;
}

.react-gametab-info-graphic.is-portrait .react-gametab-info-player.is-bottom {
  flex-direction: row;
}

.react-gametab-info-graphic.is-portrait .react-gametab-info-center {
  align-items: flex-start;
  text-align: left;
}

.sb-empty {
  color: var(--text-secondary);
  padding: 10px;
}

.sb-panel-content {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}

.sb-scroll {
  /* Intentional: keep scroll ownership on the panel container, not the table. */
  flex: 1 1 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.sb-table {
  /* Intentional: intrinsic table width with panel-bounded horizontal scroll. */
  width: max-content;
  min-width: min(100%, clamp(420px, 62%, 560px));
  border-collapse: collapse;
}

/* In the embedded analysis game-log view, keep tallies at natural width
   instead of stretching to the panel width. */
.analysis-panel .gamelog-tallies {
  width: max-content;
  max-width: 100%;
}

.analysis-panel .gamelog-tallies .sb-table {
  min-width: 0;
}

/* Tallies are rendered inside .gamelog-review-panel; apply the same
   intrinsic-width behavior there as well. */
.gamelog-tallies {
  width: max-content;
  max-width: 100%;
}

.gamelog-tallies .sb-table {
  min-width: 0;
}

/* Size the review game log to the turn table, not the (wider) tally table.
   The tally must not drive the panel's intrinsic width, so it contributes 0
   and then fills the resolved turn-table width, scrolling horizontally when
   its columns need more room than the turns. */
.gamelog-review-panel .gamelog-tallies {
  width: 0;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.sb-table th,
.sb-table td {
  white-space: nowrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.sb-table th.sb-head-num,
.sb-table td.sb-cell-num {
  text-align: right;
}

/* Render selected-row outline via inset shadows so all four edges share the
   same rounded-corner appearance under collapsed table borders. */
.sb-table tbody tr.sb-selectable-row.is-selected td {
  border-top-color: transparent;
  border-bottom-color: transparent;
  box-shadow: inset 0 1px var(--primary-color, #4a7bd9), inset 0 -1px var(--primary-color, #4a7bd9);
}

.sb-table tbody tr.sb-selectable-row.is-selected td:first-child {
  border-left-color: transparent;
  box-shadow: inset 1px 0 var(--primary-color, #4a7bd9), inset 0 1px var(--primary-color, #4a7bd9), inset 0 -1px var(--primary-color, #4a7bd9);
}

.sb-table tbody tr.sb-selectable-row.is-selected td:last-child {
  border-right-color: transparent;
  box-shadow: inset -1px 0 var(--primary-color, #4a7bd9), inset 0 1px var(--primary-color, #4a7bd9), inset 0 -1px var(--primary-color, #4a7bd9);
}

.sb-table thead th {
  /* Intentional: only sticky behavior here; typography stays in base stylesheet. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-white);
}

.standings-img {
  height: 1em;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
}

[data-theme="dark"] .standings-img-no-invert {
  filter: none;
}

[data-theme="dark"] .standings-img:not(.standings-img-no-invert) {
  filter: invert(1);
}

.semi-transparent {
  opacity: 0.4;
}

/* CSS for React GameCanvas board and canvas SVG/canvas elements */
.board {
  box-sizing: border-box;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.canvas {
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.react-gametab-chats-panel .recent-chats {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

.react-gametab-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.react-gametab-analysis-switch {
  display: inline-flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

/* Keep a visible separation between Moves/Cube tabs on phones, but allow
   it to collapse when horizontal room is extremely tight. */
.react-gametab-analysis-switch > .react-gametab-analysis-switch-btn + .react-gametab-analysis-switch-btn {
  margin-left: clamp(1px, 0.8vw, 3px);
}

.react-gametab-analysis-switch-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.react-gametab-analysis-switch-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.react-gametab-analysis-switch-left > .react-gametab-analysis-switch {
  flex: 0 0 auto;
}

.react-gametab-analysis-switch-left > button:first-child {
  white-space: nowrap;
  flex: 0 0 auto;
}

.react-gametab-analysis-switch-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}

.react-gametab-analysis-switch-group .react-gametab-analysis-switch {
  margin-left: 0;
}

.react-gametab-analysis-gamelog-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--text-secondary, var(--text-primary));
}

.react-gametab-analysis-gamelog-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

.react-gametab-analysis-switch-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.85em;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
  line-height: 1.4;
}

.react-gametab-analysis-switch .react-gametab-analysis-switch-btn:not(.is-active) {
  background: var(--bg-white);
  border-color: var(--border-color);
  color: var(--text-secondary, var(--text-primary));
}

.react-gametab-analysis-switch-btn.is-active {
  background: var(--gametab-accent, #3a7bd5);
  border-color: var(--selection-border-blue, #4a7bd9);
  color: #fff;
}

.react-gametab-analysis-switch-btn.is-active:hover,
.react-gametab-analysis-switch-btn.is-active:focus-visible {
  border-color: var(--selection-border-blue, #4a7bd9);
}

.react-gametab-analysis-switch-btn:hover:not(.is-active) {
  background: var(--app-hover-fill);
}

.react-gametab-analysis-switch-btn.react-gametab-analysis-nav-btn {
  min-width: 22px;
  height: 22px;
  line-height: 20px;
  padding: 0;
  font-size: 10px;
}

.react-gametab-analysis-switch-btn.react-gametab-analysis-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Keep the game selector pill visibly tab-like in both light/dark themes.
   This must come after the generic switch button rule to win the cascade. */
.react-gametab-analysis-switch-btn.react-gametab-analysis-gamelog-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--text-secondary, var(--text-primary));
  padding-left: 5px;
  padding-right: 5px;
}

.react-gametab-analysis-switch-btn.react-gametab-analysis-gamelog-btn.is-active {
  background: var(--gametab-accent, #3a7bd5);
  border-color: var(--selection-border-blue, #4a7bd9);
  box-shadow: none;
  color: #fff;
}

.react-gametab-analysis-switch-btn.react-gametab-analysis-gamelog-btn.is-active:hover,
.react-gametab-analysis-switch-btn.react-gametab-analysis-gamelog-btn.is-active:focus-visible {
  border-color: var(--selection-border-blue, #4a7bd9);
}

/* Keep analysis header controls geometry identical across Game/Moves/Cube
   so toggling tabs does not shift x/y layout. */
.analysis-panel .react-gametab-analysis-switch-row,
.analysis-panel .react-gametab-analysis-switch-left {
  gap: 4px;
}

.analysis-panel .react-gametab-analysis-switch {
  border-radius: 8px;
  gap: 4px;
  /* No pill behind Moves/Cube: they sit on the panel background like the Log
     and Moves buttons beside them. */
  background: transparent;
}

/* Spacing between every header control comes from the row gap alone, so the
   prev/game/next/Log/Moves/Cube buttons sit evenly. */
.analysis-panel .react-gametab-analysis-switch > .react-gametab-analysis-switch-btn + .react-gametab-analysis-switch-btn {
  margin-left: 0;
}

.analysis-panel .react-gametab-analysis-switch-btn {
  min-height: 24px;
  line-height: 1.25;
  padding: 2px 6px;
}

.analysis-panel .react-gametab-analysis-switch-btn.react-gametab-analysis-gamelog-btn {
  padding-left: 2px;
  padding-right: 2px;
}

.analysis-panel .react-gametab-analysis-switch-btn.react-gametab-analysis-nav-btn {
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  padding: 0;
}

.analysis-panel .react-gametab-analysis-switch-btn.react-gametab-analysis-nav-btn.is-narrow {
  min-width: 14px;
  width: 14px;
}

.analysis-panel .react-gametab-analysis-layout-toggle {
  min-width: 24px;
  height: 24px;
  line-height: 22px;
  padding: 0 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The game switcher (◀ Game ▶, GameTab selectorOrLog). On its own line above
   the other controls when they do not all fit in one (is-game-switcher-own-line,
   measured in one line with react-gametab-measure-inline). */
.react-gametab-analysis-game-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.react-gametab-analysis-switch-row.is-game-switcher-own-line,
.react-gametab-analysis-switch-row.is-game-switcher-own-line .react-gametab-analysis-switch-left {
  flex-wrap: wrap;
  row-gap: 4px;
}

.react-gametab-analysis-switch-row.is-game-switcher-own-line .react-gametab-analysis-game-switcher {
  flex: 0 0 100%;
}

.react-gametab-analysis-switch-row.react-gametab-measure-inline,
.react-gametab-analysis-switch-row.react-gametab-measure-inline .react-gametab-analysis-switch-left {
  flex-wrap: nowrap;
}

.react-gametab-analysis-switch-row.react-gametab-measure-inline .react-gametab-analysis-game-switcher {
  flex: 0 0 auto;
}

.react-gametab-analysis-switch-row.react-gametab-measure-inline .react-gametab-analysis-switch-left > * {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .analysis-panel .react-gametab-analysis-switch-btn {
    min-height: 26px;
  }
}


.react-gametab-label {
  color: var(--text-light);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

.react-gametab-label:first-child {
  margin-top: 0;
}

.react-gametab-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.react-gametab-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.react-gametab-chat-pin-btn {
  appearance: none;
  border: 1px solid var(--border-color);
  background: var(--secondary-bg);
  color: var(--text-secondary, var(--text-primary));
  border-radius: 4px;
  min-width: 22px;
  height: 22px;
  line-height: 20px;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
}

.react-gametab-chat-pin-btn:hover {
  background: var(--app-hover-fill);
}

.react-gametab-chat-pin-btn.is-active {
  background: var(--gametab-accent, #3a7bd5);
  border-color: var(--selection-border-blue, #4a7bd9);
  color: #fff;
}

.react-gametab-info-box.react-gametab-chats-panel.react-gametab-pinned-chat-panel {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.react-gametab-info-box.react-gametab-chats-panel.react-gametab-pinned-chat-panel:not(.is-full-height) {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
}

.react-gametab-info-box.react-gametab-chats-panel.react-gametab-pinned-chat-panel.is-full-height {
  flex: 1 1 auto !important;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.react-gametab-pinned-chat-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.react-gametab-pinned-chat-rail {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.react-gametab-pinned-chat-panel .react-gametab-full-chats-list {
  min-width: 0;
}

.react-gametab-pinned-chat-panel .react-gametab-full-chats-form {
  margin-top: auto;
  padding-top: 4px;
  flex-wrap: nowrap;
}

@container (max-width: 320px) {
  .react-gametab-chats-panel .react-gametab-full-chats-form {
    flex-wrap: wrap;
  }

  .react-gametab-chats-panel .react-gametab-full-chats-input {
    flex: 1 1 100%;
    width: auto;
  }

  .react-gametab-chats-panel .react-gametab-full-chats-send {
    margin-left: auto;
  }
}

.react-gametab-pinned-chat-panel .react-gametab-full-chats-input {
  flex: 1 1 0;
  width: 0;
}

.react-gametab-chats-panel .react-gametab-full-chats-input {
  min-width: 14ch;
}

.react-gametab-chats-panel.is-short-height .react-gametab-full-chats-input {
  min-width: 0;
}
.react-gametab-pinned-chat-panel.is-scroll-hidden .react-gametab-full-chats-list {
  display: none;
}
.react-gametab-full-chats-pinned-note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary, #6a6a6a);
}

.react-gametab-header-select-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.react-gametab-header-game-select {
  width: min(320px, 100%);
}

.react-gametab-expand-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.react-gametab-expand-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.react-gametab-value {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.react-gametab-mode-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.react-gametab-mode-btn {
  flex: 1 1 auto;
  min-width: 88px;
}

.react-gametab-toolbar {
  --gt-toolbar-gap: clamp(1px, 0.5vw, 4px);
  display: flex;
  align-items: center;
  gap: var(--gt-toolbar-gap);
  padding: 0;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow-x: visible;
  overflow-y: visible;
  width: 100%;
  min-width: 100%;
}

.react-gametab-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--gt-toolbar-gap);
}

.react-gametab-toolbar-group.is-right {
  margin-left: auto;
}

.react-gametab-toolbar-wrap {
  position: relative;
  min-width: 0;
  z-index: 40;
  padding-top: 8px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.react-gametab-toolbar-wrap.is-mode-switcher-wrap {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.react-gametab-toolbar-wrap.has-overflow.can-scroll-right::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 18px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to left, var(--secondary-bg), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.react-gametab-portrait-toolbar > .react-gametab-toolbar-wrap,
.react-gametab-square-footer > .react-gametab-toolbar-wrap {
  padding-top: 0;
}

.react-gametab-toolbar-wrap.react-gametab-toolbar-wrap-measure {
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 0;
  min-height: 0;
}

.react-gametab-toolbar-wrap.react-gametab-toolbar-wrap-measure .react-gametab-toolbar {
  min-width: 0 !important;
  width: max-content !important;
  max-width: none !important;
}

.react-gametab-toolbar.is-compact {
  gap: 2px;
  padding: 4px 3px;
}

.react-gametab-root.layout-landscape .react-gametab-toolbar {
  height: auto;
  min-height: var(--gt-landscape-toolbar-height-px, 32px);
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-toolbar-row {
  /* Intentional: row is non-interactive; toolbar wrapper below receives pointer events. */
  position: absolute;
  left: calc(var(--lm-board-left-px, 0px) + (var(--lm-board-width-px, 0px) / 2));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gt-lm-toolbar-bottom-offset-px, 6px));
  transform: translateX(-50%);
  z-index: 42;
  width: min(calc(100% - 16px), var(--lm-board-width-px, 100%));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.react-gametab-root.layout-landscape.landscape-lm {
  --gt-panel-toolbar-gap-px: 8px;
  --gt-lm-toolbar-bottom-offset-px: 8px;
  --gt-lm-toolbar-row-height-px: 43px;
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-side-scroll {
  gap: var(--gt-panel-toolbar-gap-px, 8px);
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-floating-stack {
  position: absolute;
  left: calc(var(--lm-board-left-px, 0px) + (var(--lm-board-width-px, 0px) / 2));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gt-lm-toolbar-bottom-offset-px, 6px));
  transform: translateX(-50%);
  z-index: 42;
  width: min(calc(100% - 16px), var(--lm-board-width-px, 100%));
  display: flex;
  flex-direction: column;
  gap: var(--gt-panel-toolbar-gap-px, 8px);
  pointer-events: none;
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-floating-stack .react-gametab-landscape-lm-pinned-chat-row,
.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-floating-stack .react-gametab-landscape-lm-toolbar-row {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  margin: 0;
}

.react-gametab-landscape-lm-pinned-chat-row {
  position: absolute;
  left: calc(var(--lm-board-left-px, 0px) + (var(--lm-board-width-px, 0px) / 2));
  bottom: calc(
    env(safe-area-inset-bottom, 0px)
    + var(--gt-lm-toolbar-bottom-offset-px, 6px)
    + var(--gt-lm-toolbar-row-height-px, 52px)
    + var(--gt-panel-toolbar-gap-px, 8px)
  );
  transform: translateX(-50%);
  z-index: 41;
  width: min(calc(100% - 16px), var(--lm-board-width-px, 100%));
  pointer-events: none;
}

.react-gametab-landscape-lm-pinned-chat-inner {
  width: 100%;
  pointer-events: auto;
}

.react-gametab-root.layout-landscape.landscape-lm.is-lm-pinned-chat .react-gametab-landscape-lm-pinned-chat-row {
  position: absolute;
  left: calc(var(--lm-board-left-px, 0px) + (var(--lm-board-width-px, 0px) / 2));
  bottom: calc(
    env(safe-area-inset-bottom, 0px)
    + var(--gt-lm-toolbar-bottom-offset-px, 6px)
    + var(--gt-lm-toolbar-row-height-px, 52px)
    + var(--gt-panel-toolbar-gap-px, 8px)
  );
  transform: translateX(-50%);
  z-index: 41;
  width: min(calc(100% - 16px), var(--lm-board-width-px, 100%));
  margin: 0;
  pointer-events: none;
}

.react-gametab-root.layout-landscape.landscape-lm.is-lm-pinned-chat .react-gametab-landscape-lm-pinned-chat-row .react-gametab-pinned-chat-panel {
  height: var(--lm-pinned-chat-height-px, 100px);
  min-height: 100px;
  max-height: none;
}

.react-gametab-root.layout-landscape.landscape-lm.is-lm-pinned-chat .react-gametab-landscape-lm-toolbar-row {
  position: absolute;
  left: calc(var(--lm-board-left-px, 0px) + (var(--lm-board-width-px, 0px) / 2));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gt-lm-toolbar-bottom-offset-px, 6px));
  transform: translateX(-50%);
  z-index: 42;
  width: min(calc(100% - 16px), var(--lm-board-width-px, 100%));
  margin: 0;
  pointer-events: none;
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-toolbar-row .react-gametab-toolbar {
  min-width: 100%;
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-toolbar-row .react-gametab-toolbar-wrap {
  /* Intentional counterpart to row pointer-events:none. */
  width: max-content;
  min-width: 25%;
  pointer-events: auto;
}

/* The wrap above sizes to its content, so the flexible spacer between the
   mode-switch icons and the board icons (renderPermanentToolbarWithModeButtons)
   collapses to 0 and the two groups read as one. A fixed margin on the board
   group keeps them visibly apart; the spacer still adds to it when the 25%
   minimum width leaves room. */
.react-gametab-root.layout-landscape.landscape-lm .react-gametab-landscape-lm-toolbar-row .react-gametab-toolbar-group.is-right {
  margin-left: 16px;
}

.react-gametab-root.layout-landscape.landscape-lm.is-lm-pinned-chat .react-gametab-landscape-lm-floating-stack .react-gametab-landscape-lm-pinned-chat-row,
.react-gametab-root.layout-landscape.landscape-lm.is-lm-pinned-chat .react-gametab-landscape-lm-floating-stack .react-gametab-landscape-lm-toolbar-row {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  margin: 0;
}

.react-gametab-root.layout-landscape.landscape-lm .react-gametab-side-pane .react-gametab-toolbar-wrap {
  overflow: visible;
}

.react-gametab-root.layout-landscape .react-gametab-side-pane > .react-gametab-side-inner > .react-gametab-toolbar-wrap {
  padding-top: 0;
  overflow: visible;
}

.react-gametab-root.layout-landscape .react-gametab-side-pane > .react-gametab-side-inner > .react-gametab-toolbar-wrap.react-gametab-toolbar-wrap-measure {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.react-gametab-root.layout-portrait .react-gametab-toolbar,
.react-gametab-root.layout-small-size .react-gametab-toolbar {
  width: 100%;
  min-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.react-gametab-root.layout-portrait .react-gametab-toolbar {
  height: auto;
  min-height: 0;
}

.react-gametab-root.layout-portrait.is-portrait-pin-disabled .react-gametab-chats-panel .react-gametab-label-actions .react-gametab-chat-pin-btn {
  display: none;
}

.react-gametab-portrait-toolbar {
  flex: 0 0 auto;
  min-height: var(--gt-portrait-toolbar-height-px, 32px);
  gap: 0;
}

.react-gametab-root.layout-portrait .react-gametab-toolbar {
  min-height: var(--gt-portrait-toolbar-height-px, 32px);
}

.react-gametab-root.layout-portrait .react-gametab-toolbar-btn {
  width: min(46px, max(30px, calc(var(--gt-portrait-toolbar-height-px, 32px) - 8px)));
  height: min(46px, max(30px, calc(var(--gt-portrait-toolbar-height-px, 32px) - 8px)));
}

.react-gametab-root.layout-portrait .react-gametab-toolbar-icon {
  font-size: clamp(18px, calc(var(--gt-portrait-toolbar-height-px, 32px) * 0.45), 22px);
}

.react-gametab-below-toolbar-pinned-chat {
  flex: 0 0 auto;
  margin-top: 0;
}

.react-gametab-root.layout-landscape.landscape-l .react-gametab-side-inner > .react-gametab-pinned-chat-panel,
.react-gametab-root.layout-landscape.landscape-l .react-gametab-below-toolbar-pinned-chat > .react-gametab-pinned-chat-panel {
  height: var(--gt-landscape-pinned-chat-height-px, 100px);
  min-height: var(--gt-landscape-pinned-chat-height-px, 100px);
  max-height: var(--gt-landscape-pinned-chat-height-px, 100px);
}

.react-gametab-root.layout-portrait.is-portrait-ls .react-gametab-portrait-ls-pinned-chat-row > .react-gametab-pinned-chat-panel {
  height: var(--gt-portrait-below-pinned-chat-height-px, 100px);
  min-height: var(--gt-portrait-below-pinned-chat-height-px, 100px);
  max-height: var(--gt-portrait-below-pinned-chat-height-px, 100px);
}

.react-gametab-root.layout-small-size .react-gametab-below-toolbar-pinned-chat > .react-gametab-pinned-chat-panel {
  height: var(--gt-small-size-pinned-chat-height-px, 100px);
  min-height: var(--gt-small-size-pinned-chat-height-px, 100px);
  max-height: var(--gt-small-size-pinned-chat-height-px, 100px);
}

.react-gametab-root.is-mobile.layout-small-size.is-pinned-chat-keyboard-mode .react-gametab-below-toolbar-pinned-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.react-gametab-root.is-mobile.layout-small-size.is-pinned-chat-keyboard-mode .react-gametab-below-toolbar-pinned-chat > .react-gametab-pinned-chat-panel {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.react-gametab-root.is-mobile.layout-portrait.is-pinned-chat-keyboard-mode:not(.is-portrait-ls) .react-gametab-portrait-switch-column.is-pinned-chat-split > .react-gametab-portrait-switch-pinned {
  flex: 1 1 auto;
}

.react-gametab-root.is-mobile.layout-portrait.is-pinned-chat-keyboard-mode:not(.is-portrait-ls) .react-gametab-portrait-switch-column.is-pinned-chat-split > .react-gametab-portrait-switch-pinned > .react-gametab-pinned-chat-panel {
  flex: 1 1 auto !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.react-gametab-root.is-mobile.layout-portrait.is-portrait-ls.is-pinned-chat-keyboard-mode .react-gametab-portrait-bottom-area {
  display: none;
}

.react-gametab-root.is-mobile.layout-portrait.is-portrait-ls.is-pinned-chat-keyboard-mode .react-gametab-portrait-ls-pinned-chat-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.react-gametab-root.is-mobile.layout-portrait.is-portrait-ls.is-pinned-chat-keyboard-mode .react-gametab-portrait-ls-pinned-chat-row > .react-gametab-pinned-chat-panel {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.react-gametab-root.layout-small-size .react-gametab-toolbar {
  height: auto;
  min-height: 0;
}

.react-gametab-root.is-mobile.layout-small-size .react-gametab-toolbar-btn {
  width: min(38px, max(30px, calc(var(--gt-toolbar-height-px, 30px) - 8px)));
  height: min(38px, max(30px, calc(var(--gt-toolbar-height-px, 30px) - 8px)));
}

.react-gametab-root.is-mobile.layout-small-size .react-gametab-toolbar-icon {
  font-size: clamp(18px, calc(var(--gt-toolbar-height-px, 30px) * 0.45), 22px);
}

.react-gametab-toolbar-spacer {
  flex: 1 1 auto;
}

.react-gametab-toolbar-tip-target {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
}

.react-gametab-toolbar-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
  position: relative;
}

.react-gametab-toolbar-btn:hover:not(:disabled) {
  background: var(--app-hover-fill);
  border-color: var(--border-color);
}

.react-gametab-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.react-gametab-toolbar-btn.is-active {
  background: var(--primary-color);
  border-color: var(--selection-border-blue, #4a7bd9);
  color: #fff;
}

.react-gametab-root.is-floating-titlebar .react-gametab-toolbar,
.react-gametab-root.is-floating-titlebar .react-gametab-toolbar-btn {
  border-radius: 0;
}

.react-gametab-root.is-floating-titlebar.is-landscape-ls .react-gametab-landscape-ls-overlay-toolbar .react-gametab-toolbar-btn,
.react-gametab-root.is-floating-titlebar.is-landscape-ls .react-gametab-landscape-ls-mode-rail .react-gametab-toolbar-btn,
.react-gametab-root.is-floating-titlebar.is-landscape-ls .react-gametab-landscape-ls-rail .react-gametab-toolbar-btn {
  border-radius: 10px;
}

.react-gametab-root.is-floating-titlebar .react-gametab-side-inner,
.react-gametab-root.is-floating-titlebar .react-gametab-side-scroll {
  gap: 0;
}

.react-gametab-root.is-landscape-ls .react-gametab-side-pane,
.react-gametab-root.is-landscape-ls .react-gametab-side-inner,
.react-gametab-root.is-landscape-ls .react-gametab-side-scroll {
  background: var(--bg-white);
}

.lobby-container.fullscreen .react-gametab-root.is-mobile.is-floating-titlebar.layout-landscape {
  --gt-landscape-toolbar-corner-right-px: max(env(safe-area-inset-right, 0px), 24px);
}

.lobby-container.fullscreen .react-gametab-root.is-mobile.is-floating-titlebar.layout-landscape .react-gametab-side-inner > .react-gametab-toolbar-wrap.react-gametab-toolbar-wrap-measure,
.lobby-container.fullscreen .react-gametab-root.is-mobile.is-floating-titlebar.layout-landscape .react-gametab-side-inner > .react-gametab-toolbar-wrap:not(.react-gametab-toolbar-wrap-measure) {
  width: calc(100% - var(--gt-landscape-toolbar-corner-right-px));
  max-width: calc(100% - var(--gt-landscape-toolbar-corner-right-px));
  margin-left: 0;
  margin-right: auto;
  padding-right: 0;
}
/* Changed: the title's status and close only in the header; the floating title
   bar's area segment ("Play ×", MainLobby) shows its own */
.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header .titlebar-dynamic-status,
.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header .titlebar-dynamic-close,
.lobby-container.landscape-ls.floating-lobby-chrome .app-name,
.lobby-container.landscape-ls.floating-lobby-chrome .search-toggle,
.lobby-container.landscape-ls.floating-lobby-chrome .challenges-toggle,
.lobby-container.landscape-ls.floating-lobby-chrome .players-toggle,
.lobby-container.landscape-ls.floating-lobby-chrome .messages-toggle {
  display: none;
}
.lobby-container.landscape-ls.floating-lobby-chrome .icon-buttons-container {
  gap: 4px;
}
.lobby-container.landscape-ls.floating-lobby-chrome .user-profile-link {
  display: none;
}
.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 35;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  border: none;
  height: 0;
  min-height: 0;
  padding: 0 6px;
}

.lobby-container.fullscreen.landscape-ls.floating-lobby-chrome .lobby-header {
  padding-right: max(env(safe-area-inset-right, 0px), 24px);
}

.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header h1 {
  overflow: visible;
  margin: 0;
  pointer-events: auto;
}
.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header .user-info {
  pointer-events: auto;
}

.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header .header-menu-button,
.lobby-container.landscape-ls.floating-lobby-chrome .lobby-header .fullscreen-toggle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Portrait fullscreen toolbar: shrink footer toolbar rows (including the
   hidden measure row) so icons stay clear of rounded display corners. */
.lobby-container.fullscreen.smartphone-portrait .react-gametab-root.is-mobile {
  --gt-portrait-toolbar-corner-left-px: max(env(safe-area-inset-left, 0px), 24px);
  --gt-portrait-toolbar-corner-right-px: max(env(safe-area-inset-right, 0px), 24px);
}

.lobby-container.fullscreen.smartphone-portrait .react-gametab-root.is-mobile.layout-small-size .react-gametab-square-footer > .react-gametab-toolbar-wrap.react-gametab-toolbar-wrap-measure,
.lobby-container.fullscreen.smartphone-portrait .react-gametab-root.is-mobile.layout-small-size .react-gametab-square-footer > .react-gametab-toolbar-wrap.is-mode-switcher-wrap:not(.react-gametab-toolbar-wrap-measure),
.lobby-container.fullscreen.smartphone-portrait .react-gametab-root.is-mobile.layout-portrait .react-gametab-portrait-toolbar > .react-gametab-toolbar-wrap.react-gametab-toolbar-wrap-measure,
.lobby-container.fullscreen.smartphone-portrait .react-gametab-root.is-mobile.layout-portrait .react-gametab-portrait-toolbar > .react-gametab-toolbar-wrap.is-mode-switcher-wrap:not(.react-gametab-toolbar-wrap-measure) {
  width: calc(100% - var(--gt-portrait-toolbar-corner-left-px) - var(--gt-portrait-toolbar-corner-right-px));
  max-width: calc(100% - var(--gt-portrait-toolbar-corner-left-px) - var(--gt-portrait-toolbar-corner-right-px));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.react-gametab-root.is-floating-titlebar.layout-landscape .react-gametab-board-pane {
  position: relative;
}

.react-gametab-root.is-floating-titlebar.layout-landscape .react-gametab-board-pane::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--primary-start);
  pointer-events: none;
  z-index: 2;
}

.react-gametab-root.is-floating-titlebar.is-landscape-ls.layout-landscape .react-gametab-board-pane::after {
  display: none;
}

.react-gametab-toolbar-btn.is-active:hover:not(:disabled) {
  background: var(--primary-color);
  border-color: var(--selection-border-blue, #4a7bd9);
}

.react-gametab-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  min-height: 1.2em;
  font-size: 18px;
  line-height: 1.2;
}

/* Explore's Create variant (⑂), turned a quarter clockwise so the fork branches sideways.
   A transform needs an inline-block; the icon box centres it. */
.toolbar-icon-variant {
  display: inline-block;
  transform: rotate(90deg);
}

.react-gametab-flag-icon {
  display: block;
  width: 1.14em;
  height: 1.14em;
}

.react-gametab-toolbar-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #cf2e2e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.react-gametab-chat-toast {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 48px);
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  width: auto;
  max-width: min(70vw, 520px);
  max-height: 72px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 10px;
  background: rgba(18, 27, 36, 0.36);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 19000;
  cursor: pointer;
}

.react-gametab-chat-toast-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--chat-toast-lines, 2);
  line-clamp: var(--chat-toast-lines, 2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-gametab-root.is-landscape-ls .react-gametab-chat-toast {
  top: calc(env(safe-area-inset-top, 0px) + 56px);
}

[data-theme="dark"] .react-gametab-chat-toast {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(10, 16, 22, 0.42);
}

.react-gametab-notice {
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  font-size: 13px;
}

/* Game overlay (chouettes, before the first game and between games): a card
   over 90% of the board, centred so the board's edges stay visible, holding
   a title, the server notice and the buttons stacked vertically. Position
   and size come inline from GameTab (the board rectangle). Changed: the
   card is always dark, whatever the app theme -- it belongs to the board,
   which has its own look, rather than to the app's dialogs, and one look
   keeps its text, links and buttons readable: the dark theme's colours are
   set on the card for everything in it, and color-scheme: dark gives the
   plain (non-accent) buttons, which use the browser's default button
   colours, their dark grey. The border is the board frame colour, and the
   default button uses the board theme colour (.board-control above). */
.react-gametab-game-overlay {
  color-scheme: dark;
  --secondary-bg: #2a2a2a;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-light: #888;
  --bg-white: #1a1a1a;
  --border-color: #404040;
  --shadow-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 5; /* above the notice (3), the board button bar and the clocks (4) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Changed: the card squeezes to fit (GameTab gameOverlayScale): the
     spacing by --ov-g, the text, buttons and arrows by --ov-f */
  /* Changed: on desktop the base size follows the board (--ov-base, set
     inline by GameTab: a share of the board's height within limits), so the
     text is not small on a large board; elsewhere the inherited size */
  font-size: calc(var(--ov-base, 1em) * var(--ov-f, 1));
  gap: calc(14px * var(--ov-g, 1));
  padding: calc(16px * var(--ov-g, 1));
  overflow: auto;
  background: color-mix(in srgb, var(--secondary-bg) 94%, transparent);
  color: var(--text-primary);
  border: 3px solid var(--board-border);
  border-radius: 14px;
  box-shadow: 0 6px 24px var(--shadow-color);
  text-align: center;
}

/* The overlay shows the notice text itself; hide the board notice under it. */
.gametab-canvas-host[data-game-overlay] .react-gametab-notice-overlay {
  display: none;
}

/* Clocks (canvas.js Countdown). Static styles only: position, width,
   font family, colors, opacity, font sizes and visibility toggles are set
   inline at runtime and override the defaults here. */
.react-gametab-clock {
  position: absolute;
  display: none;
  width: 80px;
  text-align: center;
  border-radius: 4px;
  z-index: 4; /* with the board button bar; under the game overlay (5) */
  pointer-events: none;
  overflow: hidden;
}

.react-gametab-clock-delay {
  font-size: 10px;
  line-height: 14px;
  visibility: hidden;
}

.react-gametab-clock-main {
  font-size: 14px;
  line-height: 18px;
  padding: 1px 0;
}

.react-gametab-game-overlay-title {
  font-size: 1.3em;
  font-weight: 700;
}

/* Added: the role line after "Next game started:" in the title, in the
   regular weight of the message it replaces */
.react-gametab-game-overlay-title-message {
  font-weight: normal;
}

.react-gametab-game-overlay-message {
  max-width: 32em;
  opacity: 0.85;
}

/* Game-over step: the result and stats sit in the card's upper left; the
   status line and buttons (actions) are centred in the space below.
   When the narrative does not fit (several payments, a phone), only the
   info block scrolls: the card itself does not, and the actions never
   shrink, so the buttons stay in view. */
.react-gametab-game-overlay.has-top-info {
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.react-gametab-game-overlay-info {
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  margin: calc(18px * var(--ov-g, 1)) 0 0 22px; /* clear of the card's top-left corner */
  padding-right: 8px; /* room beside the scrollbar */
  flex: 0 1 auto;      /* may shrink below its content height ... */
  min-height: 0;       /* ... (flex items default to min-height: auto) */
  overflow: auto;      /* ... and then scrolls; wide tables scroll sideways */
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  line-height: 1.35;
}

.react-gametab-game-overlay.has-top-info .react-gametab-game-overlay-actions {
  flex-shrink: 0; /* status line and buttons always fully visible */
}

/* Added: a chouette's game-over / next-game card shows the last game's
   stats and the players as pages of a carousel (GameTab
   renderGameOverlayCarousel). The carousel takes the top block's place in
   the card's column -- it may shrink and its page then scrolls -- with an
   arrow on each side of the page and a dot per page underneath. */
.react-gametab-game-overlay-carousel {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: calc(10px * var(--ov-g, 1));
}

.react-gametab-game-overlay-carousel-row {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* Both pages in one grid cell: the cell is as tall as the taller page, so
   the buttons below stay put when switching; when the card is short the
   row shrinks and the pages scroll */
.react-gametab-game-overlay-carousel-pages {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.react-gametab-game-overlay-carousel-page {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.react-gametab-game-overlay-carousel-page.is-hidden {
  visibility: hidden;
}

/* The page's block sits in the carousel, clear of the arrows. Specific
   enough to win over the card's own margins for the top block (the default
   and is-compact), which would otherwise add to the page's height. */
.react-gametab-game-overlay.has-top-info .react-gametab-game-overlay-carousel-page > .react-gametab-game-overlay-info {
  margin: 0;
}

/* The arrows: the grey of the card's other non-default buttons
   (.btn.board-control, like the minimise button), as tall, narrow strips
   beside the page */
.react-gametab-game-overlay .btn.react-gametab-game-overlay-carousel-arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 18px;
  min-width: 0;
  height: calc(64px * var(--ov-b, 1));
  margin: 0 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  border-radius: 6px;
}

.react-gametab-game-overlay .btn.react-gametab-game-overlay-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.react-gametab-game-overlay-carousel-dots {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: calc(8px * var(--ov-g, 1));
}

.react-gametab-game-overlay-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
}

.react-gametab-game-overlay-carousel-dot.is-active {
  opacity: 0.9;
}

/* Before the first and the next game: the players and their states, in the
   card's upper left (it is also a .react-gametab-game-overlay-info block). */
.react-gametab-game-overlay-players {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 1.5em;
  row-gap: 2px;
}

/* A list that does not fit, as one line across both columns ("5 players
   seated", "2 pending admin actions. Check the admin panel.") */
.react-gametab-game-overlay-players-summary {
  grid-column: 1 / -1;
}

/* For admins, the pending actions (Admit / Reject / Mute) above the
   players: same two columns, text and buttons. Space before the second
   heading (or summary). */
.react-gametab-game-overlay-players-summary.is-second,
.react-gametab-game-overlay-players-head.is-second {
  margin-top: calc(12px * var(--ov-g, 1));
}

/* Each player is a row of the grid: name (role), state */
.react-gametab-game-overlay-player {
  display: contents;
}

.react-gametab-game-overlay-player-state {
  opacity: 0.7;
  /* On one line, so a long state that does not fit overflows sideways and
     the card switches to the short form (gameOverlayLongStates) instead of
     wrapping */
  white-space: nowrap;
}

.react-gametab-game-overlay-players-head {
  grid-column: 1 / -1;
  font-size: 0.85em;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

/* Long explanatory confirmations (the Add Bot Player dialog): real
   paragraphs with space between them. */
.dialog-long-text p {
  margin: 0 0 0.7em;
}

.dialog-long-text p:last-child {
  margin-bottom: 0;
}

/* Make the scrollable info block noticeable: a thin, visible scrollbar,
   and the text fading out at the bottom while there is more below
   (has-more, set from GameTab while not scrolled to the end). */
.react-gametab-game-overlay-info {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-primary) 45%, transparent) transparent;
}

.react-gametab-game-overlay-info::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.react-gametab-game-overlay-info::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-primary) 45%, transparent);
  border-radius: 3px;
}

.react-gametab-game-overlay-info.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent);
}

/* Phones: the card covers the whole board pane (inline style), with a
   smaller font and tighter spacing. */
.react-gametab-game-overlay.is-compact {
  /* Not below the site's 12pt mobile readability floor (style.css), which
     applies to td / span / button but not to the card's divs: otherwise the
     table text was floored to 12pt while the result line (a div, 1.15x the
     card font) ended up smaller than it. */
  font-size: calc(max(12pt, 0.85em) * var(--ov-f, 1)); /* --ov-f stays 1 at 12pt (GAME_OVERLAY_MIN_FONT_PX) */
  padding: calc(10px * var(--ov-g, 1));
  gap: calc(10px * var(--ov-g, 1));
  border-radius: 10px;
}

.react-gametab-game-overlay.is-compact .react-gametab-game-overlay-info {
  margin: calc(6px * var(--ov-g, 1)) 0 0 8px;
}

.react-gametab-game-overlay-result {
  font-size: 1.15em;
  font-weight: 700;
  margin-bottom: 2px;
}

/* Added: under the session-end result for a player who left a chouette that
   goes on ("The session goes on for the other players.") */
.react-gametab-game-overlay-result-note {
  opacity: 0.75;
}

/* Points line plus the sentences on how they were won or lost, with a
   line's gap before the stats */
.react-gametab-game-overlay-outcome {
  margin-bottom: 0.8em;
}

/* Payment lines when there are several ("vs Bot2: ..."), with each line's
   points stacked in a right-aligned column. The sentences wrap (the table
   stays within the card); the points do not. */
.react-gametab-game-overlay-payouts {
  max-width: 100%;
}

.react-gametab-game-overlay-payouts td:nth-child(2) {
  padding-left: 0.8em;
  vertical-align: top;
}

.react-gametab-game-overlay-payouts td:first-child {
  white-space: normal !important; /* overrides the shared nowrap below */
}

/* Errors / Doubles / Takes rows and the Luck / PR lines: counts and
   decimals line up in columns, at the card's font size. */
.react-gametab-game-overlay-payouts,
.react-gametab-game-overlay-stats,
.react-gametab-game-overlay-summary {
  /* The info block is a flex column, which would stretch both tables to
     the widest one's width and push the Luck / PR values far from their
     labels; keep each table at its own content width. */
  align-self: flex-start;
  border-collapse: collapse;
  font-size: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.react-gametab-game-overlay-payouts td,
.react-gametab-game-overlay-stats td,
.react-gametab-game-overlay-summary td {
  padding: 1px 0;
  white-space: nowrap;
}

.react-gametab-game-overlay-payouts td.is-num,
.react-gametab-game-overlay-stats td.is-num,
.react-gametab-game-overlay-summary td.is-num {
  text-align: right;
}

/* Column gaps group the pairs: label + "(Blunders)", count + blunder
   count, "Equity lost" + value -- tight inside a pair, wide between. */
.react-gametab-game-overlay-stats td:nth-child(2) { padding-left: 0.3em; }
.react-gametab-game-overlay-stats td:nth-child(3) { padding-left: 1.4em; }
.react-gametab-game-overlay-stats td:nth-child(4) { padding-left: 0.3em; }
.react-gametab-game-overlay-stats td:nth-child(5) { padding-left: 1.4em; }
.react-gametab-game-overlay-stats td:nth-child(6) { padding-left: 0.3em; }

.react-gametab-game-overlay-summary {
  margin-top: 4px;
}

.react-gametab-game-overlay-summary td:nth-child(2) { padding-left: 0.6em; }
.react-gametab-game-overlay-summary td:nth-child(3) { padding-left: 0.5em; }

/* Added: session-end overlay of a two-player match. Both players' match stats side by side -- the
   viewer's values right-aligned against the labels in the middle, the
   opponent's left-aligned -- the better value in bold; then the two
   biggest swings. Figures in tabular digits so the columns line up. */
.react-gametab-game-overlay-compare {
  margin-top: 10px;
  border-collapse: collapse;
  /* Added: tables do not inherit the text colour and size in quirks mode
     (black text on the dark card, ignoring the card's squeeze); like the
     game-over tables above */
  color: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.react-gametab-game-overlay-compare th {
  font-size: 0.85em;
  font-weight: 600;
  opacity: 0.7;
  padding: 0 0.8em 4px;
}

.react-gametab-game-overlay-compare th:first-child,
.react-gametab-game-overlay-compare td:first-child {
  text-align: right;
}

.react-gametab-game-overlay-compare th:last-child,
.react-gametab-game-overlay-compare td:last-child {
  text-align: left;
}

.react-gametab-game-overlay-compare td {
  padding: 2px 0.8em;
  white-space: nowrap;
}

.react-gametab-game-overlay-compare td.is-label {
  text-align: center;
  opacity: 0.75;
}

.react-gametab-game-overlay-compare td.is-better {
  font-weight: 700;
}

/* Added: a chouette's end. The viewer's own figures, labels left and
   values right in tabular digits. */
.react-gametab-game-overlay-own-summary {
  margin-top: 10px;
}

.react-gametab-game-overlay-own {
  margin-top: 10px;
  border-collapse: collapse;
  /* Added: inherit the card's text colour and size (see -compare above) */
  color: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.react-gametab-game-overlay-own td {
  padding: 2px 0.8em;
  white-space: nowrap;
  text-align: right;
}

.react-gametab-game-overlay-own td.is-label {
  text-align: left;
  opacity: 0.75;
}

.react-gametab-game-overlay-turning {
  margin-top: calc(12px * var(--ov-g, 1));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24px * var(--ov-g, 1)); /* sets the two swings (heading + sentence) apart */
  max-width: 36em;
}

/* Each swing: its heading over a sentence with the link inline */
.react-gametab-game-overlay-swing {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.react-gametab-game-overlay-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px * var(--ov-g, 1));
  width: 100%;
}

.react-gametab-game-overlay.has-top-info .react-gametab-game-overlay-actions {
  margin: auto 0; /* centred in the space below the stats */
}

/* Desktop: the card is only as tall as its content (maxHeight inline, see
   GameTab), so nothing is centred vertically. Content starts at the top;
   the status line and buttons follow the upper-left block after a fixed
   gap, and the card ends a margin below the last button. Phones keep the
   full-pane card with the actions centred below the info block. */
.react-gametab-game-overlay:not(.is-compact) {
  justify-content: flex-start;
  padding: calc(22px * var(--ov-g, 1)) 16px calc(26px * var(--ov-g, 1));
}

.react-gametab-game-overlay.has-top-info:not(.is-compact) .react-gametab-game-overlay-actions {
  margin: calc(30px * var(--ov-g, 1)) 0 0;
}

/* Added: the root slot the phone-portrait card is portalled to. No box of
   its own (the root's flex gap would otherwise add space), so the card is
   positioned against the root. */
.react-gametab-game-overlay-slot {
  display: contents;
}

/* Added: phones in portrait. The card sits at the root of the tab over the
   board (position and maxHeight inline, see gameOverlayPhonePortrait in
   GameTab), as tall as its content and at most down to the toolbar, so it
   can cover the panels below the board -- above them and the clocks.
   Content starts at the top like on desktop, with the phone
   font. */
.react-gametab-game-overlay.is-phone-portrait {
  z-index: 31;
  justify-content: flex-start;
  padding: calc(12px * var(--ov-g, 1)) 10px calc(16px * var(--ov-g, 1));
}

.react-gametab-game-overlay.is-phone-portrait.has-top-info .react-gametab-game-overlay-actions {
  margin: calc(18px * var(--ov-g, 1)) 0 0;
}

/* Minimise button in the card's top-right corner (every layout):
   collapses the card to a pill. A small square chip in the grey of the
   card's other non-default buttons (.btn.board-control, see GameTab), sized
   to the "_" icon. */
.react-gametab-game-overlay-collapse {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

/* The collapsed card: a pill over the board's centre (position inline);
   tapping it opens the card again. Same look as the cube dialog's pill. */
.react-gametab-game-overlay-pill {
  position: absolute;
  z-index: 31;
  transform: translate(-50%, -50%);
  max-width: min(90vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(26, 29, 36, 0.96) 0%, rgba(17, 20, 26, 0.96) 100%);
  color: #f3f4f6;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  font-size: 14px;
  line-height: 1.25;
  padding: 10px 16px;
  cursor: pointer;
}

/* Added: the pill inside the board area (every layout but phone portrait),
   in the game overlay's layer (5) rather than the root's */
.react-gametab-game-overlay-pill.is-in-board {
  z-index: 5;
}

.react-gametab-game-overlay-pending,
.react-gametab-game-overlay-status {
  opacity: 0.8;
  font-style: italic;
}

/* Changed: links on the overlay card keep the card's text colour, with the
   accent as a thick underline (and as the text colour on hover). The accent
   follows the board while a game tab is active and is only guaranteed to
   stand out from the page background, not as text on the card (e.g. a dark
   purple accent on the dark card). */
.react-gametab-game-overlay-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.react-gametab-game-overlay-link:hover {
  color: var(--primary-color);
}

/* Always two columns, so a long list does not become a tall stack: buttons
   fill row by row, so Leave ends last. */
.react-gametab-game-overlay-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10px * var(--ov-g, 1));
  width: min(100%, 28em); /* Changed: in em, so the row scales with the text */
}

/* The options group (Change Stake, End Session) sits apart from the main
   choices: the actions column's 10px gap plus this margin. */
.react-gametab-game-overlay-buttons.is-options {
  margin-top: calc(14px * var(--ov-g, 1));
}

/* Changed: sized in em of the card's text (already squeezed by --ov-f), so
   the buttons keep their proportion to the text whatever the board size
   (.btn's fixed 14px / 40px left them large next to small text); the height
   and padding also shrink with the button factor (--ov-b), which keeps going
   after the text has reached its floor */
.react-gametab-game-overlay-buttons .btn {
  width: 100%;
  min-height: calc(2.5em * var(--ov-b, 1));
  padding: calc(0.6em * var(--ov-b, 1)) calc(1em * var(--ov-b, 1));
  font-size: 1em;
  font-weight: 700;
}

/* A group's only button is centred at the width of one column */
.react-gametab-game-overlay-buttons .btn:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 5px * var(--ov-g, 1)); /* one column at the gap in effect */
}

/* Added: the session-end overlay's third button in a group has a row of its own, left aligned, as
   wide as its label needs but at least one column, like the other buttons */
.react-gametab-game-overlay-buttons.is-session-over .btn:last-child:nth-child(odd):not(:only-child) {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-width: calc(50% - 5px * var(--ov-g, 1)); /* one column at the gap in effect */
}

.react-gametab-notice-overlay {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translate(-50%, -100%);
  max-width: 80%;
  padding: 3px 12px;
  border-radius: 8px;
  background: rgba(20, 25, 32, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Added: raised above the control row (GameTab noticeRaised), the notice can
   sit over the checkers. A tight dark outline on the letters keeps white text
   readable over white checkers while the board stays visible between them
   (a dark background box hid the bar checker and the position). Applied
   always, so the notice looks the same wherever it sits. */
.react-gametab-notice-overlay {
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 3px rgba(0, 0, 0, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ==================== Moved from game.css: React GameTab / canvas.js ==================== */

/* canvas.js: move log details toggle */
.move-details-toggle {
    float: right;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
}

.move-details-toggle:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* canvas.js: board overlay notice */
.board-notice {
    z-index: 4;
    position: absolute;
    box-sizing: border-box;
    display: none;
    overflow: hidden;
    color: var(--board-notice-color, var(--text-primary));
    pointer-events: none;
}

/* canvas.js: scoreboard player row labels */
.standings-player-label {
    z-index: 25;
    border-top: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    text-align: left;
    padding-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==================== React Modal Dialogs ==================== */

/* Dialog styling to match React Modal components */
.dialog-body {
    padding: 20px 0;
}

.dialog-message {
    color: var(--text-primary);
    font-size: 14px;
    margin: 0;
}

.dialog-checkbox-item {
    margin-bottom: 12px;
}

.dialog-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.dialog-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

.dialog-checkbox-label span {
    color: var(--text-primary);
}

/* ==================== Preferences Dialog ==================== */

.pref-help-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: help;
    font-size: 12px;
    color: #666;
    flex-shrink: 0;
}

[data-theme="dark"] .pref-help-icon {
    color: #999;
}

.pref-help-tooltip {
    position: fixed;
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
    line-height: 1.4;
    white-space: normal;
    max-width: 250px;
    word-wrap: break-word;
    width: max-content;
}

.pref-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}

.pref-color-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pref-color-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-align: left;
    width: 100%;
}

.pref-color-group-items {
    display: flex;
    gap: 6px;
}

.pref-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pref-color-item input[type="color"] {
    width: 40px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;
    background: none;
}

.pref-color-item input[type="color"]:disabled {
    opacity: 0.8;
    cursor: default;
}

.pref-color-item label {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pref-color-scheme-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.pref-color-scheme-row label {
    font-size: 13px;
    white-space: nowrap;
}

.pref-color-scheme-row select {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 13px;
}

.pref-color-apply-to-custom {
    margin-left: auto;
}

.pref-color-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.btn-color-action {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.btn-color-action:hover {
    background: var(--border-color);
}

.dialog-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Modal dialog structure */
.popup-container {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Compact dialog for confirmations */
.compact-dialog {
    max-width: 400px;
    width: auto;
    min-width: 300px;
}

.popup-header {
    background-color: var(--bg-white);
    padding: 16px 24px;
    padding-bottom: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popup-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

/* Scoped to avoid overriding the legacy minimize button style in game.css */
.popup-container .popup-header-button {
    margin-left: auto;
    margin-right: 8px;
}

/* Scoped to avoid overriding the legacy inline popup content style in game.css */
.popup-container .popup-content {
    padding: 20px 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: visible;
    background: var(--bg-white);
}

/* Responsive height adjustments - progressively reduce whitespace */
@media (max-height: 700px) {
    .popup-header {
        padding: 12px 24px;
    }

    .popup-header h2 {
        font-size: 16px;
    }

    .popup-container .popup-content {
        padding: 16px 24px;
    }

    .dialog-body {
        padding: 16px 0;
    }

    .dialog-checkbox-item {
        margin-bottom: 10px;
    }

    .dialog-footer {
        padding-top: 12px;
    }

    .popup .btn {
        padding: 6px 14px;
        font-size: 13px;
    }
}

@media (max-height: 600px) {
    .popup-header {
        padding: 10px 20px;
    }

    .popup-header h2 {
        font-size: 15px;
    }

    .popup-container .popup-content {
        padding: 12px 20px;
    }

    .dialog-body {
        padding: 12px 0;
    }

    .dialog-checkbox-item {
        margin-bottom: 8px;
    }

    .dialog-footer {
        padding-top: 10px;
        gap: 8px;
    }

    .popup .btn {
        padding: 5px 12px;
        font-size: 13px;
    }
}

@media (max-height: 500px) {
    .popup-header {
        padding: 8px 16px;
    }

    .popup-header h2 {
        font-size: 14px;
    }

    .popup-container .popup-content {
        padding: 8px 16px;
    }

    .dialog-body {
        padding: 8px 0;
    }

    .dialog-checkbox-item {
        margin-bottom: 6px;
    }

    .dialog-checkbox-label input[type="checkbox"] {
        margin-right: 6px;
    }

    .dialog-footer {
        padding-top: 8px;
        gap: 6px;
    }

    .popup .btn {
        padding: 4px 10px;
        font-size: 12px;
    }
}

@media (max-width: 500px) {
    .popup .btn {
        padding: 4px 8px;
        font-size: 12px;
    }

    .dialog-footer {
        gap: 6px;
    }
}

@media (max-height: 400px) {
    .popup-container {
        border-radius: 8px;
    }

    .popup-header {
        padding: 6px 12px;
    }

    .popup-header h2 {
        font-size: 13px;
    }

    .popup-container .popup-content {
        padding: 6px 12px;
    }

    .dialog-body {
        padding: 4px 0;
    }

    .dialog-checkbox-item {
        margin-bottom: 4px;
    }

    .dialog-checkbox-label input[type="checkbox"] {
        margin-right: 4px;
    }

    .dialog-footer {
        padding-top: 6px;
        gap: 4px;
    }

    .popup .btn {
        padding: 3px 8px;
        font-size: 11px;
        border-radius: 4px;
    }
}

/* ==================== Position Setup Dialog ==================== */
.setup-dialog-body {
  max-width: 380px;
  font-size: 13px;
  padding-top: 4px;
}

.setup-minimized .popup-header {
  display: none;
}

.setup-minimized .popup-content {
  padding: 0;
  background: transparent;
  border: none;
}

.setup-minimized.popup-container {
  width: auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

.setup-minimized .setup-dialog-body {
  padding: 0;
}

.setup-toolbar-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 2px;
}

.setup-minimized .setup-toolbar-label {
  display: none;
}

.setup-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 0;
}

.setup-minimized .setup-toolbar {
  margin: 0;
  padding: 0;
}

.setup-done-btn {
  display: none;
}

.setup-minimized .setup-done-btn {
  display: inline-block;
}

.setup-minimized .setup-modify-btn {
  display: none;
}

.setup-checker-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
}

.setup-cursor-icon {
  display: block;
}

.setup-delete-icon {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
}

.setup-checker-icon {
    pointer-events: none;
}

.setup-tool-btn {
  padding: 2px 4px;
    border: 1px solid var(--border-color, #888);
  border-radius: 4px;
    background: var(--bg-white, #f0f0f0);
    color: var(--text-primary, #1a1a1a);
  cursor: pointer;
  font-size: 14px;
  min-width: 28px;
  text-align: center;
}

.setup-tool-btn:hover {
    background: var(--secondary-bg, #ddd);
}

.setup-tool-active {
  background: var(--primary-color, #2d9da8);
  color: #fff;
  border-color: var(--primary-color, #2d9da8);
}

.setup-section {
  border-top: 1px solid #ddd;
  padding: 6px 0;
}

.setup-minimized .setup-section {
  display: none;
}

.setup-minimized .dialog-footer {
  display: none;
}

.setup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
    flex-wrap: wrap;
}

.setup-row > label {
  white-space: nowrap;
}

.setup-indent {
  padding-left: 12px;
}

.setup-small-input {
  width: 50px;
    padding: 2px 4px;
  font-size: 13px;
}

.setup-dice-input {
    width: 40px;
    padding: 2px 4px;
    font-size: 13px;
}

.setup-cube-btn {
  width: 28px;
  height: 28px;
  font-size: 15px;
  font-weight: bold;
    border: 1px solid var(--border-color, #888);
  border-radius: 4px;
    background: var(--bg-white, #f0f0f0);
    color: var(--text-primary, #1a1a1a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.setup-cube-btn:hover {
    background: var(--secondary-bg, #ddd);
}

.setup-cube-display {
  font-weight: bold;
  font-size: 15px;
  min-width: 28px;
  text-align: center;
}

.setup-xgid-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}

.setup-xgid-copy-row,
.setup-xgid-actions {
    justify-content: flex-end;
}

.setup-xgid-field {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: 12px;
  padding: 4px 6px;
  box-sizing: border-box;
}

.setup-xgid-error {
  color: red;
  font-size: 12px;
  min-height: 16px;
}

.setup-checker-counts {
  font-size: 13px;
  display: flex;
  gap: 12px;
  margin: 2px 0;
}

.btn-small {
  font-size: 12px;
  padding: 3px 8px;
}

/* Scale panel typography on very large non-mobile displays. */
.react-gametab-chat-toast {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.react-gametab-notice {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.react-gametab-notice-overlay,
.move-details-toggle,
.dialog-message {
  font-size: calc(14px * var(--gt-panel-font-scale, 1));
}

.react-gametab-analysis-switch-btn.react-gametab-analysis-nav-btn {
  font-size: calc(10px * var(--gt-panel-font-scale, 1));
}

.analysis-panel .react-gametab-analysis-layout-toggle,
.react-gametab-label,
.react-gametab-chat-pin-btn,
.react-gametab-full-chats-pinned-note,
.react-gametab-expand-link,
.setup-toolbar-label,
.setup-xgid-field,
.setup-xgid-error,
.btn-small {
  font-size: calc(12px * var(--gt-panel-font-scale, 1));
}

/* The split/stacked toggle sits outside the Moves/Cube pill, so it misses the
   bordered chip look the other header buttons get. Give it a matching border
   and a larger glyph (the base 12px reads tiny next to the text buttons). */
.analysis-panel .react-gametab-analysis-layout-toggle {
  font-size: calc(17px * var(--gt-panel-font-scale, 1));
}

.analysis-panel .react-gametab-analysis-layout-toggle:not(.is-active) {
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  color: var(--text-secondary, var(--text-primary));
}

.react-gametab-value,
.setup-cube-btn,
.setup-cube-display {
  font-size: calc(15px * var(--gt-panel-font-scale, 1));
}

.pref-help-icon,
.pref-help-tooltip,
.pref-color-scheme-row label,
.pref-color-scheme-row select,
.setup-dialog-body,
.setup-small-input,
.setup-dice-input,
.setup-checker-counts {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.pref-color-group-label,
.pref-color-item label,
.analysis-label,
.analysis-luck-label {
  font-size: calc(11px * var(--gt-panel-font-scale, 1));
}

.btn-color-action {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.analysis-cube-table th {
  font-size: calc(10px * var(--gt-panel-font-scale, 1));
}

.popup-header h2 {
  font-size: calc(18px * var(--gt-panel-font-scale, 1));
}

.gamelog-move,
.sb-cell-num {
  font-size: calc(12.5px * var(--gt-panel-font-scale, 1));
}

.sb-table,
.analysis-move-table {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.gamelog-label,
.gamelog-game-picker-title,
.gamelog-game-picker-btn,
.sb-table caption,
.sb-cell-cube,
.sb-cell-deleg,
.sb-cell-last,
.analysis-header,
.analysis-status-reason,
.analysis-show-button,
.analysis-cube-table {
  font-size: calc(12px * var(--gt-panel-font-scale, 1));
}

.gamelog-cube,
.gamelog-game-pill,
.sb-table thead th,
.analysis-move-table th,
.analysis-probs-cell {
  font-size: calc(11px * var(--gt-panel-font-scale, 1));
}

.gamelog-nav-btn {
  font-size: calc(10px * var(--gt-panel-font-scale, 1));
}

.gamelog-select,
.analysis-panel,
.analysis-cube-summary,
.analysis-variant-header {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.gamelog-starting-score {
  font-size: calc(12px * var(--gt-panel-font-scale, 1));
}

.gamelog-game-picker-close {
  font-size: calc(14px * var(--gt-panel-font-scale, 1));
}

.react-gametab-root:not(.is-mobile) .react-gametab-toolbar-btn {
  width: min(54px, calc(30px * var(--gt-panel-font-scale, 1)));
  height: min(54px, calc(30px * var(--gt-panel-font-scale, 1)));
}

.react-gametab-root:not(.is-mobile) .react-gametab-toolbar-icon {
  font-size: min(32px, calc(18px * var(--gt-panel-font-scale, 1)));
}

.react-gametab-root:not(.is-mobile) .react-gametab-chat-pin-btn {
  min-width: min(40px, calc(22px * var(--gt-panel-font-scale, 1)));
  height: min(40px, calc(22px * var(--gt-panel-font-scale, 1)));
  line-height: min(36px, calc(20px * var(--gt-panel-font-scale, 1)));
}

.react-gametab-root:not(.is-mobile) .react-gametab-full-chats-send {
  padding: calc(6px * var(--gt-panel-font-scale, 1)) calc(12px * var(--gt-panel-font-scale, 1));
}

.react-gametab-root .recent-chats,
.react-gametab-root .recent-chats-line,
.react-gametab-root .recent-chats-empty {
  font-size: calc(13px * var(--gt-panel-font-scale, 1));
}

.react-gametab-root:not(.is-mobile) .react-gametab-button-bar .btn,
.react-gametab-root:not(.is-mobile) .react-gametab-button-bar .undo-button {
  font-size: calc(14px * var(--gt-panel-font-scale, 1));
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (min-width: 1400px) and (min-height: 900px) {
  .lobby-container:has(.react-gametab-root) .lobby-header .btn-small.menu-button,
  .lobby-container:has(.react-gametab-root) .lobby-header .btn-small.search-toggle,
  .lobby-container:has(.react-gametab-root) .lobby-header .btn-small.challenges-toggle,
  .lobby-container:has(.react-gametab-root) .lobby-header .btn-small.players-toggle,
  .lobby-container:has(.react-gametab-root) .lobby-header .btn-small.messages-toggle,
  .lobby-container:has(.react-gametab-root) .lobby-header .btn-small.fullscreen-toggle {
    height: min(72px, calc(26px * var(--gt-panel-font-scale, 1)));
    min-height: min(72px, calc(26px * var(--gt-panel-font-scale, 1)));
  }

  .lobby-container:has(.react-gametab-root) .btn-small.menu-button,
  .lobby-container:has(.react-gametab-root) .btn-small.search-toggle,
  .lobby-container:has(.react-gametab-root) .btn-small.challenges-toggle,
  .lobby-container:has(.react-gametab-root) .btn-small.players-toggle,
  .lobby-container:has(.react-gametab-root) .btn-small.messages-toggle {
    font-size: min(28px, calc(12px * var(--gt-panel-font-scale, 1)));
    min-width: min(96px, calc(32px * var(--gt-panel-font-scale, 1)));
  }

  .lobby-container:has(.react-gametab-root) .header-control-icon {
    width: min(36px, calc(14px * var(--gt-panel-font-scale, 1)));
    height: min(36px, calc(14px * var(--gt-panel-font-scale, 1)));
  }
}

/* Decision dialog (DecisionDialog.jsx): extras, a resignation or a deal
   offered to the player. The server's notice, then each option with the
   explanation that used to be its separate confirmation. */
.decision-dialog-intro {
  margin: 0 0 12px;
  font-weight: 600;
}

.decision-dialog-options {
  margin: 0;
}

.decision-dialog-option + .decision-dialog-option {
  margin-top: 10px;
}

.decision-dialog-option dt {
  font-weight: 700;
  margin-bottom: 2px;
}

.decision-dialog-option dd {
  margin: 0;
  opacity: 0.9;
}

.decision-dialog-option dd p {
  margin: 0 0 4px;
}

/* The panel switcher (GameTab panelTabs), the same in every layout: a tab
   column left of a landscape panel, or a row above a portrait one
   (is-horizontal), framed together with the panel. The line between them is
   the panel box's edge, so it runs the frame's full height or width; the
   tabs are only as long as their buttons. The frame takes the
   panel box's place and sizing (flex like .react-gametab-info-box, and the
   container rules for the panel box list it too) and its border and
   background; the box inside fills the rest without its own. Changed: the
   tabs span the frame (no longer sticky, so they scroll with a side pane that
   scrolls the panel), so Play can sit at the column's bottom / the row's right
   end. */
.react-gametab-panel-frame {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-white);
}

.react-gametab-panel-frame.is-horizontal {
  flex-direction: column;
}

.react-gametab-root.is-floating-titlebar .react-gametab-panel-frame {
  border-radius: 0;
}

.react-gametab-root .react-gametab-panel-frame > .react-gametab-info-box,
.react-gametab-root .react-gametab-panel-frame > .react-gametab-switch-empty-placeholder {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  border: none;
  border-left: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
}

.react-gametab-root .react-gametab-panel-frame.is-horizontal > .react-gametab-info-box,
.react-gametab-root .react-gametab-panel-frame.is-horizontal > .react-gametab-switch-empty-placeholder {
  border-left: none;
  border-top: 1px solid var(--border-color);
}

.react-gametab-panel-tabs {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.react-gametab-panel-tabs.is-horizontal {
  flex-direction: row;
  padding: 0 4px;
}

.react-gametab-root .react-gametab-panel-tabs .react-gametab-toolbar-btn {
  width: 40px;
  height: 38px;
  padding: 0;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  opacity: 1;
}

.react-gametab-root .react-gametab-panel-tabs.is-horizontal .react-gametab-toolbar-btn {
  border-left: none;
  border-bottom: 3px solid transparent;
}

.react-gametab-root .react-gametab-panel-tabs .react-gametab-toolbar-btn:hover:not(:disabled) {
  background: var(--secondary-bg);
}

.react-gametab-root .react-gametab-panel-tabs .react-gametab-toolbar-btn.is-active {
  border-left-color: var(--primary-color);
  background: var(--secondary-bg);
  color: var(--primary-color);
}

.react-gametab-root .react-gametab-panel-tabs.is-horizontal .react-gametab-toolbar-btn.is-active {
  border-bottom-color: var(--primary-color);
}

.react-gametab-root .react-gametab-panel-tabs .react-gametab-toolbar-btn:disabled {
  opacity: 0.42;
}

/* Play at the end: the column's bottom, the row's right; the same in the
   Play mode rail */
.react-gametab-landscape-ls-mode-rail > .react-gametab-toolbar-tip-target:has(> .react-gametab-mode-rail-play) {
  margin-top: auto;
}


.react-gametab-panel-tabs > .react-gametab-toolbar-tip-target:has(> .react-gametab-panel-tab-play) {
  margin-top: auto;
}

.react-gametab-panel-tabs.is-horizontal > .react-gametab-toolbar-tip-target:has(> .react-gametab-panel-tab-play) {
  margin-top: 0;
  margin-left: auto;
}

/* LM: the switched panel and the side pane's context toolbar strip below it
   (GameTab lmPanelColumn). The column takes the panel's share of the side
   pane (flex 1 1 0, like the game log beside it), so the strip's height comes
   out of the panel only. */
.react-gametab-lm-panel-column {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gt-panel-toolbar-gap-px, 8px);
}

.react-gametab-lm-panel-column > .react-gametab-info-box,
.react-gametab-lm-panel-column > .react-gametab-panel-frame,
.react-gametab-lm-panel-column > .react-gametab-switch-empty-placeholder {
  flex: 1 1 0;
  min-height: 0;
}

.react-gametab-lm-panel-column > .react-gametab-toolbar-wrap {
  flex: 0 0 auto;
  padding-top: 0;
}

/* The empty context strip's line (renderToolbarStrip): sized like a button,
   not shown */
.react-gametab-toolbar-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* Added: the toolbar menu (GameTab renderToolbarMenuButton): the toolbar's
   board icons with their tooltips as labels. Portalled to document.body and
   placed from its button (left, bottom: opens up and to the right); above the
   page-level toolbars (40+), below modal dialogs. */
.react-gametab-toolbar-menu {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.react-gametab-toolbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.react-gametab-toolbar-menu-item:hover:not(:disabled) {
  background: var(--app-hover-fill);
}

.react-gametab-toolbar-menu-item.is-active {
  color: var(--primary-color);
  font-weight: 600;
}

.react-gametab-toolbar-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.react-gametab-toolbar-menu-item .react-gametab-toolbar-icon {
  flex: 0 0 22px;
  display: inline-flex;
  justify-content: center;
}

.react-gametab-toolbar-menu-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Added: a toolbar that does not fit scrolls (the split stack is gone, see
   GameTab modeSwitcher). Only its icons scroll: the toolbar menu button
   (first) is outside .react-gametab-toolbar-scroller, which takes the rest of
   the toolbar's width and lays the icons out like the toolbar itself. The
   toolbar stays as wide as its wrap, so the wrap no longer overflows. */
.react-gametab-toolbar-scroller {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gt-toolbar-gap);
  overflow-x: auto;
  overflow-y: hidden;
  /* Added: room for the badges, which stick out above their icons (top: -8px)
     and were clipped here: the scroller has to clip to scroll sideways, so its
     box reaches above the toolbar instead, without changing the toolbar's
     height. That band must not take clicks from what is above the toolbar. */
  padding-top: 8px;
  margin-top: -8px;
  pointer-events: none;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.react-gametab-toolbar-scroller > * {
  pointer-events: auto;
}

/* Added: the wrap around a toolbar with a scroller need not scroll any more,
   and clipped the same badges (overflow-x: auto clips vertically too), most
   visibly in portrait and portrait LS, where it has no padding-top. */
.react-gametab-toolbar-wrap:has(> .react-gametab-toolbar > .react-gametab-toolbar-scroller:not(.is-plain)) {
  overflow: visible;
}

/* Toolbars without the menu (setup mode, the LM side pane's context strip):
   the icons stay direct flex items of the toolbar, as before */
.react-gametab-toolbar-scroller.is-plain {
  display: contents;
}

/* Added: in landscape L and LM the side pane gives the game log 40% and the
   switched panel 60% of its height (was 50/50: every child flex 1 1 0). The
   panel is the panel frame, LM's panel column (lmPanelColumn), or a bare
   info box / empty placeholder. Only the grow factors change, so the
   pinned chat and notice rows below keep their own sizes. */
.react-gametab-root.layout-landscape:is(.landscape-l, .landscape-lm) .react-gametab-side-scroll > .react-gametab-moves-panel {
  flex: 2 1 0;
}
.react-gametab-root.layout-landscape:is(.landscape-l, .landscape-lm) .react-gametab-side-scroll > :is(.react-gametab-panel-frame, .react-gametab-lm-panel-column, .react-gametab-info-box:not(.react-gametab-moves-panel), .react-gametab-switch-empty-placeholder) {
  flex: 3 1 0;
}

/* Add Bot Player (AddBotDialog): the server's text, then the bot choice */
.add-bot-dialog {
  display: grid;
  gap: 12px;
}

.add-bot-dialog-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Full size of the switched panel (GameTab panelFullSize, useMiniBoard): the side pane takes the
   width the board left. */
.lobby-container .react-gametab-root.is-full-size .react-gametab-side-pane {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

/* Only the switched panel is shown: no game log, no pinned chat, no summary under the small board */
.lobby-container .react-gametab-root.is-game-full-panel :is(
  .react-gametab-moves-panel,
  .react-gametab-pinned-chat-panel,
  .react-gametab-portrait-ls-pinned-chat-row,
  .react-gametab-below-toolbar-pinned-chat,
  .react-gametab-portrait-switch-pinned,
  .react-gametab-xlxxl-switch-bottom,
  .react-gametab-side-toggle,
  .react-gametab-board-summary
) {
  display: none;
}

/* The game overlay is no use on a small board, and on phones it is portalled over the panel. Only
   hidden, not removed: it keeps its size, as its squeeze (gameOverlayScale) measures it. Tapping
   the small board brings it back. */
.lobby-container .react-gametab-root.is-game-full-panel :is(.react-gametab-game-overlay, .react-gametab-game-overlay-pill) {
  visibility: hidden;
}

/* LM's toolbar floats under the board, which has left: below the panel instead */
.lobby-container .react-gametab-root.is-game-full-panel.landscape-lm .react-gametab-landscape-lm-floating-stack {
  left: 50%;
  width: calc(100% - 16px);
}

.lobby-container .react-gametab-root.is-game-full-panel.landscape-lm .react-gametab-side-pane {
  box-sizing: border-box;
  padding-bottom: calc(var(--gt-lm-toolbar-row-height-px, 0px) + var(--gt-lm-toolbar-bottom-offset-px, 6px));
}