/* =====================================================================
   GLASS PLAYER WEBSITE - styles
   Sizes use "--u" (1/100 of a 16:9 screen) so the whole design scales
   to any monitor or laptop. Colours you may want to change are below.
   ===================================================================== */

@font-face {
  font-family: "GP Poppins";                   /* Poppins SemiBold - free font (SIL Open Font License) */
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ---- easy-to-change colours ---- */
  --green:        #22e61e;          /* menu underline, highlighted names, glows */
  --green-rgb:    34, 230, 30;      /* the same colour as numbers, for see-through versions */
  --green-soft:   rgba(40, 255, 60, .35);
  --white:        #ffffff;
  /* About / Features / Support glass: a light sheen over the blurred forest (not a solid colour), so it reads as real frosted glass */
  --panel-tint:   linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 38%, rgba(4, 22, 10, .34));
  --panel-glass:  blur(calc(var(--u) * 2.6)) saturate(1.5) brightness(.78);
  --panel-edge:   0 calc(var(--u) * .6) calc(var(--u) * 2.4) rgba(0,0,0,.45),
                  inset 0 1px 0 rgba(255,255,255,.38),
                  inset 0 0 0 1px rgba(255,255,255,.16),
                  inset 0 0 calc(var(--u) * 2.5) rgba(255,255,255,.05);
  --panel-round:  calc(var(--u) * 1.3);

  /* ---- layout ---- */
  --u: min(1vw, 1.7778vh);          /* 1 design unit (1920px wide design / 100) */
  --split: 60vw;                    /* where the blurred glass strip starts */
  --cardW: calc(var(--u) * 30.2);   /* width of the glass player */
  --k: calc(var(--cardW) / 460);    /* 1 "player pixel" (player is 460 x 280) */

  --font: "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-player: "GP Poppins", "Poppins", "Segoe UI", "Open Sans", sans-serif;   /* the glass player card */
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1f0e;
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* pictures, videos and drawings can't be dragged out or long-pressed to save (phones) */
img, video, canvas, svg {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ===================== BACKGROUND ===================== */
.bg {
  position: fixed; inset: 0;
  background: #0b1f0e url("../images/background.jpg?v=202611060422") center / cover no-repeat;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* layers that move with the mouse (main.js) */
.bg, .glass-strip, .big-title, .orb-zone, .player-zone, .about { will-change: transform; }

/* the same leaves, gently moving in the breeze (drawn by main.js on top of the still picture) */
.leaves {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.leaves.on { opacity: 1; }

.glass-strip {
  position: fixed; top: 0; bottom: 0; left: var(--split);
  right: calc(var(--u) * -4);          /* extra width so moving layers never show a gap */
  /* the forest is darker on this side than the old leaves, so the glass lifts it more and adds a soft green sheen */
  -webkit-backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15);
          backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15);
  background: radial-gradient(ellipse 80% 60% at 40% 45%, rgba(150, 230, 110, .16), rgba(90, 170, 70, .06) 70%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.08),
              calc(var(--u) * -.3) 0 calc(var(--u) * .8) rgba(0,0,0,.35);
  transition: opacity .7s var(--ease), translate 1s var(--ease);
}

/* ===================== BIG TITLE ===================== */
.big-title {
  position: fixed; inset: 0; margin: 0;
  pointer-events: none;
  font-weight: 700;
  font-size: calc(var(--u) * 13.85);
  line-height: 1.09;
  letter-spacing: -0.01em;
  transition: opacity .7s var(--ease), translate 1s var(--ease);
}
.bt-left, .bt-right {
  position: absolute;
  top: calc(50vh - var(--u) * 7.2);
  display: flex; flex-direction: column;
}
.bt-left  { right: calc(100vw - var(--split)); padding-right: calc(var(--u) * 1.75); align-items: flex-end; color: #fff; }
.bt-right { left: var(--split); padding-left: calc(var(--u) * .25); align-items: flex-start; }
.bt-line  { display: block; white-space: nowrap; }

/* see-through letters: holes cut in the frosted glass, the clear leaves show
   through them. main.js lines the picture up with the moving background, and
   the #holeShadow filter adds the soft shadow inside the top edge of each hole. */
.leaf-text {
  color: transparent;
  background-image: url("../images/background-letters.jpg?v=202611060422");   /* a brighter, evened-out copy, so every letter shows */
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  filter: url(#holeShadow) brightness(1.35) saturate(1.0);
}

/* Phones held upright only ever show the middle strip of the wide picture ("cover"): they get just that strip
   (background-phone.jpg = the same pixels, cut out, 3:4) - about 60 % less to download, nothing lost.
   main.js uses the same rule (PHONE_BG) so the see-through letters and the drops still line up. */
@media (orientation: portrait) and (max-aspect-ratio: 3/4) {
  .bg { background-image: url("../images/background-phone.jpg?v=202611060422"); }
  .leaf-text { background-image: url("../images/background-letters-phone.jpg?v=202611060422"); }
}

/* ===================== MENU ===================== */
.menu {
  position: fixed; z-index: 20;
  top: calc(var(--u) * 2.35);
  left: calc(var(--u) * 3.8);                 /* logo first, so HOME stays where it was in the design */
  display: flex; gap: calc(var(--u) * 4);
  font-weight: 700;
  font-size: max(calc(var(--u) * 1.36), 13px);
  letter-spacing: .02em;
}
.menu a {
  color: #fff; text-decoration: none;
  padding: calc(var(--u) * .3) 0 calc(var(--u) * .75);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: color .25s, text-shadow .25s;
}
.menu a:hover { text-shadow: 0 0 12px var(--green-soft), 0 2px 6px rgba(0,0,0,.45); }

/* Glass Player logo before HOME */
.menu { align-items: center; }
.menu .menu-logo {
  display: block;
  padding: 0;
  margin-right: calc(var(--u) * -1.2);          /* sits a little closer to HOME than the gap between links */
  margin-top: calc(var(--u) * -.45);            /* line up with the middle of the words (they have the underline space below) */
}
.menu-logo img {
  display: block;
  width: max(calc(var(--u) * 2.9), 30px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition: transform .35s var(--ease), filter .35s;
}
.menu-logo:hover img {
  transform: scale(1.08) rotate(-6deg);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
/* the menu sits on its own small frosted glass bar, so the words read on any part of the forest
   (computers and landscape screens; phones keep their own soft shade further below) */
@media (min-aspect-ratio: 4/5) {
  .menu {
    padding: calc(var(--u) * .55) calc(var(--u) * 2.2) calc(var(--u) * .2) calc(var(--u) * 1.1);
    margin-left: calc(var(--u) * -1.1); margin-top: calc(var(--u) * -.55);
    border-radius: 99px;
    background: rgba(8, 26, 16, .42);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12);
  }
}
/* follow on X: a round glass icon at the end of the menu (hidden on phones - the menu is full there) */
.menu .menu-x {
  display: grid; place-items: center; padding: 0;
  width: max(calc(var(--u) * 2.5), 26px); height: max(calc(var(--u) * 2.5), 26px);
  margin-left: calc(var(--u) * -1.4); margin-top: calc(var(--u) * -.45);
  border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  transition: background .25s, transform .25s;
}
.menu .menu-x svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.menu .menu-x:hover { background: rgba(var(--green-rgb),.25); transform: scale(1.08); }
@media (max-aspect-ratio: 4/5) { .menu .menu-x { display: none; } }
/* ... and a small "Follow on X" pill under the developer's name on Support */
.sp-x {
  display: inline-flex; align-items: center; gap: .45em; margin-top: .55em;
  padding: .32em .85em .32em .7em; border-radius: 99px;
  font-size: .72em; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  transition: background .25s, border-color .25s;
}
.sp-x svg { width: 1em; height: 1em; }
.sp-x:hover { background: rgba(var(--green-rgb),.22); border-color: var(--green); }
.menu-bar {
  position: absolute; bottom: 0; left: 0;
  height: max(calc(var(--u) * .4), 3px); width: 0;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(var(--green-rgb),.6);
  transition: left .45s var(--ease), width .45s var(--ease);
}

/* ===================== PAGE SWITCHING =====================
   Home <-> About : menu, leaves, glass and title stay; the player slides out
                    to the left while the About panel slides in from the left.
   Features / Download : the glass and title slide away to the right and the
                    panel rises up.
   (Each glass element fades itself, which keeps its blur working mid-animation.) */
.page-el {
  opacity: 0; visibility: hidden;
  translate: calc(var(--u) * -9) 0;
  transition: opacity .5s var(--ease), translate .8s var(--ease), visibility 0s linear .8s;
}
.features.page-el, .download.page-el { translate: 0 calc(var(--u) * 5); }

body[data-page="home"]     .page-el[data-for="home"],
body[data-page="about"]    .page-el[data-for="about"],
body[data-page="features"] .page-el[data-for="features"],
body[data-page="download"] .page-el[data-for="download"] {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .75s var(--ease) .18s, translate 1s var(--ease) .18s, visibility 0s;
}
body[data-page="features"] .big-title,
body[data-page="download"] .big-title,
body[data-page="features"] .glass-strip,
body[data-page="download"] .glass-strip { opacity: 0; translate: 30vw 0; }

/* ===================== HOME : GLOWING ORB BEHIND THE PLAYER =====================
   Like the blob behind the glass card in the reference video: outside the card
   it glows, through the frosted card it is blurred. "screen" blending makes the
   video's black background disappear.                                          */
.orb-zone { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.orb {
  --orbW: calc(var(--cardW) * 1.4);           /* orb size (1.4 x the player width) */
  position: absolute;
  width: var(--orbW); height: var(--orbW);
  left: calc(4.2vw + var(--cardW) / 2 - var(--orbW) / 2);
  top:  calc(50vh - var(--orbW) / 2 + var(--u) * .8);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  object-fit: cover;
}

/* ===================== HOME : GLASS PLAYER ===================== */
.player-zone { position: fixed; inset: 0; pointer-events: none; }
body[data-page="home"] .player-zone { pointer-events: auto; }
.player-zone .player { pointer-events: auto; }

/* the tilt values change every frame: not inherited, so the parts inside the player don't redo their styles each time */
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --s  { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --sx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --go { syntax: "<number>"; inherits: false; initial-value: 0; }
.player {
  --rx: 0deg; --ry: 0deg; --s: 1; --sx: 0px; --sy: 0px;
  position: absolute;
  left: 4.2vw;
  top: calc(50vh - var(--k) * 140);
  width: var(--cardW);
  height: calc(var(--k) * 280);
  border: calc(var(--k) * 2.2) solid rgba(255,255,255,.92);
  border-radius: calc(var(--k) * 11);
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 45%, rgba(0,30,10,.10));
  -webkit-backdrop-filter: blur(calc(var(--k) * 15)) saturate(1.35);
          backdrop-filter: blur(calc(var(--k) * 15)) saturate(1.35);
  box-shadow:
    var(--sx) calc(var(--k) * 22 + var(--sy)) calc(var(--k) * 50) rgba(0,0,0,.38),
    inset 0 0 calc(var(--k) * 30) rgba(255,255,255,.06);
  transform: perspective(calc(var(--k) * 1300)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  font-family: var(--font-player);
  font-weight: 600;
  user-select: none;
  outline: none;
}
.player-glare {
  --gx: 50%; --gy: 50%; --go: 0;
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.30), rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 60%);
  opacity: var(--go);
  mix-blend-mode: soft-light;
}
/* every part is placed in "player pixels" (k) like the real app */
.player > * { position: absolute; }

.win-btns { top: calc(var(--k) * 6); right: calc(var(--k) * 14); display: flex; gap: calc(var(--k) * 1); }
.win-btns span {
  width: calc(var(--k) * 13); height: calc(var(--k) * 18);
  font-size: calc(var(--k) * 12); line-height: calc(var(--k) * 18);
  text-align: center;
  color: rgba(255,255,255,.9);
}

.vinyl {
  left: calc(var(--k) * 41.75); top: calc(var(--k) * 10.75);
  width: calc(var(--k) * 103.5); height: calc(var(--k) * 103.5);
  filter: drop-shadow(0 calc(var(--k)*3) calc(var(--k)*6) rgba(0,0,0,.35));
  will-change: transform;
  animation: vinyl-spin 1.8s linear infinite;     /* 33 rpm like the real player (200 degrees a second) */
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vinyl { animation: none; } }
.arm {
  left: calc(var(--k) * -16.5); top: calc(var(--k) * 16.5);
  width: calc(var(--k) * 120.35); height: calc(var(--k) * 90.51);
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--k)*2) calc(var(--k)*3) rgba(0,0,0,.35));
}

.song-title {
  left: calc(var(--k) * 174); top: calc(var(--k) * 40);
  width: calc(var(--k) * 230); height: calc(var(--k) * 40);
  font-size: calc(var(--k) * 26); line-height: calc(var(--k) * 40);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.song-hint {
  left: calc(var(--k) * 176); top: calc(var(--k) * 82);
  width: calc(var(--k) * 230);
  font-size: calc(var(--k) * 10.5); line-height: calc(var(--k) * 20);
  word-spacing: .45em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .95;
}

.time { top: calc(var(--k) * 134); font-size: calc(var(--k) * 17); line-height: calc(var(--k) * 24); font-variant-numeric: tabular-nums; }
.time-now   { left: calc(var(--k) * 34);  }
.time-total { left: calc(var(--k) * 403); }

.seek {
  left: calc(var(--k) * 83); top: calc(var(--k) * 136);
  width: calc(var(--k) * 310); height: calc(var(--k) * 20);
}
.seek-line, .seek-fill {
  position: absolute; left: 0; top: 50%; height: calc(var(--k) * 1.6); margin-top: calc(var(--k) * -.8);
  border-radius: 9px; background: rgba(255,255,255,.75);
}
.seek-line { right: 0; }
.seek-fill { width: 0; background: #fff; box-shadow: 0 0 calc(var(--k)*6) rgba(255,255,255,.6); }
.seek-dot {
  position: absolute; top: 50%; left: 0;
  width: calc(var(--k) * 10); height: calc(var(--k) * 10);
  margin: calc(var(--k) * -5) 0 0 calc(var(--k) * -5);
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 calc(var(--k)*6) rgba(0,0,0,.35);
}

.pbtn { display: grid; place-items: center; }
.pbtn svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pbtn svg.solid { fill: #fff; stroke: none; }

.btn-vol   { left: calc(var(--k) * 44);  top: calc(var(--k) * 166); width: calc(var(--k) * 30); height: calc(var(--k) * 30); }
.btn-prev  { left: calc(var(--k) * 181); top: calc(var(--k) * 171); width: calc(var(--k) * 19); height: calc(var(--k) * 19); }
.btn-play  { left: calc(var(--k) * 231); top: calc(var(--k) * 168); width: calc(var(--k) * 25); height: calc(var(--k) * 25); }
.btn-next  { left: calc(var(--k) * 286); top: calc(var(--k) * 171); width: calc(var(--k) * 19); height: calc(var(--k) * 19); }
.btn-heart { left: calc(var(--k) * 387); top: calc(var(--k) * 167); width: calc(var(--k) * 29); height: calc(var(--k) * 29); }

.wave {
  left: calc(var(--k) * 139); top: calc(var(--k) * 210);
  width: calc(var(--k) * 210); height: calc(var(--k) * 50);
  display: flex; align-items: center; justify-content: space-between;
}
.wave i {
  display: block;
  width: calc(var(--k) * 3.1); height: 100%;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 calc(var(--k)*4) rgba(255,255,255,.45);
  transform: scaleY(.2);
}

/* ===================== ABOUT ===================== */
.about {
  position: fixed;
  left: 2.6vw;
  top: calc(50vh - var(--u) * 21.4);
  width: calc(var(--u) * 37.5);
  height: calc(var(--u) * 45.9);
  max-height: calc(100vh - var(--u) * 8.5);
  background: var(--panel-tint);
  -webkit-backdrop-filter: var(--panel-glass);
          backdrop-filter: var(--panel-glass);
  box-shadow: var(--panel-edge);
  border-radius: var(--panel-round);
  overflow: hidden;
  z-index: 5;
}
.about-inner {
  height: 100%;
  overflow-y: auto;
  padding: calc(var(--u) * 3.7) calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 3.1);
  font-weight: 600;
  font-size: max(calc(var(--u) * 1.27), 13px);
  line-height: 1.12;
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.about h2 { margin: 0 0 1.05em; font-size: 1em; font-weight: 700; }
.about p  { margin: 0 0 1.05em; }
/* credits: a second, quieter part of the About card */
.about-credits {
  margin-top: 1.3em; padding-top: .9em;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: .78em; font-weight: 400; line-height: 1.35;
  color: rgba(255,255,255,.82);
}
.about-credits h3 { margin: 0 0 .5em; font-size: 1.1em; font-weight: 700; color: #fff; letter-spacing: .04em; }
.about-credits ul { margin: 0; padding: 0; list-style: none; }
.about-credits li { margin: 0 0 .3em; }
.about-credits .hl { color: #fff; font-weight: 600; }
.about-credits a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.5); }
.about-credits a:hover, .about-credits a:focus-visible { text-decoration-color: #fff; }
.hl { color: var(--green); }

/* ===================== FEATURES ===================== */
.features-scroll {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--u) * 7.6);
  overflow-y: hidden;                   /* no scrollbar showing on the other pages */
  padding: calc(var(--u) * 1.6) 0 calc(var(--u) * 4);
  pointer-events: none;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
body[data-page="features"] .features-scroll { pointer-events: auto; overflow-y: auto; }

.features {
  width: min(94vw, calc(var(--u) * 62));
  margin: 0 auto;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4) calc(var(--u) * 3.4);
  background: var(--panel-tint);
  -webkit-backdrop-filter: var(--panel-glass);
          backdrop-filter: var(--panel-glass);
  box-shadow: var(--panel-edge);
  border-radius: var(--panel-round);
  font-size: max(calc(var(--u) * 1.3), 14px);
}
.features h2 {
  margin: 0 0 calc(var(--u) * 2.2);
  text-align: center; font-size: 1.05em; font-weight: 700; letter-spacing: .02em;
}
.feature {
  display: grid;
  grid-template-columns: 54% 1fr;
  column-gap: calc(var(--u) * 2.4);
  align-items: start;
  margin-bottom: calc(var(--u) * 2.6);
}
.feature:last-child { margin-bottom: 0; }
.feature:nth-child(even) { grid-template-columns: 1fr 54%; }
.feature:nth-child(even) .f-video { order: 2; }
.f-info { text-align: center; padding-top: calc(var(--u) * .2); }
.f-info h3 { margin: 0 0 .6em; font-size: 1em; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.f-info p  { margin: 0 auto; max-width: 22em; font-weight: 400; font-size: .82em; line-height: 1.5; opacity: .85; }
.f-info p + p { margin-top: .9em; }

.f-video {
  position: relative;
  aspect-ratio: 520 / 330;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: calc(var(--u) * .55);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(90,160,80,.30), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(30,80,40,.45), rgba(10,40,20,.35));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.f-video:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 18px rgba(var(--green-rgb),.18); }
.f-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.f-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
  transition: background .25s;
}
.f-play:hover { background: rgba(255,255,255,.06); }
.f-play span { display: inline-flex; align-items: center; gap: .55em; }
.f-play svg { width: 1em; height: 1em; fill: #fff; opacity: 0; width: 0; transition: opacity .25s, width .25s; }
.f-play:hover svg { opacity: 1; width: 1em; }
.f-video.playing .f-play { display: none; }

/* speaker button on videos that have music (sound starts off) */
.f-sound {
  position: absolute; right: 10px; top: 10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 35, 15, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.55);
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}
.f-sound:hover { transform: scale(1.1); background: rgba(10, 35, 15, .65); }
.f-sound.on { border-color: var(--green); box-shadow: 0 0 10px rgba(var(--green-rgb),.45); }
.f-sound svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-sound .ico-on, .f-sound.on .ico-off { display: none; }
.f-sound.on .ico-on { display: block; }

/* ===================== SUPPORT & DOWNLOAD =====================
   One glass panel that scrolls (like Features):
   support (note | easy payment | India)  ->  theme cards + 3 steps  ->  download     */
.download-scroll {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--u) * 7.6);
  overflow-y: hidden;
  padding: calc(var(--u) * 1.6) 0 calc(var(--u) * 4);
  pointer-events: none;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
body[data-page="download"] .download-scroll { pointer-events: auto; overflow-y: auto; }

.download {
  width: min(94vw, calc(var(--u) * 78));
  margin: 0 auto;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3.2) calc(var(--u) * 3);
  text-align: center;
  background: var(--panel-tint);
  -webkit-backdrop-filter: var(--panel-glass);
          backdrop-filter: var(--panel-glass);
  box-shadow: var(--panel-edge);
  border-radius: var(--panel-round);
  font-size: max(calc(var(--u) * 1.3), 14px);
}
.download h2 { margin: 0 0 .35em; font-size: 1.1em; letter-spacing: .04em; }
.sp-sub { margin: 0 0 2em; font-size: .9em; opacity: .85; text-shadow: 0 2px 4px rgba(0,0,0,.4); }

/* ---- support: note | easy payment | India UPI QR ---- */
.sp-row {
  display: grid; grid-template-columns: 1.45fr 1fr 1fr;
  column-gap: calc(var(--u) * 2.2); align-items: stretch;
  text-align: left;
}
.sp-box {
  display: flex; flex-direction: column;
  padding: 1.2em 1.2em 1.1em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: calc(var(--u) * .7);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.sp-box-title { margin: 0 0 .7em; font-size: .95em; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.sp-box-text { margin: 0; font-size: .78em; line-height: 1.5; opacity: .85; }
/* note for supporters outside India (Easy payment column) */
.sp-abroad {
  margin: 0 0 .9em; padding: .65em .8em;
  font-size: .76em; line-height: 1.5;
  background: rgba(var(--green-rgb), .1);
  border: 1px solid rgba(var(--green-rgb), .45);
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(var(--green-rgb), .1);
}
.sp-abroad:empty { display: none; }
.sp-badges { display: flex; flex-direction: column; gap: .5em; margin: 1em 0 1.1em; }
.sp-badge {
  padding: .55em .8em;
  font-size: .8em; font-weight: 700; text-align: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: .55em;
}
.sp-secure {
  margin-top: auto;
  display: flex; align-items: center; gap: .45em;
  font-size: .7em; font-weight: 700; opacity: .8;
}
.sp-secure svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-india .sp-box-title { color: var(--green); }
.sp-qr {
  position: relative; align-self: center;
  width: min(100%, 10.5em); aspect-ratio: 1;
  margin-bottom: .7em;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: .6em; overflow: hidden;
}
.sp-qr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sp-qr-soon {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em;
  padding: .6em; text-align: center; font-size: .68em; font-weight: 600; opacity: .7;
}
.sp-qr-soon svg { width: 2.4em; height: 2.4em; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-upi { margin-bottom: .5em; text-align: center; font-size: .74em; opacity: .9; }
.sp-upi-name { font-size: 1.08em; margin-bottom: .2em; }
.sp-upi-name b { color: var(--green); }
.sp-upi-id { overflow-wrap: anywhere; opacity: .9; }

/* the QR code starts blurred: "Show QR code" -> the name check -> the real code */
.qr-veil, .qr-check {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em;
  text-align: center;
}
.qr-veil[hidden], .qr-check[hidden] { display: none; }
.qr-decoy { position: absolute; inset: 9%; width: 82%; height: 82%; filter: blur(5px); opacity: .5; }
/* the green neon line that keeps scanning the blurred QR code (the same line as in the QR card) */
/* a neon tube: white-hot core (::after), green glow (::before), a soft light trail above it; the ends fade out */
.qr-veil-scan {
  position: absolute; left: 2%; right: 2%; top: 8%; height: 64px; margin-top: -50px; opacity: 0; pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(to top, transparent 0, transparent 12px, rgba(61,252,143,.40) 14px, rgba(61,252,143,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  animation: qrVeilScan 2.4s ease-in-out .6s infinite both;
}
.qr-veil-scan::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 14px; border-radius: 99px;
  background: #3dfc8f; filter: blur(7px); opacity: .95;
}
.qr-veil-scan::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, #7dffb5, #f2fff7 30%, #fff 50%, #f2fff7 70%, #7dffb5);
  box-shadow: 0 0 3px #fff, 0 0 8px #9dffc8;
}
@keyframes qrVeilScan { 0% { top: 8%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 90%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qr-veil-scan { display: none; } }
.qr-btn {
  position: relative; display: inline-flex; align-items: center; gap: .4em;
  padding: .5em .95em; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: .7em; font-weight: 700; color: #fff;
  background: rgba(8, 34, 14, .78); border: 1.5px solid var(--green);
  box-shadow: 0 0 10px rgba(var(--green-rgb), .35);
  transition: background .2s;
}
.qr-btn[hidden] { display: none; }
.qr-btn:hover { background: rgba(var(--green-rgb), .28); }
.qr-btn svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qr-check { gap: .3em; padding: .6em .55em; background: rgba(8, 30, 14, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr-check-title { font-size: .72em; color: #ffd24f; }
.qr-check-text { font-size: .62em; line-height: 1.35; }
.qr-check-name { font-size: .86em; font-weight: 700; color: var(--green); line-height: 1.2; }
.qr-check-id {                                            /* the UPI ID, in a small box so it stands out */
  max-width: 100%; padding: .2em .5em; border-radius: 6px;
  font-size: .6em; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
}
.qr-check .qr-btn { margin-top: .25em; }
.sp-qr img.qr-real { animation: qrIn .5s ease; }
/* qrFull: the whole Paytm card (photo, name, QR, UPI ID) - the box grows to the card's shape */
.sp-qr.full { width: min(100%, 16em); aspect-ratio: auto; background: transparent; border: 0; }
.sp-qr.full img.qr-real { position: static; display: block; width: 100%; height: auto; border-radius: .7em; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
@keyframes qrIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
.sp-upi:empty { display: none; }

/* ---- the neon glass UPI card (content.js > support > india > neonCard) ----
   opens after "OK, show QR": the card rises into place, its neon edge powers on with a small flicker, the parts
   appear one by one, a scan line passes over the QR code three times and stops (never in the way of scanning) */
.uc-overlay {                                               /* the card in the middle of the page, over everything */
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 16px 16px 4em; overflow-y: auto; font-size: clamp(14px, 2.15vh, 19px);
}
.uc-back {                                                  /* the page behind: blurred and a little darker */
  position: fixed; inset: 0; background: rgba(1, 6, 10, .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
}
.uc-overlay .upi-card { width: 100%; transform-style: preserve-3d; }
.uc-overlay img { display: block; }
.uc-overlay .uc-avatar { width: 4.4em; height: 4.4em; }
.uc-overlay .uc-code img, .uc-overlay .uc-logo, .uc-overlay .uc-foot img { width: 100%; height: auto; }
.uc-overlay .uc-logo { width: 74%; }
.uc-overlay .uc-foot img { width: 74%; }
.uc-overlay .uc-id img { width: .85em; height: auto; flex: none; }
/* the card: clear acrylic - you see the page through it, a light frost and sheen, a thin crisp neon edge, a bevel
   just inside it, a green bar at the bottom; it stands slightly turned and floats gently, its light spills on the
   "table" below (.uc-floor) */
.uc-stage { position: relative; perspective: 1300px; margin: auto; width: min(100%, 19em); }
.upi-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .6em;
  padding: 1.25em 1em 1em; border-radius: 1.4em;
  transform: rotateY(-8deg) rotateX(5deg);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .08)),
    rgba(var(--neon-rgb), .06);
  -webkit-backdrop-filter: blur(7px) saturate(1.25); backdrop-filter: blur(7px) saturate(1.25);
  box-shadow:
    0 0 0 1.6px rgba(var(--neon-rgb), 1),                         /* the thin neon edge */
    0 0 6px 1px rgba(var(--neon-rgb), .85), 0 0 18px 2px rgba(var(--neon-rgb), .35),
    inset 0 1.5px 0 rgba(255, 255, 255, .55),                    /* light on the top edge */
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 0 26px rgba(var(--neon-rgb), .12),
    0 30px 50px -10px rgba(0, 0, 0, .55);
  animation: ucFloat 6s ease-in-out 1.2s infinite alternate;
}
.upi-card::before {                                         /* the bevel: the glass is a few mm thick */
  content: ""; position: absolute; inset: 4px; border-radius: calc(1.4em - 4px); pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), .18);
  animation: ucNeon 1s linear .25s both;
}
.upi-card::after {                                          /* a soft diagonal shine */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, .10) 30%, transparent 40%);
  animation: ucFade .8s ease .9s both;
}
.uc-floor {                                                 /* the green light spilling on the "table" */
  position: absolute; left: -18%; right: -18%; bottom: -4.2em; height: 5.2em; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--neon-rgb), .9), rgba(var(--neon-rgb), .35) 35%, rgba(var(--neon-rgb), .08) 60%, transparent 72%);
  filter: blur(12px); mix-blend-mode: screen; animation: ucFade 1s ease .9s both;
}
.uc-avatar {
  width: 4.2em; height: 4.2em; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(var(--neon-rgb), 1);
  box-shadow: 0 0 10px rgba(var(--neon-rgb), .75), 0 0 0 4px rgba(255, 255, 255, .06);
}
.uc-name {
  display: flex; align-items: center; gap: .3em; font-weight: 700; font-size: 1.22em; color: #fff;
  text-shadow: 0 0 10px rgba(var(--neon-rgb), .55);
}
.uc-tick { width: 1em; height: 1em; flex: none; filter: drop-shadow(0 0 4px rgba(60, 150, 255, .7)); }
.uc-title {                                                 /* bright white, easy to read on the clear glass */
  margin-top: -.4em; font-size: .9em; font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .45), 0 0 6px rgba(255, 255, 255, .45), 0 0 12px rgba(var(--neon-rgb), .35);
}
.uc-pay {                                                   /* logo, QR code, UPI ID on the clear glass, a thin outline */
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6em;
  padding: .85em .75em .75em; border-radius: 1em;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), .6), 0 0 10px rgba(var(--neon-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.uc-logo { filter: drop-shadow(0 0 4px rgba(0, 0, 0, .35)); }
.uc-code {                                                  /* only the QR code on white (with the white border QR codes need) */
  position: relative; width: 80%; border-radius: .45em; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1.5px rgba(var(--neon-rgb), .55), 0 6px 18px rgba(0, 0, 0, .35);
}
.uc-code.see { background: transparent; box-shadow: none; overflow: visible; }  /* see-through version: white squares on the glass */
.uc-code.see img { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .45)); }
.uc-code img { display: block; }
.uc-id {                                                    /* the UPI ID: bright white, easy to read and to check */
  display: flex; align-items: center; justify-content: center; gap: .35em; font-size: .88em; font-weight: 600; color: #fff;
  overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .45), 0 0 6px rgba(255, 255, 255, .45);
}
.uc-scan {                                                  /* the neon line that keeps scanning the QR code */
  position: absolute; left: 4%; right: 4%; top: 6%; height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 30%, rgba(var(--neon-rgb), 1) 50%, #fff 70%, transparent);
  box-shadow: 0 0 10px 2px rgba(var(--neon-rgb), .9), 0 0 24px 5px rgba(var(--neon-rgb), .4);
  animation: ucScan 2.2s ease-in-out 1.2s infinite both;
}
.uc-foot {                                                  /* the green bar at the bottom: "Scan with any UPI app" + the apps */
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: .4em; margin-top: .15em;
  padding: .55em .6em .6em; border-radius: .95em;
  background: linear-gradient(100deg, rgba(var(--neon-rgb), .55), rgba(var(--neon-rgb), .22) 55%, rgba(20, 110, 90, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 12px rgba(var(--neon-rgb), .25);
}
.uc-line { font-size: .76em; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 6px rgba(255, 255, 255, .4); }
.upi-card > * { animation: ucPart .45s ease both; }
.upi-card > :nth-child(1) { animation-delay: .35s; }
.upi-card > :nth-child(2) { animation-delay: .45s; }
.upi-card > :nth-child(3) { animation-delay: .52s; }
.upi-card > :nth-child(4) { animation-delay: .6s; }
.upi-card > :nth-child(5) { animation-delay: .75s; }
.upi-card > :nth-child(6) { animation-delay: .85s; }

/* ---- a theme card in the middle (Buy theme): the same glass; its back is "Before you pay" ---- */
.uc-overlay .tcard { gap: .7em; }
.tc-pic {
  width: 100%; border-radius: .8em; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), .6), 0 10px 24px rgba(0, 0, 0, .45);
}
.uc-overlay .tc-pic img { width: 100%; height: auto; }
/* the robot holding the real player, see-through, standing on the card's glass (inside the card) */
.tc-robot { position: relative; width: 100%; aspect-ratio: 1320 / 940; container-type: inline-size; margin-bottom: -.3em; }
.uc-overlay .tc-robot img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.tc-pglass {                                                /* under the player's glass: frost + the theme's glass tint */
  position: absolute; left: 4.167%; top: 5.426%; width: 40.909%; height: 35%; border-radius: .8cqw;
  background: var(--tint); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.tc-name, .tc-safe-title {
  font-weight: 700; font-size: 1.3em; color: #fff; margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(var(--neon-rgb), .55);
}
.tc-text, .tc-safe-text, .tc-list, .tc-not {
  margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .45);
}
.tc-text { font-size: .8em; text-align: center; line-height: 1.4; }
.tc-price { display: flex; align-items: center; gap: .45em; }
.tc-price span {
  font-size: .9em; font-weight: 800; padding: .25em .9em; border-radius: 999px;
  color: #04240f; background: rgb(var(--neon-rgb)); box-shadow: 0 0 14px rgba(var(--neon-rgb), .6);
}
.tc-price .tc-save { color: #fff; background: #e5484d; box-shadow: 0 0 12px rgba(229, 72, 77, .5); }
.tc-buy, .tc-go {
  display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1em; text-decoration: none;
  padding: .65em 1.7em; border-radius: 999px; color: #04240f;
  background: linear-gradient(180deg, #9dffcb, rgb(var(--neon-rgb)));
  box-shadow: 0 0 18px rgba(var(--neon-rgb), .65), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tc-buy:hover, .tc-go:hover, .tc-buy:focus-visible, .tc-go:focus-visible { transform: translateY(-1px); box-shadow: 0 0 26px rgba(var(--neon-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .7); }
.tc-cancel {
  border: 1.5px solid rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1em; padding: .6em 1.4em; border-radius: 999px;
}
.tc-cancel:hover, .tc-cancel:focus-visible { background: rgba(255, 255, 255, .14); }
.tcard.safe { align-items: stretch; gap: .65em; }
.tc-safe-title { display: flex; align-items: center; gap: .45em; font-size: 1.2em; }
.tc-safe-title svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: #ffd24f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-safe-text { font-size: .85em; font-weight: 700; }
.tc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5em; font-size: .78em; line-height: 1.4; }
.tc-list li { position: relative; padding-left: 1.4em; }
.tc-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: rgb(var(--neon-rgb)); font-weight: 700; }
.tc-list .hl { color: rgb(var(--neon-rgb)); }
.tc-not { font-size: .78em; font-weight: 700; color: #ffd24f; }
.tc-btns { display: flex; flex-direction: column-reverse; align-items: stretch; gap: .55em; margin-top: .3em; }   /* Continue first, Cancel under it */
.tc-btns .tc-go, .tc-btns .tc-cancel { width: 100%; text-align: center; }
.uc-stage.wide { width: min(100%, 24em); }                 /* a theme card: bigger, to see the theme well */
/* round close button, top right - easy to hit with a finger when the card fills a phone screen */
.uc-x {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; font: 400 30px/1 "Open Sans", sans-serif; color: #fff;
  background: rgba(8, 24, 14, .5); border: 1.5px solid rgba(var(--neon-rgb), .85);
  box-shadow: 0 0 14px rgba(var(--neon-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: ucFade .5s .35s both; transition: opacity .2s ease, background .15s ease;
}
.uc-x:hover, .uc-x:focus-visible { background: rgba(var(--neon-rgb), .25); }
/* PC / laptop: the theme card (and its "Before you pay" side) grows with the screen height, so it is easy to read */
@media (min-width: 900px) and (min-height: 600px) {
  .uc-stage.wide { font-size: clamp(15px, 2.6vh, 28px); }
  .uc-stage:not(.wide) { font-size: clamp(15px, 2.05vh, 26px); }   /* the QR card: bigger on PC / laptop screens */
}
@keyframes ucFloat { from { transform: rotateY(-8deg) rotateX(5deg) translateY(0); } to { transform: rotateY(-4deg) rotateX(3deg) translateY(-6px); } }
@keyframes ucNeon { 0% { opacity: 0; } 18% { opacity: .9; } 26% { opacity: .15; } 34% { opacity: .8; } 40% { opacity: .3; } 55%, 100% { opacity: 1; } }
@keyframes ucFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ucPart { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ucScan { 0% { top: 5%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 94%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .upi-card, .upi-card::before, .upi-card::after, .upi-card > *, .uc-floor { animation: none; }
  .uc-scan { display: none; }
}
.sp-skip {
  display: block; margin-top: 1.4em; text-align: center;
  font-size: .78em; color: #fff; opacity: .78; text-decoration: none;
}
.sp-skip:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.sp-who { display: flex; align-items: center; gap: .9em; margin-bottom: 1.1em; }
.sp-avatar {
  width: 4.6em; height: 4.6em; border-radius: 50%; object-fit: cover;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));      /* no ring - just a soft shadow, like the download logo */
}
.sp-name { font-weight: 700; font-size: 1em; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.sp-role { margin-top: .2em; font-size: .8em; opacity: .7; font-weight: 600; }
.sp-note-text p { margin: 0 0 .9em; font-size: .84em; line-height: 1.55; opacity: .92; }
.sp-note-text p:last-child { margin-bottom: 0; }

/* ---- theme cards (one row of 5 on wide screens) ---- */
.wp-title { margin: 2em 0 .3em; padding-top: 1.6em; border-top: 1px solid rgba(255,255,255,.14); font-size: 1em; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.wp-sub { margin: 0 0 1.3em; font-size: .82em; opacity: .8; }
/* each group of themes (Liquid, Sentinel ...) has a small title; the next group starts a little lower */
.wp-group { margin: 1.1em 0 .35em; font-size: .92em; font-weight: 700; letter-spacing: .04em; color: #6dff6a; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.wp-group:empty { display: none; }
.wp-more .wp-group { margin-top: 2.2em; }
/* the honest note above the themes: a soft green glass box, bigger and brighter than the text around it */
.wp-intro {
  max-width: 46em; margin: .5em auto .9em; padding: .85em 1.2em; border-radius: .9em;
  font-size: .98em; font-weight: 600; line-height: 1.55; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(var(--green-rgb),.13), rgba(var(--green-rgb),.05));
  border: 1px solid rgba(var(--green-rgb),.45); box-shadow: 0 0 18px rgba(var(--green-rgb),.18), inset 0 1px 0 rgba(255,255,255,.12);
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.wp-intro .hl { color: #6dff6a; }
.wp-grid {
  --wp-gap: calc(var(--u) * 1.2);
  display: flex; flex-wrap: wrap; justify-content: center;   /* a short last row sits in the middle */
  gap: var(--wp-gap); text-align: left;
}
.wp-grid > .wp-card { flex: 0 0 calc((100% - var(--wp-gap) * 2) / 3); min-width: 0; font-size: 1.15em; }   /* big boxes: 3 + 2 (the 2 in the middle) */
@media (max-width: 1150px) and (min-aspect-ratio: 4/5) {
  .wp-grid > .wp-card { flex-basis: calc((100% - var(--wp-gap) * 2) / 3); }               /* smaller laptops: 3 + 2 */
  .sp-row { grid-template-columns: 1fr 1fr; row-gap: calc(var(--u) * 2.2); }            /* note on top, the two boxes below */
  .sp-note { grid-column: 1 / -1; }
}
.wp-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: calc(var(--u) * .6);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.wp-click { cursor: pointer; }                               /* the whole box opens the theme's card */
.wp-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.35); box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 16px rgba(var(--green-rgb),.15); }
.wp-pic { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, rgba(30,80,40,.55), rgba(10,40,20,.45)); }
.wp-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* a theme's clip (plays like a GIF) */
.wb-pic video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--u) * .5); }
.uc-overlay .tc-pic video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.wp-pic:has(.wp-pglass) { container-type: inline-size; background: none; }   /* see-through robot: the box's own glass behind it */
.wp-pglass {                                                 /* under the player's glass in the robot picture: frost + the theme's tint */
  position: absolute; left: 3.401%; top: 6.324%; width: 49.632%; height: 48.382%; border-radius: .97cqw;
  background: var(--tint); -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
}
/* two pictures per theme: the robot (1st dot) and the theme itself, bigger (2nd dot) - they fade into each other */
.wp-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
.wp-slide.on { opacity: 1; pointer-events: auto; }
.wp-big { transform: scale(.9); }                            /* the theme picture grows into place */
.wp-big.on { transform: none; }
.wp-dots { display: flex; justify-content: center; align-items: center; gap: .5em; padding: .75em 0 .1em; }   /* under the picture, in the text area */
.wp-dot {
  position: relative; width: .5em; height: .5em; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .55); transition: width .25s ease, background .25s ease;
}
.wp-dot::before { content: ""; position: absolute; inset: -.6em -.35em; }   /* a bigger spot to tap on phones */
.wp-dot.on { width: 1.2em; background: var(--green); box-shadow: 0 0 6px rgba(var(--green-rgb), .8); }
.wp-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* dots, name, price and button on frosted glass (lighter than the picture area's clear glass, with a soft sheen),
   so the robot picture and the text are clearly apart; everything centred */
.wp-body {
  flex: 1; display: flex; flex-direction: column; text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .03)),
    rgba(20, 60, 30, .28);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.wp-grid .wp-body .wp-info { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35em .55em; padding: .35em .9em .2em; }
.wp-grid .wp-body .wp-name { flex-basis: 100%; text-align: center; font-size: .98em; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.wp-body .wp-note { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.wp-body .wp-buy { margin: .7em .9em .9em; }
@media (prefers-reduced-motion: reduce) { .wp-slide, .wp-dot { transition: none; } }
.wp-soon {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em;
  padding: .4em; text-align: center;
  font-size: .72em; font-weight: 600; opacity: .7;
}
.wp-soon svg { width: 2.2em; height: 2.2em; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* "All 5 themes" bundle card under the single themes */
.wp-bundle:empty { display: none; }
.wp-bundle {
  display: grid; grid-template-columns: 42% 1fr; gap: calc(var(--u) * 1.6); align-items: center;
  margin-top: calc(var(--u) * 1.4); padding: calc(var(--u) * .9); text-align: left;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(var(--green-rgb),.55); border-radius: calc(var(--u) * .9);
  box-shadow: 0 0 18px rgba(var(--green-rgb),.15);
}
.wb-pic img { display: block; width: 100%; border-radius: calc(var(--u) * .5); }
.wb-head { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.wb-name { font-weight: 800; font-size: 1.05em; }
.wb-save { padding: .15em .6em; border-radius: 99px; font-size: .72em; font-weight: 800; color: #fff; background: rgba(255,90,90,.85); }
.wb-text { margin: .6em 0 .9em; font-size: .82em; line-height: 1.45; opacity: .9; }
.wb-buy { display: block; margin: 0; max-width: 16em; }
@media (max-aspect-ratio: 4/5) { .wp-bundle { grid-template-columns: 1fr; } }
.wp-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3em .5em; padding: .7em .8em .3em; }
.wp-grid .wp-info { flex-direction: column; align-items: flex-start; gap: .35em; }   /* name, then the price badge - every card the same height */
.wp-grid .wp-name { width: 100%; }
.wp-name { font-size: .84em; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-price { flex: none; }
.wp-note { font-size: .74em; font-weight: 700; color: #fff; opacity: .92; white-space: nowrap; }   /* "Pay what you want" */
/* the glass card: the price big on top, "Pay what you want" under it, so "Buy theme" is the only green button */
.uc-overlay .tc-price { flex-direction: column; gap: .1em; }
.uc-overlay .tc-price span:not(.wp-note):not(.tc-save) {
  order: -1; padding: 0; background: none; box-shadow: none; color: #fff; font-size: 1.45em; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(var(--neon-rgb), .6);
}
.uc-overlay .tc-price .wp-note { font-size: .95em; padding: 0; background: none; box-shadow: none; color: #fff; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.wp-price {
  padding: .15em .6em; border-radius: 99px;
  font-size: .76em; font-weight: 800; color: #0b1f0e; background: var(--green);
  box-shadow: 0 0 8px rgba(var(--green-rgb),.4);
}
/* 1.8.8 a free theme: a big starburst "FREE!" on its picture, and the price pill bigger and brighter than "from $3" */
.wp-freebadge {
  position: absolute; top: -7%; left: -5%; width: 26%; aspect-ratio: 1; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(140,240,60,.45));
  transform: rotate(-8deg); animation: wpFreePulse 2.4s ease-in-out infinite;
}
.wp-freebadge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wp-freebadge text {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: .3px;
  fill: #fff; stroke: #1d5a06; stroke-width: 2.6px; paint-order: stroke;
}
@keyframes wpFreePulse { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .wp-freebadge { animation: none; } }
.wp-isfree { overflow: visible; }
.uc-overlay .tcard:has(.wp-freebadge) { position: relative; overflow: visible; }      /* the middle card of a free theme */
.uc-overlay .tcard .wp-freebadge { width: 19%; top: -6%; left: -6%; }
.uc-overlay .tc-price.tc-free span:not(.wp-note):not(.tc-save) { font-size: 1.15em; letter-spacing: .06em; text-transform: uppercase; color: #0b1f0e; background: #9bf03c; padding: .1em .9em; border-radius: 99px; box-shadow: 0 0 16px rgba(155,240,60,.75); }
.wp-isfree .wp-price { font-size: 1.05em; padding: .12em .9em; letter-spacing: .06em; text-transform: uppercase; background: #9bf03c; box-shadow: 0 0 14px rgba(155,240,60,.75); }
.wp-isfree .wp-buy { border-color: #9bf03c; color: #c9ff8f; }
.wp-buy {
  margin: .5em .8em .8em; padding: .45em 0;
  text-align: center; text-decoration: none; color: #fff;
  font-size: .8em; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.6); border-radius: 99px;
  transition: background .2s, border-color .2s;
}
.wp-buy:hover { background: rgba(var(--green-rgb), .2); border-color: var(--green); }

/* ---- the three steps under the theme cards (one column on phones) ---- */
.th-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); margin-top: 1.6em; text-align: left; }
.th-steps:empty { display: none; }
.th-step {
  display: flex; align-items: center; gap: .8em;
  padding: .8em 1em; font-size: .78em; line-height: 1.45;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: calc(var(--u) * .6);
}
.th-step b {
  flex: none; width: 2em; height: 2em; display: grid; place-items: center;
  border-radius: 50%; color: #0b1f0e; background: var(--green);
  box-shadow: 0 0 8px rgba(var(--green-rgb),.4);
}
.th-step .hl { color: #fff; font-weight: 700; font-size: 1.05em; }      /* step title: white and bold, not green */
.th-fine { margin: 1.1em 0 0; font-size: .72em; opacity: .7; }

/* ---- "Before you pay" safety check: a box under the steps + the same list in a window before the checkout ---- */
.safe-box {
  margin: 1.6em auto 0; max-width: 46em; padding: 1em 1.3em 1.05em;
  text-align: left;
  background: rgba(255, 196, 0, .07);
  border: 1px solid rgba(255, 210, 80, .45);
  border-radius: calc(var(--u) * .6);
  box-shadow: inset 0 0 12px rgba(255, 210, 80, .08);
}
.safe-box[hidden] { display: none; }
.safe-title { display: flex; align-items: center; gap: .5em; margin: 0 0 .6em; font-size: .86em; font-weight: 700; }
.safe-title svg { width: 1.45em; height: 1.45em; flex: none; fill: none; stroke: #ffd24f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.safe-list { margin: 0; padding: 0; list-style: none; font-size: .76em; line-height: 1.5; }
.safe-list li { position: relative; padding-left: 1.5em; margin-bottom: .35em; }
.safe-list li::before {                                   /* a small green tick in front of each line */
  content: ""; position: absolute; left: .2em; top: .45em; width: .7em; height: .38em;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
}
.safe-not { margin: .5em 0 0; font-size: .72em; font-weight: 600; color: #ffd24f; }

.safe-pop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s;
  font-size: max(calc(var(--u) * 1.3), 15px);
}
.safe-pop[hidden] { display: none; }
.safe-pop.on { opacity: 1; }
.safe-card {
  width: min(100%, 30em); padding: 1.4em 1.5em 1.3em; text-align: left;
  background: linear-gradient(160deg, rgba(22, 60, 30, .97), rgba(8, 30, 14, .97));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(8px) scale(.98); transition: transform .2s var(--ease);
}
.safe-pop.on .safe-card { transform: none; }
.safe-card .safe-title { font-size: 1.05em; }
.safe-pop-text { margin: 0 0 .7em; font-size: .8em; opacity: .85; }
.safe-card .safe-list { font-size: .8em; }
.safe-btns { display: flex; justify-content: flex-end; gap: .7em; margin-top: 1.2em; flex-wrap: wrap; }
.safe-cancel, .safe-go {
  padding: .55em 1.2em; border-radius: 99px; font: inherit; font-size: .8em; font-weight: 700; cursor: pointer; text-decoration: none;
}
.safe-cancel { color: #fff; background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); }
.safe-cancel:hover { border-color: #fff; }
.safe-go { color: #0b1f0e; background: var(--green); border: 1.5px solid var(--green); box-shadow: 0 0 10px rgba(var(--green-rgb), .4); }
.safe-go:hover { filter: brightness(1.1); }
.th-fine:empty { display: none; }

/* ---- Privacy / Terms / Refund links at the very bottom of the Support & Download panel ---- */
.legal-links {
  margin: 2.4em 0 0; padding-top: 1.2em; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .74em; display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .9em;
}
.legal-links a { color: var(--green); font-weight: 600; text-decoration: none; text-shadow: 0 0 8px rgba(var(--green-rgb),.35); }
.legal-links a:hover { color: #7dff7a; text-decoration: underline; text-underline-offset: 3px; }
.legal-links span { color: rgba(255,255,255,.5); }

/* ---- download part (as before) ---- */
.dl-block { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid rgba(255,255,255,.14); }
.dl-block-title { margin: 0 0 1.4em; font-size: 1em; font-weight: 700; letter-spacing: .03em; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.dl-cols {
  /* wide screens: version + button on the left, what's new + notes on the right */
  display: grid; grid-template-columns: 1fr 1.35fr;
  column-gap: calc(var(--u) * 3.4); align-items: center;
}

/* menu: long name on wide screens, short one on phones */
.menu .lbl-short { display: none; }
.dl-info { text-align: left; padding-left: calc(var(--u) * 3.2); border-left: 1px solid rgba(255,255,255,.14); }
.dl-info .dl-new-title { margin-top: 0; }

.dl-head { display: flex; align-items: center; justify-content: center; gap: .9em; margin-bottom: 1.4em; text-align: left; }
.dl-logo { width: 3.4em; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.dl-name { font-family: var(--font-player); font-weight: 600; font-size: 1.5em; line-height: 1.15; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.dl-version {
  display: inline-block; vertical-align: middle;
  margin-left: .4em; padding: .15em .6em;
  font-family: var(--font); font-size: .5em; font-weight: 700; letter-spacing: .04em;
  color: #0b1f0e; background: var(--green);
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(var(--green-rgb),.45);
}
.dl-date { margin-top: .3em; font-size: .8em; opacity: .75; font-weight: 600; }

/* green "New version (GLP x.y.z)" line above the Microsoft Store button */
.dl-newver {
  margin-bottom: .75em;
  color: var(--green);
  font-weight: 700; font-size: .95em; letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(var(--green-rgb),.45), 0 2px 4px rgba(0,0,0,.45);
}
.dl-newver:empty { display: none; }

.dl-btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.8em;
  color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05em; letter-spacing: .02em;
  background: rgba(var(--green-rgb), .16);
  border: 2px solid var(--green);
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(var(--green-rgb),.35), inset 0 0 12px rgba(var(--green-rgb),.15);
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.dl-btn:hover { transform: translateY(-2px); background: rgba(var(--green-rgb), .26); box-shadow: 0 0 28px rgba(var(--green-rgb),.55), inset 0 0 14px rgba(var(--green-rgb),.2); }
.dl-btn:active { transform: translateY(0); }
.dl-btn svg { width: 1.3em; height: 1.3em; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dl-small { margin-top: .8em; font-size: .78em; opacity: .75; font-weight: 600; }

.dl-new-title { margin: 2em 0 .7em; font-size: 1em; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.dl-new { margin: 0; padding: 0; list-style: none; text-align: left; }
.dl-new li {
  position: relative;
  margin: 0 0 .45em; padding-left: 1.3em;
  font-size: .86em; line-height: 1.4; opacity: .92;
}
.dl-new li::before {
  content: ""; position: absolute; left: .15em; top: .55em;
  width: .45em; height: .45em; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px rgba(var(--green-rgb),.6);
}

.dl-notes { margin: 1em 0 0; padding-top: .9em; border-top: 1px solid rgba(255,255,255,.14); text-align: left; }
.dl-notes p { margin: 0 0 .55em; font-size: .78em; line-height: 1.4; opacity: .8; }
.dl-notes p:last-child { margin-bottom: 0; }

/* ===================== RAIN ON THE GLASS ===================== */
.rain {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 25;
  pointer-events: none;
  transition: opacity .6s ease;
}

/* ===================== FLYING BIRDS (page change) ===================== */
.birds {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 30;
  pointer-events: none;
  filter: blur(.5px) drop-shadow(0 0 2px rgba(255,255,255,.3));    /* soft feather edges */
}

/* ===================== PHONES / TALL SCREENS ===================== */
/* Phones and tablets held upright: the same design, arranged as a tall poster.
   Home: big GLASS PLAYER title on top (clear leaves | frosted glass split at 42%),
   the glass player centred below it, overlapping both halves.                      */
@media (max-aspect-ratio: 4/5) {
  :root {
    --split: 42vw;
    --cardW: min(80vw, 450px);                         /* glass player width on phones */
    --gut: 16px;                                       /* side margin */
    --top: env(safe-area-inset-top, 0px);
    --bottom: env(safe-area-inset-bottom, 0px);
  }

  /* menu: one row with margins and a soft shade so it reads on any leaves */
  .menu {
    left: var(--gut); right: var(--gut);
    top: calc(var(--top) + 14px);
    justify-content: space-between; gap: 8px;
    font-size: clamp(12px, 3.6vw, 17px);
  }
  .menu::before {
    content: ""; position: fixed; left: 0; right: 0; top: 0;
    height: calc(var(--top) + 76px);
    background: linear-gradient(rgba(4, 18, 8, .6), rgba(4, 18, 8, 0));
    z-index: -1; pointer-events: none;
  }
  .menu a { padding-bottom: 8px; }
  .menu .menu-logo { padding-bottom: 0; margin: -4px 0 0; }
  .menu-logo img { width: clamp(26px, 7.5vw, 36px); }

  /* big title across the top */
  .big-title { font-size: 20vw; }
  .bt-left, .bt-right { top: calc(var(--top) + 17vh); }

  /* the player, centred below the title */
  .player { left: calc(50vw - var(--cardW) / 2); top: auto; bottom: calc(var(--bottom) + 17vh); }
  .orb {
    --orbW: calc(var(--cardW) * 1.12);                 /* orb size on phones */
    left: calc(50vw - var(--orbW) / 2); top: auto;
    bottom: calc(var(--bottom) + 17vh + var(--cardW) * .3043 - var(--orbW) / 2);
  }

  /* About: full-width frosted panel, text scrolls inside */
  .about {
    left: var(--gut); right: var(--gut); width: auto; height: auto; max-height: none;
    top: calc(var(--top) + 58px); bottom: calc(var(--bottom) + 16px);
  }
  .about-inner { padding: 22px 20px 28px; font-size: 15px; line-height: 1.45; }

  /* Features: full-width panel, each video with its text below */
  .features-scroll { top: calc(var(--top) + 56px); padding: 6px 0 calc(var(--bottom) + 24px); }
  .features { width: calc(100vw - var(--gut) * 2); padding: 20px 16px 28px; font-size: 15px; }
  .features h2 { margin-bottom: 18px; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; row-gap: 14px; margin-bottom: 30px; }
  .feature:nth-child(even) .f-video { order: 0; }
  .f-video { border-radius: 8px; }
  .f-info p { font-size: .9em; }

  /* Support & Download: full-width panel, everything in one column */
  .menu .lbl-long { display: none; }
  .menu .lbl-short { display: inline; }
  .download-scroll { top: calc(var(--top) + 56px); padding: 6px 0 calc(var(--bottom) + 24px); }
  .download { width: calc(100vw - var(--gut) * 2); padding: 24px 16px 28px; font-size: 15px; }
  .sp-row { grid-template-columns: 1fr; row-gap: 18px; }
  .sp-box { padding: 16px; border-radius: 10px; }
  .sp-badges { flex-direction: row; flex-wrap: wrap; }
  .sp-badge { flex: 1 1 auto; }
  .sp-qr { width: min(60vw, 200px); }
  .sp-avatar { width: 64px; height: 64px; }
  .wp-grid { --wp-gap: 12px; }
  .wp-grid > .wp-card { flex-basis: calc((100% - 12px) / 2); }          /* 2 per row; a lone last card sits in the middle */
  .wp-card { border-radius: 9px; }
  .wp-grid .wp-body .wp-name { white-space: normal; line-height: 1.2; }   /* longer names (Sentinel White) wrap instead of "Sentinel Wh..." */
  .th-steps { grid-template-columns: 1fr; gap: 10px; }                 /* the three steps one under another */
  .th-step { border-radius: 9px; }
  .dl-cols { display: block; }
  .dl-name { font-size: 1.3em; }
  .dl-info { padding-left: 0; border-left: 0; }
  .dl-info .dl-new-title { margin-top: 2em; }
}

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

/* Support & Download: bright, easy-to-read text on the green glass (the glass behind it a little darker) */
.download {
  -webkit-backdrop-filter: blur(calc(var(--u) * 2.6)) saturate(1.4) brightness(.62);
          backdrop-filter: blur(calc(var(--u) * 2.6)) saturate(1.4) brightness(.62);
}
.download .sp-box, .download .wp-card, .download .wp-bundle, .download .th-step, .download .safe-box { background-color: rgba(0, 20, 8, .22); }
.download .sp-sub, .download .sp-box-text, .download .sp-note-text p, .download .sp-role, .download .wp-sub,
.download .wb-text, .download .th-fine, .download .sp-secure, .download .sp-skip, .download .sp-upi, .download .sp-upi-id,
.download .dl-date, .download .dl-small, .download .dl-notes p, .download .dl-new li, .download .safe-box li, .safe-pop-text {
  opacity: 1; color: #fff; font-weight: 600;
  text-shadow: 0 0 2px rgba(0,0,0,.7), 0 1px 6px rgba(0,0,0,.6);
}

/* ---- 1.4: the home page player comes alive (main.js section 5b) ----
   Play / Pause works, the vinyl spins up and down, the tonearm lifts, the timeline is a liquid glass drop, the
   buttons get a glass drop under the mouse, and the angel & knight play like in the real player. */
.vinyl.js-spin { animation: none; }
.arm { transition: opacity .25s ease; }
.arm-park { opacity: 0; }
.player.paused .arm-play { opacity: 0; }
.player.paused .arm-park { opacity: 1; }
.player .ic-pause { display: none; }
.player.playing .ic-pause { display: block; }
.player.playing .ic-play { display: none; }
.player.live .pbtn, .player.live .seek { cursor: pointer; }
.knight {
  left: calc(var(--k) * 2); top: calc(var(--k) * 180); width: calc(var(--k) * 122); height: calc(var(--k) * 98.57);
  background: url("../images/knight-web.webp") 0 0 / 1200% 1000% no-repeat;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
  filter: drop-shadow(0 calc(var(--k) * 1) calc(var(--k) * 2) rgba(0,0,0,.35));
}
.knight.ready { opacity: 1; }
/* the Features page shows the Walking Man instead (js/main.js makes him) */
.walker { position: absolute; left: var(--k); top: calc(var(--k) * 178); width: calc(var(--k) * 123); height: calc(var(--k) * 101); overflow: hidden; opacity: 0; transition: opacity .6s ease; pointer-events: none; filter: drop-shadow(0 calc(var(--k) * 1) calc(var(--k) * 2) rgba(0,0,0,.35)); }
.wk-snow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.wk-man { position: absolute; left: 0; top: calc(var(--k) * 12); width: calc(var(--k) * 54); height: calc(var(--k) * 80); background: url("../images/walker-web.webp") 0 0 / 1000% 600% no-repeat; }
body[data-page="features"] .player.has-walker .walker.ready { opacity: 1; }
body[data-page="features"] .player.has-walker .knight.ready { opacity: 0; }
/* the crystal timeline (1.5.1, like the real player): a clear crystal rod with a thin shine on top and a line of light
   along its lower edge, clear crystal beads with a crescent of light inside, a very small soft glow, and a fine groove
   for the part still to play (it never shows through a bead) */
.player.live .seek-line, .player.live .seek-fill, .player.live .seek-dot { display: none; }
.seek-glass { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.seek-glass line { fill: none; }
.seek-glass .sg-groove { stroke: rgba(0,0,0,.27); stroke-width: 1.15; }
.seek-glass .sg-groove-lite { stroke: rgba(255,255,255,.24); stroke-width: .6; }
.seek-glass .sg-glow { stroke: #fff; stroke-linecap: round; }
.seek-glass .sg-glow1 { stroke-width: 6.9; stroke-opacity: .03; }
.seek-glass .sg-glow2 { stroke-width: 4.2; stroke-opacity: .055; }
.seek-glass .sg-glow3 { stroke-width: 2.75; stroke-opacity: .08; }
.seek-glass .sg-body { fill: rgba(255,255,255,.12); }
.seek-glass .sg-top { stroke: rgba(255,255,255,.67); stroke-width: .55; }
.seek-glass .sg-low { stroke: rgba(255,255,255,.43); stroke-width: 1.15; }
.seek-glass .sg-lowc { stroke: rgba(255,255,255,.98); stroke-width: .62; }
.seek-glass .sg-rim { fill: none; stroke: rgba(255,255,255,.8); stroke-width: .7; stroke-linejoin: round; }
.seek-glass .sg-edge { fill: none; stroke: rgba(0,0,0,.24); stroke-width: .32; }
.seek-glass .sg-beads circle { fill: none; stroke: #fff; }
.seek-glass .sg-beads path { fill: none; stroke: #fff; stroke-linecap: round; }
.seek-glass .sg-beads ellipse { fill: #fff; opacity: .96; }
/* glass drop under a button (the real player's Button Style 1) */
.pbtn svg { position: relative; z-index: 1; will-change: transform; }
.gdrop {
  position: absolute; left: 50%; top: 50%; width: calc(var(--k) * var(--dd)); height: calc(var(--k) * var(--dd));
  margin: calc(var(--k) * var(--dd) / -2) 0 0 calc(var(--k) * var(--dd) / -2);
  border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0); will-change: transform, opacity;
  background:
    radial-gradient(ellipse 60% 30% at 50% 82%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 55%, rgba(0,0,0,.10) 80%, rgba(255,255,255,.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 calc(var(--k) * 1.6) 1px rgba(255,255,255,.75),
              inset 0 calc(var(--k) * -1.5) calc(var(--k) * 3) rgba(255,255,255,.25),
              0 calc(var(--k) * 4) calc(var(--k) * 9) rgba(0,0,0,.32);
}
.gdrop::before {             /* the glare, top left */
  content: ""; position: absolute; left: 16%; top: 9%; width: 46%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); transform: rotate(-24deg);
}
.gdrop::after {              /* a small light, bottom right */
  content: ""; position: absolute; right: 17%; bottom: 13%; width: 16%; height: 9%; border-radius: 50%;
  background: rgba(255,255,255,.7); filter: blur(.5px); transform: rotate(-35deg);
}
/* ===================== MENU: the liquid glass pill =====================
   A clear glass capsule behind the menu words: it sits on the page you are on, follows the mouse to the item you point
   at - its front edge runs ahead and the back edge catches up, so it stretches like liquid - and settles with a small
   jelly bounce.  The word under it grows a little, as if seen through the glass.  (main.js section 2b moves it.) */
.menu-pill {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; pointer-events: none;
  border-radius: 99px; opacity: 0; transform-origin: 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.16) 100%);
  -webkit-backdrop-filter: blur(2px) saturate(1.8) brightness(1.3);
          backdrop-filter: blur(2px) saturate(1.8) brightness(1.3);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.9),           /* the bright rim along the top */
    inset 0 -2px 3px rgba(255,255,255,.35),           /* light caught in the bottom of the glass */
    inset 0 0 0 1px rgba(255,255,255,.38),            /* the glass edge */
    inset 0 0 10px rgba(255,255,255,.12),
    0 4px 12px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.25);
  transition: opacity .3s;
}
.menu-pill::before {                                  /* the shine on the top half */
  content: ""; position: absolute; left: 12%; right: 12%; top: 8%; height: 34%; border-radius: 99px;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0));
}
.menu-pill.on { opacity: 1; }
.menu.has-pill .menu-bar { opacity: 0; }              /* the pill shows where you are - no underline as well */
.menu a { transition: color .25s, text-shadow .25s, transform .3s var(--ease); }
.menu a.in-pill { transform: scale(1.07); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* ===================== MENU: the logo on its own - a glass orb with a green neon orbit =====================
   The frosted bar holds only the words; the logo sits beside it in its own round glass, and one bright green light
   with a fading tail runs round its edge, like the site's neon lines. */
.menu { --orb: max(calc(var(--u) * 3.9), 40px); }
.menu .menu-logo {
  position: relative; display: grid; place-items: center;
  width: var(--orb); height: var(--orb); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), rgba(6,22,13,.62) 72%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 6px rgba(255,255,255,.08);
}
.menu .menu-logo img { position: relative; z-index: 3; width: 98%; margin-top: 5%; }   /* the logo's glass circle fills the orb right up to the green ring (the picture has its own shadow room below) */
.orb-glow, .orb-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.orb-glow i, .orb-ring i {
  position: absolute; inset: 0; border-radius: 50%;
  --rw: max(2.5px, calc(var(--orb) * .065));                     /* ring thickness */
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--rw) - 1px), #000 calc(100% - var(--rw)));
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--rw) - 1px), #000 calc(100% - var(--rw)));
  background: conic-gradient(#22e61e00 0 45%, #22e61e55 75%, #5dff5a 96%, #eaffea 99%, #22e61e00 99.5%);
  animation: orbSpin 2.6s linear infinite;
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
.orb-ring { filter: drop-shadow(0 0 3px #22e61e) drop-shadow(0 0 7px rgba(var(--green-rgb),.7)); }
.orb-glow { inset: -4px; filter: blur(6px); opacity: .9; }
.orb-glow i { --rw: calc(var(--orb) * .2); }

/* computers and landscape: the frosted bar starts after the logo (HOME stays where it was) */
@media (min-aspect-ratio: 4/5) {
  .menu {
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-left: 0; margin-left: calc(var(--u) * -.7);
  }
  .menu::after {
    content: ""; position: absolute; z-index: -2; pointer-events: none;
    top: 0; bottom: 0; right: 0; left: calc(var(--orb) + var(--u) * .8);
    border-radius: 99px;
    background: rgba(8, 26, 16, .42);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12);
  }
  .menu .menu-logo { margin-top: calc(var(--u) * -.825); margin-bottom: calc(var(--u) * -.475); margin-right: calc(var(--u) * -1.5); }   /* centred on the bar, not on the words */
}
@media (max-aspect-ratio: 4/5) { .menu { --orb: clamp(30px, 8.6vw, 40px); } }
@media (prefers-reduced-motion: reduce) { .orb-glow i, .orb-ring i { animation: none; } }
/* ===================== DOWNLOAD: system requirements (small glass box under the button) ===================== */
.dl-req {
  display: inline-block; margin-top: 1em; padding: .75em 1.3em; max-width: 30em; text-wrap: balance;
  font-size: .86em; line-height: 1.5; font-weight: 600; color: #fff;
  border-radius: .9em; background: rgba(0, 20, 8, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  text-shadow: 0 0 2px rgba(0,0,0,.7), 0 1px 6px rgba(0,0,0,.6);
}
.dl-req:empty { display: none; }
.dl-req .hl:first-child { display: inline-block; margin-bottom: .2em; font-size: 1.12em; font-weight: 700; }   /* the title */

/* the menu bar (header) stops growing on big screens: its own size unit is capped at 14.4 px (menu text about 19 px).
   Smaller screens keep the menu exactly as before; page text, panels and the big title keep growing as before. */
.menu { --u: min(1vw, 1.7778vh, 14.4px); }

/* ===== 2026-10-30 redesign (applied 2026-10-31): Download first, then Support in two clear paths ===== */
/* Download first - no divider above it; the divider now opens the Support part below */
.download > .dl-block { margin-top: .3em; border-top: 0; padding-top: 0; }
.download > .sp-title { margin-top: 2.4em; padding-top: 1.5em; border-top: 1px solid rgba(255,255,255,.14); }

/* ===== Download page tidy-up + Support in two clear paths ===== */
/* Download: no second "DOWNLOAD GLASS PLAYER" line under the page title, both columns start at the top */
.download > .dl-block > .dl-block-title { display: none; }
.download > .dl-block .dl-cols { align-items: start; }
.download > .dl-block .dl-main { padding-top: .2em; }

/* intro: avatar, name, one short line, Follow on X */
.sp2-intro { display: flex; align-items: center; gap: .9em; max-width: 46em; margin: 0 auto 1.4em; text-align: left; }
.sp2-intro .sp-avatar { width: 3.2em; height: 3.2em; flex: none; }
.sp2-intro-text { flex: 1; min-width: 0; }
.sp2-lead { margin: .2em 0 0; font-size: .86em; line-height: 1.45; opacity: .92; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.sp2-intro .sp-x { margin-top: 0; flex: none; }

/* the two paths */
.sp2-paths { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); max-width: 46em; margin: 0 auto; text-align: left; }
.sp2-card {
  display: flex; flex-direction: column; padding: 1.3em 1.35em 1.15em;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: calc(var(--u) * .9);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.sp2-tag {
  display: inline-flex; align-items: center; gap: .45em; align-self: flex-start;
  font-size: .68em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green);
}
.sp2-tag svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* "Outside India?" and "From India?": bigger, so visitors find their box at once. The space under "From India?" keeps both box titles on one line */
.sp2-where { font-size: .92em; margin-bottom: 1.37em; }
.sp2-world .sp2-where { margin-bottom: 0; }
.sp2-tag-small { margin-top: .35em; line-height: 1.5; }
@media (max-aspect-ratio: 4/5), (max-width: 760px) { .sp2-where { margin-bottom: 0; } }
.sp2-rupee { font-size: 1.3em; line-height: 1; font-weight: 800; }
.sp2-title { margin: .35em 0 .45em; font-size: 1.25em; font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.45); }
.sp2-text { margin: 0 0 1.1em; font-size: .82em; line-height: 1.5; opacity: .92; }
/* the ONE real button of the "Buy a theme" path */
.sp2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; align-self: stretch;
  padding: .75em 1.4em; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: .95em; color: #04240f;
  background: linear-gradient(180deg, #9dffcb, var(--green, #22e61e));
  box-shadow: 0 0 18px rgba(var(--green-rgb), .45), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sp2-btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sp2-btn:hover, .sp2-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 0 26px rgba(var(--green-rgb), .7), inset 0 1px 0 rgba(255,255,255,.7); outline: none; }
/* the payment methods: a quiet line of text, clearly NOT buttons */
.sp2-pay { margin: .95em 0 .5em; font-size: .72em; line-height: 1.5; opacity: .85; text-align: center; }
.sp2-pay .sp-badges { display: inline; margin: 0; }
.sp2-pay .sp-badge { display: inline; padding: 0; border: 0; background: none; border-radius: 0; font-size: 1em; font-weight: 700; }
.sp2-pay .sp-badge + .sp-badge::before { content: " · "; font-weight: 400; opacity: .7; }
.sp2-world .sp-secure { justify-content: center; margin-top: auto; padding-top: .3em; }
/* India: the QR box in the middle */
.sp2-india .sp-qr { width: min(100%, 9.5em); margin: 0 auto .6em; }
/* the long note: only for those who want to read it */
.sp2-story { max-width: 46em; margin: 1.1em auto 0; text-align: left; }
.sp2-story summary {
  cursor: pointer; display: inline-block; font-size: .8em; font-weight: 700; color: var(--green); list-style: none;
  padding: .3em .1em;
}
.sp2-story summary::-webkit-details-marker { display: none; }
.sp2-story summary::before { content: "+ "; }
.sp2-story[open] summary::before { content: "− "; }
.sp2-story .sp-note-text { margin-top: .6em; padding: 1em 1.2em; border-radius: calc(var(--u) * .7); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .sp2-paths { grid-template-columns: 1fr; }
  .sp2-intro { flex-wrap: wrap; }
}
.sp2-pay .sp-badges { white-space: nowrap; }
/* the payment methods bigger and brighter - on their own line, still plain text (not buttons) */
.sp2-pay { margin: 1em 0 .55em; font-size: .78em; opacity: 1; }
.sp2-pay > span:first-child { display: block; margin-bottom: .3em; opacity: .8; }
.sp2-pay .sp-badges { display: block; }
.sp2-pay .sp-badge { font-size: 1.32em; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); letter-spacing: .01em; }
.sp2-pay .sp-badge + .sp-badge::before { content: "  ·  "; white-space: pre; color: var(--green); font-weight: 800; opacity: 1; }
/* all original texts back - the note as a readable block above the two paths */
.sp2-note { max-width: 46em; margin: 0 auto 1.6em; text-align: left; }
.sp2-note .sp-who { margin-bottom: .9em; }
.sp2-note .sp-who > div { flex: 1; min-width: 0; }
.sp2-note .sp-x { margin-top: 0; flex: none; }
.sp2-note .sp-note-text { columns: 2; column-gap: 2.2em; }
.sp2-note .sp-note-text p { break-inside: avoid; }
.sp2-world .sp-abroad { margin: .1em 0 .9em; font-size: .8em; }
.sp2-world .sp2-text { margin-bottom: .2em; }
.sp2-pay { margin: .35em 0 1em; text-align: left; }
.sp2-world .sp-secure { justify-content: center; margin-top: .9em; padding-top: 0; }
.sp2-india .sp2-text { margin: .3em 0 0; text-align: center; }
@media (max-aspect-ratio: 4/5), (max-width: 760px) { .sp2-note .sp-note-text { columns: 1; } }
.sp2-pay .sp-badges { white-space: normal; }
.sp2-pay .sp-badge { white-space: nowrap; }

/* 2026-11-02 phones: the two payment boxes were wider than the panel ("Credit / Debit card" could not wrap, and a grid
   column is never narrower than its widest line) - the panel cut off their right side.  The columns now never grow
   past the panel, and on narrow screens a payment name may wrap. */
.sp2-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp2-card { min-width: 0; overflow-wrap: anywhere; }
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .sp2-paths { grid-template-columns: minmax(0, 1fr); }
  .sp2-pay .sp-badge { display: inline-block; white-space: nowrap; }   /* a whole payment name moves to the next line */
}

/* 2026-11-02 tablets (touch screens 700 px and wider): the text followed the screen width down to the phone sizes
   (12 - 15 px) - small on a big screen held at arm's length.  Only the base size of each part is raised; phones (narrower)
   and PCs / laptops (mouse) keep theirs. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) {
  .menu { font-size: max(calc(var(--u) * 1.36), 18px); }
  .about-inner { font-size: max(calc(var(--u) * 1.27), 18px); }
  .features { font-size: max(calc(var(--u) * 1.3), 18px); }
  .download { font-size: max(calc(var(--u) * 1.3), 18px); }
}

/* 2026-11-06 phones, tablets and phones on their side: readable small text, buttons a finger can hit, a player that is not too small */
.song-hint { font-size: max(calc(var(--k) * 10.5), 9.5px); }
/* the name check before the QR code never gets cut at the top of its box */
.qr-check { gap: .18em; padding: .35em .5em; }
/* touch screens: each player button answers in a wider area than its icon (the icons stay the same) */
@media (pointer: coarse) {
  .pbtn::after { content: ""; position: absolute; inset: -11px; }
  .legal-links a { display: inline-block; padding: .5em .2em; }
}
/* screens up to tablet size: the smallest texts have a floor (the rest of the text is not touched) */
@media (max-width: 1100px) {
  .dl-version { font-size: max(11px, .66em); }
  .sp-x, .sp2-tag, .sp-secure, .qr-btn, .th-fine, .safe-not, .sp-upi-id, .wp-note, .wp-price, .legal-links, .th-step, .safe-list { font-size: max(12px, .7em); }
  .download .dl-small, .download .dl-notes p { font-size: max(12px, .78em); }
  .about-credits { font-size: max(11.5px, .75em); }
  .qr-check-title { font-size: 12px; }
  .qr-check-text, .qr-check-id { font-size: 11px; }
  .sp2-india .sp-qr { width: min(100%, max(9.5em, 205px)); }
}
/* narrow screens on their side: one column on the Download part, so its button and text are not squeezed */
@media (max-width: 900px) {
  .dl-cols { display: block; }
  .dl-info { padding-left: 0; border-left: 0; }
  .dl-info .dl-new-title { margin-top: 2em; }
}
/* phones and upright tablets: the QR box has room for the name check */
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .sp2-india .sp-qr { width: min(100%, 16em); }
}
/* phones on their side: the player was only 200 px wide */
@media (max-height: 479px) and (min-aspect-ratio: 4/5) {
  :root { --cardW: min(36vw, 300px); }
}
/* tablets on their side: a bigger player for fingers */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-aspect-ratio: 1/1) {
  :root { --cardW: max(calc(var(--u) * 30.2), 400px); }
}