@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
   --bg-main: #313338;
   --bg-surface: #2b2d31;
   --bg-surface-hover: #35373c;
   --bg-border: #1e1f22;

   --text-main: #f2f3f5;
   --text-muted: #b5bac1;

   --accent: #5865f2;
}

* {
   box-sizing: border-box;
   font-family: "Poppins", system-ui, sans-serif;
}

body {
   margin: 0;
   background: var(--bg-main);
   color: var(--text-main);
}

.container {
   max-width: 780px;
   margin: 40px auto;
   padding: 20px;
}

h1 {
   text-align: center;
   margin-bottom: 6px;
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -0.4px;
}

.subtitle {
   text-align: center;
   font-size: 14px;
   color: var(--text-muted);
   margin-bottom: 26px;
}

#search {
   width: 100%;
   padding: 10px 14px;
   border-radius: 8px;
   border: none;
   background: var(--bg-border);
   color: var(--text-main);
   margin-bottom: 18px;
}

#search::placeholder {
   color: var(--text-muted);
}

.rank-1 {
   border-left: 4px solid #f0b232;
}
.rank-2 {
   border-left: 4px solid #99aab5;
}
.rank-3 {
   border-left: 4px solid #c27c3d;
}

.loading .user {
   background: linear-gradient(
      90deg,
      var(--bg-surface) 25%,
      var(--bg-surface-hover) 37%,
      var(--bg-surface) 63%
   );
   background-size: 400% 100%;
   animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
   0% {
      background-position: 100% 0;
   }
   100% {
      background-position: 0 0;
   }
}

.user {
   background: var(--bg-surface);
   border-radius: 12px;
   padding: 14px 16px;
   margin-bottom: 10px;
   cursor: pointer;
   transition: background 0.15s ease, transform 0.15s ease;
}

.user:hover {
   background: var(--bg-surface-hover);
   transform: translateX(2px);
}

.user-header {
   display: flex;
   align-items: center;
   gap: 12px;
}

.rank {
   width: 26px;
   text-align: center;
   font-size: 13px;
   color: var(--text-muted);
}

.avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
}

.name {
   flex: 1;
   font-weight: 500;
}

.time {
   font-size: 13px;
   color: var(--text-muted);
}

.modal-overlay {
   backdrop-filter: blur(6px);
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
   opacity: 1;
   transition: opacity 0.25s ease;
}

.modal-overlay.hidden {
   opacity: 0;
   pointer-events: none;
}

.modal {
   background: var(--bg-surface);
   width: 100%;
   max-width: 520px;
   max-height: 80vh;
   border-radius: 12px;
   padding: 20px 22px;
   position: relative;
   overflow-y: auto;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);

   transform: translateY(8px) scale(0.96);
   opacity: 0;
   transition: all 0.25s ease;
}

.modal-overlay:not(.hidden) .modal {
   transform: translateY(0) scale(1);
   opacity: 1;
}

.modal button {
   position: absolute;
   top: 12px;
   right: 12px;
   background: none;
   border: none;
   color: var(--text-muted);
   font-size: 18px;
   cursor: pointer;
}

.modal button:hover {
   color: var(--text-main);
}

.modal h2 {
   margin: 0 0 10px;
   font-size: 18px;
   font-weight: 600;
   letter-spacing: -0.3px;
}

.modal p {
   margin: 6px 0;
   font-size: 14px;
}

.modal hr {
   border: none;
   border-top: 1px solid var(--bg-border);
   margin: 14px 0;
}

.modal .session {
   font-size: 13px;
   margin-bottom: 6px;
   color: var(--text-muted);
}

.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 14px;
   margin-top: 24px;
   font-size: 13px;
}

.pagination button {
   background: var(--bg-border);
   border: none;
   color: var(--text-main);
   padding: 8px 14px;
   border-radius: 8px;
   cursor: pointer;
}

.pagination button:hover:not(:disabled) {
   background: var(--bg-surface-hover);
}

.pagination button:disabled {
   opacity: 0.4;
   cursor: default;
}

/* ini namanya responsif */
@media (max-width: 480px) {
   .container {
      margin: 20px auto;
      padding: 14px;
   }

   h1 {
      font-size: 20px;
   }

   .avatar {
      width: 36px;
      height: 36px;
   }

   .modal {
      width: calc(100% - 32px);
      max-height: 85vh;
   }
}