/* HUD Skill box (GUI.ini [130-1022]) and the [0-188] magic popup. The popup binds no background texture in Conquer.exe. */
.classic-skill-slot { padding:0; border:0; cursor:pointer; background:url('/ui/magic/empty.png?v=356ca9fb823ba356') 0 0/47px 46px no-repeat; }
.classic-skill-slot:is(:hover,:focus-visible,[aria-expanded='true']) { filter:brightness(1.18); outline:0; }
.classic-skill-slot.unavailable,.magic-slot.unavailable { filter:grayscale(1) brightness(.55); }
.magic-popup { --slots:1; position:absolute; z-index:6; top:4px; left:calc(800px - 18px - 50px * var(--slots)); width:calc(18px + 50px * var(--slots)); height:50px; }
.magic-slots { position:absolute; left:18px; top:0; display:flex; }
.magic-slot { width:50px; height:50px; padding:0; border:0; cursor:pointer; background:transparent no-repeat 0 0; }
.magic-slot:is(:hover,:focus-visible) { filter:brightness(1.25); outline:0; }
.magic-slot.unavailable:is(:hover,:focus-visible) { filter:grayscale(1) brightness(.7); }
.magic-page { position:absolute; left:0; width:19px; height:25px; padding:0; border:0; background:transparent no-repeat 0 0; display:none; }
.magic-popup.paged .magic-page { display:block; }
.magic-page-up { top:0; background-image:url('/ui/magic/page-up.png?v=c73ce5b68a423ea6'); }.magic-page-up:active:enabled { background-image:url('/ui/magic/page-up-pressed.png?v=47aa92e221d5809d'); }
.magic-page-down { top:25px; background-image:url('/ui/magic/page-down.png?v=07facabfe70682a2'); }.magic-page-down:active:enabled { background-image:url('/ui/magic/page-down-pressed.png?v=d34f3d697201d78d'); }
.magic-page:disabled { opacity:.5; cursor:default; }
.spell-tooltip { min-width:0; padding:4px 8px; white-space:nowrap; }
/* GUI.ini [0-189], the XP-skill icons, on its own row above the magic popup while the XP circle is full; GUI.ini does not place it. */
.xp-popup { top:-48px; }

/* Local touch gesture feedback, below HUD controls. */
.spell-swipe-feedback { position:absolute; z-index:3; inset:0; pointer-events:none; overflow:hidden; }
.spell-swipe-feedback canvas { position:absolute; inset:0; width:100%; height:100%; }
