/*
  This file contains specific styles for the Launchpad component.
  It defines the appearance of the grid, pads (buttons), menu buttons,
  and decorative elements. By modifying this file, you can completely
  customize the aesthetics of the Launchpad.
*/

/*
  MAIN LAUNCHPAD CONTAINER
  - Defines the 10x10 grid and general appearance.
  - `display: grid;` and `grid-template-columns/rows: repeat(10, 1fr);` create the 10x10 grid.
    The grid includes the 8x8 pads, plus one row and column for menu buttons and decorative elements.
  - `aspect-ratio: 1 / 1;` keeps the Launchpad perfectly square.
  - CUSTOMIZATION: 
    - `background-color`: Change the Launchpad background color.
    - `max-width`: Increase or decrease this value to make the Launchpad larger or smaller.
    - `gap`: Modify the space between pads.
    - `border-radius`: Change the corner rounding of the Launchpad.
    - `background-image`: Via JavaScript, this is where the custom background image is set.
*/
.Launchpad {
  position: relative;
  /* Necessary to position child elements absolutely (e.g., the overlay). */
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 10px;
  max-width: 550px;
  aspect-ratio: 1 / 1;
  padding: 15px;
  background-color: #111;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  /* Shadow to give a depth effect. */
  margin: 0 auto;
  /* Centers the Launchpad horizontally in its container. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-items: stretch;
  align-items: stretch;
}

/*
  GRID PADS (8x8 Buttons)
  - Base style for square pads that play sounds.
  - CUSTOMIZATION:
    - `background-color`: Pad color at rest.
    - `border-radius`: Corner rounding of pads.
    - `box-shadow`: Inner shadow to give an "inset" effect.
*/
.grid-item {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  /* Keeps pads square to avoid distortion. */
  background-color: #d3d3d3;
  /* Light gray by default. */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  /* Quick transition for color change. */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  border: none;
  /* Removes default button border. */
  position: relative;
  /* Necessary to position the 'sticker' pseudo-element. */
}

/* Pad style on mouse hover. */
.grid-item:hover {
  background-color: #bfbfbf;
  /* A slightly darker gray. */
}

/*
  Pad style when active (i.e., while playing).
  - The `.active` class is added and removed via JavaScript.
  - CUSTOMIZATION: This is the most important style for visual feedback.
    - `background-color`: Pad color when pressed. #00aaff is a bright blue.
    - `box-shadow`: Adds a glow of the same color for a neon effect.
*/
.grid-item.active {
  background-color: #00aaff;
  box-shadow: 0 0 10px #00aaff;
}

/*
  MENU BUTTONS (side and top)
  - Style for round buttons.
  - CUSTOMIZATION:
    - `background-color`: Button color at rest.
    - `:hover` and `.selected`: Style on mouse hover or when a sound page is selected.
      Change `background-color` and `box-shadow` to customize the effect.
*/
.grid-item-menu {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  /* Keeps pads square for perfect circles. */
  background-color: #d3d3d3;
  border-radius: 50%;
  /* Makes them perfectly round. */
  cursor: pointer;
  transition: background-color 0.1s ease;
  border: none;
  position: relative;
  /* Necessary to position the 'sticker' pseudo-element. */
}

.grid-item-menu:hover {
  background-color: #bfbfbf;
}

.grid-item-menu.selected {
  background-color: #ff9900;
  /* Arancione per la pagina selezionata */
  box-shadow: 0 0 10px #ff9900;
  /* Bagliore arancione */
}

/*
  "STICKERS" STYLES
  - These styles create a fake black "sticker" on top of each pad, leaving only a colored border visible.
  - Works by adding a `::before` pseudo-element to each pad.
  - The `.has-stickers` class is added to `.Launchpad` via JavaScript to activate them.
  - CUSTOMIZATION:
    - `background-color`: Sticker color (currently black).
    - `width` and `height`: Control the sticker size. A lower value (e.g., 80%) will make the colored border thicker.
*/
.Launchpad.has-stickers .grid-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centers the sticker in the pad. */
  width: 85%;
  height: 85%;
  background-color: black;
  border-radius: 5px;
  /* Same rounding as the pad. */
  pointer-events: none;
  /* Allows clicks to pass through the sticker and reach the button. */
}

.Launchpad.has-stickers .grid-item-menu::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  background-color: black;
  border-radius: 50%;
  /* Rounding for menu buttons. */
  pointer-events: none;
}

/*
  DECORATIVE ELEMENTS (Triangles, Text, Logo)
  - These elements are positioned in the grid for purely aesthetic purposes.
*/
.grid-item-triangle {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangolo {
  width: 50%;
  height: 50%;
}

.testo_su_launchpad {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eee;
  font-size: 0.8em;
  text-align: center;
}

/* Logo positioning in the top right corner. */
#image-container {
  grid-column: 9 / span 2;
  /* Occupies the last two columns. */
  grid-row: 1 / span 2;
  /* Occupies the first two rows. */
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.square-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/*
  AUDIO UNLOCK OVERLAY
  - Style for the screen that appears at the beginning to request user interaction.
  - Covers the entire Launchpad.
  - CUSTOMIZATION:
    - `background-color`: Overlay background color. `rgba(18, 18, 18, 0.85)` is an almost opaque black.
    - `color`, `font-size`, `font-weight`: Style of the "Click to start" text.
*/
.launchpad-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(18, 18, 18, 0.85);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-weight: bold;
  z-index: 10;
  /* Positioned above everything else inside the Launchpad. */
  cursor: pointer;
  border-radius: 10px;
  /* Same rounding as the Launchpad. */
  text-align: center;
}

/* The `.hidden` class is added via JS to hide the overlay after the first click. */
.launchpad-overlay.hidden {
  display: none;
}