:root{--bg:#eceff4;--card:#fff;--fg:#14161c;--mut:#5d6472;--line:#d3d8e1;--acc:#2f4bd8;--accfg:#fff;--bad:#b3261e}
@media(prefers-color-scheme:dark){:root{--bg:#0f1218;--card:#181c25;--fg:#e8ebf2;--mut:#98a0b0;--line:#2a303c;--acc:#8aa2ff;--accfg:#0b1030;--bad:#ff8a80}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,h4{font-family:"Iowan Old Style",Palatino,Georgia,serif;margin:0;line-height:1.2}
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px}
.bar{max-width:960px;margin:auto;display:flex;gap:10px;align-items:center}
/* Logo stave: five bright 2px lines, 7px apart, centred behind "Stave+", with a treble clef at the start */
:root{--stave:rgba(47,75,216,.5)}
@media(prefers-color-scheme:dark){:root{--stave:rgba(138,162,255,.6)}}
.logo{font-size:28px;padding:0 10px 0 30px;
  background:repeating-linear-gradient(to bottom,var(--stave) 0 2px,transparent 2px 7px) 0 50%/100% 30px no-repeat}
.logo .clef{position:absolute;left:0;top:50%;transform:translateY(-54%);font:400 46px/1 "Apple Symbols","Noto Music","Segoe UI Symbol","Bravura",serif;
  color:var(--fg);pointer-events:none;z-index:0}  /* same colour as the "Stave+" lettering */
/* Colours that stand apart from the blue stave: a warm gold clef and a coral "+" */
:root{--clef:#b8860b;--clef-glow:rgba(255,190,40,.45);--plus:#e2462c}
@media(prefers-color-scheme:dark){:root{--clef:#ffc83d;--clef-glow:rgba(255,200,60,.5);--plus:#ff7a59}}
.logo .plus{color:inherit;text-shadow:none;font-weight:900;-webkit-text-stroke:.8px currentColor;paint-order:stroke fill;
  position:relative;top:-.38em;font-size:.82em;margin-left:1px}  /* "+" matches "Stave", a bit bolder, raised like a superscript */
.logo span{color:var(--acc)}
#q{flex:1;min-width:0}
main{max-width:960px;margin:auto;padding:16px}
input,textarea,button{font:inherit;color:inherit}
input,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 14px;min-height:40px}
button.pri{background:var(--acc);color:var(--accfg);border-color:var(--acc);font-weight:600}
button.ghost{background:transparent}button.danger{color:var(--bad)}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:8px;padding:14px;cursor:pointer}
.card h3{font-size:19px}.card p{margin:2px 0 8px;color:var(--mut)}
small,.mut{color:var(--mut)}
.empty{color:var(--mut);padding:40px 0;text-align:center}
.head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0}
.head h2{font-size:30px}.head p{margin:2px 0}
.notes{white-space:pre-wrap;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px}
.ver{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin:12px 0}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.thumbs img{height:110px;border:1px solid var(--line);border-radius:4px;cursor:pointer;background:#fff}
.pdf{display:grid;place-items:center;height:110px;min-width:80px;border:1px solid var(--line);border-radius:4px;cursor:pointer}
audio{width:100%;margin-top:6px}
dialog{width:min(520px,94vw);border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.55)}
label{display:block;margin:10px 0 4px;font-weight:600}
ul.files{list-style:none;margin:6px 0;padding:0}
ul.files li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);word-break:break-all}
ul.files button{min-height:32px;padding:2px 10px}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
#perf{position:fixed;inset:0;z-index:20;background:#0a0b0e;color:#eee;display:none;flex-direction:column}
#perf.on{display:flex}
#perf .top,#perf .bot{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#14161c;flex-wrap:wrap}
#perf button{background:#232733;color:#eee;border-color:#343a4a}
#perf .ttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#paudio{flex:1;min-width:200px}#paudio audio{margin:0}
#stage{flex:1;overflow:auto;display:flex;justify-content:center;align-items:center;background:#fff;min-height:0}
#stage img{max-width:100%;max-height:100%;object-fit:contain}
#stage.w{align-items:flex-start}#stage.w img{width:100%;max-height:none;height:auto}
#stage object{width:100%;height:100%}
.tabs{display:flex;gap:8px;margin:8px 0 12px}.tabs button{min-width:90px}
.pages{display:flex;flex-direction:column;gap:12px}
.pages img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:zoom-in}
.pages object{width:100%;height:80vh;border:1px solid var(--line);border-radius:8px}
.yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.more{position:relative}.more>[data-act="menu"]{font-size:22px;line-height:1;min-width:44px;padding:4px 10px}
.menu{position:absolute;right:0;top:calc(100% + 4px);z-index:10;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;display:flex;flex-direction:column}
.menu[hidden]{display:none}.menu button{border:0;background:transparent;text-align:left;border-radius:6px;min-height:44px}.menu button:hover,.menu button:focus-visible{background:var(--bg)}
body:not(.is-admin) .admin-only{display:none !important}
.menu-who{padding:8px 12px;font-size:14px;border-bottom:1px solid var(--line);margin-bottom:4px}
#who{font-size:20px}
select{font:inherit;color:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.err{color:var(--bad);min-height:1.5em;margin:8px 0}
.login{max-width:360px;margin:12vh auto 0;padding:16px}.login .logo{text-align:center;margin-bottom:16px}.login button{width:100%;margin-top:4px}

/* Logo: notes travel along the stave behind "Stave+", hopping, coming forward and gliding back */
.logo{position:relative;isolation:isolate}
header .logo{z-index:2}  /* lets the animation float over the search box (it never blocks taps) */
.logo .flow{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--acc);overflow:hidden}
.logo .flow i{position:absolute;left:-12%;font-style:normal;font-weight:400;font-size:.8em;line-height:1;opacity:0;color:var(--c);text-shadow:0 0 6px var(--c);
  transform-origin:50% 80%;will-change:transform,left;
  animation:travel 12s linear infinite,hop 2.6s cubic-bezier(.3,.7,.4,1) infinite}
/* top, travel delay, travel time, hop delay, hop time: all different so no two notes move together */
.logo .flow i:nth-child(1){top:18%;animation-delay:0s,0s}
.logo .flow i:nth-child(2){top:46%;animation-delay:-2s,-.7s;animation-duration:14s,3.1s}
.logo .flow i:nth-child(3){top:28%;animation-delay:-4.5s,-1.6s;animation-duration:12s,2.3s}
.logo .flow i:nth-child(4){top:52%;animation-delay:-6.5s,-.3s;animation-duration:15s,2.9s}
.logo .flow i:nth-child(5){top:36%;animation-delay:-8.5s,-2.1s;animation-duration:13s,2.5s}
.logo .flow i:nth-child(6){top:22%;animation-delay:-10.5s,-1.2s;animation-duration:12s,3.3s}
@keyframes travel{0%{left:-12%;opacity:0}8%{opacity:.95}92%{opacity:.95}100%{left:100%;opacity:0}}
@keyframes hop{
  0%  {transform:translateY(0) scale(.8) rotate(0)}
  12% {transform:translateY(-8px) scale(1.05) rotate(-10deg)}   /* jump */
  24% {transform:translateY(0) scale(.95) rotate(4deg)}
  30% {transform:translateY(-3px) scale(1) rotate(0)}           /* little second bounce */
  36% {transform:translateY(0) scale(1)}
  52% {transform:translateY(-2px) scale(1.75) rotate(-6deg)}    /* come forward */
  62% {transform:translateY(-2px) scale(1.75) rotate(6deg)}
  90% {transform:translateY(2px) scale(.55) rotate(0)}          /* glide backward */
  100%{transform:translateY(0) scale(.8)}
}
/* A soft glow every few seconds to invite a press; it stops while someone is holding */
header .logo{animation:invite 6s ease-in-out 2s infinite}
header .logo.holding{animation:none}
@keyframes invite{0%,78%,100%{text-shadow:none}86%{text-shadow:0 0 10px var(--acc),0 0 22px var(--acc)}}
/* do re mi fa so la ti do popping out as a rising scale, then a short rest (8 s cycle) */
.logo .pops{position:absolute;inset:0;pointer-events:none;z-index:1}
.logo .pops b{position:absolute;font:700 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.02em;color:var(--c);
  opacity:0;transform:scale(0);animation:pop 8s cubic-bezier(.2,.9,.3,1.4) infinite;text-shadow:0 0 2px var(--bg),0 0 8px var(--c)}
.logo .pops b:nth-child(1){left:2%;top:70%;animation-delay:0s}
.logo .pops b:nth-child(2){left:15%;top:58%;animation-delay:.6s}
.logo .pops b:nth-child(3){left:28%;top:46%;animation-delay:1.2s}
.logo .pops b:nth-child(4){left:41%;top:34%;animation-delay:1.8s}
.logo .pops b:nth-child(5){left:54%;top:22%;animation-delay:2.4s}
.logo .pops b:nth-child(6){left:67%;top:10%;animation-delay:3s}
.logo .pops b:nth-child(7){left:80%;top:-2%;animation-delay:3.6s}
.logo .pops b:nth-child(8){left:92%;top:-16%;animation-delay:4.2s;font-size:13px}  /* the top "do" a little bigger */
@keyframes pop{
  0%  {opacity:0;transform:translateY(4px) scale(0)}
  2.5%{opacity:1;transform:translateY(0) scale(1.35)}   /* pop! */
  5%  {opacity:1;transform:translateY(-2px) scale(1)}
  13% {opacity:0;transform:translateY(-14px) scale(.9)} /* float up and fade */
  100%{opacity:0;transform:translateY(-14px) scale(.9)}
}
header .logo.holding .pops{display:none}
@media (prefers-reduced-motion:reduce){.logo .flow,.logo .pops{display:none}header .logo{animation:none}}

/* Reordering song tiles */
.hint{margin:0 0 10px;font-size:14px}
.is-admin .grid .card{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.drag-ghost{opacity:.35}
.drag-chosen{box-shadow:0 10px 28px rgba(0,0,0,.22);transform:scale(1.02)}

/* Lyrics highlights */
:root{--hl-yellow:rgba(255,214,0,.45);--hl-green:rgba(60,200,90,.35);--hl-pink:rgba(255,80,160,.32);--hl-blue:rgba(70,150,255,.35)}
@media(prefers-color-scheme:dark){:root{--hl-yellow:rgba(255,214,0,.35);--hl-green:rgba(60,200,90,.32);--hl-pink:rgba(255,80,160,.35);--hl-blue:rgba(70,150,255,.4)}}
.hl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.hl-btn{width:44px;padding:0;display:grid;place-items:center}
.hl-btn .sw{width:22px;height:22px;border-radius:50%;border:1px solid var(--line)}
.hl-tip{font-size:13px;flex-basis:100%}
mark.hl{color:inherit;border-radius:3px;padding:1px 0}
.hl-yellow{background:var(--hl-yellow)}.hl-green{background:var(--hl-green)}.hl-pink{background:var(--hl-pink)}.hl-blue{background:var(--hl-blue)}
.lyrics{-webkit-user-select:text;user-select:text}
mark.hl.mine{box-shadow:inset 0 -2px 0 currentColor}  /* friends' own highlights get an underline so they can tell them from shared ones */

/* Logo press-and-hold video */
header .logo{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;cursor:pointer;transition:transform .6s ease,text-shadow .6s ease}
header .logo.holding{transform:scale(1.08);text-shadow:0 0 14px var(--acc)}
#reel{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center}
#reel[hidden]{display:none}
#reel video{width:100%;height:100%;object-fit:contain;background:#000}
#reelClose{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;background:rgba(30,30,30,.75);color:#fff;border-color:#444;font-size:18px;min-width:44px}
#reelPlay{position:absolute;background:var(--acc);color:var(--accfg);border-color:var(--acc);font-size:20px;padding:14px 26px;font-weight:600}

/* Bright colours: a rainbow up the scale (darker shades in light mode so they stay readable) */
:root{--r1:#e8173f;--r2:#f26a00;--r3:#d99a00;--r4:#1fa64a;--r5:#00a6a6;--r6:#1f6fff;--r7:#8a2be2;--r8:#e0119d}
@media(prefers-color-scheme:dark){:root{--r1:#ff4d6d;--r2:#ff9f1c;--r3:#ffd60a;--r4:#3ddc84;--r5:#2ee6e6;--r6:#5aa9ff;--r7:#b57bff;--r8:#ff4fd8}}
.logo .flow i:nth-child(1){--c:var(--r1)}.logo .flow i:nth-child(2){--c:var(--r3)}.logo .flow i:nth-child(3){--c:var(--r6)}
.logo .flow i:nth-child(4){--c:var(--r4)}.logo .flow i:nth-child(5){--c:var(--r8)}.logo .flow i:nth-child(6){--c:var(--r2)}
.logo .pops b:nth-child(1){--c:var(--r1)}.logo .pops b:nth-child(2){--c:var(--r2)}.logo .pops b:nth-child(3){--c:var(--r3)}.logo .pops b:nth-child(4){--c:var(--r4)}
.logo .pops b:nth-child(5){--c:var(--r5)}.logo .pops b:nth-child(6){--c:var(--r6)}.logo .pops b:nth-child(7){--c:var(--r7)}.logo .pops b:nth-child(8){--c:var(--r8)}
/* In the header, notes travel and the scale climbs across the search box too */
header .logo .flow{top:-10px;bottom:-10px}
.login .logo .flow{top:-14px;bottom:-14px}
header .logo .pops{right:auto;width:min(58vw,460px)}

/* Performance view: lyrics or music */
#perf .seg{display:inline-flex}
#perf .seg button{border-radius:0;margin-left:-1px}#perf .seg button:first-child{border-radius:8px 0 0 8px;margin:0}#perf .seg button:last-child{border-radius:0 8px 8px 0}
#perf .seg button.on{background:var(--acc);color:var(--accfg);border-color:var(--acc);font-weight:600}
#stage.lyr{display:block;align-items:stretch}
.plyrics{white-space:pre-wrap;color:#14161c;line-height:1.55;max-width:900px;margin:0 auto;padding:24px 20px 40vh;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.plyrics mark.hl{padding:2px 0}
#stage > p{color:#444;padding:24px}

/* Song tiles: number badge in the top-right corner */
.card{position:relative}
.card h3{padding-right:38px}
.card .num{position:absolute;top:10px;right:10px;min-width:28px;height:28px;padding:0 6px;border-radius:14px;display:grid;place-items:center;
  background:var(--acc);color:var(--accfg);font:700 14px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums}

/* Login page: dancing effects */
.login{animation:arrive 1.1s cubic-bezier(.25,1.4,.5,1) both}
@keyframes arrive{
  0%{opacity:0;transform:translateY(-40px) scale(.9)}
  35%{opacity:1;transform:translateY(8px) scale(1.03,.97)}
  50%{transform:translateY(-6px) rotate(-3deg)}
  65%{transform:translateY(2px) rotate(2.5deg)}
  80%{transform:translateY(-2px) rotate(-1.5deg)}
  100%{transform:none}}
/* the logo keeps dancing to a beat: bob, sway, bob, rest */
.login .logo{display:inline-block;width:100%;transform-origin:50% 90%;animation:dance 3.2s ease-in-out 1.2s infinite}
@keyframes dance{
  0%,60%,100%{transform:none}
  8%{transform:translateY(-8px) rotate(-6deg) scale(1.05)}
  16%{transform:translateY(0) rotate(0) scale(1.06,.94)}
  24%{transform:translateY(-8px) rotate(6deg) scale(1.05)}
  32%{transform:translateY(0) rotate(0) scale(1.06,.94)}
  40%{transform:translateY(-4px) rotate(-3deg)}
  48%{transform:translateY(0) rotate(2deg)}}
.buzz{animation:buzz .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes buzz{
  0%,100%{transform:none}
  15%{transform:translateY(-5px) rotate(-4deg) scale(1.04)}
  30%{transform:translateY(0) rotate(4deg) scale(.98)}
  45%{transform:translateY(-3px) rotate(-3deg) scale(1.02)}
  60%{transform:translateY(0) rotate(2deg)}
  80%{transform:rotate(-1deg)}}
.shake{animation:shake .8s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%{transform:translateX(-6px) rotate(-1deg)}
  20%{transform:translateX(14px) rotate(1.5deg)}
  30%{transform:translateX(-18px) rotate(-2deg)}
  40%{transform:translateX(18px) rotate(2deg)}
  50%{transform:translateX(-14px) rotate(-1.5deg)}
  60%{transform:translateX(10px) rotate(1deg)}
  70%{transform:translateX(-6px)}
  80%{transform:translateX(3px)}
  90%,100%{transform:none}}
.login .logo.cheer{animation:cheer .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes cheer{
  0%{transform:none}
  20%{transform:translateY(-18px) scale(1.2) rotate(-8deg)}
  40%{transform:translateY(0) scale(1.1,.9) rotate(0)}
  60%{transform:translateY(-12px) scale(1.15) rotate(180deg)}
  80%{transform:translateY(0) scale(1.05) rotate(350deg)}
  100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.login,.login .logo,.buzz,.shake,.login .logo.cheer{animation:none}}

/* "මියැසි රාත්‍රියක්" travelling with the notes: hops, comes forward, glides back, in shifting rainbow colours */
.logo .flow .phrase{position:absolute;top:30%;left:-60%;white-space:nowrap;opacity:0;animation:travel-phrase 16s linear -5s infinite}
.logo .flow .phrase b{display:inline-block;font:700 .5em/1.3 "Sinhala Sangam MN","Noto Sans Sinhala","Iskoola Pota",system-ui,sans-serif;
  background:linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7),var(--r8),var(--r1));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.35));transform-origin:50% 80%;
  animation:hop-phrase 3.2s ease-in-out infinite,rainbow 4s linear infinite}
@keyframes travel-phrase{0%{left:-60%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes hop-phrase{  /* grows big, shrinks small, again and again, with a little hop and sway */
  0%  {transform:translateY(0) scale(.6) rotate(0)}
  12% {transform:translateY(-6px) scale(1.15) rotate(-4deg)}
  25% {transform:translateY(-2px) scale(1.7) rotate(0)}        /* big */
  38% {transform:translateY(-4px) scale(1.1) rotate(4deg)}
  50% {transform:translateY(0) scale(.6) rotate(0)}            /* small */
  62% {transform:translateY(-6px) scale(1.15) rotate(-4deg)}
  75% {transform:translateY(-2px) scale(1.7) rotate(0)}        /* big */
  88% {transform:translateY(-4px) scale(1.1) rotate(4deg)}
  100%{transform:translateY(0) scale(.6) rotate(0)}}           /* small */
@keyframes rainbow{to{background-position:300% 0}}
.login .logo .flow .phrase b{font-size:.6em}


/* Animation lane starts just after the "+" and runs to the right edge of the screen (sized by js/logo.js) */
.logo .flow{left:var(--flow-l,100%);right:auto;width:var(--flow-w,0)}

/* Player dock: MP3 or YouTube keeps playing at the bottom while you read the lyrics or music */
.tabs{flex-wrap:wrap;align-items:center}.tabs .gap{flex:0 0 6px}
.tabs .play.on{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
.tabs button:disabled{opacity:.45;cursor:default}
#dock{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.15);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
#dock[hidden]{display:none}
#dock .dbar{display:flex;align-items:center;gap:8px;max-width:1100px;margin:0 auto}
#dock .dttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#dock .dbar button{min-height:36px;padding:4px 12px}
#dbody{max-width:1100px;margin:6px auto 0}
#dbody audio{width:100%;display:block}
#dbody .yt{width:min(100%,260px)}
#dock.big #dbody .yt{width:min(100%,560px)}