/* Embedded campaign matches cannot start a disconnected replacement duel. */
body.rpg-duel #reset,body.rpg-duel .masthead nav a{display:none!important}
body.rpg-duel .engine-badge{border-color:#d8749e;color:#ffd4e0}
@media(prefers-reduced-motion:reduce){body.rpg-duel *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Character cut-ins remain on screen long enough to identify the NPC and
   attack. They never intercept battle actions or card choices. */
.npc-reaction{display:none}
body.rpg-duel .npc-reaction:not(.hidden){
 display:flex;position:fixed;inset:0;align-items:center;justify-content:center;
 z-index:680;pointer-events:none;overflow:hidden;
}
.npc-reaction-card{
 --cutin-accent:#ef8bab;
 width:min(1160px,100vw);height:clamp(145px,32vh,274px);min-height:0;
 position:relative;display:grid;grid-template-columns:minmax(120px,36%) minmax(0,1fr);
 background:linear-gradient(106deg,#681f52 0%,#25213df7 36%,#0f1729f5 100%);
 border:0;border-top:5px solid var(--cutin-accent);border-bottom:5px solid var(--cutin-accent);
 box-shadow:0 20px 70px #020414b9,0 0 0 1px #ffbbd648;overflow:visible;isolation:isolate;
 transform:skewX(-8deg);animation:npc-cut-in 1.65s cubic-bezier(.13,.73,.23,1) both;
}
.npc-reaction-card::before{
 content:"";position:absolute;inset:-8px -14px;z-index:-1;pointer-events:none;
 background:linear-gradient(120deg,transparent 0 25%,#ffffff16 25% 26%,transparent 26% 62%,var(--cutin-accent) 62% 63%,transparent 63%);
}
.npc-reaction-card.npc-reaction-attack{animation-duration:2.8s}
.npc-reaction-card.is-finisher{
 --cutin-accent:#f2ce79;background:linear-gradient(102deg,#6c3c32,#31253dec 36%,#111524);
 animation-duration:2.6s;
}
.npc-reaction-ko_taken,.npc-reaction-hurt{--cutin-accent:#ef8298}
.npc-reaction-portrait{
 position:relative;align-self:stretch;min-width:0;overflow:hidden;
 background:radial-gradient(ellipse at center,#ffffff20,transparent 75%);
 display:flex;align-items:center;justify-content:center;transform:skewX(8deg);
}
.npc-reaction-portrait img{
 display:block;width:100%;height:calc(100% + 40px);max-height:none;
 object-fit:contain;object-position:center bottom;filter:drop-shadow(8px 5px 7px #000a);
 animation:npc-cut-portrait .25s ease-out both;
}
.npc-reaction-card.has-wide-action-art{grid-template-columns:minmax(0,49%) minmax(0,1fr)}
.npc-reaction-card.has-wide-action-art .npc-reaction-portrait img{
 width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:none;
}
.npc-reaction-card.has-wide-action-art .npc-reaction-portrait::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,transparent 68%,#25213ddd 100%);
}
.npc-reaction-card.has-match-art .npc-reaction-portrait img{
 height:100%;width:100%;object-fit:contain;object-position:center bottom;
}
/* VN frames may be opaque and portrait-oriented: fill their panel without
   distortion and keep facial expressions visible at desktop/mobile sizes. */
.npc-reaction-card.has-vn-expression{grid-template-columns:minmax(0,39%) minmax(0,1fr)}
.npc-reaction-card.has-vn-expression .npc-reaction-portrait{background:#1a1c31}
.npc-reaction-card.has-vn-expression .npc-reaction-portrait img:not(.rpg-safe-avatar){
 width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:none;
}
.npc-reaction-card.has-vn-expression .npc-reaction-portrait::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,transparent 73%,#25213da8 100%);
}
:root[data-rpg-discreet="on"] .npc-reaction-card.has-vn-expression .npc-reaction-portrait::after{display:none}

.npc-reaction-portrait.no-art::after{content:'✦';font-size:70px;color:#ffffff8c}
.npc-reaction-copy{
 display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;
 padding:12px 28px;transform:skewX(8deg);color:white;text-shadow:0 2px 8px #000a
}
.npc-reaction-tag{font:900 clamp(10px,1.2vw,15px) 'Barlow Condensed',sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#fbd4e2}
.npc-reaction-name{font:900 clamp(23px,3.5vw,48px)/1 'Barlow Condensed',sans-serif;color:white;text-transform:uppercase}
.npc-reaction-title{font:900 clamp(13px,2vw,24px)/1 'Barlow Condensed',sans-serif;letter-spacing:.11em;color:#ffda93}
.npc-reaction-copy p{font:700 clamp(12px,1.35vw,19px)/1.25 'Barlow Condensed',sans-serif;margin:4px 0 0;color:#fff2f9;max-width:56ch}
@keyframes npc-cut-in{
 0%{opacity:0;translate:110vw 0;scale:.94 1}
 10%{opacity:1;translate:0 0;scale:1}
 84%{opacity:1;translate:0 0}
 100%{opacity:0;translate:-110vw 0;scale:1 1}
}
@keyframes npc-cut-portrait{from{opacity:.45;translate:48px 0}to{opacity:1;translate:0 0}}
@media(max-width:600px){
 /* Panoramic attack art should not shrink into a narrow, letterboxed portrait. */
 .npc-reaction-card{height:clamp(160px,29dvh,222px);grid-template-columns:minmax(0,43%) minmax(0,1fr);border-width:3px;transform:skewX(-5deg)}
 .npc-reaction-card.has-wide-action-art{grid-template-columns:minmax(0,50%) minmax(0,1fr)}
 .npc-reaction-card.has-vn-expression{grid-template-columns:minmax(0,45%) minmax(0,1fr)}
 .npc-reaction-portrait,.npc-reaction-copy{transform:skewX(5deg)}
 .npc-reaction-copy{padding:8px 10px 8px 6px;gap:3px}
 .npc-reaction-tag{font-size:11px;letter-spacing:.05em}
 .npc-reaction-name{font-size:clamp(18px,5.5vw,27px);line-height:1}
 .npc-reaction-title{font-size:clamp(13px,3.7vw,19px);line-height:1.05;letter-spacing:.04em}
 .npc-reaction-copy p{font-size:clamp(11px,3vw,14px);line-height:1.2}
}
@media(max-width:350px){
 .npc-reaction-tag{font-size:10px;letter-spacing:0}
 .npc-reaction-copy p{font-size:11px}
}
@media(max-height:410px){
 .npc-reaction-card{height:min(182px,72dvh)}
}
@media(prefers-reduced-motion:reduce){
 .npc-reaction-card,.npc-reaction-card.is-finisher,.npc-reaction-portrait img{animation:none!important}
}

/* Only RPG attack cut-ins become a large centered scene: dialogue above art.
   Other reactions keep their compact side-by-side treatment. */
body.rpg-duel .npc-reaction-card.npc-reaction-attack{
 display:flex;flex-direction:column;grid-template-columns:none;
 width:min(1040px,94vw);height:min(80dvh,760px);max-height:calc(100dvh - 20px);
 transform:none;overflow:hidden;border:2px solid var(--cutin-accent);
 border-top:4px solid var(--cutin-accent);border-bottom:4px solid var(--cutin-accent);
 border-radius:16px;background:linear-gradient(180deg,#28213dfb,#0f1729fa);
 box-shadow:0 24px 90px #020414dc,0 0 0 1px #ffbbd648;
}
body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-copy{
 order:-1;flex:0 0 auto;transform:none;align-items:center;justify-content:center;
 text-align:center;gap:5px;padding:16px 20px 15px;
 background:linear-gradient(90deg,#582044,#22213df5 45%,#311e3d);
 border-bottom:1px solid #ffffff36;
}
body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-name{
 font-size:clamp(25px,3.3vw,44px);
}
body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-copy p{
 max-width:68ch;margin:2px 0 0;font-size:clamp(14px,1.8vw,22px);
}
body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-portrait{
 flex:1 1 auto;min-height:0;width:100%;transform:none;
 background:radial-gradient(ellipse at center,#4c3049 0%,#101425 83%);
}
body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-portrait img,
body.rpg-duel .npc-reaction-card.npc-reaction-attack.has-vn-expression .npc-reaction-portrait img:not(.rpg-safe-avatar){
 display:block;width:100%;height:100%;max-height:100%;
 object-fit:contain;object-position:center center;filter:none;
}
body.rpg-duel .npc-reaction-card.npc-reaction-attack.has-wide-action-art .npc-reaction-portrait::after,
body.rpg-duel .npc-reaction-card.npc-reaction-attack.has-vn-expression .npc-reaction-portrait::after{
 display:none;
}
@media(max-width:600px){
 body.rpg-duel .npc-reaction-card.npc-reaction-attack{
  width:96vw;height:76dvh;border-radius:12px;
 }
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-copy{
  padding:10px 12px;gap:3px;
 }
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-name{font-size:clamp(22px,6vw,32px)}
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-tag{font-size:11px}
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-title{font-size:clamp(15px,4.3vw,20px)}
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-copy p{font-size:clamp(12px,3.4vw,16px)}
}
@media(max-height:480px){
 body.rpg-duel .npc-reaction-card.npc-reaction-attack{height:92dvh}
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-copy{padding:5px 12px;gap:2px}
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-name{font-size:22px}
 body.rpg-duel .npc-reaction-card.npc-reaction-attack .npc-reaction-copy p{font-size:12px}
}