* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: linear-gradient(-45deg, #4a4a4a, #2a2a2a);
  min-height: -webkit-fill-available;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(10px, 2vw, 20px);
  font-family: 'Ruluko', sans-serif, system-ui;
  color: white;
}

header {
  color: white;
  font-family: 'Shrikhand', cursive, system-ui;
  font-size: clamp(1.3rem, 5vw, 2rem);
  text-align: center;
  text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

/* Tracker/Controls */
.tracker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #0B3303;
  padding: 10px 15px;
  border: 3px groove #fff;
  border-radius: 15px;
  margin-bottom: 10px;
  width: 100%;
  max-width: min(90vw, 450px);
}

.numDisks {
  background-color: #0B3303;
  color: white;
  border: 1px solid #4a4a4a;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: clamp(0.9rem, 3vw, 1rem);
}

#counter, #minimum {
  font-family: 'Roboto Mono', monospace;
  text-shadow: 2px 2px rgba(100, 100, 100, 0.5);
  font-size: clamp(0.85rem, 3vw, 1rem);
  text-align: center;
  margin: 0;
}

/* Game board */
.board {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(5px, 1.5vw, 15px);
  background-color: rgba(206, 206, 206, 0.85);
  padding: clamp(10px, 2vw, 20px);
  border-radius: 15px;
  border: 1px groove #fff;
  width: min(95vw, 550px);
  min-height: min(60vh, 350px);
  touch-action: manipulation;
}

/* Tower */
.tower {
  width: clamp(80px, 25vw, 160px);
  background: linear-gradient(90deg, 
    transparent 45%, 
    #9f834d 45%, 
    #9f834d 55%, 
    rgba(0,0,0,0.3) 56%, 
    transparent 56%
  );
  min-height: min(50vh, 280px);
  border-bottom: clamp(8px, 3vw, 15px) solid #9f834d;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tower:active {
  opacity: 0.9;
}

/* Disks */
.disk {
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 25px;
  height: clamp(25px, 6vw, 35px);
  box-shadow: 2px 1px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}

.disk:active {
  transform: scale(1.05);
  cursor: grabbing;
}

#disk1 { width: min(95%, 160px); background: linear-gradient(to bottom, #4ade80, #16a34a); }
#disk2 { width: min(90%, 145px); background: linear-gradient(to bottom, #fde047, #ca8a04); }
#disk3 { width: min(82%, 130px); background: linear-gradient(to bottom, #5eead4, #0d9488); }
#disk4 { width: min(74%, 115px); background: linear-gradient(to bottom, #f9a8d4, #db2777); }
#disk5 { width: min(66%, 100px); background: linear-gradient(to bottom, #7dd3fc, #0284c7); }
#disk6 { width: min(58%, 85px); background: linear-gradient(to bottom, #c4b5fd, #7c3aed); }
#disk7 { width: min(50%, 70px); background: linear-gradient(to bottom, #fca5a5, #dc2626); }
#disk8 { width: min(42%, 55px); background: linear-gradient(to bottom, #fdba74, #ea580c); }

/* Reset button */
.reset {
  text-align: center;
  margin: 15px auto;
  padding: 10px 20px;
  background-color: #0B3303;
  border: 2px groove #fff;
  border-radius: 10px;
  color: white;
  font-size: clamp(0.9rem, 3vw, 1rem);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-weight: bold;
}

.reset:active {
  transform: scale(0.97);
  background-color: #0d4a05;
}

/* Modal */
#modal {
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  overflow: auto;
  display: none;
  align-items: center;
  justify-content: center;
}

#modal-textbox {
  background-color: #0B3303;
  font-size: clamp(1rem, 4vw, 1.3rem);
  text-shadow: 2px 2px rgba(255, 255, 255, 0.2);
  border: 4px groove #fff;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  max-width: 90%;
}

footer {
  background-color: rgba(11, 51, 3, 0.2);
  padding: 10px;
  text-align: center;
  margin-top: auto;
}

/* Mobile */
@media (max-width: 480px) {
  .board { 
    min-height: 250px; 
    gap: 5px;
    padding: 8px;
  }
  .tower { 
    min-height: 220px;
    width: 28vw;
  }
  .disk { height: 22px; }
  .tracker { padding: 8px 10px; }
}

@media (max-width: 360px) {
  .tower { width: 26vw; min-height: 180px; }
  .disk { height: 20px; border-radius: 15px; }
  header { font-size: 1.2rem; }
}

/* Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  body { padding: 5px; }
  header { font-size: 1.1rem; margin-bottom: 5px; }
  .tracker { padding: 6px 10px; margin-bottom: 5px; }
  .board { min-height: 55vh; padding: 8px; }
  .tower { min-height: 45vh; }
  .disk { height: 20px; }
  .reset { margin: 8px auto; padding: 8px 16px; }
}