/* OP17 V15 — midnight ocean, brass details, tactile card discovery. */
:root{color-scheme:dark;--bg:#080f1c;--panel:#101d2de8;--text:#f4f0e7;--muted:#a0adbd;--gold:#eec780;--line:#ffffff16;--mint:#89c9ba;--card-r:12px;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:5px}a{color:inherit;text-decoration:none}input,select{color:inherit}button{transition:background .2s,transform .2s,border-color .2s,box-shadow .2s}button:active:not(:disabled){transform:scale(.97)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.14;letter-spacing:-.045em}p{color:var(--muted)}em{font-style:normal;color:var(--gold)}.app-shell{position:relative;max-width:1440px;margin:auto;padding:0 48px;z-index:1}.ambient{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#050f2080 0%,#07111a80 30%,#080f1ce8 75%,#080f1c 100%),url('./assets/ocean-night-v15.png') center top/cover no-repeat;z-index:0}.ambient:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 8% 40%,#34596812,transparent 70%)}.surface{background:linear-gradient(135deg,#152536eb,#0e1a2bec);border:1px solid #b4c6d61e;border-radius:20px;box-shadow:0 18px 48px #0002;backdrop-filter:none}
.topbar{height:98px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:29px;font-weight:850;letter-spacing:-1.5px;line-height:1}.brand small{display:block;font-size:8px;letter-spacing:2.2px;font-weight:600;color:#bec8cf;margin-top:8px}.brand-emblem{display:grid;place-items:center;width:45px;height:45px;border:1px solid #eec78077;color:var(--gold);border-radius:50%;font-size:32px;box-shadow:inset 0 0 20px #eec78008}.tabs{display:flex;align-items:center;justify-content:center;gap:5px;margin:auto}.tab{min-height:44px;padding:11px 16px;border-radius:8px;background:transparent;color:#acbac9;font-size:12px;font-weight:650;white-space:nowrap}.tab span{font-size:17px;vertical-align:middle;margin-right:5px}.tab.active{color:var(--gold);background:#eec78010}.tab:hover{background:#ffffff0a;color:var(--text)}.topbar-actions{display:flex;align-items:center;gap:15px}.wallet{display:flex;align-items:center;gap:10px;padding:8px 15px;background:#0a1524aa;border:1px solid #eec78038;border-radius:10px;min-height:48px;text-align:left}.coin-mark{display:grid;place-items:center;color:var(--gold);background:#eec78012;border:1px solid #eec78044;border-radius:50%;width:29px;height:29px;font-size:18px}.wallet b{display:block;color:var(--gold);font-size:14px;white-space:nowrap;line-height:1.3}.wallet small{font-size:9px;color:var(--muted);line-height:1.3;display:block}.icon-button{width:42px;height:42px;display:grid;place-items:center;font-size:20px;border-radius:10px;background:#0d1b2dcc;border:1px solid var(--line)}.icon-button:hover{border-color:#eec78066}.screen{display:none;padding:0 0 30px}.screen.active{display:block}.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:58px 0 42px}.eyebrow{display:block;font-size:9px;letter-spacing:2px;font-weight:750;color:#b9c9d4;text-transform:uppercase;line-height:1.7}.hero .eyebrow{color:var(--gold);margin-bottom:20px}.hero .eyebrow i{display:inline-block;background:var(--gold);width:5px;height:5px;border-radius:50%;margin:0 9px 2px 0;box-shadow:0 0 14px var(--gold)}.hero h1{font-size:clamp(38px,4.4vw,65px);font-weight:720;line-height:1.06;letter-spacing:-3px}.hero p{font-size:13px;line-height:1.8;margin-top:20px;color:#bac6d2}.hero-seal{display:grid;place-items:center;width:150px;height:150px;border:1px solid #eec78036;border-radius:50%;color:var(--gold);box-shadow:inset 0 0 0 8px #eec78005;transform:rotate(8deg);margin-right:24px}.hero-seal b{font-size:68px;line-height:1;font-family:Georgia,serif;font-weight:400;letter-spacing:-5px}.hero-seal span{font-size:8px;letter-spacing:1.6px}.port-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:stretch}.display-board{position:relative;padding:28px 30px;overflow:hidden}.display-board:before{content:'';position:absolute;left:-200px;bottom:-320px;width:600px;height:600px;border-radius:50%;border:1px solid #eec7800c;box-shadow:0 0 0 30px #eec78003,0 0 0 80px #eec78002;pointer-events:none}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-head h2{font-size:26px;letter-spacing:-1px;margin-top:9px}.status-badge{padding:7px 10px;border:1px solid #89c9ba30;color:var(--mint);border-radius:6px;font-size:10px;white-space:nowrap}.display-board>.muted{margin-top:12px;font-size:11px}.muted{color:var(--muted)}.empty-display{height:310px;position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:25px}.empty-display>img{width:113px;filter:drop-shadow(0 20px 22px #0008);animation:pack-float 6s ease-in-out infinite;z-index:2}.pack-halo{position:absolute;width:240px;height:240px;background:radial-gradient(ellipse,#eec78024,#60b9b907 50%,transparent 70%);filter:none}.pack-orbit{position:absolute;width:250px;height:130px;border:1px solid #eec78015;border-radius:50%;transform:rotate(-25deg)}.orbit-two{transform:rotate(25deg);width:280px}.empty-display-caption{position:absolute;bottom:9px;display:flex;align-items:center;gap:18px;color:#b5c3cf;font-size:10px;letter-spacing:.5px}.empty-display-caption i{color:var(--gold);font-style:normal}.primary-action,.secondary-action,.danger-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:13px 21px;border-radius:10px;font-size:12px;font-weight:750;letter-spacing:.05px;text-align:center;line-height:1.4;position:relative}.primary-action{color:#20242b;background:linear-gradient(115deg,#f3d492,#ddb56c);border:1px solid #f4d798;box-shadow:0 5px 20px #d6af5c14;overflow:hidden}.primary-action:before{content:'';position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,#fff5,transparent);transition:transform .65s}.primary-action:hover:not(:disabled){box-shadow:0 8px 24px #dfb75d35;transform:translateY(-2px)}.primary-action:hover:not(:disabled):before{transform:translateX(120%) skewX(-20deg)}.secondary-action{color:#dce5ed;background:#ffffff04;border:1px solid #9fbad034}.secondary-action:hover:not(:disabled){background:#ffffff09;border-color:#eec78080;transform:translateY(-2px)}.danger-action{background:#873f40;border:1px solid #ba6264;color:#fff}.text-action{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:10px 0;background:none;color:var(--mint);font-size:11px;min-height:38px}.text-action:hover{color:#c1e1d5}.claim-action{display:flex;margin:14px auto 0;min-width:min(310px,100%)}.small-note{color:#93a4b7;font-size:10px;line-height:1.7}.display-board>.small-note{text-align:center;margin-top:13px}.port-sidebar{display:flex;flex-direction:column;gap:17px}.reward-card{padding:24px;background:linear-gradient(135deg,#28403cdb,#142632ef);border-color:#b7d6b72a}.reward-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.reward-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#89c9ba15;color:var(--mint);font-size:23px;flex-shrink:0}.reward-heading .eyebrow{font-size:8px;letter-spacing:1.4px}.reward-card h2{font-size:22px;letter-spacing:-.8px}.reward-card p{font-size:11px;margin-top:9px}.countdown{font-size:36px;color:var(--mint);font-weight:450;letter-spacing:2px;line-height:1.4;margin:12px 0 16px;font-variant-numeric:tabular-nums}.countdown.ready{font-size:15px;color:var(--gold);letter-spacing:3px;margin:22px 0}.reward-card .secondary-action{width:100%;border-color:#89c9ba50;font-size:11px}.reward-card .small-note{text-align:center;font-size:9px;margin-top:12px}.collection-preview{padding:22px}.preview-stats{display:flex;gap:24px;margin:14px 0 20px}.preview-stats b{display:block;font-size:22px;font-weight:550;letter-spacing:-1px}.preview-stats span{display:block;color:var(--muted);font-size:9px}.progress-track{height:3px;background:#ffffff10;border-radius:4px;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),#bbe1d4);transition:width .5s}.collection-preview .text-action{width:100%;justify-content:space-between;margin-top:8px;font-size:10px}.shop-shortcut{padding:19px 21px;border:1px solid var(--line);border-radius:14px;background:#0b192b;display:flex;gap:12px;align-items:center;text-align:left}.shop-shortcut>span:nth-child(2){flex:1}.shop-shortcut b{font-size:11px;display:block}.shop-shortcut small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.shop-shortcut-icon{font-size:26px;color:var(--gold)}.shop-shortcut:hover{border-color:#eec78055;background:#14243a}.how-it-works{display:flex;justify-content:space-between;gap:20px;padding:30px 10px}.how-it-works>div{display:flex;align-items:center;gap:15px;flex:1}.how-it-works>div>span{font-family:Georgia,serif;font-style:italic;font-size:28px;color:#d8bd8659}.how-it-works p{font-size:10px}.how-it-works b{display:block;color:#d2dce4;font-size:11px;font-weight:600;margin-bottom:3px}
.display-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 10px;padding:26px 4px 20px}.display-pack{background:none;position:relative;display:grid;justify-items:center;min-width:0;min-height:60px;border:1px solid transparent;border-radius:8px;padding:6px 4px;animation:pack-arrive .45s both;animation-delay:var(--delay);isolation:isolate}.display-pack img{display:block;height:95px;max-width:100%;object-fit:contain;filter:drop-shadow(0 7px 5px #0005);transition:transform .25s,filter .25s}.display-pack>span{font-size:9px;color:#c3c4c0;margin-top:7px;font-variant-numeric:tabular-nums}.display-pack:hover:not(:disabled){background:#eec78009;border-color:#eec78033}.display-pack:hover:not(:disabled) img{transform:translateY(-6px) rotate(-4deg);filter:drop-shadow(0 10px 10px #eec78044)}.display-pack.opened{opacity:.26}.display-pack.opened img{filter:grayscale(1);transform:scale(.88)}.display-pack.opened>span{color:var(--mint);font-size:14px}.display-progress{display:grid;gap:10px;font-size:10px;color:var(--muted);text-align:center;padding:8px 0}.display-progress .progress-track span{background:linear-gradient(90deg,#ca9d53,var(--gold))}
.reveal-view{margin:34px 0 20px;position:relative;overflow:hidden;padding:25px 28px 30px;min-height:590px}.reveal-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:24px}.reveal-top .text-action{font-size:11px}.step-counter{font-size:25px;font-variant-numeric:tabular-nums;color:var(--gold)}.step-counter small{font-size:12px;letter-spacing:2px;color:#72849b;margin-left:4px}.reveal-content{display:grid;grid-template-columns:1fr minmax(200px,290px) 1fr;gap:34px;align-items:center;padding:16px 5px 18px}.reveal-side{min-width:0}.reveal-side.left{padding-left:20px}.reveal-side h2{font-size:clamp(26px,3vw,39px);font-weight:560;margin:20px 0}.reveal-side p{font-size:12px;line-height:1.9}.reveal-slot-list{display:grid;gap:10px;margin-top:30px;font-size:8px;color:#7c90a8;letter-spacing:2px;border-left:1px solid #eec78025;padding-left:15px}.reveal-slot-list span:last-child{color:var(--gold)}.reveal-side.right{display:flex;flex-direction:column;gap:12px;padding-right:14px}.reveal-side.right>.eyebrow{margin-bottom:6px}.reveal-side.right button{width:100%}.reveal-side.right .small-note{font-size:10px}.reveal-side.right .gesture-hint{font-size:9px;margin-top:12px;text-align:center;line-height:1.9;color:#71869d}.preview-action{user-select:none;-webkit-user-select:none;touch-action:none;font-size:10px;margin-top:6px;line-height:1.8}.preview-action[aria-pressed=true]{color:var(--gold)}.reveal-center{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}.reveal-badge{font-size:9px;letter-spacing:1.7px;color:var(--mint);text-align:center;min-height:19px}.reveal-badge.rare{color:var(--gold)}.reveal-badge.ultra{color:#d8bfff;text-shadow:0 0 14px #b48cea80}.card-viewer{width:265px;max-width:100%;aspect-ratio:744/1040;position:relative;perspective:1500px;isolation:isolate;--peek:0%}.card-viewer:before{content:'';position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(ellipse,#87b4b315,transparent 70%);z-index:-1}.card-viewer[data-reveal=rare]:before{background:radial-gradient(ellipse,#eec78030,transparent 70%);animation:rare-bloom 1.2s both}.card-viewer[data-reveal=ultra]:before{inset:-20%;background:radial-gradient(ellipse,#c5a4ed55,transparent 70%);animation:rare-bloom 1.5s both}.drag-layer,.tilt-layer,.active-card{position:absolute;inset:0;transform-style:preserve-3d}.drag-layer{touch-action:none;z-index:3}.tilt-layer{transition:transform .15s ease-out}.active-card{border-radius:var(--card-r);--mx:50%;--my:50%;cursor:grab}.active-card:active{cursor:grabbing}.card-face{position:absolute;inset:0;border-radius:var(--card-r);backface-visibility:hidden;overflow:hidden;box-shadow:0 15px 42px #0009;border:1px solid #ffffff36;background:#07101b}.card-front img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.card-back{transform:rotateY(180deg);background:center/cover no-repeat}.foil{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;opacity:0}.foil-rainbow{background:url('./assets/holo-rainbow.svg') center/cover}.foil-grid{background:url('./assets/holo-grid.svg') center/cover}.foil-stars{background:url('./assets/holo-stars.svg') center/cover}.foil-glare{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffff88,transparent 38%)}[data-holo=foil] .foil-rainbow{opacity:.1}[data-holo=foil] .foil-glare{opacity:.15}[data-holo=prism] .foil-rainbow{opacity:.22}[data-holo=prism] .foil-grid{opacity:.1}[data-holo=prism] .foil-glare{opacity:.2}[data-holo=premium] .foil-rainbow,[data-holo=manga] .foil-rainbow{opacity:.27}[data-holo=premium] .foil-stars,[data-holo=manga] .foil-stars{opacity:.15}[data-holo=premium] .foil-glare,[data-holo=manga] .foil-glare{opacity:.23}.next-preview{position:absolute;inset:0;z-index:1;clip-path:inset(100% 0 0 0 round var(--card-r));opacity:0;pointer-events:none}.next-preview img{width:100%;height:100%;object-fit:contain;border-radius:var(--card-r)}.peeking .next-preview{opacity:1;clip-path:inset(calc(100% - var(--peek)) 0 0 0 round var(--card-r))}.card-meta{text-align:center;max-width:100%}.rarity-label{display:inline-flex;padding:3px 8px;border:1px solid #eec7803b;background:#eec7800a;color:var(--gold);border-radius:5px;font-size:9px;letter-spacing:1px}.card-meta h3{font-size:19px;letter-spacing:-.6px;margin-top:9px;line-height:1.3}.card-meta p{font-size:10px;margin-top:7px}.card-meta p b{color:var(--gold);font-weight:500}.card-meta i{margin:0 4px;font-style:normal}.reveal-progress{height:3px;width:160px;background:#ffffff12;border-radius:3px}.reveal-progress span{height:100%;display:block;background:var(--mint);transition:width .3s}.rare-particles{position:absolute;inset:0;pointer-events:none;z-index:5}.rare-particles i{position:absolute;left:50%;top:45%;width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:particle-burst 1.3s both;animation-delay:var(--delay)}.card-viewer[data-reveal=ultra] .rare-particles i{background:#dcc8ff;box-shadow:0 0 12px #b1a0ff}
.opening-ceremony{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:470px;position:relative}.ceremony-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(ellipse,#eec78033,transparent 70%)}.tear-pack{width:140px;aspect-ratio:440/790;position:relative;filter:drop-shadow(0 16px 22px #0008);margin-bottom:30px}.tear-body,.tear-top{position:absolute;inset:0;background:url('./assets/booster-pack.png') center/contain no-repeat}.tear-body{clip-path:inset(12% 0 0)}.tear-top{clip-path:inset(0 0 88%)}.tearing .tear-body{animation:tear-body 1.1s both}.tearing .tear-top{animation:tear-top 1.1s both}.tearing .ceremony-glow{animation:opening-glow 1.1s both}.opening-ceremony h2{font-size:25px;position:relative}.opening-ceremony p{font-size:11px;margin-top:12px}
.summary-view{padding:34px;margin-top:35px;text-align:center}.summary-view h2{font-size:36px;margin:14px 0 20px}.summary-stats{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:28px}.summary-stats b{color:var(--gold);font-weight:650}.summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;text-align:left}.summary-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}.summary-actions .text-action{width:100%}.resume-banner{margin-top:20px;padding:20px 25px;background:#2e3d36;border:1px solid #89c9ba4a;border-radius:13px;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:12px}
.page-heading{padding:48px 0 29px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.page-heading h1{font-size:46px;margin:14px 0 13px;font-weight:650}.page-heading p{font-size:12px}.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:24px 0 29px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px}.stat-row>div{padding-left:20px;border-left:1px solid var(--line)}.stat-row>div:first-child{padding-left:0;border:0}.stat-row span{display:block;font-size:10px;color:var(--muted)}.stat-row b{font-size:26px;font-weight:550;letter-spacing:-1px;display:block;margin-top:5px}.stat-row small{font-size:13px;font-weight:400;color:#70869e;letter-spacing:0}.collection-toolbar{display:flex;align-items:center;gap:13px;padding:15px;border-radius:12px}.search-field{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.search-field>span{font-size:25px;color:var(--mint);line-height:1}.search-field input{width:100%;background:none;border:0;padding:8px 2px;min-height:44px;font-size:11px;min-width:0}.search-field input::placeholder{color:#879eb2}select{background:#152539;border:1px solid var(--line);border-radius:7px;min-height:44px;padding:8px 28px 8px 10px;font-size:10px;max-width:100%}.results-label{font-size:10px;margin:20px 0}.collection-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 17px;scroll-margin-top:20px}.collection-card{position:relative;border:1px solid #abc2d323;border-radius:10px;background:#102036aa;overflow:hidden;min-width:0;transition:transform .22s,border-color .22s}.collection-card:hover{transform:translateY(-4px);border-color:#eec78066}.card-inspect{display:block;width:100%;padding:0;background:none;text-align:left}.tile-art{position:relative;aspect-ratio:744/1040;background:#0b1422;overflow:hidden}.tile-art>img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .25s}.collection-card:hover .tile-art img{transform:scale(1.025)}.new-label,.qty-label,.tile-rarity{position:absolute;font-size:8px;padding:4px 6px;background:#081326e8;border:1px solid #ffffff22;border-radius:4px}.new-label{left:6px;top:7px;background:#b7d9c4;color:#102820;border:0;font-weight:800}.qty-label{right:6px;top:7px}.tile-rarity{left:6px;bottom:7px;color:var(--gold);max-width:calc(100% - 12px)}.tile-meta{padding:11px}.tile-meta b{font-size:11px;line-height:1.3;font-weight:650;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}.tile-meta span{display:block;font-size:8px;color:var(--muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-meta strong{color:var(--gold);font-size:11px;margin-top:5px;display:block;font-weight:600}.tile-sell{display:block;width:100%;min-height:40px;border-top:1px solid var(--line);background:#ffffff04;color:var(--mint);font-size:10px}.tile-sell:hover:not(:disabled){background:#89c9ba12}.missing-card .tile-art>img{filter:grayscale(1);opacity:.15}.missing-card .tile-meta{opacity:.65}.missing-card .qty-label{font-size:7px;color:#b3c4d3}.collection-card.ultra{border-color:#b596d655}.collection-card.rare{border-color:#eec78035}.pagination{display:flex;align-items:center;justify-content:center;gap:25px;padding:32px 0;font-size:11px;color:var(--muted)}.pagination button{min-height:42px;font-size:10px}.empty-state{padding:65px 10px;text-align:center;color:var(--muted)}.empty-state>span{font-size:48px;display:block;color:var(--gold);margin-bottom:15px}.empty-state h2{font-size:25px;color:var(--text)}.empty-state p{font-size:12px;margin:15px 0 25px}
.shop-balance{display:grid;gap:3px;text-align:right}.shop-balance>span{font-size:10px;color:var(--muted)}.shop-balance b{font-size:30px;color:var(--gold);font-weight:550;letter-spacing:-1px}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;margin-top:8px}.shop-card{position:relative;padding:27px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}.shop-card:before{content:'';position:absolute;width:280px;height:280px;top:25px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,#eec78015,transparent 65%);pointer-events:none}.shop-card.free-shop{border-color:#89c9ba55;background:linear-gradient(135deg,#213b3cdd,#11232fde)}.offer-label{color:#a8b9ca;font-size:8px;letter-spacing:1.8px;line-height:1.8}.free-shop .offer-label{color:var(--mint)}.shop-art{height:220px;display:flex;align-items:center;justify-content:center;position:relative;width:100%;margin:10px 0}.shop-art img{height:165px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 13px #0007);transform:rotate(-6deg);transition:transform .35s}.shop-card:hover .shop-art>img:first-child{transform:rotate(-3deg) translateY(-7px)}.shop-art-count{position:absolute;right:calc(50% - 85px);bottom:35px;font-size:25px;font-weight:700;color:var(--gold);background:#102033ed;border:1px solid #eec78055;border-radius:9px;padding:2px 8px;z-index:4}.display-shop-art img:nth-child(1){position:relative;z-index:3}.display-shop-art img:nth-child(2){position:absolute;transform:rotate(-17deg) translateX(-35px);z-index:2}.display-shop-art img:nth-child(3){position:absolute;transform:rotate(12deg) translateX(30px);z-index:1}.shop-card h2{font-size:24px;margin-bottom:15px}.shop-card>p{font-size:11px;line-height:1.9}.shop-price{font-size:31px;letter-spacing:-1px;color:var(--gold);margin:23px 0;line-height:1.3}.shop-price small{display:block;font-size:9px;color:var(--muted);letter-spacing:1px}.shop-card button{width:100%;margin-top:auto}.shop-card>.small-note{margin-top:13px;min-height:34px;font-size:9px}.shop-explanation{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:34px;margin-top:27px}.shop-explanation h2{font-size:27px;margin-top:14px;line-height:1.3}.shop-explanation p{font-size:12px;line-height:1.9}.shop-explanation small{display:block;color:#7f94a9;font-size:9px;line-height:1.8;margin-top:12px}
.history-list{display:grid;gap:14px}.history-entry{display:flex;align-items:flex-start;gap:20px;padding:22px 25px;border-radius:13px}.history-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:10px;background:#eec78009;color:var(--gold);font-size:25px;flex-shrink:0}.history-text{flex:1;min-width:0}.history-text>b{display:block;font-weight:600;font-size:13px}.history-text>time{display:block;font-size:10px;color:var(--muted);margin-top:4px}.history-entry>strong{color:var(--gold);font-weight:600;font-size:17px;white-space:nowrap}.history-entry .positive{color:var(--mint)}.history-pulls{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.history-pulls button{width:55px;aspect-ratio:744/1040;padding:0;background:none;border-radius:4px;overflow:hidden}.history-pulls img{width:100%;height:100%;object-fit:contain;display:block}.footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:26px 0 32px;font-size:9px;color:#74869b}
dialog{color:var(--text);background:linear-gradient(125deg,#1b2d40,#0e1a2a);border:1px solid #b4c3d448;border-radius:20px;padding:34px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-shadow:0 24px 100px #0008;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#040b17b8;backdrop-filter:none}dialog[open]{animation:dialog-in .25s ease-out}.close-dialog{position:absolute;top:14px;right:14px;z-index:4;border-radius:50%;font-size:27px}.small-dialog{width:470px;padding-top:40px}.small-dialog h2{font-size:29px;margin:13px 0 20px;line-height:1.2}.small-dialog p{font-size:12px;line-height:1.8}.small-dialog label{font-size:12px;color:var(--muted)}.sale-total{padding:22px;background:#eec78009;border:1px solid #eec78027;border-radius:10px;margin:23px 0 15px;display:flex;justify-content:space-between;align-items:center;gap:15px}.sale-total span{font-size:11px;color:#c2cfda}.sale-total b{color:var(--gold);font-size:27px;font-weight:600;white-space:nowrap;letter-spacing:-1px}.dialog-actions{display:flex;gap:12px;margin:25px 0 15px}.dialog-actions>button{flex:1;font-size:11px;padding-inline:13px}.small-dialog>.small-note{font-size:9px;text-align:center}.quantity-input{display:flex;max-width:190px;margin:14px 0 7px;background:#0b1727;border:1px solid var(--line);border-radius:8px;overflow:hidden}.quantity-input button{width:50px;min-height:45px;background:#ffffff05;font-size:23px}.quantity-input input{width:90px;min-width:0;border:0;background:none;text-align:center;font-size:18px;appearance:textfield}.quantity-input input::-webkit-inner-spin-button{display:none}#saleQuantityControls{margin-top:22px}.option-line{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}input[type=checkbox]{width:18px;height:18px;accent-color:var(--mint)}.option-volume{display:block;padding:20px 0;border-bottom:1px solid var(--line)}.option-volume>span{display:flex;justify-content:space-between}.option-volume input{width:100%;accent-color:var(--gold);margin-top:15px}.options-save{padding-top:26px}.options-save h3{font-size:17px;letter-spacing:-.5px}.options-save p{font-size:11px;margin:10px 0 17px}.options-save>button{width:100%;margin:6px 0}.danger-text{color:#d3958e;font-size:10px;margin-top:18px}.detail-dialog{width:860px;padding-top:48px}.detail-layout{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:center;gap:40px}.detail-card{position:relative;aspect-ratio:744/1040;border-radius:12px;overflow:hidden;box-shadow:0 20px 45px #0008;transition:transform .13s;--mx:50%;--my:50%}.detail-card>img{width:100%;height:100%;display:block;object-fit:contain}.detail-info h2{font-size:31px;margin:14px 0;line-height:1.2}.detail-info>.muted{font-size:11px}.detail-values{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-block:1px solid var(--line);padding:22px 0;margin:22px 0}.detail-values span{font-size:9px;color:var(--muted);display:block}.detail-values b{font-size:22px;color:var(--gold);display:block;font-weight:550;margin-top:5px;letter-spacing:-.5px}.detail-info>p{font-size:12px;margin:10px 0}.detail-info>.primary-action{width:100%;margin-top:15px}.detail-distribution{padding-top:22px;margin-top:20px;border-top:1px solid var(--line)}.detail-distribution p{font-size:11px;line-height:1.8;margin-top:9px}.detail-distribution small{font-size:9px;color:#7f94aa;line-height:1.8;display:block;margin-top:8px}.app-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:500;background:#203c35f2;color:#e2eee6;border:1px solid #96c9ab66;border-radius:12px;box-shadow:0 10px 30px #0005;padding:14px 22px;max-width:calc(100% - 30px);width:max-content;pointer-events:none;font-size:12px;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-90px;left:20px;z-index:600;background:var(--gold);color:#101b29;padding:10px 18px;border-radius:8px}.skip-link:focus{top:12px}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes pack-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(-2deg)}}@keyframes pack-arrive{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}@keyframes rare-bloom{0%{opacity:0;transform:scale(.65)}45%{opacity:1;transform:scale(1.1)}100%{opacity:.75;transform:scale(1)}}@keyframes particle-burst{0%,15%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(0)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-210px) scale(.4)}}@keyframes tear-body{0%,20%{transform:none}40%{transform:rotate(-3deg) translateY(7px)}100%{transform:translateY(60px) scale(.88);opacity:0}}@keyframes tear-top{0%,20%{transform:none}45%{transform:translate(12px,-12px) rotate(7deg)}100%{transform:translate(120px,-110px) rotate(35deg);opacity:0}}@keyframes opening-glow{0%{opacity:.1;transform:scale(.5)}70%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1.7)}}
@media(min-width:1600px){.hero{padding-top:70px}.app-shell{max-width:1480px}.port-layout{grid-template-columns:minmax(0,1fr) 350px}.empty-display{height:350px}.empty-display>img{width:135px}.display-pack img{height:110px}}
@media(max-width:1150px){.app-shell{padding-inline:28px}.topbar{gap:14px}.brand small{font-size:7px;letter-spacing:1.7px}.tab{padding-inline:11px;font-size:11px}.topbar-actions{gap:9px}.wallet{padding-inline:10px}.port-layout{grid-template-columns:minmax(0,1fr) 285px;gap:18px}.display-board{padding:24px}.section-head h2{font-size:23px}.section-head{align-items:flex-start}.status-badge{font-size:8px}.collection-grid,.summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.reveal-content{grid-template-columns:1fr 250px 1fr;gap:18px}.reveal-side.left{padding-left:0}.reveal-side.right{padding-right:0}.reveal-side h2{font-size:28px}.reveal-side.right .primary-action,.reveal-side.right .secondary-action{font-size:11px;padding-inline:10px}.collection-toolbar{flex-wrap:wrap}.search-field{flex-basis:100%}.collection-toolbar>label:not(.search-field){flex:1}.collection-toolbar select{width:100%}.shop-card{padding:22px 18px}.shop-card h2{font-size:21px}.offer-label{font-size:7px}.hero-seal{margin-right:5px}.display-pack img{height:85px}}
@media(max-width:850px) and (min-width:701px){.brand small{display:none}.topbar{gap:9px}.brand{font-size:25px;gap:8px}.brand-emblem{width:35px;height:35px;font-size:25px}.tab{font-size:10px;padding:9px}.tab span{display:none}.wallet .coin-mark{display:none}.wallet{padding:8px}.port-layout{grid-template-columns:minmax(0,1fr) 245px}.display-board{padding:20px}.section-head{flex-wrap:wrap}.display-pack img{height:70px}.shop-grid{gap:12px}.reveal-side.left{display:none}.reveal-content{grid-template-columns:270px 1fr;gap:30px;max-width:650px;margin:auto}.how-it-works{padding-inline:0;gap:15px}}
@media(max-width:700px){.app-shell{padding:0 17px 90px}.ambient{background-position:62% top}.topbar{height:78px;gap:10px;justify-content:space-between}.brand{font-size:24px;gap:9px}.brand-emblem{width:35px;height:35px;font-size:25px}.brand small{font-size:6px;letter-spacing:1.3px;margin-top:6px}.tabs{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:7px 8px calc(7px + env(safe-area-inset-bottom));margin:0;background:#0b1729f5;border-top:1px solid #c5d3de24;backdrop-filter:none;z-index:100}.tab{display:flex;flex-direction:column;gap:3px;font-size:9px;padding:5px 3px;min-height:52px;border-radius:8px}.tab span{font-size:20px;line-height:1.2;margin:0}.topbar-actions{gap:7px}.wallet{padding:7px 9px;min-height:39px;gap:7px}.coin-mark{width:22px;height:22px;font-size:14px}.wallet b{font-size:11px}.wallet small{font-size:7px}.icon-button{width:34px;height:34px;font-size:17px}.hero{padding:34px 0 28px;gap:0}.hero h1{font-size:37px;letter-spacing:-1.9px}.hero .eyebrow{font-size:7px;letter-spacing:1.5px;margin-bottom:16px}.hero p{font-size:11px;line-height:1.8;margin-top:16px;max-width:310px}.hero-seal{display:none}.desktop-only{display:none}.port-layout{display:flex;flex-direction:column;gap:18px}.display-board{padding:23px 20px;border-radius:16px}.section-head{align-items:flex-start;flex-wrap:wrap;gap:12px}.section-head h2{font-size:22px}.section-head .eyebrow{font-size:8px;letter-spacing:1.5px}.status-badge{font-size:8px;padding:5px 8px}.display-board>.muted{font-size:10px;line-height:1.8}.empty-display{height:230px;padding-bottom:20px}.empty-display>img{width:88px}.pack-orbit{width:190px;height:110px}.orbit-two{width:210px}.empty-display-caption{font-size:8px;gap:12px;bottom:6px}.claim-action{width:100%;min-width:0;margin-top:18px}.primary-action,.secondary-action{font-size:11px;padding:13px 17px;min-height:46px}.small-note{font-size:9px}.port-sidebar{gap:15px}.reward-card{padding:22px}.reward-card h2{font-size:22px}.reward-card .countdown{font-size:35px}.reward-card .countdown.ready{font-size:14px;margin:19px 0}.reward-heading{margin-bottom:14px}.collection-preview{padding:21px}.preview-stats{justify-content:space-between;padding-right:24px}.how-it-works{flex-direction:column;gap:20px;padding:29px 5px 15px}.how-it-works>div{gap:20px}.how-it-works>div>span{font-size:24px}.how-it-works p{font-size:10px}.footer{flex-direction:column;gap:7px;font-size:8px;padding-bottom:0}.display-grid{gap:12px 4px;padding:22px 0 15px;grid-template-columns:repeat(6,minmax(0,1fr))}.display-pack{padding:5px 1px;min-height:44px}.display-pack img{height:66px}.display-pack>span{font-size:8px}.display-progress{font-size:9px}.reveal-view{margin-top:18px;padding:13px 14px 22px;min-height:0;border-radius:16px}.reveal-top{padding-bottom:11px;gap:8px;flex-wrap:wrap}.reveal-top>.text-action{font-size:9px}.reveal-top>.eyebrow{font-size:7px;letter-spacing:1px;order:3;width:100%;text-align:center;padding-bottom:5px}.step-counter{font-size:21px}.step-counter small{font-size:10px}.reveal-content{display:flex;flex-direction:column;gap:18px;padding:0}.reveal-side.left{display:none}.reveal-center{gap:11px;width:100%}.reveal-badge{font-size:8px;letter-spacing:1px}.card-viewer{width:min(235px,calc((100svh - 385px)*.715));min-width:170px}.card-meta h3{font-size:17px}.card-meta p{font-size:9px}.rarity-label{font-size:8px}.reveal-side.right{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;padding:0}.reveal-side.right>.eyebrow{display:none}.reveal-side.right .primary-action{order:1;font-size:10px;padding-inline:8px}.reveal-side.right .secondary-action{order:0;font-size:10px;padding-inline:8px}.reveal-side.right .small-note{order:2;grid-column:1/-1;text-align:center;font-size:8px}.reveal-side.right .preview-action{order:3;grid-column:1/-1;min-height:35px;margin-top:0;font-size:9px}.reveal-side.right .gesture-hint{display:none}.opening-ceremony{min-height:470px}.opening-ceremony h2{font-size:24px}.opening-ceremony p{font-size:10px}.tear-pack{width:130px}.summary-view{padding:23px 15px;margin-top:20px;border-radius:16px}.summary-view h2{font-size:26px;margin:15px 0}.summary-stats{gap:8px 16px;font-size:9px;margin-bottom:24px}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 8px}.summary-grid .tile-meta{padding:7px}.summary-grid .tile-meta b{font-size:9px}.summary-grid .tile-meta span{font-size:7px}.summary-grid .new-label{font-size:6px;padding:3px;left:4px;top:5px}.summary-grid .qty-label{font-size:7px;top:22px;right:4px}.summary-grid .tile-rarity{font-size:6px;padding:3px;left:4px;bottom:4px}.summary-actions{flex-direction:column;margin-top:25px;gap:10px}.summary-actions>button{width:100%}.resume-banner{padding:20px;flex-direction:column;text-align:center;font-size:11px}.resume-banner button{width:100%}.page-heading{padding:33px 0 25px;flex-direction:column;align-items:flex-start;gap:21px}.page-heading h1{font-size:34px;margin:12px 0}.page-heading .eyebrow{font-size:7px}.page-heading p{font-size:11px}.page-heading>button{width:100%}.stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 15px;padding:22px 0;margin-bottom:22px}.stat-row>div{border:0;padding:0}.stat-row span{font-size:9px}.stat-row b{font-size:24px}.stat-row small{font-size:11px}.collection-toolbar{padding:12px;gap:9px;border-radius:12px}.search-field input{font-size:10px}.collection-toolbar>label:not(.search-field){flex-basis:calc(50% - 9px)}.collection-toolbar select{font-size:9px;min-height:40px}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 9px}.tile-meta{padding:8px}.tile-meta b{font-size:9px}.tile-meta span{font-size:7px}.tile-meta strong{font-size:10px}.tile-sell{font-size:8px;min-height:40px}.tile-rarity{font-size:6px;padding:3px 4px}.qty-label{font-size:7px}.results-label{font-size:9px}.pagination{gap:12px;font-size:10px}.pagination button{font-size:9px;padding:11px;min-height:44px}.shop-balance{display:flex;justify-content:space-between;align-items:center;width:100%;border-top:1px solid var(--line);padding-top:18px}.shop-balance b{font-size:25px}.shop-grid{grid-template-columns:1fr;gap:20px}.shop-card{padding:24px}.offer-label{font-size:8px}.shop-art{height:190px;margin:12px 0}.shop-art>img{height:150px}.shop-card h2{font-size:25px}.shop-price{font-size:32px;margin:20px 0}.shop-card button{font-size:12px}.shop-card>.small-note{min-height:0;margin-top:13px}.shop-explanation{grid-template-columns:1fr;gap:25px;padding:24px}.shop-explanation h2{font-size:25px}.shop-explanation p{font-size:11px}.history-entry{padding:17px 14px;gap:12px}.history-icon{width:32px;height:32px;font-size:21px}.history-text>b{font-size:11px}.history-text time{font-size:8px}.history-entry>strong{font-size:12px}.history-pulls{gap:5px}.history-pulls button{width:40px}.empty-state h2{font-size:23px}.empty-state p{font-size:11px}.detail-dialog{padding:46px 22px 25px}.detail-layout{grid-template-columns:1fr;gap:24px}.detail-card{width:min(225px,70vw);margin:auto}.detail-info h2{font-size:26px}.detail-values{padding:17px 0}.detail-values b{font-size:22px}.small-dialog{padding:38px 23px 24px}.small-dialog h2{font-size:26px}.sale-total{padding:18px 15px}.sale-total b{font-size:24px}.dialog-actions{gap:9px}.dialog-actions>button{font-size:10px;padding-inline:10px}.app-toast{bottom:calc(86px + env(safe-area-inset-bottom));font-size:11px;padding:12px 18px}.close-dialog{width:36px;height:36px;font-size:25px}}
@media(max-width:360px){.app-shell{padding-inline:12px}.brand small{display:none}.brand{font-size:23px}.wallet .coin-mark{display:none}.hero h1{font-size:33px}.display-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.display-pack img{height:80px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.history-entry{flex-wrap:wrap}.history-entry>strong{margin-left:44px}.card-viewer{min-width:170px}.section-head h2{font-size:21px}}
@media(hover:none){.collection-card:hover,.primary-action:hover:not(:disabled),.secondary-action:hover:not(:disabled){transform:none}.display-pack:hover:not(:disabled) img{transform:none}}
html[data-motion=reduced]{scroll-behavior:auto}html[data-motion=reduced] *,html[data-motion=reduced] *:before,html[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.footer .text-action{padding:0;min-height:0;font-size:9px}.model-rates{margin:22px 0;border-top:1px solid var(--line)}.model-rates>div{display:flex;justify-content:space-between;gap:16px;font-size:11px;padding:11px 0;border-bottom:1px solid var(--line)}.model-rates span{color:var(--muted)}.model-rates b{text-align:right;color:var(--gold);font-weight:600}
.player-progress{display:flex;align-items:center;gap:24px;padding:15px 22px;margin-top:20px;border-radius:12px}.player-progress>div:first-child{min-width:110px}.player-progress b{display:block;margin-top:6px;color:var(--gold);font-size:20px}.player-xp{flex:1;max-width:520px}.player-xp>span{display:block;font-size:10px;color:var(--muted);margin-top:8px}.player-progress>small{margin-left:auto;color:var(--muted);font-size:10px}.booster-gift{border-color:#eec78055;background:linear-gradient(135deg,#413526bb,#17283ddd)}.gift-count{display:flex;align-items:baseline;gap:12px;margin:22px 0 12px}.gift-count b{font-size:37px;color:var(--gold)}.gift-count span{font-size:11px;color:var(--muted)}#freeBoosterTimer{color:var(--mint);font-size:11px;margin-bottom:15px}.discovery-badge{color:#101b29;background:var(--mint);border-radius:6px;font-size:10px;font-weight:800;letter-spacing:1px;padding:5px 10px;box-shadow:0 0 25px #9deac444}.pack-choice{margin:35px auto;padding:50px;max-width:900px;text-align:center}.pack-choice h2{font-size:34px;margin:20px 0}.pack-choice>p{color:var(--muted);line-height:1.8}.pack-choice .summary-actions{justify-content:center;flex-wrap:wrap}.pack-choice .small-note{margin-top:22px;font-size:10px}.achievement-panel{padding:25px;margin-bottom:24px}.achievement-panel>.muted{font-size:11px;margin:16px 0 22px;line-height:1.8}.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.achievement{padding:15px;border:1px solid var(--line);border-radius:10px;background:#07132366;display:flex;flex-direction:column;gap:9px}.achievement b{font-size:12px}.achievement>span,.achievement small{color:var(--muted);font-size:10px}.achievement .progress-track{margin:3px 0}.achievement.achieved{border-color:#98dabb66;background:#98dabb09}.achievement.achieved b,.achievement.achieved small{color:var(--mint)}.celebration-dialog{text-align:center;overflow:hidden;border-color:var(--gold);background:radial-gradient(ellipse at top,#5c492b,#102034 70%)}.celebration-stars{font-size:60px;color:var(--gold);margin:0 0 26px;text-shadow:0 0 40px #eec780;animation:reward-burst 1.1s ease-out}.celebration-dialog .primary-action{margin-top:20px;width:100%}.celebration-dialog h2{font-size:31px}.celebration-dialog:before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 20%,transparent 0 15deg,#eec78008 15deg 30deg);pointer-events:none;animation:reward-rays 8s linear infinite}.celebration-dialog>*{position:relative}.exchange-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;margin-bottom:45px;align-items:start}.exchange-selection,.exchange-offer{padding:28px}.exchange-selection h2{font-size:22px;margin-bottom:20px}.exchange-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.exchange-slots>button,.exchange-slot-empty{aspect-ratio:744/1040;border:1px dashed #eec78066;border-radius:10px;background:#0a1729;position:relative;overflow:hidden}.exchange-slots img{width:100%;height:100%;object-fit:contain}.exchange-slots span{position:absolute;right:5px;top:5px;border-radius:50%;background:#eec780;color:#142235;width:25px;height:25px;display:grid;place-items:center;font-size:22px}.exchange-slot-empty{display:grid;place-items:center;font-size:35px;color:#64748b}.exchange-selection>.small-note{margin:15px 0 20px}.exchange-selection>.search-field{margin-bottom:22px;display:flex;background:#071323;border-radius:8px;padding:8px 12px}.exchange-selection input{width:100%}.exchange-inventory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.exchange-card{display:flex;flex-direction:column;gap:5px;background:#081424;border:1px solid var(--line);border-radius:8px;padding:8px;text-align:left;min-width:0}.exchange-card:hover:not(:disabled){border-color:var(--gold)}.exchange-card img{width:100%;aspect-ratio:744/1040;object-fit:contain;border-radius:5px}.exchange-card b{font-size:10px}.exchange-card span,.exchange-card small{font-size:8px;color:var(--muted)}.exchange-card strong{font-size:12px;color:var(--gold)}.exchange-card:disabled{opacity:.4}.exchange-offer{position:sticky;top:20px}.exchange-chances{display:flex;gap:9px;margin:20px 0}.exchange-chances button{flex:1;min-height:50px;background:#102034;border:1px solid var(--line);border-radius:8px;font-size:20px}.exchange-chances [aria-pressed=true]{background:var(--gold);color:#102034;border-color:var(--gold)}.exchange-values{display:flex;justify-content:space-between;gap:12px;margin:25px 0}.exchange-values span{font-size:10px;color:var(--muted)}.exchange-values b{display:block;font-size:25px;color:var(--gold);margin-top:10px}#exchangeTarget{display:flex;flex-direction:column;align-items:center;gap:9px;margin:20px 0}#exchangeTarget img{width:150px;aspect-ratio:744/1040;object-fit:contain;filter:drop-shadow(0 10px 20px #0008)}#exchangeTarget b{font-size:16px}#exchangeTarget span,#exchangeTarget small{font-size:10px;color:var(--muted);text-align:center}.exchange-warning{padding:15px;border:1px solid #df9e7a44;background:#df9e7a09;border-radius:8px;color:#e1b8a2;font-size:11px;line-height:1.8;margin:20px 0}.exchange-offer .primary-action{width:100%}.exchange-offer .small-note{line-height:1.8}#exchangeQuote{color:var(--muted);font-size:12px;line-height:1.8}#exchangeResult:not(:empty){padding:18px;margin-top:20px;border-radius:10px;font-size:13px;line-height:1.8}.exchange-win{color:var(--mint);border:1px solid #98dabb66;background:#98dabb0d}.exchange-loss{color:#e1b8a2;border:1px solid #df9e7a44;background:#df9e7a09}.new-label{z-index:2}
@keyframes reward-burst{0%{transform:scale(.3) rotate(-20deg);opacity:0}65%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:none}}@keyframes reward-rays{to{transform:rotate(360deg)}}
.port-layout{align-items:start}.celebration-dialog .close-dialog{position:absolute}.achievement-panel>summary{cursor:pointer;list-style:none}.achievement-panel>summary::-webkit-details-marker{display:none}.achievement-panel>summary:after{content:'↓';color:var(--gold);font-size:20px}.achievement-panel[open]>summary:after{content:'↑'}.achievement-panel>summary:focus-visible{outline:3px solid var(--mint);outline-offset:6px}
@media(max-width:1150px){.player-progress{gap:15px}.player-progress>small{max-width:155px;line-height:1.7}.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exchange-inventory{grid-template-columns:repeat(3,minmax(0,1fr))}.tab{padding-inline:9px}}
@media(max-width:850px){.exchange-layout{grid-template-columns:1fr}.exchange-offer{position:static}.exchange-inventory{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.tabs{grid-template-columns:repeat(5,1fr)}.player-progress{flex-wrap:wrap;padding:14px 16px;margin-top:15px;gap:14px}.player-progress>div:first-child{min-width:75px}.player-progress b{font-size:17px}.player-progress .eyebrow{font-size:7px}.player-xp{max-width:none;min-width:150px}.player-xp>span{font-size:9px}.player-progress>small{max-width:none;margin-left:0;width:100%;font-size:9px}.pack-choice{padding:30px 20px;margin-top:20px}.pack-choice h2{font-size:25px}.pack-choice>p{font-size:11px}.achievement-panel{padding:18px}.achievement-panel h2{font-size:21px}.achievement-grid{gap:8px}.achievement{padding:12px;gap:7px}.achievement b{font-size:10px}.achievement small,.achievement>span{font-size:9px}.exchange-layout{gap:18px}.exchange-selection,.exchange-offer{padding:20px}.exchange-slots{gap:8px}.exchange-inventory{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.exchange-card b{font-size:9px}.exchange-selection input{font-size:11px}.discovery-badge{font-size:8px;padding:4px 8px}}
@media(max-width:700px) and (max-height:650px){.topbar{height:64px}.reveal-view{margin-top:10px;padding:10px 12px 15px}.reveal-top{padding-bottom:6px;flex-wrap:nowrap}.reveal-top>.eyebrow{display:none}.reveal-center{gap:8px}.card-viewer{width:140px;min-width:0}.card-meta .rarity-label{display:none}.card-meta h3{font-size:14px;margin-top:4px}.card-meta p{font-size:8px;margin-top:4px}.reveal-progress{display:none}.reveal-side.right{gap:6px}.reveal-side.right .small-note{display:none}.reveal-side.right .primary-action,.reveal-side.right .secondary-action{font-size:8px;min-height:44px;padding:10px 6px}.reveal-side.right .preview-action{font-size:8px;min-height:30px;padding:6px 0}.reveal-badge{font-size:7px}.reveal-content{gap:13px}}

/* Display, rotating card offers and the exchange case. */
.port-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.port-sidebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start}
.port-sidebar .shop-shortcut{grid-column:2;align-self:end}
.port-sidebar .reward-card{grid-row:span 2}
.display-board,.booster-gift{min-width:0}
.empty-display{height:350px}
.empty-display>img.display-visual{width:min(310px,90%);height:300px;object-fit:contain;animation:none;filter:drop-shadow(0 18px 18px #0006)}
.pack-orbit{display:none}
.booster-gift{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 30px}
.gift-art{height:310px;display:flex;align-items:center;justify-content:center;width:100%;order:3;position:relative}
.gift-art:before{content:'';position:absolute;width:230px;height:230px;background:radial-gradient(ellipse,#eec78025,transparent 70%)}
.gift-art img{height:235px;max-width:100%;object-fit:contain;transform:rotate(-6deg);filter:drop-shadow(0 18px 22px #0008)}
.booster-gift>.eyebrow{order:0}.booster-gift>h2{order:1;margin-top:10px}
.booster-gift>.gift-count{order:2;margin:18px 0 0}.booster-gift>p{order:4}
.booster-gift>.primary-action{order:5;width:100%;margin-top:auto}.booster-gift>.small-note:last-child{order:6}
.active-display-art{display:flex;align-items:center;gap:22px;margin-top:18px;border-bottom:1px solid var(--line);padding-bottom:18px}
.active-display-art img{width:135px;height:135px;object-fit:contain;filter:drop-shadow(0 8px 12px #0005)}
.active-display-art p{font-size:12px;max-width:230px;color:var(--gold)}
.display-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 4px}
.display-pack img{height:76px;max-width:100%;object-fit:contain}
.display-shop-art img.display-visual{height:205px;max-width:100%;transform:none;object-fit:contain}
.shop-card:hover .display-shop-art>img.display-visual{transform:translateY(-5px)}
.exchange-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.exchange-toolbar .search-field{grid-column:1/-1;background:#071323;border:1px solid var(--line);border-radius:9px;padding:12px}
.exchange-toolbar>label:not(.search-field){display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:10px}
.exchange-toolbar select{width:100%;min-width:0;min-height:44px;padding:10px;background:#0a1729;border:1px solid var(--line);border-radius:8px;font-size:11px}
.exchange-toolbar input{min-width:0;width:100%;background:transparent}
.exchange-selection .results-label{margin:0 0 16px}
.card-market{margin-top:28px;padding:28px}
.card-market .muted{font-size:12px;margin:16px 0 24px}
.market-timer{display:flex;flex-direction:column;text-align:right;white-space:nowrap}
.market-timer span{color:var(--muted);font-size:10px}.market-timer b{color:var(--gold);font-size:27px;font-variant-numeric:tabular-nums}
.card-shop-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
.market-card{min-width:0;padding:12px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:12px;background:#07132388}
.market-inspect{display:flex;flex-direction:column;gap:7px;text-align:left;background:none;padding:0;width:100%;flex:1}
.market-inspect img{width:100%;aspect-ratio:744/1040;object-fit:contain;border-radius:8px}
.market-inspect b{font-size:12px;line-height:1.4}.market-inspect span{font-size:9px;color:var(--muted)}
.market-card>strong{font-size:22px;color:var(--gold);line-height:1.3}.market-card>strong small{display:block;color:var(--muted);font-size:9px;font-weight:400}
.market-card .primary-action{width:100%;min-height:44px;padding:10px 6px;font-size:11px}.market-card>small{font-size:9px;line-height:1.6;color:var(--muted);min-height:28px}
.market-card.purchased{border-color:#89c9ba55}.market-card.purchased .market-inspect img{opacity:.65}
.exchange-case-dialog{width:min(740px,calc(100vw - 30px));padding:35px 0 28px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at top,#423722,#0c192a 65%);border:1px solid #eec78066;border-radius:20px;color:var(--text)}
.exchange-case-dialog h2{padding:0 22px;font-size:28px;margin-top:15px}.exchange-case-dialog>p{padding:0 24px;font-size:13px;margin:24px 0;min-height:42px}
.exchange-case-dialog>.primary-action{min-width:180px}.exchange-case-dialog[data-result=win]{border-color:var(--mint)}.exchange-case-dialog[data-result=win] h2{color:var(--mint)}
.case-window{position:relative;overflow:hidden;margin:25px 0;background:#050c17;border-block:1px solid var(--line)}
.case-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#050c17e0,transparent 18%,transparent 82%,#050c17e0)}
.case-reel{display:flex;gap:12px;width:max-content;padding:20px 16px;will-change:transform}
.case-item{flex:0 0 140px;width:140px;height:230px;padding:9px;border:1px solid #eec78044;background:linear-gradient(140deg,#1f2d3b,#0d1b2a);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.case-item img{width:120px;height:170px;object-fit:contain}.case-item b{font-size:10px;line-height:1.4;height:28px;max-width:100%;overflow:hidden}
.case-miss{border-color:#e1b8a244;background:#2d202a}.case-miss>span{font-size:100px;color:#e1b8a2;line-height:170px}
.case-marker{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);box-shadow:0 0 18px #eec780aa;z-index:2}
.case-marker:before{content:'';position:absolute;left:-8px;top:0;border-inline:9px solid transparent;border-top:12px solid var(--gold)}
.exchange-case-dialog[data-result=win] .case-item:nth-child(36){border-color:var(--mint);box-shadow:0 0 22px #89c9ba55;background:#193c39}
.exchange-case-dialog[data-result=loss] .case-item:nth-child(36){border-color:#e1b8a2;box-shadow:0 0 22px #e1b8a233}
@media(min-width:701px) and (max-width:1150px){.topbar{flex-wrap:wrap;height:auto;min-height:98px;padding-block:18px;gap:12px}.tabs{order:3;width:100%;margin:0;justify-content:center}.topbar-actions{margin-left:auto}}
@media(max-width:900px){.card-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.empty-display{height:290px}.empty-display>img.display-visual{height:245px}.gift-art{height:250px}.gift-art img{height:205px}.display-board,.booster-gift{padding:24px}.section-head h2{font-size:23px}}
@media(max-width:700px){.tabs{grid-template-columns:repeat(6,minmax(0,1fr));padding-inline:3px}.tab{font-size:8px;padding-inline:1px}.tab span{font-size:18px}.port-layout{grid-template-columns:1fr}.port-sidebar{grid-template-columns:1fr;gap:16px}.port-sidebar .shop-shortcut{grid-column:auto}.port-sidebar .reward-card{grid-row:auto}.display-board,.booster-gift{width:100%;padding:22px}.booster-gift .gift-art{height:210px}.booster-gift .gift-art img{height:185px}.empty-display{height:290px}.empty-display>img.display-visual{height:250px;width:min(265px,90%)}.active-display-art img{width:100px;height:100px}.active-display-art p{font-size:10px}.card-market{padding:18px}.card-market .section-head{align-items:center}.card-market h2{font-size:23px}.card-market .muted{font-size:10px}.card-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.market-card{padding:10px;gap:10px}.market-inspect b{font-size:11px}.market-card>strong{font-size:20px}.market-timer{text-align:left}.market-timer b{font-size:24px}.exchange-case-dialog h2{font-size:23px}.exchange-case-dialog>p{font-size:11px}.achievement-grid{grid-template-columns:1fr}.exchange-toolbar select{font-size:10px}.display-pack img{height:70px}}

/* Stable reveal geometry and a compact desktop shop. */
#revealNew{position:absolute;right:10px;top:10px;z-index:6;pointer-events:none;margin:0}
.reveal-center{position:relative}
.card-facts{padding-left:10px;padding-right:12px;max-width:330px}
.card-facts h2{font-size:26px;margin:16px 0 20px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:63px}
.card-facts dl{margin:0}.card-facts dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px}
.card-facts dt{color:var(--muted);flex-shrink:0}.card-facts dd{margin:0;text-align:right;font-weight:650}
.pull-probability{margin-top:22px;padding:17px;border:1px solid #eec78033;border-radius:12px;background:#eec78007}
.pull-probability>b{display:block;font-size:28px;color:var(--gold);margin:7px 0;font-variant-numeric:tabular-nums}
.card-facts .pull-probability p{font-size:10px;line-height:1.7}.pull-probability small{display:block;font-size:9px;color:var(--muted);line-height:1.7;margin-top:9px}
.reveal-content{min-height:575px;grid-template-columns:minmax(0,1fr) minmax(200px,290px) minmax(0,1fr)}
.close-dialog,.exchange-offer>.icon-button{line-height:1;padding:0;place-items:center}
.small-dialog h2{padding-right:24px}.small-dialog>.close-dialog{top:14px;right:14px}
.shop-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:stretch}
.shop-layout>.shop-grid{grid-template-columns:1fr;gap:16px;margin:0}
.shop-layout .shop-card{padding:18px}
.shop-layout .shop-card .offer-label{font-size:7px;letter-spacing:1px}
.shop-layout .shop-art{height:110px;margin:6px 0}.shop-layout .shop-art>img{height:100px;max-width:100%;object-fit:contain}
.shop-layout .shop-card h2{font-size:20px;margin-bottom:10px}.shop-layout .shop-card>p{font-size:10px;line-height:1.6}
.shop-layout .shop-price{font-size:25px;margin:12px 0}.shop-layout .shop-card>.small-note{margin-top:8px;min-height:0;font-size:8px}
.shop-layout .shop-card button{font-size:10px;min-height:44px;padding:10px}
.shop-layout>.card-market{margin:0;padding:22px;min-width:0}.shop-layout .card-market h2{font-size:24px;letter-spacing:-.8px}
.shop-layout .card-market .section-head{flex-wrap:wrap;align-items:center;gap:10px}
.shop-layout .card-market .eyebrow{font-size:8px;letter-spacing:1.3px}.shop-layout .card-market>.muted{font-size:10px;margin:14px 0 20px}
.shop-layout .card-shop-grid{gap:10px;grid-template-columns:repeat(5,minmax(0,1fr))}
.shop-layout .market-card{padding:9px;gap:10px;align-self:start}.shop-layout .market-inspect b{font-size:11px}
.shop-layout .market-card>strong{font-size:20px}.shop-layout .market-card .primary-action{font-size:10px}
.exchange-dock,.exchange-offer-scrim,#exchangeOfferClose{display:none}
@media(min-width:851px) and (max-width:1100px){.shop-layout{grid-template-columns:210px minmax(0,1fr);gap:16px}.shop-layout .card-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-layout>.card-market{padding:18px}.reveal-content{gap:20px}.card-facts h2{font-size:22px}.card-facts dl>div{font-size:10px;gap:8px}.pull-probability{padding:13px}.pull-probability>b{font-size:24px}}
@media(max-width:850px){
  #exchangeScreen.active{animation:none}
  .shop-layout{grid-template-columns:1fr;gap:20px}.shop-layout>.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-layout .card-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .exchange-layout{padding-bottom:125px}.exchange-selection{min-width:0}
  .exchange-offer{display:none}
  .exchange-dock{display:grid;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(730px,calc(100vw - 28px));z-index:110;grid-template-columns:minmax(0,1fr) 90px minmax(0,1.1fr) auto auto;align-items:center;gap:12px;padding:14px 16px;box-shadow:0 -8px 35px #0009;border-color:#eec78055;background:#101f32f5;backdrop-filter:none;border-radius:14px}
  .exchange-dock>div{min-width:0}.exchange-dock>div>span{display:block;color:var(--muted);font-size:9px;line-height:1.3}.exchange-dock b{display:block;color:var(--gold);font-size:11px;line-height:1.5;margin-top:4px}
  .exchange-dock>div:nth-of-type(3){position:relative;padding-left:35px;min-height:42px}.exchange-dock>div:nth-of-type(3) b{color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px}
  #exchangeDockCard{position:absolute;left:0;top:0;width:29px;height:42px;object-fit:contain;border-radius:3px}
  .exchange-dock button{font-size:10px;padding:10px;min-height:44px}
  .exchange-offer.mobile-open{display:block;position:fixed;z-index:132;bottom:100px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 125px);overflow:auto;overscroll-behavior:contain;box-shadow:0 0 100px #0009;padding:24px}
  .exchange-offer.mobile-open>#exchangeOfferClose{display:grid;position:absolute;right:12px;top:12px;width:34px;height:34px}
  .exchange-offer.mobile-open>.eyebrow{padding-right:35px}
  .exchange-offer-scrim{display:block;position:fixed;inset:0;background:#030a17ae;backdrop-filter:none;z-index:130}
  body.exchange-details-open{overflow:hidden}
  .exchange-offer.mobile-open #exchangeTarget img{width:100px}.exchange-offer.mobile-open #exchangeTarget{gap:7px;margin:16px 0}
  .exchange-offer.mobile-open .exchange-values{margin:16px 0}.exchange-offer.mobile-open .exchange-values b{font-size:22px}.exchange-offer.mobile-open .exchange-warning{font-size:10px;margin:14px 0}
}
@media(min-width:851px){
  #shopScreen>.page-heading{padding:32px 0 26px}#shopScreen>.page-heading h1{font-size:42px}
  .shop-layout .shop-card{display:grid;grid-template-columns:80px minmax(0,1fr);gap:6px 12px;align-content:start;text-align:left}
  .shop-layout .shop-card>.offer-label{grid-column:1/-1;margin-bottom:5px}
  .shop-layout .shop-card>.shop-art{grid-column:1;grid-row:2/5;width:80px;height:105px;margin:0;align-self:center}
  .shop-layout .shop-card>.shop-art>img{width:80px;height:100px;transform:none}
  .shop-layout .shop-card>h2,.shop-layout .shop-card>p:not(.small-note),.shop-layout .shop-card>.shop-price{grid-column:2;margin:0}
  .shop-layout .shop-card>h2{font-size:19px}.shop-layout .shop-card>.shop-price{font-size:24px;margin-top:2px}
  .shop-layout .shop-card>.shop-price small{font-size:8px}
  .shop-layout .shop-card>button,.shop-layout .shop-card>.small-note{grid-column:1/-1}
  .shop-layout .shop-card>button{margin-top:9px}.shop-layout .shop-card>.small-note{text-align:center;margin:0}
}
@media(max-width:700px){
  .reveal-content{min-height:0}.card-facts{display:none}
  #revealNew{right:7px;top:7px;padding:4px 7px;font-size:8px}
  .shop-layout .shop-grid{gap:12px}.shop-layout .shop-card{padding:14px 10px}.shop-layout .shop-card h2{font-size:17px}.shop-layout .shop-card>p{font-size:9px}.shop-layout .shop-card .offer-label{font-size:6px}
  .shop-layout .shop-card button{font-size:9px;padding:10px 6px}.shop-layout .shop-art{height:100px}.shop-layout .shop-art>img{height:90px}
  .shop-layout>.card-market{padding:18px}.shop-layout .card-market h2{font-size:22px}.shop-layout .card-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-layout .market-card{padding:10px}
  .exchange-layout{padding-bottom:170px}.exchange-dock{bottom:calc(73px + env(safe-area-inset-bottom));width:calc(100vw - 20px);padding:10px;grid-template-columns:minmax(0,1fr) 70px minmax(0,1.2fr);gap:8px;border-radius:12px}
  .exchange-dock>div:nth-of-type(3){padding-left:28px}.exchange-dock b{font-size:10px}.exchange-dock>div>span{font-size:8px}#exchangeDockCard{width:23px;height:35px}
  .exchange-dock>#exchangeDockDetails{grid-column:1;min-height:40px}.exchange-dock>#exchangeDockAttempt{grid-column:2/-1;min-height:40px}
  .exchange-offer.mobile-open{bottom:calc(78px + env(safe-area-inset-bottom));max-height:calc(100dvh - 110px);padding:23px 20px}
}

/* Kaata branding and desktop navigation on the left. */
.brand-by{display:block;margin-top:8px;color:var(--gold);font-size:10px;line-height:1.2;letter-spacing:1px;font-weight:600}
.options-label{display:none}
.pull-probability>b{font-size:24px;line-height:1.35}
@media(min-width:1024px){
  :root{--nav-width:220px}
  .app-shell{max-width:none;padding:0 32px 0 calc(var(--nav-width) + 32px)}
  #main,.footer{max-width:1440px;margin-inline:auto}
  .topbar{position:fixed;inset:0 auto 0 0;width:var(--nav-width);height:100dvh;min-height:0;padding:30px 18px 22px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;z-index:90;border:0;border-right:1px solid #b4c6d624;background:linear-gradient(180deg,#101f32f7,#080f1cf7);backdrop-filter:none;box-shadow:12px 0 40px #0003;overflow-y:auto;scrollbar-width:thin}
  .topbar .brand{gap:10px;font-size:28px;align-items:center;justify-content:flex-start;padding-inline:3px}
  .topbar .brand-emblem{width:39px;height:39px;font-size:29px;flex-shrink:0}
  .topbar .brand small{font-size:7px;letter-spacing:1.5px;margin-top:7px}
  .topbar .brand-by{font-size:11px;margin-top:10px;letter-spacing:1px}
  .topbar .tabs{position:static;order:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;margin:34px 0 24px;padding:0;width:100%;background:none;border:0;backdrop-filter:none}
  .topbar .tab{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:13px 14px;min-height:49px;font-size:12px;border-radius:10px;text-align:left}
  .topbar .tab span{display:inline-block;width:20px;font-size:20px;line-height:1.2;margin:0;text-align:center}
  .topbar .tab.active{background:linear-gradient(100deg,#eec78020,#eec78008);box-shadow:inset 3px 0 0 var(--gold)}
  .topbar .topbar-actions{display:flex;flex-direction:column;align-items:stretch;gap:11px;margin: auto 0 0;padding-top:22px;border-top:1px solid var(--line);width:100%}
  .topbar .wallet{width:100%;padding:12px;gap:10px;min-height:58px}
  .topbar .wallet b{font-size:13px}.topbar .wallet small{font-size:9px}
  #optionsBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:43px;font-size:18px}
  #optionsBtn .options-label{display:inline;font-size:11px;font-weight:650}
  .player-progress{margin-top:24px}
}
@media(min-width:1024px) and (max-width:1250px){
  :root{--nav-width:190px}
  .app-shell{padding-left:calc(var(--nav-width) + 24px);padding-right:24px}
  .topbar{padding-inline:13px}.topbar .brand{font-size:25px;gap:8px;padding:0}.topbar .brand-emblem{width:34px;height:34px;font-size:25px}.topbar .brand small{font-size:6px;letter-spacing:1px}
  .topbar .tab{padding-inline:12px}.topbar .wallet{padding:10px;gap:8px}.topbar .coin-mark{width:24px;height:24px;font-size:16px}
  .shop-layout{grid-template-columns:210px minmax(0,1fr);gap:16px}.shop-layout .card-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .player-progress{gap:15px}.player-progress>small{max-width:130px;line-height:1.7}
  .card-facts .pull-probability>b{font-size:20px}
}
@media(max-width:700px){.brand-by{font-size:8px;margin-top:6px;letter-spacing:.6px}}

/* Collector's album: tactile navy, engraved brass and a quiet reveal stage. */
:root{--brass:#d7b873;--brass-line:#d7b87338;--album-texture:url('./assets/navy-chart-texture.png')}
.surface{background:linear-gradient(125deg,#152839e8,#091625f2),var(--album-texture) center/420px;border-color:#b6c0c932;box-shadow:inset 0 1px 0 #ffffff0a,0 14px 40px #0003;border-radius:17px}
:is(.display-board,.booster-gift,.reward-card,.collection-preview,.card-market,.achievement-panel,.reveal-view){position:relative}
:is(.display-board,.booster-gift,.card-market,.achievement-panel,.reveal-view):after{content:'';position:absolute;inset:6px;border:1px solid #d7b87316;border-radius:12px;pointer-events:none}
.display-board,.reveal-view{border-color:#d7b87342}
.booster-gift{background:linear-gradient(140deg,#463b26d9,#142634ee 65%),var(--album-texture) center/420px}
.player-progress{border-radius:12px;border-left:3px solid var(--brass);box-shadow:inset 0 1px 0 #ffffff0b,0 6px 24px #0002}
.progress-track{height:5px;background:#040b1699;box-shadow:inset 0 1px 3px #0009}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-2px;line-height:1.05}
.hero-seal{border-color:#d7b87366;background:#0c1b2b70;box-shadow:inset 0 0 0 7px #d7b87309,inset 0 0 0 8px #d7b87322,0 8px 30px #0002}
.section-head h2{letter-spacing:-.7px}
.status-badge{border-radius:5px;border-color:#d7b87344;background:#d7b87308;color:#ddc891}
.display-pack{background:#07132350;border-color:#d7b87316;border-radius:7px}
.display-pack:hover:not(:disabled){box-shadow:inset 0 0 0 1px #d7b87332,0 4px 12px #0004}
.display-pack.opened{background:#07132330;border-style:dashed}
.card-position{display:none;align-items:center;justify-content:center;gap:9px;height:34px;min-width:126px;padding:5px 13px;border:1px solid #d7b87355;background:linear-gradient(120deg,#d7b87316,#132637);border-radius:6px;box-shadow:inset 0 1px 0 #e6cc8b12;font-variant-numeric:tabular-nums}
.card-position>span{font-size:8px;letter-spacing:1.6px;color:var(--muted)}.card-position>b{font-size:19px;color:var(--gold);line-height:1}.card-position>i{font-size:10px;font-style:normal;color:var(--muted)}
.card-position.finishing{border-color:#89c9ba77;background:#89c9ba0c}.card-position.finishing>b{color:var(--mint)}
.reveal-center{gap:18px;padding-block:8px}
.card-viewer:after{content:'';position:absolute;inset:-13px;z-index:-1;pointer-events:none;border:1px solid #d7b87360;border-radius:18px;background:linear-gradient(135deg,#29425480,#091624cf),var(--album-texture) center/350px;box-shadow:inset 0 0 0 4px #07111a,inset 0 0 0 5px #d7b87328,0 20px 45px #0006}
.reveal-badge{min-height:19px;margin-bottom:4px}
.card-facts{padding:20px 18px;border:1px solid #d7b8732a;border-radius:12px;background:linear-gradient(145deg,#0c1b2be8,#0b1929e0),var(--album-texture) center/350px;box-shadow:inset 0 1px 0 #d7b8730a}
.card-facts h2{font-size:23px;margin-top:12px;min-height:57px}.card-facts dd{overflow-wrap:anywhere}
.pull-probability{background:linear-gradient(120deg,#d7b8730e,#15293a33);border-color:#d7b87340;border-radius:8px;padding:14px}
#nextCardBtn.finishing{background:linear-gradient(120deg,#bce5d5,#72b8a6);color:#0a2c28;border-color:#bce5d5;box-shadow:0 5px 24px #89c9ba22}
#nextCardBtn.finishing:hover:not(:disabled){box-shadow:0 7px 28px #89c9ba44}
.collection-card{border-color:#d7b87328;box-shadow:0 8px 20px #0003,inset 0 1px 0 #ffffff07}
.collection-card.rare{border-color:#d7b87355}.collection-card.ultra{border-color:#baa1d466}
.market-card{background:linear-gradient(150deg,#192a39dc,#071322f0),var(--album-texture) center/280px;border-color:#d7b8732a}
.market-inspect img{border:1px solid #d7b8732d;padding:3px;background:#071322;border-radius:6px}
.exchange-slot-empty{background:linear-gradient(150deg,#162c3aaa,#081624dd),var(--album-texture) center/250px;box-shadow:inset 0 0 0 5px #0002;color:#a28f625e;border-color:#d7b87355}
.exchange-slots>button{border-style:solid;border-color:#d7b87366;box-shadow:inset 0 0 0 3px #d7b87315;padding:4px}
.exchange-card{border-color:#d7b87322;background:linear-gradient(140deg,#172a38,#0a1828);box-shadow:0 3px 10px #0002}
.shop-price{font-variant-numeric:tabular-nums}
.achievements-hero{margin-top:28px;margin-bottom:20px;min-height:230px;padding:34px!important;overflow:hidden;background:linear-gradient(90deg,#07142430,#07142400),url('./assets/success-voyage-banner.png') center/cover;display:flex;align-items:center;border-color:#d7b87344}
.achievements-hero>div{max-width:56%;position:relative;z-index:1}
.achievements-hero .eyebrow{color:#e4c786}.achievements-hero h1{font-family:Georgia,'Times New Roman',serif;font-size:47px;letter-spacing:-1.5px;font-weight:500;margin:12px 0}
.achievements-hero p{color:#c1cbd3;font-size:12px;max-width:400px}
.success-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:22px}
.success-overview>div{display:flex;align-items:center;gap:15px;padding:19px 20px;border:1px solid #d7b8732e;border-radius:11px;background:linear-gradient(125deg,#192c3dcc,#091625ed),var(--album-texture) center/360px;box-shadow:inset 0 1px 0 #ffffff08}
.success-stat-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border:1px solid #d7b87344;border-radius:50%;background:#d7b8730a;color:var(--gold);font-size:22px}
.success-overview>div>div>span{display:block;font-size:10px;color:var(--muted)}.success-overview b{font-size:25px;line-height:1.5;font-weight:600;color:#ecdbc2;font-variant-numeric:tabular-nums}
.success-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.success-filters button{padding:9px 16px;min-height:39px;border:1px solid #d7b87322;border-radius:6px;background:#071625;color:#aebac7;font-size:11px}
.success-filters [aria-pressed=true]{color:#ebcd8c;background:#d7b87313;border-color:#d7b87366}
.achievement-grid{gap:16px}
.achievement{padding:20px;background:linear-gradient(145deg,#1c3043e8,#0b192aee),var(--album-texture) center/330px;border:1px solid #d7b8732c;border-radius:10px;gap:14px;box-shadow:inset 0 1px 0 #ffffff09,0 4px 15px #0002}
.achievement-heading{display:flex;align-items:center;gap:14px;min-height:62px}.achievement-heading>div:last-child{min-width:0;flex:1}.achievement-heading b{display:block;font-size:12px;line-height:1.5}
.achievement-kind{display:block;color:#afbac7;font-size:8px;letter-spacing:1px;text-transform:uppercase;line-height:1.5;margin-bottom:6px}
.achievement-medal{display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;padding:4px;border-radius:50%;background:conic-gradient(var(--medal-color) var(--medal-progress),#d7b87316 0);box-shadow:0 3px 8px #0004}
.achievement-medal>span{display:grid;place-items:center;width:100%;height:100%;border:1px solid #d7b8732a;border-radius:50%;background:radial-gradient(ellipse at top,#213647,#0b1929);color:var(--medal-color);font-size:25px}
.achievement-discoveries{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#b9c5d0}.achievement-discoveries i{font-style:normal;font-size:8px;border:1px solid #a5b6c02a;padding:3px 6px;border-radius:4px;white-space:nowrap;color:#afbfca}
.achievement .progress-track span{background:linear-gradient(90deg,var(--medal-color),#e9ddc2)}
.achievement-rewards{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:9px;color:#dfc389;padding-top:11px;border-top:1px solid #d7b8731c}
.achievement.achieved{border-color:#92cab55e;background:linear-gradient(140deg,#26423be8,#0d2328ec),var(--album-texture) center/330px}.achievement.achieved .achievement-discoveries i{color:#aae2c8;border-color:#aae2c84a;background:#aae2c80a}.achievement.achieved .achievement-rewards{color:#aae2c8}
.success-empty{padding:35px 20px;text-align:center;border:1px dashed #d7b87330;border-radius:10px;font-size:12px}
@media(min-width:851px){.card-position{display:flex}.reveal-top>#cardProgress{display:none}}
@media(min-width:1024px){
  .topbar{background:linear-gradient(180deg,#102236e8,#081422f2),var(--album-texture) center/400px;border-right-color:#d7b87332}
  .topbar .brand-emblem{box-shadow:inset 0 0 0 3px #d7b8730c,0 0 0 3px #d7b87308;border-color:#d7b87377}
  .topbar .tab{border:1px solid transparent}.topbar .tab:hover{border-color:#d7b8732b;background:#d7b87309}.topbar .tab.active{background:linear-gradient(105deg,#d7b87326,#152b3a99);border-color:#d7b87335;box-shadow:inset 3px 0 0 var(--gold),0 3px 14px #0002}
  .topbar .tab span{color:#c9b78d}
}
@media(min-width:701px) and (max-width:850px){.reveal-content{grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:25px;min-height:0}.reveal-side.left{display:none}}
@media(max-width:1100px){.success-overview>div{padding:16px 13px;gap:11px}.success-stat-icon{width:35px;height:35px;font-size:18px}.success-overview b{font-size:21px}.achievement{padding:16px}.achievement-medal{width:48px;height:48px}.achievement-heading{gap:11px}}
@media(max-width:700px){
  .hero h1{font-size:38px;letter-spacing:-1.7px}.surface{border-radius:14px}.card-facts{display:none}.reveal-center{padding-block:0;gap:13px}.card-viewer:after{inset:-9px;border-radius:14px}.reveal-badge{margin-bottom:2px}
  .achievements-hero{min-height:220px;padding:25px 20px!important;margin-top:22px;background-position:64% center;background-image:linear-gradient(90deg,#071424dd,#07142428),url('./assets/success-voyage-banner.png')}
  .achievements-hero>div{max-width:80%}.achievements-hero h1{font-size:34px}.achievements-hero p{font-size:11px}.achievements-hero .eyebrow{font-size:7px}
  .success-overview{gap:8px}.success-overview>div{padding:13px 8px;flex-direction:column;gap:7px;text-align:center}.success-stat-icon{width:31px;height:31px;font-size:16px}.success-overview>div>div>span{font-size:8px}.success-overview b{font-size:18px}
  .success-filters{gap:6px}.success-filters button{flex:1;white-space:nowrap;font-size:9px;padding:8px;min-height:38px}.achievement-grid{gap:12px}.achievement{padding:17px}.achievement-heading b{font-size:12px}.achievement-kind{font-size:8px}.achievement-discoveries{font-size:10px}.achievement-rewards{font-size:10px}
  .primary-action.finishing{font-size:10px}
}
/* Berry currency: real asset, unchanged monetary scale. */
.berry-icon{display:inline-block;width:22px;height:22px;object-fit:contain;flex-shrink:0;vertical-align:middle}
.wallet>.coin-mark.berry-icon{width:34px;height:34px;background:none;border:0;border-radius:0}
.shop-price>.berry-icon{width:31px;height:31px;margin-right:8px}
.exchange-values>span{flex:1;min-width:0}.exchange-values b{font-size:clamp(17px,1.7vw,25px);overflow-wrap:anywhere}
.exchange-breakdown{padding:12px;border:1px solid #d7b87333;border-radius:10px;background:#08172566;margin-bottom:16px}
.exchange-breakdown>span{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px}
.exchange-breakdown b{color:var(--text);font-size:12px;white-space:nowrap}
.exchange-breakdown .berry-bonus{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.berry-bonus>span{flex:1}.exchange-breakdown .berry-bonus b{color:var(--gold)}
@media(max-width:700px){.wallet>.coin-mark.berry-icon{width:27px;height:27px}.exchange-breakdown b{font-size:11px}.exchange-values b{font-size:19px}}
/* Account and opening priorities. */
.account-sidebar{font-size:11px;min-height:43px;padding:10px;background:#122536;border:1px solid var(--line);color:var(--text);gap:8px}
.account-sidebar>span:first-child{color:var(--gold);font-size:20px}
.account-status{margin:24px 0;padding:15px;border:1px solid var(--line);border-radius:9px;background:#081624}
.account-dialog>button:not(.close-dialog){width:100%;margin-bottom:10px}.account-dialog>.small-note{margin-top:15px}
.google-mark{font:bold 18px Arial,sans-serif;display:grid;place-items:center;background:white;color:#4285f4;width:28px;height:28px;border-radius:50%}
.account-connection-notice{position:relative;margin:20px 0 0;padding:12px 16px;background:#152435;border:1px solid #d7b87344;border-radius:10px;font-size:12px}
.port-layout{grid-template-columns:minmax(0,1fr)}.port-sidebar{grid-column:auto;grid-template-columns:1fr 1fr}
.port-sidebar>.reward-card{display:none}.port-sidebar .shop-shortcut{grid-column:auto}.port-sidebar .collection-preview{height:100%}
.display-waiting{border-color:#91a0b733;background:linear-gradient(135deg,#16202be8,#0d1725ee)}
.display-waiting #emptyDisplay>img.display-visual{filter:grayscale(1);opacity:.45}.display-waiting .pack-orbit,.display-waiting .pack-halo{display:none}
.display-waiting .empty-display{height:205px}.display-waiting .empty-display>.display-visual{height:155px;width:170px;animation:none}
.display-waiting .section-head h2{color:#acb5c3}.display-waiting .status-badge{color:#acb5c3;border-color:#acb5c333}
.display-waiting .claim-action{opacity:1;background:#1d2938;color:#aab6c7;border:1px solid #aab6c733}
.shop-switch{display:none}
@media(min-width:701px){
  .booster-gift{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 30px;text-align:left;align-items:center;padding:24px 30px}
  .booster-gift>.gift-art{grid-column:1;grid-row:1/8;height:220px;margin:0;display:grid;place-items:center}.booster-gift>.gift-art img{height:195px}
  .booster-gift>:not(.gift-art){grid-column:2;order:initial;justify-self:stretch}.booster-gift>.gift-count{margin:0}
  .booster-gift>.primary-action{margin:8px 0 0}.booster-gift>h2{margin:0}
}
@media(max-width:1023px){.account-sidebar{display:none}}
@media(max-width:850px){
  #shopScreen>.page-heading{padding-top:24px;padding-bottom:20px;gap:12px}
  #shopScreen .shop-balance{display:none}
  .shop-layout .card-market .section-head{display:grid;grid-template-columns:minmax(0,1fr) 70px;align-items:start;gap:10px}
  .shop-layout .card-market .section-head h2{font-size:21px}.shop-layout .market-timer{width:70px;text-align:right}
  .shop-layout .market-timer span{font-size:8px}.shop-layout .market-timer b{font-size:24px}
  .shop-switch{display:flex;position:sticky;top:8px;z-index:80;gap:7px;padding:6px;background:#0d1b2df5;border:1px solid #d7b87333;border-radius:12px;margin-bottom:18px}
  .shop-switch>button{flex:1;min-width:0;min-height:48px;padding:10px 6px;font-size:11px;font-weight:700;border-radius:8px;background:transparent;color:var(--muted);line-height:1.4}
  .shop-switch>button[aria-pressed=true]{color:#152032;background:var(--gold)}.shop-switch b{display:inline-grid;place-items:center;font-size:10px;margin-left:3px;width:18px;height:18px;border-radius:50%;background:#0002}
  #shopScreen[data-shop-view=cards] .shop-layout>.shop-grid{display:none}
  #shopScreen[data-shop-view=packs] .shop-layout>.card-market{display:none}
  #shopScreen[data-shop-view=cards] .shop-explanation{display:none}
}
@media(max-width:700px){.port-sidebar{grid-template-columns:1fr}.display-waiting .empty-display{height:200px}.shop-switch>button{font-size:10px}.shop-layout .shop-price>.berry-icon{width:20px;height:20px;margin-right:2px}}
.currency-amount{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap;vertical-align:middle}.currency-amount .berry-icon{width:1.15em;height:1.15em;object-fit:contain;flex-shrink:0}.euro-value{display:block;font-size:12px;font-weight:400;color:var(--muted,#9aabba);margin-top:5px}.account-dialog{max-height:88dvh;overflow:auto}.account-identity{display:flex;align-items:center;gap:16px}.account-identity>img{width:84px;height:84px;object-fit:contain}.account-sidebar>img{width:30px;height:30px;object-fit:contain}.profile-editor{margin:22px 0;display:grid;gap:12px}.profile-editor[hidden]{display:none}.profile-editor input,.showcase-panel select,.friend-search input{width:100%;padding:12px;color:#f5f1e8;background:#091828;border:1px solid #385065;border-radius:10px}.avatar-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.avatar-options button{padding:4px;border:1px solid transparent;border-radius:12px;background:#0a1927;color:#bacbd3;cursor:pointer}.avatar-options button[aria-pressed=true]{border-color:#edc574;background:#25333c}.avatar-options img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.avatar-options span{font-size:11px}.profile-feedback{font-size:13px;color:#edc574}.profile-social-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.showcase-panel,.friends-panel,.leaderboard-panel{padding:24px}.leaderboard-panel{margin-top:24px}.showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.showcase-slot{padding:6px;border:1px dashed #5b6672;background:#081726;border-radius:12px;color:#b8c6cd;aspect-ratio:.68;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;cursor:pointer}.showcase-slot.selected{border:2px solid #edc574}.showcase-slot img,.showcase-grid figure img{width:100%;aspect-ratio:.715;object-fit:contain}.showcase-slot b{font-size:32px;color:#e7c078}.showcase-slot span,.showcase-grid figcaption{font-size:11px}.showcase-grid figure{margin:0}.showcase-panel label{display:block;font-size:13px}.showcase-panel .primary-action{margin-top:16px}.friend-search{display:flex;gap:8px;margin-top:12px}.friend-search input{min-width:0}.friend-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid #304052;padding:12px 0;font-size:12px}.friend-row button{background:#122638;border:1px solid #344959;color:#eee;padding:8px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.friend-row img{width:35px;height:35px}.ranking-switch{display:flex;gap:8px}.ranking-switch button{background:#0d2130;border:1px solid #3a4d5d;color:#c8d5db;padding:12px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.ranking-switch button[aria-pressed=true]{border-color:#e7c078;color:#e7c078}.ranking-switch img{width:22px;height:22px}.rank-row{display:grid;grid-template-columns:45px 50px 1fr auto;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-bottom:1px solid #344553;background:transparent;color:#e3e9e8;text-align:left;cursor:pointer}.rank-row img{width:48px;height:48px}.rank-row strong{color:#edc574}.public-identity{display:flex;align-items:center;gap:12px}.public-identity>img{width:64px;height:64px}#publicProfileView{padding:20px;margin-top:20px;background:#091c2a;border-radius:12px}.shop-price{white-space:nowrap}#socialStatus{color:#d9ba7b;line-height:1.6}.tabs .tab{flex-shrink:0}@media(max-width:1023px){.tabs{grid-template-columns:repeat(7,minmax(0,1fr))!important}.tabs .tab{font-size:9px!important;padding-left:2px!important;padding-right:2px!important}.profile-social-layout{grid-template-columns:1fr}.showcase-panel,.friends-panel,.leaderboard-panel{padding:16px}.leaderboard-panel>.section-head{align-items:flex-start;flex-direction:column;gap:12px}.rank-row{grid-template-columns:28px 36px 1fr auto;gap:7px;font-size:12px;padding:10px 0}.rank-row img{width:36px;height:36px}.showcase-grid{gap:6px}.showcase-slot{border-radius:7px}.showcase-slot span{font-size:9px}.avatar-options{gap:4px}.account-identity>img{width:64px;height:64px}.rank-row span{overflow-wrap:anywhere}.shop-price{font-size:clamp(22px,5vw,34px)}}
@media(max-width:850px){.exchange-dock>div{height:46px}.exchange-dock>div:nth-of-type(3) b{height:30px;line-height:15px}.exchange-dock .currency-amount{font-size:10px;line-height:15px}.exchange-dock .currency-amount .berry-icon{height:12px;width:12px}}
.social-identity{display:flex;align-items:center;gap:14px;margin:16px 0}.social-identity[hidden]{display:none}.social-identity img{width:70px;height:70px}.social-identity strong{display:block;font-size:23px;color:#edc574}.social-identity span{display:block;font-size:12px;color:#aebbc7;margin-top:5px}

/* Clear account entry, independent social pages and stable responsive geometry. */
html{scroll-padding-bottom:100px}
body{overflow-x:clip}
button:disabled{opacity:1}
.primary-action:disabled{color:#b4bfcc;background:#273444;border-color:#536073;box-shadow:none}
.secondary-action:disabled{color:#aab7c7;background:#142133;border-color:#34465a}
.text-action:disabled,.icon-button:disabled{color:#8b9aad}
.display-pack:disabled:not(.opened),.exchange-card:disabled{opacity:.55}
:is(.shop-card,.market-card,.showcase-panel,.friends-panel,.leaderboard-panel,.profile-account-panel,.friend-group){min-width:0}
.currency-amount{font-variant-numeric:tabular-nums;letter-spacing:0}
.shop-price{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;max-width:100%;letter-spacing:0}
.shop-price>.berry-icon{margin:0;width:1.15em;height:1.15em}
.shop-price .currency-amount{gap:.25em}
.shop-layout .shop-card>.shop-price{grid-column:1/-1;justify-content:flex-start;margin:9px 0 4px;font-size:25px}
.shop-layout .shop-card>h2{overflow-wrap:anywhere}
.shop-layout .card-shop-grid{grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:12px}
.shop-layout .market-card{height:100%;align-self:stretch;gap:12px}
.market-inspect{min-width:0}
.market-inspect b{overflow-wrap:anywhere}
.market-card>strong{font-size:20px}
.market-card>.primary-action{margin-top:auto}
.market-card>small,.shop-layout .shop-card>.small-note{font-size:11px;line-height:1.6}
.shop-layout .shop-card>p{font-size:12px;line-height:1.6}
.shop-layout .card-market>.muted{font-size:12px;line-height:1.7}
.shop-layout .shop-card .offer-label{font-size:8px}
.shop-layout .market-card .primary-action,.shop-layout .shop-card button{font-size:12px}
.wallet>span{min-width:0}
.wallet b{overflow-wrap:anywhere}
.wallet .currency-amount{max-width:100%}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:24px;align-items:start}
.profile-account-panel{padding:24px}
.profile-account-panel h2{font-size:23px;margin-bottom:14px}
.profile-account-panel p{font-size:13px;line-height:1.8}
.profile-account-panel button{width:100%;margin-top:18px}
.profile-page .showcase-panel .section-head>span{color:var(--muted);font-size:12px}
.social-status{color:#d9ba7b;font-size:13px;line-height:1.7;margin-bottom:18px;overflow-wrap:anywhere}
.social-status:empty{display:none}
.friends-page .friends-panel{max-width:920px}
.friends-page .friends-panel>h2{font-size:24px;margin-bottom:18px}
.friend-group{margin-top:26px}
.friend-group h3{font-size:16px;margin-bottom:8px}
.friend-group .small-note{font-size:12px}
.friend-search input{min-height:48px}
.friend-row{gap:12px;padding:15px 0}
.friend-row>button:first-child{min-width:0;max-width:100%;overflow-wrap:anywhere}
.friend-row button{min-height:44px;padding:9px 12px}
.friend-row img,.rank-row img,.social-identity img,.public-identity img{object-fit:contain;flex-shrink:0}
.leaderboard-page .leaderboard-panel{margin-top:0}
.leaderboard-panel>.small-note{font-size:12px;margin:16px 0}
.ranking-switch{flex-wrap:wrap}
.ranking-switch button{min-height:44px;font-size:12px}
.rank-row{min-height:76px;border-radius:8px}
.rank-row:hover,.rank-row:focus-visible{background:#ffffff07}
.rank-row>span{min-width:0;overflow-wrap:anywhere}
.rank-row strong{font-size:15px;min-width:0}
.public-profile-dialog{width:min(680px,calc(100vw - 32px))}
.public-profile-dialog #publicProfileView{margin:0;padding:0;background:none}
.public-identity{margin:12px 0 20px}
.public-identity h3{font-size:25px;overflow-wrap:anywhere}
.showcase-slot{overflow:hidden}
.showcase-slot>span,.showcase-grid figcaption{max-width:100%;text-align:center;overflow-wrap:anywhere;line-height:1.5}
.showcase-slot small{font-size:12px}
.showcase-slot .euro-value{font-size:10px}

body.auth-locked .app-shell,body.auth-locked>dialog{display:none!important}
.auth-gate{position:relative;z-index:2;display:grid;place-items:center;min-height:100svh;padding:32px}
.auth-card{width:min(100%,960px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden;border:1px solid #d7b87344;border-radius:24px;background:linear-gradient(135deg,#122a3beb,#0a1828f5),var(--album-texture) center/400px;box-shadow:0 24px 90px #0006}
.auth-art{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px;background:radial-gradient(ellipse at 50% 55%,#eec78021,transparent 70%);border-right:1px solid #d7b87322}
.auth-art>img{display:block;width:min(100%,300px);height:290px;object-fit:contain;filter:drop-shadow(0 18px 24px #0006)}
.auth-art p{font-size:13px;text-align:center;max-width:290px;line-height:1.8}
.auth-brand{display:flex;align-items:center;gap:14px;color:var(--text);font-size:35px;font-weight:850;letter-spacing:-1px}
.auth-brand .brand-emblem{flex-shrink:0;width:48px;height:48px;font-size:34px}
.auth-brand small{display:block;color:var(--gold);font-size:11px;letter-spacing:1.8px;margin-top:8px;font-weight:600}
.auth-content{display:flex;flex-direction:column;justify-content:center;padding:48px 38px;min-width:0}
.auth-content>.eyebrow{color:var(--gold);margin-bottom:18px}
.auth-content h1{font-size:clamp(32px,4vw,44px);letter-spacing:-1.6px;line-height:1.13}
.auth-content>p{font-size:14px;line-height:1.8;margin-top:20px}
.auth-content .auth-status{margin:26px 0 16px;padding:14px 16px;border:1px solid #d7b87335;border-radius:10px;background:#09162590;color:#d1dce4;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.auth-content>button{width:100%;margin:6px 0;min-height:52px;font-size:14px}
.auth-google-mark{display:grid;place-items:center;width:27px;height:27px;background:white;color:#4285f4;border-radius:50%;font:bold 19px Arial,sans-serif;flex-shrink:0}
.auth-content #authGateHint{font-size:12px;line-height:1.7;color:#b7c5d1;margin-top:18px}
.auth-gate[data-state=error] .auth-status{color:#f3c5b5;background:#5c282329;border-color:#e49a7b5c}
.auth-gate[data-state=loading] .auth-status:before{content:'';display:inline-block;vertical-align:middle;width:14px;height:14px;margin-right:10px;border:2px solid #eec78038;border-top-color:var(--gold);border-radius:50%;animation:auth-loading .9s linear infinite}
@keyframes auth-loading{to{transform:rotate(360deg)}}
@media(min-width:1024px){
  .topbar{overflow:hidden;padding-top:26px;padding-bottom:18px}
  .topbar .tabs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:26px 0 18px;gap:4px}
  .topbar .tab{min-height:44px;padding-block:10px;flex:0 0 auto}
  .topbar .profile-tab{margin-top:auto;border-top:1px solid #d7b87326}
  .topbar .topbar-actions{flex:0 0 auto;margin-top:0;gap:8px;padding-top:16px}
  .topbar .wallet{min-height:54px;padding:10px}
  .shop-layout{grid-template-columns:270px minmax(0,1fr)}
}
@media(min-width:1024px) and (max-width:1250px){
  .shop-layout{grid-template-columns:240px minmax(0,1fr);gap:16px}
  .shop-layout .shop-card{grid-template-columns:65px minmax(0,1fr);gap:7px 10px;padding:16px}
  .shop-layout .shop-card>.shop-art,.shop-layout .shop-card>.shop-art>img{width:65px}
  .shop-layout .shop-card>h2{font-size:18px}
}
@media(max-width:1023px){
  .app-shell{max-width:none;padding:0 22px calc(108px + env(safe-area-inset-bottom))}
  .topbar{height:84px;min-height:0;flex-wrap:nowrap;padding:0;gap:12px;justify-content:space-between}
  .topbar .tabs{display:flex;position:fixed;inset:auto 0 0;order:0;width:100%;margin:0;gap:4px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;background:#0b1729f7;border-top:1px solid #c5d3de24;z-index:100;justify-content:flex-start;touch-action:pan-x}
  .topbar .tabs::-webkit-scrollbar{display:none}
  .topbar .tabs .tab{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:0 0 76px;min-height:56px;padding:5px 7px!important;font-size:11px!important;line-height:1.3;border-radius:8px;white-space:nowrap}
  .topbar .tab span{margin:0;font-size:20px;line-height:1.2}
  .topbar .profile-tab{margin-left:6px;border-left:1px solid #d7b87326}
  .topbar .topbar-actions{margin-left:auto;gap:9px}
  .topbar .wallet{min-height:42px}
  .profile-layout{grid-template-columns:1fr}
  .profile-account-panel{padding:20px}
  .app-toast{bottom:calc(94px + env(safe-area-inset-bottom))}
  .exchange-dock{bottom:calc(88px + env(safe-area-inset-bottom))}
  .exchange-offer.mobile-open{bottom:calc(88px + env(safe-area-inset-bottom));max-height:calc(100dvh - 120px)}
  .exchange-layout{padding-bottom:170px}
  .shop-layout .shop-card>.shop-price{justify-content:center;font-size:28px}
}
@media(min-width:701px) and (max-width:1023px){
  .shop-layout{grid-template-columns:1fr}
  .shop-layout>.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-layout .shop-card{display:flex;text-align:center}
  .shop-layout .shop-card>.shop-price{margin:14px 0}
  .shop-layout .card-shop-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
}
@media(max-width:700px){
  .app-shell{padding-inline:16px}
  .topbar{height:80px}
  .shop-layout .shop-card>.shop-price{font-size:26px;margin:14px 0}
  .shop-layout .shop-card>p{font-size:11px}
  .shop-layout .shop-card .offer-label{font-size:7px;letter-spacing:.9px}
  .shop-layout .shop-card>.small-note{font-size:10px}
  .shop-layout .card-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .shop-layout .market-card{padding:10px}
  .shop-layout .market-card>strong{font-size:20px}
  .market-card>small{font-size:10px;min-height:32px}
  .shop-layout .card-market>.muted{font-size:12px}
  .ranking-switch{width:100%}
  .ranking-switch button{flex:1;justify-content:center;padding:10px;line-height:1.5}
  .rank-row{grid-template-columns:27px 36px minmax(0,1fr);padding:12px 0;gap:8px}
  .rank-row strong{grid-column:3;font-size:14px}
  .rank-row>img{grid-row:1/3}
  .friend-search{flex-wrap:wrap}
  .friend-search input{flex:1 1 180px}
  .friend-search button{flex:1 1 auto}
  .friend-row>button:first-child{flex:1 1 auto}
  .social-identity strong{font-size:21px;overflow-wrap:anywhere}
  .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .showcase-slot>span,.showcase-grid figcaption{font-size:12px}
  .avatar-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .auth-gate{padding:20px 16px}
  .auth-card{grid-template-columns:1fr;border-radius:20px}
  .auth-art{padding:25px 24px 0;border:0;background:none;gap:0;align-items:flex-start}
  .auth-art>img,.auth-art>p{display:none}
  .auth-brand{font-size:29px}
  .auth-brand .brand-emblem{width:42px;height:42px;font-size:29px}
  .auth-brand small{font-size:10px}
  .auth-content{padding:30px 24px}
  .auth-content h1{font-size:34px}
  .auth-content>.eyebrow{font-size:9px;letter-spacing:1.5px}
  .auth-content>p{font-size:13px}
  .auth-content .auth-status{margin-top:22px}
}
@media(max-width:380px){
  .topbar .brand{font-size:22px;gap:7px}
  .topbar .brand small{font-size:5px}
  .topbar .wallet{padding-inline:7px}
  .topbar .topbar-actions{gap:6px}
  .topbar .tabs .tab{flex-basis:72px}
  .shop-layout .shop-card>h2{font-size:16px}
  .shop-layout .shop-card>.shop-price{font-size:23px}
  .auth-content,.auth-art{padding-inline:20px}
}
.showcase-slot small{color:#e4bc73;font-size:11px}.showcase-slot .euro-value{font-size:10px;margin-top:3px}.showcase-slot img{flex-shrink:0}@media(max-width:500px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.showcase-slot span{font-size:11px}.showcase-slot{aspect-ratio:auto}.showcase-slot small{font-size:12px}}

/* Compact actions: product art, state and one clear next step. */
.screen{padding-bottom:20px}
.page-heading{padding:24px 0 18px;align-items:center;gap:16px;flex-direction:row}
.page-heading h1{font-size:32px;letter-spacing:-1px;margin:0;line-height:1.2}
.page-heading>button{width:auto;flex-shrink:0;min-height:44px;padding:10px 15px}
.section-head h2{font-size:22px;margin:0;letter-spacing:-.6px}
.stat-row{gap:16px;padding:16px 0;margin-bottom:18px}
.stat-row b{font-size:24px;margin-top:3px}
.surface{border-radius:16px}
.footer{padding:16px 0;margin-top:10px;flex-direction:row;gap:16px;font-size:10px}
.footer .text-action{min-height:36px;padding:5px 0;font-size:11px}
.opening-heading{padding-bottom:16px}
.port-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.compact-opening-card{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:20px;text-align:center;gap:12px}
.compact-opening-card:before{display:none}
.compact-opening-card:after{display:none}
.compact-opening-card>.section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px}
.compact-opening-card .section-head h2{font-size:20px;color:var(--text)}
.compact-opening-card .status-badge{font-size:12px;border:0;padding:0;color:var(--gold);background:none}
.compact-opening-card .gift-count{display:block;color:var(--gold);font-size:23px;font-weight:750;letter-spacing:-.5px;line-height:1.2;margin:0;white-space:nowrap}
.compact-opening-card .empty-display,.compact-opening-card .gift-art{display:flex;justify-content:center;align-items:center;position:relative;grid-column:auto;grid-row:auto;order:initial;height:145px;padding:0;margin:0;width:100%}
.compact-opening-card #emptyDisplay>img.display-visual{height:140px;width:155px;max-width:100%;object-fit:contain;animation:none}
.compact-opening-card .gift-art>img{height:128px;width:auto;max-width:100%;object-fit:contain;transform:rotate(-5deg)}
.compact-opening-card .gift-art:before{width:145px;height:145px}
.compact-opening-card>:not(.gift-art){grid-column:auto;order:initial;justify-self:stretch}
.compact-opening-card>.opening-timer,.compact-opening-card #freeBoosterTimer{min-height:20px;margin:0;font-size:13px;line-height:1.5;color:var(--mint);font-variant-numeric:tabular-nums}
.compact-opening-card>.primary-action{width:100%;min-width:0;min-height:44px;margin:0;margin-top:auto;padding:10px;font-size:13px;line-height:1.3}
.compact-opening-card #pendingBoosterText{margin:0;font-size:11px;line-height:1.4}
.compact-opening-card #pendingBoosterText:empty{display:none}
.display-waiting.compact-opening-card .claim-action{opacity:1}
.display-packs-panel{grid-column:1/-1;min-width:0;padding:16px}
.display-packs-panel:has(.display-grid[hidden]){display:none}
.display-packs-panel .display-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:0}
.display-packs-panel .display-pack{min-width:44px;min-height:44px;padding:6px 4px}
.display-packs-panel .display-pack img{height:80px;width:100%;object-fit:contain}
.display-packs-panel .display-pack>span{margin-top:4px;font-size:11px}
.display-packs-panel .display-progress{padding:12px 0 0;gap:8px}
.resume-banner{margin-top:18px;padding:12px 16px;flex-direction:row;text-align:left;gap:12px}
.resume-banner button{width:auto;flex-shrink:0;min-height:44px;padding:10px 14px}
.reveal-view{margin-top:20px;padding:18px 22px;min-height:0}
.reveal-top{padding-bottom:12px}
.reveal-content{min-height:0;padding:12px 0;gap:24px}
.reveal-side.right .preview-action{font-size:11px}
.reveal-side.right .gesture-hint{display:none}
.pack-choice{padding:24px;margin-top:20px;max-width:760px}
.pack-choice h2{font-size:28px;margin:12px 0}
.pack-choice .summary-actions,.summary-actions{margin-top:18px;gap:10px}
.summary-view{padding:24px;margin-top:20px}
.summary-view h2{font-size:30px;margin:12px 0 18px}
.collection-toolbar{padding:10px 12px;gap:10px}
.results-label{margin:14px 0;font-size:12px}
.collection-grid{gap:18px 12px}
.tile-meta{padding:9px}
.tile-meta .euro-value{font-size:10px;margin-top:2px}
.pagination{margin-top:20px}
.achievement-panel{padding:20px;margin-bottom:20px}
.achievement-panel .section-head{align-items:center}
.success-overview{margin:0 0 18px;padding:16px;gap:16px}
.success-filters{margin:16px 0}
.achievement{padding:12px;gap:6px}
.achievement-grid{gap:10px}
.exchange-layout{gap:18px;margin-bottom:20px}
.exchange-selection,.exchange-offer{padding:20px}
.exchange-selection h2{margin-bottom:14px}
.exchange-slots{max-width:440px;margin-bottom:16px}
.exchange-toolbar{gap:10px;margin-bottom:12px}
.exchange-toolbar .search-field{padding:4px 10px}
.exchange-values{margin:16px 0}
.exchange-warning{margin:16px 0;padding:12px;line-height:1.6;font-size:12px}
.shop-layout{align-items:start;gap:18px}
#shopScreen>.page-heading{padding:24px 0 18px}
#shopScreen>.page-heading h1{font-size:32px}
.shop-layout>.shop-grid{gap:12px}
.shop-layout .shop-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px 12px;align-content:start;align-items:center;padding:16px;text-align:left}
.shop-layout .shop-card>.shop-art{grid-column:1;grid-row:1/4;margin:0;width:76px;height:100px}
.shop-layout .shop-card>.shop-art>img{width:76px;height:94px;object-fit:contain;transform:none}
.shop-layout .shop-card>h2,.shop-layout .shop-card>p:not(.small-note),.shop-layout .shop-card>.shop-price{grid-column:2;margin:0}
.shop-layout .shop-card>h2{font-size:20px}
.shop-layout .shop-card>p:not(.small-note){font-size:12px;line-height:1.4}
.shop-layout .shop-card>.shop-price{justify-content:flex-start;font-size:23px;line-height:1.3;margin:0}
.shop-layout .shop-card>button,.shop-layout .shop-card>.small-note{grid-column:1/-1}
.shop-layout .shop-card>button{margin:6px 0 0;min-height:44px;font-size:12px}
.shop-layout .shop-card>.small-note{min-height:0;margin:0;font-size:11px;line-height:1.4;text-align:center}
.shop-layout .shop-card>.small-note:empty{display:none}
.shop-layout>.card-market{padding:18px}
.shop-layout .card-market>.section-head{margin-bottom:16px;align-items:center;flex-wrap:nowrap}
.shop-layout .card-market h2{font-size:22px}
.shop-layout .card-shop-grid{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:12px}
.shop-layout .market-card{gap:8px;padding:8px}
.market-inspect{gap:5px}
.market-inspect b{font-size:12px;line-height:1.35}
.market-inspect span{font-size:10px}
.shop-layout .market-card>strong{font-size:20px;line-height:1.3}
.market-card .euro-value{font-size:10px;margin-top:3px}
.market-card>small{font-size:11px;min-height:0;line-height:1.4}
.market-card>small:empty{display:none}
.market-timer span{font-size:10px}
.market-timer b{font-size:25px}
.shop-footer{display:flex;justify-content:flex-end;margin-top:10px}
.profile-layout{gap:18px;grid-template-columns:minmax(0,1fr) 270px}
.social-identity{margin:0 0 18px;gap:12px}
.social-identity>img{width:58px;height:58px}
.social-identity strong{font-size:24px}
.showcase-panel,.profile-account-panel,.friends-panel,.leaderboard-panel{padding:20px}
.showcase-grid{gap:10px;margin:16px 0}
.showcase-slot{aspect-ratio:744/1040;position:relative;min-height:44px;padding:4px;border-radius:10px}
.showcase-slot img{display:block;width:100%;height:100%;aspect-ratio:744/1040;object-fit:contain;border-radius:6px}
.showcase-slot>span{font-size:11px;line-height:1.3}
.showcase-slot>small{display:none}
.showcase-panel #showcaseHint{margin:0;font-size:11px}
.showcase-panel #showcaseHint:empty{display:none}
.showcase-panel .primary-action{margin-top:14px;min-height:44px;font-size:12px}
.profile-account-panel h2{font-size:22px;margin-bottom:10px}
.profile-account-panel p{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.profile-account-panel button{margin-top:14px;min-height:44px}
.friends-page .friends-panel{max-width:none}
.friends-page .friends-panel>h2{font-size:22px;margin-bottom:14px}
.friend-list-panel{margin-top:16px}
.friend-search{margin-top:8px}
.friend-search input{padding:10px 12px;min-height:44px}
.friend-group{margin-top:16px}
.friend-group h3{font-size:16px}
.friend-row{padding:10px 0;gap:8px}
.rank-row{min-height:66px}
.leaderboard-panel>.small-note{margin:10px 0;font-size:11px}
.social-status{font-size:12px;margin:0 0 12px}
.account-status:empty,.profile-feedback:empty,#accountLocalNote:empty{display:none}
.account-status{margin:14px 0;padding:10px 12px;font-size:12px}
.account-dialog>.small-note{margin-top:10px}
.options-save{margin-top:20px;padding-top:16px}
.options-save p{font-size:12px;line-height:1.5}
.auth-card{width:min(100%,800px)}
.auth-art{padding:30px;gap:22px}
.auth-art>img{height:240px}
.auth-content{padding:32px}
.auth-content>p{margin-top:12px}
.auth-content .auth-status{margin:20px 0 12px;padding:12px}
.profile-onboarding{position:relative;z-index:2;display:grid;place-items:center;min-height:100svh;padding:24px 16px}
.onboarding-card{width:min(100%,560px);padding:26px}
.onboarding-heading{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.onboarding-heading h1{font-size:30px;margin:0;line-height:1.2}
.onboarding-heading .brand-emblem{width:42px;height:42px;font-size:30px;flex-shrink:0}
#onboardingForm{display:grid;gap:10px}
#onboardingForm label,.onboarding-card .profile-avatar-label{font-size:13px;font-weight:650}
#onboardingUsername{width:100%;min-height:46px;border:1px solid #385065;border-radius:10px;background:#091828;color:var(--text);padding:10px 12px;font-size:15px}
#onboardingUsernameHint{font-size:11px;line-height:1.5}
.onboarding-card .profile-avatar-label{margin-top:6px}
.onboarding-card .avatar-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.onboarding-card .avatar-options button{min-height:44px;padding:4px;border-radius:10px}
.onboarding-card .avatar-options span{display:block;font-size:10px;line-height:1.3}
#onboardingFeedback{font-size:12px;line-height:1.5}
#onboardingSaveBtn{width:100%;min-height:46px;margin-top:4px;font-size:14px}
#onboardingLogoutBtn{width:100%;margin-top:10px}
.showcase-dialog{position:fixed;inset:0;width:min(880px,calc(100vw - 32px));max-height:min(820px,calc(100dvh - 40px));overflow:auto;overscroll-behavior:contain;padding:0 20px 18px;background:#0d1b2d;color:var(--text);border:1px solid #d7b87355;border-radius:16px;box-shadow:0 24px 100px #0009}
.showcase-dialog::backdrop{background:#030a17b8}
.showcase-picker-header{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0d1b2d;padding:16px 0 12px}
.showcase-picker-header h2{font-size:24px;line-height:1.2}
.showcase-picker-header .icon-button{flex-shrink:0;width:40px;height:40px;font-size:25px}
.showcase-search{display:block;width:100%;min-height:44px;padding:10px 12px;margin-bottom:12px;color:var(--text);background:#091828;border:1px solid #385065;border-radius:9px;font-size:13px}
#showcasePickerStatus{margin:10px 0;font-size:12px}
#showcasePickerStatus:empty{display:none}
.showcase-card-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-items:start;gap:12px}
.showcase-card-option{display:flex;flex-direction:column;min-width:0;padding:6px;gap:4px;border:1px solid #364759;border-radius:9px;background:#091828;text-align:left;color:var(--text)}
.showcase-card-option:hover:not(:disabled){border-color:var(--gold);background:#182c40}
.showcase-card-option[aria-pressed=true]{border:2px solid var(--gold);padding:5px;background:#28323a}
.showcase-card-option:disabled{opacity:.5}
.showcase-card-option img{display:block;width:100%;aspect-ratio:744/1040;object-fit:contain;border-radius:5px}
.showcase-card-option b,.showcase-card-option strong{font-size:11px;font-weight:650;line-height:1.35;overflow-wrap:anywhere;max-width:100%}
.showcase-card-option span,.showcase-card-option small{font-size:10px;line-height:1.35;color:var(--muted)}
.showcase-picker-footer{position:sticky;bottom:-18px;margin-top:16px;padding:12px 0 0;background:#0d1b2d;display:flex;justify-content:flex-end}
.showcase-picker-footer button{min-height:44px;min-width:100px;font-size:12px}
@media(max-width:1250px){.display-packs-panel .display-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.profile-layout{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:1023px){.profile-layout{grid-template-columns:1fr}.profile-account-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px}.profile-account-panel h2,.profile-account-panel p{grid-column:1;margin:0}.profile-account-panel button{grid-column:2;grid-row:1/4;margin:0;width:auto}.shop-layout{grid-template-columns:1fr}.shop-layout>.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{flex-wrap:wrap;justify-content:space-between}}
@media(max-width:700px){
  .page-heading{padding:20px 0 16px;gap:12px}
  .page-heading h1,#shopScreen>.page-heading h1{font-size:27px}
  .page-heading>button{font-size:11px;padding:9px 12px;min-height:42px}
  #shopScreen>.page-heading{padding:20px 0 16px}
  .stat-row{gap:12px;padding:12px 0;margin-bottom:16px}
  .stat-row b{font-size:22px}.stat-row span{font-size:10px}
  .port-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .compact-opening-card{width:auto;min-width:0;padding:12px;gap:10px;border-radius:12px}
  .compact-opening-card>.section-head{gap:4px;align-items:flex-start;flex-direction:column;text-align:left}
  .compact-opening-card .section-head h2{font-size:17px;line-height:1.2}
  .compact-opening-card .gift-count{font-size:21px}
  .compact-opening-card .status-badge{font-size:13px;line-height:1.7}
  .compact-opening-card .empty-display,.compact-opening-card .gift-art{height:100px}
  .compact-opening-card #emptyDisplay>img.display-visual{height:96px;width:110px}
  .compact-opening-card .gift-art>img{height:94px}
  .compact-opening-card .gift-art:before{width:100px;height:100px}
  .compact-opening-card>.opening-timer,.compact-opening-card #freeBoosterTimer{font-size:12px;min-height:18px}
  .compact-opening-card>.primary-action{font-size:12px;min-height:44px;padding:10px 5px}
  .compact-opening-card #pendingBoosterText{font-size:10px}
  .display-packs-panel{padding:10px}
  .display-packs-panel .display-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .display-packs-panel .display-pack{min-width:0;min-height:44px;padding:6px 2px}
  .display-packs-panel .display-pack img{height:64px}
  .display-packs-panel .display-pack>span{font-size:10px}
  .display-packs-panel .display-progress{font-size:10px}
  .reveal-view{margin-top:16px;padding:14px}
  .reveal-content{gap:14px;padding:0}
  .reveal-center{gap:10px}
  .reveal-side.right{gap:8px}
  .reveal-side.right .primary-action,.reveal-side.right .secondary-action{font-size:11px;min-height:44px}
  .reveal-side.right .small-note{font-size:10px}
  .summary-view,.pack-choice{padding:20px 14px}
  .pack-choice h2,.summary-view h2{font-size:25px}
  .summary-actions{margin-top:16px}
  .collection-grid{gap:14px 9px}
  .collection-toolbar{padding:8px;gap:8px}
  .collection-toolbar input,.collection-toolbar select{font-size:11px;min-height:44px}
  .collection-toolbar>label:not(.search-field){flex-basis:calc(50% - 8px)}
  .tile-meta b{font-size:10px}.tile-meta span{font-size:9px}.tile-meta strong{font-size:12px}
  .results-label{font-size:11px;margin:12px 0}
  .success-overview{padding:12px;gap:8px}
  .success-overview>div{padding:0}.success-overview b{font-size:20px}.success-overview span{font-size:10px}
  .achievement-panel,.exchange-selection,.exchange-offer{padding:16px}
  .exchange-selection h2{font-size:20px}
  .exchange-slots{gap:8px;margin-bottom:14px}
  .exchange-card b{font-size:10px}.exchange-card span,.exchange-card small{font-size:9px}
  .shop-layout>.shop-grid{gap:10px}
  .shop-layout .shop-card{display:flex;flex-direction:column;padding:12px;gap:6px;text-align:center;align-items:stretch}
  .shop-layout .shop-card>.shop-art{width:100%;height:100px;margin:0}
  .shop-layout .shop-card>.shop-art>img{width:auto;height:96px;max-width:100%}
  .shop-layout .shop-card>h2{font-size:18px;margin:0}
  .shop-layout .shop-card>p:not(.small-note){font-size:11px}
  .shop-layout .shop-card>.shop-price{justify-content:center;font-size:23px;margin:4px 0}
  .shop-layout .shop-card>button{margin:4px 0 0;padding:9px 5px;font-size:11px}
  .shop-layout .shop-card>.small-note{font-size:10px;line-height:1.4}
  .shop-layout>.card-market{padding:14px}
  .shop-layout .card-market>.section-head{margin-bottom:14px;grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .shop-layout .card-market h2{font-size:22px}
  .shop-layout .card-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .shop-layout .market-card{gap:8px;padding:7px}
  .shop-layout .market-card>strong{font-size:19px}
  .shop-layout .market-card .primary-action{font-size:11px;min-height:44px}
  .market-card>small{font-size:10px;min-height:0}
  .showcase-panel,.profile-account-panel,.friends-panel,.leaderboard-panel{padding:16px}
  .showcase-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
  .showcase-slot{aspect-ratio:744/1040;border-radius:8px;padding:3px}
  .showcase-slot>span{font-size:10px}
  .social-identity{margin-bottom:14px}.social-identity strong{font-size:22px}
  .profile-account-panel{grid-template-columns:minmax(0,1fr)}
  .profile-account-panel button{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .friend-search{flex-wrap:nowrap}
  .friend-search input{flex:1;min-width:0}.friend-search button{flex:0 0 auto;min-height:44px;font-size:12px;padding:10px 14px}
  .leaderboard-panel>.section-head{gap:0}
  .ranking-switch button{font-size:11px;min-height:44px}
  .rank-row strong{font-size:13px}
  .footer{padding:12px 0;font-size:10px;gap:8px}
  .auth-art{padding:22px 24px 0}.auth-content{padding:24px}
  .auth-content h1{font-size:32px}
  .onboarding-card{padding:20px}
  .onboarding-heading{margin-bottom:18px}.onboarding-heading h1{font-size:27px}
  .onboarding-card .avatar-options{gap:5px}
  .showcase-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);padding:0 12px 12px;border-radius:12px}
  .showcase-picker-header{padding:12px 0 10px;gap:10px}.showcase-picker-header h2{font-size:21px}
  .showcase-search{top:62px;font-size:12px}
  .showcase-card-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .showcase-card-option{padding:4px}.showcase-card-option[aria-pressed=true]{padding:3px}
  .showcase-card-option b,.showcase-card-option strong{font-size:10px}
  .showcase-card-option span,.showcase-card-option small{font-size:9px}
  .showcase-picker-footer{bottom:-12px;margin-top:12px;padding-top:10px}
}
@media(max-width:380px){.display-packs-panel .display-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.compact-opening-card{padding:10px}.compact-opening-card .section-head h2{font-size:16px}.compact-opening-card .gift-count{font-size:20px}.compact-opening-card>.primary-action{font-size:11px}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-card{padding:16px}.onboarding-card .avatar-options span{font-size:9px}.showcase-card-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reveal-content{grid-template-columns:minmax(0,290px) minmax(230px,1fr);max-width:760px;margin-inline:auto;align-items:center}
.reveal-content>.reveal-center{grid-column:1;grid-row:1}
.reveal-content>.reveal-side.right{grid-column:2;grid-row:1;padding:0}
.reveal-content>.card-facts{display:block;grid-column:1/-1;grid-row:2;max-width:none;padding:0;border-top:1px solid var(--line)}
.card-facts>summary,.detail-distribution>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;min-height:44px;padding:10px 0;color:var(--muted);font-size:12px;letter-spacing:0}
.card-facts>summary::-webkit-details-marker,.detail-distribution>summary::-webkit-details-marker{display:none}
.card-facts>summary:after,.detail-distribution>summary:after{content:'＋';color:var(--mint);font-size:18px}
.card-facts[open]>summary:after,.detail-distribution[open]>summary:after{content:'−'}
.card-facts>summary:focus-visible,.detail-distribution>summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
.reveal-facts-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;padding-bottom:12px}
.reveal-facts-content h2{grid-column:1/-1;margin:4px 0 0;font-size:22px;min-height:0}
.reveal-facts-content dl{align-self:start}
.reveal-facts-content .pull-probability{margin:0;padding:12px}
.reveal-facts-content .pull-probability>b{font-size:24px;margin:3px 0}
.reveal-facts-content .pull-probability small{font-size:10px}
.detail-distribution{padding-top:0;margin-top:16px;border-top:1px solid var(--line)}
.detail-distribution p{font-size:12px;line-height:1.6;margin:0 0 10px}
.profile-unlocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.profile-unlocks label{display:flex;flex-direction:column;min-width:0;gap:6px;font-size:12px;color:var(--muted)}
.profile-unlocks select{width:100%;font-size:12px;min-height:44px;min-width:0;padding:9px 26px 9px 10px;background:#091828}
[data-name-color=gold]{color:#f2ce82!important;text-shadow:0 0 14px #eec78022}
[data-name-color=rainbow]{color:#ecb8ff!important;background:linear-gradient(90deg,#ff9caf,#ffe095,#a1efd0,#9ccaff,#e5b1ff,#ff9caf);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbow-name 7s ease-in-out infinite}
.player-title{display:block;color:var(--muted);font-size:11px;line-height:1.4;letter-spacing:0;font-weight:500;margin-top:2px}
.friend-row .player-title{margin-top:0}.rank-row .player-title{grid-column:3;font-size:10px}
.tab{position:relative}
.tab[data-notification=true]::after{content:'';position:absolute;right:12px;top:10px;width:8px;height:8px;border:1px solid #ffc5b2;border-radius:50%;background:#f2605b;box-shadow:0 0 0 3px #f2605b18;pointer-events:none}
@keyframes rainbow-name{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:1023px){.topbar .tab[data-notification=true]::after{top:6px;right:18px}}
@media(max-width:700px){.reveal-content{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.reveal-content>.reveal-center{grid-column:1;grid-row:1}.reveal-content>.reveal-side.right{grid-column:1;grid-row:2}.reveal-content>.card-facts{grid-column:1;grid-row:3;padding:0}.reveal-facts-content{grid-template-columns:1fr;gap:12px}.reveal-facts-content h2{grid-column:1;font-size:20px}.rank-row .player-title{grid-column:auto}.profile-unlocks{gap:8px}.profile-unlocks select{font-size:11px}}
/* Reveal: a card showcase with its identity and actions kept together. */
#revealView{max-width:980px;margin:24px auto;padding:22px 30px 26px;background:radial-gradient(ellipse at 22% 44%,#24455465,transparent 55%),linear-gradient(135deg,#142637,#0c1928);border-color:#d7b87330}
#revealView:after{display:none}
#revealView .reveal-top{padding-bottom:18px;border-bottom:1px solid #b8c6d51a;gap:16px}
#revealView .reveal-top .text-action{font-size:12px;color:#b5c3ce;min-height:36px}
#revealView #packOrigin{font-size:10px;letter-spacing:1.6px;color:#b5c3ce}
#revealView .reveal-content{grid-template-columns:minmax(230px,320px) minmax(0,390px);max-width:790px;gap:26px 48px;padding:26px 0 0;align-items:center}
#revealView .reveal-center{gap:18px;padding:0 14px}
#revealView .card-position{height:30px;min-width:116px;border:0;background:none;box-shadow:none;padding:0}
#revealView .card-position>b{font-size:20px}
#revealView .card-position>span{font-size:9px}
#revealView .reveal-badge{font-size:9px;letter-spacing:1px;min-height:18px;margin:0;line-height:1.6}
#revealView .card-viewer{width:280px;min-width:0}
#revealView .card-viewer:after{inset:-7px;border-radius:14px;background:#0b1724;border-color:#d7b87345;box-shadow:inset 0 0 0 3px #b9cad509,0 18px 32px #0005}
#revealView .reveal-progress{width:116px;height:3px;margin-top:2px}
#revealView .reveal-side.right{gap:12px;display:flex;flex-direction:column;align-items:stretch}
#revealView .reveal-info-kicker{font-size:10px;letter-spacing:2px;color:#8cabb8;margin:0 0 2px}
#revealView .card-meta{text-align:left;width:100%;margin-bottom:8px}
#revealView .rarity-label{padding:4px 9px;font-size:10px;border-radius:5px;line-height:1.4}
#revealView .card-meta h3{font-size:clamp(26px,2.8vw,36px);font-weight:700;line-height:1.15;letter-spacing:-1px;margin:12px 0 8px;overflow-wrap:anywhere}
#revealView .reveal-card-reference{font-size:12px;line-height:1.6;color:#a5b7c7;margin:0}
#revealView .reveal-card-values{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;margin-top:24px;padding:18px 0;border-block:1px solid #b8c6d51a}
#revealView .reveal-card-values>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
#revealView .reveal-card-values>div+div{border-left:1px solid #b8c6d51a;padding-left:18px}
#revealView .reveal-card-values>div>span{font-size:11px;color:#a5b7c7}
#revealView .reveal-card-values b{font-size:24px;line-height:1.4;color:var(--text);font-weight:650}
#revealView .reveal-card-values>div:first-child b{color:var(--gold)}
#revealView .reveal-card-values b .currency-amount{font-size:inherit;color:inherit;font-weight:inherit}
#revealView .reveal-card-values b small{font-size:12px;font-weight:400;color:#d0d9df}
#revealView .reveal-card-values small,#revealView .reveal-card-values .euro-value{font-size:10px;color:#9aafbf;line-height:1.6;margin:0}
#revealView .reveal-side.right .primary-action,#revealView .reveal-side.right .secondary-action{min-height:48px;padding:12px 18px;font-size:13px;border-radius:9px}
#revealView .reveal-side.right .primary-action{background:linear-gradient(110deg,#f2d698,#dab56e);box-shadow:0 4px 16px #d7b87312}
#revealView .reveal-side.right .primary-action.finishing{background:linear-gradient(110deg,#bce5d5,#72b8a6)}
#revealView .reveal-side.right .secondary-action{background:#ffffff04;border-color:#b8c6d52a;color:#ccd8e1}
#revealView .reveal-side.right .small-note{font-size:10px;margin:0;line-height:1.5;text-align:center;color:#9aafbf}
#revealView .preview-action{align-self:center;width:auto;min-height:40px;margin:0;padding:8px 12px;font-size:11px;color:var(--mint);border-radius:7px}
#revealView .preview-action:hover{background:#89c9ba0a}
#revealView .preview-action[aria-pressed=true]{background:#d7b87312;color:var(--gold)}
#revealView .card-facts{background:#07132155;border:1px solid #b8c6d51c;border-radius:10px;box-shadow:none;padding:0 18px;align-self:start}
#revealView .card-facts>summary{min-height:48px;padding:12px 0;font-size:12px;color:#bdccd6;font-weight:550}
#revealView .card-facts>summary:after{font-size:16px}
#revealView .reveal-facts-content{padding:4px 0 18px;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}
#revealView #revealDetailName{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;margin:0;min-height:0}
#revealView #revealDetailStats{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
#revealView #revealDetailStats>div{display:block;padding:9px 0;font-size:11px;line-height:1.6}
#revealView #revealDetailStats dt{font-size:10px;color:#9aafbf}
#revealView #revealDetailStats dd{text-align:left;font-weight:550;line-height:1.5;margin:3px 0 0}
#revealView .pull-probability{padding:16px;background:#d7b87307;border-color:#d7b87324;margin:0}
#revealView .pull-probability .eyebrow{font-size:9px;letter-spacing:1.3px}
#revealView .pull-probability>b{font-size:25px;margin:9px 0 6px;line-height:1.2}
#revealView .pull-probability p,#revealView .pull-probability small{font-size:10px;line-height:1.6;margin:6px 0 0}
@media(min-width:701px) and (max-width:1000px){
  #revealView{padding:18px 22px}
  #revealView .reveal-content{grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:24px 30px}
  #revealView .card-viewer{width:240px}
  #revealView .reveal-card-values{gap:12px}
  #revealView .reveal-card-values>div+div{padding-left:12px}
}
@media(max-width:700px){
  #revealView{margin:16px auto;padding:14px 16px 16px;border-radius:14px}
  #revealView .reveal-top{padding-bottom:10px;gap:4px 12px}
  #revealView .reveal-top .text-action{font-size:10px;min-height:32px}
  #revealView #packOrigin{font-size:9px;padding-bottom:0}
  #revealView .reveal-content{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:14px}
  #revealView .reveal-center{gap:12px;padding:0 10px}
  #revealView .card-viewer{width:clamp(150px,calc((100svh - 605px)*.715),210px)}
  #revealView .reveal-progress{display:none}
  #revealView .reveal-side.right{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #revealView .reveal-info-kicker{display:none}
  #revealView .card-meta{grid-column:1/-1;margin:0;text-align:center}
  #revealView .card-meta .rarity-label{display:none}
  #revealView .card-meta h3{font-size:25px;letter-spacing:-.6px;margin:8px 0 4px}
  #revealView .reveal-card-reference{font-size:11px}
  #revealView .reveal-card-values{margin-top:12px;padding:10px 0;gap:12px;text-align:left}
  #revealView .reveal-card-values b{font-size:21px}
  #revealView .reveal-card-values>div+div{padding-left:12px}
  #revealView .reveal-card-values>div:last-child>small{display:none}
  #revealView .reveal-side.right .primary-action{order:0;grid-column:1/-1}
  #revealView .reveal-side.right .secondary-action{order:1;grid-column:1;min-height:44px;font-size:12px;padding:10px}
  #revealView .reveal-side.right .preview-action{order:1;grid-column:2;min-height:44px;width:100%;font-size:10px;padding:6px;line-height:1.6;border:1px solid #89c9ba25}
  #revealView .reveal-side.right .small-note{order:2;grid-column:1/-1;font-size:9px}
  #revealView .card-facts{padding:0 14px}
  #revealView .reveal-facts-content{grid-template-columns:1fr;gap:16px;padding-bottom:14px}
}
@media(max-width:700px) and (max-height:650px){
  #revealView .card-viewer{width:150px}
  #revealView .reveal-content{gap:14px}
  #revealView .card-meta h3{font-size:22px}
}
/* Three mobile destinations, with the remaining sections in a dismissible menu. */
.mobile-nav-menu,.mobile-nav-items{display:contents}
.mobile-nav-heading,.mobile-nav-more{display:none}
.mobile-nav-more{position:relative;background:transparent;color:#acbac9;font-weight:650;border-radius:8px}
.mobile-nav-more[data-active=true],.mobile-nav-more[aria-expanded=true]{color:var(--gold);background:#eec78010}
.mobile-nav-more[data-notification=true]:after{content:'';position:absolute;right:calc(50% - 20px);top:7px;width:8px;height:8px;border:1px solid #ffc5b2;border-radius:50%;background:#f2605b;box-shadow:0 0 0 3px #f2605b18}
@media(max-width:1023px){
  .topbar .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px;overflow:visible;touch-action:auto}
  .topbar .tabs>.tab,.topbar .tabs>.mobile-nav-more{width:100%;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px!important;line-height:1.3;padding:5px 7px!important}
  .mobile-nav-more>span{font-size:27px;line-height:24px;font-weight:750}
  #mobileNavMenu:not(:popover-open){display:none}
  #mobileNavMenu:popover-open{display:block;position:fixed;inset:auto 12px calc(86px + env(safe-area-inset-bottom));margin:0 auto;width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 114px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:18px;color:var(--text);background:linear-gradient(145deg,#183044,#0c1c2c);border:1px solid #d7b87345;border-radius:18px;box-shadow:0 16px 50px #0008}
  #mobileNavMenu::backdrop{background:#040b1780;backdrop-filter:none}
  .mobile-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
  .mobile-nav-heading h2{font-size:18px;letter-spacing:-.4px;line-height:1.3}
  #mobileNavClose{width:34px;height:34px;flex-shrink:0;font-size:23px;line-height:1;padding:0}
  .mobile-nav-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #mobileNavMenu .tab{position:relative;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;width:100%;min-width:0;min-height:56px;margin:0;padding:12px!important;border:1px solid #b8c6d51c;border-radius:10px;background:#08152366;font-size:12px!important;text-align:left;white-space:normal;line-height:1.4}
  #mobileNavMenu .tab>span{display:grid;place-items:center;flex-shrink:0;width:26px;margin:0;color:#d5c394;font-size:22px;line-height:1.2}
  #mobileNavMenu .tab.active{color:var(--gold);background:#d7b87312;border-color:#d7b87355}
  #mobileNavMenu .tab:hover{background:#ffffff09;border-color:#d7b87344}
  #mobileNavMenu .tab:focus-visible,.mobile-nav-more:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
  #mobileNavMenu .profile-tab{grid-column:1/-1;margin-top:4px}
  #mobileNavMenu .tab[data-notification=true]:after{top:8px;right:8px}
}
.profile-section-nav{display:flex;gap:10px;margin:0 0 20px;padding:6px;background:#08162588;border:1px solid #d7b87326;border-radius:12px;max-width:620px}
.profile-section-nav>button{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-width:0;min-height:46px;padding:10px 14px;color:#adbfcd;background:transparent;border-radius:8px;font-size:13px;font-weight:650}
.profile-section-nav>button[aria-pressed=true]{background:#d7b87318;color:var(--gold);box-shadow:inset 0 0 0 1px #d7b87330}
.profile-section-nav>button[data-notification=true]:after{content:'';position:absolute;top:8px;right:9px;width:7px;height:7px;background:#f2605b;border-radius:50%}
.profile-section-nav>button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.profile-level-band{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:18px 22px}
.profile-level-icon{display:grid;place-items:center;width:44px;height:44px;color:var(--gold);border:1px solid #d7b87344;border-radius:12px;background:#d7b8730a;flex-shrink:0}
.profile-level-band>div:first-of-type{min-width:130px}
.profile-level-band b,.profile-level-band small{display:block}
.profile-level-band b{font-size:20px;color:var(--text);line-height:1.5}
.profile-level-band small{font-size:11px;color:var(--muted);line-height:1.5}
.profile-level-band .eyebrow{font-size:9px;letter-spacing:1.4px}
.profile-xp-track{height:6px;min-width:60px;flex:1;border-radius:6px;background:#ffffff0a;overflow:hidden}
.profile-xp-track>span{display:block;height:100%;background:linear-gradient(90deg,var(--mint),#d7e9b9);border-radius:6px}
.profile-level-band .text-action{white-space:nowrap}
.profile-subview{display:block}
.profile-subview .page-heading{padding-top:8px}
#categoriesScreen .achievements-hero{margin-top:0}
@media(max-width:700px){
  .profile-section-nav{gap:4px;padding:5px;margin-bottom:16px}
  .profile-section-nav>button{font-size:11px;gap:6px;padding:8px 6px;min-height:44px}
  .profile-level-band{padding:14px;gap:12px;flex-wrap:wrap;margin-bottom:18px}
  .profile-level-band>div:first-of-type{flex:1}
  .profile-level-band b{font-size:18px}
  .profile-xp-track{order:3;flex-basis:100%}
  .profile-level-band .text-action{font-size:10px}
  .profile-level-icon{width:36px;height:36px}
}
#main:focus{outline:none}
.topbar .tab:not(.active){border-color:transparent;box-shadow:none}
.stat-row b .currency-amount{font-size:inherit;color:inherit;display:inline-flex;font-weight:inherit}
.stat-row b .currency-amount .berry-icon{width:1em;height:1em}

/* Settings information and deliberate account deletion. */
.settings-info{margin:24px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.settings-info h3{margin:0 0 8px}.settings-info p{margin:0 0 10px;color:var(--muted);font-size:13px}
#deleteAccountForm label{display:block;margin:20px 0 8px;font-size:13px}
#deleteAccountInput{box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);font:inherit;letter-spacing:2px}
#deleteAccountInput:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#deleteAccountFeedback{min-height:20px;font-size:13px;color:var(--muted)}
#confirmDeleteAccountDialog .dialog-actions{flex-wrap:wrap}
#confirmDeleteAccountBtn:disabled{opacity:.4;cursor:not-allowed}

.showcase-picker-tools{position:sticky;top:68px;z-index:2;background:#0d1b2d;padding-bottom:10px}
.showcase-picker-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.showcase-picker-filters label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;color:var(--muted)}
.showcase-picker-filters select{width:100%;min-width:0;min-height:44px;padding:8px;color:var(--text);background:#091828;border:1px solid #385065;border-radius:9px;font-size:12px}
.showcase-picker-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:var(--muted)}
.showcase-picker-summary button{min-height:36px;padding:6px 0;font-size:12px}
@media(max-width:600px){.showcase-picker-tools{top:62px}.showcase-picker-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@media(max-height:600px){.showcase-picker-tools{position:static}}

/* Generated OP17 Simulator logo, sized for the sidebar and compact headers. */
.topbar .brand{width:148px;flex:0 0 auto;min-width:0;padding:0;gap:0;font-size:0;line-height:0;justify-content:center}
.brand-logo{display:block;width:100%;height:auto;object-fit:contain}
.brand:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:6px}
@media(min-width:1024px){.topbar .brand{width:100%;max-width:188px;min-height:94px;margin-inline:auto}}
@media(min-width:701px) and (max-width:1023px){.topbar .brand{width:132px}}
@media(max-width:700px){.topbar .brand{width:122px}}
@media(max-width:360px){.topbar .brand{width:108px}}