* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #cbffc9, #28a0eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

/* PHONE FRAME */
.phone {
  width: 375px;
  height: 812px;
  background: #faf5f6;
  border-radius: 36px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* STATUS BAR */
.status-bar {
  height: 44px;
  padding: 0 20px;
  background: #0f1d26;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

/* APP CONTENT CONTAINER */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevents double scroll on iOS */
}

/* HEADER */
.app-header {
  background: linear-gradient(135deg, #0f86f5, #28a0eb);
  color: white;
  padding: 30px 20px 20px;
  flex-shrink: 0;
}

.app-header h1 {
  margin: 0;
  font-size: 26px;
}

.app-header p {
  margin-top: 6px;
  opacity: 0.9;
}

/* SCROLLABLE CONTENT AREA */
.content {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;                /* Forces reliable scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth momentum on iOS */
  min-height: 0;                     /* Critical Safari flex fix */
}

/* TABS */
.tab {
  display: none;
  flex-direction: column;
  height: 100%;
}

.tab.active {
  display: flex;
}

/* BOTTOM NAVIGATION - FIXED AT BOTTOM */
.bottom-nav {
  height: 80px;
  padding-bottom: env(safe-area-inset-bottom); /* Handles iPhone home indicator */
  background: white;
  display: flex;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
}

.bottom-nav button {
  flex: 1;
  border: none;
  font-size: 12px;
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bottom-nav button.active {
  color: #0f86f5;
  font-weight: bold;
  
}

/* OPTIONAL: Add icons later with ::before or img */

/* ADDITIONS - NEWS, CARDS, ETC. */
.news-feed .news-item {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.news-feed img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news-feed h3 {
  padding: 12px 16px 4px;
  margin: 0;
  font-size: 18px;
}

.news-feed p {
  padding: 0 16px 16px;
  margin: 0;
  color: #555;
}

.feature-btn {
  display: block;
  width: 100%;
  padding: 16px;
  margin: 12px 0;
  background: #0f86f5;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(15,134,245,0.4);
}

.usage-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0,123,255,0.2);
  border-left: 6px solid #0f86f5;
}

.usage-card h3 {
  margin: 0 0 8px;
  color: #0f86f5;
}

.usage-card .compare {
  font-size: 20px;
  font-weight: bold;
}

.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

.ranking-list {
  padding-left: 20px;
  list-style: none;
  
}

.ranking-list li {
  font-size: 18px;
  padding: 12px 0;
  border: 2px solid #eee;
  border-radius: 8px;

}

.fixed-footer {
  padding: 12px 0;
  border-top: 1px solid #ddd;
  text-align: center;
  position-anchor: bottom;
  color: #888;
  font-size: 14px;}

.ranking-list li:nth-child(1) { color: gold; font-weight: bold; }
.ranking-list li:nth-child(2) { color: silver; }
.ranking-list li:nth-child(3) { color: #cd7f32; }

.home-tab{
  background-color: #e0f0ff;
}



/* Container for the ranking items */
.ranking-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 80px; /* Space for footer */
}

/* Base style for every ranking row */
.ranking-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

/* Circular rank number */
.rank-pos {
    width: 30px;
    height: 30px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 15px;
    color: #555;
}

.rank-name {
    flex-grow: 1;
    font-weight: 600;
    color: #333;
}

.rank-units {
    font-size: 0.9rem;
    color: #28a745; /* Green for units */
    font-weight: bold;
}

/* Special Colors for Top 3 */
.top-1 {
    background: linear-gradient(135deg, #fff9e6 0%, #ffecb3 100%);
    border: 1px solid #ffd700;
}
.top-1 .rank-pos { background: #ffd700; color: white; }

.top-2 {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    border: 1px solid #c0c0c0;
}
.top-2 .rank-pos { background: #c0c0c0; color: white; }

.top-3 {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #cd7f32;
}
.top-3 .rank-pos { background: #cd7f32; color: white; }

/* Highlighted style for the User (You) */
.user-highlight {
    background: #007bff; /* Blue theme */
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(0,123,255,0.3);
}

.user-highlight .rank-name, 
.user-highlight .rank-units,
.user-highlight .rank-pos {
    color: white;
}

.user-highlight .rank-pos {
    background: rgba(255,255,255,0.2);
}



/* 1. Ranking Tab Gradient Background */
#ranking-tab .content {
  background: linear-gradient(to right, #e3f2fd, #e8f5e9); /* Soft Blue to Soft Green */
}

/* 2. Dark Mode Styles */
/* We apply the class to the .phone container to change the "App" appearance */
.phone.dark-mode {
  background: #121212; /* Dark background */
}

.phone.dark-mode .status-bar {
  background: #000;
}

.phone.dark-mode .bottom-nav, 
.phone.dark-mode .ranking-item, 
.phone.dark-mode .news-item, 
.phone.dark-mode .usage-card {
  background: #1e1e1e; /* Dark cards */
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.phone.dark-mode .rank-name, 
.phone.dark-mode h2, 
.phone.dark-mode label,
.phone.dark-mode .news-feed p,
.phone.dark-mode .content {
  color: #e0e0e0;
}

.phone.dark-mode .ranking-item.top-1,
.phone.dark-mode .ranking-item.top-2,
.phone.dark-mode .ranking-item.top-3 {
    color: #333; /* Keep top 3 names dark for readability on gold/silver/bronze */
}

.phone.dark-mode .setting {
  border-bottom: 1px solid #333;
}