:root{color-scheme:dark;--bg:#0a122a;--white:#f7f8ff;--muted:#b8c8e7;--cyan:#66dcff;--pink:#db93ff;--edge:rgba(168,205,255,.28);--green:#19dcaa;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#080c1d;color:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden}button,select,input,textarea{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button:disabled{opacity:.5;cursor:default}h1,h2,h3,p{margin:0}svg{flex-shrink:0}.app{width:min(100vw,480px);height:100vh;height:100dvh;position:relative;isolation:isolate;overflow:hidden;background:#0c1530;box-shadow:0 0 60px #0008}
.wall{position:absolute;inset:0;pointer-events:none}
.specks{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}.specks span{position:absolute;border-radius:999px;background:var(--particle);width:var(--sz);height:var(--sz);left:var(--x);top:var(--y);box-shadow:0 0 16px 3px color-mix(in srgb,var(--particle) 82%,white 18%),0 0 32px 6px color-mix(in srgb,var(--particle) 50%,transparent);opacity:.58;animation:float var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay)}.specks span.leaf{border-radius:78% 22% 70% 30%/33% 68% 32% 67%;transform:rotate(var(--rot,22deg));filter:blur(.2px)}.specks span.spark{width:2px;height:2px;box-shadow:0 0 10px 1px var(--particle),0 0 26px 4px color-mix(in srgb,var(--particle) 52%,transparent)}.specks span:nth-child(3n){filter:blur(1px)}.specks span:nth-child(5n){opacity:.75}.specks span:nth-child(7n){opacity:.36}.specks span:nth-child(4n){mix-blend-mode:screen}@keyframes float{0%{transform:translate3d(-8px,11px,0) scale(.74) rotate(0deg);opacity:.24}52%{opacity:.72}100%{transform:translate3d(19px,-29px,0) scale(1.22) rotate(18deg);opacity:.30}}
.topbar{height:72px;position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:10px 17px 8px;background:linear-gradient(180deg,rgba(12,20,43,.88),rgba(15,24,49,.64));border-bottom:1px solid rgba(135,161,216,.14);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}.brand{text-align:center;line-height:1.12;letter-spacing:.08em}.brand b{display:block;font-size:18px;letter-spacing:.075em}.brand small{display:block;font-size:11px;color:#b6bdda;margin-top:4px;letter-spacing:.04em}.circle{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,rgba(149,174,233,.22),rgba(39,59,103,.42));border:1px solid rgba(172,203,255,.36);box-shadow:inset 0 1px 2px rgba(255,255,255,.21),0 8px 18px #02091755;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.circle i{width:7px;height:7px;position:absolute;right:6px;top:3px;border-radius:50%;background:#2ce3a0;border:1px solid #09263b}.topbar .circle{position:relative}
.content{position:absolute;inset:72px 0 88px;z-index:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y}.content::-webkit-scrollbar{display:none}.page{min-height:100%;padding-bottom:40px}.hero{position:relative;padding:16px 20px 0;min-height:395px;display:flex;flex-direction:column;justify-content:space-between}.hero-bottom{padding-bottom:25px;max-width:94%;text-shadow:0 2px 20px #071020a9}.hero-bottom h1{font-size:clamp(28px,8.4vw,42px);font-weight:850;line-height:1.05;letter-spacing:-.05em}.hero-bottom h1 span{color:#74c8ff}.hero-bottom p{margin-top:14px;font-size:14px;line-height:1.55;color:#e2e9ff;max-width:315px}.hero.search-hero .hero-bottom,.hero.party-hero .hero-bottom{padding-bottom:23px}.hero.saved-hero .hero-bottom{padding-bottom:26px}.hero.profile-hero{justify-content:flex-start}.home-overview{display:flex;align-items:center;gap:10px;margin-top:14px;position:relative;z-index:2}.avatar-initials{width:50px;height:50px;border:1px solid #a8bbff8f;border-radius:16px;background:linear-gradient(155deg,#5e5595ba,#1e3a64d9);display:grid;place-items:center;font-size:18px;font-weight:850;box-shadow:inset 0 1px #ffffff4a,0 0 18px #a15dba33}.user-identity{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.user-identity b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-identity small{font-size:10px;color:#c9d0ed;line-height:1.28}.rank-chip{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid rgba(163,198,255,.39);border-radius:999px;background:rgba(44,47,85,.58);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);font-size:10px;font-weight:800;white-space:nowrap}.rank-chip .medal{font-size:18px}.home-hero .hero-bottom{padding-bottom:34px}
.glass{background:linear-gradient(124deg,rgba(104,126,182,.24),rgba(48,70,128,.26) 58%,rgba(152,82,182,.18));border:1px solid rgba(178,206,253,.33);box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 25px rgba(1,8,23,.22);backdrop-filter:blur(19px) saturate(1.25);-webkit-backdrop-filter:blur(19px) saturate(1.25)}.padded{margin:0 17px}.status-card{border-radius:20px;min-height:78px;display:flex;align-items:center;gap:12px;padding:14px 13px}.status-card .online-dot{width:11px;height:11px;flex-shrink:0;border-radius:50%;background:#18e0a0;box-shadow:0 0 12px #19e6b1}.status-card .txt{flex:1;min-width:0}.status-card .txt b{display:block;font-size:13px}.status-card .txt small{display:block;color:#c3cbe3;font-size:11px;line-height:1.35;margin-top:5px}.toggle{width:44px;height:27px;appearance:none;border-radius:999px;position:relative;background:#52627c;border:1px solid #a2c0ec;box-shadow:inset 0 1px 5px #061027a8;flex-shrink:0;cursor:pointer}.toggle:before{content:"";position:absolute;width:21px;height:21px;left:3px;top:2px;border-radius:50%;background:#e0eaff;transition:transform .2s}.toggle:checked{background:#1396b3;box-shadow:0 0 12px #46dfff82;border-color:#7beeff}.toggle:checked:before{transform:translateX(17px);background:#61f1f6}
.feature-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin:17px 17px 24px;width:calc(100% - 34px);min-height:258px;overflow:hidden;border-radius:27px;border:1px solid rgba(178,214,255,.46);padding:20px 20px 22px;box-shadow:0 20px 36px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.34),0 0 0 1px rgba(102,182,255,.08)}.feature-card:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(136,219,255,.12),inset 0 -22px 40px rgba(0,0,0,.06);pointer-events:none}.feature-card:after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:26px;border-radius:24px;background:radial-gradient(circle at 20% 50%,rgba(71,223,255,.28),transparent 28%),radial-gradient(circle at 65% 50%,rgba(219,126,255,.2),transparent 28%);filter:blur(12px);pointer-events:none}.feature-card .kicker{font-size:10px;font-weight:800;letter-spacing:.18em;color:#9fe0ff;text-shadow:0 0 12px rgba(93,200,255,.22)}.feature-card strong{font-size:25px;line-height:1.08;letter-spacing:-.04em;margin-top:14px;max-width:195px;text-shadow:0 2px 20px rgba(7,16,32,.38)}.feature-card small{font-size:12px;line-height:1.55;margin-top:10px;color:#dbe5f7;max-width:188px;text-shadow:0 2px 14px rgba(7,16,32,.34)}.bright-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;min-height:43px;border:1px solid #abf6ff;border-radius:14px;padding:10px 18px;color:#072542;font-size:13px;font-weight:850;background:linear-gradient(180deg,#8af3ff 0%,#49c9fe 55%,#188ac3 100%);box-shadow:0 0 17px #42d7ff5c,inset 0 1px 0 #ffffffb8}.bright-btn:active,.glass-btn:active,.pill:active,.tile:active{transform:scale(.985)}.bright-btn.block{width:100%}
.section-head{margin:24px 19px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h2{font-size:17px;letter-spacing:-.025em}.section-head button{background:none;border:0;color:#92e2ff;font-size:11px;display:flex;align-items:center;gap:4px}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 17px}.tile{height:154px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;border-radius:24px;border:1px solid rgba(181,201,255,.4);background:linear-gradient(144deg,rgba(15,28,58,.22),rgba(36,28,68,.12)),var(--tileimg) center 19%/100% auto;padding:16px;box-shadow:inset 0 1px rgba(255,255,255,.26),0 12px 24px rgba(0,0,0,.24);position:relative;overflow:hidden}.tile:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(146,219,255,.08);pointer-events:none}.tile:after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:22px;border-radius:18px;background:radial-gradient(circle at 20% 50%,rgba(84,228,255,.20),transparent 26%),radial-gradient(circle at 72% 50%,rgba(222,130,255,.18),transparent 26%);filter:blur(11px)}.tile b{font-size:16px;text-shadow:0 2px 16px rgba(2,9,22,.45)}.tile span{display:block;font-weight:850;font-size:28px;color:#71ebff;text-shadow:0 0 14px rgba(77,225,255,.22)}.tile small{font-size:11px;color:#d2dcf0;text-shadow:0 2px 12px rgba(2,9,22,.35)}.tile .tiny-icon{font-size:20px;color:#b6f7ff;text-shadow:0 0 12px rgba(87,233,255,.22)}.tile:nth-child(1){--tileimg:url('./assets/tile-search.webp')}.tile:nth-child(2){--tileimg:url('./assets/tile-party.webp')}.tile:nth-child(3){--tileimg:url('./assets/tile-saved.webp')}.tile:nth-child(4){--tileimg:url('./assets/tile-profile.webp')}.mini-players{margin:0 17px 20px;border-radius:19px;overflow:hidden}.mini-player{display:flex;width:100%;border:0;background:transparent;color:inherit;align-items:center;gap:10px;text-align:left;padding:11px;border-bottom:1px solid rgba(177,199,247,.16)}.mini-player:last-child{border:0}.mini-player .details{flex:1;min-width:0}.mini-player b{font-size:13px}.mini-player small{display:block;font-size:11px;color:#b0c4e1;margin-top:4px}.mini-player .ready{font-size:11px;color:#3debbe}
.filter-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:5px 14px 10px}.pill{height:38px;min-width:0;border-radius:999px;border:1px solid rgba(167,193,253,.38);background:linear-gradient(130deg,rgba(91,93,153,.32),rgba(68,96,160,.28));box-shadow:inset 0 1px #ffffff28;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-weight:700;font-size:11px}.pill.active{border-color:#63e8ff;color:#97eaff;box-shadow:0 0 12px #63e8ff3c,inset 0 1px #ffffff48}.searchbox{display:flex;gap:8px;align-items:center;margin:0 17px 13px;padding:0 13px;height:46px;border-radius:16px}.searchbox input{width:100%;min-width:0;border:0;color:white;background:transparent;outline:none;font-size:13px}.searchbox input::placeholder{color:#b7c5df}.search-icon{font-size:19px;color:#92ceeb}.meta-row{display:flex;justify-content:space-between;align-items:center;margin:0 20px 10px;gap:10px;color:#b4c6e4;font-size:11px}.meta-row button{font-size:11px;color:#89defe;background:none;border:0;font-weight:750}.list-wrap{margin:0 17px}.player-card,.party-card,.notice-card{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:9px;border-radius:18px;padding:10px;min-height:75px;overflow:hidden}.player-card .detail{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}.player-card .detail b{display:flex;align-items:center;gap:5px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card .detail small{color:#b9cbe3;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar{width:47px;height:47px;flex-shrink:0;border-radius:13px;background:linear-gradient(140deg,#426288,#1e264b);border:1px solid rgba(145,219,255,.5);box-shadow:0 3px 14px #0006;object-fit:cover}.avatar.big{width:56px;height:56px}.avatar.letters{display:grid;place-items:center;font-weight:850;font-size:15px}.online-dot{display:inline-block;width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#13d6a3;box-shadow:0 0 8px #20dda5}.online-dot.off{background:#7385a8;box-shadow:none}.glass-btn{border:1px solid rgba(147,207,255,.52);background:linear-gradient(155deg,rgba(95,133,182,.4),rgba(37,66,112,.53) 55%,rgba(95,71,147,.4));box-shadow:0 3px 11px #0004,inset 0 1px #ffffff42;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;font-weight:800;border-radius:15px;padding:10px 12px;white-space:nowrap}.glass-btn.primary{background:linear-gradient(160deg,#4ddafaeb,#126baadd);border-color:#82e7ff;box-shadow:0 0 13px #35ceff52,inset 0 1px #ffffff77}.glass-btn.full{width:100%}.icon-btn{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:19px;border:1px solid rgba(156,205,255,.54);background:rgba(55,82,134,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.icon-btn.active{color:#5aebfb;border-color:#8beeff;box-shadow:0 0 10px #42b9ff55}
.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:5px 17px 14px}.segmented button{border-radius:999px;min-height:42px;border:1px solid rgba(165,196,255,.4);background:rgba(71,78,140,.3);font-size:12px;font-weight:750;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}.segmented button.active{background:linear-gradient(180deg,#78e5fd,#258abf);color:#0c2d4a;box-shadow:0 0 12px #36d4ff66;border-color:#b3eaff}.party-create{margin:0 20px 20px}.party-card{padding:15px;display:block}.party-card-head{display:flex;align-items:start;justify-content:space-between;gap:8px}.party-card h3{font-size:14px}.party-card p{font-size:11px;color:#bfcce8;margin-top:5px;line-height:1.4}.party-card small{color:#bfcce8;font-size:11px}.party-row{display:flex;justify-content:space-between;align-items:center;margin-top:13px;gap:10px}.party-faces{display:flex;align-items:center}.party-faces img,.party-faces span{width:26px;height:26px;border-radius:50%;border:1px solid #84b7e7;object-fit:cover;margin-right:-3px;background:#152e4b}.party-faces span{display:grid;place-items:center;font-size:15px;color:#a7c5ef;border-style:dashed}.small-status{font-size:10px;color:#74ecc2}.favorite-card{min-height:78px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 17px 21px;min-height:79px;border-radius:17px;overflow:hidden}.stats div{padding:15px 2px;text-align:center;border-right:1px solid rgba(172,206,255,.25)}.stats div:last-child{border:0}.stats b{font-size:17px}.stats small{display:block;font-size:10px;color:#bed3ed;margin-top:5px}.roles{display:flex;flex-wrap:wrap;gap:8px;margin:0 17px 19px}.role-pill{padding:9px 11px;border:1px solid rgba(175,217,255,.35);border-radius:999px;background:rgba(66,98,142,.31);backdrop-filter:blur(12px);font-size:12px}.role-pill.active{border-color:#5ce5ef;color:#96f5ff;box-shadow:inset 0 0 14px rgba(39,199,243,.13)}.profile-info{margin:0 17px 19px;border-radius:18px;min-height:73px;padding:16px;display:flex;align-items:center;gap:13px;width:calc(100% - 34px);text-align:left}.profile-info span{min-width:0;flex:1}.profile-info strong{display:block;font-size:14px}.profile-info small{display:block;font-size:11px;color:#b8c6e4;margin-top:6px}.hero-icons{display:flex;overflow-x:auto;gap:11px;margin:0 17px;padding-bottom:8px;scrollbar-width:none}.hero-icons::-webkit-scrollbar{display:none}.hero-portrait{flex:0 0 68px;height:68px;border:1px solid #9d90f0bd;border-radius:17px;overflow:hidden;background:linear-gradient(125deg,#2e4377,#674989);position:relative;box-shadow:0 0 8px #825ffc57}.hero-portrait img{width:100%;height:100%;object-fit:cover}.hero-portrait span{font-size:9px;position:absolute;bottom:0;left:0;right:0;text-align:center;text-shadow:0 0 8px #000,0 1px 2px #000;background:#080f28a9;padding:2px}.about{margin:12px 17px 18px;padding:15px;border-radius:18px;font-size:12px;line-height:1.55;color:#cdd7ec}.about strong{font-size:13px;color:#fff;display:block;margin-bottom:6px}.footnote{text-align:center;color:#9eb0cb;font-size:10px;line-height:1.5;padding:14px 22px 26px}
.bottomnav{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:9px;right:9px;height:75px;z-index:6;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px;border:1px solid rgba(165,194,247,.38);border-radius:29px;background:linear-gradient(145deg,rgba(44,64,114,.79),rgba(20,35,70,.8));backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset 0 1px 1px #ffffff3e,0 7px 34px #020715a0}.bottomnav button{border:1px solid transparent;background:none;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#b8c9e1;min-width:0;font-size:9px;font-weight:700;padding:4px 0}.bottomnav button.active{color:#f5fbff;border-color:rgba(163,216,255,.5);background:linear-gradient(155deg,rgba(102,175,244,.36),rgba(46,86,150,.31));box-shadow:0 0 13px #64c1ff36,inset 0 1px #ffffff4a}.bottomnav .nav-icon{font-size:23px;line-height:1.1;color:inherit}.bottomnav button.active .nav-icon{color:#61e8f3;text-shadow:0 0 10px #74f0fa}
.scrim{position:absolute;inset:0;background:rgba(4,8,23,.71);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:10;opacity:0;pointer-events:none;transition:opacity .18s}.scrim.open{opacity:1;pointer-events:auto}.sheet{position:absolute;left:0;right:0;bottom:0;max-height:min(91dvh,920px);border-radius:28px 28px 0 0;border:1px solid rgba(191,210,255,.3);border-bottom:none;z-index:11;background:linear-gradient(155deg,rgba(45,48,88,.98),rgba(12,32,57,.98) 58%,rgba(23,20,53,.99));box-shadow:0 -12px 60px #000a,0 0 15px #a968c74d;display:flex;flex-direction:column;transform:translateY(110%);transition:transform .27s cubic-bezier(.2,.8,.23,1);pointer-events:none}.sheet.open{transform:translateY(0);pointer-events:auto}.sheet-handle{width:45px;height:5px;background:#d6e6ff65;border-radius:99px;margin:10px auto 3px;flex-shrink:0}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px 13px;flex-shrink:0}.sheet-head h2{font-size:20px}.sheet-head small{color:#c4d2e8;display:block;margin-top:5px;font-size:11px}.sheet-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 17px max(26px,env(safe-area-inset-bottom));flex:1}.sheet-head .circle{width:36px;height:36px}.sheet-body .player-card,.sheet-body .party-card{margin-left:0;margin-right:0}.sheet p.info{font-size:12px;line-height:1.55;color:#c6d8ef}.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-size:12px;font-weight:750}.form-field label{color:#ccd9f6}.field{width:100%;min-height:46px;border:1px solid rgba(187,204,250,.48);border-radius:14px;background:rgba(15,27,57,.7);padding:11px 12px;color:white;outline:none}.field::placeholder{color:#8499bf}.field option{color:white;background:#182a48}textarea.field{min-height:80px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid .form-field{min-width:0}.sheet-subheader{font-size:14px;margin:16px 0 10px}.sheet .status-card{margin:14px 0}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.sheet .pill{padding:10px 12px;min-height:38px;height:auto}.empty{border:1px dashed rgba(171,203,255,.35);border-radius:18px;padding:25px 15px;text-align:center;color:#b7cae6;font-size:12px;line-height:1.5}.sheet .bright-btn{margin-top:6px}.close{font-size:19px}.notice-card{padding:12px;min-height:64px}.notice-card .detail{flex:1;font-size:12px}.notice-card small{display:block;color:#b1c6e8;margin-top:5px}.sheet .helper{color:#b2c3e3;font-size:11px;margin:9px 0 15px;line-height:1.5}.toast{position:absolute;bottom:105px;left:50%;width:max-content;max-width:calc(100% - 38px);transform:translateX(-50%) translateY(13px);padding:11px 15px;border-radius:16px;background:rgba(24,46,79,.94);color:#eaffff;border:1px solid #7ccdec84;box-shadow:0 10px 25px #0008;z-index:14;opacity:0;pointer-events:none;font-size:12px;text-align:center;transition:opacity .18s,transform .18s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:481px){.app{border-radius:24px;height:min(930px,100dvh)}}@media(max-width:350px){.hero{padding-left:16px;padding-right:16px}.hero-bottom h1{font-size:28px}.filter-row{margin-left:10px;margin-right:10px;gap:5px}.pill{font-size:10px}.rank-chip{font-size:9px;padding:6px}.bottomnav button{font-size:8px}.bottomnav .nav-icon{font-size:20px}.glass-btn{padding:9px;font-size:11px}.avatar{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.rowx{display:flex;align-items:center;gap:7px}.list-wrap>.glass-btn.full{width:100%;margin:8px 0 12px}.glass-btn.full{width:100%;margin-bottom:9px}

/* The scene is anchored to the shell so the art stays continuous behind scrolling controls. */
.app {
  container-type: size;
  background: #11162d;
  --gutter: 5cqw;
  --top-inset: max(7.5cqw, env(safe-area-inset-top));
  --home-hero-height: clamp(190px, min(66cqw, 38cqh), 320px);
  --header-height: clamp(44px, 10.4cqw, 53px);
  --nav-height: clamp(56px, 16.2cqw, 78px);
  --nav-bottom: max(4cqw, env(safe-area-inset-bottom));
  --content-top: calc(var(--top-inset) + var(--header-height) + 2.5cqw);
  --content-bottom: calc(var(--nav-bottom) + var(--nav-height) + 3cqw);
  --scene-accent: #e7a4ff;
  --particle: #f8bbf4;
}
.app[data-tab="home"] { --wallimg: url('./assets/scene-home.webp'); }
.app[data-tab="search"] { --wallimg: url('./assets/scene-search.webp'); --scene-accent: #64eaca; --particle: #60f4db; }
.app[data-tab="party"] { --wallimg: url('./assets/scene-party.webp'); --scene-accent: #ffaf81; --particle: #ffaf69; }
.app[data-tab="saved"] { --wallimg: url('./assets/scene-saved.webp'); --scene-accent: #c3b6ff; --particle: #e8f6ff; }
.app[data-tab="profile"] { --wallimg: url('./assets/scene-profile.webp'); --scene-accent: #6be9e5; --particle: #63f6e9; }

.wall {
  z-index: 0;
  background: radial-gradient(ellipse at 85% 85%, #302348, transparent 55%), #11162d;
}
.wall::before, .wall::after {
  content: "";
  position: absolute;
  inset: 0;
}
.wall::before {
  background: var(--wallimg) center top / cover no-repeat;
  filter: blur(20px);
  opacity: .65;
}
.wall::after {
  background: var(--wallimg) center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 0 135cqw, transparent 176cqw);
  mask-image: linear-gradient(#000 0 135cqw, transparent 176cqw);
}
.specks { z-index: 0; opacity: .57; }
.specks span.leaf { border-radius: 90% 0 90% 0; }
.topbar {
  height: var(--header-height);
  top: var(--top-inset);
  padding: 0 var(--gutter);
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar .circle { width: var(--header-height); height: var(--header-height); }
.brand b { font-size: clamp(14px, 3.9cqw, 20px); }
.brand small { margin-top: 2px; font-size: clamp(9px, 2.3cqw, 12px); }
.content {
  top: var(--content-top);
  bottom: var(--content-bottom);
}
.page { padding-bottom: 16px; }
.hero, .hero.home-hero, .hero.search-hero, .hero.party-hero, .hero.saved-hero, .hero.profile-hero {
  padding: 0 6.25cqw;
  min-height: clamp(185px, min(66cqw, 40cqh), 320px);
  justify-content: flex-end;
}
.hero.home-hero, .hero.profile-hero {
  min-height: var(--home-hero-height);
  justify-content: space-between;
}
.hero .hero-bottom, .hero.home-hero .hero-bottom {
  max-width: 100%;
  padding-bottom: 5.4cqw;
}
.hero-bottom h1 {
  font-size: clamp(23px, 6.55cqw, 33px);
  line-height: 1.09;
  letter-spacing: -.035em;
}
.hero-bottom h1 span { color: #50c2f6; }
.hero-bottom p {
  max-width: 48cqw;
  margin-top: 2.5cqw;
  color: #c2cdec;
  font-size: clamp(10px, 2.9cqw, 15px);
  line-height: 1.32;
}
.hero:not(.home-hero) .hero-bottom h1 { max-width: 62cqw; }
.hero:not(.home-hero) .hero-bottom p { max-width: 60cqw; }
.hero-bottom .bright-btn { margin-top: 3cqw; }
.home-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3.1cqw;
  margin-top: 3.4cqw;
  align-items: center;
}
.avatar-initials {
  width: 10.6cqw;
  height: 10.6cqw;
  border-radius: 2.7cqw;
  font-size: 4.6cqw;
  box-shadow: inset 0 1px 4px #d1d3ff75, -2px 0 10px #6fd9ff55, 0 6px 15px #080c244f;
}
.user-identity b { font-size: clamp(12px, 3.8cqw, 20px); }
.user-identity small { display: flex; align-items: flex-start; gap: 5px; font-size: clamp(8px, 2.1cqw, 11px); }
.user-identity small svg { color: #bfdbff; }
.rank-chip {
  gap: 1cqw;
  padding: 1.15cqw 1.7cqw;
  min-height: 7.2cqw;
  font-size: clamp(8px, 2.3cqw, 12px);
  background: linear-gradient(145deg, #484265b8, #222544e8);
  box-shadow: inset 0 0 9px #cfbaff40, 0 0 14px #d0a3ed36;
}
.rank-chip .medal { font-size: clamp(13px, 4cqw, 20px); }




.glass {
  background: linear-gradient(117deg, #8094cc24, #212d5680 54%, #bc78d82b);
  border-color: #b9caff50;
  box-shadow: inset 0 1px 3px #e4ddff29, 0 8px 23px #060b224d;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
.padded, .list-wrap, .searchbox, .segmented, .filter-row, .stats, .roles, .hero-icons {
  margin-inline: var(--gutter);
}
.status-card {
  min-height: 13.8cqw;
  border-radius: 4.7cqw;
  gap: 2.5cqw;
  padding: 2.4cqw 3.6cqw;
  box-shadow: inset 0 0 10px #dec2ff42, 0 6px 20px #090b3255;
}
.status-card .txt b { font-size: clamp(10px, 3.1cqw, 15px); }
.status-card .txt small { margin-top: 2px; font-size: clamp(8px, 2.3cqw, 12px); }
.status-card .online-dot { width: 8px; height: 8px; }
.status-card .online-dot.off { background: #7385a8; box-shadow: none; }
.status-card .online-dot:not(.off) { box-shadow: 0 0 0 3px #118e7059, 0 0 12px #22ffa8; }
.toggle { width: 40px; height: 24px; margin: 0; }
.toggle::before { width: 17px; height: 17px; }
.toggle:checked { background: #104d6b; border-color: #53e9ff; }
.toggle:checked::before { transform: translateX(15px); background: #19ecf9; }

.feature-card {
  width: calc(100% - 2 * var(--gutter));
  min-height: 44.6cqw;
  justify-content: space-between;
  margin: 4cqw var(--gutter) 0;
  padding: 4.1cqw 4.6cqw;
  border-radius: 4.9cqw;
  background: linear-gradient(90deg, #26345b69, transparent 75%), url('./assets/scene-home-card.webp') center / cover;
  border-color: #8da9e77a;
  box-shadow: inset 0 -2px 5px #55c7ffb0, inset 0 1px 5px #a6a6fc50, 0 3px 16px #6888f340;
}
.feature-card .kicker { display: flex; align-items: center; gap: 2cqw; font-size: clamp(8px, 2.35cqw, 12px); }
.feature-card strong { max-width: none; margin-top: 1.5cqw; font-size: clamp(19px, 5.6cqw, 28px); }
.feature-card small { max-width: none; margin-top: 1cqw; font-size: clamp(9px, 2.55cqw, 13px); }
.bright-btn {
  color: #031824;
  background: linear-gradient(180deg, #45defa, #169ed8 70%, #096caa);
  border-color: #73ebff;
  box-shadow: inset 0 0 7px #7ceaff9e, 0 0 15px #39d4ff6b;
}
.feature-card .bright-btn {
  margin-top: 3cqw;
  min-height: max(33px, 8.5cqw);
  padding: 1cqw 4.3cqw;
  border-radius: 2.6cqw;
  gap: 4.4cqw;
  font-size: clamp(10px, 3.15cqw, 16px);
}
.home-intro {
  min-height: calc(100cqh - var(--content-top) - var(--content-bottom));
  padding-bottom: 2px;
}
.home-more { margin-top: 12px; }
.bottomnav {
  bottom: var(--nav-bottom);
  left: 2cqw;
  right: 2cqw;
  height: var(--nav-height);
  border-radius: 6.3cqw;
  padding: 1.5cqw;
  background: linear-gradient(146deg, #364973a8, #1a2345cc 60%, #4a315f96);
}
.bottomnav button {
  border-radius: 4.9cqw;
  gap: 1cqw;
  font-size: clamp(8px, 2.25cqw, 11px);
}
.bottomnav .nav-icon { display: grid; place-items: center; }
.bottomnav svg { width: clamp(18px, 4.9cqw, 26px); height: auto; }
.bottomnav button.active {
  border-color: #8acffbb0;
  box-shadow: inset 0 1px 4px #c2efff87, 0 0 12px #52baff40;
}
.bottomnav button.active .nav-icon { filter: drop-shadow(0 0 5px #4ae1ff99); }
.toast { bottom: calc(var(--nav-bottom) + var(--nav-height) + 4cqw); }
.searchbox input, .field { font-size: 16px; }
.searchbox .icon-btn, .player-card .icon-btn { flex-shrink: 0; }
.party-card h3, .about, .notice-card .detail { overflow-wrap: anywhere; }
.hero-icons { touch-action: pan-x pan-y; }
.section-head button.glass-btn { padding: 7px 11px; }
.party-card, .player-card, .notice-card, .empty, .searchbox, .stats {
  border-color: color-mix(in srgb, var(--scene-accent) 32%, #6275a0);
}
@media (max-width: 350px) {
  .party-row { flex-wrap: wrap; }
  }
.dota-icon, .rank-medal {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  flex-shrink: 0;
}
.dota-icon { object-fit: contain; }
.rank-medal { position: relative; }
.rank-medal > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rank-chip .rank-medal { font-size: 1.8em; }
.rank-detail .rank-medal { font-size: 48px; }
.player-card small .rank-medal, .mini-player small .rank-medal { margin-right: 3px; }
.player-card small > .dota-icon, .mini-player small > .dota-icon { margin-right: 3px; }
.role-pill { display: inline-flex; align-items: center; gap: 5px; }
.stats b > svg { vertical-align: middle; }
.hero-portrait { padding: 0; }
.hero-picker .helper { margin-bottom: 8px; }
.chosen-heroes { display: flex; gap: 6px; min-height: 0; margin-bottom: 10px; }
.chosen-heroes .hero-portrait { flex: 0 1 62px; min-width: 0; height: 52px; }
.hero-search { margin: 0 0 12px; }
.hero-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero-choices .empty { grid-column: 1 / -1; }
.hero-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid #9eb7ea55;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  min-width: 0;
  background: #172443;
}
.hero-choice img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-choice span { display: block; padding: 5px 3px; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.hero-choice small { display: block; margin-top: 3px; color: #bbcae7; font-size: 9px; }
.hero-choice[aria-pressed="true"] { border-color: #6af0ff; background: #204964; }
.hero-choice[aria-pressed="true"] span::before { content: "\2713 "; color: #6af0ff; }
.glass-btn svg { vertical-align: middle; margin-right: 3px; }
.bottomnav[hidden] { display: none; }
.online-gate { margin-top: 34cqw; }
.online-gate .bright-btn, .online-gate .glass-btn { margin: 12px 8px 0 0; }
.online-gate a { text-decoration: none; }

.player-avatar { display: grid; place-items: center; flex-shrink: 0; position: relative; overflow: hidden; font-weight: 800; }
.player-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.party-faces .player-avatar > span { width: auto; height: auto; border: 0; margin: 0; background: transparent; }