.vjk-wrap{max-width:780px;margin:1.5rem auto;position:relative}.vjk-stage{position:relative;width:100%;line-height:0}.vjk-bg{display:block;width:100%;height:auto}.vjk-door{position:absolute;transform:translate(-50%,-50%);width:8%;aspect-ratio:1/1;min-width:0;border:1.5px solid rgba(255,241,202,.85);border-radius:5px;background:rgba(35,42,42,.48);color:#fff9e6;text-shadow:0 1px 3px #111;font-weight:800;font-size:clamp(12px,2.5vw,24px);line-height:1;cursor:pointer;box-shadow:0 2px 7px #0006;display:flex;align-items:center;justify-content:center;padding:0}.vjk-door:hover,.vjk-door:focus-visible{background:rgba(88,43,33,.83);outline:2px solid #ffe3a4;outline-offset:1px}.vjk-locked{background:rgba(38,43,49,.45)}.vjk-help{font-size:.9rem;text-align:center;line-height:1.5;margin:.6rem 0}.vjk-modal[hidden]{display:none}.vjk-modal{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px;line-height:1.6}.vjk-panel{background:#fffaf0;color:#2c2924;width:min(640px,100%);max-height:85vh;overflow:auto;padding:30px;position:relative;border-radius:12px;box-shadow:0 8px 35px #0008}.vjk-close{position:absolute;right:12px;top:8px;background:transparent;border:0;font-size:32px;cursor:pointer;color:#333}.vjk-heading{margin:0 30px 16px 0;font-size:1.6rem;color:#553d2d}.vjk-story{font-size:1.05rem}@media(max-width:520px){.vjk-door{font-size:clamp(10px,3vw,17px);border-radius:3px}.vjk-panel{padding:24px 18px}}

/* Hidas luukun avautuminen pienestä luukusta suureksi kertomusikkunaksi. */
.vjk-modal.vjk-appearing{animation:vjk-shade 1.35s ease-out both}
.vjk-modal.vjk-appearing .vjk-panel{transform-origin:center center;animation:vjk-door-open 1.35s cubic-bezier(.18,.7,.2,1) both}
@keyframes vjk-shade{0%{background:rgba(0,0,0,0)}100%{background:rgba(0,0,0,.72)}}
@keyframes vjk-door-open{0%{opacity:.3;transform:translate(var(--vjk-x),var(--vjk-y)) scale(.08) rotateY(-80deg)}25%{opacity:.8;transform:translate(calc(var(--vjk-x)*.7),calc(var(--vjk-y)*.7)) scale(.25) rotateY(-45deg)}70%{opacity:1;transform:translate(0,0) scale(.93) rotateY(0)}100%{opacity:1;transform:translate(0,0) scale(1) rotateY(0)}}
@media(prefers-reduced-motion:reduce){.vjk-modal.vjk-appearing,.vjk-modal.vjk-appearing .vjk-panel{animation:none}}