/* ============================================================
   SERENITY QUEST — pixel-art stylesheet
   ============================================================ */
/* SAFE AREA FIX */
html { overscroll-behavior-y: none; background-color: #2a0e1a; }
body { overscroll-behavior-y: none; background-color: #2a0e1a; }
/* END SAFE AREA FIX */

/* PWA standalone mode only — fixes rubber-band black flash on iOS home screen app */
@media all and (display-mode: standalone) {
  html, body { height:100%; overflow:hidden; }
  .app-shell { overflow-y:scroll !important; -webkit-overflow-scrolling:touch; height:100vh !important; box-sizing:border-box; }
}
:root{
  --parchment:#fbf1e3;
  --parchment-deep:#f3e1c8;
  --cream:#fff8ec;
  --blush:#f5c9cc;
  --blush-soft:#fbe0e2;
  --rose:#e39aa0;
  --plum:#5c2a35;
  --plum-soft:#7a3e4a;
  --ink:#3a1f27;
  --jade:#8fb89a;
  --jade-deep:#5e8c71;
  --gold:#c59a55;
  --gold-soft:#e9c98a;
}
body[data-palette="mint"]{
  --parchment:#f1f6ee;--parchment-deep:#dceadc;--cream:#fbfef6;
  --blush:#bfe0c9;--rose:#8fbf9f;--plum:#23524a;--plum-soft:#2f6e63;
  --gold:#b89a55;--gold-soft:#d9c083;
}
body[data-palette="twilight"]{
  --parchment:#efe3ee;--parchment-deep:#ddc8da;--cream:#f7eef5;
  --blush:#d4a6cd;--rose:#b77ba8;--plum:#3a1a44;--plum-soft:#552a63;
  --gold:#c99a55;--gold-soft:#e0b77a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#1d0f15;min-height:100vh}

/* Crisp pixel rendering across all images */
img,.pixel{
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}

body{
  font-family:"Pixelify Sans","Silkscreen",monospace;
  color:var(--ink);
  font-weight:500;
  font-size:16px;
  letter-spacing:.01em;
}

.font-display{font-family:"Silkscreen",monospace;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.font-body{font-family:"Pixelify Sans",monospace;font-weight:500}

/* ============================================================
   APP SHELL + SCENE BACKGROUND
   ============================================================ */
.app-shell{
  position:relative;min-height:100vh;width:100%;
  overflow-x:clip;isolation:isolate;
  padding:28px 32px 90px;
}
.scene-img{
  position:fixed;inset:0;z-index:-2;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.scene-onboarding{background-image:url('assets/bg-onboarding.png')}
.scene-dashboard{background-image:url('assets/scene-dash-v2.png')}
.scene-calendar{background-image:url('assets/bg-calendar.png');background-color:#f5e6d3;}
.scene-veil{display:none}

/* ============================================================
   9-SLICE PANEL (parchment frame wraps any card)
   Uses border-image with 16/64 = 25% slice
   ============================================================ */
.panel{
  position:relative;
  padding:28px 28px;
  color:var(--plum);
  background-color:#fbf1e3;
  /* border-image: slice/width/outset/repeat */
  border-style:solid;
  border-width:18px;
  border-image: url('assets/frame-parchment.png') 16 / 18px / 0 stretch;
  /* fallback */
  image-rendering:pixelated;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35));
}
.panel > *{position:relative;z-index:1}
.panel h1,.panel h2,.panel h3{
  font-family:"Silkscreen",monospace;font-weight:700;letter-spacing:.05em;
  color:var(--plum);margin:0;text-transform:uppercase;
}

/* ============================================================
   PIXEL BUTTON (9-slice pink)
   ============================================================ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  border-style:solid;border-width:14px;
  border-image:url('assets/frame-button-pink.png') 20 / 14px / 0 stretch;
  background:transparent;
  font-family:"Silkscreen",monospace;font-weight:700;
  color:var(--plum);font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;
  image-rendering:pixelated;
  transition:transform .1s steps(2), filter .1s;
}
.btn-primary:hover:not(:disabled){transform:translate(-1px,-1px);filter:brightness(1.05)}
.btn-primary:active:not(:disabled){transform:translate(1px,1px);filter:brightness(.95)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:var(--cream);
  border:2px solid var(--gold);
  color:var(--plum);
  font-family:"Pixelify Sans",monospace;font-weight:700;font-size:14px;
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(92,42,53,.25);
  transition:all .1s steps(2);
}
.chip:hover{background:var(--blush-soft);transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(92,42,53,.3)}
.chip.active{background:var(--blush);border-color:var(--rose);box-shadow:2px 2px 0 var(--rose)}

/* ============================================================
   INPUTS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{
  display:flex;align-items:center;gap:8px;
  font-family:"Silkscreen",monospace;font-weight:700;font-size:12px;
  color:var(--plum);text-transform:uppercase;letter-spacing:.05em;
}
.field label .i{width:20px;height:20px;display:inline-block}
.field input, .field textarea{
  font:inherit;color:var(--ink);font-family:"Pixelify Sans",monospace;font-size:15px;
  background:var(--cream);
  border:2px solid var(--gold);
  padding:10px 12px;outline:none;
  box-shadow:inset 2px 2px 0 rgba(92,42,53,.1);
  transition:border-color .1s;
  height:42px;box-sizing:border-box;
}
.field textarea{ height:auto; }
.field input[type="date"]{
  text-align:left;
  -webkit-text-align:left;
}
.field input::placeholder, .field textarea::placeholder{color:#a68d95;font-style:normal}
.field input:focus, .field textarea:focus{border-color:var(--rose);box-shadow:inset 2px 2px 0 rgba(229,154,160,.2), 0 0 0 2px var(--blush)}
.field textarea{resize:none;min-height:60px;line-height:1.3}
.charcount{font-size:11px;color:var(--plum-soft);align-self:flex-end;margin-top:-4px;font-family:"Silkscreen",monospace}

/* Checkbox */
.check{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--cream);border:2px solid var(--gold-soft);
  margin-bottom:6px;cursor:pointer;
  transition:all .1s steps(2);
  box-shadow:2px 2px 0 rgba(92,42,53,.15);
}
.check:hover{border-color:var(--rose);transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(92,42,53,.2)}
.check .box{
  width:22px;height:22px;border:2px solid var(--gold);
  background:#fff;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.check.done{background:linear-gradient(180deg,#e9f5d0,#c8ead0);border-color:var(--jade-deep)}
.check.done .box{background:var(--jade-deep);border-color:var(--plum)}
.check.done .box::after{content:"✓";color:#fff;font-family:"Silkscreen",monospace;font-weight:700;font-size:14px}
.check .lbl{flex:1;font-family:"Pixelify Sans",monospace;font-weight:600;font-size:15px;color:var(--plum)}
.check.done .lbl{text-decoration:line-through;opacity:.7}
.habit-streak{
  display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0;
  font-family:"Silkscreen",monospace;font-size:10px;color:var(--gold);font-weight:700;
}
.habit-edit-tile{
  width:100%;background:transparent;border:2px dashed var(--gold-soft);
  color:var(--plum-soft);gap:8px;justify-content:center;cursor:pointer;
  font-family:"Pixelify Sans",monospace;margin-top:4px;
}
.habit-edit-tile:hover{border-color:var(--plum);color:var(--plum);}

/* Habit card grid (onboarding) */
.habit-card{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--cream);border:2px solid var(--gold-soft);cursor:pointer;
  font-family:"Pixelify Sans",monospace;font-weight:700;font-size:14px;
  color:var(--plum);user-select:none;
  box-shadow:2px 2px 0 rgba(92,42,53,.15);
  transition:all .1s steps(2);
}
.habit-card:hover{transform:translate(-1px,-1px);border-color:var(--rose);box-shadow:3px 3px 0 rgba(92,42,53,.2)}
.habit-card.active{background:var(--blush-soft);border-color:var(--rose);box-shadow:2px 2px 0 var(--rose)}
.habit-card.icon-editing{border-color:var(--plum);box-shadow:2px 2px 0 var(--plum)}
.habit-card-icon{display:flex;align-items:center;cursor:pointer;border-radius:2px;padding:1px;}
.habit-card-icon:hover{outline:2px solid var(--gold);}

/* Power-up tile */
.power{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:clamp(6px,1.2vh,14px) 4px;
  background:var(--cream);border:2px solid var(--gold);
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(92,42,53,.2);
  transition:all .1s steps(2);
}
.power:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(92,42,53,.3)}
.power.active{background:var(--blush-soft);border-color:var(--rose);box-shadow:2px 2px 0 var(--rose)}
.power img{width:clamp(24px, 3vh, 48px) !important;height:clamp(24px, 3vh, 48px) !important}
.power .name{font-family:"Pixelify Sans",monospace;font-size:13px;font-weight:600;color:var(--plum);text-align:center;letter-spacing:.01em}
.power .xp{font-family:"Pixelify Sans",monospace;font-size:11px;color:var(--gold);font-weight:700}

/* Power-up customiser */
.pu-edit-tile{
  border:2px dashed var(--gold) !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--plum-soft);
  opacity:.8;
}
.pu-edit-tile:hover{opacity:1;border-color:var(--plum) !important;}
.pu-picker-panel{
  background:var(--parchment);border:2px solid var(--gold);
  padding:10px;margin-bottom:8px;
  box-shadow:2px 2px 0 rgba(92,42,53,.2);
}
.pu-picker-title{
  font-family:"Silkscreen",monospace;font-size:10px;color:var(--plum);
  text-align:center;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;
}
.pu-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:6px;margin-bottom:8px;
}
.pu-pick-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:8px 6px;
  background:var(--cream);border:2px solid var(--gold);cursor:pointer;
  font-family:"Pixelify Sans",monospace;font-size:13px;font-weight:600;
  color:var(--plum);
  text-align:center;line-height:1.2;
  position:relative;
  box-shadow:2px 2px 0 rgba(92,42,53,.15);
  transition:all .1s steps(2);
}
.pu-pick-btn.on{background:var(--blush-soft);border-color:var(--rose);box-shadow:2px 2px 0 var(--rose);}
.pu-pick-btn:hover{border-color:var(--plum);transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(92,42,53,.2);}
.pu-remove{
  margin-left:auto;font-size:10px;color:var(--plum-soft);
  line-height:1;padding:0 2px;
}
.pu-remove:hover{color:var(--rose);}
.pu-add-input{
  background:var(--cream);border:2px solid var(--gold);
  padding:5px 8px;font-family:"Pixelify Sans",monospace;font-size:12px;
  color:var(--plum);outline:none;
}
.pu-add-input:focus{border-color:var(--plum);}
.pu-custom-form{
  border-top:2px dashed var(--gold-soft);padding-top:10px;margin-top:4px;
  display:flex;flex-direction:column;gap:8px;
}
.pu-custom-title{
  font-family:"Silkscreen",monospace;font-size:10px;color:var(--plum-soft);
  text-transform:uppercase;letter-spacing:.05em;text-align:center;
}
.pu-custom-row{ display:flex;gap:8px;align-items:center; }
.pu-xp-label{
  display:flex;align-items:center;gap:4px;
  font-family:"Silkscreen",monospace;font-size:10px;color:var(--plum);
  flex-shrink:0;
}
.pu-xp-input{
  width:44px;background:var(--cream);border:2px solid var(--gold);
  padding:5px 4px;font-family:"Pixelify Sans",monospace;font-size:12px;
  color:var(--plum);outline:none;text-align:center;
}
.pu-xp-input:focus{border-color:var(--plum);}
.pu-icon-grid{
  display:grid;grid-template-columns:repeat(9,1fr);gap:4px;
}
.pu-icon-btn{
  display:flex;align-items:center;justify-content:center;
  padding:4px;background:var(--cream);border:2px solid transparent;cursor:pointer;
}
.pu-icon-btn:hover{border-color:var(--gold);}
.pu-icon-btn.on{border-color:var(--rose);background:var(--blush-soft);}
.pu-add-btn{
  width:100%;padding:7px;background:var(--blush-soft);border:2px solid var(--rose);
  font-family:"Silkscreen",monospace;font-size:11px;color:var(--plum);
  cursor:pointer;text-transform:uppercase;letter-spacing:.05em;
}
.pu-add-btn:disabled{opacity:.4;cursor:default;}
.pu-add-btn:not(:disabled):hover{background:var(--rose);color:#fff;}

/* ============================================================
   HEADER BAR
   ============================================================ */

.top-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 18px;margin-bottom:0;
  background:var(--parchment);
  border:3px solid var(--plum);
  box-shadow:4px 4px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--gold);
  font-family:"Silkscreen",monospace;font-size:13px;color:var(--plum);
}
.top-bar .title{
  font-family:"Silkscreen",monospace;font-size:18px;letter-spacing:.06em;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;
}
.streak{display:flex;align-items:center;gap:8px}
.topbar-clock{
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:"Silkscreen",monospace;line-height:1.3;margin-right:4px;
}
.topbar-date{font-size:10px;color:var(--plum-soft);text-transform:uppercase;letter-spacing:.04em;}
.topbar-time{font-size:14px;color:var(--plum);font-weight:700;}
.streak img{width:22px;height:22px}
.energy{display:flex;align-items:center;gap:8px;padding:4px 10px;
  background:var(--cream);border:2px solid var(--gold)}
.energy img{width:18px;height:18px}
.energy-bar{width:120px;height:16px;background:#4a1f28;border:2px solid var(--plum);position:relative}
.energy-bar>div{height:100%;background:linear-gradient(180deg,#a6e0a0,#5e8c71);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.pet-energy-bar{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:8px;
  background:rgba(20,6,12,.75);
  border:2px solid rgba(255,255,255,.3);
  border-radius:4px;
  padding:10px 18px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(2px);
  width:min(220px,100%);
}
.pet-energy-header{
  display:flex;align-items:center;gap:8px;
}
.pet-energy-label{
  font-family:"Silkscreen",monospace;font-size:12px;color:#fff;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000;white-space:nowrap;
}
.pet-energy-pct{
  font-family:"Silkscreen",monospace;font-size:14px;font-weight:700;
  color:#d4ffd4;
  text-shadow:0 0 8px #5e8c71, 1px 1px 0 #000, -1px -1px 0 #000;
}
.pet-energy-track{
  width:180px;height:26px;
  background:#1a0d10;
  border:3px solid rgba(255,255,255,.5);
  border-radius:3px;
  position:relative;overflow:hidden;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.6), 0 0 10px rgba(166,224,160,.2);
}
.pet-energy-track>div{
  height:100%;
  background:linear-gradient(90deg,#2d6644,#5e8c71,#a6e0a0);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.3), inset 0 4px 0 rgba(255,255,255,.25);
  transition:width .4s ease;
  position:relative;
}
.pet-energy-track>div::after{
  content:"";position:absolute;top:0;left:0;right:0;height:45%;
  background:rgba(255,255,255,.2);
}
.avatar{width:30px;height:30px;background:var(--cream);border:2px solid var(--plum);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar img{width:100%;height:100%}

/* ============================================================
   LEFT RAIL
   ============================================================ */
:root{ --rail-left:22px; --rail-w:112px; }
.rail{
  position:absolute;left:var(--rail-left);top:110px;width:var(--rail-w);
  display:flex;flex-direction:column;gap:10px;z-index:2;
}
.rail-btn{
  width:var(--rail-w);height:var(--rail-w);
  background:var(--parchment);border:3px solid var(--plum);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--plum);
  font-family:"Silkscreen",monospace;font-size:11px;letter-spacing:.04em;
  cursor:pointer;text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--gold);
  transition:all .1s steps(2);
}
.rail-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--gold)}
.rail-btn.active{background:var(--blush);border-color:var(--rose);box-shadow:3px 3px 0 var(--rose), inset 0 0 0 2px var(--gold)}
.rail-btn img{width:54px;height:54px}
.rail-btn-locked{opacity:.5;cursor:not-allowed;filter:grayscale(.4);}
.rail-btn-locked:hover{transform:none;box-shadow:3px 3px 0 rgba(0,0,0,.25);}
.rail-lock-badge{
  position:absolute;top:-4px;right:-8px;
  font-size:16px;line-height:1;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6));
}

/* ============================================================
   SPEECH BUBBLE
   ============================================================ */
.bubble{
  position:relative;display:inline-block;
  background:var(--cream);border:2px solid var(--plum);
  padding:8px 16px;color:var(--plum);
  font-family:"Pixelify Sans",monospace;font-weight:600;font-size:14px;
  box-shadow:3px 3px 0 rgba(0,0,0,.25), inset 0 0 0 2px var(--gold);
  max-width:300px;
}
.bubble::after{
  content:"";position:absolute;left:30px;bottom:-10px;width:12px;height:12px;
  background:var(--cream);border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);
  transform:rotate(45deg);box-shadow:2px 2px 0 rgba(0,0,0,.1);
}

/* ============================================================
   HERO TITLE (onboarding)
   ============================================================ */
.hero-title{
  font-family:"Silkscreen",monospace;font-size:38px;color:#fff;
  text-align:center;margin:12px 0 6px;letter-spacing:.04em;text-transform:uppercase;
  text-shadow: 3px 3px 0 var(--plum), 6px 6px 0 rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.hero-title img{width:32px;height:32px}
.hero-sub{
  text-align:center;color:#fff;font-family:"Silkscreen",monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;
  text-shadow: 2px 2px 0 rgba(60,30,40,.8);
}
.hero-sub .dot{color:var(--gold-soft);margin:0 10px}

.features-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.feature-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--parchment);border:2px solid var(--plum);
  color:var(--plum);font-family:"Silkscreen",monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;
  box-shadow:2px 2px 0 rgba(0,0,0,.3), inset 0 0 0 1px var(--gold);
}
.feature-pill img{width:18px;height:18px}

/* ============================================================
   LAYOUT GRIDS
   ============================================================ */
.bday-row{display:flex;gap:8px;}
.bday-select{flex:1;font:inherit;font-family:"Pixelify Sans",monospace;font-size:15px;background:var(--cream);border:2px solid var(--gold);padding:10px 8px;outline:none;color:var(--ink);height:42px;box-sizing:border-box;cursor:pointer;}
.bday-select:focus{border-color:var(--rose);}
.onboard-safe-top{ height:calc(env(safe-area-inset-top) + 16px); }
.onboard-two{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;max-width:1180px;margin:0 auto}
.onboard-two.onboard-centered{grid-template-columns:1fr;max-width:520px;}
.onboard-cta-btn{width:100%;font-size:16px;padding:16px 24px;letter-spacing:.06em;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;}
.cursor-pick-row{display:flex;gap:10px;justify-content:center;margin:10px 0;}
.cursor-pick-btn{background:var(--cream);border:2px solid var(--gold-soft);padding:8px;cursor:pointer;transition:border-color .1s steps(2),background .1s steps(2);}
.cursor-pick-btn.active{background:var(--blush-soft);border-color:var(--rose);}
.cursor-pick-btn:hover{background:var(--blush-soft);}
.btn-pink{background:#f5a7bc !important;border-color:#e8829f !important;color:#5a1a30 !important;}
.btn-pink:hover:not(:disabled){background:#f2c4d0 !important;border-color:#e8829f !important;}
.habit-pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px;}
.dash-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start;max-width:1240px;margin:0 auto;padding-left:100px}

/* 4-panel 2×2 dashboard grid */
.dash-grid-4{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  /* both rows fixed so the emotions panel never resizes when diary opens */
  grid-template-rows:calc(60vh - 129px) calc(40vh - 60px);
  gap:20px;
  margin-top:14px;
  margin-left:calc(var(--rail-left) + var(--rail-w) + 18px);
  margin-right:20px;
}

/* Right quest panel spans both rows, flex column so spacer + pinned footer work */
.dash-quest-panel .div-sparkle{ font-size:13px; }
.dash-quest-panel .check{
  padding:clamp(4px, 0.7vh, 10px) 10px;
}
.dash-quest-panel .check img.pixel{
  width:clamp(16px, 2.5vh, 32px) !important;
  height:clamp(16px, 2.5vh, 32px) !important;
}
.dash-quest-panel .check .box{
  width:clamp(16px, 2.5vh, 32px);
  height:clamp(16px, 2.5vh, 32px);
}
.dash-quest-panel .check .lbl{
  font-size:clamp(11px, 1.6vh, 16px);
}
.dash-quest-panel{
  grid-column:2;
  grid-row:1 / 3;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  padding:14px 16px;
}

/* Zodiac section: no frame, floats over background */
.dash-zodiac-panel{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  overflow-y:auto;
  overflow-x:visible;
}

/* Monkey: fills remaining space, centered in its column */
.zodiac-pet-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  height:100%;
  padding-bottom:clamp(20px,5vh,50px);
}

/* Today's Intention — left column beside the zodiac pet */
.intention-side-box{
  width:auto;
  max-width:clamp(160px,35%,220px);
  align-self:center;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  background:var(--cream);
  border:2px solid var(--gold-soft);
  cursor:pointer;
  position:relative;
  gap:6px;
  transition:border-color .1s steps(2), background .1s steps(2);
  overflow:visible;
  z-index:10;
}
.intention-side-box:hover{
  background:var(--blush-soft);
}
.intention-side-label{
  font-family:"Silkscreen",monospace;
  font-size:clamp(9px,1.2vh,12px);
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
}
.intention-side-word{
  font-family:"Silkscreen",monospace;
  font-size:clamp(11px,1.6vh,16px);
  color:var(--plum);
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:center;
  line-height:1.3;
  word-break:break-word;
}
.intention-side-word.unset{
  font-family:"Pixelify Sans",monospace;
  font-size:clamp(11px,1.6vh,16px);
  color:var(--plum-soft);
  font-style:italic;
  text-transform:none;
  letter-spacing:.01em;
}
.intention-picker-popup{
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  width:240px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  padding:10px 8px;
  background:var(--cream);
  border:2px solid var(--gold);
  box-shadow:3px 3px 0 rgba(92,42,53,.3);
  z-index:20;
}

/* Journey list */
.journey{padding:0;margin:0;list-style:none}
.journey li{display:flex;gap:12px;padding:10px 4px;align-items:flex-start;
  border-bottom:2px dashed var(--gold-soft)}
.journey li:last-child{border-bottom:none}
.journey .mini{width:44px;height:44px;flex-shrink:0;
  background:var(--cream);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 rgba(92,42,53,.2)}
.journey .mini img{width:28px;height:28px}
.journey strong{color:var(--plum);font-family:"Silkscreen",monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:2px}
.journey span{color:var(--plum-soft);font-family:"Pixelify Sans",monospace;font-size:13px}

.quote-card{
  margin-top:18px;padding:18px 22px;
  background:#1a3a4a;color:#f5e6c6;
  border:3px solid var(--gold);
  box-shadow:4px 4px 0 rgba(0,0,0,.4), inset 0 0 0 2px #2a4a5a;
  text-align:center;position:relative;
  font-family:"Pixelify Sans",monospace;font-size:14px;font-style:italic;
}
.quote-card .em{color:#fff5d6;font-family:"Silkscreen",monospace;font-style:normal;
  font-size:13px;text-transform:uppercase;letter-spacing:.05em;line-height:1.6;display:block}
.quote-card::before,.quote-card::after{content:"✦";position:absolute;color:var(--gold-soft);font-size:14px}
.quote-card::before{left:12px;top:10px}
.quote-card::after{right:12px;bottom:10px}

/* Add custom habit */
.add-custom{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px;border:2px dashed var(--gold);background:transparent;
  color:var(--plum);font-family:"Silkscreen",monospace;font-size:11px;
  text-transform:uppercase;cursor:pointer;width:100%;
  transition:background .1s;
}
.add-custom:hover{background:rgba(197,154,85,.15)}

/* ============================================================
   Floating pet on cloud (outside the panel)
   ============================================================ */
.pet-float{
  position:relative;
  padding:10px 0 14px;
  margin-bottom:6px;
}
.pet-cloud-stage{
  position:relative;
  width:100%;
  height:clamp(120px,20vh,200px);
  animation: cloudDrift 6s ease-in-out infinite;
}
@keyframes cloudDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.pet-cloud{
  position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width:min(360px,100%);
  height:auto;
  image-rendering:pixelated;
  pointer-events:none;
  filter:drop-shadow(4px 6px 0 rgba(92,42,53,.18));
}
.pet-on-cloud{
  position:absolute;
  bottom:25px;left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.pet-on-cloud .zodiac-pet{
  filter:drop-shadow(3px 4px 0 rgba(92,42,53,.4));
}

/* Pet stage (legacy, still used in celebrate overlay) */
.pet-stage{
  position:relative;min-height:240px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:4px 0 6px;
}
.pet-stage img.monkey{
  width:320px;height:320px;
  animation: monkeyBreathe 3s steps(2) infinite;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35));
}
.pet-stage img.monkey.happy{animation: monkeyBounce 0.6s steps(2) infinite}
@keyframes monkeyBreathe {0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes monkeyBounce {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.pet-platform{
  position:absolute;bottom:4px;width:200px;height:12px;
  background:radial-gradient(ellipse at 50% 50%, rgba(251,241,227,.6), rgba(251,241,227,0) 70%);
  filter:blur(1px);
}

/* Gratitude */
.grat-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.grat-row .num{width:22px;font-family:"Silkscreen",monospace;color:var(--plum);font-size:14px;text-align:right}
.grat-row input{flex:1;background:var(--cream);border:2px solid var(--gold-soft);
  padding:8px 10px;font:inherit;font-family:"Pixelify Sans",monospace;font-size:13px;outline:none;
  box-shadow:inset 1px 1px 0 rgba(92,42,53,.1)}
.grat-row input:focus{border-color:var(--rose)}
.grat-row input.filled{background:linear-gradient(180deg,#fff,#f5e6c6);border-color:var(--gold)}

/* Why box */
.why-box{
  background:var(--parchment);border:2px solid var(--gold-soft);
  margin-bottom:10px;padding:8px 10px;
}
.why-display{
  display:flex;align-items:center;gap:8px;cursor:pointer;
}
.why-display:hover .why-edit-icon{opacity:1;}
.why-label{
  font-family:"Silkscreen",monospace;font-size:clamp(9px,1.2vh,12px);color:var(--gold);
  text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;
}
.why-text{
  flex:1;font-family:"Pixelify Sans",monospace;font-size:clamp(11px,1.6vh,16px);
  color:var(--plum);font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.why-edit-icon{
  font-size:clamp(13px,1.6vh,16px);color:var(--plum-soft);opacity:0;transition:opacity .15s;flex-shrink:0;
}
.why-edit-row{display:flex;flex-direction:column;gap:6px;}
.why-textarea{
  width:100%;resize:none;height:52px;
  background:var(--cream);border:2px solid var(--gold);
  padding:6px 8px;font-family:"Pixelify Sans",monospace;font-size:clamp(11px,1.6vh,16px);
  color:var(--plum);outline:none;
}
.why-edit-btns{display:flex;gap:6px;justify-content:flex-end;}

/* Progress label */
.progress-label{text-align:center;color:var(--plum);font-family:"Silkscreen",monospace;
  font-size:12px;margin:10px 0 8px;text-transform:uppercase;letter-spacing:.04em}
.progress-label b{font-size:14px;color:var(--plum)}

/* Divider */
.div-sparkle{display:flex;align-items:center;gap:10px;margin:10px 0 8px;
  color:var(--gold);font-family:"Silkscreen",monospace;font-size:10px;
  text-transform:uppercase;justify-content:center;letter-spacing:.06em}
.div-sparkle::before,.div-sparkle::after{content:"";flex:1;height:2px;
  background:repeating-linear-gradient(90deg,var(--gold-soft) 0 4px,transparent 4px 8px)}

/* Tweaks panel */
.tweaks{
  position:fixed;right:18px;bottom:18px;z-index:100;
  background:var(--cream);border:3px solid var(--plum);
  padding:14px 16px;min-width:240px;
  box-shadow:4px 4px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--gold);
  font-family:"Pixelify Sans",monospace;font-size:13px;
}
.tweaks h4{margin:0 0 10px;font-family:"Silkscreen",monospace;color:var(--plum);
  font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.tweak-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tweak-row label{color:var(--plum);font-family:"Silkscreen",monospace;font-size:10px;text-transform:uppercase}
.tweak-chips{display:flex;gap:4px}
.tweak-chips button{padding:4px 8px;border:2px solid var(--gold-soft);
  background:#fff;color:var(--plum);font:inherit;font-family:"Silkscreen",monospace;
  font-size:9px;cursor:pointer;text-transform:uppercase}
.tweak-chips button.on{background:var(--blush);border-color:var(--rose)}

/* ============================================================
   CALENDAR VIEW
   ============================================================ */
.cal-view{
  display:flex;gap:18px;align-items:stretch;
  margin-left:calc(var(--rail-left) + var(--rail-w) + 18px);
  margin-right:20px;
  margin-top:14px;
  height:calc(100vh - 199px);
}
.community-view{
  margin-left:calc(var(--rail-left) + var(--rail-w) + 18px);
  margin-right:20px;
  margin-top:14px;
  height:calc(100vh - 185px);
  overflow-y:auto;
}

/* ============================================================
   GRATITUDE WALL
   ============================================================ */
.grat-wall{
  padding:4px 0 20px;
}
.grat-wall-header{
  text-align:center;
  margin-bottom:18px;
}
.grat-wall-title{
  font-family:"Silkscreen",monospace;
  color:var(--plum);
  font-size:clamp(16px,2.2vw,22px);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 4px;
  text-shadow:2px 2px 0 rgba(0,0,0,.08);
}
.grat-wall-sub{
  font-family:"Pixelify Sans",monospace;
  font-size:13px;
  color:var(--plum-soft);
}
.grat-wall-empty{
  text-align:center;
  font-family:"Pixelify Sans",monospace;
  font-size:15px;
  color:var(--plum-soft);
  padding:40px 20px;
  line-height:1.8;
}
.grat-wall-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
  padding:0 2px;
}
.grat-card{
  position:relative;
  background:var(--parchment);
  border:3px solid var(--plum);
  box-shadow:4px 4px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--gold-soft);
  padding:14px 14px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.grat-card-heart-deco{
  position:absolute;
  top:8px;right:10px;
  font-size:16px;
  color:var(--rose);
  opacity:.5;
  pointer-events:none;
}
.grat-card-streak{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
  font-family:"Silkscreen",monospace;
  font-size:11px;
  color:var(--gold);
  white-space:nowrap;
  flex-shrink:0;
}
.grat-card-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.grat-card-avatar{
  flex-shrink:0;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
}
.grat-card-meta{
  min-width:0;flex:1;
}
.grat-card-name{
  font-family:"Silkscreen",monospace;
  font-size:11px;
  color:var(--plum);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grat-card-time{
  font-family:"Pixelify Sans",monospace;
  font-size:11px;
  color:var(--plum-soft);
  margin-top:2px;
}
.grat-card-loc{
  font-family:"Pixelify Sans",monospace;
  font-size:11px;
  color:var(--jade-deep);
  margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grat-card-content{
  font-family:"Pixelify Sans",monospace;
  font-size:15px;
  color:var(--plum);
  line-height:1.6;
  flex:1;
  word-break:break-word;
  padding:6px 4px 2px;
  border-top:1px solid var(--gold-soft);
}
.grat-card-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:2px;
}
.grat-card-like{
  background:var(--cream);
  border:2px solid var(--rose);
  color:var(--plum);
  font-family:"Silkscreen",monospace;
  font-size:11px;
  padding:4px 10px;
  cursor:pointer;
  transition:all .1s steps(2);
  box-shadow:2px 2px 0 rgba(0,0,0,.2);
}
.grat-card-like:hover{ background:var(--blush-soft); }
.grat-card-like.liked{
  background:var(--rose);
  color:#fff;
  border-color:var(--plum);
}
.grat-card-delete{
  background:transparent;
  border:none;
  color:var(--plum-soft);
  font-family:"Silkscreen",monospace;
  font-size:9px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.7;
  padding:4px 6px;
}
.grat-card-delete:hover{ opacity:1;color:var(--plum); }
.grat-card-report{
  background:transparent;
  border:none;
  color:var(--plum-soft);
  font-family:"Silkscreen",monospace;
  font-size:9px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.5;
  padding:4px 6px;
  transition:all .1s steps(2);
}
.grat-card-report:hover{ opacity:1;color:var(--rose); }
.grat-card-report.reported{ opacity:1;color:var(--rose);cursor:default; }

/* Share to wall button in gratitude section */
.grat-share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  margin-top:6px;
  padding:8px 14px;
  background:var(--plum);
  color:#fff;
  border:none;
  font-family:"Silkscreen",monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
  transition:all .1s steps(2);
}
.grat-share-btn:hover{ background:var(--plum-soft);transform:translate(-1px,-1px); }
.grat-share-btn:disabled{ opacity:.45;cursor:default;transform:none; }

/* Share picker modal entries */
.grat-share-pick-list{
  display:flex;flex-direction:column;gap:8px;margin:12px 0;
}
.grat-share-pick-item{
  padding:10px 14px;
  background:var(--cream);
  border:2px solid var(--gold);
  color:var(--ink);
  font-family:"Pixelify Sans",monospace;
  font-size:14px;
  text-align:left;
  cursor:pointer;
  transition:all .1s steps(2);
  box-shadow:2px 2px 0 rgba(0,0,0,.15);
  line-height:1.5;
}
.grat-share-pick-item:hover{
  background:var(--blush-soft);
  border-color:var(--rose);
  transform:translate(-1px,-1px);
}

.cal-left{
  flex:0 0 65%;display:flex;flex-direction:column;gap:14px;min-height:0;
}
.cal-right{
  flex:1;min-height:0;display:flex;flex-direction:column;
}
.cal-main-panel{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  padding:12px 14px;
}
.cal-notes-panel{
  flex:0 0 200px;display:flex;flex-direction:column;
  padding:14px 18px;
}
.cal-insights-panel{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:14px 18px;
}

/* Month nav */
.cal-month-nav{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:4px;
}
.cal-month-label{
  font-family:"Silkscreen",monospace;font-size:17px;color:var(--plum);
  text-transform:uppercase;letter-spacing:.04em;
}
.cal-nav-btn{
  background:var(--cream);border:2px solid var(--gold);color:var(--plum);
  font-family:"Silkscreen",monospace;font-size:13px;padding:5px 12px;cursor:pointer;
}
.cal-nav-btn:hover{background:var(--blush-soft);}
.cal-week-toggle{
  background:var(--parchment);border:2px solid var(--plum-soft);color:var(--plum-soft);
  font-family:"Silkscreen",monospace;font-size:10px;padding:3px 8px;cursor:pointer;
  margin-left:6px;
}
.cal-week-toggle:hover{border-color:var(--plum);color:var(--plum);}

/* Calendar grid */
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:2px;flex:1;min-height:0;overflow:hidden;
}
.cal-main-panel .div-sparkle{ font-size:14px; }
.cal-insights-panel .div-sparkle{ font-size:13px; }
.cal-dow{
  font-family:"Silkscreen",monospace;font-size:12px;color:var(--plum-soft);
  text-align:center;text-transform:uppercase;padding:2px 0 1px;
  margin-bottom:0;line-height:1;
}
.cal-blank{ background:rgba(251,241,227,0.3);border:1px solid transparent;min-height:clamp(55px,7vh,90px); }
.cal-cell{
  background:var(--cream);border:1px solid var(--gold-soft);
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;padding:2px;
  transition:border-color .1s;
  min-height:clamp(55px,7vh,90px);
}
.cal-cell:hover{ border-color:var(--gold); }
.cal-cell.cal-today{ border:2px solid var(--rose); }
.cal-cell.cal-selected{ border:2px solid var(--plum);background:var(--parchment); }
.cal-cell.cal-has-data{ background:var(--blush-soft); }
.cal-date-num{
  position:absolute;top:4px;left:6px;
  font-family:"Silkscreen",monospace;font-size:16px;color:var(--plum);line-height:1;
}
.cal-mood-img{
  width:clamp(28px,5vh,56px);height:clamp(28px,5vh,56px);
  image-rendering:pixelated;margin-top:10px;
}
.cal-cell-foot{
  position:absolute;bottom:2px;left:2px;right:2px;
  display:flex;align-items:center;justify-content:space-between;
}
/* Battery */
.cal-battery{ display:flex;align-items:center;gap:1px; }
.cal-bat-body{
  width:clamp(12px,2.5vh,22px);height:clamp(5px,1vh,9px);
  border:1.5px solid var(--plum);background:#fff;position:relative;overflow:hidden;
}
.cal-bat-fill{
  position:absolute;top:0;left:0;bottom:0;transition:width .3s;
}
.cal-bat-tip{
  width:2px;height:clamp(3px,.7vh,6px);
  background:var(--plum);border-radius:0 1px 1px 0;
}
.cal-jour-img{
  width:clamp(20px,3.5vh,36px);height:clamp(20px,3.5vh,36px);image-rendering:pixelated;
}

/* Quick notes */
.cal-notes-hdr{
  font-family:"Silkscreen",monospace;font-size:15px;color:var(--plum);
  margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;
}
.cal-notes-area{
  flex:1;resize:none;background:var(--cream);border:2px solid var(--gold-soft);
  padding:10px 12px;font-family:"Pixelify Sans",monospace;font-size:15px;
  color:var(--plum);outline:none;line-height:1.6;
}

/* Insights */
.cal-insight-title{
  font-family:"Silkscreen",monospace;font-size:18px;color:var(--plum);
  text-align:center;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;
}
.cal-section{ display:flex;flex-direction:column;gap:4px; }
.cal-check-row{
  display:flex;align-items:center;gap:6px;padding:5px 8px;
  font-family:"Pixelify Sans",monospace;font-size:16px;color:var(--plum);
  background:var(--cream);border:1px solid var(--gold-soft);
}
.cal-check-row.done{ background:linear-gradient(180deg,#e9f5d0,#c8ead0);color:var(--plum); }
.cal-chk{
  width:16px;height:16px;border:1.5px solid var(--gold);background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:12px;color:var(--jade-deep);font-family:"Silkscreen",monospace;
}
.cal-pu-row{
  display:flex;align-items:center;gap:6px;padding:4px 8px;
  font-family:"Pixelify Sans",monospace;font-size:16px;color:var(--plum);
}
.cal-grat-row{
  font-family:"Pixelify Sans",monospace;font-size:16px;color:var(--plum);
  padding:2px 8px;
}
.cal-diary-quote{
  font-family:"Pixelify Sans",monospace;font-size:15px;color:var(--plum-soft);
  font-style:italic;padding:4px 6px;border-left:3px solid var(--gold-soft);margin-top:4px;
}
.cal-mood-display{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:4px;
}
.cal-mood-lbl{
  font-family:"Silkscreen",monospace;font-size:17px;color:var(--plum);
  text-transform:uppercase;
}
.cal-empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Pixelify Sans",monospace;font-size:16px;color:var(--plum-soft);
  gap:10px;
}
/* Battery with number */
.cal-battery-wrap{
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.cal-bat-num{
  font-family:"Silkscreen",monospace;font-size:clamp(7px,1.1vh,11px);
  line-height:1;
}
.cal-empty-glyph{
  font-size:48px;color:var(--gold);opacity:.5;
}

/* Coming Soon */
.coming-soon-overlay{position:fixed;inset:0;background:rgba(20,6,12,.6);z-index:1000;
  display:flex;align-items:center;justify-content:center;}
.coming-soon-box{
  background:var(--parchment);border:4px solid var(--plum);
  padding:32px 36px;text-align:center;max-width:320px;
  box-shadow:6px 6px 0 rgba(0,0,0,.5), inset 0 0 0 3px var(--gold);
}
.coming-soon-lock{font-size:48px;margin-bottom:8px;}
.coming-soon-title{
  font-family:"Silkscreen",monospace;color:var(--plum);font-size:20px;
  margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em;
}
.coming-soon-body{
  color:var(--plum-soft);font-family:"Pixelify Sans",monospace;font-size:15px;
  line-height:1.6;margin:0 0 20px;
}
.coming-soon-btn{
  background:var(--plum);color:#fff;border:none;
  font-family:"Silkscreen",monospace;font-size:12px;
  padding:10px 24px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.coming-soon-btn:hover{background:var(--rose);}

/* Celebrate */
.celebrate{position:fixed;inset:0;background:rgba(30,10,20,.7);z-index:1000;
  display:flex;align-items:center;justify-content:center}
.celebrate .card{background:var(--parchment);border:4px solid var(--plum);
  padding:36px 40px;text-align:center;max-width:420px;
  box-shadow:6px 6px 0 rgba(0,0,0,.5), inset 0 0 0 3px var(--gold);}
.celebrate h3{font-family:"Silkscreen",monospace;color:var(--plum);font-size:22px;
  margin:12px 0;text-transform:uppercase;letter-spacing:.05em}
.celebrate p{color:var(--plum-soft);font-family:"Pixelify Sans",monospace;font-size:14px;margin:6px 0 18px}
.celebrate img.monkey{width:120px;height:120px;image-rendering:pixelated}

/* Responsive */
@media (max-width: 980px){
  :root{ --rail-left:0px; --rail-w:70px; }

  html, body{ max-width:100vw; overflow-x:hidden; }

  /* Reduce shell padding on mobile */
  .app-shell{ overflow-y:auto; overflow-x:hidden; padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 16px); max-width:100vw; }

  /* Nuclear: nothing wider than viewport */
  .app-shell *{ max-width:100%; box-sizing:border-box; }
  .app-shell img{ max-width:100%; }

  .top-bar{
    position:static;
    margin-bottom:0;
    padding:8px 12px;
    gap:8px;
  }
  /* Smaller title text so it fits on one line */
  .top-bar .title{ font-size:13px;gap:4px; }
  .topbar-clock{ flex-direction:column; align-items:flex-end; gap:1px; }
  .topbar-time{ font-size:11px; white-space:nowrap; }
  .topbar-date{ font-size:9px; white-space:nowrap; }
  .streak{ font-size:11px; }
  /* Hide the zodiac avatar on mobile — saves space */
  .avatar{ display:none; }

  /* Rail: full-width row inside sticky nav-header */
  .rail{
    position:static;
    flex-direction:row;
    width:100%;
    flex-wrap:nowrap;
    gap:4px;
    padding:4px 4px 6px;
    background:transparent;
    border:none;
    box-sizing:border-box;
  }
  .rail-btn{
    flex:1;
    width:auto;
    height:58px;
    min-width:0;
    font-size:9px;
    gap:1px;
    border:3px solid var(--plum) !important;
    box-shadow:3px 3px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--gold) !important;
    background:var(--parchment);
  }
  .rail-btn.active{ background:var(--blush) !important; border-color:var(--rose) !important; }
  .rail-btn img{ width:28px;height:28px; }

  /* ── Onboarding ── */
  .hero-title{ font-size:clamp(18px,6vw,28px);gap:8px;margin:10px 0 4px; }
  .hero-title img{ width:20px;height:20px; }
  .hero-sub{ font-size:10px;margin-bottom:10px;letter-spacing:.03em; }
  .hero-sub .dot{ margin:0 6px; }
  .features-row{ gap:6px;margin-bottom:12px; }
  .feature-pill{ font-size:9px;padding:4px 8px;gap:4px; }
  .feature-pill img{ width:13px;height:13px; }
  /* Panels: less padding on mobile, constrained width */
  .panel{ padding:14px 12px; width:100%; box-sizing:border-box; max-width:100%; }
  .field input, .field textarea{ width:100%; box-sizing:border-box; max-width:100%; min-width:0; }
  .field input[type="date"]{
    width:100%; max-width:100%; min-width:0;
    font-size:15px;
    padding:10px 12px;
    height:auto;
    line-height:normal;
    -webkit-appearance:none;
    appearance:none;
    display:block;
    box-sizing:border-box;
  }
  .pu-picker-panel{ max-width:100%; box-sizing:border-box; overflow-x:hidden; }
  .pu-icon-grid{ grid-template-columns:repeat(6,1fr); }
  .cursor-pick-row{ gap:6px; }
  .cursor-pick-btn{ padding:5px; }
  .cursor-pick-btn img, .cursor-pick-btn span{ width:32px !important; height:32px !important; }
  /* Habit pick grid: 3 columns on mobile (2 would be too chunky, 4 too cramped) */
  .habit-pick-grid{ grid-template-columns:repeat(3,1fr); }
  /* Habit cards: tighter on mobile */
  .habit-card{ padding:8px 4px;gap:4px;font-size:11px;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
  /* Journey list: compact */
  .journey li{ padding:6px 2px;gap:8px; }
  .journey .mini{ width:36px;height:36px;flex-shrink:0; }
  .journey .mini img{ width:22px;height:22px; }
  .journey strong{ font-size:10px; }
  .journey span{ font-size:11px; }
  /* Quote card compact */
  .quote-card{ margin-top:12px;padding:12px 16px; }
  .quote-card .em{ font-size:11px; }
  /* Icon picker grid: slightly bigger buttons on mobile */
  .pu-icon-grid{ grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); }

  /* Single column, auto-height rows so panels grow to fit content */
  .onboard-safe-top{ height:0; } /* app-shell already handles safe area on mobile */
  .hero-title{ font-size:22px; margin:4px 0 4px; }
  .hero-sub{ font-size:10px; margin-bottom:10px; }
  .features-row{ gap:6px; margin-bottom:10px; }
  .onboard-two,.dash-grid{ grid-template-columns:1fr;margin:0;padding:0; }
  /* Hide journey panel once form is open — saves scroll on mobile */
  .onboard-two.onboard-form-open > div:first-child{ display:none; }
  /* Cursor picker wraps on small screens */
  .cursor-pick-row{ flex-wrap:wrap; display:none; }
  .cursor-section{ display:none; }
  /* Habit grid 2 cols on very small screens */
  @media(max-width:400px){
    .habit-pick-grid{ grid-template-columns:repeat(2,1fr); }
  }
  .dash-grid-4{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    margin:0;
    padding:0;
    margin-top:16px;
  }

  /* All panels: natural height, no overflow clipping */
  .dash-zodiac-panel{ flex-direction:column;overflow:visible;height:auto; }
  .dash-zodiac-panel{ order:1; }
  .emotions-panel{ overflow:visible;height:auto;order:2; }
  .dash-quest-panel{ grid-column:1;grid-row:auto;overflow-y:visible;height:auto;order:3; }

  /* Zodiac pet column: auto height on mobile */
  .zodiac-pet-col{ height:auto;padding-bottom:16px; }

  .intention-picker-popup{top:100%;left:0;width:100%}

  /* Gratitude + diary: stack vertically on very small screens */
  .grat-half{ flex-direction:column; }
  .diary-col{ flex:0 0 auto;width:100%;flex-direction:row;justify-content:center;gap:12px; }
  .community-view{ margin-left:0;margin-right:0;height:auto;overflow-y:visible; }
  .cal-view{
    flex-direction:column;height:auto;margin-left:0;margin-right:0;
    overflow-y:auto;
  }
  .cal-left{ flex:0 0 auto; }
  .cal-right{ flex:0 0 auto; }
  .cal-insights-panel{ max-height:60vh; }
  .cal-notes-panel{ flex:0 0 120px; }

  /* Diary: same height in both states — set once on the panel */
  .emotions-panel{ min-height:clamp(280px,45vh,400px); }
  .diary-view{ min-height:clamp(280px,45vh,400px); }
  .diary-body{ min-height:0;flex:1; }
  .diary-textarea{ min-height:160px;height:100%; }

  /* Camera button: smaller on mobile */
  .diary-photo-add{ width:70px;padding:8px 6px;gap:4px; }
  .diary-photo-add img{ width:36px !important;height:36px !important; }
  .diary-body .diary-textarea{ padding-right:84px; }

  /* Calendar cells: less tall so they're not too narrow */
  .cal-blank,.cal-cell{ min-height:clamp(56px,14vw,80px); }

  /* Date number: smaller so mood icon has room */
  .cal-date-num{ font-size:10px;top:2px;left:3px; }

  /* Mood icon: sits near top so battery/diary icons are visible below */
  .cal-mood-img{ width:36px;height:36px;margin-top:2px;position:relative;z-index:2; }

  /* Battery: much smaller on mobile */
  .cal-bat-body{ width:10px;height:4px; }
  .cal-bat-tip{ width:2px;height:3px; }
  .cal-bat-num{ font-size:7px; }

  /* Diary/journal icon in calendar footer: slightly bigger */
  .cal-jour-img{ width:18px;height:18px; }

  /* Battery: slightly bigger on mobile */
  .cal-bat-body{ width:14px;height:5px; }
  .cal-bat-num{ font-size:8px; }
}

/* ============================================================
   EGG ANIMATIONS
   ============================================================ */
@keyframes eggWobble {
  0%,100% { transform: rotate(-4deg); }
  25%     { transform: rotate(0deg) translateY(-3px); }
  50%     { transform: rotate(4deg); }
  75%     { transform: rotate(0deg) translateY(-3px); }
}
.egg-idle {
  animation: eggWobble 2.4s steps(4) infinite;
  transform-origin: bottom center;
  display: block;
}

@keyframes eggHatch {
  0%   { transform: rotate(0deg) translateX(0); }
  7%   { transform: rotate(-8deg) translateX(-3px); }
  14%  { transform: rotate(9deg) translateX(4px); }
  21%  { transform: rotate(-13deg) translateX(-6px); }
  28%  { transform: rotate(14deg) translateX(6px); }
  35%  { transform: rotate(-18deg) translateX(-8px) scale(1.04); }
  42%  { transform: rotate(19deg) translateX(9px) scale(1.04); }
  49%  { transform: rotate(-22deg) translateX(-10px) scale(1.08); }
  56%  { transform: rotate(23deg) translateX(10px) scale(1.08); }
  62%  { transform: rotate(-20deg) translateX(-9px) scale(1.12); }
  68%  { transform: rotate(20deg) translateX(9px) scale(1.14); }
  74%  { transform: rotate(-14deg) scale(1.18) translateY(-6px); }
  80%  { transform: rotate(10deg) scale(1.26) translateY(-12px); }
  87%  { transform: scale(1.38) translateY(-20px); opacity:.75; }
  93%  { transform: scale(1.55) translateY(-28px); opacity:.35; }
  100% { transform: scale(0.1) translateY(-38px); opacity:0; }
}
.egg-hatching {
  animation: eggHatch 2.2s linear forwards;
  transform-origin: bottom center;
  display: block;
}

/* ============================================================
   BABY SPRITE ANIMATION
   ============================================================ */
@keyframes babyIdle {
  0%   { background-position: 0px 0px; }
  50%  { background-position: calc(var(--bframe) * -1) 0px; }
  100% { background-position: 0px 0px; }
}
@keyframes babyHappy {
  0%   { background-position: calc(var(--bframe) * -2) 0px; }
  33%  { background-position: calc(var(--bframe) * -3) 0px; }
  66%  { background-position: calc(var(--bframe) * -4) 0px; }
  100% { background-position: calc(var(--bframe) * -2) 0px; }
}
@keyframes babyNeglected {
  0%   { background-position: calc(var(--bframe) * -5) 0px; }
  50%  { background-position: calc(var(--bframe) * -6) 0px; }
  100% { background-position: calc(var(--bframe) * -5) 0px; }
}
.baby-sprite {
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.baby-sprite.baby-idle      { animation: babyIdle     1.2s steps(1) infinite; }
.baby-sprite.baby-happy     { animation: babyHappy    0.7s steps(1) infinite; }
.baby-sprite.baby-neglected { animation: babyNeglected 1.8s steps(1) infinite; }

/* ============================================================
   ZODIAC + MOOD PICKER
   ============================================================ */
.pixel.zodiac-pet{
  image-rendering:pixelated;
  display:block;
  filter:drop-shadow(3px 3px 0 rgba(92,42,53,.2));
  animation:petBreathe 1.2s steps(2) infinite;
}
@keyframes petBreathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.pixel.zodiac-pet.happy-mode{
  animation:petBounce 0.5s steps(2) infinite;
}
@keyframes petBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.avatar .pixel.zodiac-pet{
  width:36px;height:36px;
  filter:none;animation:none !important;
}

.mood-picker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  padding:0 4px 10px;
}
.mood-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  height:54px;
  padding:6px 4px;
  background:var(--cream);
  border:2px solid var(--gold-soft);
  color:var(--plum);cursor:pointer;
  font-family:"Silkscreen",monospace;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.mood-btn:hover{
  transform:translateY(-2px);
  border-color:var(--rose);
  background:var(--blush-soft);
  box-shadow:2px 2px 0 rgba(92,42,53,.2);
}
.mood-btn.active{
  background:var(--blush);
  border-color:var(--plum);
  box-shadow:2px 2px 0 rgba(92,42,53,.35), inset 0 0 0 1px var(--gold);
}
.mood-btn .mood-glyph{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  font-size:18px;line-height:1;color:var(--plum);
  font-family:"Pixelify Sans",monospace;
}
.mood-btn .mood-glyph img{
  width:22px;height:22px;image-rendering:pixelated;
}
.mood-btn .mood-lbl{
  font-size:8px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--plum);line-height:1;white-space:nowrap;
}

.mood-btn.active .mood-lbl,.mood-btn.active .mood-glyph{color:var(--plum)}

/* ============================================================
   EMOTIONS PANEL
   ============================================================ */
.emotions-panel{
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:10px 14px;
}
.emotions-half{
  flex:2;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.grat-half{ flex:3; flex-direction:column; align-items:stretch; padding-top:clamp(4px,1vh,10px); gap:8px; }
.grat-body-row{ display:flex; flex-direction:row; align-items:stretch; gap:8px; flex:1; min-height:0; }
.grat-heading-full{ width:100%; }
.grat-inputs{
  flex:1 1 0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.emotions-heading{
  font-size:13px !important;
  margin-top:0 !important;
}

/* Mood picker: fills top half, grid rows expand to use all space */
.emotions-panel .mood-picker{
  flex:1;
  min-height:0;
  overflow:hidden;
  padding:0;
  gap:4px;
  grid-template-rows:1fr 1fr;
  align-content:stretch;
}
/* Mood buttons: fill grid row, never overflow */
.emotions-panel .mood-btn{
  height:100%;
  min-height:0;
  overflow:hidden;
  gap:2px;
  padding:4px 2px;
}
/* Icons fill available button space, shrink when short */
.emotions-panel .mood-btn .mood-glyph{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  overflow:hidden;
  font-size:clamp(14px, 2.5vh, 32px);
}
.emotions-panel .mood-btn .mood-glyph img{
  width:auto;
  height:100%;
  max-height:40px;
  image-rendering:pixelated;
}
.emotions-panel .mood-btn .mood-lbl{
  font-size:clamp(8px, 1vh, 11px);
  flex-shrink:0;
}

/* Grat rows fill remaining space in bottom half */
.grat-rows-fill{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:clamp(2px,0.6vh,6px);
}
.emotions-panel .grat-row{
  flex:1;
  min-height:0;
  margin-bottom:0;
  align-items:stretch;
}
.emotions-panel .grat-row .num{
  display:flex;
  align-items:center;
}
.emotions-panel .grat-row input{
  /* fills the full height of the row */
  height:100%;
}

/* Diary column: fixed-width flex sibling, never overlaps inputs */
.diary-col{
  flex:0 0 clamp(100px,13vw,170px);
  width:clamp(100px,13vw,170px);
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  overflow:hidden;
}

/* Button fills the column width */
.diary-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:transform .1s steps(2), opacity .1s;
}
.diary-btn:hover{ transform:translate(-1px,-2px); opacity:.85; }

@keyframes diary-wiggle{
  0%,88%{transform:rotate(0deg)}
  90%{transform:rotate(-10deg)}
  92%{transform:rotate(10deg)}
  94%{transform:rotate(-8deg)}
  96%{transform:rotate(8deg)}
  98%{transform:rotate(-4deg)}
  100%{transform:rotate(0deg)}
}
/* Icon fills the button/column width, height auto to stay square */
.diary-icon{
  width:100%;
  height:auto;
  max-height:clamp(60px,10vh,110px);
  object-fit:contain;
  image-rendering:pixelated;
  animation:diary-wiggle 9s ease-in-out infinite;
  image-rendering:crisp-edges;
  display:block;
}

/* Label below the icon */
.diary-label{
  font-family:"Silkscreen",monospace;
  font-size:9px;
  color:var(--plum);
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
  line-height:1.5;
  flex-shrink:0;
}

/* Shortened divider lines so they don't extend into the diary column */
.div-sparkle-short::before,
.div-sparkle-short::after{
  max-width:32px;
}

/* Diary view (full panel) */
.diary-view{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:12px;
}
.diary-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.diary-back-btn{
  flex-shrink:0;
  padding:6px 14px;
  background:var(--cream);
  border:2px solid var(--plum);
  color:var(--plum);
  font-family:"Silkscreen",monospace;
  font-size:10px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(0,0,0,.2);
  transition:all .1s steps(2);
}
.diary-back-btn:hover{
  transform:translate(-1px,-1px);
  background:var(--blush-soft);
  border-color:var(--rose);
}
.diary-textarea{
  flex:1;
  min-height:0;
  resize:none;
  /* lined paper effect — lines every 34px matching line-height */
  background-color:var(--cream);
  background-image:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 33px,
    var(--gold-soft) 33px,
    var(--gold-soft) 35px
  );
  border:2px solid var(--gold);
  padding:6px 14px;
  padding-top:8px;
  font:inherit;
  font-family:"Pixelify Sans",monospace;
  font-size:16px;
  color:var(--ink);
  outline:none;
  line-height:34px;
  box-shadow:inset 2px 2px 0 rgba(92,42,53,.1);
}
.diary-textarea:focus{
  border-color:var(--rose);
}
.diary-textarea::placeholder{
  color:#a68d95;
  font-style:italic;
}
.diary-body{
  flex:1;min-height:0;position:relative;
}
.diary-body .diary-textarea{
  width:100%;height:100%;box-sizing:border-box;
  /* Reserve space for the camera button so text never hides behind it */
  padding-right:128px;
}
/* Camera button — top-right corner when no photo */
.diary-photo-add{
  position:absolute;top:8px;right:8px;z-index:5;
  width:110px;
  background:var(--cream);border:2px dashed var(--gold);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px 10px;
  box-shadow:2px 2px 0 rgba(92,42,53,.2);
  transition:border-color .1s steps(2),background .1s steps(2);
}
.diary-photo-add:hover{border-color:var(--rose);background:var(--blush-soft);}
.diary-photo-lbl{
  font-family:"Silkscreen",monospace;font-size:8px;color:var(--plum);
  text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.4;
}
/* Photo preview — top-right, max 50% wide, auto height */
.diary-photo-preview{
  position:absolute;top:8px;right:8px;z-index:5;
  max-width:50%;
}
.diary-photo-img{
  display:block;max-width:100%;height:auto;
  border:2px solid var(--gold);
  box-shadow:2px 2px 0 rgba(92,42,53,.2);
}
.diary-photo-remove{
  position:absolute;top:4px;right:4px;
  background:rgba(20,6,12,.8);color:#fff;border:none;
  width:20px;height:20px;cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.diary-photo-remove:hover{background:var(--rose);}

/* ============================================================
   CUSTOM SCROLLBARS — big pink pixel style
   ============================================================ */
.dash-quest-panel::-webkit-scrollbar,
.dash-zodiac-panel::-webkit-scrollbar,
.emotions-panel::-webkit-scrollbar,
.cal-insights-panel::-webkit-scrollbar,
.diary-textarea::-webkit-scrollbar{
  width:14px;
}
.dash-quest-panel::-webkit-scrollbar-track,
.dash-zodiac-panel::-webkit-scrollbar-track,
.emotions-panel::-webkit-scrollbar-track,
.cal-insights-panel::-webkit-scrollbar-track,
.diary-textarea::-webkit-scrollbar-track{
  background:var(--blush-soft);
  border-left:3px solid var(--rose);
}
.dash-quest-panel::-webkit-scrollbar-thumb,
.dash-zodiac-panel::-webkit-scrollbar-thumb,
.emotions-panel::-webkit-scrollbar-thumb,
.cal-insights-panel::-webkit-scrollbar-thumb,
.diary-textarea::-webkit-scrollbar-thumb{
  background:var(--rose);
  border:3px solid var(--blush-soft);
  border-radius:0;
  box-shadow:inset 0 0 0 1px var(--plum);
}
.dash-quest-panel::-webkit-scrollbar-thumb:hover,
.dash-zodiac-panel::-webkit-scrollbar-thumb:hover,
.emotions-panel::-webkit-scrollbar-thumb:hover,
.cal-insights-panel::-webkit-scrollbar-thumb:hover,
.diary-textarea::-webkit-scrollbar-thumb:hover{
  background:var(--plum);
  border-color:var(--blush);
}