/* Hallmark · component: win cinematic · genre: atmospheric premium
 * motion: impact flash · particle burst · reduced-motion instant state
 * contrast: pass (gold/ivory against navy scrim)
 */
/* 和了シネマティック — 通常和了から役満まで、同じ卓で明確な格差を見せる。 */
#win-cinematic {
  position: fixed;
  inset: 0;
  z-index: 77;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: radial-gradient(circle at 50% 53%, rgb(18 36 63 / .12), rgb(0 0 0 / .76) 76%);
}

#win-cinematic.hidden { display: none; }

/* 和了が告げられる前の一拍。情報は増やさず、直前の牌だけへ視線を集める。 */
#screen-game.win-suspense::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  background: radial-gradient(circle at 50% 52%, transparent 18%, rgb(1 5 12 / .42) 100%);
  animation: win-suspense-breathe 1.15s ease-in-out both;
}

/* 最終打牌の正本はouter placement。ここではz順だけを上げ、投影transformは上書きしない。 */
#screen-game.win-suspense .tabletop-placement.is-last-discard.win-suspense-target-discard,
#screen-game.win-suspense .win-suspense-target-drawn,
#screen-game.win-suspense .win-suspense-target-kakan-added { z-index: 59; }

/* 動くのは牌やmeshではなく、解決済みtargetの内側へJSが足す専用effectだけ。 */
#screen-game.win-suspense .win-suspense-tile-effect {
  position: absolute;
  inset: -4px;
  z-index: 60;
  border: 2px solid rgb(255 234 158 / .95);
  border-radius: 7px;
  pointer-events: none;
  box-shadow: 0 0 0 7px rgb(255 184 48 / .18), 0 0 25px 8px rgb(255 210 95 / .5);
  transform-origin: 50% 62%;
  animation: win-suspense-effect 1.15s ease-in-out both;
}

#screen-game.win-suspense .win-suspense-target-drawn > .win-suspense-tile-effect {
  border-color: rgb(155 242 255 / .96);
  box-shadow: 0 0 0 7px rgb(74 214 255 / .16), 0 0 26px 8px rgb(117 231 255 / .62);
  animation-duration: .85s;
}

#screen-game.win-suspense .win-suspense-target-kakan-added > .win-suspense-tile-effect {
  border-color: rgb(255 207 92 / .98);
  box-shadow: 0 0 0 8px rgb(255 123 38 / .2), 0 0 30px 10px rgb(255 190 61 / .7);
}

.win-cinematic-aura,
.win-cinematic-frame,
.win-cinematic-flash,
.win-cinematic-particles { position: absolute; inset: 0; pointer-events: none; }

.win-cinematic-aura {
  background:
    radial-gradient(ellipse at 50% 58%, rgb(255 218 112 / .45), transparent 28%),
    radial-gradient(circle at 50% 54%, rgb(255 249 220 / .21), transparent 42%);
  animation: win-aura-pulse .76s ease-out both;
}

.win-cinematic-frame {
  opacity: 0;
  background: url('../assets/gptimage_v5/win_lightning_impact_v1.png') center / cover no-repeat;
  mix-blend-mode: screen;
}

.win-cinematic-flash {
  background: rgb(255 250 223 / 0);
  animation: win-flash .52s ease-out both;
}

.win-cinematic-particle {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 58%;
  width: clamp(4px, .55vw, 9px);
  height: clamp(4px, .55vw, 9px);
  border-radius: 1px;
  background: linear-gradient(135deg, #fff7d0, #f3b52b 55%, #a62b16);
  box-shadow: 0 0 12px rgb(255 191 48 / .88);
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: win-particle-flight 1s cubic-bezier(.15,.65,.22,1) both;
}

.win-cinematic-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(5px, 1vw, 12px);
  padding: 18px 38px 28px;
  text-align: center;
  color: #fff9e9;
  text-shadow: 0 3px 0 #180b0b, 0 0 24px rgb(255 202 71 / .78);
}

.win-cinematic-tier {
  color: #ffd76a;
  font: 700 clamp(12px, 1.25vw, 18px)/1.1 Georgia, 'Yu Mincho', serif;
  letter-spacing: .26em;
  text-indent: .26em;
}

.win-cinematic-action {
  font: 900 clamp(72px, 13vw, 188px)/.8 Georgia, 'Yu Mincho', serif;
  letter-spacing: .11em;
  text-indent: .11em;
  filter: drop-shadow(0 8px 0 rgb(43 8 10 / .82));
  animation: win-action-arrive .66s cubic-bezier(.08,.9,.18,1.2) both;
}

.win-cinematic-detail { font-size: clamp(15px, 1.9vw, 27px); font-weight: 800; letter-spacing: .12em; }

.win-cinematic-score {
  min-width: 8.2em;
  padding: .24em .8em .2em;
  border-block: 1px solid rgb(255 223 138 / .7);
  color: #fff0b4;
  font: 800 clamp(20px, 3vw, 42px)/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}

.win-cinematic-tile {
  display: grid;
  place-items: center;
  width: clamp(52px, 6vw, 88px);
  height: clamp(72px, 8.2vw, 120px);
  margin-top: 5px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgb(255 250 226 / .24), rgb(255 185 61 / .06));
  box-shadow: 0 0 0 2px rgb(255 225 138 / .84), 0 0 38px 11px rgb(255 180 32 / .7);
  animation: win-tile-strike .75s cubic-bezier(.12,.8,.23,1.15) both;
}

.win-cinematic-tile .tile { width: 82%; height: 88%; transform: none; }

#win-cinematic[data-lightning='true'] .win-cinematic-frame { opacity: .78; animation: win-frame-reveal .82s ease-out both; }
#win-cinematic[data-tier='mangan'] .win-cinematic-frame,
#win-cinematic[data-tier='haneman'] .win-cinematic-frame,
#win-cinematic[data-tier='baiman'] .win-cinematic-frame,
#win-cinematic[data-tier='yakuman'] .win-cinematic-frame { opacity: .96; }

#win-cinematic[data-kind='tsumo'] .win-cinematic-frame { filter: hue-rotate(-18deg) saturate(.88) brightness(1.12); }
#win-cinematic[data-kind='tsumo'] .win-cinematic-aura { background: radial-gradient(circle at 50% 54%, rgb(255 232 130 / .64), transparent 34%), radial-gradient(circle at 50% 54%, rgb(255 255 255 / .18), transparent 59%); }

#win-cinematic[data-tier='haneman'] .win-cinematic-content,
#win-cinematic[data-tier='baiman'] .win-cinematic-content,
#win-cinematic[data-tier='yakuman'] .win-cinematic-content { transform: scale(1.06); }
#win-cinematic[data-tier='yakuman'] { background: radial-gradient(circle at 50% 53%, rgb(82 18 102 / .72), rgb(0 0 0 / .9) 77%); }
#win-cinematic[data-tier='yakuman'] .win-cinematic-action { color: #fff5de; text-shadow: 0 3px #35103c, 0 0 35px #ed8dff, 0 0 70px #ffc76c; }
#win-cinematic[data-tier='yakuman'] .win-cinematic-tier { color: #ffd8ff; }
#screen-game.win-cinematic-shake { animation: win-screen-shake .38s cubic-bezier(.35,.07,.23,.97) both; }

.win-cinematic-strike-tile {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 78%;
  display: grid;
  place-items: center;
  width: clamp(62px, 7vw, 106px);
  height: clamp(86px, 9.6vw, 148px);
  border-radius: 10px;
  background: linear-gradient(145deg, rgb(255 255 240 / .28), rgb(255 181 55 / .08));
  box-shadow: 0 0 0 3px rgb(255 234 166 / .92), 0 0 48px 16px rgb(93 236 255 / .72), 0 0 85px 25px rgb(255 169 32 / .54);
  transform: translate(-50%, -50%);
  animation: win-strike-tile .94s cubic-bezier(.08,.86,.17,1) both;
}
.win-cinematic-strike-tile .tile { width: 82%; height: 88%; }
#win-cinematic[data-kind='tsumo'] .win-cinematic-strike-tile { animation-duration: 1.12s; }

@keyframes win-aura-pulse { 0% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; } 100% { opacity: .52; transform: scale(1.5); } }
@keyframes win-flash { 0% { background: rgb(255 250 223 / 0); } 13% { background: rgb(255 250 223 / .92); } 100% { background: rgb(255 250 223 / 0); } }
@keyframes win-frame-reveal { 0% { opacity: 0; transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes win-action-arrive { 0% { opacity: 0; transform: scale(2.1) translateY(-.14em); filter: blur(8px); } 55% { opacity: 1; transform: scale(.95); filter: blur(0); } 100% { transform: scale(1); } }
@keyframes win-tile-strike { 0% { opacity: 0; transform: translateY(-48vh) scale(1.4) rotate(-11deg); } 62% { opacity: 1; transform: translateY(6px) scale(1.08) rotate(2deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes win-strike-tile { 0% { opacity: 0; transform: translate(-50%, -80vh) scale(1.7) rotate(-12deg); filter: brightness(2.6); } 52% { opacity: 1; transform: translate(-50%, -45%) scale(1.18) rotate(3deg); filter: brightness(1.7); } 68% { transform: translate(-50%, -53%) scale(.95) rotate(-1deg); filter: brightness(2.2); } 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } }
@keyframes win-particle-flight { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(clamp(100px, 46vw, 760px)) translateY(-28px) scale(.15); } }
@keyframes win-screen-shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-8px, 4px); } 42% { transform: translate(7px, -4px); } 63% { transform: translate(-4px, 3px); } 82% { transform: translate(3px, -2px); } }
@keyframes win-suspense-breathe { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .78; } }
@keyframes win-suspense-effect { 0%, 100% { opacity: .5; transform: translateY(0) scale(1); filter: brightness(1); } 45% { opacity: 1; transform: translateY(-7px) scale(1.1); filter: brightness(1.35); } }

@media (max-width: 700px) {
  .win-cinematic-content { padding-inline: 16px; }
  .win-cinematic-detail { max-width: 88vw; }
  .win-cinematic-strike-tile { top: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  #win-cinematic *, #screen-game.win-cinematic-shake { animation: none !important; }
  #screen-game.win-suspense::after { animation: none; }
  #screen-game.win-suspense .win-suspense-tile-effect { animation: none; }
  .win-cinematic-frame { opacity: .46 !important; }
  .win-cinematic-strike-tile { transform: translate(-50%, -50%) !important; }
}

/* ---------- リザルトの段階リビール (v12.8) ---------- */
.reveal-step.reveal-pending { opacity: 0; transform: translateY(12px) scale(0.9); }
.reveal-step.reveal-shown {
  animation: reveal-ban 0.34s cubic-bezier(0.18, 1.35, 0.4, 1) both;
}
.reveal-step.reveal-slam.reveal-shown {
  animation: reveal-slam 0.5s cubic-bezier(0.16, 1.4, 0.3, 1) both;
}
.reveal-step.reveal-instant { opacity: 1; transform: none; animation: none; }
@keyframes reveal-ban {
  0% { opacity: 0; transform: translateY(14px) scale(0.72); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes reveal-slam {
  0% { opacity: 0; transform: translateY(20px) scale(2.1); }
  55% { opacity: 1; transform: translateY(0) scale(0.94); }
  75% { transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.score-breakdown { font-size: 1.05rem; color: #e8dcae; margin: 2px 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal-step.reveal-shown, .reveal-step.reveal-slam.reveal-shown { animation: none; opacity: 1; transform: none; }
}