:root { --shop-navy:#132e3d; --shop-cream:#edf4f1; --shop-gold:#f5bd4c; }
[hidden] { display:none !important; }
.shop-top { background:var(--deep); }
.shop-top a,.shop-top .brand { color:var(--shop-cream); }
main.shop-page { padding-top:0; padding-bottom:70px; min-height:70vh; }
.shop-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 calc(50% - 50vw) 25px; padding:45px max(24px,calc((100vw - 1200px)/2)) 18px; min-height:325px; background:#d5ede6; border-bottom:2px solid var(--ink); overflow:hidden; }
.shop-title>div:first-child { position:relative; z-index:1; max-width:610px; }
.shop-title h1 { font-size:clamp(3.1rem,6vw,6rem); max-width:10ch; }
.shop-title p { max-width:48ch; font-size:1.12rem; }
.shop-title-art { display:flex; align-items:center; justify-content:center; width:340px; min-width:250px; height:280px; background:#e9d994; border:2px solid var(--ink); transform:rotate(3deg); }
.shop-title-art img { width:48%; height:235px; object-fit:contain; filter:drop-shadow(5px 8px 3px #173e4566); }
.shop-title-art img:first-child { transform:rotate(-12deg) translateX(14px); }
.shop-title-art img:last-child { transform:rotate(10deg) translateX(-14px); }
.shop-title h1 { margin:4px 0; }
.shop-title p { margin:0; }
.shop-balances { display:flex; flex-wrap:wrap; gap:8px; z-index:3; margin-top:18px; }
.shop-balances span { padding:10px 14px; border-radius:12px; background:var(--shop-navy); color:var(--shop-cream); border:2px solid var(--shop-gold); white-space:nowrap; }
.shop-balances b { color:var(--shop-gold); font-size:1.2rem; }
.shop-intro { margin:16px 0 10px; padding:14px 18px; border:1px solid var(--line); color:var(--shop-navy); }
.shop-intro p { margin:0; line-height:1.5; }
.shop-guide-control { display:flex; justify-content:flex-end; margin-top:10px; }
.shop-guide-control .button { padding:6px 12px; font-size:.8rem; }
.shop-status { padding:10px 14px; background:#fff0c5; border:1px solid #d7bc76; border-radius:6px; color:var(--shop-navy); min-height:40px; }
.shop-auth { margin:12px 0; }
.shop-auth .form-row { margin:6px 0 12px; }
.shop-account { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; }
.shop-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 15px; }
.shop-tabs button { border:2px solid var(--shop-navy); background:var(--white); color:var(--shop-navy); padding:11px 18px; border-radius:6px; font:inherit; font-weight:800; cursor:pointer; }
.shop-tabs button.active { background:var(--shop-navy); color:var(--shop-gold); }
.shop-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; align-items:start; }
.shop-filters { position:static; min-width:0; padding:18px; }
.shop-filters h2 { margin:0 0 14px; font-size:1.2rem; }
.shop-filters label { display:block; min-width:0; margin:11px 0; font-weight:700; color:var(--shop-navy); }
.shop-filters select,.shop-filters input[type=number],.shop-result-bar select { display:block; width:100%; box-sizing:border-box; margin-top:5px; padding:9px; border:1px solid #9bacbd; border-radius:8px; background:white; color:var(--shop-navy); font:inherit; }
.shop-filters select,.shop-filters input[type=number] { min-width:0; max-width:100%; }
.shop-filters label.checkbox { display:flex; align-items:center; gap:8px; line-height:1.3; }
.shop-filters input[type=checkbox] { flex:0 0 18px; width:18px; height:18px; min-width:18px; margin:0; padding:0; }
.shop-price { display:flex; gap:8px; min-width:0; }
.shop-price label { flex:1; min-width:0; font-size:.85rem; }
.shop-price input[type=number] { min-width:0; max-width:100%; }
.shop-result-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; color:var(--shop-navy); font-weight:800; }
.shop-result-bar>div { display:flex; align-items:center; gap:10px; }
.shop-result-bar label { display:flex; align-items:center; gap:8px; }
.shop-result-bar select { min-width:125px; }
#filter-toggle { display:none; }
.shop-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.shop-product { display:flex; flex-direction:column; min-height:420px; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--white); box-shadow:0 5px 0 #d8e4dc; }
.shop-product.rarity-rare { border:2px solid #60afe5; }
.shop-product.rarity-epic { border:2px solid #8a5ad5; }
.shop-product.rarity-legendary { border:2px solid #d5a72c; }
.shop-product-art { height:265px; display:flex; justify-content:center; align-items:center; padding:9px; background:#e3eee8; overflow:hidden; }
.shop-product-art>img { width:100%; height:100%; object-fit:contain; }
.pack-front { position:relative; display:block; height:100%; width:min(100%,150px); overflow:hidden; }
.pack-front img { position:absolute; left:0; top:0; width:200%; height:100%; max-width:none; object-fit:fill; }
.shop-product-info { display:flex; flex:1; flex-direction:column; padding:12px; gap:4px; }
.shop-product-info h3 { margin:0; font-size:1rem; color:var(--shop-navy); }
.shop-product-info p { margin:0; font-size:.82rem; }
.shop-product-info strong { font-size:1.2rem; color:var(--shop-navy); margin-top:auto; }
.shop-product-info .button { display:flex; width:100%; text-align:center; box-sizing:border-box; margin-top:8px; background:var(--shop-gold); color:var(--shop-navy); }
.pack-preview .shop-product-info strong { margin-top:auto; }
.pack-preview .shop-product-info p:last-child { margin-top:2px; }
.owned-indicator { color:#596b7d; font-size:.82rem; }
.shop-dialog { width:min(92vw,520px); max-height:88vh; border:2px solid var(--shop-gold); border-radius:18px; padding:22px; color:var(--shop-navy); background:var(--shop-cream); box-shadow:0 30px 80px #0006; }
.shop-dialog::backdrop { background:#06172ac9; }
.shop-dialog h2 { margin:0 0 10px; }
.detail-feedback { padding:10px 12px; border:1px solid currentColor; border-radius:6px; line-height:1.4; }
.shop-dialog input[type=number] { display:block; width:100%; box-sizing:border-box; padding:10px; margin-top:6px; border:1px solid #9bacbd; border-radius:8px; background:white; color:var(--shop-navy); font:inherit; }
.shop-dialog-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }
.shop-dialog-actions button[disabled],.shop-product button[disabled] { opacity:.55; cursor:not-allowed; }
.detail-art { display:flex; justify-content:center; height:min(48vh,360px); margin:12px 0; }
.detail-art>img { max-height:100%; max-width:100%; object-fit:contain; }
.detail-art .pack-front { width:200px; }
.album-grid,.workshop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.album-filter { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--shop-navy); }
.album-filter select { min-width:160px; padding:8px; border:1px solid #9bacbd; border-radius:8px; background:#fff; color:var(--shop-navy); font:inherit; }
.album-card,.craft-card { display:flex; gap:12px; padding:10px; min-width:0; }
.album-card>img,.craft-card>img { width:95px; height:135px; object-fit:contain; flex:none; }
.album-card.missing-card>img { filter:grayscale(1); opacity:.52; }
.album-card>div,.craft-card>div { min-width:0; flex:1; }
.album-card h3,.craft-card h3 { margin:0 0 4px; }
.album-card p,.craft-card p { margin:0 0 8px; }
.copy-row { display:flex; align-items:center; flex-wrap:wrap; gap:5px; border-top:1px solid #d9dfec; padding:4px 0; font-size:.77rem; }
.copy-row span { flex:1; }
.copy-row button { border:1px solid #c8d3dd; background:white; border-radius:6px; cursor:pointer; }
.copy-row button[disabled] { opacity:.35; cursor:not-allowed; }
.craft-card strong { display:block; margin-bottom:8px; }
.recycle-list { max-height:30vh; overflow:auto; line-height:1.7; font-size:.85rem; }
.shop-reveal { text-align:center; }
.reveal-header { display:flex; justify-content:space-between; align-items:center; }
.reveal-flip { position:relative; width:min(60vw,210px); height:310px; margin:12px auto; transform-style:preserve-3d; animation:reveal-flip .6s ease both; }
.reveal-flip img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; backface-visibility:hidden; }
.reveal-front { transform:rotateY(180deg); }
.reveal-flip.rarity-epic { filter:drop-shadow(0 0 16px #8b5ed8); }
.reveal-flip.rarity-legendary { filter:drop-shadow(0 0 19px #dfaa30); }
.reveal-flip.reduced { animation:none; transform:rotateY(180deg); }
@keyframes reveal-flip { from { transform:perspective(700px) rotateY(0); } to { transform:perspective(700px) rotateY(180deg); } }
.reveal-recap { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:45vh; overflow:auto; }
.reveal-recap>div { display:flex; flex-direction:column; font-size:.74rem; }
.reveal-recap img { height:120px; object-fit:contain; }
@media(min-width:1200px) { .shop-products { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:850px) { .shop-layout { grid-template-columns:1fr; } .shop-filters { display:none; position:static; } .shop-filters.open { display:block; } #filter-toggle { display:inline-block; } .shop-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .shop-title { display:block; margin:0 -16px 25px; padding:35px 16px 26px; } .shop-title-art { width:100%; height:200px; margin-top:26px; } .shop-title-art img { height:175px; } .shop-balances { position:static; padding:8px 0; } .shop-auth .form-row { flex-direction:column; align-items:stretch; } .shop-auth input { width:100%; flex:none; } .shop-product { min-height:365px; } .shop-product-art { height:205px; } .shop-product-info { padding:8px; } .shop-product-info h3 { font-size:.9rem; } .album-grid,.workshop-grid { grid-template-columns:1fr; } .shop-result-bar .button { padding:8px; } }
@media(prefers-reduced-motion:reduce) { .reveal-flip { animation:none; transform:rotateY(180deg); } }