/* Relay lineup: the newest performance stands in front, earlier ones step back-left, dimmed and
   rim-lit in their own color, and the whole lineup fades out together as one team shot. */
#cutin { position: fixed; inset: 0; display: none; overflow: hidden; pointer-events: none; z-index: 3; }
#cutin.show { display: block; }
#cutin.full-stage { background: radial-gradient(ellipse 55% 75% at 76% 64%, color-mix(in srgb, var(--c, #ff738b) 26%, transparent), transparent 72%), linear-gradient(110deg, #060a15e6, #0f1a30c4 55%, #060a15dc); }
#cutin.paused-stage::after { content: 'CUT-IN  /  전투 일시정지'; position: absolute; left: 50%; top: 24px; transform: translateX(-50%); color: #fff2c7; padding: 8px 18px; background: #101c30e8; border: 1px solid #baa572; font: 12px var(--pixel-font, sans-serif); z-index: 100; }
#cutin .ci-layer { transition: opacity .2s linear; }
@property --ci-floor { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
#cutin .ci-fig { position: absolute; inset: 0; transform-origin: 100% 100%; --ci-floor: 0%; -webkit-mask-image: linear-gradient(to top, #0000, #000 var(--ci-floor)); mask-image: linear-gradient(to top, #0000, #000 var(--ci-floor)); transition: transform .5s cubic-bezier(.2,.85,.25,1), opacity .45s ease, --ci-floor .5s ease; }
#cutin .ci-layer:not(.fullscreen) .ci-fig { --ci-floor: 12%; }
/* Back-row performers sink into shadow from the feet up, so the front caption stays clean. */
#cutin .ci-layer:is(:not([data-depth="0"]), .leave) .ci-fig { --ci-floor: 42%; }
#cutin .ci-por { transition: filter .45s ease; }
/* Steps back: position, scale and light by depth (percentages of the figure's own width). */
#cutin .ci-layer[data-depth="1"] .ci-fig { transform: translateX(-34%) scale(.88); }
#cutin .ci-layer[data-depth="2"] .ci-fig { transform: translateX(-60%) scale(.78); }
#cutin .ci-layer[data-depth="3"] .ci-fig { transform: translateX(-80%) scale(.7); }
#cutin .ci-layer.leave .ci-fig { transform: translateX(-104%) scale(.64); opacity: 0; }
#cutin .ci-layer[data-depth="1"] .ci-por { filter: brightness(.72) saturate(.75) drop-shadow(0 0 1.5px var(--c)) drop-shadow(0 0 12px #000c); }
#cutin .ci-layer[data-depth="2"] .ci-por { filter: brightness(.55) saturate(.6) drop-shadow(0 0 1.5px var(--c)) drop-shadow(0 0 12px #000c); }
#cutin .ci-layer:is([data-depth="3"], .leave) .ci-por { filter: brightness(.38) saturate(.45) drop-shadow(0 0 1.5px var(--c)) drop-shadow(0 0 12px #000c); }
/* Only the front performance speaks; earlier captions, accents and chain labels step aside. */
#cutin .ci-layer :is(.ci-text, .ci-chain, .ci-band, .ci-lines, .ci-duo-frame) { transition: opacity .2s ease; }
#cutin .ci-layer:is(:not([data-depth="0"]), .leave) :is(.ci-text, .ci-chain, .ci-band, .ci-lines, .ci-flash, .ci-duo-frame) { opacity: 0; }
/* Handoff: a light blade sweeps across as the next performer pushes the lineup back. */
.ci-wipe { display: none; }
#cutin .ci-layer.relay .ci-wipe { display: block; position: absolute; z-index: 5; top: -25%; bottom: -25%; right: -22%; width: 16%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 55%, transparent) 30%, #fffbe8 52%, color-mix(in srgb, var(--c) 55%, transparent) 70%, transparent); mix-blend-mode: screen; animation: ciWipe .42s cubic-bezier(.35,.6,.25,1) forwards; }
@keyframes ciWipe { from { transform: translateX(0) skewX(-20deg); opacity: 1; } 70% { opacity: .9; } to { transform: translateX(-820%) skewX(-20deg); opacity: 0; } }
/* Name tag for performers standing in the back row (full-screen only). */
.ci-tag { display: none; }
#cutin .ci-layer.fullscreen .ci-tag { display: block; position: absolute; z-index: 3; left: 50%; top: 9%; padding: 3px 14px 4px 10px; white-space: nowrap; border-left: 3px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 58%, #0b1220), #0b1220d8 70%, #0b122000); text-shadow: 0 1px 2px #000; opacity: 0; transform: translate(-50%, -8px) skewX(-12deg); transition: opacity .3s .18s, transform .3s .18s; }
#cutin .ci-layer.fullscreen:not([data-depth="0"], .leave) .ci-tag { opacity: 1; transform: translate(-50%, 0) skewX(-12deg); }
#cutin .ci-tag b { font-size: clamp(13px, 1.35vw, 18px); font-weight: 900; letter-spacing: 1px; color: #fff; }
#cutin .ci-tag span { margin-left: 8px; font-size: clamp(11px, 1.1vw, 15px); font-weight: 700; color: #f3e6c4; }

/* Full screen: every performance keeps a real stage slot instead of shrinking into a thumbnail. */
#cutin .ci-layer.fullscreen { left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#cutin .ci-layer.fullscreen .ci-fig { inset: auto; right: 4vw; bottom: 0; width: min(66vh, 46vw); height: 100%; transform-origin: 50% 100%; }
#cutin .ci-layer.fullscreen .ci-fig::before { content: ''; position: absolute; z-index: 0; inset: 12% -22% -4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 42%, transparent), transparent); transition: opacity .4s; }
#cutin .ci-layer.fullscreen:not([data-depth="0"]) .ci-fig::before { opacity: 0; }
#cutin .ci-layer.fullscreen .ci-por { right: 0; bottom: 0; width: 100%; max-width: 100%; height: 97%; object-position: center bottom; }
#cutin .ci-layer.fullscreen[data-depth="1"] .ci-fig { transform: translateX(-62%) scale(.9); }
#cutin .ci-layer.fullscreen[data-depth="2"] .ci-fig { transform: translateX(-112%) scale(.8); }
#cutin .ci-layer.fullscreen[data-depth="3"] .ci-fig { transform: translateX(-152%) scale(.71); }
#cutin .ci-layer.fullscreen.leave .ci-fig { transform: translateX(-196%) scale(.64); }
#cutin .ci-layer.fullscreen .ci-text { left: 5vw; bottom: 9vh; max-width: min(48vw, 680px); padding: 14px 26px 14px 22px; border-left: 4px solid var(--c); background: linear-gradient(90deg, #0d1424f0, #0d1424a8 70%, transparent); }
#cutin .ci-layer.fullscreen .ci-name { font-size: clamp(30px, 5vw, 70px); }
#cutin .ci-layer.fullscreen .ci-who { font-size: clamp(12px, 1.5vw, 20px); }
#cutin .ci-layer.fullscreen .ci-line { font-size: clamp(12px, 1.7vw, 22px); }
#cutin .ci-layer.fullscreen .ci-chain { font-size: clamp(22px, 3.2vw, 42px); }
#cutin .ci-layer.fullscreen:not(.link) :is(.ci-band, .ci-lines) { left: auto; right: 0; width: 62%; }
/* Duet: a wide two-person frame that steps back the same way. */
#cutin .ci-layer.fullscreen.link .ci-fig { right: 3vw; bottom: 17vh; width: min(62vw, 104vh); height: 70vh; }
#cutin .ci-layer.fullscreen.link .ci-por { height: 100%; width: 50%; max-width: 50%; }
#cutin .ci-layer.fullscreen.link .ci-por.p2 { right: 50%; }
#cutin .ci-layer.fullscreen.link.duo-art .ci-por.p1 { inset: 0; width: 100%; max-width: 100%; height: 100%; object-position: center; }
#cutin .ci-layer.fullscreen.link .ci-duo-frame { inset: 0; }
#cutin .ci-layer.fullscreen.link .ci-text { bottom: 3vh; }
.cutin-settings { box-sizing: border-box; width: min(530px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 24px; overflow-y: auto; color: #f5efdd; background: #112334; border: 2px solid #c8b47e; font: 14px var(--pixel-font, sans-serif); }
.cutin-settings::backdrop { background: #050b15b8; }
.cutin-settings header, .cutin-settings footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cutin-settings h2 { margin: 0; font-size: 23px; }
.cutin-settings p { color: #c0ccd6; line-height: 1.6; }
.cutin-settings fieldset { border: 0; padding: 0; margin: 20px 0; }
.cutin-settings legend { margin-bottom: 10px; color: #e6ce95; }
.cutin-settings label { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid #3f566b; cursor: pointer; }
.cutin-settings label:has(input:checked) { border-color: #e6ce95; background: #273f50; }
.cutin-settings small { display: block; color: #bbcad6; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.cutin-settings input { accent-color: #e6ce95; width: 18px; height: 18px; flex-shrink: 0; }
.cutin-settings button { color: inherit; background: #263f50; border: 1px solid #bca674; padding: 8px 18px; min-height: 40px; font: inherit; cursor: pointer; }
.cutin-settings footer { justify-content: flex-end; margin-top: 20px; }
.cutin-settings button[value="close"] { background: #d8bd7b; color: #14202b; }
.cutin-settings :focus-visible { outline: 2px solid #ffe4a2; outline-offset: 3px; }
/* JRPG dialogue uses the upper half of the original standing illustration. */
#cine:is(.full, .scene, .over) .cn-por { bottom: 10%; height: 82%; width: min(54vw, 670px); max-width: none; overflow: hidden; }
#cine:is(.full, .scene, .over) .cn-por.l { left: 1%; } #cine:is(.full, .scene, .over) .cn-por.r { right: 1%; }
#cine:is(.full, .scene, .over) .cn-por img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 174%; width: auto; max-width: none; object-fit: contain; image-rendering: auto; }
#cine:is(.full, .scene, .over) .cn-por.npc img { height: 110%; }
#cine:is(.full, .scene, .over) .cn-box { box-sizing: border-box; width: min(1080px, 92vw); min-height: 144px; padding: 28px 34px 24px; background: linear-gradient(120deg, #0d1b2ff5, #192e45ed); border: 1px solid #d4c392; border-top: 3px solid #e5d3a5; box-shadow: 0 0 0 4px #0b1526a8, 0 14px 40px #0008; }
#cine:is(.full, .scene, .over) .cn-name { top: -20px; left: 24px; padding: 6px 24px; font-size: 16px; letter-spacing: 1px; }
#cine:is(.full, .scene, .over) .cn-text { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.8; }
@media (max-width: 600px) {
  #cine:is(.full, .scene, .over) .cn-por { width: 88vw; height: 70%; bottom: 21%; }
  #cine:is(.full, .scene, .over) .cn-por.on { opacity: .4; }
  #cine:is(.full, .scene, .over) .cn-por.l { left: -16%; } #cine:is(.full, .scene, .over) .cn-por.r { right: -16%; }
  #cine:is(.full, .scene, .over) .cn-por.talk { opacity: 1; z-index: 7; }
  #cine:is(.full, .scene, .over) .cn-box { min-height: 158px; padding: 24px 18px 20px; }
  #cine:is(.full, .scene, .over) .cn-name { font-size: 14px; }
  #cutin .ci-layer:not(.fullscreen) { right: 12px; bottom: 190px; width: 65vw; height: 34vh; }
  #cutin .ci-layer.fullscreen .ci-fig { right: 0; width: 84vw; height: 78%; bottom: 14%; }
  #cutin .ci-layer.fullscreen[data-depth="1"] .ci-fig { transform: translateX(-40%) scale(.9); }
  #cutin .ci-layer.fullscreen[data-depth="2"] .ci-fig { transform: translateX(-66%) scale(.8); }
  #cutin .ci-layer.fullscreen[data-depth="3"] .ci-fig { transform: translateX(-84%) scale(.71); }
  #cutin .ci-layer.fullscreen .ci-text { left: 4vw; right: 4vw; bottom: 4vh; max-width: none; }
  .cutin-settings { padding: 16px; }
}
@media (max-height: 480px) {
  #cutin .ci-layer.fullscreen .ci-text { bottom: 5vh; max-width: 42vw; padding: 8px 16px 8px 12px; }
  #cutin .ci-layer.fullscreen .ci-name { font-size: clamp(20px, 7.5vh, 32px); }
  #cutin .ci-layer.fullscreen .ci-who, #cutin .ci-layer.fullscreen .ci-line { font-size: 11px; }
  #cutin .ci-layer.fullscreen .ci-chain { font-size: 18px; }
  #cutin .ci-tag b { font-size: 11px; } #cutin .ci-tag span { font-size: 10px; }
  #cine:is(.full, .scene, .over) .cn-por { height: 87%; bottom: 5%; }
  #cine:is(.full, .scene, .over) .cn-box { min-height: 94px; padding: 18px 22px 12px; }
  #cine:is(.full, .scene, .over) .cn-text { font-size: 13px; line-height: 1.5; }
  #cine:is(.full, .scene, .over) .cn-name { font-size: 12px; padding: 4px 16px; top: -17px; }
}
@media (prefers-reduced-motion: reduce) {
  #cutin :is(.ci-layer, .ci-fig, .ci-por, .ci-tag), #cine:is(.full, .scene, .over) .cn-por { transition: none; animation: none; }
  #cutin .ci-wipe { display: none !important; }
}
#cutin .ci-layer.fullscreen { transition: none; }