:root {
  color-scheme: dark;
  --ink: #fff3c5;
  --muted: #d4c29e;
  --line: rgba(242, 207, 133, 0.28);
  --panel: rgba(25, 31, 28, 0.93);
  --panel-soft: rgba(14, 27, 23, 0.74);
  --gold: #ffd55b;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 1024px;
  min-height: 100vh;
  color: var(--ink);
  background: #12201d url("./assets/scenes/tea-sea-morning.png") center / cover fixed no-repeat;
}

button,
input,
textarea { font: inherit; }

button {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(52, 48, 34, 0.84);
  cursor: pointer;
}

button:hover { border-color: #f0c35c; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #28d6c0; outline-offset: 2px; }

.effect-lab {
  min-height: 100vh;
  background: rgba(9, 20, 17, 0.36);
}

.lab-bar {
  min-height: 62px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 26, 24, 0.92);
}

.lab-bar strong { display: block; font-size: 22px; }
.lab-bar span { color: var(--muted); font-size: 13px; }
.bar-actions { display: flex; gap: 8px; }
.bar-actions button { min-height: 40px; padding: 0 16px; font-weight: 800; }
.bar-actions .primary { color: #17231f; background: #f0c35c; }
.tool-link {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 800;
}
.tool-link:hover { border-color: rgba(255, 220, 135, 0.7); background: rgba(255, 255, 255, 0.09); }

.lab-layout {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  min-height: calc(100vh - 62px);
}

.control-panel {
  padding: 16px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.control-panel section + section { margin-top: 20px; }
.control-panel h2,
.config-output label {
  display: block;
  margin: 0 0 9px;
  color: #f2d58c;
  font-size: 14px;
}

.action-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.action-button {
  min-height: 38px;
  padding: 5px 3px;
  font-weight: 900;
}

.action-button.selected,
.preset-button.selected {
  color: #15211e;
  border-color: #ffe294;
  background: #f3cc64;
}

.preset-list { display: grid; gap: 7px; }

.preset-button {
  min-height: 42px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.preset-button small { color: var(--muted); }
.preset-button.selected small { color: #4f3a16; }

.voice-section { padding-bottom: 14px; }
.voice-import-bar {
  margin-bottom: 9px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 6px 9px;
  align-items: center;
}
.voice-import-bar button { min-height: 34px; font-weight: 800; }
.voice-import-bar small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.voice-list { display: grid; gap: 6px; }
.voice-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 44px;
  gap: 5px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(242, 207, 133, 0.12);
  border-radius: 6px;
  background: rgba(7, 15, 13, 0.32);
}
.voice-row label { color: var(--muted); font-size: 12px; }
.voice-row input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(9, 15, 14, 0.72);
}
.voice-row button { height: 34px; padding: 0; }
.voice-audio-controls {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 68px 68px 68px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}
.voice-audio-controls button { height: 28px; font-size: 11px; }
.voice-audio-controls .record-button { color: #fff0dd; border-color: rgba(255, 133, 91, .48); }
.voice-row.recording { border-color: #ffbd62; box-shadow: 0 0 0 2px rgba(255, 179, 69, .18); }
.voice-row.recording .record-button { color: #20150d; background: #ffb347; }
.voice-audio-status {
  overflow: hidden;
  color: #9ba9a3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-row.has-audio .voice-audio-status { color: #63e5bd; }
.delete-audio:disabled { opacity: .35; cursor: default; }

.preview-panel { padding: 18px; min-width: 0; }

.scene-table {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(219, 178, 97, 0.44);
  border-radius: 8px;
  background:
    linear-gradient(rgba(11, 48, 38, 0.26), rgba(7, 34, 28, 0.64)),
    url("./assets/scenes/tea-sea-morning.png") center 46% / cover no-repeat;
  box-shadow: inset 0 -88px 0 rgba(22, 59, 49, 0.7);
}

.mock-seat {
  position: absolute;
  left: 34px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  color: #fff4cf;
  border-radius: 7px;
  background: rgba(41, 35, 26, 0.58);
  font-weight: 800;
}
.mock-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #d7f3e8;
  border-radius: 7px;
  background: #2ba88f;
  font-size: 25px;
}
.mock-melds {
  position: absolute;
  left: 52px;
  top: 124px;
  display: grid;
  gap: 1px;
}
.mock-melds span {
  width: 42px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #c9281c;
  border: 2px solid #d9c9a9;
  border-radius: 4px;
  background: #fffdf5;
  font: 900 28px "STKaiti", "KaiTi", serif;
}

.effect-stage {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 400px;
  height: 260px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.cue-preview {
  position: relative;
  z-index: 4;
  min-width: 170px;
  text-align: center;
  white-space: nowrap;
  font: 950 108px/1 "STKaiti", "KaiTi", serif;
  letter-spacing: 0;
}

.cue-preview[data-length="3"] { font-size: 78px; }
.cue-preview[data-length="4"] { font-size: 66px; }

.effect-flare,
.effect-slashes,
.effect-slashes i { position: absolute; pointer-events: none; }
.effect-flare { inset: 30px; z-index: 1; }
.effect-slashes { inset: 0; z-index: 3; }
.effect-slashes i { display: block; }

.effect-stage.play .cue-preview,
.effect-stage.play .effect-flare,
.effect-stage.play .effect-slashes i { animation-play-state: running; }

.preset-gold-burst .cue-preview {
  color: #ffd65a;
  -webkit-text-stroke: 2px #6f250c;
  text-shadow: 0 3px 0 #9f3e10, 0 8px 0 #4c1808, 0 14px 24px rgba(0, 0, 0, 0.64), -2px -2px 0 #fff0a5;
}
.preset-gold-burst .effect-flare {
  background: repeating-conic-gradient(from 2deg, rgba(255, 190, 43, 0) 0 8deg, rgba(255, 190, 43, 0.88) 9deg 10deg, rgba(255, 190, 43, 0) 11deg 20deg);
  clip-path: polygon(50% 0, 56% 38%, 100% 20%, 65% 47%, 95% 70%, 60% 57%, 50% 100%, 43% 60%, 7% 79%, 37% 53%, 0 36%, 41% 44%);
}
.preset-gold-burst.play .cue-preview { animation: goldCue 1500ms cubic-bezier(.12,.82,.18,1) both; }
.preset-gold-burst.play .effect-flare { animation: flareBurst 1500ms ease-out both; }

.preset-red-rift .cue-preview {
  color: #fff0c5;
  -webkit-text-stroke: 3px #7a0805;
  text-shadow: 5px 5px 0 #e32d12, 10px 10px 0 #63100b, 0 14px 25px rgba(0,0,0,.7);
  transform: skewX(-6deg);
}
.preset-red-rift .effect-flare {
  border: 8px solid #ff3d21;
  transform: rotate(-8deg) skewX(-12deg);
  box-shadow: 0 0 0 5px rgba(255, 211, 71, .72), inset 0 0 24px #c81409, 0 0 36px #ff2f14;
}
.preset-red-rift .effect-slashes i { width: 290px; height: 9px; left: 55px; background: #ffe26d; box-shadow: 0 0 12px #ff2b12; transform: rotate(-18deg); }
.preset-red-rift .effect-slashes i:nth-child(1) { top: 66px; }
.preset-red-rift .effect-slashes i:nth-child(2) { top: 124px; left: 20px; }
.preset-red-rift .effect-slashes i:nth-child(3) { top: 183px; left: 86px; }
.preset-red-rift.play .cue-preview { animation: riftCue 1500ms cubic-bezier(.13,.85,.15,1) both; }
.preset-red-rift.play .effect-flare { animation: riftFrame 1500ms ease both; }
.preset-red-rift.play .effect-slashes i { animation: slashStrike 1500ms ease-out both; }

.preset-cyan-thunder .cue-preview {
  color: #f3ffff;
  -webkit-text-stroke: 2px #045a6b;
  text-shadow: 3px 3px 0 #00c7d5, -3px -2px 0 #5dffeb, 0 0 13px #00f0ff, 0 10px 23px #001a23;
}
.preset-cyan-thunder .effect-flare {
  border: 3px solid #9effef;
  clip-path: polygon(50% 0, 62% 32%, 91% 12%, 72% 43%, 100% 50%, 71% 57%, 91% 90%, 59% 68%, 50% 100%, 42% 68%, 8% 89%, 29% 57%, 0 50%, 30% 42%, 9% 11%, 41% 32%);
  box-shadow: inset 0 0 25px #00d2e0, 0 0 24px #00cddd;
}
.preset-cyan-thunder .effect-slashes i { width: 7px; height: 170px; top: 40px; left: 110px; background: #dbfff7; transform: rotate(34deg) skewY(-24deg); box-shadow: 0 0 12px #00edff; }
.preset-cyan-thunder .effect-slashes i:nth-child(2) { left: 285px; transform: rotate(-25deg) skewY(23deg); }
.preset-cyan-thunder .effect-slashes i:nth-child(3) { left: 198px; top: 22px; height: 215px; transform: rotate(8deg) skewY(-18deg); }
.preset-cyan-thunder.play .cue-preview { animation: thunderCue 1500ms ease both; }
.preset-cyan-thunder.play .effect-flare { animation: thunderField 1500ms steps(7, end) both; }
.preset-cyan-thunder.play .effect-slashes i { animation: lightning 1500ms steps(6, end) both; }

.preset-ink-seal .cue-preview {
  color: #f5d173;
  -webkit-text-stroke: 2px #22140f;
  text-shadow: 4px 4px 0 #6f1f13, 0 9px 16px rgba(0,0,0,.75);
}
.preset-ink-seal .effect-flare {
  border: 12px double #d7a446;
  background: rgba(65, 11, 10, .55);
  transform: rotate(3deg);
  box-shadow: 0 0 0 8px rgba(43, 14, 9, .72), inset 0 0 28px rgba(0,0,0,.75);
}
.preset-ink-seal .effect-slashes i { width: 340px; height: 16px; left: 30px; top: 70px; background: #5c130e; transform: rotate(-5deg); opacity: .8; }
.preset-ink-seal .effect-slashes i:nth-child(2) { top: 177px; left: 18px; transform: rotate(4deg); }
.preset-ink-seal .effect-slashes i:nth-child(3) { width: 15px; height: 220px; left: 192px; top: 20px; transform: rotate(12deg); }
.preset-ink-seal.play .cue-preview { animation: sealCue 1500ms cubic-bezier(.15,.8,.2,1) both; }
.preset-ink-seal.play .effect-flare { animation: sealFrame 1500ms ease both; }
.preset-ink-seal.play .effect-slashes i { animation: inkStroke 1500ms ease both; }

@keyframes goldCue {
  0% { opacity: 0; transform: scale(2.3) rotate(-7deg); filter: blur(8px); }
  18% { opacity: 1; transform: scale(.84) rotate(2deg); filter: blur(0); }
  29% { transform: scale(1.15) rotate(-1deg); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9) translateY(-18px); }
}
@keyframes flareBurst { 0% { opacity: 0; transform: scale(.05) rotate(-20deg); } 24% { opacity: 1; transform: scale(1.05) rotate(2deg); } 100% { opacity: 0; transform: scale(1.38) rotate(10deg); } }
@keyframes riftCue { 0% { opacity: 0; transform: translateX(-150px) skewX(-18deg) scale(1.7); } 22% { opacity: 1; transform: translateX(15px) skewX(-6deg) scale(.9); } 31% { transform: translateX(0) skewX(-6deg) scale(1.08); } 76% { opacity: 1; } 100% { opacity: 0; transform: translateX(80px) skewX(-10deg) scale(.92); } }
@keyframes riftFrame { 0% { opacity: 0; transform: rotate(-18deg) skewX(-20deg) scale(.2); } 25% { opacity: 1; transform: rotate(-8deg) skewX(-12deg) scale(1); } 100% { opacity: 0; transform: rotate(-4deg) skewX(-8deg) scale(1.2); } }
@keyframes slashStrike { 0%, 10% { opacity: 0; transform: translateX(-190px) rotate(-18deg) scaleX(.1); } 25% { opacity: 1; transform: translateX(0) rotate(-18deg) scaleX(1); } 55%,100% { opacity: 0; transform: translateX(120px) rotate(-18deg) scaleX(.65); } }
@keyframes thunderCue { 0% { opacity: 0; transform: scale(.35); filter: brightness(4); } 17% { opacity: 1; transform: scale(1.18); } 23% { transform: translateX(-7px) scale(.97); } 28% { transform: translateX(7px) scale(1.03); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); filter: brightness(1.8); } }
@keyframes thunderField { 0%,8% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; transform: scale(1); } 22% { opacity: .2; } 30% { opacity: 1; } 72% { opacity: .8; } 100% { opacity: 0; transform: scale(1.28); } }
@keyframes lightning { 0%,12% { opacity: 0; } 17% { opacity: 1; } 24% { opacity: .12; } 30% { opacity: 1; } 58%,100% { opacity: 0; } }
@keyframes sealCue { 0% { opacity: 0; transform: scale(3.2) rotate(10deg); filter: blur(5px); } 20% { opacity: 1; transform: scale(.82) rotate(-3deg); filter: blur(0); } 31% { transform: scale(1.08) rotate(1deg); } 76% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes sealFrame { 0% { opacity: 0; transform: rotate(12deg) scale(1.8); } 24% { opacity: 1; transform: rotate(3deg) scale(1); } 78% { opacity: .9; } 100% { opacity: 0; transform: rotate(0) scale(.94); } }
@keyframes inkStroke { 0% { opacity: 0; transform: scaleX(.05) rotate(-5deg); } 20% { opacity: .8; transform: scaleX(1) rotate(-5deg); } 75% { opacity: .7; } 100% { opacity: 0; } }

.preset-comparison {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.comparison-button {
  min-height: 76px;
  padding: 7px;
  display: grid;
  place-items: center;
  background: rgba(8, 27, 22, .88);
}
.comparison-button span { font: 950 40px "STKaiti", "KaiTi", serif; }
.comparison-button small { color: var(--muted); }
.comparison-button[data-preset="gold-burst"] span { color: #ffd65a; text-shadow: 2px 3px 0 #7b260d; }
.comparison-button[data-preset="red-rift"] span { color: #fff0c5; text-shadow: 3px 3px 0 #e32d12; transform: skewX(-6deg); }
.comparison-button[data-preset="cyan-thunder"] span { color: #efffff; text-shadow: 2px 2px 0 #00c7d5, 0 0 8px #00edff; }
.comparison-button[data-preset="ink-seal"] span { color: #f5d173; text-shadow: 3px 3px 0 #6f1f13; }

/* Third-generation action VFX: layered anime skill impacts, not simple text popups. */
.effect-stage {
  width: 500px;
  height: 330px;
  top: 51%;
  overflow: visible;
  isolation: auto;
}

.fx-void,
.fx-texture,
.fx-core,
.fx-rings,
.fx-bolts,
.fx-shards,
.fx-slashes,
.fx-rings i,
.fx-bolts i,
.fx-shards i,
.fx-slashes i {
  position: absolute;
  pointer-events: none;
}

.fx-void,
.fx-texture,
.fx-core,
.fx-rings,
.fx-bolts,
.fx-shards,
.fx-slashes { inset: 0; }

.fx-void { z-index: 0; opacity: 0; border-radius: 50%; }
.fx-texture {
  z-index: 1;
  opacity: 0;
  background: url("./assets/effects/thunder-rift-core-alpha.png") center / 96% auto no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.35) contrast(1.18);
  transform: scale(.2) rotate(-18deg);
}
.fx-core {
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 7%, #c8ffff 8% 22%, #2dceff 33%, rgba(58, 66, 255, .22) 58%, transparent 72%);
  box-shadow: 0 0 22px #bffcff, 0 0 80px #2d8fff;
}
.fx-rings { z-index: 2; }
.fx-rings i {
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 2px solid rgba(221, 252, 255, .9);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 12px #4ae4ff, inset 0 0 12px rgba(118, 237, 255, .7);
}
.fx-rings i:nth-child(2) { border-color: rgba(152, 124, 255, .9); box-shadow: 0 0 12px #9f73ff, inset 0 0 12px rgba(146, 105, 255, .55); }
.fx-rings i:nth-child(3) { border-color: rgba(255, 255, 255, .72); }
.fx-bolts { z-index: 3; opacity: 0; }
.fx-bolts i {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 154px;
  margin: -77px 0 0 -8px;
  background: linear-gradient(180deg, transparent 0 7%, #f6ffff 8% 35%, #53e7ff 48% 69%, transparent 70%);
  clip-path: polygon(46% 0, 100% 0, 65% 35%, 100% 35%, 45% 100%, 51% 55%, 0 55%);
  filter: drop-shadow(0 0 7px #47dbff) drop-shadow(0 0 17px #4877ff);
  transform: rotate(22deg) translateY(-9px) scaleY(.2);
}
.fx-bolts i:nth-child(2) { transform: rotate(143deg) translateY(-20px) scaleY(.18); }
.fx-bolts i:nth-child(3) { transform: rotate(264deg) translateY(-5px) scaleY(.15); }
.fx-shards { z-index: 6; }
.fx-shards i {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 22px;
  opacity: 0;
  background: linear-gradient(135deg, #fff, #66e9ff 42%, #3a5cff);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 0 7px #64eaff);
  --x: 0px;
  --y: 0px;
  --r: 0deg;
}
.fx-shards i:nth-child(1) { --x: 214px; --y: -88px; --r: 45deg; }.fx-shards i:nth-child(2) { --x: 218px; --y: 42px; --r: 120deg; }.fx-shards i:nth-child(3) { --x: 136px; --y: 136px; --r: 185deg; }.fx-shards i:nth-child(4) { --x: 40px; --y: 162px; --r: 225deg; }.fx-shards i:nth-child(5) { --x: -84px; --y: 145px; --r: 292deg; }.fx-shards i:nth-child(6) { --x: -188px; --y: 67px; --r: 330deg; }.fx-shards i:nth-child(7) { --x: -211px; --y: -59px; --r: 21deg; }.fx-shards i:nth-child(8) { --x: -115px; --y: -134px; --r: 96deg; }.fx-shards i:nth-child(9) { --x: -18px; --y: -163px; --r: 166deg; }.fx-shards i:nth-child(10) { --x: 125px; --y: -139px; --r: 246deg; }

.cue-preview {
  z-index: 5;
  min-width: 184px;
  font: 950 116px/.94 "STKaiti", "KaiTi", serif;
  opacity: 0;
  transform: scale(.28);
  filter: blur(3px);
}
.cue-preview[data-length="3"] { font-size: 80px; }.cue-preview[data-length="4"] { font-size: 66px; }
.fx-slashes { z-index: 4; }.fx-slashes i { opacity: 0; }

.preset-cyan-thunder .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fff 0 12%, #d4ffff 13% 29%, #63eaff 48%, #b8a9ff 75%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #24448a;
  text-shadow: 0 3px 0 #4c42b5, 0 8px 0 #17276d, 0 16px 32px rgba(0, 0, 0, .74), 0 0 22px #71e8ff;
}
.preset-cyan-thunder .fx-void { background: radial-gradient(circle, rgba(197,255,255,.18), rgba(52,56,255,.2) 35%, transparent 68%); }

.preset-red-rift .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fff7c8 0 15%, #ffbd4a 25%, #ff4a2c 56%, #ffdf77 78%, #fff3c3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #68160f;
  text-shadow: 0 3px 0 #b12716, 0 8px 0 #52130d, 0 15px 29px rgba(0,0,0,.72), 0 0 18px #ff5731;
}
.preset-red-rift .fx-void { background: radial-gradient(ellipse at center, rgba(255,214,99,.28), rgba(202,31,18,.32) 40%, transparent 72%); }
.preset-red-rift .fx-texture { filter: hue-rotate(138deg) saturate(1.7) contrast(1.3); }
.preset-red-rift .fx-core { background: radial-gradient(circle, #fff7be 0 7%, #ffd359 8% 22%, #ff4a1e 34%, rgba(180,14,8,.24) 60%, transparent 74%); box-shadow: 0 0 26px #ffcf53, 0 0 88px #fc351d; }
.preset-red-rift .fx-rings i { border-color: rgba(255,214,83,.88); box-shadow: 0 0 12px #ff5c2c, inset 0 0 12px rgba(255,84,43,.58); transform: skewX(-25deg); }.preset-red-rift .fx-rings i:nth-child(2) { border-color: rgba(255,88,42,.9); }.preset-red-rift .fx-rings i:nth-child(3) { border-color: rgba(255,235,154,.76); }
.preset-red-rift .fx-bolts i { width: 27px; height: 210px; margin: -105px 0 0 -13px; background: linear-gradient(180deg, transparent 0 10%, #fff4a0 11% 31%, #ff3a1e 48% 72%, transparent 73%); clip-path: polygon(0 40%, 100% 0, 62% 40%, 100% 44%, 3% 100%, 40% 57%, 0 54%); filter: drop-shadow(0 0 8px #ffb230) drop-shadow(0 0 19px #e12b16); }.preset-red-rift .fx-bolts i:nth-child(1) { transform: rotate(-68deg) translateY(-8px) scaleY(.2); }.preset-red-rift .fx-bolts i:nth-child(2) { transform: rotate(21deg) translateY(-12px) scaleY(.18); }.preset-red-rift .fx-bolts i:nth-child(3) { transform: rotate(159deg) translateY(-5px) scaleY(.16); }
.preset-red-rift .fx-shards i { background: linear-gradient(135deg, #fff7c8, #ffbd41 42%, #ee341d); filter: drop-shadow(0 0 7px #ff662e); }
.preset-red-rift .fx-slashes i { left: 50%; top: 50%; width: 356px; height: 18px; margin: -9px 0 0 -178px; background: linear-gradient(90deg, transparent, #ff2f18 15%, #fff0a4 47%, #ff4c1f 77%, transparent); clip-path: polygon(0 50%, 19% 15%, 52% 45%, 100% 53%, 55% 66%, 20% 86%); filter: drop-shadow(0 0 8px #ff4e22); transform: rotate(-16deg) scaleX(.05); }.preset-red-rift .fx-slashes i:nth-child(2) { transform: rotate(35deg) scaleX(.05); }.preset-red-rift .fx-slashes i:nth-child(3) { transform: rotate(82deg) scaleX(.05); }

.preset-gold-burst .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fffde2 0 12%, #ffe978 24%, #d99011 53%, #ffdc60 76%, #fff2ac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #754411;
  text-shadow: 0 3px 0 #b97814, 0 8px 0 #57310b, 0 15px 30px rgba(0,0,0,.72), 0 0 20px #ffe45b;
}
.preset-gold-burst .fx-void { background: radial-gradient(circle, rgba(255,247,179,.3), rgba(241,173,29,.24) 36%, transparent 72%); }
.preset-gold-burst .fx-texture { filter: hue-rotate(48deg) saturate(1.3) brightness(1.08); }.preset-gold-burst .fx-core { background: radial-gradient(circle, #fffbe0 0 9%, #ffe769 10% 24%, #e6a018 38%, rgba(238,158,13,.25) 62%, transparent 75%); box-shadow: 0 0 22px #ffe66c, 0 0 78px #e6a72b; }.preset-gold-burst .fx-rings i { border-color: rgba(255,235,130,.92); box-shadow: 0 0 11px #ffd95a, inset 0 0 11px rgba(255,225,108,.54); }.preset-gold-burst .fx-rings i:nth-child(2) { border-color: rgba(255,187,45,.92); }.preset-gold-burst .fx-bolts i { background: linear-gradient(180deg, transparent 0 7%, #fffbd1 8% 34%, #ffd247 48% 70%, transparent 71%); filter: drop-shadow(0 0 7px #ffe25a) drop-shadow(0 0 16px #e49b1e); }.preset-gold-burst .fx-shards i { background: linear-gradient(135deg, #fffbd0, #ffd44b 42%, #df9218); filter: drop-shadow(0 0 7px #ffe564); }

.preset-ink-seal .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #ffe7a4 0 14%, #e7aa45 33%, #bd382d 66%, #ffe39c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #170d11;
  text-shadow: 0 3px 0 #70241d, 0 8px 0 #180f12, 0 16px 32px rgba(0,0,0,.86), 0 0 16px #e26036;
}
.preset-ink-seal .fx-void { background: radial-gradient(circle, rgba(255,206,116,.15), rgba(109,8,13,.38) 38%, rgba(0,0,0,.22) 62%, transparent 75%); }.preset-ink-seal .fx-texture { filter: hue-rotate(161deg) saturate(.72) brightness(.77); }.preset-ink-seal .fx-core { background: radial-gradient(circle, #ffe9a8 0 7%, #e36b37 12% 26%, #681420 38%, rgba(0,0,0,.32) 63%, transparent 75%); box-shadow: 0 0 23px #ee743f, 0 0 80px #6c101c; }.preset-ink-seal .fx-rings i { border-color: rgba(236,139,75,.7); box-shadow: 0 0 11px #a92425, inset 0 0 12px rgba(80,0,11,.72); border-radius: 16%; transform: rotate(45deg); }.preset-ink-seal .fx-rings i:nth-child(2) { border-color: rgba(255,211,107,.75); }.preset-ink-seal .fx-bolts i { background: linear-gradient(180deg, transparent 0 7%, #ffde83 8% 28%, #a11d20 50% 70%, transparent 71%); filter: drop-shadow(0 0 7px #ee5238) drop-shadow(0 0 18px #5c0d1a); }.preset-ink-seal .fx-shards i { background: linear-gradient(135deg, #ffe498, #c13c2d 44%, #210b16); filter: drop-shadow(0 0 7px #c83d31); }

.effect-stage.play .fx-void { animation: fxVoid 1140ms ease-out both; }
.effect-stage.play .fx-texture { animation: fxTexture 1140ms cubic-bezier(.13,.78,.19,1) both; }
.effect-stage.play .fx-core { animation: fxCore 1140ms ease-out both; }
.effect-stage.play .fx-rings i { animation: fxRing 1140ms cubic-bezier(.1,.74,.2,1) both; }.effect-stage.play .fx-rings i:nth-child(2) { animation-delay: 50ms; }.effect-stage.play .fx-rings i:nth-child(3) { animation-delay: 95ms; }
.effect-stage.play .fx-bolts { animation: fxBolts 700ms steps(2, end) both; }.effect-stage.play .fx-shards i { animation: fxShard 1050ms ease-out both; }.effect-stage.play .cue-preview { animation: fxCue 1140ms cubic-bezier(.1,.8,.16,1) both; }.effect-stage.play .fx-slashes i { animation: fxSlash 820ms cubic-bezier(.1,.75,.18,1) both; }.effect-stage.play .fx-slashes i:nth-child(2) { animation-delay: 46ms; }.effect-stage.play .fx-slashes i:nth-child(3) { animation-delay: 92ms; }

@keyframes fxVoid { 0% { opacity: 0; transform: scale(.1); } 17% { opacity: 1; transform: scale(.9); } 61% { opacity: .8; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes fxTexture { 0% { opacity: 0; transform: scale(.18) rotate(-28deg); } 18% { opacity: .96; transform: scale(1.03) rotate(0); } 49% { opacity: .72; transform: scale(1.16) rotate(10deg); } 100% { opacity: 0; transform: scale(1.34) rotate(16deg); } }
@keyframes fxCore { 0%, 8% { opacity: 0; transform: scale(.1); } 16% { opacity: 1; transform: scale(2.4); } 27% { opacity: .92; transform: scale(.78); } 62% { opacity: .6; transform: scale(1.6); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes fxRing { 0%, 10% { opacity: 0; transform: scale(.1) rotate(0); } 21% { opacity: 1; transform: scale(.72) rotate(18deg); } 68% { opacity: .52; transform: scale(4.8) rotate(110deg); } 100% { opacity: 0; transform: scale(6.2) rotate(160deg); } }
@keyframes fxBolts { 0%, 11% { opacity: 0; } 16% { opacity: 1; } 27% { opacity: .12; } 34% { opacity: 1; } 52% { opacity: .24; } 60% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes fxShard { 0%, 12% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.15); } 26% { opacity: 1; } 78% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.25); } }
@keyframes fxCue { 0% { opacity: 0; transform: scale(2.5) skewX(-16deg); filter: blur(10px) brightness(3); } 16% { opacity: 1; transform: scale(.72) skewX(-4deg); filter: blur(0) brightness(1.4); } 27% { transform: scale(1.16) skewX(2deg); } 67% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92) translateY(-14px); filter: brightness(1.7); } }
@keyframes fxSlash { 0%, 9% { opacity: 0; } 20% { opacity: 1; } 45% { opacity: .9; } 100% { opacity: 0; } }

.preset-red-rift.play .fx-slashes i { animation-name: fxRedSlash; }.preset-ink-seal.play .fx-slashes i { animation-name: fxInkSlash; }.preset-cyan-thunder .fx-slashes i, .preset-gold-burst .fx-slashes i { display: none; }
@keyframes fxRedSlash { 0%, 10% { opacity: 0; transform: rotate(-16deg) scaleX(.04); } 26% { opacity: 1; transform: rotate(-16deg) scaleX(1); } 64% { opacity: .7; transform: rotate(-16deg) translateX(25px) scaleX(.9); } 100% { opacity: 0; transform: rotate(-16deg) translateX(90px) scaleX(.62); } }
@keyframes fxInkSlash { 0%, 10% { opacity: 0; transform: rotate(-16deg) scaleX(.08); } 25% { opacity: .9; transform: rotate(-16deg) scaleX(1.05); } 71% { opacity: .75; } 100% { opacity: 0; transform: rotate(-16deg) scaleX(.92); } }

.comparison-button { position: relative; overflow: hidden; border-color: rgba(234, 213, 166, .22); }.comparison-button::before { content: ""; position: absolute; inset: 0; opacity: .34; background: radial-gradient(circle at 50% 30%, #72ecff, transparent 62%); }.comparison-button > * { position: relative; z-index: 1; }.comparison-button[data-preset="red-rift"]::before { background: radial-gradient(circle at 50% 30%, #ff5932, transparent 62%); }.comparison-button[data-preset="gold-burst"]::before { background: radial-gradient(circle at 50% 30%, #ffe05a, transparent 62%); }.comparison-button[data-preset="ink-seal"]::before { background: radial-gradient(circle at 50% 30%, #d25135, transparent 62%); }

@media (prefers-reduced-motion: reduce) { .effect-stage.play *, .effect-stage.play .fx-rings i { animation-duration: 1ms !important; } }

/* Second-generation action effects. The preset ids stay stable for saved configs. */
.effect-orbits,
.effect-particles,
.effect-orbits i,
.effect-particles i { position: absolute; pointer-events: none; }
.effect-orbits,
.effect-particles { inset: 0; }
.effect-orbits { z-index: 2; }
.effect-particles { z-index: 5; }
.effect-orbits i { left: 50%; top: 50%; opacity: 0; }
.effect-particles i {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  opacity: 0;
  --particle-x: 120px;
  --particle-y: -76px;
}
.effect-particles i:nth-child(2) { --particle-x: 178px; --particle-y: -18px; }
.effect-particles i:nth-child(3) { --particle-x: 137px; --particle-y: 84px; }
.effect-particles i:nth-child(4) { --particle-x: 45px; --particle-y: 111px; }
.effect-particles i:nth-child(5) { --particle-x: -63px; --particle-y: 105px; }
.effect-particles i:nth-child(6) { --particle-x: -154px; --particle-y: 63px; }
.effect-particles i:nth-child(7) { --particle-x: -169px; --particle-y: -32px; }
.effect-particles i:nth-child(8) { --particle-x: -91px; --particle-y: -103px; }

.preset-gold-burst .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fffbd2 2%, #ffe783 20%, #f9c92c 48%, #fff1a1 63%, #c99612 82%, #fff0a2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #6f570d;
  text-shadow: 0 2px 0 #fff4a4, 0 6px 0 #9b7612, 0 11px 0 #4a3a08, 0 17px 30px rgba(0, 0, 0, .72), 0 0 22px #ffe765;
  filter: drop-shadow(0 0 7px rgba(255, 231, 101, .95));
}
.preset-gold-burst .effect-flare {
  inset: 16px;
  border: 2px solid rgba(255, 233, 126, .8);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 249, 189, .96) 0 4%, rgba(255, 211, 48, .42) 5% 28%, transparent 58%),
    repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(255, 224, 94, .96) 8deg 9deg, transparent 10deg 18deg);
  clip-path: none;
  box-shadow: 0 0 20px #ffd951, inset 0 0 38px rgba(255, 228, 103, .48);
}
.preset-gold-burst .effect-orbits i {
  width: 292px;
  height: 112px;
  margin: -56px 0 0 -146px;
  border: 2px solid rgba(255, 239, 148, .9);
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd84d, inset 0 0 8px rgba(255, 240, 147, .65);
}
.preset-gold-burst .effect-orbits i:nth-child(2) { transform: rotate(60deg); }
.preset-gold-burst .effect-orbits i:nth-child(3) { transform: rotate(-60deg); }
.preset-gold-burst .effect-particles i {
  background: linear-gradient(135deg, #fffbd0, #f5bd1e 55%, #fff3a1);
  transform: rotate(45deg);
  box-shadow: 0 0 9px #ffdf55;
}
.preset-gold-burst.play .effect-orbits i { animation: goldOrbit 1500ms cubic-bezier(.15,.78,.2,1) both; }
.preset-gold-burst.play .effect-orbits i:nth-child(2) { animation-delay: 35ms; }
.preset-gold-burst.play .effect-orbits i:nth-child(3) { animation-delay: 70ms; }
.preset-gold-burst.play .effect-particles i { animation: particleBurst 1500ms ease-out both; }

.preset-red-rift .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0, #dffcff 20%, #73e7f1 48%, #f8ffff 61%, #62b8d8 84%, #d9fbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #174e68;
  text-shadow: 0 4px 0 #5bc5dc, 0 9px 0 #173b57, 0 15px 25px rgba(0, 12, 29, .8), 0 0 24px #b7fbff;
  transform: none;
}
.preset-red-rift .effect-flare {
  inset: 26px 42px;
  border: 0;
  border-radius: 34% 66% 58% 42%;
  background:
    radial-gradient(circle at 50% 50%, rgba(229, 254, 255, .88), rgba(71, 198, 226, .32) 32%, transparent 61%),
    conic-gradient(from 12deg, transparent 0 8%, rgba(184, 248, 255, .92) 9% 11%, transparent 12% 22%, rgba(80, 208, 240, .85) 23% 25%, transparent 26% 100%);
  box-shadow: 0 0 36px rgba(130, 237, 255, .8), inset 0 0 35px rgba(225, 253, 255, .8);
  transform: none;
}
.preset-red-rift .effect-orbits i {
  width: 300px;
  height: 150px;
  margin: -75px 0 0 -150px;
  border: 3px dashed rgba(211, 251, 255, .92);
  border-radius: 50%;
  filter: drop-shadow(0 0 7px #61dbf0);
}
.preset-red-rift .effect-orbits i:nth-child(2) { width: 228px; height: 228px; margin: -114px 0 0 -114px; }
.preset-red-rift .effect-orbits i:nth-child(3) { width: 344px; height: 82px; margin: -41px 0 0 -172px; }
.preset-red-rift .effect-slashes i {
  width: 76px;
  height: 118px;
  left: 65px;
  top: 70px;
  background: linear-gradient(135deg, #f4ffff, #78ddec 65%, transparent 66%);
  clip-path: polygon(48% 0, 100% 72%, 62% 59%, 43% 100%, 0 23%);
  box-shadow: none;
  transform: rotate(-24deg);
}
.preset-red-rift .effect-slashes i:nth-child(2) { left: 268px; top: 53px; transform: rotate(29deg); }
.preset-red-rift .effect-slashes i:nth-child(3) { left: 184px; top: 14px; height: 94px; transform: rotate(5deg); }
.preset-red-rift .effect-particles i {
  width: 13px;
  height: 18px;
  background: linear-gradient(145deg, #fff, #8ce5ef);
  clip-path: polygon(50% 0, 100% 45%, 67% 100%, 0 75%, 12% 16%);
  filter: drop-shadow(0 0 6px #9ef7ff);
}
.preset-red-rift.play .cue-preview { animation: iceCue 1500ms cubic-bezier(.14,.84,.2,1) both; }
.preset-red-rift.play .effect-flare { animation: iceBloom 1500ms ease-out both; }
.preset-red-rift.play .effect-orbits i { animation: iceOrbit 1500ms ease-out both; }
.preset-red-rift.play .effect-slashes i { animation: iceShard 1500ms ease-out both; }
.preset-red-rift.play .effect-particles i { animation: particleBurst 1500ms ease-out both; }

.preset-cyan-thunder .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0, #d6e7ff 22%, #6eb5ff 47%, #f7fbff 59%, #2875c9 84%, #dcecff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #102d69;
  text-shadow: 0 4px 0 #558ee8, 0 9px 0 #132e70, 0 0 12px #dff9ff, 0 0 32px #258bff, 0 16px 28px rgba(0, 4, 29, .85);
}
.preset-cyan-thunder .effect-flare {
  inset: 28px 45px;
  border: 4px solid rgba(215, 238, 255, .92);
  background: radial-gradient(circle, rgba(229, 249, 255, .75), rgba(45, 116, 255, .3) 35%, transparent 66%);
  clip-path: polygon(50% 0, 63% 14%, 82% 8%, 87% 27%, 100% 40%, 91% 58%, 94% 78%, 73% 83%, 60% 100%, 42% 90%, 22% 96%, 16% 74%, 0 61%, 10% 42%, 5% 22%, 29% 17%);
  box-shadow: inset 0 0 28px #4d8fff, 0 0 30px #3f8cff;
}
.preset-cyan-thunder .effect-orbits i {
  width: 322px;
  height: 126px;
  margin: -63px 0 0 -161px;
  border: 2px solid rgba(192, 226, 255, .88);
  border-radius: 50%;
  box-shadow: 0 0 12px #559dff;
}
.preset-cyan-thunder .effect-orbits i:nth-child(2) { transform: rotate(58deg); }
.preset-cyan-thunder .effect-orbits i:nth-child(3) { transform: rotate(-58deg); }
.preset-cyan-thunder .effect-slashes i {
  width: 22px;
  height: 190px;
  top: 28px;
  left: 104px;
  background: linear-gradient(90deg, transparent, #f8ffff 40%, #73baff 65%, transparent);
  clip-path: polygon(38% 0, 100% 0, 62% 41%, 100% 38%, 15% 100%, 39% 54%, 0 58%);
  transform: rotate(28deg);
  box-shadow: none;
  filter: drop-shadow(0 0 8px #5ba2ff);
}
.preset-cyan-thunder .effect-slashes i:nth-child(2) { left: 274px; top: 40px; transform: rotate(-25deg); }
.preset-cyan-thunder .effect-slashes i:nth-child(3) { left: 192px; top: 3px; height: 238px; transform: rotate(6deg); }
.preset-cyan-thunder .effect-particles i {
  width: 7px;
  height: 20px;
  background: #e9fbff;
  box-shadow: 0 0 10px #4e9dff;
  transform: rotate(18deg);
}
.preset-cyan-thunder.play .cue-preview { animation: warThunderCue 1500ms cubic-bezier(.16,.88,.2,1) both; }
.preset-cyan-thunder.play .effect-flare { animation: thunderCore 1500ms steps(7, end) both; }
.preset-cyan-thunder.play .effect-orbits i { animation: thunderOrbit 1500ms ease-out both; }
.preset-cyan-thunder.play .effect-slashes i { animation: lightningStrike 1500ms steps(6, end) both; }
.preset-cyan-thunder.play .effect-particles i { animation: particleBurst 1500ms ease-out both; }

.preset-ink-seal .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fff2bb 0, #c9a14c 18%, #28231d 43%, #070908 56%, #8b6a2d 77%, #f4d77d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #e2bd68;
  text-shadow: 0 3px 0 #f6db8c, 0 7px 0 #262019, 0 13px 22px #000, 0 0 18px rgba(225, 191, 103, .72);
}
.preset-ink-seal .effect-flare {
  inset: 24px 40px;
  border: 3px double #d7b66c;
  border-radius: 42% 58% 37% 63% / 61% 34% 66% 39%;
  background:
    radial-gradient(ellipse at center, rgba(3, 8, 7, .9) 0 35%, rgba(14, 31, 27, .72) 48%, transparent 70%),
    conic-gradient(from 20deg, transparent, rgba(226, 190, 102, .5), transparent 24%, rgba(0,0,0,.8) 38%, transparent 57%, rgba(226, 190, 102, .42), transparent);
  box-shadow: 0 0 0 6px rgba(7, 13, 11, .62), inset 0 0 33px #000, 0 0 24px rgba(225, 189, 101, .46);
  transform: none;
}
.preset-ink-seal .effect-orbits i {
  width: 310px;
  height: 142px;
  margin: -71px 0 0 -155px;
  border: 5px solid rgba(8, 12, 10, .82);
  border-left-color: #d2ae60;
  border-radius: 46% 54% 36% 64%;
  filter: drop-shadow(0 0 4px #d4b263);
}
.preset-ink-seal .effect-orbits i:nth-child(2) { width: 262px; height: 186px; margin: -93px 0 0 -131px; transform: rotate(67deg); }
.preset-ink-seal .effect-orbits i:nth-child(3) { width: 350px; height: 92px; margin: -46px 0 0 -175px; transform: rotate(-9deg); }
.preset-ink-seal .effect-slashes i {
  width: 330px;
  height: 22px;
  left: 36px;
  top: 62px;
  border-radius: 70% 30% 55% 45%;
  background: linear-gradient(90deg, transparent, #030504 8%, #161d18 68%, transparent);
  transform: rotate(-7deg);
  opacity: .92;
}
.preset-ink-seal .effect-slashes i:nth-child(2) { top: 184px; left: 18px; transform: rotate(5deg); }
.preset-ink-seal .effect-slashes i:nth-child(3) { width: 24px; height: 230px; left: 188px; top: 15px; transform: rotate(14deg); }
.preset-ink-seal .effect-particles i {
  width: 12px;
  height: 12px;
  border-radius: 50% 30% 60% 40%;
  background: #080b09;
  box-shadow: 0 0 0 1px rgba(224, 190, 108, .54);
}
.preset-ink-seal.play .cue-preview { animation: mountainSealCue 1500ms cubic-bezier(.12,.83,.16,1) both; }
.preset-ink-seal.play .effect-flare { animation: inkTide 1500ms ease-out both; }
.preset-ink-seal.play .effect-orbits i { animation: inkOrbit 1500ms ease-out both; }
.preset-ink-seal.play .effect-slashes i { animation: brushSweep 1500ms ease-out both; }
.preset-ink-seal.play .effect-particles i { animation: particleBurst 1500ms ease-out both; }

@keyframes goldOrbit { 0% { opacity: 0; transform: scale(.22) rotate(-70deg); } 24% { opacity: 1; transform: scale(1.04) rotate(5deg); } 72% { opacity: .9; } 100% { opacity: 0; transform: scale(1.28) rotate(48deg); } }
@keyframes particleBurst { 0%, 12% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); } 27% { opacity: 1; } 78% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(1.25) rotate(210deg); } }
@keyframes iceCue { 0% { opacity: 0; transform: scale(1.9); filter: blur(9px) brightness(2); } 18% { opacity: 1; transform: scale(.82); filter: blur(0) brightness(1.4); } 31% { transform: scale(1.08); } 77% { opacity: 1; } 100% { opacity: 0; transform: scale(1.14); filter: brightness(1.8); } }
@keyframes iceBloom { 0% { opacity: 0; transform: scale(.12) rotate(-40deg); } 23% { opacity: 1; transform: scale(1.05) rotate(4deg); } 100% { opacity: 0; transform: scale(1.34) rotate(28deg); } }
@keyframes iceOrbit { 0% { opacity: 0; transform: scale(.2) rotate(-90deg); } 25% { opacity: .95; transform: scale(1) rotate(8deg); } 100% { opacity: 0; transform: scale(1.24) rotate(90deg); } }
@keyframes iceShard { 0%, 13% { opacity: 0; translate: 0 70px; scale: .25; } 28% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 -55px; scale: 1.1; } }
@keyframes warThunderCue { 0% { opacity: 0; transform: scale(.24); filter: brightness(4); } 16% { opacity: 1; transform: scale(1.22); } 23% { transform: translateX(-8px) scale(.96); } 29% { transform: translateX(7px) scale(1.04); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); filter: brightness(2); } }
@keyframes thunderCore { 0%, 9% { opacity: 0; transform: scale(.16); } 15% { opacity: 1; transform: scale(1.04); } 22% { opacity: .15; } 28% { opacity: 1; } 68% { opacity: .88; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes thunderOrbit { 0% { opacity: 0; transform: scale(.15) rotate(-110deg); } 19% { opacity: 1; transform: scale(1.04) rotate(12deg); } 100% { opacity: 0; transform: scale(1.32) rotate(150deg); } }
@keyframes lightningStrike { 0%, 11% { opacity: 0; } 16% { opacity: 1; } 22% { opacity: .08; } 27% { opacity: 1; } 48% { opacity: .18; } 55% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes mountainSealCue { 0% { opacity: 0; transform: scale(2.8) rotate(8deg); filter: blur(7px); } 19% { opacity: 1; transform: scale(.78) rotate(-2deg); filter: blur(0); } 31% { transform: scale(1.08); } 76% { opacity: 1; } 100% { opacity: 0; transform: scale(.9) translateY(12px); } }
@keyframes inkTide { 0% { opacity: 0; transform: scale(.18) rotate(-18deg); } 24% { opacity: 1; transform: scale(1.05) rotate(2deg); } 78% { opacity: .9; } 100% { opacity: 0; transform: scale(1.28) rotate(9deg); } }
@keyframes inkOrbit { 0% { opacity: 0; transform: scale(.3) rotate(-70deg); } 26% { opacity: 1; transform: scale(1) rotate(5deg); } 100% { opacity: 0; transform: scale(1.2) rotate(65deg); } }
@keyframes brushSweep { 0%, 12% { opacity: 0; scale: .04 1; transform-origin: left center; } 26% { opacity: .95; scale: 1 1; } 79% { opacity: .85; } 100% { opacity: 0; translate: 75px 0; } }

.comparison-button[data-preset="gold-burst"] span {
  color: #ffd94e;
  text-shadow: 0 2px 0 #fff2a1, 0 5px 0 #735a0e, 0 0 10px #ffe273;
}
.comparison-button[data-preset="red-rift"] span {
  color: #eaffff;
  text-shadow: 0 3px 0 #55bdd3, 0 0 10px #9cf6ff;
  transform: none;
}
.comparison-button[data-preset="cyan-thunder"] span {
  color: #f1f7ff;
  text-shadow: 0 3px 0 #377bd2, 0 0 12px #559dff;
}
.comparison-button[data-preset="ink-seal"] span {
  color: #d9b965;
  text-shadow: 0 3px 0 #171713, 0 0 9px #d7b66c;
}

.config-output { margin-top: 12px; }
.config-output textarea {
  width: 100%;
  height: 136px;
  resize: vertical;
  padding: 10px;
  color: #e8f5ee;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 1100px) {
  body { min-width: 1024px; }
  .lab-layout { grid-template-columns: 360px minmax(0, 1fr); }
  .scene-table { min-height: 390px; }
  .effect-stage { transform: translate(-50%, -50%) scale(.85); }
}

/* Keep the third-generation VFX above the earlier experimental styles. */
.effect-stage.play .cue-preview { animation: fxCue 1140ms cubic-bezier(.1,.8,.16,1) both; }
.effect-stage.play .fx-slashes i { animation: fxSlash 820ms cubic-bezier(.1,.75,.18,1) both; }
.preset-red-rift.play .fx-slashes i { animation-name: fxRedSlash; }
.preset-ink-seal.play .fx-slashes i { animation-name: fxInkSlash; }
.preset-cyan-thunder .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fff 0 12%, #d4ffff 13% 29%, #63eaff 48%, #b8a9ff 75%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #24448a;
  text-shadow: 0 3px 0 #4c42b5, 0 8px 0 #17276d, 0 16px 32px rgba(0, 0, 0, .74), 0 0 22px #71e8ff;
}
.preset-red-rift .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fff7c8 0 15%, #ffbd4a 25%, #ff4a2c 56%, #ffdf77 78%, #fff3c3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #68160f;
  text-shadow: 0 3px 0 #b12716, 0 8px 0 #52130d, 0 15px 29px rgba(0,0,0,.72), 0 0 18px #ff5731;
}
.preset-gold-burst .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #fffde2 0 12%, #ffe978 24%, #d99011 53%, #ffdc60 76%, #fff2ac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #754411;
  text-shadow: 0 3px 0 #b97814, 0 8px 0 #57310b, 0 15px 30px rgba(0,0,0,.72), 0 0 20px #ffe45b;
}
.preset-ink-seal .cue-preview {
  color: transparent;
  background: linear-gradient(180deg, #ffe7a4 0 14%, #e7aa45 33%, #bd382d 66%, #ffe39c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #170d11;
  text-shadow: 0 3px 0 #70241d, 0 8px 0 #180f12, 0 16px 32px rgba(0,0,0,.86), 0 0 16px #e26036;
}