/* Import Playfair Display font */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap");

/* Custom styles for Quibly */

/* Color palette */
:root {
  --background: #faf4eb;
  --primary: #7c9082;
  --secondary: #b4846c;
  --text: #2d3436;
  --accent: #e7d5c9;
  --hover: #98b0a0;
  --shadow: rgba(45, 52, 54, 0.1);
  --vh: 100%;
  --confetti-color: #ffd700;
}

/* Base styles */
html,
body {
  background-color: var(--background) !important;
  color: var(--text);
  line-height: 1.6;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh; /* Fallback for browsers that don't support custom properties */
  height: var(--vh);
  width: 100dvw;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Main container positioning */
main {
  padding: 1rem;
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-height: 600px) {
  main {
    padding-top: 1rem;
    justify-content: flex-start;
  }
}

/* Ensure text selection is disabled inside the phrase area to avoid accidental drags */
#phrase {
  user-select: none;
  font-family: "Inter", monospace;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

@media (min-width: 640px) {
  #phrase {
    font-size: 1.75rem;
  }
}

/* Phrase container with flex wrapping */
.phrase-container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .phrase-container {
    column-gap: 3rem;
    row-gap: 1.25rem;
  }
}

/* Word container */
.word {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Each character cell */
.char {
  position: relative;
  display: inline-block;
  width: 1.6em;
  height: 2.1em;
  line-height: 2em;
  text-align: center;
  background: transparent;
}

/* Space characters - we don't need these anymore */
.space {
  display: none;
}

/* Overlay block that hides the underlying letter */
.block {
  position: absolute;
  inset: 0;
  background: var(--primary);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px var(--shadow);
}

/* Faded (revealed) state */
.block.revealed {
  opacity: 0;
  pointer-events: none;
}

/* Hover effect */
.block:hover {
  background: var(--hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
}

/* Form elements */
input,
button {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--background) !important;
  border: 2px solid var(--primary) !important;
  color: var(--text) !important;
  padding: 0.75em 1.25em;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  width: 100%;
}

@media (min-width: 640px) {
  input,
  button {
    width: auto;
  }
}

button {
  background: var(--primary) !important;
  color: var(--background) !important;
  font-weight: 600;
  font-size: 0.75rem;
}

button:hover {
  background: var(--hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--shadow);
}

input:focus {
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 3px var(--accent) !important;
  outline: none;
}

/* Result message styling */
#result {
  color: var(--secondary);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

/* Share button specific styling */
#shareButton {
  min-width: 140px;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625em 1em;
}

#shareButton.hidden {
  display: none;
}

#shareButton svg {
  flex-shrink: 0;
}

/* Result and share button container */
.flex.flex-col.items-center.gap-2 {
  gap: 0.5rem;
  margin-top: 1rem;
  text-align: center;
}

/* Footer instructions */
footer {
  position: relative;
  padding: 1rem;
  text-align: center;
  color: var(--text);
  font-size: 0.875rem;
  box-sizing: border-box;
  z-index: 10;
  flex-shrink: 0;
}

/* Prevent iOS long-press callouts */
.block {
  -webkit-touch-callout: none;
}

/* Shake animation for wrong guesses */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.shake {
  animation: shake 0.3s linear 1;
}

/* Score display animation */
@keyframes scoreDecrease {
  0% {
    color: var(--text);
    transform: scale(1.1);
  }
  30% {
    color: #ff4444;
    transform: scale(1.1);
  }
  100% {
    color: var(--text);
    transform: scale(1);
  }
}

.score-decrease {
  animation: scoreDecrease 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo styling */
.logo {
  color: var(--text);
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .logo {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }
}

/* Prevent iOS zoom on input focus */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input {
    font-size: 16px;
  }
}

/* Score display styling */
#scoreDisplay {
  font-weight: normal;
}

#scoreDisplay .percentage {
  font-weight: 600;
}

/* Confetti styles */
@keyframes confettiSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.confetti {
  position: fixed;
  pointer-events: none;
  width: 10px;
  height: 10px;
  background-color: var(--confetti-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: confettiSpin 1s linear infinite;
}