:root{
  --terra-1:#BD532B;
  --terra-2:#8F3618;
  --carbon:#141214;
  --carbon-2:#1C1917;
  --gold:#EAB308;
  --gold-2:#F59E0B;
}

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

html,body{
  height:100%; width:100%; overflow:hidden;
  background:var(--terra-2);
  font-family:'Vazirmatn', sans-serif;
  color:var(--gold);
  user-select:none;
}

#canvas{ position:fixed; inset:0; z-index:0; display:block; }

/* ---- Meander borders ---- */
.meander{
  position:fixed; left:0; right:0; height:22px; z-index:5;
  background-repeat:repeat-x; background-size:auto 22px;
  opacity:0.85; pointer-events:none;
}
.meander-top{ top:0; }
.meander-bottom{ bottom:0; transform:scaleY(-1); }

/* ---- Top bar ---- */
#topbar{
  position:fixed; top:26px; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 18px;
}
#topbar .brand{
  font-family:'Lalezar', cursive;
  font-size:1.5rem; color:var(--gold-2);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.navlinks{ display:flex; gap:16px; flex-wrap:wrap; }
.navlinks a{
  color:var(--gold); text-decoration:none; font-size:.95rem;
  padding:2px 4px; border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s; text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.navlinks a:hover{ color:#fff; border-color:var(--gold-2); }

/* ---- Stage (timer + quote) ---- */
#stage{
  position:fixed; top:0; left:0; right:0; z-index:8;
  display:flex; flex-direction:column; align-items:center;
  padding-top:14vh; pointer-events:none;
}
#timer{
  font-family:'Lalezar', cursive;
  font-size:clamp(3.2rem, 12vw, 7rem);
  color:var(--gold-2);
  letter-spacing:2px;
  text-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 2px var(--carbon);
  line-height:1;
}
#quoteCard{
  margin-top:20px; max-width:min(560px, 88vw);
  background:rgba(20,18,20,.62);
  border:1px solid rgba(234,179,8,.35);
  border-radius:12px; padding:16px 22px;
  backdrop-filter:blur(3px);
  text-align:center; direction:rtl;
  opacity:0; transform:translateY(10px);
  transition:opacity .8s ease, transform .8s ease;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
#quoteCard.show{ opacity:1; transform:translateY(0); }
.quote-text{ font-size:clamp(1rem,3.4vw,1.35rem); font-weight:700; color:#F5E8C8; line-height:1.9; }
.quote-cat{ margin-top:10px; font-size:.85rem; color:var(--gold); }

/* ---- Bottom action area ---- */
#actionArea{
  position:fixed; bottom:46px; left:0; right:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
#elevation{
  font-family:'Lalezar', cursive; font-size:1.4rem; color:var(--gold-2);
  background:rgba(20,18,20,.55); padding:6px 20px; border-radius:20px;
  border:1px solid rgba(234,179,8,.3);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.buttons{ display:flex; gap:14px; }
.buttons button{
  font-family:'Vazirmatn', sans-serif; font-weight:700; font-size:1rem;
  color:var(--gold); background:rgba(20,18,20,.85);
  border:1.5px solid var(--gold); border-radius:30px;
  padding:12px 26px; cursor:pointer;
  transition:transform .1s, background .2s, color .2s;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.buttons button:hover{ background:var(--gold); color:var(--carbon); }
.buttons button:active{ transform:scale(.94); }
#btnReset{ border-color:var(--gold-2); color:var(--gold-2); }
#btnReset:hover{ background:var(--gold-2); color:var(--carbon); }

/* ---- Footer ---- */
#footer{
  position:fixed; bottom:26px; left:0; right:0; z-index:10;
  text-align:center;
}
#footer a{ color:rgba(234,179,8,.6); text-decoration:none; font-size:.78rem; }
#footer a:hover{ color:var(--gold); }

/* ---- Modal ---- */
#modalBackdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(10,8,8,.7); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
#modalBackdrop.open{ display:flex; }
#modal{
  position:relative; max-width:520px; width:100%; max-height:85vh; overflow-y:auto;
  background:linear-gradient(160deg,#2a1a12,#1C1917);
  border:1.5px solid var(--gold); border-radius:16px;
  padding:28px 26px; direction:rtl;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#modalClose{
  position:absolute; top:10px; left:14px;
  background:none; border:none; color:var(--gold);
  font-size:1.8rem; cursor:pointer; line-height:1;
}
#modal h2{ font-family:'Lalezar',cursive; color:var(--gold-2); font-size:1.8rem; margin-bottom:14px; }
#modal p{ color:#E8D9B8; line-height:2; margin-bottom:12px; font-size:.98rem; }
#modal .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:14px 0; color:#E8D9B8; }
#modal .row.check{ justify-content:flex-start; gap:8px; cursor:pointer; }
#modal input[type=number]{
  width:90px; padding:8px; border-radius:8px; text-align:center;
  background:var(--carbon); border:1px solid var(--gold); color:var(--gold-2);
  font-family:'Vazirmatn',sans-serif; font-size:1rem;
}
#modal input[type=checkbox]{ width:18px; height:18px; accent-color:var(--gold-2); }
.savebtn{
  margin-top:8px; width:100%; padding:12px; border-radius:10px;
  background:var(--gold); color:var(--carbon); border:none;
  font-family:'Vazirmatn',sans-serif; font-weight:700; font-size:1rem; cursor:pointer;
}
.savebtn:hover{ background:var(--gold-2); }
.badges{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.badge{
  background:rgba(0,0,0,.3); border:1px solid rgba(234,179,8,.2);
  border-radius:10px; padding:12px; opacity:.45; text-align:center;
}
.badge.got{ opacity:1; border-color:var(--gold); box-shadow:0 0 14px rgba(234,179,8,.25); }
.badge span{ display:block; font-family:'Lalezar',cursive; color:var(--gold-2); font-size:1.1rem; }
.badge small{ color:#C9B896; font-size:.75rem; }

#controls{ display:none; }

@media (max-width:520px){
  #topbar{ flex-direction:column; gap:6px; top:24px; }
  #topbar .brand{ font-size:1.2rem; }
  .navlinks{ gap:12px; font-size:.85rem; }
  #stage{ padding-top:20vh; }
  .buttons button{ padding:11px 20px; font-size:.9rem; }
}