/* Keep the existing cheki window painted beneath a separate, steady scrim. */
.cheki-shot-overlay {
 position: fixed;
 inset: 0;
 z-index: 2000;
 display: grid;
 place-items: center;
 padding: 18px;
 box-sizing: border-box;
 overflow: hidden;
 isolation: isolate;
 background: #263b56a6;
 pointer-events: auto;
 touch-action: none;
 overscroll-behavior: contain;
}
.cheki-shot-card {
 position: relative;
 width: min(350px, 82vw);
 margin: 0;
 padding: 13px 13px 0;
 box-sizing: border-box;
 border: 1px solid #e2ded1;
 border-radius: 3px;
 background: #fffdf3;
 box-shadow: 0 5px 0 #34465d42, 0 16px 45px #15233e70;
 opacity: 0;
 transform: translateY(12px) rotate(-4deg);
}
.cheki-shot-photo {
 position: relative;
 aspect-ratio: 1.13;
 overflow: hidden;
 isolation: isolate;
 border: 1px solid #93a5ad;
 background: linear-gradient(#879bb0, #d6c6cb 62%, #f1d9c0);
}
.cheki-shot-background {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
 max-width: none;
 object-fit: cover;
 opacity: 1;
 filter: brightness(.85) saturate(.8);
}
.cheki-shot-photo::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 1;
 background: linear-gradient(0deg, #efd5ca70, transparent 65%);
 pointer-events: none;
}
.cheki-shot-light {
 position: absolute;
 z-index: 1;
 top: -10%;
 width: 44%;
 height: 120%;
 border-radius: 50%;
 background: #fff3c0;
 opacity: .1;
 filter: blur(14px);
 pointer-events: none;
}
.cheki-shot-light-left {left: -10%; transform: rotate(25deg)}
.cheki-shot-light-right {right: -10%; transform: rotate(-25deg)}
.cheki-shot-actors {
 position: absolute;
 z-index: 2;
 inset: 8px 1% 4px;
 container-type: size;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 gap: 0;
}
.cheki-shot-actor {
 display: flex;
 justify-content: center;
 align-items: flex-end;
 flex: 0 0 50%;
 height: 100%;
 min-width: 0;
 filter: drop-shadow(0 3px 1px #28354835);
}
.cheki-shot-actor > .atlas-character {
 display: block;
 flex-shrink: 0;
 width: min(100%, calc(100cqh * .500630517)) !important;
 max-width: none;
 max-height: 100%;
 margin: 0;
 transform: none;
}
.cheki-shot-spark {
 position: absolute;
 z-index: 3;
 color: #fff0b0;
 text-shadow: 0 1px #725e77, 0 0 8px #fff9da80;
 pointer-events: none;
}
.cheki-shot-spark-left {left: 7%; top: 14%; font-size: 25px; transform: rotate(-12deg)}
.cheki-shot-spark-right {right: 9%; top: 27%; font-size: 15px; transform: rotate(14deg)}
.cheki-shot-count {
 position: absolute;
 right: 9px;
 bottom: 8px;
 z-index: 4;
 padding: 4px 9px;
 border: 1px solid #f6e1aa;
 border-radius: 4px;
 background: #344f72eb;
 color: #fff8dc;
 font: 700 15px var(--font, sans-serif);
 line-height: 1.3;
 font-variant-numeric: tabular-nums;
}
.cheki-shot-caption {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 5px;
 min-height: 83px;
 padding: 15px 20px 17px;
 box-sizing: border-box;
 color: #42617d;
 text-align: center;
}
.cheki-shot-caption-star {
 position: absolute;
 left: 4px;
 top: 18px;
 color: #dcb35f;
 font-size: 16px;
 transform: rotate(-12deg);
}
.cheki-shot-names {
 display: block;
 max-width: 100%;
 overflow-wrap: anywhere;
 font: 700 17px var(--pixel, sans-serif);
 line-height: 1.45;
 letter-spacing: .2px;
}
.cheki-shot-date {font: 12px var(--font, sans-serif); line-height: 1.5; color: #87969b}
.cheki-shot-status {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip-path: inset(50%);
 white-space: nowrap;
}
/* Only the card fades. The scrim and underlying live window remain steady. */
.cheki-shot-overlay.is-playing .cheki-shot-card {
 animation: cheki-shot-appear var(--cheki-shot-duration, 2000ms) ease both;
}
.cheki-shot-photo::after {
 content: '';
 position: absolute;
 z-index: 5;
 inset: 0;
 background: #fff;
 opacity: 0;
 pointer-events: none;
}
.cheki-shot-overlay.is-playing .cheki-shot-photo::after {
 animation: cheki-shot-flash 100ms linear 300ms both;
}
@keyframes cheki-shot-appear {
 0%, 5% {opacity: 0; transform: translateY(12px) rotate(-4deg)}
 20%, 75% {opacity: 1; transform: translateY(0) rotate(-2deg)}
 95%, 100% {opacity: 0; transform: translateY(-3px) rotate(-2deg)}
}
@keyframes cheki-shot-flash {
 0%, 100% {opacity: 0}
 25%, 55% {opacity: .85}
}
@media (max-width: 400px) {
 .cheki-shot-card {padding: 10px 10px 0}
 .cheki-shot-caption {min-height: 76px; padding: 12px 16px 14px; gap: 4px}
 .cheki-shot-names {font-size: 15px}
 .cheki-shot-date {font-size: 11px}
}
@media (max-height: 480px) {
 .cheki-shot-card {width: min(350px, 82vw, calc((100dvh - 34px) * .76))}
 .cheki-shot-caption {min-height: 68px; padding: 10px 15px}
 .cheki-shot-names {font-size: 14px}
 .cheki-shot-date {font-size: 10px}
}
@media (prefers-reduced-motion: reduce) {
 .cheki-shot-overlay.is-playing .cheki-shot-card {animation: none; opacity: 1; transform: none}
 .cheki-shot-overlay.is-playing .cheki-shot-photo::after {animation: none; opacity: 0}
}

.cheki-shot-player > .atlas-character {width: min(100%, calc(100cqh * .666666667)) !important}