.walk-room{background:#62432e}.walk-surface{position:relative;aspect-ratio:12/7;isolation:isolate;touch-action:manipulation;cursor:crosshair;overflow:visible}.walk-surface:focus-visible{outline:3px solid #deb472;outline-offset:-3px}.walk-surface>canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.walk-actors{position:absolute;inset:0;pointer-events:none}.walker{position:absolute;width:clamp(52px,10.8333%,104px);transform:translate(-50%,-100%);pointer-events:auto;isolation:isolate;will-change:left,top}.walker .walker-button{position:relative;display:block;width:100%;height:auto;margin:0;padding:0;border:2px solid transparent;background:transparent;cursor:pointer}.walker .walker-button:hover:not(:disabled){background:#e8c57916;transform:none;border-color:#bc945b}.walker .walker-button canvas{width:100%;height:auto;margin:0;display:block;image-rendering:pixelated;transform-origin:50% 90%}.walker.me .walker-name{color:#ffe1a4;border-color:#ad8349;background:#543b29}.walker.selected .walker-button{border-color:#f0ce89;background:#eac77d17}.walker.selected .walker-name{background:#c29a5b;color:#3b2b21}.walker.receiving .walker-button{animation:received-gesture 1.2s steps(4)}.walker-name{position:absolute;left:50%;top:calc(100% - 10px);transform:translateX(-50%);width:max-content;max-width:150px;padding:1px 6px;color:#f0d8b0;background:#34271ee6;border:1px solid #947047;font-size:13px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 2px #291e18}.walker .seat-bubble{bottom:calc(100% - 10px);font-size:14px;max-width:174px;z-index:1000}.walk-destination{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:24px;height:18px;border:2px solid #e3bd74;color:#f3d99e;font-size:19px;line-height:1;pointer-events:none;background:#76512e50;z-index:1}.walk-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;background:#35261d;border-top:3px solid #90663e;color:#c5a476}.walk-controls p{font-size:14px;line-height:1.7;color:#e5c898}.walk-sync{display:inline-block;font-size:12px;color:#bba17e;margin-top:4px}.walk-sync.online{color:#b8ca95}.walk-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:30px 30px;gap:4px;flex-shrink:0}.walk-pad button{display:grid;place-items:center;background:#775333;border:2px solid #ad834e;box-shadow:0 2px #201911;color:#f3d394;font-size:21px;line-height:1;touch-action:none;user-select:none;padding:0}.walk-pad button:active{background:#ae824a;transform:translateY(2px);box-shadow:none}.walk-pad button[data-walk-key=ArrowUp]{grid-column:2}.walk-pad button[data-walk-key=ArrowLeft]{grid-column:1;grid-row:2}.walk-pad button[data-walk-key=ArrowDown]{grid-column:2;grid-row:2}.walk-pad button[data-walk-key=ArrowRight]{grid-column:3;grid-row:2}
.walk-surface{overflow:hidden}.walker.edge-left .walker-name,.walker.edge-left .seat-bubble{transform:none}.walker.edge-right .walker-name,.walker.edge-right .seat-bubble{transform:translateX(-100%)}.walker.edge-left .seat-bubble:after{left:8px}.walker.edge-right .seat-bubble:after{left:auto;right:8px}
@media(max-width:800px){.walker-name{font-size:12px}.walk-controls p{font-size:13px}.walk-controls{padding:12px 14px}.walk-pad{grid-template-columns:repeat(3,32px);grid-template-rows:29px 29px}}
@media(max-width:520px){.walker{width:clamp(48px,13%,66px)}.walker-name{font-size:10px;max-width:110px;padding:0 4px;top:calc(100% - 7px)}.walker .seat-bubble{font-size:11px;max-width:116px;min-width:45px;padding:5px;bottom:calc(100% - 6px)}.walker .bubble-icon{width:16px;height:16px}.walk-controls{gap:10px;padding:12px 10px;align-items:center}.walk-controls p{font-size:12px;line-height:1.8}.walk-sync{font-size:11px}.walk-pad{grid-template-columns:repeat(3,30px);grid-template-rows:30px 30px;gap:3px}.walk-pad button{font-size:20px}.walk-destination{width:16px;height:13px;font-size:14px;border-width:1px}}