.skillbar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    padding: 6px;
}

.skillbar.size-small {
    margin-top: 0;
    margin-bottom: 0;
    gap: 0px;
    padding: 0px;
}

.skillbar-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #111;
    border: 1px solid #333;
    overflow: hidden;
}

.skillbar-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* simulation layers */
.cast-dark, .flash, .cast, .recharge {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.cast-dark { background: rgba(0,0,0,0.6); }
.flash { background: #fff; }

.ring {
    position: absolute;
    inset: -55%;
    border-radius: 50%;
    border: 28px solid rgba(255,255,255,0.4);
    filter: blur(18px);
    animation: ring 0.7s linear infinite;
}

.ring:nth-child(2) { inset: -30%; opacity: .7; animation-delay: .15s; }
.ring:nth-child(3) { animation-delay: .3s; opacity: .5; }

@keyframes ring {
    from { transform: scale(1); }
    to   { transform: scale(0.3); }
}

.triangle {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    background: rgba(255,255,255,0.9);
    clip-path: polygon(50% 0%, 30% 100%, 70% 100%);
    filter: blur(70px);
    animation: tri 0.7s ease-in-out infinite;
}

.triangle.tr { --dx: 40%; --dy: -40%; --rot: 45deg; }
.triangle.tl { --dx: -40%; --dy: -40%; --rot: -45deg; }
.triangle.br { --dx: 40%; --dy: 40%; --rot: 135deg; }
.triangle.bl { --dx: -40%; --dy: 40%; --rot: -135deg; }

@keyframes tri {
    from { transform: translate(0,0) rotate(var(--rot)); }
    to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

.recharge-mask {
    position: absolute;
    inset: -50%;
    background: rgba(0,0,0,0.5);
    clip-path: polygon(50% 50%, 50% 0%);
}









.skillbar-slot.preview-add {
    outline: 2px solid #5fd38d;
}

.skillbar-slot.preview-remove {
    outline: 2px solid #d35f5f;
}

.skillbar-slot.preview-remove::after {
    content: "✖";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 36px;
    font-weight: bold;
    color: #ff3b3b;
    background: rgba(0,0,0,0.65);
    z-index: 5;
    pointer-events: none;
}









/* Skillbar panel hidden by default */
.skillbar-panel {
    display: none;
    overflow: hidden;
}

/* Show when center is in skillbar mode */
.center.skillbar-open .skillbar-panel {
    display: block;
}

/* when skill details are open */
.center.skillbar-open {
    grid-template-rows: auto 1fr auto;
}

.skillbar-slot.preview-remove::after {
    z-index: 10;
}

.cast-dark,
.flash,
.cast,
.recharge {
    z-index: 1;
}

.skillbar-icon {
    position: relative;
    z-index: 0;
}

.skillbar-panel,
.skillbar,
.skillbar-slot {
    pointer-events: auto;
}

.skillbar-panel {
    position: relative;
    z-index: 10;
}

.skillbar-slot > * {
    pointer-events: none;

}

.skillbar-preview-icon {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.85;
}








.skillbar-slot {
    overflow: hidden;
}

/* Base icon */
.skillbar-icon {
    position: relative;
    z-index: 10;
}

/* Dark overlay */
.cast-dark {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

/* Cast animation */
.cast {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

/* Flash effect */
.flash {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

/* Recharge overlay */
.recharge {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
}

/* ========================================================================== */
/* =============================== MOBILE =================================== */
/* ========================================================================== */
@media (max-width: 900px) {

.skillbar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0px;
    padding: 0px;
}

.skillbar-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #111;
    border: 1px solid #333;
    overflow: hidden;
}

/* =========================
   Mobile Touch Drag Ghost
========================= */

#touch-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;

    width: 42px;
    height: 42px;

    pointer-events: none;
    z-index: 9999;

    transform: translate(-50%, -50%);
    display: none;

    opacity: 0.8;

    /* visual polish */
    border-radius: 1px;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.15);

    /* prevents blurry scaling on some devices */
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}


}