:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:28px 18px; background:#071c13 radial-gradient(circle at 18% 8%,#1c9d57 0,transparent 33%),radial-gradient(circle at 93% 94%,#086b42 0,transparent 38%); color:#f8fffa; }
.card { width:min(690px,100%); padding:42px; border:1px solid #ffffff1c; border-radius:28px; background:linear-gradient(145deg,#173326e8,#0d2118ee); box-shadow:0 28px 70px #0008; backdrop-filter:blur(16px); }
.welcome-top,.game-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }.brand { display:flex; align-items:center; gap:9px; color:#8fe6ad; font-size:.72rem; letter-spacing:.14em; font-weight:800; }
.brand-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#1ed760; color:#072516; font-size:1.15rem; }
h1 { margin:20px 0 12px; font-size:clamp(2rem,5vw,3.25rem); line-height:1.03; letter-spacing:-.055em; } h1 em { color:#40e878; font-style:normal; }
.intro { max-width:490px; margin:0; color:#b5c9ba; line-height:1.6; }.hint { color:#9ab3a2; font-size:.86rem; line-height:1.5; }
#loginSection { margin-top:28px; }.spotify-button { background:#1ed760; color:#092516; padding:15px 22px; }.spotify-button span { font-size:1.2em; margin-right:6px; }
.account-panel { position:relative; margin-top:25px; padding:24px; border:1px solid #57e48244; border-radius:20px; background:#0a2115; animation:appear .25s ease-out; }.account-panel h2 { margin:5px 0 8px; font-size:1.5rem; letter-spacing:-.035em; }.account-kicker { margin:0; color:#72e89a; font-size:.72rem; font-weight:850; letter-spacing:.1em; }.account-copy { margin:0 0 18px; color:#afc1b3; font-size:.9rem; }.account-panel label { display:block; margin:13px 0 7px; color:#b7c9bc; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }.account-panel input { width:100%; }.account-actions { display:flex; gap:10px; margin-top:14px; }.close-account { position:absolute; top:13px; right:13px; display:grid; place-items:center; width:32px; height:32px; padding:0; background:#ffffff10; color:#d7e9da; font-size:1.35rem; }
.game-screen { animation:appear .35s ease-out; }.game-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid #ffffff14; }.artist-form { margin:24px 0 9px; padding:25px; border:1px solid #ffffff12; border-radius:18px; background:#06140d80; }.artist-form h2 { margin:0; font-size:1.65rem; letter-spacing:-.04em; }.artist-form p { margin:7px 0 23px; color:#a7bbae; }.artist-form label { display:block; margin:0 0 9px; color:#b7c9bc; font-size:.79rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.input-row { display:flex; gap:10px; } input { flex:1; min-width:0; padding:15px 16px; border:1px solid #ffffff1d; border-radius:12px; background:#10271a; color:#fff; font:inherit; outline:none; transition:border-color .2s,box-shadow .2s; } input:focus { border-color:#38dc72; box-shadow:0 0 0 3px #38dc7228; } input::placeholder { color:#7d9585; }
button { border:0; border-radius:12px; padding:13px 18px; background:#1ed760; color:#062413; font:inherit; font-weight:850; cursor:pointer; transition:transform .16s,filter .16s,background .16s; } button:hover { transform:translateY(-2px); filter:brightness(1.07); } button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.status,.message { min-height:1.4em; font-size:.92rem; }.status { color:#c4d6c8; }.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#39e774; box-shadow:0 0 10px #39e774; }.message { color:#ffcf6a; }
#userBadge { padding:7px 10px; border-radius:999px; background:#2ba85925; color:#8ff5af; font-size:.78rem; font-weight:800; }
#question { margin-top:20px; padding:24px; border:1px solid #ffffff16; border-radius:20px; background:linear-gradient(135deg,#132d1ee8,#0b1b12d9); animation:appear .3s ease-out; }.question-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }.question-badge { color:#77e99c; font-size:.78rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.audio-controls { display:flex; align-items:center; gap:7px; }.secondary { padding:10px 13px; border:1px solid #ffffff1e; background:#ffffff12; color:#e5f5e9; font-size:.88rem; }.control-button { display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; font-size:.85rem; }.control-button.stop { background:#e5f3e8; color:#153022; }
#clipInfo { margin:16px 0 20px; }.answers { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:0; counter-reset:answer; }.answers button { position:relative; min-height:70px; padding:14px 14px 14px 47px; border:1px solid #ffffff1b; border-radius:14px; background:#193624; color:#f6fff8; text-align:left; line-height:1.25; }.answers button::before { counter-increment:answer; content:counter(answer); position:absolute; left:14px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:#ffffff12; color:#83efa8; font-size:.78rem; }.answers button:hover:not(:disabled) { border-color:#42e979; background:#20472f; }.answers button.correct { border-color:#47ef7e; background:#17753a; }.answers button.correct::before { background:#53ef84; color:#062413; content:"✓"; }.answers button.wrong { border-color:#ff7070; background:#792d31; }.answers button.wrong::before { background:#ff7474; color:#401014; content:"×"; }
.result { min-height:1.35em; margin:18px 0 10px; font-weight:800; } #nextButton { width:100%; margin-top:3px; }
@keyframes appear { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:560px) { body { padding:12px; } .card { padding:27px 19px; border-radius:22px; } .input-row,.question-top { align-items:stretch; flex-direction:column; } .input-row button { width:100%; } .question-top { gap:13px; } .audio-controls { justify-content:space-between; }.audio-controls .secondary { flex:1; } .game-header { align-items:flex-start; flex-direction:column; }.game-actions { width:100%; flex-wrap:wrap; } .account-actions { flex-direction:column; }.account-actions button { width:100%; } .answers { grid-template-columns:1fr; } #question { padding:18px; } }