:root{--bg:#090a11;--panel:#12141f;--panel2:#1b1d2c;--text:#f8f8fc;--muted:#a0a2b8;--line:rgba(255,255,255,.11);--accent:#aa78ff;--accent2:#fa70b8;--nav-h:74px;--radius:20px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:default}button,input,textarea{-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(ellipse at 12% 10%,rgba(132,70,226,.14),transparent 38%),radial-gradient(ellipse at 90% 90%,rgba(29,171,174,.08),transparent 37%),var(--bg)}body[data-accent=mint]{--accent:#47dfc4;--accent2:#72baf9}body[data-accent=coral]{--accent:#ff9c75;--accent2:#ff70b5}
.startup{height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.startup strong{font-size:32px;letter-spacing:-1px}.startup small{color:var(--muted)}.logo-spark{font-size:52px;color:var(--accent)}
.desktop-copy{position:fixed;left:max(28px,calc(50% - 670px));top:26%;max-width:335px}.desktop-copy .brand{font-size:21px;font-weight:800;display:flex;align-items:center;gap:12px;letter-spacing:-.5px}.desktop-copy h1{font-size:46px;line-height:1.08;letter-spacing:-2.5px;margin:27px 0 14px}.desktop-copy p{font-size:15px;line-height:1.75;color:var(--muted)}.desktop-copy .pill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.desktop-copy .pill-list span{border:1px solid var(--line);padding:9px 11px;border-radius:30px;color:#c7c8d6;font-size:12px}
.app-shell{width:min(100%,440px);height:100dvh;position:relative;margin:0 auto;background:#0d0e17;overflow:hidden;isolation:isolate}.topbar{height:67px;position:absolute;z-index:20;top:0;left:0;right:0;padding:env(safe-area-inset-top) 17px 0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#0b0c16f2,#0b0c16c9 82%,transparent)}.brand{display:flex;align-items:center;gap:8px;font-weight:850;font-size:20px;letter-spacing:-.8px}.brand-mark{width:29px;height:29px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#a675ff,#ff73ad);font-size:21px;color:#fff}.top-center{display:flex;align-items:center;gap:19px}.header-tab{background:none;border:0;color:#83849b;font-weight:700;font-size:14px;padding:10px 0}.header-tab.active{color:white;border-bottom:2px solid var(--accent)}.icon-btn{border:0;background:transparent;color:inherit;display:inline-grid;place-items:center;padding:7px}.icon{width:22px;height:22px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav{z-index:30;position:absolute;bottom:0;left:0;right:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-around;background:rgba(11,12,20,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px)}.nav-btn{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;background:none;color:#85869c;border:0;font-size:10px;font-weight:600;padding:2px 0}.nav-btn.active{color:white}.nav-btn.active .icon{color:var(--accent)}.nav-btn .icon{width:24px;height:24px}.nav-create{width:46px;height:39px;border-radius:12px;background:linear-gradient(115deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#111;box-shadow:0 5px 25px #8b4dff35}
.content{position:absolute;inset:67px 0 calc(var(--nav-h) + env(safe-area-inset-bottom));overflow:auto;scrollbar-width:none}.content::-webkit-scrollbar{display:none}.feed-content{overflow:hidden}.feed-screen{position:absolute;inset:0;overflow:hidden;animation:fadeUp .22s ease-out}.feed-screen::before{content:"";position:absolute;inset:0;opacity:.86;background:radial-gradient(ellipse at 45% 22%,var(--game-color,#7547dc),transparent 57%),linear-gradient(165deg,#1b1c31 5%,#10121c 80%);z-index:-2}.feed-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(7,8,14,.43) 58%,#0d0e17 99%);z-index:-1}.game-tag{position:absolute;top:15px;left:18px;border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:7px 11px;font-size:11px;font-weight:750;letter-spacing:.45px;color:#f7f6fd;background:#ffffff19}.feed-number{position:absolute;top:19px;right:18px;font-size:11px;color:#ffffffb5}.game-center{position:absolute;left:16px;right:65px;top:44.8%;transform:translateY(-52%);display:flex;flex-direction:column;align-items:stretch;gap:15px}.mini-title{text-align:center;margin:0;font-weight:850;font-size:clamp(28px,6vw,38px);letter-spacing:-1.5px;line-height:1}.mini-subtitle{text-align:center;font-size:12px;line-height:1.4;color:#d8d7e7;margin:0 0 8px}.game-stage{min-height:290px;max-height:440px;padding:17px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:#131627bb;box-shadow:0 23px 75px rgba(0,0,0,.28);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;touch-action:pan-y}.game-stage button{touch-action:manipulation}.game-topline{width:100%;display:flex;align-items:center;justify-content:space-between;color:#d9d5e9;font-weight:800;font-size:13px}.score-big{font-size:40px;font-weight:900;letter-spacing:-1px}.small-text{font-size:12px;color:#c4c4d6;line-height:1.4}.reaction-field{position:relative;height:180px;width:100%;border-radius:19px;background:radial-gradient(circle at center,#353153,#19192d);border:1px dashed #7774aa;overflow:hidden;touch-action:manipulation}.target{position:absolute;width:62px;height:62px;border-radius:50%;border:7px solid #fff7;background:linear-gradient(135deg,#ff77b2,#ffc16d);box-shadow:0 0 0 10px #ffb3de30,0 5px 25px #ff5a8a65;animation:pop .18s ease-out}.game-progress{height:6px;width:100%;background:#ffffff1a;border-radius:10px;overflow:hidden}.game-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .13s linear}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;width:100%}.num-cell,.memory-cell,.ttt-cell,.answer{border:1px solid #ffffff25;border-radius:13px;background:#ffffff14;color:white;font-weight:850}.num-cell{aspect-ratio:1;font-size:23px}.num-cell:disabled{background:#51ddba46;opacity:.35}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}.memory-cell{aspect-ratio:.89;display:grid;place-items:center;font-size:28px}.memory-cell.open{background:#7960b1bd}.memory-cell.done{background:#256956a6;opacity:.75}.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}.answer{min-height:60px;font-size:22px}.question{font-size:43px;font-weight:900;letter-spacing:-1.5px;padding:23px 0}.ttt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:min(100%,260px)}.ttt-cell{aspect-ratio:1;font-size:40px;color:#9be8db}.ttt-cell.bot{color:#ff9bc0}.game-end{text-align:center;display:flex;align-items:center;flex-direction:column;gap:14px}.game-end .end-emoji{font-size:47px}.game-end h3{margin:0;font-size:24px}.game-end .result{font-size:34px;font-weight:900;color:var(--accent)}.primary{background:linear-gradient(120deg,var(--accent),var(--accent2));border:0;color:#12101b;border-radius:13px;padding:13px 20px;font-weight:850}.secondary{background:#ffffff12;border:1px solid #ffffff23;color:#f6f6fb;border-radius:13px;padding:12px 18px;font-weight:750}.btn-wide{width:100%}.feed-meta{position:absolute;bottom:47px;left:18px;right:82px}.creator{font-weight:800;font-size:14px;margin-bottom:7px;display:flex;align-items:center;gap:8px}.creator-avatar{height:25px;width:25px;border-radius:8px;display:inline-grid;place-items:center;background:#ffffff2b;color:#fff}.feed-meta h2{font-size:17px;margin:0 0 6px;font-weight:850}.feed-meta p{font-size:12px;line-height:1.45;margin:0;color:#dddde7}.feed-actions{position:absolute;right:10px;bottom:44px;display:flex;flex-direction:column;align-items:center;gap:16px}.social-btn{border:0;background:none;color:white;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:46px;font-size:10px;font-weight:800;text-shadow:0 2px 10px #000}.social-btn .icon{width:27px;height:27px;filter:drop-shadow(0 3px 5px #0004)}.social-btn.picked{color:var(--accent2)}.feed-arrows{position:absolute;right:14px;top:22%;display:flex;flex-direction:column;gap:6px}.round-arrow{width:37px;height:37px;border:1px solid #ffffff2b;background:#11131d66;border-radius:50%;color:white;display:grid;place-items:center}.swipe-tip{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:10px;color:#ffffff6e;pointer-events:none}
.page{padding:19px 18px 35px;min-height:100%;background:radial-gradient(ellipse at 50% 0,#4c31772e,transparent 45%)}.page h1{font-size:27px;letter-spacing:-1.1px;margin:6px 0 5px}.page-lead{color:var(--muted);font-size:13px;line-height:1.55;margin:4px 0 24px}.search-box{display:flex;gap:10px;align-items:center;padding:13px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;color:#9797b0}.search-box input{background:none;border:none;color:white;outline:0;width:100%;font-size:14px}.chips{display:flex;gap:7px;overflow:auto;margin:16px -18px 20px;padding:0 18px;scrollbar-width:none}.chip{white-space:nowrap;background:#ffffff10;color:#c7c7d5;border:1px solid #ffffff16;border-radius:24px;padding:9px 13px;font-size:12px;font-weight:750}.chip.selected{background:var(--accent);color:#101018}.game-list{display:grid;gap:12px}.game-card{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:#171925;border:1px solid var(--line);padding:12px;border-radius:17px;color:white}.game-thumb{width:64px;height:64px;border-radius:14px;flex:0 0 64px;display:grid;place-items:center;font-size:29px}.game-card h3{font-size:14px;margin:0 0 4px}.game-card p{font-size:11px;color:var(--muted);line-height:1.45;margin:0}.game-card .game-duration{font-size:11px;color:var(--accent);margin-top:5px;font-weight:750}.blank-state{display:grid;place-items:center;text-align:center;min-height:260px;color:var(--muted);gap:12px}.blank-state h3{margin:0;color:#fff}.blank-state p{margin:0;font-size:13px;line-height:1.5;max-width:280px}.blank-state .icon{width:38px;height:38px}
.profile-header{display:flex;gap:17px;align-items:center;margin:14px 0 21px}.profile-avatar{height:76px;width:76px;border:2px solid #ffffff42;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent2));font-size:29px;font-weight:900;color:#1c1330}.profile-header h2{margin:0 0 4px;font-size:19px}.profile-header p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:19px 0 25px}.stat{background:#171925;border:1px solid var(--line);border-radius:15px;text-align:center;padding:14px 5px}.stat strong{display:block;font-size:20px}.stat span{font-size:10px;color:var(--muted)}.section-title{font-size:15px;margin:24px 0 13px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}.setting-row small{color:var(--muted);display:block;margin-top:3px;font-size:11px}.setting-row select{border:1px solid #ffffff30;background:#222437;color:#fff;padding:8px;border-radius:9px}.setting-row input[type=checkbox]{accent-color:var(--accent);width:19px;height:19px}.empty-profile{padding:28px 0;text-align:center}.empty-profile p{color:var(--muted);font-size:13px;line-height:1.6}
#modal-root:empty{display:none}.modal-backdrop{position:fixed;z-index:100;inset:0;background:#05060acc;backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center}.modal{width:min(100%,440px);max-height:90dvh;overflow:auto;background:#181a29;border:1px solid #ffffff25;border-radius:24px 24px 0 0;padding:22px 20px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -14px 60px #0007}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal h2{font-size:21px;letter-spacing:-.7px;margin:0}.modal h3{font-size:15px;margin:15px 0}.form{display:grid;gap:14px}.form label{font-size:12px;color:#c1c1d2;font-weight:700;display:grid;gap:7px}.form input,.form textarea{background:#10111c;border:1px solid #ffffff23;border-radius:12px;padding:13px 14px;color:white;outline:0;min-width:0;width:100%;font-size:14px}.form textarea{resize:vertical;min-height:88px}.modal-note{font-size:12px;color:var(--muted);line-height:1.55}.text-button{border:0;background:none;color:var(--accent);font-weight:800;font-size:13px;padding:8px 0}.auth-toggle{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.comments-list{display:grid;gap:16px;margin:16px 0 22px}.comment-item{border-bottom:1px solid var(--line);padding-bottom:14px}.comment-head{display:flex;justify-content:space-between;gap:8px;font-size:12px}.comment-head strong{color:#f5f5ff}.comment-head time{color:#9293aa;font-size:10px}.comment-item p{font-size:13px;line-height:1.55;color:#dfdeea;margin:9px 0}.comment-item button{font-size:11px;border:0;background:none;color:var(--muted);padding:0}.leaderboard-row{display:flex;justify-content:space-between;gap:9px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.leaderboard-row b{color:var(--accent)}
#toast{position:fixed;z-index:150;bottom:95px;left:50%;transform:translateX(-50%) translateY(20px);background:#f6f3ff;color:#171221;padding:11px 17px;border-radius:11px;box-shadow:0 9px 40px #0006;font-size:13px;font-weight:750;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;max-width:min(85vw,380px);text-align:center}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.error-page{height:100%;display:grid;place-items:center;padding:25px;text-align:center}.error-page p{line-height:1.6;color:var(--muted);font-size:13px}.error-page h2{margin:0}
@keyframes pop{from{transform:scale(.75);opacity:.45}to{transform:scale(1);opacity:1}}@keyframes fadeUp{from{transform:translateY(12px);opacity:.5}to{transform:translateY(0);opacity:1}}
@media(min-width:900px){.app-shell{height:min(920px,calc(100dvh - 34px));top:17px;border-radius:28px;box-shadow:0 20px 90px #000a;border:1px solid #ffffff19;left:155px}.bottom-nav{padding-bottom:9px;height:var(--nav-h)}.content{bottom:var(--nav-h)}.topbar{padding-top:0}}
@media(max-width:899px){.desktop-copy{display:none}}@media(max-height:720px){.game-center{top:46%;gap:9px}.game-stage{min-height:225px;padding:11px}.reaction-field{height:155px}.game-meta{bottom:20px}.mini-title{font-size:26px}.game-stage{max-height:320px}.feed-meta{bottom:28px}.feed-actions{bottom:22px;gap:11px}.swipe-tip{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}