/* Player meta dock, panels, and global settings dialog — stage-relative sizing only.
   See docs/features/technical/game-shell/design.md (--gs-u-w, --gs-u-h, --gs-text-*, --gs-radius-*). */

.player-meta-dock {
  --player-meta-dock-gap: calc(var(--gs-u-h) * 0.64);
  --player-meta-dock-pad: calc(var(--gs-u-h) * 0.8);
  --player-meta-dock-btn-size: calc(var(--gs-u-h) * 3.76);
  --player-meta-dock-icon-size: calc(var(--gs-u-h) * 2.32);
  position: absolute;
  right: calc(var(--gs-u-w) * 0.42);
  bottom: calc(var(--gs-u-h) * 0.42);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--player-meta-dock-gap);
  padding: var(--player-meta-dock-pad);
  border-radius: calc(var(--gs-u-h) * 1.2);
  background: rgba(7, 4, 13, 0.78);
  border: var(--gs-hairline) solid rgba(255, 200, 120, 0.2);
  box-shadow: 0 calc(var(--gs-u-w) * 1) calc(var(--gs-u-h) * 3.4) rgba(0, 0, 0, 0.5);
}

.player-meta-dock__btn {
  width: var(--player-meta-dock-btn-size);
  height: var(--player-meta-dock-btn-size);
  border-radius: calc(var(--gs-u-h) * 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e9d5b2;
  border: var(--gs-hairline) solid rgba(218, 170, 100, 0.45);
  background: linear-gradient(165deg, #1a1322 0%, #0a0610 100%);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.player-meta-dock__btn:hover {
  color: var(--gs-text-nav-hover);
  border-color: rgba(255, 204, 130, 0.72);
  box-shadow: 0 0 calc(var(--gs-u-w) * 1.75) rgba(255, 170, 80, 0.2);
}

.player-meta-dock__btn--active {
  border-color: rgba(255, 194, 110, 0.8);
  box-shadow: inset 0 0 0 var(--gs-hairline) rgba(255, 214, 150, 0.2);
}

.player-meta-dock__icon {
  width: var(--player-meta-dock-icon-size);
  height: var(--player-meta-dock-icon-size);
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--gs-u-h) * 0.11) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.5));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.player-meta-dock__btn:hover .player-meta-dock__icon,
.player-meta-dock__btn:focus-visible .player-meta-dock__icon {
  transform: scale(1.06);
  filter:
    drop-shadow(0 calc(var(--gs-u-h) * 0.11) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 calc(var(--gs-u-w) * 0.65) rgba(255, 190, 100, 0.18));
}

.player-meta-dock__btn--active .player-meta-dock__icon {
  filter:
    drop-shadow(0 calc(var(--gs-u-h) * 0.11) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 calc(var(--gs-u-w) * 0.88) rgba(255, 198, 112, 0.22));
}

/* Layout shell for player-hud panels. Chrome comes from composing ``ornate-panel``
   (+ ``OrnatePanelCorners``) — do not reintroduce border/fill here. */
.player-panel {
  position: absolute;
  inset: calc(var(--gs-u-h) * 5) calc(var(--gs-u-w) * 7) calc(var(--gs-u-h) * 9) calc(var(--gs-u-w) * 7);
  /* Above game-wallet-hud (6) + player-meta-dock (8) so hub exit tooltip can stack over HUD chrome. */
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.94);
  padding: calc(var(--gs-u-h) * 1.1);
  box-sizing: border-box;
  overflow: visible;
}

/* Keep absolute positioning when co-classed with ornate-panel (which sets relative). */
.player-panel.ornate-panel {
  position: absolute;
  overflow: visible;
}

/* Scroll the content stack so ornate corner wedges stay unclipped. */
.player-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.player-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gs-u-h) * 0.88);
}

.player-panel__title {
  margin: 0;
  font-size: var(--gs-text-sm);
  color: #ffe0ab;
  letter-spacing: calc(var(--gs-u-w) * 0.05);
}

.player-panel__muted {
  margin: 0;
  color: #cdbba0;
  font-size: var(--gs-text-xs);
}

.player-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gs-u-h) * 0.88);
}

.player-tile {
  border-radius: var(--gs-radius-md);
  border: var(--gs-hairline) solid rgba(255, 200, 120, 0.18);
  background: rgba(14, 10, 22, 0.92);
  padding: calc(var(--gs-u-h) * 0.72) calc(var(--gs-u-w) * 0.82);
}

.player-tile--wide {
  grid-column: 1 / -1;
}

.player-tile__k {
  margin: 0 0 calc(var(--gs-u-h) * 0.24);
  color: #c8b79a;
  font-size: var(--gs-text-2xs);
  text-transform: uppercase;
  letter-spacing: calc(var(--gs-u-w) * 0.18);
}

.player-tile__v {
  margin: 0;
  color: #f4ead8;
  font-weight: 700;
}

.player-tile__v--vip {
  display: flex;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.38);
}

/* CTA button anchored inside a player-tile (e.g. VIP daily claim). Spaces
   the button below the tile's value row without inline style soup. */
.player-tile__cta {
  margin-top: calc(var(--gs-u-h) * 0.6);
}

.player-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--gs-u-h) * 11.5), 1fr));
  gap: calc(var(--gs-u-h) * 0.72);
  align-content: start;
}

.player-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.5);
}

.player-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gs-u-h) * 0.72);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(255, 200, 120, 0.16);
  background: rgba(13, 9, 21, 0.84);
  padding: calc(var(--gs-u-h) * 0.53) calc(var(--gs-u-w) * 0.65);
}

.player-list__left {
  min-width: 0;
}

.player-list__title {
  margin: 0;
  font-size: var(--gs-text-xs);
  color: #f0e4cc;
}

.player-list__meta {
  margin: calc(var(--gs-u-h) * 0.2) 0 0;
  color: #c8b79a;
  font-size: var(--gs-text-2xs);
}

.player-list__row--gear .player-list__left--gear {
  display: flex;
  align-items: center;
}

.player-list__gear-thumb {
  width: calc(var(--gs-u-h) * 6.2);
  height: calc(var(--gs-u-h) * 6.2);
  object-fit: contain;
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(255, 200, 120, 0.22);
  background: rgba(8, 5, 14, 0.65);
  display: block;
}

.player-item-badge {
  padding: calc(var(--gs-u-h) * 0.2) calc(var(--gs-u-w) * 0.46);
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(255, 200, 120, 0.28);
  color: #ffe4b8;
  background: rgba(36, 25, 49, 0.8);
  font-size: var(--gs-text-2xs);
  font-weight: 700;
}

.player-action-btn {
  border: var(--gs-hairline) solid var(--gs-border-gold);
  border-radius: var(--gs-radius-xs);
  color: var(--gs-text-nav);
  background: linear-gradient(165deg, #1a1322 0%, #0a0610 100%);
  padding: calc(var(--gs-u-h) * 0.38) calc(var(--gs-u-w) * 0.65);
  font-size: var(--gs-text-2xs);
  cursor: pointer;
}

.player-action-btn:hover {
  color: var(--gs-text-nav-hover);
}

.player-quests-tabs {
  display: flex;
  gap: calc(var(--gs-u-h) * 0.55);
  flex-wrap: wrap;
}

.player-meta-dock__dev-mark {
  font-size: calc(var(--gs-u-h) * 1.2);
  font-weight: 800;
  letter-spacing: calc(var(--gs-u-w) * 0.14);
  color: #ffb870;
  line-height: 1;
}

.player-meta-dock__btn--dev {
  border-color: rgba(255, 140, 72, 0.55);
}

/* Settings content layout — shell/backdrop/title tokens live on .game-dialog (game-dialog.css). */
.global-settings-dialog__panel {
  display: flex;
  flex-direction: column;
  width: calc(var(--gs-u-w) * 48);
  max-height: calc(var(--gs-u-h) * 80);
  overflow: hidden;
  padding: calc(var(--gs-u-h) * 0.75);
  border-radius: var(--gs-radius-lg);
  color: #f0e8dc;
  box-sizing: border-box;
}

.global-settings-dialog__panel.brass-panel {
  background: transparent;
}

.global-settings-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--gs-u-h) * 0.65);
  margin-bottom: calc(var(--gs-u-h) * 0.45);
  flex-shrink: 0;
}

.global-settings-dialog__nav {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--gs-u-w) * 0.28);
  margin: 0;
  padding: 0 calc(var(--gs-u-w) * 0.15);
  flex-shrink: 0;
  border-bottom: var(--gs-hairline) solid rgba(218, 170, 100, 0.32);
}

.global-settings-dialog__nav-tab {
  flex: 0 1 auto;
  min-width: calc(var(--gs-u-w) * 9.5);
  margin: 0;
  margin-bottom: calc(var(--gs-hairline) * -1);
  padding: calc(var(--gs-u-h) * 0.42) calc(var(--gs-u-w) * 1.05);
  border: var(--gs-hairline) solid rgba(255, 190, 120, 0.35);
  border-bottom: none;
  border-radius: var(--gs-radius-sm) var(--gs-radius-sm) 0 0;
  font: inherit;
  font-size: var(--gs-text-xs);
  font-weight: 600;
  letter-spacing: calc(var(--gs-u-w) * 0.05);
  line-height: 1.12;
  text-transform: none;
  color: rgba(200, 182, 155, 0.92);
  opacity: 0.82;
  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28)),
    url("/assets/icons/decals/button-decal.webp?v=b58ecc19c550") center / 100% 100% no-repeat;
  box-shadow:
    0 calc(var(--gs-u-h) * 0.22) calc(var(--gs-u-h) * 0.65) rgba(0, 0, 0, 0.45),
    inset 0 0 0 var(--gs-hairline) rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
}

.global-settings-dialog__nav-tab:hover,
.global-settings-dialog__nav-tab:focus-visible {
  opacity: 1;
  color: rgba(255, 236, 210, 0.96);
  border-color: rgba(255, 185, 115, 0.48);
  box-shadow:
    0 calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-h) * 1.45) rgba(0, 0, 0, 0.5),
    0 0 calc(var(--gs-u-w) * 0.65) rgba(255, 140, 60, 0.12),
    inset 0 var(--gs-hairline) 0 rgba(255, 220, 185, 0.08);
  transform: translateY(calc(var(--gs-u-h) * -0.08));
}

.global-settings-dialog__nav-tab--active,
.global-settings-dialog__nav-tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  opacity: 1;
  color: #fffdf6;
  font-weight: 800;
  letter-spacing: calc(var(--gs-u-w) * 0.06);
  text-shadow:
    0 var(--gs-hairline) 0 rgba(255, 255, 255, 0.18),
    0 calc(var(--gs-hairline) * -1) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 228, 170, 0.78);
  background:
    linear-gradient(rgba(255, 232, 190, 0.16), rgba(0, 0, 0, 0.2)),
    url("/assets/icons/decals/button-decal.webp?v=b58ecc19c550") center / 100% 100% no-repeat;
  box-shadow:
    0 0 calc(var(--gs-u-w) * 1.1) rgba(255, 185, 90, 0.28),
    0 calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-h) * 1.65) rgba(0, 0, 0, 0.48),
    inset 0 var(--gs-hairline) 0 rgba(255, 255, 255, 0.2),
    inset 0 calc(var(--gs-hairline) * -1) 0 rgba(0, 0, 0, 0.42);
  transform: translateY(calc(var(--gs-hairline) * -1));
}

.global-settings-dialog__tab-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--gs-u-h) * 0.35);
}

.global-settings-dialog__tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: calc(var(--gs-u-h) * 48);
  overflow-y: auto;
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-w) * 0.1) calc(var(--gs-u-h) * 0.15);
}

.global-settings-dialog__tab-panel--information {
  min-height: unset;
}

.global-settings-dialog__info-sheet {
  min-height: 100%;
  padding: calc(var(--gs-u-h) * 0.45);
  border-radius: var(--gs-radius-sm);
  box-sizing: border-box;
}

.global-settings-dialog__info-sheet .global-settings-info-home,
.global-settings-dialog__info-sheet .global-settings-info-grid,
.global-settings-dialog__info-sheet .global-settings-dialog__legal-view {
  position: relative;
  z-index: 1;
}

.global-settings-info-home {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.55);
  min-height: 0;
}

.global-settings-info-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.25);
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-w) * 0.4);
  text-align: center;
}

.global-settings-info-brand__logo {
  display: block;
  width: calc(var(--gs-u-w) * 10);
  max-width: 100%;
  height: auto;
}

.global-settings-info-brand__line {
  margin: 0;
  font-size: var(--gs-text-xs);
  line-height: 1.35;
  color: #d8c4a8;
}

.global-settings-info-brand__imprint {
  font-size: var(--gs-text-xs);
  color: #e8b878;
  text-decoration: underline;
  text-underline-offset: calc(var(--gs-u-h) * 0.12);
}

.global-settings-info-brand__imprint:hover,
.global-settings-info-brand__imprint:focus-visible {
  color: #ffe8c4;
}

.global-settings-dialog__tab-panel--information .global-settings-dialog__legal-view {
  height: 100%;
  min-height: 0;
}

.global-settings-dialog__tab-panel--information .global-settings-dialog__legal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.global-settings-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--gs-u-h) * 0.35);
}

.global-settings-info-btn {
  box-sizing: border-box;
  margin: 0;
  min-height: calc(var(--gs-u-h) * 2.65);
  padding: calc(var(--gs-u-h) * 0.5) calc(var(--gs-u-h) * 0.55);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(218, 170, 100, 0.42);
  background: rgba(8, 5, 14, 0.72);
  font: inherit;
  font-size: var(--gs-text-xs);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #e8cfaf;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

.global-settings-info-btn:hover,
.global-settings-info-btn:focus-visible {
  border-color: rgba(255, 200, 120, 0.65);
  color: #fff2dc;
  background: rgba(18, 12, 28, 0.92);
  box-shadow: 0 0 0 var(--gs-hairline) rgba(255, 200, 120, 0.2);
}

.global-settings-info-btn:active {
  color: #1a1208;
  background: linear-gradient(165deg, #e8c489 0%, #c99552 100%);
  border-color: rgba(120, 70, 30, 0.45);
}

.global-settings-info-btn--wide {
  grid-column: 1 / -1;
}

.global-settings-info-btn--link {
  font-weight: 500;
  font-size: var(--gs-text-xs);
  color: #e8b878;
  background: rgba(8, 5, 14, 0.55);
}

.global-settings-info-btn--link:hover,
.global-settings-info-btn--link:focus-visible {
  color: #ffe8c4;
}

.global-settings-dialog__legal-view {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.45);
}

.global-settings-dialog__legal-title {
  margin: 0;
  font-size: var(--gs-text-md);
  color: #ffd9a4;
}

.global-settings-dialog__legal-status {
  margin: 0;
  font-size: var(--gs-text-xs);
  line-height: 1.45;
  color: #d4c3a8;
}

.global-settings-dialog__legal-retry {
  margin-left: calc(var(--gs-u-w) * 0.35);
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: inherit;
  color: #e8b878;
  text-decoration: underline;
  cursor: pointer;
}

.global-settings-dialog__legal-scroll {
  max-height: calc(var(--gs-u-h) * 52);
  overflow-y: auto;
  padding-right: calc(var(--gs-u-w) * 0.25);
}

/* Game shell presentation for server-rendered legal-document HTML (Settings → Information). */
.global-settings-dialog__legal-scroll .legal-document__studio-logo {
  width: calc(var(--gs-u-w) * 10);
  max-width: 100%;
  margin: 0 0 calc(var(--gs-u-h) * 0.35);
}

.global-settings-dialog__legal-scroll .legal-document {
  white-space: normal;
  font-size: var(--gs-text-xs);
  line-height: 1.5;
  color: #d4c3a8;
}

.global-settings-dialog__legal-scroll .legal-document section {
  margin: 0 0 calc(var(--gs-u-h) * 0.55);
}

.global-settings-dialog__legal-scroll .legal-document h2 {
  margin: 0 0 calc(var(--gs-u-h) * 0.25);
  font-size: var(--gs-text-sm);
  color: #ffd9a4;
}

.global-settings-dialog__legal-scroll .legal-document p {
  margin: 0 0 calc(var(--gs-u-h) * 0.35);
}

.global-settings-dialog__legal-scroll .legal-document a {
  color: #e8b878;
}

.global-settings-dialog__legal-scroll .legal-document__locale-note {
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.45);
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(218, 170, 100, 0.28);
  background: rgba(8, 5, 14, 0.55);
  font-size: var(--gs-text-2xs);
  color: #b8a890;
}

.global-settings-dialog__legal-scroll .legal-document__redacted {
  color: #a89880;
  font-style: italic;
}

.global-settings-dialog__legal-scroll .legal-document__version {
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-2xs);
  color: #b8a890;
}

.global-settings-dialog__terminate-status {
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-xs);
  color: #d4c3a8;
}

.global-settings-dialog__terminate-open {
  color: #e8cfaf;
  background: rgba(8, 5, 14, 0.72);
  border: var(--gs-hairline) solid rgba(218, 170, 100, 0.42);
}

/* Terminate confirmation overlay (stacked modal on top of global settings).
 * Shell/backdrop: .game-dialog; panel chrome stays settings-specific. */
.global-settings-terminate-dialog__panel {
  width: calc(var(--gs-u-w) * 36);
  padding: calc(var(--gs-u-h) * 0.75);
  border-radius: var(--gs-radius-lg);
  border: var(--gs-hairline) solid rgba(255, 200, 120, 0.28);
  background: rgba(12, 8, 20, 0.96);
  box-shadow: 0 calc(var(--gs-u-h) * 2) calc(var(--gs-u-h) * 5.3) rgba(0, 0, 0, 0.55);
  color: #f0e8dc;
}

.global-settings-terminate-dialog__panel .game-dialog__title {
  margin-bottom: calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-md);
}

.global-settings-terminate-dialog__copy {
  margin: 0 0 calc(var(--gs-u-h) * 0.5);
  font-size: var(--gs-text-xs);
  line-height: 1.45;
  color: #d4c3a8;
}

.global-settings-terminate-dialog__ack {
  display: flex;
  gap: calc(var(--gs-u-h) * 0.5);
  align-items: center;
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-xs);
  line-height: 1.45;
  cursor: pointer;
}

.global-settings-terminate-dialog__ack-text {
  color: #e86a52;
  font-weight: 600;
}

.global-settings-terminate-dialog .global-settings-terminate-dialog__ack-check[type="checkbox"] {
  width: var(--gs-text-xs);
  height: var(--gs-text-xs);
  flex-shrink: 0;
  border-radius: calc(var(--gs-radius-xs) * 0.45);
}

.global-settings-terminate-dialog .global-settings-terminate-dialog__ack-check[type="checkbox"]::before {
  width: calc(var(--gs-text-xs) * 0.55);
  height: calc(var(--gs-text-xs) * 0.55);
}

.global-settings-terminate-dialog__panel .game-dialog__error {
  margin-bottom: calc(var(--gs-u-h) * 0.35);
  font-size: var(--gs-text-xs);
  color: #e86a52;
}

.global-settings-terminate-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gs-u-h) * 0.35);
}

.global-settings-terminate-dialog__cancel {
  color: #e8cfaf;
  background: rgba(8, 5, 14, 0.72);
  border: var(--gs-hairline) solid rgba(218, 170, 100, 0.42);
}

.global-settings-terminate-dialog__submit {
  color: #1a0808;
  font-weight: 700;
  background: linear-gradient(165deg, #ff9a7a 0%, #d84a32 100%);
  border: var(--gs-hairline) solid rgba(120, 30, 20, 0.65);
}

.global-settings-terminate-dialog__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.global-settings-dialog__summary--danger {
  color: #e8a0a0;
}

.global-settings-dialog__danger-btn {
  border-color: #8b3a3a;
  color: #f0c0c0;
}

.global-settings-dialog__session-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.75rem;
}
.global-settings-dialog__account-sheet {
  padding: calc(var(--gs-u-h) * 0.75) calc(var(--gs-u-h) * 0.35);
  box-sizing: border-box;
}

.global-settings-dialog__account-teaser {
  margin: 0 0 calc(var(--gs-u-h) * 1.5);
  font-size: calc(var(--gs-u-h) * 1.35);
  line-height: 1.45;
  color: rgba(255, 236, 210, 0.82);
}

.global-settings-dialog__account-meta {
  margin: 0 0 calc(var(--gs-u-h) * 1.5);
  font-size: calc(var(--gs-u-h) * 1.3);
  color: rgba(255, 220, 180, 0.9);
}

.global-settings-dialog__account-error {
  margin: calc(var(--gs-u-h) * 1) 0 0;
  color: #f0a0a0;
  font-size: calc(var(--gs-u-h) * 1.3);
}

.global-settings-dialog__account-days-input {
  display: block;
  width: 100%;
  max-width: calc(var(--gs-u-w) * 8);
  margin: 0 0 calc(var(--gs-u-h) * 1.5);
  padding: calc(var(--gs-u-h) * 0.75) calc(var(--gs-u-h) * 1);
  font-size: calc(var(--gs-u-h) * 1.4);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 175, 95, 0.45);
  color: #f5e6c8;
}

.visual-credits-page__body {
  margin-top: calc(var(--gs-u-h) * 0.35);
  font-size: var(--gs-text-sm);
  line-height: 1.5;
  color: #d4c3a8;
}

.visual-credits-section {
  margin: 0 0 calc(var(--gs-u-h) * 1.4);
}

.visual-credits-section__title {
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-md);
  font-weight: 600;
  color: #f0e0c0;
}

.visual-credits-section__body {
  margin: 0;
}

.visual-credits-section__link {
  margin: calc(var(--gs-u-h) * 0.45) 0 0;
}

.visual-credits-section__link a {
  color: #e8c878;
}


.global-settings-dialog__close {
  border: none;
  background: transparent;
  color: #d8c4a8;
  font-size: var(--gs-text-lg);
  line-height: 1;
  cursor: pointer;
  padding: calc(var(--gs-u-h) * 0.11) calc(var(--gs-u-w) * 0.38);
  border-radius: var(--gs-radius-xs);
}

.global-settings-dialog__close:hover,
.global-settings-dialog__close:focus-visible {
  color: #fff2dc;
  background: var(--gs-border-gold-warm-subtle);
}

.global-settings-dialog__section {
  margin-bottom: calc(var(--gs-u-h) * 0.94);
}

.global-settings-dialog__group {
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  padding: 0;
  border-radius: var(--gs-radius-sm);
  overflow: hidden;
}

.global-settings-dialog__group:last-child {
  margin-bottom: 0;
}

.global-settings-dialog__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gs-u-h) * 0.65);
  padding: calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-sm);
  font-weight: 600;
  color: #e8cfaf;
  user-select: none;
}

.global-settings-dialog__summary::-webkit-details-marker {
  display: none;
}

.global-settings-dialog__summary::marker {
  content: "";
}

.global-settings-dialog__fine-print {
  margin: 0 0 calc(var(--gs-u-h) * 0.35);
  font-size: calc(var(--gs-u-h) * 1.2);
  font-style: italic;
  line-height: 1.35;
  color: #9a8a78;
}

.global-settings-dialog__group-body {
  --gs-settings-label-w: calc(var(--gs-u-w) * 12);
  --gs-settings-gap-w: calc(var(--gs-u-w) * 3);
  --gs-settings-control-w: calc(var(--gs-u-w) * 28);
  padding: 0 calc(var(--gs-u-h) * 0.45) calc(var(--gs-u-h) * 0.55);
}

.global-settings-dialog__group-body--credits {
  display: flex;
  justify-content: flex-end;
}

.global-settings-dialog__group-body.audio-controls--card {
  margin-top: 0;
  padding-top: 0;
}

.global-settings-dialog__sub {
  margin: 0 0 calc(var(--gs-u-h) * 0.38);
  font-size: var(--gs-text-sm);
  color: #e8cfaf;
}

.global-settings-dialog__field-grid {
  display: grid;
  grid-template-columns: var(--gs-settings-label-w) var(--gs-settings-gap-w) var(--gs-settings-control-w);
  row-gap: calc(var(--gs-u-h) * 0.32);
  align-items: center;
}

.global-settings-dialog__field-row {
  display: contents;
}

.global-settings-dialog__field-label {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  font-size: var(--gs-text-2xs);
  line-height: 1.3;
  color: #d4c3a8;
}

.global-settings-dialog__field-control {
  grid-column: 3;
  width: 100%;
  min-width: 0;
}

.global-settings-dialog__field-control > .global-settings-toggle {
  width: 100%;
}

.global-settings-dialog__field-control--range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--gs-u-w) * 0.45);
}

.global-settings-dialog__field-control--range .audio-range__readout {
  min-width: calc(var(--gs-u-w) * 2.8);
  text-align: right;
  font-size: var(--gs-text-2xs);
  font-variant-numeric: tabular-nums;
  color: #d4c3a8;
}

.global-settings-article-toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.42);
  width: 100%;
  min-width: 0;
  min-height: calc(var(--gs-u-h) * 2.45);
  padding:
    calc(var(--gs-u-h) * 0.42)
    calc(var(--gs-u-h) * 0.36)
    calc(var(--gs-u-h) * 0.42)
    calc(var(--gs-u-h) * 0.44);
  border-radius: calc(var(--gs-radius-xs) * 0.9);
  border: var(--gs-hairline) solid rgba(118, 84, 48, 0.42);
  background: rgba(8, 5, 12, 0.74);
  box-sizing: border-box;
  overflow: visible;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.global-settings-article-toggle:has(.global-settings-article-toggle__input:checked) {
  border-color: rgba(255, 178, 88, 0.84);
  background: rgba(22, 12, 8, 0.82);
  box-shadow:
    inset 0 0 calc(var(--gs-u-h) * 0.5) rgba(255, 140, 50, 0.07),
    0 0 calc(var(--gs-u-w) * 0.65) rgba(255, 140, 50, 0.14);
}

.global-settings-article-toggle:has(.global-settings-article-toggle__input:not(:checked)):hover {
  border-color: rgba(168, 120, 68, 0.55);
  background: rgba(10, 6, 14, 0.82);
}

.global-settings-article-toggle:has(.global-settings-article-toggle__input:checked):hover {
  border-color: rgba(255, 196, 118, 0.92);
  box-shadow:
    inset 0 0 calc(var(--gs-u-h) * 0.55) rgba(255, 150, 60, 0.1),
    0 0 calc(var(--gs-u-w) * 0.85) rgba(255, 150, 60, 0.2);
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: calc(var(--gs-u-h) * 1.12);
  height: calc(var(--gs-u-h) * 1.12);
  margin: 0 calc(var(--gs-u-w) * 0.12);
  border: none;
  border-radius: 50%;
  background: rgba(4, 2, 8, 0.34);
  box-shadow: none;
  display: inline-grid;
  place-content: center;
  overflow: visible;
  cursor: pointer;
  transition:
    background 140ms ease,
    transform 90ms ease;
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"]::before {
  content: "";
  width: calc(var(--gs-u-w) * 0.78);
  height: calc(var(--gs-u-h) * 0.78);
  clip-path: polygon(14% 53%, 0 67%, 39% 100%, 100% 18%, 84% 3%, 38% 66%);
  transform: scale(0);
  transform-origin: center;
  transition: transform 160ms cubic-bezier(0.34, 1.35, 0.64, 1);
  background: linear-gradient(180deg, #fff3dc 0%, #e8b86a 100%);
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 3px rgba(255, 199, 112, 0.4));
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"]:hover {
  background: rgba(4, 2, 8, 0.48);
  border-color: transparent;
  box-shadow: none;
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"]:active {
  transform: translateY(1px);
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"]:checked {
  background: rgba(4, 2, 8, 0.4);
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"]:checked::before {
  transform: scale(1.18);
}

.global-settings-article-toggle .global-settings-article-toggle__input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(255, 221, 170, 0.75);
  outline-offset: 2px;
}

.global-settings-article-toggle__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--gs-text-2xs);
  line-height: 1.35;
  color: #e8dcc8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-settings-article-toggle:has(.global-settings-article-toggle__input:not(:checked)) .global-settings-article-toggle__text {
  color: #9a8a78;
}

.global-settings-article-grid {
  --gs-article-grid-gap-x: calc(var(--gs-u-w) * 0.22);
  --gs-article-grid-gap-y: calc(var(--gs-u-h) * 0.18);
  --gs-article-toggle-max-w: calc(
    (var(--gs-settings-control-w, 100%) - 2 * var(--gs-article-grid-gap-x)) / 3
  );
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gs-article-grid-gap-y) var(--gs-article-grid-gap-x);
  justify-items: start;
  align-items: start;
}

.global-settings-article-grid--auto {
  --gs-article-toggle-max-w: calc(
    (var(--gs-settings-control-w, 100%) - var(--gs-article-grid-gap-x)) / 2
  );
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.global-settings-article-grid--duo {
  --gs-article-toggle-max-w: calc(
    (var(--gs-settings-control-w, 100%) - var(--gs-article-grid-gap-x)) / 2
  );
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.global-settings-article-grid--solo {
  --gs-article-toggle-max-w: var(--gs-settings-control-w, 100%);
  grid-template-columns: minmax(0, 1fr);
}

.global-settings-article-grid--solo .global-settings-article-toggle__text {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.global-settings-article-grid__item {
  min-width: 0;
  max-width: var(--gs-article-toggle-max-w);
  width: 100%;
}

.global-settings-article-grid__label {
  width: 100%;
}

.global-settings-toggle {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: var(--gs-hairline);
  border-radius: calc(var(--gs-radius-sm) - var(--gs-hairline));
  border: var(--gs-hairline) solid rgba(218, 170, 100, 0.42);
  background: rgba(6, 4, 11, 0.92);
  gap: var(--gs-hairline);
  box-sizing: border-box;
}

.global-settings-toggle--compact {
  padding: var(--gs-hairline);
}

.global-settings-toggle__opt {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: calc(var(--gs-u-h) * 0.2) calc(var(--gs-u-h) * 0.12);
  border: none;
  border-radius: calc(var(--gs-radius-sm) - var(--gs-stroke));
  font: inherit;
  font-size: var(--gs-text-2xs);
  line-height: 1.2;
  cursor: pointer;
  color: #c8bba8;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.global-settings-toggle__opt:hover {
  color: #ede4d4;
}

.global-settings-toggle__opt:focus-visible {
  outline: var(--gs-stroke) solid rgba(255, 200, 120, 0.65);
  outline-offset: var(--gs-hairline);
}

.global-settings-toggle__opt--active,
.global-settings-toggle__opt[aria-pressed="true"],
.global-settings-toggle__opt[aria-selected="true"] {
  color: #1a1208;
  background: linear-gradient(165deg, #e8c489 0%, #c99552 100%);
  box-shadow:
    0 0 0 var(--gs-hairline) rgba(120, 70, 30, 0.35),
    inset 0 var(--gs-hairline) 0 rgba(255, 235, 200, 0.35);
}

.global-settings-dialog__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: calc(var(--gs-u-h) * 0.35);
  flex-shrink: 0;
}

.global-settings-block-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.2);
}

.global-settings-block-list__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: calc(var(--gs-u-h) * 0.2);
  align-items: center;
  font-size: var(--gs-text-xs);
}

.global-settings-block-list__name {
  color: #fff3dc;
}

.global-settings-block-list__date {
  color: #a89880;
  font-size: var(--gs-text-2xs);
}

.global-settings-block-list__empty {
  margin: 0;
  font-size: var(--gs-text-xs);
  color: #a89880;
}

.global-settings-block-list__unblock {
  padding: calc(var(--gs-u-h) * 0.08) calc(var(--gs-u-h) * 0.25);
  font-size: var(--gs-text-2xs);
}