/* Gargoyle v2: media library, boat player, profiles, sign-in, admin.
   Same units as style.css: 1rem = 16px on the 1920x1080 kiosk viewport; phones use 16px. */

input, textarea { -webkit-user-select: text; user-select: text; font: inherit; }
code { font-family: 'DejaVu Sans Mono', monospace; font-size: .92em; background: rgba(4, 19, 29, .6); padding: .1em .4em; border-radius: .4em; color: var(--ink-hi); }
body[data-route="media"] #example-mark, body[data-route="profile"] #example-mark, body[data-route="admin"] #example-mark, body.is-login #example-mark { display: none; }

/* ---------- avatar / user chip ---------- */
.avatar { --ac: var(--teal-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ac) 70%, #fff), var(--ac) 55%, color-mix(in srgb, var(--ac) 60%, #000));
  color: #04131d; font-weight: 800; font-size: 1.5rem; box-shadow: 0 0 0 .2rem rgba(4, 19, 29, .6), 0 .3rem 1rem rgba(0, 0, 0, .35); }
.avatar.xl { width: 8rem; height: 8rem; font-size: 3.6rem; }
.avatar .av-ic { width: 66%; height: 66%; stroke-width: 1.8; }
.avatar .av-ic .f { fill: currentColor; stroke: none; }
.avatar.xl .av-ic { stroke-width: 1.5; }
.userchip { display: inline-flex; align-items: center; gap: .8rem; padding: .35rem 1.2rem .35rem .35rem; border-radius: 999px; background: rgba(4, 19, 29, .55);
  border: 1px solid rgba(207, 232, 239, .2); font-size: 1.4rem; font-weight: 600; white-space: nowrap; min-height: 4rem; }
.tb-pills + .userchip { margin-left: 0; }
.page-top .userchip { margin-left: 1.2rem; }
.userchip.is-boat > span:not(.avatar) { color: #f3d59a; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 4rem; padding: 0 1.5rem; border-radius: 1.1rem;
  background: rgba(207, 232, 239, .07); border: 1.5px solid rgba(207, 232, 239, .2); font-size: 1.35rem; font-weight: 600; color: var(--ink-hi); white-space: nowrap; }
.btn .ic { width: 1.7rem; height: 1.7rem; color: var(--teal); }
.btn.primary { background: linear-gradient(160deg, rgba(43, 179, 192, .45), rgba(29, 106, 128, .55)); border-color: var(--teal); }
.btn.primary .ic { color: #e6fffb; }
.btn.danger { border-color: rgba(255, 140, 120, .55); color: #ffd9d2; background: rgba(70, 30, 30, .55); }
.btn.danger .ic { color: #ffb3a6; }
.btn.on .ic { color: #ff6b9a; }
.btn.sm { min-height: 3.2rem; font-size: 1.1rem; padding: 0 1rem; border-radius: .9rem; }
.btn.sm .ic { width: 1.35rem; height: 1.35rem; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.big { min-height: 6.2rem; padding: 0 2rem; font-size: 1.6rem; justify-content: flex-start; text-align: left; border-radius: 1.4rem; }
.btn.big .ic { width: 2.6rem; height: 2.6rem; }
.btn.big small { display: block; font-size: 1.05rem; font-weight: 400; color: var(--ink-mid); margin-top: .15rem; }
.btn.boatbtn { background: rgba(232, 176, 74, .14); border-color: rgba(232, 176, 74, .7); }
.btn.boatbtn .ic { color: #f3d59a; }
.link { color: var(--teal); font-size: 1.15rem; text-decoration: underline; text-underline-offset: .2em; padding: .4rem; }
.ibtn { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-mid); border: 1px solid transparent; }
.ibtn .ic { width: 1.8rem; height: 1.8rem; }
.ibtn:hover { background: rgba(207, 232, 239, .08); }
.ibtn.on { color: #ff6b9a; }
.ibtn.boatb { color: #f3d59a; border-color: rgba(232, 176, 74, .35); }
.ibtn:disabled { opacity: .25; }
.ctrl.sm { width: 3.8rem; height: 3.8rem; }
.ctrl.sm .ic { width: 1.6rem; height: 1.6rem; }
.ctrl.stop .ic { color: #ffb3a6; }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; font-weight: 600; letter-spacing: .04em; padding: .3rem .8rem; border-radius: 999px;
  background: rgba(95, 224, 212, .14); border: 1px solid rgba(95, 224, 212, .45); color: #d9fffa; white-space: nowrap; }
.tag.dim { background: rgba(207, 232, 239, .06); border-color: rgba(207, 232, 239, .18); color: var(--ink-mid); font-weight: 500; }
.tag.boatonly { background: rgba(232, 176, 74, .16); border-color: rgba(232, 176, 74, .6); color: #f6dca8; }
.tag .ic { width: 1.1rem; height: 1.1rem; }

/* ---------- boat now-playing card ---------- */
.boatcard { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 1.8rem; padding: 1.4rem 1.8rem; border-color: rgba(232, 176, 74, .35);
  background: linear-gradient(100deg, rgba(60, 44, 14, .55), rgba(9, 36, 50, .9) 40%); }
.boatcard.idle, .boatcard.offline { grid-template-columns: 5rem 1fr; padding: 1.1rem 1.6rem; background: var(--card-bg); border-color: var(--line); }
.bc-art { width: 7.5rem; height: 7.5rem; border-radius: 1.1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(230, 246, 250, .6); }
.idle .bc-art, .offline .bc-art { width: 5rem; height: 5rem; background: rgba(207, 232, 239, .06) !important; color: #f3d59a; }
.offline .bc-art { color: var(--ink-lo); }
.bc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-art .ic { width: 2.8rem; height: 2.8rem; }
.bc-main { min-width: 0; }
.bc-lab { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: #e9c27a; }
.bc-lab .ic { width: 1.3rem; height: 1.3rem; }
.offline .bc-lab, .idle .bc-lab { color: var(--ink-lo); }
.bc-title { display: block; font-size: 2rem; color: var(--ink-hi); margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idle .bc-title, .offline .bc-title { font-size: 1.5rem; }
.bc-sub { display: block; font-size: 1.2rem; color: var(--ink-mid); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-seek { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-top: .8rem; font-size: 1.05rem; color: var(--ink-lo); font-variant-numeric: tabular-nums; }
.seekbar { padding: 1rem 0; cursor: pointer; }
.seekbar .prog { margin: 0; height: .6rem; }
.boatcard .prog span { background: linear-gradient(90deg, #c98f2c, #f3c96f); }
.bc-ctrls { display: flex; align-items: center; gap: .8rem; }
.vol { display: inline-flex; align-items: center; gap: .4rem; margin-left: .8rem; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.volv { min-width: 2.6rem; text-align: center; font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--ink-mid); }

/* ---------- library ---------- */
body[data-route="media"] .page-body { grid-template-rows: auto 1fr; align-content: start; }
.library .media-head { position: static; } /* v18: scrolls away with page */
.libbody { margin-top: .4rem; }
.rowh { display: flex; align-items: center; gap: .7rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-lo); font-weight: 600; margin: 2rem 0 1.1rem; }
.rowh h3, .rowh h2 { font: inherit; margin: 0; color: inherit; letter-spacing: inherit; }
.rowh small { font-size: 1rem; color: var(--ink-lo); opacity: .75; letter-spacing: .05em; }
.rowh .ic { width: 1.4rem; height: 1.4rem; color: #ff6b9a; }
.rowh.split { justify-content: space-between; flex-wrap: wrap; }
.card > .rowh.split:first-child { margin-top: 0; }
.mgrid.posters { grid-template-columns: repeat(7, 1fr); margin-top: 0; }
.mgrid.albums { grid-template-columns: repeat(6, 1fr); margin-top: 0; }
.mgrid.cont { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.mgrid.cont .cover img { object-position: 50% 22%; }
.mcard { position: relative; text-align: left; }
.mcard .cover { position: relative; overflow: hidden; height: auto; aspect-ratio: 16 / 9; }
.mcard .cover.tall { aspect-ratio: 2 / 3; }
.mcard .cover.square { aspect-ratio: 1; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .ph .ic { width: 3rem; height: 3rem; }
.mcard .tag.boatonly { position: absolute; left: .7rem; bottom: .7rem; top: auto;   /* bottom: poster art prints the title at the top */ font-size: .9rem; padding: .25rem .6rem; background: rgba(40, 28, 8, .88); }
.favdot { position: absolute; right: .7rem; top: .7rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(4, 19, 29, .75); display: flex; align-items: center; justify-content: center; color: #ff6b9a; }
.favdot .ic { width: 1.3rem; height: 1.3rem; }
.prog.thin { height: .35rem; margin: 0; border-radius: 0; }
.mcard > .prog.thin { position: relative; }
.mcard .meta .prog.thin { margin-top: .6rem; border-radius: .2rem; }
.mcard:hover { border-color: rgba(95, 224, 212, .5); }

.tlist { display: flex; flex-direction: column; }
.trow { display: grid; grid-template-columns: 3rem 1fr auto 5rem auto; align-items: center; gap: 1rem; padding: .5rem .8rem; border-radius: 1rem; min-height: 5rem; }
.trow + .trow { border-top: 1px solid rgba(207, 232, 239, .07); }
.trow.playing { background: rgba(95, 224, 212, .1); }
.trow .tn { text-align: center; font-size: 1.2rem; color: var(--ink-lo); font-variant-numeric: tabular-nums; }
.trow .tn .ic { width: 1.6rem; height: 1.6rem; color: var(--teal); margin: 0 auto; }
.trow .tt { min-width: 0; }
.trow .tt b { display: block; font-size: 1.4rem; color: var(--ink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .tt span { display: block; font-size: 1.1rem; color: var(--ink-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .td { text-align: right; font-size: 1.15rem; color: var(--ink-lo); font-variant-numeric: tabular-nums; }
.trow .tact { display: flex; gap: .3rem; }
.trow:not(:has(.tag)) { grid-template-columns: 3rem 1fr 5rem auto; }
.lbtns { display: flex; gap: .8rem; flex-wrap: wrap; }

.pllist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.plcard { display: flex; align-items: center; gap: 1.2rem; padding: 1rem; border-radius: 1.25rem; background: rgba(207, 232, 239, .05); border: 1px solid var(--line); text-align: left; }
.plart { width: 6rem; height: 6rem; border-radius: .9rem; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: rgba(95, 224, 212, .12); flex-shrink: 0; }
.plart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plart img:only-child { grid-column: 1 / -1; grid-row: 1 / 3; }
.plart .ph { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: var(--teal); }
.plart .ph .ic { width: 2.4rem; height: 2.4rem; }
.plcard .meta b { display: block; font-size: 1.4rem; color: var(--ink-hi); }
.plcard .meta span { font-size: 1.05rem; color: var(--ink-lo); }

.empty { font-size: 1.3rem; color: var(--ink-mid); padding: 1.5rem 0; }
.empty .ic { width: 1.4rem; height: 1.4rem; vertical-align: -.25rem; display: inline-block; color: var(--teal); }
.empty.big { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 4rem 1rem; }
.empty.big > .ic { width: 4rem; height: 4rem; }
.empty.big b { font-size: 1.8rem; color: var(--ink-hi); }
.empty.big span { max-width: 40rem; line-height: 1.45; }

/* ---------- detail pages ---------- */
.detailpage .page-body { grid-template-columns: 1fr; align-content: start; }
.detail { display: grid; grid-template-columns: 26rem 1fr; gap: 3rem; align-items: start; }
.detail .cover.big { position: relative; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 1.4rem; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45); }
.detail .cover.big.square { aspect-ratio: 1; }
.detail.album { grid-template-columns: 20rem 1fr; }
.detail .tlist.span { grid-column: 1 / -1; }
.d-main { min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.d-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.card h2.d-title, .d-title { margin: 0; text-transform: none; font-size: 4rem; font-weight: 800; line-height: 1.05; color: var(--ink-hi); letter-spacing: -.01em; }
.d-sub { font-size: 1.4rem; color: var(--ink-mid); line-height: 1.4; }
.d-resume { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.2rem; align-items: center; max-width: 46rem; font-size: 1.2rem; color: var(--ink-mid); }
.d-resume .prog { grid-column: 1 / -1; margin: 0; }
.d-btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; }
.d-btns .btn.big { min-width: 24rem; }
.d-row { display: flex; gap: 1rem; }
.detail .note { font-size: 1.2rem; color: var(--ink-lo); line-height: 1.5; max-width: 60rem; }
.detail .note .ic { width: 1.3rem; height: 1.3rem; display: inline-block; vertical-align: -.2rem; color: #f3d59a; }
.detail .note b { color: var(--ink); }

/* ---------- personal video player ---------- */
#player { position: fixed; inset: 0; z-index: 80; background: #000; display: none; flex-direction: column; }
#player.open { display: flex; }
#player video { flex: 1; width: 100%; min-height: 0; background: #000; }
.pl-top { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; background: rgba(4, 19, 29, .95); }
.pl-title b { display: block; font-size: 1.6rem; color: var(--ink-hi); }
.pl-title span { font-size: 1.1rem; color: var(--ink-lo); }

/* ---------- mini music player (this device) ---------- */
#mini { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 60; width: min(64rem, calc(100% - 2rem)); display: none; align-items: center; gap: 1rem;
  padding: .8rem 1rem .8rem .8rem; border-radius: 1.4rem; background: rgba(9, 36, 50, .97); border: 1px solid rgba(95, 224, 212, .45); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55); }
body.has-mini #mini { display: flex; }
body.has-mini .page, body.has-mini .home { padding-bottom: 8rem; }
.mini-art { width: 4.6rem; height: 4.6rem; border-radius: .8rem; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgba(230, 246, 250, .6); }
.mini-art img { width: 100%; height: 100%; object-fit: cover; }
.mini-art .ic { width: 2rem; height: 2rem; }
.mini-t { flex: 1; min-width: 0; }
.mini-t b { display: block; font-size: 1.3rem; color: var(--ink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-t span { display: block; font-size: 1rem; color: var(--ink-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-t .prog { margin-top: .5rem; border-radius: .2rem; }
.mini-t .prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal-2), var(--teal)); }

/* ---------- sheet + toast ---------- */
#sheet { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(2, 10, 16, .7); padding: 1rem; }
#sheet.open { display: flex; }
.sheet-card { width: min(36rem, 100%); max-height: 90vh; overflow: auto; background: #0a2735; border: 1px solid rgba(95, 224, 212, .35); border-radius: 1.6rem; padding: 2rem; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .6); }
.sheet-card h2 { font-size: 1.9rem; color: var(--ink-hi); margin-bottom: 1.2rem; }
.sheet-p { font-size: 1.2rem; color: var(--ink-mid); line-height: 1.45; margin-bottom: 1rem; }
.sheet-row { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.4rem; padding: 0 1rem; border-radius: 1rem; font-size: 1.35rem; font-weight: 600; }
.sheet-row:hover { background: rgba(207, 232, 239, .07); }
.sheet-row .ic { width: 1.7rem; height: 1.7rem; color: var(--teal); }
.sheet-row small { margin-left: auto; color: var(--ink-lo); }
.sheet-new { display: flex; gap: .8rem; margin-top: 1rem; }
.sheet-card input, .form input:not([type=checkbox]), .login-card input { width: 100%; min-height: 4.2rem; padding: 0 1.2rem; border-radius: 1rem; border: 1.5px solid rgba(207, 232, 239, .25);
  background: rgba(4, 19, 29, .7); color: var(--ink-hi); font-size: 1.4rem; outline: none; }
.sheet-card input:focus, .form input:focus, .login-card input:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(95, 224, 212, .25); }
.sheet-err, .login-err, .form-msg { min-height: 1.4rem; font-size: 1.15rem; color: #ffb3a6; margin-top: .6rem; }
.sheet-btns { display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1rem; }
#toast { position: fixed; left: 50%; top: 1.6rem; transform: translate(-50%, -150%); z-index: 100; max-width: calc(100% - 2rem); padding: 1rem 1.6rem; border-radius: 1.2rem;
  background: rgba(10, 50, 60, .97); border: 1px solid var(--teal); color: var(--ink-hi); font-size: 1.3rem; font-weight: 600; box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .5);
  transition: transform .3s ease, opacity .3s ease; pointer-events: none; opacity: 0; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast.bad { border-color: #ff8a65; background: rgba(70, 30, 26, .97); }

/* ---------- sign in ---------- */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-card { width: min(34rem, 100%); display: flex; flex-direction: column; gap: 1.2rem; padding: 3rem 2.8rem 2.4rem; border-radius: 2rem;
  background: rgba(9, 36, 50, .9); border: 1px solid rgba(95, 224, 212, .3); box-shadow: 0 2rem 4rem rgba(0, 0, 0, .45); }
.login-logo { width: 5.2rem; height: 5.2rem; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(95, 224, 212, .14); border: 1.5px solid rgba(95, 224, 212, .5); color: var(--teal); }
.login-logo .ic { width: 2.8rem; height: 2.8rem; }
.login-card h1 { text-align: center; font-size: 3rem; font-weight: 800; letter-spacing: .02em; color: var(--ink-hi); margin-top: -.2rem; }
.login-sub { text-align: center; font-size: 1.35rem; color: var(--ink-mid); margin: -.6rem 0 .6rem; }
.login-card label, .form label { display: flex; flex-direction: column; gap: .5rem; }
.login-card label span, .form label span { font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-lo); font-weight: 600; }
.login-card .btn { width: 100%; justify-content: center; text-align: center; }
.login-err { text-align: center; margin: 0; }
.login-foot { display: flex; gap: .7rem; font-size: 1.05rem; color: var(--ink-lo); line-height: 1.45; margin-top: .4rem; }
.login-foot .ic { width: 1.4rem; height: 1.4rem; color: var(--teal); margin-top: .1rem; }
.login .link { align-self: center; }

/* ---------- profile + admin ---------- */
.prof-hero { display: flex; align-items: center; gap: 2.4rem; }
.prof-hero .d-sub { margin: .5rem 0 1rem; }
.form { display: flex; flex-direction: column; gap: 1.2rem; align-items: stretch; }
.form .btn { align-self: flex-start; }
.form label.check { flex-direction: row; align-items: center; gap: .8rem; }
.form label.check span { text-transform: none; letter-spacing: 0; font-size: 1.25rem; color: var(--ink); font-weight: 500; }
.form input[type=checkbox] { width: 1.8rem; height: 1.8rem; accent-color: var(--teal-2); }
.swatches { display: flex; gap: .9rem; flex-wrap: wrap; }
.swatchbtn { --ac: #2bb3c0; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--ac); border: .25rem solid rgba(4, 19, 29, .9); box-shadow: 0 0 0 1px rgba(207, 232, 239, .25); }
.swatchbtn.on { box-shadow: 0 0 0 .25rem var(--ink-hi); }
.ulist { display: flex; flex-direction: column; }
.urow { display: grid; grid-template-columns: 3.2rem 1fr 9rem 16rem auto; align-items: center; gap: 1.4rem; padding: .9rem .6rem; }
.urow + .urow { border-top: 1px solid rgba(207, 232, 239, .08); }
.urow .un b { display: block; font-size: 1.4rem; color: var(--ink-hi); }
.urow .un span, .urow .ul { font-size: 1.1rem; color: var(--ink-lo); }
.urow .ua { display: flex; gap: .6rem; justify-content: flex-end; min-width: 22rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stats div { padding: 1rem 1.2rem; border-radius: 1.1rem; background: rgba(207, 232, 239, .05); border: 1px solid var(--line); }
.stats b { display: block; font-size: 2.6rem; font-weight: 300; color: var(--ink-hi); }
.stats span { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo); }
.checks { list-style: none; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: .7rem; font-size: 1.2rem; color: var(--ink-mid); }
.checks li { display: flex; align-items: center; gap: .7rem; }
.checks .ic { width: 1.5rem; height: 1.5rem; color: var(--ink-lo); }
.checks .ok .ic { color: var(--green); }
.checks .bad .ic { color: #ff8a65; }

/* ---------- idle: what the boat is playing ---------- */
.idle-np { display: none; align-items: center; gap: 1rem; margin: 2.2rem auto 0; padding: .9rem 1.8rem; border-radius: 999px; background: rgba(4, 19, 29, .5); font-size: 1.6rem; color: var(--ink-mid); width: max-content; max-width: 70%; }
.idle-np.show { display: flex; }
.idle-np .ic { width: 1.8rem; height: 1.8rem; color: #f3d59a; }
.idle-np b { color: var(--ink-hi); font-weight: 600; }
.idle-np span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- phones ---------- */
@media (max-width: 999px) {
  .avatar { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
  .avatar.xl { width: 4.8rem; height: 4.8rem; font-size: 2.2rem; }
  .userchip { font-size: 1rem; min-height: 2.9rem; padding: .25rem .8rem .25rem .25rem; gap: .5rem; }
  /* v4: grid instead of an absolutely placed chip, so the name chip can never sit on the date */
  .home .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "clock chip" "date chip" "pills pills"; align-items: center; row-gap: .2rem; }
  .home .topbar .tb-clock { grid-area: clock; line-height: 1.1; }
  .home .topbar .tb-date { grid-area: date; white-space: normal; }
  .home .topbar .tb-pills { grid-area: pills; margin-top: .5rem; }
  .home .topbar .userchip { grid-area: chip; justify-self: end; align-self: center; max-width: 11rem; }
  .home .topbar .userchip > span:not(.avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home { position: relative; }
  .page-top .userchip > span:not(.avatar) { display: none; }
  .page-top .userchip { padding: .25rem; margin-left: auto; flex-shrink: 0; }
  .page-top .back { flex-shrink: 0; }
  .page-top h1 { flex: 1 1 auto; gap: .6rem; }
  .page-top .pt-t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; overflow-wrap: anywhere; }
  .page-top.long-t h1 { font-size: 1.35rem; }
  .page-top.long-t .back { padding: 0 .9rem; }
  .page-top.long-t .back-l { display: none; }
  .btn { font-size: 1.05rem; min-height: 3.4rem; padding: 0 1.1rem; }
  .btn .ic { width: 1.35rem; height: 1.35rem; }
  .btn.big { min-height: 4.6rem; font-size: 1.15rem; width: 100%; }
  .btn.big small { font-size: .85rem; }
  .btn.big .ic { width: 1.8rem; height: 1.8rem; }
  .d-btns .btn.big { min-width: 0; }
  .tag { font-size: .8rem; padding: .2rem .6rem; }
  .boatcard { grid-template-columns: 4.5rem 1fr; gap: .4rem 1rem; padding: 1rem; }
  .bc-art { width: 4.5rem; height: 4.5rem; border-radius: .8rem; }
  .idle .bc-art, .offline .bc-art { width: 3.4rem; height: 3.4rem; }
  .boatcard.idle, .boatcard.offline { grid-template-columns: 3.4rem 1fr; padding: .9rem 1rem; }
  .bc-art .ic { width: 1.8rem; height: 1.8rem; }
  .bc-lab { font-size: .72rem; }
  .bc-title { font-size: 1.2rem; }
  .idle .bc-title, .offline .bc-title { font-size: 1.05rem; }
  .bc-sub { font-size: .9rem; }
  .bc-seek { font-size: .8rem; gap: .6rem; margin-top: .3rem; }
  .bc-ctrls { grid-column: 1 / -1; justify-content: space-between; gap: .3rem; flex-wrap: wrap; }
  .bc-ctrls .ctrl { width: 3.2rem; height: 3.2rem; }
  .bc-ctrls .ctrl.main { width: 3.8rem; height: 3.8rem; }
  .bc-ctrls .ctrl .ic { width: 1.4rem; height: 1.4rem; }
  .vol { margin-left: 0; padding-left: .4rem; }
  .volv { min-width: 1.8rem; font-size: .9rem; }
  .rowh { font-size: .8rem; margin: 1.4rem 0 .8rem; }
  .rowh small { font-size: .75rem; }
  .mgrid.posters { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .mgrid.albums, .mgrid.cont { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .mcard .cover { height: auto; }
  .mcard .meta { padding: .5rem .6rem .6rem; }
  .mgrid.posters .mcard .meta b { font-size: .85rem; }
  .mgrid.posters .mcard .meta span { font-size: .72rem; }
  .mcard .tag.boatonly { font-size: .62rem; left: .35rem; bottom: .35rem; top: auto; padding: .15rem .4rem; }
  .mcard .tag.boatonly .ic { width: .8rem; height: .8rem; }
  .favdot { width: 1.7rem; height: 1.7rem; right: .35rem; top: .35rem; }
  .favdot .ic { width: .95rem; height: .95rem; }
  .trow, .trow:not(:has(.tag)) { grid-template-columns: 1.6rem 1fr auto; gap: .2rem .6rem; padding: .5rem .2rem; min-height: 0; }
  .trow .tn { font-size: .85rem; }
  .trow .tt b { font-size: 1rem; }
  .trow .tt span { font-size: .8rem; }
  .trow .td { display: none; }
  .trow .tag { grid-column: 2; justify-self: start; }
  .trow .tact { grid-column: 3; grid-row: 1; gap: 0; }
  .trow .tn .ic { width: 1.2rem; height: 1.2rem; }
  .trow:has(.tag) .tact { grid-row: 1 / 3; }
  .ibtn { width: 2.6rem; height: 2.6rem; }
  .ibtn .ic { width: 1.25rem; height: 1.25rem; }
  .lbtns { width: 100%; }
  .lbtns .btn { flex: 1; }
  .pllist { grid-template-columns: 1fr; gap: .7rem; }
  .plart { width: 4rem; height: 4rem; }
  .plcard .meta b { font-size: 1.1rem; }
  .empty { font-size: 1rem; }
  .empty.big { padding: 2.5rem .5rem; }
  .empty.big b { font-size: 1.25rem; }
  .detail, .detail.album { grid-template-columns: 1fr; gap: 1.2rem; }
  .detail .cover.big { width: 58%; margin: 0 auto; }
  .detail.album .cover.big { width: 50%; }
  .d-main { gap: .9rem; }
  .card h2.d-title, .d-title { margin: 0; text-transform: none; font-size: 1.9rem; }
  .d-sub { font-size: 1rem; }
  .d-resume { font-size: .9rem; }
  .detail .note { font-size: .92rem; }
  .pl-top { padding: max(.6rem, env(safe-area-inset-top)) .8rem .6rem; gap: .8rem; }
  .pl-title b { font-size: 1.1rem; }
  .pl-title span { font-size: .85rem; }
  #mini { bottom: max(.6rem, env(safe-area-inset-bottom)); gap: .5rem; padding: .5rem; border-radius: 1.1rem; }
  .mini-art { width: 3.2rem; height: 3.2rem; }
  .mini-t b { font-size: 1rem; }
  .mini-t span { font-size: .8rem; }
  #mini .ctrl.sm { width: 2.8rem; height: 2.8rem; }
  body.has-mini .page, body.has-mini .home { padding-bottom: 6rem; }
  .sheet-card { padding: 1.4rem; border-radius: 1.3rem; }
  .sheet-card h2 { font-size: 1.35rem; }
  .sheet-row { font-size: 1.1rem; min-height: 3.6rem; }
  .sheet-card input, .form input:not([type=checkbox]), .login-card input { font-size: 16px; min-height: 3.3rem; } /* 16px stops iOS zoom */
  .sheet-err, .login-err, .form-msg { font-size: .95rem; }
  #toast { font-size: 1rem; padding: .8rem 1.1rem; }
  .login { padding: 1rem; }
  .login-card { padding: 2rem 1.4rem 1.6rem; gap: 1rem; border-radius: 1.5rem; }
  .login-logo { width: 4rem; height: 4rem; }
  .login-logo .ic { width: 2.2rem; height: 2.2rem; }
  .login-card h1 { font-size: 2.1rem; }
  .login-sub { font-size: 1.05rem; }
  .login-card label span, .form label span { font-size: .8rem; }
  .login-foot { font-size: .88rem; }
  .prof-hero { gap: 1.2rem; align-items: flex-start; }
  .form label.check span { font-size: 1rem; }
  .urow { grid-template-columns: 2.4rem 1fr auto; gap: .3rem .8rem; }
  .urow .ul { grid-column: 2 / -1; font-size: .85rem; }
  .urow .ua { grid-column: 2 / -1; justify-content: flex-start; min-width: 0; flex-wrap: wrap; }
  .urow .ua:empty { display: none; }
  .urow .ua .btn.sm { min-height: 2.8rem; font-size: .95rem; padding: 0 .8rem; }
  .urow .un b { font-size: 1.05rem; }
  .urow .un span { font-size: .85rem; }
  .stats b { font-size: 1.8rem; }
  .stats span { font-size: .72rem; }
  .checks { font-size: .95rem; }
  .swatchbtn { width: 2.6rem; height: 2.6rem; }
}

/* the Boat profile (helm screen) never streams to itself */
body.is-boatprofile #mini { display: none; }

/* long titles in the page header */
.page-top h1 { min-width: 0; }
.page-top h1 .ic { flex-shrink: 0; }
.page-top .pt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- v5: track details + lyrics sheet ---------- */
.ctrl.lxb .ic { color: var(--teal); }
.lx-card { position: relative; width: min(46rem, 100%); height: min(54rem, 90vh); display: flex; flex-direction: column; overflow: hidden; padding: 1.8rem;
  background: linear-gradient(170deg, #0d3243, #071c27 70%); }
.lx-x { position: absolute; top: 1rem; right: 1rem; }
.lx-head { display: flex; align-items: center; gap: 1.4rem; padding-right: 3.5rem; margin-bottom: 1.2rem; }
.lx-head h2 { margin: 0 0 .3rem; font-size: 1.8rem; line-height: 1.2; }
.lx-sub { color: var(--ink-mid); font-size: 1.25rem; }
.lx-art { flex: none; width: 7.5rem; height: 7.5rem; border-radius: 1.1rem; overflow: hidden; display: grid; place-items: center; background: linear-gradient(150deg, #1d6a80, #0d3446); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45); }
.lx-art img { width: 100%; height: 100%; object-fit: cover; }
.lx-art .ic { width: 3rem; height: 3rem; color: var(--ink-lo); }
.lx-tabs { margin-bottom: .8rem; }
.lx-pane { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: auto; }
.lx-pane[hidden] { display: none; }
.lx-lyrics { padding: 30% .4rem 40%; text-align: center; mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); }
.lx-line { font-size: 1.45rem; line-height: 1.35; font-weight: 600; color: var(--ink-lo); opacity: .6; margin: 0 0 .9rem; transition: color .3s, opacity .3s, transform .3s; }
.lx-line.gap { opacity: .35; }
.lx-line.now { color: var(--teal); opacity: 1; transform: scale(1.06); text-shadow: 0 0 1.2rem rgba(95, 224, 212, .35); }
.lx-plain { white-space: pre-line; font-size: 1.35rem; line-height: 1.6; color: var(--ink); }
.lx-lyrics:has(.lx-plain), .lx-lyrics:has(.lx-msg) { padding-top: .5rem; mask-image: none; -webkit-mask-image: none; }
.lx-msg { color: var(--ink-mid); font-size: 1.25rem; text-align: center; padding: 2rem 1rem; }
.lx-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
.lx-kv span { color: var(--ink-lo); flex: none; }
.lx-kv b { color: var(--ink-hi); text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.lx-file b { font-weight: 400; color: var(--ink-mid); font-size: 1.1rem; }
.lx-src { margin: .6rem 0 0; font-size: 1rem; color: var(--ink-lo); text-align: center; min-height: 1.2em; }
@media (max-width: 640px) {
  #sheet:has(.lx-card) { padding: 0; align-items: flex-end; }
  .lx-card { width: 100%; height: 88vh; border-radius: 1.6rem 1.6rem 0 0; padding: 1.4rem 1.2rem max(1rem, env(safe-area-inset-bottom)); }
  .lx-art { width: 5.5rem; height: 5.5rem; }
  .lx-head h2 { font-size: 1.5rem; }
  .lx-line { font-size: 1.3rem; }
}
.lx-pane { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(95, 224, 212, .35) transparent; }
.lx-pane::-webkit-scrollbar { width: 6px; height: 0; }
.lx-pane::-webkit-scrollbar-track { background: transparent; }
.lx-pane::-webkit-scrollbar-thumb { background: rgba(95, 224, 212, .3); border-radius: 3px; }

/* v8: narrow phones - full track titles, readable mini player, 40px touch targets */
@media (max-width: 480px) {
  .trow, .trow:not(:has(.tag)) { grid-template-columns: 1.6rem 1fr auto; align-items: center; }
  .trow .tt b, .trow .tt span { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
  .trow .tt b { -webkit-line-clamp: 2; line-height: 1.25; }
  .trow .tt span { -webkit-line-clamp: 1; }
  .trow .tact .ibtn[data-action="m-add"], .trow .tact .ibtn[data-action="m-fav"]:not(.on), .trow .tact .ibtn[data-action="m-pl-remove"] { display: none; }
  .trow .tact .ibtn { width: 40px; height: 40px; }
  #mini [data-action="mini-prev"], #mini [data-action="mini-close"] { display: none; }
  #mini .ctrl.sm { width: 40px; height: 40px; flex: none; }
  .mini-t b { font-size: 1.05rem; }
}


/* ---------- v9: easy-tap song rows, Shuffle all, full-screen player ---------- */
.trow.tap { cursor: pointer; min-height: 56px; transition: background .15s, transform .08s; -webkit-tap-highlight-color: transparent; }
.trow.tap:hover { background: rgba(95, 224, 212, .08); }
.trow.tap:active { background: rgba(95, 224, 212, .18); transform: scale(.995); }
.trow.tap:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.trow.tap.playing .tt b { color: var(--teal); }
.trow.nonum .tn:empty::before { content: ''; display: block; width: .6rem; height: .6rem; margin: 0 auto; border-radius: 50%; background: rgba(95, 224, 212, .25); }
.trow.noweb { cursor: default; }
.btn.shuf .ic { color: var(--teal); }
.lbtns { flex-wrap: wrap; }
#mini { position: fixed; }
.mini-open { position: absolute; inset: 0; border-radius: inherit; background: transparent; border: 0; cursor: pointer; z-index: 0; }
#mini > :not(.mini-open) { position: relative; z-index: 1; }
#mini .mini-art, #mini .mini-t { pointer-events: none; }
#mini .mshuf.on, .ctrl.fpm.on { background: rgba(95, 224, 212, .22); border-color: var(--teal); }
#mini .mshuf.on .ic, .ctrl.fpm.on .ic { color: var(--teal); }
#mini:hover { border-color: rgba(95, 224, 212, .45); }

#fullplayer { position: fixed; inset: 0; z-index: 80; display: none; overflow: hidden; color: var(--ink); background: #04131d; transition: transform .18s ease-out; touch-action: pan-x; }
#fullplayer.open { display: block; animation: fpUp .26s ease-out; }
@keyframes fpUp { from { transform: translateY(100%); } to { transform: none; } }
body.has-full #mini { display: none; }
.fp-bg { position: absolute; inset: -10%; background: var(--fp-art) center / cover no-repeat, linear-gradient(170deg, #0d3243, #04131d); filter: blur(48px) saturate(1.2) brightness(.45); }
.fp-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 19, 29, .35), rgba(4, 19, 29, .85)); }
.fp-in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2rem 4rem; padding: max(1.4rem, env(safe-area-inset-top)) 4rem max(2rem, env(safe-area-inset-bottom)); max-width: 120rem; margin: 0 auto; }
.fp-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }
.fp-from { flex: 1; text-align: center; min-width: 0; }
.fp-from small { display: block; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.fp-from b { display: block; font-size: 1.3rem; color: var(--ink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-x { background: rgba(207, 232, 239, .1); }
.fp-grab { display: none; }
.fp-art { align-self: center; justify-self: end; width: min(100%, 62vh); aspect-ratio: 1; border-radius: 1.6rem; overflow: hidden; display: grid; place-items: center; box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, .55); }
.fp-art img { width: 100%; height: 100%; object-fit: cover; }
.fp-art > .ic { width: 30%; height: 30%; color: var(--ink-lo); }
.fp-body { align-self: center; display: flex; flex-direction: column; gap: 1.2rem; max-width: 52rem; }
.fp-meta h2 { margin: 0 0 .4rem; font-size: 3rem; line-height: 1.15; color: var(--ink-hi); }
.fp-meta p { margin: 0; font-size: 1.6rem; color: var(--ink-mid); }
.fp-meta .fp-alb { font-size: 1.3rem; color: var(--ink-lo); margin-top: .3rem; }
.fp-seek { padding: 1.4rem 0; cursor: pointer; touch-action: none; }
.fp-track { position: relative; height: .7rem; border-radius: 999px; background: rgba(207, 232, 239, .18); }
.fp-track span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal-2), var(--teal)); }
.fp-track i { position: absolute; top: 50%; left: 0; width: 1.8rem; height: 1.8rem; margin: -.9rem 0 0 -.9rem; border-radius: 50%; background: var(--ink-hi); box-shadow: 0 0 0 .3rem var(--teal), 0 .3rem .8rem rgba(0, 0, 0, .5); }
.fp-times { display: flex; justify-content: space-between; margin-top: -.8rem; font-size: 1.15rem; color: var(--ink-lo); font-variant-numeric: tabular-nums; }
.fp-ctrls { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .4rem 0; }
.fp-ctrls .ctrl { width: 5.2rem; height: 5.2rem; position: relative; }
.fp-ctrls .ctrl.main { width: 7rem; height: 7rem; }
.fp-ctrls .ctrl.main .ic { width: 3rem; height: 3rem; }
.fp-ctrls .ctrl.fpm { width: 4.4rem; height: 4.4rem; background: transparent; }
.fp-ctrls .ctrl em { position: absolute; right: .55rem; bottom: .5rem; font-size: .85rem; font-style: normal; font-weight: 800; color: var(--teal); }
.fp-extra { display: flex; gap: .8rem; align-items: center; }
.fp-extra .btn { flex: 1; justify-content: center; min-height: 48px; }
.fp-extra .btn.fp-lx { border-color: var(--teal); background: rgba(95, 224, 212, .14); }
.fp-next { margin: .2rem 0 0; font-size: 1.1rem; color: var(--ink-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-next b { color: var(--ink-mid); font-weight: 600; }

@media (max-width: 820px) {
  .fp-in { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 1.2rem; padding-left: 1.6rem; padding-right: 1.6rem; overflow-y: auto; }
  .fp-grab { display: none; }
  .fp-art { justify-self: center; width: min(100%, 44vh); border-radius: 1.2rem; }
  .fp-body { align-self: start; max-width: none; gap: .9rem; }
  .fp-meta h2 { font-size: 2rem; }
  .fp-meta p { font-size: 1.25rem; }
  .fp-ctrls .ctrl { width: 4.4rem; height: 4.4rem; }
  .fp-ctrls .ctrl.main { width: 5.8rem; height: 5.8rem; }
  .fp-ctrls .ctrl.fpm { width: 4rem; height: 4rem; }
  .fp-top .fp-x { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .trow.tap, .trow.tap:not(:has(.tag)) { min-height: 56px; padding: .6rem .4rem; }
  .trow.nonum, .trow.nonum:not(:has(.tag)) { grid-template-columns: .8rem 1fr auto; }
  .trow .tt b { font-size: 1.1rem; }
  .trow .tt span { font-size: .85rem; }
  .trow .tact .ibtn { width: 44px; height: 44px; }
  #mini .mshuf { display: none; }
}
@media (max-width: 820px) {
  .fp-in { grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .fp-body { min-width: 0; width: 100%; }
  .fp-art { width: min(100%, 40vh); }
  .fp-ctrls { gap: 4px; }
  .fp-ctrls .ctrl { width: 56px; height: 56px; flex: 0 1 auto; }
  .fp-ctrls .ctrl.main { width: 72px; height: 72px; }
  .fp-ctrls .ctrl.fpm { width: 48px; height: 48px; }
  .fp-ctrls .ctrl .ic { width: 22px; height: 22px; }
  .fp-ctrls .ctrl.main .ic { width: 30px; height: 30px; }
}
.fp-from small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) { .fp-from small { font-size: .8rem; letter-spacing: .06em; } }

/* ---------- v10: opaque sticky/fixed layers + full player that fits any phone height ---------- */
.library .media-head { z-index: 6; background: #082230; margin: -2rem -2.2rem 0; padding: 1.2rem 2.2rem 1rem; border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 .8rem 1.2rem -.6rem rgba(2, 10, 16, .85); border-bottom: 1px solid var(--line); }
.libbody .rowh, .libbody .tlist, .detail .tlist .trow { scroll-margin-top: 7rem; }
#mini { background: #0a2635; }
#example-mark { background: rgba(4, 19, 29, .92); padding: .2rem .7rem; border-radius: .6rem; }
body.has-mini #example-mark, body.has-full #example-mark, body.has-player #example-mark { display: none; }
#sheet { z-index: 90; } #toast { z-index: 100; } #fullplayer { z-index: 85; }
body.has-full { overflow: hidden; }

#fullplayer { height: 100vh; height: 100dvh; inset: 0 0 auto 0; }
#fullplayer .fp-in { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; gap: 0; overflow: hidden;
  padding: max(.8rem, env(safe-area-inset-top)) 1.6rem max(1rem, env(safe-area-inset-bottom)); max-width: 120rem; }
#fullplayer .fp-top { flex: none; height: 52px; position: relative; z-index: 2; margin-bottom: .8rem; }
#fullplayer .fp-art { flex: 1 1 auto; min-height: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1; align-self: center; justify-self: auto; margin: 0 auto; }
#fullplayer .fp-artwrap { flex: 1 1 0; min-height: 96px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#fullplayer .fp-artwrap .fp-art { height: 100%; flex: none; }
#fullplayer .fp-body { flex: none; width: 100%; max-width: 56rem; margin: 1rem auto 0; align-self: center; gap: .6rem; }
@media (min-width: 821px) {
  #fullplayer .fp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 4rem; padding-left: 4rem; padding-right: 4rem; }
  #fullplayer .fp-artwrap { height: 100%; min-height: 0; justify-content: flex-end; }
  #fullplayer .fp-artwrap .fp-art { height: auto; width: min(100%, 62vh); max-height: 100%; }
  #fullplayer .fp-body { align-self: center; margin: 0; }
}
@media (max-width: 820px) {
  #fullplayer .fp-meta h2 { font-size: 1.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #fullplayer .fp-meta p { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #fullplayer .fp-seek { padding: .9rem 0; }
  #fullplayer .fp-extra .btn { min-height: 44px; }
}
@media (max-height: 700px) and (max-width: 820px) {
  #fullplayer .fp-alb, #fullplayer .fp-next { display: none; }
  #fullplayer .fp-ctrls .ctrl { width: 48px; height: 48px; }
  #fullplayer .fp-ctrls .ctrl.main { width: 60px; height: 60px; }
  #fullplayer .fp-body { gap: .4rem; margin-top: .6rem; }
}
#fullplayer .fp-artwrap { container-type: size; }
#fullplayer .fp-artwrap .fp-art, #fullplayer .fp-art { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); max-width: none; max-height: none; flex: none; }
@media (min-width: 821px) { #fullplayer .fp-artwrap .fp-art { width: min(100cqw, 100cqh, 62vh); height: min(100cqw, 100cqh, 62vh); } }
@media (max-width: 640px) { .library .media-head { margin: -1.25rem -1.25rem 0; padding: .9rem 1.25rem .8rem; } }

/* ---------- v11: tap the album art to flip to the back cover ---------- */
.flip { position: relative; perspective: 1400px; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.flip-f, .flip-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; overflow: hidden; }
.flip-f > .cover, .flip-f > .fp-art { width: 100% !important; height: 100% !important; margin: 0; }
.flip-b { transform: rotateY(180deg); background: #0a2635; box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, .5); }
.flip-b img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flip-hint { position: absolute; right: .6rem; bottom: .6rem; z-index: 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 19, 29, .8); border: 1px solid rgba(95, 224, 212, .5); pointer-events: none; }
.flip-hint .ic { width: 1.3rem; height: 1.3rem; color: var(--teal); }
.flip:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.flip.flip-hdr { border-radius: 1.2rem; }
.flip.flip-hdr .flip-f { position: relative; }
.flip.flip-hdr .flip-b { border-radius: 1.2rem; }
#fullplayer .flip.flip-fp { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); border-radius: 1.6rem; }
@media (min-width: 821px) { #fullplayer .flip.flip-fp { width: min(100cqw, 100cqh, 62vh); height: min(100cqw, 100cqh, 62vh); } }
@media (max-width: 820px) { #fullplayer .flip.flip-fp { border-radius: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }

/* ---------- v12: Albums | Songs filter (lives in the opaque sticky library header) ---------- */
.library .media-head { flex-wrap: wrap; row-gap: .8rem; }
.mseg { flex: 1 0 100%; display: flex; gap: .3rem; padding: .3rem; border-radius: 999px; background: #04131d; border: 1px solid var(--line); }
.mseg button { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border-radius: 999px; font-size: 1.25rem; font-weight: 600; color: var(--ink-mid); transition: background .15s, color .15s; }
.mseg button .ic { width: 1.5rem; height: 1.5rem; color: var(--teal); }
.mseg button:hover { background: rgba(95, 224, 212, .08); }
.mseg button.on { background: var(--teal-2); color: #04131d; }
.mseg button.on .ic { color: #04131d; }
.mseg button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (min-width: 821px) { .mseg { flex: 0 0 auto; width: 30rem; margin-left: auto; } }
@media (max-width: 640px) { .mseg button { font-size: 1.05rem; } .library .media-head .note { display: none; } }

/* ---------- v13: art thumbnails in song rows + compact action buttons on phones ---------- */
.trow.nonum, .trow.nonum:not(:has(.tag)) { grid-template-columns: 44px 1fr 5rem auto; }
.trow.nonum:has(.tag) { grid-template-columns: 44px 1fr auto 5rem auto; }
.tthumb { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; flex: none; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .35); }
.tthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tthumb .tph .ic { width: 20px; height: 20px; color: rgba(230, 246, 250, .55); }
.trow.nonum .tn:empty::before { content: none; }
.tthumb.now { box-shadow: 0 0 0 2px var(--teal), 0 0 1rem rgba(95, 224, 212, .45); }
.tthumb .eq { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 10px; background: rgba(4, 19, 29, .55); }
.tthumb .eq i { width: 4px; border-radius: 2px; background: var(--teal); height: 40%; animation: eqb 1s ease-in-out infinite; }
.tthumb .eq i:nth-child(2) { animation-delay: -.35s; height: 70%; } .tthumb .eq i:nth-child(3) { animation-delay: -.7s; height: 55%; }
@keyframes eqb { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.tthumb .eq i { transform-origin: bottom; max-height: 22px; }
@media (prefers-reduced-motion: reduce) { .tthumb .eq i { animation: none; } }
.lbtns .lb-s { display: none; }
@media (max-width: 640px) {
  .trow.nonum, .trow.nonum:not(:has(.tag)), .trow.nonum:has(.tag) { grid-template-columns: 44px 1fr auto; gap: .2rem .8rem; }
  .lbtns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; width: 100%; flex-wrap: nowrap; }
  .lbtns .btn { flex-direction: column; gap: .25rem; min-height: 56px; min-width: 0; padding: .45rem .3rem; font-size: 1rem; line-height: 1.1; justify-content: center; }
  .lbtns .btn .ic { width: 1.6rem; height: 1.6rem; margin: 0; }
  .lbtns .lb-l { display: none; } .lbtns .lb-s { display: block; }
  .rowh.split { flex-wrap: wrap; }
  .d-btns { width: 100%; }
  .d-btns > .lbtns { flex: 1 1 100%; }
}

/* ---------- v14: per-song "more" (⋮) menu ---------- */
.trow .tact .ibtn.more { width: 44px; height: 44px; color: var(--ink-mid); }
.trow .tact .ibtn.more .ic, .trow .tact .ibtn.more svg { width: 22px; height: 22px; }
.trow .tact .ibtn.more[aria-expanded="true"] { background: rgba(95, 224, 212, .14); color: var(--teal); border-color: rgba(95, 224, 212, .4); }
.tmenu { position: fixed; z-index: 60; min-width: 25rem; padding: .6rem; border-radius: 1.4rem; background: #0b2a3a; border: 1px solid rgba(95, 224, 212, .25);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: .2rem; animation: tmIn .14s ease-out; }
@keyframes tmIn { from { opacity: 0; transform: translateY(-4px); } }
.tmenu [role=menuitem] { display: flex; align-items: center; gap: 1.2rem; min-height: 48px; padding: .6rem 1.2rem; border-radius: 1rem; color: var(--ink, #e6f6fa); font-size: 1.5rem; text-align: left; width: 100%; }
.tmenu [role=menuitem] svg { width: 2.2rem; height: 2.2rem; flex: none; color: var(--ink-mid); }
.tmenu [role=menuitem] span { display: flex; flex-direction: column; }
.tmenu [role=menuitem] small { font-size: 1.15rem; color: var(--ink-mid); }
.tmenu [role=menuitem]:hover, .tmenu [role=menuitem]:focus-visible { background: rgba(95, 224, 212, .12); outline: none; }
.tmenu [role=menuitem]:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); }
.tmenu [role=menuitem].boatb svg { color: #f3d59a; }
.tmenu [role=menuitem].on svg { color: #ff6b9a; }
.tmenu [role=menuitem][disabled] { opacity: .4; }
.tmenu.sheetish { left: 0; right: 0; bottom: 0; top: auto; min-width: 0; border-radius: 2rem 2rem 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  animation: tmUp .18s ease-out; box-shadow: 0 0 0 100vmax rgba(2, 10, 16, .55), 0 -1rem 3rem rgba(0, 0, 0, .5); }
@keyframes tmUp { from { transform: translateY(100%); } }
.tmenu .tm-head { display: flex; align-items: center; gap: 1.2rem; padding: .4rem 1rem 1rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(207, 232, 239, .1); }
.tmenu .tm-head b { display: block; font-size: 1.6rem; } .tmenu .tm-head em { font-style: normal; color: var(--ink-mid); font-size: 1.3rem; }
.tmenu .tm-cancel { justify-content: center; margin-top: .4rem; background: rgba(207, 232, 239, .07); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tmenu, .tmenu.sheetish { animation: none; } }

/* ---------- v15: tappable synced lyric lines ---------- */
.lx-line.seekable { cursor: pointer; border-radius: .8rem; padding: .3rem .8rem; -webkit-tap-highlight-color: transparent; transform-origin: center; }
@media (hover: hover) { .lx-line.seekable:hover { opacity: .95; color: var(--ink-hi); background: rgba(95, 224, 212, .08); } }
.lx-line.seekable:active, .lx-line.seekable.pressed { background: rgba(95, 224, 212, .18); opacity: 1; }
.lx-line.seekable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--teal); opacity: 1; }
.lx-line.seekable.now:hover { color: var(--teal); }

/* ---------- v16: WebKit (cog/WPE kiosk, Safari) fix: card covers collapsed to 0x0 ----------
   WebKit lays out <button> children with align-items:flex-start, so a cover whose only
   content is an absolutely-positioned <img> shrink-wraps to 0 width (and aspect-ratio gives 0 height).
   Chrome/Vivaldi stretch it, which is why phones looked fine. Force full width. */
.mcard { align-items: stretch; }
.mcard > .cover, .mcard > .meta { width: 100%; align-self: stretch; box-sizing: border-box; }
.mcard .cover.square { aspect-ratio: 1 / 1; }

/* ---------- v19: song + album credits sheet ---------- */
.cr-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; }
.cr-head img, .cr-ph { flex: 0 0 auto; width: 6.4rem; height: 6.4rem; border-radius: 1rem; object-fit: cover; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .45); }
.cr-ph { display: flex; align-items: center; justify-content: center; background: rgba(95, 224, 212, .12); color: var(--teal); }
.cr-head h2 { margin: .1rem 0 .2rem; }
.cr-head p { font-size: 1.2rem; color: var(--ink-mid); }
.cr-h { font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 1.4rem 0 .4rem; }
.cr-list { margin: 0; }
.cr-row { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: 1rem; padding: .75rem .2rem; border-top: 1px solid rgba(207, 232, 239, .1); font-size: 1.25rem; line-height: 1.35; }
.cr-row:first-child { border-top: 0; }
.cr-row dt { color: var(--ink-lo); }
.cr-row dd { margin: 0; color: var(--ink-hi); font-weight: 600; }
.cr-src { margin-top: 1.2rem; font-size: 1rem; color: var(--ink-lo); }
.cr-id { display: block; word-break: break-all; opacity: .7; }
@media (max-width: 700px) {
  .cr-head img, .cr-ph { width: 5rem; height: 5rem; }
  .cr-row { font-size: 1.05rem; grid-template-columns: minmax(6.5rem, 40%) 1fr; }
}
/* v20: A-Z fast scroll rail for All songs */
.tlist.azall .trow { margin-right: 2.6rem; }
#azrail { position: fixed; right: .3rem; top: 18vh; bottom: 1rem; z-index: 55; width: 2.4rem; display: none; flex-direction: column; justify-content: space-between; align-items: center;
  padding: .6rem 0; border-radius: 1.2rem; background: rgba(10, 38, 53, .55); border: 1px solid rgba(95, 224, 212, .18); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; overflow: hidden; }
#azrail.on { display: flex; }
#azrail.drag { background: rgba(10, 38, 53, .85); border-color: rgba(95, 224, 212, .45); }
#azrail span { font-size: var(--azfs, 1rem); line-height: 1; font-weight: 700; color: var(--teal); pointer-events: none; }
#azrail span.dim { color: rgba(207, 232, 239, .25); }
#azrail span.cur { color: #fff; transform: scale(1.35); }
#azbubble { position: fixed; right: 4.2rem; top: 0; z-index: 56; width: 6.4rem; height: 6.4rem; margin-top: -3.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem; font-weight: 800; color: #04202c; background: linear-gradient(150deg, var(--teal), var(--teal-2)); box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .45);
  opacity: 0; transform: scale(.7); transition: opacity .25s, transform .2s; pointer-events: none; }
#azbubble.show { opacity: 1; transform: scale(1); }
body.has-full #azrail, body.has-full #azbubble { display: none; }