/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #000;
  color: #111;
}

/* App root fills viewport, prevents page scroll */
#app {
  position: fixed;
  inset: 0; /* top/right/bottom/left:0 */
  overflow: hidden;
}

/* Fullscreen background image */
.background {
  position: absolute;
  inset: 0;
  background-image: url('./background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Centered board overlay */
.board {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.3455);
  width: min(90vw, 1000px);
  height: auto;
  aspect-ratio: 1000 / 600; /* preserves image ratio; adjust if needed */
  background-image: url('./board.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none; /* board is decorative */
}

/* Logo container */
.logo-container {
  position: absolute;
  top: calc(50% + 208px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.logo {
  width: 120px;
  height: auto;
  max-width: 20vw;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Desktop hover effect for logo */
@media (hover: hover) and (pointer: fine) {
  .logo:hover {
    transform: scale(1.05);
  }
}

/* Action buttons positioned to the right of the board */
.action-buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + min(45vw, 500px) - 39px), calc(-50% - 80px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
  pointer-events: auto;
}

.action-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.action-btn:active {
  transform: translateY(0) scale(0.98);
}

.twitter-btn:hover {
  background: #000;
  color: #fff;
}

.how-it-works-btn:hover {
  background: #007bff;
  color: #fff;
}

.dexscreener-btn:hover {
  background: #1a1a1a;
  color: #fff;
}

/* Content centered container for tweet card */
.content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3; /* above board */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.tweet-card {
  width: 800px;
  max-width: 92vw; /* responsive on mobile */
  height: 530px;
  max-height: 530px; /* avoid vh-driven reflow/jitter on mobile */
  position: relative; /* enable overlays */
  border-radius: 16px;
  overflow: hidden; /* clip inner scroll */
  background: transparent;
  /* unified outer/inner shadows and outline stroke */
  box-shadow:
    0 22px 60px rgba(0, 32, 28, 0.55), /* outer shadow (direction consistent with board) */
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 10px rgba(0, 0, 0, 0.22); /* subtle inner shadow */
  /* gentle color grading */
  filter: brightness(0.95) contrast(1.06) saturate(1.08) sepia(0.06);
  isolation: isolate; /* contain blend effects */
  transform-origin: center center;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  transform: translateY(-80px);
}

/* Desktop/laptop: hover scale */
@media (hover: hover) and (pointer: fine) {
  .tweet-card:hover,
  .tweet-card:focus-within {
    transform: translateY(-80px) scale(1.03);
  }
}

/* Touch devices: use active scale, reduce vertical offset and cap height via svh */
@media (hover: none) and (pointer: coarse) {
  .tweet-card {
    transform: translateY(-60px);
    height: min(530px, 78svh);
    max-height: 78svh;
    border-radius: 14px;
    transition: none;
  }
  .tweet-card:hover,
  .tweet-card:focus-within {
    transform: translateY(-60px); /* neutralize hover on touch */
  }
}

/* Small screens width-wise: ensure width fits comfortably */
@media (max-width: 480px) {
  .tweet-card { max-width: 94vw; width: 94vw; }
}

/* Mobile: hide board, center tweet card without vertical offset */
@media (max-width: 768px) {
  .board { display: none; }
  .logo-container {
    top: 20%;
    transform: translate(-50%, -50%);
  }
  .logo {
    width: 80px;
    max-width: 25vw;
  }
  .action-buttons {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
  }
  .action-btn {
    width: 44px;
    height: 44px;
  }
  .tweet-card {
    transform: translateY(0);
    height: min(530px, 82svh);
    max-height: 82svh;
  }
}

.tweet-scroll {
  width: 100%;
  height: 100%;
  overflow: auto; /* inner scroll if content taller than 1200 */
  -webkit-overflow-scrolling: touch;
  padding: 0;
  /* Hide scrollbars across browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
  overscroll-behavior: contain; /* prevent parent/viewport scroll chaining */
}
.tweet-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Tweak embedded tweet sizing */
.twitter-tweet {
  margin: 0 auto !important;
}

/* Warm yellow tint and halftone/print texture overlays */
.tweet-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* layer 1: warm yellow gradient tint; layer 2: halftone dots */
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 215, 130, 0.20) 0%,
      rgba(255, 200, 110, 0.14) 40%,
      rgba(120, 85, 0, 0.08) 100%
    ),
    radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: cover, 4px 4px;
  background-position: center, 0 0;
  mix-blend-mode: multiply; /* let white pickup warm tint */
}

.tweet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* subtle paper grain using angled fine lines */
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px);
  opacity: 0.25;
  mix-blend-mode: soft-light;
}

/* Small screens: reduce card size a bit */
@media (max-width: 420px) {
  .tweet-card {
    max-width: 94vw;
    max-height: 86vh;
    border-radius: 12px;
  }
}

/* Fallback overlay for restricted/failed tweets */
.tweet-fallback-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
  z-index: 2;
}

.tweet-card.show-fallback .tweet-fallback-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fallback-content {
  width: min(720px, 86%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: #111;
}


.fallback-text strong { display: block; font-weight: 700; font-size: 16px; }
.fallback-text span { display: block; opacity: 0.8; font-size: 13px; }

.fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.fallback-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.fallback-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.fallback-btn:active { transform: translateY(0); }

.fallback-btn.btn-primary {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Dark mode tweak based on prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  .fallback-content { color: #f5f5f5; }
  .fallback-btn { background: #1a1a1a; color: #eee; border-color: rgba(255,255,255,0.14); }
  .fallback-btn.btn-primary { background: #fff; color: #000; border-color: #fff; }
}