:root {
  --ink: #24463f;
  --muted: #70827b;
  --line: rgba(70, 105, 93, .2);
  --gold: #b8893d;
  --rank-gray: #424242;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: #e8f2ed; color: var(--ink); }
body { font-family: "Noto Serif CJK SC", "Songti SC", serif; letter-spacing: 0; }
button { font: inherit; letter-spacing: 0; }
game-navbar { display: block; min-height: calc(58px + env(safe-area-inset-top, 0px)); }

.ranking-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 14px 14px calc(142px + env(safe-area-inset-bottom, 0px));
}
.ranking-page[aria-busy="true"] { visibility: hidden; }

.ranking-list {
  position: relative;
  display: grid;
  gap: 5px;
  overflow: hidden;
  border: 1px solid rgba(61, 103, 89, .28);
  border-radius: 9px;
  padding: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(55, 105, 87, .035) 0 1px, transparent 1px 9px),
    rgba(224, 238, 230, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 24px rgba(40, 83, 69, .1);
}
.ranking-list::before {
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(184, 137, 61, .72), transparent);
}

.rank-row {
  --rank-accent: var(--rank-gray);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid rgba(70, 105, 93, .12);
  border-radius: 5px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(138, 151, 146, .08), rgba(255, 255, 250, .28));
  box-shadow: inset 2px 0 0 rgba(138, 151, 146, .55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  animation: rank-row-enter .42s ease both;
}
.rank-row::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28%;
  width: 20%;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
}
.rank-row:hover {
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 250, .62), rgba(255, 255, 250, .3));
  box-shadow: 0 5px 16px rgba(40, 83, 69, .12), inset 2px 0 0 var(--rank-accent);
  transform: translateX(2px);
}
.rank-row:hover::after { opacity: 1; animation: rank-row-sheen .65s ease-out; }

.rank-no { color: var(--rank-accent); font: 700 16px ui-monospace, monospace; text-align: left; }
.rank-name { overflow: hidden; color: var(--rank-accent); font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rank-power, .rank-reward { font: 12px ui-monospace, monospace; white-space: nowrap; }
.rank-power { color: var(--rank-accent); font-size: 18px; font-weight: 800; }
.rank-reward { color: var(--gold); }

.rank-tone-1 {
  --rank-accent: #c94e4e;
  min-height: 76px;
  border-color: rgba(201, 78, 78, .34);
  background: linear-gradient(105deg, rgba(201, 78, 78, .2), rgba(255, 244, 228, .44) 48%, rgba(201, 78, 78, .06));
  box-shadow: inset 4px 0 0 #c94e4e, 0 0 20px rgba(201, 78, 78, .12);
  animation: rank-row-enter .42s ease .04s both, rank-champion-glow 2.8s ease-in-out .5s infinite alternate;
}
.rank-tone-1 .rank-no { font-size: 24px; }
.rank-tone-1 .rank-name { font-size: 20px; }
.rank-tone-1 .rank-power { font-size: 22px; }
.rank-tone-1::before {
  position: absolute;
  inset: 6px 8px;
  border: 1px solid rgba(255, 230, 188, .48);
  border-radius: 3px;
  content: "";
  pointer-events: none;
}
.rank-tone-1:hover { box-shadow: 0 0 24px rgba(201, 78, 78, .2), inset 4px 0 0 #c94e4e; }

.rank-tone-2 {
  --rank-accent: #d4863f;
  min-height: 66px;
  border-color: rgba(212, 134, 63, .3);
  background: linear-gradient(105deg, rgba(212, 134, 63, .17), rgba(255, 250, 232, .3));
  box-shadow: inset 4px 0 0 #d4863f, 0 0 16px rgba(212, 134, 63, .1);
  animation-delay: .1s;
}
.rank-tone-2 .rank-no { font-size: 21px; }
.rank-tone-2 .rank-name { font-size: 18px; }
.rank-tone-2 .rank-power { font-size: 20px; }

.rank-tone-3 {
  --rank-accent: #9561aa;
  min-height: 60px;
  border-color: rgba(149, 97, 170, .28);
  background: linear-gradient(105deg, rgba(149, 97, 170, .15), rgba(246, 239, 249, .28));
  box-shadow: inset 4px 0 0 #9561aa, 0 0 14px rgba(149, 97, 170, .09);
  animation-delay: .16s;
}
.rank-tone-3 .rank-no { font-size: 19px; }
.rank-tone-3 .rank-name { font-size: 17px; }
.rank-tone-3 .rank-power { font-size: 19px; }

.rank-tone-rest { --rank-accent: var(--rank-gray); }

@keyframes rank-row-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rank-row-sheen {
  from { left: -28%; }
  to { left: 112%; }
}
@keyframes rank-champion-glow {
  from { box-shadow: inset 4px 0 0 #c94e4e, 0 0 14px rgba(201, 78, 78, .08); }
  to { box-shadow: inset 4px 0 0 #c94e4e, 0 0 26px rgba(201, 78, 78, .24); }
}

.ranking-foot {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 18px;
  align-items: center;
  width: min(100%, 760px);
  margin: 0 auto;
  border: 1px solid rgba(70, 105, 93, .18);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 251, 246, .95);
  box-shadow: 0 -8px 24px rgba(44, 83, 69, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}
.ranking-foot > div { grid-column: 1; min-height: 21px; color: #31584e; font-size: 14px; font-weight: 700; }
.ranking-foot button { grid-column: 2; grid-row: 1 / span 2; min-width: 138px; border: 1px solid #8d6b38; border-radius: 4px; padding: 9px 16px; color: #fff9e8; background: #6f5134; cursor: pointer; font-size: 13px; font-weight: 700; }
.ranking-foot button:hover:not(:disabled) { background: #805d3e; }
.ranking-foot button:disabled { cursor: not-allowed; opacity: .45; }
.ranking-foot p { grid-column: 1; max-width: none; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ranking-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; padding: 9px 14px; color: #fffaf0; background: rgba(49, 65, 58, .94); transition: .2s ease; }
.ranking-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .rank-row { animation: none; transition: none; }
  .rank-row:hover { transform: none; }
  .rank-row:hover::after { animation: none; }
}

@media (max-width: 520px) {
  .ranking-page { padding: 10px 10px calc(142px + env(safe-area-inset-bottom, 0px)); }
  .ranking-list { gap: 4px; padding: 8px; }
  .rank-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; min-height: 48px; padding: 8px 10px; }
  .rank-no { font-size: 14px; }
  .rank-name { font-size: 15px; }
  .rank-power { font-size: 16px; }
  .rank-reward { display: none; }
  .rank-tone-1 { min-height: 68px; }
  .rank-tone-1 .rank-no { font-size: 21px; }
  .rank-tone-1 .rank-name { font-size: 18px; }
  .rank-tone-1 .rank-power { font-size: 19px; }
  .rank-tone-2 { min-height: 60px; }
  .rank-tone-2 .rank-no { font-size: 19px; }
  .rank-tone-2 .rank-name { font-size: 17px; }
  .rank-tone-2 .rank-power { font-size: 18px; }
  .rank-tone-3 { min-height: 56px; }
  .rank-tone-3 .rank-no { font-size: 17px; }
  .rank-tone-3 .rank-name { font-size: 16px; }
  .rank-tone-3 .rank-power { font-size: 17px; }
  .ranking-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 10px calc(11px + env(safe-area-inset-bottom, 0px)); }
  .ranking-foot button { grid-column: 2; grid-row: 1 / span 2; min-width: 128px; padding: 8px 12px; }
  .ranking-foot p { margin-top: 4px; font-size: 10px; }
  .ranking-foot > div { font-size: 13px; }
}