/* ============================================================ SONGFUL — dark, near-black stage with one vivid accent. The accent colour is a variable: it turns green / orange / red with the difficulty, and the whole page follows it. ============================================================ */ :root{ --bg:#0A0D0B; --bg-deep:#050705; --surface:#141815; --surface-2:#1B211D; --surface-3:#242C27; --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14); --text:#ECF3EE; --muted:#8B968F; --muted-dim:#5D665F; /* difficulty palette */ --easy:#3BE477; --medium:#FF9F2E; --hard:#FF4D4D; --win:#3BE477; --lose:#FF3B3B; /* live accent — overwritten per difficulty on */ --accent:#3BE477; --accent-ink:#052A12; --accent-soft:rgba(59,228,119,.14); --accent-line:rgba(59,228,119,.36); --accent-glow:rgba(59,228,119,.42); --page-w:640px; --r-pill:999px; --r-lg:20px; --r-md:14px; --font:'Poppins','Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; } body[data-diff="easy"]{ --accent:var(--easy); --accent-ink:#052A12; --accent-soft:rgba(59,228,119,.14); --accent-line:rgba(59,228,119,.36); --accent-glow:rgba(59,228,119,.42); } body[data-diff="medium"]{ --accent:var(--medium); --accent-ink:#2A1500; --accent-soft:rgba(255,159,46,.14); --accent-line:rgba(255,159,46,.38); --accent-glow:rgba(255,159,46,.42); } body[data-diff="hard"]{ --accent:var(--hard); --accent-ink:#2C0505; --accent-soft:rgba(255,77,77,.14); --accent-line:rgba(255,77,77,.38); --accent-glow:rgba(255,77,77,.42); } *{box-sizing:border-box;margin:0;padding:0} html{color-scheme:dark} body{ min-height:100dvh; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased; display:flex;flex-direction:column;align-items:center; overflow-x:hidden; } /* ambient glow behind everything — tinted by the live accent */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background:var(--bg-deep); background: radial-gradient(70% 46% at 50% -6%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%), radial-gradient(60% 42% at 50% 108%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%), var(--bg-deep); transition:background .5s ease, opacity .5s ease; } button,input,select{font-family:inherit;color:inherit} button{cursor:pointer;background:none;border:none} button:disabled{cursor:default} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} ::selection{background:var(--accent);color:var(--accent-ink)} /* ============================================================ TOP BAR ============================================================ */ body.wide{--page-w:1040px} /* Full-bleed sticky bar. The inner row is centred with padding maths instead of a wrapper div, so the markup stays flat. */ .topbar{ width:100%; display:flex;align-items:center;gap:14px; padding:13px max(22px, calc((100% - 1080px) / 2)); border-bottom:1px solid var(--line); background:rgba(10,13,11,.74); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); position:sticky;top:0;z-index:40; margin-bottom:8px; } .wordmark{ display:inline-flex;align-items:center; font-weight:800;font-size:19px;letter-spacing:.01em; text-decoration:none;color:var(--text);white-space:nowrap; } .wordmark .dot{ width:10px;height:10px;border-radius:50%;flex:none; margin-right:9px;background:var(--accent); box-shadow:0 0 14px var(--accent-glow); transition:background .4s ease,box-shadow .4s ease; } /* one text run, no flex gap in the middle of the word */ .wordmark .name{letter-spacing:-.01em} .wordmark .name em{font-style:normal;color:var(--accent);transition:color .4s ease} .nav{display:flex;gap:4px;margin-left:8px} .nav a{ text-decoration:none;color:var(--muted);font-size:14px;font-weight:500; padding:7px 14px;border-radius:var(--r-pill); transition:color .16s ease,background .16s ease; } .nav a:hover{color:var(--text);background:var(--surface)} .nav a.on{color:var(--accent);background:var(--accent-soft);font-weight:600} .topright{margin-left:auto;display:flex;align-items:center;gap:9px} .chip{ display:inline-flex;align-items:center;gap:7px; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-pill);padding:6px 14px; font-size:13px;color:var(--muted);white-space:nowrap; } .chip b{color:var(--text);font-weight:600} .chip.pending{opacity:0;pointer-events:none} .chip.accent{color:var(--accent);border-color:var(--accent-line)} .avatar{ width:24px;height:24px;border-radius:50%;flex:none; display:grid;place-items:center;font-size:11px;font-weight:700; background:var(--accent);color:var(--accent-ink); } /* ============================================================ LAYOUT ============================================================ */ .wrap{width:100%;max-width:var(--page-w);padding:2px 22px 64px} .screen{display:none} .screen.active{display:block;animation:fadeUp .4s cubic-bezier(.2,.7,.3,1) both} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .pagehead{margin:22px 2px 26px} .pagehead h1{font-size:clamp(26px,4.4vw,36px);font-weight:800;letter-spacing:-.025em} .pagehead p{color:var(--muted);font-size:14.5px;margin-top:6px} /* ============================================================ START SCREEN ============================================================ */ .hero{text-align:center;margin:30px 0 38px} .hero h1{ font-size:clamp(27px,5.2vw,40px);font-weight:800; line-height:1.14;letter-spacing:-.03em; } .hero h1 span{color:var(--accent);transition:color .4s ease} .hero p{color:var(--muted);margin:14px auto 0;max-width:420px;font-size:15px} .eq{display:flex;gap:5px;justify-content:center;align-items:flex-end;height:54px;margin-bottom:26px} .eq i{ width:7px;border-radius:99px;background:var(--accent); animation:eqbounce 1.05s ease-in-out infinite alternate; transform-origin:bottom;opacity:.9; transition:background .4s ease; } .eq i:nth-child(1){height:34%;animation-delay:-.90s} .eq i:nth-child(2){height:58%;animation-delay:-.70s} .eq i:nth-child(3){height:82%;animation-delay:-.20s} .eq i:nth-child(4){height:46%;animation-delay:-1.0s} .eq i:nth-child(5){height:100%;animation-delay:-.50s} .eq i:nth-child(6){height:62%;animation-delay:-.30s} .eq i:nth-child(7){height:88%;animation-delay:-.80s} .eq i:nth-child(8){height:44%;animation-delay:-.15s} .eq i:nth-child(9){height:70%;animation-delay:-.60s} .eq i:nth-child(10){height:36%;animation-delay:-.42s} .eq i:nth-child(11){height:54%;animation-delay:-1.05s} @keyframes eqbounce{from{transform:scaleY(.28)}to{transform:scaleY(1)}} .secthead{ display:flex;align-items:center;gap:11px; font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-dim);margin:26px 2px 14px; } .secthead::after{content:"";flex:1;height:1px;background:var(--line)} .diff-grid{display:grid;gap:11px} .diff-card{ --c:var(--easy); position:relative;text-align:left;width:100%;overflow:hidden; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:19px 20px 19px 24px; display:flex;align-items:center;gap:16px; transition:transform .18s cubic-bezier(.2,.8,.3,1),border-color .18s ease,box-shadow .18s ease; } .diff-card[data-diff="easy"]{--c:var(--easy)} .diff-card[data-diff="medium"]{--c:var(--medium)} .diff-card[data-diff="hard"]{--c:var(--hard)} .diff-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c); } .diff-card:hover{ transform:translateY(-2px); border-color:var(--line-strong); border-color:color-mix(in srgb, var(--c) 45%, transparent); box-shadow:0 18px 44px -26px var(--c); } .diff-dot{ width:10px;height:10px;border-radius:50%;flex:none; background:var(--c);box-shadow:0 0 14px var(--c); } .diff-body{flex:1;min-width:0} .diff-card .dt{display:block;font-size:16px;font-weight:700;color:var(--c)} .diff-card .dp{display:block;color:var(--muted);font-size:13.5px;margin-top:2px} .diff-card .count{ font-size:11.5px;font-weight:600;color:var(--muted);flex:none; font-variant-numeric:tabular-nums; background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap; } .diff-card .count:empty{display:none} .statstrip{ margin-top:28px;display:flex;gap:9px;flex-wrap:wrap;justify-content:center; font-size:12.5px;color:var(--muted); } .statstrip span{ border:1px solid var(--line);border-radius:var(--r-pill); padding:6px 14px;background:var(--surface); } .statstrip b{color:var(--accent);font-weight:700} .footnote{color:var(--muted-dim);font-size:12.5px;text-align:center;margin-top:22px;line-height:1.6} .footnote code{ font-family:var(--mono);font-size:11.5px;background:var(--surface-2); padding:2px 7px;border-radius:6px;color:var(--muted); } .footnote.error{ color:#FF9A9A;font-size:14px;line-height:1.65; background:rgba(255,59,59,.07);border:1px solid rgba(255,59,59,.28); border-radius:var(--r-lg);padding:16px 20px;margin-top:26px;text-align:left; } .footnote.error b{color:#FFC9C9} .footnote.error code{background:rgba(0,0,0,.45);color:#FFC9C9} /* ============================================================ GAME — difficulty switcher pills ============================================================ */ .diffbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0 20px} .dpill{ --c:var(--easy); border-radius:var(--r-pill);padding:9px 22px; font-size:14.5px;font-weight:600; color:var(--c); background:var(--surface); border:1px solid var(--line); background:color-mix(in srgb, var(--c) 10%, var(--surface)); border-color:color-mix(in srgb, var(--c) 22%, transparent); transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease; } .dpill[data-diff="easy"]{--c:var(--easy)} .dpill[data-diff="medium"]{--c:var(--medium)} .dpill[data-diff="hard"]{--c:var(--hard)} .dpill:hover{transform:translateY(-1px)} .dpill.on{ background:var(--c);color:#08110B;font-weight:700; border-color:var(--c); box-shadow:0 0 26px -6px var(--c); } .dpill[data-diff="medium"].on,.dpill[data-diff="hard"].on{color:#1A0A02} /* ============================================================ UNLOCK STRIP ============================================================ */ .strip{display:flex;gap:3px;height:26px;margin:0 0 30px; border-radius:var(--r-pill);overflow:hidden;background:var(--surface)} .seg{ position:relative;overflow:hidden; background:var(--surface-2); transition:background .25s ease; } .seg:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)} .seg:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0} .seg .fill{ position:absolute;inset:0;width:0%; background:var(--accent); transition:width .06s linear, background .4s ease; } .seg.unlocked .fill{width:100%} .seg .lab{ position:absolute;inset:0;z-index:2; display:flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:600;color:transparent; transition:color .2s ease; } .seg.current{box-shadow:inset 0 0 0 1px var(--accent-line)} .strip:hover .seg .lab{color:var(--muted)} .strip:hover .seg.unlocked .lab{color:var(--accent-ink)} /* ============================================================ PLAYER ============================================================ */ .player{ display:flex;align-items:center;justify-content:center;gap:20px; margin:0 0 30px;position:relative; } .playbtn{ width:150px;height:150px;border-radius:50%;flex:none; background:var(--accent); display:grid;place-items:center; box-shadow:0 0 0 0 var(--accent-glow), 0 22px 60px -26px var(--accent); transition:transform .18s cubic-bezier(.2,.9,.3,1.2),background .4s ease,box-shadow .3s ease; } .playbtn:hover:not(:disabled){transform:scale(1.045)} .playbtn:active:not(:disabled){transform:scale(.97)} .playbtn:disabled{opacity:.28} .playbtn svg{width:56px;height:56px;fill:var(--accent-ink);transition:fill .4s ease} .playbtn.playing{animation:pulseRing 1.6s ease-out infinite} @keyframes pulseRing{ 0%{box-shadow:0 0 0 0 var(--accent-glow), 0 22px 60px -26px var(--accent)} 70%{box-shadow:0 0 0 26px transparent, 0 22px 60px -26px var(--accent)} 100%{box-shadow:0 0 0 0 transparent, 0 22px 60px -26px var(--accent)} } .stagetime{ position:absolute;right:0; font-size:19px;font-weight:800;color:var(--accent); font-variant-numeric:tabular-nums;letter-spacing:-.01em; transition:color .4s ease; } .stagetime.bump{animation:bump .42s cubic-bezier(.2,.9,.3,1.4)} @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}} .play-hint{text-align:center;font-size:13px;color:var(--muted-dim);margin:-18px 0 26px} .play-hint b{color:var(--accent);font-weight:700} /* ============================================================ GUESS ROW ============================================================ */ .guessrow{display:flex;gap:10px;align-items:stretch} .guessbox{position:relative;flex:1;min-width:0} .guessbox .mag{ position:absolute;left:16px;top:50%;transform:translateY(-50%); width:16px;height:16px;fill:none;stroke:var(--muted-dim);stroke-width:2; pointer-events:none;transition:stroke .2s ease; } .guessbox input{ width:100%;height:48px; background:var(--surface);border:1.5px solid var(--line); border-radius:var(--r-pill); padding:0 18px 0 42px;font-size:15px;color:var(--text); transition:border-color .18s ease,background .18s ease; } .guessbox input::placeholder{color:var(--muted-dim)} .guessbox input:focus{outline:none;border-color:var(--accent);background:var(--surface-2)} .guessbox input:focus~.mag{stroke:var(--accent)} .suggest{ position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:30; background:var(--surface-2);border:1px solid var(--line-strong); border-radius:var(--r-md);display:none; box-shadow:0 24px 60px -18px rgba(0,0,0,.95); /* max-height is set from JS to whatever room is on screen */ overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain; /* wheel stops here, no page scroll */ scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent; } /* flips below the input when there is more room down there */ .suggest.below{bottom:auto;top:calc(100% + 8px)} .suggest.open{display:block;animation:fadeUp .16s ease both} .suggest::-webkit-scrollbar{width:10px} .suggest::-webkit-scrollbar-track{background:transparent} .suggest::-webkit-scrollbar-thumb{ background:var(--surface-3);border-radius:99px; border:3px solid var(--surface-2); } .suggest::-webkit-scrollbar-thumb:hover{background:var(--muted-dim)} .suggest button{ display:block;width:100%;text-align:left;padding:9px 16px; border-bottom:1px solid var(--line); transition:background .12s ease; } .suggest button strong,.suggest button .artist{ display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .suggest button:last-child{border-bottom:none} .suggest button strong{font-size:14.5px;font-weight:600} .suggest button .artist{font-size:12.5px;color:var(--muted)} .suggest button.sel,.suggest button:hover{background:var(--accent-soft)} .btn{ border-radius:var(--r-pill);border:1px solid var(--line); background:var(--surface); padding:0 24px;height:48px; display:inline-flex;align-items:center;justify-content:center;gap:8px; font-size:14.5px;font-weight:600;white-space:nowrap; transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease; } .btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-strong)} .btn:active:not(:disabled){transform:translateY(1px)} .btn:disabled{opacity:.4} .btn svg{width:16px;height:16px;fill:currentColor} .btn.primary{ background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700; } .btn.primary:hover:not(:disabled){filter:brightness(1.08);background:var(--accent)} .btn.ghost{color:var(--muted)} .btn.danger{color:var(--lose);border-color:rgba(255,59,59,.3)} .btn.danger:hover:not(:disabled){background:rgba(255,59,59,.1)} .btn.grow{flex:1} .btn.sm{height:38px;padding:0 16px;font-size:13px} /* ============================================================ HISTORY ============================================================ */ .history{margin-top:20px;display:grid;gap:7px} .hrow{ display:flex;align-items:center;gap:11px; border:1px solid var(--line);border-radius:var(--r-pill); background:var(--surface);padding:9px 18px;font-size:14px; animation:fadeUp .22s ease both; } .hrow .n{font-size:11px;color:var(--muted-dim);width:14px;flex:none;font-variant-numeric:tabular-nums} .hrow .mark{flex:none;font-weight:800;font-size:13px} .hrow.skip{color:var(--muted-dim)} .hrow.skip .mark{color:var(--muted-dim)} .hrow.wrong{border-color:rgba(255,77,77,.26);color:var(--muted)} .hrow.wrong .mark{color:var(--hard)} /* ============================================================ REVEAL (win = accent-green stamp + confetti · loss = red room) ============================================================ */ .reveal{display:none;position:relative;text-align:center;padding:2px 0 4px} /* While the answer is showing, the playing furniture is gone — the reveal is the whole screen, so the buttons never fall below the fold. */ #screenGame.revealing .strip, #screenGame.revealing .player, #screenGame.revealing .play-hint, #screenGame.revealing .loading{display:none} #screenGame.revealing .diffbar{margin-bottom:6px} .reveal.show{display:block} .confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden} .confetti i{ position:absolute;top:-24px; width:7px;height:11px;border-radius:1.5px; animation:confFall linear forwards; will-change:transform,opacity; } @keyframes confFall{ 0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:1} 85%{opacity:1} 100%{transform:translate3d(var(--dx,0px),105vh,0) rotate(var(--spin,540deg));opacity:0} } /* full-screen red wash on a loss, like the losing card */ .lossroom{ position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0; background: radial-gradient(58% 40% at 50% 50%, transparent 0%, rgba(0,0,0,.55) 62%), radial-gradient(130% 90% at 50% 50%, rgba(255,40,40,.02) 12%, rgba(180,20,20,.30) 58%, rgba(120,10,10,.55) 100%), #0A0505; transition:opacity .55s ease; } body.lost .lossroom{opacity:1} body.lost::before{opacity:0} .rv-art{ width:172px;height:172px;margin:4px auto 0;border-radius:18px;overflow:hidden; background:var(--surface-2);position:relative; box-shadow:0 0 64px 2px var(--rv-glow,var(--win)), 0 0 20px -2px var(--rv-glow,var(--win)); animation:artIn .62s cubic-bezier(.2,.9,.3,1.25) both; } .rv-art img{width:100%;height:100%;object-fit:cover;display:block} @keyframes artIn{ from{opacity:0;transform:scale(.72);box-shadow:0 0 0 0 transparent} to{opacity:1;transform:scale(1)} } .rv-eyebrow{ margin-top:16px;font-size:11.5px;font-weight:700;letter-spacing:.28em; text-transform:uppercase;color:var(--lose); animation:slideUp .5s cubic-bezier(.2,.8,.3,1) .12s both; } .rv-title{ margin-top:10px;font-size:clamp(24px,4.6vw,30px);font-weight:800; letter-spacing:-.03em;line-height:1.14; animation:slideUp .5s cubic-bezier(.2,.8,.3,1) .18s both; } .rv-sub{ margin-top:5px;font-size:14.5px;color:var(--muted); animation:slideUp .5s cubic-bezier(.2,.8,.3,1) .26s both; } @keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* the stamp — "GUESSED IN 0.5S!" / "LOST!" */ .rv-stamp{ display:inline-block;margin-top:16px; padding:8px 18px 7px;border-radius:12px; border:3px solid var(--stamp,var(--win)); color:var(--stamp,var(--win)); font-size:17px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; text-shadow:0 0 18px var(--stamp,var(--win)); box-shadow:0 0 26px -6px var(--stamp,var(--win)), inset 0 0 22px -14px var(--stamp,var(--win)); animation:stampIn .55s cubic-bezier(.2,.85,.25,1.3) .44s both; } .rv-stamp.lose{--stamp:var(--lose)} @keyframes stampIn{ 0%{opacity:0;transform:scale(2.1) rotate(-16deg)} 60%{opacity:1;transform:scale(.94) rotate(-2deg)} 100%{opacity:1;transform:scale(1) rotate(-4deg)} } .rv-meta{ margin:18px auto 0;max-width:400px; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); animation:slideUp .5s ease .55s both; } .rv-meta .row{ display:flex;justify-content:space-between;gap:16px; padding:9px 16px;font-size:13px;border-top:1px solid var(--line); } .rv-meta .row:first-child{border-top:none} .rv-meta .k{color:var(--muted)} .rv-meta .v{font-weight:600;text-align:right} .rv-actions{ display:flex;gap:10px;margin:16px auto 0;max-width:400px; animation:slideUp .5s ease .62s both; } /* ============================================================ LEADERBOARD ============================================================ */ .tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px} .tab{ --c:var(--accent); border-radius:var(--r-pill);padding:8px 20px;font-size:14px;font-weight:600; color:var(--muted);background:var(--surface);border:1px solid var(--line); transition:all .18s ease; } .tab[data-diff="easy"]{--c:var(--easy)} .tab[data-diff="medium"]{--c:var(--medium)} .tab[data-diff="hard"]{--c:var(--hard)} .tab[data-diff="overall"]{--c:#7FD8FF} .tab:hover{color:var(--text)} .tab.on{background:var(--c);border-color:var(--c);color:#08110B;font-weight:700} .board{ border:1px solid var(--line);border-radius:var(--r-lg); background:var(--surface);overflow:hidden; } .board table{width:100%;border-collapse:collapse} .board th{ text-align:right;font-size:10.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-dim); padding:14px 14px;border-bottom:1px solid var(--line);white-space:nowrap; } .board th:first-child,.board th:nth-child(2){text-align:left} .board td{ padding:13px 14px;font-size:14px;text-align:right; border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums; } .board tr:last-child td{border-bottom:none} .board td:first-child,.board td:nth-child(2){text-align:left} .board tbody tr{transition:background .15s ease} .board tbody tr:hover{background:var(--surface-2)} .board tbody tr.you{background:var(--accent-soft)} .board tbody tr.you td:nth-child(2){font-weight:700;color:var(--accent)} .rank{width:46px;font-weight:800;color:var(--muted-dim);font-size:15px} .rank.g1{color:#FFD35C}.rank.g2{color:#CFD8DC}.rank.g3{color:#D89A5B} .lbplayer{display:flex;align-items:center;gap:10px;min-width:0} .lbplayer .avatar{background:var(--surface-3);color:var(--text)} .board tr.you .lbplayer .avatar{background:var(--accent);color:var(--accent-ink)} .streakcell{font-weight:800;font-size:16px;color:var(--accent)} .bar{ display:block;position:relative;height:5px;border-radius:99px;background:var(--surface-3); width:74px;margin-left:auto;overflow:hidden;margin-top:5px; } .bar i{display:block;position:absolute;inset:0;width:0;background:var(--accent);border-radius:99px} .empty{padding:44px 24px;text-align:center;color:var(--muted);font-size:14px;line-height:1.7} .empty b{color:#FFC9C9;font-size:15px} .empty code{ font-family:var(--mono);font-size:12.5px;background:rgba(0,0,0,.45); padding:2px 7px;border-radius:6px;color:var(--text); } .mycards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-bottom:26px} .mycard{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); padding:16px 18px; } .mycard .k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim)} .mycard .v{font-size:27px;font-weight:800;margin-top:5px;letter-spacing:-.03em;color:var(--accent)} .mycard .s{font-size:12px;color:var(--muted);margin-top:1px} /* ============================================================ ADMIN ============================================================ */ .panel{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); padding:22px;margin-bottom:18px; } .panel h2{font-size:16px;font-weight:700;margin-bottom:4px} .panel .sub{color:var(--muted);font-size:13.5px;margin-bottom:18px} .field{margin-bottom:13px} .field label{ display:block;font-size:11px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--muted-dim);margin-bottom:6px; } .field input[type=text],.field input[type=password]{ width:100%;height:44px;background:var(--bg);border:1.5px solid var(--line); border-radius:var(--r-md);padding:0 15px;font-size:15px;color:var(--text); transition:border-color .18s ease; } .field input:focus{outline:none;border-color:var(--accent)} .field .hint{font-size:12px;color:var(--muted-dim);margin-top:6px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px} @media (max-width:560px){.row2{grid-template-columns:1fr}} .check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);cursor:pointer} .check input{width:17px;height:17px;accent-color:var(--accent)} .userlist{display:grid;gap:10px} .userrow{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg); padding:14px 18px; } .userrow .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .userrow .who{flex:1;min-width:0} .userrow .who b{font-size:15px;display:block} .userrow .who small{color:var(--muted-dim);font-size:12.5px} .badge{ font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:4px 10px;border-radius:var(--r-pill); background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line); } .badge.you{background:var(--surface-3);color:var(--muted);border-color:var(--line)} .userrow .edit{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .userrow.open .edit{display:block;animation:fadeUp .2s ease both} .userrow .facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--muted-dim)} .userrow .facts b{color:var(--muted);font-weight:600} /* ============================================================ LOGIN ============================================================ */ .loginwrap{ min-height:100dvh;width:100%; display:grid;place-items:center;padding:24px; } .loginbox{ width:100%;max-width:380px;text-align:center; animation:fadeUp .5s cubic-bezier(.2,.8,.3,1) both; } .loginbox .mark{ display:inline-flex;align-items:center; font-size:30px;font-weight:800;letter-spacing:.01em;margin-bottom:8px; } .loginbox .mark .dot{ width:14px;height:14px;border-radius:50%;flex:none;margin-right:12px; background:var(--accent);box-shadow:0 0 22px var(--accent-glow); animation:beat 1.9s ease-in-out infinite; } .loginbox .mark .name{letter-spacing:-.02em} @keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}} .loginbox .mark .name em{font-style:normal;color:var(--accent)} .loginbox .tag{color:var(--muted);font-size:14px;margin-bottom:30px} .loginbox form{text-align:left} .loginbox .btn{width:100%;height:50px;margin-top:6px;font-size:15px} .loginerr{ display:none;margin-top:14px;padding:11px 16px;border-radius:var(--r-md); background:rgba(255,59,59,.1);border:1px solid rgba(255,59,59,.3); color:#FF8A8A;font-size:13.5px; } .loginerr.show{display:block;animation:shake .4s ease} @keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}40%{transform:translateX(6px)} 60%{transform:translateX(-4px)}80%{transform:translateX(3px)} } .loginfoot{margin-top:26px;font-size:12px;color:var(--muted-dim);line-height:1.6} /* ============================================================ MISC ============================================================ */ .loading{ display:none;align-items:center;justify-content:center;gap:10px; color:var(--muted);font-size:13.5px;margin:16px 0; } .loading.show{display:flex} .spinner{ width:14px;height:14px;border-radius:50%;flex:none; border:2px solid var(--line-strong);border-top-color:var(--accent); animation:spin .75s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .notice{ display:none;margin-top:16px;padding:14px 18px;border-radius:var(--r-md); background:rgba(255,77,77,.08);border:1px solid rgba(255,77,77,.3);font-size:13.5px; } .notice.show{display:block} .notice code{ font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.4); padding:2px 6px;border-radius:5px; } .toast{ position:fixed;bottom:26px;left:50%;transform:translate(-50%,18px); background:var(--surface-2);border:1px solid var(--line-strong); border-radius:var(--r-pill);padding:11px 22px;font-size:13.5px; box-shadow:0 20px 50px -16px rgba(0,0,0,.95); opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease; max-width:min(460px,calc(100vw - 40px));text-align:center;z-index:80; } .toast.show{opacity:1;transform:translate(-50%,0)} .subrow{ display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap;margin-top:34px; } .vol{display:flex;align-items:center;gap:9px;color:var(--muted-dim);font-size:12px} .vol b{color:var(--muted);font-weight:600;min-width:34px;text-align:right;font-variant-numeric:tabular-nums} .vol input[type=range]{ accent-color:var(--accent);width:110px;height:4px; } .linkish{color:var(--muted);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line)} .linkish:hover{color:var(--text)} @media (max-width:640px){ .topbar{flex-wrap:wrap;gap:10px;padding:12px 18px} .nav{margin-left:0;order:3;width:100%} .topright{margin-left:auto} .wrap{padding:4px 18px 80px} .playbtn{width:126px;height:126px} .playbtn svg{width:46px;height:46px} .stagetime{position:static} .player{gap:14px} .board th,.board td{padding:11px 9px;font-size:13px} .board .hide-sm{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } .confetti{display:none} }