/* Chaitappri — final static version + thunder light only */

:root{
  --cream:#fff7ed;
  --cream-76:rgba(255,247,237,.76);
  --cream-60:rgba(255,247,237,.60);
  --glass:rgba(61,36,27,.74);
  --glass-border:rgba(255,255,255,.18);
  --shadow:rgba(0,0,0,.42);
  --page-bg:#0d1114;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--page-bg);
}

body{
  min-height:100dvh;
  overflow:hidden;
  color:var(--cream);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}

.landing{
  position:relative;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  background-image:url("assets/chai-ki-tapri-final.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}

/* Subtle readability wash only */
.landing::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.08) 0%,
    transparent 25%,
    transparent 66%,
    rgba(0,0,0,.18) 100%
  );
}

.live-time{
  position:fixed;
  z-index:30;
  top:max(20px,env(safe-area-inset-top));
  left:max(20px,env(safe-area-inset-left));
  color:rgba(255,255,255,.94);
  font-size:14px;
  font-weight:400;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.46);
}

/* Thunder light only — no rain/steam/dog/plant motion */
.thunder-flash{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 58% 8%, rgba(235,244,255,.22), transparent 28%),
    linear-gradient(to bottom, rgba(214,232,255,.12), transparent 50%);
  mix-blend-mode:screen;
}

/* Player */
.player-shell{
  position:fixed;
  z-index:30;
  left:50%;
  bottom:5.5vh;
  transform:translateX(-50%);
  width:min(760px,calc(100vw - 56px));
  min-height:112px;
  padding:12px 18px 12px 12px;
  display:grid;
  grid-template-columns:minmax(245px,1.15fr) minmax(250px,1.35fr) auto;
  align-items:center;
  gap:18px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 12px 38px var(--shadow),inset 0 1px 0 rgba(255,255,255,.18);
}

.track-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:15px;
}

.cover-wrap{
  position:relative;
  width:84px;
  height:84px;
  flex:0 0 84px;
}

.cover-art{
  width:100%;
  height:100%;
  border-radius:50%;
  background-image:url("assets/chai-ki-tapri-final.png");
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 5px 15px rgba(0,0,0,.30);
}

.cover-center{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(15,10,8,.78);
  border:2px solid rgba(255,255,255,.38);
}

.player-shell.is-playing .cover-art{
  animation:spinCover 8s linear infinite;
}

@keyframes spinCover{to{transform:rotate(360deg)}}

.track-info{min-width:0}

.track-info p{
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.track-title{
  color:#fff;
  font-size:15px;
  font-weight:600;
  line-height:1.22;
}

.track-artist{
  margin-top:4px!important;
  color:var(--cream-76);
  font-size:12px;
  font-weight:400;
}

.player-middle{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}

.seek-line{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;
}

.player-time{
  color:var(--cream-60);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}

.player-time-end{text-align:right}

.seek-bar,.volume-bar{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}

.seek-bar{
  width:100%;
  height:10px;
  margin:0;
}

.seek-bar::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}

.seek-bar::-webkit-slider-thumb{
  width:11px;
  height:11px;
  margin-top:-3.5px;
  border:0;
  border-radius:50%;
  appearance:none;
  -webkit-appearance:none;
  background:#fff;
}

.seek-bar::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}

.seek-bar::-moz-range-thumb{
  width:11px;height:11px;border:0;border-radius:50%;background:#fff;
}

.transport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
}

.icon-btn,.play-btn,.volume-icon-btn{
  display:grid;
  place-items:center;
  border:0;
  cursor:pointer;
}

.icon-btn{
  width:38px;height:38px;padding:0;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.86);
}

.icon-btn:hover,.volume-icon-btn:hover{background:rgba(255,255,255,.13);color:#fff}
.icon-btn svg{width:18px;height:18px;fill:currentColor}

.play-btn{
  width:50px;height:50px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.95);color:#211712;
  box-shadow:0 5px 16px rgba(0,0,0,.24);
}

.play-btn:hover{transform:scale(1.05)}
.play-btn:active,.icon-btn:active,.volume-icon-btn:active{transform:scale(.95)}
.play-btn svg{width:21px;height:21px;fill:currentColor}

.pause-icon,.volume-off-icon{display:none}
.player-shell.is-playing .play-icon{display:none}
.player-shell.is-playing .pause-icon{display:block}
.player-shell.is-muted .volume-on-icon{display:none}
.player-shell.is-muted .volume-off-icon{display:block}

.volume-box{
  display:flex;
  align-items:center;
  gap:8px;
}

.volume-icon-btn{
  width:30px;height:30px;padding:0;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.86);
}

.volume-icon-btn svg{width:18px;height:18px;fill:currentColor}

.volume-bar{width:72px;height:10px}

.volume-bar::-webkit-slider-runnable-track{
  height:3px;border-radius:999px;background:rgba(255,255,255,.35);
}

.volume-bar::-webkit-slider-thumb{
  width:10px;height:10px;margin-top:-3.5px;border:0;border-radius:50%;
  appearance:none;-webkit-appearance:none;background:#fff;
}

.volume-bar::-moz-range-track{
  height:3px;border-radius:999px;background:rgba(255,255,255,.35);
}
.volume-bar::-moz-range-thumb{
  width:10px;height:10px;border:0;border-radius:50%;background:#fff;
}

@media(max-width:900px){
  .landing{background-position:48% center}
  .player-shell{
    width:min(700px,calc(100vw - 34px));
    grid-template-columns:minmax(220px,1.1fr) minmax(220px,1.25fr) auto;
    gap:14px;
  }
  .volume-bar{width:58px}
}

@media(max-width:640px){
  .landing{background-position:44% center}

  .live-time{
    top:max(18px,env(safe-area-inset-top));
    left:max(16px,env(safe-area-inset-left));
    font-size:14px;
  }

  .player-shell{
    bottom:max(3.8vh,env(safe-area-inset-bottom));
    width:calc(100vw - 24px);
    min-height:164px;
    padding:13px 14px 12px;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    border-radius:28px;
  }

  .track-main{gap:12px}
  .cover-wrap{width:62px;height:62px;flex-basis:62px}
  .track-title{font-size:14px}
  .track-artist{font-size:11px}
  .player-middle{gap:8px}
  .seek-line{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}
  .player-time{font-size:9px}
  .transport{gap:20px}
  .icon-btn{width:34px;height:34px}
  .play-btn{width:48px;height:48px}
  .volume-box{position:absolute;right:18px;bottom:19px}
  .volume-bar{display:none}
}

@media(max-width:430px){
  .landing{background-position:43% center}
  .player-shell{width:calc(100vw - 18px)}
}

@media(prefers-reduced-motion:reduce){
  .cover-art{animation:none!important}
}

@media (max-width: 480px) {
  .player-shell {
    width: min(90vw, 335px);
    padding: 8px 12px;
    border-radius: 22px;
  }

  .player-top {
    gap: 10px;
    margin-bottom: 4px;
  }

  .album-art,
  .album-disc {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }

  .track-title {
    font-size: 0.92rem;
    line-height: 1.1;
  }

  .track-artist {
    font-size: 0.78rem;
    margin-top: 1px;
  }

  .progress-row {
    margin: 4px 0 6px;
  }

  .controls-row {
    margin-top: 0;
    gap: 12px;
  }

  .control-btn {
    width: 30px;
    height: 30px;
  }

  .play-btn {
    width: 50px;
    height: 50px;
  }

  .volume-wrap {
    width: 68px;
  }

  .volume-wrap input[type="range"] {
    width: 42px;
  }
}