style.css

:root{
  /* unit scales with viewport width and a device scale factor */
  --ui-scale: 1; /* overridden in media queries for tablet/phone */
  --unit: calc(1vw * var(--ui-scale));
}

body {
  font-family: 'Poppins', 'Montserrat', sans-serif;
  background-color: #ffd53d;
  background-image:
    radial-gradient(circle, rgb(255, 255, 255) 12%, transparent 13%),
    radial-gradient(circle, rgb(255, 255, 255) 12%, transparent 13%),
    linear-gradient(180deg, #ffd53d 0%, #ffb347 100%);
  background-size:
    calc(0.8 * var(--unit)) calc(0.8 * var(--unit)),
    calc(0.8 * var(--unit)) calc(0.8 * var(--unit)),
    100% 100%;
  background-position:
    0 0,
    calc(0.4 * var(--unit)) calc(0.4 * var(--unit)),
    center;
  background-attachment: scroll;
  margin: 0;
  padding: 0;
  color: #222;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; 
}

body.tutorial-open {
  overflow: hidden;
}

header {
  background: linear-gradient(90deg, #6c63ff, #40c9ff);
  color: #fff;
  padding: calc(1 * var(--unit)) calc(1.6 * var(--unit));
  box-shadow: 0 0.32vw 0.96vw rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.2 * var(--unit));
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  text-shadow: calc(0.2 * var(--unit)) calc(0.2 * var(--unit)) #0003;
  letter-spacing: calc(0.1 * var(--unit));
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s;
}

nav a:hover {
  color: #fff;
  text-shadow: 0 0 calc(0.6 * var(--unit)) #fff;
}

.quick-nav {
  display: none;
}

.quick-nav a {
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6c63ff, #40c9ff);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-nav a:active,
.quick-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0.9rem rgba(0,0,0,0.25);
}

.quote-carousel {
  flex: 1;
  text-align: right;
  font-family: 'Poppins', 'Montserrat', sans-serif;
  text-shadow: #222;
  
  font-weight: 500;
}

.quote-carousel p {
  margin: 0;
  font-size: calc(1 * var(--unit));
  line-height: 1.3;
  font-family: 'Poppins', 'Montserrat', sans-serif;
  opacity: 1;
  transition: opacity 0.5s ease;
  text-shadow: calc(0.1 * var(--unit)) calc(0.1 * var(--unit)) calc(0.3 * var(--unit)) rgba(0, 0, 0, 0.3);
}
.quote-carousel span {
  display: inline-block;
    text-shadow: calc(0.1 * var(--unit)) calc(0.1 * var(--unit)) calc(0.3 * var(--unit)) rgba(0, 0, 0, 0.3);
  margin-top: calc(0.2 * var(--unit));
  font-size: calc(0.85 * var(--unit));
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
  transition: opacity 0.5s ease;
}

main {
  /* Split screen: elements (left) and workspace (right) */
  display: grid;
  grid-template-columns: 1fr min(40vw, calc(36 * var(--unit)));
  gap: calc(1.6 * var(--unit));
  align-items: start;
  padding: calc(2.5 * var(--unit));
  /* ensure the split fills most of the viewport and sections can scroll internally */
  min-height: calc(100vh - 12 * var(--unit));
  width: 100%;
  box-sizing: border-box;
}

section {

  background: #fff;
  border-radius: calc(1.3 * var(--unit));
  padding: calc(1.2 * var(--unit));
  box-shadow: 0 calc(0.4 * var(--unit)) calc(1.2 * var(--unit)) rgba(0,0,0,0.2);
  border: calc(0.24 * var(--unit)) solid #6c63ff;
  z-index: 2;
  margin-top: calc(0.8 * var(--unit));
  scroll-margin-top: calc(6 * var(--unit));
  transition: transform 0.2s;
}

section:hover {
  transform: translateY(-1vw);
}

/* make sections behave as vertical panes so content can scroll internally */
section {
  display: flex;
  flex-direction: column;
}

section > h2 {
  margin-bottom: -3vw;
}

section h2 {
  text-align: center;
}

h2 {
  margin-top: 0;
  color: #6c63ff;
  text-shadow: calc(0.1 * var(--unit)) calc(0.1 * var(--unit)) #0001;
}

#elements {
  /* left column container spacing */
  margin-left: calc(1 * var(--unit));
}

#workspace {
  /* right column container spacing */
  margin-right: calc(1 * var(--unit));
}

#elementsContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: calc(0.8 * var(--unit));
  margin-top: calc(0.6 * var(--unit));
  /* allow the elements container to grow and scroll inside the left pane */
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0; /* important for flex children to allow proper scrolling */
  padding-bottom: calc(1 * var(--unit));
  position: relative;
}

/* Ensure the two main sections fill the grid columns */
/* Ensure the two main sections fill the grid columns and behave like panes */
section#elements { grid-column: 1; height: 95%; overflow: visible; padding: calc(1.2 * var(--unit)); }
section#workspace { grid-column: 2; height: 95%; overflow: visible; padding: calc(1.2 * var(--unit));
  /* subtle divider on the left of the workspace pane */
  border-left: calc(0.12 * var(--unit)) solid rgba(0,0,0,0.06);
}

.element {
  width: calc(3.6 * var(--unit));
  aspect-ratio: 1 / 1; /* ensure square tiles: height matches width */
  height: auto;
  border-radius: calc(1 * var(--unit));
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  color: #fff;
  font-weight: bold;
  text-shadow: 0.1vw 0.1vw #0003;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: 0 calc(0.32 * var(--unit)) calc(0.64 * var(--unit)) rgba(0,0,0,0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  border: calc(0.16 * var(--unit)) solid #fff;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0; /* allow shrinking inside grid cells */
}

.element.touch-pulse {
  animation: tapPulse 0.45s ease;
}

.drop-element.buffer-pop {
  animation: bufferPop 0.4s ease;
}

.element:hover {
  transform: translateY(calc(-0.2 * var(--unit)));
  background: linear-gradient(135deg, #54a0ff, #5f27cd);
}

#dropZone {
  width: 90%;
  margin-bottom: 1.5vw;
  height: calc(30 * var(--unit));
  margin-top: 4vw;
  margin-left: 1.3vw;
  border: calc(0.24 * var(--unit)) dashed #6c63ff;
  border-radius: calc(1.3 * var(--unit));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c63ff;
  font-weight: bold;
  font-size: calc(1.1 * var(--unit));
  background: #fafaff;
  transition: all 0.25s;
}

#dropZone.dropzone-pulse {
  animation: dropZonePulse 0.4s ease;
}

#dropZone.hover {
  background: #40c9ff;
  color: #fff;
  border-style: solid;
}

.drop-element {
  padding: calc(0.7 * var(--unit)) calc(1.2 * var(--unit));
  margin: 0 calc(0.32 * var(--unit));
  border: calc(0.16 * var(--unit)) solid #fff;
  border-radius: calc(0.8 * var(--unit));
  background: linear-gradient(135deg, #ff9ff3, #feca57);
  color: #fff;
  font-weight: bold;
  text-shadow: 0.08vw 0.08vw #0003;
  box-shadow: 0 calc(0.24 * var(--unit)) calc(0.48 * var(--unit)) rgba(0,0,0,0.2);
}

.fail-combo {
  color: #ff3838;
  font-weight: bold;
  text-shadow: calc(0.1 * var(--unit)) calc(0.1 * var(--unit)) #0003;
  animation: bounceIn 0.3s;
}

.success-combo {
  color: #00b894;
  font-weight: bold;
  text-shadow: calc(0.1 * var(--unit)) calc(0.1 * var(--unit)) #0003;
  animation: bounceIn 0.3s;
}

@keyframes bounceIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.button-group {
  text-align: center;
  margin-top: calc(1 * var(--unit));
}

button {
  background: linear-gradient(135deg, #6c63ff, #40c9ff);
  color: white;
  border: none;
  border-radius: calc(0.8 * var(--unit));
  padding: calc(0.8 * var(--unit)) calc(1.5 * var(--unit));
  margin: calc(0.32 * var(--unit));
  font-size: calc(1 * var(--unit));
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 calc(0.32 * var(--unit)) calc(0.48 * var(--unit)) rgba(0,0,0,0.2);
  transition: all 0.25s ease;
}

button:hover {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  color: #fff;
  transform: translateY(calc(-0.3 * var(--unit))) scale(1.05);
}

footer {
  text-align: center;
  padding: calc(1 * var(--unit));
  background: #6c63ff;
  color: #fff;
  font-size: calc(0.9 * var(--unit));
  box-shadow: 0 calc(-0.16 * var(--unit)) calc(0.48 * var(--unit)) rgba(0,0,0,0.2);
}

#openingAnimation {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #4940bf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  pointer-events: all; /* make it block interactions */
  transition: opacity 0.5s ease;
}

#openingAnimation.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  header { flex-direction: column; gap: 0.5rem; padding: 1rem; margin: 0; }
  #elements, #workspace { margin: 0; }
  #logo { width: 240px; }
  .quote-carousel { text-align: center; }

  .quick-nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.1);
    justify-content: center;
  }

  main {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.4rem 1rem 1.4rem;
    margin: 0;
  }

  section {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
  }

  section#elements, section#workspace {
    grid-column: auto;
    width: 100%;
  }

  #dropZone {
    width: 100%;
    margin-left: 0;
  }

  .filter-row,
  .status-row {
    flex-direction: column;
    align-items: stretch;
  }

  .history-item {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .history-time {
    text-align: left;
  }
}

/* Device scale overrides: tweak the --ui-scale so the vw-based unit adapts to common device classes.
   - Desktop (large viewports) uses full scale
   - Tablet reduces slightly
   - Phone reduces more for better proportional sizing
*/
@media (min-width: 1200px) {
  :root { --ui-scale: 1; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  :root { --ui-scale: 0.9; }
}

/* Mobile phones in portrait orientation */
@media (max-width: 599px) and (orientation: portrait) {
  :root {
    --ui-scale: 1.15;
  }

  header {
    flex-direction: column;
    text-align: center;
    padding: calc(1.5 * var(--unit));
  }

  #logo {
    width: min(75vw, 360px);
    max-width: 380px;
    margin-top: 0;
    margin-bottom: calc(1 * var(--unit));
  }

  main {
    display: flex;
    flex-direction: column;
    gap: calc(1.6 * var(--unit));
    padding: calc(1.4 * var(--unit)) calc(1.2 * var(--unit));
    margin: 0;
  }

  section {
    padding: calc(1.6 * var(--unit));
    width: 100%;
    box-sizing: border-box;
  }

  section#elements, section#workspace {
    width: 100%;
    margin: 0 auto;
    min-height: auto;
    padding: calc(1.5 * var(--unit));
  }

  #elementsContainer {
    gap: calc(1.4 * var(--unit));
  }

  section h2 {
    font-size: calc(2 * var(--unit));
    margin-bottom: calc(1.2 * var(--unit));
  }

  .element {
    width: calc(6 * var(--unit));
    aspect-ratio: 1/1;
  }

  button {
    padding: calc(1.1 * var(--unit)) calc(2.4 * var(--unit));
    font-size: calc(1.25 * var(--unit));
  }

  #dropZone {
    width: 100%;
    max-width: 100%;
    height: calc(42 * var(--unit));
    font-size: calc(1.35 * var(--unit));
  }

  .quick-nav a {
    font-size: calc(1.05 * var(--unit));
    padding: calc(0.7 * var(--unit)) calc(1.4 * var(--unit));
  }

  footer {
    font-size: calc(1.15 * var(--unit));
  }

  footer {
    font-size: calc(1 * var(--unit));
    padding: calc(1.5 * var(--unit));
  }
}


/* Logo sizing */
#logo { width: calc(10 * var(--unit)); margin-top: -1.3vw; margin-bottom: -0.7vw; height: auto; }

#openingAnimation .logo {
  width: calc(60 * var(--unit));
  animation: bounceIn 1.2s ease forwards;
}

#openingAnimation h1 {
  color: #fff;
  font-size: 1rem;
  margin-top: calc(2 * var(--unit));
  opacity: 0;
  animation: fadeInTitle 2s ease forwards;
  animation-delay: 0.8s;
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

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

#infoBox {
  position: absolute;
  max-width: calc(20 * var(--unit));
  padding: calc(0.8 * var(--unit));
  background-color: rgba(73, 64, 191, 0.95);
  color: #fff;
  border-radius: calc(0.8 * var(--unit));
  box-shadow: 0 calc(0.32 * var(--unit)) calc(1.2 * var(--unit)) rgba(0,0,0,0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
  font-size: calc(0.9 * var(--unit));
  line-height: calc(1.2 * var(--unit));
}

#periodicGrid {
  display: grid;
  width: 100%; /* ensure grid uses full pane width */
  /* 18 responsive columns that can shrink to fit the pane */
  grid-template-columns: repeat(18, minmax(0, 1fr));
  /* header row + 12 periods */
  grid-template-rows: auto repeat(12, auto);
  /* let cells size according to content (we use aspect-ratio on tiles) */
  grid-auto-rows: auto;
  gap: calc(0.4 * var(--unit));
  align-content: start;
  justify-items: center;
  align-items: center;
  contain: content;
}

/* Column header for IUPAC column numbers */
.column-header {
  grid-row: 1; /* the top header row */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #6c63ff;
  background: rgba(255,255,255,0.85);
  border-radius: calc(0.6 * var(--unit));
  padding: calc(0.4 * var(--unit)) calc(0.6 * var(--unit));
  font-size: calc(0.9 * var(--unit));
  box-shadow: 0 calc(0.16 * var(--unit)) calc(0.6 * var(--unit)) rgba(0,0,0,0.08);
  pointer-events: none; /* non-interactive header */
}

.s-block { font-size: calc(0.9 * var(--unit)); background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%); color: #222; }
.s-block:hover { filter: brightness(1.05); transform: translateY(-3px); }
.p-block { font-size: calc(0.9 * var(--unit)); background: linear-gradient(135deg, #FFB74D 0%, #FF8A65 100%); }
.s-block:hover { filter: brightness(1.02); transform: translateY(calc(-0.2 * var(--unit))); }
.p-block:hover { filter: brightness(1.02); transform: translateY(calc(-0.2 * var(--unit))); }
.d-block:hover { filter: brightness(1.02); transform: translateY(calc(-0.2 * var(--unit))); }
.f-block:hover { filter: brightness(1.02); transform: translateY(calc(-0.2 * var(--unit))); }
.f-block:hover { filter: brightness(1.05); transform: translateY(-3px); }
/* Non-standard / compound items: neutral gradient and smaller text for longer labels */
.none-block { font-size: calc(0.7 * var(--unit)); background: linear-gradient(135deg, #8a8a8a 0%, #E0E0E0 100%); color: #222; padding: calc(0.6 * var(--unit)); }
.none-block:hover { filter: brightness(1.01); transform: translateY(calc(-0.12 * var(--unit))); }
/* If a none-block's label is long, reduce its font-size so it fits cleanly in the tile */
.none-block.long-label { font-size: calc(0.5 * var(--unit)); padding: calc(0.45 * var(--unit)); }
/* drop preview variant */
.drop-element.none-block.long-label { font-size: calc(0.6 * var(--unit)); padding: calc(0.45 * var(--unit)); }
.locked { filter: grayscale(100%); opacity: 0.5; cursor: default; }
@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
.newly-unlocked { animation: blink 0.8s linear 2; }
#periodicGrid .element {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: calc(0.8 * var(--unit));
  border: calc(0.2 * var(--unit)) solid #fff;
  cursor: grab;
  color: #fff;
  text-shadow: calc(0.1 * var(--unit)) calc(0.1 * var(--unit)) #0003;
  transition: all 0.25s ease;
}
.grid-spacer {
  visibility: hidden;
  height: calc(0.5 * var(--unit));
}
#revealAllBtn {
  margin-top: calc(0.6 * var(--unit));
  padding: calc(0.6 * var(--unit)) calc(1.2 * var(--unit));
  cursor: pointer;
}

/* Optional: give the workspace a subtle 'window' feel on larger screens */
@media (min-width: 900px) {
  section#workspace { box-shadow: calc(-0.4 * var(--unit)) calc(0.8 * var(--unit)) calc(2.4 * var(--unit)) rgba(0,0,0,0.06); border-radius: calc(1.1 * var(--unit)); }
}

#instructions {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border: calc(0.12 * var(--unit)) solid #6b63ff5d;
  border-radius: calc(1 * var(--unit));
  width: 100%;
  margin: 0 0 calc(1.6 * var(--unit));
  z-index: 3;
  padding: calc(0.9 * var(--unit));
  color: #222;
  font-size: calc(0.7 * var(--unit));
  box-shadow: 0 calc(0.3 * var(--unit)) calc(0.6 * var(--unit)) rgba(0,0,0,0.15);
}

#instructions h3 {
  margin-top: 0;
  color: #6c63ff;
  font-size: calc(0.8 * var(--unit));
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 60, 0.72);
  z-index: 9999;
  padding: calc(2 * var(--unit));
}

.tutorial-overlay[hidden] {
  display: none;
}

.tutorial-card {
  background: #fff;
  border-radius: calc(1.2 * var(--unit));
  padding: calc(1.6 * var(--unit));
  max-width: min(520px, 90vw);
  box-shadow: 0 calc(0.6 * var(--unit)) calc(1.8 * var(--unit)) rgba(0,0,0,0.3);
  text-align: left;
  color: #2f2b72;
}

.tutorial-card h2 {
  margin-top: 0;
  color: #6c63ff;
}

.tutorial-card ol {
  padding-left: calc(1.6 * var(--unit));
  margin: calc(0.8 * var(--unit)) 0;
}

.tutorial-card button {
  margin-top: calc(0.8 * var(--unit));
  width: 100%;
}

.elements-toolbar {
  background: rgba(255, 255, 255, 0.96);
  border: calc(0.12 * var(--unit)) solid #6b63ff5d;
  border-radius: calc(1 * var(--unit));
  padding: calc(0.8 * var(--unit));
  box-shadow: 0 calc(0.3 * var(--unit)) calc(0.6 * var(--unit)) rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: calc(0.6 * var(--unit));
}

.filter-row,
.status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.6 * var(--unit));
  justify-content: space-between;
}

.filter-row input[type="search"],
.filter-row select {
  flex: 1 1 auto;
  min-width: calc(8 * var(--unit));
  padding: calc(0.4 * var(--unit)) calc(0.6 * var(--unit));
  border-radius: calc(0.6 * var(--unit));
  border: calc(0.12 * var(--unit)) solid #d2d6ff;
  font-family: inherit;
  font-size: calc(0.85 * var(--unit));
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(0.35 * var(--unit));
  font-weight: 600;
  color: #4b46a8;
}

.ghost-btn {
  background: transparent;
  border: calc(0.14 * var(--unit)) solid #6c63ff;
  color: #6c63ff;
  padding: calc(0.35 * var(--unit)) calc(0.9 * var(--unit));
  border-radius: calc(0.7 * var(--unit));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ghost-btn:hover {
  background: #6c63ff;
  color: #fff;
}

.status-row span {
  font-weight: 600;
  color: #4b46a8;
}

.helper-panel {
  background: #f7f8ff;
  border-radius: calc(0.7 * var(--unit));
  padding: calc(0.6 * var(--unit));
  border: calc(0.12 * var(--unit)) dashed #a4a0ff;
  color: #3f3b99;
  font-size: calc(0.8 * var(--unit));
}

.helper-panel ul {
  margin: calc(0.4 * var(--unit)) 0 0;
  padding-left: calc(1.2 * var(--unit));
}

.helper-panel kbd {
  background: #fff;
  border: 1px solid #d2d6ff;
  border-radius: calc(0.4 * var(--unit));
  padding: 0 calc(0.3 * var(--unit));
  font-size: calc(0.7 * var(--unit));
  box-shadow: 0 calc(0.1 * var(--unit)) calc(0.2 * var(--unit)) rgba(0,0,0,0.12);
}

.history-panel {
  margin-top: calc(1.2 * var(--unit));
  padding: calc(0.8 * var(--unit));
  border-radius: calc(1 * var(--unit));
  background: #f9faff;
  border: calc(0.12 * var(--unit)) solid #d7dbff;
  display: flex;
  flex-direction: column;
  gap: calc(0.6 * var(--unit));
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.6 * var(--unit));
}

.history-header h3 {
  margin: 0;
  color: #4b46a8;
}

#historyList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0.4 * var(--unit));
  max-height: calc(22 * var(--unit));
  overflow-y: auto;
}

.history-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: calc(0.4 * var(--unit));
  align-items: center;
  padding: calc(0.5 * var(--unit));
  border-radius: calc(0.6 * var(--unit));
  font-size: calc(0.8 * var(--unit));
  background: #fff;
  border: calc(0.12 * var(--unit)) solid transparent;
}

.history-item.success {
  border-color: rgba(0, 184, 148, 0.4);
}

.history-item.fail {
  border-color: rgba(255, 56, 56, 0.4);
}

.history-inputs,
.history-result {
  font-weight: 600;
  color: #3f3b99;
}

.history-arrow {
  color: #6c63ff;
  font-weight: 700;
}

.history-time {
  font-size: calc(0.7 * var(--unit));
  color: #6d6a96;
  text-align: right;
}

.history-empty {
  text-align: center;
  color: #6d6a96;
  padding: calc(0.6 * var(--unit));
}

@keyframes explosionFail {
  0% { transform: scale(0.8); opacity: 1; }
  50% { transform: scale(1.4) rotate(20deg); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes explosionSuccess {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.explosion-fail {
  animation: explosionFail 0.8s ease forwards;
  color: #ff3838;
  font-size: calc(1.2 * var(--unit));
  text-shadow: 0 0 10px #ff3838;
  position: absolute;
  pointer-events: none;
  z-index: 1000;
}

.explosion-success {
  animation: explosionSuccess 0.8s ease forwards;
  color: #00b894;
  font-size: calc(1.2 * var(--unit));
  text-shadow: 0 0 10px #00b894;
  position: absolute;
  pointer-events: none;
  z-index: 1000;
}

.particle {
  position: absolute;
  width: calc(1.5 * var(--unit));
  height: calc(1.5 * var(--unit));
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  z-index: 1000;
}

.particle.success {
  background-color: #00b894;
  box-shadow: 0 0 5px #00b894;
}

.particle.fail {
  box-shadow: 0 0 5px currentColor;
}

@keyframes flyParticle {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.5); opacity: 0; }
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 5px); }
  20% { transform: translate(5px, -5px); }
  30% { transform: translate(-5px, 5px); }
  40% { transform: translate(5px, -5px); }
  50% { transform: translate(-5px, 5px); }
  60% { transform: translate(5px, -5px); }
  70% { transform: translate(-5px, 5px); }
  80% { transform: translate(5px, -5px); }
  90% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

body.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes tapPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,255,255,0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(255,255,255,0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,255,255,0); }
}

@keyframes bufferPop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes dropZonePulse {
  0% { box-shadow: 0 0 0 rgba(108,99,255,0.0); }
  50% { box-shadow: 0 0 25px rgba(64,201,255,0.45); }
  100% { box-shadow: 0 0 0 rgba(108,99,255,0.0); }
}

@media (min-width: 1100px) {
  section { margin-top: -1vw; }
  #instructions {
    position: absolute;
    width: 26vw;
    margin-right: 11vw;
    margin-top: 2.5vw;
    font-size: calc(0.45 * var(--unit));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}