.remote-player{transition:left 1s linear,top 1s linear,width 1s linear}
.remote-sprite{display:block;width:150%;aspect-ratio:1;margin-left:-25%;background-size:400% 800%;background-position:33.333% var(--facing);background-repeat:no-repeat;filter:drop-shadow(2px 2px 1px #0004)}
.remote-walking .remote-sprite{animation:remote-stride .44s steps(1) infinite}
@keyframes remote-stride{0%{background-position:0% var(--facing)}25%{background-position:33.333% var(--facing)}50%{background-position:66.667% var(--facing)}75%{background-position:100% var(--facing)}}
.room-chat{margin:16px 3%;padding:14px 18px;background:#19262c;border:1px solid var(--line);border-radius:8px;max-width:760px}.room-chat[hidden]{display:none}.room-chat summary{cursor:pointer;color:var(--gold);font-weight:600}.room-status{float:right;font-size:11px;color:var(--muted)}.chat-hint{font-size:11px;color:var(--muted);line-height:1.6}.chat-messages{max-height:160px;overflow:auto;overflow-wrap:anywhere;font-size:13px}.chat-messages p{margin:8px 0}.chat-messages strong{color:var(--gold-light)}.chat-form{display:flex;gap:8px;margin-top:12px}.chat-form input{min-width:0;flex:1;padding:10px;background:#101c22;border:1px solid var(--line);border-radius:4px;color:var(--text)}.chat-form>button{background:var(--gold);color:#172127;border:0;border-radius:4px;padding:10px 20px}.chat-error{font-size:12px;color:var(--gold-light);margin:6px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){.remote-player{transition:none}.remote-walking .remote-sprite{animation:none}}
@media(max-width:600px){.room-chat{padding:12px}.room-status{float:none;display:block;margin-top:5px}}
/* Keep chat inside the playable viewport, including fullscreen. */
.world-viewport .room-chat{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:12;width:min(480px,calc(100% - 32px));max-width:none;margin:0;padding:10px 14px;background:rgba(15,27,33,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-color:#d0b27c66;box-shadow:0 4px 20px #0003;text-shadow:0 1px 2px #0008}
.room-chat .chat-hint{font-size:10px;line-height:1.35;margin:7px 0;color:#e2e5dd}.room-chat .chat-messages{max-height:80px}.room-chat .chat-form{margin-top:8px}.room-chat .chat-form input{background:#101c227a}.room-chat summary{font-size:12px}.room-chat .room-status{font-size:10px}

@media(max-width:760px){.world-viewport .room-chat{width:calc(100% - 20px);bottom:8px;padding:8px 10px}.room-chat .room-status{float:right;display:inline;margin:0}.room-chat .chat-messages{max-height:64px}.room-chat .chat-form input{font-size:16px;padding:8px}.room-chat .chat-form>button{padding:8px 12px}.world-viewport:has(.room-chat) .touch-pad,.world-viewport:has(.room-chat) .world-corner{bottom:calc(var(--chat-height,180px) + 20px)}}
/* Compact message bar; messages appear only as temporary speech bubbles. */
.world-viewport .room-chat{width:min(648px,calc(90% - 28.8px));padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:none}
.room-chat .chat-form{margin:0;gap:10px}.room-chat .chat-form input{padding:14px 18px;background:rgba(12,15,24,.65);border:1px solid #b6bed455;border-radius:8px;color:#fff;font-size:16px;caret-color:#fff;box-shadow:0 2px 10px #0002}.room-chat .chat-form input::placeholder{color:#c1c1ca}.room-chat .chat-form input:focus{outline:1px solid #d0b27c;background:rgba(12,15,24,.78)}.room-chat .chat-form>button{background:rgba(18,24,32,.6);border:1px solid #d0b27c99;border-radius:8px;color:var(--gold-light);padding:12px 22px}.room-chat .chat-error:empty{display:none}.room-chat .chat-error:not(:empty){background:#121820dd;padding:6px;border-radius:4px}.room-chat .room-status{position:absolute;float:none;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){.world-viewport .room-chat{padding:0;width:calc(90% - 18px)}.room-chat .chat-form{gap:6px}.room-chat .chat-form input{padding:10px 12px}.room-chat .chat-form>button{padding:10px 14px}}
.player .speech-bubble{position:absolute;bottom:calc(100% + 32px);left:50%;transform:translateX(-50%);width:max-content;max-width:220px;max-height:150px;overflow-wrap:anywhere;overflow:hidden;white-space:normal;padding:9px 12px;border:1px solid #d0b27ca6;border-radius:12px;background:rgba(15,24,31,.92);color:#fff;font:13px/1.4 var(--sans);text-align:center;box-shadow:0 3px 12px #0005;pointer-events:none;z-index:20}.player:has(.speech-bubble){z-index:8}
@media(max-width:600px){.player .speech-bubble{max-width:170px;font-size:12px}}
.player .speech-bubble{animation:bubble-in .18s ease-out;transition:opacity .4s}.player .speech-bubble.fading{opacity:0}
@keyframes bubble-in{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.player .speech-bubble{animation:none;transition:none}}