@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@600;800;900&display=swap');
:root{--ink:#161b3d;--muted:#7b85aa;--panel:#fff;--cyan:#18d6d1;--purple:#8b5cf6;--pink:#ff4f9a;--lime:#8ee617;--gold:#ffc83d;--red:#ff4f62;--shadow:0 10px 0 #10142b33,0 16px 35px #12152c33;--r:24px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#111638;user-select:none;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{border:0;cursor:pointer;color:inherit}button:active{transform:translateY(4px) scale(.97);filter:brightness(.95)}
#app{width:100%;height:100%;min-width:0;background:radial-gradient(circle at 20% 10%,#38e6d933,transparent 35%),radial-gradient(circle at 82% 4%,#b25fff44,transparent 35%),linear-gradient(145deg,#eefaff,#eee9ff);display:grid;grid-template-rows:72px 1fr 76px}
.topbar{z-index:20;display:flex;align-items:center;gap:18px;padding:9px max(18px,env(safe-area-inset-left));color:white;background:linear-gradient(180deg,#202858,#151a3d);box-shadow:0 6px 18px #10132955}.brand{height:54px;background:transparent;color:white;display:flex;align-items:center;text-align:left;font:800 14px/12px 'Baloo 2';letter-spacing:.5px}.brand b{font-size:18px;color:#a7f51b}.brand-mark{display:grid;place-items:center;width:46px;height:46px;margin-right:9px;border-radius:48% 52% 56% 44%;font:900 30px 'Baloo 2';background:linear-gradient(145deg,#b8ff43,#62cf00);color:#16233d;border:4px solid white;box-shadow:inset 0 -5px 0 #47a800,0 3px 0 #080b21}
.player{display:flex;align-items:center;gap:8px}.player div{display:grid}.player small{color:#9da8d2;font-size:10px}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#8ee617;border:3px solid white;color:#142034;font-size:24px}.currencies{display:flex;gap:8px;margin-left:auto}.currency{height:43px;min-width:86px;border-radius:15px;padding:0 13px;background:#0e1330;color:white;box-shadow:inset 0 -4px 0 #070a1b,0 2px 0 #48517e;display:flex;align-items:center;justify-content:center;gap:7px;font-size:18px}.currency.coin i{width:21px;height:21px;border-radius:50%;background:#ffd43b;border:4px solid #ffad0d;box-shadow:inset 0 2px #fff477}.currency.goo{color:#77f4ff}.currency.trophy{color:#ffd750}.icon-btn{width:43px;height:43px;border-radius:14px;background:#323c70;color:white;box-shadow:inset 0 -4px #1d254f}
#view{position:relative;min-width:0;overflow:auto;padding:22px 26px 34px}.dock{z-index:30;min-width:0;display:flex;align-items:stretch;justify-content:center;background:#fff;box-shadow:0 -8px 28px #11163825;padding-bottom:env(safe-area-inset-bottom)}.dock button{position:relative;min-width:88px;padding:7px 14px;background:white;color:#8b94b2;font-weight:900;font-size:11px}.dock button span{display:block;font:800 27px 'Baloo 2';line-height:29px}.dock button.active{color:#754ae8}.dock button.active:before{content:'';position:absolute;top:0;left:20%;width:60%;height:5px;background:#8759ef;border-radius:0 0 8px 8px}
.screen{width:100%;min-width:0;max-width:1250px;margin:auto;animation:screenIn .35s cubic-bezier(.2,.8,.2,1)}.split>*{min-width:0}@keyframes screenIn{from{opacity:0;transform:translateY(12px) scale(.99)}}
.hero{min-height:calc(100vh - 204px);display:grid;grid-template-columns:1.15fr .85fr;gap:24px}.hero-card{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(150deg,#17d8d3,#458be8 52%,#9b50e9);box-shadow:var(--shadow);padding:28px;color:white}.hero-card:after{content:'';position:absolute;width:340px;height:340px;right:-80px;top:-120px;border-radius:50%;border:70px solid #ffffff12}.eyebrow{display:inline-flex;padding:6px 11px;border-radius:10px;background:#11163888;text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:900}.hero h1{font:800 clamp(34px,5vw,72px)/.82 'Baloo 2';margin:18px 0 6px;text-shadow:0 6px 0 #15244c55}.hero h1 em{font-style:normal;color:#c3ff37}.hero p{max-width:430px;margin:0 0 20px;color:#e4fbff}.hero-gloob{position:absolute!important;right:7%;bottom:5%;width:min(31vw,330px)!important;height:min(31vw,330px)!important;filter:drop-shadow(0 25px 18px #17355c55)}
.play-btn,.primary{background:linear-gradient(#b7f83a,#71ce0a);color:#1c3310;border:3px solid #d8ff81;border-bottom-color:#499c05;border-radius:18px;box-shadow:0 7px 0 #438f05,0 12px 25px #163a4866;padding:13px 24px;font:900 20px 'Baloo 2';text-transform:uppercase}.play-btn{font-size:27px;padding:14px 38px}.secondary{padding:11px 18px;border-radius:14px;background:#e8eaf5;box-shadow:0 5px 0 #c7cadc;font-weight:900}.danger{background:#ff6074;color:white;box-shadow:0 5px 0 #c9344b}.side-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.quick{position:relative;min-height:145px;border-radius:25px;padding:18px;color:white;text-align:left;overflow:hidden;box-shadow:0 7px 0 #16204833}.quick strong{display:block;font:800 23px 'Baloo 2';line-height:1}.quick small{opacity:.78}.quick .qicon{position:absolute;right:8px;bottom:-13px;font-size:70px;transform:rotate(-8deg)}.quick:nth-child(1){background:linear-gradient(145deg,#ffb52e,#ff6b38)}.quick:nth-child(2){background:linear-gradient(145deg,#9d6df3,#6937d3)}.quick:nth-child(3){background:linear-gradient(145deg,#22d9c6,#1594bc)}.quick:nth-child(4){background:linear-gradient(145deg,#ff5f98,#c94280)}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-head h2{margin:0;font:800 36px 'Baloo 2';line-height:1}.section-head p{margin:4px 0;color:var(--muted)}.badge{border-radius:12px;padding:7px 12px;background:white;color:#697397;font-weight:900;box-shadow:0 3px 10px #28316118}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.panel{background:white;border-radius:var(--r);padding:20px;box-shadow:0 8px 24px #27305b19}.gloob-card{position:relative;overflow:hidden;text-align:left;background:white;border-radius:24px;padding:13px;box-shadow:0 7px 0 #cdd2e5,0 13px 25px #262d541b;border:3px solid transparent}.gloob-card.selected{border-color:#8359ef;box-shadow:0 7px 0 #6040bb,0 0 0 4px #a98cff55}.gloob-card .rarity{position:absolute;z-index:2;top:10px;left:10px}.gloob-card h3{margin:3px 0 0;font:800 19px 'Baloo 2';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gloob-card small{color:#7d86a7}.gloob-preview{height:134px;display:grid;place-items:center;border-radius:17px;background:radial-gradient(circle,#fff 0,#e7f1fa 58%,#d9e1ef)}.gloob-mini{width:130px;height:120px}.rarity{font-size:10px;font-weight:900;text-transform:uppercase;border-radius:8px;padding:5px 8px;background:var(--rarity,#aaa);color:white;text-shadow:0 1px 2px #0008}.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.stat{display:grid;grid-template-columns:22px 1fr 28px;align-items:center;gap:5px;font-size:10px;font-weight:900}.stat-track{height:7px;border-radius:8px;background:#e3e5ef;overflow:hidden}.stat-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20d4cf,#7758ee)}
.gloob-svg{position:relative;width:100%;height:100%;animation:wobble 2.5s ease-in-out infinite;transform-origin:50% 90%}.gloob-svg svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 9px 5px #17245533)}.gloob-sprite{display:grid;place-items:center}.gloob-sprite>img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 9px 5px #17245533)}.gloob-sprite .gloob-cosmetic-overlay{position:absolute;inset:0;z-index:2;filter:none}@keyframes wobble{0%,100%{transform:translateY(2%) scale(1.03,.97)}50%{transform:translateY(-4%) scale(.96,1.05)}}
.gloob-sprite.accessory-equipped .gloob-cosmetic-overlay{transform-origin:50% 70%;animation:accessoryEquip .36s cubic-bezier(.2,1.5,.4,1)}.detail-hero.accessory-changing .gloob-cosmetic-overlay{animation:accessoryUnequip .16s ease-in forwards}.detail-hero.accessory-equipped-now .gloob-cosmetic-overlay{animation:accessoryEquip .4s cubic-bezier(.2,1.6,.4,1)}@keyframes accessoryEquip{from{opacity:0;transform:translateY(-18%) scale(.65) rotate(-8deg)}to{opacity:1;transform:none}}@keyframes accessoryUnequip{to{opacity:0;transform:translateY(-12%) scale(.7)}}
.accessory-shop-art{width:100%;height:100px}.shop-accessory-preview{width:105px;height:100px;margin:auto}.accessory-product>span{display:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}.machine-wrap{min-height:490px;display:grid;place-items:center;background:radial-gradient(circle,#694ee8,#262160 65%);color:white;overflow:hidden;position:relative}.machine{position:relative;width:270px;height:350px;filter:drop-shadow(0 25px 15px #10132d88)}.machine-top{position:absolute;left:44px;top:0;width:180px;height:170px;border:13px solid #ffce3b;border-radius:48% 48% 30% 30%;background:radial-gradient(circle at 50% 65%,#ffffff88,transparent 40%),#73ebee88;box-shadow:inset 0 -12px #28a8c3,0 0 30px #6dfcff}.machine-top:after{content:'◉  ◉  ◉';position:absolute;bottom:12px;left:28px;font-size:35px;color:#84eb19}.machine-body{position:absolute;left:20px;top:145px;width:230px;height:195px;border-radius:35px;background:linear-gradient(135deg,#ff674f,#e83676);border:10px solid #ffbd38;box-shadow:inset 0 -18px #a91e59}.crank-handle{position:absolute;right:-18px;top:196px;width:66px;height:18px;border-radius:9px;background:#9de61d;border:6px solid #293765;transform-origin:left;transition:transform .8s}.machine.cranking .crank-handle{transform:rotate(360deg)}.crank-door{position:absolute;left:89px;top:238px;width:91px;height:70px;border-radius:17px;background:#222a59;border:8px solid #ffcf3c}.machine-title{position:absolute;top:165px;left:43px;width:184px;text-align:center;color:white;font:800 21px 'Baloo 2';transform:rotate(-3deg);text-shadow:0 3px #7f2054}.machine-controls{text-align:center}.machine-controls h2{font:800 36px 'Baloo 2';margin:0}.machine-controls p{color:#d8d4ff}.cost{display:inline-flex;gap:7px;background:#171636;border-radius:12px;padding:8px 14px;margin:8px}.cost b{color:#ffd43b}
.fusion-stage{background:linear-gradient(145deg,#13183e,#4c278a);color:white;min-height:450px}.fusion-slots{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:15px}.fusion-plus{text-align:center;font:900 52px 'Baloo 2';color:#8ff019}.fusion-slot{min-height:260px;border:3px dashed #ffffff55;border-radius:24px;display:grid;place-items:center;padding:10px;background:#ffffff0c}.fusion-slot.filled{border-style:solid;border-color:#69e9ec;background:#ffffff12}.fusion-picker{max-height:450px;overflow:auto}.fusion-actions{text-align:center;margin-top:22px}.fusion-actions .primary:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}
.shop-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.shop-item{display:grid;grid-template-columns:65px 1fr auto;align-items:center;gap:13px;background:#f0f3ff;border-radius:18px;padding:15px}.shop-item .shop-icon{font-size:40px}.shop-item h3{margin:0}.shop-item p{margin:2px 0;color:#7983a5;font-size:12px}
.tabs{display:flex;gap:8px;margin-bottom:15px}.tabs button{padding:10px 16px;border-radius:12px;background:#dfe3f1;font-weight:900}.tabs button.active{background:#6d48dd;color:white}.empty{text-align:center;padding:40px;color:#7e87a6}.dev-banner{background:#fff2c9;color:#765608;border:2px solid #f7ce5a;border-radius:14px;padding:10px 14px;font-size:12px;margin-bottom:14px}.profile-form{display:flex;gap:10px}.profile-form input,.field{min-width:0;width:100%;border:2px solid #d7dbec;background:#f5f7ff;border-radius:13px;padding:11px 13px;outline:none}.profile-form input:focus,.field:focus{border-color:#7d59ea}
#battle{position:fixed;z-index:80;inset:0;background:#0d1230;display:grid}.battle-ui{position:absolute;z-index:4;inset:0;pointer-events:none}.battle-top{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;padding:18px 28px}.fighter-hud{color:white;text-shadow:0 2px #0008}.fighter-hud.right{text-align:right}.fighter-name{display:flex;justify-content:space-between;font:900 16px 'Baloo 2'}.fighter-hud.right .fighter-name{flex-direction:row-reverse}.hpbar{height:20px;border:4px solid white;border-radius:12px;background:#341d45;overflow:hidden;box-shadow:0 3px 0 #13152d}.hpbar i{display:block;width:100%;height:100%;background:linear-gradient(#9ef52b,#42cc30);transition:width .3s}.battle-timer{background:#14183b;color:white;border:3px solid #838bb7;border-radius:15px;padding:6px 14px;font:900 24px 'Baloo 2'}.battle-help{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:9px 15px;border-radius:13px;background:#101431b8;color:#e8edff;font-size:12px}.battle-exit{pointer-events:auto;position:absolute;right:18px;bottom:17px;width:40px;height:40px;border-radius:13px;background:#ff5068;color:white;font-weight:900}.charge-meter{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);width:240px;height:12px;border:2px solid white;border-radius:10px;background:#16193e;overflow:hidden;opacity:0;transition:.2s}.charge-meter.active{opacity:1}.charge-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#42e7f2,#ff48c4,#fff73a)}#battleCanvas{width:100%;height:100%;touch-action:none}
.win-card{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:#111638bb;backdrop-filter:blur(8px);animation:fade .3s}.result{position:relative;width:min(520px,90vw);padding:32px;text-align:center;border-radius:34px;background:white;box-shadow:0 15px 0 #cbd0e4,0 30px 70px #05061288;animation:pop .55s cubic-bezier(.2,1.5,.4,1)}.result h2{font:900 56px/.8 'Baloo 2';margin:10px;color:#743fe5}.result.win h2{color:#5cc500}.result-gloob{width:170px;height:150px;margin:auto}.rewards{display:flex;justify-content:center;gap:14px;margin:20px}.reward{padding:10px 15px;border-radius:13px;background:#eff2fb;font-weight:900}@keyframes pop{from{transform:scale(.5) rotate(-3deg);opacity:0}}@keyframes fade{from{opacity:0}}
#toast{position:fixed;z-index:200;top:84px;left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:14px;background:#171c40;color:white;box-shadow:0 8px 20px #0a0c2077;font-weight:800;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}#toast.error{background:#b82d52}
#modal:empty{display:none}.modal-bg{position:fixed;z-index:150;inset:0;background:#111638b8;backdrop-filter:blur(5px);display:grid;place-items:center}.modal-card{position:relative;width:min(480px,90vw);max-height:85vh;overflow:auto;background:white;border-radius:28px;padding:25px;box-shadow:0 12px 0 #abb2cc}.modal-card h2{font:800 31px 'Baloo 2';margin:0}.modal-card .close{position:absolute;right:15px;top:15px;width:38px;height:38px;border-radius:12px;background:#e7e9f3}.reveal{width:230px;height:210px;margin:10px auto}
#rotate{display:none;position:fixed;z-index:999;inset:0;background:#171b42;color:white;place-items:center;align-content:center;text-align:center;gap:10px}.rotate-gloob{font-size:80px;color:#8ee617;animation:wobble 2s infinite}#rotate span{color:#9ca8d6}
@media(max-width:950px){.topbar{min-width:0;padding:6px 10px;gap:8px}.brand{height:44px}.brand-mark{width:38px;height:38px;font-size:25px}.brand>span:last-child{display:none}.player{display:none}.currency{height:44px;min-width:64px;padding:0 8px;font-size:14px}.icon-btn{width:44px;height:44px}}
@media(max-width:850px){#app{grid-template-rows:58px 1fr 64px}.dock button{min-width:63px;padding:4px 8px}.dock button span{font-size:23px}main button{min-height:44px}.hero{grid-template-columns:1fr;min-height:auto}.hero-card{min-height:360px}.hero-gloob{width:260px!important;height:260px!important}.side-grid{grid-template-columns:repeat(4,1fr)}.quick{min-height:100px}.quick strong{font-size:16px}.quick .qicon{font-size:50px}.split{grid-template-columns:1fr}.machine-wrap{min-height:390px}.fusion-slots{grid-template-columns:1fr 50px 1fr}.fusion-slot{min-height:220px}}
@media(max-height:560px){#view{padding:13px 20px 25px}.hero-card{min-height:310px;padding:20px}.hero h1{font-size:48px}.hero-gloob{width:230px!important;height:230px!important}.quick{min-height:120px}.machine-wrap{min-height:360px}.machine{transform:scale(.82)}}
@media(orientation:portrait) and (max-width:700px){#rotate{display:grid}#app{display:none}}

/* Commercial game-shell upgrade */
.home-hub{position:relative;min-height:calc(100vh - 214px);overflow:hidden;border-radius:34px;background:linear-gradient(90deg,#101943b8,#10194310 45%,#101943a8),url('/assets/home-hub.png') center 47%/cover;box-shadow:0 12px 0 #151b3e55,0 25px 60px #1a205044;color:white;padding:34px}.home-hub:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 82%,#c4ff2930,transparent 26%);animation:hubPulse 3s ease-in-out infinite}.home-hub:after{content:'✦   ·   ✧   ·   ✦';position:absolute;left:32%;top:8%;font-size:32px;color:#fff7;letter-spacing:35px;animation:sparkDrift 5s ease-in-out infinite}.hub-copy{position:relative;z-index:3;width:35%;text-shadow:0 4px 0 #10183e88}.hub-copy h1{font:900 clamp(42px,5vw,75px)/.82 'Baloo 2';margin:18px 0 10px}.hub-copy h1 em{font-style:normal;color:#acfa25}.hub-copy p{font-size:17px}.hub-gloob{position:absolute;z-index:3;left:42%;bottom:7%;width:28%;display:grid;place-items:center}.hub-gloob .hero-gloob{position:relative!important;right:auto;bottom:auto;width:min(27vw,320px)!important;height:min(27vw,320px)!important}.status-pill{display:inline-flex;justify-content:center;border-radius:20px;padding:7px 13px;background:#7ce515;color:#173309;font-size:11px;font-weight:900;letter-spacing:1px;box-shadow:0 4px 0 #3c9200}.status-pill.resting{background:#7a83a7;color:white;box-shadow:0 4px 0 #414965}.hub-menu{position:absolute;z-index:4;right:22px;top:22px;bottom:22px;width:25%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hub-menu button{position:relative;overflow:hidden;text-align:left;border-radius:19px;padding:13px;color:white;font-weight:900;background:linear-gradient(145deg,#8859eddd,#5332bdd9);border:2px solid #ffffff44;box-shadow:inset 0 -6px 0 #20164a55,0 7px 15px #14153655}.hub-menu button:nth-child(2n){background:linear-gradient(145deg,#18c9c8dd,#1479b5dd)}.hub-menu button:nth-child(3n){background:linear-gradient(145deg,#ff744cdd,#db3979dd)}.hub-menu button>span{font-size:28px;display:block;line-height:1}.hub-menu small{display:block;color:#ffffffb5}.empty-slot{min-height:230px;border-radius:24px;border:3px dashed #aeb6d0;display:grid;place-items:center;align-content:center;color:#949dbb;background:#ffffff55}.empty-slot span{font-size:42px}.empty-slot small{font-weight:900}.vault-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.shop-hero{min-height:220px;border-radius:28px;background:radial-gradient(circle at 80%,#fff98a66,transparent 25%),linear-gradient(120deg,#f7508f,#8b4ee6);color:white;padding:28px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 9px 0 #692f9d,0 18px 36px #3c285e44}.shop-hero h2{font:900 42px 'Baloo 2';margin:5px 0}.shop-hero>span{font-size:120px;filter:drop-shadow(0 15px 8px #371b7744);animation:float 2s ease-in-out infinite}.category-title{letter-spacing:2px;margin:26px 5px 12px}.shop-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:13px}.product{position:relative;text-align:center;border-radius:22px;padding:16px;background:white;box-shadow:0 7px 0 #cbd0e2,0 12px 22px #222b501b}.product>span{display:block;font-size:57px;filter:drop-shadow(0 7px 4px #26305733)}.product h3{margin:5px 0}.product p{font-size:11px;color:#7d86a6}.product .secondary{width:100%;font-size:12px}.product.owned{background:#ecffe3}.product button:disabled{box-shadow:none;color:#6c9a58}.rank-card{position:relative;overflow:hidden;min-height:510px;border-radius:30px;padding:27px;text-align:center;color:white;background:radial-gradient(circle at 50% 30%,#ffe58055,transparent 35%),linear-gradient(145deg,#7a47e8,#45248e);box-shadow:0 10px 0 #311971,0 20px 45px #25174655}.rank-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(#ffffff10 0 8deg,transparent 8deg 20deg);animation:spin 22s linear infinite}.rank-cup{position:relative;font-size:105px;filter:drop-shadow(0 15px 6px #21115377);animation:float 2.4s ease-in-out infinite}.rank-card h2{position:relative;font:900 42px 'Baloo 2';margin:3px}.rank-card>strong{position:relative;display:block;font:900 42px 'Baloo 2';color:#ffd83d}.rank-card>small{position:relative;display:block}.rank-progress{position:relative;height:18px;border:4px solid #fff;border-radius:15px;background:#241752;margin:15px auto 5px;max-width:370px;overflow:hidden}.rank-progress i{display:block;height:100%;background:linear-gradient(90deg,#79dc13,#d7ff35)}.record{position:relative;display:flex;justify-content:center;gap:10px;margin-top:20px}.record span{min-width:90px;padding:10px;border-radius:15px;background:#1e164b77;font-size:10px}.record b{display:block;font-size:23px}.profile-panel h2{font:900 38px 'Baloo 2';margin:4px 0}.uid-copy{display:inline-block;border-radius:10px;background:#eef1fb;padding:7px 10px;font-family:monospace}.activity-list>div{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #e4e7f1}.activity-list i{font-size:24px}.activity-list span{display:grid}.activity-list small{color:#9099b8}
.social-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.friend-row{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:10px;border-radius:17px;background:#f1f4fd;padding:11px;margin:10px 0}.friend-row h3,.friend-row p{margin:0}.friend-row p{font-size:10px;color:#7d86a7;font-weight:900}.remove-friend{width:34px;height:34px;border-radius:10px;background:#ffdce2;color:#c83b53}.clan-card{position:relative;overflow:hidden;border-radius:28px;padding:25px;color:white;background:radial-gradient(circle at 90% 10%,#55f0d355,transparent 28%),linear-gradient(145deg,#203061,#101633);box-shadow:0 9px 0 #090c22}.clan-shield{display:block;font-size:75px;filter:drop-shadow(0 10px 6px #07091b)}.clan-card h2{font:900 35px 'Baloo 2';margin:5px 0}.clan-card form{display:grid;gap:10px}.clan-stats{display:flex;gap:7px}.clan-stats span{flex:1;text-align:center;border-radius:12px;background:#ffffff13;padding:9px;font-size:9px}.clan-stats b{display:block;font-size:17px}.member{display:flex;align-items:center;gap:9px;padding:8px;border-radius:13px;background:#ffffff0c;margin:6px 0}.member em{margin-left:auto;color:#8ff01c;font-style:normal;font-size:11px}.clan-card .field{background:#ffffff12;border-color:#ffffff33;color:white}.clan-card .field::placeholder{color:#ffffff88}
.market-layout{display:grid;grid-template-columns:1fr 340px;gap:18px}.market-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.market-card{position:relative;border-radius:24px;padding:13px;background:white;box-shadow:0 8px 0 #cbd0e3,0 15px 30px #222a4a22}.market-card .rarity{position:absolute;top:10px;left:10px;z-index:2}.market-art{height:145px;border-radius:18px;background:radial-gradient(circle,#fff,#e9e8ff);display:grid;place-items:center}.market-card h3{font:900 20px 'Baloo 2';margin:8px 0 2px}.market-price{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.market-price span{font-size:10px;color:#7881a0}.market-price b{color:#d89000}.market-card>button{width:100%}.sell-panel{height:max-content}.sell-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;padding:8px;border-radius:14px;background:#f0f2fa;margin:7px 0}.sell-row .gloob-svg{width:52px;height:52px}.sell-row div{display:grid}.sell-row small{color:#7a84a5}.chart-empty,.price-chart{height:150px;border-radius:18px;margin:18px 0;padding:14px;background:#161c42;color:#aab5df;display:grid;place-items:center;text-align:center;font-weight:900}.price-chart{position:relative;display:block}.price-chart svg{width:100%;height:105px;margin-top:5px}.price-chart span{font-size:10px}
.trade-screen{max-width:1100px}.trade-board{display:grid;grid-template-columns:1fr 80px 1fr;gap:14px;border-radius:28px;padding:20px;background:linear-gradient(110deg,#164f73,#28225f 50%,#5d296d);box-shadow:0 9px 0 #121534;color:white}.trade-side h3{text-align:center}.trade-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.trade-slot{aspect-ratio:1;border:2px solid #ffffff24;border-radius:15px;background:#090d2855;display:grid;place-items:center}.trade-slot>span{font-size:30px;color:#ffffff33}.trade-slot.filled{background:#ffffffee;border-color:#6df0e8}.trade-slot .gloob-svg{width:80%;height:80%}.trade-lock{display:grid;place-items:center;align-content:center;font-size:42px;color:#aafa2d}.trade-lock small{font-size:9px}.trade-picker{display:flex;gap:12px;overflow:auto;padding:15px 4px}.trade-picker .gloob-card{min-width:190px}.trade-actions{text-align:center}.trade-actions button{margin:5px}.detail-hero{text-align:center;background:radial-gradient(circle,#fff,#e9efff);border-radius:22px;padding:12px}.detail-body{padding:5px}.detail-actions{display:flex;flex-wrap:wrap;gap:8px}.ability{border-radius:14px;background:#eeeaff;padding:11px}.cosmetic-select{display:grid;gap:5px;font-size:10px;font-weight:900;margin:10px 0}.modal-card:has(.detail-hero){width:min(780px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.onboarding{position:fixed;z-index:60;inset:0;background:linear-gradient(90deg,#10173dcc,#10173d18),url('/assets/home-hub.png') center/cover;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:8vw;color:white}.onboarding:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#10173dbb,transparent 35%)}.onboard-glow{position:absolute;left:59%;top:48%;width:30vw;height:30vw;border-radius:50%;background:#9dff2d44;filter:blur(50px);animation:hubPulse 2s infinite}.onboard-copy,.onboard-character{position:relative;z-index:2}.onboard-copy h1{font:900 clamp(60px,8vw,120px)/.72 'Baloo 2';margin:18px 0;text-shadow:0 8px 0 #15183f99}.onboard-copy h1 em{font-style:normal;color:#a7f51b}.onboard-copy p{max-width:480px;font-size:18px}.onboard-copy form{display:flex;gap:10px;max-width:520px}.onboard-copy .field{background:white;font-size:18px}.onboard-copy .play-btn{white-space:nowrap;font-size:17px}.onboard-character{display:grid;place-items:center}.onboard-character .hero-gloob{position:relative!important;right:auto;bottom:auto;width:min(35vw,440px)!important;height:min(35vw,440px)!important}.onboard-character>span{font-weight:900;letter-spacing:2px;background:#111638aa;padding:8px 14px;border-radius:15px}.is-onboarding .topbar,.is-onboarding .dock{display:none}.is-onboarding #app{grid-template-rows:1fr}.is-onboarding #view{padding:0}
@keyframes hubPulse{50%{filter:brightness(1.12)}}@keyframes sparkDrift{50%{transform:translateY(16px);opacity:.55}}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.home-hub{padding:20px}.hub-copy{width:38%}.hub-copy h1{font-size:48px}.hub-menu{width:27%}.hub-gloob{left:39%;width:31%}.market-layout{grid-template-columns:1fr}.sell-panel{order:-1}.social-grid{grid-template-columns:1fr}.onboarding{padding:5vw}.onboard-copy h1{font-size:62px}.onboard-copy p{font-size:14px}.onboard-copy form{display:grid}.modal-card:has(.detail-hero){grid-template-columns:1fr}.detail-hero .reveal{height:120px}}
.battle-countdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 130px/.8 'Baloo 2';color:white;text-shadow:0 9px 0 #26205f,0 0 35px #77f5ff;animation:countPop .8s ease-in-out infinite;pointer-events:none}.battle-countdown.go{font-size:80px;color:#b6ff32;animation:goPop .65s forwards}.battle-cooldowns{position:absolute;left:20px;bottom:18px;display:flex;gap:8px;color:white}.battle-cooldowns span{position:relative;overflow:hidden;min-width:94px;border:2px solid #ffffff88;border-radius:11px;background:#111638cc;padding:6px 9px;font-size:9px;font-weight:900}.battle-cooldowns span i{position:absolute;z-index:-1;left:0;bottom:0;height:100%;width:100%;background:linear-gradient(90deg,#28c8d5,#85e617);opacity:.38}.battle-cooldowns #dodgeCd i{width:100%}@keyframes countPop{50%{transform:translate(-50%,-50%) scale(1.16)}}@keyframes goPop{to{transform:translate(-50%,-70%) scale(1.5);opacity:0}}#view{scrollbar-width:none}#view::-webkit-scrollbar{display:none}.market-art{height:170px;overflow:hidden}.market-art .gloob-svg{width:150px;height:140px}.market-card h3{position:relative}
.battle-exit{width:48px;height:48px}
@media(max-height:560px){.win-card{display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:12px}.result{margin:auto;padding:16px 24px}.result-gloob{width:112px;height:86px}.result h2{font-size:38px;margin:5px}.result p{margin:5px}.rewards{margin:9px}.result .primary{padding:8px 22px}}
.win-card{overflow:hidden}.win-card .result{z-index:2}

/* Final touch-target and short-landscape QA pass. */
.badge{min-height:44px}
.modal-card .close{width:44px;height:44px}
.remove-friend{width:44px;height:44px;border-radius:12px}
@media(max-height:480px) and (orientation:landscape){#view{padding:8px 16px 12px}.home-hub{height:calc(100dvh - 168px);min-height:0;padding:12px 14px}.hub-copy{width:40%}.hub-copy .eyebrow{padding:4px 8px;font-size:9px}.hub-copy h1{font-size:35px;margin:7px 0 4px}.hub-copy p{font-size:12px;line-height:1.18;margin:0 0 7px}.hub-copy .play-btn{min-height:40px;padding:5px 20px;font-size:18px}.hub-gloob{bottom:1%;width:27%}.hub-gloob .hero-gloob{width:min(24vw,175px)!important;height:min(24vw,175px)!important}.status-pill{padding:4px 9px;font-size:8px}.hub-menu{top:8px;right:8px;bottom:8px;gap:5px;width:27%}.hub-menu button{min-height:0;padding:6px 8px;font-size:10px}.hub-menu button>span{font-size:18px}.hub-menu small{font-size:8px}}