.box { position: relative; border-radius: 14px; overflow: hidden; margin: 12px 0; background: #0a4568; }
#tank { display: block; width: 100%; height: 62vh; min-height: 320px; cursor: crosshair; touch-action: manipulation; }
.box:fullscreen { border-radius: 0; margin: 0; }
.box:fullscreen #tank { height: 100vh; }
.box.pseudo-full { position: fixed; inset: 0; z-index: 50; border-radius: 0; margin: 0; }
.box.pseudo-full #tank { height: 100vh; }
.visitor { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: .95rem; opacity: 0; transition: opacity .6s; pointer-events: none; white-space: nowrap; }
.visitor.show { opacity: 1; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.controls input[type=range] { vertical-align: middle; }