/* S より上のランク（S1〜S10。S10 より上は S10 の背景を使う。ranks.js の bg）の結果画面。#rank-bg に data-rank を付けると、そのランクの背景になる。
   背景の色を直したら、共有画像の表 src/share-image.js の RANK_BACKGROUNDS も直す */

.rank-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.rank-bg[data-rank] {
  opacity: 1;
}

/* 回転させても角が欠けないよう、画面より大きく作る */
.rank-bg::before,
.rank-bg::after {
  position: absolute;
  inset: -50%;
  content: '';
}

/* 回転や拡大で動かす背景は、縦長の画面でも角が見えないよう、対角線より大きい正方形にする */
.rank-bg[data-rank='beyond-god']::before,
.rank-bg[data-rank='thumb-is-me']::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
}

/* 文字を読みやすくするため、ランクと点数のある中央と、結果画面の下段のボタンが並ぶ下端を暗くする */
.rank-bg[data-rank]::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgb(11 11 26 / 0.65), transparent 70%),
    linear-gradient(transparent 60%, rgb(11 11 26 / 0.65));
}

/* 明るい背景では暗がりを濃くしないと、ランクと点数、下段のボタンが背景に溶ける */
.rank-bg[data-rank='afterimage']::after,
.rank-bg[data-rank='glow']::after {
  background:
    radial-gradient(ellipse at 50% 38%, rgb(11 11 26 / 0.85) 25%, transparent 75%),
    linear-gradient(transparent 60%, rgb(11 11 26 / 0.85));
}

/* S より上のランクは明るい背景の上に出るので、白から金と桃色にして影で浮かせる */
.result__rank--special {
  background: linear-gradient(180deg, #fff, var(--gold) 55%, var(--hot));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.8)) drop-shadow(0 0 18px rgb(255 255 255 / 0.35));
}

/* ---------- S1〜S10 ---------- */

/* 下の3つは横に流れる速度線で、親指の速さを見せる */
.rank-bg[data-rank='soul']::before,
.rank-bg[data-rank='afterimage']::before,
.rank-bg[data-rank='smoke']::before {
  inset: -50% calc(-50% - 220px) -50% -50%;
  background: linear-gradient(var(--line) 0 2px, transparent 2px) 0 0 / 100% 26px;
  -webkit-mask-image: repeating-linear-gradient(70deg, #000 0 90px, transparent 90px 220px);
  mask-image: repeating-linear-gradient(70deg, #000 0 90px, transparent 90px 220px);
  animation: rank-dash var(--dash, 0.9s) linear infinite;
  will-change: transform;
}

.rank-bg[data-rank='soul'] {
  --line: rgb(255 230 180 / 0.45);
  background: linear-gradient(#ffb04a, #c2410c 55%, #3b1204);
}

.rank-bg[data-rank='afterimage'] {
  --line: rgb(255 255 255 / 0.7);
  --dash: 0.6s;
  background: linear-gradient(#e8f3ff, #7fb6ff 45%, #1d3f8f);
}

.rank-bg[data-rank='smoke'] {
  --line: rgb(46 242 255 / 0.7);
  --dash: 0.4s;
  background: radial-gradient(ellipse at 50% 100%, #0e4a7a, transparent 60%), #030a1f;
}

.rank-bg[data-rank='glow'] {
  background: linear-gradient(#1d5fb8, #6fb2ec);
}

.rank-bg[data-rank='glow']::before {
  background: repeating-linear-gradient(-20deg, transparent 0 160px, rgb(255 255 255 / 0.75) 160px 166px);
  animation: rank-contrail 1.4s linear infinite;
  will-change: transform;
}

/* 伝説の親指は衝撃波の輪を広げる */
.rank-bg[data-rank='legend'] {
  background: radial-gradient(circle at 50% 40%, #dff6ff, #6bb8ff 18%, #0d2a5c 55%, #050b1a);
}

.rank-bg[data-rank='legend']::before {
  background: repeating-radial-gradient(circle at 50% 40%, rgb(255 255 255 / 0.4) 0 2px, transparent 2px 44px);
  animation: rank-shock 1.2s ease-out infinite;
  will-change: transform, opacity;
}

.rank-bg[data-rank='living-legend'] {
  background: radial-gradient(ellipse at 50% 112%, #fff3b0 0, #ff9d00 14%, #ff3d00 28%, transparent 55%), #050510;
}

.rank-bg[data-rank='living-legend']::before {
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 35% 60%, #fff, transparent),
    radial-gradient(2px 2px at 60% 35%, #cfe8ff, transparent),
    radial-gradient(1px 1px at 85% 75%, #fff, transparent);
  background-size: 160px 200px;
  animation: rank-fall 0.8s linear infinite;
  will-change: transform;
}

.rank-bg[data-rank='inhuman'] {
  background: radial-gradient(ellipse at 20% 0%, #1b2a6b, transparent 60%), #020418;
}

.rank-bg[data-rank='inhuman']::before {
  background: repeating-linear-gradient(135deg, transparent 0 70px, rgb(200 230 255 / 0.8) 70px 72px, transparent 72px 150px);
  -webkit-mask-image: repeating-linear-gradient(45deg, #000 0 60px, transparent 60px 260px);
  mask-image: repeating-linear-gradient(45deg, #000 0 60px, transparent 60px 260px);
  animation: rank-streak 0.7s linear infinite;
  will-change: transform;
}

/* 親指の神は稲妻を clip-path で切り出し、不規則に光らせる */
.rank-bg[data-rank='god'] {
  background: radial-gradient(circle at 60% 20%, #5b21b6, transparent 55%), #0c0420;
}

.rank-bg[data-rank='god']::before {
  inset: 0 20% 25% 35%;
  background: #f3e8ff;
  clip-path: polygon(55% 0, 30% 45%, 50% 45%, 25% 100%, 75% 38%, 52% 38%, 78% 0);
  animation: rank-bolt 2.2s steps(1) infinite;
}

.rank-bg[data-rank='beyond-god'] {
  background: #02030d;
}

.rank-bg[data-rank='beyond-god']::before {
  background:
    radial-gradient(circle, #02030d 0 6%, transparent 30%),
    repeating-conic-gradient(from 0deg, rgb(255 255 255 / 0.6) 0 0.6deg, transparent 0.6deg 7deg);
  animation: rank-zoom 0.9s linear infinite;
  will-change: transform, opacity;
}

.rank-bg[data-rank='thumb-is-me'] {
  background: #050016;
}

.rank-bg[data-rank='thumb-is-me']::before {
  background: conic-gradient(#2ef2ff, #3f5bff, #b400ff, #2ef2ff, #00ffd5, #7a2cff, #2ef2ff);
  opacity: 0.5;
  animation: rank-spin 2s linear infinite;
  will-change: transform;
}





.is-reduced-motion .rank-bg,
.is-reduced-motion .rank-bg::before {
  animation: none;
}

@keyframes rank-dash {
  0% { transform: translateX(0); }
  100% { transform: translateX(-220px); }
}

@keyframes rank-contrail {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-160px, 58px); }
}

@keyframes rank-shock {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes rank-fall {
  0% { transform: translateY(0); }
  100% { transform: translateY(200px); }
}

@keyframes rank-streak {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-150px, 150px); }
}

@keyframes rank-bolt {
  0%, 40%, 46%, 52%, 100% { opacity: 0.15; }
  42%, 49% { opacity: 1; }
  44% { opacity: 0.4; }
}

@keyframes rank-zoom {
  0% { opacity: 0.3; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1.3); }
}

@keyframes rank-spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}