/* Browsable catalogues: many entries at once, with touch scrolling for the rest. */
.collection-dialog.is-browser{width:min(900px,calc(100% - 24px));height:min(880px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
.is-browser .collection-heading{padding:12px 18px 0}.is-browser .collection-profile{min-height:85px;padding:0 18px 9px;gap:12px}.is-browser .collection-profile>.avatar-preview{width:78px;height:78px;flex-basis:78px}.is-browser .collection-wallet>b{font-size:23px}.is-browser .collection-eyebrow{display:none}.is-browser .collection-identity{gap:3px}.is-browser .collection-identity>strong{font-size:14px}.is-browser .collection-tabs{padding:0 14px 8px}.is-browser .collection-scroll{padding:12px 16px 18px;overflow-y:auto;touch-action:pan-y;scrollbar-gutter:stable}
.collection-browser-tools,.badge-filter{position:sticky;top:-12px;z-index:2;background:#141f34f7;backdrop-filter:blur(12px);padding:7px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}.collection-browser-tools .collection-categories{margin:0;gap:5px}.collection-new-filter{border:1px solid #dbc1ff36;background:#b5a0dd0a;border-radius:9px;padding:6px 10px;min-height:36px;font:inherit;font-size:11px;color:#d0b7f3;flex-shrink:0}.collection-new-filter[aria-pressed=true]{color:#101a30;background:#d0b6f1;border-color:#dfc5ff}.badge-filter{justify-content:flex-start}
.is-browser .cosmetic-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.is-browser .cosmetic-card{position:relative;min-height:128px;padding:5px 6px 9px;border-radius:12px;touch-action:pan-y}.is-browser .cosmetic-card>.avatar-preview{width:78px;height:78px}.is-browser .cosmetic-card>strong{font-size:11px;line-height:1.5;min-height:17px}.is-browser .cosmetic-price{font-size:10px;margin-top:3px;min-height:17px;line-height:1.5}.is-browser .cosmetic-price .coin-icon{width:13px;height:13px}.new-dot{position:absolute;top:9px;right:9px;width:5px;height:5px;border-radius:50%;background:#cfb3ff;box-shadow:0 0 8px #c6a1f455}.is-browser .collection-action{padding:11px 16px;min-height:68px}.is-browser .collection-action .btn{min-height:44px}
.is-browser .badge-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.badge-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:125px;padding:11px 7px 12px;overflow:hidden;border:1px solid #b2c8e222;border-radius:12px;background:#ffffff03;color:#b6c6db;touch-action:pan-y}.badge-tile>.badge-art{width:43px;height:46px;opacity:.4;filter:saturate(.3)}.badge-tile>strong{font-size:10px;line-height:1.5;min-height:30px;display:flex;align-items:center;text-align:center;overflow-wrap:anywhere}.badge-tile>span:not(.badge-art){font-size:9px;color:#98afc6;margin-top:auto}.badge-tile>i{height:3px;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to right,#a6cec7 var(--progress),#ffffff08 var(--progress))}.badge-tile.is-unlocked{border-color:#c6a5ef55;background:#a285dc0d;color:#f3e4ff}.badge-tile.is-unlocked>.badge-art{opacity:1;filter:none}.badge-tile.is-unlocked>span:not(.badge-art){color:#b1f0d9}.badge-tile:hover{border-color:#d2b5fa99}
.is-browser .collection-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.is-browser .collection-stat-grid>div{padding:12px;gap:5px}.is-browser .collection-stat-grid strong{font-size:22px}.is-browser .collection-stat-grid span{font-size:10px;line-height:1.5}.is-browser .collection-backup{margin-top:14px;padding-top:0;border:1px solid #b2c8e222;border-radius:12px}.collection-backup>summary{font-size:12px;color:#c4d4ee;padding:14px;cursor:pointer;min-height:44px}.collection-backup>p,.collection-backup>.collection-backup-actions,.collection-backup>.collection-restore{margin:0 14px 14px}.collection-backup .collection-restore>p{padding:0}
#badgeDetail{width:min(420px,calc(100% - 28px));padding:0;max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;touch-action:pan-y}.badge-detail-inner{padding:18px}.badge-detail-inner h2{font-size:17px}.badge-detail-inner .collection-badge{margin-top:14px;background:transparent;border:0;padding:0}.badge-detail-inner .badge-top{flex-direction:row;align-items:center}.badge-detail-inner .badge-top>.badge-art{width:72px;height:76px;opacity:.65}.badge-detail-inner .collection-badge.is-unlocked .badge-top>.badge-art{opacity:1}.badge-detail-inner .collection-badge>h3{display:none}.badge-detail-inner .collection-badge>p{margin-top:16px;font-size:13px;min-height:0}.badge-detail-inner .badge-progress{margin-top:18px}.badge-detail-inner .badge-actions{grid-template-columns:1fr 1fr}.badge-detail-inner .badge-actions>button{min-height:44px}
/* The field guide keeps categories visible and opens one detail from the list. */
#depthGuide{width:min(740px,calc(100% - 24px));height:min(720px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));padding:0;overflow:hidden;background:radial-gradient(ellipse at 0 0,#28324b,#111c30 58%,#0d1728)}
.field-guide{display:flex;flex-direction:column;height:100%;min-height:0;text-align:left}.field-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:17px 18px 12px}.field-guide-heading h2{font-size:20px;line-height:1.4;margin:0;min-width:0;color:#eff3ff}.field-guide-heading .collection-close{flex-shrink:0}.field-guide-tabs{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:6px;padding:0 18px 12px;border-bottom:1px solid #a9cbe81a;flex-shrink:0}.field-guide-tabs>button{min-width:0;min-height:42px;padding:7px 5px;font:inherit;font-size:12px;line-height:1.4;color:#a6bed8;background:#ffffff03;border:1px solid #a9cbe81a;border-radius:10px}.field-guide-tabs>button[aria-selected=true]{background:#abcaff19;border-color:#a4c7ed59;color:#e3f3ff}.field-guide-panel{flex:1;min-height:0;padding:15px 18px 20px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#67749770 transparent}.field-guide-panel:focus{outline:none}.guide-list-hint{font-size:11px;line-height:1.65;color:#96abc3;margin-bottom:12px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.guide-tile{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:140px;padding:15px 8px 12px;gap:6px;background:linear-gradient(150deg,#a9cafa0a,#ffffff02);border:1px solid #afc8e22b;border-radius:14px;color:#e0edf8;touch-action:pan-y}.guide-tile:hover{border-color:#b1d6f980;background-color:#b5d1ee07}.guide-tile-art{display:grid;place-items:center;width:65px;height:62px}.guide-tile-art>.item-art,.guide-tile-art>svg{width:100%;height:100%}.guide-tile>strong{font-size:12px;line-height:1.5;text-align:center;overflow-wrap:anywhere}.guide-tile>small{color:#a6bad1;font-size:10px;line-height:1.5;text-align:center;overflow-wrap:anywhere}.guide-tile.is-unknown{background:#070f2033;border-style:dashed;border-color:#a4bfdb23}.guide-tile.is-unknown>strong{display:none}.guide-unknown{font-size:42px;font-weight:800;line-height:1;color:#7c8fa7}.gimmick-icon{font:800 48px system-ui;line-height:1;color:#b8a6ed}.gimmick-star{color:#ffe399}.gimmick-bag{color:#b8f0d9}.gimmick-rift,.gimmick-cross{color:#ff9c91;text-shadow:0 0 20px #eb747344}.gimmick-drift{color:#ffe399;font-size:62px}
.guide-back{min-height:40px;max-width:100%;padding:7px 12px;border:1px solid #bdd5f22b;border-radius:10px;background:#ffffff04;color:#cbdced;font:inherit;font-size:12px;line-height:1.5;text-align:left}.guide-detail{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 9px 8px}.guide-detail-art{display:grid;place-items:center;width:92px;height:85px}.guide-detail-art>.item-art,.guide-detail-art>svg{width:100%;height:100%}.guide-detail h3{font-size:21px;line-height:1.5;text-align:center;color:#ecf4ff}.guide-detail>p{font-size:14px;line-height:1.95;color:#bbccdf;width:100%;max-width:550px;text-align:left;overflow-wrap:anywhere}.guide-stage{font-size:11px;background:#b9d6e60a;border:1px solid #b1ccd525;border-radius:99px;color:#99b6ca;padding:4px 12px}.guide-detail .guide-detail-note{font-size:12px;line-height:1.85;color:#9ab0c7}.power-demo{position:static;width:100%;height:auto;max-width:560px;aspect-ratio:560/170;touch-action:pan-y;margin-bottom:-12px}.power-demo-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;text-align:center;max-width:560px;color:#b2c6da;font-size:11px;line-height:1.5}.guide-basics{display:flex;flex-direction:column;gap:20px;padding:5px}.guide-basics>section{display:flex;align-items:flex-start;gap:14px}.guide-basics>section>span{display:grid;place-items:center;flex:0 0 30px;height:30px;border:1px solid #abcfff39;background:#93bde910;color:#a6d6fc;border-radius:50%;font-size:14px}.guide-basics h3{font-size:14px;line-height:1.6;color:#dfebf7}.guide-basics p{font-size:12px;line-height:1.85;color:#a5bdd4;margin-top:6px}.guide-basics details{border-top:1px solid #a8c5e123;padding-top:14px}.guide-basics summary{font-size:12px;color:#cbd7ec;min-height:36px;cursor:pointer}
@media(max-width:700px){
 .is-browser .cosmetic-grid,.is-browser .badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.is-browser .collection-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:480px){
 .collection-dialog.is-browser{width:calc(100% - 12px);height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.is-browser .collection-heading{padding:9px 12px 0;gap:8px}.is-browser .collection-heading h2{font-size:17px}.is-browser .collection-profile{padding:0 12px 7px;min-height:68px;gap:8px}.is-browser .collection-profile>.avatar-preview{width:64px;height:64px;flex-basis:64px}.is-browser .collection-identity>strong{font-size:12px}.is-browser .collection-wallet>b{font-size:19px}.is-browser .collection-wallet>span{font-size:9px}.is-browser .collection-identity>span{font-size:9px}.is-browser .collection-tabs{padding:0 8px 7px}.is-browser .collection-tabs>button{min-height:38px;font-size:10px;padding:7px 2px}.is-browser .collection-scroll{padding:8px 10px 14px;scrollbar-gutter:auto}.is-browser .cosmetic-grid,.is-browser .badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.is-browser .cosmetic-card{min-height:112px;padding:3px 4px 7px}.is-browser .cosmetic-card>.avatar-preview{width:66px;height:66px}.is-browser .cosmetic-card>strong{font-size:10px;line-height:1.45;min-height:15px}.is-browser .cosmetic-price{font-size:9px;gap:3px}.is-browser .collection-categories button{font-size:10px;min-height:34px;padding:6px 9px}.collection-new-filter{min-height:34px;font-size:10px;padding:6px 9px}.collection-browser-tools,.badge-filter{top:-8px;padding:6px 0 8px;gap:6px}.badge-tile{min-height:112px;padding:8px 5px 10px;gap:4px}.badge-tile>.badge-art{width:37px;height:40px}.badge-tile>strong{font-size:9px;min-height:28px}.badge-tile>span:not(.badge-art){font-size:9px}.is-browser .collection-stat-grid>div{padding:9px;min-height:72px;gap:3px}.is-browser .collection-stat-grid strong{font-size:20px}.is-browser .collection-stat-grid span{font-size:9px}.is-browser .collection-action{min-height:64px;padding:8px 12px}.is-browser .collection-action strong{font-size:11px}.is-browser .collection-action .btn{max-width:60%;min-height:44px;font-size:10px;padding:8px 13px}
 #depthGuide{width:calc(100% - 14px);height:calc(100dvh - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.field-guide-heading{padding:12px 13px 10px;gap:8px}.field-guide-heading h2{font-size:17px}.field-guide-tabs{padding:0 12px 10px;gap:5px}.field-guide-tabs>button{font-size:10px;min-height:40px;padding:6px 4px}.field-guide-panel{padding:11px 12px 15px}.guide-list-hint{font-size:10px;line-height:1.6;margin-bottom:10px}.guide-grid{gap:7px}.guide-tile{min-height:116px;padding:9px 4px 8px;gap:5px;border-radius:11px}.guide-tile-art{width:49px;height:45px}.guide-tile>strong{font-size:10px}.guide-tile>small{font-size:9px;line-height:1.45}.guide-unknown{font-size:33px}.gimmick-icon{font-size:37px}.gimmick-drift{font-size:46px}.guide-detail{padding:12px 3px 8px;gap:10px}.guide-detail-art{width:80px;height:70px}.guide-detail h3{font-size:19px}.guide-detail>p{font-size:12px;line-height:1.85}.guide-detail .guide-detail-note{font-size:11px}.power-demo-labels{font-size:9px;gap:4px}.guide-back{font-size:11px;min-height:38px}.guide-stage{font-size:10px}
}
@media(max-width:350px){.is-browser .collection-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-tile>small{font-size:8px}.guide-tile{min-height:112px}.field-guide-tabs{grid-template-columns:1fr 1.25fr 1fr}.field-guide-heading h2{font-size:16px}}
@media(max-height:460px) and (orientation:landscape){
 .collection-dialog.is-browser[open]{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:0;max-height:calc(100dvh - 12px);height:calc(100dvh - 12px);width:calc(100% - 16px)}.is-browser .collection-heading{grid-column:1;grid-row:1;padding:8px 8px 0;gap:4px}.is-browser .collection-heading h2{font-size:12px}.is-browser .collection-close{width:28px;height:28px;min-width:28px;font-size:19px}.is-browser .collection-profile{grid-column:1;grid-row:2;padding:2px 7px;min-height:65px;gap:5px}.is-browser .collection-profile>.avatar-preview{width:47px;height:58px;flex-basis:47px}.is-browser .collection-identity>strong{font-size:10px}.is-browser .collection-wallet{gap:4px}.is-browser .collection-wallet>b{font-size:17px}.is-browser .collection-wallet>span{font-size:8px}.is-browser #collectionPinned{display:none}.is-browser .collection-tabs{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;padding:6px 8px;align-content:start;border:0;gap:5px}.is-browser .collection-tabs>button{font-size:9px;min-height:39px;padding:5px}.is-browser .collection-notice{grid-column:1;grid-row:4;font-size:9px;max-height:80px;padding:7px}.is-browser .collection-scroll{grid-column:2;grid-row:1/5;padding:9px 12px;min-height:0;border-left:1px solid #b6c9ed16}.is-browser .collection-action{grid-column:2;grid-row:5;min-height:54px;padding:6px 12px}.is-browser .collection-action .btn{font-size:10px;min-height:38px;padding:7px 12px}.is-browser .collection-action strong{font-size:10px}.is-browser .collection-action small{font-size:9px}.is-browser .cosmetic-grid,.is-browser .badge-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.is-browser .cosmetic-card{min-height:101px;padding:3px 4px 6px}.is-browser .cosmetic-card>.avatar-preview{width:58px;height:58px}.is-browser .cosmetic-card>strong{font-size:9px}.is-browser .cosmetic-price{font-size:9px}.is-browser .badge-tile{min-height:104px}.is-browser .collection-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.is-browser .collection-stat-grid>div{padding:8px}.is-browser .collection-stat-grid strong{font-size:18px}.collection-browser-tools,.badge-filter{top:-9px;padding:5px 0 7px}.is-browser .collection-categories button,.collection-new-filter{font-size:9px;min-height:32px;padding:5px 8px}
 #depthGuide{height:calc(100dvh - 14px);max-height:calc(100dvh - 14px);width:calc(100% - 18px)}.field-guide-heading{padding:8px 14px 6px}.field-guide-heading h2{font-size:16px}.field-guide-heading .collection-close{width:28px;height:28px;min-width:28px;font-size:21px}.field-guide-tabs{padding:0 14px 7px;gap:6px}.field-guide-tabs>button{min-height:33px;font-size:10px;padding:5px}.field-guide-panel{padding:9px 14px 12px}.guide-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.guide-tile{min-height:103px;padding:7px 5px;gap:3px}.guide-tile-art{height:40px;width:43px}.guide-tile>strong{font-size:10px}.guide-tile>small{font-size:9px}.guide-list-hint{font-size:9px;margin-bottom:7px}.guide-detail{padding-top:10px;gap:10px}.guide-detail-art{width:65px;height:55px}.guide-detail h3{font-size:18px}.guide-detail>p{font-size:12px}.guide-basics{max-width:600px;margin:auto}
}
@media(max-width:650px) and (max-height:460px) and (orientation:landscape){.collection-dialog.is-browser[open]{grid-template-columns:152px minmax(0,1fr)}.is-browser .cosmetic-grid,.is-browser .badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.guide-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.guide-tile,.badge-tile{transition:none}}
.collection-dialog.is-browser,#depthGuide{max-width:calc(100% - 12px - env(safe-area-inset-left) - env(safe-area-inset-right))}
@media(max-width:350px){.is-browser .collection-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.is-browser .collection-stat-grid>div{padding:8px}.is-browser .collection-stat-grid strong{font-size:18px}}

/* Six independent style slots remain reachable on narrow screens. */
.collection-browser-tools{align-items:flex-start}.collection-browser-tools .collection-categories{display:flex;flex-wrap:wrap;flex:1;min-width:0}.collection-browser-tools .collection-categories button{min-height:36px}
.cosmetic-card>.avatar-preview{border-radius:10px}.collection-profile>.avatar-preview{border-radius:18px}
.item-button[data-kind=bridge]{--item:#92edce}.item-button[data-kind=bridge] .item-symbol>[data-icon=bridge]{display:block}
.item-button[data-kind=veil]{--item:#c8b6ff}.item-button[data-kind=veil] .item-symbol>[data-icon=veil]{display:block}
.item-button[data-kind=prism]{--item:#f1b7ed}.item-button[data-kind=prism] .item-symbol>[data-icon=prism]{display:block}
.item-button[data-kind=feast]{--item:#ffd092}.item-button[data-kind=feast] .item-symbol>[data-icon=feast]{display:block}

@media(max-width:620px){.collection-browser-tools .collection-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.collection-browser-tools .collection-categories button{padding-left:5px;padding-right:5px;font-size:10px}}

/* Illustrated enamel collection: artwork remains visible before unlocking. */
.badge-art.badge-enamel{position:relative;display:inline-block;isolation:isolate;width:64px;height:64px;border-radius:18%;overflow:hidden;background:#101827;flex-shrink:0;filter:none}
.badge-enamel>img{display:block;width:100%;height:100%;object-fit:contain}
.badge-enamel>.badge-rank{position:absolute;inset:auto 4% 3% auto;min-width:22%;padding:2px 3px;border:1px solid #edd19a70;border-radius:5px;background:#152037;color:#ffe2a2;font:700 9px/1 Georgia,serif;text-align:center}
.badge-tile>.badge-art.badge-enamel{width:72px;height:72px;opacity:.72;filter:saturate(.65)}
.badge-tile.is-unlocked>.badge-art.badge-enamel{opacity:1;filter:none}
.badge-tile{min-height:148px}.badge-tile.is-unlocked{border-color:#d7b87855;background:linear-gradient(150deg,#58462825,#131d3400)}
.badge-top>.badge-art.badge-enamel{width:116px;height:116px}.badge-top .badge-rank{font-size:14px}
.badge-rank-4,.badge-rank-5,.badge-rank-6{box-shadow:inset 0 0 0 1px #f0d18950}
.entry-badge .badge-rank{font-size:6px;padding:1px}.badge-filter{flex-wrap:wrap}
@media(max-width:620px){.badge-tile>.badge-art.badge-enamel{width:58px;height:58px}.badge-tile{min-height:132px}}
@media(max-width:360px){.badge-tile>.badge-art.badge-enamel{width:48px;height:48px}}

.speed-award{position:fixed;transform:translateX(-50%);z-index:5;pointer-events:none;max-width:min(320px,88vw);padding:7px 12px;border:1px solid #f9d57677;border-radius:12px;background:#15213af0;box-shadow:0 4px 16px #0004;color:#fff0b4;font-size:11px;font-weight:800;line-height:1.5;text-align:center}