/* =========================================================
   PKKMB 2026
   GAMIFICATION LEADERBOARD
   ========================================================= */


/* =========================================================
   ROOT & VARIABLES
   ========================================================= */

:root {

  --primary:
    #0b2347;

  --primary-dark:
    #071a36;

  --primary-light:
    #12396f;

  --secondary:
    #1769aa;

  --secondary-light:
    #eaf4ff;

  --accent:
    #f5b82e;

  --accent-soft:
    #fff7df;

  --success:
    #17834b;

  --success-soft:
    #eaf8f0;

  --danger:
    #c93c3c;

  --text:
    #172033;

  --text-soft:
    #667085;

  --text-muted:
    #98a2b3;

  --border:
    #e6eaf0;

  --border-dark:
    #d8dee8;

  --surface:
    #ffffff;

  --surface-soft:
    #f7f9fc;

  --surface-blue:
    #f2f7fc;

  --background:
    #f4f7fb;

  --shadow-sm:
    0 8px 24px rgba(15, 35, 65, 0.06);

  --shadow-md:
    0 18px 45px rgba(15, 35, 65, 0.09);

  --shadow-lg:
    0 28px 80px rgba(7, 26, 54, 0.16);

  --radius-sm:
    12px;

  --radius-md:
    18px;

  --radius-lg:
    26px;

  --container:
    1180px;

}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

}


body {

  margin:
    0;

  min-width:
    320px;

  overflow-x:
    hidden;

  background:
    var(--background);

  color:
    var(--text);

  font-family:
    "DM Sans",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


button,
input,
select {

  font:
    inherit;

}


button {

  border:
    none;

}


button,
select {

  cursor:
    pointer;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


img {

  display:
    block;

  max-width:
    100%;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {

  width:
    min(
      calc(100% - 40px),
      var(--container)
    );

  margin:
    0 auto;

}


/* =========================================================
   PAGE LOADER
   ========================================================= */

.page-loader {

  position:
    fixed;

  z-index:
    9999;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--primary);

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;

}


.page-loader.is-hidden {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

}


.loader-content {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    18px;

  color:
    #ffffff;

}


.loader-content p {

  margin:
    0;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    0.02em;

  opacity:
    0.8;

}


.loader-mark {

  position:
    relative;

  width:
    62px;

  height:
    62px;

  border:
    4px solid
    rgba(255, 255, 255, 0.18);

  border-top-color:
    var(--accent);

  border-radius:
    50%;

  animation:
    loaderSpin 0.9s linear infinite;

}


.loader-mark span {

  position:
    absolute;

  inset:
    12px;

  border:
    2px solid
    rgba(255, 255, 255, 0.35);

  border-radius:
    50%;

}


@keyframes loaderSpin {

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.background-shape {

  position:
    fixed;

  z-index:
    -1;

  border-radius:
    50%;

  pointer-events:
    none;

  filter:
    blur(70px);

  opacity:
    0.28;

}


.shape-one {

  width:
    350px;

  height:
    350px;

  top:
    180px;

  left:
    -180px;

  background:
    #a9cbed;

}


.shape-two {

  width:
    400px;

  height:
    400px;

  right:
    -200px;

  top:
    550px;

  background:
    #d7e8f9;

}


/* =========================================================
   SITE WRAPPER
   ========================================================= */

.site-wrapper {

  position:
    relative;

  min-height:
    100vh;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position:
    relative;

  z-index:
    50;

  background:
    rgba(255, 255, 255, 0.92);

  border-bottom:
    1px solid
    rgba(230, 234, 240, 0.85);

  backdrop-filter:
    blur(12px);

}


.header-container {

  min-height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}


/* =========================================================
   BRAND LOGOS
   ========================================================= */

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  width: auto;
  min-width: 0;
  height: 58px;

  padding: 5px 7px;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;

  box-shadow:
    0 8px 20px rgba(11, 35, 71, 0.08);

  flex-shrink: 0;
}


/* LOGO */

.brand-mark img {
  width: 44px;
  height: 44px;

  object-fit: contain;
  object-position: center;

  display: block;
}


/* Logo YPSA JPG */

.brand-mark img[src$="YPSA.jpg"] {
  border-radius: 6px;
}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.brand-text {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.brand-text strong {
  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size: 14px;
  font-weight: 800;

  color: var(--primary);

  white-space: nowrap;
}


.brand-text span {
  max-width: 260px;

  overflow: hidden;

  color: var(--text-soft);

  font-size: 12px;
  font-weight: 500;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.brand-mark {

  position:
    relative;

  width:
    56px;

  min-width:
    56px;

  height:
    56px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  line-height:
    1;

  color:
    #ffffff;

  background:
    linear-gradient(
      145deg,
      var(--primary-light),
      var(--primary)
    );

  border-radius:
    16px;

  box-shadow:
    0 10px 24px
    rgba(11, 35, 71, 0.2);

}


.brand-mark span {

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

}


.brand-mark small {

  display:
    block;

  margin-top:
    3px;

  font-size:
    9px;

  font-weight:
    700;

  color:
    rgba(255, 255, 255, 0.75);

  letter-spacing:
    0.08em;

}


.brand-text {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.brand-text strong {

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    14px;

  font-weight:
    800;

  color:
    var(--primary);

  white-space:
    nowrap;

}


.brand-text span {

  max-width:
    260px;

  overflow:
    hidden;

  color:
    var(--text-soft);

  font-size:
    12px;

  font-weight:
    500;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   LIVE STATUS
   ========================================================= */

.live-status {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 14px;

  color:
    var(--success);

  background:
    var(--success-soft);

  border:
    1px solid
    rgba(23, 131, 75, 0.1);

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    700;

}


.live-dot {

  position:
    relative;

  width:
    8px;

  height:
    8px;

  flex:
    0 0 8px;

  background:
    var(--success);

  border-radius:
    50%;

}


.live-dot::after {

  content:
    "";

  position:
    absolute;

  inset:
    -4px;

  border:
    1px solid
    rgba(23, 131, 75, 0.45);

  border-radius:
    inherit;

  animation:
    livePulse 1.8s ease-out infinite;

}


@keyframes livePulse {

  0% {

    transform:
      scale(0.7);

    opacity:
      1;

  }

  100% {

    transform:
      scale(1.8);

    opacity:
      0;

  }

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  position:
    relative;

  overflow:
    hidden;

  padding:
    76px 0 58px;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #071a36 0%,
      #0b2347 45%,
      #12396f 100%
    );

}


.hero::before {

  content:
    "";

  position:
    absolute;

  width:
    520px;

  height:
    520px;

  right:
    -180px;

  top:
    -300px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    50%;

}


.hero::after {

  content:
    "";

  position:
    absolute;

  width:
    380px;

  height:
    380px;

  left:
    -220px;

  bottom:
    -260px;

  border:
    70px solid
    rgba(255, 255, 255, 0.025);

  border-radius:
    50%;

}


.hero-container {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    300px;

  align-items:
    center;

  gap:
    70px;

}


.hero-content {

  max-width:
    700px;

}


.hero-eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    18px;

  color:
    rgba(255, 255, 255, 0.65);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

}


.eyebrow-line {

  width:
    28px;

  height:
    2px;

  background:
    var(--accent);

  border-radius:
    99px;

}


.hero h1 {

  max-width:
    760px;

  margin:
    0;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    clamp(
      34px,
      5vw,
      60px
    );

  font-weight:
    800;

  line-height:
    1.12;

  letter-spacing:
    -0.045em;

}


.hero h1 span {

  display:
    block;

  color:
    #9fc8ff;

}


.hero-description {

  max-width:
    650px;

  margin:
    24px 0 0;

  color:
    rgba(255, 255, 255, 0.7);

  font-size:
    16px;

  line-height:
    1.75;

}


.hero-meta {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    16px;

  margin-top:
    30px;

}


.hero-meta-item {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(255, 255, 255, 0.82);

  font-size:
    13px;

  font-weight:
    600;

}


.hero-meta-item i {

  color:
    var(--accent);

}


.hero-meta-divider {

  width:
    1px;

  height:
    18px;

  background:
    rgba(255, 255, 255, 0.2);

}


/* =========================================================
   HERO STATUS CARD
   ========================================================= */

.hero-status-card {

  padding:
    22px;

  background:
    rgba(255, 255, 255, 0.08);

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius:
    var(--radius-lg);

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.12);

  backdrop-filter:
    blur(10px);

}


.status-card-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

}


.status-card-label {

  color:
    rgba(255, 255, 255, 0.52);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

}


.status-indicator {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #8ee9b3;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

}


.status-indicator span {

  width:
    6px;

  height:
    6px;

  background:
    #6be19a;

  border-radius:
    50%;

}


.status-card-main {

  padding:
    28px 0;

}


.status-value {

  overflow:
    hidden;

  color:
    #ffffff;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    22px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.status-caption {

  margin-top:
    7px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size:
    12px;

}


.status-card-footer {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding-top:
    17px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    11px;

  line-height:
    1.5;

}


.status-card-footer i {

  color:
    #9fc8ff;

}


/* =========================================================
   STATISTICS
   ========================================================= */

.statistics-section {

  position:
    relative;

  z-index:
    5;

  margin-top:
    -26px;

}


.statistics-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px;

}


.stat-card {

  min-height:
    116px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  padding:
    20px 22px;

  background:
    rgba(255, 255, 255, 0.97);

  border:
    1px solid
    rgba(255, 255, 255, 0.8);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.stat-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow-md);

}


.stat-icon {

  width:
    48px;

  height:
    48px;

  flex:
    0 0 48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border-radius:
    14px;

  font-size:
    18px;

}


.stat-content {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.stat-label {

  color:
    var(--text-soft);

  font-size:
    12px;

  font-weight:
    600;

}


.stat-value {

  overflow:
    hidden;

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    25px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.podium-section {

  padding:
    92px 0 42px;

}


.leaderboard-section {

  padding:
    42px 0 28px;

}


.realtime-section {

  padding:
    28px 0 70px;

}


.section-heading {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    38px;

}


.section-kicker {

  display:
    inline-block;

  margin-bottom:
    8px;

  color:
    var(--secondary);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

}


.section-heading h2,
.leaderboard-header h2 {

  margin:
    0;

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    clamp(
      26px,
      3vw,
      34px
    );

  font-weight:
    800;

  letter-spacing:
    -0.035em;

}


.section-heading p {

  max-width:
    350px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    14px;

  line-height:
    1.6;

}


/* =========================================================
   PODIUM
   ========================================================= */

.podium {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  align-items:
    end;

  gap:
    22px;

  max-width:
    1000px;

  margin:
    0 auto;

}


.podium-card {

  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    24px 24px 18px 18px;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.podium-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow-md);

}


.podium-first {

  min-height:
    400px;

  padding-top:
    45px;

  border:
    1px solid
    rgba(245, 184, 46, 0.35);

}


.podium-second {

  min-height:
    355px;

  padding-top:
    32px;

}


.podium-third {

  min-height:
    330px;

  padding-top:
    32px;

}


/* =========================================================
   PODIUM POSITION
   ========================================================= */

.podium-position {

  position:
    absolute;

  top:
    16px;

  left:
    16px;

  width:
    32px;

  height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--primary);

  background:
    var(--surface-blue);

  border-radius:
    10px;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    13px;

  font-weight:
    800;

}


.podium-first .podium-position {

  color:
    #8a6200;

  background:
    var(--accent-soft);

}


.podium-crown {

  position:
    absolute;

  top:
    17px;

  right:
    17px;

  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #c99000;

  background:
    var(--accent-soft);

  border-radius:
    10px;

  font-size:
    15px;

}


/* =========================================================
   PODIUM AVATAR
   ========================================================= */

.podium-avatar {

  width:
    86px;

  height:
    86px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    18px;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border:
    4px solid
    #ffffff;

  border-radius:
    50%;

  box-shadow:
    0 10px 25px
    rgba(11, 35, 71, 0.08);

}


.podium-first .podium-avatar {

  width:
    98px;

  height:
    98px;

  color:
    #8a6200;

  background:
    var(--accent-soft);

}


.podium-initial {

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    29px;

  font-weight:
    800;

}


.podium-first .podium-initial {

  font-size:
    34px;

}


/* =========================================================
   PODIUM INFO
   ========================================================= */

.podium-info {

  width:
    100%;

  padding:
    0 22px;

}


.podium-info h3 {

  overflow:
    hidden;

  margin:
    0;

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    16px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.podium-info p {

  overflow:
    hidden;

  margin:
    7px 0 0;

  color:
    var(--text-soft);

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.podium-info > span {

  display:
    inline-flex;

  margin-top:
    15px;

  padding:
    8px 13px;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    800;

}


.podium-first .podium-info > span {

  color:
    #8a6200;

  background:
    var(--accent-soft);

}


/* =========================================================
   PODIUM BASE
   ========================================================= */

.podium-base {

  width:
    100%;

  margin-top:
    auto;

  padding:
    16px 10px;

  color:
    var(--text-soft);

  background:
    var(--surface-soft);

  border-top:
    1px solid
    var(--border);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.podium-first .podium-base {

  color:
    #8a6200;

  background:
    #fffaf0;

}


/* =========================================================
   LEADERBOARD PANEL
   ========================================================= */

.leaderboard-panel {

  overflow:
    hidden;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-sm);

}


.leaderboard-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    30px 32px 24px;

  border-bottom:
    1px solid
    var(--border);

}


.leaderboard-count {

  flex:
    0 0 auto;

  padding:
    9px 13px;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    700;

}


/* =========================================================
   LEADERBOARD CONTROLS
   ========================================================= */

.leaderboard-controls {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    20px 32px;

  background:
    #fbfcfe;

  border-bottom:
    1px solid
    var(--border);

}


.search-box {

  position:
    relative;

  width:
    min(
      100%,
      400px
    );

}


.search-box > i {

  position:
    absolute;

  top:
    50%;

  left:
    15px;

  transform:
    translateY(-50%);

  color:
    var(--text-muted);

  font-size:
    14px;

  pointer-events:
    none;

}


.search-box input {

  width:
    100%;

  height:
    46px;

  padding:
    0 45px 0 42px;

  outline:
    none;

  color:
    var(--text);

  background:
    #ffffff;

  border:
    1px solid
    var(--border-dark);

  border-radius:
    13px;

  font-size:
    13px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.search-box input::placeholder {

  color:
    var(--text-muted);

}


.search-box input:focus {

  border-color:
    rgba(23, 105, 170, 0.65);

  box-shadow:
    0 0 0 4px
    rgba(23, 105, 170, 0.08);

}


.search-clear {

  position:
    absolute;

  top:
    50%;

  right:
    8px;

  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transform:
    translateY(-50%);

  color:
    var(--text-soft);

  background:
    transparent;

  border-radius:
    8px;

}


.search-clear:hover {

  color:
    var(--primary);

  background:
    var(--surface-soft);

}


.filter-group {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.select-wrapper {

  position:
    relative;

  min-width:
    175px;

}


.select-wrapper > i {

  position:
    absolute;

  z-index:
    2;

  top:
    50%;

  left:
    13px;

  transform:
    translateY(-50%);

  color:
    var(--text-muted);

  font-size:
    12px;

  pointer-events:
    none;

}


.select-wrapper select {

  width:
    100%;

  height:
    46px;

  padding:
    0 35px 0 37px;

  outline:
    none;

  color:
    var(--text-soft);

  background:
    #ffffff;

  border:
    1px solid
    var(--border-dark);

  border-radius:
    13px;

  font-size:
    12px;

  appearance:
    auto;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.select-wrapper select:focus {

  border-color:
    rgba(23, 105, 170, 0.65);

  box-shadow:
    0 0 0 4px
    rgba(23, 105, 170, 0.08);

}


/* =========================================================
   TABLE
   ========================================================= */

.table-wrapper {

  width:
    100%;

  overflow-x:
    auto;

  -webkit-overflow-scrolling:
    touch;

}


.leaderboard-table {

  width:
    100%;

  min-width:
    780px;

  border-collapse:
    collapse;

}


.leaderboard-table thead {

  background:
    #fbfcfe;

}


.leaderboard-table th {

  padding:
    15px 20px;

  color:
    var(--text-muted);

  border-bottom:
    1px solid
    var(--border);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;

}


.leaderboard-table td {

  padding:
    17px 20px;

  border-bottom:
    1px solid
    #edf0f4;

  vertical-align:
    middle;

}


.leaderboard-table tbody tr:not(.empty-row) {

  transition:
    background 0.2s ease;

}


.leaderboard-table tbody tr:not(.empty-row):hover {

  background:
    #fafcff;

}


.leaderboard-table tbody tr:last-child td {

  border-bottom:
    none;

}


.col-rank {

  width:
    90px;

}


.col-group {

  width:
    130px;

}


.col-points {

  width:
    150px;

}


.col-detail {

  width:
    100px;

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-row td {

  padding:
    0;

}


.empty-state {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    370px;

  padding:
    50px 24px;

  text-align:
    center;

}


.empty-state-icon {

  width:
    70px;

  height:
    70px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    20px;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border-radius:
    22px;

  font-size:
    27px;

}


.empty-state h3 {

  margin:
    0;

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    19px;

  font-weight:
    800;

}


.empty-state p {

  max-width:
    440px;

  margin:
    10px 0 0;

  color:
    var(--text-soft);

  font-size:
    14px;

  line-height:
    1.7;

}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  padding:
    22px 30px;

  border-top:
    1px solid
    var(--border);

}


.pagination-button {

  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--primary);

  background:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


.pagination-button:hover:not(:disabled) {

  color:
    #ffffff;

  background:
    var(--primary);

}


.pagination-button:disabled {

  opacity:
    0.4;

  cursor:
    not-allowed;

}


.pagination-info {

  min-width:
    90px;

  color:
    var(--text-soft);

  font-size:
    12px;

  font-weight:
    700;

  text-align:
    center;

}


/* =========================================================
   REALTIME CARD
   ========================================================= */

.realtime-card {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  padding:
    19px 22px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #ffffff
    );

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

}


.realtime-card-icon {

  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border-radius:
    14px;

}


.realtime-card-content {

  min-width:
    0;

  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  gap:
    4px;

}


.realtime-card-content strong {

  color:
    var(--primary);

  font-size:
    13px;

  font-weight:
    800;

}


.realtime-card-content span {

  color:
    var(--text-soft);

  font-size:
    12px;

  line-height:
    1.5;

}


.manual-refresh {

  min-height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    0 17px;

  color:
    #ffffff;

  background:
    var(--primary);

  border-radius:
    11px;

  font-size:
    12px;

  font-weight:
    700;

  transition:
    transform 0.2s ease,
    background 0.2s ease;

}


.manual-refresh:hover {

  background:
    var(--primary-light);

  transform:
    translateY(-1px);

}


.manual-refresh:active {

  transform:
    translateY(0);

}


.manual-refresh i {

  font-size:
    12px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  padding:
    32px 0;

  background:
    #ffffff;

  border-top:
    1px solid
    var(--border);

}


.footer-container {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

}


.footer-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.brand-mark.small {

  width:
    42px;

  min-width:
    42px;

  height:
    42px;

  border-radius:
    12px;

}


.brand-mark.small span {

  font-size:
    8px;

}


.brand-mark.small small {

  margin-top:
    2px;

  font-size:
    7px;

}


.footer-brand > div:last-child {

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.footer-brand strong {

  color:
    var(--primary);

  font-size:
    12px;

  font-weight:
    800;

}


.footer-brand span {

  color:
    var(--text-muted);

  font-size:
    10px;

}


.footer-info {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--text-muted);

  font-size:
    11px;

}


/* =========================================================
   MODAL
   ========================================================= */

.modal {

  position:
    fixed;

  z-index:
    1000;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

}


.modal.is-open {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

}


.modal-backdrop {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(7, 26, 54, 0.68);

  backdrop-filter:
    blur(4px);

}


.modal-dialog {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      100%,
      580px
    );

  max-height:
    calc(100vh - 40px);

  overflow-y:
    auto;

  padding:
    32px;

  background:
    #ffffff;

  border-radius:
    26px;

  box-shadow:
    var(--shadow-lg);

  transform:
    translateY(20px)
    scale(0.98);

  transition:
    transform 0.25s ease;

}


.modal.is-open .modal-dialog {

  transform:
    translateY(0)
    scale(1);

}


.modal-close {

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--text-soft);

  background:
    var(--surface-soft);

  border-radius:
    11px;

  font-size:
    16px;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


.modal-close:hover {

  color:
    var(--primary);

  background:
    #edf1f6;

}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.modal-header {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  padding-right:
    45px;

}


.modal-avatar {

  width:
    66px;

  height:
    66px;

  flex:
    0 0 66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--secondary);

  background:
    var(--secondary-light);

  border-radius:
    20px;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    24px;

  font-weight:
    800;

}


.modal-title-group {

  min-width:
    0;

}


.modal-rank {

  display:
    inline-block;

  margin-bottom:
    6px;

  color:
    var(--secondary);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.modal-title-group h2 {

  overflow:
    hidden;

  margin:
    0;

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    21px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.modal-title-group p {

  overflow:
    hidden;

  margin:
    5px 0 0;

  color:
    var(--text-soft);

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   MODAL TOTAL POINT
   ========================================================= */

.modal-total-points {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    28px;

  padding:
    22px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-light)
    );

  border-radius:
    18px;

}


.modal-total-points span {

  color:
    rgba(255, 255, 255, 0.6);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.modal-total-points strong {

  color:
    #ffffff;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    34px;

  font-weight:
    800;

}


/* =========================================================
   POINT SECTION
   ========================================================= */

.modal-point-sections {

  display:
    grid;

  gap:
    24px;

  margin-top:
    28px;

}


.point-section h3 {

  margin:
    0 0 12px;

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    15px;

  font-weight:
    800;

}


.point-list {

  display:
    grid;

  gap:
    8px;

}


.point-item {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    14px 16px;

  background:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

}


.point-item span {

  color:
    var(--text-soft);

  font-size:
    12px;

}


.point-item strong {

  color:
    var(--secondary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    13px;

  font-weight:
    800;

}


/* =========================================================
   EVALUATION GRID
   ========================================================= */

.evaluation-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    9px;

}


.evaluation-item {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    74px;

  background:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    13px;

}


.evaluation-item span {

  color:
    var(--text-muted);

  font-size:
    10px;

  font-weight:
    700;

}


.evaluation-item strong {

  color:
    var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    16px;

  font-weight:
    800;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.table-wrapper::-webkit-scrollbar,
.modal-dialog::-webkit-scrollbar {

  width:
    7px;

  height:
    7px;

}


.table-wrapper::-webkit-scrollbar-thumb,
.modal-dialog::-webkit-scrollbar-thumb {

  background:
    #ccd5e1;

  border-radius:
    99px;

}


.table-wrapper::-webkit-scrollbar-track,
.modal-dialog::-webkit-scrollbar-track {

  background:
    transparent;

}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes fadeUp {

  from {

    opacity:
      0;

    transform:
      translateY(14px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


.stat-card,
.podium-card,
.leaderboard-panel,
.realtime-card {

  animation:
    fadeUp 0.5s ease both;

}


.podium-card:nth-child(1) {

  animation-delay:
    0.05s;

}


.podium-card:nth-child(2) {

  animation-delay:
    0.1s;

}


.podium-card:nth-child(3) {

  animation-delay:
    0.15s;

}


/* =========================================================
   RESPONSIVE
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .hero-container {

    grid-template-columns:
      1fr;

    gap:
      38px;

  }


  .hero-status-card {

    width:
      min(
        100%,
        500px
      );

  }


  .leaderboard-controls {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .search-box {

    width:
      100%;

  }


  .filter-group {

    width:
      100%;

  }


  .select-wrapper {

    flex:
      1;

  }

}


/* =========================================================
   RESPONSIVE
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .container {

    width:
      min(
        calc(100% - 28px),
        var(--container)
      );

  }


  /* HEADER */

  .header-container {

    min-height:
      70px;

    gap:
      12px;

  }


  .brand {

    gap:
      9px;

  }


  .brand-mark {

    width:
      46px;

    min-width:
      46px;

    height:
      46px;

    border-radius:
      13px;

  }


  .brand-mark span {

    font-size:
      9px;

  }


  /*
   * Tahun 2026 tetap ditampilkan di mobile.
   */

  .brand-mark small {

    display:
      block;

    margin-top:
      2px;

    font-size:
      8px;

  }


  .brand-text strong {

    font-size:
      12px;

  }


  .brand-text span {

    max-width:
      150px;

    font-size:
      10px;

  }


  .live-status {

    gap:
      6px;

    padding:
      8px 10px;

  }


  .live-status-text {

    font-size:
      0;

  }


  .live-status-text::after {

    content:
      "LIVE";

    font-size:
      10px;

  }


  /* HERO */

  .hero {

    padding:
      58px 0 48px;

  }


  .hero h1 {

    font-size:
      clamp(
        34px,
        10vw,
        47px
      );

  }


  .hero-description {

    font-size:
      14px;

    line-height:
      1.7;

  }


  .hero-meta {

    gap:
      12px;

  }


  .hero-meta-item {

    font-size:
      11px;

  }


  .hero-meta-divider {

    display:
      none;

  }


  .hero-status-card {

    padding:
      20px;

  }


  /* STATISTICS */

  .statistics-section {

    margin-top:
      -18px;

  }


  .statistics-grid {

    grid-template-columns:
      1fr;

    gap:
      10px;

  }


  .stat-card {

    min-height:
      92px;

    padding:
      17px;

  }


  .stat-value {

    font-size:
      22px;

  }


  /* SECTIONS */

  .podium-section {

    padding:
      65px 0 30px;

  }


  .leaderboard-section {

    padding:
      30px 0 20px;

  }


  .section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      12px;

    margin-bottom:
      28px;

  }


  .section-heading p {

    font-size:
      13px;

  }


  /* PODIUM */

  .podium {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      12px;

  }


  .podium-first {

    grid-column:
      1 / -1;

    grid-row:
      1;

    min-height:
      360px;

  }


  .podium-second {

    grid-column:
      1;

    grid-row:
      2;

    min-height:
      315px;

  }


  .podium-third {

    grid-column:
      2;

    grid-row:
      2;

    min-height:
      315px;

  }


  .podium-first .podium-avatar {

    width:
      88px;

    height:
      88px;

  }


  .podium-avatar {

    width:
      70px;

    height:
      70px;

  }


  .podium-initial {

    font-size:
      24px;

  }


  .podium-first .podium-initial {

    font-size:
      30px;

  }


  .podium-info {

    padding:
      0 12px;

  }


  .podium-info h3 {

    font-size:
      13px;

  }


  .podium-info p {

    font-size:
      10px;

  }


  .podium-info > span {

    margin-top:
      12px;

    padding:
      7px 10px;

    font-size:
      10px;

  }


  /* LEADERBOARD */

  .leaderboard-panel {

    border-radius:
      20px;

  }


  .leaderboard-header {

    align-items:
      flex-start;

    padding:
      24px 20px 20px;

  }


  .leaderboard-count {

    padding:
      7px 10px;

    font-size:
      10px;

  }


  .leaderboard-controls {

    padding:
      16px;

  }


  .filter-group {

    flex-direction:
      column;

  }


  .select-wrapper {

    width:
      100%;

  }


  /* TABLE */

  .leaderboard-table {

    min-width:
      720px;

  }


  .leaderboard-table th {

    padding:
      14px 16px;

  }


  .leaderboard-table td {

    padding:
      15px 16px;

  }


  .empty-state {

    min-height:
      310px;

  }


  .empty-state h3 {

    font-size:
      17px;

  }


  .empty-state p {

    font-size:
      12px;

  }


  /* REALTIME */

  .realtime-card {

    align-items:
      flex-start;

    flex-wrap:
      wrap;

    padding:
      17px;

  }


  .manual-refresh {

    width:
      100%;

  }


  /* FOOTER */

  .site-footer {

    padding:
      26px 0;

  }


  .footer-container {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      18px;

  }


  .footer-info {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;

    line-height:
      1.6;

  }


  .footer-separator {

    display:
      none;

  }


  /* MODAL */

  .modal {

    align-items:
      flex-end;

    padding:
      0;

  }


  .modal-dialog {

    width:
      100%;

    max-height:
      92vh;

    padding:
      25px 20px 30px;

    border-radius:
      24px 24px 0 0;

  }


  .modal-avatar {

    width:
      55px;

    height:
      55px;

    flex:
      0 0 55px;

    border-radius:
      16px;

    font-size:
      20px;

  }


  .modal-title-group h2 {

    font-size:
      17px;

  }


  .modal-total-points {

    padding:
      18px;

  }


  .modal-total-points strong {

    font-size:
      28px;

  }


}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .brand-text span {

    max-width:
      120px;

  }


  .brand-mark {

    width:
      43px;

    min-width:
      43px;

    height:
      43px;

  }


  .podium {

    gap:
      9px;

  }


  .podium-first {

    min-height:
      345px;

  }


  .podium-second,
  .podium-third {

    min-height:
      290px;

  }


  .podium-position {

    top:
      11px;

    left:
      11px;

    width:
      28px;

    height:
      28px;

    font-size:
      11px;

  }


  .podium-crown {

    top:
      11px;

    right:
      11px;

    width:
      30px;

    height:
      30px;

  }


  .podium-second,
  .podium-third {

    padding-top:
      28px;

  }


  .podium-avatar {

    width:
      62px;

    height:
      62px;

  }


  .podium-first .podium-avatar {

    width:
      80px;

    height:
      80px;

  }


  .podium-info h3 {

    font-size:
      11px;

  }


  .podium-info p {

    font-size:
      9px;

  }


  .podium-base {

    padding:
      13px 6px;

    font-size:
      8px;

  }


  .evaluation-grid {

    grid-template-columns:
      repeat(3, 1fr);

    gap:
      7px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}

/* =========================================================
   FINAL SYNC WITH HTML
   PKKMB 2026
   ========================================================= */


/* =========================================================
   HEADER BRAND
   ========================================================= */

/*
   Header sekarang memiliki 4 logo:
   PKKMB2.jpeg
   UNSAP.png
   Diktisaintek.png
   YPSA.jpg
*/

.site-header .brand-mark {

  position: relative;

  width: auto;
  min-width: 0;
  height: 58px;

  display: flex;
  flex-direction: row;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 5px 8px;

  background: #ffffff;

  border: 1px solid var(--border);

  border-radius: 14px;

  box-shadow:
    0 8px 20px rgba(11, 35, 71, 0.08);

  flex-shrink: 0;

  color: inherit;

}


/* Semua logo header */

.site-header .brand-mark img {

  width: 44px;
  height: 44px;

  object-fit: contain;
  object-position: center;

  display: block;

  flex: 0 0 44px;

}


/* Khusus YPSA */

.site-header .brand-mark img[src$="YPSA.jpg"] {

  border-radius: 6px;

}


/* =========================================================
   HEADER BRAND TEXT
   ========================================================= */

.site-header .brand-text {

  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;

}


.site-header .brand-text strong {

  margin: 0;

  color: var(--primary);

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size: 14px;

  font-weight: 800;

  line-height: 1.2;

  white-space: nowrap;

}


.site-header .brand-text span {

  display: block;

  max-width: 260px;

  margin: 0;

  overflow: hidden;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 500;

  line-height: 1.3;

  text-overflow: ellipsis;

  white-space: nowrap;

}


/* =========================================================
   PODIUM - DESKTOP
   ========================================================= */

.podium {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: end;

  gap: 22px;

  max-width: 1000px;

  margin: 0 auto;

}


/*
   HTML urutannya:
   second -> first -> third

   Kita paksa posisi visual:
   rank 2 -> kiri
   rank 1 -> tengah
   rank 3 -> kanan
*/

.podium-second {

  grid-column: 1;

  grid-row: 1;

}


.podium-first {

  grid-column: 2;

  grid-row: 1;

}


.podium-third {

  grid-column: 3;

  grid-row: 1;

}


/* =========================================================
   PODIUM HEIGHT
   ========================================================= */

.podium-second {

  min-height: 355px;

}


.podium-first {

  min-height: 400px;

}


.podium-third {

  min-height: 330px;

}


/* =========================================================
   TABLE COLUMN WIDTH
   ========================================================= */

.col-rank {

  width: 90px;

}


.col-prodi {

  width: 220px;

}


.col-group {

  width: 130px;

}


.col-points {

  width: 150px;

}


.col-detail {

  width: 100px;

}


/* =========================================================
   TABLE CELL ALIGNMENT
   ========================================================= */

.leaderboard-table th,
.leaderboard-table td {

  vertical-align: middle;

}


/* Rank */

.leaderboard-table th.col-rank,
.leaderboard-table td:first-child {

  text-align: center;

}


/* Points */

.leaderboard-table th.col-points,
.leaderboard-table td:nth-child(5) {

  text-align: right;

}


/* Detail */

.leaderboard-table th.col-detail,
.leaderboard-table td:nth-child(6) {

  text-align: center;

}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

/*
   Footer tidak menggunakan logo gambar.
   Jadi .brand-mark.small harus kembali
   menjadi kotak PKKMB / 2026.
*/

.site-footer .brand-mark.small {

  position: relative;

  width: 42px;
  min-width: 42px;

  height: 42px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 0;

  padding: 0;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      var(--primary-light),
      var(--primary)
    );

  border: none;

  border-radius: 12px;

  box-shadow:
    0 8px 18px rgba(11, 35, 71, 0.15);

}


.site-footer .brand-mark.small span {

  display: block;

  margin: 0;

  color: #ffffff;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size: 8px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.04em;

}


.site-footer .brand-mark.small small {

  display: block;

  margin-top: 3px;

  color: rgba(255,255,255,0.75);

  font-size: 7px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.08em;

}


/* =========================================================
   FOOTER TEXT
   ========================================================= */

.site-footer .footer-brand > div:last-child {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;

}


.site-footer .footer-brand strong {

  color: var(--primary);

  font-size: 12px;

  font-weight: 800;

  line-height: 1.3;

}


.site-footer .footer-brand span {

  color: var(--text-muted);

  font-size: 10px;

  line-height: 1.3;

}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media (max-width: 720px) {

  .site-header .header-container {

    min-height: 70px;

    gap: 10px;

  }


  .site-header .brand {

    gap: 8px;

    min-width: 0;

    flex: 1;

  }


  .site-header .brand-mark {

    width: auto;

    min-width: 0;

    height: 46px;

    gap: 3px;

    padding: 4px 5px;

    border-radius: 11px;

  }


  .site-header .brand-mark img {

    width: 32px;

    height: 32px;

    flex: 0 0 32px;

  }


  .site-header .brand-text {

    min-width: 0;

    flex: 1;

  }


  .site-header .brand-text strong {

    font-size: 12px;

  }


  .site-header .brand-text span {

    max-width: 150px;

    font-size: 10px;

  }


  .site-header .live-status {

    flex-shrink: 0;

  }


  /* Podium */

  .podium {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;

  }


  .podium-first {

    grid-column: 1 / -1;

    grid-row: 1;

    min-height: 360px;

  }


  .podium-second {

    grid-column: 1;

    grid-row: 2;

    min-height: 315px;

  }


  .podium-third {

    grid-column: 2;

    grid-row: 2;

    min-height: 315px;

  }


  /* Table */

  .leaderboard-table {

    min-width: 820px;

  }


  .col-prodi {

    width: 200px;

  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .site-header .brand {

    gap: 6px;

  }


  .site-header .brand-mark {

    height: 43px;

    gap: 2px;

    padding: 3px 4px;

  }


  .site-header .brand-mark img {

    width: 27px;

    height: 27px;

    flex: 0 0 27px;

  }


  .site-header .brand-text strong {

    font-size: 11px;

  }


  .site-header .brand-text span {

    max-width: 115px;

    font-size: 9px;

  }


  /*
     Kalau layar benar-benar sempit,
     deskripsi kampus disembunyikan.
  */

  @media (max-width: 350px) {

    .site-header .brand-text span {

      display: none;

    }

  }


  /* Podium */

  .podium {

    gap: 9px;

  }


  .podium-first {

    min-height: 345px;

  }


  .podium-second,
  .podium-third {

    min-height: 290px;

  }


  .podium-avatar {

    width: 62px;

    height: 62px;

  }


  .podium-first .podium-avatar {

    width: 80px;

    height: 80px;

  }


}