/* An editable collectible card, built from HTML rather than baked-in artwork. */
html { scrollbar-gutter:stable; }
body.card-popup-open { overflow:hidden; }
.profile-panel { position:relative; }
.profile-card-open { position:absolute;inset:0;z-index:3;border:0;border-radius:inherit;background:transparent;cursor:zoom-in; }
.profile-card-open:focus-visible { outline:3px solid var(--accent);outline-offset:-5px; }
.profile-panel.card-source-hidden { visibility:hidden; }

/* Keep the real card's size and click target while its decorative twin turns. */
.profile-panel.card-hint-active { visibility:hidden; }
.profile-panel.card-hint-active .profile-card-open { visibility:visible; }
.profile-card-hint { position:absolute;pointer-events:none;perspective:1000px;perspective-origin:50% 0; }
.profile-card-hint[hidden] { display:none; }
.profile-hint-rotor { position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:profile-hint-turn 3s linear both; }
.profile-hint-front,.profile-hint-back { position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden; }
.profile-hint-front .profile-panel { width:100%;height:100%;margin:0;transform:none!important;animation:none!important;transition:none!important;translate:none; }
.profile-hint-back { transform:rotate3d(1,1,0,180deg); }
.profile-hint-back .collectible-card { inset:auto;left:0;top:0;width:420px;height:var(--hint-detail-height);transform:scale(var(--hint-detail-scale));transform-origin:top left;overflow:hidden; }
@keyframes profile-hint-turn {
  0% { transform:rotate3d(1,1,0,0deg); }
  100% { transform:rotate3d(1,1,0,360deg); }
}

.card-dialog {
  position:fixed;inset:0;width:100%;height:100%;height:100dvh;
  max-width:none;max-height:none;margin:0;padding:44px 22px;
  border:0;background:transparent;color:var(--ink);overflow:auto;
  overscroll-behavior:contain;perspective:1600px;
}
.card-dialog[open] { display:flex;flex-direction:column; }
.card-dialog::backdrop { background:#0c1828b8;backdrop-filter:blur(7px); }
.card-modal-shell { position:relative;width:min(420px,100%);flex:0 0 auto;margin:auto; }
.card-dialog[data-state="measuring"] .card-modal-shell { visibility:hidden; }
.card-dismiss {
  position:absolute;z-index:5;right:-13px;top:-16px;width:39px;height:39px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink);font:26px/1 'DM Sans',sans-serif;
  cursor:pointer;box-shadow:0 3px 15px #0003;
}
.card-dismiss:hover { background:var(--surface-tint); }
.card-flight { position:relative;aspect-ratio:var(--analyst-card-ratio);transform-origin:center;perspective:1600px; }
.card-flipper { display:grid;position:relative;height:100%;transform-style:preserve-3d;transform:rotateY(180deg); }
.card-face { grid-area:1/1;min-width:0;-webkit-backface-visibility:hidden;backface-visibility:hidden; }
.card-front { position:absolute;inset:0;transform:rotateY(0deg);pointer-events:none; }
.card-front .profile-panel { width:var(--card-source-width);height:var(--card-source-height);margin:0;transform:scale(var(--card-face-scale))!important;transform-origin:top left;animation:none!important;transition:none!important;translate:none; }
.card-dialog-help { margin:18px 0 0;color:#f2f1e7;text-align:center;font:10px/1.7 var(--mono);text-shadow:0 1px 8px #0008; }
.card-dialog-help span { display:block;color:#d1dcd7;font-size:9px; }
.card-dialog[data-state="opening"] .card-flight { animation:card-fly-in 1.15s cubic-bezier(.22,1,.36,1) both; }
.card-dialog[data-state="opening"] .card-flipper { animation:card-turn-in 1.15s cubic-bezier(.45,0,.2,1) both; }
.card-dialog[data-state="closing"] .card-flight { animation:card-fly-out .85s cubic-bezier(.4,0,.4,1) both; }
.card-dialog[data-state="closing"] .card-flipper { animation:card-turn-out .85s cubic-bezier(.4,0,.4,1) both; }
.card-dialog[data-state="opening"]::backdrop { animation:card-veil-in .7s ease both; }
.card-dialog[data-state="closing"]::backdrop { animation:card-veil-out .85s ease both; }
.card-dialog:is([data-state="opening"],[data-state="closing"]) .card-dialog-help { opacity:0; }

.collectible-card {
  --card-metal:var(--button-edge);
  position:absolute;inset:0;min-height:0;isolation:isolate;transform:rotateY(180deg);
  display:flex;flex-direction:column;
  padding:10px;border:7px solid var(--card-metal);border-radius:18px;
  background:linear-gradient(135deg,var(--surface),var(--paper) 45%,var(--surface-tint));
  box-shadow:0 0 0 1px #fff8 inset,0 0 0 1px #70512a,0 20px 80px #0005,0 3px 12px #0004;
  overflow:auto;overscroll-behavior:contain;color:var(--ink);
}
.collectible-card::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(118deg,transparent 0 25px,#fff3 26px,transparent 27px 50px),radial-gradient(ellipse at 5% 0%,#fff9,transparent 50%);
}
.collectible-header,.collectible-body,.collectible-footer { flex-shrink:0; }
.collectible-header { display:flex;align-items:center;gap:10px;padding:2px 3px 11px; }
.collectible-portrait { width:51px;height:54px;flex-shrink:0;padding:3px;background:var(--surface-tint);border:1px solid var(--card-metal);border-radius:11px 5px 11px 5px;box-shadow:0 1px 0 #fff9 inset; }
.collectible-portrait img { display:block;width:100%;height:100%;object-fit:cover;object-position:center 44%;border-radius:7px 2px 7px 2px; }
.collectible-identity { min-width:0;flex:1; }
.collectible-stage { display:block;color:var(--accent);font:700 8px/1.5 var(--mono);letter-spacing:1.5px; }
.collectible-card h2.collectible-name { font:800 italic 34px/.95 var(--display);letter-spacing:-.6px;margin:2px 0 0;overflow-wrap:anywhere; }
.collectible-stat { text-align:right;line-height:1;flex-shrink:0; }
.collectible-stat>span { display:block;font:7px/1.4 var(--mono);letter-spacing:.7px;color:var(--muted); }
.collectible-stat strong { display:block;font:600 33px/1.1 var(--display);color:var(--title); }
.collectible-energy { display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--card-metal);box-shadow:0 0 0 2px var(--surface-tint);font-size:23px;color:var(--accent); }
.collectible-energy::before { content:'';width:12px;height:12px;border:1.5px solid currentColor;background:currentColor;box-shadow:inset 0 0 0 3px var(--surface);transform:rotate(45deg); }

.collectible-artwork { position:relative;margin:0;flex:1;min-height:120px;border:2px solid var(--card-metal);border-radius:4px;overflow:hidden;background:var(--portrait-end); }
.collectible-main-image { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover; }
.collectible-main-video[hidden] { display:none; }
.collectible-artwork::after { content:'';position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 1px #fff5 inset,0 0 24px #19271d24 inset; }
.collectible-ribbon { position:absolute;right:0;top:12px;padding:5px 11px 5px 19px;background:var(--accent);color:var(--button-ink);font:700 8px/1.4 var(--mono);letter-spacing:1.2px;clip-path:polygon(9px 0,100% 0,100% 100%,0 100%); }
.collectible-art-caption { position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(transparent,#17271ee8);color:#fffbea;font:8px/1.5 var(--mono);letter-spacing:.2px; }
.collectible-art-caption [lang="ja"] { letter-spacing:2px;font-size:10px; }
.collectible-body { padding:10px 4px 0; }
.collectible-ability { margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--line); }
.collectible-ability-heading { display:flex;align-items:center;gap:9px; }
.collectible-label { flex-shrink:0;padding:3px 8px;background:var(--accent);color:var(--button-ink);border-radius:3px;font:700 italic 8px/1.4 var(--mono);letter-spacing:.4px; }
.collectible-card h3 { margin:0;font:700 17px/1.2 var(--display);letter-spacing:.2px; }
.collectible-ability>p { margin:6px 0 0;font-size:11px;line-height:1.65;color:var(--secondary-ink); }
.collectible-technique { display:flex;align-items:center;gap:10px;padding:6px 0; }
.collectible-technique-symbol { display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:var(--surface-tint);color:var(--accent);font:20px/1 var(--mono); }
.collectible-technique-copy { flex:1;min-width:0; }
.collectible-technique p { margin:3px 0 0;font-size:10px;line-height:1.5;color:var(--secondary-ink); }
.collectible-technique-tag { font:7px/1.4 var(--mono);color:var(--accent);letter-spacing:.4px;text-align:right; }
.collectible-traits { display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0;padding:7px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.collectible-trait { flex:1;min-width:75px; }
.collectible-trait dt { font:7px/1.5 var(--mono);letter-spacing:.7px;color:var(--muted); }
.collectible-trait dd { margin:3px 0 0;font-size:10px;font-weight:600;line-height:1.4; }
.collectible-motto { margin:9px 0 6px;font-size:9px;font-style:italic;line-height:1.5;color:var(--muted); }
.collectible-card footer.collectible-footer { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 4px 0;background:none;border-top:1px solid var(--line); }
.collectible-footer>span { font:7px/1.4 var(--mono);color:var(--secondary-ink);letter-spacing:.2px; }
.collectible-footer>span:last-child { color:var(--accent);white-space:nowrap; }

@keyframes card-fly-in {
  from { transform:translate(var(--card-origin-x),var(--card-origin-y)) scale(var(--card-origin-scale)) var(--card-origin-pose); }
  to { transform:none; }
}
@keyframes card-turn-in { from { transform:rotateY(0deg); } to { transform:rotateY(180deg); } }
@keyframes card-fly-out {
  from { transform:var(--card-close-from); }
  to { transform:translate(var(--card-origin-x),var(--card-origin-y)) scale(var(--card-origin-scale)) var(--card-origin-pose); }
}
@keyframes card-turn-out { from { transform:var(--card-flip-from); } to { transform:rotateY(0deg); } }
@keyframes card-veil-in { from { background:#0c182800;backdrop-filter:blur(0); } to { background:#0c1828b8;backdrop-filter:blur(7px); } }
@keyframes card-veil-out { from { background:#0c1828b8;backdrop-filter:blur(7px); } to { background:#0c182800;backdrop-filter:blur(0); } }

@media(max-width:480px) {
  .card-dialog { padding:36px 16px; }
  .collectible-card { padding:8px;border-width:6px;border-radius:14px; }
  .collectible-header { gap:8px; }
  .collectible-portrait { width:43px;height:47px; }
  .collectible-card h2.collectible-name { font-size:30px; }
  .collectible-energy { width:23px;height:23px;font-size:19px; }
  .collectible-stat>span { font-size:6px; }
  .collectible-stat strong { font-size:29px; }
  .collectible-technique-tag { display:none; }
  .collectible-art-caption { font-size:7px; }
  .collectible-traits { gap:7px; }
  .collectible-card footer.collectible-footer { flex-wrap:nowrap; }
  .collectible-footer>span { width:auto;order:initial;font-size:6px; }
}
html[data-motion-paused="true"] .card-dialog *,html[data-motion-paused="true"] .card-dialog::backdrop { animation:none!important;transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  .card-dialog *,.card-dialog::backdrop { animation:none!important;transition:none!important; }
}