/* =========================================================
   Rating page — extends the shared style.css (nav, fonts,
   stage-canvas, color tokens). Only page-specific rules here.
========================================================= */

:root{
  --rating-warn-bg: linear-gradient(160deg, rgba(206,168,104,0.55), rgba(130,96,52,0.6));
  --rating-warn-border: rgba(232,196,132,0.55);
  --rating-warn-ink: #2c2013;
  --rating-danger-bg: rgba(120, 20, 30, 0.4);
  --rating-danger-border: rgba(255,120,120,0.45);
  --rating-danger-ink: #ffe9e9;
}

/* display is controlled by style.css (.stage-canvas): block on desktop,
   flex column on mobile — don't override it here or it breaks ordering. */

/* ---------- Nav: Home link stays white here (same as story/character),
   the currently active page in .nav__links gets the purple accent via
   .nav__links a.is-active in the shared style.css ---------- */
.nav__home{
  color: var(--ink);
}
.nav__home::after{
  display: none;
}

/* ---------- Title, top right ---------- */
.rating-title{
  position: absolute;
  top: 13%;
  right: 5.5%;
  text-align: right;
  z-index: 2;
}
.rating-title__main{
  font-family: 'Pirata One', 'Cinzel', serif;
  font-size: 5.6vw;
  color: var(--ink);
  line-height: 1;
  text-shadow: 0 0 2vw rgba(255,255,255,0.12);
}
.rating-title__divider{
  margin-top: 0.6vw;
  height: 1px;
  width: 100%;
  background: linear-gradient(to left, rgba(255,255,255,0.75), rgba(255,255,255,0));
}

/* ---------- Panel ---------- */
.rating-panel{
  position: absolute;
  left: 6.4%;
  top: 16.5%;
  width: 70%;
  max-width: 890px;
  z-index: 2;
}

.rating-panel__head{
  display: grid;
  grid-template-columns: minmax(88px, 12.5%) 1fr;
  gap: 1.2vw;
  margin-bottom: 1.1vw;
}
.rating-panel__head-id,
.rating-panel__head-list{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  border-radius: 0.7vw;
  background: var(--panel);
  backdrop-filter: blur(4px);
  padding: 0.85vw 1vw;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85vw;
  color: var(--ink-dim);
  text-align: center;
}

/* ---------- Scrollable list ---------- */
.rating-list{
  display: flex;
  flex-direction: column;
  gap: 1vw;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 0.4vw;
}
.rating-list::-webkit-scrollbar{ width: 6px; }
.rating-list::-webkit-scrollbar-track{ background: transparent; }
.rating-list::-webkit-scrollbar-thumb{
  background: var(--panel-border);
  border-radius: 4px;
}

.rating-row{
  display: grid;
  grid-template-columns: minmax(88px, 12.5%) 1fr;
  gap: 1.2vw;
  align-items: stretch;
}

.rating-row__id{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9vw;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  font-family: 'Cinzel', serif;
  font-size: 1.1vw;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.rating-row__card{
  display: flex;
  align-items: center;
  gap: 1.1vw;
  padding: 0.7vw 1.3vw;
  border-radius: 0.9vw;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  transition: background .25s ease, border-color .25s ease;
}

.rating-row--warn .rating-row__card{
  background: var(--rating-warn-bg);
  border-color: var(--rating-warn-border);
}
.rating-row--danger .rating-row__card{
  background: var(--rating-danger-bg);
  border-color: var(--rating-danger-border);
}

.rating-row__avatar{
  width: 3.4vw;
  height: 3.4vw;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.rating-row__name{
  font-family: 'Cinzel', serif;
  font-size: 1.15vw;
  color: var(--ink);
  min-width: 8vw;
  flex-shrink: 0;
}
.rating-row--warn .rating-row__name{ color: var(--rating-warn-ink); }
.rating-row--danger .rating-row__name{ color: var(--rating-danger-ink); }

.rating-row__stars{
  display: flex;
  gap: 0.35vw;
  margin-left: auto;
}
.star{
  color: var(--ink);
  opacity: 0.35;
  display: flex;
}
.star svg{ width: 1.35vw; height: 1.35vw; min-width: 14px; min-height: 14px; }
.star.is-filled{ opacity: 1; }

.rating-row__value{
  font-family: 'Cinzel', serif;
  font-size: 1.35vw;
  font-weight: 600;
  color: var(--ink);
  width: 1.6vw;
  text-align: right;
  flex-shrink: 0;
}
.rating-row--warn .rating-row__value{ color: var(--rating-warn-ink); }
.rating-row--danger .rating-row__value{ color: var(--rating-danger-ink); }

/* ---------- Footnote ---------- */
.stage-footnote{
  position: absolute;
  right: 2%;
  bottom: 2%;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75vw;
  color: var(--ink-dim);
  opacity: 0.7;
  z-index: 2;
}

/* ---------- Mobile ---------- */
@media (max-width: 760px){
  .rating-canvas{
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    padding: 20px 0 40px;
  }
  .rating-title{
    position: static;
    text-align: center;
    margin: 16px auto 0;
  }
  .rating-title__main{ font-size: 15vw; }
  .rating-title__divider{ margin: 8px auto 0; width: 60%; }

  .rating-panel{
    position: static;
    width: auto;
    max-width: 480px;
    margin: 24px auto 0;
    padding: 0 16px;
  }
  .rating-panel__head{
    grid-template-columns: 60px 1fr;
    gap: 8px;
    font-size: 11px;
  }
  .rating-panel__head-id,
  .rating-panel__head-list{
    font-size: 11px;
    padding: 8px;
  }

  .rating-list{ max-height: none; overflow: visible; gap: 10px; }

  .rating-row{ grid-template-columns: 56px 1fr; gap: 8px; }
  .rating-row__id{ font-size: 13px; border-radius: 10px; }
  .rating-row__card{ padding: 8px 10px; gap: 8px; border-radius: 10px; flex-wrap: wrap; }
  .rating-row__avatar{ width: 32px; height: 32px; }
  .rating-row__name{ font-size: 13px; min-width: 60px; }
  .star svg{ width: 13px; height: 13px; }
  .rating-row__value{ font-size: 14px; width: auto; }

  .stage-footnote{ position: static; text-align: center; margin-top: 20px; font-size: 11px; }
}