#civskill-secure-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;
}
#civskill-secure-modal.open { display:block; }
.civskill-secure-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(5px);
}
.civskill-secure-dialog {
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px,94vw);
  height:min(760px,92vh);
  background:#050505;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 80px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.15);
}
.civskill-secure-frame {
  position:absolute; inset:42px 0 0 0;
}
.civskill-secure-frame iframe {
  width:100%; height:100%; border:0; background:#000;
}
.civskill-secure-close {
  position:absolute; right:10px; top:5px;
  z-index:20;
  width:32px; height:32px;
  border:0; border-radius:50%;
  background:#fff; color:#111;
  font-size:25px; line-height:30px;
  cursor:pointer;
}
.civskill-secure-warning {
  position:absolute; left:14px; top:10px;
  z-index:20; color:#fff;
  font:600 13px/20px Arial,sans-serif;
  opacity:.85;
}
.civskill-watermark {
  position:absolute; z-index:15;
  color:rgba(255,255,255,.22);
  font:600 15px/1.3 Arial,sans-serif;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  transform:rotate(-18deg);
  text-shadow:0 1px 2px #000;
}
.wm-a { left:8%; top:28%; }
.wm-b { left:43%; top:52%; }
.wm-c { left:68%; top:76%; }
.civskill-hidden .civskill-secure-frame {
  filter:blur(28px);
}
.civskill-capture-warning #civskill-secure-modal.open .civskill-secure-frame {
  filter:blur(30px);
}
html.civskill-modal-open { overflow:hidden !important; }
@media (max-width:700px) {
  .civskill-secure-dialog {
    width:100vw; height:100vh;
    border-radius:0;
  }
  .civskill-watermark { font-size:12px; }
}