/* Podstavec zabírá v albu stejné místo jako běžná karta. Znak funguje i samostatně na scéně. */
.ability-power {
  --ability-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  --ability-ratio: .79;
  --ability-edge: #ddb4ff;
  --ability-glow: #8b49b371;
  --ability-metal: linear-gradient(145deg, #f6e4ff, #ac72d7 28%, #532570 51%, #c895ee 72%, #68378d);
}
.ability-passive {
  --ability-shape: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  --ability-ratio: 1;
  --ability-edge: #a0ffe7;
  --ability-glow: #388e796e;
  --ability-metal: linear-gradient(145deg, #e0fff6, #6bcab1 28%, #28484e 52%, #86d9cb 76%, #2d4951);
}
[data-ability="hate"] {
  --ability-edge: #ffb2b5;
  --ability-glow: #a9225c88;
  --ability-metal: linear-gradient(145deg, #ffe4df, #e75c87 24%, #591d52 47%, #ff88aa 71%, #67214d);
}
.ability-emblem {
  display: block; width: 100%; aspect-ratio: var(--ability-ratio);
  position: relative; pointer-events: none; filter: drop-shadow(0 3px 4px #0a0612bb) drop-shadow(0 0 8px var(--ability-glow));
}
.ability-cut { position: absolute; inset: 0; clip-path: var(--ability-shape); background: var(--ability-metal); }
.ability-cut::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(150deg, #fff6, transparent 32%, transparent 70%, #fff2);
}
.ability-art {
  position: absolute; inset: 5%; width: 90%; height: 90%;
  object-fit: cover; object-position: center; clip-path: var(--ability-shape);
}
.ability-card {
  position: relative; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; isolation: isolate;
  background: radial-gradient(ellipse at 50% 42%, var(--ability-glow), transparent 65%);
}
.ability-card .ability-emblem { position: absolute; width: 81%; top: 5%; left: 50%; transform: translateX(-50%); }
.ability-card.ability-passive .ability-emblem { width: 74%; top: 12%; }
.ability-pedestal { position: absolute; z-index: -1; inset: 65% 8% 11%; }
.ability-pedestal::before {
  content: ''; position: absolute; inset: 9% 0 12%;
  background: linear-gradient(0deg, #221729, #594265 65%, #362340);
  border-radius: 24% 24% 24% 24% / 24% 24% 32% 32%;
  box-shadow: 0 5px 10px #1c112185, inset 0 -1px 0 #b28aa9;
}
.ability-pedestal::after {
  content: ''; position: absolute; inset: 0 0 58%; border-radius: 50%;
  border: 1px solid var(--ability-edge); background: radial-gradient(ellipse at 50% 35%, var(--ability-edge), #4c3153 54%, #241934 80%);
}
.ability-caption {
  position: absolute; inset: 76% 9% 0; text-align: center;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.ability-caption b {
  color: #fff9ff; text-shadow: 0 1px 3px #000; text-wrap: balance;
  font: 800 clamp(9px, 8.3cqw, 21px)/1.02 var(--font-body);
}
.ability-caption small {
  color: #3f254c; text-transform: uppercase; letter-spacing: .055em;
  font: 800 clamp(7px, 5.4cqw, 13px)/1 var(--font-body);
}
.ability-preview .ability-caption small { color: #d9b9f3; }
.ability-mana {
  position: absolute; right: 1%; bottom: 13%; width: 15%; aspect-ratio: 1; display: grid; place-items: center;
  color: #fff; font: 800 9cqw/1 var(--font-body); border-radius: 50%;
  background: linear-gradient(145deg, #69c5fc, #153a87); box-shadow: inset 0 0 0 1px #9fdbff, 0 2px 4px #0009;
}
.album-cell.missing .ability-card { opacity: .76; }
.album-cell:focus-visible .ability-card, .album-cell:hover .ability-card { opacity: 1; }
.ability-preview { width: min(66vw, 240px, 39dvh); margin: 0 auto; }
.ability-detail .modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; touch-action: pan-y; }