/* The door's spoken clue is presented as an important message, above its lock. */
.escape-word-riddle{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:1.15rem 0 1.35rem;
  padding:0;
  border:2px solid #98713a;
  border-radius:16px;
  background:#1a2b38;
  box-shadow:0 9px 20px #30210e36, inset 0 0 0 2px #f2d59b3d;
  animation:door-message-glow 3.2s ease-in-out 2;
}
.escape-word-riddle::before{
  content:'';
  position:absolute;
  inset:5px;
  z-index:-1;
  border:1px solid #eacb8361;
  border-radius:10px;
  pointer-events:none;
}
.escape-word-riddle h4{
  position:relative;
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0;
  padding:1rem 1.2rem;
  color:#ffe4a2;
  font-family:Georgia,serif;
  font-weight:700;
  font-size:clamp(1.25rem,2.5vw,1.55rem);
  line-height:1.25;
  letter-spacing:.01em;
  text-shadow:0 2px 5px #0009;
  background:linear-gradient(110deg,#183649,#263b43 65%,#4e3c27);
  border-bottom:1px solid #b99658;
}
 .escape-word-riddle h4::before{
  content:'';
  flex:none;
  width:1.8rem;
  height:2.1rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpath d='M5 4h17v24H5zM9 10h9M9 15h9M9 20h6' fill='none' stroke='%23f5d99a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 4h21M3 28h21' fill='none' stroke='%23e7c77d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.escape-word-riddle p{
  position:relative;
  margin:.85rem!important;
  padding:1.15rem 1.2rem 1.25rem 2.8rem;
  border:1px solid #c5a46e;
  border-radius:7px;
  color:#283d4a;
  background:radial-gradient(ellipse at 15% 0,#fffdf4 0%,#f9edcf 75%,#efdbaf 100%);
  box-shadow:inset 0 0 18px #b68b4d24,0 3px 8px #080e1480;
  font-size:clamp(1rem,1.8vw,1.12rem);
  line-height:1.7;
  overflow-wrap:anywhere;
}
.escape-word-riddle p::before{
  content:'“';
  position:absolute;
  top:.54rem;
  left:.65rem;
  color:#9f7937;
  font:700 3.4rem/.9 Georgia,serif;
}
@keyframes door-message-glow{
  0%,100%{box-shadow:0 9px 20px #30210e36,inset 0 0 0 2px #f2d59b3d}
  50%{box-shadow:0 9px 24px #88601d66,0 0 0 3px #d8b76d66,inset 0 0 0 2px #f2d59b70}
}
@media(max-width:480px){
  .escape-word-riddle h4{padding:.8rem .9rem;gap:.6rem;font-size:1.2rem}
  .escape-word-riddle h4::before{width:1.55rem;height:1.85rem}
  .escape-word-riddle p{margin:.65rem!important;padding:1rem .9rem 1rem 2.35rem;font-size:1rem;line-height:1.65}
  .escape-word-riddle p::before{left:.55rem;font-size:2.9rem}
}
@media(prefers-reduced-motion:reduce){.escape-word-riddle{animation:none}}