:root { --af-gold: #f4cf72; --af-violet: #7b45c5; --af-ink: #120d1e; --af-layer-overlay: 10010; --af-layer-character: 10020; --af-layer-panel: 10030; }
.af-root, .af-root * { box-sizing: border-box; }
.af-root [hidden] { display: none !important; }
.af-root { --af-obstruction: 0px; position: fixed; z-index: var(--af-layer-character); bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--af-obstruction)); width: var(--af-desktop-size); height: var(--af-desktop-size); max-width: calc(100vw - 24px); color: #fff; font: 500 14px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; contain: layout style; }
.af-corner-right { right: max(var(--af-desktop-spacing,18px), env(safe-area-inset-right)); }
.af-corner-left { left: max(var(--af-desktop-spacing,18px), env(safe-area-inset-left)); }
.af-stage, .af-effects { position: absolute; inset: 0; }
.af-character { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.48)); transform-origin: 50% 90%; transition: opacity .22s ease, filter .22s ease; }
.af-character.af-drag-enabled, .af-character.af-drag-enabled .af-rive-canvas { touch-action: none; }
.af-character.af-drag-enabled { cursor: grab; }
.af-dragging .af-character.af-drag-enabled { cursor: grabbing; }
.af-root.af-dragging { user-select: none; will-change: transform; }
.af-root.af-drag-settling { will-change: transform; }
.af-root.af-flying .af-character { pointer-events: none; filter: drop-shadow(0 12px 20px rgba(97,63,190,.6)); }
.af-flight-spark { position: fixed; z-index: calc(var(--af-layer-character) - 1); width: 7px; height: 7px; border-radius: 50%; background: #f4cf72; box-shadow: 0 0 8px #f4cf72,0 0 16px #8b5ad0; pointer-events: none; transform: translate(-50%,-50%); animation: af-flight-spark .55s ease-out var(--af-flight-delay,0ms) both; }
.af-root[data-af-renderer="loading"] .af-character { opacity: 0; pointer-events: none; }
.af-rive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; pointer-events: auto; touch-action: pan-x pan-y; }
.af-root[data-af-renderer="rive"] .af-character { filter: drop-shadow(0 9px 16px rgba(0,0,0,.4)); }
.af-character:focus-visible, .af-menu button:focus-visible, .af-bubble button:focus-visible, .af-bubble a:focus-visible, .af-summon:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #6e3bb3; }
.af-placeholder { position: absolute; inset: 18%; display: grid; place-items: center; border: 1px solid rgba(174,246,255,.52); border-radius: 50%; background: radial-gradient(circle,rgba(118,67,194,.58),rgba(20,10,40,.92) 62%); box-shadow: 0 0 28px rgba(132,242,255,.38), inset 0 0 24px rgba(126,67,199,.5); }
.af-fallback-rune { position: relative; z-index: 2; color: #d9fbff; font-size: calc(var(--af-desktop-size) * .24); text-shadow: 0 0 14px #84f2ff; }
.af-fallback-orbit { position: absolute; inset: 12%; border: 1px solid rgba(244,207,114,.75); border-radius: 50%; animation: af-fallback-orbit 5s linear infinite; }
.af-fallback-orbit::after { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #aef6ff; box-shadow: 0 0 12px #aef6ff; content: ""; }
.af-bubble { position: absolute; z-index: 5; bottom: 86%; right: 12%; width: min(var(--af-dialogue-width,280px), calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--af-dialogue-border,rgba(244,207,114,.75)); border-radius: 14px 14px 4px 14px; background: var(--af-dialogue-bg,rgba(18,13,30,.96)); color: var(--af-dialogue-text,#fff); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: var(--af-dialogue-font-size,14px); pointer-events: none; }
.af-corner-left .af-bubble { left: 12%; right: auto; border-radius: 14px 14px 14px 4px; }
.af-bubble-interactive { pointer-events: auto; }
.af-dialogue-message { display: block; min-width: 0; overflow-wrap: anywhere; }
.af-dialogue-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 10px; padding: 8px 14px; border: 1px solid rgba(244,207,114,.82); border-radius: 999px; background: linear-gradient(135deg,#7040ad,#47266f); color: #fff; font: 700 13px/1.2 inherit; cursor: pointer; }
.af-dialogue-action:hover { background: linear-gradient(135deg,#8550c5,#593087); box-shadow: 0 0 18px rgba(132,77,199,.52); }
.af-dialogue-close { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #d8cbe8; font-size: 20px; cursor: pointer; }
.af-bubble-dismissible { padding-right: 34px; }
.af-dialogue-loading { display: inline-block; width: 13px; height: 13px; margin: 0 7px -2px 0; border: 2px solid rgba(255,255,255,.28); border-top-color: var(--af-gold); border-radius: 50%; animation: af-dialogue-spin .8s linear infinite; }
.af-menu { position: absolute; z-index: 7; right: 0; bottom: calc(100% + 16px); width: min(330px,calc(100vw - 28px)); padding: 14px; overflow: visible; border: 1px solid rgba(210,178,255,.42); border-radius: 22px; background: linear-gradient(145deg,rgba(30,16,52,.98),rgba(12,7,25,.98)); box-shadow: 0 22px 60px rgba(4,1,12,.62),0 0 35px rgba(112,68,190,.28),inset 0 1px rgba(255,255,255,.08); pointer-events: auto; animation: af-menu-reveal .26s cubic-bezier(.2,.8,.25,1) both; backdrop-filter: blur(16px); }
.af-menu::after { position: absolute; right: 62px; bottom: -8px; width: 16px; height: 16px; border-right: 1px solid rgba(210,178,255,.42); border-bottom: 1px solid rgba(210,178,255,.42); background: #0f091d; content: ""; transform: rotate(45deg); }
.af-corner-left .af-menu { right: auto; left: 0; }
.af-corner-left .af-menu::after { right: auto; left: 62px; }
.af-menu-heading { display: grid; gap: 3px; margin: 0 2px 10px; padding: 3px 5px 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.af-menu-heading strong { color: #fff; font: 700 17px/1.25 inherit; letter-spacing: .01em; }
.af-menu-heading small { color: #bcaed2; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.af-menu-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.af-menu-grid > button { display: block; width: 100%; min-width: 0; min-height: 56px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.045); color: #fff; text-align: left; cursor: pointer; transition: background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.af-menu-grid > button:hover { border-color: rgba(174,246,255,.5); background: linear-gradient(135deg,rgba(116,67,188,.4),rgba(64,39,104,.32)); box-shadow: 0 8px 22px rgba(4,1,12,.28),inset 0 0 16px rgba(132,242,255,.04); transform: translateY(-2px); }
.af-menu-grid > button[data-af-action="ultimate"] { border-color: rgba(244,207,114,.36); background: linear-gradient(135deg,rgba(107,56,172,.38),rgba(41,23,73,.55)); }
.af-menu-grid > button[data-af-action="hide"] { opacity: .78; }
.af-menu-grid > button[disabled] { opacity: .38; cursor: not-allowed; filter: grayscale(.35); transform: none; }
.af-menu-copy { display: grid; min-width: 0; gap: 3px; }
.af-menu-copy strong { color: #fff; font-size: 14px; line-height: 1.2; white-space: normal; }
.af-menu-copy small { color: #b9accd; font-size: 11px; line-height: 1.25; white-space: normal; }
.af-summon { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 52px; height: 52px; border: 1px solid var(--af-gold); border-radius: 50%; background: #25163e; color: #aef6ff; font-size: 27px; box-shadow: 0 0 18px rgba(132,242,255,.7); cursor: pointer; pointer-events: auto; animation: af-summon-pulse 2.6s ease-in-out infinite; }
.af-corner-left .af-summon { right: auto; left: max(18px, env(safe-area-inset-left)); }
.af-page-overlay { position: fixed; z-index: var(--af-layer-overlay); inset: 0; background: rgba(9,6,18,.45); pointer-events: none; animation: af-fade-in .25s ease both; }
.af-rune { position: absolute; z-index: -1; left: var(--af-orb-x,50%); top: var(--af-orb-y,52%); width: 94%; aspect-ratio: 1; display: grid; place-items: center; border: 4px solid rgba(132,242,255,.72); border-radius: 50%; color: var(--af-gold); font-size: calc(var(--af-desktop-size) * .55); box-shadow: 0 0 45px rgba(126,67,199,.8), inset 0 0 35px rgba(132,242,255,.35); animation: af-rune 1.8s cubic-bezier(.2,.7,.2,1) both; }
.af-orb-burst { position: absolute; z-index: 3; left: var(--af-orb-x,50%); top: var(--af-orb-y,52%); width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#fff 0 8%,#aef6ff 25%,rgba(95,79,255,.65) 48%,transparent 72%); mix-blend-mode: screen; animation: af-orb-burst 1.2s ease-out both; pointer-events: none; }
.af-particle { position: absolute; z-index: 2; left: var(--af-orb-x,50%); top: var(--af-orb-y,52%); width: 7px; height: 7px; border-radius: 50%; background: #b8f8ff; box-shadow: 0 0 9px #a5edff; animation: af-particle 1.5s ease-out var(--delay) both; }
.arcane-familiar-cart-celebration { position: absolute; z-index: 4; inset: 0; overflow: visible; pointer-events: none; }
.arcane-familiar-cart-glow { position: absolute; left: var(--af-orb-x,50%); top: var(--af-orb-y,52%); width: 28%; aspect-ratio: 1; border: 2px solid rgba(244,207,114,.88); border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.55),rgba(138,80,204,.32) 42%,transparent 72%); box-shadow: 0 0 24px rgba(156,92,224,.9),0 0 14px rgba(244,207,114,.75); animation: arcane-familiar-cart-glow 1.9s ease-out both; transform: translate(-50%,-50%); }
.arcane-familiar-cart-particle { --af-cart-distance: calc(var(--af-desktop-size) * .27); position: absolute; left: var(--af-orb-x,50%); top: var(--af-orb-y,52%); width: 6px; height: 6px; border-radius: 50%; background: var(--af-gold); box-shadow: 0 0 8px currentColor; color: #a86ee8; animation: arcane-familiar-cart-particle 1.45s ease-out var(--af-cart-delay) both; }
.arcane-familiar-cart-particle:nth-child(even) { background: #a86ee8; color: var(--af-gold); }
.arcane-familiar-cart-celebration.is-reduced-motion .arcane-familiar-cart-glow { animation: none; opacity: .75; }
.arcane-familiar-highlight-overlay { position: absolute; z-index: 10005; box-sizing: border-box; border: 3px solid var(--af-highlight-primary,#9c5ce0); border-radius: 12px; outline: 2px solid var(--af-highlight-secondary,#f4cf72); outline-offset: 2px; box-shadow: 0 0 0 1px rgba(244,207,114,.3),0 0 var(--af-highlight-glow,24px) rgba(139,76,205,.78); pointer-events: none; animation: af-highlight-overlay-pulse 1.35s ease-in-out 2; }
.arcane-familiar-highlight-overlay.af-highlight-overlay-reduced { animation: none; }
.af-product-highlight { outline: 3px solid #a5edff; outline-offset: 5px; }
.af-is-idle_variation_1 { animation: af-look 1.1s ease; }
.af-is-greet { animation: af-greet .7s ease; }
.af-is-open_menu { animation: af-bob .35s ease; }
.af-is-ultimate_spell { animation: af-cast 1.8s ease both; }
.af-is-teleport_in { animation: af-teleport-in .55s ease both; }
.af-is-teleport_out { animation: af-teleport-out .5s ease both; }
.af-is-confused { animation: af-confused .65s ease; }
.af-is-point { transform: rotate(-4deg) translateX(-6px); }
.af-is-walk_left, .af-is-walk_right { animation: af-walk .28s ease infinite alternate; }
.af-paused *, .af-sensitive-hidden { animation-play-state: paused !important; }
.af-sensitive-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes af-look { 40% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes af-menu-reveal { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes af-dialogue-spin { to { transform: rotate(360deg); } }
@keyframes af-fallback-orbit { to { transform: rotate(360deg); } }
@keyframes af-greet { 45% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes af-bob { 50% { transform: translateY(-5px) scale(1.03); } }
@keyframes af-cast { 25% { transform: rotate(-7deg) scale(1.04); } 55% { transform: rotate(4deg) scale(1.1); } }
@keyframes af-walk { to { transform: translateY(-4px) rotate(2deg); } }
@keyframes af-confused { 25%,75% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes af-teleport-in { from { opacity: 0; transform: scale(.3) translateY(70px); filter: blur(10px); } }
@keyframes af-teleport-out { to { opacity: 0; transform: scale(.25) translateY(-70px); filter: blur(10px); } }
@keyframes af-rune { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-90deg); } 45% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45) rotate(120deg); } }
@keyframes af-orb-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); } }
@keyframes af-particle { to { opacity: 0; transform: translate(var(--x),var(--y)) scale(.2); } }
@keyframes arcane-familiar-cart-glow { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }
@keyframes arcane-familiar-cart-particle { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--af-cart-angle)) translateX(4px) scale(.5); } 24% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--af-cart-angle)) translateX(var(--af-cart-distance)) scale(.2); } }
@keyframes af-highlight-overlay-pulse { 50% { border-color: var(--af-highlight-secondary,#f4cf72); outline-color: var(--af-highlight-primary,#9c5ce0); box-shadow: 0 0 0 2px rgba(244,207,114,.42),0 0 calc(var(--af-highlight-glow,24px) + 9px) rgba(164,92,230,.9); } }
@keyframes af-summon-pulse { 50% { box-shadow: 0 0 28px rgba(132,242,255,.9); transform: scale(1.05); } }
@keyframes af-flight-spark { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35); } 28% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%,-75%) scale(1.35); } }
@keyframes af-fade-in { from { opacity: 0; } }
@media (max-width: 767px) {
  .af-root { width: var(--af-mobile-size); height: var(--af-mobile-size); right: var(--af-mobile-spacing,10px); left: auto; bottom: calc(max(var(--af-mobile-spacing,10px),env(safe-area-inset-bottom)) + var(--af-obstruction)); }
  .af-fallback-rune { font-size: calc(var(--af-mobile-size) * .24); }
  .af-menu, .af-corner-left .af-menu { right: 0; left: auto; bottom: calc(100% + 12px); width: min(300px,calc(100vw - 20px)); max-height: calc(100vh - var(--af-mobile-size) - 44px); padding: 14px; overflow-y: auto; border-radius: 18px; }
  .af-menu-grid { grid-template-columns: 1fr; }
  .af-menu-grid > button { min-height: 54px; }
  .af-menu::after, .af-corner-left .af-menu::after { right: 42px; left: auto; }
  .af-bubble { position: absolute; right: 0; left: auto; bottom: calc(100% + 12px); width: min(var(--af-dialogue-width,280px),calc(100vw - 24px)); border-radius: 13px; }
  .af-corner-left .af-bubble { right: auto; left: 0; }
  .af-rune { font-size: calc(var(--af-mobile-size) * .5); }
  .arcane-familiar-cart-particle { --af-cart-distance: calc(var(--af-mobile-size) * .3); }
}
.af-ui-below .af-menu, .af-ui-below .af-bubble { top: calc(100% + 12px); bottom: auto; }
.af-ui-below .af-menu::after { top: -8px; bottom: auto; transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) {
  .af-root *, .af-page-overlay, .af-product-highlight, .arcane-familiar-highlight-overlay { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .af-particle { display: none !important; }
}