/* PSX Console Ritual — living-room chassis (original CSS art) */

:root {
  --room-a: #0b0d12;
  --room-b: #171a22;
  --plastic-hi: #e8e6df;
  --plastic: #cfccc2;
  --plastic-lo: #a9a69c;
  --plastic-shadow: #6f6d66;
  --tv-grey: #4c4f55;
  --tv-dark: #26282d;
  --led-off: #40231d;
  --led-on: #ff4b3a;
  --accent: #56c1ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

.psx-body {
  font-family: "Lucida Grande", "Verdana", Geneva, sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(86,193,255,0.05), transparent 60%),
    linear-gradient(180deg, var(--room-b), var(--room-a) 70%);
  color: #cfd3da;
  overflow-x: hidden;
}

#psx-room {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 20px);
  padding: clamp(10px, 3vmin, 34px);
}

/* ---------------- TV ---------------- */

.tv { width: min(92vw, 150vmin * 3 / 4); max-width: 980px; }

.tv-shell {
  background: linear-gradient(180deg, #56595f 0%, var(--tv-grey) 18%, #3d4045 92%);
  border-radius: 26px / 30px;
  padding: clamp(10px, 2vmin, 22px) clamp(14px, 2.6vmin, 28px) clamp(8px, 1.6vmin, 16px);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.25),
    inset 0 -6px 14px rgba(0,0,0,0.45),
    0 18px 50px rgba(0,0,0,0.65);
  position: relative;
}
.tv-shell::after { /* side speaker grill */
  content: "";
  position: absolute; right: 6px; top: 16%;
  width: 10px; height: 56%;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.4) 0 2px, rgba(255,255,255,0.06) 2px 4px);
  border-radius: 4px;
}

.screen-frame {
  position: relative;
  border-radius: 18px / 24px;
  background: #000;
  padding: clamp(6px, 1.2vmin, 14px);
  box-shadow:
    inset 0 0 0 2px #14161a,
    inset 0 6px 22px rgba(0,0,0,0.9),
    0 0 0 3px #23252a,
    0 0 42px rgba(60,130,190,0.08);
}

#psx-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 12px / 16px;
  image-rendering: pixelated;
}

.glass-glare {
  position: absolute; inset: clamp(6px, 1.2vmin, 14px);
  border-radius: 12px / 16px;
  pointer-events: none;
  background:
    radial-gradient(140% 90% at 18% 4%, rgba(255,255,255,0.13), transparent 34%),
    radial-gradient(120% 80% at 85% 108%, rgba(150,200,255,0.05), transparent 38%);
  mix-blend-mode: screen;
}

.screen-off-shade {
  position: absolute; inset: clamp(6px, 1.2vmin, 14px);
  border-radius: 12px / 16px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(0,0,0,0.85), rgba(6,7,9,0.97));
  transition: opacity 260ms ease-out;
}
body.psx-on .screen-off-shade { opacity: 0; }

.tv-brandplate {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(4px, 1vmin, 10px) clamp(2px, 1vw, 14px) 0;
}
.tv-brand {
  letter-spacing: 0.32em; font-size: clamp(9px, 1.35vmin, 13px);
  color: #b9bcc2; text-shadow: 0 1px 0 #000; font-style: italic; font-weight: 600;
}
.tv-model { font-size: clamp(8px, 1.1vmin, 11px); color: #7d8086; }
.tv-led {
  margin-left: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6b4440, var(--led-off) 70%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
body.psx-on .tv-led {
  background: radial-gradient(circle at 35% 35%, #ffd9d4, var(--led-on) 70%);
  box-shadow: 0 0 10px 2px rgba(255,75,58,0.55);
}

.tv-feet { display: flex; justify-content: space-between; padding: 0 clamp(30px, 8vw, 120px); }
.tv-feet i {
  display: block; width: clamp(46px, 10vw, 90px); height: clamp(8px, 1.6vmin, 14px);
  background: linear-gradient(180deg, #33353a, #1c1e22);
  border-radius: 0 0 8px 8px;
}

/* ---------------- Console ---------------- */

.console { width: min(94vw, 760px); }

.console-body {
  background: linear-gradient(180deg, #eff0ee 0%, var(--plastic) 12%, var(--plastic-lo) 96%, #8d8a81);
  border-radius: 10px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.8),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    0 14px 34px rgba(0,0,0,0.55);
  position: relative;
}

.console-top-deck { padding: clamp(8px, 1.8vmin, 16px) clamp(12px, 3vw, 30px) 0; }

.lid {
  height: clamp(64px, 12vmin, 104px);
  border-radius: 8px;
  background: linear-gradient(180deg, #ddd9cf, #b9b5aa 78%, #a09c92);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.75), inset 0 -4px 8px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  transform-origin: top center;
  transition: transform 900ms cubic-bezier(.34,.02,.29,1);
}
.lid.open { transform: rotateX(58deg); }
.lid-ring {
  width: clamp(44px, 8vmin, 68px); height: clamp(44px, 8vmin, 68px);
  border-radius: 50%;
  background:
    radial-gradient(circle, #3b3e44 0 32%, #23262b 33% 36%, transparent 37%),
    repeating-radial-gradient(circle, #7c7f84 0 2px, #5a5d63 2px 4px);
  opacity: .85;
}
.lid-label {
  font-size: clamp(8px, 1.4vmin, 11px); color: #7d7970;
  letter-spacing: .28em; line-height: 1.5; text-align: left; font-weight: 700;
}
.tray-disc {
  width: clamp(42px, 7.6vmin, 62px); height: clamp(42px, 7.6vmin, 62px);
  border-radius: 50%;
  background:
    conic-gradient(from 40deg, #7fd4ff, #2e6bd8, #123, #63c6ff, #23407c, #7fd4ff);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.55), inset 0 0 0 9px #eef2f4, 0 2px 6px rgba(0,0,0,0.4);
  position: absolute;
  right: clamp(26px, 7vw, 74px);
  top: 50%; translate: 0 -50%;
  scale: 0; opacity: 0;
  transition: scale 600ms ease-in 0ms, translate 1400ms ease 240ms, opacity 240ms;
}
.tray-disc.inserting { scale: 1; opacity: 1; translate: -140px 0; }

.console-front {
  display: flex; align-items: center;
  gap: clamp(8px, 2.4vmin, 22px);
  padding: clamp(8px, 1.8vmin, 16px) clamp(12px, 3vw, 30px) clamp(10px, 2vmin, 18px);
}

.btn-cluster { display: flex; gap: clamp(6px, 1.6vmin, 14px); }

.pbtn {
  appearance: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(180deg, #b9b6ac, #99968c);
  border-radius: 7px;
  padding: 7px 9px 5px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.65), 0 3px 4px rgba(0,0,0,0.28);
  color: #3a3934; font-family: inherit;
}
.pbtn:hover { filter: brightness(1.06); }
.pbtn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.pbtn .cap { font-size: clamp(12px, 2vmin, 17px); line-height: 1; }
.pbtn label {
  font-size: clamp(7px, 1.15vmin, 10px);
  letter-spacing: .12em; cursor: pointer; font-weight: 700;
}
.pbtn-power { background: linear-gradient(180deg, #cfcfc9, #98a094); }
.pbtn-reset, .pbtn-open { zoom: 0.92; }

.brand-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.console-brand {
  font-weight: 800; font-style: italic;
  letter-spacing: .04em;
  font-size: clamp(12px, 2.2vmin, 18px);
  color: #23272e;
  white-space: nowrap;
}
.console-brand b { color: #c8102e; } /* the X, in homage red */
.serial { font-size: clamp(7px, 1.1vmin, 10px); color: #6e6b63; letter-spacing: .08em; white-space: nowrap; }

.ports { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; }
.port {
  width: clamp(22px, 4vmin, 34px); height: clamp(9px, 1.8vmin, 14px);
  background: linear-gradient(180deg, #5d6066, #3c3f44);
  border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.5);
}
.memslot { display: flex; gap: 8px; }
.memslot i {
  width: clamp(14px, 2.6vmin, 20px); height: clamp(8px, 1.5vmin, 12px);
  background: #3c3f44; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

.power-led {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #77493f, var(--led-off) 70%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}
.power-led.on {
  background: radial-gradient(circle at 35% 35%, #ffd9d4, var(--led-on) 70%);
  box-shadow: 0 0 12px 3px rgba(255,75,58,0.6);
}

/* ---------------- Controller motif ---------------- */

#pad-svg {
  display: block; width: min(94vw, 620px);
  margin: clamp(-4px, -0.8vmin, -8px) auto 0;
  overflow: visible;
}
.pad-body {
  fill: url(#none) #b9bcc2;
  fill: #bdc0c7;
  stroke: #84878e; stroke-width: 2;
}
.dpad rect, .face-btns circle { fill: #4a4d54; stroke: #2c2e33; stroke-width: 1.5; }
.mid-btns circle { fill: #c8cacd; stroke: #90939a; stroke-width: 1.5; }
.cable { fill: none; stroke: #3f4247; stroke-width: 4; stroke-linecap: round; opacity: .8; }

/* ---------------- Status bar ---------------- */

#psx-statusbar {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: baseline; justify-content: center;
  padding: 2px 8px 4px;
  text-align: center;
}
#status-text { font-size: clamp(11px, 1.7vmin, 14px); color: #aab0ba; letter-spacing: .04em; }
.hint { font-size: clamp(9px, 1.35vmin, 11.5px); color: #63676f; }

/* Focus visibility for real keyboard users */
.pbtn:focus-visible, canvas:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------------- Narrow viewports: intentional desktop-first stack ---------------- */
@media (max-width: 720px) {
  .console-front { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
  .ports { order: 3; }
  #psx-statusbar { flex-direction: column; align-items: center; gap: 3px; }
}