@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg-start: #0a0e1a;--bg-mid: #111b2e;--bg-end: #162040;--panel: rgba(22, 30, 48, .72);--panel2: rgba(32, 44, 66, .68);--panel-border: rgba(255, 255, 255, .08);--panel-glow: rgba(255, 255, 255, .04);--ink: #f0f4f8;--muted: #8b9cb7;--accent: #ffd166;--accent-glow: rgba(255, 209, 102, .25);--blue: #4cc9f0;--green: #52e07a;--orange: #f4a261;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px}html{scroll-behavior:smooth}body{background:var(--bg-start);background:linear-gradient(160deg,var(--bg-start) 0%,var(--bg-mid) 40%,var(--bg-end) 100%);background-attachment:fixed;color:var(--ink);font-family:Outfit,Inter,system-ui,-apple-system,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 600px 400px at 20% 30%,rgba(76,201,240,.06),transparent),radial-gradient(ellipse 500px 500px at 80% 70%,rgba(255,209,102,.05),transparent),radial-gradient(ellipse 400px 300px at 50% 50%,rgba(82,224,122,.03),transparent);animation:ambientShift 20s ease-in-out infinite alternate;pointer-events:none;z-index:0}@keyframes ambientShift{0%{opacity:1}50%{opacity:.6}to{opacity:1}}.screen{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:32px 24px}.muted{color:var(--muted)}.err{color:#ff6b6b;font-size:14px;font-weight:600}button{cursor:pointer;font-family:inherit}.big{background:linear-gradient(135deg,#ffe08a,#ffd166,#f0b93f);color:#1a1e28;border:0;padding:16px 32px;border-radius:var(--radius-sm);font-size:18px;font-weight:800;letter-spacing:.3px;box-shadow:0 4px 16px #ffd16659,inset 0 1px #ffffff4d;transition:transform .2s ease,box-shadow .2s ease}.big:hover{transform:translateY(-3px);box-shadow:0 8px 24px #ffd16673,inset 0 1px #ffffff4d}.big:active{transform:translateY(0)}.link{background:none;border:0;color:var(--blue);font-size:15px;font-weight:600;transition:color .2s}.link:hover{color:#7dd8f5}.login{justify-content:center}.login-card{background:var(--panel);padding:44px 40px;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:18px;width:380px;max-width:100%;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--panel-border);box-shadow:0 24px 48px #00000059,0 0 0 1px #ffffff08,inset 0 1px #ffffff0f;align-items:center;animation:cardEnter .5s cubic-bezier(.34,1.56,.64,1)}@keyframes cardEnter{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.login-card h1{font-size:28px;letter-spacing:-.5px;text-align:center;font-weight:800;background:linear-gradient(135deg,#fff,#d4ddf0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-card input{background:var(--panel2);border:1px solid rgba(255,255,255,.06);color:var(--ink);padding:16px;border-radius:var(--radius-sm);font-size:15px;transition:border-color .2s,box-shadow .2s;width:100%}.login-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #4cc9f026}.login-card input::placeholder{color:var(--muted);opacity:.7}.login-avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;border:4px solid var(--accent);box-shadow:0 8px 28px #ffd1664d,0 0 0 8px #ffd16614;animation:avatarPulse 3s ease-in-out infinite}@keyframes avatarPulse{0%,to{box-shadow:0 8px 28px #ffd1664d,0 0 0 8px #ffd16614}50%{box-shadow:0 8px 28px #ffd16666,0 0 0 12px #ffd1661f}}.login-form{display:flex;flex-direction:column;gap:14px;width:100%}.hint{color:var(--muted);font-size:12px;text-align:center;opacity:.7}.workshop header{width:100%;max-width:900px;display:flex;justify-content:space-between;align-items:center;background:var(--panel);padding:16px 24px;border-radius:var(--radius-lg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);box-shadow:0 12px 32px #0003,inset 0 1px #ffffff0d;margin-bottom:12px}.workshop h1{font-size:26px;letter-spacing:-.5px;font-weight:800}.workshop h2{align-self:flex-start;margin:32px 0 16px;max-width:900px;width:100%;font-size:20px;color:var(--ink);font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}.workshop h2:before{content:"";display:inline-block;width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--orange))}.gears-total{color:var(--accent);font-weight:800;font-size:20px;background:#ffd1661a;padding:10px 20px;border-radius:var(--radius-sm);border:1px solid rgba(255,209,102,.12);display:flex;align-items:center;gap:6px;white-space:nowrap}.cards{display:flex;gap:20px;flex-wrap:wrap;width:100%;max-width:900px}.card{flex:1 1 240px;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:10px;text-align:left;color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px #00000026,inset 0 1px 0 var(--panel-glow);transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-md);background:linear-gradient(135deg,transparent 60%,rgba(255,209,102,.04) 100%);pointer-events:none;opacity:0;transition:opacity .25s}.card:hover:after{opacity:1}.card:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:0 20px 40px #ffd1661f,0 0 0 1px #ffd16626}.card-soon{opacity:.5;filter:grayscale(.6)}.card-soon:hover{transform:none;border-color:var(--panel-border);box-shadow:0 8px 24px #00000026}.card-soon:hover:after{opacity:0}.card-machine{font-size:22px;font-weight:800;letter-spacing:-.5px}.card-strand{font-size:13px;color:var(--muted);font-weight:600}.card-tag{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.8px}.card-soon .card-tag{color:var(--muted)}.card-art{width:100%;height:110px;object-fit:contain;margin-bottom:6px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));transition:transform .3s ease}.card:hover .card-art{transform:scale(1.08)}.content-layout{display:flex;gap:28px;width:100%;max-width:900px;align-items:flex-start;flex-wrap:wrap}.main-column{flex:1;min-width:300px;display:flex;flex-direction:column}.side-column{width:300px;display:flex;flex-direction:column;flex-shrink:0}.garage{display:flex;gap:16px;flex-wrap:wrap;width:100%}.garage-item{background:var(--panel2);border-radius:var(--radius-md);padding:18px;display:flex;gap:14px;align-items:center;flex:1 1 200px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);transition:transform .2s,background .2s,box-shadow .2s;box-shadow:0 4px 12px #0000001a}.garage-item:hover{transform:translateY(-3px);background:#2d3c50cc;box-shadow:0 8px 20px #00000026}.garage-art{width:64px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}.top-builders-heading{margin-top:32px}.leaderboard{background:var(--panel);border-radius:var(--radius-lg);padding:20px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);box-shadow:0 12px 32px #0003,inset 0 1px #ffffff0a;display:flex;flex-direction:column;gap:10px}.leader-row{display:flex;align-items:center;justify-content:space-between;background:var(--panel2);padding:14px 16px;border-radius:var(--radius-sm);transition:transform .2s,background .2s;border:1px solid transparent;position:relative}.leader-row.is-user{background:linear-gradient(135deg,#ffd1662e,#ffd16614);border-color:#ffd16640}.leader-row:hover{transform:scale(1.02)}.leader-info{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}.leader-rank{color:var(--muted);font-size:13px;font-weight:800;min-width:28px}.leader-score{color:var(--accent);font-weight:800;display:flex;align-items:center;gap:4px;font-size:15px}.leader-score span{font-size:12px}.celebration-banner{background:linear-gradient(135deg,#ffd16633,#ffd1660f);border:2px solid rgba(255,209,102,.4);border-radius:var(--radius-md);padding:20px;margin-bottom:16px;display:flex;align-items:center;gap:16px;animation:celebratePop .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 24px var(--accent-glow);position:relative;overflow:hidden}.celebration-banner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(45deg,transparent 40%,rgba(255,209,102,.06) 50%,transparent 60%);animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes celebratePop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.celebration-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);position:relative;z-index:1;box-shadow:0 4px 16px var(--accent-glow)}.celebration-text{position:relative;z-index:1}.celebration-text h3{margin:0 0 4px;color:var(--accent);font-size:18px;font-weight:800}.celebration-text p{margin:0;font-size:14px;color:var(--ink);line-height:1.4;font-weight:600}.host-row{display:flex;align-items:center;gap:14px}.host-mascot{width:120px;height:auto;flex-shrink:0;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}.host-mascot.host-sm{width:80px}.host-banner{display:flex;align-items:center;gap:16px;width:100%;max-width:900px;margin-top:16px;background:var(--panel);border-radius:var(--radius-lg);padding:14px 22px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:0 8px 24px #00000026,inset 0 1px #ffffff0a}.speech{position:relative;background:#fffcf0;color:#1a1e28;border-radius:16px;padding:14px 20px;font-size:16px;font-weight:700;line-height:1.4;box-shadow:0 4px 14px #0000001f}.speech:before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);border:10px solid transparent;border-right-color:#fffcf0;border-left:0}.who{display:flex;align-items:center;gap:16px}.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);box-shadow:0 4px 14px #ffd16633}.avatar-small{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.15)}.leader-row.is-user .avatar-small{border-color:var(--accent)}.avatar.avatar-sm{width:42px;height:42px;border-width:2px}.build{gap:16px;width:100%}.hud{display:flex;align-items:center;gap:14px;width:100%;max-width:720px;background:var(--panel);padding:14px 20px;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:0 8px 20px #00000026}.hud strong{font-size:18px;font-weight:800}.gearbar{flex:1;height:14px;background:#00000059;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.gearbar-fill{height:100%;background:linear-gradient(90deg,#ffe08a,#ffd166,#f0b93f);border-radius:8px;transition:width .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 8px #ffd16666}.phaser-host{width:100%;max-width:720px;aspect-ratio:720 / 460;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 48px #00000073;border:1px solid var(--panel-border)}.phaser-host canvas{display:block;width:100%!important;height:100%!important;object-fit:contain;border-radius:var(--radius-lg)}.flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#52e07a,#38b05a);color:#06202e;font-size:34px;font-weight:900;padding:22px 44px;border-radius:var(--radius-lg);animation:pop .85s cubic-bezier(.34,1.56,.64,1);box-shadow:0 20px 48px #52e07a73;z-index:100}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}25%{transform:translate(-50%,-50%) scale(1.12);opacity:1}75%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.05);opacity:0}}.done-card{background:var(--panel);padding:44px;border-radius:var(--radius-lg);text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--panel-border);box-shadow:0 24px 48px #00000059,inset 0 1px #ffffff0f;animation:cardEnter .5s cubic-bezier(.34,1.56,.64,1)}.done-card h2{font-size:24px;font-weight:800}.build-host{max-width:720px;width:100%;margin-top:4px}.celebrate-photo{max-width:340px;max-height:320px;width:auto;height:auto;border-radius:var(--radius-md);border:6px solid var(--accent);object-fit:cover;box-shadow:0 20px 48px #ffd1664d}.photo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px;width:100%;max-width:900px;margin-bottom:40px;background:var(--panel);border-radius:var(--radius-lg);padding:28px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:0 12px 32px #0003,inset 0 1px #ffffff0a}.frame{background:#fffcf0;padding:8px 8px 28px;border-radius:6px;box-shadow:0 6px 20px #00000040;cursor:pointer;position:relative;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;animation:frameIn .5s ease backwards}.frame:nth-child(1){animation-delay:.05s}.frame:nth-child(2){animation-delay:.1s}.frame:nth-child(3){animation-delay:.15s}.frame:nth-child(4){animation-delay:.2s}.frame:nth-child(5){animation-delay:.25s}.frame:nth-child(6){animation-delay:.3s}.frame:nth-child(7){animation-delay:.35s}.frame:nth-child(8){animation-delay:.4s}.frame:nth-child(9){animation-delay:.45s}.frame:nth-child(10){animation-delay:.5s}.frame:nth-child(11){animation-delay:.55s}@keyframes frameIn{0%{opacity:0;transform:translateY(16px) rotate(0) scale(.9)}to{opacity:1}}.frame:nth-child(odd){transform:rotate(-3deg)}.frame:nth-child(2n){transform:rotate(2.5deg)}.frame:nth-child(3n){transform:rotate(-1deg)}.frame:nth-child(4n){transform:rotate(4deg)}.frame:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:40px;height:14px;background:#ffd16680;border-radius:2px;box-shadow:0 1px 3px #00000026;z-index:2}.frame:nth-child(2n):before{background:#4cc9f073;transform:translate(-50%) rotate(-5deg)}.frame:nth-child(3n):before{background:#52e07a73;width:44px}.frame:hover{transform:rotate(0) scale(1.1) translateY(-6px);z-index:10;box-shadow:0 20px 40px #00000059}.frame img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}.frame-caption{display:block;text-align:center;color:#5a5a6e;font-size:11px;font-weight:700;margin-top:8px;font-family:Outfit,cursive;letter-spacing:.3px}.garage-photo{background:#fffcf0;padding:8px 8px 6px;border-radius:12px;display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 20px #00000059;transform:rotate(-3deg)}.garage-photo img{width:100px;height:126px;object-fit:cover;border-radius:6px}.garage-photo span{color:#1a1e28;font-size:13px;font-weight:800;margin-top:4px}@media (max-width: 768px){.screen{padding:20px 16px}.workshop header{flex-direction:column;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--radius-md)}.workshop h1{font-size:22px}.workshop h2{margin:24px 0 12px;font-size:18px}.gears-total{font-size:17px;padding:8px 14px}.content-layout{flex-direction:column-reverse;gap:0;align-items:stretch}.main-column{width:100%}.side-column{width:100%;margin-bottom:16px}.top-builders-heading{margin-top:0}.cards{gap:14px;flex-direction:column}.card{padding:20px;border-radius:var(--radius-sm)}.card-machine{font-size:18px}.login-card{padding:32px 28px;width:100%}.login-avatar{width:100px;height:100px}.host-banner{padding:10px 14px;border-radius:var(--radius-md)}.host-mascot{width:90px}.host-mascot.host-sm{width:64px}.speech{font-size:14px;padding:10px 14px}.hud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px}.hud button{grid-column:1 / -1;justify-self:flex-start;margin-bottom:4px}.hud .gearbar{grid-column:1 / 3;width:100%;margin-top:4px}.hud span{grid-column:3;justify-self:flex-end;margin-top:4px;font-size:13px}.photo-wall{gap:16px;padding:20px;grid-template-columns:1fr;justify-items:center}.frame{padding:8px 8px 24px;width:100%;max-width:240px}.frame img{width:100%;height:auto;aspect-ratio:1}.done-card{padding:28px}.celebrate-photo{max-width:260px;max-height:240px;border-width:4px}}@media (max-width: 480px){.screen{padding:16px 12px}.workshop h1{font-size:20px}.login-card h1{font-size:22px}.big{padding:14px 24px;font-size:16px}}