/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Theme ─────────────────────────────────────── */
:root {
  --ipod-base: #7B53CC;
  --center-1: #9E7CDD;
  --center-2: #8662D2;
  --center-3: #7350C2;
  --center-4: #6644B4;
  --shadow-1: rgba(40, 15, 100, 0.45);
  --shadow-2: rgba(35, 10, 90, 0.38);
  --shadow-3: rgba(25, 5, 75, 0.26);
  --wheel-bg: radial-gradient(ellipse at 40% 35%, #f8f8f8 0%, #eeeeee 30%, #e2e2e2 65%, #d4d4d4 100%);
  --wheel-label-color: #7a7a7a;
  --wheel-shadow-light: rgba(255, 255, 255, 0.90);
  --wheel-shadow-dark: rgba(0, 0, 0, 0.12);
}
body[data-theme="blue"] {
  --ipod-base: #2DB4DF;
  --center-1: #6FCEE8;
  --center-2: #45BEE0;
  --center-3: #2BACD4;
  --center-4: #1F9DC4;
  --shadow-1: rgba(10, 80, 130, 0.45);
  --shadow-2: rgba(5, 70, 120, 0.38);
  --shadow-3: rgba(0, 55, 100, 0.26);
}
body[data-theme="orange"] {
  --ipod-base: #E97A1F;
  --center-1: #F89A4C;
  --center-2: #EE842A;
  --center-3: #D86F1B;
  --center-4: #C46318;
  --shadow-1: rgba(120, 50, 10, 0.45);
  --shadow-2: rgba(100, 40, 5, 0.38);
  --shadow-3: rgba(80, 30, 0, 0.26);
}
body[data-theme="red"] {
  --ipod-base: #D62631;
  --center-1: #EC5560;
  --center-2: #DD3640;
  --center-3: #C9202B;
  --center-4: #B71A24;
  --shadow-1: rgba(110, 15, 25, 0.45);
  --shadow-2: rgba(95, 10, 20, 0.38);
  --shadow-3: rgba(75, 5, 15, 0.26);
}
body[data-theme="yellow"] {
  --ipod-base: #EBC51F;
  --center-1: #F5DA52;
  --center-2: #EECA2C;
  --center-3: #DAB418;
  --center-4: #C5A312;
  --shadow-1: rgba(120, 95, 10, 0.45);
  --shadow-2: rgba(100, 80, 5, 0.38);
  --shadow-3: rgba(80, 65, 0, 0.26);
}
body[data-theme="green"] {
  --ipod-base: #88BD3C;
  --center-1: #ABD668;
  --center-2: #93C548;
  --center-3: #7DAF34;
  --center-4: #6E9B2B;
  --shadow-1: rgba(50, 90, 15, 0.45);
  --shadow-2: rgba(40, 75, 10, 0.38);
  --shadow-3: rgba(30, 60, 5, 0.26);
}
body[data-theme="pink"] {
  --ipod-base: #E13B8A;
  --center-1: #EE6BA7;
  --center-2: #E54995;
  --center-3: #CE3079;
  --center-4: #B72868;
  --shadow-1: rgba(120, 20, 70, 0.45);
  --shadow-2: rgba(100, 15, 60, 0.38);
  --shadow-3: rgba(80, 10, 50, 0.26);
}
body[data-theme="silver"] {
  --ipod-base: #C2C4C9;
  --center-1: #DEDFE2;
  --center-2: #C9CACE;
  --center-3: #B4B5B9;
  --center-4: #A0A2A6;
  --shadow-1: rgba(60, 60, 70, 0.40);
  --shadow-2: rgba(40, 40, 50, 0.32);
  --shadow-3: rgba(20, 20, 30, 0.22);
  --wheel-bg: radial-gradient(ellipse at 40% 35%, #4c4c4e 0%, #3a3a3c 30%, #2c2c2e 65%, #1f1f21 100%);
  --wheel-label-color: rgba(255, 255, 255, 0.88);
  --wheel-shadow-light: rgba(255, 255, 255, 0.10);
  --wheel-shadow-dark: rgba(0, 0, 0, 0.40);
}
body[data-theme="black"] {
  --ipod-base: #2D2D2F;
  --center-1: #4A4A4C;
  --center-2: #3A3A3C;
  --center-3: #2C2C2E;
  --center-4: #1F1F21;
  --shadow-1: rgba(0, 0, 0, 0.55);
  --shadow-2: rgba(0, 0, 0, 0.42);
  --shadow-3: rgba(0, 0, 0, 0.30);
  --wheel-bg: radial-gradient(ellipse at 40% 35%, #4c4c4e 0%, #3a3a3c 30%, #2c2c2e 65%, #1f1f21 100%);
  --wheel-label-color: rgba(255, 255, 255, 0.88);
  --wheel-shadow-light: rgba(255, 255, 255, 0.10);
  --wheel-shadow-dark: rgba(0, 0, 0, 0.40);
}

/* ─── Page ──────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dedad5;
  background-image:
    radial-gradient(ellipse at 25% 15%, #eae6e0 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, #d0cdc8 0%, transparent 55%);
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 80px;
  perspective: 1800px;
}

.ipod-3d {
  width: 198px;
  height: 475px;
  position: relative;
  transform-style: preserve-3d;
  transition: none;
}
.ipod-3d.conveyor { will-change: transform; }

.ipod-3d > .ipod,
.ipod-3d > .ipod-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ipod-3d > .ipod      { transform: translateZ(8px); }
.ipod-3d > .ipod-back { transform: rotateY(180deg) translateZ(8px); }

.ipod-edge {
  position: absolute;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.20) 100%
    ),
    var(--ipod-base);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ipod-edge-l, .ipod-edge-r {
  top: 0;
  left: 50%;
  width: 16px;
  height: 475px;
  margin-left: -8px;
  border-radius: 50% / 2px;
}
.ipod-edge-l { transform: rotateY(-90deg) translateZ(99px); }
.ipod-edge-r { transform: rotateY(90deg)  translateZ(99px); }
.ipod-edge-t, .ipod-edge-b {
  left: 0;
  top: 50%;
  width: 198px;
  height: 16px;
  margin-top: -8px;
}
.ipod-edge-t { transform: rotateX(90deg)  translateZ(237.5px); }
.ipod-edge-b { transform: rotateX(-90deg) translateZ(237.5px); }

.ipod-back {
  border-radius: 50% / 2px;
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      rgba(0,0,0,0.018) 1px,
      rgba(0,0,0,0.018) 2px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.18)  0%,
      rgba(0,0,0,0.16)       18%,
      rgba(255,255,255,0.24) 36%,
      rgba(0,0,0,0.12)       54%,
      rgba(255,255,255,0.18) 72%,
      rgba(0,0,0,0.20)       90%,
      rgba(255,255,255,0.10) 100%
    ),
    var(--ipod-base);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(0, 0, 0, 0.40);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.apple-logo {
  width: 36px;
  height: 36px;
  margin-top: 110px;
  fill: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
}
.ipod-back-label {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.ipod-back-meta {
  position: absolute;
  bottom: 36px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.ipod-back-size {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ipod-back-fineprint {
  font-size: 5px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  opacity: 0.7;
}

/* ─── iPod Body ─────────────────────────────────── */
/*
  Anodized aluminum — completely matte. No glass, no gloss.
  The Nano 4th gen surface is flat-finished metal with very
  subtle directional light from manufacturing grain.
  All depth comes from edge shadows, not surface reflections.
*/
.ipod {
  width: 198px;
  height: 475px;
  border-radius: 50% / 2px;
  position: relative;

  /* Brushed 6061-T6 aluminum, anodized purple.
     Horizontal satin grain + alternating vertical bands of light/shadow
     that simulate the polished, reflective curvature of milled metal. */
  background:
    /* Horizontal brushed grain — very faint satin lines, broken up by noise */
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      rgba(0,0,0,0.018) 1px,
      rgba(0,0,0,0.018) 2px
    ),
    /* Soft cylindrical curvature — edges slightly darker, center bright,
       very subtle to keep the base color reading true */
    linear-gradient(
      90deg,
      rgba(0,0,0,0.14)        0%,
      rgba(0,0,0,0.02)       12%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.14) 50%,
      rgba(255,255,255,0.04) 70%,
      rgba(0,0,0,0.04)       88%,
      rgba(0,0,0,0.14)      100%
    ),
    /* Base anodized color */
    var(--ipod-base);

  box-shadow:
    /* Bright chamfer top — light catching the bevel */
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    /* Dark chamfer bottom — undercut shadow on bevel */
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    /* Side chamfers — vertical edge specular */
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(0, 0, 0, 0.20),
    /* Hairline outer edge */
    0 0 0 1px rgba(0, 0, 0, 0.40),
    /* Contact + ambient stack */
    0 3px 8px   var(--shadow-1),
    0 12px 32px var(--shadow-2),
    0 28px 65px var(--shadow-3),
    0 48px 100px rgba(0, 0, 0, 0.14);
}

/* SVG noise overlay — micro-grain of anodized aluminum */
.ipod::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─── Screen Bezel ───────────────────────────────── */
.screen-bezel {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 178px;
  padding: 7px;
  background: #0c0c0c;
  border-radius: 4px;
  z-index: 2;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.95),
    inset 0 1px 4px  rgba(0, 0, 0, 0.80),
    inset 1px 0 3px  rgba(0, 0, 0, 0.45),
    inset -1px 0 3px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(255, 255, 255, 0.05),
    0 2px 5px rgba(0, 0, 0, 0.50);
}

/* ─── Screen (LCD) ───────────────────────────────── */
.screen {
  width: 164px;
  height: 216px;
  background: #f5f3ee;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ─── Status Bar ─────────────────────────────────── */
.status-bar {
  height: 22px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #c9c6bf 0%, #a8a59d 50%, #94918a 100%);
  border-bottom: 1px solid #6e6c66;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  position: relative;
  z-index: 10;
}

.status-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.40);
}

.status-title {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.battery { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.battery-body {
  width: 18px; height: 9px;
  border: 1px solid #6a6a6a;
  border-radius: 0;
  /* Empty cell color — the dark gray you see in the negative space */
  background: linear-gradient(to bottom, #585858 0%, #4a4a4a 50%, #3e3e3e 100%);
  position: relative;
  padding: 0.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
.battery-fill {
  height: 100%;
  width: 36%;
  background: linear-gradient(to bottom, #a6e88f 0%, #5fc043 45%, #3fa028 100%);
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.battery-nub {
  width: 1.5px;
  height: 4px;
  background: #6a6a6a;
  border-radius: 0;
}

/* ─── Views ──────────────────────────────────────── */
.view {
  position: absolute;
  top: 22px;          /* below status bar */
  left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.view.active, .view.exiting { display: flex; }
.view.active                 { animation: fadeIn 0.14s ease; }
.view.active.from-right      { animation: slideInRight 0.32s ease both; }
.view.active.from-left       { animation: slideInLeft  0.32s ease both; }
.view.exiting.to-left        { animation: slideOutLeft  0.32s ease both; }
.view.exiting.to-right       { animation: slideOutRight 0.32s ease both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight  { from { transform: translateX(100%);  } to { transform: translateX(0); } }
@keyframes slideInLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideOutLeft  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%);  } }

/* ─── Menu ───────────────────────────────────────── */
.ipod-menu { list-style: none; width: 100%; }

/* ─── Photo strip (main menu only) ───────────────── */
#view-menu { justify-content: space-between; }
#view-menu .ipod-menu { flex-shrink: 0; }
.photo-strip {
  flex-shrink: 0;
  height: 57px;
  padding: 2px;
  background: linear-gradient(to bottom, #1f1f1f 0%, #0e0e0e 100%);
  border-top: 1px solid #4a4a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}
.photo-strip-track {
  display: flex;
  gap: 2px;
  height: 100%;
  will-change: transform;
}
.photo-tile {
  flex: 0 0 53px;
  height: 53px;
  background: #000;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ipod-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 9px;
  height: 26px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  cursor: default;
  user-select: none;
}

.ipod-menu-item.selected {
  background: linear-gradient(to bottom, #6fb5ff 0%, #2f8fef 50%, #2278d8 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.item-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  opacity: 0.85;
  margin-top: -1px;
}
.ipod-menu-item.selected .item-arrow { opacity: 1; color: #fff; }

/* ─── Scroll areas ───────────────────────────────── */
#view-about, #view-projects, #view-contact, #view-settings, #view-colors, #view-games { flex-direction: row !important; }

#view-brick {
  background: #87ceeb;
  align-items: stretch;
  justify-content: center;
}
#view-brick canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.scroll-area { display: flex; flex-direction: row; flex: 1; overflow: hidden; }

.scroll-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 7px 5px 7px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.scroll-content::-webkit-scrollbar { display: none; }
#view-projects .scroll-content,
#view-contact  .scroll-content,
#view-settings .scroll-content,
#view-colors   .scroll-content,
#view-games    .scroll-content { padding: 0; }
#view-projects .scroll-track,
#view-contact  .scroll-track,
#view-settings .scroll-track,
#view-colors   .scroll-track,
#view-games    .scroll-track { display: none; }

.text-body p {
  font-size: 9.5px;
  line-height: 1.5;
  color: #1c1c1c;
  margin-bottom: 8px;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.text-body p:last-child { margin-bottom: 0; }

.scroll-track {
  width: 4px;
  background: rgba(0,0,0,0.07);
  margin: 5px 3px 5px 0;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.scroll-thumb {
  width: 4px;
  background: rgba(0,0,0,0.28);
  border-radius: 2px;
  position: absolute;
  top: 0; left: 0;
  min-height: 14px;
  transition: top 0.08s linear;
}

/* ─── Track List ─────────────────────────────────── */
.track-list { list-style: none; width: 100%; }

.track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px 5px 8px;
  border-bottom: 1px solid #e2dfd9;
  cursor: default;
  user-select: none;
  min-height: 34px;
}

.track-details { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.track-title { font-size: 8.5px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-sub { font-size: 7px; color: #888; white-space: nowrap; }
.track-item .item-arrow { font-size: 14px; color: #bbb; margin-left: 4px; flex-shrink: 0; }

/* ─── Clickwheel ─────────────────────────────────── */
.wheel-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/*
  Real Nano 4th gen clickwheel: a white/silver RING (donut)
  with the body color showing through the center hole.
  NO solid dome — the center is an open hole.
*/
.wheel {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  user-select: none;
  cursor: default;

  /* Wheel surface — themeable; defaults to white/silver, dark for silver/black bodies */
  background: var(--wheel-bg);

  box-shadow:
    inset 0  2px 5px var(--wheel-shadow-light),
    inset 3px 0 4px  var(--wheel-shadow-light),
    inset 0 -2px 5px var(--wheel-shadow-dark),
    inset -3px 0 4px var(--wheel-shadow-dark);
}

/* Ring button labels — sit on the white ring area */
.wheel-label {
  position: absolute;
  font-size: 7px;
  font-weight: 700;
  color: var(--wheel-label-color);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  z-index: 4;
  line-height: 1;
  transition: color 0.1s;
}
.wheel-label, .wheel-center, .wheel { -webkit-tap-highlight-color: transparent; }
.wheel-label::before {
  content: '';
  position: absolute;
  top: -22px;
  bottom: -22px;
  left: -28px;
  right: -28px;
}
/* Clip each label's hit area so it grows outward only — never into the center
   button. Without this, FWD/BCK overlap the center and a slightly-off-center
   tap registers as "next item" instead of "select". */
.w-top::before    { bottom: -4px; }
.w-bottom::before { top: -4px; }
.w-left::before   { right: -4px; }
.w-right::before  { left: -4px; }
.w-top    { top: 12px;    left: 50%; transform: translateX(-50%); font-size: 11px; }
.w-bottom { bottom: 11px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 1px; }
.w-left   { left: 12px;   top: 50%;  transform: translateY(-50%); font-size: 11px; }
.w-right  { right: 12px;  top: 50%;  transform: translateY(-50%); font-size: 11px; }

/*
  Center "hole": the body purple showing through the ring.
  This is the defining feature of the Nano 4th gen clickwheel.
  It's not a dome — it's the aluminum body exposed in the center.
*/
.wheel-center {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.08s ease, filter 0.08s ease;

  /* Match body color exactly */
  background:
    radial-gradient(
      circle at 42% 36%,
      var(--center-1) 0%,
      var(--center-2) 35%,
      var(--center-3) 70%,
      var(--center-4) 100%
    );

  box-shadow:
    /* Thin ring where wheel meets center */
    0 0 0 1px rgba(0, 0, 0, 0.18);
}

.wheel-center:active {
  filter: brightness(0.88);
}

/* ─── Bottom connector ───────────────────────────── */
.ipod-bottom-edge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.dock-connector {
  width: 46px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #181818, #0c0c0c);
  position: relative;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

.dock-connector::before {
  content: '';
  position: absolute;
  top: 2px; left: 4px; right: 4px;
  height: 3px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    to right,
    #2a2a2a 0px, #2a2a2a 1.5px,
    #0e0e0e 1.5px, #0e0e0e 3px
  );
}