/* A bounded brand gesture; the native pointer still owns precision and hit testing. */
.app-header .header-actions > button { min-width: 44px; min-height: 44px; }
#token-button { position: relative; overflow: hidden; isolation: isolate; perspective: 180px; }
#token-button > img { display: block; flex: none; transform-origin: 50% 70%; backface-visibility: hidden; }
#token-button > span { position: relative; z-index: 1; }
#token-button:focus-visible { outline: 2px solid #d4f8ff; outline-offset: 3px; }
#token-button::before {
  content: ''; position: absolute; z-index: 2; left: 32px; top: 6px; width: 8px; height: 8px;
  background: #d9fbff; clip-path: polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%);
  opacity: 0; pointer-events: none;
}
#token-button::after {
  content: ''; position: absolute; z-index: 2; inset: -35% -70%;
  background: linear-gradient(112deg, transparent 42%, #a3ecff0a 46%, #e7fbff5c 50%, #9eeaff15 54%, transparent 58%);
  opacity: 0; transform: translateX(-40%); pointer-events: none;
}
#token-button.is-brand-motion > img { animation: lootr-brand-tilt 720ms cubic-bezier(.2,.75,.25,1) both; }
#token-button.is-brand-motion::before { animation: lootr-brand-spark 720ms ease-out both; }
#token-button.is-brand-motion::after { animation: lootr-brand-glint 720ms ease-out both; }
@keyframes lootr-brand-tilt {
  0%,100% { transform: rotateY(0) rotateZ(0) translateY(0) scale(1); }
  30% { transform: rotateY(-18deg) rotateZ(-9deg) translateY(-2px) scale(1.1); }
  65% { transform: rotateY(12deg) rotateZ(5deg) translateY(-1px) scale(1.04); }
}
@keyframes lootr-brand-spark { 0%,100% { opacity: 0; transform: scale(.45) rotate(-15deg); } 42% { opacity: .95; transform: scale(1) rotate(0); } 72% { opacity: .25; transform: scale(.6) rotate(15deg); } }
@keyframes lootr-brand-glint { 0% { opacity: 0; transform: translateX(-40%); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(40%); } }
.lootr-pointer-highlight { display: none; pointer-events: none !important; }
@media (hover:hover) and (pointer:fine) {
  html { cursor: url('cursor.svg') 3 2, auto; }
  :is(button:not(:disabled),a[href],summary,select,[role='button'],[role='tab'],input:is([type='button'],[type='submit'],[type='reset'],[type='checkbox'],[type='radio'],[type='range'])) { cursor: url('cursor.svg') 3 2, pointer; }
  :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,code,textarea,input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='range']),[contenteditable='true'],[contenteditable='']) { cursor: text; }
  :is(button,a,summary,[role='button'],[role='tab']) > * { cursor: inherit; }
  :is(button,input,select,textarea):disabled,[aria-disabled='true'] { cursor: not-allowed; }
  .lootr-pointer-highlight {
    display: block; position: fixed; z-index: 10000; left: -5px; top: -5px; width: 10px; height: 10px;
    border: 1px solid #b4edff35; border-radius: 50%; background: #8ee8ff08; opacity: 0;
    transition: opacity 140ms, width 160ms, height 160ms, margin 160ms, border-color 160ms, background 160ms;
  }
  .lootr-pointer-highlight.is-visible { opacity: .7; }
  .lootr-pointer-highlight.is-interactive { width: 25px; height: 25px; margin: -7.5px; border-color: #c1f4ff65; background: #7fe4ff0b; }
}
@media (max-width:600px) {
  #token-button { padding: 6px; gap: 4px; }
  #token-button > img { display: block; width: 20px; height: 20px; }
  #token-button::before { left: 22px; top: 7px; width: 6px; height: 6px; }
}
@media (prefers-reduced-motion:reduce) {
  #token-button.is-brand-motion > img,#token-button.is-brand-motion::before,#token-button.is-brand-motion::after { animation: none; }
  .lootr-pointer-highlight { transition: none; }
}
