:root{
  --primary:#c19a6b;
  --secondary:#6b8e6b;
  --accent:#e34a3f;
  --cork:#b98a5f;
  --cork-dark:#a07448;
  --wood:#6b4326;
  --wood-dark:#4e2f18;
  --ink:#3a3129;
  --paper:#fdf6e3;
  --paper-edge:#e8dcc0;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}

body{
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", "Marker Felt", cursive, sans-serif;
  background:radial-gradient(circle at 20% 20%, #d8c39a, #c09c6a 70%);
  color:var(--ink);
  display:flex;
  justify-content:center;
  align-items:stretch;
  min-height:100%;
  padding:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}

.frame{
  width:100%;
  max-width:480px;
  background:linear-gradient(145deg, var(--wood), var(--wood-dark));
  border-radius:14px;
  padding:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;
}

.board{
  flex:1;
  border-radius:8px;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.07) 1px, transparent 1.4px);
  background-size:22px 22px;
  background-color:var(--cork);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.12), inset 0 0 60px rgba(0,0,0,.25);
  position:relative;
  padding:20px 16px 92px;
  overflow:hidden;
}

/* Title */
.board-title{text-align:center;margin-bottom:14px;position:relative;}
.board-title h1{
  font-family:"Comic Sans MS","Marker Felt",cursive;
  font-size:2.1rem;
  color:#5d3a1a;
  text-shadow:1px 2px 0 rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.2);
  letter-spacing:1px;
  transform:rotate(-1.2deg);
  display:inline-block;
}
.title-tack{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #e88, var(--accent));
  box-shadow:0 2px 3px rgba(0,0,0,.35);
  margin:0 6px;
}
.tagline{
  font-size:.72rem;color:#6b4a26;letter-spacing:.4px;
  background:rgba(255,255,255,.25);border-radius:20px;display:inline-block;
  padding:2px 10px;margin-top:2px;
}

.panels{position:relative;}
.panel{display:none;}
.panel.active{display:block;animation:fade .3s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ------- Dashboard cork block + flags ------- */
.cork-block{
  background:linear-gradient(180deg, #c2955f, #ab7b48);
  border-radius:6px;
  padding:14px 10px 8px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3), 0 3px 0 rgba(0,0,0,.15);
  position:relative;
  margin-bottom:6px;
}
.flag-row{display:flex;justify-content:space-around;align-items:flex-end;}
.flag{display:flex;flex-direction:column;align-items:center;}
.flag-cloth{
  width:92px;height:64px;
  border-radius:4px 4px 8px 8px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.2), 0 3px 6px rgba(0,0,0,.3);
  position:relative;
}
.flag-cloth::after{
  content:"";position:absolute;left:0;bottom:0;right:0;height:40%;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.15));
  border-radius:0 0 8px 8px;
}
.flag.blue .flag-cloth{background:#4a7fb5;}
.flag.red .flag-cloth{background:#d64541;}
.flag-cloth span{
  font-family:"Comic Sans MS","Marker Felt",cursive;
  font-size:2rem;font-weight:bold;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.flag-pole{
  width:6px;height:34px;
  background:linear-gradient(90deg,#b39b7d,#fff0d8,#b39b7d);
  border-radius:3px;
  margin-top:2px;
  box-shadow:0 2px 2px rgba(0,0,0,.2);
}
.cork-base{
  height:8px;background:#8a6236;border-radius:3px;margin-top:2px;
  box-shadow:inset 0 3px 4px rgba(0,0,0,.4);
}
.flag-labels{display:flex;justify-content:space-around;margin-top:6px;}
.flag-labels span{
  font-size:.66rem;color:#fdf3e0;background:rgba(0,0,0,.18);
  padding:2px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px;
}

.quick-post{
  display:block;width:100%;margin:12px 0 18px;
  background:var(--accent);
  color:#fff;border:none;border-radius:30px;
  font-family:inherit;font-weight:bold;font-size:1.05rem;
  padding:13px;
  box-shadow:0 5px 0 #a92f26, 0 8px 12px rgba(0,0,0,.25);
  cursor:pointer;
  letter-spacing:.5px;
}
.quick-post:active{transform:translateY(4px);box-shadow:0 1px 0 #a92f26;}

/* List headers */
.list-head, .recent-head{
  display:flex;align-items:center;gap:8px;margin:6px 0 10px;
}
.list-head h2,.recent-head h2{
  font-family:"Marker Felt","Comic Sans MS",cursive;
  font-size:1.1rem;color:#4a2f14;
  background:rgba(255,255,255,.22);border-radius:4px;padding:3px 8px;
  box-shadow:0 1px 0 rgba(0,0,0,.1);
  white-space:nowrap;
}
.search-bar{
  flex:1;min-width:0;border:none;border-radius:20px;
  padding:8px 12px;font-family:inherit;font-size:.85rem;
  background:#e9d9b8;box-shadow:inset 0 2px 4px rgba(0,0,0,.2);
}
.search-bar:focus{outline:2px solid var(--secondary);}
.pin-mini{
  width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#c0392b);
  box-shadow:0 2px 3px rgba(0,0,0,.3);margin-left:auto;
}

/* ------- Sticky notes ------- */
.notes-list{display:flex;flex-direction:column;gap:14px;}
.note{
  position:relative;
  background:linear-gradient(180deg,#fff8dd, #f9eec2);
  padding:18px 12px 16px;
  border-radius:3px 3px 6px 6px;
  box-shadow:0 6px 8px rgba(0,0,0,.18);
  transform:rotate(var(--rot,0deg));
}
.note::after{
  content:"";position:absolute;bottom:0;right:0;
  width:18px;height:18px;
  background:linear-gradient(315deg, rgba(0,0,0,.18) 45%, transparent 50%);
  border-radius:0 0 4px 0;
}
.note h3{
  font-family:"Marker Felt","Comic Sans MS",cursive;
  font-size:1.02rem;line-height:1.25;color:#4a3a22;
  word-break:break-word;padding-top:6px;
}
.note .meta{
  font-size:.74rem;color:#8a7350;margin-top:4px;font-style:italic;
}
.note .done-date{
  display:inline-block;font-size:.7rem;color:#5d7a5d;
  background:#e3eccd;border-radius:10px;padding:1px 8px;margin-top:4px;
}
.note .pin{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  box-shadow:0 3px 3px rgba(0,0,0,.35), inset 0 -2px 2px rgba(0,0,0,.25);
  z-index:2;
}
.note .pin::after{
  content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75);
}
.pin.yellow{background:radial-gradient(circle at 30% 30%,#ffe47a,#e6b800);}
.pin.green{background:radial-gradient(circle at 30% 30%,#b7ddb0,#7bb57a);}
.pin.grey{background:radial-gradient(circle at 30% 30%,#dedcd6,#9d9b94);}

.note-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.note-actions button{
  border:none;border-radius:18px;font-family:inherit;font-size:.78rem;font-weight:bold;
  padding:7px 12px;cursor:pointer;color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.btn-taken{background:#7ba05c;}
.btn-done{background:var(--secondary);}
.btn-delete{
  margin-left:auto;background:rgba(0,0,0,.15);box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.note-actions button:active{transform:translateY(2px);box-shadow:none;}

.empty{
  text-align:center;color:#6b4a26;background:rgba(255,255,255,.2);
  border-radius:8px;padding:22px 12px;font-size:.9rem;
  border:2px dashed rgba(0,0,0,.15);
}

/* ------- Post form ------- */
.form-note{
  position:relative;background:#fdf6e3;border-radius:4px 4px 6px 6px;
  padding:26px 18px 18px;box-shadow:0 8px 10px rgba(0,0,0,.2);
  transform:rotate(.6deg);
}
.form-note::after{
  content:"";position:absolute;bottom:0;right:0;width:18px;height:18px;
  background:linear-gradient(315deg, rgba(0,0,0,.18) 45%, transparent 50%);
  border-radius:0 0 4px 0;
}
.form-pin{
  position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffe47a,#e6b800);
  box-shadow:0 3px 3px rgba(0,0,0,.35);z-index:2;
}
.form-note h2{
  font-family:"Marker Felt","Comic Sans MS",cursive;font-size:1.3rem;
  color:#4a3a22;text-align:center;
}
.form-hint{text-align:center;font-size:.8rem;color:#8a7350;margin-bottom:14px;}
.form-note label{
  display:block;font-size:.85rem;font-weight:bold;color:#5d4a2e;margin:12px 0 4px;
}
.form-note label span{font-weight:normal;color:#a08a62;font-size:.72rem;}
.form-note input,.form-note textarea{
  width:100%;border:2px solid #e2d5b4;border-radius:6px;
  background:#fffdf5;padding:10px 12px;font-family:inherit;font-size:.95rem;color:var(--ink);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.05);
}
.form-note input:focus,.form-note textarea:focus{
  outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(107,142,107,.25);
}
.field-error{
  color:var(--accent);font-size:.76rem;margin-top:4px;display:none;font-weight:bold;
}
.field-error.show{display:block;}
.form-note input.invalid{border-color:var(--accent);}
.btn-submit{
  display:block;width:100%;margin-top:18px;background:var(--accent);color:#fff;
  border:none;border-radius:30px;padding:13px;font-family:inherit;font-size:1rem;font-weight:bold;
  box-shadow:0 5px 0 #a92f26;cursor:pointer;
}
.btn-submit:active{transform:translateY(4px);box-shadow:none;}

/* ------- Bottom nav (push pins) ------- */
.bottom-nav{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-around;align-items:flex-end;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}
.nav-pin{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:64px;
}
.pin-head{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:flex-start;justify-content:center;
  position:relative;
}
.pin-head .pin-top{
  width:9px;height:9px;border-radius:50%;
  background:#fff;
}
/* inactive pins: matte, flat, flush */
.nav-pin[data-tab="dashboard"] .pin-head{background-color:#d8c34a;}
.nav-pin[data-tab="post"] .pin-head{background-color:#e6e04f;}
.nav-pin[data-tab="open"] .pin-head{background-color:#7fa8d0;}
.nav-pin[data-tab="done"] .pin-head{background-color:#c2c0b8;}
.nav-pin .pin-head .pin-top{background:rgba(255,255,255,.4);}

/* active pin: metallic red, pulled out, shadow */
.nav-pin.active .pin-head{
  background:linear-gradient(145deg,#ff6b60,var(--accent) 55%,#b02d24);
  transform:translateY(-4px);
  box-shadow:0 6px 10px rgba(0,0,0,.35);
}
.nav-pin.active .pin-head .pin-top{background:#ffe0dd;}
.pin-label{
  font-size:.66rem;font-weight:bold;color:#f6e6cf;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  text-transform:uppercase;letter-spacing:.3px;
  background:rgba(0,0,0,.25);border-radius:10px;padding:2px 7px;
}
.nav-pin.active .pin-label{background:var(--accent);}

@media (max-width:360px){
  .flag-cloth{width:80px;height:58px;}
}