.secret-role-access[hidden],
.secret-role-overlay[hidden],
#secret-role-locked[hidden],
#secret-role-revealed[hidden] {
  display: none !important;
}

.secret-role-access {
  position: fixed;
  z-index: 950;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid rgba(255, 201, 113, 0.62);
  padding: 0 15px;
  color: #ffe3ad;
  background: rgba(3, 13, 17, 0.93);
  box-shadow: 0 0 24px rgba(255, 188, 73, 0.12);
  cursor: pointer;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.secret-role-access-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffc971;
  box-shadow: 0 0 12px rgba(255, 201, 113, 0.95);
  animation: secret-role-pulse 1.8s ease-in-out infinite;
}

.secret-role-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.secret-role-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 194, 86, 0.1), transparent 38%),
    rgba(0, 5, 7, 0.94);
  backdrop-filter: blur(9px);
}

.secret-role-card {
  position: relative;
  width: min(100%, 620px);
  max-height: min(88vh, 820px);
  overflow: auto;
  border: 1px solid rgba(255, 201, 113, 0.44);
  padding: clamp(28px, 7vw, 54px);
  color: #eaf9fc;
  background:
    linear-gradient(rgba(101, 231, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 231, 255, 0.025) 1px, transparent 1px),
    #061116;
  background-size: 27px 27px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72), 0 0 42px rgba(255, 185, 68, 0.08);
}

.secret-role-card::before,
.secret-role-card::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 2px;
  background: #ffc971;
  box-shadow: 0 0 16px rgba(255, 201, 113, 0.75);
}

.secret-role-card::before {
  top: -1px;
  left: 0;
}

.secret-role-card::after {
  right: 0;
  bottom: -1px;
}

.secret-role-card > *:not(.secret-role-scan) {
  position: relative;
  z-index: 1;
}

.secret-role-scan {
  position: absolute;
  z-index: 0;
  inset: -80% 0 auto;
  height: 55%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 201, 113, 0.055), transparent);
  animation: secret-role-scan 4.8s linear infinite;
}

.secret-role-close {
  position: absolute !important;
  top: 13px;
  right: 13px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(101, 231, 255, 0.22);
  padding: 0;
  color: #8ca8af;
  background: rgba(0, 8, 11, 0.72);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.secret-role-channel,
.secret-role-classification,
.secret-role-key,
.secret-role-time,
.secret-role-directive {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.secret-role-channel {
  margin: 0 0 25px;
  color: #5c7379;
  font-size: 0.55rem;
}

.secret-role-classification {
  margin: 0 0 12px;
  color: #ffc971;
  font-size: 0.62rem;
}

.secret-role-card h2 {
  margin: 0;
  color: #f1fcff;
  font-size: clamp(1.55rem, 7vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.secret-role-warning,
.secret-role-briefing {
  color: #b4cbd0;
  font-size: clamp(0.98rem, 4.1vw, 1.18rem);
  line-height: 1.7;
}

.secret-role-warning {
  margin: 24px 0 0;
}

.secret-role-key {
  margin: 0 0 12px;
  color: #ffc971;
  font-size: 0.62rem;
  overflow-wrap: anywhere;
}

.secret-role-briefing {
  margin: 25px 0 0;
  white-space: pre-wrap;
}

.secret-role-time {
  display: block;
  margin-top: 25px;
  color: #506970;
  font-size: 0.55rem;
}

.secret-role-directive {
  margin: 22px 0 0;
  border-left: 2px solid #ff7a8a;
  padding: 11px 0 11px 14px;
  color: #ff9da8;
  font-size: 0.6rem;
  line-height: 1.55;
}

.secret-role-reveal,
.secret-role-hide {
  width: 100%;
  min-height: 55px;
  margin-top: 25px;
  border: 0;
  padding: 0 17px;
  cursor: pointer;
  color: #1b1200;
  background: #ffc971;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.secret-role-hide {
  color: #001014;
  background: #65e7ff;
}

.secret-role-reveal:disabled,
.secret-role-hide:disabled {
  cursor: wait;
  opacity: 0.5;
}

.secret-role-error {
  min-height: 20px;
  margin: 14px 0 0;
  color: #ff8b97;
  font-size: 0.74rem;
}

@keyframes secret-role-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes secret-role-scan {
  from { transform: translateY(0); }
  to { transform: translateY(360%); }
}

@media (prefers-reduced-motion: reduce) {
  .secret-role-access-dot,
  .secret-role-scan {
    animation: none;
  }
}