/* Simboli condivisi dai template (vedi Scripts/Templates/Shared/Symbols.js). */

.sym {
    --sym-bg: #cfcac4;
    --sym-fg: #111;
    --sym-cut: #cfcac4;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: var(--sym-bg);
    color: var(--sym-fg);
    line-height: 1;
    vertical-align: -0.15em;
}

.sym > svg {
    width: 68%;
    height: 68%;
    fill: currentColor;
    overflow: visible;
}

.sym-cut { stroke: var(--sym-cut); }

/* ---- Yu-Gi-Oh!: stelle livello / rango ---- */

.sym--star {
    --sym-fg: #ffd83a;
    background: radial-gradient(circle at 36% 30%, #ffb866 0%, #e5491f 52%, #8c1c0a 100%);
    box-shadow: inset 0 0 0 0.045em rgba(60, 10, 0, 0.7), 0 0.03em 0.05em rgba(0, 0, 0, 0.45);
}

.sym--star > svg { width: 82%; height: 82%; }

.sym--star path {
    stroke: #6b2a00;
    stroke-width: 5;
    stroke-linejoin: round;
    paint-order: stroke;
}

.sym--star.is-rank {
    background: radial-gradient(circle at 36% 30%, #6a6a6a 0%, #1d1d1d 55%, #000 100%);
    box-shadow: inset 0 0 0 0.045em rgba(255, 216, 58, 0.55), 0 0.03em 0.05em rgba(0, 0, 0, 0.45);
}

.sym--prop {
    --sym-fg: #fff;
    background: radial-gradient(circle at 35% 30%, #4a4a4a, #111 70%);
    box-shadow: 0 0 0 0.06em rgba(255, 255, 255, 0.85);
}

.sym--prop > svg { width: 62%; height: 62%; }

/* ---- Pokémon: energie ---- */

.sym--energy {
    --sym-fg: #1b1b1b;
    box-shadow: 0 0 0 0.07em #fff, 0 0.05em 0.12em rgba(0, 0, 0, 0.45);
}

.sym--energy.is-grass     { --sym-bg: radial-gradient(circle at 32% 28%, #b4ec84, #4fa33d 62%, #2f7a2a); --sym-cut: #4fa33d; }
.sym--energy.is-fire      { --sym-bg: radial-gradient(circle at 32% 28%, #ff9b7a, #e5412b 62%, #a8261a); --sym-cut: #e5412b; }
.sym--energy.is-water     { --sym-bg: radial-gradient(circle at 32% 28%, #8fd6ff, #2f8fd8 62%, #1d5fa3); --sym-cut: #2f8fd8; }
.sym--energy.is-lightning { --sym-bg: radial-gradient(circle at 32% 28%, #fff3a1, #f4c51a 62%, #c99100); --sym-cut: #f4c51a; }
.sym--energy.is-psychic   { --sym-bg: radial-gradient(circle at 32% 28%, #d7a6f2, #8e55c0 62%, #5f2f8e); --sym-cut: #8e55c0; }
.sym--energy.is-fighting  { --sym-bg: radial-gradient(circle at 32% 28%, #f2b27d, #c3672f 62%, #8a4119); --sym-cut: #c3672f; }
.sym--energy.is-darkness  { --sym-bg: radial-gradient(circle at 32% 28%, #5e7d8c, #22363f 62%, #111b20); --sym-fg: #e8f1f4; --sym-cut: #22363f; }
.sym--energy.is-metal     { --sym-bg: radial-gradient(circle at 32% 28%, #eef2f5, #9aa6ae 62%, #66727a); --sym-cut: #9aa6ae; }
.sym--energy.is-dragon    { --sym-bg: radial-gradient(circle at 32% 28%, #f0dc8a, #b39432 62%, #7c6418); --sym-cut: #b39432; }
.sym--energy.is-fairy     { --sym-bg: radial-gradient(circle at 32% 28%, #ffc2de, #e2619f 62%, #a93570); --sym-fg: #fff; --sym-cut: #e2619f; }
.sym--energy.is-colorless { --sym-bg: radial-gradient(circle at 32% 28%, #ffffff, #e2e0da 62%, #b9b6ad); --sym-cut: #e2e0da; }

/* ---- Magic: mana ---- */

.sym--mana {
    --sym-fg: #0d0f0f;
    box-shadow: -0.06em 0.07em 0 #0b0b0b;
}

.sym--mana > svg { width: 70%; height: 70%; }
.sym--mana.is-W { --sym-bg: #f8f6d8; --sym-cut: #f8f6d8; }
.sym--mana.is-U { --sym-bg: #c1d7e9; --sym-cut: #c1d7e9; }
.sym--mana.is-B { --sym-bg: #bab1ab; --sym-cut: #bab1ab; }
.sym--mana.is-R { --sym-bg: #e49977; --sym-cut: #e49977; }
.sym--mana.is-G { --sym-bg: #a3c095; --sym-cut: #a3c095; }
.sym--mana.is-C,
.sym--mana.is-T,
.sym--mana.is-generic { --sym-bg: #cac5c0; --sym-cut: #cac5c0; }

.sym-num {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 700;
    font-size: 0.78em;
    line-height: 1;
    margin-top: -0.06em;
}

/* ---- Dragon Ball: sfera ---- */

.sym--dball {
    --sym-fg: #d3261c;
    background: radial-gradient(circle at 34% 28%, #fff7d6 0 7%, #ffcf5a 20%, #f59a17 58%, #b85a00 100%);
    box-shadow: inset -0.05em -0.07em 0.12em rgba(120, 40, 0, 0.45), 0 0.03em 0.08em rgba(0, 0, 0, 0.35);
}

.sym--dball > svg { width: 100%; height: 100%; }

.sym--glyph { background: none; }
.sym--glyph > svg { width: 100%; height: 100%; }