.shop-layout{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:32px 0 56px}
.shop-layout [hidden]{display:none!important}
.shop-hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 10px}
.shop-hero p{color:var(--muted);line-height:1.7;margin:0;word-break:keep-all}
#shop-status{color:#a42c36;line-height:1.6;margin:12px 0 0}#shop-status:empty{display:none}
.wallet-card{margin:24px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 28px;background:linear-gradient(135deg,#17233b,#2b3d63);color:#fff;border-radius:24px;padding:26px 28px;box-shadow:0 10px 28px #17233b26}
.wallet-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.wallet-label{font-size:14px;color:#c8d3e8;display:flex;gap:10px;flex-wrap:wrap}.wallet-label b{color:#ffe27a;font-weight:750;overflow-wrap:anywhere}
.wallet-balance{font-size:44px;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}
.wallet-today{font-size:14px;color:#c8d3e8}.wallet-today b{color:#fff}
.wallet-attend{display:flex;flex-direction:column;gap:10px;min-width:0}
.wallet-attend button{min-height:52px;border:2px solid #17233b;border-radius:14px;background:linear-gradient(180deg,#ffe889,#ffd044);color:#17233b;font-weight:850;font-size:17px;box-shadow:0 4px 0 #0b1426}
.wallet-attend button:disabled{background:#3a4c74;color:#c8d3e8;border-color:#3a4c74;box-shadow:none;cursor:default}
.wallet-attend small{color:#c8d3e8;font-size:13px;line-height:1.5}
.streak{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:700}
.streak-dots{display:flex;gap:6px}.streak-dots i{width:22px;height:22px;border-radius:50%;background:#2f4166;display:grid;place-items:center;font-size:12px;font-style:normal}.streak-dots i.on{background:#b8ef64}.streak-dots i.bonus{outline:2px solid #ffe27a55}
.wallet-note{grid-column:1/-1;margin:0;padding-top:16px;border-top:1px solid #ffffff22;font-size:14px;line-height:1.6;color:#dbe3f2}.wallet-note a{color:#ffe27a;font-weight:700;white-space:nowrap}
.shop-filters{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin-bottom:8px;scrollbar-width:none}
.shop-filters button{flex:none;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #c9d2e0;background:#fff;color:#17233b;font-weight:700;font-size:14px}
.shop-filters button[aria-pressed="true"]{background:#17233b;color:#fff;border-color:#17233b}
.shop-section{margin:20px 0 32px}
.shop-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.shop-section-head h2{font-size:21px;margin:0 0 12px}.shop-section-head a{color:#2454df;font-size:14px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.soon-note{margin:0 0 12px;font-size:14px;color:var(--muted)}
.shop-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.shop-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 12px;align-items:center;background:#fff;border:1px solid #dce2ec;border-radius:18px;padding:14px}
.shop-item.owned{border-color:#9bc85a;background:#fbfff4}.shop-item.soon{opacity:.72}
.item-art{grid-row:1/3;width:56px;height:56px;border-radius:16px;background:#f1f4f9;display:grid;place-items:center;font-size:30px}
.item-text{display:flex;flex-direction:column;min-width:0}.item-text strong{font-size:16px;word-break:keep-all}.item-text small{font-size:12.5px;color:var(--muted)}
.item-price{font-weight:800;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}.item-price em{font-style:normal;color:#4a7f12;font-size:13px}
.shop-item button{grid-column:2/4;min-height:44px;border-radius:11px;border:1px solid #b7c2d4;background:#fff;color:#17233b;font-weight:750;font-size:15px}
.shop-item button.buy{background:#2454df;border-color:#2454df;color:#fff}
.shop-item button.is-on{background:#17233b;border-color:#17233b;color:#b8ef64}
.shop-item button:disabled{background:#eef1f6;border-color:#dce2ec;color:#7a869a;cursor:default}
.shop-how{margin-top:40px;background:#fff;border:1px solid #dce2ec;border-radius:20px;padding:24px 26px}
.shop-how h2{font-size:20px;margin:0 0 12px}.shop-how ul{list-style:none;margin:0;padding:0}
.shop-how li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #eef1f6;font-size:15px}.shop-how li em{font-style:normal;color:var(--muted);font-size:14px;text-align:right}
.shop-how p{font-size:14px;line-height:1.7;color:var(--muted);margin:14px 0 0}.shop-how .shop-fine{font-size:13px}
.shop-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 32px);background:#17233b;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:0 8px 24px #17233b40;z-index:10}
@media(max-width:700px){.shop-layout{width:calc(100% - 32px);padding-top:24px}.wallet-card{grid-template-columns:minmax(0,1fr);padding:22px 20px}.wallet-balance{font-size:38px}.shop-how{padding:20px 18px}.shop-how li{grid-template-columns:28px minmax(0,1fr)}.shop-how li em{grid-column:2;text-align:left}}
@media(max-width:360px){.streak{flex-direction:column;align-items:flex-start}.streak-dots i{width:20px;height:20px}}
.coin{display:inline-block;width:1em;height:1em;margin-right:.3em;vertical-align:-.12em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c2 0 18%,#ffd34d 19% 62%,#e8a90c 63%);box-shadow:inset 0 0 0 .08em #c98a00}
.coin-lg{width:.85em;height:.85em;vertical-align:-.06em}
.shop-hero h1{display:flex;align-items:center;gap:.1em}
.keep-nudge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 16px;align-items:center;margin:-8px 0 24px;padding:16px 18px;border:2px solid #ffd044;background:#fff8dc;border-radius:18px}
.keep-icon{font-size:26px}.keep-nudge strong{font-size:16px}.keep-nudge p{margin:4px 0 0;font-size:14px;line-height:1.6;color:#4b5568;word-break:keep-all}
.keep-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border-radius:12px;background:#17233b;color:#ffe27a;font-weight:800;white-space:nowrap}
.bought-dialog{width:min(420px,calc(100% - 32px));border:0;border-radius:22px;padding:24px;color:#17233b;box-shadow:0 18px 50px #17233b40}
.bought-dialog::backdrop{background:#17233b80}.bought-dialog h2{margin:0 0 8px;font-size:21px}.bought-dialog p{margin:0;line-height:1.7;color:#4b5568;word-break:keep-all}
.bought-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.bought-actions .keep-cta{flex:1}.bought-actions button{min-height:46px;padding:10px 18px;border-radius:12px;border:1px solid #b7c2d4;background:#fff;color:#17233b;font-weight:700}
@media(max-width:560px){.keep-nudge{grid-template-columns:auto minmax(0,1fr)}.keep-nudge .keep-cta{grid-column:1/-1}}
.return-hint{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px}.return-hint li{font-size:13px;line-height:1.5;color:#ffe9a8}.return-hint li:before{content:'› ';color:#b8ef64}
.shop-item.starter{position:relative;border-color:#ffd044;box-shadow:0 0 0 2px #ffd04455}
.starter-tag{position:absolute;top:-10px;right:12px;background:#ffd044;color:#17233b;font-style:normal;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:999px}
.shop-filters{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:28px}
.item-text strong:lang(ja){line-break:strict;font-size:15px}
@media(max-width:380px){.shop-item{grid-template-columns:48px minmax(0,1fr)}.item-art{width:48px;height:48px}.item-price{grid-column:2;justify-self:start}}
.avatar-card{margin:24px 0 0;background:#fff;border:2px solid #17233b;border-radius:24px;padding:20px 22px;box-shadow:0 5px 0 #17233b;scroll-margin-top:16px}
.avatar-card-inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.avatar-art svg{display:block;border-radius:22px}
.avatar-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.avatar-name{font-size:14px;color:var(--muted)}.avatar-name em{font-style:normal;color:#2454df;font-weight:700}
.avatar-info strong{font-size:22px;letter-spacing:-.4px;word-break:keep-all}.avatar-lv{background:#17233b;color:#ffe27a;border-radius:8px;padding:2px 8px;font-size:16px;margin-right:4px}
.avatar-bar{height:12px;border-radius:99px;background:#e6eaf2;overflow:hidden}.avatar-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd044,#ff8a3d);border-radius:inherit}
.avatar-info small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.avatar-info p{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--muted);word-break:keep-all}
.shop-item button.item-art.try{grid-column:1;grid-row:1/3;min-height:0;border-radius:16px;border:2px dashed #b9c4d8;background:#f1f4f9;cursor:pointer;padding:0;font-weight:400;font-size:30px;color:inherit}.shop-item button.item-art.try[aria-pressed=true]{border:2px solid #2454df;background:#e3e9f9}
@media(max-width:420px){.avatar-card{padding:16px}.avatar-card-inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.avatar-info{width:100%}}
@media(max-width:380px){.shop-item button.item-art.try{width:48px;height:48px}}
.use-game{font-size:15px;margin:16px 0 8px;color:#36445d}
.use-item .item-text small{white-space:normal}
.item-have{display:block;font-style:normal;font-size:12px;color:#4a7f12;font-weight:700}
.pack-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.shop-item .pack-row button.pack{grid-column:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;font-size:13px;line-height:1.2}
.pack small{font-size:11.5px;font-weight:600;opacity:.9}