/*
  Global styles for the card game.  The layout uses flexbox to center
  the deck and card area.  A flip card effect is implemented using
  CSS transforms.  Portions of this stylesheet are adapted from the
  W3Schools flip card tutorial, which demonstrates how to position
  front and back faces and rotate them about the Y‑axis【912137833663839†L927-L974】.
*/

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

h1 {
    margin-bottom: 20px;
    color: #333;
}

/* Deck styling */
/*
  Draw button styling for the scaled variant.  We give the deck the same
  width and height as the card (after scaling) so it visually matches
  your cards.  Replace the default background colour with
  transparency and display a card image instead.  You can modify the
  dimensions here to better suit your layout.  The `.draw-image` rule
  below ensures the image fills the deck and does not intercept
  pointer events, allowing clicks on the deck container to trigger a
  draw.
*/
.deck {
    width: 256px;
    height: 382px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    user-select: none;
    margin-bottom: 20px;
}

/* On hover, increase the shadow slightly to provide feedback */
.deck:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Image used for the draw deck. */
.draw-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Hidden class to hide elements until needed */
/* Hide elements completely; !important ensures this overrides other display rules */
.hidden {
    display: none !important;
}

/* Card area container */
.card-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Add extra spacing above the card area so the user's mouse pointer is
       unlikely to be directly over the card when it first appears.  Without
       this margin the card could flip immediately after drawing if the
       pointer overlaps its position. */
    margin-top: 40px;
}

/* Flip card container */
.flip-card {
    /* Allow the card to size itself dynamically.  The JavaScript will
       set explicit dimensions based on the image's natural size on
       draw, so the entire card image is visible without being
       cropped. */
    background-color: transparent;
    width: auto;
    height: auto;
    perspective: 1000px; /* gives 3D perspective */
}

/* Flip card inner wrapper: holds front and back faces */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/*
  Flip the card via JavaScript rather than with the :hover pseudo‑class.
  Relying on :hover caused the back of the card to remain visible
  unexpectedly when the user drew a new card or moved the pointer
  quickly.  Removing the :hover rule prevents CSS from forcing a flip
  and allows mouseenter/mouseleave handlers to control the state.
*/
/* Flip the card on hover: when the user hovers over the card container,
   rotate the inner element 180 degrees to reveal the back.  The card
   automatically flips back when the pointer leaves the area. */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* When a 'flipped' class is applied to the inner wrapper (via JavaScript),
   rotate it as well.  This allows us to flip the card on mouseenter/mouseleave
   events instead of relying solely on :hover, which may not be supported
   consistently across embedded contexts. */
.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

/* Front and back faces */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Remove border radius and shadow so only the images are visible */
    border-radius: 0;
    box-shadow: none;
}

/* Style the front of the card */
.flip-card-front {
    /* Transparent background and no padding so the front image isn't
       surrounded by a white box */
    background-color: transparent;
    color: #333;
    padding: 0;
}

/* Style the back of the card */
.flip-card-back {
    /* Transparent background and no padding for the back image */
    background-color: transparent;
    color: #333;
    transform: rotateY(180deg);
    padding: 0;
}

/* Front and back images fill the available space while preserving aspect ratio */
#card-front-img,
#card-back-img {
    width: 100%;
    height: 100%;
    /* Contain the entire image within the card area so nothing is cropped */
    object-fit: contain;
    /* Remove rounding so the card edges are defined only by the image itself */
    border-radius: 0;
}

/* Discard button styling */
.discard-btn {
    padding: 8px 16px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    background-color: #e53935;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.discard-btn:hover {
    background-color: #f44336;
}

/* Controls container below the deck */
.controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* General styling for control buttons */
.control-btn {
    padding: 8px 16px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Specific styles for the next card button */
#next-btn {
    background-color: #1976d2;
}

#next-btn:hover {
    background-color: #1e88e5;
}

/* Specific styles for the reshuffle button */
#reshuffle-btn {
    background-color: #388e3c;
}

#reshuffle-btn:hover {
    background-color: #43a047;
}