/* === 02. WALKA ============================================================= */

/* --- 02.1 Panele, log i podstawowy UI walki --- */
.gothic-panel {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    padding: 10px;
    backdrop-filter: blur(8px);
    border-color: rgba(197,160,89,.46);
    background-color: rgba(10,8,6,.80);
}

#status-side-panel {
    position: absolute;
    left: 32px;
    top: 24px;
    width: 544px;
    height: 406px;
    padding: 42px 50px 38px;
    border: 0;
    background: transparent url("../image/ui/fight_log_window.png") center / 100% 100% no-repeat;
    box-shadow: none;
    backdrop-filter: none;
}

#log-box {
    overflow-y: auto;
    padding: 10px 0 0 0;
    margin-top: 8px;
    border-left: 1px solid rgba(197, 160, 89, 0.2);
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 250px;
    border-left-color: rgba(197,160,89,.28);
    padding-right: 8px;
}

#log-box::-webkit-scrollbar {
    width: 8px;
}

#log-box::-webkit-scrollbar-thumb {
    background: rgba(197, 160, 89, 0.4);
    border-radius: 999px;
}

.log-entry {
    font-size: 12px;
    line-height: 1.45;
    color: #c7c7c7;
    white-space: pre-line;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-entry.action {
    color: #e2e2e2;
}

.log-entry.damage {
    color: #ffb4b4;
}

.log-entry.defense {
    color: #a9c7ff;
}

.log-entry.heal {
    color: #9ae6b4;
}

.log-entry.status {
    color: #d8c7ff;
}

.log-entry.system {
    color: #d0c6b0;
}

.log-entry.warning {
    color: #ffd28a;
}

.log-entry.result {
    color: #f2d48e;
    font-weight: 700;
}

.log-entry.reward {
    color: #f0cb84;
    font-weight: 700;
}

.log-entry.is-upgraded-skill {
    border-bottom-color: rgba(218, 179, 94, .25);
}
.log-upgraded-badge {
    display: inline-block;
    margin-right: 3px;
    padding: 1px 5px;
    border: 1px solid rgba(218, 179, 94, .58);
    color: #f0d293;
    font: 700 9px/1.25 var(--font-title);
    letter-spacing: .06em;
    vertical-align: 1px;
    background: rgba(79, 22, 14, .72);
    box-shadow: 0 0 7px rgba(185, 121, 43, .2);
}

.log-turn-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 6px 0 4px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.22);
}

.log-turn-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #050505;
    background: #c5a059;
    border-radius: 999px;
    padding: 2px 8px;
}

.log-turn-owner {
    font-size: 12px;
    font-weight: 700;
    color: #e7d4a6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#center-action {
    position: absolute;
    z-index: 25;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 240px;
    top: 54% !important;
}

#status-tooltip {
    position: absolute;
    z-index: 30;
    width: 260px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

#status-tooltip.visible {
    opacity: 1;
}

#status-tooltip-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
}

#status-tooltip-desc {
    font-size: 11px;
    line-height: 1.35;
    color: #c9c9c9;
}

#status-tooltip-meta {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 6px;
    color: #9ca3af;
}

#status-text {
    font-size: 22px;
    line-height: 1;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 4px;
    text-shadow: 0 2px 0 #000;
    z-index: 3;
}

#status-side-panel .mb-4 {
    margin-top: 0px;
    margin-bottom: 8px;
    text-align: center;
}

#hint-text {
    color: #b9a479;
}

.mission-dialogue {
    position: absolute;
    z-index: 120;
    inset: 0;
    display: block;
    pointer-events: auto;
    opacity: 0;
    cursor: pointer;
    transition: opacity .3s ease;
}

.mission-dialogue[hidden] {
    display: none;
}

.mission-dialogue.is-visible {
    opacity: 1;
}

.mission-dialogue::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    pointer-events: none;
    content: "";
}

.mission-dialogue--canvas-layered::before {
    display: none;
}

.mission-dialogue--npc-card::before {
    background:
        radial-gradient(circle at 80% 28%, rgba(116, 86, 46, .08), transparent 25%),
        rgba(0, 0, 0, .78);
}

.mission-dialogue:focus {
    outline: none;
}

.mission-dialogue-copy {
    position: absolute;
    z-index: 2;
    left: 710px;
    top: 238px;
    width: 610px;
    min-height: 116px;
    padding: 24px 12px;
    color: #e2d1ad;
    font: 400 18px/1.45 MedievalSharp, serif;
    text-shadow: 0 2px 2px #000;
}

.mission-dialogue-npc-card {
    position: absolute;
    z-index: 3;
    left: 1386px;
    top: 32px;
    width: 300px;
    height: 400px;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(520px, 0, 0) scale(.985);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .72));
    transition:
        transform 620ms cubic-bezier(.16, .86, .22, 1),
        opacity 260ms ease;
}

.mission-dialogue--npc-card.is-visible .mission-dialogue-npc-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.mission-dialogue-copy::before,
.mission-dialogue-copy::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #b68a43 12%, #e1bd72 50%, #b68a43 88%, transparent);
    box-shadow: 0 0 7px rgba(218, 175, 93, .32);
    content: "";
}

.mission-dialogue-copy::before {
    top: 0;
}

.mission-dialogue-copy::after {
    bottom: 0;
}

.mission-dialogue-line {
    margin: 0;
    opacity: 0;
    animation: missionDialogueLineIn .42s cubic-bezier(.2, .75, .2, 1) forwards;
}

.mission-dialogue-line + .mission-dialogue-line {
    margin-top: 13px;
}

.mission-dialogue-line:nth-child(odd) {
    --mission-line-offset: -14px;
    transform: translateX(-42px);
}

.mission-dialogue-line:nth-child(even) {
    --mission-line-offset: 14px;
    transform: translateX(42px);
}

.mission-dialogue-line__speaker {
    display: block;
    margin-bottom: 3px;
    color: #cba764;
    font-size: 17px;
}

@keyframes missionDialogueLineIn {
    to {
        opacity: 1;
        transform: translateX(var(--mission-line-offset));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mission-dialogue {
        transition: none;
    }

    .mission-dialogue-line {
        animation: none;
        opacity: 1;
        transform: translateX(var(--mission-line-offset));
    }

    .mission-dialogue-npc-card {
        transition: none;
    }
}


/* === 03. KOSCI ============================================================= */

/* --- 03.1 Kosci plaskie i 3D --- */
#dice-wrapper {
    transition: opacity 0.3s;
    align-items: center;
    min-height: 280px !important;
    gap: 14px !important;
}

.dice {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #111;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    position: relative;
    padding: 0;
    image-rendering: pixelated;
    width: 128px !important;
    height: 128px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dice-discard-card { width: var(--discard-card-width) !important; height: var(--discard-card-height) !important; border-radius: 0; overflow: visible; cursor: pointer; color: var(--discard-card-base-color); font-family: var(--discard-card-font-family); text-shadow: var(--discard-card-text-shadow); transform-origin: center; transform-style: preserve-3d; will-change: transform; }

.dice-discard-card.is-flipping {
    pointer-events: none;
    animation: skillPreviewCardFlip .72s cubic-bezier(.22,.78,.18,1) both;
    animation-delay: var(--discard-flip-delay, 0ms);
}

.dice-discard-card::before { content: ""; position: absolute; inset: calc((var(--discard-card-height) - var(--discard-card-back-height)) / 2) 0 auto; height: var(--discard-card-back-height); background: transparent var(--discard-card-back-image) center / 100% 100% no-repeat; opacity: 0; visibility: hidden; pointer-events: none; image-rendering: pixelated; }

.dice-discard-card.is-flipping::before {
    animation: skillPreviewBackFace .72s linear both;
    animation-delay: var(--discard-flip-delay, 0ms);
}

.dice-discard-card__frame { position: absolute; inset: 0; background: transparent var(--discard-card-front-image) center / 100% 100% no-repeat; pointer-events: none; }

.dice-discard-card::after { content: ""; position: absolute; inset: -24px 0 0; pointer-events: inherit; }

.dice-discard-card__visual { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.dice-discard-card.is-discard-extra .dice-discard-card__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent url("../image/cards/run/run_delete.png") center / 100% 100% no-repeat;
    transform: rotate(var(--discard-extra-angle, 0deg));
}

.dice-discard-card.is-flipping .dice-discard-card__frame,
.dice-discard-card.is-flipping .dice-discard-card__icon,
.dice-discard-card.is-flipping .dice-discard-card__copy {
    animation: skillPreviewFrontFace .72s linear both;
    animation-delay: var(--discard-flip-delay, 0ms);
}

.dice-discard-card__icon { position: absolute; left: 50%; top: var(--discard-card-icon-top); width: var(--discard-card-icon-size); height: var(--discard-card-icon-size); transform: translateX(-50%); background-repeat: no-repeat; pointer-events: none; }

.skill-preview-card__number { position: absolute; left: var(--skill-card-face-x); top: var(--skill-card-face-y); width: var(--skill-card-face-size); height: var(--skill-card-face-size); z-index: var(--skill-card-face-z); background-repeat: no-repeat; background-size: var(--skill-card-face-atlas-width) var(--skill-card-face-size); background-position: calc(var(--skill-face-index, 0) * var(--skill-card-face-size) * -1) 0; pointer-events: none; }

.dice-discard-card__icon { background-image: var(--discard-card-icon-image); background-size: var(--discard-card-icon-atlas-width) var(--discard-card-icon-atlas-height); background-position: calc(var(--dice-icon-col, 0) * var(--discard-card-icon-size) * -1) calc(var(--dice-icon-row, 0) * var(--discard-card-icon-size) * -1); image-rendering: auto; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .66)); }

.dice-discard-card__copy { position: absolute; left: var(--discard-card-copy-x); right: var(--discard-card-copy-x); bottom: var(--discard-card-copy-bottom); height: var(--discard-card-copy-height); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--discard-card-copy-gap); text-align: center; text-shadow: var(--discard-card-text-shadow); pointer-events: none; }

.skill-preview-card__copy,
.dice-skill-card__copy { position: absolute; left: var(--skill-card-copy-x); right: var(--skill-card-copy-x); bottom: var(--skill-card-copy-bottom); height: var(--skill-card-copy-height); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--skill-card-copy-gap); text-align: center; text-shadow: var(--skill-card-text-shadow); pointer-events: none; }

.skill-preview-card__copy,
.dice-skill-card__copy {
    z-index: var(--skill-card-copy-z);
}

.dice-discard-card__type { margin: 0; color: var(--discard-card-type-color); font-family: var(--discard-card-font-family); font-size: var(--discard-card-type-size); font-weight: var(--discard-card-type-weight); line-height: var(--discard-card-type-line); text-align: center; transform: none; }

#skill-preview-type,
.dice-skill-card__type { margin: 0; color: var(--skill-card-type-color); font-family: var(--skill-card-font-family); font-size: var(--skill-card-type-size); font-weight: var(--skill-card-type-weight); line-height: var(--skill-card-type-line); text-align: center; transform: none; }

.dice-discard-card__title { margin: var(--discard-card-type-title-gap) 0 0; color: var(--discard-card-title-color); font-family: var(--discard-card-font-family); font-size: var(--discard-card-title-size); font-weight: var(--discard-card-title-weight); line-height: var(--discard-card-title-line); text-align: center; transform: none; }

#skill-name,
.dice-skill-card__title { margin: var(--skill-card-type-title-gap) 0 0; color: var(--skill-card-title-color); font-family: var(--skill-card-font-family); font-size: var(--skill-card-title-size); font-weight: var(--skill-card-title-weight); line-height: var(--skill-card-title-line); text-align: center; transform: none; }

.dice-discard-card__desc { max-width: none; margin: 0; color: var(--discard-card-description-color); font-family: var(--discard-card-font-family); font-size: var(--discard-card-description-size); font-weight: var(--discard-card-description-weight); line-height: var(--discard-card-description-line); text-align: center; white-space: pre-line; transform: none; }

.dice-discard-card__desc .skill-preview-card__emphasis {
    color: var(--discard-card-emphasis-color);
    font-weight: var(--discard-card-emphasis-weight);
    text-shadow: var(--discard-card-text-shadow);
}

#skill-desc,
.dice-skill-card__desc { max-width: none; margin: 0; color: var(--skill-card-description-color); font-family: var(--skill-card-font-family); font-size: var(--skill-card-description-size); font-weight: var(--skill-card-description-weight); line-height: var(--skill-card-description-line); text-align: center; white-space: pre-line; transform: none; }

.skill-preview-card__upgrade-label { font-size: var(--skill-card-upgrade-size); }
.skill-preview-card__copy .skill-preview-card__emphasis,
.dice-skill-card__copy .skill-preview-card__emphasis {
    color: var(--skill-card-emphasis-color);
    font-weight: var(--skill-card-emphasis-weight);
    text-shadow: var(--skill-card-text-shadow);
}

.dice.discarded {
    opacity: 0;
    transform: scale(0.1) rotate(180deg);
    pointer-events: none;
    filter: grayscale(1);
}

.dice.flew-away {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
    pointer-events: none;
}

.dice:not(.dice-discard-card):not(.discarded):not(.flew-away):not(.hidden-dice):hover {
    z-index: 80;
    transform: translateY(-14px) scale(1.05);
    box-shadow: none;
}

.dice-discard-card:not(.discarded):not(.flew-away):not(.hidden-dice):hover {
    z-index: 80;
}

.dice.off {
    border-color: #ff4d4d;
}

.dice.def {
    border-color: #4d79ff;
}

.dice.sup {
    border-color: #4dff88;
}

.dice-roll-stage {
    display: flex;
    opacity: 0;
    position: absolute;
    top: -20px;
    width: 400px;
    height: 200px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 50;
}

.dice-roll-stage.visible {
    opacity: 1;
}

.dice-roll-stage.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#dice-webgl-canvas {
    position: absolute;
    left: -400px;
    top: -300px;
    z-index: 2;
    width: 1200px;
    height: 800px;
    pointer-events: none;
}

.dice-webgl-fallback {
    display: none;
    width: var(--dice-roll-size);
    height: var(--dice-roll-size);
    background-size: 432px 72px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.dice-roll-stage.is-webgl-fallback .dice-webgl-fallback {
    display: block;
}

#dice-hover-fx-layer {
    position: absolute;
    inset: 0;
    z-index: 130;
    pointer-events: none;
}

.dice-hover-aura {
    --dice-aura-color: #d8bd87;
    --dice-aura-accent: #f0cb84;
    position: absolute;
    width: calc(var(--dice-roll-size) * 1.64);
    height: calc(var(--dice-roll-size) * 1.64);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity .12s ease-out;
}

.dice-hover-aura.active {
    opacity: 1;
    will-change: left, top, opacity;
}

.dice-hover-aura .aura-glow,
.dice-hover-aura .aura-cloud,
.dice-hover-aura .aura-bolt {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen;
    pointer-events: none;
}

.dice-hover-aura .aura-glow,
.dice-hover-aura .aura-cloud {
    background-color: color-mix(in srgb, var(--dice-aura-color) 88%, var(--dice-aura-accent) 12%);
    filter:
        brightness(1.06)
        saturate(.76)
        drop-shadow(0 0 4px color-mix(in srgb, var(--dice-aura-color) 86%, #f4ddb0 14%))
        drop-shadow(0 0 11px color-mix(in srgb, var(--dice-aura-color) 82%, var(--dice-aura-accent) 18%));
}

.dice-hover-aura .aura-bolt {
    background-color: color-mix(in srgb, var(--dice-aura-color) 78%, #f7e4b4 22%);
    filter:
        brightness(1.34)
        saturate(.82)
        drop-shadow(0 0 6px color-mix(in srgb, var(--dice-aura-color) 74%, #fff0c2 26%))
        drop-shadow(0 0 16px color-mix(in srgb, var(--dice-aura-color) 88%, var(--dice-aura-accent) 12%));
}

.dice-hover-aura .aura-glow {
    inset: calc(var(--dice-roll-size) * .25);
    background-image: none;
    -webkit-mask: url("../image/particle/flare_01.png") center / contain no-repeat;
    mask: url("../image/particle/flare_01.png") center / contain no-repeat;
    opacity: .42;
}

.dice-hover-aura.active .aura-glow {
    animation: diceAuraGlow 1.18s ease-in-out infinite;
}

.dice-hover-aura .cloud-a {
    background-image: none;
    -webkit-mask: url("../image/particle/spark_01.png") center / contain no-repeat;
    mask: url("../image/particle/spark_01.png") center / contain no-repeat;
    opacity: 0;
}

.dice-hover-aura.active .cloud-a {
    animation: diceAuraCloudA .96s steps(1, end) infinite;
}

.dice-hover-aura .cloud-b {
    inset: calc(var(--dice-roll-size) * .056);
    background-image: none;
    -webkit-mask: url("../image/particle/spark_04.png") center / contain no-repeat;
    mask: url("../image/particle/spark_04.png") center / contain no-repeat;
    opacity: 0;
}

.dice-hover-aura.active .cloud-b {
    animation: diceAuraCloudB 1.22s steps(1, end) infinite;
}

.dice-hover-aura .bolt-a {
    inset: calc(var(--dice-roll-size) * .11) calc(var(--dice-roll-size) * .33);
    background-image: none;
    -webkit-mask: url("../image/particle/spark_05.png") center / contain no-repeat;
    mask: url("../image/particle/spark_05.png") center / contain no-repeat;
    opacity: 0;
}

.dice-hover-aura.active .bolt-a {
    animation: diceAuraBoltA .68s steps(1, end) infinite;
}

.dice-hover-aura .bolt-b {
    inset: calc(var(--dice-roll-size) * .14) calc(var(--dice-roll-size) * .42);
    background-image: none;
    -webkit-mask: url("../image/particle/spark_06.png") center / contain no-repeat;
    mask: url("../image/particle/spark_06.png") center / contain no-repeat;
    opacity: 0;
}

.dice-hover-aura.active .bolt-b {
    animation: diceAuraBoltB .84s steps(1, end) infinite;
}

.dice-hover-aura .bolt-c {
    inset: calc(var(--dice-roll-size) * .39) calc(var(--dice-roll-size) * .14);
    background-image: none;
    -webkit-mask: url("../image/particle/spark_07.png") center / contain no-repeat;
    mask: url("../image/particle/spark_07.png") center / contain no-repeat;
    opacity: 0;
}

.dice-hover-aura.active .bolt-c {
    animation: diceAuraBoltC .74s steps(1, end) infinite;
}

@keyframes diceAuraGlow {
    0%, 100% { opacity: .26; transform: scale(.86); }
    42% { opacity: .62; transform: scale(1.06); }
    68% { opacity: .36; transform: scale(.94); }
}

@keyframes diceAuraCloudA {
    0%, 14%, 58%, 100% { opacity: 0; transform: rotate(-12deg) scale(.78); }
    15% { opacity: .84; transform: rotate(-8deg) scale(.96); }
    24% { opacity: .30; transform: rotate(-2deg) scale(1.02); }
    39% { opacity: .66; transform: rotate(5deg) scale(1.06); }
}

@keyframes diceAuraCloudB {
    0%, 23%, 66%, 100% { opacity: 0; transform: rotate(18deg) scale(.82); }
    24% { opacity: .72; transform: rotate(10deg) scale(.94); }
    35% { opacity: .22; transform: rotate(2deg) scale(1.04); }
    49% { opacity: .62; transform: rotate(-8deg) scale(1.02); }
}

@keyframes diceAuraBoltA {
    0%, 18%, 47%, 100% { opacity: 0; transform: translate3d(-18px, -4px, 0) rotate(18deg) scale(.82); }
    19% { opacity: 1; transform: translate3d(-6px, -2px, 0) rotate(12deg) scale(.96); }
    28% { opacity: .24; transform: translate3d(2px, 1px, 0) rotate(6deg) scale(1.02); }
    37% { opacity: .82; transform: translate3d(10px, 3px, 0) rotate(-2deg) scale(.92); }
}

@keyframes diceAuraBoltB {
    0%, 31%, 72%, 100% { opacity: 0; transform: translate3d(18px, -8px, 0) rotate(-16deg) scale(.78); }
    32% { opacity: .98; transform: translate3d(9px, -4px, 0) rotate(-10deg) scale(.92); }
    43% { opacity: .20; transform: translate3d(0, 1px, 0) rotate(-3deg) scale(1.04); }
    57% { opacity: .78; transform: translate3d(-10px, 5px, 0) rotate(7deg) scale(.96); }
}

@keyframes diceAuraBoltC {
    0%, 9%, 52%, 100% { opacity: 0; transform: translate3d(-12px, 12px, 0) rotate(-10deg) scale(.84); }
    10% { opacity: 1; transform: translate3d(-4px, 5px, 0) rotate(-4deg) scale(.96); }
    22% { opacity: .22; transform: translate3d(3px, 0, 0) rotate(2deg) scale(1.02); }
    36% { opacity: .80; transform: translate3d(11px, -6px, 0) rotate(9deg) scale(.94); }
}

.dice-roll-hitbox {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: calc(var(--dice-roll-size) * -.5) 0 0 calc(var(--dice-roll-size) * -.5);
    width: var(--dice-roll-size);
    height: var(--dice-roll-size);
}

.dice-roll-hitbox.interactive {
    pointer-events: auto;
    z-index: 60;
}

.dice-roll-hitbox.interactive:hover {
    z-index: 120;
}

/* Wymuszona tura Szaleństwa pozostaje prezentacją autorytatywnych zdarzeń serwera. */
body.madness-presentation-active .dice-discard-card.is-madness-forced {
    filter: brightness(.86) saturate(.82) drop-shadow(0 0 12px rgba(126, 34, 206, .72));
}

body.madness-presentation-active .dice-discard-card.is-madness-choice {
    filter: brightness(1.08) saturate(1.18) drop-shadow(0 0 14px rgba(192, 132, 252, .96)) drop-shadow(0 0 30px rgba(107, 33, 168, .78));
}

.dice-roll-stage.is-madness-roll {
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, .24)) drop-shadow(0 0 14px rgba(88, 28, 135, .16));
}

.dice-roll-stage.is-madness-roll .dice-roll-hitbox.is-madness-choice {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(216, 180, 254, .76), 0 0 22px 9px rgba(147, 51, 234, .72);
    animation: madnessForcedChoicePulse .52s ease-in-out infinite alternate;
}

.dice-roll-stage.is-enemy-roll .dice-roll-hitbox.is-enemy-choice {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .78), 0 0 24px 10px rgba(127, 29, 29, .72);
    animation: enemyDiceChoicePulse .52s ease-in-out infinite alternate;
}

@keyframes enemyDiceChoicePulse {
    from { box-shadow: 0 0 0 2px rgba(248, 113, 113, .62), 0 0 17px 7px rgba(127, 29, 29, .5); }
    to { box-shadow: 0 0 0 4px rgba(254, 202, 202, .92), 0 0 31px 13px rgba(153, 27, 27, .78); }
}

@keyframes madnessForcedChoicePulse {
    from { box-shadow: 0 0 0 2px rgba(216, 180, 254, .62), 0 0 16px 7px rgba(147, 51, 234, .52); }
    to { box-shadow: 0 0 0 4px rgba(233, 213, 255, .92), 0 0 30px 13px rgba(126, 34, 206, .78); }
}