/* mcserver-list.com - warm, bright, energetic. Panels are raised and saturated rather than
   near-black, so the page reads as lit-from-within instead of murky. */
:root{
  --ink:#241610;
  --panel:rgba(52,34,23,.965);       /* raised card */
  --panel2:rgba(72,47,31,.94);       /* tiles, rows */
  --panel3:rgba(96,63,41,.92);       /* hover / header */
  --line:#7a5232;
  --line2:#9c6a41;
  --text:#fff6ec;
  --dim:#e8cdb0;
  --faint:#bd9a78;
  --acc:#ff9126;                     /* primary orange */
  --acc2:#ffb44d;
  --hot:#ff5f4d;                     /* coral, for energy */
  --gold:#ffd24a;
  --green:#5ee08a;
  --red:#ff6b57;
  --grad:linear-gradient(100deg,#ff7a18,#ffb52e 55%,#ff5f4d);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text); min-height:100vh;
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--ink) url('/img/bg.jpg') center top / cover no-repeat fixed;
}
@media (max-width:900px){ body{ background-image:url('/img/bg-small.jpg'); background-attachment:scroll } }
/* Light warm scrim only - the backdrop should still read as a photo, and a warm tint keeps the
   whole page in the same colour family instead of greying it out. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(255,145,38,.30), transparent 70%),
    linear-gradient(180deg, rgba(36,22,16,.34) 0%, rgba(36,22,16,.42) 50%, rgba(36,22,16,.66) 100%);
}
a{color:var(--acc2); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- header ---------- */
.topbar{background:rgba(36,22,16,.80); backdrop-filter:blur(9px);
        border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.topbar .inner{max-width:1180px; margin:0 auto; padding:13px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.logo{
  font-family:ui-monospace,"Courier New",monospace; font-weight:800; font-size:24px; letter-spacing:1px;
  background:var(--grad); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 6s linear infinite; white-space:nowrap;
}
@keyframes shine{ to{ background-position:220% 0 } }
.topnav{display:flex; gap:16px; align-items:center; font-size:13.5px}
.topnav a{color:var(--dim); transition:color .18s, transform .18s}
.topnav a:hover{color:var(--acc2); text-decoration:none; transform:translateY(-1px)}
.searchwrap{margin-left:auto; display:flex; gap:8px}

input,select,textarea{
  background:rgba(36,22,16,.72); border:1px solid var(--line2); color:var(--text);
  border-radius:9px; padding:9px 12px; font:inherit; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--acc); box-shadow:0 0 0 3px rgba(255,145,38,.20); background:rgba(36,22,16,.9)}
input::placeholder,textarea::placeholder{color:var(--faint)}
button{
  background:var(--grad); background-size:200% 100%; color:#2b1405; border:0; border-radius:9px;
  padding:10px 16px; font:inherit; font-weight:800; cursor:pointer;
  transition:background-position .35s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(255,120,24,.28);
}
button:hover{background-position:100% 0; transform:translateY(-2px); box-shadow:0 8px 22px rgba(255,120,24,.40)}
button:active{transform:translateY(0)}
button.ghost{background:var(--panel2); color:var(--dim); border:1px solid var(--line2);
             font-weight:700; box-shadow:none}
button.ghost:hover{color:var(--text); border-color:var(--acc); background:var(--panel3);
                   transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.35)}
button.ghost.on{color:#2b1405; background:var(--grad); border-color:transparent;
                box-shadow:0 4px 14px rgba(255,120,24,.32)}
button:disabled{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}

/* ---------- layout ---------- */
.column{max-width:1080px; margin:0 auto; padding:0 16px 60px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(3px);
  margin-top:22px; overflow:hidden; animation:rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.card:nth-of-type(2){animation-delay:.09s}
@keyframes rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.card .pad{padding:28px}

.hero{text-align:center}
.hero h1{
  margin:0 0 10px; font-size:33px; letter-spacing:-.5px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{margin:0 auto; color:var(--dim); max-width:76ch; font-size:14px}

.stats{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.stat{
  background:var(--panel2); border:1px solid var(--line2); border-radius:12px;
  padding:14px 28px; min-width:158px; text-align:center; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.stat:hover{transform:translateY(-3px); border-color:var(--acc); box-shadow:0 10px 26px rgba(0,0,0,.4)}
.stat::after{content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .2s}
.stat:hover::after{opacity:.07}
.stat b{display:block; font-size:26px; color:var(--gold); letter-spacing:.5px;
        text-shadow:0 0 18px rgba(255,210,74,.35); font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint)}

.filterhint{text-align:center; color:var(--faint); font-size:12px; margin:22px 0 10px}
.sorts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.browse{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.browse .box{background:var(--panel2); border:1px solid var(--line2); border-radius:12px; padding:15px}
.browse h3{margin:0 0 11px; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--acc2)}
.chipfind{width:100%; margin-bottom:10px; padding:7px 11px; font-size:12.5px}
.chips{display:flex; gap:7px; flex-wrap:wrap; max-height:150px; overflow:auto; padding-right:4px}
.chips::-webkit-scrollbar{width:8px}
.chips::-webkit-scrollbar-thumb{background:var(--line2); border-radius:8px}
.chips::-webkit-scrollbar-track{background:transparent}
.chip .n{font-style:normal; margin-left:6px; font-size:10px; opacity:.65;
         font-variant-numeric:tabular-nums}
.chip.on .n{opacity:.8}
.chip{
  background:rgba(36,22,16,.55); border:1px solid var(--line2); color:var(--dim);
  border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer;
  transition:transform .15s, border-color .15s, color .15s, background .15s;
}
.chip:hover{border-color:var(--acc); color:var(--text); transform:translateY(-2px) scale(1.04)}
.chip.on{border-color:transparent; color:#2b1405; background:var(--grad); font-weight:700}
.refresh{display:flex; align-items:center; justify-content:flex-end; gap:7px;
         color:var(--faint); font-size:11.5px; margin:16px 2px 0}

/* ---------- table ---------- */
table.srv{width:100%; border-collapse:collapse; font-size:14px}
table.srv thead th{
  background:var(--panel3); color:var(--acc2); font-size:11.5px; letter-spacing:.8px;
  text-transform:uppercase; text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--line); font-weight:800;
}
table.srv td{padding:13px 14px; border-bottom:1px solid rgba(122,82,50,.55); vertical-align:middle}
table.srv tbody tr{
  position:relative; transition:background .18s;
  animation:fadein .4s ease both;
}
@keyframes fadein{ from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none} }
table.srv tbody tr:hover{background:rgba(255,145,38,.09)}
table.srv tbody tr::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); transform:scaleY(0); transform-origin:top; transition:transform .22s;
}
table.srv tbody tr:hover::before{transform:scaleY(1)}
.c-rank{width:88px; text-align:center}
.c-name{width:172px}
.c-players{width:112px; text-align:center}
.badge{
  display:inline-block; min-width:40px; padding:8px 10px; border-radius:9px;
  background:rgba(36,22,16,.85); border:1px solid var(--line2); color:var(--text);
  font-weight:800; font-size:16px; text-align:center; transition:transform .2s;
}
tr:hover .badge{transform:scale(1.08)}
.badge.gold{background:var(--grad); color:#2b1405; border-color:transparent;
            box-shadow:0 4px 14px rgba(255,120,24,.4)}
.badge.spon{background:linear-gradient(100deg,#b06bff,#7c3fd1); color:#fff; border-color:#c795ff;
            box-shadow:0 4px 14px rgba(150,80,240,.4)}
.sub{display:block; margin-top:5px; font-size:9.5px; letter-spacing:.9px; text-transform:uppercase; color:var(--faint)}
.sub.cross{color:var(--acc)}
.sname{font-weight:700; font-size:15px}
.sname a{color:var(--text); transition:color .15s}
.sname a:hover{color:var(--acc2); text-decoration:none}
.banner{display:block; width:100%; max-width:468px; height:auto; border-radius:7px;
        border:1px solid var(--line2); transition:transform .22s, box-shadow .22s}
tr:hover .banner{transform:scale(1.015); box-shadow:0 8px 22px rgba(0,0,0,.45)}
.bannerfallback{
  display:flex; align-items:center; gap:12px; height:62px;
  width:100%; max-width:468px; border-radius:7px; border:1px dashed var(--line2);
  color:var(--dim); font-size:12.5px; background:rgba(36,22,16,.45); padding:0 14px;
  overflow:hidden;
}
.bannerfallback span{
  flex:1; min-width:0; text-align:left; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.bannerfallback img{flex:0 0 auto}
.addr{margin-top:7px; font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--acc2);
      cursor:pointer; display:inline-block; transition:color .15s, transform .15s}
.addr:hover{color:var(--gold); transform:translateX(2px)}
.tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px}
.tag{background:rgba(36,22,16,.5); border:1px solid var(--line2); color:var(--faint);
     border-radius:999px; padding:1px 9px; font-size:10.5px}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-bottom:5px}
.dot.on{background:var(--green); box-shadow:0 0 0 0 rgba(94,224,138,.6); animation:pulse 2.2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(94,224,138,.55)}
  70%{box-shadow:0 0 0 8px rgba(94,224,138,0)}
  100%{box-shadow:0 0 0 0 rgba(94,224,138,0)}
}
.dot.off{background:var(--red)}
.pc{font-weight:800; font-size:14px; font-variant-numeric:tabular-nums}
.pc.off{color:var(--faint); font-weight:600}
.votecell{color:var(--gold); font-size:12px; font-weight:800; margin-top:3px}

.empty{padding:64px 20px; text-align:center; color:var(--faint)}
.pager{display:flex; gap:8px; justify-content:center; align-items:center; padding:18px; color:var(--faint)}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px}
.field label{font-size:13px; color:var(--acc2); font-weight:700}
.field .hint{font-size:12px; color:var(--faint)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row .field{flex:1; min-width:180px}
textarea{min-height:112px; resize:vertical; font-family:inherit}
.tagpick{display:flex; gap:8px; flex-wrap:wrap}
.tagpick label{background:rgba(36,22,16,.55); border:1px solid var(--line2); border-radius:999px;
               padding:6px 14px; font-size:12.5px; cursor:pointer; color:var(--dim);
               transition:transform .15s, border-color .15s, color .15s}
.tagpick label:hover{transform:translateY(-2px); border-color:var(--acc)}
.tagpick input{display:none}
.tagpick label:has(input:checked){border-color:transparent; color:#2b1405; background:var(--grad); font-weight:700}
.note{border-radius:10px; padding:13px 15px; font-size:14px; margin:12px 0; animation:rise .35s both}
.note.ok{background:rgba(94,224,138,.12); border:1px solid rgba(94,224,138,.4); color:#c9f5da}
.note.bad{background:rgba(255,107,87,.12); border:1px solid rgba(255,107,87,.4); color:#ffd0c8}
.note.info{background:rgba(255,145,38,.12); border:1px solid rgba(255,145,38,.38); color:#ffe0bd}
code.token{background:rgba(36,22,16,.9); border:1px solid var(--line2); border-radius:7px;
           padding:4px 10px; font-family:ui-monospace,Menlo,monospace; color:var(--gold); font-weight:700}
footer{color:var(--dim); font-size:12.5px; text-align:center; padding:28px 16px 54px;
       text-shadow:0 1px 4px rgba(0,0,0,.8)}

@media (max-width:820px){
  .browse{grid-template-columns:1fr}
  .c-name{display:none}
  .searchwrap{width:100%; margin-left:0}
  .searchwrap input{flex:1}
  .hero h1{font-size:25px}
}
/* Respect people who have asked their OS to stop moving things. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ---------- auth ---------- */
.authbox{display:flex; align-items:center}
.gbtn{
  display:flex; align-items:center; gap:9px; background:#fff; color:#3c4043;
  border:1px solid #dadce0; border-radius:9px; padding:8px 15px;
  font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .15s, box-shadow .2s;
}
.gbtn:hover{background:#fff; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.4)}
.gbtn .g{
  font-family:Georgia,serif; font-weight:800; font-size:16px; line-height:1;
  background:conic-gradient(from -45deg,#ea4335,#fbbc05,#34a853,#4285f4,#ea4335);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.who{display:flex; align-items:center; gap:10px; color:var(--dim); font-size:13.5px}
.who .av{width:28px; height:28px; border-radius:50%; border:1px solid var(--line2)}
button.tiny{padding:5px 11px; font-size:12px}
.mcname{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.mcname input{flex:1; min-width:160px}