:root {
  --bg: #6a25a3;
  --ink: #3e1470;
  --cream: #e4ddb2;
  --lilac: #9c78c6;
  --mint: #36c7a0;
  --tab: #c8b4e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #1b0a2e; overflow: hidden; }
body { font-family: 'Assistant', sans-serif; -webkit-tap-highlight-color: transparent; }

/* הטלפון נשאר 360×780 כמו בפיגמה, ומוקטן או מוגדל להתאים למסך */
.stage { position: fixed; inset: 0; display: grid; place-items: center; }
.phone {
  position: relative; width: 360px; height: 780px; overflow: hidden;
  background: var(--bg); transform-origin: center; flex: none;
}
.abs { position: absolute; display: block; }
.flip { transform: scaleX(-1); }

/* סטטוס בר */
.status { position: absolute; inset: 0 0 auto 0; height: 49px; }
.status-time {
  position: absolute; right: 8px; top: 13px; line-height: 22px;
  font: 600 15px 'Inter', sans-serif; color: #fff; direction: ltr;
}

.screen { position: absolute; inset: 0; }

/* השעון: כל חלק בשכבה משלו, ומרחף בנפרד */
.clock { position: absolute; left: 5px; top: 112.5px; width: 350px; height: 340px; }
.layer { position: absolute; inset: 0; width: 350px; height: 340px; }
.layer svg { position: absolute; inset: 0; overflow: visible; }
.float { animation: float var(--d, 3.2s) ease-in-out var(--delay, 0s) infinite alternate; }
.f-plate { --d: 3.4s; --a: -5px; }
.f-12 { --d: 2.6s; --a: -7px; --delay: -0.0s; }
.f-3  { --d: 2.6s; --a: -7px; --delay: -0.65s; }
.f-6  { --d: 2.6s; --a: -7px; --delay: -1.3s; }
.f-9  { --d: 2.6s; --a: -7px; --delay: -1.95s; }
.f-hands { --d: 3.0s; --a: -9px; --delay: -0.8s; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(var(--a, -6px)); } }

/* התראות */
.next-alarm {
  position: absolute; right: 20px; top: 462px; width: 270px;
  font-weight: 700; font-size: 15px; color: var(--cream); text-align: right;
}
.card { position: absolute; left: 26px; width: 318px; height: 58px; }
.card .back { position: absolute; left: -10px; top: 9px; width: 318px; height: 58px; border: .6px solid #fff; }
.card .depth { position: absolute; width: 10.4px; height: 9.45px; }
.card .face { position: absolute; inset: 0; background: var(--cream); border: .9px solid #fff; transition: background .35s; }
.card .time {
  position: absolute; right: 16px; top: 4px; font-weight: 700; font-size: 28px;
  color: var(--ink); direction: ltr; transition: opacity .35s;
}
.card .days {
  position: absolute; right: 16px; top: 38px; font-weight: 600; font-size: 12px;
  color: var(--ink); opacity: .75; white-space: pre;
}
.card .track {
  position: absolute; left: 16px; top: 18px; width: 40px; height: 22px; border-radius: 11px;
  border: 1.2px solid var(--ink); background: transparent; transition: background .3s;
}
.card .knob { position: absolute; left: 20px; top: 22px; width: 14px; height: 14px; transition: left .3s; }
.card .hit { position: absolute; left: 8px; top: 10px; width: 56px; height: 38px; background: none; border: 0; cursor: pointer; }
.card.on .track { background: var(--mint); }
.card.on .knob { left: 37px; }
.card:not(.on) .face { background: var(--lilac); }
.card:not(.on) .time { opacity: .55; }

/* פלוס וקובייה */
.plus { position: absolute; left: -1.5px; top: 443.45px; width: 67.2px; height: 72.8px; }
.plus img { display: block; }
.cube { position: absolute; left: 8px; top: 58px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
.cube img { position: absolute; left: 6.7px; top: 4.2px; }

/* ניווט */
.tabs {
  position: absolute; left: 16px; top: 722px; width: 328px;
  display: flex; justify-content: space-between; align-items: center;
}
.tab {
  padding: 6px 12px; font-weight: 600; font-size: 14px; color: var(--tab);
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
}
.tab.on { background: var(--mint); border-color: #fff; color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .float { animation: none; } }