/* Switch (screen34): the console drawing, controls, album, hint. */

/* screen34: pure-CSS Nintendo Switch drawing, ported from a CodePen-style
   example the user supplied (example.html/.css). Every selector is scoped
   under .switch so none of its generic class names (.body, .frame, .menu,
   .round...) or its bare `button` rule can leak into the rest of the site;
   the original's inner `.screen` is renamed .switch-screen since .screen is
   this site's own screen class. Sized in `em` off .switch's font-size, so
   the whole drawing scales from that one value. */
.switch {
  --joycon-left: #00c5e2;
  --joycon-left-shadow: #0128;
  --joycon-right: #ff6658;
  --joycon-right-shadow: #c218;
  position: relative;
  font-size: min(92vw, 95vmin);
  width: 1em;
  aspect-ratio: 632 / 269;
  background: #f000;
}

.switch *,
.switch *::before,
.switch *::after {
  position: absolute;
  box-sizing: border-box;
}

.switch .round {
  border-radius: 50%;
}

.switch .body {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72.1%;
  height: 99%;
}

.switch .frame {
  width: 100%;
  height: 100%;
  border-radius: 0.002em;
  background: 
    radial-gradient(farthest-side, #2f3638 50%, #0000) -1% 3% / 2% 2%,
    radial-gradient(farthest-side, #2f3638, #0000) 1% -0.75% / 2% 2%,
    radial-gradient(95% 70% at 0% 0%, #2f3638 85%, #fff3, #f000) 0.5% 0.75% / 1.55% 5.25% no-repeat,
    radial-gradient(farthest-side, #2f3638 50%, #0000) 101% 3% / 2% 2%,
    radial-gradient(farthest-side, #2f3638, #0000) 99% -0.75% / 2% 2%,
    radial-gradient(95% 70% at 100% 0%, #2f3638 85%, #fff3, #f000) 99.5% 0.75% / 1.55% 5.25% no-repeat,
    linear-gradient(#0000 1%, #fff3 2%, #0000 4%),
    linear-gradient(#0000 95%, #0008),
    #2f3638;
  background-repeat: no-repeat;
  box-shadow:
    inset -0.0015em 0 0.00075em -0.00075em #fff5,
    inset 0.0015em 0 0.00075em -0.00075em #fff6;
/*   -webkit-mask:
    radial-gradient(40% 50% at 0 0, #0000 8%, #000 0) 0 0 / 55% 100% no-repeat,
    radial-gradient(40% 50% at 100% 0, #0000 8%, #000 0) 100% 0 / 55% 100% no-repeat
    ; */
  -webkit-mask:
    radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 0 3.9% / 0.6% 1% no-repeat,
    radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 1.7% 0% / 0.4% 1% no-repeat,
    radial-gradient(78.33% 60.33% at 0% 0%, #f000 99%, #f00) 0.5% 0.75% / 1.55% 5.25% no-repeat,
    
    radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 100% 3.9% / 0.6% 1% no-repeat,
    radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 98.3% 0% / 0.4% 1% no-repeat,
    radial-gradient(78.33% 60.33% at 100% 0%, #f000 99%, #f00) 99.5% 0.75% / 1.55% 5.25% no-repeat,
    linear-gradient(#0000 4.7%, #000 0),
    linear-gradient(90deg,#0000 2%, #000 0 98%, #0000 0)
    ;
}

.switch .frame::before {
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  height: 93%;
  border-radius: 0.011em;
  border: 0.0003em solid #000;
  box-shadow: 
    0 0.00045em 0.001em #fff8,
    inset 0 0.0006em 0.0015em -0.00025em #000,
    inset 0 0.0007em 0.0015em -0.00025em #fffc
    ;
  background: 
    radial-gradient(circle at 32.7% 98%, #0e0e0e 0.9%, #000 0 1%, #0e0e0e 0 1.2%, #0000 0),
    linear-gradient(#0e0e0e 0 0) 32.33% 100% / 2.1% 2% no-repeat,
    #000;
}

.switch .switch-screen {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 77.5%;
  border-radius: 0.001em;
  background: #292d30;
  box-shadow: inset 0 0.0015em 0.005em -0.0015em #000c;
}

.switch .controller {
  opacity: 10.7;
  --color: var(--joycon-left);
  --color-shadow: var(--joycon-left-shadow);
  width: 13.85%;
  height: 99%;
  bottom: 0;
  left: 0;
  border-radius: 0.09em 0.004em 0.002em 0.09em;
  background: 
    var(--color);
  box-shadow:
    0.02em 0.0105em 0 -0.0123em #020100,
    inset 0.001em -0.009em 0.01em -0.003em var(--color-shadow),
    
    inset 0.035em 0 0.025em -0.025em #0002,
    inset -0.002em 0 0.004em var(--color),
    inset 0.006em 0.016em 0.005em -0.008em var(--color),
    inset 0 0.017em 0.005em -0.008em #fff,
    inset 0.005em -0.005em 0.01em -0.004em var(--color-shadow)
    ;
}

.switch .controller::before {
  content: "";
  width: 0.00275em;
  aspect-ratio: 1;
  background: #393537;
  box-shadow: inset 0.0001em 0.00075em 0.0004em #fff3;
  left: 100%;
  top: 97.75%;
  border-radius: 50%;
}

.switch .controller.right {
  --color: var(--joycon-right);
  --color-shadow: var(--joycon-right-shadow);
  left: auto;
  right: 0;
  border-radius: 0.004em 0.09em 0.09em 0.002em;
  box-shadow:
    
    -0.02em 0.0105em 0 -0.0123em #020100,
    inset -0.001em -0.009em 0.01em -0.003em #000a,
    inset -0.035em 0 0.025em -0.025em #0002,
    inset 0.002em 0 0.004em var(--color),
    inset -0.006em 0.016em 0.005em -0.008em var(--color),
    inset 0 0.017em 0.005em -0.008em #fff,
    inset -0.01em 0 0.01em -0.004em var(--color-shadow);
}

.switch .controller.right::before {
  left: auto;
  right: 100%;
  box-shadow: inset -0.0001em 0.00075em 0.0004em #fff3;
}
.switch button {
  border: 0;
  font-size: 1em;
  padding: 0;
}

.switch .minus {
  --c: #404040;
  width: 17%;
  height: 1.8%;
  background: var(--c);
  top: 8.9%;
  right: 7.7%;
  border-radius: 0.0015em;
  border: 0.001em solid var(--color-shadow);
  box-shadow:
    inset 0.00075em -0.00075em 0.0005em #0008,
    inset -0.0006em 0 0.0005em #0003,
    inset 0 0.00075em 0.0005em #fff6,
    0 0.002em 0.0025em -0.001em #0006;
}

.switch .plus {
  left: 7.7%;
  right: auto;
}

.switch .plus::before {
  content: "";
  width: 35%;
  height: 400%;
  background: var(--c);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.0015em;
  border: 0.001em solid var(--color-shadow);
  box-shadow:
    0 0.004em 0.02em var(--color-shadow),
    inset -0.0006em 0 0.0004em #0007,
    inset 0.0006em 0 0.0004em #0007,
    inset 0 -0.001em 0.0005em -0.0002em #0008,
    inset 0 0.00075em 0.0005em -0.0002em #fff6;
}

.switch .plus::after {
  content: "";
  width: 35%;
  aspect-ratio:1 ;
  background: 
    /* top left */
    radial-gradient(circle at 0 0, #834 20%, #0000 20% 35%, var(--c) 0) 0 0 / 50% 50%,
    conic-gradient(at 0 0, #000, #fff) 1% 1% / 40% 40%,
    /* top right */
    radial-gradient(circle at 100% 0, #834 20%, #0000 20% 35%, var(--c) 0) 100% 0 / 50% 50%,
    conic-gradient(at 100% 0, #fff 25%, #000) 99% 1% / 40% 40%,
    
    /* bottom left */
    radial-gradient(circle at 0% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 1% 99% / 50% 50%,
    radial-gradient(at 0% 100%,  #0008, #0000) 1% 99% / 40% 40%,
    
    /* bottom right */
    radial-gradient(circle at 100% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 99% 99% / 50% 50%,
    radial-gradient(at 100% 100%,  #0008, #0000) 100% 99% / 40% 40%,
    var(--c);
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*   -webkit-mask:
    radial-gradient(200% 250% at 0 0, #0000 0%, #000 20%) 0 0 / 50% 50% no-repeat,
    radial-gradient(200% 250% at 100% 0, #0000 0%, #000 20%) 100% 0 / 50% 50% no-repeat,
    radial-gradient(200% 250% at 100% 100%, #0000 20%, #000 0) 100% 100% / 50% 50% no-repeat,
    radial-gradient(200% 250% at 0 100%, #0000 20%, #000 20%) 0 100% / 50% 50% no-repeat */
    ;
}

.switch .mushroom {
  width: 47%;
  aspect-ratio: 1;
  border: 0.001em solid var(--color-shadow);
  top: 17.5%;
  left: 30%;
  background:
    radial-gradient(circle at 50% 0, #6669, #6660 60%),
    #2a2e31;
  box-shadow:
    /* inside */
    inset 0 0.0001em 0.00125em -0.0005em var(--color),
    inset 0 0.003em 0.003em #0004,
    inset 0 -0.005em 0.003em #0006,
    /* shadows */
    0 -0.0009em 0.001em 0.001em #0003,
    0 0.00075em 0.001em 0.001em #0003,
    0 0.01em 0.01em -0.0025em #0004,
    0 0.025em 0.035em var(--color-shadow)
    ;
}

.switch .right .mushroom {
  top: 45.25%;
  left: 23.25%
}

.switch .mushroom::before {
  content: "";
  width: 80%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  background: radial-gradient(circle at 50% 0, #6669, #6660 60%);
  box-shadow:
    inset 0 0 0.001em #0008,
    inset 0 0.002em 0.002em #0008,
    inset 0 -0.001em 0.001em 0.001em #fff4,
    0 0.001em 0.001em #fff2,
    0 -0.0007em 0.001em 0.0006em #0008,
    0 -0.0025em 0.0015em 0.0006em #fff2
}

.switch .mushroom::after {
  content: "";
  width: 95%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  background: 
    /* up */
    linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 0 / 3% 12%,
    linear-gradient(#000 5%, #444 15% 30%, #666 50%, #3c3c3c, #484848) 50% 0 / 3% 12%,
    /* left */
    linear-gradient(#0000 30% 90%, #fff) 0% 50% / 12% 3%,
    linear-gradient(#000, #0000 30% 70%, #000) 0% 50% / 12% 3%,
    linear-gradient(90deg, #fff4, #222 10% 50%, #444) 0% 50% / 12% 3%,
    /* right */
    linear-gradient(#0000 30% 90%, #fff) 100% 50% / 12% 3%,
    linear-gradient(#000, #0000 30% 70%, #000) 100% 50% / 12% 3%,
    linear-gradient(to left, #fff4, #222 10% 50%, #444) 100% 50% / 12% 3%,
    /* down */
    linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 100% / 3% 12%,
    linear-gradient(to top, #fff4, #111 15% 50%, #444) 50% 100% / 3% 12%,
    #f000;
  background-repeat: no-repeat;
}

.switch .direction {
  display: grid;
  place-items: center;
  width: 23%;
  aspect-ratio: 1;
  border: 0.0007em solid var(--color-shadow);
  background:
    linear-gradient(#fff2, #fff0),
    #35393c;
  box-shadow:
    0 0.002em 0.007em var(--color-shadow),
    inset 0 0.0001em 0.0015em -0.0005em var(--color),
    inset 0 0 0.0005em 0.001em #323439,
    inset 0 0.002em 0.001em 0.0002em #def5,
    inset 0 -0.001em 0.0005em 0.0002em #000,
    inset 0 -0.001em 0.001em 0.002em #000c
}

.switch .direction::before {
  font-size: 0.0175em;
  font-family: Helvetica, sans-serif;
  color: #fffa;
}

.switch .arrow::before,
.switch .arrow::after {
  content: "";
  width: 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #252525;
  clip-path: polygon(52% -2%, 100% 80%, 0 80%, 48% -2%);
}

.switch .arrow::before {
  top: 51.5%;
  background: #fff3;
  filter: blur(0.01em);
}

.switch .arrow.right::before,
.switch .arrow.right::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.switch .arrow.left::before,
.switch .arrow.left::after {
  transform: translate(-50%, -50%) rotate(-90deg) ;
}

.switch .arrow.down::before,
.switch .arrow.down::after {
  transform: translate(-50%, -50%) rotate(180deg) ;
}

.switch .direction.up {
  top: 41.75%;
  left: 41.9%;
}

.switch .direction.down {
  top: 56.6%;
  left: 41.9%;
}

.switch .direction.left {
  left: 18.25%;
  top: 49.25%;
}

.switch .direction.right {
  left: 65.75%;
  top: 49.25%;
}

.switch .direction.x {
  top: 14%;
  left: 35%;
}

.switch .direction.x::before {
  content: "X";
}

.switch .direction.y {
  top: 21.5%;
  left: 11.25%
}

.switch .direction.y::before {
  content: "Y";
}

.switch .direction.a {
  top: 21.5%;
  left: 59%
}

.switch .direction.a::before {
  content: "A";
}


.switch .direction.b {
  top: 29%;
  left: 35%
}

.switch .direction.b::before {
  content: "B";
}

.switch .menu {
  width: 19.35%;
  aspect-ratio: 1;
  border: 0.0009em solid var(--color-shadow);
  top: 68.5%;
  left: 60.5%;
  border-radius: 0.003em;
  background: #464b50;
  box-shadow: 
    inset 0 0.001em 0.001em -0.0005em #fff6,
    inset 0 -0.001em 0.001em -0.0005em #0006
}

.switch .menu::before {
  content: "";
  width: 67%;
  aspect-ratio: 1;
  background: #33393c;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    inset 0 0.0009em 0.00075em #0008,
    0 0.0008em 0.00075em #fff5
}

.switch .lr {
  background: linear-gradient(#4c5153 50%, #030405 60%);
  top: -1%;
  right: 18%;
  width: 83.5%;
  height: 21%;
  border-radius: 100em 2em 0 0;
  clip-path: ellipse(140% 87% at 100% 0%);
  box-shadow:
    inset -0.004em 0 0.003em -0.003em #333,
    inset -0.007em 0 0.003em -0.003em #4c5153,
    inset 0 0.0015em 0.001em #444,
    inset -0.001em 0.00175em 0.001em #fff
    ;
  z-index: -1;
}

.switch .lr.rr {
  left: 18%;
  right: auto;
  transform: scaleX(-1);
}

.switch .volume {
  width: 8.5%;
  height: 0.7%;
  background: linear-gradient(#444, #222);
  left: 13.3%;
  top: -0.6%;
  border-radius: 0.0005em 0.0005em 0 0;
  clip-path: polygon(-20% -100%, 32% -100%, 32% 0, 33% 35%, 66% 35%, 67% 0%, 67% -100%, 110% -100%, 110% 120%, -20% 120%);
  z-index: -1;
}

.switch .home {
  top: 67.6%;
  left: 17.5%;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1;
  border: 0.0007em solid var(--color-shadow);
  background:
    linear-gradient(#0001, #0005),
    radial-gradient(#0000 52.5%, #9c9a9a 0),
    #404547;
}

.switch .home::before {
  content: "";
  top: 23%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50%;
  height: 24.5%;
  background: 
    conic-gradient(at 50% 0, #0000 132deg, #010202 0 228deg, #0000 0);
  box-shadow: 0 0.00015em 0.0001em -0.00008em #fff
}

.switch .home::after {
  content: "";
  color: #010202;
  top: 46%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 39%;
  height: 24.5%;
  box-shadow: 
    inset -0.004em 0,
    inset 0.004em 0,
    inset 0 -0.004em 0,
    0 0.00015em 0.0001em -0.00008em #fff
}

/* Mobile only (user's idea2.PNG mockup): the console detaches its joycons -
   the tablet body goes (nearly) full width on top, and the two joycons
   stand upright side by side underneath it, bigger than when attached.
   Every piece's internals are sized in em off its own font-size, so each
   part (body, each joycon) gets its own font-size here and keeps the exact
   original em width/height (0.721em x 0.4214em for the body, 0.1385em x
   0.4214em per joycon - the original's percentages of a 1em-wide, 632:269
   article). That scales all of its buttons, borders and shadows together
   with it instead of distorting anything. */
@media (max-width: 600px) {
  .switch {
    --switch-body-w: calc(100vw - 2rem);
    --switch-body-h: calc(var(--switch-body-w) * 0.4214 / 0.721);
    --switch-gap: 5vh;
    --joycon-h: 40vh;
    --joycon-w: calc(var(--joycon-h) * 0.1385 / 0.4214);
    --joycon-spacing: 8vw;
    width: var(--switch-body-w);
    height: calc(var(--switch-body-h) + var(--switch-gap) + var(--joycon-h));
    aspect-ratio: auto;
  }

  .switch .body {
    font-size: calc(var(--switch-body-w) / 0.721);
    width: 0.721em;
    height: 0.4214em;
    top: 0;
    bottom: auto;
  }

  .switch .controller {
    font-size: calc(var(--joycon-w) / 0.1385);
    width: 0.1385em;
    height: 0.4214em;
    top: calc(var(--switch-body-h) + var(--switch-gap));
    bottom: auto;
    left: calc(50% - var(--joycon-spacing) / 2 - var(--joycon-w));
  }

  .switch .controller.right {
    left: calc(50% + var(--joycon-spacing) / 2);
    right: auto;
  }
}

/* Detached joycons (mobile): the solid black strip down each joycon's inner
   edge came from the first box-shadow above - it's the seam against the
   console when attached, but on its own it just read as a flat black bar.
   Swapped for a proper slide rail modeled on a real detached joycon
   (reference.PNG): dark charcoal-gray, a bit inset from the top and bottom,
   rounded ends, with a soft highlight so it reads as a raised metal/plastic
   part instead of a hole. The rest of each box-shadow list is unchanged;
   the little rail-screw dot (::before) is dropped, it only makes sense
   against the console. */
@media (max-width: 600px) {
  .switch .controller {
    box-shadow:
      inset 0.001em -0.009em 0.01em -0.003em var(--color-shadow),
      inset 0.035em 0 0.025em -0.025em #0002,
      inset -0.002em 0 0.004em var(--color),
      inset 0.006em 0.016em 0.005em -0.008em var(--color),
      inset 0 0.017em 0.005em -0.008em #fff,
      inset 0.005em -0.005em 0.01em -0.004em var(--color-shadow);
  }

  .switch .controller.right {
    box-shadow:
      inset -0.001em -0.009em 0.01em -0.003em #000a,
      inset -0.035em 0 0.025em -0.025em #0002,
      inset 0.002em 0 0.004em var(--color),
      inset -0.006em 0.016em 0.005em -0.008em var(--color),
      inset 0 0.017em 0.005em -0.008em #fff,
      inset -0.01em 0 0.01em -0.004em var(--color-shadow);
  }

  .switch .controller::before {
    display: none;
  }

  .switch .controller::after {
    content: "";
    top: 3%;
    height: 94%;
    width: 7%;
    left: 100%;
    border-radius: 0 0.004em 0.004em 0;
    background: linear-gradient(90deg, #2a2d30, #4a4e52 45%, #34373a 80%, #26292b);
    box-shadow:
      inset 0 0.0015em 0.001em #fff3,
      inset 0 -0.0015em 0.001em #0006,
      0.001em 0 0.002em #0004;
  }

  .switch .controller.right::after {
    left: auto;
    right: 100%;
    border-radius: 0.004em 0 0 0.004em;
    background: linear-gradient(-90deg, #2a2d30, #4a4e52 45%, #34373a 80%, #26292b);
    box-shadow:
      inset 0 0.0015em 0.001em #fff3,
      inset 0 -0.0015em 0.001em #0006,
      -0.001em 0 0.002em #0004;
  }
}

/* Draggable sticks (see makeJoystickDraggable in script.js). touch-action: none
   stops a phone from treating the drag as a page scroll/zoom gesture. */
.switch .mushroom {
  touch-action: none;
  cursor: grab;
}

.switch .mushroom:active {
  cursor: grabbing;
}

/* Dark well behind each stick (a sibling placed right before each .mushroom
   in the markup, so it paints underneath and - unlike a pseudo-element on
   the stick - stays put while the left stick is dragged). Same box as the
   stick, scaled to its inner circle's 80%, shaded like .mushroom::before
   but a notch darker. */
.switch .stick-base {
  width: 47%;
  aspect-ratio: 1;
  top: 17.5%;
  left: 30%;
  transform: scale(0.8);
  background:
    radial-gradient(circle at 50% 0, #4449, #4440 60%),
    #17191b;
  box-shadow:
    inset 0 0 0.001em #000a,
    inset 0 0.002em 0.002em #000a,
    inset 0 -0.001em 0.001em 0.001em #fff2,
    0 0.001em 0.001em #fff1;
}

.switch .right .stick-base {
  top: 45.25%;
  left: 23.25%;
}

/* Pressable A/B/X/Y and d-pad (see pressSwitchButton in script.js): sinks in while
   held, and each press sends out a ring + the button's own letter floating
   up. Sizes in em, so they scale with the drawing like everything else. */
.switch .direction {
  touch-action: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Darkened with an inset shadow rather than filter: brightness(), which
   would also dim the ring/letter spawned inside the button while held. */
.switch .direction.is-pressed {
  transform: scale(0.88);
  box-shadow:
    inset 0 0 0 1em #0005,
    inset 0 0.002em 0.002em #000c;
}

.switch .switch-press-ring {
  inset: -0.001em;
  border-radius: 50%;
  border: 0.0012em solid #ffffff;
  pointer-events: none;
  animation: switch-press-ring 0.45s ease-out forwards;
}

@keyframes switch-press-ring {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.9); opacity: 0; }
}

.switch .switch-press-letter {
  left: 50%;
  top: 50%;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: 0.022em;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0.05em 0.15em #0008;
  pointer-events: none;
  animation: switch-press-letter 0.6s ease-out forwards;
}

@keyframes switch-press-letter {
  from { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
  to { transform: translate(-50%, -190%) scale(1.3); opacity: 0; }
}


/* Mockup only (no behavior yet): the Switch's own "Album" gallery on the
   drawing's screen, recreated from the user's capture.PNG (a 2000x1125
   layout). Positions are that mockup's pixel coordinates as percentages of
   the screen. font-size 0.5768em makes 1em = the screen's own width (the
   screen is 80% of the 0.721em-wide body), so every mockup pixel is
   px/2000 em - text, borders and radii all scale with the drawing, phone
   and desktop alike. .switch * already makes every piece absolute. */
.switch .switch-album {
  inset: 0;
  font-size: 0.5768em;
  background: #ebebeb;
  color: #2d2d2d;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  border-radius: inherit;
}

.switch .album-icon {
  left: 5%;
  top: 4.6%;
  width: 4%;
  height: 4.8%;
}

.switch .album-title {
  left: 10.25%;
  top: 4.4%;
  font-size: 0.025em;
  line-height: 1;
}

.switch .album-rule {
  left: 2.35%;
  right: 2.35%;
  height: 0.001em;
  background: #505050;
}

.switch .album-rule--top { top: 12%; }
.switch .album-rule--bottom { top: 89.9%; }

.switch .album-tile {
  width: 31.95%;
  height: 32.4%;
  background: #2f2f2f;
  border: 0.003em solid #ffffff;
  border-radius: 0.0015em;
  overflow: hidden;
}

.switch .album-tile img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.switch .album-tile--1 { left: 15.9%; top: 16.25%; }
.switch .album-tile--2 { left: 52.15%; top: 16.25%; }
.switch .album-tile--3 { left: 15.9%; top: 53.4%; }
.switch .album-tile--4 { left: 52.15%; top: 53.4%; }

/* Teal "cursor" ring around the selected tile (tile 1 for the mockup). */
.switch .album-selection {
  left: 15%;
  top: 14.65%;
  width: 33.75%;
  height: 35.65%;
  border: 0.007em solid #5ccfcb;
  border-radius: 0.009em;
  box-shadow: 0 0 0.008em #5ccfcb99, inset 0 0 0.004em #5ccfcb66;
  pointer-events: none;
}

.switch .album-selection--hidden {
  visibility: hidden;
}

/* The quick "pop" the cursor makes as it lands on a new photo/arrow
   (replayed by replayPop in script.js) - it jumps there instantly
   instead of sliding. */
.switch .album-pop {
  animation: album-pop 0.14s ease-out;
}

@keyframes album-pop {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* Cursor positions (data-cursor, set by moveAlbumCursor in script.js) -
   the ring's own offset around each tile, same spacing as the tiles. */
.switch .album-selection[data-cursor="1"] { left: 51.25%; }
.switch .album-selection[data-cursor="2"] { top: 51.8%; }
.switch .album-selection[data-cursor="3"] { left: 51.25%; top: 51.8%; }

.switch .album-arrow {
  top: 46.4%;
  width: 4.3%;
  height: 8.7%;
  overflow: visible;
}

.switch .album-arrow--left { left: 5%; }
.switch .album-arrow--right { right: 5%; }

/* SVG triangles (were clip-path'd divs) so a selected arrow can get the
   same teal outline + glow as the photo cursor - clip-path can't draw a
   border. Stroke is in viewBox units (86 wide). */
.switch .album-arrow polygon {
  fill: #2d2d2d;
  stroke: transparent;
  stroke-width: 9;
  stroke-linejoin: round;
}

.switch .album-arrow--selected polygon {
  stroke: #5ccfcb;
}

.switch .album-arrow--selected {
  filter: drop-shadow(0 0 0.004em #5ccfcbcc);
}

.switch .album-controllers {
  left: 4%;
  top: 92.3%;
  width: 4.6%;
  height: 5.7%;
}

.switch .album-hint {
  top: 93.2%;
  font-size: 0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}

.switch .album-hint--back { right: 13.6%; }
.switch .album-hint--ok { right: 4.9%; }

/* The B/A badges are small SVGs (circle + letter drawn as a path), not
   text: at phone size the whole badge is only ~7-8 CSS px, and text gets
   snapped to whole pixels - up to half a pixel off, which is a visible
   chunk of a circle that small, and it landed differently every time the
   display size changed (it was re-tuned by eye three times). A path has no
   font metrics or pixel snapping, so the letter stays dead-center at any
   size. .switch * makes everything absolute - the badge goes back into the
   flex flow next to its label (relative, so it can be raised a touch to
   line up with the label's capitals rather than its descender space). */
.switch .album-hint .album-hint__btn {
  position: relative;
  top: -0.12em;
  /* The circle is r=9.6 in its 20x20 viewBox (not a full 10) plus
     overflow: visible - at r=10 its anti-aliased edge sat exactly on the
     svg's own box, and rounding that box to whole pixels clipped the
     bottom of the circle. Sized up slightly to keep the same look. */
  width: 1.15em;
  height: 1.15em;
  overflow: visible;
  flex: none;
}

/* Mobile: a bigger display inside the same-size console (thinner black
   bezel) - 88% x 84.7% of the body instead of the original 80% x 77.5%,
   still inside the black glass panel (.frame::before, 94% x 93%). Height
   is picked to keep the display ~16:9 (the body is 1.711:1), so the Album
   mockup keeps its shape. .switch-album's font-size has to follow: it's
   what makes 1em = the display's width (0.88 x the body's 0.721em). */
@media (max-width: 600px) {
  .switch .switch-screen {
    width: 88%;
    height: 84.7%;
  }

  .switch .switch-album {
    font-size: 0.6345em;
  }
}

/* The album's own photo viewer (A on a photo - see albumPressA in
   script.js): grows from the selected tile to cover the whole display,
   photo shown whole (contain) on black like the real Switch viewer.
   left/top/width/height are animated from JS; this is just the look. */
.switch .album-viewer {
  inset: 0;
  background: #000000;
  overflow: hidden;
}

.switch .album-viewer[hidden] {
  display: none;
}

.switch .album-viewer img,
.switch .album-viewer video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Touchscreen (see the album tile/arrow click handlers in script.js). */
.switch .album-tile,
.switch .album-arrow {
  cursor: pointer;
}

.switch .album-viewer img[hidden],
.switch .album-viewer video[hidden] {
  display: none;
}

/* Video tiles' duration badge, bottom-right like the real Switch album.
   font-size is a fraction of the display width (.switch-album's 1em);
   everything else here is em of that font-size, i.e. of the badge text. */
.switch .album-tile__duration {
  right: 0.3em;
  bottom: 0.3em;
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
  background: #000000b3;
  color: #ffffff;
  font-size: 0.016em;
  line-height: 1.2;
  pointer-events: none;
}

.switch .album-tile__duration[hidden] {
  display: none;
}

/* The album's last page: "quieres seguir mi amor?" + a Switch-style next
   button (see albumOnPromptPage / albumLeaveForScreen35 in script.js),
   filling the same area as the photo grid. The box is in em of
   .switch-album (1em = display width); the text/button font-sizes are
   fractions of that, and the button's own padding/border are em of its
   own text. */
.switch .album-prompt {
  left: 0;
  right: 0;
  top: 12%;
  bottom: 10.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  /* Spans the album's full width and sits after the left arrow in the
     markup, so it was swallowing taps meant for that arrow - only the
     button itself takes clicks. */
  pointer-events: none;
}

.switch .album-prompt .album-prompt__btn {
  pointer-events: auto;
}

.switch .album-prompt[hidden] {
  display: none;
}

/* .switch * makes everything absolute - back into the flex column. */
.switch .album-prompt > * {
  position: static;
}

.switch .album-prompt__text {
  /* Same typography as the site's own .message (Cormorant Garamond
     italic, 1px-at-2.5rem letter-spacing as em so it scales). */
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.4;
  font-size: 0.045em;
  color: #2d2d2d;
  margin: 0;
}

.switch .album-prompt .album-prompt__btn {
  /* Same typography as the site's .next-btn (Mario font, uppercase,
     3px-at-1.2rem letter-spacing as em) - only the Switch-style shape
     differs. */
  font-family: 'Super Mario 256', 'Cormorant Garamond', serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.03em;
  color: #2d2d2d;
  background: #ffffff;
  padding: 0.5em 2.6em;
  border-radius: 0.3em;
  border: 0.12em solid transparent;
  box-shadow: 0 0.06em 0.2em #0002;
  cursor: pointer;
}

.switch .album-prompt .album-prompt__btn--selected {
  border-color: #5ccfcb;
  box-shadow: 0 0 0.3em #5ccfcb99, 0 0.06em 0.2em #0002;
}

/* Mobile: the prompt read small at phone size - 1.5x its text and button
   (same em-of-display-width scheme, so it still scales with the Switch). */
@media (max-width: 600px) {
  .switch .album-prompt__text {
    font-size: 0.0675em;
  }

  .switch .album-prompt .album-prompt__btn {
    font-size: 0.05em;
  }
}

/* screen34's "usa el control amor:p" hint, just under the joycons. Out of
   the layout entirely - absolute, anchored to .switch's own bottom edge
   (which is below the joycons in both layouts) - so showing or hiding it
   can't move anything. Sized in rem, not the drawing's em. Site .message
   typography, black like the rest of the white-background screens. Fades
   out at the site's 1.2s on the first joycon input (dismissSwitchHint). */
.switch .switch-hint {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 1rem 0 0;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #000000;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.switch .switch-hint--gone {
  opacity: 0;
}