*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--sky-top:#65c8dc;--sky-bottom:#b7ecdf;--sky-deep:#3598b0;--cloud:#fff;--cloud-shadow:#d9f4ef;--pipe:#69c541;--pipe-light:#9be35f;--pipe-dark:#337a29;--pipe-deep:#225a22;--bird-yellow:#f7d64b;--bird-orange:#f29b38;--bird-red:#e85b45;--ground:#d9d85c;--ground-light:#f3eb83;--ground-dark:#8cb04b;--ink:#2f3a3b;--ink-soft:#627477;--ink-muted:#839699;--paper:#fffdf0;--paper-soft:#f8f5dc;--paper-green:#eff9d9;--white:#fff;--border:#445254;--border-soft:#2f3a3b2e;--border-pipe:#2f6b2b;--accent:var(--bird-yellow);--accent-hover:#ffe474;--accent-dim:#d7ad22;--accent-subtle:#f7d64b3d;--accent-container:#f6d44a;--on-accent:#273436;--secondary:var(--pipe);--secondary-hover:#78d44d;--secondary-subtle:#69c5412e;--secondary-container:#dff5ba;--on-secondary:#173d19;--error:#de5548;--success:#3f9c38;--gold:#f7c948;--silver:#c9d3d5;--bronze:#c68b54;--google:#fff;--state-hover:#ffffff38;--state-pressed:#2f3a3b1a;--state-focus:#f7d64b4d;--radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:30px;--radius-full:999px;--shadow-small:0 4px 0 #2f3a3b2e;--shadow-card:0 7px 0 #2f3a3b2e, 0 18px 40px #2b677029;--shadow-game:0 8px 0 #275d24, 0 20px 45px #1b545e38}html{background:var(--sky-bottom);min-height:100%}body{min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 8% 13%, #fffffff2 0 28px, transparent 29px), radial-gradient(circle at 12% 13%, #fffffff2 0 38px, transparent 39px), radial-gradient(circle at 16% 13%, #fffffff2 0 25px, transparent 26px), radial-gradient(circle at 78% 26%, #ffffffd1 0 26px, transparent 27px), radial-gradient(circle at 82% 25%, #ffffffd1 0 38px, transparent 39px), radial-gradient(circle at 86% 26%, #ffffffd1 0 24px, transparent 25px), linear-gradient(180deg, var(--sky-top) 0%, #8bd8db 47%, var(--sky-bottom) 100%);background-attachment:fixed;font-family:Trebuchet MS,Arial Rounded MT Bold,Arial,sans-serif;font-weight:500;line-height:1.5;overflow-x:hidden}body:before,body:after{content:"";pointer-events:none;z-index:-1;width:100%;position:fixed;left:0}body:before{opacity:.64;background:radial-gradient(at 5% 90%,#f8fff7 0 36px,#0000 37px),radial-gradient(at 11% 82%,#f8fff7 0 52px,#0000 53px),radial-gradient(at 18% 92%,#f8fff7 0 42px,#0000 43px),radial-gradient(at 39% 90%,#f8fff7 0 38px,#0000 39px),radial-gradient(at 45% 82%,#f8fff7 0 56px,#0000 57px),radial-gradient(at 52% 92%,#f8fff7 0 44px,#0000 45px),radial-gradient(at 72% 90%,#f8fff7 0 36px,#0000 37px),radial-gradient(at 78% 82%,#f8fff7 0 52px,#0000 53px),radial-gradient(at 85% 91%,#f8fff7 0 45px,#0000 46px);height:110px;bottom:76px}body:after{height:78px;box-shadow:0 -5px 0 var(--ground-dark);background:repeating-linear-gradient(135deg, #ffffff42 0 8px, transparent 8px 16px), linear-gradient(180deg, var(--ground-light) 0 32%, var(--ground) 32% 72%, #c5b35a 72% 100%);border-top:5px solid #fff;bottom:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:4px solid #ffffffe6}.app{width:100%;min-height:100vh;padding:28px 24px 128px;position:relative}.loading-screen{min-height:100vh;color:var(--ink);place-items:center;display:grid}.spinner{border:5px solid #fff9;border-top-color:var(--bird-yellow);border-right-color:var(--bird-orange);filter:drop-shadow(0 3px #2f3a3b24);border-radius:50%;width:42px;height:42px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-container{justify-content:center;align-items:center;min-height:calc(100vh - 156px);padding:3rem 1.25rem;display:flex;position:relative}.login-container:before,.login-container:after{content:"";z-index:0;border:5px solid var(--border-pipe);background:linear-gradient(90deg, var(--pipe-dark) 0 10%, var(--pipe-light) 10% 28%, var(--pipe) 28% 78%, var(--pipe-dark) 78% 100%);width:70px;height:245px;box-shadow:inset -8px 0 0 #1c591c2e, var(--shadow-game);border-radius:8px;position:absolute}.login-container:before{top:0;left:max(5vw,18px)}.login-container:after{bottom:3px;right:max(5vw,18px)}.login-card{z-index:1;border:4px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(180deg, var(--paper) 0%, #fff9d9 100%);width:min(100%,430px);box-shadow:var(--shadow-card);padding:3rem 2.25rem 2.25rem;position:relative}.login-card:before{content:"READY?";white-space:nowrap;color:var(--ink);background:var(--bird-yellow);border:3px solid var(--border);border-radius:var(--radius-full);letter-spacing:.12em;padding:.55rem 1.15rem;font-size:.72rem;font-weight:900;position:absolute;top:0;left:50%;transform:translate(-50%,-55%);box-shadow:0 4px #2f3a3b33}.login-card h1{color:var(--white);text-align:center;letter-spacing:-.05em;text-transform:uppercase;text-shadow:0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 4px 5px 0 #2f3a3b2e;margin-bottom:.7rem;font-size:clamp(1.8rem,7vw,2.5rem);line-height:1}.login-card>p{text-align:center;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em;margin-bottom:2rem;font-size:.9rem;font-weight:800}.login-form{flex-direction:column;gap:1rem;display:flex}.field-group{flex-direction:column;gap:.45rem;display:flex}.field-group label{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:900}.field-group input{width:100%;color:var(--ink);background:#ffffffdb;border:3px solid #a8b4a8;border-radius:12px;outline:none;padding:.9rem 1rem;transition:border-color .18s,box-shadow .18s,transform .18s;box-shadow:inset 0 2px #2f3a3b0f}.field-group input::placeholder{color:#a2ada8}.field-group input:focus{border-color:var(--pipe);transform:translateY(-1px);box-shadow:0 0 0 4px #69c5412e,inset 0 2px #2f3a3b0a}.field-group input:disabled{opacity:.55;cursor:not-allowed}.error-message{color:#873b35;background:#ffe4dc;border:2px solid #e58b7f;border-radius:10px;padding:.72rem .85rem;font-size:.82rem;font-weight:700}.btn-primary,.btn-google,.btn-signout,.btn-create-index{border:3px solid var(--border);cursor:pointer;font-weight:900;transition:transform .12s,box-shadow .12s,filter .15s;position:relative;box-shadow:0 5px #2f3a3b47}.btn-primary{width:100%;color:var(--ink);background:linear-gradient(180deg, #ffe875 0%, var(--bird-yellow) 100%);text-transform:uppercase;letter-spacing:.05em;border-radius:12px;margin-top:.35rem;padding:.9rem 1rem}.btn-primary:hover:not(:disabled),.btn-google:hover:not(:disabled),.btn-signout:hover,.btn-create-index:hover{filter:brightness(1.04);transform:translateY(-2px);box-shadow:0 7px #2f3a3b42}.btn-primary:active:not(:disabled),.btn-google:active:not(:disabled),.btn-signout:active,.btn-create-index:active{transform:translateY(3px);box-shadow:0 2px #2f3a3b42}.btn-primary:disabled,.btn-google:disabled{opacity:.5;cursor:not-allowed}.btn-link{color:#317534;cursor:pointer;background:0 0;border:0;border-radius:10px;width:100%;padding:.65rem .9rem;font-size:.82rem;font-weight:800;transition:background .15s,color .15s}.btn-link:hover:not(:disabled){color:#225f29;background:#69c54121}.divider{color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.8rem;font-size:.72rem;font-weight:800;display:flex}.divider:before,.divider:after{content:"";background:#2f3a3b24;flex:1;height:2px}.btn-google{width:100%;min-height:48px;color:var(--ink);background:var(--white);border-radius:12px;justify-content:center;align-items:center;gap:.75rem;padding:.8rem;display:flex}.google-icon{width:22px;height:22px}.btn-signout{z-index:50;color:var(--ink);text-transform:uppercase;letter-spacing:.07em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffdf0f0;border-radius:12px;margin:0;padding:.58rem .95rem;font-size:.76rem;position:fixed;top:22px;right:24px}.user-info{text-align:center;justify-content:center;align-items:center;width:min(100%,980px);margin:24px auto 22px;padding:0 130px;font-family:inherit;display:flex}.user-info p{color:var(--white);letter-spacing:-.035em;text-shadow:0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 4px 5px 0 #2f3a3b29;font-size:clamp(1.65rem,4vw,2.7rem);font-weight:900;line-height:1.06;position:relative}.user-info p:after{content:"TAP - FLY - SCORE";color:#315b36;letter-spacing:.14em;width:fit-content;text-shadow:none;background:#fffdf0eb;border:2px solid #2f3a3b4d;border-radius:999px;margin:.8rem auto 0;padding:.42rem .75rem;font-size:.62rem;font-weight:900;display:block;box-shadow:0 3px #2f3a3b29}.portal-container{border:5px solid var(--border-pipe);background:linear-gradient(90deg, var(--pipe-dark) 0 3%, var(--pipe-light) 3% 8%, var(--pipe) 8% 92%, var(--pipe-dark) 92% 100%);width:min(100%,980px);min-height:auto;box-shadow:var(--shadow-game);box-sizing:border-box;border-radius:26px;margin:0 auto 34px;position:relative}.portal-container:before{content:"Sponder Bird";z-index:4;color:var(--ink);background:var(--bird-yellow);border:3px solid var(--border);letter-spacing:.12em;white-space:nowrap;border-radius:10px;padding:.52rem 1rem;font-size:.7rem;font-weight:900;position:absolute;top:0;left:50%;transform:translate(-50%,-56%);box-shadow:0 4px #2f3a3b38}.portal-container:after{content:"";z-index:0;pointer-events:none;border:2px solid #ffffff57;border-radius:14px;position:absolute;inset:11px}.game-area{z-index:1;border:4px solid var(--border);background:#73cfd7;border-radius:12px;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 4px #ffffff38}.game-loading{z-index:2;color:var(--ink);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffdf0d1;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.game-frame{background:#71cbd4;border:0;width:100%;height:min(650px,72vh);min-height:520px;transition:opacity .25s;display:block}.game-frame.hidden{opacity:0}.game-frame.visible{opacity:1}.game-placeholder{place-items:center;width:100%;min-height:520px;padding:2rem;display:grid}.placeholder-content{text-align:center;max-width:500px;color:var(--ink);border:3px solid var(--border);box-shadow:var(--shadow-small);background:#fffdf0f0;border-radius:20px;padding:2rem}.placeholder-icon{color:var(--pipe-dark);margin-bottom:1rem}.placeholder-content h2{margin-bottom:.55rem;font-size:1.5rem;font-weight:900}.placeholder-content p{color:var(--ink-soft);margin-bottom:1.25rem;font-size:.9rem;line-height:1.6}.placeholder-code{background:#eef8d9;border:2px solid #a2bf77;border-radius:9px;padding:.55rem .8rem;display:inline-block}code{color:#3f7f37;font-family:SFMono-Regular,Consolas,monospace}.portal-header,.stats-bar,.tab-bar{background:#fffdf0f0;border-color:#2f3a3b2e}.portal-header{justify-content:space-between;align-items:center;padding:.85rem 1.2rem;display:flex}.brand,.user-info{align-items:center}.brand{gap:.65rem;display:flex}.brand-icon{width:36px;height:36px;color:var(--ink);background:var(--bird-yellow);border:2px solid var(--border);border-radius:9px;place-items:center;font-weight:900;display:grid}.portal-header h1{font-size:1.1rem;font-weight:900}.avatar,.avatar-placeholder{border-radius:50%;width:34px;height:34px}.avatar{object-fit:cover}.avatar-placeholder{color:var(--ink);background:var(--bird-yellow);border:2px solid var(--border);place-items:center;font-size:.78rem;font-weight:900;display:grid}.user-name{max-width:200px;color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.stats-bar{gap:1.35rem;padding:.8rem 1.2rem;display:flex}.stat{flex-direction:column;gap:.1rem;display:flex}.stat-label{color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.62rem;font-weight:900}.stat-value{color:var(--ink);font-weight:900}.stat-value.highlight{color:var(--success)}.stat-divider{background:#2f3a3b26;width:2px}.tab-bar{padding:0 .8rem;display:flex}.tab{color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-bottom:4px solid #0000;padding:.75rem 1rem;font-size:.82rem;font-weight:900}.tab:hover{color:var(--ink)}.tab.active{color:#347d32;border-bottom-color:var(--pipe)}.portal-content{flex-direction:column;flex:1;display:flex}.tab-panel{width:min(100%,760px);margin:0 auto;padding:1.25rem}.leaderboard-card,.history-card{width:min(100% - 4px,900px);color:var(--ink);background:linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);border:4px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin:0 auto 34px;padding:1.4rem;position:relative}.leaderboard-card:before{content:"";background:var(--bird-yellow);border:3px solid var(--border);border-radius:50%;place-items:center;width:42px;height:42px;font-size:1.15rem;display:grid;position:absolute;top:-21px;left:28px;box-shadow:0 4px #2f3a3b33}.card-header,.card\=header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding-left:3.4rem;display:flex}.card-title{color:var(--ink);letter-spacing:-.02em;font-size:clamp(1.15rem,3vw,1.45rem);font-weight:900}.card-badge{color:#235d28;letter-spacing:.08em;text-transform:uppercase;background:#e2f5bd;border:2px solid #92bd64;border-radius:999px;padding:.32rem .65rem;font-size:.66rem;font-weight:900}.card-loading,.card\=loading{place-items:center;min-height:180px;display:grid}.card-empty{color:var(--ink-soft);text-align:center;background:#ffffff94;border:2px dashed #a5b28f;border-radius:14px;padding:2rem 1rem}.card-error{text-align:center;background:#ffe4dc;border:2px solid #e58b7f;border-radius:14px;padding:1.25rem}.card-error p{color:#873b35;margin-bottom:.75rem;font-size:.84rem;font-weight:700}.btn-create-index{color:var(--ink);background:var(--bird-yellow);border-radius:10px;padding:.55rem 1rem;font-size:.8rem;text-decoration:none;display:inline-block}.leaderboard-list,.history-list{flex-direction:column;gap:.5rem;display:flex}.leaderboard-row,.history-row{background:#ffffffb8;border:2px solid #d6d9c4;border-radius:13px;align-items:center;gap:.85rem;padding:.72rem .82rem;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s;display:flex}.leaderboard-row:hover,.history-row:hover{background:#fff;border-color:#aeb89b;transform:translate(4px);box-shadow:0 3px #2f3a3b1a}.leaderboard-row.is-you{background:#fff2a9;border-color:#dfb82f}.rank{width:34px;height:34px;color:var(--ink-soft);background:#e7ece4;border:2px solid #c2cbc0;border-radius:9px;flex:0 0 34px;place-items:center;font-size:.78rem;font-weight:900;display:grid;box-shadow:0 2px #2f3a3b1a}.rank.gold,.rank-gold{color:#5e4700;background:var(--gold);border-color:#c89a24}.rank.silver,.rank-silver{color:#465255;background:var(--silver);border-color:#a1afb1}.rank.bronze,.rank-bronze{color:#5d3921;background:var(--bronze);border-color:#a66e42}.leader-info{flex:1;align-items:center;gap:.6rem;min-width:0;display:flex}.leader-avatar,.leader-avatar-placeholder{border-radius:50%;flex:0 0 30px;width:30px;height:30px}.leader-avatar{object-fit:cover}.leader-avatar-placeholder{color:var(--ink-soft);background:#edf0e4;place-items:center;font-size:.72rem;font-weight:900;display:grid}.leader-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:900;overflow:hidden}.you-tag{color:#654d00;background:var(--bird-yellow);letter-spacing:.06em;vertical-align:middle;border:1px solid #d3aa27;border-radius:999px;margin-left:.4rem;padding:.12rem .42rem;font-size:.56rem;font-weight:900}.leader-stats{flex-direction:column;flex:none;align-items:flex-end;gap:.05rem;display:flex}.leader-score{color:#348b34;font-size:1.08rem;font-weight:900;line-height:1.1}.leader-score:before{content:"Star";color:#e5b927;font-size:.78em}.leader-games{color:var(--ink-muted);font-size:.67rem;font-weight:800}.leader-games:after{content:" games"}.history-score-col{align-items:baseline;gap:.25rem;min-width:58px;display:flex}.history-score{color:var(--success);font-size:1.05rem;font-weight:900}.history-label,.history-details,.history-time{color:var(--ink-muted);font-size:.75rem;font-weight:700}.history-details{flex:1;align-items:center;gap:.5rem;display:flex}.history-dot{opacity:.45}.history-time{flex-shrink:0}.admin-container{width:min(100%,1100px);color:var(--ink);border:4px solid var(--border);box-shadow:var(--shadow-card);background:#fffdf0f0;border-radius:22px;flex-direction:column;justify-content:center;align-items:stretch;margin:70px auto 0;padding:1.5rem;display:flex}.admin-title{text-align:center;margin-bottom:1.25rem;font-size:clamp(1.3rem,3vw,2rem);font-weight:900}.graphs-container{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%;margin:0;display:grid}.graphs-container img{background:#fff;border:2px solid #cbd1bf;border-radius:14px;width:100%;display:block}#pyodide-target{min-height:300px;box-shadow:var(--shadow-card);border-radius:18px;overflow:auto;border:4px solid var(--border)!important;background:#fffdf0f5!important}#pyodide-target img,#pyodide-target canvas,#pyodide-target svg{max-width:100%;height:auto}@media (width<=900px){.app{padding-inline:16px}.user-info{padding-inline:110px}.game-frame{height:68vh;min-height:500px}.graphs-container{grid-template-columns:1fr}}@media (width<=640px){body:after{height:58px}body:before{bottom:56px}.app{padding:18px 10px 96px}.btn-signout{border-width:2px;padding:.48rem .7rem;font-size:.68rem;top:14px;right:12px;box-shadow:0 3px #2f3a3b3d}.user-info{margin-top:58px;margin-bottom:18px;padding-inline:0}.user-info p{font-size:clamp(1.55rem,9vw,2.15rem)}.portal-container{border-width:4px;border-radius:18px;margin-bottom:26px;padding:10px}.portal-container:after{border-radius:10px;inset:6px}.game-area{border-width:3px;border-radius:9px}.game-frame{height:70vh;min-height:470px}.leaderboard-card,.history-card{border-width:3px;border-radius:17px;padding:1.05rem .8rem .85rem}.leaderboard-card:before{left:16px}.card-header,.card\=header{gap:.5rem;padding-left:3rem}.leaderboard-row,.history-row{gap:.6rem;padding:.62rem .58rem}.rank{flex-basis:30px;width:30px;height:30px}.leader-games{display:none}.login-container{padding:3rem .25rem}.login-container:before,.login-container:after{width:46px;height:175px}.login-card{border-width:3px;border-radius:22px;padding:2.8rem 1.2rem 1.4rem}.login-card h1{font-size:1.9rem}}@media (width<=420px){.portal-container:before{padding:.42rem .7rem;font-size:.6rem}.card-title{font-size:1.05rem}.card-badge{padding:.26rem .48rem;font-size:.58rem}.leader-name{font-size:.82rem}.leader-score{font-size:.96rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
