:root{--orange-core: #ff9a3d;--orange-mid: #ffb765;--orange-edge: #ffe6c9;--ink: #6b3410;--font-playful: "Comic Sans MS", "Chalkboard SE", "Comic Relief", cursive}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(ellipse 90% 80% at 50% 45%,var(--orange-edge) 0%,var(--orange-mid) 62%,var(--orange-core) 100%);color:var(--ink);font-family:var(--font-playful)}button,input,select,textarea{font-family:inherit}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;--edge: 1.5rem;padding:2rem var(--edge);text-align:center}.avatar{width:clamp(10rem,38vw,17rem);aspect-ratio:1;border-radius:50%;border:6px solid rgba(255,255,255,.85);background:#ffffff59;box-shadow:0 1.25rem 2.5rem #8c3c0a38;display:grid;place-items:center;overflow:hidden}.avatar img{grid-area:1 / 1;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .18s ease-in-out}.avatar img.is-active{opacity:1}@media(prefers-reduced-motion:reduce){.avatar img{transition:none}}.title{margin:0;font-family:var(--font-playful);font-size:clamp(2.75rem,11vw,5.5rem);white-space:nowrap;font-weight:700;line-height:1.05;letter-spacing:.02em;color:#e0651a;text-shadow:0 .15rem 0 rgba(255,255,255,.7),0 .6rem 1.5rem rgba(140,60,10,.18)}@keyframes avatar-pop{0%{transform:scale(1)}35%{transform:scale(1.05)}to{transform:scale(1)}}.avatar.is-popping{animation:avatar-pop .3s ease-out}@keyframes title-wobble{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-3.5deg) scale(1.09)}35%{transform:rotate(2.8deg) scale(1.07)}55%{transform:rotate(-2deg) scale(1.05)}72%{transform:rotate(1.2deg) scale(1.03)}87%{transform:rotate(-.5deg) scale(1.01)}to{transform:rotate(0) scale(1)}}@keyframes title-bounce{0%{transform:translateY(0) scale(1)}18%{transform:translateY(-14%) scale(.96,1.1)}42%{transform:translateY(2%) scale(1.08,.92)}62%{transform:translateY(-5%) scale(.99,1.04)}82%{transform:translateY(1%) scale(1.02,.98)}to{transform:translateY(0) scale(1)}}@keyframes title-swing{0%{transform:rotate(0)}20%{transform:rotate(6deg)}45%{transform:rotate(-4.5deg)}67%{transform:rotate(2.5deg)}85%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes title-pulse{0%{transform:scale(1)}22%{transform:scale(1.12)}44%{transform:scale(1.01)}64%{transform:scale(1.06)}to{transform:scale(1)}}.title.is-wobbling{animation:title-wobble .7s ease-in-out}.title.is-bouncing{animation:title-bounce .75s cubic-bezier(.28,.84,.42,1)}.title.is-swinging{transform-origin:top center;animation:title-swing .85s ease-in-out}.title.is-pulsing{animation:title-pulse .6s ease-in-out}.play{margin-top:1.5rem;padding:.9rem 3rem;border:none;border-radius:999px;background:#ff8a2b;color:#fff;font-family:var(--font-playful);font-size:1.4rem;font-weight:700;letter-spacing:.03em;cursor:pointer;box-shadow:0 .5rem 1.25rem #8c3c0a40;transition:transform .15s ease,box-shadow .15s ease}.not-running{margin:1.5rem 0 0;padding:.9rem 2rem;font-family:var(--font-playful);font-size:1.4rem;font-weight:700;letter-spacing:.03em;color:#b4560f;text-align:center}.play:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 .75rem 1.75rem #8c3c0a4d}.play:active{transform:translateY(1px) scale(.99)}.play:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:4px}@media(prefers-reduced-motion:reduce){.play{transition:none}}.play:disabled{opacity:.65;cursor:progress}.play.is-loading{position:relative;color:transparent;opacity:1}.play.is-loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:1.5rem;height:1.5rem;margin:auto;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.warn{max-width:min(24rem,88vw);padding:2rem 1.75rem 1.5rem;border:none;border-radius:1.5rem;background:#fff;color:var(--ink);text-align:center;box-shadow:0 1.5rem 3rem #8c3c0a4d}.warn::backdrop{background:#78370a73}.warn-text{margin:0 0 1.5rem;font-family:var(--font-playful);font-size:1.25rem;line-height:1.4}.warn-close{padding:.7rem 2.5rem;border:none;border-radius:999px;background:#ff8a2b;color:#fff;font-family:var(--font-playful);font-size:1.15rem;cursor:pointer}.team{max-width:min(24rem,88vw);padding:2rem 1.75rem 1.5rem;border:none;border-radius:1.5rem;background:#fff;color:var(--ink);text-align:center;box-shadow:0 1.5rem 3rem #8c3c0a4d}.team::backdrop{background:#78370a73}.team-form{display:flex;flex-direction:column;gap:1rem}.team-label{margin:0;font-family:var(--font-playful);font-size:1.35rem}.team-avatar{position:relative;display:grid;place-items:center;align-self:center;width:8rem;height:8rem;padding:0;border:3px dashed #ffc79a;border-radius:50%;background:#fff8f1;cursor:pointer;overflow:hidden}.team-avatar.has-image{border-style:solid;border-color:#ff8a2b}.team-avatar img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.team-avatar svg{width:40%;height:40%;margin-bottom:.6rem;stroke:#e0651ab3;stroke-width:1.75;stroke-linecap:round;fill:none}.team-avatar-hint{position:absolute;bottom:1.15rem;font-size:.75rem;color:#6b3410b3}.team-avatar.has-image svg,.team-avatar.has-image .team-avatar-hint{display:none}.team-avatar:focus-visible{outline:3px solid #ff8a2b;outline-offset:3px}.team-input{padding:.75rem 1rem;border:2px solid #ffc79a;border-radius:.9rem;background:#fff8f1;color:var(--ink);font-family:var(--font-playful);font-size:1.2rem;text-align:center}.team-input:focus{outline:none;border-color:#ff8a2b}.team-error{margin:0;min-height:1.25rem;font-size:.9rem;color:#b3391a}.team-error:empty{min-height:0}.team-submit{padding:.75rem 2.5rem;border:none;border-radius:999px;background:#ff8a2b;color:#fff;font-family:var(--font-playful);font-size:1.2rem;cursor:pointer}.team-submit:disabled{opacity:.65;cursor:progress}@media(max-width:640px){#app{--edge: .75rem;gap:1rem}.avatar{width:82%;max-width:none}.play{margin-top:1rem;padding:1rem 3.5rem;font-size:1.5rem}}