:root{
  --bg:#070a13;
  --accent:#9ad2ff;
  --gold:#f0cd78;
  --steel:#cfd6e3;
  --text:#e9eeff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1400px 900px at 20% 0%, #1b2442 0%, transparent 50%),
    linear-gradient(180deg,#0b1020 0%, #060a14 55%, #04070e 100%);
  background-color:#050811;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

.stage{
  min-height:100svh;
  display:grid; place-items:center;
  gap:12px; padding:18px 14px calc(env(safe-area-inset-bottom,0) + 18px);
}

/* kellakorpus */
.watch{
  width:min(92vw, 860px);
  aspect-ratio:1/1;
  border-radius:28px;
  background: radial-gradient(55% 60% at 50% 55%, #141a2b 0, #0b0f19 40%, #070a12 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 30px 120px rgba(0,0,0,.65),
    0 10px 30px rgba(0,0,0,.5);
  overflow:hidden;
  perspective:1200px;
  transform-style:preserve-3d;
  touch-action:manipulation;
}
.watch:active{ transform: scale(.999); }

/* svg täissuurus */
#dial{ width:100%; height:100%; transform: translateZ(0); }

/* markerid */
#applied rect{
  fill:url(#steel);
  stroke:rgba(255,255,255,.5); stroke-width:1;
  filter:url(#edge);
}

/* tickid (luuakse JS-is) */
#ticks line{
  stroke: rgba(255,255,255,.7);
  stroke-linecap: round;
}
#ticks line.minor{ stroke-opacity:.35 }

/* bränd dialil */
.tt.brand{
  font-family: Cinzel, serif;
  font-size: 26px; letter-spacing:.28em; fill: rgba(255,255,255,.9);
}
.tt.model{
  font-family: Inter, ui-sans-serif; font-weight:700;
  font-size: 13px; letter-spacing:.4em; fill: rgba(255,255,255,.6);
}

/* osutid */
.hand line{ stroke-linecap:round; }
.hour{   stroke:url(#gold);  stroke-width:10; }
.minute{ stroke:url(#steel); stroke-width:7; }
.second{ stroke:#ff5860;     stroke-width:3; }
.cap{ fill:url(#gold) }
.sec-cap{ fill:#ff5860 }

/* uute osutite kujud */
.hour-blade{
  fill: url(#gold);
  stroke: rgba(255,255,255,.22);
  stroke-width: .6;
}
.minute-blade{
  fill: url(#steel);
  stroke: rgba(255,255,255,.28);
  stroke-width: .6;
}
.pip{ fill:#fff; opacity:.95; filter:url(#glow) }

/* tourbillon */
.tb-ring{ fill:none; stroke:url(#steel); stroke-width:8; }
.tb-teeth{ fill:none; stroke:#b7c1d6; stroke-width:10; opacity:.9 }
.tb-bridge rect{ fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.25); stroke-width: 1 }
.esc-body{ fill:url(#steel); stroke:rgba(255,255,255,.25); stroke-width:.8 }
.bal-ring{ fill:none; stroke:url(#gold); stroke-width:6; }
.bal-spoke{ stroke: rgba(255,255,255,.28); stroke-width:2.4; stroke-linecap:round }

/* ekraanilugejale */
.sr-only{
  border:0; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
}

/* liikumise vähenduse tugi */
@media (prefers-reduced-motion: reduce){
  #gears { display:none; }
}