/* Illustrated upgrade shop. All rules are scoped to leave other menus alone. */
#shop.screen{background:radial-gradient(ellipse at 45% 0%,#173963 0%,#0b2044 55%,#081a37 100%)}
#shop .topbar{background:#0b2044;border-bottom:0;gap:8px;padding-bottom:12px}
#shop .topbar .ttl b{font-size:25px;letter-spacing:.1px}
#shop .topbar .ttl small{font-size:10px;letter-spacing:0;text-transform:none;color:#a7c8f5;margin-top:6px}
#shop .coins{background:linear-gradient(#173966,#0d2850);border-color:#365f90;padding:8px;box-shadow:inset 0 2px 2px #ffffff12}
#shopTabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:5px 12px 14px;max-width:720px;margin:0 auto}
#shopTabs button{min-width:0;min-height:72px;border:1px solid #355c8e;border-radius:16px;padding:4px 0 7px;background:linear-gradient(145deg,#224778,#102d56);box-shadow:inset 0 2px 2px #ffffff14,0 4px 0 #07162d;color:#bdd7fa;display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-size:14px;gap:1px}
#shopTabs button[aria-pressed="true"]{background:linear-gradient(145deg,var(--shop-accent),var(--shop-dark));border-color:#ffffff70;color:white;box-shadow:inset 0 2px 2px #ffffff35,0 4px 0 #07162d;transform:translateY(-2px)}
#shop .shop-art{display:block;flex:none;background-image:url('./art/shop-icons-v46.webp');background-size:500% 400%;background-repeat:no-repeat;aspect-ratio:1;width:100%;filter:drop-shadow(0 4px 3px #0003)}
#shopTabs .shop-art{width:40px;height:40px}
#shop .shop-art{clip-path:inset(3%)}
#shop .shop-art-1{clip-path:inset(34% 0 0 0)}
#shop .shop-art-2{clip-path:inset(3% 0 0 8%)}
#shop .shop-art-11{clip-path:inset(3% 3% 12% 3%)}
#shop #shopList{padding:4px 12px 24px;gap:18px;box-sizing:border-box}
#shop .shopsec{min-width:0}
#shop .shop-hero{position:relative;min-height:108px;overflow:hidden;border:1px solid #48709a;border-radius:20px;background:radial-gradient(ellipse at 90% 20%,#70cbdc70,transparent 70%),linear-gradient(120deg,#17324c,#274965);padding:16px;margin-bottom:14px;display:flex;align-items:center;box-shadow:inset 0 2px 1px #ffffff12,0 5px 12px #0002}
#shop .shop-hero::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;border:24px solid #ffffff06;right:-25px;top:-35px;pointer-events:none}
#shop .shop-hero>div{position:relative;z-index:1;width:65%}
#shop .shop-hero h2{font-size:34px;line-height:1;margin:0 0 8px;text-shadow:0 3px 0 #0004;color:white;display:block}
#shop .shop-hero p{font-size:12px;line-height:1.4;margin:0;color:#e4efff;font-weight:900;max-width:210px}
#shop .shop-hero .shop-art{width:132px;position:absolute;right:0;bottom:-3px;z-index:0}
#shop .upgrade-card{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:7px 12px;border:1px solid #375d8f;border-radius:20px;background:radial-gradient(ellipse at 0 0,#2b5488,#163661 65%,#112b50);padding:14px 12px;margin-bottom:10px;box-shadow:inset 0 2px 2px #ffffff12,0 4px 8px #0002;min-height:135px;box-sizing:border-box;align-items:center}
#shop .upgrade-art{grid-row:1 / 3;align-self:center}
#shop .upgrade-copy{min-width:0}
#shop .upgrade-copy h3{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.05;margin:0 0 5px;color:#fff;text-shadow:0 2px 0 #0002}
#shop .upgrade-level{color:#a9cffc;font-size:11px;font-weight:900;display:block;margin-bottom:5px}
#shop .upgrade-copy p{font-size:12px;line-height:1.4;margin:0;color:#c6ddfc;font-weight:800}
#shop .upgrade-bottom{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
#shop .pips{gap:3px;max-width:88px;flex:1;min-width:48px}
#shop .pips b{width:7px;height:7px;border-radius:50%;background:#54739c80}
#shop .pips b.on{background:var(--shop-accent,#ff7955);box-shadow:inset 0 1px 1px #ffffff55}
#shop .upgrade-card .buy{min-width:82px;min-height:44px;padding:8px 10px;border-radius:13px;font-family:var(--display);font-size:21px;background:linear-gradient(#ffe47c,#ffcb3d 50%,#ffb923);box-shadow:inset 0 2px 0 #fff5,0 4px 0 #b47a08;color:#122143}
#shop .upgrade-card .buy:disabled{background:linear-gradient(#294c78,#203b62);box-shadow:inset 0 1px 0 #ffffff12,0 3px 0 #0b2343;color:#a9bfdc;cursor:default;font-size:17px}
#shop .upgrade-card .buy:focus-visible{outline-offset:5px}
#shop .upgrade-short{display:block;font-size:10px;line-height:1.2;margin-top:3px;font-family:var(--body);font-weight:800}
#shop .upgrade-card .buy>span:not(.coin){text-align:center}
#shop .shop-recommend{display:inline-block;font-size:9px;color:#fff;background:#c04b32;border:1px solid #ff9b75;border-radius:6px;padding:3px 5px;margin-bottom:6px;font-weight:900}
#shop .shop-footnote{font-size:12px;color:#a8c5eb;text-align:center;line-height:1.5;margin:3px 0 0;padding:0 18px}
#shopNotice{position:absolute;left:16px;right:16px;bottom:18px;z-index:4;margin:0;padding:12px 16px;border-radius:14px;background:#102a4f;border:1px solid #ffd65b;box-shadow:0 5px 20px #0006;font-size:13px;font-weight:900;text-align:center;pointer-events:none}
#shopNotice:empty{display:none}
@media(max-width:360px){#shop .topbar .ttl b{font-size:20px}#shop .topbar .ttl small{font-size:9px}#shop .topbar .pill{padding:8px}#shop .coins{padding:6px;gap:4px;font-size:12px}#shopTabs{gap:4px;padding-inline:8px}#shopTabs button{font-size:12px}#shop .upgrade-card{grid-template-columns:68px minmax(0,1fr);gap:6px 9px}#shop .upgrade-copy h3{font-size:21px}#shop .shop-hero h2{font-size:30px}}
@media(min-width:520px){#shop .upgrade-card{grid-template-columns:112px minmax(0,1fr);padding:16px;gap:10px 18px}#shop .upgrade-copy h3{font-size:28px}#shop .upgrade-copy p{font-size:14px}#shop .upgrade-level{font-size:13px}#shop .shop-hero{min-height:130px}#shop .shop-hero .shop-art{width:170px}#shopTabs button{font-size:16px}#shopTabs .shop-art{width:48px;height:48px}}