* {
  /* ===== CSS FOUNDATION ===== */
  box-sizing: border-box;
}
html {
  height: 100%; /* Keep html at 100% of viewport */
}
body {
  min-height: 100%; /* Make body at least 100% of html, but allow it to grow */
  /* Add dark textured background to eliminate white space */
  background: #0b0b0b url("../assets/textures/dirty-paper.png") center/cover
    fixed; /* This will be overridden by .pg-mode in PG mode */
  margin: 0;
}

/* ===== PG MODE THEME OVERRIDES ===== */
body.pg-mode {
  /* Use unicorn texture background for PG mode - tileable for mobile and desktop */
  background: #f8f9fa url("../assets/textures/pretty.png") center/cover
    no-repeat !important;
  /* Make background fixed like shit mode */
  background-attachment: fixed !important;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 920px; /* reduced from 1040 */
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== DESIGN TOKENS ===== */
:root {
  /* ===== FONTS (keep your vibe; change body font for readability) */
  --font-anarchy: "Anarchy"; /* title / big decorative */
  --font-punk: "HitMePunk04"; /* tabs & headings (your vibe) */
  --font-punk2: "Punk2"; /* prize modal subtitle */
  --font-song: "Song"; /* existing body fallback */
  --font-wrong: "Wrong"; /* label/display fallback */
  --font-stack: "Helvetica Neue Thin", Helvetica, Arial, sans-serif;

  /* choose a readable UI body font that won't kill the vibe */
  --font-body: var(--font-song), var(--font-stack);
  --font-label: var(--font-punk); /* preserve tab/title look */
  --font-ui: var(--font-wrong), var(--font-stack); /* unified UI elements */

  /* ===== SIZING TOKENS (one place to tune scale) */
  --small-ui: 1.05rem; /* tiny helpers (timer / completed) */
  --size-body: 1.125rem; /* base body text */
  --size-card-body: 1.0625rem; /* text inside cards */
  --size-label: 0.95rem; /* small labels/buttons */
  --size-tab: clamp(1.4rem, 2.6vw, 2.4rem); /* tab text scale */
  --size-title-lg: clamp(3rem, 8.5vw, 11.5rem); /* main title big line */

  /* ===== SPACING / LAYOUT */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 18px;
  --space-lg: 32px;
  --container-max: 920px; /* change to 1200px for wider layout */

  /* ===== COLORS / SURFACES (change these for a different mood) */
  --ink: #111111; /* main text */
  --ink-soft: #2a2a2a; /* secondary text */
  --paper: #f2efe7; /* card / paper surface */
  --paper-dark: #e7e1d3;
  --paper-border: rgba(0, 0, 0, 0.08);

  /* accents */
  --accent-red: #c51616;
  --accent-red-dark: #9f1010;

  /* card backgrounds (layerable) */
  --card-bg: linear-gradient(180deg, #f6f4ef 0%, #ece8dd 100%);
  --card-bg-strong: linear-gradient(180deg, #f1efe9 0%, #e3e0d6 100%);
  --card-bg-muted: linear-gradient(180deg, #f9f8f6 0%, #efebe2 100%);

  /* ===== SHADOWS / RADIUS / TRANSITIONS */
  --shadow-strong: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 10px 22px rgba(0, 0, 0, 0.25);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --ease-quick: 150ms ease;

  /* ===== Z-INDEX SCALE (small, documented) */
  --z-base: 0;
  --z-surface: 10;
  --z-modal: 1000;
  --z-top: 10000;
}

/* ===== GRIME? ===== */

/* grime overlay on top of everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/textures/grime-overlay.png");
  mix-blend-mode: burn; /* keeps it gritty */
  z-index: 0; /* KEY: behind content */
}

/* Hide grime in PG mode */
.pg-mode::before {
  display: none;
}

/* ===== LAYOUT GRID ===== */
/* center items inside the grid so cards don't stretch edge-to-edge */
.layout {
  display: grid;
  grid-template-areas:
    "header"
    "tabs"
    "tasks"
    "completed"
    "music";
  gap: 20px;
  justify-items: center; /* center grid children */
}

.header {
  grid-area: header;
  /* ensure header content is centered without breaking other layout styles */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

/* Ensure header/title use the Bangers font and are centered/visible */
.header {
  position: relative;
  z-index: 60 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: auto;
}

.header .title {
  /* force the Google font (fallback list included) */
  font-family:
    "Bangers",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-weight: 400;
  display: block;
  text-align: center;
  margin: 0.25rem 0 0.75rem;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #f2efe8; /* tweak to taste so it contrasts with the background */
  font-size: clamp(34px, 6vw, 96px);
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ensure each title line stacks */
.title-line {
  display: block;
}

/* style the title "paper" look */
.title-line {
  display: inline-block;
  padding: 6px 18px;
  margin: 0 0 8px;
  /* Background removed for pop effect */
  border-radius: 2px;
  /* Add punk effects to make it pop */
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.8),
    -1px -1px 0 rgba(255, 255, 255, 0.3),
    0 0 20px rgba(197, 22, 22, 0.4);
  /* Add outline/stroke effect */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* size tuning - make it BIGGER */
.title-line:first-child {
  font-size: clamp(3rem, 9vw, 7rem) !important;
}
.title-line:last-child {
  font-size: clamp(1.5rem, 4vw, 3.5rem) !important;
}

.tabs {
  grid-area: tabs;
}

/* card grid areas */
.card--tasks {
  grid-area: tasks;
}
.card--completed {
  grid-area: completed;
}
.music {
  grid-area: music;
}

/* ===== HEADER + TITLE ===== */
.header {
  margin-bottom: 8px;
  text-align: center;
}

.title {
  font-family:
    "Bangers",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  text-align: center;
  margin: 0.25rem 0 0.75rem;
  line-height: 1;
  letter-spacing: 0.5px;
  /* responsive sizing */
  font-size: clamp(28px, 6vw, 64px);
  /* keep stacking title-line vertically */
  display: block;
}

.title-line {
  display: block;
  width: fit-content;
  padding: 6px 14px 8px;
  /* Remove background for pop effect */
  margin-bottom: 8px;
}

/* DSIGDT - Make it BIGGER and more punk */
.title-line:first-child {
  font-family: var(--font-anarchy);
  /* BIGGER responsive sizing for maximum pop */
  font-size: clamp(5rem, 13vw, 15rem);
  margin-bottom: 10px;
  line-height: 0.95; /* tight but readable */
  text-align: center;
}

.title-line:last-child {
  font-family: var(--font-punk);
  /* BIGGER sizing for subtitle */
  font-size: clamp(3rem, 8vw, 10rem);
  text-align: center;
}

/* ===== TABS ===== */
.tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px auto 22px;
  padding: 8px 24px; /* increased side padding for more whitespace */
  width: min(100%, 920px);
  border-radius: 48px;
  background: rgba(242, 239, 231, 0.95); /* softer paper surface */
  color: var(--ink);
  position: relative;
  flex-wrap: wrap; /* allow multiple rows if needed */
}

.tab {
  background: transparent;
  border: none;
  padding: 8px 14px; /* increased padding for better spacing */
  font: inherit;
  font-family: var(--font-ui); /* keep the vibe */
  letter-spacing: 3px; /* gentler spacing */
  text-transform: uppercase;
  opacity: 0.5;
  cursor: pointer;
  position: relative;
  font-size: var(--size-tab);
  color: var(--ink);
  white-space: normal; /* allow wrapping inside a tab if needed */
  transition: all 0.2s ease;
}

.tab:hover {
  opacity: 0.75;
  transform: translateY(-1px);
}

.tab + .tab::before {
  content: "|";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
}

.tab--timer {
  background: rgba(197, 22, 22, 0.1);
  border-radius: 8px;
  margin-left: auto; /* Push to the right */
}

.tab--timer:hover {
  background: rgba(197, 22, 22, 0.2);
  opacity: 1;
}

.tab--timer::before {
  display: none; /* No separator before timer button */
}

@media (max-width: 420px) {
  .tab {
    letter-spacing: 1.6px;
    padding: 6px 8px;
    font-size: clamp(1.1rem, 4.2vw, 1.5rem);
  }

  /* Make card titles bigger on mobile */
  .card--tasks .card-title,
  .card--completed .card-title {
    font-size: clamp(2rem, 5vw, 2.8rem) !important;
  }

  /* Make SHIT I DID bigger on mobile */
  .card-title--big {
    font-size: clamp(2.8rem, 8vw, 4rem);
  }

  /* Make timer display bigger on mobile */
  .timer-display {
    font-size: clamp(5.5rem, 12vw, 7rem) !important;
  }
}

/* Mobile: make title bigger and tighter */
@media (max-width: 420px) {
  .title-line:first-child {
    font-size: clamp(4.2rem, 14vw, 9rem) !important;
    line-height: 0.9;
    margin-bottom: 6px;
  }
  .title-line:last-child {
    font-size: clamp(1.6rem, 6.5vw, 2.6rem) !important;
    line-height: 0.95;
    margin-top: -6px; /* bring lines closer */
  }
  /* Reduce the tabs' visual bulk on small screens */
  .tabs {
    padding: 6px 8px;
    gap: 8px;
    border-radius: 32px;
    margin-bottom: 18px;
  }
}

.tab--active {
  opacity: 1;
  position: relative;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.15),
    -1px -1px 0 rgba(255, 255, 255, 0.2);
}

.tab--active::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -14px;
  height: 10px;
  background: var(--accent-red);
  border-radius: 999px;

  /* makes it feel less perfect */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  opacity: 0.95;
}

/* ===== CARDS (single, simplified source of truth) ===== */
.card {
  /* basic surface + spacing */
  background-color: var(--paper);
  color: inherit;
  padding: 20px;
  margin: 0 auto 18px;
  border-radius: 14px;
  border: 1px solid var(--paper-border);
  position: relative;
  font-size: var(--size-card-body);
  font-family: var(--font-body), var(--font-stack);
  width: 100%;
  max-width: 820px;
  line-height: 1.35;
}

/* card title baseline */
.card-title {
  margin: 0 0 12px;
  font-family: var(--font-label), var(--font-stack);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

/* Override: remove white border and unify textured cards */
.card--tasks,
.card--completed {
  border: none !important;
  background-color: transparent !important;
  background-image: url("../assets/textures/dirty-paper.png") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35) !important;
  max-width: 820px !important; /* Same width for both sections */
  padding: 14px 16px !important;
  /* Add torn/ripped edge border effect for shit mode */
  position: relative;
  clip-path: polygon(
    0% 2%,
    2% 0%,
    4% 2%,
    6% 0%,
    8% 2%,
    10% 0%,
    12% 2%,
    14% 0%,
    16% 2%,
    18% 0%,
    20% 2%,
    22% 0%,
    24% 2%,
    26% 0%,
    28% 2%,
    30% 0%,
    32% 2%,
    34% 0%,
    36% 2%,
    38% 0%,
    40% 2%,
    42% 0%,
    44% 2%,
    46% 0%,
    48% 2%,
    50% 0%,
    52% 2%,
    54% 0%,
    56% 2%,
    58% 0%,
    60% 2%,
    62% 0%,
    64% 2%,
    66% 0%,
    68% 2%,
    70% 0%,
    72% 2%,
    74% 0%,
    76% 2%,
    78% 0%,
    80% 2%,
    82% 0%,
    84% 2%,
    86% 0%,
    88% 2%,
    90% 0%,
    92% 2%,
    94% 0%,
    96% 2%,
    98% 0%,
    100% 2%,
    100% 98%,
    98% 100%,
    96% 98%,
    94% 100%,
    92% 98%,
    90% 100%,
    88% 98%,
    86% 100%,
    84% 98%,
    82% 100%,
    80% 98%,
    78% 100%,
    76% 98%,
    74% 100%,
    72% 98%,
    70% 100%,
    68% 98%,
    66% 100%,
    64% 98%,
    62% 100%,
    60% 98%,
    58% 100%,
    56% 98%,
    54% 100%,
    52% 98%,
    50% 100%,
    48% 98%,
    46% 100%,
    44% 98%,
    42% 100%,
    40% 98%,
    38% 100%,
    36% 98%,
    34% 100%,
    32% 98%,
    30% 100%,
    28% 98%,
    26% 100%,
    24% 98%,
    22% 100%,
    20% 98%,
    18% 100%,
    16% 98%,
    14% 100%,
    12% 98%,
    10% 100%,
    8% 98%,
    6% 100%,
    4% 98%,
    2% 100%,
    0% 98%
  );
}

/* stronger accent for the timer card: layered radial + texture */
.card--timer {
  background-image:
    radial-gradient(rgba(197, 22, 22, 0.06), rgba(0, 0, 0, 0) 35%),
    url("../assets/textures/dirty-paper.png") !important;
  background-blend-mode: multiply !important;
  position: relative;
  transition: all 0.3s ease;
  /* Add sass and love with enhanced borders and shadows */
  border: 3px solid rgba(197, 22, 22, 0.15) !important;
  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

/* Pulsing border when timer is running */
.card--timer.timer--running {
  animation: timerPulse 2s ease-in-out infinite;
  box-shadow:
    0 0 0 3px rgba(197, 22, 22, 0.3),
    0 16px 30px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(197, 22, 22, 0.2) !important;
}

@keyframes timerPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(197, 22, 22, 0.3),
      0 16px 30px rgba(0, 0, 0, 0.35),
      0 0 20px rgba(197, 22, 22, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(197, 22, 22, 0.5),
      0 18px 35px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(197, 22, 22, 0.4);
  }
}

/* Single rule to control the two card titles together */
.card--tasks .card-title,
.card--completed .card-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: 2px;
  font-family: var(--font-label), var(--font-stack);
}

/* Optional helper for experimenting with a really large card title */
.card-title--big {
  /* Use HitMePunk04 font for "SHIT I DID:" title */
  font-family: var(--font-punk);
  font-size: clamp(2.8rem, 7vw, 8rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #000000;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.2),
    -1px -1px 0 rgba(255, 255, 255, 0.15);
}

/* ===== MAIN LAYOUT ===== */
.main {
  display: contents;
}

.task-text {
  font-family: var(--font-ui);
  font-size: 2rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0.3px;
}

.task-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

/* fix background */

.task-input {
  font-family: var(--font-ui);
  border: 1px solid var(--paper-border);
  background: #fff;
  padding: 10px 12px;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  border-radius: 8px;
}

.task-add-btn {
  font-family: var(--font-ui);
  background: var(--accent-red);
  color: #fff;
  border: 1px solid var(--accent-red-dark);

  /* slightly smaller hit area to be less dominant */
  padding: 10px 14px;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  letter-spacing: 1px;
  text-transform: uppercase;

  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(197, 22, 22, 0.12);
  transition:
    transform var(--ease-quick),
    box-shadow var(--ease-quick);
  cursor: pointer;
}

.task-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(197, 22, 22, 0.2);
}

.task-add-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(197, 22, 22, 0.1);
}

.btn {
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-ui);
  border: none;
  padding: 12px 24px;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn--small {
  padding: 6px 10px;
  font-weight: 800;
}

/* Primary button for prize modal */
.btn--primary {
  background: var(--accent-red);
  color: #fff;
  border: 2px solid var(--accent-red-dark);
  padding: 16px 32px;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow:
    0 6px 16px rgba(197, 22, 22, 0.3),
    0 0 20px rgba(197, 22, 22, 0.2);
  animation: fadeSlideIn 0.5s ease-out 0.8s backwards;
  margin-top: 12px;
}

.btn--primary:hover {
  background: var(--accent-red-dark);
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 10px 24px rgba(197, 22, 22, 0.4),
    0 0 30px rgba(197, 22, 22, 0.3);
}

.btn--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 4px 10px rgba(197, 22, 22, 0.3),
    0 0 15px rgba(197, 22, 22, 0.2);
}

.linkish {
  font-family: var(--font-ui);
  display: flex;
  justify-content: center;
  font-size: clamp(1rem, 1.5vw, 2rem);
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  transition: all 0.2s ease;
}

.linkish:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.helper-text--tiny {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-top: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.card--timer .btn {
  background: var(--ink);
  color: #fff;
}

/* CLOCK TIMER */
.card--timer .timer-display,
.timer-display {
  font-family: var(--font-anarchy);

  /* unified, override-safe rule for timer digits */
  font-size: clamp(4.6rem, 8vw, 6rem); /* bigger and responsive */
  font-weight: 900;
  line-height: 1;
  color: var(--accent-red);
  letter-spacing: 1px;
  text-align: center;
  margin: 12px 0 8px;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.12),
    0 0 10px rgba(197, 22, 22, 0.3);
  transition: all 0.3s ease;
}

/* Breathing animation when timer is running */
.timer-display.timer--running {
  animation: timerBreath 1.5s ease-in-out infinite;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.12),
    0 0 20px rgba(197, 22, 22, 0.6),
    0 0 30px rgba(197, 22, 22, 0.4);
}

@keyframes timerBreath {
  0%,
  100% {
    transform: scale(1);
    text-shadow:
      1px 1px 0 rgba(0, 0, 0, 0.12),
      0 0 15px rgba(197, 22, 22, 0.5),
      0 0 25px rgba(197, 22, 22, 0.3);
  }
  50% {
    transform: scale(1.02);
    text-shadow:
      1px 1px 0 rgba(0, 0, 0, 0.12),
      0 0 25px rgba(197, 22, 22, 0.8),
      0 0 40px rgba(197, 22, 22, 0.5);
  }
}

/* ensure tiny helper labels are readable (uses your --small-ui token) */
.card--timer .field-label,
.card--timer .helper-text--tiny,
.card--timer .rules-callout {
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 2.01rem; /* bump label size */
  line-height: 1.3;
}

.timer-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.rules-callout {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 auto 12px; /* centers the block */
  text-align: center; /* centers the text */
  max-width: 800px; /* optional: keeps it tighter */
  font-size: 2rem; /* bigger text */
  font-family: var(--font-punk); /* swap if you want */
}

.custom-timer {
  margin: 10px 0 12px;
  display: grid;
  gap: 8px;
}

.custom-timer__controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.completed-groups--tabs {
  display: grid;
  /* show completed groups side by side on wider screens */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
  .completed-groups--tabs {
    /* Stack vertically on mobile - 1 column */
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .completed-groups--tabs {
    /* Stack vertically on mobile - 1 column */
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* fix */
.completed-groups--tabs .completed-group {
  background: rgba(255, 255, 255, 0.95);
  border: 2px dashed rgba(197, 22, 22, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
}

.completed-groups--tabs .completed-subheading {
  font-family: var(--font-ui);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.35rem;
  cursor: pointer;
  list-style: none;
  color: var(--accent-red);
}

.completed-groups--tabs .completed-subheading::-webkit-details-marker {
  display: none;
}

.completed-groups--tabs .completed-subheading::before {
  content: "▸ ";
  display: inline-block;
  transform: translateY(-1px);
  opacity: 0.9;
}

.completed-groups--tabs .completed-group[open] .completed-subheading::before {
  content: "▾ ";
}

.field-input {
  border: 1px solid var(--paper-border);
  padding: 6px 10px;
  min-width: 120px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
}

.timer-grid {
  display: grid;
  gap: 16px;
}

.timer-block__title {
  margin: 0 0 8px;
  text-align: center;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem); /* More consistent sizing */
  font-family: var(--font-ui);
  color: var(--accent-red);
}

.timer-block__hint {
  margin: 0 0 16px;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem); /* Smaller, clearer hint text */
  font-family: var(--font-ui);
  opacity: 0.85;
}

.timer-block__sub {
  font-family: var(--font-wrong) !important;
  margin: 14px 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1.5px;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--accent-red);
}

.timer-block__footer {
  margin: 16px 0 0;
  text-align: center;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-family: var(--font-label), var(--font-stack);
  color: #0a0909;
  padding: 10px;
  /* background: rgba(197, 22, 22, 0.08); */
  border-radius: 8px;
  border: 1px dashed rgba(197, 22, 22, 0.3);
}

.reset-global {
  margin: 10px 0 0;
  display: block;
  margin-left: auto;
}

.timer-selects {
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* Completed stats and progress tracking */
.completed-stat {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 2rem);
}

.completed-stat--center {
  font-family: var(--font-ui);
  text-align: center;
  width: 100%;
  letter-spacing: 1.5px;
}

.completed-stat__count {
  font-family: var(--font-anarchy);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  color: var(--accent-red);
  margin-right: 4px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}

/* Completed groups - mobile first: vertical stack */
.completed-groups {
  font-family: var(--font-ui);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 10px;
}

/* Desktop: horizontal grid with 4 columns */
@media (min-width: 768px) {
  .completed-groups {
    grid-template-columns: repeat(4, 1fr);
  }
}

.completed-subheading {
  font-size: 1.45rem;
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: 1.2px;
  font-family: var(--font-punk);
  color: var(--accent-red);
  text-align: center;
}

.completed-list {
  font-size: 1.1rem;
  font-family: var(--font-ui);
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
  color: var(--ink);
  line-height: 1.6;
}

.completed-list li {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hide music player */
.music {
  display: none !important;
  visibility: hidden !important;
}

/* ===== DESKTOP LAYOUT ===== */
@media (min-width: 1200px) {
  .app {
    max-width: 1400px;
  }

  .layout {
    grid-template-areas:
      "header header"
      "tabs tabs"
      "tasks tasks"
      "completed completed"
      "music music";
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ===== TASKS LIST ===== */
.task-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.task {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  transition:
    transform 0.06s ease,
    background 0.2s ease;
}

.task .task-row {
  flex: 1;
  min-width: 0;
}

.task-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-edit {
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.7);
  color: #111;
  border-radius: 8px;
  padding: 6px 8px;
  font-family: var(--font-ui), var(--font-stack);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.task-edit:hover {
  background: rgba(255, 255, 255, 0.92);
}

.task:hover {
  background: rgba(0, 0, 0, 0.05);
}

.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.task-checkbox {
  transform: translateY(0.5px);
  width: 18px;
  height: 18px;
  accent-color: var(--accent-red);
}

.task-row:last-child {
  border-bottom: none;
}

.task--selected {
  border: 2px solid var(--accent-red);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(197, 22, 22, 0.12);
  position: relative;
}

.task--selected::after {
  content: "IN PROGRESS";
  position: absolute;
  top: -11px;
  left: 12px;
  right: auto;
  font-size: 0.82rem;
  letter-spacing: 0.7px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
}

/* ===== TIMER CARD (layout) ===== */
.card--timer .field {
  font-size: 1.05rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.card--completed {
  padding: 20px 22px !important;
}

.field-label {
  font-size: var(--size-body);
  line-height: 1.3;
}

.field-select {
  border: 1px solid var(--paper-border);
  padding: 6px 8px;
  min-width: 180px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
}

/* Double-click hint */
.task-text {
  cursor: text;
  user-select: text;
}

.task-text[contenteditable="true"] {
  outline: 2px dashed rgba(197, 22, 22, 0.35);
  padding: 2px 4px;
  border-radius: 6px;
  cursor: text;
}

/* ===== FONTS ===== */
@font-face {
  font-family: "HitMePunk04";
  src:
    url("../assets/fonts/punk/punk.woff2") format("woff2"),
    url("../assets/fonts/punk/punk.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anarchy";
  src:
    url("../assets/fonts/anarchy/anarchy.woff2") format("woff2"),
    url("../assets/fonts/anarchy/anarchy.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Song";
  src:
    url("../assets/fonts/song/song.woff2") format("woff2"),
    url("../assets/fonts/song/song.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wrong";
  src:
    url("../assets/fonts/wrong/wrong.woff2") format("woff2"),
    url("../assets/fonts/wrong/wrong.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Punk2";
  src:
    url("../assets/fonts/punk2/hit-me-punk-07.woff2") format("woff2"),
    url("../assets/fonts/punk2/punk2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Modal overlay (ensure visible above app) */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001; /* above confetti (9999) */
  background: rgba(10, 10, 10, 0.65);
}

.modal-overlay.is-hidden {
  display: none;
}

.modal {
  background: var(--paper);
  color: #2663eb;
  padding: 0;
  border-radius: 1px;
  max-width: 460px;
  width: calc(100% - 40px);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-strong);
  animation: modalPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Responsive modal and gif */
.modal {
  width: min(540px, 96%);
  max-width: 540px;
  box-sizing: border-box;
  padding: 20px;
}

.modal-overlay {
  padding: 12px; /* keeps modal inset on small screens */
}

.prize-gif {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 18px;
  border-radius: 8px;
  object-fit: cover;
}

@keyframes modalPop {
  0% {
    transform: scale(0.5) rotate(-5deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.05) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* === USER: PRIZE MODAL OVERRIDES START === */
/* (custom prize modal styles begin here) */

/* ===== PRIZE MODAL TWEAKS (overrides and fixes) ===== */
#prizeModal {
  /* tighter modal so it never gets huge */
  max-width: 420px;
  width: min(94%, 420px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px 20px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Add punk/grunge styling - torn paper effect with strong border */
  border: 3px solid rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  /* Add torn edge effect with filter */
  position: relative;
}

#prizeModal::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2rem;
  animation: sparkle 2s ease-in-out infinite;
  z-index: 0;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.3;
    transform: rotate(0deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(180deg) scale(1.2);
  }
}

/* Make prize modal content pop above background */
#prizeModal > * {
  position: relative;
  z-index: 1;
}

/* Title: BIGGER and better centered with punk effects */
#prizeModal .modal-title {
  display: block;
  width: 100%;
  font-family: "Anarchy", var(--font-stack);
  /* MUCH BIGGER title */
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  margin: 8px 0 10px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--accent-red);
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.1),
    0 0 20px rgba(255, 215, 0, 0.3);
  animation: titleBounce 0.8s ease-out;
  position: relative;
}

/* Subtitle: Use Punk2 font with cool styling */
#prizeModal .modal-subtitle {
  font-family: var(--font-punk2);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 1.5px;
  margin: 8px 0;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(255, 255, 255, 0.3);
}

/* GIF: smaller and constrained to avoid dominating modal */
.modal img.prize-gif {
  max-width: 180px;
  width: 60%;
  height: auto;
  max-height: 22vh;
  margin: 6px auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

/* List: more readable spacing and increased letter spacing */
#prizeModal .prize-list {
  gap: 18px;
  padding: 0;
  margin: 8px 0 10px;
}

@keyframes titleBounce {
  0% {
    transform: scale(0.5) translateY(-30px);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) translateY(5px);
  }
  70% {
    transform: scale(0.95) translateY(-5px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

#prizeModal .prize-list li {
  font-family: "HitMePunk04", var(--font-stack);
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  line-height: 1.9;
  letter-spacing: 1.4px;
  margin: 0;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#prizeModal .modal-title-line1,
#prizeModal .modal-title-line2 {
  color: #0a0a0a;
  font-size: clamp(2.4rem, 6vw, 3rem);
  display: block;
  text-align: center;
}

#prizeModal li::before {
  content: none;
}

.prize-arrows {
  display: none;
}

.prize-note {
  text-align: center;
  font-family: var(--font-ui);
  color: #0a0a0a;
  margin: 4px 0 10px;
}

#prizeModal .prize-list li {
  color: #0a0a0a;
}

/* apply Punk2 to the prize subtitle text */
#prizeSubtitle {
  font-family: "Punk2", "Bangers", cursive, sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--accent-red);
}

/* make sure title scales nicely on phones */
/* make sure modal looks great on mobile */
@media (max-width: 420px) {
  #prizeModal {
    max-width: 88%;
    width: 88%;
    padding: 10px 12px;
    gap: 6px;
    max-height: 85vh;
    overflow-y: auto;
  }

  #prizeModal .modal-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  #prizeModal .modal-subtitle {
    font-size: clamp(0.8rem, 3vw, 1rem);
  }

  .modal img.prize-gif {
    max-width: 120px;
    width: 40%;
    max-height: 15vh;
  }

  #prizeModal .prize-list {
    gap: 4px;
    margin: 2px 0 4px;
  }

  #prizeModal .prize-list li {
    font-size: clamp(0.75rem, 1.6vw, 0.9rem);
    padding: 3px 5px;
  }

  .prize-roast {
    font-size: clamp(0.75rem, 1.6vw, 0.9rem) !important;
    padding: 4px 8px !important;
  }

  .prize-note {
    font-size: 0.75rem;
    margin: 2px 0 4px;
  }

  #prizeModal .prize-actions .btn {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
}

/* Prize list items - make them more exciting */
#prizeModal li {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  margin: 8px 0;
  padding-left: 0;
  position: relative;
  line-height: 1.4;
  opacity: 0;
  animation: listItemSlideIn 0.5s ease-out forwards;
  text-align: center;
}

/* Stagger animation for list items */
#prizeModal li:nth-child(1) {
  animation-delay: 0.3s;
}
#prizeModal li:nth-child(2) {
  animation-delay: 0.4s;
}
#prizeModal li:nth-child(3) {
  animation-delay: 0.2s;
}
#prizeModal li:nth-child(4) {
  animation-delay: 0.6s;
}
#prizeModal li:nth-child(5) {
  animation-delay: 0.7s;
}

@keyframes listItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#prizeModal li::before {
  content: none;
}

/* TUNE: modal + title sizing tweaks (mobile-friendly + bigger titles) */

/* VISUAL TUNES: bigger, tighter title + stronger card headings */
/* Tighten title padding and increase scale (desktop + mobile) */
.title-line {
  padding: 4px 8px !important;
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.35) !important;
}

.title-line:first-child {
  font-size: clamp(5rem, 13vw, 14rem) !important;
  line-height: 0.88;
  margin-bottom: 4px !important;
}

.title-line:last-child {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem) !important;
  line-height: 0.95;
  margin-top: -4px !important;
}

@media (max-width: 420px) {
  .title-line:first-child {
    font-size: clamp(4.5rem, 22vw, 9rem) !important;
    line-height: 0.86;
    margin-bottom: 6px !important;
  }
  .title-line:last-child {
    font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
    line-height: 0.95;
    margin-top: -6px !important;
  }
}

/* Make card titles more prominent */
.card-title {
  font-size: clamp(2.4rem, 4.2vw, 4.2rem) !important;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.card-title--big {
  font-size: clamp(3rem, 7vw, 8rem) !important;
}

/* Center timer grid content and make timer display feel centered */
.card--timer .timer-grid {
  justify-items: center;
  align-items: center;
}
.card--timer .timer-block {
  width: 100%;
  max-width: 420px; /* keeps blocks consistent */
  box-sizing: border-box;
}
.card--timer .timer-display {
  margin: 10px auto 8px !important;
  text-align: center;
}
.card--timer .timer-controls {
  justify-content: center !important;
}

/* Center and tighten timer headings + controls */
.timer-block__title {
  text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.45rem) !important;
  margin: 0 0 8px;
  color: var(--accent-red);
}

.card--timer .timer-selects,
.card--timer .timer-grid {
  display: grid;
  justify-items: center;
  align-items: start;
}

.card--timer .field-select {
  display: block;
  margin: 6px auto 10px;
  max-width: 360px;
  width: 88%;
}

.custom-timer__controls {
  justify-content: center !important;
  gap: 8px;
}
.custom-timer__controls .field-input {
  width: 96px;
  max-width: 40%;
  min-width: 64px;
  text-align: center;
}

/* Make card titles larger and more visible */
.card--tasks .card-title,
.card--timer .card-title,
.card--completed .card-title {
  font-size: clamp(2.6rem, 5vw, 5rem) !important;
  letter-spacing: 1.8px;
  text-align: center;
  color: var(--ink) !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

/* Ensure subtitle line is centered and tighter */
.title-line:last-child {
  display: block;
  width: 100%;
  text-align: center !important;
  margin-top: -6px !important;
}

/* Slightly reduce top padding near header to tighten layout */
.header {
  margin-bottom: 6px !important;
  padding-top: 6px;
}

/* FINAL OVERRIDES: balance title + tabs + desktop card widths */
/* Make the big title less extreme and ensure subtitle sits tightly beneath */
.title-line:first-child {
  font-size: clamp(4rem, 14vw, 9rem) !important; /* louder main line */
  line-height: 0.88;
  margin-bottom: 6px !important;
}
.title-line:last-child {
  font-size: clamp(2.4rem, 6vw, 4.2rem) !important; /* stretched subtitle */
  letter-spacing: 1.6px;
  line-height: 0.92;
  margin-top: -2px !important;
}

/* ===== ICON NAVIGATION GROUP (Top Right) ===== */
.icon-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-top);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.icon-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #0a0a0a;
  background:
    radial-gradient(circle at 30% 30%, #f8f5ed 0%, #e2dccc 70%) padding-box,
    url("../assets/textures/dirty-paper.png");
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(255, 255, 255, 0.15),
    0 0 0 2px #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
}

.icon-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    0 0 0 2px #0a0a0a;
}

.icon-button:active {
  transform: translateY(0) scale(0.98);
}

.icon-button__icon {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

/* Timer button specific styles */
.icon-button--timer.is-running {
  animation: timerGlow 1.3s ease-in-out infinite;
}

.icon-button--timer.timer--faint {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.icon-button--timer.timer--hidden {
  display: none;
}

/* Reset button red accent in shit mode */
.icon-button--reset {
  border-color: var(--accent-red-dark);
}

.icon-button--reset:hover {
  background: radial-gradient(circle at 30% 30%, #ffc9c9 0%, #ff8080 70%)
    padding-box;
}

/* Sound button muted state */
.icon-button--sound.muted .icon-button__icon {
  opacity: 0.5;
}

/* Mobile responsive - smaller icons, adjusted spacing */
@media (max-width: 640px) {
  .icon-nav {
    top: 12px;
    right: 12px;
    gap: 10px;
  }

  .icon-button {
    width: 48px;
    height: 48px;
    border-width: 2px;
  }

  .icon-button__icon {
    font-size: 1.5rem;
  }
}

/* Tablet responsive */
@media (max-width: 768px) and (min-width: 641px) {
  .icon-nav {
    top: 16px;
    right: 16px;
    gap: 11px;
  }

  .icon-button {
    width: 52px;
    height: 52px;
  }

  .icon-button__icon {
    font-size: 1.65rem;
  }
}

/* Legacy floating-timer styles kept for timer bubble positioning */
.floating-timer {
  /* No longer visible, but maintains structure for timer bubble */
  position: relative;
  display: inline-flex;
}

@keyframes timerGlow {
  0%,
  100% {
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.45),
      inset 0 0 0 2px rgba(255, 255, 255, 0.15),
      0 0 0 2px #0a0a0a,
      0 0 0 0 rgba(197, 22, 22, 0.5);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.5),
      inset 0 0 0 2px rgba(255, 255, 255, 0.2),
      0 0 0 3px #0a0a0a,
      0 0 20px 6px rgba(197, 22, 22, 0.4);
  }
}

.timer-bubble {
  position: absolute;
  top: -10px;
  right: -18px;
  background: #0a0a0a;
  color: var(--accent-red);
  border: 2px solid #f6f3ea;
  border-radius: 14px;
  padding: 6px 10px;
  font-family: var(--font-anarchy);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
  animation: flashTimer 1s steps(2, end) infinite;
}

.timer-bubble.is-hidden {
  display: none;
}

@keyframes flashTimer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@media (max-width: 640px) {
  .floating-timer {
    width: 56px;
    height: 56px;
    top: 14px;
    right: 14px;
  }
  .floating-timer__label {
    font-size: 0.75rem;
  }
  .timer-bubble {
    right: -10px;
    top: -6px;
  }
}

/* Timer Popup Modal Styling */
.modal--timer-popup {
  max-width: 600px;
  width: min(90%, 600px);
  background: url("../assets/textures/dirty-paper.png");
  background-blend-mode: multiply;
  color: #f3f1e9;
  border: 5px solid #0a0a0a;
  outline: 2px dashed rgba(243, 241, 233, 0.35);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 0 4px rgba(0, 0, 0, 0.6);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal--timer-popup .modal-title {
  font-family: var(--font-anarchy);
  font-size: clamp(0.6rem, 5vw, 6.8rem);
  text-align: center;
  letter-spacing: 3px;
  color: #111;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14);
  margin-bottom: 12px;
  margin-top: 8px;
}

.modal--timer-popup .timer-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.modal--timer-popup .timer-display {
  font-size: clamp(4.6rem, 9vw, 6.8rem);
  font-family: var(--font-anarchy);
  text-align: center;
  color: var(--accent-red);
  font-weight: 900;
  letter-spacing: 4px;
  margin: 16px 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.modal--timer-popup .timer-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.modal--timer-popup .btn--close {
  margin-top: 0;
}

.timer-block {
  background: rgba(243, 241, 233, 0.12);
  border: 2px solid rgba(243, 241, 233, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.timer-block .field-select {
  display: inline-block;
  margin: 6px auto 10px;
  width: 88%;
  max-width: 360px;
}

.timer-block__title {
  color: var(--accent-red);
  font-family: var(--font-ui);
  letter-spacing: 2px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important;
}

.timer-block__hint {
  color: #000000;
  text-align: center;

  padding: 4px 10px;
  border-radius: 10px;
  font-family: var(--font-wrong);
  font-size: clamp(1rem, 2.1vw, 1.2rem) !important;
}

.timer-selects select,
.modal--timer-popup .field-select,
.modal--timer-popup .field-input {
  appearance: none;
  background: #111;
  color: #f6f3ea;
  border: 2px solid #f6f3ea;
  border-radius: 14px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
}

.timer-selects select:focus,
.modal--timer-popup .field-select:focus,
.modal--timer-popup .field-input:focus {
  outline: 2px solid var(--accent-red);
  box-shadow:
    0 0 0 2px var(--accent-red),
    0 10px 16px rgba(0, 0, 0, 0.5);
}

.timer-block__sub {
  font-family: var(--font-wrong) !important;
  color: #000000;
}

.timer-block__footer {
  color: #000000;
  border: 1px dashed rgba(243, 241, 233, 0.4);
}

.btn--ghost {
  background: var(--ink);
  color: #ffffff;
  border: 2px solid #f6f3ea;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* On wide screens let the task/completed cards fill their grid columns (consistent lengths) */
@media (min-width: 1200px) {
  .card--tasks,
  .card--completed {
    max-width: none !important;
    width: 100% !important;
  }

  /* keep header aligned to card widths */
  .header .title {
    max-width: 820px;
  }

  .modal--timer-popup .timer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== FLOATING TIMER COUNTDOWN WIDGET ===== */
.floating-countdown {
  position: fixed;
  top: 22px;
  right: 100px;
  z-index: var(--z-top);
  background: #0d0d0d url("../assets/textures/dirty-paper.png");
  background-blend-mode: multiply;
  border: 4px solid #0a0a0a;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  cursor: grab;
  user-select: none;
  min-width: 180px;
  text-align: center;
  display: none;
}

.floating-countdown.is-visible {
  display: block;
}

.floating-countdown.is-dragging {
  cursor: grabbing;
  opacity: 0.9;
}

.floating-countdown__task {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: #f6f3ea;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.floating-countdown__time {
  font-family: var(--font-anarchy);
  font-size: clamp(2.8rem, 5vw, 4rem);
  color: var(--accent-red);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.2),
    0 0 20px rgba(197, 22, 22, 0.5);
  animation: flashTimer 1s steps(2, end) infinite;
}

.floating-countdown__pause {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #f6f3ea;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 6px;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.floating-countdown__pause:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 640px) {
  .floating-countdown {
    top: 14px;
    right: 100px;
    padding: 8px 12px;
    min-width: 140px;
  }
  .floating-countdown__time {
    font-size: clamp(2rem, 4vw, 3rem);
  }
}

/* ===== TIMER DONE MODAL IMPROVEMENTS ===== */
.modal--timer-done {
  background: #0d0d0d url("../assets/textures/dirty-paper.png");
  background-blend-mode: multiply;
  color: #f3f1e9;
  border: 5px solid #0a0a0a;
  text-align: center;
}

.modal--timer-done .modal-title {
  font-family: var(--font-anarchy);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--accent-red);
  letter-spacing: 3px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.modal--timer-done .modal-subtitle {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  letter-spacing: 1px;
  color: #f6f3ea;
}

.modal--timer-done .modal-hint {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: rgba(246, 243, 234, 0.7);
  margin: 8px 0 16px;
}

.timer-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

/* ===== SCROLLABLE DIAL PICKER ===== */
.dial-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 12px auto;
}

.dial-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dial-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(246, 243, 234, 0.6);
  margin-bottom: 4px;
  font-weight: 800;
}

.dial-scroll {
  width: 68px;
  height: 120px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border: 2px solid rgba(246, 243, 234, 0.3);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.dial-scroll:focus {
  outline: 2px solid var(--accent-red);
  border-color: var(--accent-red);
}

/* Hide scrollbar but keep scroll */
.dial-scroll::-webkit-scrollbar {
  width: 0;
  display: none;
}
.dial-scroll {
  scrollbar-width: none;
}

.dial-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(246, 243, 234, 0.35);
  scroll-snap-align: center;
  cursor: pointer;
  transition:
    color 0.15s,
    transform 0.15s;
  user-select: none;
}

.dial-item:hover {
  color: rgba(246, 243, 234, 0.7);
}

.dial-item--selected {
  color: #f6f3ea !important;
  font-size: 1.6rem;
  font-weight: 900;
  transform: scale(1.1);
  text-shadow: 0 0 12px rgba(246, 243, 234, 0.5);
}

.dial-sep {
  font-family: var(--font-ui);
  font-size: 2rem;
  font-weight: 900;
  color: rgba(246, 243, 234, 0.5);
  margin: 0 2px;
  padding-top: 20px; /* Align with dial content area */
}

@media (max-width: 420px) {
  .dial-scroll {
    width: 56px;
    height: 100px;
  }
  .dial-item {
    height: 34px;
    font-size: 1.1rem;
  }
  .dial-item--selected {
    font-size: 1.3rem;
  }
  .dial-sep {
    font-size: 1.5rem;
  }
}

/* ===== ROAST TOAST ===== */
.roast-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: #0d0d0d;
  color: #f6f3ea;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 16px;
  border: 3px solid var(--accent-red);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.roast-toast--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.roast-toast--hide {
  transform: translateX(-50%) translateY(60px);
  opacity: 0;
}

/* ===== STREAK BADGE ===== */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(197, 22, 22, 0.15);
  border: 2px dashed rgba(197, 22, 22, 0.4);
  border-radius: 12px;
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent-red);
  text-transform: uppercase;
  margin: 8px auto 0;
  cursor: default;
}

.streak-badge #streakCount {
  font-size: 1.3em;
  font-weight: 900;
}

/* ===== FUN PROGRESS BAR ===== */
.fun-progress {
  margin: 12px 0 16px;
  text-align: center;
}

.fun-progress__track {
  width: 100%;
  height: 22px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.fun-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-red), #e84040, #ff6b6b);
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  box-shadow: 0 0 10px rgba(197, 22, 22, 0.4);
}

.fun-progress__label {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

.pg-mode .fun-progress__track {
  background: #eee !important;
  border-color: #ddd !important;
}

.pg-mode .fun-progress__fill {
  background: linear-gradient(90deg, #2563eb, #60a5fa, #93c5fd) !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.3) !important;
}

.pg-mode .fun-progress__label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}

/* ===== PG MODE TOGGLE SWITCH ===== */
.pg-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 8px auto 0;
}

/* SHIT mode: give mode switch a streak-style bordered badge look */
body:not(.pg-mode) .pg-switch {
  background: rgba(197, 22, 22, 0.12);
  border: 2px dashed rgba(197, 22, 22, 0.42);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pg-switch input {
  display: none;
}

.pg-switch__slider {
  position: relative;
  width: 52px;
  height: 28px;
  background: #333;
  border-radius: 28px;
  border: 2px solid #555;
  transition:
    background 0.25s,
    border-color 0.25s;
  flex-shrink: 0;
}

.pg-switch__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #f6f3ea;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pg-switch input:checked + .pg-switch__slider {
  background: #c51616;
  border-color: #9f1010;
}

.pg-switch input:checked + .pg-switch__slider::after {
  transform: translateX(24px);
}

/* PG mode switch stays blue */
.pg-mode .pg-switch input:checked + .pg-switch__slider {
  background: #2563eb;
  border-color: #1d4ed8;
}

.pg-switch__label {
  font-family: var(--font-ui);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-red);
}

/* ===== PG MODE THEME OVERRIDES ===== */
body.pg-mode {
  /* Use unicorn texture background for PG mode - tileable for mobile and desktop */
  background: #f8f9fa url("../assets/textures/pretty.png") center/cover;
  /* no-repeat !important; */
}

/* PG mode: Use Helvetica for EVERYTHING */
.pg-mode * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 100 !important;
}

/* PG mode: Update switch label color */
.pg-mode .pg-switch__label {
  color: #000000 !important;
}

.pg-mode .app {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pg-mode .title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.pg-mode .title-line {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2563eb !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8) !important;
  /* Semi-transparent white pill background for better contrast over animated gradient */
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 8px;
}

.pg-mode .tabs {
  padding: 6px 10px !important;
  margin: 12px auto 22px !important;
  display: flex !important;
  width: auto !important;
  max-width: 820px;
  gap: 10px !important;
  border-radius: 48px !important;
}

.pg-mode .tab {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #555 !important;
  letter-spacing: 0.5px !important;
  /* font-size: clamp(0.9rem, 4vw, 6.1rem) !important; */
}

.pg-mode .tab::before {
  color: #ccc !important;
}

.pg-mode .tab--active {
  color: #2563eb !important;
}

.pg-mode .tab--active::after {
  background: #2563eb !important;
}

.pg-mode .card-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #222 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.pg-mode .task-text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}

.pg-mode .task-input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: #f9f9f9 !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
  border-radius: 8px !important;
}

.pg-mode .task-add-btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}

.pg-mode .task-add-btn:hover {
  background: #1d4ed8 !important;
}

.pg-mode .btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  letter-spacing: 0.5px !important;
}

.pg-mode .btn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px);
}

.pg-mode .btn--primary {
  background: #2563eb !important;
}

.pg-mode .btn--ghost {
  background: #f5f5f5 !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
}

.pg-mode .btn--close {
  background: #666 !important;
}

.pg-mode .floating-timer {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.pg-mode .floating-timer__label {
  color: #fff !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* PG mode icon navigation styles */
.pg-mode .icon-button {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #e0e0e0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.pg-mode .icon-button:hover {
  background: #f5f5f5 !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2) !important;
}

.pg-mode .icon-button--timer.is-running {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  animation: timerGlowPG 1.3s ease-in-out infinite;
}

.pg-mode .icon-button--reset {
  border-color: #2563eb !important;
}

.pg-mode .icon-button--reset:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}

@keyframes timerGlowPG {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  }
}

.pg-mode .timer-bubble {
  background: #1d4ed8 !important;
  color: #fff !important;
  border-color: #fff !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  animation: none !important;
}

.pg-mode .floating-countdown {
  background: #fff !important;
  background-image: none !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.pg-mode .floating-countdown__task {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}

.pg-mode .floating-countdown__time {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2563eb !important;
  text-shadow: none !important;
  animation: none !important;
  /* Add white background for better readability */
  background: rgba(255, 255, 255, 0.95) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  display: inline-block !important;
}

.pg-mode .floating-countdown__pause {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

.pg-mode .floating-countdown__pause:hover {
  background: rgba(37, 99, 235, 0.2) !important;
}

.pg-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

.pg-mode .modal,
.pg-mode .modal--timer-popup,
.pg-mode .modal--timer-done {
  background: #fff !important;
  background-image: none !important;
  color: #222 !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  outline: none !important;
}

.pg-mode .modal-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #222 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.pg-mode .modal-subtitle {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #555 !important;
}

.pg-mode .modal-hint {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #777 !important;
}

.pg-mode .timer-block {
  background: #f9f9f9 !important;
  border-color: #ddd !important;
  box-shadow: none !important;
}

.pg-mode .timer-block__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2563eb !important;
}

.pg-mode .timer-block__hint {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #666 !important;
}

.pg-mode .timer-block__footer {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
  border-color: #ddd !important;
}

.pg-mode .timer-selects select,
.pg-mode .modal--timer-popup .field-select,
.pg-mode .modal--timer-popup .field-input {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.pg-mode .dial-scroll {
  background: #f5f5f5 !important;
  border-color: #ccc !important;
}

.pg-mode .dial-scroll:focus {
  border-color: #2563eb !important;
  outline-color: #2563eb !important;
}

.pg-mode .dial-item {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #aaa !important;
}

.pg-mode .dial-item--selected {
  color: #111 !important;
  text-shadow: none !important;
  font-weight: 900;
}

.pg-mode .dial-sep {
  color: #999 !important;
}

.pg-mode .dial-label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #888 !important;
}

.pg-mode .completed-stat {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}

.pg-mode .completed-stat__count {
  color: #2563eb !important;
}

.pg-mode .completed-groups--tabs .completed-group {
  background: #f9f9f9 !important;
  border-color: #e0e0e0 !important;
}

.pg-mode .completed-groups--tabs .completed-subheading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #222 !important;
}

.pg-mode .linkish {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #666 !important;
}

.pg-mode .prize-list {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}

.pg-mode .prize-note {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #666 !important;
}

.pg-mode .streak-badge {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(189, 193, 201, 0.608) !important;
  color: #2563eb !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.pg-mode .roast-toast {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: #fff !important;
  color: #222 !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.pg-mode .task--selected {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: #2563eb !important;
}

.pg-mode .task--selected::after {
  background: #2563eb !important;
}

.pg-mode .task-checkbox {
  accent-color: #2563eb;
}

/* PG mode: ensure completed list items use readable font */
.pg-mode .completed-list,
.pg-mode .completed-list li {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}

/* PG mode: ensure prize list items use readable font (override #prizeModal specificity) */
.pg-mode #prizeModal .prize-list li {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
  line-height: 1.4 !important;
  padding: 2px 10px !important;
}

/* PG mode: tighten prize list gap */
.pg-mode #prizeModal .prize-list {
  gap: 8px !important;
  margin: 4px 0 8px !important;
}

/* PG mode: ensure prize subtitle uses readable font and tighter spacing */
.pg-mode #prizeSubtitle {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2563eb !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* PG mode: ensure prize modal title lines are visible */
.pg-mode #prizeModal .modal-title-line1,
.pg-mode #prizeModal .modal-title-line2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #222 !important;
}

/* PG mode: remove drop-shadow/filter on title */
.pg-mode .title-line {
  color: #2563eb !important;
  /* filter: none !important; */
}

/* PG mode: ensure completed subheading uses readable font */
.pg-mode .completed-subheading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2563eb !important;
}

/* ===== TASK DELETE BUTTON ===== */
.task-delete {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.4rem; /* Increased from 1.1rem for Shit mode */
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition:
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.task-delete:hover {
  color: var(--accent-red);
  background: rgba(197, 22, 22, 0.12);
  transform: scale(1.1);
}

.pg-mode .task-delete {
  color: rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  font-size: 1.1rem !important; /* Smaller in PG mode */
}

.pg-mode .task-delete:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

/* Always show delete buttons in completed section */
.completed-delete {
  display: flex !important;
}

/* ===== MODAL CLOSE X BUTTON ===== */
.pg-mode .modal-close-x {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #fff !important;
}

.pg-mode .modal-close-x:hover {
  background: #1d4ed8 !important;
  transform: scale(1.1);
}

/* ===== PRIZE ROAST LINE ===== */
.prize-roast {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent-red);
  margin: 8px 0;
  padding: 10px 14px;
  border: 2px dashed var(--accent-red);
  border-radius: 8px;
  background: rgba(197, 22, 22, 0.08);
  animation: fadeSlideIn 0.5s ease-out 0.6s backwards;
}

.prize-roast:empty {
  display: none;
}

.pg-mode .prize-roast {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2563eb !important;
  border-color: #2563eb !important;
  background: rgba(37, 99, 235, 0.06) !important;
}

/* ===== DIAL SPACER ===== */
.dial-spacer {
  flex-shrink: 0;
}

/* ===== MOBILE TIMER POPUP FIX ===== */
@media (max-width: 640px) {
  .modal--timer-popup {
    width: 96% !important;
    max-width: 96% !important;
    max-height: 88vh; /* leave room for status bar + bottom nav on mobile */
    overflow-y: auto;
    padding: 14px 10px !important;
  }

  .modal--timer-popup .modal-title {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
    margin-top: 32px; /* space for close X */
  }

  .modal--timer-popup .timer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bigger close X button on mobile for easier tapping */
  .modal-close-x {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    top: 6px;
    right: 6px;
  }

  /* Bigger close button on mobile */
  .btn--close {
    min-height: 44px;
    font-size: 1rem;
    padding: 10px 20px;
  }
}

/* Timer text emphasis: bigger SET YOUR TIME + MURDER TASKS line. */
.modal--timer-popup .timer-block:nth-of-type(2) .timer-block__title {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  letter-spacing: 2.2px !important;
  text-align: center !important;
  justify-content: center !important;
  display: block !important;
}

#timerFooterMsg {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important;
  letter-spacing: 1.6px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all;
}

@media (max-width: 640px) {
  .modal--timer-popup .timer-block:nth-of-type(2) .timer-block__title {
    font-size: clamp(1.35rem, 5.6vw, 1.9rem) !important;
    letter-spacing: 1.2px !important;
    line-height: 1.05 !important;
  }

  #timerFooterMsg {
    font-size: clamp(1.1rem, 4.2vw, 1.45rem) !important;
    letter-spacing: 0.6px !important;
    line-height: 1.2 !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== PRIZE MODAL TIGHTER SPACING ===== */
#prizeModal {
  gap: 8px;
  padding: 16px 20px;
  /* Add padding at top to prevent close button overlap */
  padding-top: 50px;
}

#prizeModal .modal-title {
  margin: 4px 0 8px;
}

#prizeModal .prize-roast {
  margin: 4px 0;
  padding: 8px 12px;
}

#prizeModal .modal-subtitle {
  margin: 4px 0;
}

#prizeModal .prize-list {
  margin: 8px 0;
  gap: 8px;
}

#prizeModal .prize-note {
  margin: 4px 0 8px;
}

#prizeModal .prize-actions {
  margin-top: 8px;
}

/* Make close X more visible */
.modal-close-x {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(197, 22, 22, 0.9);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modal-close-x:hover {
  background: #000;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Mobile: Even tighter */
@media (max-width: 768px) {
  #prizeModal {
    padding: 12px 16px;
    gap: 6px;
  }

  #prizeModal .prize-gif {
    max-width: 220px;
    max-height: 180px;
  }
}

/* ===== HOW-TO GUIDE ===== */
/* ===== TASK SHAKE ANIMATION ===== */
@keyframes punkShake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  10% {
    transform: translateX(-8px) rotate(-3deg);
  }
  20% {
    transform: translateX(8px) rotate(3deg);
  }
  30% {
    transform: translateX(-8px) rotate(-3deg);
  }
  40% {
    transform: translateX(8px) rotate(3deg);
  }
  50% {
    transform: translateX(-6px) rotate(-2deg);
  }
  60% {
    transform: translateX(6px) rotate(2deg);
  }
  70% {
    transform: translateX(-4px) rotate(-1deg);
  }
  80% {
    transform: translateX(4px) rotate(1deg);
  }
  90% {
    transform: translateX(-2px) rotate(-0.5deg);
  }
}

@keyframes gentleBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-4px) scale(1.02);
  }
  50% {
    transform: translateY(-2px) scale(1.01);
  }
  75% {
    transform: translateY(-1px) scale(1.005);
  }
}

.task-row.completing {
  animation: punkShake 0.5s ease-in-out;
}

.pg-mode .task-row.completing {
  animation: gentleBounce 0.6s ease-in-out;
}

/* Task row drag states */
.task-row {
  transition: all 0.2s ease;
  cursor: move;
}

.task-row.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.task-row.drag-over {
  border-top: 3px solid var(--accent-red);
  margin-top: 8px;
}

.pg-mode .task-row.drag-over {
  border-top-color: #2563eb;
}

.task-row:active {
  cursor: grabbing;
}

/* Old sound-toggle and howto-button styles removed - now part of icon-nav */

/* ===== FLOATING RESET BUTTON ===== */
.floating-reset {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  background: var(--accent-red);
  color: #fff;
  border: 2px solid var(--accent-red-dark);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-punk);
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
}

.floating-reset:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  background: var(--accent-red-dark);
}

.pg-mode .floating-reset {
  background: #2563eb;
  border-color: #1d4ed8;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pg-mode .floating-reset:hover {
  background: #1d4ed8;
  border-color: #1e40af;
}

@media (max-width: 640px) {
  .floating-reset {
    bottom: 16px;
    left: 16px;
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* ===== PRIZE ROAST TIGHT TEXT ===== */
.prize-roast--tight {
  line-height: 1.3 !important;
  margin: 8px 0 !important;
}

/* ===== MODAL TITLE VARIATIONS ===== */
.modal-title--timesup {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  color: var(--accent-red) !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

.modal-title--prize {
  margin-bottom: 0.5rem;
}

.pg-mode .modal-title--timesup {
  color: #2563eb !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding-left: 0px;
  padding-right: 0px;
  display: inline-block;
}

/* ===== HOW TO MODAL ===== */
.modal--howto {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  background:
    linear-gradient(rgba(16, 16, 16, 0.55), rgba(16, 16, 16, 0.55)),
    url("../assets/textures/dirty-paper.png") center/cover;
  color: #f3f1e9;
  border: 2px solid rgba(246, 243, 234, 0.28);
}

.modal--howto .howto-content {
  text-align: left;
}

.modal--howto .howto-section {
  margin-bottom: 1.5rem;
}

.modal--howto .howto-section h3 {
  font-family: var(--font-punk);
  font-size: 1.3rem;
  color: var(--accent-red);
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
}

.modal--howto .howto-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal--howto .howto-section li {
  font-family: var(--font-);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
  padding-left: 1.2rem;
  position: relative;
}

.modal--howto .howto-section li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-red);
  font-weight: bold;
}

.pg-mode .modal--howto .howto-section h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2563eb;
}

.pg-mode .modal--howto .howto-section li::before {
  color: #2563eb;
}

/* ===== UX POLISH: PRIZE + HEADER + ICON NAV ===== */
/* Remove roast line from prize modal in both modes. */
#prizeModal .prize-roast {
  display: none !important;
}

/* Keep cat gif fully visible while making it smaller. */
#prizeModal .prize-gif,
.modal img.prize-gif,
.prize-gif {
  width: min(100%, 220px) !important;
  max-width: 220px !important;
  max-height: 220px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  margin: 8px auto !important;
}

/* PG mode: tighter light backgrounds for title/subtitle area, switch, and streak. */
.pg-mode .title-line {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14) !important;
  padding: 6px 12px !important;
}

.pg-mode .title-line:last-child {
  margin-top: -4px !important;
}

.pg-mode .pg-switch {
  background: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.pg-mode .streak-badge {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
}

/* Top-right icon buttons: more visibility + pop in both modes. */
.icon-button {
  border-width: 3px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.52),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    0 0 0 2px #0a0a0a,
    0 0 0 4px rgba(255, 255, 255, 0.08);
}

.icon-button:hover {
  transform: translateY(-3px) scale(1.08);
}

.icon-button__icon {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.24));
}

.pg-mode .icon-button {
  border: 2px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow:
    0 10px 20px rgba(37, 99, 235, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* PG mode: tighten title stack and reduce extra whitespace. */
.pg-mode .layout {
  gap: 14px !important;
}

.pg-mode .header {
  gap: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 2px !important;
}

.pg-mode .title {
  margin: 0.1rem 0 0.2rem !important;
  line-height: 0.92 !important;
}

.pg-mode .title-line {
  display: inline-block !important;
  width: auto !important;
  padding: 4px 10px !important;
}

/* .pg-mode .title-line:first-child,
.pg-mode .title-line:last-child, */
.pg-mode .card--tasks {
  margin-bottom: 2px !important;
  line-height: 0.86 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  clip-path: none !important;
  position: relative;
  border: 10px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
        90deg,
        #2563eb 0%,
        #60a5fa 25%,
        #f59e0b 50%,
        #f472b6 75%,
        #2563eb 100%
      )
      border-box !important;
  animation: sparkleRotate 3s linear infinite;
}

.pg-mode .title-line:last-child {
  margin-top: 0 !important;
  line-height: 0.94 !important;
}

/* Desktop: reduce white space around silly stuff */
@media (min-width: 768px) {
  .pg-mode .title {
    margin: 0 !important;
  }

  .pg-mode .title-line {
    padding: 2px 8px !important;
    margin: 0 !important;
  }

  /* .pg-mode .title-line:first-child {
    margin-bottom: 0 !important;
  } */
}

/* ===== FINAL MODAL + ICON POLISH OVERRIDES ===== */
/* Prize modal readability: remove conflicting inline/animated list treatments. */
#prizeModal {
  max-width: 480px !important;
  width: min(94vw, 480px) !important;
  padding: 10px 16px 10px !important;
  gap: 4px !important;
}

#prizeModal .modal-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 0.94 !important;
  letter-spacing: 0.5px !important;
  text-shadow: none !important;
  text-align: center !important;
}

#prizeModal .modal-title-line1,
#prizeModal .modal-title-line2 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #111 !important;
  word-spacing: 0 !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;
  transform: translateX(0) !important;
}

#prizeModal .modal-title-line2 {
  margin-top: 1px !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
}

#prizeSubtitle {
  margin: 0 0 2px !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
}

#prizeModal .prize-list {
  list-style: none;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#prizeModal .prize-list li {
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

#prizeModal .prize-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* GIF should fill naturally without side whitespace artifacts. */
#prizeModal .prize-gif {
  width: auto !important;
  max-width: min(92%, 300px) !important;
  max-height: 280px !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  background: transparent !important;
  padding: 0 !important;
}

#prizeModal .prize-note {
  margin: 0 !important;
}

.pg-mode #prizeModal .modal-title-line1,
.pg-mode #prizeModal .modal-title-line2 {
  color: #1f2937 !important;
}

.pg-mode #prizeModal .prize-list {
  grid-template-columns: 1fr 1fr;
}

.pg-mode #prizeModal .prize-list li {
  background: rgba(37, 99, 235, 0.08);
  color: #1f2937 !important;
}

/* Timer done modal readability on textured paper in both modes. */
.modal--timer-done {
  background:
    linear-gradient(rgba(15, 15, 15, 0.78), rgba(15, 15, 15, 0.78)),
    url("../assets/textures/dirty-paper.png") center/cover !important;
  border: 3px solid rgba(0, 0, 0, 0.8) !important;
}

.modal--timer-done .modal-title {
  letter-spacing: 1px !important;
}

.pg-mode .modal--timer-done {
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    url("../assets/textures/pretty.png") center/cover no-repeat !important;
  border: 2px solid rgba(37, 99, 235, 0.25) !important;
  color: #1f2937 !important;
}

.pg-mode .modal--timer-done .modal-title {
  color: #2663eb !important;
}

.pg-mode .modal--timer-done .modal-subtitle,
.pg-mode .modal--timer-done .modal-hint {
  color: #2663eb !important;
  display: block;
  border-right: 0px;
  border-left: 0px;
  background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Top-right button delight interactions. */
@keyframes iconWiggle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-7deg) scale(1.04);
  }
  75% {
    transform: rotate(7deg) scale(1.04);
  }
}

@keyframes iconPop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sparkRise {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -170%) scale(1.1);
    opacity: 0;
  }
}

.icon-button--wiggle {
  animation: iconWiggle 220ms ease;
}

.icon-button--pop {
  animation: iconPop 180ms ease;
}

.icon-button-spark {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: sparkRise 700ms ease forwards;
  font-size: 1rem;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

@media (max-width: 640px) {
  #prizeModal {
    width: min(95vw, 420px) !important;
    padding: 8px 10px 8px !important;
    gap: 3px !important;
  }

  #prizeModal .prize-list {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  #prizeModal .prize-gif {
    max-width: min(90%, 240px) !important;
    max-height: 220px !important;
  }
}

/* ===== FINAL READABILITY PASS ===== */
/* Keep SHIT mode vibe but improve readability of key text blocks. */
body:not(.pg-mode) .completed-stat,
body:not(.pg-mode) .fun-progress__label {
  font-family: var(--font-song), var(--font-stack) !important;
  letter-spacing: 0.6px !important;
}

/* SHIT mode: force progress status lines into Wrong font */
body:not(.pg-mode) #progressText,
body:not(.pg-mode) #progressText .completed-stat__count,
body:not(.pg-mode) .fun-progress__label {
  font-family: var(--font-wrong), var(--font-stack) !important;
}

body:not(.pg-mode) .completed-list,
body:not(.pg-mode) .completed-list li,
body:not(.pg-mode) .completed-list li span {
  font-family: var(--font-song), var(--font-stack) !important;
  font-size: clamp(1.06rem, 1.8vw, 1.24rem) !important;
  letter-spacing: 0.3px !important;
  line-height: 1.45 !important;
}

/* Prize options should be plain text rows (no boxy borders/background cards). */
#prizeModal .prize-list li,
.pg-mode #prizeModal .prize-list li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Always pin prize close X to actual top-right corner in both modes. */
#prizeModal #closePrizeX {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 120 !important;
}

/* Black text + bigger responsive prize titles (mobile-safe). */
#prizeModal,
#prizeModal .modal-subtitle,
#prizeModal .prize-list,
#prizeModal .prize-list li,
#prizeModal .prize-note {
  color: #111 !important;
}

#prizeModal #prizeTitle,
#prizeModal #prizeSubtitle,
#prizeModal #prizeLine1,
#prizeModal #prizeLine2,
#prizeModal #prizeNote,
.pg-mode #prizeModal #prizeTitle,
.pg-mode #prizeModal #prizeSubtitle,
.pg-mode #prizeModal #prizeLine1,
.pg-mode #prizeModal #prizeLine2,
.pg-mode #prizeModal #prizeNote,
.pg-mode #prizeModal .prize-list li {
  color: #2663eb !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}

#prizeModal .modal-title-line1,
#prizeModal .modal-title-line2 {
  font-size: clamp(2.4rem, 8.2vw, 4.4rem) !important;
  line-height: 0.9 !important;
}

@media (max-width: 640px) {
  #prizeModal .modal-title-line1,
  #prizeModal .modal-title-line2 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 0.92 !important;
  }
}

/* Timer popup: tighter spacing + bigger TIMER heading (same font). */
.modal--timer-popup {
  padding: 8px 12px !important;
}

.modal--timer-popup .modal-title {
  font-size: clamp(5rem, 11vw, 8.8rem) !important;
  line-height: 0.86 !important;
  margin: 0 0 4px !important;
  padding: 2px 8px !important;
}

.modal--timer-popup .timer-grid {
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.modal--timer-popup .timer-block {
  padding: 8px 10px !important;
}

.modal--timer-popup .timer-block__title {
  margin: 0 0 2px !important;
}

.modal--timer-popup .timer-block__hint {
  margin: 0 0 4px !important;
}

.modal--timer-popup .timer-display {
  margin: 4px 0 !important;
}

.modal--timer-popup .timer-block__footer {
  margin: 2px 0 4px !important;
}

.modal--timer-popup .timer-controls {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.modal--timer-popup .dial-picker {
  margin: 4px auto !important;
}

.modal--timer-popup .dial-scroll {
  height: 96px !important;
}

.modal--timer-popup .dial-item {
  height: 32px !important;
}

.modal--timer-popup .dial-sep {
  padding-top: 12px !important;
}

@media (max-width: 640px) {
  .modal--timer-popup {
    padding: 8px 7px !important;
  }

  .modal--timer-popup .modal-title {
    font-size: clamp(3.6rem, 14vw, 5.4rem) !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
  }

  .modal--timer-popup .timer-grid {
    gap: 6px !important;
    margin-bottom: 3px !important;
  }

  .modal--timer-popup .timer-block {
    padding: 7px 8px !important;
  }

  .modal--timer-popup .timer-display {
    margin: 3px 0 !important;
  }

  .modal--timer-popup .dial-scroll {
    height: 86px !important;
  }

  .modal--timer-popup .dial-item {
    height: 28px !important;
  }
}

/* ---- 2026-02 polish fixes ---- */
/* Ensure "SET YOUR TIME" stays centered and not oddly justified. */
.modal--timer-popup .timer-block:nth-of-type(2) .timer-block__title {
  display: block;
  width: 100%;
  text-align: center !important;
  justify-content: center !important;
}

/* Improve timer readability in PG mode with light chips behind text. */
.pg-mode .floating-countdown__task,
.pg-mode .floating-countdown__time {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 10px;
  padding: 4px 8px;
  text-shadow: none !important;
}

/* Final mode cleanup */
/* PG mode background: pretty texture, tiled, static/fixed like SHIT mode. */
body.pg-mode {
  background: #f8f9fa url("../assets/textures/pretty.png") center/360px repeat;
  /* fixed !important; */
}

/* Remove card borders in both modes. */
.card--tasks,
.card--completed,
.pg-mode .card--tasks,
.pg-mode .card--completed,
body:not(.pg-mode) .card--tasks,
body:not(.pg-mode) .card--completed {
  /* border: none !important; */
  clip-path: none !important;
}

.card--tasks::after,
.card--completed::after,
.pg-mode .card--tasks::after,
.pg-mode .card--completed::after,
body:not(.pg-mode) .card--tasks::after,
body:not(.pg-mode) .card--completed::after {
  content: none !important;
  display: none !important;
}

/* PG timer-done modal readability */
.pg-mode .modal--timer-done #timerModalTask,
.pg-mode .modal--timer-done .modal-subtitle {
  background: rgba(255, 255, 255, 0.9) !important;
  padding-left: 0px;
  padding-right: 0px;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* fix fixx fixxx */
/* Reduce desktop whitespace around "SILLY STUFF" title in PG mode. */
.pg-mode .header {
  margin-bottom: 0 !important;
  gap: 0 !important;
}

/* .pg-mode .title {
  margin: 0 !important;
  line-height: 0.2 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  clip-path: none !important;
  position: relative;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
        90deg,
        #2563eb 0%,
        #60a5fa 25%,
        #f59e0b 50%,
        #f472b6 75%,
        #2563eb 100%
      )
      border-box !important;
  animation: sparkleRotate 3s linear infinite;
} */

.pg-mode .title-line {
  margin-bottom: 2px !important;
  padding: 10px 10px !important;
}

@media (min-width: 1294px) {
  .pg-mode .title-line:first-child {
    font-size: clamp(4.6rem, 9vw, 9rem) !important;
    margin-bottom: 0 !important;
  }

  .pg-mode .title-line:last-child {
    font-size: clamp(1.6rem, 1.8vw, 1.8rem) !important;
    margin-top: 0 !important;
  }
}

/* SHIT mode tabs use punk font 04. */
body:not(.pg-mode) .tab {
  font-family: var(--font-punk), var(--font-stack) !important;
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
}

/* Final override: tab labels under the title use Wrong font in all modes. */
.tab,
.pg-mode .tab,
body:not(.pg-mode) .tab {
  font-family: var(--font-wrong), var(--font-stack) !important;
}

/* Bottom completed tab names use punk font like "SHIT I DID". */
.completed-subheading,
.completed-groups--tabs .completed-subheading,
.pg-mode .completed-subheading,
.pg-mode .completed-groups--tabs .completed-subheading {
  font-family: var(--font-punk), var(--font-stack) !important;
  font-weight: 400 !important;
  letter-spacing: 1.4px !important;
}

/* PG mode stays Helvetica everywhere, including tab labels and completed headings. */
.pg-mode .completed-subheading,
.pg-mode .completed-groups--tabs .completed-subheading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.5px !important;
}

.pg-mode .tab {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.1rem, 2.4vw, 2rem) !important;
}

/* Completed breakdown v2: compact chips with counts (both modes). */
.completed-groups--tabs {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.completed-groups--tabs .completed-group {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  overflow: hidden;
}

.completed-groups--tabs .completed-subheading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin: 0 !important;
  font-size: clamp(1rem, 2.2vw, 1.2rem) !important;
  letter-spacing: 0.8px !important;
  font-weight: 700 !important;
}

.completed-subheading__name {
  display: inline-block;
  font-weight: 700 !important;
}

.completed-subheading__count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-family: var(--font-ui), var(--font-stack) !important;
  font-size: 0.95rem;
}

.completed-groups--tabs .completed-subheading::before {
  display: none !important;
}

.completed-groups--tabs .completed-list {
  margin-top: 8px !important;
}

.completed-list li,
.completed-list li span {
  font-weight: 300 !important;
}

@media (max-width: 900px) {
  .completed-groups--tabs {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Large-screen title lock: always exactly two stacked lines. */
@media (min-width: 1024px) {
  .title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .title-line {
    display: block !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Restore original tab behavior on smaller screens (no 2x2 stretched grid). */
@media (max-width: 900px) {
  .tabs {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    width: min(80%, 800px) !important;
    padding: 8px 14px !important;
    margin: 8px auto 14px !important;
    gap: 15px !important;
  }

  .tab {
    width: auto !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    text-align: center !important;
  }

  .tab + .tab::before {
    display: none !important;
  }
}

/* SHIT mode completed tasks under tab names: Wrong font, readable spacing, lighter weight. */
body:not(.pg-mode) .completed-list li,
body:not(.pg-mode) .completed-list li span {
  font-family: var(--font-wrong), var(--font-stack) !important;
  font-weight: 400 !important;
  letter-spacing: 0.8px !important;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem) !important;
  line-height: 1.55 !important;
}

/* Timer done text chips: no extra side whitespace + translucent/readable in both modes. */
#timerModalTitle,
#timerModalTask {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0.16em 0.3em !important;
  border-radius: 6px !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body:not(.pg-mode) #timerModalTitle,
body:not(.pg-mode) #timerModalTask {
  background: rgba(14, 14, 14, 0.45) !important;
  color: #f6f3ea !important;
}

.pg-mode #timerModalTitle,
.pg-mode #timerModalTask {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #2563eb !important;
}

/* PG mode timer-done actions: matching blue buttons, same size, lighter text weight. */
.pg-mode #timerModal .timer-modal-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

.pg-mode #timerModal .timer-modal-actions .btn {
  flex: 1 1 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 14px 16px !important;
  font-size: clamp(1rem, 2.1vw, 1.15rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  animation: none !important;
}

/* ===== FINAL CLEAN OVERRIDES (single source of truth) ===== */
/* TIMER DONE MODAL */
#timerOverlay {
  background: rgba(8, 8, 8, 0.42) !important;
}

#timerModal {
  padding: 18px 18px 20px !important;
}

body:not(.pg-mode) #timerModal.modal--timer-done {
  background:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
    url("../assets/textures/dirty-paper.png") center/cover !important;
  border: 2px solid rgba(0, 0, 0, 0.72) !important;
}

#timerModalTitle,
#timerModalTask {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0.08em 0.28em !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#timerModalTitle {
  font-size: clamp(3rem, 7.8vw, 5.4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 10px !important;
}

#timerModalTask {
  font-size: clamp(1.55rem, 3.3vw, 2.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.045em !important;
  margin-bottom: 14px !important;
}

body:not(.pg-mode) #timerModalTitle,
body:not(.pg-mode) #timerModalTask {
  color: #0a0a0a !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

body:not(.pg-mode) #timerModalTitle {
  font-family: var(--font-punk), var(--font-stack) !important;
  font-size: clamp(2.25rem, 5.4vw, 3.6rem) !important;
  letter-spacing: 0.035em !important;
  line-height: 0.94 !important;
  white-space: nowrap;
}

body:not(.pg-mode) #timerModalTask {
  font-family: var(--font-ui), var(--font-stack) !important;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem) !important;
  letter-spacing: 0.035em !important;
  line-height: 1.06 !important;
}

.pg-mode #timerModalTitle,
.pg-mode #timerModalTask {
  color: #2563eb !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

#timerModal .timer-modal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}

#timerModal .timer-modal-actions .btn,
#timerModal .timer-modal-actions .btn--primary {
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.12 !important;
}

@media (max-width: 760px) {
  #timerModal .timer-modal-actions {
    grid-template-columns: 1fr !important;
  }

  body:not(.pg-mode) #timerModalTitle {
    white-space: normal;
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
}

/* PRIZE MODAL TITLE CLEANUP */
#prizeModal {
  padding: 14px 14px 16px !important;
  max-height: min(90vh, 820px) !important;
  overflow-y: auto !important;
}

#prizeModal .modal-title {
  margin: 0 0 8px !important;
  display: grid !important;
  gap: 2px !important;
  justify-items: center !important;
  text-align: center !important;
  line-height: 0.92 !important;
  letter-spacing: 0.02em !important;
}

#prizeModal .modal-title-line1,
#prizeModal .modal-title-line2 {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  text-align: center !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.06em !important;
  white-space: nowrap !important;
}

body:not(.pg-mode) #prizeModal .modal-title-line1,
body:not(.pg-mode) #prizeModal .modal-title-line2 {
  font-size: clamp(2.2rem, 7vw, 4.1rem) !important;
  color: #111 !important;
}

.pg-mode #prizeModal .modal-title-line1,
.pg-mode #prizeModal .modal-title-line2 {
  font-size: clamp(2.2rem, 7vw, 4rem) !important;
  color: #2663eb !important;
}

/* Prize title: smaller + centered + black in both modes */
#prizeModal .modal-title {
  justify-items: center !important;
  text-align: center !important;
  margin: 0 0 6px !important;
}

#prizeModal .modal-title-line1,
#prizeModal .modal-title-line2 {
  color: #111 !important;
  font-size: clamp(1.8rem, 6.2vw, 3rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Hard override by id so PG blue rules cannot win. */
#prizeModal #prizeLine1,
#prizeModal #prizeLine2,
.pg-mode #prizeModal #prizeLine1,
.pg-mode #prizeModal #prizeLine2 {
  color: #111 !important;
}

#prizeModal .prize-list {
  margin: 8px 0 10px !important;
  gap: 8px 16px !important;
}

#prizeModal .prize-list li {
  line-height: 1.28 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
}

body:not(.pg-mode) #prizeModal #prizeSubtitle,
body:not(.pg-mode) #prizeModal #prizeNote {
  color: #111 !important;
  text-align: center !important;
}

#prizeModal #prizeNote {
  width: 100% !important;
  margin: 8px 0 10px !important;
  text-align: center !important;
}

#prizeModal .prize-actions {
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  width: 100%;
  background: linear-gradient(
    to top,
    rgba(242, 239, 231, 0.96) 65%,
    rgba(242, 239, 231, 0)
  );
}

#prizeModal .prize-actions .btn {
  width: 100% !important;
}

/* Completed count chip font: Helvetica only in PG mode. */
.pg-mode .completed-subheading__count,
.pg-mode #completedCount {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body:not(.pg-mode) .completed-subheading__count,
body:not(.pg-mode) #completedCount {
  font-family: var(--font-wrong), var(--font-stack) !important;
}

@media (max-width: 760px) {
  #prizeModal {
    max-height: 88vh !important;
    padding: 10px 10px 14px !important;
  }

  #prizeModal .modal-title {
    margin-bottom: 6px !important;
    gap: 0 !important;
  }

  #prizeModal .modal-title-line1,
  #prizeModal .modal-title-line2 {
    font-size: clamp(1.7rem, 11vw, 2.65rem) !important;
    letter-spacing: 0.02em !important;
  }

  #prizeModal .prize-gif {
    max-width: min(88vw, 300px) !important;
    max-height: 34vh !important;
  }
}

/* SHIT mode timer popup: keep dial numbers/labels high-contrast black. */
body:not(.pg-mode) .modal--timer-popup .dial-label {
  color: rgba(0, 0, 0, 0.72) !important;
}

body:not(.pg-mode) .modal--timer-popup .dial-scroll {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.32) !important;
}

body:not(.pg-mode) .modal--timer-popup .dial-item {
  color: rgba(0, 0, 0, 0.46) !important;
}

body:not(.pg-mode) .modal--timer-popup .dial-item:hover {
  color: rgba(0, 0, 0, 0.82) !important;
}

body:not(.pg-mode) .modal--timer-popup .dial-item--selected {
  color: #000 !important;
  text-shadow: none !important;
}

body:not(.pg-mode) .modal--timer-popup .dial-sep {
  color: rgba(0, 0, 0, 0.58) !important;
}

body:not(.pg-mode) .modal--timer-popup .field-select,
body:not(.pg-mode) .modal--timer-popup .field-input {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #111 !important;
  border-color: rgba(0, 0, 0, 0.72) !important;
}

/* ===== Button + Popup Consistency ===== */
/* Match ADD / EDIT / DELETE button treatment in each mode. */
.task-add-btn,
.task-edit,
.task-delete {
  min-height: 34px !important;
  min-width: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-family: var(--font-ui), var(--font-stack) !important;
  font-size: clamp(0.8rem, 1.7vw, 0.92rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22) !important;
}

body:not(.pg-mode) .task-add-btn,
body:not(.pg-mode) .task-edit,
body:not(.pg-mode) .task-delete {
  background: #c51616 !important;
  border-color: #9f1010 !important;
}

body:not(.pg-mode) .task-add-btn:hover,
body:not(.pg-mode) .task-edit:hover,
body:not(.pg-mode) .task-delete:hover {
  background: #9f1010 !important;
}

.pg-mode .task-add-btn,
.pg-mode .task-edit,
.pg-mode .task-delete {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
  font-family: "Helvetica Neue Thin", Helvetica, Arial, sans-serif !important;
}

.pg-mode .task-add-btn:hover,
.pg-mode .task-edit:hover,
.pg-mode .task-delete:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
}

/* Keep the delete glyph readable inside the shared button shape. */
.task-delete {
  min-width: 42px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 1rem !important;
}

.task-edit {
  min-width: 56px !important;
}

.task-add-btn {
  min-width: 64px !important;
}

/* Slight pop on hover for task action buttons in both modes. */
.task-edit:hover,
.task-delete:hover {
  transform: translateY(-1px) scale(1.03) !important;
}

/* Ensure PG delete X is always white (base + hover + active). */
.pg-mode .task-delete,
.pg-mode .task-delete:hover,
.pg-mode .task-delete:active,
.pg-mode .task-delete:focus {
  color: #fff !important;
}

/* In-progress chip should only show for selected task; mode colorized. */
.task--selected::after {
  background: #c51616 !important;
}

.pg-mode .task--selected::after {
  background: #2563eb !important;
}

/* SHIT mode How To popup = black styling. */
body:not(.pg-mode) .modal--howto {
  background: #0b0b0b !important;
  color: #f3f1e9 !important;
  border: 2px solid #0a0a0a !important;
}

/* Remove white border/outline artifacts from popups. */
.modal,
.modal--howto,
.modal--timer-popup,
.modal--timer-done,
#prizeModal {
  outline: none !important;
}

body:not(.pg-mode) .modal,
body:not(.pg-mode) .modal--howto,
body:not(.pg-mode) .modal--timer-popup,
body:not(.pg-mode) .modal--timer-done,
body:not(.pg-mode) #prizeModal {
  border-color: #0a0a0a !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.52) !important;
}

/* Strip timer-popup white inset ring specifically. */
body:not(.pg-mode) .modal--timer-popup {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.52) !important;
}

/* SHIT mode HOW TO modal: off-white panel, black body text, bigger red titles. */
body:not(.pg-mode) #howtoModal {
  background: #f3eee3 !important;
  color: #111 !important;
  border: 2px solid #0a0a0a !important;
}

body:not(.pg-mode) #howtoModal .modal-title {
  color: #c51616 !important;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem) !important;
  letter-spacing: 0.05em !important;
  text-shadow: none !important;
}

body:not(.pg-mode) #howtoModal .howto-section h3 {
  color: #c51616 !important;
  font-size: clamp(1.55rem, 3.2vw, 2.1rem) !important;
  letter-spacing: 0.03em !important;
}

body:not(.pg-mode) #howtoModal .howto-section li {
  color: #111 !important;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem) !important;
  line-height: 1.36 !important;
}

body:not(.pg-mode) #howtoModal .howto-section li::before {
  color: #c51616 !important;
}

/* How-to close button: always visible; PG close X should be white. */
#howtoModal #closeHowtoX {
  display: flex !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 25 !important;
}

.pg-mode #howtoModal #closeHowtoX,
.pg-mode #howtoModal #closeHowtoX:hover {
  color: #fff !important;
}

/* SHIT mode tasks use Wrong font explicitly. */
body:not(.pg-mode) .task-text,
body:not(.pg-mode) .task-input,
body:not(.pg-mode) .task-add-btn,
body:not(.pg-mode) .task-edit,
body:not(.pg-mode) .task-delete {
  font-family: var(--font-wrong), var(--font-stack) !important;
}

/* Ensure How To close X is anchored inside the modal card in both modes. */
#howtoModal {
  position: relative !important;
}

#howtoModal #closeHowtoX {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  margin: 0 !important;
  display: flex !important;
  z-index: 50 !important;
}

/* LIZZZZZZZ cute pop up Click title 5x */
.friend-note {
  display: none;
  margin: 0 0 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0f4da8;
  background: #ffffffd9;
  border: 2px solid #8dc4ff;
  box-shadow: 0 3px 10px rgba(21, 103, 184, 0.2);
  transform: rotate(-2deg);
}

.pg-mode .friend-note {
  color: #0f4da8;
  background: #ffffffd9;
  border: 2px solid #8dc4ff;
  box-shadow: 0 3px 10px rgba(21, 103, 184, 0.2);
  transform: rotate(-2deg);
}

body:not(.pg-mode) .friend-note {
  font-family: var(--font-wrong), var(--font-stack);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f6ebe0;
  background: #7d1111;
  border: 2px solid #120808;
  box-shadow:
    0 4px 0 #120808,
    0 10px 18px rgba(0, 0, 0, 0.45);
  text-shadow: 1px 1px 0 #120808;
  transform: rotate(-4deg);
}

body.lizz-egg-on:not(.pg-mode) .lizz-note {
  display: inline-block;
  animation:
    lizzEggPop 0.2s ease-out,
    lizzEggShake 0.7s ease-in-out 0.25s 2;
}

body.lizz-egg-on.pg-mode .lizz-note {
  display: inline-block;
  animation: lizzEggPop 0.2s ease-out;
}

.bean-note {
  margin-top: -0.1rem;
}

.pg-mode .bean-note {
  color: #114d9b;
  border-color: #6eb8ff;
  background: #eaf6ff;
  box-shadow: 0 3px 10px rgba(17, 77, 155, 0.22);
}

body:not(.pg-mode) .bean-note {
  font-family: var(--font-wrong), var(--font-stack);
  color: #d7ecff;
  background-color: var(--accent-red);
  border-color: #070d1d;
  box-shadow:
    0 4px 0 #070d1d,
    0 10px 18px rgba(0, 0, 0, 0.45);
  text-shadow: 1px 1px 0 #070d1d;
}

body.bean-note-on .bean-note {
  display: inline-block;
  position: fixed;
  left: 50%;
  top: 26%;
  z-index: 10001;
  margin: 0;
  padding: 0.65rem 1.2rem;
  border-width: 3px;
  border-radius: 20px;
  font-size: clamp(1.25rem, 4.2vw, 2.45rem);
  letter-spacing: 0.02em;
  transform: translate(-50%, -50%) rotate(-2deg);
  text-align: center;
  white-space: nowrap;
  animation: beanNoteSlam 0.45s cubic-bezier(0.2, 0.88, 0.3, 1.06) both;
}

.bean-egg-splat {
  position: fixed;
  left: 50%;
  top: 28%;
  z-index: 10000;
  width: min(76vw, 420px);
  min-height: 120px;
  transform: translate(-50%, -50%) scale(0.45);
  border-radius: 47% 53% 58% 42% / 57% 43% 60% 40%;
  background:
    radial-gradient(circle at 52% 48%, #ffd84d 0 22%, transparent 23%),
    radial-gradient(circle at 38% 56%, #fffdf6 0 42%, #f7f0dd 43% 100%);
  border: 4px solid #d5c7a7;
  box-shadow:
    0 24px 40px rgba(0, 0, 0, 0.3),
    inset 0 -10px 18px rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: beanEggSplat 2.1s cubic-bezier(0.18, 0.88, 0.24, 1.04) forwards;
}

.bean-egg-splat::before,
.bean-egg-splat::after {
  content: "";
  position: absolute;
  top: 74%;
  width: 20px;
  height: 14px;
  border-radius: 45% 55% 48% 52%;
  background: #f7f0dd;
  border: 2px solid #d5c7a7;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
  animation: beanEggDrip 1.8s ease-in forwards;
}

.bean-egg-splat::before {
  left: 34%;
  animation-delay: 0.35s;
}

.bean-egg-splat::after {
  left: 62%;
  animation-delay: 0.55s;
}

.bean-egg-splat__emoji {
  font-size: clamp(1.45rem, 4vw, 2.2rem);
  transform: translateY(-6px);
}

.bean-egg-splat__text {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.95rem, 2.8vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #4a2f0e;
  text-shadow: 0 1px 0 #fff4c9;
}

@keyframes lizzEggPop {
  from {
    opacity: 0;
    transform: translateY(-8px) rotate(-8deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-4deg) scale(1);
  }
}

@keyframes lizzEggShake {
  0%,
  100% {
    transform: rotate(-4deg) translateX(0);
  }
  25% {
    transform: rotate(-3deg) translateX(-2px);
  }
  75% {
    transform: rotate(-5deg) translateX(2px);
  }
}

@keyframes beanNoteSlam {
  from {
    opacity: 0;
    transform: translate(-50%, -65%) scale(0.72) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-2deg);
  }
}

@keyframes beanEggSplat {
  0% {
    opacity: 0;
    transform: translate(-50%, -75%) scale(0.22) rotate(-14deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -45%) scale(1.08) rotate(6deg);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.95) rotate(-2deg);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.98) rotate(0deg);
  }
}

@keyframes beanEggDrip {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  20% {
    opacity: 1;
  }
  75% {
    opacity: 1;
    transform: translateY(34px) scale(0.92, 1.18);
  }
  100% {
    opacity: 0;
    transform: translateY(52px) scale(0.9, 1.26);
  }
}

.bean-heart {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  font-size: clamp(1.2rem, 3.2vw, 2rem);
  transform: translate(-50%, -50%);
  animation: beanHeartBurst 1.9s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes beanHeartBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75) rotate(0deg);
  }
  14% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, -140px))
      )
      scale(1.32) rotate(var(--rot, 0deg));
  }
}

/* Final PG typography lock: keep all PG text in thin Helvetica. */
body.pg-mode,
body.pg-mode * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 100 !important;
  -webkit-font-smoothing: antialiased;
}

/* Final PG surface style: rainbow backing behind cards, title, tabs, and buttons. */

body.pg-mode .card--tasks,
.pg-mode .title-line,
body.pg-mode .tab,
body.pg-mode .tabs,
body.pg-mode .card--completed,
body.pg-mode .pg-switch,
body.pg-mode .streak-badge,
body.pg-mode .btn,
body.pg-mode .task-add-btn,
body.pg-mode .task-edit,
body.pg-mode .task-delete,
body.pg-mode .icon-button,
body.pg-mode .floating-reset {
  background:
    linear-gradient(
      135deg,
      rgba(255, 107, 107, 0.22),
      rgba(255, 217, 61, 0.22),
      rgba(107, 255, 154, 0.22),
      rgba(107, 180, 255, 0.22),
      rgba(195, 107, 255, 0.22)
    ),
    rgba(255, 255, 255, 0.9) !important;
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 124, 203, 0.35) !important;
}

/* Keep PG control text legible on the lighter rainbow surfaces. */
body.pg-mode .pg-switch,
body.pg-mode .pg-switch__label,
body.pg-mode .streak-badge,
body.pg-mode .streak-badge #streakCount,
body.pg-mode .btn,
body.pg-mode .task-add-btn,
body.pg-mode .task-edit,
body.pg-mode .task-delete,
body.pg-mode .icon-button,
body.pg-mode .floating-reset {
  color: #1d4ed8 !important;
}

/* Final sync: tabs + tasks/completed titles use matching card-like surfaces. */
.tabs,
.card--tasks .card-title,
.card--completed .card-title {
  /* background: var(--paper) !important; */
  border: 1px solid var(--paper-border) !important;
}

.card--tasks .card-title,
.card--completed .card-title {
  display: inline-block !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
}

/* PG mode keeps the same rainbow ring style as task/completed cards. */
body.pg-mode .tabs,
body.pg-mode .card--tasks .card-title,
/* .pg-mode .title-line:first-child,
.pg-mode .title-line:last-child, */
body.pg-mode .card--completed .card-title {
  background:
    linear-gradient(
      135deg,
      rgba(255, 107, 107, 0.22),
      rgba(255, 217, 61, 0.22),
      rgba(107, 255, 154, 0.22),
      rgba(107, 180, 255, 0.22),
      rgba(195, 107, 255, 0.22)
    ),
    rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 124, 203, 0.35) !important;
}

/* PG mode: remove border/ring around the top tabs container only. */
body.pg-mode .tabs {
  border: none !important;
  box-shadow: none !important;
}

/* Tighten spacing around ADD controls in both modes (desktop + mobile). */
.task-add {
  gap: 6px !important;
}

.task-input {
  padding: 8px 10px !important;
}

.task-add-btn {
  min-height: 30px !important;
  min-width: 52px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  font-size: clamp(0.72rem, 1.55vw, 0.84rem) !important;
  letter-spacing: 0.03em !important;
}

@media (max-width: 640px) {
  .task-add {
    gap: 5px !important;
  }

  .task-input {
    padding: 7px 9px !important;
  }
  .task-add-btn {
    min-height: 28px !important;
    min-width: 48px !important;
    padding: 4px 7px !important;
  }
}

/* Final cleanup: no borders around tab labels or completed tab headings. */
.tab,
body.pg-mode .tab,
body:not(.pg-mode) .tab {
  border: none !important;
  box-shadow: none !important;
}

.completed-groups--tabs .completed-group,
.completed-groups--tabs .completed-subheading,
body.pg-mode .completed-groups--tabs .completed-group,
body.pg-mode .completed-groups--tabs .completed-subheading {
  border: none !important;
  box-shadow: none !important;
}

/* Final tab spacing cleanup: single source of truth. */
.tabs,
body.pg-mode .tabs,
body:not(.pg-mode) .tabs {
  display: flex !important;
  width: auto !important;
  max-width: 760px !important;
  margin: 8px auto 14px !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  border-radius: 30px !important;
}

.tab,
body.pg-mode .tab,
body:not(.pg-mode) .tab {
  padding: 4px 9px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.6px !important;
}

.tab + .tab::before,
body.pg-mode .tab + .tab::before,
body:not(.pg-mode) .tab + .tab::before {
  display: none !important;
}

@media (max-width: 740px) {
  .tabs,
  body.pg-mode .tabs,
  body:not(.pg-mode) .tabs {
    max-width: 100% !important;
    margin: 6px auto 10px !important;
    padding: 4px 8px !important;
    gap: 4px !important;
  }

  .tab,
  body.pg-mode .tab,
  body:not(.pg-mode) .tab {
    padding: 3px 7px !important;
    font-size: clamp(0.92rem, 3.7vw, 1.08rem) !important;
    letter-spacing: 0.4px !important;
  }
}

/* PG mode: keep main title chips on the same surface style as cards. */
/* body.pg-mode .title-line {
  background:
    linear-gradient(
      135deg,
      rgba(255, 107, 107, 0.22),
      rgba(255, 217, 61, 0.22),
      rgba(107, 255, 154, 0.22),
      rgba(107, 180, 255, 0.22),
      rgba(195, 107, 255, 0.22)
    ),
    rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 124, 203, 0.35) !important;
} */

/* PG mode: task/completed title chips match SILLY STUFF border style. */
body.pg-mode .card--tasks .card-title,
body.pg-mode .card--completed .card-title,
body.pg-mode .completed-groups--tabs .completed-group {
  background:
    linear-gradient(
      135deg,
      rgba(255, 107, 107, 0.22),
      rgba(255, 217, 61, 0.22),
      rgba(107, 255, 154, 0.22),
      rgba(107, 180, 255, 0.22),
      rgba(195, 107, 255, 0.22)
    ),
    rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 124, 203, 0.35) !important;
}

/* Center task/completed card titles. */
body.pg-mode .card--tasks .card-title,
body.pg-mode .card--completed .card-title {
  display: block !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.pg-mode .completed-groups--tabs .completed-subheading {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center !important;
}

body.pg-mode
  .completed-groups--tabs
  .completed-subheading
  .completed-subheading__name {
  grid-column: 2;
  justify-self: center;
  text-align: center !important;
}

body.pg-mode
  .completed-groups--tabs
  .completed-subheading
  .completed-subheading__count {
  grid-column: 3;
  justify-self: end;
}