.dog-hero {
      background: linear-gradient(135deg, #0098ff 0%, #0060cc 100%);
      color: white;
      text-align: center;
      padding: 80px 1.5rem 2rem;
    }
    .dog-hero h1 {
      font-size: 2.8rem;
      margin-bottom: 0.2rem;
    }
    .dog-hero .subtitle {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 1rem;
    }
    .mascot-wrap {
      position: relative;
      display: inline-block;
    }
    .dog-hero .mascot {
      width: 120px;
      margin: 0 auto;
      border-radius: 50%;
      border: 4px solid rgba(255,255,255,0.4);
      transition: transform 0.3s, filter 0.3s;
    }
    .mascot-mood {
      font-size: 0.9rem;
      margin-top: 0.5rem;
      opacity: 0.85;
      min-height: 1.4em;
    }
    .mascot-wrap.mood-happy .mascot {
      transform: scale(1.08);
      filter: brightness(1.1) saturate(1.2);
      border-color: #ffeb3b;
    }
    .mascot-wrap.mood-excited .mascot {
      animation: mascotBounce 0.4s ease infinite alternate;
      filter: brightness(1.15) saturate(1.3);
      border-color: #ff9800;
    }
    .mascot-wrap.mood-sleepy .mascot {
      filter: brightness(0.85) saturate(0.7);
      transform: scale(0.95);
      border-color: rgba(255,255,255,0.2);
    }
    @keyframes mascotBounce {
      0% { transform: translateY(0) scale(1.08); }
      100% { transform: translateY(-6px) scale(1.12); }
    }

    /* ── Sticky gold bar ── */
    .sticky-gold-bar {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      z-index: 99;
      background: #fff3e0;
      border-bottom: 2px solid #ffe0b2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 0.3rem 1rem;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.05rem;
      color: #e65100;
      transform: translateY(-100%);
      transition: transform 0.25s ease;
      pointer-events: none;
    }
    .sticky-gold-bar.visible {
      transform: translateY(0);
      pointer-events: auto;
    }
    .sticky-shop-btn {
      padding: 0.15rem 0.7rem;
      background: linear-gradient(135deg, #ff9800, #ff5722);
      color: white;
      border: none;
      border-radius: 20px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
    }
    .sticky-shop-btn:hover { filter: brightness(1.1); }

    /* ── Dog XP hover popup ── */
    .dog-xp-popup {
      position: absolute;
      bottom: 128px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.97);
      border: 2px solid #ff9800;
      border-radius: 12px;
      padding: 0.4rem 0.75rem;
      font-family: 'Fredoka', sans-serif;
      white-space: nowrap;
      min-width: 140px;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
    }
    .walk-dog:hover .dog-xp-popup { opacity: 1; }
    .dog-xp-popup .xp-popup-name {
      font-weight: 700;
      color: #e65100;
      font-size: 0.9rem;
    }
    .dog-xp-popup .xp-popup-xp {
      color: #bf360c;
      font-size: 0.75rem;
    }
    .dog-xp-popup .xp-popup-bar-wrap {
      background: #ffe0b2;
      border-radius: 10px;
      height: 5px;
      width: 100%;
    }
    .dog-xp-popup .xp-popup-bar {
      height: 100%;
      background: linear-gradient(90deg, #ff9800, #ff5722);
      border-radius: 10px;
      transition: width 0.5s ease;
    }
    .walk-dog.xp-flash .dog-xp-popup { opacity: 1; }

    /* ── XP gain float ── */
    .xp-gain-float {
      position: fixed;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.05rem;
      color: #e65100;
      font-weight: 700;
      pointer-events: none;
      z-index: 500;
      animation: xpFloatUp 1.2s ease forwards;
    }
    @keyframes xpFloatUp {
      0%   { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-55px); }
    }

    /* Gold + Dog Info Banner */
    .info-banner {
      background: #fff3e0;
      text-align: center;
      padding: 0.8rem 1rem;
      font-family: 'Fredoka', sans-serif;
      border-bottom: 2px solid #ffe0b2;
    }
    .gold-row {
      font-size: 1.4rem;
      color: #e65100;
    }
    .dog-info-row {
      font-size: 0.95rem;
      color: #bf360c;
      margin-top: 0.2rem;
    }
    .bond-bar-wrap {
      max-width: 300px;
      margin: 0.4rem auto 0;
      background: #ffe0b2;
      border-radius: 20px;
      height: 10px;
      overflow: hidden;
    }
    .bond-bar {
      height: 100%;
      background: linear-gradient(90deg, #ff9800, #ff5722);
      border-radius: 20px;
      transition: width 0.5s ease;
    }
    #extraDogsInfo {
      margin-top: 0.3rem;
    }
    .extra-dog-info-row {
      font-size: 0.85rem;
      color: #bf360c;
      margin-top: 0.4rem;
    }
    .extra-dog-bond-bar-wrap {
      max-width: 200px;
      margin: 0.15rem auto 0;
      background: #ffe0b2;
      border-radius: 20px;
      height: 6px;
      overflow: hidden;
    }
    .extra-dog-bond-bar {
      height: 100%;
      background: linear-gradient(90deg, #ff9800, #ff5722);
      border-radius: 20px;
      transition: width 0.5s ease;
    }
    .adopt-more-btn {
      display: inline-block;
      margin-top: 0.5rem;
      margin-right: 0.5rem;
      padding: 0.3rem 0.9rem;
      background: linear-gradient(135deg, #ff9800, #ff5722);
      color: white;
      border: none;
      border-radius: 10px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .adopt-more-btn:hover { transform: scale(1.05); filter: brightness(1.1); }
    .adoption-cost {
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      color: #ffe0b2;
    }
    .adoption-cost.hidden { display: none; }
    .extra-dog-name {
      position: absolute;
      bottom: -18px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      color: #333;
      background: rgba(255,255,255,0.85);
      padding: 1px 6px;
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
    }
    .bonus-row {
      display: flex;
      justify-content: center;
      gap: 0.6rem;
      margin-top: 0.4rem;
      flex-wrap: wrap;
    }
    .bonus-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.2rem 0.6rem;
      border-radius: 12px;
      font-size: 0.75rem;
      font-family: 'Fredoka', sans-serif;
      background: rgba(255,152,0,0.15);
      color: #e65100;
      border: 1px solid rgba(255,152,0,0.25);
      position: relative;
      cursor: help;
    }
    .bonus-pill.xp-bonus {
      background: rgba(76,175,80,0.12);
      color: #2e7d32;
      border-color: rgba(76,175,80,0.25);
    }
    .bonus-pill.gold-bonus {
      background: rgba(255,152,0,0.12);
      color: #e65100;
      border-color: rgba(255,152,0,0.25);
    }

    /* Custom tooltips */
    [data-tooltip] {
      position: relative;
      cursor: help;
    }
    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      font-weight: 400;
      white-space: pre-line;
      max-width: 280px;
      width: max-content;
      z-index: 500;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      line-height: 1.4;
      text-align: left;
    }
    [data-tooltip]::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #333;
      z-index: 501;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
      opacity: 1;
    }
    /* For elements near top of page, flip tooltip below */
    .tooltip-below[data-tooltip]::after {
      bottom: auto;
      top: calc(100% + 8px);
    }
    .tooltip-below[data-tooltip]::before {
      bottom: auto;
      top: calc(100% + 2px);
      border-top-color: transparent;
      border-bottom-color: #333;
    }

    /* Habit XP indicator */
    .habit-xp-info {
      font-size: 0.7rem;
      color: #4caf50;
      padding: 0 1rem 0.2rem;
      padding-left: calc(1rem + 22px + 0.75rem);
      font-family: 'Fredoka', sans-serif;
      position: relative;
      cursor: help;
    }

    /* Today's progress bar */
    .today-progress {
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem 1.5rem 0;
    }
    .today-progress-label {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 0.4rem;
      display: flex;
      justify-content: space-between;
    }
    .today-paws {
      letter-spacing: 2px;
      font-size: 1.1rem;
    }
    .today-bar-wrap {
      background: #e0e0e0;
      border-radius: 20px;
      height: 12px;
      overflow: hidden;
    }
    .today-bar {
      height: 100%;
      background: linear-gradient(90deg, #66bb6a, #43a047);
      border-radius: 20px;
      transition: width 0.4s ease;
    }

    /* Daily challenge */
    .daily-challenge {
      max-width: 600px;
      margin: 0 auto;
      padding: 0.75rem 1.5rem;
    }
    .challenge-card {
      background: linear-gradient(135deg, #e8eaf6, #c5cae9);
      border-radius: 10px;
      padding: 0.7rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.7rem;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.9rem;
      color: #283593;
    }
    .challenge-icon { font-size: 1.4rem; }
    .challenge-text { flex: 1; }
    .challenge-check {
      font-size: 1.3rem;
      opacity: 0.4;
    }
    .challenge-card.done {
      background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
      color: #2e7d32;
    }
    .challenge-card.done .challenge-check { opacity: 1; }
    .challenge-claim-btn {
      background: #f9a825;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 0.25rem 0.75rem;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
    }
    .challenge-claim-btn:hover { background: #f57f17; }

    .habit-app {
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem 1.5rem 1.5rem;
    }

    .add-form {
      margin-bottom: 1.5rem;
    }
    .add-form-row {
      display: flex;
      gap: 0.5rem;
    }
    .add-form input[type="text"] {
      flex: 1;
      padding: 0.7rem 1rem;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
      font-family: 'Assistant', sans-serif;
    }
    .add-form input[type="text"]:focus {
      outline: none;
      border-color: var(--blue);
    }
    .add-form button[type="submit"] {
      padding: 0.7rem 1.2rem;
      background: var(--blue);
      color: white;
      border: none;
      border-radius: 8px;
      font-family: 'Fredoka', sans-serif;
      font-size: 1rem;
      cursor: pointer;
    }
    .add-form button[type="submit"]:hover {
      background: var(--blue-dark);
    }
    .day-picker-row {
      margin-top: 0.5rem;
    }
    .day-picker-label {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.8rem;
      color: #888;
      margin-bottom: 0.3rem;
    }
    .day-picker {
      display: flex;
      gap: 0.35rem;
    }
    .day-toggle {
      flex: 1;
      height: 32px;
      border: 2px solid #ddd;
      border-radius: 6px;
      background: white;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.8rem;
      color: #999;
      cursor: pointer;
      transition: all 0.15s;
      padding: 0;
    }
    .day-toggle.active {
      background: var(--blue);
      border-color: var(--blue);
      color: white;
    }
    .day-toggle:hover {
      border-color: var(--blue);
    }
    .habit-days {
      font-size: 0.7rem;
      color: #999;
      padding: 0 1rem 0.1rem;
      padding-left: calc(1rem + 22px + 0.75rem);
      font-family: 'Fredoka', sans-serif;
      cursor: pointer;
      display: inline-block;
    }
    .habit-days:hover {
      color: var(--blue);
      text-decoration: underline;
    }
    .habit-edit-days {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.3rem 1rem 0.4rem;
      padding-left: calc(1rem + 22px + 0.75rem);
    }
    .habit-edit-days .day-toggle {
      width: 28px;
      height: 24px;
      font-size: 0.65rem;
    }

    .habit-list {
      list-style: none;
    }
    .habit-item {
      background: #f9f9f9;
      border-radius: 10px;
      margin-bottom: 0.5rem;
      transition: background 0.2s;
      overflow: hidden;
    }
    .habit-item.checked {
      background: #e8f5e9;
    }
    .habit-item.off-day {
      opacity: 0.45;
    }
    .habit-item.off-day .habit-name {
      text-decoration: none;
      font-style: italic;
    }
    .drag-handle {
      cursor: grab;
      color: #ccc;
      font-size: 1.1rem;
      line-height: 1;
      user-select: none;
      flex-shrink: 0;
      padding: 0 2px 0 0;
    }
    .drag-handle:hover {
      color: #999;
    }
    .habit-item.dragging {
      opacity: 0.45;
    }
    .habit-item.drag-over-top {
      box-shadow: 0 -3px 0 0 #7c5cbf;
    }
    .habit-item.drag-over-bottom {
      box-shadow: 0 3px 0 0 #7c5cbf;
    }
    .habit-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.8rem 1rem 0.4rem;
    }
    .habit-item input[type="checkbox"] {
      width: 22px;
      height: 22px;
      accent-color: #4caf50;
      cursor: pointer;
      flex-shrink: 0;
    }
    .habit-name {
      flex: 1;
      font-size: 1.05rem;
    }
    .habit-item.checked .habit-name {
      text-decoration: line-through;
      opacity: 0.6;
    }
    .habit-streak {
      font-size: 0.8rem;
      color: #888;
      white-space: nowrap;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .bone-chain {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex-wrap: wrap;
      max-width: 200px;
      cursor: default;
      user-select: none;
    }
    .bone-single {
      font-size: 1rem;
      line-height: 1;
    }
    .bone-bundle {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      border-radius: 5px;
      padding: 1px 3px;
      line-height: 1;
      gap: 1px;
      cursor: default;
    }
    .bone-bundle-10 {
      background: linear-gradient(135deg, #fff3e0, #ffe0b2);
      border: 1px solid #ff9800;
    }
    .bone-bundle-100 {
      background: linear-gradient(135deg, #fff8e1, #ffecb3);
      border: 1.5px solid #ffc107;
    }
    .bundle-bones {
      font-size: 0.62rem;
      letter-spacing: -3px;
    }
    .bone-bundle-100 .bundle-bones {
      font-size: 0.72rem;
    }
    .bundle-label {
      font-size: 0.55rem;
      font-weight: bold;
      color: #bf360c;
      letter-spacing: 0;
    }
    .bone-bundle-100 .bundle-label {
      color: #f57f17;
    }
    .habit-delete {
      background: none;
      border: none;
      color: #ccc;
      font-size: 1.2rem;
      cursor: pointer;
      padding: 0 0.3rem;
    }
    .habit-delete:hover {
      color: #e53935;
    }
    /* Per-habit treat bar */
    .treat-bar-wrap {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0 1rem 0.6rem;
      padding-left: calc(1rem + 22px + 0.75rem);
    }
    .treat-bar-track {
      flex: 1;
      height: 6px;
      background: #e0e0e0;
      border-radius: 6px;
      overflow: hidden;
    }
    .treat-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffcc02, #ff9800);
      border-radius: 6px;
      transition: width 0.4s ease;
    }
    .treat-bar-label {
      font-size: 0.7rem;
      color: #999;
      white-space: nowrap;
      font-family: 'Fredoka', sans-serif;
    }
    /* ── Comeback nudge & quest ── */
    .habit-comeback {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 1rem 0.3rem calc(1rem + 22px + 0.75rem);
      font-size: 0.78rem;
      font-family: 'Fredoka', sans-serif;
    }
    .habit-comeback-nudge {
      color: #7f5500;
      background: #fff8e6;
      border-top: 1px solid #ffe0b2;
    }
    .comeback-sleep-text { flex: 1; }
    .comeback-tip-btn {
      background: #fff3e0;
      border: 1px solid #ffcc80;
      border-radius: 12px;
      padding: 2px 10px;
      font-size: 0.75rem;
      cursor: pointer;
      color: #e65100;
      font-family: 'Fredoka', sans-serif;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .comeback-tip-btn:hover { background: #ffe0b2; border-color: #ffa726; }
    .habit-comeback-active {
      color: #1565c0;
      background: #e3f0ff;
      border-top: 1px solid #bbdefb;
      font-weight: 500;
    }

    /* ── Comeback popup ── */
    .comeback-popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .comeback-popup-overlay.hidden { display: none; }
    .comeback-popup {
      background: #fff;
      border-radius: 18px;
      padding: 1.5rem;
      max-width: 380px;
      width: 100%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      position: relative;
      font-family: 'Assistant', sans-serif;
    }
    .comeback-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: #aaa;
      line-height: 1;
      padding: 0;
    }
    .comeback-close:hover { color: #555; }
    .comeback-header {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 0.6rem;
    }
    .comeback-emoji { font-size: 2.2rem; line-height: 1; }
    .comeback-title {
      font-size: 1rem;
      font-weight: 600;
      font-family: 'Fredoka', sans-serif;
      line-height: 1.3;
      padding-right: 1.5rem;
    }
    .comeback-habit-name {
      font-size: 0.9rem;
      color: var(--blue);
      font-weight: 600;
      margin-top: 3px;
    }
    .comeback-days-text {
      font-size: 0.82rem;
      color: #888;
      margin-bottom: 0.75rem;
    }
    .comeback-tip-card {
      background: #f0f7ff;
      border-left: 3px solid var(--blue);
      border-radius: 8px;
      padding: 0.65rem 0.75rem;
      margin-bottom: 0.75rem;
    }
    .comeback-tip-header {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.25rem;
    }
    .comeback-tip-icon { font-size: 1.1rem; }
    .comeback-tip-title {
      font-size: 0.9rem;
      font-family: 'Fredoka', sans-serif;
    }
    .comeback-tip-text {
      font-size: 0.82rem;
      color: #555;
      margin: 0;
      line-height: 1.45;
    }
    .comeback-quest-box {
      background: linear-gradient(135deg, #fff8e1, #fff3e0);
      border: 1.5px solid #ffca28;
      border-radius: 10px;
      padding: 0.65rem 0.8rem;
      margin-bottom: 1rem;
    }
    .comeback-quest-title {
      font-size: 0.9rem;
      font-weight: 700;
      font-family: 'Fredoka', sans-serif;
      color: #e65100;
      margin-bottom: 0.2rem;
    }
    .comeback-quest-desc { font-size: 0.8rem; color: #7f4e00; }
    .comeback-actions { display: flex; gap: 0.5rem; }
    .comeback-accept-btn {
      flex: 1;
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 0.6rem;
      font-size: 0.95rem;
      font-family: 'Fredoka', sans-serif;
      cursor: pointer;
    }
    .comeback-accept-btn:hover { background: var(--blue-dark); }
    .comeback-later-btn {
      background: #f0f0f0;
      color: #666;
      border: none;
      border-radius: 10px;
      padding: 0.6rem 1rem;
      font-size: 0.9rem;
      font-family: 'Fredoka', sans-serif;
      cursor: pointer;
    }
    .comeback-later-btn:hover { background: #e0e0e0; }

    .treat-bonus {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-family: 'Fredoka', sans-serif;
      font-size: 1.8rem;
      color: #ff9800;
      text-shadow: 1px 1px 0 #fff;
      z-index: 250;
      pointer-events: none;
      animation: treatPop 1.2s ease forwards;
    }
    @keyframes treatPop {
      0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
      30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
      100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
    }

    .encouragement {
      text-align: center;
      margin-top: 1.5rem;
      min-height: 2.5rem;
    }
    .encouragement p {
      font-family: 'Fredoka', sans-serif;
      font-size: 1.2rem;
      color: #4caf50;
      animation: popIn 0.3s ease-out;
    }
    @keyframes popIn {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    .empty-state {
      text-align: center;
      color: #aaa;
      padding: 2rem 1rem;
      font-size: 1.1rem;
    }

    /* Random event popup */
    .random-event {
      position: fixed;
      bottom: 2rem;
      right: 1.5rem;
      background: white;
      border: 2px solid #90caf9;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      box-shadow: 0 6px 24px rgba(0,0,0,0.15);
      z-index: 250;
      max-width: 280px;
      font-family: 'Fredoka', sans-serif;
      cursor: pointer;
      animation: slideUp 0.4s ease;
      transition: transform 0.15s;
    }
    .random-event:hover { transform: scale(1.03); }
    .random-event:active { transform: scale(0.97); }
    .random-event-icon { font-size: 2rem; text-align: center; margin-bottom: 0.3rem; }
    .random-event-text { font-size: 0.95rem; color: #333; text-align: center; }
    .random-event-hint { font-size: 0.75rem; color: #999; text-align: center; margin-top: 0.3rem; }
    @keyframes slideUp {
      0% { opacity: 0; transform: translateY(30px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Badges section */
    .badges-section {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 1.5rem 1.5rem;
    }
    .badges-title {
      font-family: 'Fredoka', sans-serif;
      font-size: 1.3rem;
      margin-bottom: 0.75rem;
      color: #333;
    }
    .badges-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .badge {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.75rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-family: 'Fredoka', sans-serif;
      background: #eee;
      color: #aaa;
      transition: all 0.3s;
    }
    .badge.unlocked {
      background: #fff8e1;
      color: #f57f17;
      border: 1px solid #ffe082;
    }
    .badge .badge-icon {
      font-size: 1.1rem;
    }
    .badge-toast {
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: #fff8e1;
      border: 2px solid #ffe082;
      color: #f57f17;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.1rem;
      padding: 0.75rem 1.5rem;
      border-radius: 12px;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, transform 0.3s;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    .badge-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Level-up toast */
    .levelup-toast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-family: 'Fredoka', sans-serif;
      font-size: 1.6rem;
      color: #ff6f00;
      text-shadow: 2px 2px 0 #fff;
      z-index: 300;
      pointer-events: none;
      animation: levelupPop 1.5s ease forwards;
      white-space: nowrap;
    }
    @keyframes levelupPop {
      0% { transform: translate(-50%, -50%) scale(0) rotate(-5deg); opacity: 1; }
      30% { transform: translate(-50%, -50%) scale(1.2) rotate(2deg); opacity: 1; }
      70% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
      100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
    }

    /* Gold float animation */
    .gold-float {
      position: fixed;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.1rem;
      color: #e65100;
      text-shadow: 1px 1px 0 #fff;
      z-index: 260;
      pointer-events: none;
      animation: goldFloatUp 1.2s ease forwards;
    }
    @keyframes goldFloatUp {
      0% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-50px) scale(1.2); }
    }

    /* Pet heart animation */
    .pet-heart {
      position: fixed;
      font-size: 1.5rem;
      z-index: 260;
      pointer-events: none;
      animation: heartFloat 0.8s ease forwards;
    }
    @keyframes heartFloat {
      0% { opacity: 1; transform: translateY(0) scale(0.5); }
      50% { transform: translateY(-20px) scale(1.2); }
      100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
    }

    /* Droppable gold coins (from petting / digging / away) */
    .gold-coin {
      position: fixed;
      font-size: 1.5rem;
      z-index: 255;
      cursor: default;
      pointer-events: none;
      user-select: none;
      display: inline-block;
      line-height: 1;
    }
    .coin-face { display: block; }
    .coin-value {
      position: absolute;
      bottom: -6px;
      right: -6px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      background: #ffd700;
      color: #5a3000;
      border: 1px solid #b8860b;
      border-radius: 8px;
      padding: 0 3px;
      line-height: 1.4;
      min-width: 14px;
      text-align: center;
      pointer-events: none;
    }
    .gold-coin.landed {
      pointer-events: auto;
      cursor: pointer;
      animation: coinBob 1.4s ease-in-out infinite;
    }
    .gold-coin.landed:hover {
      animation: none;
      transform: scale(1.35) translateY(-5px);
      filter: brightness(1.3) drop-shadow(0 0 7px #ffd700);
    }
    .gold-coin.collecting {
      pointer-events: none;
      animation: coinCollect 0.35s ease forwards !important;
    }
@keyframes coinBob {
      0%, 100% { transform: translateY(0) scale(1); }
      50%       { transform: translateY(-5px) scale(1.05); }
    }
    @keyframes coinCollect {
      0%   { transform: scale(1) translateY(0); opacity: 1; }
      55%  { transform: scale(1.5) translateY(-18px); opacity: 0.85; }
      100% { transform: scale(0.1) translateY(-32px); opacity: 0; }
    }

    /* Zoomies */
    .zoomies-banner {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-family: 'Fredoka', sans-serif;
      font-size: 2.5rem;
      color: #ff6f00;
      text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff;
      white-space: nowrap;
      z-index: 301;
      animation: zoomiesPop 0.6s ease forwards;
    }
    @keyframes zoomiesPop {
      0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); }
      50% { transform: translate(-50%, -50%) scale(1.2) rotate(3deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    }
    .paw-confetti {
      position: fixed;
      font-size: 1.5rem;
      z-index: 300;
      pointer-events: none;
      animation: pawFall linear forwards;
    }
    @keyframes pawFall {
      0% { opacity: 1; transform: translateY(0) rotate(0deg); }
      100% { opacity: 0; transform: translateY(100vh) rotate(360deg); }
    }
    @keyframes screenWiggle {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px) rotate(-0.5deg); }
      75% { transform: translateX(4px) rotate(0.5deg); }
    }
    body.wiggle {
      animation: screenWiggle 0.15s ease 4;
    }

    /* Debug panel */
    .debug-toggle {
      position: fixed;
      top: 55px;
      right: 0.5rem;
      z-index: 180;
      background: rgba(0,0,0,0.3);
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 0.65rem;
      padding: 0.2rem 0.4rem;
      cursor: pointer;
      font-family: monospace;
      opacity: 0.5;
    }
    .debug-toggle:hover { opacity: 1; }
    .debug-panel {
      position: fixed;
      top: 75px;
      right: 0.5rem;
      z-index: 180;
      background: white;
      border: 2px solid #ccc;
      border-radius: 8px;
      padding: 0.75rem;
      font-family: monospace;
      font-size: 0.75rem;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
      display: none;
      width: 240px;
    }
    .debug-panel.open { display: block; }
    .debug-panel label {
      display: block;
      margin-bottom: 0.3rem;
      font-weight: bold;
      color: #666;
    }
    .debug-panel input[type="date"] {
      width: 100%;
      padding: 0.3rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
    }
    .debug-panel .debug-btns {
      display: flex;
      gap: 0.3rem;
      flex-wrap: wrap;
    }
    .debug-panel button {
      padding: 0.25rem 0.5rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: #f5f5f5;
      cursor: pointer;
      font-family: monospace;
      font-size: 0.7rem;
    }
    .debug-panel button:hover { background: #e0e0e0; }
    .debug-panel .debug-info {
      margin-top: 0.5rem;
      color: #999;
      font-size: 0.65rem;
      border-top: 1px solid #eee;
      padding-top: 0.4rem;
    }

    /* Walking dog companion */
    .walk-dog {
      position: fixed;
      bottom: 0;
      z-index: 150;
      cursor: grab;
      user-select: none;
      pointer-events: auto;
      cursor: pointer;
      width: 120px;
      height: 120px;
      overflow: visible;
    }
    .walk-dog img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      transition: filter 0.3s;
      animation: dogBob 0.4s ease-in-out infinite alternate;
    }
    .walk-dog.facing-left img {
      transform: scaleX(-1);
    }
    .walk-dog.happy img {
      animation: dogHappy 0.3s ease infinite alternate;
      filter: brightness(1.15) saturate(1.3);
    }
    .walk-dog.happy.facing-left img {
      animation: dogHappyFlipped 0.3s ease infinite alternate;
      filter: brightness(1.15) saturate(1.3);
    }
    .walk-dog.sleeping img {
      filter: brightness(0.8) saturate(0.5);
      animation: dogSleep 2s ease-in-out infinite alternate;
    }
    .walk-dog.sleeping.facing-left img {
      filter: brightness(0.8) saturate(0.5);
      animation: dogSleepFlipped 2s ease-in-out infinite alternate;
    }
    .walk-dog.digging img {
      animation: dogDig 0.2s ease-in-out infinite alternate;
    }
    .walk-dog.digging.facing-left img {
      animation: dogDigFlipped 0.2s ease-in-out infinite alternate;
    }
    @keyframes dogDig {
      0% { transform: translateY(0) rotate(-3deg); }
      100% { transform: translateY(2px) rotate(3deg); }
    }
    @keyframes dogDigFlipped {
      0% { transform: scaleX(-1) translateY(0) rotate(3deg); }
      100% { transform: scaleX(-1) translateY(2px) rotate(-3deg); }
    }
    .walk-dog .dog-speech {
      position: absolute;
      bottom: 100%;
      left: 0;
      background: white;
      border: 2px solid #90caf9;
      border-radius: 12px;
      padding: 0.3rem 0.6rem;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.7rem;
      color: #333;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 4px;
    }
    .walk-dog .dog-speech::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 15px;
      border: 5px solid transparent;
      border-top-color: white;
    }
    .walk-dog .dog-speech.show {
      opacity: 1;
    }
    .walk-dog .dog-exclaim {
      position: absolute;
      bottom: 100%;
      right: -4px;
      background: #fff9c4;
      border: 2.5px solid #f9a825;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      color: #e65100;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
      margin-bottom: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      z-index: 10;
    }
    .walk-dog .dog-exclaim.show {
      opacity: 1;
      pointer-events: auto;
      animation: exclaimBounce 0.6s ease-in-out infinite alternate;
    }
    @keyframes exclaimBounce {
      0%   { transform: translateY(0) scale(1); }
      100% { transform: translateY(-6px) scale(1.18); }
    }
    .walk-dog .dog-exclaim::after {
      content: '';
      position: absolute;
      top: 100%;
      right: 8px;
      border: 5px solid transparent;
      border-top-color: #f9a825;
    }
    @keyframes dogBob {
      0% { transform: translateY(0); }
      100% { transform: translateY(-4px); }
    }
    @keyframes dogHappy {
      0% { transform: translateY(0) rotate(-5deg) scale(1.05); }
      100% { transform: translateY(-10px) rotate(5deg) scale(1.1); }
    }
    @keyframes dogHappyFlipped {
      0% { transform: scaleX(-1) translateY(0) rotate(5deg) scale(1.05); }
      100% { transform: scaleX(-1) translateY(-10px) rotate(-5deg) scale(1.1); }
    }
    @keyframes dogSleep {
      0% { transform: translateY(0) scale(0.95); }
      100% { transform: translateY(-2px) scale(0.95); }
    }
    @keyframes dogSleepFlipped {
      0% { transform: scaleX(-1) translateY(0) scale(0.95); }
      100% { transform: scaleX(-1) translateY(-2px) scale(0.95); }
    }
    .walk-dog.zoomies img {
      animation: dogZoomBob 0.15s ease-in-out infinite alternate;
      filter: brightness(1.2) saturate(1.4);
    }
    .walk-dog.zoomies.facing-left img {
      animation: dogZoomBobFlipped 0.15s ease-in-out infinite alternate;
      filter: brightness(1.2) saturate(1.4);
    }
    @keyframes dogZoomBob {
      0% { transform: translateY(0); }
      100% { transform: translateY(-6px); }
    }
    @keyframes dogZoomBobFlipped {
      0% { transform: scaleX(-1) translateY(0); }
      100% { transform: scaleX(-1) translateY(-6px); }
    }
    .walk-dog .zzz {
      position: absolute;
      top: -10px;
      right: -5px;
      font-size: 0.9rem;
      animation: zzzFloat 1.5s ease-in-out infinite;
    }
    @keyframes zzzFloat {
      0%, 100% { opacity: 0.4; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-8px); }
    }

    /* ── Hat slot on walking dog ── */
    .walk-dog .hat-slot {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.8rem;
      pointer-events: none;
      z-index: 2;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    }
    .walk-dog.facing-left .hat-slot {
      transform: translateX(-50%) scaleX(-1);
    }

    /* ── Shelter ground strip ── */
    .shelter-strip {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      z-index: 140;
      pointer-events: none;
      display: flex;
      align-items: flex-end;
      padding: 0 20px;
      gap: 0;
    }
    .shelter-item {
      font-size: 1.6rem;
      position: absolute;
      bottom: 6px;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
      transition: opacity 0.3s;
    }

    /* ── Shop button in banner ── */
    .shop-btn {
      display: inline-block;
      margin-top: 0.4rem;
      padding: 0.3rem 1rem;
      background: linear-gradient(135deg, #ff9800, #ff5722);
      color: white;
      border: none;
      border-radius: 20px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 2px 8px rgba(255,87,34,0.3);
    }
    .shop-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(255,87,34,0.4);
    }

    /* ── Shop Overlay ── */
    .shop-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow-y: auto;
      padding: 2rem 1rem;
    }
    .shop-overlay.hidden { display: none; }
    .shop-content {
      max-width: 600px;
      width: 100%;
      text-align: center;
    }
    .shop-content h1 {
      font-family: 'Fredoka', sans-serif;
      font-size: 2rem;
      color: #e65100;
      margin-bottom: 0.3rem;
    }
    .shop-gold {
      font-family: 'Fredoka', sans-serif;
      font-size: 1.2rem;
      color: #bf360c;
      margin-bottom: 1.2rem;
    }
    .shop-close {
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      background: none;
      border: none;
      font-size: 2rem;
      color: #bf360c;
      cursor: pointer;
      font-family: 'Fredoka', sans-serif;
      line-height: 1;
    }
    .shop-close:hover { transform: scale(1.1); }
    .shop-category-title {
      font-family: 'Fredoka', sans-serif;
      font-size: 1.2rem;
      color: #e65100;
      margin: 1.2rem 0 0.6rem;
      text-align: left;
      border-bottom: 2px solid #ffcc80;
      padding-bottom: 0.3rem;
    }
    .shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 0.8rem;
    }
    .shop-item-card {
      background: white;
      border-radius: 16px;
      padding: 0.8rem;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      border: 2px solid transparent;
      transition: border-color 0.2s, transform 0.15s;
      cursor: pointer;
      position: relative;
    }
    .shop-item-card:hover {
      border-color: #ff9800;
      transform: translateY(-2px);
    }
    .shop-item-card.owned {
      border-color: #4caf50;
    }
    .shop-item-card.equipped {
      border-color: #ff9800;
      background: #fff8e1;
      box-shadow: 0 0 0 2px #ff9800, 0 2px 8px rgba(255,152,0,0.2);
    }
    .shop-item-emoji {
      font-size: 2.2rem;
      margin-bottom: 0.3rem;
    }
    .shop-item-name {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: #333;
    }
    .shop-item-price {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      color: #e65100;
      margin-top: 0.2rem;
    }
    .shop-item-price.bought {
      color: #4caf50;
    }
    .shop-item-status {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.65rem;
      color: #ff9800;
      font-weight: 600;
      margin-top: 0.1rem;
    }
    .shop-item-card.cant-afford {
      opacity: 0.5;
    }
    .shop-toast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background: white;
      border-radius: 20px;
      padding: 1.2rem 2rem;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.1rem;
      color: #e65100;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
      z-index: 10000;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
    }
    .shop-toast.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    @media (max-width: 700px) {
      .shop-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Adoption Overlay ── */
    .adoption-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: linear-gradient(135deg, #0098ff 0%, #0060cc 60%, #003f8a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      padding: 2rem 1rem;
    }
    .adoption-overlay.hidden { display: none; }
    .adoption-content {
      max-width: 800px;
      width: 100%;
      text-align: center;
      color: white;
      font-family: 'Fredoka', sans-serif;
    }
    .adoption-content h1 {
      font-size: 2.4rem;
      margin-bottom: 0.2rem;
    }
    .adoption-content .adopt-subtitle {
      font-size: 1.1rem;
      opacity: 0.85;
      margin-bottom: 1.2rem;
    }
    .adoption-gold {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .adoption-gold .gold-amount {
      color: #ffcc02;
      font-weight: 700;
    }
    .dog-cards {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }
    .dog-card {
      background: rgba(255,255,255,0.12);
      border: 3px solid rgba(255,255,255,0.2);
      border-radius: 16px;
      padding: 1.2rem 1rem;
      width: 220px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .dog-card:hover {
      background: rgba(255,255,255,0.2);
      transform: translateY(-4px);
    }
    .dog-card.selected {
      border-color: #ffcc02;
      background: rgba(255,204,2,0.15);
      box-shadow: 0 0 20px rgba(255,204,2,0.3);
    }
    .dog-card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 0.7rem;
      border: 3px solid rgba(255,255,255,0.3);
    }
    .dog-card .archetype-name {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .dog-card .archetype-flavor {
      font-size: 0.85rem;
      opacity: 0.8;
      font-style: italic;
      margin-bottom: 0.5rem;
    }
    .dog-card .archetype-desc {
      font-size: 0.8rem;
      opacity: 0.75;
      line-height: 1.4;
    }
    .adopt-name-row {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      align-items: center;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
    }
    .adopt-name-row input {
      padding: 0.6rem 1rem;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 8px;
      font-size: 1rem;
      font-family: 'Fredoka', sans-serif;
      background: rgba(255,255,255,0.15);
      color: white;
      width: 200px;
    }
    .adopt-name-row input::placeholder { color: rgba(255,255,255,0.5); }
    .adopt-name-row input:focus { outline: none; border-color: #ffcc02; }
    .adopt-name-row .random-name-btn {
      padding: 0.6rem 1rem;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 8px;
      background: rgba(255,255,255,0.1);
      color: white;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .adopt-name-row .random-name-btn:hover { background: rgba(255,255,255,0.2); }
    .adopt-btn {
      padding: 0.8rem 2.5rem;
      border: none;
      border-radius: 12px;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.3rem;
      font-weight: 600;
      cursor: pointer;
      background: #ffcc02;
      color: #333;
      transition: all 0.2s;
    }
    .adopt-btn:hover:not(:disabled) { background: #ffe033; transform: scale(1.05); }
    .adopt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Adoption animation */
    .adoption-overlay.animating .dog-cards,
    .adoption-overlay.animating .adopt-name-row,
    .adoption-overlay.animating .adopt-btn {
      opacity: 0;
      transition: opacity 0.5s;
    }
    .adoption-zoom-card {
      animation: adoptZoom 1s ease forwards;
    }
    @keyframes adoptZoom {
      0% { transform: scale(1); }
      100% { transform: scale(1.5); }
    }

    @media (max-width: 700px) {
      .dog-cards { flex-direction: column; align-items: center; }
      .dog-card { width: 90%; max-width: 280px; }
      .adoption-content h1 { font-size: 1.8rem; }
    }

    /* ── Habit Edit Modal ── */
    .habit-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9990;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .habit-modal-overlay.hidden { display: none; }
    .habit-modal-content {
      background: white;
      border-radius: 16px;
      padding: 1.5rem;
      max-width: 420px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      font-family: 'Fredoka', sans-serif;
    }
    .habit-modal-close {
      position: absolute;
      top: 0.75rem;
      right: 1rem;
      background: none;
      border: none;
      font-size: 1.8rem;
      color: #999;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .habit-modal-close:hover { color: #333; }
    .habit-modal-title {
      font-size: 1.4rem;
      color: #333;
      margin: 0 0 1.2rem;
      padding-right: 2rem;
    }
    .habit-modal-label {
      display: block;
      font-size: 0.85rem;
      color: #888;
      margin-bottom: 0.3rem;
    }
    .habit-modal-input {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
      font-family: 'Assistant', sans-serif;
      margin-bottom: 1rem;
      box-sizing: border-box;
    }
    .habit-modal-input:focus {
      outline: none;
      border-color: var(--blue);
    }
    .habit-modal-day-picker {
      margin-bottom: 1rem;
    }
    .habit-modal-save {
      width: 100%;
      padding: 0.7rem;
      background: var(--blue);
      color: white;
      border: none;
      border-radius: 8px;
      font-family: 'Fredoka', sans-serif;
      font-size: 1rem;
      cursor: pointer;
      margin-bottom: 1.5rem;
    }
    .habit-modal-save:hover { background: var(--blue-dark); }
    .habit-modal-cal-title {
      font-size: 1.1rem;
      color: #333;
      margin-bottom: 0.75rem;
      border-top: 2px solid #f0f0f0;
      padding-top: 1rem;
    }
    .habit-cal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }
    .habit-cal-nav-btn {
      background: none;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0.2rem 0.7rem;
      cursor: pointer;
      font-family: 'Fredoka', sans-serif;
      font-size: 1rem;
      color: #555;
    }
    .habit-cal-nav-btn:hover { background: #f5f5f5; }
    .habit-cal-month-label {
      font-family: 'Fredoka', sans-serif;
      font-size: 1rem;
      color: #333;
      font-weight: 600;
    }
    .habit-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
    }
    .habit-cal-header {
      text-align: center;
      font-size: 0.7rem;
      color: #bbb;
      padding: 0.2rem 0;
      font-family: 'Fredoka', sans-serif;
    }
    .habit-cal-day {
      aspect-ratio: 1;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.8rem;
      color: #ccc;
    }
    .habit-cal-day.done {
      background: #4caf50;
      color: white;
      font-weight: 600;
    }
    .habit-cal-day.missed {
      background: #ffebee;
      color: #e57373;
    }
    .habit-cal-day.off {
      color: #ddd;
    }
    .habit-cal-day.future {
      color: #e0e0e0;
    }
    .habit-cal-day.today {
      outline: 2px solid var(--blue);
      outline-offset: -2px;
    }
    .habit-cal-day.today.done {
      outline-color: #2e7d32;
    }
    /* Make habit name clickable */
    .habit-name {
      cursor: pointer;
    }
    .habit-item:not(.checked) .habit-name:hover {
      color: var(--blue);
    }

    /* ── Dark Mode Toggle Button ── */
    .dark-mode-toggle {
      position: fixed;
      top: 55px;
      right: 3.6rem;
      z-index: 180;
      background: rgba(0,0,0,0.3);
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 0.85rem;
      padding: 0.18rem 0.35rem;
      cursor: pointer;
      opacity: 0.6;
      line-height: 1.5;
      transition: opacity 0.2s;
    }
    .dark-mode-toggle:hover { opacity: 1; }

    /* ══════════════════════════════════════════
       DARK MODE
       ══════════════════════════════════════════ */

    /* Apply class instantly (before JS loads) to avoid FOUC */
    html.dark-mode-early body,
    body.dark-mode {
      --bg-white: #1a1a1a;
      --bg-light: #222222;
      --text: #e0e0e0;
      background: #1a1a1a;
      color: #e0e0e0;
    }

    /* Sticky gold bar */
    body.dark-mode .sticky-gold-bar {
      background: #2a1e0a;
      border-bottom-color: #4a3010;
    }
    body.dark-mode .sticky-gold-text { color: #ff9800; }
    body.dark-mode .dog-xp-popup {
      background: rgba(30,18,6,0.97);
      border-color: #ff9800;
    }
    body.dark-mode .dog-xp-popup .xp-popup-name { color: #ff9800; }
    body.dark-mode .dog-xp-popup .xp-popup-xp { color: #ffb74d; }
    body.dark-mode .dog-xp-popup .xp-popup-bar-wrap { background: #4a3010; }
    body.dark-mode .xp-gain-float { color: #ffb300; }

    /* Info banner */
    body.dark-mode .info-banner {
      background: #2a1e0a;
      border-bottom-color: #4a3010;
    }
    body.dark-mode .gold-row { color: #ff9800; }
    body.dark-mode .dog-info-row { color: #ffb74d; }
    body.dark-mode .extra-dog-info-row { color: #ffb74d; }
    body.dark-mode .bond-bar-wrap { background: #4a3010; }
    body.dark-mode .extra-dog-bond-bar-wrap { background: #4a3010; }
    body.dark-mode .extra-dog-name {
      color: #ddd;
      background: rgba(40,40,40,0.9);
    }

    /* Progress bar */
    body.dark-mode .today-progress-label { color: #aaa; }
    body.dark-mode .today-bar-wrap { background: #333; }

    /* Daily challenge */
    body.dark-mode .challenge-card {
      background: linear-gradient(135deg, #1a2040, #1e2860);
      color: #9fa8da;
    }
    body.dark-mode .challenge-card.done {
      background: linear-gradient(135deg, #1a2e1a, #1f3a1f);
      color: #81c784;
    }

    /* Add habit form */
    body.dark-mode .add-form input[type="text"] {
      background: #2a2a2a;
      border-color: #444;
      color: #e0e0e0;
    }
    body.dark-mode .day-picker-label { color: #888; }
    body.dark-mode .day-toggle {
      background: #2a2a2a;
      border-color: #444;
      color: #777;
    }
    body.dark-mode .day-toggle.active {
      background: var(--blue);
      border-color: var(--blue);
      color: white;
    }
    body.dark-mode .day-toggle:hover { border-color: var(--blue); }

    /* Habit items */
    body.dark-mode .habit-item { background: #2a2a2a; }
    body.dark-mode .habit-item.checked { background: #1a2e1a; }
    body.dark-mode .habit-streak { color: #777; }
    body.dark-mode .bone-bundle-10 { background: linear-gradient(135deg, #3d2800, #4d3000); border-color: #ff9800; }
    body.dark-mode .bone-bundle-100 { background: linear-gradient(135deg, #3d3000, #4d3c00); border-color: #ffc107; }
    body.dark-mode .bundle-label { color: #ff9800; }
    body.dark-mode .bone-bundle-100 .bundle-label { color: #ffc107; }

    /* Comeback dark mode */
    body.dark-mode .habit-comeback-nudge { background: #2d1f00; border-top-color: #4d3000; color: #c8930a; }
    body.dark-mode .comeback-tip-btn { background: #3d2800; border-color: #a06000; color: #ffb74d; }
    body.dark-mode .comeback-tip-btn:hover { background: #4d3200; border-color: #c07800; }
    body.dark-mode .habit-comeback-active { background: #0a2040; border-top-color: #1a4070; color: #90caf9; }
    body.dark-mode .comeback-popup { background: #1e1e1e; }
    body.dark-mode .comeback-title { color: #e0e0e0; }
    body.dark-mode .comeback-days-text { color: #999; }
    body.dark-mode .comeback-tip-card { background: #1a2a3a; border-left-color: #64b5f6; }
    body.dark-mode .comeback-tip-title { color: #90caf9; }
    body.dark-mode .comeback-tip-text { color: #aaa; }
    body.dark-mode .comeback-quest-box { background: linear-gradient(135deg, #3d2800, #4d3000); border-color: #b8860b; }
    body.dark-mode .comeback-quest-title { color: #ffb74d; }
    body.dark-mode .comeback-quest-desc { color: #d4a35a; }
    body.dark-mode .comeback-later-btn { background: #333; color: #aaa; }
    body.dark-mode .comeback-later-btn:hover { background: #444; }
    body.dark-mode .comeback-close { color: #666; }
    body.dark-mode .comeback-close:hover { color: #ccc; }
    body.dark-mode .habit-xp-info { color: #66bb6a; }
    body.dark-mode .habit-days { color: #666; }
    body.dark-mode .habit-delete { color: #444; }
    body.dark-mode .habit-delete:hover { color: #e53935; }
    body.dark-mode .treat-bar-track { background: #333; }
    body.dark-mode .treat-bar-label { color: #666; }
    body.dark-mode .encouragement p { color: #66bb6a; }
    body.dark-mode .empty-state { color: #555; }

    /* Badges */
    body.dark-mode .badges-title { color: #aaa; }
    body.dark-mode .badge {
      background: #333;
      color: #666;
    }
    body.dark-mode .badge.unlocked {
      background: #2a2010;
      color: #ffb300;
      border-color: #6a4500;
    }
    body.dark-mode .badge-toast {
      background: #2a2010;
      border-color: #6a4500;
      color: #ffb300;
    }

    /* Bonus pills */
    body.dark-mode .bonus-pill.xp-bonus {
      background: rgba(76,175,80,0.15);
      color: #81c784;
      border-color: rgba(76,175,80,0.3);
    }
    body.dark-mode .bonus-pill.gold-bonus {
      background: rgba(255,152,0,0.15);
      color: #ffb74d;
      border-color: rgba(255,152,0,0.3);
    }

    /* Tooltips */
    body.dark-mode [data-tooltip]::after {
      background: #111;
      color: #e0e0e0;
    }
    body.dark-mode [data-tooltip]::before {
      border-top-color: #111;
    }
    body.dark-mode .tooltip-below[data-tooltip]::before {
      border-bottom-color: #111;
      border-top-color: transparent;
    }

    /* Debug panel */
    body.dark-mode .debug-panel {
      background: #1e1e1e;
      border-color: #444;
    }
    body.dark-mode .debug-panel label { color: #aaa; }
    body.dark-mode .debug-panel input[type="date"] {
      background: #2a2a2a;
      border-color: #444;
      color: #ddd;
    }
    body.dark-mode .debug-panel button {
      background: #2a2a2a;
      border-color: #444;
      color: #ccc;
    }
    body.dark-mode .debug-panel button:hover { background: #383838; }
    body.dark-mode .debug-panel .debug-info {
      color: #555;
      border-top-color: #333;
    }

    /* Walking dog speech bubble */
    body.dark-mode .walk-dog .dog-speech {
      background: #2e2e2e;
      border-color: #4a7a9b;
      color: #ddd;
    }
    body.dark-mode .walk-dog .dog-speech::after {
      border-top-color: #2e2e2e;
    }

    /* Random event popup */
    body.dark-mode .random-event {
      background: #2e2e2e;
      border-color: #4a7a9b;
    }
    body.dark-mode .random-event-text { color: #ddd; }
    body.dark-mode .random-event-hint { color: #777; }

    /* Shop overlay */
    body.dark-mode .shop-overlay {
      background: linear-gradient(135deg, #1e1510 0%, #2a1a08 100%);
    }
    body.dark-mode .shop-item-card {
      background: #2e2e2e;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    body.dark-mode .shop-item-card.equipped {
      background: #2a2010;
    }
    body.dark-mode .shop-item-name { color: #ddd; }
    body.dark-mode .shop-toast { background: #2e2e2e; }

    /* Habit edit modal */
    body.dark-mode .habit-modal-content { background: #2a2a2a; }
    body.dark-mode .habit-modal-close { color: #666; }
    body.dark-mode .habit-modal-close:hover { color: #ddd; }
    body.dark-mode .habit-modal-title { color: #ddd; }
    body.dark-mode .habit-modal-label { color: #888; }
    body.dark-mode .habit-modal-input {
      background: #1e1e1e;
      border-color: #444;
      color: #e0e0e0;
    }
    body.dark-mode .habit-modal-cal-title {
      color: #ddd;
      border-top-color: #3a3a3a;
    }
    body.dark-mode .habit-cal-nav-btn {
      border-color: #444;
      color: #aaa;
    }
    body.dark-mode .habit-cal-nav-btn:hover { background: #333; }
    body.dark-mode .habit-cal-month-label { color: #ddd; }
    body.dark-mode .habit-cal-day { color: #555; }
    body.dark-mode .habit-cal-day.missed {
      background: #3a1010;
      color: #e57373;
    }
    body.dark-mode .habit-cal-day.off { color: #444; }
    body.dark-mode .habit-cal-day.future { color: #3a3a3a; }