/* ── Win2dao — Tab 4 Styles ── */

.page-win2dao {
  position: relative;
  width: 100%;
  height: 932px;
  overflow: hidden;
  isolation: isolate;
  background-color: #000;
  margin: 0;
  transform-origin: top left;
}

/* 
  Content wrapper stretching horizontally to match page dimensions:
  - Fixed height of 100% (932px) to prevent vertical scaling
  - 100% width to support full horizontal screen scaling (no black bars)
*/
.win2dao-content-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Full screen layer stack for win2dao - all layers equal in size to the wrapper */
.win2dao-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Background image - centered, native aspect ratio, no stretching */
.win2dao-bg {
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
}

/* Content Frame container overlay - responsive width with max-width limit */
.win2dao-frame-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 524.25px; /* 1080px * 0.4854167 */
  height: 100%;
  z-index: 2;
  pointer-events: none;
  container-type: inline-size; /* Enable container query width units */
}

.win2dao-frame-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

/* Content Items (Children of the frame container) */
.win2dao-content-item {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

/* Container flex styling for items containing icon and text */
div.win2dao-content-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2.5cqw; /* responsive gap */
  padding-left: 3.5cqw; /* responsive padding from left of the slot */
  padding-right: 2.5cqw; /* responsive padding from right of the slot to prevent edge touching */
  padding-bottom: 2cqw;
  box-sizing: border-box;
}

.win2dao-item-icon {
  height: 105%;
  padding-top: 1.5cqw;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.win2dao-item-text-container {
  display: flex;
  padding-top: 1.5cqw;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center-align text lines horizontally */
  text-align: center; /* Center inline text */
  font-family: 'Protest Riot', sans-serif;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  flex-grow: 1; /* Allow container to occupy remaining space */
  width: 0; /* Force container to respect parent boundary and enable wrapping */
  overflow: hidden;
}

.win2dao-item-text-line {
  font-size: 16px; /* fallback */
  font-size: 3.1cqw; /* responsive font size based on container width */
  padding-top: 1.5cqw;
  font-family: 'Protest Riot', sans-serif;
  font-weight: 400;
  text-transform: none;
  white-space: normal; /* Enable text wrapping */
  word-wrap: break-word;
  word-break: normal;
  display: block;
  max-width: 100%;
}

div.win2dao-item-why-use {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); /* Center horizontally and vertically on slot top */
  top: 641.24px; /* center of why-use slot */
  width: 95%; /* spans full container width with safety padding */
  height: auto;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw; /* responsive gap */
}

.win2dao-header-logo {
  height: 5.2cqw; /* responsive height fitting the slot */
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.win2dao-header-prefix,
.win2dao-header-suffix {
  font-family: 'Protest Riot', 'Poppins', sans-serif;
  font-weight: normal;
  text-transform: none;
  white-space: nowrap;
  line-height: 1;
  display: block;
  
  /* Gradient text fill specification */
  background: linear-gradient(to bottom, #FFE9D4 0%, #C29973 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Responsive font size */
  font-size: 4cqw;
}

.win2dao-item-more-opp {
  left: 9.9074%; /* 107px / 1080 */
  top: 689.37px; /* center of row 1 slot */
  transform: translateY(-50%);
  width: 37.8704%; /* 409px / 1080 */
  height: auto;
  aspect-ratio: 409 / 121;
  z-index: 5;
}

.win2dao-item-huge-payout {
  left: 52.3148%; /* 565px / 1080 */
  top: 688.16px; /* center of row 1 slot */
  transform: translateY(-50%);
  width: 39.3519%; /* 425px / 1080 */
  height: auto;
  aspect-ratio: 425 / 116;
  z-index: 5;
}

.win2dao-item-predict-win {
  left: 9.9074%; /* 107px / 1080 */
  top: 767.19px; /* center of row 2 slot */
  transform: translateY(-50%);
  width: 37.3148%; /* 403px / 1080 */
  height: auto;
  aspect-ratio: 403 / 112;
  z-index: 5;
}

.win2dao-item-simple-fun {
  left: 52.3148%; /* 565px / 1080 */
  top: 767.19px; /* center of row 2 slot */
  transform: translateY(-50%);
  width: 38.2407%; /* 413px / 1080 */
  height: auto;
  aspect-ratio: 413 / 112;
  z-index: 5;
}

/* Load custom title font */
@font-face {
  font-family: 'Protest Riot';
  src: url('font/ProtestRiot-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Load custom brush font */
@font-face {
  font-family: 'Herison Brushes';
  src: url('font/Herison Brushes.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Clickable button overlay link - centered, responsive with max-width limit */
.win2dao-btn-link {
  position: absolute;
  top: auto; /* override top: 0 from .win2dao-layer to prevent vertical stretching */
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: 75%; 
  max-width: 393.19px; /* 75% of 524.25px container max-width */
  height: auto;
  aspect-ratio: 941 / 227;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  overflow: visible;
  animation: win2daoCtaPulse 2s ease-in-out infinite;
  transition: filter 0.25s ease, transform 0.25s ease;
  text-decoration: none; /* Remove browser default underlines */
  
  /* Flex layout to center text vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size; /* Enable container query width units for the button text */
}

.win2dao-btn-link:active {
  transform: translateX(-50%) scale(0.96);
}

.win2dao-btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  z-index: -1; /* place behind the text */
}

.win2dao-btn-text {
  font-family: 'Herison Brushes', 'Poppins', sans-serif;
  
  /* Apply text gradient fill */
  background: linear-gradient(to bottom, #ffffff 0%, #ffe68a 50%, #e96d00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Apply red drop shadow via filter to avoid clashing with background-clip text */
  filter: drop-shadow(0px 3px 4.5px #ff3300);
  
  font-weight: 800; /* Bold/impactful weighting for fallbacks */
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  display: block;
  text-decoration: none; /* Remove browser default underlines */
  
  /* Responsive font size relative to button width - matches new smaller 380x93px button_text.png */
  font-size: 9cqw;
}

/* Language-specific overrides to prevent overflow for longer translations */
html[lang="th"] .win2dao-btn-text {
  font-size: 5.7cqw;
}
html[lang="id"] .win2dao-btn-text,
html[lang="ms"] .win2dao-btn-text {
  font-size: 6.2cqw;
}

@keyframes win2daoCtaPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.04);
  }
}

/* Subtitle frame container - houses the background graphic and dynamic text overlays */
.win2dao-subtitle-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60px; /* 107px * 0.4854167 */
  width: 99.0741%; /* 1070px * (100% / 1080) */
  max-width: 519.39px; /* 1070px * 0.4854167 */
  height: auto;
  aspect-ratio: 1070 / 230;
  z-index: 4;
  
  /* Flex layout to stack the two text lines vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-sizing: border-box;
  container-type: inline-size; /* enable cqw units relative to this subtitle block */
  padding-bottom: 2%; /* vertical push to align text with the paint brush center */
}

.win2dao-subtitle-frame-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
}

.win2dao-subtitle-text-1 {
  font-family: 'Herison Brushes', 'Poppins', sans-serif;
  padding-top: 1cqw;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap; /* Keep on a single line, do not wrap */
  line-height: 1;
  display: block;
  font-size: 8.5cqw;
  
  /* Linear Gradient Fill matching Figma image stop values */
  background: linear-gradient(to bottom, #FFF9DD 18%, #FFD849 61%, #E99700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.win2dao-subtitle-text-2 {
  font-family: 'Herison Brushes', 'Poppins', sans-serif;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: normal; /* Allow wrapping if text length requires it */
  max-width: 82%; /* Ensure text never overflows the paint banner background width */
  line-height: 1;
  display: block;
  font-size: 5.5cqw;
  margin-top: 1.5%; /* vertical spacing between lines */
  
  /* Linear Gradient Fill matching Figma image */
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFD7A3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Soft shadow for depth and legibility */
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
}

/* Language-specific overrides to scale down text and fit perfectly */
html[lang="id"] .win2dao-subtitle-text-1,
html[lang="ms"] .win2dao-subtitle-text-1 {
  font-size: 7.2cqw;
}
html[lang="th"] .win2dao-subtitle-text-2 {
  font-size: 4.8cqw;
}
html[lang="id"] .win2dao-subtitle-text-2,
html[lang="ms"] .win2dao-subtitle-text-2 {
  font-size: 4.2cqw;
}
/* ── Active screen bottom navigation colors ── */
#screen-win2dao {
  overflow: hidden;
}

#screen-win2dao.screen--active ~ #bottom-nav {
  background: #0d0614 !important;
  border-top: 1px solid rgba(199, 83, 255, 0.15) !important;
}

#tab-win2dao.bottom-nav__card--active {
  outline: 2px solid #ff4e50 !important;
  box-shadow:
    0 0 14px rgba(255, 78, 80, 0.45),
    0 0 30px rgba(255, 78, 80, 0.2) !important;
}