/* Seven quiet frame identities. Artwork and text carry the visual weight. */
.power-mortal { --tier-color:#bd9169; --metal-highlight:#dbc5a4; --metal-light:#ba9773; --frame-radius:3px; }
.power-superhuman { --tier-color:#83aac5; --metal-highlight:#d6e2e7; --metal-light:#a3b7c3; --frame-radius:9px 9px 3px 3px; }
.power-monstrous { --tier-color:#c28a79; --metal-highlight:#ead0c7; --metal-light:#c29383; --frame-radius:2px 14px 2px 14px; }
.power-regional { --tier-color:#88b29a; --metal-highlight:#deead9; --metal-light:#adc3b2; --frame-radius:14px 3px 14px 3px; }
.power-divine { --tier-color:#cfb077; --metal-highlight:#f5e3bb; --metal-light:#d8bd88; --frame-radius:22px 22px 3px 3px; }
.power-cosmic { --tier-color:#ac90c5; --metal-highlight:#e5d9ed; --metal-light:#c5b2d4; --frame-radius:18px 4px 18px 4px; }
.power-transcendent { --tier-color:#ded0e9; --metal-highlight:#f1e9f5; --metal-light:#d9ccdf; --frame-radius:22px; }
.power-unknown { --tier-color:#8d8477; --metal-highlight:#d1c8bb; --metal-light:#aea394; --frame-radius:5px; }

.frame-art { position:absolute; inset:0; z-index:3; pointer-events:none; border:1px solid color-mix(in srgb,var(--tier-color) 48%,#28221d); border-radius:var(--frame-radius); }
.frame-art::before { content:''; position:absolute; inset:5px; border:1px solid color-mix(in srgb,var(--tier-color) 13%,transparent); border-radius:inherit; }
.frame-mark { position:absolute; top:-10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:0 10px; height:20px; background:#191511; color:var(--metal-light); }
.frame-mark svg { width:16px; height:16px; }
.frame-level { font:10px var(--font-display); letter-spacing:1px; }
.frame-art[data-frame-tier="unknown"] { border-color:#50483e; }
.frame-art[data-frame-tier="unknown"]::before { display:none; }

.creature-card,.creature-card:hover,.creature-card:focus-visible {
  position:relative; isolation:isolate; overflow:visible; border:0; border-radius:var(--frame-radius);
  background:#191511; box-shadow:0 6px 20px #0002; padding:12px; gap:0; color:#d3c3b0; text-decoration:none;
}
.creature-card { transition:transform .2s,box-shadow .2s; }
.creature-card::before,.creature-card .card-content::before { display:none; }
.creature-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px #0004; }
.creature-card:hover .frame-art { border-color:var(--tier-color); }
.creature-card:focus-visible { outline:2px solid var(--metal-light); outline-offset:5px; }
.creature-card .card-media,.featured-grid .card-media { width:100%; height:auto; aspect-ratio:1.05; margin:0; border:0; border-radius:4px; background:#15110d; overflow:hidden; }
.creature-card .card-media::before { display:none; }
.creature-card .card-media::after { background:linear-gradient(0deg,#19151190,transparent 35%); }
.creature-card .card-media img { filter:saturate(.9); }
.creature-card .card-content { padding:21px 8px 6px; z-index:2; min-width:0; }
.creature-card .card-kicker { font-size:9px; letter-spacing:1px; margin:0 0 9px; text-align:left; color:#b2a38e; }
.creature-card .card-title { font-size:24px; color:#eee2cd; letter-spacing:0; overflow-wrap:anywhere; text-align:left; }
.creature-card .card-title-wrap { margin:0 0 12px; min-height:32px; justify-content:space-between; gap:12px; }
.creature-card .card-title-wrap svg { display:block; width:16px; height:16px; color:var(--metal-light); }
.creature-card .card-desc { font-size:12px; line-height:1.85; margin:0 0 20px; -webkit-line-clamp:2; min-height:45px; text-align:left; color:#b9ad9a; }
.creature-card .card-rank { top:12px; bottom:auto; left:12px; max-width:calc(100% - 24px); font-size:8px; color:var(--metal-highlight); border:1px solid color-mix(in srgb,var(--tier-color) 40%,transparent); background:#15120fdd; padding:6px 9px; }
.creature-card .card-region { display:none; }
.creature-card .card-art-tag { top:auto; bottom:10px; right:10px; font-size:8px; color:#e3d9c8; background:#15120fbb; }
.creature-card .card-bottom { margin-top:18px; padding:14px 0 0; border-top:1px solid #6a594533; font-size:9px; flex-wrap:wrap; gap:8px; }
.creature-card .card-bottom span:first-child { color:#a99a84; }
.creature-card .card-bottom span:last-child { font-size:10px; color:var(--metal-light); }

/* Axis icons and labels stay distinct without large ornamental seals. */
.badge-code { display:inline-block; font-weight:700; margin-right:4px; }
.badge-name { display:inline; }
.creature-card .scale-badges { gap:0; margin-top:auto; padding-top:14px; border-top:1px solid #6a594533; }
.creature-card .scale-badge { position:relative; flex-direction:column; align-items:flex-start; text-align:left; justify-content:flex-start; min-height:79px; padding:0 9px; gap:7px; border:0; border-radius:0; background:none; box-shadow:none; clip-path:none; }
.creature-card .scale-badge:first-child { padding-left:0; }
.creature-card .scale-badge:last-child { padding-right:0; }
.creature-card .scale-badge::before { display:none; }
.creature-card .scale-badge + .scale-badge { border-left:1px solid #6a594533; }
.creature-card .scale-badge svg { width:18px; height:18px; flex-basis:18px; filter:none; }
.creature-card .scale-badge small { font-size:8px; letter-spacing:.7px; color:#bbae9b; }
.creature-card .scale-badge strong { margin-top:5px; font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.creature-card .badge-name { font-size:10px; }
.creature-card .badge-code { font-size:9px; }
.creature-card .is-unassessed { color:#b4aa9c; opacity:1; }
.hero-art-name { color:var(--metal-highlight); }
.hero-art-label { background:#18120feb; border:1px solid #9a794760; box-shadow:none; }
.power-spectrum a > span { box-shadow:none; }

/* The guide shows every tier, even those without an assessed creature. */
.power-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.power-gallery .scale-level { display:flex; flex-direction:column; padding:0 0 20px; gap:20px; overflow:visible; border:0; background:none; box-shadow:none; }
.power-gallery .level-emblem { display:none; }
.power-gallery .level-explore { align-self:flex-end; margin-top:auto; }
.tier-preview { position:relative; width:100%; height:230px; margin:10px 0 0; isolation:isolate; overflow:visible; border:0; border-radius:var(--frame-radius); background:#191511; box-shadow:none; }
.tier-preview-copy { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; height:100%; padding:28px 20px; position:relative; z-index:2; background:none; }
.tier-preview-copy > small { font:9px var(--font-body); letter-spacing:2px; color:var(--metal-light); }
.tier-preview-copy > svg { width:30px; height:30px; color:var(--tier-color); filter:none; }
.tier-preview-copy > strong { font:22px var(--font-display); color:var(--metal-highlight); }
.tier-preview-copy > span { font:italic 18px var(--font-accent); color:#b7a993; }
.power-gallery .scale-level > div:not(.tier-preview) { padding-inline:6px; }
.power-gallery .scale-level h3 { font-size:21px; }
.power-gallery .scale-level p { font-size:12px; line-height:1.85; }

@media (max-width:1100px) { .power-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .power-gallery { grid-template-columns:1fr; }
  .creature-card .card-media,.featured-grid .card-media { aspect-ratio:1.1; }
  .creature-card .card-title { font-size:25px; }
  .creature-card .scale-badge strong,.creature-card .badge-name { font-size:11px; }
  .creature-card .scale-badge small { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .creature-card,.creature-card:hover { transition:none; transform:none; }
  .creature-card .card-media img { transition:none; }
}