:root{
  --bg: #0b0b0b;
  --muted: #9aa0a6;
  --accent: #ffffff;
  --card: #0f1113;
  --radius: 10px;
  --gap: 12px;
  --border: rgba(255,255,255,0.06);
  --muted-2: rgba(255,255,255,0.65);
  --input-bg: #0b0b0b;
  --backdrop: rgba(0,0,0,0.6);
}

/* background canvas (animated white dots) */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index: -1; /* sits behind all content */
  pointer-events: none; /* non-interactive */
  display:block;
  background: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02), transparent 10%),
              radial-gradient(circle at 90% 90%, rgba(255,255,255,0.01), transparent 10%); /* subtle texture under dots */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:980px;margin:28px auto;padding:0 16px}
/* larger logo, responsive */
#site-logo{height:140px;max-height:20vh;object-fit:contain}
.topbar{border-bottom:1px solid rgba(255,255,255,0.04);padding:18px 0}
.topbar h1{margin:0;font-size:20px}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}

.controls{display:flex;gap:10px;align-items:center;margin:18px 0}
.controls input[type="search"]{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--accent)}
.controls input[type="search"]::placeholder{color:var(--muted)}
.controls select{padding:10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--accent)}
.controls button{padding:10px 12px;border-radius:8px;border:0;background:var(--accent);color:var(--bg);cursor:pointer}

.server-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.server-card{background:var(--card);padding:0;border-radius:10px;border:1px solid var(--border);display:flex;flex-direction:column;gap:8px;box-shadow: 0 4px 18px rgba(0,0,0,0.6);overflow:hidden}
.cover{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
  background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.6));
}
.card-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.server-card h3{margin:0;font-size:16px;color:var(--accent);cursor:pointer}
.meta{font-size:13px;color:var(--muted)}

.card-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid rgba(255,255,255,0.02)}
.btn{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--accent);cursor:pointer}
.btn-primary{background:transparent;color:var(--bg);border:1px solid var(--accent);background:var(--accent)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent)}

/* Style the primary "View Servers" button: larger, blue, prominent */
.server-card button[data-action="view"]{
  padding:12px 16px;
  border-radius:10px;
  background:#1e6fff; /* blue */
  color:#fff;
  border:1px solid rgba(30,111,255,0.9);
  font-weight:600;
  box-shadow: 0 6px 18px rgba(30,111,255,0.12);
  transition:transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

/* Hover/active for desktop */
@media (hover: hover) and (pointer: fine) {
  .server-card button[data-action="view"]:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 28px rgba(30,111,255,0.18);
    filter:brightness(1.03);
  }
  .server-card button[data-action="view"]:active{
    transform: translateY(-1px) scale(0.995);
  }
}

.empty{text-align:center;color:var(--muted);padding:40px 0}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--backdrop);padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-sheet{width:100%;max-width:520px;background:#0d0d0d;padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6);position:relative;border:1px solid var(--border)}
.close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--muted)}
label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
input[type="text"],input[type="url"],textarea{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--input-bg);color:var(--accent)}
input[type="text"]::placeholder,input[type="url"]::placeholder,textarea::placeholder{color:var(--muted)}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

.footer{margin:26px auto;color:var(--muted);font-size:13px;text-align:center}

/* Game panel styles */
.game-panel{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);padding:24px;z-index:1100}
.game-panel[aria-hidden="false"]{display:flex}
.panel-sheet{width:100%;max-width:920px;background:#0d0d0d;padding:0;border-radius:12px;box-shadow:0 40px 80px rgba(0,0,0,0.75);position:relative;border:1px solid var(--border);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column}
.close-panel{position:absolute;right:12px;top:12px;border:0;background:transparent;font-size:26px;cursor:pointer;color:var(--muted);z-index:10}
.panel-header{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,0.03);align-items:center;text-align:center}
.panel-header img{width:100%;max-width:640px;height:auto;object-fit:cover;border-radius:10px}
.panel-header h3{margin:0;font-size:28px}
.panel-sub{color:var(--muted);font-size:14px}
.panel-list{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow:auto}
.panel-item{display:flex;justify-content:space-between;gap:8px;padding:12px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.02);align-items:center}
.panel-item .left{display:flex;flex-direction:column}
.panel-item .left .owner{font-size:13px;color:var(--muted)}
.panel-item .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

.link-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:1200}
.link-modal[aria-hidden="false"]{display:flex}
.link-sheet{width:100%;height:100%;max-width:1200px;max-height:90vh;background:transparent;border-radius:10px;position:relative;display:flex;flex-direction:column;overflow:hidden}
#link-iframe{width:100%;height:100%;border:0;border-radius:8px;background:#000}
#close-link-modal{position:absolute;right:10px;top:10px;z-index:10;border:0;background:rgba(0,0,0,0.45);color:var(--muted);padding:8px;border-radius:8px;cursor:pointer}

@media (max-width:520px){
  .controls{flex-direction:column;align-items:stretch}
  .row{flex-direction:column-reverse}
  .panel-sheet{max-width:100%;height:70%;border-radius:12px;align-self:flex-start;margin-top:6vh}
  .link-sheet{max-width:100%;max-height:100%;border-radius:0}
}

/* responsive */
@media (max-width:520px){
  .controls{flex-direction:column;align-items:stretch}
  .row{flex-direction:column-reverse}
  .panel-sheet{max-width:100%;height:70%;border-radius:12px;align-self:flex-start;margin-top:6vh}
  .link-sheet{max-width:100%;max-height:100%;border-radius:0}
}

/* Improve mobile server-list layout: allow full-width container and smaller card sizes */
@media (max-width:520px){
  .container{max-width:100%;margin:16px auto;padding:0 12px;}
  .server-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
  .server-card{min-width:0}
  .cover{height:92px}
  .server-card h3{font-size:15px}
  .card-body{padding:10px}
  /* Make the large game cover in the panel smaller on mobile so servers are visible */
  .panel-header img{max-width:100%;max-height:140px;object-fit:cover;border-radius:8px}
}

/* Hover animation for desktop / fine-pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .server-card{
    transition: transform 180ms cubic-bezier(.2,.9,.3,1), box-shadow 180ms cubic-bezier(.2,.9,.3,1);
    will-change: transform, box-shadow;
    transform-origin: center top;
  }
  .server-card:hover{
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.65);
  }

  /* Slight zoom on the cover image to give a polished effect */
  .server-card .cover{
    transition: transform 220ms cubic-bezier(.2,.9,.3,1);
    will-change: transform;
  }
  .server-card:hover .cover{
    transform: scale(1.04);
  }

  /* Make the View/Join button subtly lift on hover */
  .server-card .btn{
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
  }
  .server-card .btn:hover{
    transform: translateY(-3px);
  }
}