.hud {
    box-sizing: border-box;
    margin-bottom: clamp(12px, 4vw, 20px);
    display: grid;
    gap: var(--space-3);
    padding: clamp(10px, 3vw, 14px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--component-panel-radius);
    background: var(--surface-hud);
}

.hud-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.hud-moves {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-heading);
    color: var(--text-primary);
    line-height: 1;
    transition: color var(--motion-duration-fast) var(--motion-ease-out);

    &.is-low {
        color: var(--color-gold-600);
    }
}

.word {
    box-sizing: border-box;
    background: var(--surface-gameplay-panel);
    display: grid;
    align-content: center;
    gap: clamp(4px, 1.2vw, 8px);
    padding: clamp(10px, 3vw, 16px) var(--component-panel-padding);
    border: 1px solid var(--border-subtle);
    border-radius: var(--component-panel-radius);
    box-shadow: var(--shadow-gameplay-panel);
    margin-bottom: clamp(12px, 4vw, 20px);
    position: relative;
    min-height: clamp(88px, 20vw, 108px);
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-out),
        box-shadow var(--motion-duration-fast) var(--motion-ease-out),
        transform var(--motion-duration-fast) var(--motion-ease-out);

    p {
        margin-bottom: 0;

        &.title {
            margin-bottom: 0;
            font-size: clamp(1.3rem, 5.5vw, 2rem);
            line-height: 1.1;
        }
    }
}

.word-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: clamp(1.75rem, 6vw, 2.25rem);

    .title {
        min-width: 0;
        text-align: left;
    }
}

.word.is-empty .word-summary {
    justify-content: center;

    .title {
        text-align: center;
    }
}

.word-placeholder {
    color: var(--text-secondary);
}

/* Conteneur qui empile score et hint dans la même cellule pour éviter tout saut de hauteur */
.word-info {
    display: grid;
    grid-template-areas: "info";
    align-items: center;
    justify-items: stretch;
    min-height: 1.75rem;
}

.word-score-breakdown,
.word-hint {
    grid-area: info;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-out);

    &.is-active {
        opacity: 1;
        pointer-events: auto;
    }
}

.word-score-total {
    flex: 0 0 auto;
    font-size: clamp(1.18rem, 4.2vw, 1.42rem);
    font-weight: var(--font-weight-strong);
    color: var(--text-secondary);
    line-height: var(--font-leading-tight);
    transition:
        color var(--motion-duration-fast) var(--motion-ease-out),
        transform var(--motion-duration-fast) var(--motion-ease-spring),
        text-shadow var(--motion-duration-fast) var(--motion-ease-out);
    white-space: nowrap;

    &.is-green {
        color: var(--color-green-500);
        text-shadow: 0 0 16px rgba(36, 149, 99, 0.28);
        transform: translateY(-1px) scale(1.03);
    }
}

.word-score-breakdown {
    width: 100%;
    overflow: hidden;
}

.word-score-formula {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.25rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
    font-size: var(--font-size-body-sm);
    color: var(--text-secondary);
    line-height: 1.2;

    &::-webkit-scrollbar {
        display: none;
    }
}

.word-score-operator {
    flex: 0 0 auto;
    opacity: 0.6;
    font-weight: var(--font-weight-strong);
}

.word-score-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: var(--color-navy-700);
    line-height: 1;
}

.word-score-chip-label {
    font-size: 0.72em;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.word-score-chip-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.word-score-chip > .font-numeric {
    line-height: 1;
}

.word-score-chip.is-textual > .font-numeric {
    font-size: 0.88em;
}

.word-score-chip img.effect-icon {
    height: 1.05em;
    width: auto;
    vertical-align: middle;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.word-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: clamp(0.9rem, 3.2vw, 1rem);
    line-height: 1.2;
    text-wrap: balance;
    text-align: center;
    color: var(--text-secondary);
}

.board {
    position: relative;
    box-sizing: border-box;
    background: var(--surface-gameplay-board);
    width: 100%;
    padding: var(--component-board-padding);
    border: 1px solid var(--border-subtle);
    border-radius: var(--component-panel-radius);
    box-shadow: var(--shadow-gameplay-panel);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-column-gap: var(--component-board-gap);
    grid-row-gap: var(--component-board-gap);
    touch-action: none;
}

.board > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.board > svg polyline {
    fill: none;
    stroke: var(--text-primary);
    stroke-width: clamp(6px, 2vw, 10px);
}

.tile {
    background-color: var(--component-tile-edge);
    padding-bottom: var(--component-tile-depth);
    border-radius: var(--component-tile-radius);
    outline: clamp(3px, 1vw, 5px) solid transparent;
    outline-offset: 0;
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-spring),
        opacity var(--motion-duration-normal) var(--motion-ease-standard),
        filter var(--motion-duration-fast) var(--motion-ease-out),
        box-shadow var(--motion-duration-fast) var(--motion-ease-out),
        outline-color var(--motion-duration-fast) var(--motion-ease-out);
    cursor: pointer;

    position: relative;
    z-index: 2;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        z-index: 3;
        transition: opacity var(--motion-duration-normal) var(--motion-ease-out);
    }

    &::after {
        content: "";
        position: absolute;
        inset: calc(clamp(3px, 1vw, 5px) * -1);
        border: clamp(3px, 1vw, 2px) dashed transparent;
        border-radius: calc(
            var(--component-tile-radius) + clamp(4px, 1vw, 6px)
        );
        pointer-events: none;
        opacity: 0;
        z-index: 4;
    }

    div {
        background-color: var(--component-tile-surface);
        background: var(--component-tile-surface-gradient);
        color: var(--component-tile-text);

        border-radius: var(--component-tile-radius);
        position: relative;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            border: var(--component-tile-border-width) solid transparent;
            background: linear-gradient(
                    to bottom,
                    var(--component-tile-border-top) 0%,
                    var(--component-tile-border-mid) 50%,
                    var(--component-tile-border-bottom) 100%
                )
                border-box;
            -webkit-mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
        }

        display: flex;
        justify-content: center;
        align-items: center;

        aspect-ratio: 1 / 1;

        p:first-child {
            font-weight: var(--font-weight-strong);
            font-size: var(--component-tile-letter-size);
            line-height: 1;
            padding-bottom: 0.08em;
        }

        p:first-child.is-double-letter {
            font-size: calc(var(--component-tile-letter-size) * 0.7);
            letter-spacing: -0.01em;
        }

        img.fire-icon {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: var(--component-tile-letter-size);
            width: auto;
            z-index: 5;
            pointer-events: none;
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
        }

        img.effect-icon {
            position: absolute;
            top: clamp(1px, 1vw, 3px);
            left: clamp(1px, 1vw, 3px);
            display: flex;
            align-items: center;
            height: clamp(1.3rem, 4vw, 1.7rem);
            width: auto;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
        }

        p:last-child {
            position: absolute;
            bottom: clamp(3px, 1vw, 5px);
            right: clamp(5px, 1.8vw, 7.5px);
            display: flex;
            align-items: center;
            height: 1.2rem;
            margin: 0;
            font-size: var(--component-tile-meta-size);
            line-height: 1;
        }
    }

    &.green {
        background-color: var(--color-green-700);
        --component-tile-surface: var(--component-tile-green-surface);
        --component-tile-surface-highlight: var(
            --component-tile-green-surface-highlight
        );
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-green-surface),
            var(--component-tile-green-surface-highlight)
        );
        --component-tile-text: var(--text-primary);
    }

    &.blue {
        background-color: var(--color-blue-700);
        --component-tile-surface: var(--component-tile-blue-surface);
        --component-tile-surface-highlight: var(
            --component-tile-blue-surface-highlight
        );
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-blue-surface),
            var(--component-tile-blue-surface-highlight)
        );
        --component-tile-text: var(--text-primary);
    }

    &.red {
        background-color: var(--color-red-700);
        --component-tile-surface: var(--component-tile-red-surface);
        --component-tile-surface-highlight: var(
            --component-tile-red-surface-highlight
        );
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-red-surface),
            var(--component-tile-red-surface-highlight)
        );
        --component-tile-text: var(--text-primary);
    }

    &.purple {
        background-color: var(--color-purple-700);
        --component-tile-surface: var(--component-tile-purple-surface);
        --component-tile-surface-highlight: var(
            --component-tile-purple-surface-highlight
        );
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-purple-surface),
            var(--component-tile-purple-surface-highlight)
        );
        --component-tile-text: var(--text-on-accent);
    }

    &.gold {
        background-color: var(--color-gold-600);
        --component-tile-surface: var(--component-tile-gold-surface);
        --component-tile-surface-highlight: var(
            --component-tile-gold-surface-highlight
        );
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-gold-surface),
            var(--component-tile-gold-surface-highlight)
        );
        --component-tile-text: var(--text-on-gold);
    }

    &.selected {
        outline-color: var(--text-primary);
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 0 0 1px var(--color-blue-500);
    }

    &.selectable {
        &::after {
            border-color: var(--text-primary);
            opacity: 0;
        }
    }

    &.non-selectable {
        cursor: not-allowed;

        &::before {
            background:
                repeating-linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.05) 0 2px,
                    transparent 2px 6px
                ),
                rgba(0, 0, 0, 0.3);
            opacity: 1;
        }
    }
}

@supports (corner-shape: superellipse(0.5)) {
    .tile,
    .tile::before,
    .tile::after,
    .tile div,
    .tile div::before {
        corner-shape: var(--component-tile-corner-shape);
    }
}

@media (hover: hover) {
    .tile:hover {
        transform: translateY(-1px) rotate(1.5deg);
    }

    .tile.selected:hover {
        transform: translateY(-2px) scale(1.02) rotate(1deg);
    }

    .tile.non-selectable:hover {
        transform: none;
    }
}

.power-card {
    background-color: var(--surface-void);
    padding: var(--component-panel-padding);
    border-radius: var(--component-panel-radius);
    margin-bottom: clamp(12px, 4vw, 20px);

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--text-on-accent);

    > span {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    > small {
        opacity: 0.8;
        font-size: 0.9rem;
    }

    > button {
        width: 100%;
        margin-left: 0;
    }
}

.power-card-inline {
    text-align: center;
    justify-content: center;

    .power-card-copy {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
    }

    > button {
        width: min(100%, 220px);
        margin-inline: auto;
    }
}

.actions {
    margin-top: clamp(12px, 4vw, 20px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 3vw, 15px);

    .button.is-fullwidth {
        grid-column: auto;
    }
}

.button {
    min-height: var(--component-button-height);
    padding: 10px var(--component-button-padding-x);
    border-radius: var(--component-button-radius);
    font-weight: var(--font-weight-heading);
    transition:
        background var(--motion-duration-fast) var(--motion-ease-out),
        box-shadow var(--motion-duration-fast) var(--motion-ease-out),
        transform var(--motion-duration-fast) var(--motion-ease-out),
        filter var(--motion-duration-fast) var(--motion-ease-out);
    text-align: center;
    border: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    background: var(--component-button-surface-gradient);
    background-color: var(--component-button-surface);
    color: var(--component-button-text);
    box-shadow:
        inset 0 calc(var(--component-button-depth) * -1) 0
            rgba(255, 255, 255, 0.04),
        0 var(--component-button-depth) 0 var(--component-button-edge),
        var(--component-button-shadow);
    cursor: pointer;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: var(--component-button-border-width) solid transparent;
        background: linear-gradient(
                to bottom,
                var(--component-button-border-top) 0%,
                var(--component-button-border-mid) 52%,
                var(--component-button-border-bottom) 100%
            )
            border-box;
        -webkit-mask:
            linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask:
            linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }

    &:active {
        transform: translateY(1px);
        box-shadow:
            inset 0 calc((var(--component-button-depth) - 1px) * -1) 0
                rgba(255, 255, 255, 0.03),
            0 calc(var(--component-button-depth) - 1px) 0
                var(--component-button-edge),
            0 2px 6px rgba(7, 13, 34, 0.14);
    }

    &:focus-visible {
        outline: 3px solid var(--border-focus);
        outline-offset: 3px;
    }

    &.is-blue {
        --component-button-surface: var(--color-blue-500);
        --component-button-surface-highlight: var(--component-button-blue-highlight);
        --component-button-surface-gradient: linear-gradient(
            180deg,
            var(--component-button-surface-highlight),
            var(--component-button-surface)
        );
        --component-button-edge: var(--color-blue-700);
        --component-button-text: var(--text-primary);
    }

    &.is-red {
        --component-button-surface: var(--color-red-500);
        --component-button-surface-highlight: var(--component-button-red-highlight);
        --component-button-surface-gradient: linear-gradient(
            180deg,
            var(--component-button-surface-highlight),
            var(--component-button-surface)
        );
        --component-button-edge: var(--color-red-700);
        --component-button-text: var(--text-primary);
    }

    &.is-green {
        --component-button-surface: var(--color-green-500);
        --component-button-surface-highlight: var(--component-button-green-highlight);
        --component-button-surface-gradient: linear-gradient(
            180deg,
            var(--component-button-surface-highlight),
            var(--component-button-surface)
        );
        --component-button-edge: var(--color-green-700);
        --component-button-text: var(--text-primary);
    }

    &.is-gold {
        --component-button-surface: var(--color-gold-500);
        --component-button-surface-highlight: var(--component-button-gold-highlight);
        --component-button-surface-gradient: linear-gradient(
            180deg,
            var(--component-button-surface-highlight),
            var(--component-button-surface)
        );
        --component-button-edge: var(--color-gold-600);
        --component-button-text: var(--text-on-gold);
        --component-button-border-bottom: var(--component-button-gold-border-bottom);
    }

    &.is-light {
        --component-button-surface: var(--component-button-light-surface);
        --component-button-surface-highlight: var(
            --component-button-light-surface-highlight
        );
        --component-button-surface-gradient: linear-gradient(
            180deg,
            var(--component-button-surface-highlight),
            var(--component-button-surface)
        );
        --component-button-edge: var(--component-button-light-edge);
        --component-button-text: var(--text-primary);
        --component-button-border-top: var(--component-button-light-border-top);
        --component-button-border-mid: var(--component-button-light-border-mid);
        --component-button-border-bottom: var(--component-button-light-border-bottom);
        box-shadow:
            inset 0 calc(var(--component-button-depth) * -1) 0
                rgba(255, 255, 255, 0.02),
            0 var(--component-button-depth) 0 var(--component-button-edge),
            0 1px 0 var(--border-subtle);
    }

    &[disabled] {
        --component-button-surface: var(--component-button-disabled-surface);
        --component-button-surface-highlight: var(
            --component-button-disabled-surface-highlight
        );
        --component-button-surface-gradient: linear-gradient(
            180deg,
            var(--component-button-surface-highlight),
            var(--component-button-surface)
        );
        --component-button-edge: var(--component-button-disabled-edge);
        --component-button-text: var(--component-button-disabled-text);
        cursor: not-allowed;
        opacity: 1;
        filter: saturate(0.72);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 1px 0 rgba(7, 13, 34, 0.24);
        --component-button-border-top: var(--component-button-disabled-border-top);
        --component-button-border-mid: var(--component-button-disabled-border-mid);
        --component-button-border-bottom: var(--component-button-disabled-border-bottom);
    }

    &[disabled]:hover,
    &[disabled]:active {
        transform: none;
        filter: none;
    }

    &.is-icon {
        box-sizing: border-box;
        width: var(--component-button-height);
        min-width: var(--component-button-height);
        height: var(--component-button-height);
        padding: 0;
        flex-shrink: 0;

        i {
            font-size: 1.2rem;
            line-height: 1;
        }
    }
}

@media (hover: hover) {
    .button:hover:not([disabled]) {
        transform: translateY(-1px);
        filter: brightness(1.06) saturate(1.04);
        box-shadow:
            inset 0 calc(var(--component-button-depth) * -1) 0
                rgba(255, 255, 255, 0.08),
            0 var(--component-button-depth) 0 var(--component-button-edge),
            0 8px 18px rgba(7, 13, 34, 0.2);
    }

    .button.is-light:hover:not([disabled]) {
        transform: translateY(-1px);
        filter: brightness(1.1);
        box-shadow:
            inset 0 calc(var(--component-button-depth) * -1) 0
                rgba(255, 255, 255, 0.05),
            0 var(--component-button-depth) 0 var(--component-button-edge),
            0 7px 16px rgba(7, 13, 34, 0.16);
    }
}