/* Japanese Super Famicom control geometry, adapted into two hand grips.
   Visual reference: Nintendo's Japanese controller guide and front photograph.
   https://support.nintendo.com/jp/switch/controller/superfamicom.html
   https://support.nintendo.com/jp/switch/controller/img/superfamicom/img01.jpg
   This skin uses the existing controls and preserves their input hit targets. */

body.sfc-controller {
  --ink: #555758;
  --accent: #6c6e70;
  --sfc-shell: #d3d4d3;
  --sfc-dark: #55595b;
  background: radial-gradient(ellipse at 50% 40%, #f3f3ef 0%, #e6e7e3 57%, #c9ccca 100%);
}

/* Separate round grips, with the game display held between them. */
.sfc-controller .console {
  padding: 0;
  gap: clamp(7px, 1.05vw, 16px);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.sfc-controller .console::after { display: none; }
.sfc-controller .controller {
  width: var(--control-w);
  height: calc(var(--control-w) * 1.48 + 20px);
  align-self: center;
  justify-content: initial;
  isolation: isolate;
  z-index: 3;
  filter: drop-shadow(0 9px 7px #484c4b2b);
}
.sfc-controller .controller::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 0;
  left: -13px;
  right: -18px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, #e3e4e1 2%, #d7d8d5 42%, #c8cac8 98%);
  border: 1px solid #b1b4b1;
  border-radius: 58% 25px 23px 54% / 44% 24px 24px 55%;
  box-shadow: inset 2px 3px 2px #ffffffe0, inset 0 -4px 1px #b8bbb8,
    inset -2px 0 3px #b3b6b3, 0 3px 0 #979b98, 0 4px 1px #b8bcb8;
}
.sfc-controller .controller-right::before {
  left: -18px;
  right: -13px;
  background: linear-gradient(112deg, #d2d4d0 2%, #d9dbd7 62%, #c2c5c2 100%);
  border-radius: 25px 58% 54% 23px / 24px 44% 55% 24px;
  box-shadow: inset -1px 3px 2px #ffffffe0, inset 0 -4px 1px #b8bbb8,
    inset 2px 0 2px #e8eae6, 0 3px 0 #979b98, 0 4px 1px #b8bcb8;
}
.sfc-controller .controller::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8px;
  height: 1px;
  border-bottom: 1px solid #e9ebe666;
  border-radius: 50%;
  pointer-events: none;
}

/* Broad grey L / R caps, placed along the curved top edge. */
.sfc-controller .shoulder {
  width: 88%;
  height: clamp(21px, calc(var(--control-w) * .15), 30px);
  top: 3px;
  left: 6%;
  z-index: 1;
  padding: 0;
  border: 1px solid #b8bcb8;
  border-bottom-color: #9ca19d;
  border-radius: 70% 30% 24% 24% / 70% 60% 30% 30%;
  background: linear-gradient(#e7e9e5, #c5c9c4);
  color: #a0a59f;
  box-shadow: inset 0 2px 1px #fff, 0 3px 1px #b4b8b2, 0 4px 2px #686d6838;
  font: 800 clamp(12px, calc(var(--control-w) * .095), 19px) Arial, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 1px 0 #f7f9f5;
  transform: rotate(-6deg);
}
.sfc-controller .controller-right .shoulder {
  transform: rotate(6deg);
  border-radius: 30% 70% 24% 24% / 60% 70% 30% 30%;
}
.sfc-controller .shoulder span { transform: translateY(-1px); }
.sfc-controller .shoulder.is-pressed,
.sfc-controller .shoulder:active {
  background: #c1c5c0;
  box-shadow: inset 0 1px 3px #8a8f89, 0 2px 1px #b4b8b2;
}

/* Small printed mark; no manufacturer logo or badge is added. */
.sfc-controller .brand-mark {
  top: max(34px, calc(var(--control-w) * .25 + 3px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: baseline;
  white-space: nowrap;
  color: #6a706b;
  opacity: .9;
  line-height: 1;
}
.sfc-controller .brand-mark > span,
.sfc-controller .brand-mark strong {
  font: 800 clamp(5px, calc(var(--control-w) * .045), 9px) Arial, sans-serif;
  font-style: normal;
  letter-spacing: -.15px;
}
.sfc-controller .brand-mark small,
.sfc-controller .controller-caption,
.sfc-controller .rotation-labels { display: none; }

/* The original has a circular, light-grey moulded recess around a dark cross. */
.sfc-controller .dpad-recess {
  position: absolute;
  width: calc(var(--control-w) * .91);
  height: calc(var(--control-w) * .91);
  top: calc(var(--control-w) * .25 + 14px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid #b7bcb7;
  background: linear-gradient(120deg, #c7cbc5, #d4d8d1);
  box-shadow: inset 1px 2px 3px #7b847b45, inset -1px -2px 2px #f8faf5,
    0 1px 0 #ecefe8;
}
.sfc-controller .dpad {
  width: 75%;
  height: 75%;
  filter: drop-shadow(0 3px 1px #292c294d);
}
.sfc-controller .dkey {
  padding: 0;
  background: linear-gradient(145deg, #555957, #424644);
  box-shadow: inset 1px 1px 1px #888c86, inset -1px -2px 1px #292d29;
  color: #353b36;
}
.sfc-controller .dkey svg { display: none; }
.sfc-controller .dkey::after {
  content: "";
  width: 48%;
  height: 44%;
  position: absolute;
  background: #3b413b;
  filter: drop-shadow(0 1px 0 #777e75);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sfc-controller .dkey.up { border-radius: 5px 5px 0 0; }
.sfc-controller .dkey.up::after { top: 26%; }
.sfc-controller .dkey.down { border-radius: 0 0 5px 5px; }
.sfc-controller .dkey.down::after { bottom: 26%; transform: rotate(180deg); }
.sfc-controller .dkey.left { border-radius: 5px 0 0 5px; }
.sfc-controller .dkey.left::after { left: 25%; transform: rotate(-90deg); }
.sfc-controller .dkey.right { border-radius: 0 5px 5px 0; }
.sfc-controller .dkey.right::after { right: 25%; transform: rotate(90deg); }
.sfc-controller .dpad-center { background: #4b504c; }
.sfc-controller .dpad-center i {
  width: 52%;
  height: 52%;
  background: radial-gradient(ellipse at 65% 75%, #61675e 0%, #4c524b 40%, #424840 85%);
  box-shadow: inset 0 1px 2px #30382d55, 0 1px 1px #7f867866;
}
.sfc-controller .dkey.is-pressed,
.sfc-controller .dkey:active {
  background: #3c423c;
  box-shadow: inset 1px 2px 3px #20281f, inset -1px -1px 1px #767e71;
  transform: translateY(1px);
}

/* Only the rubber pills are slanted. Their SELECT / START labels stay level.
   Each pill is drawn inside a larger transparent input target. */
.sfc-controller .system-buttons {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(3px, calc(var(--control-w) * .045), 10px);
  margin: 0;
}
.sfc-controller .system-buttons > div { gap: 0; }
.sfc-controller .pill-button {
  position: relative;
  width: clamp(39px, calc(var(--control-w) * .31), 61px);
  height: clamp(27px, calc(var(--control-w) * .22), 42px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
.sfc-controller .pill-button::before {
  content: "";
  position: absolute;
  width: 76%;
  height: 34%;
  left: 12%;
  top: 32%;
  border-radius: 999px;
  transform: rotate(-35deg);
  background: linear-gradient(#696f68, #454c45);
  border: 1px solid #3d443c;
  box-shadow: inset 0 1px 1px #a9afa4, 0 2px 0 #2c342c,
    0 0 0 2px #a2a99e, 0 1px 0 3px #e7ebe2;
}
.sfc-controller .pill-button.is-pressed,
.sfc-controller .pill-button:active { transform: translateY(1px); box-shadow: none; }
.sfc-controller .pill-button.is-pressed::before,
.sfc-controller .pill-button:active::before {
  background: #3e463b;
  box-shadow: inset 0 1px 2px #293124, 0 0 0 2px #a2a99e;
}
.sfc-controller .system-buttons span {
  color: #646d60;
  font: 800 clamp(6px, calc(var(--control-w) * .052), 10px) Arial, sans-serif;
  letter-spacing: -.12px;
}

/* Two diagonal moulded channels, inside the charcoal circular button plate.
   Japanese mapping: X blue, Y green, A red, B yellow. */
.sfc-controller .face-recess {
  position: absolute;
  top: calc(var(--control-w) * .25 + 14px);
  left: 50%;
  width: calc(var(--control-w) * 1.03);
  height: calc(var(--control-w) * 1.03);
  margin: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #575f58;
  background: linear-gradient(120deg, #818984, #737b75 74%, #68716a);
  box-shadow: inset 0 1px 1px #a0a99f, 0 0 0 2px #cbd0c5, 0 1px 0 3px #edf0e8;
}
.sfc-controller .face-buttons {
  width: 91%;
  height: 91%;
  transform: none;
  position: relative;
  isolation: isolate;
}
.sfc-controller .face-buttons::before,
.sfc-controller .face-buttons::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 34%;
  left: 0%;
  top: 20.5%;
  z-index: -1;
  transform: rotate(-41.75deg);
  border-radius: 999px;
  background: linear-gradient(#d2d7cc, #b9c1b3);
  border: 1px solid #e6ebe0;
  box-shadow: 0 0 0 1px #4b554b, inset 0 1px 2px #818d7d;
  pointer-events: none;
}
.sfc-controller .face-buttons::after { left: 28%; top: 45.5%; }
.sfc-controller .face-button {
  --button-color: #0757c7;
  position: absolute;
  width: 38%;
  height: 38%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform 70ms ease;
}
.sfc-controller .face-button::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: var(--button-color);
  border: 1px solid #23352e88;
  box-shadow: inset 0 2px 1px #ffffff40, inset 0 -2px 1px #0000001f,
    0 2px 0 #243b2855, 0 0 0 1px #71806c, 0 1px 0 2px #e0e9d4;
  pointer-events: none;
}
.sfc-controller .button-x { --button-color: #0756d0; top: 6%; left: 31%; right: auto; bottom: auto; }
.sfc-controller .button-y { --button-color: #009a57; top: 31%; left: 3%; right: auto; bottom: auto; }
.sfc-controller .button-a { --button-color: #e00027; top: 31%; left: 59%; right: auto; bottom: auto; }
.sfc-controller .button-b { --button-color: #f3c316; top: 56%; left: 31%; right: auto; bottom: auto; }
.sfc-controller .face-button span {
  position: absolute;
  color: #d6dcd2;
  font: 800 clamp(11px, calc(var(--control-w) * .102), 22px) Arial, sans-serif;
  line-height: 1;
  text-shadow: none;
  pointer-events: none;
  transform: none;
}
.sfc-controller .button-x span,
.sfc-controller .button-a span { left: 93%; top: -6%; }
.sfc-controller .button-y span,
.sfc-controller .button-b span { right: 93%; bottom: -6%; }
.sfc-controller .face-button.is-pressed,
.sfc-controller .face-button:active { transform: translateY(2px); box-shadow: none; }
.sfc-controller .face-button.is-pressed::before,
.sfc-controller .face-button:active::before {
  box-shadow: inset 0 1px 3px #18240f60, 0 0 0 1px #71806c;
}

.sfc-controller .utility-buttons {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  gap: 3px;
  white-space: nowrap;
  color: #757d72;
}
.sfc-controller .utility-buttons button {
  width: clamp(28px, calc(var(--control-w) * .20), 39px);
  height: clamp(26px, calc(var(--control-w) * .18), 36px);
  padding: 6px;
  color: #717c6d;
}
.sfc-controller .utility-buttons > span {
  font: 600 clamp(5px, calc(var(--control-w) * .042), 8px) Arial, sans-serif;
  letter-spacing: .45px;
}

/* A quiet, neutral display frame keeps the 4:3 playfield dominant. */
.sfc-controller .screen-frame {
  position: relative;
  z-index: 4;
  border: 1px solid #171f1c;
  border-radius: 10px;
  padding: 7px 9px 6px;
  gap: 5px;
  background: linear-gradient(155deg, #4c5450, #343e38 75%, #2c352e);
  box-shadow: inset 0 1px 1px #c7cdc15e, 0 3px 0 #171f18,
    0 6px 0 #b3b9ad, 0 8px 1px #8c9585, 0 15px 25px #37433235;
}
.sfc-controller .bezel-label {
  min-height: 8px;
  color: #b2bbae;
  font: 500 5px ui-monospace, monospace;
  letter-spacing: .8px;
}
.sfc-controller .bezel-label i { background: #c3ccb9; }
.sfc-controller .screen {
  border: 1px solid #18271c;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #727e69, inset 0 0 12px #0008;
}
.sfc-controller .bezel-bottom { height: 10px; }
.sfc-controller .bezel-wordmark { font-size: 7px; letter-spacing: 1.3px; color: #9ba88e; }
.sfc-controller .bezel-wordmark b { font-size: 10px; }
.sfc-controller .power { color: #9ba68f; font-size: 4.5px; }
.sfc-controller .power i { width: 3px; height: 3px; background: #d45d48; box-shadow: 0 0 3px #f3764d66; }
.sfc-controller .stereo-grille { color: #64705b; font-size: 10px; opacity: .65; }
.sfc-controller .desktop-heading { color: #697066; letter-spacing: 2px; }
.sfc-controller .desktop-heading b { color: #646f5f; }
.sfc-controller .heading-edition { color: #8b9485; letter-spacing: 2px; }
.sfc-controller .heading-mark i { background: #0756d0; }
.sfc-controller .heading-mark i:nth-child(2) { background: #e00027; }
.sfc-controller .heading-mark i:nth-child(3) { background: #009a57; }
.sfc-controller .heading-mark i:nth-child(4) { background: #f3c316; }
.sfc-controller .desktop-footer { color: #8c9586; }
.sfc-controller .desktop-footer b { color: #697561; }

@media (max-height: 650px) {
  .sfc-controller .screen-frame { padding: 5px 7px 5px; gap: 4px; border-radius: 8px; }
  .sfc-controller .bezel-label { font-size: 4.5px; min-height: 7px; }
  .sfc-controller .bezel-bottom { height: 9px; }
}
@media (max-height: 370px) {
  .sfc-controller .bezel-label { display: none; }
  .sfc-controller .screen-frame { padding: 4px 6px; gap: 3px; }
}
@media (max-width: 570px) {
  .sfc-controller .controller { height: calc(var(--control-w) * 1.48 + 33px); }
  .sfc-controller .controller::before { left: -8px; right: -8px; }
  .sfc-controller .brand-mark { display: none; }
  .sfc-controller .dpad-recess,
  .sfc-controller .face-recess { top: 33px; }
  .sfc-controller .system-buttons { gap: 0; bottom: 7px; }
  .sfc-controller .pill-button { width: 32px; height: 27px; }
  .sfc-controller .system-buttons span { font-size: 5px; }
  .sfc-controller .utility-buttons > span { display: none; }
}