.game-panel:has(.er-game){padding:0;background:#18232e;border:1px solid #b6c7ce35;box-shadow:0 16px 45px #07101755;overflow:hidden}
.er-game{--er-accent:#deb77b;background:#18232e;color:#e8eff0;font-family:system-ui,sans-serif;padding:24px;border-radius:16px}
.er-game *{box-sizing:border-box}.er-game [hidden]{display:none!important}
.er-game button,.er-game input{font:inherit}.er-game button{cursor:pointer;transition:background .18s,transform .18s,border-color .18s}.er-game button:active{transform:translateY(2px)}
.er-game button:focus-visible,.er-hotspot:focus-visible,.er-game input:focus-visible{outline:3px solid var(--er-accent);outline-offset:4px}
.er-header{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:20px}.er-header h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;margin:7px 0 8px;color:#f6f4e9}.er-header p{font-size:.88rem;line-height:1.6;color:#b6c7cc;margin:0;max-width:660px}
.er-eyebrow{font-size:.65rem;letter-spacing:.14em;font-weight:800;color:var(--er-accent)}
.er-button{border:1px solid #748a943d;border-radius:9px;background:#2b3b46;color:#e8eff0;min-height:42px;padding:10px 14px;font-weight:650;font-size:.82rem;white-space:normal}.er-button:hover{background:#374b57;border-color:#afc6cc80}.er-primary{background:var(--er-accent);border-color:transparent;color:#18232e;font-weight:800}.er-primary:hover{background:var(--er-accent);filter:brightness(1.08)}.er-header>.er-button{flex-shrink:0;white-space:nowrap}.er-header>.er-button span{background:#ffffff17;padding:3px 7px;margin-left:8px;border-radius:5px}
.er-progress-row{display:flex;align-items:center;gap:24px;margin-bottom:16px;font-size:.77rem;color:#c9d8db}.er-progress-row>div{flex:1}.er-progress-row>span{font-variant-numeric:tabular-nums;border:1px solid #93aab333;padding:7px 10px;border-radius:8px}.er-progress{height:4px;border-radius:3px;background:#334650;margin-top:10px;overflow:hidden}.er-progress i{display:block;height:100%;background:var(--er-accent);transition:width .4s ease;border-radius:3px}
.er-zones{display:flex;gap:8px;margin-bottom:12px}.er-zones button{flex:1;border:1px solid #8aa1ad36;background:#22313c;border-radius:9px;padding:10px 12px;color:#b9cbd0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:.78rem;font-weight:700;min-height:44px}.er-zones button span{color:var(--er-accent);opacity:.65}.er-zones button:hover{background:#304652}.er-zones .er-active{color:#f5f2e5;background:#354b56;border-color:var(--er-accent)}.er-zones .er-active span{opacity:1}
.er-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}.er-stage{position:relative;overflow:hidden;background:#243946;border:1px solid #8ba8b150;border-radius:12px;aspect-ratio:1000/650;box-shadow:inset 0 0 40px #14202c40}.er-scene{width:100%;height:100%;display:block;animation:er-scene-in .35s ease both}.er-hotspot{cursor:pointer;outline:none}.er-hotspot>g{transition:filter .2s}.er-hotspot:hover>g,.er-hotspot:focus-visible>g{filter:drop-shadow(0 0 9px #fff2b999)}.er-object-label{opacity:0;transition:opacity .16s;pointer-events:none}.er-hotspot:hover .er-object-label,.er-hotspot:focus-visible .er-object-label{opacity:1}.er-object-marker{opacity:.55;animation:er-marker 3s ease-in-out infinite}.er-object-done .er-object-marker{opacity:.12;animation:none}.er-hotspot:hover .er-object-marker{opacity:1}
.er-cushion,.er-drawer,.er-safe-door,.er-exit-door{transition:transform .65s cubic-bezier(.2,.8,.2,1)}.er-lifted{transform:translate(8px,-18px) rotate(5deg)}.er-pulled{transform:translate(0,12px)}.er-safe-door{transform-origin:-74px 0}.er-swung{transform:translate(-12px,4px) skewY(-7deg) scaleX(.22)}.er-exit-door{transform-origin:-86px 0}.er-open-exit{transform:translate(-5px,0) skewY(9deg) scaleX(.16)}.er-action-flash{animation:er-unlock .55s ease}.er-pendulum{animation:er-swing 2.1s ease-in-out infinite}.er-clock-hand{animation:er-turn 24s linear infinite}.er-gear{animation:er-turn 32s linear infinite}.er-scanner{animation:er-scan 3s ease-in-out infinite}.er-leaf{animation:er-leaf 6s ease-in-out infinite;animation-delay:var(--delay,0s)}.er-bubble{animation:er-bubble 6s linear infinite;animation-delay:var(--delay,0s)}.er-snow{animation:er-snow 7s linear infinite;animation-delay:var(--delay,0s)}.er-star{animation:er-star 3.5s ease-in-out infinite;animation-delay:var(--delay,0s)}.er-wave{animation:er-wave 6s ease-in-out infinite}.er-beam{animation:er-star 5s ease-in-out infinite}.er-powered .er-ceiling-light{filter:drop-shadow(0 0 12px var(--er-accent))}.er-display-on{animation:er-star 2s ease-in-out infinite}
.er-object-buttons{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}.er-object-buttons button{flex:1;min-width:100px;background:#243641;color:#c5d4d8;border:1px solid #7795a333;padding:8px 10px;border-radius:7px;font-size:.7rem;min-height:36px}.er-object-buttons button:hover,.er-object-buttons .er-selected{border-color:var(--er-accent);color:#fff4db}
.er-inventory{display:flex;align-items:center;gap:12px;background:#22313b;border-radius:9px;padding:12px}.er-inventory>span{font-weight:800;font-size:.57rem;letter-spacing:.1em;color:#a3bbc3}.er-inventory>div{display:flex;gap:6px;flex-wrap:wrap}.er-inventory>div>span{background:#3b514f;color:#e5eecb;padding:6px 9px;font-size:.74rem;border-radius:5px;border:1px solid #b5c78840}.er-inventory small{color:#8da5af;font-size:.74rem}
.er-inspector{background:#22323d;border:1px solid #8da6b236;border-radius:12px;padding:18px;min-height:300px;position:sticky;top:14px}.er-inspector h3{font-size:1.07rem;color:#f5f2e4;margin:10px 0}.er-inspector>p{font-size:.83rem;line-height:1.75;color:#bcced2;margin:8px 0 16px}.er-inspector #erFeedback{min-height:26px;margin:15px 0 10px;font-size:.77rem;color:#f1c58d}.er-inspector #erFeedback.er-success{color:#b5e4bc}.er-inspector #erActions>.er-button{width:100%}.er-hint{background:none;border:none;color:#a9bdc7;text-decoration:underline;text-underline-offset:4px;font-size:.72rem;padding:8px 0}.er-hint:hover{color:var(--er-accent)}
.er-lock label{display:block;font-size:.7rem;color:#b2c8d2;margin-bottom:9px}.er-lock>div{display:flex;gap:7px}.er-lock input{width:100%;min-width:0;background:#14252f;color:#f1f0dc;border:1px solid #74909d;border-radius:8px;padding:9px;text-align:center;letter-spacing:.18em;font-size:1.1rem}.er-lock button{padding:8px 10px;font-size:.72rem}.er-wrong{animation:er-shake .3s ease}
.er-switches{display:flex;gap:6px;margin:16px 0}.er-switches button{background:#162933;border:1px solid #607d8c;border-radius:9px;color:#b8cbd1;padding:8px 4px;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.75rem}.er-switches i{height:34px;width:16px;background:#14212a;border-radius:4px;position:relative}.er-switches i:after{content:'';position:absolute;background:#879da5;left:2px;right:2px;height:12px;bottom:2px;border-radius:2px;transition:transform .2s}.er-switches .er-on i:after{background:var(--er-accent);transform:translateY(-18px)}.er-switches small{font-size:.6rem}.er-switches .er-on{border-color:var(--er-accent)}
.er-sequence-slots{display:flex;justify-content:center;gap:7px;margin:14px 0}.er-sequence-slots span{width:35px;height:37px;display:grid;place-items:center;border-bottom:2px solid var(--er-accent);font-size:1.3rem;color:var(--er-accent)}.er-symbols{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.er-symbols button{height:49px;color:var(--er-accent);background:#162933;border:1px solid #7d96a04d;border-radius:8px;font-size:1.6rem}.er-symbols button:hover{background:#3c515b;border-color:var(--er-accent)}
.er-notebook{margin-top:22px;background:#e7e2ce;border-radius:12px;color:#35424b;padding:18px 20px;border:1px solid #e9e9cc}.er-notebook-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid #b8b3a5}.er-notebook h3{font-size:1rem;margin:0;font-family:Georgia,serif}.er-notebook-header>span{font-size:.7rem;color:#6b756f}#erNotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:12px}#erNotes>p{font-size:.8rem;margin:0;color:#798079}#erNotes article{border-left:2px solid #b5a789;padding-left:10px}#erNotes strong{font-size:.72rem}#erNotes article p{font-size:.75rem;line-height:1.65;margin:5px 0 0;color:#616d70}
.er-complete{background:linear-gradient(125deg,#315750,#253b43);border:1px solid #a8d4b678;border-radius:12px;padding:24px;text-align:center;margin-top:20px;animation:er-scene-in .6s ease}.er-complete h3{font-size:1.5rem;margin:9px 0;color:#eef0dc}.er-complete p{font-size:.85rem;color:#b8d2ce}.er-complete>div{display:flex;gap:9px;justify-content:center;margin-top:18px}
.er-map-picker{margin-bottom:22px;padding:20px;background:#21313e;border:1px solid #8aabb050;border-radius:12px;animation:er-scene-in .3s ease}.er-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.er-picker-heading h3{font-size:1.2rem;margin:0}.er-map-picker>p{color:#aabec6;font-size:.8rem;line-height:1.6}.er-map-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-height:560px;overflow:auto;padding:4px}.er-map-card{border:1px solid #67899740;background:#182a36;color:#e0ebea;display:flex;flex-direction:column;border-radius:10px;padding:0;overflow:hidden;text-align:left;min-width:0}.er-map-card strong{font-size:.72rem;line-height:1.4;padding:9px 10px 4px}.er-map-card small{font-size:.6rem;color:#9db6bf;padding:0 10px 11px}.er-map-card:hover{border-color:var(--map-color);transform:translateY(-2px)}.er-map-card.er-current{border:2px solid var(--map-color)}.er-map-done small{color:#a5deb3}.er-mini-room{display:block;height:65px;width:100%;background:linear-gradient(155deg,var(--map-wall),#152430);position:relative;border-bottom:1px solid #b7ced52b;overflow:hidden}.er-mini-room:before{content:'';position:absolute;left:0;right:0;bottom:0;height:19px;background:#a9937440;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}.er-mini-room i{position:absolute;left:22%;top:15%;width:23%;height:32%;background:#101c2b;border:2px solid var(--map-color);border-radius:3px}.er-mini-room:after{content:'';position:absolute;right:14%;bottom:15px;width:22%;height:35px;border:2px solid var(--map-color);border-radius:5px 5px 0 0;background:#192a35}.er-mini-room b{position:absolute;left:8px;bottom:6px;z-index:1;font-size:.65rem;color:var(--map-color)}
@keyframes er-scene-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes er-unlock{0%{filter:brightness(1)}45%{filter:brightness(1.18)}100%{filter:brightness(1)}}@keyframes er-marker{50%{opacity:.25}}@keyframes er-turn{to{transform:rotate(360deg)}}@keyframes er-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}@keyframes er-scan{50%{transform:translateY(-5px)}}@keyframes er-leaf{50%{transform:translateX(3px)}}@keyframes er-bubble{0%{transform:translateY(10px);opacity:0}30%{opacity:.45}100%{transform:translateY(-50px);opacity:0}}@keyframes er-snow{0%{transform:translate(0,-8px);opacity:0}20%{opacity:.7}100%{transform:translate(-7px,20px);opacity:0}}@keyframes er-star{50%{opacity:.35}}@keyframes er-wave{50%{transform:translateX(6px)}}@keyframes er-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.er-newly-opened .er-swung{animation:er-safe-open .7s ease both}.er-newly-opened .er-open-exit{animation:er-door-open .85s ease both}.er-newly-opened .er-pulled{animation:er-drawer-open .5s ease both}.er-newly-opened .er-lifted{animation:er-cushion-lift .5s ease both}
@keyframes er-safe-open{from{transform:translate(0,0) skewY(0) scaleX(1)}to{transform:translate(-12px,4px) skewY(-7deg) scaleX(.22)}}@keyframes er-door-open{from{transform:translate(0,0) skewY(0) scaleX(1)}to{transform:translate(-5px,0) skewY(9deg) scaleX(.16)}}@keyframes er-drawer-open{from{transform:translate(0,0)}to{transform:translate(0,12px)}}@keyframes er-cushion-lift{from{transform:translate(0,0) rotate(0)}to{transform:translate(8px,-18px) rotate(5deg)}}
@media(min-width:1100px){.game-wrap:has(.er-game){max-width:1200px}}
@media(max-width:850px){.er-layout{grid-template-columns:minmax(0,1fr)}.er-inspector{position:static;min-height:0}.er-inspector #erActions{max-width:400px}.er-inspector #erFeedback{min-height:0}.er-map-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.er-header h2{font-size:1.5rem}}
@media(max-width:560px){.er-game{padding:14px}.er-header{align-items:flex-start;gap:10px}.er-header>.er-button{font-size:.65rem;padding:8px;white-space:normal;min-width:85px}.er-header>.er-button span{display:none}.er-header h2{font-size:1.22rem}.er-header p{font-size:.75rem}.er-eyebrow{font-size:.56rem;letter-spacing:.07em}.er-zones{gap:5px}.er-zones button{font-size:.65rem;padding:8px 5px;flex-direction:column;gap:3px}.er-progress-row{font-size:.67rem;gap:12px}.er-object-buttons button{font-size:.64rem;min-width:90px}.er-inventory{flex-direction:column;align-items:flex-start;gap:8px}.er-inspector{padding:14px}.er-map-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:480px}.er-map-picker{padding:12px}.er-map-picker h3{font-size:1rem}.er-notebook{padding:14px}#erNotes{grid-template-columns:1fr;gap:14px}.er-complete{padding:18px}.er-complete>div{flex-direction:column}.er-object-marker{r:13px}}
@media(prefers-reduced-motion:reduce){.er-game *{animation:none!important;transition:none!important}}
.er-powered .er-ceiling-light{filter:none}
.er-hotspot:hover>g,.er-hotspot:focus-visible>g{filter:none}
.er-game{background:linear-gradient(165deg,#223440 0,#172631 46%,#15232e 100%)}
.er-header{padding:4px 2px 14px;border-bottom:1px solid #c5d4d126}
.er-stage{border:5px solid #314653;border-radius:15px;box-shadow:0 12px 28px #0b172555,inset 0 0 0 2px #ffffff12}
.er-stage:after{content:'';position:absolute;inset:0;border:1px solid #c5d5d326;border-radius:9px;pointer-events:none}
.er-scene{background:#263643}
.er-room-detail{opacity:.95}
.er-object-marker{opacity:.82;animation:none;stroke:#192c37;stroke-width:3;paint-order:stroke}
.er-object-done .er-object-marker{opacity:.3}
.er-hotspot:hover .er-object-marker,.er-hotspot:focus-visible .er-object-marker,.er-inspected .er-object-marker{opacity:1;stroke:#f5f0df;stroke-width:5}
.er-inspected .er-object-label{opacity:1}
.er-hotspot:hover>g,.er-hotspot:focus-visible>g,.er-inspected>g{filter:none}
.er-inspector{background:#263946;border-color:#93abb242;box-shadow:0 8px 22px #0d1b2938}
.er-inspector h3{font-family:Georgia,serif;font-size:1.25rem}
.er-object-buttons button{background:#2a3c48;border-color:#8babb450;font-weight:650}
.er-object-buttons button:hover,.er-object-buttons .er-selected{background:#3c515c;color:#fff7e8}
.er-zones button{background:#283b48}
.er-zones .er-active{background:#415665;box-shadow:inset 0 -3px 0 var(--er-accent)}
.er-notebook{background:#ebe7d9;border-color:#c7bfaa;box-shadow:0 7px 20px #0c18282d}
.er-map-card{box-shadow:0 4px 10px #0e1c2930}
.er-mini-room{height:76px;background:linear-gradient(155deg,var(--map-wall),#182935)}
.er-mini-room:before{height:24px;background:linear-gradient(#96836a66,#273746)}
.er-mini-room i{left:18%;top:14%;width:30%;height:40%;border-width:3px;border-radius:18px 18px 4px 4px;box-shadow:inset 0 0 0 3px #ffffff1a}
.er-mini-room:after{right:14%;bottom:20px;width:22%;height:39px;border-width:3px;border-radius:13px 13px 0 0;box-shadow:inset 0 0 0 3px #ffffff17}
@media(max-width:560px){.er-stage{border-width:3px}.er-object-buttons button{min-height:44px}.er-zones button{min-height:48px}}
