:root{--play-cream: #f8f3e9;--play-forest: #28362f;--play-sage: #ebe3d4;--play-gold: #9a7145;--play-surface: #fffdf8;color:var(--play-forest);background:var(--play-cream);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none}.play-theme-minimal-ivory{--play-cream: #f8f3e9;--play-forest: #28362f;--play-sage: #ebe3d4;--play-gold: #9a7145}.play-theme-serene-garden{--play-cream: #edf0e5;--play-forest: #244036;--play-sage: #dce5d5;--play-gold: #8d7044}.play-theme-songket-emerald{--play-cream: #f7f0df;--play-forest: #123a32;--play-sage: #e9dfc7;--play-gold: #b78a3f}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--play-cream)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:4px solid var(--play-gold);outline-offset:3px}.join-shell,.connection-screen,.participant-shell,.host-shell{color:var(--play-forest);background:radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--play-sage) 78%,transparent),transparent 27rem),radial-gradient(circle at 92% 90%,color-mix(in srgb,var(--play-gold) 18%,transparent),transparent 30rem),linear-gradient(145deg,color-mix(in srgb,var(--play-cream) 92%,white),var(--play-cream))}.brand{display:flex;align-items:center;gap:.7rem;font-size:1.05rem;letter-spacing:-.02em}.brand-mark{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:var(--play-forest);color:#fff;font-weight:900;box-shadow:0 8px 24px color-mix(in srgb,var(--play-forest) 24%,transparent)}.brand strong{display:block}.brand em{display:block;margin-top:.15rem;color:var(--play-gold);font-size:.6rem;font-style:normal;letter-spacing:.16em}.join-shell,.connection-screen{position:relative;display:grid;min-height:100svh;place-items:center;overflow:hidden;padding:1rem}.join-card{position:relative;z-index:1;width:min(100%,31rem);padding:clamp(1.5rem,5vw,3rem);border:1px solid color-mix(in srgb,var(--play-forest) 12%,transparent);border-radius:2rem;background:color-mix(in srgb,var(--play-surface) 92%,var(--play-cream));box-shadow:0 35px 100px color-mix(in srgb,var(--play-forest) 18%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.join-card h1,.waiting-card h1,.podium h1{margin:.45rem 0;font-size:clamp(2.3rem,8vw,4rem);line-height:.98;letter-spacing:-.055em}.eyebrow{margin:2rem 0 0;color:var(--play-gold);font-size:.72rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase}.lede{color:color-mix(in srgb,var(--play-forest) 66%,transparent);line-height:1.6}.join-card form{display:grid;gap:1rem;margin-top:2rem}.join-card label{display:grid;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.join-card input{min-height:3.8rem;border:2px solid color-mix(in srgb,var(--play-forest) 14%,transparent);border-radius:1rem;background:#fff;padding:0 1rem;color:var(--play-forest);font-size:1.15rem;font-weight:800}.primary-button{min-height:3.8rem;border:0;border-radius:1rem;background:var(--play-forest);color:#fff;font-weight:900;box-shadow:0 12px 30px color-mix(in srgb,var(--play-forest) 24%,transparent)}.primary-button:disabled{opacity:.6;cursor:wait}.privacy-note{margin:1.5rem 0 0;color:color-mix(in srgb,var(--play-forest) 45%,transparent);font-size:.76rem;text-align:center}.error{border:1px solid #c95c6c;border-radius:.8rem;background:#8f2339;padding:.8rem;color:#fff}.floating-shape{position:absolute;color:color-mix(in srgb,var(--play-gold) 12%,transparent);font-size:18rem;animation:float 8s ease-in-out infinite}.shape-one{left:-4rem;top:-5rem}.shape-two{right:-2rem;bottom:-6rem;animation-delay:-3s}@keyframes float{50%{transform:translateY(1rem) rotate(8deg)}}.participant-shell,.host-shell{min-height:100svh;padding:clamp(1rem,3vw,2rem)}.participant-shell>header,.host-shell>header{display:flex;max-width:90rem;align-items:center;justify-content:space-between;gap:1rem;margin:auto}.connection{display:inline-flex;align-items:center;gap:.4rem;border:1px solid color-mix(in srgb,var(--play-forest) 14%,transparent);border-radius:999px;background:color-mix(in srgb,white 54%,transparent);padding:.55rem .75rem;color:var(--play-forest);font-size:.72rem;text-transform:capitalize}.connection svg{width:1rem}.connection.reconnecting{color:#8a6500}.waiting-card{width:min(100%,45rem);margin:clamp(4rem,15vh,9rem) auto;text-align:center}.waiting-card>svg{color:var(--play-gold)}.waiting-card p{color:color-mix(in srgb,var(--play-forest) 60%,transparent);font-size:1.1rem}.waiting-card strong{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;border-radius:999px;background:color-mix(in srgb,var(--play-sage) 72%,white);padding:.8rem 1.1rem}.pulse-orb{display:block;width:4rem;height:4rem;margin:auto;border-radius:50%;background:var(--play-gold);box-shadow:0 0 color-mix(in srgb,var(--play-gold) 44%,transparent);animation:pulse 1.8s infinite}@keyframes pulse{70%{box-shadow:0 0 0 2rem transparent}}.question-stage,.host-question{width:min(100%,72rem);margin:clamp(2rem,7vh,5rem) auto}.question-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:color-mix(in srgb,var(--play-forest) 64%,transparent);font-weight:800}.question-stage h1,.host-question h1{max-width:60rem;margin:1.2rem auto 2rem;color:var(--play-forest);font-size:clamp(2rem,6vw,4.5rem);line-height:1.04;letter-spacing:-.045em;text-align:center}.countdown{display:grid;width:3.6rem;height:3.6rem;place-items:center;border:4px solid var(--play-gold);border-radius:50%;background:color-mix(in srgb,white 56%,transparent);color:var(--play-forest);font-size:1.15rem;font-weight:900}.start-countdown{width:5rem;height:5rem;background:var(--play-gold);color:#fff;font-size:2rem}.answer-grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}.answer-card{position:relative;display:grid;min-height:6.8rem;grid-template-columns:auto auto 1fr;align-items:center;gap:.8rem;overflow:hidden;border:3px solid transparent;border-radius:1.15rem;padding:1rem;color:#fff;text-align:left;box-shadow:0 14px 30px #0805142e;transition:transform .16s,opacity .16s,border-color .16s}button.answer-card:hover:not(:disabled){transform:translateY(-3px)}.answer-card:disabled{cursor:default}.answer-card:disabled:not(.correct):not(.wrong){opacity:.72}.answer-a{background:#d84a5d}.answer-b{background:#2d55bd}.answer-c{background:#b77b00}.answer-d{background:#087e70}.answer-symbol{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.7rem;background:#0002;font-size:1.5rem}.answer-letter{font-weight:900}.answer-card>span:last-child{font-size:clamp(.95rem,2.4vw,1.25rem);font-weight:800}.answer-card.correct{border-color:#a8ffc5;box-shadow:0 0 0 5px #58e58d44}.answer-card.wrong{opacity:.55;border-color:#fff}.submission,.result-callout{display:flex;width:fit-content;align-items:center;gap:.8rem;margin:1.4rem auto 0;border-radius:999px;background:var(--play-forest);padding:.85rem 1.15rem;color:#fff;font-weight:800}.result-callout strong,.result-callout small{display:block}.result-callout small{margin-top:.15rem;color:#ffffffb0}.is-correct{background:#0c7669}.is-wrong{background:#95324a}.explanation{max-width:45rem;margin:1rem auto;border-left:4px solid var(--play-gold);padding:.5rem 1rem;color:color-mix(in srgb,var(--play-forest) 72%,transparent);line-height:1.6}.reconnect-banner,.observer-banner,.banner{width:fit-content;margin:1rem auto;border-radius:999px;background:#8a6500;padding:.7rem 1rem;color:#fff;font-weight:800}.host-actions{display:flex;align-items:center;gap:.7rem}.host-actions button{display:grid;width:2.8rem;height:2.8rem;place-items:center;border:1px solid color-mix(in srgb,var(--play-forest) 14%,transparent);border-radius:.7rem;background:color-mix(in srgb,white 64%,transparent);color:var(--play-forest)}.presentation{display:grid;min-height:calc(100vh - 10rem);align-items:center}.lobby-layout{display:grid;width:min(100%,75rem);grid-template-columns:1.3fr .7fr;align-items:center;gap:4rem;margin:auto}.lobby-layout h1{margin:.6rem 0 2rem;font-size:clamp(3rem,7vw,6.8rem);line-height:.9;letter-spacing:-.06em}.join-at{color:color-mix(in srgb,var(--play-forest) 66%,transparent);font-size:1.2rem}.game-pin{margin:.4rem 0;color:var(--play-gold);font-size:clamp(4rem,10vw,8rem);font-weight:950;letter-spacing:.1em;line-height:1}.participant-total{display:flex;align-items:center;gap:.6rem;font-size:1.25rem;font-weight:800}.qr-panel{display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--play-forest) 10%,transparent);border-radius:2rem;background:#fff;padding:2rem;color:var(--play-forest);box-shadow:0 24px 70px color-mix(in srgb,var(--play-forest) 14%,transparent)}.qr-panel span{margin-top:1rem;font-weight:900}.lobby-closed{max-width:32rem;color:color-mix(in srgb,var(--play-forest) 60%,transparent);font-size:1.3rem}.answer-count{color:var(--play-forest);text-align:center;font-weight:900}.control-dock{position:fixed;z-index:10;right:1rem;bottom:1rem;left:1rem;display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;border:1px solid color-mix(in srgb,white 15%,transparent);border-radius:1.2rem;background:color-mix(in srgb,var(--play-forest) 94%,transparent);padding:.7rem;box-shadow:0 18px 50px color-mix(in srgb,var(--play-forest) 22%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.control-dock button{display:inline-flex;min-height:2.8rem;align-items:center;gap:.45rem;border:0;border-radius:.75rem;background:var(--play-cream);padding:.7rem 1rem;color:var(--play-forest);font-weight:900}.control-dock button:disabled{opacity:.35}.podium{position:relative;width:min(100%,64rem);margin:auto;text-align:center}.trophy{width:4rem;height:4rem;color:var(--play-gold);filter:drop-shadow(0 0 20px color-mix(in srgb,var(--play-gold) 48%,transparent))}.podium .eyebrow{margin-top:1rem}.podium:before{position:absolute;inset:-3rem 0 auto;height:9rem;content:"";pointer-events:none;background:radial-gradient(circle,var(--play-gold) 0 3px,transparent 4px) 4% 15%/3rem 3rem,radial-gradient(circle,#d84a5d 0 4px,transparent 5px) 82% 20%/4rem 4rem,radial-gradient(circle,#2d55bd 0 3px,transparent 4px) 40% 70%/3.5rem 3.5rem;animation:celebrate 1.8s ease-in-out infinite alternate}.participant-names{display:flex;max-width:42rem;flex-wrap:wrap;gap:.4rem;margin-top:1rem}.participant-names span{border-radius:999px;background:color-mix(in srgb,var(--play-sage) 76%,white);padding:.35rem .65rem;font-size:.8rem;font-weight:800}@keyframes celebrate{0%{transform:translateY(-.5rem) rotate(-1deg);opacity:.55}to{transform:translateY(.5rem) rotate(1deg);opacity:1}}.podium-grid{display:flex;min-height:18rem;align-items:end;justify-content:center;gap:.7rem;margin-top:2rem}.podium-place{position:relative;display:flex;width:30%;min-width:8rem;flex-direction:column;justify-content:center;border:1px solid color-mix(in srgb,var(--play-forest) 10%,transparent);border-radius:1rem 1rem 0 0;background:color-mix(in srgb,var(--play-sage) 72%,white);padding:1rem}.podium-place span{font-size:2rem;font-weight:950}.podium-place strong{margin-top:.5rem;font-size:1.25rem}.podium-place small{color:color-mix(in srgb,var(--play-forest) 58%,transparent)}.podium-place i{color:var(--play-gold);font-style:normal;font-size:2rem}.place-1{min-height:17rem;background:linear-gradient(color-mix(in srgb,var(--play-gold) 70%,white),var(--play-gold));color:#fff}.place-1 small{color:#ffffffb8}.place-2{min-height:13rem}.place-3{min-height:10rem;background:color-mix(in srgb,var(--play-gold) 28%,var(--play-sage))}.personal-result{font-size:1.2rem}.connection-screen{align-content:center;gap:1rem;text-align:center}.connection-screen .brand{justify-content:center}.connection-screen h1{font-size:clamp(1.5rem,5vw,2.5rem)}.spinner{width:3rem;height:3rem;margin:2rem auto 0;border:5px solid color-mix(in srgb,var(--play-forest) 14%,transparent);border-top-color:var(--play-gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:720px){.answer-grid{grid-template-columns:1fr}.answer-card{min-height:5.5rem}.lobby-layout{grid-template-columns:1fr;gap:2rem;text-align:center}.participant-total{justify-content:center}.qr-panel{display:none}.host-answers{grid-template-columns:repeat(2,minmax(0,1fr))}.control-dock{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap}.control-dock button{flex:0 0 auto}.participant-shell>header .brand strong{font-size:.85rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}