/* Yu-Gi-Oh! — 59 × 86 mm (590 × 860 px). Colori e medaglioni condivisi con il template anime. */

.tpl-yugioh,
.tpl-yugioh-anime {
    --ygo-frame-1: #f7a562;
    --ygo-frame-2: #c4611f;
    --ygo-edge: #6e3210;
    --ygo-ink: #111;
    --ygo-name: #111;
    --ygo-box-1: #f3e9d0;
    --ygo-box-2: #dccaa4;
    background: var(--ygo-frame-2);
    font-family: 'Spectral', Georgia, serif;
    font-variant-numeric: lining-nums;
    color: var(--ygo-ink);
}

.ygo-type-normal  { --ygo-frame-1: #f3d587; --ygo-frame-2: #c99a47; --ygo-edge: #7a5a22; }
.ygo-type-effect  { --ygo-frame-1: #f7a562; --ygo-frame-2: #c4611f; --ygo-edge: #6e3210; }
.ygo-type-ritual  { --ygo-frame-1: #9dbde8; --ygo-frame-2: #4f78b9; --ygo-edge: #243f6e; }
.ygo-type-fusion  { --ygo-frame-1: #c29ad6; --ygo-frame-2: #7d519c; --ygo-edge: #402356; }
.ygo-type-synchro { --ygo-frame-1: #ffffff; --ygo-frame-2: #bdbdbd; --ygo-edge: #6d6d6d; }
.ygo-type-xyz     { --ygo-frame-1: #3a3a3a; --ygo-frame-2: #0b0b0b; --ygo-edge: #000;    --ygo-name: #fff; --ygo-foot: #fff; }
.ygo-type-link    { --ygo-frame-1: #3a74c9; --ygo-frame-2: #173f86; --ygo-edge: #0b2150; --ygo-name: #fff; --ygo-foot: #fff; }
.ygo-type-token   { --ygo-frame-1: #d8d8d8; --ygo-frame-2: #8e8e8e; --ygo-edge: #4d4d4d; }
.ygo-type-spell   { --ygo-frame-1: #33b394; --ygo-frame-2: #0f6e59; --ygo-edge: #06392d; --ygo-name: #fff; }
.ygo-type-trap    { --ygo-frame-1: #d05c9b; --ygo-frame-2: #8c2463; --ygo-edge: #4b0f33; --ygo-name: #fff; }

/* ---- Cornice ---- */

.ygo-frame {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.16)),
        linear-gradient(180deg, var(--ygo-frame-1), var(--ygo-frame-2));
    box-shadow: inset 0 0 0 3px var(--ygo-edge), inset 0 0 0 6px rgba(255, 255, 255, 0.16);
}

.ygo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../Data/Background/Base_PerlinNoise_001.png') center / 360px auto repeat;
    mix-blend-mode: soft-light;
    opacity: 0.6;
}

.ygo-type-xyz .ygo-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255, 238, 180, 0.35) 0 1px, transparent 1.4px);
    background-size: 37px 41px, 53px 29px;
    background-position: 0 0, 17px 11px;
}

.ygo-type-link .ygo-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 22px),
        repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 22px);
}

/* ---- Nome e attributo ---- */

.ygo-namebox {
    position: absolute;
    left: 40px;
    top: 36px;
    width: 510px;
    height: 70px;
    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) 55%, rgba(0, 0, 0, 0.06));
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}

.ygo-name {
    position: absolute;
    left: 14px;
    right: 76px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-family: 'Spectral SC', Georgia, serif;
    font-weight: 600;
    font-size: 50px;
    line-height: 1;
    color: var(--ygo-name);
}

.ygo-name.is-black { color: #111; }
.ygo-name.is-white { color: #fff; }

.ygo-name.is-silver .fit-inner,
.ygo-name.is-gold .fit-inner {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.65));
}

.ygo-name.is-silver .fit-inner { background-image: linear-gradient(180deg, #ffffff 0%, #c9c9c9 44%, #f5f5f5 56%, #8a8a8a 100%); }
.ygo-name.is-gold .fit-inner { background-image: linear-gradient(180deg, #fff6c2 0%, #d9a520 44%, #ffe27a 56%, #9a6b00 100%); }

.ygo-attr {
    --attr-1: #b06ad8;
    --attr-2: #3d0f5c;
    position: absolute;
    right: 6px;
    top: 50%;
    width: 62px;
    height: 62px;
    margin-top: -31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--attr-1), var(--attr-2) 72%);
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.7),
        inset 0 0 0 3.5px rgba(255, 255, 255, 0.9),
        inset 0 0 0 5px rgba(0, 0, 0, 0.35),
        inset 0 -8px 12px rgba(0, 0, 0, 0.3),
        0 3px 4px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-family: 'Noto Serif JP', 'Yu Mincho', serif;
    font-weight: 900;
    font-size: 35px;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.ygo-attr.is-text { font-family: 'Spectral SC', Georgia, serif; font-weight: 700; font-size: 12.5px; }

.ygo-attr-label {
    display: block;
    width: 50px;
    text-align: center;
    overflow: hidden;
}

.ygo-attr-dark   { --attr-1: #b06ad8; --attr-2: #3d0f5c; }
.ygo-attr-light  { --attr-1: #fff3a6; --attr-2: #caa000; }
.ygo-attr-earth  { --attr-1: #c79a67; --attr-2: #4f3218; }
.ygo-attr-water  { --attr-1: #7cc6f2; --attr-2: #0b4f8c; }
.ygo-attr-fire   { --attr-1: #ff8a5c; --attr-2: #8a1300; }
.ygo-attr-wind   { --attr-1: #8fe39c; --attr-2: #146b2c; }
.ygo-attr-divine { --attr-1: #ffe08a; --attr-2: #a0741a; }
.ygo-attr-spell  { --attr-1: #5fe0bd; --attr-2: #0b5b44; }
.ygo-attr-trap   { --attr-1: #f28cc3; --attr-2: #6e1d4a; }

/* ---- Livello / proprietà ---- */

.ygo-level {
    position: absolute;
    left: 60px;
    right: 62px;
    top: 113px;
    height: 38px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 36px;
}

.ygo-level.is-rank { justify-content: flex-start; }

.ygo-property {
    position: absolute;
    right: 60px;
    top: 110px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Spectral SC', Georgia, serif;
    font-weight: 700;
    font-size: 33px;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.ygo-property .sym { font-size: 32px; }

/* ---- Illustrazione ---- */

.ygo-art-frame {
    position: absolute;
    left: 66px;
    top: 156px;
    width: 458px;
    height: 458px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.28) 50%, rgba(0, 0, 0, 0.42));
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

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

.ygo-art {
    left: 6px;
    top: 6px;
    width: 446px;
    height: 446px;
}

/* ---- Frecce Link ---- */

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

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

.ygo-arrow--top          { left: 250px; top: 130px; width: 90px; height: 26px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ygo-arrow--bottom       { left: 250px; top: 614px; width: 90px; height: 26px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ygo-arrow--left         { left: 40px; top: 340px; width: 26px; height: 90px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.ygo-arrow--right        { left: 524px; top: 340px; width: 26px; height: 90px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ygo-arrow--top-left     { left: 42px; top: 132px; width: 46px; height: 46px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ygo-arrow--top-right    { left: 502px; top: 132px; width: 46px; height: 46px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ygo-arrow--bottom-left  { left: 42px; top: 592px; width: 46px; height: 46px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ygo-arrow--bottom-right { left: 502px; top: 592px; width: 46px; height: 46px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---- Codice set ---- */

.ygo-set {
    position: absolute;
    right: 68px;
    top: 614px;
    font-family: 'Spectral SC', Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0.04em;
    color: var(--ygo-foot, #111);
}

.ygo-set.is-left { left: 68px; right: auto; }

/* ---- Box descrizione ---- */

.ygo-box {
    position: absolute;
    left: 42px;
    top: 642px;
    width: 506px;
    height: 182px;
    display: flex;
    flex-direction: column;
    padding: 5px 13px 5px;
    background: linear-gradient(180deg, var(--ygo-box-1), var(--ygo-box-2));
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.55),
        inset 0 0 0 3px rgba(255, 255, 255, 0.4),
        inset 0 0 22px rgba(120, 88, 36, 0.28);
}

.ygo-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../Data/Background/OldPaper_PerlinNoise_002.png') center / 280px auto;
    mix-blend-mode: multiply;
    opacity: 0.22;
    pointer-events: none;
}

.ygo-box > * { position: relative; }

.ygo-typeline {
    flex: none;
    font-family: 'Spectral SC', Georgia, serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.15;
}

.ygo-text {
    flex: 1 1 auto;
    min-height: 0;
    font-size: 21px;
    line-height: 1.14;
    text-align: justify;
    hyphens: auto;
}

.ygo-text.is-flavor { font-style: italic; }

.ygo-stats {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 2px;
    padding-top: 1px;
    border-top: 2px solid #111;
    font-family: 'Spectral SC', Georgia, serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
}

/* ---- Piè di pagina ---- */

.ygo-footer {
    position: absolute;
    left: 30px;
    right: 56px;
    top: 830px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ygo-foot, #111);
    white-space: nowrap;
}

.ygo-edition { font-family: 'Spectral SC', Georgia, serif; font-weight: 700; }
.ygo-copyright { margin-left: auto; }

.ygo-hologram {
    position: absolute;
    right: 18px;
    bottom: 11px;
    width: 27px;
    height: 27px;
    border-radius: 2px;
    background: linear-gradient(135deg, #fafafa, #9b9b9b 38%, #ffffff 52%, #7d7d7d 70%, #d9d9d9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}