/* -------------------------------------------------------
   ROOT VARIABLES
------------------------------------------------------- */
:root {
  --nav-bg:#2a2f3d;
  --card-border:#d3d6de;
  --card-radius:12px;
  --dark-gray:#2a3040;

  /* Rainbow palette */
  --c1:#9bb8ff;
  --c2:#64b5ff;
  --c3:#63e6be;
  --c4:#ffe66d;
  --c5:#f6bd60;
  --c6:#f8961e;
  --c7:#f94144;

  --band: 28px;
}

/* -------------------------------------------------------
   GLOBAL + HEADER
------------------------------------------------------- */
body {
  font-family: monospace;
  background:#fff;
  color:#1a1a1a;
  margin:0;
}

header {
  background:var(--nav-bg);
  color:#e5e8f0;
  padding:10px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

header h1 {
  font-size:20px;
  letter-spacing:1px;
  margin:0;
}

header nav a {
  color:#e5e8f0;
  margin-left:24px;
  text-decoration:none;
}

header nav a:hover {
  text-decoration:underline;
}

/* -------------------------------------------------------
   SEARCH BAR
------------------------------------------------------- */
header form.search-bar {
  margin-left: 32px;
}

header form.search-bar input[type="text"] {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #555;
  font-size: 14px;
}

header form.search-bar input[type="submit"] {
  padding: 6px 12px;
  margin-left: 6px;
  border-radius: 6px;
  border: none;
  background: #4a90e2;
  color: #fff;
  cursor: pointer;
}

header form.search-bar input[type="submit"]:hover {
  background: #6ab0ff;
}

/* -------------------------------------------------------
   MAIN
------------------------------------------------------- */
main {
  margin:40px auto;
  max-width:1100px;
}

h2 {
  text-align:center;
  margin-bottom:20px;
  color:#111;
}

/* -------------------------------------------------------
   CARD GRID
------------------------------------------------------- */
table {
  border-collapse:separate;
  border-spacing:18px;
  margin:auto;
}

td {
  width:320px;
  height:190px;   /* larger for desc */
  background:var(--dark-gray);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}

/* Rainbow band */
.card-top {
  height:16px;
  image-rendering: pixelated;
  background-size:100% 100%;
  background-repeat:repeat;
}

/* 225° stripes */
.c1,.c2,.c4,.c5,.c7,.c8 {
  background:
    repeating-linear-gradient(225deg,
      var(--c1) 0 calc(var(--band)*1),
      var(--c2) calc(var(--band)*1) calc(var(--band)*2),
      var(--c3) calc(var(--band)*2) calc(var(--band)*3),
      var(--c4) calc(var(--band)*3) calc(var(--band)*4),
      var(--c5) calc(var(--band)*4) calc(var(--band)*5),
      var(--c6) calc(var(--band)*5) calc(var(--band)*6),
      var(--c7) calc(var(--band)*6) calc(var(--band)*7)
    );
}

/* 135° stripes */
.c3,.c6,.c9 {
  background:
    repeating-linear-gradient(135deg,
      var(--c1) 0 calc(var(--band)*1),
      var(--c2) calc(var(--band)*1) calc(var(--band)*2),
      var(--c3) calc(var(--band)*2) calc(var(--band)*3),
      var(--c4) calc(var(--band)*3) calc(var(--band)*4),
      var(--c5) calc(var(--band)*4) calc(var(--band)*5),
      var(--c6) calc(var(--band)*5) calc(var(--band)*6),
      var(--c7) calc(var(--band)*6) calc(var(--band)*7)
    );
}

/* Name row */
.card-mid {
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  background:var(--dark-gray);
}

.card-mid a {
  color:#8ec5ff;
  text-decoration:none;
}

.card-mid a:hover {
  text-decoration:underline;
}

/* Desc area (clamped) */
.card-desc {
  padding:6px 12px 0 12px;
  color:#cbd3e6;
  font-size:14px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:8;
  min-height: calc(1.25em * 8);
  overflow:hidden;
  background:var(--dark-gray);
}

/* Footer */
.card-bot {
  height:26px;
  border-top:1px solid var(--card-border);
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  color:#c0c6d4;
  font-size:14px;
  background:var(--dark-gray);
}

/* -------------------------------------------------------
   AUTHOR INDEX (5 COLUMNS FULL WIDTH, COLLAPSIBLE)
------------------------------------------------------- */

/* Wrapper containing button + grid */
#author-index-wrapper {
  margin:20px 0;
}

/* Collapsible button */
.toggle-index {
  background: #2a2f3d;
  color: #e5e8f0;
  border: 1px solid #4a4f60;
  padding: 6px 14px;
  margin: 10px 0 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.toggle-index:hover {
  background: #3b4256;
}

/* Index grid */
#author-index {
  display:grid;
  grid-template-columns:repeat(5, minmax(180px, 1fr));
  gap:20px 32px;
  width:100%;
  margin:20px 0 40px;
  padding:10px 5px;
}

/* Hidden state */
#author-index.collapsed {
  display:none;
}

/* Expanded state */
#author-index.expanded {
  display:grid;
}

/* Index block */
.index-block {
  padding: 8px 10px;
  border-radius: 6px;
  background: #f5f5f8;
  border: 1px solid #d3d6de;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Letter */
.index-letter {
  font-weight:bold;
  margin-bottom:6px;
  color:#2a2f3d;
  display:block;
}

/* Names list */
.index-names a {
  color:#2a3040;
  text-decoration:none;
  display:block;
  line-height:1.3;
}

.index-names a:hover {
  text-decoration:underline;
}

/* Responsive sizes */
@media (max-width: 900px) {
  #author-index {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  #author-index {
    grid-template-columns:repeat(1, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
footer {
  text-align:center;
  color:#444;
  font-size:14px;
  margin:40px 0 20px;
}

footer a {
  color:#0055cc;
  text-decoration:none;
}

footer a:hover {
  text-decoration:underline;
}

/* -------------------------------------------------------
   BACK TO TOP BUTTON
------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 6px 10px;
  background: #2a2f3d;
  color: #e5e8f0;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  z-index: 1000;
}

.back-to-top:hover {
  background:#3b4256;
}

/* -------------------------------------------------------
   LEADERBOARD TABLE (forces normal table, not card grid)
------------------------------------------------------- */
table.leaderboard-table {
  width: 80%;
  max-width: 700px;
  margin: 40px auto;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
}

table.leaderboard-table th,
table.leaderboard-table td {
  padding: 10px 12px !important;
  border: 1px solid #d3d6de !important;
  background: #fff !important;
  color: #1a1a1a !important;

  /* override the card-cell defaults */
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

table.leaderboard-table th {
  background: #f0f0f5 !important;
  font-weight: bold;
}

table.leaderboard-table a {
  color: #0055cc !important;
  text-decoration: none;
}

table.leaderboard-table a:hover {
  text-decoration: underline;
}

.share-bar {
  padding: 10px;
  background: #2a2f3d;
  color: #e5e8f0;
  font-family: monospace;
}
.share-bar a {
  margin-right: 12px;
  color: #9bb8ff;
}