html, body { height: 100%; }
body {
  font-family: sans-serif;
  padding: 1em;
  color: #f3e9ff;
  /* Layered background: poster watermark + gradients */
  background-image:
    linear-gradient(180deg, rgba(42,11,69,0.85) 0%, rgba(27,8,48,0.92) 100%),
    radial-gradient(1200px 700px at 80% -10%, rgba(94,46,160,0.55) 0%, rgba(94,46,160,0) 60%),
    url('clintfest-poster.png');
  background-size: cover, cover, cover;
  background-position: center, 80% -10%, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  min-height: 100vh;
  /* Mobile optimizations */
  -webkit-text-size-adjust: 100%;
  padding-top: calc(1em + env(safe-area-inset-top));
  padding-bottom: calc(1em + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  text-align: center;
  color: #ff9c2b; /* Clint-Fest orange */
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}

/* Type scales for better readability on mobile */
h1 { font-size: clamp(24px, 6vw, 42px); }
h2 { font-size: clamp(20px, 4.8vw, 32px); }
h3 { font-size: clamp(16px, 4vw, 24px); }

.container, .drop-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  min-height: 56px;
  border: 2px dashed #ff9c2b;
  border-radius: 12px;
  margin: 8px auto;
  width: 90%;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255,156,43,0.06), 0 6px 18px rgba(0,0,0,0.25);
}

/* Tighter row heading spacing to reduce vertical height */
.row h3 { margin: 6px 0; }
#word-bank h2 { margin: 8px 0; }

.word {
  background: #ff9c2b;
  color: #2a0b45;
  padding: 12px 18px;
  border-radius: 24px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: clamp(16px, 4vw, 22px);
  min-height: 44px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.word.inactive {
  background: #c07a25;
  color: #2a0b45;
  cursor: default;
  opacity: 0.7;
}

/* per-word remove icon removed */

/* Buttons */
button {
  font-weight: 700;
  font-size: clamp(16px, 3.8vw, 20px);
  padding: 12px 22px;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Reduce accidental text selection across the UI */
body, button, .drop-zone, .container {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

/* Prevent image long-press dragging */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Visual feedback for pointer-based drag */
.drop-target-hover {
  background: rgba(255, 156, 43, 0.12);
  box-shadow: inset 0 0 0 2px rgba(255,156,43,0.35), 0 6px 18px rgba(0,0,0,0.25);
}

/* While touch-dragging, disable page scroll */
body.dragging-touch {
  touch-action: none;
  overscroll-behavior: contain;
}

/* Small screens adjustments */
@media (max-width: 600px) {
  .container, .drop-zone {
    gap: 10px;
    padding: 10px;
    min-height: 52px;
    width: 94%;
  }
  .word {
    padding: 12px 16px;
    border-radius: 24px;
    min-height: 44px;
  }
  .word .remove {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
  }
}