/* ============================================================
   BERRRY TO-DO // RETRO EDITION
   80s/90s CRT terminal + arcade vibe. Neon on deep space blue.
   Fonts: Press Start 2P (pixel headers) + VT323 (terminal body)
   ============================================================ */

:root {
  /* NEON DUSK — default (dark by nature, this is retro baby) */
  --bg-deep:   #12002e;
  --bg-mid:    #2a0845;
  --bg-glow1:  #ff2e88;   /* hot pink */
  --bg-glow2:  #00e5ff;   /* cyan */
  --panel:     #1a0533;
  --panel-2:   #240a44;
  --frame:     #ff2e88;
  --frame-2:   #00e5ff;
  --ink:       #f5e9ff;
  --ink-soft:  #b98bd6;
  --accent:    #ff2e88;
  --accent-2:  #00e5ff;
  --accent-3:  #ffe14d;   /* arcade yellow */
  --green:     #2bff88;
  --amber:     #ffb62e;
  --red:       #ff3b5c;
  --track:     #0c001f;
  --bevel-lt:  rgba(255,255,255,0.35);
  --bevel-dk:  rgba(0,0,0,0.7);
  --scan-op:   0.28;
  --grain-opacity: 0.10;
}

/* LIGHT MODE = "PAPER TERMINAL" — amber-on-cream retro monochrome */
html.dark-mode {
  --bg-deep:   #f4ecd8;
  --bg-mid:    #e8dcc0;
  --bg-glow1:  #d98324;
  --bg-glow2:  #b5651d;
  --panel:     #fbf4e2;
  --panel-2:   #f2e7cc;
  --frame:     #8a5a2b;
  --frame-2:   #b5651d;
  --ink:       #3a2410;
  --ink-soft:  #8a6a44;
  --accent:    #c1440e;
  --accent-2:  #8a5a2b;
  --accent-3:  #a9791d;
  --green:     #4e7a2e;
  --amber:     #b5651d;
  --red:       #b3261e;
  --track:     #ddcfa8;
  --bevel-lt:  rgba(255,255,255,0.8);
  --bevel-dk:  rgba(120,90,50,0.5);
  --scan-op:   0.12;
  --grain-opacity: 0.06;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "VT323", "Courier New", monospace;
  font-size: 20px;
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 80% -10%, var(--bg-mid), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, var(--bg-mid), transparent 55%),
    var(--bg-deep);
  background-attachment: fixed;
  min-height: 100vh;
  letter-spacing: 0.5px;
  transition: background 0.4s ease, color 0.3s ease;
  image-rendering: pixelated;
}

/* pixel display font helper */
.pixel { font-family: "Press Start 2P", monospace; letter-spacing: 0; }

/* neon orbs -> now blocky pixel-ish glowing squares */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
  opacity: 0.6;
}
body::before {
  width: 240px; height: 240px; top: 10%; right: -50px;
  background: var(--bg-glow1);
  animation: float-orb 12s ease-in-out infinite;
}
body::after {
  width: 300px; height: 300px; bottom: 6%; left: -70px;
  background: var(--bg-glow2);
  animation: float-orb 16s ease-in-out infinite reverse;
}
@keyframes float-orb {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.1); }
}
.shell, .page { position: relative; z-index: 2; }

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 34px 16px 60px;
}

.shell {
  width: 100%;
  max-width: 640px;
  animation: rise 0.5s steps(6) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Header ---- */
.app-header { margin-bottom: 24px; animation: rise 0.5s steps(6) .05s both; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-title {
  font-family: "Press Start 2P", monospace;
  font-weight: 400;
  font-size: clamp(15px, 4.4vw, 24px);
  margin: 0;
  line-height: 1.5;
  color: var(--accent-2);
  text-shadow:
    2px 2px 0 var(--accent),
    0 0 12px var(--accent-2);
  letter-spacing: 0;
}
.berry-pop { display: inline-block; animation: wobble 1.2s steps(4) infinite; }
@keyframes wobble {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-4px) rotate(8deg); }
}
.subtitle {
  color: var(--accent-3);
  margin: 12px 2px 0;
  font-size: 22px;
  text-shadow: 0 0 8px rgba(255,225,77,0.4);
}
.subtitle::before { content: "> "; color: var(--accent-2); }

/* blinking terminal cursor */
.term-cursor {
  display: inline-block;
  margin-left: 4px;
  color: var(--green);
  text-shadow: 0 0 8px var(--green);
  animation: term-blink 1s steps(1) infinite;
}
@keyframes term-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* Shared chunky arcade panel/bevel look */
.card,
.filter-tabs,
.task-row,
.theme-toggle,
.add-btn,
.add-input,
.pr-pill,
.filter-tab,
.check-btn,
.edit-input,
.empty {
  image-rendering: pixelated;
}

.theme-toggle {
  background: var(--panel);
  border: 3px solid var(--frame-2);
  border-radius: 0;
  width: 46px; height: 46px;
  font-size: 20px; cursor: pointer;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--bevel-dk), inset 2px 2px 0 var(--bevel-lt);
  transition: transform .1s steps(2);
}
.theme-toggle:hover { transform: translate(-1px,-1px); }
.theme-toggle:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--bevel-dk); }

/* ---- Cards / panels ---- */
.card {
  background: var(--panel);
  border: 3px solid var(--frame);
  border-radius: 0;
  padding: 18px;
  box-shadow: 6px 6px 0 var(--bevel-dk), inset 2px 2px 0 var(--bevel-lt);
  margin-bottom: 18px;
}
.prog-card { animation: rise 0.5s steps(6) .1s both; }
.add-card { animation: rise 0.5s steps(6) .15s both; border-color: var(--frame-2); }

/* ---- Progress ---- */
.prog-label { font-size: 20px; color: var(--ink); }
.prog-label::before { content: "["; color: var(--accent-2); }
.prog-label::after { content: "]"; color: var(--accent-2); }
.prog-pct {
  font-family: "Press Start 2P", monospace;
  font-size: 14px; color: var(--accent-3);
  text-shadow: 0 0 8px rgba(255,225,77,0.5);
}
.prog-track {
  height: 22px; border-radius: 0; background: var(--track);
  border: 3px solid var(--frame-2);
  overflow: hidden;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6);
  /* segmented arcade bar */
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 10px, rgba(0,0,0,0.35) 10px, rgba(0,0,0,0.35) 12px);
}
.prog-fill {
  height: 100%; border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 10px, var(--accent-2) 10px, var(--accent-2) 12px);
  transition: width .35s steps(8);
  box-shadow: 0 0 14px var(--accent);
}

/* ---- Add form ---- */
.add-row { display: flex; gap: 10px; }
.add-input {
  flex: 1;
  border: 3px solid var(--frame-2);
  background: var(--track);
  color: var(--green);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 22px;
  font-family: "VT323", monospace;
  outline: none;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6);
  transition: box-shadow .1s steps(2);
  text-shadow: 0 0 6px currentColor;
}
.add-input:focus { box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6), 0 0 0 3px var(--accent-3); }
.add-input::placeholder { color: var(--ink-soft); text-shadow: none; }
.add-input::before { content: "> "; }

.add-btn {
  background: var(--accent);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 0;
  padding: 0 20px;
  font-size: 12px;
  font-family: "Press Start 2P", monospace;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--bevel-dk), inset 2px 2px 0 var(--bevel-lt);
  transition: transform .08s steps(2);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.add-btn:hover { transform: translate(-1px,-1px); }
.add-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--bevel-dk); }
.press-start { animation: press-pulse 1.4s steps(2) infinite; }
@keyframes press-pulse {
  0%,100% { box-shadow: 4px 4px 0 var(--bevel-dk), inset 2px 2px 0 var(--bevel-lt); }
  50% { box-shadow: 4px 4px 0 var(--bevel-dk), inset 2px 2px 0 var(--bevel-lt), 0 0 16px var(--accent); }
}

.pr-picker { display: flex; gap: 8px; margin-top: 14px; }
.pr-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2);
  border: 3px solid var(--ink-soft);
  color: var(--ink-soft);
  border-radius: 0;
  padding: 6px 12px;
  font-size: 18px;
  font-family: "VT323", monospace;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--bevel-dk);
  transition: transform .08s steps(2);
  text-transform: uppercase;
}
.pr-pill:hover { transform: translate(-1px,-1px); }
.pr-pill:active { transform: translate(2px,2px); }
.pr-pill.active {
  color: var(--ink);
  border-color: var(--pill, var(--accent));
  box-shadow: 3px 3px 0 var(--bevel-dk), 0 0 12px var(--pill, var(--accent));
}
.pill-dot { width: 11px; height: 11px; border-radius: 0; display: inline-block; box-shadow: 0 0 6px currentColor; }

/* ---- Filter bar ---- */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin: 6px 2px 16px;
  animation: rise 0.5s steps(6) .2s both;
}
.filter-tabs {
  display: inline-flex;
  background: var(--panel);
  border: 3px solid var(--frame);
  border-radius: 0;
  padding: 3px;
  box-shadow: 4px 4px 0 var(--bevel-dk);
}
.filter-tab {
  border: none; background: transparent; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 0;
  font-size: 11px; font-family: "Press Start 2P", monospace;
  cursor: pointer; transition: none; text-transform: uppercase;
}
.filter-tab:hover { color: var(--accent-3); }
.filter-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.4);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.filter-right { display: flex; align-items: center; gap: 14px; }
.count-txt { font-size: 20px; color: var(--accent-2); text-shadow: 0 0 6px currentColor; }
.clear-btn {
  border: none; background: transparent; color: var(--red);
  font-size: 20px; font-family: "VT323", monospace; cursor: pointer;
  text-transform: uppercase;
}
.clear-btn::before { content: "[x] "; }
.clear-btn:hover { text-shadow: 0 0 8px var(--red); }

/* ---- Task list ---- */
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.task-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2);
  border: 3px solid var(--frame-2);
  border-left: 8px solid var(--pr, var(--accent));
  border-radius: 0;
  padding: 12px 14px;
  box-shadow: 5px 5px 0 var(--bevel-dk), inset 2px 2px 0 var(--bevel-lt);
  animation: pop-in .25s steps(4) both;
  transition: transform .08s steps(2);
}
.task-row:hover { transform: translate(-1px,-1px); }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.task-row.is-done { opacity: .55; }

.check-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 0;
  border: 3px solid var(--pr, var(--accent)); background: var(--track);
  color: var(--track); cursor: pointer; display: grid; place-items: center;
  transition: none; padding: 0;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5);
}
.check-btn:hover { box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px var(--pr, var(--accent)); }
.check-btn .check-svg { opacity: 0; transition: opacity .1s steps(2); }
.check-btn.checked { background: var(--pr, var(--accent)); box-shadow: 0 0 12px var(--pr, var(--accent)); }
.check-btn.checked .check-svg { opacity: 1; }

.pr-dot { width: 10px; height: 10px; border-radius: 0; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }

.task-text { flex: 1; font-size: 22px; line-height: 1.25; word-break: break-word; cursor: default; }
.is-done .task-text { text-decoration: line-through; color: var(--ink-soft); }

.edit-input {
  flex: 1; border: 3px solid var(--accent-3);
  background: var(--track); color: var(--green);
  border-radius: 0; padding: 5px 10px; font-size: 22px;
  font-family: "VT323", monospace; outline: none;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6);
}

.task-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .1s steps(2); }
.task-row:hover .task-actions { opacity: 1; }
@media (hover: none) { .task-actions { opacity: 1; } }

.act-btn {
  border: 2px solid transparent; background: transparent; color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: 0; cursor: pointer; display: grid; place-items: center;
  transition: none;
}
.act-btn:hover { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.act-btn.danger:hover { border-color: var(--red); color: var(--red); box-shadow: 0 0 8px var(--red); }
.act-btn:disabled { opacity: .25; cursor: not-allowed; }

/* ---- Empty ---- */
.empty {
  text-align: center; padding: 40px 20px;
  border: 3px dashed var(--frame-2);
  background: var(--panel);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.4);
  animation: rise .4s steps(6) both;
}
.empty-emoji { font-size: 50px; animation: wobble 1.2s steps(4) infinite; }
.empty-line { color: var(--accent-3); font-size: 22px; margin-top: 12px; text-shadow: 0 0 8px rgba(255,225,77,0.4); }
.empty-line::before { content: "!! "; color: var(--accent); }

/* ---- Footer ---- */
.footer { text-align: center; margin-top: 30px; font-size: 18px; color: var(--ink-soft); }
.footer a { color: var(--accent-2); text-decoration: none; text-shadow: 0 0 6px var(--accent-2); }
.footer a:hover { color: var(--accent-3); text-shadow: 0 0 8px var(--accent-3); }

/* ---- Confetti (now blocky pixels) ---- */
.confetti-bit {
  position: fixed; z-index: 999; pointer-events: none;
  border-radius: 0 !important;
  image-rendering: pixelated;
  animation: confetti-fly .7s steps(8) forwards;
}
@keyframes confetti-fly {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(180deg); opacity: 0; }
}

/* ---- CRT power-on boot flash ---- */
body::after,
body::before { z-index: 0; }
.boot-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #f5e9ff;
  animation: crt-boot 1.1s steps(6) 1 forwards;
}
@keyframes crt-boot {
  0%   { opacity: 0; transform: scaleY(0.002) scaleX(1); }
  6%   { opacity: 1; transform: scaleY(0.004) scaleX(1); }
  12%  { opacity: 1; transform: scaleY(1) scaleX(0.02); }
  30%  { opacity: 0.85; transform: scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(1); }
}

/* ---- Background pattern: pixel grid ---- */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--frame-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--frame-2) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 4%, #000 70%);
  mask-image: radial-gradient(circle at 50% 42%, transparent 4%, #000 70%);
  animation: grid-drift 30s linear infinite;
}
@keyframes grid-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 36px 36px, 36px 36px; }
}

/* ---- CRT scanlines ---- */
.crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.35) 3px,
    rgba(0,0,0,0.35) 4px
  );
  opacity: var(--scan-op);
  mix-blend-mode: multiply;
}

/* ---- CRT flicker + vignette ---- */
.crt-flicker {
  position: fixed;
  inset: 0;
  z-index: 51;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
  animation: crt-flicker 0.12s steps(2) infinite;
}
@keyframes crt-flicker {
  0% { opacity: 1; }
  50% { opacity: 0.94; }
  100% { opacity: 1; }
}

/* ---- Film grain overlay (kept, subtle) ---- */
.bg-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 49;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grain-shift 0.5s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 2%); }
  50%  { transform: translate(3%, -3%); }
  75%  { transform: translate(-2%, 4%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-pattern, .bg-grain, .crt-flicker, .berry-pop, .empty-emoji { animation: none; }
}

@media (max-width: 480px) {
  body { font-size: 18px; }
  .app-title { font-size: 15px; }
  .filter-tab { font-size: 9px; padding: 8px 10px; }
}