/* ✨ look.css — the EtherFantasy AR look & feel (owner 2026-09-20: "update the entire ar
 * game with this new look and feel", born on bind-card.html).
 *
 * The language: deep-space purple ground (#120b26→#2a1b52 radial) · #171032 cards with a
 * soft violet glow · gradient-ink headlines (violet→mint→gold) · real dex-art PET STICKERS
 * on white die-cut chips, tilted + bobbing · press-scale on everything tappable · the
 * two-worlds tiles (🌍 AR = violet→green · 🃏 TCG = amber→gold). Pure CSS, no libs;
 * reduced-motion collapses all movement. petkit inlines the same values for game chrome —
 * change BOTH when you change one (SHARED_PLAYBOOK rule). */

.ef-grad-title { background: linear-gradient(90deg, #e9d5ff, #a5f3c8, #ffd58a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.ef-glow { background: #171032; border-radius: 22px;
  box-shadow: 0 10px 44px #0009, 0 0 0 1px #7c5cff44, 0 0 34px #7c3aed33; }

.ef-bob { display: inline-block; animation: efBob 2.6s ease-in-out infinite; }
@keyframes efBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) scale(1.05) } }

/* 🏷 pet sticker (v2 2026-09-20: the REAL die-cut pack — swissonelabs/stickers, mirrored
   at ./assets/stickers/<Pet>.png, white keyline baked in). True sticker scale: ~7mm on
   screen — owner tuned 2026-09-20 to ~10mm ≈ 40px default (1.4x). <img class="ef-stk" src="./assets/stickers/Moonara.png"
   style="--r:-9deg"> — position yourself; corners of padded containers, never over text. */
.ef-stk { position: absolute; width: 40px; height: 40px;
  filter: drop-shadow(0 3px 7px #0009);
  pointer-events: none; z-index: 3; object-fit: contain;
  animation: efStkBob 5s ease-in-out infinite; }
@keyframes efStkBob { 0%,100% { transform: translateY(0) rotate(var(--r, -9deg)) }
  50% { transform: translateY(-9px) rotate(calc(var(--r, -9deg) + 5deg)) } }

.ef-orb { position: fixed; font-size: 22px; opacity: .5; pointer-events: none; z-index: 0;
  animation: efDrift 14s ease-in-out infinite; filter: drop-shadow(0 0 8px #a855f7aa); }
@keyframes efDrift { 0%,100% { transform: translateY(0) rotate(-8deg) } 50% { transform: translateY(-46px) rotate(10deg) } }

.ef-press { transition: transform .12s; }
.ef-press:active { transform: scale(.95); }

/* the two-worlds tiles — AR always LEFT, TCG always RIGHT (owner) */
.ef-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ef-worlds a { border-radius: 18px; padding: 16px 10px 14px; text-decoration: none; color: #fff;
  font-weight: 900; font-size: 14px; line-height: 1.35; text-align: center; transition: transform .12s; }
.ef-worlds a:active { transform: scale(.95); }
.ef-worlds .em { display: block; font-size: 34px; margin-bottom: 6px; animation: efBob 3s ease-in-out infinite; }
.ef-worlds small { display: block; font-weight: 600; font-size: 11.5px; opacity: .85; margin-top: 3px; }
.ef-w-ar { background: linear-gradient(150deg, #7c3aed, #10b981); box-shadow: 0 6px 24px #10b98155; }
.ef-w-tcg { background: linear-gradient(150deg, #b45309, #f59e0b); box-shadow: 0 6px 24px #f59e0b44; }
/* ⭐ ONE MAIN CALL TO ACTION (owner 2026-10-08): on the AR site the TCG world is always the secondary tile, and a page
   that has its own main button marks its tiles .quiet — glass tiles with a coloured edge, never a rival to the gold CTA */
.ef-w-tcg, .ef-worlds.quiet .ef-w-ar { background: #ffffff0d; box-shadow: none; color: #ece9f5; }
.ef-w-tcg { border: 1px solid #f59e0b66; }
.ef-worlds.quiet .ef-w-ar { border: 1px solid #10b98166; }

@media (prefers-reduced-motion: reduce) {
  .ef-bob, .ef-stk, .ef-orb, .ef-worlds .em { animation: none !important; }
}