/* N621 — the 64-bit getup over the DART Channel's set: charcoal plastic, the four logo colours (green, red, yellow,
   blue), and low-poly everything: faceted hills, faceted clouds, a faceted controller. (Only loaded on /N621/;
   everything here is scoped to .sys-n64.) */

/* ---------- the porch: the low-poly world itself (a render from theme-n64.js), graded to golden hour and thrown a
   little out of focus, so the glass slab in front is the sharp, bright thing ---------- */
.sys-n64 { background: #0d1030; }
.sys-n64 .aero-sky, .sys-n64 .aero-sun, .sys-n64 .aero-cloud, .sys-n64 .aero-hills, .sys-n64 .aero-bubble { display: none; }
.sys-n64 .aero-scene::before {
  content: ""; position: absolute; inset: -24px; pointer-events: none;
  background: url(porch.jpg) center 64% / cover no-repeat; /* (blurred and graded in the file itself: a live blur this size is heavy on phones) */
  animation: n64Drift 40s ease-in-out infinite alternate;
}
.sys-n64 .aero-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(255,190,120,.16), rgba(255,190,120,0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(4,4,22,.78) 100%),
    linear-gradient(180deg, rgba(28,16,92,.6) 0%, rgba(120,60,140,.18) 38%, rgba(255,150,80,.16) 58%, rgba(8,8,30,.5) 100%);
}
@keyframes n64Drift { from { transform: scale(1.02) translate(-6px, 0); } to { transform: scale(1.07) translate(6px, -6px); } }

/* ---------- the gate: a charcoal window with the four-colour stripe ---------- */
.sys-n64 .window {
  border-radius: 14px; background: #2b2b36; border: 2px solid #0b0b12;
  box-shadow: 0 0 0 3px #4a4a5a, 0 18px 40px rgba(0,0,40,.45);
}
.sys-n64 .titlebar {
  background: linear-gradient(180deg, #3a3a48, #22222c); color: #fff; border-radius: 12px 12px 0 0;
  border-bottom: 5px solid transparent;
  border-image: linear-gradient(90deg, #18a640 0 25%, #e8262f 25% 50%, #ffc61e 50% 75%, #2c4fd8 75% 100%) 1;
}
.sys-n64 .titlebar .name { color: #fff; font-family: "Press Start 2P", monospace; font-size: 9px; }
.sys-n64 .titlebar .btn { border-radius: 50%; background: #4a4a5a; border-color: #0b0b12; }
.sys-n64 .titlebar .btn.close { background: #e8262f; }
.sys-n64 .body {
  color: #e8ebff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05) 0 30%, transparent 30%),
    linear-gradient(225deg, rgba(255,255,255,.03) 0 45%, transparent 45%),
    #2b2b36;
}
.sys-n64 h1 { color: #ffc61e; font-family: "Press Start 2P", monospace; font-size: 20px; text-shadow: 2px 2px 0 #e8262f, 4px 4px 0 #0b0b12; }
.sys-n64 .sub { font-family: "Press Start 2P", monospace; font-size: 9px; line-height: 1.7; color: #c9d4ff; }
.sys-n64 .gel::before, .sys-n64 .gel::after { display: none; }
.sys-n64 .gel { border-radius: 999px; background: linear-gradient(180deg, #5f86ff, #2c4fd8); border: 2px solid #0b0b12; color: #fff; box-shadow: 0 4px 0 #1a2f8a; font-family: "Press Start 2P", monospace; font-size: 10px; }
.sys-n64 .sig input { border-radius: 10px; border: 2px solid #0b0b12; background: #f4f6ff; font-family: "Press Start 2P", monospace; }
.sys-n64 .foot { font-family: "Press Start 2P", monospace; font-size: 7px; color: #9aa2c8; }
.sys-n64 .gate-msg { font-family: "Press Start 2P", monospace; font-size: 8px; }

/* the N621 mark: the voxel logo, with the full name under it */
.n64-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px auto 14px; }
.n64-mark img { width: min(300px, 70vw); filter: drop-shadow(0 6px 0 rgba(0,0,30,.35)); animation: n64Sway 5s ease-in-out infinite; }
.n64-mark span { font: 8px "Press Start 2P", monospace; letter-spacing: 1px; color: #c9d4ff; }
@keyframes n64Sway { 0%, 100% { transform: perspective(600px) rotateY(-10deg); } 50% { transform: perspective(600px) rotateY(10deg); } }

/* the start button: a floating slab of smoked glass. The voxel logo inside it, a four-colour light bar along the
   bottom, a light sweep across the glass now and then, and a sapphire glass pill to press */
.sys-n64 .bap {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0 15%;
  width: min(80vmin, 560px); aspect-ratio: 1.32; border-radius: clamp(22px, 6vmin, 40px); animation: n64Float 6s ease-in-out infinite;
  background:
    linear-gradient(158deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 34%, rgba(255,255,255,0) 34.5%),
    radial-gradient(120% 70% at 50% 0%, rgba(130,160,255,.32), rgba(130,160,255,0) 62%),
    radial-gradient(90% 60% at 50% 105%, rgba(255,198,30,.12), rgba(255,198,30,0) 70%),
    linear-gradient(180deg, rgba(42,44,78,.86), rgba(12,12,30,.94));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -30px 50px rgba(0,0,10,.5),
    0 0 0 1px rgba(6,6,20,.7), 0 34px 50px -18px rgba(0,0,16,.85), 0 0 50px rgba(120,150,255,.2);
}
.sys-n64 .bap::before {
  /* the light bar */
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 9%; height: clamp(4px, 1vmin, 7px); border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, #18a640 0 25%, #e8262f 25% 50%, #ffc61e 50% 75%, #2c4fd8 75% 100%);
  box-shadow: 0 0 14px rgba(255,255,255,.35), 0 0 34px rgba(255,200,120,.35);
}
.sys-n64 .bap::after {
  /* a sweep of light across the glass */
  display: block; inset: 0; border-radius: inherit; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 58%) -150% 0 / 250% 100% no-repeat;
  animation: n64Sheen 6s ease-in-out infinite;
}
.sys-n64 .bap .bap-logo { width: 72%; margin: 0; filter: drop-shadow(0 14px 18px rgba(0,0,20,.55)); animation: n64Sway 5s ease-in-out infinite; }
.sys-n64 .bap .label {
  bottom: 20%; font-size: clamp(13px, 3vmin, 21px); letter-spacing: 2px; color: #fff; padding: .7em 1.6em;
  background: linear-gradient(180deg, #9fb6ff 0%, #4c6cf6 46%, #2442d4 54%, #3d63ff 100%);
  border: 1px solid rgba(190,205,255,.55); text-shadow: 0 1px 0 rgba(0,10,80,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -8px 14px rgba(0,10,80,.35), 0 10px 30px rgba(44,79,216,.6), 0 0 0 4px rgba(255,255,255,.06);
}
.sys-n64 .bap:hover { transform: translateY(-4px) scale(1.015); }
.sys-n64 .bap:focus { outline: none; }
.sys-n64 .bap:focus-visible { outline: none; }
.sys-n64 .bap-hint { margin-top: 28px; color: rgba(235,240,255,.85); font: 400 9px "Press Start 2P", monospace; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,20,.9); }
@keyframes n64Float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes n64Sheen { 0%, 55% { background-position: -150% 0; } 85%, 100% { background-position: 250% 0; } }

/* ---------- the room: a late-'90s den at dusk, faceted wallpaper lit blue by the set ---------- */
.sys-n64 .room { --glow: 90, 140, 255; background: #0e1022; }
.sys-n64 .room::before {
  background:
    linear-gradient(60deg, rgba(255,255,255,.035) 25%, transparent 25% 50%, rgba(255,255,255,.035) 50% 75%, transparent 75%) 0 0 / 120px 70px,
    linear-gradient(-60deg, rgba(0,0,0,.18) 25%, transparent 25% 50%, rgba(0,0,0,.18) 50% 75%, transparent 75%) 0 0 / 120px 70px,
    linear-gradient(180deg, #1c2048 0%, #141634 100%);
}
.sys-n64 .room::after { background: linear-gradient(180deg, #3a2e4a 0, #2a2238 8px, #1a1626 40%, #0c0a14); box-shadow: 0 -1px 0 rgba(160,180,255,.15); }

/* ---------- the set: charcoal, the four-colour logo stripe, coloured buttons like the pad's ---------- */
.sys-n64 .tv-cabinet {
  border-radius: calc(var(--u) * 2.2);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07) 0 22%, transparent 22%),
    linear-gradient(180deg, #3e3e4a 0%, #2b2b36 60%, #1e1e27 100%);
  box-shadow:
    inset 0 calc(var(--u) * .3) 0 rgba(255,255,255,.18),
    inset 0 calc(var(--u) * -.4) 0 rgba(0,0,0,.45),
    0 0 0 calc(var(--u) * .25) #0b0b12,
    0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,20,.8),
    0 0 calc(var(--u) * 12) rgba(var(--glow), calc(var(--glowA) * .32));
}
.sys-n64 .tv-cabinet::before { opacity: .12; }
.sys-n64 .tv-bezel { border-radius: calc(var(--u) * 1.6); background: #121219; box-shadow: inset 0 0 0 calc(var(--u) * .4) #262630, 0 0 0 calc(var(--u) * .25) #0b0b12; }
.sys-n64 .tv-tube { border-radius: calc(var(--u) * 3) / calc(var(--u) * 3.6); box-shadow: 0 0 0 calc(var(--u) * .35) #000, 0 0 0 calc(var(--u) * .6) #34343f; }
.sys-n64 .tv-brand span { font-family: "Press Start 2P", monospace; font-size: calc(var(--u) * 1.5); color: #fff; letter-spacing: 0; text-shadow: calc(var(--u) * .15) calc(var(--u) * .15) 0 #e8262f; }
.sys-n64 .tv-brand b { color: #ffc61e; font-weight: 400; text-shadow: calc(var(--u) * .15) calc(var(--u) * .15) 0 #2c4fd8; }
.sys-n64 .tv-grille {
  border-radius: calc(var(--u) * .4); box-shadow: none;
  background: linear-gradient(90deg, #18a640 0 25%, #e8262f 25% 50%, #ffc61e 50% 75%, #2c4fd8 75% 100%) center bottom / 100% calc(var(--u) * .5) no-repeat,
    repeating-linear-gradient(180deg, #17171f 0 calc(var(--u) * .5), #3a3a46 calc(var(--u) * .5) calc(var(--u) * 1.1));
}
.sys-n64 .tv-btn i { border-radius: 50%; background: #4a4a58; box-shadow: inset 0 calc(var(--u) * .12) 0 rgba(255,255,255,.25), 0 0 0 calc(var(--u) * .15) #0b0b12; }
.sys-n64 .tv-btn.power i { background: #e8262f; }
.sys-n64 .tv-btn.net i { background: #18a640; }
.sys-n64 .tv-btn.mic i { background: #2c4fd8; }
.sys-n64 .tv-btn[data-tv="menu"] i { background: #ffc61e; }
.sys-n64 .tv-btn span { font-family: "Press Start 2P", monospace; font-size: calc(var(--u) * .55); color: #b8bed8; }
.sys-n64 .tv-led { background: #3fe06a; box-shadow: 0 0 calc(var(--u) * .9) #3fe06a; }
.sys-n64 .room.off .tv-led { background: #123a1c; box-shadow: none; }
.sys-n64 .tv-feet i { background: #0b0b12; border-radius: calc(var(--u) * .4); }
.sys-n64 .fs-chip { border-radius: 999px; background: #2c4fd8; border: 2px solid #0b0b12; }
.sys-n64 .install-chip { border-radius: 14px; background: linear-gradient(180deg, #5f86ff, #2c4fd8); border: 2px solid #fff; box-shadow: 0 5px 0 #1a2f8a; }
.sys-n64 .fps-note { border-color: #2c4fd8; }
.sys-n64 .rotate-note { background: #141634; }

/* ---------- phones: a premium pad. A soft-touch graphite shell in a machined metal rim under a smoked-glass top, glass
   jewel buttons lit from inside (sapphire A, emerald B, ruby START, topaz C), an aluminium-ringed stick with a rubber
   top, brushed-metal shoulders ---------- */
body.sys-n64.mobile .mpad { background: radial-gradient(ellipse 90% 60% at 50% 30%, #1c2050 0, #0d0f26 55%, #06070f); }
.sys-n64 .mp-key {
  border-radius: 12px; color: #e8ecff; border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), linear-gradient(180deg, #2a2c3a, #15161f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.55);
}
.sys-n64 .mp-key:active { background: linear-gradient(180deg, #4c6cf6, #2442d4); }
/* (headroom over the shell, so the metal shoulders behind it aren't cut off by the pad's top edge) */
.mp-body.n64 { margin-top: calc(var(--k) * 4); --r: calc(var(--k) * 10); background: none; box-shadow: none; border-radius: var(--r); }
/* (the rim, then the shell inside it: both behind the controls) */
.mp-body.n64::before, .mp-body.n64::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: var(--r); }
.mp-body.n64::before {
  inset: calc(var(--k) * -.7);
  background: linear-gradient(180deg, #e9ecf4 0%, #8d909c 18%, #4c4e58 50%, #a3a6b2 82%, #3a3c45 100%);
  /* (its shadow is a box-shadow: a filter on the whole pad repainted it on every press and every nudge of the stick) */
  box-shadow: 0 calc(var(--k) * 2) calc(var(--k) * 2.6) rgba(0,0,0,.75);
}
.mp-body.n64::after {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 108%, rgba(90,120,255,.16), rgba(90,120,255,0) 70%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.035) 0 .6px, transparent 1px) 0 0 / 3px 3px,
    linear-gradient(180deg, #2a2b35 0%, #1a1b23 48%, #111218 100%);
  box-shadow: inset 0 calc(var(--k) * .5) calc(var(--k) * .6) rgba(255,255,255,.08), inset 0 calc(var(--k) * -1.4) calc(var(--k) * 2.4) rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.8);
}
/* the smoked-glass top: one long glare across it, and a hairline highlight round its edge */
.mp-body.n64 .mp-sheen {
  display: block; inset: 3% 2.4% 34% 2.4%; height: auto; border-radius: calc(var(--k) * 8) calc(var(--k) * 8) calc(var(--k) * 3) calc(var(--k) * 3);
  background:
    linear-gradient(168deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 36%, rgba(255,255,255,0) 36.5%),
    linear-gradient(180deg, rgba(150,170,255,.07), rgba(150,170,255,0) 80%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.05);
}
.mp-body.n64 .mp-plate { top: calc(var(--ky) * 47.5); left: 50%; background: none; box-shadow: none; padding: 0; }
.mp-body.n64 .mp-brand { color: #d9dcea; font-size: calc(var(--k) * 2); letter-spacing: calc(var(--k) * .3); text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.1); }
.mp-body.n64 .mp-brand b { color: #ffc61e; margin: 0; text-shadow: 0 0 calc(var(--k) * 1.2) rgba(255,198,30,.55); }
.mp-body.n64 .mp-sub { color: #6c7088; font-size: calc(var(--k) * .9); }
.mp-body.n64 .mp-led { left: calc(var(--k) * -2.2); background: #0e2a16; }
.mp-body.n64.live .mp-led { background: #3fe06a; box-shadow: 0 0 calc(var(--k) * 1.4) #3fe06a, 0 0 calc(var(--k) * .4) #c8ffd8; }

/* the stick: a machined aluminium ring round a deep well, and a rubber-topped knob with grip rings */
.mp-dpad.mp-stick { background: none; box-shadow: none; perspective: none; }
.mp-dpad.mp-stick::after, .mp-dpad.mp-stick .mp-arrow { display: none; }
.mp-gate {
  position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, #050509 0 56%, #1d1e27 63%, rgba(0,0,0,0) 64%),
    conic-gradient(from 20deg, #f4f6fb, #7d808c, #dfe2ea, #565964, #f0f2f8, #82858f, #e4e7ee, #5d606a, #f4f6fb);
  box-shadow: 0 0 0 calc(var(--k) * .3) #08080c, 0 calc(var(--k) * .6) calc(var(--k) * 1.2) rgba(0,0,0,.7);
}
.mp-knob {
  position: absolute; left: 26%; top: 26%; width: 48%; height: 48%; border-radius: 50%; pointer-events: none; transition: transform .03s;
  background:
    radial-gradient(ellipse 60% 45% at 45% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
    repeating-radial-gradient(circle, #2c2d36 0 calc(var(--k) * .45), #1b1c23 calc(var(--k) * .45) calc(var(--k) * .9));
  box-shadow: 0 0 0 calc(var(--k) * .55) #9a9daa, 0 0 0 calc(var(--k) * .8) #2a2b33, 0 calc(var(--k) * 1.2) calc(var(--k) * 1.6) rgba(0,0,0,.8), inset 0 calc(var(--k) * -.5) calc(var(--k) * .8) rgba(0,0,0,.6);
}
.mp-body.n64.live .mp-knob { box-shadow: 0 0 0 calc(var(--k) * .55) #c8cbd8, 0 0 0 calc(var(--k) * .8) #2a2b33, 0 calc(var(--k) * 1.2) calc(var(--k) * 1.6) rgba(0,0,0,.8), 0 0 calc(var(--k) * 2.4) rgba(120,150,255,.35); }

/* the wells: each button sits in a polished metal collar */
.mp-body.n64 .mp-well {
  background:
    radial-gradient(circle, #05050a 0 60%, rgba(0,0,0,0) 61%),
    conic-gradient(from 30deg, #eef0f6, #6d707c, #cfd2dc, #4c4f59, #eef0f6, #73767f, #d9dce5, #50535d, #eef0f6);
  box-shadow: 0 0 0 1px #000, 0 calc(var(--k) * .3) calc(var(--k) * .6) rgba(0,0,0,.6);
}
/* the jewels: a highlight on top, light glowing up from inside at the bottom, deep colour in between */
.mp-body.n64 .mp-btn {
  --c1: #8a8da0; --c2: #4a4d5c; --c3: #1e2029; --glow: rgba(255,255,255,.5); --halo: rgba(255,255,255,.4);
  color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.55);
  background:
    radial-gradient(ellipse 62% 36% at 50% 20%, rgba(255,255,255,.85), rgba(255,255,255,.12) 60%, rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 70% 50% at 50% 105%, var(--glow), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 45%, var(--c1) 0%, var(--c2) 62%, var(--c3) 100%);
  box-shadow: inset 0 0 0 calc(var(--k) * .2) rgba(255,255,255,.22), inset 0 calc(var(--k) * -.6) calc(var(--k) * 1) rgba(0,0,0,.4), 0 calc(var(--k) * .7) calc(var(--k) * 1) rgba(0,0,0,.75);
  transition: transform .05s, filter .06s, box-shadow .06s;
}
.mp-body.n64 .mp-btn.b-A { --c1: #6f93ff; --c2: #2442d4; --c3: #0d1a6e; --glow: rgba(140,180,255,.9); --halo: rgba(70,110,255,.75); }
.mp-body.n64 .mp-btn.b-B { --c1: #5ff08c; --c2: #129a3a; --c3: #04491a; --glow: rgba(140,255,170,.85); --halo: rgba(40,220,100,.7); }
.mp-body.n64 .mp-btn.b-START { --c1: #ff7a80; --c2: #d81e28; --c3: #6a0810; --glow: rgba(255,150,150,.85); --halo: rgba(255,60,70,.7); font-size: 0; }
.mp-body.n64 .mp-btn.b-CU, .mp-body.n64 .mp-btn.b-CD, .mp-body.n64 .mp-btn.b-CL, .mp-body.n64 .mp-btn.b-CR {
  --c1: #ffe27a; --c2: #f0aa0a; --c3: #7a4a00; --glow: rgba(255,240,170,.9); --halo: rgba(255,200,40,.7);
  color: #5a3a00; text-shadow: 0 1px 0 rgba(255,240,190,.6); font-size: calc(var(--k) * 1.5);
}
.mp-body.n64 .mp-btn.on { transform: translateY(calc(var(--k) * .35)) scale(.95); filter: brightness(1.25) saturate(1.15);
  box-shadow: inset 0 0 0 calc(var(--k) * .2) rgba(255,255,255,.4), inset 0 calc(var(--k) * .4) calc(var(--k) * 1) rgba(0,0,0,.35), 0 0 0 calc(var(--k) * .3) var(--halo), 0 0 calc(var(--k) * 3) var(--halo); }
/* the D-pad: a satin cross in a polished metal collar, metal arrows on its arms; it rocks toward wherever it's pushed */
.mp-body.n64 .mp-dcross {
  background:
    radial-gradient(circle, #06060b 0 64%, rgba(0,0,0,0) 65%),
    conic-gradient(from 30deg, #eef0f6, #6d707c, #cfd2dc, #4c4f59, #eef0f6, #73767f, #d9dce5, #50535d, #eef0f6);
  box-shadow: 0 0 0 1px #000, 0 calc(var(--k) * .5) calc(var(--k) * 1) rgba(0,0,0,.7), inset 0 0 calc(var(--k) * 1.2) rgba(0,0,0,.9);
}
.mp-body.n64 .mp-dcross .mp-cross { inset: 7%; filter: drop-shadow(0 calc(var(--k) * .8) calc(var(--k) * .7) rgba(0,0,0,.9)); }
.mp-body.n64 .mp-dcross .mp-cross::before, .mp-body.n64 .mp-dcross .mp-cross::after {
  border-radius: calc(var(--k) * 1);
  background: radial-gradient(ellipse 80% 40% at 50% 15%, rgba(255,255,255,.2), rgba(255,255,255,0) 70%), linear-gradient(180deg, #555867 0%, #33353f 48%, #1d1e25 100%);
  box-shadow: inset 0 calc(var(--k) * .25) 0 rgba(255,255,255,.28), inset 0 calc(var(--k) * -.35) 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.5);
}
.mp-body.n64 .mp-dcross .mp-cross::before { left: 32%; right: 32%; }
.mp-body.n64 .mp-dcross .mp-cross::after { top: 32%; bottom: 32%; }
.mp-body.n64 .mp-dcross::after { width: 14%; height: 14%; background: radial-gradient(circle at 50% 65%, #3a3c48, #15161c); }
.mp-body.n64 .mp-dcross .mp-arrow { z-index: 2; opacity: .85; }
.mp-body.n64 .mp-dcross .mp-arrow.up { border-bottom-color: #d9dce8; }
.mp-body.n64 .mp-dcross .mp-arrow.down { border-top-color: #d9dce8; }
.mp-body.n64 .mp-dcross .mp-arrow.left { border-right-color: #d9dce8; }
.mp-body.n64 .mp-dcross .mp-arrow.right { border-left-color: #d9dce8; }
.mp-body.n64 .mp-dcross.up .mp-arrow.up, .mp-body.n64 .mp-dcross.down .mp-arrow.down, .mp-body.n64 .mp-dcross.left .mp-arrow.left, .mp-body.n64 .mp-dcross.right .mp-arrow.right {
  filter: drop-shadow(0 0 calc(var(--k) * .8) rgba(150,170,255,.95)); }
/* Z: a brushed-metal key */
.mp-body.n64 .mp-btn.pill, .mp-body.n64 .mp-well.pill { transform: none; border-radius: 999px; }
.mp-body.n64 .mp-btn.pill {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,0) 1px 3px), linear-gradient(180deg, #e3e6ee 0%, #9a9daa 48%, #7a7d89 52%, #b6b9c5 100%);
  box-shadow: inset 0 1px 0 #fff, 0 calc(var(--k) * .6) calc(var(--k) * .9) rgba(0,0,0,.7);
}
.mp-body.n64 .mp-btn.pill.on { transform: translateY(calc(var(--k) * .3)) scale(.95); filter: brightness(1.1); box-shadow: 0 0 0 calc(var(--k) * .3) rgba(150,170,255,.7), 0 0 calc(var(--k) * 2.4) rgba(120,150,255,.6); }
.mp-body.n64 .mp-label { color: #8d92aa; text-shadow: 0 1px 0 #000; z-index: 2; letter-spacing: calc(var(--k) * .2); }
/* L and R: brushed-aluminium bars along the top edge */
.mp-body.n64 .mp-btn.shoulder {
  top: calc(var(--k) * -3.4) !important; height: calc(var(--k) * 5.4) !important; width: 26% !important; clip-path: none; border: 0;
  border-radius: calc(var(--k) * 3) calc(var(--k) * 3) calc(var(--k) * .8) calc(var(--k) * .8); z-index: -2; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,0) 1px 3px), linear-gradient(180deg, #f2f4f9 0%, #a6a9b6 45%, #7c7f8b 55%, #9c9fab 100%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 calc(var(--k) * .5) calc(var(--k) * .8) rgba(0,0,0,.6); filter: none;
}
.mp-body.n64 .mp-btn.shoulder.b-L { left: calc(var(--k) * 6) !important; }
.mp-body.n64 .mp-btn.shoulder.b-R { left: auto !important; right: calc(var(--k) * 6); }
.mp-body.n64 .mp-shoulder-cap { position: absolute; top: 0; left: 0 !important; right: 0 !important; text-align: center; font-size: calc(var(--k) * 1.6); line-height: calc(var(--k) * 2.8); color: #3a3c48; text-shadow: 0 1px 0 rgba(255,255,255,.7); pointer-events: none; }
.mp-body.n64 .mp-btn.shoulder.on { transform: translateY(calc(var(--k) * .4)); filter: brightness(1.15); box-shadow: inset 0 1px 0 #fff, 0 0 calc(var(--k) * 2.4) rgba(120,150,255,.7); }
.sys-n64 .mp-hint { color: #ffd768; z-index: 3; text-shadow: 0 0 calc(var(--k) * 1) rgba(255,198,30,.5), 0 1px 0 #000; }