.livegame-layer {
/* File: css/live-game.css
   Purpose: Styles for live performance minigame.
*/
      position: absolute;
      left: var(--minigame-left);
      right: var(--minigame-right);
      top: var(--minigame-top);
      bottom: var(--minigame-bottom);
      z-index: 9;
      display: none;
      border: 2px solid #ffffffa0;
      background: linear-gradient(180deg, #080808d9 0%, #111111cc 100%);
      clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      padding: var(--minigame-padding);
    }

    .livegame-layer.active {
      display: flex;
      flex-direction: column;
    }

    /* Luminous Zone 使用中: 画面内側の紙吹雪風レイヤーはカメラ揺れで
       左右に空白が見えることがあるため、揺れないゲーム画面の縁自体を
       虹色に光らせて「発動中」を伝える。.choice-btn と同様 clip-path で
       角を落とした形なので、外側に重ねる光彩ではなく要素自身の
       border-color / 内側box-shadowだけをアニメーションさせている。 */
    .livegame-layer.luminous-zone-active {
      animation: liveLuminousZoneFrameGlow 2400ms linear infinite;
    }

    @keyframes liveLuminousZoneFrameGlow {
      0%    { border-color: #ff3058; box-shadow: inset 0 0 22px 0 #ff305870; }
      14%   { border-color: #ff9d2f; box-shadow: inset 0 0 22px 0 #ff9d2f70; }
      28%   { border-color: #ffe34a; box-shadow: inset 0 0 22px 0 #ffe34a70; }
      42%   { border-color: #57f07a; box-shadow: inset 0 0 22px 0 #57f07a70; }
      57%   { border-color: #44d4ff; box-shadow: inset 0 0 22px 0 #44d4ff70; }
      71%   { border-color: #8c63ff; box-shadow: inset 0 0 22px 0 #8c63ff70; }
      85%   { border-color: #ff4ec2; box-shadow: inset 0 0 22px 0 #ff4ec270; }
      100%  { border-color: #ff3058; box-shadow: inset 0 0 22px 0 #ff305870; }
    }

    .live-head {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .live-brief {
      position: absolute;
      inset: 56px 18px 62px;
      z-index: 6;
      display: none;
      color: #f9fbff;
      padding: 18px 18px 14px;
      clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
      background:
        linear-gradient(122deg, #ff7a2f 0 14%, transparent 14% 100%),
        linear-gradient(165deg, #06090df2 0%, #0d1119f4 52%, #131722f4 100%);
      border: 2px solid #f2f6ffcc;
      box-shadow: 0 0 0 2px #09111d inset, 0 14px 34px #0000006f;
      /* 縦に収まらない場合はクリップせずスクロールさせ、説明やボタンが切れないようにする。 */
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .live-brief.show {
      display: block;
      animation: liveBriefEnter 340ms cubic-bezier(0.18, 0.88, 0.32, 1);
    }

    .live-brief::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(-24deg, #ffffff14 0 2px, transparent 2px 22px),
        linear-gradient(90deg, transparent 0 56%, #ff8b4a22 56% 100%);
      opacity: 0.58;
    }

    .live-brief-deco {
      position: absolute;
      right: -46px;
      top: 8px;
      width: 182px;
      height: 28px;
      transform: rotate(-18deg);
      background: linear-gradient(90deg, #ffd947 0%, #ff8d4d 100%);
      box-shadow: 0 0 0 2px #00000066;
      opacity: 0.92;
    }

    .live-brief-kicker {
      position: relative;
      z-index: 1;
      display: inline-block;
      padding: 2px 8px;
      margin-bottom: 8px;
      background: #ffffff;
      color: #090b12;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .live-brief-title {
      position: relative;
      z-index: 1;
      margin: 0 0 12px;
      color: #ffffff;
      font-size: clamp(1.06rem, 2.2vw, 1.48rem);
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #000, 2px 2px 0 #e17826;
    }

    .live-brief-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      /* ワイドディスプレイでカードが横に伸びすぎないよう中央寄せの列にする。 */
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 12px;
    }

    .live-brief-card {
      background: linear-gradient(180deg, #ffffff17 0%, #ffffff08 100%);
      border: 1px solid #ffffff55;
      padding: 10px 10px 9px;
      min-height: 90px;
      clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
    }

    /* SCOREカード削除分をRULEに割り当て、3列中2列分の幅にする。 */
    .live-brief-card-wide {
      grid-column: span 2;
    }

    .live-brief-label {
      margin-bottom: 6px;
      color: #ffd374;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #000, 0 0 8px #ffd3744a;
    }

    .live-brief-card p {
      margin: 0;
      color: #f2f8ff;
      line-height: 1.45;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    #liveTutorialEndBtn {
      background: linear-gradient(90deg, #2b323d 0%, #454e5d 100%);
      border-color: #fff;
      box-shadow: 0 0 0 2px #0000005c;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    @keyframes liveBriefEnter {
      from { opacity: 0; transform: translateY(8px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .live-chip {
      padding: 5px 8px;
      border: 2px solid #fff;
      background: #141414;
      clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%, 0 8px);
    }

    .live-note {
      font-size: 0.78rem;
      color: #f1e0e0;
      margin-bottom: 8px;
      letter-spacing: 0.04em;
    }

    .mood-wrap {
      margin-bottom: 8px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .mood-label {
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.05em;
      color: #ffe7a2;
    }

    .mood-bar {
      position: relative;
      height: 12px;
      border: 2px solid #fff;
      background: #111;
      clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%, 0 8px);
      overflow: hidden;
    }

    .score-bar::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          transparent 59.6%,
          #ffffff66 59.6% 60.4%,
          transparent 60.4% 72.9%,
          #ffffff66 72.9% 73.7%,
          transparent 73.7% 86.2%,
          #ffffff66 86.2% 87%,
          transparent 87% 99.6%,
          #ffffff88 99.6% 100%
        );
      z-index: 2;
    }

    .mood-fill {
      height: 100%;
      width: 50%;
      background: linear-gradient(90deg, #e73a2d 0%, #ffcf33 55%, #61d94d 100%);
      transition: width 120ms linear;
    }

    .combo-chip {
      min-width: 86px;
      text-align: center;
    }

    .combo-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .live-controls {
      display: grid;
      grid-template-columns: auto auto;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .live-brief-select {
      position: relative;
      z-index: 1;
      margin: 0 auto 10px;
      max-width: 420px;
      display: block;
    }

    .live-brief-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: min(460px, 100%);
      margin: 0 auto;
    }

    .live-brief-actions .choice-btn {
      width: 100%;
      margin: 0;
      text-align: center;
      transform: skew(-8deg);
    }

    .live-brief-actions .choice-btn:hover,
    .live-brief-actions .choice-btn:focus-visible {
      transform: skew(-8deg) translateY(-1px);
    }

    #liveLuminousZoneBtn:disabled {
      opacity: 0.55;
      cursor: default;
    }

    /* LUMINOUS ZONE使用可能時: 背景は変えず、枠線の色だけを虹色に巡回させる。
       .choice-btn の clip-path で外側に重ねた光彩は変な形に切り取られてしまうため、
       要素自身が持つ border-color を直接アニメーションさせる（clip-path の影響を受けない）。 */
    #liveLuminousZoneBtn.live-luminous-zone-ready {
      animation: liveLuminousZoneReadyBorder 2400ms linear infinite, liveLuminousZoneReadyPulse 1600ms ease-in-out infinite;
    }

    @keyframes liveLuminousZoneReadyBorder {
      0%    { border-color: #ff3058; }
      14%   { border-color: #ff9d2f; }
      28%   { border-color: #ffe34a; }
      42%   { border-color: #57f07a; }
      57%   { border-color: #44d4ff; }
      71%   { border-color: #8c63ff; }
      85%   { border-color: #ff4ec2; }
      100%  { border-color: #ff3058; }
    }

    @keyframes liveLuminousZoneReadyPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }

    .live-select {
      width: 100%;
      background: #111;
      color: #fff;
      border: 2px solid #fff;
      clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%, 0 8px);
      padding: 8px 10px;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    .live-field {
      position: relative;
      width: 100%;
      flex: 1;
      min-height: 90px;
      border: 2px solid #ffffff66;
      background:
        linear-gradient(145deg, #1a0609aa 0 20%, #111111aa 55%, #130509aa 100%),
        repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 42px);
      overflow: hidden;
      transform: translate3d(0, 0, 0) scale(1);
      transform-origin: 50% 52%;
      transition: filter 120ms ease;
      will-change: transform, filter;
    }

    .live-field::before,
    .live-field::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 1;
    }

    .live-field::before {
      inset: -18% -24%;
      opacity: 0;
      background:
        linear-gradient(102deg, transparent 0 28%, #ffffff1f 40%, transparent 52%),
        repeating-linear-gradient(102deg, transparent 0 18px, #ffffff14 18px 24px, transparent 24px 56px);
      transform: translateX(-12%);
    }

    .live-field::after {
      inset: 0;
      opacity: 0;
      background: radial-gradient(circle at 52% 46%, transparent 52%, #0000008a 100%);
      transition: opacity 140ms ease;
    }

    .live-field.luminous-zone-rainbow::after {
      opacity: 0.72;
      background:
        linear-gradient(
          120deg,
          #ff305850 0%,
          #ff9d2f55 17%,
          #ffe34a55 34%,
          #57f07a55 50%,
          #44d4ff55 66%,
          #8c63ff55 82%,
          #ff4ec255 100%
        ),
        radial-gradient(circle at 52% 46%, transparent 45%, #0000007c 100%);
      animation: luminousZoneRainbowSweep 1400ms linear infinite;
      mix-blend-mode: screen;
    }

    .live-field.fx-speedline::before {
      opacity: 0.48;
      animation: liveSpeedlineFlow 440ms linear infinite;
    }

    @keyframes liveSpeedlineFlow {
      0% { transform: translateX(-18%); }
      100% { transform: translateX(18%); }
    }

    /* 横方向にずらすと .live-field のカメラ揺れと重なって左右に空白が
       見えてしまうため、位置は動かさず色味の変化だけにしている。 */
    @keyframes luminousZoneRainbowSweep {
      0% { filter: hue-rotate(0deg) saturate(1.15) brightness(1.04); }
      50% { filter: hue-rotate(95deg) saturate(1.32) brightness(1.12); }
      100% { filter: hue-rotate(190deg) saturate(1.15) brightness(1.04); }
    }

    .live-cast-lane {
      position: relative;
      margin-top: 6px;
      width: 100%;
      height: 72px;
      border-top: 2px solid #ffffff4d;
      background: linear-gradient(180deg, #ffffff05 0%, #ffffff10 100%);
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
      transform: translate3d(var(--live-cam-x, 0px), var(--live-cam-y, 0px), 0);
    }

    .live-cast {
      position: absolute;
      top: 0;
      bottom: auto;
      width: 78px;
      height: 78px;
      object-fit: contain;
      filter: drop-shadow(0 3px 8px #000);
      transition: transform 120ms ease;
    }

    .live-cast.jump {
      animation: castJump 420ms ease-out;
    }

    @keyframes castJump {
      0% { transform: translateY(0); }
      35% { transform: translateY(-13px); }
      100% { transform: translateY(0); }
    }

    .voice {
      position: absolute;
      min-width: 132px;
      max-width: min(64vw, 280px);
      padding: 12px 14px;
      border: 2px solid #fff;
      color: #fff;
      font-weight: 900;
      letter-spacing: 0.02em;
      line-height: 1.2;
      transform: translate3d(0, 0, 0);
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 10px);
      user-select: none;
      touch-action: manipulation;
      cursor: pointer;
      text-shadow: 0 1px 3px #000;
      box-shadow: 0 5px 12px #00000088;
      z-index: 2;
      transform-origin: 50% 18%;
      overflow: visible;
    }

    .voice.pos {
      background: #1d8c38;
      border-color: #ccffd7;
    }

    .voice.neg {
      background: #b11422;
      border-color: #ffd5d9;
    }

    .voice::before,
    .voice::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
    }

    .voice.hit {
      pointer-events: none;
    }

    .voice.hit-red {
      animation: voiceVanishRed 180ms ease-out forwards;
    }

    .voice.hit-green {
      animation: voiceMeltPurple 420ms ease-in forwards;
    }

    .voice.hit-green::before {
      opacity: 1;
      background: linear-gradient(180deg, #ba6eff55 0%, #6f36bfff 100%);
      mix-blend-mode: screen;
      animation: voiceMeltOverlay 420ms ease-in forwards;
    }

    .mini-firework {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 6;
    }

    .mini-firework-core {
      position: absolute;
      width: 18px;
      height: 18px;
      left: -9px;
      top: -9px;
      border-radius: 999px;
      background: radial-gradient(circle, #fff 0 25%, var(--fw-color, #ffae52) 26% 100%);
      box-shadow:
        0 0 18px var(--fw-color, #ffae52),
        0 0 42px var(--fw-color, #ffae52);
      animation: miniFireworkCore 560ms ease-out forwards;
    }

    .mini-firework-spark {
      position: absolute;
      left: -3px;
      top: -3px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--spark-color, #ffd37d);
      box-shadow: 0 0 15px var(--spark-color, #ffd37d);
      transform: rotate(var(--ang, 0deg)) translateY(0) scale(0.4);
      opacity: 0;
      animation: miniFireworkSpark 560ms ease-out forwards;
      animation-delay: var(--delay, 0ms);
    }

    @keyframes voiceVanishRed {
      0% {
        transform: translate3d(var(--vx, 0), var(--vy, 0), 0) scale(1);
        filter: brightness(1);
        opacity: 1;
      }
      100% {
        transform: translate3d(var(--vx, 0), var(--vy, 0), 0) scale(0.55);
        filter: brightness(1.1);
        opacity: 0;
      }
    }

    @keyframes miniFireworkCore {
      0% { transform: scale(0.35); opacity: 1; }
      22% { transform: scale(1.28); opacity: 1; }
      100% { transform: scale(1.75); opacity: 0; }
    }

    @keyframes miniFireworkSpark {
      0% {
        opacity: 0;
        transform: rotate(var(--ang, 0deg)) translateY(0) scale(0.35);
      }
      18% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: rotate(var(--ang, 0deg)) translateY(calc(-1 * var(--dist, 34px))) scale(1.12);
      }
    }

    @keyframes voiceMeltPurple {
      0% {
        transform: translate3d(var(--vx, 0), var(--vy, 0), 0) scale(1);
        opacity: 1;
        filter: hue-rotate(0deg) blur(0);
      }
      32% {
        transform: translate3d(var(--vx, 0), calc(var(--vy, 0) + 8px), 0) scale(1.08, 0.9);
        opacity: 0.95;
        filter: hue-rotate(120deg) blur(0.5px);
      }
      100% {
        transform: translate3d(var(--vx, 0), calc(var(--vy, 0) + 22px), 0) scale(0.86, 1.28);
        opacity: 0;
        filter: hue-rotate(180deg) blur(2.4px);
      }
    }

    @keyframes voiceMeltOverlay {
      0% { opacity: 0.4; }
      100% { opacity: 0; }
    }

    .live-start { margin: 0; }

    .textbox-wrap.hidden {
      display: none;
    }

    .live-cutin {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
      opacity: 0;
    }

    .live-cutin.play {
      animation: cutinFlash 1500ms ease-out;
    }

    .live-cutin-img {
      position: absolute;
      right: -10px;
      bottom: 0;
      width: min(42vw, 260px);
      max-height: 88%;
      object-fit: contain;
      filter: drop-shadow(0 10px 20px #000);
      transform: translateX(24px) scale(0.98);
    }

    .live-cutin.play .live-cutin-img {
      animation: cutinSlide 1500ms ease-out;
    }

    .live-cutin-text {
      position: absolute;
      right: 14px;
      left: auto;
      top: 14px;
      max-width: min(72vw, 460px);
      background: #cb101ee6;
      border: 2px solid #fff;
      color: #fff;
      padding: 8px 12px;
      font-size: clamp(0.88rem, 1.8vw, 1.1rem);
      font-weight: 900;
      letter-spacing: 0.04em;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 10px);
      white-space: pre-line;
      text-shadow: 0 1px 2px #000;
      box-shadow:
        0 0 0 1px #ffd5d980,
        0 0 12px #ff5f6baa,
        0 0 24px #ff334788,
        0 8px 18px #00000080;
    }

    .live-cutin.play .live-cutin-text {
      animation: cutinTextGlow 1500ms ease-out;
    }

    .combo-burst {
      position: absolute;
      left: 50%;
      top: 56%;
      transform: translate(-50%, -50%);
      z-index: 12;
      pointer-events: none;
      opacity: 0;
      text-align: center;
      filter: drop-shadow(0 8px 16px #00000099);
    }

    .combo-burst::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: clamp(92px, 18vw, 170px);
      height: clamp(92px, 18vw, 170px);
      transform: translate(-50%, -50%) scale(0.6);
      border-radius: 999px;
      border: 2px solid #ffe1ab99;
      opacity: 0;
      pointer-events: none;
    }

    .live-keymini {
      position: absolute;
      inset: 0;
      display: none;
      z-index: 14;
      pointer-events: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      background:
        linear-gradient(135deg, #ffe10024 0 18%, transparent 18% 28%, #ffe1001a 28% 40%, transparent 40% 100%),
        radial-gradient(circle at 50% 50%, #1a1a12d0 0%, #090909ea 74%);
      text-align: center;
    }

    .live-keymini.active {
      display: flex;
    }

    .live-keymini-title {
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.16em;
      color: #111;
      background: #ffe100;
      border: 2px solid #111;
      padding: 4px 12px;
      transform: skewX(-10deg);
      box-shadow: 4px 4px 0 #000000a6;
    }

    .live-keymini-prompt {
      font-size: clamp(1.2rem, 3.6vw, 1.95rem);
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #ffe100;
      background: #0f0f0f;
      border: 3px solid #ffe100;
      padding: 10px 20px;
      min-width: min(86vw, 460px);
      clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%, 0 14px);
      box-shadow:
        0 0 0 2px #111,
        0 10px 20px #000000a6;
      text-shadow: 0 2px 0 #000;
    }

    .live-keymini-typed {
      min-height: 1.3em;
      font-size: 0.96rem;
      font-weight: 800;
      color: #f6f6f6;
      letter-spacing: 0.05em;
      background: #0000009a;
      border-left: 4px solid #ffe100;
      padding: 4px 12px 4px 10px;
      min-width: min(78vw, 420px);
      text-align: left;
    }

    .live-keymini-timer {
      font-size: 1.02rem;
      font-weight: 800;
      color: #ffe100;
      text-shadow: 0 2px 0 #000;
    }

    .live-keymini-result {
      min-height: 1.2em;
      font-size: 1.06rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #ffffff;
      text-shadow: 0 1px 3px #000, 0 0 10px #ffe10066;
    }

    .live-streak-fx {
      position: absolute;
      top: 8%;
      right: -38%;
      z-index: 15;
      pointer-events: none;
      opacity: 0;
      font-size: clamp(1rem, 4vw, 2rem);
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #ffe100;
      background: #111;
      border: 3px solid #ffe100;
      padding: 8px 16px;
      transform: skewX(-14deg);
      text-shadow: 0 2px 0 #000;
      box-shadow:
        0 0 0 2px #000,
        0 8px 18px #000000a0;
    }

    .live-streak-fx.play {
      animation: liveStreakSlide 760ms cubic-bezier(0.2, 0.82, 0.18, 1) forwards;
    }

    .live-call-fx {
      position: absolute;
      left: 50%;
      top: 42%;
      z-index: 18;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
      font-size: clamp(1.5rem, 7vw, 3.2rem);
      font-weight: 900;
      letter-spacing: 0.14em;
      color: #fff7ce;
      text-shadow:
        0 0 10px #ff8b38cc,
        0 0 24px #ff5a2db8,
        0 2px 3px #000;
      border: 3px solid #ffe25a;
      padding: 8px 18px 8px 24px;
      background: linear-gradient(180deg, #2a1a11e8 0%, #0f0907e8 100%);
      box-shadow: 0 0 0 2px #000, 0 10px 24px #00000099;
    }

    .live-call-fx.active {
      opacity: 1;
    }

    .live-call-fx.play {
      animation: liveCallFlash var(--call-ms, 700ms) cubic-bezier(0.16, 0.86, 0.2, 1) forwards;
    }

    @keyframes liveCallFlash {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.76);
        filter: blur(5px);
      }
      24% {
        opacity: 1;
        transform: translate(-50%, -52%) scale(1.08);
        filter: blur(0);
      }
      68% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.92);
        filter: blur(2px);
      }
    }

    @keyframes liveStreakSlide {
      0% {
        opacity: 0;
        right: -38%;
        filter: blur(3px);
      }
      14% {
        opacity: 1;
      }
      78% {
        opacity: 1;
        right: 12%;
        filter: blur(0);
      }
      100% {
        opacity: 0;
        right: -8%;
        filter: blur(1.5px);
      }
    }

    .combo-burst.play {
      animation: comboBurstPop 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .combo-burst.play::before {
      animation: comboBurstRing 560ms ease-out;
    }

    .combo-burst.mega.play {
      animation: comboBurstMega 760ms cubic-bezier(0.16, 0.92, 0.2, 1);
    }

    .combo-burst.mega.play::before {
      animation: comboBurstRingMega 760ms ease-out;
    }

    .combo-burst-main {
      color: #fff6d0;
      font-size: clamp(1.1rem, 4.2vw, 2rem);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-shadow:
        0 0 8px #ff8a3db3,
        0 0 18px #ff4d2ea8,
        0 2px 3px #000;
      transform: skewX(-6deg);
    }

    .combo-burst.mega .combo-burst-main {
      color: #fff7de;
      letter-spacing: 0.11em;
      text-shadow:
        0 0 10px #ffcf55d9,
        0 0 24px #ff7a2fdb,
        0 0 36px #ff3d2cc4,
        0 2px 4px #000;
    }

    @keyframes comboBurstPop {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
      }
      18% {
        opacity: 1;
        transform: translate(-50%, -52%) scale(1.1);
      }
      58% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.92);
      }
    }

    @keyframes comboBurstMega {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.62);
      }
      16% {
        opacity: 1;
        transform: translate(-50%, -53%) scale(1.22);
      }
      62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -47%) scale(0.94);
      }
    }

    @keyframes comboBurstRing {
      0% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.62);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.25);
      }
    }

    @keyframes comboBurstRingMega {
      0% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.56);
        border-color: #ffe4b6d9;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.58);
        border-color: #ff744e00;
      }
    }

    @keyframes cutinFlash {
      0% { opacity: 0; }
      12% { opacity: 1; }
      80% { opacity: 1; }
      100% { opacity: 0; }
    }

    @keyframes cutinSlide {
      0% { transform: translateX(28px) scale(0.96); opacity: 0; }
      14% { transform: translateX(0) scale(1); opacity: 1; }
      84% { transform: translateX(0) scale(1); opacity: 1; }
      100% { transform: translateX(18px) scale(0.98); opacity: 0; }
    }

    @keyframes cutinTextGlow {
      0% {
        filter: brightness(1);
        box-shadow:
          0 0 0 1px #ffd5d980,
          0 0 8px #ff5f6b80,
          0 0 18px #ff334766,
          0 8px 18px #00000080;
      }
      24% {
        filter: brightness(1.18);
        box-shadow:
          0 0 0 1px #ffe8ec,
          0 0 16px #ff7787cc,
          0 0 34px #ff3347b3,
          0 8px 18px #00000080;
      }
      100% {
        filter: brightness(1);
        box-shadow:
          0 0 0 1px #ffd5d980,
          0 0 12px #ff5f6baa,
          0 0 24px #ff334788,
          0 8px 18px #00000080;
      }
    }