/* ==========================================================================
   Dhaba Radio — original stylesheet.
   Aesthetic reference: Indian hand-painted truck art (a folk visual
   tradition). No third-party CSS, images or markup used anywhere.
   ========================================================================== */

:root{
  --ink:      #0b0f14;
  --ink-2:    #101822;
  --cream:    #fff4dc;
  --cream-dim:#dfd0b2;
  --marigold: #f4b942;
  --turmeric: #f7d774;
  --vermilion:#e8443a;
  --peacock:  #17998a;
  --rose:     #e5397e;

  --line: rgba(244,185,66,.28);
  --glass: rgba(12,18,26,.55);

  --r-sm: 10px;
  --r-md: 16px;

  --font-hi: "Baloo 2", system-ui, sans-serif;
  --font-dis:"Rozha One", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--marigold); color:var(--ink);
  padding:.6rem 1rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip:focus{ left:0; }

/* the real YouTube player — audio only, parked out of the layout */
.player-host{
  position:fixed; left:-9999px; top:0;
  width:320px; height:180px;
  opacity:0; pointer-events:none;
}

/* ── backdrop ─────────────────────────────────────────────────────────── */

.scene{ position:fixed; inset:0; z-index:-1; overflow:hidden; }

/* the highway artwork sits behind everything */
.scene{
  /* approximates the artwork's own vertical colour flow, so the feathered
     edges of the picture blend into the page instead of letterboxing */
  background:linear-gradient(180deg,
    #2a181e 0%, #7a4432 26%, #c07a52 42%,
    #8a4c39 58%, #2c2129 80%, #141017 100%);
}

.scene__art{
  position:absolute; inset:0;
  background:url("bg-truck.webp") center 46% / cover no-repeat;
}

/* A 3:2 picture cannot fill a phone screen without cropping away the sunset
   and the road. On portrait we show the whole frame and feather it instead. */
@media (max-aspect-ratio: 4/5){
  .scene__art{
    /* size the layer to the picture itself, so the feather lands on the
       picture's own edges rather than somewhere out in the empty viewport */
    inset:auto auto auto 50%;
    top:46%;
    width:118vw;
    height:calc(118vw / 1.5);      /* artwork is 1536x1024 */
    transform:translate(-50%,-46%);
    background-position:center;
    background-size:cover;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  }
}

/* darkens only the top and bottom, so the truck stays clean in the middle
   while the wordmark and controls keep their contrast */
.scene__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(8,6,12,.90) 0%,
      rgba(8,6,12,.66) 13%,
      rgba(8,6,12,.24) 26%,
      rgba(8,6,12,0)   40%,
      rgba(8,6,12,0)   52%,
      rgba(8,6,12,.42) 65%,
      rgba(8,6,12,.78) 80%,
      rgba(5,4,8,.96)  100%);
}

/* ── shell ────────────────────────────────────────────────────────────── */

.shell{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding:max(1rem, env(safe-area-inset-top)) 1.15rem 2.5rem;
  min-height:100dvh;
  display:flex; flex-direction:column;
}

/* ── top bar ──────────────────────────────────────────────────────────── */

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.odo{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.36rem .6rem;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.odo__label{ font-size:.58rem; letter-spacing:.16em; color:var(--marigold); font-weight:600; }
.odo__digits{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.9rem; letter-spacing:.09em; font-variant-numeric:tabular-nums;
}
.odo__unit{ font-size:.6rem; color:var(--cream-dim); opacity:.7; }

/* ── wordmark ─────────────────────────────────────────────────────────── */

.hero{ text-align:center; margin-top:1.2rem; }

.wordmark{ margin:0; line-height:1; }

.wordmark__hi{
  display:block;
  font-family:var(--font-hi); font-weight:800;
  font-size:clamp(2.3rem, 10.5vw, 3.6rem);
  color:var(--turmeric);
  text-shadow:
    0 1px 0 #b8791b, 0 2px 0 #a06714, 0 3px 0 #8a5711,
    0 5px 14px rgba(0,0,0,.6), 0 0 34px rgba(244,185,66,.26);
  transform:rotate(-1deg);
}

.wordmark__en{
  display:block; margin-top:.5rem;
  font-weight:600; font-size:clamp(.58rem,2.4vw,.7rem);
  letter-spacing:.42em; text-indent:.42em;
  color:#3fd0bd;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}

.shayari{
  margin:.75rem 0 0;
  font-family:var(--font-dis);
  font-size:clamp(.95rem,4.2vw,1.24rem);
  color:var(--marigold);
  min-height:1.6em;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  transition:opacity .45s ease, transform .45s ease;
}
.shayari.is-swapping{ opacity:0; transform:translateY(-6px); }

/* ── deck ─────────────────────────────────────────────────────────────── */

.deck{
  margin-top:auto;
  padding-top:.5rem;
  display:grid; gap:.8rem;
  text-align:center;
}

/* language switch — sizes itself to however many stations exist */
.lang{
  position:relative;
  justify-self:center;
  display:flex;
  width:min(100%, 400px);
  padding:4px;
  border-radius:999px;
  background:rgba(10,16,22,.62);
  border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

.lang__slide{
  position:absolute; top:4px; left:4px;
  width:calc((100% - 8px) / var(--n, 2));
  height:calc(100% - 8px);
  border-radius:999px;
  background:linear-gradient(150deg,var(--turmeric),var(--marigold));
  box-shadow:0 4px 14px rgba(244,185,66,.3);
  transition:transform .28s cubic-bezier(.3,.9,.3,1);
  transform:translateX(calc(var(--i, 0) * 100%));
}

.lang__btn{
  position:relative; z-index:1;
  flex:1 1 0; min-width:0;
  padding:.42rem .3rem;
  border:0; background:none; cursor:pointer;
  font-family:var(--font-hi); font-weight:600;
  font-size:clamp(.72rem, 3.2vw, .86rem);
  color:var(--cream-dim);
  white-space:nowrap;
  transition:color .22s ease;
}
.lang__btn[aria-selected="true"]{ color:#231603; }
.lang__btn:focus-visible{ outline:2px solid var(--marigold); outline-offset:3px; border-radius:999px; }

.note{
  margin:0; font-size:.72rem; line-height:1.5;
  color:var(--marigold); opacity:.9;
}

.controls{ display:flex; align-items:center; justify-content:center; gap:.5rem; }

.btn{
  display:grid; place-items:center;
  width:42px; height:42px; flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(10,16,22,.55);
  color:var(--cream);
  cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{ transform:translateY(-2px); background:rgba(255,244,220,.14); }
.btn:active{ transform:translateY(0) scale(.94); }
.btn:focus-visible{ outline:2px solid var(--marigold); outline-offset:3px; }


.btn--play{
  width:60px; height:60px;
  color:var(--ink);
  background:linear-gradient(150deg,var(--turmeric),var(--marigold));
  border-color:transparent;
  box-shadow:0 8px 26px rgba(244,185,66,.38);
}
.btn--play:hover{ background:linear-gradient(150deg,var(--turmeric),var(--marigold)); box-shadow:0 12px 34px rgba(244,185,66,.5); }

.btn--play .i-pause,
.is-playing .btn--play .i-play{ display:none; }
.is-playing .btn--play .i-pause{ display:block; }


.hint{
  margin:.5rem 0 0;
  font-size:.63rem; letter-spacing:.05em;
  color:var(--cream-dim); opacity:.6;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
@media (hover:none){ .hint{ display:none; } }

/* fallback: API blocked, so YouTube's own controls take over */
.embed{ margin-top:.6rem; }
.embed iframe{ width:100%; aspect-ratio:16/9; min-height:200px; border:0; border-radius:var(--r-md); }

.is-fallback .controls,
.is-fallback .lang,
.is-fallback .hint{ display:none; }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot{ text-align:center; margin-top:1.2rem; }

.foot__made{ margin:0; font-size:.8rem; color:var(--cream-dim); opacity:.92; text-shadow:0 1px 8px rgba(0,0,0,.9); }
.foot__made a{
  font-weight:600; color:var(--marigold); text-decoration:none;
  border-bottom:1px dashed rgba(244,185,66,.5); padding-bottom:1px;
  transition:color .18s ease, border-color .18s ease;
}
.foot__made a:hover{ color:var(--rose); border-color:var(--rose); }

.foot__legal{
  margin:.55rem auto 0; max-width:52ch;
  font-size:.58rem; line-height:1.6;
  color:var(--cream-dim); opacity:.5;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}

/* ── follow nudge ─────────────────────────────────────────────────────── */

.nudge{
  position:fixed;
  left:50%; bottom:calc(1rem + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  z-index:20;
  width:min(370px, calc(100vw - 1.6rem));
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .8rem;
  border-radius:var(--r-md);
  background:rgba(12,18,26,.86);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.nudge.is-in{ transform:translate(-50%,0); }

.nudge__art{
  display:grid; place-items:center;
  width:38px; height:38px; flex:0 0 auto;
  border-radius:11px; color:#fff;
  background:linear-gradient(115deg,#f9ce34,#ee2a7b 52%,#6228d7);
}

.nudge__txt{ display:grid; line-height:1.3; min-width:0; text-align:left; }
.nudge__txt strong{ font-size:.8rem; }
.nudge__txt span{ font-size:.68rem; color:var(--cream-dim); opacity:.7; }

.nudge__cta{
  margin-left:auto; flex:0 0 auto;
  padding:.42rem .7rem; border-radius:999px;
  font-size:.72rem; font-weight:600; text-decoration:none; color:#fff;
  background:linear-gradient(115deg,#f9ce34,#ee2a7b 52%,#6228d7);
  box-shadow:0 6px 16px rgba(238,42,123,.32);
  transition:transform .18s ease;
}
.nudge__cta:hover{ transform:translateY(-2px); }

.nudge__x{
  position:absolute; top:-9px; right:-9px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  font-size:15px; line-height:1;
  color:var(--cream-dim); background:var(--ink-2);
  border:1px solid var(--line); cursor:pointer;
}
.nudge__x:hover{ color:var(--cream); }

@media (max-width:420px){ .nudge__txt span{ display:none; } }

/* ── motion / a11y ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}