/* ═══════════════ एकाग्र / Ekāgra ═══════════════ */

:root{
  --ink:#f3f1ea;
  --muted:rgba(243,241,234,.62);
  --faint:rgba(243,241,234,.34);
  --glass:rgba(18,26,34,.42);
  --stroke:rgba(255,255,255,.13);
  --pad:clamp(16px,2.4vw,34px);
  --radius:999px;
  --lamp:#f2b86b;
}

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

html,body{height:100%}

body{
  background:#0b141c;
  color:var(--ink);
  font:400 15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}

/* ── background ── */
.backdrop{
  position:fixed;inset:-6%;
  background:url("media/poster.jpg") center/cover no-repeat;
  filter:blur(46px) saturate(.8) brightness(.5);
  transform:scale(1.15);
  z-index:0;
}

.bg{
  position:fixed;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:1;
}

/* Portrait cropping is done in app.js — see fitBackground(). A CSS
   breakpoint can't do it: the painted wordmark occupies the middle 27%-73%
   of the frame, so the slice on screen has to stay under 27% wide whatever
   the viewport is, and phone viewports move as the browser bars slide. */

/* a touch of shading so the chrome stays legible over the art */
.grade{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(6,12,18,.46) 0%,rgba(6,12,18,0) 22%),
    linear-gradient(to top,rgba(6,12,18,.62) 0%,rgba(6,12,18,0) 34%);
}

/* Portrait shows a narrow slice of a wide frame, and the painted wordmark
   can just reach the right edge. This shades that edge into the wall
   colour — reads as depth, hides the seam. */
@media (orientation:portrait){
  .grade{
    background:
      linear-gradient(to bottom,rgba(6,12,18,.46) 0%,rgba(6,12,18,0) 22%),
      linear-gradient(to top,rgba(6,12,18,.66) 0%,rgba(6,12,18,0) 34%),
      linear-gradient(to left,rgba(11,22,32,.96) 0%,rgba(11,22,32,.72) 8%,rgba(11,22,32,0) 22%);
  }
}

/* ── wordmark ── */
.wordmark{
  position:fixed;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;margin:0;pointer-events:none;
  padding-bottom:14vh;
  text-shadow:0 6px 40px rgba(0,0,0,.6);
}
.wordmark .dev{
  font:600 clamp(46px,17vw,90px)/1 "Noto Sans Devanagari",serif;
  letter-spacing:.01em;
}
.wordmark .lat{
  font:500 clamp(11px,3.4vw,15px)/1 Inter,sans-serif;
  letter-spacing:.42em;text-indent:.42em;
  color:var(--muted);text-transform:uppercase;
}
/* Landscape shows the painted wordmark, so the live one steps aside. */
@media (min-aspect-ratio:1/1){
  .wordmark{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

/* ── idle fade ──
   The artwork is the point; the chrome is not. After a few seconds of
   stillness everything recedes, and comes back the moment you move. */
.top,.dock{transition:opacity .7s ease}
body.idle .top,body.idle .dock{opacity:.12}
@media (prefers-reduced-motion:reduce){
  body.idle .top,body.idle .dock{opacity:1}
}

/* ── top bar ── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:3;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;
  padding:calc(var(--pad) * .78) var(--pad);
  padding-top:max(calc(var(--pad) * .78),env(safe-area-inset-top));
}

.top-l{justify-self:start}
.top-c{justify-self:center}
.top-r{justify-self:end;display:flex;gap:8px}

/* the clock doubles as the focus timer — click to start a session */
.clock{
  display:inline-flex;align-items:center;gap:8px;
  margin:-6px -10px;padding:6px 10px;border:0;border-radius:var(--radius);
  background:transparent;font:inherit;cursor:pointer;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:13.5px;letter-spacing:.02em;
  color:var(--muted);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
  transition:color .2s,background .2s;
}
.clock:hover{color:var(--ink);background:rgba(18,26,34,.35)}
.clock:disabled{cursor:default;background:transparent;color:var(--muted)}
.clock:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:2px}
.clock-dot{
  display:none;width:7px;height:7px;border-radius:50%;
  background:var(--lamp);box-shadow:0 0 10px var(--lamp);
}
.clock[data-state="focus"]{color:var(--ink)}
.clock[data-state="focus"] .clock-dot{display:block;animation:breathe 4s ease-in-out infinite}
.clock[data-state="done"]{color:var(--lamp)}
@keyframes breathe{50%{opacity:.35;transform:scale(.8)}}

/* "N online" — only shown when CONFIG.presenceEndpoint answers */
.presence{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--muted);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.presence[hidden]{display:none}
.presence b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:#7bd88f;box-shadow:0 0 8px #7bd88f;
  animation:breathe 2.6s ease-in-out infinite;
}

.link{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 13px;border-radius:var(--radius);
  font-size:12.5px;font-weight:500;letter-spacing:.01em;
  color:var(--muted);text-decoration:none;
  background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color .2s,background .2s,transform .2s;
}
.link:hover{color:var(--ink);background:rgba(28,40,52,.6);transform:translateY(-1px)}
.link .arw{opacity:.5;font-size:11px}
.link.todo{opacity:.5;cursor:default}
.link.todo:hover{color:var(--muted);background:var(--glass);transform:none}
.link:focus-visible,.credit a:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:3px}

/* ── spotify embed ── */
.stage{position:relative;display:flex;justify-content:center;width:100%}
.stage > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

.embed-wrap{
  position:relative;
  display:flex;align-items:center;gap:2px;
  width:min(460px,100%);padding:4px;
  border-radius:16px;
  background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}
.embed-host{flex:1;min-width:0}
.embed-host iframe{display:block;width:100%;border:0;border-radius:12px}
/* The IFrame API replaces .embed-host with a bare iframe, which keeps a
   300px minimum width and shoves the next button off narrow phones. */
.embed-wrap > iframe{flex:1 1 0;min-width:0;width:auto;display:block;border:0;border-radius:12px}
.embed{display:block;width:100%;height:80px;border:0;border-radius:12px}

.nav{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:color .18s,background .18s;
}
.nav:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.nav:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:2px}

/* the fallback playlist embed is taller and needs no prev/next */
.embed-wrap.plain{width:min(560px,100%)}
.embed-wrap.plain .nav{display:none}
.embed-wrap.plain .embed-host iframe{height:152px}

/* ── player dock ── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:var(--pad);
  padding-bottom:max(var(--pad),calc(env(safe-area-inset-bottom) + 14px));
}

.player{
  position:relative;
  display:flex;align-items:center;gap:14px;
  width:min(420px,100%);
  padding:9px 12px 9px 9px;
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}

.art{
  width:46px;height:46px;flex:none;
  border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  animation:spin 26s linear infinite;
  animation-play-state:paused;
}
body.playing .art{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

.meta{flex:1;min-width:0}

.title{
  font-size:14px;font-weight:600;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar{
  position:relative;height:12px;margin-top:6px;
  display:flex;align-items:center;cursor:pointer;
  touch-action:none;
}
.bar::before{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:rgba(255,255,255,.17);
}
.bar-fill{
  position:absolute;left:0;height:3px;width:0;border-radius:2px;
  background:rgba(243,241,234,.85);
}
.bar-knob{
  position:absolute;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--ink);transform:translateX(-4.5px);
  opacity:0;transition:opacity .18s;
  box-shadow:0 1px 5px rgba(0,0,0,.5);
}
.bar:hover .bar-knob,.bar:focus-visible .bar-knob{opacity:1}
.bar:focus-visible{outline:none}
.bar:focus-visible::before{box-shadow:0 0 0 2px rgba(255,255,255,.28)}

.times{
  margin-top:2px;
  font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}

.controls{display:flex;align-items:center;gap:4px;flex:none}

.ctl{
  display:grid;place-items:center;
  width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);
  cursor:pointer;transition:color .18s,background .18s,transform .12s;
}
.ctl:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.ctl:active{transform:scale(.93)}
.ctl:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:2px}

.ctl.play{
  width:44px;height:44px;margin:0 2px;
  background:var(--ink);color:#101820;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.ctl.play:hover{background:#fff;color:#101820}

.credit{
  font-size:11.5px;color:var(--faint);letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.credit a:hover{color:var(--muted)}

/* ── small screens ── */
@media (max-width:560px){
  .player{gap:11px;padding:8px 10px 8px 8px}
  .art{width:42px;height:42px}
  .title{font-size:13.5px}
  .ctl{width:31px;height:31px}
  .ctl.play{width:40px;height:40px}
  .top-r .lbl{display:none}
  .top-r .link{padding:8px 10px}
  .top{gap:8px}
  .credit{display:none}
}

@media (prefers-reduced-motion:reduce){
  .art,.dot,.clock-dot,.stage > *{animation:none !important}
}