/* Owner: WP6. Styles for screens/vertical.js, ui/phone.js and ui/killcard.js.
   Layout comes from base.css (.screen, .split, .side, .stage, .sec, .sec-label, .hint, .field, .meta, .btn).
   This file only adds what the Vertical step needs, scoped under .screen-vertical or the
   component classes .phone*, .killcard*. Tokens: css/tokens.css. */

/* ---------------------------------------------------------------- layout */
.screen-vertical .vertical-side { gap: 18px; }
.screen-vertical .vertical-head { gap: 6px; }
.screen-vertical .sec[hidden] { display: none; }
.screen-vertical .hint { margin: 0; }
.screen-vertical .hint[hidden] { display: none; }
.screen-vertical .vertical-name { margin-top: 4px; }
.screen-vertical .vertical-name.is-disabled { opacity: 0.45; }
.screen-vertical .vertical-error { color: var(--c-warn); }
.screen-vertical .vertical-stage { overflow: auto; }

/* Summary sits at the bottom of the sidebar (design). */
.screen-vertical .vertical-summary-sec { margin-top: auto; }
.screen-vertical .vertical-summary { gap: 6px 16px; }
.screen-vertical .vertical-summary dd { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- music */
.screen-vertical .vertical-music-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.screen-vertical .vertical-music-add[hidden] { display: none; }
.screen-vertical .vertical-upload { display: flex; flex-direction: column; gap: 6px; }
.screen-vertical .vertical-upload[hidden] { display: none; }
.screen-vertical .vertical-track { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; }
.screen-vertical .vertical-track[hidden] { display: none; }
.screen-vertical .vertical-track > svg { flex: none; color: var(--c-muted); }
.screen-vertical .vertical-track-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.screen-vertical .check[hidden] { display: none; }
.screen-vertical .vertical-mix { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 6px 8px; }
.screen-vertical .vertical-mix[hidden] { display: none; }
.screen-vertical .vertical-out { font-size: 12px; line-height: 16px; color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; }
.screen-vertical .vertical-offset { width: 100%; text-align: right; }
/* Hide the number spinners: the field is short and the value is typed. */
.screen-vertical .vertical-offset::-webkit-inner-spin-button,
.screen-vertical .vertical-offset::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.screen-vertical .vertical-offset { -moz-appearance: textfield; appearance: textfield; }

/* ---------------------------------------------------------------- streamer camera */
.screen-vertical .vertical-camera { display: flex; flex-direction: column; gap: 8px; }
.screen-vertical .vertical-camera[hidden] { display: none; }
.camedit-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-black); border-radius: var(--r-chip); touch-action: none; user-select: none; }
.camedit-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.camedit-box {
  position: absolute; box-sizing: border-box; border: 2px solid var(--c-white); cursor: move; touch-action: none;
  box-shadow: 0 0 0 1px var(--c-black), 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.camedit-box:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.camedit-handle {
  position: absolute; width: 14px; height: 14px; background: var(--c-white); border-radius: var(--r-chip);
  box-shadow: var(--outline-marker); touch-action: none;
}
.camedit-handle[data-h="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.camedit-handle[data-h="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.camedit-handle[data-h="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.camedit-handle[data-h="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* ---------------------------------------------------------------- phone (also used by the Export step) */
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.phone {
  position: relative; width: 340px; height: 604px; flex: none; overflow: hidden; background: #000;
  border-radius: var(--r-phone); isolation: isolate;
}
.phone-canvas { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; pointer-events: none; }
.phone-zoom { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 540px 960px; will-change: transform; }
.phone-videobox { position: absolute; inset: 0; overflow: hidden; background: #000; }
.phone-video { position: absolute; top: 0; left: 0; display: block; max-width: none; object-fit: fill; background: #000; }
.phone-feed { position: absolute; overflow: visible; pointer-events: none; }
.phone-mark { position: absolute; display: block; }
.phone-mark[hidden] { display: none; }
/* Unzoomed HUD bands copied from the layered base while the gameplay zooms (ui/phone.js HUD_BANDS). */
.phone-hud { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; pointer-events: none; }
.phone-hud[hidden] { display: none; }
/* Streamer camera layer (lib/camera.js): a CSS crop of the source preview inside the layout box. */
.phone-camera { position: absolute; box-sizing: border-box; overflow: hidden; border: 4px solid #0f0f11; background: #0f0f11; pointer-events: none; }
.phone-camera[hidden] { display: none; }
.phone-camera-video { position: absolute; display: block; max-width: none; object-fit: fill; }

.phone-captions { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.phone-status {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 4px 10px;
  border-radius: var(--r-chip); background: rgba(0, 0, 0, 0.6); color: var(--c-muted); font-size: 12px; line-height: 16px; white-space: nowrap;
}
.phone-status[hidden] { display: none; }
.phone-bar { display: flex; align-items: center; gap: 10px; width: 340px; max-width: 100%; }
.phone-play {
  width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: var(--r-control);
  background: var(--c-raised); color: var(--c-ink); display: grid; place-items: center; cursor: pointer;
}
.phone-play:hover { background: #4a4a4a; }
.phone-tc { font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.phone-tclen { font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.phone-note { margin: 0; width: 340px; max-width: 100%; font-size: 12px; line-height: 16px; color: var(--c-muted); }
.phone-note[hidden] { display: none; }
.screen-vertical .phone { cursor: pointer; }

/* ---------------------------------------------------------------- kill card (export pixels: 530 x 80) */
.killcard {
  position: absolute; left: 0; top: 0; width: 530px; height: 80px; overflow: hidden;
  font-family: 'Killcut Card', 'Barlow Condensed', var(--font-ui); font-variant-numeric: tabular-nums; color: #ffffff;
  transform-origin: 0 0; will-change: transform, opacity;
}
.killcard[hidden] { display: none; }
.killcard-portrait { display: block; object-fit: cover; }
.killcard-portrait-empty { display: grid; place-items: center; background: #2a3345; color: rgb(163, 174, 187); font-size: 28px; font-weight: 700; }
.killcard-weapon { display: grid; place-items: center; }
.killcard-weapon img { display: block; object-fit: contain; filter: brightness(0) invert(1); }
.killcard-text { display: block; letter-spacing: 0; }

/* ---------------------------------------------------------------- phone-width layout */
@media (max-width: 899.98px) {
  .screen-vertical .vertical-side { overflow: visible; }
  .screen-vertical .vertical-summary-sec { margin-top: 0; }
  .screen-vertical .vertical-stage { overflow: visible; }
}
/* Kill effect per kill (B9b): switch, time, victim, intensity slider, value. */
.screen-vertical .vertical-intensity[hidden], .screen-vertical .vertical-kills[hidden] { display: none; }
.screen-vertical .vertical-kills { display: grid; gap: 6px; }
.screen-vertical .vertical-kill { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) minmax(0, 1.2fr) 44px; align-items: center; gap: 8px; }
.screen-vertical .vertical-kill-at { font-size: 12px; line-height: 16px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.screen-vertical .vertical-kill-name { font-size: 13px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }