/* In-match shop, LoL style, painted with the Asa HUD materials (shop-window.png, slot.png). */
#shop-dialog.shop-modal{
  --tier-consumable:#7fd9a1;--tier-basic:#a9b8ad;--tier-epic:#b48cff;--tier-legendary:#f3b64c;
  width:min(1180px,calc(100vw - 24px));max-width:1180px;height:min(800px,calc(100dvh - 24px));max-height:none;
  padding:30px 30px 18px;display:none;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;overflow:hidden;
}
#shop-dialog.shop-modal[open]{display:grid;animation:shop-in .22s ease-out}
@keyframes shop-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
#shop-dialog .shop-heading{display:flex;align-items:center;gap:18px;padding:0 54px 12px 4px;border-bottom:1px solid #b9a16c55}
#shop-dialog .shop-heading>div:first-child{flex:none}
#shop-dialog h2{font-size:28px;margin:6px 0 0}
.shop-search{flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 10px;height:36px;border:1px solid #a48f5877;border-radius:4px;background:#13160ecc;box-shadow:inset 0 1px 4px #0009}
.shop-search:focus-within{border-color:#e2c47e;box-shadow:inset 0 1px 4px #0009,0 0 0 2px #e2c47e22}
.shop-search svg{width:15px;height:15px;color:#b8a873;flex:none}
.shop-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#f1e6c5;font:13px var(--sans)}
.shop-search input::placeholder{color:#8f8a6e}
.shop-search kbd{font:9px var(--sans);color:#a99d74;border:1px solid #8a7a4b66;border-radius:3px;padding:2px 4px;white-space:nowrap}
#shop-dialog .shop-wallet{margin-right:0;flex:none}

.shop-layout{display:grid;grid-template-columns:168px minmax(0,1fr) 318px;gap:12px;min-height:0}
/* Filters */
.shop-filters{display:flex;flex-direction:column;gap:3px;overflow:auto;padding-right:2px;scrollbar-width:thin}
.shop-filters button{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid transparent;border-radius:4px;background:none;color:#bdb898;font:500 11.5px var(--sans);text-align:left;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.shop-filters button svg{width:15px;height:15px;flex:none;color:#9f9269}
.shop-filters button:hover{background:#2f311f;color:#efe2bb}
.shop-filters button[aria-pressed="true"]{background:linear-gradient(90deg,#4a4426,#2c2c1c);border-color:#c9ad6b88;color:#ffecb8;box-shadow:inset 3px 0 0 #e8c46f}
.shop-filters button[aria-pressed="true"] svg{color:#f3cf74}
/* Catalog */
.shop-catalog{overflow:auto;min-height:0;padding:2px 8px 10px 2px;scrollbar-width:thin;scrollbar-color:#9a8859 #222418}
.shop-section{margin-bottom:14px}
.shop-section h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;font:600 10px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:#c5b37b}
.shop-section h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#b49b5f66,transparent)}
.shop-section h3 svg{width:13px;height:13px;color:#f2c96b}
.shop-recommended{padding:10px 10px 4px;border:1px solid #c8a85e44;border-radius:6px;background:radial-gradient(ellipse at 20% 0,#5a4a2244,transparent 70%),#1d1f15aa}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.shop-tile{--tier:var(--tier-basic);position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 3px 4px;border:1px solid #57502f;border-radius:5px;background:linear-gradient(#2b2d1f,#1c1e14);cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s,filter .14s;color:#d8cfaa}
.shop-tile.tier-consumable{--tier:var(--tier-consumable)}.shop-tile.tier-epic{--tier:var(--tier-epic)}.shop-tile.tier-legendary{--tier:var(--tier-legendary)}
.shop-tile .tile-art{position:relative;width:52px;height:52px;padding:5px;background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat;border-radius:4px;box-shadow:0 0 0 1px color-mix(in srgb,var(--tier) 45%,transparent)}
.shop-tile .tile-art img{width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 2px #000a)}
.shop-tile .tile-price{font:600 11px var(--sans);color:#cdbf8d;font-variant-numeric:tabular-nums}
.shop-tile .tile-check{position:absolute;top:2px;right:3px;display:none;width:15px;height:15px;border-radius:50%;background:#2f7a49;color:#e9ffe9;font:700 9px/15px var(--sans);font-style:normal;text-align:center;box-shadow:0 0 0 1px #8be0a3}
.shop-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tier) 70%,#fff 0%);box-shadow:0 6px 14px #0008,0 0 10px color-mix(in srgb,var(--tier) 35%,transparent)}
.shop-tile.selected{border-color:#f0d58c;box-shadow:0 0 0 1px #f0d58c,0 0 16px #e8c46f55}
.shop-tile.affordable .tile-price{color:#ffd56b;text-shadow:0 0 8px #ffc94a66}
.shop-tile.affordable .tile-art{box-shadow:0 0 0 1px color-mix(in srgb,var(--tier) 70%,transparent),0 0 10px color-mix(in srgb,var(--tier) 30%,transparent)}
.shop-tile.discount .tile-price{color:#8fe3a4}
.shop-tile.discount .tile-price::before{content:'▾ ';font-size:9px}
.shop-tile.locked:not(.owned) .tile-art img{filter:saturate(.45) brightness(.72) drop-shadow(0 1px 2px #000a)}
.shop-tile.locked:not(.owned) .tile-price{color:#8d8667}
.shop-tile.owned .tile-check{display:block}
/* Legendary items: a slow golden sheen around the frame. */
.shop-tile.tier-legendary::before{content:'';position:absolute;inset:-1px;border-radius:5px;padding:1px;background:conic-gradient(from var(--sheen,0deg),transparent 0 70%,#ffd98a 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;pointer-events:none}
.shop-tile.tier-legendary:hover::before,.shop-tile.tier-legendary.selected::before{opacity:1;animation:shop-sheen 2.2s linear infinite}
@property --sheen{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes shop-sheen{to{--sheen:360deg}}
.shop-tile.bought{animation:tile-bought .6s ease-out}
@keyframes tile-bought{0%{box-shadow:0 0 0 0 #ffd56bcc}40%{transform:scale(1.08);box-shadow:0 0 0 6px #ffd56b44,0 0 24px #ffd56b88}100%{transform:none;box-shadow:none}}
.shop-empty{color:#a49f80;font-size:12px;padding:20px 4px}
/* Detail panel */
.shop-detail{--tier:var(--tier-basic);display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding:14px;border:1px solid #a48f586b;border-radius:6px;background:radial-gradient(ellipse at 30% 0,color-mix(in srgb,var(--tier) 16%,transparent),transparent 65%),linear-gradient(#2a2c1e,#1b1d14);scrollbar-width:thin}
.shop-detail.tier-consumable{--tier:var(--tier-consumable)}.shop-detail.tier-epic{--tier:var(--tier-epic)}.shop-detail.tier-legendary{--tier:var(--tier-legendary)}
.detail-head{display:flex;gap:12px;align-items:center}
.detail-art{flex:none;width:74px;height:74px;padding:8px;background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat;border-radius:6px;box-shadow:0 0 0 1px color-mix(in srgb,var(--tier) 70%,transparent),0 0 22px color-mix(in srgb,var(--tier) 30%,transparent)}
.detail-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px #000c)}
.shop-detail.tier-legendary .detail-art{animation:detail-glow 2.6s ease-in-out infinite}
@keyframes detail-glow{50%{box-shadow:0 0 0 1px var(--tier),0 0 30px color-mix(in srgb,var(--tier) 55%,transparent)}}
.detail-tier{font:600 9px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--tier)}
.detail-head h3{margin:3px 0 6px;font:600 16px/1.2 var(--serif);color:#f6e7bd}
.detail-cost{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#f0d37b;font-size:15px}
.detail-cost svg{width:16px;height:16px}.detail-cost b{font-weight:700;font-variant-numeric:tabular-nums}
.detail-cost s{color:#8e8869;font-size:12px}.detail-cost em{flex-basis:100%;font-style:normal;font-size:10.5px;color:#8fe3a4}
.detail-stats{list-style:none;margin:0;padding:9px 11px;display:grid;gap:4px;border-radius:5px;background:#12140ccc;font-size:12.5px;color:#d7d3b8}
.detail-stats b{color:#9fe8b1;font-weight:700;margin-right:3px;font-variant-numeric:tabular-nums}
.detail-use{margin:0;padding:8px 10px;border-left:2px solid var(--tier-consumable);background:#16241a99;color:#cfe8d5;font-size:12px;line-height:1.5}
.detail-block>small{display:block;margin-bottom:6px;font:600 9px var(--sans);letter-spacing:1.5px;color:#b5a578}
/* Build tree: the item on top, its components below, joined by lines. */
.detail-tree{display:flex;justify-content:center;padding:4px 0 2px}
.tree-node{display:flex;flex-direction:column;align-items:center;position:relative}
.tree-children{display:flex;gap:6px;margin-top:14px;position:relative}
.tree-children::before{content:'';position:absolute;top:-7px;left:22px;right:22px;height:1px;background:#b39a5c99}
.tree-children>.tree-node::before{content:'';position:absolute;top:-7px;left:50%;width:1px;height:7px;background:#b39a5c99}
.tree-node:not(.tree-root)>.tree-children::after{content:'';position:absolute;top:-14px;left:50%;width:1px;height:7px;background:#b39a5c99}
.tree-root>.tree-children::after{content:'';position:absolute;top:-14px;left:50%;width:1px;height:7px;background:#b39a5c99}
.tree-children:has(>.tree-node:only-child)::before{display:none}
.tree-item{--tier:var(--tier-basic);display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px;border:1px solid color-mix(in srgb,var(--tier) 45%,#2a2a1c);border-radius:4px;background:#191b12;cursor:pointer;color:#cbbf91;transition:transform .12s,border-color .12s}
.tree-item.tier-consumable{--tier:var(--tier-consumable)}.tree-item.tier-epic{--tier:var(--tier-epic)}.tree-item.tier-legendary{--tier:var(--tier-legendary)}
.tree-item img{width:34px;height:34px;object-fit:contain}
.tree-item small{font:600 9.5px var(--sans);font-variant-numeric:tabular-nums}
.tree-item:hover{transform:translateY(-1px);border-color:var(--tier)}
.tree-item.owned{border-color:#6fd38d;box-shadow:0 0 8px #4fc37244;color:#a6f0bc}
.tree-root>.tree-item img{width:42px;height:42px}
.detail-into{display:flex;flex-wrap:wrap;gap:6px}
.detail-actions{margin-top:auto;display:flex;gap:8px}
.shop-buy-main{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border:0;border-radius:4px;cursor:pointer;color:#fff2c8;font:700 12px var(--sans);letter-spacing:1.4px;text-shadow:0 2px 3px #000;background:url('./assets/ui/asa/action-button.png') center/100% 100% no-repeat;transition:filter .15s,transform .15s}
.shop-buy-main b{padding:3px 8px;border-radius:3px;background:#0006;color:#ffd56b;font-variant-numeric:tabular-nums}
.shop-buy-main.ready{animation:buy-ready 2.2s ease-in-out infinite}
@keyframes buy-ready{50%{filter:brightness(1.18) drop-shadow(0 0 8px #ffcf6c88)}}
.shop-buy-main:hover:not(:disabled){filter:brightness(1.25);transform:translateY(-1px)}
.shop-buy-main:disabled{filter:grayscale(.75) brightness(.6);cursor:not-allowed;animation:none}
.shop-buy-main.shake{animation:buy-shake .35s}
@keyframes buy-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.detail-reason{margin:0;min-height:16px;font-size:11px;color:#c9bf97;text-align:center}
/* Inventory dock */
.shop-dock{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"status slots sell" "feedback feedback feedback";align-items:center;gap:6px 14px;padding-top:10px;border-top:1px solid #b39d5b40}
.dock-status{grid-area:status;display:flex;align-items:center;gap:8px;font-size:12px;color:#c9c7aa}
.dock-status svg{width:17px;height:17px;flex:none}
.dock-status.in-base{color:#a8e3b4}.dock-status.in-base svg{color:#6fd38d}
.dock-status.away{color:#e7c27a}.dock-status.away svg{color:#e7b45a}
.dock-slots{grid-area:slots;display:flex;gap:6px}
.dock-slot{--tier:var(--tier-basic);position:relative;width:50px;height:50px;padding:5px;border:0;border-radius:4px;cursor:pointer;background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat,#1c1e14;box-shadow:inset 0 1px 4px #0009,0 0 0 1px color-mix(in srgb,var(--tier) 40%,transparent);transition:transform .12s,box-shadow .12s}
.dock-slot.tier-consumable{--tier:var(--tier-consumable)}.dock-slot.tier-epic{--tier:var(--tier-epic)}.dock-slot.tier-legendary{--tier:var(--tier-legendary)}
.dock-slot.empty{opacity:.55;cursor:default;box-shadow:inset 0 1px 4px #0009}
.dock-slot img{width:100%;height:100%;object-fit:contain}
.dock-slot b{position:absolute;right:3px;bottom:2px;font:700 11px var(--sans);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.dock-slot kbd{position:absolute;left:2px;top:1px;font:600 8px var(--sans);color:#d9cfa8;text-shadow:0 1px 2px #000}
.dock-slot:not(.empty):hover{transform:translateY(-2px)}
.dock-slot.selected{box-shadow:0 0 0 2px #f0d58c,0 0 14px #e8c46f66}
.dock-slot.arrive{animation:slot-arrive .7s cubic-bezier(.2,1.4,.4,1)}
.dock-slot.arrive::after{content:'';position:absolute;inset:0;border-radius:4px;background:linear-gradient(115deg,transparent 30%,#fff8d6cc 50%,transparent 70%);background-size:250% 100%;animation:slot-sweep .8s ease-out forwards;pointer-events:none}
@keyframes slot-arrive{0%{transform:scale(.5);filter:brightness(2.4)}60%{transform:scale(1.12)}100%{transform:none;filter:none}}
@keyframes slot-sweep{from{background-position:120% 0}to{background-position:-60% 0;opacity:0}}
.dock-sell{grid-area:sell;display:flex;align-items:center;gap:6px;height:38px;padding:0 16px;border:1px solid #a48f5888;border-radius:4px;background:linear-gradient(#4a3f2a,#2c2619);color:#f0d9a0;font:600 10.5px var(--sans);letter-spacing:1px;cursor:pointer}
.dock-sell svg{width:14px;height:14px}
.dock-sell:hover:not(:disabled){filter:brightness(1.2)}
.dock-sell:disabled{opacity:.45;cursor:not-allowed}
#shop-dialog .shop-feedback{grid-area:feedback;margin:0;min-height:16px;font-size:12px;color:#ead89d}
#shop-dialog .shop-feedback[data-kind="error"]{color:#ff9d8a}
#shop-dialog .shop-feedback[data-kind="ok"]{color:#a8e8b8}
/* Coins and the legendary forge */
.shop-coin{position:absolute;z-index:20;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff6c4,#ffd04a 45%,#b47a12 80%);box-shadow:0 0 8px #ffcf55aa;animation:coin-fly .9s cubic-bezier(.35,.1,.3,1) both}
@keyframes coin-fly{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:0}15%{opacity:1}45%{transform:translate(calc(var(--dx) * .4),var(--lift)) scale(1.1) rotate(calc(var(--spin) * .5))}100%{transform:translate(var(--dx),var(--dy)) scale(.45) rotate(var(--spin));opacity:.2}}
.shop-forge{position:absolute;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;gap:6px;pointer-events:none;background:radial-gradient(circle,#2a1d0699 0,#0000 60%);animation:forge-fade 2.2s ease-out forwards}
.forge-rays{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffd56b38 0 6deg,transparent 6deg 22deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%);animation:forge-spin 2.2s linear}
.forge-ring{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid #ffe08a;box-shadow:0 0 30px #ffcf55,inset 0 0 30px #ffcf55;animation:forge-ring 1.2s ease-out forwards}
.forge-art{position:relative;width:110px;height:110px;padding:14px;background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat;border-radius:10px;box-shadow:0 0 0 2px var(--tier-legendary),0 0 50px #ffbf3fcc;animation:forge-art 2.2s cubic-bezier(.2,1.3,.4,1) forwards}
.forge-art img{width:100%;height:100%;object-fit:contain}
.shop-forge strong{position:relative;margin-top:10px;font:700 22px var(--serif);letter-spacing:3px;color:#ffe7a6;text-shadow:0 0 18px #ffb52e,0 2px 3px #000;animation:forge-text 2.2s ease-out forwards}
.shop-forge small{position:relative;font:600 13px var(--sans);color:#f3dfb0;text-shadow:0 2px 3px #000;animation:forge-text 2.2s .1s ease-out both}
@keyframes forge-fade{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes forge-spin{from{transform:rotate(0) scale(.6)}to{transform:rotate(60deg) scale(1.15)}}
@keyframes forge-ring{from{transform:scale(.3);opacity:1}to{transform:scale(3.2);opacity:0}}
@keyframes forge-art{0%{transform:scale(.2) translateY(30px);opacity:0}25%{transform:scale(1.15);opacity:1}40%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes forge-text{0%,20%{opacity:0;transform:translateY(8px)}35%{opacity:1;transform:none}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.shop-tile,.shop-tile.bought,.dock-slot.arrive,.shop-buy-main.ready,.shop-detail.tier-legendary .detail-art{animation:none!important;transition:none}}
/* Narrow screens: filters in a row, the detail under the catalog. */
@media (max-width:980px){
  .shop-layout{grid-template-columns:minmax(0,1fr) 280px}
  .shop-filters{grid-column:1/-1;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .shop-filters button{flex:none;padding:6px 9px}
}
@media (max-width:700px){
  #shop-dialog.shop-modal{padding:24px 12px 12px;height:calc(100dvh - 12px);width:calc(100vw - 12px)}
  #shop-dialog .shop-heading{flex-wrap:wrap;gap:8px 12px;padding-right:44px}
  #shop-dialog h2{font-size:22px}
  .shop-search{order:3;flex-basis:100%;max-width:none;margin:0}
  .shop-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
  .shop-catalog{min-height:120px}
  .shop-detail{max-height:42dvh}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
  .shop-tile .tile-art{width:44px;height:44px;padding:4px}
  .shop-dock{grid-template-columns:1fr auto;grid-template-areas:"slots sell" "status status" "feedback feedback"}
  .dock-slot{width:40px;height:40px;padding:4px}
  .dock-slots{gap:4px}
}

/* HUD inventory: slots 1 2 3 5 6 7 (4 is the ward), stacks, item tier and usable consumables. */
.inventory>.inv-slot{--tier:#a9b8ad;position:relative;display:grid;place-items:center;width:auto;height:37px;padding:4px;border:0;border-radius:3px;cursor:pointer;
  background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat,#252619;box-shadow:inset 0 1px 4px #0009,0 0 0 1px color-mix(in srgb,var(--tier) 35%,transparent);transition:transform .12s,box-shadow .12s}
.bottom-hud .inventory>.inv-slot{height:34px}
.inventory>.inv-slot.tier-consumable{--tier:#7fd9a1}.inventory>.inv-slot.tier-epic{--tier:#b48cff}.inventory>.inv-slot.tier-legendary{--tier:#f3b64c}
.inventory>.inv-slot.empty{cursor:default;box-shadow:inset 0 1px 4px #0009}
.inventory>.inv-slot img{display:block;width:100%;height:100%;object-fit:contain}
.inventory>.inv-slot kbd{position:absolute;left:2px;top:0;font:600 8px var(--sans);color:#d9cfa8;text-shadow:0 1px 2px #000;pointer-events:none}
.inventory>.inv-slot b{position:absolute;right:2px;bottom:0;font:700 10px var(--sans);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.inventory>.inv-slot.tier-legendary{box-shadow:inset 0 1px 4px #0009,0 0 0 1px #f3b64c99,0 0 8px #f3b64c44}
.inventory>.inv-slot:not(.empty):hover{transform:translateY(-1px);box-shadow:inset 0 1px 4px #0009,0 0 0 1px var(--tier),0 0 10px color-mix(in srgb,var(--tier) 45%,transparent)}
.inventory>.inv-slot.usable::after{content:'';position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 0 1px #7fd9a155;pointer-events:none}
.consumable-status{display:flex;gap:4px;min-height:0;margin:-2px 0 5px}
.consumable-status:empty{display:none}
.consumable-chip{display:flex;align-items:center;gap:3px;padding:1px 6px 1px 2px;border:1px solid #7fd9a166;border-radius:10px;background:#10241acc;color:#c9f3d6;font:600 9px var(--sans);animation:chip-in .25s ease-out}
.consumable-chip img{width:15px;height:15px;object-fit:contain}
@keyframes chip-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* Item powers: unique passives and actives. */
.detail-power{padding:8px 10px;border-radius:5px;background:#1d1a10cc;border-left:2px solid #f3b64c}
.detail-power.active{border-left-color:#7fd0ff;background:#101b24cc}
.detail-power>div{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.detail-power b{font:700 8.5px var(--sans);letter-spacing:1.3px;color:#f3b64c}
.detail-power.active b{color:#8fd8ff}
.detail-power strong{font:600 13px var(--serif);color:#f6e7bd}
.detail-power small{margin-left:auto;font:600 10px var(--sans);color:#b9c7d2}
.detail-power p{margin:5px 0 0;font-size:11.5px;line-height:1.5;color:#d4d0b8}
.shop-tile .tile-active{position:absolute;left:3px;top:3px;padding:1px 3px;border-radius:2px;background:#123448e6;color:#9fe0ff;font:700 6.5px var(--sans);letter-spacing:.6px;font-style:normal;box-shadow:0 0 0 1px #6fc4ef88}
/* HUD: active items and cooldowns on the slots. */
.inventory>.inv-slot.active{box-shadow:inset 0 1px 4px #0009,0 0 0 1px #7fd0ffaa,0 0 7px #7fd0ff44}
.inventory>.inv-slot .slot-cd{position:absolute;inset:0;border-radius:3px;display:none;place-items:center;font:700 11px var(--sans);font-style:normal;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none;
  background:conic-gradient(#000a calc(var(--cd,0) * 360deg),#0000 0)}
.inventory>.inv-slot.cooling .slot-cd{display:grid}
.inventory>.inv-slot.ready-flash{animation:slot-ready .6s ease-out}
@keyframes slot-ready{0%{filter:brightness(2.2)}100%{filter:none}}