/* ===== COLORS AND FONT (change them here) ===== */
:root {
  --page: #E6E8EB;       /* page background */
  --line: #C9CDD3;       /* dividers */
  --ink: #1F2733;        /* text */
  --ink-soft: #566070;   /* secondary text */
  --shell: #B92D3E;       /* the metallic red 3DS plastic */
  --shell-light: #CC3A4C; /* light catching the top of the plastic */
  --shell-dark: #8F1F2D;  /* edges, grooves and shadows */
  --label: #F2B8C0;       /* printed text on the shell (START, VOL.) */
  --bezel: #1B1D21;       /* black border around the screens */
  --screen: #F7FAFC;     /* inside the screens */
  --red: #C8283C;        /* buttons and links */
  --led: #2F8FFF;        /* power light and keyboard focus */
  --mat: #B9DFEF;        /* light blue silicone repair mat */
  --banner-band: #D9DCE1; /* grey band behind the banner card */
  --font: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--led); outline-offset: 3px; }

/* ===== THE 3DS (a New 3DS XL) =====
   Sizes inside the console use "cqw": 1cqw = 1% of the console's width.
   That way the whole 3DS scales up and down like one picture.
   Every number was measured from a front photo of a real New 3DS XL
   (the console in the photo is 1577 pixels wide = 100cqw). */
.stage {
  padding: 0;
}

/* ===== BACKGROUND BEHIND THE 3DS: a repair mat =====
   Light blue silicone mat with a faint grid, like the one in the videos.
   Small lines every 24px, stronger lines every 120px. */
.workbench {
  padding: 40px 0 56px;
  background-color: #fff;
}

/* The drawn repair mat. To use it, add class="workbench drawn-mat" in index.html */
.workbench.drawn-mat {
  background-color: var(--mat);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* When there's a photo of the repair station (bench.jpg), it replaces the drawn mat.
   The photo sits in its own layer (::before) so only the photo gets blurred,
   not the 3DS. A soft light layer on top (::after) keeps it calm. */
.workbench { position: relative; overflow: hidden; }
.workbench > .hero { position: relative; z-index: 1; }

.workbench.has-photo::before,
.workbench.has-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
}
.workbench.has-photo::before {
  inset: -30px; /* a bit bigger than the area, so the blurred edges don't show */
  background: var(--bench-photo) center / cover; /* set by script.js from BACKGROUND_PHOTO */
  filter: url(#cool-white) blur(var(--bench-blur)) brightness(var(--bench-brightness)) saturate(var(--bench-color)) contrast(0.95);
}
.workbench.has-photo::after {
  inset: 0;
  background: rgba(255, 255, 255, var(--bench-fade));
}

/* The YouTube video behind the 3DS (added by script.js) */
.bench-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* clicks go to the page, not the video */
}
.bench-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  filter: blur(var(--video-bg-blur));
}
/* Your own clip (background.mp4), blurred and brightened like the photo */
.bench-video video {
  position: absolute;
  inset: -20px; /* a bit bigger than the area, so the blurred edges don't show */
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(var(--bench-blur)) brightness(var(--bench-brightness));
}
.bench-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--video-bg-fade));
}
.workbench {
  --video-bg-blur: 2px;    /* higher = softer */
  --video-bg-fade: 0.15;   /* 0 to 1: higher = lighter and calmer */
}

/* Change these numbers to adjust the photo:
   blur: higher = calmer
   brightness: 1 = normal, higher = brighter
   fade (0 to 1): higher = lighter and cleaner
   color: 1 = normal, lower = calmer colors
   (the yellow tint is fixed by the "cool-white" filter at the top of index.html) */
.workbench {
  --bench-blur: 6px;
  --bench-brightness: 1.08;
  --bench-fade: 0.2;
  --bench-color: 0.92;
}

/* The channel banner runs edge to edge (YouTube banners are 2560 x 423) */
.banner {
  background: var(--banner-band);
  padding: 20px 24px;
}
.banner-card {
  width: min(100%, 1500px);
  margin: 0 auto;
  aspect-ratio: 2560 / 423;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(31, 39, 51, 0.12);
}
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner img + .banner-hint { display: none; }
.banner-hint { color: var(--ink-soft); font-size: 15px; }

/* ===== BANNER SOCIAL LINKS =====
   Invisible links placed exactly over each icon + username in banner.jpg.
   Positions are percentages of the banner, measured from the image (2000 x 331).
   Each covers the bubble icon and the handle next to it. */
.banner-card { position: relative; }
.banner-link {
  position: absolute;
  top: 65%;
  height: 26%;
  border-radius: 12px;
}
.banner-link:hover,
.banner-link:focus-visible {
  background: rgba(31, 39, 51, 0.08);
  box-shadow: inset 0 0 0 2px rgba(31, 39, 51, 0.2);
  outline: none;
}
.link-youtube   { left: 20.25%; width: 18.75%; }
.link-instagram { left: 39.25%; width: 19.5%; }
.link-tiktok    { left: 59.15%; width: 20.6%; }
/* Without the banner image, there's nothing to click */
.banner-hint ~ .banner-link { display: none; }
.banner img ~ .banner-link { display: block; }

/* The 3DS takes the left side, the newest video the right side */
.hero {
  width: min(92%, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 40fr);
  gap: 4%;
  align-items: start;
}

.console {
  container-type: inline-size;
}

.lid, .base {
  position: relative;
  background: linear-gradient(180deg, var(--shell-light), var(--shell));
  box-shadow: inset 0 0 0 0.25cqw var(--shell-dark);
}

/* ----- Top half (50cqw tall) ----- */
.lid {
  border-radius: 10.8cqw 10.8cqw 0.6cqw 0.6cqw;
  padding: 6.15cqw 14.5cqw 0 14.6cqw;
}

/* The recessed frame around the top screen, running down to the hinge */
.surround {
  padding: 1.7cqw 1.6cqw 1.5cqw;
  border-radius: 1.4cqw 1.4cqw 0 0;
  background: var(--shell);
  box-shadow: inset 0 0 0 0.25cqw var(--shell-dark);
}

.screen {
  background: var(--screen);
  border: 0.4cqw solid var(--bezel);
  border-radius: 0.2cqw;
  overflow: hidden;
}

.camera {
  position: absolute;
  top: 1.1cqw;
  left: 48.25cqw;
  width: 3.5cqw;
  height: 3.5cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #3A3F46 25%, var(--bezel) 30%);
}
.camera::after {
  content: "";
  position: absolute;
  left: 4.6cqw;
  top: 1.15cqw;
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: var(--bezel);
}

.pad {
  position: absolute;
  top: 1.6cqw;
  width: 2.5cqw;
  height: 2.5cqw;
  border-radius: 50%;
  background: var(--shell);
  box-shadow: 0 0 0 0.2cqw var(--shell-dark);
}
.pad-left  { left: 24.85cqw; }
.pad-right { right: 25.05cqw; }

/* Small square pads in the four corners around the screen */
.corner {
  position: absolute;
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 0.4cqw;
  box-shadow: inset 0 0 0 0.2cqw var(--shell-dark);
}
.corner-tl { left: 6.45cqw;  top: 5.7cqw; }
.corner-tr { right: 6.45cqw; top: 5.7cqw; }
.corner-bl { left: 6.45cqw;  top: 47cqw; }
.corner-br { right: 6.45cqw; top: 47cqw; }

/* Speakers: five holes in a plus shape */
.speaker {
  position: absolute;
  top: 20cqw;
  width: 8.2cqw;
  height: 8.2cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.speaker-left  { left: 3.2cqw; }
.speaker-right { right: 3.2cqw; }
.speaker i {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  background: #4A0D15;
  place-self: center;
}
.speaker i:nth-child(1) { grid-area: 1 / 2; }
.speaker i:nth-child(2) { grid-area: 2 / 1; }
.speaker i:nth-child(3) { grid-area: 2 / 2; }
.speaker i:nth-child(4) { grid-area: 2 / 3; }
.speaker i:nth-child(5) { grid-area: 3 / 2; }

/* VOL. and 3D sliders on the edges */
.side-label {
  position: absolute;
  top: 33.7cqw;
  height: 9.3cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1.5cqw;
  color: var(--label);
}
.side-label b { font-weight: 500; }
.side-label small { font-size: 1.3cqw; }
.side-left  { left: 0; padding-left: 3.2cqw; border-left: 0.6cqw solid var(--bezel); }
.side-right { right: 0; padding-right: 3.2cqw; border-right: 0.6cqw solid var(--bezel); text-align: right; }

/* Slider knobs: grey grips sticking out of the slot on each edge of the lid */
.slider-knob {
  position: absolute;
  width: 1.3cqw;
  height: 3.2cqw;
  border-radius: 0.45cqw;
  background: linear-gradient(90deg, #8E949B, #D3D7DC 45%, #A9AEB5);
  box-shadow: 0 0.15cqw 0.3cqw rgba(0, 0, 0, 0.35);
}
.side-left .slider-knob  { left: -1cqw; top: 0.6cqw; }   /* volume up near the top */
.side-right .slider-knob { right: -1cqw; top: 4.6cqw; }  /* 3D near "OFF" */

/* The tapered wedge printed next to each slider: wide at the top, a point at "OFF" */
.wedge {
  position: absolute;
  top: 0.4cqw;
  bottom: 0.4cqw;
  width: 1.1cqw;
  background: var(--shell-dark);
}
.side-left .wedge  { left: 1.2cqw; clip-path: polygon(0 0, 100% 0, 0 100%); }
.side-right .wedge { right: 1.2cqw; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ----- Hinge (6.7cqw tall) ----- */
.hinge {
  position: relative;
  height: 6.7cqw;
  border-radius: 1.5cqw 1.5cqw 0 0;
  background: linear-gradient(180deg, var(--shell-light) 0%, var(--shell) 55%, var(--shell-dark) 100%);
}
/* The two lines where the hinge splits into three parts */
.hinge::before, .hinge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.3cqw;
  background: var(--shell-dark);
}
.hinge::before { left: 9.8%; }
.hinge::after  { right: 9.8%; }

.hinge-led {
  position: absolute;
  left: 94.4cqw;
  top: 3cqw;
  width: 1cqw;
  height: 1cqw;
  border-radius: 0.2cqw;
  background: #3A3F46;
}

/* ----- Bottom half (52cqw tall) ----- */
.base {
  border-radius: 0.6cqw 0.6cqw 10cqw 10cqw;
  padding: 0.6cqw 20.5cqw 1.4cqw 20.2cqw;
}

/* The raised plate around the touch screen */
.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.3cqw;
  padding: 2.7cqw 2.6cqw 1.2cqw 2.5cqw;
  border-radius: 0 0 2.5cqw 2.5cqw;
  background: linear-gradient(180deg, var(--shell-light), var(--shell));
  box-shadow: 0 0 0 0.25cqw var(--shell-dark);
}
.plate .bottom-screen { width: 100%; }

.home-button {
  width: 6.3cqw;
  height: 3.2cqw;
  border-radius: 1.6cqw;
  background: var(--shell);
  box-shadow: 0 0 0 0.3cqw var(--shell-dark);
}

/* Circle pad: grey disc in a dark ring */
.circle-pad {
  position: absolute;
  left: 3.5cqw;
  top: 4.5cqw;
  width: 13.6cqw;
  height: 13.6cqw;
  border-radius: 50%;
  background: var(--shell);
  box-shadow: inset 0 0 0 0.3cqw var(--shell-dark), inset 0 0.8cqw 1.2cqw var(--shell-dark);
}
.circle-pad::after {
  content: "";
  position: absolute;
  inset: 2.2cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #B4B8C0, #868B94);
}

/* D-pad: two bars crossing, with the small grooves on each arm */
.dpad {
  position: absolute;
  left: 4.55cqw;
  top: 21.25cqw;
  width: 11.7cqw;
  height: 11.7cqw;
}
.dpad::before, .dpad::after {
  content: "";
  position: absolute;
  background: var(--shell-dark);
  border-radius: 0.5cqw;
}
.dpad::before { left: 3.9cqw; width: 3.9cqw; height: 100%; }
.dpad::after  { top: 3.9cqw; height: 3.9cqw; width: 100%; }
.dpad i {
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0.1cqw;
}
.dpad i:nth-child(1) { left: 5.7cqw; top: 1cqw; width: 0.25cqw; height: 9.7cqw; }
.dpad i:nth-child(2) { top: 5.7cqw; left: 1cqw; height: 0.25cqw; width: 9.7cqw; }
/* Hide the middle of the groove lines so only the arm grooves show */
.dpad i::after {
  content: "";
  position: absolute;
  background: var(--shell-dark);
}
.dpad i:nth-child(1)::after { left: 0; right: 0; top: 2.4cqw; bottom: 2.4cqw; }
.dpad i:nth-child(2)::after { top: 0; bottom: 0; left: 2.4cqw; right: 2.4cqw; }

/* C-stick: the small grey nub */
.c-stick {
  position: absolute;
  left: 81.95cqw;
  top: 3.55cqw;
  width: 4.1cqw;
  height: 4.1cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #B4B8C0, #868B94);
  box-shadow: 0 0 0 0.35cqw var(--shell-dark);
}

/* A B X Y in a diamond, with colored letters like the real one */
.abxy {
  position: absolute;
  left: 81.4cqw;
  top: 8.6cqw;
  display: grid;
  grid-template-columns: repeat(3, 5.33cqw);
  grid-template-rows: repeat(3, 5.33cqw);
}
.abxy i, .abxy button {
  width: 5.1cqw;
  height: 5.1cqw;
  place-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--shell), var(--shell-dark));
  box-shadow: 0 0 0 0.2cqw var(--shell-dark);
  font-style: normal;
  font-size: 2.4cqw;
}
.abxy .x { grid-area: 1 / 2; color: #6E95EC; }
.abxy .y { grid-area: 2 / 1; color: #4FC07A; }
.abxy .a { grid-area: 2 / 3; color: #FF8A8A; }
.abxy .b { grid-area: 3 / 2; color: #E8C24A; }

.start-select {
  position: absolute;
  left: 82.2cqw;
  top: 31.4cqw;
  display: flex;
  flex-direction: column;
  gap: 3.1cqw;
  font-size: 1.7cqw;
  color: var(--label);
}
.start-select span { display: flex; align-items: center; gap: 0.6cqw; }
.start-select i {
  width: 3.2cqw;
  height: 3.2cqw;
  border-radius: 50%;
  background: var(--shell);
  box-shadow: 0 0 0 0.25cqw var(--shell-dark), inset 0 -0.3cqw 0 var(--shell-dark);
}

.mic {
  position: absolute;
  left: 72.6cqw;
  top: 48.5cqw;
  font-size: 1.1cqw;
  color: var(--bezel);
}

/* Little lights on the bottom edge */
.leds {
  position: absolute;
  left: 79cqw;
  bottom: 0.4cqw;
  display: flex;
  gap: 3.9cqw;
}
.leds i { width: 0.6cqw; height: 1.2cqw; border-radius: 0.2cqw; }
.led-blue   { background: #6FD3FF; }
.led-off    { background: #2A2F36; }
.led-yellow { background: #F5E46A; }

/* ===== WORKING BUTTONS: D-pad, A and B ===== */
.dpad-btn {
  position: absolute;
  z-index: 2;
  width: 3.9cqw;
  height: 3.9cqw;
  padding: 0;
  border: 0;
  border-radius: 0.5cqw;
  background: transparent;
  cursor: pointer;
}
.dpad-btn.up    { left: 3.9cqw; top: 0; }
.dpad-btn.down  { left: 3.9cqw; top: 7.8cqw; }
.dpad-btn.left  { left: 0;      top: 3.9cqw; }
.dpad-btn.right { left: 7.8cqw; top: 3.9cqw; }
.dpad-btn:hover { background: rgba(255, 255, 255, 0.12); }
.dpad-btn:active { background: rgba(0, 0, 0, 0.3); }

.abxy button {
  padding: 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.abxy button:hover { filter: brightness(1.15); }
.abxy button:active { transform: scale(0.9); filter: brightness(0.85); }

/* ===== TOP SCREEN: like the real 3DS top screen =====
   Status bar on top, faint rounded squares in the background,
   your logo and live numbers in the middle, camera hints at the bottom. */
.top-screen {
  aspect-ratio: 5 / 3;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #FFFFFF;
}

/* Status bar: rounded font like the 3DS system font */
.top-status {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  height: 4.8cqw;
  padding: 0 1.4cqw;
  background: linear-gradient(#FFFFFF, #E8E9EB);
  border-bottom: 0.15cqw solid #CFD1D5;
  font-family: "M PLUS Rounded 1c", var(--font);
  font-weight: 500;
  font-size: 2.2cqw;
  color: #2E3135;
  white-space: nowrap;
}
.wireless svg {
  display: block;
  width: 3cqw;
  height: 3cqw;
  color: #34C24A;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.status-pill {
  width: 15cqw;
  padding: 0.25cqw 0;
  border-radius: 0.6cqw;
  background: linear-gradient(#7BE57D, #33B53F);
  box-shadow: inset 0 0 0 0.15cqw rgba(0, 0, 0, 0.12);
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0.1cqw 0.2cqw rgba(0, 0, 0, 0.25);
}
.coins { display: flex; align-items: center; gap: 0.7cqw; }
.coin {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #F4EBC4 35%, #CDB979 38%, #E9DCA5 52%);
  box-shadow: inset 0 0 0 0.2cqw #A8935A;
}
.clock { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Blue battery with white segments, like the 3DS */
.battery {
  position: relative;
  width: 4cqw;
  height: 2.2cqw;
  padding: 0.25cqw;
  border: 0.2cqw solid #3A3E44;
  border-radius: 0.35cqw;
  background:
    repeating-linear-gradient(90deg, #2F8FFF 0 0.95cqw, #FFFFFF 0.95cqw 1.15cqw) content-box,
    #FFFFFF;
}
.battery::after {
  content: "";
  position: absolute;
  right: -0.6cqw;
  top: 30%;
  width: 0.35cqw;
  height: 40%;
  border-radius: 0 0.1cqw 0.1cqw 0;
  background: #3A3E44;
}

.top-content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3cqw;
  padding: 1.4cqw 4cqw;
}

.top-bottombar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.2cqw; /* measured from the real 3DS: about 7.5% of the screen height */
  padding: 0;
  font-family: "M PLUS Rounded 1c", var(--font);
  color: #3A3E44;
}
/* Two separate tabs in the corners, each with one slanted edge, like the 3DS.
   The tab's color is drawn by ::before (cut with clip-path);
   the drop-shadow draws the thin line along its top and slanted edge. */
.top-bottombar span {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  filter: drop-shadow(0 -0.15cqw 0 #D2D4D8);
}
.top-bottombar span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#EFF0F2, #E2E3E6);
}
/* Both tabs are exactly the same width */
.top-bottombar span { width: 13.5cqw; gap: 0; }
/* Left tab: screen icon and Y side by side, centered in the tab
   (the right padding keeps them clear of the slanted edge) */
.top-bottombar span:first-child { padding: 0 2.2cqw 0 0; justify-content: center; gap: 0.8cqw; }
.top-bottombar span:first-child::before { clip-path: polygon(0 0, calc(100% - 2.2cqw) 0, 100% 100%, 0 100%); }
/* Right tab: camera, then L + R close together at the right */
.top-bottombar span:last-child { padding: 0 1.3cqw 0 2.6cqw; justify-content: flex-end; gap: 0.45cqw; }
.top-bottombar span:last-child svg { margin-right: 0.35cqw; }
.top-bottombar span:last-child::before { clip-path: polygon(2.2cqw 0, 100% 0, 100% 100%, 0 100%); }
.top-bottombar svg {
  width: 2.9cqw;
  height: 2.9cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
/* Button letters: Y in a circle, L and R in rounded boxes */
/* Button letters like the 3DS: thin outline, Y in a circle, L and R in rounded boxes */
.top-bottombar b {
  display: inline-grid;
  place-items: center;
  width: 2.3cqw;
  height: 2.3cqw;
  border: 0.15cqw solid #45494F;
  border-radius: 0.5cqw;
  background: transparent;
  color: #45494F;
  font-size: 1.4cqw;
  font-weight: 500;
  line-height: 1;
}
.top-bottombar b.round { border-radius: 50%; }
.top-bottombar em { font-style: normal; font-weight: 500; font-size: 1.3cqw; color: #45494F; }

.channel-logo {
  width: 26cqw;
  height: 26cqw;
  object-fit: contain;
}

.channel-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4cqw;
}

.channel-name {
  margin: 0;
  font-size: 2.8cqw;
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 110%;
  white-space: nowrap; /* keeps "Dr. Dual Screen" on one line */
}

.stat-number {
  display: block;
  font-size: 5cqw;
  line-height: 1;
  font-weight: 800;
  font-stretch: 115%;
}
#stat-views { font-size: 3.6cqw; }
.stat-label { font-size: max(12px, 1.8cqw); color: var(--ink-soft); }

.btn-subscribe {
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: max(13px, 2cqw);
  padding: 1cqw 2.6cqw;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-subscribe:hover { background: var(--shell-dark); }

/* ===== NEWEST VIDEO (next to the 3DS) ===== */
.latest {
  display: block;
  text-decoration: none;
  margin-top: clamp(0px, 3vw, 48px);
  /* Frosted glass panel, so the text is readable over the workbench photo */
  padding: 20px 22px 24px;
  border-radius: 16px;
  background: rgba(247, 250, 252, 0.84);
  backdrop-filter: blur(6px);
}
.latest-label { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.latest-thumb { position: relative; border-radius: 10px; overflow: hidden; }
.latest-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--red);
}
.play::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 21px;
  border-left: 22px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.latest-title {
  margin: 18px 0 6px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  font-stretch: 110%;
}
.latest-date { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; }

.latest-watch {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
}
.latest:hover .latest-title { color: var(--red); }
.latest:hover .latest-watch { background: var(--shell-dark); }

/* ===== GAMEPLAY VIDEOS INSIDE THE SCREENS =====
   The recording fills the screen behind the content, blurred and faded,
   so the logo, numbers and buttons stay easy to read. */
.screen { position: relative; }
.screen > *:not(.screen-video) { position: relative; z-index: 1; }

.screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: blur(var(--video-blur));
  transform: scale(1.08); /* hides the soft edges the blur makes */
  opacity: var(--video-strength);
}

/* Change these to adjust the videos:
   blur: higher = softer
   strength (0 to 1): higher = more visible, lower = calmer */
.screen {
  --video-blur: 3px;
  --video-strength: 0.45;
}

/* ===== BOTTOM SCREEN: 3DS HOME MENU STYLE =====
   Modeled on the real HOME menu: toolbar on top, white rounded app tiles
   on a grey panel, and green corner brackets around the selected app. */
.bottom-screen {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #FFFFFF;
}

/* Toolbar */
.home-toolbar {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  height: 6cqw;
  padding: 0 1.6cqw;
  background: linear-gradient(#FFFFFF, #ECEDEF);
  border-bottom: 0.2cqw solid #D3D4D8;
}
.tb-icon svg {
  display: block;
  width: 3.4cqw;
  height: 3.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tb-icon:first-child { margin-right: 1.4cqw; }
.tb-view { margin-left: auto; display: flex; gap: 0.6cqw; }
.tb-view i { width: 1.8cqw; height: 1.8cqw; border-radius: 0.3cqw; background: #8C96A3; }
.tb-view i.grid { background: repeating-linear-gradient(90deg, #B5BCC5 0 0.7cqw, transparent 0.7cqw 1.1cqw); }

/* Grey panel with the app tiles */
.home-grid {
  flex: 1;
  min-height: 0;
  margin: 1.4cqw 1.6cqw 0;
  padding: 1.6cqw 2.4cqw;
  /* Grey "bubble" panel around the icons: rounded, lighter at the top,
     with a soft inner edge and shadow so it looks puffy, like the 3DS */
  border-radius: 3cqw;
  background: linear-gradient(#F1F2F4, #E1E3E7);
  box-shadow:
    inset 0 0.3cqw 0 rgba(255, 255, 255, 0.9),
    inset 0 -0.4cqw 0.8cqw rgba(0, 0, 0, 0.06),
    0 0.4cqw 1cqw rgba(31, 39, 51, 0.12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.4cqw;
  place-items: center;
}

/* One app tile: white rounded square with the colorful picture inside */
.tile {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  padding: 1.1cqw;
  border-radius: 1.8cqw;
  background: linear-gradient(#FFFFFF, #F1F1F3);
  box-shadow: inset 0 -0.35cqw 0 #D6D7DB, 0 0.3cqw 0.7cqw rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: transform 0.12s ease-out;
}
.tile:hover { transform: translateY(-0.3cqw); }

.app-art {
  width: 100%;
  height: 100%;
  border-radius: 1cqw;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.app-art svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-art svg [fill="currentColor"] { fill: #FFFFFF; }
.app-art img { width: 100%; height: 100%; object-fit: cover; }
.app-blue   { background: linear-gradient(#4FA6FF, #2F7FE6); }
.app-green  { background: linear-gradient(#3DBB87, #2A9467); }
.app-teal   { background: linear-gradient(#45D3A3, #26A97E); }
.app-orange { background: linear-gradient(#FFA03A, #EE7F17); }
.app-red    { background: linear-gradient(#E0485B, #C1283B); }
.app-logo   { background: #FFFFFF; }

/* Green corner brackets around the selected tile, like the real 3DS cursor.
   The mask only lets the four corners of the border show. */
.tile.is-selected::after {
  content: "";
  position: absolute;
  inset: -0.9cqw;
  border: 0.55cqw solid #2FD39B;
  border-radius: 2.4cqw;
  /* Length of each corner bracket. Must be a length (not %) so the
     four corners land exactly on the four corners of the tile. */
  --corner: 3.6cqw;
  -webkit-mask: conic-gradient(at var(--corner) var(--corner), #0000 75%, #000 0) 0 0 / calc(100% - var(--corner)) calc(100% - var(--corner));
          mask: conic-gradient(at var(--corner) var(--corner), #0000 75%, #000 0) 0 0 / calc(100% - var(--corner)) calc(100% - var(--corner));
}

/* Name of the selected app */
.home-caption {
  height: 5cqw;
  display: grid;
  place-items: center;
  font-size: max(11px, 1.9cqw);
  font-weight: 700;
  color: var(--ink);
}

/* Text only screen readers hear */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== POWER-ON MOMENT (plays once when the page opens) ===== */
@media (prefers-reduced-motion: no-preference) {
  .screen { animation: power-on 0.9s ease-out both; }
  .bottom-screen { animation-delay: 0.15s; }
  .led-blue { animation: led-on 0.3s ease-out both; }
}

/* Only the brightness changes, so the screen's own background (the 3DS texture) stays */
@keyframes power-on {
  from { filter: brightness(0); }
  to   { filter: brightness(1); }
}
@keyframes led-on {
  from { background: #3A4048; }
  to   { background: #6FD3FF; }
}

/* ===== SECTIONS BELOW THE CONSOLE ===== */
.section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 64px 24px;
  border-top: 2px solid var(--line);
}

h2, .about h1 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 125%;
  margin: 0 0 8px;
}

.intro { margin: 0 0 32px; color: var(--ink-soft); max-width: 60ch; }

.text-link { color: var(--red); font-weight: 600; }

/* Videos */
.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 32px 24px;
  margin-bottom: 24px;
}
.video { text-decoration: none; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.video h3 { margin: 0 0 2px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.video p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.video .video-views { color: var(--ink); font-weight: 600; }
.video .video-views:empty { display: none; }
.video[hidden] { display: none; }

.show-more {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 22px;
  margin-bottom: 24px;
  cursor: pointer;
}
.show-more:hover { background: var(--ink); color: var(--page); }
.show-more[hidden] { display: none; }
.video:hover h3 { color: var(--red); }

/* Repair notes */
.notes { max-width: 760px; border-top: 1px solid var(--line); }
.notes details { border-bottom: 1px solid var(--line); padding: 0 4px; }
.notes summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.notes summary::-webkit-details-marker { display: none; }
.note-title { font-size: 21px; font-weight: 700; }
.note-meta { color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
.notes details[open] summary .note-title { color: var(--red); }
.notes details p { margin: 0 0 10px; max-width: 62ch; }
.notes details a { display: inline-block; margin-bottom: 20px; }

/* About */
.about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.about p { max-width: 60ch; }
.photo-spot {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  text-align: center;
  padding: 16px;
}

/* Mod / Fix guide cards */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.guide-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: var(--screen);
  text-decoration: none;
}
.guide-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.guide-card h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; font-weight: 800; }
.guide-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.guide-card:hover h3 { color: var(--red); }

/* Mod guide page */
.guide-intro { border-top: 0; padding-bottom: 24px; }
.guide-intro h1 { font-size: 48px; line-height: 1.1; font-weight: 800; font-stretch: 125%; margin: 0 0 12px; }
.guide-steps { display: flex; flex-direction: column; gap: 56px; }
.guide-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; max-width: 900px; }
.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
}
.guide-step h2 { font-size: 28px; margin-bottom: 6px; }
.guide-step p { margin: 0 0 16px; color: var(--ink-soft); }
.video-embed { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--bezel); }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.links-heading { font-size: 20px; font-weight: 800; margin: 28px 0 10px; }
.resource-list { list-style: none; padding: 0; margin: 0; max-width: 62ch; }
.resource-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.resource-list p { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; }
html { scroll-behavior: smooth; } /* "Links you need" glides down instead of jumping */
.guide-intro .btn-red { margin-top: 8px; }
/* New 3DS XL page: "What's wrong with your console?" jump buttons */
.jump-title { font-size: 22px; margin: 28px 0 12px; }
.jump-list { display: flex; flex-wrap: wrap; gap: 10px; }
.jump-list a {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--screen);
  border: 2px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.jump-list a:hover { border-color: var(--red); color: var(--red); }
/* Repairs without a step number use the full width */
.guide-step.no-number { grid-template-columns: minmax(0, 1fr); }
/* Leave room above a repair when the jump buttons scroll to it */
.guide-step { scroll-margin-top: 24px; }
.small-print { color: var(--ink-soft); font-size: 14px; }

/* Discussion */
.discussion-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn-red {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
}
.btn-red:hover { background: var(--shell-dark); }

/* About page */
.page-top { max-width: 1040px; margin: 0 auto; padding: 24px 24px 0; }
.footer a { color: var(--screen); font-weight: 600; }

.photo-spot { position: relative; overflow: hidden; }
.photo-spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cartoon in the photo spot: whole picture visible on a white card */
.photo-spot img.about-art { object-fit: contain; padding: 4%; }
.photo-spot:has(.about-art) { border-style: solid; border-color: transparent; background: #FFFFFF; }
.sponsor-line { margin-top: 20px; font-weight: 600; }

/* Work with me page */
.kit-intro { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; border-top: 0; }
.kit-logo { width: 200px; height: 200px; object-fit: contain; mix-blend-mode: multiply; }
.kit-intro h1 { font-size: 44px; line-height: 1.1; font-weight: 800; font-stretch: 125%; margin: 0 0 12px; }
.kit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kit-stat { background: var(--screen); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.kit-stat .stat-number { font-size: 36px; }
.kit-stat .stat-label { font-size: 15px; }
.kit-list { padding-left: 20px; max-width: 62ch; }
.kit-list li { margin-bottom: 10px; }
/* "Got a different idea?" box */
.kit-idea {
  max-width: 62ch;
  margin-top: 24px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--screen);
  border-left: 4px solid var(--red);
}
.kit-idea h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.kit-idea p { margin: 0 0 10px; }
/* Audience: two lists with bars */
.audience-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px 40px; margin: 28px 0 8px; }
.audience-lists h3 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 12px; padding: 6px 0; }
.bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--red); border-radius: 5px; }
.bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.email-text { margin: 14px 0 0; font-weight: 600; color: var(--ink-soft); }

/* Dashed boxes = things you still need to fill in */
.fill-in {
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Footer */
.footer {
  background: var(--bezel);
  color: var(--screen);
  text-align: center;
  padding: 48px 24px;
}
.footer p { margin: 0 0 8px; }
.footer .small { font-size: 14px; color: #A9B1BC; }

/* ===== MEDIUM WINDOWS (small laptops, tablets) =====
   Side by side, the 3DS would get too small for its text,
   so the 3DS and the newest video stack on top of each other. */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .console { width: 100%; max-width: 680px; margin: 0 auto; }
  .latest { max-width: 680px; width: 100%; margin: 0 auto; }
}

/* ===== PHONES AND SMALL SCREENS =====
   A phone is too narrow for the buttons, so the screens fill the console
   (it ends up looking like a Game Boy Advance SP) and the text uses normal sizes. */
@media (max-width: 700px) {
  /* Phones show only the middle of the banner (YouTube's phone-safe area, 1546 x 423),
     so the name and handles stay big enough to read */
  .banner { padding: 10px; }
  .banner-card { aspect-ratio: 1546 / 423; border-radius: 12px; }
  /* Phones only show the middle of the banner, so the links move with it */
  .link-youtube   { left: 0.7%;  width: 31%; }
  .link-instagram { left: 32.2%; width: 32.3%; }
  .link-tiktok    { left: 65.2%; width: 34.2%; }
  .workbench { padding: 12px 0 32px; }
  .hero { width: 100%; margin: 0; padding: 0 10px; grid-template-columns: 1fr; gap: 28px; }

  .pad, .corner, .speaker, .side-label, .mic,
  .circle-pad, .dpad, .c-stick, .abxy, .start-select { display: none; }

  .lid { padding: 8cqw 3cqw 0; border-radius: 8cqw 8cqw 1cqw 1cqw; }
  .camera { top: 2cqw; left: 46.5cqw; }
  .surround { padding: 2cqw 2cqw 2cqw; }
  .hinge { height: 7cqw; }
  .hinge-led { left: 92cqw; top: 3cqw; width: 2cqw; height: 2cqw; }
  .base { padding: 1cqw 3cqw 6cqw; border-radius: 1cqw 1cqw 8cqw 8cqw; }
  .plate { padding: 2cqw; gap: 2.5cqw; }
  .home-button { width: 14cqw; height: 5cqw; border-radius: 2.5cqw; }
  .leds { left: auto; right: 10cqw; bottom: 1.5cqw; gap: 3cqw; }
  .leds i { width: 1.5cqw; height: 2.5cqw; }

  .top-screen { aspect-ratio: auto; }
  .top-status { height: 26px; gap: 6px; padding: 0 8px; font-size: 11px; }
  .wireless svg { width: 15px; height: 15px; }
  .status-pill { width: 56px; border-radius: 4px; }
  .coin { width: 12px; height: 12px; box-shadow: inset 0 0 0 1px #A8935A; }
  .battery { width: 20px; height: 11px; border-width: 1px; padding: 1px; background: repeating-linear-gradient(90deg, #2F8FFF 0 4px, #FFFFFF 4px 5px) content-box, #FFFFFF; }
  .battery::after { right: -3px; width: 2px; }
  .top-content { gap: 14px; padding: 14px; }
  .top-bottombar { height: 20px; padding: 0; }
  .top-bottombar svg { width: 13px; height: 13px; }
  .top-bottombar b { width: 11px; height: 11px; border-width: 1px; border-radius: 3px; font-size: 7px; }
  .top-bottombar span { width: 72px; }
  .top-bottombar span:first-child { padding: 0 10px 0 0; gap: 4px; }
  .top-bottombar span:last-child { padding: 0 6px 0 12px; gap: 2px; }
  .top-bottombar em { font-size: 8px; }
  .top-bottombar em { font-size: 10px; }
  .channel-logo { width: 104px; height: 104px; }
  .channel-info { gap: 8px; }
  .channel-name { font-size: 16px; }
  .stat-number { font-size: 26px; }
  #stat-views { font-size: 20px; }
  .stat-label { font-size: 13px; }
  .btn-subscribe { padding: 7px 14px; font-size: 14px; }
  .latest { margin-top: 0; }

  .bottom-screen { aspect-ratio: auto; }
  .home-toolbar { height: 34px; gap: 8px; padding: 0 10px; }
  .tb-icon svg { width: 18px; height: 18px; }
  .tb-icon:first-child { margin-right: 6px; }
  .tb-view i { width: 9px; height: 9px; }
  .home-grid { margin: 8px 8px 0; padding: 12px; gap: 10px; border-radius: 16px; }
  .tile { height: auto; width: 100%; padding: 6px; border-radius: 14px; }
  .app-art { border-radius: 8px; }
  .tile.is-selected::after { inset: -5px; border-width: 3px; border-radius: 16px; --corner: 16px; }
  .home-caption { height: 30px; font-size: 13px; }

  h2, .about h1 { font-size: 32px; }
  .section { padding: 48px 16px; }
  .about { grid-template-columns: 1fr; gap: 24px; }
  .kit-intro { grid-template-columns: 1fr; gap: 16px; }
  .guide-card { grid-template-columns: 1fr; }
  .guide-intro h1 { font-size: 34px; }
  .guide-step { grid-template-columns: 1fr; gap: 10px; }
  .guide-step h2 { font-size: 22px; }
  .kit-logo { width: 140px; height: 140px; }
  .kit-intro h1 { font-size: 32px; }
  .kit-stat .stat-number { font-size: 28px; }
}

/* Page not found */
.not-found { text-align: center; padding-top: 80px; }
.not-found img { margin: 0 auto 16px; }
.not-found .intro { margin-left: auto; margin-right: auto; }