/* Escape room: notebook, inventory, hints, lock dialog and step-by-step solution. Reuses the play layout of play-layout.css. */
.strip-end{margin-left:auto}
#escapeMessage{background:#392d45;border-left:3px solid #2fe07a;padding:8px 10px;font-size:12px;line-height:1.5;margin:0 0 14px;min-height:20px}
.escape-notes{display:grid;gap:7px;margin:0 0 14px}
.escape-notes article{background:#1f1c30;border:1px solid #4d4256;border-left:3px solid #2fe07a;padding:8px 10px}
.escape-notes b{display:block;font:700 10px monospace;letter-spacing:.08em;text-transform:uppercase;color:#2fe07a;margin-bottom:5px}
.escape-notes p{margin:0;font-size:13px;line-height:1.55;color:#f1e7d6;overflow-wrap:anywhere}
.escape-notes .muted,.escape-inventory .muted{font-size:12px;margin:0}
.escape-inventory{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.escape-inventory span{font-size:12px;padding:6px 9px;border:1px solid #75586e;background:#3d2c48}
.escape-hints{margin:0 0 10px;padding-left:18px;font-size:12px;line-height:1.5;color:#e8dcb2}
.escape-hints li{margin-bottom:5px}
.escape-hints li.muted{list-style:none;margin-left:-18px}
.escape-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.escape-actions .button{padding:9px 12px;font-size:12px;min-height:36px}
.escape-actions .text-button{color:#f49aad;font-size:12px}
#lockDialog{width:min(430px,calc(100% - 28px))}
#lockDialog h2{margin-bottom:18px}
#lockInput{font:700 26px monospace;letter-spacing:.3em;text-align:center;text-transform:uppercase}
#lockInput::placeholder{letter-spacing:.2em;color:#6d6378;font-size:18px}
#lockError{min-height:20px}
.lock-notes{margin-top:18px;border-top:1px solid #59465f;padding-top:12px;font-size:13px}
.lock-notes summary{cursor:pointer;color:#e9cfb0;margin-bottom:10px}
.lock-notes .escape-notes{max-height:30dvh;overflow:auto;margin:0}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.result-solution{text-align:left;font-size:13px;line-height:1.55;max-height:34dvh;overflow:auto;border-top:1px solid #59465f;padding:12px 0 0 20px;margin:12px 0 0}
.result-solution li{margin-bottom:7px}
#surrenderDialog{text-align:center}
#surrenderDialog .eyebrow{justify-content:center}
@media(max-width:700px){.escape-actions .button{min-height:44px;font-size:13px}.escape-actions .text-button{min-height:44px}#lockInput{font-size:24px}}
@media(prefers-reduced-motion:reduce){.shake{animation:none}}
.escape-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.escape-steps li{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid #4d4256;background:#1f1c30;font-size:12px;line-height:1.5}
.escape-steps li p{margin:0}.escape-steps li>span{font:700 13px monospace;min-width:14px}
.escape-steps .now{border-color:#2fe07a;background:#3d3524;color:#fff4cf}.escape-steps .now>span{color:#2fe07a}
.escape-steps .done{color:#a9c99a}.escape-steps .done>span{color:#8fd08f}
.escape-steps .locked{color:#8e8499}
.escape-zones{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}.escape-zones span{font:700 10px monospace;padding:5px 7px;border:1px solid #4d4256;color:#9d92a8}.escape-zones .here{border-color:#2fe07a;color:#0b2e18;background:#2fe07a}
.escape-current article{border-left-color:#f0b84e;background:#3d3524}.escape-current b::after{content:' · PARA ESTE PASO';color:#f0b84e}
.escape-others{margin:0 0 14px;font-size:12px}.escape-others summary{cursor:pointer;color:#e9cfb0;margin-bottom:8px}.escape-others .escape-notes{margin:0}
.level-options{display:grid;gap:10px}.level-option{text-align:left;padding:14px 16px;border:1px solid #71576d;background:#33283f;display:grid;gap:6px}.level-option b{font-size:18px}.level-option span{font-size:13px;color:#d4c6d8;line-height:1.45}.level-buttons{display:flex;gap:8px;flex-wrap:wrap}.level-buttons .button{width:auto;flex:1;padding:10px 12px;font-size:13px;border:1px solid #71576d}.level-status{font-size:11px;color:#b9b0c6}#levelDialog{max-height:94dvh;overflow:auto}
.lock-switch{display:grid;gap:10px;justify-items:center;margin:4px 0 8px}
.lights{display:grid;grid-template-columns:repeat(3,64px);gap:8px}
.lights button{width:64px;height:64px;border-radius:8px;border:2px solid #71576d;background:#2b2735;box-shadow:inset 0 -4px 0 #0005}
.lights button.on{background:#f2d15c;border-color:#fff3bc;box-shadow:0 0 14px #f2d15c99,inset 0 -4px 0 #0003}
.lock-simon{display:grid;gap:10px;justify-items:center;margin:4px 0 8px}
.simon-pad{display:grid;grid-template-columns:repeat(2,90px);gap:10px}
.simon-pad button{width:90px;height:70px;border-radius:12px;border:2px solid #0006;opacity:.55;transition:opacity .08s,filter .08s}
.simon-pad .c0{background:#d9534f}.simon-pad .c1{background:#4cae4c}.simon-pad .c2{background:#3f73c8}.simon-pad .c3{background:#e8c43a}
.simon-pad button.lit,.simon-pad button:active{opacity:1;filter:brightness(1.3)}
.simon-progress{font:700 18px monospace;letter-spacing:.2em;margin:0;color:#2fe07a}
#simonWatch{width:auto;padding:10px 18px}
/* Free walk card and the "walk through without opening" button of a way out that is also a passage. */
.level-tour{border-style:dashed;background:#2b2638}.lock-pass{display:block;margin:10px auto 0;font-size:13px}
/* Escape en equipo: la tarjeta para crear o unirse, la sala de espera, el panel del equipo y su chat. */
.level-team{border-color:#5fb3e0}.team-join{display:flex;gap:8px;margin-top:4px}.team-join input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.3em;font:700 16px/1 ui-monospace,monospace;padding:10px;border:1px solid #71576d;background:#1b1924;color:#f4efe6}
.team-join .button{width:auto;padding:10px 14px}.team-code{font-family:ui-monospace,monospace;letter-spacing:.2em;color:#9fe3ff}
.team-members{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}.team-members li{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid #3a3448;background:#1b1924}.team-members canvas{width:32px;height:32px;image-rendering:pixelated}.team-members small{color:#b9b0c6;font-size:11px}
.team-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:4px;font-size:13px}.team-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;background:#1b1924;border-left:3px solid #9fe3ff}.team-list li span{color:#b9b0c6}.team-list li.away{opacity:.6}.team-list li.left{opacity:.45;border-left-color:#71576d}
.team-chat{max-height:180px;overflow:auto;background:#1b1924;border:1px solid #3a3448;padding:6px 8px;font-size:13px;display:grid;gap:4px}.team-chat p{margin:0;overflow-wrap:anywhere}.team-chat p.mine b{color:#e8cfa0}.team-chat b{color:#9fe3ff}
.chat-form{display:flex;gap:6px;margin:6px 0 10px}.chat-form input{flex:1;min-width:0;padding:8px;border:1px solid #71576d;background:#1b1924;color:#f4efe6;font-size:16px}.chat-form .button{width:auto;padding:8px 12px;font-size:13px}
.note-locked{color:#b9b0c6}
/* Team colors: one per seat (tag, chat, team list). */
.seat-0{--seat:#5fb3e0}.seat-1{--seat:#ec589a}.seat-2{--seat:#f2d15c}.seat-3{--seat:#79e08d}
b[class^=seat-],.team-chat b[class^=seat-]{color:var(--seat)}.team-list li[class*=seat-]{border-left-color:var(--seat)}
.team-list li b small,.team-members small{display:block;font-weight:400;color:#b9b0c6;font-size:11px}

.lock-hands{display:grid;gap:10px;justify-items:center;margin:4px 0 8px}
.lock-hands[hidden]{display:none}
.hands-canvas{width:min(240px,62vw);height:auto;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;border-radius:50%}
.hands-canvas.paper{border-radius:6px;box-shadow:0 3px 0 #0006;cursor:crosshair}
.dial-read{margin:0;min-height:22px;display:flex;gap:8px;font:700 15px monospace;color:#b9b0c6}
.dial-read span{padding:2px 8px;border-radius:6px;background:#2b2735}.dial-read .done{color:#16151c;background:#2fe07a}.dial-read .now{color:#16151c;background:#f2d15c}
.dial-buttons{display:flex;gap:10px;align-items:center}.dial-buttons .button{width:54px;min-height:44px;padding:6px;font-size:20px}
.lock-hands progress{width:min(240px,62vw);height:8px}
.lock-hands .button.lime{width:auto;padding:10px 18px}
@media(max-height:520px){.hands-canvas{width:min(170px,40vh)}.lock-hands{gap:6px}}
#lockDialog.holding{overflow:hidden;touch-action:none}
.lock-hands{touch-action:none;overscroll-behavior:contain}
.lock-hands .button,.lock-hands .text-button{touch-action:manipulation}
.world-dialog{width:min(720px,calc(100% - 24px))}
.world-mode{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}.world-mode .button{flex:1 1 150px;min-height:44px}
.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:10px}
.world{display:grid;gap:6px;padding:6px 6px 8px;border:2px solid #59465f;border-radius:10px;background:#2b2638;color:#f4efe6;text-align:left;font-size:13px;touch-action:manipulation;cursor:pointer}
.world canvas{width:100%;height:auto;aspect-ratio:8/7;border-radius:6px;image-rendering:pixelated;display:block}
.world b{color:#c9a3ff}.world:hover,.world:focus-visible{border-color:#2fe07a}.world.last{border-color:#f2d15c}
.world.last span::after{content:' · el último';color:#f2d15c;font-size:11px}
#worldRandom{margin:2px 0}
@media(max-width:420px){.world-grid{grid-template-columns:repeat(2,1fr)}}