/* ===================== CORE LAYOUT ===================== */
:root{
  --blur-bg: rgba(0,0,0,.35);
  --blur-bg-hover: rgba(144,192,209,.45);
  --ring-work:#90c0d1;
  --ring-break:#b489ff;
  --ring-track:rgba(255,255,255,.15);
  --text:#d8e9ef;
  --shadow:rgba(0,0,0,.45);
}

html {
  font-family: 'Fira Sans', sans-serif;
  font-size: 20px;
  letter-spacing: .8px;
  height: 100%;
  color: var(--text);
  background: #e6d8ff url("./assets/bg-rect.png") center/cover no-repeat;
}


body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-title {
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  text-shadow: 0 2px 4px var(--shadow);
}

/* Timer layout */
.timer-wrap {
  margin-top: 22vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.phase-label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-shadow: 0 1px 3px var(--shadow);
}

.timer {
  position: relative;
  width: 240px;
  height: 240px;
  transform-style: preserve-3d;
  transition: transform .5s ease, opacity .5s ease;
}
.timer.flip-out { transform: rotateX(90deg); opacity: 0; }
.timer.flip-in  { transform: rotateX(-90deg); opacity: 0; }
.timer.ready    { transform: rotateX(0);    opacity: 1; }

.ring {
  filter: drop-shadow(0 6px 10px var(--shadow));
}
.ring-bg {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 14;
}
.ring-fg {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 0 690;
  transition: stroke-dashoffset .3s ease;
}

.time {
  font-family: 'Droid Sans Mono', monospace;
  font-size: 230%;
  font-weight: 700;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-shadow: 0 2px 4px var(--shadow);
}
.minutes[contenteditable] {
  outline: none;
  caret-color: transparent;
  user-select: all;
}

.actions {
  display: flex;
  gap: 1rem;
}
.actions button {
  padding: .5rem 1.4rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .5px;
  border: none;
  border-radius: .75rem;
  color: var(--text);
  background: var(--blur-bg);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  transition: background .25s, transform .2s;
}
.actions button:hover:not(:disabled) {
  background: var(--blur-bg-hover);
}
.actions button:active:not(:disabled) {
  transform: scale(.95);
}
.actions button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ===================== SPOTIFY WIDGET ===================== */

/* 1 — floating GIF trigger */
.spotify-icon{
  position:fixed;
  bottom:1rem;
  right:1rem;
  width:56px;
  height:56px;
  cursor:pointer;
  z-index:1000;
}

/* 2 — widget shell */
.sp-widget{
  position:fixed;
  bottom:1rem;
  right:1rem;
  width:280px;
  max-height:70vh;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;

  background:var(--blur-bg);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:1rem;
  box-shadow:0 4px 14px var(--shadow);

  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .4s ease, opacity .4s ease;
  z-index:1000;
}
.sp-widget.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* 3 — header */
.sp-widget header{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.sp-widget h3{
  margin:0;
  font-size:1.15rem;
  font-weight:600;
  flex:1 1 auto;
}

/* 4 — playback-mode icons */
.play-modes{ display:flex; gap:.5rem; }

.mode-icon{
  width:28px;
  height:28px;
  opacity:.35;
  cursor:pointer;
  transition:opacity .25s, transform .25s, filter .25s;
}

.mode-icon.active{
  opacity:1;
  transform:scale(1.35);
  filter:drop-shadow(0 0 6px var(--ring-work)) brightness(1.25);
}

/* 5 — close button */
.close-btn{
  background:none;
  border:none;
  padding:0;
  display:flex;
  cursor:pointer;
}
.close-btn img{ width:18px; height:18px; }

/* 6 — playlist list */
.sp-widget ul{
  list-style:none;
  margin:0;
  padding:0;
  overflow:auto;
  flex:1 1 auto;
}
.sp-widget li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.5rem;
}
.sp-widget li button{
  padding:.25rem .9rem;
  font-size:.8rem;
  font-weight:600;
  border:none;
  border-radius:.6rem;
  background:var(--ring-work);
  color:#fff;
  cursor:pointer;
}

/* ——— global play / pause button ——— */
.player-toggle{
  position:fixed; top:1rem; right:1rem;
  width:52px; height:52px;
  background:var(--blur-bg);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:1100;
  overflow:hidden;
  transition:background .25s;
}
.player-toggle:hover{ background:var(--blur-bg-hover); }
.player-toggle.hidden{ display:none; }

/* two icons, one on top of the other */
.player-toggle img{
  position:absolute; inset:12%;
  width:76%; height:76%;
  opacity:0; transform:scale(.55);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}

.player-toggle.playing  .icon-pause,
.player-toggle:not(.playing) .icon-play{
  opacity:1; transform:scale(1);
  filter:drop-shadow(0 0 6px var(--ring-work));
}


/* ===== Safari “unsupported” screen ===== */
#safari-block{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  color:#fafafa;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1.2rem; text-align:center;
  font-family:'Fira Sans',sans-serif;
  z-index:2000;              /* sits above everything */
  padding:2rem;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
#safari-block.show{ opacity:1; pointer-events:auto; }

#safari-block h2{
  margin:0;
  font-size:2rem;
  letter-spacing:.5px;
}
#safari-block p{ margin:.2rem 0; line-height:1.4; }
#safari-block .small{ font-size:.85rem; opacity:.75; }