/* ========== All-in-one: view panels + transitions ========== */

.allinone-main {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.allinone-wrapper {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stable hit area for tilt – no transform, so no edge flicker; extra bottom padding = more tilt area */
.allinone-card-tilt-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: 320px;
  padding-bottom: 1.25rem;
  position: relative;
  overflow: visible;
}

.allinone-card-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: 320px;
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transform-style: preserve-3d;
  transition: transform 0.22s ease-out;
}

.view-panel {
  display: none;
  padding: 2rem;
  box-sizing: border-box;
}

#view-home {
  padding: 1.25rem 2rem;
}

.view-panel.active {
  display: block;
  opacity: 1;
  animation: allinone-fade-in 0.3s ease;
}

.view-panel.exiting {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.view-panel.entering {
  display: block;
  opacity: 1;
  animation: allinone-fade-in 0.3s ease;
}

@keyframes allinone-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.view-panel .tilt-card,
.view-panel .tilt-inner,
.view-panel .about-card,
.view-panel .tool-card,
.view-panel .mc-profile-card {
  box-shadow: none;
  padding: 0;
  background: transparent;
  border: none;
}

.view-panel .tilt-inner {
  padding: 0;
}

#view-tools .tools-title {
  margin-bottom: 0.35rem;
  text-align: center;
}

#view-tools .tools-subtitle {
  margin-bottom: 1.25rem;
  text-align: center;
}

#view-tools .tool-card {
  width: 100%;
  text-align: left;
}

#view-tools .tool-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 1.25rem;
}

#view-tools .tool-card-inner {
  align-items: flex-start;
  text-align: left;
}

/* Tools: custom dark dropdown for timestamp type (readable text) */
#view-tools #ts-type {
  background-color: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%2394a3b8'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

#view-tools #ts-type:hover,
#view-tools #ts-type:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  outline: none;
}

#view-tools #ts-type option {
  background: var(--card-bg);
  color: var(--text);
  padding: 0.5rem;
}

.allinone-nav-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-hover);
}

/* ========== Description text: grey gradient shine ========== */
#view-about .about-bio,
#view-tools .tools-subtitle {
  background: linear-gradient(
    90deg,
    #475569 0%,
    #64748b 20%,
    #94a3b8 50%,
    #64748b 80%,
    #475569 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: description-shine 4s ease infinite;
}

#view-tools .tools-subtitle { animation-delay: 0.3s; }

@keyframes description-shine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ========== About view: less gap above Discord widget ========== */
#view-about .about-section {
  margin-bottom: 1rem;
}

#view-about .about-section:last-of-type {
  margin-bottom: 0;
}

#view-about .discord-widget {
  margin-top: 0.5rem;
}

/* ========== About: social buttons tooltip ========== */
#view-about .about-social-icons .social-btn {
  position: relative;
}

#view-about .about-social-icons .social-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ========== Footer: hide Home button when on home view ========== */
.allinone-nav-btn-home-hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .view-panel {
    padding: 1.5rem;
  }

  #view-tools {
    padding: 1rem 1.5rem 1.5rem;
  }
}