:root{--gold:#dcc08b;--light:#fff0cf;--ink:#061b25;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:#061b25;color:#eee9dc;font:16px/1.55 var(--sans)}body{height:100svh}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:none}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;object-fit:contain}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:var(--serif);line-height:1.3;color:var(--light)}h1{font-size:38px;font-weight:500}h2{font-size:25px;font-weight:500}h3{font-size:19px;font-weight:500}p{color:#bfcbc7}small{font-size:12px;color:#b7bca9}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fbe4a7;outline-offset:3px}[hidden]{display:none!important}#app{height:100svh;display:grid;grid-template-rows:80px minmax(0,1fr) 58px;overflow:hidden}body[data-route='home'] #app,body[data-route='match'] #app,body[data-route='tutorial'] #app{display:block}.skip-link{position:fixed;left:10px;top:-100px;z-index:100}.skip-link:focus{top:10px;background:#061b25;padding:10px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.eyebrow{font:12px/1.6 var(--serif);letter-spacing:.16em;color:#d5b777}.ui-title{margin-bottom:24px}.ui-title h1{margin:8px 0}.ui-title p{font:17px/1.5 var(--serif)}.ui-header{background:url('assets/home/rail-top.webp') center/100% 100% no-repeat;z-index:20}.ui-header-inner{width:calc(100% - 96px);max-width:1800px;height:100%;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr) 270px;align-items:center;gap:36px}.ui-logo{height:78px;display:block}.ui-logo img{width:100%;height:100%}.topnav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:16px;min-width:0}.topnav a{text-align:center;white-space:nowrap;font:18px/1.4 var(--serif);color:#d8dacb;padding:18px 3px;text-shadow:0 2px 3px #000}.topnav a.active,.topnav a:hover{color:#ffecb7;text-shadow:0 0 12px #ffd17b99}.ui-account{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0}.balance{font-size:16px;color:#ade1d2;white-space:nowrap}.ui-account .avatar{--size:48px}.ui-account .quiet{padding:0;font-size:14px;min-height:30px}.mobile-menu{display:none}.ui-footer{background:url('assets/home/rail-bottom.webp') center/100% 100% no-repeat;display:flex;align-items:center;padding:10px 0 15px}.ui-footer nav{width:min(1100px,90%);margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:24px}.ui-footer a{text-align:center;font:16px/1.4 var(--serif);color:#d7ceb5}.ui-footer a.active,.ui-footer a:hover{color:#ffe6a6;text-shadow:0 0 10px #f9c56c88}.ui-page{min-height:0;min-width:0;position:relative;background:linear-gradient(90deg,#03192133,#03192111),var(--scene) center/cover;isolation:isolate;padding:32px max(4%,calc((100% - 1700px)/2));overflow:hidden}.ui-page:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#03172077,transparent 50%);z-index:-1;pointer-events:none}.ui-page>section,.ui-page>aside{min-width:0;min-height:0}.ui-paper{padding:30px 34px;border:14px solid transparent;border-image:url('assets/v7/panel-border.webp') 72 / 14px / 0 stretch;background:linear-gradient(140deg,#082530ee,#061a25e8);background-clip:padding-box;display:flex;flex-direction:column;gap:20px;min-width:0;min-height:0;box-shadow:0 20px 50px #00131b33}.ui-paper .ui-title{margin-bottom:4px}.ui-wide{width:min(920px,100%)}.ui-center{display:flex;align-items:center;justify-content:center}.ui-center .ui-paper{max-height:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 26px;color:#eedcb3;font:16px/1.5 var(--serif);text-align:center;white-space:nowrap;transition:filter .2s}.btn.primary{color:#35240b;text-shadow:0 1px #fff1b8}.btn.primary:hover{}.btn:hover{filter:brightness(1.13)}.btn.large{min-height:58px;font-size:21px;padding-inline:40px}.btn.small{min-height:36px;padding:7px 18px;font-size:14px}.btn.quiet{background:none;min-height:36px;color:#d4bd89}.btn.danger{color:#f7baa5}.btn.full{width:100%}.button-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:7px;margin:13px 0}.field>span{font-size:14px;color:#d4d4c5}input,select,textarea{background:#05202be8;border:1px solid #b0935555;padding:11px 14px;border-radius:3px;min-width:0;max-width:100%}input::placeholder,textarea::placeholder{color:#899e9f}input[type='checkbox']{accent-color:#d7b96e;width:17px;height:17px}textarea{resize:vertical;min-height:110px}.check{display:flex;align-items:center;gap:9px;font-size:14px;margin:15px 0}.password-wrap{display:flex;border:1px solid #b0935555;background:#05202b;border-radius:3px}.password-wrap input{width:0;flex:1;border:0;background:none}.password-wrap button{padding:10px;font-size:13px;color:#d9c087}.text-link,.link-btn{color:#dbc18a;font-size:14px}.ui-form-foot{text-align:center}.prototype-note{display:block;font-size:12px;color:#9faea8;line-height:1.5}.ui-lead{font:18px/1.9 var(--serif);margin:12px 0;color:#d5d9ca}.ui-tabs{display:flex;gap:20px;align-items:center;border-bottom:1px solid #d3b57044;flex-wrap:wrap;flex-shrink:0}.ui-tabs button{padding:11px 0;font:16px/1.4 var(--serif);color:#bdc5b9;border-bottom:2px solid transparent;white-space:nowrap}.ui-tabs button.active{border-color:#e3c181;color:#ffe4b2}.avatar{--size:64px;display:inline-block;position:relative;width:var(--size);height:var(--size);flex:none;vertical-align:middle}.avatar-photo{position:absolute;inset:16%;width:68%;height:68%;border-radius:50%;object-fit:cover;background:#0a2931}.avatar-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #0006)}.avatar.large{--size:126px}.avatar.small{--size:48px}.identity{display:flex;align-items:center;gap:16px;min-width:0}.identity>div{min-width:0}.identity h2,.identity h3{overflow-wrap:anywhere}.item-art{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0}.item-art>img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.scenery-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid #c5ad7855}.ui-person{position:relative;width:100%;height:100%;min-height:0}.ui-figure{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 20px #00121b44)}.ui-pet{position:absolute;bottom:3%;right:0;width:31%;height:27%;background:url('assets/v7/fox.webp') center/contain no-repeat}.ui-pet.pet-male{background-image:url('assets/v7/tiger.webp')}.ui-showcase{position:relative;min-height:0;display:flex;flex-direction:column}.ui-showcase>.ui-person{position:absolute;inset:0}.ui-showcase-name{position:relative;z-index:2;margin-top:auto;text-align:center;padding:20px 10px;background:radial-gradient(ellipse,#041d2ade,transparent 75%)}.ui-showcase-name p{color:#d5d8c2}.ui-showcase-name .button-row{justify-content:center}.ui-showcase>.ui-title{position:relative;z-index:2}.ui-game-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;width:100%}.ui-game-choices button{display:flex;flex-direction:column;align-items:center;gap:12px;border-bottom:1px solid #d0b57b44;padding:15px 8px;color:#d7d2bb;font:18px/1.4 var(--serif);min-width:0}.ui-game-choices img{height:76px;width:100%;object-fit:contain}.ui-game-choices button.active{color:#ffebb9;border-color:#ecc77b;background:radial-gradient(ellipse at bottom,#d4a95028,transparent 70%)}.ui-game-choices button.active img{filter:drop-shadow(0 0 7px #e5c17266)}.ui-auth{display:grid;grid-template-columns:1fr 460px;gap:7%;align-items:center}.ui-auth-art{height:100%;position:relative;overflow:hidden}.ui-auth-art>img:first-child{position:absolute;left:-5%;top:0;width:105%;height:125%;object-fit:contain;object-position:center top}.ui-auth-art .ui-poem{position:absolute;bottom:5%;left:15%;width:80%;height:auto;filter:drop-shadow(0 3px 8px #00141d)}.ui-auth .ui-paper{gap:12px;max-height:100%}.ui-auth h1{font-size:33px}.ui-auth form>.btn{margin-top:16px}.ui-creator{display:grid;grid-template-columns:1fr 480px;gap:5%}.ui-creator .ui-paper{gap:17px;justify-content:center}.ui-step{display:flex;gap:20px;font-size:13px;color:#95a9a6}.ui-step .active{color:#ffe0a0}.ui-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.ui-options button{display:flex;align-items:center;flex-direction:column;gap:7px;font-size:14px;color:#c9cbb8;padding:6px;border:1px solid #b9a26133}.ui-options button.active{border-color:#dbbf7c;background:#a9944c19}.ui-options img{width:82px;height:82px;object-fit:cover;aspect-ratio:1}.ui-feature-trio{display:grid;gap:18px;margin:24px 0;font:21px var(--serif);color:#e3cf9d}.ui-open{width:min(1200px,100%);text-align:center}.ui-open .ui-game-choices{margin:36px 0}.ui-open .ui-game-choices img{height:130px}.ui-open .button-row{justify-content:center;margin-top:35px}.ui-welcome{width:880px;text-align:center;align-items:center}.ui-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;width:100%;margin:20px 0}.ui-rewards .item-art{height:135px;margin-bottom:12px}.ui-realm{display:grid;grid-template-columns:40% minmax(0,1fr);gap:5%}.ui-nameplate{position:absolute;bottom:0;left:5%;right:5%;display:flex;align-items:center;justify-content:center;gap:15px;padding:20px;background:radial-gradient(ellipse,#041c2be8,transparent 80%)}.ui-realm-content{display:flex;flex-direction:column;justify-content:center;gap:28px}.ui-realm-content>.ui-title{margin-bottom:0}.ui-game-description{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 14px}.ui-game-description .btn{margin-top:14px}.ui-bottom-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:20px 0;border-top:1px solid #ddbd7733}.ui-bottom-pair h3{margin:5px 0}.ui-bottom-pair p{font-size:14px}.ui-lobby{display:grid;grid-template-columns:38% minmax(0,1fr);gap:5%;align-items:stretch}.ui-lobby-controls{align-self:center;max-height:100%;gap:24px}.ui-lobby .ui-game-choices{gap:8px}.ui-lobby .ui-game-choices img{height:56px}.ui-lobby .ui-game-choices button{font-size:16px}.ui-fields{display:flex;gap:24px}.ui-fields .field{flex:1}.ui-profile{display:grid;grid-template-columns:360px minmax(0,1fr);gap:7%;padding-inline:7%}.ui-profile-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;background:linear-gradient(90deg,#031b2ad4,transparent);padding:20px}.ui-profile-info>.avatar{--size:115px}.ui-profile-info h1{font-size:40px}.ui-title-badge{font:16px var(--serif);color:#e5c991}.ui-bio{font:17px/1.7 var(--serif);max-width:330px}.ui-stat-row{display:flex;gap:45px;padding-block:10px}.ui-stat-row strong,.ui-stat-row small{display:block}.ui-stat-row strong{font:27px var(--serif);color:#f0d595}.ui-profile-scene{position:relative;display:flex;flex-direction:column;align-items:center}.ui-profile-scene .ui-person{flex:1;height:0;min-height:0}.ui-profile-scene .ui-pet{width:25%;height:24%;right:10%;bottom:3%}.ui-cosmetic-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;width:min(650px,100%);padding:15px 25px;border-block:1px solid #dbc48d55;background:#051e2ac2;flex-shrink:0}.ui-cosmetic-strip button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.ui-cosmetic-strip .item-art,.ui-cosmetic-strip .avatar{height:56px;width:56px;--size:56px}.ui-cosmetic-strip span:last-child{font:14px var(--serif);color:#dfcfaa}.ui-collapse{position:fixed;right:24px;bottom:76px;padding:10px 16px;border:1px solid #b89b5d99;background:#062330e8;z-index:30;font:14px var(--serif);color:#e8d6ad}.focus-view #app{grid-template-rows:1fr}.focus-view .ui-header,.focus-view .ui-footer,.focus-view .ui-profile-info,.focus-view .ui-cosmetic-strip{display:none}.focus-view .ui-profile{grid-template-columns:1fr;padding:28px 12%;height:100svh}.focus-view .ui-profile-scene{height:100%}.focus-view .ui-profile-scene .ui-pet{right:15%;width:24%;height:26%}.focus-view .ui-collapse{bottom:24px}.ui-catalog{display:grid;grid-template-columns:33% minmax(0,1fr);gap:5%}.ui-catalog-content{display:flex;flex-direction:column;gap:20px;min-height:0}.ui-catalog .ui-tabs{gap:8px 20px}.ui-catalog .ui-tabs button{font-size:14px;padding:8px 0}.ui-search{display:flex;gap:12px;flex-shrink:0}.ui-search input{min-width:0;flex:1}.ui-search select{max-width:180px}.ui-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px;flex:1;min-height:0}.ui-product{display:grid;grid-template-columns:42% minmax(0,1fr);gap:15px;padding:20px 16px;border:1px solid #bca36377;background:linear-gradient(135deg,#15323de8,#071d28e8);min-width:0;min-height:0}.ui-product-art{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.ui-product-art .item-art{height:100%;max-height:180px}.ui-product>div:last-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;min-width:0}.ui-product h3{font-size:19px;overflow-wrap:anywhere}.ui-product p{color:#dfc892}.ui-product .btn{font-size:13px;padding-inline:13px;min-height:34px}.pagination{display:flex;align-items:center;justify-content:center;gap:25px;flex-shrink:0}.pagination span{font-size:13px;color:#c7b88e}.ui-missions{display:grid;grid-template-columns:36% minmax(0,1fr);gap:5%;align-items:center}.ui-mission-intro{height:100%;position:relative}.ui-mission-intro>img{position:absolute;bottom:0;width:100%;height:78%;object-fit:contain;object-position:bottom}.ui-missions .ui-paper{gap:24px}.ui-quests{display:flex;flex-direction:column;gap:20px}.ui-quests article{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:24px;padding:10px 0 20px;border-bottom:1px solid #cbb47533}.ui-quests h3{font-size:22px;margin-bottom:8px}.ui-quests p{font-size:14px}.ui-quests article>div:last-child{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.ui-quests strong{font:22px var(--serif);color:#e5ce9b}.progress{height:4px;background:#ffffff16;margin:12px 0;overflow:hidden}.progress span{display:block;max-width:100%;height:100%;background:linear-gradient(90deg,#6a9e8b,#dbc482)}.ui-levels{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center}.ui-levels .avatar{--size:100px}.ui-levels h3{margin:10px 0}.ui-ranking{display:grid;grid-template-columns:38% minmax(0,1fr);gap:5%;align-items:center}.ui-champion{height:100%;position:relative}.ui-champion>img{position:absolute;bottom:0;width:100%;height:83%;object-fit:contain}.ui-champion .ui-showcase-name{position:absolute;bottom:0;left:0;right:0}.ui-ranks{display:flex;flex-direction:column;gap:10px}.ui-ranks>a{display:flex;align-items:center;gap:20px;padding:13px 0;border-bottom:1px solid #a6936433}.ui-ranks>a>b{font:26px var(--serif);color:#d7b775;width:24px}.ui-ranks>a>strong{margin-left:auto;color:#e7cc95;font:22px var(--serif)}.ui-ranks h3{font-size:20px}.ui-sects{display:flex;flex-direction:column;justify-content:center;gap:35px}.ui-sects>header{text-align:center}.ui-sects>header .button-row{justify-content:center}.ui-sect-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:1250px;width:100%;margin:0 auto}.ui-sect-list .ui-paper{align-items:center;text-align:center;padding:28px 20px;gap:16px}.ui-sect-list .item-art{height:150px}.ui-crest{display:grid;place-items:center;width:110px;height:120px;font:48px serif;color:#f5d79c;background:url('assets/v7/frame-3.webp') center/contain no-repeat;text-shadow:0 2px 3px #00131e}.ui-sect-home{display:grid;grid-template-columns:35% minmax(0,1fr);gap:6%;align-items:center}.ui-sect-identity{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}.ui-sect-identity .ui-crest{width:150px;height:160px;font-size:60px}.ui-sect-identity .ui-title{margin-bottom:0}.ui-people-list{display:flex;flex-direction:column;gap:14px}.ui-people-list>a,.friend-row{display:flex;align-items:center;gap:18px;padding:10px 0;border-bottom:1px solid #b8a57233}.friend-row>div{flex:1}.friend-row strong,.friend-row small{display:block}.ui-chat{display:grid;grid-template-columns:300px minmax(0,1fr);gap:50px;padding-inline:max(5%,calc((100% - 1550px)/2))}.ui-contacts{display:flex;flex-direction:column;gap:20px}.ui-contacts>a{display:flex;gap:15px;align-items:center;padding:14px;border:1px solid transparent;background:#08293477}.ui-contacts>a.active{border-color:#bba46566;background:#163c46ab}.ui-contacts h3{font-size:19px}.ui-contacts .ui-title{margin-bottom:0}.ui-conversation{display:flex;flex-direction:column;min-height:0;padding:25px;background:linear-gradient(#0a2b37df,#061f2beb);border:1px solid #c8af7655;gap:15px}.ui-conversation>header{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-shrink:0}.messages{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:15px 4px}.messages::-webkit-scrollbar{display:none}.message{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:16px;gap:4px}.message.me{align-items:flex-end}.bubble{padding:12px 18px;border-radius:12px 12px 12px 0;background:#25434f;max-width:80%;overflow-wrap:anywhere}.message.me .bubble{background:#365a54;border-radius:12px 12px 0 12px}.ui-chat-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.ui-chat-empty img{height:75%;max-height:260px;object-fit:contain;opacity:.75}.ui-chat-empty h3{font-size:20px}.emote-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;height:58px;flex-shrink:0}.emote-grid button{min-width:0;min-height:0;padding:0;display:flex;justify-content:center}.sticker-art{display:block;width:58px;max-width:100%;aspect-ratio:426/410;background:url('assets/ui/stickers.webp') 0 0/300% 300% no-repeat}.sticker-1{background-position:50% 0}.sticker-2{background-position:100% 0}.sticker-3{background-position:0 50%}.sticker-4{background-position:50% 50%}.sticker-5{background-position:100% 50%}.sticker-6{background-position:0 100%}.sticker-7{background-position:50% 100%}.sticker-8{background-position:100% 100%}.bubble:has(.sticker-art){background:none;padding:0}.bubble .sticker-art{width:140px}.chat-compose{display:flex;gap:12px;flex-shrink:0}.chat-compose input{min-width:0;flex:1}.ui-versus{display:flex;align-items:center;justify-content:center;gap:55px;margin:20px 0;text-align:center}.ui-versus h2,.ui-versus h3{margin-top:12px}.ui-queue,.ui-room,.ui-result{max-width:900px;text-align:center;align-items:center}.ui-room .field{width:100%}.ui-queue>.avatar{--size:150px}.ui-mail-list{display:flex;flex-direction:column;gap:20px}.ui-mail-list button{display:flex;align-items:center;gap:22px;text-align:left;padding:18px;border-bottom:1px solid #c8b27844}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:18px 0;border-bottom:1px solid #c8b27844}.setting-row p{font-size:14px;margin-top:7px}.switch{background:#31454a;border:1px solid #81988d;border-radius:30px;width:50px;height:28px;position:relative;flex:none}.switch:before{content:'';position:absolute;width:20px;height:20px;background:#d2d5c3;left:3px;top:3px;border-radius:50%}.switch.on{background:#817239}.switch.on:before{left:25px;background:#fae5ac}.ui-item-detail{display:grid;grid-template-columns:40% minmax(0,1fr);gap:40px;max-width:950px}.ui-item-detail>.item-art{height:320px}.ui-item-detail>div{display:flex;flex-direction:column;gap:18px}.history-row{display:flex;gap:20px;justify-content:space-between;padding:18px 0;border-bottom:1px solid #ba9e5633}.ui-match{height:100svh;padding:0 3% 18px;background:linear-gradient(#03182155,#03182155),var(--scene) center/cover;display:grid;grid-template-rows:72px minmax(0,1fr)}.ui-match-top{display:flex;align-items:center;justify-content:space-between;gap:25px}.ui-match-top>div{display:flex;align-items:baseline;gap:18px}.ui-match-top h1{font-size:30px}.ui-match-top span{font-size:14px;color:#cabf9e}.ui-match-body{display:grid;grid-template-columns:minmax(180px,19%) minmax(0,1fr) minmax(220px,23%);gap:28px;min-height:0}.ui-players{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:0}.ui-player{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:22px 15px;background:linear-gradient(#15303bdc,#061d29df);border:1px solid #bea46a77;position:relative;min-height:0;flex:1}.ui-player.playing{border-color:#ead098;box-shadow:0 0 18px #dbb74d1f}.ui-player .avatar{--size:100px}.ui-player h2{font-size:22px;margin-top:6px}.ui-player p{font-size:14px}.ui-player time{font:34px/1.2 var(--serif);color:#f3d89c;padding:10px 0}.ui-captured{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;max-width:220px;min-height:24px}.ui-captured-disc{width:24px;height:24px;background:url('assets/v7/disc-ivory.webp') center/contain no-repeat;font:16px/20px serif;color:#302419}.ui-captured-disc.covered{background-image:url('assets/v7/disc-covered.webp')}.ui-board-center{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.ui-board-table{width:min(100%,calc(100svh - 155px));aspect-ratio:1;position:relative;background:url('assets/v7/board-table.webp') center/100% 100% no-repeat;flex-shrink:1;container-type:inline-size;filter:drop-shadow(0 15px 15px #00131d88)}.ui-play-surface{position:absolute;inset:12% 12% 16%;isolation:isolate;container-type:inline-size}.ui-board-grid{position:absolute;inset:5%;width:90%;height:90%;fill:none;stroke:#5a432d;stroke-width:.26;z-index:0}.ui-board-grid circle{fill:#5a432d}.ui-river{position:absolute;top:45%;height:10%;left:15%;right:15%;display:flex;align-items:center;justify-content:space-between;font:4.5cqw serif;color:#6b4e33;pointer-events:none}.ui-point{position:absolute;width:10.1%;height:10.8%;padding:0;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:2;background:none;border:0}.ui-disc{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding-bottom:13%;background:url('assets/v7/disc-ivory.webp') center/contain no-repeat;color:#ad251c;font:6.3cqw/1 serif;text-shadow:0 1px #fff5;filter:drop-shadow(0 3px 2px #3c261b66)}.ui-disc.black{color:#162c30}.ui-disc.covered{background-image:url('assets/v7/disc-covered-red.webp')}.ui-disc.black.covered{background-image:url('assets/v7/disc-covered.webp')}.ui-point.go-point{width:5.2%;height:5.4%}.ui-stone{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 1px #0005)}.ui-point.selected{filter:drop-shadow(0 0 5px #a9ffd6);z-index:3}.ui-point.target:after,.ui-square-grid button.target:after{content:'';position:absolute;inset:35%;border-radius:50%;background:#3c977f;box-shadow:0 0 8px #66e4c2}.ui-point.last{filter:drop-shadow(0 0 4px #ffe7a4)}.ui-square-grid{position:absolute;inset:2%;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--cols),minmax(0,1fr));border:1px solid #705231}.ui-square-grid button{position:relative;min-width:0;min-height:0;padding:0;display:flex;align-items:center;justify-content:center}.ui-square-grid.chess button{background:#e6d6b9}.ui-square-grid.chess button.dark{background:#284346}.ui-square-grid.chess button.selected{box-shadow:inset 0 0 0 3px #f8d57b}.ui-square-grid button.last{box-shadow:inset 0 0 0 2px #c7b25f88}.chess-token{display:block;width:90%;height:94%;background:url('assets/ui/chess-pieces.webp') 0 0/600% 200% no-repeat;filter:drop-shadow(0 3px 2px #0005)}.piece-r{background-position-x:0%}.piece-n{background-position-x:20%}.piece-b{background-position-x:40%}.piece-q{background-position-x:60%}.piece-k{background-position-x:80%}.piece-p{background-position-x:100%}.side-red{background-position-y:100%}.side-black{background-position-y:0%}.ui-square-grid.caro button{border-right:1px solid #76624977;border-bottom:1px solid #76624977}.caro-mark{font:5cqw/1 var(--serif);color:#a02a21}.caro-mark.black{color:#203f4a}.ui-board-center>p{font:14px/1.4 var(--serif);text-align:center;color:#e7d9b6;margin:3px 0}.ui-match-aside{display:flex;flex-direction:column;gap:18px;padding:25px 22px;background:linear-gradient(#08252fe3,#041d28ec);border:1px solid #b99f6466;min-height:0}.ui-match-aside .ui-tabs{justify-content:space-around;gap:15px}.move-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:10px}.move-list>div{display:flex;align-items:center;gap:14px;border-bottom:1px solid #b39a6333;padding:9px 0;font:16px var(--serif)}.ui-empty{font:16px/1.7 var(--serif);margin:auto 0;text-align:center}.ui-match-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ui-match-controls .btn{font-size:14px;padding-inline:10px;white-space:normal}.ui-match-messages{flex:1;display:flex;flex-direction:column;gap:18px;font-size:14px}.ui-match-aside .chat-compose{flex-wrap:wrap}.ui-match-aside .chat-compose input{width:100%}.ui-match-aside .prototype-note{text-align:center}.ui-match-aside .quiet{font-size:13px}dialog{width:min(680px,92vw);max-height:88svh;overflow:auto;border:16px solid transparent;border-image:url('assets/v7/panel-border.webp') 72 / 16px / 0 stretch;background:#082431;background-clip:padding-box;color:#e9e4d5;padding:30px;box-shadow:0 25px 100px #000a;scrollbar-width:thin;scrollbar-color:#a98f50 #062330}dialog::backdrop{background:#001018b8;backdrop-filter:blur(5px)}.dialog-body{display:flex;flex-direction:column;gap:20px}.modal-close{position:absolute;top:3px;right:8px;font-size:28px}.notice,.rule-box{font-size:14px;line-height:1.7;color:#bdc9c3;padding:12px 0}.item-detail{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px}.item-preview{height:230px}.item-details{display:flex;flex-direction:column;gap:12px}.detail-spec{display:flex;justify-content:space-between;gap:15px;font-size:14px;padding:8px 0}.showcase,.metrics{display:flex;justify-content:center;gap:25px}.screen-directory{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);padding:12px 22px;border:1px solid #bba364;background:#062431f2;color:#efdfbb;max-width:90vw;z-index:100;opacity:0;pointer-events:none}#toast.toast-show{opacity:1}.reduced *{animation:none!important;transition:none!important}
/* Approved homepage is isolated from interior styling. Explicit track widths fix shrink-to-content. */
.approved-home{width:100%;height:100svh;min-height:0;grid-template-rows:80px minmax(0,1fr) 104px}.approved-home .header-inner{width:calc(100% - 96px);max-width:1800px;grid-template-columns:240px minmax(0,1fr) 300px;gap:48px}.approved-home .navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;width:100%;max-width:760px;justify-self:center}.approved-home .navigation>i{display:none}.approved-home .nav-item{font-size:18px;white-space:nowrap;text-align:center;width:100%}.approved-home .footer{display:block;width:100%;padding:18px 0 24px}.approved-home .footer .games{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:calc(100% - 160px);max-width:1400px;margin:0 auto;height:100%;gap:0}.approved-home .footer .game{width:100%;height:100%;grid-template-rows:34px 22px;gap:4px;padding:0;justify-items:center}.approved-home .footer .game img{height:34px;max-height:34px;width:auto;object-fit:contain}.approved-home .footer .game span{font-size:18px;line-height:22px}.approved-home .footer .games>b{display:none}.approved-home .brand img{object-fit:contain}.approved-home .header .brand{margin:0}.approved-home .hero-copy .eyebrow{line-height:1.3}.approved-home .hero-actions .art-button{padding:12px 20px}.approved-home .character{height:auto}.approved-home .character img{object-fit:contain}
@media(min-width:1001px) and (max-height:800px){#app{grid-template-rows:66px minmax(0,1fr) 52px}.ui-header-inner{grid-template-columns:190px minmax(0,1fr) 240px;gap:25px}.ui-logo{height:64px}.topnav a{font-size:16px}.ui-page{padding-block:20px}.ui-paper{padding:20px 25px;gap:16px}.ui-title{margin-bottom:18px}.ui-title h1,h1{font-size:31px}.ui-title p{font-size:15px}.ui-game-choices img{height:55px}.ui-game-choices button{gap:9px;font-size:16px}.ui-realm-content{gap:20px}.ui-game-description .btn{margin-top:9px}.ui-bottom-pair{padding:15px 0}.ui-creator .ui-paper{gap:10px}.ui-options img{width:64px;height:64px}.ui-options button{font-size:12px}.ui-step{gap:15px}.ui-auth h1{font-size:28px}.field{margin-block:10px}.ui-auth .field input{padding:9px 12px}.ui-auth .ui-paper{gap:8px}.ui-auth form>.btn{margin-top:12px}.ui-profile-info{gap:11px}.ui-profile-info>.avatar{--size:90px}.ui-profile-info h1{font-size:32px}.ui-bio{font-size:16px}.ui-cosmetic-strip{padding-block:10px}.ui-cosmetic-strip .item-art,.ui-cosmetic-strip .avatar{height:45px;width:45px;--size:45px}.ui-catalog-content{gap:13px}.ui-product{padding:14px 12px;gap:12px}.ui-product h3{font-size:16px}.ui-product>div:last-child{gap:5px}.ui-product small{font-size:12px}.ui-product .btn{font-size:12px;min-height:30px;padding:5px 10px}.ui-product-art .item-art{max-height:130px}.ui-quests{gap:10px}.ui-quests article{padding-bottom:12px}.ui-quests h3{font-size:20px}.ui-sects{gap:22px}.ui-sect-list .ui-paper{gap:12px;padding:20px}.ui-sect-list .item-art{height:100px}.ui-crest{width:80px;height:90px}.ui-ranks>a{padding:7px 0}.ui-ranks .avatar{--size:54px}.ui-chat{gap:35px}.ui-contacts{gap:12px}.ui-contacts>a{padding:10px}.ui-conversation{padding:20px;gap:10px}.emote-grid{height:48px}.sticker-art{width:48px}.ui-match{grid-template-rows:60px minmax(0,1fr);padding-bottom:12px}.ui-match-body{gap:20px}.ui-match-top h1{font-size:26px}.ui-player{padding:14px 10px;gap:5px}.ui-player .avatar{--size:75px}.ui-player h2{font-size:20px}.ui-player time{font-size:29px;padding-block:7px}.ui-match-aside{padding:20px 16px;gap:12px}.move-list{gap:5px}.move-list>div{font-size:14px;padding:7px 0}.ui-board-table{width:min(100%,calc(100svh - 125px))}.ui-match-controls{gap:9px}.approved-home{grid-template-rows:66px minmax(0,1fr) 86px}.approved-home .header-inner{grid-template-columns:210px minmax(0,1fr) 270px;gap:32px}.approved-home .navigation{gap:22px}.approved-home .nav-item{font-size:16px}.approved-home .footer{padding:13px 0 18px}.approved-home .footer .game{grid-template-rows:30px 20px;gap:3px}.approved-home .footer .game img{height:30px;max-height:30px}.approved-home .footer .game span{font-size:16px;line-height:20px}}
@media(min-width:1001px) and (max-width:1300px){.ui-header-inner{width:calc(100% - 48px);grid-template-columns:165px minmax(0,1fr) 200px;gap:22px}.topnav{gap:12px}.topnav a{font-size:15px}.ui-account{gap:12px}.ui-account .avatar{--size:42px}.ui-account .quiet{font-size:12px}.ui-page{padding-inline:3%}.ui-paper{padding:22px}.ui-creator{grid-template-columns:1fr 450px}.ui-game-choices{gap:10px}.ui-game-choices button{font-size:15px}.ui-profile{grid-template-columns:310px minmax(0,1fr);gap:4%;padding-inline:4%}.ui-profile-info{padding:10px}.ui-catalog{grid-template-columns:28% minmax(0,1fr);gap:3%}.ui-products{gap:14px}.ui-product{grid-template-columns:36% minmax(0,1fr);gap:10px}.ui-chat{grid-template-columns:240px minmax(0,1fr);gap:28px}.ui-match-body{grid-template-columns:180px minmax(0,1fr) 225px;gap:16px}.ui-match{padding-inline:2%}.ui-match-aside{padding:18px 14px}.ui-player h2{font-size:19px}.approved-home .header-inner{width:calc(100% - 48px);grid-template-columns:195px minmax(0,1fr) 245px;gap:28px}.approved-home .navigation{gap:15px}.approved-home .nav-item{font-size:16px}.approved-home .brand{width:195px}.approved-home .account .art-button.small{font-size:14px}}
@media(max-width:1000px){body{height:auto}#app{height:auto;min-height:100svh;grid-template-rows:66px minmax(0,1fr) 58px;overflow:visible}.ui-header{position:relative}.ui-header-inner{width:calc(100% - 36px);grid-template-columns:170px 1fr;gap:18px}.ui-logo{height:65px}.ui-account{gap:14px}.topnav{display:none}.mobile-menu{display:grid;place-items:center;width:36px;height:36px}.topnav.open{display:grid;position:absolute;top:63px;left:18px;right:18px;grid-template-columns:repeat(3,1fr);gap:10px;background:#062532f7;border:1px solid #b99d5d;padding:15px;z-index:40}.topnav a{font-size:17px;padding:12px}.ui-footer nav{gap:10px}.ui-footer a{font-size:14px}.ui-page{padding:24px;min-height:calc(100svh - 124px);overflow:visible}.ui-paper{padding:24px;gap:18px}.ui-auth{display:block}.ui-auth-art{position:absolute;inset:0;opacity:.35;z-index:-1}.ui-auth-art .ui-poem{display:none}.ui-auth .ui-paper{width:min(470px,100%);margin:20px auto}.ui-creator{grid-template-columns:40% minmax(0,1fr);gap:20px}.ui-creator .ui-showcase{min-height:520px}.ui-options img{width:70px;height:70px}.ui-options{gap:9px}.ui-step{gap:10px;font-size:12px}.ui-realm{grid-template-columns:35% minmax(0,1fr);gap:25px}.ui-realm .ui-showcase{min-height:550px}.ui-realm-content{gap:22px}.ui-game-choices{gap:8px}.ui-game-choices button{font-size:14px;padding:12px 4px}.ui-game-choices img{height:50px}.ui-lobby{grid-template-columns:30% minmax(0,1fr);gap:20px}.ui-lobby .ui-showcase{min-height:540px}.ui-lobby .ui-tabs{gap:15px}.ui-profile{grid-template-columns:280px minmax(0,1fr);gap:20px}.ui-profile-info{padding:10px;gap:12px}.ui-profile-scene{min-height:550px}.ui-profile-info h1{font-size:32px}.ui-profile-info .button-row{gap:5px}.ui-profile-info .btn{font-size:14px;padding-inline:18px}.ui-cosmetic-strip{gap:15px;padding:12px}.ui-cosmetic-strip .item-art,.ui-cosmetic-strip .avatar{height:44px;width:44px;--size:44px}.ui-catalog{display:flex;flex-direction:column;gap:28px}.ui-catalog>.ui-showcase{height:330px;flex:none}.ui-catalog>.ui-showcase .ui-person{left:40%;width:60%}.ui-catalog>.ui-showcase .ui-showcase-name{max-width:45%}.ui-catalog .ui-products{min-height:440px;grid-template-rows:repeat(2,220px)}.ui-missions,.ui-ranking{grid-template-columns:28% minmax(0,1fr);gap:20px}.ui-mission-intro,.ui-champion{min-height:520px}.ui-mission-intro h1,.ui-champion h1{font-size:29px}.ui-quests article{gap:15px;grid-template-columns:minmax(0,1fr) 110px}.ui-quests h3{font-size:19px}.ui-sect-list{gap:18px}.ui-sect-list h2{font-size:23px}.ui-sect-list .ui-paper{padding:18px 10px}.ui-sect-list .btn{font-size:14px;padding-inline:15px}.ui-sect-home{grid-template-columns:30% minmax(0,1fr);gap:25px}.ui-chat{grid-template-columns:210px minmax(0,1fr);gap:20px}.ui-conversation{height:680px;padding:18px}.ui-contacts{gap:12px}.ui-contacts>a{padding:8px;gap:10px}.ui-contacts .avatar{--size:48px}.ui-contacts h3{font-size:17px}.ui-conversation>header{flex-wrap:wrap}.emote-grid{gap:4px;height:45px}.ui-match{height:auto;min-height:100svh;padding:0 18px 20px}.ui-match-body{grid-template-columns:150px minmax(0,1fr);gap:18px}.ui-match-aside{grid-column:1/-1;min-height:250px;display:grid;grid-template-columns:1fr 1fr}.ui-match-aside .ui-tabs{grid-column:1/-1}.ui-match-aside .move-list{min-height:130px}.ui-player{padding:15px 8px}.ui-player .avatar{--size:70px}.ui-player h2{font-size:18px}.ui-player time{font-size:27px}.ui-board-table{width:100%}.ui-match-controls{align-content:center}.approved-home .header-inner{width:calc(100% - 40px);grid-template-columns:180px minmax(0,1fr) 40px;gap:24px}.approved-home .navigation{display:grid;gap:18px}.approved-home .nav-item{font-size:15px}.approved-home .account{display:none}.approved-home .mobile-menu{display:block}.approved-home .footer .games{width:calc(100% - 64px)}.approved-home .brand{width:180px}.ui-collapse{bottom:76px;right:18px}}
@media(max-width:700px){h1{font-size:31px}.ui-page{padding:20px 16px}.ui-paper{padding:20px 18px}.ui-header-inner{grid-template-columns:145px 1fr;width:calc(100% - 28px)}.ui-logo{height:60px}.ui-account{gap:10px}.ui-account .balance{font-size:14px}.ui-account .quiet{display:none}.ui-account .avatar{--size:42px}.ui-footer{height:auto;min-height:70px;padding:14px 0 18px}.ui-footer nav{grid-template-columns:repeat(3,1fr);gap:10px 20px}.ui-footer a{font-size:13px}#app{grid-template-rows:66px minmax(0,1fr) auto}.ui-creator,.ui-realm,.ui-lobby,.ui-profile,.ui-missions,.ui-ranking,.ui-sect-home{display:flex;flex-direction:column;gap:20px}.ui-creator .ui-showcase,.ui-realm .ui-showcase,.ui-lobby .ui-showcase{height:370px;min-height:370px;width:100%}.ui-realm .ui-showcase{height:410px;min-height:410px}.ui-title h1{font-size:31px}.ui-options img{width:80px;height:80px}.ui-creator .ui-paper{gap:16px}.ui-step{font-size:12px;justify-content:space-between;gap:5px}.ui-game-choices button{font-size:13px;gap:8px}.ui-game-choices img{height:48px}.ui-bottom-pair{gap:20px}.ui-bottom-pair h3{font-size:18px}.ui-game-description{align-items:center;text-align:center}.ui-realm-content .ui-title{text-align:center}.ui-lobby .ui-showcase{height:300px;min-height:300px}.ui-lobby-controls{width:100%;gap:20px}.ui-lobby .ui-game-choices button{font-size:12px}.ui-lobby .ui-game-choices img{height:42px}.ui-lobby .ui-tabs{gap:12px;justify-content:space-between}.ui-lobby .ui-tabs button{font-size:14px}.ui-fields{gap:12px}.ui-profile-info{align-items:center;text-align:center;width:100%;background:none}.ui-profile-info h1{font-size:34px}.ui-profile-info>.avatar{--size:90px}.ui-profile-scene{height:550px;min-height:550px;width:100%;order:-1}.ui-profile .ui-profile-scene .ui-person{height:0;flex:1}.ui-cosmetic-strip{gap:15px;width:100%}.ui-cosmetic-strip span:last-child{font-size:13px}.focus-view .ui-profile{padding:20px;height:100svh}.focus-view .ui-profile-scene{height:100%;min-height:0}.ui-catalog>.ui-showcase{height:320px}.ui-catalog>.ui-showcase .ui-title h1{font-size:31px}.ui-catalog>.ui-showcase .ui-showcase-name{max-width:48%;padding-inline:0}.ui-catalog .ui-showcase-name h2{font-size:22px}.ui-catalog .ui-showcase-name .btn{font-size:13px;padding-inline:14px}.ui-products{gap:14px}.ui-product{grid-template-columns:1fr;grid-template-rows:130px auto;padding:15px;gap:12px}.ui-product>div:last-child{align-items:center;text-align:center}.ui-product h3{font-size:17px}.ui-product-art .item-art{height:130px}.ui-catalog .ui-products{grid-template-rows:repeat(2,300px);min-height:620px}.ui-catalog .ui-tabs{gap:8px 18px}.ui-search select{max-width:130px}.pagination{gap:15px}.pagination .btn{font-size:12px;padding-inline:15px}.ui-mission-intro,.ui-champion{min-height:0;height:300px;width:100%}.ui-mission-intro>img,.ui-champion>img{right:0;width:60%;height:100%;opacity:.8}.ui-mission-intro .ui-title,.ui-champion .ui-title{position:relative;z-index:2;max-width:55%}.ui-champion .ui-showcase-name{max-width:55%;text-align:left}.ui-missions .ui-paper,.ui-ranking .ui-paper{width:100%}.ui-quests{gap:15px}.ui-quests article{grid-template-columns:minmax(0,1fr) 100px;gap:12px}.ui-quests h3{font-size:19px}.ui-quests p{font-size:13px}.ui-tabs{gap:16px}.ui-tabs button{font-size:14px}.ui-ranks>a{gap:12px}.ui-ranks h3{font-size:19px}.ui-ranks .avatar{--size:55px}.ui-ranks>a>strong{font-size:20px}.ui-sect-list{grid-template-columns:1fr;max-width:460px;gap:24px}.ui-sect-list .ui-paper{padding:25px;gap:18px}.ui-sects{gap:30px}.ui-sect-home .ui-sect-identity{padding:20px 0}.ui-sect-home .ui-paper{width:100%}.ui-chat{grid-template-columns:1fr;gap:24px}.ui-contacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ui-contacts>.ui-title,.ui-contacts>input{grid-column:1/-1}.ui-contacts>a{padding:7px;gap:7px}.ui-contacts h3{font-size:15px}.ui-contacts small{font-size:11px}.ui-contacts .avatar{--size:40px}.ui-conversation{height:650px;padding:16px}.ui-conversation>header .avatar{--size:50px}.ui-conversation>header h2{font-size:22px}.ui-conversation>header .btn{font-size:12px;padding:5px 12px;min-height:32px}.emote-grid{height:40px;gap:4px}.chat-compose .btn{padding-inline:20px}.ui-versus{gap:25px}.ui-versus .avatar{--size:85px}.ui-versus h2{font-size:20px}.ui-rewards{gap:15px}.ui-rewards .item-art{height:100px}.ui-rewards h3{font-size:16px}.ui-people-list>a,.friend-row{gap:10px}.friend-row .avatar{--size:48px}.friend-row .btn{font-size:12px;padding-inline:13px}.ui-match{padding:0 12px 18px;grid-template-rows:65px 1fr}.ui-match-top{gap:12px}.ui-match-top>div{display:block;text-align:center}.ui-match-top h1{font-size:23px}.ui-match-top span{font-size:11px}.ui-match-top>.btn{font-size:12px;padding:6px 12px}.ui-match-body{display:flex;flex-direction:column;gap:16px}.ui-players{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ui-player{padding:12px;gap:4px}.ui-player>a{display:flex;align-items:center;gap:8px}.ui-player .avatar{--size:50px}.ui-player h2{font-size:16px;margin:0}.ui-player p{font-size:12px}.ui-player time{font-size:24px;padding:5px 0}.ui-captured-disc{width:19px;height:19px;font-size:13px;line-height:16px}.ui-player .ui-captured{min-height:20px}.ui-board-center{width:100%}.ui-board-table{width:100%;flex:none}.ui-board-center>p{font-size:13px}.ui-match-aside{display:flex;min-height:380px}.move-list{min-height:100px}.ui-match-controls{grid-template-columns:repeat(2,1fr)}.ui-item-detail{display:flex;max-width:100%;gap:20px}.ui-item-detail>.item-art{height:220px}.history-row{gap:10px;font-size:13px}.approved-home{height:100svh;min-height:580px;grid-template-rows:70px minmax(0,1fr) 88px}.approved-home .header-inner{display:flex;width:calc(100% - 36px);gap:18px}.approved-home .navigation{display:none}.approved-home .brand{width:180px;height:76px}.approved-home .footer{padding:14px 0 20px}.approved-home .footer .games{width:92%}.approved-home .footer .game{grid-template-rows:28px 18px;gap:3px}.approved-home .footer .game img{height:28px;max-height:28px}.approved-home .footer .game span{font-size:13px;line-height:18px}.ui-collapse{bottom:22px;right:16px}.ui-open .ui-game-choices{gap:8px}.ui-open .ui-game-choices img{height:65px}.ui-open .ui-title{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Artwork measured inner stone: x 17–83%, y 15.5–72%; leave carved rim outside targets. */
.ui-play-surface{inset:15.5% 17% 28%}.ui-disc.black{background-image:url('assets/v7/disc-black.webp');color:#efdebc;text-shadow:0 1px #000}.ui-disc.black.covered{background-image:url('assets/v7/disc-covered.webp')}.ui-player.playing time{text-shadow:0 0 14px #e4c67344}.ui-achievement-games{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.ui-achievement-games>div{display:flex;align-items:center;flex-direction:column;text-align:center;gap:10px}.ui-achievement-games img{height:60px;width:100%;object-fit:contain}.ui-achievement-games strong{font:16px var(--serif)}.ui-profile-info{gap:12px}.ui-profile-info>.avatar{--size:96px}.ui-profile-info .quiet{padding:3px 0;min-height:28px;font-size:13px}.ui-profile-info .ui-stat-row{padding-block:4px}.ui-profile-info .ui-bio{font-size:16px}.ui-paper{border-image-source:url('assets/v7/panel-border.webp')}
@media(min-width:701px) and (max-height:800px){.ui-profile-info{gap:8px}.ui-profile-info>.avatar{--size:76px}.ui-profile-info .ui-title-badge{font-size:14px}.ui-profile-info .ui-bio{font-size:14px;line-height:1.6}.ui-profile-info>p{font-size:14px}.ui-profile-info .ui-stat-row strong{font-size:24px}.ui-profile-info>.eyebrow{font-size:11px}.ui-profile-info h1{font-size:30px}}

.ui-paper,dialog{border-image-slice:100}
.ui-catalog .ui-showcase>.ui-person{top:85px;bottom:120px;height:auto}
@media(max-width:1000px){.ui-catalog .ui-showcase>.ui-person{top:0;bottom:0;height:100%}}
.switch[aria-checked='true']{background:#817239}.switch[aria-checked='true']:before{left:25px;background:#fae5ac}
/* v8: independent jade board, clear turn state and restrained ornamental panels. */
.ui-board-table{background-image:url('assets/v7/jade-arena.webp');width:min(100%,calc(100svh - 220px))}
.ui-play-surface{inset:13.8% 12.52% 15.87% 12.36%}
.ui-turn-banner{padding:7px 22px;border:1px solid #cdb77788;background:#092b35ed;color:#fff1c9;font-size:17px;text-align:center;border-radius:4px;flex:none}
.ui-turn-banner.opponent-turn{color:#a8e9fa;border-color:#69cfe8aa}
.ui-move-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible;color:#f6c965}
.ui-move-trail.opponent-move{color:#49d8ff}.ui-move-trail line{stroke:currentColor;stroke-width:.7;stroke-dasharray:1.4 1;opacity:.7}.ui-move-trail circle{stroke:currentColor;stroke-width:.7;fill:none}.ui-move-trail .origin{stroke-dasharray:1 1}.ui-move-trail .destination{filter:drop-shadow(0 0 2px currentColor);animation:move-arrival .8s ease-out 3}.ui-square-grid .last-from{box-shadow:inset 0 0 0 2px #e8c66b88}.ui-point.last-from:after{content:'';position:absolute;inset:14%;border:2px dashed #d9c180;border-radius:50%}
@keyframes move-arrival{0%{stroke-width:1.5;opacity:1}100%{stroke-width:.4;opacity:.45}}
.ui-player,.ui-match-aside,.ui-conversation,.ui-contacts,.ui-profile-info,.ui-catalog-content{border:12px solid transparent;border-image:url('assets/v7/panel-border.webp') 100 / 12px / 0 stretch;background-color:#071e2bef;background-clip:padding-box}
.ui-player{padding:16px 12px}.ui-player.playing{background-color:#153d43ef;filter:drop-shadow(0 0 7px #d7bb6455)}.ui-player.playing p{color:#ffe8a2;font-weight:650}.ui-match-aside{padding:20px 16px}.ui-conversation,.ui-contacts,.ui-profile-info,.ui-catalog-content{padding:22px}
.ui-realm-content.ui-paper{justify-content:center;gap:20px;align-self:center;max-height:100%;background:linear-gradient(145deg,#0b303bef,#061c29f7);background-clip:padding-box}.ui-realm-content .ui-title{margin:0}.ui-realm-welcome{padding-bottom:12px;border-bottom:1px solid #bc9d5a44}.ui-realm-welcome h2{margin:5px 0}.ui-realm-content .ui-game-description{padding:0}.ui-realm-content .ui-game-description p{margin:10px 0 20px}.ui-bottom-pair{gap:12px}.ui-bottom-pair>a{padding:12px 14px;background:#12323abf;border:1px solid #b79a5d55}.ui-bottom-pair h3{font-size:18px}.ui-realm .ui-showcase{filter:drop-shadow(0 10px 30px #87dbe333)}
.ui-close-portrait{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;mask-image:linear-gradient(#000 85%,transparent)}.ui-close-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.ui-lobby .ui-showcase-name,.ui-catalog .ui-showcase-name{z-index:2;background:linear-gradient(transparent,#061e2beb 28%);padding:28px 12px 12px}.ui-catalog .ui-close-portrait{top:75px;bottom:85px}.ui-fields{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}.ui-back{position:fixed;z-index:25;left:20px;bottom:13px;background-color:#08222a;border-radius:3px;max-width:160px}.ui-footer nav{width:min(1000px,calc(100% - 360px));margin-left:auto;margin-right:45px;gap:12px}.ui-product-art img{width:100%;height:100%;object-fit:contain}.reduced .ui-move-trail .destination{animation:none}
@media(min-width:701px) and (max-height:800px){.ui-realm-content.ui-paper{gap:12px;padding:18px 24px}.ui-realm-content .ui-title h1{font-size:30px}.ui-realm-welcome{display:none}.ui-realm-content .ui-game-description p{margin:6px 0 12px}.ui-player{gap:5px}.ui-player .avatar{--size:76px}.ui-player time{font-size:27px}.ui-catalog-content{padding:14px}}
@media(max-width:1000px){.ui-footer nav{margin-right:12px;width:calc(100% - 190px);gap:7px}.ui-footer a{font-size:13px}.ui-back{left:10px}.ui-realm-content.ui-paper{padding:20px}.ui-profile-info{padding:16px}.ui-close-portrait{position:relative;height:100%}.ui-catalog .ui-close-portrait{position:absolute;top:55px;bottom:90px}}
@media(max-width:700px){.ui-board-table{width:100%}.ui-turn-banner{font-size:15px}.ui-back{position:fixed;bottom:12px;box-shadow:0 4px 16px #0009}.ui-footer nav{width:100%;margin:0}.ui-footer{padding-bottom:65px}.ui-realm-content.ui-paper{max-height:none}.ui-player{padding:10px}.ui-match-aside{padding:16px}.ui-close-portrait{min-height:320px}.ui-conversation,.ui-contacts,.ui-catalog-content{padding:14px}.ui-lobby .ui-showcase{min-height:360px}.ui-catalog .ui-showcase{min-height:430px}}
@media(prefers-reduced-motion:reduce){.ui-move-trail .destination{animation:none}}
.ui-fields{display:grid}.ui-catalog .ui-showcase-name{max-width:100%!important}.ui-profile-info{background-color:#071e2bda}
@media(max-width:1000px){.ui-page{background-image:linear-gradient(90deg,#03192133,#03192111),var(--scene-small,var(--scene))}}
.ui-profile-scene .ui-pet,.focus-view .ui-profile-scene .ui-pet{width:49%;height:51%;right:0;bottom:0;z-index:2;filter:drop-shadow(0 0 18px #91e5ed66) drop-shadow(0 12px 12px #00131a99)}
.ui-profile-scene .ui-figure{width:83%;object-position:32% bottom}.focus-view .ui-profile-scene .ui-figure{width:88%}.ui-profile-scene .ui-cosmetic-strip{position:relative;z-index:3}
.ui-close-portrait{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent);border-radius:12px}.ui-mission-intro>img{mask-image:linear-gradient(90deg,transparent,#000 14%,#000 87%,transparent)}
@media(max-width:700px){.ui-profile-scene .ui-pet,.focus-view .ui-profile-scene .ui-pet{width:48%;height:47%;right:0}.ui-profile-scene .ui-figure{width:86%}}
.ui-catalog-content{background-color:#071e2bf7}.ui-catalog .ui-tabs button{color:#d7e1df;font-size:15px}.ui-catalog .ui-tabs button.active{color:#ffe6a3;border-color:#e9c36d}.ui-product{border:8px solid transparent;border-image:url('assets/v7/panel-border.webp') 100 / 8px / 0 stretch;background:#102d38;background-clip:padding-box;padding:12px;gap:10px}.ui-product small{color:#c2d0cc}.ui-product h3{color:#fff0ce}.ui-catalog-content>.prototype-note{color:#bfcfca}.ui-realm-content .ui-bottom-pair a:hover{background:#214752}
.ui-google{display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:10px 16px;border:1px solid #c6cccf;border-radius:4px;color:#20313a;background:#fff;font:500 15px/1.4 var(--sans)}.ui-google>span{font:bold 22px Arial;color:#4285f4}.ui-google:hover{background:#eef5f9}.ui-auth-divider{display:flex;align-items:center;gap:12px;color:#bdccc9;font-size:13px}.ui-auth-divider:before,.ui-auth-divider:after{content:'';height:1px;background:#bdccc933;flex:1}.ui-auth .ui-paper{gap:12px}.ui-auth .field{margin:9px 0}
@media(min-width:701px) and (max-height:800px){.ui-auth .ui-paper{padding:20px 28px;gap:8px}.ui-auth .ui-title h1{font-size:30px}.ui-auth .field{margin:6px 0}.ui-auth input{padding:8px 12px}.ui-auth .ui-form-foot .btn{min-height:28px;padding-block:3px}}
@media(min-width:701px) and (max-height:800px){.ui-auth .ui-title>.eyebrow{display:none}.ui-auth .field{gap:4px;margin:5px 0}.ui-auth input{padding:6px 12px;font-size:15px}.ui-auth .ui-title h1{font-size:28px}}
/* Each discipline owns its scene and board artwork, loaded only when selected. */
.ui-board-table.xiangqi{background-image:url('assets/v7/themes/xiangqi-board.webp')}.ui-board-table.jieqi{background-image:url('assets/v7/themes/jieqi-board.webp')}.ui-board-table.chess{background-image:url('assets/v7/themes/chess-board.webp')}.ui-board-table.go{background-image:url('assets/v7/themes/go-board.webp')}.ui-board-table.caro{background-image:url('assets/v7/themes/caro-board.webp')}
.ui-match[data-theme='xiangqi']{--theme-glow:#d6aa53;--panel-tone:#251c16}.ui-match[data-theme='jieqi']{--theme-glow:#c0a0ef;--panel-tone:#1c1630}.ui-match[data-theme='chess']{--theme-glow:#95dcf6;--panel-tone:#0e2739}.ui-match[data-theme='go']{--theme-glow:#accb89;--panel-tone:#14281f}.ui-match[data-theme='caro']{--theme-glow:#a9bcff;--panel-tone:#131d3b}
.ui-match .ui-player,.ui-match .ui-match-aside{background-color:var(--panel-tone)}.ui-match .ui-player.playing{box-shadow:0 0 17px color-mix(in srgb,var(--theme-glow) 35%,transparent)}.ui-match .ui-turn-banner{border-color:var(--theme-glow)}
.ui-board-table.chess .ui-square-grid.chess button{background:#d9eef1d9}.ui-board-table.chess .ui-square-grid.chess button.dark{background:#23476ddf}.ui-board-table.chess .ui-square-grid{border-color:#829fbd}
.ui-board-table.jieqi .ui-board-grid{stroke:#544264}.ui-board-table.jieqi .ui-river{color:#5b3864}.ui-board-table.go .ui-board-grid{stroke:#394b2d}.ui-board-table.go .ui-board-grid circle{fill:#394b2d}.ui-board-table.caro .ui-square-grid.caro button{border-color:#526d9280}.ui-board-table.caro .caro-mark.red{color:#a13563;text-shadow:0 1px 2px #fff}.ui-board-table.caro .caro-mark.black{color:#254e94;text-shadow:0 1px 2px #fff}
@media(max-width:1000px){.ui-match[data-theme]{background-image:linear-gradient(#03192155,#03192177),var(--scene-small)}}
/* Compact personal hub: no tall shrinking text stack. */
.ui-realm>.ui-hub{align-self:center;justify-self:center;width:min(100%,680px);padding:clamp(20px,2.5vw,36px);border:16px solid transparent;border-image:url('assets/v7/panel-border.webp') 100 / 16px / 0 stretch;background:linear-gradient(135deg,#0c303bf7,#071d28fa);background-clip:padding-box;display:grid;gap:26px;box-shadow:0 18px 50px #00151c66}
.ui-hub-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.ui-hub-heading>div>span{font:12px/1.5 var(--sans);letter-spacing:.13em;color:#bfb293}.ui-hub-heading h1{font-size:36px;line-height:1.25;margin-top:4px}.ui-hub-level{text-align:right;font:24px/1.4 var(--serif);color:#e8cc91;white-space:nowrap}.ui-hub-level small{display:block;font:13px/1.5 var(--sans);color:#c8d6d2}
.ui-hub-play{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px 18px;align-items:center;padding:22px 0;border-block:1px solid #bc9d5a44}.ui-hub-emblem img{width:62px;height:70px;object-fit:contain}.ui-hub-play h2{font:500 23px/1.35 var(--serif)}.ui-hub-play p{font:15px/1.6 var(--sans);margin-top:6px;color:#c4d4cf}.ui-hub-play>.btn{grid-column:1/-1;justify-self:start;min-width:200px;min-height:46px;font-size:19px}
.ui-hub-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ui-hub-links>a{display:flex;align-items:center;gap:12px;padding:12px 10px;border:8px solid transparent;border-image:url('assets/v7/panel-border.webp') 100 / 8px / 0 stretch;background:#12343cd9;background-clip:padding-box;min-width:0;transition:background .18s}.ui-hub-links>a:hover{background-color:#214951}.ui-hub-links .icon{width:26px;height:26px;color:#dbc48b}.ui-hub-links strong{display:block;font:500 18px/1.4 var(--serif);color:#f4e3bb}.ui-hub-links span{display:block;font:13px/1.5 var(--sans);color:#c4d3d0;margin-top:3px}
@media(min-width:701px) and (max-height:800px){.ui-realm>.ui-hub{padding:20px 24px;gap:16px}.ui-hub-heading h1{font-size:30px}.ui-hub-play{padding:16px 0;gap:10px 14px}.ui-hub-play h2{font-size:21px}.ui-hub-links>a{padding:8px}.ui-hub-links{gap:10px}.ui-realm .ui-showcase{min-height:0}}
@media(max-width:1000px) and (min-width:701px){.ui-realm{grid-template-columns:32% minmax(0,1fr);gap:18px}.ui-realm>.ui-hub{padding:18px}.ui-hub-links .icon{display:none}.ui-hub-links strong{font-size:17px}}
@media(max-width:700px){.ui-realm>.ui-hub{padding:20px 16px;gap:18px}.ui-hub-heading h1{font-size:30px}.ui-hub-play h2{font-size:21px}.ui-hub-links{gap:10px}.ui-hub-links>a{padding:9px 5px;gap:8px}.ui-hub-links .icon{width:20px;height:20px}.ui-hub-links strong{font-size:17px}.ui-hub-links span{font-size:12px}}
/* Characters are true alpha silhouettes with complete heads/hair, never rectangular portrait crops. */
.ui-close-portrait{mask-image:none;border-radius:0;overflow:visible}.ui-close-portrait img{object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 18px #03111b55)}.ui-mission-intro>img{mask-image:none;object-fit:contain}.ui-lobby .ui-showcase-name{background:radial-gradient(ellipse at bottom,#061d2beb,transparent 75%);padding:18px 12px 8px}.ui-lobby .ui-showcase-name h1{font-size:34px}.ui-lobby .ui-close-portrait{bottom:65px}.ui-catalog .ui-close-portrait{bottom:110px}
.ui-profile-info.ui-profile-card{align-self:center;width:min(100%,440px);max-height:none;padding:26px;gap:20px;background:linear-gradient(145deg,#0b2b36f7,#071b27fa);background-clip:padding-box;box-shadow:0 16px 40px #00131b55}.ui-profile-identity{display:grid;grid-template-columns:82px minmax(0,1fr);gap:18px;align-items:center}.ui-profile-identity .avatar{--size:82px}.ui-profile-info.ui-profile-card h1{font-size:30px;line-height:1.25;overflow-wrap:anywhere;margin-bottom:7px}.ui-profile-card .ui-title-badge{font:15px/1.4 var(--serif);color:#e4c58b;display:block;background:none;border:0;padding:0}.ui-profile-identity p{font-size:14px;color:#b9ccc8;margin-top:5px}.ui-profile-info.ui-profile-card .ui-bio{font:italic 15px/1.65 var(--serif);padding:14px 0;border-block:1px solid #bfa46533;color:#cdd9d5}.ui-profile-info.ui-profile-card .ui-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0}.ui-profile-card .ui-stat-row>div+div{border-left:1px solid #bfa46544;padding-left:22px}.ui-profile-card .ui-stat-row strong{font:30px/1.3 var(--serif);color:#eed292}.ui-profile-card .ui-stat-row small{font-size:13px}.ui-profile-primary{width:100%}.ui-profile-primary .btn{min-height:48px;font-size:18px}.ui-profile-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;width:100%}.ui-profile-tools>.quiet{font:14px/1.45 var(--sans);white-space:normal;text-align:left;justify-content:flex-start;min-height:34px;padding:4px 0}.ui-profile-tools>.quiet:last-child{grid-column:1/-1}.ui-profile-card>.eyebrow{font:12px/1.5 var(--sans);letter-spacing:.12em}.focus-view .ui-profile-info.ui-profile-card{display:none}
@media(min-width:701px) and (max-height:800px){.ui-profile-info.ui-profile-card{gap:13px;padding:20px}.ui-profile-identity{grid-template-columns:70px minmax(0,1fr);gap:12px}.ui-profile-identity .avatar{--size:70px}.ui-profile-info.ui-profile-card h1{font-size:26px}.ui-profile-info.ui-profile-card .ui-bio{padding:10px 0}.ui-profile-card .ui-stat-row strong{font-size:27px}}
@media(max-width:700px){.ui-profile-info.ui-profile-card{width:100%;padding:22px;gap:16px}.ui-profile-identity{grid-template-columns:76px minmax(0,1fr);gap:14px}.ui-profile-identity .avatar{--size:76px}.ui-profile-info.ui-profile-card h1{font-size:28px}}
/* Duel identity: rank medallions and floating nameplates instead of rectangular tables. */
.ui-match .ui-player{border:0;border-image:none;background:none;box-shadow:none;filter:none;padding:12px 8px;justify-content:center;gap:8px;isolation:isolate}.ui-match .ui-player:before{content:'';position:absolute;inset:7% -5%;z-index:-1;background:radial-gradient(ellipse,#051a2bdd 15%,#051a2b77 45%,transparent 73%);pointer-events:none}.ui-match .ui-player>a{display:flex;flex-direction:column;align-items:center;gap:12px}.ui-match .ui-player .avatar{--size:142px;filter:drop-shadow(0 7px 12px #0008)}.ui-match .ui-player h2{font-size:24px;text-shadow:0 2px 5px #00121f}.ui-player-rank{font:14px/1.4 var(--serif);color:#d8c194}.ui-match .ui-player .ui-player-status{font:13px/1.4 var(--sans);background:#081f2bdd;border:1px solid #92a4a355;border-radius:20px;padding:5px 12px;color:#d0dcda}.ui-match .ui-player.playing .ui-player-status{color:#fff1b5;border-color:var(--theme-glow);background:#20343de8}.ui-match .ui-player.playing .avatar{filter:drop-shadow(0 0 11px var(--theme-glow))}.ui-match .ui-player time{font:30px/1.2 var(--serif);min-width:165px;padding:12px 25px;text-align:center;color:#ffebad}.ui-match .ui-player .ui-captured{max-width:100%;justify-content:center}
.ui-match-emotes{position:relative;flex:none}.ui-match-emotes>.btn{min-height:28px;padding:0;font:14px/1.4 var(--sans)}.ui-match-emote-picker{position:absolute;left:0;bottom:36px;width:100%;min-width:210px;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#092330fa;border:1px solid #c0a56b;border-radius:8px;box-shadow:0 12px 30px #0008;z-index:20}.ui-match-emote-picker button{display:flex;justify-content:center;padding:5px;border-radius:5px}.ui-match-emote-picker button:hover{background:#294854}.ui-match-emote-picker .sticker-art{width:48px;height:48px}.ui-match-messages .sticker-art{width:72px;height:72px;margin-top:6px}.ui-match-messages{overflow-y:auto;min-height:90px;scrollbar-width:thin;scrollbar-color:#56726d transparent}
@media(min-width:701px) and (max-height:800px){.ui-match .ui-player{gap:5px;padding:6px}.ui-match .ui-player .avatar{--size:112px}.ui-match .ui-player h2{font-size:21px}.ui-match .ui-player>a{gap:6px}.ui-match .ui-player time{font-size:26px;padding:9px 22px;min-width:145px}}
@media(max-width:700px){.ui-match .ui-player{gap:5px;padding:5px}.ui-match .ui-player .avatar{--size:85px}.ui-match .ui-player>a{gap:6px}.ui-match .ui-player h2{font-size:18px}.ui-match .ui-player time{font-size:23px;min-width:120px;padding:9px 15px}.ui-player-rank{font-size:12px}.ui-match .ui-player .ui-player-status{font-size:11px}.ui-match-emote-picker{width:230px}}
/* Safe square measured against all five independent frame artworks (1254px masters). */
.ui-board-table.xiangqi .ui-play-surface,.ui-board-table.jieqi .ui-play-surface,.ui-board-table.chess .ui-play-surface,.ui-board-table.go .ui-play-surface,.ui-board-table.caro .ui-play-surface{inset:17%}
.ui-match .ui-player.playing{background:none;box-shadow:none;filter:none;border:0}
.ui-catalog-count{font:13px/1.4 var(--sans);color:#b9cfca;flex:none}.ui-page-select select{font-size:14px;min-height:32px;padding:4px 8px}.ui-catalog-content{gap:12px}.ui-equipped-aura{position:absolute;inset:10% 0 0;width:100%;height:85%;object-fit:contain;opacity:.65;pointer-events:none;z-index:0}.ui-person>.ui-figure{position:relative;z-index:1}.ui-equipped-relics{position:absolute;left:0;bottom:6%;display:flex;align-items:flex-end;gap:8px;width:28%;height:32%;z-index:2;pointer-events:none}.ui-equipped-relics>img{max-width:58%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #acdcec55)}.ui-equipped-relics>img:only-child{max-width:100%}.ui-collection-preview{height:340px;display:flex;align-items:center;justify-content:center;min-width:0}.ui-collection-preview>img{height:100%;width:100%;object-fit:contain}.ui-collection-preview>.avatar{--size:210px}.ui-collection-detail .item-details{display:flex;flex-direction:column;gap:14px}.ui-collection-detail h2{font-size:27px}.ui-collection-detail .item-details p{font-size:15px}.ui-collection-detail .item-details .btn{font-size:15px}
@media(max-width:700px){.ui-collection-preview{height:230px}.ui-collection-detail{grid-template-columns:1fr}.ui-equipped-relics{width:26%}}
dialog:has(.ui-collection-detail){width:min(840px,94vw);padding:26px}.ui-collection-detail{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px;align-items:center}.ui-collection-preview{height:380px}.ui-collection-preview>img{filter:drop-shadow(0 8px 14px #00121b55)}
@media(max-width:700px){dialog:has(.ui-collection-detail){padding:18px}.ui-collection-detail{grid-template-columns:1fr;gap:18px}.ui-collection-preview{height:240px}}

/* Mobile home: cover the hero vertically so the source's lower cut stays
   behind the footer; keep the character opaque and preserve image ratio. */
@media (max-width:700px){
  .approved-home .character{top:0;left:-30%;width:100%;height:calc(100% + 32px);opacity:1;overflow:hidden}
  .approved-home .character img{width:100%;height:100%;object-fit:cover;object-position:center top}
}

/* Shared duel panels: one primary action, paired secondary actions. */
.ui-queue,.ui-room,.ui-result{width:min(620px,100%);gap:18px;padding:26px 32px;background:radial-gradient(ellipse at 50% 32%,#174b5266,transparent 65%),linear-gradient(145deg,#072a35f2,#041721f5);background-clip:padding-box}
.ui-queue .ui-title,.ui-room .ui-title,.ui-result .ui-title{width:100%;margin:0;padding-bottom:14px;border-bottom:1px solid #bda16a55}
.ui-queue .ui-title h1,.ui-room .ui-title h1,.ui-result .ui-title h1{font-size:32px}
.ui-queue-emblem{display:grid;place-items:center;position:relative;isolation:isolate;padding:10px 26px}
.ui-queue-emblem:before{content:'';position:absolute;inset:12px;border:1px solid #cfa96777;border-radius:50%;box-shadow:0 0 32px #6ac6cc25,inset 0 0 28px #79d3d020;z-index:-1}
.ui-queue-emblem .avatar{--size:132px;filter:drop-shadow(0 8px 16px #0008)}
.ui-queue-status{display:grid;gap:5px;text-align:center}
.ui-queue-status>span{font:11px/1.5 var(--sans);letter-spacing:.16em;color:#d9bd88}
.ui-queue-status h2{font-size:32px;font-variant-numeric:tabular-nums;line-height:1.2}
.ui-queue-status p{font:14px/1.6 var(--sans);margin-top:6px;color:#c0d0cc}
:is(.ui-queue,.ui-room,.ui-result)>.button-row{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:is(.ui-queue,.ui-room,.ui-result)>.button-row>.primary{grid-column:1/-1;order:-1;min-height:50px}
:is(.ui-queue,.ui-room,.ui-result)>.button-row>.btn{width:100%;min-width:0;padding:10px 12px;white-space:normal}
.ui-room .ui-versus,.ui-result .ui-versus{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:12px;align-items:center}
:is(.ui-room,.ui-result) .ui-versus>div{min-width:0;display:grid;justify-items:center;gap:8px}
:is(.ui-room,.ui-result) .ui-versus h2,:is(.ui-room,.ui-result) .ui-versus h3{font-size:19px;overflow-wrap:anywhere}
.room-avatar-placeholder{display:grid;place-items:center;border:1px solid #c5a97177;border-radius:50%;background:#0a2931;color:#cfb67c;font:38px var(--serif)}
@media(min-width:1001px){body[data-route='room']{height:auto}body[data-route='room'] #app{height:auto;min-height:100svh;grid-template-rows:80px minmax(calc(100svh - 138px),auto) 58px;overflow:visible}body[data-route='room'] .ui-page{overflow:visible}body[data-route='room'] .ui-room{flex:none;max-height:none}}
@media(min-width:1001px) and (max-height:900px){.ui-room{gap:12px;padding:18px 26px}.ui-room .ui-versus{margin:0}.ui-room .avatar.large{--size:100px}.ui-room .notice{padding:0}}
@media(max-width:700px){
 .ui-center{padding:18px 14px;align-items:center}
 .ui-center>.ui-paper{width:100%;max-height:none;border-width:10px;padding:20px 14px;gap:16px}
 .ui-center .ui-title h1{font-size:28px;line-height:1.25}
 .ui-center .ui-title>.eyebrow{font-size:10px;letter-spacing:.12em}
 .ui-center .button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}
 .ui-center .button-row>.btn{min-width:0;width:100%;padding:10px 9px;white-space:normal;font-size:15px}
 .ui-center .button-row>:last-child:nth-child(odd){grid-column:1/-1}
 :is(.ui-queue,.ui-room,.ui-result)>.button-row>:last-child:nth-child(odd){grid-column:auto}
 :is(.ui-queue,.ui-room,.ui-result)>.button-row>.primary{grid-column:1/-1}
 .ui-queue-emblem{padding:5px 22px}
 .ui-queue-emblem .avatar{--size:112px}
 .ui-queue-status h2{font-size:29px}
 .ui-queue-status p{font-size:14px}
 .ui-room .ui-versus .avatar,.ui-result .ui-versus .avatar{--size:82px}
 .ui-center .ui-wide>.ui-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;width:100%}
 .ui-center .ui-wide>.ui-tabs button{padding:10px 6px;text-align:center;min-height:44px;white-space:normal;font-size:14px}
 .ui-footer{background-size:100% 100%;padding:20px 18px calc(66px + env(safe-area-inset-bottom,0px));min-height:0}
 .ui-footer nav{width:100%;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .ui-footer a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 3px;font-size:14px;line-height:1.25;border:1px solid #b49b5b36;background:#031b2699;border-radius:3px;white-space:nowrap}
 .ui-footer a.active{border-color:#d9b36b99;background:#23433eaa;color:#fff0bc}
 body:is([data-route="queue"],[data-route="realm"]) .ui-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 .topnav.open{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px}
 .topnav.open a{min-height:44px;padding:10px 4px;font-size:16px;border:1px solid #bb9e5d44;background:#0d313bcc}
}

/* Ascendant portraits are independent transparent layers, faded at the stage edge. */
.ui-close-portrait{position:absolute;inset:0;min-height:0;height:auto;border-radius:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 68%,transparent 100%)}
.ui-close-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 0;max-width:none}
.ui-lobby .ui-showcase{overflow:hidden}
.ui-lobby .ui-close-portrait{inset:0 -7% 35px}
.ui-lobby .ui-showcase-name{bottom:0;background:linear-gradient(transparent,#041b26d9);padding-top:34px}
.ui-mission-intro,.ui-champion{overflow:hidden}
.ui-mission-intro>img,.ui-champion>img{width:112%;max-width:none;left:-6%;right:auto;top:100px;bottom:0;height:calc(100% - 100px);object-fit:cover;object-position:center top;opacity:1;-webkit-mask-image:linear-gradient(#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 68%,transparent 100%)}
.ui-mission-intro .ui-title,.ui-champion .ui-title{position:relative;z-index:3}
.ui-catalog .ui-close-portrait{top:72px;bottom:60px}
.ui-figure-wrap{position:absolute;inset:0;overflow:hidden;z-index:1;-webkit-mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%)}
.ui-figure-wrap .ui-figure{width:100%;height:100%;object-fit:contain;object-position:center top}
.ui-person-portrait .ui-figure-wrap .ui-figure{width:88%;height:100%;object-fit:cover;object-position:center top}
:is(.ui-realm,.ui-profile,.ui-catalog) .ui-person-outfit .ui-figure-wrap .ui-figure{width:100%;height:150%;object-fit:contain;object-position:center top;max-width:none}
.ui-person .ui-pet,.ui-profile-scene .ui-pet,.focus-view .ui-profile-scene .ui-pet{width:69%;height:58%;right:-4%;bottom:0;z-index:2;background-position:center bottom;filter:drop-shadow(0 0 18px #4bdbe455) drop-shadow(0 12px 14px #00121dbb)}
.ui-person .ui-pet.pet-male{background-image:url('assets/v7/ascendant/white-tiger.webp');width:85%;height:65%;right:-10%}
.ui-realm .ui-showcase{overflow:hidden}
.ui-realm .ui-nameplate{z-index:4;bottom:0;padding:14px 16px;background:linear-gradient(90deg,#041c29ef,#041c2999,transparent);border-top:1px solid #cfb77366}
.ui-catalog .ui-showcase>.ui-person{left:0;width:100%}
.ui-lobby-controls{position:relative;border:22px solid transparent;border-image:url('assets/v7/ascendant/imperial-frame.webp') 34% / 42px / 0 stretch;padding:24px 30px;background:radial-gradient(ellipse at 50% 0,#225b6266,transparent 58%),linear-gradient(150deg,#082a35f5,#031621f5);background-clip:padding-box;box-shadow:0 22px 60px #00121baa}
.ui-lobby-controls>.ui-title{text-align:center;border-bottom:1px solid #cda55e55;padding-bottom:14px;margin:0}
.ui-lobby-controls>.ui-title h1{color:#ffe8ac;text-shadow:0 2px 3px #000,0 0 24px #cf9e4544}
.ui-lobby .ui-game-choices button{border:1px solid #ac935b55;border-radius:4px;background:linear-gradient(#0d354088,#031824bb);padding:12px 5px}
.ui-lobby .ui-game-choices button.active{border-color:#e2b96c;box-shadow:inset 0 0 25px #c79c3933,0 0 12px #c79c3922}
.ui-lobby-controls>.ui-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0}
.ui-lobby-controls>.ui-tabs button{padding:10px 5px;text-align:center;font-size:15px;background:#031a2499;border:1px solid #b09a6344;white-space:normal}
.ui-lobby-controls>.ui-tabs button.active{color:#fff0bb;background:#29484399;border-color:#dbb86b}
.ui-lobby-controls>.button-row{justify-content:center;padding-top:6px}
.ui-lobby-controls>.button-row>.primary{min-width:220px}
body[data-route='rules'] .ui-wide>.btn{align-self:center;width:min(320px,100%)}
.ui-path-selection{width:min(1400px,100%)}
.ui-path-selection .ui-title h1{color:#ffe8b0;text-shadow:0 3px 12px #00121b}
.ui-path-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:26px 0 20px}
.ui-path-card{min-width:0;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:270px;padding:24px 8px 18px;border:13px solid transparent;border-image:url('assets/v7/ascendant/imperial-frame.webp') 34% / 23px / 0 stretch;background:linear-gradient(#03212a22,#021621f2),var(--path-scene) center/cover;background-clip:padding-box;transition:filter .2s,transform .2s;box-shadow:0 15px 30px #00131b66}
.ui-path-card.active{filter:brightness(1.18);transform:translateY(-6px);box-shadow:0 0 28px #ebba5133,0 18px 35px #00131b99}
.ui-path-card:focus-visible{outline:2px solid #ffe2a2;outline-offset:4px}
.ui-path-emblem img{width:100%;height:94px;object-fit:contain;filter:drop-shadow(0 5px 12px #0009)}
.ui-path-card strong{font:24px/1.3 var(--serif);color:#fff0c9;text-shadow:0 2px 4px #000}
.ui-path-name{font:14px/1.4 var(--serif);letter-spacing:.1em;color:#d5bf90}
.ui-path-state{font-size:12px;color:#acc9cb;border-top:1px solid #bfab7166;padding-top:12px;width:90%}
.ui-path-card.active .ui-path-state{color:#ffe3a3}
.ui-path-selection>.button-row{margin-top:20px}
@media(min-width:1001px) and (max-height:800px){
 .ui-lobby-controls{gap:14px;padding:16px 24px;border-width:18px}
 .ui-lobby-controls>.ui-title{padding-bottom:8px}
 .ui-lobby-controls .ui-title h1{font-size:30px}
 .ui-lobby-controls .ui-game-choices img{height:42px}
 .ui-path-card{min-height:210px;padding-block:14px}
 .ui-path-emblem img{height:66px}
 .ui-path-cards{margin:18px 0}
}
@media(max-width:1000px){
 .ui-mission-intro>img,.ui-champion>img{top:90px;height:calc(100% - 90px)}
 .ui-path-cards{gap:8px}
 .ui-path-card{min-height:220px;border-width:9px;padding-inline:4px}
 .ui-path-card strong{font-size:20px}
 .ui-path-emblem img{height:68px}
}
@media(max-width:700px){
 .ui-lobby .ui-showcase{height:420px;min-height:420px}
 .ui-lobby .ui-close-portrait{inset:0 0 25px}
 .ui-close-portrait img{object-fit:cover;object-position:center top}
 .ui-mission-intro,.ui-champion{height:420px;min-height:420px}
 .ui-mission-intro>img,.ui-champion>img{top:80px;left:0;right:auto;width:100%;height:340px;object-fit:cover;object-position:center top}
 .ui-mission-intro .ui-title,.ui-champion .ui-title{max-width:100%;text-align:center}
 .ui-mission-intro .ui-title p{font-size:14px}
 .ui-person .ui-pet,.ui-profile-scene .ui-pet,.focus-view .ui-profile-scene .ui-pet{width:75%;height:57%;right:-5%}
 .ui-person .ui-pet.pet-male{width:91%;height:63%;right:-10%}
 .ui-lobby-controls{border-width:16px;padding:18px 12px;gap:16px}
 .ui-lobby-controls>.ui-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .ui-lobby .ui-game-choices{gap:4px}
 .ui-lobby .ui-game-choices button{font-size:12px;padding:10px 2px;gap:6px}
 .ui-lobby-controls>.button-row{display:grid;grid-template-columns:1fr;width:100%}
 .ui-lobby-controls>.button-row>.primary{min-width:0;width:100%}
 .ui-path-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
 .ui-path-card{min-height:195px;gap:6px}
 .ui-path-card:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
 .ui-path-card.active{transform:none}
 .ui-path-card strong{font-size:21px}
 .ui-path-state{padding-top:8px}
 .ui-path-selection>.button-row{grid-template-columns:1fr}
}

/* Wide shoulder portraits retain their full silhouette. */
.ui-person-portrait.ui-person-male .ui-figure-wrap .ui-figure{width:100%;height:100%;object-fit:contain;object-position:center top}
.ui-champion>img{object-fit:contain;object-position:center top}
.ui-lobby-controls{border-width:38px;padding:18px 22px}
.ui-path-card{border-width:23px;padding-inline:2px}
@media(max-width:700px){.ui-lobby-controls{border-width:26px;padding:16px 8px}.ui-path-card{border-width:18px}.ui-person-portrait.ui-person-male .ui-figure-wrap .ui-figure{object-fit:contain}}
/* Fade the image's own lower edge too, including wide waist-up portraits. */
.ui-person-portrait .ui-figure-wrap .ui-figure{width:100%;height:auto;max-height:none;-webkit-mask-image:linear-gradient(#000 68%,transparent 100%);mask-image:linear-gradient(#000 68%,transparent 100%)}
.ui-champion>img{height:auto;max-height:none;bottom:auto}
.ui-person-portrait.ui-person-male .ui-figure-wrap .ui-figure{height:auto}

/* Context navigation belongs to deep content, never the global footer. */
.ui-page:has(>.ui-close-nav){padding-top:64px}
.ui-close-nav{position:absolute;top:12px;right:max(4%,calc((100% - 1700px)/2));z-index:6;display:flex;align-items:center}
.focus-view .ui-close-nav{display:none}
.ornate-close{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:116px;min-height:42px;padding:7px 20px;border:1px solid #c9a75f;border-radius:999px;background:radial-gradient(circle at 18% 50%,#4c6f63 0 7%,transparent 8%),linear-gradient(180deg,#17433f,#08282f 55%,#061c26);color:#f2ddb0;font:600 15px/1.2 var(--serif);letter-spacing:.02em;text-shadow:0 1px 2px #000;box-shadow:inset 0 0 0 2px #061b25,inset 0 0 0 3px #8e713e88,0 4px 14px #00101888;transition:filter .18s,transform .18s}
.ornate-close:before,.ornate-close:after{content:'';position:absolute;top:50%;width:10px;height:10px;background:#a98443;border:1px solid #edcf88;transform:translateY(-50%) rotate(45deg);box-shadow:0 0 0 2px #09252a}
.ornate-close:before{left:-5px}.ornate-close:after{right:-5px}
.ornate-close>span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d0ad63;border-radius:50%;color:#ffe6a5;background:#173b37;box-shadow:inset 0 0 0 2px #071e27;font-size:12px}
.ornate-close:hover,.ornate-close:focus-visible{filter:brightness(1.18);transform:translateY(-1px)}
.modal-close.ornate-close{top:12px;right:16px;font-size:15px;z-index:2}
dialog>.dialog-body{padding-top:40px}
.ui-footer{padding:8px 30px 12px;justify-content:center}
.ui-footer nav{width:min(1200px,100%);margin:0 auto;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ui-footer a{display:flex;align-items:center;justify-content:center;min-height:36px;text-align:center;font-size:15px}
/* Explicit foreground stack for every equipped companion. */
.ui-person{isolation:isolate}
.ui-person .ui-figure-wrap{z-index:1}
.ui-person .ui-equipped-aura{z-index:0}
.ui-person .ui-pet{position:absolute;z-index:10;pointer-events:none;right:0;bottom:1%;width:72%;height:61%}
.ui-person .ui-pet.pet-male{z-index:10;right:-4%;width:88%;height:66%}
.ui-person .ui-equipped-relics{z-index:12}
.ui-showcase .ui-nameplate,.ui-showcase .ui-showcase-name{z-index:15}
/* Match: the central square gets every available pixel of height. */
.ui-match{height:100svh;min-height:0;padding:12px;display:block;overflow:hidden}
.ui-match-body{height:100%;display:grid;grid-template-columns:clamp(155px,13vw,215px) minmax(0,1fr) clamp(240px,20vw,290px);gap:12px;min-height:0}
.ui-board-center{width:100%;height:100%;min-height:0;display:grid;place-items:center;container-type:size;gap:0}
.ui-board-table{width:min(100cqw,100cqh);max-width:none;max-height:none;aspect-ratio:1;flex:none}
.ui-players{padding-block:8px;gap:18px}
.ui-match .ui-player{padding:8px 0;gap:7px}
.ui-match .ui-player .avatar{--size:clamp(90px,8vw,132px)}
.ui-match .ui-player h2{font-size:clamp(18px,1.5vw,24px);overflow-wrap:anywhere}
.ui-match .ui-player>a{gap:8px;max-width:100%}
.ui-match .ui-player time{min-width:0;width:100%;max-width:180px;font-size:28px;padding:10px 16px}
.ui-match-aside{grid-column:auto;display:flex;align-self:center;max-height:100%;height:min(100%,820px);min-height:0;padding:18px 14px;gap:12px;border:0;border-image:none;background:linear-gradient(180deg,#041925ef,#072532dd 55%,#041722ef);border-radius:16px;box-shadow:0 12px 38px #0007,inset 0 0 0 1px #c4ad6e55;position:relative}
.ui-match-aside:before,.ui-match-aside:after{content:'';height:18px;position:absolute;left:8%;right:8%;background:url('assets/home/rail-top.webp') center/100% 100% no-repeat;pointer-events:none}
.ui-match-aside:before{top:-5px}.ui-match-aside:after{bottom:-5px;transform:rotate(180deg)}
.ui-match-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding-top:7px}
.ui-match-summary>div{grid-column:1/-1;grid-row:1;text-align:center;min-width:0}
.ui-match-summary h1{font-size:25px;line-height:1.3}
.ui-match-summary span{font-size:12px;color:#c4c9b5;display:block;margin-top:3px}
.ui-match-summary>.btn{font-size:13px;padding:6px 10px;min-height:34px}
.ui-match-status{display:grid;gap:8px}
.ui-match-status .ui-turn-banner{width:100%;padding:9px 6px;font-size:14px;text-align:center}
.ui-match-status #board-message{font-size:12px;line-height:1.4;text-align:center;color:#d3d3bc}
.ui-match-aside .ui-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none}
.ui-match-aside .ui-tabs button{padding:9px 4px;font-size:15px}
.ui-match-aside .move-list,.ui-match-aside .ui-match-messages{min-height:65px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#859784 transparent}
.ui-match-aside .ui-empty{font-size:14px;line-height:1.5}
.ui-match-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:none}
.ui-match-controls>.btn{font-size:13px;min-height:36px;padding:7px 5px}
.ui-match-controls>.btn:last-child:nth-child(odd){grid-column:1/-1}
.ui-board-table .ui-point:not(.go-point){width:10.8%;height:11.1%}
.ui-board-table .ui-disc{font-size:6.6cqw}
.ui-board-table .chess-token{width:96%;height:98%}
/* Lobby: an open ceremonial selection stage, with silk standards as controls. */
.ui-lobby-open{border:0!important;border-image:none!important;box-shadow:none;background:none!important;background-clip:initial;padding:10px 0!important;gap:18px;display:flex;flex-direction:column;max-height:100%;align-self:center}
.ui-lobby-open>.ui-title{border:0;padding:0;text-align:left;margin:0;text-shadow:0 3px 12px #00141f}
.ui-lobby-open>.ui-title h1{font-size:44px;margin:5px 0}
.ui-lobby-open>.ui-title p{color:#d8e2d8}
.ui-silk-standards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-height:0}
.ui-standard{position:relative;isolation:isolate;min-width:0;padding:0;height:clamp(210px,31vh,340px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;filter:brightness(.75) saturate(.8);transition:filter .2s,transform .2s}
.ui-standard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;filter:drop-shadow(0 8px 10px #0008);pointer-events:none}
.ui-standard-title{font:clamp(18px,1.7vw,26px)/1.3 var(--serif);color:#fff1c9;text-shadow:0 2px 4px #000,0 0 10px #000;white-space:nowrap;margin-top:15px}
.ui-standard-realm{font:12px/1.4 var(--serif);letter-spacing:.08em;color:#e0d2ad;text-shadow:0 2px 3px #000}
.ui-standard-selected{font:11px/1.4 var(--sans);color:#d4e4d7;margin-top:14px;text-shadow:0 2px 4px #000}
.ui-standard.active{filter:brightness(1.15);transform:translateY(-6px)}
.ui-standard:hover{filter:brightness(1.2)}
.ui-standard:focus-visible{outline:2px solid #ffe1a0;outline-offset:3px}
.ui-lobby-config{display:flex;flex-direction:column;gap:14px;padding:18px 22px;background:linear-gradient(90deg,#041c29ef,#041c29bb 85%,transparent);border-top:1px solid #d6bd7855;border-bottom:1px solid #d6bd7844;min-height:0}
.ui-lobby-config>.ui-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0}
.ui-lobby-config>.ui-tabs button{padding:8px 3px;font-size:15px;text-align:center;white-space:normal;border:0;border-bottom:2px solid #b4a87733}
.ui-lobby-config>.ui-tabs button.active{border-bottom-color:#e5bf70;color:#fff0b9;background:linear-gradient(transparent,#b2954030)}
.ui-lobby-config .field{margin:0}.ui-lobby-config>p{font-size:13px;line-height:1.5}
.ui-lobby-config>.button-row{justify-content:flex-start;margin:0}
.ui-lobby-config>.button-row>.btn{min-height:44px;font-size:17px}
@media(min-width:1001px) and (max-height:800px){
 .ui-lobby-open{gap:10px}.ui-lobby-open>.ui-title h1{font-size:34px}.ui-lobby-open>.ui-title p{font-size:14px}
 .ui-standard{height:clamp(155px,28vh,230px)}.ui-standard-title{font-size:20px}.ui-standard-selected{margin-top:2px}
 .ui-lobby-config{gap:10px;padding:12px 16px}.ui-lobby-config select{padding:7px 10px}.ui-lobby-config>.button-row>.btn{min-height:38px}
 .ui-match-aside{gap:8px;padding:15px 12px}.ui-match-summary h1{font-size:22px}.ui-match-status #board-message{font-size:11px}
}
@media(max-width:1000px){
 .ui-match{height:auto;min-height:100svh;overflow:visible;padding:10px}
 .ui-match-body{height:auto;grid-template-columns:140px minmax(0,1fr);gap:12px}
 .ui-board-center{height:auto;aspect-ratio:1;container-type:inline-size}
 .ui-board-table{width:100%;height:auto}
 .ui-match-aside{grid-column:1/-1;width:100%;height:auto;max-height:none;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .ui-match-summary{grid-column:1}.ui-match-status{grid-column:2;grid-row:1}
 .ui-match-aside>.ui-tabs{grid-column:1/-1}.ui-match-aside>.move-list,.ui-match-aside>.ui-match-messages{height:150px}
 .ui-match-aside>.prototype-note{grid-column:1/-1}.ui-match-aside .ui-match-emotes{align-self:end}
 .ui-lobby-open{max-height:none}
}
@media(max-width:700px){
 .ui-page:has(>.ui-close-nav){padding-top:64px}.ui-close-nav{right:16px;top:12px}
 .ui-footer,body:is([data-route='queue'],[data-route='realm']) .ui-footer{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
 .ui-footer nav{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0;gap:6px}
 .ui-footer a{font-size:14px;min-height:40px}
 .ui-match{padding:8px}.ui-match-body{display:flex;flex-direction:column;gap:10px}
 .ui-players{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0}
 .ui-match .ui-player{padding:3px;gap:4px}.ui-match .ui-player>a{gap:3px}.ui-match .ui-player .avatar{--size:58px}
 .ui-match .ui-player h2{font-size:15px}.ui-match .ui-player time{font-size:21px;padding:7px 12px;max-width:150px}
 .ui-match .ui-player-rank{font-size:11px}.ui-match .ui-player .ui-player-status{font-size:11px;padding:3px 7px}
 .ui-board-center{width:100%;height:auto;aspect-ratio:1;display:block}.ui-board-table{width:100%;height:auto}
 .ui-match-aside{display:flex;min-height:0;gap:10px;padding:18px 14px}.ui-match-aside>.move-list,.ui-match-aside>.ui-match-messages{min-height:100px;max-height:180px;flex:auto}
 .ui-person .ui-pet{right:0;z-index:10}.ui-person .ui-pet.pet-male{right:-4%;z-index:10}
 .ui-lobby-open>.ui-title{text-align:center}.ui-lobby-open>.ui-title h1{font-size:34px}
 .ui-silk-standards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .ui-standard{height:205px;gap:7px}.ui-standard-title{font-size:19px}.ui-standard-realm{font-size:11px}.ui-standard-selected{margin-top:10px;font-size:10px}
 .ui-standard.active{transform:none}.ui-lobby-config{padding:16px 12px;gap:14px}
 .ui-lobby-config>.ui-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ui-lobby-config>.button-row{display:grid;grid-template-columns:1fr;width:100%}
}

.ui-standard>img{object-fit:contain}
.ui-standard-title{padding:6px 8px;background:none;border:0;border-radius:0;box-shadow:none;font-weight:700;color:#fff0c5;text-shadow:0 1px 1px #07151d,0 2px 4px #07151d,0 0 7px #07151d,0 0 14px #07151d}
.ui-standard-realm,.ui-standard-selected{text-shadow:0 1px 3px #000,0 0 8px #000,0 0 12px #000}
.ui-board-table .ui-disc{font-size:6.4cqw}
@media(max-width:700px){.ui-silk-standards{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.ui-standard{height:200px;gap:6px}.ui-standard-title{font-size:13px;padding:6px 3px}.ui-standard-realm{font-size:10px;letter-spacing:0}.ui-standard-selected{font-size:9px}}

/* Portrait-stage edges: feather all four sides, not just the lower crop.
   Intersecting masks also remove faint alpha fringes left by extracted artwork. */
.ui-close-portrait,.ui-figure-wrap,
.ui-mission-intro>img,.ui-champion>img,
.ui-person-portrait .ui-figure-wrap .ui-figure{
 border:0;outline:0;box-shadow:none;background:transparent;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 3%,#000 68%,transparent 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 3%,#000 68%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-composite:intersect;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.ui-close-portrait img{border:0;outline:0;box-shadow:none;background:transparent}

/* Do not put a rectangular caption plate over the transparent portraits. */
.ui-lobby .ui-showcase-name,.ui-catalog .ui-showcase-name{
 background:none;box-shadow:none;border:0;
 text-shadow:0 2px 4px #00101f,0 0 16px #00101f;
}
/* Keep all four feathered edges inside the visible stage; negative horizontal
   insets used to clip away the feather and leave a hard vertical edge. */
.ui-lobby .ui-close-portrait{inset:0 0 35px}
.ui-lobby .ui-close-portrait img{filter:none}
.ui-settings-icon{
 display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;aspect-ratio:1;
 padding:9px;border:1px solid #d9bc7999;border-radius:50%;background:#041e2be8;
 color:#ffe3a0;box-shadow:inset 0 0 9px #dbc07722;line-height:1;
}
.ui-settings-icon .icon{width:24px;height:24px;min-width:24px;min-height:24px;flex:none;stroke-width:1.8;display:block}
.ui-settings-icon:hover{color:#fff5d6;background:#173b43;border-color:#ffe3a0}
.ui-settings-icon:focus-visible{outline:2px solid #fff0c4;outline-offset:3px}
@media(max-width:700px){
 .ui-lobby .ui-close-portrait{inset:0 0 25px}
 .ui-header-inner{gap:10px}.ui-account{gap:7px}
 .ui-account .avatar{--size:34px}.ui-account .mobile-menu{width:32px;height:40px;flex:0 0 32px;padding:4px}
 .ui-settings-icon{display:grid;flex:0 0 44px}
}
@media(max-width:400px){
 .ui-header-inner{width:calc(100% - 24px);grid-template-columns:104px minmax(0,1fr)}
 .ui-account{gap:6px}.ui-account .balance{font-size:12px}.ui-account .avatar{--size:32px}
}

/* Profile is a full-body showcase; hide-UI opens a separate authored wallpaper. */
.ui-profile-info.ui-profile-card>.eyebrow{display:block;width:100%;text-align:center;font-weight:800;color:#ead397;letter-spacing:.1em}
.ui-profile-info.ui-profile-card h1{text-align:center;font-weight:700}
.ui-profile-identity>div{text-align:center}
.ui-profile-scene .ui-person .ui-figure-wrap{inset:0 37% 0 0;mask-image:none;-webkit-mask-image:none;z-index:1}
.ui-profile-scene .ui-person.ui-person-outfit .ui-figure{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center bottom;mask-image:none;-webkit-mask-image:none;transform:none}
.ui-profile-scene .ui-person .ui-pet{width:66%;height:80%;right:-3%;bottom:0;z-index:10;background-position:right bottom}
.ui-profile-scene .ui-person-male .ui-pet{width:70%;height:85%;right:-4%}
.ui-wallpaper-view{position:relative;width:100%;height:100svh;overflow:hidden;background:#020d16;display:grid;place-items:center}
.ui-wallpaper{width:100%;height:100%;object-fit:contain}
.focus-view #app{display:block;height:100svh;overflow:hidden}
.focus-view .ui-header,.focus-view .ui-footer{display:none}

/* Personal notification center */
.ui-notification-wrap{position:relative;display:grid;place-items:center;z-index:60}
.ui-notification-trigger{position:relative;width:43px;height:43px;display:grid;place-items:center;padding:9px;border:1px solid #b9954c;border-radius:50%;color:#f4d58c;background:radial-gradient(circle at 35% 28%,#17626b,#07323b 62%,#031d25);box-shadow:inset 0 0 0 3px #cda95b22,0 0 12px #55c9bd22;cursor:pointer}
.ui-notification-trigger:before{content:'✦';position:absolute;inset:-7px;color:#d7b260;font-size:10px;display:flex;align-items:flex-start;justify-content:center;pointer-events:none}
.ui-notification-trigger .icon{width:22px;height:22px;filter:drop-shadow(0 0 4px #eac86f66)}
.ui-notification-trigger.has-unread{animation:notification-glow 2.5s ease-in-out infinite}
.ui-notification-trigger b{position:absolute;top:-8px;right:-9px;min-width:21px;height:21px;padding:0 5px;border:2px solid #082b34;border-radius:12px;display:grid;place-items:center;background:linear-gradient(#d24d3e,#8f1e21);color:#fff6d6;font:700 11px/1 system-ui;box-shadow:0 2px 8px #0008}
@keyframes notification-glow{50%{box-shadow:inset 0 0 0 3px #e7c66f44,0 0 18px #e6bd5a66}}
.ui-notification-panel{position:absolute;top:54px;right:-74px;width:min(410px,calc(100vw - 24px));max-height:min(620px,calc(100svh - 90px));display:flex;flex-direction:column;border:14px solid transparent;border-image:url('assets/v7/panel-border.webp') 72 / 14px / 0 stretch;background:#062630f7;background-clip:padding-box;color:#e9e3d1;box-shadow:0 18px 55px #001015dd;overflow:hidden;z-index:90}
.ui-notification-panel>header{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 10px;border-bottom:1px solid #b99b5d55}
.ui-notification-panel>header div{display:flex;flex-direction:column;gap:2px}.ui-notification-panel>header strong{font:700 21px var(--serif);color:#f4deb0}.ui-notification-panel>header small{font-size:12px;color:#9fb9b6}
.ui-notification-panel>header button{border:0;background:none;color:#e0bd70;font-size:12px;cursor:pointer}
.ui-notification-panel>div{overflow:auto;max-height:440px}.ui-notification-panel>a{padding:13px;text-align:center;color:#ebc879;border-top:1px solid #b99b5d55;font:600 14px var(--serif)}
.ui-notification-row{position:relative;width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 8px;gap:11px;align-items:start;text-align:left;padding:14px;border:0;border-bottom:1px solid #b99b5d2b;background:transparent;color:#dce5df;cursor:pointer}
.ui-notification-row:hover,.ui-notification-row:focus-visible{background:#15404a88}.ui-notification-row.is-unread{background:linear-gradient(90deg,#17605e35,transparent)}.ui-notification-row.is-read{opacity:.72}
.ui-notification-row>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:4px}.ui-notification-row strong{font:600 16px/1.3 var(--serif);color:#f4deb0}.ui-notification-row small{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#c2d0ca;font:13px/1.4 system-ui}.ui-notification-row time{font-size:11px;color:#82aaa6}.ui-notification-row>i{width:7px;height:7px;margin-top:7px;border-radius:50%;background:#edc465;box-shadow:0 0 8px #edc465}
.ui-notification-kind{width:38px;height:38px;display:grid;place-items:center;border:1px solid #b79856;border-radius:50%;color:#e9ca7d;background:#0a3c43}.ui-notification-kind .icon{width:19px;height:19px}
.ui-notifications-page{max-width:900px;align-self:center}.ui-notifications-toolbar{display:flex;justify-content:flex-end;gap:10px;margin-top:-10px}.ui-notification-list{border:1px solid #b99b5d44;background:#031e27aa}.ui-notification-list .ui-notification-row{grid-template-columns:50px minmax(0,1fr) 10px;padding:18px 20px}.ui-notification-list .ui-notification-kind{width:45px;height:45px}.ui-notification-list .ui-notification-row strong{font-size:19px}.ui-notification-list .ui-notification-row small{font-size:14px;-webkit-line-clamp:3}
@media(max-width:700px){.ui-notification-trigger{width:36px;height:36px;padding:8px}.ui-notification-panel{position:fixed;top:65px;left:8px;right:8px;width:auto;max-height:calc(100svh - 75px)}.ui-notification-row{padding:12px 10px}.ui-account>a[aria-label="Động phủ"]{display:none}.ui-notifications-page{padding-inline:12px}.ui-notification-list .ui-notification-row{padding:14px 10px;grid-template-columns:42px minmax(0,1fr) 8px}.ui-notification-list .ui-notification-kind{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.ui-notification-trigger.has-unread{animation:none}}
.ui-wallpaper-download{position:absolute;top:max(18px,env(safe-area-inset-top));left:20px;display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid #cfa665aa;border-radius:24px;background:#071b29db;color:#ffe8bb;z-index:20;font-size:14px;backdrop-filter:blur(8px)}
.focus-view .ui-collapse{position:fixed;top:max(18px,env(safe-area-inset-top));right:20px;bottom:auto;z-index:30}
@media(max-width:700px){
 .ui-profile-scene{height:570px;min-height:570px}
 .ui-profile-scene .ui-person .ui-figure-wrap{inset:0 32% 0 -4%}
 .ui-profile-scene .ui-person .ui-pet{width:67%;height:72%;right:-4%}
 .ui-profile-scene .ui-person-male .ui-pet{width:72%;height:75%}
 .ui-wallpaper-download{left:10px;padding:9px 12px;font-size:12px}
 .focus-view .ui-collapse{right:10px;font-size:12px}
}

/* Matchmaking puts the player's frame at the centre of the identity. */
.ui-queue{width:min(780px,100%);padding:24px 32px;gap:20px}
.ui-queue-stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px;width:100%}
.ui-queue-emblem{padding:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.ui-queue-emblem:before{display:none}
.ui-queue-emblem .avatar{--size:clamp(180px,24vh,240px);width:var(--size);height:var(--size);aspect-ratio:1;flex:none;filter:drop-shadow(0 0 24px #71dfe740)}
.ui-queue-emblem .avatar-ring{width:100%;height:100%;object-fit:contain}
.ui-queue-emblem strong{font:700 23px/1.3 var(--serif);color:#ffe7aa}
.ui-queue-emblem>span:last-child:not(.avatar){font-size:13px;color:#d4bd88}
.ui-queue-status h2{font-size:46px}
.ui-queue>.button-row{max-width:520px;margin:auto}
.ui-queue>.button-row>.primary{width:min(320px,100%);justify-self:center}
/* The square board column stops at the board edge, so both gutters stay equal. */
@media(min-width:1001px){
 .ui-match{padding:6px}
 .ui-match-body{--left-col:clamp(170px,13vw,220px);--right-col:clamp(240px,19vw,280px);grid-template-columns:var(--left-col) minmax(0,1fr) var(--right-col);gap:12px;max-width:calc(100svh - 12px + var(--left-col) + var(--right-col) + 24px);margin-inline:auto}
 .ui-match .ui-players,.ui-match .ui-match-aside{width:100%}
}
/* Shop portrait uses the same close composition as the inner-page cast. */
.ui-catalog .ui-close-portrait{inset:70px 0 20px;overflow:hidden}
.ui-catalog .ui-close-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 5%;transform:scale(1.16);transform-origin:50% 20%}
.ui-catalog .ui-showcase-name{padding:14px 0}
@media(max-width:700px){
 .ui-queue{padding:20px 16px;gap:15px}
 .ui-queue-stage{grid-template-columns:1fr;gap:18px}
 .ui-queue-emblem .avatar{--size:190px}
 .ui-queue-status h2{font-size:34px}
 .ui-catalog>.ui-showcase{height:420px}
 .ui-catalog .ui-close-portrait{inset:64px 0 10px}
 .ui-catalog .ui-close-portrait img{object-position:center 8%;transform:scale(1.12)}
}

.ui-settings-icon{position:relative;aspect-ratio:1;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;padding:0;transform:none}
.ui-settings-icon .icon{width:24px;height:24px;aspect-ratio:1;stroke-width:1.6;transform:none;overflow:visible}
.ui-settings-tooltip{position:absolute;top:calc(100% + 10px);right:0;white-space:nowrap;padding:7px 12px;background:#061c27;border:1px solid #c4a568;border-radius:5px;color:#ffedc4;font:13px/1.4 var(--sans);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;box-shadow:0 5px 15px #0008;z-index:100}
.ui-settings-icon:hover .ui-settings-tooltip,.ui-settings-icon:focus-visible .ui-settings-tooltip{opacity:1;visibility:visible}
/* Keep the feathered image bounds inside the stage, including its lower edge. */
.ui-champion>img,.ui-mission-intro>img{left:0;right:0;top:88px;bottom:0;width:100%;height:calc(100% - 88px);max-height:calc(100% - 88px);object-fit:contain;object-position:center top}
.ui-champion .ui-showcase-name{background:none;border:0;box-shadow:none;text-shadow:0 2px 4px #00121f,0 0 16px #00121f;padding:20px 8px}
@media(max-width:700px){.ui-champion>img,.ui-mission-intro>img{top:70px;height:calc(100% - 70px);max-height:calc(100% - 70px)}}
/* Four equal display niches inside the shared ornamental profile frame. */
.ui-profile-scene .ui-cosmetic-strip{width:min(760px,100%);gap:0;padding:12px 8px;border:12px solid transparent;border-image:url('assets/v7/panel-border.webp') 100 / 12px / 0 stretch;background:linear-gradient(135deg,#0a3038ed,#061b28e8);background-clip:padding-box;box-shadow:0 10px 25px #00131d55}
.ui-cosmetic-strip>button{position:relative;padding:4px 12px;gap:8px;justify-content:center;min-height:84px;isolation:isolate}
.ui-cosmetic-strip>button+button:before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,#d3b778 22%,#a38146 50%,#d3b778 78%,transparent)}
.ui-cosmetic-strip>button+button:after{content:'';position:absolute;left:-2px;top:calc(50% - 3px);width:5px;height:5px;background:#d3b778;transform:rotate(45deg);box-shadow:0 0 7px #d3b77855}
.ui-cosmetic-strip>button:hover{background:radial-gradient(ellipse,#b9994830,transparent 70%)}
.ui-cosmetic-strip .item-art,.ui-cosmetic-strip .avatar{width:60px;height:60px;--size:60px;flex:none}
.ui-cosmetic-strip .item-art>img{object-fit:contain;max-width:100%;max-height:100%}
.ui-cosmetic-strip>button>span:last-child{font:600 14px/1.3 var(--serif);color:#efdbad;white-space:normal;text-align:center}
@media(max-width:700px){
 .ui-profile-scene .ui-cosmetic-strip{padding:10px 2px;border-width:10px;border-image-width:10px}
 .ui-cosmetic-strip>button{padding:3px 5px;gap:7px;min-height:80px}
 .ui-cosmetic-strip .item-art,.ui-cosmetic-strip .avatar{width:48px;height:48px;--size:48px}
 .ui-cosmetic-strip>button>span:last-child{font-size:12px}
}
.ui-wallpaper-view{background:radial-gradient(ellipse,#132b39,#020a12 75%)}
.ui-wallpaper-view canvas.ui-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ui-wallpaper-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 18px;border-radius:8px;background:#061c29e8;color:#e7d3a9;font-size:14px;text-align:center}
.ui-wallpaper-choices{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:9px;background:#041822d9;border:1px solid #bda46b88;border-radius:12px;backdrop-filter:blur(8px);max-width:calc(100% - 24px);width:450px;z-index:20}
.ui-wallpaper-choices button{display:grid;grid-template-rows:56px auto;gap:5px;min-width:0;padding:5px;border:1px solid transparent;border-radius:7px;color:#d6d5c4;font:13px/1.4 var(--serif)}
.ui-wallpaper-choices button.active{border-color:#e6c47d;background:#8d702129;color:#ffedb6}
.ui-wallpaper-choices button:hover{background:#c1a65326}
.ui-wallpaper-choices img{width:100%;height:56px;object-fit:cover;border-radius:3px}
.ui-wallpaper-download:disabled{opacity:.55;cursor:wait}
@media(max-width:700px){
 .ui-wallpaper-choices{width:350px;gap:5px;padding:6px;bottom:max(12px,env(safe-area-inset-bottom))}
 .ui-wallpaper-choices button{grid-template-rows:44px auto;font-size:12px;padding:4px}
 .ui-wallpaper-choices img{height:44px}
}
/* Keep the selector outside the exported artwork and its calligraphic name. */
.ui-wallpaper-view{grid-template-rows:minmax(0,1fr) 116px;padding-top:60px}
.ui-wallpaper-view canvas.ui-wallpaper{position:static;inset:auto;min-height:0;align-self:stretch}
.ui-wallpaper-choices{position:relative;left:auto;bottom:auto;transform:none;align-self:center;justify-self:center;margin:0}
@media(max-width:700px){.ui-wallpaper-view{grid-template-rows:minmax(0,1fr) 100px;padding-top:60px}.ui-wallpaper-choices{bottom:auto}}
.ui-profile-card .ui-stat-row .ui-unranked{display:block;font:20px/1.35 var(--serif);white-space:nowrap}

/* Keep long friend lists inside the shared ornamental frame. */
@media(min-width:1001px){
 body[data-route='friends'] .ui-friends-panel{height:100%;overflow:hidden}
 body[data-route='friends'] .ui-friends-panel>.ui-title,
 body[data-route='friends'] .ui-friends-panel>.button-row,
 body[data-route='friends'] .ui-friends-panel>.ui-search,
 body[data-route='friends'] .ui-friends-panel>.divider{flex:none}
 body[data-route='friends'] .ui-friends-panel>.ui-people-list{flex:1;min-height:90px;overflow-y:auto;overflow-x:hidden;padding-right:10px;scrollbar-width:thin;scrollbar-color:#b99a5f55 transparent}
 body[data-route='friends'] .ui-friends-panel .friend-row{flex:none;min-width:0}
 body[data-route='friends'] .ui-friends-panel .friend-row>div{min-width:0}
 body[data-route='friends'] .ui-friends-panel .friend-row strong,
 body[data-route='friends'] .ui-friends-panel .friend-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}