/* EotL Replays — End of the Line palette
   indigo #230363  violet #4C007C  rust #DC7F2E  orange #FFC25F  lemon #FFEA7B
   Edit the variables below to restyle the whole site. */
:root{
  --indigo:#230363; --violet:#4C007C; --rust:#DC7F2E; --orange:#FFC25F; --lemon:#FFEA7B;
  --text:#FFF4DE; --muted:rgba(255,244,222,.65);
  --bg-deep:#12013a; --card:rgba(35,3,99,.88); --row-alt:rgba(255,255,255,.035);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
html{ background:var(--bg-deep); }
body{
  margin:0; color:var(--text); font:15px/1.5 var(--font);
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(76,0,124,.55), rgba(0,0,0,0) 62%),
    linear-gradient(to bottom, var(--indigo) 0%, #1a0250 50%, var(--bg-deep) 100%);
  background-attachment:fixed; min-height:100vh;
}
a{ color:var(--orange); text-decoration:none; }
a:hover{ color:var(--lemon); }
.inner{ max-width:1180px; margin:0 auto; padding:0 16px; }

/* Header: desert-sunset banner with the full EOTL logo */
.top{ background:var(--indigo) url('eotl-banner.jpg') center bottom / cover no-repeat; border-bottom:2px solid var(--rust); }
.top .inner{ display:flex; align-items:center; gap:40px; height:140px; }
.brand{ display:block; width:300px; height:128px; flex:none;
  background:url('eotl-logo-full.png') left center / contain no-repeat;
  filter:drop-shadow(0 4px 10px rgba(10,0,30,.55)); }
nav{ display:flex; gap:26px; }
nav a{ color:rgba(255,244,222,.92); font-weight:700; letter-spacing:.5px; text-shadow:0 1px 3px rgba(10,0,30,.85); padding-bottom:4px; }
nav a.active{ color:var(--lemon); border-bottom:3px solid var(--lemon); }

.sub{ background:linear-gradient(to bottom, var(--violet), #3a0062); }
.sub .inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:10px; padding-bottom:10px; }
.count{ color:var(--muted); font-size:13px; }
#q{ width:300px; max-width:100%; padding:8px 12px; border-radius:8px; color:var(--text);
  background:rgba(18,1,58,.55); border:1px solid rgba(255,194,95,.25); font:inherit; }
#q:focus{ outline:none; border-color:rgba(255,194,95,.85); }
#q::placeholder{ color:rgba(255,244,222,.55); }

main{ padding-top:8px; padding-bottom:30px; }
h2{ font-size:16px; font-weight:600; margin:22px 0 10px; padding:8px 12px; border-radius:10px;
  background:linear-gradient(90deg, #5a0a92 0%, rgba(76,0,124,.85) 40%, rgba(76,0,124,.25) 100%);
  border-left:4px solid var(--rust); }
table{ width:100%; table-layout:fixed; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 52px rgba(10,0,30,.55); }
th{ text-align:left; font-size:13px; color:var(--lemon); padding:10px 12px;
  background:linear-gradient(to bottom, var(--violet), #3c0066); border-bottom:2px solid var(--rust); }
td{ padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:middle; }
tbody tr:nth-child(even) td{ background:var(--row-alt); }
tbody tr:hover td{ background:rgba(220,127,46,.18); }
td.map a{ font-weight:600; }
th:nth-child(1){ width:22%; } th:nth-child(2){ width:17%; } th:nth-child(3){ width:11%; } th:nth-child(4){ width:9%; }
td{ overflow:hidden; text-overflow:ellipsis; }
.ago{ color:var(--muted); font-size:13px; margin-left:6px; }
.hl .award{ display:inline-block; font-size:12px; font-weight:700; color:var(--indigo);
  background:linear-gradient(to bottom, var(--orange), var(--rust)); padding:1px 8px; border-radius:20px; margin-right:6px; }
.hl .stat{ color:var(--muted); font-size:13px; margin-left:4px; }
.empty, .none{ color:var(--muted); text-align:center; padding:40px 0; }
footer{ color:var(--muted); font-size:13px; padding-top:10px; padding-bottom:30px; border-top:1px solid rgba(220,127,46,.4); }

/* Phones: compact badge, stacked rows */
@media (max-width:760px){
  .top .inner{ height:96px; gap:16px; }
  .brand{ width:84px; height:84px; background-image:url('eotl-logo.png'); }
  nav{ gap:14px; font-size:14px; }
  .sub .inner{ flex-direction:column; align-items:stretch; }
  #q{ width:100%; }
  thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; table-layout:auto; }
  tr{ border-bottom:2px solid rgba(220,127,46,.35); padding:6px 0; }
  td{ border:0; padding:3px 12px; display:flex; gap:10px; }
  td::before{ content:attr(data-label); flex:none; width:82px; color:var(--muted); font-size:12px; padding-top:2px; }
  td.hl{ flex-wrap:wrap; }
}