/* Dartellaview — the American Super Nintendo getup over the DART Channel's set: two-tone grey plastic, purple
   switches, lavender buttons, the swirl. (Only loaded on /Dartellaview/; everything here is scoped to .sys-snes.) */

/* ---------- the porch: a purple night, a Mode 7 floor rushing in, the console window ---------- */
.sys-snes { background: #1a1338; color: #2a2148; }
.sys-snes .aero-sky {
  background:
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(255,170,230,.35), rgba(255,170,230,0) 70%),
    linear-gradient(180deg, #07051a 0%, #1d1546 38%, #5b2f86 64%, #d0569e 74%, #2a1f5c 74.2%, #1b1540 100%);
}
.sys-snes .aero-sun, .sys-snes .aero-cloud, .sys-snes .aero-hills { display: none; }
.sys-snes .aero-scene::after {
  /* the floor: a checkerboard tipped away from you, scrolling toward you forever */
  content: ""; position: absolute; left: -50%; right: -50%; top: 74%; bottom: -10%;
  background:
    linear-gradient(180deg, rgba(208,86,158,.9), rgba(27,21,64,0) 22%),
    repeating-conic-gradient(#3a2f74 0 25%, #2a2252 0 50%) 0 0 / 90px 90px;
  transform: perspective(240px) rotateX(62deg); transform-origin: 50% 0;
  animation: snesFloor 1.6s linear infinite;
}
@keyframes snesFloor { to { background-position: 0 0, 0 90px; } }
.sys-snes .aero-bubble {
  /* stars, not bubbles */
  width: 3px !important; height: 3px !important; border-radius: 0; background: #e9e2ff; box-shadow: 0 0 6px #b9a6ff;
  animation-name: twinkleUp;
}
@keyframes twinkleUp { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-80vh); opacity: 0; } }

.sys-snes .window {
  background: linear-gradient(180deg, #e2dfe9, #cbc7d6 55%, #b9b5c6);
  border: 1px solid #f4f2f8;
  box-shadow: 0 0 0 3px #5a4f86, 0 18px 60px rgba(10,5,40,.7), inset 0 1px 0 #fff;
}
.sys-snes .titlebar { background: linear-gradient(180deg, #6e58c8, #4b3a9c); color: #f0ebff; border-bottom: 3px solid; border-image: linear-gradient(90deg, #e8322e 0 20%, #f59a23 0 40%, #f6d33c 0 60%, #3fae49 0 80%, #2f7fd8 0) 1; }
.sys-snes .titlebar .name { color: #f0ebff; text-shadow: 0 1px 0 #2a1f5c; }
.sys-snes .body { color: #2a2148; }
.sys-snes h1 { color: #4b33a8; text-shadow: 0 2px 0 #fff; }
.sys-snes .gel { background: linear-gradient(180deg, #a58cff, #6b4fd8 55%, #4b33a8); border-color: #3a2a8a; color: #fff; }
.sys-snes .gate-msg.good { color: #2f8a3a; }

/* the wordmark: the fox, DARTELLAVIEW in chunky letters, and the swirl colours underneath */
.snes-mark { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 14px; position: relative; padding-bottom: 12px; }
.snes-mark img { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(40,20,80,.35)); }
.snes-mark b {
  font: 400 26px "Rubik Mono One", "Arial Black", sans-serif; letter-spacing: 1px; font-style: italic;
  color: #4b33a8; text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(40,20,80,.25);
}
.snes-mark b span { color: #8a6cff; }
.snes-mark i {
  position: absolute; left: 50%; bottom: 0; width: 220px; height: 6px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(90deg, #e8322e 0 20%, #f59a23 0 40%, #f6d33c 0 60%, #3fae49 0 80%, #2f7fd8 0);
}

/* the start button: a big grey-and-purple console button */
.sys-snes .bap {
  background: linear-gradient(180deg, #ebe8f1, #c9c5d5 60%, #aaa6b9); border: 0; border-radius: 26px;
  box-shadow: 0 0 0 4px #5a4f86, 0 0 0 8px rgba(138,108,255,.35), 0 20px 50px rgba(10,5,40,.75), inset 0 2px 0 #fff, inset 0 -6px 0 rgba(60,50,100,.25);
  padding: 18px 26px 16px;
}
.sys-snes .bap { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1.15; border-radius: 34px; padding-bottom: 9%; }
.sys-snes .bap::after { display: none; }
.sys-snes .bap { animation: none; } /* (the bubble's wobble would round it off) */
.sys-snes .bap:focus-visible { outline: 3px solid #b9a6ff; outline-offset: 10px; }
.sys-snes .bap::before {
  /* the console's grip ridges across the top */
  content: ""; position: absolute; left: 14%; right: 14%; top: 7%; height: 7%; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(90,80,120,.35) 0 2px, rgba(255,255,255,.6) 2px 4px, transparent 4px 7px);
}
.sys-snes .bap .bap-fox { width: 34%; margin: 0 0 2%; filter: drop-shadow(0 8px 10px rgba(40,20,90,.35)); animation: bapHop 1.6s ease-in-out infinite; }
.sys-snes .bap .bap-logo { width: 84%; margin: 0 0 6%; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(40,20,90,.25)); }
@keyframes bapHop { 50% { transform: translateY(-8%); } }
.sys-snes .bap .label { color: #fff; background: linear-gradient(180deg, #8a6cff, #4b33a8); border-radius: 999px; padding: 8px 18px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 #2a1f5c; }
.sys-snes .bap-hint { color: #d9ceff; }

/* ---------- the room: a 90s bedroom at night, lit purple ---------- */
.sys-snes .room { --glow: 138, 108, 255; background: #07051a; }
.sys-snes .room::before {
  background:
    repeating-linear-gradient(90deg, rgba(185,166,255,.025) 0 2px, rgba(0,0,0,0) 2px 46px),
    radial-gradient(ellipse 120% 80% at 50% 30%, #241a48 0%, #120d2a 55%, #06040f 100%);
}
.sys-snes .room::after {
  /* the carpet: that unmistakable 90s triangle-and-squiggle pattern, dimly */
  background:
    linear-gradient(180deg, rgba(10,6,30,0) 0, rgba(10,6,30,.65) 100%),
    radial-gradient(circle at 20% 30%, rgba(95,212,255,.18) 0 3px, transparent 4px) 0 0 / 60px 40px,
    radial-gradient(circle at 70% 70%, rgba(246,211,60,.15) 0 3px, transparent 4px) 0 0 / 50px 46px,
    linear-gradient(180deg, #2a1f50 0, #1a1338 40%, #0b0820);
  box-shadow: 0 -1px 0 rgba(185,166,255,.15);
}

/* ---------- the set: SNES two-tone grey, with the purple of the power/reset switches ---------- */
.sys-snes .tv-cabinet {
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #d9d6e0 0%, #c8c4d1 10%, #b9b5c4 62%, #a19dae 100%);
  box-shadow:
    inset 0 calc(var(--u) * .25) 0 rgba(255,255,255,.7),
    inset 0 calc(var(--u) * -.4) calc(var(--u) * .6) rgba(60,52,90,.45),
    inset calc(var(--u) * .3) 0 calc(var(--u) * .5) rgba(255,255,255,.25),
    inset calc(var(--u) * -.3) 0 calc(var(--u) * .5) rgba(60,52,90,.3),
    0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0,0,0,.8),
    0 0 calc(var(--u) * 12) rgba(var(--glow), calc(var(--glowA) * .3));
}
.sys-snes .tv-cabinet::after {
  /* the swirl stripe across the top of the cabinet */
  content: ""; position: absolute; left: calc(var(--u) * 30); right: calc(var(--u) * 30); top: calc(var(--u) * 1.3); height: calc(var(--u) * .5); border-radius: 99px;
  background: linear-gradient(90deg, #e8322e 0 20%, #f59a23 0 40%, #f6d33c 0 60%, #3fae49 0 80%, #2f7fd8 0); opacity: .85;
}
.sys-snes .tv-bezel { background: linear-gradient(180deg, #6c677c, #8a8598 40%, #9a95a8); box-shadow: inset 0 calc(var(--u) * .5) calc(var(--u) * 1) rgba(20,14,40,.8), inset 0 calc(var(--u) * -.2) 0 rgba(255,255,255,.3), 0 calc(var(--u) * .2) 0 rgba(255,255,255,.45), 0 calc(var(--u) * -.15) 0 rgba(60,52,90,.4); }
.sys-snes .tv-tube { box-shadow: 0 0 0 calc(var(--u) * .35) #1a1530, 0 0 0 calc(var(--u) * .6) #4b4560; }
.sys-snes .tv-brand span { color: #4a4460; text-shadow: 0 calc(var(--u) * .08) 0 rgba(255,255,255,.6); font-style: italic; }
.sys-snes .tv-brand b { color: #6b4fd8; }
.sys-snes .tv-grille {
  /* the SNES' vent ridges */
  background: repeating-linear-gradient(90deg, #8d889c 0 calc(var(--u) * .45), #c9c5d4 calc(var(--u) * .45) calc(var(--u) * .9));
  box-shadow: inset 0 calc(var(--u) * .2) calc(var(--u) * .4) rgba(40,30,70,.5), 0 calc(var(--u) * .1) 0 rgba(255,255,255,.5);
}
.sys-snes .tv-btn i {
  /* the purple switches, sliding in their dark slots */
  background: linear-gradient(180deg, #8f7ed8, #6a58b8 55%, #574598);
  box-shadow: inset 0 calc(var(--u) * .1) 0 rgba(255,255,255,.4), 0 calc(var(--u) * .25) calc(var(--u) * .3) rgba(30,20,60,.55), 0 0 0 calc(var(--u) * .12) #3a3352;
}
.sys-snes .tv-btn.power i { background: linear-gradient(180deg, #6b5aa8, #4b3a8c 55%, #3a2c70); }
.sys-snes .tv-btn.net i { background: radial-gradient(circle at 40% 35%, #c9f2ff, #5fb8e8 55%, #2f7fb0); }
.sys-snes .tv-btn span { color: #5a5470; }
.sys-snes .tv-led { background: radial-gradient(circle at 35% 30%, #ffd0d0, #e8322e 50%, #8a1313); box-shadow: 0 0 calc(var(--u) * .9) #ff4d4d; }
.sys-snes .room.off .tv-led { background: radial-gradient(circle at 35% 30%, #8a7a90, #3a3048 60%); box-shadow: none; }
.sys-snes .tv-feet i { background: linear-gradient(180deg, #8d889c, #5a5570); }
.sys-snes .fs-chip { background: #4b33a8; border-color: #8a6cff; }

/* ---------- phones: the SNES pad ---------- */
body.sys-snes.mobile .mpad {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--glow), calc(var(--glowA) * .45)), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #1d1640 0, #120d2a 24px, #0a0820 55%, #05040e);
}
.sys-snes .mp-key { background: linear-gradient(180deg, #d4d0dd 0%, #b9b5c6 50%, #a29eb2 100%); color: #3a2a6a; border-color: #4a4560; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.55); }
.sys-snes .mp-key:active { background: #8f8ba0; color: #fff; }
.sys-snes .mp-key.talk { color: #5b3fb0; }
.mp-body.snes {
  /* the dog bone: light grey, a soft sheen */
  border-radius: 25% / 50%;
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #dcd9e3 0%, #cac6d4 45%, #b4b0c2 80%, #9f9bb0 100%);
  box-shadow:
    inset 0 calc(var(--k) * .35) 0 rgba(255,255,255,.7),
    inset 0 calc(var(--k) * -.8) calc(var(--k) * 1.6) rgba(60,52,90,.4),
    0 calc(var(--k) * 1.6) calc(var(--k) * 4) rgba(0,0,0,.75),
    0 0 calc(var(--k) * 6) rgba(var(--glow), .1);
}
.mp-body.snes .mp-sheen { display: none; }
.mp-body.snes .mp-plate { top: calc(var(--ky) * 9); background: none; box-shadow: none; padding: 0; }
.mp-body.snes .mp-brand { color: #6b6582; text-shadow: 0 1px 0 rgba(255,255,255,.6); font-style: italic; }
.mp-body.snes .mp-brand b { color: #6b4fd8; text-shadow: none; }
.mp-body.snes .mp-sub { color: #8d889c; }
.mp-body.snes .mp-led { left: calc(var(--k) * -2); background: #5a1c2a; }
.mp-body.snes.live .mp-led { background: #ff4d4d; box-shadow: 0 0 calc(var(--k) * 1.2) #ff4d4d; }
.mp-body.snes .mp-dpad { background: radial-gradient(circle at 50% 40%, #a9a4b8 0%, #b8b3c6 70%, #c4c0d0 100%); box-shadow: inset 0 calc(var(--k) * .6) calc(var(--k) * 1) rgba(60,52,90,.5), 0 calc(var(--k) * .3) 0 rgba(255,255,255,.5); }
.mp-body.snes .mp-cross::before, .mp-body.snes .mp-cross::after { background: linear-gradient(180deg, #3e3b48 0%, #2a2832 50%, #1e1c25 100%); }
.mp-body.snes .mp-dpad::after { background: radial-gradient(circle at 50% 65%, #3e3b48, #1e1c25); }
.mp-body.snes .mp-dpad.up .mp-arrow.up, .mp-body.snes .mp-dpad.down .mp-arrow.down, .mp-body.snes .mp-dpad.left .mp-arrow.left, .mp-body.snes .mp-dpad.right .mp-arrow.right { filter: drop-shadow(0 0 calc(var(--k) * .6) #8a6cff) brightness(1.6); }
.mp-body.snes .mp-well { background: radial-gradient(circle at 50% 35%, #7d75a6, #9d95c0 70%, #aaa3c9); box-shadow: inset 0 calc(var(--k) * .4) calc(var(--k) * .7) rgba(40,30,80,.6), 0 calc(var(--k) * .25) 0 rgba(255,255,255,.4); }
.mp-body.snes .mp-btn { color: #f1ecff; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
/* A and B: deep purple and dished; X and Y: lavender and domed */
.mp-body.snes .mp-btn.b-A, .mp-body.snes .mp-btn.b-B {
  background: radial-gradient(ellipse 55% 38% at 42% 24%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%), radial-gradient(circle at 50% 60%, #5b3fb0 0%, #4a3198 60%, #36237a 100%);
}
.mp-body.snes .mp-btn.b-X, .mp-body.snes .mp-btn.b-Y {
  color: #3a2a6a; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background: radial-gradient(ellipse 55% 38% at 42% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), radial-gradient(circle at 50% 55%, #cfc6f6 0%, #b3a7ea 60%, #9183d0 100%);
}
.mp-body.snes .mp-btn.on {
  color: #ffe9a0;
  box-shadow: inset 0 calc(var(--k) * .4) calc(var(--k) * .9) rgba(0,0,0,.6), 0 0 0 calc(var(--k) * .25) rgba(255,216,74,.7), 0 0 calc(var(--k) * 2.4) rgba(255,216,74,.5);
}
/* SELECT and START: slanted dark-grey pills */
.mp-body.snes .mp-btn.pill, .mp-body.snes .mp-well.pill { transform: rotate(-32deg); }
.mp-body.snes .mp-btn.pill { background: linear-gradient(180deg, #7a758c, #5d5870 60%, #4a4560); }
.mp-body.snes .mp-btn.pill.on { transform: rotate(-32deg) translateY(calc(var(--k) * .3)) scale(.94); background: #3a3550; box-shadow: 0 0 0 calc(var(--k) * .2) rgba(255,216,74,.6), 0 0 calc(var(--k) * 1.8) rgba(255,216,74,.4); }
.mp-body.snes .mp-label { color: #5a5570; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
/* L and R: bumpers wrapped round the shell's top corners. Each is the top edge of a box the size of the pad's
   rounded end, drawn as a thick border on a quarter-ellipse, so it hugs the shell's curve and tapers away down the side */
.mp-btn.shoulder {
  background: none !important; border-radius: 0; overflow: visible; box-shadow: none; transition: filter .05s;
  border-top: calc(var(--k) * 4.4) solid #8f8a9f; border-top-color: #918ca1; filter: drop-shadow(0 calc(var(--k) * .35) calc(var(--k) * .3) rgba(40,30,70,.45));
}
/* (the shell's ends are rounded 25% across and 50% down: each bumper is exactly that corner, nudged up and out so it
   rides the rim, and cut off part-way down the curve the way a real SNES shoulder stops above the grip) */
.mp-body.snes .mp-btn.shoulder { top: calc(var(--k) * -1.3) !important; width: 25% !important; height: 50% !important; clip-path: inset(calc(var(--k) * -3) 0 52% 0); }
.mp-body.snes .mp-btn.shoulder.b-L { left: calc(var(--k) * -.5) !important; border-radius: 100% calc(var(--k) * 2) 0 0 / 100% calc(var(--k) * 2) 0 0; }
.mp-body.snes .mp-btn.shoulder.b-R { left: auto !important; right: calc(var(--k) * -.5); border-radius: calc(var(--k) * 2) 100% 0 0 / calc(var(--k) * 2) 100% 0 0; }
.mp-shoulder-cap {
  position: absolute; top: calc(var(--k) * -4.2); font-size: calc(var(--k) * 2); line-height: calc(var(--k) * 4);
  color: #3a3550; text-shadow: 0 1px 0 rgba(255,255,255,.5); pointer-events: none;
}
.b-L .mp-shoulder-cap { left: 70%; }
.b-R .mp-shoulder-cap { right: 70%; }
.mp-btn.shoulder.on { transform: translateY(calc(var(--k) * .35)); border-top-color: #ffd84a; filter: drop-shadow(0 0 calc(var(--k) * 1.2) rgba(255,216,74,.6)); }
.mp-btn.shoulder.on .mp-shoulder-cap { color: #3a2a6a; }
.sys-snes .mp-hint { color: #ffd84a; }

/* the intro and the bits round the edges */
.sys-snes .fps-note { border-color: #8a6cff; }
.sys-snes .rotate-note { background: #1a1338; }
.sys-snes .install-chip { background: linear-gradient(180deg, rgba(150,124,255,.96), rgba(75,51,168,.96)); border-color: #d9ceff; }