/* Card Forge (js/forge.js): forge screen, picker, "+N" badges and frame glow.
   Sizes use --u (1% of the 16:9 frame height, css/landscape.css); never raw vw / vh. */

/* ---------- "+N" badge + glow, usable on any position:relative card box ---------- */
.fg-badge { position: absolute; z-index: 3; left: 6%; top: 4%; min-width: 2.2em; padding: 0.12em 0.42em; border-radius: 0.5em; font: 800 calc(var(--u) * 2.2) / 1.1 'PD Rarity', 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; font-style: normal;
  color: #fff; text-align: center; letter-spacing: 0.02em; pointer-events: none;
  background: linear-gradient(180deg, #ffb347, #e8590c); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 6px rgba(120, 40, 0, 0.45); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.fg-badge.fg-l3, .fg-badge.fg-l4 { background: linear-gradient(180deg, #ff7ab8, #c2185b); box-shadow: 0 2px 8px rgba(194, 24, 91, 0.5); }
.fg-badge.fg-l5 { background: linear-gradient(135deg, #fff6b0, #ffc400 40%, #ff6d00); color: #4a1c00; text-shadow: none; box-shadow: 0 0 10px rgba(255, 196, 0, 0.85); }
/* glow on the card frame: stronger with the level */
.fg-card { --fgc: 255, 140, 40; box-shadow: 0 0 0 2px rgba(var(--fgc), 0.9), 0 0 calc(var(--u) * 1.6) rgba(var(--fgc), 0.65) !important; }
.fg-card.fg-l3, .fg-card.fg-l4 { --fgc: 255, 64, 150; box-shadow: 0 0 0 2px rgba(var(--fgc), 0.95), 0 0 calc(var(--u) * 2.4) rgba(var(--fgc), 0.75) !important; }
.fg-card.fg-l5 { --fgc: 255, 196, 0; box-shadow: 0 0 0 2px rgba(var(--fgc), 1), 0 0 calc(var(--u) * 3.4) rgba(var(--fgc), 0.9), 0 0 calc(var(--u) * 6) rgba(255, 110, 0, 0.45) !important; animation: fgPulse 2.4s ease-in-out infinite; }
@keyframes fgPulse { 50% { box-shadow: 0 0 0 2px rgba(255, 220, 80, 1), 0 0 calc(var(--u) * 4.6) rgba(255, 196, 0, 1), 0 0 calc(var(--u) * 8) rgba(255, 110, 0, 0.55); } }
/* Holo upgrade by level (everywhere a .fg-card shows: Cards grid, card view, forge, battle):
   +3/+4 add a moving shimmer band; +5 adds an animated rainbow-gold foil border on top of the shimmer. */
.fg-card { isolation: isolate; }
.fg-card.fg-l3::before, .fg-card.fg-l4::before, .fg-card.fg-l5::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 210, 240, 0.35) 51%, transparent 60%) 0 0 / 300% 100% no-repeat;
  mix-blend-mode: screen; animation: fgShimmer 3.4s ease-in-out infinite; }
.fg-card.fg-l4::before { animation-duration: 2.6s; }
.fg-card.fg-l5::before { animation-duration: 2.4s; }
/* +5: animated rainbow-gold foil ring (masked to the border). Battle cards with a flair keep their flair ::after. */
.fg-card.fg-l5:not(.flair)::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-sizing: border-box;
  padding: max(2px, calc(var(--u) * 0.5));
  background: conic-gradient(#ffd34d, #ff8a3d, #ff5ca8, #a26bff, #4fc3ff, #5dffb0, #fff36b, #ffd34d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fgHue 3s linear infinite; }
@keyframes fgShimmer { 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }
@keyframes fgHue { to { filter: hue-rotate(360deg); } }
/* collection grid (lobby): the tile already clips, so the glow sits inside its edge */
.cc .fg-badge { font-size: calc(var(--u) * 2); }
/* card view (lobby sheet): bigger badge on the big card */
.big-card .fg-badge { font-size: calc(var(--u) * 3.4); left: 5%; top: 3%; }
.big-card.fg-card { border-radius: 4.6% / 3.3%; }
/* battle: forged cards (PvE only — battle.js marks them) */
.card.field .fg-badge, .card.hand .fg-badge, #myHand .card .fg-badge { font-size: calc(var(--u) * 1.8); left: auto; right: 6%; top: 3%; }
.card.field.fg-card, #myHand .card.fg-card { border-radius: 6%; }
/* deck builder (js/deckbuilder.js): pool tiles (.cc) and deck slots (.slot) */
.slot .fg-badge { font-size: calc(var(--u) * 1.6); }
.slot.fg-card, .cc.fg-card { border-radius: var(--card-r, 4.6% / 3.3%); }
.cc.fg-card.fg-l5 { animation: ccIn 0.3s ease both, fgPulse 2.4s ease-in-out 0.3s infinite; }

/* ---------- card view row (lobby › Cards › card) ---------- */
.fg-cvrow { display: flex; align-items: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 1.6) 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2); background: linear-gradient(90deg, #fff4e6, #ffe7f1); border: 1px solid #ffd2a8; }
.fg-cvrow > div { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.fg-cvrow b { font-size: calc(var(--u) * 2.8); color: #b4400a; }
.fg-cvrow small { font-size: calc(var(--u) * 2.1); color: #6b5a52; }
.fg-cvbtn { flex: none; padding: calc(var(--u) * 1.4) calc(var(--u) * 4); min-height: calc(var(--u) * 7); border: 0; border-radius: 99px; cursor: pointer;
  font: 800 calc(var(--u) * 2.6) 'PD Rarity', 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; color: #fff; background: linear-gradient(180deg, #ff9a3c, #e8590c); box-shadow: 0 3px 0 #a63c05; }
.fg-cvbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a63c05; }

/* ---------- overlay + 16:9 scene ----------
   The scene is the 16:9 game frame (177.78u × 100u). Geometry below is measured on assets/ui/forge/bg.webp:
   the image is drawn 112% wide and shifted left so its anvil sits at x ≈ 72u (left half), leaving the right side
   for the plate. Wider / taller screens see a blurred copy of the same forge around the scene. */
.fg-ov { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; overflow: hidden; background: #160b10;
  font-family: 'PD Rarity', 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; color: #fff; animation: fgFade 0.22s ease both; }
.fg-ov::before { content: ''; position: absolute; inset: -24px; background: url('../assets/ui/forge/bg.webp') center / cover; filter: blur(10px) brightness(0.45) saturate(1.1); }
.fg-ov.hidden { display: none; }
@keyframes fgFade { from { opacity: 0; } }
.fg-scene { position: relative; width: calc(var(--fh) * 16 / 9); height: var(--fh); overflow: hidden; isolation: isolate; box-shadow: 0 0 calc(var(--u) * 6) rgba(0, 0, 0, 0.7); }
.fg-bgimg { position: absolute; left: calc(var(--u) * -28.9); top: calc(var(--u) * -5.55); width: calc(var(--u) * 199.1); height: calc(var(--u) * 111.1); z-index: 0;
  background: url('../assets/ui/forge/bg.webp') center / 100% 100% no-repeat; }
.fg-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 40% 50%, transparent 45%, rgba(20, 6, 24, 0.55) 80%, rgba(10, 2, 14, 0.85)),
    linear-gradient(90deg, transparent 52%, rgba(14, 6, 18, 0.45) 62%, rgba(14, 6, 18, 0.6)); }
.fg-fire { position: absolute; z-index: 1; left: calc(var(--u) * -10.5); top: calc(var(--u) * 31.7); width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 170, 60, 0.55), rgba(255, 110, 20, 0.22) 40%, transparent 68%); mix-blend-mode: screen; animation: fgFlicker 2.3s ease-in-out infinite; }
@keyframes fgFlicker { 0%, 100% { opacity: 0.75; transform: scale(1); } 18% { opacity: 1; transform: scale(1.05); } 33% { opacity: 0.7; } 52% { opacity: 0.95; transform: scale(0.98); } 70% { opacity: 0.8; transform: scale(1.04); } 84% { opacity: 1; } }
.fg-anvilglow { position: absolute; z-index: 1; left: calc(var(--u) * 47.4); top: calc(var(--u) * 56); width: calc(var(--u) * 50); height: calc(var(--u) * 24); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 200, 110, 0.5), rgba(255, 140, 40, 0.15) 45%, transparent 70%); mix-blend-mode: screen; animation: fgFlicker 3.1s ease-in-out infinite reverse; }
.fg-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fg-embers i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--u) * 0.7 * var(--s)); height: calc(var(--u) * 0.7 * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, #ffb347 45%, rgba(255, 110, 20, 0) 70%); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 150, 40, 0.9); opacity: 0;
  animation: fgEmber var(--t) linear var(--d) infinite; }
@keyframes fgEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 70% { opacity: 0.8; } 100% { transform: translate(calc(var(--u) * var(--dx)), calc(var(--u) * -48)); opacity: 0; } }

/* ---------- header: round buttons, title plaque, wallet chips ---------- */
.fg-top { position: absolute; z-index: 8; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 2.4); display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.fg-round { flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #5a3416;
  background: linear-gradient(180deg, #fff, #f1e3c8); box-shadow: 0 calc(var(--u) * 0.5) 0 #b98a4a, 0 calc(var(--u) * 0.8) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.45), inset 0 0 0 calc(var(--u) * 0.35) #ffd58a; }
.fg-round svg { width: 46%; height: 46%; }
.fg-round:active { transform: translateY(calc(var(--u) * 0.4)); box-shadow: 0 calc(var(--u) * 0.1) 0 #b98a4a, inset 0 0 0 calc(var(--u) * 0.35) #ffd58a; }
.fg-plaque { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.9) calc(var(--u) * 3.4) calc(var(--u) * 0.9) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(180deg, #6b3a1c, #3d1f0e); box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #e7b55a, inset 0 0 0 calc(var(--u) * 0.6) #5a2f12, 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(0, 0, 0, 0.5); }
.fg-plaque svg { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.fg-plaque b { font-size: calc(var(--u) * 3.6); letter-spacing: 0.02em; background: linear-gradient(180deg, #fff6d0, #ffc24d 60%, #e08a1e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(60, 20, 0, 0.8)); }
.fg-wallet { margin-left: auto; display: flex; gap: calc(var(--u) * 1.4); }
.fg-cur { display: flex; align-items: center; gap: calc(var(--u) * 0.8); height: calc(var(--u) * 6.4); padding: 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 0.6); border-radius: 99px;
  background: rgba(255, 255, 255, 0.94); color: #23314d; box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.35); }
.fg-cur img { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); object-fit: contain; }
.fg-cur b { font-size: calc(var(--u) * 2.8); }

/* ---------- the card over the anvil ---------- */
.fg-float { position: absolute; z-index: 4; left: calc(var(--u) * 72.4); top: calc(var(--u) * 6); transform: translateX(-50%); animation: fgBob 3.6s ease-in-out infinite; }
@keyframes fgBob { 50% { transform: translate(-50%, calc(var(--u) * -1.4)); } }
.fg-shadow { position: absolute; z-index: 3; left: calc(var(--u) * 72.4); top: calc(var(--u) * 63.6); width: calc(var(--u) * 30); height: calc(var(--u) * 3.4); transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20, 6, 0, 0.6), transparent 70%); animation: fgShadow 3.6s ease-in-out infinite; }
@keyframes fgShadow { 50% { transform: translateX(-50%) scale(0.86); opacity: 0.7; } }
.fg-cardwrap { position: relative; height: calc(var(--u) * 56); aspect-ratio: 367 / 512; border-radius: 4.6% / 3.3%; transform-origin: 50% 90%;
  filter: drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 170, 70, 0.55)); }
.fg-cardwrap::selection { background: none; }
.fg-cardimg { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; box-shadow: 0 0 0 calc(var(--u) * 0.3) rgba(255, 214, 140, 0.7); }
.fg-cardwrap .fg-badge { font-size: calc(var(--u) * 3.4); }
.fg-crack { position: absolute; inset: 0; z-index: 5; border-radius: inherit; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M48 0 L54 30 L44 46 L58 62 L47 84 L60 104 L50 140' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M54 30 L74 38 M44 46 L24 50 M58 62 L80 70 M47 84 L28 96' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); }
.fg-rainbow { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 90, 170, 0.7) 38%, rgba(255, 220, 90, 0.75) 44%, rgba(110, 255, 190, 0.7) 50%, rgba(100, 170, 255, 0.7) 56%, rgba(190, 120, 255, 0.65) 62%, transparent 70%) 0 0 / 300% 100% no-repeat; }

/* ---------- hammer + sparks ---------- */
/* pivot = the handle end (right centre) at (110u, 60u); the head lands on the card / anvil at rotate(0). */
.fg-hammer { position: absolute; z-index: 6; left: calc(var(--u) * 70); top: calc(var(--u) * 53.3); width: calc(var(--u) * 40); height: calc(var(--u) * 13.4); pointer-events: none;
  transform-origin: 100% 50%; transform: rotate(65deg); opacity: 0; transition: opacity 0.2s; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1) rgba(0, 0, 0, 0.55)); }
.fg-hammer svg { width: 100%; height: 100%; display: block; }
.fg-screen.forging .fg-hammer { opacity: 1; }
.fg-screen.win .fg-hammer, .fg-screen.fail .fg-hammer { opacity: 0; }
.fg-screen.strike .fg-hammer { animation: fgStrike 0.42s cubic-bezier(.55, 0, .75, .4) both; }
@keyframes fgStrike { 0% { transform: rotate(65deg); } 55% { transform: rotate(-5deg); } 68% { transform: rotate(3deg); } 100% { transform: rotate(65deg); } }
.fg-screen.strike .fg-cardwrap { animation: fgThud 0.42s ease both; }
@keyframes fgThud { 0%, 50% { transform: none; } 60% { transform: scale(0.97, 0.93); filter: brightness(1.9) drop-shadow(0 0 calc(var(--u) * 3) #ffb347); } 100% { transform: none; } }
.fg-sparks { position: absolute; z-index: 7; left: calc(var(--u) * 74); top: calc(var(--u) * 62); width: 0; height: 0; pointer-events: none; }
.fg-sparks i { position: absolute; left: 0; top: 0; width: calc(var(--u) * 0.8); height: calc(var(--u) * 2.8); margin: calc(var(--u) * -1.4) 0 0 calc(var(--u) * -0.4); border-radius: 99px;
  background: linear-gradient(180deg, #fff, #ffd54a 40%, #ff6d00); box-shadow: 0 0 6px #ffb300; transform: rotate(var(--a)) translateY(0); animation: fgSpark var(--t) ease-out forwards; }
.fg-sparks i.big { width: calc(var(--u) * 1.1); height: calc(var(--u) * 3.8); }
@keyframes fgSpark { to { transform: rotate(var(--a)) translateY(calc(var(--u) * var(--d) * -1)); opacity: 0; } }
/* charge-up: the card heats up before the hammer falls */
.fg-screen.charge .fg-cardwrap { animation: fgCharge 0.55s ease-in both; }
@keyframes fgCharge { to { filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 calc(var(--u) * 3) #ffb347); } }
.fg-screen.charge .fg-anvilglow { animation: fgHot 0.55s ease-in both; }
@keyframes fgHot { to { opacity: 1; transform: scale(1.25); } }
.fg-screen.shake .fg-bgimg, .fg-screen.shake .fg-float, .fg-screen.shake .fg-shadow { animation-name: fgQuake; animation-duration: 0.28s; animation-timing-function: ease; }
@keyframes fgQuake { 0%, 100% { translate: 0 0; } 20% { translate: calc(var(--u) * -0.8) calc(var(--u) * 0.5); } 45% { translate: calc(var(--u) * 0.7) calc(var(--u) * -0.4); } 70% { translate: calc(var(--u) * -0.4) calc(var(--u) * 0.3); } }

/* ---------- result banners ---------- */
.fg-banner { position: absolute; z-index: 9; left: calc(var(--u) * 72.4); top: calc(var(--u) * 30); width: 0; height: 0; pointer-events: none; transition: opacity 0.4s; }
.fg-banner.out { opacity: 0; }
.fg-bn { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap;
  min-width: calc(var(--u) * 52); padding: calc(var(--u) * 2) calc(var(--u) * 8); animation: fgBanner 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fgBanner { from { transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); opacity: 0; } }
.fg-bn b { position: relative; z-index: 1; font-size: calc(var(--u) * 7.2); font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
.fg-bn span { position: relative; z-index: 1; margin-top: calc(var(--u) * 0.6); font-size: calc(var(--u) * 2.4); font-weight: 700; }
.fg-bn.win { background: linear-gradient(180deg, #ffe07a, #f6a91f 55%, #c96a08); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  filter: drop-shadow(0 calc(var(--u) * 0.8) 0 #7a3a00) drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 200, 60, 0.8)); }
.fg-bn.win b { color: #fff; text-shadow: 0 calc(var(--u) * 0.5) 0 #a3480a, 0 0 calc(var(--u) * 2) rgba(255, 255, 255, 0.6); }
.fg-rays { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 90); height: calc(var(--u) * 90); margin: calc(var(--u) * -45) 0 0 calc(var(--u) * -45); z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 120, 0.55) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%); mask: radial-gradient(circle, #000 15%, transparent 68%); animation: fgRays 7s linear infinite; }
@keyframes fgRays { to { transform: rotate(360deg); } }
.fg-bn.win { overflow: visible; }
.fg-bn.fail { background: linear-gradient(180deg, #8d8f99, #5a5c66 55%, #3a3b42); clip-path: polygon(2% 8%, 30% 0, 58% 6%, 100% 0, 97% 55%, 100% 100%, 64% 94%, 40% 100%, 0 96%, 3% 48%);
  filter: drop-shadow(0 calc(var(--u) * 0.8) 0 #22232a); }
.fg-bn.fail::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M70 0 L82 22 L74 34 L90 60 M130 0 L122 18 L136 30 M30 60 L40 42 L34 30' fill='none' stroke='%23222' stroke-width='2.5'/%3E%3C/svg%3E") center / 100% 100%; opacity: 0.7; }
.fg-bn.fail b { color: #ff5a4f; text-shadow: 0 calc(var(--u) * 0.5) 0 #3a0a08; }
.fg-bn.fail span { color: #f1f1f4; }
.fg-confetti { position: absolute; left: 0; top: 0; }
.fg-confetti i { position: absolute; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.8); background: var(--c); border-radius: 2px; animation: fgConf var(--t) cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fgConf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(calc(var(--u) * var(--x)), calc(var(--u) * (var(--y) + 60))) rotate(var(--r)); opacity: 0; } }
/* success / fail states on the card */
.fg-screen.win:not(.settled) .fg-cardwrap { animation: fgPop 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
.fg-screen.win:not(.settled) .fg-rainbow { animation: fgRainbow 1.1s ease-out both; }
@keyframes fgRainbow { 0% { opacity: 1; background-position: 140% 0; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -50% 0; } }
.fg-screen.win .fg-cardwrap .fg-badge { animation: fgPop 0.6s 0.15s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes fgPop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
.fg-screen.fail:not(.settled) .fg-crack { animation: fgCrack 1.6s ease both; }
@keyframes fgCrack { 0% { opacity: 0; } 12%, 100% { opacity: 1; } }
.fg-screen.fail:not(.settled) .fg-cardwrap { animation: fgShake 0.5s ease both; filter: grayscale(0.5) brightness(0.7); }
@keyframes fgShake { 0%, 100% { transform: none; } 15% { transform: translateX(-5%) rotate(-3deg); } 30% { transform: translateX(5%) rotate(3deg); } 45% { transform: translateX(-4%) rotate(-2deg); } 60% { transform: translateX(3%) rotate(1deg); } 75% { transform: translateX(-1%); } }
.fg-fly { position: fixed; z-index: 30; margin: 0; display: grid; place-items: center; pointer-events: none; }

/* ---------- the ornate plate ---------- */
.fg-plate { position: absolute; z-index: 5; left: calc(var(--u) * 100); right: calc(var(--u) * 3.4); top: calc(var(--u) * 14.5); bottom: calc(var(--u) * 3);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.3); padding: calc(var(--u) * 5.6) calc(var(--u) * 3.6) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 2.4);
  background: repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.025) 0 calc(var(--u) * 0.4), transparent calc(var(--u) * 0.4) calc(var(--u) * 1.6)),
    radial-gradient(ellipse at 50% 0%, #5a3320, #2e1a10 55%, #1d100a);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) #e8b85c, inset 0 0 0 calc(var(--u) * 0.75) #6a3c18, inset 0 0 0 calc(var(--u) * 0.95) rgba(255, 210, 120, 0.4),
    inset 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.5), 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(0, 0, 0, 0.6); }
.fg-cn { position: absolute; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); transform: rotate(45deg); border-radius: calc(var(--u) * 0.5);
  background: radial-gradient(circle at 35% 35%, #fff5c8, #f0b43c 45%, #8a5310); box-shadow: 0 0 0 calc(var(--u) * 0.3) #4a2a0c, 0 0 calc(var(--u) * 1.2) rgba(255, 190, 80, 0.6); }
.fg-cn.tl { left: calc(var(--u) * -1); top: calc(var(--u) * -1); } .fg-cn.tr { right: calc(var(--u) * -1); top: calc(var(--u) * -1); }
.fg-cn.bl { left: calc(var(--u) * -1); bottom: calc(var(--u) * -1); } .fg-cn.br { right: calc(var(--u) * -1); bottom: calc(var(--u) * -1); }
.fg-ribbon { position: absolute; left: 50%; top: calc(var(--u) * -3.4); transform: translateX(-50%); width: 86%; height: calc(var(--u) * 7.4); display: grid; place-items: center; padding: 0 calc(var(--u) * 6);
  background: linear-gradient(180deg, #d7354f, #9c1631 60%, #6e0c22); clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 #3c0612); }
.fg-ribbon::before { content: ''; position: absolute; inset: calc(var(--u) * 0.6) 5.5%; border-top: calc(var(--u) * 0.25) solid rgba(255, 220, 140, 0.8); border-bottom: calc(var(--u) * 0.25) solid rgba(255, 220, 140, 0.8); }
.fg-ribbon b { position: relative; font-size: calc(var(--u) * 3.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  color: #fff3c8; text-shadow: 0 calc(var(--u) * 0.35) 0 #5a0816; }
.fg-socks { display: flex; justify-content: center; gap: calc(var(--u) * 2); }
.fg-sock { position: relative; width: calc(var(--u) * 6); height: calc(var(--u) * 6); display: grid; place-items: center; border-radius: 50%; font-style: normal;
  background: radial-gradient(circle at 50% 40%, #1a0f0a, #3b2416 70%); box-shadow: inset 0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 0, 0, 0.8), 0 0 0 calc(var(--u) * 0.4) #b9853a, 0 0 0 calc(var(--u) * 0.7) #4a2a0c; }
.fg-sock b { font-size: calc(var(--u) * 2); color: rgba(255, 255, 255, 0.25); }
.fg-sock.lit { background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--gc) 35%, color-mix(in srgb, var(--gc) 50%, #000) 100%);
  box-shadow: 0 0 calc(var(--u) * 2) var(--gc), 0 0 0 calc(var(--u) * 0.4) #f3c768, 0 0 0 calc(var(--u) * 0.7) #4a2a0c; }
.fg-sock.lit b { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.fg-sock.next { animation: fgSock 1.3s ease-in-out infinite; }
@keyframes fgSock { 50% { box-shadow: inset 0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 0, 0, 0.8), 0 0 0 calc(var(--u) * 0.4) #ffe08a, 0 0 calc(var(--u) * 2) #ffc24d; } }
.fg-sock.pop { animation: fgSockPop 0.5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes fgSockPop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
.fg-stats { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 1) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.6); background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.18); }
.fg-srow { display: grid; grid-template-columns: calc(var(--u) * 3.6) minmax(0, 1fr) auto auto auto calc(var(--u) * 6.6); align-items: center; column-gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.5); min-height: calc(var(--u) * 4.2); }
.fg-sic svg { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); display: block; }
.fg-sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffe9c4; }
.fg-srow b { min-width: calc(var(--u) * 5); text-align: right; font-size: calc(var(--u) * 2.8); }
.fg-srow b.up { color: #8dff7a; text-shadow: 0 0 calc(var(--u) * 1) rgba(120, 255, 100, 0.5); }
.fg-arr { font-style: normal; color: #ffc24d; font-weight: 800; font-size: calc(var(--u) * 3); }
.fg-gain { justify-self: start; font-style: normal; padding: 0 calc(var(--u) * 0.9); border-radius: 99px; font-size: calc(var(--u) * 1.9); font-weight: 800; color: #0f3a10; background: linear-gradient(180deg, #b9ff9a, #5fd54a); }
.fg-mid { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.fg-dial { flex: none; --dc: #ffd24d; position: relative; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--dc) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); box-shadow: 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--dc) 50%, transparent), 0 0 0 calc(var(--u) * 0.4) #b9853a; }
.fg-dial.hi { --dc: #6dff8c; } .fg-dial.mid { --dc: #ffd24d; } .fg-dial.lo { --dc: #ff7a4d; }
.fg-dial > div { width: 78%; height: 78%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #4a2b1a, #1c0f08); box-shadow: inset 0 0 0 calc(var(--u) * 0.3) rgba(255, 210, 120, 0.4); }
.fg-dial b { font-size: calc(var(--u) * 4); color: var(--dc); line-height: 1; text-shadow: 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--dc) 60%, transparent); }
.fg-dial small { font-size: calc(var(--u) * 1.7); color: #ffe9c4; opacity: 0.85; }
.fg-mats { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.fg-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 0.8); }
.fg-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--u) * 0.8); min-height: calc(var(--u) * 7); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2);
  border: 0; border-radius: calc(var(--u) * 1.8); cursor: pointer; text-align: left; font: inherit; color: #3a2410;
  background: linear-gradient(180deg, #fff8e8, #f0dcb4); box-shadow: 0 calc(var(--u) * 0.5) 0 #a57a3c, inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.8); opacity: 0.6; transition: opacity 0.15s, transform 0.1s; }
.fg-chip .fg-tok { grid-row: span 2; }
.fg-chip b { font-size: calc(var(--u) * 2.4); line-height: 1.1; }
.fg-chip small { font-size: calc(var(--u) * 1.7); opacity: 0.8; white-space: nowrap; }
.fg-chip small i, .fg-cvrow i, .fg-tile small i, .fg-readyn b { font-style: normal; }
.fg-chip.on { opacity: 1; background: linear-gradient(180deg, #fff3c0, #ffc94a); box-shadow: 0 calc(var(--u) * 0.5) 0 #b06d0c, 0 0 0 calc(var(--u) * 0.4) #fff, 0 0 calc(var(--u) * 2.2) rgba(255, 200, 60, 0.85); }
.fg-chip.short.on { background: linear-gradient(180deg, #ffd9d4, #ff9b8f); box-shadow: 0 calc(var(--u) * 0.5) 0 #a3332a, 0 0 0 calc(var(--u) * 0.4) #fff; }
.fg-chip:active { transform: translateY(calc(var(--u) * 0.4)); }
.fg-or { font-style: normal; font-size: calc(var(--u) * 1.8); font-weight: 800; color: #ffd58a; text-transform: uppercase; }
.fg-tok { display: inline-block; flex: none; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); background: center / contain no-repeat; }
.fg-tok.dust { background-image: url('../assets/ui/res/stardust.webp'); }
.fg-tok.coin { background-image: url('../assets/icons/coins.webp'); }
.fg-tok.copy { width: calc(var(--u) * 3.3); border-radius: 3px; background: #1d2a5c url('../assets/ui/card-back-r1.svg') center / cover; box-shadow: 0 0 0 1px #fff, 2px 2px 0 rgba(0, 0, 0, 0.3); transform: rotate(-8deg); }
.fg-cost { display: flex; gap: calc(var(--u) * 1); }
.fg-coin { flex: 1 1 0; display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4) calc(var(--u) * 0.5) calc(var(--u) * 0.6); border-radius: 99px;
  background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.35); }
.fg-coin b { font-size: calc(var(--u) * 2.6); }
.fg-coin.short { box-shadow: inset 0 0 0 calc(var(--u) * 0.3) #ff6b5a; } .fg-coin.short b { color: #ff9b8f; }
.fg-fine { margin: 0; font-size: calc(var(--u) * 1.8); color: #ffe0b2; opacity: 0.75; text-align: center; }
.fg-maxed { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.4); }
.fg-maxed b { font-size: calc(var(--u) * 6); background: linear-gradient(180deg, #fff6c8, #ffc24d 50%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #5a2a00); }
.fg-maxed span { font-size: calc(var(--u) * 2.2); color: #ffe9c4; }
.fg-why { margin: 0; font-size: calc(var(--u) * 1.9); color: #ffb3a6; line-height: 1.3; text-align: center; }
.fg-deckname { color: #ffe0b2; }
/* the big gold FORGE button */
.fg-go { margin-top: auto; flex: none; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); min-height: calc(var(--u) * 10); border: 0; border-radius: calc(var(--u) * 2.6); cursor: pointer;
  font: 900 calc(var(--u) * 4) 'PD Rarity', 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-shadow: 0 calc(var(--u) * 0.4) 0 #8a3c00;
  background: linear-gradient(180deg, #fff1a8 0%, #ffc531 30%, #f29111 70%, #d36a05 100%);
  box-shadow: 0 calc(var(--u) * 1) 0 #8a4300, 0 calc(var(--u) * 1.4) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.5), inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.7), inset 0 0 0 calc(var(--u) * 0.3) #fff2b0;
  transition: transform 0.08s, box-shadow 0.08s; }
.fg-go svg { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(90, 30, 0, 0.6)); }
.fg-go b { padding: 0 calc(var(--u) * 1.2); border-radius: 99px; background: rgba(120, 50, 0, 0.35); font-size: calc(var(--u) * 3.2); }
.fg-go.ready { animation: fgGoPulse 1.6s ease-in-out infinite; }
@keyframes fgGoPulse { 50% { box-shadow: 0 calc(var(--u) * 1) 0 #8a4300, 0 0 calc(var(--u) * 4) rgba(255, 200, 60, 0.95), inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.7), inset 0 0 0 calc(var(--u) * 0.3) #fff2b0; } }
.fg-go:active:not(:disabled):not([aria-disabled]) { transform: translateY(calc(var(--u) * 0.8)); box-shadow: 0 calc(var(--u) * 0.2) 0 #8a4300, inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.7); }
.fg-go:disabled, .fg-go[aria-disabled] { cursor: default; animation: none; color: #e4e4ea; text-shadow: 0 calc(var(--u) * 0.3) 0 #2a2a33; filter: grayscale(1) brightness(0.7);
  box-shadow: 0 calc(var(--u) * 1) 0 #2c2c33, inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.3); }
.fg-note { margin: 0; font-size: calc(var(--u) * 1.65); line-height: 1.3; color: #ffe0b2; opacity: 0.7; text-align: center; }
.fg-toast { position: absolute; left: calc(var(--u) * 72.4); top: calc(var(--u) * 13); z-index: 20; max-width: calc(var(--u) * 80); padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: 99px; transform: translate(-50%, -40%); opacity: 0;
  background: rgba(20, 8, 4, 0.88); box-shadow: 0 0 0 1px rgba(255, 180, 90, 0.5); font-size: calc(var(--u) * 2.3); text-align: center; transition: transform 0.25s, opacity 0.25s; pointer-events: none; }
.fg-toast.show { transform: translate(-50%, 0); opacity: 1; }
.fg-ov #fxLayer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }

/* catalyst slot: type stone (+15%) / Rare Candy (sure success); Mega Stone line when required */
.fg-cats { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; }
.fg-catl { flex: none; font-size: calc(var(--u) * 1.7); font-weight: 800; color: #ffd58a; text-transform: uppercase; }
.fg-cat { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 1) calc(var(--u) * 0.4) calc(var(--u) * 0.5); border: 0; border-radius: calc(var(--u) * 1.4); cursor: pointer; font: inherit; text-align: left; color: #ffe9c4;
  background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.35); }
.fg-cat .fg-itm { grid-row: span 2; }
.fg-catn { font-size: calc(var(--u) * 1.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-cat em { font-style: normal; font-size: calc(var(--u) * 1.8); font-weight: 800; color: #8dff7a; }
.fg-cat i:last-child { grid-column: 2 / span 2; font-style: normal; font-size: calc(var(--u) * 1.6); opacity: 0.7; }
.fg-cat.on { color: #3a2410; background: linear-gradient(180deg, #e8fff0, #8df0b0); box-shadow: 0 0 0 calc(var(--u) * 0.3) #fff, 0 0 calc(var(--u) * 2) rgba(120, 255, 170, 0.8); }
.fg-cat.on em { color: #0f5a2a; }
.fg-cat:disabled { cursor: default; opacity: 0.4; }
.fg-itm { display: inline-block; flex: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); object-fit: contain; }
.fg-itm.ph { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.fg-itm.ph.stone { border-radius: 40% 60% 45% 55%; background: radial-gradient(circle at 35% 30%, #fff, #7fe0ff 35%, #2a6fb8 80%); }
.fg-itm.ph.candy { background: radial-gradient(circle at 35% 30%, #fff, #c9a0ff 35%, #6b3fc0 80%); }
.fg-itm.ph.mega { background: conic-gradient(#ff5ca8, #ffd34d, #5dffb0, #4fc3ff, #b46bff, #ff5ca8); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.6); }
.fg-mega { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.2); border-radius: 99px; font-size: calc(var(--u) * 1.8); color: #ffe9c4;
  background: rgba(180, 107, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(200, 150, 255, 0.6); }
.fg-mega b { margin-left: auto; color: #d6b4ff; } .fg-mega i:last-child { font-style: normal; opacity: 0.75; }
.fg-mega.short { background: rgba(255, 82, 82, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 110, 110, 0.7); } .fg-mega.short b { color: #ff9b8f; }
.fg-dial.boost { box-shadow: 0 0 calc(var(--u) * 3) rgba(120, 255, 170, 0.8), 0 0 0 calc(var(--u) * 0.4) #8df0b0; }

/* ---------- picker ---------- */
.fg-plate.wide { left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * 14); padding: calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 2); gap: calc(var(--u) * 1.6);
  background: repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.025) 0 calc(var(--u) * 0.4), transparent calc(var(--u) * 0.4) calc(var(--u) * 1.6)), linear-gradient(180deg, rgba(58, 32, 20, 0.92), rgba(24, 12, 8, 0.94)); }
.fg-lead { font-size: calc(var(--u) * 2.3); color: #ffe9c4; }
.fg-readyn { white-space: nowrap; margin-left: calc(var(--u) * 1); color: #8dff7a; font-weight: 700; }
.fg-pve { display: inline-block; margin-left: calc(var(--u) * 1); padding: 0 calc(var(--u) * 1.4); border-radius: 99px; background: rgba(255, 171, 64, 0.2); color: #ffd180; font-size: calc(var(--u) * 1.9); }
.fg-grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 18), 1fr)); gap: calc(var(--u) * 2); padding: calc(var(--u) * 0.8) calc(var(--u) * 0.6) calc(var(--u) * 2); align-content: start; }
.fg-tile { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 0.5); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: left; font: inherit; border-radius: calc(var(--u) * 1.2); }
.fg-tart { position: relative; display: block; aspect-ratio: 367 / 512; border-radius: 4.6% / 3.3%; overflow: hidden; background: #1d2a5c url('../assets/ui/card-back-r1.svg') center / cover; transition: transform 0.15s; box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.5); }
.fg-tart.fg-card { box-shadow: 0 0 0 2px rgba(var(--fgc), 0.95), 0 0 calc(var(--u) * 1.8) rgba(var(--fgc), 0.7); }
.fg-tile:hover .fg-tart { transform: translateY(-3px); }
.fg-tart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-tile:not(.ready):not(.max) .fg-tart img { filter: saturate(0.55) brightness(0.75); }
.fg-tile b { font-size: calc(var(--u) * 2.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff3dc; }
.fg-tile small { font-size: calc(var(--u) * 1.9); opacity: 0.7; }
.fg-tile.ready small { color: #8dff7a; opacity: 1; font-weight: 700; }
.fg-tile.max small { color: #ffe066; opacity: 1; font-weight: 700; }
.fg-empty { padding: calc(var(--u) * 6); text-align: center; opacity: 0.85; font-size: calc(var(--u) * 2.6); color: #ffe9c4; }

/* lobby › More hub tile */
.tile.t-forge img { filter: hue-rotate(-20deg) saturate(1.3); }

@media (prefers-reduced-motion: reduce) {
  .fg-card.fg-l5, .fg-card::before, .fg-card::after, .fg-ov, .fg-scene *, .fg-scene *::before, .fg-scene *::after { animation: none !important; }
  .fg-embers { display: none; }
  .fg-screen.fail:not(.settled) .fg-crack { opacity: 0.8; }
}

/* ---------- Evolution Forge: the cards a Pokémon can become ---------- */
.fg-into { margin: 0; text-align: center; font-size: calc(var(--u) * 1.8); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd58a; }
.fg-evos { flex: none; display: flex; gap: calc(var(--u) * 1.2); overflow-x: auto; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.4) calc(var(--u) * 1); scrollbar-width: thin; }
.fg-evo { position: relative; flex: none; width: calc(var(--u) * 13); display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); padding: calc(var(--u) * 0.6); border: 0; border-radius: calc(var(--u) * 1.4);
  cursor: pointer; font: inherit; text-align: left; color: #ffe9c4; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.25); opacity: 0.75; transition: opacity 0.15s, transform 0.15s; }
.fg-evo:hover { opacity: 1; transform: translateY(-2px); }
.fg-evo.on { opacity: 1; background: rgba(255, 200, 80, 0.18); box-shadow: 0 0 0 calc(var(--u) * 0.35) #ffd24d, 0 0 calc(var(--u) * 2) rgba(255, 200, 60, 0.6); }
.fg-evo.full { opacity: 0.45; }
.fg-evart { display: block; aspect-ratio: 367 / 512; border-radius: 4.6% / 3.3%; overflow: hidden; background: #1d2a5c; }
.fg-evart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-evo b { font-size: calc(var(--u) * 1.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff3dc; }
.fg-evo small { font-size: calc(var(--u) * 1.5); opacity: 0.85; white-space: nowrap; }
.fg-evo small i { font-style: normal; color: #8dff7a; font-weight: 700; }
.fg-evo em { position: absolute; top: calc(var(--u) * 0.9); right: calc(var(--u) * 0.9); font-style: normal; font-weight: 800; font-size: calc(var(--u) * 1.6); padding: 0 calc(var(--u) * 0.7); border-radius: 99px; background: #1b7a3a; color: #fff; }
.fg-evo.t-ex b, .fg-evo.t-mega b { color: #ffe066; }
.fg-facts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.6) calc(var(--u) * 1.6); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.4); background: rgba(0, 0, 0, 0.3);
  font-size: calc(var(--u) * 2); color: #ffe9c4; box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.18); }
.fg-facts b { color: #fff; }