/* FURIA DEGLI ELEMENTI — CRISTALLI ELEMENTALI
   Grafica geometrica, tagli netti e dettagli da cristalli magici.
*/

:root {
    --game-bg: #111018;
    --game-panel: #1c1a29;
    --game-text: #fff8f0;
    --game-muted: #c6bfce;
    --game-accent: #ffd34f;
    --game-line: #ffffff24;
    --button-text: #19131a;
    --box-bg: #191724;

    --hero-bg:
        radial-gradient(circle at 77% 30%, #ff4b5330, transparent 24%),
        radial-gradient(circle at 88% 65%, #2c9fff35, transparent 24%),
        radial-gradient(circle at 65% 82%, #8b54ff35, transparent 22%),
        radial-gradient(circle at 42% 18%, #ffe34d24, transparent 23%),
        linear-gradient(135deg, #111018, #201629 55%, #101722);
}

/* HEADER */

.furia-page .game-header {
    background: color-mix(in srgb, #111018 92%, transparent);
}

/* HERO */

.furia-page .game-hero {
    isolation: isolate;
}

.furia-page .game-hero:after {
    background: linear-gradient(
        90deg,
        #111018 0%,
        #111018e8 29%,
        #1110188c 52%,
        transparent 82%
    );
}

.furia-page .game-hero-art {
    position: absolute;
    right: 7%;
    top: 12%;
    width: 40vw;
    max-width: 490px;
    aspect-ratio: 1;

    border: 1px solid #ffffff70;
    border-radius: 24% 38% 22% 40%;

    background:
        radial-gradient(circle at 50% 50%, #fffbdc 0 3%, #ffe45b 4% 8%, #ff7546 9% 14%, transparent 35%),
        radial-gradient(circle at 22% 22%, #f0444d 0 5%, transparent 23%),
        radial-gradient(circle at 78% 22%, #35a9ff 0 6%, transparent 24%),
        radial-gradient(circle at 78% 78%, #a06aff 0 6%, transparent 24%),
        radial-gradient(circle at 22% 78%, #35d17d 0 6%, transparent 24%),
        radial-gradient(circle at 50% 5%, #ffe45c 0 5%, transparent 22%),
        radial-gradient(circle at 50% 95%, #ff6bc4 0 5%, transparent 22%);

    box-shadow:
        inset 0 0 0 10px #ffffff08,
        0 10px 24px #00000055,
        0 0 55px #e5a52c28;

    animation: furia-orbit 24s linear infinite;
}

.furia-page .game-hero-art:before,
.furia-page .game-hero-art:after {
    content: "";
    position: absolute;
}

.furia-page .game-hero-art:before {
    inset: 10%;
    border-radius: 4%;
    transform: rotate(45deg);
    border: 2px solid #ffffff8a;
    box-shadow:
        0 0 0 7px #ffd34f13,
        0 0 28px #a06aff25;
}

.furia-page .game-hero-art:after {
    inset: 24%;
    border-radius: 3%;
    transform: rotate(45deg);
    border: 2px solid #6acaffb0;
    box-shadow: 0 0 25px #35a9ff30;
}

.furia-page .game-hero h1 {
    color: #fff8f0;
    text-shadow: 0 3px 22px #00000070;
    font-size: clamp(3.5rem, 9vw, 7.2rem);
}

.furia-page .game-hero h1 em {
    background: linear-gradient(
        100deg,
        #ff5757 0%,
        #ff8d45 19%,
        #ffdc4d 37%,
        #40d782 56%,
        #39b7ff 74%,
        #ad7aff 90%,
        #ff70c8 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
}

.furia-page .eyebrow {
    color: #ffd34f;
}

.furia-page .game-hero .lead {
    color: #d4d3e2;
}

/* BUTTONS */

.furia-page .game-button {
    background: linear-gradient(110deg, #ffd34f, #ffb43e);
    border-color: #ffd34f;
    box-shadow:
        0 4px 0 #a96b21,
        0 8px 22px #ffbf2b22;

    clip-path: polygon(
        0 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% 100%,
        10px 100%,
        0 calc(100% - 10px)
    );

    border-radius: 0;
}

.furia-page .game-button.secondary {
    color: #fff8f0;
    border-color: #ffffff4a;
    box-shadow: none;
    background: #ffffff08;
}

.furia-page .game-button.secondary:hover {
    border-color: #40baff;
    color: #76ceff;
}

/* SECTION TITLES */

.furia-page .section-title span {
    background: linear-gradient(
        90deg,
        #ff5757,
        #ffbd42,
        #ffe45c,
        #40d782,
        #39b7ff,
        #ad7aff
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* FACT CARDS */

.furia-page .fact {
    border-radius: 4px;
    background: linear-gradient(135deg, #242033, #171520);
    box-shadow: 0 7px 22px #00000020, inset 0 1px #ffffff0c;
    border-color: #ffffff20;
    position: relative;
    overflow: hidden;

    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% 100%,
        0 100%
    );
}

.furia-page .fact:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;

    background: linear-gradient(
        180deg,
        #ff5757,
        #ffd447,
        #40d782,
        #39b7ff,
        #ad7aff,
        #ff70c8
    );
}

.furia-page .fact small {
    color: #ffd34f;
}

/* PLACEHOLDER */

.furia-page .box-placeholder {
    border-radius: 5px;
    background: linear-gradient(135deg, #201827, #141621);
    border: 1px solid #ffffff35;
    box-shadow:
        inset 0 0 0 7px #ffffff04,
        0 16px 35px #0005;
}

.furia-page .box-placeholder:before {
    inset: 12px;
    border: 1px solid #ffd4478c;
    border-radius: 2px;
    transform: rotate(-1deg);
}

.furia-page .box-placeholder span {
    color: #fff8f0;
}

.furia-page .box-placeholder small {
    color: #c6bfce;
}

/* RULES */

.furia-page .rule-trigger {
    padding-left: 12px;
    border-left: 2px solid #ffffff12;
}

.furia-page .rule-trigger:hover {
    color: #55c0ff;
}

.furia-page .rule-symbol {
    color: #ffd34f;
}

.furia-page .rule-item:nth-child(4n+1) .rule-symbol {
    color: #ff6565;
}

.furia-page .rule-item:nth-child(4n+2) .rule-symbol {
    color: #55baff;
}

.furia-page .rule-item:nth-child(4n+3) .rule-symbol {
    color: #53db8a;
}

.furia-page .rule-item:nth-child(4n) .rule-symbol {
    color: #ffd447;
}

.furia-page .rule-item:nth-child(4n+1) .rule-trigger {
    border-left-color: #ff5757;
}

.furia-page .rule-item:nth-child(4n+2) .rule-trigger {
    border-left-color: #39b7ff;
}

.furia-page .rule-item:nth-child(4n+3) .rule-trigger {
    border-left-color: #40d782;
}

.furia-page .rule-item:nth-child(4n) .rule-trigger {
    border-left-color: #ffd447;
}

/* NOTICE */

.furia-page .notice {
    background: linear-gradient(100deg, #20212d, #1c1a29);
    border-left-color: #ffd34f;
    color: #c7c7d7;
}

/* FOOTER */

.furia-page .game-footer {
    background: #111018;
}

.furia-page .game-footer a:hover {
    color: #ffd34f;
}

/* ANIMATIONS */

@keyframes furia-orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* RESPONSIVE */

@media (max-width: 700px) {
    .furia-page .game-hero:after {
        background: linear-gradient(
            90deg,
            #111018f5,
            #111018d9 65%,
            #1110188c
        );
    }

    .furia-page .game-hero-art {
        width: 74vw;
        right: -25%;
        top: 24%;
        opacity: .55;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .furia-page .game-hero-art {
        animation: none;
    }
}