:root{
  --charcoal:#1a1c22;
  --amber:#d9a066;
  --sienna:#8c5e3c;
  --dusk:#2a2438;
  --parchment:#e8e2d4;
  --parchment-dim:rgba(232,226,212,0.5);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
  overflow:hidden;
  background:var(--charcoal);
  font-family:'Vazirmatn', sans-serif;
  color:var(--parchment);
  -webkit-font-smoothing:antialiased;
}

#scene-container{
  position:fixed;
  inset:0;
  z-index:0;
  /* fallback atmosphere even before any scene builds */
  background:linear-gradient(180deg, #1a1330 0%, #3a2740 45%, #7a4530 78%, #c0663a 100%);
}
#scene-container canvas{ display:block; }

/* ===================== CSS fallback scene ===================== */
.css-scene{ position:absolute; inset:0; overflow:hidden; }
.css-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #1a1330 0%, #3a2740 45%, #7a4530 78%, #c0663a 100%);
}
.css-sun{
  position:absolute;
  top:14%; left:16%;
  width:120px; height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,190,120,0.9), rgba(217,160,102,0.25) 60%, transparent 72%);
  filter:blur(2px);
}
.css-mountain{
  position:absolute;
  bottom:0; left:-10%;
  width:120%; height:55%;
  background:
    linear-gradient(135deg, transparent 46%, #2c2438 46%),
    linear-gradient(45deg, transparent 46%, #2c2438 46%);
  background-color:#2c2438;
  clip-path:polygon(0 100%, 18% 55%, 40% 78%, 62% 30%, 82% 62%, 100% 42%, 100% 100%);
  opacity:0.85;
}
.css-slope{
  position:absolute;
  bottom:0; left:0;
  width:85%; height:82%;
  background:linear-gradient(180deg, #6b4d38, #4a3428);
  transform-origin:bottom left;
  clip-path:polygon(0 100%, 100% 18%, 100% 100%);
  border-top:2px solid rgba(0,0,0,0.2);
}
.css-summit{
  position:absolute;
  top:8%; right:10%;
  width:0; height:0;
  border-left:70px solid transparent;
  border-right:70px solid transparent;
  border-bottom:150px solid #241d30;
  opacity:0.7;
}
.css-actors{
  position:absolute;
  left:8%; bottom:22%;
  width:70px; height:96px;
  transition:left 0.4s linear, bottom 0.4s linear;
}
.css-boulder{
  position:absolute;
  top:-8px; left:8px;
  width:52px; height:52px;
  border-radius:48% 52% 46% 54%;
  background:radial-gradient(circle at 35% 30%, #6a626c, #47414c 70%);
  box-shadow:inset -6px -6px 10px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.4);
}
.css-sisyphus{
  position:absolute;
  bottom:0; left:0;
  width:26px; height:52px;
  background:linear-gradient(180deg, #9c7a5c 0 30%, #6b3a2e 30% 100%);
  border-radius:12px 12px 6px 6px;
  transform:rotate(-24deg);
  transform-origin:bottom right;
  box-shadow:0 4px 8px rgba(0,0,0,0.4);
}

/* ===================== UI overlay ===================== */
#ui{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:clamp(1rem, 4vw, 3rem);
}
#ui button, #ui a{ pointer-events:auto; }

#header{ text-align:center; animation:fadeDown 1.6s ease both; }
.title{
  font-weight:200;
  font-size:clamp(2.2rem, 7vw, 4rem);
  letter-spacing:0.15em;
  color:var(--parchment);
  text-shadow:0 2px 30px rgba(0,0,0,0.6);
}
.subtitle{
  font-weight:300;
  font-size:clamp(0.8rem, 2.5vw, 1.05rem);
  color:var(--amber);
  letter-spacing:0.25em;
  margin-top:0.4rem;
  opacity:0.85;
}

#quote-layer{
  position:absolute;
  top:clamp(6rem, 18vh, 10rem);
  left:50%;
  transform:translateX(-50%) translateY(10px);
  width:min(90vw, 640px);
  text-align:center;
  opacity:0;
  transition:opacity 1.2s ease, transform 1.2s ease;
}
#quote-layer.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.quote-fa{
  font-weight:300;
  font-size:clamp(1rem, 3.2vw, 1.5rem);
  line-height:2;
  color:var(--parchment);
  text-shadow:0 2px 20px rgba(0,0,0,0.7);
}
.quote-en{
  font-weight:200;
  font-size:clamp(0.7rem, 2vw, 0.9rem);
  color:var(--parchment-dim);
  margin-top:0.6rem;
  font-style:italic;
  direction:ltr;
}
.quote-author{
  font-weight:400;
  font-size:0.8rem;
  color:var(--amber);
  margin-top:0.5rem;
  letter-spacing:0.1em;
  opacity:0.8;
}

#center-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  margin-top:auto;
  margin-bottom:auto;
}
#timer-ring{
  position:relative;
  width:clamp(200px, 42vw, 300px);
  height:clamp(200px, 42vw, 300px);
  filter:drop-shadow(0 8px 40px rgba(0,0,0,0.5));
}
#ring-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:rgba(232,226,212,0.08); stroke-width:2; }
.ring-fg{
  fill:none;
  stroke:var(--amber);
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dashoffset 1s linear;
  filter:drop-shadow(0 0 6px rgba(217,160,102,0.6));
}
#timer-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:100;
  font-size:clamp(2.6rem, 9vw, 4.2rem);
  letter-spacing:0.05em;
  color:var(--parchment);
  text-shadow:0 0 30px rgba(217,160,102,0.3);
}
#cycle-count{
  font-weight:300;
  font-size:0.95rem;
  color:var(--amber);
  letter-spacing:0.1em;
  padding:0.3rem 1rem;
  border:1px solid rgba(217,160,102,0.25);
  border-radius:999px;
  background:rgba(26,28,34,0.35);
  backdrop-filter:blur(6px);
  transition:all 0.4s ease;
}
#cycle-count.flash{
  color:var(--charcoal);
  background:var(--amber);
  box-shadow:0 0 30px rgba(217,160,102,0.7);
}

#controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  animation:fadeUp 1.6s ease both;
}
#presets{ display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; }
.preset{
  font-family:inherit;
  font-weight:300;
  font-size:0.85rem;
  color:var(--parchment-dim);
  background:rgba(26,28,34,0.4);
  border:1px solid rgba(232,226,212,0.12);
  border-radius:999px;
  padding:0.45rem 1rem;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:all 0.4s ease;
}
.preset:hover{ color:var(--parchment); border-color:rgba(217,160,102,0.4); }
.preset.active{ color:var(--amber); border-color:var(--amber); background:rgba(217,160,102,0.08); }

#buttons{ display:flex; gap:0.6rem; align-items:center; }
.ctrl-btn{
  font-family:inherit;
  font-weight:300;
  font-size:0.95rem;
  color:var(--parchment);
  background:rgba(26,28,34,0.45);
  border:1px solid rgba(232,226,212,0.15);
  border-radius:10px;
  padding:0.6rem 1.6rem;
  cursor:pointer;
  backdrop-filter:blur(10px);
  letter-spacing:0.05em;
  transition:all 0.4s ease;
  min-height:44px;
}
.ctrl-btn:hover{ border-color:rgba(217,160,102,0.5); background:rgba(217,160,102,0.06); }
.ctrl-btn.primary{ color:var(--amber); border-color:rgba(217,160,102,0.5); }
.ctrl-btn.primary:hover{ background:rgba(217,160,102,0.12); box-shadow:0 0 24px rgba(217,160,102,0.25); }
.ctrl-btn.icon{ padding:0.6rem 0.9rem; font-size:1.1rem; }
.ctrl-btn.hidden{ display:none; }

#footer{ font-size:0.75rem; opacity:0.4; transition:opacity 0.4s ease; }
#footer:hover{ opacity:0.8; }
#footer a{
  color:var(--parchment-dim);
  text-decoration:none;
  border-bottom:1px dotted rgba(232,226,212,0.3);
  direction:ltr;
  display:inline-block;
}
#footer a:hover{ color:var(--amber); }

@keyframes fadeDown{ from{ opacity:0; transform:translateY(-20px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width:600px){
  #ui{ justify-content:flex-start; }
  #center-panel{ margin-top:34vh; margin-bottom:0; }
  #quote-layer{ top:5.5rem; }
  #controls{ margin-top:auto; }
  .css-sun{ width:80px; height:80px; }
}