/* === EKRAN KOŚCI ========================================================== */

#dice-view {
    padding: 0;
    overflow: hidden;
    background: #020202 url("../image/bg/dice.png") center / 1920px 1080px no-repeat;
}

#dice-fx-canvas {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 1920px;
    height: 960px;
    pointer-events: none;
}

.dice-progress,
.dice-selector,
.dice-skills,
.dice-skill-details {
    position: absolute;
    z-index: 2;
}

.dice-progress {
    left: 354px;
    top: 42px;
    width: 1120px;
    height: 112px;
}

.dice-progress__bar {
    position: absolute;
    inset: 24px 0 auto;
    height: 72px;
    background: transparent url("../image/ui/skillprogress_frame.png") center / 1120px 72px no-repeat;
}

.dice-progress__fill {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--dice-progress-percent, 0%);
    height: 72px;
    overflow: hidden;
    transition: width .6s cubic-bezier(.22, .78, .18, 1);
}

.dice-progress__fill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1120px;
    height: 72px;
    background: transparent url("../image/ui/skillprogress_bar.png") center / 1120px 72px no-repeat;
}

.dice-progress__levels {
    position: absolute;
    left: 58px;
    right: 58px;
    top: 4px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    justify-items: center;
}

.dice-progress-level {
    position: relative;
    width: 112px;
    height: 112px;
    padding: 0;
    border: 0;
    display: grid;
    place-items: center;
    color: #bca177;
    font: 700 16px/1 var(--font-title);
    text-shadow: 0 2px 0 #000;
    background: transparent;
    cursor: default;
    appearance: none;
    isolation: isolate;
    transition: color .25s ease, filter .25s ease, transform .25s ease;
}

.dice-progress-level__frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent url("../image/ui/skillprogress_level.png") center / 112px 112px no-repeat;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    will-change: transform;
}

.dice-progress-level__label {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.dice-progress-level.is-unlocked {
    color: #ead29d;
    filter: drop-shadow(0 0 8px rgba(185, 121, 43, .7));
}

.dice-selector {
    left: 84px;
    top: 174px;
    width: 292px;
    height: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.dice-selector-button {
    position: relative;
    width: 224px;
    height: 224px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    isolation: isolate;
}

.dice-selector-button:focus-visible {
    outline: 2px solid #d8bd7a;
    outline-offset: 5px;
    border-radius: 50%;
}

.dice-selector-button__frame {
    position: absolute;
    inset: -8px;
    z-index: 1;
    background: transparent url("../image/ui/dice_frame.png") center / 240px 240px no-repeat;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .82));
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
}

.dice-selector-button__icon {
    position: absolute;
    left: 48px;
    top: 48px;
    z-index: 2;
    width: 128px;
    height: 128px;
    background-image: url("../image/dice/player/dice_icon.png");
    background-size: 1536px 384px;
    background-position: calc(var(--dice-icon-col, 0) * -128px) calc(var(--dice-icon-row, 0) * -128px);
    background-repeat: no-repeat;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .9));
    transform: scale(.9);
    transition: transform .25s ease;
}

.dice-selector-button__label {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 3;
    width: 210px;
    padding: 7px 16px 6px;
    box-sizing: border-box;
    transform: translateX(-50%);
    color: #cdbb9b;
    font: 700 13px/1.12 var(--font-title);
    text-align: center;
    text-transform: none;
    letter-spacing: .05em;
    text-shadow: 0 2px 3px #000, 0 0 8px #000;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .72) 18%, rgba(0, 0, 0, .92) 36%, rgba(0, 0, 0, .92) 64%, rgba(0, 0, 0, .72) 82%, transparent 100%);
    transition: color .25s ease;
}

.dice-selector-button:hover .dice-selector-button__icon {
    transform: scale(.95);
}

.dice-selector-button.is-selected .dice-selector-button__icon,
.dice-selector-button.is-selected:hover .dice-selector-button__icon {
    transform: scale(1);
}

.dice-skills {
    left: 406px;
    top: 164px;
    width: 966px;
    height: 754px;
}

.dice-skill-cards {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, var(--skill-card-width));
    grid-template-rows: repeat(2, var(--skill-card-height));
    align-content: center;
    justify-content: center;
    gap: 18px 34px;
    perspective: 1100px;
}

.dice-skill-card.is-changing-preview {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .12s ease, transform .16s ease;
    pointer-events: none;
}

.dice-skill-card {
    position: relative;
    width: var(--skill-card-width);
    height: var(--skill-card-height);
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: default;
    transform: none;
    transform-style: flat;
    transform-origin: 50% 50%;
    will-change: auto;
    transition: transform .18s ease;
}

.dice-skill-card[hidden] {
    display: none;
}

.dice-skill-card.has-skill {
    cursor: pointer;
}

.dice-skill-card:focus-visible {
    outline: 2px solid #d8bd7a;
    outline-offset: 4px;
}

.dice-skill-card__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: visible;
    background-position: center;
    background-size: var(--skill-card-width) var(--skill-card-height);
    background-repeat: no-repeat;
    image-rendering: auto;
    transform: none;
    will-change: auto;
}

.dice-skill-card__back {
    opacity: 1;
    visibility: visible;
    background-image: var(--skill-card-back-image);
}

.dice-skill-card__front { opacity: 0; visibility: hidden; }

.dice-skill-card__front::before { position: absolute; inset: 0; z-index: var(--skill-card-frame-z); background: transparent var(--skill-card-front-image) center / 100% 100% no-repeat; content: ""; pointer-events: none; }

.dice-skill-card.is-upgraded .dice-skill-card__front::before { background-image: var(--skill-card-front-plus-image); }

.dice-skill-card.has-skill .dice-skill-card__back {
    opacity: 0;
    visibility: hidden;
}

.dice-skill-card.has-skill .dice-skill-card__front {
    opacity: 1;
    visibility: visible;
}

.dice-skill-card.is-flipping {
    animation: skillPreviewCardFlip .72s cubic-bezier(.22, .78, .18, 1) both;
    animation-delay: var(--dice-card-flip-delay, 0ms);
    pointer-events: none;
    transform-style: preserve-3d;
    will-change: transform;
}

.dice-skill-card.is-flipping .dice-skill-card__face {
    backface-visibility: hidden;
    will-change: opacity, visibility;
}

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

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

.dice-skill-card.has-skill:not(.is-flipping):hover,
.dice-skill-card.has-skill:not(.is-flipping):focus-visible { transform: translateY(-6px); }

.dice-skill-card__number {
    background-position: calc(var(--dice-face-index, 0) * var(--skill-card-face-size) * -1) 0;
}

.dice-skills-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    margin: 0;
    transform: translate(-50%, -50%);
    color: #bca177;
    font: 600 14px/1.4 var(--font-title);
    text-align: center;
    text-shadow: 0 3px 8px #000;
    pointer-events: none;
    transition: opacity .2s ease;
}

.dice-skills-hint[hidden] {
    display: block;
    opacity: 0;
}

.dice-skill-details {
    padding: 152px 54px 78px;
    text-align: center;
}

.dice-class-summary {
    position: relative;
    width: 292px;
    margin: 0 auto;
}

.dice-class-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 34px;
    margin: 0;
    color: #caba95;
    font: 700 34px/1 var(--font-title);
    text-transform: uppercase;
}

.dice-class-name .class-picker-name-initial {
    display: flex;
}

.dice-progress__caption {
    margin-top: 12px;
    color: #bca177;
    font: 600 12px/1.35 var(--font-body);
    letter-spacing: .03em;
    text-shadow: 0 2px 4px #000;
}

.dice-skill-details__content {
    position: absolute;
    left: 43px;
    right: 43px;
    top: 224px;
    bottom: 232px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: visible;
}

.dice-skill-details__icons {
    flex: 0 0 64px;
    min-height: 64px;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.dice-skill-details__die-icon {
    width: 128px;
    height: 128px;
    opacity: 0;
    background-repeat: no-repeat;
    transition: opacity .18s ease;
    transform: scale(.56);
    transform-origin: 50% 50%;
    display: none;
    background-image: url("../image/dice/player/dice_icon.png");
    background-size: 1536px 384px;
    background-position: calc(var(--dice-icon-col, 0) * -128px) calc(var(--dice-icon-row, 0) * -128px);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .9));
}

.dice-skill-details.has-die .dice-skill-details__die-icon {
    display: block;
    opacity: 1;
}

.dice-skill-details__copy {
    width: 100%;
    flex: 0 0 auto;
    padding: 0 2px;
    box-sizing: border-box;
    overflow: visible;
}

.dice-skill-details__type {
    color: #cba86c;
    font: 700 12px/1.2 var(--font-title);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dice-skill-details h1 {
    margin: 10px 0 14px;
    color: #caba95;
    font: 700 20px/1.2 var(--font-title);
    text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .8);
}

.dice-skill-details p {
    margin: 0;
    color: #cdbb9b;
    font: 400 14px/1.45 var(--font-body);
    overflow-wrap: anywhere;
}

.dice-skill-details__boon {
    width: 100%;
    margin-top: 12px;
    padding: 8px 2px 0;
    box-sizing: border-box;
}

.dice-skill-details__boon[hidden] {
    display: none;
}

.dice-skill-details__boon-label {
    display: block;
    margin-bottom: 5px;
    color: #cba86c;
    font: 700 13px/1.2 var(--font-title);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dice-skill-details__boon p {
    color: #e1cfac;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 2px #000;
}
.dice-skill-details__boon p strong { color: #ffe3a2; font-weight: 700; }

.dice-boon-effect-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin: 12px 0;
    padding: 14px 20px;
    background: transparent url("../image/ui/text_field.png") center / 100% 100% no-repeat;
}
#dice-details-boon-description {
    min-width: 0;
    width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
}

.dice-skill-details.has-die #dice-details-description { display: none; }
.dice-boon-heading { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; }
.dice-boon-heading > strong { flex: 1; min-width: 0; color: #ead29d; font: 700 22px/1.2 var(--font-title); text-shadow: 0 2px 0 #000; }
.dice-boon-rank { display: block; margin: 0 0 12px; color: #bca177; font: 600 15px/1.2 var(--font-title); letter-spacing: .08em; }
.dice-boon-points { margin: 14px 0 6px; color: #cba86c; font: 600 18px/1.2 var(--font-body); }
.dice-boon-levels { display: flex; justify-content: center; gap: 0; margin: 10px 0 16px; }
.dice-boon-level {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    margin: 0 -4px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent url("../image/ui/skillprogress_level.png") center / 84px 84px no-repeat;
    filter: brightness(.55);
    transition: filter .18s ease, transform .18s ease;
}
.dice-boon-level__number {
    color: #bca177;
    font: 700 18px/1 var(--font-title);
    text-shadow: 0 2px 0 #000;
}
.dice-boon-level.is-earned { background-image: url("../image/ui/skillprogress_levelon.png"); filter: brightness(1); }
.dice-boon-level.is-earned .dice-boon-level__number { color: #ead29d; }
.dice-boon-level.is-current { filter: brightness(1.15) drop-shadow(0 0 5px rgba(185, 121, 43, .5)); }
.dice-boon-level.is-preview, .dice-boon-level:hover, .dice-boon-level:focus-visible { filter: brightness(1.2) drop-shadow(0 0 6px rgba(222, 174, 87, .48)); }
.dice-boon-level:focus-visible { outline: 1px solid #d8bd7a; outline-offset: 0; }
.dice-boon-control {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    background: transparent url("../image/ui/button_mini.png") -64px 0 / 192px 64px no-repeat;
    box-shadow: none;
    transition: filter .12s ease, transform .08s ease;
}
.dice-boon-control:enabled:hover { filter: brightness(1.16); }
.dice-boon-control:enabled:active { background-image: url("../image/ui/button_mini_press.png"); transform: translateY(1px); }
.dice-boon-control:disabled { opacity: .38; filter: grayscale(.38) brightness(.72); }
.dice-boon-control:focus-visible { outline: 1px solid #d8bd7a; outline-offset: 2px; }
.dice-boon-control--downgrade { background-position: 0 0; }
.dice-boon-footer { position: absolute; left: 43px; right: 43px; top: 720px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.dice-skill-details__boon .dice-boon-feedback { margin-top: 6px; color: #bca177; font-size: 11px; }
.dice-boon-feedback[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .dice-progress__fill,
    .dice-progress-level,
    .dice-boon-level,
    .dice-boon-control,
    .dice-selector-button__icon {
        transition-duration: .01ms;
    }

    .dice-skill-card.is-flipping,
    .dice-skill-card.is-flipping .dice-skill-card__front,
    .dice-skill-card.is-flipping .dice-skill-card__back {
        animation-duration: .01ms;
        animation-delay: 0ms;
    }

}