/* Colour-only mapping from image-22.png. Geometry, type and behaviour inherit unchanged. */
[data-theme="neutral"] {
  --page: oklch(from #0f0d1a l c h);
  --bg: oklch(from #0f0d1a l c h);
  --surface: oklch(from #1f1c2e l c h);
  --surface-2: oklch(from #1f1c2e l c h);
  --surface-3: oklch(from #1f1c2e calc(l + .07) c h);
  --tile: oklch(from #1a1726 l c h);
  --tile-hover: oklch(from #1a1726 calc(l + .07) c h);
  --tile-selected: oklch(from #282570 l c h);
  --list: oklch(from #0f0d1a l c h);
  --field: oklch(from #1f1c2e l c h);
  --glass: oklch(from #1a1726 l c h / .9);
  --chrome: oklch(from #0f0d1a l c h / .82);
  --scrim: oklch(0% 0 0 / .74);
  --line: oklch(from #1f1c2e calc(l + .17) c h);
  --line-soft: oklch(from #1f1c2e calc(l + .07) c h);
  --border: var(--line-soft);
  --fg: oklch(100% 0 0);
  --muted: oklch(76% .025 290);
  --on-accent: oklch(from #0f0d1a l c h);
  --accent: oklch(74% .17 300);
  --accent-hover: oklch(82% .13 300);
  --selected: oklch(from #282570 l c h);
  --env-glow-low: oklch(from #160b31 l c h);
  --env-glow-high: oklch(from #0f0d1a l c h);
  --env-line: oklch(from #5267f2 l c h / .07);
  --spectrum: linear-gradient(100deg,oklch(from #1ed4b3 l c h),oklch(from #5267f2 l c h) 27%,oklch(from #6a53f2 l c h) 50%,oklch(from #21bcca l c h) 76%,oklch(from #05fb96 l c h));
}
/* Quiet white action surfaces; spectrum limited to two existing lobby surfaces. */
[data-theme="neutral"] .btn.primary { background:var(--fg);border-color:var(--fg);color:var(--on-accent) }
[data-theme="neutral"] [data-od-id="lobby-primary"] {
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--spectrum) border-box;
  border-color:transparent;color:var(--fg);
}
[data-theme="neutral"] .tile[aria-pressed=true] {
  background:linear-gradient(var(--tile-selected),var(--tile-selected)) padding-box,var(--spectrum) border-box;
  border-color:transparent;
  box-shadow:0 0 0 var(--border-sel) var(--selected),0 18px 44px color-mix(in oklch,var(--bg) 70%,black);
}
@media (hover:hover) {
  [data-theme="neutral"] .btn.primary:hover:not(:disabled) { background:oklch(93% 0 0);border-color:oklch(93% 0 0);color:var(--on-accent) }
  [data-theme="neutral"] [data-od-id="lobby-primary"]:hover:not(:disabled) {
    background:linear-gradient(var(--surface-3),var(--surface-3)) padding-box,var(--spectrum) border-box;
    border-color:transparent;color:var(--fg);
  }
}

/* Strokeless surfaces. Transparent borders retain established dimensions. */
[data-theme="neutral"] #game :is(button,.card,.tile,.bigcard,.bigcard-plate,.panel,.plate,.dplate,.dlg,.dlg-wrap,.seg,.stat,.notice,.youbox,.rk,.rrow,.state,.skelcard,.tut-panel,.tutart,.method,.det-fact,.wallet,.voucher-note,input,select) {
  border-color:transparent!important;
}
[data-theme="neutral"] #game :is(.wallet .w-main,.method,.rk.you,.bigcard,.bigcard.is-mine) {box-shadow:none}
[data-theme="neutral"] .tile[aria-pressed=true] {
  background:var(--tile-selected);
  box-shadow:0 18px 44px color-mix(in oklch,var(--bg) 70%,black);
}
[data-theme="neutral"] [data-od-id="lobby-primary"] {background:var(--surface)}
@media (hover:hover) {
  [data-theme="neutral"] [data-od-id="lobby-primary"]:hover:not(:disabled) {background:var(--surface-3)}
}
/* Four-pixel inset spectrum: stronger emphasis without changing box geometry. */
[data-theme="neutral"] #game :is(.btn,.card,.rrow) {position:relative}
[data-theme="neutral"] #game :is([data-od-id="lobby-primary"],.tile[aria-pressed=true],.btn:focus-visible,.tile:focus-visible,.card:focus-visible,.rrow:focus-visible)::after {
  content:"";position:absolute;inset:0;border-radius:inherit;padding:4px;
  background:var(--spectrum);pointer-events:none;z-index:3;
  -webkit-mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}