:root {
  --dx-up: var(--ra-g-blue);
  --dx-down: var(--ra-g-magenta);
  --dx-up-soft: rgba(116, 176, 236, .16);
  --dx-down-soft: rgba(235, 109, 244, .14);
  --dx-line: rgba(253, 253, 251, .1);
}
:root[data-theme="light"] {
  --dx-up: var(--ra-g-indigo);
  --dx-down: var(--ra-g-violet);
  --dx-up-soft: rgba(108, 77, 196, .14);
  --dx-down-soft: rgba(146, 58, 158, .11);
  --dx-line: var(--border);
}

.dx-game [hidden] { display: none !important; }

.dx-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.dx-ic {
  inline-size: 20px; block-size: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dx-ic--lg { inline-size: 28px; block-size: 28px; }
.dx-ic--xl { inline-size: 40px; block-size: 40px; stroke-width: 1.4; }
.dx-ic--up { color: var(--dx-up); }
.dx-ic--down { color: var(--dx-down); }
.dx-ic--link { color: var(--link); }

.dx-game .ra-btn { white-space: normal; text-align: center; }
.dx-game .ra-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.dx-game .ra-btn:disabled::before { display: none; }
.dx-game .ra-btn--t2:disabled:hover::after { opacity: .7; }
.dx-game .ra-btn:disabled:hover .arrow { transform: none; }
[dir="rtl"] .dx-game .ra-btn:disabled:hover .arrow { transform: scaleX(-1); }

.dx-game b, .dx-intro b, .dx-credits b { font-weight: 600; }

.dx-glass {
  position: relative; padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .08);
  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));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--elevation-2);
  isolation: isolate;
}
[data-theme="light"] .dx-glass {
  border-color: var(--border);
  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));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--elevation-2);
}
@media (min-width: 480px) { .dx-glass { padding: var(--space-5); } }
@media (min-width: 1100px) { .dx-glass { padding: var(--space-6); } }

.dx-intro { display: grid; gap: var(--space-4); justify-items: start; padding-block: var(--space-8) var(--space-7); }

.dx-game { display: grid; gap: var(--space-5); padding-block: 0 var(--space-8); }
.dx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.dx-day { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.dx-day:focus { outline: none; }
.dx-day b {
  font: 600 var(--fs-h2)/1 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.dx-day__of { font: 500 var(--fs-mono)/1.4 var(--font-mono); color: var(--text-muted); }
.dx-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.dx-rules { display: grid; gap: var(--space-4); justify-items: start; }
.dx-rules__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-inline-size: var(--text-max); }
.dx-rules__list li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3);
  color: var(--text-muted); line-height: var(--lh-body);
}
.dx-rules__list .dx-ic { margin-block-start: 3px; }
.dx-rules__list b { color: var(--text); }

.dx-res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.dx-res li {
  display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--dx-line); border-radius: var(--radius-md);
}
.dx-res__lc { grid-column: 1 / -1; }
.dx-res__lc .dx-ic { color: var(--text); }
.dx-res__k {
  display: flex; align-items: center; gap: var(--space-2);
  font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
.dx-res__v {
  font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .dx-res { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dx-res__lc { grid-column: auto; }
}

.dx-verdict { display: grid; gap: var(--space-4); justify-items: start; }
.dx-verdict__ico {
  inline-size: 72px; block-size: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--link);
}
.dx-verdict .ra-h2:focus { outline: none; }
.dx-stats {
  margin: 0; inline-size: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
.dx-stats div {
  display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--dx-line); border-radius: var(--radius-md);
}
.dx-stats dt, .dx-read dt {
  font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
.dx-stats dd, .dx-read dd {
  margin: 0; font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.dx-stats .is-total { background: var(--accent-soft); border-color: rgba(160, 150, 210, .45); }
[data-theme="light"] .dx-stats .is-total { border-color: rgba(66, 42, 81, .25); }
@media (min-width: 720px) { .dx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dx-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 760px) {
  .dx-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "inv mon" "shop mon";
  }
  .dx-inv { grid-area: inv; }
  .dx-monitor { grid-area: mon; }
  .dx-shop { grid-area: shop; }
}
@media (min-width: 1100px) { .dx-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
@media (min-width: 760px) and (min-height: 700px) { .dx-monitor { position: sticky; top: var(--space-4); } }

.dx-inv { display: grid; gap: var(--space-4); min-inline-size: 0; }
.dx-inv__head { display: grid; gap: var(--space-1); }
.dx-inv__head .ra-small, .dx-shop > .ra-small { margin: 0; color: var(--text-muted); }
.dx-disp { display: grid; gap: var(--space-4); }
.dx-disp__row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.dx-disp__row + .dx-disp__row { padding-block-start: var(--space-4); border-block-start: 1px dashed var(--dx-line); }
.dx-disp__txt { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.dx-disp__txt b { color: var(--text); font-variant-numeric: tabular-nums; }

.dx-pile {
  position: relative; inline-size: 60px; block-size: 54px; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.dx-pile:active { cursor: grabbing; }
.dx-pile i { position: absolute; inset-inline-start: 12px; inline-size: 36px; block-size: 36px; border-radius: 50%; }
.dx-pile i:nth-child(1) { inset-block-start: 16px; }
.dx-pile i:nth-child(2) { inset-block-start: 8px; }
.dx-pile i:nth-child(3) { inset-block-start: 0; }
.dx-pile--lc i, .dx-drag--lc {
  background: var(--text);
  box-shadow: inset 0 0 0 4px var(--text), inset 0 0 0 5px var(--bg), 0 0 0 1px var(--bg), 0 2px 4px rgba(15, 13, 21, .35);
}
.dx-pile--chip i, .dx-drag--chip { background: var(--dx-down); box-shadow: 0 0 0 1px var(--bg), 0 2px 4px rgba(15, 13, 21, .35); }
.dx-pile--chip i::after, .dx-drag--chip::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px dashed rgba(253, 253, 251, .75);
}
.dx-pile.is-empty { opacity: .35; cursor: not-allowed; }

.dx-drag {
  position: fixed; left: 0; top: 0; margin: -18px 0 0 -18px; inline-size: 36px; block-size: 36px; border-radius: 50%;
  z-index: 120; pointer-events: none; will-change: transform;
}

.dx-chunk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dx-chunk .ra-mono { margin-inline-end: var(--space-2); }
.dx-chunk__btns { display: inline-flex; gap: var(--space-2); }
.dx-chunk .ra-btn { min-inline-size: 44px; padding-inline: var(--space-3); }
.dx-chunk .ra-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 -2px 0 var(--link); }
.dx-chunk .ra-btn[aria-pressed="true"]::after { opacity: 1; }
.dx-chunk .ra-btn[aria-pressed="true"]:focus-visible { box-shadow: inset 0 -2px 0 var(--link), 0 0 0 2px var(--bg), 0 0 0 4px var(--link); }

.dx-chan { display: grid; gap: var(--space-4); }
.dx-chan[data-ch="casino"] { --dx-c: var(--dx-down); --dx-cs: var(--dx-down-soft); }
.dx-chan[data-ch="growth"] { --dx-c: var(--dx-up); --dx-cs: var(--dx-up-soft); }
.dx-chan[data-ch="estate"] { --dx-c: var(--link); --dx-cs: var(--accent-soft); }
.dx-chan__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.dx-chan__head .ra-mono { margin-block-start: var(--space-1); }
.dx-chan .dx-pills .is-key { color: var(--dx-c); background: var(--dx-cs); }

.dx-chan.is-drop::before, .dx-chan.is-drop::after { opacity: 1; }
.dx-chan.is-bad-drop { outline: 2px dashed var(--text-muted); outline-offset: 3px; }

.dx-vote { margin: 0; display: grid; gap: var(--space-1); }
.dx-vote__k { font: 400 var(--fs-mono)/1.4 var(--font-mono); color: var(--text-muted); }
.dx-vote__t {
  display: block; min-block-size: 44px; padding-block: var(--space-2);
  font: italic 400 var(--fs-body)/1.5 var(--font-body); color: var(--text);
  border-block-end: 1px dashed rgba(160, 150, 210, .4); cursor: text;
}
[data-theme="light"] .dx-vote__t { border-block-end-color: rgba(108, 77, 196, .35); }
.dx-vote__t:focus { border-block-end: 1px solid var(--link); }

.dx-meter { display: flex; align-items: center; gap: var(--space-3); }
.dx-track {
  display: block; flex: 1; block-size: 4px; border-radius: var(--radius-pill); overflow: hidden;
  background: rgba(167, 163, 179, .18);
}
[data-theme="light"] .dx-track { background: rgba(94, 90, 107, .15); }
.dx-track i { display: block; block-size: 100%; background: var(--dx-c); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .dx-track i { transform-origin: 100% 50%; }
.motion-ok .dx-track i { transition: transform var(--dur-appear) var(--ease-out); }
.dx-sum { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx-chan__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.dx-monitor { display: grid; gap: var(--space-4); min-inline-size: 0; }
.dx-mon__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.dx-mon__head > div { display: grid; gap: var(--space-1); }
.dx-pause__ic {
  position: relative; z-index: 1; inline-size: 10px; block-size: 12px; flex: none;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.dx-pause.is-paused .dx-pause__ic { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

.dx-state {
  margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border: 1px solid var(--dx-line); border-radius: var(--radius-pill);
  font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text);
}
.dx-state__mark { inline-size: 10px; block-size: 10px; flex: none; background: var(--text-muted); }
.dx-state.is-up { color: var(--dx-up); }
.dx-state.is-up .dx-state__mark { background: var(--dx-up); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dx-state.is-down { color: var(--dx-down); }
.dx-state.is-down .dx-state__mark { background: var(--dx-down); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dx-state.is-flat .dx-state__mark { block-size: 2px; }

.dx-scope {
  --dx-sh: clamp(220px, 34vw, 260px);
  display: grid; place-items: center; border-radius: var(--radius-md); overflow: hidden;
  background: rgba(15, 13, 21, .35); border: 1px solid var(--dx-line);
}
[data-theme="light"] .dx-scope { background: rgba(243, 241, 246, .7); }
.dx-scope canvas { grid-area: 1 / 1; display: block; inline-size: 100%; block-size: var(--dx-sh); }
.dx-brain {
  grid-area: 1 / 1; block-size: calc(var(--dx-sh) * .86); inline-size: calc(var(--dx-sh) * .86 * 1.1765); max-inline-size: 90%;
  color: var(--link); opacity: .16;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
[data-theme="light"] .dx-brain { opacity: .12; }

.dx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.dx-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.dx-sw { flex: none; display: inline-block; inline-size: 18px; }
.dx-sw--dopa {
  block-size: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ra-g-magenta), var(--ra-g-violet) 35%, var(--ra-g-indigo) 68%, var(--ra-g-blue));
}
[data-theme="light"] .dx-sw--dopa { background: linear-gradient(90deg, var(--ra-g-violet), var(--ra-g-indigo) 55%, var(--ra-g-royal)); }
.dx-sw--pain { border-block-start: 2px dotted var(--dx-down); }
.dx-sw--base { border-block-start: 2px dashed var(--text-muted); }
.dx-sw--tax {
  block-size: 12px; border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--dx-down) 0 1.5px, transparent 1.5px 6px), var(--dx-down-soft);
}

.dx-read { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.dx-read div { display: grid; gap: var(--space-1); padding-block-start: var(--space-2); border-block-start: 1px solid var(--dx-line); }

.dx-shop { display: grid; gap: var(--space-3); min-inline-size: 0; }
.dx-abs { list-style: none; margin: 0; padding: 0; display: grid; }
.dx-ab {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding-block: var(--space-3); border-block-start: 1px solid var(--dx-line);
}
.dx-ab:first-child { border-block-start: 0; padding-block-start: 0; }
.dx-ab > .dx-ic { color: var(--text-muted); }
.dx-ab.is-owned > .dx-ic { color: var(--dx-up); }
.dx-ab__info { display: grid; gap: 2px; }
.dx-ab__name { font: 600 var(--fs-body)/1.35 var(--font-body); color: var(--text); }
.dx-ab__info .ra-small { color: var(--text-muted); line-height: 1.45; }
@media (max-width: 420px) {
  .dx-ab { grid-template-columns: 32px minmax(0, 1fr); }
  .dx-buy { grid-column: 2; justify-self: start; }
}

.dx-toast {
  position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: 130;
  inline-size: max-content; max-inline-size: min(420px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid rgba(253, 253, 251, .1); background: rgba(31, 32, 49, .94); box-shadow: var(--elevation-3);
  text-align: center; opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
}
[data-theme="light"] .dx-toast { background: rgba(255, 255, 255, .96); border-color: var(--border); }
.motion-ok .dx-toast { transition: opacity var(--dur-fast) var(--ease-out), transform 320ms var(--ease-out); }
.dx-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.dx-toast__big { display: block; font: 600 var(--fs-body)/1.35 var(--font-display); color: var(--text); }
.dx-toast__small { display: block; margin-block-start: 2px; font-size: var(--fs-small); line-height: 1.45; color: var(--text-muted); }

.dx-pop {
  position: fixed; left: 0; top: 0; z-index: 115; pointer-events: none;
  padding: 4px 8px; border-radius: var(--radius-pill); background: rgba(21, 20, 26, .85);
  font: 500 var(--fs-small)/1.2 var(--font-mono); color: var(--text); white-space: nowrap; opacity: 0;
}
[data-theme="light"] .dx-pop { background: rgba(253, 253, 251, .92); box-shadow: 0 0 0 1px var(--border); }
.dx-pop--casino { color: var(--dx-down); }
.dx-pop--growth { color: var(--dx-up); }
.dx-pop--estate { color: var(--link); }
.motion-ok .dx-pop { animation: dx-pop 1s var(--ease-out) forwards; }
@keyframes dx-pop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}
.dx-heart {
  position: fixed; left: 0; top: 0; z-index: 115; inline-size: 18px; block-size: 18px; pointer-events: none;
  color: var(--link); opacity: 0;
}
.dx-heart svg { display: block; inline-size: 100%; block-size: 100%; fill: currentColor; }
.motion-ok .dx-heart { animation: dx-heart 1.3s var(--ease-out) both; }
@keyframes dx-heart {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx, 0px)), -120px) scale(1.1) rotate(var(--hr, 0deg)); }
}

.dx-credits { display: grid; gap: var(--space-3); padding-block: var(--space-7) var(--space-8); }
.dx-credits ul {
  margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); max-inline-size: var(--text-max);
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted);
}
.dx-credits cite { font-style: italic; }

html:not(.js) .dx-game { display: none; }
html.js .dx-nojs { display: none; }
html:not(.js) .dx-intro .appear { opacity: 1; transform: none; }

.dx-end { display: flex; padding-block: var(--space-6) var(--space-9); }