/* Global styles used across the application */
html, body, #app {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    user-select: none;
}
.inventory-swap {
    position: absolute;
    top: 0;
    left: 0;
    margin: 16px 8px;
}

.mud-badge-text-secondary .mud-badge-icon {
/*    background-color: transparent !important;
    color: var(--mud-palette-secondary) !important;*/
}

.hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1vw;
    row-gap: 32px;
    min-height: 144px;
    padding: 32px 0px;
    margin-top: auto;
    touch-action: none;
}

/* Allow dragging to scroll when the hand is shown inside dialogs or reward screens */
.mud-dialog-content .hand {
    touch-action: auto;
}

.inventory {
    touch-action: none;
}

.player-hand-container {
    display: flex;
    flex-direction: column;
}

.player-hand-container .enemy-tile {
    min-height: 144px;
}

.player-hand-container .hand {
    margin-top: auto;
}

@media (orientation: landscape) and (pointer: coarse) {
    .player-hand-container {
        /* On mobile in landscape, show the hand to the left of the player */
        flex-direction: row-reverse;
        align-items: stretch;
        gap: 1rem;
        height: 100%;
    }

    .player-hand-container .enemy-tile {
        flex: 0 0 150px;
        min-height: 150px;
        height: auto;
    }

    .player-hand-container .hand {
        flex: 1;
        margin-top: 0;
        padding-top: 16px;
        min-height: 96px;
        height: 100%;
    }
}

.hand .card,
.inventory .card {
    --card-scale: 1;
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-perspective: 600px;
    --card-specular-pointer-x: 0.5;
    --card-specular-pointer-y: 0.5;
    --card-specular-strength: 0;
    --card-holo-elevation: 1.5px;
    flex: 0 0 auto;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    z-index: 1;
    width: min(80px, 20vw);
    height: calc(min(80px, 20vw) * 1.6);
    transition: transform var(--card-transition-duration, 150ms) ease,
                box-shadow var(--card-transition-duration, 150ms) ease,
                filter var(--card-transition-duration, 150ms) ease;
    transform-origin: center;
    transform: perspective(var(--card-perspective))
               rotateX(var(--card-rotate-x))
               rotateY(var(--card-rotate-y))
               scale(var(--card-scale));
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-touch-callout: none;
    border-radius: 4px;
}

.hand .card img,
.hand .card svg,
.inventory .card img,
.inventory .card svg {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}

.hand .card.card-rarity-rare::before,
.inventory .card.card-rarity-rare::before {
    content: "";
    position: absolute;
    inset: -2%;
    border-radius: inherit;
    background-image:
        conic-gradient(from var(--card-oil-phase, 0turn) at 50% 50%, rgba(255, 70, 190, 0.12) 0deg 40deg, rgba(255, 209, 82, 0.12) 40deg 80deg, rgba(66, 255, 214, 0.14) 80deg 120deg, rgba(63, 140, 255, 0.16) 120deg 160deg, rgba(182, 89, 255, 0.16) 160deg 200deg, rgba(255, 70, 190, 0.12) 200deg 360deg),
        linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0 6%, transparent 6% 15%, rgba(0, 0, 0, 0.12) 15% 22%, transparent 22% 32%),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12) 0 15%, transparent 55%),
        repeating-radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.18) 0 1%, transparent 1% 3%);
    background-size: 260% 260%, 320% 320%, 220% 220%, 180% 180%;
    background-position:
        0% 0%,
        60% 40%,
        20% 20%,
        50% 50%;
    background-blend-mode: screen, color-dodge, soft-light, screen;
    mix-blend-mode: color-dodge;
    opacity: calc(0.08 + var(--card-specular-strength) * 0.22);
    pointer-events: none;
    transform: translateZ(calc(var(--card-holo-elevation, 1.5px) * 0.35));
    filter: hue-rotate(var(--card-oil-hue, 0deg));
    animation: card-oil-flow 11s linear infinite, card-oil-shimmer 2.8s ease-in-out infinite;
    will-change: background-position, filter, opacity;
    backface-visibility: hidden;
}

.hand .card.card-rarity-rare::after,
.inventory .card.card-rarity-rare::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(circle at calc(var(--card-specular-pointer-x) * 100%) calc(var(--card-specular-pointer-y) * 100%), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 70%),
        conic-gradient(from 0.05turn at 50% 50%, rgba(255, 0, 128, 0.22), rgba(255, 128, 0, 0.18), rgba(255, 255, 0, 0.16), rgba(0, 255, 128, 0.18), rgba(0, 128, 255, 0.2), rgba(128, 0, 255, 0.22), rgba(255, 0, 128, 0.22)),
        conic-gradient(from 0.3turn at 50% 50%, rgba(255, 255, 255, 0.06) 0deg, rgba(255, 255, 255, 0) 70deg, rgba(255, 255, 255, 0.08) 140deg, rgba(255, 255, 255, 0) 210deg, rgba(255, 255, 255, 0.06) 320deg, rgba(255, 255, 255, 0) 360deg),
        repeating-conic-gradient(from 0turn at 50% 50%, rgba(255, 255, 255, 0.16) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 12deg);
    background-size: 180% 180%, 150% 150%, 200% 200%, 220% 220%;
    background-position:
        calc((var(--card-specular-pointer-x) - 0.5) * 24%) calc((var(--card-specular-pointer-y) - 0.5) * 24%),
        calc(50% + (var(--card-specular-pointer-x) - 0.5) * 12%) calc(50% + (var(--card-specular-pointer-y) - 0.5) * 12%),
        50% 50%,
        calc(50% + (var(--card-specular-pointer-x) - 0.5) * 18%) calc(50% + (var(--card-specular-pointer-y) - 0.5) * 18%);
    mix-blend-mode: screen;
    opacity: calc(0.12 + var(--card-specular-strength) * 0.45);
    pointer-events: none;
    transition: opacity 150ms ease, background-position 150ms ease;
    transform: translateZ(var(--card-holo-elevation, 1.5px));
    backface-visibility: hidden;
}

.card.card-rarity-common,
.card.card-rarity-uncommon,
.card.card-rarity-rare {
    border-width: 2px !important;
    border-style: solid;
}

.card.card-rarity-common {
    border-color: #cd7f32 !important;
    border-width: 2px !important;
}

.card.card-rarity-uncommon {
    border-color: #8c8c8c !important;
    border-width: 2px !important;
}

.card.card-rarity-rare {
    border-color: #b8860b !important;
    border-width: 2px !important;
}

.shop-item-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    height: 100%;
    background-color: transparent;
    border: none;
}

.shop-item-card:focus-visible {
    outline: 2px solid var(--mud-palette-info);
    outline-offset: 2px;
}

.shop-item-card .mud-stack {
    flex: 1;
}

.card-tooltip-content {
    max-width: min(22rem, 60vw);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    padding: 0.75rem 1rem;
    white-space: normal;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.card-tooltip-line {
    white-space: normal;
}

.shop-price-chip {
    justify-content: center;
}

.shop-sale-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    --mud-badge-size: 1.75rem;
}

.shop-sale-badge .mud-badge-content {
    min-width: auto;
    padding: 0.25rem 0.5rem;
}

.shop-sale-badge .mud-chip {
    width: auto;
}

.shop-sale-badge-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@keyframes card-oil-flow {
    0% {
        --card-oil-phase: 0turn;
        --card-oil-hue: 0deg;
        background-position:
            0% 0%,
            60% 40%,
            20% 20%,
            50% 50%;
    }
    50% {
        --card-oil-phase: 0.35turn;
        --card-oil-hue: 120deg;
        background-position:
            55% 60%,
            30% 65%,
            45% 55%,
            65% 45%;
    }
    100% {
        --card-oil-phase: 1turn;
        --card-oil-hue: 360deg;
        background-position:
            100% 0%,
            25% 80%,
            75% 60%,
            40% 70%;
    }
}

@keyframes card-oil-shimmer {
    0%,
    100% {
        opacity: calc(0.08 + var(--card-specular-strength) * 0.22);
    }
    45% {
        opacity: calc(0.14 + var(--card-specular-strength) * 0.28);
    }
}



.shop-card-hand {
    padding-top: 0;
    margin-top: 0;
    min-height: 0;
    width: 100%;
    justify-content: center;
    column-gap: 0;
}

.shop-card-hand .card-wrapper {
    margin: 0 auto;
}

.shop-card-costs {
    justify-content: center;
}

.shop-cost-chip {
    font-weight: 600;
}

.shop-equipment-preview,
.shop-generic-preview {
    text-align: center;
}

.shop-equipment-image,
.shop-generic-image {
    max-width: 100%;
    max-height: 96px;
    border-radius: 4px;
}

@media (max-width: 400px) {
    .hand .card,
    .inventory .card {
        width: 80px;
        height: calc(80px * 1.6);
    }
}

.hand .card:hover,
.hand .card:focus,
.inventory .card:hover,
.inventory .card:focus,
button[role="checkbox"] .card {
    --card-scale: 1.5;
    z-index: 10;
    transition: none;
}

.hand .mud-drop-item,
.inventory .mud-drop-item {
    z-index: 20;
    transition: box-shadow var(--card-transition-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1),
                margin var(--card-transition-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.hand .mud-drop-item:hover,
.hand .mud-drop-item:focus,
.inventory .mud-drop-item:hover,
.inventory .mud-drop-item:focus {
    z-index: 100;
/*    margin-right: 16px !important;
    margin-left: 16px !important;*/
}

.card .mud-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 4px;
}

.card-description-container {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-description {
    width: 100%;
    white-space: pre-line;
}

.card-description-change {
    font-weight: 700;
}

.card-description-change--increase {
    color: var(--mud-palette-success) !important;
}

.card-description-change--decrease {
    color: var(--mud-palette-error) !important;
}

.mud-card.card-character-oathbound,
.mud-card.card-character-oathbound .mud-card-content {
    background-color: #A48755;
}

.mud-card.card-character-hollowblade,
.mud-card.card-character-hollowblade .mud-card-content {
    background-color: #7D56A7;
}

.mud-card.card-character-dredgecaller,
.mud-card.card-character-dredgecaller .mud-card-content {
    background-color: #4A718C;
}

.mud-card.card-character-gravetender,
.mud-card.card-character-gravetender .mud-card-content {
    background-color: #965353;
}

.highlight,
button[role="checkbox"][aria-checked="true"] .card,
button[role="checkbox"][aria-checked="true"] .mud-image {
    box-shadow: none !important;
    filter: drop-shadow(0px 0px 2px var(--card-highlight-color, var(--mud-palette-secondary)))
            drop-shadow(0px 0px 2px var(--card-highlight-color, var(--mud-palette-secondary)));
}

.highlight-conditional {
    --card-highlight-color: var(--mud-palette-success);
}



/* --- Fix for dragged cards going behind --- */
.mud-drop-item.mud-drop-dragging {
    position: fixed !important;
    z-index: 10000 !important;
    pointer-events: none;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
}

.card img {
    position: absolute;
    height: 120px;
    z-index: -1;
    margin: -8px -2px;
    transform: translateX(-25%);
    clip-path: inset(0% 24px 0% 24px round 5px);
    transition: filter 150ms ease;
}

.card:hover img,
button[role="checkbox"] .card img {
    filter: blur(1px);
    transition: none;
}

.mud-button,
.card-wrapper .mud-typography {
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px black, 0 0 2px black;
}

.mud-progress-linear-content > .mud-typography {
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}

.mud-badge {
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}

.cost-increased {
    color: var(--mud-palette-error) !important;
}

.cost-decreased {
    color: var(--mud-palette-success) !important;
}

.card .mud-icon-root,
.resource-bar-wrapper,
.health-bar-wrapper {
    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black);
}

.health-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.encounter-screen {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.no-ripple.mud-ripple::after {
    display: none !important;
    animation: none !important;
}



:root {
    /* Card names */
    --mud-typography-body2-size: .75rem !important;
    --mud-typography-body2-lineheight: 1.33 !important;
    /* Card descriptions */
    --mud-typography-caption-size: .4rem !important;
    --mud-typography-caption-lineheight: 1.16 !important;

    /* Duration for card transitions and clone animations */
    --card-transition-duration: 400ms;
    --clone-animation-duration: 0.5s;
}

.animated-clone {
    z-index: 9999;
    pointer-events: none;
    transition: transform var(--clone-animation-duration, 0.5s) ease,
                opacity var(--clone-animation-duration, 0.5s) ease;
}

@keyframes value-change-pop {
  0% { transform: scale(1); }
  10% { transform: scale(1.5); }
  80% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.value-change-pop {
  display: inline-block;
  animation: value-change-pop 0.4s ease-out;
}

.fade {
    opacity: 0;
    transition: none;
}

.fade:not(.hide) {
    opacity: 1;
    transition: opacity 0.4s ease-in;
}

.mud-button:not(.mud-toggle-item),
.mud-tabs-tabbar-wrapper,
.mud-snackbar {
    --notch: calc(var(--mud-typography-button-lineheight) * 0.5em);
    height: var(--mud-typography-button-lineheight);
    clip-path: polygon( var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50% );
    margin-top: 4px;
}

.mud-snackbar {
    justify-content: space-between;
    --snackbar-height: calc(var(--mud-typography-button-lineheight) * 1.25em);
    --notch: calc(var(--snackbar-height) * 0.5);
    height: var(--snackbar-height);
    min-height: var(--snackbar-height);
    padding: 0 12px;
}

.mud-snackbar .mud-snackbar-content {
    height: 100%;
    min-height: var(--snackbar-height);
    clip-path: polygon( var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50% );
}

.mud-icon-button:not(.mud-icon-button-size-small) {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}

.mud-button-label {
    padding-right: 8px;
    padding-left: 8px;
}

.mud-snackbar-location-bottom-right {
    bottom: 52px;
}

.saving-spinner {
    position: fixed;
    bottom: 64px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #FFF;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    z-index: 2000;
    pointer-events: none;
    color: white;
    animation: saving-spinner-animation 2s linear infinite;
}

@keyframes saving-spinner-animation {
    0% {
        opacity: 0;
        transform: rotate(0deg);
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
        transform: rotate(360deg);
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(720deg);
    }
}

/* Limit dialog tab widths so they stay visible without scrolling */


.dialog-tabs .mud-tab {
    min-width: max(10vw, 64px) !important;
}

.dialog-tabs-container .mud-tabs-panels {
    display: none;
}

/* Keep tabs visible while allowing dialog content to scroll */
.dialog-tabs-container {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: var(--mud-palette-surface);
}

.mud-dialog-content {
    overflow-y: auto;
}

.reward-dialog-list {
    max-height: calc(95vh - 128px);
    overflow-y: auto;
}

@supports (height: 1dvh) {
    .reward-dialog-list {
        max-height: calc(95dvh - 128px);
    }
}

.mud-badge.triangle {
    clip-path: polygon(7.5% 25%, 50% 100%, 92.5% 25%);
}

.mud-badge.diamond {
    clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%)
}

.mud-tab-badge {
    margin-left: 4px;
    margin-bottom: -24px;
}

.scalable-text {
    font-size: clamp(0.5rem, 2vw, 1rem);
}

.health-bar,
.mud-progress-linear-bar {
    display: flex;
    --notch: 12px;
    height: 12px;
    clip-path: polygon( var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50% );
}

.diamond-progress-bar {
    display: flex;
    gap: 2px;
    height: 4px;
    margin: 4px;
}

.diamond-progress-bar.single {
    gap: 0;
}

.diamond-progress-bar.vertical {
    flex-direction: column-reverse;
    width: 4px;
    height: calc(100% - 8px);
}

.diamond-progress-bar.vertical.health,
.diamond-progress-bar.vertical.health .diamond-segment {
    width: 6px;
}

.diamond-progress-bar.vertical .diamond-segment {
    width: 4px;
    height: auto;
    flex: 1;
    --notch: 2px;
    clip-path: polygon(0 var(--notch), 50% 0, 100% var(--notch), 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
}

.diamond-progress-bar.vertical .diamond-segment.single {
    flex: 0 0 auto;
}

.vertical-health-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vertical-health-wrapper .vertical-health-bars {
    flex: 0 0 auto;
    height: calc(100% - 0.75rem);
    align-items: stretch;
}

.vertical-health-wrapper .health-text {
    align-self: flex-start;
    width: max-content;
}

.diamond-segment {
    flex: 1;
    --notch: 4px;
    height: 4px;
    clip-path: polygon( var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50% );
    background-color: var(--segment-color);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: background-color 0.2s, opacity 0.2s;
}

.diamond-segment.empty {
    opacity: 0.2;
}

.no-hover,
.no-hover * {
    pointer-events: none !important;
    cursor: default !important;
}

.draggable-box {
    width: 150px;
    height: 100px;
    background-color: #c2185b;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: grab;
}

.resource-badge-stack {
    inset: -14px auto 100% calc(100% - 16px);
    height: 100%;
    pointer-events: none;
}

.lighten {
    filter: brightness(125%);
}

#orientation-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

@media screen and (orientation: portrait) {
    #orientation-warning {
        display: flex;
    }

    #app {
        display: none;
    }
}

/* Align snackbar text to the right to match right-justified snackbars */
.mud-snackbar-content-message {
    text-align: right;
}