.td-screen {
    /* align-items: center; */
    gap: 2rem;
    padding: 0;
}

.td-board {
    position: relative;
    display: grid;
    /* grid-template-columns: repeat(var(--td-columns), minmax(36px, 1fr)); */
    grid-template-columns: repeat(var(--td-columns), minmax(36px, 60px));
     justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 640px;
}

.td-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background-color: var(--color-surface);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.td-cell--hidden {
    visibility: hidden;
    border: none;
    background: none;
}

.td-cell.is-connector {
    min-height: 28px;
    border-style: dashed;
    background-color: var(--color-background);
    /* opacity: 0.85; */
}

.td-cell.is-start {
    border-color: var(--color-primary);
    background-color: #FFC107;
    font-weight: 700;
}

.td-cell.is-special {
    transform: scale(1.2, 1.4);
    z-index: 5;
    position: relative;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
    border-radius: 0;
    /* outline-offset: -6px; */
    background: linear-gradient(35deg, rgba(72, 54, 125, 1) 0%, rgba(215, 65, 31, 1) 100%);
    outline: 3px solid rgb(255 255 255 / 70%);
    z-index: 2;
    color: white;
}

.td-cell.is-meta {
    border-color: var(--color-success);
    background-color: #ecfdf5;
    font-weight: 700;
}

.td-cell.is-current {
    outline: 3px solid rgb(255 255 255 / 54%);
    outline-offset: -3px;
    background: linear-gradient(35deg, rgba(72, 54, 125, 1) 0%, rgba(215, 65, 31, 1) 100%);
    color: white;
    /* transform: scale(1.2, 1.4); */
    /* z-index: 4; */
}

.td-cell.is-special.is-current {
    transform: scale(1.6, 1.9);
    outline: 3px solid rgb(255 255 255 / 70%);
    background: linear-gradient(35deg, rgb(222 26 26) 0%, rgb(255 219 0) 100%);
}

.td-player {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    margin: 0;
    color: white;
}

.td-player-name {
    font-weight: 700;
}

.td-instruction {
    font-size: 1rem;
    color: white;
}

.td-dice-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.td-dice-button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.td-dice-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.td-dice-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/*
 * Flecha que señala el dado. Solo se muestra y se anima mientras el dado
 * está habilitado (esperando ser lanzado): no hace falta lógica JS aparte
 * para mostrarla/ocultarla ni para arrancar/detener la animación, la maneja
 * este selector según el estado nativo del <button>.
 */
.td-dice-hint {
    display: inline-flex;
    color: white;
    opacity: 0;
    visibility: hidden;
}

.td-dice-hint svg {
    width: 32px;
    height: 32px;
}

.td-dice-button:enabled ~ .td-dice-hint {
    opacity: 1;
    visibility: visible;
    animation: td-dice-hint-zigzag 1.2s ease-in-out infinite;
}

@keyframes td-dice-hint-zigzag {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-10px);
    }
    40% {
        transform: translateX(-2px);
    }
    60% {
        transform: translateX(-12px);
    }
    80% {
        transform: translateX(-4px);
    }
}

/*
 * Dado 3D de https://codepen.io/ivhed/pen/RNbQxxe ("Rolling dice" de
 * Veronika), traducido de React a DOM plano: mismo diseño (colores, sombra,
 * puntos) y misma animación de lanzamiento por CSS. "dice-container" admite
 * más de un ".dice" (queda preparado para tirar varios dados a la vez más
 * adelante), aunque este juego solo usa uno.
 */
.dice-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.dice {
    --dice-size: 100px;
    --dice-scale: 0.6;
    --dot-size: 8px;
    --dot: radial-gradient(currentColor var(--dot-size), transparent 0);
    --face-background: radial-gradient(
        rgb(165 41 41 / 69%) 50%,
        rgb(127 13 13 / 69%)
    );

    width: var(--dice-size);
    height: var(--dice-size);
    perspective: 1000px;
    filter: drop-shadow(0 20px 15px rgba(0, 0, 0, 0.5));
    opacity: 0;
    animation: td-dice-fade-in 250ms var(--animation-delay, 0ms) ease-in forwards;
}

.dice__cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation-duration: 800ms;
    animation-delay: var(--animation-delay, 0ms);
    animation-timing-function: cubic-bezier(0.36, 0, 0.66, 1);
    animation-fill-mode: forwards;
}

.dice__face {
    display: grid;
    place-items: center;
    position: absolute;
    width: var(--dice-size);
    height: var(--dice-size);
    background: rgba(97, 10, 10, 0.8);
    color: rgb(243, 244, 217);
    border-radius: 16px;
    font-size: 34px;
}

/* front */
.dice__face:nth-child(2) {
    translate: 0 0 calc(var(--dice-size) / 2);
    background-image: var(--dot), var(--dot), var(--face-background);
    background-size: 50% 50%, 50% 50%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 100% 100%, 50% 50%;
}

/* right */
.dice__face:nth-child(3) {
    transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2));
    background-image: var(--dot), var(--dot), var(--dot), var(--face-background);
    background-size: 50% 50%, 50% 50%, 50% 50%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 100%, 50% 50%, 100% 0, 50% 50%;
}

/* back */
.dice__face:nth-child(5) {
    transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2));
    background-image: var(--dot), var(--dot), var(--dot), var(--dot), var(--dot),
        var(--face-background);
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 100%, 50% 50%, 100% 0, 100% 100%, 50% 50%;
}

/* left */
.dice__face:nth-child(4) {
    transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2));
    background-image: var(--dot), var(--face-background);
    background-size: 50% 50%, 100% 100%;
}

/* top */
.dice__face:nth-child(1) {
    transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2));
    background-image: var(--dot), var(--face-background);
}

/* bottom */
.dice__face:nth-child(6) {
    transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2));
    background-image: var(--dot), var(--dot), var(--dot), var(--dot), var(--dot),
        var(--dot), var(--face-background);
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
        100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 50%, 0 100%, 100% 0, 100% 50%, 100% 100%, 50% 50%;
}

.dice--1 .dice__cube {
    transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
        translateY(-200px) rotateZ(0deg);
    animation-name: td-throw-dice;
}

.dice--2 .dice__cube {
    transform: scale(var(--dice-scale)) rotateX(30deg) rotateZ(-45deg)
        translateZ(200px) rotateX(0deg);
    animation-name: td-throw-dice-2;
}

.dice--3 .dice__cube {
    transform: scale(var(--dice-scale)) rotateY(-90deg) rotateZ(-30deg)
        rotateX(45deg) translateX(200px) rotateY(0deg);
    animation-name: td-throw-dice-3;
}

.dice--4 .dice__cube {
    transform: scale(var(--dice-scale)) rotateY(90deg) rotateZ(30deg)
        rotateX(-45deg) translateX(-200px) rotateY(0deg);
    animation-name: td-throw-dice-4;
}

.dice--5 .dice__cube {
    transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
        rotateX(-90deg) translateZ(-200px) rotateY(0deg);
    animation-name: td-throw-dice-5;
}

.dice--6 .dice__cube {
    transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
        rotateX(180deg) translateY(200px) rotateZ(0deg);
    animation-name: td-throw-dice-6;
}

@keyframes td-dice-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes td-throw-dice {
    35% {
        transform: scale(var(--dice-scale)) rotateX(0deg) rotateY(-45deg)
            translateY(0) rotateZ(360deg);
    }
    50% {
        transform: scale(var(--dice-scale)) rotateX(-20deg) rotateY(-45deg)
            translateY(-60px) rotateZ(540deg);
    }
    65% {
        transform: scale(var(--dice-scale)) rotateX(-40deg) rotateY(-45deg)
            translateY(0) rotateZ(630deg);
    }
    80% {
        transform: scale(var(--dice-scale)) rotateX(-50deg) rotateY(-45deg)
            translateY(-20px) rotateZ(690deg);
    }
    100% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            translateY(0) rotateZ(720deg);
    }
}

@keyframes td-throw-dice-2 {
    35% {
        transform: scale(var(--dice-scale)) rotateX(90deg) rotateZ(-45deg)
            translateZ(0) rotateX(-360deg);
    }
    50% {
        transform: scale(var(--dice-scale)) rotateX(70deg) rotateZ(-45deg)
            translateZ(60px) rotateX(-540deg);
    }
    65% {
        transform: scale(var(--dice-scale)) rotateX(60deg) rotateZ(-45deg)
            translateZ(0) rotateX(-630deg);
    }
    80% {
        transform: scale(var(--dice-scale)) rotateX(50deg) rotateZ(-45deg)
            translateZ(20px) rotateX(-690deg);
    }
    100% {
        transform: scale(var(--dice-scale)) rotateX(30deg) rotateZ(-45deg)
            translateZ(0) rotateX(-720deg);
    }
}

@keyframes td-throw-dice-3 {
    35% {
        transform: scale(var(--dice-scale)) rotateY(-90deg) rotateZ(-30deg)
            rotateX(60deg) translateX(0) rotateY(360deg);
    }
    50% {
        transform: scale(var(--dice-scale)) rotateY(-90deg) rotateZ(-30deg)
            rotateX(50deg) translateX(60px) rotateY(540deg);
    }
    65% {
        transform: scale(var(--dice-scale)) rotateY(-90deg) rotateZ(-30deg)
            rotateX(30deg) translateX(0) rotateY(630deg);
    }
    80% {
        transform: scale(var(--dice-scale)) rotateY(-90deg) rotateZ(-30deg)
            rotateX(40deg) translateX(20px) rotateY(690deg);
    }
    100% {
        transform: scale(var(--dice-scale)) rotateY(-90deg) rotateZ(-30deg)
            rotateX(45deg) translateX(0) rotateY(720deg);
    }
}

@keyframes td-throw-dice-4 {
    35% {
        transform: scale(var(--dice-scale)) rotateY(90deg) rotateZ(30deg)
            rotateX(-10deg) translateX(0) rotateY(360deg);
    }
    50% {
        transform: scale(var(--dice-scale)) rotateY(90deg) rotateZ(30deg)
            rotateX(0deg) translateX(-60px) rotateY(540deg);
    }
    65% {
        transform: scale(var(--dice-scale)) rotateY(90deg) rotateZ(30deg)
            rotateX(-25deg) translateX(0) rotateY(630deg);
    }
    80% {
        transform: scale(var(--dice-scale)) rotateY(90deg) rotateZ(30deg)
            rotateX(-40deg) translateX(-20px) rotateY(690deg);
    }
    100% {
        transform: scale(var(--dice-scale)) rotateY(90deg) rotateZ(30deg)
            rotateX(-45deg) translateX(0) rotateY(720deg);
    }
}

@keyframes td-throw-dice-5 {
    35% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(-60deg) translateZ(0) rotateY(-360deg);
    }
    50% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(-80deg) translateZ(-60px) rotateY(-540deg);
    }
    65% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(-60deg) translateZ(0) rotateY(-630deg);
    }
    80% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(-80deg) translateZ(-20px) rotateY(-690deg);
    }
    100% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(-90deg) translateZ(0) rotateY(-720deg);
    }
}

@keyframes td-throw-dice-6 {
    35% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(250deg) translateY(0) rotateZ(-360deg);
    }
    50% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(220deg) translateY(60px) rotateZ(-540deg);
    }
    65% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(200deg) translateY(0) rotateZ(-630deg);
    }
    80% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(190deg) translateY(20px) rotateZ(-690deg);
    }
    100% {
        transform: scale(var(--dice-scale)) rotateX(-60deg) rotateY(-45deg)
            rotateX(180deg) translateY(0) rotateZ(-720deg);
    }
}

.td-dice-result {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.td-end-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.td-bubble {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    width: max-content;
    max-width: min(280px, 90%);
}

.td-bubble__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--color-surface);
    stroke: var(--color-border);
    filter: drop-shadow(var(--shadow-sm));
}

.td-bubble__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
}

.td-bubble__header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.td-bubble__title {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}

.td-bubble__message {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.td-bubble__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
}

.td-bubble__close:hover,
.td-bubble__close:focus-visible {
    background-color: var(--color-background);
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .td-board {
        grid-template-columns: repeat(var(--td-columns), minmax(28px, 1fr));
    }

    .td-cell {
        min-height: 36px;
        font-size: 0.75rem;
    }

    .td-cell.is-connector {
        min-height: 22px;
    }
}