/* layout.css */

/* BODY */
body {
  margin: 0;
  background-color: var(--colour-background);
  color: var(--colour-white);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

/* GENERIC PAGE CONTAINER */
.content { max-width: 820px; margin: 1.5rem auto; padding: 0 1rem; }

/* BANNER */
.banner {
  background-color: var(--colour-banner);
  padding: var(--banner-padding-y) var(--banner-padding-x);
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 10;
}
.banner .brand {
  margin: 0; font-size: var(--font-size-heading);
  color: var(--colour-secondary); text-decoration: none; font-weight: normal;
}
.banner .nav { display:flex; gap:1rem; position:relative; z-index:20; }
.banner .nav a {
  display:inline-block; font-size:16px; color:var(--colour-white);
  background-color: var(--colour-secondary);
  text-decoration:none; padding:.3rem .9rem; border-radius:9999px;
  transition: background-color .2s, color .2s;
}
.banner .nav a:hover { background: var(--colour-primary); color: var(--colour-white); }
.banner .nav .nav-links { display:flex; align-items:center; gap:1rem; }
.banner .nav .nav-links .auth-in,
.banner .nav .nav-links .auth-out { display:flex; align-items:center; gap:1rem; }

/* HAMBURGER */
.menu-toggle {
  display:none; background:var(--colour-secondary); color:var(--colour-white);
  border:none; border-radius:8px; cursor:pointer; width:40px; height:32px; padding:0;
  position:relative; z-index:1001;
}
.menu-toggle .bar {
  position:absolute; left:8px; right:8px; height:3px;
  background:var(--colour-white); border-radius:2px;
  transition: top .2s ease, transform .2s ease, opacity .15s ease;
  transform-origin:center;
}
.menu-toggle .bar:nth-child(1){ top:7px; }
.menu-toggle .bar:nth-child(2){ top:14.5px; }
.menu-toggle .bar:nth-child(3){ top:22px; }
.menu-toggle.open .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2){ opacity:0; }
.menu-toggle.open .bar:nth-child(3){ top:50%; transform:translateY(-50%) rotate(-45deg); }

/* MOBILE MENU */
@media (max-width: 640px) {
  .menu-toggle { display:block; }
  .banner .nav .nav-links {
    display:none; position:absolute; right:0; top:100%; margin-top:.5rem;
    background:var(--colour-background); border:5px solid var(--colour-banner);
    border-radius:1rem; padding:.5rem 0; min-width:200px; max-width:90vw; z-index:1000;
    flex-direction:column; box-sizing:border-box; overflow:hidden;
  }
  .banner .nav .nav-links.open { display:flex; }
  .banner .nav .nav-links a {
    display:block; width:100%; background:var(--colour-background);
    box-sizing:border-box; padding:.1rem .5rem .75rem; border-radius:0; text-align:center; text-decoration:none;
  }
  .banner .nav .nav-links .auth-in,
  .banner .nav .nav-links .auth-out { flex-direction: column; align-items: stretch; gap: 0; }
  .banner .nav .nav-links a + a { position:relative; margin-top:.25rem; padding-top:.3rem; }
  .banner .nav .nav-links a + a::before {
    content:""; position:absolute; top:-.5rem; left:50%; transform:translateX(-50%);
    width:85%; height:2px; background:var(--colour-primary);
  }
  .banner .nav .nav-links a:hover { background:transparent; }
}

/* LEADERBOARD (from index/home) */
.leaderboard { max-width:600px; margin:2rem auto; padding:1rem; background:var(--colour-background); border-radius:.75rem; }
.leaderboard .player { padding:.75rem 0; border-bottom:2px solid var(--colour-secondary); position:relative; }
.leaderboard .player:last-child { border-bottom:none; }
.leaderboard .pos { font-size:1.5rem; font-weight:bold; color:var(--colour-primary); margin-right:.5rem; }
.leaderboard .stats { font-family:monospace; }
.leaderboard .stats strong { font-weight:bold; }
.leaderboard .idnum { font-size:.85rem; opacity:.8; }
.leaderboard .name { font-weight:600; }
.toggle { margin-left:auto; background:transparent; color:var(--colour-white); border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.chev { display:inline-block; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--colour-white); transition:transform .2s ease; }
.chev.open { transform: rotate(180deg); }
.player-details { display:none; padding:.6rem .75rem .9rem 2rem; background:rgba(255,255,255,0.04); border-left:3px solid var(--colour-primary); border-radius:6px; margin-top:.4rem; }
.player-details.open { display:block; }
.details-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; margin-bottom:.5rem; }
.stat-card { background:var(--colour-banner); border-radius:8px; padding:.6rem .7rem; box-shadow:0 2px 8px rgba(0,0,0,.25); font-size:.95rem; }
.stat-card h4 { margin:0 0 .35rem 0; font-size:1rem; }
.chart-wrap { position:relative; width:100%; height:160px; }
.chart-wrap canvas { width:100% !important; height:100% !important; display:block; }

/* GAME HISTORY CARDS */
.game-card { background:var(--colour-banner); border-radius:10px; padding:.9rem 1rem; margin-bottom:.75rem; box-shadow:0 4px 10px rgba(0,0,0,.25); }
.game-head { display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:.5rem; }
.game-lines { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.line { margin:.15rem 0; }
.winner { color:var(--colour-primary); font-weight:700; }
.muted { opacity:.85; }
.pill { display:inline-block; padding:.1rem .45rem; border-radius:9999px; background:var(--colour-secondary); color:var(--colour-white); font-size:.78rem; margin-left:.4rem; }

/* FORMS / CARDS (shared across login, new-player, record-game) */
.form, .wrap, .login-card { max-width:760px; margin:2rem auto; padding:1rem; }
.card { padding:1rem; border:1px solid #2a2a2a; border-radius:.5rem; background:var(--colour-banner); }
.row { margin:.75rem 0; }
label { display:block; font-weight:600; margin-bottom:.25rem; }
input[type=text], input[type=password], input[type=number], input[type=date], select {
  width:100%; box-sizing:border-box; padding:.6rem .7rem; border:1px solid var(--colour-secondary);
  border-radius:8px; background:var(--colour-background); color:var(--colour-white);
}
button, .button {
  padding:.6rem .9rem; border:0; border-radius:9999px;
  background:var(--colour-secondary); color:var(--colour-white); font-weight:600; cursor:pointer;
}
button:hover, .button:hover { background:var(--colour-primary); }
.msg { margin-top:.75rem; }
.ok { color: #7dff7d; }
.err { color: #ff8a8a; }

/* record-game helpers */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.player-row { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
.player-row input[type=number]{ width:90px; }
.record-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 900px;
  margin: 1rem auto;
  padding: 0 1rem;
}
@media (min-width: 640px) {
  .record-grid { grid-template-columns: 1fr 1fr; }
}
.box {
  background: var(--colour-banner);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.box h3 { margin: 0 0 .75rem 0; }
.row { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.row .grow { flex: 1 1 auto; }
.small { font-size:.9rem; opacity:.85; }
.add-btn, .submit-btn {
  background: var(--colour-secondary);
  color: var(--colour-white);
  border: 0; border-radius: 9999px;
  padding: .45rem .9rem; cursor: pointer; font-weight: 600;
}
.add-btn:hover, .submit-btn:hover { background: var(--colour-primary); }
.error-inline { margin-top:.5rem; color:#ffd6d9; background:#5b1f27; border:1px solid #902d3a; border-radius:8px; padding:.5rem .6rem; }
#playedAt { max-width: 96ch; }
#score1, #score2 {
  width: 100%;
  max-width: 31ch;
}
@media (min-width: 640px) {
  .row.scores {
    display: grid;
    grid-template-columns: 110px 1fr 110px 1fr; /* label | input | label | input */
    column-gap: 1rem;
    align-items: center;
  }
}

/* mobile-friendly autocomplete dropdown */
.autocomplete-list{
  position:absolute; z-index:2000; background:var(--colour-background);
  border:1px solid var(--colour-secondary); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.4); max-height:250px; overflow:auto;
}
.autocomplete-item{ padding:.5rem .75rem; cursor:pointer; }
.autocomplete-item:hover, .autocomplete-item.active{ background:var(--colour-banner); }

/* simple table look */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:.5rem .6rem; border-bottom:1px solid #2a2a2a; text-align:left; }
.table thead th { font-weight:700; }

/* ensure charts have visible height */
.chart-wrap { position: relative; width: 100%; height: 220px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; display: block; }