/* ═══════════════════════════════════════════
   POKIT — objects.css
   Skeuomorphic / Diegetic UI Objects
   "Every element is a cozy real-world object"
   ═══════════════════════════════════════════ */

/* ── 📸 Framed Picture (stat cards, account cards) ── */
.frame {
  background: var(--card);
  border: 3px solid var(--card-border);
  border-radius: 4px;
  padding: 16px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.5);
  position: relative;
  transition: transform 0.25s ease;
}
.frame:nth-child(odd) { transform: rotate(-0.5deg); }
.frame:nth-child(even) { transform: rotate(0.5deg); }
.frame:hover, .frame:active {
  transform: rotate(0deg) scale(1.02);
}

/* ── 🛋️ Cushion (main overview card) ── */
.cushion {
  background: var(--primary-light);
  border-radius: 24px;
  padding: 24px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 -3px 6px rgba(0,0,0,0.04),
    inset 0 3px 6px rgba(255,255,255,0.3);
  background-image: radial-gradient(
    ellipse at 50% 30%,
    rgba(255,255,255,0.15) 0%,
    transparent 70%
  );
  position: relative;
  overflow: hidden;
}

/* ── 📺 TV Screen (focus card / alerts) ── */
.tv-frame {
  background: #2D1F2D;
  border-radius: 20px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.tv-screen {
  background: linear-gradient(180deg, #1a1225 0%, #2d1f3d 100%);
  border-radius: 16px;
  padding: 16px;
  color: #F0E8F0;
  position: relative;
  overflow: hidden;
}
.tv-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  pointer-events: none;
}
.tv-stand {
  width: 40px;
  height: 6px;
  background: var(--card-border);
  border-radius: 0 0 4px 4px;
  margin: 0 auto;
}

/* ── 📝 Sticky Note ── */
.sticky {
  background: #FFF8DC;
  border-radius: 2px;
  padding: 12px 14px;
  box-shadow:
    2px 2px 6px rgba(0,0,0,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.03);
  transform: rotate(-1deg);
  position: relative;
}
.sticky::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 8px;
  background: rgba(212,120,142,0.6);
  border-radius: 1px;
}
.sticky-pink { background: #FFE4EC; }
.sticky-blue { background: #E4F0FF; }
.sticky-green { background: #E4FFE8; }
.sticky-yellow { background: #FFF8DC; }

/* ── 🍳 Recipe Card (paycheck form) ── */
.recipe-card {
  background: #FFFEF5;
  border: 1px solid #E8DCC8;
  border-radius: 4px;
  padding: 20px 20px 20px 36px;
  position: relative;
  box-shadow: 0 2px 8px rgba(139,105,20,0.08);
  /* Lined paper */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 27px,
    #E8DCC8 27px,
    #E8DCC8 28px
  );
  background-position: 0 40px;
}
/* Red margin line */
.recipe-card::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; bottom: 0;
  width: 1px;
  background: rgba(212,120,142,0.3);
}
.recipe-title {
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 16px;
}

/* ── 🪵 Cutting Board (split results) ── */
.cutting-board {
  background: linear-gradient(
    135deg,
    #DEB887 0%, #D2A870 20%, #C49A62 40%,
    #D2A870 60%, #DEB887 80%, #C49A62 100%
  );
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.12),
    inset 0 1px 2px rgba(255,255,255,0.2);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent, transparent 30px,
      rgba(139,90,43,0.06) 30px,
      rgba(139,90,43,0.06) 31px
    );
}
.cutting-board .split-row {
  background: rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-bottom: none;
  backdrop-filter: blur(4px);
}

/* ── 🧾 Receipt Roll (expense list) ── */
.receipt {
  background: #FEFEFE;
  border-radius: 2px;
  padding: 0;
  position: relative;
  border: 1px solid #EEE;
}
.receipt::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(
    135deg,
    var(--bg) 33.33%,
    transparent 33.33%,
    transparent 66.66%,
    var(--bg) 66.66%
  );
  background-size: 8px 6px;
}
.receipt-header {
  padding: 12px 16px;
  border-bottom: 2px dashed #DDD;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px dashed #EEE;
  font-variant-numeric: tabular-nums;
}
.receipt-row:last-child { border-bottom: none; }
.receipt-total {
  padding: 10px 16px;
  border-top: 2px dashed #DDD;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

/* ── 🗄️ Dresser Drawer (account groups, settings) ── */
.drawer {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.drawer-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
}
.drawer-knob {
  width: 28px;
  height: 4px;
  background: var(--card-border);
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
}
.drawer-body {
  padding: 0 16px 16px;
}

/* ── 💎 Jewelry Box (net worth / totals) ── */
.jewelry-box {
  background: linear-gradient(135deg, var(--card) 0%, #FFF8F0 100%);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(212,168,75,0.12),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.jewelry-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #F5E6B8, var(--accent));
}

/* ── 📌 Corkboard (calendar) ── */
.corkboard {
  background: #D4B896;
  border: 4px solid #8B6914;
  border-radius: 12px;
  padding: 12px;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.15),
    0 4px 12px rgba(0,0,0,0.1);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.03) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.04) 0%, transparent 30%);
}

/* ── 📸 Polaroid (badges / achievements) ── */
.polaroid {
  background: white;
  padding: 8px 8px 28px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  width: 72px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  position: relative;
}
/* Washi tape strip */
.polaroid::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-tilt, 2deg));
  width: 32px;
  height: 12px;
  background: rgba(212,168,75,0.35);
  border-radius: 1px;
  z-index: 2;
}
.polaroid:hover {
  transform: rotate(0deg) scale(1.08) !important;
  z-index: 2;
}
.polaroid-img {
  width: 56px;
  height: 56px;
  background: var(--bg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto;
}
.polaroid-label {
  font-family: var(--font-hand, 'Dancing Script', cursive);
  font-size: 9px;
  margin-top: 6px;
  color: var(--text);
  line-height: 1.2;
}
/* Scattered rotations + tape tilt */
.polaroid:nth-child(1) { transform: rotate(-3deg); --tape-tilt: 3deg; }
.polaroid:nth-child(2) { transform: rotate(2deg); --tape-tilt: -2deg; }
.polaroid:nth-child(3) { transform: rotate(-1deg); --tape-tilt: 1deg; }
.polaroid:nth-child(4) { transform: rotate(4deg); --tape-tilt: -3deg; }
.polaroid:nth-child(5) { transform: rotate(-2deg); --tape-tilt: 2deg; }
.polaroid:nth-child(6) { transform: rotate(1deg); --tape-tilt: -1deg; }

/* Polaroid shelf — horizontal scroll */
.polaroid-shelf {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 4px 12px;
  -webkit-overflow-scrolling: touch;
}
.polaroid-shelf::-webkit-scrollbar { display: none; }

/* ── 📓 Spiral Notebook (debts, challenges) ── */
.notebook {
  background: #FEFEFE;
  border-radius: 4px 12px 12px 4px;
  padding: 16px 16px 16px 32px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  /* Ruled lines */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 23px,
    #E8E4F0 23px,
    #E8E4F0 24px
  );
  background-position: 0 8px;
}
/* Spiral binding dots */
.notebook::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--primary) 0px,
    var(--primary) 6px,
    transparent 6px,
    transparent 16px
  );
}
/* Red margin line */
.notebook::after {
  content: '';
  position: absolute;
  left: 24px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(212,120,142,0.25);
}

/* ── 🔮 Crystal Ball (Oracle) ── */
.crystal-ball {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 20px auto;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255,255,255,0.2),
    rgba(212,120,142,0.15) 30%,
    rgba(45,31,61,0.6) 60%,
    rgba(26,18,37,0.9)
  );
  box-shadow:
    0 0 40px rgba(212,120,142,0.3),
    0 0 80px rgba(212,120,142,0.15),
    inset 0 0 40px rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.3);
  position: relative;
  cursor: pointer;
}
.crystal-ball-base {
  width: 80px;
  height: 16px;
  background: linear-gradient(to bottom, #8B6914, #6B4F10);
  border-radius: 0 0 40px 40px;
  margin: -8px auto 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ── 🧪 Test Tube (what-if scenarios) ── */
.test-tube {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 4px 4px 20px 20px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.test-tube-liquid {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(212,120,142,0.1), rgba(212,120,142,0.25));
  border-radius: 0 0 18px 18px;
  transition: height 0.6s ease;
}

/* ── 🎁 Wrapped Gift (Money Wrap locked state) ── */
.wrap-locked {
  text-align: center;
  padding: 40px 20px;
}
.wrap-gift {
  font-size: 80px;
}
.wrap-countdown {
  font-family: 'Dancing Script', cursive;
  font-size: 18px;
  color: var(--primary);
  margin-top: 12px;
}
.wrap-locked-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ── 🪞 Vanity Mirror (net worth display — Accounts) ── */
.vanity-mirror {
  background: linear-gradient(135deg, #FFFBF8 0%, var(--primary-100) 100%);
  border: 3px solid var(--wood-light);
  border-radius: 50% 50% 20px 20px / 60% 60% 20px 20px;
  padding: 24px 20px 20px;
  text-align: center;
  position: relative;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.08),
    inset 0 0 40px rgba(255,255,255,0.5);
  max-width: 260px;
  margin: 0 auto 20px;
}
.vanity-mirror::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 30%;
  height: 20%;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
}
[data-theme="dark"] .vanity-mirror {
  background: linear-gradient(135deg, var(--card) 0%, #2D1F28 100%);
  border-color: var(--wood-mid);
}

/* ── 🏆 Trophy Shelf (badges on Home) ── */
.trophy-shelf {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px 16px 22px;
  position: relative;
}
.trophy-shelf::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 6px;
  background: linear-gradient(to bottom,
    var(--wood-light) 0%,
    var(--wood-mid) 40%,
    var(--wood-dark) 100%
  );
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(107, 79, 16, 0.3);
}
.trophy-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary-100);
  border: 2px solid var(--primary-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.trophy-item:hover, .trophy-item:active {
  transform: translateY(-6px) scale(1.1);
}
.trophy-item.locked {
  opacity: 0.35;
  filter: grayscale(1);
}
[data-theme="dark"] .trophy-item {
  background: var(--primary-light);
  border-color: var(--card-border);
}

/* ── 📋 Clipboard (challenges) ── */
.clipboard {
  background: var(--cream);
  border: 1px solid var(--card-border);
  border-radius: 4px 4px 14px 14px;
  padding: 24px 16px 16px;
  position: relative;
  box-shadow: var(--shadow-cozy);
  margin-bottom: 12px;
}
.clipboard-clip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 16px;
  background: linear-gradient(to bottom, #BBB, #999);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}
.clipboard-clip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 6px;
  background: var(--cream);
  border-radius: 3px 3px 0 0;
}
[data-theme="dark"] .clipboard {
  background: var(--card);
}
[data-theme="dark"] .clipboard-clip {
  background: linear-gradient(to bottom, #555, #444);
}

/* ── 📜 Oracle Scroll (AI response) ── */
.oracle-scroll {
  background: linear-gradient(180deg, var(--parchment) 0%, #FFFEF8 8%, #FFFEF8 92%, var(--parchment) 100%);
  border: 1px solid var(--wood-light);
  border-radius: 4px;
  padding: 18px 20px;
  margin: 12px 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.oracle-scroll::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -2px;
  right: -2px;
  height: 10px;
  background: linear-gradient(to bottom, var(--parchment), var(--wood-light));
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.oracle-scroll::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -2px;
  right: -2px;
  height: 10px;
  background: linear-gradient(to top, var(--parchment), var(--wood-light));
  border-radius: 5px;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

/* ── 📺 Mantel Polaroid Stats (swipeable Home cards) ── */
.mantel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 4px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.mantel::-webkit-scrollbar { display: none; }
.mantel-card {
  flex-shrink: 0;
  width: 140px;
  background: white;
  padding: 10px 10px 24px;
  border-radius: 3px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.1),
    0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  scroll-snap-align: center;
  transition: transform 0.3s ease;
}
/* Washi tape */
.mantel-card::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-tilt, 1deg));
  width: 36px;
  height: 12px;
  background: rgba(212,168,75,0.3);
  border-radius: 1px;
}
.mantel-card:nth-child(1) { --tilt: -2deg; --tape-tilt: 3deg; }
.mantel-card:nth-child(2) { --tilt: 1deg; --tape-tilt: -2deg; }
.mantel-card:nth-child(3) { --tilt: -1deg; --tape-tilt: 1deg; }
.mantel-card:nth-child(4) { --tilt: 2deg; --tape-tilt: -3deg; }
.mantel-card:active {
  transform: rotate(0deg) scale(1.03);
}
.mantel-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  padding: 16px 4px 8px;
}
.mantel-label {
  font-family: var(--font-hand, 'Dancing Script', cursive);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
}
.mantel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding-bottom: 8px;
}
.mantel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-border);
  transition: background 0.3s;
}
.mantel-dot.active {
  background: var(--primary);
}
[data-theme="dark"] .mantel-card {
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════
   DARK MODE — Cozy Lamplight Variants
   ═══════════════════════════════════════════ */

[data-theme="dark"] .cushion {
  background: var(--primary-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.05);
  background-image: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.05) 0%, transparent 70%);
}
[data-theme="dark"] .sticky {
  background: #2D2520;
  color: #E8DCC8;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}
[data-theme="dark"] .sticky::before {
  background: rgba(232,139,165,0.5);
}
[data-theme="dark"] .recipe-card {
  background: #2A2518;
  border-color: #3D3528;
  color: #E8DCC8;
  background-image: repeating-linear-gradient(transparent, transparent 27px, #3D3528 27px, #3D3528 28px);
}
[data-theme="dark"] .recipe-card::before {
  background: rgba(232,139,165,0.2);
}
[data-theme="dark"] .cutting-board {
  background: linear-gradient(135deg, #5C4830, #4A3820, #5C4830);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(139,90,43,0.1) 30px, rgba(139,90,43,0.1) 31px);
}
[data-theme="dark"] .cutting-board .split-row {
  background: rgba(45,31,61,0.85);
  color: var(--text);
}
[data-theme="dark"] .receipt {
  background: var(--card);
  border-color: var(--card-border);
}
[data-theme="dark"] .receipt-header,
[data-theme="dark"] .receipt-row {
  border-color: var(--card-border);
}
[data-theme="dark"] .corkboard {
  background: #3D3028;
  border-color: #5C4830;
}
[data-theme="dark"] .polaroid {
  background: #2D2520;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .notebook {
  background: #1E1A28;
  color: #D4C8E0;
  background-image: repeating-linear-gradient(transparent, transparent 23px, #2D2840 23px, #2D2840 24px);
}
[data-theme="dark"] .jewelry-box {
  background: linear-gradient(135deg, var(--card) 0%, #2D2518 100%);
}
[data-theme="dark"] .frame {
  background: var(--card);
  border-color: var(--card-border);
}
[data-theme="dark"] .tv-frame {
  background: #0F0A18;
}