/* Custom Styles for HSK FlashCard PWA */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@600;700&display=swap');

:root {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #10b981;
}

/* Prevent horizontal scroll and viewport shift on all mobile devices */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

header, main, nav, footer, section {
  max-width: 100vw;
  box-sizing: border-box;
}

#tab-flashcard {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Chinese Hanzi Typography */
.font-hanzi {
  font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'KaiTi', sans-serif;
}

/* 3D Flashcard Perspective Container */
.perspective-container {
  perspective: 1200px;
  touch-action: pan-y;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

#flashcard-card {
  touch-action: pan-y;
  width: 100%;
  height: 100%;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
  cursor: pointer;
  touch-action: pan-y;
}

.flashcard-inner.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1.5rem;
  overflow-y: auto;
  box-sizing: border-box;
  touch-action: pan-y;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

/* Swipe Feedback Animations - subtle and completely contained within container */
@keyframes swipeRightAnim {
  0% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  50% { transform: translateX(28px) rotate(3deg) scale(0.98); opacity: 0.85; }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes swipeLeftAnim {
  0% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  50% { transform: translateX(-28px) rotate(-3deg) scale(0.98); opacity: 0.85; }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}

.anim-swipe-right {
  animation: swipeRightAnim 0.22s ease-out;
}

.anim-swipe-left {
  animation: swipeLeftAnim 0.22s ease-out;
}

/* Custom Smooth Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.6);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Glassmorphism Accents */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .glass-panel {
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}