* {
  box-sizing: border-box;
}

@keyframes overlayFade {
  to {
    opacity: 1;
  }
}

@keyframes popupIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 0px rgba(80, 187, 84, 0.0),
                0 0 6px rgba(80, 187, 84, 0.15);
  }

  50% {
    box-shadow: 0 0 10px rgba(221, 218, 62, 0.25),
                0 0 18px rgba(80, 187, 84, 0.2);
  }

  100% {
    box-shadow: 0 0 0px rgba(80, 187, 84, 0.0),
                0 0 6px rgba(80, 187, 84, 0.15);
  }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;          /* ALWAYS flex */
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.75);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.popup {
  background: #1a1c27;
  border: 1px solid #2d3142;
  border-bottom: 3px solid #2d3142;
  position: relative;
  z-index: 100000;
  padding: 20px;
  border-radius: 6px;
  max-width: 400px;

  color: #ddda3e;
  font-family: 'Dumbledore', sans-serif;
  text-align: center;

  transform: scale(0.9);
  opacity: 0;

  animation:
    popupIn 0.5s ease forwards,
    borderGlow 2.5s infinite ease-in-out;
}

.popup h2 {
  color: rgb(89, 228, 71);
}

.popup button {
  margin-top: 15px;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #13161d;
  color: rgb(89, 228, 71);
  font-family: 'Dumbledore', sans-serif;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;  /* move to left */
  align-items: center;      /* move to top */
  min-height: 100vh;
  margin: 0;
  padding: 2vh; /* relative spacing instead of fixed feel */
  overflow-x: hidden;
  overflow-y: auto;
}

@font-face {
  font-family: 'Leoscar';
  src: url('fonts/Leoscar.ttf') format('truetype');
}

@font-face {
  font-family: 'MagicSchoolOne';
  src: url('fonts/MagicSchoolOne.ttf') format('truetype');
}

@font-face {
  font-family: 'Dumbledore';
  src: url('fonts/dum1/dum1.ttf') format('truetype');
}

.container {
  background:linear-gradient(
      to bottom,
      rgba(26, 28, 39, 1) 60%,
      rgba(26, 28, 39, 0.98) 75%,
      rgba(221, 218, 62, 0.089) 100%
    );
  padding: 2vh 2vw;
  border-radius: 5px;
  border: #ddda3e solid 1px;
  border-bottom: #ddda3e solid 3px;
  margin: 1vh;

  width: clamp(10px, 35vw, 20px);
  flex-shrink: 0;

  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.header {
  display: grid;
  color: #ddda3e;
  grid-template-columns: 0.48fr 0.7fr 1fr;
  font-size: 13px;
  margin-left: 2px;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.row {
  display: grid;
  color: #ddda3e;
  grid-template-columns: 1fr 1.5fr 2fr;
  margin-bottom: 5px;
  margin-right: 20px;
}

.label {
  display: flex;
  font-size: 12px;
  letter-spacing: 1px;
  margin-right: 2px;
}

.stats-panel input {
  background: #0e1410;
  margin-right: 5px;
  margin-left: 5px;
  border: #565712 inset 1px;
  border-radius: 5px;
  padding: 8px;
  color: #ddda3e;
  width: 100px;
}

input {
  background: #0e1410;
  padding: 8px;
  margin-top: 5px;
  border-radius: 5px;
  border: #565712 inset 1px;
  width: 150px;
  font-family: 'Dumbledore', sans-serif;
  color: #ddda3e;
  letter-spacing: 1px;
  
  transition: all 0.25s ease;
}

.input-wrap input {
  background-image: linear-gradient(to top, #ddda3e 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left bottom;

  border: #565712 inset 1px;
  border-radius: 5px;

  transition:
    background-size 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

input:hover {
  background-image: linear-gradient(
    to top,
    #ddda3e 2px,
    transparent 2px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.input-wrap input:hover {
  background-size: 100% 100%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input:focus {
  outline: none;
  background-image: none;

  box-shadow: inset 0 -2px 0 #ddda3e,
              0 0 6px rgba(221, 218, 62, 0.35);
}

button {
  font-family: 'Dumbledore', sans-serif;
  letter-spacing: 1px;

  padding: 8px 17px;

  border: none;
  border-radius: 5px;

  background-color: #50bb54;
  color: rgb(10, 65, 10);

  border-bottom: 3px solid #f0b800;

  cursor: pointer;

  transition: transform 0.15s ease,
              background-color 0.3s ease,
              color 0.3s ease;
}

.button-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: flex-end;
}

.reset-btn {
  padding: 6px 14px;
  font-size: 0.9em;
  opacity: 0.85;
}

.reset-btn:hover {
  opacity: 1;
  transform: translateY(1px);
}

.reset-btn:active {
  transform: translateY(3px); /* same as border-bottom */
}

.button-row button:last-child {
  background-color: #3a3f55;
  color: #ddda3e;
  border-bottom: 3px solid #f0b800;
}

.button-row button:last-child:hover {
  background-color: #2f3448;
  color: #ffffff;
}

button:hover {
  background-color: #3fa94a;
  color: #ffc400;

  transform: translateY(1px);
}

button:active {
  transform: translateY(3px); /* same as border-bottom */
}

.field label {
  font-family: 'Dumbledore', sans-serif;
  font-size: 13px;
  color: #ddda3e;
  letter-spacing: 1px;
  margin-top: 0px;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

/* Hide default checkbox */
.checkbox-field input[type="checkbox"] {
  display: none;
}

/* Layout */
.checkbox-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #ddda3e;
  font-family: 'Dumbledore', sans-serif;
  font-size: 12px;
}

.custom-box {
  width: 14px;
  height: 14px;
  background: #0e1410;
  border: #565712 inset 1px;
  border-radius: 3px;
  position: relative;

  transition: border-color 0.25s ease,
              box-shadow 0.25s ease,
              background-color 0.25s ease;
}

/* Green checkmark */
.custom-box::after {
  content: "✔";
  position: absolute;
  inset: 0;                 /* fills the box */
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  font-size: 11px;
  color: #50bb54;
  opacity: 0;
}

/* Show check when checked */
.checkbox-field input:checked + .custom-box::after {
  opacity: 1;
}

.checkbox-field input:checked + .custom-box {
  box-shadow: 0 0 3px rgba(221, 218, 62, 0.35);

}

.custom-box {
  transition: box-shadow 0.2s ease;
}

.checkbox-field label:hover .custom-box {
  border-color: #ddda3e;
  box-shadow: 0 0 4px rgba(221, 218, 62, 0.25);
  transform: scale(0.95);
  transition: border-color 0.25s ease,
            box-shadow 0.25s ease,
            background-color 0.25s ease,
            transform 0.1s ease;
}

.checkbox-field {
  margin-bottom: 8px;   /* space between rows */
}

.decimal {
  font-size: 0.75em;
}

#result {
  min-height: 20px;
  display: block;
  white-space: pre;
}

#result span {
  display: inline-block;
}

.copyright {
  font-size: 10px;
  opacity: 0.4;
  margin-top: 12px;
  text-align: center;
  color: #ddda3e;
  border-top: 1px solid rgba(221, 218, 62, 0.15);
  padding-top: 8px;
}

.help-link {
  color: #50bb54;
  font-family: 'Dumbledore', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  opacity: 0.8;
  transition: 0.2s ease;
}

.help-link:hover {
  opacity: 1;
  text-decoration: underline;
}