/* Game specific styles for Mahjong Solitaire */

:root {
    --primary-color: #FF9800;
    --primary-hover: #F57C00;
    --text-main: #FFFFFF;
    --accent-color: #FFD700;

    /* 
       Tile Dimensions 
       Smaller to fit flat layout
    */
    --tile-width: 36px;
    --tile-height: 48px;

    /* 
       Depth Calculation:
       We will use pseudo-elements for sides, so we need explicit values.
    */
    --depth-y: 6px;
    /* How much we see of the bottom side */
    --depth-x: 4px;
    /* How much we see of the right side */

    /* Colors */
    --tile-face: #FFFFFF;
    --tile-side-right: #E0E0E0;
    /* Darker than face */
    --tile-side-bottom: #BDBDBD;
    /* Darkest side */
    --tile-border: #9E9E9E;
}

@media (min-width: 600px) {
    :root {
        --tile-width: 42px;
        --tile-height: 56px;
        --depth-y: 8px;
        --depth-x: 6px;
    }
}

body {
    background-color: #212121;
    /* Dark background to make board pop */
}

.game-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
}

.game-container h1 {
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.game-description {
    margin-bottom: 2rem;
    color: #B0BEC5;
    font-size: 1.1rem;
}

/* 
   Felt Table 
   Using a very dark, rich color to contrast with bright tiles.
*/
.game-area-wrapper {
    position: relative;
    padding: 40px;
    background-color: #004D40;
    background-image:
        radial-gradient(circle at center, #00695C 0%, #00332C 100%);
    border: 12px solid #5D4037;
    /* Matte Wood */
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 100px rgba(0, 0, 0, 0.8);
    margin-bottom: 3rem;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* Floating Controls */
.game-controls {
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    z-index: 20;
    color: #ECEFF1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.info-label {
    font-size: 1.1rem;
}

.info-label strong {
    color: var(--accent-color);
    font-size: 1.4rem;
    margin-left: 8px;
}

.control-group {
    display: flex;
    gap: 10px;
}

.secondary-btn {
    background: #455A64;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: 1px solid #546E7A;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.1s;
}

.secondary-btn:hover {
    background: #546E7A;
}

.secondary-btn:active {
    transform: translateY(1px);
}

/* Game Board */
.game-board {
    position: relative;
    width: 900px;
    height: 600px;
    margin: 0 auto;
    transform-origin: center center;
}

/* 
   Solid 3D Block Implementation 
   Instead of box-shadow stacking, we use borders/backgrounds to create a crisp block.
*/
.tile {
    position: absolute;
    width: var(--tile-width);
    height: var(--tile-height);

    /* The Face */
    background: #fff;
    border: 1px solid #bbb;
    /* Subtle border for the face */
    border-radius: 2px;

    /* The Face - Bone Texture */
    background: linear-gradient(135deg, #FFFDF0 0%, #FFF8E1 100%);
    border: 1px solid #C0C0C0;
    /* Softer, bone-like border */
    border-radius: 3px;

    /* 
       "Solid Block" Effect Construction 
       We use a very dense shadow stack to simulate continuous sides.
       Colors transition from the "Bone" top layer to the "Bamboo/Wood" backing.
       
       Thickness: 8px (approx matching JS offset)
    */
    box-shadow:
        /* --- Bone Layer (Top 3px) --- */
        1px 1px 0 #E0E0E0,
        2px 2px 0 #D5D5D5,
        3px 3px 0 #CCCCCC,

        /* --- Backing Layer (Bottom 5px - Bamboo) --- */
        4px 4px 0 #8D6E63,
        5px 5px 0 #795548,
        6px 6px 0 #6D4C41,
        7px 7px 0 #5D4037,
        8px 8px 0 #4E342E,

        /* --- Ambient Shadow (Soft Drop) --- */
        10px 14px 20px rgba(0, 0, 0, 0.4),
        2px 2px 5px rgba(255, 255, 255, 0.4) inset;
    /* Inner highlight for polish */

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

    cursor: pointer;
    font-size: 14px;
    /* Drastically reduced to fit text */
    font-family: "Noto Serif", serif;
    font-weight: 900;
    color: #333;
    user-select: none;
    z-index: 10;

    /* Smooth hover lift */
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), margin 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    box-sizing: border-box;
    padding: 2px;
}

/* Layer Dimming (Ambient Occlusion) */
/* Lower layers are darker */
.tile[data-z="0"] {
    filter: brightness(0.85);
    z-index: 10;
}

.tile[data-z="1"] {
    filter: brightness(0.90);
    z-index: 20;
}

.tile[data-z="2"] {
    filter: brightness(0.95);
    z-index: 30;
}

.tile[data-z="3"] {
    filter: brightness(1.00);
    z-index: 40;
}

.tile[data-z="4"] {
    filter: brightness(1.05);
    z-index: 50;
}

@media (min-width: 600px) {
    .tile {
        font-size: 18px;
        /* Reduced desktop size */
    }
}

.tile::after {
    /* Shine effect */
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    border-radius: 2px 2px 0 0;
    pointer-events: none;
    opacity: 0.3;
}

/* Hover: Lift */
.tile:hover {
    /* 
       Use margin to lift "visually" without breaking the
       JS-set transform(translate) which handles the isometric depth.
    */
    margin-top: -4px;
    margin-left: -4px;

    filter: brightness(1.15);
    /* Highlight */

    /* Increase shadow to simulate height */
    box-shadow:
        /* Keep original side stack but shift it? 
           Actually, if we move the element up/left via margin,
           the shadow moves with it.
           We want the shadow to STAY or elongate?
           Responsive 3D movement is hard.
           Simple lift is usually enough.
           Let's just brighten and maybe add a larger drop shadow.
        */
        1px 1px 0 #E0E0E0,
        2px 2px 0 #D5D5D5,
        3px 3px 0 #CCCCCC,
        4px 4px 0 #8D6E63,
        5px 5px 0 #795548,
        6px 6px 0 #6D4C41,
        7px 7px 0 #5D4037,
        8px 8px 0 #4E342E,
        /* Deeper Drop Shadow */
        15px 20px 25px rgba(0, 0, 0, 0.5),
        2px 2px 5px rgba(255, 255, 255, 0.4) inset;

    z-index: 100 !important;
    /* Ensure hover is on top of current layer */
}

/* Selected: Super Bright High-Vis */
.tile.selected {
    background: #FFF9C4;
    /* Light Yellow */
    border-color: #FBC02D;

    /* Lift slightly more */
    margin-top: -6px;
    margin-left: -6px;

    /* Selected "Gold" Glow */
    box-shadow:
        1px 1px 0 #FDD835,
        2px 2px 0 #FBC02D,
        3px 3px 0 #F9A825,
        4px 4px 0 #F57F17,
        5px 5px 0 #EF6C00,
        6px 6px 0 #E65100,
        7px 7px 0 #E65100,
        8px 8px 0 #BF360C,
        0 0 15px #FFD700,
        /* Outer Glow */
        15px 20px 20px rgba(0, 0, 0, 0.6);

    filter: brightness(1.1);
    z-index: 1000 !important;
}

/* Colors */
.tile[data-suit="char"] {
    color: #B71C1C;
}

.tile[data-suit="circle"] {
    color: #0D47A1;
}

.tile[data-suit="bamboo"] {
    color: #1B5E20;
}

.tile[data-suit="honor"] {
    color: #000;
}

.tile[data-suit="season"],
.tile[data-suit="flower"] {
    color: #E91E63;
}

.tile[data-val="中"] {
    color: #C62828;
}

.tile[data-val="發"] {
    color: #2E7D32;
}

.tile[data-val="白"] {
    color: transparent;
    border: 1px solid #90A4AE;
    background: #F5F5F5;
}

/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    backdrop-filter: blur(2px);
    color: #fff;
}

.hidden {
    display: none;
}

/* Primary Btn */
.primary-btn {
    background: #FF9800;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.8rem 2.5rem;
    border-radius: 4px;
    /* Matches block theme */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 0 #E65100;
    text-transform: uppercase;
    transform: translateY(0);
}

.primary-btn:hover {
    background: #FB8C00;
}

.primary-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Message Badge */
#messageArea {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFD700;
    color: #000;
    padding: 10px 30px;
    border-radius: 4px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#messageArea.visible {
    opacity: 1;
}

.instructions {
    background: #263238;
    color: #ECEFF1;
    padding: 2.5rem;
    border-radius: 8px;
    text-align: left;
    margin: 3rem auto 5rem;
    line-height: 1.8;
}

.instructions h3 {
    color: #FF9800;
    margin-top: 2rem;
    border-bottom: 1px solid #546E7A;
    padding-bottom: 0.5rem;
}