/* Middle-island destinations. Kept separate from the games and illustrated upgrade shop. */
#base.screen,#ranks.screen{background:radial-gradient(ellipse at 20% 0,#22465b 0,transparent 48%),#0c192b;color:#f5f0e5}
#base>.topbar,#ranks>.topbar{background:#101f32ee;border-bottom:1px solid #a88b4e55;position:sticky;top:0;z-index:3;backdrop-filter:blur(10px)}
#base .ttl small,#ranks .ttl small{color:#b6c9d9}
#base .topbar .pill,#ranks .topbar .pill{min-height:44px;background:#172e43;border:1px solid #a78e58;color:#fff}
#base .shopwrap,#ranks .shopwrap{padding:14px 14px 24px;gap:14px}
.hub-hero{position:relative;overflow:hidden;min-height:150px;border:1px solid #b59b625e;border-radius:22px;background:linear-gradient(125deg,#203f50,#13283e);padding:22px 18px;box-sizing:border-box;box-shadow:inset 0 1px 0 #fff1,0 10px 24px #020b172e}
.hub-hero::after{content:"";position:absolute;width:210px;height:210px;right:-80px;top:-80px;border:1px solid #e5bf6626;border-radius:50%;box-shadow:0 0 0 24px #e5bf6608,0 0 0 48px #e5bf6605;pointer-events:none}
.hub-eyebrow{color:#e3c88e;font:900 10px var(--body);letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:8px}
.hub-hero h2{font:400 29px/1.05 var(--display);margin:0 0 8px;color:#fff5dd}
.hub-hero p{font:700 12px/1.6 var(--body);color:#bcd0de;margin:0;max-width:58%;position:relative;z-index:1}
.hub-emblem{width:72px;height:72px;display:block;color:#edc976;filter:drop-shadow(0 6px 0 #06132655)}
.hub-hero>.hub-emblem{position:absolute;right:22px;top:28px;width:82px;height:82px;transform:rotate(6deg)}
.town-art{display:block;background-image:url('/3d/art/town-buildings-v53.webp');background-size:700% 100%;background-repeat:no-repeat;aspect-ratio:8/7;width:108px;flex:none}
.hub-diorama{position:absolute;right:-14px;bottom:-5px;width:196px;height:134px}
.hub-diorama .town-art{position:absolute;width:116px;bottom:0;filter:drop-shadow(0 9px 7px #020b1766)}
.hub-diorama .town-art:nth-child(1){left:0;bottom:0;transform:rotate(-5deg)}
.hub-diorama .town-art:nth-child(2){right:0;bottom:8px;width:127px}
#baseSum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#baseSum>div{padding:14px 4px;background:linear-gradient(#1b3449,#13283d);border:1px solid #55708270;border-radius:16px;text-align:center;min-width:0}
#baseSum b{display:block;font:400 25px/1.2 var(--display);color:#f0ce83}
#baseSum span{display:block;font:800 10px/1.5 var(--body);color:#b8ccda}
#base #collectAll{min-height:48px;border:1px solid #ffe2a0;background:linear-gradient(#ffe4a0,#d5a34c);color:#17273c;box-shadow:0 3px 0 #826032;border-radius:13px;font:900 16px var(--body)}
#baseList{gap:14px!important}
#base .bcard{border:1px solid #5874826b;border-radius:20px;padding:16px;background:linear-gradient(145deg,#1b3448,#11253a);box-shadow:0 5px 15px #0002;position:relative;overflow:hidden}
#base .bcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--bc)}
#base .shop-art,#gauntCard .shop-art{display:block;flex:none;background-image:url('/3d/art/shop-icons-v46.webp');background-size:500% 400%;background-repeat:no-repeat;aspect-ratio:1;filter:drop-shadow(0 4px 3px #0003);clip-path:inset(3%)}
#base .shop-art-1,#gauntCard .shop-art-1{clip-path:inset(34% 0 0 0)}
.town-island-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.town-island-head .shop-art{width:50px;height:50px;flex:none}
#base .binfo h3{font:400 23px/1.1 var(--display);margin:0 0 6px;color:#fff2db}
.town-state{color:#d7c799;font:900 10px var(--body);letter-spacing:.1em;text-transform:uppercase}
#base .binfo p{font:700 12px/1.6 var(--body);color:#bacbd7;margin:0 0 12px}
#base .bbar{height:24px;border:1px solid #3f5d73;background:#091c2d;border-radius:8px;overflow:hidden;position:relative}
#base .bbar i{background:linear-gradient(90deg,#287c76,#7bc7a4);border-radius:7px}
#base .bbar span{color:#fff;font:900 11px var(--body);text-shadow:0 1px 2px #001a23}
#base .plots{gap:10px!important}
#base .plot{border:1px solid #38586e!important;background:#0b1e31!important;border-radius:15px!important;padding:12px!important;min-width:0}
#base .plot-empty{border-style:dashed!important;background:#102b3b!important}
.town-plot-head{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.town-plot-head .town-art{width:76px;margin:-4px -5px -5px -10px}
.town-plot-head>div{flex:1;min-width:0}
.town-plot-head b{font:900 14px var(--body);display:block;color:#f3e7cc}
.town-plot-head small{display:block;font:800 10px/1.6 var(--body);color:#b3c7d7}
#base .bbtns{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:10px}
#base button.small,#base button.buy{min-height:44px;min-width:0;border-radius:10px;font:900 12px var(--body);padding:9px 10px}
#base button.small{background:#203b52;border:1px solid #6e8d9d;color:#f3f5f8;box-shadow:none}
#base button.buy{background:linear-gradient(#f9dd96,#d7aa53);border:1px solid #f1dca4;color:#142c40;box-shadow:0 2px 0 #6c572c}
#base button:disabled{opacity:.42;box-shadow:none}
.town-empty-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#bdd2dc;font:900 12px var(--body)}
.town-catalog{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.town-offer{border:1px solid #365872;background:linear-gradient(145deg,#1b394d,#14293d);padding:9px;border-radius:13px;display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:5px;align-items:center}
.town-offer .town-art{width:89px;margin-left:-7px;grid-row:1/3}
.town-offer h4{font:900 14px var(--body);margin:0 0 4px;color:#fce9bd}
.town-offer p{font:700 11px/1.5 var(--body);color:#b1c9d8;margin:0}
.town-offer .town-rate{color:#8dd7bc;font:900 11px var(--body);display:block;margin:5px 0 8px}
#base .town-offer .buy{grid-column:2;justify-self:start;min-width:110px}
.hub-note{border:1px solid #47617455;border-radius:14px;padding:13px;background:#11253a;color:#a9c1d3!important;font:700 11px/1.6 var(--body)!important}
#ranks .rtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;padding:0}
#ranks .rtab{border:1px solid #5b778859;background:#183247;border-radius:10px;min-height:44px;padding:8px 3px;color:#bdcedc;font:900 11px var(--body);white-space:normal}
#ranks .rtab.on{background:linear-gradient(#f6da92,#cfa556);border-color:#f4dba0;color:#172a3b;box-shadow:0 2px 0 #6c5631}
.rboard-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #46617066;padding:3px 0 12px;gap:10px}
.rboard-heading h2{font:400 23px var(--display);margin:0;color:#f6e8c9}
.rboard-heading small{font:800 10px var(--body);color:#a2bdcc;text-transform:uppercase;letter-spacing:.1em}
#ranks .rlist{gap:8px}
#ranks .rrow{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;border-radius:14px;padding:13px 11px;border:1px solid #58718255;background:linear-gradient(110deg,#20384d,#14283c);box-shadow:0 3px 8px #0001}
#ranks .rrow b{height:36px;width:36px;display:grid;place-items:center;border-radius:12px;background:#263f55;color:#d7e3eb;font:900 17px var(--body);border:1px solid #6b81915c}
#ranks .rrow:nth-child(1){border-color:#c8a9577a;background:linear-gradient(110deg,#4d442e,#1d3041 70%)}
#ranks .rrow:nth-child(1) b{background:linear-gradient(#ffe49c,#b58634);color:#493215;border-color:#ffe5a0}
#ranks .rrow:nth-child(2) b{background:linear-gradient(#e3edf3,#8ca2b7);color:#21384b}
#ranks .rrow:nth-child(3) b{background:linear-gradient(#efc49d,#a96a42);color:#432d25}
#ranks .rrow .rperson{display:flex;flex-direction:column;gap:4px;min-width:0}
.rperson strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 13px var(--body)}
.rperson small{font:900 9px var(--body);letter-spacing:.1em;color:#9cb5c8}
#ranks .rrow em{color:#f2d49b;font:900 13px var(--body);white-space:nowrap}
#ranks .rrow.me{box-shadow:inset 3px 0 #76d5bd;background:linear-gradient(110deg,#164c4c,#15313f);border-color:#6fb8a17a}
#ranks .rme:empty{display:none}
#ranks .rme{padding:14px;border:1px solid #78bca188;background:linear-gradient(110deg,#19453f,#142d41);border-radius:14px;font:800 12px/1.5 var(--body);color:#d7ede5}
#ranks .rme .big{min-height:44px;background:linear-gradient(#f7de9a,#cfa34b);border:1px solid #efd79a;border-radius:10px;color:#172b3e;font:900 13px var(--body);width:100%;box-shadow:none}
#ranks .rnote{margin:0;padding:28px 22px;border:1px dashed #62819388;background:#122c40;border-radius:18px;font:800 13px/1.7 var(--body);color:#aec7d8}
#ranks .rnote::before{content:"◇";display:block;color:#d8b775;font-size:32px;line-height:1.5}
#gauntCard{background:#030e20c9;backdrop-filter:blur(7px);overflow-y:auto}
#gauntCard .card{background:radial-gradient(ellipse at 50% 0,#3c3460,#13253b 65%);border:1px solid #c6a86888;border-radius:25px;padding:24px 18px 18px;max-height:calc(100dvh - 36px);overflow:auto;box-sizing:border-box;box-shadow:0 20px 70px #0008;text-align:center}
.gaunt-crown{width:88px;height:88px;border-radius:24px;background:linear-gradient(140deg,#d5b05b22,#271d4944);border:1px solid #e5c98250;margin:0 auto 14px;display:grid;place-items:center;transform:rotate(-6deg)}
.gaunt-crown .hub-emblem{width:64px;height:64px;transform:rotate(6deg)}
#gauntCard h3{font:400 32px/1.1 var(--display)!important;color:#fff0cb;margin:4px 0 12px}
#gauntCard .sub{color:#b9cddd;font:700 12px/1.65 var(--body);margin:0 0 15px}
.gaunt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:15px}
.gaunt-stats>div{background:#0b1d30aa;border:1px solid #8f79994a;border-radius:12px;padding:12px 3px}
.gaunt-stats b{display:block;color:#efd19a;font:900 19px var(--body)}
.gaunt-stats small{font:800 9px var(--body);color:#a9bfd1;display:block;margin-top:5px}
.gaunt-progress{background:#0a1a2e;border:1px solid #586d8055;border-radius:12px;padding:10px;margin-bottom:16px}
.gaunt-progress span{display:block;font:900 11px var(--body);color:#dccea9;margin-bottom:8px}
.gaunt-progress>i{display:block;height:6px;background:#293a50;border-radius:10px;overflow:hidden}
.gaunt-progress em{display:block;height:100%;background:linear-gradient(90deg,#ab8fe0,#e7ca81);border-radius:10px}
.gaunt-trials{display:flex;justify-content:space-between;gap:5px;margin:0 0 18px}
.gaunt-trials>div{flex:1;min-width:0;border:1px solid #5a769055;border-radius:12px;background:#162d43;padding:8px 1px}
.gaunt-trials .shop-art{display:block;width:40px;height:40px;margin:0 auto 4px}
.gaunt-trials small{font:900 9px var(--body);color:#b7cfde;display:block}
#gauntCard .btns{display:grid;grid-template-columns:1.5fr 1fr;gap:8px}
#gauntCard .btns:has(#gcGo[hidden]){grid-template-columns:1fr}
#gauntCard .big,#gauntCard .small{min-height:46px;padding:10px 4px;border-radius:12px;font:900 14px var(--body)}
#gauntCard .big{background:linear-gradient(#ffe6a5,#d8ac58);border:1px solid #ffe6a4;color:#233047;box-shadow:0 3px 0 #806230}
#gauntCard .small{background:#233b52;border:1px solid #7390a1;color:#e3edf3;box-shadow:none}
#base button:focus-visible,#ranks button:focus-visible,#gauntCard button:focus-visible{outline:3px solid #ffe4a4;outline-offset:3px}
@media(max-width:350px){#base>.topbar,#ranks>.topbar{padding:8px;gap:5px}#base .ttl b,#ranks .ttl b{font-size:19px}#base .ttl small,#ranks .ttl small{font-size:9px}#base .coins{font-size:14px;padding:7px 8px}#ranks>.topbar>span{width:40px!important}#base .shopwrap,#ranks .shopwrap{padding:12px 10px 22px}.hub-hero{padding:19px 14px;min-height:142px}.hub-hero h2{font-size:26px}.hub-hero p{font-size:11px;max-width:56%}.hub-diorama{width:166px;right:-20px}.hub-diorama .town-art{width:105px}.hub-diorama .town-art:nth-child(2){width:115px}.hub-hero>.hub-emblem{right:15px;width:70px;height:70px}#base .bcard{padding:13px}#base .plot{padding:10px!important}#ranks .rrow{gap:7px;padding:12px 8px}#ranks .rrow em{font-size:11px}.rperson strong{font-size:12px}#gauntCard{padding:10px}#gauntCard .card{padding:18px 12px 13px}.gaunt-crown{width:68px;height:68px;margin-bottom:10px}.gaunt-crown .hub-emblem{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){#base *,#ranks *,#gauntCard *{scroll-behavior:auto}}