:root{
  --brass:#d4af37;
  --brass-dark:#b8942b;
  --brass-shadow:#8a6d1f;
  --navy:#3a4b5c;
  --navy-dark:#2b3642;
  --red:#c41e3a;
  --kraft:#f5deb3;
  --kraft-dark:#e7c88f;
  --ink:#000080;
  --blue:#2f6fd6;
  --green:#2f9e6f;
  --orange:#d97a2b;
  --grey:#9a9a9a;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:Georgia,'Times New Roman',serif;
  color:var(--ink);
  background:radial-gradient(circle at 50% 20%,#4a5d70 0%,#2b3642 60%,#1e2630 100%);
  min-height:100vh;
  min-height:100dvh;
}

.wall{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,transparent,#2b3642);
}

/* ---- Brass plaques ---- */
.plaques{
  display:flex;
  gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 14px 6px;
  justify-content:center;
}
.plaque{
  flex:1;
  background:linear-gradient(160deg,#e9c964,#b8942b 55%,#8a6d1f);
  border:1px solid #7c611c;
  border-radius:10px;
  padding:8px 12px;
  text-align:center;
  box-shadow:0 3px 0 #5e4a16, inset 0 1px 0 #f6e6a8;
  color:#3b2d0d;
}
.plaque-label{
  display:block;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.9;
}
.plaque-num{
  display:block;
  font-size:30px;
  font-weight:bold;
  line-height:1.1;
  color:#241b06;
}

/* ---- Mailbox slots peek row ---- */
.slots{
  display:flex;
  gap:8px;
  padding:12px 14px 4px;
  overflow-x:auto;
  min-height:96px;
}
.slot{
  flex:0 0 auto;
  width:96px;
  height:76px;
  background:#202a34;
  border:3px solid var(--brass-dark);
  border-radius:8px;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.6), 0 3px 0 #5e4a16;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:4px;
  position:relative;
}
.slot .peek{
  transform:translateY(8px);
}
.slot-empty{
  color:#6b7b8b;
  font-size:11px;
  font-style:italic;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
}

/* ---- Kraft envelope card ---- */
.env{
  background:linear-gradient(180deg,#f7e6c0,var(--kraft) 40%,var(--kraft-dark));
  border:1px solid #cdb27a;
  border-radius:6px;
  padding:10px 12px;
  margin-bottom:10px;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.env::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:5px;
  background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(0,0,0,.05) 8px 16px);
}
.env-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.env-title{
  margin:0;
  font-size:15px;
  font-weight:bold;
  color:var(--ink);
  font-family:'Brush Script MT','Segoe Script',Georgia,cursive;
}
.env-detail{
  margin:6px 0 0;
  font-size:12px;
  color:#3d2f12;
  font-family:Georgia,serif;
}
.env-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  font-size:11px;
  color:#6b5426;
}

/* stamp */
.stamp{
  width:30px;height:30px;
  border-radius:50%;
  border:2px dashed rgba(0,0,0,.25);
  display:inline-block;
  flex:0 0 auto;
}
.stamp.blue{background:var(--blue);}
.stamp.green{background:var(--green);}
.stamp.orange{background:var(--orange);}
.stamp.grey{background:var(--grey);}

/* flap */
.flap{
  width:0;height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:14px solid var(--kraft-dark);
  display:inline-block;
}
.flap.sealed{
  border-bottom:14px solid #b8942b;
}
.flap .dot,.wax{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--red);
}
.wax{
  width:10px;height:10px;
  box-shadow:0 0 0 2px #8f1226;
}
.red-sticker{
  display:inline-block;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--red);
  vertical-align:middle;
  margin-left:6px;
}
.completed{
  position:absolute;
  right:-20px;top:14px;
  transform:rotate(-20deg);
  background:var(--red);
  color:#fff;
  font-size:10px;
  letter-spacing:1px;
  padding:3px 24px;
  font-weight:bold;
  box-shadow:0 2px 0 #7f1022;
}
button.done-btn{
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:7px 14px;
  font-family:Georgia,serif;
  font-size:13px;
  font-weight:bold;
  box-shadow:0 3px 0 #7f1022;
  cursor:pointer;
}
button.done-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #7f1022;}

/* claimable envelope */
.env.claim{cursor:pointer;}
.env.claim:active{transform:translateY(2px);}

/* ---- Lists ---- */
.lists{
  flex:1;
  padding:10px 14px calc(84px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.section-title{
  color:#f0e3c0;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:8px 0 8px;
}
.empty{
  color:#cdd8e0;
  font-style:italic;
  text-align:center;
  padding:24px 10px;
  font-size:13px;
}

/* ---- Post form ---- */
form.post{
  background:linear-gradient(180deg,#f7e6c0,var(--kraft));
  border:1px solid #cdb27a;
  border-radius:8px;
  padding:16px;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.post label{
  display:block;
  font-size:12px;
  font-weight:bold;
  color:#3b2d0d;
  margin:12px 0 4px;
}
.post input[type=text],.post textarea{
  width:100%;
  font-family:Georgia,serif;
  font-size:14px;
  color:var(--ink);
  background:#fff8ea;
  border:1px solid #cdb27a;
  border-radius:6px;
  padding:10px;
}
.post textarea{min-height:90px;resize:vertical;}
.cat-pick{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.cat-pick button{
  flex:1;
  min-width:70px;
  background:#e7c88f;
  border:2px solid #cdb27a;
  border-radius:20px;
  padding:8px;
  font-family:Georgia,serif;
  font-size:12px;
  color:#3b2d0d;
  cursor:pointer;
}
.cat-pick button.sel{
  background:var(--brass);
  border-color:var(--brass-dark);
  color:#241b06;
  font-weight:bold;
  box-shadow:0 2px 0 #8a6d1f;
}
.post .poster{background:#e7c88f;font-weight:bold;color:#3b2d0d;}
.err{
  color:var(--red);
  font-size:12px;
  margin:4px 0 0;
  min-height:14px;
}
.submit{
  width:100%;
  margin-top:16px;
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:24px;
  padding:13px;
  font-family:Georgia,serif;
  font-size:16px;
  font-weight:bold;
  box-shadow:0 3px 0 #7f1022;
  cursor:pointer;
}
.submit:active{transform:translateY(2px);}

/* ---- Flag button ---- */
.flag-btn{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px auto 0;
  background:linear-gradient(160deg,#e9c964,#b8942b);
  border:1px solid #7c611c;
  border-radius:20px;
  padding:6px 14px;
  color:#241b06;
  font-family:Georgia,serif;
  font-weight:bold;
  box-shadow:0 3px 0 #5e4a16;
  cursor:pointer;
}
.flag{
  width:14px;height:22px;
  border-radius:2px;
  background:var(--red);
  box-shadow:0 3px 0 #7f1022;
}

/* ---- Bottom key bar ---- */
.keybar{
  position:fixed;
  left:0;right:0;bottom:0;
  max-width:520px;
  margin:0 auto;
  display:flex;
  background:linear-gradient(180deg,#223,var(--navy-dark));
  border-top:2px solid var(--brass-dark);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  z-index:20;
}
.key{
  flex:1;
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 2px;
  cursor:pointer;
  filter:grayscale(.5) brightness(.7);
  transition:transform .12s ease, filter .12s ease;
}
.key.active{
  transform:translateY(-4px);
  filter:grayscale(0) brightness(1.05);
}
.key-label{
  font-size:10px;
  color:#cdd8e0;
  letter-spacing:.3px;
  font-family:Georgia,serif;
}
.key.active .key-label{color:var(--brass);font-weight:bold;}
.key-icon{
  width:34px;height:30px;
  border-radius:16px 16px 3px 3px;
  position:relative;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.35);
}
.key-icon::after{
  content:"";
  position:absolute;
  left:50%;top:-6px;
  width:16px;height:8px;
  margin-left:-8px;
  background:inherit;
  border-radius:3px;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.4);
}
.key-gold{background:linear-gradient(180deg,#ffe9a0,#d4af37);}
.key-silver{background:linear-gradient(180deg,#f0f0f0,#b9bec4);}
.key-bronze{background:linear-gradient(180deg,#e8b06a,#9c5b21);}
.key-copper{background:linear-gradient(180deg,#f0a070,#a34a1f);}
.key.active .key-icon{box-shadow:inset 0 -3px 5px rgba(0,0,0,.2), 0 4px 6px rgba(0,0,0,.4);}
.key.active .key-icon::before{
  content:"";
  position:absolute;
  left:6px;top:3px;
  width:10px;height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  filter:blur(2px);
}

.search{
  width:100%;
  margin-bottom:10px;
  font-family:Georgia,serif;
  font-size:13px;
  color:var(--ink);
  background:#fff8ea;
  border:1px solid #cdb27a;
  border-radius:6px;
  padding:9px;
}