/* Canonical PhotoFrame component. Feed + camera share the same transparent art overlay. */
:root{
  --frame-haunted:#f47e32;
  --frame-damned:#70a7cf;
  --frame-event:#bf5159;
  --frame-side:8px;
  --frame-top:8px;
  --frame-bottom:74px;
  --frame-keyart-paper:#e6e1d7;
  --frame-keyart-size:52px;
}
.nightmare-frame{
  --photo-frame-color:var(--frame-event);
  position:relative;
  display:block;
  width:100%;
  padding:var(--frame-top) var(--frame-side) var(--frame-bottom);
  overflow:hidden;
  background:var(--photo-frame-color);
  color:#191919;
}
.nightmare-frame[data-frame-id="event"],
.nightmare-frame[data-frame-id="haunted"],
.nightmare-frame[data-frame-id="damned"]{
  aspect-ratio:1362 / 1155;
  padding:0;
}
.nightmare-frame[data-frame-id^="pet-badge-"]{
  aspect-ratio:1280 / 1085;
  padding:0;
}
.nightmare-frame[data-frame-id^="score-brag-"]{
  aspect-ratio:1280 / 1085;
  padding:0;
  container-type:inline-size;
}
.nightmare-frame[data-frame-id="event"]{--photo-frame-color:var(--frame-event)}
.nightmare-frame[data-frame-id="haunted"]{--photo-frame-color:var(--frame-haunted)}
.nightmare-frame[data-frame-id="damned"]{--photo-frame-color:var(--frame-damned)}
.nightmare-frame[data-frame-id="battle-pet"]{--photo-frame-color:#8b68c8}
.nightmare-frame::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  background-image:var(--photo-frame-overlay,none);
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
}
.nightmare-frame-window{
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  aspect-ratio:4/3;
  place-items:center;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / 42%);
  background:#111419;
  color:#a29d98;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.nightmare-frame[data-frame-id="event"] .nightmare-frame-window,
.nightmare-frame[data-frame-id="haunted"] .nightmare-frame-window,
.nightmare-frame[data-frame-id="damned"] .nightmare-frame-window{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
}
.nightmare-frame[data-frame-id^="pet-badge-"] .nightmare-frame-window{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
}
.nightmare-frame[data-frame-id^="score-brag-"] .nightmare-frame-window{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
}
.nightmare-frame-window img,
.nightmare-frame-window .feed-photo-image,
.nightmare-frame-window .live-camera,
.nightmare-frame-window .captured-camera-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nightmare-frame-art{
  position:absolute;
  z-index:2;
  right:var(--frame-side);
  bottom:0;
  left:var(--frame-side);
  height:var(--frame-bottom);
  display:grid;
  place-items:center;
  pointer-events:none;
}
.nightmare-frame-keyart{
  display:grid;
  width:var(--frame-keyart-size);
  height:var(--frame-keyart-size);
  place-items:center;
  border:1px solid rgb(0 0 0 / 26%);
  background:var(--frame-keyart-paper);
  color:var(--photo-frame-color);
  box-shadow:0 0 0 2px rgb(255 255 255 / 22%);
  font-size:8px;
  font-weight:900;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
}
.nightmare-frame-keyart svg{display:block;width:32px;height:32px}
.nightmare-frame-badge-title{
  position:absolute;
  z-index:4;
  right:20%;
  bottom:var(--badge-title-bottom,9%);
  left:20%;
  display:grid;
  height:8%;
  place-items:center;
  overflow:hidden;
  color:#fff;
  font-size:clamp(10px,3.8vw,24px);
  font-weight:1000;
  line-height:1;
  text-align:center;
  text-overflow:ellipsis;
  text-shadow:0 2px 2px #000;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.nightmare-frame[data-frame-id="pet-badge-telechirp"]{--badge-title-bottom:7.5%}
.nightmare-frame[data-frame-id="pet-badge-hexicacti"]{--badge-title-bottom:10.5%}
.nightmare-frame[data-frame-id="pet-badge-skelepurr"]{--badge-title-bottom:7.5%}
.nightmare-frame-score-plaque{
  position:absolute;
  z-index:4;
  top:9.7%;
  display:grid;
  width:34%;
  height:15.5%;
  align-content:center;
  justify-items:center;
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:1000;
  line-height:.9;
  text-align:center;
  text-transform:uppercase;
  pointer-events:none;
}
.nightmare-frame-score-left{left:5%}
.nightmare-frame-score-right{right:5%}
.nightmare-frame-score-left{color:#ff8318}
.nightmare-frame-score-right{color:#16d9f4}
.nightmare-frame-score-plaque strong{
  max-width:100%;
  font-size:clamp(16px,5.9vw,68px);
  font-size:clamp(16px,5.9cqw,68px);
  letter-spacing:.015em;
  white-space:nowrap;
}
.nightmare-frame-score-plaque span{
  margin-top:.06em;
  font-size:clamp(9px,3.1vw,36px);
  font-size:clamp(9px,3.1cqw,36px);
  letter-spacing:.07em;
  white-space:nowrap;
}
.nightmare-frame-keyart .event-keyart,
.nightmare-frame-keyart .pet-keyart,
.nightmare-frame-keyart .other-keyart{font-size:9px;letter-spacing:.04em}
.capture-frame-host{width:100%}
.capture-live-shell [data-capture-frame]{width:min(100%,520px);margin:0 auto}
.capture-live-shell .nightmare-frame{width:100%}


@media(max-width:380px){
  :root{--frame-side:7px;--frame-top:7px;--frame-bottom:70px;--frame-keyart-size:46px}
  .nightmare-frame-keyart svg{width:28px;height:28px}
}