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

:root {
  --bg: #F4EFE6;
  --ink: #1A120B;
  --ink-mid: #3C2A1A;
  --ink-faint: #8B7E6E;
  --border: #D0C3B1;
  --accent: #A64B2A;
  --track: #E0D5C1;
  --thumb: #1A120B;
  --shadow: rgba(26,18,11,0.06);

  /* Strict Font Size Constraints */
  --fs-xl: 48px;  
  --fs-l:  24px;  
  --fs-m:  14px;  
  --fs-s:  12px;  
}

body.dark {
  --bg: #1A1410;
  --ink: #F4EFE6;
  --ink-mid: #C8BCAA;
  --ink-faint: #7A6E5C;
  --border: #3C3028;
  --accent: #D4602A;
  --track: #3C3028;
  --thumb: #F4EFE6;
  --shadow: rgba(0,0,0,0.40);
}

/* Enforce single-page flex layout */
html, body { 
  width: 100%; 
  height: 100%; 
  background: var(--bg); 
  color: var(--ink); 
  font-family: 'DM Mono', monospace; 
  font-size: var(--fs-s);
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  position: relative; /* positioning context for #ftr-block */
  transition: background .35s, color .35s; 
}

/* ══ GRID SHELL (Main Content) ══ */
#shell {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr 340px;
  grid-template-rows: auto 1fr;
  width: 100%;
  min-height: 0;
  overflow: hidden; /* clips children to grid, panels scroll internally */
}

/* ══ HEADER ══ */
#hdr-l { grid-column:1; grid-row:1; padding: 30px 0 0 30px; }

#hdr-c { 
  grid-column:2; 
  grid-row:1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding-top: 30px; 
  text-align: center; 
}

#hdr-r { grid-column:3; grid-row:1; display:flex; justify-content:flex-end; align-items:center; padding:0px 30px 0 0; gap:14px; }

.site-title { font-family:'Playfair Display',serif; font-size:clamp(36px,4vw,54px); font-weight:900; line-height:1; color:var(--ink); letter-spacing:-1px; }

/* Header SVG Buttons */
.tool-btn { 
  background: transparent; 
  border: none; 
  color: var(--ink); 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: transform .15s, color .15s; 
  flex-shrink: 0; 
  padding: 4px; 
}
.tool-btn svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-btn:hover { color: var(--accent); transform: scale(1.1); }

.moon-icon { display: none; }
body.dark .sun-icon { display: none; }
body.dark .moon-icon { display: block; }

/* ══ MIDDLE PANELS (Restored to original natural heights) ══ */
#mid-l { grid-column:1; grid-row:2; display:flex; flex-direction:column; padding:20px 20px 20px 30px; gap: 30px; overflow-y: auto; scrollbar-width: none; }
#mid-l::-webkit-scrollbar { display: none; }
#mid-c { grid-column:2; grid-row:2; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding: 10px 30px; }
#mid-r { grid-column:3; grid-row:2; display:flex; flex-direction:column; padding:0px 30px 10px 0px; overflow-y: auto; scrollbar-width: none; }
#mid-r::-webkit-scrollbar { display: none; }


/* ══ SEPARATE FOOTER BLOCK ══ */
#ftr-block {
  position: absolute;
  bottom: 0;
  /* Sit only under the center column, clear of the side panels */
  left: 360px;
  right: 340px;
  padding: 10px 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent; /* No bg needed — center column shows through */
  z-index: 10; /* Below side panels (which are in normal flow) */
  pointer-events: none; /* Let clicks pass through to scene behind */
}
#ftr-block a, #ftr-block button {
  pointer-events: auto; /* Re-enable clicks on actual links */
}

.ftr-desc { color: var(--ink-faint); opacity: .7; font-size: 10px; max-width: 700px; line-height: 1.4; margin-bottom: 2px; text-transform: lowercase; text-align: center; }
.ftr-text { color: var(--ink-faint); opacity: .7; font-size: 10px; text-align: center; }

.ftr-links { display: flex; gap: 20px; }
.ftr-links a { color: var(--ink-faint); opacity: .7; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; text-transform: uppercase; font-size: 10px; }
.ftr-links a:hover { color: var(--accent); opacity: 1; }

/* ══ LEFT PANEL ══ */
.panel-label { font-size: var(--fs-m); font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.progress-line { height:2px; background:var(--track); overflow:hidden; margin-bottom: 12px; border-radius:2px;}
.progress-fill { height:100%; background:var(--accent); width:0%; transition:width .5s; }

/* Spotify frame reverted to its original perfectly working height */
#spotifyFrame { display: block; width: 100%; height: 352px; border: none; border-radius: 12px; box-shadow: 0 4px 12px var(--shadow); flex-shrink: 0; }

#playlistPicker { margin-top:10px; flex-shrink: 1; }
#pickerLabel { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.plist-item { display:flex; align-items:flex-start; gap:12px; padding:8px 10px; cursor:pointer; border-left: 3px solid transparent; transition:all .12s; margin-bottom: 4px; }
.plist-item:hover { background: var(--shadow); }
.plist-item.active { border-left-color: var(--accent); background: var(--shadow); }
.plist-num { font-size: var(--fs-s); font-weight:600; color:var(--ink-faint); width:18px; flex-shrink:0; margin-top:2px; }
.plist-item.active .plist-num { color:var(--accent); }
.plist-name { font-size: var(--fs-m); color:var(--ink); font-weight:600; letter-spacing:-0.5px; }
.plist-desc { font-size: var(--fs-s); color:var(--ink-faint); margin-top:4px; font-weight:400; }
.plist-shuffle { font-family:'DM Mono',monospace; font-size: var(--fs-s); font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); cursor:pointer; background:none; border:none; transition:color .15s; }
.plist-shuffle:hover { color:var(--accent); }

/* ══ RIGHT PANEL ══ */
.prefs-container { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; margin-top: 20px; margin-bottom: 14px; }
.prefs-container label { font-family: 'DM Mono', monospace; font-size: var(--fs-m); font-weight: 500; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; cursor: pointer; letter-spacing: .25em; text-transform: uppercase; }
.prefs-container input[type=checkbox] { width: 18px; height: 18px; appearance: none; border: 2px solid var(--border); cursor: pointer; position: relative; background: transparent; transition: border-color 0.15s; flex-shrink: 0; }
.prefs-container input[type=checkbox]:checked { border-color: var(--ink); }
.prefs-container input[type=checkbox]:checked::after { content: ''; position: absolute; inset: 2px; background: var(--ink); }

/* Active label: text turns ink-colored when checkbox is on */
.prefs-container label:has(input[type=checkbox]:checked) { color: var(--ink); }

/* ══ PRESETS CAROUSEL ══ */
.presets-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  margin-top: -2px;
}

.presets-toggle-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  transition: color 0.15s, border-color 0.15s;
}
.presets-toggle-btn:hover,
.presets-toggle-btn.active { color: var(--ink); border-color: var(--ink-mid); }

.presets-carousel {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 6px;
  width: 100%;
  padding-bottom: 2px;
  /* Hide scrollbar cleanly */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.presets-carousel::-webkit-scrollbar { display: none; }

.preset-pill-item {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s;
}
.preset-pill-item:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.fx-item { margin-bottom: 4px; }
.fx-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.fx-title { font-family: 'DM Mono', monospace; font-size: var(--fs-m); font-weight: 600; color: var(--ink); letter-spacing: -0.5px; display:flex; align-items:center; gap:6px;}

.fx-play { 
  font-size: 16px; 
  width: 20px; 
  background: none; 
  border: none; 
  cursor: pointer; 
  color: var(--ink-faint); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 0; 
  transition: color 0.15s; 
  margin-left: 4px; 
}
.fx-play:hover { color: var(--ink); }
.fx-play.playing { color: var(--accent); }

.fx-slider-row { display: flex; align-items: center; gap: 10px; }
.fx-speaker { width: 14px; height: 14px; fill: var(--ink-faint); flex-shrink: 0; }

input[type=range].fx-fader { -webkit-appearance: none; appearance: none; height: 3px; background: var(--border); outline: none; flex: 1; border-radius: 0; margin: 0; cursor:pointer;}
input[type=range].fx-fader::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--thumb); border-radius: 50%; cursor: pointer; transition: transform .15s, background .15s; }
input[type=range].fx-fader::-webkit-slider-thumb:hover { transform: scale(1.3); background: var(--accent); }
input[type=range].fx-fader::-moz-range-thumb { width:12px; height:12px; background:var(--thumb); border-radius:50%; border:none; transition:transform .15s, background .15s; cursor:pointer;}
input[type=range].fx-fader::-moz-range-thumb:hover { transform: scale(1.3); background: var(--accent); }

.fx-pan-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s ease; }
.fx-pan-row.show { visibility: visible; opacity: 1; }
.pan-label { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; color: var(--ink-faint); }
input[type=range].fx-pan { -webkit-appearance: none; appearance: none; height: 3px; background: var(--border); outline: none; flex: 1; border-radius: 0; margin: 0; cursor: pointer; }
input[type=range].fx-pan::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: var(--ink-faint); border-radius: 50%; cursor: pointer; transition: transform .15s, background .15s; }
input[type=range].fx-pan::-webkit-slider-thumb:hover { transform: scale(1.3); background: var(--accent); }
input[type=range].fx-pan::-moz-range-thumb { width: 10px; height: 10px; background: var(--ink-faint); border-radius: 50%; border: none; transition: transform .15s, background .15s; cursor: pointer; }
input[type=range].fx-pan::-moz-range-thumb:hover { transform: scale(1.3); background: var(--accent); }

/* MOOD PILLS */
#genrePicker { margin-top: 10px; }
.mood-pills { display:flex; flex-wrap:wrap; gap:6px; }
.pill { font-family:'DM Mono',monospace; font-size: var(--fs-s); font-weight:600; letter-spacing:.08em; color:var(--ink-mid); background:transparent; border:2px solid var(--border); padding:4px 10px; cursor:pointer; transition:all .15s; border-radius: 4px;}
.pill:hover { border-color:var(--ink-mid); }
.pill.active { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ══ POMODORO & STICKY ══ */
#pomodoroModal { display:none; position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.5); align-items:center; justify-content:center; backdrop-filter:blur(6px); }
#pomodoroModal.open { display:flex; }
#pomodoroBox { background:var(--bg); border:2px solid var(--border); padding:40px 50px; min-width:380px; position:relative; box-shadow:0 20px 50px var(--shadow); border-radius: 8px;}
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; cursor:pointer; font-size: var(--fs-l); font-weight:bold; color:var(--ink-faint); }
.modal-close:hover { color:var(--ink); }

.pomo-title { font-size: var(--fs-l); font-weight:900; color:var(--ink); margin-bottom:20px; text-align:center; }
.pomo-presets { display:flex; gap:10px; justify-content:center; margin-bottom:20px; }
.preset-pill { font-family:'DM Mono',monospace; font-size: var(--fs-s); font-weight:600; letter-spacing:.1em; padding:6px 12px; cursor:pointer; background:transparent; color:var(--ink-faint); border:2px solid var(--border); transition:all .12s; border-radius:4px;}
.preset-pill:hover,.preset-pill.active { background:var(--ink); color:var(--bg); border-color:var(--ink); }

.pomo-display { font-size: var(--fs-xl); font-weight:400; letter-spacing:-4px; color:var(--ink); text-align:center; margin:10px 0; font-family:'DM Mono',monospace; }
.pomo-display.brk { color:var(--accent); }
.pomo-status { font-size: var(--fs-s); font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); text-align:center; margin-bottom:24px; }
.pomo-controls { display:flex; gap:12px; justify-content:center; }
.pomo-btn { font-family:'DM Mono',monospace; font-size: var(--fs-m); font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:12px 24px; cursor:pointer; background:var(--ink); color:var(--bg); border:2px solid var(--ink); transition:all .15s; border-radius:4px; }
.pomo-btn:hover { background:var(--accent); border-color:var(--accent); }
.pomo-btn.sec { background:transparent; color:var(--ink-mid); border-color:var(--border); }
.pomo-btn.sec:hover { background:transparent; color:var(--ink); border-color:var(--ink-mid); }

.sticky { position:fixed; z-index:300; background:#FFF9C4; border:1px solid rgba(0,0,0,0.1); padding:12px 14px 14px; min-width:180px; min-height:240px; cursor:grab; box-shadow:4px 6px 15px var(--shadow); display:flex; flex-direction:column; gap:6px; border-radius:12px; }
body.dark .sticky { box-shadow:4px 6px 15px rgba(0,0,0,0.6); }
.sticky:active { cursor:grabbing; }
.sticky-del { align-self:flex-end; background:none; border:none; cursor:pointer; font-size: var(--fs-m); font-weight:bold; color:rgba(0,0,0,0.4); line-height:1; padding:0; }
.sticky-del:hover { color:var(--accent); }
.sticky textarea { flex:1; background:transparent; border:none; outline:none; resize:none; font-family:'DM Mono',monospace; font-size: var(--fs-s); font-weight:500; color:rgba(0,0,0,0.8); line-height:1.6; min-height:80px; cursor:text; user-select:text; }

#stickyPanel { display:none; position:fixed; z-index:350; top:80px; right:40px; background:var(--bg); border:2px solid var(--border); padding:20px; min-width:220px; box-shadow:0 10px 30px var(--shadow); border-radius:8px;}
#stickyPanel.open { display:block; }
#stickyPanel h3 { font-size: var(--fs-l); font-weight:900; color:var(--ink); margin-bottom:8px; }
.color-row { display:flex; gap:10px; margin-bottom:16px; margin-top:12px; }
.color-swatch { width:26px; height:26px; cursor:pointer; border:2px solid transparent; transition:border-color .12s; border-radius:50%;}
.color-swatch:hover,.color-swatch.sel { border-color:var(--ink); }
#addStickyBtn { font-family:'DM Mono',monospace; font-size: var(--fs-m); font-weight:600; letter-spacing:.15em; text-transform:uppercase; padding:10px 0; cursor:pointer; background:var(--ink); color:var(--bg); border:none; width:100%; transition:background .15s; border-radius:4px;}
#addStickyBtn:hover { background:var(--accent); }

/* ══ VECTOR SCENE (Restored perfectly to original size) ══ */
#scene { width: 100%; height: 100%; max-width: 900px; max-height: 650px; display: flex; align-items: center; justify-content: center; }
#scene svg { width: 100%; height: 100%; }

.dl-stroke { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.dl-fill { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: var(--bg); }
.dl-accent { fill: var(--ink); opacity: 0.1; transition: opacity 0.3s; }
body.dark .dl-accent { opacity: 0.2; fill: var(--ink-faint); }

@keyframes screen-glow { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.15; } }
.screen-glow { animation: screen-glow 4s ease-in-out infinite; fill: var(--ink); }
body.dark .screen-glow { fill: #FFF; opacity: 0.1; animation: screen-glow-dark 4s ease-in-out infinite; }
@keyframes screen-glow-dark { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.25; } }

@keyframes pendulum { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes pendulum-alt { 0%, 100% { transform: rotate(1.2deg); } 50% { transform: rotate(-1.5deg); } }
.pendulum-1 { animation: pendulum 5s ease-in-out infinite; transform-origin: 720px 0px; }
.pendulum-2 { animation: pendulum-alt 6.5s ease-in-out infinite; transform-origin: 770px 0px; animation-delay: -1s; }
.pendulum-3 { animation: pendulum 4.8s ease-in-out infinite; transform-origin: 820px 0px; animation-delay: -2.5s; }

@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes sway-reverse { 0%, 100% { transform: rotate(1.5deg); } 50% { transform: rotate(-1.5deg); } }
.leaf-1 { animation: sway 6s ease-in-out infinite; transform-origin: 490px 240px; }
.leaf-2 { animation: sway-reverse 7s ease-in-out infinite; transform-origin: 490px 240px; }

@keyframes rain-drop { 0% { transform: translateY(-20px); opacity: 0; } 20% { opacity: 0.4; } 80% { opacity: 0.4; } 100% { transform: translateY(220px); opacity: 0; } }
.rain-line { stroke: var(--ink-faint); stroke-width: 1.5; stroke-linecap: round; animation: rain-drop linear infinite; opacity: 0; }

/* ══ QUOTE BANNER ══ */
.quote-banner {
  font-family: 'DM Mono', monospace;
  color: var(--ink); 
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  max-width: 600px; 
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
body.dark .quote-banner { color: var(--ink); } 
.quote-banner.visible { opacity: 1; }

.quote-text { font-weight: 600; text-align: center; transition: font-size 0.3s ease; } 
.quote-author { font-size: var(--fs-s); font-style: italic; font-weight: 400; opacity: 0.8; }

/* ══ BUY ME A COFFEE BUTTON ══ */
.bmc-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background-color: var(--accent);
  color: var(--bg);
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 15px 26px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 1000;
}
.bmc-btn:hover { transform: translateY(-3px); background-color: var(--ink); }
body.dark .bmc-btn { color: var(--bg); }


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT — Mobile First
   Breakpoints:
     ≤ 767px   → mobile (phone)
     768–1023px → tablet / iPad
     1024–1279px → small laptop
     ≥ 1280px  → desktop (existing layout, untouched)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Small Laptop (1024–1279px): tighten columns, keep 3-col grid ── */
@media (max-width: 1279px) and (min-width: 1024px) {
  #shell {
    grid-template-columns: 300px 1fr 280px;
  }
  #hdr-l { padding: 22px 0 0 22px; }
  #hdr-r { padding: 22px 22px 0 0; }
  #mid-l { padding: 16px 16px 16px 22px; }
  #mid-r { padding: 0 22px 10px 10px; }

  #ftr-block { left: 300px; right: 280px; }

  #spotifyFrame { height: 300px; }
  .site-title { font-size: clamp(28px, 3.2vw, 40px); }
}

/* ── Tablet / iPad LANDSCAPE (768–1279px wide, landscape): 2-col layout ── */
@media (max-width: 1279px) and (min-width: 768px) and (orientation: landscape) {

  html, body { overflow: auto; height: auto; }

  /* 2-column grid: left panel | right panel */
  #shell {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }

  /* Header row */
  #hdr-l { grid-column: 1; grid-row: 1; padding: 24px 0 0 24px; }
  #hdr-c { display: none; }                /* hide quote banner */
  #hdr-r { grid-column: 2; grid-row: 1; padding: 24px 24px 0 0; }

  /* Content row */
  #mid-l { grid-column: 1; grid-row: 2; padding: 20px 16px 20px 24px; gap: 20px; }
  #mid-c { display: none; }               /* hide decorative SVG scene */
  #mid-r { grid-column: 2; grid-row: 2; padding: 0 24px 20px 16px; overflow: visible; }

  /* Footer — reset to normal flow since body scrolls in this breakpoint */
  #ftr-block { 
    position: static; 
    padding: 12px 20px 24px; 
    background: var(--bg);
    pointer-events: auto;
  }

  /* Spotify embed */
  #spotifyFrame { height: 320px; }

  /* Right panel – prefs alignment */
  .prefs-container { margin-top: 12px; align-items: flex-start; }

  /* Genre pills – more breathing room */
  #genrePicker { margin-top: 14px; }
  .mood-pills { gap: 8px; }
  .pill { padding: 6px 12px; font-size: 11px; }

  /* Sound mixer items */
  .fx-item { margin-bottom: 8px; }

  /* BMC button */
  .bmc-btn { bottom: 20px; left: auto; right: 20px; font-size: 13px; padding: 13px 20px; }
}

/* ── Tablet / iPad PORTRAIT (any tablet held vertically): full mobile layout ── */
/* Targets iPads in portrait: min-width 600px covers iPad Mini, Air, Pro all sizes */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {

  html, body { overflow: auto; height: auto; }

  #shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    position: relative;
  }

  /* Header */
  #hdr-l { padding: 24px 0 0 24px; order: 1; width: 60%; }
  #hdr-r { padding: 24px 24px 0 0; order: 2; gap: 10px; position: absolute; top: 0; right: 0; }
  #hdr-c { display: none; }

  .site-title { font-size: clamp(32px, 5vw, 48px); }

  /* Content */
  #mid-l {
    order: 3;
    padding: 24px 24px 0 24px;
    gap: 20px;
    width: 100%;
  }

  #mid-c { display: none; }

  #mid-r {
    order: 4;
    padding: 20px 24px 20px 24px;
    width: 100%;
    overflow: visible;
  }

  /* Spotify embed — taller on larger iPad screens */
  #spotifyFrame { height: 380px; }

  /* Prefs row */
  .prefs-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 8px;
    gap: 12px;
  }

  /* Playlist items */
  .plist-item { padding: 10px 10px; }
  .plist-name { font-size: 14px; }
  .plist-desc { font-size: 12px; }

  /* Sound mixer */
  .fx-play { width: 28px; font-size: 18px; }
  .fx-item { margin-bottom: 12px; }
  input[type=range].fx-fader { height: 4px; }
  input[type=range].fx-fader::-webkit-slider-thumb { width: 18px; height: 18px; }
  input[type=range].fx-fader::-moz-range-thumb { width: 18px; height: 18px; }

  /* Genre pills */
  .mood-pills { gap: 10px; }
  .pill { padding: 8px 14px; font-size: 13px; }
  #genrePicker { margin-top: 14px; }

  /* Pomodoro modal */
  #pomodoroBox { min-width: unset; width: calc(100vw - 80px); max-width: 480px; padding: 36px 32px; }

  /* Sticky panel */
  #stickyPanel { top: 72px; right: 24px; }

  /* Sticky notes */
  .sticky { min-width: 180px; min-height: 200px; }

  /* Footer — reset to normal flow since body scrolls in this breakpoint */
  #ftr-block { position: static; padding: 16px 24px 100px; background: var(--bg); pointer-events: auto; }
  .ftr-desc, .ftr-text { font-size: 10px; }

  /* BMC button */
  .bmc-btn { bottom: 24px; left: auto; right: 24px; font-size: 13px; padding: 13px 20px; }

  /* Tool buttons */
  .tool-btn { padding: 6px; }
  .tool-btn svg { width: 26px; height: 26px; }
}

/* ── Mobile (≤ 767px): single column, scrollable, minimal chrome ── */
@media (max-width: 767px) {

  html, body { overflow: auto; height: auto; }

  #shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
  }

  /* ── Header: logo left, tools right, compact ── */
  #hdr-l { padding: 20px 0 0 20px; order: 1; }
  #hdr-r { padding: 20px 20px 0 0; order: 2; gap: 14px; }
  #hdr-c { display: none; }               /* hide quote banner */

  /* Arrange header as a flex row */
  #shell > #hdr-l,
  #shell > #hdr-r {
    flex-shrink: 0;
  }

  /* Wrap header items in a real row using a pseudo-flex trick via order + abs. */
  /* Because hdr-l and hdr-r are siblings in #shell (flex col), we use a
     dedicated mobile header wrapper added via the grid becoming flex: */
  #hdr-l { width: 50%; }
  #hdr-r { position: absolute; top: 0; right: 0; }

  /* Make shell relative so hdr-r absolute positioning works */
  #shell { position: relative; padding-top: 0; }

  /* Title sizing */
  .site-title { font-size: clamp(30px, 8vw, 44px); }

  /* ── Left column: player + playlists ── */
  #mid-l {
    order: 3;
    padding: 20px 20px 0 20px;
    gap: 16px;
    width: 100%;
  }

  /* ── Centre: hide decorative illustration ── */
  #mid-c { display: none; }

  /* ── Right column: sounds + moods, below player ── */
  #mid-r {
    order: 4;
    padding: 16px 20px 16px 20px;
    width: 100%;
    overflow: visible;
  }

  /* Prefs row alignment */
  .prefs-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: 8px;
    gap: 12px;
  }

  /* Spotify iframe full width, comfortable height */
  #spotifyFrame { height: 380px; }

  /* Playlist items a touch larger for fat fingers */
  .plist-item { padding: 10px 8px; }
  .plist-name { font-size: 13px; }
  .plist-desc { font-size: 11px; }

  /* Sound mixer: bigger touch targets */
  .fx-play { width: 28px; font-size: 18px; }
  .fx-item { margin-bottom: 10px; }
  input[type=range].fx-fader { height: 4px; }
  input[type=range].fx-fader::-webkit-slider-thumb { width: 16px; height: 16px; }
  input[type=range].fx-fader::-moz-range-thumb { width: 16px; height: 16px; }

  /* Genre pills */
  .mood-pills { gap: 8px; }
  .pill { padding: 7px 13px; font-size: 12px; }
  #genrePicker { margin-top: 12px; }

  /* Pomodoro modal full-screen on mobile */
  #pomodoroBox { min-width: unset; width: calc(100vw - 48px); padding: 28px 24px; }

  /* Sticky panel near top-right */
  #stickyPanel { top: 60px; right: 16px; min-width: 200px; }

  /* Sticky notes should not be dragged off-screen – position near centre */
  /* (JS handles initial pos; CSS just constrains size) */
  .sticky { min-width: 160px; min-height: 180px; }

  /* Footer — reset to normal flow since body scrolls on mobile */
  #ftr-block { position: static; padding: 16px 20px 80px; background: var(--bg); pointer-events: auto; }  /* extra bottom pad for BMC btn */
  .ftr-desc, .ftr-text { font-size: 9px; }

  /* BMC button – smaller, a bit higher */
  .bmc-btn { bottom: 20px; left: auto; right: 16px; font-size: 13px; padding: 13px 20px; }

  /* Pomodoro & sticky tool buttons: slightly larger tap area */
  .tool-btn { padding: 6px; }
  .tool-btn svg { width: 26px; height: 26px; }

  /* Tweak 2: Hide Pomodoro and Sticky Notes on mobile */
  .tool-btn[title="Pomodoro Timer"],
  .tool-btn[title="Sticky Notes"] { display: none !important; }

  /* Tweak 2: Fix hdr-r so remaining icons don't overlap the logo */
  #hdr-r {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 24px;
  }
}

/* ── Very small phones (≤ 374px) ── */
@media (max-width: 374px) {
  .site-title { font-size: 26px; }
  #spotifyFrame { height: 340px; }
  .pill { padding: 6px 10px; font-size: 11px; }
}
/* ══════════════════════════════════════════════════════════════════════
   DUAL-MODE: SOURCE TOGGLE BUTTONS (Spotify / YouTube)
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   DUAL-MODE: SOURCE ICON BUTTONS (Spotify / YouTube)
   ══════════════════════════════════════════════════════════════════════ */

.src-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;          /* circular default — overridden for YouTube below */
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.src-icon-btn:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

.src-icon-btn.active {
  opacity: 1;
  border-color: var(--ink);
}

/* Spotify gets a circle outline */
#btnSpotify       { border-radius: 50%; }
/* YouTube gets a rounded-rect outline matching its play button shape */
#btnYoutube       { border-radius: 6px; }

/* Theme-adaptive brand logos: show/hide correct variant */
.brand-logo { display: none; }

/* Light mode: show black logos */
.spotify-logo-light { display: block; }
.yt-logo-light      { display: block; }

/* Dark mode: swap to white logos */
body.dark .spotify-logo-light { display: none; }
body.dark .spotify-logo-dark  { display: block; }
body.dark .yt-logo-light      { display: none; }
body.dark .yt-logo-dark       { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   YOUTUBE CUSTOM CARD  (#ytCard)
   Lives in the exact same slot as #spotifyFrame — 3:4 aspect ratio
   ══════════════════════════════════════════════════════════════════════ */

#ytCard {
  display: none; /* shown via JS when in youtube mode */
  flex-direction: column;
  width: 100%;
  height: 352px; /* matches #spotifyFrame height */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--shadow);
  flex-shrink: 0;
  background: var(--ink);
}

/* Top 3/4 — artwork */
#ytArtwork {
  position: relative;
  flex: 3;
  overflow: hidden;
  background: var(--ink);
}

#ytCover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.4s;
}

#ytCoverFallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
}

/* Now-playing overlay at bottom of artwork */
#ytNowPlaying {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 16px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#ytPlaylistName {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-m);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ytSourceTag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Bottom 1/4 — controls */
#ytControls {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--ink);
}

.yt-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  transition: color 0.15s, transform 0.12s;
  padding: 6px;
  border-radius: 50%;
}

.yt-ctrl-btn:hover {
  color: #fff;
  transform: scale(1.12);
}

.yt-ctrl-btn svg {
  width: 18px;
  height: 18px;
}

/* Main play/pause button — larger */
.yt-play-main {
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,0.12);
  border-radius: 50% !important;
  color: #fff !important;
  transition: background 0.15s, transform 0.12s !important;
}

.yt-play-main:hover {
  background: rgba(255,255,255,0.22) !important;
  transform: scale(1.08) !important;
}

.yt-play-main svg {
  width: 20px;
  height: 20px;
}

/* Dark mode — card colors stay dark (it's a media card) */
body.dark #ytCard { background: #0d0d0d; }
body.dark #ytArtwork { background: #0d0d0d; }
body.dark #ytControls { background: #0d0d0d; }

/* ══════════════════════════════════════════════════════════════════════
   MODE SWITCH OVERLAY
   ══════════════════════════════════════════════════════════════════════ */

.mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mode-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.mode-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.overlay-icon {
  width: 80px;
  height: 80px;
  animation: overlayPulse 1.2s ease-in-out infinite;
}

.overlay-icon svg {
  width: 100%;
  height: 100%;
}

.overlay-text {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@keyframes overlayPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.06); opacity: 0.8; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES FOR DUAL-MODE
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet landscape — match spotifyFrame height override */
@media (max-width: 1279px) and (min-width: 768px) and (orientation: landscape) {
  #ytCard { height: 320px; }
}

/* Tablet portrait */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {
  #ytCard { height: 380px; }
}

/* Mobile */
@media (max-width: 767px) {
  #ytCard { height: 380px; }
  .source-toggle { border-radius: 7px; }
}

/* Very small phones */
@media (max-width: 374px) {
  #ytCard { height: 340px; }
}