.dx-side { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }

.dx-side .dx-monitor { grid-area: auto; }
.dx-mon__name { display: grid; gap: var(--space-1); }
.dx-basis { margin: 0; max-inline-size: var(--text-max); color: var(--text-muted); }

.dx-side .dx-monitor {
  background:
    linear-gradient(90deg, transparent, rgba(160, 150, 210, .5), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(38, 37, 44, .86), rgba(21, 20, 26, .8)),
    var(--bg);
}
[data-theme="light"] .dx-side .dx-monitor {
  background:
    linear-gradient(90deg, transparent, rgba(108, 77, 196, .35), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72)),
    var(--bg);
}

.dx-mon__pulse {
  --dx-pc: var(--link);
  position: absolute; z-index: 2; inset-inline: var(--radius-lg); inset-block-end: -1px; block-size: 2px;
  border-radius: 2px; pointer-events: none;
  background: var(--dx-pc); box-shadow: 0 0 14px 1px var(--dx-pc), 0 0 2px var(--dx-pc);
  opacity: 0; transform-origin: 50% 50%;
}
.dx-mon__pulse[data-kind="casino"] { --dx-pc: var(--dx-down); }
.dx-mon__pulse[data-kind="growth"], .dx-mon__pulse[data-kind="asset"] { --dx-pc: var(--dx-up); }
.dx-mon__pulse[data-kind="estate"] { --dx-pc: var(--link); }
.dx-mon__pulse[data-kind="day"] { --dx-pc: var(--text); }

.dx-monitor.is-pulse > .dx-mon__pulse { opacity: 1; }

@media (min-width: 760px) {

  .dx-game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); row-gap: 0; }
  .dx-game > .dx-bar, .dx-game > .dx-rules, .dx-game > .dx-res, .dx-game > .dx-verdict, .dx-game > .dx-grid { grid-column: 1; }
  .dx-game > .dx-rules, .dx-game > .dx-res, .dx-game > .dx-verdict, .dx-game > .dx-grid { margin-block-start: var(--space-5); }
  .dx-game > .dx-side { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; }

  .js .dx-intro, .js .dx-credits { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); }
  .js .dx-intro > *, .js .dx-credits > * { grid-column: 1; }
  .js .dx-rule > .hairline { inline-size: calc((100% - var(--space-5)) / 2); }
  .dx-game > .dx-side { margin-block: calc(-1 * var(--dx-rise, 0px)) calc(-1 * var(--dx-sink, 0px)); }

  .dx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "inv" "shop"; }

  .dx-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-res__lc { grid-column: 1 / -1; }

  .dx-side .dx-monitor {
    position: sticky; z-index: 2;
    inset-block-start: calc(var(--dx-head, var(--head-h, 76px)) + var(--space-4));
  }

  .dx-side.is-loose .dx-monitor { position: relative; inset-block-start: auto; }

  .dx-shop { margin-block-end: var(--dx-tail, 0px); }

  .dx-side .dx-scope { --dx-sh: min(clamp(220px, 34vw, 260px), var(--dx-fit, 260px)); }
  .dx-side .dx-fold { display: none; }

  .dx-side > .dx-legend { padding-inline: var(--space-5); }
}
@media (min-width: 1100px) {
  .dx-game, .js .dx-intro, .js .dx-credits { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .js .dx-rule > .hairline { inline-size: calc((100% - var(--space-5)) * 1.15 / 2); }
  .dx-grid { grid-template-columns: minmax(0, 1fr); }

  .dx-res { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dx-side > .dx-legend { padding-inline: var(--space-6); }
}

@media (min-width: 760px) and (max-height: 820px) {
  .dx-side .dx-monitor { gap: var(--space-3); padding-block: var(--space-4); }
}

@media (min-width: 760px) and (max-height: 520px) {
  .dx-side .dx-monitor {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "state pause" "scope read";
    gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4);
  }
  .dx-side .dx-mon__head { display: contents; }
  .dx-side .dx-mon__name {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .dx-side .dx-state { grid-area: state; justify-self: start; max-inline-size: 100%; white-space: nowrap; overflow: hidden; }
  .dx-side .dx-pause { grid-area: pause; }
  .dx-side .dx-scope { grid-area: scope; align-self: stretch; --dx-sh: min(150px, var(--dx-fit, 150px)); }
  .dx-side .dx-read {
    grid-area: read; align-self: stretch; grid-template-columns: minmax(0, 1fr); align-content: space-between;
    gap: 0; min-inline-size: 5.5rem;
  }
  .dx-side .dx-read div { gap: 0; padding-block: 0; border-block-start: 0; }
  .dx-side .dx-read div + div { padding-block-start: var(--space-1); border-block-start: 1px solid var(--dx-line); }
  .dx-side .dx-read dt { font-size: .625rem; line-height: 1.35; }
  .dx-side .dx-read dd { font-size: 1.0625rem; line-height: 1.2; }
}

@media (max-width: 759px) {
  .dx-game { display: flex; flex-direction: column; }
  .dx-side { display: contents; }

  .dx-game .dx-side .dx-monitor {
    position: sticky; z-index: 20; inset-block-start: calc(var(--dx-head, var(--head-h, 68px)) - 1px);
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-2) var(--gutter) var(--space-3);
    border-radius: 0; border-width: 1px 0; border-style: solid; border-color: var(--dx-line);
    background:
      linear-gradient(90deg, transparent, rgba(160, 150, 210, .45), transparent) top / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(38, 37, 44, .86), rgba(21, 20, 26, .8)),
      var(--bg);
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "state pause fold" "scope read read";
    gap: var(--space-2) var(--space-3);
    align-items: center;
  }
  [data-theme="light"] .dx-game .dx-side .dx-monitor {
    border-color: var(--border);
    background:
      linear-gradient(90deg, transparent, rgba(108, 77, 196, .3), transparent) top / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72)),
      var(--bg);
    box-shadow: none;
  }

  .dx-side .dx-monitor::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(100% + 1px); block-size: 18px;
    pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(10, 9, 14, .55), rgba(10, 9, 14, 0));
  }
  [data-theme="light"] .dx-side .dx-monitor::after { background: linear-gradient(180deg, rgba(21, 20, 26, .12), rgba(21, 20, 26, 0)); }
  .motion-ok .dx-side .dx-monitor::after { transition: opacity var(--dur-fast) var(--ease-out); }
  .dx-side .dx-monitor.is-stuck::after { opacity: 1; }

  .dx-side .dx-mon__head { display: contents; }
  .dx-side .dx-mon__name {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .dx-side .dx-state {
    grid-area: state; max-inline-size: 100%; padding: 3px var(--space-3);
    font-size: .6875rem; white-space: nowrap; overflow: hidden;
  }
  .dx-side .dx-pause { grid-area: pause; }
  .dx-side .dx-fold { grid-area: fold; }
  .dx-side .dx-pause, .dx-side .dx-fold { inline-size: 44px; padding: 0; }
  .dx-side .dx-pause .lbl, .dx-side .dx-fold .lbl {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .dx-fold__ic { position: relative; z-index: 1; }
  .motion-ok .dx-fold__ic { transition: transform var(--dur-fast) var(--ease-out); }
  .is-folded .dx-fold__ic { transform: rotate(180deg); }

  .dx-side .dx-scope { grid-area: scope; align-self: stretch; --dx-sh: 108px; }
  .dx-side .dx-read {
    grid-area: read; align-self: stretch; grid-template-columns: minmax(0, 1fr); align-content: space-between;
    gap: 0; min-inline-size: 5.5rem;
  }
  .dx-side .dx-read div { gap: 0; padding-block: 0; border-block-start: 0; }
  .dx-side .dx-read div + div { padding-block-start: var(--space-1); border-block-start: 1px solid var(--dx-line); }
  .dx-side .dx-read dt { font-size: .625rem; line-height: 1.35; }
  .dx-side .dx-read dd { font-size: 1.0625rem; line-height: 1.2; }

  .dx-game .dx-side .dx-monitor.is-folded {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "state read fold";
  }
  .dx-side .is-folded .dx-scope, .dx-side .is-folded .dx-pause { display: none; }
  .dx-side .is-folded .dx-state { padding-inline: var(--space-2); }
  .dx-side .is-folded .dx-state__t {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .dx-side .is-folded .dx-read {
    grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: var(--space-3); align-content: center;
  }
  .dx-side .is-folded .dx-read div + div { padding-block-start: 0; border-block-start: 0; }

  .dx-side .dx-mon__pulse { inset-inline: 0; }

  .dx-side > .dx-legend { margin-block-start: calc(-1 * var(--space-2)); }

  .dx-game > :not(.dx-side) :is(button, [contenteditable], [tabindex]), .dx-game > .dx-verdict {
    scroll-margin-block-start: calc(var(--dx-dock-h, 180px) + var(--space-3));
  }
}