/* Time-card frame shared by the card gallery, poster creator and deck library.
   Tier colours, hexagon clip, per-layout art cropping and the five metal bezels. */
[data-tier="1"] { --tier: #b6c2d4; --tier-ink: #192532; }
[data-tier="2"] { --tier: #76d9b0; --tier-ink: #0d392a; }
[data-tier="3"] { --tier: #67cafa; --tier-ink: #07384e; }
[data-tier="4"] { --tier: #d6a0ff; --tier-ink: #3c165b; }
[data-tier="5"] { --tier: #f2bd6c; --tier-ink: #57300e; }
.fortune-card-frame { --hex: polygon(50% 0,100% 16%,100% 84%,50% 100%,0 84%,0 16%); display: block; width: 100%; aspect-ratio: 240 / 420; position: relative; clip-path: var(--hex); background: #1a202b; }
.fortune-card-surface { display: block; position: absolute; inset: 0; clip-path: var(--hex); background: #101723; color: #faf8f2; overflow: hidden; }
.fortune-card-image { position: absolute; width: 108%; height: 108%; left: -4%; top: -2%; object-fit: cover; object-position: center top; }
/* Remove baked-in icon rims at display time; source PNGs remain untouched. */
.fortune-art-icon .fortune-card-image { width: 112%; height: auto; aspect-ratio: 326 / 430; left: -6%; top: -8%; clip-path: polygon(50% 7%,93% 28%,93% 72%,50% 93%,7% 72%,7% 28%); mask-image: radial-gradient(ellipse 49% 48% at 50% 50%, #000 60%, transparent 95%); }
.fortune-art-icon { background: radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--tier), #101723 88%), #101723 70%); }
.fortune-card-bezel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* Each tier combines a distinct silhouette, material and engraved motif. */
.fortune-frame-materials { position: absolute; overflow: hidden; pointer-events: none; }
.fortune-bezel-edge { fill: none; stroke: #f5ecda; stroke-width: 1.1; opacity: .85; }
.fortune-bezel-shadow { fill: none; stroke: #142032; stroke-width: 3; }
.fortune-bezel-inlay { fill: none; stroke: var(--tier); stroke-width: 1.4; }
.fortune-bezel-engraving { fill: none; stroke: #d6e2eb; stroke-width: 1; opacity: .65; }
.fortune-bezel-ornament { fill: none; stroke: color-mix(in srgb, var(--tier), #e5cf96 45%); stroke-width: 1.8; }
.fortune-bezel-plate { fill: var(--tier-ink); stroke: color-mix(in srgb, var(--tier), #ecddb6 45%); stroke-width: 1.2; }
.fortune-bezel-crystal { fill: var(--tier); stroke: #f4eacd; stroke-width: .7; opacity: .85; }
.fortune-bezel-prism { fill: url(#fortune-prism); }
.fortune-bezel-gold { fill: #d3b16d; stroke: #ffedb7; stroke-width: .8; }
.fortune-bezel-crown { fill: #54493e; stroke: #e7d3a3; stroke-width: 1.2; }
.fortune-bezel-gem { stroke: var(--tier); stroke-width: .8; }
.fortune-bezel-spark { fill: none; stroke: #fff6d8; stroke-width: 1; opacity: .8; }
.fortune-bezel-seal { fill: #17202c; stroke: color-mix(in srgb, var(--tier), #dbbf7f 50%); stroke-width: 1.5; }
.fortune-bezel-sigil { fill: none; stroke: var(--tier); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fortune-card-frame { --copy-preferred: .57; --copy-top: 50%; }
.fortune-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg,#060d1644,transparent 20%,transparent calc(var(--copy-top) - 14%),#080f1ed9 calc(var(--copy-top) + 6%),#0a1221 86%); }
.fortune-card-stars { position: absolute; top: 10%; left: 0; right: 0; text-align: center; font-size: 18px; letter-spacing: 3px; color: #f2deab; line-height: 1; }
.fortune-card-category { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; color: var(--tier); font-size: 10px; letter-spacing: .2em; }
.fortune-missing { position: absolute; top: 20%; width: 100%; display: grid; text-align: center; color: #e5bf79; font-size: 12px; gap: 10px; }
.fortune-missing i { font-size: 60px; font-style: normal; }