:root {
  --ink: #2b1a12;
  --brown: #59311f;
  --terracotta: #ae472b;
  --paper: #f4dfaf;
  --paper-light: #fff0c9;
  --mustard: #cf922d;
  --green: #596b4d;
  --muted: #80614c;
  --line: rgba(70, 37, 23, .32);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  min-height: 100vh; margin: 0; color: var(--ink); font-family: var(--font-body);
  background: linear-gradient(rgba(37, 21, 12, .2), rgba(37, 21, 12, .42)), url('../images/bg_final.png') center top / cover fixed, #8b5637;
}
.grain { position: fixed; inset: 0; z-index: 20; opacity: .06; pointer-events: none; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.app { width: min(680px, calc(100% - 28px)); min-height: 100vh; margin: 0 auto; padding: clamp(18px, 4vw, 42px) 0 26px; display: flex; flex-direction: column; gap: 20px; }

.station-header { min-height: 72px; padding: 12px 19px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--paper-light); border: 2px solid #3b2015; border-radius: 4px; background: var(--terracotta); box-shadow: 0 5px 0 #542817, 0 12px 28px rgba(35, 16, 8, .32); }
.station-name { display: flex; align-items: center; margin: 0; font: 600 clamp(23px, 5vw, 31px) var(--font-display); letter-spacing: .08em; text-shadow: 1px 2px 0 #652918; }
.station-name img { width: 34px !important; height: 34px !important; margin-right: 9px !important; filter: sepia(.8) saturate(1.3); }
.live-status { display: flex; align-items: center; gap: 7px; color: var(--paper-light); font: 10px var(--font-mono); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #f7c34d; box-shadow: 0 0 0 2px #7f311e; animation: broadcast 1.5s infinite; }
@keyframes broadcast { 50% { opacity: .45; } }

.player { padding: clamp(16px, 3vw, 22px); display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px solid rgba(255, 240, 201, .45); border-radius: 18px; box-shadow: 0 12px 30px rgba(38, 18, 10, .22), inset 0 1px rgba(255, 255, 255, .18); background: rgba(61, 36, 25, .30); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
.player::before { content: 'TAPE WALA • SIDE A'; width: 100%; padding-bottom: 7px; border-bottom: 1px dashed rgba(255, 240, 201, .35); color: var(--paper-light); text-align: center; font: 10px var(--font-mono); letter-spacing: .16em; }
.vinyl-wrap { position: relative; width: min(100%, 310px); height: 185px; padding: 14px; border: 6px solid #4b281a; border-radius: 8px; box-shadow: inset 0 0 0 2px #9d512b, 0 6px 0 rgba(76, 39, 24, .18); background: linear-gradient(135deg, #a8572f, #6c351e); }
.vinyl-wrap::before, .vinyl-wrap::after { content: ''; position: absolute; top: 50%; width: 65px; height: 65px; border: 4px solid #281814; border-radius: 50%; background: repeating-conic-gradient(#d7ac46 0 15deg, #362018 15deg 38deg); box-shadow: inset 0 0 0 10px #e1be6b; transform: translateY(-50%); }
.vinyl-wrap::before { left: 24px; }.vinyl-wrap::after { right: 24px; }
.vinyl { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; border: 1px solid #2c1a15; border-radius: 3px; background: rgba(28, 16, 12, .7); }
.vinyl::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255, 232, 183, .35); }
.vinyl-art { position: absolute; z-index: 2; top: 50%; left: 50%; width: 88px; height: 88px; border: 3px solid var(--paper-light); border-radius: 3px; object-fit: cover; transform: translate(-50%, -50%); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); }
.vinyl-hole { display: none; }.vinyl-shadow { position: absolute; bottom: -13px; left: 50%; width: 72%; height: 16px; border-radius: 50%; background: rgba(41,20,11,.33); filter: blur(7px); transform: translateX(-50%); }
.vinyl.is-playing + .vinyl-shadow { animation: tape-move .8s ease-in-out infinite alternate; } @keyframes tape-move { to { transform: translateX(-50%) translateY(2px); } }

.song-info { width: 100%; padding: 8px 12px; text-align: center; border: 1px solid rgba(255, 240, 201, .22); border-radius: 10px; background: rgba(255, 240, 201, .10); }
.song-title { margin: 0 0 4px; color: var(--paper-light); font: 600 clamp(21px, 5vw, 29px)/1.1 var(--font-display); text-shadow: 0 1px 5px rgba(39, 19, 10, .45); }.song-artist { margin: 0; color: #ffe4ad; font-size: 14px; }.song-year { margin: 4px 0 0; color: #ffd170; font: 11px var(--font-mono); letter-spacing: .13em; }
.dial { width: 100%; height: 36px; cursor: pointer; }.dial-ticks { display: flex; align-items: flex-end; gap: 3px; height: 100%; padding: 6px 8px; border: 2px solid var(--brown); border-radius: 3px; background: #3d2419; }.dial-tick { flex: 1; height: 8px; background: #835835; }.dial-tick.major { height: 16px; }.dial-tick.filled, .dial-tick.filled.major { background: var(--mustard); }.dial-needle { bottom: 4px; width: 3px; height: 27px; background: #f5c451; box-shadow: 0 0 0 1px #4d2818; }.time-row { width: 100%; margin-top: -12px; padding: 0 8px; display: flex; justify-content: space-between; }.time-mono { color: var(--muted); font: 10px var(--font-mono); }

.controls { display: flex; align-items: center; gap: 12px; }.control-btn { display: grid; place-items: center; border: 1px solid rgba(255, 240, 201, .40); color: var(--paper-light); cursor: pointer; box-shadow: 0 3px 10px rgba(28, 13, 7, .20), inset 0 1px rgba(255, 255, 255, .18); transition: transform .15s, box-shadow .15s, background .15s; }.control-btn:hover { background: rgba(255, 240, 201, .24); transform: translateY(-2px); }.control-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 4px rgba(28, 13, 7, .25); }.control-btn--ghost { width: 38px; height: 34px; border-radius: 10px; background: rgba(48, 73, 55, .45); }.control-btn--main { width: 56px; height: 44px; border-radius: 12px; background: rgba(174, 71, 43, .65); }
.next-up { display: flex; justify-content: center; gap: 8px; color: var(--paper-light); font-size: 13px; }.next-up__label { padding: 2px 6px; color: var(--paper-light); border: 1px solid rgba(255, 240, 201, .28); border-radius: 5px; background: rgba(48, 73, 55, .38); font: 9px var(--font-mono); letter-spacing: .1em; }.next-up__song { font-family: var(--font-display); }
.tuner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }.tuner__btn { padding: 7px 10px; border: 1px solid var(--brown); border-radius: 3px; color: var(--brown); background: #edcf84; box-shadow: 2px 2px 0 rgba(74,38,24,.18); cursor: pointer; font: 600 11px var(--font-body); transition: transform .15s, background .15s; }.tuner__btn:hover { background: var(--paper-light); transform: translateY(-2px); }.tuner__btn.is-active { color: var(--paper-light); background: var(--terracotta); }
.reactions { display: flex; justify-content: center; gap: 10px; }.reaction-btn { width: 39px; height: 35px; border: 1px dashed var(--brown); border-radius: 3px; background: var(--paper-light); cursor: pointer; font-size: 18px; transition: transform .15s; }.reaction-btn:hover { background: #f5c66b; transform: translateY(-3px); }.reaction-float-layer { position: fixed; inset: auto 0 0; z-index: 21; pointer-events: none; }.floating-reaction { position: fixed; font-size: 24px; animation: float-up 2.4s ease-out forwards; } @keyframes float-up { from { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-220px); } }
.share-btn { padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--brown); border-radius: 3px; color: var(--paper-light); background: var(--green); box-shadow: 3px 3px 0 #3c2417; cursor: pointer; font: 600 12px var(--font-body); transition: transform .15s; }.share-btn:hover { transform: translateY(-2px); }.share-feedback { min-height: 14px; margin: -10px 0 0; color: var(--terracotta); font: 10px var(--font-mono); }
.player audio { display: none; }

.memories[hidden] { display: none; }
.site-footer { padding: 13px 16px; color: var(--paper-light); text-align: center; text-shadow: 1px 1px #3d2113; font-size: 12px; }.site-footer p { margin: 0; }.footer-brand { font-family: var(--font-display); font-size: 17px; }.footer-links { display: flex; justify-content: center; gap: 12px; margin-top: 9px; }.footer-links a { padding: 5px 9px; border: 1px solid rgba(255,240,201,.7); color: var(--paper-light); text-decoration: none; font: 10px var(--font-mono); transition: background .15s, color .15s; }.footer-links a:hover { color: var(--brown); background: var(--paper-light); }
button:focus-visible, .dial:focus-visible, textarea:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
@media (max-width: 540px) { body { background-attachment: scroll; background-position: 52% top; }.app { width: min(100% - 18px, 620px); padding-top: 12px; gap: 16px; }.station-header { min-height: 64px; padding: 10px 13px; }.station-name { font-size: 22px; }.station-name img { width: 28px !important; height: 28px !important; }.live-status { font-size: 9px; }.player { display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto; column-gap: 12px; row-gap: 8px; padding: 14px; }.player::before { display: none; }.vinyl-wrap { grid-column: 1; grid-row: 1 / 4; width: 82px; height: 82px; padding: 6px; border-width: 3px; }.vinyl-wrap::before, .vinyl-wrap::after { width: 28px; height: 28px; border-width: 2px; box-shadow: inset 0 0 0 4px #e1be6b; }.vinyl-wrap::before { left: 6px; }.vinyl-wrap::after { right: 6px; }.vinyl::before { inset: 5px; }.vinyl-art { width: 44px; height: 44px; border-width: 2px; }.song-info { grid-column: 2; grid-row: 1; padding: 2px 0 4px; text-align: left; border: 0; background: transparent; }.song-title { font-size: 20px; }.song-artist { font-size: 12px; }.song-year { font-size: 9px; }.dial { grid-column: 2; grid-row: 2; height: 25px; }.dial-ticks { padding: 4px 5px; }.dial-tick { height: 5px; }.dial-tick.major { height: 10px; }.dial-needle { height: 18px; bottom: 3px; }.time-row { grid-column: 2; grid-row: 3; margin-top: -7px; padding: 0; }.time-mono { font-size: 9px; }.controls { grid-column: 1 / -1; grid-row: 4; justify-content: center; }.next-up { grid-column: 1 / -1; grid-row: 5; font-size: 11px; }.tuner { grid-column: 1 / -1; grid-row: 6; padding-top: 8px; border-top: 1px dashed rgba(255, 240, 201, .28); }.tuner__btn { padding: 6px 8px; font-size: 10px; }.reactions, .share-btn, .share-feedback { grid-column: 1 / -1; } }
@media (max-width: 360px) { .station-header { flex-direction: column; justify-content: center; gap: 5px; }.controls { gap: 10px; }.song-title { font-size: 19px; } }

/* Compact TapeWala console: a distinct cassette-control bar over the shop scene. */
@media (min-width: 541px) {
  .player {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 18px;
    row-gap: 9px;
    align-items: center;
    padding: 18px 22px;
  }
  .player::before { display: none; }
  .vinyl-wrap { grid-column: 1; grid-row: 1 / 5; width: 108px; height: 108px; padding: 8px; border-width: 4px; }
  .vinyl-wrap::before, .vinyl-wrap::after { width: 35px; height: 35px; border-width: 2px; box-shadow: inset 0 0 0 5px #e1be6b; }
  .vinyl-wrap::before { left: 8px; }.vinyl-wrap::after { right: 8px; }
  .vinyl::before { inset: 7px; }.vinyl-art { width: 56px; height: 56px; border-width: 2px; }
  .song-info { grid-column: 2; grid-row: 1; padding: 2px 0 5px; text-align: left; border: 0; background: transparent; box-shadow: none; }
  .song-title { font-size: 22px; }.song-artist { font-size: 12px; }.song-year { font-size: 10px; }
  .dial { grid-column: 2; grid-row: 2; height: 28px; }.dial-ticks { padding: 4px 6px; }.dial-tick { height: 6px; }.dial-tick.major { height: 12px; }.dial-needle { height: 20px; bottom: 3px; }
  .time-row { grid-column: 2; grid-row: 3; margin-top: -8px; padding: 0; }
  .controls { grid-column: 3; grid-row: 1 / 4; gap: 9px; }.control-btn--ghost { width: 34px; height: 31px; }.control-btn--main { width: 52px; height: 43px; }
  .next-up { grid-column: 2; grid-row: 4; justify-content: flex-start; font-size: 11px; }
  .tuner { grid-column: 1 / -1; grid-row: 5; padding-top: 8px; border-top: 1px dashed var(--line); }.tuner__btn { padding: 5px 8px; font-size: 10px; }
  .reactions { grid-column: 1 / -1; grid-row: 6; }.reaction-btn { width: 32px; height: 29px; font-size: 15px; }
  .share-btn { grid-column: 1 / -1; justify-self: center; padding: 6px 10px; font-size: 10px; }
  .share-feedback { grid-column: 1 / -1; }
}

.footer-links a { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.footer-links svg { width: 16px; height: 16px; }

/* Small fixed playback dock — the listening controls stay available at the bottom. */
.app { padding-bottom: 150px; }
.player {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 14px;
  width: min(650px, calc(100% - 22px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  column-gap: 11px;
  row-gap: 4px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(30, 13, 7, .5);
}
.player::before, .player .next-up, .player .reactions, .player .share-btn, .player .share-feedback { display: none; }
.vinyl-wrap { grid-column: 1; grid-row: 1 / 4; width: 66px; height: 66px; padding: 5px; border-width: 3px; }
.vinyl-wrap::before, .vinyl-wrap::after { width: 23px; height: 23px; border-width: 1px; box-shadow: inset 0 0 0 4px #e1be6b; }
.vinyl-wrap::before { left: 5px; }.vinyl-wrap::after { right: 5px; }
.vinyl::before { inset: 4px; }.vinyl-art { width: 36px; height: 36px; border-width: 1px; }
.song-info { grid-column: 2; grid-row: 1; padding: 0; text-align: left; border: 0; border-radius: 0; background: transparent; }
.song-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.song-artist { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.song-year { display: none; }
.dial { grid-column: 2; grid-row: 2; height: 18px; }.dial-ticks { padding: 3px 5px; }.dial-tick { height: 4px; }.dial-tick.major { height: 8px; }.dial-needle { height: 13px; bottom: 2px; }
.time-row { grid-column: 2; grid-row: 3; margin-top: -4px; padding: 0; }.time-mono { font-size: 8px; }
.controls { grid-column: 3; grid-row: 1 / 4; gap: 5px; }.control-btn--ghost { width: 27px; height: 27px; }.control-btn--ghost svg { width: 13px; height: 13px; }.control-btn--main { width: 39px; height: 35px; }.control-btn--main svg { width: 16px; height: 16px; }
.playlist-toggle { width: 30px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,240,201,.34); border-radius: 7px; color: var(--paper-light); background: rgba(19, 13, 10, .42); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 3px 10px rgba(0,0,0,.18); cursor: pointer; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); transition: background .18s, border-color .18s, transform .18s; }.playlist-toggle svg { width: 15px; height: 15px; }.playlist-toggle span { display: none; }.playlist-toggle:hover, .playlist-toggle[aria-expanded="true"] { border-color: rgba(244, 164, 99, .8); background: rgba(166, 69, 40, .48); transform: translateY(-1px); }
.tuner { grid-column: 1 / -1; grid-row: 4; flex-wrap: nowrap; justify-content: flex-start; gap: 5px; width: 100%; overflow-x: auto; padding-top: 6px; border-top: 1px dashed rgba(255,240,201,.28); scrollbar-width: none; }.tuner::-webkit-scrollbar { display: none; }.tuner__btn { flex: 0 0 auto; padding: 4px 7px; font-size: 9px; }

/* Dark glass playlist popup — intentionally the only glass element apart from the player dock. */
.playlist-panel { position: fixed; z-index: 12; left: 50%; bottom: 126px; width: min(360px, calc(100% - 26px)); overflow: hidden; transform: translateX(-50%); border: 1px solid rgba(255,240,201,.19); border-radius: 13px; color: var(--paper-light); background: linear-gradient(145deg, rgba(27, 18, 14, .82), rgba(12, 10, 9, .72)); box-shadow: 0 18px 45px rgba(15, 8, 5, .48), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); animation: playlist-in .2s ease-out; }
.playlist-panel[hidden] { display: none; }
@keyframes playlist-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.playlist-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px 10px; border-bottom: 1px solid rgba(255,240,201,.12); background: linear-gradient(90deg, rgba(174,71,43,.22), transparent); }
.playlist-panel__header h2 { margin: 0; color: #ffd494; font: 600 11px var(--font-mono); letter-spacing: .16em; }.playlist-panel__header p { margin: 4px 0 0; color: rgba(255,240,201,.66); font: 10px var(--font-mono); }
.playlist-panel__header button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255,240,201,.18); border-radius: 7px; color: var(--paper-light); background: rgba(255,255,255,.06); cursor: pointer; font-size: 18px; line-height: 1; transition: background .15s; }.playlist-panel__header button:hover { background: rgba(174,71,43,.5); }
.playlist-panel input { width: calc(100% - 24px); margin: 9px 12px 5px; padding: 7px 8px; border: 1px solid rgba(255,240,201,.18); border-radius: 6px; outline: none; color: var(--paper-light); background: rgba(0,0,0,.16); font: 10px var(--font-mono); }.playlist-panel input::placeholder { color: rgba(255,240,201,.48); }.playlist-panel input:focus { border-color: rgba(244,164,99,.75); }
.playlist-list { max-height: min(55vh, 405px); margin: 0; padding: 5px 7px 8px; overflow-y: auto; list-style: none; scrollbar-color: rgba(244,164,99,.65) transparent; scrollbar-width: thin; }.playlist-list::-webkit-scrollbar { width: 5px; }.playlist-list::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(244,164,99,.65); }.playlist-list button { width: 100%; min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 9px; border: 0; border-bottom: 1px solid rgba(255,240,201,.09); border-radius: 6px; color: rgba(255,240,201,.84); background: transparent; cursor: pointer; text-align: left; font: 12px var(--font-body); transition: background .16s, color .16s, transform .16s; }.playlist-list button > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.playlist-list button:hover { color: #fff0c9; background: rgba(255,240,201,.1); transform: translateX(2px); }.playlist-list button.is-current { color: #ffd494; background: rgba(174,71,43,.28); }.playlist-list i { width: 8px; height: 8px; flex: 0 0 auto; border: 1px solid rgba(255,240,201,.42); border-radius: 50%; }.playlist-list i.is-paused { background: #d29837; }.playlist-list i.is-playing { border: 0; border-radius: 0; background: linear-gradient(to right, #ffcd6b 0 22%, transparent 22% 38%, #ffcd6b 38% 62%, transparent 62% 78%, #ffcd6b 78%); animation: equalize .7s ease-in-out infinite alternate; } @keyframes equalize { to { transform: scaleY(.55); } }

@media (max-width: 540px) {
  .app { padding-bottom: 145px; }
  .player { bottom: 9px; width: calc(100% - 16px); }
  .station-header { margin-bottom: auto; }
}