#world3d { position: absolute; inset: 0; z-index: 1; }
#world3d canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -3px; }
body:not(.has-3d) #world3d { pointer-events: none; }
.has-3d #house, .has-3d .city { display: none; }
.camera-controls { display: none; position: absolute; top: 6px; right: 8px; z-index: 2; grid-template-columns: repeat(2,44px); gap: 3px; }
.has-3d.camera-open .camera-controls { display: grid; }
.camera-controls { top: 54px; }
#camera-toggle { display: none; position: absolute; top: 6px; right: 8px; z-index: 2; width: 56px; height: 44px; border-radius: 8px; border: 1px solid #c6cbaa24; background: #243a32c9; color: #e4d4af; font-size: 12px; }
.has-3d #camera-toggle { display: block; }
.camera-controls button { width: 44px; height: 44px; padding: 0; border: 1px solid #c6cbaa24; border-radius: 8px; background: #243a32c9; color: #e4d4af; font: 22px Georgia; touch-action: manipulation; }
.camera-controls button:hover { background: #44614f; }
.actor-status { position: absolute; bottom: 29px; left: 50%; transform: translateX(-50%); z-index: 2; color: #dfd2af; padding: 5px 10px; border-radius: 20px; background: #152820ba; font-size: 10px; white-space: nowrap; pointer-events: none; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
.scene-caption { z-index: 2; }
@media (max-height:640px) { .camera-controls { grid-template-columns: repeat(3,44px); top: 52px; gap: 2px; } .actor-status { bottom: 3px; font-size: 9px; } }