.hop-map__stage{container-type:inline-size}.hop-map__wall{position:relative;overflow:hidden;aspect-ratio:2147 / 2576;background:#f1ede8}.hop-map__wall-room{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}.hop-map__wall-frame{position:absolute;display:block;overflow:hidden;background:#e9e4dc}.hop-map__wall-frame img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% var(--hop-wall-focus, 50%);transform:scale(calc(var(--hop-wall-zoom, 100) / 100));transition:transform .35s ease}.hop-map__wall-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 .5rem #281e1459;background:linear-gradient(115deg,#ffffff1a,#fff0 38%);pointer-events:none}.hop-map__wall-tag{position:absolute;inset-inline:0;inset-block-end:0;z-index:1;padding:.5rem .6rem;background:#1a1a1ad9;color:#fff;font-family:var(--font-body-family);font-size:1.1rem;font-weight:var(--font-body-weight-bold);letter-spacing:.04rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);transition:opacity .2s ease,transform .2s ease}.hop-map__wall-frame:hover img,.hop-map__wall-frame:focus-visible img{transform:scale(calc(var(--hop-wall-zoom, 100) / 100 * 1.04))}.hop-map__wall-frame:hover .hop-map__wall-tag,.hop-map__wall-frame:focus-visible .hop-map__wall-tag{opacity:1;transform:none}.hop-map__wall-frame:focus-visible{outline:.2rem solid rgb(var(--color-button));outline-offset:.2rem}@media screen and (min-width:750px){.hop-map__stage{display:flex;align-items:stretch}.hop-map__stage>.hop-map__wall,.hop-map__stage>.hop-map__viewport{block-size:calc(100cqw / 2.9933)!important}.hop-map__stage>.hop-map__wall{flex:0 0 auto;inline-size:auto;border-inline-end:var(--hop-rule-width) solid rgb(var(--color-foreground))}.hop-map__stage>.hop-map__viewport{flex:1 1 auto;min-inline-size:0}}@media screen and (max-width:749px){.hop-map__stage{display:flex;flex-direction:column}.hop-map__stage>.hop-map__wall{order:2;inline-size:100%;border-block-start:var(--hop-rule-width) solid rgb(var(--color-foreground))}.hop-map__wall-tag{opacity:1;transform:none;font-size:.9rem;padding:.3rem .4rem}.hop-map__wall-tag--generic{display:none}}.hop-map__wall-canvas{position:absolute;left:50%;top:50%;inline-size:100%;aspect-ratio:2147 / 2576;transform:translate(-50%,-50%)}.hop-map__divider{display:none}@media screen and (min-width:750px){.hop-map__wall-canvas{inline-size:max(100%,calc(100cqw / 2.9933 * 2147 / 2576));top:20%;transform:translate(-50%);margin-top:calc(max(100%,100cqw / 2.9933 * 2147 / 2576) * -.2 * 2576 / 2147)}.hop-map__stage>.hop-map__wall{inline-size:var(--hop-wall-w, auto)}.hop-map__stage.is-settling>.hop-map__wall{transition:inline-size .35s ease}.hop-map__stage.is-dragging{cursor:col-resize;-webkit-user-select:none;user-select:none}.hop-map__divider{display:block;position:relative;flex:0 0 0;z-index:6}.hop-map__divider-handle{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:.2rem;width:4.4rem;height:4.4rem;padding:0;border:var(--hop-rule-width, .15rem) solid rgb(var(--color-foreground));border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));font-size:2rem;line-height:1;cursor:col-resize;touch-action:none;box-shadow:0 .2rem .8rem #00000026;transition:background .15s ease,color .15s ease}.hop-map__divider-handle:hover,.hop-map__stage.is-dragging .hop-map__divider-handle,.hop-map__divider.is-hinting .hop-map__divider-handle{background:#e85d26;border-color:#e85d26;color:#fff}.hop-map__divider-hint{position:absolute;top:calc(50% + 3.2rem);left:0;transform:translate(-50%);padding:.3rem .8rem;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-family:var(--font-body-family);font-size:1.1rem;font-weight:var(--font-body-weight-bold);letter-spacing:.1rem;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease}.hop-map__divider.is-hinting .hop-map__divider-hint,.hop-map__divider-handle:hover+.hop-map__divider-hint{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/32/assets/hop-map-wall.css.map */