/* =============================================
   NES Console Component
   Based on CodePen reference, refined for
   dark void scene with CRT TV
   ============================================= */

/* ---- NES Container ---- */
#nes {
  position: absolute;
  width: 45em;
  height: 15em;
  font-size: 16px;
  /* Positioned to the left of the TV */
  left: calc(50% + var(--scene-offset-x) - 622px);
  margin-left: -225px;
  top: calc(51% + var(--scene-offset-y) + 32px);
  color: var(--nes-text);
  font-family: 'Coda Caption', 'Press Start 2P', sans-serif;
  z-index: 700;
  transition: none;
  /* Scene scale — matches TV/controller/cartridge pattern: px + scale() */
  transform: scale(0.625);
  transform-origin: top center;
}

/* Ground shadow beneath console — soft ellipse matching cart shadow style.
   Proportionally thick so ends are gentle curves, not sharp points. */
#nes::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2em;
  bottom: -0.8em;
  left: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 1.5em 0.8em rgba(0, 0, 0, 0.35),
    0 0.5em 3em 1.5em rgba(0, 0, 0, 0.2),
    0 1em 8em 3em rgba(0, 0, 0, 0.1);
}

/* Top bevel edge */
#nes::before {
  content: "";
  position: absolute;
  width: 99.4%;
  height: 0;
  top: -3%;
  left: 0.3%;
  border-bottom: 0.5em solid var(--nes-body-light);
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  box-sizing: border-box;
}

/* ---- Top Section ---- */
.nes-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 45em;
  height: 7.4em;
  background: var(--nes-body-light);
  border-radius: 0.3em 0.3em 0 0;
  box-shadow:
    0 0.5em 0em -0.2em #535353,
    inset 0 0.12em 0 #f0eeec,
    inset 0 -0.12em 0 #908c8a,
    inset 0.12em 0 0 #d8d4d2,
    inset -0.12em 0 0 #b0acaa;
  border: none;
  box-sizing: border-box;
  perspective: 3200px; /* subtle 3D depth for lid hinge (compensates for parent scale(0.625)) */
  /* Plastic surface texture — matches TV noise approach */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}

/* ---- L-shaped NES dust door ---- */

/*
  Rigid L-shaped shell: large front face + small top cap.
  Hinge at REAR edge of cartridge slot (top in screen space).
  CLOSED: front face fills slot, top cap flush with top surface.
  OPEN: whole L rotates; front face near-vertical, top cap near-horizontal.
*/

/* Hinge container — pivot at the BACK edge of the top cap (1.2em into screen) */
.nes-door-root {
  position: absolute;
  left: 4.8em;
  top: 0;
  width: 25em;
  height: 0;
  z-index: 1;
  transform-origin: 50% 0% -1.2em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform 0.6s cubic-bezier(0.2, 1.15, 0.4, 1);
  cursor: pointer;
}

/* Large front face — fills slot when closed */
.nes-door-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.9em;
  background: var(--nes-body-light);
  box-sizing: border-box;
  border: none;
  border-radius: 0.15em;
  box-shadow:
    0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41),
    inset 0 0.1em 0 #f0eeec,
    inset 0 -0.1em 0 #a8a4a2,
    inset 0.1em 0 0 #d5d1cf,
    inset -0.1em 0 0 #a8a4a2;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Noise texture */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}

/* Grip groove at bottom of front face */
.nes-door-front::before {
  content: "";
  position: absolute;
  bottom: 0.4em;
  left: 5%;
  width: 90%;
  height: 0.08em;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0.04em;
}

/* Top cap — folds backward from top of front face, extends 1.2em into the screen */
.nes-door-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.2em;
  background: var(--nes-body-light);
  box-sizing: border-box;
  border-radius: 0.15em 0.15em 0 0;
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: inset 0 0.05em 0 #f0eeec, inset 0 -0.02em 0 rgba(0, 0, 0, 0.08);
  background-image: url(data:image/png;base64,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);
}

/* ---- Door open state ---- */

/* L-bracket swings upward around rear hinge — front face rises and tilts */
.nes-door-root.door-open {
  transform: translateY(-3.0em) rotateX(50deg);
}

/* Gradient on lid face when open — darker top, brighter bottom (light catch) */
.nes-door-root.door-open .nes-door-front {
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%),
    url(data:image/png;base64,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);
}

/* Nintendo branding on front face */
.nes-door-front .nes-logo-img {
  position: absolute;
  top: 0.8em;
  left: 0.8em;
  width: 12em;
  height: auto;
  pointer-events: none;
  /* Subtle debossed feel */
  opacity: 0.85;
  filter: brightness(0.95);
}

/* Left bevel on lid zone */
.nes-top::before {
  content: "";
  position: absolute;
  border-right: 0.8em solid var(--nes-body-dark);
  top: -0.22em;
  left: 4.8em;
  border-top: 0.3em solid transparent;
  z-index: 1;
}

/* Right bevel on lid zone */
.nes-top::after {
  content: "";
  position: absolute;
  border-left: 0.8em solid var(--nes-body-dark);
  top: -0.22em;
  left: 29.4em;
  border-top: 0.3em solid transparent;
}

/* ---- Cartridge Slot ---- */
.nes-cartridge-slot {
  width: 25em;
  height: 5.9em;
  position: absolute;
  left: 4.8em;
  top: 0;
  z-index: 0;
  border-right: 0.2em solid rgba(0, 0, 0, 0.06);
  border-bottom: 0.2em solid rgba(255, 255, 255, 0.28);
  border-left: 0.2em solid rgba(0, 0, 0, 0.12);
  border-radius: 0 0 0.5em 0.5em;
  overflow: hidden;
}

.nes-cartridge-slot::before {
  position: absolute;
  height: 88%;
  content: "";
  width: 95.5%;
  left: -6%;
  top: 0;
  border-bottom: 3em solid rgba(0, 0, 0, 0.04);
  border-right: 2em solid rgba(0, 0, 0, 0.1);
  border-left: 2em solid rgba(0, 0, 0, 0.1);
}

.nes-cartridge-slot::after {
  position: absolute;
  width: 97%;
  left: 1.2%;
  height: 0.5em;
  background: var(--nes-body-light);
  bottom: 8%;
  content: "";
}

/* Cartridge slot border detail */
.nes-slot-border {
  position: absolute;
  width: 95.5%;
  left: 2%;
  height: 0.4em;
  background: #BEBABA;
  bottom: 15%;
}

.nes-slot-border::before {
  content: "";
  position: absolute;
  border-right: 0.2em solid #BEBABA;
  top: 0em;
  left: -0.2em;
  border-top: 0.4em solid transparent;
  z-index: 1;
}

.nes-slot-border::after {
  content: "";
  position: absolute;
  border-left: 0.2em solid #BEBABA;
  top: 0em;
  right: -0.2em;
  border-top: 0.4em solid transparent;
  z-index: 1;
}

/* Cartridge slot opening */
.nes-slot-hole {
  width: 82%;
  height: 75%;
  background: var(--nes-slot);
  position: absolute;
  left: 8.6%;
  top: 5%;
  border-radius: 0.2em;
  border-left: 0.1em solid rgba(255, 255, 255, 0.88);
  border-right: 0.1em solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 2em 3em #000,
    inset 0 -0.4em 0 #424242,
    inset 0 -1.2em 0 #222;
}

/* Connector pins inside slot */
.nes-slot-hole::before {
  content: "";
  position: absolute;
  width: 92%;
  left: 4%;
  height: 2em;
  bottom: 1.15em;
  background: linear-gradient(to right, #141414, #050505);
}

/* Pin dots */
.nes-slot-hole::after {
  content: "";
  position: absolute;
  width: 0.2em;
  height: 0.1em;
  left: 1.8em;
  top: 33%;
  background: #3C3C3C;
  color: #3C3C3C;
  box-shadow:
    0.4em 0 0, 0.8em 0 0, 1.2em 0 0, 1.6em 0 0, 2em 0 0, 2.4em 0 0, 2.8em 0 0,
    3.2em 0 0, 3.6em 0 0, 4em 0 0, 4.4em 0 0, 4.8em 0 0, 5.2em 0 0, 5.6em 0 0,
    6em 0 0, 6.4em 0 0, 6.8em 0 0, 7.2em 0 0, 7.6em 0 0, 8em 0 0, 8.4em 0 0,
    8.8em 0 0, 9.2em 0 0, 9.6em 0 0, 10em 0 0, 10.4em 0 0, 10.8em 0 0,
    11.2em 0 0, 11.6em 0 0, 12em 0 0, 12.4em 0 0, 12.8em 0 0, 13.2em 0 0,
    13.6em 0 0, 14em 0 0, 14.4em 0 0, 14.8em 0 0, 15.2em 0 0, 15.6em 0 0,
    16em 0 0, 16.4em 0 0;
}

/* ---- Bottom Section ---- */
.nes-bottom {
  width: 39em;
  height: 7.5em;
  background: var(--nes-bottom);
  position: absolute;
  bottom: 0;
  left: 3em;
  border-bottom: 0.2em solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  box-shadow:
    0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45),
    /* Top section overhang shadow */
    inset 0 0.8em 1.2em -0.6em rgba(0, 0, 0, 0.18);
  /* Darkening gradient toward bottom edge + noise texture */
  background-image:
    linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.07) 100%),
    url(data:image/png;base64,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);
}

/* Trapezoidal side panels — using clip-path so texture carries through */
.nes-bottom::before {
  content: "";
  position: absolute;
  left: -3em;
  top: -0.1em;
  width: 3em;
  height: 7.6em;
  background: var(--nes-bottom);
  background-image: url(data:image/png;base64,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);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

.nes-bottom::after {
  content: "";
  position: absolute;
  right: -3em;
  top: -0.1em;
  width: 3em;
  height: 7.6em;
  background: var(--nes-bottom);
  background-image: url(data:image/png;base64,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);
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

/* ---- Power / Reset Area ---- */
.nes-power-box {
  position: absolute;
  left: 1.4em;
  width: 11.5em;
  top: 0;
  height: 5.8em;
  border: 0.1em solid rgba(0, 0, 0, 0.05);
  border-top: 0;
  border-radius: 0.3em;
  border-top-right-radius: 0;
  border-right: 0.1em solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
  color: #AC2828;
}

/* Hidden checkbox for power toggle */
.nes-power-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Power & Reset buttons — well/recess */
.nes-power-btn,
.nes-reset-btn {
  position: absolute;
  cursor: pointer;
  width: 6em;
  line-height: 3.8em;
  height: 2.8em;
  left: 3em;
  top: 5em;
  font-size: 0.6em;
  border: 0.12em solid #000;
  border-radius: 0.5em;
  background: transparent;
  box-shadow: none;
}

.nes-reset-btn {
  left: 11em;
}

/* Button face */
.nes-power-btn::before,
.nes-reset-btn::before {
  content: "POWER";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
  border: none;
  background-color: #9a9598;
  box-shadow:
    inset 0.06em 0.06em 0.06em #c4c2c1,
    inset -0.06em -0.06em 0.06em #5a5658,
    0.12em 0.12em 0.25em #000;
  transition: transform 0.2s cubic-bezier(0.25, 0.5, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 0.5, 0.5, 1),
    background-color 0.2s cubic-bezier(0.25, 0.5, 0.5, 1);
  font-family: 'Coda Caption', 'Press Start 2P', sans-serif;
  color: #AC2828;
  padding-top: 1px;
}

.nes-reset-btn::before {
  content: "RESET";
}

/* Button hover — darker shade of base, no yellow tint */
.nes-power-btn:hover::before,
.nes-reset-btn:hover::before {
  background-color: #86848a;
}

/* Active (click) — matches reference: sink in with dark shadow */
.nes-power-btn:active::before,
.nes-reset-btn:active::before {
  transform: scale(0.98);
  background-color: #8a8583;
  box-shadow:
    inset 0 0 0.25em rgba(0, 0, 0, 0.5),
    inset 0.06em 0.06em 0.06em transparent,
    inset -0.06em -0.06em 0.06em transparent,
    0.12em 0.12em 0.25em transparent;
}

/* Power LED indicator */
.nes-power-led {
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  left: 0.6em;
  bottom: 1.5em;
  border-radius: 0.08em;
  background: radial-gradient(
    circle at 30% 30%,
    #4a4949,
    #3a3939 50%,
    #2d2c2c
  );
  border: 0.03em solid transparent;
  box-shadow:
    inset 0 0.08em 0.12em rgba(0, 0, 0, 0.5),
    inset 0 -0.02em 0.04em rgba(255, 255, 255, 0.06),
    0 0.04em 0.08em rgba(0, 0, 0, 0.3);
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

/* LED on state — tweaked in Paper */
.nes-power-input:checked ~ .nes-power-led {
  background: radial-gradient(
    ellipse 30.09% 30.09% at 40% 26.35%,
    oklab(74.1% 0.128 0.043) 0%,
    oklab(68.7% 0.188 0.076) 35.6%,
    oklab(62.5% 0.199 0.099) 71.21%,
    oklab(59.5% 0.215 0.113) 100%
  );
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 0.3em 0.05em #E8303099,
    0 0 0.8em 0.1em #D9262640;
}

/* ---- Gamepad Slots Panel ---- */
.nes-gamepad-slots {
  height: 100%;
  position: absolute;
  width: 19%;
  right: 13%;
  background: #2a2a2a;
  border-top: 0.2em solid rgba(255, 255, 255, 0.15);
  border-bottom: 0.2em solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  box-shadow:
    inset -0.2em 0 0 rgba(0, 0, 0, 0.1),
    inset 0.2em 0 0 rgba(0, 0, 0, 0.1),
    -0.2em 0 0 rgba(0, 0, 0, 0.2),
    0.2em 0 0 rgba(0, 0, 0, 0.2),
    -0.25em 0 0 rgba(255, 255, 255, 0.10),
    0.25em 0 0 rgba(255, 255, 255, 0.1),
    inset 0 -1.90em 0 #2a2a2a,
    inset 0 -1.95em 0 rgba(255, 255, 255, 0.09),
    inset 0 -2em 0 rgba(0, 0, 0, 0.16),
    inset 0 -6.45em 0 #2a2a2a,
    inset 0 -6.55em 0 rgba(0, 0, 0, 0.4),
    inset 0 -6.6em 0 rgba(255, 255, 255, 0.05),
    inset 0 -7.35em 0 #2a2a2a,
    inset 0 -7.4em 0 rgba(255, 255, 255, 0.09),
    inset 0 -7.45em 0 rgba(0, 0, 0, 0.16),
    inset 0 -8.7em 0 #2a2a2a,
    inset 0 -8.75em 0 rgba(0, 0, 0, 0.4),
    inset 0 -8.85em 0 rgba(255, 255, 255, 0.05),
    inset 0 1.3em 0 #2a2a2a,
    inset 0 1.35em 0 rgba(0, 0, 0, 0.4),
    inset 0 1.4em 0 rgba(255, 255, 255, 0.08);
}

/* Skewed top edge of gamepad panel */
.nes-gamepad-slots::before {
  content: "";
  position: absolute;
  width: 99.4%;
  height: 2%;
  top: -3.2%;
  left: -3.7%;
  background: #2a2a2a;
  box-sizing: border-box;
  transform: skew(72deg);
}

/* Player labels */
.nes-gamepad-slots::after {
  content: "1 2";
  position: absolute;
  top: 12em;
  left: 3.6em;
  font-size: 0.6em;
  word-spacing: 5.7em;
  color: #8B1A1A;
}

/* Individual gamepad port */
.nes-gamepad-port {
  position: absolute;
  bottom: 2.15em;
  width: 3em;
  left: 0.8em;
  height: 4em;
  border-radius: 0.6em;
  background: #272727;
  border: none;
  box-shadow:
    0 0.05em 0.05em rgba(255, 255, 255, 0.08),
    0 -0.1em 0em 0.1em rgba(0, 0, 0, 0.19);
}

.nes-gamepad-port.p2 {
  right: 0.8em;
  left: inherit;
}

/* Port border inset */
.nes-gamepad-port::before {
  content: "";
  position: absolute;
  width: 72%;
  left: 14%;
  height: 86%;
  top: 7%;
  border: 0.2em solid rgba(0, 0, 0, 0.53);
  box-sizing: border-box;
  border-radius: 1em 80% 0.8em 0.8em / 1em 61% 0.8em 0.8em;
  box-shadow:
    -0.1em 0 0.1em rgba(255, 255, 255, 0.03),
    inset 0.1em 0 0.12em rgba(255, 255, 255, 0.04),
    inset -0.1em 0.1em 0.15em rgba(255, 255, 255, 0.09);
}

/* Pin grid container */
.nes-pin-grid {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.2em;
  row-gap: 0.06em;
  left: 46%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 2.3em;
  z-index: 1;
}

/* Nudge top-right pin to clear the rounded corner */
.nes-pin:nth-child(2) {
  transform: translate(-0.06em, 0.09em);
}

/* Extra gap between top 2 pins and bottom 6 */
.nes-pin:nth-child(3),
.nes-pin:nth-child(4) {
  margin-top: 0.1em;
}

/* Individual skeuomorphic recessed pin */
.nes-pin {
  display: block;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: hsl(0deg 0% 12%);
  border: 0.05em solid #050505;
  box-shadow:
    /* Top shadow — recessed depth from above */
    inset 0 0.08em 0.1em rgba(0, 0, 0, 0.85),
    /* Bottom rim highlight — light catch */
    inset 0 -0.05em 0.06em -0.01em rgba(255, 255, 255, 0.12),
    /* Overall inner depth */
    inset 0 0 0.05em rgba(0, 0, 0, 0.6),
    /* Outer bottom highlight — surface rim */
    0 0.04em 0.02em rgba(255, 255, 255, 0.08);
}

/* ---- Scene integration: CRT glow on NES surface ---- */

/* Subtle green CRT glow tint on the top surface */
#nes .nes-glow-tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 50% -50%,
    rgba(20, 253, 206, 0.06) 0%,
    transparent 70%
  );
  border-radius: 0.3em 0.3em 0 0;
  pointer-events: none;
  z-index: 2;
}

/* Specular highlight on front edge */
.nes-bottom {
  border-top: 0.1em solid rgba(255, 255, 255, 0.08);
}

/* ---- Inserted Cartridge (top edge sticking out of slot) ---- */
.nes-inserted-cart {
  position: absolute;
  left: 8em;
  top: 1.6em;
  width: 19em;
  z-index: 0;   /* below door so lid covers it when closed */
  cursor: pointer;
}

.nes-inserted-cart-img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Insert animation — pushed into slot (toward viewer → away) */
.nes-inserted-cart.cart-inserted {
  animation: cartPushIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cartPushIn {
  0% {
    transform: scale(1.18);
  }
  25% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}