/* ARCHIVE controls — machined frames, recessed faces and short key travel.
   This layer changes controls only. Menus, desktop artwork, cards and game
   cells keep their own treatments. Corner cuts live on the frame layers so
   keyboard focus rings remain whole. */

:is(.login-screen, .retro-os, .retro-games, .view-controls, .radio-system) {
  --key-ink: #242424;
  --key-edge: #525252;
  --key-face: #f0f0ed;
  --key-highlight: #fff;
  --key-inset: #c5c5bf;
  --key-depth: #92928c;
  --key-cut: 3px;
}

:is(
  :where(#enter-desktop),
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
) {
  appearance: none;
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--key-ink) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 0 var(--key-depth));
  text-decoration: none;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 85ms ease-out, filter 85ms ease-out;
}

:is(
  :where(#enter-desktop),
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
)::before,
:is(
  :where(#enter-desktop),
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
)::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: var(--key-edge);
  clip-path: polygon(
    var(--key-cut) 0, calc(100% - var(--key-cut)) 0,
    100% var(--key-cut), 100% calc(100% - var(--key-cut)),
    calc(100% - var(--key-cut)) 100%, var(--key-cut) 100%,
    0 calc(100% - var(--key-cut)), 0 var(--key-cut)
  );
}
:is(
  :where(#enter-desktop),
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
)::after {
  inset: 1px;
  z-index: -1;
  background: var(--key-face);
  box-shadow:
    inset 0 1px 0 var(--key-highlight),
    inset 0 0 0 2px var(--key-face),
    inset 0 0 0 3px var(--key-inset);
}

/* Replace legacy important hover fills without letting a square fill leak
   around the cut corners. The face is painted by the control's inner layer. */
.retro-os .os-button:hover,
.retro-os .os-button:active,
.retro-os .os-button-dark,
.retro-os .os-button-dark:hover {
  background: transparent !important;
  color: var(--key-ink) !important;
  box-shadow: none !important;
}
.retro-os .os-window-footer button + button { border: 0 !important; }

:is(
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
):where(:hover:not(:disabled):not([aria-disabled="true"])) {
  --key-face: #e3e3de;
  --key-inset: #aaaaa3;
}

:is(
  :where(#enter-desktop),
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
  filter: none;
}

:is(
  :where(#enter-desktop),
  .retro-os .os-button,
  .retro-os .os-small-button,
  .retro-os .os-window-controls button,
  .retro-os .os-map-return,
  .retro-os .os-layout-switch button,
  .retro-os .os-case-tabs button,
  .retro-os .os-folder-return,
  .retro-os .os-window-footer button,
  .retro-games .rg-tabs > button,
  .retro-games .rg-actions > button,
  .retro-games .rg-toolbar > button,
  .retro-games .rg-dpad > button,
  .retro-games .rg-mine-mode > button,
  .view-switch > button,
  .expand-button,
  .radio-system .radio-stations > button,
  .radio-system .radio-resume
):focus-visible {
  outline: 1px dotted var(--key-ink);
  outline-offset: 4px;
}

/* Latched keys keep their contrast while hovered. */
.retro-os .os-button-dark,
.retro-os .os-button-dark:hover,
.retro-os .os-layout-switch button[aria-pressed="true"],
.retro-os .os-case-tabs button[aria-current="page"],
.retro-games :is(.rg-tabs, .rg-mine-mode) > button[aria-pressed="true"],
.view-switch > button[aria-pressed="true"],
.view-controls .expand-button[aria-pressed="true"],
.radio-system .radio-stations > button[aria-pressed="true"] {
  --key-ink: #f4f4ef;
  --key-face: #303030;
  --key-edge: #191919;
  --key-highlight: #656560;
  --key-inset: #73736b;
  --key-depth: #7b7b74;
}

/* Clear disabled states retain their frame and never move on activation. */
.retro-os :is(.os-button, .os-small-button):disabled,
.view-switch > button:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
  filter: none;
}

/* Login is a single return key: label on the left, dedicated symbol well. */
#enter-desktop {
  --key-ink: #272727;
  --key-edge: #393939;
  --key-face: #f2f2ef;
  --key-highlight: #fff;
  --key-inset: #acaca4;
  --key-depth: #90908b;
  --key-cut: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: clamp(186px, 30cqw, 210px);
  min-width: 0;
  max-width: calc(100% - 36px);
  min-height: 58px;
  padding: 6px 6px 6px 20px;
  border: 0;
  color: var(--key-ink);
  font-size: clamp(17px, 3cqw, 20px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  box-shadow: none;
}
#enter-desktop::after {
  inset: 1px;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 3px var(--key-face), inset 0 0 0 4px var(--key-inset);
}
#enter-desktop > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid #171717;
  border-radius: 1px;
  background: #343434;
  color: #f7f7f2;
  box-shadow: inset 0 1px 0 #74746f, inset 0 0 0 3px #343434, inset 0 0 0 4px #64645e;
  font-size: 24px;
  font-weight: 400;
}
#enter-desktop > span svg { display: block; width: 1.1em; height: 1.1em; }
#enter-desktop:hover { --key-face: #e8e8e1; --key-inset: #92928a; }
#enter-desktop:hover > span { background: #292929; }
#enter-desktop:active { transform: translateY(1px); filter: none; }
#enter-desktop:active > span { box-shadow: inset 0 2px 3px #14141477, inset 0 0 0 3px #292929, inset 0 0 0 4px #66665f; }
#enter-desktop:focus-visible { outline: 1px solid #343434; outline-offset: 4px; }

/* Action sizes inherit the current interface scale; compact system keys do not
   enlarge their titlebar or force an extra row at 125/150 percent. */
.retro-os .os-button { padding: .58em .95em !important; min-height: 2.6em; font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
.retro-os .os-button.os-button-dark { font-weight: 700; }
.retro-os .os-map-return { padding: .4em .7em; }
.retro-os .os-window-controls button,
.retro-os .os-small-button { --key-cut: 2px; }
.retro-os .os-window-controls button::after,
.retro-os .os-small-button::after { box-shadow: inset 0 1px 0 var(--key-highlight), inset 0 0 0 1px var(--key-face), inset 0 0 0 2px var(--key-inset); }
.retro-os .os-layout-switch button { --key-cut: 2px; }
.retro-os .os-case-tabs button { padding: .65em .5em; }
.retro-os .os-folder-return { padding: .65em .7em !important; }
.retro-os .os-window-footer button { padding: .55em .75em; }
.retro-os .os-window-footer button > span:last-child { opacity: .65; }
.retro-os .os-case-tabs button[aria-current="page"] { --os-icon-face: #303030; }
.retro-os :is(.os-case-tabs button, .os-window-footer button, .os-folder-return) .os-icon { --os-icon-face: var(--key-face); }

.retro-games :is(.rg-tabs, .rg-actions, .rg-toolbar, .rg-mine-mode) > button { padding: 6px 11px; min-height: 31px; font-weight: 400; }
.retro-games .rg-dpad > button { --key-cut: 2px; padding: 0; min-height: 28px; }
.retro-games .rg-dpad > button::after { box-shadow: inset 0 1px 0 var(--key-highlight), inset 0 0 0 1px var(--key-face), inset 0 0 0 2px var(--key-inset); }


/* The bottom selector reads as a row of latched instrument keys. */
.view-switch { padding: 4px; gap: 3px; border-color: #adada4; background: #ebebe4; box-shadow: inset 0 1px 0 #fff; }
.view-switch > button { --key-face: #f5f5ef; --key-inset: #d1d1c7; }
.view-switch > button[aria-pressed="true"] { --key-face: #303030; --key-inset: #73736b; }
.expand-button { --key-cut: 3px; }
.view-switch #radio-view.has-sound::after {
  inset: 1px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  vertical-align: initial;
  background: radial-gradient(circle at calc(100% - 8px) 8px, var(--key-ink) 0 1.5px, transparent 2px), var(--key-face);
}

/* Radio's latched station keys share the linework but keep the housing's own
   physical switches and volume dial. Those circular controls stay untouched. */
.radio-system .radio-stations > button { --key-cut: 2px; transform: none; }
.radio-system .radio-stations > button[aria-pressed="true"] { transform: translateY(1px); }
.radio-system .radio-resume { padding: 7px 10px; min-height: 36px; }

@container retro-screen (max-width: 400px) {
  .retro-os .os-case-tabs button { padding: .5em .25em; }
  .retro-os .os-window-footer button { padding: .45em .4em; }
  .retro-os .os-settings-actions .os-button { padding: .55em .65em !important; }
  .retro-os .os-print-ad .os-button { padding: .45em .65em !important; }
}

@container (max-width: 400px) {
  #enter-desktop { width: 186px; min-height: 54px; padding: 5px 5px 5px 18px; }
  #enter-desktop > span { flex-basis: 42px; width: 42px; height: 42px; }
}
@media (max-width: 680px) {
  .view-switch { padding: 3px; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #enter-desktop,
  .retro-os .os-button,
  .retro-os .os-window-controls button,
  .retro-games button,
  .view-switch > button,
  .expand-button,
  .radio-system button { transition: none; }
}
.motion-off :is(button, .os-button) { transition: none; }