/* A physical, illuminated lock with three accessible, usable code inputs. */
.escape-puzzle .escape-code-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(.3rem,1.5vw,.8rem);
  padding:clamp(1.1rem,4vw,2rem) clamp(.85rem,3vw,1.7rem);
  border:0;
  border-radius:1rem;
  background:#302019 url('/assets/escape/realistic/gate-code-panel-v1.jpg') center/100% 100% no-repeat;
  box-shadow:0 7px 18px #29170555;
}
.escape-puzzle .escape-code-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-width:0;
  padding:.45rem .15rem;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#ffe8a8;
  text-shadow:0 2px 3px #120900;
}
.escape-puzzle .escape-code-label span{
  min-height:2.5em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow-wrap:anywhere;
  font-size:clamp(.8rem,2.2vw,1.05rem);
  line-height:1.15;
}
.escape-puzzle .escape-code-label input{
  box-sizing:border-box;
  width:min(100%,4.2rem);
  min-width:0;
  height:3.3rem;
  border:2px solid #caaa66;
  border-radius:.6rem;
  background:#fff9e9;
  color:#172f40;
  font-size:1.65rem;
  font-weight:800;
  text-align:center;
  text-shadow:none;
  box-shadow:inset 0 2px 5px #3b220e44,0 2px 5px #160a06aa;
}
.escape-puzzle .escape-code-label input:focus-visible{outline:3px solid #f7d783;outline-offset:3px}
@media(max-width:380px){.escape-puzzle .escape-code-grid{gap:.25rem;padding:1rem .65rem}.escape-puzzle .escape-code-label input{height:3rem}}

/* The carved plaques pair each symbol with its calculation. */
.escape-gate-code-clue .escape-gate-riddle-title{margin:0 0 .65rem;font-family:Georgia,serif;font-size:1.2rem;color:#5b3b13}
.escape-gate-equations{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.escape-gate-equation{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;padding:.45rem .65rem;border:1px solid #d2b67d;border-radius:.55rem;background:#fffaf0}
.escape-gate-equation-symbol{display:grid;place-items:center;width:1.8rem;height:1.8rem;flex:none;border-radius:50%;background:#6c4823;color:#ffe6a6;font-size:1.1rem}
.escape-gate-equation-name{flex:1;min-width:3rem;color:#5a431c}
.escape-gate-equation-text{font-variant-numeric:tabular-nums;color:#183246;white-space:nowrap}
/* Ancient scrolls hold the guardians' clues without giving away their signs. */
.escape-gate-equations { gap: .7rem; }
.escape-gate-equation {
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  padding: .8rem 1rem;
  border: 1px solid #c4a16a;
  border-left: .3rem solid #9b6c38;
  border-radius: .6rem;
  background: linear-gradient(115deg,#fff8e8,#f3e5c7);
  box-shadow: 0 3px 8px #49311c18;
}
.escape-gate-equation-name { display:block; color:#573c26; font-weight:600; line-height:1.5; }
.escape-gate-equation-text { display:block; color:#183246; font-size:1.08rem; font-weight:800; letter-spacing:.01em; white-space:normal; }

/* The four portraits belong to the clues; their identity remains a riddle. */
.escape-gate-equation {display:grid;grid-template-columns:clamp(3.9rem,15vw,5.6rem) minmax(0,1fr);align-items:center;gap:.85rem}
.escape-guardian-portrait {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid #a78049;border-radius:.48rem;box-shadow:0 2px 6px #3020164d}
.escape-guardian-words {min-width:0;display:grid;gap:.45rem}
@media(max-width:380px){.escape-gate-equation{padding:.65rem;gap:.65rem}.escape-gate-equation-text{font-size:.95rem}}
/* The sign associates each spoken number riddle with a lock field. */
.escape-guardian-symbol{justify-self:start;padding:.15rem .5rem;border-radius:999px;background:#6c4823;color:#fff0c6;font-size:.78rem;font-weight:800;line-height:1.35}

/* Each guardian gives one clue to the sign and another to the number. */
.escape-gate-equation{align-items:start}
.escape-guardian-identity{display:block;color:#573c26;font-weight:600;line-height:1.5}
.escape-guardian-number{display:block;color:#183246;font-weight:800;line-height:1.5;border-top:1px solid #d5b98c;padding-top:.45rem}