#s .game-wrapper .pane.comics { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1000; background: #000; overflow: hidden; }
#s .game-wrapper .pane.comics.pane-visible { display: flex; align-items: center; justify-content: center; }
#s .pane.comics .comics-tv { position: relative; width: min(68vw, calc((100dvh - 100px) * 1.36)); padding: 0 22px; border-radius: 28px; background: linear-gradient(#005779,#00507b); box-shadow: 0 9px 0 #003951, inset 0 1px 18px #079bc929; transform-origin: center; }
#s .pane.comics .comics-tv-header { display: flex; justify-content: space-between; align-items: center; height: 58px; color: #b6e5ff; font-size: 11px; letter-spacing: 1px; }
#s .pane.comics .comics-tv-lights { display: flex; gap: 5px; margin-right: 0; }
#s .pane.comics .comics-tv-lights i { display: block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #FF5C5C; box-shadow: 0 0 8px #FF5C5C66; }
#s .pane.comics .comics-tv-lights i:nth-child(2) { background: #FFD166; box-shadow: 0 0 8px #FFD16666; }
#s .pane.comics .comics-tv-lights i:nth-child(3) { background: #06D6A0; box-shadow: 0 0 8px #06D6A066; }
#s .pane.comics .comics-tv-indicators { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; }
#s .pane.comics .comics-tv-indicators i { width: 8px; height: 8px; border-radius: 8px; background: #4289a6; }
#s .pane.comics .comics-tv-indicators i:first-child { width: 38px; background: #50b5cb; }
#s .pane.comics .comics-antenna { position: absolute; top: -46px; left: 50%; width: 70px; height: 46px; transform: translateX(-50%); }
#s .pane.comics .comics-antenna i { position: absolute; bottom: 0; left: 10px; width: 5px; height: 45px; background: #005779; transform: rotate(-12deg); }
#s .pane.comics .comics-antenna i + i { left: 55px; transform: rotate(12deg); }
#s .pane.comics .comics-antenna i::before { content: ""; position: absolute; top: -4px; left: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ffd500; box-shadow: 0 0 5px #ffde00; }
#s .pane.comics .comics-antenna i + i::before { background: #00cafa; box-shadow: 0 0 5px #00cafa; }
#s .pane.comics .comics-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border: 3px solid #398ca9; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px #3dc5ee66; }
#s .pane.comics .comics-screen::before { content: ""; position: absolute; inset: 0; z-index: 56; background: #e7faff; opacity: 0; pointer-events: none; }
#s .pane.comics .comics-screen::after { content: ""; position: absolute; inset: 0; z-index: 55; pointer-events: none; background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px); }
#s .pane.comics .comics-scene-fill .comics-background,
#s .pane.comics .comics-scene-fill .comics-dialog { background-size: cover; }
#s .pane.comics .comics-scene { transition: none; visibility: hidden; }
#s .pane.comics .comics-scene-visible { visibility: visible; }
#s .pane.comics .comics-navigation { position: relative; display: flex; align-items: center; gap: 10px; height: 76px; padding: 0; }
#s .pane.comics .comics-navigation form { display: none; }
#s .pane.comics .comics-navigation .btn { margin: 0; padding: 8px 20px; height: auto; border: 1.5px solid #50b1c6; border-radius: 24px; background: transparent; box-shadow: none; color: #d5f4ff; font-size: 13px; }
#s .pane.comics .comics-navigation .btn-comics-next { background: #50b1c6; color: #fff; }
#s .pane.comics .comics-navigation .btn:disabled { opacity: .45; cursor: default; }
#s .pane.comics .comics-navigation .btn:focus-visible { outline: 2px solid white; outline-offset: 3px; }
#s .pane.comics .comics-progress { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 4px; max-width: 90%; }
#s .pane.comics .comics-progress i { display: block; flex: 0 1 7px; width: 7px; height: 7px; border-radius: 50%; background: #4289a6; }
#s .pane.comics .comics-progress i.is-current { background: #50b5cb; }
#s .pane.comics .comics-navigation .btn-comics-prev { margin-left: auto; }
#s .pane.comics.tv-enter .comics-scenes,
#s .pane.comics.tv-return .comics-scenes { animation: tv-screen-on 850ms both; }
#s .pane.comics.tv-enter .comics-screen::before,
#s .pane.comics.tv-return .comics-screen::before { animation: tv-screen-flash 850ms both; }
#s .pane.comics.tv-return .comics-tv { animation: tv-return 750ms both; }
#s .pane.comics.tv-closing .comics-scenes { animation: tv-screen-off 320ms both; }
#s .pane.comics.tv-closing .comics-screen::before { animation: tv-screen-close-flash 320ms both; }
#s .pane.comics.tv-closing .comics-tv { pointer-events: none; }
#s .pane.comics.tv-exit .comics-tv { animation: tv-zoom 650ms both; pointer-events: none; }
@keyframes tv-screen-on { 0%,20% { clip-path: inset(50% 50%); opacity: 0; } 25% { clip-path: inset(49.5% 48%); opacity: 1; } 45% { clip-path: inset(49.5% 0); } 75%,100% { clip-path: inset(0); opacity: 1; } }
@keyframes tv-screen-flash { 0%,20%,85%,100% { opacity: 0; clip-path: inset(50% 50%); } 25% { opacity: 1; clip-path: inset(49.5% 48%); } 45% { opacity: .9; clip-path: inset(49.5% 0); } 75% { opacity: .15; clip-path: inset(0); } }
@keyframes tv-screen-off { 0% { clip-path: inset(0); } 65% { clip-path: inset(49.5% 0); opacity: 1; } 90%,100% { clip-path: inset(50% 50%); opacity: 0; } }
@keyframes tv-screen-close-flash { 0%,100% { opacity: 0; clip-path: inset(50% 50%); } 65% { opacity: .85; clip-path: inset(49.5% 0); } 90% { opacity: .5; clip-path: inset(49.5% 49%); } }
@keyframes tv-return { 0%,20% { opacity: 0; transform: scale(2.5); } 35% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes tv-zoom { 0% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(3.5); } }
@media (max-width: 700px) { #s .pane.comics .comics-tv { width: calc(100vw - 24px); padding: 0 12px; } #s .pane.comics .comics-navigation .btn { padding: 7px 12px; } }
@media (prefers-reduced-motion: reduce) { #s .pane.comics .comics-tv, #s .pane.comics .comics-scenes, #s .pane.comics .comics-screen::before { animation: none !important; } #s .pane.comics .comics-dialog { transition: none; } #s .pane.comics.tv-closing .comics-scenes { opacity: 0; } }

/* The completion POST can outlast the TV exit. Keep feedback visible until
   its response closes the pane or restores the controls for a retry. */
#s .pane.comics .comics-exit-loading { display: none; }
#s .game-wrapper .pane.comics.tv-waiting { background: #f2f2f7; }
#s .pane.comics.tv-waiting .comics-tv { visibility: hidden; }
#s .pane.comics.tv-waiting .comics-exit-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
    color: #00507b; font-size: 16px;
}