/* Yu-Gi-Oh! Anime — 59 × 86 mm (590 × 860 px). Colori della cornice in YuGiOh.css. */

.ygoa-namebox {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 22px;
    height: 62px;
    border: 3px solid;
    border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}

.ygoa-namebox .ygo-name { right: 14px; font-size: 44px; }

.ygoa-art-frame {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 542px;
    height: 616px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.45));
    box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.7);
}

.ygoa-named .ygoa-art-frame { top: 94px; height: 546px; }

.ygoa-art-frame::after {
    content: '';
    position: absolute;
    inset: 6px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.ygoa-art {
    left: 6px;
    top: 6px;
    width: 530px;
    height: 604px;
}

.ygoa-named .ygoa-art { height: 534px; }

/* ---- Frecce Link (dentro l'illustrazione) ---- */

.ygoa-arrow {
    position: absolute;
    z-index: 3;
    background: linear-gradient(180deg, #6a5a52, #2b221e);
}

.ygoa-arrow.is-on { background: linear-gradient(180deg, #ff7a52, #c0141a); }

.ygoa-arrow--top          { left: calc(50% - 50px); top: 6px; width: 100px; height: 30px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ygoa-arrow--bottom       { left: calc(50% - 50px); bottom: 6px; width: 100px; height: 30px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ygoa-arrow--left         { left: 6px; top: calc(50% - 50px); width: 30px; height: 100px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.ygoa-arrow--right        { right: 6px; top: calc(50% - 50px); width: 30px; height: 100px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ygoa-arrow--top-left     { left: 6px; top: 6px; width: 56px; height: 56px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ygoa-arrow--top-right    { right: 6px; top: 6px; width: 56px; height: 56px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ygoa-arrow--bottom-left  { left: 6px; bottom: 6px; width: 56px; height: 56px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ygoa-arrow--bottom-right { right: 6px; bottom: 6px; width: 56px; height: 56px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---- Fascia livello ---- */

.ygoa-levelbar {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 652px;
    height: 54px;
    background: linear-gradient(180deg, #fdf5d8, #dcc58a);
    box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.ygoa-level {
    position: absolute;
    right: 62px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 37px;
}

.ygoa-level.is-rank { left: 10px; right: auto; }

.ygoa-levelbar .ygo-attr {
    right: 3px;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    font-size: 27px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7), inset 0 0 0 3px rgba(255, 255, 255, 0.9), inset 0 -6px 9px rgba(0, 0, 0, 0.3);
}

.ygoa-levelbar .ygo-attr.is-text { font-size: 9.5px; }
.ygoa-levelbar .ygo-attr-label { width: 40px; }

/* ---- ATK / DEF ---- */

.ygoa-stats {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 718px;
    height: 118px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ygoa-stat {
    display: grid;
    place-items: center;
    padding: 0 10px;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff, #e2e2e2);
    box-shadow: 0 0 0 3px #262626, inset 0 -8px 12px rgba(0, 0, 0, 0.12), inset 0 3px 0 #fff;
    color: #232323;
}

.ygoa-stat > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 92px;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* ---- Barra Magia / Trappola ---- */

.ygoa-spellbar {
    position: absolute;
    left: 44px;
    right: 44px;
    top: 668px;
    height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ygo-frame-1) 40%, #fff), color-mix(in srgb, var(--ygo-frame-1) 72%, #fff));
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(0, 0, 0, 0.12);
}

.ygoa-spellbar .ygo-attr {
    position: relative;
    right: auto;
    top: auto;
    width: 92px;
    height: 92px;
    margin: 0;
    font-size: 52px;
}

.ygoa-spellbar .ygo-attr.is-text { font-size: 17px; }
.ygoa-spellbar .ygo-attr-label { width: 78px; }
.ygoa-spellbar .sym--prop { font-size: 74px; }