/*
 * Global styling for the Tetris web page. The goal is to mirror the look
 * of the provided handheld Tetris design: a vivid blue background, a bold
 * heading, a white call‑to‑action button, and a realistic console graphic
 * with an embedded, functional game screen.  Colour values were sampled
 * directly from the supplied image for authenticity.
 */

html, body {
    margin: 0;
    padding: 0;
    /* Use a stack of common sans‑serif fonts for crisp, clean text. */
    font-family: "Helvetica Neue", Arial, sans-serif;
    background-color: #326a9e; /* sample from the original background */
    color: #ffffff;
    /* Take up the full viewport height so flexbox can size children relative
       to it.  Hide any overflowing content to prevent scrollbars from
       appearing. */
    height: 100vh;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    /* Reduce heading size on medium screens */
    h1 {
        font-size: 4rem;
    }
    /* On medium screens allow the device to occupy a bit more vertical space */
    #device {
        height: 65vh;
    }
}

@media (max-width: 600px) {
    /* Further reduce heading and button sizes on small screens */
    h1 {
        font-size: 3rem;
    }
    #play-button,
    #pause-button,
    #sound-button {
        padding: 8px 20px;
        font-size: 1rem;
    }
    /* Reduce the device height further on very small screens to ensure it remains fully visible */
    #device {
        height: 55vh;
    }
}

/* Container holds the heading, button and device. */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    text-align: center;
    padding-top: 40px;
    box-sizing: border-box;
}

/* Title styling closely matches the bold, uppercase text in the design. */
h1 {
    margin: 0;
    padding: 0;
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

/* Play button echoes the light rectangular button beneath the title. */
/* Container for the control buttons.  Buttons are arranged side‑by‑side
   with a small gap. */
.controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Style shared by all interactive buttons (play, pause, sound). */
#play-button,
#pause-button,
#sound-button {
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #326a9e;
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#play-button:hover,
#pause-button:hover,
#sound-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#play-button:active,
#pause-button:active,
#sound-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Subtle animation on hover/click to give tactile feedback. */
#play-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#play-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Device wrapper replicates the handheld console using a transparent cut‑out.  The
   background image is the device with the LCD area removed so that the
   underlying canvas can show through. */
#device {
    position: relative;
    /* Maintain the device’s aspect ratio (1024×1136) while allowing
       the script to set the height dynamically.  The width is
       automatically derived from the height via the aspect ratio.  We
       cap the maximum height at 700px to prevent the console from
       growing excessively on very large displays, and limit the width
       to 80% of the viewport width to avoid horizontal scrollbars. */
    height: auto;
    max-height: 700px;
    width: auto;
    max-width: 80vw;
    aspect-ratio: 1024 / 1136;
    /* Device overlay with transparent screen area.  The overlay is
       responsible for the bezel and shading, leaving the actual game
       canvas to shine through the cut‑out. */
    background-image: url('device_overlay_top100.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 40px;
    /* Drop shadow to emulate the photographic shadow. */
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3));
}

/* Screen container sits above the device image and houses the game canvas.  The
   sizing and placement are derived from the measured coordinates of the
   transparent hole in the overlay image (left:357px, right:663px,
   top:120px, bottom:419px on a 1024×1136 canvas).  Converting those values
   into percentages ensures the screen scales with the device when the
   browser resizes. */
#screen {
    position: absolute;
    top: 8.8%;   /* 100 / 1136 */
    left: 34.9%;  /* 357 / 1024 */
    width: 29.9%; /* (663 − 357) / 1024 */
    height: 28.1%;/* (419 − 100) / 1136 */
    /* Remove background fill and borders; the device overlay provides the
       bezel and shading.  The canvas will be visible through the hole. */
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
    /* No perspective transform is applied here because the overlay image
       already contains the photographed perspective.  Applying further
       transforms would cause the canvas to misalign with the cut‑out. */
    transform: none;
    border-radius: 0;
    box-shadow: none;
}

/* Left side of the screen holds the play field. */
#board-wrapper {
    /* Use a fixed flex-basis to ensure the play field occupies roughly two thirds
       of the LCD screen. The remaining third is reserved for the stats panel.
       These values were chosen based on the proportions seen in the
       original device (board : stats ≈ 65 : 35). */
    flex: 0 0 65%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hide anything that spills outside the play field to keep the grid
       from bleeding into the stats panel. */
    overflow: hidden;
}

/* Right side shows score, level and next piece preview. */
#stats-wrapper {
    /* Stats occupy the remaining portion of the screen width (about 35%). */
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 4px;
    color: #4a4d36;
    font-size: 0.8rem;
    /* Ensure the scoreboard is opaque so the underlying grid lines
       from the playfield do not show through. */
    background-color: #aeb38b;
}

/* Each stat group stacks a label with its value or preview. */
.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat .label {
    font-weight: bold;
    margin-bottom: 2px;
}

#score-value,
#level-value {
    font-size: 1.4rem;
    line-height: 1;
}

/* Main game canvas. Its width and height are set dynamically in the script
   so that the playfield scales with the container. */
#tetris-canvas {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: block;
    /* Avoid blurriness when scaling by favouring crisp edges on the grid. */
    image-rendering: pixelated;
}

/* Next piece preview canvas. Gives a slight border to mimic the design. */
#next-canvas {
    width: 100%;
    height: auto;
    border: 1px solid #4a4d36;
    background-color: #aeb38b;
}

/* Mobile controls */
@media (pointer: coarse) {
  #mobile-controls {
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1000;
  }
  .control-btn {
    width: 60px;
    height: 60px;
    font-size: 24px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #999;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    color: #333;
    touch-action: none;
  }
  .control-btn:active {
    background: rgba(200,200,200,0.9);
  }
}