@font-face {
  font-family: 'Birch Std';
  src: url('imgs/BirchStd.woff2') format('woff2'),
    url('imgs/BirchStd.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chaparral Pro';
  src: url('imgs/ChaparralPro-Italic.woff2') format('woff2'),
    url('imgs/ChaparralPro-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Reset and base styling */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

body {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse at top, #4f361a 0%, #1f1309 100%);
  /* Rich dark wood/leather gradient background */
  color: #f3f4f6;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Start from top to support external scrolling */
  overflow-x: hidden;
  padding: 0;
  /* Removed top/bottom padding to eliminate black space */
}

/* Master Phone Container 
   This wrapper defines the mobile-width layout column.
*/
.phone-mockup {
  width: 100%;
  max-width: 600px;
  /* Limits size on desktop */
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
  /* Shadow to elevate the container */
  overflow: hidden;

  /* Enable Container Queries on this element */
  container-type: inline-size;
}

/* 
  Scaling System:
  1080px is your design width in Photoshop.
  100cqw represents 100% of this container's width.
  We declare --px as 1/1080th of the container's width.
  Now, 1 * var(--px) is exactly equivalent to 1 pixel in your Photoshop design!
*/
.phone-content {
  --px: calc(100cqw / 1080);

  position: relative;
  width: 100%;
  min-height: calc(2220 * var(--px));
  /* Ensures the container maintains the 1080x2220 Photoshop proportion */
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 0%, #1e2238 0%, #0e1017 100%);
  padding: calc(60 * var(--px)) calc(60 * var(--px)) calc(80 * var(--px));
  box-sizing: border-box;
}

.bg-middle {
  position: absolute;
  top: calc(550 * var(--px));
  /* 550px from the top of your design */
  left: 0;
  width: 100%;
  bottom: 0;
  /* Fills the remaining dynamic height of the page */
  background-image: url('imgs/fundo_meio.jpg');
  background-size: 100% auto;
  background-repeat: repeat-y;
  pointer-events: none;
  z-index: 0;
  /* Behind top background (z-index: 1) and text/buttons */
}

.bg-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(598 * var(--px));
  /* Proportional height based on 598px original size */
  pointer-events: none;
  z-index: 1;
  /* Placed behind corners (z-index: 10) */
}

.corner-decor-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(131 * var(--px));
  height: calc(131 * var(--px));
  pointer-events: none;
  /* Prevents it from blocking clicks/interactions */
  z-index: 10;
}

.corner-decor-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(131 * var(--px));
  height: calc(131 * var(--px));
  transform: scaleX(-1);
  /* Mirrors horizontally to align with the top-right corner */
  pointer-events: none;
  z-index: 10;
}

.logo-h1 {
  position: absolute;
  top: calc(10 * var(--px));
  right: calc(3 * var(--px));
  width: calc(785 * var(--px));
  height: calc(289 * var(--px));
  z-index: 20;
  margin: 0;
  padding: 0;
}

.logo {
  width: 100%;
  height: 100%;
  display: block;
}

.tagline {
  position: absolute;
  top: calc(300 * var(--px));
  left: calc(365 * var(--px));
  right: calc(75 * var(--px));
  transform: scaleX(1.2);
  transform-origin: center top;
  font-family: 'Birch Std', 'Outfit', sans-serif;
  font-size: calc(87.95 * var(--px));
  color: #664923;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  z-index: 15;
}

.card-deck {
  position: absolute;
  top: calc(595 * var(--px));
  right: 0;
  width: calc(480 * var(--px));
  height: calc(571 * var(--px));
  z-index: 10;
}

.section-header-about {
  position: absolute;
  top: calc(657 * var(--px));
  left: calc(41 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  z-index: 15;
}

.section-header-specs {
  position: absolute;
  top: calc(1180 * var(--px));
  right: calc(48 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  z-index: 15;
}

.section-header-buy {
  position: absolute;
  top: calc(1565 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  z-index: 15;
}

.cards-fan {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(377 * var(--px));
  z-index: 10;
}

.buy-buttons {
  position: absolute;
  top: calc(1650 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(64 * var(--px));
  z-index: 15;
}

.buy-link {
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.buy-link:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.buy-button-img {
  width: calc(348 * var(--px));
  height: calc(143 * var(--px));
  display: block;
}

.share-button {
  position: absolute;
  top: calc(1627.5 * var(--px));
  right: calc(-45 * var(--px));
  width: calc(41 * var(--px));
  height: calc(188 * var(--px));
  z-index: 20;
  display: block;
  animation: slideInShare 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
  transition: transform 0.2s ease, filter 0.2s ease;
}

@keyframes slideInShare {
  to {
    right: 0;
  }
}

.share-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.share-button-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Share Modal Fallback Styles */
.share-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 7, 10, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.share-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.share-modal-content {
  background-image: url('imgs/fundo_meio.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  border: calc(3 * var(--px)) solid #bca580;
  border-radius: calc(24 * var(--px));
  width: calc(800 * var(--px));
  padding: calc(50 * var(--px));
  position: relative;
  box-shadow: inset 0 0 0 calc(4 * var(--px)) #664923, 0 calc(20 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.5);
  text-align: center;
}

.share-modal-close {
  position: absolute;
  top: calc(20 * var(--px));
  right: calc(20 * var(--px));
  width: calc(80 * var(--px));
  height: calc(80 * var(--px));
  background: transparent;
  border: calc(3 * var(--px)) solid transparent;
  border-radius: 50%;
  color: #664923;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  z-index: 100;
  transition: all 0.2s ease;
}

.share-modal-close svg {
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  stroke-width: 3;
  pointer-events: none;
}

.share-modal-close:hover {
  background-color: #664923;
  color: #fcf8f2;
  border-color: #664923;
  transform: scale(1.1);
}

.share-modal-title {
  font-family: 'Birch Std', 'Outfit', sans-serif;
  font-size: calc(60 * var(--px));
  color: #664923;
  margin-bottom: calc(40 * var(--px));
  transform: scaleX(1.15);
  transform-origin: center;
}

.share-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--px));
}

.share-opt-link, .share-opt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--px));
  padding: calc(20 * var(--px)) calc(30 * var(--px));
  background-color: rgba(255, 255, 255, 0.45);
  border: calc(2 * var(--px)) solid #bca580;
  border-radius: calc(12 * var(--px));
  color: #664923;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: calc(28 * var(--px));
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.share-opt-link:hover, .share-opt-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: #664923;
}

.share-opt-icon {
  font-size: calc(36 * var(--px));
}

.share-toast {
  position: absolute;
  bottom: calc(20 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  background-color: #664923;
  color: #fcf8f2;
  padding: calc(10 * var(--px)) calc(30 * var(--px));
  border-radius: calc(30 * var(--px));
  font-family: 'Outfit', sans-serif;
  font-size: calc(24 * var(--px));
  border: calc(1 * var(--px)) solid #bca580;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.share-toast.show {
  opacity: 1;
}


.about-ornament {
  width: calc(129 * var(--px));
  height: calc(43 * var(--px));
  display: block;
}

.about-ornament.flipped {
  transform: scaleX(-1);
}

.about-title {
  font-family: 'Birch Std', 'Outfit', sans-serif;
  font-size: calc(55 * var(--px));
  font-weight: normal;
  color: #664923;
  line-height: 1.0;
  letter-spacing: -0.01em;
  padding: 0 calc(30 * var(--px));
  transform: scaleX(1.2) translateY(calc(6 * var(--px)));
  transform-origin: center;
  white-space: nowrap;
}

.about-text {
  position: absolute;
  top: calc(734 * var(--px));
  left: calc(64 * var(--px));
  width: calc(486 * var(--px));
  font-family: 'Chaparral Pro', 'Outfit', sans-serif;
  font-style: italic;
  font-size: calc(35 * var(--px));
  line-height: calc(38 * var(--px));
  letter-spacing: -0.01em;
  color: #664923;
  text-align: justify;
  text-justify: inter-word;
  z-index: 15;
}

.card-text-image {
  position: absolute;
  top: calc(1142 * var(--px));
  left: calc(40 * var(--px));
  width: calc(420 * var(--px));
  height: calc(400 * var(--px));
  z-index: 15;
}

.specs-list {
  position: absolute;
  top: calc(1260 * var(--px));
  left: calc(530 * var(--px));
  right: calc(65 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--px));
  z-index: 15;
}

.spec-item {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--px));
}

.spec-icon {
  flex-shrink: 0;
  margin-left: calc(-40 * var(--px));
}

.spec-icon-cards {
  width: calc(71 * var(--px));
  height: calc(75 * var(--px));
}

.spec-icon-players {
  width: calc(69 * var(--px));
  height: calc(77 * var(--px));
}

.spec-icon-clock {
  width: calc(69 * var(--px));
  height: calc(75 * var(--px));
}

.spec-text {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
}

.spec-title {
  font-family: 'Chaparral Pro', 'Outfit', sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: calc(32 * var(--px));
  line-height: calc(23 * var(--px));
  color: #664923;
  letter-spacing: -0.015em;
}

.spec-desc {
  font-family: 'Chaparral Pro', 'Outfit', sans-serif;
  font-style: italic;
  font-size: calc(27 * var(--px));
  line-height: calc(23 * var(--px));
  color: #664923;
  letter-spacing: -0.01em;
}

/* Screen Notch is disabled as the bezel was removed */
.notch {
  display: none;
}

/* Header Area */
.header {
  margin-top: calc(80 * var(--px));
  margin-bottom: calc(60 * var(--px));
  text-align: center;
}

.title {
  font-size: calc(80 * var(--px));
  font-weight: 800;
  letter-spacing: calc(2 * var(--px));
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 calc(4 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: calc(36 * var(--px));
  color: #9ca3af;
  margin-top: calc(15 * var(--px));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: calc(4 * var(--px));
}

/* Mock Card Showcase */
.card-container {
  display: flex;
  justify-content: center;
  margin-bottom: calc(80 * var(--px));
  perspective: 1000px;
}

.card {
  width: calc(800 * var(--px));
  height: calc(1150 * var(--px));
  background: linear-gradient(145deg, #2a1b4e, #130a2a);
  border: calc(10 * var(--px)) solid #d4af37;
  /* Gold border */
  border-radius: calc(40 * var(--px));
  box-shadow: 0 calc(20 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.6);
  position: relative;
  padding: calc(40 * var(--px));
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(calc(-20 * var(--px))) rotateY(5deg);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: calc(3 * var(--px)) solid rgba(212, 175, 55, 0.3);
  padding-bottom: calc(20 * var(--px));
  margin-bottom: calc(30 * var(--px));
}

.card-name {
  font-size: calc(52 * var(--px));
  font-weight: 700;
  color: #fff;
}

.card-code {
  background: #d4af37;
  color: #130a2a;
  font-weight: 800;
  font-size: calc(36 * var(--px));
  padding: calc(5 * var(--px)) calc(20 * var(--px));
  border-radius: calc(15 * var(--px));
}

.card-image-box {
  width: 100%;
  height: calc(450 * var(--px));
  background: rgba(255, 255, 255, 0.05);
  border-radius: calc(24 * var(--px));
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: calc(2 * var(--px)) solid rgba(212, 175, 55, 0.15);
  margin-bottom: calc(30 * var(--px));
}

/* Saint Icon Placeholder */
.saint-glow {
  position: absolute;
  width: calc(250 * var(--px));
  height: calc(250 * var(--px));
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  animation: pulse 3s infinite ease-in-out;
}

.saint-symbol {
  font-size: calc(150 * var(--px));
  color: #d4af37;
  z-index: 2;
}

/* Card Stats */
.card-stats {
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--px));
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: calc(15 * var(--px)) calc(25 * var(--px));
  border-radius: calc(15 * var(--px));
  border: calc(1 * var(--px)) solid rgba(255, 255, 255, 0.05);
}

.stat-label {
  font-size: calc(32 * var(--px));
  color: #9ca3af;
}

.stat-value {
  font-size: calc(34 * var(--px));
  font-weight: 700;
  color: #fff;
}

/* Info Section (from the txt files) */
.info-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: calc(30 * var(--px));
  padding: calc(45 * var(--px));
  border: calc(2 * var(--px)) solid rgba(255, 255, 255, 0.05);
  margin-bottom: calc(60 * var(--px));
}

.info-title {
  font-size: calc(44 * var(--px));
  font-weight: 700;
  color: #ffd700;
  margin-bottom: calc(25 * var(--px));
}

.info-text {
  font-size: calc(32 * var(--px));
  color: #d1d5db;
  line-height: 1.6;
}

/* Action Button */
.action-button {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  border: none;
  padding: calc(40 * var(--px)) 0;
  border-radius: calc(24 * var(--px));
  font-size: calc(40 * var(--px));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 calc(10 * var(--px)) calc(20 * var(--px)) rgba(99, 102, 241, 0.3);
  text-align: center;
}

.action-button:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5);
  transform: translateY(calc(-4 * var(--px)));
  box-shadow: 0 calc(15 * var(--px)) calc(30 * var(--px)) rgba(99, 102, 241, 0.5);
}

.action-button:active {
  transform: translateY(0);
}

/* Pulse animation */
@keyframes pulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

/* Responsiveness for small mobiles
   If the screen is smaller than the phone-mockup max-width (480px),
   the .phone-mockup automatically shrinks to fit 100% of the screen.
   And because everything inside is sized in `cqw` (via `var(--px)`),
   it ALL scales down proportionally and perfectly!
*/
@media (max-width: 520px) {
  body {
    padding: 0;
  }

  .phone-mockup {
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .notch {
    display: none;
    /* Hide notch on full-screen mobile */
  }

  .phone-content {
    margin-top: 0;
    padding-top: calc(100 * var(--px));
  }
}