* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Arimo", sans-serif;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

a { color: inherit; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--midGreen); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--darkGreen); }

/* -- Portrait-only overlay --------------------------------- */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding: 32px;
}

#rotate-overlay ion-icon {
  font-size: 56px;
  color: var(--darkGreen);
  animation: rotate-hint 1.8s ease-in-out infinite;
}

#rotate-overlay p {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 600;
}

#rotate-overlay small {
  color: var(--muted);
  font-size: var(--text-sm);
}

@keyframes rotate-hint {
  0%   { transform: rotate(0deg);  }
  30%  { transform: rotate(90deg); }
  60%  { transform: rotate(90deg); }
  90%  { transform: rotate(0deg);  }
  100% { transform: rotate(0deg);  }
}

/* Show only on touch phones in landscape — max-width 1023px excludes iPads (1024px+) */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  #rotate-overlay { display: flex; }
}