/* Clash Arena V2 — icon system. Existing Arena artwork, one semantic key per meaning (icons/manifest.json).
   Render only through arena_icon() (PHP) or ArenaIcons.render() (JS). The width/height attributes carry the
   display size (contextual rules may still resize); the size class only sets the shadow for the optical tier. */
.ai{display:inline-block;flex:0 0 auto;object-fit:contain;vertical-align:middle;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));transition:transform var(--v2-mid) var(--v2-ease-pop),filter var(--v2-fast),opacity var(--v2-fast)}
.ai-xs{filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.ai-sm{filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.ai-lg{filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.ai-xl{filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 14px 24px rgba(0,0,0,.4))}

/* States: active glows gold, disabled desaturates (not colour alone), warning adds a shaped pip. */
.ai.is-active,.is-active>.ai,[aria-current=page]>.ai{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(242,195,95,.7))}
.ai.is-disabled,[disabled]>.ai,[aria-disabled=true]>.ai{filter:grayscale(1) brightness(.75);opacity:.6}
.ai-wrap{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
.ai-wrap.is-warning::after{content:"";position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:3px;transform:rotate(45deg);
  background:var(--v2-ember);border:2px solid var(--v2-night);box-shadow:0 0 8px rgba(255,122,46,.7)}
.v2-hud-link:hover>.ai,.v2-menu-item:hover>.ai,.v2-sheet-tile:hover>.ai,.v2-icon-btn:hover>.ai{transform:translateY(-2px) rotate(-6deg)}

/* ArenaIconButton: icon-only action, 44 px touch target, aria-label plus tooltip. */
.v2-icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:13px;border:2px solid #0e0a07;cursor:pointer;
  background:linear-gradient(180deg,#3a2f25,#271f18);box-shadow:inset 0 2px 0 rgba(255,236,190,.12),0 3px 0 #0b0806,0 6px 12px rgba(0,0,0,.35);
  transition:transform var(--v2-fast) var(--v2-ease),filter var(--v2-fast)}
.v2-icon-btn:hover{filter:brightness(1.12)}
.v2-icon-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,236,190,.1),0 1px 0 #0b0806}
.v2-icon-btn:focus-visible{outline:3px solid var(--v2-gold);outline-offset:2px}
.v2-icon-btn[disabled]{cursor:not-allowed;transform:none;filter:none}
.v2-icon-btn[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:6px 10px;border-radius:9px;
  background:#120d0a;border:1px solid var(--v2-stone-edge);color:var(--v2-text);font:700 .8rem/1.1 var(--v2-body);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--v2-fast),transform var(--v2-fast);z-index:5}
.v2-icon-btn[data-tip]:hover::after,.v2-icon-btn[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .ai,.v2-icon-btn{transition:none}
  .v2-hud-link:hover>.ai,.v2-menu-item:hover>.ai,.v2-sheet-tile:hover>.ai,.v2-icon-btn:hover>.ai{transform:none}
}