@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --navy:#17143c; --purple:#6c45e2; --pink:#ee4b91; --yellow:#ffd157; --mint:#5bd7b6; }
* { box-sizing:border-box; }
body { min-height:100vh; color:#f8f6ff; font-family:'DM Sans',sans-serif; background:radial-gradient(circle at 10% 5%,#5739aa 0,transparent 32%),radial-gradient(circle at 92% 20%,#bb4a91 0,transparent 25%),#17143c; }
body.has-background { background-position:center; background-size:cover; background-attachment:fixed; }
body.has-background::before { content:""; position:fixed; inset:0; background:rgba(18,15,52,.55); pointer-events:none; z-index:0; }
#app { position:relative; z-index:1; }
h1,h2,h3,.brand,.pin { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.04em; }
.brand { font-size:1.4rem; color:white; text-decoration:none; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; color:#beb4f4; font-weight:800; }
.hero { max-width:780px; margin:7vh auto 0; text-align:center; }
.hero h1 { font-size:clamp(3rem,8vw,6.5rem); line-height:.98; }
.hero .lead { color:#d8d1f5; }
.join-flow { max-width:720px;margin:7vh auto 0;text-align:center; }
.join-flow h1 { font-size:clamp(3rem,7vw,5.5rem);line-height:1.02;margin-bottom:1rem; }
.join-lead { color:#d8d1f5;font-size:1.2rem;margin-bottom:1.6rem; }
.join-panel { max-width:520px;margin:0 auto;text-align:left; }
.join-steps { display:flex;justify-content:center;gap:.5rem;margin:0 0 1.5rem; }
.join-steps span { padding:.45rem .8rem;border:1px solid #ffffff55;border-radius:999px;color:#c6bdf1;font-size:.8rem;font-weight:800; }
.join-steps .active { background:white;color:#49359a;border-color:white; }
.join-pin-input { text-align:center;font:700 2rem 'Space Grotesk',sans-serif;letter-spacing:.12em; }
.join-flow--profile { margin-top:2vh; }
.join-flow--profile h1 { color:#252049;font-size:clamp(2rem,4vw,3rem); }
.join-flow--profile .join-steps { margin-bottom:1rem; }
.panel { background:rgba(255,255,255,.96); color:#252049; border:1px solid rgba(255,255,255,.7); border-radius:24px; box-shadow:0 24px 70px rgba(8,5,37,.25); padding:clamp(1.25rem,3vw,2rem); }
.panel.dark { background:rgba(30,25,79,.88); color:white; border-color:rgba(255,255,255,.2); }
.form-control,.form-select { border-radius:12px; padding:.8rem .9rem; }
.btn { border-radius:12px; font-weight:800; padding:.72rem 1.15rem; }
.btn-primary { background:var(--purple); border-color:var(--purple); }
.btn-primary:hover { background:#5836c6; border-color:#5836c6; }
.btn-pink { background:var(--pink); color:white; }
.btn-pink:hover { background:#d9367a; color:white; }
.btn-outline-light { border-width:2px; }
.pin { font-size:clamp(4rem,12vw,8rem); line-height:1; letter-spacing:.08em; color:var(--yellow); }
.pill { display:inline-flex; align-items:center; border-radius:999px; padding:.4rem .85rem; background:#eee9ff; color:#48338e; font-weight:800; font-size:.85rem; }
.lobby-arena { position:relative;height:var(--lobby-height,280px);padding:0;overflow:hidden;background:#f8f6ffed; }
.lobby-arena--empty { display:grid;place-items:center;padding:1.5rem; }
.lobby-floater { position:absolute;top:0;left:0;display:flex;align-items:center;gap:.7rem;max-width:calc(100% - 20px);padding:.45rem 1.15rem .45rem .45rem;border:2px solid #ddd2ff;border-radius:999px;background:linear-gradient(135deg,#fff,#ede6ff);color:#2b2153;font-size:1.15rem;font-weight:800;white-space:nowrap;box-shadow:0 8px 22px #25165b30;will-change:transform; }
.lobby-floater .player-avatar { width:64px;height:64px;font-size:1.6rem; }
.lobby-name { max-width:180px;overflow:hidden;text-overflow:ellipsis; }
.lobby-arena--crowded .lobby-floater { font-size:1rem;gap:.5rem;padding:.35rem .8rem .35rem .35rem; }
.lobby-arena--crowded .lobby-floater .player-avatar { width:54px;height:54px; }
.lobby-arena--packed .lobby-floater { font-size:.85rem;gap:.3rem;padding:.2rem .55rem .2rem .2rem;border-width:1px;box-shadow:0 5px 15px #25165b26; }
.lobby-arena--packed .lobby-floater .player-avatar { width:38px;height:38px;font-size:1rem; }
.lobby-arena--packed .lobby-name { max-width:125px; }
.lobby-arena--still { height:auto!important;min-height:150px;display:flex;align-content:center;justify-content:center;flex-wrap:wrap;gap:.7rem;padding:1rem; }
.lobby-arena--still .lobby-floater { position:static;transform:none!important;will-change:auto; }
.avatar-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.55rem; }
.avatar-option { position:relative;cursor:pointer;margin:0; }
.avatar-input { position:absolute;width:1px;height:1px;opacity:0; }
.avatar-choice { display:grid;place-items:center;aspect-ratio:1;border:3px solid transparent;border-radius:16px;background:#eee9ff;transition:border-color .15s,transform .15s,box-shadow .15s; }
.avatar-choice img { width:100%;height:100%;object-fit:contain; }
.avatar-option:hover .avatar-choice { transform:translateY(-2px); }
.avatar-input:checked + .avatar-choice { border-color:var(--purple);box-shadow:0 0 0 3px #6c45e233; }
.avatar-input:focus-visible + .avatar-choice { outline:3px solid var(--pink);outline-offset:2px; }
.player-avatar { display:inline-grid;place-items:center;width:38px;height:38px;flex:none;object-fit:contain;border-radius:50%;background:#f2edff; }
.avatar-fallback { color:#4d2b9c;font-weight:800; }
.player-identity { display:flex;align-items:center;gap:.65rem;width:fit-content;max-width:100%;margin:0 auto 1rem;padding:.35rem .85rem .35rem .4rem;border-radius:999px;background:#17143cbd;color:white;flex-wrap:wrap;justify-content:center; }
.player-identity > span:not(.player-avatar) { color:#d3c8ff;font-size:.85rem; }
.avatar-dialog { width:min(600px,calc(100vw - 2rem));max-height:88vh;overflow-y:auto;margin:auto;border:1px solid #ddd2ff; }
.avatar-dialog::backdrop { background:#100b2abf;backdrop-filter:blur(4px); }
.choice { display:flex; align-items:center; gap:.8rem; width:100%; min-height:84px; border:0; border-radius:16px; color:white; padding:1rem 1.25rem; text-align:left; font-weight:800; font-size:clamp(1rem,2vw,1.3rem); transition:transform .15s,filter .15s; }
.choice:hover:not(:disabled) { transform:translateY(-3px); filter:brightness(1.08); }
.choice:disabled { opacity:.7; }
.choice:nth-child(4n+1) { background:#dc486f; }.choice:nth-child(4n+2) { background:#4386e3; }.choice:nth-child(4n+3) { background:#dda62b; }.choice:nth-child(4n) { background:#36a88f; }
.choice.correct { outline:5px solid white; opacity:1; }.choice.selected { outline:5px solid var(--yellow); opacity:1; }
.choice-symbol { display:grid; place-items:center; width:2.6rem; height:2.6rem; border:2px solid rgba(255,255,255,.75); border-radius:9px; flex:none; }
.question-title { font-size:clamp(2rem,5vw,4.4rem); text-align:center; margin:1rem auto 1.5rem; max-width:1000px; }
.timer { width:88px;height:88px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:#271d46;font:700 2rem 'Space Grotesk',sans-serif; margin:auto; }
.reveal-grid { position:relative; width:min(100%,760px); aspect-ratio:16/9; margin:auto; overflow:hidden; border-radius:20px; background:#191537; box-shadow:0 20px 50px #08052266; }
.reveal-grid img { width:100%;height:100%;object-fit:contain; }
.tile-cover { position:absolute; background:#32227b; border:1px solid #5e45bd; transition:opacity .5s; }
.media-frame { max-width:760px;margin:0 auto 1.5rem; }
.question-illustration { display:block; width:100%; max-height:300px; object-fit:contain; border-radius:18px; background:#17143c; }
.media-frame audio { width:100%; }
.score-row { display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid #ddd8ee;font-weight:700; }
.score-player { display:inline-flex;align-items:center;gap:.55rem;min-width:0; }
.score-row:last-child { border-bottom:0; }
.tiny { color:#b8afe3;font-size:.85rem; }.panel .tiny { color:#706887; }
#toast { position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:99;background:#fff;color:#361b65;border-radius:12px;padding:.7rem 1rem;box-shadow:0 15px 35px #08052266;display:none;max-width:90vw; }
#toast.show { display:block; }
#connection-status { position:fixed;z-index:100;top:.75rem;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2rem);padding:.7rem 1rem;border-radius:12px;background:#ffd157;color:#252049;font-weight:800;text-align:center;box-shadow:0 8px 28px #08052266; }
#connection-status[hidden] { display:none; }
.editor-list { display:grid;gap:.65rem; }.editor-item { background:#f5f2ff;border-radius:14px;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem; }
.background-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:.8rem; }
.background-option { position:relative;cursor:pointer;min-width:0; }
.background-input { position:absolute;width:1px;height:1px;opacity:0; }
.background-card { display:block;height:100%;overflow:hidden;border:3px solid transparent;border-radius:15px;background:#f5f2ff;box-shadow:0 1px 8px #1b14501a;transition:border-color .15s,transform .15s,box-shadow .15s; }
.background-option:hover .background-card { transform:translateY(-2px);box-shadow:0 7px 18px #1b14502b; }
.background-input:checked + .background-card { border-color:var(--purple);box-shadow:0 0 0 3px #6c45e233; }
.background-input:focus-visible + .background-card { outline:3px solid var(--pink);outline-offset:3px; }
.background-thumb { display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:linear-gradient(130deg,#5739aa,#bb4a91);color:white;overflow:hidden; }
.background-thumb img { width:100%;height:100%;object-fit:cover; }
.background-default { font:700 1.15rem 'Space Grotesk',sans-serif; }
.background-name { display:block;padding:.55rem .65rem;font-size:.9rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere; }
.display-mode #app { max-width:none; width:100%; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.display-mode .panel { max-width:1100px; width:100%; margin-inline:auto; }
.display-mode .lobby-arena { height:min(var(--lobby-height,280px),42vh); }
.display-mode .lobby-floater .player-avatar { width:74px;height:74px; }
.display-mode .lobby-arena--crowded .lobby-floater .player-avatar { width:58px;height:58px; }
.display-mode .lobby-arena--packed .lobby-floater .player-avatar { width:38px;height:38px; }
.display-mode .question-title { font-size:clamp(3rem,6vw,6rem); }
.display-event-title { width:min(100%,1200px); margin:0 auto 1.5rem; padding:1.1rem 1.5rem; border:1px solid #ffffff44; border-radius:24px; background:#17143c9e; text-align:center; backdrop-filter:blur(8px); }
.display-event-title h1 { margin:0; color:white; font-size:clamp(2rem,4vw,3.5rem); line-height:1.05; overflow-wrap:anywhere; }
.lobby-title { max-width:1100px;margin:0 auto 2rem;padding:1.5rem;border-radius:24px;background:#17143cbd;overflow-wrap:anywhere; }
.lobby-title h1 { margin:0;color:white;font-size:clamp(3rem,7vw,6rem);line-height:1.05; }
.lobby .pin { font-size:clamp(3rem,7vw,5rem); }
.display-event-title--lobby { padding:clamp(1.5rem,3vw,3rem); }
.display-event-title--lobby h1 { font-size:clamp(3.5rem,7vw,8rem); }
.display-mode .lobby .pin { font-size:clamp(3rem,5vw,4.5rem); }
.display-mode #app { padding-top:1rem!important; padding-bottom:1rem!important; }
.display-mode header { margin-bottom:1rem!important; }
.display-mode .display-event-title--lobby { padding:clamp(1.5rem,3vw,2.5rem); margin-bottom:1.5rem; }
.display-mode .display-event-title--lobby h1 { font-size:clamp(3.5rem,7vw,8rem); }
.display-mode .panel.my-4 { margin-top:1rem!important; margin-bottom:1rem!important; }
@media(max-height:850px) and (min-width:700px){ .display-mode .display-event-title--lobby{padding:1rem;margin-bottom:.5rem}.display-mode .display-event-title--lobby h1{font-size:clamp(3.4rem,6vw,6rem)}.display-mode .lobby .pin{font-size:clamp(3rem,4vw,4rem)}.display-mode .lobby-arena{height:min(var(--lobby-height,280px),34vh)}.display-mode .panel.my-4{margin-top:.6rem!important;margin-bottom:.6rem!important}.display-mode .lobby .lead{margin-top:.4rem!important;margin-bottom:.4rem} }
@media(max-width:600px){ .hero,.join-flow{margin-top:3vh}.panel{border-radius:18px}.choice{min-height:66px}.display-mode .question-title{font-size:2.4rem} }
@media(max-width:600px){ .lobby-floater{font-size:1rem;padding:.35rem .85rem .35rem .35rem}.lobby-floater .player-avatar{width:54px;height:54px}.lobby-name{max-width:125px}.display-mode .lobby-arena{height:min(var(--lobby-height,280px),42vh)} }
@media(max-width:1024px){
  .lobby-arena,.lobby-arena--still { height:auto!important;min-height:0;display:grid;grid-template-columns:1fr;gap:.6rem;padding:1rem;overflow:visible; }
  .lobby-arena--empty { min-height:100px;place-items:center; }
  .display-mode .lobby-arena { max-width:700px; }
  .lobby-arena .lobby-floater { position:static;top:auto;left:auto;width:100%;max-width:none;transform:none!important;will-change:auto;padding:.45rem .8rem;border-radius:16px;box-shadow:0 3px 10px #25165b1c; }
  .lobby-arena--packed .lobby-floater { font-size:1rem; }
  .lobby-arena .lobby-floater .player-avatar,.display-mode .lobby-arena .lobby-floater .player-avatar { width:56px;height:56px; }
  .lobby-name { max-width:none; }
}