.app{flex-direction:column;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.app:before,.app:after{content:"";pointer-events:none;background:radial-gradient(50% 50% at 50% 20%,#ffd23f1f,#0000 70%);height:700px;animation:18s ease-in-out infinite alternate aurora;position:absolute;inset:-200px -10% auto}.app:after{background:radial-gradient(30% 35% at 20% 30%,#7cc7ff14,#0000 70%);animation-duration:24s;animation-direction:alternate-reverse}.app>*{position:relative}.app-main{width:min(760px, 100% - 2 * var(--pad));flex:1;margin:0 auto;padding:clamp(16px,4vw,40px) 0 88px}.nav-user{align-items:center;gap:10px;font-size:14px;font-weight:500;display:flex}.nav-user .avatar{width:30px;height:30px;font-size:13px}.card{border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:clamp(20px,4vw,32px)}.gate{gap:14px;max-width:520px;margin:clamp(24px,6vw,64px) auto 0;display:grid}.gate h1{letter-spacing:-.04em;font-size:clamp(36px,6vw,56px);font-weight:750;line-height:1}.gate .card{margin-top:12px}.rejoin{text-align:center;margin-top:48px}.lobby{gap:18px;display:grid}.lobby h1{letter-spacing:-.045em;margin-top:8px;font-size:clamp(38px,6.5vw,60px);font-weight:750;line-height:1}.lobby-card{gap:14px;margin-top:10px;display:grid}.picker{position:relative}.picker-button{border:0;border-bottom:2px solid var(--line-2);width:100%;color:var(--ink);letter-spacing:-.02em;text-align:left;cursor:pointer;background:0 0;justify-content:space-between;align-items:center;gap:12px;padding:6px 4px 14px 0;font-size:clamp(22px,3.6vw,28px);font-weight:650;transition:border-color .15s,opacity .15s;display:flex}.picker-button svg{fill:none;width:24px;height:24px;stroke:var(--muted);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s}.picker-button[aria-expanded=true] svg{transform:rotate(180deg)}.picker-button:focus-visible,.picker-button[aria-expanded=true]{border-bottom-color:var(--sun);outline:none}.picker-button:disabled{opacity:.35;cursor:default}.picker-list{z-index:20;border:1px solid var(--line-2);background:var(--surface-2);border-radius:16px;max-height:340px;margin:0;padding:6px;list-style:none;animation:.14s ease-out picker-in;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow-y:auto;box-shadow:0 24px 48px -16px #000000d9}.picker-list li{color:var(--ink);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;font-size:16px;display:flex}.picker-list li.active{background:#ffffff0f}.picker-list li.selected{color:var(--sun);font-weight:600}.picker-list svg{fill:none;width:18px;height:18px;stroke:var(--sun);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;flex:none}@keyframes picker-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.lobby-card>.field{margin-bottom:10px}.segmented{border:1px solid var(--line);background:#ffffff08;border-radius:14px;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;display:grid}.segmented button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:11px 8px;font-size:14px;position:relative}.segmented button.on{background:var(--ink);color:#0b0b0d;font-weight:600}@media (hover:hover){.segmented button[data-tip]:hover:after,.segmented button[data-tip]:focus-visible:after{content:attr(data-tip);z-index:5;border:1px solid var(--line-2);width:max-content;max-width:220px;color:var(--ink);text-align:left;white-space:normal;pointer-events:none;background:#24242a;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:400;line-height:1.4;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 14px 30px -10px #000000b3}}.style-help{color:var(--muted);margin-bottom:10px;font-size:14px}.waiting-title{letter-spacing:-.035em;max-width:16em;font-size:clamp(28px,5vw,40px);font-weight:750;line-height:1.05}.out-bar{background:#ff6b5714;border:1px solid #ff6b574d;border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;padding:12px 14px 12px 16px;font-size:14px;display:flex}.lobby-actions{gap:10px;display:grid}.lobby-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.join-card{grid-template-columns:1fr 150px auto;align-items:center;gap:14px;display:grid}.join-title{font-size:17px;font-weight:600}.code-field{letter-spacing:.35em;text-align:center;text-transform:uppercase;font-size:20px;font-weight:700}.writing{text-align:center;justify-items:center;gap:14px;padding:clamp(56px,12vw,120px) 0;display:grid}.writing h2{letter-spacing:-.03em;font-size:clamp(28px,4.5vw,40px);font-weight:700}.writing-rungs{align-items:flex-end;gap:6px;height:64px;margin-bottom:12px;display:none}.writing-rungs span{width:10px;height:calc(14px + var(--i) * 5px);background:var(--sun);opacity:.2;animation:1.4s ease-in-out infinite climb;animation-delay:calc(var(--i) * .1s);border-radius:4px}.room{gap:16px;display:grid}.room-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.room-meta{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.note{color:var(--mint);font-size:14px}.waiting{border:1px solid var(--line);background:linear-gradient(180deg, #ffd23f14, transparent 60%), var(--surface);text-align:center;border-radius:28px;justify-items:center;gap:16px;padding:clamp(28px,6vw,56px) clamp(16px,4vw,32px);display:grid}.code-tiles{gap:10px;display:flex}.code-tiles span{border:1px solid var(--line-2);background:var(--surface-2);border-radius:18px;place-items:center;width:clamp(56px,14vw,76px);height:clamp(68px,17vw,92px);font-size:clamp(34px,8vw,48px);font-weight:800;display:grid;box-shadow:inset 0 -3px #0000004d}.waiting .muted{max-width:30em}.waiting-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;display:flex}.question{gap:4px;display:grid}.question .rungs{margin:6px 0 14px}.q-head{justify-content:space-between;align-items:center;gap:16px;min-height:64px;display:flex}.prompt{letter-spacing:-.03em;margin:10px 0 20px;font-size:clamp(28px,4.8vw,40px);font-weight:650;line-height:1.1}.answers{gap:10px;margin-bottom:8px;display:grid}.answer{border:1px solid var(--line-2);width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:#ffffff08;border-radius:16px;align-items:center;gap:14px;padding:16px 18px;font-size:17px;transition:border-color .15s,background .15s,transform .15s,opacity .15s;display:flex}.answer:not(:disabled):hover{border-color:#ffffff52;transform:translateY(-1px)}.answer:disabled{cursor:default}.answer.picked{border-color:var(--sun);background:var(--sun-soft)}.answer.picked b{background:var(--sun);color:var(--sun-ink)}.answer.right{border-color:var(--mint);background:#5ee38c1f}.answer.right b{background:var(--mint);color:#062312}.answer.missed{border-color:var(--flare);background:#ff6b571a}.answer.missed b{background:var(--flare);color:#2a0703}.answer.faded{opacity:.4}.verdict{border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}.verdict.in{color:var(--mint);background:#5ee38c24}.verdict.out{color:var(--flare);background:#ff6b5724}.explain-card{background:#5ee38c12;border:1px solid #5ee38c40;border-radius:16px;margin-top:8px;padding:16px 18px;line-height:1.5}.seat-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px;display:grid}.seat{border:1px solid var(--line);background:#ffffff05;border-radius:16px;align-items:center;gap:10px;min-width:0;padding:12px;display:flex}.seat .who{min-width:0;display:grid}.seat .who strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.seat .who span{font-size:12px}.seat.in .who span{color:var(--mint)}.seat.locked{border-color:#ffd23f59}.seat.locked .who span{color:var(--sun)}.seat.out{opacity:.5}.seat.out .avatar{filter:grayscale()}.seat.out .who strong{text-decoration:line-through}.seat.out .who span{color:var(--flare)}.seat.empty{color:var(--dim);border-style:dashed;justify-content:center;font-size:13px}.finish{text-align:center;justify-items:center;gap:14px;padding:clamp(28px,7vw,64px) 0 12px;display:grid}.finish-title{letter-spacing:-.045em;max-width:14em;font-size:clamp(36px,7vw,64px);font-weight:800;line-height:1}.finish-title.win{color:var(--sun);text-shadow:0 0 60px #ffd23f59}.finish-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;display:flex}.score{color:var(--sun);letter-spacing:-.06em;font-size:clamp(88px,20vw,160px);font-weight:800;line-height:.85}.score small{color:var(--dim);letter-spacing:-.02em;font-size:.35em}.link-card{grid-template-columns:1fr auto;align-items:center;gap:14px;transition:border-color .15s;display:grid}.link-card:hover{border-color:var(--line-2)}.daily{gap:18px;display:grid}.daily h1{letter-spacing:-.045em;margin-top:8px;font-size:clamp(38px,6.5vw,60px);font-weight:750;line-height:1}.daily-lede{max-width:32em;margin-top:14px;line-height:1.5}.daily>.btn{justify-self:start}.daily-you{grid-template-columns:auto 1fr auto;align-items:center;gap:20px;display:grid}.daily-you .score{font-size:64px}.daily .card .join-title{margin-bottom:12px}.daily-you .join-title{margin-bottom:4px}.report-link{color:var(--muted);text-underline-offset:3px;justify-self:start;margin-top:4px;font-size:13px;text-decoration:underline}.report-link:hover{color:var(--ink)}.report-done{color:var(--mint);margin-top:4px;font-size:13px}.board{gap:4px;display:grid}.board-empty{padding:8px 0}.board-score small{color:var(--muted);font-weight:400}.waiting-list{border-top:1px solid var(--line);padding-top:10px}.stats-strip{border:1px solid var(--line);background:var(--line);border-radius:18px;grid-template-columns:repeat(4,1fr);gap:1px;display:grid;overflow:hidden}.stats-strip div{background:var(--surface);gap:2px;padding:14px 16px;display:grid}.stats-strip strong{letter-spacing:-.02em;font-size:22px;font-weight:700}.stats-strip span{color:var(--muted);font-size:12px}.leagues-card{gap:14px;display:grid}.league-list{gap:8px;display:grid}.league-link{border:1px solid var(--line);border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;transition:border-color .15s;display:flex}.league-link:hover{border-color:var(--line-2)}.league-create{grid-template-columns:1fr auto;gap:8px;display:grid}.league-actions{justify-content:flex-start}.daily-extras{gap:16px;display:grid}.toggle-row{cursor:pointer;align-items:center;gap:10px;font-size:15px;display:flex}.toggle-row input{width:20px;height:20px;accent-color:var(--sun)}.share-card{text-align:center;justify-items:center;gap:14px;padding:clamp(24px,6vw,56px) 0;display:grid}.share-rungs{width:min(420px,100%)}.standings{text-align:left;gap:6px;width:min(460px,100%);margin-top:8px;display:grid}.standing{border:1px solid var(--line);background:#ffffff05;border-radius:14px;grid-template-columns:24px auto 1fr auto;align-items:center;gap:12px;padding:10px 14px;display:grid}.standing.top{background:var(--sun-soft);border-color:#ffd23f80}.q-labels{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.question.final .prompt{font-size:clamp(30px,5.4vw,46px)}.question.final .q-head .label{color:var(--sun)}.question.final{background:radial-gradient(80% 60% at 50% 0,#ffd23f1f,#0000 70%);border:1px solid #ffd23f59;border-radius:24px;margin:0 -18px;padding:18px;animation:2.4s ease-in-out infinite final-glow;position:relative}.toasts{flex-wrap:wrap;gap:8px;display:flex}.toast-live{color:var(--flare);background:#ff6b571f;border:1px solid #ff6b5759;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;animation:.3s toast-pop}.confetti{z-index:40;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;animation:linear forwards confetti-fall;position:absolute;top:-20px}@keyframes final-glow{0%,to{box-shadow:0 0 #ffd23f00}50%{box-shadow:0 0 60px -10px #ffd23f59}}@keyframes toast-pop{0%{opacity:0;transform:translateY(6px)scale(.8)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(calc(var(--spin) * 720deg));opacity:.8}}.board .label{margin-bottom:8px}.board-row{border-top:1px solid var(--line);grid-template-columns:28px auto 1fr auto;align-items:center;gap:12px;padding:10px 0;display:grid}.board-pos{color:var(--dim);font-weight:700}.board-score{font-variant-numeric:tabular-nums;font-weight:600}.review{gap:10px;margin-top:8px;display:grid}.review-item{border:1px solid var(--line);border-left:3px solid var(--mint);background:#ffffff05;border-radius:14px;gap:6px;padding:16px 18px;display:grid}.review-item.no{border-left-color:var(--flare)}.review-item.pass{border-left-color:var(--sun)}.pass-button{justify-self:start;margin:4px 0 8px}.review-q{font-weight:600;line-height:1.4}.review-answer{color:var(--mint);font-weight:600}@keyframes climb{0%,to{opacity:.2}50%{opacity:1}}@media (max-width:640px){.seat-grid{grid-template-columns:1fr 1fr}.join-card{grid-template-columns:1fr auto}.stats-strip{grid-template-columns:1fr 1fr}.question.final{margin:0 -10px;padding:14px 10px}.daily-you{grid-template-columns:auto 1fr}.daily-you .btn,.join-card>div{grid-column:1/-1}.segmented{grid-template-columns:1fr 1fr}.nav-user span{display:none}}.builder{width:120px;height:120px;margin-bottom:4px;overflow:visible}.builder-rail{fill:#f7f5f038}.builder-rung{stroke:var(--sun);stroke-width:6px;stroke-linecap:round;stroke-dasharray:1;animation:3s ease-in-out infinite backwards rung-build;animation-delay:calc(var(--i) * .35s)}.builder-pencil{animation:3s ease-in-out infinite pencil}.builder-q{fill:var(--muted);font-family:var(--font-display), sans-serif;transform-box:fill-box;font-size:16px;font-weight:800;animation:3s ease-out infinite backwards q-float}.builder-q.q2{fill:#7cc7ff;animation-delay:1s}.builder-q.q3{fill:#b9a6ff;animation-delay:2s}.question .prompt{animation:.5s cubic-bezier(.2,.8,.2,1) backwards prompt-in}.question .answer{animation:.45s cubic-bezier(.2,.8,.2,1) backwards answer-in;animation-delay:calc(.12s + var(--i) * 60ms)}.question .answer.picked{animation:.35s cubic-bezier(.3,1.6,.5,1) picked-pop}.question .answer.right{animation:.6s cubic-bezier(.3,1.5,.5,1) right-pop;box-shadow:0 0 36px -10px #5ee38c99}.question .answer.missed{animation:.5s shake}.question .answer.faded{animation:none}.verdict{animation:.45s cubic-bezier(.3,1.6,.5,1) backwards pop-in}.explain-card{animation:.45s .2s backwards answer-in}.out-bar{animation:.4s backwards answer-in}.code-tiles{perspective:600px}.code-tiles span{animation:.7s cubic-bezier(.2,.8,.2,1) backwards tile-flip,3.2s ease-in-out infinite tile-float;animation-delay:calc(var(--i) * .1s), calc(.8s + var(--i) * .25s)}.seat{transition:border-color .3s,opacity .4s}.seat.out{animation:.6s seat-out}.seat.locked{animation:.8s ease-out lock-ping}.seat.empty{animation:2.6s ease-in-out infinite breathe}.finish-title{animation:.7s cubic-bezier(.2,.8,.2,1) .15s backwards prompt-in}.score{animation:.9s cubic-bezier(.3,1.5,.5,1) backwards score-pop}.standing,.board-row{animation:.45s backwards answer-in;animation-delay:calc(.35s + var(--i) * 80ms)}.stats-strip div{animation:.5s backwards answer-in}.stats-strip div:nth-child(2){animation-delay:60ms}.stats-strip div:nth-child(3){animation-delay:.12s}.stats-strip div:nth-child(4){animation-delay:.18s}.lobby h1,.gate h1,.daily h1{background:linear-gradient(100deg, var(--ink) 40%, var(--sun) 50%, var(--ink) 60%) 0 0 / 250% 100%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:7s ease-in-out 1s infinite text-shimmer}.trophy{place-items:center;width:150px;height:150px;margin-bottom:-6px;display:grid;position:relative}.trophy .sunburst{opacity:.3;width:250px;height:250px;animation:.8s backwards pop-in;position:absolute;inset:-50px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,#0000);mask-image:radial-gradient(closest-side,#000 30%,#0000)}.trophy .sunburst-rays{fill:var(--sun);transform-origin:100px 100px;animation:24s linear infinite spin}.trophy .sunburst-core{fill:var(--sun);opacity:.4}.trophy-cup{filter:drop-shadow(0 10px 30px #ffd23f73);width:118px;height:118px;animation:.9s cubic-bezier(.3,1.5,.5,1) backwards trophy-in,3.4s ease-in-out .9s infinite trophy-float;position:relative}.trophy-spark{color:var(--sun);animation:2.4s ease-in-out infinite twinkle;position:absolute}.trophy-spark.s1{top:8px;left:6px}.trophy-spark.s2{color:#f7f5f0;animation-delay:.8s;top:26px;right:2px}.trophy-spark.s3{animation-delay:1.6s;bottom:16px;right:12px}@keyframes aurora{0%{transform:translate(-4%)scale(1)}to{transform:translate(5%,40px)scale(1.15)}}@keyframes rung-build{0%{stroke-dashoffset:1px;opacity:1}10%,72%{stroke-dashoffset:0;opacity:1}88%,to{stroke-dashoffset:0;opacity:0}}@keyframes pencil{0%{opacity:1;transform:translate(36px,92px)}10%{transform:translate(84px,92px)}11.67%{transform:translate(36px,76px)}21.67%{transform:translate(84px,76px)}23.33%{transform:translate(36px,60px)}33.33%{transform:translate(84px,60px)}35%{transform:translate(36px,44px)}45%{transform:translate(84px,44px)}46.67%{transform:translate(36px,28px)}56.67%{opacity:1;transform:translate(84px,28px)}72%{opacity:0;transform:translate(100px,8px)rotate(20deg)}90%{opacity:0;transform:translate(36px,92px)}to{opacity:1;transform:translate(36px,92px)}}@keyframes q-float{0%{opacity:0;transform:translateY(10px)scale(.6)}30%{opacity:.9;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-22px)scale(.9)}}@keyframes prompt-in{0%{opacity:0;filter:blur(6px);transform:translateY(14px)}}@keyframes answer-in{0%{opacity:0;transform:translateY(12px)}}@keyframes picked-pop{40%{transform:scale(1.025)}}@keyframes right-pop{0%{transform:scale(1)}35%{transform:scale(1.04);box-shadow:0 0 0 6px #5ee38c40,0 0 50px #5ee38c80}to{transform:scale(1)}}@keyframes shake{15%,55%{transform:translate(-8px)}35%,75%{transform:translate(8px)}90%{transform:translate(-3px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}}@keyframes tile-flip{0%{opacity:0;transform:rotateX(-90deg)translateY(20px)}}@keyframes tile-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes seat-out{0%{opacity:1;filter:none}20%{transform:translate(-6px)rotate(-2deg)}40%{transform:translate(6px)rotate(2deg)}60%{transform:translateY(4px)}}@keyframes lock-ping{0%{box-shadow:0 0 #ffd23f80}to{box-shadow:0 0 0 12px #ffd23f00}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.5}}@keyframes score-pop{0%{opacity:0;transform:scale(.4)rotate(-6deg)}60%{opacity:1}}@keyframes text-shimmer{0%,30%{background-position:100% 0}70%,to{background-position:0 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes trophy-in{0%{opacity:0;transform:translateY(40px)scale(.3)rotate(-15deg)}}@keyframes trophy-float{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-8px)rotate(3deg)}}@keyframes twinkle{0%,to{opacity:0;transform:scale(.4)rotate(0)}50%{opacity:1;transform:scale(1.1)rotate(90deg)}}
