:root {
  --hero-padding: clamp(16px, 4vw, 48px);
  --thumb-w: 220px;
  --thumb-h: 150px;
  --gap: 18px;
  --visible: 4; /* how many boxes are “displayed” at once */
}

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

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #111;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

#splash_panel {
  z-index: 99;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;

background: linear-gradient(
  135deg,
  #2e2e2e,  /* medium grey */
  #1f1f1f,  /* dark grey */
  #141414,  /* darker */
  #0a0a0a,  /* near black */
  #1c1c1c,  /* back to dark grey */
  #2e2e2e   /* loop */
);
  background-size: 500% 500%;
}

#splash_panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    100% 80% at 50% 30%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 0;
}

#splash_panel.active {
  animation: gradientFlow 16s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}


.splash_logo{
    top:0px;
    left:0px;
    width: 114px;
    height: 66px;
    display: block;
    position: absolute;
    margin: var(--hero-padding);
    background-size: cover;
    background-image: url(../imgs/logo.svg);
}

.splash_copy{
  right:20px;
  bottom:20px;
  color:#fff;
  font-size: 14px;;
  position: fixed;
}

#login_form {
  background: rgba(255,255,255,0.08); 
  padding: 2rem;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

#login_form h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #f0f0f0;
  font-weight: 500;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.input-group label {
  color: #ddd;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.input-group input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: none;
  outline: none;
  font-size: 1rem;
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.input-group input:focus {
  background: rgba(255,255,255,0.25);
}

button {
  margin-top: 0.5rem;
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: #2c7744;
  color: white;
  transition: background 0.3s;
}

button:hover {
  background: #3c8f55;
}



/* CHANGED: .hero -> #hero */
#hero {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter 400ms ease; /* don't animate background-image */
}

/* CHANGED: .hero::after -> #hero::after */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: saturate(1.1) brightness(0.92);
  pointer-events: none;
  z-index: 1;
}

/* CHANGED: .bg-layer -> #bgLayer */
#bgLayer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
  pointer-events: none;
  will-change: opacity; /* perf hint */
}

.copy {
  position: relative;
  z-index: 2;
  color:#fff;
  max-width: min(900px, 80vw);
  padding: var(--hero-padding)
}


#title{
    margin: 50px 0 10px;
    font-size: clamp(28px, 6vw, 64px);
    font-weight: 800;
}

#slogan {
    margin: 0 0 12px;
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 600;
    opacity: 0.85;
}

/* Description */
.desc {
    margin: 6px 0 0;
    font-size: clamp(14px, 2.2vw, 20px);
    opacity: 0.9;
    line-height: 1.45;
    max-width: 60ch;
}

/* Tag & store group */
.data-group {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

#tags,
#stores{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#tags li{
    color: #1e1e1e;
    list-style: none;
    padding: 5px 12px;
    border-radius: 6px;
     background-color: #bbb;
    font-size: 14px;
}

.store-logo {
  width: 120px;   /* adjust size */
  height: auto;
  display: block;
}

#stores li {
  display: inline-block;
  margin: 0 8px;
}

.tag {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: .85rem;
  margin: 0 .35rem .35rem 0;
}

.store-logo {
  width: 120px;
  height: auto;
  display: block;
}


/* Buttons */
.btn {
    width: auto;
    border: none;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 10px 15px 0 0;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.25);
    background-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.btn:hover { transform: scale(1.06) }
.btn:active { transform: scale(.97) }

.strip-wrap {
  right: 18px;
  bottom: 100px;
  position: fixed;
  z-index: 3;
  width: min(calc(var(--thumb-w) * var(--visible) + var(--gap) * (var(--visible) - 1)), 92vw);
}

.strip {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding: 8px 0px;
  margin-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* swipe/drag */
  touch-action: pan-x;
  cursor: grab;
  user-select: none;

  /* hide scrollbar cross-browser */
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE / Edge legacy */
}
.strip::-webkit-scrollbar { display: none } /* Chrome, Safari, Opera */
.strip:active { cursor: grabbing }

/* removed conflicting visible scrollbar styles */

.card {
    position: relative;
    flex: 0 0 var(--thumb-w);
    height: var(--thumb-h);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(4px);
    background-color:rgba(255, 255, 255, 0.35); 
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 180ms ease;
}
.card:hover { transform: translateY(-7px) }
.card:active { transform: translateY(0) scale(.99) }
.card[aria-current="true"] {transform: translateY(-7px); outline: none; border:none; background-color:rgb(120 120 120 / 35%);}

.card__media, .card__overlay { pointer-events: none; } /* avoids dead zones for clicks */

.card__media {
    position: absolute;
    inset: 0;
    opacity: 1;
    background-position: center;
    background-size: 80% 40%;
    background-repeat: no-repeat;
    filter: saturate(1.05) contrast(1.02);
}

.nav {
  display: flex;
  width: 480px;
  right: 0;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  pointer-events: none
}
.nav button {
    color:#fff;
    pointer-events: auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}
.nav button:hover { transform: scale(1.06) }
.nav button:active { transform: scale(.97) }
.nav svg { width: 20px; height: 20px }
.nav .spacer { width: 12px }

.picker {
    color:#fff;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    margin-top: 6px;
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.picker label {
  font-size: 12px;
  opacity: .75;
  line-height: 1;
  padding-left: 8px;
}
#titleSelect {
  color:#fff;
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 16px 10px 6px;
  font: inherit;
  cursor: pointer;
  outline: none;
  max-width: 260px;
  text-overflow: ellipsis;
}

/* NEW: counter styles */
.counter {
    color:#fff;
    pointer-events: auto;
    font-size: 13px;
    padding: 10px 14px;
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    line-height: 1;
    margin-top: 6px;;
    white-space: nowrap;
}

header{
  z-index: 2;
  height: 80px;
  display: flex;
  position: relative;
}

#logo{
  width: 114px;
  height: 66px;
  display: block;
  margin: var(--hero-padding);
  background-size: cover;
  background-image: url(../imgs/logo.svg);
}

footer{
  z-index: 4;
  bottom: 0;
  height: 40px;
  display: flex;
  width: 100dvw;
  padding: 0 18px;
  position: absolute;
  align-items: center;
  justify-content: space-between;
}

#fsToggle{
    opacity: 0.5;
}

#player{
  color:#fff;
  cursor: pointer;
}

a.hide {
  display: none !important;
}

.ctrl-btn {
  color: white;
  cursor: pointer;
}
.ctrl-btn:hover {
  color: #ccc; /* highlight on hover */
}

.settings-container {
  position: relative;
  display: inline-block;
}

.settings-container.Guest{
  display: none;
}

#message{
  font-size: 10px;
  width: 300px;
  margin:10px auto;
  line-height: 1.5em;
}

#settings{
  background: none;
  border: none;
  opacity: 0.5;
  cursor: pointer;
  width:20px;
  height: 20px;
  background-size: cover;
  background-image: url(../imgs/gear_icon.svg);
}

#settings:hover {
  opacity: 0.75;
}

#logoutBtn{
    background: none;
    border: none;
    opacity: 0.5;
    cursor: pointer;
    width:20px;
    height: 20px;
    background-size: cover;
    background-image: url(../imgs/exit_icon.svg);
}

#logoutBtn:hover {
  opacity: 0.75;
}

.settings-menu {
    position: absolute;
    bottom: 40px; /* appears above footer */
    left: 0;
    color: white;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.35);
    padding: 10px 15px 30px 15px;
    min-width: 220px;
    z-index: 1000;
}

.settings-menu form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-menu label {
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-menu input[type="checkbox"] {
  accent-color: #ccc; /* green highlight */
  cursor: pointer;
}

.settings-menu label.is-disabled {
  text-decoration: line-through;
  pointer-events: none;      /* no clicks on label or its children */
  opacity: 0.6;
  user-select: none;
}
.settings-menu label.is-disabled input {
  pointer-events: none;      /* belt + suspenders */
}

.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 10px;
}

.sound-bars div {
  width: 3px;
  height: 5px;
  opacity: 0.5;
  background: #fff;
  animation: bounce 1s infinite ease-in-out;
}

#player:hover .sound-bars div{
     background: #ccc;
}


.copyright{
  opacity: 0.5;
  font-size: 12px;
  color:#ffff;
}

footer .group{
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: space-around;
}

.qr{
  margin: 0 50px 0 0;
}

/* Animate each bar at a different delay */
.sound-bars div:nth-child(1) { animation-delay: 0s; }
.sound-bars div:nth-child(2) { animation-delay: 0.2s; }
.sound-bars div:nth-child(3) { animation-delay: 0.4s; }

#player.pause .sound-bars div { animation:none; }

.hidden {
  display: none !important;
}

@keyframes bounce {
  0%, 100% { height: 5px; }
  50%      { height: 10px; }
}


.fadeIn {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
  
      -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
          
  }

.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
  
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #bgLayer { transition: none; }
  #hero { transition: none; }
  .card { transition: none; }
}

@media (max-width: 760px) {
    header{justify-content:center;}
    :root { --thumb-w: 180px; --thumb-h: 120px }
    #hero::after{background: linear-gradient(to bottom, rgba(0,0,0,0.65) 75%,rgba(0,0,0,0) 100%);}
    #titleSelect { max-width: 180px }
    .btn{margin:0;}
    #stores{padding:0;}
    #tags li, #stores li {margin:0;}
    .copy{max-width: min(900px, 100vw); text-align: center;}
    .nav{ width: 100%; }
    .data-group{justify-content: center;}
    .qr{
      margin: auto;
    }
}

@media only screen and (max-width : 640px) {
    .strip,
    .counter{ display: none; }
}