/* Shared by the character editor, the game table, and participant views. */
.character-cut-in-effect{isolation:isolate;overflow:hidden}
.character-cut-in-effect::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0}
.character-cut-in-effect > :first-child,.character-cut-in-effect .cut-in-bubble{position:relative;z-index:1;animation-fill-mode:both;animation-duration:.78s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.character-cut-in-effect .cut-in-bubble{animation-name:cutin-bubble;animation-delay:.16s}
.character-cut-in-effect[data-effect="side_sweep"] > :first-child{animation-name:cutin-side}
.character-cut-in-effect[data-effect="diagonal"] > :first-child{animation-name:cutin-diagonal}
.character-cut-in-effect[data-effect="rise"] > :first-child{animation-name:cutin-rise}
.character-cut-in-effect[data-effect="zoom"] > :first-child{animation-name:cutin-zoom}
.character-cut-in-effect[data-effect="split_band"]::before{inset:-8%;background:
  linear-gradient(180deg,var(--cutin-band-edge,#b4c8d7) 0 2px,var(--cutin-band-top,#375262) 2px calc(100% - 2px),var(--cutin-band-edge,#b4c8d7) calc(100% - 2px)) 0 8% /100% 16% no-repeat,
  linear-gradient(180deg,var(--cutin-band-edge,#b4c8d7) 0 3px,var(--cutin-band-main,#294556) 3px calc(100% - 3px),var(--cutin-band-edge,#b4c8d7) calc(100% - 3px)) 0 38% /100% 43% no-repeat,
  linear-gradient(180deg,var(--cutin-band-edge,#b4c8d7) 0 2px,var(--cutin-band-bottom,#344f5c) 2px calc(100% - 2px),var(--cutin-band-edge,#b4c8d7) calc(100% - 2px)) 0 91% /100% 10% no-repeat;
  filter:drop-shadow(0 10px 18px #000b);animation:cutin-bands-in .9s cubic-bezier(.16,1,.3,1) both}
.character-cut-in-effect[data-effect="split_band"] > :first-child{animation-name:cutin-reveal;animation-delay:.28s}
.character-cut-in-effect[data-effect="split_band"] .cut-in-bubble{animation-delay:.5s}
.character-cut-in-effect[data-effect="bubble_first"] .cut-in-bubble{animation-name:cutin-bubble-first;animation-delay:0s}
.character-cut-in-effect[data-effect="bubble_first"] > :first-child{animation-name:cutin-zoom;animation-delay:.42s;animation-duration:.58s}
.character-cut-in-effect[data-effect="edge_hold"] > :first-child{animation-name:cutin-edge}
.character-cut-in-effect[data-effect="edge_hold"] .cut-in-bubble{animation-name:cutin-edge-bubble}
.character-cut-in-effect[data-effect="full_impact"]::before{background:#fff3c7;animation:cutin-flash .64s ease-out both}
.character-cut-in-effect[data-effect="full_impact"] > :first-child{animation-name:cutin-impact}
.character-cut-in-effect[data-effect="full_impact"] .cut-in-bubble{animation-name:cutin-bubble-first;animation-delay:.2s}
@keyframes cutin-side{from{opacity:0;transform:translateX(-70vw) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes cutin-diagonal{from{opacity:0;transform:translate(50vw,-55vh) rotate(18deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes cutin-rise{from{opacity:0;transform:translateY(65vh) scale(.85)}to{opacity:1;transform:none}}
@keyframes cutin-zoom{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes cutin-reveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes cutin-bands-in{from{opacity:0;transform:translateX(-115%) skewY(-7deg)}to{opacity:1;transform:translateX(0) skewY(-7deg)}}
@keyframes cutin-bubble{from{opacity:0;transform:translateX(38px) scale(.94)}to{opacity:1;transform:none}}
@keyframes cutin-bubble-first{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes cutin-edge{from{opacity:0;transform:translateX(90vw)}to{opacity:1;transform:translateX(8%)}}
@keyframes cutin-edge-bubble{from{opacity:0;transform:translateX(-50vw)}to{opacity:1;transform:none}}
@keyframes cutin-flash{0%{opacity:0}15%{opacity:.8}100%{opacity:0}}
@keyframes cutin-impact{0%{opacity:0;transform:scale(2.3) rotate(-12deg)}65%{opacity:1;transform:scale(.93) rotate(2deg)}100%{opacity:1;transform:none}}
.cut-in-preview-dialog{width:min(900px,calc(100vw - 24px));max-width:900px}
.cut-in-preview-body{display:grid;gap:14px}
.cut-in-preview-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:4%;width:100%;min-height:260px;aspect-ratio:16/9;padding:24px;border:1px solid #476478;border-radius:12px;background:radial-gradient(circle at 50% 50%,#214757 0,#0a1724 68%);color:#fff}
.cut-in-preview-stage > img{width:40%;max-height:90%;object-fit:contain;filter:drop-shadow(0 14px 25px #000a)}
.cut-in-preview-stage .cut-in-bubble{width:min(48%,400px);padding:18px 22px;border:2px solid #e9c878;border-radius:16px;background:#112a2be8;box-shadow:0 18px 36px #0009}
.cut-in-preview-stage .cut-in-bubble strong{color:#e9c878}
.cut-in-preview-stage .cut-in-bubble p{margin:6px 0 0;font-size:clamp(14px,2vw,24px);line-height:1.5;overflow-wrap:anywhere}
@media(max-width:650px){.cut-in-preview-stage{flex-direction:column;min-height:360px;aspect-ratio:auto;gap:8px}.cut-in-preview-stage > img{width:58%;max-height:210px}.cut-in-preview-stage .cut-in-bubble{width:100%;padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.character-cut-in-effect::before,.character-cut-in-effect > :first-child,.character-cut-in-effect .cut-in-bubble{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}.character-cut-in-effect::before{opacity:0!important}}
@media(prefers-reduced-motion:reduce){.character-cut-in-effect[data-effect="split_band"]::before{opacity:1!important;transform:skewY(-7deg)!important}}