/* DES Classic — the 8-bit getup over the DART Channel's set, made with respect for the grey box and its decade:
   the porch is the box it came in (the black grid, the stripes, a seal of quality) with the Control Deck itself to
   switch on; the room is an '80s den (walnut paneling, shag carpet); the set is a wood-grain console TV with a chrome
   bezel and piano-key buttons, and the deck sits under it with its power light on. Colours are the NES's own.
   (Only loaded on /DESClassic/; everything here is scoped to .sys-nes.) */

.sys-nes { --des-red: #f83800; --des-deep: #a81000; --des-white: #fcfcfc; --des-grey: #bcbcbc; --des-mid: #7c7c7c; --des-dark: #545454;
  --px: "Press Start 2P", monospace; background: #000; color: var(--des-white); }

/* ---------- the porch: the black box ---------- */
.sys-nes .aero-scene {
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse 80% 70% at 50% 55%, #161616, #000 75%);
}
.sys-nes .aero-sky, .sys-nes .aero-cloud, .sys-nes .aero-hills, .sys-nes #bubbles, .sys-nes .aero-sun > i { display: none !important; }
/* the stripes across the top of the box, and the line of type along the bottom */
.sys-nes .aero-scene::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7vh; height: 34px; z-index: 1;
  background: linear-gradient(180deg,
    #f83800 0 6px, #000 6px 8px, #fca044 8px 13px, #000 13px 15px, #f8b800 15px 20px, #000 20px 22px, #58d854 22px 27px, #000 27px 29px, #3cbcfc 29px 34px);
}
.sys-nes .aero-scene::after {
  content: "DART ENTERTAINMENT SYSTEM \25C6  8-BIT \25C6  FRENS ONLY \25C6  TV GAME"; position: absolute; left: 0; right: 0; bottom: 4vh; z-index: 1;
  text-align: center; font: 10px/1 var(--px); letter-spacing: 3px; color: var(--des-mid); white-space: nowrap; overflow: hidden;
}
/* the gold seal (in the sun's place) */
.sys-nes .aero-sun {
  display: grid !important; place-items: center; position: absolute; left: auto; top: auto; right: 5vw; bottom: 9vh; z-index: 2;
  width: clamp(110px, 15vw, 170px); height: auto; aspect-ratio: 1.35; border-radius: 50%; animation: none; transform: rotate(-8deg); filter: none; opacity: 1;
  background: radial-gradient(ellipse at 40% 35%, #fce0a8 0%, #f8b800 45%, #ac7c00 100%);
  box-shadow: 0 0 0 3px #503000, 0 0 0 6px #f8b800, 0 0 0 8px #503000, 6px 8px 0 8px rgba(0,0,0,.6);
}
.sys-nes .aero-sun::before {
  content: "OFFICIAL\A\2605 FREN \2605\A SEAL OF\A QUALITY"; white-space: pre; text-align: center;
  font: clamp(6px, .75vw, 9px)/1.7 var(--px); color: #503000; letter-spacing: 1px;
}
.sys-nes .aero-sun::after { display: none; }
@media (max-width: 700px) { .sys-nes .aero-scene::after { font-size: 6px; letter-spacing: 1px; } .sys-nes .aero-scene::before { top: 5vh; } }

/* the DES wordmark: red, a white inline, a black outline and drop (the box art's logo treatment) */
.sys-nes .des-word {
  font: 400 1em/1 var(--px); color: var(--des-red); letter-spacing: .06em;
  text-shadow:
    .06em 0 #fcfcfc, -.06em 0 #fcfcfc, 0 .06em #fcfcfc, 0 -.06em #fcfcfc, .06em .06em #fcfcfc, -.06em -.06em #fcfcfc, .06em -.06em #fcfcfc, -.06em .06em #fcfcfc,
    .12em 0 #000, -.12em 0 #000, 0 .12em #000, 0 -.12em #000, .12em .12em #000, -.12em -.12em #000, .12em -.12em #000, -.12em .12em #000,
    .2em .2em 0 #000;
}

/* ---------- the start button: the Control Deck, and a cart ready to go in ---------- */
.sys-nes .bap {
  display: flex; flex-direction: column; align-items: center; width: min(88vmin, 620px); aspect-ratio: auto; padding: 0; gap: 0;
  border-radius: 0; background: none; box-shadow: none; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sys-nes .bap::after, .sys-nes .bap .label { display: none; }
.sys-nes .bap:hover { transform: none; }
.sys-nes .bap:active { transform: translateY(2px); }
.sys-nes .bap:focus-visible { outline: none; }
.sys-nes .bap:focus-visible .dd-btn.power i { outline: 3px solid #f8b800; outline-offset: 3px; }
.sys-nes .bap img { width: auto; margin: 0; filter: none; }

/* the cart: grey shell, the black-box label, grip ridges; it bobs, waiting, and slides in on hover */
.des-cart { position: relative; z-index: 0; width: 40%; margin-bottom: -17%; transition: transform .35s cubic-bezier(.4,1.4,.5,1); animation: cartBob 2.4s ease-in-out infinite; }
@keyframes cartBob { 50% { translate: 0 -6px; } }
.bap:hover .des-cart { transform: translateY(9%); }
.bap.popped .des-cart { animation: none; transform: translateY(46%); transition-duration: .2s; }
.dc-shell {
  position: relative; display: block; aspect-ratio: .92; padding: 7% 7% 0; border: 4px solid #000; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #8c8c8c, #b4b4b4 6%, #b4b4b4 94%, #8c8c8c);
  box-shadow: inset 0 4px 0 #dcdcdc, inset 0 -4px 0 #6c6c6c;
}
.dc-label {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4%; height: 64%; padding-top: 9%; overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 10px 10px,
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 10px 10px, #000;
  box-shadow: 0 0 0 3px #545454, 0 0 0 5px #000;
}
.dc-label .des-word { font-size: clamp(16px, 4.6vmin, 34px); margin-top: 4%; }
.dc-title { font: clamp(6px, 1.5vmin, 11px)/1 var(--px); color: var(--des-white); letter-spacing: 2px; }
.dc-label img { width: 20% !important; image-rendering: pixelated; margin-top: 1% !important; }
.dc-band { position: absolute; left: 0; right: 0; top: 4%; height: 4%; background: linear-gradient(90deg, #f83800 0 20%, #fca044 20% 40%, #f8b800 40% 60%, #58d854 60% 80%, #3cbcfc 80%); }
.dc-band.low { top: auto; bottom: 4%; }
.dc-ridges { position: absolute; left: 9%; right: 9%; bottom: 8%; top: 74%; background: repeating-linear-gradient(180deg, #7c7c7c 0 3px, #d0d0d0 3px 5px, #b4b4b4 5px 9px); }

/* the deck: light grey top with the cart door and vents, the ribbed black band, the darker front with POWER / RESET */
.des-deck { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; aspect-ratio: 2.5; filter: drop-shadow(10px 14px 0 rgba(0,0,0,.55)); }
.dd-top {
  display: flex; height: 50%; border: 4px solid #000; border-bottom: 0; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #dadada, #c4c4c4); box-shadow: inset 0 4px 0 #f0f0f0;
}
.dd-door {
  position: relative; width: 60%; margin: 4% 0 5% 4%; border-radius: 4px;
  background: linear-gradient(180deg, #cfcfcf, #bdbdbd); box-shadow: inset 0 0 0 3px #9a9a9a, inset 0 -6px 0 #a4a4a4, 0 2px 0 #f2f2f2;
}
.dd-slot { position: absolute; left: 12%; right: 12%; top: 10%; height: 9%; background: #1a1a1a; border-radius: 2px; box-shadow: inset 0 3px 0 #000; }
.dd-door b { position: absolute; left: 8%; bottom: 13%; font: clamp(5px, 1.15vmin, 9px)/1 var(--px); color: #4a4a4a; letter-spacing: 1px; text-shadow: 0 1px 0 #f0f0f0; }
.dd-vents { flex: 1; margin: 6% 5% 7%; border-radius: 3px; background: repeating-linear-gradient(180deg, #8a8a8a 0 3px, #d4d4d4 3px 5px, #c4c4c4 5px 9px); }
.dd-band { height: 9%; border-left: 4px solid #000; border-right: 4px solid #000; background: repeating-linear-gradient(180deg, #000 0 2px, #2c2c2c 2px 4px); }
.dd-front {
  display: flex; align-items: center; gap: 6%; flex: 1; padding: 0 5%; border: 4px solid #000; border-top: 0; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #9c9c9c, #858585); box-shadow: inset 0 -4px 0 #6c6c6c;
}
.dd-panel { display: flex; align-items: center; gap: clamp(8px, 2.4vmin, 18px); padding: 3% 4%; background: #141414; border-radius: 3px; box-shadow: inset 0 0 0 2px #2c2c2c; }
.dd-led { width: clamp(6px, 1.2vmin, 10px); aspect-ratio: 1; background: #3a1408; box-shadow: inset 0 0 0 1px #000; transition: background .1s, box-shadow .1s; }
.bap:hover .dd-led { background: #881400; }
.bap.popped .dd-led { background: #f83800; box-shadow: 0 0 10px #f83800, 0 0 2px #fca044; }
.dd-btn { display: grid; justify-items: center; gap: 5px; font: clamp(5px, 1.1vmin, 9px)/1 var(--px); color: #f83800; letter-spacing: 1px; }
.dd-btn i { display: block; width: clamp(26px, 6.4vmin, 50px); height: clamp(10px, 2.4vmin, 18px); border-radius: 2px; background: linear-gradient(180deg, #5c5c5c, #3c3c3c); box-shadow: inset 0 2px 0 #7c7c7c, 0 3px 0 #000; transition: transform .06s; }
.bap:active .dd-btn.power i, .bap.popped .dd-btn.power i { transform: translateY(2px); box-shadow: inset 0 2px 0 #5c5c5c, 0 1px 0 #000; }
.dd-ports { display: flex; gap: clamp(8px, 2vmin, 16px); margin-left: auto; }
.dd-ports i {
  position: relative; display: grid; place-items: center; width: clamp(26px, 6vmin, 44px); aspect-ratio: 1.3; border-radius: 3px 3px 30% 30%;
  background: #2a2a2a; box-shadow: inset 0 0 0 3px #1a1a1a, inset 0 0 0 5px #3c3c3c;
}
.dd-ports i::before { content: ""; width: 54%; height: 30%; background: radial-gradient(circle, #000 0 30%, transparent 34%) 0 0 / 25% 50%; }
.dd-ports b { position: absolute; top: -1.6em; font: clamp(5px, 1.1vmin, 9px)/1 var(--px); color: #f83800; }
.des-press {
  align-self: flex-start; margin: clamp(10px, 2.6vmin, 20px) 0 0 7%; font: clamp(8px, 1.8vmin, 13px)/1 var(--px); color: var(--des-white); letter-spacing: 1px;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.sys-nes .bap.popped { animation: desOn .45s steps(4) forwards .15s; }
@keyframes desOn { to { opacity: 0; filter: brightness(2.5); } }
.sys-nes .bap-hint { margin-top: 26px; font: 9px/1.6 var(--px); color: var(--des-mid); text-shadow: none; }

/* ---------- the gate (no snoot yet): an RPG window on the black box ---------- */
.sys-nes .window {
  border-radius: 0; background: #000; border: 0; padding: 10px;
  box-shadow: 0 0 0 4px #fcfcfc, 0 0 0 6px #000, 0 0 0 8px #7c7c7c, 12px 14px 0 8px rgba(0,0,0,.6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sys-nes .window::before, .sys-nes .window::after { display: none; }
.sys-nes .titlebar { background: #000; color: #fcfcfc; border-radius: 0; border-bottom: 4px solid #f83800; box-shadow: none; }
.sys-nes .titlebar::after { display: none; }
.sys-nes .titlebar .name { color: #fcfcfc; font: 9px var(--px); text-shadow: none; }
.sys-nes .titlebar .btn { border-radius: 0; background: #545454; border-color: #000; }
.sys-nes .titlebar .btn.close { background: #f83800; }
.sys-nes .body { color: #fcfcfc; background: #000; border-radius: 0; box-shadow: none; }
.sys-nes h1 { color: #fcfcfc; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font: 18px/1.4 var(--px); text-shadow: 3px 3px 0 #f83800; }
.sys-nes .sub { color: #bcbcbc; font: 9px/1.8 var(--px); }
.sys-nes .sub b { color: #f8b800; }
.sys-nes .gel::before, .sys-nes .gel::after { display: none; }
.sys-nes .gel { border-radius: 0; background: #f83800; border: 3px solid #000; color: #fcfcfc; box-shadow: 0 0 0 2px #fcfcfc, 4px 4px 0 2px #000; font: 10px var(--px); text-shadow: none; }
.sys-nes .sig input { border-radius: 0; border: 3px solid #fcfcfc; background: #000; color: #fcfcfc; font-family: var(--px); }
.sys-nes .gate-msg { font: 9px/1.6 var(--px); color: #3cbcfc; }
.sys-nes .gate-msg.bad { color: #f83800; }
.sys-nes .foot { font: 7px var(--px); color: #7c7c7c; }
.nes-mark { display: grid; justify-items: center; gap: 10px; margin: 6px auto 16px; }
.nes-mark .des-word { font-size: 44px; }
.nes-mark .des-classic { font: 14px var(--px); letter-spacing: 6px; color: #fcfcfc; }
.nes-mark .des-line { font: 7px var(--px); letter-spacing: 1px; color: #7c7c7c; }

/* ---------- the room: an '80s den, walnut paneling and shag carpet, lit by the TV ---------- */
.sys-nes .room { --glow: 92, 148, 252; background: #120904; }
.sys-nes .room::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 35%, rgba(0,0,0,.25)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .04 0 0 0 0 0 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 3px, rgba(255,210,160,.06) 3px 4px, transparent 4px 96px),
    repeating-linear-gradient(90deg, #4c2c15 0 9px, #43260f 9px 21px, #53321a 21px 34px, #3d220d 34px 47px, #4a2a13 47px 63px, #44270f 63px 79px, #50301a 79px 96px);
}
.sys-nes .room::after {
  /* shag carpet: rust and brown, deep pile */
  background:
    radial-gradient(circle at 30% 40%, rgba(255,170,90,.18) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.35) 0 1px, transparent 1.6px) 0 0 / 4px 4px,
    linear-gradient(180deg, #7a3c14 0, #5a2a0c 10%, #3a1a06 60%, #1a0a02);
  box-shadow: 0 -1px 0 rgba(255,190,140,.18), inset 0 10px 18px rgba(0,0,0,.55);
}

/* ---------- the set: a wood-grain console TV, chrome around the tube, a brushed-aluminium control strip ---------- */
.sys-nes .tv-cabinet {
  border-radius: calc(var(--u) * 2.2);
  background:
    linear-gradient(180deg, rgba(255,230,190,.16), rgba(255,230,190,0) 6%, rgba(0,0,0,0) 88%, rgba(0,0,0,.45)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .04 0 0 0 0 0 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='400' height='240' filter='url(%23w)'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    linear-gradient(90deg, #5a3317, #74461f 22%, #643b1b 48%, #774820 72%, #5b3418);
  box-shadow:
    inset 0 calc(var(--u) * .3) 0 rgba(255,220,170,.25),
    inset 0 calc(var(--u) * -.5) 0 rgba(0,0,0,.4),
    0 0 0 calc(var(--u) * .3) #1a0c04,
    0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.85),
    0 0 calc(var(--u) * 12) rgba(var(--glow), calc(var(--glowA) * .3));
}
.sys-nes .tv-cabinet::before { opacity: .25; }
.sys-nes .tv-bezel {
  border-radius: calc(var(--u) * 2.4);
  background: linear-gradient(180deg, #f2f2f2, #b4b4b4 30%, #e0e0e0 50%, #9a9a9a 75%, #cfcfcf);
  box-shadow: inset 0 0 0 calc(var(--u) * .25) #6a6a6a, inset 0 0 0 calc(var(--u) * 1.1) rgba(255,255,255,.35), 0 0 0 calc(var(--u) * .3) #1a0c04, 0 calc(var(--u) * .4) calc(var(--u) * .6) rgba(0,0,0,.5);
}
.sys-nes .tv-tube { border-radius: calc(var(--u) * 3.6) / calc(var(--u) * 4.2); box-shadow: 0 0 0 calc(var(--u) * .5) #111, 0 0 0 calc(var(--u) * .8) #2a2a2a; }
.sys-nes .tv-panel {
  left: calc(var(--u) * 5); right: calc(var(--u) * 5); top: calc(var(--u) * 71.4); height: calc(var(--u) * 8.4); padding: 0 calc(var(--u) * 2);
  border-radius: calc(var(--u) * .8);
  background: repeating-linear-gradient(90deg, #d6d6d6 0 1px, #c2c2c2 1px 2px, #cdcdcd 2px 4px), #c8c8c8;
  box-shadow: 0 0 0 calc(var(--u) * .25) #1a0c04, inset 0 calc(var(--u) * .2) 0 #f4f4f4, inset 0 calc(var(--u) * -.25) 0 #8a8a8a;
}
.sys-nes .tv-brand span { font: calc(var(--u) * 1.5) var(--px); color: #1c1c1c; letter-spacing: 0; text-shadow: 0 calc(var(--u) * .08) 0 #f4f4f4; }
.sys-nes .tv-brand b { color: #f83800; font-weight: 400; }
.sys-nes .tv-brand img { filter: drop-shadow(0 calc(var(--u) * .1) 0 rgba(255,255,255,.6)); }
.sys-nes .tv-grille {
  border-radius: calc(var(--u) * .5); height: calc(var(--u) * 5.2);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), #3a2a1e;
  box-shadow: inset 0 calc(var(--u) * .25) calc(var(--u) * .5) rgba(0,0,0,.8), 0 0 0 calc(var(--u) * .2) #8a8a8a;
}
.sys-nes .tv-btn i {
  width: calc(var(--u) * 3); height: calc(var(--u) * 2.2); border-radius: calc(var(--u) * .2) calc(var(--u) * .2) calc(var(--u) * .45) calc(var(--u) * .45);
  background: linear-gradient(180deg, #fafafa, #c8c8c8 45%, #a8a8a8 55%, #d8d8d8);
  box-shadow: 0 calc(var(--u) * .25) 0 #6a6a6a, 0 0 0 calc(var(--u) * .12) #4a4a4a, inset 0 calc(var(--u) * .1) 0 #fff;
}
.sys-nes .tv-btn.power i { background: linear-gradient(180deg, #fca044, #f83800 50%, #a81000 55%, #e45c10); }
.sys-nes .tv-btn.net i { background: linear-gradient(180deg, #a4e4fc, #3cbcfc 50%, #0078f8 55%, #3cbcfc); }
.sys-nes .tv-btn.mic i { background: linear-gradient(180deg, #f8b8f8, #f878f8 50%, #d800cc 55%, #f878f8); }
.sys-nes .tv-btn span { font: calc(var(--u) * .55) var(--px); color: #2a2a2a; }
.sys-nes .tv-led { border-radius: 0; background: #f83800; box-shadow: 0 0 calc(var(--u) * .9) #f83800; }
.sys-nes .room.off .tv-led { background: #3a1408; box-shadow: none; }

/* the DES deck, standing under the set (the TV's feet, dressed: one is the POWER panel, the other the pad ports) */
.sys-nes .tv-feet {
  left: 29%; right: 29%; bottom: calc(var(--u) * -10.4); height: calc(var(--u) * 10.4);
  border: calc(var(--u) * .3) solid #000; border-radius: calc(var(--u) * .9) calc(var(--u) * .9) calc(var(--u) * .7) calc(var(--u) * .7);
  background:
    linear-gradient(180deg, #d6d6d6 0, #c2c2c2 52%, #000 52% 53.5%, #2c2c2c 53.5% 54.5%, #000 54.5% 56%, #2c2c2c 56% 57%, #000 57% 58.5%, #9a9a9a 58.5%, #828282);
  box-shadow: inset 0 calc(var(--u) * .25) 0 #f0f0f0, 0 calc(var(--u) * .6) calc(var(--u) * .8) rgba(0,0,0,.7);
}
.sys-nes .tv-feet::before {
  /* the cart door, a cart in it */
  content: ""; position: absolute; left: 6%; top: 10%; width: 52%; height: 34%; border-radius: calc(var(--u) * .3);
  background: linear-gradient(180deg, #cdcdcd, #b8b8b8); box-shadow: inset 0 0 0 calc(var(--u) * .25) #9a9a9a, 0 calc(var(--u) * .12) 0 #f0f0f0;
}
.sys-nes .tv-feet::after {
  /* the vents */
  content: ""; position: absolute; right: 6%; top: 12%; width: 28%; height: 30%;
  background: repeating-linear-gradient(180deg, #8a8a8a 0 calc(var(--u) * .25), #d4d4d4 calc(var(--u) * .25) calc(var(--u) * .7));
}
.sys-nes .tv-feet i { top: 66%; bottom: auto; border-radius: calc(var(--u) * .2); height: 22%; }
.sys-nes .tv-feet i:first-child {
  /* POWER and RESET on their black plate, the red light */
  left: 6%; width: 38%;
  background:
    radial-gradient(circle, #f83800 0 45%, transparent 50%) 6% 50% / calc(var(--u) * .9) calc(var(--u) * .9) no-repeat,
    linear-gradient(#4c4c4c, #3a3a3a) 32% 50% / 26% 46% no-repeat,
    linear-gradient(#4c4c4c, #3a3a3a) 82% 50% / 26% 46% no-repeat, #141414;
  box-shadow: 0 0 calc(var(--u) * .8) rgba(248,56,0,.25);
}
.sys-nes .room.off .tv-feet i:first-child { background-image: radial-gradient(circle, #3a1408 0 45%, transparent 50%), linear-gradient(#4c4c4c, #3a3a3a), linear-gradient(#4c4c4c, #3a3a3a); box-shadow: none; }
.sys-nes .tv-feet i:last-child {
  right: 6%; width: 30%; background: radial-gradient(ellipse, #1a1a1a 0 55%, transparent 60%) 0 0 / 50% 100%, transparent;
}
body.sys-nes.mobile .tv-feet { display: none; }

.sys-nes .fs-chip { border-radius: 0; background: #f83800; border: 2px solid #000; font-family: var(--px); }
.sys-nes .install-chip { border-radius: 0; background: #f83800; border: 3px solid #000; box-shadow: 0 0 0 2px #fcfcfc, 4px 4px 0 2px #000; font-family: var(--px); }
.sys-nes .fps-note { border-radius: 0; border-color: #f83800; font-family: var(--px); }
.sys-nes .intro-skip { font-family: var(--px); }

/* ---------- phones: the NES pad ---------- */
body.sys-nes.mobile .mpad { background: linear-gradient(180deg, #2a160a 0, #1c0e06 30%, #0c0603); }
.sys-nes .mp-key { border-radius: 2px; background: #1c1c1c; color: #fcfcfc; border-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 0 #000; }
.sys-nes .mp-key:active { background: #d82800; }
.mp-body.nes {
  /* the grey body, square corners, a black faceplate inset */
  border-radius: calc(var(--k) * 1.6);
  background: #c4c4c4;
  box-shadow: inset 0 calc(var(--k) * .3) 0 rgba(255,255,255,.7), inset 0 calc(var(--k) * -.3) 0 rgba(0,0,0,.25), 0 0 0 2px #000, 0 calc(var(--k) * 1.2) 0 rgba(0,0,0,.5);
}
.mp-body.nes::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 22%; bottom: 10%; border-radius: calc(var(--k) * .6);
  background: #141414; box-shadow: inset 0 0 0 calc(var(--k) * .3) #2a2a2a;
}
.mp-body.nes::after {
  /* the grey stripes down the middle, behind SELECT and START */
  content: ""; position: absolute; left: 36%; width: 27%; top: 30%; height: 18%;
  background: repeating-linear-gradient(180deg, #a8a8a8 0 calc(var(--k) * 1.4), transparent calc(var(--k) * 1.4) calc(var(--k) * 2.8));
}
.mp-body.nes .mp-sheen { display: none; }
.mp-body.nes .mp-plate { top: calc(var(--ky) * 3); left: auto; right: calc(var(--k) * 4); transform: none; background: none; box-shadow: none; padding: 0; align-items: flex-end; }
.mp-body.nes .mp-brand { color: #fcfcfc; background: #d82800; padding: calc(var(--k) * .5) calc(var(--k) * 1); font-size: calc(var(--k) * 2.2); letter-spacing: 0; text-shadow: none; box-shadow: 0 0 0 1px #000; }
.mp-body.nes .mp-brand b { color: #fcfcfc; margin: 0; text-shadow: none; }
.mp-body.nes .mp-sub { color: #545454; }
.mp-body.nes .mp-led { left: calc(var(--k) * -2.4); border-radius: 0; background: #3a1408; }
.mp-body.nes.live .mp-led { background: #f83800; box-shadow: 0 0 calc(var(--k) * 1.2) #f83800; }
.mp-body.nes .mp-dpad { border-radius: 0; background: transparent; box-shadow: none; z-index: 1; }
.mp-body.nes .mp-cross { inset: 6%; }
.mp-body.nes .mp-cross::before, .mp-body.nes .mp-cross::after { border-radius: 2px; background: #2c2c2c; box-shadow: inset 0 calc(var(--k) * .3) 0 rgba(255,255,255,.12); }
/* (fatter arms than the other pads': the NES cross is chunky) */
.mp-body.nes .mp-cross::before { left: 30%; right: 30%; }
.mp-body.nes .mp-cross::after { top: 30%; bottom: 30%; }
.mp-body.nes .mp-arrow { border-width: calc(var(--k) * 1.4); }
.mp-body.nes .mp-dpad::after { display: none; }
.mp-body.nes .mp-dpad.up .mp-arrow.up, .mp-body.nes .mp-dpad.down .mp-arrow.down, .mp-body.nes .mp-dpad.left .mp-arrow.left, .mp-body.nes .mp-dpad.right .mp-arrow.right { filter: drop-shadow(0 0 calc(var(--k) * .6) #f8b800) brightness(1.6); }
.mp-body.nes .mp-well { border-radius: calc(var(--k) * .8); background: #c4c4c4; box-shadow: inset 0 0 0 1px #8a8a8a; z-index: 1; }
.mp-body.nes .mp-btn { z-index: 2; color: #fcfcfc; text-shadow: 0 1px 0 rgba(0,0,0,.5); background: radial-gradient(circle at 40% 35%, #f85838 0%, #d82800 55%, #a81000 100%); box-shadow: inset 0 calc(var(--k) * -.4) 0 rgba(0,0,0,.35), 0 calc(var(--k) * .3) 0 rgba(0,0,0,.6); }
.mp-body.nes .mp-btn.small { background: radial-gradient(circle at 40% 35%, #d84030, #a81000 70%); font-size: calc(var(--k) * 1.6); }
.mp-body.nes .mp-btn.on { color: #fcfcfc; box-shadow: 0 0 0 calc(var(--k) * .3) #f8b800, 0 0 calc(var(--k) * 2) rgba(248,184,0,.6); }
.mp-body.nes .mp-btn.pill, .mp-body.nes .mp-well.pill { transform: none; }
.mp-body.nes .mp-btn.pill { border-radius: calc(var(--k) * 1.5); background: #141414; box-shadow: 0 0 0 1px #000; }
.mp-body.nes .mp-btn.pill.on { transform: translateY(calc(var(--k) * .3)); background: #3a3a3a; box-shadow: 0 0 0 calc(var(--k) * .2) #f8b800; }
.mp-body.nes .mp-well.pill { background: #a8a8a8; }
.mp-body.nes .mp-label { color: #d82800; text-shadow: none; z-index: 2; }
.sys-nes .mp-hint { color: #f8b800; z-index: 3; }
.sys-nes .rotate-note { background: #000; }