/* Scrollbar */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:#333}
::-webkit-scrollbar-track{background:#000}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  cursor:crosshair;
  user-select:none;
}

html,body{
  height:100%;
  font-family:"Courier New",monospace;
  background:#000;
  color:#f2f2f2;
}

/* Background */
body{
  background:url("animeboy.jpg") center/cover no-repeat fixed;
}

body::after{
  content:"";
  position:fixed;inset:0;
  background:rgba(0,0,0,0.65);
  z-index:-1;
}

/* Header */
.top{text-align:center;padding:40px 0 20px}
.title{
  font-family: "Courier New", monospace;
  font-size:22px;
  letter-spacing:8px;
  font-weight:700;
  text-transform:uppercase;
  color:#f2f2f2;
  text-shadow:1px 1px #000;
  display:inline-block;
}
.subtitle{
  font-size:10px;
  letter-spacing:2px;
  opacity:0.3;
  margin-top:4px;
  text-transform:uppercase;
}

/* Layout */
.layout{padding:40px 50px}
.rosterGrid{display:grid;grid-template-columns:repeat(2,70px);gap:25px 20px}

/* Tiles */
.tile{text-align:center;transition:.15s}
.tile:hover{transform:scale(1.03)}

.pfp{width:60px;height:60px;background:#000 center/cover no-repeat;border:1px solid #222;filter:grayscale(100%) contrast(1.1)}
.name{margin-top:6px;font-size:9px;letter-spacing:2px;opacity:.75}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.modal.open{display:flex}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.95)}

.card{position:relative;width:320px;background:#050505;border:1px solid #111;box-shadow:0 0 50px #000}
.cardTop{text-align:center;padding:22px}

.pfpBig{width:82px;height:82px;margin:0 auto 16px;border:1px solid #333;background:center/cover no-repeat}
.cardName{font-size:14px;letter-spacing:5px;margin-bottom:14px}
.cardStatus{font-size:12px;line-height:1.5;border:1px solid #222;padding:12px;text-align:left}
.cardStatus span::after{content:"█";margin-left:4px;animation:blink 1s infinite}

@keyframes blink{50%{opacity:0}}

/* Buttons (pill) */
.cardActions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #111}
.pill{
  padding:16px;
  text-align:center;
  font-size:9px;
  letter-spacing:2px;
  color:#aaa;
  text-decoration:none;
  border-radius:0; /* <-- ensures rectangular buttons */
}
.pill:hover{background:#fff;color:#000}

.close{position:absolute;top:10px;right:12px;background:none;border:none;color:#666;font-size:14px}
.close:hover{color:#fff}

/* Flicker and right-click flash */
.flicker{filter:brightness(.8)}
.logged::before{content:"access logged";position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:3px;opacity:.8}