/* ============================================================
   CODE ADDA — Design tokens
   Palette: cream paper, deep brown, charcoal night, muted orange,
   warm yellow, olive. Retro Indian cyber-café / adda, 2000s feel.
   Display: 'Yatra One' (Devanagari-capable signboard face)
   Body:    'Rajdhani' (technical, condensed, retro-digital)
   Mono:    'JetBrains Mono' (code accents, labels, counters)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Yatra+One&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --cream:      #f2e6cd;
  --cream-dim:  #e7d6ae;
  --paper:      #eaddbb;
  --brown:      #4a2e1f;
  --brown-deep: #331e14;
  --charcoal:   #221a15;
  --charcoal-2: #1a1410;
  --orange:     #c6672b;
  --orange-2:   #e08a45;
  --yellow:     #e8a93a;
  --olive:      #6b7a3a;
  --olive-dim:  #566530;
  --line:       rgba(74,46,31,0.25);
  --shadow:     rgba(26,20,16,0.45);

  --font-display: 'Yatra One', 'Noto Sans Devanagari', cursive;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 10px;
  --player-h: 92px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--charcoal);
  color:var(--cream);
  min-height:100vh;
  overflow-x:hidden;
}

/* paper grain overlay used behind public pages */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}

h1,h2,h3,.display{font-family:var(--font-display); font-weight:400; letter-spacing:.5px;}
.mono{font-family:var(--font-mono);}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange-2);
}

/* ---------------- Layout shell ---------------- */
#app{position:relative; min-height:100vh; padding-bottom:var(--player-h);}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  background:linear-gradient(to bottom, rgba(26,20,16,.85), rgba(26,20,16,0));
  backdrop-filter:blur(2px);
}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand-mark{font-family:var(--font-display); font-size:1.5rem; color:var(--cream); cursor:pointer;}
.brand-mark span{color:var(--yellow);}
.brand-hindi{font-size:.85rem; color:var(--orange-2); font-family:var(--font-body);}

.main-nav{display:flex; gap:26px; font-weight:600; letter-spacing:.03em;}
.main-nav a{
  position:relative; padding-bottom:4px; color:var(--cream-dim); font-size:.98rem;
}
.main-nav a.active, .main-nav a:hover{color:var(--yellow);}
.main-nav a.active::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background:var(--orange);
}

.header-status{display:flex; align-items:center; gap:18px; font-family:var(--font-mono); font-size:.78rem; color:var(--cream-dim);}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--olive); box-shadow:0 0 8px var(--olive); display:inline-block; margin-right:6px; animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none;}
.hamburger span{width:24px; height:2px; background:var(--cream);}

/* ---------------- Hero / Home ---------------- */
.view{display:none; padding-top:96px; position:relative; z-index:2;}
.view.active{display:block;}

.hero{
  min-height:calc(100vh - 96px);
  display:flex; align-items:center; justify-content:center; gap:64px;
  padding:20px 40px 60px; flex-wrap:wrap;
}
.hero-copy{max-width:460px;}
.hero-copy .eyebrow{margin-bottom:14px; display:block;}
.hero-title{font-size:clamp(2.6rem, 5vw, 4.2rem); line-height:1.05; color:var(--cream);}
.hero-title span{color:var(--yellow);}
.hero-hindi{font-family:var(--font-display); font-size:1.6rem; color:var(--orange-2); margin-top:10px;}
.hero-tagline{margin-top:18px; font-size:1.15rem; color:var(--cream-dim); font-style:italic;}
.hero-rotator{
  margin-top:22px; font-family:var(--font-mono); font-size:.85rem; color:var(--olive);
  min-height:1.4em;
}
.hero-actions{margin-top:32px; display:flex; gap:16px; flex-wrap:wrap;}

.btn{
  font-family:var(--font-body); font-weight:700; letter-spacing:.03em;
  padding:14px 30px; border-radius:6px; border:2px solid transparent;
  font-size:1.02rem; display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange); color:var(--charcoal-2); box-shadow:0 6px 0 var(--brown-deep);}
.btn-primary:hover{box-shadow:0 8px 0 var(--brown-deep);}
.btn-ghost{border-color:var(--cream-dim); color:var(--cream);}
.btn-ghost:hover{border-color:var(--yellow); color:var(--yellow);}

/* ---- CRT console illustration (signature element) ---- */
.crt-console{
  position:relative; width:min(440px, 90vw);
}
.crt-frame{
  background:linear-gradient(160deg, #5a3a26, #2c1c12);
  border-radius:22px; padding:22px 22px 34px;
  box-shadow:0 24px 50px var(--shadow), inset 0 0 0 3px rgba(0,0,0,.3);
  position:relative;
}
.crt-screen{
  background:radial-gradient(ellipse at 30% 20%, #26361f 0%, #16210f 70%);
  border-radius:10px; aspect-ratio:4/3; position:relative; overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8), inset 0 0 4px #000;
}
.crt-scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; pointer-events:none;
  animation:flicker 5s infinite;
}
@keyframes flicker{0%,96%,100%{opacity:1;}97%{opacity:.85;}98%{opacity:1;}}
.crt-content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#c9e0a8; font-family:var(--font-mono);
  text-align:center; padding:14px; gap:6px;
}
.crt-content .cover-mini{width:96px; height:96px; border-radius:6px; object-fit:cover; box-shadow:0 0 0 2px #0f1a08, 0 0 20px rgba(0,0,0,.6); margin-bottom:8px;}
.crt-brand-led{position:absolute; bottom:10px; left:22px; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.7rem; color:var(--yellow);}
.led{width:8px; height:8px; border-radius:50%; background:var(--olive); box-shadow:0 0 8px var(--olive);}
.crt-knobs{position:absolute; bottom:10px; right:22px; display:flex; gap:10px;}
.knob{width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #caa26a, #6b4526); box-shadow:0 2px 3px rgba(0,0,0,.5);}

/* steam curl above a chai glass, drawn purely in CSS */
.chai-glass{position:absolute; right:-18px; bottom:-26px; width:64px;}
.chai-glass svg{width:100%; display:block;}
.steam{position:absolute; left:20px; top:-26px; width:6px; height:26px; opacity:.7;}
.steam path{stroke:var(--cream-dim); stroke-width:2; fill:none; stroke-linecap:round;}
.steam.s1{animation:rise 3s ease-in-out infinite;}
.steam.s2{left:32px; animation:rise 3.4s ease-in-out infinite .6s;}
@keyframes rise{0%{transform:translateY(4px); opacity:0;}30%{opacity:.7;}100%{transform:translateY(-14px); opacity:0;}}

/* ---------------- Section shells ---------------- */
.section{padding:70px 40px; position:relative; z-index:2;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:2.1rem; color:var(--cream); margin-top:8px;}
.section-head p{color:var(--cream-dim); margin-top:10px; line-height:1.6;}

/* ---------------- Song cards grid ---------------- */
.song-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px;
  max-width:1200px; margin:0 auto;
}
.song-card{
  background:linear-gradient(160deg, var(--paper), var(--cream-dim));
  border-radius:var(--radius); padding:14px; color:var(--brown-deep);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(74,46,31,.15);
  position:relative; overflow:hidden;
}
.song-card .cover-wrap{position:relative; border-radius:8px; overflow:hidden; aspect-ratio:1; margin-bottom:12px;}
.song-card .cover-wrap img{width:100%; height:100%; object-fit:cover;}
.song-card .play-btn{
  position:absolute; inset:auto 0 0 0; margin:auto; bottom:10px; left:0; right:0; width:44px; height:44px;
  border-radius:50%; background:var(--orange); color:var(--charcoal-2); border:none;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  opacity:0; transform:translateY(8px); transition:.2s ease;
}
.song-card:hover .play-btn{opacity:1; transform:translateY(0);}
.song-card.is-playing .play-btn{opacity:1; transform:translateY(0); background:var(--olive);}
.song-card h3{font-family:var(--font-body); font-size:1.05rem; font-weight:700;}
.song-card p{font-size:.85rem; color:var(--brown); opacity:.8; margin-top:2px;}
.song-card .track-no{position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:.7rem; background:var(--brown-deep); color:var(--yellow); padding:2px 7px; border-radius:4px;}

/* ---------------- Radio page ---------------- */
.radio-stage{
  min-height:calc(100vh - 96px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:20px 20px 60px; position:relative; z-index:2;
}
.radio-bg{position:fixed; inset:0; z-index:0; transition:background 1.2s ease; filter:blur(60px) saturate(1.3); opacity:.55;}
.radio-art{
  width:min(320px, 60vw); aspect-ratio:1; border-radius:14px; overflow:hidden; margin:0 auto 26px;
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 6px rgba(0,0,0,.25);
  position:relative;
}
.radio-art img{width:100%; height:100%; object-fit:cover;}
.radio-art.spinning img{animation:spin 14s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.radio-title{font-size:1.9rem; color:var(--cream);}
.radio-artist{color:var(--orange-2); font-size:1.1rem; margin-top:6px;}
.radio-badge{font-family:var(--font-mono); letter-spacing:.15em; font-size:.75rem; color:var(--olive); margin-bottom:18px;}
.big-play{
  width:84px; height:84px; border-radius:50%; background:var(--orange); border:none; color:var(--charcoal-2);
  font-size:1.8rem; display:flex; align-items:center; justify-content:center; margin:30px auto 0;
  box-shadow:0 10px 0 var(--brown-deep); transition:.15s;
}
.big-play:hover{transform:translateY(-2px);}
.big-play:active{transform:translateY(4px); box-shadow:0 6px 0 var(--brown-deep);}

/* ---------------- About page ---------------- */
.about-wrap{max-width:680px; margin:0 auto; padding:0 20px 100px; text-align:left;}
.about-wrap p{color:var(--cream-dim); line-height:1.8; font-size:1.08rem; margin-bottom:18px;}
.about-wrap h2{font-size:2.4rem; margin-bottom:24px; color:var(--cream);}

/* ---------------- Global sticky player ---------------- */
.player-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; height:var(--player-h);
  background:linear-gradient(to top, var(--charcoal-2) 85%, rgba(26,20,16,0));
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:0 22px;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
.player-track{display:flex; align-items:center; gap:12px; min-width:0; width:230px;}
.player-track img{width:56px; height:56px; border-radius:6px; object-fit:cover; flex:none;}
.player-track .meta{min-width:0;}
.player-track .t-title{font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player-track .t-artist{font-size:.8rem; color:var(--cream-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.player-controls{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1;}
.transport{display:flex; align-items:center; gap:18px;}
.transport button{background:none; border:none; color:var(--cream-dim); font-size:1.1rem;}
.transport button:hover{color:var(--yellow);}
.transport .play-pause{
  width:38px; height:38px; border-radius:50%; background:var(--orange); color:var(--charcoal-2);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.transport .toggled{color:var(--yellow);}
.progress-row{display:flex; align-items:center; gap:8px; width:100%; max-width:520px; font-family:var(--font-mono); font-size:.7rem; color:var(--cream-dim);}
.progress-row input[type=range]{flex:1; accent-color:var(--orange);}

.player-extra{display:flex; align-items:center; gap:14px; width:170px; justify-content:flex-end;}
.player-extra input[type=range]{width:80px; accent-color:var(--orange);}
.player-extra button{background:none; border:none; color:var(--cream-dim); font-size:1rem;}

.autoplay-hint{
  position:fixed; bottom:calc(var(--player-h) + 14px); left:50%; transform:translateX(-50%);
  background:var(--brown-deep); color:var(--yellow); font-family:var(--font-mono); font-size:.8rem;
  padding:10px 18px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.4); z-index:70; display:none;
}
.autoplay-hint.show{display:block;}

/* ---------------- Footer ---------------- */
.site-footer{padding:40px; text-align:center; color:var(--cream-dim); font-size:.85rem; position:relative; z-index:2;}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px){
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .header-status .status-dot + span{display:none;}
  .hero{gap:36px; padding-top:10px;}
  .player-track{width:150px;}
  .player-extra{width:auto;}
  .progress-row{max-width:none;}
}
@media (max-width: 620px){
  .site-header{padding:14px 16px;}
  .main-nav.open{
    display:flex; flex-direction:column; position:fixed; top:64px; left:0; right:0;
    background:var(--charcoal-2); padding:20px; gap:16px; border-bottom:1px solid var(--line);
  }
  .player-bar{
    flex-wrap:wrap; height:auto; padding:10px 12px; gap:8px; row-gap:6px;
  }
  .player-track{width:auto; flex:1;}
  .player-controls{order:3; width:100%;}
  .player-extra{order:2;}
  :root{--player-h:118px;}
  .section{padding:50px 18px;}
  .radio-art{width:80vw;}
}
/* =========================================================
   CODE ADDA — EXTRA CODING SECTIONS
   ========================================================= */

   .code-lab-section {
    padding: 70px 0 40px;
    background:
      radial-gradient(
        circle at 20% 20%,
        rgba(198,103,43,.08),
        transparent 35%
      ),
      radial-gradient(
        circle at 80% 80%,
        rgba(105,120,65,.08),
        transparent 35%
      );
  }
  
  .code-lab {
    display: grid;
    grid-template-columns: 1.5fr .8fr;
    gap: 28px;
    margin-top: 38px;
    align-items: stretch;
  }
  
  
  /* TERMINAL */
  
  .terminal-window {
    overflow: hidden;
    border: 1px solid rgba(198,103,43,.3);
    border-radius: 12px;
    background: #111310;
  
    box-shadow:
      0 20px 60px rgba(0,0,0,.25),
      0 0 40px rgba(198,103,43,.06);
  }
  
  .terminal-top {
    height: 45px;
    padding: 0 16px;
  
    display: flex;
    align-items: center;
    gap: 14px;
  
    background: #1b1d18;
  
    border-bottom:
      1px solid rgba(255,255,255,.06);
  }
  
  .terminal-dots {
    display: flex;
    gap: 7px;
  }
  
  .terminal-dots span {
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
  }
  
  .td-red {
    background: #e05a47;
  }
  
  .td-yellow {
    background: #e8a93a;
  }
  
  .td-green {
    background: #719b52;
  }
  
  .terminal-name {
    color: #aaa99d;
    font-size: 12px;
    flex: 1;
  }
  
  .terminal-live {
    color: #86a65c;
    font-size: 10px;
  }
  
  .terminal-body {
    padding: 28px;
    min-height: 290px;
  
    color: #d6d4c7;
  
    font-size: 13px;
    line-height: 1.9;
  }
  
  .terminal-green {
    color: #8da965;
  }
  
  .terminal-blue {
    color: #7fa4b8;
  }
  
  .terminal-purple {
    color: #b58eaf;
  }
  
  .terminal-orange {
    color: #d59655;
  }
  
  .terminal-muted {
    color: #77786e;
  }
  
  .terminal-indent {
    padding-left: 28px;
  }
  
  .terminal-cursor {
    color: #d59655;
    animation: terminalBlink .9s infinite;
  }
  
  @keyframes terminalBlink {
  
    50% {
      opacity: 0;
    }
  
  }
  
  
  /* MINI CODE CARDS */
  
  .code-lab-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  
  .mini-code-card {
    flex: 1;
  
    display: flex;
    align-items: center;
  
    gap: 17px;
    padding: 20px;
  
    border:
      1px solid rgba(110,100,70,.2);
  
    border-radius: 10px;
  
    background:
      rgba(255,255,255,.025);
  
    transition: .3s ease;
  }
  
  .mini-code-card:hover {
    transform: translateX(6px);
  
    border-color:
      rgba(198,103,43,.4);
  
    background:
      rgba(198,103,43,.05);
  }
  
  .mini-icon {
    width: 45px;
    height: 45px;
  
    display: grid;
    place-items: center;
  
    flex-shrink: 0;
  
    border-radius: 8px;
  
    background:
      rgba(198,103,43,.1);
  
    color: #c6672b;
  
    font-size: 20px;
  }
  
  .mini-code-card strong {
    display: block;
    margin-bottom: 5px;
  }
  
  .mini-code-card p {
    margin: 0;
  
    color: #77786e;
  
    font-size: 11px;
  }
  
  
  /* =========================================================
     CODER STATS
     ========================================================= */
  
  .coder-stats-section {
    padding: 60px 0;
  }
  
  .stats-heading {
    text-align: center;
    margin-bottom: 35px;
  }
  
  .stats-heading h2 {
    margin-top: 8px;
  }
  
  .coder-stats {
    display: grid;
  
    grid-template-columns:
      repeat(4, 1fr);
  
    gap: 15px;
  }
  
  .stat-card {
    position: relative;
    overflow: hidden;
  
    padding: 28px 22px;
  
    border:
      1px solid rgba(110,100,70,.2);
  
    border-radius: 12px;
  
    background:
      rgba(255,255,255,.025);
  
    text-align: center;
  
    transition: .3s ease;
  }
  
  .stat-card::before {
    content: "";
  
    position: absolute;
  
    left: 0;
    top: 0;
  
    width: 100%;
    height: 2px;
  
    background: #c6672b;
  
    transform: scaleX(0);
    transform-origin: left;
  
    transition: .3s ease;
  }
  
  .stat-card:hover {
    transform: translateY(-7px);
  
    background:
      rgba(198,103,43,.045);
  
    box-shadow:
      0 15px 35px rgba(0,0,0,.15);
  }
  
  .stat-card:hover::before {
    transform: scaleX(1);
  }
  
  .stat-number {
    display: block;
  
    color: #c6672b;
  
    font-size: 34px;
    font-weight: 700;
  
    line-height: 1;
  
    margin-bottom: 10px;
  }
  
  .stat-label {
    display: block;
  
    color: #d2d0c2;
  
    font-size: 13px;
  }
  
  .stat-code {
    display: block;
  
    margin-top: 13px;
  
    color: #73766b;
  
    font-size: 10px;
  }
  
  
  /* =========================================================
     CODE QUOTE
     ========================================================= */
  
  .code-quote-section {
    padding: 30px 0 90px;
  }
  
  .code-quote {
    max-width: 850px;
  
    margin: auto;
  
    padding: 30px 35px;
  
    border-left:
      3px solid #c6672b;
  
    background: #111310;
  
    border-radius:
      0 10px 10px 0;
  
    box-shadow:
      0 15px 50px rgba(0,0,0,.15);
  }
  
  .quote-line {
    color: #70736b;
  
    font-size: 12px;
  
    line-height: 2;
  }
  
  .quote-line span {
    color: #7fa4b8;
  }
  
  .quote-highlight {
    color: #c6672b;
  
    margin-top: 8px;
  }
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 800px) {
  
    .code-lab {
      grid-template-columns: 1fr;
    }
  
    .coder-stats {
      grid-template-columns:
        repeat(2, 1fr);
    }
  
    .terminal-body {
      padding: 20px;
  
      font-size: 11px;
  
      overflow-x: auto;
    }
  
  }
  
  
  @media (max-width: 500px) {
  
    .coder-stats {
      grid-template-columns:
        repeat(2, 1fr);
  
      gap: 10px;
    }
  
    .stat-card {
      padding: 22px 10px;
    }
  
    .stat-number {
      font-size: 27px;
    }
  
    .code-quote {
      padding: 22px 18px;
    }
  
  }