.capture-live-shell{padding-top:6px}
.capture-live-shell .war-status-slot{margin:0 0 6px}
.capture-live-shell .capture-stage{
  margin-top:0;
  min-height:0;
  display:grid;
  grid-template-columns:36px minmax(0,520px) 36px;
  gap:8px;
  align-items:center;
  justify-content:center;
  border:0;
  background:#090b0e;
  overflow:hidden;
}
.capture-live-shell .capture-stage.is-frame-locked{
  grid-template-columns:minmax(0,640px);
}
.capture-live-shell .capture-frame-host{width:100%;min-width:0}
.capture-live-shell .capture-stage.is-frame-locked [data-capture-frame]{width:min(100%,640px)}
.capture-live-shell .capture-controls{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  justify-self:stretch;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  padding:14px 10px 10px;
}
.capture-live-shell .shutter{grid-column:2;grid-row:1;justify-self:center}
.capture-live-shell .capture-review{grid-column:1/-1;grid-row:2;justify-self:center}
body[data-page="post"][data-home-faction="haunted"] .camera-wordmark{color:var(--haunted)}
body[data-page="post"][data-home-faction="haunted"] .shutter{
  background:var(--haunted)!important;
  border-color:var(--haunted)!important;
  outline-color:var(--haunted)!important;
  box-shadow:0 0 16px color-mix(in srgb,var(--haunted) 42%,transparent)!important;
}
.camera-wordmark{
  grid-column:1/-1;
  display:block;
  width:min(78vw,243px);
  height:auto;
  aspect-ratio:243/55;
  margin:0 auto;
  overflow:visible;
  color:var(--active-faction);
  pointer-events:none;
  user-select:none;
}
.camera-status{
  position:absolute;
  right:10px;
  bottom:10px;
  left:10px;
  z-index:4;
  border:1px solid #777;
  background:rgba(255,255,255,.9);
  padding:7px;
  text-align:center;
  color:#444;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.camera-status:empty{display:none}
.shutter:disabled{opacity:.35}
.capture-live-shell .shutter{width:72px}
.capture-live-shell .capture-controls{position:relative}
.camera-flip{position:static;grid-column:3;grid-row:1;justify-self:center;align-self:center;width:48px;height:48px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--active-faction) 42%,#555b62);border-radius:14px;background:#303236;color:#f5f3ef;padding:0}
.camera-flip svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.camera-flip:active{border-color:var(--active-faction);color:var(--active-faction)}
.camera-flip:disabled{opacity:.4}
.camera-flip[hidden]{display:none!important}

/* Capture review: flash white, then let the photo develop into view. */
.capture-frame-host .nightmare-frame-window::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background:#fff;
  opacity:0;
  pointer-events:none;
}
.capture-frame-host.is-flashing .nightmare-frame-window::after{animation:camera-flash .32s ease-out both}
.capture-stage.is-captured .nightmare-frame-window{background:#f7f3e9}
.captured-camera-image.is-developing{
  z-index:2;
  opacity:.04;
  animation:polaroid-develop 1.25s cubic-bezier(.18,.72,.2,1) both;
  will-change:opacity;
}
@keyframes camera-flash{
  0%{opacity:1}
  22%{opacity:1}
  100%{opacity:0}
}
@keyframes polaroid-develop{
  0%{opacity:.04}
  100%{opacity:1}
}
.capture-review{
  display:grid;
  width:min(calc(100% - 32px),520px);
  gap:11px;
  margin:0 auto;
}
.capture-review[hidden]{display:none!important}
.capture-title-input{
  width:100%;
  min-height:48px;
  border:1px solid color-mix(in srgb,var(--active-faction) 36%,#34383d);
  border-radius:0;
  outline:0;
  background:#171a1e;
  color:#f5f3ef;
  padding:10px 12px;
  font-size:16px;
  text-align:center;
}
.capture-title-input::placeholder{color:#8d9094;opacity:1}
.capture-title-input:focus{border-color:var(--active-faction);box-shadow:0 0 0 1px var(--active-faction)}
.capture-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.capture-review-actions .button{min-height:50px;margin:0}
.capture-retake{border-color:var(--active-faction)!important;background:#211b17!important;color:#f3eee7!important}
.capture-post{background:var(--active-faction)!important;border-color:var(--active-faction)!important;color:#080808!important}
.capture-review-actions button:disabled{opacity:.45}

/* Shared in-place camera surface. The parent app chrome remains visible around it. */
.camera-overlay{
  position:fixed;
  right:0;
  left:0;
  z-index:130;
  width:100%;
  max-width:var(--max);
  min-width:0;
  margin:0 auto;
  overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--active-faction) 50%,var(--line));
  background:#090b0e;
  box-shadow:0 -14px 34px rgb(0 0 0 / 36%);
}
.camera-overlay[hidden]{display:none}
.camera-overlay-frame{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:100%;
  border:0;
  background:#090b0e;
  opacity:1;
  visibility:visible;
}
body.camera-overlay-open{overflow:hidden}
body.camera-overlay-open .camera-bubble{opacity:0;pointer-events:none}

/* Embedded camera owns only the center view. Battle bar + Nav + Now Performing + UX stay in the parent. */
html:has(body[data-camera-embed="true"]),
body[data-camera-embed="true"]{
  width:100%;
  max-width:100vw;
  min-width:0;
  min-height:0;
  height:100dvh;
  overflow:hidden;
}
body[data-camera-embed="true"]>.bottom-nav,
body[data-camera-embed="true"]>.devbar,
body[data-camera-embed="true"] .capture-live-shell>.devbar,
body[data-camera-embed="true"] .capture-live-shell>.war-status-slot,
body[data-camera-embed="true"]>.now-playing-bar,
body[data-camera-embed="true"]>.now-playing-tray,
body[data-camera-embed="true"]>.floating-bubble{display:none!important}
body[data-camera-embed="true"] .capture-live-shell{
  display:grid;
  grid-template-rows:minmax(0,1fr);
  width:100%;
  max-width:100%;
  min-width:0;
  height:100dvh;
  min-height:0;
  margin:0;
  padding:0!important;
  overflow:hidden;
  touch-action:pan-y;
}
body[data-camera-embed="true"] .capture-stage{
  position:relative;
  grid-template-columns:24px minmax(0,1fr) 24px;
  grid-template-rows:auto auto minmax(48px,1fr);
  column-gap:4px;
  row-gap:0;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  align-items:center;
  align-content:stretch;
  justify-content:center;
  overflow:hidden;
  padding:18px 0 0;
}
body[data-camera-embed="true"] .capture-stage.is-frame-locked{grid-template-columns:minmax(0,1fr)}
body[data-camera-embed="true"] .camera-wordmark{
  grid-column:1/-1;
  grid-row:1;
  width:min(78vw,243px);
  margin:0 auto 24px;
}
body[data-camera-embed="true"] .capture-frame-arrow,
body[data-camera-embed="true"] .capture-frame-host{grid-row:2}
body[data-camera-embed="true"] .capture-frame-host{
  --frame-side:7px;
  --frame-top:7px;
  --frame-bottom:54px;
  --frame-keyart-size:38px;
  display:grid;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  place-items:center;
  justify-self:center;
  overflow:hidden;
  touch-action:pan-y;
}
body[data-camera-embed="true"] .capture-frame-host .nightmare-frame{
  width:100%;
  max-width:100%;
  min-width:0!important;
  margin:0 auto;
}
body[data-camera-embed="true"] .nightmare-frame,
body[data-camera-embed="true"] .nightmare-frame-window{max-width:100%;min-width:0}

.capture-frame-arrow{
  display:grid;
  width:24px;
  height:44px;
  place-items:center;
  align-self:center;
  border:0;
  background:transparent;
  color:rgb(255 255 255 / 78%);
  padding:0;
}
.capture-stage.is-frame-locked .capture-frame-arrow{display:none}
.capture-frame-arrow svg{
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.capture-frame-arrow:active{color:var(--active-faction);transform:scale(.94)}

body[data-camera-embed="true"] .capture-controls{
  grid-column:1/-1;
  grid-row:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  grid-template-rows:auto auto;
  width:100%;
  max-width:100%;
  min-width:0;
  justify-self:stretch;
  height:100%;
  min-height:48px;
  place-items:center;
  align-self:stretch;
  padding:0;
}
body[data-camera-embed="true"] .capture-stage.is-captured .capture-controls{
  place-items:start center;
  height:auto;
  min-height:0;
  align-self:end;
  row-gap:8px;
  padding:8px 0 max(8px,env(safe-area-inset-bottom));
}
body[data-camera-embed="true"] .capture-stage.is-captured{
  grid-template-rows:auto minmax(72px,1fr) auto;
}
body[data-camera-embed="true"] .capture-stage.is-captured .capture-frame-host{
  height:100%;
}
body[data-camera-embed="true"] .capture-stage.is-captured .capture-frame-host .nightmare-frame{
  width:auto;
  height:100%;
  max-width:100%;
}
body[data-camera-embed="true"] .shutter{width:56px;border-width:5px}

@media(max-height:350px){
  body[data-camera-embed="true"] .capture-stage{
    grid-template-columns:22px minmax(0,218px) 22px;
    grid-template-rows:auto auto minmax(42px,1fr);
    column-gap:3px;
    padding-top:10px;
  }
  body[data-camera-embed="true"] .camera-wordmark{width:min(72vw,220px);margin-bottom:10px}
  body[data-camera-embed="true"] .capture-frame-host{
    --frame-bottom:46px;
    --frame-keyart-size:32px;
    width:min(70vw,218px);
  }
  body[data-camera-embed="true"] .capture-controls{min-height:42px}
  body[data-camera-embed="true"] .capture-stage.is-captured .capture-controls{padding-top:6px}
  body[data-camera-embed="true"] .shutter{width:48px;border-width:4px}
  .capture-review{width:min(calc(100% - 24px),420px);gap:7px}
  .capture-title-input{min-height:42px;padding:7px 10px;font-size:14px}
  .capture-review-actions .button{min-height:42px}
}

@media(max-width:380px){
  .capture-live-shell .shutter{width:66px}
  body[data-camera-embed="true"] .capture-live-shell .shutter{width:56px}
}

body[data-camera-embed="true"] .camera-flip{position:static;grid-column:3;grid-row:1;justify-self:center;align-self:center;width:48px;height:48px;transform:none}
@media(max-height:350px){body[data-camera-embed="true"] .camera-flip{width:42px;height:42px;padding:0}}