:root{
  --primary:#2e4a2e;
  --secondary:#6b4226;
  --accent:#ffd700;
  --chalk:#f4f1e6;
  --chalk-dim:rgba(244,241,230,.6);
  --wood-dark:#4a2c16;
  --wood-light:#8a5a35;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"Comic Sans MS","Comic Sans",cursive;
  background:var(--primary);
  color:var(--chalk);
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
}

/* ---- wood frame ---- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  height:calc(52px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 14px 8px 14px;
  display:flex;align-items:center;
  background:linear-gradient(180deg,var(--wood-dark),var(--wood-light) 60%,var(--wood-dark));
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.board-title{
  font-size:1.5rem;font-weight:bold;letter-spacing:1px;
  color:var(--chalk);text-shadow:2px 2px 0 rgba(0,0,0,.5);
  transform:rotate(-2deg);
}

/* quick chalk-stick button */
.chalk-stick-btn{
  margin-left:auto;position:relative;
  width:44px;height:44px;border:none;border-radius:8px;
  background:var(--accent);color:#3a2a00;
  font-family:inherit;font-weight:bold;font-size:1.7rem;line-height:1;
  transform:rotate(15deg);
  box-shadow:0 4px 8px rgba(0,0,0,.45),0 0 0 2px rgba(0,0,0,.15);
}
.chalk-stick-btn::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--accent);
}
.chalk-stick-btn:active{transform:rotate(15deg) translateY(2px);}
.chalk-dust-counter{
  display:none;
}

/* ---- board body ---- */
.board{
  position:fixed;inset:0;
  padding:calc(62px + env(safe-area-inset-top)) 16px 118px 16px;
  overflow-y:auto;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/6px 6px,
    radial-gradient(rgba(0,0,0,.2) 1px,transparent 1px) 3px 3px/8px 8px,
    var(--primary);
  background-attachment:local;
}
.tab-page{display:none;}
.tab-page.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;}}

.page-heading,.form-heading{
  font-size:1.15rem;text-align:center;margin:6px 0 14px;
  transform:rotate(-1deg);text-shadow:1px 1px 0 rgba(0,0,0,.5);
}

/* ---- dashboard chalk circles ---- */
.dash{position:relative;height:110px;margin-bottom:6px;}
.chalk-circle{
  position:absolute;top:0;width:88px;height:88px;
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:transparent;
  box-shadow:
    inset 0 0 0 3px rgba(244,241,230,.35),
    0 0 0 2px rgba(244,241,230,.55),
    0 0 8px rgba(0,0,0,.3);
}
#dashToday{left:2px;}
#dashActive{right:2px;}
.chalk-circle:nth-child(2){animation:wobble 6s ease-in-out infinite;}
@keyframes wobble{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
.circle-num{
  font-size:2.1rem;font-weight:bold;line-height:1;
  color:var(--chalk);text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.circle-label{
  font-size:.62rem;margin-top:3px;text-transform:uppercase;letter-spacing:1px;
  color:rgba(244,241,230,.85);
}

/* ---- feed / posts ---- */
.feed{display:flex;flex-direction:column;gap:14px;padding-top:6px;}
.post{
  position:relative;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  padding:12px 14px 12px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.post-head{display:flex;align-items:center;gap:9px;}
.icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(244,241,230,.7);
  display:flex;align-items:center;justify-content:center;
  color:var(--chalk);font-size:1rem;line-height:1;
}
.icon svg{width:16px;height:16px;stroke:var(--chalk);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.post-title{
  font-size:1.1rem;font-weight:bold;margin:0;flex:1;
  word-break:break-word;line-height:1.15;
}
.post-desc{
  font-size:.95rem;margin:8px 0 0;line-height:1.35;
  white-space:pre-wrap;word-break:break-word;
  color:rgba(244,241,230,.92);
}
.post-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:9px;font-size:.72rem;
  color:rgba(244,241,230,.7);
}
.cat-tag{font-style:italic;transform:rotate(-1deg);}
.contact{color:rgba(255,215,0,.85);font-style:italic;}
.old{font-style:italic;color:rgba(244,241,230,.5);}

/* smudge overlay for older posts */
.post.smudge::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  background:rgba(46,74,46,.35);
  -webkit-backdrop-filter:blur(1.2px);backdrop-filter:blur(1.2px);
  pointer-events:none;
}
/* completed: heavily smeared, barely legible */
.post.completed{
  opacity:.35;
  -webkit-filter:saturate(.4) blur(1.6px);filter:saturate(.4) blur(1.6px);
}
.post.completed .post-title{text-decoration:line-through;text-decoration-thickness:2px;}
.post .del-btn{
  position:absolute;top:8px;right:8px;
  width:26px;height:26px;border:none;border-radius:50%;
  background:rgba(0,0,0,.35);color:var(--chalk);
  font-family:inherit;font-size:1rem;line-height:1;
  cursor:pointer;z-index:2;
}
.post .del-btn:active{background:rgba(0,0,0,.6);}

/* empty state */
.empty{
  text-align:center;padding:70px 20px;
  color:rgba(244,241,230,.75);font-style:italic;
  background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/5px 5px;
}
.empty .big{font-size:1.2rem;display:block;margin-bottom:6px;}

/* ---- forms ---- */
#writeForm{
  background:rgba(0,0,0,.18);
  border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:12px;
}
.field{display:flex;flex-direction:column;gap:4px;}
.field>span{font-size:.9rem;color:rgba(244,241,230,.9);transform:rotate(-1deg);}
.field i{font-style:italic;opacity:.6;font-size:.8rem;}
input,textarea,select{
  width:100%;padding:11px 12px;border:none;border-radius:8px;
  background:rgba(255,255,255,.92);color:#22391f;
  font-family:inherit;font-size:1rem;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25);
}
textarea{resize:vertical;}
input:focus,textarea:focus,select:focus{outline:3px solid var(--accent);}
.err{color:#ffb3b3;font-size:.78rem;min-height:0;display:none;}
.field.invalid .err{display:block;}
.primary-btn{
  padding:13px;border:none;border-radius:8px;
  background:var(--accent);color:#3a2a00;
  font-family:inherit;font-weight:bold;font-size:1.05rem;
  transform:rotate(-1deg);box-shadow:0 4px 8px rgba(0,0,0,.4);
  cursor:pointer;
}
.primary-btn:active{transform:translateY(2px) rotate(-1deg);}

/* ---- search ---- */
.search-box input{
  font-size:1.05rem;background:rgba(255,255,255,.95);
  margin-bottom:14px;
}
.search-box input::placeholder{font-style:italic;}

/* ---- tray / tabs ---- */
.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:calc(64px + env(safe-area-inset-bottom));
  padding:6px 10px env(safe-area-inset-bottom) 10px;
  background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));
  border-top:3px solid var(--wood-dark);
  box-shadow:0 -4px 10px rgba(0,0,0,.5);
  display:flex;align-items:flex-end;gap:6px;
}
.stick{
  flex:1;position:relative;height:52px;border:none;background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0;cursor:pointer;
}
.stick .tip{
  position:absolute;top:2px;left:50%;width:6px;height:14px;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;
}
.stick .body{
  width:78%;height:40px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:.68rem;font-weight:bold;
  color:rgba(0,0,0,.65);
  box-shadow:0 3px 5px rgba(0,0,0,.4);
}
.stick .dust{display:none;}
/* inactive: flat, blunt, no dust */
.stick:not(.active) .tip{display:none;}
.stick:not(.active) .body{border-radius:50% 50% 8px 8px;height:34px;}

/* active: angled 15deg, sharp tip, chalk dust beneath */
.stick.active .body{transform:rotate(15deg);}
.stick.active .tip{display:block;}
.stick.active .dust{
  display:block;position:absolute;bottom:1px;left:50%;
  width:20px;height:6px;transform:translateX(-50%);
  border-radius:50%;
  -webkit-filter:blur(3px);filter:blur(3px);
  opacity:.6;
}
/* stick colors */
.stick[data-tab="board"] .body{background:#f4f1e6;}
.stick[data-tab="board"] .tip{background:#f4f1e6;}
.stick[data-tab="board"] .dust{background:#f4f1e6;}
.stick[data-tab="write"] .body{background:#6fb1e8;}
.stick[data-tab="write"] .tip{background:#6fb1e8;}
.stick[data-tab="write"] .dust{background:#6fb1e8;}
.stick[data-tab="mine"] .body{background:#8fce8f;}
.stick[data-tab="mine"] .tip{background:#8fce8f;}
.stick[data-tab="mine"] .dust{background:#8fce8f;}
.stick[data-tab="search"] .body{background:#ffe66d;}
.stick[data-tab="search"] .tip{background:#ffe66d;}
.stick[data-tab="search"] .dust{background:#ffe66d;}

/* ---- modal ---- */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.modal-card{
  background:#f4f1e6;color:#22391f;border-radius:12px;
  padding:20px;width:100%;max-width:300px;text-align:center;
  font-family:inherit;
}
.modal-actions{display:flex;gap:10px;margin-top:16px;}
.ghost-btn,.danger-btn{
  flex:1;padding:11px;border:none;border-radius:8px;
  font-family:inherit;font-weight:bold;font-size:1rem;
}
.ghost-btn{background:#d9d4c4;}
.danger-btn{background:#b4553f;color:var(--chalk);}