/* FIRST-TIME LEGENDARY+ REVEAL (js/views/legend-reveal.js, Phil 14/11 ~12:10). Every moving value is written by the module
   (transform, opacity, two canvases); nothing here animates by itself, nothing changes layout after the open. */
.legend-reveal { position: fixed; inset: 0; z-index: 200; overflow: hidden; contain: strict; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; color: #f3ede2; }
.legend-reveal > * { position: absolute; }
.lr-dim { inset: 0; background: #000; opacity: 0; }
.lr-stage { inset: 0; overflow: hidden; opacity: 0; background: #000; }
.lr-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; will-change: transform; }
/* the theme's light: the black's last breath over the art while it is cleared, then the scrim that holds the lettering */
.lr-shade { position: absolute; inset: 0; opacity: .7; background: radial-gradient(120% 80% at 50% 38%, transparent 0, rgba(0,0,0,.55) 70%, #000 100%), var(--lr-tint, transparent); }
.lr-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140% 90% at 50% 34%, transparent 45%, rgba(0,0,0,.55) 100%), linear-gradient(to top, rgba(0,0,0,.9) 0, rgba(0,0,0,.55) 24%, transparent 46%); }
.th-ember { --lr-tint: linear-gradient(to top, rgba(160,46,10,.5), transparent 60%); }
.th-frost { --lr-tint: linear-gradient(to bottom, rgba(40,80,120,.45), transparent 70%); }
.th-wave  { --lr-tint: linear-gradient(to right, rgba(20,80,90,.5), transparent 70%); }
.th-mist  { --lr-tint: radial-gradient(90% 60% at 50% 60%, rgba(120,140,110,.35), transparent 70%); }
.th-storm { --lr-tint: linear-gradient(to bottom, rgba(70,80,140,.45), transparent 65%); }
.th-smoke { --lr-tint: radial-gradient(80% 60% at 50% 40%, rgba(60,56,50,.4), transparent 75%); }
.th-viral { --lr-tint: linear-gradient(160deg, rgba(255,79,168,.3), rgba(63,198,255,.2) 50%, transparent 80%); }
.lr-veil, .lr-fx { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lr-grain { inset: -64px; opacity: .06; background-size: 128px 128px; pointer-events: none; will-change: transform; }

/* the card that turns, then comes forward */
.lr-card { left: 50%; top: 50%; --cw: min(54vw, 46vh / 1.5, 240px); width: var(--cw); height: calc(var(--cw) * 1.5); margin: calc(var(--cw) * -.75) 0 0 calc(var(--cw) * -.5);
  perspective: 900px; opacity: 0; will-change: transform; }
.lr-card-in { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.lr-back, .lr-front { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 2px var(--r), 0 0 28px color-mix(in srgb, var(--r) 45%, transparent), 0 18px 40px rgba(0,0,0,.6); }
.rainbow .lr-back, .rainbow .lr-front { box-shadow: 0 0 0 2px #fff4, 0 0 30px rgba(255,79,168,.45), 0 18px 40px rgba(0,0,0,.6); }
.rainbow .lr-back::before, .rainbow .lr-front::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: var(--rg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 3; }
.lr-back { display: flex; align-items: center; justify-content: center; color: var(--r);
  background: radial-gradient(80% 60% at 50% 45%, color-mix(in srgb, var(--r) 22%, #15110c), #07080a 80%), repeating-linear-gradient(45deg, #ffffff06 0 6px, transparent 6px 12px); }
.lr-back .gi { position: relative; width: 38%; height: auto; opacity: .85; filter: drop-shadow(0 0 10px #000); }
/* the back carries the theme before it turns: its own tint under the matter drawn by BACK[theme] (canvas, seeded per card) */
.lr-back-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.th-ember .lr-back { background-color: #120804; background-image: radial-gradient(90% 60% at 50% 100%, rgba(150,40,8,.45), transparent 70%); }
.th-frost .lr-back { background-color: #060b10; background-image: radial-gradient(80% 60% at 50% 40%, rgba(60,100,140,.35), transparent 75%); }
.th-wave  .lr-back { background-color: #04100f; background-image: linear-gradient(to bottom, rgba(20,80,90,.35), transparent 70%); }
.th-mist  .lr-back { background-color: #080c07; background-image: radial-gradient(90% 70% at 40% 60%, rgba(90,110,80,.35), transparent 75%); }
.th-storm .lr-back { background-color: #07081a; background-image: linear-gradient(to bottom, rgba(60,70,150,.4), transparent 70%); }
.th-smoke .lr-back { background-color: #0c0b0a; background-image: radial-gradient(70% 50% at 50% 45%, rgba(80,74,66,.35), transparent 80%); }
.th-viral .lr-back { background-color: #0b0710; background-image: conic-gradient(from 30deg, rgba(255,79,94,.18), rgba(255,225,77,.14), rgba(63,198,255,.18), rgba(255,79,216,.18), rgba(255,79,94,.18)); }
/* the light running over the card as it turns (opacity and offset written by the module from the angle) */
.lr-sheen { position: absolute; inset: 0 -60%; opacity: 0; pointer-events: none; z-index: 5; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255,248,235,.55) 50%, transparent 62%); }
.lr-front { transform: rotateY(180deg); background: #050505; }
.lr-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.lr-front-shade { position: absolute; inset: 0; background: linear-gradient(to top, #000 4%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.84)); }
.lr-gem { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); color: var(--r); }
.lr-gem .gi { width: 30px; height: 30px; filter: drop-shadow(0 0 8px var(--r)); }
.lr-front-rar { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font: 700 15px/1 "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  letter-spacing: .32em; text-transform: uppercase; color: var(--r); }
.rainbow .lr-front-rar, .rainbow .lr-rar-name { background: var(--rg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lr-card-black { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 4; }

/* the lettering: name, title, rarity */
.lr-text { left: 0; right: 0; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 44px); text-align: center; padding: 0 18px; pointer-events: none; }
.lr-name { font: 800 clamp(42px, 14vw, 84px)/.95 "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 1px #000; }
.lr-l { display: inline-block; opacity: 0; will-change: transform, opacity; }
.lr-title { margin-top: 8px; font: 500 italic clamp(16px, 4.6vw, 24px)/1.2 Georgia, "Times New Roman", serif; letter-spacing: .06em; color: #e6dccb; opacity: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.lr-rar { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; --rule: 0;
  font: 700 13px/1 "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; letter-spacing: .34em; text-transform: uppercase; }
.lr-rar-name { color: var(--r); text-shadow: 0 0 12px color-mix(in srgb, var(--r) 60%, transparent); }
.rainbow .lr-rar-name { text-shadow: none; }
.lr-fac { color: #b9b1a3; }
.lr-fac::before { content: '·'; margin-right: 10px; color: #6d675e; }
.lr-rule { display: block; width: 44px; height: 1px; background: linear-gradient(to right, transparent, var(--r)); transform: scaleX(var(--rule)); }
.lr-rule:last-child { background: linear-gradient(to left, transparent, var(--r)); }
/* the character's own line, word by word */
.lr-line { margin-top: 10px; font: italic 400 clamp(13px, 3.6vw, 17px)/1.35 Georgia, "Times New Roman", serif; color: #cfc4b1; letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0,0,0,.95); }
.lr-w { display: inline-block; opacity: 0; will-change: transform, opacity; }
.lr-hint { left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #a39b8e; opacity: 0; pointer-events: none; }

/* prefers-reduced-motion: the same picture and words, faded in, nothing moves */
.legend-reveal.quick .lr-card, .legend-reveal.quick .lr-veil, .legend-reveal.quick .lr-fx, .legend-reveal.quick .lr-grain { display: none; }
.legend-reveal.quick .lr-shade { opacity: 0; }