.icon-column{
  position:absolute;
  top:40%;
  display:flex;
  flex-direction:column;
  gap:18px;
  width:248px;
  transform:translateY(-50%);
  z-index:14;
  pointer-events:none;
}

.icon-column.left{ left:26px; }
.icon-column.right{ right:26px; }

.icon-column.ready .icon-card{
  pointer-events:auto;
}

.icon-card{
  position:relative;
  width:100%;
  opacity:0;
  transition:
    transform .8s cubic-bezier(.22,1,.24,1),
    opacity .55s ease,
    filter .25s ease;
  will-change:transform, opacity;
}

.icon-column.left .icon-card{
  transform:translate3d(260px, 0, 0) scale(.72);
}

.icon-column.right .icon-card{
  transform:translate3d(-260px, 0, 0) scale(.72);
}

.showcase.is-open .icon-column.left .icon-card,
.showcase.is-open .icon-column.right .icon-card{
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
}

.showcase.is-open .icon-card:nth-child(1){ transition-delay:.06s; }
.showcase.is-open .icon-card:nth-child(2){ transition-delay:.14s; }
.showcase.is-open .icon-card:nth-child(3){ transition-delay:.22s; }
.showcase.is-open .icon-card:nth-child(4){ transition-delay:.30s; }

.icon-btn{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
}

.icon-column.right .icon-btn{
  flex-direction:row-reverse;
  text-align:right;
}

.icon-frame{
  width:88px;
  height:88px;
  flex:0 0 88px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.20), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(120,210,255,.12);
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .25s ease, filter .25s ease, opacity .25s ease, box-shadow .25s ease;
}

html.light-mode .icon-frame{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
  box-shadow:
    0 8px 20px rgba(31,74,140,.08),
    inset 0 1px 0 rgba(255,255,255,.80);
}

.icon-frame img{
  width:58px;
  height:58px;
  object-fit:contain;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
}

.dark-mode .attack-card .icon-frame img{
  filter:
    drop-shadow(0 0 6px rgba(255,180,100,.55))
    drop-shadow(0 0 16px rgba(255,140,0,.25));
}

.light-mode .attack-card .icon-frame img{
  filter:
    drop-shadow(0 0 6px rgba(255,160,60,.45))
    drop-shadow(0 0 14px rgba(255,140,0,.20));
}

.dark-mode .system-card .icon-frame img{
  filter:
    drop-shadow(0 0 6px rgba(0,255,255,.48))
    drop-shadow(0 0 16px rgba(0,255,255,.28));
}

.light-mode .system-card .icon-frame img{
  filter:
    drop-shadow(0 0 6px rgba(15,103,255,.42))
    drop-shadow(0 0 14px rgba(15,103,255,.24));
}

.icon-card:hover .icon-frame{
  transform:translateY(-3px) scale(1.03);
  box-shadow:
    0 14px 32px rgba(0,0,0,.24),
    0 0 24px rgba(104,244,255,.14);
}

.icon-card:hover .icon-frame img{
  transform:scale(1.08);
}

.icon-meta{
  min-width:0;
}

.icon-name{
  color:var(--title);
  font-size:15px;
  line-height:1.32;
  font-weight:800;
  letter-spacing:.1px;
}

.icon-sub{
  margin-top:4px;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.45;
  font-weight:600;
}

.icon-card.is-source .icon-frame img{
  animation:attackBlink 1s ease-in-out 5;
  filter:
    drop-shadow(0 0 8px rgba(255,184,94,.92))
    drop-shadow(0 0 18px rgba(255,140,0,.46));
}

@keyframes attackBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}

.icon-card.is-target .icon-frame img{
  animation:systemBlink .9s ease-in-out infinite;
}

.dark-mode .icon-card.is-target .icon-frame img{
  filter:
    drop-shadow(0 0 9px rgba(104,244,255,.95))
    drop-shadow(0 0 22px rgba(0,255,255,.42));
}

.light-mode .icon-card.is-target .icon-frame img{
  filter:
    drop-shadow(0 0 8px rgba(15,103,255,.85))
    drop-shadow(0 0 20px rgba(15,103,255,.28));
}

@keyframes systemBlink{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.38; transform:scale(1.04); }
}