/**
 * Reference stylesheet for @card/core's `aircraft` variant markup.
 *
 * `renderCard` only builds HTML — it never injects styles — so this file is
 * the class-name contract for that HTML, copied from the reference
 * `3D-modeler` app's `style.css` (its `.card-frame`/`.card-face`/etc. block)
 * with no changes to selectors. Consumers may import it as-is, use it as a
 * starting point, or ignore it and write their own CSS against the same
 * class names.
 *
 * Two tokens (`--ink`, `--dim`) are expected from the host page's theme;
 * this file supplies fallback values scoped to `.card-frame` itself so the
 * card still renders correctly with zero host CSS. Every other custom
 * property (`--tier-color`, `--tier-highlight`, `--tier-glow`) is
 * self-contained, set per rarity tier by the `data-tier` attribute rules
 * below.
 */

/* Aircraft rarity card — standardized to SquawkMap3D's `PlaneCard.tsx`
 * (aircraft-card-fixes): 9-tier taxonomy (`aircraft-rarity.ts`), flippable
 * front (new, this app only) / back (ported layout) faces. */
.card-frame{--ink:#e8def8;--dim:#9a86c4;--tier-color:#64748b;--tier-highlight:#cbd5e1;--tier-glow:#64748b33;perspective:1200px;border-radius:1.3rem;position:relative;width:100%;max-width:280px;aspect-ratio:5/7}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.2,.2,1)}
/* Pure CSS hover flip — ported from https://codepen.io/edeesims/pen/wvpYWW
 * per user request: no JS flip state, so the transition always animates
 * (a JS-toggled class baked into a full re-render never gets to transition
 * from a starting state, since the element is (re)created already in its
 * final state). */
.card-frame:hover .card-inner{transform:rotateY(180deg)}
/* `showBack`: initial face is the back; hover still flips (back to front).
 * `lockCard`: hover no longer flips — held on whichever face is initial. */
.card-frame[data-show-back] .card-inner{transform:rotateY(180deg)}
.card-frame[data-show-back]:hover .card-inner{transform:rotateY(0deg)}
.card-frame[data-locked]:hover .card-inner{transform:rotateY(0deg)}
.card-frame[data-locked][data-show-back]:hover .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:1.3rem;background:linear-gradient(135deg,var(--tier-highlight),color-mix(in srgb,var(--tier-color) 30%,#070b14) 35%,var(--tier-color));padding:2px;overflow:hidden;box-shadow:0 10px 24px #02061747,0 0 18px var(--tier-glow)}
.card-face-back{display:flex;flex-direction:column;transform:rotateY(180deg)}
.card-face-front{display:flex;flex-direction:column;min-height:0}
.card-face-back>.card-content,.card-face-back>.card-glow{border-radius:1.2rem}
.card-content{display:flex;flex-direction:column;position:relative;z-index:1;flex:1;padding:16px;border-radius:1.2rem;background:linear-gradient(145deg,rgb(16,23,32),rgb(8,11,16) 62%,rgb(17,24,39))}
.card-glow{position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:9999px;background:color-mix(in srgb,var(--tier-color) 30%,transparent);filter:blur(52px);pointer-events:none}
.card-header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-identity{position:relative;display:flex;flex-direction:column;min-width:0}
.card-badge{align-self:flex-start;padding:3px 10px;border-radius:9999px;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:900;color:#07101d;background:var(--tier-highlight);text-transform:uppercase}
.card-manufacturer{margin:12px 0 0;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.card-model{margin:3px 0 0;font-size:clamp(14px,5vw,20px);font-weight:900;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Absolutely positioned below the model name — never changes the header's
 * own box height, so its presence/absence doesn't push the art/stat grid
 * down (per user request). */
.card-variant{position:absolute;left:0;top:100%;margin:2px 0 0;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card-art{flex-shrink:0;width:52px;height:52px;color:var(--tier-color)}.card-art svg{width:100%;height:100%;filter:drop-shadow(0 0 3px var(--tier-glow))}
.card-art-large{width:76px;height:76px}
.card-stats-empty{margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--dim);text-align:center}
.stat-grid{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-cell dt{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.stat-cell dd{margin:4px 0 0;font-weight:800;color:var(--ink)}
.stat-cell dd.stat-value-lg{font-size:20px}
.xp-block{margin-top:10px}
.xp-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.xp-value{color:var(--ink)}.tier-label{color:var(--tier-highlight)}
/* XP progress track/fill — shared by the back face's `.xp-block` and the
 * front face's bordered XP panel (`.card-front-xp-panel`). */
.xp-track{position:relative;height:6px;border-radius:9999px;background:color-mix(in srgb,var(--tier-color) 20%,#0a0e16);overflow:hidden}
.xp-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--tier-color),var(--tier-highlight))}
.xp-track.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.15),rgba(255,255,255,.06));background-size:200% 100%;animation:card-skeleton-pulse 1.4s ease-in-out infinite}
.stat-grid.skeleton,.xp-block.skeleton{opacity:.5}
.stat-grid.skeleton span,.xp-block.skeleton span{display:block;height:18px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.15),rgba(255,255,255,.06));background-size:200% 100%;animation:card-skeleton-pulse 1.4s ease-in-out infinite}
/* Back-face credit lines: "added by" (placeholder — no real per-aircraft
 * attribution data exists) and "silhouette by" (the app's own #author).
 * Icon + handle only — the label text lives in `title` (native tooltip),
 * not on the card. */
.card-credits{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px}
.card-credit-line{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.3px}
.card-credit-icon{flex-shrink:0;width:13px;height:13px;display:flex;align-items:center;justify-content:center;color:var(--tier-highlight)}
.card-credit-plus{font-size:12px;font-weight:900;line-height:1;color:var(--tier-color)}
.card-credit-silhouette svg{width:100%;height:100%;color:var(--tier-highlight)}
.card-credit-link{color:var(--tier-highlight);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-credit-link:hover{text-decoration:underline}
.card-credit-unknown{color:var(--dim);font-weight:600}
@keyframes card-skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card-badge-row{position:relative;z-index:2;flex-shrink:0;padding:8px 0 4px;display:flex;justify-content:center;gap:6px}
.card-rarity-badge,.card-tier-badge{padding:6px 10px;border-radius:9999px;font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--tier-highlight);border:1px solid color-mix(in srgb,var(--tier-highlight) 72%,transparent);background:color-mix(in srgb,var(--tier-color) 24%,#060a13);box-shadow:inset 0 1px 0 #ffffff3d,0 0 11px var(--tier-glow)}
.card-rarity-badge::before{content:"◆";margin-right:5px}
.card-tier-badge::before{content:"▲";margin-right:5px}

/* Front face (new — no SquawkMap3D equivalent). `.card-face-front` keeps
 * `.card-face`'s shared 2px gradient-border ring (same as the back); only
 * `.card-front-content` gets the dark inner background/padding, mirroring
 * the back face's `.card-content` — so both faces share one border look. */
.card-front-content{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;padding:16px;background:linear-gradient(145deg,rgb(16,23,32),rgb(8,11,16) 62%,rgb(17,24,39));border-radius:1.2rem}
/* Legibility scrim over the full-bleed 3D art — between the art (z-index 0)
 * and the pills/name text (z-index 2), so the wireframe/grid can fill the
 * whole front face without swallowing the text. */
.card-front-content::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(8,11,16,.82) 0%,rgba(8,11,16,.35) 30%,rgba(8,11,16,.15) 55%,rgba(8,11,16,.55) 100%)}
/* Pills upper-left, manufacturer/name upper-right (same `.card-manufacturer`
 * class/treatment as the back face) — one header row, space-between. */
.card-front-header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.card-front-pills{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.card-front-identity{position:relative;text-align:right;min-width:0}
.card-front-identity .card-variant{left:auto;right:0}
.card-front-identity .card-manufacturer{margin:0}
.card-front-name{margin:3px 0 0;font-size:clamp(13px,4vw,17px);font-weight:900;line-height:1.2;color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* `.card-pill` (not `.pill` — that's an unrelated app-chrome class in the
 * reference app; reusing it silently hid these pills under its own rules). */
.card-pill{padding:4px 9px;border-radius:9999px;font-size:9px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--tier-highlight);border:1px solid color-mix(in srgb,var(--tier-highlight) 60%,transparent);background:color-mix(in srgb,var(--tier-color) 22%,#060a13)}
.card-pill-skeleton{display:inline-block;width:34px;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.18),rgba(255,255,255,.06));background-size:200% 100%;animation:card-skeleton-pulse 1.4s ease-in-out infinite}
/* Full-bleed background art (not a corner thumbnail) — fills the whole
 * front face behind the pills/name, per user request. Sits below the
 * `::before` legibility scrim (z-index 1) and the text (z-index 2). */
.card-front-art{position:absolute;inset:0;z-index:0;color:var(--tier-highlight)}
/* Operator handle — bottom-left of the wireframe frame (`.card-front-content`,
 * not the whole card), linking out to the operator's adsb.win page. */
.card-front-author{position:absolute;left:16px;bottom:12px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--tier-highlight);text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.card-front-author:hover{text-decoration:underline}
.card-front-art canvas,.card-front-art svg{width:100%;height:100%}
.card-front-art.card-front-art-flat svg{filter:drop-shadow(0 0 4px var(--tier-glow));opacity:.55}
/* Flush against the bottom edge, same chrome as the back face's
 * `.card-badge-row`: no own background/border — it sits directly on the
 * shared `.card-face` gradient-border strip, not a floating box. */
.card-front-xp-panel{position:relative;z-index:2;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 12px}
.card-front-xp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.card-front-xp-label{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#07101d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-front-emboss{width:30px;height:30px;flex-shrink:0}
/* Inset/engraved, not embossed: a raised bump reads light-on-its-near-edge,
 * dark-on-its-far-edge (light top-left, shadow bottom-right); a recess
 * reads the opposite — the near (top-left) wall of the cut is in shadow,
 * the far (bottom-right) wall catches a thin rim of light — plus a darker
 * fill so it reads as a hole in the surface, not a distinct raised piece. */
.card-front-emboss svg{width:100%;height:100%;fill:color-mix(in srgb,var(--tier-color) 18%,#05070c);stroke:none;filter:drop-shadow(-1px -1px .5px rgba(0,0,0,.8)) drop-shadow(1px 1px 1px rgba(255,255,255,.35))}
.card-front-grid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;mask-image:radial-gradient(ellipse at center,#000 70%,transparent 100%)}
.card-front-grid::before{content:"";position:absolute;inset:-50%;background-image:linear-gradient(color-mix(in srgb,var(--tier-color) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--tier-color) 55%,transparent) 1px,transparent 1px);background-size:14px 14px;animation:card-grid-slide 6s linear infinite}
@keyframes card-grid-slide{0%{transform:translate(0,0)}100%{transform:translate(14px,14px)}}
@media(prefers-reduced-motion:reduce){.card-front-grid::before{animation:none}.card-inner{transition:none}}

.card-frame[data-tier="unidentified"]{--tier-color:#64748b;--tier-highlight:#cbd5e1;--tier-glow:#64748b33}
.card-frame[data-tier="standard"]{--tier-color:#64748b;--tier-highlight:#cbd5e1;--tier-glow:#94a3b83d}
.card-frame[data-tier="prime"]{--tier-color:#0891b2;--tier-highlight:#67e8f9;--tier-glow:#06b6d46b}
.card-frame[data-tier="remarkable"]{--tier-color:#2563eb;--tier-highlight:#93c5fd;--tier-glow:#3b82f675}
.card-frame[data-tier="exceptional"]{--tier-color:#7c3aed;--tier-highlight:#c4b5fd;--tier-glow:#8b5cf680}
.card-frame[data-tier="epic"]{--tier-color:#db2777;--tier-highlight:#f9a8d4;--tier-glow:#ec489985}
.card-frame[data-tier="legendary"]{--tier-color:#d97706;--tier-highlight:#fde68a;--tier-glow:#f59e0b8f}
.card-frame[data-tier="mythic"] .card-face{background:conic-gradient(from 210deg,#22d3ee,#8b5cf6,#ec4899,#f59e0b,#22d3ee)}
.card-frame[data-tier="mythic"]{--tier-color:#db2777;--tier-highlight:#f0abfc;--tier-glow:#d946ef9e}
.card-frame[data-tier="apex"] .card-face{background:linear-gradient(120deg,#fff,#ecfeff 18%,#bae6fd 46%,#e0e7ff 72%,#fff)}
.card-frame[data-tier="apex"]{--tier-color:#bae6fd;--tier-highlight:#fff;--tier-glow:#cffafed1}
@keyframes card-sheen{0%,55%{background-position:150% 0}to{background-position:-80% 0}}
.card-frame[data-tier="mythic"] .card-face::after,.card-frame[data-tier="apex"] .card-face::after{content:"";z-index:3;position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff85 48%,transparent 55%) 150% 0/240% 100% no-repeat;animation:4s ease-in-out infinite card-sheen}
@media(prefers-reduced-motion:reduce){.card-frame[data-tier="mythic"] .card-face::after,.card-frame[data-tier="apex"] .card-face::after{opacity:0;animation:none}}