/* cinematics-v1.css — リーチ／和了カットイン (v124 / 2026-09-03)
 * Hallmark · component: declaration cut-in · motion: band slide + stick flight + tier stamp slam
 * 動きはWeb Animations API(cinematics.js)。ここは静的な見た目と揺れ・粒子だけ。
 */

#riichi-cutin,
#win-cinematic {
  position: fixed;
  inset: 0;
  z-index: 77;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
#riichi-cutin.hidden, #win-cinematic.hidden { display: none; }
#riichi-cutin { background: rgb(0 0 0 / .28); }
#win-cinematic { background: radial-gradient(circle at 50% 53%, rgb(18 36 63 / .12), rgb(0 0 0 / .76) 76%); }
#win-cinematic[data-compact='true'] { background: rgb(0 0 0 / .18); }
#win-cinematic[data-tier='yakuman'] { background: radial-gradient(circle at 50% 53%, rgb(82 18 102 / .72), rgb(0 0 0 / .92) 77%); }

/* ---------- 帯 ---------- */
.cine-band {
  position: absolute;
  left: -6vw;
  right: -6vw;
  top: 50%;
  height: clamp(150px, 30vh, 300px);
  transform: translateY(-50%) skewX(-8deg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  padding: 0 8vw 0 7vw;
  margin-top: calc(clamp(150px, 30vh, 300px) / -2);
  color: #fff6df;
  background: linear-gradient(90deg, rgb(4 10 22 / .96), rgb(10 24 48 / .94) 45%, rgb(4 10 22 / .96));
  border-top: 2px solid rgb(233 190 98 / .85);
  border-bottom: 2px solid rgb(233 190 98 / .85);
  box-shadow: 0 0 60px rgb(0 0 0 / .7), inset 0 0 40px rgb(233 190 98 / .12);
  opacity: 0;
}
.cine-band[data-side='top'] { top: 34%; }
.cine-band[data-side='bottom'] { top: 62%; }
.cine-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(233 190 98 / .07) 22px 30px);
  mix-blend-mode: screen;
}
.cine-glow {
  position: absolute;
  inset: -40% 30% -40% 0;
  background: radial-gradient(ellipse at 22% 50%, rgb(233 190 98 / .28), transparent 60%);
}
.cine-portrait-wrap {
  position: relative;
  height: 100%;
  width: clamp(120px, 24vh, 240px);
  transform: skewX(8deg);
}
.cine-portrait {
  position: absolute;
  inset: -6% auto -6% 0;
  width: 100%;
  border-radius: 8px;
  background: #0c1a30 center 12% / cover no-repeat;
  box-shadow: 0 16px 40px rgb(0 0 0 / .7), 0 0 0 2px rgb(233 190 98 / .7);
  filter: saturate(1.08) contrast(1.05);
}
.cine-plate {
  position: absolute;
  inset: 20% auto 20% 0;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 2px solid rgb(233 190 98 / .8);
  background: linear-gradient(160deg, #1a3050, #0a1628);
  color: #ffe7a2;
  font: 900 clamp(22px, 4vh, 40px) / 1 Georgia, "Yu Mincho", serif;
  letter-spacing: .2em;
  text-indent: .2em;
}
.cine-copy { position: relative; display: grid; gap: clamp(2px, .8vh, 10px); transform: skewX(8deg); min-width: 0; }
.cine-main {
  white-space: nowrap;
  font: 900 clamp(48px, min(16vh, 19vw), 150px) / .9 Georgia, "Yu Mincho", serif;
  letter-spacing: .1em;
  color: #fff6df;
  text-shadow: 0 4px 0 #2b1d05, 0 0 30px rgb(233 190 98 / .8), 0 0 60px rgb(233 190 98 / .35);
  opacity: 0;
}
.cine-sub { font: 800 clamp(14px, 2.6vh, 24px) / 1.2 system-ui, sans-serif; color: #ffe7a2; letter-spacing: .1em; }
.cine-score { font: 800 clamp(18px, 3.4vh, 32px) / 1 Georgia, serif; color: #fff0b4; font-variant-numeric: tabular-nums; }
.cine-line { font: 700 clamp(14px, 2.6vh, 24px) / 1.3 Georgia, "Yu Mincho", serif; color: #fff6df; opacity: 0; }
.cine-name {
  position: absolute;
  right: 8vw;
  bottom: 8px;
  transform: skewX(8deg);
  color: #91a5bc;
  font: 700 clamp(11px, 1.8vh, 15px) / 1 system-ui, sans-serif;
  letter-spacing: .2em;
}

/* ---------- リーチ棒(演出用・大) ---------- */
.cine-stick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(240px, 42vw, 620px);
  height: clamp(30px, 5.2vw, 76px);
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 22px 40px rgb(0 0 0 / .7), inset 0 2px 0 rgb(255 255 255 / .8), inset 0 -3px 0 rgb(0 0 0 / .18);
  opacity: 0;
  margin-top: clamp(80px, 17vh, 170px);
}
.cine-stick-red { flex: 0 0 9%; background: linear-gradient(180deg, #d63a2c, #8f170f); }
.cine-stick-red.left { border-radius: 999px 0 0 999px; }
.cine-stick-red.right { border-radius: 0 999px 999px 0; }
.cine-stick-body {
  flex: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fffdf6, #efe4c8 60%, #d9c9a2);
  color: #47100d;
  font: 800 clamp(16px, 2.4vw, 36px) / 1 Georgia, serif;
  letter-spacing: .3em;
  text-indent: .3em;
}
.cine-stick-shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 22%;
  left: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .9), transparent);
  opacity: 0;
  mix-blend-mode: screen;
}
/* 飛行用の小さな棒 */
.cine-stick-flyer {
  position: fixed;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 10px rgb(0 0 0 / .6);
  transform-origin: 50% 50%;
}
.cine-stick-flyer .cine-stick-red { flex: 0 0 12%; }
.cine-stick-flyer .cine-stick-body { background: linear-gradient(180deg, #fffdf6, #e8dcbc); }
.cine-ripple {
  position: fixed;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid rgb(255 207 89 / .85);
  box-shadow: 0 0 18px rgb(255 191 56 / .7);
  opacity: 0;
}

/* ---------- 和了(満貫以上)の背景・粒子・格スタンプ ---------- */
.cine-flash, .cine-frame, .cine-aura, .cine-particles { position: absolute; inset: 0; pointer-events: none; }
.cine-flash { background: rgb(255 250 223 / 1); opacity: 0; }
.cine-frame {
  opacity: .85;
  background: url('../assets/gptimage_v5/win_lightning_impact_v1.png') center / cover no-repeat;
  mix-blend-mode: screen;
  animation: cine-frame-reveal .82s ease-out both;
}
#win-cinematic[data-kind='tsumo'] .cine-frame { filter: hue-rotate(-18deg) saturate(.88) brightness(1.12); }
.cine-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: cine-aura-pulse .76s ease-out both;
}
.cine-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: cine-particle-flight 1s cubic-bezier(.15,.65,.22,1) both;
}
#win-cinematic[data-tier='yakuman'] .cine-particle { background: linear-gradient(135deg, #fff, #ed8dff 55%, #6b1fa0); box-shadow: 0 0 14px #ed8dff; animation-duration: 1.6s; }
.cine-tier-stamp {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%) rotate(-8deg);
  white-space: nowrap;
  padding: .1em .5em;
  border: 4px solid #ffd76a;
  border-radius: 10px;
  color: #ffd76a;
  font: 900 clamp(40px, 9vh, 96px) / 1 Georgia, "Yu Mincho", serif;
  letter-spacing: .2em;
  text-indent: .2em;
  text-shadow: 0 4px 0 #2b1d05, 0 0 24px rgb(255 202 71 / .8);
  box-shadow: 0 0 30px rgb(255 202 71 / .6), inset 0 0 20px rgb(255 202 71 / .2);
  background: rgb(20 8 0 / .55);
  opacity: 0;
}
#win-cinematic[data-tier='yakuman'] .cine-tier-stamp { color: #ffd8ff; border-color: #ed8dff; text-shadow: 0 4px #35103c, 0 0 35px #ed8dff, 0 0 70px #ffc76c; box-shadow: 0 0 40px #ed8dff; }
#win-cinematic[data-tier='yakuman'] .cine-main { color: #fff5de; text-shadow: 0 4px #35103c, 0 0 35px #ed8dff, 0 0 70px #ffc76c; }
#win-cinematic[data-tier='yakuman'] .cine-band { border-color: #ed8dff; background: linear-gradient(90deg, rgb(20 4 30 / .97), rgb(52 12 78 / .95) 45%, rgb(20 4 30 / .97)); }
.cine-wintile {
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-50%) translateY(clamp(60px, 14vh, 130px));
  display: grid;
  place-items: center;
  width: clamp(48px, 6vw, 88px);
  height: clamp(66px, 8.2vw, 120px);
  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 30px 8px rgb(255 180 32 / .6);
}
.cine-wintile .tile { width: 82%; height: 88%; }
.cine-band.cine-win-compact { height: clamp(96px, 18vh, 170px); margin-top: calc(clamp(96px, 18vh, 170px) / -2); grid-template-columns: minmax(0, 1fr); padding-left: 10vw; }
.cine-band.cine-win-compact .cine-main { font-size: clamp(40px, min(9vh, 16vw), 84px); }
.cine-band.cine-win-compact .cine-wintile { position: static; transform: none; grid-column: 2; }
.cine-band.cine-win-compact { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------- 揺れ ---------- */
#screen-game.cine-shake { animation: cine-shake-a .38s cubic-bezier(.35,.07,.23,.97) both; }
#screen-game.cine-shake-strong { animation: cine-shake-b .7s cubic-bezier(.35,.07,.23,.97) both; }
#screen-game.cine-shake-max { animation: cine-shake-c 1.1s cubic-bezier(.35,.07,.23,.97) both; }
@keyframes cine-shake-a { 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 cine-shake-b { 0%, 100% { transform: translate(0); } 10% { transform: translate(-16px, 8px) rotate(-.4deg); } 25% { transform: translate(14px, -9px) rotate(.4deg); } 40% { transform: translate(-10px, 6px); } 55% { transform: translate(8px, -5px); } 70% { transform: translate(-5px, 3px); } 85% { transform: translate(3px, -2px); } }
@keyframes cine-shake-c { 0%, 100% { transform: translate(0) scale(1); } 6% { transform: translate(-22px, 12px) rotate(-.8deg) scale(1.02); } 16% { transform: translate(20px, -14px) rotate(.8deg) scale(1.02); } 28% { transform: translate(-16px, 9px) rotate(-.5deg); } 42% { transform: translate(13px, -8px) rotate(.4deg); } 58% { transform: translate(-9px, 5px); } 74% { transform: translate(6px, -4px); } 88% { transform: translate(-3px, 2px); } }
#overlay.cine-slam-shake { animation: cine-shake-b .5s cubic-bezier(.35,.07,.23,.97) both; }

@keyframes cine-aura-pulse { 0% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; } 100% { opacity: .52; transform: scale(1.5); } }
@keyframes cine-frame-reveal { 0% { opacity: 0; transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes cine-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); } }

/* ---------- リザルト: 翻カウンターと限度名のめり込み ---------- */
#overlay-content .han-counter {
  margin: 4px 0 2px;
  color: #ffe9a8;
  font: 800 clamp(18px, 2.4vw, 26px) / 1 Georgia, serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}
#overlay-content .limit-name {
  position: relative;
  display: inline-block;
  padding: .12em .6em;
  border: 3px solid #ff9b6a;
  border-radius: 10px;
  color: #ff9b6a;
  font-size: clamp(30px, 4.2vw, 44px);
  letter-spacing: .2em;
  text-indent: .2em;
  text-shadow: 0 3px 0 #3a0e05, 0 0 18px rgb(255 155 106 / .7);
}
#overlay-content .limit-name.yakuman-limit { color: #ed8dff; border-color: #ed8dff; text-shadow: 0 3px #35103c, 0 0 24px #ed8dff; }
.reveal-step.limit-name.reveal-shown { animation: cine-limit-slam .62s cubic-bezier(.16, 1.3, .3, 1) both; }
@keyframes cine-limit-slam {
  0% { opacity: 0; transform: scale(3.4) rotate(-10deg); filter: blur(4px); }
  45% { opacity: 1; transform: scale(.88) rotate(-4deg); filter: blur(0); }
  62% { transform: scale(1.1) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

@media (max-width: 700px) {
  .cine-band { padding: 0 6vw 0 5vw; gap: 10px; height: clamp(150px, 26vh, 260px); margin-top: calc(clamp(150px, 26vh, 260px) / -2); }
  .cine-portrait-wrap { width: clamp(90px, 22vh, 160px); }
  .cine-main { font-size: clamp(40px, min(11vh, 17vw), 96px); }
  .cine-sub { font-size: clamp(12px, 2.2vh, 18px); }
  .cine-line { font-size: clamp(12px, 2.2vh, 18px); }
  .cine-stick { margin-top: clamp(90px, 15vh, 140px); width: clamp(220px, 70vw, 360px); height: clamp(28px, 8vw, 46px); }
  .cine-tier-stamp { top: 20%; font-size: clamp(30px, 7vh, 60px); }
  .cine-wintile { right: 5vw; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .cine-band { height: clamp(120px, 40vh, 190px); margin-top: calc(clamp(120px, 40vh, 190px) / -2); }
  .cine-stick { margin-top: 24vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-band, .cine-main, .cine-line, .cine-tier-stamp, .cine-stick { opacity: 1 !important; }
  .cine-frame, .cine-aura, .cine-particle { animation: none !important; }
  #screen-game.cine-shake, #screen-game.cine-shake-strong, #screen-game.cine-shake-max, #overlay.cine-slam-shake { animation: none; }
  .reveal-step.limit-name.reveal-shown { animation: none; opacity: 1; transform: rotate(-4deg); }
}