@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap";:root{--color-red:#c8102e;--color-red-deep:#9e0d24;--color-red-dim:#c8102e22;--color-red-faint:#c8102e0d;--color-bg:#1a1612;--color-surface:#211d19;--color-card:#272219;--color-card-alt:#2e2820;--color-border:#3d3530;--color-border-hover:#6b5c50;--color-border-accent:#c8102e55;--color-text:#f5f0e8;--color-text-muted:#a09080;--color-text-faint:#6b5c50;--color-text-ghost:#3d3530;--color-accent:var(--color-red);--color-accent-dim:var(--color-red-dim);--color-accent-faint:var(--color-red-faint);--color-gold:#c9a84c;--color-silver:#9eaab0;--color-bronze:#a0714a;--pts-12:#c9a84c;--pts-10:#c8102e;--pts-8:#c06040;--pts-7:#b07040;--pts-6:#8a7a50;--pts-5:#607080;--pts-4:#507060;--pts-3:#608050;--pts-2:#806040;--pts-1:#805050;--font-display:"Playfair Display", Georgia, serif;--font-base:"Source Sans 3", "Segoe UI", sans-serif;--font-size-xs:11px;--font-size-sm:12px;--font-size-md:13px;--font-size-base:14px;--font-size-lg:16px;--font-size-xl:20px;--font-size-2xl:28px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--radius-sm:3px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-pill:20px;--radius-full:9999px;--transition-fast:all .15s ease;--transition-base:all .2s ease;--transition-slow:all .3s ease;--shadow-card:0 1px 3px #0006;--shadow-red:0 2px 12px #c8102e33}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-base);font-size:var(--font-size-base);min-height:100vh;line-height:1.5}button{font-family:var(--font-base);cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.bg-texture{pointer-events:none;z-index:0;background:linear-gradient(to bottom, var(--color-red) 0%, var(--color-red) 33.3%, #f5f0e810 33.3%, #f5f0e810 66.6%, var(--color-red) 66.6%, var(--color-red) 100%) left / 3px 100% no-repeat;opacity:.18;position:fixed;inset:0}.app{z-index:1;max-width:720px;margin:0 auto;padding:2rem 1rem 3rem;position:relative}.header{text-align:center;border-bottom:1px solid var(--color-border);margin-bottom:2rem;padding-bottom:1.5rem}.header__eyebrow{font-size:var(--font-size-xs);letter-spacing:4px;color:var(--color-red);text-transform:uppercase;margin-bottom:var(--space-2)}.header__title{font-family:var(--font-display);color:var(--color-text);letter-spacing:0;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;line-height:1.1}.header__sub{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-top:var(--space-2)}.header__user{margin-top:var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-muted);padding:2px 10px;display:inline-block}.header__user strong{color:var(--color-text);font-weight:600}.nav{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:1.5rem;justify-content:center;gap:2px;width:fit-content;margin-inline:auto;padding:3px;display:flex}.nav__btn{border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-md);letter-spacing:.5px;transition:var(--transition-base);font-family:var(--font-base);background:0 0;border:none;padding:.45rem 1.4rem}.nav__btn--active{background:var(--color-red);color:var(--color-text);font-weight:600}.init-state{text-align:center;font-size:var(--font-size-base);padding:3rem 1rem}.init-state--loading{color:var(--color-text-muted)}.init-state--error{color:var(--color-red)}.info-bar{background:var(--color-surface);border:1px solid var(--color-border);border-left:3px solid var(--color-red);border-radius:var(--radius-lg);align-items:center;gap:var(--space-3);font-size:var(--font-size-md);color:var(--color-text-muted);flex-wrap:wrap;margin-bottom:1rem;padding:.6rem 1rem;display:flex}.info-bar__count{color:var(--color-text);font-weight:600}.info-bar__pts{color:var(--color-text-faint);font-size:var(--font-size-xs);letter-spacing:1px}.section-label{font-size:var(--font-size-xs);letter-spacing:3px;color:var(--color-text-faint);text-transform:uppercase;margin-bottom:var(--space-2)}.drop-zone{border:1px dashed var(--color-border);border-radius:var(--radius-lg);min-height:52px;padding:var(--space-1);transition:var(--transition-base);margin-bottom:1.25rem}.drop-zone--over{border-color:var(--color-red);background:var(--color-red-faint)}.drop-zone__empty{text-align:center;color:var(--color-text-ghost);font-size:var(--font-size-md);padding:var(--space-4)}.act-row{align-items:center;gap:var(--space-3);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-1);transition:var(--transition-fast);box-shadow:var(--shadow-card);padding:.6rem .85rem;animation:.25s both fadeIn;display:flex}@media (width<=800px){.act-row{margin-right:50px}}.act-row:hover{border-color:var(--color-border-hover)}.act-row--ranked{border-left:3px solid var(--color-border-accent);cursor:grab;touch-action:none}.act-row--ranked:active{cursor:grabbing}.act-row--pool{cursor:pointer;touch-action:none}.act-row--pool:hover{border-color:var(--color-border-hover);background:var(--color-card-alt)}.act-row--over{border-color:var(--color-red);background:var(--color-red-faint)}.act-row__handle{color:var(--color-text-ghost);font-size:var(--font-size-base);cursor:grab;letter-spacing:-1px;flex-shrink:0;padding:0 1px}.act-row__rank{border-radius:var(--radius-sm);width:26px;height:26px;font-family:var(--font-display);font-size:var(--font-size-sm);border:1px solid;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.act-row__flag{flex-shrink:0;font-size:18px;line-height:1}.act-row__info{flex:1;min-width:0}.act-row__artist{font-weight:600;font-size:var(--font-size-md);white-space:nowrap;text-overflow:ellipsis;color:var(--color-text);overflow:hidden}.act-row__song{font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-style:italic;overflow:hidden}.act-row__pts{font-family:var(--font-display);text-align:right;flex-shrink:0;min-width:34px;font-size:16px;font-weight:700}.act-row__add-hint{color:var(--color-text-ghost);font-size:var(--font-size-sm);flex-shrink:0}.act-row__move-btns{flex-direction:column;flex-shrink:0;gap:2px;display:flex}.icon-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);width:20px;height:15px;color:var(--color-text-faint);transition:var(--transition-fast);background:0 0;justify-content:center;align-items:center;padding:0;font-size:9px;display:flex}.icon-btn:hover:not(:disabled){border-color:var(--color-red);color:var(--color-red);background:var(--color-red-faint)}.icon-btn--remove{border-radius:var(--radius-full);width:22px;height:22px;font-size:var(--font-size-xs)}.submit-wrap{text-align:center;border-top:1px solid var(--color-border);margin-top:1.5rem;padding-top:1.5rem}.submit-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);color:var(--color-text-muted);font-weight:600;font-size:var(--font-size-base);letter-spacing:1px;transition:var(--transition-slow);font-family:var(--font-base);background:0 0;padding:.75rem 2.5rem}.submit-btn--ready{border-color:var(--color-red);background:var(--color-red);color:#fff;box-shadow:var(--shadow-red)}.submit-btn--ready:hover{background:var(--color-red-deep);border-color:var(--color-red-deep)}.submit-btn--reset{border-color:var(--color-border);color:var(--color-text-muted);background:0 0;margin-top:1rem}.submit-btn--reset:hover{border-color:var(--color-border-hover);color:var(--color-text)}.success{text-align:center;padding:1rem 0;animation:.4s fadeIn}.success__icon{margin-bottom:var(--space-3);font-size:32px;animation:2s infinite pop}.success__title{font-family:var(--font-display);color:var(--color-text);font-size:var(--font-size-xl);margin-bottom:var(--space-2);font-weight:700}.success__sub{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:1.5rem}.success__list{text-align:left;flex-direction:column;gap:4px;display:flex}.success__item{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-sm);justify-content:space-between;align-items:center;padding:.5rem .85rem;display:flex}.success__pts{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-base)}.success__pts--none{color:var(--color-text-ghost)}.lb__header{justify-content:flex-end;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.lb__countdown{font-size:var(--font-size-sm);color:var(--color-text-ghost);font-variant-numeric:tabular-nums;text-align:right;min-width:2.5ch}.lb__refresh{border-radius:var(--radius-sm);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--font-size-sm);font-family:var(--font-base);transition:var(--transition-base);background:0 0;padding:.4rem 1rem}.lb__refresh:hover{border-color:var(--color-border-hover);color:var(--color-text)}.lb__empty{text-align:center;color:var(--color-text-muted);padding:3rem}.lb__list{flex-direction:column;gap:5px;display:flex}.lb__row{align-items:center;gap:var(--space-3);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:.7rem 1rem;animation:.3s both fadeIn;display:flex}.lb__rank{border-radius:var(--radius-sm);width:26px;height:26px;font-family:var(--font-display);font-weight:700;font-size:var(--font-size-md);border:1px solid var(--color-border);color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}.lb__flag{flex-shrink:0;font-size:18px;line-height:1}.lb__info{flex:1;min-width:0}.lb__artist{font-weight:600;font-size:var(--font-size-md);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lb__song{font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-style:italic;overflow:hidden}.lb__bar-bg{background:var(--color-surface);border-radius:var(--radius-sm);height:3px;margin-top:5px;overflow:hidden}.lb__bar{border-radius:var(--radius-sm);background:var(--color-red);height:100%;transition:width .8s}.lb__score{font-family:var(--font-display);text-align:right;min-width:42px;color:var(--color-text);flex-shrink:0;font-size:18px;font-weight:700}.lb__score-label{font-family:var(--font-base);color:var(--color-text-muted);font-size:10px;font-weight:400;display:block}