/* Page-specific styles */
:root {
      --bg-main: #05060b;
      --bg-panel: rgba(9, 15, 25, 0.96);
      --bg-panel-soft: rgba(16, 22, 40, 0.9);
      --border-strong: #20ffaf;
      --border-soft: #155f4f;
      --accent: #20ffaf;
      --accent-soft: #00b894;
      --text-main: #e9fff5;
      --text-muted: #7f9ea0;
      --alert: #ff4f81;
      --shadow-strong: 0 0 25px rgba(32, 255, 175, 0.55);
      --radius-lg: 18px;
    }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-main);

  background: url("images/bg.jpg") center center / cover no-repeat fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(32,255,175,0.25), transparent 50%),
    radial-gradient(circle at bottom, rgba(94,92,255,0.25), transparent 50%),
    rgba(0, 0, 0, 0.65);
  z-index: -1;
}

@media (max-width: 768px){
  body {
    background: url("images/bg.jpg") center center / cover no-repeat;
  }
}

.bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 16px;
      width: 100%;
      border-radius: 999px;
      border: 1px solid rgba(32, 255, 175, 0.3);
      background: radial-gradient(120% 220% at 0 0, rgba(32, 255, 175, 0.19), transparent 55%),
                  radial-gradient(120% 250% at 100% 0, rgba(94, 92, 255, 0.23), transparent 52%),
                  rgba(4, 8, 18, 0.98);
      box-shadow: 0 0 0 1px rgba(9, 255, 183, 0.18),
                  0 18px 35px rgba(2, 5, 12, 0.85);
      position: sticky;
      top: 12px;
      z-index: 20;
      backdrop-filter: blur(14px);
    }

.nav-link {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 6px 11px;
      border-radius: 999px;
      color: var(--text-main);
      border: 1px solid transparent;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: transparent;
      transition: all 0.18s ease-out;
      box-sizing: border-box;
    }

.grid-full {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 18px;
      align-items: flex-start;
    }

@media (max-width: 900px) {
      .bar {
        position: sticky;
        top: 12px;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 10px 12px;
      }

      .logo {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        gap: 8px;
      }

      .logo img {
        width: 28px;
        height: 28px;
      }

      .burger {
        display: inline-flex;
        margin-left: auto;
      }

      nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        display: none;
        z-index: 999;
        box-sizing: border-box;
        flex: none;
      }

      nav.open {
        display: block;
      }

      .nav-list {
        flex-direction: column;
        width: 100%;
        background: radial-gradient(circle at 0 0, rgba(32, 255, 175, 0.25), transparent 60%),
                    rgba(2, 6, 15, 0.98);
        padding: 10px;
        margin: 0;
        border-radius: 16px;
        border: 1px solid rgba(32, 255, 175, 0.55);
        box-sizing: border-box;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
      }

      .nav-item {
        width: 100%;
      }

      .nav-link {
        display: flex;
        width: 100%;
        padding: 12px 14px;
        font-size: 10px;
      }

      .nav-link .jp {
        font-size: 10px;
      }

      .nav-link .en {
        font-size: 9px;
      }

      .rank-table {
        min-width: 860px;
      }
    }

.panel {
      border-radius: var(--radius-lg);
      border: 1px solid rgba(32, 255, 175, 0.28);
      background:
        linear-gradient(135deg, rgba(21, 52, 45, 0.4), rgba(3, 10, 18, 0.95)),
        repeating-linear-gradient(135deg, rgba(4, 250, 160, 0.12) 0, transparent 2px, transparent 11px);
      box-shadow: 0 14px 32px rgba(1, 4, 10, 0.9), 0 0 18px rgba(32, 255, 175, 0.22);
      overflow: hidden;
      position: relative;
    }

.panel .body {
      padding: 14px 16px 16px;
    }

.hero-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0 0 8px;
    }

.muted {
      color: var(--text-muted);
    }

.table-wrap {
      width: 100%;
      overflow: auto;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
    }

.rank-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1120px;
    }

.rank-table th,
    .rank-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      vertical-align: middle;
      font-size: 14px;
    }

.rank-table thead th {
      position: sticky;
      top: 0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(8px);
      text-align: left;
      font-weight: 900;
    }

.rank-table tbody tr:hover {
      background: rgba(0,255,160,.06);
    }

.badge-pts {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0,255,160,.18);
      border: 1px solid rgba(0,255,160,.25);
      font-weight: 900;
    }

.text-center {
      text-align: center;
    }

.text-end {
      text-align: right;
    }

.fw-bold {
      font-weight: 900;
    }

.py-5 {
      padding-top: 28px;
      padding-bottom: 28px;
    }

.mb-2 {
      margin-bottom: 8px;
    }

.rank-table th.col-rank,
.rank-table td.col-rank {
  width: 6rem;
  text-align: center;
  white-space: nowrap;
}

.rank-table th.col-points,
.rank-table td.col-points {
  width: 8rem;
  text-align: center;
  white-space: nowrap;
}

.rank-table th.col-date,
.rank-table td.col-date {
      width: 12rem;
      text-align: center;
      white-space: nowrap;
    }

.rank-table th.col-final,
.rank-table td.col-final {
  width: 14rem;
  text-align: center;
  white-space: nowrap;
}

.rank-table th.col-comment,
    .rank-table td.col-comment {
      width: 22rem;
    }

.ranking-digimon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      padding: 4px 10px;
      background: rgba(0,0,0,.20);
      max-width: 100%;
    }

.ranking-digimon img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      flex-shrink: 0;
      display: none;
    }

.ranking-digimon .digimon-name {
      display: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.ranking-digimon .digimon-hidden-label {
      color: var(--accent);
      font-size: 11px;
      font-family: "Orbitron", system-ui;
      letter-spacing: 0.06em;
    }

.ranking-digimon .digimon-open-label {
      display: none;
      color: var(--text-muted);
      font-size: 11px;
    }

.ranking-digimon.is-open img,
    .ranking-digimon.is-open .digimon-name {
      display: inline-flex;
    }

.ranking-digimon.is-open .digimon-hidden-label {
      display: none;
    }

.ranking-digimon.is-open .digimon-open-label {
      display: inline;
    }

.rank-row-1 {
      background: linear-gradient(90deg, rgba(255, 215, 0, 0.14), rgba(255,255,255,0.02));
      box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35);
    }

.rank-row-2 {
      background: linear-gradient(90deg, rgba(192, 192, 192, 0.14), rgba(255,255,255,0.02));
      box-shadow: inset 0 0 0 1px rgba(192, 192, 192, 0.28);
    }

.rank-row-3 {
      background: linear-gradient(90deg, rgba(205, 127, 50, 0.14), rgba(255,255,255,0.02));
      box-shadow: inset 0 0 0 1px rgba(205, 127, 50, 0.28);
    }

.rank-crown {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.4em;
      padding: 4px 10px;
      border-radius: 999px;
      font-family: "Orbitron", system-ui;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

.rank-row-1 .rank-crown {
      background: rgba(255, 215, 0, 0.16);
      border: 1px solid rgba(255, 215, 0, 0.55);
      color: #ffe38a;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

.rank-row-2 .rank-crown {
      background: rgba(192, 192, 192, 0.16);
      border: 1px solid rgba(192, 192, 192, 0.45);
      color: #f2f2f2;
      text-shadow: 0 0 8px rgba(192, 192, 192, 0.45);
    }

.rank-row-3 .rank-crown {
      background: rgba(205, 127, 50, 0.16);
      border: 1px solid rgba(205, 127, 50, 0.45);
      color: #ffc38c;
      text-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
    }

.rank-row-1 td,
    .rank-row-2 td,
    .rank-row-3 td {
      font-weight: 700;
    }

.rank-row-1 .badge-pts,
    .rank-row-2 .badge-pts,
    .rank-row-3 .badge-pts {
      transform: scale(1.05);
    }

.rank-row-1 .ranking-digimon img,
    .rank-row-2 .ranking-digimon img,
    .rank-row-3 .ranking-digimon img {
      width: 52px;
      height: 52px;
    }

.rank-player-top {
      font-size: 15px;
    }

.comment-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

.comment-text {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.player-name {
  min-width: 14rem;
  max-width: 22rem;
}

.player-name a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
      .rank-row-1 .ranking-digimon img,
      .rank-row-2 .ranking-digimon img,
      .rank-row-3 .ranking-digimon img {
        width: 46px;
        height: 46px;
      }
    }

.mobile-rank-list {
      display: none;
    }

@media (max-width: 700px) {
      .table-wrap {
        overflow: visible;
        border: none;
        border-radius: 0;
      }

      .rank-table {
        display: none;
      }

      .mobile-rank-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .mobile-rank-card {
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px;
        background:
          linear-gradient(135deg, rgba(21, 52, 45, 0.35), rgba(3, 10, 18, 0.92));
        box-shadow: 0 8px 18px rgba(0,0,0,.35);
        overflow: hidden;
      }

      .mobile-rank-card.rank-row-1 {
        background: linear-gradient(90deg, rgba(255, 215, 0, 0.14), rgba(3, 10, 18, 0.92));
        box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.32), 0 8px 18px rgba(0,0,0,.35);
      }

      .mobile-rank-card.rank-row-2 {
        background: linear-gradient(90deg, rgba(192, 192, 192, 0.14), rgba(3, 10, 18, 0.92));
        box-shadow: inset 0 0 0 1px rgba(192, 192, 192, 0.25), 0 8px 18px rgba(0,0,0,.35);
      }

      .mobile-rank-card.rank-row-3 {
        background: linear-gradient(90deg, rgba(205, 127, 50, 0.14), rgba(3, 10, 18, 0.92));
        box-shadow: inset 0 0 0 1px rgba(205, 127, 50, 0.25), 0 8px 18px rgba(0,0,0,.35);
      }

      .mobile-rank-main {
        display: grid;
        grid-template-columns: 4.2rem minmax(0, 1fr) 5.6rem;
        grid-template-areas:
          "rank name points"
          "rank digimon points";
        gap: 4px 8px;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,.10);
      }

      .mobile-rank-rank {
        grid-area: rank;
        text-align: center;
        font-weight: 900;
      }

      .mobile-rank-name {
        grid-area: name;
        min-width: 0;
        font-weight: 900;
      }

      .mobile-rank-name a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-rank-digimon {
        grid-area: digimon;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: var(--text-muted);
        font-size: 12px;
      }

      .mobile-rank-digimon img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        flex: 0 0 28px;
      }

      .mobile-rank-digimon {
        cursor: pointer;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 999px;
        padding: 3px 8px;
        width: fit-content;
        max-width: 100%;
        background: rgba(0,0,0,.20);
      }

      .mobile-rank-digimon span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-rank-digimon .digimon-hidden-label {
        color: var(--accent);
        font-size: 11px;
        font-family: "Orbitron", system-ui;
        letter-spacing: 0.06em;
      }

      .mobile-rank-digimon .digimon-open-label {
        display: none;
      }

      .mobile-rank-digimon img,
      .mobile-rank-digimon .digimon-name {
        display: none;
      }

      .mobile-rank-digimon.is-open img,
      .mobile-rank-digimon.is-open .digimon-name {
        display: inline-flex;
      }

      .mobile-rank-digimon.is-open .digimon-hidden-label {
        display: none;
      }

      .mobile-rank-digimon.is-open .digimon-open-label {
        display: inline;
        color: var(--text-muted);
        font-size: 11px;
      }

      .mobile-rank-points {
        grid-area: points;
        text-align: center;
      }

      .mobile-rank-sub {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 12px 12px;
        font-size: 12px;
      }

      .mobile-rank-meta {
        display: grid;
        grid-template-columns: 5.2rem minmax(0, 1fr);
        gap: 8px;
        align-items: start;
      }

      .mobile-rank-label {
        color: var(--text-muted);
        white-space: nowrap;
      }

      .mobile-rank-value {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .mobile-rank-value.comment {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-rank-card .rank-crown {
        min-width: auto;
        padding: 4px 8px;
        font-size: 12px;
      }

      .mobile-rank-card .badge-pts {
        padding: 5px 8px;
        font-size: 13px;
      }
    }