/* Clan packs are sealed wooden cases with fanned cards and parchment labels.
   This display is scoped to the shop; card art and purchasing rules stay shared. */
.clan-shop-page .shop-odds{
 display:flex;align-items:center;flex-wrap:wrap;gap:10px 13px;margin:22px 0 24px;padding:15px 17px;
 border:1px solid #b4996166;border-radius:5px;
 background:linear-gradient(115deg,#1d332bea,#28372be6);box-shadow:inset 0 1px #e1c59022,0 3px 10px #06191038;
}
.clan-shop-page .shop-odds-title{margin-right:auto;color:#d6c39b;font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.5px}
.clan-shop-page .shop-rarity{
 --rarity-gem:#6bd481;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 9px;
 border:1px solid #b89d6657;border-radius:4px;background:#0c211749;color:#eee2c0;font-size:12px;line-height:1.2;
}
.clan-shop-page .shop-rarity.rarity-R{--rarity-gem:#54bbff}
.clan-shop-page .shop-rarity.rarity-E{--rarity-gem:#bc76e8}
.clan-shop-page .shop-rarity.rarity-L{--rarity-gem:#ff9e20}
.clan-shop-page .shop-rarity .rarity-gem{
 display:block;flex:none;width:12px;height:12px;margin:0 2px;border:1px solid #f2dda5;border-radius:2px;transform:rotate(45deg);
 background:radial-gradient(circle at 25% 25%,#fff9e5,var(--rarity-gem) 40%,color-mix(in srgb,var(--rarity-gem) 48%,#10251b));box-shadow:0 2px 4px #02170d88;
}
.clan-shop-page .shop-rarity strong{color:#f2d191;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}
.clan-shop-page .shop-pack-grid.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.clan-shop-page .shop-pack.clan-pack{
 --pack-brass:#cbb581;--pack-wood-light:color-mix(in srgb,var(--clan,#8f7751) 70%,#ecd5a8);
 --pack-wood:color-mix(in srgb,var(--clan,#8f7751) 68%,#233629);--pack-wood-dark:color-mix(in srgb,var(--clan,#8f7751) 40%,#172c23);
 display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;overflow:hidden;
 border:4px ridge #baa273;border-radius:8px;background:var(--antique-parchment,linear-gradient(110deg,#e8d9b5,#f1e5c5));
 box-shadow:0 8px 22px #07171366,inset 0 0 0 1px #faf1d360;color:#453722;
}
.clan-shop-page .shop-pack.clan-pack::before{display:none;content:none}
.clan-shop-page .shop-pack-art{
 position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex:none;height:236px;overflow:hidden;
 border-bottom:3px ridge #ad935d;
 background:radial-gradient(ellipse at 50% 47%,color-mix(in srgb,var(--clan,#937949) 26%,transparent),transparent 65%),repeating-linear-gradient(8deg,#cfb57507 0 1px,transparent 1px 5px),linear-gradient(135deg,#25352a,#10241f 68%,#29392a);
}
.clan-shop-page .shop-pack-art::before{
 content:"";position:absolute;z-index:-1;left:14px;right:14px;top:13px;bottom:13px;border:1px solid #d4bc7a20;border-radius:4px;
 box-shadow:inset 0 0 30px #00141040;pointer-events:none;
}
.clan-shop-page .shop-pack-art::after{
 content:"";position:absolute;z-index:-1;left:50%;bottom:13px;width:220px;height:25px;transform:translateX(-50%);
 border-radius:50%;background:#07100ce0;filter:blur(9px);pointer-events:none;
}
.clan-shop-page .pack-card-back{
 position:absolute;z-index:0;left:calc(50% - 65px);top:30px;display:block;width:130px;height:181px;border:1px solid #c1a46d;border-radius:9px;
 background:url('./assets/ui/card-back.svg') center/100% 100% no-repeat,#493922;box-shadow:0 6px 13px #0008;
}
.clan-shop-page .pack-card-back-left{transform:translateX(-39px) rotate(-13deg)}
.clan-shop-page .pack-card-back-right{transform:translateX(39px) rotate(13deg)}
.clan-shop-page .clan-pack-body{
 position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
 width:166px;height:186px;padding:17px 12px;border:3px solid var(--pack-brass);border-radius:11px;
 background:url('./assets/ui/card-wood-grain.svg?v=2') center/100% 100% no-repeat,radial-gradient(ellipse at 20% 0,#fff4ca40,transparent 60%),linear-gradient(130deg,var(--pack-wood-light),var(--pack-wood) 56%,var(--pack-wood-dark));
 box-shadow:0 10px 20px #0009,inset 0 0 0 2px #102720,inset 0 0 0 4px #e8d59a69,inset 0 0 16px #0b241973;
 transition:transform .18s,box-shadow .18s;
}
.clan-shop-page .clan-pack-body::before{
 content:"";position:absolute;inset:9px;border:1px solid #e5d09554;border-radius:4px;pointer-events:none;
 background:linear-gradient(90deg,transparent 49%,#b0945c24 49% 51%,transparent 51%);
}
.clan-shop-page .pack-corner{position:absolute;z-index:2;width:17px;height:17px;border:2px solid #e7cf91;pointer-events:none;opacity:.86}
.clan-shop-page .pack-corner.top-left{top:7px;left:7px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.clan-shop-page .pack-corner.top-right{top:7px;right:7px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.clan-shop-page .pack-corner.bottom-left{bottom:7px;left:7px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.clan-shop-page .pack-corner.bottom-right{bottom:7px;right:7px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.clan-shop-page .pack-front-label{order:0;position:relative;color:#fff0c7;font-size:9px;line-height:1.3;font-weight:700;letter-spacing:1.8px;text-shadow:0 1px 3px #10261b}
.clan-shop-page .clan-pack-seal{
 order:1;position:relative;display:grid;place-items:center;flex:none;width:84px;height:84px;border:3px solid #ddc38e;border-radius:50%;
 background:radial-gradient(circle at 31% 24%,#f9e2a7,#c9a868 44%,#947741 78%,#e2c384);box-shadow:0 5px 10px #10241b80,inset 0 0 0 3px #594d2c,inset 0 0 0 4px #edda9b,inset 0 2px 10px #fff0c657;
}
.clan-shop-page .clan-pack-seal .card-clan-mark{
 display:grid;place-items:center;width:66px;height:66px;border:0;border-radius:50%;background:none;box-shadow:none;color:#354a36;
 filter:drop-shadow(0 1px 0 #ffedbf9c) drop-shadow(0 -1px 0 #594e2b70);
}
.clan-shop-page .clan-pack-seal .card-clan-mark svg{width:43px;height:43px;stroke-width:1.5}
.clan-shop-page .pack-seal-rim{position:absolute;inset:5px;border:1px dashed #78613d9c;border-radius:50%;pointer-events:none}
.clan-shop-page .pack-front-count{order:2;position:relative;color:#fff0ca;font-family:Georgia,'Times New Roman',serif;font-size:21px;line-height:1;font-weight:700;text-shadow:0 2px 3px #0a1d14}
.clan-shop-page .clan-pack .shop-pack-copy{display:flex;flex-direction:column;flex:1;padding:18px 19px 15px;min-height:158px}
.clan-shop-page .clan-pack .shop-pack-copy>.eyebrow{font-size:9px;letter-spacing:1.3px;color:#8b6a34;margin:0 0 8px}
.clan-shop-page .clan-pack .shop-pack-copy>h3{margin:0;font-size:27px;line-height:1.2;color:#403e29;text-shadow:0 1px #fff4d5}
.clan-shop-page .clan-pack .shop-pack-bonus{
 max-width:none;min-height:0;margin:12px 0 0;padding-top:10px;border-top:1px solid #af96615e;color:#655137;
 font-size:12px;line-height:1.65;overflow-wrap:anywhere;
}
.clan-shop-page .clan-pack .shop-pack-purchase{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 19px;min-width:0}
.clan-shop-page .clan-pack .price.shop-pack-price{display:flex;align-items:center;gap:7px;flex:none;color:#755722;text-shadow:0 1px #fff7db}
.clan-shop-page .shop-pack-price>.hud-icon{display:block;flex:none;width:25px;height:31px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:#98722f}
.clan-shop-page .shop-pack-price>span{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.clan-shop-page .shop-pack-price b{font-size:24px;line-height:1;font-family:Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;color:#69542e}
.clan-shop-page .shop-pack-price small{font-size:10px;line-height:1.2;font-weight:600;letter-spacing:.1px;color:#887345}
.clan-shop-page .clan-pack .shop-pack-purchase>.btn{flex:none;min-height:42px;padding:10px 17px;font-size:12px}
.clan-shop-page .clan-pack .shop-pack-catalog{width:calc(100% - 38px);min-height:39px;margin:13px 19px 18px;padding:9px 15px;font-size:12px}
.clan-shop-page .clan-pack:has(.shop-pack-purchase>.btn:hover) .clan-pack-body{transform:translateY(-3px);box-shadow:0 13px 22px #0009,inset 0 0 0 2px #102720,inset 0 0 0 4px #e8d59a8c,inset 0 0 16px #0b241973}

/* The purchase dialog uses the same gerege sign as the wallet and pack price. */
.gerege-bundles .gerege-bundle-label{display:inline-flex;align-items:center;gap:6px;line-height:1.2}
.gerege-bundles .gerege-bundle-label .hud-icon{display:block;flex:none;width:20px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gerege-bundles .gerege-bundle-label b{font-variant-numeric:tabular-nums}

@media(max-width:1080px){
 .clan-shop-page .shop-pack-grid.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
 .clan-shop-page .shop-odds-title{flex-basis:100%;margin-right:0}
}
@media(max-width:760px){
 .clan-shop-page .shop-odds{padding:13px;margin:19px 0 20px;gap:9px}
 .clan-shop-page .shop-rarity{font-size:11px;padding:6px 8px;gap:7px}
 .clan-shop-page .shop-pack-grid.pack-grid{gap:18px}
 .clan-shop-page .shop-pack-art{height:217px}
 .clan-shop-page .pack-card-back{top:23px;width:120px;height:168px;left:calc(50% - 60px)}
 .clan-shop-page .clan-pack-body{height:175px;width:154px;gap:8px;padding:15px 10px}
 .clan-shop-page .clan-pack-seal{width:77px;height:77px}
 .clan-shop-page .clan-pack-seal .card-clan-mark{width:61px;height:61px}
 .clan-shop-page .clan-pack-seal .card-clan-mark svg{width:40px;height:40px}
 .clan-shop-page .pack-front-count{font-size:20px}
 .clan-shop-page .clan-pack .shop-pack-copy{padding:16px 15px 13px;min-height:155px}
 .clan-shop-page .clan-pack .shop-pack-copy>h3{font-size:25px}
 .clan-shop-page .clan-pack .shop-pack-bonus{font-size:11px;line-height:1.65}
 .clan-shop-page .clan-pack .shop-pack-purchase{padding:0 15px;gap:7px}
 .clan-shop-page .clan-pack .shop-pack-purchase>.btn{min-height:40px;padding:9px 12px;font-size:11px}
 .clan-shop-page .clan-pack .shop-pack-catalog{width:calc(100% - 30px);margin:12px 15px 16px;padding:9px 13px;font-size:11px}
 .clan-shop-page .shop-pack-price b{font-size:22px}
 .clan-shop-page .shop-pack-price>.hud-icon{width:23px;height:29px}
}
@media(max-width:620px){
 .clan-shop-page .shop-pack-grid.pack-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .clan-shop-page .shop-rarity{width:calc(50% - 5px);min-width:0;font-size:12px;gap:8px}
 .clan-shop-page .shop-rarity strong{margin-left:auto}
 .clan-shop-page .shop-pack.clan-pack{width:min(100%,430px);margin-left:auto;margin-right:auto}
 .clan-shop-page .shop-pack-art{height:229px}
 .clan-shop-page .clan-pack-body{width:162px;height:183px}
 .clan-shop-page .pack-card-back{top:27px;width:127px;height:177px;left:calc(50% - 63.5px)}
 .clan-shop-page .clan-pack .shop-pack-copy{padding:17px 19px 14px;min-height:0}
 .clan-shop-page .clan-pack .shop-pack-copy>h3{font-size:27px}
 .clan-shop-page .clan-pack .shop-pack-bonus{font-size:12px}
 .clan-shop-page .clan-pack .shop-pack-purchase{padding:0 19px;margin-top:6px}
 .clan-shop-page .clan-pack .shop-pack-purchase>.btn{min-height:43px;font-size:12px;padding:10px 17px}
 .clan-shop-page .clan-pack .shop-pack-catalog{width:calc(100% - 38px);min-height:41px;margin:13px 19px 18px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .clan-shop-page .clan-pack-body{transition:none}
 .clan-shop-page .clan-pack:has(.shop-pack-purchase>.btn:hover) .clan-pack-body{transform:none}
}