/*
 * sprite-system.css — renders game sprites from the atlas via CSS custom properties.
 * The variable contract (--sprite-image / --sprite-bg-size-* / --sprite-bg-pos-*) is
 * produced server-side by SpriteService.ToInlineStyle(); animation frame variables and
 * keyframe assignments come from AnimationCssService. Written fresh for the ASP.NET
 * rewrite alongside those services.
 */

/* Every sprite is a fixed-size box showing one atlas cell as its background. */
.sprite-icon {
    background-image: var(--sprite-image);
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--sprite-bg-pos-x, 0%) var(--sprite-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
    display: inline-block;
}

/* Icons that sit inside running text (the home-page welcome line, stat lines). */
.sprite-icon.inline-icon {
    vertical-align: middle;
    margin: 0 8px;
}

/* Fixed sizes, both naming schemes (sprite-icon-N from the tag helper, size-N from
   service-generated markup, slot-icon compat from content pages). */
.sprite-icon-16, .sprite-icon.size-16, .slot-icon-16.sprite-icon { width: 16px; height: 16px; }
.sprite-icon-25, .slot-icon-25.sprite-icon { width: 25px; height: 25px; }
.sprite-icon.size-24 { width: 24px; height: 24px; }
.sprite-icon-32, .sprite-icon.size-32, .slot-icon.sprite-icon { width: 32px; height: 32px; }
.sprite-icon-48, .sprite-icon.size-48, .slot-icon-48.sprite-icon { width: 48px; height: 48px; }
.sprite-icon-64, .sprite-icon.size-64 { width: 64px; height: 64px; }

/* Status-effect icons live on the ui atlas rather than the DesktopSheets pages. */
.status-effect-sprite {
    background-image: url("../images/spritesheet/ui.png");
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--sprite-bg-pos-x, 0%) var(--sprite-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin: auto;
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
}

/* Textile swatches (skins / mystery boxes): base layer plus an optional mask layer. */
.textile-sprite {
    background-image: url("../images/spritesheet/Textiles_10x10.png");
    background-size: var(--textile-bg-size, 2560%);
    background-position: var(--textile-bg-pos-x, 0%) var(--textile-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    width: var(--sprite-width, 40px);
    height: var(--sprite-height, 40px);
}
.textile-mask {
    mask-image: var(--mask-image);
    mask-size: var(--mask-bg-size-x, 100%) var(--mask-bg-size-y, 100%);
    mask-position: var(--mask-bg-pos-x, 0%) var(--mask-bg-pos-y, 0%);
    mask-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* Animated sprites step through atlas cells; AnimationCssService assigns the
   keyframe set and the per-frame position variables on the element. */
.animated-sprite {
    background-image: var(--sprite-image);
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--sprite-bg-pos-x, 0%) var(--sprite-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin: auto;
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
    animation: var(--sprite-animation) var(--sprite-duration, 1s) steps(1, end) infinite;
}

/* Shared frame-cycling keyframes for 2..6 frame animations. Each animated element
   supplies its own --frame-N-x/y, so one keyframe set serves every sprite with that
   frame count. */
@keyframes sprite-animation-2 {
    0%   { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    50%  { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}
@keyframes sprite-animation-3 {
    0%   { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    33%  { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    66%  { background-position: var(--frame-2-x, 0%) var(--frame-2-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}
@keyframes sprite-animation-4 {
    0%   { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    25%  { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    50%  { background-position: var(--frame-2-x, 0%) var(--frame-2-y, 0%); }
    75%  { background-position: var(--frame-3-x, 0%) var(--frame-3-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}
@keyframes sprite-animation-5 {
    0%   { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    20%  { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    40%  { background-position: var(--frame-2-x, 0%) var(--frame-2-y, 0%); }
    60%  { background-position: var(--frame-3-x, 0%) var(--frame-3-y, 0%); }
    80%  { background-position: var(--frame-4-x, 0%) var(--frame-4-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}
@keyframes sprite-animation-6 {
    0%     { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    16.67% { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    33.33% { background-position: var(--frame-2-x, 0%) var(--frame-2-y, 0%); }
    50%    { background-position: var(--frame-3-x, 0%) var(--frame-3-y, 0%); }
    66.67% { background-position: var(--frame-4-x, 0%) var(--frame-4-y, 0%); }
    83.33% { background-position: var(--frame-5-x, 0%) var(--frame-5-y, 0%); }
    100%   { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}

/* Sprites inside clickable containers get the pointer; standalone ones stay inert. */
.category-container .sprite-icon, .category-container .slot-icon,
.contentGrid .sprite-icon, .contentGrid .slot-icon,
.contentReplace .sprite-icon, .contentReplace .slot-icon {
    cursor: pointer;
}