* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   user-select: none;
   touch-action: none;

   /* outline: solid 1px #ff0000; */
}
:root {
   --scale: calc((2svw + 2svh) / 2);
   --mww: calc(100svw / 7 * 5);
   --cursor: pointer;
   --m: 10px;
   --s: 30px;
}
body {
   position: relative;
   width: 100svw;
   height: 100svh;
   background: #151520;
   overflow: hidden;
}

#app-content {
   position: relative;
   width: 100%;
   height: 100%;
   padding: calc(var(--m));
   display: grid;
   gap: 1rem;
   place-items: center;
   grid-template-columns: 1fr 20fr 1fr;
   grid-template-rows: repeat(3, 1fr);
   grid-template-areas: ". a ." ". b ." ". c .";
   transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.4s;
   transform-origin: left center;
   background: #151520;
}

body.menu-open #app-content {
   transform: translateX(70vw) perspective(1500px) rotateY(68deg);
   pointer-events: none;
   filter: blur(3px);
}

/* Entrance Animation */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

#view-cvs,
#cvs,
.view {
   opacity: 0; /* Start hidden */
   animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#view-cvs {
   animation-delay: 0.1s;
}
#cvs {
   animation-delay: 0.2s;
}
.view {
   animation-delay: 0.3s;
}

body > * {
   position: relative;
   width: 100%;
   height: 100%;
}
#view-cvs {
   grid-area: a;
   position: relative;
   display: grid;
   place-items: center;
}
#view-cvs > canvas {
   position: absolute;
   width: var(--mww);
   height: calc(var(--mww) / 1.2);
   cursor: var(--cursor);
}
#cvs {
   grid-area: b;
   width: 100%;
   height: 100%;
   position: relative;
   display: grid;
   place-items: center;
}
#cvs > canvas {
   position: absolute;
   outline: double calc(var(--scale) / 3) #457dff;
   box-shadow: 0 0 calc(var(--scale)) #000000;
   width: min(calc(var(--mww) / 1.2), 300px);
   height: min(calc(var(--mww) / 1.2), 300px);
   background: #000000;
   cursor: var(--cursor);
   image-rendering: pixelated;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#cvs > canvas:hover {
   box-shadow: 0 0 calc(var(--scale) * 1.5) #457dff66;
   outline-color: #7da4ff;
}
.view {
   grid-area: c;
   position: relative;
   display: grid;
   width: calc(var(--mww) / 1.1);
   grid-template-rows: 8fr 16fr 10fr;
   /* gap: 5px; */
}
.view > * {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.view .inputs {
   position: relative;
   width: 100%;
   height: 100%;
   padding: var(--m);
   display: grid;
   gap: var(--m);
   place-items: center;
   grid-template-columns: 1fr 1fr;
}

.view #num-btn {
   position: relative;
   width: 100%;
   height: 100%;
   display: grid;
   place-items: center;
   grid-template-columns: repeat(5, 1fr);
   gap: calc(var(--m) / 2);
   padding: 0 var(--m);
   transition: linear 0.3s;
   scale: 0;
}
.view #num-btn.active {
   scale: 1;
}
.btn {
   position: relative;
   display: grid;
   border: none;
   outline: none;
   cursor: var(--cursor);
   outline: 1px solid #ffffff;
   box-shadow: inset 2px 2px 3px #ffffff, 2px 2px 3px #000000;
   place-items: center;
   width: 100%;
   height: 100%;
   padding: calc(var(--s) / 6);
   border-radius: 8px;
   font-weight: 900;
   font-size: clamp(16px, 2vh, 24px);
   background: #cccccc;
   transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   scale: 1;
}
.number.btn {
   font-size: clamp(24px, 3vh, 40px);
   font-family: "Courier New", Courier, monospace;
}
.btn:hover {
   transform: translateY(-2px) scale(1.05);
   box-shadow: inset 2px 2px 3px #ffffff, 0 5px 15px rgba(0, 0, 0, 0.3);
   filter: brightness(1.1);
   z-index: 1;
}
.btn:active {
   transform: translateY(1px) scale(0.95);
   box-shadow: inset 2px 2px 3px #ffffff, 0 2px 5px rgba(0, 0, 0, 0.2);
}
.btn.show {
   scale: 0.85;
}
.btn.on,
.train.show,
#clear.show {
   outline: 1px solid #003bc6;
   box-shadow: inset 2px 2px 3px #7da4ff, 2px 2px 3px #000000;
   background: #2f6dff;
}
#train {
   position: relative;
   width: 100%;
   height: 100%;
   padding: var(--m);
   display: grid;
   place-items: center;
   transition: linear 0.3s;
   scale: 0;
}
#train.active {
   scale: 1;
}

/* -------- menu ---------- */
#menu-icon {
   position: fixed;
   top: var(--m);
   left: var(--m);
   width: var(--s);
   height: var(--s);
   z-index: 200;
   display: grid;
   place-items: center;
   cursor: var(--cursor);
   background: #0a0a1d99;
   backdrop-filter: blur(5px);
   border-radius: calc(var(--scale) / 2);
   outline: solid calc(var(--m) / 3) #00000099;
   transition: all 0.3s;
}

#menu-icon span {
   position: absolute;
   width: calc(var(--s) / 1.4);
   height: calc(var(--s) / 10);
   border-radius: calc(var(--scale) / 1.5);
   background: #457dff;
   transition: ease-in-out 0.3s;
   transform: scale(1);
}

#menu-icon:hover span {
   background: #7da4ff;
   box-shadow: 0 0 5px #457dff;
}

#menu-icon span:first-child {
   transform: translateY(calc(var(--s) / 5));
}
#menu-icon span:last-child {
   transform: translateY(calc(var(--s) / -5));
}

body.menu-open #menu-icon span {
   width: calc(var(--s) / 1.3);
   height: calc(var(--s) / 9);
}
body.menu-open #menu-icon span:first-child {
   transform: translateY(0) rotate(-225deg);
}
body.menu-open #menu-icon span:nth-child(2) {
   transform: scale(0);
}
body.menu-open #menu-icon span:last-child {
   transform: translateY(0) rotate(225deg);
}

main {
   position: fixed;
   top: 0;
   left: 0;
   width: 70vw;
   height: 100svh;
   z-index: 100;
   background: #0a0a1d;
   border-radius: 0 20px 20px 0;
   transform: translateX(-100%);
   transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
   overflow: hidden;
}

main.active {
   transform: translateX(0);
   box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5);
}

main > * {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-weight: 700;
}

main #options {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2rem;
   transform: scale(0.9);
   padding: 2rem;
   opacity: 0;
   transition: all 0.3s ease-out;
   pointer-events: none;
}
main.active #options {
   transform: scale(1);
   opacity: 1;
   pointer-events: all;
}

#options .title {
   font-size: 2rem;
   text-align: center;
   color: #ffffff;
   font-weight: 900;
   letter-spacing: 2px;
   margin-top: 2rem;
}

#options .ranges {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.row {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
}

.row label {
   font-size: 1rem;
   color: #ffffff;
   font-weight: 700;
}

.row input {
   width: 100%;
   cursor: var(--cursor);
}

.row span {
   display: flex;
   justify-content: space-between;
   width: 100%;
   color: #457dff;
}

#options .buttons {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 1rem;
}

#options .buttons input[type="button"] {
   width: 100%;
   padding: 1rem;
   font-size: 1rem;
   border-radius: 10px;
   background: #457dff;
   color: #001952;
   font-weight: 900;
   border: none;
   text-transform: uppercase;
   border-bottom: 4px solid #00298a;
   box-shadow: inset 2px 2px 3px #5ebcff, 2px 2px 3px #000000;
   outline: none;
   cursor: var(--cursor);
   transition: transform 0.1s;
}

#options .buttons input[type="button"]:active {
   transform: translateY(2px);
   border-bottom-width: 2px;
}

#options .buttons #reset {
   background: #ff2f2f;
   border-bottom-color: #790000;
   box-shadow: inset 2px 2px 3px #ff4f4f, 2px 2px 3px #000000;
   color: white;
}

/* ------- range slider ------- */
input[type="range"] {
   position: relative;
   justify-content: center;
   align-items: center;
   height: calc(var(--s) / 2 + var(--s) / 10);
   border: solid calc(var(--s) / 10) #fff;
   border-radius: calc(var(--s));
   width: 100%;
   -webkit-appearance: none;
   background: transparent;
   box-shadow: inset 0px 0px 2px #000000;
}
input[type="range"]:focus {
   outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: calc(var(--s) / 2);
   cursor: pointer;
   background: #fff;
   border-radius: 50px;
}
input[type="range"]::-webkit-slider-thumb {
   height: calc(var(--s) / 2);
   width: calc(var(--s) / 2);
   border-radius: 50px;
   background: #457dff;
   cursor: pointer;
   box-shadow: inset 1px 1px 1px #ffffff44, inset -1px -1px 1px #00000044;
   -webkit-appearance: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
   background: #ffffff;
}
input[type="range"]::-moz-range-track {
   width: 100%;
   height: calc(var(--s) / 2);
   cursor: pointer;
   background: #fff;
   border-radius: 50px;
}
input[type="range"]::-moz-range-thumb {
   height: calc(var(--s) / 2);
   width: calc(var(--s) / 2);
   border-radius: 50px;
   background: #457dff;
   cursor: pointer;
   box-shadow: inset 1px 1px 1px #ffffff44, inset -1px -1px 1px #00000044;
}
input[type="range"]::-ms-track {
   width: 100%;
   height: calc(var(--s) / 2);
   cursor: pointer;
   background: #fff;
   border-radius: 50px;
}
input[type="range"]::-ms-fill-lower {
   background: #ffffff;
   border: 1px solid #000000;
   border-radius: 100px;
}
input[type="range"]::-ms-fill-upper {
   background: #ffffff;
   border: 1px solid #000000;
   border-radius: 100px;
}
input[type="range"]::-ms-thumb {
   height: calc(var(--s) / 2);
   width: calc(var(--s) / 2);
   border-radius: 50px;
   background: #457dff;
   cursor: pointer;
   box-shadow: inset 1px 1px 1px #ffffff44, inset -1px -1px 1px #00000044;
}
input[type="range"]:focus::-ms-fill-lower {
   background: #ffffff;
}
input[type="range"]:focus::-ms-fill-upper {
   background: #ffffff;
}

/*  -------- Tablet (600px+)  ---------- */
@media screen and (min-width: 600px) {
   :root {
      --mww: calc(100svw / 7 * 3);
      --m: 15px;
      --s: 40px;
   }

   /* Reset transforms for tablet/desktop */
   body.menu-open #app-content {
      transform: none;
      border-radius: 0;
      box-shadow: none;
   }

   /* Fixed menu for tablet/desktop */
   main {
      width: 350px;
   }

   #app-content {
      position: relative;
      width: 100%;
      height: 100%;
      padding: calc(var(--m));
      display: grid;
      gap: 1rem;
      place-items: center;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas: ". . a a a . ." "b b b b c c c";
   }
   #view-cvs > canvas {
      width: calc(var(--mww) * 1.3);
      height: var(--mww);
   }
   #cvs > canvas {
      position: absolute;
      width: min(calc(var(--mww) * 0.9), 350px);
      height: min(calc(var(--mww) * 0.9), 350px);
   }
   .view {
      height: 70%;
   }
   .number.btn {
      font-size: clamp(24px, 4vh, 40px);
   }
}

/*  -------- Desktop (1025px+)  ---------- */
@media screen and (min-width: 1025px) {
   :root {
      --mww: calc(100svw / 3); /* Adjust base size for desktop */
      --m: 20px;
      --s: 40px;
   }
   #app-content {
      grid-template-columns: 1.5fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
         "a b"
         "a c";
      padding: 2rem;
      gap: 2rem;
   }

   #view-cvs {
      height: 100%;
      align-items: center;
   }

   #view-cvs > canvas {
      width: calc(var(--mww) * 1.6);
      height: calc(var(--mww) * 1.7 / 1.4);
   }

   #cvs {
      align-self: end;
   }

   #cvs > canvas {
      width: calc(var(--mww) * 0.8);
      height: calc(var(--mww) * 0.8);
   }

   .view {
      align-self: start;
      height: auto;
      width: calc(var(--mww) * 0.8);
   }
}

/* Toast Notification */
#toast {
   position: fixed;
   bottom: 20px;
   left: 50%;
   height: 50px;
   width: fit-content;
   transform: translateX(-50%) translateY(100px);
   background: #00d100;
   color: black;
   padding: 10px 24px;
   border-radius: 50px;
   display: grid;
   place-items: center;
   font-size: 14px;
   font-weight: 600;
   font-family: system-ui, -apple-system, sans-serif;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   z-index: 1000;
   pointer-events: none;
   white-space: nowrap;
}

#toast.show {
   transform: translateX(-50%) translateY(0);
   opacity: 1;
}