:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#f5f7f6;background-color:#0b140e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#17321f,#0b140e 55%)}a{color:inherit;text-decoration:none}h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:.2rem 0 0}#root{min-height:100vh;margin:0;padding:0;width:100%}.app{display:flex;flex-direction:column;gap:48px;max-width:1200px;margin:0 auto;padding:48px 20px 80px}.app__header{display:flex;flex-direction:column;gap:18px}.brand{display:flex;align-items:center;gap:16px}.brand__icon{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#1db954,#0f8b3a);display:grid;place-items:center;color:#0b140e;font-size:28px;font-weight:700;box-shadow:0 12px 30px #1db9544d}.brand__kicker{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:#9fe8bd}.app__subtitle{max-width:640px;color:#c7d6cb;font-size:1.1rem;line-height:1.6}.app__actions{display:flex;flex-wrap:wrap;gap:12px}.btn{border:none;padding:12px 18px;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 25px #00000040}.btn--spotify{background:#1db954;color:#0b140e}.btn--ghost{background:#ffffff14;color:#f5f7f6;border:1px solid rgba(255,255,255,.12)}.app__note{color:#8ba191;font-size:.9rem}.app__status{margin-top:12px;padding:12px 16px;border-radius:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:#d7e6dc;max-width:360px}.app__error{margin:8px 0 0;color:#ff9c9c;font-size:.85rem}.app__meta{margin:8px 0 0;font-size:.85rem;color:#9bb0a4;word-break:break-all}.app__firebase{margin:10px 0 0}.app__id{margin:6px 0 0;font-size:.78rem;color:#9bb0a4}.app__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.card{padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:#0c1610b3;box-shadow:0 18px 40px #00000040}.card h2{margin-top:0;margin-bottom:8px;font-size:1.1rem}.card p{margin:0;color:#b8c4ba;line-height:1.5}.card .btn{margin-top:14px}.join{margin-top:14px;display:flex;gap:10px;align-items:center}.join__input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#f5f7f6}.join__input::placeholder{color:#8aa095}.status-card{margin-top:12px}.room-result{margin-top:12px;padding:12px;border-radius:12px;background:#1db95414;border:1px solid rgba(29,185,84,.2)}.lobby{margin-top:12px}.lobby__header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.lobby__meta{margin:4px 0;color:#a9b9af}.lobby__players{width:70px;height:70px;border-radius:16px;background:#ffffff14;display:grid;place-items:center;text-align:center;font-weight:700}.lobby__players span{font-size:1.4rem}.lobby__players small{color:#a9b9af}.lobby__list{display:flex;flex-direction:column;gap:10px}.lobby__player{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.lobby__score{color:#9fe8bd;font-weight:600}.playlist{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.playlist h3{margin:0 0 6px}.playlist__actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}.playlist__list{margin-top:16px;display:grid;gap:12px}.playlist__item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.playlist__remove{margin-left:auto;border:none;background:#ff6b6b26;color:#ffb3b3;padding:6px 10px;border-radius:999px;cursor:pointer}.playlist__item img{width:52px;height:52px;border-radius:8px;object-fit:cover}.playlist__name{margin:0;font-weight:600}.playlist__meta{margin:4px 0 0;color:#a9b9af;font-size:.85rem}.playlist__empty{margin:0;color:#8aa095}.player{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.player__status{margin-top:10px;display:flex;flex-direction:column;gap:6px;color:#b8c4ba}.player__actions,.player__play{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}.tracklist{margin-top:16px;display:grid;gap:10px}.tracklist h4{margin:0;font-size:1rem}.tracklist__item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.tracklist__item img{width:44px;height:44px;border-radius:6px;object-fit:cover}.tracklist__title{margin:0;font-weight:600}.tracklist__meta{margin:4px 0 0;color:#a9b9af;font-size:.82rem}.round{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.round__header{display:flex;justify-content:space-between;align-items:center;gap:12px}.round__track{margin-top:12px;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.round__track img{width:54px;height:54px;border-radius:8px;object-fit:cover}.round__title{margin:0;font-weight:600}.round__meta{margin:4px 0 0;color:#a9b9af;font-size:.85rem}.round__timer{margin:12px 0 0;font-weight:600;color:#9fe8bd}.guess{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.guess__actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}.guess__reveal{margin-top:12px;padding:12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.guess__list{margin-top:10px;display:grid;gap:8px}.guess__item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.room{min-height:100vh;padding:28px 24px 32px;display:flex;flex-direction:column;gap:20px}.room__header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.room__actions{display:flex;gap:10px;flex-wrap:wrap}.icon-button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff14;color:#f5f7f6;cursor:pointer;display:grid;place-items:center;font-size:1rem}.room__grid{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(240px,320px);gap:16px;align-items:stretch}.room__sidebar,.room__chat{background:#0c1610b3;border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.08);height:100%;overflow:hidden}.name-editor{margin:12px 0 16px;display:grid;gap:8px;width:100%}.name-editor label{display:block;width:100%}.name-editor__row{display:flex;align-items:center;width:100%;overflow:hidden}.name-editor__pill{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.name-editor__input{flex:1 1 0;border:none;outline:none;background:transparent;color:#f5f7f6;font-size:.95rem;min-width:0;max-width:100%}.name-editor__button{border:none;background:#1db95433;color:#c7f2d8;font-weight:600;padding:6px 10px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:0 0 auto}.name-editor__button:disabled{opacity:.6;cursor:not-allowed}.room__main{display:flex;flex-direction:column;gap:16px;height:100%}.room__display{background:#0c1610b3;border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.08);flex:1}.display__card{margin-top:12px;display:flex;gap:16px;align-items:center;padding:12px;border-radius:16px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.display__card--stacked{flex-direction:column;align-items:center}.display__media{width:min(100%,420px);aspect-ratio:1 / 1;border-radius:18px;overflow:hidden;background:#0a140e99;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;justify-self:center}.display__art{width:100%;height:100%;object-fit:cover}.display__art--blur{filter:blur(36px) saturate(1.2) brightness(.85);transform:scale(1.14)}.visualizer{width:86%;height:45%;border-radius:14px;background:linear-gradient(120deg,#ff6b6b,#feca57,#48dbfb,#5f27cd,#ff9ff3);background-size:300% 300%;position:relative;overflow:hidden}.visualizer:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0px 12px,#0000002e 12px 16px);mix-blend-mode:multiply;animation:visualizerGradient 6s ease-in-out infinite}.visualizer--static:before{animation:none}@keyframes visualizerGradient{0%{background-position:0% 50%;transform:scaleY(.85)}50%{background-position:100% 50%;transform:scaleY(1)}to{background-position:0% 50%;transform:scaleY(.9)}}.display__text{text-align:center}.display__text h3{margin:12px 0 4px;font-size:clamp(1.6rem,3vw,2.4rem)}.display__meta{margin:0;color:#a9b9af;font-size:1rem}.player-mode{margin-top:16px;padding:12px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.player-mode__grid{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.player-mode__button{border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#f5f7f6;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .15s ease,border-color .2s ease}.player-mode__button:hover{transform:translateY(-1px);border-color:#1db95480}.player-mode__button:disabled{opacity:.6;cursor:not-allowed}.room__player{background:#0c1610b3;border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.08)}.chat__list{margin-top:12px;display:flex;flex-direction:column;gap:10px;height:min(60vh,520px);overflow-y:auto}.chat__item{padding:8px 10px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px}.chat__item--correct{border-color:#1db95466;background:#1db95414}.chat__user{font-size:.75rem;color:#9fe8bd;text-transform:uppercase;letter-spacing:.08em}.chat__input{margin-top:12px;display:grid;gap:10px}.room__footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.settings{background:#0c1610b3;border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.08)}.settings--compact{max-width:380px}.settings__header{display:flex;justify-content:space-between;align-items:center;gap:12px}.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}.modal__backdrop{position:absolute;inset:0;background:#060a08b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal__content{position:relative;z-index:1;width:min(92vw,420px);box-shadow:0 28px 60px #00000073}.settings__grid{margin-top:12px;display:grid;grid-template-columns:1fr;gap:12px}.settings label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:#b8c4ba}.settings select,.settings input[type=number]{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#f5f7f6}.settings__toggle{flex-direction:row;align-items:center;gap:8px}.settings__actions{margin-top:12px}@media(max-width:1100px){.room__grid,.room__footer{grid-template-columns:1fr}}