/* Cutscenes (client/js/cutscene.js): the stage is drawn on the game canvas; this layer holds the dialogue box, narration,
   titles and the skip controls. Classic blue windows, sizes follow --k, touch targets >= 44 px. */
#cutscene { position: fixed; inset: 0; z-index: 42; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
/* the HUD hides while a scene plays; party invites and other notices stay on top */
html.cutscene #hud { z-index: 43; }
html.cutscene #hud > :not(#notices) { visibility: hidden !important; }
html.cutscene #prompt, html.cutscene #bagpanel { display: none; }

#cutscene .cs-box { position: absolute; left: 50%; bottom: calc(22px * var(--k) + var(--sab)); transform: translateX(-50%); width: min(calc(720px * var(--k)), calc(100vw - 16px - var(--sal) - var(--sar)));
  min-height: calc(118px * var(--k)); max-height: calc(var(--vh) - 24px); overflow-y: auto; padding: calc(14px * var(--k)) calc(18px * var(--k)) calc(16px * var(--k));
  display: flex; gap: calc(14px * var(--k)); font-size: calc(18px * var(--k)); animation: cspop 0.12s ease-out; }
@keyframes cspop { from { transform: translateX(-50%) scale(0.96); opacity: 0; } }
#cutscene .cs-box.right { flex-direction: row-reverse; }
#cutscene .cs-port img { display: block; width: calc(80px * var(--k)); height: calc(80px * var(--k)); image-rendering: pixelated; border: 3px solid var(--win-border); border-radius: 4px; background: #0c1240; }
#cutscene .cs-box.right .cs-port img { transform: scaleX(-1); }   /* portraits face the text */
#cutscene .cs-box.noport .cs-port { display: none; }
#cutscene .cs-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#cutscene .cs-name { font-family: var(--head); font-size: calc(11px * var(--k)); color: var(--gold); margin-bottom: 6px; min-height: calc(11px * var(--k)); }
#cutscene .cs-text { line-height: 1.38; min-height: calc(50px * var(--k)); white-space: pre-wrap; overflow-wrap: anywhere; }
#cutscene .cs-box.thought { background: linear-gradient(180deg, #232f6e, #121848); }
#cutscene .cs-next { position: absolute; right: calc(14px * var(--k)); bottom: calc(8px * var(--k)); font-size: calc(12px * var(--k)); color: var(--ink); animation: blink 0.6s steps(2) infinite; }
#cutscene .cs-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; align-self: flex-end; min-width: calc(180px * var(--k)); }
#cutscene .cs-opt { min-height: calc(30px * var(--k)); }
#cutscene .cs-opt.sel { background: rgba(255, 255, 255, 0.14); }
#cutscene .cs-opt.sel .cursor { color: var(--gold); }
#cutscene .cs-in { margin-top: 8px; }
#cutscene .cs-in-title { margin-bottom: 6px; font-family: var(--head); font-size: calc(10px * var(--k)); }
#cutscene .cs-in-row { display: flex; gap: 8px; }
#cutscene .cs-in input { flex: 1; min-width: 0; height: 44px; font: max(16px, calc(18px * var(--k))) var(--font); color: #fff; background: #0c1240; border: 2px solid var(--win-border); border-radius: 6px; padding: 0 10px; cursor: text; }
#cutscene .cs-in input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
#cutscene .cs-ok, #cutscene .cs-confirm button { min-width: 64px; min-height: 44px; font: calc(14px * var(--k)) var(--head); color: #fff; background: #1c2878; border: 2px solid var(--win-border); border-radius: 8px; cursor: pointer; padding: 0 12px; }
#cutscene .cs-err { min-height: 1.2em; margin-top: 4px; color: #ff9a7a; font-size: calc(14px * var(--k)); }

#cutscene .cs-narr { position: absolute; left: 50%; top: 13%; transform: translate(-50%, -50%); width: min(640px, calc(100vw - 32px)); text-align: center;
  font-size: calc(20px * var(--k)); line-height: 1.5; text-shadow: 0 2px 0 #000; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#cutscene .cs-nplate { display: inline-block; max-width: 100%; box-sizing: border-box; padding: calc(8px * var(--k)) calc(14px * var(--k)); }
#cutscene .cs-narr.on { opacity: 1; }
#cutscene .cs-narr.out { opacity: 0; transition-duration: 0.35s; }

/* D11 credits roll (cutscene.js `credits`): a column over the stage, moving up one device pixel per step; a dim band behind it */
#cutscene .cs-credits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#cutscene .cs-credits::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(calc(620px * var(--k)), 100vw);
  background: linear-gradient(90deg, transparent, rgba(6, 10, 40, 0.6) 16%, rgba(6, 10, 40, 0.6) 84%, transparent); }
#cutscene .cs-roll { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--k));
  padding: 0 16px; text-align: center; transform: translateY(var(--from, 100vh)); animation: csroll var(--dur, 40s) steps(var(--steps, 600), end) forwards; }
@keyframes csroll { from { transform: translateY(var(--from, 100vh)); } to { transform: translateY(var(--to, -100%)); } }
#cutscene .cs-roll .cr-h { margin-top: calc(4px * var(--k)); }
#cutscene .cs-roll .cr-big { margin: calc(6px * var(--k)) 0; }
#cutscene .cs-roll canvas { display: block; image-rendering: pixelated; }
#cutscene .cs-chint { position: absolute; right: calc(12px + var(--sar)); bottom: calc(12px + var(--sab)); opacity: 0.75; pointer-events: none; }
html.form-phone #cutscene .cs-roll { gap: 4px; }

#cutscene .cs-title { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px;
  background: linear-gradient(90deg, transparent, rgba(6, 10, 40, 0.82) 18%, rgba(6, 10, 40, 0.82) 82%, transparent); font-family: var(--pixel); text-align: center;
  pointer-events: none; animation: cstitle var(--ms, 2200ms) forwards; }
#cutscene .cs-title .cs-t1 { font-size: clamp(16px, 3.2vw, 30px); color: #fff; }
#cutscene .cs-title .cs-t2 { font-size: clamp(11px, 2vw, 18px); color: var(--gold); }
@keyframes cstitle { 0% { opacity: 0; transform: scaleY(0.6); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

#cutscene .cs-skip { position: absolute; top: calc(10px + var(--sat)); right: calc(10px + var(--sar)); min-width: 88px; min-height: 44px; padding: 0 12px; overflow: hidden;
  font: calc(10px * var(--k)) var(--head); color: var(--ink); cursor: pointer; opacity: 0.8; }
#cutscene .cs-skip:hover { opacity: 1; }
#cutscene .cs-skip i { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--gold); }
#cutscene .cs-skip span { position: relative; }
#cutscene .cs-confirm { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); padding: 14px 16px; text-align: center; z-index: 2; cursor: default; }
#cutscene .cs-q { margin-bottom: 12px; font-family: var(--head); font-size: calc(11px * var(--k)); }
#cutscene .cs-cbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#cutscene .cs-wait { position: absolute; left: 50%; top: calc(16px + var(--sat)); transform: translateX(-50%); padding: 10px 16px; font-size: calc(15px * var(--k)); max-width: calc(100vw - 24px); }

html.touch #cutscene .cs-opt { min-height: 44px; border: 2px solid var(--win-border); background: #0c1240; border-radius: 8px; padding: 6px 14px; }
html.touch #cutscene .cs-opt.sel { background: #1c2878; }
html.form-phone #cutscene .cs-box { min-height: 0; bottom: calc(8px + var(--sab)); padding: 10px 12px 14px; gap: 10px; font-size: max(15px, calc(17px * var(--k))); }
html.form-phone #cutscene .cs-port img { width: 56px; height: 56px; }
html.form-phone #cutscene .cs-opts { min-width: 0; align-self: stretch; }