/* styles.css */

/* ========== Root & Typography ========== */
:root {
  --led-size: 4rem;
  --button-size: 4rem;
  --gap: 1rem;
  --font-stack: system-ui, sans-serif;
  --led-off: hsl(0, 0%, 20%);
  --serial-color: hsl(0, 0%, 90%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 1rem = 16px by default, scales with user settings */
}

body {
  margin: 0;
  padding: var(--gap);
  font-family: var(--font-stack);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  /* background: hsl(210, 20%, 98%); */
  /* Dark radial gradient for dark mode */
  background: radial-gradient(circle at center, hsl(220, 15%, 25%) 0%, hsl(220, 15%, 10%) 100%);
  height: 100vh;
  color: hsl(0, 0%, 85%);
}

/* ========== Container Layout ========== */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /*gap: calc(var(--gap) * 2);*/
  /*padding: 6rem 3rem;*/
  /* padding: calc(var(--gap) * 8) calc(var(--gap) * 2);*/
  max-width: 800px;
  width: 100%;
  height: 80vh;

  /* background as woodgrain.png, fit to the container */
  background: url('woodgrain.png') no-repeat center center;
  border: 1px solid black;
  border-radius: 2.5rem;

  box-shadow: 
    1rem 1rem 0 rgba(64, 80, 64, 1.0),
    1rem 1rem 4rem rgba(0, 0, 0, 0.9),

    inset 0 0 1rem rgba(255, 255, 255, 0.1);
}

/* ========== Contraptions Container ========== */
.contraptions-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) * 3);
  width: 100%;
}

/* ========== Reset Button ========== */
.reset {
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  background: hsl(220, 70%, 50%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;

  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.9),
    -0.5rem -0.5rem 0.5rem rgba(0, 0, 0, 0.5) inset,
    0.5rem 0.5rem 0.5rem rgba(255, 255, 255, 0.5) inset,
    0.25rem 0.25rem 0.15rem rgba(255, 255, 255, 0.5) inset;
}

.reset:hover {
  background: hsl(220, 70%, 45%);
}

.reset:active {
  background: hsl(220, 70%, 40%);
}

.reset.disabled {
  background: hsl(0, 0%, 60%);
  color: hsl(0, 0%, 40%);
  cursor: default;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.3),
    -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 0.2) inset,
    0.25rem 0.25rem 0.5rem rgba(255, 255, 255, 0.1) inset;
}

.reset.disabled:hover {
  background: hsl(0, 0%, 60%);
  transform: none;
}

.reset.disabled:active {
  background: hsl(0, 0%, 60%);
  transform: none;
}

/* ========== Button Container (Horizontal Layout) ========== */
.button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  /*gap: calc(var(--gap) * 2);*/
  margin-top: var(--gap);
}

/* ========== Color Wheel (Post-it Note Style) ========== */
.color-wheel {
  background: #fff3cd;
  /*background: radial-gradient(circle at 50% 50%, hsl(50, 100%, 90%) 0%, hsl(50, 100%, 70%) 100%);*/
  background: linear-gradient(135deg, hsl(50, 0%, 30%) 0%, hsl(50, 0%, 10%) 100%);
  border: 0.5rem solid white;
  border-radius: 0.1rem;
  padding: 1rem;
  transform: rotate(-2deg);
  box-shadow: 
    0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-wheel:hover {
  transform: rotate(-1deg) scale(1.02);
}

.color-wheel img {
  display: block;
  filter: drop-shadow(0 0.1rem 0.2rem rgba(0, 0, 0, 0.2));
}

/* ========== Contraptions Layout ========== */
.contraption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--gap) * 1.5);
  background: rgb(64, 64, 64);
  border-radius: 1rem;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.9),
    -1rem -1rem 1rem rgba(0, 0, 0, 0.5) inset,
    1rem 1rem 1rem rgba(255, 255, 255, 0.25) inset,
    0.5rem 0.5rem 0.3rem rgba(255, 255, 255, 0.25) inset;
  min-width: 300px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(0) scale(1);
  opacity: 1;
}

.contraption.flying-up {
  transform: translateY(-100vh) scale(0.8);
  opacity: 0;
}

@keyframes fly-down {
  0% {
    transform: translateY(-100vh) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ========== Serial Number ========== */
.serial {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--serial-color);
  letter-spacing: 0.1em;
}

/* ========== LED Display ========== */
.led {
  width: var(--led-size);
  height: var(--led-size);
  border-radius: 50%;
  background: var(--led-off);
  border: 3px solid hsl(0, 0%, 20%);
  transition: background-color 1.0s ease;
  box-shadow: 
    0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.9),
    -0.5rem -0.5rem 0.5rem rgba(0, 0, 0, 0.5) inset,
    0.5rem 0.5rem 0.5rem rgba(255, 255, 255, 0.5) inset,
    0.25rem 0.25rem 0.15rem rgba(255, 255, 255, 0.5) inset;
}

/* ========== LED Colors ========== */
.led.off {
  background: var(--led-off);
  transition: background-color 0s ease;
}

.led.red {
  background: #FF0000;
}

.led.yellow {
  background: #FFFF00;
}

.led.green {
  background: #00FF00;
}

.led.cyan {
  background: #00FFFF;
}

.led.blue {
  background: #0000FF;
}

.led.magenta {
  background: #FF00FF;
}

/* ========== Button Container ========== */
.buttons {
  display: flex;
  gap: calc(var(--gap) * 0.5);
}

/* ========== Individual Buttons ========== */
.buttons button {
  width: var(--button-size);
  height: var(--button-size);
  font-size: 0.9rem;
  font-weight: 600;
  background: hsl(0, 0%, 25%);
  color: var(--serial-color);
  border: 1px solid hsl(0, 0%, 0%);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.9),
    -0.5rem -0.5rem 0.5rem rgba(0, 0, 0, 0.5) inset,
    0.5rem 0.5rem 0.5rem rgba(255, 255, 255, 0.25) inset,
    0.25rem 0.25rem 0.15rem rgba(255, 255, 255, 0.25) inset;
}

.buttons button:hover {
  background: hsl(0, 0%, 40%);
  border-color: hsl(0, 0%, 40%);
}

.buttons button:active {
  background: hsl(0, 0%, 35%);
  transform: translateY(1px);
}

/* ========== Indicator Light ========== */
.indicator-light {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(0, 0%, 15%);
  border: 1px solid hsl(0, 0%, 10%);
  transition: all 0.3s ease;
  box-shadow: 
    0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.8),
    -0.05rem -0.05rem 0.05rem rgba(255, 255, 255, 0.1) inset;
}

.indicator-light.active {
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 50%, #ff6666 100%);
  border-color: #ff0000;
  box-shadow: 
    0 0 0.25rem rgba(255, 0, 0, 0.6),
    0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.8),
    -0.05rem -0.05rem 0.05rem rgba(255, 255, 255, 0.1) inset;
}

/* ========== Responsive Layout ========== */
@media (min-width: 768px) {
}

@media (max-width: 767px) {
  .container {
    gap: var(--gap);
  }
  
  .contraption {
    min-width: 280px;
    padding: var(--gap);
  }
  
  .led {
    width: calc(var(--led-size) * 0.8);
    height: calc(var(--led-size) * 0.8);
  }
  
  .buttons button {
    width: calc(var(--button-size) * 0.9);
    height: calc(var(--button-size) * 0.9);
    font-size: 0.8rem;
  }
}

/* ========== Modal Overlay ========== */

.modal-overlay {
  position: fixed;
  z-index: 1000;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30, 20, 10, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  box-shadow: 0 0 2rem 1rem rgba(0,0,0,0.5);
  padding: 2vh 0 2vh 0;
  overflow: hidden; /* Prevent body scroll */
}

.modal-poster {
  max-width: 90vw;
  max-height: 70vh;
  border-radius: 1.5rem;
  box-shadow: 0 0 2rem 0.5rem #0008;
  margin-bottom: 2rem;
}

.modal-start-btn {
  font-size: 2rem;
  padding: 1rem 3rem;
  background: linear-gradient(90deg, #3fcf3f 0%, #2e8b2e 100%);
  color: #fff;
  border: none;
  border-radius: 1rem;
  font-weight: bold;
  box-shadow: 0 0.5rem 1rem #0006;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.modal-start-btn:hover {
  background: linear-gradient(90deg, #4fff4f 0%, #3fcf3f 100%);
  transform: scale(1.05);
}

.modal-letterhead {
  width: 20vw;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  display: block; /* Ensure it's a block element */
}

.modal-letterhead-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.modal-letterhead {
  width: 20vw;
  border-radius: 0.5rem;
  display: block;
}

.modal-letter-scrollbox {
  overflow-y: auto;
  width: 100%;
  height: 90vh;
  padding: 0 0.5rem;
  margin-top: 2vh;
}

.modal-letter-body {
  background: #fffbe9;
  color: #2a1a0a;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  line-height: 1.6;
  padding: 2rem 2.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem #0002;
  width: 80vw;
  margin: 0 auto; /* Center horizontally */
  box-sizing: border-box;
  white-space: pre-wrap;
  /* Add spacing between children */
}

.modal-letter-body > div {
  margin-bottom: 1.5rem; /* Add spacing between text and button */
}

.modal-continue-btn {
  font-size: 1.3rem;
  padding: 0.75rem 2.5rem;
  background: linear-gradient(90deg, #f7c873 0%, #e6a23c 100%);
  color: #442a00;
  border: none;
  border-radius: 0.7rem;
  font-weight: bold;
  box-shadow: 0 0.3rem 0.7rem #0003;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-bottom: 1.5rem;
  display: block; /* Ensure it's a block element */
  margin-left: auto;
  margin-right: auto;
}
.modal-continue-btn:hover {
  background: linear-gradient(90deg, #ffe6a0 0%, #f7c873 100%);
  transform: scale(1.04);
}

/* ========== Envelope Stack ========== */
.envelope-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 1rem;
  height: 10vh;
}

.envelope {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center;
  flex-shrink: 0;
  margin-right: -1.5rem;
}

.envelope:last-child {
  margin-right: 0;
}

.envelope:hover {
  transform: scale(1.1) rotate(0deg) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  z-index: 10 !important;
}

.envelope-front {
  width: 120px;
  height: 80px;
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  border: 2px solid #d0d0d0;
  border-radius: 0.3rem;
  position: relative;
  box-shadow: 
    0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  box-sizing: border-box;
}

.envelope-address {
  font-family: 'Courier New', monospace;
  font-size: 0.4rem;
  color: #333;
  line-height: 1.2;
  white-space: pre-line;
  text-align: center;
  margin-top: 0.5rem;
}

.envelope-stamp {
  display: block;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  background-image: url('iss-letterhead-trans.png');
  background-size: cover;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  font-weight: bold;
  color: white;
}