/* ==========================================================
   Westphal Solutions - Arcade cabinet shell
   Reusable chassis. Dark in both themes. The screen stays
   flat and axis-aligned; depth is implied at the edges only.
   Sized by ws-cabinet.js via --wscab-s (the screen side).
   ========================================================== */

.ws-cabinet {
  --c-body: #202024;
  --c-body-2: #161618;
  --c-screen: #0D0D0F;
  --c-deck: #232327;
  --c-trim: var(--ws-lime, #C3DD22);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: calc(var(--wscab-s, 320px) * 1.1);
  margin: 0 auto;
  padding: 0 0 calc(var(--wscab-s, 320px) * 0.05);
  border-radius: 14px 14px 8px 8px;
  background-image:
    linear-gradient(180deg, var(--c-body) 0%, var(--c-body-2) 100%),
    linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0) 14px),
    linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 16px);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.05),
    inset -2px -3px 10px rgba(0,0,0,0.55),
    0 26px 60px rgba(0,0,0,0.45);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Marquee: lit title panel with a slight top lip */
.ws-cabinet__marquee {
  position: relative;
  height: calc(var(--wscab-s, 320px) * 0.15);
  margin: calc(var(--wscab-s, 320px) * 0.03) calc(var(--wscab-s, 320px) * 0.035) 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a1d 0%, #131315 100%);
  border-top: 1px solid rgba(195,221,34,0.28);
  box-shadow: inset 0 0 34px rgba(195,221,34,0.07), 0 4px 10px rgba(0,0,0,0.5);
}
.ws-cabinet__title {
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: calc(var(--wscab-s, 320px) * 0.072);
  line-height: 1;
  color: var(--c-trim);
  text-shadow: 0 0 18px rgba(195,221,34,0.45);
  padding-left: 0.16em;
}
.ws-cabinet__machine {
  position: absolute;
  right: calc(var(--wscab-s, 320px) * 0.03);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}
.ws-cabinet__mbtn {
  appearance: none;
  width: calc(var(--wscab-s, 320px) * 0.066);
  height: calc(var(--wscab-s, 320px) * 0.066);
  min-width: 26px;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.3);
  color: var(--ws-grey, #A2AAAD);
  cursor: pointer;
  padding: 0;
}
.ws-cabinet__mbtn:hover { color: var(--ws-light-grey, #E5E5EA); border-color: rgba(255,255,255,0.3); }
.ws-cabinet__mbtn:focus-visible { outline: 2px solid var(--c-trim); outline-offset: 2px; }
.ws-cabinet__mbtn svg { width: 58%; height: 58%; display: block; }
.ws-cabinet__mbtn.is-on { color: var(--c-trim); }

.ws-cabinet__body { padding: 0 calc(var(--wscab-s, 320px) * 0.05); }

/* Screen: inset display. Game canvas + HUD mount inside. */
.ws-cabinet__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: calc(var(--wscab-s, 320px) * 0.035);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-screen);
  box-shadow: inset 0 0 0 1px rgba(195,221,34,0.12), inset 0 0 30px rgba(0,0,0,0.8);
}
.ws-cabinet__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 38%);
}

/* Deck: control panel. Game mounts its controls here. */
.ws-cabinet__deck {
  position: relative;
  width: 100%;
  height: calc(var(--wscab-s, 320px) * 0.46);
  margin-top: calc(var(--wscab-s, 320px) * 0.035);
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2a2f 0%, #1d1d21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -3px 8px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  display: grid;
  place-items: center;
  touch-action: none;
}

.ws-cabinet__base { height: calc(var(--wscab-s, 320px) * 0.05); }

/* Immersive mode: pin and fill. Works on iPhone (no real FS there). */
.ws-cabinet__backdrop { position: fixed; inset: 0; background: #050506; z-index: 99998; }
.ws-cabinet.is-immersive {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 99999;
}
body.wscab-lock { overflow: hidden; }

/* Dark site theme: keep the machine dark, separate it from the
   charcoal page with a stronger edge and a faint outer glow. */
[data-theme="dark"] .ws-cabinet {
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.06),
    inset -2px -3px 10px rgba(0,0,0,0.6),
    0 0 0 1px rgba(195,221,34,0.18),
    0 26px 70px rgba(0,0,0,0.7);
}

/* === Cartridge tabs (game switcher beneath the machine) === */
.ws-cabinet-tabs {
  display: flex;
  gap: 10px;
  margin: 16px auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.ws-cabinet-tab {
  appearance: none;
  font-family: var(--ws-font, 'Lato', Arial, sans-serif);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid var(--ws-grey, #A2AAAD);
  background: transparent;
  color: var(--ws-text, #1C1C1E);
  cursor: pointer;
  text-decoration: none;
}
.ws-cabinet-tab.is-active {
  background: var(--ws-lime, #C3DD22);
  border-color: var(--ws-lime, #C3DD22);
  color: #111;
}
.ws-cabinet-tab.is-soon { opacity: 0.45; cursor: default; }
.ws-cabinet-tab.is-soon::after { content: " · soon"; font-weight: 400; letter-spacing: 0; }