:root{color:#18201f;background:#fff;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--spring: cubic-bezier(.34, 1.56, .64, 1);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:#fff}button,input,select{font:inherit}button{min-height:44px;border:0;border-radius:1.25rem;padding:0 18px;color:#fff;background:#1f6f68;cursor:pointer;transition:background-color .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}button:hover{background:#17564f;transform:translateY(-1px);box-shadow:0 12px 24px #02122d1f}button:active{transform:translateY(0) scale(.98);box-shadow:none}button.secondary,button.ghost{color:#18201f;background:#d9ded6}button.secondary:hover,button.ghost:hover{background:#c6cec3}input{width:100%;min-height:44px;border:1px solid #c7c8be;border-radius:8px;padding:0 12px;color:#18201f;background:#fffdf8;transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out),transform .16s var(--ease-out)}input:focus,select:focus{outline:0;box-shadow:0 0 0 4px #ffffff47}label{display:grid;gap:8px;color:#4c5753;font-size:.92rem;font-weight:700}#app{min-height:100vh;padding:2rem}.entry-shell{position:relative;display:grid;align-content:center;justify-items:center;min-height:calc(100vh - 4rem);padding:clamp(24px,5vw,56px);border-radius:28px;background:linear-gradient(180deg,#0b45d8,#0875fe)}.brand-panel{display:flex;flex-direction:column;align-items:center;align-self:center;max-width:760px;padding:0;color:#fff;text-align:center;transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}.brand-panel h1{max-width:720px;margin:0;font-size:clamp(3.2rem,11vw,7rem);line-height:.88}.lede{max-width:640px;margin:18px auto 0;color:#ffffffd1;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.45}.join-panel{position:absolute;right:clamp(24px,5vw,56px);bottom:clamp(24px,5vw,56px);left:clamp(24px,5vw,56px);display:grid;gap:18px;width:min(100%,430px);margin:0 auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:opacity .24s var(--ease-out),transform .24s var(--ease-out)}.entry-shell .join-panel{justify-self:center}.entry-shell.motion-forward .flow-username,.entry-shell.motion-forward .flow-room-code{animation:entry-fields-in .3s var(--ease-out) both}.entry-shell.motion-forward .flow-username .entry-actions,.entry-shell.motion-forward .flow-room-code .entry-actions{animation:entry-buttons-settle .3s var(--ease-out) both}.entry-shell.motion-back .flow-choice{animation:entry-choice-return .26s var(--ease-out) both}.entry-shell.motion-leaving .brand-panel{opacity:0;transform:scale(.94) translateY(-8px)}.entry-shell.motion-leaving .join-panel{opacity:0;transform:translateY(42px)}.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.entry-shell .entry-actions button{min-height:58px;border-radius:1.25rem;padding:16px 28px;font-weight:900}.entry-shell input{min-height:58px;border:0;border-radius:1.25rem;padding:16px 28px;color:#02122d;background:#fff;font-weight:900;text-align:center}.identity-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}.emoji-picker select{width:100%;min-height:58px;border:0;border-radius:1.25rem;padding:0 12px;color:#02122d;background:#fff;font-size:1.6rem;font-weight:900;text-align:center;cursor:pointer}.entry-shell input::placeholder{color:#02122d8c}.entry-shell .entry-actions button:first-child{color:#02122d;background:#fff}.entry-shell .entry-actions button:first-child:hover{background:#eef4ff}.entry-shell .entry-actions button.secondary{color:#fff;background:#02122d}.entry-shell .entry-actions button.secondary:hover{background:#041a42}.error{margin:0;color:#9a3412;font-weight:700}.game-shell{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:calc(100vh - 4rem);overflow:hidden;border-radius:28px;color:#fff;background:linear-gradient(180deg,#0b45d8,#0875fe)}.room-code{min-width:116px;color:#02122d;background:#fff;font-size:1.05rem;font-weight:900}.room-code:hover{background:#eef4ff}#leave-room{color:#fff;background:#02122d}#leave-room:hover{background:#041a42}.header-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:end;gap:10px}.player-bar{display:flex;min-height:112px;overflow-x:auto;border-top:1px solid rgba(255,255,255,.22);background:#02122d6b}.room-entering .player-bar{animation:players-enter .36s var(--ease-out) both}.seat{position:relative;display:grid;align-content:center;justify-items:center;gap:6px;min-width:132px;flex:1 0 132px;padding:16px 18px;color:#fff;text-align:center;transition:background-color .22s var(--ease-out),opacity .22s var(--ease-out),transform .22s var(--ease-out);animation:seat-enter .26s var(--ease-out) both}.seat+.seat{border-left:1px solid rgba(255,255,255,.22)}.seat-emoji{font-size:2rem;line-height:1}.seat-name{max-width:100%;overflow:hidden;font-size:.95rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.seat strong{color:#f0c95a;font-size:.78rem;text-transform:uppercase}.active-seat{background:#ffffff1a;transform:translateY(-2px)}.muted{opacity:.55}.table{display:grid;grid-template-rows:auto 1fr;gap:28px;padding:clamp(22px,4vw,54px);color:#fff}.round-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.round-header h2{margin:0;font-size:clamp(1.45rem,2.8vw,2.25rem);line-height:1;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}.room-entering .round-header h2{animation:status-enter .32s var(--ease-out) both}.room-entering .header-actions{animation:actions-enter .32s var(--ease-out) both}.eyebrow{margin:0;color:#d4492e;font-size:.78rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.brand-panel .eyebrow{color:#f0c95a}.center-stage,.play-panel,.reveal{display:grid;align-content:center;gap:28px;min-height:58vh}.phase-entering .center-stage>*,.phase-entering .play-panel>*,.phase-entering .reveal>*{animation:content-enter .26s var(--ease-out) both}.big-copy{max-width:700px;margin:0;color:#ffffffd1;font-size:clamp(1.3rem,3vw,2.4rem);line-height:1.24}.speech-row{display:flex;align-items:end;gap:14px;max-width:min(100%,720px)}.speech-emoji{display:grid;width:68px;height:68px;flex:0 0 auto;place-items:center;border-radius:50%;background:#fff;font-size:2.3rem;box-shadow:0 18px 40px #02122d29;animation:pop-in .3s var(--spring) both}.speech-bubble{position:relative;margin:0;border-radius:1.25rem 1.25rem 1.25rem .35rem;padding:18px 22px;color:#02122d;background:#fff;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:900;line-height:1.25;box-shadow:0 18px 40px #02122d29;animation:bubble-in .26s var(--ease-out) both}.typing-bubble{display:inline-flex;align-items:center;gap:7px;min-width:96px;min-height:64px}.typing-bubble span{width:10px;height:10px;border-radius:50%;background:#02122d;animation:typing-dot 1s infinite ease-in-out}.typing-bubble span:nth-child(2){animation-delay:.15s}.typing-bubble span:nth-child(3){animation-delay:.3s}@keyframes typing-dot{0%,80%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}.spectrum-labels{display:grid;grid-template-columns:1fr 1fr;gap:16px;color:#fff;font-size:clamp(1.3rem,3.2vw,3.6rem);font-weight:900;line-height:1.02}.spectrum-labels span:last-child{text-align:right}.range{width:100%;height:44px;border:0;padding:0;appearance:none;background:transparent;cursor:pointer;accent-color:#02122d;transition:transform .16s var(--ease-out)}.range:hover{transform:scaleY(1.04)}.range::-webkit-slider-runnable-track{height:16px;border-radius:999px;background:#ffffffeb}.range::-webkit-slider-thumb{width:34px;height:34px;margin-top:-9px;border:4px solid #fff;border-radius:50%;appearance:none;background:#02122d;box-shadow:0 10px 24px #02122d40;transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out)}.range:active::-webkit-slider-thumb{transform:scale(1.08)}.range::-moz-range-track{height:16px;border-radius:999px;background:#ffffffeb}.range::-moz-range-thumb{width:26px;height:26px;border:4px solid #fff;border-radius:50%;background:#02122d;box-shadow:0 10px 24px #02122d40}.clue-entry input{min-height:58px;border:0;border-radius:1.25rem;padding:16px 28px;color:#02122d;background:#fff;font-weight:900;text-align:center}.clue-entry input::placeholder{color:#02122d8c}#start-round,#next-round,.play-panel button,.reveal button{min-height:58px;border-radius:1.25rem;padding:16px 28px;color:#fff;background:#02122d;font-weight:900}#start-round:hover,#next-round:hover,.play-panel button:hover,.reveal button:hover{background:#041a42}.center-stage>button{justify-self:start}.clue-speech{max-width:min(100%,820px)}.clue-speech .speech-bubble{font-size:clamp(1.2rem,2.6vw,2rem)}.live-slider{position:relative;display:grid;min-height:72px;align-items:center;padding:0;animation:content-enter .24s var(--ease-out) both}.live-range{pointer-events:none}.live-range:disabled{opacity:1}.marker-layer{position:absolute;inset:0 17px;pointer-events:none}.range{padding:0;accent-color:#02122d}.play-panel button,.reveal button{justify-self:start}.clue{width:fit-content;max-width:100%;margin:0;border-left:6px solid #d4492e;padding:12px 18px;color:#18201f;background:#fffaf1;font-size:clamp(1.2rem,3vw,2.2rem);font-weight:900}.marker{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;min-width:38px;height:38px;place-items:center;border:3px solid rgba(2,18,45,.12);border-radius:50%;color:#02122d;background:#fff;font-size:1.2rem;font-weight:800;box-shadow:0 10px 24px #02122d38;transition:left .26s var(--ease-out),opacity .18s var(--ease-out),transform .18s var(--ease-out),box-shadow .18s var(--ease-out);animation:marker-enter .22s var(--spring) both}.marker.guess:not(.submitted){opacity:.9}.marker.target{top:56px;width:auto;min-width:76px;height:auto;border-radius:999px;padding:8px 12px;color:#fff;background:#02122d;font-size:.82rem}@keyframes shell-enter{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes entry-fields-in{0%{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}@keyframes entry-buttons-settle{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes entry-choice-return{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes status-enter{0%{opacity:0;transform:translate(-28px)}to{opacity:1;transform:translate(0)}}@keyframes actions-enter{0%{opacity:0;transform:translate(28px)}to{opacity:1;transform:translate(0)}}@keyframes players-enter{0%{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}@keyframes content-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes controls-enter{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes bubble-in{0%{opacity:0;transform:translate(-8px) scale(.98)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes pop-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes marker-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes seat-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:820px){#app{padding:1rem}.entry-shell{min-height:calc(100vh - 2rem);border-radius:20px}.join-panel{right:24px;bottom:24px;left:24px;width:auto}.game-shell{min-height:calc(100vh - 2rem);border-radius:20px}.player-bar{min-height:104px}.round-header{align-items:stretch;flex-direction:column}.header-actions{justify-content:start}.entry-actions,.spectrum-labels{grid-template-columns:1fr}.identity-row{grid-template-columns:64px minmax(0,1fr)}.spectrum-labels span:last-child{text-align:left}.speech-row{align-items:start;flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
