@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Space+Grotesk:wght@400;600;700&display=swap');
:root{font-family:'Space Grotesk',system-ui,sans-serif;color:#f9f8ff;background:#0f0e20;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 20% 10%,#28325f65,transparent 45%),radial-gradient(ellipse at 80% 90%,#66276c55,transparent 42%),#0f0e20}button,input{font:inherit}button{cursor:pointer;border:0;transition:transform .15s,filter .2s}button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.12)}button:disabled{opacity:.38;cursor:default}main{max-width:1700px;margin:0 auto;padding:24px 36px 60px;min-height:100vh}.brand{font-weight:800;font-size:clamp(18px,2vw,30px);letter-spacing:-1px;display:flex;align-items:center;gap:5px}.brand>span:not(.logo){color:#ff746f}.brand em{margin-left:12px;padding:5px 9px;border:1px solid #ffffff33;border-radius:20px;font:600 10px 'DM Sans';letter-spacing:2px;font-style:normal;color:#b7b4d9}.logo{color:#ffe27f;margin-right:8px;font-size:38px}.eyebrow,.round{letter-spacing:3px;color:#bcb8e4;font-weight:700;font-size:clamp(12px,1.1vw,17px)}h1{font-weight:800;letter-spacing:-.05em;line-height:1.05;margin:.3em 0;font-size:clamp(38px,5vw,84px)}h1 span{color:#ff746f}h2{text-align:center;margin:35px 0 22px}p{line-height:1.5}.welcome{text-align:center;margin:5vh auto;max-width:880px}.welcome h1{font-size:clamp(48px,6.5vw,110px)}.welcome>p{color:#c2bed5}.vinyl{margin:0 auto 30px;width:135px;height:135px;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#171725 0px,#171725 6px,#33324d 7px,#181825 10px);box-shadow:0 0 65px #c36af74d;color:#f1adf0;font-size:50px;animation:spin 10s linear infinite}.primary{background:linear-gradient(135deg,#ff746f,#ed50ae);color:white;font-weight:800;border-radius:16px;padding:16px 24px}.huge{display:block;width:min(100%,540px);margin:26px auto;font-size:clamp(15px,1.5vw,23px);padding:23px}.welcome small,.hint{color:#b5b2cb;display:block;text-align:center;margin:15px}.headline{text-align:center}.headline h1{font-size:clamp(30px,3.5vw,60px)}.connectInfo{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:14px;margin:25px auto;max-width:1250px}.connectInfo>div{background:#22213d;border:1px solid #ffffff23;border-radius:18px;padding:20px;min-width:0}.connectInfo span{display:block;font-size:12px;color:#b7b3c9;letter-spacing:1.5px}.connectInfo strong{display:block;font-size:clamp(10px,1.3vw,20px);overflow-wrap:anywhere;padding-top:7px}.connectInfo b{font-size:clamp(22px,2.9vw,40px);letter-spacing:3px}.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin:24px 0}.team{background:#1d1b36;border:2px solid #ffffff18;border-radius:24px;padding:18px 12px;text-align:center;position:relative}.team.active{border-color:#ffd377;box-shadow:0 0 30px #ffbd4c30;}.avatar{font-size:52px;filter:drop-shadow(0 4px 10px #0005)}.teamName{font-size:clamp(16px,1.5vw,26px);font-weight:800;overflow-wrap:anywhere}.score{color:#aaa7c9;font-size:13px;font-weight:700;margin:5px}.chips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(2px,.8vw,5px);max-width:193px;margin:14px auto 5px}.chip{width:100%;max-width:28px;aspect-ratio:1;min-width:0;border:2px solid #ffffff25;border-radius:50%;display:grid;place-items:center;font-size:clamp(9px,2.8vw,14px);line-height:1;filter:grayscale(1);opacity:.4}.chip.earned{border-color:var(--c);filter:none;opacity:1;background:color-mix(in srgb,var(--c) 22%,transparent);animation:pop .4s ease-out}.addTeam{max-width:750px;margin:18px auto;background:#1d1b36;padding:18px;border-radius:18px}input{background:#121227;border:1px solid #716e97;color:white;border-radius:12px;padding:16px;width:100%;margin:6px 0;font-size:18px}input:focus{outline:2px solid #ffa1cf}.avatarPicker{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:13px 0}.avatarPicker button{border-radius:10px;background:#302e4b;padding:8px;font-size:25px}.avatarPicker button.selected{outline:3px solid #ff92bb}.addTeam .primary{width:100%}.tiny{font-size:12px;padding:6px 12px;border-radius:8px;margin-top:10px}.danger{background:#4c273e;color:#ffb3c9;border:1px solid #ff789350;border-radius:14px;padding:15px 22px;font-weight:800}.round{text-align:center;margin:35px 0 0}.currentHero{display:flex;justify-content:center;align-items:center;gap:18px}.currentHero span{font-size:clamp(45px,6vw,88px)}.currentHero h1{font-size:clamp(36px,4vw,70px)}.categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1250px;margin:auto}.category{border:2px solid var(--c);background:linear-gradient(150deg,color-mix(in srgb,var(--c) 25%,#1b1b33),#1c1b32);color:white;padding:20px;border-radius:22px;min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.category span{font-size:42px}.category b{font-size:clamp(16px,1.5vw,23px)}.category small{opacity:.68}.questionTop{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin:24px 0}.pill{--c:#a9a6d1;border:1px solid var(--c);color:var(--c);border-radius:30px;padding:9px 17px;background:#ffffff08;font-weight:700}.pill.final{color:#ffe27f;border-color:#ffe27f}.timer{max-width:760px;margin:0 auto 30px}.timerNumber{font-size:clamp(50px,7vw,110px);font-weight:800;text-align:center;font-variant-numeric:tabular-nums}.track{height:11px;border-radius:50px;background:#3b3a58;overflow:hidden}.track span{display:block;background:linear-gradient(90deg,#72e1b0,#ffe079);height:100%;transition:width .2s linear}.timer.urgent .timerNumber{color:#ff7474;animation:pulse .65s infinite}.timer.urgent .track span{background:#ff7474}.questionPanel{max-width:1400px;margin:auto;text-align:center}.questionPanel h1{font-size:clamp(28px,3.6vw,58px);max-width:1120px;margin:12px auto 32px}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.answer{display:flex;gap:18px;align-items:center;text-align:left;border-radius:18px;background:#22223e;border:2px solid #454361;padding:18px;min-height:95px}.answer span{display:grid;place-items:center;min-width:54px;height:54px;border-radius:14px;background:#494567;color:#fff;font-size:25px;font-weight:800}.answer p{font-size:clamp(18px,1.7vw,28px);font-weight:700;margin:0}.answer.correct{background:#164638;border-color:#6ee9b2}.answer.correct span{background:#22a179}.hostActions{display:flex;justify-content:center;gap:15px;margin:25px 0}.good{background:linear-gradient(135deg,#1e9b74,#54bf79);padding:18px 30px}.resultMsg{text-align:center;max-width:900px;margin:25px auto;padding:20px;border-radius:24px;background:#1b433b;border:2px solid #72e1b0;display:flex;flex-direction:column;gap:5px}.resultMsg.no{background:#4a2635;border-color:#ff7474}.resultMsg strong{font-size:clamp(24px,3vw,48px)}.resultMsg span{font-size:24px}.resultMsg small{opacity:.8}.winner{text-align:center;margin:20px auto}.winner h1{font-size:clamp(54px,9vw,130px);color:#ffd16f}.trophy{font-size:clamp(70px,12vw,170px);animation:pop 1.2s infinite alternate}.bigAvatar{font-size:clamp(70px,12vw,150px)}.winner h2{font-size:clamp(25px,3vw,48px)}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#a63352;color:white;padding:16px 26px;border-radius:12px;z-index:30;box-shadow:0 12px 35px #0009}.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}.confetti i{position:absolute;left:var(--x);top:-30px;width:12px;height:20px;animation:fall 3s var(--delay) ease-in forwards}.remote{max-width:850px;padding:16px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.remote .brand{font-size:21px}.remote .brand em{font-size:9px}.remote h1{font-size:clamp(32px,7vw,52px)}.remote .teams{grid-template-columns:repeat(2,minmax(0,1fr))}.remote .categories{grid-template-columns:repeat(2,minmax(0,1fr))}.remote .category{min-height:110px;padding:12px}.remote .category span{font-size:32px}.remote .category b{font-size:15px}.remote .categories small{font-size:10px}.remote .answers{grid-template-columns:1fr}.remote .answer{min-height:60px;padding:10px}.remote .answer p{font-size:17px}.remote .answer span{min-width:35px;height:35px;font-size:17px}.remote .timerNumber{font-size:60px}.remote .questionPanel h1{font-size:clamp(24px,6vw,40px)}.remote .questionTop{margin:18px 0}.remote .hostActions{position:sticky;bottom:0;background:#121123ed;padding:10px}.remote .hostActions button{flex:1}.remote .hint{overflow-wrap:anywhere}.remote form{max-width:450px;margin:auto}.remote form input{text-align:center}.remote .welcome{margin:35px auto}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{from{transform:scale(.8)}to{transform:scale(1.08)}}@keyframes pulse{50%{opacity:.5}}@keyframes fall{to{transform:translateY(110vh) rotate(var(--rot));opacity:.1}}@media(max-width:720px){main{padding:16px 12px 45px}.connectInfo{grid-template-columns:1fr}.teams{grid-template-columns:repeat(2,minmax(0,1fr))}.categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category{padding:12px;min-height:120px}.category span{font-size:30px}.answer{min-height:70px;padding:11px}.answer span{min-width:37px;height:37px}.answer p{font-size:17px}.questionTop{gap:6px}.pill{font-size:12px;padding:6px 8px}.brand em{display:none}.hostActions{flex-wrap:wrap}}

/* Let cards and text shrink within their columns, including long names and links. */
.team,.category,.answer,.answer p,.currentHero h1,.pill{min-width:0;overflow-wrap:anywhere}
.brand{flex-wrap:wrap}
h1,h2,.resultMsg,.huge,.toast{overflow-wrap:anywhere}
.toast{width:max-content;max-width:calc(100% - 24px)}
.remote .hostActions{bottom:env(safe-area-inset-bottom,0px)}
.remote .hostActions button{flex:1 1 130px;min-width:0;min-height:44px}
.avatarPicker button,.remote .tiny{min-width:44px;min-height:44px}
@media(max-width:480px){
  .team{padding:12px 8px;border-radius:18px}
  .teams{gap:10px}
  .avatar{font-size:36px}
  .chip{border-width:1px}
  .currentHero{gap:10px}
  .currentHero h1{font-size:clamp(26px,7vw,36px)}
  .welcome h1{font-size:clamp(30px,9vw,48px)}
  .stage .answers{grid-template-columns:minmax(0,1fr)}
  .answer{gap:10px}
  .answer span{flex-shrink:0}
}

.drawTeams h2{margin:0 0 16px}
.drawTeams label{display:block;font-weight:700}
.drawTeams textarea,.drawTeams select{display:block;width:100%;margin:6px 0 14px;padding:12px;background:#121227;border:1px solid #716e97;border-radius:12px;color:white;font:inherit;font-size:16px}
.drawTeams textarea{resize:vertical}
.teamMembers{list-style:none;padding:0;margin:10px 0 0;color:#d5d2e9;font-size:14px;overflow-wrap:anywhere}
.teamMembers li+li{margin-top:4px}

.sabotagePanel,.sabotageNotice{max-width:760px;margin:20px auto;padding:16px;text-align:center;background:#34223e;border:1px solid #ed87c7;border-radius:16px;overflow-wrap:anywhere}
.sabotagePanel h2{margin:0}
.sabotagePanel div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sabotagePanel button{max-width:100%;min-height:44px;overflow-wrap:anywhere}

.answer > span:first-child { flex-shrink: 0; }
.answer > .answerText { display: block; height: auto; min-width: 0; background: none; color: inherit; font-size: clamp(18px, 1.7vw, 28px); font-weight: 700; overflow-wrap: anywhere; }
.remote .answer > .answerText { height: auto; min-width: 0; font-size: 17px; }
button.answer { width: 100%; color: inherit; }
button.answer:focus-visible { outline: 3px solid #ff92bb; outline-offset: 3px; }
.answer.incorrect { background: #4a2635; border-color: #ff7474; }
.answer.incorrect > span:first-child { background: #a63352; }