*{box-sizing:border-box}
body{margin:0;background:#0f1226;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #ffc531;outline-offset:2px}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:#161a36;position:relative}
.top{display:flex;align-items:center;gap:10px;padding:14px 16px;position:sticky;top:0;background:#161a36;z-index:2}
.top h1{flex:1;margin:0;font-size:20px}
.logo{font-weight:900;letter-spacing:2px;color:#ffc531;text-shadow:3px 3px 0 #ff5a36}
.bux{background:#22c55e;color:#062;padding:6px 12px;border-radius:999px;font-weight:800}
.back{background:#2a2f5a;color:#fff;border:0;border-radius:12px;min-height:44px;padding:0 14px}
.content{padding:0 16px 100px}
h2{margin:20px 0 10px}
.muted{color:#a5acd6}
.hello{display:flex;gap:12px;align-items:center;background:#232857;border-radius:16px;padding:12px}
.hello div{display:flex;flex-direction:column}.hello span{color:#a5acd6;font-size:14px}
.games{display:flex;flex-direction:column;gap:12px}
.game{display:flex;align-items:center;gap:12px;background:#232857;border:0;color:#fff;border-radius:16px;padding:10px;text-align:left}
.thumb{width:72px;height:72px;border-radius:12px;display:grid;place-items:center;font-size:36px;flex-shrink:0;box-shadow:inset 0 -6px 0 rgba(0,0,0,.2)}
.gi{flex:1;display:flex;flex-direction:column;gap:2px}.gi span{font-size:13px;color:#c5cae9}.gi small{color:#ffc531}
.playbtn{background:#22c55e;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;background:#0b0e22;padding:6px 0 max(8px,env(safe-area-inset-bottom));border-top:2px solid #232857}
.tabs button{flex:1;min-height:56px;background:none;border:0;color:#7b82b5;display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:700}
.tabs button span{font-size:22px}.tabs .on{color:#ffc531}
.stage{display:grid;place-items:center;background:radial-gradient(#3a4190,#161a36);border-radius:20px;padding:20px;margin-top:6px}
.pick h3{margin:16px 0 8px;font-size:15px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:44px;height:44px;border-radius:12px;border:3px solid transparent}.sw.on{border-color:#ffc531}
.chip{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:#2a2f5a;color:#fff;font-weight:700}.chip.on{background:#ffc531;color:#111}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.item{background:#232857;border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.btn{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:#22c55e;color:#fff;font-weight:800;box-shadow:0 4px 0 #15803d}
.btn:disabled{background:#3b4070;box-shadow:none;color:#9aa}
.play{padding:0 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hud{font-weight:800;font-size:18px}
.canvas{width:100%;border-radius:16px;touch-action:manipulation}
.hint{color:#a5acd6}
.over{display:flex;flex-direction:column;align-items:center;gap:8px;background:#232857;padding:16px;border-radius:16px;width:100%}
.over span{color:#22c55e;font-weight:700}
.field-area{position:relative;width:100%;height:60vh;background:linear-gradient(#7dd3fc,#4ade80);border-radius:16px;overflow:hidden;display:grid;place-items:center}
.search{width:100%;font-size:16px;min-height:44px;margin-bottom:10px}
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px}
.cats .chip{flex:none;min-height:40px}
.more{width:100%;margin-top:12px;min-height:48px}
body{background:#191b1d;font-family:"Segoe UI",system-ui,sans-serif}
.app,.top{background:#232527}
.top{border-bottom:1px solid #393b3d}
.logo{color:#fff;text-shadow:none;font-style:italic;letter-spacing:1px}
.bux{background:#393b3d;color:#fff;border-radius:8px}
.hello,.game,.item,.over,.card{background:#2f3133;border-radius:8px}
.thumb{border-radius:6px}
.chip{border-radius:8px;background:#393b3d}.chip.on{background:#fff;color:#111}
.btn{border-radius:8px;box-shadow:none;background:#335fff}
.btn.green{background:#00b06f}
.playbtn{background:#00b06f;border:0;color:#fff;border-radius:8px}
.tabs{background:#191b1d;border-top:1px solid #393b3d}.tabs .on{color:#fff}
.input{font-size:16px;min-height:44px;background:#191b1d;color:#fff;border:1px solid #4a4c4e;border-radius:8px;padding:0 12px;width:100%}
.authbox{display:flex;flex-direction:column;gap:10px;background:#2f3133;padding:16px;border-radius:8px;margin-top:12px}
.authbox h2{margin:0 0 4px}
.linkbtn{background:none;border:0;color:#9ab4ff;min-height:44px;text-decoration:none;display:grid;place-items:center}
.studio-hero{display:flex;flex-direction:column;gap:6px;background:linear-gradient(135deg,#335fff,#00b06f);padding:16px;border-radius:8px;margin-top:12px}
.row-between{display:flex;justify-content:space-between;align-items:center}
.card.stack{display:flex;flex-direction:column;gap:10px;padding:14px}
.profile-head{display:flex;align-items:center;gap:14px;margin:12px 0;min-width:0}
.profile-head div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.pfp{width:72px;height:72px;flex:none;display:grid;place-items:center;font-size:42px;background:#335fff;border-radius:8px}
.pfp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pfp-opt{min-height:48px;font-size:28px;border:2px solid transparent;border-radius:8px;background:rgba(255,255,255,.08);cursor:pointer}
.pfp-opt.on{border-color:#00b06f;background:rgba(0,176,111,.2)}
.saved{color:#00b06f;margin:0}
.react-pad{width:100%;min-height:240px;border:0;border-radius:8px;color:#fff;font-size:28px;font-weight:800;cursor:pointer;touch-action:manipulation}
.coin{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;font-size:44px;border:0;background:none;transition:left .15s,top .15s}