/**
 * Arena Felt - Table Surface, Rails, and Game Container
 *
 * The poker table "stage" — felt rendering, 3D perspective, wooden rail,
 * background vignette, and board area positioning.
 *
 * Extracted from components/seat-layouts.css for maintainability.
 *
 * Specificity: Uses direct class selectors (0,1,0) - no !important needed
 */

/* Main Game Area - Table takes majority of space */
.game-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 0 var(--space-5);
    min-height: 0;
    gap: var(--space-5);
    position: relative;
    z-index: var(--z-seat-base);
    transition: gap 0.4s var(--ease-in-out);
}

body.calm-mode .game-container {
    gap: var(--space-2);
}

/* .table-wrapper and .drill-table-wrapper are in shared/table-wrapper.css */

.poker-table {
    width: 100%;
    max-width: var(--table-max-width, 856px);
    aspect-ratio: 1.52 / 1;  /* Increased table length by ~30px */
    max-height: var(--felt-height, calc(100vh - 180px));
    border-radius: 50% / 40%;
    position: relative;
    z-index: var(--z-seat-base);  /* Above table-wrapper::before vignette */
    overflow: visible;
    transform: perspective(1100px) rotateX(14deg) scaleY(0.985) translateY(-50px);
    transform-origin: center bottom;
    transform-style: preserve-3d;

    /* Base felt - semi-transparent green with subtle edge darkening */
    background:
        radial-gradient(ellipse at 50% 42%, rgba(47, 154, 95, 0.75) 0%, rgba(27, 122, 71, 0.8) 55%, rgba(19, 94, 54, 0.85) 100%),
        /* Micro noise via layered gradients for felt texture variation */
        repeating-conic-gradient(rgba(0,0,0,0.02) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;

    /* Alpha v0.5 multi-layer wooden rail via box-shadow */
    box-shadow:
        /* Layer 1: Felt edge - warm wood tone */
        0 0 0 22px rgba(160, 112, 70, 0.28),
        /* Layer 2: Dark inner rail */
        0 0 0 26px rgba(52, 36, 24, 0.98),
        /* Layer 3: Outer rail edge */
        0 0 0 34px rgba(32, 22, 15, 0.92),
        /* Layer 4: Primary drop shadow */
        0 22px 40px 24px var(--alpha-black-60),
        /* Layer 5: Extended ambient shadow */
        0 34px 70px rgba(0, 0, 0, 0.55),
        /* Layer 6: Deep inner shadow for depth */
        inset 0 0 120px var(--alpha-black-40),
        /* Layer 7: Mid inner shadow */
        inset 0 0 28px rgba(0, 0, 0, 0.35),
        /* Layer 8: Top inner shadow for rim */
        inset 0 8px 18px var(--alpha-black-25),
        /* Layer 9: Final ambient */
        0 12px 34px rgba(0, 0, 0, 0.55);
}

/* Surface lighting & texture overlay (Alpha v0.5 style) - allows background blending */
.poker-table::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50% / 40%;
    background:
        /* Green underlay with midfield brightening - reduced opacity for blending */
        radial-gradient(ellipse at 50% 40%, rgba(58, 168, 110, 0.42), rgba(24, 110, 64, 0.28) 45%, rgba(16, 84, 50, 0.55) 75%, rgba(12, 70, 42, 0.65) 100%),
        /* Warm highlight in center - creates the "lighter middle" effect */
        radial-gradient(ellipse at 50% 46%, rgba(255, 224, 150, 0.15), rgba(255, 224, 150, 0.06) 28%, rgba(255, 224, 150, 0.02) 46%, rgba(0, 0, 0, 0) 65%),
        /* Subtle white glow center top */
        radial-gradient(ellipse at 50% 50%, var(--alpha-white-4), rgba(255, 255, 255, 0) 55%),
        /* Fine weave texture pattern */
        repeating-linear-gradient(135deg, var(--alpha-white-2) 0 2px, rgba(0, 0, 0, 0.015) 2px 4px),
        /* Radial shadow vignette - softer for better blending */
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.32) 100%),
        /* Gradient from top - shadow transitions from rail */
        linear-gradient(180deg, rgba(120, 82, 52, 0.45) 0%, rgba(110, 76, 50, 0.12) 26%, rgba(90, 62, 40, 0) 45%, rgba(24, 16, 10, 0.22) 70%, rgba(12, 8, 6, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Inner rim edge definition (Alpha v0.5 style) */
.poker-table::after {
    content: '';
    position: absolute;
    inset: 6px 10px 24px;
    border-radius: 50% / 40%;
    box-shadow:
        /* Inner rim edge definition */
        inset 0 0 0 4px rgba(175, 130, 90, 0.45),
        /* Inner shadow top (light catching edge) */
        inset 0 10px 22px var(--alpha-black-40),
        /* Inner shadow bottom (deeper shadow) */
        inset 0 -18px 30px rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}

/* Board Area */
.board-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 30px));  /* Moved up 30px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    z-index: var(--z-modal);
    backface-visibility: hidden;
}