:root {
  --bg: #e9ecef;
  --card: white;
  --text: #333;
  --muted: #777;
  --border: #ddd;
  --blue: #007bff;
  --blue-dark: #0056b3;

  --green: #28a745;
  --yellow: #ffc107;
  --red: #dc3545;
  --gray: #6c757d;
}



* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family: "Nunito", sans-serif;
  font-weight: 400;

  background: var(--bg);
  color: var(--text);

  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 100vh;

  padding-top: 30px;

  -webkit-text-size-adjust: 100%;
}


.container {

  width:100%;
  max-width:500px;

  padding:0 12px;

  text-align:center;

  position:relative;
}

.top-bar {

  width:100%;
  max-width:500px;

  margin:0 auto 10px;

  display:grid;

  grid-template-columns:50px 1fr 50px;

  align-items:center;
}


.left {
  justify-self:start;
}


.right {
  justify-self:end;
}


.title {

  text-align:center;

  font-size:20px;

  font-weight:bold;
}

.icon-btn {

  width:38px;
  height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:none;

  border-radius:50%;

  background:transparent;

  color:#767676;

  cursor:pointer;

  font-size:18px;

  font-weight:bold;

  line-height:1;
}


.icon-btn:hover {

  background:rgba(118,118,118,.12);

  color:#555;
}


.top-input {

  display:flex;

  justify-content:space-between;

  align-items:center;

  width:calc(100% - 32px);

  padding:5px;

  margin:0 auto;

  font-size:14px;

  color:#4d4d4d;
}


.input-wrapper {

  position:relative;

  width:100%;
}


input {

  width:100%;

  padding:14px;

  font-size:16px;

  border-radius:12px;

  border:2px solid #ccc;

  outline:none;

}


input:focus {

  border-color:var(--blue);

  box-shadow:0 0 8px rgba(0,123,255,.25);
}



.guess-counter {

  font-size:14px;

  color:#666;

  margin-bottom:6px;

  text-align:left;
}


.message {

  margin-top:6px;

  font-size:13px;

  color:#d93025;

  text-align:left;

  min-height:18px;
}


#gameTitle {

  margin:10px 0 15px;

  font-size:16px;

  font-weight:600;

  color:#333;
}



.dropdown {

  position:absolute;

  top:calc(100% + 6px);

  left:0;

  width:100%;

  background:white;

  border-radius:12px;

  box-shadow:0 10px 25px rgba(0,0,0,.15);

  max-height:240px;

  overflow-y:auto;

  display:none;

  z-index:9999;

  text-align:left;

  -webkit-overflow-scrolling:touch;
}


.item {

  display:flex;

  align-items:center;

  gap:10px;

  padding:8px 12px;

  cursor:pointer;

  border-bottom:1px solid #eee;
}


.item:hover {

  background:#f0f6ff;
}


.item.active {

  background:#dbe9ff;
}


.dropdown-headshot {

  width:28px;

  height:28px;

  border-radius:50%;

  object-fit:cover;
}



.board {

  margin-top:20px;

  text-align:left;
}


#lastGuess {

  min-height:42px;
}


#lastGuess:empty {

  display:none;
}


.row,
.rowGuess {

  margin-bottom:8px;

  padding:10px;

  border-radius:12px;

  display:flex;

  justify-content:space-between;

  font-weight:500;

  background:white;
}


.row {

  box-shadow:0 2px 3px rgba(0,0,0,.08);
}


.rowGuess {

  border:2px solid #3f3f3f;
}




.rank {

  width:40px;

  font-weight:bold;
}


.name {

  flex:1;
}


.value {

  width:45px;

  text-align:center;

  font-weight:bold;
}



.top5 {
  background:#d4edda;
}


.top10 {
  background:#fff3cd;
}


.top25 {
  background:#f8d7da;
}


.ranked {
  background:#e2e3e5;
}


.other {
  background:#c6c7c9;
}


button {

  font-family:"Nunito", sans-serif;

  font-weight:600;

  background:var(--blue);

  color:white;

  border:none;

  padding:14px 18px;

  font-size:16px;

  border-radius:12px;

  cursor:pointer;

  min-height:44px;
}


button:hover {

  background:var(--blue-dark);
}


button:focus-visible {

  outline:3px solid #80bdff;
}


.popup {

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.7);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:99999;
}


.popup-content {

  background:white;

  padding:25px;

  border-radius:16px;

  width:90%;

  max-width:400px;

  text-align:center;
}


#username {

  margin-bottom:15px;

  padding:8px;
}


#playerIdPopup button {

  margin-top:10px;

  padding:8px 20px;
}


#loginYesBtn,
#loginNoBtn {

  margin:10px;

  padding:8px 20px;
}



.score-stats {

  display:flex;

  flex-direction:column;

  gap:10px;

  margin:15px 0;

  font-size:18px;

  font-weight:600;
}


.score-row {

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;
}


.dot {

  width:14px;

  height:14px;

  border-radius:50%;

  display:inline-block;

  flex-shrink:0;
}


.dot.green {
  background:var(--green);
}


.dot.yellow {
  background:var(--yellow);
}


.dot.red {
  background:var(--red);
}


.dot.gray {
  background:var(--gray);
}



.result-card {

  width:100%;

  max-width:300px;

  margin:12px auto 0;

  padding:10px 12px;

  border:2px solid #c2c2c2;

  border-radius:8px;

  background:transparent;

  text-align:center;

  display:none;
}


.result-card h3 {

  margin:0 0 8px;

  font-size:16px;

  font-weight:700;
}


.result-buttons {

  display:flex;

  justify-content:center;

  gap:10px;

  margin-top:15px;
}


.result-buttons button {

  flex:1;

  max-width:140px;

  padding:8px 10px;

  font-size:14px;

  min-height:40px;
}


.menu-wrapper {

  position:relative;

  display:inline-block;
}


.menu {

  position:absolute;

  top:calc(100% + 8px);

  right:0;

  width:180px;

  padding:8px;

  background:white;

  border-radius:10px;

  box-shadow:0 4px 12px rgba(0,0,0,.2);

  display:flex;

  flex-direction:column;

  gap:6px;

  z-index:1000;
}


.menu-btn {

  width:100%;

  padding:8px 12px;

  background:transparent;

  color:#333;

  border:none;

  border-radius:8px;

  text-align:left;

  font-size:14px;

  min-height:auto;
}


.menu-btn:hover {

  background:#f2f2f2;

  color:#333;
}

.menu-player {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}


.hidden {

  display:none;
}



.last5games {

  width:100%;

  max-width:300px;

  margin:12px auto 0;

  padding:10px 12px;

  background:transparent;

  border:2px solid #c2c2c2;

  border-radius:8px;

  text-align:center;
}


.last5games h4 {

  margin:0 0 8px;

  font-size:14px;

  font-weight:600;

  color:#333;
}


.day-buttons {

  display:flex;

  justify-content:center;

  gap:4px;

}


.day-btn {

  padding:6px 8px;

  font-size:12px;

  border-radius:6px;

  min-width:48px;

  border:1px solid #ccc;
}

#calendarButton {

  margin-top:12px;

  width:256px;

  padding:6px 8px;

  font-size:13px;

  border-radius:6px;

  min-height:32px;

  height:32px;

  display:block;

  margin-left:auto;

  margin-right:auto;

}

.day-btn.completed,
.calendarDay.completed {

  background:#4caf50;

  color:white;

  border-color:#4caf50;
}


.day-btn.notStarted,
.calendarDay.notStarted {

  background:#ddd;

  color:#777;

  border-color:#ccc;
}


.day-btn.failed,
.calendarDay.failed {

  background:#af4c4c;

  color:white;

  border-color:#af4c4c;
}


.day-btn.incomplete,
.calendarDay.incomplete {

  background:#c7a74e;

  color:white;

  border-color:#c7a74e;
}

.calendarDay.future {
    background:#636363;

    color:#878686;

    border-color:#636363;
}



.leaderboard {

  width:100%;

  max-width:300px;

  margin:12px auto 0;

  padding:10px 12px;

  border:2px solid #c2c2c2;

  border-radius:8px;

  background:transparent;

  text-align:center;
}


.leaderboard h3 {

  margin:0 0 8px;

  font-size:14px;

  font-weight:600;

  color:#333;
}


#leaderboardList {

  display:flex;

  flex-direction:column;

  gap:6px;
}


/* Normal leaderboard (4 columns) */
.leaderboard-header,
.leaderboard-row {
    display:grid;
    grid-template-columns:40px 1fr 65px 45px;
    align-items:center;
}


/* Stat leaderboard (3 columns) */
.stat-header,
.stat-row,
#leaderboardStatHeader {
    display:grid;
    grid-template-columns:40px 1fr 45px;
    align-items:center;
}

.leaderboard-header,
.stat-header,
#leaderboardStatHeader {

  padding:6px 4px 4px;

  margin-bottom:4px;

  border-bottom:1px solid #ddd;

  font-size:11px;

  font-weight:700;

  color:#777;

  text-transform:uppercase;
}


.leaderboard-row {

  border-bottom:1px solid #ddd;
}


.leaderboard-row:last-child {

  border-bottom:none;
}


.leaderboard-header span:nth-child(1),
.leaderboard-row span:nth-child(1) {

  text-align:left;
}


.leaderboard-header span:nth-child(2),
.leaderboard-row span:nth-child(2) {

  text-align:left;
}


.leaderboard-header span:nth-child(3),
.leaderboard-row span:nth-child(3),
.leaderboard-header span:nth-child(4),
.leaderboard-row span:nth-child(4) {

  text-align:center;

  font-weight:700;
}

.stat-header span:nth-child(3),
#leaderboardStatHeader span:nth-child(3) {
    text-align:center;
    font-weight:700;
}

.stat-header .stat-label,
#leaderboardStatHeader .stat-label {

  text-align:center;

  width:45px;
}
.stat-header {

    margin-top:35px;

}


.leaderboard-popup h2 {

  position:sticky;

  top:0;

  background:white;

  padding:10px 0;
}


.leaderboard-list {

  max-height:60vh;

  overflow-y:auto;

  display:flex;

  flex-direction:column;

  gap:8px;

  margin-bottom:18px;

  -webkit-overflow-scrolling:touch;

  scrollbar-gutter:stable;
}


.leaderboard-btn {

  width:160px;

  padding:8px 12px;

  font-size:14px;

  margin:45px auto 0;

  display:block;
}



.game-date {

  font-size:18px;

  font-weight:bold;

  line-height:1;
}


.game-info {

  display:flex;

  align-items:center;

  gap:18px;
}


.guess-info {

  display:flex;

  align-items:center;

  gap:4px;
}


.guess-label {

  font-size:14px;

  color:#666;

  line-height:18px;

  align-self:flex-end;

  transform:translateY(1px);
}


.guess-number {

  font-size:18px;

  font-weight:bold;

  line-height:18px;
}



@media(max-width:480px) {


  .container {

    padding:0 10px;
  }


  h2 {

    font-size:20px;
  }


  #gameTitle {

    font-size:14px;
  }


  .row,
  .rowGuess {

    font-size:14px;

    padding:8px;
  }

}

#calendarGrid {
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:5px;

    width:100%;
    max-width:340px;
    margin:10px auto 0;
}
.calendarDay {
    width:100%;
    aspect-ratio:1 / 1;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:8px;

    font-weight:bold;
    cursor:pointer;

    font-size:14px;
}


.calendar-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}


.calendar-header h2 {

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#333;

}


#prevMonth,
#nextMonth {

    width:36px;

    height:36px;

    min-height:36px;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

    border-radius:50%;

}



#calendarGrid {

    margin-top:10px;

}


#closeCalendar {

    display:block;

    width:100%;

    max-width:220px;

    margin:18px auto 0;

    padding:8px 12px;

    font-size:14px;

    min-height:38px;

    border-radius:8px;

}

.calendar-header {
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    margin-bottom:15px;
}


.calendar-header h2 {
    margin:0;
    font-size:18px;
}

#leaderboardList .row {
    display:flex;
    justify-content:space-between;
    text-align:left;
}

#leaderboardList .name {
    text-align:left;
}

.ad-container {
    width: 100%;
    max-width: 728px;
    margin: 25px auto;
    text-align: center;
}

.how-to-card {

  width:100%;

  max-width:400px;

  margin:12px auto 0;

  padding:10px 12px;

  border:2px solid #c2c2c2;

  border-radius:8px;

  background:#c2c2c2;

  text-align:center;

  display:none;

}


.how-to-card h3 {

  margin:0 0 8px;

  font-size:16px;

  font-weight:700;

}

.how-to-card p {

  margin:6px 0;

  font-size:14px;

}

.hint-message {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    min-height: 18px;
}

#message {
    flex: 1;
    margin: 0;
    font-size: 13px;
    color: #d93025;
    text-align: left;
}

#hint {
    margin: 0;
    font-size: 13px;
    color: #666;
    text-align: right;
    white-space: nowrap;
}



.warning-box {
    background: #ffe5e5;
    border: 2px solid #d32f2f;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    text-align: center;
}

.warning-box h2 {
    color: #d32f2f;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.warning-box p {
    color: #b71c1c;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
}


.rating-leaderboard {

    width:100%;

    max-width:500px;

    margin:12px auto 0;

    padding:10px 12px;

    border:2px solid #c2c2c2;

    border-radius:8px;

    overflow-x:auto;

}


.rating-leaderboard h3 {

    margin:0 0 8px;

    font-size:14px;

    font-weight:600;

}


.rating-header,
.rating-row {

    min-width:430px;

    display:grid;

    grid-template-columns:
        20px
        90px
        55px
        30px
        30px
        30px
        35px
        45px
        45px
        45px
        55px;

    align-items:center;

    gap:4px;

    text-align:center;

    font-size:12px;

}

.player-name {
    text-align: left;
}

.rating-leaderboard h3 {

    margin:0 0 8px;

    text-align:center;

}

.rating-header {

    font-weight:bold;

    color:#777;

    border-bottom:1px solid #ddd;

    padding-bottom:5px;

}


.rating-row {

    padding:7px 0;

    border-bottom:1px solid #ddd;

}


.rating-row span:nth-child(2) {

    text-align:left;

}

.rating-info {
  margin-top: 20px;
  text-align: left;
}

.rating-info h2 {
  text-align: center;
  margin-bottom: 10px;
}

.rating-info p {
  margin: 8px 0;
}

.rating-info ul {
  margin: 10px 0;
  padding-left: 25px;
}

.leaderboard-header a {
  color: inherit;
  text-decoration: underline;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.leaderboard-header a:hover {
  background: #e0e0e0;
  text-decoration: underline;
}