/* BattleBoardMat — shared premium tabletop styling for deploy + combat boards.
   Warm leather frame, carved grid, elevation shadow hooks. Import via battle view scoped CSS. */

.board.mat-premium {
    position: relative;
    --mat-warm: #1a1814;
    --mat-cool: #121318;
    background:
        /* Grid lines — hairline carved into leather mat */
        linear-gradient(var(--trn-grid-line, #ffffff10) 1px, transparent 1px) 0 0 / var(--cell, 58px) var(--cell, 58px),
        linear-gradient(90deg, var(--trn-grid-line, #ffffff10) 1px, transparent 1px) 0 0 / var(--cell, 58px) var(--cell, 58px),
        /* Warm centre vignette — tokens pop against edges */
        radial-gradient(ellipse 85% 75% at 50% 45%, var(--mat-warm) 0%, var(--mat-cool) 100%);
    border: 3px solid var(--leather, #3a3028);
    border-radius: 6px;
    box-shadow:
        0 0 0 1px #00000080,
        inset 0 0 80px #00000055,
        inset 0 2px 0 #ffffff08,
        0 8px 24px #00000070;
    overflow: hidden;
}

/* Leather corner studs — subtle premium frame detail */
.board.mat-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 4px;
    background:
        radial-gradient(circle at 8px 8px, var(--gold-tarnished) 2px, transparent 2px),
        radial-gradient(circle at calc(100% - 8px) 8px, var(--gold-tarnished) 2px, transparent 2px),
        radial-gradient(circle at 8px calc(100% - 8px), var(--gold-tarnished) 2px, transparent 2px),
        radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--gold-tarnished) 2px, transparent 2px);
    opacity: 0.35;
}

/* Warm edge vignette over the whole mat */
.board.mat-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 4px;
    box-shadow: inset 0 0 40px 8px #00000045;
}

/* Elevation shadow — tokens on high ground cast a longer shadow under table pitch */
.token.on-elevation .token-disc,
.token.on-elevation .combat-token-root {
    filter: drop-shadow(0 4px 3px #00000070);
}

/* Difficult terrain movement — subtle squash + dust trail */
.token.on-difficult.moving {
    animation: token-difficult-wade .45s ease-in-out infinite;
}
@keyframes token-difficult-wade {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(1px) scaleX(0.98); }
}

/* Movement trail ghost — faint dashed segment behind moving token */
.token-trail {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-top: 1.5px dashed var(--gold-tarnished);
    opacity: 0.22;
    transform-origin: 0 50%;
    animation: trail-fade .35s ease-out forwards;
}
@keyframes trail-fade {
    0%   { opacity: 0.28; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .token.on-difficult.moving { animation: none; }
    .token-trail { animation: none; opacity: 0; }
}