/* css/base.css */
/* =====================================================================================================
   SONGLESS БГ
   Layout: one centered column. Top bar (wordmark, difficulty drawer button, settings, help), game mode pills, the difficulty side bar, the round
   (guesses, stage bar, play button, search), a quiet footer with the song editor.
   Start page: one button (Deezer, public API, no sign-in).
   File map:  CSS 1 tokens · 2 difficulty themes · 3 base · 4 top bar · 5 difficulty · 6 round · 7 result
              · 8 loading · 9 footer · 10 start page · 11 dialogs (help, settings, song editor)
              JS  1 config · 2 texts (BG/EN) · 3 helpers · 4 search · 5 catalogue (Deezer) · 6 playlists
              · 7 song choice · 8 feedback · 9 audio · 10 game · 11 rendering · 12 song editor · 13 start-up
   ===================================================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --bg:#050806;
  --surface:#161a12;
  --surface2:#1e2319;
  --line:#30352b;
  --text:#dfe4df;
  --mute:#8a9387;
  --green:#22d875;
  --ok:#3be88b;--ok-rgb:59,232,139;   /* "correct" stays green in every theme */
  --wave:#22d875;             /* colour of the bass waves: follows the difficulty theme */
  --green-ink:#0c1a10;
  --red:#ff5c6c;
  --font:"Inter","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ac:34,216,117;            /* accent as r,g,b, for translucent tints */
  --wash:34,216,117;          /* tint of the column behind the game */
  --fade:rgba(255,255,255,.05);/* faint overlay for empty bars and dividers */
  --soft:#c9d0c8;
  --shadow:rgba(0,0,0,.55);
  --page:radial-gradient(120% 70% at 50% -10%,rgba(0,150,110,.22),transparent 60%);
  color-scheme:dark;
}

/* ---------- 2. difficulty themes: page background and surfaces follow the flag colour ---------- */
body[data-diff="white"]{
  --bg:#0f110f;--surface:#1d201c;--surface2:#282c26;--line:#3b403a;--text:#eef0ee;--mute:#9ba199;
  --green:#ffffff;--green-ink:#0a2a1d;--ac:255,255,255;--wash:255,255,255;--wave:#ffffff;
  --page:linear-gradient(180deg,rgba(255,255,255,.12),transparent 50%);
}
body[data-diff="green"]{
  --bg:#04231a;--surface:#0a3a2b;--surface2:#0f4936;--line:#1a5f48;--text:#e6f3ec;--mute:#8fb3a2;
  --green:#00966e;--wave:#00b383;--green-ink:#ffffff;--ac:0,150,110;--wash:0,150,110;
  --page:linear-gradient(180deg,rgba(0,150,110,.22),transparent 50%);
}
body[data-diff="red"]{
  --bg:#2b0a0c;--surface:#431216;--surface2:#531a1e;--line:#6d2a2e;--text:#f6e4e3;--mute:#b58f8e;
  --red:#ff9aa3;--green:#d62612;--green-ink:#ffffff;--ac:214,38,18;--wash:214,38,18;--wave:#f0452d;--soft:#e8cfcd;
  --page:linear-gradient(180deg,rgba(214,38,18,.24),transparent 50%);
}

/* ---------- 3. base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--page) no-repeat fixed,var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.4;transition:background-color .5s,color .3s}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,rgba(var(--wash),.1),rgba(var(--wash),.02) 55%,rgba(var(--wash),.07));
  border-inline:1px solid rgba(var(--wash),.14)}
main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:28px 0}
#app{display:flex;flex-direction:column;gap:18px}

/* touch feedback: everything pressable squashes a little and springs back */
.press{transition:transform .35s var(--spring),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.press:active:not([disabled]){transform:scale(.93);transition-duration:.06s}
.pop{animation:pop .4s var(--spring)}
@keyframes pop{0%{transform:scale(.85)}100%{transform:none}}

.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--mute);font-weight:800;font-size:13px;padding:0}
.icon-btn:hover{color:var(--text)}
.icon-btn[disabled]{opacity:.35;cursor:default}
.icon-btn{display:grid;place-items:center}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--text);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--mute)}
.btn[disabled]{opacity:.45;cursor:default}
.btn svg{width:13px;height:13px;fill:currentColor}
.btn .fi{display:inline-flex}
.btn.main{height:44px;background:var(--green);color:var(--green-ink);border-color:var(--green);box-shadow:0 0 22px rgba(var(--ac),.2)}
.btn.main:hover{box-shadow:0 0 30px rgba(var(--ac),.35)}
.btn.main[disabled]{box-shadow:none}

/* ---------- 4. top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 0 0}
.brand{font-weight:800;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.02em;line-height:1;display:flex;align-items:center;gap:10px}
/* the wordmark in the three colours of the flag; the third that matches the theme lights up */
/* the three coloured parts run together as one word, with no gap between them */
.wm{display:inline-flex;gap:0;letter-spacing:0;word-spacing:0;white-space:nowrap}
.wm span{display:inline-block;margin:0;padding:0;letter-spacing:0;transition:opacity .5s,text-shadow .5s;opacity:.94}
.wm .w1{color:#fff;--g:255,255,255}.wm .w2{color:#00a678;--g:25,227,162}.wm .w3{color:#e0301a;--g:255,74,48}
body[data-diff="white"] .wm .w1,body[data-diff="green"] .wm .w2,body[data-diff="red"] .wm .w3{opacity:1}
body[data-diff="green"] .wm .w2{color:#00a678}
.brand small{font-size:clamp(12px,1vw,15px);font-weight:800;letter-spacing:0;color:var(--green-ink);background:var(--green);padding:3px 7px;border-radius:7px}
.top-right{display:flex;align-items:center;gap:8px}
/* segmented control (game mode): a coloured pill slides under the active button */
.seg-ctl{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg-ctl button{position:relative;z-index:1;background:none;border:0;height:28px;padding:0 11px;text-align:center;border-radius:999px;font-size:12px;font-weight:700;color:var(--mute);transition:color .25s;white-space:nowrap}
.seg-ctl button[aria-pressed="true"]{color:var(--green-ink)}
.seg-ctl .pill{position:absolute;top:3px;bottom:3px;left:3px;border-radius:999px;background:var(--green);transition:transform .45s var(--spring)}
.modes{width:100%}
.modes button{height:32px;font-size:13px}
.modes .pill{width:calc((100% - 6px)/3)}
.modes[data-mode="random"] .pill{transform:translateX(100%)}
.modes[data-mode="custom"] .pill{transform:translateX(200%)}

/* ---------- 5. difficulty: the Bulgarian flag (white, green, red); the chosen stripe lights up and slides forward ---------- */
.sidebar{position:fixed;z-index:40;left:0;bottom:28px;padding-left:28px;pointer-events:none}
.sidebar>*{pointer-events:auto}
.vflag{position:relative;display:flex;flex-direction:column;width:min(280px,72vw);filter:drop-shadow(0 16px 30px var(--shadow))}
.stripe{position:relative;height:62px;--c:#fff;--ink:#16301f;--g:255,255,255;transition:transform .55s var(--spring)}
.stripe[data-d="green"]{--c:#00966e;--ink:#fff;--g:25,227,162}
.stripe[data-d="red"]{--c:#d62612;--ink:#fff;--g:255,74,48}
.stripe:not(.on):hover .flap-in{opacity:.95}
.stripe.on{z-index:2}
/* the whole stripe is the button (invisible), so a click anywhere on it chooses the difficulty */
.band{position:absolute;inset:0;z-index:1;width:auto;border:0;border-radius:0;padding:0;background:transparent;opacity:0;cursor:pointer}
.band:focus-visible{opacity:1;outline:3px solid var(--text);outline-offset:-3px}
.flap{position:relative;height:100%}
.flap-in{position:relative;height:100%;overflow:hidden;white-space:nowrap;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--c);color:var(--ink);opacity:.8;transition:box-shadow .5s,opacity .45s}   /* only the stripe is dimmed, so the description box stays solid */
.stripe:first-of-type .flap-in{border-radius:14px 14px 0 0}
.stripe:last-of-type .flap-in{border-radius:0 0 14px 14px}
.stripe.on .flap-in{opacity:1}
/* a light glides across the chosen stripe now and then */
.flap-txt{flex:1;min-width:0;display:flex;flex-direction:column;pointer-events:none}
.flap-in b{font-size:20px;line-height:1.1;letter-spacing:-.01em}
.flap-in small{font-size:14px;font-weight:700;opacity:.8}
/* the "?" shows what the difficulty means when hovered, focused or tapped; the text opens upwards, away from the screen edge */
.q{position:relative;z-index:2;flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);background:transparent;color:var(--ink);font-weight:800;font-size:15px;padding:0;display:grid;place-items:center;cursor:help}
.q:hover,.q:focus-visible{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.tip{display:none;position:absolute;z-index:3;left:0;width:max(100%,260px);bottom:calc(100% + 8px);padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line);box-shadow:0 12px 30px var(--shadow);font-size:13px;line-height:1.5;color:var(--soft);white-space:normal}
.tip b{color:var(--text)}
.flap:has(.q:hover) .tip,.flap:has(.q:focus) .tip{display:block}
.flap.tip-open .tip{display:block}   /* a tap on "?" (touch screens) */
.stripe:has(.q:hover),.stripe:has(.q:focus-visible),.stripe:has(.tip-open){z-index:6}   /* above the chosen stripe, which is raised */
@media (max-height:640px){.stripe{height:48px}}
/* a small screen: a compact flag; the chosen stripe slides out wider for a moment when touched */
@media (max-width:1349px){
  .sidebar{bottom:66px;padding-left:12px}
  .vflag{width:auto}
  .stripe{width:52px;height:46px;transition:transform .55s var(--spring),width .5s var(--spring)}
  .stripe.on.peek{width:min(250px,calc(100vw - 80px))}
  .flap-txt,.q{display:none}
  .stripe.on.peek .flap-txt{display:flex}
  .stripe.on.peek .q{display:grid}
  .flap-in{padding:0 12px}
  .flap-in b{font-size:19px}
  .flap-in small{font-size:13px}
}
/* the three stripes also appear small on the start page */
.flagbar{display:flex;height:8px;flex:none}
.flagbar i:first-child{border-radius:99px 0 0 99px}.flagbar i:last-child{border-radius:0 99px 99px 0}
.flagbar i{flex:1;opacity:.9;transition:opacity .5s,box-shadow .5s}
.flagbar i:nth-child(1){background:#fff;--g:255,255,255}.flagbar i:nth-child(2){background:#00966e;--g:25,227,162}.flagbar i:nth-child(3){background:#d62612;--g:255,74,48}
body[data-diff="white"] .flagbar i:nth-child(1),body[data-diff="green"] .flagbar i:nth-child(2),body[data-diff="red"] .flagbar i:nth-child(3){opacity:1}
/* green: a lighter, wider mint glow */

/* ---------- 6. the round ---------- */
.guesses{display:flex;flex-direction:column;gap:5px}
.guesses:empty{display:none}
.row{height:36px;border:1px solid var(--line);background:var(--surface);border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 12px;font-size:13px;min-width:0}
.row svg{width:13px;height:13px;flex:none}
.row .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .len{flex:none;color:var(--mute);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.row.skip{color:var(--mute)}
.row.wrong{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.row.ok{color:var(--ok);border-color:rgba(var(--ok-rgb),.6);background:rgba(var(--ok-rgb),.08)}
.row.fresh.wrong{animation:shake .42s ease}
.row.fresh.ok{animation:pop .45s var(--spring)}
.row.fresh.skip{animation:slide .3s ease-out}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes slide{from{transform:translateY(-6px);opacity:0}}

/* one bar, one segment per stage; longer stages get wider segments */
.track{display:flex;gap:2px;height:22px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.seg{position:relative;overflow:hidden;border-radius:999px;background:var(--fade)}
.seg.open{background:rgba(var(--ac),.2)}
.seg i{position:absolute;inset:0 auto 0 0;width:0;background:var(--green);border-radius:999px}
.seg.fresh{animation:segPop .6s var(--spring)}
@keyframes segPop{0%{transform:scaleY(.4)}100%{transform:none}}

.player-area{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:50px}   /* room for the bass circle, which reaches about a third of the button out */
.disc{position:relative;width:112px;height:112px;display:grid;place-items:center}
.play{position:relative;z-index:1;width:112px;height:112px;border-radius:50%;padding:0;color:var(--green-ink);
  background:var(--green);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -12px 24px rgba(0,0,0,.05),0 11px 30px rgba(0,0,0,.2),0 0 28px rgba(var(--ac),.12)}
.play svg{width:34px;height:34px;fill:currentColor;pointer-events:none}
.play .pi{display:grid;place-items:center}
.play:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 11px 30px rgba(0,0,0,.2),0 0 40px rgba(var(--ac),.3)}
.play[disabled]{cursor:wait;opacity:.8}
/* the canvas is larger than the wave and fades out toward its edges, so no square edge or cut-off glow ever shows */
.viz{position:absolute;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
.pulse{display:none}
.is-playing .pulse{animation:pulse 1.5s ease-out infinite}
.is-playing .pulse.p2{animation-delay:.75s}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.45);opacity:0}}
.disc.unlock .play{animation:nudge .55s var(--spring)}
@keyframes nudge{0%{transform:scale(1)}30%{transform:scale(.9)}100%{transform:none}}
.stage-time{justify-self:end;color:var(--green);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.stage-time strong{font-size:22px;font-weight:800;letter-spacing:-.02em}
.stage-time span{font-size:12px;font-weight:700}
.stage-time.bump strong{display:inline-block;animation:bump .55s var(--spring)}
@keyframes bump{0%{transform:scale(1.5)}100%{transform:none}}
.mini{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--mute);display:grid;place-items:center;padding:0}
.mini:hover{color:var(--text);border-color:var(--mute)}
.mini svg{width:16px;height:16px;fill:currentColor;pointer-events:none}
.mini.off{visibility:hidden}
.note{color:var(--mute);font-size:12px;text-align:center;min-height:1.4em;margin:-8px 0}

.guess-form{display:flex;gap:8px}
.guess-form.shake .search{animation:shake .42s ease}
.search{position:relative;flex:1;min-width:0}
.search .sico{position:absolute;left:13px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--mute);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.search input{width:100%;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;font-size:16px;padding:0 12px 0 38px;transition:border-color .2s}
.search input::placeholder{color:var(--mute);font-size:14px}
.search input:focus{outline:none;border-color:rgba(var(--ac),.6)}
.guess-form .skip{flex:none;height:44px;padding:0 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.guess-form .skip:hover{border-color:var(--mute)}
.guess-form .skip svg{width:13px;height:13px;fill:currentColor}
.guess-form .skip em{font-style:normal;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}

/* song lists: the guess dropdown and the editor share the row look */
.list{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;max-height:min(320px,45vh);overflow-y:auto;z-index:5;margin:0;padding:4px;list-style:none;box-shadow:0 -12px 32px var(--shadow)}
.list li,.ed-list li{padding:6px 8px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0}
.thumb{width:36px;height:36px;flex:none;border-radius:6px;object-fit:cover;background:var(--surface2)}
.thumb.ph{display:grid;place-items:center;color:var(--mute)}
.list .meta,.ed-list .meta{display:flex;flex-direction:column;min-width:0;flex:1}
.list .meta b,.ed-list .meta b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .meta span,.ed-list .meta span{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list li.empty,.ed-list li.empty{cursor:default;color:var(--mute);font-size:13px;padding:9px 10px}
.list li[aria-selected="true"],.list li:not(.empty):hover,.ed-list li:not(.empty):hover{background:var(--surface2)}

.vol{display:flex;align-items:center;justify-content:center;gap:10px}
.vol .mini{width:28px;height:28px;border:0;background:none}
.vol input[type=range]{width:140px;accent-color:var(--green);cursor:pointer;margin:0}

/* ---------- 7. result: a bar that pops up from the bottom with the song, playing it ---------- */
.verdict{font-weight:800;font-size:15px;margin-bottom:4px}
.verdict.win{color:var(--ok)}
.verdict.lose{color:var(--red)}
.cover{width:56px;height:56px;flex:none;border-radius:8px;background:var(--surface2) center/cover no-repeat;display:grid;place-items:center;color:var(--mute)}
.score{display:flex;gap:5px}
.score i{flex:1;height:6px;border-radius:99px;background:var(--fade)}
.score i.ok{background:var(--ok)}
.score i.wrong{background:var(--red)}
.score i.skip{background:var(--mute);opacity:.5}
.after{display:flex;gap:8px}
.after .btn{height:44px}
.after .btn.main{flex:1.6}
.result-bar{position:fixed;z-index:45;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(62% 52% at 50% 40%,rgba(var(--wash),.34),transparent 72%),var(--bg)}
.result-bar.enter{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}}
.result-card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:96px 36px 24px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 70px var(--shadow)}
.result-card.enter{animation:popIn .5s var(--spring)}
@keyframes popIn{from{transform:scale(.86) translateY(16px);opacity:0}}
.r-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:58px;min-width:0}
#rClose{position:absolute;top:14px;right:14px;z-index:1;width:36px;height:36px;font-size:15px}
.r-top .meta{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.cover-wrap{position:relative;flex:none;width:min(300px,70vw,32vh);height:min(300px,70vw,32vh)}
/* the photo pops with the bass; a wavy, rounded-square outline moves around it and fades out at its edges */
.r-top .cover{position:relative;z-index:1;width:100%;height:100%;border-radius:20px;font-size:48px;box-shadow:0 18px 44px var(--shadow);will-change:transform}
.viz2{position:absolute;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
.r-top .meta b{font-size:26px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.r-top .meta .art{color:var(--mute);font-size:17px;overflow-wrap:anywhere}
.r-prog{height:6px;border-radius:99px;background:var(--fade);overflow:hidden}
.r-prog i{display:block;height:100%;width:0;background:var(--green)}
.r-btns{display:flex;gap:6px}
.r-btns{flex-wrap:wrap}
.r-btns .btn{height:46px;padding:0 14px;font-size:14px;flex:1 1 30%}
.r-btns .btn.main{flex:1.6 1 100%;height:50px;font-size:15px}
body.has-result{overflow:hidden}

/* ---------- 8. loading / error ---------- */
.screen{display:grid;place-items:center;text-align:center;gap:14px;padding:40px 0;color:var(--mute);font-size:14px}
.screen .btn{flex:none}
.eq{display:flex;gap:4px;align-items:flex-end;height:28px}
.eq i{width:5px;height:100%;border-radius:3px;background:var(--green);transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.4s}.eq i:nth-child(4){animation-delay:-.6s}.eq i:nth-child(5){animation-delay:-.8s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* ---------- 9. footer ---------- */
footer{border-top:1px solid var(--fade);padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;align-items:center;color:var(--mute);font-size:12px}
footer button{background:none;border:0;color:var(--mute);padding:0;font-size:12px;font-weight:600}
footer button:hover{color:var(--text)}
footer .acts{display:flex;gap:14px}

/* ---------- 10. start page: choose the music source ---------- */
.landing{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;overflow-y:auto;background:var(--page) no-repeat fixed,var(--bg)}
.lg-top{position:absolute;top:16px;right:16px}
.lg-card{width:min(460px,100%);display:flex;flex-direction:column;gap:16px;padding:30px 26px 24px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 70px var(--shadow)}
.lg-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1}
.lg-brand small{font-size:12px;font-weight:800;color:var(--green-ink);background:var(--green);padding:3px 7px;border-radius:6px;letter-spacing:0}
.lg-sub{margin:0;color:var(--mute);font-size:15px}
.lg-opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:16px;border:2px solid var(--line);background:var(--surface2);text-align:left}
.lg-opt:hover{border-color:var(--mute)}
.lg-logo{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff}
.lg-logo.dz{background:linear-gradient(135deg,#a238ff,#ef5466)}
.lg-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-txt b{font-size:19px}
.lg-txt small{color:var(--mute);font-size:13px;font-weight:600;line-height:1.35}
input.plain{width:100%;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;font-size:14px;padding:0 12px}
input.plain:focus{outline:none;border-color:rgba(var(--ac),.6)}
.langs button{padding:0 11px}
.langs .pill{width:calc((100% - 6px)/2)}
.langs[data-lang="en"] .pill{transform:translateX(100%)}
body.landing-on{overflow:hidden}

/* ---------- the wide "desktop" layout (Settings → Layout): fills the whole screen ---------- */
body.bounce .wrap,body.bounce .sidebar,body.bounce .result-bar{will-change:transform;transform-origin:50% 50%}
body.bounce .sidebar{transform-origin:0 100%}
body[data-layout="desktop"] .wrap{position:relative;max-width:none;margin:0;padding-inline:clamp(20px,2.4vw,44px);border-inline:0;min-height:100dvh}
/* the game-mode pill moves up into the top bar */
body[data-layout="desktop"] .modes{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 420px));max-width:none;margin:0;z-index:2}
body[data-layout="desktop"] main{padding:86px 0 24px;justify-content:flex-start}
/* a column on the left (the tries, and the flag below them) and the game in the rest of the width */
body[data-layout="desktop"] #app{display:grid;grid-template-columns:clamp(300px,26vw,440px) minmax(0,1fr);gap:24px clamp(32px,5vw,96px);align-items:center;min-height:calc(100dvh - 222px)}
.pane{display:flex;flex-direction:column;gap:18px;min-width:0}
body[data-layout="desktop"] .pane-side{gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(var(--wash),.06);box-shadow:0 14px 40px var(--shadow);background-clip:padding-box;border:0;padding:0;background:none;box-shadow:none;gap:18px;align-self:stretch}
body[data-layout="desktop"] .pane-side .guesses,body[data-layout="desktop"] .pane-side .side-cap{padding-inline:2px}
body[data-layout="desktop"]{--rowh:clamp(30px,4.3vh,44px)}
/* the tries menu shows five rows and scrolls for the rest (white has eight tries) */
body[data-layout="desktop"] .pane-side .guesses{position:relative;display:flex;gap:8px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(var(--wash),.06);box-shadow:0 14px 40px var(--shadow);max-height:calc(var(--rowh)*5 + 8px*4 + 28px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-behavior:smooth}
.flag-cap{margin-top:auto}
.side-cap{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
body[data-layout="desktop"] .pane-main{align-items:center;gap:clamp(18px,3vh,34px)}
body[data-layout="desktop"] .pane-main>*{width:100%;max-width:min(840px,100%)}
body[data-layout="desktop"]{--disc:clamp(150px,22vh,210px)}
body[data-layout="desktop"] .disc,body[data-layout="desktop"] .play{width:var(--disc);height:var(--disc)}
body[data-layout="desktop"] .player-area{padding-block:calc(var(--disc)*.44)}
body[data-layout="desktop"] .play svg{width:clamp(44px,6vh,62px);height:clamp(44px,6vh,62px)}
body[data-layout="desktop"] .stage-time strong{font-size:clamp(30px,4.4vh,46px)}
body[data-layout="desktop"] .track{height:30px}
body[data-layout="desktop"] .row{height:var(--rowh);flex:none;font-size:clamp(13px,1.7vh,15px)}
body[data-layout="desktop"] .row.slot{border-style:dashed;background:transparent;color:var(--mute);opacity:.6}
body[data-layout="desktop"] .row.slot.next{opacity:1;border-color:rgba(var(--ac),.7);color:var(--text);}
body[data-layout="desktop"] .search input,body[data-layout="desktop"] .guess-form .skip{height:56px}
/* the flag under the tries: the same flag, as wide as the column, with every name showing */
.flag-slot{width:100%}
.flag-slot .vflag{width:100%}
.flag-slot .stripe{width:100%;height:clamp(52px,7.4vh,84px)}
.flag-slot .flap-txt{display:flex}
.flag-slot .q{display:grid}
.flag-slot .flap-in{padding:0 clamp(14px,1.4vw,22px)}
.flag-slot .flap-in b{font-size:clamp(17px,1.1vw + 8px,25px)}
.flag-slot .flap-in small{font-size:clamp(12px,.6vw + 6px,15px)}
@media (max-height:820px){
  /* a short screen: tighter rows so the left column still fits */
  body[data-layout="desktop"] main{padding-top:72px}
  body[data-layout="desktop"] .pane-side{gap:12px}
  body[data-layout="desktop"] .pane-side .guesses{padding:10px;gap:6px;max-height:calc(var(--rowh)*5 + 6px*4 + 20px)}
}
@media (max-width:1000px){
  /* too narrow for two columns: the tries and the flag go above the game */
  body[data-layout="desktop"] #app{grid-template-columns:minmax(0,1fr);min-height:0}
  body[data-layout="desktop"] .modes{position:relative;top:auto;left:auto;transform:none;width:100%;max-width:520px;margin-inline:auto}
  body[data-layout="desktop"] main{padding-top:28px}
  body[data-layout="desktop"] .wrap{padding-inline:max(16px,env(safe-area-inset-left,0px))}
}

/* ---------- 11. dialogs ---------- */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;max-width:min(420px,calc(100% - 32px));padding:20px}
dialog[open]{animation:pop .35s var(--spring)}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog h3{margin:0 0 12px;font-size:16px}
dialog ol{padding-left:20px;margin:0 0 16px;display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--soft)}
dialog ol li::marker{color:var(--green);font-weight:700}
dialog .btn{width:100%}

/* settings */
dialog.settings{width:min(420px,calc(100% - 24px));max-width:none;padding:0}
dialog.settings[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow:hidden}
.set-body{display:flex;flex-direction:column;gap:12px;padding:6px 18px 20px;overflow-y:auto;min-height:0;scrollbar-width:thin}
.set-sec{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.set-sec .set-label{margin:0}
.set-sec .lang-choice button{background:var(--surface)}
.set-vol{display:flex;align-items:center;gap:10px}
.set-vol input{flex:1;min-width:0;accent-color:var(--green);margin:0;cursor:pointer}
.set-vol output{width:44px;text-align:right;font-size:12px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.set-links{display:grid;gap:8px}
.set-links .btn{width:100%;height:42px;justify-content:flex-start;padding:0 14px;background:var(--surface)}
.set-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.lang-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lang-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface2);text-align:left}
.lang-choice b{font-size:16px}
.lang-choice small{color:var(--mute);font-size:12px;font-weight:700}
.lang-choice button[aria-checked="true"]{border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--ac),.2)}

/* song editor and "add songs" popups */
dialog.editor{width:min(520px,calc(100% - 24px));max-width:none;padding:0;overflow:visible}   /* visible: the bass line is drawn outside the box */
dialog.editor.wide{width:min(1060px,calc(100% - 24px))}
dialog.editor[open]{display:flex;flex-direction:column;height:min(740px,calc(100dvh - 24px))}
.ed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 10px}
.ed-head h3{margin:0 0 2px}
.ed-head p{margin:0;color:var(--mute);font-size:13px}
.ed-head-r{display:flex;align-items:center;gap:10px;flex:none}
.ed-views .pill{width:calc((100% - 6px)/3)}
.ed-views[data-view="time"] .pill{transform:translateX(100%)}
.ed-views[data-view="find"] .pill{transform:translateX(200%)}
.ed-find-sub{margin:0;padding:0 18px 10px;color:var(--mute);font-size:13px}
#adCount{padding:8px 18px 0}

.ed-panel{display:flex;flex-direction:column;min-height:0;flex:1}
.ed-tools{display:flex;flex-direction:column;gap:10px;padding:0 18px}
.ed-status{min-height:18px;color:var(--mute);font-size:12px}
#adStatus{padding:8px 18px 0}   /* in the "add songs" popup the status line sits in line with the search box and the list */
.ed-list{flex:1;min-height:120px;overflow-y:auto;margin:6px 10px 0;padding:0 8px;list-style:none}
.ed-check{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid var(--line);background:none;color:var(--green-ink);display:grid;place-items:center;padding:0}
.ed-check svg{width:13px;height:13px;opacity:0}
.ed-check[aria-checked="true"]{background:var(--green);border-color:var(--green)}
.ed-check[aria-checked="true"] svg{opacity:1}
.ed-opts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 0 0}
.ed-acts{display:flex;gap:8px}
.ed-foot{display:flex;gap:8px;align-items:center;padding:12px 18px 18px}
.ed-foot .btn{flex:1}
.ed-foot .count{flex:none;color:var(--mute);font-size:12px;font-weight:600;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog .ed-more{width:auto;margin:8px 18px 0;flex:none}
/* playlists: chips on top, the songs in the middle, the playlist beside them; songs are dragged between them */
.ed-split{flex-direction:row;gap:14px;padding:0 18px;min-width:0}
.ed-side{flex:none;min-width:0;width:210px;display:flex;flex-direction:column;gap:8px;min-height:0;padding:12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.side-title{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);padding:0 6px}
.ed-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.pl-bar{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:thin}
.pl-chip{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:13px;font-weight:700;text-align:left}
.pl-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-chip small{font-size:11px;opacity:.75;font-weight:800}
.pl-chip.on{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.pl-chip.new{border-style:dashed;background:none;justify-content:center;color:var(--mute)}
.pl-chip.drop-over{outline:2px dashed var(--green);outline-offset:2px;color:var(--text)}
.ed-cols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ed-col{display:flex;flex-direction:column;min-height:0;gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);transition:border-color .2s,background-color .2s}
.ed-col.drop-over{border-color:var(--green);background:rgba(var(--ac),.1)}
.col-head{display:flex;align-items:center;gap:8px;min-height:38px;font-size:14px}
.col-count{margin-left:auto;color:var(--mute);font-size:12px;font-weight:700;white-space:nowrap}
.pl-name{flex:1;min-width:0;height:36px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;font-weight:800;font-size:15px;padding:0 8px}
.pl-name:hover,.pl-name:focus{border-color:var(--line);background:var(--surface);outline:none}
.ed-col .search{flex:none}
.ed-col .ed-list{margin:0;padding:0;min-height:0}
.ed-col .ed-list li{border:1px solid transparent}
.ed-list li[draggable="true"]{cursor:grab}
.ed-list li.dragging{opacity:.4}
.ed-list li.drop-before{box-shadow:0 -2px 0 var(--green)}
.ed-list.drop-end{box-shadow:inset 0 -2px 0 var(--green)}
.ed-add{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--line);background:none;color:var(--mute);font-weight:800;font-size:17px;line-height:1;display:grid;place-items:center;padding:0}
.ed-add svg{width:14px;height:14px}
.ed-add:hover{border-color:var(--green);color:var(--green)}
.ed-add[aria-checked="true"]{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.grip{flex:none;color:var(--mute);font-size:14px;letter-spacing:-2px;user-select:none}
.ed-rm{width:28px;height:28px;flex:none;border-radius:50%;border:0;background:none;color:var(--mute);font-size:14px;padding:0}
.ed-rm:hover{color:var(--red);background:var(--fade)}
.ed-hint{color:var(--mute);font-size:12px;text-align:center;padding:4px 6px}
.chip-btn{flex:none;height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:12px;font-weight:700;white-space:nowrap}
.chip-btn:hover{border-color:var(--green)}
.chip-btn[disabled]{opacity:.4;cursor:default;border-color:var(--line)}
.col-head .chip-btn{margin-left:auto}
/* the small ▶ on a song: listen without leaving the list; a ring fills while it plays */
.pvw{position:relative;flex:none;width:36px;height:36px}
.pvw .thumb{display:block}
.pv{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.58);cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:transform .15s var(--spring),background-color .2s}
.pv::after{content:"";position:absolute;inset:-5px}
.pv svg{position:relative;width:12px;height:12px;fill:currentColor;pointer-events:none}
.pv:hover{transform:scale(1.14);background:rgba(0,0,0,.78)}
.pv.on{background:conic-gradient(var(--green) var(--p,0%),rgba(255,255,255,.25) 0)}
.pv.on::before{content:"";position:absolute;inset:3px;border-radius:50%;background:rgba(0,0,0,.85)}
.pv.busy svg{animation:pvPulse .8s ease-in-out infinite}
@keyframes pvPulse{50%{opacity:.3}}
.switch{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:13px;font-weight:700;color:var(--text);text-align:left}
.switch .track-s{position:relative;flex:none;width:40px;height:22px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);transition:background-color .2s,border-color .2s}
.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--mute);transition:transform .3s var(--spring),background-color .2s}
.switch[aria-checked="true"] .track-s{background:rgba(var(--ac),.25);border-color:var(--green)}
.switch[aria-checked="true"] .knob{transform:translateX(18px);background:var(--green)}
.switch small{display:block;color:var(--mute);font-size:11px;font-weight:600}
/* timing sliders */
.tm{flex:1;overflow-y:auto;padding:4px 18px 8px;display:flex;flex-direction:column;gap:14px}
.tm h4{margin:0;font-size:14px}
.tm p{margin:0;color:var(--mute);font-size:12.5px}
.tm-count{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.tm-count span{display:flex;gap:8px}
.tm-count .icon-btn{width:36px;height:36px;font-size:20px;line-height:1}
.tm-count .icon-btn[disabled]{opacity:.35;cursor:default}
.tm-rm[disabled]{opacity:.25;cursor:default}
.tm-row{display:grid;grid-template-columns:90px 1fr 56px 30px;align-items:center;gap:10px;font-size:13px}
.tm-row label{color:var(--mute);font-weight:700}
.tm-row output{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--green)}
.tm input[type=range]{width:100%;accent-color:var(--green);margin:0;cursor:pointer}
@media (max-width:860px){
  .ed-cols{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .ed-head p{display:none}
  /* on a narrow screen the playlists sit in a strip above the songs */
  .ed-split{flex-direction:column;gap:10px}
  .ed-side{width:100%;flex-direction:row;align-items:center;padding:8px}
  .side-title{display:none}
  .pl-bar{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .pl-chip{width:auto;max-width:200px}
}

@media (max-width:360px){.guess-form .skip em{display:none}}
/* switching mode: the old page fades out, the new one slides in (from the side the mode lies on), its parts one after another;
   switching difficulty also sends a wave of the new colour out from the pressed stripe (it never blocks a click) */
#app.mode-out>*{opacity:0;transform:translateX(calc(var(--mx,0px)*-.4));transition:opacity .14s ease,transform .14s ease;pointer-events:none}
#app.mode-in>*{animation:modeIn .4s cubic-bezier(.2,.8,.25,1) both}
#app.mode-in>*:nth-child(n+2){animation-delay:.04s}
#app.mode-in>*:nth-child(n+4){animation-delay:.08s}
@keyframes modeIn{from{opacity:0;transform:translateX(var(--mx,0px)) translateY(10px)}}
.theme-ripple{position:fixed;z-index:70;pointer-events:none;border-radius:50%;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .eq i{animation:none;transform:scaleY(.6)}
}

/* css/polish.css */
/* =====================================================================================================
   MODERN POLISH: the soft look above, refined: glass panels, a soft mesh-gradient background, gradient accents,
   gentle glows, smoother motion. (Last in the file, so it layers over the base styles.)
   ===================================================================================================== */
body{
  --glass:color-mix(in srgb,var(--surface) 58%,transparent);
  --glass2:color-mix(in srgb,var(--surface2) 62%,transparent);
  --glass-solid:color-mix(in srgb,var(--surface) 88%,transparent);
  --hi:rgba(255,255,255,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";
}
/* a flat background in the colour of the theme */
body,.landing{background:var(--page) no-repeat fixed,var(--bg)}
.wrap{border-inline:1px solid rgba(var(--wash),.08)}
dialog::backdrop{background:rgba(4,8,6,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}

/* glass panels */
.lg-card,.result-card,.pane-side .guesses{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--hi);box-shadow:0 24px 60px rgba(0,0,0,.4)}
dialog{background:var(--glass-solid);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border:1px solid var(--hi);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lg-card,.result-card{border-radius:28px}
.ed-col,.ed-side,.set-sec{background:color-mix(in srgb,var(--surface2) 55%,transparent);border:1px solid var(--hi);border-radius:18px}
.tip{background:var(--glass-solid);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--hi);border-radius:14px}

/* type: tighter headings, quiet small caps for labels */
h1,h2,h3,h4,.lg-txt b,.r-top .meta b{letter-spacing:-.02em}
.set-label,.side-cap,.lg-choose,.side-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* rows, inputs, bars */
.row{background:var(--glass2);border:1px solid var(--hi);border-radius:12px}
.track{background:var(--glass);border:1px solid var(--hi)}
.seg.open{background:rgba(var(--ac),.28)}
.seg i{background:var(--green)}
.search input,input.plain,.guess-form .skip{background:var(--glass2);border:1px solid var(--hi);border-radius:14px;transition:border-color .25s,box-shadow .25s,background-color .25s}
.search input:focus,input.plain:focus{border-color:rgba(var(--ac),.7);box-shadow:0 0 0 4px rgba(var(--ac),.14)}
.list{background:var(--glass-solid);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--hi);border-radius:16px}
.list li,.ed-list li{border-radius:10px}
.thumb{border-radius:9px}
.mini,.icon-btn{background:var(--glass2);border:1px solid var(--hi);transition:transform .25s var(--ease),border-color .2s,color .2s,background-color .2s}
.icon-btn:hover,.mini:hover{border-color:rgba(var(--ac),.5)}
:focus-visible{outline:2px solid rgba(var(--ac),.85)!important;outline-offset:3px!important}

/* buttons: glass, a soft lift, and an accent gradient with a glow for the main one */
.btn{border-radius:14px;background:var(--glass2);border:1px solid var(--hi);transition:transform .25s var(--ease),box-shadow .25s,background-color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);border-color:rgba(var(--ac),.55);background:color-mix(in srgb,var(--surface2) 80%,transparent)}
.btn.main{background:var(--green);border:0;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.btn.main:hover{box-shadow:0 12px 26px rgba(0,0,0,.36);border:0;background:var(--green)}
.chip-btn{background:var(--glass2);border:1px solid var(--hi);border-radius:10px}
.chip-btn:hover{border-color:rgba(var(--ac),.55)}
.seg-ctl{background:var(--glass);border:1px solid var(--hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.seg-ctl .pill{background:var(--green);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.pl-chip{background:var(--glass2);border:1px solid var(--hi);border-radius:12px}
.pl-chip.on{background:var(--green);border-color:transparent}
.lg-opt{background:var(--glass2);border:1px solid var(--hi);border-radius:18px;transition:transform .3s var(--ease),border-color .25s,box-shadow .3s}
.lg-opt:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.lg-logo{border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.switch .track-s{background:var(--glass2);border-color:var(--hi)}
.switch[aria-checked="true"] .track-s{background:rgba(var(--ac),.45);border-color:var(--green)}
.switch .knob{box-shadow:0 2px 6px rgba(0,0,0,.4)}
.lang-choice button{background:var(--glass2);border:1px solid var(--hi);border-radius:14px}
.lang-choice button[aria-checked="true"]{border-color:rgba(var(--ac),.8);box-shadow:0 0 0 3px rgba(var(--ac),.18)}

/* the play button: a lit sphere with a soft glow */
.play{background:var(--green);border:0;box-shadow:0 14px 34px rgba(0,0,0,.38)}
.play:hover{box-shadow:0 18px 40px rgba(0,0,0,.44);filter:brightness(1.06)}
.stage-time strong{letter-spacing:-.03em}
.r-top .cover{border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.result-bar{background:linear-gradient(180deg,rgba(var(--wash),.2),transparent 60%),var(--bg)}
.score i,.r-prog{height:7px}
.r-prog i{background:var(--green)}
footer{border-top:1px solid var(--hi)}

/* css/editor.css */
/* =====================================================================================================
   HACK-CLIENT STYLE SONG EDITOR: a dark workspace of floating modules (Playlists, Songs, Playlist, Options, Search,
   Clip times). Each one is dragged by its title, folded with a click on it, and resized from its corner.
   ===================================================================================================== */
body{--mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono","Courier New",monospace}
dialog.editor.hack{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden;color:var(--text)}
dialog.editor.hack[open]{display:block;animation:hkFade .25s ease}
@keyframes hkFade{from{opacity:0}}
dialog.editor.hack::backdrop{background:rgba(2,4,5,.74);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.hk-bar{position:absolute;z-index:2;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 14px;pointer-events:none}
.hk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hk-bar>*{pointer-events:auto}
.hk-bar-r{margin-left:auto;display:flex;gap:8px;align-items:center}

.hk-panel{position:absolute;z-index:10;display:flex;flex-direction:column;min-width:210px;min-height:34px;overflow:hidden;resize:both;
  background:color-mix(in srgb,var(--bg) 90%,#000);border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--green);border-radius:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);font-size:13px}
.hk-panel.moving{opacity:.9;box-shadow:0 18px 44px rgba(0,0,0,.65)}
.hk-panel.col{height:auto!important;min-height:0;resize:none}
.hk-panel.col .hk-body{display:none}
.hk-panel.flash{animation:hkFlash 1s ease}
@keyframes hkFlash{0%,50%{box-shadow:0 0 0 2px var(--green),0 12px 34px rgba(0,0,0,.55)}100%{box-shadow:0 12px 34px rgba(0,0,0,.55)}}
.hk-head{flex:none;display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;background:rgba(0,0,0,.38);cursor:grab;user-select:none;touch-action:none;
  font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.hk-panel.moving .hk-head{cursor:grabbing}
.hk-ico{width:8px;height:8px;background:var(--green);flex:none;border-radius:2px}
.hk-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-arrow{margin-left:auto;color:var(--mute);transition:transform .2s}
.hk-panel.col .hk-arrow{transform:rotate(-90deg)}
.hk-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px;overflow:auto;scrollbar-width:thin}
.hk-panel>.ed-col.hk-body{border:0;border-radius:0;background:transparent;padding:10px}
.hk-panel .ed-list{flex:1;min-height:60px;overflow-y:auto;margin:0;padding:0}
.hk-panel .ed-list li{padding:4px 6px;border-radius:5px;border-left:2px solid transparent;font-size:13px}
.hk-panel .ed-list li:has(.ed-add[aria-checked="true"]),.hk-panel .ed-list li:has(.ed-check[aria-checked="true"]){border-left-color:var(--green);background:rgba(var(--ac),.1)}
.hk-panel .pl-bar{flex:1;overflow-y:auto}
.hk-panel .pl-chip{min-height:34px;border-radius:5px;font:600 12px var(--mono);letter-spacing:.04em}
.hk-panel .col-head{min-height:32px}
.hk-panel .col-count,.hk-panel .ed-status,.hk-panel .ed-hint,.hk-panel .ed-find-sub{font-family:var(--mono);font-size:11px}
.hk-panel .ed-find-sub{margin:0;padding:0;color:var(--mute)}
.hk-panel #adStatus,.hk-panel #adCount{padding:0}
.hk-panel .search{flex:none}
.hk-panel .search input{height:38px;font-size:14px;border-radius:5px}
.hk-opts{gap:12px}
.hk-opts .btn.main{width:100%}
.hk-panel .chip-btn{border-radius:5px;font-family:var(--mono)}
.hk-panel .tm{padding:0;gap:12px;overflow:visible}
.hk-panel .tm-row{grid-template-columns:58px 1fr 54px 26px;gap:8px}
.hk-panel .tm-row label,.hk-panel .tm-row output{font-family:var(--mono);font-size:12px}
.hk-panel .tm h4{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.hk-panel .tm p{font-size:11.5px}
.hk-panel .pv{border-radius:5px}
.bass-body{padding:0;gap:0;overflow:hidden}
.bass-stage{position:relative;flex:1;min-height:120px}
.bass-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.bass-label{flex:none;min-height:1.5em;padding:0 10px 10px;text-align:center;font:11px var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- smaller modules ---- */
.hk-panel{min-width:170px;font-size:12px}
.hk-head{height:28px;gap:8px;padding:0 9px;font-size:11px}
.hk-body{padding:8px;gap:6px}
.hk-panel>.ed-col.hk-body{padding:8px}
.hk-panel .ed-list li{padding:3px 5px;gap:8px}
.hk-panel .pvw,.hk-panel .thumb{width:28px;height:28px}
.hk-panel .pv{width:20px;height:20px}
.hk-panel .pv svg{width:9px;height:9px}
.hk-panel .meta b{font-size:12px}
.hk-panel .meta span{font-size:11px}
.hk-panel .search input{height:32px;font-size:13px}
.hk-panel .ed-add,.hk-panel .ed-check{width:22px;height:22px;font-size:15px}
.hk-panel .ed-rm{width:22px;height:22px}
.hk-panel .grip{font-size:12px}
.hk-panel .pl-chip{min-height:28px;font-size:11px;padding:0 9px}
.hk-panel .col-head{min-height:28px}
.hk-panel .pl-name{height:28px;font-size:13px}
.hk-panel .icon-btn{width:26px;height:26px}
.hk-panel .chip-btn{height:26px;font-size:11px;padding:0 9px}
.hk-opts .btn.main{height:34px;font-size:13px}
.hk-panel .switch{font-size:12px}
.hk-panel .tm{gap:9px}
.hk-panel .tm-row{grid-template-columns:50px 1fr 46px 22px;gap:6px}
.hk-panel .tm-count .icon-btn{width:28px;height:28px;font-size:16px}
.bass-label{font-size:10px;padding:0 8px 8px}


/* MAIN MENU: no card and no boxes, just text on the page */
.lg-card{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0;gap:14px}
.lg-opt{background:none;border:0;border-radius:0;box-shadow:none;padding:6px 0;gap:0;transition:transform .3s var(--ease),opacity .2s}
.lg-opt:hover{background:none;border:0;box-shadow:none;transform:translateX(8px)}
.lg-logo{display:none}
.lg-txt b{font-size:26px;letter-spacing:-.02em}
.lg-txt b::after{content:" →";opacity:0;transition:opacity .25s}
.lg-opt:hover .lg-txt b::after,.lg-opt:focus-visible .lg-txt b::after{opacity:1}
.lg-opt{flex-direction:column;align-items:flex-start}

/* ---------- MAIN MENU: a black screen; the white, green and red of the flag bar project light ---------- */
.landing{background:#000}
.lg-lights{position:fixed;inset:0;pointer-events:none;z-index:0}
.lg-l{position:absolute;top:0;bottom:0;animation:lgPulse 5.5s ease-in-out infinite alternate}
.lg-l.w{left:0;width:var(--w1,33%);background:radial-gradient(farthest-corner at var(--wcx,20%) var(--by,40%),rgba(255,255,255,.5) 0,rgba(255,255,255,.4) 9%,rgba(255,255,255,.3) 42%,rgba(255,255,255,.17) 80%,rgba(255,255,255,.1) 100%)}
.lg-l.g{left:var(--w1,33%);width:calc(var(--w2,66%) - var(--w1,33%));animation-delay:-1.8s;background:linear-gradient(180deg,rgba(0,150,110,.32) 0,rgba(0,150,110,.55) calc(var(--by,40%)*.55),rgba(0,150,110,.92) var(--by,40%),rgba(0,150,110,.6) calc(var(--by,40%) + (100% - var(--by,40%))*.42),rgba(0,150,110,.3) 100%)}
.lg-l.r{left:var(--w2,66%);right:0;animation-delay:-3.6s;background:radial-gradient(farthest-corner at var(--rcx,76px) var(--by,40%),rgba(214,38,18,.9) 0,rgba(214,38,18,.75) 9%,rgba(214,38,18,.55) 42%,rgba(214,38,18,.3) 80%,rgba(214,38,18,.18) 100%)}
@keyframes lgPulse{from{opacity:.72}to{opacity:1}}
.lg-card{position:relative;z-index:1;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.lg-top{z-index:2}
.flagbar{height:10px}
.lg-sub,.lg-choose,.lg-txt small,.lg-note{color:rgba(255,255,255,.9)}

/* ---------- MAIN MENU BUTTONS: light, thin and text-led, to sit on the projected colours ---------- */
.lg-top .seg-ctl{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:4px}
.lg-top .seg-ctl .pill{display:none}
.lg-top .seg-ctl button{height:34px;padding:0 12px;font-size:13px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.55);border-bottom:2px solid transparent;border-radius:0;transition:color .2s,border-color .2s}
.lg-top .seg-ctl button:hover{color:#fff}
.lg-top .seg-ctl button[aria-pressed="true"]{color:#fff;border-bottom-color:#fff}
.lg-opt{position:relative;padding:8px 0 10px}
.lg-opt::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:#fff;transition:width .35s var(--ease)}
.lg-opt:hover::after,.lg-opt:focus-visible::after{width:100%}
.lg-opt:active{transform:translateX(4px) scale(.99)}
.lg-txt b::after{opacity:.45}

/* css/site.css */
/* =====================================================================================================
   WHOLE SITE, in the style of the main menu: a black screen; white, green and red light from three lamps along the top edge,
   kept apart by invisible walls at a third and two thirds of the width (the colour of the chosen difficulty burns brightest);
   no cards or boxes, and thin, text-led controls.
   ===================================================================================================== */
body[data-diff]{--bg:#000;--surface:#0a0c0b;--surface2:#131614;--line:rgba(255,255,255,.2);--mute:#b4bcb7;--soft:#d5dbd7;--text:#f2f5f3;--fade:rgba(255,255,255,.07)}
body,body.landing-on{background:#000}
.site-lights{position:fixed;inset:0;pointer-events:none;z-index:0}
.site-lights::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#fff 33.33%,#00966e 33.33% 66.66%,#d62612 66.66%)}
.sl{position:absolute;top:0;bottom:0;opacity:.5;transition:opacity .7s ease}
/* each light covers the whole screen and fades out smoothly before it reaches any edge: white from the left corner, red from the right, green from the middle */
.sl.w{left:0;right:0;background:radial-gradient(ellipse 88% 125% at 0% 0%,rgba(255,255,255,0.450) 0%,rgba(255,255,255,0.387) 12%,rgba(255,255,255,0.306) 26%,rgba(255,255,255,0.225) 40%,rgba(255,255,255,0.153) 55%,rgba(255,255,255,0.090) 70%,rgba(255,255,255,0.041) 84%,rgba(255,255,255,0.013) 94%,rgba(255,255,255,0.000) 100%)}
.sl.g{left:0;right:0;background:radial-gradient(ellipse 56% 125% at 50% 0%,rgba(0,150,110,0.850) 0%,rgba(0,150,110,0.731) 12%,rgba(0,150,110,0.578) 26%,rgba(0,150,110,0.425) 40%,rgba(0,150,110,0.289) 55%,rgba(0,150,110,0.170) 70%,rgba(0,150,110,0.076) 84%,rgba(0,150,110,0.025) 94%,rgba(0,150,110,0.000) 100%)}
.sl.r{left:0;right:0;background:radial-gradient(ellipse 88% 125% at 100% 0%,rgba(214,38,18,0.850) 0%,rgba(214,38,18,0.731) 12%,rgba(214,38,18,0.578) 26%,rgba(214,38,18,0.425) 40%,rgba(214,38,18,0.289) 55%,rgba(214,38,18,0.170) 70%,rgba(214,38,18,0.076) 84%,rgba(214,38,18,0.025) 94%,rgba(214,38,18,0.000) 100%)}
body[data-diff="white"] .sl.w,body[data-diff="green"] .sl.g,body[data-diff="red"] .sl.r{opacity:1}
.wrap{position:relative;z-index:1;background:none;border-inline:0;text-shadow:0 1px 10px rgba(0,0,0,.55)}

/* panels and cards: gone, the text sits straight on the lights */
.pane-side .guesses{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-layout="desktop"] .pane-side .guesses{background:none;border:0;border-radius:0;box-shadow:none;padding:2px}
.result-bar{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.result-card{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
dialog{background:rgba(6,6,6,.94);border:1px solid rgba(255,255,255,.22);border-radius:6px;box-shadow:0 22px 60px rgba(0,0,0,.7)}
dialog.editor.hack{background:transparent;border:0;box-shadow:none}
.set-sec{background:none;border:0;border-top:1px solid rgba(255,255,255,.18);border-radius:0;padding:14px 0 0}
.list,.tip{background:#050505;border:1px solid rgba(255,255,255,.3);border-radius:4px}
.track{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);border-radius:6px}
.seg,.seg i{border-radius:3px}
.row{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);border-radius:4px}

/* controls: thin, text-led */
.btn{background:transparent;border:1px solid rgba(255,255,255,.42);border-radius:4px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;box-shadow:none}
.btn:hover{transform:none;background:rgba(255,255,255,.13);border-color:#fff}
.btn.main{background:#fff;color:#07130d;border-color:#fff}
.btn.main:hover{background:#e7ece9;box-shadow:none;border-color:#fff}
.icon-btn,.mini{background:transparent;border:1px solid rgba(255,255,255,.42);border-radius:50%;color:#fff}
.icon-btn:hover,.mini:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}
.chip-btn,.pl-chip,.lang-choice button{background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:4px;color:#fff}
.chip-btn{font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.chip-btn:hover,.pl-chip:hover,.lang-choice button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.pl-chip.on,.lang-choice button[aria-checked="true"]{background:#fff;color:#07130d;border-color:#fff;box-shadow:none}
.lang-choice button[aria-checked="true"] small{color:#33473d}
.search input,input.plain,.guess-form .skip{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3);border-radius:4px}
.guess-form .skip:hover{border-color:#fff}
.search input:focus,input.plain:focus{border-color:#fff;box-shadow:none}
.seg-ctl{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:4px}
.seg-ctl .pill{display:none}
.seg-ctl button{height:34px;padding:0 12px;color:rgba(255,255,255,.58);font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent;border-radius:0;transition:color .2s,border-color .2s}
.seg-ctl button:hover{color:#fff}
.seg-ctl button[aria-pressed="true"]{color:#fff;border-bottom-color:#fff}
.modes{display:flex;justify-content:center}
.modes button{flex:none;padding:0 18px}

/* bass module: a live level in the title */
.hk-read{margin-left:auto;min-width:36px;text-align:right;font:700 11px var(--mono);color:var(--green)}
#pnBass .hk-arrow{margin-left:8px}

/* ---------- SONG EDITOR in the style of the rest of the site: plain type, thin outlines, the lights showing through ---------- */
body{--mono:"Inter","Segoe UI Variable","Segoe UI",system-ui,sans-serif}
dialog.editor.hack::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hk-panel{background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.24);border-radius:4px;box-shadow:none}
.hk-panel.moving{box-shadow:0 14px 34px rgba(0,0,0,.55);opacity:.92}
.hk-head{height:30px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.16);font:800 11px/1 var(--font);letter-spacing:.11em;color:#fff}
.hk-ico{width:10px;height:2px;border-radius:0;background:#fff}
.hk-arrow{color:rgba(255,255,255,.7)}
.hk-read{color:#fff;font:800 11px var(--font)}
.hk-panel.flash{animation:hkFlash2 1s ease}
@keyframes hkFlash2{0%,50%{box-shadow:0 0 0 2px rgba(255,255,255,.7)}100%{box-shadow:none}}
.hk-panel .col-count,.hk-panel .ed-status,.hk-panel .ed-hint,.hk-panel .ed-find-sub,.bass-label{font-family:var(--font)}
.hk-panel .pl-chip{border-radius:4px;font:700 12px var(--font);letter-spacing:.04em}
.hk-panel .ed-list li{border-radius:3px}
.hk-panel .ed-list li:has(.ed-add[aria-checked="true"]),.hk-panel .ed-list li:has(.ed-check[aria-checked="true"]){border-left-color:#fff;background:rgba(255,255,255,.1)}
.hk-panel .ed-add[aria-checked="true"],.hk-panel .ed-check[aria-checked="true"]{background:#fff;border-color:#fff;color:#07130d}
.hk-panel .ed-add:hover{border-color:#fff;color:#fff}
.hk-panel .pv{border-radius:50%}
.hk-panel .pv.on{background:conic-gradient(#fff var(--p,0%),rgba(255,255,255,.25) 0)}
.hk-bar h3{color:#fff}

/* css/patriotic.css */
/* =====================================================================================================
   PATRIOTIC: the white, green and red of the Bulgarian flag as a thread through everything: the three-colour line on
   headers, popups and buttons, flag-coloured loading bars, flag-coloured confetti, a mini flag on every module
   ===================================================================================================== */
body{--trico:linear-gradient(90deg,#fff 33.33%,#00966e 33.33% 66.66%,#d62612 66.66%)}
/* the screen is framed by the flag at the top and the bottom */
.site-lights::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--trico)}
/* a three-colour line under the header and above the footer */
.top{padding-bottom:12px;border-bottom:3px solid transparent;border-image:var(--trico) 1}
footer{border-top:3px solid transparent;border-image:var(--trico) 1}
/* popups: the line along their top edge */
dialog:not(.hack)::before,.result-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--trico);pointer-events:none;z-index:3}
.result-card{padding-top:100px}
/* the chosen tab or language is underlined in the three colours */
.seg-ctl button[aria-pressed="true"]{border-bottom:3px solid transparent;border-image:var(--trico) 1}
/* main buttons stand on a three-colour edge */
.btn.main{position:relative;overflow:hidden}
.btn.main::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--trico)}
/* every editor module carries a small flag */
.hk-ico{width:16px;height:11px;border-radius:1px;background:linear-gradient(180deg,#fff 33.33%,#00966e 33.33% 66.66%,#d62612 66.66%);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.hk-panel{border-top:3px solid transparent;border-image:var(--trico) 1}
/* the loader: bars in the colours of the flag */
.eq i:nth-child(1),.eq i:nth-child(2){background:#fff}
.eq i:nth-child(3){background:#00b383}
.eq i:nth-child(4),.eq i:nth-child(5){background:#e0301a}

/* ---------- MAIN MENU, larger and centred: a big title over a longer, thicker flag bar that is the lamp of the three lights ---------- */
.lg-card{width:min(820px,100%);gap:20px;text-align:center}
.lg-brand{justify-content:center;font-size:clamp(64px,10vw,132px);gap:18px;letter-spacing:-.035em;line-height:1}
.lg-brand small{font-size:clamp(14px,1.9vw,26px);padding:5px 12px}
.lg-card .flagbar{height:20px;border-radius:99px;overflow:hidden}
.lg-card .flagbar i,.lg-card .flagbar i:first-child,.lg-card .flagbar i:last-child{border-radius:0;opacity:1}
.lg-sub{font-size:clamp(19px,2.4vw,27px);margin-top:4px}
.lg-opt{align-self:center;align-items:center;padding:8px 0 12px}
.lg-opt{text-align:center}
.lg-txt{align-items:center;text-align:center}
.lg-opt:hover{transform:scale(1.04)}
.lg-opt:active{transform:scale(.99)}
.lg-opt::after{left:50%;transform:translateX(-50%)}
.lg-txt b{font-size:clamp(34px,5vw,56px)}
.lg-txt small{font-size:clamp(15px,1.7vw,20px)}

/* no flag lines along the screen edges, under the header or above the footer */
.site-lights::before,.site-lights::after{display:none}
.top{border-bottom:0;border-image:none}
footer{border-top:0;border-image:none}

/* the light of the chosen difficulty glows much stronger and breathes; the other two stay dim */
.sl{opacity:0}   /* the lights that are not selected are off: the background is black */
.sl::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.sl.w::after{background:radial-gradient(ellipse 88% 125% at 0% 0%,rgba(255,255,255,0.500) 0%,rgba(255,255,255,0.430) 12%,rgba(255,255,255,0.340) 26%,rgba(255,255,255,0.250) 40%,rgba(255,255,255,0.170) 55%,rgba(255,255,255,0.100) 70%,rgba(255,255,255,0.045) 84%,rgba(255,255,255,0.015) 94%,rgba(255,255,255,0.000) 100%)}
.brand .wm,.lg-brand .wm{text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.65)}
.sl.g::after{background:radial-gradient(ellipse 56% 125% at 50% 0%,rgba(0,185,135,0.850) 0%,rgba(0,185,135,0.731) 12%,rgba(0,185,135,0.578) 26%,rgba(0,185,135,0.425) 40%,rgba(0,185,135,0.289) 55%,rgba(0,185,135,0.170) 70%,rgba(0,185,135,0.076) 84%,rgba(0,185,135,0.025) 94%,rgba(0,185,135,0.000) 100%)}
.sl.r::after{background:radial-gradient(ellipse 88% 125% at 100% 0%,rgba(240,52,28,0.900) 0%,rgba(240,52,28,0.774) 12%,rgba(240,52,28,0.612) 26%,rgba(240,52,28,0.450) 40%,rgba(240,52,28,0.306) 55%,rgba(240,52,28,0.180) 70%,rgba(240,52,28,0.081) 84%,rgba(240,52,28,0.027) 94%,rgba(240,52,28,0.000) 100%)}
body[data-diff="white"] .sl.w::after,body[data-diff="green"] .sl.g::after,body[data-diff="red"] .sl.r::after{opacity:1;animation:slBreath 4.5s ease-in-out infinite alternate}
@keyframes slBreath{from{opacity:.6}to{opacity:1}}

.tm-lock{margin:0 0 4px;padding:8px 10px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.06);color:#fff;font-size:12px;line-height:1.45}
.tm input[type=range][disabled],.tm .icon-btn[disabled],.tm .ed-rm[disabled],.tm .btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- DIFFICULTY MENU (wide screens), in the style of the site: three text rows with a flag-coloured edge; the chosen one is lit in its colour ---------- */
@media (min-width:1350px){
  .vflag{filter:none;gap:8px}
  .stripe{height:62px}
  .stripe .flap-in,.stripe:first-of-type .flap-in,.stripe:last-of-type .flap-in{background:rgba(0,0,0,.4);color:#fff;opacity:1;border:1px solid rgba(255,255,255,.2);border-left:6px solid var(--c);border-radius:3px;padding:0 16px;transition:background-color .35s,border-color .35s,box-shadow .35s}
  .flap-in b{font-size:21px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
  .flap-in small{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
  .stripe:not(.on):hover .flap-in{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
  .stripe.on .flap-in{background:color-mix(in srgb,var(--c) 30%,rgba(0,0,0,.45));border-color:var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 45%,transparent)}
  .stripe .q{border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent}
  .stripe .q:hover,.stripe .q:focus-visible{background:rgba(255,255,255,.16)}
  .stripe[data-d="white"]{--ink:#fff}
}

/* ---------- DIFFICULTY MENU: still a flag. The three rows touch and are tinted in white, green and red; the chosen one is solid flag colour ---------- */
@media (min-width:1350px){
  .vflag{gap:0}
  .stripe .flap-in,.stripe:first-of-type .flap-in,.stripe:last-of-type .flap-in{background:color-mix(in srgb,var(--c) 34%,rgba(0,0,0,.45));border-radius:0}
  .stripe:first-of-type .flap-in{border-radius:6px 6px 0 0}
  .stripe:last-of-type .flap-in{border-radius:0 0 6px 6px}
  .stripe:not(.on):hover .flap-in{background:color-mix(in srgb,var(--c) 46%,rgba(0,0,0,.45));border-color:rgba(255,255,255,.4)}
  .stripe.on .flap-in{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 0 24px color-mix(in srgb,var(--c) 55%,transparent)}
  .stripe[data-d="white"].on .flap-in{color:#0a2a1d}
  .stripe[data-d="white"].on .flap-in small{opacity:.8}
  .stripe[data-d="white"].on .q{color:#0a2a1d;border-color:rgba(10,42,29,.6)}
  .stripe[data-d="white"].on .q:hover{background:rgba(10,42,29,.12)}
}

/* ---------- editor: the pencil on every song and the Song start module ---------- */
.ed-edit{width:22px;height:22px;flex:none;border:0;border-radius:50%;background:none;color:var(--mute);font-size:13px;padding:0;display:grid;place-items:center;cursor:pointer}
.ed-edit:hover{color:#fff;background:rgba(255,255,255,.14)}
.hk-start{gap:10px}
.st-song{min-height:1.4em;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-bar{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.14)}
.st-bar i{position:absolute;top:0;bottom:0;border-radius:6px;background:#fff;transition:left .12s,width .12s}
.st-times{display:flex;justify-content:space-between;margin-top:-4px;font-size:10px;font-weight:700;color:var(--mute)}
.hk-start input[type=range]{width:100%;margin:0;accent-color:#fff;cursor:pointer}
.hk-start input[type=range][disabled]{opacity:.35;cursor:not-allowed}
.st-read{min-height:1.2em;font-size:20px;font-weight:800;letter-spacing:-.01em}

/* ---------- Song start module, the larger version ---------- */
.ed-edit.set{color:#fff;background:rgba(255,255,255,.2)}
.hk-panel.drop-over{outline:2px dashed #fff;outline-offset:-5px}
.hk-start{gap:10px}
.st-empty{flex:1;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:2px dashed rgba(255,255,255,.3);border-radius:6px;color:var(--mute)}
.st-empty b{font-size:16px;color:#fff}
.st-empty span{font-size:12px}
.hk-panel.drop-over .st-empty{border-color:#fff;background:rgba(255,255,255,.08)}
.st-main{display:flex;flex-direction:column;gap:10px}
.st-main[hidden]{display:none}
.st-top{display:flex;align-items:center;gap:8px}
.st-top .icon-btn{flex:none;font-size:18px;line-height:1}
.st-song{flex:1;min-width:0;text-align:center;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-wavebox{position:relative;height:74px;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:rgba(255,255,255,.04);overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none}
.st-wavebox canvas{position:absolute;inset:0;width:100%;height:100%}
#stWin{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.12);border-left:2px solid #fff;border-right:2px solid rgba(255,255,255,.55);pointer-events:none}   /* no easing: it must stay exactly on the bright bars while it is dragged */
#stHead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--green);opacity:0;pointer-events:none}
.st-times{display:flex;justify-content:space-between;margin-top:-6px;font-size:10px;font-weight:700;color:var(--mute)}
.st-nudge{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.st-nudge .chip-btn{min-width:44px;padding:0 8px}
.st-num{display:flex;align-items:center;gap:4px;height:34px;padding:0 8px;border:1px solid rgba(255,255,255,.4);border-radius:4px;background:rgba(0,0,0,.4)}
.st-num input{width:56px;border:0;background:none;color:#fff;font:800 17px var(--font);text-align:center;outline:none;-moz-appearance:textfield}
.st-num input::-webkit-outer-spin-button,.st-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-num span{font-size:12px;color:var(--mute);font-weight:700}
.st-jump{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
#stJumps{display:flex;gap:5px;flex-wrap:wrap}
#stJumps .chip-btn{min-width:34px;padding:0 8px}
.st-acts{display:flex;gap:6px;flex-wrap:wrap}
.st-acts .chip-btn{flex:1 1 auto}

/* bass module: the photo of the song in the middle */
.bass-cover{position:absolute;left:50%;top:50%;width:80px;height:80px;border-radius:12px;background:rgba(255,255,255,.06) center/cover no-repeat;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:30px;will-change:transform;transform:translate(-50%,-50%);pointer-events:none}
.bass-cover.has span{display:none}
.bass-cover.has{border-color:rgba(255,255,255,.12)}

/* light bulbs: a click on the empty background switches on one of the lights that are off, with a flicker like a bulb warming up
   (spam clicking lights all three); a few seconds after the last click they fade out again */
.sl.bulb{opacity:1;animation:bulbOn .85s linear both}
.sl.bulb::after,.sl.bulb-off::after{opacity:1}
.sl.bulb-off{animation:bulbOff 1.1s ease-out both}
@keyframes bulbOn{0%{opacity:0}7%{opacity:1}13%{opacity:.1}21%{opacity:.95}29%{opacity:.25}41%{opacity:1}53%{opacity:.6}66%{opacity:1}100%{opacity:1}}
@keyframes bulbOff{from{opacity:1}to{opacity:0}}

/* DISCO (disco.js): every light flashes in turn, the colours turn round, and a spinning beam follows the bass (--db) */
body.disco .site-lights{animation:discoHue 3s linear infinite}
body.disco .site-lights .sl{opacity:1!important;animation:discoFlash .5s steps(1) infinite}
body.disco .site-lights .sl.g{animation-delay:-.33s}
body.disco .site-lights .sl.r{animation-delay:-.17s}
body.disco .site-lights .sl::after{opacity:1!important;animation:none}
@keyframes discoFlash{0%{opacity:1}34%{opacity:.12}67%{opacity:.65}}
@keyframes discoHue{from{filter:hue-rotate(0deg) saturate(1.8)}to{filter:hue-rotate(360deg) saturate(1.8)}}
#discoCover{position:fixed;inset:0;z-index:2147483000;cursor:none;overflow:hidden;pointer-events:auto}
#discoCover i{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:conic-gradient(rgba(255,255,255,.9),rgba(0,150,110,.9),rgba(214,38,18,.9),rgba(255,255,255,.9),rgba(0,150,110,.9),rgba(214,38,18,.9),rgba(255,255,255,.9));mix-blend-mode:screen;opacity:calc(.04 + var(--db,0)*.42);animation:discoSpin 2.4s linear infinite;pointer-events:none}
#discoCover span{position:absolute;left:0;right:0;bottom:18px;text-align:center;font:800 12px/1 var(--font);letter-spacing:.3em;color:rgba(255,255,255,.55)}
@keyframes discoSpin{to{transform:rotate(360deg)}}

/* ---------- the lights go out and come on again when the difficulty changes ----------
   While data-diff is "off" the page and every button are grey silhouettes; the difficulty rows that are not chosen are always grey
   (their light is off) and the chosen one takes its colour. */
body[data-diff="off"]{--green:#5d6460;--green-ink:#d6dbd8;--red:#8a908c;--ac:112,118,114;--wash:112,118,114;--wave:#6f7672;--soft:#a9afab}
.sl{transition:opacity .2s ease}
.stripe .flap-in,.stripe:first-of-type .flap-in,.stripe:last-of-type .flap-in{transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,opacity .25s ease}
.stripe:not(.on) .flap-in,.stripe:first-of-type:not(.on) .flap-in,.stripe:last-of-type:not(.on) .flap-in{background:#151716;border-color:rgba(255,255,255,.1);color:#6b716d;box-shadow:none;opacity:1}
.stripe:not(.on):hover .flap-in,.stripe:first-of-type:not(.on):hover .flap-in,.stripe:last-of-type:not(.on):hover .flap-in{background:#1e211f;border-color:rgba(255,255,255,.22);color:#959c97}
.stripe:not(.on) .q{border-color:rgba(255,255,255,.2);color:#6b716d}

/* with the light off everything is only a silhouette: the whole page and the difficulty menu are almost invisible, and they come
   back with the light */
.wrap,#sidebar{transition:opacity .2s ease}
body[data-diff="off"] .wrap,body[data-diff="off"] #sidebar{opacity:.17}
body[data-diff="off"]{--wave:#3d4240}

/* the light going out and coming on: a bulb flickers (hard steps, not a smooth fade). The lit light and the whole page (which dims to
   its silhouette) flicker together; see syncDiff in game.js. */
body.lit-out[data-diff="white"] .sl.w,body.lit-out[data-diff="green"] .sl.g,body.lit-out[data-diff="red"] .sl.r{animation:flickOut .3s steps(1) forwards}
body.lit-in[data-diff="white"] .sl.w,body.lit-in[data-diff="green"] .sl.g,body.lit-in[data-diff="red"] .sl.r{animation:flickIn .4s steps(1) forwards}
body.lit-out .wrap,body.lit-out #sidebar{animation:uiOut .3s steps(1) forwards}
body.lit-in .wrap,body.lit-in #sidebar{animation:uiIn .4s steps(1) forwards}
.sl::after{transition:opacity .15s ease}
@keyframes flickOut{0%{opacity:1}10%{opacity:.12}20%{opacity:1}30%{opacity:.25}42%{opacity:.9}54%{opacity:.08}64%{opacity:.5}76%{opacity:0}100%{opacity:0}}
@keyframes flickIn{0%{opacity:0}8%{opacity:.9}16%{opacity:.05}27%{opacity:.7}36%{opacity:.15}50%{opacity:1}62%{opacity:.45}76%{opacity:1}100%{opacity:1}}
@keyframes uiOut{0%{opacity:1}10%{opacity:.4}20%{opacity:1}30%{opacity:.45}42%{opacity:.95}54%{opacity:.3}64%{opacity:.7}76%{opacity:.17}100%{opacity:.17}}
@keyframes uiIn{0%{opacity:.17}8%{opacity:.8}16%{opacity:.2}27%{opacity:.75}36%{opacity:.25}50%{opacity:1}62%{opacity:.55}76%{opacity:1}100%{opacity:1}}

/* the wavy lines of the disco, behind the page */
#discoWaves{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

/* the song editor: the page lights are off, the whole background is black, and the outline of every module glows outward in the colours
   of the outline itself (the flag: white on the left, green in the middle, red on the right). The outlines flicker on one after
   the other when it opens and flicker out when it closes (lightsCycle in game.js). */
body.editor-on .site-lights .sl{opacity:0!important;animation:none!important}
body.editor-on .site-lights .sl::after{opacity:0!important;animation:none!important}
dialog.editor.hack::backdrop{background:#000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#editor>.hk-panel:nth-of-type(1){--i:0}#editor>.hk-panel:nth-of-type(2){--i:1}#editor>.hk-panel:nth-of-type(3){--i:2}#editor>.hk-panel:nth-of-type(4){--i:3}
#editor>.hk-panel:nth-of-type(5){--i:4}#editor>.hk-panel:nth-of-type(6){--i:5}#editor>.hk-panel:nth-of-type(7){--i:6}#editor>.hk-panel:nth-of-type(8){--i:7}#editor>.hk-panel:nth-of-type(9){--i:8}
body.editor-on #editor{
  --g-off:0 0 0 0 rgba(0,0,0,0);
  --g-low:0 0 14px -6px rgba(0,185,135,.4),-22px 0 22px -10px rgba(255,255,255,.4),22px 0 22px -10px rgba(240,52,28,.4);
  --g-steady:0 0 26px -6px rgba(0,185,135,.7),-34px 0 34px -10px rgba(255,255,255,.65),34px 0 34px -10px rgba(240,52,28,.7),0 0 70px -10px rgba(0,185,135,.35),-52px 0 84px -20px rgba(255,255,255,.3),52px 0 84px -20px rgba(240,52,28,.32);
  --g-bright:0 0 32px -4px rgba(0,185,135,.72),-40px 0 42px -8px rgba(255,255,255,.7),40px 0 42px -8px rgba(240,52,28,.74),0 0 84px -8px rgba(0,185,135,.4),-60px 0 96px -16px rgba(255,255,255,.3),60px 0 96px -16px rgba(240,52,28,.34)}
/* in the one-column Simple mode the glow of a module must stay inside the gap to the next one, so it reaches less far up and down */
body.editor-on #editor.simple{
  --g-low:0 0 8px -5px rgba(0,185,135,.4),-18px 0 18px -10px rgba(255,255,255,.4),18px 0 18px -10px rgba(240,52,28,.4);
  --g-steady:0 0 12px -5px rgba(0,185,135,.7),-30px 0 30px -10px rgba(255,255,255,.65),30px 0 30px -10px rgba(240,52,28,.7),-48px 0 70px -20px rgba(255,255,255,.3),48px 0 70px -20px rgba(240,52,28,.32);
  --g-bright:0 0 14px -4px rgba(0,185,135,.72),-36px 0 38px -8px rgba(255,255,255,.7),36px 0 38px -8px rgba(240,52,28,.74),-56px 0 84px -16px rgba(255,255,255,.3),56px 0 84px -16px rgba(240,52,28,.34)}
/* The glows are NOT on the modules but on layers of their own under all of them (.hk-glow, made in editor-workspace.js), and the modules
   are solid black, so the glow of one module never shows on another. */
.hk-glow{position:absolute;z-index:1;pointer-events:none;background:#000;border-radius:2px}
.hk-glow[hidden]{display:none}
body.editor-on #editor>.hk-panel{background:#000}
body.editor-on #editor>.hk-glow,body.editor-on #editor.simple>.hk-panel:not(.floatout){box-shadow:var(--g-steady);animation:modOn .55s steps(1) calc(var(--i)*70ms) both,modBreathe 3.4s ease-in-out calc(var(--i)*70ms + .55s) infinite alternate}
body.no-flicker.editor-on #editor>.hk-glow,body.no-flicker.editor-on #editor.simple>.hk-panel:not(.floatout){animation:modBreathe 3.4s ease-in-out calc(var(--i)*70ms) infinite alternate}
body.lit-out.editor-on #editor>.hk-glow,body.lit-out.editor-on #editor.simple>.hk-panel:not(.floatout){animation:modOff .3s steps(1) calc(var(--i)*30ms) forwards}
@keyframes modOn{0%{box-shadow:var(--g-off)}8%{box-shadow:var(--g-bright)}15%{box-shadow:var(--g-off)}26%{box-shadow:var(--g-steady)}36%{box-shadow:var(--g-off)}50%{box-shadow:var(--g-bright)}64%{box-shadow:var(--g-low)}80%,100%{box-shadow:var(--g-steady)}}
@keyframes modOff{0%{box-shadow:var(--g-steady)}12%{box-shadow:var(--g-off)}24%{box-shadow:var(--g-bright)}38%{box-shadow:var(--g-off)}52%{box-shadow:var(--g-steady)}70%,100%{box-shadow:var(--g-off)}}
@keyframes modBreathe{from{box-shadow:var(--g-steady)}to{box-shadow:var(--g-bright)}}

/* the start menu: the lights fade to black towards the edges of the screen (a vignette over the lights, under the text) */
.lg-lights::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 72% at 50% 46%,rgba(0,0,0,0) 24%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.94) 100%),
    linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 84%,rgba(0,0,0,.75)),
    linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0) 20%),
    linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 14%)}

/* the progress bar: the length of every try, in seconds, written in its slot */
.seg .segt{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:800 11px/1 var(--font);letter-spacing:.03em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;pointer-events:none}
@media (max-width:760px){.seg .segt{font-size:9px;letter-spacing:0}}

/* the new logo mark (the map of Bulgaria in the flag colours with a play button) stands left of the wordmark on the start menu and in the header */
.logo-mark{flex:none;display:block;height:1.3em;width:1.3em;object-fit:contain;pointer-events:none;user-select:none}
.lg-brand .logo-mark{height:1.12em;width:1.12em;filter:drop-shadow(0 0 22px rgba(0,0,0,.55))}

/* css/simple.css */
/* =====================================================================================================
   SIMPLE MODE of the song editor: no floating modules. One column in the middle of the screen, and four tabs on top
   (Playlist · Add songs · From Deezer · Tools) that decide which modules are shown. The modules are the same ones as in the
   advanced view, so everything works the same; only the way they are laid out changes.
   ===================================================================================================== */
.sm-tabs{display:flex;gap:6px;margin-right:auto;flex-wrap:wrap}
.sm-tabs[hidden]{display:none}
.sm-tabs button{font:800 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:11px 14px;cursor:pointer}
.sm-tabs button:hover{background:rgba(255,255,255,.14);border-color:#fff}
.sm-tabs button[aria-selected="true"]{background:#fff;color:#07130d;border-color:#fff}

dialog.editor.hack.simple{overflow-y:auto;overflow-x:hidden;padding:68px 0 40px;scrollbar-width:thin}
dialog.editor.hack.simple::backdrop{background:rgba(0,0,0,.78)}
#editor.simple .hk-bar{position:fixed;height:56px;z-index:30;background:linear-gradient(#000 60%,transparent)}

/* every module is hidden, then the ones of the open tab are shown, one under the other */
#editor.simple .hk-panel:not(.floatout){position:static!important;display:none!important;width:min(700px,calc(100% - 24px))!important;height:auto!important;max-height:none!important;
  margin:0 auto 14px!important;left:auto!important;top:auto!important;overflow:visible!important;resize:none!important;min-width:0}
#editor.simple[data-tab="list"] :is(#pnLists,#pnList,#pnOpts),
#editor.simple[data-tab="add"] :is(#pnSongs,#pnFind),
#editor.simple[data-tab="dz"] #pnDeezer,
#editor.simple[data-tab="tools"] :is(#pnStart,#pnTime){display:flex!important}
#editor.simple .hk-panel:not(.floatout) .hk-head{pointer-events:none;cursor:default}
#editor.simple .hk-panel:not(.floatout) :is(.hk-arrow,.hk-rz){display:none!important}
#editor.simple .hk-panel:not(.floatout).col .hk-body{display:flex!important}
#editor.simple .hk-panel:not(.floatout) .hk-body{overflow:visible}
#editor.simple .ed-list{flex:none;min-height:80px;max-height:min(46vh,420px)}
#editor.simple .pl-bar{max-height:none}

/* the Song start module can be floated out of its tab (the button in its title): it then stays on screen on every tab, can be
   moved and resized like in the advanced view, and songs from the other tabs can be dragged onto it */
.hk-pop{display:none;margin-left:auto;height:20px;min-width:24px;padding:0 6px;border:1px solid rgba(255,255,255,.4);border-radius:3px;background:none;color:#fff;font:700 13px/1 var(--font);cursor:pointer;pointer-events:auto}
.hk-pop:hover{background:rgba(255,255,255,.16);border-color:#fff}
#editor.simple .hk-pop{display:inline-flex;align-items:center;justify-content:center}
#editor.simple .hk-pop+.hk-arrow{margin-left:8px}
#editor.simple .hk-panel.floatout{position:fixed;z-index:25;margin:0;display:flex}
#editor.simple .hk-panel.floatout .hk-head{cursor:grab}

/* css/feel.css */
/* =====================================================================================================
   FEEL: buttons answer at once. No tap delay on touch screens, a press is shown the moment the finger or mouse goes down, and the
   colour changes are quick. (The main game buttons also act on the mouse press itself, see "snappier buttons" in start.js.)
   ===================================================================================================== */
button,a,select,summary,label,[role="button"],[role="radio"],[role="tab"],[role="switch"],.band,.stripe,.pl-chip,.chip-btn,.icon-btn,.btn{touch-action:manipulation}
.press{transition:transform .2s var(--spring),background-color .12s,border-color .12s,color .12s,box-shadow .12s,filter .12s}
.btn,.chip-btn,.icon-btn,.pl-chip,.switch,.sm-tabs button,.hk-pop,.seg-ctl button,.lang button,.back{transition-duration:.12s}
/* the pressed look is instant and the same everywhere: a small squash and a flash */
button:active:not([disabled]),.btn:active:not([disabled]),.chip-btn:active:not([disabled]),.icon-btn:active:not([disabled]),.pl-chip:active,.switch:active,.sm-tabs button:active,.back:active,.vers a:active{
  transform:scale(.95);filter:brightness(1.28);transition-duration:.03s}
.play:active:not([disabled]){transform:scale(.94);filter:brightness(1.2)}
.stripe:active .flap-in{filter:brightness(1.25);transition-duration:.03s}
.band:active{transform:none;filter:none}
input[type=range],.ed-list li,.hk-head{touch-action:auto}
@media (prefers-reduced-motion:reduce){button:active:not([disabled]){transform:none}}

/* css/customize.css */
/* =====================================================================================================
   CUSTOMIZE (customize.js): the picker with two cards, and the edit view: dashed frames over the parts of a menu, a bar on top.
   Only layout is editable: nothing here or in the picker changes any colour of the game.
   ===================================================================================================== */
#custPick{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:rgba(0,0,0,.9);color:#fff;font-family:var(--font)}
#custPick .cp-title{font:800 13px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
#custPick .cp-row{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
#custPick .cp-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(250px,80vw);padding:16px 16px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;cursor:pointer;transition:transform .12s,border-color .12s,background-color .12s,box-shadow .12s}
#custPick .cp-card b{font:800 14px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
#custPick .cp-card:hover,#custPick .cp-card:focus-visible{outline:none;transform:scale(1.04);border-color:#fff;background:rgba(255,255,255,.1);box-shadow:0 0 34px rgba(255,255,255,.16)}
#custPick .cp-close{margin-top:6px;font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:none;border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:11px 16px;cursor:pointer}
#custPick .cp-close:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* a tiny drawing of each menu */
.cp-mini{position:relative;display:block;width:100%;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.25);border-radius:3px;background:#000;overflow:hidden}
.cp-mini i{position:absolute;display:block;background:rgba(255,255,255,.55);border-radius:2px}
.cp-main i.a{left:28%;top:26%;width:44%;height:16%}
.cp-main i.b{left:22%;top:50%;width:56%;height:5%;background:linear-gradient(90deg,#fff 33%,#00966e 33% 66%,#d62612 66%)}
.cp-main i.c{left:32%;top:62%;width:36%;height:4%;background:rgba(255,255,255,.3)}
.cp-main i.d{left:38%;top:74%;width:24%;height:8%}
.cp-play i.a{left:5%;top:8%;width:18%;height:10%}
.cp-play i.b{left:5%;top:30%;width:22%;height:46%;background:rgba(255,255,255,.25)}
.cp-play i.c{left:40%;top:22%;width:50%;height:9%;background:rgba(255,255,255,.3)}
.cp-play i.d{left:56%;top:44%;width:18%;height:30%;border-radius:50%}
.cp-play i.e{left:30%;top:86%;width:40%;height:5%;background:rgba(255,255,255,.3)}

/* edit view */
#custLayer{position:fixed;inset:0;z-index:2147482000;cursor:default}
.cust-frame{position:fixed;box-sizing:border-box;border:1px dashed rgba(255,255,255,.85);background:rgba(255,255,255,.05);cursor:move;touch-action:none;user-select:none}
.cust-frame:hover,.cust-frame.moving{background:rgba(255,255,255,.12);border-style:solid;border-color:#fff}
.cust-frame.keep{border-style:solid;border-color:rgba(255,255,255,.55)}
.cust-frame .cf-name{position:absolute;left:-1px;bottom:100%;padding:3px 7px;background:#fff;color:#07130d;font:800 10px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-radius:3px 3px 0 0;pointer-events:none}
.cust-frame .cf-x{position:absolute;right:-11px;top:-11px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid #fff;background:#d62612;color:#fff;font:800 11px/1 var(--font);cursor:pointer;display:grid;place-items:center}
.cust-frame .cf-x:hover{filter:brightness(1.25);transform:scale(1.1)}
.cust-frame .cf-rz{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#fff;border:1px solid #000;border-radius:2px;cursor:nwse-resize}
#custBar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 20px);padding:8px 12px;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#fff;font-family:var(--font)}
#custBar .cb-title{font:800 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
#custBar .cb-hint{font-size:12px;color:rgba(255,255,255,.65)}
#custBar .cb-removed{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.7)}
#custBar .cb-removed:empty{display:none}
#custBar .cb-btn,#custBar .cb-chip{font:800 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:none;border:1px solid rgba(255,255,255,.45);border-radius:4px;padding:8px 11px;cursor:pointer}
#custBar .cb-btn:hover,#custBar .cb-chip:hover{background:rgba(255,255,255,.14);border-color:#fff}
#custBar .cb-done{background:#fff;color:#07130d;border-color:#fff}
#custBar .cb-done:hover{background:#e6ece8}

/* the tray: removed parts wait here; drag one back onto the menu (or drop a part on the tray to remove it) */
#custTray{position:fixed;right:14px;top:86px;z-index:2147483000;width:176px;max-height:calc(100vh - 110px);display:flex;flex-direction:column;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#fff;font-family:var(--font);transition:border-color .12s,box-shadow .12s}
#custTray.over{border-color:#fff;box-shadow:0 0 0 2px rgba(214,38,18,.8),0 0 26px rgba(214,38,18,.5)}
#custTray .ct-title{display:block;padding:10px 12px;font:800 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.25)}
#custTray .ct-list{display:flex;flex-direction:column;gap:6px;padding:10px;overflow-y:auto;min-height:60px}
#custTray .ct-empty{font-size:11px;line-height:1.4;color:rgba(255,255,255,.55)}
#custTray .ct-chip{display:flex;align-items:center;gap:8px;font:800 11px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;text-align:left;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:9px 10px;cursor:grab;touch-action:none;user-select:none}
#custTray .ct-chip i{font-style:normal;letter-spacing:-.1em;color:rgba(255,255,255,.55)}
#custTray .ct-chip:hover{background:rgba(255,255,255,.16);border-color:#fff}
.cust-ghost{position:fixed;z-index:2147483600;transform:translate(-50%,-50%);padding:9px 12px;background:#fff;color:#07130d;font:800 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;pointer-events:none;box-shadow:0 8px 26px rgba(0,0,0,.6)}

/* the selected part (arrow keys nudge it), and the lines it snaps to */
.cust-frame.sel{border-style:solid;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.cust-guide{position:fixed;z-index:2147482500;pointer-events:none;background:rgba(0,200,145,.95);box-shadow:0 0 8px rgba(0,200,145,.8)}
.cust-guide.v{top:0;bottom:0;width:1px}
.cust-guide.h{left:0;right:0;height:1px}
#custBar .cb-btn[disabled]{opacity:.35;cursor:default}

/* the panel of the selected part */
#custInsp{position:fixed;left:14px;bottom:14px;z-index:2147483000;width:188px;display:flex;flex-direction:column;gap:8px;padding:10px;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#fff;font-family:var(--font)}
#custInsp[hidden]{display:none}
#custInsp .ci-title{display:block;padding-bottom:8px;font:800 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.25)}
#custInsp .ci-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-items:center;justify-items:stretch}
#custInsp .ci-pad button,#custInsp .ci-step button,#custInsp .ci-acts button{font:800 12px/1 var(--font);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:9px 0;cursor:pointer;touch-action:none}
#custInsp .ci-pad button:hover,#custInsp .ci-step button:hover,#custInsp .ci-acts button:hover{background:rgba(255,255,255,.18);border-color:#fff}
#custInsp .ci-pad button:active{background:#fff;color:#07130d}
#custInsp .ci-stepnow{text-align:center;font:800 10px/1 var(--font);color:rgba(255,255,255,.6)}
#custInsp .ci-step{display:flex;gap:4px}
#custInsp .ci-step button{flex:1}
#custInsp .ci-step button.on{background:#fff;color:#07130d;border-color:#fff}
#custInsp label{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
#custInsp label input{width:84px;padding:7px 8px;font:700 12px/1 var(--font);color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.4);border-radius:4px}
#custInsp label input:focus{outline:none;border-color:#fff}
#custInsp .ci-acts{display:flex;gap:4px}
#custInsp .ci-acts button{flex:1;padding:9px 4px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
#custInsp .ci-acts button[disabled]{opacity:.35;cursor:default}

/* the sidebar of removed parts: docked to the right edge, full height, and only while editing a menu (never anywhere else) */
body:not(.cust-edit) #custTray{display:none!important}
body.cust-edit{padding-right:210px}
body.cust-edit #landing{right:210px}
#custTray{top:0;right:0;bottom:0;left:auto;width:210px;max-height:none;border-width:0 0 0 1px;border-radius:0;background:rgba(0,0,0,.96)}
#custTray .ct-title{cursor:default;padding:14px 14px 12px}
#custTray .ct-list{flex:1;padding:12px;min-height:0}
#custTray.over{box-shadow:inset 0 0 0 2px rgba(214,38,18,.85),inset 0 0 40px rgba(214,38,18,.3)}

/* the third card of the picker: Animations */
.cp-anim i{top:0;bottom:0;width:33.4%;border-radius:0;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 80%)}
.cp-anim i.a{left:0}
.cp-anim i.b{left:33.3%;background:linear-gradient(180deg,rgba(0,185,135,.85),transparent 80%)}
.cp-anim i.c{left:66.6%;background:linear-gradient(180deg,rgba(240,52,28,.85),transparent 80%)}

/* the Simplified card of the picker: a play button in a ring on black */
.cp-quiet i.a{left:50%;top:50%;width:34%;aspect-ratio:1;height:auto;transform:translate(-50%,-50%);border-radius:50%;background:#00966e;box-shadow:0 0 0 3px #000,0 0 0 4px rgba(255,255,255,.55)}
.cp-quiet i.b{left:36%;top:88%;width:28%;height:4%;background:rgba(255,255,255,.3)}
#custPick .cp-card small{font:600 11px/1.3 var(--font);letter-spacing:.04em;color:rgba(255,255,255,.65);text-align:center}

/* ---- editing the menus on a phone: the bar on top, the removed parts as a strip along the bottom, the panel of the chosen part above it; bigger handles for fingers ---- */
@media (max-width:760px),(pointer:coarse){
  body.cust-edit{padding-right:0}
  body.cust-edit #landing{right:0}
  #custBar{top:6px;left:6px;transform:none;width:calc(100vw - 12px);max-width:none;gap:6px;padding:6px 8px;justify-content:center}
  #custBar .cb-hint{display:none}
  #custBar .cb-title{flex:1 0 100%;text-align:center}
  #custBar .cb-btn{padding:10px 12px}
  #custTray{top:auto;bottom:0;left:0;right:0;width:auto;height:92px;border-width:1px 0 0}
  #custTray .ct-title{padding:8px 12px}
  #custTray .ct-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px 12px;gap:8px;min-height:0}
  #custTray .ct-chip{flex:none;white-space:nowrap}
  #custInsp{left:6px;right:6px;bottom:98px;width:auto;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:6px;padding:8px}
  #custInsp>*{flex:1 1 140px}
  #custInsp .ci-title{flex:1 0 100%;padding-bottom:6px}
  .cust-frame .cf-rz{width:26px;height:26px;right:-13px;bottom:-13px}
  .cust-frame .cf-x{width:30px;height:30px;right:-15px;top:-15px;font-size:14px}
}
@media (max-width:760px),(pointer:coarse){
  #custInsp .ci-pad,#custInsp .ci-stepnow,#custInsp .ci-step{display:none}   /* fingers drag the parts: the nudge arrows would only take room */
}

/* css/animations.css */
/* =====================================================================================================
   ANIMATIONS (animations.js): the moving light of the Swipe style, the shock wave of the Burst style, and the Animations window.
   Only motion is edited here: nothing in this file changes any colour of the game.
   ===================================================================================================== */
@property --sx{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --sw{syntax:"<percentage>";inherits:false;initial-value:56%}
@property --sr{syntax:"<number>";inherits:false;initial-value:0}
@property --sg{syntax:"<number>";inherits:false;initial-value:185}
@property --sb{syntax:"<number>";inherits:false;initial-value:135}
@property --sa{syntax:"<number>";inherits:false;initial-value:.85}

/* swipe: one light that moves (--sx, --sw) and changes colour (--sr, --sg, --sb) smoothly; the three real lights are off while it plays */
#swipeLight{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;--sx:50%;--sw:56%;--sr:0;--sg:185;--sb:135;--sa:.85;
  background:radial-gradient(ellipse var(--sw) 125% at var(--sx) 0%,
    rgba(var(--sr),var(--sg),var(--sb),var(--sa)) 0%,
    rgba(var(--sr),var(--sg),var(--sb),calc(var(--sa)*.86)) 12%,
    rgba(var(--sr),var(--sg),var(--sb),calc(var(--sa)*.68)) 26%,
    rgba(var(--sr),var(--sg),var(--sb),calc(var(--sa)*.5)) 40%,
    rgba(var(--sr),var(--sg),var(--sb),calc(var(--sa)*.34)) 55%,
    rgba(var(--sr),var(--sg),var(--sb),calc(var(--sa)*.2)) 70%,
    rgba(var(--sr),var(--sg),var(--sb),calc(var(--sa)*.09)) 84%,
    rgba(var(--sr),var(--sg),var(--sb),0) 100%)}
body.swiping .site-lights .sl{opacity:0!important;transition:none!important;animation:none!important}
body.swiping .site-lights .sl::after{opacity:0!important;transition:none!important;animation:none!important}

/* burst: a ring and a flash that grow from the pressed button over the whole screen */
.burst{position:fixed;z-index:2147480000;pointer-events:none;border-radius:50%;transform:scale(0);
  background:radial-gradient(circle,rgba(var(--bc),0) 0,rgba(var(--bc),0) 52%,rgba(var(--bc),.6) 66%,rgba(var(--bc),.2) 82%,rgba(var(--bc),0) 100%);
  animation:burst .95s cubic-bezier(.15,.7,.3,1) forwards}
.burst.fill{background:radial-gradient(circle,rgba(var(--bc),.5) 0,rgba(var(--bc),.22) 45%,rgba(var(--bc),0) 100%);animation-duration:.6s}
@keyframes burst{0%{transform:scale(0);opacity:1}70%{opacity:.85}100%{transform:scale(1);opacity:0}}

/* the Animations window: a box in the middle, the page stays visible around it so a preview can be seen */
#custAnim{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);font-family:var(--font);color:#fff}
#custAnim .an-box{width:min(720px,94vw);max-height:94vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:20px;background:rgba(0,0,0,.94);border:1px solid rgba(255,255,255,.4);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
#custAnim .an-title{font:800 13px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
#custAnim .an-sub{margin-top:6px;font:800 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
#custAnim .an-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#custAnim .an-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;text-align:left;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;transition:transform .12s,border-color .12s,background-color .12s}
#custAnim .an-card b{font:800 13px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}
#custAnim .an-card small{font-size:12px;line-height:1.35;color:rgba(255,255,255,.65)}
#custAnim .an-card:hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.1)}
#custAnim .an-card[aria-pressed="true"]{background:#fff;border-color:#fff;color:#07130d}
#custAnim .an-card[aria-pressed="true"] small{color:rgba(7,19,13,.7)}
/* a little drawing of each style */
.an-ico{position:relative;display:block;width:100%;height:46px;border-radius:4px;background:#000;border:1px solid rgba(255,255,255,.2);overflow:hidden}
.an-ico i{position:absolute;display:block;top:0;bottom:0;width:33.4%}
.an-i-def i:nth-child(1){left:0;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:anFl 1.6s steps(1) infinite}
.an-i-def i:nth-child(2){left:33.3%;background:linear-gradient(180deg,rgba(0,185,135,.8),transparent);animation:anFl 1.6s steps(1) infinite .3s}
.an-i-def i:nth-child(3){left:66.6%;background:linear-gradient(180deg,rgba(240,52,28,.8),transparent);animation:anFl 1.6s steps(1) infinite .6s}
@keyframes anFl{0%{opacity:1}12%{opacity:.1}24%{opacity:1}36%{opacity:.2}50%{opacity:1}80%{opacity:1}90%,100%{opacity:0}}
.an-i-swipe i:nth-child(1){left:0;width:46%;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.75),transparent 72%);animation:anSw 2.6s ease-in-out infinite}
.an-i-swipe i:nth-child(2),.an-i-swipe i:nth-child(3){display:none}
@keyframes anSw{0%{left:0;filter:none}50%{left:54%;filter:hue-rotate(150deg) saturate(2)}100%{left:0;filter:none}}
.an-i-burst i:nth-child(1){left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:2px solid rgba(240,52,28,.9);background:none;animation:anBu 1.6s ease-out infinite}
.an-i-burst i:nth-child(2){left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:none;animation:anBu 1.6s ease-out infinite .25s}
.an-i-burst i:nth-child(3){display:none}
@keyframes anBu{0%{transform:scale(1);opacity:1}100%{transform:scale(11);opacity:0}}
#custAnim .an-sw{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer}
#custAnim .an-sw b{display:block;font:800 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase}
#custAnim .an-sw small{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.6)}
#custAnim .an-sw .an-knob{flex:none;position:relative;width:38px;height:20px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);transition:background-color .15s}
#custAnim .an-sw .an-knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
#custAnim .an-sw[aria-checked="true"] .an-knob{background:#00966e;border-color:#00b383}
#custAnim .an-sw[aria-checked="true"] .an-knob::after{transform:translateX(18px)}
#custAnim .an-sw.dim{opacity:.55}
#custAnim .an-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
#custAnim .an-btn{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:none;border:1px solid rgba(255,255,255,.45);border-radius:4px;padding:11px 16px;cursor:pointer}
#custAnim .an-btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
#custAnim .an-done{background:#fff;color:#07130d;border-color:#fff}
#custAnim .an-done:hover{background:#e6ece8}
@media (max-width:760px){#custAnim .an-cards{grid-template-columns:1fr}}

/* ---- chase: the lights run (the real lights are hidden, one at a time shows) ---- */
body.chasing .site-lights .sl{opacity:0!important;transition:opacity .07s!important;animation:none!important}
body.chasing .site-lights .sl::after{opacity:0!important;transition:none!important;animation:none!important}
body.chasing .site-lights .sl.flash{opacity:1!important}
body.chasing .site-lights .sl.flash::after{opacity:1!important}
/* ---- flag wipe ---- */
#flagWipe{position:fixed;inset:0;z-index:2147480000;pointer-events:none;display:flex;flex-direction:column;overflow:hidden}
#flagWipe i{flex:1;display:block;will-change:transform;transform:translateX(-101%)}
#flagWipe i:nth-child(1){background:#f3f3f3}#flagWipe i:nth-child(2){background:#00966e}#flagWipe i:nth-child(3){background:#d62612}
/* ---- spotlight ---- */
#spotBeam{position:fixed;top:-6vh;bottom:-6vh;left:0;width:40vw;z-index:2147480000;pointer-events:none;mix-blend-mode:screen;filter:blur(5px);will-change:transform;transform:translateX(-48vw) skewX(-14deg);
  background:linear-gradient(90deg,rgba(var(--bc),0) 0,rgba(var(--bc),.3) 30%,rgba(255,255,255,.6) 50%,rgba(var(--bc),.3) 70%,rgba(var(--bc),0) 100%)}
/* ---- iris and scan: their effects live inside the editor dialog ---- */
.iris-ring{position:fixed;z-index:50;border-radius:50%;pointer-events:none;transform:scale(0);
  background:conic-gradient(#fff 0 33.3%,#00b383 0 66.6%,#e0301a 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));
  filter:drop-shadow(0 0 14px rgba(255,255,255,.7)) drop-shadow(0 0 40px rgba(0,200,145,.45))}
.scan-line{position:fixed;left:0;right:0;top:0;height:6px;z-index:50;pointer-events:none;
  background:linear-gradient(90deg,#fff 33.3%,#00b383 33.3% 66.6%,#e0301a 66.6%);
  box-shadow:0 0 28px 8px rgba(255,255,255,.5),0 0 80px 22px rgba(0,200,145,.28)}
/* ---- the window: groups and the drawings of the new styles ---- */
#custAnim .an-row{display:flex;justify-content:flex-end;margin-top:-2px}
#custAnim .an-box{width:min(780px,94vw)}
.an-i-chase i:nth-child(1){left:0;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:anCh 1.5s steps(1) infinite}
.an-i-chase i:nth-child(2){left:33.3%;background:linear-gradient(180deg,rgba(0,185,135,.9),transparent);animation:anCh 1.5s steps(1) infinite .5s}
.an-i-chase i:nth-child(3){left:66.6%;background:linear-gradient(180deg,rgba(240,52,28,.9),transparent);animation:anCh 1.5s steps(1) infinite 1s}
@keyframes anCh{0%{opacity:1}33%{opacity:.08}100%{opacity:.08}}
.an-i-flag i{left:0;width:100%;height:33.4%;top:auto;bottom:auto}
.an-i-flag i:nth-child(1){top:0;background:#f3f3f3;animation:anFl2 2.2s cubic-bezier(.7,0,.3,1) infinite}
.an-i-flag i:nth-child(2){top:33.3%;background:#00966e;animation:anFl2 2.2s cubic-bezier(.7,0,.3,1) infinite .12s}
.an-i-flag i:nth-child(3){top:66.6%;background:#d62612;animation:anFl2 2.2s cubic-bezier(.7,0,.3,1) infinite .24s}
@keyframes anFl2{0%{transform:translateX(-101%)}35%,50%{transform:translateX(0)}85%,100%{transform:translateX(101%)}}
.an-i-spot i:nth-child(1){left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-14deg);animation:anSp 1.8s ease-in-out infinite}
.an-i-spot i:nth-child(2),.an-i-spot i:nth-child(3){display:none}
@keyframes anSp{0%{left:-30%}100%{left:105%}}
.an-i-iris i:nth-child(1){left:50%;top:50%;bottom:auto;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#fff,#00b383);animation:anIr 2s ease-in-out infinite}
.an-i-iris i:nth-child(2),.an-i-iris i:nth-child(3){display:none}
@keyframes anIr{0%{transform:scale(1);opacity:1}80%,100%{transform:scale(12);opacity:.55}}
.an-i-scan i:nth-child(1){left:0;width:100%;height:4px;bottom:auto;background:linear-gradient(90deg,#fff 33%,#00b383 33% 66%,#e0301a 66%);box-shadow:0 0 10px rgba(255,255,255,.8);animation:anSc 1.8s ease-in-out infinite}
.an-i-scan i:nth-child(2),.an-i-scan i:nth-child(3){display:none}
@keyframes anSc{0%{top:0}100%{top:calc(100% - 4px)}}

/* ---- equalizer ---- */
#eqWipe{position:fixed;left:0;right:0;bottom:0;height:100vh;z-index:2147480000;pointer-events:none;display:flex;align-items:flex-end;gap:2px;padding:0 2px}
#eqWipe i{flex:1;height:100%;display:block;transform:scaleY(0);transform-origin:50% 100%;will-change:transform;
  background:linear-gradient(0deg,rgba(var(--bc),.92),rgba(var(--bc),.55) 70%,rgba(255,255,255,.7));box-shadow:0 0 22px rgba(var(--bc),.55)}
/* ---- curtain ---- */
#curtain{position:fixed;inset:0;z-index:2147480000;pointer-events:none;overflow:hidden}
#curtain i{position:absolute;top:0;bottom:0;width:50.4%;will-change:transform;transform:translateX(-101%)}
#curtain i:nth-child(1){left:0;background:linear-gradient(90deg,#d9d9d9,#f6f6f6 70%,#fff)}
#curtain i:nth-child(2){right:0;background:linear-gradient(270deg,#b01f10,#d62612 70%,#e8402b);transform:translateX(101%)}
#curtain b{position:absolute;top:0;bottom:0;left:calc(50% - 3px);width:6px;background:#00b383;box-shadow:0 0 24px 6px rgba(0,200,145,.65);opacity:0}
/* ---- sonar ---- */
#sonar{position:fixed;inset:0;z-index:2147480000;pointer-events:none;overflow:hidden}
#sonar u,#sonar i{position:absolute;border-radius:50%;display:block;will-change:transform,opacity}
#sonar u{background:conic-gradient(from 0deg,rgba(var(--bc),0) 0deg,rgba(var(--bc),0) 250deg,rgba(var(--bc),.5) 330deg,rgba(255,255,255,.85) 360deg);mix-blend-mode:screen}
#sonar i{border:3px solid rgba(var(--bc),.9);box-shadow:0 0 24px rgba(var(--bc),.6),inset 0 0 24px rgba(var(--bc),.35);opacity:0;transform:scale(.02)}
/* drawings in the Animations window */
.an-i-eq i{bottom:0;top:auto;width:14%;background:linear-gradient(0deg,rgba(0,185,135,.95),rgba(255,255,255,.8));transform-origin:50% 100%;animation:anEq 1s ease-in-out infinite}
.an-i-eq i:nth-child(1){left:8%;height:70%}
.an-i-eq i:nth-child(2){left:43%;height:90%;animation-delay:.25s}
.an-i-eq i:nth-child(3){left:78%;height:60%;animation-delay:.5s}
@keyframes anEq{0%,100%{transform:scaleY(.15)}50%{transform:scaleY(1)}}
.an-i-curtain i{top:0;bottom:0;width:50%}
.an-i-curtain i:nth-child(1){left:0;background:#f3f3f3;animation:anCtL 2.2s cubic-bezier(.7,0,.3,1) infinite}
.an-i-curtain i:nth-child(2){left:auto;right:0;background:#d62612;animation:anCtR 2.2s cubic-bezier(.7,0,.3,1) infinite}
.an-i-curtain i:nth-child(3){display:none}
@keyframes anCtL{0%{transform:translateX(-101%)}35%,55%{transform:translateX(0)}90%,100%{transform:translateX(-101%)}}
@keyframes anCtR{0%{transform:translateX(101%)}35%,55%{transform:translateX(0)}90%,100%{transform:translateX(101%)}}
.an-i-sonar i:nth-child(1),.an-i-sonar i:nth-child(2){left:50%;top:50%;bottom:auto;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:2px solid rgba(0,200,145,.9);background:none;animation:anBu 1.8s ease-out infinite}
.an-i-sonar i:nth-child(2){animation-delay:.5s}
.an-i-sonar i:nth-child(3){left:50%;top:50%;bottom:auto;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;width:70px;height:70px;margin:-35px 0 0 -35px;background:conic-gradient(from 0deg,transparent 0 250deg,rgba(0,200,145,.7) 360deg);animation:anSn 1.8s linear infinite}
@keyframes anSn{to{transform:rotate(360deg)}}

/* css/phones.css */
/* =====================================================================================================
   PHONES AND SMALL WINDOWS: no song editor, and a layout made for the thumb: the round first (search, play button), the
   tries and the difficulty below it, the difficulty as one row of three tabs, bigger tap targets
   ===================================================================================================== */
body.mobile #editorBtn,body.mobile #setOpenEd,body.mobile #setOpenTm{display:none}
@media (max-width:760px){
  /* the round comes first, the tries and the difficulty under it */
  body[data-layout="desktop"] .pane-main{order:1}
  body[data-layout="desktop"] .pane-side{order:2;gap:14px}
  body[data-layout="desktop"] #app{gap:14px}
  body[data-layout="desktop"] main{padding-top:10px}
  body[data-layout="desktop"]{--disc:132px}
  body[data-layout="desktop"] .player-area{padding-block:calc(var(--disc)*.34)}
  body[data-layout="desktop"] .pane-main{gap:12px}
  /* the tries: three rows are visible, the rest scroll */
  body[data-layout="desktop"] .pane-side .guesses{max-height:calc(var(--rowh)*3 + 8px*2 + 8px)}
  body[data-layout="desktop"] .row{height:34px}
  /* the difficulty: one row of three tabs, the chosen one underlined */
  .flag-cap{margin-top:2px}
  .flag-slot .vflag{flex-direction:row;width:100%;gap:0;filter:none}
  .flag-slot .stripe,.flag-slot .stripe.on,.flag-slot .stripe.on.peek{flex:1 1 0;width:auto;height:52px;transform:none}
  .flag-slot .stripe .flap-in,.flag-slot .stripe:first-of-type .flap-in,.flag-slot .stripe:last-of-type .flap-in{justify-content:center;padding:0 6px;border-radius:0;border:1px solid rgba(255,255,255,.2);border-left-width:1px;box-shadow:none}
  .flag-slot .stripe:first-of-type .flap-in{border-radius:8px 0 0 8px}
  .flag-slot .stripe:last-of-type .flap-in{border-radius:0 8px 8px 0}
  .flag-slot .stripe .flap-txt{display:flex!important;align-items:center;text-align:center;flex:none}
  .flag-slot .stripe .flap-txt small,.flag-slot .stripe .q,.flag-slot .stripe .tip{display:none!important}
  .flag-slot .stripe .flap-in b{font-size:16px;letter-spacing:.05em}
  .flag-slot .stripe.on .flap-in{box-shadow:inset 0 -5px 0 #fff}
  /* bigger targets */
  .icon-btn,.mini{min-width:42px;min-height:42px}
  .vol .mini{min-width:36px;min-height:36px}
  .seg-ctl button{height:44px}
  .search input,.guess-form .skip{height:52px}
  .btn{min-height:46px}
  .top{padding-top:10px}
  footer{justify-content:center;text-align:center}
}

/* the playhead of the Song start module: a line with a handle and the time, which can be moved */
#stHead{opacity:1;pointer-events:auto;cursor:ew-resize;z-index:3;width:2px;margin-left:-1px;background:#fff;touch-action:none}
#stHead::before{content:"";position:absolute;top:-1px;left:50%;width:14px;height:11px;margin-left:-7px;background:#fff;border-radius:0 0 7px 7px}
#stHead::after{content:"";position:absolute;top:0;bottom:0;left:-9px;right:-9px}
#stHead b{position:absolute;top:14px;left:8px;padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.7);color:#fff;font:800 10px var(--font);white-space:nowrap;pointer-events:none}
#stHead.flip b{left:auto;right:8px}
#stHead.live{background:var(--green)}
#stHead.live::before{background:var(--green)}

/* countdown to the next daily song */
.daily-timer{position:relative;margin:-6px auto 0;text-align:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
body[data-layout="desktop"] .daily-timer{position:absolute;top:50px;left:50%;transform:translateX(-50%);margin:0;z-index:2}
@media (max-width:1000px){body[data-layout="desktop"] .daily-timer{position:relative;top:auto;left:auto;transform:none;margin:-6px auto 0}}

/* the daily song is done: a grey play button, and a red line when it is pressed */
#playBtn.done{background:#6f7370!important;color:#252826;cursor:not-allowed;filter:none!important;box-shadow:none!important}
#playBtn.done:hover{filter:none!important}
.note.err{color:#ff5c6c;font-weight:800;font-size:13px}

/* ---------- editor: search boxes in the playlist modules, drag from the search, resize handles ---------- */
.hk-panel{resize:none!important}
.hk-rz{position:absolute;z-index:6;touch-action:none;background:transparent;transition:background-color .15s}
.hk-rz:hover,.hk-panel.resizing .hk-rz{background:rgba(255,255,255,.2)}
.hk-rz[data-rz="e"]{right:0;top:14px;bottom:14px;width:7px;cursor:ew-resize}
.hk-rz[data-rz="w"]{left:0;top:14px;bottom:14px;width:7px;cursor:ew-resize}
.hk-rz[data-rz="s"]{bottom:0;left:14px;right:14px;height:7px;cursor:ns-resize}
.hk-rz[data-rz="n"]{top:0;left:14px;right:14px;height:4px;cursor:ns-resize}
.hk-rz[data-rz="se"]{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.hk-rz[data-rz="sw"]{left:0;bottom:0;width:16px;height:16px;cursor:nesw-resize}
.hk-rz[data-rz="ne"]{right:0;top:0;width:14px;height:10px;cursor:nesw-resize}
.hk-rz[data-rz="nw"]{left:0;top:0;width:14px;height:10px;cursor:nwse-resize}
.hk-rz[data-rz="se"]::after{content:"";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid rgba(255,255,255,.65);border-bottom:2px solid rgba(255,255,255,.65)}
.hk-panel.col .hk-rz{display:none}
.hk-panel.resizing{user-select:none}
#pnLists .search,#pnList .search{flex:none}
#pnLists .search input,#pnList .search input{height:30px;font-size:12.5px}
#setChangelog{text-decoration:none;justify-content:flex-start;padding:0 14px;height:42px}

/* search filters and the Deezer playlists module */
.flt{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg .chip-btn.on,.dp-top .chip-btn.on,.dp-list .chip-btn.on{background:#fff;color:#07130d;border-color:#fff}
.sel{height:26px;border-radius:5px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3);color:#eef2ef;font:700 11px/1 var(--mono);padding:0 6px;max-width:100%;min-width:0}
.sel:focus{outline:none;border-color:#fff}
.sel option{background:#0b0f0d;color:#eef2ef}
.flt .search.sm{flex:1 1 110px}
.flt .search.sm input{height:28px;font-size:12px;padding-left:30px}
.flt .search.sm .sico{left:9px;width:13px;height:13px;margin-top:-6.5px}
.dp-list li{display:flex;align-items:center;gap:8px;cursor:pointer}
.dp-list .meta{flex:1;min-width:0}
.dp-list .chip-btn{flex:none}
.dp-top{display:flex;gap:6px;justify-content:space-between;align-items:center}
.dp-name{font-weight:800;margin:6px 0 0;overflow-wrap:anywhere}
.dp-top .chip-btn:disabled{opacity:.45}
#dpMain{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1}
#dpHome,#dpOpen{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1}
#dpHome[hidden],#dpOpen[hidden],#dpMain[hidden]{display:none}

/* ---- the start page on a phone: the logo, the flag bar and the text fit the screen instead of running off its right side ---- */
@media (max-width:760px){
  .landing{grid-template-columns:minmax(0,1fr);padding:16px}
  .lg-card{width:100%;min-width:0;gap:16px}
  .lg-brand{font-size:clamp(32px,11.5vw,72px);gap:10px;flex-wrap:nowrap;max-width:100%}
  .lg-brand small{font-size:clamp(11px,3.4vw,18px);padding:3px 7px}
  .lg-card .flagbar{height:12px}
  .lg-sub{font-size:clamp(16px,4.8vw,22px)}
  .lg-txt b{font-size:clamp(28px,8.4vw,44px)}
  .lg-txt small{font-size:14px}
}

/* on a phone the language switch sits above the logo instead of on top of it */
@media (max-width:760px){
  .landing{align-content:start}
  .lg-top{position:static;justify-self:end;margin-bottom:6px}
}

/* the song list under the search box opens downward when that side has more room (render.js sets the class) */
.list.down{bottom:auto;top:calc(100% + 6px);box-shadow:0 14px 32px var(--shadow)}

/* css/quiet.css */
/* =====================================================================================================
   SIMPLIFIED ("QUIET") MODE  (body.quiet, switched in Settings → Customize → Simplified; see js/quiet.js)
   Pure black, almost no text, one thing at a time: a big play button inside a progress ring, the difficulty as three dots, the tries
   as dots, one search box. The song editor is a one-column dialog (#qed). Loaded last, so it wins over the other files.
   ===================================================================================================== */
body.quiet[data-diff]{
  --bg:#000;--surface:#0d0d0d;--surface2:#151515;--line:#2a2a2a;--text:#f5f5f5;--mute:#8a8a8a;--fade:rgba(255,255,255,.06);
  --page:none;--shadow:rgba(0,0,0,.85);--ok:#00b383;--ok-rgb:0,179,131;--soft:#d0d0d0;--red:#ff6a55;
  background:#000;
}
body.quiet[data-diff="white"]{--green:#f2f2f2;--green-ink:#000;--ac:255,255,255;--wash:255,255,255;--wave:#fff}
body.quiet[data-diff="green"],body.quiet[data-diff="off"]{--green:#00966e;--green-ink:#fff;--ac:0,150,110;--wash:0,150,110;--wave:#00b383}
body.quiet[data-diff="red"]{--green:#d62612;--green-ink:#fff;--ac:214,38,18;--wash:214,38,18;--wave:#f0452d}

/* what the simplified game does not show */
body.quiet :is(.site-lights,.sidebar,.lg-lights,.flagbar,.lg-sub,#helpBtn,#poolInfo,#guesses,#bar,.pulse,#viz,.side-cap,.flag-cap,.vol .mini,#dailyTimer[hidden]){display:none!important}
body.quiet .wrap{max-width:440px}
body.quiet main{gap:12px;padding:12px 0}

/* top: the small logo and the settings button */
body.quiet .top{padding-top:20px}
body.quiet .brand{font-size:20px;gap:8px}
body.quiet .brand .logo-mark{width:34px;height:auto}
body.quiet .brand small{font-size:11px;padding:2px 6px}
body.quiet .icon-btn{background:none;border-color:transparent;color:var(--mute)}
body.quiet .icon-btn:hover{color:var(--text)}

/* the three modes as plain words */
body.quiet .seg-ctl.modes{display:flex;justify-content:center;gap:2px;background:none;border:0;padding:0}
body.quiet .seg-ctl.modes .pill{display:none}
body.quiet .seg-ctl.modes button{height:34px;padding:0 14px;font-size:13px;font-weight:600;color:var(--mute);border-radius:0;box-shadow:inset 0 -2px 0 transparent;transition:color .2s,box-shadow .2s}
body.quiet .seg-ctl.modes button:hover{color:var(--text)}
body.quiet .seg-ctl.modes button[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--green)}
body.quiet .daily-timer{text-align:center;color:var(--mute);font-size:12px}

/* the tries as dots */
.q-tries{display:flex;justify-content:center;gap:10px;margin:10px 0 0}
.q-tries i{width:10px;height:10px;border-radius:50%;background:#262626;transition:background-color .25s,box-shadow .25s}
.q-tries i.ok{background:var(--ok)}
.q-tries i.wrong{background:#d62612}
.q-tries i.skip{background:#7a7a7a}
.q-tries i.now{background:#262626;box-shadow:0 0 0 2px #000,0 0 0 3.5px rgba(var(--ac),.9)}

/* the play button in its progress ring */
body.quiet .player-area{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:22px 4px}
body.quiet .player-area>.disc{order:1}
body.quiet .player-area>.stage-time{order:2;justify-self:auto;color:var(--mute)}
body.quiet .player-area>div:first-child{order:3;min-height:0}
body.quiet .disc{width:196px;height:196px}
body.quiet .play{width:152px;height:152px;border:0;box-shadow:0 0 70px rgba(var(--ac),.32)}
body.quiet .play:hover{box-shadow:0 0 90px rgba(var(--ac),.5)}
body.quiet .play svg{width:50px;height:50px}
body.quiet .play.done{background:#222;color:#777;box-shadow:none}
.q-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.q-ring circle{fill:none;stroke-width:3.2}
.q-ring .bg{stroke:#1d1d1d}
.q-ring .fg{stroke:var(--green);stroke-linecap:round}
body.quiet .stage-time strong{font-size:15px;font-weight:500;letter-spacing:0}
body.quiet .stage-time span{font-size:13px;font-weight:500}
body.quiet .mini{background:none;border-color:transparent;color:var(--mute);width:30px;height:30px}
body.quiet .note{margin:0;min-height:1.6em;font-size:13px}

/* difficulty: three dots, the chosen one ringed and named below */
body.quiet #app .vflag{flex-direction:row;width:auto;gap:12px;filter:none;justify-content:center;margin:2px auto 0}
body.quiet #app .stripe{width:34px;height:34px;transform:none!important;transition:none}
body.quiet #app .stripe .flap{display:none}
body.quiet #app .stripe::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--c);transition:box-shadow .25s,inset .25s}
body.quiet #app .stripe[data-d="white"]::before{background:#f2f2f2}
body.quiet #app .stripe:hover::before{inset:7px}
body.quiet #app .stripe.on::before{inset:8px;box-shadow:0 0 0 3px #000,0 0 0 4.5px var(--c)}
body.quiet #app .band{inset:0;border-radius:50%}
.q-dname{text-align:center;color:var(--mute);font-size:14px;margin-top:-2px}

/* the search box and the skip button */
body.quiet .guess-form{flex-direction:column;align-items:stretch;gap:6px;margin-top:8px}
body.quiet .search input{height:50px;border-radius:25px;background:#0d0d0d;padding-left:44px;font-size:16px}
body.quiet .search input:focus{border-color:rgba(var(--ac),.8)}
body.quiet .guess-form .skip{align-self:center;height:36px;border:0;background:none;color:var(--mute);font-weight:600}
body.quiet .guess-form .skip:hover{color:var(--text)}
body.quiet .list{border-radius:16px;background:#0b0b0b;border-color:#222}
body.quiet .vol{opacity:.55;margin-top:6px}
body.quiet .vol:hover{opacity:1}
body.quiet .after .btn{border-radius:25px}
body.quiet .btn.main{box-shadow:none;border-radius:25px}

/* the footer: only the way to the song editor */
body.quiet footer{border:0;justify-content:center}
body.quiet footer button{font-size:14px;font-weight:500;padding:8px 14px}

/* the result */
body.quiet .result-bar{background:#000}
body.quiet .result-card{background:#0a0a0a;border-color:#1d1d1d;box-shadow:none}

/* the start page: plain black (its two ways in are styled in account.css) */
body.quiet .landing{background:#000}

/* ---- the simplified song editor ---- */
body.quiet dialog.qed{width:min(520px,100vw);height:min(780px,100dvh);max-height:100dvh;margin:auto;padding:0;border:1px solid #1c1c1c;border-radius:22px;background:#000;color:#f5f5f5;font-family:var(--font);overflow:hidden}
body.quiet dialog.qed[open]{display:flex;flex-direction:column}
body.quiet dialog.qed::backdrop{background:rgba(0,0,0,.9)}
.qe-head{display:flex;align-items:center;gap:12px}
body.quiet .qe-head{padding:20px 24px 10px}
body.quiet .qe-head select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 4px center no-repeat;color:#f5f5f5;border:0;border-radius:8px;padding:6px 26px 6px 0;font:700 22px var(--font);text-overflow:ellipsis;cursor:pointer}
body.quiet .qe-head select option{background:#111;color:#f5f5f5;font:500 15px var(--font)}
.qe-head select:focus-visible{outline:2px solid #00966e;outline-offset:2px}
body.quiet .qe-link{background:none;border:0;color:#00b383;font:700 15px var(--font);padding:8px 4px;cursor:pointer}
body.quiet .qe-link:hover{color:#fff}
body.quiet .qe-body{flex:1;overflow-y:auto;padding:4px 24px 16px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.qe-search{position:relative}
.qe-search .sico{position:absolute;left:16px;top:50%;width:17px;height:17px;margin-top:-8.5px;fill:none;stroke:#8a8a8a;stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.qe-search input{width:100%;height:50px;box-sizing:border-box;border-radius:25px;background:#0d0d0d;border:1px solid #2a2a2a;color:#f5f5f5;font:500 16px var(--font);padding:0 18px 0 44px}
.qe-search input:focus{outline:none;border-color:#00966e}
.qe-search input::placeholder{color:#7a7a7a}
.qe-status{min-height:20px;margin:8px 4px 2px;color:#8a8a8a;font-size:13px}
.qe-status:empty{display:none}
.qe-import{display:block;width:100%;margin:6px 0 10px;min-height:48px;border-radius:24px;border:1px solid #00966e;background:rgba(0,150,110,.12);color:#fff;font:700 14px var(--font);padding:8px 16px;cursor:pointer}
.qe-import:hover{background:rgba(0,150,110,.25)}
.qe-list{list-style:none;margin:0;padding:0}
.qe-list li{display:flex;align-items:center;gap:12px;min-height:54px;border-bottom:1px solid #141414}
.qe-list li.empty{color:#8a8a8a;font-size:14px;padding:14px 4px;border:0}
.qm{display:flex;flex-direction:column;min-width:0;flex:1}
.qm b{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qm i{font-style:normal;color:#8a8a8a;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qpv,.qadd,.qrm{flex:none;display:grid;place-items:center;padding:0;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.qpv{width:34px;height:34px;border-radius:50%;border:1px solid #2a2a2a;background:none;color:#a0a0a0}
.qpv svg{width:13px;height:13px;fill:currentColor}
.qpv:hover,.qpv.on{border-color:#fff;color:#fff}
.qpv.on{background:#1c1c1c}
.qpv.busy{opacity:.6}
.qadd{width:34px;height:34px;border-radius:50%;border:1.5px solid #00966e;background:none;color:#00b383;font:400 22px/1 var(--font)}
.qadd svg{width:15px;height:15px}
.qadd:hover{background:rgba(0,150,110,.2)}
.qadd.on{background:#00966e;color:#fff}
.qrm{width:34px;height:34px;border:0;border-radius:50%;background:none;color:#8a8a8a;font-size:15px}
.qrm:hover{color:#fff;background:#1c1c1c}
.qe-st{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 4px;color:#6d6d6d;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.qe-acts button,.qe-acts2 button{background:none;border:0;color:#8a8a8a;font:600 12px var(--font);letter-spacing:.02em;text-transform:none;padding:6px 8px;cursor:pointer}
.qe-acts button:hover,.qe-acts2 button:hover:not(:disabled){color:#fff}
.qe-acts2{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.qe-acts2 button:disabled,.qstep button:disabled{opacity:.35;cursor:default}
.qe-lock{margin:4px 2px 8px;color:#8a8a8a;font-size:13px;line-height:1.45}
.qe-more{display:block;margin:8px auto 0;background:none;border:0;color:#8a8a8a;font:600 14px var(--font);padding:10px 16px;cursor:pointer}
.qe-more:hover{color:#fff}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchip{height:38px;min-width:48px;padding:0 14px;border-radius:19px;border:1px solid #2a2a2a;background:none;color:#f5f5f5;font:600 14px var(--font);cursor:pointer}
.qchip:hover{border-color:#777}
.qchip.on{background:#fff;border-color:#fff;color:#000}
.qstep{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:15px;font-weight:600}
.qs-b{display:flex;align-items:center;gap:6px}
.qs-b b{min-width:64px;text-align:center;font-weight:700}
.qstep button{width:40px;height:40px;border-radius:50%;border:1px solid #2a2a2a;background:none;color:#f5f5f5;font:500 22px/1 var(--font);cursor:pointer}
.qstep button:hover:not(:disabled){border-color:#fff}
body.quiet .qe-foot{padding:12px 24px 20px;border-top:1px solid #141414}
.qe-play{width:100%;cursor:pointer;transition:background-color .15s}
body.quiet .qe-play{height:52px;border-radius:26px;border:0;background:#00966e;color:#fff;font:800 16px var(--font)}
body.quiet .qe-play:hover:not(:disabled){background:#00a578}
body.quiet .qe-play:disabled{background:#1a1a1a;color:#6d6d6d;cursor:default}
@media (max-width:540px){body.quiet dialog.qed{border-radius:0;border:0;height:100dvh}}

/* in the simplified game the section titles are small grey captions (the first one is not shown), and the extra header buttons are not needed */
body.quiet .qe-st .hk-ico,body.quiet .qe-st1,body.quiet #qeAdv,body.quiet #qeX{display:none}
body:not(.quiet) #qeDone{display:none}

/* ---- the simple editor of the normal game: the same one column, as modules of the game (black, flag edge, glowing outline) ---- */
body:not(.quiet) dialog.qed{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:68px 0 40px;border:0;border-radius:0;background:transparent;overflow-x:hidden;overflow-y:auto;color:var(--text);box-sizing:border-box;scrollbar-width:thin}
body:not(.quiet) dialog.qed[open]{display:block;animation:hkFade .25s ease}
body:not(.quiet) dialog.qed::backdrop{background:#000}
body:not(.quiet) dialog.qed::before{display:none}
body:not(.quiet) .qe-head{position:fixed;top:0;left:0;right:0;height:56px;z-index:30;padding:0 14px;background:linear-gradient(#000 60%,transparent);box-sizing:border-box}
body:not(.quiet) .qe-head select{flex:0 1 380px;min-width:0;margin-right:auto;appearance:none;-webkit-appearance:none;background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center no-repeat;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:11px 32px 11px 14px;font:800 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;text-overflow:ellipsis;cursor:pointer}
body:not(.quiet) .qe-head select:hover{background-color:rgba(255,255,255,.14);border-color:#fff}
body:not(.quiet) .qe-head select option{background:#0a0a0a;color:#fff;text-transform:none;letter-spacing:0;font:500 14px var(--font)}
body:not(.quiet) .qe-body{width:min(700px,calc(100% - 24px));margin:0 auto;display:flex;flex-direction:column;gap:14px}
body:not(.quiet) .qe-foot{width:min(700px,calc(100% - 24px));margin:14px auto 0}
body:not(.quiet) .qe-sec{background:#000;border:1px solid rgba(255,255,255,.24);border-radius:4px;border-top:3px solid transparent;border-image:var(--trico) 1;padding:12px 14px 14px;position:relative;min-width:0}
body:not(.quiet) .qe-st{margin:0 0 10px;justify-content:flex-start;color:#fff;font:800 12px var(--font);letter-spacing:.09em;text-transform:uppercase}
body:not(.quiet) .qe-st .qe-acts{margin-left:auto}
body:not(.quiet) .qe-st .hk-ico{flex:none}
body:not(.quiet) .qe-search input{border-radius:6px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.3)}
body:not(.quiet) .qe-search input:focus{border-color:#00b383}
body:not(.quiet) .qe-play{height:48px;border-radius:10px;border:0;background:#00966e;color:#fff;font:800 15px var(--font);position:relative;overflow:hidden;box-shadow:0 0 22px rgba(0,150,110,.25)}
body:not(.quiet) .qe-play::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--trico)}
body:not(.quiet) .qe-play:hover:not(:disabled){background:#00a578}
body:not(.quiet) .qe-play:disabled{background:#1a1a1a;color:#6d6d6d;box-shadow:none;cursor:default}
body:not(.quiet) .qchip.on{background:#fff;color:#07130d}
body:not(.quiet) .qe-list li{border-bottom-color:rgba(255,255,255,.1)}
/* the glow of every module: the outline flickers on one after another, then breathes (the colours of the flag, as in the advanced editor) */
body.editor-on dialog.qed{
  --g-off:0 0 0 0 rgba(0,0,0,0);
  --g-low:0 0 8px -5px rgba(0,185,135,.4),-18px 0 18px -10px rgba(255,255,255,.4),18px 0 18px -10px rgba(240,52,28,.4);
  --g-steady:0 0 12px -5px rgba(0,185,135,.7),-30px 0 30px -10px rgba(255,255,255,.65),30px 0 30px -10px rgba(240,52,28,.7),-48px 0 70px -20px rgba(255,255,255,.3),48px 0 70px -20px rgba(240,52,28,.32);
  --g-bright:0 0 14px -4px rgba(0,185,135,.72),-36px 0 38px -8px rgba(255,255,255,.7),36px 0 38px -8px rgba(240,52,28,.74),-56px 0 84px -16px rgba(255,255,255,.3),56px 0 84px -16px rgba(240,52,28,.34)}
body.editor-on:not(.quiet) dialog.qed .qe-sec{box-shadow:var(--g-steady);animation:modOn .55s steps(1) calc(var(--i)*70ms) both,modBreathe 3.4s ease-in-out calc(var(--i)*70ms + .55s) infinite alternate}
body.no-flicker.editor-on:not(.quiet) dialog.qed .qe-sec{animation:modBreathe 3.4s ease-in-out calc(var(--i)*70ms) infinite alternate}
body.lit-out.editor-on:not(.quiet) dialog.qed .qe-sec{animation:modOff .3s steps(1) calc(var(--i)*30ms) forwards}

/* css/account.css */
/* =====================================================================================================
   ACCOUNTS, ADMIN PANEL AND COMMANDS: the dialogs of js/account.js, js/admin.js and js/commands.js (they reuse the Settings dialog)
   ===================================================================================================== */
dialog.account{width:min(460px,calc(100vw - 24px))}
dialog.account.admin{width:min(640px,calc(100vw - 24px))}
.ac-form{display:flex;flex-direction:column;gap:14px}
.ac-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.ac-tabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:10px 6px;color:var(--mute);font:800 13px var(--font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ac-tabs button:hover{color:var(--text)}
.ac-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--green)}
.ac-f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--soft)}
.ac-f input{height:46px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:500 16px var(--font);padding:0 14px;width:100%;box-sizing:border-box}
.ac-f input:focus{outline:none;border-color:rgba(var(--ac),.8)}
.ac-f small{font-size:12px;font-weight:500;color:var(--mute)}
.ac-captcha{min-height:0;display:flex;justify-content:center}
.ac-captcha[hidden]{display:none}
.ac-msg{min-height:0;font-size:13px;line-height:1.4}
.ac-msg:empty{display:none}
.ac-msg.err{color:var(--red);font-weight:600}
.ac-msg.ok{color:var(--ok);font-weight:600}
.ac-note{margin:0;color:var(--soft);font-size:14px;line-height:1.5}
.ac-link{align-self:center;background:none;border:0;color:var(--mute);font:600 13px var(--font);text-decoration:underline;cursor:pointer;padding:6px}
.ac-link:hover{color:var(--text)}
.ac-who{font-weight:700;margin-bottom:8px;overflow-wrap:anywhere}
.ac-go[disabled]{opacity:.55;cursor:wait}

/* the admin panel */
.adm-err{color:var(--red);font-size:13px;font-weight:600}
.adm-err:empty{display:none}
.adm-list,.adm-log{list-style:none;margin:0;padding:0}
.adm-list li{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.adm-list li.empty,.adm-log li.empty{color:var(--mute);font-size:13px;border:0}
.adm-who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}
.adm-who b{font-size:15px;overflow-wrap:anywhere}
.adm-who small{color:var(--mute);font-size:12px;overflow-wrap:anywhere}
.adm-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;font:800 10px var(--font);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;background:var(--surface2);color:var(--soft)}
.adm-tag.b{background:#7a1a14;color:#fff}
.adm-tag.a{background:#00966e;color:#fff}
.adm-btns{display:flex;gap:6px}
.chip-btn.danger{border-color:#7a1a14;color:#ff8a7a}
.chip-btn.danger:hover{background:#7a1a14;color:#fff}
.adm-log li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.adm-log li>span:first-child{flex:none;color:var(--mute);min-width:104px}
.adm-log small{color:var(--mute)}

/* the commands */
.cmd-list{list-style:none;margin:6px 0 14px;padding:0;display:flex;flex-direction:column;gap:12px}
.cmd-list li{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cmd-list code{font:700 14px ui-monospace,Consolas,monospace;color:var(--text);background:var(--surface2);border-radius:6px;padding:4px 8px;align-self:flex-start;overflow-wrap:anywhere}
.cmd-list span{color:var(--soft);font-size:14px;line-height:1.45}

/* a short message at the bottom of the page */
#toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,20px);max-width:min(440px,calc(100vw - 32px));padding:12px 18px;border-radius:12px;background:#111;color:#fff;border:1px solid rgba(255,255,255,.25);font:600 14px var(--font);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* the buttons of the forms are full-width rows (the game's .btn grows to fill a row; in a column it must keep its own height) */
.ac-form .btn,.account .set-links .btn{flex:none;height:46px;width:100%}
.account .set-links{display:flex;flex-direction:column;gap:8px}

/* ---- community playlists ---- */
dialog.community{width:min(760px,calc(100vw - 24px))}
.cm-head h3{font-size:22px;letter-spacing:-.01em}
.cm-sub{margin:3px 0 0;color:var(--mute);font-size:13px;font-weight:500}
.cm-bar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.cm-search{position:relative;flex:1 1 220px;min-width:0}
.cm-search svg{position:absolute;left:14px;top:50%;width:17px;height:17px;margin-top:-8.5px;fill:none;stroke:var(--mute);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.cm-search input{width:100%;height:48px;box-sizing:border-box;border-radius:24px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:500 15px var(--font);padding:0 16px 0 42px;transition:border-color .15s,box-shadow .15s}
.cm-search input:focus{outline:none;border-color:rgba(var(--ac),.85);box-shadow:0 0 0 3px rgba(var(--ac),.18)}
.cm-bar .btn{flex:none;width:auto;height:48px;padding:0 20px;border-radius:24px}
.cm-tabs{display:flex;gap:8px;margin:14px 0 6px;border:0;flex-wrap:wrap}
.cm-tabs button{flex:0 0 auto;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:999px;background:var(--surface);padding:9px 16px;font:700 12px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.cm-tabs button:hover{color:var(--text);border-color:rgba(255,255,255,.4)}
.cm-tabs button[aria-selected="true"]{background:#fff;color:#07130d;border-color:#fff}
.cm-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}

/* the cover of a playlist: a colour (from its id) with its first letter and a half record */
.cm-cover{flex:none;position:relative;overflow:hidden;width:60px;height:60px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cm-cover::before{content:"";position:absolute;width:140%;aspect-ratio:1;right:-62%;bottom:-66%;border-radius:50%;border:9px solid rgba(255,255,255,.16)}
.cm-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 20% 10%,rgba(255,255,255,.28),transparent 60%)}
.cm-cover b{position:relative;z-index:1;font:800 26px var(--font);text-shadow:0 2px 10px rgba(0,0,0,.4)}
.cm-cover.lg{width:92px;height:92px;border-radius:20px}
.cm-cover.lg b{font-size:40px}
.g0{background:linear-gradient(135deg,#00b383,#0b3d2e)}
.g1{background:linear-gradient(135deg,#f0452d,#5a120a)}
.g2{background:linear-gradient(135deg,#8a8f98,#2a2d33)}
.g3{background:linear-gradient(135deg,#e9c46a,#7a4a12)}
.g4{background:linear-gradient(135deg,#4c8dff,#12285a)}
.g5{background:linear-gradient(135deg,#e8638b,#4a1d6a)}

.cm-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main dots" "pop pop";border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:border-color .15s,transform .15s,box-shadow .15s}
.cm-card:hover{border-color:rgba(255,255,255,.38);transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.cm-main{grid-area:main;display:flex;align-items:center;gap:14px;min-width:0;text-align:left;background:none;border:0;padding:12px 6px 12px 12px;color:var(--text);cursor:pointer;border-radius:18px 0 0 18px}
.cm-txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.cm-txt .t{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-meta,.cm-stats{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;color:var(--mute);font-size:13px}
.cm-dot{opacity:.5}
.cm-stars{display:inline-flex;gap:1px;font-style:normal}
.cm-stars i{font-style:normal;color:#3d3d3d;font-size:15px;line-height:1}
.cm-stars i.on{color:#f5c542;text-shadow:0 0 8px rgba(245,197,66,.35)}
.cm-stars.big i{font-size:22px}
.cm-eye{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cm-dots{grid-area:dots;width:50px;background:none;border:0;color:var(--mute);cursor:pointer;display:grid;place-items:center;border-radius:0 18px 18px 0;transition:background-color .15s,color .15s}
.cm-dots svg{width:20px;height:20px;fill:currentColor}
.cm-dots:hover,.cm-dots[aria-expanded="true"]{color:var(--text);background:rgba(255,255,255,.08)}
.cm-pop{grid-area:pop;margin:0 12px 12px;padding:14px 16px;border-radius:14px;background:#0a0a0a;border:1px solid rgba(255,255,255,.22);animation:cmPop .18s ease}
@keyframes cmPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cm-pop[hidden]{display:none}
.cm-pop dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:baseline}
.cm-pop dt{font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cm-pop dd{margin:0;font-size:14px;color:var(--text);overflow-wrap:anywhere;white-space:pre-line}
.cm-foot{display:flex;justify-content:center;margin-top:14px}
.cm-foot .btn{flex:none;width:auto;padding:0 24px;border-radius:24px}

/* waiting for the list, and an empty list */
.cm-skel{height:84px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.03) 70%) 0 0/300% 100%;animation:cmShimmer 1.4s linear infinite}
@keyframes cmShimmer{to{background-position:-300% 0}}
.cm-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 16px;color:var(--mute);border:1px dashed var(--line);border-radius:18px}
.cm-empty svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.cm-empty b{color:var(--text);font-size:16px}
.cm-empty .btn{flex:none;width:auto;padding:0 22px;border-radius:24px;margin-top:4px}

/* one playlist */
.cm-top{display:flex;gap:16px;align-items:center;margin-bottom:4px}
.cm-topt{min-width:0}
.cm-h{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}
.cm-by{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;color:var(--mute);font-size:13px}
.cm-by b{color:var(--text)}
.cm-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--font);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cm-descr{margin:12px 0 2px;color:var(--soft);font-size:15px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.cm-pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.cm-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--soft)}
.cm-rate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;margin-bottom:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.cm-yr{font-weight:700;font-size:13px;color:var(--soft)}
.cm-pick{display:inline-flex;gap:2px}
.cm-pick button{background:none;border:0;color:#3d3d3d;font-size:32px;line-height:1;padding:0 2px;cursor:pointer;min-width:42px;min-height:42px;transition:transform .12s,color .12s}
.cm-pick button.on{color:#f5c542;text-shadow:0 0 12px rgba(245,197,66,.45)}
.cm-pick button:hover{color:#ffd966;transform:scale(1.15)}
.cm-acts{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.cm-acts .btn{flex:1 1 170px;width:auto;white-space:normal;height:auto;min-height:48px;padding:8px 14px;text-align:center;border-radius:14px}
.btn.danger{border-color:#7a1a14;color:#ff8a7a}
.btn.danger:hover{background:#7a1a14;color:#fff}
.cm-sec{display:flex;align-items:center;justify-content:space-between;margin:20px 0 8px;font:800 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cm-songs{list-style:none;margin:0 0 6px;padding:0;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;counter-reset:song;background:rgba(255,255,255,.02)}
.cm-songs li{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px}
.cm-songs li:not(.empty)::before{counter-increment:song;content:counter(song);flex:none;width:22px;color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}
.cm-songs li:last-child{border:0}
.cm-songs li.empty{color:var(--mute)}
.cm-songs b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-songs i{font-style:normal;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;max-width:42%}
.cm-cform{display:flex;gap:10px;align-items:stretch;margin:6px 0 12px}
.cm-cform textarea,#cmShDesc{flex:1;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:500 15px var(--font);padding:11px 14px;resize:vertical;min-height:48px;box-sizing:border-box;width:100%;transition:border-color .15s,box-shadow .15s}
.cm-cform textarea:focus,#cmShDesc:focus{outline:none;border-color:rgba(var(--ac),.85);box-shadow:0 0 0 3px rgba(var(--ac),.18)}
.cm-cform .btn{flex:none;width:auto;padding:0 20px;height:auto;border-radius:14px}
.cm-comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cm-comments li{display:flex;gap:12px;align-items:flex-start}
.cm-comments li.empty{color:var(--mute);font-size:13px;display:block;padding:6px 0}
.cm-bub{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 14px}
.cm-ch{display:flex;align-items:center;gap:10px;font-size:13px}
.cm-ch b{font-size:14px}
.cm-ch span{color:var(--mute);flex:1}
.cm-ch .ac-link{padding:0;font-size:12px}
.cm-bub p{margin:5px 0 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
#cmPick{height:48px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:500 15px var(--font);padding:0 12px}
@media (max-width:520px){.cm-cover{width:52px;height:52px}.cm-cover.lg{width:72px;height:72px}.cm-cover.lg b{font-size:30px}.cm-h{font-size:20px}.cm-pop dl{grid-template-columns:1fr}}

/* ---- the main menu: with an account, or without one ---- */
.lg-card{gap:16px}
.lg-brand{font-size:clamp(44px,7vw,96px)}
.lg-card .flagbar{height:14px}
.lg-sub{font-size:clamp(16px,2vw,22px);margin-top:0}
.lg-choose{font:800 13px var(--font);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:6px}
.lg-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;text-align:left}
.lg-box{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lg-box h2{margin:0;font-size:20px;letter-spacing:-.01em}
.lg-pc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4;color:#f0f0f0;flex:1}
.lg-pc li{position:relative;padding-left:24px}
.lg-pc li::before{position:absolute;left:0;top:0;width:18px;text-align:center;font-weight:800}
.lg-pc .pro::before{content:"+";color:#2fe5a4}
.lg-pc .con::before{content:"−";color:#ff7a66}
.lg-go{flex:none;height:50px;border-radius:10px;border:1px solid #fff;background:transparent;color:#fff;font:800 15px var(--font);cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.lg-go:hover{background:#fff;color:#07130d}
#lgAccount{background:#00966e;border-color:#00966e}
#lgAccount:hover{background:#00a578;border-color:#00a578;color:#fff}
body.no-acct #lgBoxAcct,body.no-acct .lg-choose{display:none}
body.no-acct .lg-choices{grid-template-columns:minmax(0,520px);justify-content:center}
@media (max-width:760px){.lg-choices{grid-template-columns:minmax(0,1fr)}.lg-box{padding:16px}}
.ac-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft);cursor:pointer}
.ac-check input{width:18px;height:18px;accent-color:#00966e;flex:none}

/* ---- no half-drawn main menu: it fades in when the scripts are ready (and after 3 s whatever happens), and a signed-in player never sees it ---- */
.landing:not(.lg-ready) .lg-card,.landing:not(.lg-ready) .lg-top,.landing:not(.lg-ready) .lg-lights{opacity:0;animation:lgFallback 0s 3s forwards}
@keyframes lgFallback{to{opacity:1}}
.landing.lg-ready .lg-card,.landing.lg-ready .lg-top{animation:lgIn .3s ease both}
@keyframes lgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html.has-session #landing{visibility:hidden;animation:lgFallbackV 0s 4s forwards}
@keyframes lgFallbackV{to{visibility:visible}}

/* ---- the "you are banned" screen (js/banned.js): the page behind it is hidden and cannot be clicked ---- */
html.has-ban body>*:not(#banDlg){visibility:hidden!important}
body.banned>*:not(#banDlg){pointer-events:none!important;user-select:none!important;filter:blur(6px) brightness(.35)}
#banDlg{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:20px;border:0;background:#000;color:#fff;display:none;place-items:center;font-family:var(--font);z-index:2147483647;box-sizing:border-box}
#banDlg[open]{display:grid!important;visibility:visible!important;opacity:1!important}
#banDlg::backdrop{background:#000}
#banDlg::before{display:none}
.ban-box{width:min(440px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 28px;border:1px solid #7a1a14;border-radius:20px;background:#0b0505;box-shadow:0 0 70px rgba(214,38,18,.28)}
.ban-box svg{width:64px;height:64px;fill:none;stroke:#ff5a45;stroke-width:3;stroke-linecap:round}
.ban-box h2{margin:0;font-size:24px;letter-spacing:-.01em}
.ban-box p{margin:0;color:#d8c4c1;font-size:15px;line-height:1.55}
#banQuit{margin-top:6px;height:50px;width:100%;border-radius:25px;border:0;background:#d62612;color:#fff;font:800 16px var(--font);cursor:pointer}
#banQuit:hover{background:#ec3a24}
#banQuit:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- admin: timeouts and the post / comment browser ---- */
.adm-tag.t{background:#7a4a12;color:#fff}
.adm-to{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;margin-top:2px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.adm-cb{font-weight:500;font-size:14px;line-height:1.4;overflow-wrap:anywhere;white-space:pre-line}
#admBList li .adm-who b:first-child{overflow-wrap:anywhere}
#admBrowse .cm-tabs{margin:6px 0}

/* the small status tags of an account (banned, timed out…) are chips, not full-width bars */
.adm-who .adm-tag{align-self:flex-start;margin:2px 0 0}

/* the bot trap field: off the page, not just hidden, so a script still sees it */
.ac-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* text for search engines and screen readers only */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the announcement stripe: red text on a dark red-edged bar at the very top ---- */
#annBar{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;gap:12px;padding:9px 14px;box-sizing:border-box;background:linear-gradient(180deg,#1d0505,#120303);border-bottom:2px solid #d62612;box-shadow:0 6px 28px rgba(214,38,18,.4);color:#ff5a45;font:700 14px/1.4 var(--font);text-shadow:0 0 12px rgba(214,38,18,.55)}
#annBar[hidden]{display:none}
.ann-tag{flex:none;background:#d62612;color:#fff;border-radius:4px;padding:2px 8px;font:800 11px var(--font);letter-spacing:.14em;text-transform:uppercase;text-shadow:none;animation:annPulse 1.8s ease-in-out infinite}
@keyframes annPulse{50%{box-shadow:0 0 0 4px rgba(214,38,18,.28)}}
.ann-text{flex:1;min-width:0;text-align:center;overflow-wrap:anywhere}
.ann-x{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,90,69,.5);background:none;color:#ff5a45;font-size:13px;cursor:pointer}
.ann-x:hover{background:rgba(214,38,18,.25);color:#fff}
body.has-ann{padding-top:var(--ann-h,0)}
body.has-ann .landing{top:var(--ann-h,0);height:auto;bottom:0}
@media (prefers-reduced-motion:reduce){.ann-tag{animation:none}}
.adm-ta,#admAnnText{width:100%;box-sizing:border-box;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:500 15px var(--font);padding:10px 12px;resize:vertical}
#admAnnText:focus{outline:none;border-color:rgba(var(--ac),.85)}
.ann-prev{margin:8px 0;padding:9px 14px;border-radius:8px;background:#150303;border:1px solid #d62612;color:#ff5a45;font:700 14px/1.4 var(--font);text-align:center;overflow-wrap:anywhere}
.ann-prev[hidden]{display:none}

/* ---- two-step sign-in ---- */
.tf-qr{display:grid;place-items:center;padding:10px;background:#fff;border-radius:14px;width:fit-content;margin:0 auto}
.tf-secret{display:block;text-align:center;padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font:700 15px ui-monospace,Consolas,monospace;letter-spacing:.08em;overflow-wrap:anywhere;user-select:all}
.tf-warn{color:#e9c46a}
.tf-state{padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-weight:700}
.tf-state.on{border-color:#00966e;color:#2fe5a4;background:rgba(0,150,110,.1)}
.tf-state.off{color:var(--soft)}

/* css/extras.css */
/* ---- 3.3.0: share from the editor, challenge links, the streak and the hint ---- */
/* over the search box: streak, challenge tag, hint */
.hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;min-height:0;margin:0 0 -4px}
.hud:empty{display:none}
.hud-chip{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--font);letter-spacing:.04em;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
.hud-chip b{font-variant-numeric:tabular-nums}
.hud-chip.streak{border-color:rgba(255,160,40,.55);color:#ffb347}
.hud-chip.chal{border-color:rgba(0,179,131,.6);color:#3ee0b0}
button.hud-chip.hint{cursor:pointer}
button.hud-chip.hint:hover:not(:disabled){border-color:var(--text)}
button.hud-chip.hint:disabled{opacity:.45;cursor:default}
.hud-chip kbd{font:700 10px/1 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--mute)}
.hint-text{flex-basis:100%;text-align:center;font-size:13px;color:var(--text);animation:hintIn .35s ease-out}
@keyframes hintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* the start page when a friend's link was opened */
.ch-banner{text-align:center;font:700 14px/1.4 var(--font);color:#3ee0b0;background:rgba(0,179,131,.1);border:1px solid rgba(0,179,131,.5);border-radius:10px;padding:10px 14px}
/* link button on a song row */
.song-ch{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer}
.song-ch svg{width:15px;height:15px}
.song-ch:hover{color:var(--text);background:var(--fade)}
.hk-panel .song-ch{width:22px;height:22px}
.qed .song-ch{width:34px;height:34px;color:#8a8a8a}
.qed .song-ch svg{width:17px;height:17px}
.qed .song-ch:hover{color:#fff;background:#1c1c1c}
/* the share button next to the delete button of a playlist */
#plShare{margin-right:2px}
#plShare svg{width:15px;height:15px}
#plShare:disabled{opacity:.35;cursor:default}
.qe-acts button:disabled{opacity:.35;cursor:default}
/* Commands window */
.cmd-sub{margin:18px 0 6px;font:800 12px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* console: matrix rain */
#exMatrix{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147480000;pointer-events:none}
@media (max-width:760px){.hud{margin-bottom:0}}

/* drawn marks instead of emoji */
.pl-mk{width:12px;height:12px;vertical-align:-1px;margin-right:5px;flex:none}
#plDel svg{width:15px;height:15px}