/* Locked Room (IELTS Arena): the attic, its four stations, the station panels and the code lock. */
.es-intro-host{max-height:260px!important}
.es-hud{gap:16px}
.es-hud .es-clock{margin-left:0;width:84px;height:84px;font-size:24px}
.es-slots{display:flex!important;gap:8px}
.es-slot{display:grid;place-items:center;width:48px;height:56px;border-radius:12px;border:2px dashed rgba(255,255,255,.3);background:rgba(0,0,0,.3);
  font-family:var(--display);font-weight:800;font-size:28px;color:rgba(255,255,255,.35)}
.es-slot.on{border:2px solid var(--gold);color:#2f1700;background:linear-gradient(180deg,#ffe08a,#f0b35a);box-shadow:0 0 18px rgba(255,200,61,.5);animation:gm-pop-in .4s}
.es-quit{margin-left:auto}
/* The room: objects placed on the backdrop (16:9 on wide screens, two rows on phones) */
.es-room{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:2px solid rgba(255,255,255,.18);
  background:url(/static/study-hub/games-art/arena-escape.webp) center/cover no-repeat;box-shadow:0 20px 40px -24px #000}
.es-room::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 70%,transparent 40%,rgba(10,6,30,.45))}
.es-thing{position:absolute;bottom:5%;padding:0;border:0;background:none;display:block;transition:transform .2s,filter .3s}
.es-thing-art{display:block;height:100%;width:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.es-thing:not(.locked):hover{transform:translateY(-4px) scale(1.03)}
.es-thing.locked .es-thing-art{filter:grayscale(.55) brightness(.62) drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.es-thing.next .es-thing-art{animation:es-glow 1.6s ease-in-out infinite}
@keyframes es-glow{50%{filter:drop-shadow(0 0 18px rgba(255,214,110,.95)) drop-shadow(0 12px 14px rgba(0,0,0,.45))}}
.es-tag{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);white-space:nowrap;padding:4px 10px;border-radius:999px;font-weight:800;font-size:13px;
  background:rgba(14,10,36,.86);border:1px solid var(--line);color:#fff;pointer-events:none}
.es-thing.next .es-tag{background:linear-gradient(180deg,#ffe08a,#f0b35a);color:#2f1700;border-color:transparent}
.es-thing.done .es-tag{background:#0fa968;border-color:transparent}
.es-reading{left:2%;height:58%}
.es-listening{left:5%;bottom:63%!important;height:21%}
.es-writing{left:26%;height:42%}
.es-speaking{left:62%;height:46%}
.es-door{right:1%;height:72%}
.es-door.open .es-thing-art{animation:none;filter:drop-shadow(0 0 30px rgba(255,214,110,.9))}
.es-otter{position:absolute;left:46%;bottom:3%;height:40%;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5));animation:gm-bob 3s ease-in-out infinite;z-index:2}
.es-room.escaped .es-otter{animation:es-run 1.8s ease-in forwards}
@keyframes es-run{30%{transform:translateY(-12%)}100%{transform:translate(160%,-6%) scale(.7);opacity:0}}
.es-say{margin:12px 2px 0;font-weight:800;color:#ffe2a8;min-height:1.5em}
/* Station panels */
.gm-stage>.es-panel{position:absolute!important;z-index:20!important}
.es-panel{top:14px;left:0;right:0;margin:0 auto;width:min(900px,calc(100% - 28px));max-height:calc(100% - 28px);display:flex;flex-direction:column;border-radius:22px;background:rgba(18,12,42,.97);border:2px solid rgba(240,179,90,.5);
  box-shadow:0 30px 60px -20px #000,0 0 0 100vmax rgba(8,5,24,.62);overflow:auto;animation:gm-rise .3s backwards}
.es-panel-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(18,12,42,.97);border-bottom:1px solid var(--line)}
.es-panel-head h3{margin:0;font-family:var(--display);font-size:22px;line-height:1.1;flex:1}
.es-panel-icon{font-size:28px}
.es-panel-time{font-family:var(--display);font-weight:800;font-size:18px;color:var(--gold);white-space:nowrap}.es-panel-time.urgent{color:#ff8da1}.es-close{min-width:44px}
.es-panel-body{padding:16px 18px 4px}
.es-feedback{padding:0 18px 16px}
.es-passage{max-height:300px;overflow:auto;padding:16px 18px;border-radius:16px;background:#fbf3df;color:#2b2140;line-height:1.65;font-size:16px;box-shadow:inset 0 0 0 1px #e7d6a8}
.es-passage h4{margin:0 0 6px;font-family:var(--display);font-size:20px;color:#5a3b10}.es-passage p{margin:0}
.es-question{margin:6px 0 10px;font-weight:800;font-size:18px}
.es-options{margin-top:4px}
.es-form textarea{flex:1 1 260px;min-height:64px;border:2px solid var(--line);border-radius:16px;padding:10px 16px;background:rgba(0,0,0,.35);color:#fff;font-size:16px;resize:vertical}
.es-strike{color:#ffd0d8}
.es-base{display:inline-block;margin:0 0 6px;padding:4px 14px;border-radius:10px;background:var(--gold);color:#3b2700;font-weight:800;letter-spacing:.12em}
.es-blank{display:inline-block;min-width:80px;border-bottom:3px solid var(--gold);color:var(--gold);text-align:center}
.es-built{display:flex;flex-wrap:wrap;gap:8px;min-height:58px;padding:10px;border-radius:16px;border:2px dashed rgba(255,255,255,.25);background:rgba(0,0,0,.25);align-items:center}
.es-built-empty{color:var(--muted);font-weight:600}
.es-pool{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gm-btn.es-chip{min-height:44px;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.14);font-size:16px}
.gm-btn.es-chip.on{background:linear-gradient(180deg,#ffe08a,#f0b35a);color:#2f1700}
.es-radio{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px;border-radius:16px;background:rgba(255,255,255,.06)}
.es-radio small{color:var(--muted)}
.es-eq{display:flex;align-items:flex-end;gap:4px;height:36px}
.es-eq i{width:6px;height:20%;border-radius:3px;background:var(--gold)}
.es-eq.on i{animation:es-eq .8s ease-in-out infinite}.es-eq i:nth-child(2n){animation-delay:-.3s}.es-eq i:nth-child(3n){animation-delay:-.55s}
@keyframes es-eq{50%{height:100%}}
.es-parrot{margin:0;font-weight:700;color:#bff5c4}
.es-rec{margin:8px 0 30px}
.es-wrong{margin:10px 0 0;font-weight:800;color:#ff8da1}
.es-hint{margin:8px 0 0;padding:10px 14px;border-radius:14px;background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.4);font-weight:600}
.es-letter{display:grid;justify-items:center;gap:8px;padding:20px 0}
.es-letter small{font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.es-letter strong{display:grid;place-items:center;width:120px;height:140px;border-radius:22px;font-family:var(--display);font-size:86px;color:#2f1700;
  background:linear-gradient(180deg,#ffe08a,#f0b35a);box-shadow:0 0 40px rgba(255,200,61,.6);animation:es-flip .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes es-flip{from{transform:rotateY(180deg) scale(.4);opacity:0}}
.es-tiles{display:flex;gap:10px;margin:8px 0 14px}
.gm-btn.es-tile{width:60px;height:68px;padding:0;border-radius:14px;font-family:var(--display);font-size:32px;background:linear-gradient(180deg,#ffe08a,#f0b35a);color:#2f1700}
.es-lock{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.es-code{width:220px;min-height:68px;border-radius:16px;border:3px solid var(--gold);background:rgba(0,0,0,.45);color:#fff;text-align:center;
  font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:.45em;padding-left:.45em;text-transform:uppercase}
@media (max-width:640px){
  .es-hud{gap:10px}.es-hud .es-clock{width:64px;height:64px;font-size:19px}
  .es-slot{width:38px;height:46px;font-size:23px}
  .es-room{aspect-ratio:3/4}
  .es-room::after{content:'';position:absolute;left:0;right:0;bottom:50%;height:10px;background:linear-gradient(180deg,#8a5a2b,#5a3714);box-shadow:0 6px 10px rgba(0,0,0,.4)}
  .es-thing{z-index:1}
  .es-reading{left:3%;bottom:51.5%;height:34%}
  .es-listening{left:37%;bottom:51.5%!important;height:14%}
  .es-door{right:3%;bottom:51.5%;height:41%}
  .es-writing{left:2%;bottom:4%;height:33%}
  .es-speaking{right:4%;left:auto;bottom:4%;height:38%}
  .es-otter{left:39%;bottom:3%;height:31%}
  .es-tag{font-size:11px;padding:3px 8px}
  .es-panel{top:6px;width:calc(100% - 12px);max-height:calc(100% - 12px)}
  .es-panel-head h3{font-size:18px}
  .es-passage{font-size:15px;max-height:none}
  .es-code{width:100%}
}
@media (prefers-reduced-motion:reduce){.es-room.escaped .es-otter{animation:none}}