/* Variable Declarations
--------------------------------------------------------- */
:root {
    --color-app-container-background: hsl(0, 0%, 85%);
    --color-app-surface-background: hsl(0, 0%, 75%);
    --color-app-surface-text: hsl(0, 0%, 0%);
    --color-app-text: var(--color-text);
    --color-app-button-background: hsl(0, 0%, 50%);
    --color-app-button-text: hsl(0, 0%, 100%);
    --color-app-button-background-caution: var(--color-brand);
    --color-app-control-background: hsl(0, 0%, 70%);
    --color-app-control-text: hsl(0, 0%, 0%);
    --color-app-message-background: hsl(0, 3%, 77%);
    --color-app-message-text: hsl(0, 0%, 0%);
    --color-app-modal-background: hsl(0, 0%, 80%);
    --color-app-modal-text: hsl(0, 0%, 0%);
    --color-app-border: hsl(0, 0%, 10%);
}

.dark-mode {
    --color-app-container-background: hsl(0, 0%, 15%);
    --color-app-surface-background: hsl(0, 0%, 25%);
    --color-app-surface-text: hsl(0, 0%, 100%);
    --color-app-text: var(--color-text);
    --color-app-button-background: hsl(0, 0%, 50%);
    --color-app-button-text: hsl(0, 0%, 100%);
    --color-app-button-background-caution: var(--color-brand);
    --color-app-control-background: hsl(0, 0%, 0%);
    --color-app-control-text: hsl(0, 0%, 100%);
    --color-app-message-background: hsl(0, 3%, 77%);
    --color-app-message-text: hsl(0, 0%, 0%);
    --color-app-modal-background: hsl(0, 0%, 20%);
    --color-app-modal-text: hsl(0, 0%, 100%);
    --color-app-border: hsl(0, 0%, 100%);

}

body {
    background-color: var(--color-background);
}

/* App Container is the main App area */
.app__container {
      position: relative;
      background-color: var(--color-surface);
      border-radius: 10px;
      border: 1px solid var(--accent);
      width: 100%;
      max-width: 1200px;
      margin-top: 2rem;
      margin-inline: auto;
      padding: 16px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--color-app-text);
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.app__title {
  margin: 0;
  text-align: center;
  font-size: 3rem;
  color: var(--color-app-text);
}



/* App Controls */
.app__control-button {
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--color-app-button-background);
  color: var(--color-app-button-text);
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.1s ease;
  white-space: nowrap;
}

.app__control-select {
  background: var(--color-app-control-background);
  color: var(--color-app-control-text);
  border-radius: 999px;
  border: 1px solid var(--accent);
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.app__control-input {
  background: var(--color-app-control-background);
  color: var(--color-app-control-text);
  border-radius: 10px;
  border: 1px solid var(--accent);
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
}

.app__control-label {
    color: var(--color-app-text)
}

.app__image-thumbnail {
  height: 100px;
  width: 100px;
}

.app__panel {
  background: var(--color-app-surface-background);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--accent);
  color: var(--color-app-text);

}

.app__title {
  color: black;

}

/* Confetti Canvas Overlay */
#globalConfettiCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

/* App Messages */

.app__message {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-app-text);
}

.app__message-win {
  color: var(--success);
  font-weight: 600;
}

.app__message-lose {
  color: var(--danger);
  font-weight: 600;
}

.app__modal {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-app-modal-background);
  color: var(--color-app-modal-text);
}