.match-card:hover {
  background: rgba(255,255,255,0.08);
}

.match-card.lost {
  border-left-color: #ff6b6b;
}

.match-card.won {
  border-left-color: #4ecdc4;
}

.match-card.draw {
  border-left-color: var(--gold);
}

/* Match card content - three column layout */
.match-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Left column - clan swords icon */
.match-card-left {
  flex-shrink: 0;
}

.clan-icon {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clan-icon img {
  width: 20px;
  height: 20px;
}

/* Center column - main match info */
.match-card-center {
  flex: 1;
  min-width: 0; /* allows text to truncate if needed */
}

/* Match card header with result and time */
.match-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.match-result {
  display: flex;
  align-items: center;
}

.result-badge {
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  font-size: calc(14px * var(--user-font-scale));
}

.won .result-badge {
  color: #4ecdc4;
}

.lost .result-badge {
  color: #ff6b6b;
}

.draw .result-badge {
  color: var(--gold);
}

.match-score {
  font-size: calc(16px * var(--user-font-scale));
  font-weight: 700;
  margin-left: 8px;
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
}

.match-time {
  color: rgba(255,255,255,0.6);
  font-size: calc(12px * var(--user-font-scale));
}

/* Match details section */
.match-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-mode {
  font-weight: 600;
  color: var(--blue);
  font-size: calc(13px * var(--user-font-scale));
}

.opponent-info {
  font-size: calc(13px * var(--user-font-scale));
}

.opponent-clan {
  color: var(--gold);
  font-size: calc(11px * var(--user-font-scale));
  margin-left: 6px;
}

.arena-name {
  font-size: calc(11px * var(--user-font-scale));
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* Right column - result arrow */
.match-card-right {
  flex-shrink: 0;
}

.result-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-arrow img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ---------------- MATCHES PAGE: GAME PATTERN - FIXED ALIGNMENT ---------------- */
/* Game pattern section - shows W/L/W/L/W for last 5 games */
.game-pattern-section {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  text-align: center;
}

.pattern-title {
  font-family: "Montserrat", sans-serif;
  font-size: calc(18px * var(--user-font-scale));
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  color: var(--ink);
}

/* FIXED GAME PATTERN SECTION - better mobile alignment */
.game-pattern-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0; /* Add padding for better spacing */
}

.pattern-letter {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: white;
  font-size: calc(16px * var(--user-font-scale));
  transition: transform 0.2s ease;
  flex-shrink: 0; /* Prevent shrinking */
}

.pattern-letter:hover {
  transform: scale(1.1);
}

.pattern-letter.won {
  background: #4ecdc4;
}

.pattern-letter.lost {
  background: #ff6b6b;
}

.pattern-letter.draw {
  background: var(--gold);
}

/* ---------------- GRID SECTIONS ---------------- */
/* Main content area: 4 squares in 2x2 grid + full-width video section */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  grid-template-rows: auto auto auto; /* three rows, size to content */
  gap: var(--gap);
  margin-bottom: 20px;
}

/* Individual mock boxes - placeholders for future content */
.mock-box {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  text-align: center;
}

/* Tablet and up - bigger boxes */
@media (min-width: 768px) {
  .mock-box {
    padding: 16px;
    min-height: 100px;
  }
}

/* Image containers inside mock boxes */
.mock-image {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-image img {
  width: 28px;
  height: 28px;
}

/* Labels under the mock images */
.mock-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: calc(12px * var(--user-font-scale));
  text-align: center;
  opacity: 0.9;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .mock-label {
    font-size: calc(14px * var(--user-font-scale));
  }
}

/* ---------------- VIDEO SECTION ---------------- */
/* Video section - spans full width at bottom of grid */
.video-section {
  grid-column: 1 / -1; /* spans both columns */
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 80px;
}

/* Fluid, responsive 16:9 player
   - Uses aspect-ratio where supported, with a padding-bottom fallback */
.video-container {
  position: relative;
  width: 100%;
  max-width: 720px;            /* 👈 reasonable size on phones/tablets */
  aspect-ratio: 16 / 9;        /* modern browsers */
  height: auto;
}

/* Fallback for older browsers without aspect-ratio */
.video-container::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;      /* 16:9 ratio */
}
.video-container > * {
  position: absolute;
  inset: 0;
}

/* Make iframe fill the container */
.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 768px) {
  .video-section {
    padding: 20px;
    min-height: 120px;
  }
}

/*  DESKTOP: scale the player up so it doesn't feel tiny */
@media (min-width: 1024px) {
  .video-container {
    max-width: 960px; /* upsize player on desktop */
  }
}

/* ---------------- SLIDE-OUT NAV ---------------- */
/* The drawer menu - slides in from the left when hamburger is clicked */
.drawer{
  position:fixed; 
  inset:0 auto 0 0; 
  width:280px; 
  max-width:85vw;
  background: linear-gradient(180deg, var(--blue), #1a47cc); /* blue gradient like image */
  color: white;
  transform:translateX(-100%); /* hidden off-screen by default */
  transition:transform .25s ease;
  box-shadow: 8px 0 24px rgba(0,0,0,.45);
  z-index:40; 
  padding: 0; /* remove padding, we'll add it to sections */
  display:flex; 
  flex-direction:column;
}
.drawer.open{ transform:translateX(0); } /* slides in when open */

/* Logo section at top of drawer */
.drawer-header {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.drawer-logo {
  height: 140px; /* much bigger logo in the drawer pull-out menu, a fix needed to be done as noticed when studying lofi*/
  width: auto;
}

/* Main navigation list - the core menu items students use */
.nav-list{ 
  list-style:none; 
  margin: 20px 0 0; 
  padding: 0 20px;
  flex: 1; /* takes up most of the space */
}

.nav-item {
  margin-bottom: 8px; /* space between menu items */
}

.nav-item a{
  display:flex; 
  align-items:center; 
  gap: 12px;
  padding: 12px 16px; 
  color: white; 
  text-decoration:none;
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.2s ease; /* smooth hover effect */
  font-size: calc(14px * var(--user-font-scale));
}

.nav-item a:hover{ 
  background: rgba(255,255,255,.15); /* lighter on hover */
}

.nav-item img{ 
  width: 20px;
  height: 20px;
  /* filter: brightness(0) invert(1); */ /* removed so icons keep original colors */
}

/* Footer links at bottom - less important pages */
.drawer-footer {
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: calc(14px * var(--user-font-scale));
  padding: 8px 0;
  text-align: center;
}

.footer-link:hover {
  color: white;
}

/* Dark overlay behind drawer when open - clicking closes menu */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:39;
}
.backdrop.show{ opacity:1; pointer-events:auto; }

/* ---------------- BOTTOM SECTIONS ---------------- */
/* Two-column layout for featured clans and recent activity */
.section-wrap{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}

/* Individual section cards */
.section{
  background:rgba(255,255,255,.03);
  border-radius:var(--radius-xl);
  padding:16px 18px;
  box-shadow:var(--shadow);
}

.section-title{
  font-family:"Montserrat",sans-serif;
  font-size: calc(20px * var(--user-font-scale)); 
  font-weight:800; 
  margin:0 0 8px;
}

.list{ margin:0; padding-left:18px; }

/* ---------------- FOOTER WITH SOCIAL ICONS ---------------- */
/* Footer section at the bottom - this will be on all pages */
.footer {
  margin-top: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

/* Social media icons row */
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap; /* wraps on very small screens */
}

/* Individual social media link - nice white color */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.9); /* nice white background */
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Hover effects for social links */
.social-link:hover {
  background: white; /* pure white on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Social media icon images */
.social-link img {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

.social-link:hover img {
  opacity: 1;
}

/* Footer text below social icons */
.footer-text {
  margin-top: 8px;
}

.footer-text p {
  margin: 0;
  font-size: calc(12px * var(--user-font-scale));
  color: var(--ink);
  opacity: 0.7;
  font-family: "Open Sans", sans-serif;
}

/* Tablet and desktop - slightly larger social icons */
@media (min-width: 768px) {
  .social-link {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.9); /* maintain white color on larger screens */
  }
  
  .social-link:hover {
    background: white; /* pure white on hover for larger screens */
  }
  
  .social-link img {
    width: 20px;
    height: 20px;
  }
  
  .footer-text p {
    font-size: calc(14px * var(--user-font-scale));
  }
}

/* ---------------- CLAN SEARCH PAGE STYLES ---------------- */
/* Clan search container - extends existing search patterns */
.clan-search-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Location dropdown - matches input styling */
.location-select {
  padding: 12px 16px;
  background: var(--navy-card);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: "Open Sans", sans-serif;
  font-size: calc(16px * var(--user-font-scale));
  cursor: pointer;
  min-width: 180px;
}

.location-select:focus {
  border-color: var(--blue);
  outline: none;
}

.location-select option {
  background: var(--navy-card);
  color: var(--ink);
  padding: 8px;
}

/* Clan results section */
.clans-results-section, .popular-clans-section {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.clans-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual clan card - follows match card pattern */
.clan-card {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 16px;
  border-left: 4px solid var(--gold);
  transition: background 0.2s ease;
}

.clan-card:hover {
  background: rgba(255,255,255,0.08);
}

/* Clan card content - three column layout like match cards */
.clan-card-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Left column - clan badge */
.clan-card-left {
  flex-shrink: 0;
}

.clan-badge {
  width: 32px;          /* Reduced from 40px */
  height: 32px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;   /* Reduced from 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.clan-badge img {
  width: 18px;          /* Reduced from 24px */
  height: 18px;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

/* Center column - main clan info */
.clan-card-center {
  flex: 1;
  min-width: 0;
}

/* Clan card header with name and location */
.clan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.clan-name-section h4.clan-name {
  font-family: "Montserrat", sans-serif;
  font-size: calc(16px * var(--user-font-scale));
  font-weight: 700;
  margin: 0 0 2px 0;
  color: var(--ink);
}

.clan-tag {
  font-size: calc(12px * var(--user-font-scale));
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.clan-location {
  font-size: calc(12px * var(--user-font-scale));
  color: rgba(255,255,255,0.7);
  text-align: right;
}

/* Clan stats row - shows members, score, war trophies */
.clan-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.clan-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.clan-stat .stat-label {
  font-size: calc(10px * var(--user-font-scale));
  color: rgba(255,255,255,0.6);
  margin-bottom: 2px;
  font-weight: 600;
}

.clan-stat .stat-value {
  font-size: calc(13px * var(--user-font-scale));
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

/* Clan details - type and requirements */
.clan-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.clan-type {
  font-size: calc(12px * var(--user-font-scale));
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

.clan-type.open {
  background: rgba(76, 205, 196, 0.2);
  color: #4ecdc4;
}

.clan-type.invite-only {
  background: rgba(245, 197, 66, 0.2);
  color: var(--gold);
}

.clan-type.closed {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.required-trophies {
  font-size: calc(11px * var(--user-font-scale));
  color: rgba(255,255,255,0.7);
}

/* Clan description */
.clan-description {
  font-size: calc(12px * var(--user-font-scale));
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
  font-style: italic;
}

/* Right column - join indicator */
.clan-card-right {
  flex-shrink: 0;
}

.join-indicator {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: calc(18px * var(--user-font-scale));
}

.join-indicator.joinable {
  background: rgba(76, 205, 196, 0.2);
  color: #4ecdc4;
}

.join-indicator.not-joinable {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

/* ---------------- PLAYER PROFILE PAGE STYLES ---------------- */
/* Player profile section - main profile header */
.player-profile-section {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;        /* Reduced from 20px */
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;  /* Reduced from 20px */
}

.player-name-section h2 {
  font-family: "Montserrat", sans-serif;
  font-size: calc(24px * var(--user-font-scale));
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--ink);
}

.player-tag-display {
  font-size: calc(14px * var(--user-font-scale));
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.player-level {
  text-align: center;
  min-width: 60px;      /* Ensure consistent width */
}

.level-label {
  display: block;
  font-size: calc(11px * var(--user-font-scale));      /* Reduced from 12px */
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}

.level-value {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: calc(24px * var(--user-font-scale));      /* Reduced from 28px */
  font-weight: 700;
  color: var(--blue);
}

/* Player main stats - three key metrics */
.player-main-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;             /* Reduced from 12px */
  margin-top: 8px;      /* Add some spacing from header */
}

.player-main-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;         /* Allow items to shrink */
}

.player-main-stats .stat-label {
  font-size: calc(11px * var(--user-font-scale));      /* Reduced from 12px */
  opacity: 0.8;
  margin-bottom: 2px;
  text-align: center;
}

.player-main-stats .stat-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: calc(16px * var(--user-font-scale));      /* Reduced from 20px */
  color: var(--gold);
  text-align: center;
}

/* Detailed stats section */
.player-stats-detailed {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.detailed-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;            /* Reduced from 16px */
}

.stat-card {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 12px;        /* Reduced from 16px */
  border-left: 4px solid var(--blue);
}

.stat-card-header {
  display: flex;
  align-items: center;
  gap: 6px;             /* Reduced from 8px */
  margin-bottom: 8px;   /* Reduced from 12px */
}

.stat-card-header img {
  width: 16px !important;          /* Reduced from 20px and FORCED */
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
}

.stat-card-header span {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: calc(13px * var(--user-font-scale));      /* Reduced from 14px */
  color: var(--ink);
}

.stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(13px * var(--user-font-scale));
}

.stat-row span:first-child {
  color: rgba(255,255,255,0.7);
}

.stat-row span:last-child {
  color: var(--gold);
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

/* Player clan section */
.player-clan-section, .player-arena-section {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.clan-info-card, .arena-info-card {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 12px;        /* Reduced from 16px */
  border-left: 4px solid var(--gold);
}

/* Clan info content */
.clan-info-content, .arena-info-content {
  display: flex;
  flex-direction: column;
  gap: 8px;             /* Reduced from 12px */
}

.clan-info-header, .arena-header {
  display: flex;
  align-items: center;
  gap: 8px;             /* Reduced from 12px */
}

.arena-icon {
  width: 32px;          /* Reduced from 40px */
  height: 32px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;   /* Reduced from 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.arena-icon img {
  width: 18px;          /* Reduced from 24px */
  height: 18px;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

.clan-details h4.clan-name, .arena-details h4.arena-name {
  font-family: "Montserrat", sans-serif;
  font-size: calc(16px * var(--user-font-scale));
  font-weight: 700;
  margin: 0 0 2px 0;
  color: var(--ink);
}

.arena-details .arena-id {
  font-size: calc(12px * var(--user-font-scale));
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.clan-role, .trophy-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-label, .trophy-current, .trophy-best {
  font-size: calc(13px * var(--user-font-scale));
  color: rgba(255,255,255,0.7);
}

.role-value {
  font-size: calc(13px * var(--user-font-scale));
  color: var(--blue);
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.trophy-current span, .trophy-best span {
  color: var(--gold);
  font-weight: 600;
}

/* No clan state */
.no-clan, .no-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

.no-clan img, .no-arena img {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

/* FORCE SIZE FOR ALL IMAGES IN PLAYER PROFILE SECTIONS */
.player-profile-section img,
.player-stats-detailed img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

/* Specifically target trophy and treasure images */
img[src*="trophy.png"],
img[src*="treasure.png"] {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
}

/* ---------------- SETTINGS PAGE STYLES ---------------- */
/* Settings page - specialized form styles */
.settings-section {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.settings-section h3 {
  font-family: "Montserrat", sans-serif;
  font-size: calc(18px * var(--user-font-scale));
  font-weight: 700;
  margin: 0 0 16px 0;
  text-align: center;
  color: var(--ink);
}

/* Individual setting item - FIXED ALIGNMENT */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  min-height: 60px; /* Ensure consistent height */
}

.setting-item:last-child {
  border-bottom: none;
}

/* Setting info (left side) */
.setting-info {
  flex: 1;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.setting-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: calc(15px * var(--user-font-scale));
  color: var(--ink);
  margin: 0 0 4px 0;
}

.setting-description {
  font-size: calc(13px * var(--user-font-scale));
  color: rgba(255,255,255,0.7);
  line-height: 1.3;
  margin: 0;
}

/* Setting controls (right side) - FIXED ALIGNMENT */
.setting-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 60px;
}

/* Toggle switch styles */
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: none;
  outline: none;
  flex-shrink: 0;
}

.toggle-switch.active {
  background: var(--gold);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch.active::after {
  transform: translateX(24px);
}

/* Font size slider styles */
.font-size-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}

.font-size-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.2);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.font-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.font-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.font-size-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.font-size-display {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: calc(14px * var(--user-font-scale));
  color: var(--gold);
  min-width: 40px;
  text-align: center;
}

/* Reset button styles */
.reset-settings-btn {
  width: 100%;
  padding: 14px 20px;
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border: 2px solid #ff6b6b;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: calc(15px * var(--user-font-scale));
  transition: all 0.2s ease;
  margin-top: 20px;
}

.reset-settings-btn:hover {
  background: rgba(255, 107, 107, 0.25);
  transform: translateY(-1px);
}

/* ---------------- UTILITY CLASSES ---------------- */
.round{ border-radius:50%; }
.icon{ display:block; }
.hidden{ display:none !important; }

/* ---------------- IMPROVED LIGHT THEME STYLES ---------------- */
/* Light theme styles - when invert colors is ON - IMPROVED CONTRAST */
body.light-theme {
  --navy: #f8f9fa;        /* Very light gray background */
  --navy-card: #ffffff;   /* Pure white cards */
  --ink: #1a1a1a;         /* Very dark text for high contrast */
  --gold: #b8860b;        /* Darker gold for better contrast on light backgrounds */
  --blue: #0056b3;        /* Darker blue for accessibility */
  --paper: #666666;       /* Medium gray for secondary text */
  
  /* Ensure good contrast in light theme */
  background: var(--navy);
  color: var(--ink);
}

/* Light theme specific adjustments for better visibility */
body.light-theme .hi {
  background: var(--blue);
  color: white;
  border: 1px solid var(--blue);
}

body.light-theme .current-tag {
  background: var(--navy-card);
  color: var(--ink);
  border: 2px solid var(--blue);
}

body.light-theme .current-tag strong {
  color: var(--blue);
}

body.light-theme .player-tag-input {
  background: var(--navy-card);
  color: var(--ink);
  border: 2px solid rgba(0,0,0,0.2);
}

body.light-theme .player-tag-input::placeholder {
  color: rgba(0,0,0,0.5);
}

body.light-theme .player-tag-input:focus {
  border-color: var(--blue);
}

body.light-theme .loading-message {
  background: rgba(0, 86, 179, 0.1);
  color: var(--blue);
  border: 1px solid var(--blue);
}

body.light-theme .error-message {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid #dc3545;
}

body.light-theme .mock-box,
body.light-theme .player-stats,
body.light-theme .matches-stats,
body.light-theme .recent-matches-section,
body.light-theme .game-pattern-section,
body.light-theme .settings-section,
body.light-theme .player-profile-section,
body.light-theme .player-stats-detailed,
body.light-theme .player-clan-section,
body.light-theme .player-arena-section,
body.light-theme .clans-results-section,
body.light-theme .popular-clans-section {
  background: var(--navy-card);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.1);
}

body.light-theme .stat-icon,
body.light-theme .clan-icon,
body.light-theme .clan-badge,
body.light-theme .arena-icon {
  background: rgba(0,0,0,0.08);
}

body.light-theme .match-card,
body.light-theme .clan-card,
body.light-theme .stat-card,
body.light-theme .clan-info-card,
body.light-theme .arena-info-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.1);
}

body.light-theme .match-card:hover,
body.light-theme .clan-card:hover {
  background: rgba(0,0,0,0.06);
}

body.light-theme .match-time,
body.light-theme .clan-location,
body.light-theme .required-trophies,
body.light-theme .setting-description {
  color: rgba(0,0,0,0.6);
}
/* Add this at the end of your light theme section */

body.light-theme .match-time,
body.light-theme .clan-location,
body.light-theme .required-trophies,
body.light-theme .setting-description {
  color: rgba(0,0,0,0.6);
}

/*  Hamburger menu fix for light theme */
body.light-theme .hamburger {
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.2);
}

body.light-theme .hamburger:hover {
  background: rgba(0,0,0,0.2);
  transform: scale(1.05);
}

body.light-theme .hamburger .bars::before,
body.light-theme .hamburger .bars::after,
body.light-theme .hamburger .line {
  background: var(--ink);
}
body.light-theme .opponent-clan,
body.light-theme .arena-name {
  color: var(--gold);
}

body.light-theme .clan-stat .stat-label {
  color: rgba(0,0,0,0.6);
}

/* Light theme social icons - maintain visibility */
body.light-theme .social-link {
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.2);
}

body.light-theme .social-link:hover {
  background: rgba(0,0,0,0.2);
}

body.light-theme .footer-text p {
  color: var(--ink);
}

/* Light theme settings controls */
body.light-theme .toggle-switch {
  background: rgba(0,0,0,0.2);
}

body.light-theme .font-size-slider {
  background: rgba(0,0,0,0.2);
}

body.light-theme .setting-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Light theme drawer adjustments */
body.light-theme .drawer {
  background: linear-gradient(180deg, var(--blue), #004494);
  color: white;
}

/* Ensure text remains visible in light theme */
body.light-theme .section-title,
body.light-theme .pattern-title,
body.light-theme .matches-title,
body.light-theme .archive-title,
body.light-theme .page-title,
body.light-theme h2, body.light-theme h3, body.light-theme h4 {
  color: var(--ink);
}

/* ---------------- MOBILE RESPONSIVENESS ---------------- */
/* Small phones - everything gets more compact */
@media (max-width: 520px){
  .section-wrap{ grid-template-columns:1fr; } /* stack sections vertically */
  .content-grid {
    gap: 10px;
  }
  .mock-box {
    min-height: 70px;
    padding: 12px;
  }
  .mock-label {
    font-size: calc(11px * var(--user-font-scale));
  }
  .hi {
    font-size: calc(14px * var(--user-font-scale));
    padding: 6px 12px;
  }
  /* Smaller logo on very small screens */
  .brand__logo {
    height: 160px;
  }
  /* Tighter social icons spacing */
  .social-icons {
    gap: 12px;
  }
  
  /* IMPROVED MOBILE PATTERN ALIGNMENT */
  .game-pattern-container {
    gap: 6px !important;
    padding: 12px 8px !important;
    justify-content: center !important;
  }
  
  .pattern-letter {
    width: 36px !important;
    height: 36px !important;
    font-size: calc(14px * var(--user-font-scale)) !important;
  }
  
  .match-card {
    padding: 12px;
  }
  
  .match-score {
    font-size: calc(16px * var(--user-font-scale));
  }
  
  /* Better mobile stats alignment */
  .stats-grid {
    gap: 8px !important;
  }
  
  .stat-item {
    min-height: 70px !important;
  }
  
  /* CLAN SEARCH: Mobile adjustments */
  .clan-card-header {
    flex-direction: column;
    gap: 4px;
  }
  
  .clan-location {
    text-align: left;
  }
  
  .clan-stats-row {
    gap: 12px;
  }
  
  .clan-stat {
    min-width: 50px;
  }
  
  .clan-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* PLAYER PROFILE: Mobile adjustments */
  .stat-icon {
    width: 28px;
    height: 28px;
  }
  
  .stat-icon img {
    width: 16px;
    height: 16px;
  }
  
  .player-main-stats .stat-value {
    font-size: calc(14px * var(--user-font-scale));
  }
  
  .player-main-stats .stat-label {
    font-size: calc(10px * var(--user-font-scale));
  }
  
  .level-value {
    font-size: calc(20px * var(--user-font-scale));
  }
  
  .clan-badge, .arena-icon {
    width: 28px;
    height: 28px;
  }
  
  .clan-badge img, .arena-icon img {
    width: 16px;
    height: 16px;
  }
  
  .detailed-stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .stat-card {
    padding: 10px;
  }
  
  .player-profile-section {
    padding: 14px;
  }

  .player-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .player-main-stats {
    flex-direction: column;
    gap: 16px;
  }
  
  .clan-info-header, .arena-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .trophy-info {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  /* SETTINGS PAGE: Mobile adjustments */
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: auto;
    padding: 20px 0;
  }
  
  .setting-info {
    padding-right: 0;
    text-align: center;
    width: 100%;
  }
  
  .setting-control {
    align-self: center;
    width: 100%;
    justify-content: center;
  }
  
  .font-size-control {
    min-width: 150px;
    width: 100%;
  }
}

/* Very small screens - ultra compact for older phones */
@media (max-width: 360px) {
  .app {
    padding: 12px;
  }
  .header {
    gap: 8px;
  }
  .stats-grid {
    gap: 8px;
  }
  .stat-label {
    font-size: calc(11px * var(--user-font-scale));
  }
  .stat-value {
    font-size: calc(14px * var(--user-font-scale));
  }
  /* Even smaller logo for tiny screens */
  .brand__logo {
    height: 140px;
  }
  /* More compact social icons */
  .social-link {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.9);
  }
  .social-link:hover {
    background: white;
  }
  .social-link img {
    width: 16px;
    height: 16px;
  }
  /* MATCHES PAGE: Tiny screen adjustments */
  .pattern-letter {
    width: 28px;
    height: 28px;
    font-size: calc(12px * var(--user-font-scale));
  }
  
  .match-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .player-tag-input {
    font-size: calc(14px * var(--user-font-scale));
    padding: 10px 14px;
  }
  
  /* CLAN SEARCH: Tiny screen adjustments */
  .clan-card {
    padding: 12px;
  }
  
  .clan-card-content {
    gap: 8px;
  }
  
  .clan-badge {
    width: 32px;
    height: 32px;
  }
  
  .clan-badge img {
    width: 20px;
    height: 20px;
  }
  
  .clan-name-section h4.clan-name {
    font-size: calc(14px * var(--user-font-scale));
  }
  
  .join-indicator {
    width: 28px;
    height: 28px;
    font-size: calc(16px * var(--user-font-scale));
  }

  /* PLAYER PROFILE: Tiny screen adjustments */
  .stat-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
  }
  
  .stat-icon img {
    width: 14px;
    height: 14px;
  }
  
  .player-main-stats {
    gap: 6px;
  }
  
  .player-main-stats .stat-value {
    font-size: calc(13px * var(--user-font-scale));
  }
  
  .level-value {
    font-size: calc(18px * var(--user-font-scale));
  }
  
  .clan-badge, .arena-icon {
    width: 24px;
    height: 24px;
  }
  
  .clan-badge img, .arena-icon img {
    width: 14px;
    height: 14px;
  }

  .player-profile-section {
    padding: 16px;
  }
  
  .player-name-section h2 {
    font-size: calc(20px * var(--user-font-scale));
  }
  
  .player-main-stats .stat-value {
    font-size: calc(18px * var(--user-font-scale));
  }
  
  .stat-card {
    padding: 12px;
  }
  
  /* SETTINGS PAGE: Tiny screen adjustments */
  .settings-section {
    padding: 16px;
  }
  
  .font-size-control {
    min-width: 120px;
  }
  
  .toggle-switch {
    width: 44px;
    height: 24px;
  }
  
  .toggle-switch::after {
    width: 20px;
    height: 20px;
  }
  
  .toggle-switch.active::after {
    transform: translateX(20px);
  }
}

/* CRITICAL FIXES FOR CLASH HUB - Add to styles.css */

/* =============================
   MOBILE TOUCH TARGET FIXES
   Ensures 44px minimum for accessibility
   ============================= */

/* Fix refresh buttons - too small on mobile */
@media (max-width: 520px) {
  .refresh-matches-btn,
  .refresh-page-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: calc(16px * var(--user-font-scale)) !important;
  }

  .refresh-section-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: calc(16px * var(--user-font-scale)) !important;
  }

  /* Ensure hamburger is large enough */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
  }

  /* Ensure settings icon is large enough */
  .icon-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Scroll to top button */
  .scroll-to-top {
    width: 44px !important;
    height: 44px !important;
    font-size: calc(18px * var(--user-font-scale)) !important;
  }
}

/* =============================
   ICON SIZE STANDARDIZATION
   Consistent sizing across all pages
   ============================= */

/* Standard icon size system */
.icon-sm, 
.stat-icon img,
.stat-card-header img,
.clan-badge img,
.arena-icon img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

/* Navigation icons */
.nav-item img,
.icon-btn img {
  width: 20px !important;
  height: 20px !important;
}

/* Social media icons */
.social-link img {
  width: 18px !important;
  height: 18px !important;
}

/* Play button and larger interactive icons */
.play-button {
  width: 56px !important;
  height: 56px !important;
}

@media (max-width: 520px) {
  .play-button {
    width: 50px !important;
    height: 50px !important;
  }
}

/* =============================
   GRID RESPONSIVE FIXES
   Better mobile behavior for content grid
   ============================= */

/* Fix homepage grid stacking on very small screens */
@media (max-width: 480px) {
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Ensure video section still spans full width */
  .video-section {
    grid-column: 1 / -1;
  }
}

/* =============================
   LIGHT THEME COMPLETION
   Missing light theme styles
   ============================= */

/* Video page light theme fixes */
body.light-theme .video-placeholder {
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  border: 2px dashed rgba(0,0,0,0.3);
}

body.light-theme .video-description {
  color: rgba(0,0,0,0.7);
}

body.light-theme .video-meta {
  color: rgba(0,0,0,0.6);
}

/* Complete light theme for all card types */
body.light-theme .mock-box:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(45, 109, 246, 0.3);
}

body.light-theme .featured-image-card:hover {
  transform: translateY(-4px);
}

/* =============================
   HEADER ALIGNMENT FIXES
   Consistent positioning across pages
   ============================= */

/* Ensure logo is perfectly centered */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px; /* Consistent header height */
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 44px; /* Touch target for logo link */
}

/* Ensure side elements don't interfere with centering */
.hamburger,
.icon-btn {
  flex-shrink: 0;
}

/* =============================
   PULL-TO-REFRESH INDICATOR FIXES
   Consistent styling across pages
   ============================= */

.pull-indicator {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-card);
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-size: calc(14px * var(--user-font-scale));
  border: 1px solid rgba(255,255,255,0.1);
}

.pull-indicator.ready { 
  background: var(--blue);
  border-color: var(--blue);
}

/* Light theme for pull indicator */
body.light-theme .pull-indicator {
  background: white;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: var(--ink);
}

body.light-theme .pull-indicator.ready {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* =============================
   ANIMATION CONSISTENCY
   Standardized transitions
   ============================= */

/* Consistent refresh button animations */
.refresh-matches-btn,
.refresh-page-btn,
.refresh-section-btn {
  transition: all 0.3s ease;
}

.refresh-matches-btn.refreshing,
.refresh-page-btn.refreshing,
.refresh-section-btn.refreshing {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Touch feedback consistency */
.touch-card {
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.touch-card:active {
  transform: scale(0.98);
}

/* =============================
   FORCED DRAWER TAB HIDING
   Ensure no pull-tabs appear anywhere
   ============================= */

.drawer-tab,
#drawerTab,
button[id*="drawerTab"],
button[class*="drawer-tab"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =============================
   FONT SCALING COMPLETENESS
   Ensure all text scales properly
   ============================= */

/* Complete font scaling for missed elements */
.page-title {
  font-size: calc(28px * var(--user-font-scale));
}

.page-subtitle {
  font-size: calc(14px * var(--user-font-scale));
}

.archive-title {
  font-size: calc(24px * var(--user-font-scale));
}

.section-title {
  font-size: calc(24px * var(--user-font-scale));
}

.news-title {
  font-size: calc(20px * var(--user-font-scale));
}

.terms-section h2 {
  font-size: calc(20px * var(--user-font-scale));
}

/* Mobile font scaling adjustments */
@media (max-width: 520px) {
  .page-title {
    font-size: calc(24px * var(--user-font-scale));
  }
  
  .archive-title,
  .section-title {
    font-size: calc(20px * var(--user-font-scale));
  }
  
  .news-title {
    font-size: calc(18px * var(--user-font-scale));
  }
}/* =============================
   Clash Hub Stylesheet 
   dark navy + gold + blue
   fonts: Montserrat + Open Sans
   ============================= */

/* import fonts from Google Fonts - makes our app look professional */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600&display=swap');

/* design tokens we reuse throughout the app - like variables in programming! */
:root{
  --navy:#0B0B2B;   /* dark bg from mood board */
  --navy-card:#15153b; /* slightly lighter card bg */
  --gold:#F5C542;   /* gold accent */
  --blue:#2D6DF6;   /* bright blue */
  --paper:#F2E7C9;  /* light beige text */
  --ink:#EDECF5;    /* normal light text */
  --shadow:0 6px 18px rgba(0,0,0,.35); /* nice drop shadow */

  --radius-xl:24px; /* big rounding like hi-fi */
  --radius-md:14px; /* medium rounding */
  --gap:12px;      /* reduced for better mobile spacing */

  /* app width: starts mobile-first, grows on bigger screens */
  --app-max: 400px;  /* optimized for mobile first */
  
  /* Font scaling system */
  --user-font-scale: 1; /* Default scale, controlled by settings */
}

/* Responsive breakpoints - tablet size */
@media (min-width: 768px){
  :root{ 
    --app-max: 480px;
    --gap: 16px;
  }
}

/* Desktop size - much wider and more spacious */
@media (min-width: 1024px){
  :root{ 
    --app-max: 980px;
    --gap: 20px;
  }
}

/* CSS reset + base styles - removes browser defaults */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  /* Apply user font scaling */
  font-size: calc(16px * var(--user-font-scale));
}

/* Smooth global font-size scaling */
body {
  transition: font-size .12s ease-out;
  will-change: font-size;
}

/* Desktop gets slightly larger base font */
@media (min-width: 1024px){
  body{ 
    font-size: calc(18px * var(--user-font-scale));
  }
}

/* Main app container - centers everything and sets max width */
.app{
  max-width:var(--app-max);
  min-height:100dvh; /* dvh = dynamic viewport height, works better on mobile */
  margin:0 auto;
  padding:16px;
}

/* Larger screens get more padding */
@media (min-width: 768px) {
  .app {
    padding: 20px;
  }
}

/* ---------------- HEADER ---------------- */
/* Header layout: hamburger | logo | settings */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 16px;
}

/* FORCE HIDE PULL-TAB ON ALL PAGES - universal fix */
.drawer-tab { 
  display: none !important; 
  visibility: hidden !important;
}

/* Hamburger menu button (three horizontal lines) - CONSISTENT ACROSS ALL PAGES */
.hamburger{
  display:inline-grid !important;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  cursor: pointer;
  border:none;
  transition: all 0.3s ease;
}

.hamburger:hover {
  background: rgba(255,255,255,.12);
  transform: scale(1.05);
}

/* Remove any simplified hamburger variations */
.hamburger-simple {
  display: none !important;
}

/* Creates the three lines effect using CSS pseudo-elements */
.hamburger .bars{
  width:20px; height:12px; position:relative;
}
.hamburger .bars::before,
.hamburger .bars::after,
.hamburger .line{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:#fff; border-radius:2px;
}
.hamburger .line{ top:5px; }      /* middle line */
.hamburger .bars::before{ top:0; } /* top line */
.hamburger .bars::after{ bottom:0; } /* bottom line */

/* Logo and brand - bigger like in hi-fi mockup */
.brand{ 
  display:flex; 
  align-items:center; 
  justify-content:center; /* center the logo in header */
  flex:1;
}
.brand__logo{ 
  height: 200px; /* back to previous size */
  width: auto; /* maintains aspect ratio */
}

/* Tablet and desktop - even bigger logo */
@media (min-width: 768px) {
  .brand__logo {
    height: 240px; /* back to previous size */
  }
}

/* Settings gear button on the right */
.icon-btn{
  width:40px;height:40px; border-radius:50%;
  background:rgba(255,255,255,.1);
  display:grid;place-items:center; border:none; cursor:pointer;
}
.icon-btn img{ width:22px;height:22px; }

/* ---------------- GREETING & PLAYER SEARCH ---------------- */
/* Welcome message - styled like a notification */
.hi{ 
  margin:10px 0 16px; 
  opacity:.9; 
  background: var(--blue);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  color: white;
  font-weight: 600;
  font-size: calc(14px * var(--user-font-scale));
}

/* ---------------- MATCHES PAGE: CURRENT TAG DISPLAY ---------------- */
/* Shows which player tag is currently loaded */
.current-tag {
  background: var(--navy-card);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  text-align: center;
  font-size: calc(14px * var(--user-font-scale));
  border: 1px solid var(--blue);
}

.current-tag strong {
  color: var(--blue);
  font-family: "Montserrat", sans-serif;
}

#tagText, #playerText, #searchText {
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

/* ---------------- STANDARDIZED PLAYER SEARCH SECTION ---------------- */
/* STANDARDIZED: Player search section - where users enter their info */
.player-search-section {
  margin-bottom: 20px;
}

/* STANDARDIZED: Search input container layout */
.search-input-container {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: stretch; /* Ensures all elements have same height */
}

/* STANDARDIZED: Input field styling */
.player-tag-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 56px; /* Consistent height across all pages */
  padding: 14px 16px;
  background: var(--navy-card);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: "Open Sans", sans-serif;
  font-size: calc(16px * var(--user-font-scale));
}

.player-tag-input:focus {
  border-color: var(--blue);
  outline: none;
}

.player-tag-input::placeholder {
  color: rgba(255,255,255,0.5);
}

/* STANDARDIZED: Button group layout */
.button-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* STANDARDIZED: Main action button */
.load-matches-btn {
  padding: 12px 24px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: background 0.2s ease;
  font-size: calc(14px * var(--user-font-scale));
  min-height: 44px; /* Touch target */
}

.load-matches-btn:hover {
  background: #1c5ff0;
}

/* STANDARDIZED: Clear button styling - MATCHES ALL PAGES */
.clear-btn {
  padding: 12px 20px;
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border: 2px solid #ff6b6b;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: calc(14px * var(--user-font-scale));
  min-height: 44px; /* Touch target */
}

.clear-btn:hover {
  background: rgba(255, 107, 107, 0.25);
  transform: translateY(-1px);
}

/* STANDARDIZED: Loading and error messages */
.loading-message {
  text-align: center;
  color: var(--blue);
  font-weight: 600;
  margin-top: 12px;
  padding: 8px 16px;
  background: rgba(45, 109, 246, 0.1);
  border-radius: var(--radius-md);
  font-size: calc(14px * var(--user-font-scale));
}

.error-message {
  text-align: center;
  color: #ff6b6b;
  font-weight: 600;
  margin-top: 12px;
  background: rgba(255, 107, 107, 0.1);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 107, 107, 0.3);
  font-size: calc(14px * var(--user-font-scale));
}

/* STANDARDIZED: Player lookup container */
.player-lookup-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* STANDARDIZED: Mobile responsiveness */
@media (max-width: 520px) {
  .player-lookup-container.mobile-stack .search-input-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .player-lookup-container.mobile-stack .player-tag-input {
    width: 100%;
  }
  
  .load-matches-btn, .clear-btn {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .button-group {
    flex-direction: row; /* Keep buttons side by side on mobile */
    justify-content: center;
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .button-group {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .load-matches-btn, .clear-btn {
    width: 100%;
    max-width: 200px;
  }
}

/* ---------------- PLAYER STATS SECTION ---------------- */
/* Stats overview card - shows key player metrics */
.player-stats, .matches-stats {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.player-stats h3, .matches-stats h3 {
  font-family: "Montserrat", sans-serif;
  font-size: calc(18px * var(--user-font-scale));
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  color: var(--ink);
}

/* IMPROVED STATS GRID ALIGNMENT - fixes spacing issues */
.stats-grid {
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important; /* Ensure equal height */
  gap: 12px;
}

/* Individual stat item (icon + label + value) */
.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1;
  text-align: center;
  min-height: 80px; /* Ensure consistent height */
}

/* Icon container for each stat - FIXED SIZING */
.stat-icon {
  width: 32px !important;          /* Reduced from 48px */
  height: 32px !important;
  background: rgba(255,255,255,.08);
  border-radius: 8px;              /* Reduced from 12px */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px;              /* Reduced from 8px */
}

.stat-icon img {
  width: 18px !important;          /* Reduced from 24px */
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

/* Stat labels (like "Daily streak:") */
.stat-label {
  font-size: calc(12px * var(--user-font-scale));
  opacity: 0.8;
  margin-bottom: 2px;
}

/* Stat values (the big numbers) */
.stat-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: calc(16px * var(--user-font-scale));
  color: var(--gold); /* gold makes numbers pop! */
}

/* ---------------- MATCHES PAGE: MATCH CARDS ---------------- */
/* Recent matches section container */
.recent-matches-section {
  background: var(--navy-card);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.matches-title {
  font-family: "Montserrat", sans-serif;
  font-size: calc(16px * var(--user-font-scale));      /* Reduced from 18px */
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  color: var(--ink);
}

.matches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual match card - shows each battle result */
.match-card {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 16px;
  border-left: 4px solid var(--gold);
  transition: background 0.2s ease;
}

.match-card:hover {
  background: rgba(255,255,255,0.08);
}

/* Direction arrows underneath game pattern */
.pattern-arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 0 20px;
  font-size: calc(12px * var(--user-font-scale));
  color: rgba(255,255,255,0.6);
}

.arrow-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.arrow-symbol {
  font-size: calc(16px * var(--user-font-scale));
  color: var(--gold);
  font-weight: bold;
}

.arrow-label {
  font-size: calc(11px * var(--user-font-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.arrow-indicator.recent .arrow-label {
  color: #4ecdc4;
}

.arrow-indicator.oldest .arrow-label {
  color: rgba(255,255,255,0.5);
}

/* Mobile optimizations */
@media (max-width: 520px) {
  .pattern-arrows {
    padding: 0 10px;
    margin-top: 10px;
  }

  .arrow-symbol {
    font-size: calc(14px * var(--user-font-scale));
  }

  .arrow-label {
    font-size: calc(10px * var(--user-font-scale));
  }
}