/* Crates: the crate cards, the chest-opening reveal and its summary, the Legendary crate, and the Bag. */
@keyframes crate-spotlight {40%{transform:scale(1.04);filter:brightness(1.15)}}
@keyframes crate-item-arrive{from{opacity:0;transform:translateY(15px) scale(.8)}to{opacity:1;transform:none}}@keyframes crate-rays-turn{to{transform:rotate(360deg)}}
@keyframes legendary-strike{0%{clip-path:inset(0 0 100%);opacity:0}6%{opacity:1}18%{clip-path:inset(0);opacity:1}31%{clip-path:inset(0);opacity:1}48%,100%{clip-path:inset(0);opacity:0}}
.crate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.crate {
  background: linear-gradient(#3d9ece, #255c8f);
  border: 2px solid #284c6e;
  border-radius: 10px;
  text-align: center;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  box-shadow: inset 0 2px #79d1ed;
}
.crate.epic {
  background: linear-gradient(#bc6cdc, #7145a5);
  box-shadow: inset 0 2px #eba6f0;
}
.crate h3 {
  font-size: 14px;
  text-transform: uppercase;
}
.crate p {
  font-size: 10px;
  color: #e2ddf0;
}
.crate .btn {
  width: 95px;
}
.crate .btn {
  margin-top: 10px;
}
.resource-bag {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.bag-resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 5px;
  border: 3px solid var(--slate-950);
  border-radius: 16px;
  background: #ffd33f;
  color: var(--slate-950);
}
.bag-resource small {
  font-size: 12px;
}

.crate-equipment-reward {display:flex;flex-direction:column;align-items:center;gap:16px;margin:10px 0 24px}
.crate-equipment-reward .item-tile {width:142px;height:142px;border-radius:14px}
.crate-equipment-reward .equipment-card-badge {width:37px;height:37px;top:5px;left:5px}
.crate-equipment-reward .equipment-card-badge > .painted-sprite {width:30px;height:30px}
.crate-equipment-reward h3 {margin:0}

/* Bag contents use compact icon tiles with readable corner quantities. */
.inventory-bag-modal .resource-bag {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  margin: 0;
  background: var(--slate-500);
  border-radius: 17px;
  box-shadow: inset 0 3px var(--slate-800), inset 0 -3px #b7d1e0;
}
.inventory-bag-modal .bag-resource {
  position: relative;
  aspect-ratio: 1;
  padding: 3px;
  justify-content: center;
  border-width: 2px;
  border-radius: 11px;
  box-shadow: inset 0 3px #fff3a0;
}
/* As in the Shop: gold sits on green, gems on purple and energy on blue; keys on cream. */
.inventory-bag-modal .bag-resource.bag-key,
.inventory-bag-modal .bag-resource.bag-epicKey,
.inventory-bag-modal .bag-resource.bag-legendaryKey {
  background: var(--cream);
  box-shadow: inset 0 3px white;
}
.inventory-bag-modal .bag-resource.bag-coin {
  background: var(--green);
  box-shadow: inset 0 3px var(--green-top);
}
.inventory-bag-modal .bag-resource.bag-gem {
  background: var(--purple);
  box-shadow: inset 0 3px var(--purple-top);
}
.inventory-bag-modal .bag-resource.bag-bolt {
  background: var(--blue);
  box-shadow: inset 0 3px var(--blue-top);
}
.inventory-bag-modal .bag-resource > .painted-sprite,
.inventory-bag-modal .bag-resource > .epic-key {
  width: 83%;
  height: 83%;
}
.inventory-bag-modal .epic-key svg { width: 100%; height: 100%; }
/* Fixed at the phone size: the tile doesn't grow with the viewport, so neither can the
   text, or a long amount (×3,950) spills out of the tile on wide screens. */
.inventory-bag-modal .bag-resource b {
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: white;
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-text-stroke: 2px var(--slate-950);
  paint-order: stroke fill;
}

/* Supply crates: framed color panels with compact side-by-side open buttons. */
/* Shop cards follow the shade roles: a soft-tint body under a main-shade header. */
.crate {padding:0 7px 13px;gap:10px;border:2px solid var(--ink);border-radius:22px;background:var(--blue-soft);box-shadow:0 var(--button-depth) var(--button-drop);overflow:hidden}
.crate.epic {background:var(--purple-soft);box-shadow:0 var(--button-depth) var(--button-drop)}
.crate.crate-spotlight {animation:crate-spotlight 1.2s ease-out .25s 2}
.crate h3 {width:calc(100% + 14px);margin:0;padding:13px 3px;background:var(--blue);font-size:16px;line-height:1.1}
.crate.epic h3 {background:var(--purple)}
.crate p {font-size:11px;line-height:1.3;margin:0 3px;min-height:29px;color:#fff;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}
.crate-art {width:100%;min-height:102px;display:grid;place-items:center;background:radial-gradient(ellipse,#ffffff88,transparent 68%)}
.crate .crate-art > .painted-sprite {filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
.crate.epic .crate-art > svg {filter:hue-rotate(245deg) drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
/* Shop crates borrow the reveal screen's wedges, held still. */
.crate-grid .crate-art {position:relative;isolation:isolate;background:none}
.crate-grid .crate-art::before {content:"";position:absolute;left:50%;top:50%;z-index:-1;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff0 0deg 18deg,#fff9 18deg 32deg,#fff0 32deg 45deg);mask-image:radial-gradient(black,transparent 70%);pointer-events:none}
.crate-actions {display:flex;width:100%;gap:7px;justify-content:center;margin-top:auto;padding:4px 0 0}
.crate .crate-actions .btn {flex:1;min-width:0;width:auto;max-width:105px;margin:0;padding:5px 3px;gap:2px;border-radius:10px}
.crate-actions .painted-sprite,.crate-actions .epic-key {flex-shrink:0}
/* The ad button takes a smaller share so the price beside it has room. */
.crate .crate-actions .crate-ad {flex-grow:.6}
.crate .crate-actions .crate-ad svg {width:24px;height:24px}
.crate-open-gems>span {display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;line-height:1.05}
@media(max-width:360px){.crate-grid{gap:8px}.crate{padding-left:5px;padding-right:5px}.crate h3{font-size:14px}.crate-actions{gap:5px}.crate-actions svg{width:17px;height:17px}
}

.crate p {text-transform:uppercase;font-size:12px;line-height:1.35;min-height:2.7em;display:block;margin:3px 2px 0;font-weight:900;-webkit-text-stroke:2px var(--slate-950);paint-order:stroke fill;text-shadow:none}
/* Grade names on crate cards use each grade's top shade. */
.crate-rarity.common {color:var(--grade-0-top)}
.crate-rarity.good {color:var(--grade-1-top)}
.crate-rarity.great {color:var(--grade-2-top)}
.crate-rarity.epic {color:var(--grade-3-top)}
.crate-rarity.legendary {color:var(--grade-4-top)}
.crate-rarity.super {color:var(--grade-5);-webkit-text-stroke:2px white;text-shadow:none}
@media(max-width:360px){.crate p{font-size:10px}
}
/* Share row heights across cards so chests line up when descriptions wrap differently. */
.crate {display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:center;align-items:start}

/* Crate drops use the same rarity tiles and unit badges as Equipment. */
.crate-reward-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;margin:8px 0 28px}
.crate-reward-item {display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.crate-reward-item .item-tile {width:100%;height:auto;aspect-ratio:1;border-radius:13px;position:relative;padding:12px}
.crate-reward-item .item-tile > .painted-sprite {width:85%;height:85%}
.crate-reward-item > b {font-size:13px;line-height:1.2;color:var(--slate-900)}
.crate-reward-tier {font-size:12px;color:#fff6d4;text-transform:uppercase;text-shadow:0 1px 2px var(--slate-900)}
.crate-reward-count {position:absolute;right:6px;bottom:4px;color:white;font-size:14px;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill;text-shadow:none}
.crate-reward-item .equipment-card-badge {width:28px;height:28px;top:3px;left:3px}
.crate-reward-item .equipment-card-badge > .painted-sprite {width:23px;height:23px}

/* Chest reveal is a dedicated full-screen sequence, not a framed shop dialog. */
/* Clip sideways: the rotating rays extend past the chest and would otherwise let the screen scroll horizontally. */
.crate-reveal-overlay{position:absolute;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 42%,var(--reveal-center,#9414bb),var(--reveal-edge,#620585));overflow:hidden auto}
.modal.crate-reveal{position:relative;width:100%;max-width:680px;min-height:100%;max-height:none;margin:0 auto;padding:70px 24px 90px;border:0;border-radius:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;animation:none;isolation:isolate}
.reveal-skip{position:absolute;top:max(18px,env(safe-area-inset-top));right:22px}
.reveal-main{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin-top:auto;text-align:center;z-index:2}
.reveal-main h2{margin:0 0 24px;font-size:clamp(24px,5vw,38px);line-height:1.15;color:var(--reveal-rarity);text-transform:uppercase;-webkit-text-stroke:4px #21162a;paint-order:stroke fill;text-shadow:0 3px #21162a;overflow-wrap:anywhere}
.reveal-item.item-tile{position:relative;width:86px;height:86px;padding:12px;border-radius:16px;display:grid;place-items:center}
.reveal-item.item-tile.reveal-item-large{width:148px;height:148px;border-radius:24px;padding:16px;animation:crate-item-arrive .3s ease-out both}
.reveal-item .equipment-card-badge{top:-8px;left:-8px;width:33px;height:33px;border:2px solid #24172b}.reveal-item .equipment-card-badge>svg{width:26px;height:26px}.reveal-count{position:absolute;right:7px;bottom:5px;font-size:17px;color:white;-webkit-text-stroke:2px #24172b;paint-order:stroke fill}
.reveal-chest{position:relative;width:min(100%,280px);margin:20px 0 auto;display:grid;place-items:center}.reveal-chest-art{position:relative;width:100%;height:auto;z-index:1;overflow:visible;filter:drop-shadow(0 5px #3b145755)}
.reveal-rays{position:absolute;width:125%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff8c800 0deg 18deg,#fff8c82b 18deg 32deg,#fff8c800 32deg 45deg);mask-image:radial-gradient(black,transparent 70%);animation:crate-rays-turn 18s linear infinite}
.reveal-remaining{position:absolute;z-index:2;right:18%;bottom:10%;font-size:23px;color:white;-webkit-text-stroke:3px #24172b;paint-order:stroke fill}
.reveal-continue{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:10%;width:80%}
/* Name the unit and rolled bonus under the item art on both reveal views. */
.reveal-perk{display:flex;justify-content:center;gap:12px;margin-top:18px}.reveal-perk>div{position:static;width:48px;height:48px;border-radius:13px;border:3px solid #24172b;box-shadow:0 3px 0 #0004}.reveal-perk>div>.painted-sprite,.reveal-perk>div>svg{width:38px;height:38px}
.reveal-item .equipment-stat-badge{bottom:-8px;left:-8px;width:33px;height:33px;border:2px solid #24172b}.reveal-item .equipment-stat-badge>svg{width:26px;height:26px}
.is-summary .reveal-main{margin:auto 0}.is-summary .reveal-main h2{color:#fff6eb;font-size:25px}.reveal-summary-items{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;max-width:520px;margin-top:12px}.reveal-merges{font-size:12px;color:#fff2cc;margin-top:24px;max-width:460px}.crate-reveal.is-summary{padding-bottom:110px}
@media(max-height:650px){.modal.crate-reveal{padding-top:58px;padding-bottom:74px}.reveal-main h2{margin-bottom:14px;font-size:24px}.reveal-item.item-tile.reveal-item-large{width:115px;height:115px}.reveal-item-large>svg{max-width:84px;max-height:84px}.reveal-chest{width:210px;margin-top:18px}.reveal-continue{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.reveal-rays,.reveal-item.item-tile.reveal-item-large{animation:none}
}


/* Let narrow cards wrap cleanly without shrinking their labels; the Legendary crate's button height. */
.crate .crate-actions .btn {height:var(--button-height);min-height:var(--button-height);padding:2px 4px; gap:3px}
/* OPEN ×1 over the gem price, stacked tight like the Legendary crate's buttons. */
.crate .crate-actions .crate-open-gems {flex-direction:column;gap:0}

/* Reference layout: chest overlaps the orange title band, with odds at right. */
.crate.legendary-crate{container-type:inline-size;position:relative;margin:0 0 22px;padding:0;gap:0;background:var(--slate-900);border:3px solid var(--ink);border-radius:15px;box-shadow:0 5px var(--slate-950);display:flex;flex-direction:column;overflow:visible}
.legendary-crate-hero{position:relative;width:100%;height:34cqw;min-height:130px;background:linear-gradient(90deg,#ffe950,#ffb700);border-radius:12px 12px 0 0;isolation:isolate;overflow:hidden;border-bottom:3px solid var(--ink)}
.crate.legendary-crate h3{position:absolute;inset:0 0 auto;width:100%;height:11cqw;min-height:38px;margin:0;padding:0 2% 0 39%;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:linear-gradient(#ff920b,#ff7c04);box-shadow:inset 0 3px #fff297;border-bottom:3px solid #5c370d;font-size:clamp(15px,4.4cqw,29px);line-height:1;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;z-index:1}
.legendary-crate-hero .crate-art{position:absolute;left:8%;top:6cqw;width:30%;height:25cqw;min-height:0;background:none;z-index:3}
.legendary-crate-hero .crate-art>.painted-sprite{width:100%;height:100%;filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
.legendary-burst{position:absolute;left:-4%;top:-5cqw;width:52%;height:44cqw;z-index:2;background:repeating-conic-gradient(from 6deg at 50% 58%,#fff7bcaa 0deg 12deg,transparent 12deg 29deg);mask-image:radial-gradient(ellipse,black 10%,transparent 69%);pointer-events:none}
.legendary-sparkles{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff}.legendary-sparkles svg{position:absolute;height:auto;filter:drop-shadow(0 0 3px #fffce4)}
.legendary-guarantees{position:absolute;right:3%;top:14cqw;width:56%;color:white;text-align:center;font-size:clamp(10px,2.85cqw,19px);line-height:1.35;-webkit-text-stroke:2.4px var(--ink);paint-order:stroke fill;z-index:3}
.legendary-guarantees strong{color:#8bed13}.legendary-guarantees .epic{color:#d543e8}.legendary-guarantees .legendary{color:#ffcb09}.legendary-guarantees b,.legendary-guarantees strong{font-weight:inherit}
.legendary-crate-footer{width:100%;min-height:80px;height:19cqw;display:flex;justify-content:center;align-items:flex-start;position:relative;padding:4cqw 45px 14px;background:var(--slate-900);border-radius:0 0 12px 12px}
.crate.legendary-crate .btn[data-key-ready] .dot{--dot-size:23px;right:-9px;top:-13px;background:var(--red);box-shadow:0 0 0 2px var(--slate-950)}
.legendary-odds{margin:0;width:100%;display:grid;gap:9px}.legendary-odds div{display:flex;justify-content:space-between;gap:12px;border-radius:9px;padding:10px 14px;background:var(--slate-500)}.legendary-odds dd{margin:0}.legendary-odds div:nth-last-child(2){margin-top:12px}

/* Normal keys retain the original gold resource artwork. */

/* Start below the header (38px minimum) with a band of pattern showing above the text. */
.legendary-guarantees{top:calc(max(11cqw, 38px) + 9px);right:2%;width:59%;font-size:clamp(12px,3.45cqw,23px);line-height:1.32}
.legendary-crate-footer{height:auto;min-height:21cqw;justify-content:space-evenly;gap:12px;padding:4cqw 6% 4cqw 12%}
.crate.legendary-crate .btn>span{display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;line-height:1.1}
.crate-info{position:absolute;left:2%;bottom:28%}
.reveal-lightning{position:absolute;inset:0;width:100%;height:86%;z-index:1;pointer-events:none;filter:drop-shadow(0 0 8px #e8afff) drop-shadow(0 0 14px #dc63ff);animation:legendary-strike 1800ms ease-out infinite}
@media(prefers-reduced-motion:reduce){.reveal-lightning{display:none;animation:none}
}

.crate.legendary-crate .btn{position:relative;width:105px;max-width:42%;height:var(--button-height);min-height:var(--button-height);font-size:var(--button-font);margin:0;border-radius:10px;padding:2px 4px;display:flex;flex-direction:column;justify-content:center;gap:0}
.crate.legendary-crate .btn>span{line-height:1.05}
.crate.legendary-crate .btn .painted-sprite{width:18px;height:18px;flex-shrink:0}
.crate.legendary-crate .btn[data-key-ready]{flex-direction:row;gap:3px;padding:7px 4px}
.crate.legendary-crate .btn[data-key-ready]>.painted-sprite{width:21px;height:21px}
.crate h3 {padding:8px 3px}
.crate-art {min-height:80px}

/* The gem crate: the Legendary crate's layout in gem green, a gem pile for its chest. */
.gem-crate .legendary-crate-hero{background:linear-gradient(90deg,#9cf7d8,#2dcfa6)}
.crate.gem-crate h3{background:linear-gradient(#45d36c,#23ae4f);box-shadow:inset 0 3px #c4ffb4;border-bottom-color:#175c2b}
.gem-crate .legendary-burst{background:repeating-conic-gradient(from 6deg at 50% 58%,#eafff6aa 0deg 12deg,transparent 12deg 29deg)}
/* Sparkles over the burst but behind the gems (the Legendary chest sits under its sparkles). */
.gem-crate .legendary-crate-hero .crate-art{z-index:5}
.gem-crate .gem-pile{position:absolute;inset:4% 6% 0}
.gem-crate .gem-pile .painted-sprite{filter:drop-shadow(0 2px #145c3a)}
.gem-crate-amount .gem-word{font-size:1.5em;color:#8bed13}
.crate.gem-crate .legendary-crate-footer{padding-left:6%;padding-right:6%}
.crate.gem-crate .btn{width:125px}